🚀 Быстрое улучшение Lighthouse: content-visibility Хотите ускорить рендер длинных страниц без костылей? Используйте CSS-свойство: .card { content-visibility: auto; } Что делает: - Браузер не рендерит невидимые элементы (за пределами вьюпорта); - Сохраняет размер блока для скролла; - Экономит ресурсы → First Paint быстрее , Lighthouse выше . Где применять: - Списки (товары, посты); - Длинные страницы; - Виджеты ниже…
137 просмотров
🚀 Подборка полезных IT каналов в Max Системное администрирование, DevOps 📌 https://max.ru/i_odmin Все для системного администратора https://max.ru/bash_srv Bash Советы https://max.ru/sysadminof Книги для админов, полезные материалы https://max.ru/i_odmin_book Библиотека Системного Администратора https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др. https://max.ru/tipsysdmin Типичный Сисадмин…
246 просмотров
9 октября 2026
Реклама
Оригинал
5 офферов получили наши ребята на прошлой неделе Оффер на 4,2k долларов Оффер на 5k евро Оффер 260k рублей Оффер на 210k рублей Оффер на 220k рублей И еще 19 за сентябрь... а за лето более 50... и у тебя получится! 👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров. Я…
422 просмотров
Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯 Современные браузеры уже поддерживают :has() — “родительский селектор” , который раньше приходилось эмулировать на JS. Пример: показать рамку у карточки, если внутри есть картинка: .card:has(img) { border: 2px solid #4ade80; } Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено: .input-wrapper:has(input:focus) label { color: #3b82f6; }…
381 просмотров
🔥 Трюк с style в React, который упростит работу с динамическими стилями Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей : <div style={{ padding: '16px', ...(isError && { border: '1px solid red' }), ...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }), }} > Hello! </div> 📌 Что тут происходит: * ...(условие && { стиль }) добавит…
492 просмотров
💡 HTML Tip: Скачивание файлов одной строкой Хочешь, чтобы пользователь скачивал файл по клику? Просто добавь атрибут download к ссылке: <a href="/images/logo.svg" download="codewithshripal-logo.svg">Download File</a> 📌 Что важно знать: – download — указывает браузеру, что нужно не открыть файл, а скачать его – Можно задать имя файла прямо в атрибуте – Работает только с ресурсами того же источника (same-origin) –…
670 просмотров
Как работает комбинация clip + mask: - маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate) - clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑🍳 📲 Мы в MAX 👉 @frontend_1
775 просмотров
1 октября 2026
Реклама
Оригинал
ИИ-система может отлично решать задачи бизнеса, но при этом оставаться уязвимой. Утечки данных, атаки на модели, небезопасные сценарии работы агентов — проблемы, которые проще предупредить на этапе проектирования, чем исправлять после запуска. На открытом уроке разберём, как создавать ИИ-системы с учетом требований безопасности с самого начала. Вы узнаете, какие угрозы характерны для LLM, как применять принципы…
767 просмотров
29 сентября 2026
Оригинал
Совет по CSS 💡 Мы часто используем кнопки действий, которые появляются при наведении, чтобы интерфейс выглядел чище. Но пользователи, работающие только с клавиатурой или сенсорными экранами, не могут вызвать наведение, из-за чего такие кнопки становятся недоступными. Вот как это исправить 📲 Мы в MAX 👉 @frontend_1
645 просмотров
27 сентября 2026
Оригинал
📌 Подборка полезных функций, которые пригодятся продвинутым frontend-разработчикам при работе с UI, производительностью и архитектурой 1. Throttle Контролирует частоту вызова функции, полезно для scroll/resize-событий. function throttle(fn: Function, delay: number) { let last = 0; return (...args: any[]) => { const now = Date.now(); if (now - last >= delay) { last = now; fn(...args); } }; } 2. Debounce Откладывает…
601 просмотров
