Frontend Portal

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.56K 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

Как превратить годы обучения в IT в реальный опыт и деньги

Самое странное сейчас это пытаться вкатиться в IT по классике, когда опытные программисты давно кодят с нейронками даже в больших проектах.

Поэтому в 2026 выигрывает тот, кто быстро делает рабочие решения без долгих лет обучения и максимально сокращает путь с нуля до первого реального проекта в IT.

Андрей Ивашев запускает бесплатный 3-дневный интенсив:

«Первые деньги на вайбкодинге»

📅 7-9 апреля в 19:00 МСК

Для тех хочет начать программировать с нейронками и заработать на этом первые деньги даже без опыта и образования.

Программа 🔥

7 апреля

почему сегодня вход в IT стал сложнее и почему вайбкодинг меняет правила игры

8 апреля

3 способа заработать на вайбкодинге в 2026 и где брать первого клиента, чтобы сделать проект за реальные деньги

9 апреля

На практике соберём AI-ассистента, который станет твоим первым IT-проектом.

🎁 Бонус за регистрацию:

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

50 бесплатных нейросетей, чтобы кодить без остановки + серкетные бонусы

Бесплатных мест для наших подписчиков всего 100.

Зарегистрироваться бесплатно
Зарегистрироваться бесплатно
Зарегистрироваться бесплатно

Тыкни на 🔥, если идёшь.

🤣23❤3🔥3🤝2😁1

5.73K views15:23

https://blog.cloudflare.com/emdash-wordpress

Cloudflare анонсировала духовного наследника WordPress!
Новая CMS, построенная на Astro и TypeScript.

✓ Безопасна по умолчанию. Плагины изолированы в sandbox
✓ Есть CLI, MCP и изначально рассчитана на работу с AI-агентами
✓ Простое развертывание в Cloudflare или Node.js

$ npm create emdash

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥35👍9❤5😁2

6.59K views17:23

Не забывай вовремя отменять fetch-запросы

Если этого не делать, вызовы будут висеть в состоянии pending бесконечно (или пока их не завершит что-то извне), и твой UI, скорее всего, зависнет.

Для более простого решения используйте AbortSignal.timeout

👍

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

👍30❤15🥱4

6.52K views11:48

Добавь это в основной CSS-файл; приложение от этого точно не сломается, обещаю!

Твои юзеры скажут тебе спасибо!

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

🤔37❤12👍7🤯1

6.41K views13:21

0:34

Вот что происходит, когда просишь ИИ отцентрировать div

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

😁77🤣29🤯9❤8🔥3👍2

6.44K views11:58

Ограничиваем текст заданным числом строк c помощью CSS-свойства line-clamp

Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие. Cвойство работает только в комбинации вспомогательных свойств:

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient:vertical;  
  overflow: hidden;
}

Поддержка свойства составляет 97.21%

➡️

@FrontendPortal | #CSS

Please open Telegram to view this post

VIEW IN TELEGRAM

❤28👍15

6.04K views15:52

0:05

В Google Chrome 148 позиционирование sticky теперь работает независимо по осям

Это значит, что можно делать sticky-элементы, которые отслеживают разные скролл-контейнеры по разным осям.

Подробнее в статье:
https://www.bram.us/2026/03/30/css-sticky-per-axis/

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥71👍10❤9

5.92K views05:22

Школа разработки интерфейсов Яндекса: прокачай hard-скиллы за лето

Если уже знаешь JavaScript, TypeScript, React и Git, имеешь небольшой опыт разработки интерфейсов и работал в команде — тебе в Школу!

За одно лето научишься делать надёжные, удобные и быстрые интерфейсы: прокачаем асинхронность, TypeScript, React и Node.js, а еще разберем типизацию, производительность, инфраструктуру, автотесты и AI-инструменты для разработки.

Слушай лекции и работай над бизнес‑задачами с фулстек‑командой разработки в атмосфере летнего кэмпа.

Выпускников ждет упрощенный набор в стажировку. Подать заявку можно здесь.

🥱9❤5🕊4

5.75K views14:49

0:16

Управляй портами localhost как ПРО

Port-Whisperer — это удобный CLI-инструмент, который показывает, что запущено на твоих портах, и помогает управлять лишними процессами.

→ вывести список всех активных портов
→ посмотреть, какое приложение использует каждый порт
→ завершать процессы на неиспользуемых портах
→ мониторить порты в реальном времени

Больше никакого гадания, что там крутится в фоне 🙂

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

👍20🕊6❤5🔥5

5.61K views16:54

0:11

CSS View Transitions + Anchor Positioning теперь позволяют легко реализовать плавную навигацию в стиле SPA даже на старом добром статическом сайте!

Демка вживую: https://mpa-view-transition.vercel.app

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

👍24❤11

5.46K viewsedited 05:23

0:32

Перестань вручную делать skeleton-лоадеры

Boneyard — это новый фреймворк, который автоматически генерирует skeleton-экраны прямо из существующих UI-компонентов, так что тебе не нужно проектировать их самому.

→ без ручного дизайна
→ соответствует реальному лейауту
→ работает с React, Svelte, React Native
→ мгновенно генерирует лоадеры

По сути, он автоматически превращает твой реальный UI в состояния загрузки ✌️

GitHub: https://github.com/0xGF/boneyard

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

❤38👍17🔥6🥱4

5.87K views13:02

0:22

CSS Subgrid теперь входит в Baseline и широко поддерживается всеми основными движками → https://goo.gle/4lOlLRL

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

➡️

Please open Telegram to view this post

VIEW IN TELEGRAM

❤32🔥13👍1

5.46K views05:49

0:37

Вот как выглядит максимум возможностей Three.js 🐐

Apex — это браузерная гоночная игра, которая показывает, насколько далеко шагнули веб-технологии.

https://apex-psi-indol.vercel.app/

➡️