![](http://habrastorage.org/getpro/habr/avatars/d2a/e8a/5ac/d2ae8a5ac9876f838ebdd45f3ea3bc3b.png)
The digest of fresh materials from the world of the front-end for the last week No. 311 (April 16 - 22, 2018)
We bring to your attention a selection with links to new materials from the frontend area and around it.
Media | Web Development | CSS | Javascript | Entertaining
•
Podcast "Web Standards", Issue No. 117: Sketch in Avocode, new operators in ES, floats, flexes and grids, custom form elements, code style in React, scroll tricks.
•
Frontend Weekend podcast # 49 - Alexey Kureyev about React Native, life in Amsterdam and a Facebook interview
•
Frontend Weekend podcast # 48 - Vova Barsukov about moving to Berlin and how to switch from frontend development to consulting
•
Podcast “Devshahta”, Night Frontend # 31: Uncle Bob's new book
•
Podcast “Frontend Youth (18+)”: Wheeled release: React for dumb
•
Podcast “Frontend Youth (18+)”:From Amsterdam with love: Javascript - the foundation of programming
•
CSSSR Podcast, Issue 1: Co-pilot of a news podcast.
•
“ALL YOUR HTML” # 45: “Striped objects on curves and shaders”
•
Moscow SPA Meetup # 4 , 4 videos
•![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Render Conf 2018 , 15 videos
•![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
JSConf AU 2018cd h , 15 videos
• Search engine optimization of sites using SPA applications
• I want to become a frontend developer: basic knowledge and training plan
•
Design Checklist for creative web designers and persistent front-end developers
•
When to ignore 'mobile-first'
•
Choose a responsive framework for typesetting letters: MJML vs. Foundation for Emails
•
Replacing animated GIFs with Video
•
Creating a panning effect for SVG
•
packagephobia - find out the price of adding each new dependency to a project
• Tricks with focus styles
•
A look at CSS viewport units
•
A guide to CSS variables
•
Hey hey `font-display`
•
Best practices for CSS Grid Layout
•
Why is not using a CSS cascade a problem?
•
Swipe viewport with CSS Snap Points: creating effective mobile navigation
•
1 HTML element + 5 CSS properties = Magic!
•
Create smooth sequential animations using Sass
• An error in the JavaScript class led to the generation of vulnerable keys for cryptocurrency wallets
• Grasshopper is free software from Google developers that teaches the basics of JavaScript programming through mini-games
•
Escape from hell async / await
•
SvelteJS: Release of the second version
•
What to expect from Node. js 10
•
Designing very large (JS) applications
•
How components won the “framework war” . React vs Angular vs Vue: why it doesn't matter
•
Point of view: Angular is doomed, React OK - you deserve better
• Release of the Chrome 66 web browser
• Amazon has released its mobile browser
• New tools for developers of open source projects have appeared on GitHub
• Intel offers to use the GPU to protect against malware
• Google has closed the ability to use its domain as a proxy
• Google freezes Allo and makes a bid on Chat
• Microsoft AI Translator Learned to Work Without the Internet
Last week's digest .
Material prepared dersmoll and alekskorovin .
Media | Web Development | CSS | Javascript | Entertaining
Media
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Web development
• Search engine optimization of sites using SPA applications
• I want to become a frontend developer: basic knowledge and training plan
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Performance:
•Mission Critical: CSS optimization for CDN
•in webpack
•JS performance optimization: overview
- Animation:
• Weekly selection of beautiful effects on CSS / SVG / JS # 76
•Solar system research on CSS
•Creative scientific-style slider
•Immersion in the matrix
CSS
• Tricks with focus styles
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Javascript
• An error in the JavaScript class led to the generation of vulnerable keys for cryptocurrency wallets
• Grasshopper is free software from Google developers that teaches the basics of JavaScript programming through mini-games
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Guides:
•A simple guide to ES6 iterators in JavaScript with examples
•JS decorators: what it is and when to use them
•Ten Lodash functionalities that can be replaced using ES6
•Quick start ESLint - look for errors automatically
VueJS:
•Adding download indicators to the application on Vue.js
•Creating a product preview in Amazon styles on Vue.js
•Creating your own Vue.js router, a four-part guide
React:
•9 советов по улучшению качества кода React-приложений
•React Lazy Images — компоненты и утилиты для ленивой загрузки изображений в React.
•Что такое компоненты высшего порядка в React?
•React SPA с модулями React-Router и React-Transition-Group
Angular:
•Angular — Все доклады с ng-conf 2018
•Универсальный стартовый набор для Angular 6, основанный на @angular/cli с SSR и HMR
•Введение в роутинг в Angular 5
- Libs & Plugins:
•PicoJs — нахождение лица в видео
•Slugify — преобразователь строки (URL, имени файла и т.д.) в строку, разделённую тире
•Маска для полей ввода для React, Angular, Ember, Vue, и ванильного JavaScript
Занимательное
• Release of the Chrome 66 web browser
• Amazon has released its mobile browser
• New tools for developers of open source projects have appeared on GitHub
• Intel offers to use the GPU to protect against malware
• Google has closed the ability to use its domain as a proxy
• Google freezes Allo and makes a bid on Chat
• Microsoft AI Translator Learned to Work Without the Internet
We apologize for any typos or broken / duplicated links. If you notice a problem - please write in a personal email, we try to quickly fix them.
Last week's digest .
Material prepared dersmoll and alekskorovin .