#ссылка дня

А помните Сашу Беспоясова? Ну это который в том числе написал статью «Фронтенд — это не больно»? Ну если не помните — тогда почитайте. И «Солидбук» тоже заодно, про Solid и ООП.

Так вот, он, в составе большой команды разработчиков, стал участником проекта Дока.

Что такое Дока? Это онлайн-энциклопедия, написанная понятным языком: https://doka.guide/

О том, чем конкретно занимался Саша — его статья: https://bespoyasov.ru/blog/doka/

Дока принимает статьи на ревью, помогает с размещением и редактурой. Просто отличный проект, крайне рекомендую добавить всем в закладки.

#дока #учебник #статья #learn #frontend

#заметка дня

Я в очередной раз уронил продакшен. На сей раз, не для всех пользователей, а только для параноиков.

Как оказалось, некоторые люди ставят запрет не только на cookies, но и на local storage и даже на session storage. Возможно, такова политика безопасности. Возможно, за них это делает антитрекинговое расширение или условный блокировщик рекламы. Но факт есть факт.

Так вот, дамы и господа. Обращение к любому API, даже, казалось бы, внутреннему всегда может упасть.

Вы должны быть к этому готовы и либо использовать try-catch, либо проверять доступность объекта. А лучше всё и сразу.

Да, это банально, но многие ли из вас задумываются о том, что у клиента может стоять запрет буквально на всё?

А касаемо падения прода… Это очень плохо. Не потому что упало, а потому что я повторил ошибку, допущенную чуть больше года назад. Т. е. я тогда не сделал выводов и даже не установил мониторинг.

Ошибаться — можно, ошибаться одинаково — нельзя. Совсем.

Ну и чтобы не повторилось, мы настроили фронтенд-мониторинг — Datadog Real-User Monitoring. Теперь получаем информацию об ошибках в реальном времени.

Естественно, это не единственный подобный сервис:
- Stackdriver Error Reporting
- MONQ
- Sentry
- TrackJS

И так далее, очень и очень много, выбирать есть из чего.

В общем, не забывайте включать голову и используйте мониторинг.

#frontend #trycatch #localstorage #monitoring

#статья дня в кратком переводе от подписчика

Ахмад шадид заметил что Facebook меняет border-radius своих карточек не настройкой media query как мы привыкли это делать, а с помощью логических выражений.

Погнали!

Проблема:

Допустим у нас есть компонент карточки с border-radius: 8px. Когда у карточки нет отступов а также она занимает всю ширину вьюпорта, нам надо изменить значение на border-radius: 0px.

Мы могли бы использовать CSS media query, чтобы просто сбрасывать значение, например так:

@media (min-width: 700px) {
.card {
border-radius: 8px;
}
}

А что если в некоторых случаях нам снова нужен border-radius, например когда размер вью порта будет меньше 450px, нам придётся писать кучи медиа выражений:

@media (max-width: 450px) {
.card--rounded {
border-radius: 8px;
}
}

Решение:

Пример использованный инженерами Facebook, имитирует следующую логику:

if (ширинаКарточки >= ШиринеВьюПорта) {
radius = 0;
} else {
radius = 8px;
}

Чтобы реализовать эту логику в CSS, нам нужно сравнить два значения с помощью функций CSS.

.card {
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%)
* 9999)));
}

Пройдемся по деталям реализации примера выше.

1. Функция max(), которая сравнивает 0px и вычисленное значение функции min(). Функция Max() выбирает наибольшее значение.
2. Функция min() сравнивает 8px и вычисленное значение из calc((100vw - 4px - 100%) * 9999). Это приведет к очень большому положительному или отрицательному числу.
3. 9999 - это просто большое число, чтобы мы могли точно установить одно из двух значений, значение 0px или 8px.

Число 9999 используется не потому что у него есть супер сила, а лишь для того, чтобы избежать крайнего случая (ниже)

Предположим, что ширина вью порта составляет 375px, а размер контейнера - 365px. Если подставить эти значения в уравнение, оно будет выглядеть так:

.card {
border-radius: max(0px, min(8px, calc(375px - 4px - 365px)));
/* Превратится в */
border-radius: max(0px, min(8px, 6px));
}

Из вышеизложенного, браузер выберет значение 6px. Мы этого не хотим. Вместо этого радиус должен быть либо 0px, либо 8px. По этому мы умножаем результат на большое число, которое с меньшей вероятностью будет использоваться в CSS, например 9999.

.card {
border-radius: max(0px, min(8px, calc((375px - 4px - 365px) * 9999)));
/* Превратится в */
border-radius: max(0px, min(8px, 59994px));
}

Исходя из этого, браузер выберет 8px из функции min(), а затем такое же значение из функции max().

Возьмем пример, основанный на первом сценарии. У нас есть область просмотра шириной 1440px, а карточка находится в контейнере 700px.

.card {
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
/* В нашем случае это: */
border-radius: max(0px, min(8px, calc((1440px - 4px - 700px) * 9999)));
}

