Дайджест свежих материалов из мира фронтенда за последние две недели №220 (11 — 24 июля 2016)

---

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

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

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

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

[2] CSS: #css

[3] Javascript: #js

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

[5] Новости и занимательное: #intresting

[6] Сражаясь с БЭМ: 10 основных ошибок и как их избежать: https://habrahabr.ru/post/305548/

[7] Эффективное использование Github: https://habrahabr.ru/company/2gis/blog/306166/

[8] Развертывание с GitHub на сервер: http://prgssr.ru/development/razvertyvanie-s-github-na-server.html

[9] Часть 2: Плохой путь: https://medium.com/russian/frontend-dev-%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B9-%D0%BF%D0%BB%D0%BE%D1%85%D0%BE%D0%B9-%D0%B7%D0%BB%D0%BE%D0%B9-%D1%87%D0%B0%D1%81%D1%82%D1%8C-2-%D0%BF%D0%BB%D0%BE%D1%85%D0%BE%D0%B9-%D0%BF%D1%83%D1%82%D1%8C-aa99f3ce376

[10] Часть 3: Злой путь: https://medium.com/russian/frontend-dev-%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B9-%D0%BF%D0%BB%D0%BE%D1%85%D0%BE%D0%B9-%D0%B7%D0%BB%D0%BE%D0%B9-%D1%87%D0%B0%D1%81%D1%82%D1%8C-3-%D0%B7%D0%BB%D0%BE%D0%B9-%D0%BF%D1%83%D1%82%D1%8C-5a4ec66fd457

[11] Подкаст Веб-стандарты, Выпуск №25: https://soundcloud.com/web-standards/episode-25

[12] Изучаем и отлаживаем webpack с помощью Chrome Dev Tools: https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554

[13] Доступные компоненты пользовательского интерфейса для веба: https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67

[14] Создание mobile-first шаблона письма, пошаговое руководство: https://medium.com/cm-engineering/coding-mobile-first-emails-1513ac4673e

[15] Знаете что? Нахрен дропдауны: http://www.fuckdropdowns.com/

[16] Добавляем сервис-воркер на простой сайт, который хостится на Github pages и Cloudflare: https://rossta.net/blog/adding-serviceworker-to-a-simple-website.html

[17] ServiceWorker: базовое руководство по BackgroundSync: https://ponyfoo.com/articles/backgroundsync

[18] Жизненный цикл сервис-воркеров: https://bitsofco.de/the-service-worker-lifecycle/

[19] Улучшения стандарта MathML в WebKit: http://frederic-wang.fr/mathml-improvements-in-webkit.html

[20] Настоящий мир HTTP/2: загрузка 400gb изображений в день: https://99designs.com/tech-blog/blog/2016/07/14/real-world-http-2-400gb-of-images-per-day/

[21] Автостопом по галактике современной фронтенд разработки: http://marcobotto.com/the-hitchhikers-guide-to-the-modern-front-end-development-workflow/

[22] Плюсы для производительности при использовании rel=noopener: https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/

[23] Руководства от Microsoft по REST API : https://github.com/Microsoft/api-guidelines/blob/master/Guidelines.md

[24] Исчерпывающее руководство по стратегиям загурзки нестандартных шрифтов : https://www.zachleat.com/web/comprehensive-webfonts/

[25] Насколько Pony Foo перемудрен — и почему это реально круто: https://ponyfoo.com/articles/most-over-engineered-blog-ever

[26] Поддержка WebP – более широкая чем ты думаешь: https://optimus.keycdn.com/support/webp-support/

[27] Практические примеры использования элемента picture: http://coreybruyere.com/practical-use-cases-for-the-picture-element/

[28] HyperTerm — JS/HTML/CSS терминал: https://hyperterm.org/

[29] Эффектный интерактив для маркера на карте: http://tympanus.net/codrops/2016/07/20/simple-interactive-points-effect/

[30] Оформление модальных окон: http://prgssr.ru/development/oformlenie-modalnyh-okon.html

[31] Considerations for Styling a Modal: https://css-tricks.com/considerations-styling-modal/

