Дайджест свежих материалов из мира фронтенда за последнюю неделю №290 (19 — 26 ноября 2017)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №290 (19 — 26 ноября 2017) - 1

Медиа

• podcast Подкаст «Frontend Weekend» #29 – Александра Ермоленко про то, как должны взаимодействовать дизайнеры и разработчики ^[7]
• podcast Подкаст «devschacht»: Ночной фронтенд #12 — Деньги не мотивация ^[8]
• podcast Подкаст «Фронтенд Юность (18+)» : JavaScript — лучший язык для бездумного копирования чужих велосипедов ^[9]
• podcast Подкаст «Drinkcast», Выпуск #18 — «Ребята, давайте жить дружно» ^[10]
• video «ALL YOUR HTML» #24: «Кастомный скролл и css свойство clip» ^[11]
• video HTML Шорты: Андрей Ситник — О сексе, алкоголе и Logux ^[12]

Веб-разработка

• habr Адаптивная вёрстка ^[13]. В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?
• Что за lit-html? ^[14] lit-html — конкурент react или просто другой вид Handlebars
• pwa Progressive Web Apps: подробное введение в PWA ^[15]
• Локализация и перевод в вебе ^[16]
• Общие проблемы безопасности в веб-приложениях, часть 1 ^[17]

Производительность:
• Использование SVG в качестве Placeholder’a ^[18]
• Оптимизация скорости визуализации веб-страниц ^[19]
• «Яндекс» запустил в поиске «турбо-страницы» — аналог Google AMP и Instant Articles ^[20]
• Новый монитор производительности (Performance monitor) в Chrome DevTools ^[21]. Теперь вы можете наблюдать множество метрик производительности в реальном времени
• Объяснение понятия First Contentful Paint (FCP) в блоге GTmetrix ^[22]
• Что такое HEIF и заменит ли этот формат JPEG? ^[23]

Инструменты:
• Внутреннее устройство и оптимизация бандла webpack ^[24]
• Jest и Puppeteer: автоматизация тестирования веб-интерфейсов ^[25]
• stacks-cli ^[26] — наглядный анализ стэка сайта из терминала
• Clean-mark ^[27] — конвертор статей в markdown текст

Accessibility:
• Подробный разбор создания доступного слайдер контента ^[28]
• Шаблоны HTML писем и доступность ^[29]
• Пропагада доступного дизайна интерфейсов ^[30]

Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #63 ^[31]
• Shredder Redux ^[32] — реализация Shredder Polygon с использованием инстансов, на three.js ^[33], Maf.js ^[34] и dat.gui ^[35]
• Креативная анимация чекбоксов в Todo спике на CSS ^[36]

CSS

• Всё, что вам нужно знать о CSS-in-JS ^[37]
• Логические сетки в CSS Grid Layout ^[38], статья Эрика Мейера на alistapart
• Искусство решения проблем с помощью CSS ^[39]
• CSS для комманд ^[40]
• Обновите свой проект с помощью CSS-селекторов и пользовательских атрибутов ^[41]
• О растущей популярности Atomic CSS ^[42]
• Оптимизация CSS: тонкая настройка производительной анимации с помощью DevTools ^[43]
• История о том, Зак Лизерман потратил 23 минуты на существенное улучшение времени загрузки шрифта ^[44]

JavaScript

• Сколько стоит JavaScript? ^[45] Перевод «The Cost Of JavaScript» Эдди Османи.
• 77% из 433 тысяч изученных сайтов используют уязвимые версии JavaScript-библиотек ^[46]
• Знакомство с JS-шаблоном года или как обрабатывать async как босс ^[47]
• PlainJS ^[48] — множество утилит и плагинов на ванильном JS для решения распространненых задач фронтенда, с демками и примерами
• Введение в регулярные выражения (Regex) в JavaScript ^[49]
• Как работает JavaScript: сравнение с WebAssembly + почему в некоторых случаях лучше использовать его вместо JavaScript ^[50]
• Почему мы отказались от использования дефолтных экспортов в Javascript и почему вы должны сделать то же самое ^[51]
• Имплементация JavaScript Functor и монад ^[52]

