Tips – CSS Selectors and HTML Branches


As i mentioned in a previous post, I’m learning HTML/Javascript at the moment via Codecademy and will post stuff I have learnt, so others who follow/Google can learn. These are just snippets, but the site is a great learning tool.

So CSS Selectors – CSS is a very powerful way of styling and positioning your HTML elements. The syntax is simple, you use the HTML element as the selector! Good example is if you want all your list elements to have a red background color:

 

Full code can be found here on JSFiddle.

 

li {
 background-color: red;
}

So the above example will highlight any list (li) element red, What if you want to more selective of what you want as red, say for example just any ordered (ol) list (li) elements red? Easy:

 

Full code can be found here on JSFiddle.

 

ol li {
 background-color: red;
}

So the above example will highlight any list (li) element that is child of a parent ordered list (ol) elements. This small example shows branching works within HTML documents and how CSS selectors traverses the tree using the simple parent/sibling relationships. This is very powerful. And as mentioned in a previous post, you can be more specific by giving a more specific branching.

 

Full code can be found here on JSFiddle.

 

 

ol li {
    background-color: red;
}
div ol li {
    background-color: purple;
}

Images courtesy of Codecademy.

 

 

 

Tips – Javascript Arrays – Refactoring to Filter and Map.


When learning a new language or implementing something new, I tend to “get it working” first which usually doesn’t include elegant code, unless I have written Libraries or extension methods previously to fit the solution. One of these was using Arrays in Javascript. Basically i needed to find the Active User, which was for a client side collection of users for an Admin. So my “get it working” code is the legal (but definitely not regal code), which is a simple function that returns a array of usernames, of people who are Active (i.e. login and use the site):

 

JSFiddle is here.

function getActiveUsers(people) {

    var activeUsers = [];
    var ii = 0;
    for (var i = 0; i < people.length; i++) {

        if (people[i].isActive == true) {
            activeUsers[ii] = people[i].userName;
            ii++;
        }
    }    return activeUsers;
}

Anyway, as I’m learning Javascript presently, I have been reading about prototyping in Javascript and especially about some existing functionality that resides with the Array global object (under Array.prototype). Specially I’m talking about:

Array.prototype.filter()

Array.prototype.map()

 

NB: As those Links note, the Array.prototype property was only introduced within the ECMAScript spec 5.1 (ECMA-262) Edition. This will mean adding some Polyfil code (also provided in the links above) if you wish to use this within old browsers.

Anyway, using these two new methods I was able to go back over my previously “get it working” code above, refactor it and use some of the nicely provided filter and map methods:

JSFiddle is here.

function getUserName(user) {
  return user.userName;
}

function isActive(user) {
  return user.isActive;
}

function notActive(user) {
  return !isActive(user);
}

function getActiveUsers(user){
  return user.filter(isActive).map(getUserName);
}

function getNonActiveUsers(user) {
    return user.filter(notActive).map(getUserName);
}

So now I call into this new getActiveUsers which passes the callback function isActive, which basically only gives me back items from the array where the property user.IsActive is true. The chained map function passes the callback function of getUserName to retrieve the userName only. I have also created the opposite functions as well – i.e. Non-Active users. Both JSFiddles show the code in action, but i goes to show that a little reading, research and thought can help improve code readability and re-usability a great deal.