Дайджест свежих материалов из мира фронтенда за последнюю неделю №427 (3 — 9 августа 2020)

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «Веб-стандарты» №241. Сайд-подкасты, онлайн-события, новости браузеров, main вместо master, поиски эмпатии: https://medium.com/web-standards/episode-241-e48e7ecc62a0

[7] Подкаст CSSSR: Тестирование Vue-компонентов, roadmap разработки Github, релизы Angular, Next.js и git: https://soundcloud.com/csssr/testirovanie-vue-komponentov-roadmap-razrabotki-github-relizy-angular-nextjs-i-git

[8] Подкаст «Фронтенд Юность (18+)» №149: Нагибабель топит ледники: https://soundcloud.com/frontend_u/e149

[9] Технологии фронтенд-разработки, на которые вы, возможно, не обратили внимания: https://habr.com/ru/company/ruvds/blog/513770/

[10] Профессиональное применение инструментов разработчика Chrome: 13 советов: https://habr.com/ru/company/ruvds/blog/512862/

[11] Руководство по веб-разработке для новичков «The no jargon guide» — Развертывание вашего первого сайта : https://dev.to/lauracharvey/breaking-into-web-dev-the-no-jargon-guide-article-2-deploying-your-first-website-13nn

[12] Релиз Emmet 2 для Sublime Text: https://teletype.in/@chikuyonok/emmet2-sublime-text

[13] Оптимизация производительности фронтенда. Часть 1. Critical Render Path: https://habr.com/ru/company/hh/blog/513940/

[14] Вырезаем SSR и ускоряем Хабр в 10 раз: https://habr.com/ru/post/514144/

[15] Google рассказал подробнее об измерении Core Web Vitals : https://searchengines.guru/ru/news/2048284

[16] Изучение всех основных функций вкладки «Performance» в Chrome и практика с ними на примере простого проекта на React.: https://medium.com/@9oelm/learn-major-functionalities-on-chromes-performance-tab-and-practice-it-with-a-simple-react-project-98e0306aa7

[17] content-visibility: новое свойство CSS, повышающее производительность рендеринга.: https://web.dev/content-visibility/

[18] Алгоритм, стоящий за Performance Score (и как улучшить ваш результат) : https://calibreapp.com/blog/how-performance-score-works

[19] Техника для более быстрой предзагрузки hero-изображений : https://addyosmani.com/blog/preload-hero-images/

[20] Делаем Facebook.com доступным как можно большему количеству людей : https://engineering.fb.com/web/facebook-com-accessibility/

[21] Релиз Axe-core 4.0, одного из лучших браузерных инструментов для работы над доступностью : https://www.deque.com/blog/announcing-axe-core-4-0/

[22] Обеспечение идеального контраста между светлым текстом и фоновым изображением : https://css-tricks.com/nailing-the-perfect-contrast-between-light-text-and-a-background-image/

[23] Подборка креативных концептов «UI Interactions & Animations Roundup #9» : https://tympanus.net/codrops/2020/08/04/ui-interactions-animations-roundup-9/

[24] Magnetic Buttons — набор «магнитящихся» кнопок с забавной анимацией наведения. : https://tympanus.net/codrops/2020/08/05/magnetic-buttons/

[25] Анимация рукописной каллиграфии на SVG : https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

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

[27] CSS Grid понятно для всех: https://habr.com/ru/post/513902/

[28] Медиазапросы в SCSS — ещё один удобный способ использования @media screen: https://habr.com/ru/post/513626/

[29] 6 мощных возможностей CSS, которые позволяют обойтись без JavaScript: https://habr.com/ru/company/ruvds/blog/513768/

[30] Drop-Shadow: недооцененный CSS фильтр : https://css-irl.info/drop-shadow-the-underrated-css-filter/

[31] Computed Values: больше, чем кажется на первый взгляд: https://css-tricks.com/computed-values-more-than-meets-the-eye/

[32] Легкое решение для Masonry на CSS Grid c фолбеком на JavaScript: https://css-tricks.com/a-lightweight-masonry-solution/

[33] Углубляемся в детали свойства Flex : https://ishadeed.com/article/css-flex-property/

[34] Современные решения на CSS grid для большинства проблем с раскладкой : https://vycke.dev/blog/css-layout-patterns/

[35] Реализация реалистичного перелистывания страниц на CSS: https://codepen.io/amitsheen/full/WNweryv

[36] Оптимизация CSS для более быстрой загрузки страницы : https://pustelto.com/blog/optimizing-css-for-faster-page-loads/

[37] Интерактивный словарь CSS : http://apps.workflower.fi/vocabs/css/en#universal-selector

[38] Больше контроля над CSS Borders с помощью background-image : https://css-tricks.com/more-control-over-css-borders-with-background-image/

[39] font-weight: 300 может быть вредным (и возможное решение с fontconfig) : https://work.lisk.in/2020/07/18/font-weight-300.html

[40] Супергеройский леайут — объединение CSS Grid и CSS Shapes : https://levelup.gitconnected.com/super-hero-layout-combining-css-grid-and-css-shapes-26a60acef643

