MontageJS naming for BEM

This is taken from Nicholas Gallagher’s awesome article “About HTML Semantics and CSS Architecture”. The conventions are taken from MontageJS but Nicholas’ examples make it really clear. /* Utility */ .u-utilityName {} /* Component */ .ComponentName {} /* Component modifier */ .ComponentName–modifierName {} /* Component descendant */ .ComponentName-descendant {} /* Component descendant modifier */ .ComponentName-descendant–modifierName…… Continue reading MontageJS naming for BEM

Published
Categorized as css

CSS Utility Classes with BEM

CSS utility classes are a way of making big projects more maintainable. There are many benefits but also downsides, you can end up with code like this… <div class=”bg-blue text-white font-bold uppercase px-2 py-1 mx-auto mb-1 border-1 w-200″> Not great. There are workarounds for this but they add other overheads (as discussed in this article).…… Continue reading CSS Utility Classes with BEM

Published
Categorized as css

Bootstrap BEM

It’s important for CSS to be modular. Without modularity, selectors are fragile and it’s hard to be confident that changing one style won’t inadvertently break a different style somewhere else. How does BEM help? BEM solves modularity by encapsulating styles within a “Block”. Here’s an example from BEM.info. <form class=”search-form__button”> The __ separates the Block…… Continue reading Bootstrap BEM

Responsive parallax

Parallax is everywhere on desktop, but it’s damn hard to make responsive. On desktop it can be done using pure CSS but i hit 2 problems The pure CSS approach uses fixed background images but they’re hard to position/center on iPhone (or at least on my iPhone 5). I need to do some experiments to…… Continue reading Responsive parallax

Published
Categorized as Web Tagged

Content management… the easy way

There are thousands of different CMS solutions out there. They all try to do everything, and fail. What if i want the beautiful frontend of Ghost (with scalability and instant deploys), with a bite-sized editor (like Buzzfeed have), and a cloud-hosted content repository (Prismic)? We need a standard. Standards let applications focus on doing one…… Continue reading Content management… the easy way

Published
Categorized as Web Tagged

Aggregation’s what you need

How can a news site drive return visits? How do you make it a destination? The obvious answer is to give users more compelling content. Fortunately there’s a whole internet of compelling content. All you have to do is link to it. Obviously, driving users to other sites is a bit controversial (despite it working…… Continue reading Aggregation’s what you need

Published
Categorized as Web

Breaking down monolithic webapps with remote widgets

I previously posted about lazy-loading widgets as a way of applying micro-architecture to the frontend. I’ve now got a real-life example running on Heroku – the Metro trending widget as a standalone app. It encapsulates CSS and javascript by inlining them. (Here is the “raw” version without global.css, etc). It’s weight is 7kb. 3kb of…… Continue reading Breaking down monolithic webapps with remote widgets

Improving perceived load time

I’ve done a small test. I created two versions of a simplified Metro homepage. It has a “mosaic” component which is part of the initial viewable area, and a “breaker” component which is further down the page. Version 1 Version 1 is all served server-side (from flat files). It takes 1.2 seconds to render the…… Continue reading Improving perceived load time

Published
Categorized as Web

News feed personalisation

My two last posts have looked at how to infer a user’s interests based on their browsing history. This post looks at how to translate that into personalised results.¬†At Metro, we’d like to do this for our news feed results (generated by a top secret algorithm). The ideal The most accurate results could be achieved…… Continue reading News feed personalisation

WordPress: Post abstraction

At Metro we use WordPress but more and more logic is shifting to web services (so that we can order content algorithmically). Currently that means we need to write different view logic depending on whether data comes from the WordPress database or from a web service. The solution? Abstract it. For example. Data from WP_Query…… Continue reading WordPress: Post abstraction

Published
Categorized as Web Tagged