[32] Трюки с псевдоклассом :target: http://prgssr.ru/development/tryuki-s-psevdoklassom-target.html

[33] The :target Trick: https://bitsofco.de/the-target-trick/

[34] Как линтовать ваш Sass/CSS правильно с помощью Stylelint: http://www.master-web.info/kak-lintovat-vash-sass-css-stylelint/

[35] How to lint your Sass/CSS properly with Stylelint: http://www.creativenightly.com/2016/02/How-to-lint-your-css-with-stylelint/

[36] Как линтить SCSS с помощью stylelint: https://medium.com/@bjankord/how-to-lint-scss-with-stylelint-dc87809a9878

[37] Как веб-компоненты изменят архитектуру CSS: https://snook.ca/archives/html_and_css/will-web-components-change-css

[38] В поисках святого грааля: как я покончил с Element Queries и как вы можете использовать их сегодня: https://www.smashingmagazine.com/2016/07/how-i-ended-up-with-element-queries-and-how-you-can-use-them-today/

[39] 4 способа реализации sticky hover эффекта для мобильных устройств: http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml

[40] Год, проведенный с PostCSS: https://medium.com/@mihaeltomic/a-year-with-postcss-f5c2c7ebe645

[41] Тестирование визуальных регрессий с помощью PhantomCSS: https://www.sitepoint.com/visual-regression-testing-with-phantomcss/

[42] Новости и текущее состояние стандрта CSS Grid Layout: https://www.rachelandrew.co.uk/archives/2016/07/14/css-grid-updates-changes-and-state-of-the-browsers/

[43] БЭМ и Atomic Design: CSS архитектура, которую стоит любить: https://www.lullabot.com/articles/bem-atomic-design-a-css-architecture-worth-loving

[44] Эффекты с CSS фильтрами: размытие, ч/б, яркость и многое другое: https://www.sitepoint.com/css-filter-effects-blur-grayscale-brightness-and-more-in-css/

[45] Ограничения медиа запроса supports: http://www.quirksmode.org/blog/archives/2016/07/the_limits_of_s.html

[46] Работа со строками в Sass: http://vanseodesign.com/css/sass-strings/

[47] Создание клевой CSS анимации для улучшения производительности фронтенда : http://codepen.io/udyux/post/cool-css-animations-frontend-perf

[48] Адаптация к полям ввода: http://alistapart.com/article/adapting-to-input

[49] Разбор позиционирование в CSS: мастер-класс с Paul O’Brien: https://www.sitepoint.com/decoding-css-positioning/

[50] Стили для печати с Rachel Andrew: https://www.sitepoint.com/translating-css-paged-media-rachel-andrew/

[51] Jets.js — нативный движок CSS поиска: https://jets.js.org/

[52] JavaScript снова возглавляет список наиболее популярных языков программирования: https://arc.applause.com/2016/07/22/javascript-popularity-redmonk-rankings/

[53] 9 видео с конференции OdessaJS 2016: https://www.youtube.com/playlist?list=PLUF1zRLAgrPET1qRvSeKCraJxsjHZUSjw

[54] Прогрессивная загрузка современных веб-приложений через разделение кода: https://medium.com/@lavrton/progressive-loading-for-modern-web-applications-via-code-splitting-fb43999735c6

[55] Миф о «настоящем JavaScript разработчике»: https://www.youtube.com/watch?v=Xt5qpbiqw2g

[56] Почему литералы объекта в JavaScript — стоящая вещь: https://rainsoft.io/why-object-literals-in-javascript-are-cool/

[57] Настройка кросс-браузерного JS юнит-тестирования: https://philipwalton.com/articles/learning-how-to-set-up-automated-cross-browser-javascript-unit-testing/

[58] Альтернатива регулярным выражениям: apg-exp: https://www.sitepoint.com/alternative-to-regular-expressions/

[59] ES6 по-человечески: https://habrahabr.ru/post/305900/

[60] Стрелочный ад, или новый круг старой проблемы: https://habrahabr.ru/post/305398/

[61] Литералы шаблонов в ES6: техники и инструменты: https://www.sitepoint.com/es6-template-literals-techniques-and-tools/

