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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Видеоблог Вадима Макеева, выпуск №25. Свежий взгляд на Gulp: функции и ES-модули: https://www.youtube.com/watch?v=fgJmCevEtL4

[7] Подкаст «Pro Conf» #66: Я Фронтенд — Все про картиночки | Фронтенд как у сына маминой подруги | ApolloClient 3: https://www.youtube.com/watch?v=JC8YEdMC7TQ

[8] Подкаст CSSSR: Microfrontends, Vue 3 development, any и unknown в TypeScript, почему CSS такой, Vue и тесты: https://soundcloud.com/csssr/microfrontends-vue-3-development-any-i-unknown-v-typescript-pochemu-css-takoy-vue-i-testy

[9] Что должен уметь верстальщик, чтобы его все хотели: https://habr.com/ru/post/505150/

[10] Создание прототипа SPA интернет магазина на htmlix.js: https://habr.com/ru/post/506572/

[11] Анонсирован новый раздел в MDN Web Docs — путь обучения для фронтенд разработчиков : https://hacks.mozilla.org/2020/06/introducing-the-mdn-web-docs-front-end-developer-learning-pathway/

[12] Новые возможности Node.js 14 — AI, IoT, Assembly и многое другое : https://tsh.io/blog/new-node-js-features/

[13] Достижение баланса между нативными и кастомными селектами : https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/

[14] Поддержка темного режима на вашем сайте : https://jec.fyi/blog/supporting-dark-mode

[15] 5 мифов о  Jamstack: https://css-tricks.com/5-myths-about-jamstack/

[16] Создание прогрессивного веб-приложения и его развертывание : https://dev.to/kgprajwal/building-a-progressive-web-app-and-deploying-it-10p7

[17] (Очень простое) Руководство для начинающих по WEBPACK: https://webdevblog.ru/ochen-prostoe-rukovodstvo-dlya-nachinajushhih-po-webpack/

[18] µcdn: a live, bundlerless, alternative: https://medium.com/@WebReflection/%C2%B5compress-goodbye-bundlers-bb66a854fc3c

[19] starred_search — поиск по ключевым словам в отмеченных GitHub-репозиториях : https://github.com/Link-/starred_search

[20] Оптимизация навигации с помощью клавиатуры с помощью tabindex и ARIA : https://www.sarasoueidan.com/blog/keyboard-friendlier-article-listings/

[21] Устаревшие приложения и Accessibility: https://www.deque.com/blog/legacy-applications-and-accessibility/

[22] Airplanes. Клевая демонстрация скролл-анимации с помощью ScrollTrigger, нового плагина от GreenSock : https://codepen.io/ste-vg/full/GRooLza

[23] Как создать эффект движения фоновой сетки изображений при наведении : https://tympanus.net/codrops/2020/06/10/how-to-create-a-motion-hover-effect-for-a-background-image-grid/

[24] Визуализация списка женщин-лауреатов Нобелевской премии в виде кристаллов в 3d с использованием Vue, WebGL, three.js: https://habr.com/ru/post/506574/

[25] TitleRun — игра, которая существует только в строке заголовка вкладки браузера : https://titlerun.xyz/

[26] Цвета в CSS: https://habr.com/ru/company/ruvds/blog/505626/

[27] Как использовать grid-template-area CSS Grid для изменения порядка элементов html в зависимости от размера вьюпорта: https://medium.com/fordlabs/how-to-use-css-grids-grid-template-area-to-reorder-html-elements-based-in-viewport-size-2074d622ab8

[28] Изучение Z-Index, используя инструмент визуализации : https://thirumanikandan.com/posts/learn-z-index-using-a-visualization-tool

[29] CSS: is () и: where () приходят в браузеры : https://webplatform.news/issues/2020-06-04

[30] Клевые маленькие хитрости CSS Grid для вашего блога : https://css-tricks.com/cool-little-css-grid-tricks-for-your-blog/

[31] Как обратить порядок пользовательские счетчиков в CSS : https://css-tricks.com/how-to-reverse-css-custom-counters/

[32] Grid для разметки, Flexbox для компонентов: https://ishadeed.com/article/grid-layout-flexbox-components/

[33] Эффект складывания журнала на CSS: https://thomaspark.co/2020/06/the-mad-magazine-fold-in-effect-in-css/

[34] Удивительные вещи, которые CSS может анимировать : https://codersblock.com/blog/the-surprising-things-that-css-can-animate/

[35] CSS Houdini: https://iamvdo.me/en/blog/css-houdini

[36] CSS Viewport Units: Быстрый старт : https://www.sitepoint.com/css-viewport-units-quick-start/

[37] Очень странные дела: JavaScript: https://habr.com/ru/company/ruvds/blog/506566/

[38] Минифицируем приватные поля в TypeScript. Доклад Яндекса: https://habr.com/ru/company/yandex/blog/506030/

[39] 10 полезных приёмов для JavaScript-программистов: https://habr.com/ru/company/ruvds/blog/505754/

[40] JS/ES2020: Optional Chaining and Nullish Coalescing: https://tech.geekjob.ru/js-optional-chainingand-nullish-coalescing/

[41] Event listeners and garbage collection : https://jakearchibald.com/2020/events-and-gc/

