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

Frontend Focus Issue 319 — December 6, 2017 Web Content Accessibility Guidelines For People Who Haven’t Read Them A detailed look over the WCAG – a starting point in making your sites work better for all. Alan Dalton How Stripe Designs Beautiful Websites Examining the tips and tricks used to make Stripe’s frequently copied site… Read More

Frontend Focus Issue 318 — November 29, 2017 Building Accessible Web Menu Systems A deep exploration of creating accessible menus for the Web, starting from defining exactly what a menu even is. Smashing Magazine Generating Wireframe Boxes with CSS and HTML5 A really neat look at a technique for using CSS and data attributes to… Read More

Frontend Focus Issue 317 — November 22, 2017 Using CSS Grid: Supporting Browsers Without Grid CSS Grid might provide one of the biggest recent improvements in front-end development, but how can we gracefully deal with browsers that don’t support it? Rachel Andrew What’s New in Firefox 58: Developer Edition After the successful launch of Quantum,… Read More

Frontend Focus Issue 316 — November 15, 2017 Introducing the New Firefox (57): Quantum A major update that’s “over twice as fast as Firefox from 6 months ago, built on a completely overhauled core engine.” It’s time to revisit Firefox if you haven’t recently. Mark Mayo Using SVGs as Placeholders, and Other Image Loading Techniques… Read More

Frontend Focus Issue 315 — November 8, 2017 The Front-End Checklist An exhaustive list of all the elements you need to have/test before launching your site. Brandon Morelli Creating a Star to Heart Animation with SVG and Vanilla JavaScript A step-by-step how-to for smooth transitions from one shape to another. Ana Tudor Building a Responsive… Read More

Frontend Focus Issue 314 — November 1, 2017 Creating HTML Web Components with Vanilla JS While native Web Component support isn’t 100% yet, polyfills are available, and this tutorial walks through what’s involved to create your own HTML tags as components. Ayush Gupta HTTP 103: A Draft HTTP Status Code for Indicating ‘Hints’ The idea… Read More

Frontend Focus Issue 313 — October 25, 2017 The Story of CSS Grid, From Its Creators The story behind the CSS Grid spec, and the more than 20-year process that led to today. Aaron Gustafson HEAD: Everything To Go In Your HTML’s ‘head’ Starts from the usual basics (title, charset, etc.) but works up to… Read More

Frontend Focus Issue 312 — October 18, 2017 Rebuilding Slack’s Website The story behind the redesign of Slack’s home on the web — powered by CSS Grid and optimized for performance and accessibility. Mina Markham Chrome 62 Released: What’s New? Improved Network Information API, support for OpenType variable fonts, new ways to capture media, and… Read More

Frontend Focus Issue 311 — October 11, 2017 The Web at Maximum FPS: How WebRender Gets Rid of Jank “WebRender isn’t really about making rendering faster. It’s about making it smoother.” A great look at improvements coming to Firefox soon. Mozilla Hacks Image Effects with CSS A collection of CSS snippets to create fast, complex… Read More