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

#svg #path

Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.

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

https://svg-path-visualizer.netlify.app/

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

Вот так вот делать не надо. Никогда.

Пока вы спали, в #IE11 на основе проприетарного свойства runtimeStyle научились практически полноценно полифиллить пользовательские свойства:

https://twitter.com/jon_neal/status/1263071983811641345

А самое главное, что Джонатан Нил — заметный участник PostCSS-сообщества (Jonathan Neal, @jon_neal в Twitter) и, возможно, это всё будет реализовано в связке с PostCSS.

Пока же лучшее, что мы имеем, это :
https://github.com/nuxodin/ie11CustomProperties

Тоже весьма хорошее решение.

#фишка дня
#заметка #html #markup #layout #phone

Если Microsoft Edge по какой-то причине решил, что ваш набор цифр в блоке — это номер телефона и подсветил синим, помогает следующий атрибут:
x-ms-format-detection="none”.

Да, не по стандарту. В лучших традициях старорежимной Microsoft.

#ссылка дня
#android

Кто сегодня чувствует себя тупым, как я, например, может посмотреть этот прекрасный коммит:

https://android-review.googlesource.com/c/platform/frameworks/base/+/1321016/1/packages/SystemUI/src/com/android/systemui/glwallpaper/ImageProcessHelper.java

Что он делает? Он исправляет циклическую перезагрузку при установке этой картинки на обои:

https://drive.google.com/file/d/11rxzYvPcIOh_8GvS4XSC3YtbW3CecE-O/view

Все ошибаются. Не надо хандрить лишний раз. Даже если ты и правда тупой (или разработчик Android).

#фишка дня
#ide #vscode #sublime #editor #редактор

Sublime Text, в отличие от Visual Studio Code, не пытается сразу форматировать ваш текст при вставке. Я считаю, что это хорошо, потому что в VS Code и Atom, во всяком случае раньше, алгоритм расчёта отступов при вставке был отвратный.

Но нюанс в том, что в Sublime Text тоже встроена такая возможность. Включается зажатием Shift: ctrl-shift-v. И текст встаёт красиво.

Кидайте в комментарии существующие решения проблемы для VS Code. Лично я давно забил на это — мой код форматируется Prettier+ESLint при сохранении.

#ссылка дня
#типографика

Итак, запоздалые, но хорошие новости для тех, чей взор на типографику распространяется дальше, чем написать margin: 1em 0.

Александра Королькова выложила в бесплатный доступ свою книгу “Живая типографика”. Как оказалось, аж два года назад. А я свою на Авито покупал когда-то, потому что тираж был полностью распродан 🙂

https://leksandra.livejournal.com/120488.html

Приобщаемся к основам типографики и благодарим автора.

Ссылка из поста: https://yadi.sk/i/oy19NzNjydZjR

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

Постоянно всплывает в профильных чатах, решил, что надо сохранить.

Речь идёт о генераторе разделителей блоков на SVG. Дизайнеры такую чушь любят: от волн до спиралей и прочих кривых. А вот отрисовывать их в контурах — нет. Тыжпрограммист, ты сможешь.

Итак, встречайте: https://getwaves.io/

Есть даже плагин для Figma.

Ну и вдогонку пара похожих:
https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
https://yoksel.github.io/wave-maker/

И чтобы добить набор, немного генераторов фонов в виде волн всё на том же SVG:
https://loading.io/background/m-wave
https://www.uplabs.com/posts/svg-gradient-wave-generator

#статья дня

https://habr.com/ru/post/503776/

Эффект перелистывания страниц — далеко не самая нужная штука в вебе. Желают её только менеджеры промо-проектов, но для кого-то они — единственные менеджеры 😭. Да и библиотек много.

Чем же хороша статья? А хороша она демонстрацией простой геометрии.

Очень многие разработчики стесняются визуализировать свои расчёты на бумаге (короче говоря, рисовать). Ещё некоторое количество верстальщиков просто не помнят или не могут применить элементарную геометрию 5-9 класса.

