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

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

Заставить дизайнеров интерфейсов слезть с Adobe Photoshop не смогли ни конкуренты от CorelDraw, ни Sketch.

Figma этот тренд смогла переломить, дав решение и дизайнерам, и разработчикам, и менеджерам.

То, что поначалу даже в кривые Безье не умело, превратилось в культ. И будет продано все тому же Adobe за 20 лярдов баксов.

Большие деньги так-то, согласен. Вот только репутация Adobe людям покоя не даёт. Или начнут приводить к интерфейсу продуктов своих, или насильно запихнут в Creative Cloud, или всё и сразу.

Есть ли у альтернативы? Конечно, есть. Вот, например, PenPot: https://penpot.app/

Это проект с открытым исходным кодом! Можно установить себе на сервер, можно (пока бесплатно) использовать в облаке.

Написан на Closure с React. На проектах такого размера и сложности кложуру учить удобно 😵‍💫

Всем карандашей, котаны!

#design

#такое дня

Разгребал рабочие завалы и обнаружил кое-что…

Итак, 2011 год. Популярны городские сети и файлопомойки. У нас такая называлась SWAP.

У неё был интерфейс для загрузки файлов людьми, с торрентов и “осла”. Был даже веб-интерфейс для просмотра загрузок и админка для редактирования. Естественно, были и инициативные группы :)

В какой-то момент провайдер решил взять это в свои руки. Начался процесс редизайна.

Вёрстка так себе по современным меркам: ID-селекторы, нет БЭМ, нет семантики (почти). Кое-где даже атомарные классы.. Адаптива не существовало вообще.

Но вот выглядит до сих пор неплохо. И должно работать даже в IE6-7.

Встречайте:
Главная страница
Список фильмов
Страница фильма

Задавайте ваши вопросы по стилю вёрстки и кода. Наверное.

#life #work #retro

#интерактив дня

А поделитесь своими самыми странными, стрёмными или вообще — просто запомнившимися собеседованиями.

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

На тот момент компания была маленькой и процессы были медленные. Кончилось тем, что меня пригласила на собеседование в Хельсинки другая компания, и нынешней я написал: «Так может уже познакомимся уже?». Отсылку поймут не все.

Ну и вместо трех этапов получился один, не считая скрининг. Правда, собеседовали 8 человек разом, включая CEO.

Ну и по ходу пьесы я просил перевод пары терминов у русскоязычных собеседующих…

А в ту компанию, которая, собственно, пригласила я не попал. Недостаточно senior оказался.

Давайте свои прохладные былины.

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

Итак, зачем-то, уж не знаю, зачем, вам потребовалось ограничить скорость работы сети в Safari. Ну, например, посмотреть, как сайт ведёт себя на низких скоростях. Как это сделать?

Взять Chrome и не выпендриваться.

Я серьёзно, потому что то, что надо сделать для Safari, это просто дичь. Рассказываю.

1. Устанавливаем XCode, запускаем.
2. Меню XCode 👉 Open Developer Tool 👉 More Developer Tools...
3. Откроется портал Apple Developer, входим, используя свой Apple ID.
4. Скачиваем
Additional Tools for Xcode, для каждой версии свой.
5. Монтируем скачанный образ DMG (ну кликаем по нему, господи)
6. Идём в директорию Hardware и открываем Network Link Conditioner.prefPane
7. Запустятся настройки системы, там надо будет нажать на мерзкого вида переключатель и выбрать нужный профиль сети.
8. Поздравляю, вы великолепны. А иконка утилиты на панели меню — нет.

А, и это, естественно, ограничит скорость сети по всей системе, не только в Safari.

Короче, Apple — компания странная.

#xcode #tools

#статья дня

Давайте честно, у кого были проблемы с пониманием 3D-преобразований в CSS? А у кого есть?

Да не надо стесняться, у всех были и есть. Кубик на CSS нарисовать могут не только лишь все. А всё почему?

А всё потому что у вас интерактивных тренажёров не было. К счастью, делает их не только Джош Комо, но и вот Брэд Вудс: https://garden.bradwoods.io/notes/css/3d

Сослался я на записки по 3D-преобразованиям, но вообще этот проект — хороший пример того, как можно делать заметки по ходу изучения какой-то темы. От объектов в JS до отладки SQL. Хорошая шпаргалка, рекомендую всем так делать. Ну или хотя бы отрабатывать навыки в кодпене, со временем тоже неплохо накопится.

