Frontend Focus
Issue 327 — February 14, 2018
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 Drasner

You can export to SVG from drawing tools, but building graphics in a structured, code-based way has its own appeal, and with SVG being supported in every browser, it’s worth trying for your small icons and visual touches.
Kezz Bracey

Meta tags, link tags, Twitter card info, browser-specific directives, and more.
Josh Buchea

GrapeCity JavaScript Solutions
Build complete enterprise web applications with GrapeCity’s dependency-free, Angular JavaScript solutions. Includes Spread’s full-featured Excel-like spreadsheets and Wijmo’s collection of IntelliSense-enabled grids, charts, and input controls.
GrapeCity JavaScript Solutions   Sponsor

No official release notes yet but it’s here. Phaser is a fast 2D game framework for building HTML5 games supporting Canvas and WebGL rendering.
Richard Davey

As well as helping you target mobile email clients, unpredictable support for modern Web tech on desktop and webmail clients makes media queries useful there too.
Jason Rodriguez

From Ivan Akulov and Addy Osmani comes a guide to using the popular asset bundling tool to make pages smaller to download and quicker to use.
Google Developers

A serious look at the algorithms browsers are using to lay things out using Flexbox & Grid.
Rachel Andrew

A really cool way to initially play with WASM and see how the various parts work together.


In Brief

Chrome 68 to Mark All HTTP Sites as 'Not Secure' news

SEO Audit Category Added To 'Lighthouse' Chrome Extension news
The SEO audit in Lighthouse enables devs to run a basic SEO check for any page.

Messaging Between Tabs Using Service Worker tutorial
James Milner

Bringing Virtual Reality to the Browser with ReactVR tutorial
Getting started with ReactVR, a combination of the React framework and WebVR API.
Mirosław Ciastek

Building a Voice-Activated Movie Search App Powered By Amazon Lex, Lambda, and MongoDB Atlas (Part 2) tutorial
MONGODB  Sponsor

How I Design with CSS Grid tutorial
Chen Hui Jing

Direction Aware Hover Effects tutorial
Several Codepen demos of a striking visual effect.
Chris Coyier

Patterns for Writing Manageable CSS Without a Framework tutorial
Ten Bitcomb

Why Your Site is Slow 
Pantheon  Sponsor

Making A Browser Fast: The Story of Firefox Quantum video
Jean-Yves Perrie

Funkify: A Disability Simulator for Accessibility Testing tools
A Chrome plugin to experience the web through the eyes of differently abled users.

$20 Free On A New Linode Account tools
Linux cloud hosting starting at 1GB of RAM for $5/mo. Get $20 credit on a new account.
Linode Cloud Hosting  Sponsor

Pushy Button: CSS Pressable 3D Buttons code
Dronca Raul

Quark: A Tiny 'Atomic CSS' Polyfill code
Classes like color-red fontSize-20 get converted to appropriate CSS.
Tommy Hodgins

CSS 'Coding' Animation code
..made with pure CSS - demo here.
Chris Dermody