Frontender's notes

🥲 Резюме в IT официально мертво Свежее исследование 4261 спеца подтвердило, что честность сегодня не кормит. Рынок сломан HR-фильтрами, и выживают на нем только накрутчики. Крутят все и всё:

— 66% опрошенных рисуют опыт. Мидлы делают это так же часто, как джуны, чтобы просто пробить стену из ATS-ботов; — Без «подкрутки» цифр соискателей не зовут даже на скрининги, зато с нарисованным стажем люди залетают в бигтех и финтех на хорошие ЗП и успешно проходят испыталку; — В 77% случаев работодатели вообще не вдупляют, что опыт фейковый. Служба безопасности ловит лишь 4%; — Кандидаты массово используют нейросети для резюме, чтобы обмануть нейросети рекрутеров

✖️ xCode Journal

Почему сложный CSS чаще бьёт по CPU, чем тяжёлый JavaScript Принято считать, что основная нагрузка во фронтенде — это JavaScript. Мол, если страница тормозит, значит где-то тяжёлый скрипт. На практике довольно часто виноват… CSS. И дело в том, как именно браузер его обрабатывает. CSS работает постоянно JavaScript обычно выполняется в конкретный момент: 👉 обработчик события 👉 инициализация 👉 вычисление Отработал — и всё. CSS работает иначе. Он участвует практически в каждом кадре рендера. Каждый скролл, анимация или изменение DOM может запускать: 👉 перерасчёт стилей 👉 layout 👉 paint Если CSS сложный — браузер платит за это снова и снова. Селекторы тоже стоят денег Например: .page .content .list li .item .title span Чтобы применить такой селектор, браузер проходит по DOM и проверяет цепочку совпадений. Когда элементов много — таких проверок становится тысячи. Поэтому правила вроде: 👉 глубоких вложенных селекторов 👉 :not() 👉 :nth-child() 👉 сложных комбинаций могут неожиданно становиться узким местом. Layout — один из самых дорогих этапов Некоторые CSS-свойства заставляют браузер пересчитывать геометрию страницы. Например: 👉 width 👉 height 👉 top / left 👉 margin 👉 grid 👉 flex Если такие изменения происходят часто, браузер запускает reflow. Reflow — один из самых тяжёлых процессов рендеринга. Paint может быть ещё дороже После layout браузер должен всё перерисовать. Особенно дорогими оказываются: 👉 большие box-shadow 👉 blur 👉 сложные gradients 👉 backdrop-filter Каждый кадр требует новой отрисовки пикселей. На слабых устройствах это легко превращается в просадку FPS. JavaScript можно остановить. CSS — нет Если JS тяжёлый, его можно: 👉 разбить 👉 мемоизировать 👉 выполнить один раз CSS же применяется всегда, пока элемент существует. Именно поэтому сложные стили иногда оказываются дороже сложной логики. Главная мысль Проблемы производительности часто ищут в JavaScript. Но узкое место нередко оказывается в рендеринге. Там, где: 👉 сложные селекторы 👉 дорогие эффекты 👉 частые layout-пересчёты

🧭 Разбираем React вместе с Podlodka React Crew Современные React-приложения становятся всё сложнее. Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами. Базового понимания фреймворка становится недостаточно для результативной работы. 💡Эксперты Podlodka React Crew решили разобраться с этой проблемой на онлайн-конференции под названием «Продвинутый React». С 23 по 27 марта ее участники: ⚙️ узнают, как устроен рендер и внутренние механизмы в современном React 🧠 познакомятся с архитектурой приложений, где применяются React Server Components 📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak 🛠️познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы Формат — удобный и ламповый: пять дней, живые Zoom-сессии утром и вечером, закрытое профессиональное сообщество в Telegram и общение со спикерами. Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇 🎟Забрать early-bird билет: https://podlodka.io/reactcrew

🤣 Надёжность инфраструктуры 100% 💥 xCode Journal

Недавно решил разобраться с фичей skills в Claude Code. Если коротко, это инструмент, который пришел на смену кастомным slash-командам и значительно расширяет их возможности. В процессе изучения нашел несколько интересных моментов: - Генерация маркетингового контента: Анализирует приложение и помогает писать посты для продвижения, например для Хабра. - Подбор свободных доменов: Проверяет доступность доменов по теме проекта и предлагает варианты. - Поиск потенциальных клиентов: Помогает находить аудиторию, которой может быть интересен ваш продукт. Эту штуку я еще не тестил но звучит как магия. - Улучшение фронтенда: Помогает привести сгенерированный нейросетью фронтенд в более аккуратный и продакшен-подобный вид. Так как фронт это мое основное направление то эта штука это то что я протестил чуть больше. Разница в качестве генерируемого кода мне показалась довольно заметной. Вообще про skills я слышал уже несколько раз, но игнорировал. Для работы мне обычно хватало базовых команд вроде проверки кода. На данный момент я еще продолжаю изучать этот инструмент но уже выглядит как что то довольно интересное. 👉 Геныч.

