#334: Optimizing Load Times with Chrome DevTools

#334 — April 4, 2018 Read on the Web Frontend Focus Progressive Web Apps on iOS Are Here — iOS 11.3 added support for several PWA technologies (such as Service Workers) meaning apps can now be installed on iOS without App Store approval. There are limitations, of course, and here’s a rundown of what you need to know. Maximiliano Firtman Introducing Network Error Logging — Server logs are useful, but what if you could request logs from clients? It turns out the W3C’s Web Performance Working Group are working on an approach called Network Error Logging. Douglas Creager New Course: From Fundamentals to Functional JavaScript, v2 😀 — Learn the techniques you need to write professional, modern JavaScript. This course starts with the basics and takes you to mastering key functional methods like map, reduce and filter...plus promises and ES6+ asynchronous JavaScript. Frontend Masters sponsor Understanding Logical Properties and Values — The CSS Logical Properties and Values spec is still at an early stage but logical properties and values will allow us to control layouts through logical, rather than physical, mappings and it’s worth having an idea of how they work. There’s also a PostCSS plugin if you want to start using them now. Rachel Andrew How to Get Started with Coding Email Layouts — An increasingly common task for front-end developers with lots of quirks to be aware of. Caity G. O'Connor The Critical Path: Optimizing Load Times with Chrome DevTools — Improvements you can make and measurements to keep track of in order to optimize load times on a complex web application. Ben Dilts Calling All Web Developers: Here’s Why You Should Be Using Firefox — “In my opinion, Firefox Quantum has superior performance compared to other browsers.” Here’s why. Ibrahim Nergiz 5 Things with Anders Hejlsberg - Why TypeScript is for you — Quickly learn 5 quick tips about TypeScript and why it’s for you. Microsoft sponsor ▶  An Introduction to Viewport Units — A look at how you can use vw, vh, vmin, and vmax in creative ways. Jen Simmons ▶  Cropping Images on the Web with Object Fit Jen Simmons The Inside Story of Reddit's Redesign WIRED Jobs Web Backend Developer (Fairfax, VA) — City State Entertainment is looking for an ASP.NET dev to help create Camelot Unchained, an RvR fantasy MMO for its studio in VA. City State Entertainment Frontend Developer - Milan, Italy — MotorK is looking for passionate Junior and Senior frontend devs to join the team. Great place to work and career opportunities. MotorK Front-End Expert? Sign Up for Vettery — Create your profile and we’ll connect you with top companies looking for talented front-end developers. Vettery 📘 Tutorials Designing Systematic Colors — How to make themable, flexible, WCAG 2.0 compliant color ramps for a design system. Jeeyoung Jung Easy Accordions with the 'details' and 'summary' Elements Chris Coyier Super-Powered layouts with CSS Variables and CSS Grid — A look at using CSS variables to control CSS grid layouts. Michelle Barker A Simple Guide to Taking a Web Page Offline, using Service Workers Adeyinka Adegbenro Creating Vue.js Transitions & Animation: Live Examples Snipcart sponsor Recreating Iron Man’s Arc Reactor Using CSS3 Transforms and Animations Kunal Sarkar Contextual Styling with Custom Properties — A look at how using custom properties might make contextual styling (i.e. multiple themes on the same page) a bit easier. Simurai Measuring the Hard-to-Measure — A quick tip to measure how many of your users turn up on a device with no JavaScript capabilities. Harry Roberts 🔧 Code and Tools loaders.css: Fast Pure CSS Loading Animations — See them all in action here. Connor Atherton Pose: A Declarative Animation Library for HTML, SVG and React — The powers of SVG, React, and CSS combine to make easily declared and triggered element animations. Popmotion imaging-heap: A Command Line Tool to Measure The Efficiency of Your Responsive Image Markup — ..across viewport sizes and device pixel ratios. Filament Group Get the Official Bulma Book & Learn How to Create Your Own Interface Bleeding Edge Press sponsor Bulma: A Flexbox-based CSS Framework Jeremy Thomas A CSS Grid-Powered Expanding 'Box Filled' Menu Mary Lou   ✨  Golden Oldies 10 Tips on Typography in Web Design Nick Babich A Step-by-Step Guide to Making Pure CSS Tooltips Youssouf El Azizi Houdini: Maybe The Most Exciting Development In CSS You'd Never Heard Of — The fruits of this W3C task force are beginning to be seen in browsers now so it’s worth revisiting what they’re all about. Philip Walton

by via Frontend Focus