#css #js #cheatsheet #interactive

#codepen дня

Как понять режимы смешивания (блендинга, mix-blend-mode) в CSS?

Можно, конечно, обмазаться математикой и сидеть дёргать ручки в DevTools, а можно открыть сегодняшний кодпен: https://codepen.io/jh3y/pen/OJXrVME

Для лучшего понимания происходящего слои можно вращать. Выбирайте разные режимы наложения, меняйте фоны — лучше не найти.

Если кому интересно, что это за интерфейс управления такой — это dat.GUI: https://github.com/dataarts/dat.gui

Описываете конфигурацию и переменные, которыми желаете управлять, загружаете их в dat — и получаете возможность менять их на лету. Очень популярная штука в разных демках, особенно в WebGL.

#mix #blend #css

#такое дня

Я тут настоящий вынос мозга нашёл. Вы знали, что в CSS де-факто уже не один десяток лет есть нативные миксины? Ну как в LESS/SASS?

Завтра расскажу. Чмоки.

#фишка дня

Я что-то подзатянул с демонстрацией, простите. Тачку в ремонт, потом час на автобусе... Как люди на автобусах ездят? Это ужасно. Я ничего кроме метро и электричек не перевариваю. Ну да ладно.

Короче!

Мне накидали всякого в комментарии, но правильный ответ никто не дал. А состоит он в... в анимациях aka @keyframes.

Они ведь сами по себе самый что ни на есть настоящий миксин.

Просто подумайте, что может содержаться в @keyframes? Да в общем-то, всё... А какая запись? Да вот такая:

animation: 1s paused awesomeMixVol1;

И вот оно вместе кликает: https://codepen.io/alinaki/pen/eYjexgj

Попробуйте окно уменьшить 💥

Как вам такое?

#css #keyframes

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

Даже два. И оба для работы с SVG.

Одной из сильно раздражающих проблем при работе с SVG является, как ни странно, сложность кропа. Ну, обрезки полей, whitespace.

Почему? Ну, потому что многие редакторы (Inksape тот же) делают просто изменение viewBox или ещё трансформами подгоняют кривые.

Работает ли это? Ну, в целом, да. Правда, приносит с собой неожиданности вроде замыленных границ, сложности с расчётом анимаций и внезапном отсутствии поддержки в различных других редакторах.

Гарантии, что любой SVG загрузится в любом редакторе и так в принципе нет. Стандарт слишком большой, мусора напихать можно слишком много.

Так вот, к чему это я. Точно, к обрезке.

Раз: https://svgcrop.com/
Два: https://editor.method.ac/

Первая утилита обрезает по viewBox. А вот второй редактор — в него можно загрузить SVG с применёнными трансформациями сдвига, выделить и выбрать в меню Object 👉 Reorient path, что перепишет кривые с учётом трансформаций.

Вспомню, как это делать в Inkscape — напишу 🙂

#svg #crop

#игра дня

Sorry old chap. Increase the width of your browser to view this site.

…именно эту фразу вы увидите, открыв представленную ссылку на телефоне.

Но на самом деле, это красивая интерактивная история, игра если хотите, обучающая основам Git. Крайне рекомендую заварить чаю, открыть на компе и пройти её вечерком.

https://git.bradwoods.io/

#git

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

Я как-то уже говорил о замечательном инструменте ngrok. Ничего лучше для пробрасывания запросов в локальную сеть и наоборот не придумали. Мы в Supermetrics активно им пользуемся при разработке, поскольку завязаны на внешние сервисы.

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

И я говорю о Netlify, а точнее об их сервисе Netlify Drop.

Если Netlify сам по себе это полноценный CI/CD сервис, то Drop… это буквально то, что написано. Вы просто закидываете каталог с вашим сайтом и –ТААДААААМ! – он испарился. Шучу, он – выкатился в сеть, а вы получили ссылку для демонстрации. Кажется, ничего проще нет (GihHub pages проще, но лишь после настройки).

Можно зарегистрироваться и получить управление сайтом, подключить домен. HTTPS даётся изначально. Ну а дальше… возможности CI/CD весьма широки, ознакомиться не помешает.

В общем, отмазка “не могу же я запихать весь сайт в песочницу” больше не работает :)

#netlify #demo #sandbox

#фишка дня

