The aim of CSS was to separate content and style but our layouts are as tied to our markup as ever. Grid layout has the chance to deliver a huge shift in the way we rationalise layout systems for the web and drastically reduce the complexity of the markup and styles currently required.
Use of the icon font is in decline. Recently it’s been argued that there are many good reasons to think about not using them and switch to using SVG images instead. At the Financial Times we must provision proper fallbacks for much of the 4% of browsers that don't support SVG. As it turns out, that's hard.
Managing typographic rhythm consistently across different screen sizes is a designer's favourite but many developer's nightmare. Using the maps feature of Sass I create a simple interface that's for both designers and developers.
One of the main advantages of using a CSS pre-processor is the ability to use variables. Colours are usually one of the first pieces of repetitive code to be abstracted into variables but I like to take colour management one step further and specify the relationship between the colours, a process which I call 'themes'.
In part 2 covered the process of optimising my Tube Tracker application for the browser but each change I made still required refreshing the browser to check everything was still working. The application really needed a test suite and as it turns out, this is easier said than done
In part 1 I covered the reasons why I think React is an exciting tool but the code being delivered to the browser in the initial demo failed every basic web performance test. Browserify enables developers to write separate CommonJS style modules, as used by Node.js, with the intention of compiling them into a single file for the browser.
The robustness engrained into key parts of the web stack gets forgotten as we build more dynamic applications, users might not get anything when even a small problem occurs. React provides a straightforward means to creating adaptive-hybrid or isomorphic web applications which can inject robustness back into our projects.
Centring elements horizontally or vertically often works in mysterious ways and one of the seemingly simple layout problems that can make CSS so frustrating to use. This is a battle-tested dropdown menu able to cope with an unknown number of option columns and always centred relative to its toggle using only IE8-compatible CSS.
Images with text overlays are should be bread and butter for most front-end developers but sometimes they're not so simple. Now within CSS there is the separation between layout and visual effects which is very good news indeed.
Device diversity gives all web designers and developers a headache. Fortunately front-ender tools continue to beat challenges and provide the means to quickly tool-up and get results without owning a personal device lab or managing a stack of virtual machines and SDKs.
There are few projects where content is provided up-front but content is the only constant and it is not appropriate nor future-proof to think about anything else first.
We need smarter tools to enable us to create truly modular, interoperable CSS components. I propose extending existing functional selectors to accept property expressions.
The mouseover is a standard interface paradigm but in theory should not add any distinguishable behaviour to your website when browsing on a touch device, but that's not quite what happens.
The W3C recently announced 'HTML5 Definition Complete' which has left me feeling even more awkward than usual, so much of what we do in the browser is still a hack.
It's no secret web designers and developers do not enjoy working with SEO companies but it isn't (always) because we feel their advice is patronising, homoeopathic bullshit.
The entire paradigm of WYSIWYG for producing website content is inherently broken. Online content relies on markup to give meaning to the text, a property you can't always see.
Integrating dependency managers and understanding modular JS proposals is (probably) the end goal for all website development but using a simple, structural approach is sane, faster and a step in the right direction.
The CSS float property is the building block of the present web page. Except floats exist only for one reason so it stands out as inappropriate when our disposition is to believe in how advanced CSS has become.