Дайджест свежих материалов из мира фронтенда за последнюю неделю №488 (4 — 10 октября 2021)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №488 (4 — 10 октября 2021) - 1

Медиа ^[1] | Веб-разработка ^[2] | CSS ^[3] | JavaScript ^[4] | Браузеры ^[5]

Материал подготовили dersmoll ^[68] и alekskorovin ^[69].

Автор:
alexzfort

Источник ^[70]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «Фронтенд Юность» #207: Что делать если ты React-крыса: https://soundcloud.com/frontend_u/e207

[7] Подкаст «Фронтенд Юность» #208: Дикий лес крымского фронтенда: https://soundcloud.com/frontend_u/e208

[8] OdessaJS 2021, записи докладов: https://www.youtube.com/playlist?list=PLUF1zRLAgrPH6srMl9AyhFVf6w8_RgGKm

[9] Jamstack Conf 2021: три десятка видео с конференции: https://www.youtube.com/playlist?list=PL58Wk5g77lF-XaNacKxWk7yOKgeCMveAS

[10] Frontend Security: о чем вы хотели бы забыть, но не сможете: https://habr.com/ru/company/oleg-bunin/blog/570040/

[11] Как правильно верстать 2, или зачем я написал еще одну UI-библиотеку, мой первый npm-модуль?: https://habr.com/ru/post/582638/

[12] Микрофронтенды: наш путь к более быстрому и гибкому сайту: https://habr.com/ru/company/leroy_merlin/blog/581938/

[13] Варианты отображения пароля в input type=«password»: https://css-tricks.com/the-options-for-password-revealing-inputs/

[14] Рекомендации по использованию Markdown для статических сайтов: https://css-tricks.com/considerations-for-using-markdown-writing-apps-on-static-sites/

[15] Безопасное манипулирование DOM с помощью Sanitizer API: https://web.dev/sanitizer/

[16] Как я создаю современные сайты в 2021 году: https://kentcdodds.com/blog/how-i-built-a-modern-website-in-2021

[17] Методы анимации для добавления и удаления элементов из стека: https://css-tricks.com/animation-techniques-for-adding-and-removing-items-from-a-stack/

[18] Создание 3D-персонажей в Three.js: https://tympanus.net/codrops/2021/10/04/creating-3d-characters-in-three-js/

[19] Разбираем искажение homunculus.jp с помощью Three.js: https://tympanus.net/codrops/2021/10/04/deconstructing-the-homunculus-jp-distortion-with-three-js/

[20] Подборка креативных сайтов «Inspirational Websites Roundup» #30: https://tympanus.net/codrops/2021/10/05/inspirational-websites-roundup-30/

[21] FlipBoxes — трехмерные чекбосы на CSS: https://codepen.io/amit_sheen/pen/YzQoMxR

[22] Atropos — легкая бесплатная JS-библиотека для создания потрясающих трехмерных эффектов наведения с параллаксом.: https://atroposjs.com/

[23] Руководство по отладке CSS : https://www.smashingmagazine.com/2021/10/guide-debugging-css/

[24] Border Radius, работающий по условию в CSS: https://ishadeed.com/article/conditional-border-radius/

[25] CSS в TypeScript с vanilla-extract: https://css-tricks.com/css-in-typescript-with-vanilla-extract/

[26] Тень для контейнера со скроллом с помощью JavaScript: https://css-tricks.com/scroll-shadows-with-javascript/

[27] Скелетная анимация загрузки компонента с использованием HTML и CSS: https://dev.to/shantanu_jana/skeleton-screen-loading-animation-using-html-css-1ec3

[28] Руководство по единицам в CSS, все что вам нужно знать: https://webinuse.com/css-units-guide-everything-you-need-to-know/

[29] Распространённые ошибки при использовании npm, которых лучше не совершать: https://habr.com/ru/company/ruvds/blog/580278/

[30] Худшие практики в Javascript: https://webdevblog.ru/hudshie-praktiki-v-javascript/

[31] Написание чистых тестов в JavaScript с использованием принципов BASIC: https://yonigoldberg.medium.com/fighting-javascript-tests-complexity-with-the-basic-principles-87b7622eac9a

[32] 27 основных однострочных JavaScript функций, используемых разработчиками ежедневно: https://javascript.plainenglish.io/27-essential-one-line-javascript-functions-used-by-developers-daily-2cda9826700e

[33] Насколько актуален TypeScript в 2021 году?: https://blog.openreplay.com/how-relevant-is-still-typescript-in-2021

[34] Замена jQuery на Vanilla ES6: https://aarontgrogg.com/blog/2021/09/29/replacing-jquery-with-vanilla-es6/

[35] Выполнение HTTP-запросов: Fetch Vs Axios: https://blog.bitsrc.io/performing-http-requests-fetch-vs-axios-b62b44fed10d

