Рубрика "сам себе ответил, пока писал вопрос"
Вопрос был таков: Есть экран 3440х1440. Есть блок 1920х1080, центрирован по центру экрана. Вне потока центрированного блока где-то в дереве есть навигация, которая должна быть прибита к верху центрированного блока 1920х1080. Нужно задать top, чтобы ровно выставить эту навигацю будто она имеет top: 0 внутри центрированного блока 1920х1080.
Ответ: top: calc((100vh - 1080px) / 2 +(🤦‍♂️🤦‍♂️🤦‍♂️));
Пытаясь правильно описать вопрос очень часто получается самому себе ответить :D

#инструмент дня
#vscode #css #extension

Помните (конечно же нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://news.1rj.ru/str/htmlshit/375

Так вот, Артём Шибаков (https://twitter.com/ashibakow) разработал автодополнение для Visual Studio Code, автодополняющее CSS-свойства с учётом статистики их использования.

Smart CSS Autocomplete: https://marketplace.visualstudio.com/items?itemName=saionaro.smart-css-autocomplete

Пробуйте, не забывайте отписываться в issues на GitHub и благодарить автора.

#vscode #css #autocomplete

#фишка дня

Как удалить дубликаты из массива?

Да просто используйте встроенный объект Set. Суть, математическое множество.

Как правильно заметили в комментариях, в современном JS/TS это превращается в:


const uniqCities = […new Set(cities)]


#js #set #array #duplicates

#заметка дня

В соседнем чате спросили, как получить заголовки (в смысле, сетевые) изображения или вообще любого запроса в React. Ну, content-type, например.

Да как и всегда:

  useEffect(() => {
    async function fetchHeaders() {
      const response = await fetch(
        "https://cdn.pixabay.com/photo/2021/08/22/06/24/bird-6564286_960_720.jpg"
      );

      console.log(response.headers.get("content-type"));
    }

    fetchHeaders();
  }, []);

Вот и песочница: https://codesandbox.io/s/affectionate-leaf-s76du?file=/src/App.js

#react #fetch #headers #hook

#видео дня

Рассказ о самой долгожданной и важной новинке в CSS!
Container Queries - новая веха адаптивной верстки.
В ближайшие годы контейнерные запросы изменят подход стилизации интерфейсов.
Что это и как работает? Чем отличиается от медиа-запросов?
И не пострадает ли производительность?

Поищем ответы в ролике:

https://www.youtube.com/watch?v=8OptuS8VXe4&feature=youtu.be

#фишка дня

Чота меня подзадолбало писать try-catch на каждый async-await вызов.

С “cырыми“ промисами как-то… чище на уровне синтаксиса: then-catch и всё.

Но вот тут пригодились тестовые задания на собеседованиях. У одного инженера я увидел подход, что на иллюстрации. Очень похоже на то, как возвращаются ошибки в Go.

В общем, я почитал об использовании такого подхода и остался доволен.

P. S. конечно, есть и другие примеры: https://gist.github.com/fnky/0a6cd5f39a7ad0ace79a7a4f5c999691

#js #async #await #promise #error #typenoscript

#codepen дня

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

Набросал очередной бесконечный индикатор подгрузки. Почему-то у нас испокон веков там был GIF, хотя технически сложного ничего нет: https://codepen.io/alinaki/pen/zYGvWYN

Один градиент двигаем, второй — имитирует разделение на квадраты. Полезно и вкусно.

#css #loading #indicator

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

Ну 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/javanoscript_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 #noscript #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