The digest of fresh materials from the world of the front-end for the last week No. 291 (November 27 - December 3, 2017)
We bring to your attention a selection with links to new materials from the frontend area and around it.
Media | Web Development | CSS | Javascript | Browsers | Entertaining
•
Frontend Weekend podcast FW # 30 - Evgeny Rodionov on how to become a product director from a layout designer
•
Web Standards podcast, Issue No. 97: Edge and Chrome, Firefox and web components, CSS wizards, podcast, formats, support
•
Devschacht podcast: Night frontend # 13— Dart, Polymer and bikes
•
Frontend Youth (18+) podcast # 28 React breaks farts
• Drinkcast
podcast, # 19 - “Blessed JavaScript”
•
“ALL YOUR HTML ”# 25: “ ALL YOUR HTML, Draw the photo with lines in 3d, three.js ”
•
Introduction to frontend testing
•
Bugs on production - a dirty dozen of the most popular
•
How to start working with static sites - an overview of generators
•
A frontend checklist is just a tool ... it all depends on you
•
Best podcasts on web design and web development
•
Learn CSS Grid in 5 minutes
•
About the logic for building typography and proportions in V6
•
Modern asynchronous CSS loading
• CSS
inlining tools that are useful when creating an Email template
•
Using feature queries (@supports) for cascading in web development
•
How do I recreated the effect of cotton on Medium, and what I understood from this experiment
•
Generation of wireframes with contours and diagonals using CSS and HTML
•
Flexible control of container overflow using flexes
•
Web font performance- Monica Dinculescu report at SmashingConf Barcelona 2017, as well as a small explanation of the font-display property for the report
•
How JS Works: Features and Scope of WebAssembly
• Creating a Component Library Using a Storybook
•
Traveling to Fantasy-land . Egor Trubnikov-Panov talks about the functional style of JavaScript programming and the Fantasy-land specification.
•
JSRobot - learn JavaScript while playing the game
•
Introduction to speculative optimization in V8
•
JavaScript hacks for ES6 hipsters
•
Complete reference guide for Javascript developer interview
•
Implementation of the Eratosthenes sieve in JavaScript
•
MobX vs Redux with React: questions and comparison for a beginner
•
Participation in ECMAScript: instruction
•
In Firefox 58, a direct transition to the “data:” URL will be prohibited
•

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 at Microsoft Edge DevTools
• Mozilla project released an open speech recognition system
• Explanations for updates to Google algorithms
• 24 Pull Requests: GitHub annual open source development event
• HDMI 2.1: new standard, new cable
• Quantum computers and quantum Internet today and tomorrow
• Sharp ups and downs in popularity technology on Stack Overflow
• Photoshop will use AI to quickly isolate objects
• Eric Schmidt: medicine and science are the main industries where AI will be used in the near future
• Image board power: How 4chan became a hotbed for force
•
Scripting Cyrillic . On the introduction of Cyrillic alphabet in Google Docs and Slides
•
OWASP Top 10 - 2017 - ten most critical vulnerabilities in web applications
Last week's digest .
Material prepared dersmoll and alekskorovin .

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, Issue No. 97: Edge and Chrome, Firefox and web components, CSS wizards, podcast, formats, support•
Devschacht podcast: Night frontend # 13— Dart, Polymer and bikes•
Frontend Youth (18+) podcast # 28 React breaks farts• Drinkcast
podcast, # 19 - “Blessed JavaScript”•
“ALL YOUR HTML ”# 25: “ ALL YOUR HTML, Draw the photo with lines in 3d, three.js ”
Web development
•
Introduction to frontend testing•
Bugs on production - a dirty dozen of the most popular•
How to start working with static sites - an overview of generators•
A frontend checklist is just a tool ... it all depends on you•
Best podcasts on web design and web development- Performance:
•
Performance as a perception: time perception
• Google does not use the TTFB metric in ranking
• The
best query is the lack of queries. Revising your optimization strategy for HTTP / 2
•
23 tools to improve website performance
•
Tips for optimizing JavaScript performance
•
Progressively loading images 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 browser-free web (in the context of PWA)
•
Addy Osmani details on the creation of PWA for Pinterest and a significant increase in productivity in this regard
- Tools:
•
How (and why) to use eslint on your project
•
WebStorm 2017.3: improved support for Vue.js, refactoring, a new REST client and more
- Accessibility:
•
What you need to know about 2018: upcoming standards compliance deadlines and stages
•
Accessibility first: Rethinking how we approach website design and development
•
A guide to accessing web content for people who have not read about it before
•
funkify - an extension for Chrome that allows you to emulate many visual disturbances, motor skills, as well as some cognitive
- Animation:
• Weekly selection of beautiful effects on CSS / SVG / JS # 64
•
Animation of layouts using the FLIP technique
•
Decorative background on WebGL
•
infinitown - WebGL experiment with a procedurally created city
•
GLSL: Voronoi octave
CSS
•
Learn CSS Grid in 5 minutes•
About the logic for building typography and proportions in V6•
Modern asynchronous CSS loading• CSS
inlining tools that are useful when creating an Email template•
Using feature queries (@supports) for cascading in web development•
How do I recreated the effect of cotton on Medium, and what I understood from this experiment•
Generation of wireframes with contours and diagonals using CSS and HTML•
Flexible control of container overflow using flexes•

