FrontEndDev
28.6K subscribers
2.24K photos
22 videos
7.45K links
🚀 Статьи, новости, туториалы по frontend разработке.

https://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

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

Реклама: https://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
Релиз Nuxt 4.0

Новая структура app, переработанная поддержка TypeScript, более умные useAsyncData и useFetch.

https://blog.logrocket.com/nuxt-4-0-whats-new-what-to-expect/
👍13❤‍🔥3🔥21💩1
Smart Layouts. CSS Day - 06.06.2025

Концепция Smart Layouts, которую представил Ахмад Шаид на выступлении на CSS Day 2025 — адаптивные CSS-макеты, которые сами «принимают умные решения» благодаря современным возможностям: clamp(), :has(), container queries и другим.

https://ishadeed.com/article/smart-layouts-talk-css-day/
13👍3👎1👏1
Зовем на стажировку по Frontend-разработке

Т-Банк предлагает студентам и начинающим специалистам попробовать себя в роли frontend-разработчика. Стажеры будут решать реальные бизнес-задачи и получат шанс попасть в штат.

Что ждет на стажировке:

— Работа над пользовательской стороной сервисов и приложений.
— Плавное погружение в задачи, помощь ментора и команды.
— Удобный формат: от 20 до 40 часов в неделю, удаленно или в офисе.
— Возможность совмещать с учебой, сессией и экзаменами.
— Официальное оформление, оплата и рабочая техника.
— Доступ к базе знаний с курсами и вебинарами.

Узнайте больше и успейте пройти отбор до 26 августа
👍6👎2
WebSocket DevTools

Инструмент для Chrome DevTools, позволяющий в реальном времени отслеживать WebSocket-соединения: просматривать сообщения, перехватывать и блокировать их, а также симулировать ответы клиента и сервера.

https://github.com/law-chain-hot/websocket-devtools
12❤‍🔥4🔥1
20 частых антипаттернов в React и как их исправить

Ошибки, которые приводят к избыточным рендерам, мерцаниям интерфейса, нестабильным эффектам и расхождениям данных.

https://habr.com/ru/articles/937656/
❤‍🔥14👍3👎1🔥1🤔1
Оптимизация PWA под различные вариации Display Mode

Как в PWA можно учитывать разные режимы отображения — fullscreen, standalone, minimal-ui и browser — чтобы PWA выглядело как нативное приложение без потери удобства.
При использовании таких режимов разработчикам важно помнить, что пользователи теряют привычные возможности браузера — кнопки назад, обновления, копирования URL и т.п., поэтому нужно подстраивать интерфейс под контекст установки и отображения.

https://smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/
8👍31
This media is not supported in your browser
VIEW IN TELEGRAM
Текст с трехмерными слоями

Создание сложного эффекта объёмного текста, похожего на стопку вырезанных слоёв. Три части — от основ к добавлению интерактивности.

Часть 1
Часть 2
Часть 3
🔥53😱3
Что такое Generative Engine Optimization (GEO)?

Generative Engine Optimization (GEO) — новый подход, который помогает создавать контент, чтобы AI-движки (например, ChatGPT, Google AI-Overviews, Perplexity) ссылались на ваш сайт напрямую в своих ответах, а не просто выводили его среди ссылок в выдаче. В отличие от SEO, ориентированного на рейтинги и клики, GEO ставит задачу — стать частью ответа AI, и включает оптимизацию структуры, цитируемости, авторитетности контента и семантики.

https://www.sitepoint.com/generative-engine-optimization
8💩31👍1
JWTAuditor

Бесплатный онлайн-анализатор JWT, декодер и инструмент для тестирования безопасности.

https://jwtauditor.com/
👍111🔥1
Бросаем кости с CSS random()

Новая CSS-функция random() (доступна в Safari Technology Preview) — позволяет генерировать рандомные значения прямо в стилях: позицию, цвет, размеры, анимации и многое другое — без единой строки JavaScript

https://webkit.org/blog/17285/rolling-the-dice-with-css-random
👍10🔥42
Трюк с radio button для корзины товаров

Хороший пример, как управлять интерактивностью и UI-эффектами (плавные переходы и анимация добавления товара), не перегружая интерфейс лишним JavaScript-кодом.

https://css-tricks.com/a-radio-button-shopping-cart-trick/
8🔥3💯2