Pattern Lab — the beauty of a shared styling library

For those who aren’t familiar with the concept of Pattern-Lab (or a Pattern Library), it’s essentially a living style guide; a common tool in modern web development. At their most basic, they are continuously updated documents that help documenting common design styles for web components, bringing together the intended look & feel with the images and codes to build them.

I started to look into this idea around a year and half ago because I found that each time a new project started, I needed to redo much of the same styling work. Even worse, when the main project was still in development, it was hard to keep an eye on the minor changes that affected other projects, so they would quickly get out of sync with each other. There wasn’t a centralised place to store reusable components. Unfortunately, my initial attempt to push a “shared Pattern-lab” idea didn’t work too well because we had difficulties integrating with various tools and workflows across teams.

Measure, Optimise & Automate Frontend Performance

Website speed matters. A lot.

Why? Because there’s no point building a beautiful, responsive, touch-friendly site if it can’t load a page before the user decides to leave. Researchshows: 47% of users expect a web page to load in 2 seconds or less, 40% of people abandon a website that takes more than 3 seconds to load and a 1 second delay in page response can result in a 7% reduction in conversions.

Website performance is user experience. As you design and develop a new site, you’ll consider many components of its user experience: layout, hierarchy, intuitiveness, ease of use, and more. Page load time and how fast your site feels is a large part of this user experience and should be weighed equally with the look and feel of it.

Headless Testing with PhantomJS and CasperJS

What does “headless” mean?

A headless browser is a web browser without a graphical user interface.

Headless browsers are executed via a command line interface. They use the same network connection and provide the same control of a web page as normal browsers. Because they render DOM elements and execute javascript in the same way, they can be extremely useful for testing web pages.

Why do it?

It’s really not a question of “why testing is important” but “how can we (developers and testers) do it in better way”. Front end testing doesn’t have to be a slow and painful experience if you utilise the right tool. Instead of going through each page or scenario manually you can write a UI test and integrate it into build process, then run it in the background. It will generate a fail report if something goes wrong. It’s that simple!

JavaScript templating with Mustache.js

Mustache is an open source logic-less template engine developed for languages such as JavaScript, Ruby, Python, PHP, Java and many more. It’s a very lightweight, readable syntax with a comprehensive specification. Mustache can be used for HTML, config files, and source code. It works by expanding tags in a template using values provided in a hash or object. You can use Mustache to render templates anywhere include client side and server side environments.

Organize your JavaScript: The Object Literal

JavaScript is all about objects.

When thinking about JavaScript objects, simply think about groups of key-values pairs (these are sometimes known as “associate arrays” “hash tables” or “hash maps” in other languages). An object literal is a list of zero or more pairs of property names and associated values of an object.