How to: Enable Web Components in Firefox (Shadow DOM)

Web components, sometimes mixed up with the Shadow DOM, are now available in Firefox v29+ under this flag – but they won’t be available to the average end-user. How to Enable: In your address bar, go to: about:config Search for the property: dom.webcomponents.enabled and mark it as true. If your already on a development page, remember to reload it. Further Reading http://css-tricks.com/modular-future-web-components/ http://oliversmith.io/technology/2012/05/19/inspecting-the-shadow-dom-in-google-chrome-inspector/ http://soledadpenades.com/2014/01/02/shadow-dom-in-firefox/


Load HTML once with AJAX

While working on a project recently, a dynamically loaded section was needed. It was used in a transition between step one and two in the user’s journey, after an API call had been made. The user was allowed to go back to step one at any time, resulting in a new API call – which was to be expected – but the call to get the HTML for step two was also made again. The same HTML which had just … Continued


How to: Create Panels with matching Heights

Flexbox & History One of the best ways to achieve a row of boxes which match in their heights is with an up-and-coming feature called flexbox. This is particularly important when presenting dynamic content, if you’re using pre-selected, static content then often the best approach to take is just to add a min-height within the CSS for the columns. As soon as the content extends a min-height however they will escape and have differing heights.



Kerning your Typography on the Web

Kerning is the process of adjusting the spacing between two specific letters or pairs within typography. It’s not to be confused with tracking which is the spacing between letters (letter-spacing) or leading which is the spacing between lines (line-height). The kerning process has been used throughout the history of printed text but is less commonly used on the web.


3 Reasons to Start using Sass Today

Sass is great! So I thought I would write a few brief reasons why you should start using Sass today (if you’re not already – in which good on you!). For those of you who haven’t heard of Sass, it’s a CSS preprocessor. This means that as you write your CSS it gets processed and converted into standard CSS. This means that all the work is done before reaching the browser, so you don’t need any special libraries or extra … Continued


Blur a Background Image (with help from blur.js)

Recently, in a very small project of mine, I wanted to create a full-size image as the background and to blur it a little to create an abstract but interesting backing image. Initially, webkit filters were looked at, which are admittedly limited in terms of browser support, but also gave a nasty looking white edge to the images. So a JavaScript option was considered instead.


Avoid Spam Online: How to Show your E-mail Safely

We all know about spam and up until recently there wasn’t an e-mail address shown on this blog (just a contact form) for this very reason. Most of us have also tried different methods of stopping spam bots picking up our favorite e-mail addresses (ever written [at] instead of @? Or shown your e-mail address as an image?). This article should outline a few different methods of showing your e-mail address publicly and safely – and hopefully without any impact … Continued


New SASSy Blog!

Thought I would mention that I’ve just created another blog, named SASS-Tutorials, for web designers wanting to learn about popular subject of pre-processors. It focuses on SASS, the ‘Syntactically Awesome Stylesheets’ and gives readers a step by step guide on different aspects. Each of the aspects is chosen as a lesson and will be written about.



Smart CSS layouts with Calc()

A few weeks ago I wrote about the Traditional Box Model and the ‘box-sizing’ CSS property, which, in essence, allowed you to easily create two adjacent boxes with a width of 50% and any amount of padding, because padding was included in the width. In this article I will talk about a different method of achieving this with the help of the ‘calc()’ expression.


Traditional Box Model vs. W3C Box Model

One of the first things you come to learn about when first introduced to CSS is the box model. It works on the condition that every element within HTML is square and the box model defines how each element is then subsequently defined in terms of width and height. Although not explicitly mentioned, it was introduced in 1996 with the CSS1 specification (those were they days ‘ey?).