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

---

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

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

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

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

[2] CSS            : #css

[3] Javascript: #js

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

[5] Собираем базу аудиокниг для удобной фильтрации: https://habrahabr.ru/post/283538/

[6] 16-й выпуск «Веб-стандартов»: батарейка, графика, HEX-альфа, !important, таблицы, полифилы: https://soundcloud.com/web-standards/episode-16

[7] Создание сервис-воркера: разбор примера: http://prgssr.ru/development/sozdaem-service-worker.html

[8] Фронтенд ВКонтакте: Архитектура? Какая еще архитектура?: http://refront.ru/post/141033820400/%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4-%D0%B2%D0%BA%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D0%B5-%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0-%D0%BA%D0%B0%D0%BA%D0%B0%D1%8F-%D0%B5%D1%89%D0%B5

[9] Видео со Avito SPA meetup #2 : https://www.youtube.com/playlist?list=PLknJ4Vr6efQF_GMmm2Hl_EBW3sDkXvJ0m

[10] Видео всех докладов: https://www.youtube.com/playlist?list=PLNYkxOF6rcIDz1TzmmMRBC-kd8zPRTQIP

[11] От нуля до героя фронтенда, ч.1: https://medium.freecodecamp.com/from-zero-to-front-end-hero-part-1-7d4f7f0bff02

[12] Введение в Web Animations API: https://pawelgrzybek.com/intro-to-the-web-animations-api/

[13] Автозаполнение: что веб-разработчики должны знать, но не знают: http://blog.cloudfour.com/autofill-what-web-devs-should-know-but-dont/

[14] Доступные табы с ARIA, проблемы UI и стандарты: https://alastairc.ac/2016/05/aria-tabs-ui-problems-and-standards/

[15] 15 инструментов для мониторинга сайтов: https://www.keycdn.com/blog/website-monitoring-tools/

[16] Почему нативный ContentEditable ужасен: https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480

[17] Пример создания живого руководства по стилям: https://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/

[18] Visual Center: http://javier.xyz/visual-center/

[19] Google запустил новую версию инструмента Mobile-Friendly Test: http://www.searchengines.ru/news/archives/google_predstavil_new_tool.html

[20] Анализ эффектов для изображений, снижающих производительность: https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/

[21] Browser Calories: https://browserdiet.com/calories/

[22] The Coach: современная альтернатива для YSlow: https://www.maxcdn.com/blog/coach-yslow-alternative/

[23] Наши лучшие практики, которые убивают мобильную веб-производительность: http://molily.de/mobile-web-performance/

[24] В Google появятся AMP-страницы кулинарных сайтов : http://www.searchengines.ru/news/archives/google_proindek.html

[25] Google дает возможность видеть посетителей страниц AMP в отчетах Google Search Analytics reporting: http://searchengineland.com/google-adds-ability-see-people-find-amp-pages-google-search-analytics-reporting-249844

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

[27] Создание адаптивной зацикленной анимации с идущим человеком с помощью SVG и CSS steps(): http://thenewcode.com/1082/Make-a-Responsive-Animated-Walk-Cycle-with-SVG-and-CSS-steps

[28] Эксперимент с анимацией и UI: http://blog.scottlogic.com/2016/05/20/experiment-with-animation-and-ui.html

[29] THREE Image Transition: http://codepen.io/zadvorsky/pen/PNXbGo

[30] Утерянное искусство оформления посещенных ссылок: https://medium.com/@ABatickaya/%D1%83%D1%82%D0%B5%D1%80%D1%8F%D0%BD%D0%BD%D0%BE%D0%B5-%D0%B8%D1%81%D0%BA%D1%83%D1%81%D1%81%D1%82%D0%B2%D0%BE-%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BF%D0%BE%D1%81%D0%B5%D1%89%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA-33c5fe44a862#.sku4f3d9x

[31] The lost art of visited links: http://jgthms.com/the-lost-art-of-visited-links.html

