27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Искал компонент с мировыми часами и наткнулся на этот слайдер World Clock от Jon Kantner.
Простота, плавное взаимодействие и визуальный дизайн делают его очень приятным и понятным буквально с первого взгляда.
Однозначно отличный источник вдохновения :)
https://codepen.io/jkantner/pen/pvjNNVz
➡️ @FrontendPortal
Разберём фронтенд слой за слоем 🥐
30 сентября встречаемся на VK Frontend Meetup SPB. Разберёмся в том, что видит пользователь, а дальше перейдём к архитектуре, инструментам и процессам, которые помогают масштабировать разработку.
В программе 3 доклада:
🔵Как в MAX разработали собственную архитектуру для стабильных анимированных стикеров
🔵Как в Одноклассниках учат AI работать с реальной дизайн-системой и существующими компонентами
🔵Как в Почте Mail запускают 300 промо в год
После докладов — фуршет и неформальное общение. Можно будет задать вопросы спикерам, обсудить выступления и поспорить о том, какой слой фронтенда самый сложный.
🗓30 сентября, 19:00
📍Санкт-Петербург, офис VK у Красного моста
Встреча пройдёт только офлайн, записей докладов не будет.
Регистрация — по ссылке
Свойство columns помогает разделить текст или элементы списка на несколько колонок.
Вы можете контролировать как:
- Количество колонок
- Ширину каждой колонки
Здесь мы использовали "auto" для количества колонок и ширину 10rem.
Это заставляет браузер автоматически выбирать количество колонок в зависимости от доступного размера, так чтобы ширина каждой колонки была близка к 10rem.
Это полезно для контента, подобного новостным статьям, и, как показано в этом примере, для ссылок в подвале.
➡️ @FrontendPortal | #CSS
Универсальная подсветка синтаксиса прямо в <textarea>
В 2026 году, начиная с Chrome 152+, можно подсвечивать синтаксис разных языков программирования прямо внутри одного <textarea>, результат получается вполне достойным.
Для этого используется новый Web API OpaqueRange.
Работает с <textarea> и даже с <input>.
Демо: https://gpu-lexer-textarea.netlify.app
➡️ @FrontendPortal
С оплатой ChatGPT, Claude и других зарубежных сервисов всё ещё квест, если под рукой только российская карта.
У Ape Wallet есть решение попроще: выпускаете виртуальную Mastercard прямо в Telegram, пополняете её в USDT и оплачиваете нужные подписки.
Карту можно добавить в Apple Pay / Google Pay и использовать для покупок за рубежом. Плюс внутри кошелька есть покупка/продажа крипты и оплата по СБП в России.
Если зарубежные подписки — регулярная боль, можно забрать себе как рабочий вариант.
Карта открывается прямо в Ape Wallet 😎
Автозаполнение инпута
HTML-элемент <datalist> содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>
- Различия между <select> и <datalist> :
Кроме функции автодополнения элемента <datalist>, основное отличие между <select> и этим тегом в том, что в элементе <select> нельзя выбрать или указать значение не из списка предлагаемых
➡️ @FrontendPortal | #HTML
CSS Flex развивается! Появилось новое значение для flex-wrap
С balance можно избежать ситуации, когда отдельные элементы остаются висеть в строке, и более равномерно распределять элементы по рядам
Отлично подходит для гридов с карточками, галерей и адаптивных лейаутов.
➡️ @FrontendPortal
На Stepik вышла программа «DevOps с нуля: от Linux до Kubernetes»
Это комплексная программа из 5 практических курсов по ключевым технологиям DevOps: Linux, Git, Docker, GitLab CI/CD, Kubernetes
Вы последовательно пройдёте путь от работы в Linux и управления кодом через Git до контейнеризации приложений, настройки CI/CD-пайплайнов и развёртывания в Kubernetes.
Что вы изучите:
• работу с Linux и командной строкой
• Git и контроль версий в реальных проектах
• создание Docker-образов и запуск контейнеров
• автоматизацию сборки, тестирования и деплоя в GitLab CI/CD
• развёртывание и управление приложениями в Kubernetes
• сети, хранилища, конфигурации и секреты
• диагностику инфраструктуры и автоматизацию рутинных задач
... и многое другое
PORTAL20 стоимость всей программы составит 10 392 ₽.
Bun 1.4 уже здесь. Полностью переписан на Rust.
✓ Bun.Image — можно попрощаться с sharp
✓ Bun.WebView — браузер без Playwright
✓ Bun.markdown и Bun.cron
✓ Меньше зависимостей и выше производительность
➡️ @FrontendPortal
CSS наконец-то позволяет анимировать элементы при их первом появлении@starting-style теперь входит в Baseline и доступен с августа 2024 года. Уже 90% глобального покрытия!
Раньше transition не срабатывал при первом обновлении стилей элемента – приходилось городить хаки на JavaScript
Теперь стартовое состояние можно задать прямо в чистом CSS. Просто, мощно и давно пора 💪
➡️ @FrontendPortal
25 августа встречаемся на Agentic Coding Meetup в Сбер.Среде и в онлайне⚡️
AI-агенты уже умеют писать код. Но самое интересное начинается дальше — когда вместе с инструментами меняются роли инженеров, команды и сам процесс разработки.
🔥 Поговорим о том, как agentic coding выглядит на практике: новые инженерные роли и модели команд, SDD и трансформация процессов, coding-агенты и инструменты, подходы к постановке задач и управлению контекстом, а также опыт внедрения AI в разработку больших технологических компаний.
⏳ Начало в 17:00, встреча очных гостей — в 16:00.
Количество очных мест ограничено — успейте зарегистрироваться!
Сегодня вышел Firefox 154
В нём появилась поддержка давно ожидаемых CSS-возможностей:
① sibling-index() и sibling-count() — удобно использовать, чтобы создавать эффект разбросанных элементов.
② text-box — полезно для вертикального и горизонтального выравнивания текста в кнопках и других элементах.
Теперь эти возможности доступны во всех браузерах.
➡️ @FrontendPortal
⚡️⚡️HolyjS снова собирает JS-разработчиков. Уже 10-ый год подряд!
Уже десять лет мы вместе с JS-сообществом следим за тем, как меняется экосистема, разбираемся в новых технологиях и собираем инженеров, которым интересно копать глубже и смотреть на разработку с разных ракурсов.
🎇В программе нового сезона — глубокие технические доклады про язык и его экосистему, производительность, архитектуру, Node.js, фреймворки и инструменты разработки. И, конечно, не будем делать вид, что ИИ не существует: поговорим о том, как его уже сегодня применяют во фронтенде и какие инженерные задачи он помогает решать на практике.
Лучший способ отметить десятилетие HolyJS — сделать еще одну сильную техническую конференцию.
Поэтому главное, как всегда, — программа.
Но без юбилейных сюрпризов тоже не обойдется: готовим несколько ностальгических активностей, чтобы вместе вспомнить самые яркие моменты HolyJS за эти годы.
🗓 23–24 октября HolyJS пройдет в Санкт-Петербурге и онлайн.
Программа постепенно пополняется новыми докладами.
Билеты уже в продаже: можно купить индивидуальный или оформить корпоративное участие для команды. Все подробности — на сайте.
👩💻 Всем программистам посвящается!
Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:
Выбирай своё направление:
👩💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
👩💻 IT Новости — t.me/it_ready
🤖 AI & ML — t.me/neuro_ready
👩💻 Frontend — t.me/frontend_ready
👩💻 C/C++ — /channel/cpp_ready
👩💻 C# & Unity — t.me/csharp_ready
👩💻 Linux — t.me/linux_ready
👩💻 Java — t.me/java_ready
📖 IT Книги — t.me/books_ready
📱 JavaScript — t.me/javascript_ready
🖼️ DevOps — t.me/devops_ready
🖥 Design — t.me/design_ready
📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!
Откопал крутейший репозиторий с аккуратно сделанными анимированными иконками, которые можно сразу использовать в своих проектах без лишней возни
https://github.com/pqoqubbw/icons
➡️ @FrontendPortal | #resourse
Совет по CSS: Нечувствительный к регистру селектор атрибутов
Мы можем добавить i к селектору атрибутов, чтобы он выбирал элементы с этим значением атрибута без учета регистра
➡️ @FrontendPortal | #tip by Shripal Soni
Ищем новичков во frontend-разработке и вёрстке сайтов.
Айтилогия запускает бесплатное обучение, где будет:
1. Практика на реальном заказе ценой до 10 000₽.
2. Разбор работ куратором.
3. Задачи от Fullstack-разработчика с 12-летним опытом.
4. Именной сертификат.
И главное — ты почувствуешь уверенность.
Потому что увидишь, что выполнить заказ на frontend-проект тебе по силам.
👉 Приходи на бесплатное обучение и зови с собой друзей
🔥 С 2019 Айтилогия стабильно помогает с обучением, практикой, зарабатывать на фрилансе и проходить собеседования.
В CSS появится свойство size – шорткат для задания width и height
✓ size: 100px → одинаковые width и height
✓ size: 200px 80px → ширина и высота
✓ Поддерживает те же единицы измерения, что и width и height
Предложение больше 10 лет оставалось без движения, и наконец его приняли.
Safari уже реализовал поддержку size за экспериментальным флагом
➡️ @FrontendPortal
React 19.3 уже доступен! И в нём много интересного:
✓ Нативные View Transitions
✓ Новый browser()
✓ Использование Context в Server Components
✓ Trusted Types и Fragment Refs
→ https://react.dev/blog/2026/09/09/react-19-3
➡️ @FrontendPortal
Релиз прошёл. Через неделю в API находят SQLi.
AppSec переносит безопасность туда, где уязвимость ещё можно исправить в процессе разработки.
AppSec-инженер в Codeby Academy — 7 месяцев практики на реальных приложениях и инструментах, которые используют в продакшене.
Внутри курса:
⏺️ разбор уязвимостей OWASP на реальных приложениях
⏺️ SAST/DAST инструменты, которые используют в боевых командах
⏺️ Threat Modeling и Secure SDLC на живых кейсах
За 7 месяцев пройдёте 13 модулей — от поиска уязвимостей в коде до внедрения AppSec в процесс разработки▶️300 ак.ч.▶️1–2 живых вебинара в месяц с автором
Запись до 3 сентября
Посмотреть программу и записаться
Знаете ли вы, что кнопку отправки формы можно размещать вне самой формы?
В большинстве случаев мы размещаем кнопку отправки внутри формы, и так правильно. Но иногда — из-за особенностей вёрстки или по другим причинам — логичнее вынести кнопку отправки за пределы тега <form>.
Мы можем легко связать кнопку с формой, используя атрибуты form и id.
Таким же способом, при необходимости, можно ассоциировать с формой и другие элементы управления, такие как textarea, checkbox и т.п.
➡️ @FrontendPortal | #tip by Shripal Soni
pnpm 12 вышел!
Один из лучших пакетных менеджеров для JavaScript-проектов.
✓ Безопасный по умолчанию
✓ Полностью переписан с нуля на Rust
✓ До 3× быстрее при чистой установке
→ https://pnpm.io/blog/releases/12.0
➡️ @FrontendPortal
Преобразуй свой TypeScript-код в визуальные диаграммы
Этот опенсорсный инструмент позволяет вставить любой TS-файл и мгновенно превратить его в аккуратную визуальную диаграмму всех ваших интерфейсов, типов, классов и связей
Отлично подходит для обучения, понимания новой кодовой базы и объяснения вашей архитектуры кому-то без необходимости что-либо рисовать вручную 👍
GitHub: tsdiagram
➡️ @FrontendPortal | #resourse
Совет по Chrome Dev Tools: Инспекция стилей плейсхолдера
По умолчанию Chrome DevTools не отображает стили ::placeholder при инспекции элементов.
Можно включить настройку "Show user agent shadow DOM", чтобы отображать shadow DOM браузера, генерируемый для различных встроенных элементов, таких как <input>, <progress>, <video> и др.
Мы можем инспектировать эти элементы shadow DOM, созданные user agent'ом, чтобы просматривать/редактировать стили плейсхолдера, ползунка у range input и т. п.
➡️ @FrontendPortal | #tip by Shripal Soni
Определяем, когда пользователь переключает вкладки браузера и меняем favicon
Этот трюк можно реализовать с помощью Page Visibility API
Page Visibility API — это API браузера, который проверяет видимость страницы. Он помогает определять, скрыта или свернута текущая страница, и тем самым позволяет контролировать ее поведение и использование ресурсов
Ищем новичков во frontend-разработке и вёрстке сайтов.
Айтилогия запускает бесплатное обучение, где будет:
1. Практика на реальном заказе ценой до 10 000₽.
2. Разбор работ куратором.
3. Задачи от Fullstack-разработчика с 12-летним опытом.
4. Именной сертификат.
И главное — ты почувствуешь уверенность.
Потому что увидишь, что выполнить заказ на frontend-проект тебе по силам.
👉 Приходи на бесплатное обучение и зови с собой друзей
🔥 С 2019 Айтилогия стабильно помогает с обучением, практикой, зарабатывать на фрилансе и проходить собеседования.
HTML Tip: Самый простой способ отключить несколько элементов формы
Мы можем установить атрибут disabled на элемент <fieldset>, чтобы автоматически отключить все вложенные элементы формы.
➡️ @FrontendPortal | #tip by Shripal Soni
Более 200 градиентных фонов для сайта или приложения
✓ Предпросмотр в реальном времени и настройка прямо в браузере
✓ Экспорт в CSS, Tailwind или переменные
✓ Скачивание в PNG или SVG
✓ Готовый промпт для ИИ
→ https://auragradients.vercel.app
➡️ @FrontendPortal