Demystifying Web Speed Tooling

#397 — June 26, 2019 Read on the Web Frontend Focus Optimizing Google Fonts Performance — Google Fonts are simple enough to implement, but can have a big impact on page load times. Here’s how to load them in the most optimal way. Danny Cooper ▶  Demystifying Web Speed Tooling — Paul Irish & Elizabeth Sweeny of Google gave a talk at Google I/O that dug deep into the world of user experience, Web performance, and the tools available to improve matters on your own site. Google I/O ’19 Continuously Testing React Applications with Jest and Enzyme — React has taken the frontend world by storm. Explore how to write tests for an existing React application and configure continuous integration to automate the testing and ensure that any new code we add doesn’t break the existing functionality. CircleCI sponsor Writing HTML in HTML — CMSes, static site generators.. are they all just getting in the way of what we really want.. HTML? This story really struck a nerve on social media last week, but I love the idea of pages maintaining their own style over time and not being spat out by a template-based CMS every time. John Ankarström Unraveling the JPEG — A fascinating and detailed look at what it takes to decode a JPEG, by far the most ubiquitous way of encoding, sending and storing images on the web. Omar Shehata First Public Working Draft of the CSS Animation Worklet API Published — The Animation Worklet API provides a method to create scripted animations that control a set of animation effects. W3C 💻 Jobs Senior Software Engineer (Santa Barbara or Remote) — Join a team where everyone is striving to constantly improve their knowledge of software development tools, practices, and processes. Invoca JavaScript / React Performance Optimization Engineer - Exodus (Remote) — Exodus are looking for an obsessive engineer to work on improving the performance of the Exodus desktop application. Exodus Find a Frontend Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Vettery 📙 Tutorials & Opinion 8 DOM Features You Didn’t Know Existed — A closer look at some pure DOM and Web API features that work in modern browsers with no dependencies. Louis Lazaris Web Accessibility In Context — Be Birchall explains why it’s so important to prioritize accessibility among teams and why there needs to be more awareness raised among developers. Smashing Magazine How to Enable Experimental Web Platform Features in Chrome and Firefox — If you want to experiment with the latest bleeding-edge web technologies, here’s how. Michelle Barker Get a User’s Eye View of Your Front-End Services with Datadog Synthetics — Build browser tests simply by opening up your application and interacting with it; Datadog will record your actions and automatically execute the test. Datadog sponsor An Approach to Responsive Layouts Based On CSS Custom Properties and EM Units — How to set smart variables that control the responsiveness of your web project. Sebastiano Guerriero Using Hamburger Menus? Try Sausage Links — The ‘sausage-link’ concept may prove to be a simpler alternative in certain use cases. Bradley Taunt Building a Conference Schedule with CSS Grid Mark Root-Wiley Converting divs Into Accessible Pseudo-Buttons Ben Frain 💡 Quick Tutorial of the Week supported by Responsive Layout With React Hooks and Context by Eric Bishard I recently spoke at a React conference in Chicago. I got a lot of questions about how I was controlling my Sidenav and Topnav based on breakpoints and manually clicking on the menu icon and how to make them work together as you see below: I have written about the topic over on the Telerik blog (Creating a Responsive Layout in React), and have taken the idea further in the demo that I am using in my talks — which can be found on GitHub at httpJunkie/react-loop-demo. ➡️ Read more... This week's tutorial is sponsored by KendoReact. Building UI for business apps is hard work, even with React. You can make it easy with this professional UI & data visualization component library designed and built for React from the ground up. Try it out. 🔧 Code, Tools & Resources FreezeFrame.js: A Library for Pausing Animated GIFs — A way to let users ‘pause’ animated GIFs and reanimate upon mouse hover or a similar event. Christopher Antonellis et al. Earn Passive Revenue for Your JavaScript Projects with 2 Lines of Code CodeFund sponsor a11y-css-reset: A Small Set of Global Rules to Make Things Accessible — …and reset default styling. Mike Engel Tumult Hype 4.0 Released — This popular paid tool for creating HTML animations has reached version 4.0, adding vector shapes and morphing tools. Tumult Inc The Windows 'Pipes' Screensaver Recreated with Zdog + GSAP Jhey Tompkins DarkModeJS: A Utility Package for Managing Dark Mode — Uses the matchMedia API and the prefers-color-scheme media query to fire functions whenever a user is in dark mode (or changes the mode). Assortment 🕰 ICYMI (Older stuff that's worth checking out..) A list of 50+ web features you can use safely (without polyfills or feature detection) when saying goodbye to IE11 support (about ~2% globally). Doug Sillars highlights how the long-standing favicon standard is often misunderstood and misconfigured. In this video colorblind designer David DeSandro explains how he works with color, interpreting hex codes into visible colors. Jen Simmons takes you on an in-depth tour of caniuse.com, uncovering little-known, powerful features of the site. Looking for something new to listen to? Here's a collection of podcasts for frontend developers.    🗓 Upcoming Events CSSCamp, July 17 — Barcelona, Spain — One-day, one-track conference for web designers and developers. An Event Apart, July 29-31 — Washington, D.C. — A popular three-day conference that focuses on all things relating to digital design and user experience. Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation. Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'. CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS. 🐦 P.S. Did you know we're on Twitter as well? Follow @FrontendDaily.

by via Frontend Focus