#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

#438 — April 29, 2020

Read on the Web

Frontend Focus

▶  min(), max(), and clamp()` Are CSS Magic — The min, max, and clamp functions are now starting to see more widespread browser support. Here’s a video running through how these properties can be used to really open up responsive typography techniques.

Kevin Powell

Accessible Font Sizing, Explained — Bootstrap core team member Andrés Galante runs through how we can ensure our font sizes are accessible by asking what sort of best practices we can rely on to make an accessible reading experience.

CSS-Tricks

Learn Advanced Creative Coding with WebGL & Shaders — Go deeper into creative coding. Join Matt DesLauriers to learn 3D vectors and shader effects using WebGL, ThreeJS, and GLSL.

Frontend Masters sponsor

CSS for Internationalisation — An excellent guide to the various features in CSS that can be used as part of an internationalisation strategy that goes beyond mere translation.

Chen Hui Jing

AMP Introduces 'User-Friendly' Content Encryption Support — AMP aims to be all about providing speed to mobile consumers of content but paywalls just, well, get in the way. So Google and the AMP folks have come up with a way where protected content can be served and unlocked client-side for more performance. Cynically, of course, you could consider this yet another form of DRM for Web content...

The AMP Blog

Responsive Web And Desktop Development With Flutter — A look at the current state of Flutter for browser-based apps and how to create a responsive app using it.

Carmine Zaccagnino

???? 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 the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

???? News, Tutorials & Opinion

Spacing in CSS — This is pretty much everything you need to know about spacing in CSS, covering grid layout, flexbox, positioning, and lots more.

Ahmad Shadeed

▶  Performance Profiling for Web Applications — An overview of how to use Chrome DevTools to understand a Web application’s performance bottlenecks.

Sam Saccone

JS VidCon - Virtual Conference for Developers — JS VidCon, on May 7th, where developers from all over the world can share & gain knowledge from the comfort of their home.

EventHandler sponsor

Gardened — A thought-provoking piece by Ethan that looks at some of the problems inherent in our self-regulated industry, in particular related to performance and accessibility.

Ethan Marcotte

CSS Clamp: The Goldilocks of CSS Math Functions — As with the video featured above, here's a quick look at how to use min, max, and size with the clamp property.

Steve Fenton

Creating A Lightweight CSS-Only Tooltip for All Screen Sizes

Ted Krueger

How to Make A Reading Progress Bar for Your Blog

Rob OLeary

???? Code, Tools and Resources

98.css: A Design System for Building Faithful Recreations of Old UIs — If for any reason you need to your interface to look like Windows 98 then this library has you sorted. Here’s the associated repo.

Jordan Scales

Color Accessibility: Tools and Resources to Help You Design Inclusive Products — We’ve linked to this before, but it’s recently been updated and remains a solid resource.

Stéphanie Walter

Will It CORS? — A handy online tool/wizard for establishing how your (potential) use case will (or won’t!) operate alongside CORS (Cross-Origin Resource Sharing).

HTTP Toolkit

Faster CI/CD for All Your Software Projects Using Buildkite

Buildkite sponsor

Shorthand: A CSS Framework for Designers — Includes a “lite” (only gray) and “full” version. This is similar to utility class-based frameworks, so the draw here is that you don’t have to write any CSS, just add classes.

Jiten Bansal

1loc: A Collection of One-line JS Snippets — A neat little collection of vanilla JavaScript one-liners divided into various categories (arrays, date/time, DOM, etc).

Nguyen Huu Phuoc

???? ICYMI (Some older stuff that's worth checking out...)

• Tim Kadlec shares thoughts on the 'blunt instrument' of loading stylesheets via preload, and some performance advice around how you go about loading CSS and the DOM order.
• Dynamic elements: Nothing new here for frontend experts, but this is a good summary for beginners discussing how elements can be built dynamically outside of the initial markup.
• Here's an in-depth look at a fairly simple feature: the disabled attribute for form elements (and how to handle them).
• Kevin Powell shares six simple (beginner) typography tips to achieve a more professional looking site. Skip to around the 3:20 mark to get straight into it.
• How to create a fully responsive fluid layout in just 20 lines of CSS (that also includes responsively resizing multi-column elements).
• Author Brian Hicks explores reducing asset sizes with subsetting. He uses a headless Chrome instance with Puppeteer to automate font subsetting on his static pages for savings of 87% on the original size.

#439 — May 6, 2020

Read on the Web

Frontend Focus

Introducing Web Vitals: Essential Metrics for Healthy Sites — Web Vitals is a new Google initiative to provide guidance on quality signals (think first input delay, load speed, etc.) that are key to delivering good user experiences on the web.

Google

A Complete Guide to CSS Functions — A thorough resource detailing everything you need to know about functions in CSS. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration — this is a good look at how to use them.

CSS Tricks

7 Design Tips for Pixel-Perfect Operational Reports — Pixel-perfect operational reports allow you to control every component down to the individual pixel level, so the rendered report is set exactly to spec. But how do you design them? Follow these 7 tips for creating beautiful, high-precision reports.

Logi Analytics sponsor

10 Years of HTML5 Boilerplate — A look at some of the history behind the front-end framwork that started them all: HTML5 Boilerplate, which is now 10 years old.

Rob Larsen

Firefox 76: Audio Worklets and Other Tricks — This latest version delivers new features for web platform support, such as Audio Worklets and Intl improvements, on the JavaScript side. Also a number of improvements to the DevTools have been added. Here’s the list of dev-focused changes.

Chris Mills & Harald Kirschner (Mozilla)

???? Jobs

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

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

Exciting Things on the Horizon For CSS Layout — …such as a new Grid inspector for Chrome, the ‘gap’ property in Chrome Canary, and (amazingly) masonry-style grids in Firefox Nightly.

Michelle Barker

Selection in CSS — Another one of Ahmad’s great deep dives, this time covering the ::selection pseudo-element and the user-select property in CSS.

Ahmad Shadeed

File Sharing Now in WebKit — Looks like more Web Share API support (Level 2 / file sharing) is landing in WebKit — spotted via this tweet from Jake Archibald.

WebKit Bugzilla

For Many, Accessibility Is An Unknown Unknown — “Accessibility is, for all intents and purposes, duct-taped onto the web. We need to make it a first class citizen in browsers. Until we do, we’ll keep wondering why developers aren’t making accessible websites.”

Kilian Valkhof

Is It Time for A Web Performance Rebrand? — “Web Performance is a niche term in a broad market, should we broaden our appeal to reach more people?”

Simon Hearne

Free for 30 Days: MongoDB Atlas Is Easy. Make It Powerful. — 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

Beginner's Guide to Eleventy — This is an extensive and down-to-earth multi-part introductory guide to using Eleventy the popular static site generator.

Tatiana Mac

A Guide to window.location — A breakdown that covers most of the methods and properties available on the DOM’s window.location object.

samantha ming

Styling in the Shadow DOM With CSS Shadow Parts — Using the ::part() selector.

Ollie Williams

Progressively Enhancing Radio Buttons with SVG Whilst Staying Accessible

Christian Heilmann

How to Create Pure CSS Games (No JS)

Elad Shechter

???? Code, Tools and Resources

Pico: Take Browser Screenshots Client-Side with JavaScript — Different from capturing a webpage using Puppeteer or a similar tool in that the screenshot taking happens entirely client side.

Gripeless

???? I18n Ally: An All-in-One i18n Extension for VS Code — Got some internationalization work to do? I18n Ally gives you inline annotations, automated translations via Google Translate (which you can review), progress indication, etc. Supports React, Angular, Vue and other frameworks.

Anthony Fu

web-vitals-extension: A Chrome Extension to Measure Essential Metrics for A Healthy Site — This extension measures three core web vitals metrics (Largest contentful paint, cumulative layout shift, and first input delay) in a way that matches how they’re measured by Chrome and reported to other Google tools (see top feature in this issue).

Google Chrome

Faster CI/CD for All Your Software Projects Using Buildkite

Buildkite sponsor

utfu: Replace Busted Characters From Legacy Text with UTF-8 — Useful when old content contains characters like “— in place of a single quote, and similar legacy text issues.

Daniel Sieradski

Sitesauce: A Static Site for Your Dynamically-Generated Website — This paid tool converts dynamic websites (e.g. WordPress, Ghost, Joomla, etc.) into static sites, and keeps content in sync.

Miguel Piedrafita