Умножение полученного значения на 9999 даст 7359264. В этом случае CSS будет выглядеть для браузера следующим образом:

.card {
border-radius: max(0px, min(8px, 7359264px));
}

Обе функции min() и max() в примере выше выберут значение в 8px.

.card {
border-radius: 8px;
}

Это первый пример использования этого сценария.

А что будет, когда карточка займёт всю ширину вьюпорта?

.card {
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
/* А в нашем случае это: */
border-radius: max(0px, min(8px, calc((375px - 4px - 375px) * 9999)));
}

Умножение значения на 9999 даст -39996 пикселей, что является отрицательным. Для браузера это будет выглядеть так:

.card {
border-radius: max(0px, min(8px, -39996px));
}

А теперь самое интересное! Браузеру нужно задать два вопроса:

Какое значение меньше? 8px или -39996px? Результат -39996 пикселей.
Какое значение больше? 0px или -39996px? Результат - 0 пикселей.

Круто? До сих пор удивляюсь столь умному использованию функций сравнения CSS.

Полная статья, а также codepen прилагаются.

#borderradius #css #viewport

#заметка дня

Было много сказано про градиенты и генераторы градиентов, но я как-то забыл совсем упомянуть, а нахрен оно всё нужно вообще. Можно же взять два любых цвета и будет прекрасно всё работать.

Да, но нет. И иллюстрация тому примером.

Мёртвая серая зона. Ух, до дрожи. И вот её нам и надо избежать.

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

Понятное дело, что не обязательно подбирать цвета руками, есть удобные генераторы: https://learnui.design/tools/gradient-generator.html

#css #gradient #generator

#будни

Допустил не то чтобы грязный, но всё же хак. Сверху обмазал его современными фишками языка, чтобы не было так мучительно больно.

Подленько? Да. Приятно? Ну тоже, пожалуй, да.

Налепил сверху // TODO: и вроде уже не так всё плохо.

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

#инструмент дня

Мой Страшно_секретный_проект.ts, который есть не что иное как расширение для Chrome DevTools, собирается Webpack 4 от 14 до 20 секунд. Он не то чтобы большой, моего кода там немного, но Material-UI накладывает свои нюансы…

Короче, я решил дать шанс сборщику Parcel. Недавно вышла его вторая версия, в которой список изменений (канал Вебня, крайне рекомендую) просто какой-то нереальный:

- Новая система плагинов
- Tree shaking включён по умолчанию
- Улучшения производительности, включающие новый компилятор JavaScript, написанный на языке Rust, а также распараллеливание задач
- Улучшение бандлера с ES модулями
- Автоматический code-splitting (разделение кода)
- Обработка изображений
- Улучшенное кэширование
- Улучшенный hot-reloading
- Инлайнинг бандлов
- Поддержка создания библиотек
- Ленивый режим разработки (пересобирает только необходимые файлы)
- Улучшения поддержка веб воркеров
- Улучшенная диагностика ошибок
- Более надёжный вотчер файлов
- Более быстрые и точные source maps

В общем, сборка теперь занимает 1.5 секунды. Полторы секунды вместо пятнадцати до того.

Я аж прыгаю до потолка. Раньше не любил Parcel потому что мне всегда нужны были достаточно сложные кастомные конфиги, но для этого проекта встал как родной.

Осталось разобраться, как в манифест расширения пробросить версию из package.json.

#parcel #webpack #tool #bundler

#выходные

Канал напичкан буднями, но выходные же тоже есть. Мне сегодня есть чем поделиться :)

В общем, в Финляндии существует огромное количество общественных пространств. В большинстве своём это библиотеки.

Библиотеки — не только места с книгами. Во многих из них имеются места для досуга типа настольных игр или пинг-понга, а в крупнейших — ещё и разнообразные мастерские и студии.

В том числе 3D-принтеры и лазерные станки.

И вот на детской коляске сломался фиксатор ручки. Лучше задачи не придумаешь, согласитесь :)

Забукал слот на 3D-принтер в центральной библиотеке, Oodi. Скачал модель на thingiverse.com. И пошёл печатать, с женой и дочкой.

Поставили на печать, пошли в кафетерий. Через полчаса запустил альтернативную модель. И вуаля — всё готово.

За всё про всё отдал 70 евроцентов. За материалы.

В следующий раз пойдём на вышивальный станок, поиздеваемся над футболками.

#life #fi

#библиотека дня

Виджет выбора цвета, color picker — пипетка, по-нашему — нечастый гость в интерфейсах, но уж если нужен, то максимально удобный.

Да, в браузерах есть встроенный (`input type=“”color`), но давайте честно, они все полное говно. Сложно приходится.

Встречайте: https://github.com/Simonwep/pickr

Прекрасный пикер, несколько режимов выбора цвета и максимально универсальный дизайн.

А вот и пример подъехал: https://codepen.io/serg-by/details/qBXqJxL

К слову, о системных пикерах. Мой любимый на Linux: https://www.kryogenix.org/code/pick/

