Дайджест свежих материалов из мира фронтенда за последнюю неделю №502 (10 — 16 января 2022)

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «Callback Hell» от CSSSR: Итоги года 2021: https://soundcloud.com/csssr/itogi-goda-2021

[7] Подкаст «Веб-стандарты» №316. Новинки Chrome 97 и DevTools, Faker.js и опенсорс, Crypto Mozilla, стандарт дизайн-токенов: https://soundcloud.com/web-standards/episode-316

[8] Подкаст «Сделайте мне красиво» №67 — 2к22 — это год Backbone.js: https://soundcloud.com/begebot/no67-2k22-eto-god-backbone-js

[9] Подкаст «Фронтенд Юность»: Новогодний стрим 2022: https://soundcloud.com/frontend_u/ny2022

[10] HTML Academy: Тренды веб-разработки в 2022 году: https://www.youtube.com/watch?v=WVhUd_RGMlQ

[11] Вадим Макеев:🥨 Попап вместо селекта: ✨новые HTML-элементы✨ наконец-то решат старую проблему: https://www.youtube.com/watch?v=mG0VFWCTnZI

[12] HTML5 и алгоритм разметки документов: https://habr.com/ru/post/645471/

[13] Автор faker.js и colors.js намеренно сломал свои пакеты: https://habr.com/ru/news/t/599865/

[14] Борьба с капитализмом: почему создатель популярной JS-библиотеки удалил весь ее код и заменил описание словом Liberty. Кейс Faker.js: https://ru.hexlet.io/blog/posts/faker-js

[15] Нарушение обратной совместимости в популярном NPM-пакете привело к сбоям в различных проектах: https://www.opennet.ru/opennews/art.shtml?num=56517

[16] Четыре самых перспективных технологии 2022 года в программировании: https://ru.hexlet.io/blog/posts/perspektivnyh-tehnologii-2022

[17] Полезные свойства HTML5, о которых знают мало разработчиков: https://halimshams.medium.com/amazing-html5-features-that-just-3-of-developers-knows-easy-and-surprising-ac67ff598162

[18] Превращение GitHub страницы в PWA: https://christianheilmann.com/2022/01/13/turning-a-github-page-into-a-progressive-web-app/

[19] Как мы создали расширение VS Code с помощью Rust, WebAssembly и TypeScript: https://www.osohq.com/post/building-vs-code-extension-with-rust-wasm-typescript

[20] «Кто-нибудь видел Web3?» — дорожная карта и ресурсы, чтобы стать «Web3 разработчиком» в 2022 году: https://betterprogramming.pub/has-anyone-seen-web3-a-complete-roadmap-free-resources-to-become-web3-developer-4e5dc9332c1f

[21] Что фронтенд-разработчику нужно знать о новой эре Интернета Web 3.0: https://javascript.plainenglish.io/what-do-you-need-to-know-about-new-era-of-internet-web-3-0-as-a-frontend-developer-55e51f2cd03f

[22] У веба нет номера версий: https://hiddedevries.nl/en/blog/2022-01-03-the-web-doesnt-have-version-numbers

[23] Мои первые впечатления от web3: https://moxie.org/2022/01/07/web3-first-impressions.html

[24] Что такое Web3? Новая децентрализованная сеть, или модное маркетинговое слово: https://www.infoworld.com/article/3646597/what-is-web3-a-new-decentralized-web-or-the-latest-marketing-buzzword.html

[25] State of the Web: Deno: https://habr.com/ru/company/timeweb/blog/645553/

[26] Добавление Vite в существующее веб-приложение: https://css-tricks.com/adding-vite-to-your-existing-web-app/

[27] Vite лучше, чем Webpack?: https://blog.bitsrc.io/vite-is-better-than-webpack-d5dd59610d56

[28] Пришло время попрощаться с Webpack?: https://gaurav-techgeek.medium.com/time-to-say-goodbye-to-webpack-5bf06ff48823

[29] Что такое Vite: руководство по современному и сверхбыстрому инструменту: https://www.telerik.com/blogs/whats-vite-guide-modern-super-fast-project-tooling

[30] Parcel CSS: новый парсер, преобразователь и минимизатор CSS: https://css-tricks.com/parcel-css/

[31] Доступность как шаблон дизайна: https://itnext.io/accessibility-as-a-design-pattern-d58940601cab

[32] Логические атрибуты в HTML и ARIA: в чем разница?: https://hiddedevries.nl/en/blog/2022-01-12-boolean-attributes-in-html-and-aria-whats-the-difference

[33] Практический пример: портфолио Anatole Touvron: https://tympanus.net/codrops/2022/01/14/case-study-anatole-touvrons-portfolio/

[34] Эффект искажения пикселей с помощью Three.js: https://tympanus.net/codrops/2022/01/12/pixel-distortion-effect-with-three-js/

[35] Создание красивых градиентов на CSS: https://habr.com/ru/post/645165/

[36] Как свойство z-index работает под капотом: https://www.freecodecamp.org/news/how-the-z-index-property-works-under-the-hood/

[37] Делайте красивые градиенты: https://www.joshwcomeau.com/css/make-beautiful-gradients/

