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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №495 (22 — 28 ноября 2021)

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

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

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

Медиа

podcast «Новости 512» от CSSSR: TSConf 2021, property-based testing, .NET 6, Visual Studio 2022, контейнеризация, PHP Foundation [5]
podcast Подкаст «Веб-стандарты» №309. Chrome 96 и беты, Safari TP 135, Web Almanac, SVGcode, сложный фронтенд, мифы о доступности [6]
podcast Подкаст «Фронтенд Юность» #214 Российские разработчики аннексировали кириллическую часть UTF-8 и остались без JavaScript [7]
podcast video CSSSR: Разбор технического собеседования на позицию senior front-end developer. Часть 5. [8]
video webDev #10: Front-end. Вопросы на собеседовании [9]
video Skillbox Лекторий: Карьера во frontend: тренды и компетенции [10]
video en BlinkOn 15 — 16 видео с вируальной конференции [11]

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

habr Постигаем WebAssembly, рисуя кривую дракона [12]
habr Как сегодня делают игры в браузере? Часть 1 [13]
habr Lighthouse. Руководство по оптимизации сайтов для начинающих [14]
habr Как мы ускоряли комментарии Хабра [15]
Я ещё мидл или уже сеньор? И сколько мне должны платить? [16]
en Понимание WAI ARIA с помощью яблок и элементов [17]
en Cross-fading эффект любых двух элементов DOM в настоящее время невозможно [18]

CSS

habr Никто не знает, как работает каскад [19]
en Как контролировать лейаут страниц с мультинаправленным контентом [20]
en Небольшая система для CSS-анимации загрузки страницы [21]
en Мой кастомный CSS Reset [22]
en Динамическое управление цветом с помощью относительных цветов в CSS [23]
en Сделайте свой сайт особенным с помощью настраиваемой полосы прокрутки [24]
en Добавление режима, дружественного к дислексии, на веб-сайт [25]
en Создание генеративных шаблонов с помощью CSS Paint API [26]
en Современный CSS в двух словах [27]
video en State of CSS 2021 [BlinkOn 15] [28]

JavaScript

habr Rust — будущее инфраструктуры JavaScript [29]
habr JavaScript: разрабатываем приложение для записи экрана [30]
en Как JavaScript движки достигают высокой производительности [31]
en Как не писать тесты свойств в JavaScript [32]
en Управление памятью в Javascript [33]
en Иногда Javascript — не самый лучший выбор [34]
en proposals.es — Веб-сайт для получения последней информации о ECMAScript proposals. [35]
en Как работает JavaScript: шаблон factory design + 4 варианта использования [36]
en JWT: полное руководство с лучшими практиками в JavaScript [37]
video WebDev с нуля: Задача с реального интервью JavaScript. Разбор 4 вариантов решения [38]

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

Автор:
alexzfort

Источник [72]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

[5] «Новости 512» от CSSSR: TSConf 2021, property-based testing, .NET 6, Visual Studio 2022, контейнеризация, PHP Foundation: https://soundcloud.com/csssr/tsconf-2021-property-based-testing-net-6-visual-studio-2022-konteynerizatsiya-php-foundation

[6] Подкаст «Веб-стандарты» №309. Chrome 96 и беты, Safari TP 135, Web Almanac, SVGcode, сложный фронтенд, мифы о доступности: https://soundcloud.com/web-standards/episode-309

[7] Подкаст «Фронтенд Юность» #214 Российские разработчики аннексировали кириллическую часть UTF-8 и остались без JavaScript: https://soundcloud.com/frontend_u/e214

[8] CSSSR: Разбор технического собеседования на позицию senior front-end developer. Часть 5.: https://www.youtube.com/watch?v=TGq3sh7bk7g

[9] webDev #10: Front-end. Вопросы на собеседовании: https://www.youtube.com/watch?v=nvktMVFM0_M

[10] Skillbox Лекторий: Карьера во frontend: тренды и компетенции: https://www.youtube.com/watch?v=y9dTyDy4dBk

[11] BlinkOn 15 — 16 видео с вируальной конференции: https://www.youtube.com/playlist?list=PL9ioqAuyl6UL_1DiG1tPRHbGJlGQ_gQJW

