January 10, 2021 ? 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, editorFrontend 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 GreifPWAdvent: 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 sponsorThe 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 HoffmannWeaving 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:Reminder: The Chrome Dev Summit starts next week (on Monday), and here’s the full schedule. Here’s a neat trick to create resizable elements using just CSS.Ride-sharing app Lyft detail how they are migrating over 100 frontend microservices to Next.js.? 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 ArtyukhNerd 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 sponsorHow 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 SamUnder-Engineered Responsive Tables — The bare minimum you need to make a WCAG-compliant responsive HTML table.Adrian RoselliA 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 DesaiSelf-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.)BlackbirdWhat’s the Best Way to Protect Your Content from Piracy? Learn HereBitmovin Inc. sponsorCSS 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 beginnerCreating Websites with prefers-reduced-dataPolypanePlayfulness In Code: Supercharge Your Learning By Having FunJhey TompkinsThree Small Tips for Shrinking SVG ImagesTerence Eden? JobsFind 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.VetteryFrontend 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 EdenJSON 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?staselocalGFonts: 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 Source link