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
❤34🔥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
👍48🔥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
❤15👍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❤21🔥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
👍46❤11
Очень немногие знают об этом HTML-теге, а он может сделать ваш веб-сайт ощутимо быстрее.
Он называется Speculation Rules и позволяет пререндерить страницы ещё до того, как пользователь кликнет.
Браузер отслеживает намерение навигации - например, когда вы наводите курсор на ссылку, и начинает подготавливать следующую страницу в фоне.
В момент клика переход происходит практически мгновенно
Пока что, к сожалению, это работает только в Chrome и Edge (охват примерно 75% пользователей).
➡️ @FrontendPortal
Он называется Speculation Rules и позволяет пререндерить страницы ещё до того, как пользователь кликнет.
Браузер отслеживает намерение навигации - например, когда вы наводите курсор на ссылку, и начинает подготавливать следующую страницу в фоне.
В момент клика переход происходит практически мгновенно
Пока что, к сожалению, это работает только в Chrome и Edge (охват примерно 75% пользователей).
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39🔥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
👍34❤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
❤22🏆9👍5🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Когда на собеседовании смог притвориться синьором, и теперь в компании будет работать нейронка за 400к
➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
😁104🔥15🤣7❤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
👍34🔥21❤4🤯1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤49👍33
⬇️ Этот текст видят только те, кто пишет на 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
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
❤17👍13
Альтернатива 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
❤20👍2
Совет на 2026 год — переходите в ML.
Пока обычные разрабы конкурируют с ИИ-копилотами, ML-инженеры эти самые нейронки создают.
В эпоху нейростей это самые востребованые люди в мире программирования. Зарплаты мидлов начинаются от 250 000 ₽, а у сеньоров в BigTech доходят до 700 000 ₽.
А чтобы освоить его всего за 4 месяца без лишней суеты — изучите канал Артема Алехина.
Его бэкграунд: Руководитель команды в Сбере, валютная удаленка. К 22 годам вышел на доход 1 000 000+ ₽ в месяц.
На канале вы найдёте:
— Всё про самые востребованные стеки(Python, ИИ-агенты, NLP) и почему математика — это не страшно, если учить только нужное.
— Как оформить резюме, чтобы оно пролетало через любые LLM-фильтры и ATS-системы прямо к тимлидам.
— Скрипты переговоров, которые помогли его ученикам прыгнуть с 0 до 360к всего за 8 месяцев.
Во времена острой нехватки ML-разработчиков, это лучшее время, чтобы перекатиться. Переходи и изучай: https://t.me/+w33eYYK1a2kwOWI6
Пока обычные разрабы конкурируют с ИИ-копилотами, ML-инженеры эти самые нейронки создают.
В эпоху нейростей это самые востребованые люди в мире программирования. Зарплаты мидлов начинаются от 250 000 ₽, а у сеньоров в BigTech доходят до 700 000 ₽.
А чтобы освоить его всего за 4 месяца без лишней суеты — изучите канал Артема Алехина.
Его бэкграунд: Руководитель команды в Сбере, валютная удаленка. К 22 годам вышел на доход 1 000 000+ ₽ в месяц.
На канале вы найдёте:
— Всё про самые востребованные стеки(Python, ИИ-агенты, NLP) и почему математика — это не страшно, если учить только нужное.
— Как оформить резюме, чтобы оно пролетало через любые LLM-фильтры и ATS-системы прямо к тимлидам.
— Скрипты переговоров, которые помогли его ученикам прыгнуть с 0 до 360к всего за 8 месяцев.
Во времена острой нехватки ML-разработчиков, это лучшее время, чтобы перекатиться. Переходи и изучай: https://t.me/+w33eYYK1a2kwOWI6
🥱15🤣15😁8🔥1
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
🔥26❤15👍2