[12] Постигаем WebAssembly, рисуя кривую дракона: https://habr.com/ru/post/591741/

[13] Как сегодня делают игры в браузере? Часть 1: https://habr.com/ru/post/591191/

[14] Lighthouse. Руководство по оптимизации сайтов для начинающих: https://habr.com/ru/company/htmlacademy/blog/585866/

[15] Как мы ускоряли комментарии Хабра: https://habr.com/ru/company/habr/blog/590111/

[16] Я ещё мидл или уже сеньор? И сколько мне должны платить?: https://htmlacademy.ru/blog/education/what/skill-map

[17] Понимание WAI ARIA с помощью яблок и элементов: https://medium.com/@manuelsuricastro/understanding-wai-aria-with-apples-and-elements-dad860cea320

[18] Cross-fading эффект любых двух элементов DOM в настоящее время невозможно: https://jakearchibald.com/2021/dom-cross-fade/

[19] Никто не знает, как работает каскад: https://habr.com/ru/company/htmlacademy/blog/590779/

[20] Как контролировать лейаут страниц с мультинаправленным контентом : https://css-tricks.com/control-layout-in-a-multi-directional-website/

[21] Небольшая система для CSS-анимации загрузки страницы : https://css-tricks.com/a-handy-little-system-for-animated-entrances-in-css/

[22] Мой кастомный CSS Reset: https://www.joshwcomeau.com/css/custom-css-reset/

[23] Динамическое управление цветом с помощью относительных цветов в CSS: https://blog.jim-nielsen.com/2021/css-relative-colors/

[24] Сделайте свой сайт особенным с помощью настраиваемой полосы прокрутки: https://esteetey.dev/make-your-website-stand-out-with-a-custom-scrollbar

[25] Добавление режима, дружественного к дислексии, на веб-сайт: https://www.smashingmagazine.com/2021/11/dyslexia-friendly-mode-website/

[26] Создание генеративных шаблонов с помощью CSS Paint API: https://css-tricks.com/creating-generative-patterns-with-the-css-paint-api/

[27] Современный CSS в двух словах: https://cloudfour.com/thinks/modern-css-in-a-nutshell/

[28] State of CSS 2021 [BlinkOn 15]: https://www.youtube.com/watch?v=_23G05tUIcI

[29] Rust — будущее инфраструктуры JavaScript: https://habr.com/ru/post/591173/

[30] JavaScript: разрабатываем приложение для записи экрана: https://habr.com/ru/company/timeweb/blog/591417/

[31] Как JavaScript движки достигают высокой производительности: https://blogg.bekk.no/how-javascript-engines-achieve-great-performance-fb0b36601557

[32] Как не писать тесты свойств в JavaScript: https://jrsinclair.com/articles/2021/how-not-to-write-property-tests-in-javascript/

[33] Управление памятью в Javascript: https://medium.com/@gdsc.cu/memory-management-in-javascript-bf5d7c048054

[34] Иногда Javascript — не самый лучший выбор : https://blog.bitsrc.io/sometimes-javascript-is-not-the-right-answer-959abb115693

[35] proposals.es — Веб-сайт для получения последней информации о ECMAScript proposals.: https://www.proposals.es/

[36] Как работает JavaScript: шаблон factory design + 4 варианта использования: https://blog.sessionstack.com/how-javascript-works-the-factory-design-pattern-4-use-cases-7b9f0d22151d

[37] JWT: полное руководство с лучшими практиками в JavaScript: https://betterprogramming.pub/jwt-ultimate-how-to-guide-with-best-practices-in-javascript-f7ba4c48dfbd

[38] WebDev с нуля: Задача с реального интервью JavaScript. Разбор 4 вариантов решения: https://www.youtube.com/watch?v=zY9Wn4MCAoI

[39] Styled Components — идеальная стилизация React-приложения: https://habr.com/ru/post/591381/

[40] React c TypeScript — шпаргалка: https://blog.bitsrc.io/react-with-typescript-cheatsheet-9dd891dc5bfe

[41] Как писать более читаемый код в React : https://blog.logrocket.com/write-more-readable-react-code/

