#ссылка дня

Я очень люблю бесшовные технологии. Это когда ты пишешь свой код в привычной тебе среде, будь то Laravel, Ruby on Rails или вообще какой-то рандомный игровой движок и получаешь синхронную работу фронтенда и бакенда “бесплатно”.

Например, захотелось вам поанализировать какие-то данные и поделиться ими с коллегами. Очевидный вариант для анализа данных — Python, очевидный вариант для того, чтобы данными поделиться — веб-страница и SVG- или canvas-графики.

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

И вот тут может пригодиться рендеринг в WebGL. Миллионы точек на графике? Да без проблем, GPU отработает.

Но писать WebGL код никто самостоятельно не хочет, где же та самая бесшовность?

Да вот же: https://plotly.com/python/webgl-vs-noscript/

Обработал данные и срендерил их в WebGL-график.

Вряд ли это ваша ежедневная задача, но для кого-то – очень даже.

#webgl #noscript #data #python #plot #plotly

#заметка дня

#js #focus #scroll

Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#css #scroll #scrollintoview

Может, ввести новую рубрику? “Сам себе ответил дня”.

Рубрика "сам себе ответил, пока писал вопрос"
Вопрос был таков: Есть экран 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