Frontend Focus Issue 329 — February 28, 2018 webpack 4.0 Released A significant release for the popular module and asset bundler brings significantly increased performance and new ‘development’ and ‘production’ modes with pre-defined settings. Sean T. Larkin 30 Seconds of CSS A growing collection of useful CSS snippets which we’re promised we can understand in… Read More

Frontend Focus Issue 328 — February 21, 2018 How Chrome’s New Ad Filtering Works Chrome has now begun to block ads that don’t meet the Better Ads Standards. What does this mean and how does it work? Google Everything You Need to Know About CSS Variables How variables work natively in CSS, and how to… Read More

Frontend Focus Issue 327 — February 14, 2018 Replacing jQuery With Vue.js: No Build Step Needed Some developers aren’t keen on complex workflows that involve build tools and they’re not mandatory to use the latest JS tech anyway. Here’s how to use Vue.js in a similarly detached way as you might use jQuery now. Sarah… Read More

Frontend Focus Issue 326 — February 7, 2018 Using Media Queries for Responsive Design in 2018 Explores the use of media queries in responsive design today, how they work alongside Flexbox and Grid Layout, and what’s coming in the future. Rachel Andrew Here’s How Google Chrome’s New Ad Blocker Works Google Chrome will soon begin… Read More

Frontend Focus Issue 325 — January 31, 2018 How to Use Variable Fonts in the Real World Using variable fonts (now supported across multiple browsers) in a real production context can be tricky. Here’s how studio Clearleft achieved it for a new conference website. Richard Rutter Recreating the GitHub Contribution Graph with CSS Grid Recreating… Read More

Frontend Focus Issue 324 — January 24, 2018 Bootstrap 4 Released After a lengthy beta, the final release of the fourth version of popular frontend toolkit Bootstrap is here. No breaking changes. Mark Otto, Jacob Thornton, and Bootstrap contributors Using CSS Clip Path to Create Interactive Effects As a kid, did you ever cut out… Read More

Frontend Focus Issue 323 — January 17, 2018 How Big Is That Box? Understanding Sizing in CSS Layouts A great introduction to the concepts around lengths, units, and content-based sizing with layouts based on Grid and Flexbox. Rachel Andrew Meet HTML 5.2’s New ‘dialog’ Element An introduction to HTML’s new dialog element for adding native… Read More

Frontend Focus Issue 322 — January 10, 2018 What’s New in HTML 5.2? HTML 5.2 became an official W3C Recommendation (REC) a month ago, but what did it introduce and change? Ire Aderinokun CSS Grid Explained in 7 Minutes (with Diagrams and Code) A quick and easy high level introduction to the main concepts of… Read More

Frontend Focus Issue 321 — December 19, 2017 In this issue, we’re taking a look back at the most popular links of 2017. It’s a great opportunity to catch up with the bigger stories that caught everyone’s imagination in the world of frontend development this year. We’re now taking a break for Christmas and will… Read More

Frontend Focus Issue 320 — December 13, 2017 Understanding CSS Layout and the Block Formatting Context “Understanding what a BFC (Block Formatting Context) is, why it works, and how to create one is useful and can help you to understand how layout works in CSS.” If you’ve ever wondered what overflow: auto actually does, you… Read More