Дайджест свежих материалов из мира фронтенда за последнюю неделю №490 (18 — 24 октября 2021)

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «Фронтенд Юность» #209: Программирование — всё равно не работа: https://soundcloud.com/frontend_u/e209

[7] Подкаст «Сделайте мне красиво» №63 — Сел, порефлексировал и уволился: https://soundcloud.com/begebot/no63-sel-porefleksiroval-i

[8] «Новости 512» от CSSSR: Chrome 95, Node.js 17, память и GC в JS, архитектура, замыкания, изучение фреймворков, отчет W3C: https://soundcloud.com/csssr/chrome-95-nodejs-17-pamyat-i-gc-v-js-arkhitektura-zamykaniya-izuchenie-freymvorkov-otchet-w3c

[9] «Новости 512» от CSSSR: Дока, Parcel 2.0, Nuxt.js 3 beta, разбираемся в CORS, новый фреймворк Remix: https://soundcloud.com/csssr/doka-parcel-20-nuxtjs-3-beta-razbiraemsya-v-cors-novyy-freymvork-remix

[10] Подкаст «Веб-стандарты» #304. State of CSS, цветовые палитры, Яндекс.Браузер, ввод пароля, CSS будущего, зачем нужна Дока: https://soundcloud.com/web-standards/episode-304

[11] proConf #111: CSScamp 2021: https://soundcloud.com/proconf/111-csscamp-2021

[12] Фронтенд-разработчику: 7 основных принципов дизайна: https://habr.com/ru/company/ruvds/blog/582480/

[13] Запустилась Дока — опенсорсный справочник по веб-разработке: https://habr.com/ru/company/yandex_praktikum/blog/584504/

[14] Webpack Module Federation — микрофронтенд на современных технологиях (часть 2) – deep dive: https://habr.com/ru/company/netcracker/blog/584542/

[15] Новый рабочий процесс W3C из будущего: https://css-live.ru/vecssti-s-polej/novyj-rabochij-process-w3c-iz-budushhego.html

[16] Давайте поговорим о нативных HTML табах: https://daverupert.com/2021/10/native-html-tabs/

[17] Обнаружение ввода определенного текста с помощью HTML и CSS: https://www.impressivewebs.com/detecting-specific-text-input-with-html-css/

[18] Как создать многопользовательскую игру в реальном времени с нуля на JS: https://www.smashingmagazine.com/2021/10/real-time-multi-user-game/

[19] Создание SSG, который я всегда хотел: сэндвич из 11ty, Vite и JAM: https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/

[20] Хаос микрофронтенда (и как его решить): https://o-b-one.medium.com/the-micro-frontend-chaos-and-how-to-solve-it-960b0a90c58

[21] Что нового в DevTools (Microsoft Edge 95): https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2021/10/devtools

[22] Что, если… вы могли бы использовать Visual Studio Code в качестве редактора прямо из инструментов разработчика в браузере?: https://christianheilmann.com/2021/10/12/what-if-you-could-use-visual-studio-code-as-the-editor-of-in-browser-developer-tools/

[23] Can Include — проверка, можно ли вкладывать один тег в другой: https://caninclude.glitch.me/

[24] Производительность JavaScript в 2021: https://dou.ua/forums/topic/35074/

[25] Имеет ли смысл предварительная загрузка JS модулей?: https://marian-caikovski.medium.com/does-preloading-of-modules-make-sense-7c3ee9ccdd45

[26] Решение проблем с CLS на веб-сайте электронной коммерции на базе Next.js (пример из практики): https://www.smashingmagazine.com/2021/10/nextjs-ecommerce-cls-case-study/

[27] Оптимизация загрузки ресурсов с помощью Priority Hints: https://web.dev/priority-hints/

[28] Систематически исправляйте веб-доступность: https://yatil.net/blog/fix-web-accessibility-systematically

[29] The Button Cheat Sheet: https://www.buttoncheatsheet.com/

[30] Анимация с повторяющейся типографикой: https://tympanus.net/codrops/2021/10/20/repetitive-typography-animation/

[31] Воссоздание анимации частиц из DNA Capital с помощью Three.js: https://tympanus.net/codrops/2021/10/18/replicating-the-particles-animation-from-dna-capital-with-three-js/

[32] Типы значений в CSS. Абсолютные, относительные и всякие другие: https://habr.com/ru/company/htmlacademy/blog/584786/

[33] CSS переходит на новый, шестой уровень каскадности: https://css-live.ru/vecssti-s-polej/css-perexodit-na-novyj-shestoj-uroven-kaskadnosti.html

[34] Переписываем Tailwind компоненты на ванильном CSS: https://medium.com/codex/more-tailwind-to-vanilla-component-rewrites-1-of-who-knows-how-many-36e1ff5b6bd6

[35] Распространенные ошибки при написании CSS с помощью БЭМ: https://dev.to/visuellverstehen/common-mistakes-when-writing-css-with-bem-4921

[36] Предотвращение влияния прокрутки на цепочку элементов с помощью Overscroll Behavior: https://ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior/

