Frontend Weekly Digest #160 (25 –31 May 2020)

Media

• Links to all slides from ngVikings 2020
• Jamstack conf virtual 2020

Web-development

• A Guide to the Responsive Images Syntax in HTML
• Increment. Issue 13 / MAY 2020, Frontend: This issue of Increment surveys the breadth and depth of frontend development, from its principles, tools, and frameworks to its shifting scope and far-reaching fringes.
• Wake Lock API case study: 300% increase in purchase intent indicators on BettyCrocker.com
• The biggest scandals of NPM
• htmx — high power tools for HTML. htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext
• Responsive web design turns ten.
• #20 HTMHell special: close buttons
• Using Structured Data to Enhance Search Engine Optimization
• What computer and software is used by the Falcon 9?
• Stackoverflow Developer Survey 2020

• Tools
  • Local Testing on an iPhone
  • Getting Started With Chrome and Firefox Developer Tools
  • Converting a basic v3 gulpfile.js to a v4 gulpfile
• Performance
  • Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts
  • Tools to measure Core Web Vitals
  • 10 Ways to Improve Page Speed

CSS

• The Expanding Gamut of Color on the Web
• Tailblocks — Ready-to-use Tailwind CSS blocks
• On fixed elements and backgrounds
• Ask an expert: Why is CSS . . . the way it is?
• A user’s guide to CSS variables
• A First Look at `aspect-ratio`
• Here’s what I didn’t know about “content”
• Generating complementary gradients with CSS filters
• A CLI tool for creating CSS Grid layouts

JavaScript

• Top 5 Reasons Javascript Developers Prefer Deno Over Node
• Today’s Javascript, from an outsider’s perspective
• Basic Web Scraping Using JavaScript with Node.js + Puppeteer
• ECMAScript 4: The missing version

• Theory
  • How to Hide Secrets in Strings — Modern Text hiding in JavaScript
  • JavaScript Internals: What Actually Happens When You Call Console.log?
  • Cache API in JavaScript
  • 10 JavaScript Quiz Questions and Answers to Sharpen Your Skills
• React
  • A visual guide to React Mental models, part 2: useState, useEffect and lifecycles
  • Everything You Need to Know About React Concurrent Mode in 2020
  • The ultimate roundup of React form validation solutions
  • React Redux CRM
• Vue
  • The process: Making Vue 3 by Evan You
  • Adding Typescript to your existing VueJS 2.6+ app
• Angular
  • How To Create Better Angular Templates With Pug
  • Basic Reactive Patterns in Angular
  • Angular: The Unexpected
  • TDD in Angular — Dependency Injection and Mocking
• Ember
  • The Ember Times — Issue №150
• Svelte
  • I tried Svelte
• Libs & Plugins
  • Rough Notation — A small JavaScript library to create and animate annotations on a web
  • Fluor.js — a tiny JavaScript library that provides you with a high-level language to easily add interactions and effects to your websites.
  • ac-colors is a reactive JavaScript color library that can freely convert between RGB, HSL, HEX, XYZ, LAB, LCHab, LUV, and LCHuv, as well as handle random color generation and contrast ratio calculation
  • Motionia — a lightweight simplified on demand animation library.

Browsers

• How Microsoft is making Edge the best browser for PWAs
• Browsers are not rendering engines
• Chrome 84 Beta: Web OTP, Web Animations, New Origin Trials and More