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

---

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

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

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

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

[2] CSS: #css

[3] Javascript: #js

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

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

[6] Верстка: отображаем пользовательский контент: https://habrahabr.ru/company/docsvision/blog/310544/

[7] Выходит HTML 5.1, готовится HTML 5.2: https://habrahabr.ru/post/310706/

[8] Welcome to HTML 5.2!: http://developer.telerik.com/featured/welcome-to-html-5-2/

[9] Air Berlin: реализация Progressive Web App: https://habrahabr.ru/company/google/blog/308498/

[10] Секреты Progressive Web Apps: часть 1: https://habrahabr.ru/company/google/blog/310454/

[11] Быстрый рендеринг с DOM шаблонизаторами: https://habrahabr.ru/company/oleg-bunin/blog/310868/

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

[13] Как быть начинающим разработчиком и не сойти с ума: http://blog.csssr.ru/2016/09/19/how-to-be-a-beginner-developer/

[14] Руководство по цветам в вебе для «ботаников»: http://css-live.ru/articles/rukovodstvo-po-cvetam-v-vebe-dlya-botanikov.html

[15] URL-encoder для SVG: http://yoksel.github.io/url-encoder/ru/

[16] Доступные SVG в высококонтрастном режиме: https://css-tricks.com/accessible-svgs-high-contrast-mode/

[17] SVG обладает еще большим потенциалом: https://madebymike.com.au/writing/svg-has-more-potential/

[18] Как сгенерировать стайлгайд с помощью Hologram & Gulp: http://blog.thebrickfactory.com/2016/09/generate-style-guide-using-hologram-gulp/

[19] Клиентские подсказки (Client Hints): https://cloudfour.com/thinks/responsive-images-201-client-hints/

[20] Начинаем работать с доступностью в вебе: https://medium.com/@MischaAndrews/developers-get-started-with-web-accessibility-91bd67dea777

[21] Inky и Slinky: https://css-tricks.com/inky-and-slinky/

[22] 12 отличных советов по использованию Chrome DevTools для разработчиков: https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d

[23] Почему мы использовали прогрессивное улучшение при создании GOV.UK: https://gdstechnology.blog.gov.uk/2016/09/19/why-we-use-progressive-enhancement-to-build-gov-uk/

[24] PPK: Web development as a hack of hacks: http://www.quirksmode.org/blog/archives/2016/09/web_development.html

[25] Микросервисы – пожалуйста не надо: http://basho.com/posts/technical/microservices-please-dont/

[26] Эффектная трансформация фоновых изображений: http://tympanus.net/codrops/2016/09/21/background-segment-effect-with-css-clip/

[27] Эффект молнии в HTML5 canvas: http://codepen.io/AshKyd/pen/pEjwPY/

[28] Слайдер с кривыми в фоновой маске: http://codepen.io/mrspok407/pen/NRxBWa

[29] PostCSS. Будущее после Sass и Less: https://habrahabr.ru/company/oleg-bunin/blog/310710/

[30] Разбираемся с функциями первого класса в Sass 3.5: http://front-end.su/sass-first-class-functions

[31] 8 хитрых приёмов, реализуемых с помощью одного лишь CSS: https://tproger.ru/translations/8-tricks-with-css/

[32] Темизация с Sass: бесконечная история: http://prgssr.ru/development/temizaciya-s-sass-beskonechnaya-istoriya.html

[33] Инлайновые стили в background-image: http://css.yoksel.ru/inline-styles-in-background/

[34] Не тормозите из-за шрифтов: 3 техники производительности для быстрого отображения контента: https://medium.com/@firasd/dont-brake-for-fonts-3-web-performance-techniques-to-show-content-quickly-fdefcd0d2028

[35] Новый стек системных шрифтов: https://bitsofco.de/the-new-system-font-stack/

[36] Представление OpenType шрифтов с технологией OpenType Font Variations: https://medium.com/@tiro/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369

[37] Системные шрифты в SVG: https://css-tricks.com/system-fonts-svg/

[38] CSS Grid в реальном мире — создание формы логина: https://rachelandrew.co.uk/archives/2016/09/20/css-grid-meets-the-real-world-a-login-form/

[39] CSS Grid Layout: резиновые колонки и улучшенные отступы: https://webdesign.tutsplus.com/tutorials/css-grid-layout-units-of-measurement-and-basic-keywords--cms-27259

[40] CSS Grid Layout: краткое руководство для начала работы: https://webdesign.tutsplus.com/tutorials/css-grid-layout-quick-start-guide--cms-27238

