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

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

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

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

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

Медиа

•  podcast «Новости 512» от CSSSR: Angular 13, Firefox 94, реактивность, лекции ШРИ Яндекса 2021, ReactConf 2021, развитие Svelte [6]
•  podcast Подкаст «Веб-стандарты» №307. Firefox 94, Chrome Dev Summit, Web.Dev, Next.js, Yarn, TypeScript, вёрстка чата, взлом пакета [7]
•  podcast Подкаст «Фронтенд Юность» #213 JavaScript — Зло [8]
•  podcast video Подкаст «ProConf» #112: SmashingConf — Виталий Фридман [9]
•  podcast video Подкаст «Goose&Duck» #9 – Попался, воришка! с Андреем Ситником [10]

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

•  habr Что нужно знать о вёрстке под ретину [11]
•  habr ХPath: что нужно делать, а что нет [12]
•  en AMP безвозвратно подорвала доверие издателей к инициативам Google [13]
•  en Использование веб-воркеров для повышения производительности сторонних скриптов [14]

CSS

•  habr Звёздный рейтинг: решение с использованием SVG [21]
•  habr Создание компонента Sidenav [22]
•  habr Разработка настоящих компонентов: блок сообщения Facebook Messenger [23]
•  en Анимация height: auto [24]
•  en Функции сравнения в CSS: min(), max() и clamp() [25]
•  en CSS Loaders & Spinners [26]
•  en Быстрые и грязные переопределения в Bootstrap налету [27]
•  en Эффект матового стекла для иконок в CSS [28]
•  en Эффект матового стекла в CSS [29]
•  en Как исправить проблемы с фоновой прокруткой в CSS [30]

JavaScript

•  habr Дженерики в TypeScript [31]
•  habr Блокчейн на JavaScript [32]
•  Web-фреймворк Pusa, переносящий логику JavaScript-фронтэнда на сторону сервера [33]
•  Применение невидимых unicode-символов для скрытия действий в JavaScript-коде [34]
•  en Rust — будущее инфраструктуры JavaScript [35]
•  en Что такое Chrome Scripting API? [36]
•  en JavaScript Sanitizer API: современный способ безопасного манипулирования DOM [37]
•  en Создание легкой и производительной карусели с использованием ванильного JavaScript [38]
•  en Делает ли ES6 устаревшими JavaScript фреймворки ? [39]

Браузеры

•  В Chromium добавлена возможность локального запрета просмотра кода web-страниц [70]
•  Google прекратит поддержку старых версий Chrome в этом месяце [71]

Дайджест за прошлую неделю [72].

Материал подготовили dersmoll [73] и alekskorovin [74].

Автор:
alexzfort

Источник [75]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] «Новости 512» от CSSSR: Angular 13, Firefox 94, реактивность, лекции ШРИ Яндекса 2021, ReactConf 2021, развитие Svelte : https://soundcloud.com/csssr/angular-13-firefox-94-reaktivnost-lektsii-shri-yandeksa-2021-reactconf-2021-razvitie-svelte

[7] Подкаст «Веб-стандарты» №307. Firefox 94, Chrome Dev Summit, Web.Dev, Next.js, Yarn, TypeScript, вёрстка чата, взлом пакета: https://soundcloud.com/web-standards/episode-307

[8] Подкаст «Фронтенд Юность» #213 JavaScript — Зло: https://soundcloud.com/frontend_u/e213

[9] Подкаст «ProConf» #112: SmashingConf — Виталий Фридман: https://www.youtube.com/watch?v=lV7jInsLQOQ

[10] Подкаст «Goose&Duck» #9 – Попался, воришка! с Андреем Ситником: https://www.youtube.com/watch?v=4dLZhwPBW88

[11] Что нужно знать о вёрстке под ретину: https://habr.com/ru/company/htmlacademy/blog/585864/

[12] ХPath: что нужно делать, а что нет: https://habr.com/ru/post/588773/

[13] AMP безвозвратно подорвала доверие издателей к инициативам Google: https://wptavern.com/amp-has-irreparably-damaged-publishers-trust-in-google-led-initiatives

