Frontend Weekly Digest #262 (30 May — 5 June 2022)

Web-development

• Single-Page Applications: A Comprehensive Guide
• When and how to choose HTML for form validation
• How to modularize your monolith frontend, transition at your pace
• The Pivot to Web3 Is Going to Get People Hurt
• Readability: The Optimal Line Length
• The Cicada Principle and Why It Matters to Web Designers (updated)

• Tools
  • Can I DevTools?
  • You may not need a bundler for your NPM library
• Performance
  • How Does Dan Abramov Optimize beta.reactjs.org After Be Complained about Website Speed?
  • Introducing Opportunities & Experiments: Taking the Guesswork out of Performance
  • Optimising Critical Rendering Path
  • Measuring The Performance Of Typefaces For Users (Part 1)
• Accessibility
  • WCAG 3 Introduction
  • Области прокрутки только с клавиатуры
  • Writing Useful Alt Text
• Effects
  • Inspirational Websites Roundup #38
  • Star Wars Scene Transition Effects in CSS
  • Coding an Infinite Slider using Texture Recursion with Three.js
  • Scroll Animation Ideas for Image Grids

CSS

• Please Give Me Some Space
• Where the f*** is native CSS nesting?
• Implementing claymorphism with CSS
• How to create a responsive image gallery with CSS flexbox

JavaScript

• Useful Built-in Node.js APIs
• How to build a Gantt Chart in JavaScript with Frappe Gantt
• Monorepos in JavaScript & TypeScript
• 10 Must-Know JavaScript Tricks & Tips About Reduce

• Theory
  • 2D sketches with React and the Canvas API
  • Web3 Authentication with Next.js, React, and Moralis
  • QR Codes generation with React
  • Persist state with Redux Persist using Redux Toolkit in React
  • Setting up a dev environment with React, Vite, and Tailwind
  • Exploring how virtual DOM is implemented in React
  • How to Use Throttle and Debounce in React to Increase Performance
• Vue
  • Vue-Bridge — Guide Library to help in writing Vue 3 component libs that also work with Vue 2
  • Creating a Blockchain Decentralized App with Vue and Tezos
  • Build a blog with Nuxt (Vue.js), Strapi and Apollo
• Angular
  • Angular v14 is now available!
  • Transitioning from Angular to React, without starting from scratch
  • External Configurations in Angular
  • Refactoring Angular Applications
  • Angular Inject & Injection Functions -Patterns & Anti-Patterns
  • This is how to convert your Angular app into a PWA (2022)
• Svelte
  • Svelvet is a lightweight Svelte component library for building interactive node-based flow diagrams
• Libs & Plugins
  • AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, Svelte, or any other JavaScript application.
  • Scroll Btween — Tween any CSS values on any DOM element in relation with its position into the viewport.
  • Using Rollup to package a library for TypeScript and JavaScript
  • highlighted-code — A textarea builtin extend to automatically provide code highlights based on one of the languages available via highlight.js.

Browsers

• Firefox 101 for developers
• How to use Chrome as a Code Editor and Debugger