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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №214 (30 мая — 5 июня 2016) - 1

Веб-разработка ^[1]

CSS ^[2]

Javascript ^[3]

Браузеры ^[4]

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

Новости и занимательное

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

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

Автор: Zfort Group

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

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

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

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

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

[2] CSS: #css

[3] Javascript: #js

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

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

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

[7] Ещё больше комфорта в разработке фронтенда с TARS: https://habrahabr.ru/company/2gis/blog/302374/

[8] Почему мы рады тому, что не попали на themeforest: https://habrahabr.ru/post/302156/

[9] Нейронные сети, типографика и вёрстка: Дайджест интересных материалов о создании писем и работе с email на Хабрахабре: https://habrahabr.ru/company/pechkin/blog/302244/

[10] Понимание семантики: http://css-live.ru/articles/ponimanie-semantiki.html

[11] Understanding semantics: http://tink.uk/understanding-semantics/

[12] localForage: улучшенное офлайн-хранилище: http://frontender.info/localforage-offline-storage-improved/

[13] Регрессивные веб-приложения: http://css-live.ru/articles/regressivnye-veb-prilozheniya.html

[14] Regressive Web Apps: https://adactio.com/journal/10708

[15] Прогрессивные веб-приложения: как мигрировать на HTTPS: https://blog.hospodarets.com/progressive-web-apps-https

[16] Прогрессивные веб-приложения и наш регрессивный подход: https://www.christianheilmann.com/2016/05/31/progressive-web-apps-and-our-regressive-approach/

[17] Анализ производительности web-приложений в 2016 году, Илья Климов, FrontendDevConf: https://www.youtube.com/watch?v=JIkWFrHL0xo

[18] Что веб-разработчикам нужно знать о будущем AMP: https://arc.applause.com/2016/06/01/amp-roadmap-web-development/

[19] Как улучшить производительность страниц и выжать максимум из вашего хостинга: https://www.sitepoint.com/how-to-improve-page-performance-and-make-the-most-of-your-hosting/

[20] Как сделать фавиконку маленькой и закешированной: https://www.keycdn.com/blog/make-a-favicon/

[21] Оптимизация изображений: основные ошибки и решения: http://www.catswhocode.com/blog/image-optimization-common-mistakes-and-solutions

[22] Способы, которыми вы можете указать браузеру, как и что нужно оптимизировать: https://css-tricks.com/ways-need-tell-browser-optimize/

[23] Чеклисты WCAG 2.0: https://www.wuhcag.com/wcag-checklist/

[24] Доступность — это не о морали, а для широкой массы пользователей: https://una.im/a11y-for-the-masses/

[25] Как использование Yeoman изменило наш подход к работе: https://css-tricks.com/using-yeoman-changed-way-work/

[26] Документация к проекту с Hexo Static Site Generator: https://www.sitepoint.com/project-documentation-hexo/

[27] 5 клевых технологий Mozilla, о которых вы никогда не слвшали: https://davidwalsh.name/mozilla-projects

[28] Список всего, что может быть в <head>: https://github.com/joshbuchea/HEAD

[29] не делайте ваш <head> слишком жирным: http://www.freshtilledsoil.com/dont-get-a-fat/

[30] Radial SVG Slider: https://codyhouse.co/gem/radial-svg-slider/

[31] Multi-Layer Page Reveal Effects: http://tympanus.net/codrops/2016/06/01/multi-layer-page-reveal-effects/

[32] Подборка интересных сайтов за июнь на css-tricks: https://css-tricks.com/websites-we-like-june-2016/

[33] Еженедельная подборка красивых эффектов на CSS/SVG/JS #40: http://css-live.ru/uncategorized/ezhenedelnaya-podborka-krasivyx-effektov-na-csssvgjs-40.html

[34] Flexbox методов, о которых вы должны знать: https://habrahabr.ru/post/302130/

[35] Модуль генерируемого контента CSS3 обновился спустя 13 лет: http://css-live.ru/vecssti-s-polej/modul-generiruemogo-kontenta-css3-obnovilsya-spustya-13-let.html

[36] Вставляем разрыв строки: https://medium.com/@ABatickaya/%D0%B2%D0%B2%D0%BE%D0%B4%D0%B8%D0%BC-%D1%80%D0%B0%D0%B7%D1%80%D1%8B%D0%B2-%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8-814c88535341

[37] Injecting a Line Break: https://css-tricks.com/injecting-line-break/

[38] Аватары с рваными краями при помощи CSS clip-path: http://frontender.info/sketchy-avatars-css-clip-path/

[39] Представление свойства CSS clip-path: https://www.sitepoint.com/introducing-css-clip-path-property/

[40] Как работать с CSS-препроцессорами и БЭМ: http://nicothin.github.io/idiomatic-pre-CSS/

[41] Сражаемся с БЭМ: 10 основных проблем и способы их избежания: https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

[42] Я (наконец) понял БЭМ: https://m.alphasights.com/bem-i-finally-understand-b0c74815d5b0

