When writing with Javascipt for the web, there are many APIs available for us to use. Some are very mature such as DocumentFragment while some are more experimental (yet still usable) like WebGL. In this article we combine two of these APIs to make a feature that many websites implement, sending messages to the user using the native browser notification (not to be confused with push notifications).

Notification API

The image above is a simple example of a native browser notification. In the example, we use the title, body, and icon properties.

Properties:

• title is the string ‘Hi i\’m Chris!’ (this is required)
• body is the string ‘Notification API with Page Visibility API’
• icon is the url string for the icon

Create Notification

const title = 'Hi i\'m Chris!';
const body = 'Notification API with Page Visibility API';
const icon = '/icon.ico';
const options = {body, icon};

Memory leaks are often associated with big enterprise RESTful services when an object is stored in memory but cannot be accessed by any of the running code. This causes diminishing performance ability of the application by reducing the amount of available memory for it to perform tasks (and could eventually lead to thrashing).

Since Javascript has normally been used for client side scripting, this has not been an issue because when a user refreshes a page or closes the browser the information about the entire page is removed from memory (obviously excluding cookies, browser storage capabilities, or etc.).

However since Javascript is more and more being used to create web applications using SPA architecture, AJAX calls, and other tools to provide a user experience similar to a desktop application, we start encountering (relatively minor) memory leak problems. I mean the worst thing is...

So recently I tried to initialize an array of empty objects in javascript. I wanted it to be configurable with how many elements are present in the initial array as well as what I initialize it with (it may not be an empty object in the future).

ES6 comes into mind with it’s new Array methods. Using Array.prototype.fill together with dynamically creating an Array using its constructor method solves all my problems since its configurable with its initial length and what to fill it with.

Array.prototype.fill()

The fill() method fills all the elements of an array from a start index to an end index with a static value.

Syntax:

arr.fill(value[, start = 0[, end = this.length]])

Example:

const numberOfBooks = 7;
const myFavouriteBook = 'Harry Potter';
const favouriteBooks = new Array(numberOfBooks);
favouriteBooks.fill(myFavouriteBook);

console.log(favouritebooks);
// ["Harry Potter",

Angular and performance.

When you do a Google search of these two words together, what you get it most likely blog posts about fixing performance issues or ways to avoid pitfalls. Theres no hiding the fact that the not-so-secret secret of Angular is that it is slow. Anyone who has ever done a big Angular application or even writing an ng-repeat inside an ng-repeat can attest to it’s slowness.

A Google search of “angular performance” today leads to a result of a very unique Github project called ngReact. ngReact is a project to use React Components in Angular by replacing the view component and keeping the rest of the Angular functionality.

Facebook’s React library is designed to be used as a view component atop other JavaScript frameworks.
NgReact is a small library providing helpers and showing examples of achieving interoperability between React and Angular.

This led to my...

Lately as my team moves towards a mandatory ES6 development cycle, we often go into arguments about which keyword to use to declare a variable. As outlined in my previous blog, ES6 brings 2 new variable declaration keywords to javascript: namely let and const. Both are new to ES6. Both are block scoped. Both are in the temporal dead zone while hoisted and waiting to be declared.

The argument then is, when do we use const over let

This stirs the pot quite a bit since we have eslint installed using a unified linter config (spoiler alert: it’s the de facto standard Airbnb style guide). My position is to use const over let when possible. As is the position of many others in the industry.

“use const by default, let only where it is required and var to identify code which needs to be refactored”

Rose Edwards

Immutability of const

The idea of course is to in the end achieve immutability...

Building for the web (in any language) inevitably forces you to work with URIs or a compact sequence of characters that identifies an abstract or physical resource. Or maybe each web interfacing developer works with URLs? What’s the difference?

URIs identify and URLs locate; however, locators are also identifiers, so every URL is also a URI, but there are URIs which are not URLs.

Roger Pate

Wow that was confusing! But really this blog is about URL encoding, not the differences between URIs and URLs or even URNs. Lets get to the meat of things, how do we build a URL that is safe across different browsers for use for HTTP.

The end goal is to implement a way to transform an expected URL (which could have various paths, weird domain names, and even endless query strings) that might have unsafe or reserved characters in them. Of course the goal is to do this without just simply removing...

This is a blog on how to handle repeating directive elements without using the ng-repeat directive when using AngularJS. We’ll keep this blog high level and assume the reader knows Angular development.

Sample:

<div ng-repeat='spell in spells'>
  <harry-potter doing='spell.name'>
    {{spell.incantation}}
  </harry-potter>
</div>

This is a blog on watcher performance and so lets take the sample above and see what happens. If the sample array spells has 7 items, ngRepeat creates (7 * 2) + 1 = 15 $watchers. This is because Angular creates watchers in its built in ng-repeat directive to support the scope which in this case is the harry-potter directive. But wait 15 watchers is fine! No need to worry!

Yes, while this is fine for small applications, it quickly digresses into an unmanageable overhead in larger apps. This is especially true when ngRepeating on directives who use ngRepeat...

Recently I attended a Responsive Design workshop headed by industry experts Ethan Marcotte and Karen McGrane. This post is a summary of my notes and key takeaways from an e-commerce website’s point of view.

What is Responsive Design?

• Design for device size rather than anything else
• Render well in any size screen and device agnostic
• Client-side optimization
• Start with responsive then enhance with adaptive solutions if needed (Bill Scott, PayPal)
• Focused clutter free screen provides more value to not just your mobile but also desktop users

Advantages:

• Mobile growth (Over 50% usage in Search, Social, and Email)
• Mobile does not cut into Desktop usage time (at least in the US)
• If split into two sites, every bug will need to be fixed twice
• Single code base (for marketing, team, release schedule, etc.)
• Target your resources to work on a single site

User Behaviour:

• Don’t assume...

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the Symbol data type introduced in ES6.

Symbol

We initialize a new Symbol in an almost primitive fashion, not by using a constructor, but by using its special constructor which takes in either nothing, a String, or another Symbol.

let lockhartBrain = Symbol(); // Symbol()
let harry = Symbol('harry'); // Symbol(harry)
let potter = new Symbol(harry); // Symbol(Symbol(harry))
let hermione = new Symbol('granger'); // TypeError: Symbol is not a constructor

And no Symbols are not just Strings…

assert(typeof harry === 'symbol');
let harrypotter = harry + ' potter'; // TypeError: Cannot convert a Symbol value to a string
let harrypotter = harry.toString() + ' potter'; // "Symbol(harry) potter"

For example, Symbols do not show up...

This is the part of a series of blogs on the new features on the upcoming ECMAScript 6 (ES6) specification which JavaScript implements.

In this blog we focus on the Proxy object introduced in ES6.

We have briefly touched on the Proxy object in a previous blog on ES6’s Reflect API.

Proxy Object

The Proxy object is used to define a layer of custom behavior in place of an object’s fundamental operations such as property lookup, assignment, enumeration, or function invocation.

The idea is we build traps on top of an object to intercept calls to fundamental operations to add our own layer on top of it.

Syntax:

var proxy = new Proxy(target, handler);

target

• can be an array, object, function, or another proxy
• acts as a container

handler

• an object
• define the behavior of the proxy (the traps)

Example:

Consider the example below. quirrell is the container for the proxied object h...