- PVSM.RU - https://www.pvsm.ru -

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

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

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

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

Медиа

• podcast UnderJS Podcast #27 — V8 опять 8. 3/4/5 и PHP 8 [5]
• podcast Подкаст «Фронтенд Юность» #157: Научись жить на 280к в месяц [6]
• podcast Подкаст CSSSR — Firefox 81, новый JSX Transform, критика Web Components, оптимизация CDN, V8 8.6, Hacktoberfest 2020 [7]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №435 (28 сентября — 4 октября 2020) - 5 Веб-разработка

• habr Зачем нужна выделенная Frontend Core команда и как мы внедряли дизайн систему [8]
• habr Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt? [9]
• habr Вы не знаете как должны работать модальные окна [10]
• habr Lazy-loading видео [11]
• en Как использовать отслеживание лица для взаимодействия с типографикой [12]
• en Сделайте ваше PWA больше похожим на приложение [13]
• en упс, я думаю, теперь мы (фронтендеры) теперь фулстек-разработчики [14]
• en Создание зеркальных эффектов с React-Three-Fiber и Three.js [15]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №435 (28 сентября — 4 октября 2020) - 17 CSS

• en Полное руководство по медиа-запросам в CSS [20]
• en Закрываем пробелы (в flexbox). Статья в блоге igalia об устранении проблем в спецификации flexbox [21]
• en Добиваемся вертикального выравнивания (спасибо, Subgrid!) [22]
• en Как автоматически настроить размер шрифта с помощью CSS font-size-adjust? [23]
• en Инспектор для CSS Grid в Хроме [24]
• en Как сделать полупрозрачный слой для фона с помощью CSS, не затрагивая текст [25]
• en Как использовать Tailwind CSS? [26]

JavaScript

• habr Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно [27]
• en Декларативный Shadow DOM. Новый способ реализации и использования Shadow DOM непосредственно в HTML. [28]
• en Анонс MobX 6 [29]
• en Компиляция нейронной сети на JavaScript в менее чем в 500kb кода [30]
• en Утечки памяти в открепленных окнах [31]

Дайджест за прошлую неделю [57].
Материал подготовили dersmoll [58] и alekskorovin [59].

Автор: alexzfort

Источник [60]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

[5] UnderJS Podcast #27 — V8 опять 8. 3/4/5 и PHP 8: https://underjs.ru/podcast/2020/10/01/trans-php-fill-php-fill.html

[6] Подкаст «Фронтенд Юность» #157: Научись жить на 280к в месяц: https://soundcloud.com/frontend_u/e157

[7] Подкаст CSSSR — Firefox 81, новый JSX Transform, критика Web Components, оптимизация CDN, V8 8.6, Hacktoberfest 2020: https://soundcloud.com/csssr/firefox-81-novyy-jsx-transform-kritika-web-components-optimizatsiya-cdn-v8-86-hacktoberfest-2020

[8] Зачем нужна выделенная Frontend Core команда и как мы внедряли дизайн систему: https://habr.com/ru/company/domclick/blog/520630/

[9] Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?: https://habr.com/ru/company/ruvds/blog/521820/

[10] Вы не знаете как должны работать модальные окна: https://habr.com/ru/post/521422/

[11] Lazy-loading видео: https://habr.com/ru/company/funcorp/blog/520594/

[12] Как использовать отслеживание лица для взаимодействия с типографикой : https://www.smashingmagazine.com/2020/10/face-motion-typography/

[13] Сделайте ваше PWA больше похожим на приложение : https://web.dev/app-like-pwas/

[14] упс, я думаю, теперь мы (фронтендеры) теперь фулстек-разработчики : https://css-tricks.com/ooooops-i-guess-were-full-stack-developers-now/

[15] Создание зеркальных эффектов с React-Three-Fiber и Three.js: https://tympanus.net/codrops/2020/09/30/creating-mirrors-in-react-three-fiber-and-three-js/

[16] Edge Dev Tools теперь доступны для Visual Studio Code: https://microsoftportal.net/microsoft/13136-edge-dev-tools-teper-dostupny-dlja-visual-studio-code.html

[17] ESLint — корректор вашего кода : https://medium.com/javascript-in-plain-english/eslint-a-proofreader-for-your-code-cd7e56ae391f

[18] Что нового в DevTools (Chrome 87) : https://developers.google.com/web/updates/2020/10/devtools

[19] Эмуляция недостатков зрения в DevTools : https://addyosmani.com/blog/emulate-vision-deficiencies-devtools/

[20] Полное руководство по медиа-запросам в CSS: https://css-tricks.com/a-complete-guide-to-css-media-queries/

[21] Закрываем пробелы (в flexbox). Статья в блоге igalia об устранении проблем в спецификации flexbox: https://blogs.igalia.com/svillar/2020/10/01/closing-the-gap-in-flexbox/

