---
title: "The cost of JavaScript frameworks, LCH colors, and Tailwind CSS 1.3"
publication: "Frontend Focus"
issue: 437
published_at: "2020-04-22"
canonical_url: "https://frontendfoc.us/issues/437"
---

This week's HTML, CSS and browser news.       

#437 — April 22, 2020 

[Read on the Web](https://frontendfoc.us/issues/437)   

Frontend Focus  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/eccvpihvg4dxfuhr1ca1.jpg)](https://jkettmann.com/how-do-you-plan-a-ui-feature/)  

[Inside a Dev's Mind: How To Plan Out a UI Feature](https://jkettmann.com/how-do-you-plan-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](https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/) — Using data from the [HTTP Archive](https://httparchive.org), Tim explores the performance cost of using various popular frameworks as a starting point. Some good analysis here. 

Tim Kadlec   [![\](https://copm.s3.amazonaws.com/9b37671f.png)](https://go.logianalytics.com/ux-design-for-embedded-analytics-fef.html) 

[Free Guide: 6 Steps to Improving Your Embedded Analytics UX](https://go.logianalytics.com/ux-design-for-embedded-analytics-fef.html) — 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?](http://lea.verou.me/2020/04/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](https://css.land/lch/). 

Lea Verou   

▶['We've Ruined The Web. Here's How We Fix It.'](https://www.thisishcd.com/episodes/world-wide-waste-with-gerry-mcgovern/jeremy-keith-weve-ruined-the-web-heres-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](https://github.com/tailwindcss/tailwindcss/releases/tag/v1.3.0) — 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)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers. Work from anywhere with the world's leading brands. 

X-Team   

[Find a Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. 

Vettery  

ℹ️ _Interested in running a job listing in Frontend Focus? There's [more info here.](https://booking.cooperpress.com/jobs)_ 

📙 **News, Tutorials & Opinion**  

[13 Places to Find Front-End Challenges](https://css-tricks.com/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](https://www.nngroup.com/articles/listbox-dropdown/) — 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](https://alldayhey.com/live) — 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`](https://blog.bitsrc.io/creating-morphing-animations-with-css-clip-path-3c3bf5e4335f) — Learn how to implement morphing, a technique for transforming one appearance into another, using CSS. 

Mikael Ainalem   

[Pseudo-Randomly Adding Illustrations with CSS](https://meyerweb.com/eric/thoughts/2020/04/15/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](https://studio3t.com/download/?utm_source=cooper&utm_medium=newsletter&utm_campaign=fefapr22) — 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](https://wesbos.com/new-wesbos-website) — 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](https://chasem.co/2019/09/mvp-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](https://fossheim.io/writing/posts/css-macintosh/) — 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](https://medium.com/@antoineboulanger/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df) 

Antoine Boulanger  

🔧 **Code, Tools and Resources** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1587549274/geqyxiqb0kcixxvxosbz.png)](https://github.com/bansal-io/pattern.css)   

[patern.css: Fill Empty Background with Beautiful Patterns](https://github.com/bansal-io/pattern.css) — A neat collection of CSS-only backgrounds. You can [see them in action on the demo site](https://bansal.io/pattern-css). 

Jiten Bansal   

[Good Email Code: A Library and Guide for Writing HTML Email](https://www.goodemailcode.com/) — This seems to be in early development but contains some snippets with explanations for cross-browser HTML email code. 

Mark Robbins   

[Isomorphic Layout Composer](https://github.com/namecheap/ilc) — An SSR layout service that composes a web page from fragment services. 

Namecheap   

[Poolors: Generate Unique Color Palettes](https://poolors.com/) — 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         

A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). 

[Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom