Tag: JavaScript

Friday 5: Useful things for coders (March 26, 2021 edition)

Post author By Joey deVilla
Post date March 26, 2021
No Comments on Friday 5: Useful things for coders (March 26, 2021 edition)

Every Friday, I publish the Friday 5, a list of 5 links to useful things for coders.

In this week’s Friday 5: a site that catalogs VS Code’s surprising capabilities, a look at the darker corners of Go, background processing in Android, a full-text search in 150 lines of Python, and generating brighter and darker versions of color in JS.

VSCodeCanDoThat.com

Visual Studio Code is a far more capable editor than you might suspect, and the VS Code Can Do That?! can help you discover tips, tricks, and techniques to help you get the most out of this editor.

Each tip/trick/technique comes with a video showing the tip/trick/technique in action and a link to a more detailed description of the tip/trick/technique.

Check it out: VSCodeCanDoThat.com

Darker Corners of Go

Rytis Bieliunas writes:

While simplicity is at the core of Go philosophy you’ll find in further text it nevertheless enables numerous creative ways of shooting yourself in a foot.

Since now I have used Go for production applications for several years and on the account of the many holes in my feet I thought I’d put together a text for the fellow noob students of Go.

My goal is to collect in one place various things in Go that might be surprising to new developers and perhaps shed some light on the more unusual features of Go. I hope that would save the reader lots of Googling and debugging time and possibly prevent some expensive bugs.

Check it out: Darker Corners of Go

Background Processing in Android

Here’s an article from the Auth0 Developer Blog, where I’m one of the writers/editors:

Android apps use the main thread to handle UI updates and operations (like user input). Running long-running operations on the main thread can lead to app freezes, unresponsiveness and thus, poor user experience. To mitigate this, long-running operations should be run in the background. Android has several options for running tasks in the background and in this article, we’ll look at the recommended options for running different types of tasks.

This article uses Java and covers threading, WorkManager, and AlarmManager.

Check it out: Background Processing in Android

Building a full-text search engine in 150 lines of Python code

If you’ve wondered how full-text search engines work and thought about building your own, this basic implementation in Python is worth trying out. In this article, you’ll build an engine that searches Wikipedia’s article abstracts and ranks them for relevance, and it’ll do so in milliseconds!

The article covers these major topics:

Collecting and formatting the data
Indexing the collected data (which includes stemming the words in the data to their basic forms)
Searching
Ranking results by relevance

Check it out: Building a full-text search engine in 150 lines of Python code

Generate Brighter And Darker Versions Of Color With JavaScript

TinyColor is a fantastic JavaScript library that can help you out with a whole bunch of tasks when you’re working with colors. This article takes a quick look at this more-useful-than-you-might-think library.

Check it out: Generate Brighter And Darker Versions Of Color With JavaScript

Are there useful things for coders that should appear in the next edition of Friday 5? Let me know at joey@joeydevilla.com!

Tags Android, Go, golang, Java, JavaScript, Python, search, Visual Studio Code

Humor Programming

Developer meme of the day

Post author By Joey deVilla
Post date November 4, 2020
No Comments on Developer meme of the day

Photo: Chef (labeled “developers”) pouring olive oil from a comically oversized bottle (labeled “JavaScript”) onto a salad (labeled “website”). — Tap to view at full size.

Not pictured: A oil drum-sized barrel of balsamic vinegar labeled “React”, “Vue”, or “Angular”, and a forgotten can of anchovies labeled “jQuery”.

Thanks to Cameron Barrett for the find!

Tags JavaScript

Programming Reading Material What I’m Up To

JavaScript books that you can read online for FREE

Post author By Joey deVilla
Post date September 24, 2020
No Comments on JavaScript books that you can read online for FREE

My actual setup at my old office (February 3, 2020), where I coded in JavaScript all day.

If…

You’ve decided to learn JavaScript (or just need a refresher), and
you’re short on cash due to the current economic situation

