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

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

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

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

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

Медиа

podcast Подкаст «Веб-стандарты» #310. Полифил для Container Queries, Remix вместо Next.js, PWA в 2021, TypeScript в Etsy, CSS-ресеты [6]
podcast «Новости 512» от CSSSR: Fleet и Compose Multiplatform, PHP 8.1, гайд по JWT, цепи Маркова, роадмапы по IT-профессиям [7]
podcast Подкаст «Callback Hell»: В гостях Никита Михайлов. Bootstrap, Atomic CSS, физическое здоровье на удаленке [8]
podcast MoscowJS Podcast #1 — Как найти работу, которой захочется гордиться [9]
podcast Подкаст «Да как так-то?». Выпуск №13. Что фронтенд-разработчик должен знать про дизайн [10]
podcast Подкаст «Фронтенд Юность» #215: Nestjs выходит за рамки разумного [11]
podcast video webDev #11: Front-end. Вопросы на собеседовании [12]

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

habr Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объем кода [13]
habr HTMHeaven — 19 советов и приёмов вёрстки [14]
habr Эволюция HTTP для современного веба [15]
en Мощь Serverless для фронтенд разработчиков [16]
en Web Almanac: Ежегодный отчет HTTP Archive состояние веба [17]
en Руководство по созданию веб-компонента для формы кредитной карты [18]

CSS

habr Как я в десять раз ускорил работу таблицы Google одной строкой CSS [31]
habr 10 вещей, которые можно делать в верстке с помощью псевдоэлементов before и after [32]
habr Как сделать удобное 3D-меню на CSS [33]
habr CSS и XPath для QA: чтобы разобраться с локаторами, нужно всего лишь… [34]
en Open Props: Open Source CSS Variables [35]
en CSS Custom Properties и !important [36]
en Интернационализация в CSS [37]
en 5 основных ошибок CSS, которых следует избегать [38]
en Построение системы координат с помощью HTML и CSS [39]
en Концепты CSS — единственное руководство, которое вам нужно [40]
en Chrome DevTools: CSS Overview [41]
en Глитч-эффект на чистом CSS [42]

JavaScript

habr Процедурная генерация бумажных снежинок [43]
habr Как ваш браузер обрабатывает прикосновения к экрану телефона (js touch events) [44]
habr Миграция 17 000 файлов JS на TypeScript. Как это было [45]
Генерация текста с помощью цепей Маркова на JavaScript [46]
en Remix — Самый горячий новый JS-фреймворк (зима 2021 г.) [47]

Браузеры

habr Vivaldi-5.0 — Искусство, доступное всем [70]
«Было приятно, когда наш синтез речи приняли за диктора»: как работает автоперевод и озвучка видео в «Яндекс.Браузере» [71]
Microsoft начала отговаривать пользователей от установки браузера Chrome [72]
en Что нового в WebKit в Safari 15 [73]
en Состояние принятия протокола P2P в современных браузерах [74]

Дайджест за прошлую неделю [75]. dersmoll [76] и alekskorovin [77].

Автор:
alexzfort

Источник [78]


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

Путь до страницы источника: https://www.pvsm.ru/razrabotka-veb-sajtov/370266

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «Веб-стандарты» #310. Полифил для Container Queries, Remix вместо Next.js, PWA в 2021, TypeScript в Etsy, CSS-ресеты: https://soundcloud.com/web-standards/episode-310

[7] «Новости 512» от CSSSR: Fleet и Compose Multiplatform, PHP 8.1, гайд по JWT, цепи Маркова, роадмапы по IT-профессиям: https://soundcloud.com/csssr/fleet-i-compose-multiplatform-php-81-gayd-po-jwt-tsepi-markova-roadmapy-po-it-professiyam

[8] Подкаст «Callback Hell»: В гостях Никита Михайлов. Bootstrap, Atomic CSS, физическое здоровье на удаленке: https://soundcloud.com/csssr/v-gostyakh-nikita-mikhaylov-bootstrap-atomic-css-fizicheskoe-zdorove-na-udalenke

[9] MoscowJS Podcast #1 — Как найти работу, которой захочется гордиться: https://www.youtube.com/watch?v=YeEys5cO_5Q

[10] Подкаст «Да как так-то?». Выпуск №13. Что фронтенд-разработчик должен знать про дизайн: https://www.youtube.com/watch?v=pMjcKAqvbGg

