January 10, 2021 ? Hey,This marks the last issue of Frontend Focus of the year. We will be back in early January with a roundup issue looking back over the frontend highlights of 2020 (an admittedly unusual year by all acounts). Thank you so much for continuting to read and support the newsletter. Catch you in 2021!__Chris Brandrick, EditorFrontend Focus#471 — December 16, 2020 | Read on the web The HTTP Archive’s 2020 Web Almanac — The excellent Web Almanac (also available as a PDF) returns for another year, with a comprehensive look at the current state of the web, all based on real-world data from millions of websites. There’s 22 chapters of analysis in this report, including sections on CSS, JavaScript, UX, publishing, distribution and more — so plenty to dig into. Well worth diving into with a coffee or two over the festive break I reckon.HTTP Archive? Highlights from the Chrome Dev Summit:The opening keynote was a 40-minute review of the current state of Chrome (including recent announcements and updates) and a look at the wider web in 2020.Both Elizabeth Sweeny and Paul Irish ran through some speed tooling options, including Lighthouse scoring, third-party audits, and the Chrome user exerpeiernce report.Jake Archibald explained how you can speed your site up (and smash core web vitals thresholds) with new performance features. Here’s the full playlist of all videos from this year’s event.Richard MacManus shared his thoughts on this year’s Chrome Dev Summit, pointing out Google’s ‘clear’ expansion of the web’s capabilities versus that of native apps. New Course: Production-Grade TypeScript — Use the TypeScript language at scale to increase the developer experience and productivity of your teams. Learn to manage even the most ambitious TypeScript projects with confidence and ease.Frontend Masters sponsorAnd Now For… Firefox 84 — Version 84 includes some interesting new features including tab order inspection, complex selector support in :not(), the PerformancePaintTiming API, and more. You can see the full release notes here, and a detailed rundown of developer changes too.Chris Mills (Mozilla)Using CSS ‘Individual’ Transform Properties — As of Safari Technology Preview 117 you can now use translate, rotate and scale as new individual CSS properties to specify what have so far solely been functions of the transform property. This also works in Firefox and Chrome Canary. Adam Argyle has a neat visual demonstrating the change in this tweet.Antoine Quint (WebKit)?? Quick bits:With the launch of ‘codename Yari’, the MDN Web Docs have a new home.Idera are currently running a survey on usage/trends in relation to JavScript UI components. You can take it here.Work with WordPress? The annual ‘State of the Word‘ WordPress keynote streams tomorrow.What would a periodic table of the web look like? James Lu has had a go, mapping Web APIs and various technologies.? Articles, Tutorials, & Opinion Analyzing Web Vitals with WebPageTest — A solid look at how to parse various Web Vitals output metrics.Patrick MeenanOld is Solid; New Gets Talked About — Thoughts on using what you know: “Old can be solid, it can be dependable and it can be predictable. There are times where it’s fun to try new stuff and tell people about it, and there’s times to reach` for the technology you know so you can get stuff done.”Kilian ValkhofWhat Can You Put in a CSS Variable? — A good list of the various things you can put inside a CSS variables (also known as CSS custom properties).Will BoydHaven’t Checked Out Our AWS re:Invent Sponsor Page? Only 3 Days LeftNew Relic sponsorSticky CSS Grid Items — How to get position sticky working on a grid item without setting a hacky height.Melanie Richards Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode — Dark mode may make your text appear thicker — here’s what you can do about it.Greg GibsonTime to Say Goodbye to Google Fonts — Outlines why self-hosting is the more performant approach to using Google Fonts.Simon WickiSwitching to Tailwind CSS — Why this developer switched their Next.js powered blog to using Tailwind CSS, and how it impacted performance.Lee RobinsonHow to Increase CSS-in-JS Performance by 175x — If you’re into using CSS-in-JS, here’s some pointers to get some serious performance gains.Dominic TobiasWriting Text in a Circle with CSS & JS John NegoitaWhat Makes CSS Hard To Master? Tim Severien? Code, Tools and ResourcesSquoosh v2: Browser Based Image Compressor from Google — Make images smaller using best-in-class codecs, right in the browser. There’s also a CLI you can use if you have multiple images to compress at once. More info about the v2 update here.Google Chrome Team Scale: High-Quality, Open-Source Illustrations — SVG/PNG illustrations that can be customized with a theme color before downloading, to match your brand. Free for use in any project and new illustrations added each week.FlexipleSquare Terminal API — Connect your app to the all-in-one payments device merchants love with a simple REST API. Learn more.Square sponsorTiny-Swiper: An ‘Ingenious’ JavaScript Carousel — A free carousel offering a ‘native-like experience’ for the web. Zero dependencies, written in TypeScript, no attribution required. Demos here.Joe HarrisFlappy.html: Flappy Bird in 205 Bytes — This is a really rudimentary version of Flappy Bird that uses HTML Canvas and has been ‘code-golfed’ to microscopic size.gullyn Denali: A Themeable Design System for Building Uniquely Styled Frameworks — The main pull for this is the fact that the design system doesn’t make any assumptions about your design, so you can customize components according to your brand.OathDownsize for Figma: Compress Images Right On The Canvas — If you use Figma this plugin for compressing your images may prove handy.Alex ESimple Icons: 1472 Free SVG Icons for Popular BrandsSimple Icons? JobsFrontend 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-TeamFind 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??? Looking to share your job listing in Frontend Focus? There’s more info here. Source link