[43] CSS в BBC Sport (часть 1): https://medium.com/@shaunbent/css-at-bbc-sport-part-1-bab546184e66

[44] Подробно о межстрочном расстоянии текста в CSS: http://tavmjong.free.fr/blog/?p=1632

[45] CSS Модули: : https://kevinsuttle.com/css-modules-a-review/

[46] Коллекция простых CSS Модулей : https://github.com/ruanyf/css-modules-demos

[47] История происхождения стандартных браузерных стилей и файлов сброса CSS : https://medium.com/@tinydinosaur/a-wordy-history-of-default-browser-styles-and-css-resets-befdd614d93b

[48] Улучшение CSS c помощью Parker: http://csswizardry.com/2016/06/improving-your-css-with-parker/

[49] Не стройте систему сеток Bootstrap на флексбоксе: http://codepen.io/morganfeeney/post/dont-build-bootstrap-style-grid-systems-with-flexbox

[50] Flexbox: flex-direction:column. Путаница с колонками продолжается: http://codepen.io/townivan/post/flexbox-flex-direction-column

[51] At</>mic Docs: http://atomicdocs.io/

[52] Создание анимированных заставок для видео используя спрайты: https://notes.embed.ly/building-animated-covers-for-video-with-sprites-d260c445eb10

[53] Ускорение Sass: архитектура в Sass: https://www.sitepoint.com/architecture-in-sass/

[54] ClosestColor: http://closestcolor.com/

[55] ООП в JavaScript: https://habrahabr.ru/company/nixsolutions/blog/302518/

[56] RxJS: реактивное расширение для фронтенд разработки: https://habrahabr.ru/company/jugru/blog/302284/

[57] Запросы к Rest API из JavaScript компактно и красиво: https://habrahabr.ru/post/302288/

[58] Записи докладов с KharkivJS #6 2016 : https://www.youtube.com/playlist?list=PLnkLrCUX4Qh57cMQhiUVxpYUYzJ98SRnJ

[59] Front-end Гиперполиглот — сравнение одних и тех же фич, реализованных в шести фреймворках (React, Angular 2, Angular 1, Polymer, Vue, Ember): http://jeffcarp.github.io/frontend-hyperpolyglot/

[60] Погружение в React: Redux: http://prgssr.ru/development/pogruzhenie-v-react-redux.html

[61] Погружение в React: контейнеры: http://prgssr.ru/development/pogruzhenie-v-react-kontejnery.html

[62] «Building React Applications with Idiomatic Redux»: https://egghead.io/series/building-react-applications-with-idiomatic-redux

[63] Мультипликационное руководство по производительности в React: https://www.youtube.com/watch?v=-t8eOoRsJ7M

[64] Начало работы с TDD в React: https://semaphoreci.com/community/tutorials/getting-started-with-tdd-in-react

[65] 22 интересных проекта с открытым кодом на React: https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f

[66] Angular Attack: мой опыт участия в хакатоне: https://habrahabr.ru/company/wrike/blog/302302/

[67] Angular 2 несёт мир в галактику фронтенда: https://habrahabr.ru/company/jugru/blog/301042/

[68] Быстрая настройка хостинга для Angular 2 приложения с Angular CLI и GitHub Pages: http://developer.telerik.com/featured/quick-angular-2-hosting-angular-cli-github-pages/

[69] Архитектура приложений на AngularJS: https://egghead.io/courses/angularjs-application-architecture

[70] Angular Universal на практике — как создать дружественное к SEO одно-страничное приложение с Angular 2: http://blog.angular-university.io/angular-2-universal-meet-the-internet-of-the-future-seo-friendly-single-page-web-apps/

[71] Создание простого мобильного приложения с NativeScript и Angular 2: https://www.thepolyglotdeveloper.com/2016/05/build-simple-mobile-app-nativescript-angular-2/

[72] WebPack и Angular 2: https://angular.io/docs/ts/latest/guide/webpack.html

[73] 18 интересных проектов с открытым кодом на Angular: https://medium.mybridge.co/18-amazing-open-source-angular-projects-dd9e81d921ee

[74] Как написать ваш собственных Virtual DOM: https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060

[75] Почему вы не должны бояться TypeScript: https://scotch.io/tutorials/why-you-shouldnt-be-scared-of-typescript

[76] Репозиторий ванильного JS: http://www.vanillalist.com/

[77] Определение движения с помощью JS: http://codersblock.com/blog/motion-detection-with-javascript/

[78] Прекращаем поддержку IE8: последствия для JS: http://tech.trivago.com/2016/06/01/dropping-ie8-support-consequences-for-javascript/

[79] Легенда об операторе равенства в JS: http://rainsoft.io/the-legend-of-javascript-equality-operator/

[80] Async и Await: https://zeit.co/blog/async-and-await

[81] Три типа прототипного наследования: редакция ES6+: https://medium.com/javascript-scene/3-different-kinds-of-prototypal-inheritance-es6-edition-32d777fa16c9

