CSS Frameworks or CSS Grid: What Should You Use?

web.dev: New Interactive Web Performance Docs from Google — A new site that aims to bring together all of the Web performance expertise Google has as a set of docs packed with actionable guidance and analysis. TheMeasure tool also provides a neat audit of your own site’s performance.

Google Developers

CSS Frameworks or CSS Grid: What Should You Use? — If you’ve wondered whether CSS Grid can actually replace the need for CSS frameworks or third-party component libraries, this analysis of the status quo by Rachel Andrew will be of interest.

Rachel Andrew

Secure and Accelerate Your Cloud Storage — Use Cloudflare Workers to cache content while still preventing unwanted access with HMAC and JSON Web Tokens.

Cloudflare Workers sponsor

CSS and Network Performance — A thorough look at some of the best network performance practices to employ when it comes to loading CSS.

Harry Roberts

Editorial Layouts, Floats, and CSS Grid — “CSS Grid is in many ways a dream come true, but there’s at least one basic thing it can’t do.” Rachel Andrewsresponds with a potential future solution for the problem.

Rob Weychert

The Mozilla Firefox DevTools Team Needs Your Input — The Firefox team are working hard on new developer tools to make your life easier, such as a Flexbox inspector and CSS change-tracking . You can play with early versions now, but Mozilla wants your dev-oriented input generally too.

Victoria Wang (Mozilla)

Redesigning Your Sites for 'Dark Mode' — The latest version of macOS introduced support for ‘dark mode’, essentially a dark-colored OS theme. The latest Safari tech preview supports detecting from CSS and styling your sites and webapps differently.

Andy Clarke

:computer: Jobs

Software Engineer, Front-End (Browser Extensions) - San Francisco — We're looking for an Engineer to join our Browser Extension team to help achieve our mission of improving lives by improving communication.

Grammarly

Join Our Career Marketplace & Get Matched With A Job You Love — Through Hired, software engineers have transparency into salary offers, competing opportunities, and job details.

Hired

:blue_book: Tutorials

Inlining or Caching? Both Please! — “I wonder if the new Service Worker and Caching APIs could enable caching for inline code.” It turns out, yes, they can.

Scott Jehl

A Code-Driven Guide to the HTML5 Canvas — A guide to the Canvas API, one of the best ways to draw graphics dynamically in the browser.

Flavio Copes

Become More Productive with the Right Editor — WebStorm offers smart code completion and refactorings, and makes it easier to debug and test your apps.

JetBrains sponsor

A Guide to Custom Elements for React Developers — Custom elements can offer the same general benefits of React components without being tied to a specific framework implementation.

Charles Peters

The Writable Files API: Simplifying Local File Access — The Chrome team are working on this new API that would increase interoperability of webapps with native apps by making it easier to interact with the native file system.

Google Developers

Simplifying Styling with 'Functional CSS' — The idea of having each CSS class do only one, simple, guaranteed thing, and then ‘composing’ them together in a functional sense.

Harry Nicholls

Building a Donut Chart with Vue and SVG

Salomone Baquis

Free PDF - The 1:1 Framework Your Programmers Will Love

MarcusBlankenship.com sponsor

How to Create Printer-Friendly Pages with CSS — People still print Web pages, whether for records, tickets, or simply to read later on, and there are things you can do to make the experience better.

Craig Buckler

How To Build a Virtual Reality Model with Real-Time Cross-Device Preview — A walkthrough of programming three-dimensional objects and adding simple interactions.

Alvin Wan

:wrench: Code and Tools

Squoosh: Google’s New Web App To Squeeze Images Down to Smaller File Sizes — Supports MozJPEG, OptiPNG, and WebP. It’s atsquoosh.app and you just drag on the images you want to optimize.

Jon Porter

▶   Project VisBug: An Experiment in Web Design Tooling — An extension for Chrome (announced at Chrome Dev Summit) which allows you to design directly in the browser, inspired by Firebug.Repo here.

Google Chrome Developers