27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Высшее на новом уровне: онлайн-магистратура от Яндекса и ИТМО. Здесь фундаментальные знания и практика для карьерного роста, а ещё — учёба, которую можно совмещать с работой и жизнью.
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
🌐 WAICORE — хостинг, за который не надо переживать
Устали от лагов, сложных панелей и переплат? Переходите на VPS с AMD Ryzen 9 — быстро, просто, без нервов.
💬 Почему клиенты выбирают нас:
— Цена начинается от 2€
— Скорость канала до 10 Гбит/с
— Поддержка 24/7 — отвечаем быстро и без шаблонов
☀Приятный бонус: Бесплатный VPN — расширение для браузера в подарок каждому нашему юзеру
VPN | Расширение для браузера
📍 Локации: Германия (Франкфурт), Москва, Нидерланды (уже скоро) — стабильный пинг, DDoS-защита.
🔥 Успейте сегодня
⤵ Выбрать сервер | 💬 Наш канал
Эффект печати текста
Трюк заключается в автоматическом пошаговом изменении ширины текстового элемента (по одному символу за раз)
.typing-effect {
width: 10ch;
overflow: hidden;
animation: typing 1s steps(10) infinite alternate-reverse;
}
@keyframes typing {
from { width: 0ch; }
}
Oxlint вышел в первый стабильный релиз
Это линтер для JS/TS на базе Rust, который в 50–100 раз быстрее ESLint, поддерживает более 500 правил и не требует настройки
Уже успешно крутится в продакшене у Shopify, Airbnb и Mercedes-Benz (у последних время линтинга сократилось до 97%)
Хотя настройка не требуется, Oxlint можно конфигурировать через файл .oxlintrc.json — это удобно для крупных проектов или случаев, когда нужна кастомизация
Конфиг совместим с ESLint flat-config, миграция лёгкая, есть плагины для параллельного запуска с ESLint, и даже поддержка редакторов уже завезена (VSCode, WebStorm и любые с LSP)
Самое время попробовать → oxc.rs
➡️ @FrontendPortal
Если нужно быстро сгенерировать кастомный SVG-лоадер — вот отличная опенсорс-тулза. Гибкая настройка: цвет, скорость, размер и прочее по вкусу
Закидывайте в закладки — пригодится: http://loaders.holasvg.com
➡️ @FrontendPortal | #resourse
Совет по веб-доступности: Лучший способ сделать ссылки только с иконками доступными для скринридеров
Иногда нужно создавать ссылки, содержащие только иконку. Например: ссылки для шеринга поста
Но такие ссылки недоступны для пользователей скринридеров
Чтобы это исправить, можно задать подпись в скрытом элементе и связать его с тегом <a> с помощью атрибутов aria-labelledby и id. Также установите aria-hidden="true" на SVG-иконку, чтобы скринридеры её пропускали
➡️ @FrontendPortal | #tip by Shripal Soni
Теперь можно официально получить гордый титул HTML-программиста 😎
Если вдруг пропустили: вчера заработала платформа от Минцифры, где можно добровольно пройти тесты и официально подтвердить свои ИТ-навыки
За прохождение получите сертификат HTML-программиста. Документ будет лежать в личном кабинете на Госуслугах и действовать целый год
Вопросы там... интересные. Где ещё вы найдёте "Как подключить CSS?" на продвинутом уровне или сможете вспомнить, что div — это блочный элемент, а span — нет.
Пройти можно на Госуслугах или напрямую на hh.ru
➡️ @FrontendPortal
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
Если вы откроете DevTools, а затем нажмёте и удержите кнопку перезагрузки страницы, появится опция: Очистка кеша и жесткая перезагрузка
Это очень удобный способ очистить кэш и заставить браузер загрузить самую актуальную версию вашего сайта
➡️ @FrontendPortal | #tip
Новый способ стилизовать гэпы в CSS
В Chrome 139 и Edge 139 завезли gap decorations — теперь можно напрямую стилизовать отступы между ячейками в гридах и флексах. Без костылей с псевдоэлементами и border
В игре новая пачка свойств column-rule-*, row-rule-*. Да, синтаксис не из самых очевидных, но зато гибкости вагон.
Теперь рисовать таблички, тетрадки, судоку и прочие «сетчатые» интерфейсы — станет сильно проще и приятнее
Пока что фича за флагом или в Origin Trial.
Потыкать демки можно тут:
https://microsoftedge.github.io/Demos/css-gap-decorations/playground.html
Подробнее в блоге:
https://developer.chrome.com/blog/gap-decorations
➡️ @FrontendPortal | #CSS
7 дней бесплатного обучения фронтенду, которые не сделают из новичка опытного прогера и не устроят на работу…
Зато покажут, как, даже не имея опыта в программировании:
1. Сверстать качественный веб-сайт на HTML + CSS;
2. Оживить страницу с помощью JavaScript;
3. Понять фронтенд-фреймворк Angular;
4. Подключить Backend и загрузить сайт на хостинг.
А главное, там можно пообщаться с экспертами и получить совет по доработке своего проекта.
👉 Смотри, пробуй
Стартуем завтра.
Новый эффект от Apple, воссозданный на вебе с помощью HTML, CSS и SVG-фильтров
Для тех, кто пропустил: Apple представила новый дизайн — «Жидкое стекло».
Энтузиасты уже воссоздали эффект подложки с помощью HTML, CSS и SVG-фильтров
Работает в Chrome, но, иронично, не в Safari 😅
https://codepen.io/Mikhail-Bespalov/pen/MYwrMNy
➡️ @FrontendPortal
Дэн Абрамов недавно выкатил годную статью о новом способе передачи данных с сервера — Progressive JSON
Если коротко: это когда JSON едет с сервера не целиком, а разбивается на куски и отправляется по мере готовности. Таким образом, мы можем начать рендер раньше, не дожидаясь всех данных. Да, прямо как Progressive JPEG, где сначала мыльцо, потом чёткость
Т.е., сначала прилетает каркас с заглушками:
{
"imageUrl": "$1",
"title": "$1",
"comments": "$3"
}
Годная JS-либа для реализации drag-and-drop списков — Sortable
Живёт уже не первый год, проверена временем и продом. Поддерживает перетаскивание элементов как внутри одного списка, так и между несколькими. Работает на нативном Drag and Drop API
Простой и читаемый API, никаких зависимостей. Поддерживает анимацию при перетаскивании, работает на десктопах и тач-устройствах. Совместима с большинством фреймворков
➡️ @FrontendPortal
Как добавить эффект буквицы всего двумя строками CSS
Примечание: В Firefox это работает только с префиксом вендора -webkit-initial-letter
Селектор ::first-letter можно использовать не только для задания свойства initial-letter, но также для добавления отступов, изменения цвета или настройки шрифта
➡️ @FrontendPortal | #CSS