Tag: JavaScript

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

Uncategorized

Internet Explorer 9 Videos on Channel 9

Post author By Joey deVilla
Post date June 27, 2010
1 Comment on Internet Explorer 9 Videos on Channel 9

By now, you’ve probably seen my article covering the new, faster, even more standards-compliant Platform Preview 3 of Internet Explorer 9. From hardware acceleration to a speed-boosted JavaScript engine with support for new ECMAScript 5 language features to support for SVG, <audio>, <video> and <canvas> tags, IE9 is shaping up to be a great browser for an open web.

Before there were Microsoft blogs (such as Canadian Developer Connection), there was Channel 9, Microsoft’s community site run by Microsoft employees. Like Microsoft blogs, Channel 9 gives you unfiltered access to the people building stuff at The Empire, all outside the control of the marketing and PR departments. Channel 9 features a lot of videos – there are times when they post several videos in a day – featuring developer news and training, training kits and courses, discussion forums and wikis for various Microsoft tools and technologies. If you’re a .NET developer or just curious about what’s going on the in the .NET world, you should check out Channel 9 and see what’s happening.

Channel 9 posted a number of videos covering the new features in the third Platform Preview of Internet Explorer 9. I’ve gathered them all into this blog article – enjoy!

A Look at the New IE9 Demos

Can’t see the video? You can download and install Silverlight or download the video in MP4, MP3, WMA, WMV, WMV (High) or Zune formats.

This video shows some of the sample apps living on the IE Test Drive site in action. It covers the following demos:

<canvas> and FishIE Tank

Can’t see the video? You can download and install Silverlight or download the video in MP4, MP3, WMA, WMV, WMV (High) or Zune formats.

Here’s a closer look at the FishIE Tank demo and how it makes use of <canvas> to draw up to thousands of animated, moving, scaling fish sprites.

<canvas> and Amazon.com

Can’t see the video? You can download and install Silverlight or download the video in MP4, MP3, WMA, WMV, WMV (High) or Zune formats.

Another <canvas> demo: Amazon Shelf. This one ties into Amazon’s data to create a virtual bookshelf that lets you browse Amazon’s catalogue of books.

<video> and IMDb Video Panorama

Can’t see the video? You can download and install Silverlight or download the video in MP4, MP3, WMA, WMV, WMV (High) or Zune formats.

The IE9 team showed a preview of support for the <video> tag, and with Platform Preview 3, you can try it out for yourself. In this video, you see how it’s used to build the IMDb Video Panorama demo.

ECMAScript 5 and the Tile Game

Can’t see the video? You can download and install Silverlight or download the video in MP4, MP3, WMA, WMV, WMV (High) or Zune formats.

There are lots of boring ways to show of ECMAScript 5’s new array methods in action, but why not show them off with a fun game? In addition to the new JavaScript goodies, the ECMAScript 5 Game demo also shows off:

HTML5 <video> and <audio>
CSS3 multiple backgrounds
HTML5 local storage (first made available in IE8)
DOM Level 3 events
<window.getComputedStyle()>

This article also appears in Canadian Developer Connection.

Tags browsers, canvas, ECMAScript, HTML5, IE, IE9, Internet Explorer, JavaScript, Video

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

A Look at the New IE9 Demos

<canvas> and FishIE Tank

<canvas> and Amazon.com

<video> and IMDb Video Panorama

ECMAScript 5 and the Tile Game

Implementing `anagram()` in JavaScript