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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст CSSSR: Chrome 85, NodeJS 14.9.0, css-reset vs css-normalize, релизы JS- и PHP-фреймворков, прощай PhoneGap: https://soundcloud.com/csssr/chrome-85-nodejs-1490-css-reset-vs-css-normalize-relizy-js-i-php-freymvorkov-proshchay-phonegap

[7] UnderJS Podcast #25 — Маленький перерыв, TypeScript 4, Angular 10: https://soundcloud.com/underjs/25-malenkiy-pereryv-typescript-4-angular-10

[8] Фронтенд Юность (18+) — #153 Редактирование PSD в VSCode: https://soundcloud.com/frontend_u/e153

[9] Подкаст «Сделайте мне красиво», Выпуск №43: Чем хуже код, тем лучше программисты (в Aviasales): https://soundcloud.com/begebot/ep43

[10] Подкаст «Веб-стандарты» №245. Firefox 80 и Chrome 85, никто не новый IE, зачем Yarn 2, новый AVIF и WebP v2: https://soundcloud.com/web-standards/episode-245

[11] The CSS Podcast №023: Filters: https://pod.link/thecsspodcast/episode/ZTU4NDI4ZGMtYTc1NC00Y2RlLWI5ZTYtYjlkM2IxOTAzNDZj

[12] Подкаст Toolsday: «Svelte: A Second Look»: https://spec.fm/podcasts/toolsday/o2XubpwD

[13] Сравнение Blazor и JavaScript-инструментов: https://habr.com/ru/company/ruvds/blog/517314/

[14] Безопасность npm-проектов, часть 1: https://habr.com/ru/company/domclick/blog/516792/

[15] Про Shadow DOM: https://habr.com/ru/post/518016/

[16] Как обеспечить безопасность REST API: https://webdevblog.ru/kak-obespechit-bezopasnost-rest-api/

[17] 4 способа подделки API во фронтенд-разработке: https://webdevblog.ru/4-sposoba-poddelki-api-vo-frontend-razrabotke/

[18] 11 микро-фронтенд фреймворков, которые вы должны знать : https://itnext.io/11-micro-frontends-frameworks-you-should-know-b66913b9cd20

[19] Все, что вам нужно знать, чтобы начать работу с Deno : https://www.telerik.com/blogs/how-to-get-started-with-deno

[20] Сравнение инструментов для работы с адаптивным дизайном : https://css-tricks.com/comparing-browsers-for-responsive-design/

[21] Все, что разработчики должны знать о Figma : https://www.smashingmagazine.com/2020/09/figma-developers-guide/

[22] Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite: https://habr.com/ru/company/hh/blog/517594/

[23] Повысьте производительность загрузки страницы с помощью этих методов загрузки скриптов : https://medium.com/better-programming/improve-page-load-performance-with-these-different-script-loading-techniques-b0d912eae7b1

[24] GTmetrix ждут большие изменения: Lighthouse, новые тестовые локации, новые PRO планы и др.: https://gtmetrix.com/blog/big-changes-are-coming-to-gtmetrix-lighthouse-new-test-locations-new-pro-plans-etc/

[25] Ускорение JavaScript (в браузере) : https://hyphaebeast.club/writing/accelerating-js/

[26] Как упростить код SVG с помощью основных фигур : https://css-tricks.com/how-to-simplify-svg-code-using-basic-shapes/

[27] Основные правила веб-анимации : https://css-tricks.com/ground-rules-for-web-animations/

[28] Диагональная анимация для слайдера : https://tympanus.net/codrops/2020/09/01/diagonal-thumbnail-slideshow-animation/

[29] Как спроектировать и разработать интерактивный глобус : https://stripe.com/blog/globe

[30] Часть 1: что это такое и как работает: https://tproger.ru/articles/custom-properties-in-css-part-1/

[31] Часть 2: особенности применения: https://tproger.ru/articles/custom-properties-in-css-part-2/

[32] Часть 3: ограничения: https://tproger.ru/articles/custom-properties-in-css-part-3/

[33] Обработка изображений с помощью CSS : https://dev.to/ziizium/image-manipulation-with-css-11dd

[34] Как использовать CSS Grid для закрепления хедера и футера : https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/

[35] Обводка текста с помощью CSS: Полное руководство : http://www.coding-dude.com/wp/css/css-stroke-text/

[36] Техника добавления переноса на новую строку после инлайн элемента: https://piccalil.li/quick-tip/create-a-line-break-while-maintaining-inline-status/

[37] Пользовательские маркеры с помощью CSS :: marker : https://web.dev/css-marker-pseudo-element/

[38] Помимо медиа-запросов: использование новых функций HTML и CSS для адаптивного дизайна : https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/

[39] Верстка шапки сайта с помощью CSS Flexbox : https://ishadeed.com/article/website-headers-flexbox/

[40] Варианты решения бага вьюпорта в Mobile Safari: https://medium.com/@vilcins/viewport-bug-in-mobile-safari-ea706efc9c74

