Frontend разработчик

🪄 Трюк: «Скелетон» без JS При загрузке данных часто ставят Spinner. Но современный UX → Skeleton (серый шаблон контента). И делать его можно без JS!

.skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  100% {
    background-position: -200% 0;
  }
}

📌 Как использовать: 1. Создаёте div с классом .skeleton вместо контента. 2. Размеры задаёте под будущий элемент (картинка, текст). 3. Меняете на реальные данные после загрузки. Плюсы: - Нет лишнего JS. - Лёгко адаптировать под любую форму. - Современный UI → выглядит «дорого». 📲 Мы в MAX 👉 @frontend_1

Совет по CSS 💡 Используйте табличные цифры для отображения таймеров ✅ https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers 📲 Мы в MAX 👉 @frontend_1

🚀 Быстрое улучшение Lighthouse: content-visibility Хотите ускорить рендер длинных страниц без костылей? Используйте CSS-свойство:

.card {
  content-visibility: auto;
}

Что делает: - Браузер не рендерит невидимые элементы (за пределами вьюпорта); - Сохраняет размер блока для скролла; - Экономит ресурсы → First Paint быстрее, Lighthouse выше. Где применять: - Списки (товары, посты); - Длинные страницы; - Виджеты ниже фолда. ⚠️ Осторожно: не ставьте на элементы с динамическим контентом, где важно мгновенное измерение размеров. Можно добавить contain-intrinsic-size → убрать "скачок" при появлении.

