TGViewer
Channel Public Channel
FrontEndDev

FrontEndDev

@front_end_dev

🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m
AI и вайбкод @vibe_and_ai

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

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Open in Telegram
Subscribers
25.8K
Photos
2.7K
Videos
25
Links
7.9K

Showing posts older than #9499 · Back to latest

Older Posts 20 shown
Post #9498 4.24K
Представлен Wasm 3.0 — новое поколение стандарта с масштабными обновлениями

Обновления 3 версии включает 64-битную адресную память, поддержку множественных областей памяти, встроенный сборщик мусора и расширенную систему типизированных ссылок. Новая версия также добавляет нативную обработку исключений и позволяет эффективно компилировать высокоуровневые языки.

https://webassembly.org/news/2025-09-17-wasm-3.0/
  • 🔥 11
  • 👍 6
  • ❤ 3
Post #9497 4.39K
FrontEndDev Друзья! 🚀 Frontend Conf 2025 — совсем скоро! Если вы думаете, что конференции — это скучные доклады, то Frontend Conf 2025 точно разрушит этот миф. В этом году я решил лично проверить это и зову вас с собой! Топ-10 самых ожидаемых выступлений уже определен…
Друзья!

До Frontend Conf 2025 осталось меньше месяца, а до повышения цен — всего пара дней 🫨 Для тех, кто еще не решил, будет ли конфа интересной/полезной, на Хабре вышел обзор Главные тренды фронтенда в 2025 году: AI, архитектура, PWA и многое другое, где можно почитать более подробно про каждую секцию.

👉 Подробнее о самой конференции по ссылке

Напоминаю, что для подписчиков FrontEndDev действует промокод на скидку 5% fc25_front_end_dev 🔥

Всем добра! ✌️
  • 👍 6
  • ❤ 3
Post #9496 4.21K
Удобнее чем Ctrl + F: ссылки прямо на контент

Добавляем ссылки на текст с помощью специального синтаксиса URL-адреса, который браузер интерпретирует для прокрутки и выделения указанного контента. Теперь вы можете создавать ссылки на фрагменты текста, а в Chromium-браузерах даже есть встроенная функция для этого.

https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html
  • 👍 7
  • ❤ 3
  • 🔥 3
Post #9495 4.31K
Новые возможности CSS типизированной арифметики

Начиная с Chrome 140 мы можем делать вычисления в CSS, смешивая различные типы данных. Звучит не так грандиозно, но это позволяет создавать сложные и данимаческие макеты и анимации без JS.

https://css-tricks.com/css-typed-arithmetic/
  • ❤ 4
  • 🔥 3
Post #9494 7.5K
Друзья, привет!

На связи проект Лиза Алерт —Добровольческий поисково-спасательный отряд, который занимается поиском людей.

Для реализации продукта, который поможет спасти жизни, нам очень нужны frontend разработчики (React+TypeScript) с опытом. Проект некоммерческий, нужны волонтеры.

Для связи писать @Shilkin_Dmitry
  • 🙏 17
  • ❤ 5
Post #9493 4.46K
Prompting — это акт разработки: как формировать и улучшать работу с AI

Линдон Серейо показывает, что промпты — это не просто инструкции для модели, а скорее гибрид творческого брифа и диалога с ИИ, где важно продумывать контекст и тон. Он предлагает подходить к prompting как к инструменту разработки: формировать структуру, делить на шаги, проверять и уточнять — чтобы получать более качественные и предсказуемые ответы от AI

https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/
  • ❤ 5
  • 🔥 5
  • 🤣 3
  • 👍 2
Post #9492 4.54K
Вам может пригодиться useSyncExternalStore

Разбираем распространённый паттерн — useEffect + useState + подписка, который может приводить к «миганию» интерфейса, особенно при серверном рендеринге. Посмотрим, как вместо этого использовать useSyncExternalStore, который обеспечивает синхронное чтение внешнего состояния и предотвращает лишние повторные рендеры и рассинхронизации.

https://swizec.com/blog/you-may-be-looking-for-a-useSyncExternalStore/
  • 👍 9
  • 🔥 3
  • 🤣 3
Post #9491 4.45K
Воссоздание анимации кнопки Google Gemini с помощью CSS

В статье подробно показано, как с нуля реализовать интерактивный эффект кнопки, используя функции CSS shape() и clip-path для создания морфирующих геометрических форм.

https://css-tricks.com/recreating-gmails-google-gemini-animation
  • ❤ 6
  • 🔥 3
Post #9490 4.94K
Представлен Chrome DevTools MCP для взаимодействия с браузером

Теперь AI-ассистенты могут видеть и взаимодействовать с браузером: они могут запускать код, инспектировать страницу, диагностировать ошибки и отлаживать веб-приложения. Подробнее в статье Эдди Османи.

https://addyosmani.com/blog/devtools-mcp/
  • ❤‍🔥 14
  • 🔥 3