[32] Хорошие и плохие CSS-практики для начинающих: https://medium.com/@ABatickaya/%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B5-%D0%B8-%D0%BF%D0%BB%D0%BE%D1%85%D0%B8%D0%B5-css-%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B8-%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-619289ce8bae

[33] Good and Bad CSS Practices for Beginners: https://speckyboy.com/2016/05/10/good-bad-css-practices/

[34] Важность !important: гарантия неизменяемости в CSS: http://css-live.ru/articles/vazhnost-important-garantiya-neizmenyaemosti-v-css.html

[35] The Importance of !important: Forcing Immutability in CSS: http://csswizardry.com/2016/05/the-importance-of-important/

[36] БЭМантика: пишите осмысленные стили без повторов: http://css-live.ru/articles/bemantika-pishite-osmyslennye-stili-bez-povtorov.html

[37] BEMantic: DRY Like You Mean It: https://medium.com/@stowball/bemantic-dry-like-you-mean-it-133ea3843d98

[38] Все или ничего: http://prgssr.ru/development/vse-ili-nichego.html

[39] All or Nothing: http://snook.ca/archives/html_and_css/all-or-nothing

[40] Нюансы использования цепочек одинаковых классов: http://frontender.info/subtleties-with-self-chained-classes/

[41] Subtleties with Self-Chained Classes: http://csswizardry.com/2015/06/subtleties-with-self-chained-classes/

[42] Магия CSS. Глава 1. Блок: https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-64baf79cd9a5

[43] Bootstrap’s Reboot: https://medium.com/css-mine/bootstraps-reboot-next-evolutionary-step-for-css-reset-a30f718521b9

[44] Техники написания кода в CSS: https://hacks.mozilla.org/2016/05/css-coding-techniques/

[45] Отладка CSS: https://benfrain.com/debugging-css/

[46] Советы по выравниванию иконок относительно текста: https://css-tricks.com/tips-aligning-icons-text/

[47] ease-out, in; ease-in, out: https://css-tricks.com/ease-out-in-ease-in-out/

[48] Руководство PostCSS по улучшению селекторов и медиа-запросов: https://www.sitepoint.com/the-postcss-guide-to-improving-selectors-and-media-queries/

[49] Подробный разбор синтаксиса значений свойств в CSS: https://www.smashingmagazine.com/2016/05/understanding-the-css-property-value-syntax/

[50] checkbox.css — небольшой набор CSS3 анимаций для чекбоксов: https://720kb.github.io/checkbox.css/

[51] Использование свойств object-fit и object-position в CSS: https://www.sitepoint.com/using-css-object-fit-object-position-properties/

[52] CSSPurge: http://www.csspurge.com/

[53] Cutestrap: https://www.cutestrap.com/

[54] Карусель без JavaScript с полноэкранным режимом: https://dizzyzane.github.io/carousel-css/

[55] Уменьшаем размер публикуемых npm модулей: https://habrahabr.ru/company/Voximplant/blog/283552/

[56] Что браузеры делают с вашим JavaScript-кодом: об оптимизациях в JS-движках на примере V8: https://habrahabr.ru/company/jugru/blog/301040/

[57] Фундамент масштабируемости javascript приложения: https://habrahabr.ru/post/301020/

[58] Для чего вообще нужна изоморфность?: https://habrahabr.ru/post/301146/

[59] Визуализация гео-данных в d3.js: http://frontender.info/d3js-map-visualization/

[60] Релиз jQuery 3.0 Release Candidate: http://blog.jquery.com/2016/05/20/jquery-3-0-release-candidate-released/

[61] Отложенная загрузка изображений? Не полагайтесь на JS!: http://robinosborne.co.uk/2016/05/16/lazy-loading-images-dont-rely-on-javascript/

[62] Взлом лоттереи на JavaScript: https://blog.securityevaluators.com/hacking-the-javascript-lottery-80cc437e3b7f

[63] Распутывание спагетти-кода: как писать поддерживаемый JS: https://www.sitepoint.com/write-maintainable-javascript/

[64] Прототипическое наследование в JS: https://medium.com/@kevincennis/prototypal-inheritance-781bccc97edb

