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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Занимательное: #interesting

[7] Подкаст CSSSR: Автоматизация рефакторинга, миграция на TS, TypeScript 3.9 RC, Redis 6, релизы NodeJS и RoR : https://soundcloud.com/csssr/avtomatizatsiya-refaktoringa-migratsiya-na-ts-typescript-39-rc-redis-6-relizy-nodejs-i-ror

[8] Подкаст «Веб-стандарты» №227: Сайт Веб-стандартов, cssunderhood, Chrome, цвета, кастомные свойства, Brotli, цена фреймворков: https://medium.com/web-standards/episode-227-340ab079749d

[9] RWPod Кафе 15: Andrey Sitnik: https://www.rwpod.com/posts/2020/04/26/cafe-015.html

[10] Подкаст CSSSR. Argumentarium – Место верстки во Вселенной : https://soundcloud.com/csssr/argumentarium-mesto-verstki-vo-vselennoy

[11] Я.Субботник по разработке интерфейсов 2020: https://www.youtube.com/playlist?list=PLKaafC45L_SSYVMAgcEps3j_ulhSfpZB5

[12] Opium.Fill — стандартизация цветовой схемы глазами программиста: https://habr.com/ru/post/499202/

[13] Современные архитектуры фронт-энда: https://habr.com/ru/post/500072/

[14] Современное SEO: AMP-истории: https://habr.com/ru/post/499692/

[15] Что каждый разработчик должен знать о https: http://jem-space.ru/chto-kazhdyi-razrabotchik-dolzhien-znat-o-https/

[16] Немного невинных забав с HTML-видео и Progress : https://css-tricks.com/some-innocent-fun-with-html-video-and-progress/

[17] Хранилище для веба. Существует много разных вариантов хранения данных в браузере. Какой из них лучше всего подходит для ваших нужд?: https://web.dev/storage-for-the-web/

[18] Как не попасть в ловушку браузерного кэша: https://www.youtube.com/watch?v=f8-EBWUXxZE

[19] Как уменьшить размер бандла — стратегия однобуквенных классов в css-modules: https://habr.com/ru/post/499162/

[20] Мониторинг производительности CSS-анимации : https://medium.com/chegg/performance-monitoring-in-css-animations-f11a21d0054f

[21] Автоматизация тестирования веб-производительности с помощью Puppeteer : https://github.com/addyosmani/puppeteer-webperf

[22] Комбинации в ARIA: role=checkbox и aria-checked=mixed: https://medium.com/front-end-in-regions-grodno/%D0%BA%D0%BE%D0%BC%D0%B1%D0%B8%D0%BD%D0%B0%D1%86%D0%B8%D0%B8-%D0%B2-aria-role-checkbox-%D0%B8-aria-checked-mixed-8719a59f871

[23] Избегайте aria-roledescription: https://adrianroselli.com/2020/04/avoid-aria-roledescription.html

[24] Эффект морфинга при наведении на текст: https://tympanus.net/codrops/2020/04/28/morphing-gooey-text-hover-effect/

[25] Руководство по воссозданию эффекта погружения при скроллинге : https://codyhouse.co/tutorials/immersive-section-transition-effect

[26] Полностью отзывчивый дизайн — это больше, чем просто медиа-запросы: https://habr.com/ru/post/500014/

[27] Гибкая разметка без медиа-запросов: функции min(), max(), clamp(): https://habr.com/ru/post/499088/

[28] Мои любимые вопросы о CSS с детальными ответами: https://habr.com/ru/post/499370/

[29] Atomic CSS-in-JS: https://sebastienlorber.com/atomic-css-in-js

[30] Selection в CSS: https://ishadeed.com/article/selection-in-css/

[31] Фейковые трехмерные элементы с помощью CSS : https://uglyduck.ca/fake-3d-elements-with-css/

[32] Мысли по поводу реализации Container Queries в браузерах: https://github.com/dbaron/container-queries-implementability

[33] Свойство CSS «content» принимает альтернативный текст : https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/

[34] Как решить проблему Z-index в течение 1 минуты : https://dev.to/sharmakushal/how-to-solve-the-z-index-issue-within-1-minute-4pn9

[35] 3 безумно простых способа переключить ваш сайт в темный режим : https://dev.to/vishnubaliga/3-insanely-simple-ways-to-switch-your-website-to-dark-mode-3l7d

[36] Создайте красивый input range только с CSS : https://dev.to/christo_pr/create-a-nice-looking-input-range-with-only-css-4oa2

[37] Что мы упускаем при обучении CSS? : https://dev.to/konyan/what-are-we-missing-at-learning-css-39d9

[38] Дорога в ад JavaScript-зависимостей: https://habr.com/ru/company/ruvds/blog/499668/

[39] Я перехожу на JavaScript: https://habr.com/ru/company/ruvds/blog/499670/

[40] Продвинутый TypeScript: https://habr.com/ru/company/oleg-bunin/blog/499634/

[41] Цена JavaScript-фреймворков: https://habr.com/ru/company/ruvds/blog/499280/

[42] Неироничная ненависть к JavaScript: https://habr.com/ru/post/500098/

[43] Alpine.js: JavaScript Framework, который используется как jQuery, написан как Vue и вдохновлен TailwindCSS : https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/

[44] Продолжительный рефакторинг 100000 строк кода — TinyMCE на TypeScript : https://www.tiny.cloud/blog/modern-javascript-refactoring-tinymce/

[45] Шпаргалка по window.location : https://dev.to/samanthaming/window-location-cheatsheet-4edl

[46] Создаём веб-приложение с бэкендом на Django и фронтендом на React: https://tproger.ru/translations/django-react-webapp/

