JavaScript on Aamnah - Frontend Web Developer

Pro tip: Pass an object as function params and use destructuring

Thu, 10 Mar 2022 00:00:00 +0500

 1interface GreetingParams {
 2  name?: string // keep this for backward compatbility
 3  firstName?: string // replaces name
 4  lastName?: string
 5  lastNameFirst?: boolean
 6}
 7
 8function greet({
 9  name,
10  firstName = name, // if firstName not provided, use name as firstName
11  lastName,
12  lastNameFirst = false,
13}: GreetingParams) {
14  if (!lastName) {
15    return `Hello, ${firstName}`
16  }
17  return `Hello ${lastNameFirst ? lastName + ' ' + firstName : firstName + ' ' + lastName}`
18}
19
20// Backward compatible with old signature
21greet({ name: 'John' })
22// New signature with first name only
23greet({ firstName: 'John' })
24// New signature with first name and last name
25greet({ firstName: 'John', lastName: 'Doe' })
26// New signature with first name and last name, last name first
27greet({ firstName: 'John', lastName: 'Doe', lastNameFirst: true })

RequireJS in 2021

Wed, 08 Dec 2021 02:52:35 +0500

Do we need RequireJS in 2021? Absolutely not. RequireJS was relevant 8 years ago (before ES2015 released), it’s not any more. The problem it was trying to solve (JS modules and dependency management) has been fixed natively in JavaScript.

Learning it today mainly serves two purposes. It allows you to work on legacy projects, and you get familiar with JS history. The API is not that extensive though, you can go through the docs in a day and most of the functionality and config makes sense. Any confusion you may feel as a modern JS developer who started with ES6 to begin with would arise from actually understanding why we needed RequireJS in the first place, not with how it works.

Notes on using libphonenumber-js for mobile phone number validation and formatting

Tue, 24 Aug 2021 00:00:00 +0500

In the browser, you can use it as a script from the CDN

https://unpkg.com/libphonenumber-js@1.9.24/bundle/libphonenumber-mobile.js
https://unpkg.com/libphonenumber-js@1.9.24/metadata.min.json
https://unpkg.com/libphonenumber-js@1.9.24/examples.mobile.json

For detecting template of mobile numbers in national format (i.e. 0333 1234567 - with a 0 in the beginning), you’ll get xxxx xxxxxxx. It’ll give you a template for numbers in international format as well, you’ll get xxx xxx xxxxxxx

 1cont asYouType = new libphonenumber.AsYouType('PK')
 2
 3asYouType.input('+923331234567') // +92 333 1234567
 4asYouType.getTemplate() // xxx xxx xxxxxxx
 5
 6asYouType.input('03331234567') // 0333 1234567
 7asYouType.getTemplate() // xxxx xxxxxxx
 8
 9asYouType.input('3331234567') // 3331234567
10asYouType.getTemplate() // xxxxxxxxxx

Similarly, if you give it a phone number without any indication of what the country is, the validation will fail

Show a countdown timer and enable button after the time is up (plain JavaScript)

Sat, 21 Aug 2021 09:30:00 +0500

Example use case

SMS verification during registration

JavaScript used

setTimeOut()
setInterval()
clearInterval()
document.querySelector()
.removeAttribute()

Code

1<p>
2  Resend code in <strong>00:<span id="resend-verification-code-timer">59</span></strong>
3</p>
4<button id="resend-verification-code" disabled>Resend code</button>
5</div>

 1let timerDuration = 60000 // milliseconds
 2let endTime = Date.now() + timerDuration // keep track of the time difference explicitly
 3const resendCodeTrigger = document.querySelector('#resend-verification-code')
 4const resendCodeTimerElement = document.querySelector('#resend-verification-code-timer')
 5
 6// Start countdown timer and show the time passing
 7const setResendCodeTimer = setInterval(() => {
 8  let delta = endTime - Date.now() // milliseconds remaining till endTime
 9  let remainingSeconds = Math.floor(delta / 1000) // convert milliseconds to seconds
10  resendCodeTimerElement.innerHTML = remainingSeconds < 10 ? `0${remainingSeconds}` : remainingSeconds // show 00:07 instead of 00:7
11}, 1000) // update remaining time display every second
12
13function stopResetCodeTimer() {
14  clearInterval(setResendCodeTimer)
15}
16
17// Enable the resend code button after timer duration (60 seconds) is up
18function enableResendCodeButton() {
19  setTimeout(() => {
20    resendCodeTrigger.removeAttribute('disabled')
21    stopResetCodeTimer()
22  }, timerDuration - 1000)
23}
24
25enableResendCodeButton()

