January 13, 2021 Frontend Focus#473 — January 13, 2021 | Read on the web Front-End Performance Checklist 2021 — This annual front-end performance checklist (available as PDF, Apple Pages, MS Word) returns, updated with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.Smashing MagazineWeb History: Web Design — Another excellent entry in Jay Hoffman’s series on web history, this time looking at the design side of things in the early days of the web. “Interest in the early web required tenacity and personal drive, so it sometimes came from unusual places”.CSS-Tricks How to Accelerate Development with Artificial Intelligence — Join us to learn about the benefits of AI in application development and see how you can utilize AI-assisted development to deliver modern apps quickly and efficiently.OutSystems sponsorA Developer’s Perspective: The Problem with Screen Reader Testing — Jake asks what the baseline in terms of testing for screen readers should be, and what browser and screen reader combinations are the most important to cover in order to achieve the greatest level of WCAG compliance?Jake TraceyCMA to Investigate Google’s ‘Privacy Sandbox’ Browser Changes — The UK governments Competition and Markets Authority (CMA) has opened an investigation into Google’s proposals to remove third party cookies and other functionalities from its Chrome browser.GOV.UK?? Quick bits:AVIF support is being enabled by default in Firefox 86+. This website will estimate the carbon footprint of your web page and offer up ideas on how to reduce it.The results from the fourth annual State of JS survey are now out.? Tutorials, Articles & OpinionAre These The Most Interesting Frontend Tools for 2021? — A roundup of the 60 most-clicked tools from the past year in Louis Lazaris’ newsletter, which might give some insight into the kinds of things devs are interested in for 2021.Louis LazarisFrontend Predictions for 2021 and Beyond — Where is front-end development heading in 2021? Jay Freestone examines trends and technologies that will shape web development this year.Browser LondonCan Gaming Save Itself from Its Content Moderation Problems? — Twitch, Playstation, Xbox and other big players in the gaming industry face a treacherous future — but there is room for optimism.Stream sponsorGive your Eleventy Site Superpowers with Environment Variables — Leveraging the Node dotenv library within Eleventy for some standard and creative uses for environment variables.Andy BellYou Want overflow: auto, Not overflow: scroll — A quick explainer on the overflow property, and why using auto is the way to go as it lets a browser automatically determine if a scroll bar is needed — or not.Kilian Valkhof Ensuring The Correct Vertical Position of Large Text — In some cases, browsers display large text at different vertical positions across operating systems. Here’s a solution.Tobi ReifStyling console.log() Output Formatting with CSS — Like most of us, probably, Ben often forgets console.log output can be styled with CSS, so he sat down to write out a bunch of increasingly elaborate examples.Ben NadelThe navigator.clipboard API — Async read and write methods for managing clipboard data.David WalshCustom Properties as State? — Thoughts about using CSS and custom properties as a sort of basic data API.Chris CoyierWhat’s Wrong with Web Assembly? Does WASM Have Any Future in Web Dev? Fernando DoglioHow to Deploy a Front End Application with Netlify Idris OlubisiUsing Sass with CSS Modules in Next.js Colby FayockCreate Animated, ‘Apple Music’ Style Cards with WebGL and Three.js Johnny Simpson? JobsSenior JavaScript Engineer – UX and Design Systems (Berlin, DE) — Help us shape the future of ResearchGate’s UX through our cross-platform design system and optimal dev-design-collaboration.ResearchGateFind Your Next Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.Hired??? Looking to share your job listing in Frontend Focus? There’s more info here.? Code, Tools and Resources Hypercolor: A Tailwind CSS Gradient Palette Collection — This curated collection of beautiful premade gradients use the default colors from the Tailwind palette along with a selection of custom gradients.jordi hales & mark meadJSitor: Another JavaScript, HTML and CSS Online Editor/Sandbox — I’m a big fan of tools like JSBin and CodePen for throwing together quick experiments or testing out a bit of code. This is a new alternative which has numerous layouts and iOS and Android apps too.JSitorImprove Your PageSpeed Insights Score for Images. Try These TechniquesImageKit.io sponsor Panelle: A Free Comic Book Layout Maker — This interactive tool lets you build SVG-based comic-book style graphics. You can create and resize the panels, drop images inside them, then download the completed SVG.andrew fulrichGlyphs: A Fully Editable & Open Source Design System — Includes thousands of editable icons designed in Figma, web components, a CLI to download the SVGs from Figma, all categorized and tagged for search.GlyphsCompiled: Build Time Atomic CSS-in-JS — Write your styles in JavaScript with the full power of CSS then have them compiled ahead of time. GitHub repo.AtlassianWeather Icons: 200+ Weather Themed Icons — These are CSS-based, so you just need to drop in the styles and add the appropriate HTML classes. Definitely not for every project, but a nice unique departure from the norm.Erik Flowers Source link