Дайджест свежих материалов из мира фронтенда за последнюю неделю №286 (23 — 29 октября 2017)

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

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

Медиа

• podcast Подкаст «Веб-стандарты», Выпуск №91: Новинки браузеров, общая документация на MDN, ошибки верстальщиков, дизайнеры учатся кодить, харассмент. ^[7]
• podcast Подкаст «Фронтенд Юность (18+)» #24 Революционный фреймворк, который мы заслужили ^[8]
• podcast Подкаст «devschacht»: Ночной фронтенд #8 — Из огня да в полымя ^[9]
• podcast Подкаст «Drinkcast», Выпуск #14: «Ментор успеха залог твоего» ^[10]
• video «ALL YOUR HTML» #20: «Рисуем эффекты на PIXI и его фильтрах (ака шейдерах), и немного про gulp sass» ^[11]
• video WSD в Минске 2017 ^[12], запись трансляции
• video 11 видео с Krasnodar Dev Days #2 ^[13]
• video 23 видео с Chrome Dev Summit 2017 ^[14]

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

• habr W3C или WHATWG ^[15]. Есть две спецификации HTML: W3C и WHATWG, какой из них верить?
• habr Адаптивные email-письма без боли и страданий ^[16]
• habr Прототипирование на продакшн-технологиях ^[17]
• Веб-компоненты: долгая игра ^[18]
• Bootstrap 4: все что вам нужно знать ^[19]
• Я посмотрел все видео с Chrome Dev Summit, так что можете этого не делать ^[20]: там было несколько анонсов и много PWA евангелизма
• Этикет код-ревью ^[21]
• Полное руководство по элементам, которые могут быть в секции <head> ^[22]
• Разрыв между основами веба и новыми технологиями ^[23] — от очарования новыми фреймворками до обесценивания CSS
• Подборка шпаргалок для эры современного фронтенда ^[24]

AMP/PWA:
• WordPress + PWAs = (видео с Chrome Dev Summit 2017) ^[25]
• Что такое Прогрессивные Веб-приложения? ^[26]

Инструменты:
• Прощание с Firebug ^[27]
• Знакомство с sonar — новым инструментом для анализа сайта и линтинга от Microsoft ^[28]
• HEML ^[29] — опенсорсный язык разметки для создания отзывчивых email-писем

Производительность:
• Можете ли вы себе позволить это? Бюджеты производительности в реальном мире ^[30]
• Влияет ли скорость загрузки страниц на SEO? (спойлер: да) ^[31]
• Беспроигрышные рекомендации по повышению производительности и безопасности сайтов: HTTP/2, SSL, Brotli, CDN, WebP ^[32]
• Оптимизируем изображения для уменьшения веса страницы: форматы файлов, инструменты и RWD ^[33]
• Как получить 100/100 в Google Page Speed Score с помощью Middleman и Nginx? ^[34]
• Скорость по умолчанию: лучшие современные практики загрузки страниц (доклад с Chrome Dev Summit 2017) ^[35]
• Графические метрики производительности скоро появится в Chrome DevTools ^[36]

Accessibility:
• Как помочь слепым на вашем сайте ^[37]
• Не используйте ARIA Menu Roles для навигации по сайту ^[38]
• Хватит создавать сайты только для 85% пользователей: принципы доступности в дизайне ^[39]
• Схлопывающиеся секции ^[40] — реализация современного аккордиона с учетом доступности
• Полное руководство по Alt-текстам ^[41]

Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #59 ^[42]
• SVG волны с помощью feDisplacementMap ^[43]

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

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

Автор: alexzfort

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

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] Выпуск №91: Новинки браузеров, общая документация на MDN, ошибки верстальщиков, дизайнеры учатся кодить, харассмент.: https://medium.com/web-standards/episode-91-776e6551a438

[8] #24 Революционный фреймворк, который мы заслужили : https://soundcloud.com/frontend_u/e24

[9] Ночной фронтенд #8 — Из огня да в полымя: https://medium.com/devschacht/nightly-8-4bd19ee41b97

[10] Выпуск #14: «Ментор успеха залог твоего»: http://spb-frontend.ru/podcast/14/

[11] «Рисуем эффекты на PIXI и его фильтрах (ака шейдерах), и немного про gulp sass»: https://www.youtube.com/watch?v=8DH13eslS3U

[12] WSD в Минске 2017: https://www.youtube.com/watch?v=LmG1KxKcevE

[13] 11 видео с Krasnodar Dev Days #2: https://www.youtube.com/playlist?list=PL1irPRp3Ng9Y_7ZqXAKGUJCdvW-BLOZUN

[14] 23 видео с Chrome Dev Summit 2017: https://www.youtube.com/watch?v=RJiWKaYtzKk&list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m

[15] W3C или WHATWG: https://habrahabr.ru/company/htmlacademy/blog/339854/

[16] Адаптивные email-письма без боли и страданий: https://habrahabr.ru/company/englishdom/blog/340852/

