Wilson Page

Exposing module API in CSS

Mon, 10 Dec 2012 18:01:00 -0500

Lately I have been spending a lot of time investigating reusable view modules. A view is made up of several modules (or components), dropped into certain slots within a layout. The aim is that these modules be fully reusable and transportable. In order for this to work a module must not be aware of its context, and it’s styles must not leak out side of its scope.Currently each module has two files:

mymodule.ms (Mustache template)
mymodule.scss (SASS file)

The layout

A module sits within a layout module which is an arrangement of slots of certain sizes. The layout is the most responsive part of the app, it’s fluid and expects it’s modules to fill all available space within its slots.

Layouts as controllers

As time goes on I am seeing this layout module adopting a similar role to a Javascript controller. It is effectively the parent of the modules that sit within it. The layout module is more aware of the overall app, whereas its children are dumb and ignorant (this is good!).

Modules being too clever

I ran into difficulty sticking to this pattern when view modules needed to respond to changes in their environment. At first I was using media queries directly inside the modules, but that was breaking one of my rules; the module was responding to changes in its environment when it should not know anything of its context! Module styles must remain decoupled from the app itself.

Layouts telling children what to do

If we have learnt anything from effective application architecture in JavaScript, it is that controllers should call lower level module API, and not the other way round. Effectively we want out CSS layout modules to tell its child modules how to behave, and when. How can we does this, child modules must have some form of API that a higher level (our layout) can call upon.

Using SASS mixins to expose a module ‘API’

SASS mixins can be used to define alternative states of a module. The layout stylesheet can then include this mixin in certain circumstances (ie. within a particular media query breakpoint).

The example below illustrates this. Module-x has a default `background-color` of red, but it has also exposed an optional state via a mixin called `module-x-blue`. The parent layout has then included this mixin within a media query, therefore forcing the child module-x to change. Effectively calling the `module-x-blue` ‘API’.

https://gist.github.com/4252824

Why is this cool?

We have effectively decoupled our module styling from the app context, but retained the ability for the module to appear differently under different states. A module could have many states that can be called by the developer.

Doesn’t @include duplicate code every time it is used?

Correct, it does, but let’s weigh up the gains vs. the drawbacks of this:

The power of mixins has enabled us to produce a purely reusable, multi-state, project agnostic component. This reuse alone is going to save you time and code.
Assuming you have defined the majority of style in the default state, the overriding styles within the mixin should be relatively light.
If you don’t use the ‘API’ mixins, they won’t be compiled into your end CSS. This means a module could have a limitless amount of mixins, and the developer can be sure they’ll only be shipping what they use.
Realistically it is unlikely an API mixin is going to be used that many times within a project. In my experience 3 times at an absolute max (in a very large project).

Summary

SASS empowers us to be more intelligent with our CSS. With a little thought we can apply established patterns that we have learnt from our code, to our stylesheets. Modularisation via small rock solid building blocks is key to producing maintainable applications. The more we can do to share and reuse components, the more productive we can be.

I would live to hear suggestions or experiences from you guys, so feel free to comment :)

CSS 3D transforms messing with your z-index

Fri, 20 Jan 2012 06:56:57 -0500

About 3D Tranforms

3D transforms are useful even when you are not creating a design that utilises 3D space. Setting a 3D transform on an element causes hardware accelerated graphics to kick in, making animation super smooth. This is not that evident on powerful desktop platforms but on mobile devices the difference is astonishing!

To trigger hardware acceleration on an element you can apply a class like this:

/* Trigger hardware-acceleration */
.uses3d { -webkit-transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; }

The z-index problem

I ran into a major issue in particular versions of webkit that causes z-index to be ignored on an element and its children when a 3D property is specified. No matter what I did I could get these particular hardware accelerated elelements to respect their original z-index.

The fix

After running round in circles and setting ridiculously high and low z-indexes on elements to no avail I stumbled across the solution. It seemed that within the hardware accelerated layer created z-index was being ignored, so I decided to try setting a pixel value on that “3D” elements z-axis. It worked! In certain browsers (I found Chrome and Blackberry Playbook) the z-index must be reinforced with a z-axis property. Like so:

#a{
    width: 300px;
    height: 300px;
    background: red;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;

   /* reinforce z-index in 3D space */
    -webkit-transform: translate3d(0, 0, 1px);
}

Working example

In this example try commenting out the ‘preserve-3d’ styling on the container and notice how the z-index is respected. With the ‘preserve-3d’ styling on try uncommenting the ‘-webkit-transform’ property on each child element. Notice how styling is preserved. This bug is evident for me on Chrome v16.0.912.75.