На macOS: ColorSlurp.

#pickr #colorpicker

#ссылка дня

Все кругом обсуждают Photoshop for Web.

И всё очевидное: WebAssembly, Emnoscripten, многопоточность, SIMD. LitElements + React (странновато, ну допустим). Ну и ядро — от самого что ни на есть настоящего настольного Photoshop.

Есть даже статья на web.dev: https://web.dev/ps-on-the-web/ и там же и ссылка на бета-версию.

Вот только это пока лишь самые базовые операции плюс возможность комментирования. Подобие совместной работы завезли в фотошоп, удивительно даже.

Но я бы хотел вспомнить о не менее впечатляющем продукте: https://www.photopea.com/

Пилит один человек, уже много лет. С виду максимально напоминает просто внаглую спираченный фотошоп, но работает гораздо лучше настольного GIMP. Поддержка PSD уж точно лучше, интерфейс привычный.

Немного ужасает выбор модели монетизации, но сильно работать не мешает. Удобнее инструмента в сети чтобы подправить фотографию просто нет. И часть кодовой базы — в open source, не интерфейс, но библиотеки: https://github.com/photopea?tab=repositories

Года три назад автор вышел на Reddit и отвечал на вопросы о продукте: зачем сделал, что и как движет, почему не откроет. Очень воодушевляющее чтение, рекомендую: https://www.reddit.com/r/IAmA/comments/9urjmg/i_made_a_free_alternative_to_photoshop_that_is/

Но я серьёзно удивлён. GIMP за 20 лет и близко не подобрался в удобстве к этому веб-приложению. Это очень удивляет, видимо, цели другие.

#photoshop #photopea

#видео дня

Рассказ о старых и новых математических функциях CSS.

C ними адаптивная верстка может быть совсем другой!

https://youtu.be/YtkGbZ3DxoQ

#codepen дня

Что-то давно рубрики не было. Нехорошо.

Поскольку я очень люблю 3d-эксперименты в CSS, не ради практического применения, а просто для тренировки мозга (хотя разные карусели), решил принести очередное: https://codepen.io/jh3y/pen/dyzpVrY

Анимированный 3d-логотип Stack Overflow. Даже вращается.

Хотя почему никакого практического применения… можно забавный индикатор загрузки сварганить.

#css #3d #rotate

#заметка дня

Я тут вспомнил, что эпопея с запуском WebKit в Windows — а это, суть, возможность тестировать настолько близко к Apple Safari, насколько возможно — была бы неполной без одного важного дополнения.

Давайте вначале вспомним, что было:
1. Краткая история Safari
2. Запуск WebKit-браузера Epiphany в Windows с WSL2
3. Запуск WebKit под Windows без виртуальных машин
4. Happy End в виде бесплатного Browserstack

У всего этого была одна небольшая проблема: WebKit во 2 и 3 вариантах был обычно слишком новый, что соответствовало последним сборкам Safari 14 и 15. Но что же делать, если нужно что-то чуть постарее? На официальном сервере сборки долго не живут.

Так вот, и такое есть: оказывается, старые сборки WebKit можно найти в старых же релизах Playwright: https://playwright.dev/docs/browsers/#managing-browser-binaries

Кто не знает, Playwright — средство для автоматизации тестирования.

Установили — забрали из каталога установки. Кажется, это вполне себе заявка.

#webkit #safari #windows

#codepen дня

О, я точно знаю, что у нас тут есть люди, любящие прозрачные кнопки с градиентом. Да чтобы ещё текст тоже цветной.

Ну Ана Тюдор точно одна из таких: https://codepen.io/thebabydino/pen/ExvNBRY

1. Вариант только для Chrome/Blink, через маску
2. И два универсальных варианта через background-clip. Конечно же, о поддержке IE речи не идёт.

Так и хочется поставить Доге и Чимса с подписью “кросс-браузерная разработка в 2008 и 2021”… Но всё равно — впечатляет!

#gradient #css #buttons #clip

никто:
theguardian.com: я веган

...
Вот кого-то распирало, вы поглядите.

#статья дня

Игорь Камышев из Aviasales рассказывает о том, с чем же сталкивается компания подобного размаха при разработке своей веб-платформы.

От понимания проблемы до эволюционных решений.

https://blog.kamyshev.me/salo-selene/

#тред дня

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

А в Твиттере каждый абзац — может быть законченной мыслью, каждый абзац может содержать альбомы и комментироваться отдельно, порождая новые ветки. В этом вся суть.

Ну а если какой-то тред охота сохранить — есть инструменты вроде https://threadreaderapp.com/

Так вот, сегодняшний тред — о проблемах программистов, пришедших с курсов.

TL;DR У них отсутствует инженерное мышление и желание это мышление получить.

Ну и ссылка, куда ж без неё: https://twitter.com/kalashnikovisme/status/1456880323929657348

И для тех, кому Твиттер не по душе: https://unrollthread.com/t/1456880323929657348/ (выглядит как обычный пост в блоге).

#twitter