[17] Прототипирование на продакшн-технологиях: https://habrahabr.ru/company/yamoney/blog/341028/

[18] Веб-компоненты: долгая игра: http://css-live.ru/articles/veb-komponenty-dolgaya-igra.html

[19] Bootstrap 4: все что вам нужно знать: https://medium.freecodecamp.org/bootstrap-4-everything-you-need-to-know-c750991f6784

[20] Я посмотрел все видео с Chrome Dev Summit, так что можете этого не делать: https://redfin.engineering/i-watched-all-of-the-chrome-dev-summit-2017-videos-so-you-dont-have-to-9b62a593c3cb

[21] Этикет код-ревью: https://css-tricks.com/code-review-etiquette/

[22] Полное руководство по элементам, которые могут быть в секции <head>: http://gethead.info/

[23] Разрыв между основами веба и новыми технологиями: https://zendev.com/2017/10/24/the-web-fundamentals-gap.html

[24] Подборка шпаргалок для эры современного фронтенда: https://medium.com/@wesharehoodies/modern-frontend-hacking-cheatsheets-df9c2566c72a

[25] WordPress + PWAs = (видео с Chrome Dev Summit 2017): https://www.youtube.com/watch?v=Di7RvMlk9io

[26] Что такое Прогрессивные Веб-приложения?: https://codeburst.io/what-is-progressive-web-app-and-why-should-you-care-e397e24b1257

[27] Прощание с Firebug: https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/

[28] Знакомство с sonar — новым инструментом для анализа сайта и линтинга от Microsoft: https://blogs.windows.com/msedgedev/2017/10/25/introducing-sonar-site-scanner/

[29] HEML: https://heml.io/

[30] Можете ли вы себе позволить это? Бюджеты производительности в реальном мире: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

[31] Влияет ли скорость загрузки страниц на SEO? (спойлер: да) : https://www.machmetrics.com/speed-blog/fast-page-speed-increase-seo/

[32] Беспроигрышные рекомендации по повышению производительности и безопасности сайтов: HTTP/2, SSL, Brotli, CDN, WebP : https://www.smashingmagazine.com/2017/10/improving-performance-security/

[33] Оптимизируем изображения для уменьшения веса страницы: форматы файлов, инструменты и RWD : https://blog.dareboost.com/en/2017/10/optimize-images-to-reduce-page-weight-file-formats-tools-and-rwd/

[34] Как получить 100/100 в Google Page Speed Score с помощью Middleman и Nginx?: https://elliotec.com/how-to-get-100-google-page-speed-score/

[35] Скорость по умолчанию: лучшие современные практики загрузки страниц (доклад с Chrome Dev Summit 2017): https://www.youtube.com/watch?v=_srJ7eHS3IM&feature=youtu.be

[36] Графические метрики производительности скоро появится в Chrome DevTools: https://twitter.com/_developit/status/922881333268848640

[37] Как помочь слепым на вашем сайте: http://weblind.ru/

[38] Не используйте ARIA Menu Roles для навигации по сайту: http://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html

[39] Хватит создавать сайты только для 85% пользователей: принципы доступности в дизайне: https://www.smashingmagazine.com/2017/10/nailing-accessibility-design/

[40] Схлопывающиеся секции: https://inclusive-components.design/collapsible-sections/

[41] Полное руководство по Alt-текстам: https://axesslab.com/alt-texts/

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

[43] SVG волны с помощью feDisplacementMap: https://codepen.io/enxaneta/post/svg-waves-with-fedisplacementmap

[44] Объясняем современный JavaScript динозавру: https://habrahabr.ru/company/mailru/blog/340922/

[45] Ну что, можно уже использовать CSS-переменные?: http://css-live.ru/articles/nu-chto-mozhno-uzhe-ispolzovat-css-peremennye.html

[46] Критический CSS + прогрессивный CSS = ?: https://medium.com/web-standards/critical-and-progressive-css-d6611f034d7d

[47] Выдержка из книги «The New CSS Layout» от Rachel Andrew: https://alistapart.com/article/the-new-css-layout-excerpt

[48] Reboot, Resets и размышления Криса Койера на эту тему: https://css-tricks.com/reboot-resets-reasoning/

[49] Разблокирование преимуществ CSS переменных: https://jonathan-harrell.com/unlocking-benefits-css-variables/

[50] Успех с CSS: https://medium.com/samsung-internet-dev/success-with-css-33215f481422

[51] Эксперименты со спецификацией CSS Houdini: http://lab.iamvdo.me/houdini/

[52] Песочница, где можно поиграться с вариативными шрифтами: http://www.axis-praxis.org/

[53] Vibe.js — попытка сделать state management без боли: https://habrahabr.ru/post/341126/

[54] Создание HTML веб-компонентов используя ванильный JavaScript: https://ayushgp.github.io/html-web-components-using-vanilla-js/

[55] Линейная алгебра в JavaScript с операциями с матрицей: https://www.robinwieruch.de/linear-algebra-matrix-javascript/

