Логово верстальщика

Недавно решил разобраться с фичей skills в Claude Code. Если коротко, это инструмент, который пришел на смену кастомным slash-командам и значительно расширяет их возможности.

В процессе изучения нашел несколько интересных моментов:

- Генерация маркетингового контента:
Анализирует приложение и помогает писать посты для продвижения, например для Хабра.

- Подбор свободных доменов:
Проверяет доступность доменов по теме проекта и предлагает варианты.

- Поиск потенциальных клиентов:
Помогает находить аудиторию, которой может быть интересен ваш продукт. Эту штуку я еще не тестил но звучит как магия.

- Улучшение фронтенда:
Помогает привести сгенерированный нейросетью фронтенд в более аккуратный и продакшен-подобный вид. Так как фронт это мое основное направление то эта штука это то что я протестил чуть больше. Разница в качестве генерируемого кода мне показалась довольно заметной.

Вообще про skills я слышал уже несколько раз, но игнорировал. Для работы мне обычно хватало базовых команд вроде проверки кода. На данный момент я еще продолжаю изучать этот инструмент но уже выглядит как что то довольно интересное.

👉 Геныч.

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

💥 xCode Journal

Отрисовка шрифтов в браузерах

Важность отрисовки шрифтов
В своей практике я часто сталкиваюсь с задачей правильно отобразить типографику на веб-страницах. Это кажется тривиальным, но отрисовка шрифтов — это целая наука, в которой браузеры играют ключевую роль. Мне важно понимать, как браузеры работают со шрифтами, чтобы гарантировать их корректное и согласованное отображение во всех средах. Типографика влияет не только на внешний вид, но и на удобочитаемость и общее восприятие контента.

Процесс отрисовки шрифтов в браузерах
Когда я разрабатываю интерфейсы, я учитываю, что браузеры выполняют несколько этапов, чтобы отрисовать шрифты. Браузер загружает @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

👩‍💻 CSS :has() — Псевдокласс, который давно ждали

Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.

Читать...

🖥 Anthropic выпустили Code Review

Систему, которую в компании запускают почти на каждом PR. За последний год объём кода на инженера в Anthropic вырос примерно на 200%. При такой скорости неудивительно, что ревью стало узким местом.

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

✖️ xCode Journal

👩‍💻 Cube & Dots Loader

Анимированная загрузка в виде точек и куба. Сделана на чистом CSS.

Открыть код...

Логово верстальщика pinned «📍 Авторский канал про вайбкодинг и разработку ИИ-агентов ➡️ Геныч.»

Как одна строка 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.

⛏ 11 инструментов для ускорения создания пользовательского интерфейса

Предлагаем подборку бесплатных инструментов для стилистического оформления пользовательских интерфейсов. Они помогут фронтенд-разработчикам и дизайнерам существенно сэкономить время и повысить производительность.

Читать...

😭 Гендерный разрыв в IT никуда не делся

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

Почему так? Мужчины чаще забирают руководящие посты и сеньорские грейды.

✖️ xCode Journal

📍 Авторский канал про вайбкодинг и разработку ИИ-агентов

➡️ Геныч.

🔝 Самые интересные статьи за последние дни:

• DRY-фреймворк: продолжение

• Как нарисовать квадрат 3 × 3 см на веб-странице*

• Скучный Интернет и как «бесполезные сайты» могут спасти от этого

• Простой мини-чат на FastApi: Современный интерфейс, вебсокеты и SQLAlchemy с деплоем

• Как мотивировать себя на правильные вещи

👩‍💻 5 непростых вопросов по JavaScript

Разберем пять непростых вопросов: о сравнениях, пустых массивах, странном try catch, стрелочной функции и коварном JSON.stringify. Сможете ответить на них правильно?

Читать...

👩‍💻 Как сделать таймер на CSS

Давайте рассмотрим использование CSS в качестве альтернативы JavaScript для создания простых таймеров. Используем современные свойства CSS, такие, как @property, @keyframes, и псевдоэлементы со значениями counter().

Читать...

👩‍💻 Полное руководство по “this” в JavaScript

Благодаря поддержке Unicode 16 расширение MBString может работать со всеми новейшими символами Emoji, а также имеет самую актуальную информацию о смене регистра и ширине символов.

Читать...

#vacancy #вакансия #версталльщик #juniorfrontend

