Frontend Weekly Digest #186 (23–29 November 2020)

Media

• The Overflow Podcast 289: React, jQuery, Vue: what’s your favorite flavor of vanilla JS?
• ShopTalk №440: Serverless, Local Database, Edge Functions, and Using WordPress Serverless
• syntax.fm: Potluck — Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More

Web-development

• Why it’s good for users that HTML, CSS and JS are separate languages
• Exploring What the Details and Summary Elements Can Do
• Thinking Like a Front-end Developer
• Modern HTML Starter Template
• Back to Basics: Creating a clickable card interface in plain HTML, CSS and JavaScript
• Creating UI Components in SVG
• Deep Dive into Page Lifecycle API
• Introduction to GraphQL for Developers

• Tools
  • NPM 7: This Is What I Call An Update
  • Dev Fonts — List of the best fonts for coding with live preview
• Performance
  • Ruthlessly Eliminating Layout Shift on netlify.com
  • How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
  • Three Things You Didn’t Know About AVIF
  • How we improved the Lighthouse score of our landing page to 96.
• Animations
  • Inspirational Websites Roundup #20
  • Image Stack Intro Animation
  • Replicating the Icosahedron from Rogier de Boevé’s Website
  • Playfulness In Code: Supercharge Your Learning By Having Fun
  • Swimming on Scroll with GSAP

CSS

• A Complete State Machine Made With HTML Checkboxes and CSS
• Chrome DevTools: Refactor and improve your stylesheets with the CSS Overview Panel
• 5 CSS pseudo-elements you never knew existed
• A centered CSS navigation with fit-content
• Considerations for Making a CSS Framework
• Quick tutorial CSS tip: How to show source code the easy way
• Pure CSS to Make a Button “Shine” and Gently Change Colors Over Time

JavaScript

• Server-side Rendering in JavaScript: A Modern Approach
• JavaScript DOM Selectors — Learn how to access the DOM [INFOGRAPHIC]
• Use console.log() like a pro!

• React
  • How To Internationalize Your React App With i18next
  • React component code smells
  • Boop! — A whimsical twist on hover transitions
  • Recreating the React workflow in vanilla JavaScript
  • React Redux Deep Dive: State Management in React with Redux
  • Optimize React Apps PageSpeed Insights Score
  • Accessible footnotes and a bit of React
• Vue
  • Best Static Site Generators for Vue.js
  • Authentication with Vue(x)+Firebase
  • Testing Vue Applications With The Vue Testing Library
• Angular
  • Declarative, Reactive, Data and Action Streams in Angular
  • Create a directive for free dragging in Angular
  • My Top Angular Interview Questions
• Ember
  • Building Glimmer apps with Snowpack
  • Component Primitives Deep Dive
• Libs & Plugins
  • ODIFF — The fastest in the world pixel-by-pixel image difference tool.
  • I’m Ready — to check if the images or videos are loaded
  • Suri is your own link shortener that’s easily deployed as a static site.