- PVSM.RU - https://www.pvsm.ru -

Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017)

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017) - 1

Веб-разработка [1]
CSS [2]
Javascript [3]
Браузеры [4]
Занимательное [5]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017) - 2 Веб-разработка

Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017) - 26 CSS

Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017) - 38 JavaScript

Браузеры

Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017) - 77 Занимательное

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

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

Автор: Zfort Group

Источник [107]


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

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

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

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

[2] CSS: #css

[3] Javascript: #js

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

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

[6] Правила использования ARIA в HTML: https://habrahabr.ru/post/323876/

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

[8] Фронтёрки: http://www.fronterki.fm/

[9] Незрячий программист — о разработке «на слух» и доступности интернета: https://dou.ua/lenta/interviews/blind-programmer/

[10] Web Developer Roadmap — 2017 : https://github.com/kamranahmedse/developer-roadmap

[11] Создание HTML писем под Gmail: 12 вещей, о которых вы должны знать: https://www.emailonacid.com/blog/article/email-development/12_things_you_must_know_when_developing_for_gmail_and_gmail_mobile_apps/

[12] HTML5 Video и Audio: разметка: https://www.sitepoint.com/html5-video-and-audio-the-markup/

[13] Формы HTML5: типы полей ввода (часть 2): https://www.sitepoint.com/html5-forms-input-types-part-2/

[14] Что такое цветные шрифты?: http://www.colorfonts.wtf/

[15] Виталий Фридман представляет новую версию Smashing Magazine: https://next.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here--meet-the-next-smashing-magazine/

[16] Эффект многослойного движения по наведению: https://tympanus.net/codrops/2017/03/15/stack-motion-hover-effects/

[17] Оформление SVG-фигур: https://htmlacademy.ru/courses/187

[18] Трибьют анимации Miyazaki – с SVG и GSAP: http://codepen.io/nerdmanship/details/xgmBKg/

[19] 7 решений для создания более доступных SVG: http://simplyaccessible.com/article/7-solutions-svgs/

[20] shapeshifter — веб-приложение для создания морфинг-анимации в SVG: https://shapeshifter.design/

[21] Веб-производительность топ 100 сайтов для путешествий: http://royal.pingdom.com/2017/03/13/web-performance-top-100-travel-sites/

[22] Что такое HTTP/2?: https://www.sitepoint.com/what-is-http2/

[23] Преимущества производительности в технике прогрессивого улучшения: http://www.browserlondon.com/blog/2017/03/performance-benefits-progressive-enhancement/

[24] Почему WebAssembly быстрее asm.js: https://hacks.mozilla.org/2017/03/why-webassembly-is-faster-than-asm-js/

[25] Первый взгляд на WebAssembly: https://anadea.info/blog/a-first-look-at-webassembly-gainer-that-will-turn-browsers-into-power-lifters

[26] Итоги AMPconf: AMP — производительный фреймворк, который взрослеет: https://mobiforge.com/news-comment/ampconf-amp-is-a-performance-framework-thats-growing-up

[27] Мы верим в AMP: https://medium.com/clear-left-thinking/in-amp-we-trust-527b0bb309e1

[28] Создание Alix, Chrome-расширения для линтинга HTML: http://front-end.su/making-alix-a-chrome-extension-for-linting-html

[29] Как передавать параметры через командную строку в Gulp задачи: https://www.sitepoint.com/pass-parameters-gulp-tasks/

[30] animista: http://animista.net/

[31] Console Importer — простой импорт JS и CSS ресурсов через консоль в Chrome: https://github.com/pd4d10/console-importer

[32] Реализуем пуш-уведомления на фронтенде и бэкенде: https://medium.com/web-standards/%D1%80%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D1%83%D0%B5%D0%BC-%D0%BF%D1%83%D1%88-%D1%83%D0%B2%D0%B5%D0%B4%D0%BE%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B5-%D0%B8-%D0%B1%D1%8D%D0%BA%D0%B5%D0%BD%D0%B4%D0%B5-9fea70221028

[33] Minecraft в WebVR с помощью HTML используя A-Frame : https://css-tricks.com/minecraft-webvr-html-using-frame/

[34] Web Components: как создать свои собственные кастомные компоненты: https://auth0.com/blog/web-components-how-to-craft-your-own-custom-components/

[35] Проблема выбора структуры документа: http://css-live.ru/html5/problema-vybora-struktury-dokumenta.html

