The digest of fresh materials from the world of the front-end for the last week No. 290 (November 19 - 26, 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 # 29 - Alexandra Ermolenko about how designers and developers should interact
• Web standards podcast, Issue 96 - Firefox 58 and browser compatibility, JS modules, React + BEM, career, For Web , publics and Smashing Magazine
• Podcast “devschacht”: Night frontend # 12 - Money is not motivation
• Podcast “Frontend Youth (18+)” : JavaScript is the best language for thoughtless copying of other people's bicycles
• Podcast “Drinkcast”, Issue # 18 - “ Guys, let's live together "
• Five-minute Angular # 6 - Angular Kiev / MSK / Camp, 5.1.0 beta 2, Angular Elements, Animation Movie
• “ALL YOUR HTML” # 24: “Custom scroll and css clip property”
• New DevShow release on loftblog: Andrey Sitnik - About sex, alcohol and Logux
• Adaptive layout . What is the difference between rubber, adaptive and responsive layout? How to apply them?
• What is lit-html? lit-html - a competitor to react or just another kind of Handlebars
• Progressive Web Apps: a detailed introduction to PWA
• Localization and translation on the web
• General security issues in web applications, part 1
• Everything you need to know about CSS-in-JS
• Logic grids in CSS Grid Layout , article by Eric Meyer on alistapart
• The art of solving problems with CSS
• CSS for commands
• Update your project with CSS selectors and custom attributes
• About the growing popularity of Atomic CSS
• CSS optimization: fine-tuning performance animations with DevTools
• The story of Zach Litherman spending 23 minutes to significantly improve font loading time
• How much does JavaScript cost? Translation of "The Cost Of JavaScript" by Eddie Osmani.
• 77% of the 433 thousand sites studied use vulnerable versions of JavaScript libraries
• Familiarity with the JS template of the year or how to handle async like a boss
• PlainJS - many utilities and plugins on vanilla JS for solving common front-end tasks, with demos and examples
• Introduction to regular expressions (Regex) in JavaScript
• How JavaScript works: comparison with WebAssembly + why in some cases it is better to use it instead of JavaScript
• Why we refused to use default exports in Javascript and why you should do the same
• Implementation of JavaScript Functor and Monads
• Improving the debugger and expanding WebExtensions API: what's new for developers in Firefox 58
• They plan to display a warning in Firefox when visiting previously hacked sites
• Do you want to be the first to receive news? About how to block annoying push notifications in different browsers
• Your first (Web) extension for Firefox written in Kotlin
• Comparison of page loading speed in a browser: introduction to the methodology
• Analysis of the degree of duplication of code on GitHub
• GitHub received the function of team discussions
• Quartz: Google collects data on the location of Android users
• Former head of the Chinese division of Google: work that requires social skills will come to the fore in the future
• 11 optical illusions in the interfaces
• Where find the last places without the Internet
• Programmers on the way to the next bubble?
• The myth of the interchangeability of developers
Last week digest .
Material prepared dersmoll and alekskorovin .
Media | Web Development | CSS | Javascript | Browsers | Entertaining
Media
• Frontend Weekend podcast # 29 - Alexandra Ermolenko about how designers and developers should interact
• Web standards podcast, Issue 96 - Firefox 58 and browser compatibility, JS modules, React + BEM, career, For Web , publics and Smashing Magazine
• Podcast “devschacht”: Night frontend # 12 - Money is not motivation
• Podcast “Frontend Youth (18+)” : JavaScript is the best language for thoughtless copying of other people's bicycles
• Podcast “Drinkcast”, Issue # 18 - “ Guys, let's live together "
• Five-minute Angular # 6 - Angular Kiev / MSK / Camp, 5.1.0 beta 2, Angular Elements, Animation Movie
• “ALL YOUR HTML” # 24: “Custom scroll and css clip property”
• New DevShow release on loftblog: Andrey Sitnik - About sex, alcohol and Logux
Web development
• Adaptive layout . What is the difference between rubber, adaptive and responsive layout? How to apply them?
• What is lit-html? lit-html - a competitor to react or just another kind of Handlebars
• Progressive Web Apps: a detailed introduction to PWA
• Localization and translation on the web
• General security issues in web applications, part 1
- Performance:
• Using SVG as a Placeholder
• Optimizing the speed of rendering web pages
• Yandex launched a search for “turbo pages” - an analogue of Google AMP and Instant Articles
• New Performance monitor in Chrome DevTools . You can now see many real-time performance metrics
• Explained the concept of First Contentful Paint (FCP) on the GTmetrix Blog
• What is HEIF and will it replace this JPEG format?
- Tools:
• Internal design and optimization of the webpack bundle
• Jest and Puppeteer: automation of testing web interfaces
• stacks-cli - visual analysis of the site stack from the terminal
• Clean-mark - converter of articles into markdown text
- Accessibility:
• A detailed analysis of creating an accessible content slider
• HTML email templates and accessibility
• Advocating an accessible interface design
- Animation:
• Weekly selection of beautiful effects on CSS / SVG / JS # 63
• Shredder Redux - implementation of Shredder Polygon using instances on three.js , Maf.js and dat.gui
• Creative animation of checkboxes in the Todo list on CSS
CSS
• Everything you need to know about CSS-in-JS
• Logic grids in CSS Grid Layout , article by Eric Meyer on alistapart
• The art of solving problems with CSS
• CSS for commands
• Update your project with CSS selectors and custom attributes
• About the growing popularity of Atomic CSS
• CSS optimization: fine-tuning performance animations with DevTools
• The story of Zach Litherman spending 23 minutes to significantly improve font loading time
Javascript
• How much does JavaScript cost? Translation of "The Cost Of JavaScript" by Eddie Osmani.
• 77% of the 433 thousand sites studied use vulnerable versions of JavaScript libraries
• Familiarity with the JS template of the year or how to handle async like a boss
• PlainJS - many utilities and plugins on vanilla JS for solving common front-end tasks, with demos and examples
• Introduction to regular expressions (Regex) in JavaScript
• How JavaScript works: comparison with WebAssembly + why in some cases it is better to use it instead of JavaScript
• Why we refused to use default exports in Javascript and why you should do the same
• Implementation of JavaScript Functor and Monads
- Frameworks:
• A series of publications from 11 articles comparing Aurelia, Ember, Dojo, Vue, React and Angular, with the conclusions and the pros / cons of each of them
• JavaScript frameworks in numbers as of fall 2017
• Modern front-end frameworks should be less about “frame” and more about “work”
• Angular vs React: comparison in context of popularity
- Теория:
• Чем отличаются JavaScript и ECMAScript?
• Основы троттлинга событий в JavaScript
• Типы в JavaScript: почему вы должны заботиться о них
• Нестандартное объяснение JavaScript области видимости переменных на примере уровней в парламенте
• Как сделать жизнь проще с помощью использования функционального программирования в TypeScript
• Изучите, как обрабатывать ошибки в JavaScript с помощью Try, Throw, Catch, & Finally
- VueJS:
• Прогрессивная миграция с AngularJS на Vue.js в Unbabel
• Прогрессивное веб-приложение с помощью Vue JS, Webpack & Material Design
• Как я начал использовать Vue
- React:
• Основы React: всё, что нужно знать для начала работы
• Бесплатные лекции по продвинутому React.js
• Как значительно улучшить производительность приложения на React
• bemto-components. Умные компоненты для использования методологии BEM с React. Лучше всего заходит со styled-components.
• Издержки производительности при серверном рендеринге React на Node.js
- Angular:
• Использование Angular компонентов со сторонними библиотеками
• Взгляд на Angular через призму Vue — знакомый код
• Как сделать компонент загрузки приложения Angular с помощью Angular CLI
• Angular 5 Service Worker
• “React лучше, чем Angular” и другой бред
- Libs & Plugins:
• Scrollama — JS библиотека для реализации сторителлинга с помощью IntersectionObserver в пользу событий прокрутки.
• Chartkick — создание красивых графиков с помощью одной строки на React
• imaskjs — маскирование данных по заданным параметрам в текстовом поле ввода, без зависимостей
• raspchat — сервер с чатом, который можно запускать на Raspberry Pi
• z — нативный паттерн сравнения для Javascript
• AWS Amplify — декларативная библиотека для разработки приложений, использущих Cloud сервисы с JS
Браузеры
• Improving the debugger and expanding WebExtensions API: what's new for developers in Firefox 58
• They plan to display a warning in Firefox when visiting previously hacked sites
• Do you want to be the first to receive news? About how to block annoying push notifications in different browsers
• Your first (Web) extension for Firefox written in Kotlin
• Comparison of page loading speed in a browser: introduction to the methodology
Entertaining
• Analysis of the degree of duplication of code on GitHub
• GitHub received the function of team discussions
• Quartz: Google collects data on the location of Android users
• Former head of the Chinese division of Google: work that requires social skills will come to the fore in the future
• 11 optical illusions in the interfaces
• Where find the last places without the Internet
• Programmers on the way to the next bubble?
• The myth of the interchangeability of developers
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 digest .
Material prepared dersmoll and alekskorovin .