The digest of fresh materials from the world of the frontend for the last week No. 365 (May 13 - 19, 2019)

We offer you a selection with links to new materials from the front-end area and around it.

Media | Web Development | CSS | Javascript

---

Media

• Podcast “Web Standards” , 176. Podcasts about web development, news from Google I / O and Microsoft Build
• “Make Me Beautiful” podcast. Issue 17 - You do not need SPA, Google news and Microsoft files.
• Podcast "Frontend Youth (18+)" # 93 Grumbling over the front end
• Podcast "CSSSR" : News 512 - May overclocking
• CSSSR Podcast : News 512 - May Special Edition
• Podcast "Devshakhta / Night Frontend" # 80: The right mobile version and that there is Facebook
• Repozitorro # 14 : Projects are different, but it is ...
• ALL YOUR HTML # s3e2: Physics with Cannon.js
• Video from SmashingConf SF 2019
• Web at Google I / O 2019 , 24 videos

Web development

• Pictures on the web 2019
• Technological trends of web development 2019
• SVG components for IoT and devices (part 2)
• Introduction to JAMstack: Modern Web Architecture
• Why developing with JAMstack is cool
• Everything you wanted to know about inputmode
• Pug Beginner's Guide
• We understand the device JPEG
')

• Performance:
  • Using WebAssembly, we accelerated web application 20 times
  • Best HTTP / 2 prioritization to speed up the web
  • Deep immersion in native lazy loading of images and frames
  • AMP Advisory Committee Meeting Report
  • Image optimization: understanding the exact impact on Google's Performance Score to increase its level in 2019
  • Is 'the fold' (the first screen area of ​​the site) still important in the modern scrolling culture of sites?
  • 3Pweb - an online visualizer that clearly shows how long it takes on average to execute third-party scripts
  

• Instruments:
  • Chrome developer tools features that you didn’t know about (PART 1)
  • Remote development using VS Code
  • Faster and smarter JavaScript debugging in Firefox DevTools
  

• Accessibility:
  • New (and simple) way to implement accessibility for hidden content
  • Availability condition: GAAD 2019
  • Presented by Microsoft Web Template Studio for full-stack development
  

• Animation:
  • Integration of third-party animation libraries into the project
  • How to create a pie chart on SVG
  

CSS

• Will the selector: has () be available for formatting?
• This is a trap-ezoid trap: CSS Shapes are not what you expect.
• CSS Grid Rows and Columns Animation
• Subgrid . New article on MDN dev docs
• CSS Scan: the fastest way to check and copy CSS
• CSS function for restricting multi-line text in three dots was implemented in Firefox
• Debugging CSS Grid: Part 2: What is Fr (action)?
• Google Fonts now supports font-display!
• CSS rules that make your life easier
• Chinese window grille and CSS

Javascript

• The first contribution to the browser API from Facebook
• Cloudflare, Mozilla and Facebook develop BinaryAST to speed up JavaScript loading.
• Getting Started with Svelte 3
• Functional javascript
• TypeScript 3.0: type unknown

• Theory:
  • What is this here? The inner workings of JavaScript objects
  • Javascript Proxy Tutorial
  • JavaScript engines: how do they work, after all? From call stack to promise, (almost) everything you need to know
  

• VueJS:
  • Available form validation messages using ARIA and Vue.js
  • Introduction to test-driven development using Vue.js
  • Getting Started with Vue - Overview and Walkthrough
  • Gesture gallery on Vue.js and Tailwind
  

• React:
  • Reakit 1.0: a new toolkit for creating accessible web applications based on React
  • How to easily convert React-Redux classes to React Hooks
  • unform - ReactJS library for creating uncontrollable form structures with nested fields, validations, and much more.
  • UI animation in React
  • ReactQ - Universal Starter Kit for React + GraphQL: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
  • React Hooks Basic Design Patterns
  • Deactivation React App
  • Creating your own React library for validation: the basics (part 1)
  • What to do when your React app feels slow
  

• Angular:
  • Angular: library creation and publishing
  • Introducing CLI Builder
  • Create an online store using ngrx / store and Angular
  • My favorite tips and tricks in Angular
  • Inheritance of components in Angular
  • Making accessibility easier with Angular CDK. Lists with keyboard navigation
  

• Libs & Plugins:
  • Get to know Storeon , a tiny state manager for modern applications that are contiguous to Redux, implemented in a single file, weighing 173 bytes.
  • ola - an animation library for averaging / interpolating numbers in real time
  • reLift-HTML is a small library for view (3KB) that allows you to create web components, custom elements that helps to make any HTML page reactive without being polluted by large frameworks
  

We apologize for any typos or broken / duplicate links. If you notice a problem - please write in a personal, we are trying to fix them quickly.

Digest from last week .
The material was prepared by dersmoll and alekskorovin .