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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «Веб-стандарты» №232: Edge DevTools, веб Vitals и AMP, 10 лет RWD, веб-платформа, JS-экосистема, вертикальный ритм: https://medium.com/web-standards/episode-232-a06cb67e2c70

[7] Подкаст CSSSR: Windows 10 Update, релизы фреймворков, рендер React, Vue 3 и Angular 10, Web Platform Contribution: https://soundcloud.com/csssr/windows-10-update-relizy-freymvorkov-render-react-vue-3-i-angular-10-web-platform-contribution

[8] Состояние дел в сфере микрофронтендов: https://habr.com/ru/company/ruvds/blog/505622/

[9] Как пройти собеседование в GitLab, попасть в команду разработчиков Vue и стать Staff-engineer: https://habr.com/ru/company/ruvds/blog/505480/

[10] Оценка взаимодействия: Google изменит алгоритм ранжирования сайтов: https://tproger.ru/news/google-changes-ranking-algorithm/

[11] Редизайн сайта W3C: выбор фронтенд фреймворка: https://w3c.studio24.net/docs/choosing-front-end-framework/

[12] Настройка эффективного рабочего процесса с помощью ESLint, Prettier и TypeScript : https://indepth.dev/setting-up-efficient-workflows-with-eslint-prettier-and-typescript/

[13] Релиз HTML5 Boilerplate 8.0.0 : https://htmlcssjavascript.com/web/html5-boilerplate-8-0-0-released/

[14] PayPal Engineering: Совместное использование UI компонентов на ентерпрайз уровне : https://medium.com/paypal-engineering/reusing-ui-components-at-enterprise-level-a7df1ea1f8dd

[15] Доступность или мораль?: https://www.darice.org/2020/05/07/accessibility-or-morals/

[16] Как я использовал Brotli для получения еще меньших файлов CSS и JavaScript на CDN : https://css-tricks.com/how-i-used-brotli-to-get-even-smaller-css-and-javascript-files-at-cdn-scale/

[17] Тестирование скорости мобильных страниц : https://www.machmetrics.com/speed-blog/mobile-page-speed-testing/

[18] Повысьте производительность сайта с помощью инлайнинга CSS : https://blog.logrocket.com/improve-site-performance-inlining-css/

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

[20] Кинетическая типографика с Three.js : https://tympanus.net/codrops/2020/06/02/kinetic-typography-with-three-js/?ref=heydesigner

[21] ScrollTrigger — переизобретение скролл-анимации от GreenSock: https://greensock.com/scrolltrigger

[22] Конфигурируем цветовую схему веб-приложения: https://medium.com/front-end-in-regions-grodno/%D0%BA%D0%BE%D0%BD%D1%84%D0%B8%D0%B3%D1%83%D1%80%D0%B8%D1%80%D1%83%D0%B5%D0%BC-%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%83%D1%8E-%D1%81%D1%85%D0%B5%D0%BC%D1%83-%D0%B2%D0%B5%D0%B1-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-1b514653068c

[23] CSS Grid: Воссоздание газетной верстки: https://codepen.io/oliviale/full/BaoXOOP

[24] Глобальные и компонентные настройки стилей с помощью CSS переменных : https://www.sarasoueidan.com/blog/style-settings-with-css-variables/

[25] Первый взгляд на aspect-ratio: https://css-tricks.com/a-first-look-at-aspect-ratio/

[26] The menu. Пошаговое руководство по созданию гамбургер-меню на SVG и CSS : https://uxdesign.cc/the-menu-210bec7ad80c

[27] Как создавать динамические фоны с помощью CSS Paint API : https://medium.com/better-programming/how-to-create-dynamic-backgrounds-with-the-css-paint-api-ebd733254014

[28] Гибридное позиционирование с CSS переменными и max() : https://lea.verou.me/2020/06/hybrid-positioning-with-css-variables-and-max/

[29] Цвета в CSS: https://ishadeed.com/article/css-color/

[30] Цветовые функции Sass в CSS : https://blog.jim-nielsen.com/2020/sass-color-functions-in-css/

[31] Новый способ имплементации Delay в Keyframes Animations : https://css-tricks.com/a-new-way-to-delay-keyframes-animations/

[32] Повернутые заголовки столбцов таблицы… теперь с меньшим количеством магических чисел! : https://css-tricks.com/rotated-table-column-headers-now-with-fewer-magic-numbers/

[33] Что сегодня умеет JavaScript: https://medium.com/@lucyhackwrench/%D1%87%D1%82%D0%BE-%D1%81%D0%B5%D0%B3%D0%BE%D0%B4%D0%BD%D1%8F-%D1%83%D0%BC%D0%B5%D0%B5%D1%82-javascript-7bc85338c56e

[34] Аккуратно внедряем Emoji, не ломая все остальное: https://vtvz.me/blog/reliable-emojification/?utm=habr

[35] Отслеживайте свой смартфон в 2D с помощью JavaScript : https://medium.com/better-programming/track-your-smartphone-in-2d-with-javascript-1ba44603c0df

[36] Вы не знаете JavaScript, пока не сможете победить в этой игре : https://medium.com/javascript-in-plain-english/you-dont-know-javascript-until-you-can-beat-this-game-aa7fd58befb