[11] Подкаст «Фронтенд Юность» #215: Nestjs выходит за рамки разумного: https://soundcloud.com/frontend_u/e215

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

[13] Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объем кода: https://habr.com/ru/company/hexlet/blog/592961/

[14] HTMHeaven — 19 советов и приёмов вёрстки: https://habr.com/ru/post/592061/

[15] Эволюция HTTP для современного веба: https://habr.com/ru/company/mvideo/blog/592145/

[16] Мощь Serverless для фронтенд разработчиков: https://serverless.css-tricks.com/

[17] Web Almanac: Ежегодный отчет HTTP Archive состояние веба: https://almanac.httparchive.org/en/2021/

[18] Руководство по созданию веб-компонента для формы кредитной карты: https://blog.logrocket.com/credit-card-form-web-component-tutorial/

[19] JetBrains представила легковесную среду разработки Fleet: https://habr.com/ru/news/t/592421/

[20] Станет ли JetBrains Fleet Be убийцей VSCode?: https://betterprogramming.pub/will-jetbrains-fleet-be-a-vscode-killer-89554d1096ae

[21] Что нужно знать о Parcel 2: https://blog.logrocket.com/what-you-need-to-know-about-parcel-2/

[22] Производительность вычислений WebGPU по сравнению с WebGL: https://pixelscommander.com/javascript/webgpu-computations-performance-in-comparison-to-webgl/

[23] От шрифтов к SVG: стратегия миграции иконок: https://calendar.perfplanet.com/2021/from-fonts-to-svg-an-icon-migration-strategy/

[24] Улучшение CLS и LCP Core Web Vitals: https://polypane.app/blog/improving-your-cls-and-lcp-core-web-vitals/

[25] Мифы о доступности: https://a11ymyths.com/ru/

[26] Тесты доступности Google Lighthouse полезны, но не идеальны: https://www.boia.org/blog/googles-lighthouse-accessibility-tests-are-helpful-but-not-perfect

[27] Не забывайте об атрибуте lang: https://css-irl.info/dont-forget-the-lang-attribute/

[28] Grid Zoom Layout — сетка изображений с зум-эффектом для отображения дополнительного контента: https://tympanus.net/Development/GridZoom/

[29] Анимация вытеснения диагональных полос: https://css-tricks.com/diagonal-stripes-wipe-animation/

[30] Анимированные 3D-ленты с помощью Three.js: https://tympanus.net/codrops/2021/11/29/animated-3d-ribbons-with-three-js/

[31] Как я в десять раз ускорил работу таблицы Google одной строкой CSS: https://habr.com/ru/company/timeweb/blog/593003/

[32] 10 вещей, которые можно делать в верстке с помощью псевдоэлементов before и after: https://habr.com/ru/company/skillbox/blog/592643/

[33] Как сделать удобное 3D-меню на CSS: https://habr.com/ru/company/skillfactory/blog/592549/

[34] CSS и XPath для QA: чтобы разобраться с локаторами, нужно всего лишь…: https://habr.com/ru/company/skyeng/blog/588282/

[35] Open Props: Open Source CSS Variables: https://open-props.style/

[36] CSS Custom Properties и !important: https://www.bram.us/2021/12/04/css-custom-properties-and-important/

[37] Интернационализация в CSS: https://anilvermaspeaks.medium.com/internationalization-in-css-d733f1811e88

[38] 5 основных ошибок CSS, которых следует избегать: https://levelup.gitconnected.com/top-5-css-mistakes-to-avoid-963f76892954

[39] Построение системы координат с помощью HTML и CSS: https://alvaromontoro.com/blog/67993/building-a-coordinate-system-with-html-and-css

[40] Концепты CSS — единственное руководство, которое вам нужно: https://dev.to/weifengnusceg/css-concepts-the-one-and-only-guide-you-need-bb6

[41] Chrome DevTools: CSS Overview: https://dev.to/dailydevtips1/chrome-devtools-css-overview-3oba

[42] Глитч-эффект на чистом CSS: https://dustri.org/b/glitch-effect-on-text-in-pure-css.html

[43] Процедурная генерация бумажных снежинок: https://habr.com/ru/post/592659/

[44] Как ваш браузер обрабатывает прикосновения к экрану телефона (js touch events): https://habr.com/ru/post/592317/

[45] Миграция 17 000 файлов JS на TypeScript. Как это было: https://habr.com/ru/company/skillfactory/blog/592311/

[46] Генерация текста с помощью цепей Маркова на JavaScript: https://bespoyasov.ru/blog/text-generation-with-markov-chains/

