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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #64 – Олег Мохов о том, как комфортно и правильно руководить разработчиками: https://soundcloud.com/frontend-weekend/fw-64

[8] Новости 512 — Выпуск №17 (30.07 — 05.08): https://soundcloud.com/csssr/news512_017

[9] Ночной фронтенд #44 —Как пересадить всех разработчиков в компании на свой велосипед: https://medium.com/devschacht/nightly-44-79b29f06ee31

[10] Тенденция «Bullshit Web»: http://www.opennet.ru/opennews/art.shtml?num=49081

[11] Веб — это все еще оружие DARPA: https://medium.com/@giacomo_59737/the-web-is-still-a-darpa-weapon-31e3c3b032b8

[12] Frontend News #2: ускоренный курс по clipboard api: https://frontendnews.io/editions/2018-08-01-copy-and-paste-clipboard-api

[13] По поводу статуса deprecated для xlink:href в SVG: https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/

[14] Нас атакуют! 23+ лучших практик по безопасности Node.js : https://medium.com/@nodepractices/were-under-attack-23-node-js-security-best-practices-e33c146cb87d

[15] Стоимость JavaScript в 2018: https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

[16] Динамическая загрузка ресурсов с помощью Network Information API и service workers: https://deanhume.com/dynamic-resources-using-the-network-information-api-and-service-workers/

[17] Как ускорить загрузку вашего сайта с помощью WebP изображений: https://techstacker.com/load-website-faster-with-webp-images/MHzDWJFko9EB4fBep

[18] Пять шагов по ускорению нагруженных изображениями сайтов: https://codeburst.io/5-steps-to-speed-up-your-image-heavy-website-65c874a86966

[19] PWA — это просто: https://habr.com/post/418923/

[20] Создание прогрессивного веб-приложения (PWA): без React, Angular и Vue: https://blog.logrocket.com/building-a-progressive-web-app-pwa-no-react-no-angular-no-vue-aefdded3b5e

[21] Что такое PWA и почему вы почему это должно вас волновать?: https://blog.bitsrc.io/what-is-a-pwa-and-why-should-you-care-388afb6c0bad

[22] Вспомогательные карточки с описанием принципов доступности компонентов, часто встречающихся в вебе: https://davatron5000.github.io/a11y-nutrition-cards/

[23] Sara Soueidan о дизайне и создании доступных переключателей: https://www.sarasoueidan.com/blog/toggle-switch-design/

[24] Pure CSS Moustached Nanny: https://codepen.io/miocene/pen/mjLPVp

[25] little-big-city: https://pissang.github.io/little-big-city/

[26] Вписывание HTML5 видео в фоновый цвет с использованием canvas: https://github.com/vin-ni/videomatchingbackgroundcolor

[27] Методики и инструменты для разработки стилей веб-страниц: https://habr.com/company/ruvds/blog/418825/

[28] Пишем CSS лучше и красивее: https://habr.com/company/alconost/blog/419095/.com.kogda-pri

[29] Как мы делали веб-интерфейс для Google Photos: заглядываем под капот: http://css-live.ru/articles/kak-my-delali-veb-interfejs-dlya-google-photos-zaglyadyvaem-pod-kapot.html

[30] Двойной щелчок на чистом CSS: https://codepen.io/MartijnCuppens/pen/GZWgaQ?editors=1100

[31] CSS Grid — руководство для начинающих: https://medium.freecodecamp.org/css-grid-the-beginners-guide-45998e6f6b8

[32] Flexbox — анимированное руководство: https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2

[33] StyleURL: https://www.styleurl.app/

[34] Фокус с единицами вьюпорта на мобильных: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

[35] Chen Hui Jing о CSS exclusions: https://www.chenhuijing.com/blog/css-exclusions-with-queen-bey/

[36] на недавнюю статью Ben Frain на ту же тему: https://benfrain.com/the-frustrations-of-using-css-shapes-and-css-exclusions/