[42] Как создавать SVG-карты в React с помощью react-simple-maps: https://blog.logrocket.com/how-to-create-svg-maps-react-react-simple-maps/

[43] Как поддерживать большое приложение на Next.js: https://www.smashingmagazine.com/2021/11/maintain-large-nextjs-application/

[44] Использование WebAssembly (созданного на Rust) для быстрых React компонентов : https://www.joshfinnie.com/blog/using-webassembly-created-in-rust-for-fast-react-components/

[45] 5 вещей, с которыми я боролся при изучении React, имея бекграунд Vue : https://medium.com/geekculture/5-things-i-struggled-with-when-learning-react-with-a-vue-background-5e23fccb04d2

[46] 3 способа реализации скелетных компонентов в React: https://blog.openreplay.com/3-ways-to-implement-skeleton-components-in-react

[47] Полное руководство для новичков по React useState hook [Часть 1]: https://javascript.works-hub.com/learn/a-complete-beginners-guide-to-react-usestate-hook-f85a0

[48] Tamagui — Универсальные дизайн-системы React, оптимизированные для нативных и веб-приложений: https://tamagui.dev/

[49] What time is it? Reactime! Релиз Reactime X: https://medium.com/@liuedar/what-time-is-it-reactime-fd7267b9eb89

[50] Rematch — лучший Redux?: https://blog.openreplay.com/rematch-a-better-redux

[51] Управление данными в системе автоматизации на Vue и Vuex и решение проблем тестирования с помощью Jest: https://habr.com/ru/company/oleg-bunin/blog/590753/

[52] Сторонний код в Nuxt — это яд: вылечите его за 3 простых шага: https://deltener.com/blog/nuxt-third-party-code-is-poison/

[53] MountainVue: Ваш следующий любимый инструмент разработчика для работы с приложениями на Vue: https://medium.com/@ryanlim301/mountainvue-your-next-favorite-developer-tool-to-traverse-through-your-vue-applications-34e2319d552a

[54] Устранение неполадок с вложенными страницами в Nuxt.js: https://blog.logrocket.com/troubleshooting-nested-pages-nuxt/

[55] Как Angular загоняет фронтенд разработчиков в enterprise-кабалу: https://habr.com/ru/post/591963/

[56] Альтернативы ::ng-deep нет: https://tomaszs2.medium.com/there-is-no-alternative-to-ng-deep-620496f1c8c9

[57] Angular String/Text Interpolation: https://zainulebadd.medium.com/angular-string-text-interpolation-2e39465819e6

[58] Современный Angular инструментарий на Новый год: https://blog.nrwl.io/modern-angular-tooling-for-the-new-year-a9a1b80f3838

[59] Развертывание Angular приложения на GitHub Pages: https://www.telerik.com/blogs/deploying-angular-app-github-pages

[60] Введение в Svelte Actions: https://blog.logrocket.com/svelte-actions-introduction/

[61] Подробное руководство по обработке событий в Svelte: https://ashutosh.dev/comprehensive-guide-of-events-handling-in-svelte/

[62] Как: создать веб-компонент в Svelte: https://medium.com/javascript-by-doing/how-to-create-a-web-component-in-svelte-5963356ec978

[63] Spacing JS — JS-утилита для измерения расстояния между элементами на веб-странице.: https://github.com/stevenlei/spacingjs

[64] Tiny UI Toggle — Переключайте состояние элемента UI, чтобы легко создавать динамические компоненты: аккордеон, табы, раскрывающийся список, диалоговое/модальное окна: https://nigelotoole.github.io/tiny-ui-toggle/

[65] 5 лучших IoT библиотек для JavaScript разработчиков : https://blog.openreplay.com/top-5-iot-libraries-for-javascript-developers

[66] web-units-conversify — JS-библиотека для преобразования пикселей и вьюпорт-размеров в REM: https://github.com/joaocambauva/web-units-conversify

[67] Построение data stories с помощью диаграмм в Vizzu: https://blog.logrocket.com/building-data-stories-through-charts-vizzu/

[68] COBE — легкая js библиотека для рендера глобуса на WebGL: https://github.com/shuding/cobe

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

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

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

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