The digest of fresh materials from the world of the frontend for the last week №314 (May 7 - 13, 2018)

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

• Podcast "Frontend Weekend" # 52 - Sergey Berezhnoy about 13 years in Yandex, SRI and problems because of soaring in the clouds
• Podcast “Web Standards”, issue # 120: Firefox 60, Google I / O, authoritarian code style, JS optimization with Prepack, CSS from right to left and heavy landing as a release sponsor
• Podcast "CSSSR" News 512 - Issue №5 (07.05 - 13.05)
• Podcast "Frontend Youth (18+)" # 48 I am making up aluminum crypto cucumbers
• Devschacht podcast: Night frontend # 33: SOLID is reliability
• Podcast "Drinkcast", # 27 - "Team Leader"
• “ALL YOUR HTML” # 48: “Animation from the site taotajima.jp on shaders and scrolls”
• 14 videos from KharkivCSS # 3 2018
• 4 videos from KharkivFrontend Meetup # _3 : CSS Grid Layout, functional programming, XSS, tests
• Chrome and Web at Google I / O 2018 , 25 videos

Web development

• Build 2018: Microsoft announced a number of new features for PWA applications
• From right to left. What is dir = rtl and how to tame Arabic
• Things developers should know about SEO in 2018
• How can simple trigonometry be used to improve loader animation
• Deep immersion in Bootstrap form components
')

• Performance:
  • We optimize the web with Vitaly Friedman, - compression, images, fonts, HTTP / 2 features and Resource Hints
  • First Input Delay: Google's new performance metric for measuring first impressions of site interactivity
  • Use Lighthouse to improve page loading performance
  • User Timing API - measuring UX performance
  

• Tools:
  • Punitive tools in the frontend
  • Webpack 4: practical recommendations for setting up
  • The Front-End Tooling Survey 2018 survey results
  • Announcement Lighthouse 3.0 with a description of the innovations
  • 8 cool new features in Sublime Text 3.1
  • `npm audit`: detect and fix dangerous dependencies
  

• Spectacular web:
  • Weekly selection of beautiful effects on CSS / SVG / JS # 78
  • brusher is a lightweight library for creating interactive backgrounds.
  • Interactive SVG mask with full screen image
  • Slider with the effect of image distortion on WebGL
  

CSS

• Why avoiding the CSS cascade is the problem?
• What is the CSSStyleDeclaration object and where does it come from
• Support for CSS Typed OM appeared in Chrome. How will it make life easier for developers?
• New CSS properties that change web design
• Making lines of text using box-decoration-break
• Overriding Standard Styles for Button
• Styling buttons, the right way
• Eqio is a simple, lightweight alternative to element / container expressions.
• Free course to improve Bulma CSS
• How to become CSS Grid Ninja
• “What's wrong with CSS-in-JS?” In the Bred Frost note, as well as the answer “What's wrong with css-in-js” by Micah Godbolt

Javascript

• Useful techniques for working with arrays in JavaScript
• Friday JS: random mixing
• BigInt - long arithmetic in javascript
• Excel will support JavaScript. Researchers have already launched miner CoinHive in this way.
• Google added JavaScript support to Mobile-Friendly Test and Rich Results Test
• How I used the web for one day with javascript turned off
• Full course in GraphQL - from beginner to expert
• Easy introduction to Prepack by Den Abramov (Part 1)
• A simple explanation of the concepts of JavaScript Symbols, Iterators, Generators, Async / Await and Async Iterators

• VueJS:
  • Working with Vue after three years with React
  • Creating a food ordering application with Vue and Africa's Talking
  • End-to-end testing VueJS clone HackerNews
  • Appetite for Components : creating your first Vue application for Guns N 'Roses
  • 5 lightning talks with VueConf.US that you can't miss
  

• React:
  • Understanding the life cycle of the React component
  • Additional questions at the IT interview
  • React State Museum
  • 5 tools for faster development on React
  • Conditional routing using React Router v4
  • End-to-end testing applications on React using Puppeteer and Jest
  

• Angular:
  • Angular - Stop Already!
  • Bazel, an experimental and unofficial feature of Angular 6
  • Angular Elements - A Practical Introduction To Web Components With Angular 6
  

• Libs & Plugins:
  • Guess.js - a collection of libraries and tools, presented on Google I / O 2018, which allows you to use site optimization techniques based on data and statistics
  • ScrollHint - JavaScript library for adding tooltips if block elements scroll horizontally
  • Real-time human pose definition in a browser using TensorFlow.js
  • ultradom is the minimal display layer for creating declarative web interfaces.
  

Browsers

• The release of Firefox 60 , as well as a review of the technical details of the release in the review of Marat Tanalin
• Improved sandbox isolation in Firefox
• Chrome 66 update: Millions of browser games are at risk
• Opera 53 web browser available
• Malicious extensions for Chrome infected more than 100,000 users.
• Introduction to Microsoft Edge DevTools Protocol

Entertaining

• What is shown on Google I / O 2018
• 40 announcements of Build 2018. Part 1. Hardware & Dev Tools
• Results of Microsoft Build 2018: Apple is no longer our competitors
• Google Photos will soon learn to color old photos and convert documents to PDF
• Windows 10 April 2018 Update: new features
• GitHub published a blocking report in 2017
• Microsoft puts on artificial intelligence
• The era of invisible gadgets is coming
• If there is no privacy - do not worry about it!
• Google has started registering domains in the .app zone
• Google + Microsoft: how two eternal rivals together try to change the world
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 .