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

Ну GreenSock, думаю, всем известен и в представлении не нуждается.

Если всё-таки нуждается, то это крайне продвинутая и вылизанная библиотека для анимации всего и вся: https://greensock.com/.

Индустриальный стандарт, я бы даже сказал.

Так чего я о ней вспомнил? Вышла новая версия на днях, 3.8. Изменения вы в состоянии сами почитать, не маленькие, но мне вот что понравилось: опция инструмента ScrollTrigger — fastScrollEnd.

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

От слов к делу, кодпен: https://codepen.io/GreenSock/pen/gORdWJm?editors=1010

#greensock #scroll #animation

#шок дня

Просто чтоб вы понимали: jQuery достиг своего пика на самых популярных ресурсах только в 2020 году. И пик этот — 80% из 100 000 сайтов.

Всем бы так “умирать”.

Ну и на самом деле, конечно же, он не умирает. Просто посмотрите статистику для 10 000 000 веб-сайтов: https://w3techs.com/technologies/history_overview/javascript_library/all

#jquery #js

#ссылка дня

...а точнее, все пять. Тема сегодня: градиенты.

1. https://uigradients.com/ — отличная коллекция сочетаний цветов.
2. https://www.eggradients.com/ — в общем, то же самое.
3. https://meshgradient.com/ — конструктор "жидких" разводов, работает на шейдерах, но генерирует в итоге PNG.
4. https://www.css-gradient.com/ — генератор CSS градиентов.
5. https://gradienta.io/ — пример на иллюстрации, весьма подойдут как рыба для изображений на проекты.

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

#css #gradient #generator

#статья дня

Я тут начал разрабатывать своё расширение для Chrome DevTools. Пока достаточно примитивное, но уже очень помогающее мне в работе. В паблик выйдет весьма скоро, но большинство всё равно о моей рабочей среде не знает :)

Так вот, пока искал информацию там-сям, наткнулся на интервью одного из разработчиков DevTools: https://habr.com/ru/company/jugru/blog/452990/

Двухлетней давности, но крайне занимательное. Редко у кого есть настолько глубокое погружение в задачу. Один тот факт, что Netflix использует свой собственный веб-движок уже достоин интереса.

#chrome #devtools

#codepen дня

Про то, что случилось с Facebook, вы и так прочитаете везде. Первая ссылка, что мне прилетела вчера, была эта: https://www.reddit.com/r/sysadmin/comments/q181fv/looks_like_facebook_is_down/

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

А мы же с вами посмотрим на калейдоскоп: https://codepen.io/cobra_winfrey/pen/JjJwZbr

Секрет простой:

-webkit-box-reflect: left;
-webkit-box-reflect: below -0px linear-gradient(rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.05));

Пикселизация реализована наложением SVG-фильтра diflate.

А дальше — магия ключевых кадров :)

#css #svg #diflate #reflect

#статья дня

Немного хардкорного стафа. Программисты VSCode славятся своим щепетильным подходом к производительности и читать их статьи – одно удовольствие (нихуя не понятно, но очень интересно).

Вот и на этот раз, они не постеснялись украсть идею подсвечивать парные скобки из одного очень популярного плагина, но сделали это в тысячи раз быстрее: https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization

Как минимум, это просто красиво.

#vscode #electron #performance

#баг дня

Смотрите, что нам Брамус Ван Дамм принёс на своём бельгийском хвосте: https://codepen.io/bramus/pen/RwgXxJv

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

Так вот, там присутствует решение крайне неприятного бага: https://bugs.webkit.org/show_bug.cgi?id=181048

Фоны с background-attachment: local не перерисовываются на мобильном Safari до тех пор, пока не масштабируешь экран.

И фикс забавный — просто поставить пустую анимацию. Кто-то, конечно, предлагает скриптом менять пользовательское свойство внутри блока... но анимация как-то элегантнее.

#safari #bug

#заметка дня

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

Мир был бы гораздо скучнее без сложных эмодзи. Но не будете же вы каждый раз менять стандарт для очередной бородатой картинки?

И вот тут на сцену выходят лигатуры.

Что такое лигатура в цифровой типографике? Это замена шрифтом некой комбинации символов на один. А что такое эмодзи? Это лишь ещё один шрифт, который система применяет (или нет, сорян) к определённому диапазону символов.

И вот сочетание из чёрного квадрата и Санта Клауса превращается в чёрного Санту Клауса. Удивительное рядом.

И да, раз это просто несколько символов – к ним можно применять любые средства работы со строками. А пустые символы на самом деле не пустые, это буквально символы склейки: zero-width joiner, чтобы мы были в курсе, что это не отдельные картинки.

Кстати, некоторые из вас наверняка применяют шрифты с лигатурами в своей IDE. Так что не так уж и далеки вы от эмодзи :)

#emoji #ligature #font #unicode

#ссылка дня

Сегодня на 1:1 с разработчиком из моей команды (вы же помните, что я уже даже не личинка тимлида?) я упомянул, что ему придётся лезть в React-код, благо он написан мной и достаточно прост.

— О, наконец-то. Я тут уже пару месяцев на https://www.frontendmentor.io/ занимаюсь. Даже несколько занятий прошёл.

Блин, современный маркетинг мне весь посыл испортил. Короче, это не реклама, как многие щас решат :)

Проект хороший. Вы проходите задания и потом представители сообщества проводят код-ревью. Хорошая и добрая затея. Даже в режиме подписки — стоит копейки.

#mentor #link #education

#ссылка дня

А помните Сашу Беспоясова? Ну это который в том числе написал статью «Фронтенд — это не больно»? Ну если не помните — тогда почитайте. И «Солидбук» тоже заодно, про 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