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
Category: Web
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
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
How to promote unit testing JavaScript with Visual Code
So you want the developers on your team to write more unit tests. One good way is make their IDE show any non-tested code in RED. In the image above we can see that line 8 is marked red – it hasn’t been tested. People focus on what’s visible, and there’s nothing more visible than…… Continue reading How to promote unit testing JavaScript with Visual Code
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
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
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
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
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