OOP in JS: Series Introduction

Series Table of Contents

  • Part 1: Series Introduction (this article)
  • Part 2: The Prototype Chain (coming soon)
  • Part 3: The this Keyword (coming soon)
  • Part 4: The new Keyword (coming soon)
  • Part 5: Classes (coming soon)

This series of articles are my notes on Object-Oriented Programming (OOP), as it is in JavaScript. OOP is a popular programming paradigm that allows us a way to structure and maintain complex code.

Continue reading “OOP in JS: Series Introduction”

JavaScript Template Literals

Up until now, we only had two ways to write a string in JavaScript – single and double quotes. If we wanted to interpolate a variable with one of these string options, we’d need to break out of the string and concatenate the variable.

As of ES2015, we are able to use Template Literals. These are string literals that allow embedded expressions.

Continue reading “JavaScript Template Literals”

Modern JavaScript: Arrow Functions

New with ES6, we have an additional way to write function expressions in our code – as arrow functions. This new syntax offers 3 main benefits:

  • They are much more concise than regular function expressions/definitions
  • They have implicit returns, which allow us to write single-line expressions (much like we can do with conditionals and the ternary operator)
  • The value of this is lexically bound, meaning that it is not re-bound when you use an arrow function inside of another function – which is very helpful for asynchronous callbacks
Continue reading “Modern JavaScript: Arrow Functions”

Intro to the Web Storage API

What is Web Storage and when would you use it?

There are instances where storing data in a users browser can be really helpful. Up until somewhat recently, saving the state of the application locally in the browser via Cookies was the main way to achieve this. Cookies have limitations, however. For example, their max size (4093 bytes) and the fact that they have to me transmitted with every request.

Continue reading “Intro to the Web Storage API”

Getting Started with Grunt.js

For quite some time, I’ve been hearing a lot of great things about Grunt.js: What it does for automating tasks in the development process; how it is so configurable; the fact that it is open source and driven by such a great community of developers; and how much easier it is to configure compared to other build scripts, such as Ant. I even sat through a great session by Ben Alman (the creator) at the 2012 jQuery Conference in San Francisco.

When I initially took a look at the project and what it would take to get up and running, I was a little intimidated and did not really know where to begin. So, as I usually do in those situations, I put it off. Finally, after about a year of hearing so many positive opinions about Grunt, I decided to just sit down for an afternoon and dig into it. I am so glad I did because I absolutely LOVE it!

Continue reading “Getting Started with Grunt.js”

JavaScript and Media Queries

When developing a responsively designed web site, it is likely that you will come across a situation where you will want to selectively execute a JavaScript callback based on a media query comparison. For example, you may want to alter your menu layout for small-screen devices. Or you may wish to load in specific content only on large-screen devices. Luckily, these capabilities are currently available. In this article I will cover a couple methods and show you that this can be done without much trouble at all!

Continue reading “JavaScript and Media Queries”