Frontend Focus
Issue 260 — October 5, 2016
CSS Grid expert Rachel Andrew has put together a handy set of short videos covering different aspects of creating your own CSS Grid layouts.
Rachel Andrew

Small but mighty, CSS ‘float shapes’ and feature queries could provide the latest boost to your front-end development toolset.
Eric Meyer

The most accessible format for any content on the web is plain text, and even where images are used, text can provide added value for many users. This is a handy set of tips on the topic.
Ire Aderinokun

If you're a HTML5/JS dev, maybe you have already jumped in on a responsive project and would like to learn more. If not, responsive web design will probably be a requirement in the near future. This whitepaper will give you the must-know responsive web.
Progress   Sponsor

Draw graphics, then g9 automatically makes them interactive for end users. There’s a great set of code-driven explanations and demos to learn more.

A step-by-step design process for creating layouts as unique as your content. Learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach page design. 31 minutes
Jen Simmons

“Grid layout is expressive and logical and it solves a number of fundamental gripes.”
Matt Hinchliffe

A look into the current state of HTML-based mobile UI frameworks for building hybrid apps.
Kris Erickson

Jobs Supported by

  • Senior Front-End Engineer (San Francisco, US)We’re looking for an experienced front-end engineer to join our small team of focused, dedicated technologists. Join us and help build our market leading Enterprise Dashboard. Quri
  • Senior Front End EngineerEveryone should have the power to create professional-quality videos. As a member of the Animoto team, you'll be developing a responsive, elegant web experience and pioneering the next generation of video creation software. Animoto
  • Don't love your job? You Should - Try Hired and Find the Right Fit.Hired puts the power back in your hands, by having companies apply to you, not the other way around. With Hired you only talk to companies you're interested in. Hired

Can't find the right job? Want companies to apply to you? Try

In Brief

CSS Grid Layout Module Level 1 at Candidate Recommendation news
CSS Grid Layout has transitioned to become a Candidate Recommendation.
Rachel Andrew

WebKit Introduces MotionMark: A New Graphics Benchmark for Browsers news

Software Remodeling rawurl
Corgibytes’ CEO Andrea Goulet compares remodeling software to how we remodel houses, focusing on biggest value fixes first. It’s about slowly transforming the codebase to become as efficient as possible.
Corgibytes  Sponsor

An Illustrated Guide to the SVG 'path' Element tutorial
Described as ‘the ultimate drawing element’.
Chris Coyier

10 Things You Probably Didn’t Know You Could Do with Chrome’s Dev Console tutorial
Swagat Kumar Swain

Responsive Table Layout tutorial
Data tables on the web are used to communicate important information to a user. Yet so many of these aren’t mobile-optimized. Here’s one easy way to do just that.
Matt Smith

How to Add or Remove a CSS Class with Vanilla JavaScript tutorial

Things to Watch Out for When Working with 3D in CSS tutorial
Ana Tudor explores some of the things which surprised her whilst working with 3D in CSS.
CSS Tricks

'Progressive Webapps' is the New Ajax video
32 minutes.
Chris Wilson

Why You Should Avoid document.write, Specifically for Script Injection opinion
Damien Jubeau

Can We Stop Bad-Mouthing CSS in Developer Talks, Please? opinion
Christian Heilmann

Frontend Developer at Honeypot (Berlin, Germany) rawurl
If you have a deep knowledge in JavaScript, Web Standards (HTML5, CSS3), UI/UX, a passion to create the best apps imaginable, and are seeking a new challenge with an awesome team, apply to Honeypot.
Honeypot  Sponsor

Landmarks: Navigate a Web Page via WAI-ARIA Landmarks tools
Matthew Tylee Atkinson

stylelint: A Modern CSS Linter tools

Blend: Create and Customize Beautiful CSS3 Gradients. tools
A handy browser tool to create CSS3 gradients.
Colin Keany

text-spinners: Pure Text, CSS Only Inline Loading Indicators code
A clever and flexible approach.

Optimizing Text Content for Screen Readers code
Quick tip on how using opacity and the ::after element can optimize screen-reading output. Here’s a short video demonstrating it in action.
Šime Vidas

Super Mario Kart Map Recreated in 3D with CSS demo
A fun use of CSS 3D functions to create a playable Mario Kart demo — use the arrow keys. Code available on the CSS3Dprototypes repo.