Prototypal Inheritance in JavaScript with code examples

Wed, 05 May 2021 00:00:00 +0500

 1const obj = {
 2  firstName: 'Aamnah',
 3}
 4
 5const protoObj = {
 6  lastname: 'Awesome',
 7}
 8
 9const protoDaddy = {
10  age: 27,
11}
12
13const protoGrandDad = {
14  occupation: 'Software Engineer',
15}
16
17const protoGrandGrand = {
18  hobbies: ['playing ukulele', 'netflix and chill', 'learning the art of code'],
19  isAwesome: true,
20}
21
22Object.setPrototypeOf(obj, protoObj) // make obj inherit from protoObj
23Object.setPrototypeOf(protoObj, protoDaddy) // make protoObj inherit from protoDaddy
24Object.setPrototypeOf(protoDaddy, protoGrandDad) // make protoDaddy inherit from protoGrandDad
25Object.setPrototypeOf(protoGrandDad, protoGrandGrand) // make protoGrandDad inherit from protoGrandGrand
26
27console.log(obj) // you get the ENTIRE CHAIN of prototypes inherited
28/*
29[object Object] {
30  age: 27,
31  firstName: "Aamnah",
32  hobbies: ["playing ukulele", "netflix and chill", "learning the art of code"],
33  isAwesome: true,
34  lastname: "Awesome",
35  occupation: "Software Engineer"
36}
37*/

 1/*
 2Prototypal Inheritance in JS
 3.__proto__ is ES6
 4Object.prototype() is ES5
 5*/
 6
 7let johny = {}
 8let animal = {
 9  kind: 'human',
10}
11
12console.log(animal)
13/*
14[object Object] {
15  kind: "human"
16}
17*/
18
19console.log(johny) // [object Object] { ... }
20
21// add the `animal` object to the prototype of johny
22johny.__proto__ = animal
23
24console.log(johny)
25/*
26[object Object] {
27  kind: "human"
28}
29*/
30
31console.log(johny.kind) // "human"
32console.log(animal.isPrototypeOf(johny)) // true
33
34animal.kind = 'dinosaur'
35// `johny` will change it's kind too because it is inheriting from `animal`
36console.log(johny.kind) // "dinosaur"
37
38// updating (overriding) the property
39johny.kind = 'buffalo'
40console.log(johny.kind) // "buffalo"
41console.log(animal.kind) // "dinosaur"

The myriad ways of assigning prototypes..

Iterables and Iterators

Mon, 09 Dec 2019 23:36:21 +0500

Iterators

The iterator pattern is when you consume the values of a data source (could be a database, could be an array) one by one.

You get the next value by calling .next()
Iterables must have a property with a @@iterator key, which is available with constant Symbol.iterator
[Symbol.iterator] is a zero arguments function that returns an object conforming to the iterator protocol
An iterator result is an object with two properties on it: value and done. When the result becomes { value: undefined, done: true }, you have iterated over every value in the iterable. There’s nothing left to iterate over at this point.

Iterables

An iterable is something that can be iterated over
Built-in iterables are: String, Array, TypedArray, Map, Set and array-like objects (arguments or NodeList). But NOT Object. But you can create your own iterable object by implementing a .next() method for it

for…of

the for...of statement creates a loop iterating over built-in and user-defined iterable objects.

Using Gatsby with the WordPress API

Fri, 20 Sep 2019 00:00:00 +0500

Install and setup

 1# install Gatsby
 2npm i -g gatsby-cli
 3
 4# Disable sending usage stats to Gatsby, because i don't like sending stats even if anon
 5gatsby telemetry --disable
 6
 7# Create new Gatsby project
 8gatsby new myProjectName && cd myProjectName
 9
10# install WordPress plugin
11npm i gatsby-source-wordpress
12
13# Open the project in VS Code
14code .
15
16# Start development server
17gatsby develop

You can now view gatsby-starter-default in the browser.

Timezone Notes

Wed, 15 May 2019 00:00:00 +0500

Timezone (zone): UTC IANA timezone format (zone names): Asia/Karachi

You can create a date in another timezzone