[62] Const или Let?: http://ilikekillnerds.com/2016/07/const-let-lets-talk-javascript/

[63] Детали о свойствах ES2016, о которых вы должны знать : https://rainsoft.io/must-know-details-about-es2016-features/

[64] 6 вариантов использования ES6 прокси: http://devbryce.com/use-cases-for-es6-proxies/

[65] Как использовать аргументы и параметры в ECMAScript 6: https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters-in-ecmascript-6/

[66] 5 причин, по которым вы должны использовать промисы: http://blog.runnable.com/post/147262856601/5-reasons-why-you-should-be-using-promises

[67] Наиболее детальное рассмотрение ES6 Destructuring: http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/

[68] Чистый код с ES6 параметрами по умолчанию и сокращениями свойств: https://www.sitepoint.com/es6-default-parameters/

[69] Использование новых коллекций ES6: Map, Set, WeakMap, WeakSet: https://www.sitepoint.com/using-the-new-es6-collections-map-set-weakmap-weakset/

[70] Использование ES6 генераторов и Yield для реализации асинхронных процессов в JavaScript: http://www.bennadel.com/blog/3123-using-es6-generators-and-yield-to-implement-asynchronous-workflows-in-javascript.htm

[71] JavaScript промисы 101: https://bitsofco.de/javascript-promises-101/

[72] Порталы в React.js: https://habrahabr.ru/company/smartprogress/blog/306096/

[73] React.js в паттернах: http://krasimirtsonev.com/blog/article/react-js-in-design-patterns

[74] Как работать со state в React. Недостающий FAQ.: https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c

[75] Начинаем работать с Redux: введение: https://scotch.io/bar-talk/getting-started-with-redux-an-intro

[76] Техники прогрессивного улучшения с помощью React, ч.1: https://medium.com/@jacobp/progressive-enhancement-techniques-for-react-part-1-7a551966e4bf

[77] Три простых шага для улучшения React Redux кода: https://www.ckl.io/blog/3-simple-steps-to-improve-react-redux-code/

[78] Создание шаблонов для писем с React компонентами: https://assertible.com/blog/creating-email-templates-with-react-components

[79] Как работать с элементами форм в Angular 2: https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

[80] Мобильные JS приложения: рассвет React Native: http://thefullstack.xyz/react-native/

[81] AngularJS vs. Ember.js: какой JavaScript фреймворк будет для вас лучшим?: http://www.business2community.com/brandviews/upwork/angularjs-vs-ember-js-javascript-framework-best-01568771

[82] Начинаем работать с Vue.js: https://www.sitepoint.com/getting-started-with-vue-js/

[83] Рассмотрите на VueJS для вашего следующего веб-проекта: https://blog.codeship.com/consider-vuejs-next-web-project/

[84] Бесплатный онлайн-тренинг по Angular 2 16-17го августа : http://go.rangle.io/angular-2-online-training

[85] SPA с AngularJS и WordPress REST API: https://www.sitepoint.com/angularjs-wordpress-rest-api/

[86] Создание приложения для знакомств на базе компонентов с Angular 1.5: http://blog.grossman.io/angular-1-component-based-architecture-2/

[87] Создание приложения в VueJS 2: https://auth0.com/blog/2016/07/14/create-an-app-in-vuejs-2/

[88] Создание приложения для потоковой музыки с Electron, React и ES6: https://www.sitepoint.com/music-streaming-app-electron-react-es6/

[89] Учимся создавать визуализации данных с D3.js на примере: https://www.sitepoint.com/d3-js-data-visualizations/

[90] howlerjs — библиотека для работы с аудио в современном вебе: https://howlerjs.com/

[91] Cleave.js: http://nosir.github.io/cleave.js/

[92] allora — промисы, использующие ES6 прокси для каждого JS API: https://github.com/GianlucaGuarini/allora

[93] Dio — легковесный (~6kb) фреймворк с Virtual DOM.: https://github.com/thysultan/dio.js

[94] Aquarelle — JS для реализации эффекта растекания акварельной краски: https://github.com/Ramotion/aquarelle

[95] В Firefox 48 начнётся интеграция компонентов на языке Rust: http://www.opennet.ru/opennews/art.shtml?num=44776

