FrontEndDev
28.2K subscribers
2.34K photos
23 videos
7.54K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Читать на парковке: https://max.ru/front_end_dev

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
Накладываем маски на изображения с помощью CSS

О том, как использовать свойство mask-image для комбинации изображений и svg.

https://blog.logrocket.com/css-mask-image-property/
👍243❤‍🔥21
Погружаемся в метапрограммирование

Прокси и рефлексия в JS.

https://blog.openreplay.com/exploring-metaprogramming-proxying-and-reflection-in-javascript/
👍14🌚3😐32
Работа с изображениями в формате Webp

Основные отличия webp от других форматов, и как их использовать в разработке.

https://blog.openreplay.com/working-with-webp-images/
👍15👎3
JavaScript Risings Stars

Обзор наиболее популярных проектов в экосистеме JS за 2022.

https://risingstars.js.org/2022/en
👍21🐳4👨‍💻21
Создаем веб компоненты на JS с WebC

WebC генерирует разметку для веб компонентов и имеет набор утилит, которые упрощают разработку.

https://blog.logrocket.com/building-web-components-with-webc-vanilla-javascript/
👍11🕊1🐳1
Разрабатываем опенсорс библиотеку

Инструкция для начинающих.

https://habr.com/ru/company/inDrive/blog/706662/
👌15👎2👍1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Создаем гладкие анимационные переходы для CSS Grid

https://blog.logrocket.com/creating-smoother-css-transitions-animate-css-grid/
👍14👎4
Стриминг SSR с React 18

Использование renderToPipeableStream для отдачи контента React приложения

https://blog.logrocket.com/streaming-ssr-with-react-18/
🤔18👍8
Объясняем аутентификацию в Web, проводя аналогию с банками

2 популярных паттерна:
▫️JWT
▫️Session

https://www.smashingmagazine.com/2023/01/authentication-websites-banking-analogy/
🔥12👍3
Создаем проект на Vite с React и Typescript

Об альтернативе Create React App — как быстро создать проект при помощи билд-системы Nx.

https://blog.nrwl.io/react-vite-and-typescript-get-started-in-under-2-minutes-3bd5cd836175
🔥17👍4
Биндинг данных в React

О том, как работать с разными элементами ввода, и каких ошибок стоит избегать

https://www.joshwcomeau.com/react/data-binding/
👍17🥴32
Используем деструктивное присваивание пропсов во Vue Composition API

Дмитрий Павлутин рассказывает, как сохранить удобство разработки и не потерять реактивность объектов.

https://dmitripavlutin.com/props-destructure-vue-composition/
👏12🤨7🔥2❤‍🔥1👍1
Настраиваем Prettier и ESLint

Инструкция, как сделать форматирование кода в соответствии с правилами линтера.

https://khalilstemmler.com/blogs/tooling/prettier/
👍18😐7🍾2🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект пишущей машинки на чистом CSS

https://blog.logrocket.com/creating-typewriter-animation-css/
👍22👎12😁3🔥2
CSS совет: стилизуйте checkbox и radio для печати

О том, как стилизовать ui для лучшей читабельности или экономии чернил, применяя print-color-adjust. Мелочь, а для пользователя приятно.

https://alvaromontoro.com/blog/68024/css-tip-style-checkboxes-radio-buttons-for-printing
👍17
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация текста по скролу

Демо

Реализация
👍38🤡5💩2🌭2
JS Promises: Сборщик мусора и утечки памяти

Как работает сборщик мусора при использовании Promise: примеры с объяснением.

https://dev.to/xnimorz/js-promises-3-garbage-collection-and-memory-leaks-2oi7
👍19
Socket.Io Vs. Pusher

Сравниваем инструменты для real-time коммуникации

https://blog.openreplay.com/socket-io-vs-pusher--a-comparison/
👍14👎2
Разбираемся с Redux Thunk

Как добавить Redux Thunk в React приложение и как это работает под капотом.

https://blog.openreplay.com/understanding-redux-thunk-for-react--the-big-picture/
💩40👍8😁31🤔1
Осваиваем TypeScript

21 лучшая практика при написании кода

https://habr.com/ru/company/ruvds/blog/712548/
🔥12😐5👍4💩3🌭1