[41] Мои любимые трюки в JavaScript: https://habr.com/ru/post/513990/

[42] Node Modules в состоянии войны: почему CommonJS и ES Modules не могут работать вместе: https://redfin.engineering/node-modules-at-war-why-commonjs-and-es-modules-cant-get-along-9617135eeca1

[43] RxJS & Firebase 101: https://medium.com/firebase-developers/rxjs-firebase-101-68a84c37f85e

[44] Анонс нового веб-сайта для TypeScript : https://devblogs.microsoft.com/typescript/announcing-the-new-typescript-website/

[45] Сравнение моделей реактивности — React vs Vue vs Svelte vs MobX vs Solid : https://dev.to/lloyds-digital/comparing-reactivity-models-react-vs-vue-vs-svelte-vs-mobx-vs-solid-29m8

[46] 1Keys — Как я сделал пианино всего в 1 КБ JavaScript : https://frankforce.com/?p=7617#pianostory

[47] Дэн Абрамов о замыканиях в JavaScript: https://habr.com/ru/company/ruvds/blog/513764/

[48] Почему Array.isArray(Array.prototype) возвращает true?: https://habr.com/ru/post/514304/

[49] Все вопросы по фронтенду c собеседований, заданные во время моего недавнего поиска работы. : https://dev.to/devabhijeet/all-front-end-interview-questions-asked-during-my-recent-job-hunt-1kge

[50] Concurrent Mode в React: адаптируем веб-приложения под устройства и скорость интернета: https://habr.com/ru/company/yandex/blog/514016/

[51] Как Next.js может помочь улучшить SEO : https://blog.logrocket.com/how-next-js-can-help-improve-seo/

[52] Практическое руководство по обзору продуктов в приложениях React : https://www.smashingmagazine.com/2020/08/guide-product-tours-react-apps/

[53] Настройка Redux для использования в реальном приложении : https://www.smashingmagazine.com/2020/08/redux-real-world-application/

[54] Улучшения производительности React: сделайте свое React приложение эффективным. : https://dev.to/nikhilkumaran/react-performance-improvements-make-your-react-app-performant-12bm

[55] Наделение react-spring смыслом: https://css-tricks.com/making-sense-of-react-spring/

[56] Vue.js для начинающих, урок 9: пользовательские события: https://habr.com/ru/company/ruvds/blog/513772/

[57] Создание нового веб-сайта с помощью VuePress и Bulma : https://www.adamdehaven.com/blog/building-my-new-website-with-vuepress-and-bulma/#prevent-draft-posts-from-being-published

[58] React для разработчиков на Vue.js: мой опыт : https://dev.to/ayushmanbthakur/react-for-vue-js-user-my-experience-3a2n

[59] Кастомизация сборки Angular-проекта: https://tproger.ru/articles/customizing-build-of-angular-project/

[60] Дорожная карта для Angular : https://blog.angular.io/a-roadmap-for-angular-1b4fa996a771

[61] Angular — это луковица. Подборбный разбор каждого слоя : https://blog.nrwl.io/angular-is-an-onion-63f4cd1ece6

[62] Основные особенности Angular 10 : https://www.telerik.com/blogs/top-features-angular-10

[63] Angular, стратегии загрузки модулей и безопасность : https://dev.to/simplifycomplexity/angular-modules-loading-strategies-security-4ek9

[64] Последнее руководство по Change Detection в Angular, которое вам когда-либо понадобится : https://indepth.dev/the-last-guide-for-angular-change-detection-youll-ever-need/

[65] Angular 10 — На пути к лучшему будущему для Angular : https://indepth.dev/angular-10-towards-the-better-future-for-angular/

[66] The Ember Times — Issue No. 159: https://dev.to/embertimes/the-ember-times-issue-no-159-49j

[67] Svelte Radio, Episode 8 — Amelia Wattenberger, Svelte, D3 and other fun stuff!: https://share.transistor.fm/s/07e0fdb4

[68] Является ли Svelte на голову выше React? : https://medium.com/globant/is-svelte-a-cut-above-react-aa1e4f76b170

[69] Введение в svelte : https://dev.to/vuelancer/introduction-to-svelte-6a3

[70] 8 JavaScript библиотек для более удобной работы с Local Storage : https://medium.com/javascript-in-plain-english/8-javascript-libraries-for-better-handling-local-storage-d8cd4a05dbfa

[71] jois — Небольшая библиотека для помощи в создании веб-компонентов и приложений на основе веб-компонентов.: https://github.com/joist-framework/joist

[72] В Firefox началась активация защиты от отслеживания перемещений через редиректы: https://www.opennet.ru/opennews/art.shtml?num=53495

[73] Новый Edge всем и каждому. Microsoft заблокировала возможность деинсталляции браузера из Windows 10: https://itc.ua/news/novyj-edge-vsem-i-kazhdomu-microsoft-zablokirovala-vozmozhnost-deinstallyaczii-brauzera-iz-windows-10/

[74] Рыночная доля Chrome и Edge продолжает расти, а Firefox теряет популярность: https://3dnews.ru/1017279

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

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

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

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

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