[37] Интервью с Эладом Шехтером о «The New CSS Reset»: https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/

[38] Изучение CSS Paint API: cкругление фигур: https://css-tricks.com/exploring-the-css-paint-api-rounding-shapes/

[39] Уважение к предпочтениям пользователей касательно анимаций (prefers-reduced-motion): https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/

[40] @supports selector(): https://css-tricks.com/supports-selector/

[41] Прекратите бороться с причиной существования CSS с этими тупыми «фреймворками»: https://medium.com/codex/stop-fighting-the-reason-css-exists-with-these-dumbass-frameworks-91732f5993c7

[42] Как я организую свой CSS для веб-сайтов без фреймворка: https://medium.com/@stephan.romhart/how-i-organize-my-css-for-websites-without-a-framework-4d93fbbc74fe

[43] Бинарный протокол для JavaScript: https://habr.com/ru/post/580922/

[44] Размышления об идеальной архитектуре для JavaScript: https://habr.com/ru/post/584502/

[45] Неправильный TypeScript : https://blog.openreplay.com/typescript-done-wrong

[46] Решение проблем JavaScript из Bigfrontend (BFE): Throttle и Debounce: https://itnext.io/solving-javascript-problems-from-bigfrontend-bfe-throttle-and-debounce-87a809e5952b

[47] Как построить линейный график на JavaScript: визуализация данных о Covid-19 вакцинации : https://javascript.plainenglish.io/how-to-build-a-linear-gauge-in-javascript-visualizing-covid-19-vaccination-data-f9d0ed5f5d0f

[48] Как заполнить массив начальными значениями в JavaScript: https://dmitripavlutin.com/javascript-fill-array/

[49] Pipe Operator (|>) for JavaScript: Предложение по добавлению полезного оператора в JS: https://github.com/tc39/proposal-pipeline-operator

[50] JavaScript Const vs. Var vs. Let: полное руководство на все времена: https://javascript.plainenglish.io/javascript-const-vs-var-vs-let-a-comprehensive-guide-for-all-time-d6d836c8bbd7

[51] React: разрабатываем хук для загрузки дополнительных данных: https://habr.com/ru/company/timeweb/blog/584862/

[52] Как на React две кнопки переводить полтора года: https://habr.com/ru/company/avito/blog/584350/

[53] Error Boundaries в React: препарируем лягушку: https://habr.com/ru/company/2gis/blog/583894/

[54] Что нового в Gatsby 4: https://www.gatsbyjs.com/blog/whats-new-in-gatsby-4/

[55] 6 конкретных советов, которые упростят ревью ваших пул-реквестов в React: https://www.chakshunyu.com/blog/6-concrete-tips-that-will-make-your-react-pull-requests-easier-to-review/

[56] Как заменить useState на useRef и стать победителем: https://thoughtspile.github.io/2021/10/18/non-react-state/

[57] Создайте собственный React Hook с автозапуском TikTok роликов с помощью Intersection Observer: https://blog.logrocket.com/build-custom-tiktok-autoplay-react-hook-intersection-observer/

[58] React re-Reselect: лучшая мемоизация и управление кешем: https://blog.logrocket.com/react-re-reselect-better-memoization-cache-management/

[59] Наглядное руководство по рендерингу в React — шпаргалка: https://alexsidorenko.com/blog/react-render-cheat-sheet/

[60] Введение в Quasar Framework: создание кроссплатформенных приложений на Vue: https://www.smashingmagazine.com/2021/10/introduction-quasar-framework-cross-platform-applications/

[61] Доступность в Angular c помощью CDK A11y на реальных кейсах с FocusTrap и FocusMonitor: https://habr.com/ru/company/europlan/blog/578856/

[62] Изучение разницы между отключением элемента управления формой с помощью reactive forms API и атрибутами HTML: https://indepth.dev/posts/1474/disable-form-controls-using-forms-api-or-html-attributes

[63] Angular: обработка HTTP ошибок с помощью Interceptors: https://javascript.plainenglish.io/angular-handle-http-errors-using-interceptors-5cc483103740

[64] Svelte Material UI: компоненты Advanced Material Design: https://blog.logrocket.com/svelte-material-ui-advanced-material-design-components/

[65] Лучшие библиотеки валидации форм в Svelte: https://blog.logrocket.com/top-form-validation-libraries-svelte/

[66] maku.js — Мост между HTML и WebGL (three.js): https://github.com/alphardex/maku.js

[67] 5 лучших библиотек для работы с cookie в JavaScript: https://blog.bitsrc.io/5-top-javascript-cookie-libraries-329ae3150cfb

[68] В браузере Brave заменят поисковик по умолчанию с Google на собственный Brave Search: https://3dnews.ru/1051731

[69] Релиз Chrome 95: https://www.opennet.ru/opennews/art.shtml?num=55998

[70] Вы не можете доверять никакому веб-браузеру.: https://ethr.medium.com/you-cant-trust-any-web-browser-ff9b916ddf44

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

[72] dersmoll: https://habr.com/ru/users/dersmoll/

[73] alekskorovin: https://habr.com/ru/users/alekskorovin/

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

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