Комментарии / Профиль monochromer / Хабр

Пользователь

ПрофильСтатьи1ПостыНовостиКомментарии169

Оптимизируем шрифты и ускоряем сайт на 5-12%

@monochromer 10 дек 2023 в 10:20

У Google Fonts есть API для тонкой настройки. Например, можно указать url-параметр subset с набором глифов, характерных для того или иного языка. Или можно указать url-параметр text с нужными глифами. Если взять набор символов из вашего сервиса для русского и английского языка, то в Google Fonts также получим один файл размером 8Kb. Причем именно один формат, который сервис определил сам на основе HTTP-заголовков, а не целую россыпь из устаревших otf, ttf, woff, svg, как уже и отметил @dom1n1k.

У Google Fonts, вообщем-то, только один недостаток в плане сетевой производительности – CSS запрашиваются с одного домена, а сами шрифты – с другого домена.

Оптимизируем шрифты и ускоряем сайт на 5-12%

@monochromer 9 дек 2023 в 15:24

Внутри @font-face не нужно указывать text-rendering. Это делается на уровне селекторов, например, :root { text-rendering: optimizeLegibility; } .

Заканчивается 2023 год, поэтому форматы woff и ttf не нужны, только если вы не поддерживаете браузеры типа IE9.

Перевести SVG код в CSS вам поможет этот сервис.

Нагло скопированный с https://yoksel.github.io/url-encoder/

Удобней всего это сделать в сервисе «Оптимизация шрифтов».

Понимаю, что рекламируете свой сервис, но transfonter удобнее.

Web Accessibility в рассказе «A11Y от 0 до NaN»

@monochromer 22 сен 2023 в 18:16

удобство покрытия доступностью компонента – мерило корректности его архитектуры и масштабируемости

В рамочку и на стену

Введение в потоковую передачу данных в Вебе

@monochromer 9 июл 2023 в 13:59

Для ReadableStream не хватает примера обработки "обратного давления"

Архитектура и реактивное программирование

@monochromer 24 мая 2023 в 13:52

Может, и я угодил в эту ловушку, но в предложении "Помимо связанности у нас есть и зацепленность" вместо "связанности" должно быть "связности".

сoupling - связанность

cohesion - связность

https://habr.com/ru/articles/568216/

Поправьте, если ошибаюсь.

Атомарный CSS — порядок и чистота

@monochromer 2 мая 2023 в 07:57

<aside class=”sidebar fixed left top w-30 h-100 main-fill”></aside>
С одного взгляда достаточно что бы понять что это боковая колонка, с фиксированным позиционированием, с левой стороны экрана, занимающая 30% его ширины и 100% высоты, залитая главным цветом.

А как поступать в ситуациях, когда этот элемент на больших экранах должен вести себя так, как описано выше, а на малых — быть прижатым к низу, занимать 100% ширины и 30% высоты экрана.

Секретные хаки VS Code

@monochromer 2 мая 2023 в 07:24

Добавлю несколько расширений:

1. VS Live Share — совместная работа, также синхронизируется со средой разработки Visual Studio.

2. Test Explorer UI — панель для запуска тестов.

3. Работа с Docker.

4. Blueprint — шаблоны для создания групп файлов и папок, например, можно создать одним кликом angular-комопнент c html-, css-, ts-файлами.

5. Azure Cosmos DB — предназначен для работы с БД для Azure, но я использую для подключения к любому MongoDB-серверу, можно писать запросы в так называемом scratchpad, править отображенный json, который будет сохранен в БД.

6. Bracket Pair Colorizer — удобная подсветка скобок.

7. Import Cost — показывает размер подключаемых файлов.

8. Сhange-case — смена регистра текста.

Основы Websocket. Использование с react, redux, saga и RTK Query

@monochromer 23 апр 2023 в 02:20

socket.on('message', (data) => {
  yield put(receiveMessage(data));
});

Разве можно делать yield внутри callback'ов?

Доступ открыт: как в ЮMoney создают сервисы для людей с ограниченными возможностями

@monochromer 20 апр 2023 в 08:35

Также, с точки зрения доступности, картинки с текстом лучше заменить на сам текст.

Как выбрать библиотеку стайлинга и заменить несколько дизайн-систем на одну. Часть 1

@monochromer 4 апр 2023 в 09:32

Я, конечно, извиняюсь, но заголовок статьи не соответствует содержанию. Предполагал, что будет сравнение нескольких библиотек (например, vanilla extract, treat), а тут взяли Stitches и всё.

SEO для разработчика и верстальщика: основные SEO-требования к разработке сайтов

@monochromer 3 мар 2023 в 11:12

На страницах пагинации рекомендуем разместить тег Canonical в разделе <head></head>, указывающий адрес страницы пагинации:
<link rel="canonical" href="https://www.site/category/page-2/">

Я правильно понимаю, что в таком случае сортировка элементов пагинации должна работать так, чтобы на первых страницах были самые старые товары (пример магазина), а на последних - самые новые? Иначе, если на странице `page-1` будут отображаться самые новые товары, то со временем проиндексированный контент не будет соответствовать текущему.

Как использовать Docker в приложениях Node.js и React

@monochromer 3 авг 2022 в 07:22

С помощью этого сервиса можно клонировать кодовую базу на нескольких системах – везде будет одинаковый результат.

Чтобы был действительно одинаковый результат, нужно использовать package-lock.json:

COPY package.json package-lock.json
RUN npm ci

Как с помощью Core Web Vitals влюбить в свой сайт пользователей и поисковые системы

@monochromer 8 июл 2022 в 14:17

Аудит: настройте подходящий размер изображений. Решение: использовать формат изображений WebP.

Насколько помню, данный аудит означает размер в пикселях, а не килобайтах, чтобы, например, в аватарку размером 80x80 не пихали картинку 2000x2000.

Fresh – новый full stack фреймворк для Deno

@monochromer 6 июл 2022 в 20:29

Но смешно то, что если убрать эти строки, на странице будет отображаться ошибка о подключении к React:

Про какие строки говорите? Про эти?

/** @jsx h */
import { h } from "preact";

Видимо, по умолчанию прагма JSX настроена на react и поэтому jsx-элементы будут превращаться в React.createElement.

Как backend разработчики frontend писали (Vue + TS + Webpack)

@monochromer 6 июл 2022 в 14:11

Если вы используете vue-cli вам потребуется в vue.config.ts проставить флаг runtimeCompiler: true

Не лучше было бы использовать расширение синтаксиса JSX/TSX и render-функции, чтобы они компилировались при сборке, а не в runtime браузера пользователя?

Как в современном мире обрабатывать ошибки в Javascript?

@monochromer 22 июн 2022 в 14:32

Позанудствую.

if (users.length === 0) {
  return Promise.resolve([null, notFoundError]);
}

Нулевая длина списка вряд ли должна описываться ошибкой notFoundError. Ведь коллекция `users` есть. Если бы пользователь пошёл по пути `/users/1/`, а пользователя c `id = 1` нет, то тогда можно отдать notFoundError.

Из async-функции разве не достаточно возвращать просто массив `[data, error]` без оборачивания в Promise.resolve ?