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

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №491 (25 — 31 октября 2021) - 1

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

Медиа

podcast «Новости 512» от CSSSR: Next.js 12, Error Boundaries, Node.js и Event Loop, алгоритмы на JavaScript, веб Photoshop и VSCode [5]
podcast Подкаст «Фронтенд Юность»#210: HolyJS — зеркало общества [6]
podcast Подкаст «Веб-стандарты» №305. Экосистема 2021, VS Code в браузере, Node.js 17, Reporting API, автозаполнение, SPA или MPA [7]
podcast Подкаст «Сделайте мне красиво» №63 — Карьерный рост от пса до петуха [8]
video Отсобеседование: Cобеседование Senior Frontend разработчика на пенсии [9]
video About IT: Как пройти собеседование на MIDDLE front end разработчика? + задачка на event loop(Promise js) [10]
video Vova Dev: Как стать Front-End разработчиком? Что должен знать Junior Frontend разработчик в 2022 [11]

Веб-разработка

habr Как устроена Дока — опенсорсный справочник с документацией, который сообщество пишет для сообщества [12]
habr Микрофронтеды: достоинства, недостатки и нюансы [13]
en Igalia и Vorwerk представляют улучшение рендера SVG движка на основе слоев в WebKit [14]
en Какой метод в SVG лучше всего подходит для слишком большого количества иконок? [15]
en Jamstack: новый взгляд на веб-разработку, сборку и доставку [16]
en Начало новой эры адаптивного веб-дизайна [17]
en Создание эффективного компонента Image [18]
en Путь Photoshop к веб-версии [19]
en Хаос микрофронтендов (и как его решить) [20]
en Популярный npm-пакет UA-Parser-JS скомпроментирован вредоносным ПО для майнинга и кражи паролей [21]

CSS

en Глубокое погружение в object-fit и background-size в CSS [29]
en Новый взгляд на атомарный CSS [30]
en 100 байт CSS, чтобы страницы с контентом всегда выглядели отлично [31]
en Media Queries Level 4: Media Query Range Contexts [32]
en Процесс создания CSS-фреймворка [33]
en Новый CSS Reset [34]
en Использование переменных CSS для reduced motion в глобальном масштабе [35]
en Невероятные генераторы CSS лейаутов, о которых вы должны знать [36]

JavaScript

en Trie в Javascript: структура данных, лежащая в основе Autocomplete [37]
en Поиск-фильтр по странице с с использованием ванильного JavaScript [38]
en Скелетируйте себя с помощью распознавания позы на TensorFlow [39]
en Внедрение зависимостей в JavaScript — лучший инструмент, который вы не используете для своих тестов [40]
en Использование axios.all для одновременных запросов [41]

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

Автор:
alexzfort

Источник [66]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

[5] «Новости 512» от CSSSR: Next.js 12, Error Boundaries, Node.js и Event Loop, алгоритмы на JavaScript, веб Photoshop и VSCode: https://soundcloud.com/csssr/nextjs-12-error-boundaries-nodejs-i-event-loop-algoritmy-na-javascript-veb-photoshop-i-vscode

[6] Подкаст «Фронтенд Юность»#210: HolyJS — зеркало общества: https://soundcloud.com/frontend_u/e210

[7] Подкаст «Веб-стандарты» №305. Экосистема 2021, VS Code в браузере, Node.js 17, Reporting API, автозаполнение, SPA или MPA: https://soundcloud.com/web-standards/episode-305

[8] Подкаст «Сделайте мне красиво» №63 — Карьерный рост от пса до петуха: https://soundcloud.com/begebot/ep63

[9] Отсобеседование: Cобеседование Senior Frontend разработчика на пенсии: https://www.youtube.com/watch?v=aKCOyqnNZ58

[10] About IT: Как пройти собеседование на MIDDLE front end разработчика? + задачка на event loop(Promise js): https://www.youtube.com/watch?v=KAt4U98UfPE

[11] Vova Dev: Как стать Front-End разработчиком? Что должен знать Junior Frontend разработчик в 2022: https://www.youtube.com/watch?v=9Ub6bkS9uzE

[12] Как устроена Дока — опенсорсный справочник с документацией, который сообщество пишет для сообщества: https://habr.com/ru/company/yandex_praktikum/blog/585380/

[13] Микрофронтеды: достоинства, недостатки и нюансы: https://habr.com/ru/post/585912/

[14] Igalia и Vorwerk представляют улучшение рендера SVG движка на основе слоев в WebKit: https://blogs.igalia.com/nzimmermann/posts/2021-10-29-layer-based-svg-engine/

[15] Какой метод в SVG лучше всего подходит для слишком большого количества иконок?: https://cloudfour.com/thinks/svg-icon-stress-test/

[16] Jamstack: новый взгляд на веб-разработку, сборку и доставку: https://blog.openreplay.com/jamstack-a-new-way-to-think-about-web-development-build-and-delivery

[17] Начало новой эры адаптивного веб-дизайна: https://uxdesign.cc/the-start-of-a-new-era-for-responsive-web-design-6658a6bbeb9b

[18] Создание эффективного компонента Image : https://web.dev/image-component/

[19] Путь Photoshop к веб-версии: https://web.dev/ps-on-the-web/

[20] Хаос микрофронтендов (и как его решить): https://indepth.dev/posts/1485/the-micro-frontend-chaos-and-how-to-solve-it

[21] Популярный npm-пакет UA-Parser-JS скомпроментирован вредоносным ПО для майнинга и кражи паролей: https://portswigger.net/daily-swig/popular-npm-package-ua-parser-js-poisoned-with-cryptomining-password-stealing-malware

