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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №379 (2 — 8 сентября 2019)

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №379 (2 — 8 сентября 2019) - 1

Медиа [1]    |    Веб-разработка [2]    |    CSS [3]    |    Javascript [4]    |    Браузеры [5]    |    Новости [6]


Медиа

podcast Подкаст «Фронтенд Юность (18+)»: #106 Сеньёр знает цену говнокоду [7]
podcast Подкаст «Frontend Weekend» #97 [8]: Всеволод Родионов о том, как вместо карьеры мореплавателя построить карьеру разработчика

Дайджест свежих материалов из мира фронтенда за последнюю неделю №379 (2 — 8 сентября 2019) - 4 Веб-разработка

habr Аккордеон, faq, спойлер и другие раскрывающиеся виджеты [9]
habr Новые типы микроразметки для расширенных интерактивных сниппетов [10]
Архитектура фронтенда: Средний круг [11]
en Apple только что запустила веб-компоненты на продакшене, и вы, вероятно, пропустили это [12]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №379 (2 — 8 сентября 2019) - 25 CSS

habr Всё, что вам нужно знать про CSS Margin [30]
habr Инструмент для сравнения CSS фреймворков [31]
en Обрезка и визуальная потеря данных в CSS [32]
en Понимание специфичности в CSS [33]
en Использование PostCSS для автоматизации вашего рабочего процесса [34]
en Различные методы расширения прямоугольника c сохранением border-radius [35]
en Мой любимый CSS хак [36]
en CSS Variables for IE11: Настоящий polyfill для пользовательских свойств в IE11 [37]
en Что делают CSS-разработчики и зачем они нужны? [38]

JavaScript

Анимация ссылок в строке браузера с помощью JavaScript и эмодзи [39]
5 заповедей TypeScript-разработчика [40]
en Как оптимизировать ваше приложение JavaScript с помощью сервис воркеров [41]
en Должен ли сайт работать без JavaScript? [42]
en Простой самодельный JavaScript обфускатор [43]
en Как работает JavaScript [44]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №379 (2 — 8 сентября 2019) - 71 Браузеры

Релиз Firefox 69 [81]
Обновление Firefox снизит энергопотребление macOS-устройств в три раза [82]
Mozilla уверяет, что обновления WebExtensions API не повредят работе блокировщиков в Firefox [83]
Mozilla начала блокировать cookie-файлы для отслеживания действий пользователей в браузере Firefox [84]
Вышел новый Яндекс.Браузер: музыка, уведомления, поиск по странице [85]
Объединение рекламных компаний предложило альтернативу cookies на фоне запрета Mozilla на отслеживание пользователей [86]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №379 (2 — 8 сентября 2019) - 72 Занимательное

Deepfake: как нейросети раздевают знаменитостей и сводят нас с ума — и чем это опасно [87]
Факторы ранжирования Google 2019 — исследование Рэнда Фишкина [88]
Виды машинного обучения [89]
В двух словах о шрифтах. Часть первая [90]
Google открыл код библиотеки для конфиденциальной обработки данных [91]
Apple раскритиковала отчёт Google об уязвимости iPhone и обвинила компанию в создании иллюзии массовой угрозы [92]
Почему не стоит писать комментарии в коде? [93]


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

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

Автор: alexzfort

Источник [97]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

[6] Новости: #intresting

[7] Подкаст «Фронтенд Юность (18+)»: #106 Сеньёр знает цену говнокоду: https://soundcloud.com/frontend_u/e106

[8] Подкаст «Frontend Weekend» #97: https://soundcloud.com/frontend-weekend/fw-97

[9] Аккордеон, faq, спойлер и другие раскрывающиеся виджеты: https://habr.com/ru/post/465623/

[10] Новые типы микроразметки для расширенных интерактивных сниппетов: https://habr.com/ru/company/promopult/blog/465577/

[11] Архитектура фронтенда: Средний круг: https://medium.com/front-end-in-regions-grodno/%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0-%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B0-%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B8%D0%B9-%D0%BA%D1%80%D1%83%D0%B3-df9d4bdb22fe

[12] Apple только что запустила веб-компоненты на продакшене, и вы, вероятно, пропустили это: https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf

[13] Кастомная тема в Chrome DevTools: https://medium.com/@neonick/%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%BD%D0%B0%D1%8F-%D1%82%D0%B5%D0%BC%D0%B0-%D0%B2-chrome-devtools-4fc8650593d5

[14] Что нового в DevTools (Chrome 78): https://developers.google.com/web/updates/2019/09/devtools

[15] Отладка TypeScript в Firefox DevTools: https://hacks.mozilla.org/2019/09/debugging-typescript-in-firefox-devtools/

[16] Webpack Boilerplate — минимальный Webpack 4 бойлерплейт с Sass, ESLint, Hot Module Replacement и оптимизацией development/production: https://github.com/taniarascia/webpack-boilerplate

[17] 5 советов для Firefox DevTools — Storage Inspector: https://dev.to/lakatos88/5-tips-and-tricks-for-firefox-devtools-storage-inspector-3l0o

[18] Chrome 77 — Что нового в DevTools : https://www.youtube.com/watch?v=R8KzoMoKhnM

[19] «Globalization Tools — The State of the Web». Новое видео на канале google developers с Андреем Ситником в качестве приглашенного гостя: https://www.youtube.com/watch?v=F2N-evGOcxc&feature=youtu.be

[20] Инклюзивные компоненты: переключатель темы: https://medium.com/web-standards/theme-switcher-a6e3c12d5d75

[21] Итак, вам предъявляют иск за несоблюдение доступности : https://www.telerik.com/blogs/so-youre-being-sued-for-accessibility-non-compliance

[22] Особенности Google PageSpeed: улучшение оценки сайта и его рейтинга в поиске: https://habr.com/ru/company/ruvds/blog/462005/

[23] Чеклист для аудита веб-производительности: https://medium.com/@david.gilbertson/a-web-performance-audit-checklist-666ba09f8cff

[24] Веб-производительность: минимизация DOM Reflow/Layout Thrashing: https://medium.com/better-programming/web-performance-dom-reflow-76ac7c4d2d4f

[25] Почему делаю предзагрузку шрифта, даже если в этом нет потребности: https://www.alexrp.co.uk/blog/preloading-fonts.html

[26] Как динамически изменять цвета изображений продуктов с помощью CSS Blend Mode и SVG : https://tympanus.net/codrops/2019/09/03/how-to-dynamically-change-the-colors-of-product-images-using-css-blend-mode-and-svg/

[27] Конфигуратор для создания пользовательских эффектов искажения на WebGL: https://tympanus.net/codrops/2019/09/04/a-configurator-for-creating-custom-webgl-distortion-effects/

[28] Подборка креативных сайтов «Inspirational Websites Roundup» #8: https://tympanus.net/codrops/2019/09/05/inspirational-websites-roundup-8/

[29] Как создать Webcam Audio Visualizer с помощью Three.js: https://tympanus.net/codrops/2019/09/06/how-to-create-a-webcam-audio-visualizer-with-three-js/

[30] Всё, что вам нужно знать про CSS Margin: https://habr.com/ru/post/465839/

[31] Инструмент для сравнения CSS фреймворков: https://habr.com/ru/post/466603/

[32] Обрезка и визуальная потеря данных в CSS: https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/

[33] Понимание специфичности в CSS: https://alligator.io/css/understanding-specificity-in-css/

[34] Использование PostCSS для автоматизации вашего рабочего процесса: https://css-tricks.com/using-a-postcss-function-to-automate-your-responsive-workflow/

[35] Различные методы расширения прямоугольника c сохранением border-radius: https://css-tricks.com/various-methods-for-expanding-a-box-while-preserving-the-border-radius/

[36] Мой любимый CSS хак: https://dev.to/gajus/my-favorite-css-hack-32g3

[37] CSS Variables for IE11: Настоящий polyfill для пользовательских свойств в IE11: https://github.com/nuxodin/ie11CustomProperties

[38] Что делают CSS-разработчики и зачем они нужны? : https://www.toptal.com/css/why-you-need-a-css-developer

[39] Анимация ссылок в строке браузера с помощью JavaScript и эмодзи: https://vc.ru/dev/81775-animaciya-ssylok-v-stroke-brauzera-s-pomoshchyu-javascript-i-emodzi

[40] 5 заповедей TypeScript-разработчика: https://dailycoding.io/article/lNK6ss41DFLufEVatxZy

