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