Дайджест свежих материалов из мира фронтенда за последнюю неделю №437 (12 — 18 октября 2020)

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

[5] Подкаст «Веб-стандарты» №251. Chrome 86, Safari и Firefox, начало UI-кита, SSR и Next.js, про Зара и JS-марафоны: https://medium.com/web-standards/episode-251-1497c96a40f8

[6] Подкаст «Сделайте мне красиво», Выпуск №45: 18+ прохладных историй о фронтенде: https://soundcloud.com/begebot/ep45

[7] Подкаст CSSSR: Webpack 5 и Module Federation, Chrome 86, npm 7, Event Loop & Call Stack, Python 3.9, a11y-материалы: https://soundcloud.com/csssr/webpack-5-i-module-federation-chrome-86-npm-7-event-loop-call-stack-python-39-a11y-materialy

[8] Мы делаем веб приложения ради экономии — но этот путь ведет нас во тьму: https://habr.com/ru/company/vdsina/blog/521650/

[9] Темный режим: Hello darkness, my old friend: https://habr.com/ru/company/timeweb/blog/523478/

[10] От HTTP до HTTP 3  -  интернета будущего: https://nuancesprog.ru/p/10080/

[11] 11 фронтенд трюков, о которых не знают многие фронтенд-разработчиков: https://medium.com/javascript-in-plain-english/11-frontend-tricks-that-most-frontend-developers-dont-know-about-68dc48199ed6

[12] Веб-компоненты: полное руководство: https://www.creativebloq.com/features/web-components

[13] Как создается коммуникация в реальном времени с помощью Socket.io & Node.js: https://medium.com/javascript-in-plain-english/real-time-communication-in-web-development-c29a38a7bdb0

[14] Не лайтхаусом единым: как проверить свой сайт со всех сторон: https://habr.com/ru/company/vdsina/blog/522932/

[15] Доступен пакетный менеджер NPM 7.0: https://www.opennet.ru/opennews/art.shtml?num=53884

[16] Учебное пособие по webpack: Как настроить webpack 5 с нуля: https://www.taniarascia.com/how-to-use-webpack/

[17] Головная боль Webpack 5 : https://blog.sindresorhus.com/webpack-5-headache-b6ac24973bf1

[18] Полезные методы отладки кода с помощью Chrome DevTools: https://indepth.dev/useful-techniques-for-debugging-code-using-chrome-devtools

[19] Core Web Vitals: руководство по показателям веб-производительности от Google: https://www.sitepoint.com/core-web-vitals/

[20] Сможет ли генератор статических сайтов сделать мой сайт быстрее? : https://www.machmetrics.com/speed-blog/static-website-generator-make-my-site-faster/

[21] Более быстрая доставка веб-приложений с помощью PRPL: https://addyosmani.com/blog/the-prpl-pattern/

[22] Largest Contentful Paint: измерьте и оптимизируйте : https://webperformance.recipes/resources/largest-contentful-paint-measure-and-optimize/

[23] Написание CSS с еще большим учетом доступности, часть 2: Уважение пользовательских предпочтений: https://www.matuzo.at/blog/writing-even-more-css-with-accessibility-in-mind-user-preferences/

[24] Checka11y.css — CSS для быстрого выявления проблем доступности.: https://github.com/jackdomleo7/Checka11y.css

[25] Альтернативный текст для содержимого, созданного с помощью псевдоэлементов CSS: https://adrianroselli.com/2020/10/alternative-text-for-css-generated-content.html

[26] Воссоздания эффекта частиц, следующих за курсором: https://tympanus.net/codrops/2020/10/12/coding-the-mouse-particle-effect-from-mark-applebys-website/

[27] сайта Mark Appleby: https://mark-appleby.com/

[28] Как воссоздать эффект пульсации при клике на кнопоки в стиле Material Design: https://css-tricks.com/how-to-recreate-the-ripple-effect-of-material-design-buttons/

[29] Коллекция интересных параллакс эффектов: https://1stwebdesigner.com/a-collection-of-interesting-parallax-effects/

[30] Как создать реалистичный Motion Blur эффект с CSS Transitions: https://css-tricks.com/how-to-create-a-realistic-motion-blur-with-css-transitions/

[31] Скролл-анимации для сеток с изображениями : https://tympanus.net/codrops/2020/10/14/scroll-animations-for-image-grids/

[32] Реалистичный портрет на чистом CSS: https://diana-adrianne.com/purecss-character/

[33] Переменные CSS — курс молодого бойца: https://habr.com/ru/company/skillfactory/blog/523130/

[34] 10 современных раскладок в одну строку CSS-кода: https://habr.com/ru/post/522880/

[35] Продвинутый CSS-in-TS: https://habr.com/ru/post/523646/

[36] Выбор CSS макета — Grid или Flexbox?: https://habr.com/ru/company/ruvds/blog/523808/

[37] -​-var:; хак для переключения множественных значений одним пользовательским свойством: https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/

[38] «Отзывчивый» размер шрифта с использованием ванильного CSS: https://deathshadow.medium.com/responsive-font-size-using-vanilla-css-51f81fe999db

