#436 — April 15, 2020

Read on the Web

Frontend Focus

How to Monitor Your Web Page's Total Memory Usage with performance.measureMemory() — Learn how to measure memory usage of your web page in production to detect regressions. (Chrome only, for now.)

Ulan Degenbaev

Microsoft Edge 81 Release Notes for Stable Channel — Version 81 of Microsoft Edge hit the stable channel yesterday, bringing with it the new built-in Collections feature, DevTools localization in 10 new languages, updates to the 3D View tool, and more.

Microsoft

Our Tech Skills Platform Is Free for the Month of April. Start Today — During the entire month of April, we're unlocking Pluralsight Skills for everyone, so you can stay home, stay safe and use your time building in-demand technology skills.

Pluralsight sponsor

What is the 'JAMstack' and How Do I Get Started? — A good explainer that goes through exactly what JAMstack is and how to take advantage of its benefits. (Psst, we’ve recently launched a JAMstack newsletter.)

Colby Fayock

jQuery 3.5.0 Released — A notable security fix (for a cross-site scripting vulnerability), plus some features additions, fixes and depreciations.

Timmy Willison (jQuery Foundation)

Ten Security Tips for Frontend Developers — A pretty decent list of recommendations aimed at frontend devs for securing a website or app, including tips on CSP, XSS, third-party scripts, and more.

Konstantin Lebedev

“I am still disappointed that Edge didn't take the opportunity to name the Canary channel 'Bleeding Egde' and the Beta channel 'Cutting Edge'.”

???? Jobs

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

Frontend Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

???? News, Tutorials & Opinion

How To Create a Particle Trail Animation in JavaScript — Anna Prenzel explains how to easily program a small trail of particles with anime.js.

Smashing Magazine

CSS System Font Stack Reference — Takes a detailed look at a recommended CSS font stack that uses system fonts (e.g. -apple-system) for an optimized cross-platform solution.

Alligator.io

Introduction to Web Accessibility — The availability of this free online course from the W3C’s Web Accessibility Initiative has been extended through until the end of May. It’s designed to provide a strong foundation for making sites/apps work well for people with disabilities, meet international standards, and enhance UX for all web users.

W3C course

Responsive Images the Simple Way — A look at handling resolution switching using the srcset and sizes attributes.

Scott Vandehey

Tips for Writing Animation Code Efficiently — A concise list of tips focused on how to efficiently build animations (using GSAP).

Zach Saucier

The Surprising Performance Boost From Changing GIF Embeds

Swizec Teller

Continuous Deployments for WordPress Using GitHub Actions — Shipping code to a production server often requires paid services. With GitHub Actions, Continuous Deployment is free for everyone. Read how to set that up.

Steffen Bewersdorff

CSS Variables for React Devs — A solid look at how to use CSS variables (custom properties) in your next project. (If you’re working with React, we have a newsletter for that too!)

Josh W Comeau

Making A Responsive CSS Grid Layout with Just 3 Properties

Daniel Nastase

Using CSS to Set Text Inside a Circle

Kerry Smyth

Reminder: Bootstrap 5 Is Dropping Support for Internet Explorer

Bootstrap

???? Code, Tools and Resources

Flip: Animated Flip Counter Plugin to Add a Countdown to a Site — Adds an animated dynamic countdown timer to a page. No dependencies, responsive and mobile friendly, and fits any language, locale, or time zone.

Rik Schennink

Vime: A New, Modern Media / Video Player for the Web — Aims to be a ‘modern alternative to Video.js and Plyr’: “The idea behind Vime is we want you to control the player, not the other way around.” Modular, tree-shakable, and with potential for a plugin ecosystem. GitHub repo.

Rahim Alwer

CSS Color Gradient Generator — Another straightforward option for generating gradients for backgrounds/other page elements. Has a decent selection of predefined gradients too.

Monokai

midori: A Library for Animated Image Backgrounds — Built with three.js, provides support for animated transition, a configurable dynamic “camera”, and post-processing effects.

Benjamin Pang

#437 — April 22, 2020

Read on the Web

Frontend Focus

