Frontender's notes

Недавно решил разобраться с фичей 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) знают эту боль. Поэтому на бесплатных вводных уроках по фронтенду разбирают, как подружить технологии между собой. Что еще внутри: ✔️ Суть веб-разработки ✔️ Как работает фронтенд ✔️ Погружение в работу - сразу к делу ✔️ Практика: первая страница ✔️ Вторая страница с формой обратной связи ✔️ Тест для самопроверки ➡️ Запишись на бесплатные вводные уроки Разложи технологии по полочкам и сделай свой первый сайт.

Как одна строка CSS может сломать производительность вашего приложения Введение Небольшие изменения в CSS могут существенно повлиять на производительность веб-приложения. Одна строка кода способна замедлить загрузку страницы и ухудшить пользовательский опыт. Сложные селекторы Использование сложных CSS-селекторов увеличивает нагрузку на браузер при рендеринге страницы. Например, глубокая вложенность или чрезмерно специфичные селекторы усложняют обработку стилей и могут замедлить отображение контента. Рекомендуется упрощать селекторы и избегать избыточной специфичности. Освоение этой практики поможет избежать проблем, таких как общие ошибки в CSS. Неиспользуемые стили Загрузка неиспользуемых CSS-правил увеличивает размер страницы и время ее загрузки. Исследования показывают, что средний сайт содержит около 37% неиспользуемого CSS. Это приводит к дополнительной нагрузке на браузер и замедляет рендеринг. Регулярный аудит и удаление неиспользуемых стилей помогают оптимизировать производительность. Подробнее об этом вы можете узнать в статье о скрытых налогах производительности. Инлайн-стили Использование инлайн-стилей увеличивает размер HTML-документа и препятствует кэшированию стилей браузером, что замедляет загрузку страниц. Кроме того, инлайн-стили усложняют поддержку и обновление кода. Рекомендуется использовать внешние таблицы стилей для улучшения производительности и удобства сопровождения. Ознакомьтесь с причинами, почему следует избегать инлайн-стилей. Оптимизация CSS Для повышения производительности следует минимизировать и объединять CSS-файлы, избегать глубокого вложения селекторов и использовать только необходимые стили. Инструменты, такие как PurgeCSS, помогают выявлять и удалять неиспользуемые CSS-правила, снижая нагрузку на браузер и ускоряя рендеринг страниц. Узнайте больше о решении каскадных проблем в больших проектах из этой статьи. Факты 👉 Средний сайт содержит около 37% неиспользуемого CSS, что замедляет загрузку страниц. 👉 Сложные селекторы и глубокая вложенность усложняют обработку стилей браузером, замедляя рендеринг. Итог ❗️ Даже одна строка CSS может существенно повлиять на производительность приложения. Регулярный аудит и оптимизация стилей необходимы для обеспечения быстрой и эффективной работы веб-приложений. Источники Освоение сложных CSS-селекторов — Avoiding Common Mistakes in CSS. Анализ неиспользуемого CSS — The Hidden Performance Tax: How Unused CSS and JavaScript Slow Down Every Page. Влияние инлайн-стилей — Why You Should Avoid Inline Styles in HTML. Оптимизация каскадных проблем — Overcoming CSS Cascade Issues in Large Projects.

😭 Гендерный разрыв в IT никуда не делся Исследование Selecty и hh․ru показало: >200 тыс. рублей в месяц получают 51,5% мужчин и только 34,8% женщин. В тестировании этот порог пробивают 60% парней и 45% девушек, а в бэкенде высокие доходы лишь у 26,5% разработчиц. Почему так? Мужчины чаще забирают руководящие посты и сеньорские грейды. ✖️ xCode Journal

Мой личный блог про мои проекты, опыт, ошибки, немного про деньги и жизнь в целом Геныч. - @just_genych

Внутренние процессы браузера при загрузке страницы Архитектура браузера Современные браузеры используют многопроцессную архитектуру для повышения стабильности и безопасности. Основные компоненты включают процесс браузера, процессы рендеринга для каждой вкладки, процесс GPU и процессы расширений. Такая структура позволяет изолировать сбои и повышает производительность. Этапы загрузки страницы При вводе URL браузер выполняет следующие шаги: 👉 Разрешение доменного имени через DNS для получения IP-адреса сервера. 👉 Установление TCP-соединения с сервером. 👉 Отправка HTTP-запроса и получение ответа. 👉 Парсинг HTML-кода и построение DOM-дерева. 👉 Загрузка и применение CSS для формирования CSSOM. 👉 Объединение DOM и CSSOM в рендер-дерево. 👉 Вычисление геометрии элементов (layout). 👉 Отрисовка элементов на экране (painting). Гидратация Гидратация — процесс, при котором клиентский JavaScript делает статически отрендеренную страницу интерактивной, присоединяя обработчики событий к элементам DOM. Это обеспечивает быструю первую отрисовку контента, но требует дополнительного времени для полной интерактивности. Оптимизация загрузки Для минимизации времени загрузки страницы рекомендуется: 👉 Использовать асинхронную загрузку скриптов. 👉 Минимизировать количество HTTP-запросов. 👉 Оптимизировать изображения и другие ресурсы. 👉 Использовать кэширование. 👉 Применять Content Delivery Network (CDN) для ускорения доставки контента. Факты 👉 Многопроцессная архитектура браузеров повышает стабильность и безопасность. 👉 Гидратация делает статически отрендеренные страницы интерактивными. 👉 Оптимизация загрузки включает асинхронную загрузку скриптов и использование CDN. ❗️Понимание внутренних процессов браузера при загрузке страницы позволяет разработчикам оптимизировать производительность и улучшить пользовательский опыт. Источники Руководство по работе современного браузера описано в данном источнике. Этапы отрисовки веб-страницы раскрыты в статье на lexusalex.site. Описание гидратации можно найти на Википедии. Советы по оптимизации загрузки доступны на MDN.