.card {
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

2 строки — и сайт ощущается быстрее ✨ 📲 Мы в MAX 👉 @frontend_1

🚀 Подборка полезных 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 Типичный Сисадмин https://max.ru/channel_win_sysadmin Системный Администратор Windows https://max.ru/channel_linux_admin Linux: Системный администратор https://max.ru/channel_linuxmod Linux https://max.ru/channel_i_linux Системный администратор https://max.ru/channel_devopslib DevOps, SRE, Sysadmin https://max.ru/channel_devops_star DevOps Star (Звезда Девопса) Excel лайфхак 📌 https://t.me/Excel_lifehack Excel лайфхак Английский с нуля 🇬🇧 https://max.ru/UchuEnglish 1C разработка 📌 https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С https://max.ru/channel_DevLab1C 1С:Предприятие 8 Программирование C++📌 https://max.ru/cpp_lib Библиотека C/C++ разработчика https://max.ru/channel_cpp_geek C++ geek Программирование Go📌 https://max.ru/golang_lib Библиотека Go (Golang) разработчика Программирование React📌 https://max.ru/react_lib React Программирование Rust📌 https://max.ru/channel_rust_lib Программирование Python 📌 https://max.ru/python_of Python академия. https://max.ru/BookPython Библиотека Python разработчика Java разработка 📌 https://max.ru/bookjava Библиотека Java разработчика https://max.ru/channel_java_geek Java Geek GitHub Сообщество 📌 https://max.ru/githublib Интересное из GitHub Базы данных (Data Base) 📌 https://max.ru/database_info Все про базы данных Фронтенд разработка 📌 https://max.ru/frontend_1 Подборки для frontend разработчиков Библиотеки 📌 https://max.ru/programmist_of Книги по программированию https://max.ru/proglb Библиотека программиста https://max.ru/bfbook Книги для программистов Программирование 📌 https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 Шутки программистов 📌 https://max.ru/itumor Шутки программистов Защита, взлом, безопасность 📌 https://max.ru/thehaking Канал о кибербезопасности https://max.ru/xakkep_1 Хакер Free Книги, статьи для дизайнеров 📌 https://max.ru/odesigners Статьи, книги для дизайнеров Математика 📌 https://max.ru/Pomatematike Канал по математике https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике Вакансии в IT📌 https://max.ru/progjob https://max.ru/channel_rabotait Мир технологий 📌 https://max.ru/mir_teh Канал для любознательных Городские📌 https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга https://max.ru/mockva_life Свежие новости Москвы https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП https://max.ru/channel_krasnodar_novosty Краснодар Новости https://max.ru/channel_novosibirsk_novosti Новосибирск https://max.ru/channel_samara_novosti Новости Самары https://max.ru/channel_ekaterinburg_novosti Новости Екатеринбурга https://max.ru/channel_kazan_novosti Новости Казани https://max.ru/channel_omsk_novosti Новости Омска https://max.ru/channel_moskva_24 Москва 24

5 офферов получили наши ребята на прошлой неделе Оффер на 4,2k долларов Оффер на 5k евро Оффер 260k рублей Оффер на 210k рублей Оффер на 220k рублей И еще 19 за сентябрь... а за лето более 50... и у тебя получится!

👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.

Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Забирайте в закрепленном сообщении Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY 🏆Статистика по рынку: Июль, Июнь, Май, Апрель, Март Подписывайся 👇 frontend_punks Реклама, erid: 2W5zFGkqG2V ИП Галактионов Тихон Витальевич, ИНН 771618975809

Мини-хак: :has() в CSS — меньше JS для интерактивности 🎯 Современные браузеры уже поддерживают :has() — “родительский селектор”, который раньше приходилось эмулировать на JS. Пример: показать рамку у карточки, если внутри есть картинка:

.card:has(img) {
  border: 2px solid #4ade80;
}

Ещё круче: стилизовать соседний элемент, если внутри инпута что-то введено:

.input-wrapper:has(input:focus) label {
  color: #3b82f6;
}

Зачем это нужно? — Меньше JS → проще поддержка — Новый уровень гибкости для UI Документация: MDN про :has() Пробуйте! Это реально меняет подход к верстке. 📲 Мы в MAX 👉 @frontend_1

🔥 Трюк с style в React, который упростит работу с динамическими стилями Вместо создания длинных условий или классов, можно использовать spread-оператор и логические выражения прямо в объекте стилей:

<div
  style={{
    padding: '16px',
    ...(isError && { border: '1px solid red' }),
    ...(isActive ? { backgroundColor: '#def' } : { opacity: 0.5 }),
  }}
>
  Hello!
</div>

📌 Что тут происходит: * ...(условие && { стиль }) добавит стиль, если условие true; * Альтернатива classnames для inline-стилей; * Чисто, читаемо и удобно при большом числе условий. 🧠 Подходит, когда используете inline-стили (например, в дизайн-системах или при генерации email-шаблонов). 💡 Можно комбинировать с memo-компонентами и кастомными хуками, чтобы минимизировать ререндеры и повысить производительность. 📲 Мы в MAX 👉 @frontend_1

💡 HTML Tip: Скачивание файлов одной строкой Хочешь, чтобы пользователь скачивал файл по клику? Просто добавь атрибут download к ссылке: <a href="/images/logo.svg" download="codewithshripal-logo.svg">Download File</a> 📌 Что важно знать: – download — указывает браузеру, что нужно не открыть файл, а скачать его – Можно задать имя файла прямо в атрибуте – Работает только с ресурсами того же источника (same-origin) – Поддерживает blob: и data: ссылки для скачивания сгенерированного контента 🔍 Важно: имя из download будет использоваться только если сервер не задал своё имя в заголовке Content-Disposition. 📲 Мы в MAX 👉 @frontend_1

Как работает комбинация clip + mask: - маска применяется к контейнеру с использованием соответствующего изображения клавиши, чтобы изображение обрезалось при смещении (translate) - clip применяется к контейнеру, чтобы зона взаимодействия (hit area) не перекрывала другие клавиши 🧑‍🍳 📲 Мы в MAX 👉 @frontend_1

ИИ-система может отлично решать задачи бизнеса, но при этом оставаться уязвимой. Утечки данных, атаки на модели, небезопасные сценарии работы агентов — проблемы, которые проще предупредить на этапе проектирования, чем исправлять после запуска. На открытом уроке разберём, как создавать ИИ-системы с учетом требований безопасности с самого начала. Вы узнаете, какие угрозы характерны для LLM, как применять принципы Security by Design и какие архитектурные решения помогают защитить данные и компоненты системы. Разберём практический кейс: усилим архитектуру ИИ-агента с помощью механизмов защиты, проверки данных и управления доступом. Урок пройдет в преддверие старта курса «ИИ-архитектор». Он будет полезен архитекторам ПО, разработчикам, специалистам по инфраструктуре и безопасности, которые проектируют или внедряют ИИ-решения. После занятия вы поймете, как закладывать защиту в архитектуру ИИ-систем и создавать решения, устойчивые к атакам и утечкам данных: https://vk.cc/d2fLFb Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Совет по CSS 💡 Мы часто используем кнопки действий, которые появляются при наведении, чтобы интерфейс выглядел чище. Но пользователи, работающие только с клавиатурой или сенсорными экранами, не могут вызвать наведение, из-за чего такие кнопки становятся недоступными. Вот как это исправить 📲 Мы в MAX 👉 @frontend_1

📌Подборка полезных функций, которые пригодятся продвинутым 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 Откладывает выполнение функции до окончания серии вызовов.

function debounce(fn: Function, delay: number) {
  let timeout: ReturnType<typeof setTimeout>;
  return (...args: any[]) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

3. Deep Clone (без structuredClone)

function deepClone<T>(obj: T): T {
  return JSON.parse(JSON.stringify(obj));
}

Подходит для простых объектов, не содержащих функций, дат и т.п.

4. Safe Access (Optional Chaining + Fallback)

function get<T>(obj: any, path: string, fallback?: T): T {
  return path.split('.').reduce((acc, key) => acc?.[key], obj) ?? fallback;
}

5. Wait (async delay)

function wait(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

6. Generate UUID v4

function uuidv4() {
  return crypto.randomUUID(); // нативно в современных браузерах
}

7. Copy to Clipboard

async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text);
  } catch {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
}

8. Detect Outside Click (для dropdown/modals)

function onClickOutside(element: HTMLElement, callback: () => void) {
  function handler(event: MouseEvent) {
    if (!element.contains(event.target as Node)) {
      callback();
    }
  }
  document.addEventListener('click', handler);
  return () => document.removeEventListener('click', handler); // для очистки
}

9. Download File from Blob

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

10. Dynamic Script Loader (например, для внешних SDK)

function loadScript(src: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`Failed to load ${src}`));
    document.head.appendChild(script);
  });
}