[14] Использование веб-воркеров для повышения производительности сторонних скриптов: https://blog.logrocket.com/using-web-workers-boost-third-party-script-performance/

[15] Введение в отладку на примере Firefox DevTools, часть 3 из 4: https://habr.com/ru/post/588981/

[16] Новинки DevTools (Chrome 96): https://developer.chrome.com/ru/blog/new-in-devtools-96/

[17] Assistiv Labs — новый онлайн-сервис для удаленного доступа к вспомогательными технологиями доступности, такими как NVDA, JAWS и Windows High Contrast Mode, с помощью любого современного веб-браузера.: https://assistivlabs.com/

[18] Избыточно избыточная доступность a11y: https://www.scottohara.me/blog/2021/10/04/redundantly-redundant.html

[19] Анимация при прокрутке с помощью WAAPI и ScrollTimeline: https://habr.com/ru/company/skillfactory/blog/587792/

[20] Подборка креативных сайтов «Inspirational Websites Roundup» #31: https://tympanus.net/codrops/2021/11/08/inspirational-websites-roundup-31/

[21] Звёздный рейтинг: решение с использованием SVG: https://habr.com/ru/post/588695/

[22] Создание компонента Sidenav: https://habr.com/ru/post/587864/

[23] Разработка настоящих компонентов: блок сообщения Facebook Messenger: https://habr.com/ru/company/ruvds/blog/587724/

[24] Анимация height: auto: https://nemzes.net/posts/animating-height-auto/

[25] Функции сравнения в CSS: min(), max() и clamp(): https://vivekjaiskumar.medium.com/css-comparison-functions-min-max-and-clamp-424ce001d438

[26] CSS Loaders & Spinners: https://cssloaders.github.io/

[27] Быстрые и грязные переопределения в Bootstrap налету : https://css-tricks.com/quick-and-dirty-bootstrap-overrides-at-runtime/

[28] Эффект матового стекла для иконок в CSS: https://css-tricks.com/icon-glassmorphism-effect-in-css/

[29] Эффект матового стекла в CSS : https://dev.to/khush2706/frosted-glass-effect-in-css-27p4

[30] Как исправить проблемы с фоновой прокруткой в CSS: https://daily-dev-tips.com/posts/how-to-fix-background-scroll-issues-in-css/

[31] Дженерики в TypeScript: https://habr.com/ru/company/tinkoff/blog/588655/

[32] Блокчейн на JavaScript: https://habr.com/ru/company/ruvds/blog/587726/

[33] Web-фреймворк Pusa, переносящий логику JavaScript-фронтэнда на сторону сервера: https://www.opennet.ru/opennews/art.shtml?num=56140

[34] Применение невидимых unicode-символов для скрытия действий в JavaScript-коде: https://www.opennet.ru/opennews/art.shtml?num=56131

[35] Rust — будущее инфраструктуры JavaScript: https://leerob.io/blog/rust

[36] Что такое Chrome Scripting API?: https://blog.bitsrc.io/what-is-chrome-scripting-api-f8dbdb6e3987

[37] JavaScript Sanitizer API: современный способ безопасного манипулирования DOM : https://blog.bitsrc.io/javascript-sanitizer-api-the-modern-way-to-safe-dom-manipulation-828d5ea7dca6

[38] Создание легкой и производительной карусели с использованием ванильного JavaScript: https://www.wiktorwisniewski.dev/blog/build-simple-javascript-slider

[39] Делает ли ES6 устаревшими JavaScript фреймворки ?: https://stackoverflow.blog/2021/11/10/does-es6-make-javascript-frameworks-obsolete/

[40] JavaScript: заметка о requestAnimationFrame и requestIdleCallback: https://habr.com/ru/company/timeweb/blog/587908/

[41] Деструктуризация массивов и объектов в JavaScript — в чем разница?: https://www.freecodecamp.org/news/array-vs-object-destructuring-in-javascript/

[42] Написание чистого кода на JavaScript: https://blog.bitsrc.io/writing-clean-code-in-javascript-dd584bbe1874