[96] Firefox переходит к блокировке некоторых видов Flash-контента: http://www.opennet.ru/opennews/art.shtml?num=44818

[97] Выпуск web-браузера Chrome 52: http://www.opennet.ru/opennews/art.shtml?num=44822

[98] Microsoft рекомендует использовать браузер Microsoft Edge из-за его энергоэффективности: http://microsoftportal.net/windows-9/7329-microsoft-rekomenduet-ispolzovat-brauzer-microsoft-edge-iz-za-ego-energoeffektivnosti.html

[99] Что повлечет за собой покупка китайским консорциумом компании Opera Software?: http://keddr.com/2016/07/chto-povlechet-za-soboy-pokupka-kitayskim-konsortsiumom-kompanii-opera-software/

[100] ChromeLens: http://chromelens.xyz/

[101] Топ 12 инструметов для тестирования браузерной совместимости: https://www.keycdn.com/blog/browser-compatibility-testing-tools/

[102] Детали релиза Safari Technology Preview Release 9: https://webkit.org/blog/6800/release-notes-for-safari-technology-preview-release-9/

[103] Ōryōki: http://oryoki.io/

[104] Apple планирует внедрять WebP для повышения скорости сайтов: http://www.cnet.com/news/apple-ios-macos-tests-googles-webp-graphics-to-speed-up-web/

[105] Stack Overflow запускает самое большое нововведение с момента старта всего проекта — документации: https://tproger.ru/news/stack-overflow-documentation/

[106] В Китае запрещают блокировщики рекламы: http://itc.ua/blogs/v-kitae-zapreshhayut-blokirovshhiki-reklamyi/

[107] В ближайшем крупном обновлении Windows 10 появится режим разработчика: https://tproger.ru/news/developers-mode-windows-10/

[108] Google задействовала машинное обучение для удобства чтения комиксов: http://www.3dnews.ru/936600/

[109] Падение продаж Apple Watch потянуло вниз весь рынок «умных» часов: http://www.3dnews.ru/936589

[110] Капча CloudFlare может применяться для деанонимизации пользователей Tor: http://www.opennet.ru/opennews/art.shtml?num=44814

[111] Спрос на технарей упал на 40%, но никто не говорит об этом: http://ain.ua/2016/07/24/660823

[112] Основой SEO-рынка продолжает оставаться обман: https://www.searchengines.ru/osnova-seo-rynka-obman.html

[113] Бум нейросетей: Кто делает нейронные сети, зачем они нужны и сколько денег могут приносить: https://vc.ru/p/neural-networks

[114] 5 медицинских тенденций будущего: https://vc.ru/p/med-tech

[115] 108 задач с IT-собеседований с разбором решений: https://tproger.ru/articles/problems/

[116] Десять предсказаний о будущем, которые напугают вас до смерти: http://www.3dnews.ru/936219

[117] Покемономания: Кто и как зарабатывает на игре Pokémon Go: http://secretmag.ru/longread/2016/07/15/pokemon-go-profit/

[118] Когнитивные искажения. То, что нужно знать всем: http://itc.ua/stati/kognitivnyie-iskazheniya-to-chto-nuzhno-znat-vsem/

[119] Хватит учиться писать код – лучше учитесь анализировать данные: http://ain.ua/2016/07/18/659916

[120] 7 законов робототехники Сатья Наделлы: http://keddr.com/2016/07/7-zakonov-robototehniki-satya-nadellyi/

[121] Где и как задействуют нейронные сети: http://keddr.com/2016/07/gde-i-kak-zadeystvuyut-neyronnyie-seti/

[122] План 2026: Марк Цукерберг об основных направлениях развития Facebook на ближайшие 10 лет: https://vc.ru/p/zuck-2026

[123] Каждый месяц Facebook Messenger пользуется 1 млрд человек: http://gagadget.com/business/22992-kazhdyij-mesyats-facebook-messenger-polzuetsya-1-mlrd-chelovek/

[124] Пора искать замену мобильной версии Skype?: http://keddr.com/2016/07/pora-iskat-zamenu-mobilnoy-versii-skype/

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

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

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

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

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