1london = new Date().toLocaleString("en-US", {timeZone: "Europe/London"});
2// "5/15/2019, 8:02:27 AM"
3
4var date1 = new Date('August 19, 1975 23:15:30 GMT+07:00'); // GMT+07
5var date2 = new Date('August 19, 1975 23:15:30 GMT-02:00'); // GMT-02

You can convert a UTC date to another timeZone

1// convert current datetime (PKT GMT+5 in my case)
2london = new Date().toLocaleString("en-US", {timeZone: "Europe/London"});
3
4// convert a specific datetime 
5london = new Date('2019-05-08 11:43:39 UTC').toLocaleString("en-GB", {timeZone: "Europe/London", timeZoneName: "long"})
6// "08/05/2019, 12:43:39 British Summer Time"

You can get the offset of a date (in minutes) with .getTimezoneOffset()

1lahore = new Date();
2// Wed May 15 2019 12:19:54 GMT+0500 (Pakistan Standard Time)
3
4lahore.getTimezoneOffset();
5// -300

Links

https://stackoverflow.com/questions/15141762/how-to-initialize-a-javascript-date-to-a-particular-time-zone

Using environment variables with .env

Thu, 04 Apr 2019 13:57:38 +0500

tl;dr

1npm i -D dotenv

define vars in .env file

1ACCESS_TOKEN=j1v7qstp59eodbn79tsp
2CLEINT_KEY=wp2aksuvduasepd2edre2rd
3CLIENT_SECRET=227tasgvdvqid2tedt2e

use vars in your code app.js file

add a .env-sample and commit that, .gitignore the actual .env file

1const connection = new API({
2	api_token: process.env.ACCESS_TOKEN,
3	client_key: process.env.CLEINT_KEY,
4	client_secret: process.env.CLIENT_SECRET
5})

1// .env
2SECRET_KEY=SuperSecretKey90965443241

1require('dotenv').config() // require config
2require('./../server/index') // entry point
3
4console.info(process.env.SECRET_KEY);

Set env variables by passing them as an argument

1# *nix
2NODE_ENV=development node app.js

For Windows you need to use the set keyword

Flow basics

Tue, 02 Apr 2019 11:51:16 +0500

 1yarn flow -- init
 2
 3yarn global add flow-typed
 4# npm install --global flow-typed
 5
 6# garb all the types for the things we have installed
 7flow-typed install
 8
 9# run Flow on your project (opted-in files)
10yarn flow

creates .flowconfig

/**
.flowconfig
*/

[ignore]

[include]

[libs]

[options]

Having a .flowconfig is enough to acknowledge you’re using Flow, even if it is empty
Flow allows you to slowly include files in a mature project
flow-typed is going to grab type definitions and add them o your project in an automated fashion
Better errors, you get better errors!
Flow can also be used as a replacement for propTypes

If you get Flow errors with styled-components

Functional Composition

Fri, 13 Jul 2018 14:25:44 +0500

Functional Composition

Functional composition - the art of taking one function and applying it to the result of another.

Function composition is the process of combining two or more functions to produce a new function. Composing functions together is like snapping together a series of pipes for our data to flow through.

Master the JavaScript Interview: What is Function Composition? By Eric Elliot

Notes on handling clicks and taps on iOS devices and touch enabled mobile browsers

Sun, 12 Nov 2017 00:00:00 +0500

Click handlers don’t work as supposed to on touch enabled browsers. iOS Safari will not fire a click event if it doesn’t consider the element clickable (more on that below), but will work as expected for all elements if you add an event handler for touch events
If you only added an event handler for the click event, it’ll work on desktop screens but likely won’t do anything or behave wonky on a mobile screen. (e.g. the event listener not firing or having to tap two times for it to work)
Sometimes you have devices with both touch screens and physical keyboards (e.g. a Blackberry phone, or a touchscreen laptop), so you kinda need to always check for both clicks and taps on websites

Safari and click handlers not working

iOS Safari will only trigger click events for elements that

Notes on creating a Chrome extension

Tue, 18 Apr 2017 00:00:00 +0500

Needed

manifest.json is required. It’s kinda like package.json in Node. manifest.json has info about your extension
The icon needs to be 19x19 pixels

Getting started

Create a new folder, create a manifest.json file inside
Load your extension in browser by going to Chrome > Extension > Enable Developer Mode > Load unpacked extension.. and point to the folder you created
Once you have the folder loaded, you can make edits in your code, refresh Chrome (Cmd+R) and the changes will reflect

