--- title: "🗳 The results from the 2020 State of CSS survey" publication: "Frontend Focus" issue: 469 published_at: "2020-12-02" canonical_url: "https://frontendfoc.us/issues/469" --- ...plus, why do we call it a 'homepage'? | 👍 There are some neat bits in the _Code & Tools_ section at the end of today's issue, including a striking CodePen demo, so take a look if you don't always get that far :-) __ _Chris Brandrick, editor_ Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #469 — December 2, 2020 | [Read on the web](https://frontendfoc.us/issues/469) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/woqnevkiihrbjnxg6usk.jpg)](https://stateofcss.com/) [The State of CSS Survey 2020 Results](https://stateofcss.com/) — Here are the results from the second annual survey about the latest trends in CSS. This year’s results show the adoption of CSS Grid, the rise of Tailwind CSS, plus stats on browser testing, popular resources, and more. The full results are well worth digging into (_and they've been translated into over a dozen languages_). Raphaël Benitte & Sacha Greif [PWAdvent: A Browser Feature Advent Calendar](https://pwadvent.dev/) — In the mood for an advent calendar? Sad that [24ways](https://24ways.org/) is [taking a break](https://twitter.com/drewm/status/1333739704961953794) this year? Try this. Day one covers how a Web app manifest can bring a ‘add to home screen’ feature to your site. Nico Martin [![\](https://copm.s3.amazonaws.com/11062511.png)](https://snyk.io/blog/angularjs-security/?utm_campaign=cooperpress-q4&utm_medium=Email&utm_source=cooperpress-frontendfocus&utm_term=angularjs-security) [AngularJS Security Fundamentals](https://snyk.io/blog/angularjs-security/?utm_campaign=cooperpress-q4&utm_medium=Email&utm_source=cooperpress-frontendfocus&utm_term=angularjs-security) — A collection of AngularJS security fundamentals for web developers. Snyk sponsor [The History of the Web: Why Do We Call it a Homepage?](https://thehistoryoftheweb.com/why-do-we-call-it-a-homepage/) — _“Berners-Lee imagined that each person would have their own little space on the web. […] Berners-Lee called it a home page. It made sense. It was a digital 'home' on the web. A space you could come back to and add the discoveries you made surfing the web.”_ Jay Hoffmann [Weaving Web Accessibility with Usability](https://www.smashingmagazine.com/2020/11/weaving-web-accessibility-usability/) — Highlights how a site complying with accessibility guidelines may still present usability issues when testing with real users. Uri Paz **⚡️ Quick bits:** - Reminder: The Chrome Dev Summit starts next week (on Monday), and [here's the full schedule](https://developer.chrome.com/devsummit/schedule/). - [Here's a neat trick](https://twitter.com/mgechev/status/1333312374279991301) to create resizable elements using just CSS. - Ride-sharing app Lyft detail how they are [migrating over 100 frontend microservices to Next.js.](https://eng.lyft.com/changing-lanes-how-lyft-is-migrating-100-frontend-microservices-to-next-js-42199aaebd5f) 📙 **Tutorials, News & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1606905814/y01zz6xgy3iqqeitvbxj.png)](https://ishadeed.com/article/css-grid-minmax/) [A Deep Dive Into `minmax()`](https://ishadeed.com/article/css-grid-minmax/) — A thorough, and visual, explanation of how you might use the `minmax()` function when defining CSS grid layouts. Ahmad Shadeed ▶[Building a Svelte Static Website with Smooth Page Transitions](https://tympanus.net/codrops/2020/11/30/building-a-svelte-static-website-with-smooth-page-transitions/) — An 80-minute coding session walking through building a site with Svelte.js with Three.js and GSAP-powered smooth page transitions. Yuriy Artyukh [Nerd Talk with Lew Cirne at AWS re:Invent Dec. 3, at 1pm PT](https://virtual.awsevents.com/sponsor/186983463/New_Relic) — Watch our CEO Lew Cirne build a custom New Relic One application from scratch in under 9 minutes. Set your alarm now. New Relic sponsor [How to Add Text in Borders Using Basic HTML Elements](https://css-tricks.com/how-to-add-text-in-borders-using-basic-html-elements/) — A creative use of the `fieldset` and `legend` elements to include text in a border, though the use cases may be limited. Preethi Sam [Under-Engineered Responsive Tables](https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html) — The _bare minimum_ you need to make a WCAG-compliant responsive HTML table. Adrian Roselli [A Calendar in Several Lines of CSS](https://calendartricks.com/a-calendar-in-three-lines-of-css/) — Yes, you need the HTML with all the numbers too, but CSS Grid can handily take care of the actual layout. Calendar Tricks [![\](https://res.cloudinary.com/cpress/image/upload/v1606904983/bcz8qysxjubwagyc6wav.png)](https://uxdesign.cc/the-importance-of-colorblind-friendly-design-case-study-among-us-dcd042c87b9) [The UX of Among Us: The Importance of Colorblind-Friendly Design](https://uxdesign.cc/the-importance-of-colorblind-friendly-design-case-study-among-us-dcd042c87b9) — An interesting use of the currently popular _Among Us_ game to explain color vision deficiency issues. Unma Desai [Self-Hosting Google Fonts](https://tryblackbird.com/blog/self-hosting-google-fonts) — Self-hosting Google Fonts can improve Largest Contentful Paint by as much as 1.3 seconds. (_See the 'Code, Tools and Resources' section below for a related tool to help with this_.) Blackbird [What’s the Best Way to Protect Your Content from Piracy? Learn Here](https://go.bitmovin.com/drm-whitepaper?utm_source=cooper-front-end-focus-brief-link&utm_medium=%20paid-newsletter&utm_campaign=drm-whitepaper) Bitmovin Inc. sponsor [CSS Flexbox Tutorial for Beginners (With Interactive Examples)](https://www.codeinwp.com/blog/css-flexbox-tutorial/) — This introduction to flexbox includes interactive CodePen demos for each feature so you can easily visualize how each property works in a layout context. Louis Lazaris beginner [Creating Websites with `prefers-reduced-data`](https://polypane.app/blog/creating-websites-with-prefers-reduced-data/) Polypane [Playfulness In Code: Supercharge Your Learning By Having Fun](https://www.smashingmagazine.com/2020/11/playfulness-code-supercharge-fun-learning/) Jhey Tompkins [Three Small Tips for Shrinking SVG Images](https://shkspr.mobi/blog/2020/11/three-small-tips-for-shrinking-svg-images/) Terence Eden 💻 **Jobs** [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) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery [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 🧑‍💻 _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1606904609/thowfgplbyoda7rojn6m.png)](https://github.com/edent/SuperTinyIcons) [SuperTinyIcons: Almost 300 Popular Web Service Icons in Tiny SVGs](https://github.com/edent/SuperTinyIcons) — Minuscule SVG versions of common site and app logos, with hundreds to chose from. Terence Eden [JSON Formatter Live: A Minimalist JSON Formatter & Minifier, Installable As A PWA](https://jsonformatter.live/) — Doesn’t store any data, is keyboard friendly, and will give you live inline error messages when you add any code. Alexandru Năstase [localGFonts: An Online Generator to Help You Self Host Google Fonts](https://labs.binaryunit.com/localgfonts/) — Just paste in the URL that you would normally get as part of the tag that points to the CSS and this tool will zip up the fonts and CSS so you can avoid the extra requests. binaryunit **💨 Some Tailwind CSS Quick Bits:** Tailwind CSS recently hit 2.0, as such we've found a few related tools that may be of interest if you're using the framework: - [Oceanwind](https://github.com/lukejacksonn/oceanwind): Generates atomic styles from Tailwind's shorthand classes, which I assume you would then use in place of Tailwind's CSS as part of a CSS-in-JS solution. - [Tailwind Builder](https://tailwind.build/): This (paid) online editor features a drag-and-drop UI and 240+ ready-to-use/customizable components for building out Tailwind sites fast. - [UI Devtools](https://ui-devtools.com/): A unique DevTools extra that bridges the gap between Tailwind's atomic classes and the actual CSS, allowing you to debug your CSS visually using Tailwind's language. Watch a demo [here](https://www.youtube.com/watch?v=5rnxb2XypPE). The distribution model is interesting as it's only available to GitHub Sponsors till they reach 100 sponsors, then it'll be open source. [vue-dock-menu: A Dockable Menu Bar for Vue](https://github.com/prabhuignoto/vue-dock-menu) — Certainly an _interesting_ UI concept here. It’s a menu bar, until you drag it to be a sidebar! Prabhu Murthy [![\](https://res.cloudinary.com/cpress/image/upload/v1606907290/xzjp4qcmfbjqrlqbu85y.gif)](https://dev.to/claudiobonfati/netflix-intro-animation-pure-css-1m0c) [Recreating the Netflix Intro Animation in Pure CSS](https://dev.to/claudiobonfati/netflix-intro-animation-pure-css-1m0c) — This is a neat, well-realized animation of the zooming ‘N’ logo you see before Netflix shows. The gif here doesn’t really do it justice so click through to see the much smoother end result. Claudio Bonfati codepen 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)