Frontend Weekly Digest #226 (6–12 September 2021)

Web-development

• Taking micro-frontends to the next level
• 5 web APIs that add mobile functionality to your project
• Experimenting with the FullScreen API

• Tools
  • We abandoned npm install, maybe you should too
  • What’s New With DevTools: Cross-Browser Edition
  • Parcel vs. WebPack 2021
  • Exploring Velociraptor, Deno’s npm-style script runner
• Performance
  • 9 Best Practices for Optimizing Frontend Performance
  • How we are improving our Web performance
  • Frond End Performance Testing with Sitespeed.io
  • How to write about web performance
• Accessibility
  • How “Drag-And-Drop” Movements Affect Web Accessibility
• Effects
  • Inspirational Websites Roundup #29
  • How to create Pure CSS Glitch Animation 🤖 for Images and SVG

CSS

• Fun Times Styling Checkbox States
• The Complete CSS Grid Tutorial
• Can we have custom media queries, please?
• The Story Behind TryShape, a Showcase for the CSS clip-path property
• Firefox’s `bolder` Default is a Problem for Variable Fonts
• Less Absolute Positioning With Modern CSS
• Introducing Pollen — a library of CSS variables for rapid prototyping, consistent styling, and as a utility-first foundation for your own design systems. Heavily inspired by TailwindCSS.
• An Interactive Guide to Keyframe Animations
• Building a split-button component
• Taming the beast that is CSS-in-JS

JavaScript

• How to write a custom ESLint rule
• Bundling non-JavaScript resources
• Run, JavaScript, Run
• A JavaScript developer’s guide to browser cookies
• JavaScript Eventing Deep Dive

• React
  • Event Bubbling and Event Catching in JavaScript and React — A Beginner’s Guide
  • World of React in 2021
  • Build PDF Documents with React on the Server
  • Build an Instagram-like infinite scrolling feed with React Query
  • How and when to force a React component to re-render
• Vue
  • Harlem — Simple, unopinionated, lightweight and extensible state management for Vue 3
  • Using SVG and Vue.js: A complete guide
  • Getting started with vue.draggable
  • Create a custom tooltip component in Vue
• Angular
  • Designing Angular architecture — Container-Presentation pattern
  • Why Angular — Why we choose to use Angular at SpotDraft
• Ember
  • The Ember Times — Issue №188
• Svelte
  • How Svelte scopes component styles
  • The Compiled Future of Front End
  • How Svelte Cybernetically Enhances Web Development
  • What’s new in Svelte: Summer 2021
• Libs & Plugins
  • Dann.js — Neural Network library для Javascript
  • htmlq — Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files.
  • replace-jquery — Automatically find jQuery methods from existing projects and generate vanilla js alternatives.
  • A Typewriter, but using a New HTML Tag