#349 — July 18, 2018

Read on the Web

Frontend Focus

The 9 Biggest Mistakes when using CSS Grid

▶  The 9 Biggest Mistakes when using CSS Grid — A fast-paced 14 minute video (ideal for a lunch break!) that runs through things like overusing CSS Grid, reaching for frameworks too quickly, or worrying about IE11 too much.

Jen Simmons

Chrome's 'Site Isolation' for Web Developers — Chrome’s new Site Isolation feature ensures pages from different sites run in a sandbox to improve security and prevent cross-site data sniffing techniques. This introduces some possibly unexpected considerations for Web developers, as covered here.

Mathias Bynens

Choosing the Right JavaScript Framework: Whitepaper — How do you choose one JavaScript framework over another for your next web application? Learn about the current state of Angular, React and Vue and how they compare against a comprehensive set of criteria. Download now.

Progress Kendo UI sponsor

The Holy Grail of Reusable Components: Custom Elements, Shadow DOM, and NPM — A look at augmenting HTML with components that have built-in functionality and styles as well as reusing them across projects via npm.

Oliver Williams

Building the Google Photos Web UI — It’s always fantastic to get a detailed look under the hood of how some of the web’s most heavily used apps are built.

Antin Harasymiv (Google Design)

Is It Worth Using IE's Version of Grid Layout? — Last week, we ran an item about coding CSS grid to work in IE 11 too but Rachel Andrew suspects it’s not necessarily worth the compromises.

Rachel Andrew

▶  CSS in JavaScript: FTW or WTF? — 10-15 years ago there was a heavy push in the webdev world to keep HTML, CSS, and JavaScript far apart but this is increasingly changing in modern webapps. This talk reflects on the concepts, pros and cons involved.

Bruce Lawson

💻 Jobs

Sr. Front-End Engineer, OTT - New York City — Vimeo is a place where all stories can be beautifully told. Build the future with us.

Vimeo

Senior Developer, New York or Remote — We're looking for a Sr Dev to join our team to help build, deliver and produce quality products for our growing customer base.

Apartment Therapy Media

Find A FrontEnd Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create your profile to get started.

Vettery

📘 Tutorials & Articles

How to Build an Animated Slider Component

Eder Diaz

❄️ ColdFront and a Holistic Future Outlook at the Front-End Landscape

ColdFront Conf sponsor

What Are Service Workers and How They Help Improve Performance — Service workers run in the background of a user’s browser and help provide various extended features.

Cody Arsenault

CSS Quick Tip: The Valid Characters in a Custom CSS Selector — Ultimately, though, don’t try to be too clever.

Adam Laki

An Experiment in Delivering WordPress in 7KB

Jack Lenox

▶  The Friction of Web Standards — Why does it take a long time to ship some new Web standards and what are the challenges implementors and spec authors face?

Eric Meyer

Which Podcasts Should Web Designers And Developers Be Listening To? — A shortlist of current podcasts for web designers and developers.

Smashing Magazine

🔧 Code and Tools

PWACompat: The Web App Manifest for All Browsers — Use the PWACompat library to easily bring your Web App Manifest to all browsers, even non-compliant ones.

Google Developers

Pinpointer: A Firefox Addon to Link to Specific Elements on Pages

Firefox Addons

Popbox.js: Stackable Modals for Web Pages — If you need a modal on top of your modal..

popbox.js

SlickMap CSS: A Stylesheet to Turn HTML Lists into Elegant SitemapsDemo here.

Astuteo

Phenomenon: A 2KB Low-Level WebGL Library — Provides the essentials to deliver high performance visuals easily. Several neat demos with code including throwing 10000 cubes around.

Colin van Eenige

Recurss: Recursive CSS Experiments — Take a big pile of nested DIVs, apply a style, what happens?

Matt Bierner

An Interesting 'Scrolling Gradient' Effect in Pure CSS — Overlaying two gradients leads to an interesting effect here.

CodePen