…you’re in luck! There are a couple of good books on JavaScript whose contents are available to read online, free of charge!

The first of these books is Eloquent JavaScript, Third Edition, written by Marijn Haverbeke and published by No Starch Press. It’s not just an introduction to JavaScript, but an introduction to programming in general. It’s beginner-friendly, which is one of the reasons why it’s the main book for the first part of the JavaScript/React course that I’m teaching.

You can Eloquent JavaScript, Third Edition online here.

The second book is JavaScript for Impatient Programmers, ECMAScript 2020 edition, written by Dr. Alex Rauschmeyer. Its coverage of JavaScript is more complete, but it’s a little less beginner-friendly, which is why it’s the backup book for my course. I’m going to incorporate some of its content into the course, and point students to the online edition if they’d like some additional reading material.

You can read JavaScript for Impatient Programmers, ECMAScript 2020 edition online here.

Tags JavaScript

Career Programming

Programmer interview challenge 2, part 5: An elegant “watcher”-based FizzBuzz implementation in JavaScript

Post author By Joey deVilla
Post date June 19, 2020
No Comments on Programmer interview challenge 2, part 5: An elegant “watcher”-based FizzBuzz implementation in JavaScript

Silhouette of a little black dress on a dress form — Ask someone who follows fashion what they think of when the word “elegant” comes up, and they’ll often come up with the Little Black Dress.

In the previous article in this series, I put out a call for alternate implementations of the “watcher”-based FizzBuzz solution. Frank Quednau answered the call with this elegant bit of JavaScript:

const wordWatcher = (interval, word) => {
  let count = 0;
  return () => {
    count++;
    if (count === interval) {
      count = 0;
      return word;
    }
    return "";
  }
}

const fizzWatcher = wordWatcher(3, "Fizz");
const buzzWatcher = wordWatcher(5, "Buzz");

for (number of Array(100).keys()) {
  const potentialFizzBuzz = `${fizzWatcher()}${buzzWatcher()}`;
  console.log(potentialFizzBuzz ? potentialFizzBuzz : number + 1);
};