[22] Расширения Chrome для программистов и сочувствующих: https://habr.com/ru/company/jugru/blog/586376/

[23] Демистификация функции 'import' webpack: использование динамических аргументов: https://indepth.dev/posts/1483/demistifying-webpacks-import-function-using-dynamic-arguments

[24] Заменит ли Rome Webpack?: https://medium.com/weekly-webtips/will-rome-replace-webpack-a60e1a740222

[25] Повысьте производительность своего веб-приложения с помощью JS Web Workers: https://levelup.gitconnected.com/boost-your-web-application-performance-with-javascript-web-workers-dcb050ea24a6

[26] Шпаргалка по метрикам веб-производительности: https://bitsofco.de/web-performance-metrics-cheatsheet/

[27] Рекомендации по встраиванию сторонних веб-виджетов: https://blog.bitsrc.io/best-practices-for-web-embeds-a65416a21fc2

[28] Создание эффекта прозрачного стекла и пластика в Three.js: https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/

[29] Глубокое погружение в object-fit и background-size в CSS: https://www.smashingmagazine.com/2021/10/object-fit-background-size-css/

[30] Новый взгляд на атомарный CSS: https://antfu.me/posts/reimagine-atomic-css

[31] 100 байт CSS, чтобы страницы с контентом всегда выглядели отлично : https://www.swyx.io/css-100-bytes/

[32] Media Queries Level 4: Media Query Range Contexts: https://www.bram.us/2021/10/26/media-queries-level-4-media-query-range-contexts/

[33] Процесс создания CSS-фреймворка: https://tympanus.net/codrops/2021/10/25/the-process-of-building-a-css-framework/

[34] Новый CSS Reset: https://elad.medium.com/the-new-css-reset-53f41f13282e

[35] Использование переменных CSS для reduced motion в глобальном масштабе: https://www.silvestar.codes/articles/using-css-variables-for-reduced-motion-on-a-global-scale/

[36] Невероятные генераторы CSS лейаутов, о которых вы должны знать: https://medium.com/geekculture/incredible-css-layouts-generators-you-should-know-16c87090c5a1

[37] Trie в Javascript: структура данных, лежащая в основе Autocomplete: https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete

[38] Поиск-фильтр по странице с с использованием ванильного JavaScript: https://css-tricks.com/in-page-filtered-search-with-vanilla-javascript/

[39] Скелетируйте себя с помощью распознавания позы на TensorFlow: https://www.pixelhop.io/writing/skeletonise-yourself-with-pose-detection/

[40] Внедрение зависимостей в JavaScript — лучший инструмент, который вы не используете для своих тестов: https://blog.bitsrc.io/dependency-injection-in-javascript-the-best-tool-youre-not-using-for-your-tests-4e83aca7579f

[41] Использование axios.all для одновременных запросов: https://blog.logrocket.com/using-axios-all-make-concurrent-requests/

[42] Решение задач по JavaScript на bigfrontend (BFE): throttle и debounce: https://habr.com/ru/post/585750/

[43] Разреженные и плотные массивы в JavaScript: https://dmitripavlutin.com/javascript-sparse-dense-arrays/

[44] JavaScript maps vs. sets: выбор структуры данных: https://blog.logrocket.com/javascript-maps-vs-sets-choosing-your-data-structure/

[45] Хочу поиск как у MDN: https://habr.com/ru/company/timeweb/blog/585910/

[46] Next.js 12: https://nextjs.org/blog/next-12

[47] Руководство по SWR для начинающих: Data Fetching в React: https://blog.openreplay.com/beginner-s-guide-to-swr-data-fetching-in-react

[48] Почему хуки — лучшее, что могло случиться с React: https://stackoverflow.blog/2021/10/20/why-hooks-are-the-best-thing-to-happen-to-react/

[49] Топ-4 ошибки в интервью по React: https://dev.to/andyrewlee/top-4-mistakes-in-react-interviews-b4i

[50] Понимание очистки в функции useEffect в React : https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/

[51] Тестирование Vue компонентов с помощью Cypress: https://css-tricks.com/testing-vue-components-with-cypress/

[52] Почему Vue + Astro лучше, чем Vue SPA?: https://vuejsdevelopers.com/2021/10/26/vue-astro/

[53] Ленивая подгрузка библиотек из CDN в Angular: https://habr.com/ru/company/tinkoff/blog/585534/

[54] Улучшение доступности Angular Component: https://blog.angular.io/improving-angular-components-accessibility-89b8ae904952

[55] Как масштабировать Angular без ограничений: https://itnext.io/how-to-scale-angular-without-limits-e6a6ca15111

[56] Концепция контроллеров компонента в Angular: часть II: https://indepth.dev/posts/1486/the-controllers-of-component-concept-in-angular-part-ii

[57] Импорт шаблонов Ember.js, часть 1: https://v5.chriskrycho.com/journal/ember-template-imports/part-1/

[58] Импорт шаблонов Ember.js, часть 2: https://v5.chriskrycho.com/journal/ember-template-imports/part-2/

[59] EmberJS Open Source Development — Overlay Development: https://www.youtube.com/watch?v=JJNKRXBRnmk

[60] Почему устаревший jQuery по-прежнему остается доминирующей библиотекой в JavaScript: https://thenewstack.io/why-outdated-jquery-is-still-the-dominant-javascript-library/

[61] Представляем Elf — Реактивное хранилище с магическими способностями для JS приложений : https://netbasal.com/introducing-elf-a-reactive-store-with-magical-powers-for-js-apps-678d6cb0596f

[62] Type Query: манипуляции с типом в стиле jQuery: https://itnext.io/type-query-jquery-style-type-manipulation-497ce26d93f

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

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

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

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