1{
2  "manifest_version": 2,
3  "name": "My Awesome Extension",
4  "description": "This extension is an awesome extension",
5  "version": "0.1",
6}

add extension icons

The icon right to your address bar is called a browser action. It is set as default_icon under browser_action. The size needs to be 19x19 pixels

ES6 Classes vs. Constructor Functions

Sun, 19 Mar 2017 00:00:00 +0500

tl;dr

A constructor function is just a normal function that creates (constructs) an object
JavaScript does not has classes and hence it does not has methods. What you have are properties in an object, some of which may be functions
Javascript is not your classic class-based language but rather a prototype-based language.
Classes in JavasScript are syntactic sugar, meaning they’re a feature that only changes how you type something, but nothing changes under the hood.
The class syntax makes writing and building objects easier/neat.

 1'use strict'; // older version of Nodejs only allowed classes in Strcit mode
 2
 3class Person {
 4  // constructor function
 5  constructor (firstName, lastName, age) {
 6    this.firstName = firstName;
 7    this.lastName = lastName;
 8    this.age = age;
 9  }
10
11  // adding stuff to prototype to pass on to all instances of this class
12  // any methods that exist in the class will be automatically added to the prototype
13  greet() {
14    return `Hello ${this.firstName} ${this.lastName}`
15  }
16
17  details() {
18	  return `${this.firstName} ${this.lastName} is ${this.age} year(s) old`
19  }
20}
21
22let jane = new Person('Jane', 'Davis', 28)
23
24// test
25console.info(jane) // Person { firstName: 'Jane', lastName: 'Davis', age: 28 }
26console.info(jane.greet) // [Function: greet]
27console.info(jane.greet()) // Hello Jane Davis
28
29console.info(jane.__proto__) // Person {}
30console.info(Object.getPrototypeOf(jane)) // Person {}
31
32// Get all methods/functions inside the class
33console.info(Object.getOwnPropertyNames(Person.prototype)) // [ 'constructor', 'greet', 'details' ]
34
35console.info(Person) // [Function: Person]
36console.info(jane.constructor) // [Function: Person]

is functionally equivalent to

Prototypal Inheritance and Constructor Functions

Fri, 17 Mar 2017 00:00:00 +0500

tl;dr

A constructor function is just a normal function that creates (constructs) an object
Every object has a Prototype object __proto__
Every object inherits from it’s Prototype object. If the prototype has a method or a property, the object using or pointing to that prototype will have those too
Changes made to a prototype instantly updates all existing objects using that prototype, unlike object constructors which pass changes when new instances are created
You would ideally use them both, methods in object constructor and methods in object prototype, in order to maximize on the performance and situation

You can edit the prototype in order to pass data to every instance of the object.

ES6 (ES2015) and Beyond with Node.js

Tue, 07 Mar 2017 00:00:02 +0500

tl;dr

 1# initialize
 2npm init -y
 3
 4# install dependencies
 5npm i -D babel-cli babel-preset-es2015 babel-preset-stage-0 nodemon
 6
 7# Babel config
 8touch .babelrc
 9echo '{ presets: [ "es2015", "stage-0" ] }' >> .babelrc
10
11# directory structure
12# mkdir src && touch src/index.js
13# add some es6 code to index.js for testing
14
15# run Babel
16babel-node src/index.js
17
18# add npm run scripts

Note: For the sake of simplicity, i use ES6 and ES2015 interchangeably. Both mean the same thing to me, though technically it should be called ES2015, that’s the official version name.

Set `npm init` defaults globally

Mon, 20 Feb 2017 00:00:00 +0500

You can either edit the global configuration file for npm:

1npm config edit --global

(it’ll open the file in your default editor, usually Vim)

Or, you can set the defaults one by one:

1# npm config set <key> <value> [-g|--global]
2npm config set -g init-author-name 'Aamnah'
3npm config set -g init-author-email 'hello@aamnah.com'
4npm config set -g init-author-url 'http://aamnah.com'
5npm config set -g init-license 'CC-BY-SA-4.0'
6npm config set -g init-version '0.0.1'

You can also use the npm init command with the y flag to initiate a project with the default values without prompting you for details.

[ES2015] Default values

Mon, 23 Jan 2017 00:00:00 +0500

Default Values