[56] ES6: аргументы по умолчанию: https://remysharp.com/2017/10/25/es6-default-arguments

[57] Памятка по современному JavaScript: https://github.com/mbeaudru/modern-js-cheatsheet/blob/master/translations/ru-RU.md

[58] В чем разница между JavaScript и ECMAScript?: https://medium.freecodecamp.org/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5

[59] Ответы на 12 основных вопросов JavaScript: http://www.creativebloq.com/features/12-common-javascript-questions-answered

[60] Ember.js: отличный фреймворк для веб-приложений: https://habrahabr.ru/company/ruvds/blog/341076/

[61] Сравнение CLI в JavaScript фреймворках: https://getstream.io/blog/javascript-framework-cli-showdown/

[62] 3+ года с Ember, 6 месяцев с React: https://blog.kollegorna.se/3-years-of-ember-6-months-of-react-34ce909a5ce1

[63] БЭМ + React: гибкая архитектура дизайн-системы: https://habrahabr.ru/company/alfa/blog/340522/

[64] Cerebral 2: https://medium.com/devschacht/cristian-alfoni-cerebral-2-275c338f62d4

[65] Релиз React 16: что нового?: https://auth0.com/blog/whats-new-in-react16/

[66] Что делает Redux? (и когда вы должны его использовать?): https://daveceddia.com/what-does-redux-do/

[67] Как мне понять, что я готов к Redux?: https://medium.com/@simon.schwartz0/when-do-i-know-im-ready-for-redux-f34da253c85f

[68] Удивите своих друзей с помощью разделения кода в React: https://hackernoon.com/impress-your-friends-with-code-splitting-in-react-9f9a3ca2ae6e

[69] Создание переходов и анимаций в Vue.js : https://css-tricks.com/creating-vue-js-transitions-animations/

[70] Продвинутые концепты Vue.js: миксины, кастомные директивы, фильтры, переходы и менеджмент состояния: https://blog.logrocket.com/advanced-vue-js-concepts-mixins-custom-directives-filters-transitions-and-state-management-ca6955905156

[71] SEO для Vue.js SPA: Prerender & Server-Side Rendering: https://www.youtube.com/watch?v=HWDcSRHBC9M

[72] Element: http://element-cn.eleme.io/#/en-US

[73] Создание схлопывающегося дерева меню с помощью рекурсивных компонентов Vue.js: https://vuejsdevelopers.com/2017/10/23/vue-js-tree-menu-recursive-components/

[74] Создание Lazy-Load роутера с помощью Vue.js и последних браузерных технологиях: https://vuejsdevelopers.com/2017/10/30/vue-js-dynamic-imports-lazy-load/

[75] Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 1: https://tproger.ru/translations/javascript-based-animation-part-1/

[76] Light-Modal: https://hunzaboy.github.io/Light-Modal/#

[77] Физика в JavaScript с помощью Matter.js: http://codersblock.com/blog/javascript-physics-with-matter-js/

[78] Mozilla добавит поддержку смешанной реальности в браузеры: https://tproger.ru/news/mozilla-webxr-api/

[79] Mozilla планирует протестировать в Firefox возможности Lockbox, Tabsplit, ThemesRfun и Foxy: http://www.opennet.ru/opennews/art.shtml?num=47459

[80] Добавляйте PWA на ваш домашний экран в Firefox под Android: https://hacks.mozilla.org/2017/10/progressive-web-apps-firefox-android/

[81] Как устроен Ethereum и смарт-контракты: http://vas3k.ru/blog/ethereum/

[82] 7 SEO-трендов, за которыми стоит наблюдать в 2018 году: https://www.searchengines.ru/seo-trends-2018.html

[83] Как Booking.com заставляет вас принимать решения: https://ain.ua/2017/10/25/kak-booking-com-ispolzuet-stress

[84] Где обучиться профессиям, которые появятся в ближайшем будущем: https://vc.ru/27970-gde-obuchitsya-professiyam-kotorye-poyavyatsya-v-blizhayshem-budushchem

[85] Машинное обучение в Google или как искусственный интеллект делает сервисы компании и жизнь людей лучше: https://itc.ua/articles/mashinnoe-obuchenie-v-google-ili-kak-iskusstvennyiy-intellekt-delaet-servisyi-kompanii-i-zhizn-lyudey-luchshe/

[86] Интересные GitHub-проекты: «змейка» для терминала, работающая на этапе компиляции: https://tproger.ru/articles/cpp-compile-time-snake/

[87] Microsoft показала как создают голограммы к Mixed Reality: https://tjournal.ru/60978-microsoft-pokazala-kak-sozdayut-gologrammy-k-mixed-reality

[88] Adobe делает жизнь проще с новыми инструментами на базе ИИ: http://gagadget.com/announce/29543-adobe-delaet-zhizn-prosche-snovyimi-instrumentami-nabaze-ii/

[89] Каково это быть разработчиком в …: https://increment.com/development/what-its-like-to-be-a-developer-at/

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

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

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

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