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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #24 – Вадим Резвый об основании Moscow Coding School, дружбе с президентами, рэпе и индуизме : https://soundcloud.com/frontend-weekend/fw-24

[8] #23 Всё что вы должны знать о функциональщине: https://soundcloud.com/frontend_u/e23

[9] Выпуск #13 — «ООП — это обман»: http://spb-frontend.ru/podcast/13/

[10] «Ласточки в небе под Штрауса»: https://www.youtube.com/watch?v=fU-vywo5BKM

[11] Mozilla, Microsoft, Google, W3C и Samsung унифицируют документацию по Web-технологиям: http://www.opennet.ru/opennews/art.shtml?num=47410

[12] Жизнь фронтендера в Spotify: https://habrahabr.ru/company/2gis/blog/340440/

[13] Ошибки и спорные вопросы в HTML-CSS вёрстке: http://nicothin.pro/page/oshibki-i-spornye-voprosy-v-html-css-vjorstke-3

[14] Front-End-Checklist: http://frontendchecklist.com/

[15] 5 советов перед стартом рефакторинга фронтенда на проекте: https://css-tricks.com/5-tips-starting-front-end-refactor/

[16] Безболезненное введение в API: использование, интеграция и преимущества: https://snipcart.com/blog/apis-integration-usage-benefits

[17] Миграция в сторону Yarn и Webpack: http://engineering.wingify.com/posts/migrating-towards-yarn-webpack/

[18] Как бы я объяснил десятилетие веб-разработки путешественнику во времени из 2007-го: https://medium.freecodecamp.org/web-development-explained-to-a-time-traveler-from-ten-years-ago-600fad81170d

[19] #1 цвета и контраст: https://blog.prototypr.io/accessible-components-colors-and-contrast-5e03a67d2383

[20] #2 динамические метки ARIA: https://blog.prototypr.io/accessible-components-2-dynamic-aria-labels-6bf281f26d17

[21] Проекту AMP 2 года, Automattic взаимодействует с Google для улучшения WordPress-плагина: http://oddstyle.ru/wordpress-2/wordpress-plaginy/proektu-amp-2-goda-automattic-vzaimodejstvuet-s-google-dlya-uluchsheniya-wordpress-plagina.html

[22] AMP: два года страницам, ориентированным на пользователя: https://amphtml.wordpress.com/2017/10/19/amp-two-years-of-user-first-webpages/amp/

[23] Аргументы для AMP: уроки из десяти практических примеров: https://www.stonetemple.com/the-canonical-guide-to-amp/

[24] Советы по работе с Progressive Web Apps в DevTools: https://www.raymondcamden.com/2017/10/17/devtools-tips-for-pwas/

[25] Как отлаживать Progressive Web Apps с помощью браузерных инструментов: https://medium.freecodecamp.org/how-to-debug-progressive-web-apps-using-browser-developer-tools-bad1cd3db784

[26] Весь веб на 60+ FPS: как новый рендерер в Firefox избавился от рывков и подтормаживаний: https://habrahabr.ru/post/340176/

[27] Погодите, а WebP вообще-то ничего!: https://medium.com/web-standards/webp-worth-it-fc08e230f46e

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

[29] Первый взгляд на “GSDevTools” от GreenSock: https://webdesign.tutsplus.com/tutorials/a-first-look-at-gsdevtools-by-greensock--cms-29531

[30] Эффект отображения оверлея с помощью динамических форм на SVG: https://tympanus.net/codrops/2017/10/17/dynamic-shape-overlays-with-svg/

[31] Бесшовный цикл для анимации SVG stroke: https://codepen.io/PointC/post/seamless-loop-svg-stroke-animations

[32] Интересный эффект растекания капель на CSS: https://codepen.io/YusukeNakaya/pen/ZXmEPJ

[33] Metaballs: http://varun.ca/metaballs/

[34] Как фокус помогает: https://habrahabr.ru/company/htmlacademy/blog/339852/

[35] Организация отступов в верстке (margin/padding): https://habrahabr.ru/post/340420/

[36] Взгляд назад на историю CSS: https://css-tricks.com/look-back-history-css/

[37] Prettier + Stylelint: написание очень чистого CSS: https://css-tricks.com/prettier-stylelint-writing-clean-css-keeping-clean-code-two-tool-game/

[38] Итак, можем ли мы уже использовать CSS переменные?: https://www.webdesignerdepot.com/2017/10/so-can-we-use-css-variables-yet/

[39] CSS Box Shadow vs. Drop Shadow: https://css-tricks.com/breaking-css-box-shadow-vs-drop-shadow/

[40] Мой подход к использованию z-index: https://hackernoon.com/my-approach-to-using-z-index-eca67feb079c

[41] Впечатляющая подборка стратегий загрузки веб-шрифтов от Zach Leatherman, с демо и описаниями: https://github.com/zachleat/web-font-loading-recipes

[42] Веб-типографика: цифры в шрифтах: https://alistapart.com/article/web-typography-numerals

[43] Fontisto: http://fontisto.com/

[44] История CSS Grid от его создателей: https://alistapart.com/article/the-story-of-css-grid-from-its-creators

[45] Наименование вещей в CSS Grid Layout: https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/

[46] Что я узнала о лейаутах на CSS Grid: https://vimeo.com/238463263

[47] Часть 1: https://hacks.mozilla.org/2017/10/an-introduction-to-css-grid-layout-part-1/

[48] Часть 2: https://hacks.mozilla.org/2017/10/an-introduction-to-css-grid-layout-part-2/