http://jsfiddle.net/qkLWH/20/

Deploying your project using Git

Sun, 08 Jan 2012 13:43:56 -0500

Part 1

Part 2

Installing Node.js on your Linux server

Sun, 08 Jan 2012 13:33:38 -0500

Here I am using the VisionMedia ‘n’ Node Version manager to install the latest version of Node and NPM. Switch to 720p for best quality.

If you liked my video follow me on Twitter

Setting up a new Amazon EC2 instance

Sun, 08 Jan 2012 07:17:00 -0500

In this video I explain how to setup and Amazon EC2 instance with Linux Ubuntu. I also explain how to SSH into your server using putty.

Unit testing front-end JavaScript

Sun, 18 Dec 2011 11:31:15 -0500

Unit testing front-end JavaScript

[javascript] How to test typeof 'Array'

Thu, 15 Dec 2011 13:40:57 -0500

[javascript] How to test typeof 'Array'

[templating] Changing the syntax of underscore tempates

Tue, 13 Dec 2011 18:38:00 -0500

[templating] Changing the syntax of underscore tempates:

In this example I change the regex pattern in the templateSettings of underscore to match that of a templating engine you may be using on the back-end.

[jQuery] CSS3 animate() plugin test

Tue, 13 Dec 2011 18:04:16 -0500

[jQuery] CSS3 animate() plugin test:

Here is a little experiment using jquery.transition.js demonstrating how the .animate() method can be upgraded to use CSS3 transitions when available.

Automated deployment of node.js apps

Thu, 08 Dec 2011 12:52:38 -0500

Automated deployment of node.js apps

[deployment] What is a 'Makefile'?

Thu, 08 Dec 2011 12:37:18 -0500

Coming originally from a design background a lot of the aspects of web development that I find myself confronted with seem completely foreign. The latest of those has been the term make. I kept seeing it crop up in READMEs and generally scattered around GitHub. I set out to find what make means and if it would be of use to me.

What does ‘make’ refer to?

make is a command that is run from command line. When it is run it looks for a file titled ‘Makefile’ in the directory you are currently in. A ‘Makefile’ is just a batch of command line tasks to be run in one go.

Makefiles are used throughout the computer programming world, they are a very old concept that seems to have stood the test of time. They are generally used to compile a load of source files ready for production use.

What do Makefiles do?

As we are web designers we will be using our Makefiles to do slightly different things than native software developers, but the principles remain the same. Generally we use Makefiles to automate tasks that would normally be a chore. Most GitHub repos will have a Makefile in the root (see Express as an example)

Some of these tasks might include:

Concatenating and minifying CSS/JS
Running unit-test suites (NodeUnit, Mocha, QUnit, etc)
Compressing images
Moving (or deploying) project files from you local machine or remote repository to a ‘Staging’ or ‘Production’ server
Booting up a nodejs server

What do I need?

I believe make is native to Mac but PC requires installation of gnuwin32make for the basic make application and gnuwin32CoreUtils to give you functionality like cat (file concatenation) to the command line.

Once you have make installed and accessible via your command line you’re set to start writing your own Makefile (usually sitting in the root of your project). For a detailed example of how makefiles work I recommend this excellent introduction.

Here is an example Makefile I made. If you are new to Makefiles you will probably have to read the tutorial first to fully understand it. My example concatenates all my LESS files and compiles it to normal CSS and concatenates all my JS files and uses Google Closure Compiler to compress it.

I am very new to Makefiles and am still learning. I look forward to using make in future projects to speed up my workflow. I hope this gave you a good introduction to make. I will be sure to post any future discoveries I make :)

Related Resources:

Using 'make' to run deployment builds

Thu, 08 Dec 2011 10:02:16 -0500

Using 'make' to run deployment builds

[javascript] What is .call();

Wed, 07 Dec 2011 05:35:47 -0500

.call() is almost identical to .apply() (which I wrote about here). It allows you to execute a function and pass in a this context. The only difference between call and apply is that the parameters you wish to pass into the function are listed normally as opposed to in an array form.

.call()

myFunction.call(thisContext, param1, param2);

.apply();

myFunction.apply(thisContext. [param1, param2]);

Here is working example »

[jQuery] What the hell is PubSub?

Wed, 07 Dec 2011 05:06:00 -0500

When I first heard the term ‘PubSub’ I was instantly confused. I thought it was some new gimmicky concept that i would have to learn, so I kind of ignored it. Eventually the term cropped up so many times I decided to spend a few minutes discovering what it was.

What is it?