Web font performance- Monica Dinculescu report at 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 Component Library Using a Storybook
•
Traveling to Fantasy-land . Egor Trubnikov-Panov talks about the functional style of JavaScript programming and the Fantasy-land specification. •
JSRobot - learn JavaScript while playing the game•
Introduction to speculative optimization in V8•
JavaScript hacks for ES6 hipsters•
Complete reference guide for Javascript developer interview•
Implementation of the Eratosthenes sieve in JavaScript•
MobX vs Redux with React: questions and comparison for a beginner•

Participation in ECMAScript: instruction
VueJS:
•
Приложение реального времени на Vue.js
•
madewithvuejs — коллекция проектов, сделанных с помощью vue.js
•
Как понять Scoped slots во Vue.js
•
vuetron — инструмент для тестирования и отладки ваших приложений на Vue + Vuex
React:
•
Отладка производительности React с помощью React 16 и Chrome Devtools.
•
Введение в React VR
•
GiraffQL — инструмент для интерактивного погружения в GraphQL, написанный на React
•
Представление React Food Truck — курируемый набор расширений для VS Code
•
reactopt — Инструмент для оптимизации React приложений, идентифицирует определенные события, которые могут вызывать ненужный повторный рендеринг
Angular:
•
Использование нового HTTP клиента в Angular v4
•
telemachy — визуальное подсказки в виде интерактивного тура по сайту для приложений Angular
•
История ngUpgrade: миграция AngularJS приложения с версии 1.6 на Angular 4
- Libs & Plugins:
•
Classily.js — небольшой плагин для тогглинга классов: простое решение для не всегда простых задач
•
rapid.js — подобный ORM интерфейс и роутер для API запросов
•
superstruct — простой и компонуемый способ валидации данных в Javascript
Браузеры
•
In Firefox 58, a direct transition to the “data:” URL will be prohibited•


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 at Microsoft Edge DevTools
Entertaining
• Mozilla project released an open speech recognition system
• Explanations for updates to Google algorithms
• 24 Pull Requests: GitHub annual open source development event
• HDMI 2.1: new standard, new cable
• Quantum computers and quantum Internet today and tomorrow
• Sharp ups and downs in popularity technology on Stack Overflow
• Photoshop will use AI to quickly isolate objects
• Eric Schmidt: medicine and science are the main industries where AI will be used in the near future
• Image board power: How 4chan became a hotbed for force
•
Scripting Cyrillic . On the introduction of Cyrillic alphabet in Google Docs and Slides •
OWASP Top 10 - 2017 - ten most critical vulnerabilities in web applicationsWe 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 .