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

---

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

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

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

[1] Обзор технологий скроллинга: https://habr.com/ru/company/ruvds/blog/509190/

[2] Хватит это верстать, ударим автоматизацией по макетам: https://habr.com/ru/post/508568/

[3] Google запустили бета-версию плагина для публикации AMP-сториз в WordPress: https://oddstyle.ru/wordpress-2/wordpress-plaginy/google-zapustili-beta-versiyu-plagina-dlya-publikacii-amp-storiz-v-wordpress.html

[4] Полное руководство по темному режиму в вебе : https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/

[5] Темные времена веб-разработки: https://pavellaptev.github.io/web-dark-ages/

[6] Выделение фрагмента текста: как сделать ссылку на конкретный фрагмент текста на веб-странице и подсветить его : https://mgearon.com/html/text-fragments/

[7] Прогрессивные веб-приложения: руководство по практическому использованию : https://dev.to/maddevs/progressive-web-apps-practical-usage-guide-5238

[8] Зачем в npm 7 оставили поддержку package-lock.json?: https://habr.com/ru/company/ruvds/blog/509196/

[9] Программируем лучше с ESLint, Prettier и TypeScript: https://tproger.ru/translations/setting-up-eslint-and-prettier/

[10] tooling.report — онлайн-ресурс для быстрого способа определения наиболее оптимального сборщика для вашего проекта, с подробными таблицами сравнения функциональности инструментов: https://bundlers.tooling.report/

[11] Что нового в DevTools (Chrome 85) : https://developers.google.com/web/updates/2020/06/devtools

[12] 5 основных ошибок при мониторинге производительности : https://calibreapp.com/blog/common-mistakes-in-tracking-speed

[13] Browserstack SpeedLab: Проверьте скорость вашего сайта в разных браузерах и устройствах : https://www.browserstack.com/speedlab

[14] Ваши медленные JavaScript-таски расстраивают пользователей? : https://speedcurve.com/blog/javascript-long-tasks/

[15] Оптимизация для Core Web Vitals, презентация от Addy Osmani: https://addyosmani.com/blog/optimize-for-core-web-vitals/

[16] 6 самых распространенных проблем доступности (и как их исправить) : https://blog.scottlogic.com/2020/07/02/6-most-common-accessibility-problems.html

[17] Сага о цветовой доступности : http://www.last-child.com/accessible-colors-video/

[18] Создание анимации изображения при наведении в меню : https://tympanus.net/codrops/2020/07/01/creating-a-menu-image-animation-on-hover/

[19] 3D баннеры с помощью ScrollTrigger: https://codepen.io/supamike/full/KKVqXmR

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

[21] TailwindCSS – очередной фреймворк или новый шаг эволюции?: https://habr.com/ru/post/508844/

[22] Упрощаем фоновые рисунки c помощью конических градиентов: https://habr.com/ru/post/509016/

[23] Стилизация контейнеров для содержимого веб-страниц: https://habr.com/ru/company/ruvds/blog/509194/

[24] Создание простой страницы лендинга за 5 минут используя готовые CSS блоки tailwind.: https://webdevblog.ru/sozdanie-prostoj-stranicy-lendinga-za-5-minut-ispolzuya-gotovye-css-bloki-tailwind/

[25] Accordion Rows в CSS Grid: https://meyerweb.com/eric/thoughts/2020/07/01/accordion-rows-in-css-grid/

[26] Производительность — CSS Painting vs. CSS Houdini Paint API: https://lisilinhart.info/posts/css-houdini-performance

[27] Ссылки нестандартной формы с помощью Subgrid: https://css-irl.info/irregular-shaped-links-with-subgrid/

[28] Получение значений CSS Translate с помощью JavaScript : https://zellwk.com/blog/css-translate-values-in-javascript/

[29] Выравнивание изображений логотипа в CSS : https://ishadeed.com/article/aligning-logos-css/

[30] Динамический импорт CSS: https://medium.com/swlh/dynamically-import-css-d8222423f109

[31] Необычные свойства CSS : https://ishadeed.com/article/uncommon-css/

[32] Адаптирующиеся изображения в изменчивых пропорциях контейнера : https://css-tricks.com/fluid-images-in-a-variable-proportion-layout/

[33] Когда строка не разрывается. О вариантах реализации принудительных переносов в списках : https://css-tricks.com/when-a-line-doesnt-break/

[34] Новое в Chrome: CSS Overview: https://css-tricks.com/new-in-chrome-css-overview/

[35] Когда Sass и новые функции CSS сталкиваются : https://css-tricks.com/when-sass-and-new-css-features-collide/?ref=heydesigner

[36] Полное руководство по медиа-запросам CSS : https://polypane.app/blog/the-complete-guide-to-css-media-queries/

[37] Устройство ленивой загрузки в популярных фронтенд-фреймворках: https://habr.com/ru/company/mailru/blog/506752/

[38] Как получить размеры экрана, окна и веб-страницы в JavaScript: https://habr.com/ru/post/509258/

[39] Избушка на обратно-совместимых ножках — компилируем JS для нужных браузеров: https://habr.com/ru/company/otus/blog/508778/

[40] Кортежи в JS/ES и TypeScript в 2020: https://tech.geekjob.ru/tupples-js-es-typescript-2020/