🤣 Что за дурацкие простые задачки? 💥 xCode Journal

⚡️ Доступ к папке «AI & TECH & IT» открыт на 24 часа! Вся полезная информация о заработке на ИИ и технологиях в одном месте: ✦ Живите по правилам будущего. Узнайте, как строить карьеру и бизнес в мире, где правят технологии. ✦ Автоматизируйте и властвуйте. Внедрите ИИ-менеджеров, которые будут приносить вам заявки 24/7. ✦ Продавайте дорого. Как поставить бизнес на автопилот с помощью ИИ? Подписывайтесь и прокачивайте свои навыки прямо сейчас с помощью папки «AI & TECH & IT»! ПОДПИСАТЬСЯ

Отрисовка шрифтов в браузерах Важность отрисовки шрифтов В своей практике я часто сталкиваюсь с задачей правильно отобразить типографику на веб-страницах. Это кажется тривиальным, но отрисовка шрифтов — это целая наука, в которой браузеры играют ключевую роль. Мне важно понимать, как браузеры работают со шрифтами, чтобы гарантировать их корректное и согласованное отображение во всех средах. Типографика влияет не только на внешний вид, но и на удобочитаемость и общее восприятие контента. Процесс отрисовки шрифтов в браузерах Когда я разрабатываю интерфейсы, я учитываю, что браузеры выполняют несколько этапов, чтобы отрисовать шрифты. Браузер загружает @font-face декларации, определяет доступные шрифты, применяет их к текстовым элементам и в итоге отрисовывает текст на экране. На каждом из этих этапов может возникать ряд проблем, например, флэш безстилевых текстов (FOUT). Базовый пример использования @font-face

    
        
/* Подключение шрифта через @font-face */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
{}
    

Практический сценарий: динамическое подключение шрифтов

    
        
/* Использование переменных CSS для изменения шрифта в зависимости от темы */
:root {
  --main-font: 'Open Sans', sans-serif;
}
body {
  font-family: var(--main-font);
}
{}
    

Факты: 👉 Браузеры используют систему шрифтовой субпиксельной рендеринга для улучшения читаемости. 👉 Некоторые браузеры поддерживают новое свойство font-display для контроля загрузки шрифтов. ❗️Понимание работы шрифтов в браузерах помогает избежать распространённых проблем с отрисовкой и позволяет предложить пользователям лучший опыт взаимодействия с текстом. TG: Frontender's notes ru

🖥 Anthropic выпустили Code Review Систему, которую в компании запускают почти на каждом PR. За последний год объём кода на инженера в Anthropic вырос примерно на 200%. При такой скорости неудивительно, что ревью стало узким местом. Теперь Code Review автоматически проверяет PR: несколько ИИ-агентов параллельно ищут баги, перепроверяют результаты и ранжируют проблемы по серьёзности. Причем чем более объемным и сложным будет PR — тем больше агентов туда пойдет работать. ✖️ xCode Journal

HTML сделал, CSS написал, JS добавил. Ничего не работает 🥲 Создал index.html, накидал структуру. Отдельно style.css для стилей, script.js для логики. Открываешь в браузере - либо верстка голая, либо кнопки не жмутся, либо страница без стилей и логики ⁉️ Проверяешь пути, гуглишь "как подключить css", перезагружаешь двадцатый раз. А оно не работает. А все потому, что файлы существуют сами по себе, а ты забыл их подружить. ❇️ Ребята из Merion Academy (того самого YouTube-канала про IT) знают эту боль. Поэтому на бесплатных вводных уроках по фронтенду разбирают, как подружить технологии между собой. Что еще внутри: ✔️ Суть веб-разработки ✔️ Как работает фронтенд ✔️ Погружение в работу - сразу к делу ✔️ Практика: первая страница ✔️ Вторая страница с формой обратной связи ✔️ Тест для самопроверки ➡️ Запишись на бесплатные вводные уроки Разложи технологии по полочкам и сделай свой первый сайт.