👍 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  Focus

#469 — December 2, 2020 | Read on the web

The State of CSS Survey 2020 Results — 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 — In the mood for an advent calendar? Sad that 24ways is taking a break 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

AngularJS Security Fundamentals — A collection of AngularJS security fundamentals for web developers.

Snyk sponsor

The History of the Web: 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 — Highlights how a site complying with accessibility guidelines may still present usability issues when testing with real users.

Uri Paz

âšĄïž Quick bits:

📙 Tutorials, News & Opinion

A Deep Dive Into 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 — 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 — 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 — 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 — The bare minimum you need to make a WCAG-compliant responsive HTML table.

Adrian Roselli

A Calendar in Several 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

The UX of Among Us: The Importance of Colorblind-Friendly Design — An interesting use of the currently popular Among Us game to explain color vision deficiency issues.

Unma Desai

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

Bitmovin Inc. sponsor

CSS Flexbox Tutorial for Beginners (With Interactive Examples) — 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

Polypane

Playfulness In Code: Supercharge Your Learning By Having Fun

Jhey Tompkins

Three Small Tips for Shrinking SVG Images

Terence Eden

đŸ’» Jobs

Find a Job Through Vettery — 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) — 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.

🔧 Code, Tools and Resources

SuperTinyIcons: Almost 300 Popular Web Service Icons in Tiny SVGs — 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 — 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 — 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: 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: 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: 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. 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 — Certainly an interesting UI concept here. It’s a menu bar, until you drag it to be a sidebar!

Prabhu Murthy

Recreating the Netflix Intro Animation in Pure CSS — 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