[41] Как сделать адаптивный компонент с карточкой продукта без медиа-запросов : https://css-tricks.com/how-to-make-a-media-query-less-card-component/

[42] Пользовательские стили CSS для полей ввода и текстовых полей : https://moderncss.dev/custom-css-styles-for-form-inputs-and-textareas/

[43] Создание кастомной полосы прокрутки в 24 строках CSS : https://dev.to/emmabostian/creating-a-custom-scroll-bar-in-24-lines-of-css-4gg0

[44] Обзор ts-migrate — инструмента для перевода крупномасштабных проектов на TypeScript: https://habr.com/ru/company/ruvds/blog/517312/

[45] Рецепты по приготовлению оффлайн-приложений: https://habr.com/ru/post/517672/

[46] Обработка ошибок в JavaScript: https://tproger.ru/articles/handling-exceptions-in-javascript/

[47] 10 малоизвестных веб-API, которые вы можете использовать : https://blog.greenroots.info/10-lesser-known-web-apis-you-may-want-to-use-ckejv75cr012y70s158n85yhn

[48] JavaScript: область видимости простыми словами: https://habr.com/ru/post/517338/

[49] JavaScript Array Insert — Вставка массива JavaScript — как добавить в массив с помощью функций Push, Unshift и Concat: https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/

[50] В JavaScript наконец-то появилась поддержка Native Private Fields и методов : https://blog.bitsrc.io/javascript-finally-has-support-for-native-private-fields-and-methods-d758fdcfd320

[51] Интересное объяснение async/await в JavaScript : https://dmitripavlutin.com/javascript-async-await/

[52] Освоение сложных частей JavaScript: коллбеки : https://dev.to/ryanameri/mastering-hard-parts-of-javascript-callbacks-i-3aj0

[53] Почему я люблю React : https://epicreact.dev/why-i-love-react/

[54] Temper — Управлять состоянием в React стало проще : https://temperjs.org/

[55] Недостающее введение в React : https://medium.com/javascript-scene/the-missing-introduction-to-react-62837cb2fd76

[56] Создание приложений на React с помощью Storybook : https://www.smashingmagazine.com/2020/09/building-react-apps-storybook/

[57] Создание библиотеки компонентов с помощью React и Emotion : https://www.smashingmagazine.com/2020/09/component-library-react-emotion/

[58] 5 библиотек для Vue.js, без которых мне не обойтись: https://habr.com/ru/company/ruvds/blog/517316/

[59] 4 рекомендации по разработке крупномасштабных проектов на Vue: https://habr.com/ru/company/ruvds/blog/517310/

[60] Роутинг в Vue: https://tproger.ru/articles/routing-in-vue/

[61] Создайте приложение со списком покупок с помощью Vue 3.0 Composition API : https://www.sitepoint.com/building-a-shopping-list-app-with-the-vue-composition-api/

[62] Лучшая композиция компонентов в VueJS : https://itnext.io/better-composition-in-vue-fd35b9fe9c79

[63] Сделайте ваше приложение быстрее за счет предзагрузки данных с помощью NgRx : https://indepth.dev/making-your-application-feel-faster-by-prefetching-data-with-ngrx/

[64] Лучший способ реализовать собственные валидаторы : https://indepth.dev/the-best-way-to-implement-custom-validators/

[65] Руководство по созданию вашего первого приложения на Ember.js : https://www.toptal.com/javascript/a-step-by-step-guide-to-building-your-first-ember-js-app

[66] Упростите свое приложение на Ember с помощью Domain Components: https://mattfrankjames.com/blog/ember-domain-components/

[67] CI с GitHub Actions для приложений Ember: часть 2 : https://crunchingnumbers.live/2020/08/31/ci-with-github-actions-for-ember-apps-part-2/

[68] Svelte — Изучение основы этого быстрого фреймворка : https://dev.to/alexmercedcoder/svelte-learn-the-basics-of-this-fast-framework-with-small-bundles-13pk

[69] Svelte/Sapper vs Vue: https://dev.to/divporter/svelte-sapper-vs-vue-2dnk

[70] fg-modal — Простой и доступный веб-компонент для создания модальных окон от filament group : https://filamentgroup.github.io/fg-modal/demo/

[71] Brahmos — Расширенная JS библиотека для создания пользовательских интерфейсов с использованием современного API React и нативных шаблонов.: https://github.com/brahmosjs/brahmos

[72] Microsoft пообещала избавиться от Adobe Flash в своих браузерах до конца года: https://3dnews.ru/1019925

[73] Mozilla: истории браузера достаточно для надежной идентификации пользователя: https://xakep.ru/2020/09/03/browsing-history/

[74] Защита DNS — теперь и в Chrome для Android: https://my-chrome.ru/2020/09/zashhita-dns-teper-i-v-chrome-dlja-android/

[75] Chrome 86: улучшенное выделение фокуса, WebHID и многое другое : https://blog.chromium.org/2020/09/chrome-86-improved-focus-highlighting.html

[76] В чем ценность разнообразия браузеров? : https://daverupert.com/2020/09/the-value-of-browser-diversity/

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

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

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

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

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