Frontend  Focus

#467 — November 18, 2020 | Read on the web

A Complete Guide to CSS Gradients — A solid, thorough manual covering linear, radial, conic, and repeating gradients, plus lots of handy tips and pointers.

Geoff Graham

New WebKit Features in Safari 14 — Safari 14 has been released for macOS Big Sur, iPadOS 14, iOS 14, and watchOS 7 and has introduced a lot of new developer focused stuff including Web Extensions support, Touch ID and Face ID for the Web, and WebP support (finally). Apple’s move to its own CPU may spur Safari adoption on macOS too for the performance benefits, which makes Safari even more important to monitor now.

Jon Davis

Vue 3 Is Out! Jump into Vue 3 Quickly in This New Course by Sarah Drasner — Learn fundamental concepts in Vue, such as directives, methods, and computed watchers. You’ll learn Vue’s reactivity system and the new Composition API in Vue 3.

Frontend Masters sponsor

Babylon.js 4.2 Released: A Powerful 3D Rendering Engine for the WebBabylon.js is a particularly powerful 3D rendering engine aimed at artists, game developers, and anyone with 3D ideas to explore. New to 4.2 is a new particle editor, sprite editor, texture inspector, and more. See the playground if you want a quick play.


Everyone Should Have Access to the Web — “The World Wide Web Foundation began as a way to bring the web to everyone. In these trying times, it is needed more than ever.”

Jay Hoffmann

⚡️ Quick bits:

💻 Jobs

Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.


🧑‍💻 Looking to share your job listing in Frontend Focus? There's more info here.

📙 Tutorials, News & Opinion

The Cleanest Trick for Autogrowing Textareas — Yes, this should be a standard Web feature, but it's not too hard to get working with a quirky CSS trick.

Chris Coyier

Standardizing <select> And Beyond: The Past, Present And Future Of Native HTML Form Controls — Stephanie Stimac looks back at the early days of HTML, tracing the evolution of form controls through to the present, and explores the current state of working with them.

Smashing Magazine

▶  Building Extensions for Microsoft Edge — A look at how to publish new or existing Chromium extensions to the Edge add-ons store.

Pratyusha Avadhanula

Browsers Don’t Have Feelings - Measure What Matters to Users — Page load time isn't enough, users care about perceived performance. Track interactivity metrics and build for impact.

New Relic sponsor

Best Practices for E-Commerce UI Design — A look at key parts of a digital store and what you can do to design each to help customers more effortlessly get to the checkout stage.

Suzanne Scacca

Contact Form Processing Made Easy with Netlify — A great in-depth look at using Netlify Forms including features like spam protection and responding to submissions via a serverless function.

Raymond Camden

Web Development for Beginners: A Curriculum by Microsoft — A 12-week, 24-lesson course all about JavaScript, CSS, and HTML basics. The lessons include videos, pre- and post-lesson quizzes, supplemental reading, and more.

Microsoft beginner

How to Make curl Request a Site from a Different IP Than in DNS — Handy if you're moving a site from one server to another or perhaps want to get around a CDN for testing or diagnostics purposes.

Peter Cooper

The Rise of the Front-End Developer

LaunchDarkly sponsor

The Reason Comic Sans Is a Public Good

Drake Baer

Seven Top Frontend Frameworks & When To Use Them

James (Hacker Noon)

'Your First Attempt At Making Anything Accessible Will Be Awful' — But accessibility expert Sheri Byrne-Haber stresses not to “use this as an excuse” as your initial efforts may well be “better than 98% of what other people are doing”.

Sheri Byrne-Haber

Beginner’s Guide to Static Site Generators — The world of static sites has grown beyond HTML, CSS, and occasional JS, and much of it is owed to static site generators. This is a good look at the key players.

Thom Krupa beginner

Debugging CSS: A New Ebook — It costs money but this isn't a commonly covered topic.

Ahmad Shadeed

🔧 Code, Tools and Resources

Cosha 1.1: Add Colorful Shadows to Web Images — You can call it with a single line or pass in various options to customize the shadow.

Robin Löffel An API for Web Icons — This neat project allows you to embed an SVG from various icon sets while having the ability to add URL params that specify the fill color along with the desired icon.

shubham jain

Atkinson Hyperlegible Font: A New Typeface for Low Vision Readers — Focuses on letter form distinction to increase character recognition (handy for commonly misinterpreted letters and numbers), meaning greater legibility for readers. The font is used on the page itself.

Braille Institute

link-to-qr: Instantly Create and Download a QR Code from a Link — You can customize the color of the QR code image, or add a border, subtle background, and optional text. Just enter a URL and download as PNG.