[65] Martin Fowler: рефакторинг javascript кода видео-магазина: http://martinfowler.com/articles/refactoring-video-store-js/

[66] Кастомный PDF рендеринг в JavaScript с Mozilla PDF.Js: https://www.sitepoint.com/custom-pdf-rendering/

[67] Сравнение React vs. Angular2: битва тяжеловесов в JS: http://blog.debugme.eu/react-vs-angular2/

[68] Используем Angular CLI для ускорения проектов на Angular 2 : https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects

[69] Обновление вашего приложения до Angular 1.5 и выше!: https://www.sitepoint.com/upgrade-to-angular-components/

[70] Вещи, которые впечатлили меня в Angular 2: http://teropa.info/blog/2016/05/19/things-that-excite-me-about-angular-2.html

[71] React с Webpack + Meteor в качестве бекенда: http://julian.io/react-with-webpack-meteor-as-a-backend/

[72] Компонуемые компоненты в React: http://mintuz.com/2016/05/19/composable-react-components/

[73] Learn Redux: https://learnredux.com/

[74] Создание React + Flux приложения с аутентификацией пользователя: https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication

[75] Как написать Google Maps React компонент: https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/

[76] Разбираемся с пробелами в литералах шаблонов ES6: http://www.2ality.com/2016/05/template-literal-whitespace.html

[77] Классы в ES6 — новая «плохая» часть в JS6: https://medium.com/@rajaraodv/is-class-in-es6-the-new-bad-part-6c4e6fe1ee65

[78] Оптимизация кода ES6 для производительной минификации: https://medium.com/modus-create-front-end-development/optimize-es6-output-size-performance-ninja-tricks-included-d4fc2d313f66

[79] Изучение промисов в ES6: https://www.eventbrite.com/engineering/learning-es6-promises/

[80] Шесть изящных приемов для ES6: http://www.2ality.com/2016/05/six-nifty-es6-tricks.html

[81] Скрытая сила ES6 генераторов: https://medium.com/javascript-scene/the-hidden-power-of-es6-generators-observable-async-flow-control-cfa4c7f31435

[82] lebab — конвертирует ES5 код в читаемый ES6 код (babel наоборот): https://github.com/mohebifar/lebab

[83] Интерполяции строк в JavaScript: https://www.oreilly.com/learning/javascript-string-interpolations

[84] ES6 модули и прочее из ES2015, ES2016 и выше в preview Microsoft Edge: https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/

[85] Push.js: https://github.com/Nickersoft/push.js

[86] Timedropper: http://felicegattuso.com/projects/timedropper/

[87] nlp_compromise: https://github.com/nlp-compromise/nlp_compromise

[88] jQuery плагины для подсветки текста: https://www.sitepoint.com/10-jquery-text-highlighter-plugins/

[89] Подборка решений для создания отзывчивых таблиц с данными: https://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/

[90] Firefox впервые обогнал браузеры от Microsoft по частоте использования: http://www.3dnews.ru/933027/

[91] Google запланировала полный отказ от автозапуска Flash в Chrome к концу 2016 года: https://vc.ru/n/chrome-no-flash-end2016

[92] В Chrome прекращено использование клавиши Backspacе для навигации: http://www.opennet.ru/opennews/art.shtml?num=44466

[93] Opera перезапустила рекомендательный сервис новостей в браузере: https://vc.ru/n/opera-news

[94] В Firefox будет улучшен интерфейс закладок: http://www.opennet.ru/opennews/art.shtml?num=44452

[95] Web Notifications в Microsoft Edge: https://blogs.windows.com/msedgedev/2016/05/16/web-notifications-microsoft-edge/

[96] Взгляд назад: один год Microsoft Edge: https://www.smashingmagazine.com/2016/05/one-year-microsoft-edge/

[97] Flash мертв (в Chrome), и в этот раз это именно так: http://www.webdesignerdepot.com/2016/05/flash-is-dead-in-chrome-and-we-really-mean-it-this-time/

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

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

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

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

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