Дайджест свежих материалов из мира фронтенда за последнюю неделю №465 (26 — 2 мая 2021)

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

[5] Подкаст «proConf» #94: GraphQL Galaxy: https://soundcloud.com/proconf/94-graphql-galaxy

[6] «Новости 512» от CSSSR: Chrome 91 Beta, postcss-easy-z, tree-shakeable библиотеки, гайды по кастомным CSS-свойствам и CLS: https://soundcloud.com/csssr/chrome-91-beta-postcss-eazy-z-tree-shakeable-biblioteki-gaydy-po-kastomnym-css-svoystvam-i-cls

[7] Подкаст «Callback Hell»: Падение последнего оплота Dart, визуальные ЯП на примере Enso, Lucy — DSL для стейт-машин: https://soundcloud.com/csssr/padenie-poslednego-oplota-dart-vizualnye-yap-na-primere-enso-lucy-dsl-dlya-steyt-mashin

[8] Подкаст «Фронтенд Юность»#184: Матрица для мешка с картошкой: https://soundcloud.com/frontend_u/e184

[9] История фронтенда: JavaScript как отражение новой эпохи: https://blog.csssr.com/ru/article/frontend-history-java-script-as-a-reflection-of-a-new-era

[10] HTMHell — адовая разметка: https://habr.com/ru/post/555192/

[11] HTML-теги и атрибуты, о которых вы, возможно, не знали: https://habr.com/ru/company/macloud/blog/555400/

[12] Адаптивный дизайн как антипаттерн: https://habr.com/ru/company/macloud/blog/554650/

[13] Скромный элемент img и Core Web Vitals: https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/

[14] Как реализовать выбор действий для выделенного текста с помощью Selection API: https://css-tricks.com/how-to-create-actions-for-selected-text-with-the-selection-api/

[15] Yarn 2 — Устанавливаем и разбираемся: https://habr.com/ru/post/554944/

[16] Почему мы перешли с Webpack на Vite: https://blog.replit.com/vite

[17] Новый Flex редактор в Chrome 90: https://www.youtube.com/watch?v=ozlqXeFng1E

[18] Веб-сервер на Ubuntu 20 с нуля: nginx, HTTPS, Brotli и HTTP/2: https://www.youtube.com/watch?v=XDWWxA6g1eA

[19] Полное руководство по показателям производительности Google Core Web Vitals : https://blog.asayer.io/the-complete-guide-to-google-s-core-web-vitals-performance-metrics

[20] Основные показатели, которые необходимо учитывать при измерении производительности фронтенда: https://blog.asayer.io/top-metrics-you-need-to-understand-when-measuring-front-end-performance

[21] Рекомендации Google Web Vitals для одностраничных приложений : https://blog.logrocket.com/google-web-vitals-single-page-apps/

[22] Трехмерный поворот букв и интересный эффект наведения для изображений: https://tympanus.net/codrops/2021/04/28/rotated-3d-letters-and-image-hover-effect/

[23] Воссоздание анимации Apple Keynote Event с использованием SVG, Canvas и GreenSock: https://www.bram.us/2021/04/28/recreating-the-apple-keynote-event-animation-using-svg-canvas-and-greensock/

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

[25] Эффект ряби текстуры и эффект масштабирования видео с помощью Three.js и GLSL : https://tympanus.net/codrops/2021/04/26/texture-ripples-and-video-zoom-effect-with-three-js-and-glsl/

[26] Примеры применения переменных CSS на практике: https://habr.com/ru/company/skillfactory/blog/554440/

[27] Контейнерные запросы в CSS: https://habr.com/ru/company/skillfactory/blog/554434/

[28] Как обеспечить глассморфизм с помощью HTML и CSS: https://habr.com/ru/company/otus/blog/554646/

[29] VDS (value definition syntax): https://ariarzer.dev/value-definition-syntax.html

[30] fit-content и fit-content(): https://www.quirksmode.org/blog/archives/2021/04/fitcontent_and.html

[31] Полное руководство по Custom Properties: https://css-tricks.com/a-complete-guide-to-custom-properties/

[32] Первый взгляд на CQFill, полифилл для CSS Container Queries : https://www.bram.us/2021/04/27/a-first-look-at-cqfill-a-polyfill-for-css-container-queries/

[33] Изучение color-contrast() в первый раз: https://css-tricks.com/exploring-color-contrast-for-the-first-time/

[34] GPT-3 и CSS-фреймворки : http://www.vcarrer.com/2021/04/gpt-3-and-css-frameworks.html