📲 Мы в MAX 👉 @frontend_1

🚀 Git для фронтендера: Осваиваем продвинутые команды! Все мы знаем основы Git: add, commit, push. Но чтобы по-настоящему эффективно работать в команде и поддерживать чистую историю проекта, нужно копнуть глубже. Сегодня поговорим о трёх мощных инструментах, которые сделают вашу работу с Git намного комфортнее: ветки, разрешение конфликтов и rebase. 🌱 Ветки: Ваш личный песочник Ветки – это как параллельные вселенные вашего кода. Они позволяют вам работать над новой фичей или исправлением бага, не затрагивая основной код (обычно ветку main или master). Почему это важно? 🟢Изоляция: Ваши изменения не сломают работу других разработчиков. 🟢Безопасность: Можно экспериментировать, не боясь испортить стабильную версию. 🟢Параллельная разработка: Несколько фич могут разрабатываться одновременно. Основные команды для работы с ветками: 🟢git branch <название_ветки>: Создать новую ветку. 🟢git checkout <название_ветки>: Переключиться на ветку. 🟢git checkout -b <название_ветки>: Создать и сразу переключиться (комбинация двух предыдущих). 🟢git branch -d <название_ветки>: Удалить ветку (после мержа). 🟢git merge <название_ветки>: Влить изменения из указанной ветки в текущую. 💥 Разрешение конфликтов: Не паникуем! Конфликты слияния (merge conflicts) – это неизбежная часть командной разработки. Они возникают, когда Git не может автоматически объединить изменения из разных веток, потому что они затронули одну и ту же строку кода или файл. Как это выглядит? В файле появятся специальные маркеры:

<<<<<<< HEAD
    Ваш код в текущей ветке
=======
    Код из ветки, которую вы мержите
>>>>>>> feature/new-design

