Frontend Weekly Digest (13 – 19 May 2019)

This week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.

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
• Unravelingthe 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:
  • Microsoft открыл код библиотеки векторного поиска, используемой в Bing
  • 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.
  

Thanks for reading! Feel free to send us your articles or fresh useful content you want to see in the next digest.