CSS Frameworks or CSS Grid: What Should You Use?

#366 — November 14, 2018 Read on the Web Frontend Focus 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. The Measure 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 Andrews responds 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 💻 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 📘 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 🔧 Code and Tools Squoosh: Google’s New Web App To Squeeze Images Down to Smaller File Sizes — Supports MozJPEG, OptiPNG, and WebP. It’s at squoosh.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 Transactional Email Toolkit for Developers Emailwizard sponsor Bulma: A Modern CSS Framework Based on Flexbox — It’s not new, but it’s under heavy active development with frequent releases. Jeremy Thomas A 3D Town Created with Emojis and CSS Transforms — And it’s already better than SimCity 2013 ;-) George W. Park

by via Frontend Focus