[35] Понимание easing-функций для анимации и переходов в CSS: https://www.smashingmagazine.com/2021/04/easing-functions-css-animations-transitions/

[36] Новые возможности WebKit в Safari 14.1 (Flexbox Gap, Date & Time Inputs, CSS Individual Transform Properties): https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/

[37] Целительная сила JavaScript: https://habr.com/ru/company/sportmaster_lab/blog/554482/

[38] Человеко-читаемый JavaScript: история о двух экспертах: https://habr.com/ru/company/macloud/blog/555304/

[39] Принцип мозаики, или Как мы сделали JavaScript по-настоящему модульным: https://web-standards.ru/articles/modular-javascript/

[40] Клиентские шаблоны API, о которых должен знать каждый разработчик фронтенда: https://medium.com/js-dojo/api-client-patterns-every-front-end-developer-need-to-know-b0957e05b134

[41] Вы можете использовать метки с оператором `if` : https://css-tricks.com/you-can-label-a-javascript-if-statement/

[42] Шпаргалка по импорту и экспорту в ES6 : https://blog.yogeshchavan.dev/es6-import-and-export-cheatsheet

[43] Итераторы и генераторы в JavaScript: полное руководство: https://blog.logrocket.com/javascript-iterators-and-generators-a-complete-guide/

[44] 5 React-хуков, которые пригодятся в любом проекте: https://habr.com/ru/company/ruvds/blog/554280/

[45] 5 методов оптимизации производительности в React приложениях : https://www.telerik.com/blogs/5-techniques-optimizing-performance-react-app

[46] React Table: библиотека headless таблиц для React: https://blog.bitsrc.io/react-table-the-headless-table-library-for-react-2eb8c6ac98f1

[47] Руководство по React Table и лучшие примеры наблиц в React: https://flatlogic.com/blog/react-table-guide-and-best-react-table-examples/

[48] Основные преимущества, которые вы можете получить от Icons-Components в React.js: https://medium.com/front-end-in-regions-grodno/the-main-benefits-that-you-can-get-from-icons-components-in-react-js-8efe021e24a1

[49] Angular docs. Введение в формы Angular: https://medium.com/fafnur/angular-docs-%D0%B2%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2-%D1%84%D0%BE%D1%80%D0%BC%D1%8B-angular-e85b9b4c29d3

[50] Banx. Работа с HTTP в Angular. Создание вспомогательных утилит для API.: https://medium.com/fafnur/banx-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0-%D1%81-http-%D0%B2-angular-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B2%D1%81%D0%BF%D0%BE%D0%BC%D0%BE%D0%B3%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D1%85-%D1%83%D1%82%D0%B8%D0%BB%D0%B8%D1%82-%D0%B4%D0%BB%D1%8F-api-885409c741c1

[51] Banx. Config service и Environment service в Angular для Nx: https://medium.com/fafnur/banx-config-service-%D0%B8-environment-service-%D0%B2-angular-%D0%B4%D0%BB%D1%8F-nx-e19a3b1ff178

[52] Основы Angular: привязка стилей в Angular с ngStyle: https://www.telerik.com/blogs/angular-basics-style-binding-angular-ngstyle

[53] Функциональное реактивное программирование в Angular с помощью RxJS: https://blog.asayer.io/functional-reactive-programming-in-angular-with-rxjs

[54] Ленивая загрузка в Angular — руководство для начинающих: https://arjavdave.com/2021/04/28/lazy-loading-in-angular-a-beginners-guide/

[55] Что нового в экосистеме Angular (Ng-Conf 21 Update): https://javascript.plainenglish.io/whats-new-for-the-angular-ecosystem-ng-conf-21-update-56f365cc12bc

[56] Маунтим легкие приложения в Ember : https://dev.to/sivasundar/mount-light-weighted-apps-into-ember-21ga

[57] Обзор библиотек и компонентов в Svelte UI: https://dev.to/plazarev/overview-of-svelte-ui-libraries-and-components-2ban

[58] Чем отличается Svelte — и потрясающе!: https://blog.jannikwempe.com/why-svelte-is-different-and-awesome

[59] Полезные JavaScript-библиотеки: https://habr.com/ru/company/ruvds/blog/554286/

[60] js-tokens — Крошечный гибкий JavaScript-токенизатор, работающий на регулярных выражениях : https://github.com/lydell/js-tokens

[61] Fower — утилитарная CSS in JS библиотека для быстрой разработки интерфейсов.: https://fower.vercel.app/

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

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

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

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

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