const wordWatcher = (interval, word) => {

let count = 0;

return () => {

count++;

if (count === interval) {

count = 0;

return word;

}

return "";

}

const fizzWatcher = wordWatcher(3, "Fizz");

const buzzWatcher = wordWatcher(5, "Buzz");

for (number of Array(100).keys()) {

const potentialFizzBuzz = `${fizzWatcher()}${buzzWatcher()}`;

console.log(potentialFizzBuzz ? potentialFizzBuzz : number + 1);

};

Let’s take a closer look at the code for the watcher, which is assigned a word and keeps track of when to say it:

const wordWatcher = (interval, word) => {
  let count = 0;
  return () => {
    count++;
    if (count === interval) {
      count = 0;
      return word;
    }
    return "";
  }
}

const wordWatcher = (interval, word) => {

let count = 0;

return () => {

count++;

if (count === interval) {

count = 0;

return word;

}

return "";

}

wordWatcher has two parameters:
- interval: The x in “Every xth number”
- word: The word to be output
It uses those parameters to customize the function that it returns: a function that when called, does two things:
- It increments its internal counter count, and
- returns either word (if it’s time to say the word) or an empty string.

If you find yourself writing a lot of similar code with only minor differences — or worse, cutting and pasting code, followed by typing in those minor differences — you may be looking at an opportunity to use a function like this.

If you prefer to have your functions marked with the keyword function, you can change out the arrow notation and the code will still work:

function wordWatcher(interval, word) {
  let count = 0;
  return function() {
    count++;
    if (count === interval) {
      count = 0;
      return word;
    }
    return "";
  }
}

function wordWatcher(interval, word) {

let count = 0;

return function() {

count++;

if (count === interval) {

count = 0;

return word;

}

return "";

}

With wordWatcher defined, creating watchers for Fizz and Buzz is easy:

const fizzWatcher = wordWatcher(3, "Fizz");
const buzzWatcher = wordWatcher(5, "Buzz");

1 2	const fizzWatcher = wordWatcher(3, "Fizz"); const buzzWatcher = wordWatcher(5, "Buzz");

And here’s the loop that provides the output:

for (number of Array(100).keys()) {
  const potentialFizzBuzz = `${fizzWatcher()}${buzzWatcher()}`;
  console.log(potentialFizzBuzz ? potentialFizzBuzz : number + 1);
};

for (number of Array(100).keys()) {

const potentialFizzBuzz = `${fizzWatcher()}${buzzWatcher()}`;

console.log(potentialFizzBuzz ? potentialFizzBuzz : number + 1);

};

If it’s time to say Fizz, Buzz, or FizzBuzz, potentialFizzBuzz will contain that string. The calls to fizzWatcher() and buzzWatcher() will also increment their internal counters.
If potentialFizzBuzz contains anything, its contents will be printed to the console; otherwise, the current number — which has 1 added to it because array indexes start at 0 and the FizzBuzz game starts at 1 — is printed instead.

You should check out the rest of Frank’s Gist, Fizzbuzzes in many colours, which looks at FizzBuzz solutions written in several languages.

What does it mean for code to be “elegant”, anyway?

In ordinary everyday use, elegant means “pleasingly graceful and stylish in appearance or manner.” The term has been adapted by people in problem-solving fields — science, mathematics, and yes, programming — to mean “pleasingly ingenious and simple”.

And that’s what elegant code is: pleasingly ingenious and simple. This FizzBuzz implementation is elegant because it solves the problem in just over a dozen lines, is simple and concise, and even provides some new insight into programming (the use of custom-generated functions to avoid repetition).

Here’s a good list of qualities of elegant code, courtesy of Christopher Diggins article, What is the Definition of Elegant Code?:

It is succinct
It is easy to understand
Each function does one well-defined task
It conveys the programmer’s intent
It reflects the problem domain
It is easy to modify and reuse
If it fails, it is easy to identify that it is has failed, where it has failed, and why it has failed.
Its behavior (in good and bad conditions) is easy to predict

Check out the following articles — sooner or later, you’ll be interviewed by a programmer who’ll want to know if you’ve given some thought to some of programming’s more philosophical questions, and “What does it mean for code to be elegant?” is one of them:

Quora, via Forbes: What Does One Mean By ‘Elegant’ Code?
Communications of the ACM: What Makes a Program Elegant?
Word Aligned: Elegance and Efficiency
The New Stack: This Week in Programming: On Writing Elegant Code

What’s next

FizzBuzzBazz! (or: Making FizzBuzz harder).

Previously, in the “Programmer interview challenge” series

Tags FizzBuzz, JavaScript

Career Programming

Programmer interview challenge 1, revisited: Revising “Anagram” in Python and implementing it in JavaScript

Post author By Joey deVilla
Post date June 11, 2020
7 Comments on Programmer interview challenge 1, revisited: Revising “Anagram” in Python and implementing it in JavaScript

In the previous article, I wrote about a challenge that’s often given to programmers at a tech interview: Write a program that determines if two words are anagrams. I posted a solution in Python; check it out here. In this article, we’ll refactor the Python code and write a JavaScript implementation.

Refactoring the Python version

Looking at the code for anagram(), it’s quite clear that it isn’t DRY (Don’t Repeat Yourself), but manifestly the opposite: WET (Write Everything Twice)!

Under the time constraints of a technical interview, you might not always have the time or cognitive bandwidth to keep your code DRY, but if you should try to do so if possible. You may find that it helps convey your algorithmic thinking more effectively to the interviewer, and that’s what you want. After all, your goal throughout the process is to prove that you can actually program.

The repeated code is the part that takes a string, sorts its characters into alphabetical order, and removes the leading space if it exists. Let’s turn that code into its own method:

def sortLetters(word):
  # Returns the given word with its letters sorted
  # into alphabetical order and with any
  # leading space removed.
  word_lowercase = word.lower()
  return ''.join(sorted(word_lowercase)).lstrip()

def sortLetters(word):

# Returns the given word with its letters sorted

# into alphabetical order and with any

# leading space removed.

word_lowercase = word.lower()

return ''.join(sorted(word_lowercase)).lstrip()

With this method defined, we can use it in anagram(). In fact, we can nest it within anagram(). Here’s the revision:

def anagram(first_word, second_word):
  # Returns True if the given words are made of the exact same characters,
  # ignoring capitalization and spaces.

  def sortLetters(word):
    # Returns the given word with its letters sorted
    # into alphabetical order and with any
    # leading space removed.
    word_lowercase = word.lower()
    return ''.join(sorted(word_lowercase)).lstrip()

  return sortLetters(first_word) == sortLetters(second_word)

def anagram(first_word, second_word):

# Returns True if the given words are made of the exact same characters,

# ignoring capitalization and spaces.

def sortLetters(word):

# Returns the given word with its letters sorted

# into alphabetical order and with any

# leading space removed.

word_lowercase = word.lower()

return ''.join(sorted(word_lowercase)).lstrip()

return sortLetters(first_word) == sortLetters(second_word)

Creating the sortLetters() method doesn’t just DRY up the code, but helps the method better convey what it does. Now, what anagram() does is very clearly conveyed by its return statement: it tells you if the first word with its letters sorted is the same as the second word with its letters sorted.

I confirmed that this refactored code works by running the tests, which show just how useful having tests is.

Implementing `anagram()` in JavaScript

Here’s anagram() in JavaScript:

function anagram(firstWord, secondWord) {
  
  function sortLetters(word) {
    return word
      .toLowerCase()
      .split('')
      .sort()
      .join('')
      .trim()
  }

  return sortLetters(firstWord) === sortLetters(secondWord)
}

function anagram(firstWord, secondWord) {

function sortLetters(word) {

return word

.toLowerCase()

.split('')

.sort()

.join('')

.trim()

}

return sortLetters(firstWord) === sortLetters(secondWord)

}

Note that the JavaScript version of sortLetters() is structured slightly differently from the Python version. That’s because JavaScript’s sort() is an array method rather than a general function like Python’s sorted().

In the JavaScript version of sortLetters(), I use method chaining to spell out what happens to the given word step by step:

Convert the word to lower case
Convert that into an array of characters
Sort that array
Convert that array into a string
Remove any trailing or leading whitespace

I could’ve written sortLetters() this way…

function sortLetters(word) {
  return word.toLowerCase().split('').sort().join('').trim()
}

function sortLetters(word) {

return word.toLowerCase().split('').sort().join('').trim()

}

…but I find that “put each method in the chain on its own line” approach more clearly conveys what I’m trying to do:

function sortLetters(word) {
  return word
    .toLowerCase()
    .split('')
    .sort()
    .join('')
    .trim()
}

function sortLetters(word) {

return word

.toLowerCase()

.split('')

.sort()

.join('')

.trim()

}

Next: The Swift version!

Previously, in the “Programmer interview challenge” series

Programmer interview challenge 1: Anagram

Tags DRY, Interviews, JavaScript, Python, refactoring, WET

Uncategorized

WAT? A Funny Look at Ruby and JavaScript Oddities

Post author By Joey deVilla
Post date January 28, 2012
2 Comments on WAT? A Funny Look at Ruby and JavaScript Oddities

The Urban Dictionary definition of "wat" is "the only proper response to something that makes absolutely no sense". The concept of wat is covered a little more completely on its page in Know Your Meme.

"Wat" is also the title of a funny demo of Ruby and JavaScript oddities presented by Gary Bernhardt at CodeMash 2012, a rather unlikely tech conference — it takes place in Sandusky, Ohio, in Ohio’s largest indoor waterpark. (If you just said "wat" right now, you’ve used the word correctly.)

In the video, you see this classic wat bit about undefined variables and assignment in Ruby:

You’ll also marvel at the way JavaScript treats (array + array) vs. (array + object) vs. (object + array) vs. (object + object):

Watch the video, and wait for that final slide, which is pure, hilarious wat!

This article also appears in the Shopify Technology Blog.

Tags JavaScript, Ruby, Video, WTF

Uncategorized

The jQuery Online Conference: Monday, July 12th – Everywhere!

Post author By Joey deVilla
Post date July 8, 2010
1 Comment on The jQuery Online Conference: Monday, July 12th – Everywhere!

Are you a web developer and want to sharpen your jQuery skills? Would you like to attend a conference featuring some of the brightest lights in jQuery programming? Are you too short on time and travel expenses to hit such a conference?

For a mere US$150 and no travel at all, you can attend the jQuery Online Conference. It’s a live, over-the-‘net conference taking place on Monday, July 12th starting at 12:00 noon EDT / 9:00 a.m. Pacific and featuring these four sessions:

Beyond String Concatenation. Using jQuery Templating to Cleanly Display Your Data
Rey Bango (Client-Web Community Program Manager for Microsoft and Head of Evangelism for the jQuery JavaScript Project)
In this presentation, Rey will show you a new way to produce easily maintainable dynamic pages via pre-built JavaScript templates and the Microsoft jQuery templating plugin.
Testing Your Mobile Web Apps
John Resig (JavaScript tool developer for Mozilla and creator of jQuery)
This talk will be a comprehensive look at what you need to know to properly test your web applications on mobile devices, based upon the work that’s been done by the jQuery team. We’ll look at the different mobile phones that exist, what browsers they run, and what you can do to support them. Additionally we’ll examine some of the testing tools that can be used to make the whole process much easier.
Taking jQuery Effects to the Next Level
Karl Swedberg (Web developer at Fusionary Media, member of the jQuery Team, author of jQuery 1.3 and 1.4 Reference Guides and maintainer of the jQuery API site)
One of the first things web developers learn to do with jQuery is to show and hide elements on a page and then add some flair by sliding those elements up and down or fading them in and out. Too often, though, we stop there, missing out on the incredible range and flexibility of jQuery’s core effects. In this talk, we’ll investigate both standard and custom animations and how they can be used to create useful and fun effects. We’ll also build a couple effects plugins, explore parts of the effects API that are often overlooked, and learn how to avoid common problems when attaching these effects to certain events.
jQuery Pluginization
Ben Alman (Developer at Boston.com, contributor to jQuery and Modernizr)
In this live-coding session, Ben explains how, with just a little thought and effort around generalization, parameterization and organization, you can convert your "just get the job done" jQuery code into a legitimate, reusable, modular jQuery plugin.

Your conference attendance fee not only lets you watch the live event and ask questions of the presenters, it also lets you watch the recordings of the events any time afterwards. So if you can’t catch the live event (perhaps you’re busy at work, or it’s 3:00 a.m. in your time zone), you can still watch the presentations. This also lets you watch the live event to get the general idea, and then watch it again for note-taking or hands-on workshopping.

For more information about the conference, visit the jQuery Online Conference site.
To register for the conference, visit the jQuery Online Conference registration page. (Yes, there are discount rates for groups and students.)

This article also appears in Canadian Developer Connection.

Tags conference, JavaScript, jQuery, online, Programming

What does it mean for code to be “elegant”, anyway?

What’s next

Previously, in the “Programmer interview challenge” series

Refactoring the Python version

Implementing anagram() in JavaScript

Previously, in the “Programmer interview challenge” series

Implementing `anagram()` in JavaScript