[42] Как получить все пользовательские свойства на странице в JavaScript : https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/

[43] Список из 156 (продвинутых) вопросов о JavaScript, а также ответы на них : https://github.com/lydiahallie/javascript-questions#readme

[44] Понимание ES-модулей в JavaScript : https://blog.bitsrc.io/understanding-es-modules-in-javascript-a28fec420f73

[45] Как сравнивать объекты в JavaScript : https://dmitripavlutin.com/how-to-compare-objects-in-javascript/

[46] useSWR – моя новая любимая библиотека React: https://habr.com/ru/company/otus/blog/506158/

[47] Уязвимости безопасности в React, которые вы никогда не должны игнорировать : https://www.simform.com/react-security-vulnerabilities-solutions/

[48] Компоненты высшего порядка в React: https://www.smashingmagazine.com/2020/06/higher-order-components-react/

[49] Recoil.js — новая, лучшая библиотека управления состоянием для React : https://medium.com/better-programming/recoil-js-the-new-better-state-management-library-for-react-1095947b5191

[50] Создания генератор случайных цитат на React : https://dev.to/thinkc/build-a-random-quote-machine-with-react-41p4

[51] часть I : https://dev.to/uzumakinarut0/optimizing-react-performance-part-i-n83

[52] часть II : https://dev.to/uzumakinarut0/optimizing-react-performance-part-ii-2ne3

[53] Как настроить Redux с React (2020) : https://dev.to/vikrantbhat/how-to-setup-redux-with-react-2020-cdj

[54] Что такое Storybook и как его использовать для создания библиотеки компонентов в React? : https://www.freecodecamp.org/news/what-is-storybook-and-how-can-i-use-it-to-create-a-component-libary-in-react/

[55] Практическое руководство по интеграции Google Maps в React : https://blog.logrocket.com/a-practical-guide-to-integrating-google-maps-in-react/

[56] Как создать ecommerce сайт с помощью React : https://www.sitepoint.com/how-to-create-an-ecommerce-site-with-react/

[57] 5 альтернатив React Redux в 2020 году : https://blog.bitsrc.io/redux-react-alternatives-c1733793a339

[58] Работа с данными на границе Vue.js-приложения: https://habr.com/ru/company/ruvds/blog/505756/

[59] EVAN YOU: Создание Vue 3: https://webdevblog.ru/evan-you-sozdanie-vue-3/

[60] Почему я бросил Vue ради React? : https://medium.com/better-programming/why-did-i-quit-vue-for-react-65315285fd90

[61] Создание Instagram с использованием TypeScript, Node, Express и Vue — Часть 1 : https://dev.to/calvintwr/build-instagram-using-typescript-node-express-and-vue-part-1-57do

[62] Awesome Vue 3 — курируемая подборка ресурсов, посвященных Vue 3 : https://github.com/blacksonic/awesome-vue-3

[63] Изучение Vue-Multiselect: https://blog.logrocket.com/exploring-vue-multiselect/

[64] Автоматические адаптивные изображения в приложениях Angular : https://dev.to/angular/automatic-adaptive-images-in-angular-applications-1ebf

[65] 10+ лучших статей для изучения Angular в 2020 году : https://dev.to/creativetim_official/10-best-articles-to-learn-angular-and-stay-up-to-date-in-2020-550d

[66] Пре-рендеринг в Angular 9 : https://www.thirdrocktechkno.com/blog/prerendering-in-angular-9

[67] The Ember Times — Issue No. 152: https://dev.to/embertimes/the-ember-times-issue-no-152-1g9n

[68] Как улучшить доступность вашего существующего приложения на Ember : https://simplabs.com/blog/2020/06/02/how-to-improve-the-accessibility-of-your-app/

[69] Валидация форм Svelte с Yup : https://dev.to/codechips/svelte-form-validation-with-yup-2a72

[70] Роутинг в Svelte с Page.js: https://dev.to/jscrambler/svelte-routing-with-page-js-2aj

[71] jsgrids — подборка JavaScript библиотек для работы с таблицами данных: https://jsgrids.io/

[72] Josh.js — JS библиотека для анимации содержимого при прокрутке страницы. : https://mamunhpath.github.io/josh.js/

[73] johnny-five — JavaScript фреймворк для робототехники и IoT : https://github.com/rwaldron/johnny-five

[74] Microsoft Edge Canary и Dev теперь позволяют использовать кастомное фоновое изображение для страницы новой вкладки: https://microsoftportal.net/windows-9/12623-microsoft-edge-canary-i-dev-teper-pozvoljajut-ispolzovat-kastomnoe-fonovoe-izobrazhenie-dlja-stranicy-novoj-vkladki.html

[75] В браузере Brave выявлена подстановка реферального кода при открытии некоторых сайтов: https://www.opennet.ru/opennews/art.shtml?num=53112

[76] В сборках Google Chrome Canary уже можно активировать функцию Live Caption для преобразования речи в текст: https://itc.ua/news/v-sborkah-google-chrome-canary-uzhe-mozhno-aktivirovat-funkcziyu-live-caption-dlya-preobrazovaniya-rechi-v-tekst/

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

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

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

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

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