#фишка дня

Если вам нужны более мягкие градиентные переходы, но лень возиться с easing-формулами, попробуйте комбинировать их. Например, радиальные градиенты в прозрачность: https://codepen.io/alinaki/pen/eYRBbYj?editors=1100

Во многих случаях это именно то, что нужно. Менее насыщенная середина с двумя акцентами по краям.

Про то, что же такое easing-градиенты я писал не так давно: https://t.me/htmlshit/581

#css #gradient #radial

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

Есть такая прекрасная утилита — SVGO. SVG Optimizer.

Для неё был реализован  недостающий GUI — SVGOMG. Удивительная магия аббревиатур работает и тут — это буквально SVGO Missing GUI.

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

Так вот, сегодня, спустя два года с момента последнего обновления,  вышла версия 2.0!

https://jakearchibald.github.io/svgomg/

Развлекайтесь :)

#svg #svgo #svgomg

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

Иногда случается ситуация, когда никак иначе, кроме как парсингом страниц, данные не собрать.

Я не говорю сейчас о рипах с сайтов конкурентов. У меня была ситуация – надо было собрать списки магазинов небольшой сети, которые просто валялись по разным региональным шаблонным ресурсам.

Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это как jQuery, но для Node.js. Разобрал данные и сохранил в JSON.

Оказывается, есть и более кондовые утилиты.

Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq

Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)

Например, найти все ссылки на странице:

curl --silent https://www.rust-lang.org/ | htmlq --attribute href a

Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.

Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.

#tools #html #json #cli

#ссылка дня

Пятничных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook

#ссылка дня

Даже несколько. Тема дня — доменная зона .new. Как бы ни было неожиданно, но, переходя по следующим ссылкам, вы создаёте:

pen.new — песочницу в CodePen
gist.new — GitHub Gist
repo.new — репозиторий на GitHub
react.new — React-песочницу в CodeSandBox

...ну и всем давно известные:

docs.new — документ Google Docs
sheets.new — таблицу в Google Sheets

 О, я тут нашёл целый их awesome-список: https://github.com/yjose/awesome-new

Если вам не знакома концепция awesome-списков, это просто тематические сборники интересных репозиториев или просто ссылок.

#new #github #codepen #sandbox

P. S. вчерашнее было случайно удалено, но терять не охота.

С днём программиста, народ!

256-й день в году, как-никак.

А ещё в этот день два года назад я получил оффер в компанию, в которой работаю и сейчас 🎉

#статья дня

Если вы до сих пор не подписаны на блог Джоша Камю и не добавили его в RSS-читалки (олды тут?), то чего вы ждёте вообще?

У него вышла, как всегда прекрасно иллюстрированная интерактивными примерами, статья о CSS Transform: https://www.joshwcomeau.com/css/transforms/

Хотели заполнить пробелы в понимании, как трансформы работают? — самое время.

Перечислять, что конкретно он там описал, нет никакого смысла. Там есть всё.

#css #transform #animation

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

Задумывались ли вы когда-нибудь о том, что и как в CSS называется?

Как правильно задать вопрос? Как назвать тот или иной блок, правило? Да и правило ли вовсе это?

Вообще, строго говоря, нам всем нужен словарь.

И хорошо, когда он ещё и удобный: http://apps.workflower.fi/vocabs/css/en

Кликаем по определениям, подсвечивается кусок реального кода.

А большего и не нужно.

Ладно, ладно. Вот на русском: http://apps.workflower.fi/vocabs/css/ru

Вот теперь точно не нужно.

#css #vocabulary

#баг дня

Если вы когда-нибудь пытались повторить подобие раскладки masonry на grid, вы вполне себе могли столкнуться с косяком: после некоторого числа строк, все элементы начинают накладываться друг на друга.

Вот вполне себе пример: https://jsfiddle.net/cdysL3rm/2/

Для предотвращения утечек памяти, число строк в гридах было ограничено 1000.

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

Сейчас этот лимит подняли.

Так вот,  багу — больше 4 лет: https://bugs.chromium.org/p/chromium/issues/detail?id=688640

И его наконец-то исправили! Не прошло и пяти лет :)

Правда, до выхода ещё надо немного подождать.

#chrome #grid #bug

#фишка будущего

Сложно найти человека, которого бы не бесили медиа-запросы. Эти вечные min-width, max-width, screen and min-width... да зачем так сложно-то? 😭

Но Media Queries Level 4 дарят нам столь долгожданное и столь математически очевидное решение: ranges!

Ну согласитесь, писать

 (240px <= width <= 360px)

намного приятнее, чем

 (min-width: 240px) and (max-width: 360px)

...слышу отдалённые крики гуманитариев, которым спешу напомнить про 1023px, ага.

Нативно поддерживается только в Firefox:
https://caniuse.com/mdn-css_at-rules_media_range_syntax, но есть PostCSS-плагин: https://github.com/postcss/postcss-media-minmax

Если вы желаете, чтобы и Chrome добавил поддержку диапазонов, ставьте звёздочку на заведённом фич-реквесте: https://bugs.chromium.org/p/chromium/issues/detail?id=1034465

Удобной вам разработки :)

#css #media #ranges

#фишка дня

Вы наверняка задумывались: "Если margin это короткая форма записи всех margin-*, почему для позиционирования такого нет"?

Ну как же нет, вот inset. Поддерживаться в полной мере, правда, стал не так давно.

Как всегда — PostCSS нас выручит.

#css #inset #position

#такое дня

Теперь, когда вас попросят на собеседовании написать код, который выводит сам себя — вы знаете, что делать:

($=_=>`($=${$})()`)()

#js

#фишка дня

Зачем верстать, когда можно не верстать, правда?

Если вам дали задание: “Срочно сверстай нам кнопку Apple Pay для мобил!”, не надо кидаться искать SVG логотипа и шрифт.

Надо просто…

button {
    -webkit-appearance: -apple-pay-button;
}

…и всё.

Естественно, это работает только в Safari. Но на iOS всё — Safari.

Для встроенных WebView лучше и не придумаешь.

#ios #button #applepay

#ссылка дня

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

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

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

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

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

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

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

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

#webgl #svg  #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://t.me/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