[36] Новая версия оптимизатора CSSO 3.0.0,: https://github.com/css/csso/releases/tag/v3.0.0

[37] Как грид-раскладка (Grid Layout) провела лето: http://css-live.ru/articles/kak-grid-raskladka-grid-layout-provela-leto.html

[38] Начинаем работать с CSS Grid : https://css-tricks.com/getting-started-css-grid/

[39] Как организовывать и выравнивать элементы в Grid Layout: https://www.sitepoint.com/order-align-items-grid-layout/

[40] CSS Grid Layout и прогрессивное улучшение: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

[41] CSS Grid VS Flexbox: практическое сравнение: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/

[42] Знакомимся с CSS Grid Layout: https://cm.engineering/getting-to-know-css-grid-layout-818e43ca71a5

[43] CSS Grid Layout здесь, чтобы остаться: https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is-here-to-stay/

[44] Пишем модульный CSS (часть 1): https://zellwk.com/blog/css-architecture-1/

[45] Как модернизировать ваш CSS с помощью css-js-loader: https://medium.com/making-internets/better-css-with-javascript-88463deecf3

[46] Waffle grid: https://lucasgruwez.github.io/waffle-grid/

[47] Предотвращение reflow: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/

[48] Краткая история JavaScript. Часть 1: https://habrahabr.ru/company/livetyping/blog/324196/

[49] Эволюция модульного JavaScript: https://habrahabr.ru/company/yandex/blog/192874/

[50] Фильтрация и создание цепочек в функциональном JavaScript: https://habrahabr.ru/company/nixsolutions/blog/324172/

[51] Асинхронный JavaScript против отложенного: https://habrahabr.ru/post/323790/

[52] Вышел jQuery 3.2.0. Среди всего прочего — поддержка кастомных свойств CSS: https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/

[53] Привычкаи эффективных JavaScript разработчиков: http://thefullstack.xyz/effective-javascript-developers/

[54] Заменит ли WebAssembly JavaScript?: https://www.techworm.net/2017/03/webassembly-replacing-javascript.html

[55] Три хака при работе с массивами: http://www.jstips.co/en/javascript/3-array-hacks/

[56] Управление асинхронными зависимостями с JavaScript: https://hackcabin.com/post/managing-async-dependencies-javascript/

[57] Вещи, которые вы должны знать про объекты и иммутабельность в JavaScript: https://www.ckl.io/blog/objects-immutability-javascript/

[58] Новинки JavaScript: Асинхронные итераторы: https://habrahabr.ru/post/324004/

[59] 5 особенностей, которые вы можете использовать в ES6 уже сегодня: https://scotch.io/bar-talk/five-things-you-can-use-in-es6-today

[60] Понимание классов в ES6: https://medium.com/papdit/understanding-es6-classes-ada7c14e0213

[61] Communicating Sequential Processes: альтернатива асинхронным генераторам от Dr. Axel Rauschmayer: http://2ality.com/2017/03/csp-vs-async-generators.html

[62] Готовим плацдарм для react-приложения: https://habrahabr.ru/post/324232/

[63] Представление библиотеки React Loadable: https://medium.com/@thejameskyle/react-loadable-2674c59de178

[64] Представление React Native App: https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html

[65] Жизненный цикл методовв react, объясненный на примере детского танца: https://medium.com/technoetics/life-cycle-methods-in-react-as-a-kids-dance-performance-d567f36c8894

[66] Angular 2 vs React – финальная битва – раунд 2: https://gofore.com/angular-2-vs-react-the-final-battle-round-2-2/

[67] Маршрутизация в React, несложный способ: https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997

[68] Мемоизация React компонентов: https://medium.com/@planttheidea/memoize-react-components-33377d7ebb6c

[69] React Router — изучение роутинга: https://reacttraining.com/react-router/

[70] Быстрые советы для React-Redux приложений: https://hackernoon.com/rapid-tips-for-your-react-redux-application-68f513a7cebf

[71] Как создать SPA c помощью Vue 2 (часть 1): https://scotch.io/tutorials/how-to-build-a-simple-single-page-application-using-vue-2-part-1

[72] Откуда взялся Vue.js?: https://modernweb.com/where-did-vue-js-come-from/

[73] Быстрое введение в VueJS: http://www.jomendez.com/2017/03/14/quick-introduction-vuejs/

[74] Пишем компоненты Vue.js с Flow: https://alligator.io/vuejs/components-flow/