[41] Объяснение флоатов на примере работающего эскалатора: https://medium.freecodecamp.com/css-floats-explained-by-riding-an-escalator-57fa55232333

[42] Скошенные углы на Sass: https://www.sitepoint.com/tilted-angles-in-sass/

[43] 9 недооцененных свойств в CSS: https://medium.com/@iamjordanlittle/9-underutilized-features-in-css-90ced6ddbfe7

[44] Нестандартное мышление с CSS shape-outside в контексте построения лейаутов : http://callmenick.com/post/thinking-outside-the-box-with-css-shape-outside

[45] wysiwyg.css: http://jgthms.com/wysiwyg.css/

[46] Столбчатые диаграммы в CSS: https://blog.browserstream.com/column-charts-in-css-a2ae33fc80e7

[47] Доступен язык TypeScript 2.0, продвигаемый Microsoft в качестве дополнения к JavaScript: http://www.opennet.ru/opennews/art.shtml?num=45201

[48] Видео докладов с TomskJS meetup 1 (03.09.16): https://www.youtube.com/playlist?list=PLg6-SX1kjGJIfir5ZrghMBG-hicHIJKJR

[49] Видео докладов с Nordic.js 2016: https://www.youtube.com/playlist?list=PLGP3VO5jDf8wIGu0Q-huhv2Wfy2G5trbj

[50] Визуализация ошибок в JavaScript после обновления Chrome и Firefox : https://blog.zingchart.com/2016/09/19/a-visualization-of-javascript-errors-after-firefox-chrome-updates/

[51] Почему Elm собирается изменить мир : https://medium.com/@dailydrip/why-elm-is-going-to-change-the-world-f5a6c693b2ca

[52] Настройка и запуск с ESLint — валидатора JS кода: https://www.sitepoint.com/up-and-running-with-eslint-the-pluggable-javascript-linter/

[53] Высеченное в камне: неизменяемость в JS: https://appendto.com/2016/09/carved-in-stone-immutables-in-javascript/

[54] Почему мы не будем писать на JS через 5 лет: https://medium.com/thoughts-from-travelperk/why-we-wont-be-writing-javascript-in-five-years-f48b3274c327

[55] 7 вещей в JS, о которых вы, возможно, не знали: http://designmodo.com/7-things-javascript/

[56] jQuery 3 — новые свойства и улучшения производительности: http://www.dotnetcurry.com/jquery/1309/jquery-3-new-features

[57] Прогресс Node.js — куда движется технология год спустя после объединения Node.js и io.js: https://medium.com/@nodejs/the-progress-of-node-js-a-year-post-node-js-and-io-js-merge-and-where-the-technology-is-going-f168ce9ec8ee

[58] Четыре необходимых совета по созданию кросс-платформенных Electron-приложений: https://blog.avocode.com/blog/4-must-know-tips-for-building-cross-platform-electron-apps

[59] Angular 2 вышел в релиз. Ставит ли это под угрозу React?: http://frontendinsights.com/angular-2-released-threaten-react/

[60] Стратегии миграции с Angular 1.x на Angular 2: https://www.codementor.io/angularjs/tutorial/migrating-from-angular-1-to-angular-2

[61] 4 этапа настройки производительности для вашего приложения на Angular 2: https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

[62] Почему изучение Angular 2 было мучительным: https://hackernoon.com/why-learning-angular-2-was-excruciating-d50dc28acc8a

[63] Валидация форм в Angular 2: https://scotch.io/tutorials/angular-2-form-validation

[64] 30 ресурсов для изучения Angular 2: http://tutorialzine.com/2016/09/30-learning-resources-for-mastering-angular-2/

[65] maintained-angular — поддерживаемые проекты на Angular 1 и 2 : https://github.com/jasanst/maintained-angular

[66] Понимание определения изменений в Angular 2: https://auth0.com/blog/understanding-angular-2-change-detection/

[67] Использование нового релиза роутера Angular 2 — Router 3.0.0: https://medium.com/@ladyleet/figured-this-would-help-yall-a-bit-if-i-walked-through-it-72910e1497e

[68] Тестирование компонентов в Angular 2 с Jasmine: https://semaphoreci.com/community/tutorials/testing-components-in-angular-2-with-jasmine

[69] React Routify — библиотека для роутинга для React-приложений: http://rwhitmire.com/react-routify/

