The digest of fresh materials from the world of the frontend for the last week №291 (November 27 - December 3, 2017)

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

Media | Web Development | CSS | Javascript | Browsers | Entertaining

---

Media

• Frontend Weekend podcast FW # 30 - Evgeny Rodionov on how to become a product director from a layout designer
• Web Standards podcast, Release №97: Edge and Chrome, Firefox and web components, CSS wizards, podcast, formats, support
• Devschacht podcast: Night frontend # 13— Dart, Polymer, and Bicycles
• Podcast "Frontend Youth (18+)" # 28 React breaks the bunch
• The podcast "Drinkcast", # 19 - "Blessed JavaScript"
• “ALL YOUR HTML” # 25: “ALL YOUR HTML, Draw photos with lines in 3d, three.js”

Web development

• Introduction to frontend testing
• Production Bugs - Dirty Dozen Most Popular
• How to start working with static sites - a review of generators
• Checklist frontend is only a tool ... it all depends on you
• Top podcasts about web design and web development
')

• Performance:
  • Performance as Perception: Time Perception
  • Google does not use the TTFB metric in ranking
  • The best query is the lack of queries. Revision of the optimization strategy for HTTP / 2
  • 23 tools to improve the performance of websites
  • Javascript performance optimization tips
  • Progressive image downloads using Intersection Observer and SQIP Progressive
  • HTTP / 2 PUSH or HTTP Preload
  

• AMP / PWA:
  • Analysis of the economic impact of AMP on publishers and e-commerce
  • Development for a browserless web (in the context of PWA)
  • Addy Osmani details how to create a PWA for Pinterest and a significant increase in performance in this regard.
  

• Tools:
  • How (and why) to use eslint on your project
  • WebStorm 2017.3: improved support for Vue.js, refactoring, new REST client, and more
  

• Accessibility:
  • What you need to know about the 2018th: the upcoming deadlines for compliance with the standards and stages
  • Accessibility first: rethinking how we approach website design and development
  • Web content accessibility guide for people who haven't read this before
  • funkify is an extension for Chromium that allows to emulate many vision disorders, motility, as well as some cognitive
  

• Animation:
  • Weekly selection of beautiful effects on CSS / SVG / JS # 64
  • Animation of layouts using FLIP
  • Decorative background on WebGL
  • infinitown - a WebGL experiment with a procedurally generated city
  • GLSL: Voronoi octave
  

CSS

• Learn CSS Grid in 5 minutes
• About the logic of building typography and proportions in V6
• Modern asynchronous CSS loading
• CSS inlaying tools that come in handy when creating an email template
• Using feature queries (@supports) for cascading in web development
• How I recreated the effect of cotton on Medium, and what I understood from this experiment
• Generate wireframes with contours and diagonals using CSS and HTML
• Flexible container overflow control with flexs
• Fontastic web performance - Monica Dinculescu report on SmashingConf Barcelona 2017, as well as a small explanation of the font-display property for the report

Javascript

• How JS Works: Features and Scope of WebAssembly
• Creating a library of components using Storybook
• Journey to Fantasy-land . Egor Trubnikov-Panov talks about the functional JavaScript programming style and the Fantasy-land specification.
• JSRobot - learn JavaScript by playing the game
• Introduction to speculative optimization in V8
• Javascript hacks for ES6 hipsters
• Complete Developer Interview Javascript Reference Guide
• Implementing the Sieve of Eratosthenes in JavaScript
• MobX vs Redux with React: Questions and Comparison for a Newbie
• ECMAScript participation: instruction

• VueJS:
  • Real-time application on Vue.js
  • madewithvuejs - a collection of projects made using vue.js
  • How to understand the Scoped slots in Vue.js
  • vuetron - a tool for testing and debugging your applications on Vue + Vuex
  

• React:
  • Debugging React performance with React 16 and Chrome Devtools.
  • Introduction to React VR
  • GiraffQL is an interactive GraphQL immersion tool written in React
  • Presentation React Food Truck - supervised set of extensions for VS Code
  • reactopt - A tool to optimize React applications, identifies certain events that may cause unnecessary re-rendering.
  

• Angular:
  • Using new HTTP client in Angular v4
  • telemachy - visual tips in the form of an interactive tour of the site for Angular applications
  • NgUpgrade history: migrating an AngularJS application from version 1.6 to Angular 4
  

• Libs & Plugins:
  • Classily.js is a small plugin for class toggling: a simple solution for not always simple tasks
  • rapid.js - ORM-like interface and router for API requests
  • superstruct - a simple and composable way to validate data in Javascript
  

Browsers

• Firefox 58 will not allow direct access to the “data:” URL
• Chrome 63 - what's new in DevTools
• Chrome 64 - what's new in DevTools
• Microsoft Edge mobile browser has become available to all Android and iOS users.
• New and improved event and CSS inspector in Microsoft Edge DevTools

Entertaining

• Mozilla project released an open speech recognition system
• Explanations for updates to Google algorithms
• 24 Pull Requests: GitHub annual open project development event
• HDMI 2.1: new standard, new cable
• Quantum computers and quantum Internet today and tomorrow
• Sharp ups and downs in technology popularity at Stack Overflow
• Photoshop will use AI to quickly select objects
• Eric Schmidt: medicine and science - the main industries where AI will be used in the near future
• The power of imageboards: How 4chan became a hotbed of violence
• Scripting Cyrillic . About implementing Cyrillic in Google Docs and Slides
• OWASP Top 10 - 2017 - the ten most critical web application vulnerabilities
Go

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 .
Material prepared dersmoll and alekskorovin .