[75] Простой серверный рендеринг с Vue.js и Express: https://alligator.io/vuejs/basic-ssr/

[76] bottle-vue-kickstart: https://github.com/koddr/bottle-vue-kickstart

[77] Eagle.js: https://github.com/zulko/eagle.js/

[78] Планируем приложение на Angular: http://developer.telerik.com/topics/web-development/planning-an-angular-application/

[79] 5 функций, на которые нужно обратить внимание в Angular v4: https://scotch.io/tutorials/5-features-to-watch-out-for-in-angular-4

[80] Понимание архитектуры компонентов: рефакторинг Angular приложения: https://www.sitepoint.com/understanding-component-architecture-angular/

[81] Как создать Angular приложение: добавление стилей с Kendo UI: http://developer.telerik.com/products/kendo-ui/create-style-angular-app-kendo-ui/

[82] HyperApp: https://github.com/hyperapp/hyperapp

[83] Sazerac: http://sazeracjs.com/

[84] Fetch Inject: https://github.com/jhabdas/fetch-inject

[85] Planck.js — физический 2D движок: https://github.com/shakiba/planck.js

[86] Тестирование Firefox 53-beta и Firefox Developer Edition 54: http://www.opennet.ru/opennews/art.shtml?num=46180

[87] Причина прекращения поддержки звуковой системы ALSA в Firefox: http://www.opennet.ru/opennews/art.shtml?num=46187

[88] Chrome 57 умерил аппетиты фоновых вкладок для экономии энергии: http://gagadget.com/announce/26103-chrome-57-umeril-appetityi-fonovyih-vkladok-dlya-ekonomii-energii/

[89] Chrome 56 получил поддержку WebGL 2.0: https://tproger.ru/news/web-gl-2-0-chrome/

[90] Разработчики Chrome намерены перейти к полной остановке выполнения фоновых вкладок: http://www.opennet.ru/opennews/art.shtml?num=46207

[91] В Chromium добавлена поддержка анимированных PNG-изображений: http://www.opennet.ru/opennews/art.shtml?num=46190

[92] Chrome 57 научился «душить» фоновые вкладки для снижения энергопотребления: http://itc.ua/news/chrome-57-nauchilsya-dushit-fonovyie-vkladki-dlya-snizheniya-energopotrebleniya/

[93] Новый алгоритм Google позволяет сжать JPEG-файлы на 35%: http://4pda.ru/2017/03/17/338071/

[94] GitLab объявил о покупке Gitter и планирует открыть его код: http://www.opennet.ru/opennews/art.shtml?num=46198

[95] Google выложил в открытый доступ код алгоритма, ужимающего изображения на 35%: https://ain.ua/2017/03/17/google-vylozhil-v-otkrytyj-dostup-kodirovshhik-jpeg

[96] В Telegram началось тестирование зашифрованных голосовых звонков: http://itc.ua/news/v-telegram-nachalos-testirovanie-zashifrovannyih-golosovyih-zvonkov/

[97] Microsoft запустила конкурента Slack для Office 365 в международном масштабе: https://www.ferra.ru/ru/techlife/news/2017/03/15/microsoft-teams-slack-office-365/

[98] Конец еще одной эпохи: Windows Vista официально перестанут поддерживать с 11 апреля: http://gagadget.com/announce/26100-konets-esche-odnoj-epohi-windows-vista-ofitsialno-perestanut-podderzhivat-s-11-aprelya/

[99] На каких принципах построен дизайн продуктов, которыми пользуется весь мир — примеры Airbnb, Facebook, Apple и других компаний: https://vc.ru/p/famous-product-design

[100] В Google теперь можно искать фразы с символами ||, === и другими программистскими обозначениями: https://tproger.ru/news/google-helps-to-search-for-symbols/

[101] Сооснователь Yahoo рассказал, что фиолетовый стал фирменным цветом компании по ошибке: https://ain.ua/2017/03/11/fioletovyj-stal-firmennym-cvetom-po-oshibke

[102] Если бы Стив Джобс воскрес или 7 смертных грехов Apple: http://gagadget.com/26128-esli-byi-stiv-dzhobs-voskres-ili-7-smertnyih-grehov-apple/

[103] 7 навыков, которые необходимы IT-специалистам, чтобы получить работу в Apple, Google или Microsoft: https://ain.ua/2017/03/12/7-navykov-kotorye-neobxodimy-it-specialistam-chtoby-poluchit-rabotu-v-apple-google-ili-microsoft

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

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

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

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