Фреймоврки:
• Серия публикаций из 11-ти статей со сравнением Aurelia, Ember, Dojo, Vue, React и Angular, с выводами и приведенными плюсами/минусами каждого из них ^[53]
• JavaScript фреймворки в цифрах по состоянию на осень 2017 ^[54]
• Современные фронтенд фреймворки должны быть меньше о “frame” и больше о “work” ^[55]
• Angular vs React: сравнение в контексте популярности ^[56]

Теория:
• Чем отличаются JavaScript и ECMAScript? ^[57]
• Основы троттлинга событий в JavaScript ^[58]
• Типы в JavaScript: почему вы должны заботиться о них ^[59]
• Нестандартное объяснение JavaScript области видимости переменных на примере уровней в парламенте ^[60]
• Как сделать жизнь проще с помощью использования функционального программирования в TypeScript ^[61]
• Изучите, как обрабатывать ошибки в JavaScript с помощью Try, Throw, Catch, & Finally ^[62]

VueJS:
• Прогрессивная миграция с AngularJS на Vue.js в Unbabel ^[63]
• Прогрессивное веб-приложение с помощью Vue JS, Webpack & Material Design ^[64]
• Как я начал использовать Vue ^[65]

React:
• Основы React: всё, что нужно знать для начала работы ^[66]
• Бесплатные лекции по продвинутому React.js ^[67]
• Как значительно улучшить производительность приложения на React ^[68]
• bemto-components ^[69]. Умные компоненты для использования методологии BEM с React. Лучше всего заходит со styled-components.
• Издержки производительности при серверном рендеринге React на Node.js ^[70]

Angular:
• Использование Angular компонентов со сторонними библиотеками ^[71]
• Взгляд на Angular через призму Vue — знакомый код ^[72]
• Как сделать компонент загрузки приложения Angular с помощью Angular CLI ^[73]
• Angular 5 Service Worker ^[74]
• “React лучше, чем Angular” и другой бред ^[75]

Libs & Plugins:
• Scrollama ^[76] — JS библиотека для реализации сторителлинга с помощью IntersectionObserver в пользу событий прокрутки.
• Chartkick ^[77] — создание красивых графиков с помощью одной строки на React
• imaskjs ^[78] — маскирование данных по заданным параметрам в текстовом поле ввода, без зависимостей
• raspchat ^[79] — сервер с чатом, который можно запускать на Raspberry Pi
• z ^[80] — нативный паттерн сравнения для Javascript
• AWS Amplify ^[81] — декларативная библиотека для разработки приложений, использущих Cloud сервисы с JS

Браузеры

• Firefox Улучшение отладчика и расширение WebExtensions API: что нового для разработчиков в Firefox 58 ^[82]
• В Firefox планируют выводить предупреждение при посещении ранее взломанных сайтов ^[83]
• Хотите получать новости первым? ^[84] О том, как заблокировать раздражающие push notifications в разных браузерах
• Ваш первый (Web)extension для Firefox, написанный на Kotlin ^[85]
• Сравнение скорости загрузки страниц в браузере: введение в методологию ^[86]

Занимательное

• Анализ степени дублирования кода на GitHub ^[87]
• GitHub получил функцию командных обсуждений ^[88]
• Quartz: Google собирает данные о местоположении пользователей Android ^[89]
• Бывший глава китайского подразделения Google: работа, требующая социальных навыков, в будущем выйдет на первый план ^[90]
• 11 оптических иллюзий в интерфейсах ^[91]
• Где найти последние места без интернета ^[92]
• Программисты на пути к очередному пузырю? ^[93]
• Миф о взаимозаменямости разработчиков ^[94]

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю ^[95].
Материал подготовили dersmoll ^[96] и alekskorovin ^[97].

Автор: alexzfort

Источник ^[98]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/269165

Ссылки в тексте:

[1] Медиа: #media

[2] Веб-разработка: #webdev

[3] CSS: #css

[4] Javascript: #js

[5] Браузеры: #browser

[6] Занимательное: #intresting

[7] #29 – Александра Ермоленко про то, как должны взаимодействовать дизайнеры и разработчики: https://soundcloud.com/frontend-weekend/fw-29