Если вам в проекте понадобилось вдруг использовать библиотеку  fullPage.js для поэкранной прокрутки — подумайте ещё раз.

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

Гораздо логичнее использовать scroll-snap, который давно и неплохо нативно поддерживается во всех остальных браузерах.

Вот простейший пример, который дальше уже можно наращивать по вашему желанию: https://codepen.io/argyleink/pen/qBRpdEr

Минимум кода, максимум отдачи. А уж оставшиеся фишки можно и дописать или настроить. Зато с этим уж точно не придётся бороться и у вас на руках все нативные события скролла.

#css #scroll #fullpage

#статья дня

Итак. Я когда-то вам разгонял про фреймворк RICE. И нет, это не про джаббаскрипт, это про работу. Как сортировать задачи, грубо говоря. Что важно, что менее важно. А что не нужно. Вот тут: https://t.iss.one/htmlshit/1249

Думаете, это просто теория? Вот и народ из Shopify тоже так думал, а в итоге стали переводить своё мобильное приложение на React Native согласно приоритетам, рассчитанным по RICE. Золушки, ага.

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

Собственно, вот оно: https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native

Получилось долго.

#react #native #rice

#фишка дня

А знали ли вы, что в Chrome DevTools есть возможность эмулировать различные доступные на устройствах сенсоры?

Ну из очевидного: гироскоп, компас, освещённость.

Джей, деврел в Google, замапил сенсоры на 3D-кубик и запилил для нас демо на побаловаться: https://codepen.io/jh3y/pen/KKQZQNj

Открывайте пример, врубайте DevTools, вызывайте сочетанием Ctrl(Cmd)-Shift-P панель команд и ищите там Sensors. Как найдёте — сообщите 😉

#codepen #devtools #sensors

#ссылка дня

Кто-то: Идеальной страницы 404 не существует...

Пежо:
https://www.peugeot.fr/electrique-et-hybride/rouler-en-electrique/autonomie-electrique-2.html

#статья дня

Как выделить абзац полоской на всю ширину экрана?

Да вот так: https://codepen.io/t_afif/full/LYQgPgM

Упорото, не правда ли?

Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.

Источник — тред экспериментов в Твиттере.

Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.

И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/

Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/

Я обычно первый способ из второй статьи использовал. Люблю магию.

И вообще, как такая раскладка по-русски будет-то?

#css #fullbleed

#ссылка дня

Короче, помните я про Penpot писал, как альтернативу Figma?

Ну вот же: https://t.iss.one/htmlshit/1751

Ребята решили релизиться из беты в 1.0 и 31 числа будет трансляция: https://www.youtube.com/watch?v=Q0tLukJmj_k&ab_channel=Penpot

Я, к слову, поковырялся и накидал им багов по этому поводу.

И да, Penpot всё так же, как и Figma полгода назад, не в состоянии правильно загрузить официальный логотип W3C SVG.

Ну что же делать, Figma не сразу продалась, а код открыт. Учим Closure aka кложуру?

#penpot #design

#фишка дня

Надоело читать это: «To push the current branch and set the remote as upstream, use
git push --set-upstream origin fix/bug-1359»?

А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.

Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote

Ну или просто взгляните на КДПВ.

#git #remote

#фишка дня

Оказывается, почти год назад в Firefox приземлилась фича, позволяющая раскрасить оверлей-скроллбар на маках и андроидах!

https://bugzilla.mozilla.org/show_bug.cgi?id=1719948#c15

Вот только в Chrome она так и не доехала... но у нас же никто не отбирал старые добрые -webkit-префиксы, правда?

Так что теперь можно сделать так: https://codepen.io/alinaki/pen/oNMMaGW

...и будет сносно выглядеть везде.

Правда, не знаю, зачем 😅

#scroll #css #firefox

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

Что делать, если API не готов, моки писать лень, а приложение разрабатывать надо?

Ну или, например, портфолио отсутствует, а хочется сделать условную книгу контактов или приложение для знакомств? Откуда данные-то брать? Забивать lorem ipsum тоже неохота...

На помощь придёт генератор случайных юзеров!

https://randomuser.me/

Ну и естественно, есть и полноценный генератор случайных данных, в котором всё, что вам нужно сделать — это описать их схему и пару правил генерации: https://randomapi.com/

Так ваше приложение из портфолио будет выглядеть максимально реально. Да и в продакшене не придётся ждать кого-либо ещё.

#api #random