Here’s how we used to do default parameter values before.. Say we have a function that returns 42 is no parameter value is provided and if a value is passed, it returns the value.

1function foo (x) {
2  x = x || 42 // Using the OR operand `||` to give 42 if x is false
3  return x
4}
5
6foo(3) // 3
7foo(99) // 99
8
9foo(0) // 42  eh?

0 equals falsy. So even if you did pass a value for x, it returned the default 42. Here’s a better way to rewrite the function above

[ES2015] Arrow Functions

Mon, 16 Jan 2017 00:00:00 +0500

Arrow Functions

Arrow functions are anonymous function expressions. They don’t show up in stack traces.

Pros

Shorter syntax. You get to remove function, return and some {..}
Shines with this keyword. The arrow function doesn’t have it’s own this so we automatically get a lexical this (bind to the outer context). Skipping .bind(this)

Cons

Show up as anonymous in stack trace, makes debugging/troubleshooting hard. Imagine minified code, error at line 1, character 32712.. and you’ll have no idea what that is. Named functions are the way to go if you want names to show up in stack trace. Name inferencing is the closest thing you get with arrow functions, which is when you assign the anonymous function to a named variable.
makes testing difficult because you can’t console.log when using the concise arrow function syntax. You have to change the syntax first in order to console.log().
Inconsistant syntax. Variations in syntax, too many ways to write an arrow function (definitely more than 6 syntactical ways)
No self-reference (arrow functions are anonymous funcs, remember?) Without self-reference you can’t do cool things like recursion or have event handlers that needs to unbind itself once it’s run
Not everyone knows the syntax, not very beginner friendly

Syntax Variations

 1=> 3 // or (var foo = => 3) headless syntax proposal
 2() => 3 // no params
 3(x) => 3
 4x => 3 // no parens, placeholder for params looks an awful lot like funcion invocation
 5(x,y) => 3 // parens
 6(...x) => 3 // parens
 7
 8x => { try { 3 } catch(e) {} }
 9x => { return 3 }
10x => ({ y: x}) // gotta wrap parens around the object body in order to return an object

Name inferencing

1var foo = x => 3
2foo.name // "foo" the interpretor made a guess (inferred) that you want to reference the function with the name foo, based upon where the function expression got saved.

Name inferencing doesn’t work when you pass an arrow function as a param to another function. They’re gonna stay syntactically anonymous.

Intro to Immutable.js

Wed, 11 Jan 2017 00:00:00 +0500

Intro to Immutable.js

TIP: When using console.log while debugging Immutable.js objects, you’ll see weird Map structures and it doesn’t help very much in terms of figurring out object structure. For easier debugging, you can perform .toJS() on an Immutable object and console.log that to see the object structure in plain JS.

1console.log(myMap) // console shows weird Immutable.js object
2console.log(myMap.toJS()) // console shows plain JS object

 1const Immutable = require('immutable')
 2
 3// Maps are like JS Objects
 4
 5var map1 = Immutable.Map({ a: 1, b: 2, c: 3 })
 6
 7console.info('map1', map1) // map1 Map { "a": 1, "b": 2, "c": 3 }
 8
 9map1
10  .set()
11  .get()
12
13// To set values, you always create a new instance of whatever you're editing
14var map2 = map1.set('b', 50);
15console.info('map2', map2)

Values in Immutable.js data structures can’t be mutated, so with all the setter methods, you can’t just do

Formatting and validating dates in JavaScript

Tue, 10 Jan 2017 00:00:00 +0500

Date Formats

Dates come in multiple formats:

a Unix timestamp (1481884441)
an ISO 8601 string (2016-11-04T17:39:59.910Z)
a locale string (Thursday, December 20, 2012, GMT)

Let’s get started by defining some variables to use in our examples

1const UNIX = 1481884441
2const ISO8601 = '2016-11-04T17:39:59.910Z'
3const invalidISO = '2016-31-31T17:39:59.910Z'
4const invalidDate = '2016/31/31'
5
6let date = Date.now() // Date.now() is faster than new Date()

`Date.now()` vs. `new Date()`

Note that while Date.now() is faster in performance than new Date(), it gives a number value (epoch/unix time) instead of a Date object. So, you won’t be able to do something like Date.now().toLocaleTimeString() because .toLocaleDateString() only works on a Date object.

[ES2015] Generators

Tue, 27 Dec 2016 00:00:00 +0500

