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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №432 (7 — 13 сентября 2020)

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №432 (7 — 13 сентября 2020) - 1

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

Медиа

podcast Подкаст «Веб-стандарты» №246. Chrome 86, фокус, ::marker, отладка шрифтов, скринридеры, модалки, флексы и селект [6]
podcast Подкаст «Фронтенд Юность (18+)» #154 Храни процедуры с молоду [7]
podcast Подкаст CSSSR — Оптимизация фронтенда, адаптивность в 2020, scaling NodeJS, SSH-приманки и Figma для разработчиков [8]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №432 (7 — 13 сентября 2020) - 5 Веб-разработка

habr Исправление странной ошибки и стратегии отладки, проверенные временем [9]
habr TeX в SVG: опенсорс-решение в помощь веб-разработчикам образовательных проектов [10]
habr Путь к Федеративному GraphQL [11]
habr Безопасность npm-проектов, часть 2 [12]
Вы знаете что такое GeoJSON? [13]
Cross-site Scripting (XSS): определение и предотвращение [14]
en 5 малоизвестных функций Chrome DevTools [15]
en Google развеял популярные мифы о контенте [16]
en Изменение определенных букв с помощью CSS и JavaScript [17]
en Практическое руководство по Web Cryptography API [18]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №432 (7 — 13 сентября 2020) - 24 CSS

habr Проектирование заголовочных частей сайтов с использованием CSS Flexbox [29]
en Кастомные, доступные radio/checkbox кнопки с идеальным выравниванием [30]
en Parsel: небольшой парсер CSS-селекторов [31]
en Как работает перспектива в CSS [32]
en Как легко создавать текстовые градиенты с помощью CSS. [33]

JavaScript

habr TypeScript. Продвинутые типы [34]
habr Работа с непредвиденными данными в JavaScript [35]
en Работа с медиа-запросами в JavaScript [36]
en Обновление архитектуры DevTools: переход на модули JavaScript [37]
en Настоящий компас в мобильных браузерах с помощью Javascript [38]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №432 (7 — 13 сентября 2020) - 60 Браузеры

Mozilla представила новые возможности по продвижению дополнений к Firefox [65]
В Chrome началось включение блокировщика ресурсоёмкой рекламы [66]
Вредоносный пакет npm воровал файлы Discord и браузеров [67]

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

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

Автор: alexzfort

Источник [71]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «Веб-стандарты» №246. Chrome 86, фокус, ::marker, отладка шрифтов, скринридеры, модалки, флексы и селект: https://medium.com/web-standards/episode-246-d16a8e4ec0c2

[7] Подкаст «Фронтенд Юность (18+)» #154 Храни процедуры с молоду: https://soundcloud.com/frontend_u/e154/

[8] Подкаст CSSSR — Оптимизация фронтенда, адаптивность в 2020, scaling NodeJS, SSH-приманки и Figma для разработчиков: https://soundcloud.com/csssr/optimizatsiya-frontenda-adaptivnost-v-2020-scaling-nodejs-ssh-primanki-i-figma-dlya-razrabotchikov

[9] Исправление странной ошибки и стратегии отладки, проверенные временем: https://habr.com/ru/company/ruvds/blog/518030/

[10] TeX в SVG: опенсорс-решение в помощь веб-разработчикам образовательных проектов: https://habr.com/ru/company/yandex/blog/518568/

[11] Путь к Федеративному GraphQL: https://habr.com/ru/post/518554/

[12] Безопасность npm-проектов, часть 2: https://habr.com/ru/company/domclick/blog/518502/

[13] Вы знаете что такое GeoJSON?: https://webdevblog.ru/vy-znaete-chto-takoe-geojson/

[14] Cross-site Scripting (XSS): определение и предотвращение: https://webdevblog.ru/cross-site-scripting-xss-opredelenie-i-predotvrashhenie/

[15] 5 малоизвестных функций Chrome DevTools : https://levelup.gitconnected.com/5-lesser-known-features-of-chrome-devtools-1ff3cd2a7518

[16] Google развеял популярные мифы о контенте: https://searchengines.guru/ru/news/2048708

[17] Изменение определенных букв с помощью CSS и JavaScript : https://css-tricks.com/modifying-specific-letters-with-css-and-javascript/

[18] Практическое руководство по Web Cryptography API : https://dev.to/voraciousdev/a-practical-guide-to-the-web-cryptography-api-4o8n

[19] Как сделать предзагрузку адаптивных изображений с помощью imagesize и imagesrcset : https://www.stefanjudis.com/today-i-learned/how-to-preload-responsive-images-with-imagesizes-and-imagesrcset/

[20] PRPL паттерн: Решения для оптимизации современных веб-приложений : https://blog.logrocket.com/prpl-pattern-solutions-for-modern-web-app-optimization/

[21] AVIF готов к использованию: https://jakearchibald.com/2020/avif-has-landed/

[22] Метрики производительности для фронтенд приложений : https://blog.bitsrc.io/performance-metrics-for-front-end-applications-a04fdfde217a

[23] Введение в программный запуск Lighthouse : https://www.smashingmagazine.com/2020/09/introduction-running-lighthouse-programmatically/

[24] Разработка в учетом Reduced Motion для людей, чувствительных к движущимся объектам : https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/

[25] Как и почему доступность важна для SEO : https://www.searchenginejournal.com/seo-accessibility/379582/

[26] На что обращать внимание при аудите доступности : https://www.deque.com/blog/what-to-look-for-in-an-accessibility-audit/

[27] Как получить рукописную анимацию с неровными штрихами с помощью SVG Stroke : https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/

