#454 — August 19, 2020 |
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: 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. CSS-Tricks |
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 |
|
💻 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. X-Team |
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. Vettery |
➡️ 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 CodyHouse |
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. Ayrshare |
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 |
|
🔧 Code, Tools and Resources |
Storybook 6.0 Released: The Production-Grade Front-End Component Development System — Storybook 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. kikoano |