Frontend Portal
39.1K subscribers
1.6K photos
703 videos
7 files
1.23K links
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки

Связь: @devmangx

РКН: https://clck.ru/3Fs3wT
Download Telegram
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍48🔥19🤣168
А ты знал про заголовок Clear-Site-Data? 👀

Один HTTP-заголовок, который позволяет очистить cookies, хранилище или кэш для твоего сайта. Идеально подходит для реализации logout-флоу

Подробнее:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Clear-Site-Data

➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3411🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Принес крутейший сайт для прокачки алгоритмов — визуальный тренажёр с пошаговым выполнением кода

70+ алгоритмов на JavaScript, Java и C++, всё интерактивно и с наглядной визуализацией

https://algorithm-visualizer.org/

➡️ @FrontendPortal | #resourse
Please open Telegram to view this post
VIEW IN TELEGRAM
24👍8🔥8
Небольшое улучшение AsyncLocalStorage, появившееся в Node 25.9

Вместо вызова storage.run(data, () => { ... }) и вложенности кода
теперь можно просто использовать синтаксис using и избежать этой вложенности

➡️ @FrontendPortal
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2621🔥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
Please open Telegram to view this post
VIEW IN TELEGRAM
10👍10🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Хорошие новости для веб-типографики: text-indent с ключевыми словами each-line и hanging теперь входит в Baseline Widely Available → https://goo.gle/4c7tO9j

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

➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
24🔥3👍2
Длительность анимации должна масштабироваться в зависимости от размера анимируемого элемента.

Небольшие UI-элементы, такие как выпадающие списки, отлично ощущаются при длительности до ~200 мс.

Но для крупных переходов, например полноэкранных меню, требуется больше времени, чтобы они не казались резкими – из-за того, что визуально воспринимаются как более тяжёлые.

Вот сравнение: 150 мс vs 300 мс

➡️ @FrontendPortal
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4611
Очень немногие знают об этом HTML-теге, а он может сделать ваш веб-сайт ощутимо быстрее.

Он называется Speculation Rules и позволяет пререндерить страницы ещё до того, как пользователь кликнет.

Браузер отслеживает намерение навигации - например, когда вы наводите курсор на ссылку, и начинает подготавливать следующую страницу в фоне.

В момент клика переход происходит практически мгновенно

Пока что, к сожалению, это работает только в Chrome и Edge (охват примерно 75% пользователей).

➡️ @FrontendPortal
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, используемый в этом примере:
<button class='responsive-button'>
<img src='cart.png' alt='...'>
<span class='text'>ADD TO CART</span>
</button>


Сначала мы объявляем элемент кнопки контейнером, а затем добавляем запрос контейнера, указывающий, что если ширина кнопки меньше некоторого определенного значения, текст должен быть скрыт

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3422🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Неопределенный чекбокс

Когда у нас есть главный чекбокс в таблице или древовидной структуре чекбоксов, нужно отображать его в состоянии неопределенности, если выбраны только некоторые записи

Просто сделайте это, установив свойство indeterminate чекбокса в true:
checkboxEle.indeterminate = true;


Мы можем изменить стиль неопределенного чекбокса с помощью псевдокласса :indeterminate

➡️ @FrontendPortal | #tip by Shripal Soni
Please 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🤣76👍4🥱2
Media is too big
VIEW IN TELEGRAM
Этот календарный компонент выглядит очень стильно

Гибкая и функционально насыщенная библиотека календаря от "Juncai Li", которая работает с React, Vue, Angular и Svelte.

→ несколько режимов отображения (день, неделя, месяц, год)
→ поддержка drag-and-drop
→ архитектура на основе плагинов
→ высокая степень кастомизации

Отлично подходит для разработки приложений с расписанием или бронированием без необходимости писать всё с нуля

GitHub: calendar

➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34🔥214🤯1
This media is not supported in your browser
VIEW IN TELEGRAM
Визуализация основных методов массивов в JavaScript

➡️ @FrontendPortal
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
👍4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Функция minmax в CSS гридах

В этом примере мы задали ширину первого столбца (sidebar) как minmax с нижней границей 14rem и верхней границей 30%.

Как мы видим, ширина будет стремиться к 30% от ширины родительского контейнера, но не будет меньше 14rem

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
17👍13
Альтернатива Firebase и Supabase

Называется PocketBase. Бесплатный и с открытым исходным кодом.

✓ Аутентификация и загрузка файлов
✓ Реалтайм-база данных
✓ Встроенная админ-панель

Есть SDK для JavaScript. Хостите где угодно!
http://pocketbase.io

➡️ @FrontendPortal
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
🥱15🤣15😁8🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Наткнулся на полезный инструмент: визуальный редактор разметки на гридах и флексах

Выбираешь шаблон, подгоняешь под себя, сразу правишь и HTML, и CSS. Всё интерактивно: с превью и подсказками по свойствам

Забираем в закладки 👍

➡️ @FrontendPortal | #resourse
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2615👍2