Cloudflare анонсировала духовного наследника WordPress!
Новая CMS, построенная на Astro и TypeScript.
✓ Безопасна по умолчанию. Плагины изолированы в sandbox
✓ Есть CLI, MCP и изначально рассчитана на работу с AI-агентами
✓ Простое развертывание в Cloudflare или Node.js
https://blog.cloudflare.com/emdash-wordpress
➡️ @FrontendPortal
Новая CMS, построенная на Astro и TypeScript.
✓ Безопасна по умолчанию. Плагины изолированы в sandbox
✓ Есть CLI, MCP и изначально рассчитана на работу с AI-агентами
✓ Простое развертывание в Cloudflare или Node.js
$ npm create emdash
https://blog.cloudflare.com/emdash-wordpress
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥35👍9❤5😁2
Не забывай вовремя отменять fetch-запросы
Если этого не делать, вызовы будут висеть в состоянии pending бесконечно (или пока их не завершит что-то извне), и твой UI, скорее всего, зависнет.
Для более простого решения используйте👍
➡️ @FrontendPortal
Если этого не делать, вызовы будут висеть в состоянии pending бесконечно (или пока их не завершит что-то извне), и твой UI, скорее всего, зависнет.
Для более простого решения используйте
AbortSignal.timeout Please open Telegram to view this post
VIEW IN TELEGRAM
👍30❤15🥱4
Добавь это в основной CSS-файл; приложение от этого точно не сломается, обещаю!
Твои юзеры скажут тебе спасибо!
➡️ @FrontendPortal
Твои юзеры скажут тебе спасибо!
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔37❤12👍7🤯1
Please open Telegram to view this post
VIEW IN TELEGRAM
😁78🤣29🤯9❤8🔥3👍2
Ограничиваем текст заданным числом строк c помощью CSS-свойства
Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие. Cвойство работает только в комбинации вспомогательных свойств:
Поддержка свойства составляет 97.21%
➡️ @FrontendPortal | #CSS
line-clampЕсли текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие. Cвойство работает только в комбинации вспомогательных свойств:
.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow: hidden;
}Поддержка свойства составляет 97.21%
Please open Telegram to view this post
VIEW IN TELEGRAM
❤28👍15
This media is not supported in your browser
VIEW IN TELEGRAM
В Google Chrome 148 позиционирование sticky теперь работает независимо по осям
Это значит, что можно делать sticky-элементы, которые отслеживают разные скролл-контейнеры по разным осям.
Подробнее в статье:
https://www.bram.us/2026/03/30/css-sticky-per-axis/
➡️ @FrontendPortal
Это значит, что можно делать sticky-элементы, которые отслеживают разные скролл-контейнеры по разным осям.
Подробнее в статье:
https://www.bram.us/2026/03/30/css-sticky-per-axis/
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥71👍10❤9
Школа разработки интерфейсов Яндекса: прокачай hard-скиллы за лето
Если уже знаешь JavaScript, TypeScript, React и Git, имеешь небольшой опыт разработки интерфейсов и работал в команде — тебе в Школу!
За одно лето научишься делать надёжные, удобные и быстрые интерфейсы: прокачаем асинхронность, TypeScript, React и Node.js, а еще разберем типизацию, производительность, инфраструктуру, автотесты и AI-инструменты для разработки.
Слушай лекции и работай над бизнес‑задачами с фулстек‑командой разработки в атмосфере летнего кэмпа.
Выпускников ждет упрощенный набор в стажировку. Подать заявку можно здесь.
Если уже знаешь JavaScript, TypeScript, React и Git, имеешь небольшой опыт разработки интерфейсов и работал в команде — тебе в Школу!
За одно лето научишься делать надёжные, удобные и быстрые интерфейсы: прокачаем асинхронность, TypeScript, React и Node.js, а еще разберем типизацию, производительность, инфраструктуру, автотесты и AI-инструменты для разработки.
Слушай лекции и работай над бизнес‑задачами с фулстек‑командой разработки в атмосфере летнего кэмпа.
Выпускников ждет упрощенный набор в стажировку. Подать заявку можно здесь.
🥱9❤5🕊4
This media is not supported in your browser
VIEW IN TELEGRAM
Управляй портами localhost как ПРО
Port-Whisperer — это удобный CLI-инструмент, который показывает, что запущено на твоих портах, и помогает управлять лишними процессами.
→ вывести список всех активных портов
→ посмотреть, какое приложение использует каждый порт
→ завершать процессы на неиспользуемых портах
→ мониторить порты в реальном времени
Больше никакого гадания, что там крутится в фоне🙂
➡️ @FrontendPortal
Port-Whisperer — это удобный CLI-инструмент, который показывает, что запущено на твоих портах, и помогает управлять лишними процессами.
→ вывести список всех активных портов
→ посмотреть, какое приложение использует каждый порт
→ завершать процессы на неиспользуемых портах
→ мониторить порты в реальном времени
Больше никакого гадания, что там крутится в фоне
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20❤6🕊6🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
CSS View Transitions + Anchor Positioning теперь позволяют легко реализовать плавную навигацию в стиле SPA даже на старом добром статическом сайте!
Демка вживую: https://mpa-view-transition.vercel.app
➡️ @FrontendPortal
Демка вживую: https://mpa-view-transition.vercel.app
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤11
This media is not supported in your browser
VIEW IN TELEGRAM
Перестань вручную делать skeleton-лоадеры
Boneyard — это новый фреймворк, который автоматически генерирует skeleton-экраны прямо из существующих UI-компонентов, так что тебе не нужно проектировать их самому.
→ без ручного дизайна
→ соответствует реальному лейауту
→ работает с React, Svelte, React Native
→ мгновенно генерирует лоадеры
По сути, он автоматически превращает твой реальный UI в состояния загрузки✌️
GitHub: https://github.com/0xGF/boneyard
➡️ @FrontendPortal
Boneyard — это новый фреймворк, который автоматически генерирует skeleton-экраны прямо из существующих UI-компонентов, так что тебе не нужно проектировать их самому.
→ без ручного дизайна
→ соответствует реальному лейауту
→ работает с React, Svelte, React Native
→ мгновенно генерирует лоадеры
По сути, он автоматически превращает твой реальный UI в состояния загрузки
GitHub: https://github.com/0xGF/boneyard
Please open Telegram to view this post
VIEW IN TELEGRAM
❤39👍17🔥6🥱4
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Subgrid теперь входит в Baseline и широко поддерживается всеми основными движками → https://goo.gle/4lOlLRL
Он позволяет вложенным элементам наследовать и выравниваться по трекам сетки родителя, обеспечивая идеальное выравнивание в сложных макетах без ручных костылей с размерами
➡️ @FrontendPortal
Он позволяет вложенным элементам наследовать и выравниваться по трекам сетки родителя, обеспечивая идеальное выравнивание в сложных макетах без ручных костылей с размерами
Please open Telegram to view this post
VIEW IN TELEGRAM
❤33🔥13👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Вот как выглядит максимум возможностей Three.js 🐐
Apex — это браузерная гоночная игра, которая показывает, насколько далеко шагнули веб-технологии.
https://apex-psi-indol.vercel.app/
➡️ @FrontendPortal
Apex — это браузерная гоночная игра, которая показывает, насколько далеко шагнули веб-технологии.
https://apex-psi-indol.vercel.app/
Please open Telegram to view this post
VIEW IN TELEGRAM
👍45🔥17🤣14❤8
А ты знал про заголовок Clear-Site-Data? 👀
Один HTTP-заголовок, который позволяет очистить cookies, хранилище или кэш для твоего сайта. Идеально подходит для реализации logout-флоу
Подробнее:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data
➡️ @FrontendPortal
Один HTTP-заголовок, который позволяет очистить cookies, хранилище или кэш для твоего сайта. Идеально подходит для реализации logout-флоу
Подробнее:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32❤10🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Принес крутейший сайт для прокачки алгоритмов — визуальный тренажёр с пошаговым выполнением кода
70+ алгоритмов на JavaScript, Java и C++, всё интерактивно и с наглядной визуализацией
https://algorithm-visualizer.org/
➡️ @FrontendPortal | #resourse
70+ алгоритмов на JavaScript, Java и C++, всё интерактивно и с наглядной визуализацией
https://algorithm-visualizer.org/
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22👍7🔥7
Небольшое улучшение AsyncLocalStorage, появившееся в Node 25.9
Вместо вызова
теперь можно просто использовать синтаксис
➡️ @FrontendPortal
Вместо вызова
storage.run(data, () => { ... }) и вложенности кодатеперь можно просто использовать синтаксис
using и избежать этой вложенностиPlease open Telegram to view this post
VIEW IN TELEGRAM
❤13👍4
Ищут новичков во фронтенд-разработке и вёрстке сайтов.
Роман Чернов, Fullstack-разработчик с 12-летним стажем, покажет, как с помощью нейросетей зарабатывать 100–200 тыс. рублей на вёрстке сайтов и приложений – фронтентд-разработке.
За 7 дней с Романом ты:
- Сгенерируешь сайт через Giga, DeepSeek, ChatGPT;
- Сверстаешь страницу на HTML + CSS;
- Оживишь её логикой на JavaScript;
- Превратишь сайт во фронтенд-приложение;
- Подключишь backend и выложишь проект на хостинг.
Если можешь открыть браузер — справишься.
В итоге своими руками разработаешь реальный сайт, который не стыдно добавить в портфолио или продать.
Участие бесплатное, с поддержкой кураторов на каждом этапе. Стартуем завтра.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
Роман Чернов, Fullstack-разработчик с 12-летним стажем, покажет, как с помощью нейросетей зарабатывать 100–200 тыс. рублей на вёрстке сайтов и приложений – фронтентд-разработке.
За 7 дней с Романом ты:
- Сгенерируешь сайт через Giga, DeepSeek, ChatGPT;
- Сверстаешь страницу на HTML + CSS;
- Оживишь её логикой на JavaScript;
- Превратишь сайт во фронтенд-приложение;
- Подключишь backend и выложишь проект на хостинг.
Если можешь открыть браузер — справишься.
В итоге своими руками разработаешь реальный сайт, который не стыдно добавить в портфолио или продать.
Участие бесплатное, с поддержкой кураторов на каждом этапе. Стартуем завтра.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
🤣32😁6❤5🥱3😱1
This media is not supported in your browser
VIEW IN TELEGRAM
Держите небольшой классный трюк в CSS. Добавление анимированного подчеркивания при наведении на текст 😄
Здесь на самом деле это не подчеркивание, а фоновое изображение, которое представляет собой линейный градиент сверху вниз. Первые 90% фона просто прозрачные, а нижние 10% - желаемый цвет
Изначально ширина фона равна 0% и увеличивается до 100% при наведении
Мы также меняем положение фона, чтобы при наведении подчеркивание увеличивалось слева, а при снятии наведения выходило справа
➡️ @FrontendPortal | #CSS
Здесь на самом деле это не подчеркивание, а фоновое изображение, которое представляет собой линейный градиент сверху вниз. Первые 90% фона просто прозрачные, а нижние 10% - желаемый цвет
Изначально ширина фона равна 0% и увеличивается до 100% при наведении
Мы также меняем положение фона, чтобы при наведении подчеркивание увеличивалось слева, а при снятии наведения выходило справа
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19❤17🔥5🤣1
This media is not supported in your browser
VIEW IN TELEGRAM
Хотите добавить своему агенту проверки качества?
MCP для DevTools в Chrome теперь включает:
- Проверки производительности через Lighthouse
- Skill для обнаружения утечек памяти
- Skill для отладки доступности
- Skill для оптимизации LCP
и экспериментальный новый CLI👀
Посмотрите репозиторий DevTools MCP, чтобы установить его или узнать больше:
https://github.com/ChromeDevTools/chrome-devtools-mcp
➡️ @FrontendPortal
MCP для DevTools в Chrome теперь включает:
- Проверки производительности через Lighthouse
- Skill для обнаружения утечек памяти
- Skill для отладки доступности
- Skill для оптимизации LCP
и экспериментальный новый CLI
Посмотрите репозиторий DevTools MCP, чтобы установить его или узнать больше:
https://github.com/ChromeDevTools/chrome-devtools-mcp
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤8