27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
CSS-переменные незаметно обнуляли стилиrevert-rule теперь входит в Baseline и доступен с сентября 2026 года (Chrome 148, Firefox 150, Safari 27).
Раньше, если написать padding: var(--pad) без заданной переменной --pad, отступ сбрасывался до padding: 0.
Поэтому приходилось копировать значение по умолчанию в каждый fallback.
Теперь можно откатиться к значению, которое было определено каскадом CSS.revert → возврат к стилям браузераrevert-layer → возврат к предыдущему слою каскадаrevert-rule → как будто текущего CSS-правила вообще не существует
Также работает вместе с if() в Chrome:if(style(--x: on): red; else: revert-rule)
MDN: developer.mozilla.org/en-US/docs/Web
➡️ @FrontendPortal
🚀 Мок-собеседование с Senior Frontend из бигтеха за 2000 ₽ вместо 7900 ₽
Да, это не просто еще один созвон, где тебе задают вопросы. Это возможность проверить себя до реального собеса и понять, что мешает выйти на следующий грейд 😎
Мок пригодится, если ты ищешь работу, хочешь вырасти в грейде или проверить свои знания перед техническим интервью
Что внутри:
📂 60 минут технических вопросов и задач, которые встречаются на собеседованиях
📂 Подробный фидбек: что получилось хорошо, где потерял баллы и что стоит подтянуть
Принес вкуснятину по SVG: интерактивный справочник по самым популярным и/или интересным частям спецификации SVG
Внутри: что такое viewBox, как работает clipPath, на что влияют группы aka g, что такое use и symbol, как использовать маску и так далее. Все интерактивно и наглядно 👍
Забираем здесь
➡️ @FrontendPortal | #resourse
JavaScript продолжает развиваться! Готовится поддержка объектов со сравнением по значению.
Предложение Composites перешло на Stage 2 в TC39.
Два объекта с одинаковым содержимым смогут быть равны при сравнении через ===, даже если они созданы отдельно друг от друга.
Сравнение по значению также будет работать в Set и при использовании объектов в качестве ключей Map.
➡️ @FrontendPortal
CSS избавился от ещё одного костыля для центрированияalign-content: center теперь работает и с обычными блочными элементами. Без flex и grid.
Поддерживается всеми основными браузерами с апреля 2024 года (Chrome 123, Firefox 125, Safari 17.4). С 16 октября доступно практически повсеместно.
Раньше для вертикального центрирования одного элемента приходилось превращать контейнер во flex-колонку.
Теперь достаточно одной строки
➡️ @FrontendPortal
Разработка в гибриде
В Yandex Cloud развивают предложения для создания гибридного контура.
Cloud Interconnect помогает безопасно связать on-premises, облачную инфраструктуру и сторонние площадки, а VPC Private Endpoint обеспечивают безопасное соединение ресурсов в облаке без выхода в Интернет.
Дополнительные нагрузки можно переносить на выделенный контур, который представлен BareMetal Extend - это готовая инфраструктура с виртуализацией или Kuberbetes на базе выделенных серверов. Таким образом данные можно хранить и обрабатывать безопасно и изолированно от публичного облака.
Большое обновление представлено в Stackland - платформе, которая развертывается локально в контуре компании. Появились новые PaaS, за счет которых можно создать полноценную платформу данных. Для этого есть все необходимое
В облачном Object Storage появился Intelligent Tiering - автоматически распределяет данные между хранилищами с учетом того, как часто к ним обращаются. Редко используемые данные переносят в более холодный класс и за счет этого оптимизируют расходы.
В итоге вычисления можно гибко распределять под текущие задачи.
@FrontendPortal
Идеальное центрирование, margin: auto у flex-контейнера
➡️ @FrontendPortal | #CSS
CSS-советcontrast-color() позволяет браузеру самому подобрать цвет текста для кнопки.
.button {
--bg: hsl(55 88% 52%);
background: var(--bg);
color: contrast-color(var(--bg));
}
⚡️ Полный стек специалиста по кибербезопасности в одном бандле
Хватит собирать знания по крупицам. Мы объединили 5 флагманских прикладных курсов CyberYozh Academy в единую экосистему.
Все ключевые инструменты для работы в безопасности и автоматизации:
▪️ Базы данных: SQL для хакера
▪️ ОС и инфраструктура: Linux CyberPunk (с официальным дипломом сисадмина)
▪️ Практический пентест: HackerPoint + HackerPoint (Blue vs Red Team)
▪️ Кодинг и автоматизация: AI-помощники на Python
Вместо покупки разрозненных курсов по отдельности (~250 000 ₽), вы забираете полный комплект за 50 000 ₽.
⚠️В открытом доступе на сайте этого бандла нет - предложение доступно только по прямому запросу.
🦔Отправь промокод Frontend в чат с менеджером, чтобы закрепить за собой скидку и узнать подробности:
👉@cyacademy_support
Теперь ИИ-агенту можно поставить задачу прямо в обсуждении GitLab
В SourceCraft появилась возможность подключать автономных ИИ-агентов к рабочим процессам команды. Агент работает под отдельной учетной записью: получает задачу в треде, самостоятельно пишет или проверяет код, а результат возвращает разработчику на ревью.
Если по ходу работы не хватает информации или требуется согласование, агент сам обращается к команде.
Можно подключать и собственных агентов, например созданных в Yandex AI Studio.
У меня есть приём, который похвалил один сильный CSS-разработчик из-за рубежа: задавать border-radius вот так — border-radius: calc(sign(100lvw - 100%) * 40px).
Когда элемент растягивается на весь экран, скругление углов автоматически убирается.
➡️ @FrontendPortal | #CSS
Обрезка текста для одной единственной строки
Когда мы хотим, чтобы наш текст был на одной линии (на прямой линии). Мы можем добиться этого, установив свойство white-space на значение nowrap. Если текст длинный, а ширина контейнера например 300px, тогда текст будет просто выходить за пределы контейнера, хоть и по прежнему будет в одну строку.
Чтобы его обрезать можно использовать следующие свойства:
.truncated-text {
width: 300px;
overflow: hidden; // скрывает все что выходит за зону контейнера
text-overflow: ellipsis; // заменяет скрытый текст на многоточие
white-space: nowrap; // текст в одну строку
}
Проверяем правописание
Атрибут spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте.
Атрибут применяется к тегам input или textarea, а также к элементам, которым задан атрибут contenteditable
Можно с помощью псевдоэлемента ::spelling-error стилизовать неправильно написанный текстовый сегмент (поддержка 86.01%)
::spelling-error {
background-color: yellow;
}
👩💻 Всем программистам посвящается!
Вот 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
В честь китайского Дня программиста разработчики ZCode бесплатно раздают 500 миллионов токенов для моделей GLM-5.3 и GLM-5.3-Flash.
Из них 200 миллионов предназначены для GLM-5.3, а ещё 300 миллионов — для GLM-5.3-Flash.
Получить токены могут даже пользователи бесплатного тарифа. Всего доступно 200 тысяч пакетов, которые раздаются в порядке очереди.
Акция действует с 23 по 26 октября. Использовать полученные токены можно исключительно внутри ZCode, но не через API.
Если у вас установлен ZCode, обновитесь и проверьте. 😏
У shadcn теперь есть целая коллекция UI-компонентов для медицины и биологии
Она называется OrganUI и позволяет добавлять интерактивные медицинские и научные визуализации в интерфейсы и приложения.
— 3D-визуализации органов
— Интерактивные анатомические карты
— Визуализации ДНК, молекул и клеток
— Графики ЭКГ и просмотрщики медицинских изображений
— Готовые UI-блоки для интерактивного изучения анатомии
github.com/organui/organui
➡️ @FrontendPortal
💬👨💻🐍💩🤖🤖🐧👩💻🧑💻👋🦀
Дождались! Ребята сделали крутейший канал про IT новой эпохи
Нейросети, ИИ-агенты, вайбкодинг, вайбхакинг и новые инструменты уже меняют привычный мир технологий.
Там разбирают эти изменения и другие интересные IT-темы на простых картинках и понятном языке, а еще делятся полезными ресурсами и свежими новостями
Подписывайтесь: @IT_Portal
Виртуальных агентов обсудят на митапе «Русское техно 2» от MWS 23 октября. ⚡ Успейте зарегистрироваться.
В программе доклады и дискуссии по темам:
— Как построить control plane для персональных ИИ-агентов на Kubernetes.
— Как построить агентный производственный процесс в связке с Harness.
— Подходы к управлению командами с ИИ-агентами. Как меняются метпроцессы внутри команды?
— Когда ИИ-агент становится экономически оправданным.
А также участников ждет битва промптов и нетворкинг.
Когда: 23 октября
Формат: офлайн в Москве и онлайн
Зарегистрироваться
POV: используешь GPT-6 Astra, чтобы поменять цвет кнопки
➡️ @FrontendPortal
CSS + браузеры только что убрали необходимость ещё в одном JavaScript-костыле
Вы читаете страницу. Выше подгружается изображение. Контент резко сдвигается, и вы теряете место, на котором остановились.
В Safari 27 по умолчанию включили scroll anchoring, поэтому теперь все основные браузеры удерживают текущую позицию на странице. Никакого JS для восстановления скролла
Вот что ещё теперь можно спокойно использовать в проде 👆
➡️ @FrontendPortal
Claude Opus 5.5 отрисовал каждый кадр этой анимации на JavaScript
Вот «как работают браузеры» за 40 секунд.
➡️ @FrontendPortal
Node.js 26.10 — нативная поддержка throttle/debounce
Вот этого я не ожидал
Покойся с миром, lodash.
Когда уже предложение в TC39?
Релиз:
https://nodejs.org/en/blog/release/v26.10.0
Документация:
https://nodejs.org/docs/latest/api/util.html#utildebouncefn-wait-options
➡️ @FrontendPortal
Некоторые забавные вещи, о которых вы, возможно, не знали, можно делать с помощью тега <a> 😌
➡️ @FrontendPortal | #CSS
Chrome 154 — адаптивное изменение размера iframe
Теперь <iframe> сможет менять размер в зависимости от размеров встроенного в него документа.
Разве не об этом авторы виджетов и расширений мечтали годами? 😆
Вместо того чтобы использовать postMessage({resize})
https://bram.us/2026/09/23/responsive-iframes/
➡️ @FrontendPortal
🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00
ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться.
Как это будет:
📂 Александр Дмитриев, разработчик из известного международного финтеха, ex-VK, ex-Ozon проведет вайбкодинг секцию разработчику-добровольцу;
📂 Александр будет задавать реальные вопросы с секций, которые проводил сам и комментировать ответы;
📂 В конце можно будет задать любой вопрос Александру.
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
HTML забрал у JavaScript ещё одну задачуcommand и commandfor входят в Baseline с декабря 2025 года
Раньше, чтобы открыть диалоговое окно, нужно было использовать addEventListener + showModal().
Теперь можно так
➡️ @FrontendPortal
Искал компонент с мировыми часами и наткнулся на этот слайдер 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 у Красного моста
Встреча пройдёт только офлайн, записей докладов не будет.
Регистрация — по ссылке