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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

[5] Подкаст «Фронтенд Юность (18+)» №147: Jenkins забирает код у Медиазоны: https://soundcloud.com/frontend_u/e147

[6] Подкаст CSSSR: Chrome 84, Safari 14 Beta, Ember Roadmap 2020, Yandex UI Kit, Open Prioritization, Oracle Update: https://soundcloud.com/csssr/chrome-84-safari-14-beta-ember-roadmap-2020-yandex-ui-kit-open-prioritization-oracle-update

[7] Подкаст «Сделайте мне красиво», Выпуск №38: Кортежи в js, преоптимизация useCallbacks и яма с SPA: https://soundcloud.com/begebot/ep38

[8] Пришло время ленивой загрузки закадровых <iframe>: https://habr.com/ru/post/512508/

[9] Правосторонний интерфейс: адаптируем контролы к right-to-left языкам: https://habr.com/ru/company/badoo/blog/511926/

[10] Yaml для веб разработчиков: https://webdevblog.ru/yaml-dlya-veb-razrabotchikov/

[11] Авторизация и аутентификация для всех: https://webdevblog.ru/avtorizaciya-i-autentifikaciya-dlya-vseh/

[12] Google отложил переход на mobile-first индексацию до марта 2021 года: https://searchengines.guru/ru/news/2048149

[13] Полноценный HTML в GitHub README с помощью SVG foreignObject: https://medium.com/@omrilotan/rich-html-in-github-readme-bfb3de791441

[14] Введение в Jamstack: создание безопасных, высокопроизводительных сайтов : https://www.sitepoint.com/learn-jamstack/

[15] Используйте Chrome DevTools как Senior Frontend Developer : https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674

[16] 5 стратегий Service Worker кэширования для вашего следующего PWA приложения : https://blog.bitsrc.io/5-service-worker-caching-strategies-for-your-next-pwa-app-58539f156f52

[17] Перевод прототипов в доступный HTML/CSS код : https://www.smashingmagazine.com/2020/07/design-wireframes-accessible-html-css/

[18] Как действовать и понять доступность уже сейчас : https://www.deque.com/blog/how-to-act-and-understand-accessibility-right-now/

[19] Руководство для начинающих по ADA Website Accessibility Compliance: https://www.searchenginejournal.com/website-accessibility-compliance/374878/#close

[20] Удержание футера внизу страницы: https://habr.com/ru/post/511612/

[21] Элементы одинаковой высоты: Flexbox vs Grid: https://habr.com/ru/post/511740/

[22] Масштабирование изображений на CSS: https://habr.com/ru/post/511958/

[23] Нативный способ покрасить SVG-иконки: https://habr.com/ru/company/tinkoff/blog/512082/

[24] О конфликтах Sass и сравнительно новых возможностей CSS: https://habr.com/ru/company/ruvds/blog/511596/

[25] Объ­яс­не­ние клю­че­вых слов initial, inherit, unset и revert в CSS: https://web-standards.ru/articles/inherit-initial-unset-revert/

[26] @property: наделяем суперспособностями CSS переменные : https://web.dev/at-property/

[27] Современные методы CSS для улучшения читабельности : https://www.smashingmagazine.com/2020/07/css-techniques-legibility/

[28] keyframes.app — визуальный онлайн инструмент, облегчающий создание CSS для анимаций: https://keyframes.app/

[29] Использование Flexbox с text ellipsis : https://leonardofaria.net/2020/07/18/using-flexbox-and-text-ellipsis-together/

[30] Анимированное подчеркивание на CSS : https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline

[31] О том, как использовать множественные фоны в CSS: https://ishadeed.com/article/css-multiple-backgrounds/

[32] Когда вы используете inline-block?: https://css-tricks.com/when-do-you-use-inline-block/

[33] Онлайн-генератор изображений трехмерных книг на CSS : https://3d-book-css.netlify.app/

[34] css-media-vars — Новый способ написания адаптивного CSS. Именованные точки останова, DRY селекторы, без скриптов, без сборок, ванильный CSS.: https://propjockey.github.io/css-media-vars/

[35] За пределами размеров экрана: отзывчивый дизайн в 2020 году : https://www.heartinternet.uk/blog/beyond-screen-sizes-responsive-design-in-2020/

[36] Реалистичные капли на CSS : https://codepen.io/raczo/full/KKVbQmV

[37] Выбор зависимостей JavaScript: https://habr.com/ru/company/domclick/blog/512154/

[38] Путь к пониманию шаблонных литералов в JavaScript: https://habr.com/ru/company/ruvds/blog/511590/

[39] Реактивный jQuery для спагетти-кода: https://css-tricks.com/reactive-jquery-for-spaghetti-fied-legacy-codebases-or-when-you-cant-have-nice-things/

