The Front-End Performance Checklist

#355 — August 29, 2018 Read on the Web Frontend Focus The Front-End Performance Checklist — An extensive list of things you should check or at least be aware of as a front-end developer trying to make your sites work as fast as possible. David Dias Using Feature Detection to Write CSS with Cross-Browser Support — If you’ve been subscribed for a while, you’ll have seen all manner of CSS modules - both established and experimental - mentioned here. Here’s how to use the modules you want in a progressively enhanced way across browsers by using feature detection. Schalk Venter monday.com - Collaborate, Plan, Track & Manage All in One Tool — What’s it all about? Well, monday.com is about managing your workload professionally, planning ahead visually and communicating with the team. Once these points are set, have your champagne to celebrate the success of your team brand. monday.com sponsor Best Practices for Mobile Form Design — A key goal as a Web developer is to make the process of filling out a form as easy as possible. This article shares a lot of practical techniques for designing effective mobile forms. Smashing Magazine ▶  Solving Container Queries Today — Media queries let you define CSS to take effect upon certain viewport conditions, but container queries that work at the level of containing elements would also be useful. Official support isn’t there yet but there are workarounds offering similar functionality. Greg Whitworth Babel 7 Released: The JavaScript Transpiler — We’re going to focus on this more in this week’s JavaScript Weekly on Friday. Henry Zhu Super-Powered Grid Components with CSS Custom Properties — A walkthrough of building a text and image component that uses CSS Grid along with CSS variables for placement. Michelle Barker 💻 Jobs Senior Front End Engineer at External Data Systems, Netflix — Help build a world class user interface for the platform that collects data to drive business insights for our teams. Netflix Find A FrontEnd Job Through Vettery — Create a profile to connect with inspiring companies seeking FrontEnd devs. Vettery 📘 Tutorials Using CSS Clip Path to Create Interactive Effects, Part II — A follow up to a January article on creating collage-style Web effects with CSS which leans on SVG to make things work in current browsers. Mikael Ainalem Create a Serverless Powered API in 10 Minutes — Use Cloudflare Workers to create and deploy a serverless API to 150+ data centers. Cloudflare sponsor Getting Started with Service Workers — A basic introduction to using Service Workers in the context of a Progressive Web App. Flavio Copes Inspect and Style an Element in DevTools that Normally Disappears when Inactive Elijah Manor A Native Lazy Load for the Web Platform — A new Chrome feature, ‘Blink LazyLoad’, was designed to dramatically improve performance by deferring the load of below-the-fold images and third-party IFRAMEs. Ben Schwarz Service Worker Caching Strategies Based on Request Types Thomas Steiner ::before vs :before — Pseudo elements vs pseudo selectors. Chris Coyier Extending the Browser with WebAssembly — WebAssembly opens up more options to extend the browser with new features. This article shows how to port the AV1 video decoder and play AV1 video in any modern browser. Alex Danilo (Google Developers) Don't Miss SIGNAL: Twilio Customer & Developer Conference - Oct 17 & 18 twilio sponsor 🔧 Code and Tools SVG Icon Transition Generator Tool — Upload two SVG icons of the same size and get a new SVG which transitions between them on click or hover. Nucleo Puppeteer Recorder: A Chrome Extension That Turns Browser Interactions into Puppeteer Scripts Checkly F2: A Flexible Charting Library Aimed at Mobile Devices — An HTML5 canvas-based charting library aimed specifically at mobile use cases. Sima size-plugin: Track Compressed Webpack Asset Sizes Over Time Google Chrome Labs Ghost 2.0: The JavaScript Blogging Platform — A popular Node.js and JavaScript-based blogging platform - a good alternative to WordPress. John O'Nolan goodshare.js: A Vue.js Component for Social Sharing Buttons — Full example here. Vic Shóstak LazyestLoad.js: Load Images Only When In (and Remain In) the Viewport Paul Browne Developer Tools for Every Customer Session – New in FullStory Fullstory sponsor The 'Carlton Dance' in Pure CSS — If you remember The Fresh Prince of Bel Air you won’t have forgotten this. CodePen

by via Frontend Focus