Frontend Focus
Issue 290 — May 17, 2017
Mavo is a new tool to help create web applications. It turns static HTML into reactive web apps without a single line of code or a backend. Get the beta here.
Lea Verou

An exploration of best practices for loading CSS in the browser and how to achieve a ‘meaningful’ paint within 1000ms.
Patrick Hamann

Lin Clark explains what exactly WebAssembly is, and what makes it fast.
Smashing Magazine

.TECH Domains
Viacom did it. CES did it. TNW did it. Global winner of WIX SEO Hero challenge did it. Tech startups are doing it, and so are tech influencers. What about you?
.TECH Domains   Sponsor

A look at why a team chose to build their app without a front-end framework, and what the pros and cons of a framework-free back-end are.
Nick Gauthier

WebKit now supports the prefers-reduced-motion media feature. Here, James Craig from the WebKit team runs through a few demos of how the feature is intended to work.

A look at “how we got to having more web fonts than we can shake a stick at”.
Chen Hui Jing

Version 2.0 of Polymer has landed, with support for ES6 class-based syntax.
Wendy Ginsberg

How to use Chrome Devtools to identify paint bottlenecks. 3 minutes.
Sam Saccone

Jobs Supported by

  • Frontend Developer at X-Team (Remote)We seek a developer with extensive Frontend knowledge. We're 100% remote and provide the funding needed to help you achieve your goals and grow. X-Team

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

In Brief

Orientation Sensor First Public Working Draft news
The Orientation Sensor API provides information on a device’s physical orientation.

SitePoint's 'Ultimate CSS Survey 2017' Seeking Responses news

ForwardJS Tickets on sale today news
Attend full-day hands-on React workshops and dozens of talks at ForwardJS San Francisco this July.
ForwardJS  Sponsor

A Journey to Highly Effective and Maintainable CSS Media Queries tutorial
Writing CSS Media Queries is easy, but Kaloyan argues that writing them in a maintainable and highly effective manner is not.
Kaloyan Kosev

Best Practices for Chrome Push Notifications Permissions UX tutorial
Owen Campbell-Moore

The Beginner’s Guide to the Web Storage API tutorial
Swathi Prasad

A Walkthrough of CSS Length Units You Can Use for Font Size tutorial

Microsoft Edge: What’s New/Next for The Web & Web Apps On Windows video
A quick tour of what’s new in Microsoft Edge and the Windows web platform.
Channel 9

Modern Front-end Web Development in Visual Studio 2017 video
A detailed tour of new features.
Channel 9

CSS Grid with Rachel Andrew and Jen Simmons podcast
Two CSS Grid experts help navigate what Grid is, when you can use it and how flexbox and grid play together.

Add Powerful UI Components to your React Apps with ExtReact tools
Learn how to build data-intensive, cross-platform webapps leveraging 115+ Sencha components and React.
Sencha, Inc.  Sponsor

SVGito: Little Optimizations for SVGs tools
A web-app with new optimizations for your SVG files—especially those exported from Sketch.
Peter Nowell

Sizzy: A Tool for Developing Responsive Websites Crazy-fast tools
Allows for multiple device previews on one screen. Associated blog post here.

Google's Material Design Color Tool tools
Measure the accessibility of color combinations with this handy UI tool.

mini.css: Minimal, Responsive, Style-Agnostic CSS Framework code
mini.css is a CSS framework designed to be lightweight, responsive and style-agnostic.
Angelos Chalaris

Tinyreset: Tiny CSS Reset for The Modern Web code