[47] Разработка реактивного гамбургер-меню с помощью React-хуков, TypeScript, и styled-components. : https://medium.com/javascript-in-plain-english/create-your-own-hamburger-menu-using-react-hooks-typescript-and-styled-components-4b2797c4d193

[48] Улучшение производительности загрузки страниц Next.js и Gatsby с помощью чанков: https://web.dev/granular-chunking-nextjs/

[49] Демистификация React Redux : https://blog.scottlogic.com/2020/05/01/demystifying-react-redux.html

[50] Что бы я хотела знать о React : https://bitsofco.de/what-i-wish-i-knew-about-react/?ref=heydesigner

[51] Должен ли я использовать делегирование событий в React? : https://dev.to/thawsitt/should-i-use-event-delegation-in-react-nl0

[52] Интеграционное тестирование в React: больший охват, меньше тестов : https://css-tricks.com/react-integration-testing-greater-coverage-fewer-tests/

[53] Реализация темного режима в приложениях React с использованием styled-components: https://www.smashingmagazine.com/2020/04/dark-mode-react-apps-styled-components/

[54] Визуальное руководство по ментальным моделям React : https://obedparla.com/code/a-visual-guide-to-react-mental-models/

[55] Сравнение Next.js и After.js для приложений c SSR React : https://blog.logrocket.com/comparing-next-js-after-js/

[56] Spring-анимации во Vue: https://habr.com/ru/post/497456/

[57] Новые функции в Vue 3 и как их использовать : https://blog.logrocket.com/new-features-in-vue-3-and-how-to-use-them/

[58] Защита Vue Router : https://medium.com/@achsuthan/vue-router-protection-d36c4be5e6bc

[59] Русскоязычная документация по Angular: https://habr.com/ru/post/499852/

[60] Angular CLI flows. Big picture.: https://medium.com/angular-in-depth/angular-cli-flows-big-picture-9ed1a0d1930

[61] Плохие практики Angular: свежий взгляд : https://medium.com/angular-in-depth/angular-bad-practices-revisited-4f607fcb75da

[62] Лучший способ передать данные в ваши Angular компоненты : https://medium.com/swlh/a-better-way-to-pass-data-to-your-angular-components-e8b5ef6a642a

[63] Рекурсия в шаблонах Ember.js, case factorial(n): https://dev.to/betocantu93/recursion-in-ember-js-templates-case-factorial-n-2jjm

[64] Превью деплойментов с с ember-cli-deploy и Github actions: https://www.kaliber5.de/en/blog/preview-deployments-with-ember-cli-deploy-and-github-actions/

[65] Почему стоит попробовать Svelte: https://dev.to/marcradziwill/why-you-should-try-svelte-54k3

[66] Хотите изучить Svelte? Вот наш бесплатный курс из 16 частей от Svelte Master : https://dev.to/scrimba/want-to-learn-svelte-here-s-our-free-16-part-course-by-svelte-master-11p8

[67] Обработка инпутов в Svelte : https://medium.com/@hohanga/handling-inputs-with-svelte-eda394fd6654

[68] Cupertino Pane — современная слайд-панель с использованием тач-технологий: https://github.com/roman-rr/cupertino-pane

[69] 10 JavaScript библиотек для манипуляций с изображениями на 2020 год : https://blog.bitsrc.io/image-manipulation-libraries-for-javascript-187fde1ad5af

[70] quotable-toolbar — TypeScript плагин, который реализует цитирование текста на веб-страницах: https://github.com/localjo/quotable-toolbar

[71] Определение токсичности текста с помощью React и Tensorflow : https://aralroca.com/blog/detect-text-toxicity-with-react

[72] Hero Generator: Создайте красивый hero image для своего сайта или приложения : https://github.com/sdras/hero-generator

[73] jExcel это плагин для создания электронных таблиц в вебе, совместимых с Excel и другими таблицами: https://github.com/paulhodel/jexcel

[74] utfu: заменяет непонятные символы из старых кодировок на правильные символы UTF-8.: https://gitlab.com/selfagency/utfu

[75] Браузеры. Вольный перевод статьи Джереми Кейта “User agents”: https://medium.com/front-end-in-regions-grodno/%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D1%8B-ccfb5d5a7f27

[76] Доступен Firefox Preview 5.0 для Android: https://www.opennet.ru/opennews/art.shtml?num=52853

[77] Mozilla тестирует сервис анонимных email-адресов Firefox Private Relay: https://www.opennet.ru/opennews/art.shtml?num=52861

[78] Microsoft открыл свою реализацию протокола QUIC, применяемого в HTTP/3: https://www.opennet.ru/opennews/art.shtml?num=52844

[79] С 2006 года Google закрыла 200 проектов: 23 приложения, 16 устройств и 161 сервис: https://vc.ru/services/124452-s-2006-goda-google-zakryla-200-proektov-23-prilozheniya-16-ustroystv-i-161-servis

[80] Новое платье капитализма. Как IT-компании превратились в надзирателей : https://knife.media/surveillance-capitalism/

[81] LinkedIn добавила инструмент для репетиций собеседований: программа находит слабые места в речи и даёт рекомендации: https://vc.ru/services/124325-linkedin-dobavila-instrument-dlya-repeticiy-sobesedovaniy-programma-nahodit-slabye-mesta-v-rechi-i-daet-rekomendacii

[82] Google сделали доступными старые мини-игры, посвященные разным событиям: https://www.computerra.ru/265401/google-sdelali-dostupnymi-starye-mini-igry-posvyashhennye-raznym-sobytiyam/

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

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

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

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

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