27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Если вы откроете 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 — быстрее фиксим и переотправляем.
Нашёл огненный опенсорс инструмент для конвертации файлов прямо в браузере.
Никакой рекламы, лимитов по размеру и заморочек — просто drag-n-drop и одна кнопка. Понимает любые популярные форматы (изображения, аудио, доки) и даже пакетную обработку тянет на отлично.
Код полностью открыт — можно развернуть у себя или сразу потыкать онлайн-демку: https://vert.sh/
➡️ @FrontendPortal | #resourse
HTML продолжает отбирать работу у JS
Теперь закрывать модалки можно прямо через HTML. Новый атрибут closedby в <dialog> управляет способом закрытия диалогов юзером
🔸closedby="none" — юзер ничего не закроет сам
🔸closedby="closerequest" — закрывается при нажатии клавиши ESC (или другого триггера закрытия)
🔸closedby="any" — модалка закрывается по клику снаружи или ESC
Выглядит бодро, но пока эксперименталочка
➡️ @FrontendPortal | #HTML
🌐 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
Друзья, привет! 👋
Хочу посоветовать вам очень полезный Telegram-канал — That's IT. Его ведёт Сергей — тимлид с 11-летним опытом, который сам внедряет ИИ в продукты, делится тем, что работает на практике, и помогает другим зарабатывать с помощью ИИ.
На канале Сергея вы найдёте:
— Чёткие инструкции по работе с нейросетями
— Подборки лучших инструментов для автоматизации и креатива
— Бесплатные гайды и видеоуроки
— Реальные кейсы внедрения ИИ, которые дают результат
Никакой воды — только практический опыт и контент, который можно применить прямо сегодня. Сергей ежедневно помогает своим клиентам автоматизировать процессы с помощью ИИ, и делится этими фишками с подписчиками.
Если вы хотите быть в теме и использовать нейросети с умом — обязательно загляните 👇
That's IT | Сергей Фролов
Мне нужно сделать статическую лендинговую страницу. Установлю React, Angular, Vue, использую микро-фронтенды, микросервисы и выполню npm install ещё для 1500 зависимостей.
➡️ @FrontendPortal | #memes