Frontend Portal

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥111💯19👍11❤3🤯1

10.6K views05:33

0:08

Совет по CSS

Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище.

Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными

Сделай доступным для клавиатуры: используй :focus-within, чтобы показывать кнопки, когда фокус находится внутри контейнера.

Сделай доступным для тачскрина: hover: none сработает, если основное устройство ввода не поддерживает наведение

➡️

@FrontendPortal | #tip by Shripal Soni

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥31❤16👍8🤝4

13K views08:30

0:30

PatternСraft — библиотека фонов с градиентами и геометрическими узорами

Каждый фон можно посмотреть в деле, а затем скопировать его CSS для своих проектов

patterncraft.fun

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

👍40❤25🏆1

8.42K views06:57

0:15

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

7.85K views17:29

1:00

Pinterest перешёл на нативные CSS-карусели, чтобы заменить устаревший JS по всей платформе → https://goo.gle/4cZR6Pk

Используя 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

7.73K views08:03

0:30

Cobe — это крошечная библиотека WebGL для отображения глобуса, которая позволяет рендерить красивую анимированную Землю на canvas практически без увеличения размера бандла.

→ ~5KB (gzip)
→ основана на WebGL
→ плавная анимация глобуса
→ настраиваемые маркеры и цвета
→ работает в любом JS-проекте

Идеально подходит для лендингов, где нужен глобус без подключения тяжёлых зависимостей ✌️

GitHub тут

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

👍50❤13🔥8

7.8K views17:48

0:30

Если нужно быстро сгенерировать кастомный SVG-лоадер — вот отличная опенсорс-тулза. Гибкая настройка: цвет, скорость, размер и прочее по вкусу

Закидывайте в закладки — пригодится: http://loaders.holasvg.com

➡️

@FrontendPortal | #resourse

Please open Telegram to view this post

VIEW IN TELEGRAM

❤26🔥14👍4🥱2

7.52K views06:33

0:07

CSS Совет

Одна строка для задания одновременно max-width и width в CSS

Мы можем использовать min() для задания как width, так и max-width.

min() возвращает наименьшее значение из переданных

📝 Примечание: значения в функции min() можно указывать в любом порядке.

➡️

@FrontendPortal | #tip by Shripal Soni

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥45❤8👍7

6.96K views08:17

Как за 2 года стать разработчиком, за которого конкурируют компании?

⚡️ 8 апреля ИТМО в партнёрстве с Яндекс Практикумом проведут День открытых дверей онлайн-магистратуры «Фронтенд- и бэкенд-разработка».

Поговорим про фронтенд и бэкенд, разницу между ними и уровень знаний на старте. Обсудим, какие навыки нужны для поступления, как магистратура помогает быстрее выйти на рынок — и быть на нём конкурентоспособным.

Отдельно разберём сценарии для тех, кто уже работает в IT: как сменить стек, углубиться в текущий или перейти в новые направления, включая работу с ИИ.

На встрече обсудим:
— какой трек выбрать и как выстроить карьеру в разработке
— какую роль играет ИИ в программировании
— как устроена программа и чему вы научитесь
— как проходит обучение и как его совмещать с работой
— как поступить: вступительные испытания и ключевые даты

Подключайтесь онлайн 8 апреля в 19:00 мск.

→ Зарегистрироваться на ДОД

Please open Telegram to view this post

VIEW IN TELEGRAM

😁5🔥4🤣2❤1👍1🥱1

6.69K views15:47

0:20

Простой способ сделать градиентный текст в 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;
}

➡️

@FrontendPortal | #CSS

Please open Telegram to view this post

VIEW IN TELEGRAM

❤47👍18🏆2

7.69K views18:15

Forwarded from IT Portal

0:08

1:02

0:14

Наконец-то веб снова становится интересным: разраб придумал гениальный способ, как сделать обтекаемый текст в браузере — прямо как в глянцевых журналах

Он прошёл через все круги ада, чтобы принести вам на ближайшие годы одну из самых важных фундаментальных составляющих 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

6.24K views07:13

0:27

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

Это предотвращает ситуацию, когда контент выходит за пределы экрана и пользователь не может до него проскроллить.

Вот наглядная демо-визуализация, показывающая, как работает ключевое слово safe

Хорошо видно, что safe не даёт элементам скрываться, а unsafe (поведение по умолчанию), наоборот, прячет их и делает недоступными.

Попробовать можно здесь: https://iprodan.dev/l/safe-alignment/

➡️

@FrontendPortal | #CSS

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥40👍24❤8🏆2

6.62K views06:15

Надоели шаблонные решения на ИТ-соревнованиях? На МТС True Tech Hack 2026 ценят нестандартные подходы.

Инженер данных, разработчик или системный аналитик — это про тебя? Тогда подключайся: победители разделят 1 500 000 рублей за разработку демоверсии ИИ-продукта.

На хакатоне будут три задачи на выбор — каждая с уникальной технической фишкой. Справишься лучше всех — сможешь пройти в финал в Москве и получить приглашение на стажировку.

Регистрация до 9 апреля здесь

❤5🥱4👍3

6.37K views08:07

0:29

Эта фича в VS Code чертовски недооценена

🤯

Можно добавить цветную рамку вокруг окна, чтобы было проще различать разные окна 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

7.31K views10:44

Перестань вызывать redirect() внутри блока try/catch в Next.js

Почему это проблема:
Когда ты добавляешь redirect() из next/navigation внутрь try/catch

redirect() специально выбрасывает внутреннюю ошибку – именно так Next.js понимает, что нужно сделать редирект пользователя

Но если redirect() находится внутри try, то catch перехватит эту ошибку, и редирект не произойдёт

Как исправить:
→ Вынеси redirect() за пределы блока try/catch

➡️

@FrontendPortal | #tip

Please open Telegram to view this post

VIEW IN TELEGRAM

❤21👍15🌚5🏆2🔥1💯1

6.57K views05:27

0:13

В VS Code есть встроенный браузер для предпросмотра и отладки веб-приложений прямо внутри редактора

Там можно запускать и дебажить фронтенд без переключения во внешний браузер.

→ открывать localhost-приложения прямо в VS Code
→ отлаживать прямо в редакторе
→ встроенные DevTools (inspect, console и т.д.)
→ ставить брейкпоинты как обычно
→ меньше переключений между вкладками

Отлично подходит, если хочешь более удобный и гладкий процесс отладки внутри VS Code 🙂

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

👍27❤10🥱8🔥2🏆1

6.2K views15:22

0:26

NPM Visual Manager — это расширение для VS Code, которое позволяет управлять зависимостями через удобный UI вместо запуска команд в терминале.

→ просмотр установленных и актуальных версий
→ установка пакетов прямо из интерфейса
→ обновление в один клик
→ простое удаление пакетов
→ поддержка массовых операций
→ работает прямо внутри VS Code

Удобно, если не хочется каждый раз вручную вводить npm-команды 👍

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥30❤9👍3🤯3🌚1

6.14K views06:07