[41] Почему подход «vanilla JavaScript first» может быть НЕ лучшим выбором: https://www.youtube.com/watch?v=Gwup7MV_fXs&t=0s

[42] Техническое руководство по SEO с Gatsby.js : https://medium.com/frontend-digest/a-technical-guide-to-seo-with-gatsby-js-e88a7dac80f0

[43] Вашему блогу не нужен JavaScript фреймворк: https://iainbean.com/posts/2020/your-blog-doesnt-need-a-javascript-framework/

[44] Изучение регулярных выражений: руководство для начинающих : https://www.sitepoint.com/learn-regex/

[45] Что такое функция высшего порядка?: https://webdevblog.ru/chto-takoe-funkciya-vysshego-poryadka/

[46] Var, let или const? Проблемы областей видимости переменных : https://dailycoding.io/article/pSxYR6iUZaJfwAYLQZGb

[47] double-bang оператор (!!) и неправильное понимание того, как JavaScript обрабатывает истинные/ложные значения : https://www.bennadel.com//blog/3858-the-double-bang-operator-and-a-misunderstanding-of-how-javascript-handles-truthy-falsy-values.htm

[48] Понимание шаблонных литералов в JavaScript: https://www.digitalocean.com/community/tutorials/understanding-template-literals-in-javascript

[49] Создание приложения для мониторинга производительности с использованием новых и экспериментальных функций Node 14 : https://medium.com/@erickwendel/node-v14-x-is-up-deep-diving-into-new-features-ace6dd89ac0b

[50] Создание телесуфлера на React с помощью Web SpeechRecognition API : https://elijahmanor.com/react-teleprompter

[51] Прости, React, но я так больше не могу: https://habr.com/ru/company/ruvds/blog/508654/

[52] Как протестировать ваши приложения React с помощью React Testing Library: https://www.smashingmagazine.com/2020/07/react-apps-testing-library/

[53] Различия между статическими сгенерированными сайтами и приложениями с рендером на стороне сервера : https://www.smashingmagazine.com/2020/07/differences-static-generated-sites-server-side-rendered-apps/

[54] Анатомия Typed React Component : https://daneden.me/blog/2020/anatomy-of-a-typed-react-component?ref=heydesigner

[55] Push-уведомления Firebase в React : https://www.smashingmagazine.com/2020/06/firebase-push-notifications-react/

[56] Server Side Rendering React App с Deno: https://dev.p.ota.to/post/server-side-rendering-react-app-with-deno-4qf28vm8axb/

[57] Шаринг виджетов React между приложениями : https://blog.bitsrc.io/sharing-react-widgets-between-apps-f18c8db1d035

[58] Как сделать localStorage реактивным во Vue: https://webdevblog.ru/kak-sdelat-localstorage-reaktivnym-vo-vue/

[59] Vue Demi — развивающаяся утилита, позволяющая писать библиотеки Universal Vue для Vue 2 и 3: https://github.com/antfu/vue-demi

[60] Создание блога с Nuxt Content: https://nuxtjs.org/blog/creating-blog-with-nuxt-content

[61] 9 идей проектов на Vue JS для начинающих, которые помогут вам получить работу : https://www.blog.duomly.com/vue-js-project-ideas-for-beginners/

[62] Vue 3: обновление статуса середины 2020 года : https://github.com/vuejs/rfcs/issues/183

[63] Напишите свой первый тест для компонента Vue : https://glebbahmutov.com/blog/first-vue-component-test/

[64] Встречаем Angular 10: https://habr.com/ru/company/ruvds/blog/508656/

[65] Angular Dependency Injection: мультипровайдеры: https://levelup.gitconnected.com/angular-dependency-injection-multi-providers-87c55acc4857

[66] Двигаемся быстрее навигации с Angular resolvers: https://levelup.gitconnected.com/go-faster-than-navigation-with-angular-resolvers-1ab77de8f834

[67] Angular 10 в деталях: https://medium.com/javascript-in-plain-english/angular-10-in-depth-a48a3a7dd1a7

[68] Конвертация в строго типизированные формы Angular за минуту : https://indepth.dev/convert-into-strongly-typed-angular-forms-in-a-minute-2/

[69] Создание центра уведомлений с помощью Svelte : https://codechips.me/building-notification-center-with-svelte-stores/

[70] emoji-picker-element — простой эмодзи-пикер, распространяемый как веб-компонент. : https://github.com/nolanlawson/emoji-picker-element

[71] parallax-effect: Эффект параллакса в javascript, использующий face tracking, может быть использован для улучшения 3D-сцен: https://github.com/munrocket/parallax-effect

[72] Релиз Firefox 78: https://www.opennet.ru/opennews/art.shtml?num=53263

[73] Firefox 78: https://tanalin.com/blog/2020/07/firefox-78/

[74] Новый Edge на базе Chromium распространяется вместе с принудительным обновлением ОС и навязчиво ведёт себя: https://itc.ua/news/novyj-edge-na-baze-chromium-rasprostranyaetsya-vmeste-s-prinuditelnym-obnovleniem-os-i-navyazchivo-vedyot-sebya/

[75] Google Chrome побил собственный рекорд, а Windows 10 продолжает расти: https://www.ixbt.com/news/2020/07/02/google-chrome-windows-10.html

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

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

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

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

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