[38] Не боритесь с каскадом, контролируйте его!: https://css-tricks.com/dont-fight-the-cascade-control-it/

[39] Глубокое погружение CSS в радиальные и конические градиенты: https://www.smashingmagazine.com/2022/01/css-radial-conic-gradient/?ref=heydesigner

[40] Как сделать 3D-коробку с анимацией чистом CSS : https://css-tricks.com/how-to-make-a-pure-css-3d-package-toggle/

[41] Разработка современной UI темы с помощью Open Props: https://blog.logrocket.com/designing-modern-theme-open-props/

[42] 10 основных функций, представленных в Tailwind CSS v3.0: https://levelup.gitconnected.com/top-10-features-introduced-in-tailwind-css-v3-0-39f9700b12a1

[43] Как победить scroll в javascript: https://habr.com/ru/post/645259/

[44] JavaScript: работа с датой и временем с помощью Temporal: https://habr.com/ru/company/timeweb/blog/645075/

[45] Пишем NFT модульный синтезатор на javascript 🤦: https://habr.com/ru/post/645467/

[46] Как напортачить начинающему JS разработчику: принципы DRY, KISS, YAGNI, SOLID: https://www.youtube.com/watch?v=dbhnDgvfn6Y

[47] Что особенного в JavaScript Fetch API?: https://medium.com/madhash/whats-the-big-deal-with-javascript-s-fetch-api-92682d5b2918

[48] ООП в Javascript: https://medium.com/geekculture/o-o-p-in-javascript-369434afcf1d

[49] Как не нужно учить TypeScript: https://fettblog.eu/how-not-to-learn-typescript/

[50] React. Лёгкий способ бросить курить: https://habr.com/ru/post/600035/

[51] Создание веб-редактора кода: https://www.smashingmagazine.com/2022/01/building-web-code-editor/

[52] Альтернатива Next.JS? — Все, что вам нужно знать о RemixJS: https://blog.openreplay.com/an-alternative-to-next-js-everything-you-need-to-know-about-remixjs

[53] 3 шаблона проектирования React компонентов, о которых вы должны знать: https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about

[54] 5 способов избежать повторного рендеринга компонентов React: https://blog.bitsrc.io/5-ways-to-avoid-react-component-re-renderings-90241e775b8c

[55] Лучший способ решить prop drilling в React приложениях: https://blog.logrocket.com/solving-prop-drilling-react-apps/

[56] Cypress превосходит React Testing Library — вот почему: https://engineering.udacity.com/cypress-is-superior-to-react-testing-library-heres-why-3fac0675910

[57] Создание PWA с помощью Vue.js: https://webdevblog.ru/sozdanie-pwa-s-pomoshhju-vue-js/

[58] Как начать работу с vue (часть 1): https://marcin-kwiatkowski.com/blog/vue/how-to-get-started-with-vue-part-1

[59] Прекращение долгосрочной поддержки AngularJS: https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a

[60] Создание микрофронтенд-сетапа с использованием Angular 12: часть 2 — собираем части вместе: https://medium.com/@cardoz.jonathan/building-a-microfrontend-setup-using-angular-12-part-2-putting-the-pieces-together-ba9c772c972

[61] Основы Angular: введение в Observables (RxJS) — часть 2: https://www.telerik.com/blogs/angular-basics-introduction-observables-rxjs-part-2

[62] Sapper и Svelte: быстрое руководство: https://habr.com/ru/company/piter/blog/645343/

[63] Ускорение разработки на Svelte: https://svelte.dev/blog/accelerating-sveltes-development

[64] Как создать свой первый кастомный transition в Svelte: https://css-tricks.com/making-your-first-custom-svelte-transition/

[65] Svelte имеет ту же кривую усвоения, что и React: https://javascript.plainenglish.io/svelte-has-the-same-adoption-curve-as-react-563dce0c7b4a

[66] Svelte Carousel — Супер легкая и супер простая карусель для Svelte : https://github.com/beyonk-adventures/svelte-carousel

[67] instauto — библиотека для автоматизации/ботов Instagram, написанная на современном чистом javascript с использованием Puppeteer: https://github.com/mifi/instauto

[68] TinyBase — крошечная реактивная JS-библиотека для структурированного состояния и табличных данных.: https://tinybase.org/

[69] Валидация формы на стороне клиента с помощью JavaScript и octaValidate: https://blog.bitsrc.io/client-side-form-validation-using-octavalidate-javascript-b150f2d14e99

[70] deno_lint — быстрый линтер для JavaScript и TypeScript, написанный на Rust: https://github.com/denoland/deno_lint

[71] Обновление Firefox 96.0.1. В Firefox Focus включён режим изоляции Cookie: https://www.opennet.ru/opennews/art.shtml?num=56509

[72] Firefox 96 — технические подробности для разработчиков в блоге Марата Таналина: https://tanalin.com/blog/2022/01/firefox-96/

[73] В Chromium и браузерах на его основе ограничено удаление поисковых систем: https://www.opennet.ru/opennews/art.shtml?num=56516

[74] Что такое Chromium без Chrome сверху?: https://css-tricks.com/what-is-chromium-without-chrome-on-top/

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

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

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

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

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