--- title: "The languages which almost became CSS" publication: "Frontend Focus" issue: 454 published_at: "2020-08-19" canonical_url: "https://frontendfoc.us/issues/454" --- Plus this week's browser, HTML and CSS links. #454 — August 19, 2020 [Web Version](https://frontendfoc.us/issues/454) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1597833965/sfuxt76wequf9zygm45v.jpg)](https://eager.io/blog/the-languages-which-almost-were-css/) [The Languages Which Almost Became CSS](https://eager.io/blog/the-languages-which-almost-were-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](https://www.smashingmagazine.com/2020/08/accessibility-chrome-devtools/) — Umar Hansa demonstrates some useful features in DevTools which can help you improve the accessibility of your website. Smashing Magazine [![\](https://copm.s3.amazonaws.com/49f1b175.png)](https://crystallize.com/blog/beautiful-and-fast-jamstack-ecommerce-in-3-steps) [Super Fast GraphQL Based Headless eCommerce Service](https://crystallize.com/blog/beautiful-and-fast-jamstack-ecommerce-in-3-steps) — 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](https://css-tricks.com/chapter-2-browsers/) — We linked to [part one](https://css-tricks.com/chapter-1-birth/) 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?](https://www.zdnet.com/article/an-endangered-internet-species-firefox/) — 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](https://www.quirksmode.org/blog/archives/2020/08/the_cult_of_the.html) — 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](https://www.quirksmode.org/blog/archives/2020/08/i_love_mdn_or_t.html). Peter-Paul Koch **⚡️ Quick bits:** - Via the W3C: [CSS Grid Level 2](https://www.w3.org/TR/2020/CR-css-grid-2-20200818/) is now a Candidate Recommendation. - Microsoft 365 apps and services will [stop supporting IE 11](https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666) next year. - Chrome is to start [highlighting great mobile web user experiences](https://blog.chromium.org/2020/08/highlighting-great-user-experiences-on.html), based on Core Web Vitals metrics/signals. - Following the recent layoffs at Mozilla, [this site has popped up](https://mozillalifeboat.com) listing open roles at other tech firms. 💻 **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 and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Get Tech Interviews This Week](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — 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](https://booking.cooperpress.com/jobs)_. 📙 **Tutorials, Stories & Opinion** [How I Structure My CSS (For Now)](https://matthiasott.com/notes/how-i-structure-my-css) — 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](https://9elements.com/blog/gradient-angles-in-css/) — 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](https://www.grapecity.com/blogs/getting-started-with-vue-3-composition-api?utm_source=CooperPress&utm_medium=Dynamic&utm_campaign=FrontEndFocus_Q3_placement_08/2020) — 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](https://codyhouse.co/blog/post/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. CodyHouse [Top 10 Social Media APIs for Developers](https://www.ayrshare.com/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](https://dev.to/akhilarjun/four-subtle-text-effects-to-spice-up-your-web-site-27e7) — I particularly like the 🌊 wave effect. Akhil Arjun [Visualizing CSS Resets](https://elijahmanor.com/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](https://css-tricks.com/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](https://dev.to/hannahgooding/vs-code-shortcuts-and-tricks-that-i-wish-i-knew-sooner-3mcj) Hannah Gooding **🗓 Upcoming Events:** - **[You Gotta Love Frontend](https://lithuania.yglfconf.com)** (August 24-28) — This now online event will feature five talks over five days. [Here's the speaker line-up](https://twitter.com/yglf_lt/status/1288731049082724353). - **[International JavaScript Conference](https://javascript-conference.com/london)** (September 2 - 4) — Lots of workshops, sessions and keynotes — now all online. - **[CityJS Conference](http://cityjsconf.org/)** (September 14 - 18) — Online conference and workshops. Speakers include Tan Li Hau, Ana Cidre, Kyle Simpson, Maximiliano Firtman and others. _Want to attend? We've got [two tickets to giveaway](https://twitter.com/FrontendDaily/status/1296114101530300416), but you'll have to be quick._ 🔧 **Code, Tools and Resources** [Storybook 6.0 Released: The Production-Grade Front-End Component Development System](https://medium.com/storybookjs/storybook-6-0-1e14a2071000) — [Storybook](https://storybook.js.org) 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](https://defaced.dev/tools/layout-shift-gif-generator/) — 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](https://getstream.io/chat/?utm_campaign=2020_08_19_frontend_focus&utm_medium=promoted_newsletter&utm_source=frontend_focus) Stream sponsor [Embla: An Extensible Low Level Carousel for the Web](https://davidcetinkaya.github.io/embla-carousel/) — 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](https://davidcetinkaya.github.io/embla-carousel/examples). David Cetinkaya [System UIcons: A Free Icon Set Designed for Systems and Products](https://systemuicons.com/) — Use without attribution. Download as SVG files or copy the SVG code for any selected icon. Corey Ginnivan [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1597834403/yhpagjprjcj9icuwxox5.jpg)](https://github.com/kikoano/web2vr) [Web2VR: A Library for The A-Frame Web Framework](https://github.com/kikoano/web2vr) — 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 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