[39] Улучшения логических свойств с помощью сокращений: https://web.dev/logical-property-shorthands/

[40] Трюк с :focus-visible : https://css-tricks.com/the-focus-visible-trick/

[41] Подборка из 20 анимированных лоадеров на чистом CSS : https://1stwebdesigner.com/pure-css-animated-page-loaders/

[42] min(), max() и clamp(): три логические функции CSS для использования уже сегодня: https://web.dev/min-max-clamp/

[43] Layoutit Grid: визуальное изучение CSS Grid с помощью генератора: https://css-tricks.com/layoutit-grid-learning-css-grid-visually-with-a-generator/

[44] Новая CSS функция image (): https://medium.com/@elad/the-new-css-image-function-1ea743eaa40b

[45] Отслеживание пользователей с помощью CSS: https://medium.com/javascript-in-plain-english/tracking-with-css-ec98e3d81046

[46] WorkBox: ваш toolkit в мире сервис-воркеров: https://habr.com/ru/company/domclick/blog/523106/

[47] Что такое WeakSet в JavaScript и как он работает: https://webdevblog.ru/chto-takoe-weakset-v-javascript-i-kak-on-rabotaet/

[48] Почему вам следует использовать Top-level Await в JavaScript?: https://blog.bitsrc.io/why-should-you-use-top-level-await-in-javascript-a3ba8139ef23

[49] Начало работы с современным JavaScript — Proxy: https://indepth.dev/getting-started-with-modern-javascript-proxy

[50] Путешествие к Isomorphic Rendering Performance: https://indepth.dev/the-journey-to-isomorphic-rendering-performance

[51] Объектно-ориентированный JavaScript: немного практики: https://dailycoding.io/article/Y3BBwEabeeLyrr9MQ2fS

[52] Документирование ваших TypeScript проектов: варианты: https://blog.bitsrc.io/documenting-your-typescript-projects-there-are-options-da7c8c4ec554

[53] Визуализация сложных данных с использованием D3 и React: https://habr.com/ru/post/517562/

[54] Кастомные хуки. Part 1: https://habr.com/ru/post/523034/

[55] Эффективное тестирование приложений на React с Wallaby.js: https://www.smashingmagazine.com/2020/10/supercharge-testing-react-applications-wallabyjs/

[56] Framer Motion — красивые анимации и взаимодействия для React.: https://dev.to/vaibhavkhulbe/framer-motion-beautiful-animations-and-interactions-for-react-1d56

[57] Управление long-running задачами в приложении на React с помощью веб-воркеров: https://www.smashingmagazine.com/2020/10/tasks-react-app-web-workers/

[58] Wouter: Минималистичная альтернатива React Router: https://blog.bitsrc.io/wouter-a-minimalist-alternative-to-react-router-2756690c2b77

[59] Создание блога с помощью Nuxt Content (часть вторая): https://habr.com/ru/post/523074/

[60] Самый простой способ использовать простые всплывающие сообщения во Vue: https://brettfisher.dev/vue-snackbar/

[61] Уклонение от атак с помощью VueJS script gadgets: https://portswigger.net/research/evading-defences-using-vuejs-script-gadgets

[62] Возможности Angular DI, о которых почти ничего не сказано в документации: https://habr.com/ru/company/tinkoff/blog/523160/

[63] Как имплементировать Lazy Load для компонента в Angular : https://www.telerik.com/blogs/how-to-lazy-load-component-angular

[64] Добавьте реактивности своим шаблонам Angular с помощью LetDirective — Часть 1: https://indepth.dev/bring-reactivity-to-your-angular-templates-with-the-letdirective-part-1

[65] Миграция с .CSS на .SCSS для существующего проекта на Angular: https://indepth.dev/migrate-from-css-to-scss-stylesheets-for-an-existing-angular-application

[66] Создание модального диалога с использованием yieldable named blocks : https://www.balinterdi.com/blog/making-a-modal-dialog-using-yieldable-named-blocks/

[67] Svelte для сайтов, React для приложений: https://www.swyx.io/svelte-sites-react-apps/

[68] Создайте карусель изображений с помощью Svelte: https://dev.to/bmw2621/build-an-image-carousel-with-svelte-4kf8

[69] Удобная платформа для подбора библиотек и фреймворков JavaScript — openbase: https://habr.com/ru/post/523584/

[70] Detect GPU — Определяет графические процессоры на основе их результатов в тестах производительности 3D-рендеринга, что позволяет разработчику предоставлять разумные настройки по умолчанию для приложений с интенсивной графикой.: https://github.com/TimvanScherpenzeel/detect-gpu

[71] dragmove.js — Крошечная Javascript библиотека для перетаскивания элементов в DOM: https://github.com/knadh/dragmove.js

[72] Начало работы с Malina.js: https://blog.bitsrc.io/getting-started-with-malina-js-91e90d831abb

[73] 3 причины использовать меньше JavaScript библиотек : https://medium.com/javascript-in-plain-english/3-reasons-to-use-fewer-javascript-libraries-7226b64868a4

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

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

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

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

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