[22] Добиваемся вертикального выравнивания (спасибо, Subgrid!): https://css-tricks.com/achieving-vertical-alignment-thanks-subgrid/

[23] Как автоматически настроить размер шрифта с помощью CSS font-size-adjust?: https://www.lambdatest.com/blog/css-font-size-adjust/

[24] Инспектор для CSS Grid в Хроме: https://developers.google.com/web/tools/chrome-devtools/css/grid

[25] Как сделать полупрозрачный слой для фона с помощью CSS, не затрагивая текст : https://gomakethings.com/how-to-make-semitransparent-layers-backgrounds-without-affecting-the-text-using-css/

[26] Как использовать Tailwind CSS?: https://themesberg.com/knowledge-center/tailwind-css/how-to-use-tailwind-css

[27] Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно: https://habr.com/ru/company/tinkoff/blog/521262/

[28] Декларативный Shadow DOM. Новый способ реализации и использования Shadow DOM непосредственно в HTML.: https://web.dev/declarative-shadow-dom/

[29] Анонс MobX 6: https://michel.codes/blogs/mobx6

[30] Компиляция нейронной сети на JavaScript в менее чем в 500kb кода: https://nectarjs.com/compiling-a-javascript-neural-network-in-js-in-less-than-500kb/

[31] Утечки памяти в открепленных окнах: https://web.dev/detached-window-memory-leaks/

[32] Понимание спецификации ECMAScript, часть 2: https://habr.com/ru/post/521768/

[33] Варианты объектно-ориентированного программирования (на JavaScript): https://css-tricks.com/the-flavors-of-object-oriented-programming-in-javascript/

[34] Понимание TypeScript Generics : https://www.smashingmagazine.com/2020/10/understanding-typescript-generics/

[35] 8 распространенных ошибок JavaScript, которых следует избегать : https://medium.com/javascript-in-plain-english/8-common-javascript-mistakes-that-you-should-avoid-bbbfe1fb9539

[36] Иммутабельность в JavaScript: https://www.telerik.com/blogs/immutability-in-javascript

[37] Visx — коллекция графических примитивов для React-приложений, созданная в Airbnb: https://habr.com/ru/company/ruvds/blog/521068/

[38] Новый механизм JSX трансформации в React 17 Release Candidate: https://habr.com/ru/post/521930/

[39] Как использовать SVG иконки в React с React Icons и Font Awesome : https://www.freecodecamp.org/news/how-to-use-svg-icons-in-react-with-react-icons-and-font-awesome/

[40] C JQuery на React: как мы переписали редактор HelloSign : https://dropbox.tech/application/jquery-to-react--how-we-rewrote-the-hellosign-editor

[41] Использование Service Workers с create-react-app : https://blog.bitsrc.io/using-service-workers-with-react-27a4c5e2d1a9

[42] Мифы о useEffect: https://epicreact.dev/myths-about-useeffect/

[43] react-chrono — Современный компонент временной шкалы для react : https://github.com/prabhuignoto/react-chrono

[44] Vue 3.0 — первый взгляд: https://habr.com/ru/post/521250/

[45] Интервью с автором Vue.js: «Важно понимать, что хотят пользователи»: https://evrone.ru/evan-you-interview

[46] Изучаем реактивность во Vue.js. Простое объяснение: https://webdevblog.ru/izuchaem-reaktivnost-vo-vue-js-prostoe-obyasnenie/

[47] Следует ли использовать Composition API в качестве замены Vuex?: https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/

[48] Когда я осознал магию Angular Pipes: https://medium.com/weekly-webtips/when-i-realized-the-magic-of-angular-pipes-6ae01a75c44b

[49] Состояние RxJS. RxJS 7 и выше : https://indepth.dev/the-state-of-rxjs-rxjs-7-and-beyond/

[50] Ускорьте разработку Angular schematics с помощью полезных вспомогательных функций: https://indepth.dev/speed-up-your-angular-schematics-development-with-useful-helper-functions/

[51] Что нового в Svelte: октябрь 2020 г. : https://svelte.dev/blog/whats-new-in-svelte-october-2020

[52] Почему Svelte революционен : https://dev.to/hanna/why-svelte-is-revolutionary-415e

[53] Svelte теперь имеет доступную библиотеку для перетаскивания: https://dev.to/isaachagoel/svelte-now-has-an-accessible-drag-and-drop-library-15p

[54] Shoelace 2.0: Передовая библиотека веб-компонентов: https://davidwalsh.name/shoelace-css-2

[55] smolpxl — Пишите пиксельные ретро-игры на JavaScript.: https://gitlab.com/andybalaam/smolpxl

[56] Smart Search — Эффективный способ загрузки больших объемов данных во фронтенд приложения и интуитивно понятная работа с ними: https://github.com/chalu/smart-search

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

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

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

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