This media is not supported in your browser
VIEW IN TELEGRAM
Этот опенсорсный веб-компонент автоматически генерирует скелетон-заглушки с shimmer-эффектом на основе вашего реального UI с множеством настроек.
→ не нужно создавать отдельные skeleton-компоненты
→ генерирует лоадеры по фактической структуре DOM
→ настраиваемые shimmer-эффекты и стили
→ работает с React, Vue, Svelte и другими фреймворками
https://github.com/Aejkatappaja/phantom-ui
➡️ @FrontendPortal
→ не нужно создавать отдельные skeleton-компоненты
→ генерирует лоадеры по фактической структуре DOM
→ настраиваемые shimmer-эффекты и стили
→ работает с React, Vue, Svelte и другими фреймворками
https://github.com/Aejkatappaja/phantom-ui
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥42❤9👍3
Адаптивное изображение
Тег
Браузер анализирует каждый тег
Если тег
➡️ @FrontendPortal | #HTML
Тег
<picture> используется, когда для разных устройств или вариантов отображения нам нужны разные картинки<picture>
<source srcset="320.jpg" media="(max-width: 800px)">
<img src="640.jpg" alt="...">
</picture>
Браузер анализирует каждый тег
<source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги <source> не анализируются. Если тег
<picture> не поддерживается браузером или ни один из тегов <source> не подходит под условия, то отображается картинка из тега <img>Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤38👍9🔥3
Media is too big
VIEW IN TELEGRAM
Blossom — это опенсорс система каруселей с огромным количеством красивых паттернов и готовых примеров. Также в комплекте идут навыки для AI-агентов, а ещё есть поддержка React, Vue, Svelte и Web Components.
github.com/jespervos/blossom-carousel
➡️ @FrontendPortal
github.com/jespervos/blossom-carousel
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20👍13
Во ВКонтакте серьезно обновили frontend-архитектуру
Речь про переход ключевых разделов vk.com на SPA: ленты, профилей, сообществ, мессенджера и других сценариев, то есть про реальный highload frontend.
Что получили:
→ первая отрисовка страницы ускорилась на 25%
→ переходы между разделами — в 3.5 раза быстрее
→ интерфейс сразу показывает каркас страницы, а затем догружает контент
Из интересного по инженерке:
→ деплой фронтенда сократился до 20 секунд
→ 6–8 релизов в сутки
→ 100+ merge request ежедневно попадает в прод
Переход делали постепенно и без изменения привычного интерфейса.
https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu
➡️ @FrontendPortal
Речь про переход ключевых разделов vk.com на SPA: ленты, профилей, сообществ, мессенджера и других сценариев, то есть про реальный highload frontend.
Что получили:
→ первая отрисовка страницы ускорилась на 25%
→ переходы между разделами — в 3.5 раза быстрее
→ интерфейс сразу показывает каркас страницы, а затем догружает контент
Из интересного по инженерке:
→ деплой фронтенда сократился до 20 секунд
→ 6–8 релизов в сутки
→ 100+ merge request ежедневно попадает в прод
Переход делали постепенно и без изменения привычного интерфейса.
https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣56😁13👍11🥱6🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
А ты знал, что в VS Code можно мгновенно выделить всё содержимое между парными скобками? 🤯
Просто дважды кликни внутри пары
Мелкая фишка, но при редактировании кода она может неожиданно сэкономить кучу времени✌️
➡️ @FrontendPortal
Просто дважды кликни внутри пары
{} или (), и VS Code автоматически выделит весь код, который находится между ними.Мелкая фишка, но при редактировании кода она может неожиданно сэкономить кучу времени
Please open Telegram to view this post
VIEW IN TELEGRAM
❤51🔥22🤔3🥱3👨💻3🤣2😱1
This media is not supported in your browser
VIEW IN TELEGRAM
Релизнулся Chrome 149! Наконец-то появилась возможность стилизовать gaps в CSS Grid и Flexbox.
Внешний вид календаря теперь тоже можно легко реализовать с помощью CSS Grid
➡️ @FrontendPortal
Внешний вид календаря теперь тоже можно легко реализовать с помощью CSS Grid
Please open Telegram to view this post
VIEW IN TELEGRAM
👍62❤16🤣8🔥3😱2
Cloudflare купила компанию, стоящую за Vite!
Компанию создателя Vue — Эвана Ю.
Теперь Cloudflare также владеет проектами Vitest, Rolldown, Oxc... Ранее у них уже был Astro. Теперь ещё и Vite.
Это даёт Cloudflare контроль над всем стеком. У них теперь есть все примитивы: frontend/backend-фреймворк, линтинг, тестирование, форматирование, JS runtime, база данных, KV, инференс, blob storage, access и так далее.
Умный ход. Аккуратно упакованный набор, который можно скормить LLM, чтобы она собрала сайт✌️
➡️ @FrontendPortal
Компанию создателя Vue — Эвана Ю.
Теперь Cloudflare также владеет проектами Vitest, Rolldown, Oxc... Ранее у них уже был Astro. Теперь ещё и Vite.
Это даёт Cloudflare контроль над всем стеком. У них теперь есть все примитивы: frontend/backend-фреймворк, линтинг, тестирование, форматирование, JS runtime, база данных, KV, инференс, blob storage, access и так далее.
Умный ход. Аккуратно упакованный набор, который можно скормить LLM, чтобы она собрала сайт
Please open Telegram to view this post
VIEW IN TELEGRAM
❤31😱18🔥2👍1🤣1
Создать прикольную анимацию сайдбара на CSS не так уж сложно ☺️
Здесь мы делаем простую анимацию, чтобы скрывать и показывать сайдбар, одновременно сдвигая основной контент страницы вправо.
Если хочешь, можно сделать анимацию проще: убрать
Экспериментируй с разными значениями timing functions, длительностью и другими параметрами, чтобы добиться нужного эффекта
➡️ @FrontendPortal | #CSS
Здесь мы делаем простую анимацию, чтобы скрывать и показывать сайдбар, одновременно сдвигая основной контент страницы вправо.
Если хочешь, можно сделать анимацию проще: убрать
scale и оставить только translate.Экспериментируй с разными значениями timing functions, длительностью и другими параметрами, чтобы добиться нужного эффекта
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤28👍10🤣3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Метод для возврата элемента массива по указанному индексу
Он действует почти как скобочная запись
➡️ @FrontendPortal | #js
Он действует почти как скобочная запись
array[index], за исключением того, что индекс может быть отрицательнымPlease open Telegram to view this post
VIEW IN TELEGRAM
❤18👍5😱4🤯2🥱2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Принес небольшую коллекцию красивых переходов 😳
Внутри готовые анимации для карточек, меню, уведомлений, загрузок, переключателей и других элементов интерфейса. Всё можно сразу посмотреть, скопировать и украсть себе в проект.
https://transitions.dev/
➡️ @FrontendPortal
Внутри готовые анимации для карточек, меню, уведомлений, загрузок, переключателей и других элементов интерфейса. Всё можно сразу посмотреть, скопировать и украсть себе в проект.
https://transitions.dev/
Please open Telegram to view this post
VIEW IN TELEGRAM
❤26👍13🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Откопал мощный редактор с кучей красивых готовых mesh-градиентов, которые можно визуально кастомизировать и экспортировать как изображения или даже анимированные видео
https://colorflow.ls.graphics/
➡️ @FrontendPortal
https://colorflow.ls.graphics/
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25❤16
Бесплатное обучение по AI, Python, аналитике и IT-профессиям стало доступно россиянам 🇷🇺
Запущена госпрограмма, в рамках которой работающие граждане РФ (и те кто в поиске) теперь могут получить новую специальность или повысить квалификацию за счёт государства.
Если отбросить привычный скепсис, выглядит вполне рационально: рынок по-прежнему нуждается в квалифицированных IT-специалистах.
Доступные направления:
✅ Управление IT-проектами
✅ Тестирование и телеком
✅ Промпт-инжиниринг (ИИ)
✅ Анализ данных
✅ UX/UI-дизайн
✅ Python с ИИ
Обучение онлайн, без отрыва от работы. По итогам - документ о квалификации.
Отдельно предусмотрена возможность обучения сотрудников компаний без дополнительных затрат для работодателей и длительного выведения людей из рабочих процессов.
Редкий случай, когда вместо разговоров предлагается что-то вполне прикладное.
Подробности в официальном боте: @CodemiaTGbot
Запущена госпрограмма, в рамках которой работающие граждане РФ (и те кто в поиске) теперь могут получить новую специальность или повысить квалификацию за счёт государства.
Программа реализуется совместно с Ростелеком.
Если отбросить привычный скепсис, выглядит вполне рационально: рынок по-прежнему нуждается в квалифицированных IT-специалистах.
Доступные направления:
✅ Управление IT-проектами
✅ Тестирование и телеком
✅ Промпт-инжиниринг (ИИ)
✅ Анализ данных
✅ UX/UI-дизайн
✅ Python с ИИ
Обучение онлайн, без отрыва от работы. По итогам - документ о квалификации.
Отдельно предусмотрена возможность обучения сотрудников компаний без дополнительных затрат для работодателей и длительного выведения людей из рабочих процессов.
Редкий случай, когда вместо разговоров предлагается что-то вполне прикладное.
Подробности в официальном боте: @CodemiaTGbot
🤣4❤3👍1🔥1😁1
React Compiler на Rust почти готов
Команда React практически завершила перенос React Compiler с TypeScript на Rust. Новая версия уже используется внутри компании и показывает очень уверенные результаты:
• 99,9% паритета с текущей реализацией на TypeScript
• около 25% прироста производительности
• более глубокая интеграция с экосистемой Rust-инструментов, включая SWC и OXC
Отдельно интересно, что часть портирования проходов компилятора выполнялась с помощью вайб-кодинга
Сейчас команда занимается финальной полировкой, тестированием и сбором обратной связи. По словам разработчиков, уровень уверенности в новой реализации уже достаточно высок, и PR планируют смержить в ближайшие недели
Параллельно экосистема уже готовится к переходу на новую версию. Для React Compiler на Rust появились черновые интеграционные PR для:
• Oxc
• SWC
• Bun
➡️ @FrontendPortal
Команда React практически завершила перенос React Compiler с TypeScript на Rust. Новая версия уже используется внутри компании и показывает очень уверенные результаты:
• 99,9% паритета с текущей реализацией на TypeScript
• около 25% прироста производительности
• более глубокая интеграция с экосистемой Rust-инструментов, включая SWC и OXC
Отдельно интересно, что часть портирования проходов компилятора выполнялась с помощью вайб-кодинга
Сейчас команда занимается финальной полировкой, тестированием и сбором обратной связи. По словам разработчиков, уровень уверенности в новой реализации уже достаточно высок, и PR планируют смержить в ближайшие недели
Параллельно экосистема уже готовится к переходу на новую версию. Для React Compiler на Rust появились черновые интеграционные PR для:
• Oxc
• SWC
• Bun
Please open Telegram to view this post
VIEW IN TELEGRAM
❤36🌚8😁3👍2🔥1