27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Простой способ сделать градиентный текст в 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;
}
CSS table-layout
Свойство предназначено для управления режимом формирования ширины столбцов в таблице
/*Для корректной работы fixed обязательно должна быть задана ширина таблицы */
table {
table-layout: fixed;
width: 100%;
}
/* обрезаем текст, не влезающий в ячейку */
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
auto(по умолч.) и fixed заключается в том, как браузер распределяет ширину столбцов в таблице. auto определяет ширину столбцов на основе их содержимого, тогда как fixed определяет их на основе ширины самой таблицы и заданных ширин столбцов
Gemini CLI — опенсорс AI-агент для разработчиков от Google, который работает прямо в терминале
На борту — Gemini 2.5 Pro, контекст 1М токенов, 60 запросов/мин и 1000 в сутки — бесплатно (нужен только гугл-аккаунт)
Можно писать и дебажить код, автоматизировать задачи, ресерчить
При желании можно прикрутить любой MCP сервер. Например, генерировать прямо из терминала картинки (Imagen) или видео (Veo)
npm install -g @google/gemini-cli
Облако + DevOps — всё в одном. Вы просто развиваете продукт
Обычно компании делают так:
— Арендуют ресурсы в Яндекс или AWS
— Ищут DevOps-инженера, чтобы всё настроить
— Теряют время и деньги на запуск
Мы сделали иначе.
Создали свое приватное облако, где вы получаете:
— Изолированную среду под ваш проект
— GitLab, CI/CD, Kubernetes, мониторинг и другие сервисы — по запросу
— Поддержку инженеров в Telegram — без тикетов и заморочек
Мы настраиваем инфраструктуру под ваши задачи и сопровождаем её. Вы просто делаете продукт — мы берём остальное.
• Прозрачный калькулятор
• Персональные условия
• Без ожиданий, без лишних звеньев
Бесплатная консультация:
@cicdlab_info
https://cicdlab.ru/
Вышел релиз Chrome 138
• AI API в браузере — теперь можно использовать следующие AI-функции непосредственно в браузере, на устройстве пользователя:
- Translator API — добавление перевода в веб-приложения в реальном времени.
- Language Detector API — определение языка текста
- Summarizer API — генерация кратких резюме для статей, чатов и отзывов
• Новые CSS-функции:
- progress() — вычисляет, насколько заданное значение продвинулось между двумя другими, и возвращает результат в виде числа без единиц измерения
- sibling-index() и sibling-count() — используются для стилизации элементов на основе их позиции среди соседей. Больше никаких :nth-child(1), :nth-child(2) и т.д
- abs() и sign() — вычисление модуля и знака числа.
• С помощью Viewport Segments API можно адаптировать вёрстку под складные устройства
Подробнее: https://developer.chrome.com/blog/new-in-chrome-138
➡️ @FrontendPortal
Как оптимизировать PostgreSQL и не лишиться сна: разбор для разработчиков
Когда вы разворачиваете веб-приложение, чаще всего веб-сервер, бэкенд, база данных и авторизация оказываются на одном сервере.
Тестировщики и менеджер счастливы — все летает. Но потом приложение выходит в продакшн и начинается боль. Запросы тормозят и отвечают по пять секунд, CPU не загружен даже на треть, а веб-сервер выдает 504 Gateway Timeout.
И вот вы сидите ночью и чините прод, потому что PostgreSQL не просто «табличка с данными», а сложный инструмент с кэшем, индексами, буферами и планировщиком запросов.
Как избежать такой ситуации и грамотно подойти к проектированию схем — рассказали в статье Академии Selectel.
Переходите по ссылке и учитесь настраивать СУБД правильно.
Реклама, АО «Селектел», ИНН: 7810962785, ERID: 2VtzqvzizHL
В программировании ты должен читать документацию
100+ SVG-лоадеров в одном месте — шикарная подборка open-source спиннеров, которые можно юзать без ограничений (MIT лицензия)
https://magecdn.com/tools/svg-loaders
➡️ @FrontendPortal | #resourse
⚡️ Бесплатное обучение фронтенду (HTML/CSS + JS + React) с нуля с поддержкой от наставника
Можно неделями гуглить инфу по JS и смотреть туториалы, читать книги, делать задачки в тренажёрах,но всё равно не понимать, как из этого собрать нормальынй сайт.
С 20 июня действующий тимлид и опытный разработчик запускает бесплатное обучение в своём телеграм-канале. Участники разработают фронтенд для копии «Авито»
💡Вот план обучения:
— день 1: Начинаем верстку. Верстаем шапку, элемент Поиск.
— день 2: Про верстку. Верстаем контент главной страницы и карточку товара. Верстаем страницу одного товара
— день 3: Подключаем JS. Изучаем базовые понятия. Обработка событий.
— день 4: Базовое приложение React. Компонентный подход.
— день 5: Переносим верстку в приложение React. Подключаем роутинг. Создаем страничку одного товара
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как джуну стартовать на фрилансе или устроиться на работу
Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду.
Поделится способом трудоустройства.
Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией
Подписывайтесь, чтобы участвовать бесплатно
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
📌 Если вы уже пробовали изучать фронтенд, но каждый шаг — это гуглинг, страдание и тысяча вкладок, —
приходите на интенсив. Увидите путь от вёрстки до React и сможете продолжать изучать фронтенд без хаоса в голове.
👉Участвовать бесплатно
Первый урок уже доступен
Надоело искать нужные гит-ветки в бесконечном списке в консоли?
По умолчанию, git branch -l сортирует ветки в алфавитном порядке, из-за чего сложно найти последние
Решение простое – сортировать ветки по дате последнего коммита:
git config --global branch.sort -committerdate
Наткнулся на прикольный плагин для Tailwind с >70 готовыми анимациями + туториал, как его собирали.
Без конфига, просто ставишь, подключаешь плагин и юзаешь классы типа animate-fade-in. Можно кастомизировать длительность, задержку и т.д.
Сайт: tailwindcss-animations.vercel.app
Писали плагин в лайве — есть туториал на YouTube. Отличный способ разобраться, как работает Tailwind изнутри. Ведь классы вроде pl-0, w-full и т.п. тоже используют ту же систему, о которой говорят в видео
➡️ @FrontendPortal | #resourse
26 июня в 15.00 мск пройдет онлайн митап «МойОфис Frontend&UX Talks. Практические решения для сложных интерфейсов в 2025 году: от кода до дизайна».
Современные цифровые продукты становятся все мощнее — и все сложнее. А еще требуют комплексного подхода — от архитектуры кода до продуманного UX. Как создавать сложные интерфейсы, чтобы они оставались удобными? Какие технологии и методы действительно работают в реальных проектах?
Об этом мы и поговорим на митапе: рассмотрим современные инструменты, архитектурные решения, дизайн-системы и методы редизайна, а также покажем рабочие подходы, которые можно применить прямо сейчас, независимо от масштаба вашего проекта.
На митапе выступят:
Руководитель группы разработки МойОфис, участник программного комитета конференции HolyJS Алексей Золотых;
Архитектор веб-направления в «Лаборатории Касперского», соорганизатор MoscowJS, Павел Востриков;
Исследователь пользовательского опыта и клиентских сценариев в Alfa Research Center, тренер и практик дизайн-мышления, Антон Бессонов.
И другие спикеры, в расписании митапа.
Для кого этот митап?
✔️ Для фронтендеров, которые создают не просто код, а удобные и современные интерфейсы.
✔️ Для продуктовых специалистов, которые хотят знать, куда движется индустрия.
✔️ Для дизайнеров, которые хотят глубже понимать технические возможности в разработке дизайна интерфейсов.
Это не просто доклады — это разбор реальных кейсов и живые дискуссии. Присоединяйтесь, чтобы обсудить лучшие практики, задать вопросы спикерам и вдохновиться новыми идеями. Будет полезно!
Реклама
ООО "НОВЫЕ ОБЛАЧНЫЕ ТЕХНОЛОГИИ"
ИНН: 7703807270
erid: 2W5zFHHzwC4
Знал, что в VS Code можно за секунды расшарить свой localhost кому угодно? Это встроенная альтернатива ngrok прямо в редакторе
Если кто не знает, ngrok это средство для пробрасывания (туннелирования) ваших локальных портов наружу, с предоставлением уникального домена
Нужно быстро проверить, какие фичи HTML/CSS реально работают в email-рассылках?
Ответы есть на caniemail.com — это как “Can I use”, только для почтовых клиентов. Проверяешь поддержку нужных фич в Gmail, Outlook, iOS и прочих почтовых клиентах
➡️ @FrontendPortal | #resourse
⚡️ ITCamp — всё, что нужно программисту
— Фреймворки, сервисы и нейросети, без которых не обойтись
— Гайды, шпаргалки и задачи по разным языкам и технологиям
— Разборы вопросов с собеседований от junior до senior
Подписывайся: @itcamp_tg
Спустя более 20 лет вышла новая спецификация PNG
Рабочая группа PNG выкатила третье издание спецификации Portable Network Graphics со статусом W3C Recommendation
Что завезли:
— Полноценная поддержка HDR: расширенный диапазон яркости и более глубокая цветопередача. Картинка теперь может быть значительно качественнее — и всё это в 4 байтах (плюс стандартный overhead PNG-чaнков)
— Поддержка APNG (анимированные PNG!) теперь официальная
— Поддержка Exif-метаданных: теперь можно хранить в PNG метаданные — авторство, камеру, линзы, GPS и прочее
Уже работает в большинстве браузеров и графических тулов
https://www.w3.org/TR/png-3/
@IT_Portal
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
Айтишники поймут
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
Вы знали, что в Chrome DevTools есть функция CSS Overview?
Она предоставляет полный анализ цветов, шрифтов, медиазапросов и неиспользуемых стилей на вашем сайте — всё в одном месте
➡️ @FrontendPortal | #tip
Этот HTML-косяк непростителен 🦯
Не использовать атрибут inputmode в элементах input — серьёзная ошибкаinputmode подсказывает браузеру, какую экранную клавиатуру отобразить пользователю для конкретного поля ввода. Используется с элементами <input> и <textarea>
Улучшай UX, показывая подходящую клавиатуру под тип ввода.
Работает и на Android, и на iOS
➡️ @FrontendPortal | #HTML
Знаете ли вы, что соцсети и мессенджеры вроде WhatsApp умеют подтягивать метаданные из вставленной ссылки? Секрет в том, что сам сайт должен предоставить и описать эти детали
Сюда относятся:
🔸 Заголовок
🔸 Картинка для превью — баннер, изображение продукта и т.п.
🔸 Текстовое описание и другое
Всё это делается с помощью специальных мета-тегов по стандарту, известному как Open Graph Protocol.
Попробуйте включить их на своём сайте ✌️
➡️ @FrontendPortal | #HTML #разное
Выравнивание последней строки текста
В случае необходимости выравнивания последней строки используйте text-align-last, значения свойства совпадают с text-align
.text {
text-align-last: right;
}
Высшее на новом уровне: онлайн-магистратура от Яндекса и ИТМО. Здесь фундаментальные знания и практика для карьерного роста, а ещё — учёба, которую можно совмещать с работой и жизнью.
IT‑специальность с экспертизой Яндекса + диплом магистра гособразца = новая ступень в карьере. Приёмная кампания уже идёт!
Все подробности — на дне открытых дверей:
— Разбор совместной программы с ИТМО.
— Всё о формате прикладной онлайн-магистратуры: что взяли от классического высшего, а что добавили из опыта специалистов Яндекса.
— Общение с экспертами из вуза и ответы на вопросы.
— Всё про поступление: сроки, экзамены, документы, оплата и образовательный кредит.
▷ Ждём вас 26 июня в 19:00 мск.
→ Зарегистрироваться на встречу
Актуальная и бесплатная книга по TypeScript
Не понимаю, как я это упустил: Matt Pocock совсем недавно выкатил свежую книгу — Total TypeScript Essentials
Книга реально крутая: покрывает всё от настройки окружения и базовых типов до продвинутых кейсов с типизацией и реальных паттернов разработки. Отлично закладывает фундамент.
Забираем абсолютно бесплатно здесь 🍯
➡️ @FrontendPortal
Эволюция HTTP
Поставь лайк, если было интересно ✌️
➡️ @FrontendPortal
Внедрение тёмной темы в интерфейсы — задача не из лёгких, особенно когда дело касается многоцветных SVG-логотипов. Вот и фронтендер из финтех-компании Точка столкнулся с проблемой: при переключении темы логотипы оставались неизменными, поскольку их цвета были жёстко зафиксированы в коде.
В статье на Хабре — о том, как синхронизировать логотипы из Figma с кодовой базой и адаптировать их к тёмной теме. Рассмотрим все решения, которые протестировали фронтендеры из Точки, и подробнее расскажем о самом эффективном из них — внедрении CSS-переменных.
HTML-совет
Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п.
Почему?
- На десктопе появляется ненужный спиннер.
- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.
Вместо этого — используй inputmode="numeric" + pattern
✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX.
✅ Добавляет валидацию на цифры.
➡️ @FrontendPortal | #tip by Shripal Soni
Вот быстрый пример, как сделать зум-эффект на картинке, но при этом оставить её внутри рамки. Такое часто встречается на всяких шоп-сайтах
Реализация, ну, буквально как сказано выше: делаем обёртку, ставим overflow: hidden, и зумим картинку внутри.
Важно: для таких анимаций всегда лучше анимировать трансформации типа scale, rotate и т.д., а не трогать напрямую width и height
➡️ @FrontendPortal | #CSS
🚴♂️Не надо изобретать велосипед
Главная ошибка стартаперов — пытаться сделать идеальный продукт, годами его дорабатывать, но так и не выпустить.
В своём канале я запустил челлендж: 12 проектов за 12 месяцев.
1️⃣ Ищем идею под существующий спрос (не из головы!)
2️⃣ Разрабатываем продукт
3️⃣ Занимаемся бесплатным продвижением
4️⃣ Оптимизируем и масштабируем
Формула проста:
1 запуск = 1 функция = решение 1 проблемы
Три главных правила:
✔️ Только проверенный спрос — через поисковые запросы, а не догадки.
✔️ Быстрый запуск — никакого перфекционизма.
✔️ Только США и ЕС — там платят за удобство.
Также в канале разбираю:
— Кто и зачем будет платить за микро-продукт?
— Главная ошибка начинающих стартаперов
— Микро-продукт vs стартап
— Как бесплатно продвигать продукт
Короче, рассказываю в канале без купюр: что работает, а что нет, сколько приносит и как продвигаем. Всё, что обычно скрывают.
Находка для тех, кто хочет встроить терминал прямо в браузер
Termo — это простой эмулятор терминала, который можно использовать для создания интерфейса, похожего на терминал, на вашем сайте. Он вдохновлён эмулятором терминала на сайте stripe.dev. Является обёрткой над xterm.js.
Опенсорс, код на GitHub
https://termo.rajnandan.com/
➡️ @FrontendPortal | #resourse
Сделайте прокручиваемые секции плавными с помощью этого простого трюка
Обратите внимание: работает только с однотонными фонами
Изначально это было вдохновлено сайдбаром на сайте документации MDN
Код и демка на CodePen
➡️ @FrontendPortal | #CSS