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
❤40👍18🔥7🥱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
❤36🔥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
👍49🔥19🤣16❤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
👍34❤11🔥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
❤24👍8🔥8
Небольшое улучшение AsyncLocalStorage, появившееся в Node 25.9
Вместо вызова
теперь можно просто использовать синтаксис
➡️ @FrontendPortal
Вместо вызова
storage.run(data, () => { ... }) и вложенности кодатеперь можно просто использовать синтаксис
using и избежать этой вложенностиPlease open Telegram to view this post
VIEW IN TELEGRAM
❤16👍4
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
👍26❤22🔥7🤣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
❤10👍10🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Хорошие новости для веб-типографики:
Теперь можно создавать продвинутые, вдохновлённые печатной версткой макеты с помощью CSS, которые корректно работают во всех основных движках браузеров.
➡️ @FrontendPortal
text-indent с ключевыми словами each-line и hanging теперь входит в Baseline Widely Available → https://goo.gle/4c7tO9jТеперь можно создавать продвинутые, вдохновлённые печатной версткой макеты с помощью CSS, которые корректно работают во всех основных движках браузеров.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24🔥3👍2
Длительность анимации должна масштабироваться в зависимости от размера анимируемого элемента.
Небольшие UI-элементы, такие как выпадающие списки, отлично ощущаются при длительности до ~200 мс.
Но для крупных переходов, например полноэкранных меню, требуется больше времени, чтобы они не казались резкими – из-за того, что визуально воспринимаются как более тяжёлые.
Вот сравнение: 150 мс vs 300 мс
➡️ @FrontendPortal
Небольшие UI-элементы, такие как выпадающие списки, отлично ощущаются при длительности до ~200 мс.
Но для крупных переходов, например полноэкранных меню, требуется больше времени, чтобы они не казались резкими – из-за того, что визуально воспринимаются как более тяжёлые.
Вот сравнение: 150 мс vs 300 мс
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍48❤11
Очень немногие знают об этом HTML-теге, а он может сделать ваш веб-сайт ощутимо быстрее.
Он называется Speculation Rules и позволяет пререндерить страницы ещё до того, как пользователь кликнет.
Браузер отслеживает намерение навигации - например, когда вы наводите курсор на ссылку, и начинает подготавливать следующую страницу в фоне.
В момент клика переход происходит практически мгновенно
Пока что, к сожалению, это работает только в Chrome и Edge (охват примерно 75% пользователей).
➡️ @FrontendPortal
Он называется Speculation Rules и позволяет пререндерить страницы ещё до того, как пользователь кликнет.
Браузер отслеживает намерение навигации - например, когда вы наводите курсор на ссылку, и начинает подготавливать следующую страницу в фоне.
В момент клика переход происходит практически мгновенно
Пока что, к сожалению, это работает только в Chrome и Edge (охват примерно 75% пользователей).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41🔥17
This media is not supported in your browser
VIEW IN TELEGRAM
Container Queries в действии
Медиазапросы, которые могут применяться на основе размера родительского элемента, а не всей области просмотра
HTML, используемый в этом примере:
Сначала мы объявляем элемент кнопки контейнером, а затем добавляем запрос контейнера, указывающий, что если ширина кнопки меньше некоторого определенного значения, текст должен быть скрыт
➡️ @FrontendPortal | #CSS
Медиазапросы, которые могут применяться на основе размера родительского элемента, а не всей области просмотра
HTML, используемый в этом примере:
<button class='responsive-button'>
<img src='cart.png' alt='...'>
<span class='text'>ADD TO CART</span>
</button>
Сначала мы объявляем элемент кнопки контейнером, а затем добавляем запрос контейнера, указывающий, что если ширина кнопки меньше некоторого определенного значения, текст должен быть скрыт
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37❤22🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Неопределенный чекбокс
Когда у нас есть главный чекбокс в таблице или древовидной структуре чекбоксов, нужно отображать его в состоянии неопределенности, если выбраны только некоторые записи
Просто сделайте это, установив свойство
Мы можем изменить стиль неопределенного чекбокса с помощью псевдокласса
➡️ @FrontendPortal | #tip by Shripal Soni
Когда у нас есть главный чекбокс в таблице или древовидной структуре чекбоксов, нужно отображать его в состоянии неопределенности, если выбраны только некоторые записи
Просто сделайте это, установив свойство
indeterminate чекбокса в true:checkboxEle.indeterminate = true;
Мы можем изменить стиль неопределенного чекбокса с помощью псевдокласса
:indeterminatePlease open Telegram to view this post
VIEW IN TELEGRAM
❤26🏆9👍7🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Когда на собеседовании смог притвориться синьором, и теперь в компании будет работать нейронка за 400к
➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
😁111🔥17🤣11❤6👍4🥱2
Media is too big
VIEW IN TELEGRAM
Этот календарный компонент выглядит очень стильно
Гибкая и функционально насыщенная библиотека календаря от "Juncai Li", которая работает с React, Vue, Angular и Svelte.
→ несколько режимов отображения (день, неделя, месяц, год)
→ поддержка drag-and-drop
→ архитектура на основе плагинов
→ высокая степень кастомизации
Отлично подходит для разработки приложений с расписанием или бронированием без необходимости писать всё с нуля
GitHub: calendar
➡️ @FrontendPortal
Гибкая и функционально насыщенная библиотека календаря от "Juncai Li", которая работает с React, Vue, Angular и Svelte.
→ несколько режимов отображения (день, неделя, месяц, год)
→ поддержка drag-and-drop
→ архитектура на основе плагинов
→ высокая степень кастомизации
Отлично подходит для разработки приложений с расписанием или бронированием без необходимости писать всё с нуля
GitHub: calendar
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35🔥23❤4🤯1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤58👍34
⬇️ Этот текст видят только те, кто пишет на JavaScript ⬇️
Проходите бесплатный курс по JS, чтобы прокачать навыки
Бесплатный курс Академии Selectel поможет освоить базу по синтаксису и конструкциям языка. На финальных модулях вы создадите веб-приложение с интерактивным менеджером задач, который станет частью вашего портфолио.
Во время курса вы:
✔️ освоите архитектуру простых веб-приложений,
✔️ поработаете с продвинутыми шаблонами и библиотеками,
✔️ напишете скрипты и научитесь изменять интерфейс веб-страниц.
Бонусом вас ждет промокод на работу с IT-инфраструктурой Selectel для практики. А после прохождения вы получите именной сертификат.
Начните обучение сейчас ➡️ https://slc.tl/uk9ak
Больше материалов по фронтенд-разработке ищите в профиле @selectel_academy
Реклама. АО "Селектел". erid:2W5zFHtFMNH
Проходите бесплатный курс по JS, чтобы прокачать навыки
Бесплатный курс Академии Selectel поможет освоить базу по синтаксису и конструкциям языка. На финальных модулях вы создадите веб-приложение с интерактивным менеджером задач, который станет частью вашего портфолио.
Во время курса вы:
✔️ освоите архитектуру простых веб-приложений,
✔️ поработаете с продвинутыми шаблонами и библиотеками,
✔️ напишете скрипты и научитесь изменять интерфейс веб-страниц.
Бонусом вас ждет промокод на работу с IT-инфраструктурой Selectel для практики. А после прохождения вы получите именной сертификат.
Начните обучение сейчас ➡️ https://slc.tl/uk9ak
Больше материалов по фронтенд-разработке ищите в профиле @selectel_academy
Реклама. АО "Селектел". erid:2W5zFHtFMNH
👍4🔥2🥱2
This media is not supported in your browser
VIEW IN TELEGRAM
Функция
В этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.
Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem
➡️ @FrontendPortal | #CSS
minmax в CSS гридахВ этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.
Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22👍14
Альтернатива Firebase и Supabase
Называется PocketBase. Бесплатный и с открытым исходным кодом.
✓ Аутентификация и загрузка файлов
✓ Реалтайм-база данных
✓ Встроенная админ-панель
Есть SDK для JavaScript. Хостите где угодно!
→ http://pocketbase.io
➡️ @FrontendPortal
Называется PocketBase. Бесплатный и с открытым исходным кодом.
✓ Аутентификация и загрузка файлов
✓ Реалтайм-база данных
✓ Встроенная админ-панель
Есть SDK для JavaScript. Хостите где угодно!
→ http://pocketbase.io
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Наткнулся на полезный инструмент: визуальный редактор разметки на гридах и флексах
Выбираешь шаблон, подгоняешь под себя, сразу правишь и HTML, и CSS. Всё интерактивно: с превью и подсказками по свойствам
Забираем в закладки👍
➡️ @FrontendPortal | #resourse
Выбираешь шаблон, подгоняешь под себя, сразу правишь и HTML, и CSS. Всё интерактивно: с превью и подсказками по свойствам
Забираем в закладки
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥41❤18👍7