[8] Ночной фронтенд #12 — Деньги не мотивация: https://medium.com/devschacht/nightly-12-b762928428b3

[9] : JavaScript — лучший язык для бездумного копирования чужих велосипедов: https://soundcloud.com/frontend_u/javascript

[10] Выпуск #18 — «Ребята, давайте жить дружно»: https://spb-frontend.ru/podcast/18/?e-zhit-druzhno-v-18-m-vyp&utm_content=13154805

[11] «Кастомный скролл и css свойство clip»: https://www.youtube.com/watch?v=JQMryV9X1R4

[12] Андрей Ситник — О сексе, алкоголе и Logux: https://www.youtube.com/watch?v=jZmmQ87yFLE&feature=youtu.be

[13] Адаптивная вёрстка: https://habrahabr.ru/company/htmlacademy/blog/342066/.com

[14] Что за lit-html?: https://zhukovka.github.io/js/featured/lit-html

[15] Progressive Web Apps: подробное введение в PWA: https://www.sitepoint.com/progressive-web-apps-a-crash-course/

[16] Локализация и перевод в вебе: https://bitsofco.de/localisation-and-translation/

[17] Общие проблемы безопасности в веб-приложениях, часть 1: https://codeburst.io/common-security-issues-in-web-applications-part-1-af339360c646

[18] Использование SVG в качестве Placeholder’a: https://habrahabr.ru/company/edison/blog/342848/

[19] Оптимизация скорости визуализации веб-страниц: https://habrahabr.ru/company/jugru/blog/342632/

[20] «Яндекс» запустил в поиске «турбо-страницы» — аналог Google AMP и Instant Articles: https://vc.ru/29500-yandeks-zapustil-v-poiske-turbo-stranicy-analog-google-amp-i-instant-articles

[21] Новый монитор производительности (Performance monitor) в Chrome DevTools: https://hospodarets.com/chrome-devtools-performance-monitor

[22] Объяснение понятия First Contentful Paint (FCP) в блоге GTmetrix : https://gtmetrix.com/blog/first-contentful-paint-explained/

[23] Что такое HEIF и заменит ли этот формат JPEG?: https://www.keycdn.com/blog/heif/

[24] Внутреннее устройство и оптимизация бандла webpack: https://habrahabr.ru/company/jugru/blog/342842/

[25] Jest и Puppeteer: автоматизация тестирования веб-интерфейсов: https://habrahabr.ru/company/ruvds/blog/342578/

[26] stacks-cli: https://github.com/WeiChiaChang/stacks-cli

[27] Clean-mark: https://github.com/croqaz/clean-mark

[28] Подробный разбор создания доступного слайдер контента: https://inclusive-components.design/a-content-slider/

[29] Шаблоны HTML писем и доступность: https://css-tricks.com/html-email-accessibility/

[30] Пропагада доступного дизайна интерфейсов: https://css-tricks.com/advocating-for-accessible-ui-design/

[31] Еженедельная подборка красивых эффектов на CSS/SVG/JS #63: http://css-live.ru/cssjssvg-s-podvypodvertom/ezhenedelnaya-podborka-krasivyx-effektov-nacsssvgjs-63.html

[32] Shredder Redux: https://www.clicktorelease.com/code/codevember-2017/shredder-redux/

[33] three.js: https://threejs.org

[34] Maf.js: https://github.com/spite/Maf.js/

[35] dat.gui: https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage

[36] Креативная анимация чекбоксов в Todo спике на CSS: https://codepen.io/shshaw/pen/WXMdwE

[37] Всё, что вам нужно знать о CSS-in-JS: http://css-live.ru/articles/vsyo-chto-vam-nuzhno-znat-o-css-in-js.html

[38] Логические сетки в CSS Grid Layout: https://alistapart.com/article/faux-grid-tracks

[39] Искусство решения проблем с помощью CSS: https://aysha.me/2017/11/the-art-of-solving-problems-with-css/

[40] CSS для комманд: http://www.thenerdary.net/post/167493425137/css-for-teams

[41] Обновите свой проект с помощью CSS-селекторов и пользовательских атрибутов: https://www.sitepoint.com/upgrade-project-css-selector-custom-attributes/

[42] О растущей популярности Atomic CSS: https://css-tricks.com/growing-popularity-atomic-css/

[43] Оптимизация CSS: тонкая настройка производительной анимации с помощью DevTools: https://www.sitepoint.com/check-css-animation-performance-with-the-browsers-dev-tools/

[44] История о том, Зак Лизерман потратил 23 минуты на существенное улучшение времени загрузки шрифта: https://www.zachleat.com/web/23-minutes/

[45] Сколько стоит JavaScript?: https://medium.com/web-standards/the-cost-of-javascript-a51051b3fde6

[46] 77% из 433 тысяч изученных сайтов используют уязвимые версии JavaScript-библиотек: http://www.opennet.ru/opennews/art.shtml?num=47614

[47] Знакомство с JS-шаблоном года или как обрабатывать async как босс: http://krasimirtsonev.com/blog/article/javascript-pattern-of-the-year-handle-async-like-a-boss

[48] PlainJS: https://plainjs.com/

[49] Введение в регулярные выражения (Regex) в JavaScript: https://codeburst.io/an-introduction-to-regular-expressions-regex-in-javascript-1d3559e7ac9a

[50] Как работает JavaScript: сравнение с WebAssembly + почему в некоторых случаях лучше использовать его вместо JavaScript: https://blog.sessionstack.com/how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it-d80945172d79

[51] Почему мы отказались от использования дефолтных экспортов в Javascript и почему вы должны сделать то же самое: https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

[52] Имплементация JavaScript Functor и монад: https://medium.com/@rubenspgcavalcante/implementing-javascript-functors-and-monad%20s-a87b6a4b4d9a

[53] Серия публикаций из 11-ти статей со сравнением Aurelia, Ember, Dojo, Vue, React и Angular, с выводами и приведенными плюсами/минусами каждого из них: https://www.sitepen.com/blog/2017/11/10/web-frameworks-conclusions/

[54] JavaScript фреймворки в цифрах по состоянию на осень 2017: https://javascriptreport.com/javascript-frameworks-by-the-numbers-fall-2017/

[55] Современные фронтенд фреймворки должны быть меньше о “frame” и больше о “work”: https://medium.com/@eavichay/https-medium-com-eavichay-modern-front-end-frameworks-should-be-a-less-of-a-frame-and-more-of-a-work-c6703f2a5b58

[56] Angular vs React: сравнение в контексте популярности: https://medium.jonasbandi.net/angular-vs-react-popularity-ea2659308cd5

[57] Чем отличаются JavaScript и ECMAScript?: https://habrahabr.ru/company/nixsolutions/blog/342904/

[58] Основы троттлинга событий в JavaScript : https://codepen.io/AmeliaBR/post/basic-javascript-event-throttling

[59] Типы в JavaScript: почему вы должны заботиться о них: https://jcemer.com/types-in-javascript-what-you-should-care.html

[60] Нестандартное объяснение JavaScript области видимости переменных на примере уровней в парламенте: https://medium.freecodecamp.org/how-javascript-variable-scoping-is-just-like-multiple-levels-of-government-d7ddabc49bf1

[61] Как сделать жизнь проще с помощью использования функционального программирования в TypeScript: https://medium.freecodecamp.org/how-to-make-your-life-easier-using-functional-programming-in-typescript-a2def76c468b

[62] Изучите, как обрабатывать ошибки в JavaScript с помощью Try, Throw, Catch, & Finally: https://codeburst.io/learn-how-to-handle-javascript-errors-with-try-throw-catch-finally-83b4f9ef8c6f

[63] Прогрессивная миграция с AngularJS на Vue.js в Unbabel: https://medium.com/unbabel-dev/progressively-migrating-from-angularjs-to-vue-js-at-unbabel-581eb4ae022d

[64] Прогрессивное веб-приложение с помощью Vue JS, Webpack & Material Design: https://medium.com/@kevinj_50886/a-progressive-web-application-with-vue-js-webpack-material-design-part-4-96c8c216810b

[65] Как я начал использовать Vue: https://medium.com/@marcusbalbi/how-i-started-using-vue-905d5e4de0c7