Inside a Dev's Mind: How To Plan Out a UI Feature — A look at how to approach building a new frontend feature in a thoughtful, considered way, based on one developer’s own thought process. It’s neat to see how he’d approach the task of building a basic heatmap (above).

Johannes Kettmann

The Cost of JavaScript Frameworks — Using data from the HTTP Archive, Tim explores the performance cost of using various popular frameworks as a starting point. Some good analysis here.

Tim Kadlec

Free Guide: 6 Steps to Improving Your Embedded Analytics UX — You don't have to be a UI/UX designer to create impressive dashboards for your application. Use these 6 principles to enhance your application’s analytics and delight your end-users.

Logi Analytics sponsor

LCH Colors in CSS: What, Why, and How? — An introduction to LCH colors (Lightness, Chroma, Hue), a new feature in CSS, which Lea refers to as a “game changer”. There’s a related LCH color picker tool too.

Lea Verou

▶  'We've Ruined The Web. Here's How We Fix It.' — An interesting hour-long chat with Jeremy Keith, a ‘philosopher of the internet’, on the imbalances found in the modern the web:

"All the evidence staring us in the face is that faster websites will make you more money – yet for some reason, that’s just ignored in favor of weirdly prioritized stuff."

Gerry McGovern podcast

Version 1.3.0 of Tailwind CSS Is Here — We've linked to this popular utility-first CSS framework a fair few times over the years and it continues to improve. This latest release brings with it declarative layout utilities, transition-delay support, font-size/line-height pairings and more.

Tailwind CSS

???? Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

???? News, Tutorials & Opinion

13 Places to Find Front-End Challenges — “My favorite way to level up as a front-end developer is to do the work. Literally just build websites,” says Chris Coyier. If you’re short of ideas on how to level up, these other sites will help.

Chris Coyier

Listboxes vs. Dropdown Lists — An in-depth look at the advantages and disadvantages of using two HTML form components, one much more common than the other.

Anna Kaley

???? All Day Hey! Live: An Online Conference for Designers & Frontend Devs — This all-day conf is now fully digital, and will be live-streamed early next month. The lineup is looking good, with speakers from Netlify, Smashing Magazine, and Microsoft to name a few. Tickets are affordable, and those currently out of work can attend for free.

Hey!

Creating Morphing Animations with CSS clip-path — Learn how to implement morphing, a technique for transforming one appearance into another, using CSS.

Mikael Ainalem

Pseudo-Randomly Adding Illustrations with CSS — Eric’s personal site has recently been redesigned, bringing with it a collection of Japanese illustrations - used to add a bit of flourish and decoration between bodies of text. Here’s how Eric got one of the set of illustrations to display at random with just CSS (no PHP or JavaScript here).

Eric Meyer

Try It for Free: The Perfect Partner to MongoDB Atlas — Use MongoDB Atlas? Try the perfect partner for it. Save hours with our GUI & unlock the power you need, with Studio 3T.

Studio 3T sponsor

Wes Bos Shares His Personal Site's Stack — Always nice to see folks update a personal site (more of this please!). Here’s how Wes Bos moved away from WordPress over to a Gatsby set up.

Wes Bos

Minimum Viable Dark Mode — How to create a ‘quick and dirty’ dark mode for simple apps/sites using pure CSS.

Chase McCoy

Re-creating a Macintosh with Gradients and Box-shadows — Sarah runs through a quick explanation of how they created an original Macintosh using CSS.

Sarah L. Fossheim

Are You using SVG Favicons Yet? A Guide for Modern Browsers

Antoine Boulanger

???? Code, Tools and Resources

patern.css: Fill Empty Background with Beautiful Patterns — A neat collection of CSS-only backgrounds. You can see them in action on the demo site.

Jiten Bansal

Good Email Code: A Library and Guide for Writing HTML Email — This seems to be in early development but contains some snippets with explanations for cross-browser HTML email code.

Mark Robbins

Isomorphic Layout Composer — An SSR layout service that composes a web page from fragment services.

Namecheap

Poolors: Generate Unique Color Palettes — This generates deep-linked color combos not often used by developers. Not sure how they determine least-used, but the example combos are indeed interesting and not-so-common.

poolors