[37] Реакция JS сообщества на смерть Джорджа Флойда : https://dev.to/dimansny/js-community-reacts-to-george-floyd-s-death-2nbj

[38] Изучение состояния моделей реактивности в 2020 году : https://indepth.dev/exploring-the-state-of-reactivity-patterns-in-2020/

[39] Статический анализ в JavaScript: 11 инструментов, которые помогут вам обнаружить ошибки раньше, чем пользователи : https://blog.logrocket.com/static-analysis-in-javascript-11-tools-to-help-you-catch-errors-before-users-do/

[40] Живые и неживые коллекции в JavaScript: https://htmlacademy.ru/blog/boost/frontend/collections-js

[41] Антипаттерны JavaScript — прототипы, Switch и многое другое : https://medium.com/swlh/javascript-antipatterns-prototypes-switch-and-more-e8bce5122383

[42] Топ-19 часто задаваемых вопросов о TypeScript на собеседованиях : https://medium.com/javascript-in-plain-english/top-19-frequently-asked-typescript-interview-questions-dac4ff30c017

[43] Stranger Things, JavaScript Edition: https://livecodestream.dev/post/2020-06-03-stranger-things-javascript-edition/

[44] 12 советов по внедрению TypeScript в React-приложениях: https://habr.com/ru/company/tinkoff/blog/505488/

[45] useSWR — Моя новая любимая библиотека в React : https://medium.com/frontend-digest/useswr-my-new-favorite-react-library-cd87a914a5b1

[46] Использование REST API в React с Fetch и Axios : https://www.smashingmagazine.com/2020/06/rest-api-react-fetch-axios/

[47] Как сделать React-приложение прогрессивным веб-приложением (PWA) : https://felixgerschau.com/how-to-make-your-react-app-a-progressive-web-app-pwa/

[48] Как создать инструмент предварительного просмотра Markdown на React.js : https://www.freecodecamp.org/news/how-to-build-a-markdown-previewer-with-react-js/

[49] Один клевый трюк для упрощения функций редуктора : https://medium.com/javascript-scene/one-cool-trick-to-simplify-reducer-functions-bbbffe488bb6

[50] Vuex – решаем старый спор новыми методами: https://habr.com/ru/post/505608/

[51] Vite – ведение разработки без бандлов на Vue: https://habr.com/ru/company/otus/blog/505362/

[52] Vue Best Practices — Наиболее важные изменения : https://medium.com/swlh/vue-best-practices-most-important-changes-b4ced988d659

[53] Чистые, масштабируемые формы с Vue Composition API : https://medium.com/js-dojo/clean-scalable-forms-with-vue-composition-api-6db03cccabde

[54] Быстрый и простой способ реализации поиска во Vue: https://dev.to/chrisdixon161/quick-easy-vue-js-search-facility-517a

[55] Изучите Vuex за 5 минут. : https://dev.to/scrimba/learn-vuex-in-5-minutes-29ja

[56] Подкаст «Views on Vue» №108: Inside Vue 3 with Gregg Pollack: https://devchat.tv/views-on-vue/vov-108-inside-vue-3-with-gregg-pollack/

[57] Как использовать JSON-LD для продвинутого SEO в Angular : https://medium.com/javascript-in-plain-english/how-to-use-json-ld-for-advanced-seo-in-angular-63528c98bb91

[58] Кастомные декораторы в Angular: https://itnext.io/custom-decorators-in-angular-c54da873b3b3

[59] В защиту фреймворка Angular : https://dev.to/zasuh_/in-defense-of-the-angular-framework-25fg

[60] Глубокое погружение в @Injectable и providedIn в Ivy : https://indepth.dev/a-deep-dive-into-injectable-and-providedin-in-ivy/

[61] Тестирование маршрутизируемых компонентов Angular с RouterTestingModule : https://indepth.dev/testing-routed-angular-components-with-the-routertestingmodule/

[62] The Ember Times — Issue No. 151: https://dev.to/embertimes/the-ember-times-issue-no-151-2ba8

[63] Подробное объяснение директивы bind в Svelte : https://dev.to/codechips/svelte-bind-directive-explained-in-depth-339j

[64] C нуля до приложения с потоковой передачей : https://medium.com/@felice.geracitano/zero-to-demo-streaming-application-frontend-ec6cb95ee7d2

[65] Как добавить настраиваемые SVG иконки в приложение на Svelte JS : https://medium.com/@firthous.dev/how-to-add-customizable-svg-icons-in-svelte-js-app-488648d302c8

[66] consoleimg — Отображение изображений в консоли разработчика: https://defaced.dev/tools/consoleimg/

[67] Grid.js — продвинутый плагин для работы с таблицами, релиз новой версии: https://gridjs.io/

[68] Релиз Firefox 77: https://www.opennet.ru/opennews/art.shtml?num=53072

[69] В Firefox появится возможность экспорта сохранённых паролей в формате CSV: https://www.opennet.ru/opennews/art.shtml?num=53096

[70] Microsoft развёртывает новый Microsoft Edge для всех пользователей Windows 10: https://microsoftportal.net/windows-9/12579-microsoft-razvertyvaet-novyj-microsoft-edge-dlja-vseh-polzovatelej-windows-10.html

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

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

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

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

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

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