Frontend Focus Issue 342: May 30, 2018

#342 — May 30, 2018

Getting Started With CSS Layouts — Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about approaching building layouts with CSS in 2018.

Rachel Andrew

Chrome 67 Released: What's New For Developers? — The latest Chrome introduces support for desktop-based progressive web apps (PWAs) on macOS and Windows, support for the Generic Sensor API, BigInt support in JavaScript, and more. There’s also been a lot of tweaks to Chrome 67’s DevTools.

Pete LePage (Google)

Build Your Next React Class: Eligible for Free Tuition — Rank the priority of course material for your ideal React class by taking this 1-question survey. Respondents enter in a chance to take a free class.

Big Nerd Ranch sponsor

The Service Worker Cookbook: Practical Examples of Using Service Workers — Examples of using Service Workers to do things like push notifications, caching, fallbacks, complete with annotated code. (Note: The source files are linked at the top right when you go into a specific example. I missed seeing them at first..)

Mozilla

Wired Elements: UI Elements with a Hand-Drawn Look — Possibly useful for wireframes and mockups, or wherever you want a less formal look. Implemented as Web Components and cover things like checkboxes, cards, input fields, radio buttons, etc. GitHub repo.

Preet Shihn

Beyond SPAs: Alternative Architectures for Your PWA — Building a Progressive Web App doesn’t necessarily mean building a single page app. Learn about alternative architectures for content-focused PWAs here.

Jeff Posnick (Google)

Shadow DOM Enabled in Firefox Nightly Builds — Likely to turn up more generally in Firefox 62 or 63.

Mozilla

USA Today Sends EU Users to Ultra Lightweight Site Due to GDPR — The homepage clocks in at 297KB versus 5.5MB for the usual US site and includes no third party tracking.

Paul Calvano on Twitter

Experience the O'Reilly Fluent Conference for Just $199

O’Reilly Media, Inc sponsor

💻 Jobs

Sr. Fullstack Engineer (Remote) — Sticker Mule is looking for passionate developers to join our remote team. Come help us become the Internet’s best place to shop and work.

Sticker Mule

Frontend Web Engineer (London, UK) — Join us to develop our web app and internal tools that enable us to build cities & run transport services.

Citymapper

Front-End Expert? Sign Up for Vettery — Top companies use Vettery to find the best tech talent. Take a few minutes to join our platform.

Vettery

📘 Tutorials

How CSS Works: Understanding the Cascade — Make your CSS less brittle by truly understanding the ‘C’ in CSS.

Benjamin Johnson

Z-Index Explained: How to Stack Elements Using CSS — A nice reminder…

Veronika Ivhed

Cheat Sheet: Functional Programming with JavaScript Out Now — A handy resource for JavaScript developers interested in writing functional style code. Get it now.

Progress Kendo UI sponsor

The CSS Grid Layout vs CSS Frameworks Debate — With cutting-edge CSS standards like CSS Grid Layout and Flexbox, does it still make sense to learn and use Bootstrap?

Maria Antonietta Perna

▶ PWA Starter Kit: Build Fast, Scalable, Modern Apps with Web Components

Monica Dinculescu

(Sublime) Text Editing Techniques Every Front-End Developer Should Know

Ben Frain

How to Detect WebVR Support with JavaScript

David Walsh

Exploring the Concept of Progressive Web Games

Mozilla Hacks

▶ CSS Grid Can Eliminate Margin Collapsing

Jen Simmons

🔧 Code and Tools