Post #9489 5.21K
Амбиентные анимации в веб дизайне: принципы и реализация


Амбиентные анимации это тонкие, медленные детали, которые создают атмосферу, не перетягивая внимание на себя. Они делают дизайн живым и интересным.

https://smashingmagazine.com/2025/09/ambient-animations-web-design-principles-implementation/
  • 🔥 9
  • ❤‍🔥 3
  • 👍 3
  • ❤ 1
Post #9488 4.85K
Browserslist теперь напрямую поддерживает запросы Baseline, упрощая таргетирование возможностей браузеров

Эта интеграция позволяет разработчикам легко настраивать поддержку функций на основе их доступности. Отдельный пакет browserslist-config-baseline больше не нужен, что упрощает конфигурацию проекта.

https://web.dev/blog/browserslist-supports-baseline?hl=en
  • 🔥 8
  • ❤ 3
  • 👍 3
Post #9487 5.14K
Обновленный курс по изучению CSS от команды Chrome

Материал курса был переработан и дополнен девятью новыми модулями, чтобы отразить нововведения за последние четыре года. Теперь курс охватывает такие функции, как вложенность CSS, контейнерные запросы, пользовательские свойства и многое другое, фокусируясь на ключевых возможностях, доступных сегодня.

https://web.dev/blog/learn-css-refresh?hl=en
  • ❤ 9
  • 👍 3
Post #9486 4.77K
Создаём анимированные аккордеоны на основе Details

Как создавать продвинутые аккордеоны исключительно с помощью HTML и современного CSS. Применяем элемент <details> и новые CSS-свойства interpolate-size и transition-behavior для плавной анимации раскрытия контента.

https://www.builder.io/blog/animated-css-accordions?utm_campaign=Issue-609
  • 👍 10
  • ❤ 2
  • 👎 1
Post #9485 4.59K
Filter – веб редактор изображений

Filter – мощный веб-редактор, созданный на React и TypeScript. Он предлагает интуитивный интерфейс, оптимизирован для мобильных устройств и обеспечивает быструю обработку изображений прямо в браузере. Проект использует Vite, Tailwind CSS и Filerobot Image Editor.

https://github.com/addyosmani/filter
  • ❤ 11
  • ❤‍🔥 5
  • 😐 5
  • 🔥 2
  • 😁 1
Post #9483 4.96K
Упрощаем CSS с помощью псевдокласса :is()

Как псевдокласс :is() позволяет группировать сразу несколько селекторов внутри одного правила — вместо длинных списков через запятую — что делает CSS чище и проще поддерживаемым. Реальные примеры, где :is() помогает избавиться от дублирования правил и уменьшить вложенность селекторов, не теряя выразительности стилизации.

https://gomakethings.com/reducing-css-complexity-with-the-is-pseudo-class/
  • 🔥 14
  • ❤ 2
  • 🤡 2
Post #9482 4.58K
Стилизуем счётчики в CSS

Как использовать CSS Counters и @counter-style для автоматической нумерации элементов, оформления списков и нестандартных маркеров, без добавления лишнего HTML или JS.

https://css-tricks.com/styling-counters-in-css
  • 👍 9
  • 🔥 2
  • ⚡ 1
Post #9480 4.83K
View Transitions: что может пойти не так?

Сборник наиболее частых проблем, когда View Transition API не стартует, срабатывает некорректно или зависает — проблемы в имени перехода, отсутствие нужных CSS-правил, конфликты с фреймворками, кросс-доменной навигацией и т.п. Способы диагностики и устранения проблем.

https://vtbag.dev/tips/view-transition-fails-and-fixes/
  • 👍 5
  • ❤ 2
  • 🔥 1
  • 🤔 1
Post #9479 5.44K
MCP заменяет браузер: как разработчикам подготовиться к этому

Model Context Protocol (MCP) — новая парадигма, где AI-агенты вместо традиционного браузера будут напрямую вызывать API/инструменты MCP-сервера для выполнения задач, которые раньше мы бы делали кликами и навигацией.

Теперь разработчикам придется думать не о пикселях и UI-элементах, а о чётких эндпоинтах, API с понятной семантикой, UX, ориентированном на AI, и безопасности.

https://blog.logrocket.com/mcp-is-replacing-the-browser/
  • 🤣 11
  • 🔥 5
  • ❤ 4
  • 🤬 1
Post #9478 4.79K
Интеграция CSS Cascade Layers в существующий проект

Подробный взгляд на внедрение CSS Cascade Layers в существующую кодовую базу, показывающий, как можно рефакторить старый CSS, используя слои, не нарушая при этом работоспособности сайта.

В качестве примера рефакторинга взят сайт Discord-бота, где демонстрируется, как с помощью слоёв можно улучшить структуру и управляемость стилей.

https://www.smashingmagazine.com/2025/09/integrating-css-cascade-layers-existing-project/
  • 🔥 10
  • ❤ 2
  • 👍 2
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →