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

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
Git для профессионалов

Туториал по хорошим практикам коммитов, видам и выбору branch стратегии, а также способам разрешения мерж конфликтов и использованию merge/rebase.

https://www.youtube.com/watch?v=Uszj_k0DGsg
👍12
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект с svg фильтрами

Необычный эффект появления изображений при скролле.

Демо | Github

https://tympanus.net/codrops/2023/07/05/on-scroll-svg-filter-effect/
🔥232👍21
ESLint Plugin Perfectionist

Плагин для ESLint, содержащий правила для сортировки данных в вашем коде. Объекты, импорты, TS типы, JSX пропсы и всё остальное.

https://github.com/azat-io/eslint-plugin-perfectionist
👍28🔥73💩3
NodeJS аутентификация: JWT vs Tokens

Способы аутентифицикации пользователей на стороне сервера - в каких случаях что использовать?

https://blog.logrocket.com/node-js-server-side-authentication-tokens-vs-jwt/
👍13🥱41🍾1
Введение в нативное CSS наследование

https://www.sitepoint.com/an-introduction-to-native-css-nesting/
👍121
XSS уязвимость в Telegram

Как в web версии Telegram можно выполнить XSS атаку на пользователя.

https://habr.com/ru/articles/744316/
🔥15😐6
Используем background-size и background-position для позиционирования фона

Небольшой туториал по настройке расположения фонового изображения.

https://www.sitepoint.com/how-to-use-css-background-size-and-background-position
12👍4
Полный курс Redux Toolkit + RTK Query для начинающих

https://www.youtube.com/watch?v=gPmYTqGPDWA&ab_channel=REDGroup
💩36👍92👎2
Создаем простую форму регистрации с обработкой данных на NodeJS

Используем Express в связке с MongoDB для работы с данными + валидируем данные и раздаем статику.

https://www.sitepoint.com/build-simple-beginner-app-node-bootstrap-mongodb/
👍20
Птички на CSS

Двухчасовой стрим от Вадима Макеева для самых выносливых CSS-гиков по созданию птицы на чистом CSS.

https://www.youtube.com/watch?v=ZhWdhMpJ8bs
🤯18🤡632👀2😭1
Трюки с DevTools

Очередня порция свежих советов по работе с DevTools.

https://www.smashingmagazine.com/2023/06/popular-devtools-tips/
🔥11👍21
Выносим запрос данных из useEffect в React

Иcпользуем React Query для запросов с возможностью кеширования.

https://www.youtube.com/watch?v=Kjkx2BASAZA
👏10🤣5🥴4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Анимации переходов для текстовых блоков

Несколько способов оживить текст

Демо | Github

https://tympanus.net/codrops/2023/07/13/inspiration-for-text-block-transitions/
15
Пишем CSS в 2023

Если вы особо не следили за тем, какие изменения произошли в CSS за последние пару лет, то статья для вас.
Container Queries, Layers, новые псевдо-селекторы и многое другое.

https://www.smashingmagazine.com/2023/07/writing-css-2023/
15👍5
Создаем клон LinkedIn на React

10 часовой туториал создания клона LinkedIn с нуля на React + Firebase: от настройки проекта и авторизации до имплементации основных фич приложения.

https://www.youtube.com/watch?v=HimR8Xtz17U
👍193
Web Audio и Web MIDI API

Изучаем Web Audio и создаем свой синтезатор на JS

https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
👍103
Операторы JS

Разбираем функционал операторов: от привычных арифметических до битовых и малоизвестных (например оператора пайплайна).

https://www.sitepoint.com/javascript-operators/
👍11🍾1
Определяем, когда элемент попадает или покидает viewport

Или как использовать IntersectionObserver вместо события scroll.

https://gomakethings.com/how-to-detect-when-an-element-enters-or-leaves-the-viewport-with-vanilla-javascript/
👍18