[36] Еще один вопрос для интервью: пересечение двух массивов: https://yonatankra.com/yet-another-interview-question-deep-dive-intersection-of-two-arrays/

[37] Неизменяемость объектов в JavaScript: https://blog.bitsrc.io/javascript-object-immutability-1794b49c5255

[38] Что такое функции высшего порядка в JavaScript?: https://dmitripavlutin.com/javascript-higher-order-functions/

[39] Проникновение и безопасность в JavaScript: https://dev.to/didof/penetration-and-security-in-javascript-probing-double-getter-p47

[40] Бандлинг всего того, что не относится к обычному JavaScript-коду: https://habr.com/ru/company/ruvds/blog/580280/

[41] Полное руководство по началу работы с JavaScript-сборщиком Rollup.js: https://blog.openreplay.com/the-ultimate-guide-to-getting-started-with-the-rollup-js-javascript-bundler

[42] 5 способов уменьшить размер бандла в JavaScript: https://blog.bitsrc.io/5-methods-to-reduce-javascript-bundle-size-67f2e1220457

[43] 6 инструментов и техник для анализа размера бандла в Webpack: https://blog.bitsrc.io/6-tools-and-techniques-to-analyze-webpack-bundle-size-817337f8cf91

[44] Разбивка на страницы в Javascript и React с помощью кастомного хука usePagination(): https://dev.to/damiisdandy/pagination-in-javascript-and-react-with-a-custom-usepagination-hook-1mgo

[45] Понимание React Router с помощью разработки простого блога: https://blog.openreplay.com/understanding-react-router-with-a-simple-blog-application

[46] Полное руководство по Prop-Types в React: https://javascript.plainenglish.io/the-complete-guide-to-prop-types-in-react-9baa22e80ce4

[47] React Oxide — простой редактор кода, который вы можете добавить в свои ReactJS проекты: https://github.com/bootrino/reactoxide

[48] Архитектура React проекта : https://itnext.io/react-project-architecture-641da390ebe7

[49] Создание веб-компонентов с помощью Vue 3.2: https://habr.com/ru/post/581954/

[50] Комплексная CSS-анимация во Vue с AnimXYZ: https://www.smashingmagazine.com/2021/10/composable-css-animation-vue-animxyz/

[51] Как мы обновили код Vue 2, добавив немного вкуса TypeScript: https://medium.com/js-dojo/how-we-refreshed-our-vue-2-javascript-codebase-with-some-typescript-flavour-c0f57fc46010

[52] OnPush — ваш новый Default: https://habr.com/ru/company/tinkoff/blog/581378/

[53] Как мутировать код в Angular-схематиках и не поседеть: https://habr.com/ru/company/tinkoff/blog/582120/

[54] Angular: лучшие видео сентября 2021 года: https://blog.meetupfeed.io/angular-september-2021/

[55] The Ember Times — Issue No. 190: https://blog.emberjs.com/the-ember-times-issue-190/

[56] Ember + WebStorm Editor Config: https://nullvoxpopuli.com/2021-10-02-ember-webstorm-editor-config/

[57] Accessibility is Reach: как выглядит будущее доступности в Ember? : https://noti.st/melsumner/FfqsyB/accessibility-is-reach

[58] PodRocket podcast: Svelte с Rich Harris: https://podrocket.logrocket.com/rich-harris

[59] Попробуем Svelte в первый раз: https://dev.to/ps173/trying-out-svelte-for-first-time-223f

[60] VanillaTreeViewer — минималистичный файловый браузер для компактного отображения нескольких файлов одновременно.: https://abhchand.me/vanilla-tree-viewer/

[61] construct-js: библиотека для создания структур данных на байтовом уровне: https://github.com/francisrstokes/construct-js

[62] emoji-regex: регулярное выражение, которое соответствует всем символам, содержащим только эмодзи, в соответствии со стандартом Unicode: https://github.com/mathiasbynens/emoji-regex

[63] Релиз Firefox 93: https://www.opennet.ru/opennews/art.shtml?num=55923

[64] Результаты оптимизации Chromium, реализованные проектом RenderingNG: https://www.opennet.ru/opennews/art.shtml?num=55937

[65] Реализация заполнения форм и специальных возможностей в Firefox PDF viewer: https://hacks.mozilla.org/2021/10/implementing-form-filling-and-accessibility-in-the-firefox-pdf-viewer/

[66] Что, если Chrome сломает функции веба, а Google забудет кому-нибудь сообщить об этом? Ой, подождите, это именно то, что произошло: https://www.theregister.com/2021/10/04/chrome_breaks_web/

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

[68] dersmoll: https://habr.com/ru/users/dersmoll/

[69] alekskorovin: https://habr.com/ru/users/alekskorovin/

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

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