Что делать? 1. Определите конфликтующие участки: Ищите маркеры <<<<<<<, =======, >>>>>>>. 2. Примите решение: Вручную отредактируйте файл, оставив нужный код (ваш, чужой или комбинацию). 3. Удалите маркеры: Очень важно убрать все эти <<<<<<<, =======, >>>>>>>! 4. Добавьте и закоммитьте изменения: 🟢git add <конфликтующий_файл> 🟢git commit -m "Resolve merge conflict" Спокойствие и внимание к деталям – залог успешного разрешения конфликтов! ✨ Git Rebase: Чистая история коммитов git rebase позволяет переписать историю коммитов, перемещая или комбинируя их. В отличие от merge, который добавляет новый коммит слияния, rebase "пересаживает" ваши коммиты на новый базовый коммит, создавая линейную и чистую историю. Когда использовать rebase? 🟢Для "очистки" вашей ветки перед мержем в main: Сделать историю более читаемой, сгруппировать мелкие коммиты. 🟢Чтобы синхронизировать свою ветку с main: Подтянуть свежие изменения из main в свою фича-ветку без создания лишнего мерж-коммита. Пример использования: 1. Переключитесь на свою фича-ветку: git checkout feature/my-new-feature 2. Заберите свежие изменения из main: git pull origin main (или git fetch origin main) 3. Выполните rebase: git rebase main Важно: 🟢Никогда не делайте rebase публичных веток! Это может сломать историю для других разработчиков. Используйте rebase только для своих личных веток, которые ещё не были отправлены в общий репозиторий или над которыми вы работаете в одиночку. 🟢При rebase могут возникнуть конфликты, решать их нужно так же, как и при merge. 📲 Мы в MAX 👉 @frontend_1

HTML input types сильно различаются в зависимости от значения атрибута type, который вы используете 👨‍💻. Ознакомьтесь с этой шпаргалкой на будущее 🚀 📲 Мы в MAX 👉 @frontend_1

Шпаргалка по выравниванию в CSS Grid 👨‍💻 📲 Мы в MAX 👉 @frontend_1

💡Шпаргалка по CSS 📲 Мы в MAX 👉 @frontend_1

Оффер 427 000₽ на руки в Сбер и отказались Оффер 380 000₽ на руки в банк Оффер 6 800$ net с релокацией на Кипр Оффер 4 500$ в американскую компанию 👆Это недавние результаты участников нашего комьюнити.

Меня зовут Тихон - я действующий разработчик и ментор. Уже 2 года я развиваю комьюнити, где 300+ разработчиков, и вместе мы выжимаем из рынка максимум!

В нашем канале много ценного для разработчиков по подготовке к собесам👇 Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Как я прохожу собесы: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ 🏆Статистика по рынку: Июль, Июнь, Май, Апрель, Март А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 frontend_punks Реклама, erid: 2W5zFHUdMDj ИП Галактионов Тихон Витальевич, ИНН 771618975809

Сегодня хочу поделиться с тобой одной тонкостью, которая помогает делать интерфейс более дружелюбным — скелетоны (skeleton loaders). Это те самые серые заглушки, которые показываются до загрузки данных. Пользователь видит, что «что-то происходит», и не чувствует, что приложение тормозит. 🦴 Как сделать скелетон быстро и без боли? Я часто использую компонент из @radix-ui/react-skeleton или shadcn/ui. Но можно собрать свой за 5 минут:

const Skeleton = ({ className }: { className?: string }) => (
  <div className={`animate-pulse bg-muted rounded-md ${className}`} />
)

А потом использовать так:

{isLoading ? (
  <Skeleton className="h-6 w-40" />
) : (
  <span>{user.name}</span>
)}

Без скелетонов пользователь может увидеть "прыгающий" интерфейс — сначала пустота, потом всё резко появилось. Это раздражает. Скелетоны создают ощущение плавности и контроля. 📲 Мы в MAX 👉 @frontend_1

💡 Scroll-snap-type Позволяет создавать плавные, контролируемые прокрутки с «привязкой» к определённым позициям.

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

🔘Используется для каруселей, слайдеров и списков. Зачем это нужно: ➡️ Сделать UX удобным и предсказуемым. ➡️ Избавиться от костылей на JS. 📲 Мы в MAX 👉 @frontend_1