Конечно же это нужно в себе ломать. Не уметь в голове построить пересечение прямоугольников (если речь идёт о, например, эффектах при прокрутке страниц) — это абсолютно нормально. Чертите, рисуйте, вспоминайте школу.

#ссылка дня
#video #img #png #jpg #webp

Многие до сих пор страдают от карго-культа при выборе формата изображений для своих проектов. Кому-то сказали использовать webp везде и прикрутить к сайту декодер, кто-то до сих пор считает, что SVG всегда лучше PNG для технических изображений, а кто-то — что нужно поставлять на каждое устройство свой набор разрешений.

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

https://www.youtube.com/watch?v=CMlXUS6e46w

#ссылка дня
#html #css #grid #cheatsheet #памятка

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

https://yoksel.github.io/grid-cheatsheet/

#статья дня
#js #esnext

Леа Веру (Lea Verou) рассказала о своём опыте рефакторинга большой кодовой базы с приходом опциональной последовательности (опциональный доступ к атрибутам, optional chaining) в широкий доступ.

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

https://lea.verou.me/2020/06/refactoring-optional-chaining-into-a-large-codebase-lessons-learned/

#статья дня
#css

И снова на сцене Ахмад Шадид (Ahmad Shadeed). На сей раз с “нетипичными” CSS-свойствами.

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

https://ishadeed.com/article/uncommon-css/

Вообще, хороший автор. Видно, что он в начале очень эффективного пути.

#css

Наглядное отличие алгебры от теории алгоритмов.

На КДПВ — паттерн и его алгебраическое решение.

В тексте ниже — аналогичный CSS:

li:nth-child(6n+4),
li:nth-child(6n+5),
li:nth-child(6n+6) {
color: red;
}

Выводов не будет, в тред приглашаются математики :)

Статья переехала 👇

#css #fonts #шрифты

Очень часто в коде многих верстальщиков я наблюдаю примерно следующее:

font-weight: normal;
font-family: BrutalType-Bold, sans-serif;

Кажется, не все люди понимают, что же такое @font-face и с чего начать подключение шрифтов. Давайте разбираться.

Статья слишком длинная для канала, поэтому прочесть её можно на Телеграфе: https://telegra.ph/CHto-takoe-font-face-07-16

#js #es #esnext #webpack #twitter

Отличный тред Андрея Ситника о том, что же не так в мире ES-модулей и почему радоваться рано.

Коротко для фронтенда: реализация модулей в Webpack отличается от стандарта, поддержка браузерами чистых модулей ещё не совсем достаточна, а когда она будет достаточна — встанет проблема доставки до потребителя и генерации карт исходного кода. В общем, от бандлеров избавиться удастся совсем не скоро, а скорее всего — никогда. Но это и не нужно.

https://twitter.com/andrey_sitnik/status/1229753395961044993

#фишка дня
#color

Telegram стал показывать в бета-версии цвет рядом с HEX-представлением, как в большинстве современных IDE и редакторов. Если нет — у вас или старая версия, или X. Ждите обновлений!

#FF33FF

По этому поводу давайте вспомним, что когда-то в вебе был определён набор “безопасных” цветов в количестве 216 оттенков (https://www.artlebedev.ru/colors/). Сейчас, конечно, это не имеет никакого смысла, лишь как артефакт эпохи.

Вот некоторые из них:

#FF0000
#FF6600
#FFFF00
#00FF00
#0099FF
#0000FF
#9900FF

Кстати, не будет лишним напомнить, что все “безопасные” цвета могут быть записаны в трёхзначном, а не только шестизначном формате:

#09f

Вот только Telegram, к сожалению, пока такой формат не поддерживает.

#статья дня #html #js

Разработчики #Google выкатили статью о том, что же изменилось в атрибуте loading для “ленивой” подгрузки изображений с момента первого релиза.

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

https://web.dev/native-lazy-loading/#improved-data-savings-and-distance-from-viewport-thresholds