Frontend Weekly Digest #108 (13 –19 May 2019)

Web-development

• SVG Web Page Components For IoT And Makers (Part 2)
• An introduction to the JAMstack: the architecture of the modern web
• Why Building with a JAMstack is Awesome
• Everything You Ever Wanted to Know About inputmode
• A Beginner’s Guide to Pug
• Unraveling the JPEG
• Integrating Third-Party Animation Libraries to a Project
• How to Create an SVG Pie Chart — Code Along with Kasey (Video)

• Performance:
  • A Deep Dive into Native Lazy-Loading for Images and Frames
  • A report from the AMP Advisory Committee Meeting
  • Image Optimization: Understanding the Exact Impact on Google’s Performance Score to Rank Higher in 2019
  • Better HTTP/2 Prioritization for a Faster Web
  • Is ‘the fold’ still a thing in today’s scrolling and skimming culture?
  • 3Pweb — This visualizes how long the entity’s scripts take to execute, on average.
• Tools:
  • Remote Development with VS Code
  • Faster smarter JavaScript debugging in Firefox DevTools
• Accessibility:
  • A new (and easy) way to hide content accessibly
  • The State of Accessibility: GAAD 2019
  • Announcing Microsoft Web Template Studio

CSS

• It’s a trap-ezoid: CSS Shapes aren’t what you’d expect
• Animating CSS Grid Rows and Columns
• Subgrid. A new article on MDN dev docs
• CSS Scan: The Fastest Way to Inspect and Copy CSS
• The CSS feature for truncating multi-line text has been implemented in Firefox
• Debugging CSS Grid: Part 2: What the Fr(action)?
• Google Fonts Now Supports font-display!
• CSS rules that will make your life easier
• Chinese Window Lattice And CSS

JavaScript

• Cloudflare, Mozilla и Facebook развивают BinaryAST для ускорения загрузки JavaScript
• Getting Started with Svelte 3
• Functional-ish JavaScript
• TypeScript 3.0: The unknown Type

• Theory:
  • A practical guide to Javascript Proxy
  • JavaScript Engines: How Do They Even Work? From Call Stack to Promise, (almost) Everything You Need to Know
• VueJS:
  • Accessible Form Validation Messages with ARIA and Vue.js
  • An introduction to test-driven development with Vue.js
  • Getting Started with Vue — An Overview and Walkthrough Tutorial
  • Swipe Gallery using Vue.js & Tailwind
• React:
  • How to convert from React-Redux classes to React Hooks, the easy way
  • unform — ReactJS form library to create uncontrolled form structures with nested fields, validations and much more!
  • UI Animation in React
  • ReactQ — Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
  • Essential React Hooks Design Patterns
  • Dockerizing a React App
  • Creating Your Own React Validation Library: The Basics (Part 1)
  • What to do when your React app feels slow
• Angular:
  • Building an Online Store Using ngrx/store and Angular
  • My Favorite Tips and Tricks in Angular
  • Component Inheritance in Angular
  • Doing A11y easily with Angular CDK. Keyboard-Navigable Lists
• Libs & Plugins:
  • Storeon: tiny state manager for modern front-end applications close in spirit to Redux, implemented in a single file that boils down to 173 bytes
  • ola — Smooth animation library for interpolating numbers
  • reLift-HTML is very small (3kb) view library that allows you to create Web Component, Custom Element, and helps you make any HTML page reactive without the bloat of big frameworks.