[41] Как оптимизировать ваше приложение JavaScript с помощью сервис воркеров: https://www.freecodecamp.org/news/optimize-your-javascript-app-by-using-service-workers/

[42] Должен ли сайт работать без JavaScript?: https://css-tricks.com/should-a-website-work-without-javascript/

[43] Простой самодельный JavaScript обфускатор : https://antoinevastel.com/javascript/2019/09/04/home-made-obfuscator.html

[44] Как работает JavaScript : https://medium.com/better-programming/how-javascript-works-1706b9b66c4d

[45] Профессиональное использование DOM: https://itnext.io/using-the-dom-like-a-pro-163a6c552eba

[46] Как делать trim строк в JavaScript (ES2019): https://medium.com/coding-in-simple-english/how-to-trim-strings-in-javascript-es2019-3823070c9316

[47] Как ускорить оператор spread в JavaScript: https://dmitripavlutin.com/javascript-spread-operator-performance-optimization/

[48] Асинхронный JavaScript: введение в JavaScript Promises: https://www.twilio.com/blog/asynchronous-javascript-introduction-promises

[49] 8 привычек, которых следует избегать при разработке на Javascript : https://medium.com/javascript-in-plain-english/8-habits-you-should-avoid-when-developing-with-javascript-a39a5ca2fae6

[50] Итераторы и генераторы в JavaScript: асинхронные итераторы: https://dev.to/jfet97/javascript-iterators-and-generators-asynchronous-iterators-28b8

[51] Часть 1: https://habr.com/ru/company/ruvds/blog/465811/

[52] Часть 2: https://habr.com/ru/company/ruvds/blog/465813/

[53] Model-Based тестирование в React с помощью конечных автоматов: https://css-tricks.com/model-based-testing-in-react-with-state-machines/

[54] Почему React делает это?: https://gist.github.com/sebmarkbage/a5ef436427437a98408672108df01919

[55] Документация и предосмотр ReactJS компонентов с JSDoc: https://medium.com/@wojciechkrysiak/document-reactjs-components-with-preview-by-using-jsdoc-70d39d2cc777

[56] Добавление индикатора загрузки и уведомлений в ваше React приложение: https://blog.logrocket.com/spinners-notifications-react-app/

[57] Миграция с JavaScript на TypeScript на реальном React проекте : https://drublic.de/blog/from-js-to-typescript/

[58] React Microfrontends и Monorepos: идеальное сочетание: https://blog.nrwl.io/monorepos-and-react-microfrontends-a-perfect-match-d49dca64489a

[59] Все доклады с React Rally 2019 : https://www.youtube.com/playlist?list=PLUD4kD-wL_zaXhR4KU1CkUSIzh1TrvnzA#reactrally2019

[60] Передача данных во Vue.js – как это работает?: https://webdevblog.ru/peredacha-dannyh-vo-vue-js-kak-eto-rabotaet/

[61] Hooks во Vue.js версии 3.0: https://webdevblog.ru/hooks-vo-vue-js-versii-3-0/

[62] Функциональные компоненты Vue.js: что, почему и когда?: https://webdevblog.ru/funkcionalnye-komponenty-vue-js-chto-pochemu-i-kogda/

[63] Опыт использования Vue.js в «Едадиле»: как применяют и почему не выбрали React: https://tproger.ru/video/vuejs-in-edadeal/

[64] Как работать с DOM во Vue: https://www.telerik.com/blogs/how-to-target-the-dom-in-vue

[65] Ленивая загрузка отдельных компонентов Vue и prefetching: https://vueschool.io/articles/vuejs-tutorials/lazy-loading-individual-vue-components-and-prefetching/

[66] Динамические SVG маркеры для Google Maps во Vue.js : https://medium.com/better-programming/dynamic-svg-markers-for-google-maps-in-vue-js-7541fa1a54a

[67] Как использовать переменные среды во Vue.js: https://www.jenniferbland.com/how-to-use-environment-variables-in-vue-js/

[68] Как использовать Google Maps в приложениях на Vue.js : https://medium.com/better-programming/how-to-use-google-maps-with-vue-js-apps-93268bee7b3f

[69] Vue PWA: пример прогрессивного веб-приложения с Nuxt: https://snipcart.com/blog/vue-pwa