‘Pub Sub’ is an abbreviation of ‘Publish Subscribe’. Which is how all Javascript event handlers work. Subscribe refers to the binding of or listening for an event and ‘Publish’ refers to the triggering or emitting of an event. So in short PubSub allows you to set up one or many listener functions to respond when a single event is triggered (or ‘Published’).

The difference between ‘PubSub’ and normal Javascript events is that they are not bound to physical elements on the page. In my example they are bound to a single (sort of global) jQuery object that acts as a hub for all our custom events. Subscribers listen for particular messages emitted from this hub and Publishers send there messages into this hub.

Why is this useful?

In large Javascript applications this can be useful as it gives a central point of communication. If you are working in a modularised way modules can become less dependent on one another. If one module is required to respond to another module’s actions it can subscribe to that event on the central jQuery hub. The module needing to trigger the event can Publish the event to the hub.

Show me an example

This example uses a nice little plugin jquery.tinypubsub.js which is a tiny convenience wrapper around the jQuery’s on()/off() event handlers (introduced in jQuery 1.7)

[javascript] what is .apply()?

Tue, 06 Dec 2011 12:11:00 -0500

Apply is a clever little way of executing functions. It allows you to alter the ‘scope’ (value of ‘this’) as well as passing in any arguments you wish in the form of an array.

myFunction.apply(scope, arguments);

Example:

var myFunction = function(customParam1, customParam2) {
    alert(customParam1);
    alert(customParam2);
    alert(this.scopeValue1);
    alert(this.scopeValue2);

    // log the scope (have a look!)
    console.log(this);
};

var customScope = {
    scopeValue1: 'this is value 1 in custom scope',
    scopeValue2: 'this is value 2 in custom scope',
};

myFunction.apply(customScope, ["this is custom param 1", "this is custom Param 2"]);

Working Example:

Check out the working example »

How to create your own snippets in Sublime Text 2

Sat, 03 Dec 2011 08:18:13 -0500

How to create your own snippets in Sublime Text 2

[quick example] jQuery's $.map() function

Sat, 03 Dec 2011 06:45:49 -0500

I have often seen references to ‘map’ in javascript and not really taken the time to fully understand what it means.

What is map?

map loops over an array and runs a function on each element in the array. What ever you return from that function will replace the element in the current position. The output of the $.map() is the new array after each element has been manipulated though your ‘iterator’ function.

Map is available natively in later versions of Javascript (IE9+) but not in older browsers, so in the meantime we have to use jQuery’s $.map() method to ensure cross browser compatibility.

Basic Example

var result = $.map( [1,2,3,4], function (a) { 
  return a * 2; 
});

// result => [2,4,6,8]

Working Examples:

http://jsfiddle.net/WilsonPage/KjPM6/5/

Hope this was a nice introduction to map and you can see how useful this could be in your own projects :)

[javascript] A quick async.series() demo

Fri, 02 Dec 2011 14:34:00 -0500

[javascript] A quick async.series() demo:

I created this quick example to demonstrate how async.js can handle multiple consecutive functions and save you from the famous ‘Callback Hell’.

Further reading on the ‘series’ method from the async.js library

[javascript] Finding a specific object in an array

Fri, 02 Dec 2011 10:34:00 -0500

I had a collection of objects inside an array and wanted an async way of pulling out a specific object from that collection. I wanted it to be asynchronous so that when used server-side with NodeJS it wouldn’t block. I used the async.js library to achieve this.

Example:

var findOne = function(collection, val, options, cb){
  if(typeof options === 'function'){ cb = options; options = {}; }

  // [Default] defualt attribute to search is '_id'
  options.key = options.key || '_id';

  // use async.detect() to return the first item that
  // matches the condition
  async.detect(collection, function(item, callback){
    var isMatch = (item[options.key] === val);
    return callback(isMatch);
  },cb);
};



// DUMMY COLLECTION
var myCollection = [
    {_id: 101, name: 'bill'},
    {_id: 102, name: 'bob'},
    {_id: 103, name: 'ben'} 
];


// Usage with default key ('_id')
findOne(myCollection, 102, function(result){

   console.log(result);
   // {_id: 102, name: 'bob'}

});


// Usage with custom key
findOne(myCollection, 'ben', {key: 'name'}, function(result){

  console.log(result);
  // {_id: 103, name: 'ben'} 

});

Working Example

http://jsfiddle.net/WilsonPage/yJSjP/3/

Great example of Adobe Fireworks workflow

Tue, 29 Nov 2011 12:49:40 -0500

Great example of Adobe Fireworks workflow