[37] Контролированный скроллинг с помощью CSS Scroll Snap: https://developers.google.com/web/updates/2018/07/css-scroll-snap

[38] Практическое руководство по CSS переменным (кастомным свойствам): https://www.sitepoint.com/practical-guide-css-variables-custom-properties/

[39] Пятничный JS: игра в 0 строк JS и CSS: https://habr.com/post/419135/

[40] JS-код, римские цифры, геометрические загадки: как мы шифруем свой возраст: https://habr.com/company/dataart/blog/419159/.com

[41] Реактивность в JavaScript: простой и понятный пример: https://habr.com/company/ruvds/blog/418633/.com

[42] Введение в API MutationObserver из JavaScript: http://css-live.ru/articles/vvedenie-v-api-mutationobserver-iz-javascript.html

[43] JavaScript ES6: 5 новых абстракций для улучшения вашего кода: https://blog.logrocket.com/javascript-es6-5-new-abstractions-to-improve-your-code-54a369e82407

[44] Я создал одно и то же приложение на React и на Vue. И вот какие отличия: https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd

[45] Самые популярные JavaScript репозитории на GitHub за июль 2018: https://itnext.io/july-2018-most-popular-javascript-repositories-on-github-e130c13cd75d

[46] Закрываем пробел между низкоуровневыми и высокоуровневыми JavaScript библиотеками для построения графиков: https://medium.com/@juned.chhipa/bridging-the-gap-between-low-level-and-high-level-charting-libraries-a8f6c1819ba5

[47] Представление Fusion.js: Универсального веб-фреймворка на базе плагинов (от Uber): https://eng.uber.com/fusionjs/

[48] Строка кода в Javascript, замедлявшая FT.com в десять раз: https://medium.com/ft-product-technology/this-one-line-of-javascript-made-ft-com-10-times-slower-5afb02bfd93f

[49] Освоение Vuex — от нуля до героя: https://medium.com/dailyjs/mastering-vuex-zero-to-hero-e0ca1f421d45

[50] Создание интерактивного валидатора паролей: http://ederdiaz.com/blog/2018/07/31/making-an-interactive-password-validator-wotw/

[51] Юнит-тестирование Vue-Router: https://medium.com/js-dojo/unit-testing-vue-router-1d091241312

[52] Углубленное руководство на VuePress: документация и блог на Vue: https://snipcart.com/blog/vuepress-tutorial-vuejs-documentation

[53] 5 инструментов для ускорения разработки на Vue.js: https://blog.bitsrc.io/5-tools-for-faster-vue-js-app-development-ad7eda1ee6a8

[54] [Перевод] 4 способа стилизировать React-компоненты: https://habr.com/post/419207/

[55] Реактивность в JavaScript: простой и понятный пример: https://habr.com/company/ruvds/blog/418633/

[56] План становления React-разработчиком: https://github.com/lex111/react-developer-roadmap/blob/master/README-RU.md

[57] Имплементация поиска на GraphQL: https://medium.com/open-graphql/implementing-search-in-graphql-11d5f71f179

[58] Возможно, вам не нужен MobX или Redux: https://medium.com/@stevenbradleyconsulting/you-might-not-need-mobx-or-redux-67fccab882ae

[59] Популярные ошибки линтера для ES6/React: https://medium.com/@dwaynelavon/popular-es6-react-lint-errors-7b8e3b90d989

[60] React + TypeScript = любовь: https://medium.com/@amcdnl/react-typescript-%EF%B8%8F-647aa7d054a9

[61] Интернационализированные приложения на React с помощью библиотеки React-intl: https://medium.com/@marcelmokos/internationalize-react-apps-done-right-using-react-intl-library-82978dbe175e

[62] Новые возможности Angular 6.1: https://habr.com/company/ruvds/blog/418821/

