#454 — August 19, 2020

Web Version

Frontend Focus

The Languages Which Almost Became CSS — A fascinating look at the history of all the languages which almost became CSS (for example, the proposed 'RRP' format suggested code like this: @BODY fo(fa=he,si=18)). Well worth a read, and an interesting exercise in thinking about the world that might have been.

Zack Bloom

Working with Accessibility in Chrome DevTools — Umar Hansa demonstrates some useful features in DevTools which can help you improve the accessibility of your website.

Smashing Magazine

Super Fast GraphQL Based Headless eCommerce Service — Launch beautiful and fast eCommerce sites or Apps. Structured product information and rich marketing content in one service - even HD videos. Build your own frontend using your favourite framework like React, Next, Vue or Flutter. Ideal for JAMStack.

Crystallize sponsor

Web History — Chapter 2: Browsers — We linked to part one of this excellent web history series last week and now Jay Hoffman is back with the second instalment, delving into the genesis of web browsers.


Firefox: An Endangered Internet Species? — A sad thing to consider, but even with another recent infusion of cash from Google, the author questions “just how long Firefox will survive as a viable, mainstream web browser”.

Steven J. Vaughan-Nichols

The Cult of The Free Must Die — In relation to the above, PPK posits that Mozilla should request donations from inside Firefox — on an entirely voluntary basis, in an effort to save it. There's also a follow-up post of sorts here.

Peter-Paul Koch

⚡️ Quick bits:

💻 Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.


Get Tech Interviews This Week — 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? More info here.

📙 Tutorials, Stories & Opinion

How I Structure My CSS (For Now) — In a world with things such as BEM, ITCSS, SMACSS, and others, this independent user experience designer and developer shares his thoughts on the current world of CSS structure.

Matthias Ott

Gradient Angles in CSS, Figma & Sketch — The author notes that copying CSS code didn’t always give the same results across different graphics programs. Here he digs into what’s really going on with gradient angles (and ends up doing some trigonometry along the way).

Nils Binder

The Vue 3 Composition API - Getting Started — Examine the drawbacks of Vue 2 and discover how the Composition API addresses those issues, while simplifying components.

Wijmo, by GrapeCity, Inc. sponsor

Vertical Text Alignment in Buttons and Inputs — How to center text vertically in buttons and input elements using the padding and line-height CSS properties.


Top 10 Social Media APIs for Developers — If you need to work with any social stuff on your site, this guide has plenty of pointers and links out for Facebook, Twitter, LinkedIn, Pinterest, Reddit, Discord, and others.


Four Subtle Text-Effects to Spice Up Your Site — I particularly like the 🌊 wave effect.

Akhil Arjun

Visualizing CSS Resets — A quick visual explanation between the difference between a CSS Reset and Normalize.

Elijah Manor

What I Learned by Fixing One Line of CSS in An Open Source Project

Benjamin Schachter

VS Code Shortcuts and Tricks That I Wish I Knew Sooner

Hannah Gooding

🗓 Upcoming Events:

🔧 Code, Tools and Resources

Storybook 6.0 Released: The Production-Grade Front-End Component Development SystemStorybook is a widely-adopted and well-regarded open source library for UI compenent development. This major new release is aimed squarely at the requirements of the professional frontend developer community.

Michael Shilman

Layout Shift GIF Generator: Cumulative Layout Shift (CLS) Visualiser — Layout shift is expected to be a ranking factor in Google Search at some point. This online tool or CLI allows you to test CLS by generating an animated GIF.

Chris Johnson

500m End-Users Depend on Our Scalable Chat and Activity Feed APIs

Stream sponsor

Embla: An Extensible Low Level Carousel for the Web — We first came across this over a year ago, but this bare-bones carousel option is still seeing updates and remains a decent dependency-free option. Demos here.

David Cetinkaya

System UIcons: A Free Icon Set Designed for Systems and Products — Use without attribution. Download as SVG files or copy the SVG code for any selected icon.

Corey Ginnivan

Web2VR: A Library for The A-Frame Web Framework — Dynamically translate HTML and CSS to A-Frame 3D. Plenty of demos here that you can play around with both with or without a VR headset.