[49] Почему роботы должны форматировать код за нас: https://habrahabr.ru/company/edison/blog/340304/

[50] Хитрый вопрос по JavaScript, который задают на собеседованиях в Google и Amazon: https://habrahabr.ru/company/ruvds/blog/340194/

[51] Как работает JS: цикл событий, асинхронность и пять способов улучшения кода с помощью async / await: https://habrahabr.ru/company/ruvds/blog/340508/

[52] Первая демонстрация TypeScript: https://habrahabr.ru/company/ruvds/blog/340556/

[53] Современный JavaScript, объясненный для динозавров: https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70?ref=hackingui

[54] Плавильный котел JavaScript: https://increment.com/development/the-melting-pot-of-javascript/

[55] Контроль видимости объекта с помощью Intersection­Observer API: https://jonathan-harrell.com/controlling-element-visibility-intersectionobserver-api/

[56] Ember.js: идеальный фреймворк для веб-приложений: https://www.sitepoint.com/ember-js-perfect-framework-web-applications/

[57] ES6 для начинающих с примерами: https://medium.com/@KucherDev/es6-%D0%B4%D0%BB%D1%8F-%D0%BD%D0%B0%D1%87%D0%B8%D0%BD%D0%B0%D1%8E%D1%89%D0%B8%D1%85-%D1%81-%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B0%D0%BC%D0%B8-3d28884c59d4

[58] Шпаргалка по ES2015+: https://devhints.io/es6

[59] Моки в тестах для кода с душком: https://medium.com/javascript-scene/mocking-is-a-code-smell-944a70c90a6a

[60] Создание чата в реальном времени на VueJS, Vuex & Cloud Firestore: https://vuejsdevelopers.com/2017/10/16/vue-js-firestore/

[61] vue-mc: http://vuemc.io/#introduction

[62] Vue.js + Brunch: The Webpack Alternative You’ve Been Hungry For: https://medium.com/js-dojo/vue-js-brunch-the-webpack-alternative-youve-been-hungry-for-5540bbb03758

[63] 8 ключевых решений в разработке на React: https://habrahabr.ru/company/edison/blog/340264/

[64] Как мы на React 16 переезжали: https://habrahabr.ru/post/339742/

[65] Как структурировать помпоненты в React?: https://reallifeprogramming.com/how-to-structure-components-in-react-54fc43e71546

[66] How to migrate an application from AngularJS to React and Redux: https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa

[67] Топ 12 советов по продуктивной работе с Angular в WebStorm – часть 1: https://www.sitepoint.com/productivity-tips-for-webstorm-and-angular-part-1/

[68] Основы Angular 4: привязка данных: https://medium.com/@nilupul/angular-4-basics-data-binding-57d3c822873f

[69] Скажите привет Schnack.js: https://www.vis4.net/blog/2017/10/hello-schnack/

[70] Знакомство с опенсорсным кроссдоменным javascript пакетом от PayPal: https://medium.com/@bluepnume/introducing-paypals-open-source-cross-domain-javascript-suite-95f991b2731d

[71] accessibilityjs: https://github.com/github/accessibilityjs

[72] Google Chrome 62: добавлена поддержка шрифтов OpenType Variable Fonts, расширены предупреждения HTTP: http://oddstyle.ru/veb-razrabotka/google-chrome-62-dobavlena-podderzhka-shriftov-opentype-variable-fonts-rasshireny-preduprezhdeniya-http.html

[73] Bleeping Computer: Chrome получит функцию блокировки майнинга на сайтах: https://tproger.ru/news/chrome-could-block-web-miners/

[74] Google добавила в браузер Chrome для Windows функции антивируса: https://vc.ru/27614-google-dobavila-v-brauzer-chrome-dlya-windows-funkcii-antivirusa

[75] Google раскритиковала систему обновлений Microsoft. В ответ Microsoft рассказала о RCE-баге в Chrome: https://xakep.ru/2017/10/19/google-microsoft-updates/

[76] Что нового в Microsoft Edge для Windows 10 Fall Creators Update: https://blogs.windows.com/msedgedev/2017/10/17/edgehtml-16-fall-creators-update/

[77] В Firefox Nightly появилась поддержка PWA: https://twitter.com/kennethrohde/status/920676961298649088

[78] Технические детали Safari Technology Preview 42: https://webkit.org/blog/8001/release-notes-for-safari-technology-preview-42/

[79] Microsoft официально выпустила Windows 10 Fall Creators Update: https://vc.ru/27656-microsoft-oficialno-vypustila-windows-10-fall-creators-update

[80] Опубликована подробная информация о проблемах WPA2: https://xakep.ru/2017/10/16/wpa2-krack-2/

[81] Критическая уязвимость в протоколе защиты Wi-Fi WPA2: обзор ситуации: https://tproger.ru/articles/wi-fi-wpa2-krack-attacks/

[82] Как технологические компании отреагировали на новость об уязвимости в Wi-Fi: https://tjournal.ru/60667-how-tech-reacts

[83] GitHub опубликовал статистику за 2017 год: http://www.opennet.ru/opennews/art.shtml?num=47390

[84] Тим Кук: «Лучше изучать код, а не английский, вместо второго языка»: https://ain.ua/2017/10/15/kuk-i-anglijskij

[85] Новые сервисы для майнинга через браузеры появляются как грибы после дождя: https://xakep.ru/2017/10/19/more-mining-scripts/

[86] Как великие инженеры обращаются за помощью: https://hackernoon.com/how-awesome-engineers-ask-for-help-93bcb2c7dbb7

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

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

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

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

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