ES8 – Callback, Promise and Async

Callbacks: Pass in a function as a parameter

function fetchData(callback) { 
    callback(); 
}

 

Promise: States: Pending, Fulfilled, Rejected

function fetchData() { 
    return new Promise((resolve, reject) => { 
        resolve(rides), 

        // if error:
        reject(errorInfo)
    });
};

 

Promise.all:
takes multiple promises and returns a promise which resolves when all supplied promises are done.

Promise.race:
takes multiple promises and resolves when the first promise is done.

 

async()


// Running sequentially: asyncFunc1 is run before asyncFunc2
async () => { 
    await asyncFunc1(); 
    await asyncFunc2(); 
}


// Running in parallel
async () => { 
    await Promise.all([asyncFunc1(), asyncFunc2()]); 
}

 

ES8 – Array and Exponent

ES8 aka. ES2017

Array.prototype custom function (review)

let number = [1, 2, 3, 4]; 
let moreNumbers = new Array (1, 2, 3, 4); 

Array.protype.count = function() { 
    return this.length;
}

console.log(numbers.count());     // outputs 4
console.log(moreNumbers.count()); // outputs 4

 

Array.prototype.includes

Check if an array contains a specific value and returns a boolean.

let letters = ['a', 'b', 'c', NaN]; 
letters.includes('b');      // true
letters.includes('d');      // false

// includes is similar to indexOf from older version 
letters.indexOf('b') >= 0   // true

// when includes and indexOf is different: 
letters.includes(NaN)       // true
letters.indexOf(NaN) >= 0   // false

 

Exponential syntax: **

3 ** 4 = Math.pow(3, 4)

 

WordPress.com – create a custom tag list widget

I never really like Tag Clouds. Just from the UI point of view, making tags big and small is just chaos and ugly. WordPress.com free or personal plan don’t allow you customize the CSS so this is a hacky way to get around it.

Unfortunately, this way doesn’t automatically generate the list and it takes a lot of manual processes to maintain it, but you can do this. Note, it requires you a bit of knowledge in CSS and Javascript. I’ll try my best to walk you through.

Anyways, let’s get started. Here are the 4 steps to get the following result:

Continue reading

Protractor Notes

Protractor Locators (= Angular locators + selenium locators):

  • binding
  • model
  • css
  • buttonText
  • repeater
  • options
  • id
  • linkText
  • name
  • tagName
  • xPath
  • addLocator

 

Create Test Suites

exports.config = { 
    seleniumAddress: 'http://localhost:4444/', 
    specs: ['./**/*.spec.js'], 

    suites: {
        smoke: './smoke/*.spec.js', 
        feature: './feature/*.spec.js',
        full: './**/*.spec.js'
    },

    onPrepare: function() {
        browser.driver.manage().window().setPosition(0, 0); 
        browser.driver.manage().window().setSize(1280, 720); 
    }
}
# In the terminal, run the following to set specific suite:
protractor conf.js --suite=smoke,feature

 

Other Notes

Reference

This note is taken from Introduction to Protractor by Nate Taylor and AngularJS Fundamentals by Joe Eames and Jim Cooper from Pluralsight.

Using ES5 Object to emulate class


var task = {title: 'Title', description: 'Desption'};

Object.defineProperty (task, 'toString', {

    // function definition
    value: function() {return this.title + ' ' + this.description;},

    // disallow overwrite 'toString' function property if false.
    writable: true, 

    // hide 'toString' property in Object.key loop if false.
    enumerable: true, 

    // disallow overwriting any properties (i.e., writable, 
    // enumerable, value, configurable) once outside of scope.
    // if false.
    configurable: true, 

});

// Console log task object!!
///////////////////////////////////////////////

.
.


var Task = function (name) {
    this.name = name; 
    this.completed = false; 
}

// Only defines this function once when new Task object is created
Task.prototype.complete = function() { 
    this.completed = true; 
}

.
.

*Note for angularjs => just put the class code in a factory and return Task object
.
.

HTML5 localStorage code sample

See HTML5 storage Notes

//========================================//
// 3 Ways to manipulate data 
//========================================//
var storage = window.localStorage;


//-- 1. Using Dot-notation ---------------//
if (storage.myMessage1 === undefined) {
    console.log('No message yet');
    storage.myMessage1 = 'Message 1';
} else {
    console.log('My Message: ', storage.myMessage1);
}


//-- 2. Using Get-Set --------------------//
if (storage.getItem('myMessage2') === null) {
    console.log('No message yet');
    storage.setItem('myMessage2', 'Message 2');
} else {
    console.log('My Message: ', storage.getItem('myMessage2'));
}


//-- 3. Using Bracket --------------------//
if (storage['myMessage3'] === undefined) {
    console.log('No message yet');
    storage['myMessage3'] = 'Message 3';
} else {
    console.log('My Message: ', storage['myMessage3']);
}


//========================================//
// Remove data
//========================================//
storage.removeItem('myMessage1'); // remove data with a given key
storage.clear();                  // clear all storage data


//========================================//
// Iterate all key-value pair in storage:
//========================================//
for(var i=0; i<storage.length; i++) {
    key = storage.key(i);
    console.log(key, ': ', storage[key]);
}

HTML5 Web Storage Notes

  • string-based
  • normally have 5 megabytes of space in a browser. However, 1 character does not equal to 1 byte in web character encoding.
  •  sessionStorage
    • API is used exactly the same way as localStorage (see below for demo)
    • Refers to browser tab session, not user sessions
    • Data live forever as long as the tab is not being closed
    • Data is not shared across browser window/tab
  • in-private browsing:
    • localStorage will act like sessionStorage
    • Safari won’t store any data at all in private mode

See HTML5 localStorage code