[66] Основы React: всё, что нужно знать для начала работы: https://habrahabr.ru/company/ruvds/blog/343022/

[67] Бесплатные лекции по продвинутому React.js: https://cdb.reacttraining.com/free-advanced-react-js-lectures-a9fdcad008f3

[68] Как значительно улучшить производительность приложения на React : https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6

[69] bemto-components: http://kizu.ru/bemto-components/

[70] Издержки производительности при серверном рендеринге React на Node.js: https://malloc.fi/performance-cost-of-server-side-rendered-react-node-js

[71] Использование Angular компонентов со сторонними библиотеками : https://netbasal.com/using-angular-components-with-third-party-libraries-522a1f33003

[72] Взгляд на Angular через призму Vue — знакомый код : https://johnpapa.net/a-look-at-angular-alongside-vue-3/

[73] Как сделать компонент загрузки приложения Angular с помощью Angular CLI: https://medium.com/@tomastrajan/how-to-style-angular-application-loading-with-angular-cli-like-a-boss-cdd4f5358554

[74] Angular 5 Service Worker: https://codingthesmartway.com/angular-5-service-worker/

[75] “React лучше, чем Angular” и другой бред: https://medium.com/@michelestieven/react-is-better-than-angular-and-other-nonsense-6ff752161cfd

[76] Scrollama: https://github.com/russellgoldenberg/scrollama

[77] Chartkick: https://www.chartkick.com/react

[78] imaskjs: https://unmanner.github.io/imaskjs/

[79] raspchat: https://github.com/maxpert/raspchat

[80] z: https://z-pattern-matching.github.io/

[81] AWS Amplify: https://github.com/aws/aws-amplify

[82] Улучшение отладчика и расширение WebExtensions API: что нового для разработчиков в Firefox 58: https://tproger.ru/news/firefox-58-dev-features/

[83] В Firefox планируют выводить предупреждение при посещении ранее взломанных сайтов: http://www.opennet.ru/opennews/art.shtml?num=47616

[84] Хотите получать новости первым?: http://telegra.ph/Hotite-poluchat-novosti-pervym-11-21

[85] Ваш первый (Web)extension для Firefox, написанный на Kotlin: https://medium.com/@Cypressious/your-first-firefox-web-extension-in-kotlin-348fc907915

[86] Сравнение скорости загрузки страниц в браузере: введение в методологию: https://hacks.mozilla.org/2017/11/comparing-browser-page-load-time-an-introduction-to-methodology/

[87] Анализ степени дублирования кода на GitHub: http://www.opennet.ru/opennews/art.shtml?num=47596

[88] GitHub получил функцию командных обсуждений: https://tproger.ru/news/github-team-discussions/

[89] Quartz: Google собирает данные о местоположении пользователей Android: https://tproger.ru/news/google-collects-android-geolocation/

[90] Бывший глава китайского подразделения Google: работа, требующая социальных навыков, в будущем выйдет на первый план: https://itc.ua/blogs/byivshiy-glava-kitayskogo-podrazdeleniya-google-rabota-trebuyushhaya-sotsialnyih-navyikov-v-budushhem-vyiydet-na-pervyiy-plan/

[91] 11 оптических иллюзий в интерфейсах: https://vc.ru/29422-11-opticheskih-illyuziy-v-interfeysah

[92] Где найти последние места без интернета: https://ain.ua/2017/11/26/gde-najti-poslednie-mesta-bez-interneta

[93] Программисты на пути к очередному пузырю?: https://medium.com/@TebbaVonMathenstien/are-programmers-headed-toward-another-bursting-bubble-528e30c59a0e

[94] Миф о взаимозаменямости разработчиков: https://hackernoon.com/the-myth-of-the-interchangeable-developer-38d41aff563e

[95] Дайджест за прошлую неделю: https://habrahabr.ru/company/zfort/blog/342740/

[96] dersmoll: http://habrahabr.ru/users/dersmoll/

[97] alekskorovin: http://habrahabr.ru/users/alekskorovin/

[98] Источник: https://habrahabr.ru/post/343238/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Нажмите здесь для печати.