[40] Импорт не-ESM-библиотек в ES-модули с ванильным JS : https://lea.verou.me/2020/07/import-non-esm-libraries-in-es-modules,-with-client-side-vanilla-js/

[41] Двоичное дерево поиска на JavaScript: https://webdevblog.ru/dvoichnoe-derevo-poiska-na-javascript/

[42] Практика функционального программирования на JavaScript — методы составления данных: https://webdevblog.ru/praktika-funkcionalnogo-programmirovaniya-na-javascript-metody-sostavleniya-dannyh/

[43] Работаем с датами на VanillaJS: https://tech.geekjob.ru/days-in-month-by-number-vanilla-js/

[44] Что такое мемоизация?: https://whatthefuck.is/memoization

[45] Debouncing с помощью React Hooks: хук для функций: https://habr.com/ru/company/domclick/blog/510616/

[46] Подробно о React Router. Часть 3— редиректы, передача props компоненту роута и вложенные роуты +бонус: https://medium.com/@stasonmars/%D0%BF%D0%BE%D0%B4%D1%80%D0%BE%D0%B1%D0%BD%D0%BE-%D0%BE-react-router-ec45c399deb8

[47] Давайте поговорим о SVG и его асинхронной загрузке в React : https://medium.com/@crispin.anderson/lets-talk-about-svg-eb81d5972a60

[48] Как реализовать React-миграцию и повысить производительность в 3 раза? : https://www.simform.com/react-migration/

[49] Как использовать Styled-Components в React : https://www.smashingmagazine.com/2020/07/styled-components-react/

[50] Юнит тестирование в React — Что нужно знать : https://felixgerschau.com/unit-testing-react-introduction/

[51] Тестирование в React, часть 2: библиотека React Testing : https://medium.com/javascript-in-plain-english/testing-in-react-part-2-react-testing-library-f32432b93c6c

[52] 4 популярных способа стилизации ваших React компонентов : https://medium.com/javascript-in-plain-english/4-popular-ways-to-style-your-react-components-18f08ead0fd0

[53] Вам возможно не нужен Vuex с Vue 3: https://webdevblog.ru/vam-vozmozhno-ne-nuzhen-vuex-s-vue-3/

[54] Создание десктоп приложений с помощью Electron и Vue : https://www.smashingmagazine.com/2020/07/desktop-apps-electron-vue-javascript/

[55] Как я использую Vue Slots на моем сайте : https://dev.to/samanthaming/how-i-m-using-vue-slots-on-my-site-nfn

[56] Vue 3.0 вступил в стадию релиз-кандидата! : https://css-tricks.com/vue-3-0-has-entered-release-candidate-stage/

[57] Как создать доступное фронтенд приложение с помощью Chakra UI и Nuxt.js : https://www.smashingmagazine.com/2020/07/accessible-front-end-application-chakra-ui-nuxtjs/

[58] Code Coverage для приложений на Vue : https://vuejsdevelopers.com/2020/07/20/code-coverage-vue-cypress/

[59] Шрифтовая иконочная система с SVG иконками для Vue : https://css-tricks.com/a-font-like-svg-icon-system-for-vue/

[60] Ленивая подгрузка переводов с Angular: https://habr.com/ru/company/ispsystem/blog/512008/

[61] Упрощение Change Detection в Angular: https://www.telerik.com/blogs/simplifying-angular-change-detection

[62] Максимальное использование Angular DI: концепт приватных провайдеров : https://indepth.dev/private-providers/

[63] 5 советов, чтобы улучшить свои навыки в Angular : https://indepth.dev/5-tips-to-boost-your-angular-skills/

[64] Angular + CSS Modules: https://indepth.dev/angular-css-modules/

[65] The Ember Times — Issue No. 157: https://dev.to/embertimes/the-ember-times-issue-no-157-flg

[66] Магия, стоящая за модификаторами ember : https://dev.to/_raja_sk_/the-magic-behind-the-ember-modifiers-164c

[67] Обнаружение компонентов Ember.js, входящих или выходящих из области просмотра : https://medium.com/@koushikrad/using-an-ember-cli-addon-detecting-ember-js-components-entering-or-leaving-the-viewport-dda5ad9b46bf

[68] Svelte <3 TypeScript: https://svelte.dev/blog/svelte-and-typescript

[69] Svelte и TypeScript — наконец-то вместе! : https://blog.scottlogic.com/2020/07/24/svelte-ts.html

[70] doom-scroller.js — забавная JavaScript библиотека, которая поможет вам избавиться от бесконечного скроллинга путем добавления элементов из Doom: https://defaced.dev/web/doom-scroller/

[71] mailgo — новый концепт модальных окон для ссылок mailto и tel : https://mailgo.dev/

[72] Perfect Arrows — Набор функций для рисования идеальных стрелок между точками и фигурами.: https://github.com/steveruizok/perfect-arrows

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

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

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

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

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