Frontend Weekly Digest #187 (1–6 December 2020)

Web-development

• Monolith vs. Micro Frontends
• Changing Lanes: How Lyft is Migrating 100+ Frontend Microservices to Next.js
• Creating websites with prefers-reduced-data
• PWA and AMP: Getting the Best out of Both Worlds
• From Jekyll to 11ty
• How to Build HTML Forms Right: Security
• PWAdvent is the perfect advent calendar for everyone who’s excited about the web platform.

• Tools
  • Introducing 𝗪𝗠𝗥: The tiny all-in-one development tool for modern web apps. Everything you need to build a fast Preact site, from dev to prod. 🦄 TSX, HMR, CSS Modules, etc 🦦 use npm modules without installing 📦 one 2mb file, no dependencies
  • Snowpack v3.0. Streaming NPM Imports, Built-in Optimizations, Routing, A New JavaScript API
  • Puppeteer vs Selenium vs Playwright, a speed comparison
  • Chrome 88: Digital Goods, Lighting Estimation in Augmented Reality, and More
• Performance
  • A font-display setting for slow connections
  • Time to Say Goodbye to Google Fonts
  • Web Performance Calendar
  • How the BBC World Service migrated 31 million weekly readers to an isomorphic react app and improved page performance by up to 83%
• Accessibility
  • Your first attempt at making anything accessible will be awful
  • A11y Advent Calendar
• Effects
  • How to Animate a SVG with border-image
  • Crafting a Scrollable and Draggable Parallax Slider
  • Building a Svelte Static Website with Smooth Page Transitions

CSS

• State Of CSS 2020: Results
• The missing browser devtools for Tailwind CSS
• How to Get Sticky and Full-Bleed Elements to Play Well Together
• A Calendar in Three Lines of CSS
• How to Make an Area Chart With CSS
• How to Add Text in Borders Using Basic HTML Elements
• Native Aspect Ratio Boxes in CSS thanks to aspect-ratio

JavaScript

• js25.org: JS 25th Anniversary
• State of JavaScript 2020
• Here’s what people in tech had to say about JavaScript when it debuted in 1995
• Sick of the stupid jokes? Write your own arbitrary-precision JavaScript math library
• Apple Music JavaScript integration guide
• Incremental vs Virtual DOM

• Theory
  • 5 Best Practices to Write Quality JavaScript Variables
  • Lots of Ways to Use Math.random() in JavaScript
  • Master Modern JavaScript skills with this amazing guide
• React
  • React interview cheatsheet
  • Next-Level React Performance
  • The React Hooks Announcement In Retrospect: 2 Years Later
  • Dangers of using Objects in useState & useEffect ReactJS Hooks
  • Building a real-time voting app using ReactJS and Ably
• Vue
  • The Undefined Podcast №29: Vue vs. Svelte с Evan You и Rich Harris
  • Ionic & Vue.js — Full Tutorial (Build a Complete App)
  • Nuxt.js Single Page Application Boilerplate
  • Translate Any Vue.js App in Just 1 Hour
• Angular
  • ngTemplateOutlet: The secret to customisation
  • Integrate Jest into an Angular application and library
  • Angular 10 Transclusion: When and Why You`ll Need It
  • Converting an Ionic/Angular Site into a Progressive Web App
• Ember
  • The Ember Times — Issue №169
  • Ember.js 2020 Tech Talk | coloradoSprings.js Meetup
  • The Rock & Roll with Ember band — Aad Versteden
• Libs & Plugins
  • List.js — Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements
  • EasyGrid — VanillaJS Responsive Grid
  • React-Tensorflow — A library of React hooks and HOCs written in Typescript to use Tensorflow models in your application!