[63] Что нового в WebStorm для Angular: https://blog.angular.io/whats-new-in-webstorm-for-angular-acd804b84ec9

[64] Директивы атрибутов и формы в Angular: https://netbasal.com/attribute-directives-angular-forms-b40503643089

[65] Псевдо-события Angular: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee

[66] await-of: https://github.com/xobotyi/await-of

[67] between.js: https://github.com/sasha240100/between.js

[68] Circular Audio Wave — JS библиотека для визуализации аудио в круговой форме: https://medium.com/@kelvinau4413/circular-audio-wave-js-library-for-audio-visualization-in-circular-waveform-49afe0aa87a

[69] apexcharts.js: https://github.com/apexcharts/apexcharts.js

[70] 7 JS библиотек для чтения мыслей с электроэнцефалографией в 2018: https://blog.bitsrc.io/7-javascript-eeg-mind-reading-libraries-for-2018-9a8e28544cd7

[71] Амиго всё. Now it's official: https://habr.com/company/mailru/blog/418785/.com!s-segodnyashnego-dnya-ma

[72] Firefox легко обходит защиту в новом интерфейсе Gmail: https://habr.com/company/globalsign/blog/418987/

[73] Против пораженческих настроений в приватности. Почему браузеры всё-таки могут остановить фингерпринтинг: https://habr.com/post/418527/

[74] Технические подробности релиза Firefox 61 в блоге Марата Таналина: http://tanalin.com/blog/2018/08/firefox-61/

[75] Mozilla решила изменить логотип Firefox и просит пользователей оставить свои отзывы: https://itc.ua/news/mozilla-reshila-izmenit-logotip-firefox-i-prosit-polzovateley-ostavit-svoi-otzyivyi/

[76] Google выпустила официальную версию VR Chrome для платформы Daydream: https://tproger.ru/news/daydream-vr-chrome/

[77] Microsoft Edge обзавёлся продвинутой поддержкой технологии Web Authentication: http://www.wincore.ru/windows-news/6871-microsoft-edge-obzavelsya-prodvinutoy-podderzhkoy-tehnologii-web-authentication.html

[78] Баг в браузере Microsoft Edge позволяет похищать локальные файлы: https://xakep.ru/2018/08/03/edge-html-bug/

[79] Карьерные решения на примере компьютерных игр начала 2000-х: https://dou.ua/lenta/articles/career-decisions-and-games/

[80] ИИ, представься! Зачем и как отличать машину от человека: https://www.computerra.ru/230319/ii-predstavsya-zachem-i-kak-otlichat-mashinu-ot-cheloveka/

[81] Junior, middle и senior разработчики: в чём отличие — отвечают эксперты: https://tproger.ru/experts/junior-middle-senior-developers-differences/

[82] GitHub интегрирует инструмент для запуска Cloud Build от Google: https://tproger.ru/news/github-cloud-build/

[83] Обратная совместимость UI: https://medium.com/@hexlet/%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D0%B0%D1%8F-%D1%81%D0%BE%D0%B2%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D1%8C-ui-bfa08f71351a

[84] Рейтинг языков программирования 2018 года от издания IEEE Spectrum : http://www.opennet.ru/opennews/art.shtml?num=49069

[85] «Яндекс» запустил бесплатный сервис для создания опросов и сбора анкет: https://vc.ru/42910-yandeks-zapustil-besplatnyy-servis-dlya-sozdaniya-oprosov-i-sbora-anket

[86] От чат-ботов к разговорному ИИ: разработка умных ассистентов для бизнеса: https://vc.ru/42838-aimylogic

[87] Мобильный интернет вещей ожидает взрывной рост: https://www.computerra.ru/230312/mobilnyj-internet-veshhej-ozhidaet-vzryvnoj-rost/

[88] Дайджест за прошлую неделю: https://habr.com/company/zfort/blog/418589/

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

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

[91] Источник: https://habr.com/post/419335/?utm_campaign=419335

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