Generators

Generators are functions that can be paused and resumed later. A generator can contain multiple yield statements. At each yield, the generator will pause/resume (while also returning some value). At every restart, a value will be passed in.

Here’s a brief intro to generator functions

With ES6 generators, we have a different kind of function, which may be paused in the middle, one or many times, and resumed later, allowing other code to run during these paused periods.

Array.reduce()

Sun, 25 Dec 2016 00:00:00 +0500

.reduce()

The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value. MDN

The reduce() method reduces the array to a single value.
The reduce() method executes a provided function for each value of the array (from left-to-right).
The return value of the function is stored in an accumulator (result/total).
Note: reduce() does not execute the function for array elements without values.

use the reduce function on javascript arrays to transform a list of values into something else.

[ES2015] Promises

Thu, 22 Dec 2016 00:00:00 +0500

Promises

Promises are like callback functions, but so much better. Promises are meant to save you from callback hell.

ES6 feature, started out as libraries. Natively supported in all modern browsers.

A promise is a pattern for handling asynchronous operations. The promise allows you to call a method called “then” that lets you specify the function(s) to use as the callbacks.

A promise is an eventual value.

three states

pending
fulfilled or resolved
rejected

Now of course the more levels of nesting we have, the harder the code is to read, debug, maintain, upgrade, and basically work with. This is generally known as Pyramid of Doom or Callback Hell. Also, if we needed to handle errors, we need to possibly pass in another function to each xhrGET call to tell it what it needs to do in case of an error. If we wanted to have just one common error handler, that is not possible.

Modules

Sun, 27 Nov 2016 00:00:00 +0500

Why?

to avoid cluttering the global namespace

self-executing anonymous function

1!function() {
2	function foo() {
3		// blah
4	};
5
6foo();
7}();

jQuery and AJAX

Wed, 04 Nov 2015 00:00:01 +0500

the difference between jQuery’s `.load()` AJAX method and jQuery’s other shorthand AJAX methods?

The .load() method must be chained onto a jQuery selection. For example,

1$('#element').load('page.html');

.get()

1$.get(url, data, callback);

Working with APIs using AJAX and JSON

Wed, 04 Nov 2015 00:00:00 +0500

Code

1$(document).ready(function() {
2
3}); // end ready

Explanation:

1$(document).ready(function() {
2
3});

tells the function to wait until the HTML for the page has completely loaded before running the JavaScript code placed inside it.

making an ajax request when a button is pushed

1$.getJSON(flickerAPI, flickrOptions, displayPhotos);
2.getJSON(url, data, callback);

JavaScript on Aamnah - Frontend Web Developer

Pro tip: Pass an object as function params and use destructuring

Links

RequireJS in 2021

Notes on using libphonenumber-js for mobile phone number validation and formatting

Show a countdown timer and enable button after the time is up (plain JavaScript)

Example use case

JavaScript used

Code

Prototypal Inheritance in JavaScript with code examples

Iterables and Iterators

Iterators

Iterables

for…of

Using Gatsby with the WordPress API

Install and setup

Timezone Notes

Links

Using environment variables with .env

Flow basics

Functional Composition

Functional Composition

Notes on handling clicks and taps on iOS devices and touch enabled mobile browsers

Safari and click handlers not working

Notes on creating a Chrome extension

Getting started

add extension icons

ES6 Classes vs. Constructor Functions

tl;dr

Prototypal Inheritance and Constructor Functions

tl;dr

ES6 (ES2015) and Beyond with Node.js

tl;dr

Set `npm init` defaults globally

[ES2015] Default values

Default Values

[ES2015] Arrow Functions

Arrow Functions

Pros

Cons

Syntax Variations

Name inferencing

Intro to Immutable.js

Intro to Immutable.js

Formatting and validating dates in JavaScript

Date Formats

Date.now() vs. new Date()

[ES2015] Generators

Generators

Array.reduce()

.reduce()

[ES2015] Promises

Promises

Modules

Why?

self-executing anonymous function

jQuery and AJAX

the difference between jQuery’s .load() AJAX method and jQuery’s other shorthand AJAX methods?

.get()

Working with APIs using AJAX and JSON

Code

Explanation:

making an ajax request when a button is pushed

`Date.now()` vs. `new Date()`

the difference between jQuery’s `.load()` AJAX method and jQuery’s other shorthand AJAX methods?