[43] 5 топ функций JavaScript ES12, которые вы должны использовать сейчас: https://levelup.gitconnected.com/top-5-javascript-es12-features-you-should-start-using-now-b16a8b5353b1

[44] Как сделать игру 2048 на React: https://habr.com/ru/company/skillfactory/blog/588356/

[45] Next.js: подробное руководство. Итерация первая: https://habr.com/ru/company/timeweb/blog/588498/

[46] Простая реализация темного режима (и многоцветных тем) В React: https://css-tricks.com/easy-dark-mode-and-multiple-color-themes-in-react/

[47] React Suspense: уроки, извлеченные при загрузке данных: https://css-tricks.com/react-suspense-lessons-learned-while-loading-data/

[48] Создание энциклопедии с помощью React и Wikipedia Search API: https://blog.openreplay.com/building-an-encyclopedia-with-react-and-wikipedia-search-api

[49] Обзор решений для управления состоянием в React и NextJS: https://indepth.dev/posts/1487/deep-dive-into-state-management-with-react-and-nextjs

[50] Учебное пособие по React Router 6: https://www.robinwieruch.de/react-router

[51] Лучшие практики для ифреймов в React : https://blog.logrocket.com/best-practices-react-iframes/

[52] Атомарный дизайн с Vue: https://medium.com/@kevinkurniawan97/atomic-design-with-vue-fa1b50a1251e

[53] Как делать Debounce и Throttle колбеки во Vue: https://dmitripavlutin.com/vue-debounce-throttle/

[54] Создайте приложение для поиска фильмов с помощью Petite-Vue, легкой альтернативой VueJS: https://blog.openreplay.com/build-a-movie-search-app-with-petite-vue-a-lightweight-alternative-to-vuejs

[55] Angular, инкапсулируй это: https://habr.com/ru/post/588969/

[56] Как я оптимизировал плохую кодовую базу angular и сократил время загрузки страницы в 10 раз: https://lakin-mohapatra.medium.com/how-i-optimized-messy-angular-codebase-and-reduced-page-load-time-by-20x-faster-d3711dd28e14

[57] Как поддерживать пользователей IE11 при переходе на Angular 13: https://dev.to/mthompsoncode/how-to-support-ie11-users-as-you-move-to-angular-13-179j

[58] Настройте модули отложенной загрузки в Angular для нескольких фронтендов : https://blog.logrocket.com/customize-angular-lazy-loading-modules-multiple-frontends/

[59] Перенос аддона Ember в новый v2 формат : https://www.kaliber5.de/en/blog/v2-addon_en

[60] Автоматизация релизов Ember с помощью Rust : https://simplabs.com/blog/2021/11/09/automating-ember-learning-releases-with-rust/

[61] Ember.js Template Imports: часть 3: https://v5.chriskrycho.com/journal/ember-template-imports/part-3/

[62] Ember.js Template Imports: часть 4: https://v5.chriskrycho.com/journal/ember-template-imports/part-4/

[63] Создатель Svelte: веб-разработка должна приносить больше удовольствия: https://www.infoworld.com/article/3639521/svelte-creator-web-development-should-be-more-fun.html

[64] Рич Харрис, создатель Svelte, присоединяется к Vercel : https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte

[65] Реализация локализации в Svelte : https://blog.logrocket.com/implementing-localization-svelte/

[66] Введение в тестирование приложений со SvelteKit : https://blog.logrocket.com/intro-testing-sveltekit-applications/

[67] Splide — легкий, гибкий и доступный слайдер/карусель, написанный на TypeScript. Никаких зависимостей, никаких проблем с Lighthouse.: https://splidejs.com/

[68] hashids.js — Небольшая библиотека JavaScript для генерации числовых id в стиле YouTube: https://github.com/niieani/hashids.js

[69] MiniMasonry.js — Минималистичная библиотека без зависимостей для создания masonry-структуры : https://github.com/Spope/MiniMasonry.js

[70] В Chromium добавлена возможность локального запрета просмотра кода web-страниц: https://www.opennet.ru/opennews/art.shtml?num=56130

[71] Google прекратит поддержку старых версий Chrome в этом месяце: https://3dnews.ru/1053174

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

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

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

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