Frontend Weekly Digest #244 (10–16 January 2022)

Web-development

• Amazing HTML5 Features That Just 3% of Developers Knows — Easy and Surprising
• Turning a GitHub page into a Progressive Web App
• How we built a VS Code extension with Rust, WebAssembly, and TypeScript

• Web3
  • “Has Anyone Seen Web3?” — The Complete Roadmap and Resources to Become a Web3 Developer in 2022
  • The web doesn’t have version numbers
  • My first impressions of web3
  • What is Web3? A new decentralized web, or the latest marketing buzzword
  • What You Need to Know About the New Era of Internet Web 3.0 As a Frontend Developer
• Tools
  • State of the Web: Deno
  • Adding Vite to Your Existing Web App
  • Is Vite Better than Webpack?
  • Time to say goodbye to Webpack?
  • What Is Vite: The Guide to Modern and Super-Fast Project Tooling
  • Parcel CSS: A New CSS Parser, Transformer, and Minifier
• Accessibility
  • Accessibility as a design pattern
  • Boolean attributes in HTML and ARIA: what’s the difference?
• Effects
  • Case Study: Anatole Touvron’s Portfolio
  • Pixel Distortion Effect with Three.js

CSS

• How the z-index Property Works Under the Hood
• Make Beautiful Gradients
• Don’t Fight the Cascade, Control It!
• A Deep CSS Dive Into Radial And Conic Gradients
• How to Make a Pure CSS 3D Package Toggle
• Designing a modern UI theme with Open Props
• Top 10 Features Introduced In Tailwind CSS v3.0

JavaScript

• What’s the big deal with JavaScript’s Fetch API?
• O.O.P in Javascript
• How not to learn TypeScript

• React
  • Building A Web Code Editor
  • An Alternative to Next.JS? — Everything You Need to Know About RemixJS
  • 3 React Component Design Patterns You Should Know About
  • 5 Ways to Avoid React Component Re-Renderings
  • A better way of solving prop drilling in React apps
  • Cypress is superior to React Testing Library — here’s why
• Vue
  • How to get started with vue (part1)
• Angular
  • Discontinued Long Term Support for AngularJS
  • Building a MicroFrontend setup using Angular 12: Part 2 — putting the pieces together
  • Angular Basics: Introduction to Observables (RxJS) — Part 2
• Svelte
  • Accelerating Svelte’s Development
  • How to Build Your First Custom Svelte Transition
  • Svelte Carousel — A super lightweight, super simple Carousel for Svelte 3
  • Svelte Has the Same Adoption Curve as React
• Libs & Plugins
  • instauto — Instagram bot / automation library written in Javascript for Node.js
  • TinyBase — A tiny, reactive JavaScript library for structured state and tabular data.
  • Client-Side Form Validation with JavaScript and octaValidate
  • deno_lint — Blazing fast linter for JavaScript and TypeScript written in Rust

Browsers

• Firefox 96 for developers
• What is Chromium Without Chrome on Top?