[70] mdcomponents — компоненты для React-приложений с Material-дизайном: https://hbm.github.io/md-components/#/?_k=kii869

[71] Новый подход к управлению actions в Redux: https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da

[72] Возможно вам не нужен Redux: https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

[73] Паттерны и анти-паттерны Redux-а: https://tech.affirm.com/redux-patterns-and-anti-patterns-7d80ef3d53bc

[74] Redux или MobX: попытка разобраться: http://www.robinwieruch.de/redux-mobx-confusion/

[75] Как умирает React Native: https://codecookbook.co/text/how-react-native-dies/

[76] Почему Vue (а не React) — это новый jQuery: http://anyonecanlearntocode.com/blog_posts/why-vue-not-react-is-the-new-jquery

[77] Поток данных в Vue и Vuex: https://benjaminlistwon.com/blog/data-flow-in-vue-and-vuex/

[78] Подкаст: что появится в Vue.js 2.0: https://simplecast.com/s/8c5fe963

[79] Reflexbox: http://jxnblk.com/reflexbox/

[80] optimize-js: https://github.com/nolanlawson/optimize-js

[81] ApproveJs — библиотека для проверки данных: http://charlgottschalk.co.za/projects/approvejs

[82] retina.js 2.0 — поддержка ретины для вашего сайта: http://imulus.github.io/retinajs/

[83] fetch-reject — простая обертка для fetch для отслеживания HTTP-ошибок: https://github.com/matankb/fetch-reject

[84] GraphicsJS — легковесная графическая библиотека с интуитивно понятным API на SVG/VML: http://www.graphicsjs.org/

[85] pareto.js — небольшая функциональная библиотека для JS: https://github.com/concretesolutions/pareto.js

[86] Мастер-класс: верстаем интерактивный баннер: https://medium.com/@ABatickaya/%D0%BC%D0%B0%D1%81%D1%82%D0%B5%D1%80-%D0%BA%D0%BB%D0%B0%D1%81%D1%81-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%B5%D0%BC-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9-%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80-3eea3a642934#.kzh04wm8j

[87] Пишем игру Тетрис на JavaScript: https://www.youtube.com/watch?v=H2aW5V46khA

[88] Создаём hacker news с Angular 2 cli, rxjs и webpack: http://houssein.me/angular2-hacker-news

[89] Создание игры с Three.js, ReactJS и WebGL: https://www.sitepoint.com/building-a-game-reactjs-and-webgl/

[90] Создание поисковой функциональности с помощью Scout и Vue.js: https://scotch.io/tutorials/build-search-functionality-with-laravel-scout-and-vue-js

[91] Выпуск web-браузера Opera 40 со встроенным VPN: http://www.opennet.ru/opennews/art.shtml?num=45178

[92] Релиз Firefox 49: http://www.opennet.ru/opennews/art.shtml?num=45180

[93] технические детали для разработчиков: http://tanalin.com/blog/2016/09/firefox-49/

[94] Chrome 54 Beta для Android умеет проигрывать видео в фоновом режиме: http://itc.ua/news/chrome-54-beta-dlya-android-umeet-proigryivat-video-v-fonovom-rezhime/

[95] falcon — расширение Chrome для полноценного поиска по истории посещений сайта: https://github.com/lengstrom/falcon

[96] В Картах Google теперь показывается направление движения: http://4pda.ru/2016/09/21/324832/

[97] Google отдаёт предпочтение AMP перед страницами приложений в выдаче: https://www.searchengines.ru/google-app-vs-amp.html

[98] Google сделал Penguin частью основного алгоритма: как это повлияет на поисковую выдачу: http://ain.ua/2016/09/24/672317

[99] Google запустила мессенджер Allo с шифрованием сообщений и встроенным помощником: http://itc.ua/news/google-zapustila-messendzher-allo-s-shifrovaniem-soobshheniy-i-vstroennyim-pomoshhnikom/

[100] Как проходят и зачем нужны соревнования между владельцами протезов и экзоскелетов: http://apparat.cc/world/cybathlon/

[101] Google все-таки объединит Android и Chrome OS: http://gagadget.com/announce/23875-google-vse-taki-obedinit-android-i-chrome-os/

[102] Четыре финальных редизайна Mozilla: http://www.webdesignerdepot.com/2016/09/mozillas-rebrand-reaches-the-final-four/

[103] MotionMark: новый графический бенчмарк от webkit: https://webkit.org/blog/6943/motionmark-a-new-graphics-benchmark/

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

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

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

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

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