[82] Регулярные выражения в JavaScript: https://www.sitepoint.com/expressions-javascript/

[83] Плавная прокрутка в пять строк JavaScript: http://thenewcode.com/507/Smooth-Page-Scroll-in-5-Lines-of-JavaScript

[84] Проектирование и создание собственной JavaScript библиотеки: подсказки и приемы: https://www.sitepoint.com/design-and-build-your-own-javascript-library/

[85] Бесконечные коллекции с ES6 генераторами: https://advancedweb.hu/2016/05/31/infinite-collections-with-es6-generators/

[86] Правильное использование Google Maps JavaScript API: https://www.sitepoint.com/google-maps-javascript-api-the-right-way/

[87] gDoc.js — использование Google Spreadsheets как CMS: https://github.com/jadeallencook/gDoc.js

[88] Pixel.js: http://googlecreativelab.github.io/anypixel/

[89] Представление Multirange: небольшого полифила для HTML5.1 слайдера с двумя ползунками (от Lea Verou): http://lea.verou.me/2016/05/introducing-multirange-a-tiny-polyfill-for-html5-two-handle-sliders/

[90] microlight.js: https://asvd.github.io/microlight/

[91] barba.js — библиотека для создания плавных переходов между страницами сайта: http://barbajs.org/index.html

[92] Opera Max пересек отметку в 10 миллионов пользователей и рассматривает внедрение платной подписки или ненавязчивой рекламы: http://itc.ua/news/opera-max-peresek-otmetku-v-10-millionov-polzovateley-i-rassmatrivaet-vnedrenie-platnoy-podpiski-ili-nenavyazchivoy-reklamyi-v-budushhie-versii-prilozheniya/

[93] Выпуск Tor Browser 6.0: http://www.opennet.ru/opennews/art.shtml?num=44516

[94] Тренды браузеров Июнь 2016: неудача Microsoft: https://www.sitepoint.com/browser-trends-june-2016-microsoft-misfortune/

[95] Повышаем уровень: создание нового браузера (Microsoft Edge): https://www.sitepoint.com/level-up-building-a-brand-new-browser/

[96] Веб должен работать для каждого: Microsoft Edge и содержательный дизайн: https://www.sitepoint.com/the-web-should-just-work-for-everyone-microsoft-edge-and-inclusive-design/

[97] Что дальше для EdgeHTML: https://www.sitepoint.com/whats-next-for-edgehtml/

[98] Chrome 51: Intersection Observers, Passive Event Listeners и Credential Management API: https://www.youtube.com/watch?v=LXbtIeHIQJA&list=PLNYkxOF6rcIDfz8XEA3loxY32tYh7CI3m

[99] w3.org: Finishing HTML5.1 … and starting HTML 5.2: https://www.w3.org/blog/2016/06/finishing-html5-1-and-starting-html-5-2/

[100] Xiaomi купит у Microsoft 1500 патентов и будет предустанавливать Office и Skype на свои смартфоны: http://itc.ua/news/xiaomi-kupit-u-microsoft-1500-patentov-i-budet-predustanavlivat-office-i-skype-na-svoi-smartfonyi/

[101] Google запустила инструмент оценки пригодности сайта для мобильных устройств: https://geektimes.ru/post/276770/

[102] Google опубликовал план действий по проекту AMP: http://www.searchengines.ru/news/archives/google_opublikoval.html

[103] Computex 2016: итоги выставки и главные новинки: http://blog.priceok.ru/news/computex-2016-itogi-vystavki-i-glavnye-novinki/

[104] 5 самых удивительных гаджетов Computex 2016: https://hi-tech.mail.ru/review/computex_amazing_gadgets/

[105] Подразделение Google Boston Dynamics перейдёт к Toyota: http://www.3dnews.ru/933746/

[106] Instagram закрыл API для сторонних сервисов, позволяющих просматривать ленту и лайкать фотографии: http://www.cossa.ru/news/244/131768/

[107] Instagram начнет платить пользователям за контент: http://www.cossa.ru/news/244/131843/

[108] Проект GNU представил собственную платёжную систему GNU Taler: http://www.opennet.ru/opennews/art.shtml?num=44544

[109] Почему виртуальная реальность — это круто: http://droider.ru/post/pochemu-virtualnaya-realnost-eto-kruto-31-05-2016/

[110] 15 серьезных фильмов о хакерской культуре и изнанке индустрии: https://xakep.ru/2016/05/31/15-documentaries/

[111] Alibaba слезам не верит: 5 крупнейших неудач Джека Ма и как он их преодолел: http://ain.ua/2016/06/01/652016

[112] «Все ошибки Tesla были обусловлены исключительно глупостью»: https://vc.ru/p/musk-confessions

[113] IT компании помогают геномной медицине: http://www.computerra.ru/149871/it-kompanii-pomogayut-genomnoy-medicine/

[114] Быстрее, выше, слабее: Почему перфекционизм мешает развитию: http://www.wonderzine.com/wonderzine/life/life-opinion/218707-evil

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

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

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

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

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