27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Нужно быстро проверить, какие фичи 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
Ещё одна свежая фича в Chrome DevTools — с помощью Gemini (это ИИ-моделька гугла) можно править CSS прямо в Elements и сразу сохранять изменения в исходники
Никакого копипаста между браузером и редактором. Внес правку — она тут же в проекте. Плюс — можно тестить на лету
Годнота 👍
➡️ @FrontendPortal
Chrome 137 подъехал. В CSS добавили функцию if. Да-да, условные конструкции прямо в стилях 😧
Ещё из интересного — завезли reading-flow и reading-order. Теперь можно управлять таб-навигацией в flex и grid без костылей. Это решает старую проблему в макетах, когда порядок фокуса может не совпадать с визуальным расположением элементов
Плюс WebAssembly теперь понимает промисы через API JSPI
Мелкие ништяки: изоляция Blob URL по storage key, добавлена поддержка offset-path: shape() и float-пикселей в Canvas
Подробнее: https://developer.chrome.com/blog/new-in-chrome-137
➡️ @FrontendPortal
😄 Как связать браузер и локальное оборудование? Какие архитектурные компромиссы нужно учитывать, чтобы по клику в веб-интерфейсе запускалось приложение на «железе» пользователя, а результаты шли обратно на сервер?
На эти вопросы в своей новой статье уже ответил наш эксперт Зураб Гостохов! В ней ты найдёшь не только теорию, но и практику — с кодом, схемами реализации, нюансами развёртывания и регистрации приложений, а также советами по дальнейшему развитию архитектуры 🔥
Реклама. АО "НСПК". ИНН 7706812159. erid: 2W5zFJKTVw6
Проблема: Вам нужно объявить типы в обычных .js файлах.
Решение: Используйте комментарии JSDoc.
Вот как это сделать.
➡️ @FrontendPortal | #tip
Новая фишка в Chrome DevTools — теперь можно аннотировать перформанс-трейсы с помощью Gemini
Разрабы из Google прикрутили ИИ прямо в инструменты производительности: кликаешь два раза по ивенту в Main-треке, жмёшь «Generate label», и Gemini на основе стека вызовов и контекста подсказывает, что там вообще происходит
Фича полезная, особенно для глубокого разбора. Стоит попробовать ✌️
Работает с версии Chrome 137
➡️ @FrontendPortal | #tip
10 полезных апдейтов в вебе с Google I/O 2025
На свежей конференции Google I/O 2025 Google напомнили о пачке свежих фич
1. CSS-карусели без JS — scroll buttons и scroll markers в Chrome 135
2. Interest Invoker API: декларативные поповеры и тултипы
3. Несколько встроенных AI API на базе моделей вроде Gemini Nano теперь поддерживают мультимодальность в Prompt API
4. Клиентский AI теперь работает в связке с Firebase и Gemini Developer API для гибридных решений
5. AI в DevTools — Gemini подскажет, что не так со стилями, производительностью, сетью и исходниками. И может прям в Elements применять фиксы.
6. Апгрейд DevTools Performance: теперь там сразу Core Web Vitals (локальные и от реальных пользователей), встроенный Lighthouse и подсказки от Gemini
7. Baseline интегрирован в VSCode и ESLint — сразу видишь, какие фичи доступны в браузерах.
8. Полный обзор поддержки веб-функций в Web Platform Dashboard
9. Тестовая версия упрощённого входа с Credential Manager
10. Отмена отправки Chrome Extensions — быстрее фиксим и переотправляем.
Находка для тех, кто хочет встроить терминал прямо в браузер
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
Math.random() пора на пенсию
В JavaScript появилась новая предложенная возможность — добавить пространство имён Random в язык
Это новый глобальный объект Random с более чем 20 методами для работы со случайностью в JS — включая перемешивание, выборку, взвешенный выбор, генераторы с сидом и т. д.
Предложение на днях достигло 1 этапа в TC39: https://github.com/tc39/proposal-random-functions
➡️ @FrontendPortal
Вышел Angular v20
‣ Стабилизация API реактивности и инкрементальной гидратации
‣ Интеграция с Chrome DevTools
‣ Улучшенная проверка типов, упрощённый гайд по стилю и другое
‣ RFC на официального маскота Angular
‣ И многое другое
Подробнее: https://goo.gle/angular-v20-blog
➡️ @FrontendPortal
Наткнулся на полезняшку для тех, кто не любит тащить весь репозиторий ради пары файлов — GitZip
Расширение для браузера, которое позволяет скачивать отдельные файлы или папки из любого GitHub-репо
Доступно в Chrome, Edge и Firefox
➡️ @FrontendPortal | #resourse
Мультиколонки
Основная идея мультиколонок заключается в том, что вы можете взять фрагмент содержимого и поместить его в несколько колонок, как в газете
.article {
// Шорткат columns даёт возможность указать значения для свойств column-count и column-width одновременно, задав количество и ширину колонок
columns: 2 200px;
column-gap: 25px;
}
.title{
// Свойство column-span позволяет элементу растянуться на несколько колонок
column-span: all;
}
4 часа нетворка и супер полезных докладов для фронтендеров… Звучит, как идеальный вечер вторник🚀
Приходите 3 июня на Frontend meetup, который пройдёт в московском офисе Авито. Обещают доклады про:
- внедрение Suspense SSR Architecture в проекты на React;
- генерацию реактивных моделей из GraphQL-схем;
- интеграцию зависимостей (DI) через библиотеку tsyringe;
- а вот эту тему раскрыть не можем! Всё узнаете 3 июня оффлайн.
Только не забудьте зарегистрироваться по ссылке.
Это реально одна из самых впечатляющих штук, сделанных для веба
Знакомьтесь — Horizon Drive, браузерная игра от команды Shopify. Под капотом чистый JS, Three.js и React Three Fiber
Вы не поверите (и проверите), но это жутко залипательно 😳
➡️ @FrontendPortal
TypeScript теперь работает на Go
Команда TS выкатила предварительную нативную версию компилятора на Go для тестирования
Ускорение впечатляющее — до 10x на реальных проектах. Например, в кодовой базе Sentry (~1,5 млн строк) время проверки типов снизилось с 55 до 6,8 секунд.
Чтобы попробовать новую версию, установите её отдельно: npm install -D @typescript/native-preview. После этого используйте tsgo вместо привычного tsc. Когда выйдет полноценный релиз (TypeScript 7), tsc и станет той самой Go-версией. Пока, для удобства тестирования, это отдельный бинарник
Плюс расширение в VS Code: “TypeScript (Native Preview)”. После установки его нужно вручную включить через палитру команд: TypeScript Native Preview: Enable (Experimental)
@IT_Portal