[28] Кнопки с эффектом конфетти : https://frontend.horse/articles/buttons-that-spark-joy/

[29] Проектирование заголовочных частей сайтов с использованием CSS Flexbox: https://habr.com/ru/company/ruvds/blog/518514/

[30] Кастомные, доступные radio/checkbox кнопки с идеальным выравниванием : https://codyhouse.co/blog/post/custom-accessible-radio-checkbox-buttons-vertical-alignment

[31] Parsel: небольшой парсер CSS-селекторов : https://lea.verou.me/2020/09/parsel-a-tiny-permissive-css-selector-parser/

[32] Как работает перспектива в CSS : https://css-tricks.com/how-css-perspective-works/

[33] Как легко создавать текстовые градиенты с помощью CSS. : https://dev.to/tejash023/how-to-create-text-gradients-using-css-easily-1kac

[34] TypeScript. Продвинутые типы: https://habr.com/ru/company/piter/blog/518428/

[35] Работа с непредвиденными данными в JavaScript: https://habr.com/ru/company/microsoft/blog/518020/

[36] Работа с медиа-запросами в JavaScript : https://css-tricks.com/working-with-javascript-media-queries/

[37] Обновление архитектуры DevTools: переход на модули JavaScript : https://developers.google.com/web/updates/2020/09/migrating-to-js-modules

[38] Настоящий компас в мобильных браузерах с помощью Javascript : https://dev.to/orkhanjafarovr/real-compass-on-mobile-browsers-with-javascript-3emi

[39] Метод функций bind своими руками : https://dailycoding.io/article/kkcNMJGrYbABLcR6MB6X

[40] Начало работы с современным JavaScript — Proxy : https://medium.com/@michael.karen/getting-started-with-modern-javascript-proxy-789a7fb71c8e

[41] Понимание Event Loop, Callbacks, Promise и Async/Await в JavaScript : https://www.taniarascia.com/asynchronous-javascript-event-loop-callbacks-promises-async-await/

[42] 5 лучших практик clean coding в JavaScript : https://dev.to/deepaksisodiya/5-best-practices-for-clean-coding-in-javascript-26am

[43] React: слоты как у сына маминой подруги: https://habr.com/ru/post/518500/

[44] Почему я разочаровался в хуках: https://habr.com/ru/company/otus/blog/518800/

[45] Jotai, новая библиотека управления состоянием для React : https://www.infoq.com/news/2020/09/jotai-react-state-management/

[46] React Chrono — Компонент временной шкалы для React : https://github.com/prabhuignoto/react-chrono

[47] Функциональные компоненты React с хуками: все, что вам нужно знать : https://www.devaradise.com/react-functional-component-with-hooks

[48] Более простая альтернатива Redux : https://dev.to/spencerpauly/state-containers-a-simpler-alternative-to-redux-for-state-management-3i93

[49] История хуков в React: https://dev.to/manmeet1396/react-hooks-the-history-1laa

[50] Введение в Vue Teleport — новую функциональность в Vue3 : https://medium.com/@mattmaribojoc/an-introduction-to-vue-teleport-a-new-feature-in-vue3-e9ddbf58dd25

[51] Анонс (новой) Ionic Vue Beta : https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/

[52] Советы для новичков в VueJs : https://dev.to/hamishclulee/tips-for-new-vuejs-players-263f

[53] 3 совета по управлению стилями, которые избавят вас от головной боли с CSS в вашем приложении на Angular : https://netbasal.com/3-style-management-tips-that-will-save-you-a-headache-in-your-angular-app-css-94365570987e

[54] ControlValueAccessor и contenteditable в Angular : https://medium.com/its-tinkoff/controlvalueaccessor-and-contenteditable-in-angular-6ebf50b7475e

[55] Локализация Angular с Ivy: https://blog.angular.io/angular-localization-with-ivy-4d8becefb6aa

[56] Преимущества добавления rx-query в ваш проект на Angular : https://indepth.dev/the-benefits-of-adding-rx-query-to-your-angular-project/

[57] Как я избавился от State Observables в Angular : https://indepth.dev/how-i-got-rid-of-state-observables-in-angular/

[58] Оптимизируйте размер пакета Angular в 4 шага : https://dev.to/pmutua/optimize-angular-bundle-size-in-4-steps-52jp

[59] The Ember Times — Issue No. 163: https://dev.to/embertimes/the-ember-times-issue-no-163-3nb0

[60] Подготовка Embroider : https://medium.com/@kiwiupover/embroider-preparation-14d59edafc0b

[61] Совместное использование Parent Model в Route Boundaries : https://ilyaradchenko.com/ember-context-and-shared-parent-state/

[62] Начало работы со Svelte JS: создание корзины для покупок : https://blog.bitsrc.io/getting-started-with-sveltejs-building-a-shopping-cart-with-code-snippets-71e1603b4449

[63] Символьные вычисления в JavaScript с помощью Math.js : https://blog.klipse.tech/javascript/2020/09/10/symbolic-computation-math-js.html

[64] vanilla-colorful — порт react-colourful на ванильные Custom Elements. : https://github.com/web-padawan/vanilla-colorful

[65] Mozilla представила новые возможности по продвижению дополнений к Firefox: https://www.opennet.ru/opennews/art.shtml?num=53694

[66] В Chrome началось включение блокировщика ресурсоёмкой рекламы: https://www.opennet.ru/opennews/art.shtml?num=53677

[67] Вредоносный пакет npm воровал файлы Discord и браузеров: https://xakep.ru/2020/09/02/fallguys-malware/

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

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

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

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