📌Компания: SonderAds
📌Позиция: Верстальщик / Junior Front-end (арбитраж)
📌Локация: удаленно из любой точки мира
📌 Формат: full-time 5/2
📌ЗП: Фиксированная ставка на руки - от 1000 USD (зависит от твоей экспертизы)

🚀 Ищешь удалённую full-time работу, хочешь развиваться во фронтенде и делать проекты, которые напрямую влияют на результат? Интересно верстать лендинги и разбираться, как работает рекламный трафик? Тогда тебе к нам. 🚀

Что ты будешь делать:
— Верстка и доработка лендингов по готовым шаблонам
— Правки и доработка HTML / CSS / JavaScript (адаптив, визуальные правки, логика скриптов)
— Настройка кнопок, ссылок, редиректов, форм
— Использование AI-инструментов для ускорения работы
— Настройка доменов и интеграция трекеров
— Проверка корректной работы лендингов перед запуском трафика

Что мы ожидаем от тебя:
— Опыт работы верстальщиком / junior front-end от 1 года
—Понимание структуры лендингов: кнопки, ссылки, формы, редиректы
—Знания и уверенное владение HTML, CSS, JavaScript
—Умение читать и править чужой код
—Умение пользоваться AI-инструментами (ChatGPT, Claude и др.)
—Английский на уровне чтения технической документации
—Самостоятельность и ответственное отношение к технической части работы

Будет плюсом
— Опыт работы с лендингами под рекламный трафик и трекерами
— Понимание целей и мотивации пользователей на рекламных лендингах
— Базовое понимание конверсионных воронок
— Общее представление об арбитражных связках и взаимодействии лендинга с трафиком

Что мы предлагаем:
— Обучение и поддержку внутри команды - всё нужное для старта дадим
— Интересные проекты с масштабными возможностями
— Стабильную зарплату - чтобы можно было сосредоточиться на работе
— Фиксированная ставка на руки - от 1000 USD (зависит от твоей экспертизы)
— Формат full-time 10-19:00 (время Кипра)
Полностью удаленный формат работы.
— Оплачиваемые отпуск (20 рабочих дней) и больничные

Чтобы откликнуться на позицию, заполните форму 😉

Если остались вопросы, пишите — @Sonder_Ads
@Anastasi_SonderAds
@Marharyta_M8

👩‍💻 ISBN-10

Идентификаторы ISBN-10 состоят из десяти цифр. Первые девять символов - это цифры 0-9. Последняя цифра может быть от 0 до 9 или X, чтобы указать значение 10.

Номер ISBN-10 действителен, если остаток при делении суммы произведений цифр и их позиций на 11 равен 0.

Алгоритм:

ISBN: 1 1 1 2 2 2 3 3 3 9
Позиция: 1 2 3 4 5 6 7 8 9 10
Это действительный ISBN, потому что:
(1*1 + 1*2 + 1*3 + 2*4 + 2*5 + 2*6 + 3*7 + 3*8 + 3*9 + 9*10) % 11 = 0

Пример кода:

validISBN10("1112223339") => true
validISBN10("048665088X") => true
validISBN10("1234512345") => false
validISBN10("XXXXXXXXXX") => false
validISBN10("048665088XZ") => false

Решение задачи🔽

function validISBN10(isbn) {
if (isbn.length !== 10) {
return false;
}

let sum = 0;
for (let i = 0; i < 10; i++) {
let char = isbn[i];
let value;

if (i === 9 && char === 'X') {
value = 10;
} else if (char >= '0' && char <= '9') {
value = parseInt(char, 10);
} else {
return false;
}

sum += value * (i + 1);
}

return sum % 11 === 0;
}

➡️ Главные ошибки новичков-фронтендеров в HTML

Рассказываем про частые ошибки в HTML и о том, как их избежать. Добавляйте в закладки!

Читать...

🦕 7 HTML-привычек, которые выдают в тебе динозавра

Пора устроить генеральную уборку в твоем HTML. Мы нашли 7 устаревших приемов, которые кричат: «Я застрял в прошлом!» Разберем каждый и найдем современную замену. Готов к обновлению?

Читать...

👩‍💻 BCMath: Новая функция bcdivmod

bcdivmod может быть использован в случаях, когда необходимо получить частное и остаток от деления, и избавляет от необходимости вызывать функции bcdiv и bcmod по отдельности.

Читать...