A 101 Course on Crafting 404 Pages

#365 — November 7, 2018 Read on the Web Frontend Focus A 101 Course on Crafting 404 Pages — Here’s why making an effort with a 404 page could better your site’s chances of people coming back despite the inconvenience, and how to track those errors to reduce how often people see it. Shelby Rogers A Netflix Web Performance Case Study — An interesting look at how Netflix worked to improve the ‘time-to-interactive’ metric on their desktop Web experience. It involved both prefetching and ripping out React. Addy Osmani Free: 💯 Complete Intro to Web Development, v2 — Get our complete introductory course to web development for free. This is a modern intro course where you'll go from building your first website to having the foundations to become a professional web developer. Frontend Masters sponsor ▶  Improve Animated GIF Performance with HTML5 Video — Everyone loves a good animated GIF (right?) but the nature of the GIF format can lead to huge file sizes and more CPU used than necessary. One workaround? Use HTML5’s native video support. Ayo Isaiah ▶  How One Dev Does Web Development on an iPad Full Time — I couldn’t do this myself, but it’s neat to see how the process works. Curtis McHale Chrome Will Soon Ad-Block An Entire Website If It Shows Abusive Ads — “With Chrome 71, Google is stepping up its fight against the internet’s abusive ads problem by blocking every ad on a site that persistently shows them.” Jon Porter Using calc() to Change The Height of a Hero Component — For situations where you need to mix relative units and pixels. For example: calc(24px + (18 - 24)*(100vw - 400px)/(1200 - 400)) Martino Stenta 💻 Jobs Frontend Developer at X-Team (Remote) — We help our developers keep learning and growing every day. Unleash your potential. Work from anywhere. Join X-Team. x-team 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 Optimizing CSS by Removing Unused Media Queries Dario Gieselaar Simple Named Grid Areas — “I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don’t absolutely need them (..) but it can make that placement more intuitive.” Chris Coyier 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 Measuring Performance With Server Timing — The HTTP Server-Timing header provides a convenient way to communicate backend server performance timings to browser-based developer tools. Drew McLellan Signed HTTP Exchanges Coming to Chrome 71 — Chrome will soon experimentally support ‘Signed Exchanges’ which let sites sign web content such that the content can be verified as to where it was originally from. Google Developers ▶  How Basecamp Uses CSS Grid in Production Important Show How to Use SVG Patterns As Backgrounds Adi Purdila How Do Top Developers Deliver Video? - Download the 2018 Video Report Bitmovin sponsor Simple Recommendations for Writing Text Descriptions That Make A Big Difference Léonie Watson 🔧 Code and Tools Shapes Created Solely with CSS Background Gradients — Gradients can do a lot more than, well, just make gradients. CodePen Howler.js: JavaScript Audio Library for the Modern Web James Simpson md-page: Create a Web Page with Just Markdown — No advance compilation required. Just add a script to a Markdown document and it Just Works™. Interesting idea. Oscar Morrison Prettier 1.15: Now with HTML, Vue, Angular and MDX Support — This opinionated code formatter now has support for HTML, Vue, Angular & MDX. Ika (Prettier)

by via Frontend Focus