This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS
Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище.
Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными
Сделай доступным для клавиатуры: используй
Сделай доступным для тачскрина:
➡️ @FrontendPortal | #tip by Shripal Soni
Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище.
Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными
Сделай доступным для клавиатуры: используй
:focus-within, чтобы показывать кнопки, когда фокус находится внутри контейнера.Сделай доступным для тачскрина:
hover: none сработает, если основное устройство ввода не поддерживает наведениеPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥31❤16👍8🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
PatternСraft — библиотека фонов с градиентами и геометрическими узорами
Каждый фон можно посмотреть в деле, а затем скопировать его CSS для своих проектов
patterncraft.fun
➡️ @FrontendPortal
Каждый фон можно посмотреть в деле, а затем скопировать его CSS для своих проектов
patterncraft.fun
Please open Telegram to view this post
VIEW IN TELEGRAM
👍40❤25🏆1
This media is not supported in your browser
VIEW IN TELEGRAM
transitionType проп для ссылок в Next.js 16.2(требует дополнительной настройки для <ViewTransitions />)
<ViewTransitions> всё ещё экспериментальная фича в Next.js и не рекомендуется для продакшена
Полная демка:
https://github.com/SidKH/gist-of-next-demos/blob/cursor/view-transition-transition-types-demo/README.md
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25❤9
This media is not supported in your browser
VIEW IN TELEGRAM
Pinterest перешёл на нативные CSS-карусели, чтобы заменить устаревший JS по всей платформе → https://goo.gle/4cZR6Pk
Используя CSS-примитивы вроде
- сокращения кода на 90% (с ~2000 строк JS до ~200 строк CSS)
- ускорения загрузки страниц на 15%
- более плавного и интерактивного UI
➡️ @FrontendPortal
Используя CSS-примитивы вроде
scroll markers и scroll snap, они добились:- сокращения кода на 90% (с ~2000 строк JS до ~200 строк CSS)
- ускорения загрузки страниц на 15%
- более плавного и интерактивного UI
Please open Telegram to view this post
VIEW IN TELEGRAM
❤54👍28🔥18🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
Cobe — это крошечная библиотека WebGL для отображения глобуса, которая позволяет рендерить красивую анимированную Землю на canvas практически без увеличения размера бандла.
→ ~5KB (gzip)
→ основана на WebGL
→ плавная анимация глобуса
→ настраиваемые маркеры и цвета
→ работает в любом JS-проекте
Идеально подходит для лендингов, где нужен глобус без подключения тяжёлых зависимостей✌️
GitHub тут
➡️ @FrontendPortal
→ ~5KB (gzip)
→ основана на WebGL
→ плавная анимация глобуса
→ настраиваемые маркеры и цвета
→ работает в любом JS-проекте
Идеально подходит для лендингов, где нужен глобус без подключения тяжёлых зависимостей
GitHub тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍50❤13🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Если нужно быстро сгенерировать кастомный SVG-лоадер — вот отличная опенсорс-тулза. Гибкая настройка: цвет, скорость, размер и прочее по вкусу
Закидывайте в закладки — пригодится: http://loaders.holasvg.com
➡️ @FrontendPortal | #resourse
Закидывайте в закладки — пригодится: http://loaders.holasvg.com
Please open Telegram to view this post
VIEW IN TELEGRAM
❤26🔥14👍4🥱2
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Совет
Одна строка для задания одновременно
Мы можем использовать
📝 Примечание: значения в функции
➡️ @FrontendPortal | #tip by Shripal Soni
Одна строка для задания одновременно
max-width и width в CSS Мы можем использовать
min() для задания как width, так и max-width.min() возвращает наименьшее значение из переданныхmin() можно указывать в любом порядке.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥45❤8👍7
Как за 2 года стать разработчиком, за которого конкурируют компании?
⚡️ 8 апреля ИТМО в партнёрстве с Яндекс Практикумом проведут День открытых дверей онлайн-магистратуры «Фронтенд- и бэкенд-разработка».
Поговорим про фронтенд и бэкенд, разницу между ними и уровень знаний на старте. Обсудим, какие навыки нужны для поступления, как магистратура помогает быстрее выйти на рынок — и быть на нём конкурентоспособным.
Отдельно разберём сценарии для тех, кто уже работает в IT: как сменить стек, углубиться в текущий или перейти в новые направления, включая работу с ИИ.
Подключайтесь онлайн 8 апреля в 19:00 мск.
→ Зарегистрироваться на ДОД
Поговорим про фронтенд и бэкенд, разницу между ними и уровень знаний на старте. Обсудим, какие навыки нужны для поступления, как магистратура помогает быстрее выйти на рынок — и быть на нём конкурентоспособным.
Отдельно разберём сценарии для тех, кто уже работает в IT: как сменить стек, углубиться в текущий или перейти в новые направления, включая работу с ИИ.
На встрече обсудим:
— какой трек выбрать и как выстроить карьеру в разработке
— какую роль играет ИИ в программировании
— как устроена программа и чему вы научитесь
— как проходит обучение и как его совмещать с работой
— как поступить: вступительные испытания и ключевые даты
Подключайтесь онлайн 8 апреля в 19:00 мск.
→ Зарегистрироваться на ДОД
Please open Telegram to view this post
VIEW IN TELEGRAM
😁5🔥4🤣2❤1👍1🥱1
This media is not supported in your browser
VIEW IN TELEGRAM
Простой способ сделать градиентный текст в CSS
Свойство
Также мы используем свойство
➡️ @FrontendPortal | #CSS
Свойство
background-clip определяет, как фоновое изображение или цвет должны быть обрезаны относительно границ текста. В данном случае установлено значение text, что означает, что фон должен быть обрезан по контуру текста. Также мы используем свойство
-webkit-text-fill-color, чтобы сделать цвет текста прозрачнымh1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}Please open Telegram to view this post
VIEW IN TELEGRAM
❤47👍18🏆2
Forwarded from IT Portal
Наконец-то веб снова становится интересным: разраб придумал гениальный способ, как сделать обтекаемый текст в браузере — прямо как в глянцевых журналах
Он прошёл через все круги ада, чтобы принести вам на ближайшие годы одну из самых важных фундаментальных составляющих UI-инженерии (если не в плане реализации, то как минимум на уровне концепции)
Быстрый, точный и полноценный алгоритм измерения текста на стороне приложения, написанный на чистом TypeScript, который можно использовать для верстки целых веб-страниц без CSS, обходя измерения через DOM и reflow.
GitHub здесь🍆
@IT_Portal
Он прошёл через все круги ада, чтобы принести вам на ближайшие годы одну из самых важных фундаментальных составляющих UI-инженерии (если не в плане реализации, то как минимум на уровне концепции)
Быстрый, точный и полноценный алгоритм измерения текста на стороне приложения, написанный на чистом TypeScript, который можно использовать для верстки целых веб-страниц без CSS, обходя измерения через DOM и reflow.
GitHub здесь
@IT_Portal
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤47👍23🔥8🏆7😁3🤯3
Сегодня я узнал, что можно безопасно выравнивать элементы внутри контейнера 👇
Это предотвращает ситуацию, когда контент выходит за пределы экрана и пользователь не может до него проскроллить.
Вот наглядная демо-визуализация, показывающая, как работает ключевое слово
Хорошо видно, что
Попробовать можно здесь: https://iprodan.dev/l/safe-alignment/
➡️ @FrontendPortal | #CSS
Это предотвращает ситуацию, когда контент выходит за пределы экрана и пользователь не может до него проскроллить.
Вот наглядная демо-визуализация, показывающая, как работает ключевое слово
safeХорошо видно, что
safe не даёт элементам скрываться, а unsafe (поведение по умолчанию), наоборот, прячет их и делает недоступными.Попробовать можно здесь: https://iprodan.dev/l/safe-alignment/
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥40👍24❤8🏆2
Надоели шаблонные решения на ИТ-соревнованиях? На МТС True Tech Hack 2026 ценят нестандартные подходы.
Инженер данных, разработчик или системный аналитик — это про тебя? Тогда подключайся: победители разделят 1 500 000 рублей за разработку демоверсии ИИ-продукта.
На хакатоне будут три задачи на выбор — каждая с уникальной технической фишкой. Справишься лучше всех — сможешь пройти в финал в Москве и получить приглашение на стажировку.
Регистрация до 9 апреля здесь
Инженер данных, разработчик или системный аналитик — это про тебя? Тогда подключайся: победители разделят 1 500 000 рублей за разработку демоверсии ИИ-продукта.
На хакатоне будут три задачи на выбор — каждая с уникальной технической фишкой. Справишься лучше всех — сможешь пройти в финал в Москве и получить приглашение на стажировку.
Регистрация до 9 апреля здесь
❤5🥱4👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Эта фича в VS Code чертовски недооценена 🤯
Можно добавить цветную рамку вокруг окна, чтобы было проще различать разные окна VS Code.
Например, можно задать разные цвета, чтобы визуально отделить frontend и backend проекты при переключении между окнами и не путаться.
→ добавляет рамку вокруг окна
→ поддерживает hex, rgb, hsl и другие форматы
→ удобно при работе с несколькими проектами
→ можно использовать системные или кастомные цвета
Чтобы включить: найди
➡️ @FrontendPortal
Можно добавить цветную рамку вокруг окна, чтобы было проще различать разные окна VS Code.
Например, можно задать разные цвета, чтобы визуально отделить frontend и backend проекты при переключении между окнами и не путаться.
→ добавляет рамку вокруг окна
→ поддерживает hex, rgb, hsl и другие форматы
→ удобно при работе с несколькими проектами
→ можно использовать системные или кастомные цвета
Чтобы включить: найди
window.border в настройках, открой вкладку workspace и выбери значение вроде default, system или задай свой цветPlease open Telegram to view this post
VIEW IN TELEGRAM
❤37🥱25👍6😱4🤔2🤣1
Перестань вызывать
Почему это проблема:
Когда ты добавляешь
Но если
Как исправить:
→ Вынеси
➡️ @FrontendPortal | #tip
redirect() внутри блока try/catch в Next.jsПочему это проблема:
Когда ты добавляешь
redirect() из next/navigation внутрь try/catchredirect() специально выбрасывает внутреннюю ошибку – именно так Next.js понимает, что нужно сделать редирект пользователяНо если
redirect() находится внутри try, то catch перехватит эту ошибку, и редирект не произойдётКак исправить:
→ Вынеси
redirect() за пределы блока try/catchPlease open Telegram to view this post
VIEW IN TELEGRAM
❤21👍15🌚5🏆2🔥1💯1
This media is not supported in your browser
VIEW IN TELEGRAM
В VS Code есть встроенный браузер для предпросмотра и отладки веб-приложений прямо внутри редактора
Там можно запускать и дебажить фронтенд без переключения во внешний браузер.
→ открывать localhost-приложения прямо в VS Code
→ отлаживать прямо в редакторе
→ встроенные DevTools (inspect, console и т.д.)
→ ставить брейкпоинты как обычно
→ меньше переключений между вкладками
Отлично подходит, если хочешь более удобный и гладкий процесс отладки внутри VS Code🙂
➡️ @FrontendPortal
Там можно запускать и дебажить фронтенд без переключения во внешний браузер.
→ открывать localhost-приложения прямо в VS Code
→ отлаживать прямо в редакторе
→ встроенные DevTools (inspect, console и т.д.)
→ ставить брейкпоинты как обычно
→ меньше переключений между вкладками
Отлично подходит, если хочешь более удобный и гладкий процесс отладки внутри VS Code
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27❤10🥱8🔥2🏆1
This media is not supported in your browser
VIEW IN TELEGRAM
NPM Visual Manager — это расширение для VS Code, которое позволяет управлять зависимостями через удобный UI вместо запуска команд в терминале.
→ просмотр установленных и актуальных версий
→ установка пакетов прямо из интерфейса
→ обновление в один клик
→ простое удаление пакетов
→ поддержка массовых операций
→ работает прямо внутри VS Code
Удобно, если не хочется каждый раз вручную вводить npm-команды👍
➡️ @FrontendPortal
→ просмотр установленных и актуальных версий
→ установка пакетов прямо из интерфейса
→ обновление в один клик
→ простое удаление пакетов
→ поддержка массовых операций
→ работает прямо внутри VS Code
Удобно, если не хочется каждый раз вручную вводить npm-команды
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥30❤9👍3🤯3🌚1
Как превратить годы обучения в IT в реальный опыт и деньги
Самое странное сейчас это пытаться вкатиться в IT по классике, когда опытные программисты давно кодят с нейронками даже в больших проектах.
Поэтому в 2026 выигрывает тот, кто быстро делает рабочие решения без долгих лет обучения и максимально сокращает путь с нуля до первого реального проекта в IT.
Андрей Ивашев запускает бесплатный 3-дневный интенсив:
«Первые деньги на вайбкодинге»
📅 7-9 апреля в 19:00 МСК
Для тех хочет начать программировать с нейронками и заработать на этом первые деньги даже без опыта и образования.
Программа 🔥
7 апреля
почему сегодня вход в IT стал сложнее и почему вайбкодинг меняет правила игры
8 апреля
3 способа заработать на вайбкодинге в 2026 и где брать первого клиента, чтобы сделать проект за реальные деньги
9 апреля
На практике соберём AI-ассистента, который станет твоим первым IT-проектом.
🎁 Бонус за регистрацию:
«Библиотека промптов для заработка на вайбкодинге», которые помогут упаковать портфолио и общаться с клиентами так, чтобы покупали
50 бесплатных нейросетей, чтобы кодить без остановки + серкетные бонусы
Бесплатных мест для наших подписчиков всего 100.
Зарегистрироваться бесплатно
Зарегистрироваться бесплатно
Зарегистрироваться бесплатно
Тыкни на 🔥, если идёшь.
Самое странное сейчас это пытаться вкатиться в IT по классике, когда опытные программисты давно кодят с нейронками даже в больших проектах.
Поэтому в 2026 выигрывает тот, кто быстро делает рабочие решения без долгих лет обучения и максимально сокращает путь с нуля до первого реального проекта в IT.
Андрей Ивашев запускает бесплатный 3-дневный интенсив:
«Первые деньги на вайбкодинге»
📅 7-9 апреля в 19:00 МСК
Для тех хочет начать программировать с нейронками и заработать на этом первые деньги даже без опыта и образования.
Программа 🔥
7 апреля
почему сегодня вход в IT стал сложнее и почему вайбкодинг меняет правила игры
8 апреля
3 способа заработать на вайбкодинге в 2026 и где брать первого клиента, чтобы сделать проект за реальные деньги
9 апреля
На практике соберём AI-ассистента, который станет твоим первым IT-проектом.
🎁 Бонус за регистрацию:
«Библиотека промптов для заработка на вайбкодинге», которые помогут упаковать портфолио и общаться с клиентами так, чтобы покупали
50 бесплатных нейросетей, чтобы кодить без остановки + серкетные бонусы
Бесплатных мест для наших подписчиков всего 100.
Зарегистрироваться бесплатно
Зарегистрироваться бесплатно
Зарегистрироваться бесплатно
Тыкни на 🔥, если идёшь.
🤣23❤3🔥3🤝2😁1
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