[47] Remix — Самый горячий новый JS-фреймворк (зима 2021 г.): https://medium.com/@jameschnebly/remix-the-hottest-new-js-framework-winter-2021-4bee22a0761d

[48] Как использовать Redux для управления состоянием в масштабе всего приложения: https://www.freecodecamp.org/news/how-to-use-redux-for-application-wide-state-management/

[49] Декларативная выборка данных с помощью React Async: https://blog.bitsrc.io/declarative-data-fetching-with-react-async-d4dfc63b0597

[50] React 18 — Что нового и чем это поможет разработчикам: https://blog.openreplay.com/react-18-what-s-new-and-how-it-will-benefit-developers

[51] Создавайте адаптивные веб-страницы с помощью React-Response и TypeScript: https://blog.openreplay.com/build-responsive-web-pages-with-react-responsive-and-typescript

[52] Варианты оптимизации кеширования в React : https://medium.com/@KasraKhosravi/options-for-optimizing-caching-in-react-bc224f70145f

[53] Устранение утечек памяти в вашем приложении: https://calendar.perfplanet.com/2021/plugging-memory-leaks-in-your-app/

[54] Создание клона Trello с помощью React DnD: https://blog.logrocket.com/building-trello-clone-react-dnd/

[55] Что нового в Next.js 12: https://blog.logrocket.com/whats-new-next-js-12/

[56] Dependency injection в React: https://blog.logrocket.com/dependency-injection-react/

[57] Ноябрь был посвящен Vue и Vue.JS в 2021 : https://blog.meetupfeed.io/vue-vue-js-november-2021/

[58] 'defineComponent' в Vue 3 — это чистая магия! Вы знаете, как это работает?: https://www.telerik.com/blogs/definecomponent-vue-3-pure-magic

[59] Телеграф на RxJS: https://habr.com/ru/company/tinkoff/blog/593165/

[60] Чего ожидать от Angular 14 в 2022 году: появится ли Micro Frontend?: https://itnext.io/what-to-expect-from-angular-14-in-2022-is-micro-frontend-coming-7932566f773

[61] Ленивая загрузка компонента в Angular без роутинга : https://www.wittyprogramming.dev/articles/lazy-load-component-angular-without-routing/

[62] Как делать параллельные API вызовы в приложениях на Angular: https://medium.com/bb-tutorials-and-thoughts/how-to-make-parallel-api-calls-in-angular-applications-4b99227e7458

[63] The Ember Times — Issue No. 192: https://blog.emberjs.com/the-ember-times-issue-192/

[64] Введение в EmberJS: JavaScript, поисковая оптимизация и веб-приложения: https://abhiraj.mdx.one/posts/emberjs

[65] Интервью с Balint Erdi: https://nothingventured.rocks/ember-phorest-with-balint-erdi-7e90126975ee

[66] Создание веб-сайта с использованием Golang и Svelte.js вместе: https://dev.to/ksckaan1/creating-a-website-using-golang-and-sveltejs-together-55g8

[67] Методы жизненного цикла Svelte можно использовать где угодно: https://geoffrich.net/posts/svelte-lifecycle-examples/

[68] Аутентификация в SvelteKit с использованием cookie: https://blog.logrocket.com/authentication-sveltekit-using-cookies/

[69] React.js переоценен, используйте вместо него Svelte: https://levelup.gitconnected.com/why-react-js-is-overrated-31b2c6a4e138

[70] Vivaldi-5.0 — Искусство, доступное всем: https://habr.com/ru/company/vivaldi/blog/592881/

[71] «Было приятно, когда наш синтез речи приняли за диктора»: как работает автоперевод и озвучка видео в «Яндекс.Браузере» : https://vc.ru/services/324013-bylo-priyatno-kogda-nash-sintez-rechi-prinyali-za-diktora-kak-rabotaet-avtoperevod-i-ozvuchka-video-v-yandeks-brauzere

[72] Microsoft начала отговаривать пользователей от установки браузера Chrome: https://3dnews.ru/1055048/microsoft-nachala-otgovarivat-polzovateley-ot-ustanovki-brauzera-chrome

[73] Что нового в WebKit в Safari 15: https://blog.logrocket.com/whats-new-webkit-safari-15/

[74] Состояние принятия протокола P2P в современных браузерах: https://blog.logrocket.com/p2p-protocol-acceptance-state-modern-browsers/

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

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

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

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