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

🤣 Что за дурацкие простые задачки? 💥 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. Открыть код...

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

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

🔝 Самые интересные статьи за последние дни: • 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 по отдельности. Читать...

📐 Стандарты — это не бюрократия, а освобождение Кажется, что code style, правила коммитов и шаблоны PR — скучная формальность? На деле это способ сэкономить мозг. 👉 Совет: стандартизируй мелочи: от названий веток до структуры директорий. Это избавляет от принятия сотен ненужных решений и оставляет ресурсы на то, что важно — на саму логику и архитектуру.

👩‍💻 Проблемы экспорта по умолчанию в модулях JavaScript Модули JavaScript — способ организации кода в многократно используемые компоненты, используемые совместно в разных файлах и проектах. Модули можно импортировать и экспортировать с помощью двух различных методов: экспорта по умолчанию и именованного экспорта. Рассмотрим экспорт по умолчанию и причины, по которым следует избегать его использования в модулях JavaScript. Читать...