[70] Руководство для начинающих по GraphQL с Angular и Apollo: https://medium.com/swlh/beginners-guide-to-graphql-with-angular-and-apollo-2eab75fc806f

[71] Советы по Dependency Injection в Angular : https://codeburst.io/angular-dependency-injection-tips-ddb24b8244be

[72] Как использовать билдеры форм в Angular 8 для валидации реактивных форм : https://blog.logrocket.com/form-builders-angular-8-validate-reactive-forms/

[73] Шаринг компонентов с помощью Angular и Bit: https://blog.bitsrc.io/sharing-components-with-angular-and-bit-b68896806c18

[74] Ember Concurrency: https://nullvoxpopuli.com/2019-08-27-ember-concurrency/

[75] Commit Porto '19: Процветание через цикл рекламы: история Ember.js (Рикардо Мендес): https://www.youtube.com/watch?v=ECkbVa0iC4k

[76] Рассказ о том, как популярная JavaScript-библиотека начала выводить в терминал рекламу: https://habr.com/ru/company/ruvds/blog/465807/

[77] hashids.js — Небольшая JS библиотека для генерации YouTube-подобных идентификаторов из чисел. : https://github.com/niieani/hashids.js

[78] O-GL — минималистичный WebGL фреймворк: https://github.com/oframe/ogl

[79] spacetime: утилита для работы с часовыми зонами: http://spacetime.how/

[80] Создание живых аватаров (типа Animoji) с помощью face-api.js: https://blog.pragli.com/live-avatars-with-faceapi-js/

[81] Релиз Firefox 69: http://www.opennet.ru/opennews/art.shtml?num=51408

[82] Обновление Firefox снизит энергопотребление macOS-устройств в три раза: https://xakep.ru/2019/09/03/firefox-macos/

[83] Mozilla уверяет, что обновления WebExtensions API не повредят работе блокировщиков в Firefox: https://xakep.ru/2019/09/05/mozilla-manifest-v3/

[84] Mozilla начала блокировать cookie-файлы для отслеживания действий пользователей в браузере Firefox: https://vc.ru/services/81732-mozilla-nachala-blokirovat-cookie-fayly-dlya-otslezhivaniya-deystviy-polzovateley-v-brauzere-firefox

[85] Вышел новый Яндекс.Браузер: музыка, уведомления, поиск по странице: https://zen.yandex.ru/media/yandexbrowser/novyi-iandeksbrauzer-muzyka-uvedomleniia-i-poisk-po-saitam-5d6d59e31e8e3f00ac7afd2a

[86] Объединение рекламных компаний предложило альтернативу cookies на фоне запрета Mozilla на отслеживание пользователей: https://vc.ru/marketing/82028-obedinenie-reklamnyh-kompaniy-predlozhilo-alternativu-cookies-na-fone-zapreta-mozilla-na-otslezhivanie-polzovateley

[87] Deepfake: как нейросети раздевают знаменитостей и сводят нас с ума — и чем это опасно: https://disgustingmen.com/tehno/deepfake/

[88] Факторы ранжирования Google 2019 — исследование Рэнда Фишкина: https://www.searchengines.ru/google-ranking-2019.html

[89] Виды машинного обучения: https://medium.com/maria-machine/hunter-heidenreich-what-are-the-types-of-machine-learning-53af8ef4d156

[90] В двух словах о шрифтах. Часть первая: https://vc.ru/design/82050-v-dvuh-slovah-o-shriftah-chast-pervaya

[91] Google открыл код библиотеки для конфиденциальной обработки данных: http://www.opennet.ru/opennews/art.shtml?num=51429

[92] Apple раскритиковала отчёт Google об уязвимости iPhone и обвинила компанию в создании иллюзии массовой угрозы: https://vc.ru/tech/82151-apple-raskritikovala-otchet-google-ob-uyazvimosti-iphone-i-obvinila-kompaniyu-v-sozdanii-illyuzii-massovoy-ugrozy

[93] Почему не стоит писать комментарии в коде?: https://dailycoding.io/article/aj6yB4iJghOa4XjWLXmK

[94] Дайджест за прошлую неделю: https://habr.com/ru/post/465795/

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

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

[97] Источник: https://habr.com/ru/post/466667/?utm_source=habrahabr&utm_medium=rss&utm_campaign=466667