#til дня

Уж не знаю, сколько из вас использует MySQL в работе (кстати, сколько?), но вот чего сегодня я узнал.

Надо вам что-то отсортировать так, чтобы какие-то конкретные элементы должны были идти первыми. Что же делать?

Очень просто, давайте троешников вперёд:
select * from students order by grade = 3;

Ну и пример (классная песочница, кстати): https://www.mycompiler.io/view/Da4iNcAg2Vy

В примере чуть сложнее: остальное тоже отсортировано через case 🙂

#mysql

#новость дня

Года три назад с большой помпой было объявлено о создании набора инструментов для JavaScript: транспайлер, сборщик (бандлер), среда для тестирования, линтер, форматтер. Такой себе швейцарский нож с названием Rome Tools. Шум стоял неимоверный.

В 21 году основатели подняли 4.5 ляма на создание open source-ориентированной компании. И вот что-то пилили вплоть до декабря 22 года, когда стало известно о том, что денежки — всё и сотрудники разбегаются.

Но открытый проект никуда не делся и Эмануэль Стоппа сотоварищи как обещал так и продолжил работу. И вот выпустили два дня назад 12 релиз: https://rome.tools/blog/2023/03/28/rome12/

Я Rome не пробовал, но звучало многообещающе. История о том, как замахнулись изменить мир, но забыли про пиар и общение с сообществом.

Rome wasn't built in a day. Наблюдать за ситуацией интересно. Но, думаю, наработки давно расползлись по более шустрым и менее амбициозным проектам.

Ну а если кому нужно всё в одном — Bun отличный выбор.

#js #bundler

#цитата дня

Каждая операционная система для чего-то нужна. OSX — разрабатывать веб-приложения, Linux — запускать веб-приложения, Windows — тестировать в IE.

P. S. Цитата аж 2012 года 🤡

#заметка дня

Как часто вы используете отладчик браузера для поиска проблемных мест в своих скриптах?

А надо чаще!

Но одна из проблем отладки современных веб-приложений — огромное количество сторонних скриптов. Начиная от пакетов node_modules, заканчивая средствами аналитики и журналирования.

В какой-то момент глубина погружения начинает раздражать. Мы же при разработке исходим из того, что сторонние скрипты протестированы, отлажены и, говоря об аналитике и журналировании, не влияют на окружение. Чистые в общем. Что же делать?

Очень просто! Смотрим иллюстрацию. У вас есть три варианта:
• Add directory to ignore list: для пропуска node_modules, если у вас, конечно, карта кода подключена.
• Add script to ignore list: для пропуска конкретного скрипта
• Add all third-party scripts to ignore list: игнорировать все сторонние скрипты разом (Chrome 112).

Подробнее, как обычно, нужно читать в блоге разработчиков Chrome.

Рекомендую туда почаще заглядывать, котаны.

#devtools #ignore #sourcemaps

#такое дня

Дежурное напоминание о том, что перфекционизм убивает мотивацию и не боги горшки обжигают.

Откуда скриншот? Да из типов для React: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1194

Не то чтобы я вам предлагал везде писать any, но уж тормозить разработку и быть party pooper-ом TypeScript не должен.

P. S. обновил ссылку до React 18.

#ts #react

#заметка дня

Вы что, реально думали, что я забросил свой проект пульта для телевизора Samsung на Flutter?

Ну, так-то, да... забросил. Но вернулся на днях!

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

Итак, я остановился на том, что научился посылать широковещательное сообщение в локальную сеть и собирать отклики. Следующим шагом стало бы получение информации о телевизоре: IP-адрес, название модели и телевизора, уникальный id на всякий случай. И здесь имеются два варианта:

1. Широковещательный поиск по SSDP-запросу (если у вас дома есть телевизор Samsung, можете попробовать код из этого поста) urn:samsung.com:device:RemoteControlReceiver:1 отдаёт некий интересный адрес https://192.168.3.6:7676/rcr/. Несложно догадаться, что rcr это receiver, приёмник. И там имеется XML со всей необходимой информацией, включая поддердживаемые протоколы. Но, честно, покажите мне человека, который любит разгребать XML? Да и пакет отдельный надо ставить, давно уже формат не в фаворе... Но если интересно, как это делают на Dart — могу рассказать.

Но за этим API толком больше ничего не стоит, документация Samsung прям скудная, надо искать по крупицам. Но есть второй вариант!

2. На телевизорах с 2016 года имеется web-API! https://192.168.3.6:8001/api/v2/ (не спрашивайте, куда делся v1).

У меня ушёл час чтобы понять, что в конце слэш обязателен. Впрочем, ничего нового.

И вот GET-запрос на этот адрес отдаёт, кто бы мог подумать, JSON. А поддержка JSON в Dart нативная.

Запихиваем ответ в ChatGPT, просим создать класс и фабрику из JSON. Вы серьёзно думали, что я определения типов в 2023 году буду сам писать? Нейронка отлично справилась, создав на каждый вложенный объект по классу, адекватно их назвала, преобразовала булевы строки в нормальные значения и вообще умница.

Но, как я уже сказал, документация Samsung на всю эту тему максимально ужасная. Нет ни слова насчёт того, как же запустить, например, приложение или получить их список.

Благо, на Reddit есть целые сообщества, которые ищут такую информацию. Вот, например, один такой пост: https://www.reddit.com/r/homeassistant/comments/fxddeh/controlling_a_samsung_tv/

Итого, чтобы запустить, например, Netflix мне нужно или совершить пустой POST-запрос на https://192.168.1.145:8001/ws/apps/Netflix или пустой POST-запрос на https://192.168.3.6:8001/api/v2/applications/11101200001

А GET-запросы просто выдадут состояния этих приложений. Их перебором можно узнать, что на телевизоре установлено. Самое смешное, опять же, то XML, то JSON соответственно. А ответ на POST в первом случае — 200 и URL, а во втором — 200 и true 🤡 Так что ваши API не настолько и плохи, как вы думаете.

Как ищутся все эти ID типа 11101200001? Удивительное дело, но в вашем аккаунте в Samsung есть страничка с устройствами, которая больше напоминает домашнюю страницу роутера. И там показано, какой вид активности сейчас на телевизоре происходит. Ну а конкретно адреса API ищутся внутри скачиваемого SDK. Документации (хором) нет.

Кажется, я и так уже достаточно много написал. Можем с вами договориться, например, что я буду писать по одному посту про Flutter в неделю. Таким образом у меня будет мотивация что-то делать и посты могут стать более приземлёнными. Отпишитесь в комментариях.

Вариантов постов много: как работает навигация во Flutter-приложениях, как сделать аналог BottomSheet из iOS, как совершить запрос и разобрать XML/JSON, как верстать UI... Задавайте ваши ответы.

#flutter #remote

#статья дня

Видите, подписчик проблему обвёл синей линией?

Оказалось, он просто был не в курсе, что пару лет назад я писал статью с прекрасным названием «Загадка дыры».

По-моему, пришло время её репостнуть, раз проблема всё ещё встречается: https://telegra.ph/Zagadka-dyry-07-18

Не дырите, котаны.

#img #inline #block #flex #бородач

#фишка дня

Чтобы задать анимацию появления какого-либо элемента на экране при загрузке страницы, добавлении элемента или обновлении DOM совсем не нужно городить сложных конструкций.

Достаточно проделать следующий трюк:

@keyframes appear {
from {
…whatever
}
}

Это анимирует объект в момент его появления из положения, заданного в анимации, в то, что указано в стилях.

Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM

Попробуйте обновить страницу и поиграться со значениями.

Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.

#css #keyframes #animation #бородач

#заметка дня

Как разместить иконки на странице или в web-приложении?

Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.

По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.

SVG-файл становится контейнером таких символов:

<svg xmlns="https://www.w3.org/2000/svg">
<symbol id="icon-circle" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" />
</symbol>
<symbol id="icon-square" viewBox="0 0 32 32">
<rect x="0" y="0" width="32" height="32" />
</symbol>
</svg>

И кладём этот контейнер куда угодно. Например, в файл или сразу в HTML (об этом ниже). А дальше всё очень просто:

<svg xmlns="https://www.w3.org/2000/svg" width="32" height="32">
<use href="icons.svg#icon-circle" />
</svg>

Удобно отлаживать, меньше запросов. Сплошные плюсы. Понятно, что так можно не только иконки хранить.

Но как этим пользоваться, например, в React?

Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js

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

Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)

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

#svg #symbol #sprite #react

#фишка дня

Давайте сегодня продолжим тему SVG.

Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.

Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111

Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().

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

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

1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.

Вуаля: https://codepen.io/alinaki/pen/eYPmayO

Такое можно и с текстом провернуть, кто первый? :)

#svg #path #length

#фишка дня

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

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

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

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

#codepen #devtools #sensors #бородач

#заметка дня

Продолжаем эпопею про написание пульта для телевизора на Flutter.

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

Потихоньку подбираемся к самому главному: как, собственно, посылать команды, точнее, нажатия кнопок.

А делается это довольно просто.
1. Постучались на WebSocket API, передав название приложения. Почему-то в моём случае стучаться пришлось на secure-вариант (ws vs wss, это как http vs https), разрешив использование самоподписанных сертификатов (потом расскажу, что не так).
2. Телевизор спросит разрешение на удалённое управление. И вот тут придётся подтверждать с пульта или джойстика на телевизоре, других вариантов нет. В ответ будет прислан токен. Чтобы больше не спрашивал — все дальнейшие запросы должны содержать в себе идентификатор приложения и токен, собственно. Как параметры запроса: ?name=xxx&token=yyy.
3. Формируем команду, на которую, естественно, опять нет никакой документации. Но когда это нам мешало? Копаемся в issues легендарной (в узком кругу) библиотеки Samsungctl, находим нужный формат.
4. Отправляем.
5. ...
6. Пищим от восторга.

На этом месте будет небольшая ода Джаваскрипту: нет на свете языка, который бы позволил быстрее настряпать всякие тестовые куски кода, вне зависимости от того, нужен вам UI, или нет. Ну, может, Python что-то способен противопоставить. Тяп-ляп и готов код, чтобы быстро проверить теорию или соответствие стандарта вашему телевизору: https://gist.github.com/bekharsky/80fce4263304eedcec7a46045b1a0ebd

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

И посоветуйте, кто чем вебсокеты отлаживает. Что-нибудь вроде Postman, но не Postman.

К слову, если у кого-нибудь есть телевизоры Samsung и кому не лень, проверьте код выше (он просто выключает звук) и напишите модель в комментарии, пожалуйста (как узнать модель — смотрите ссылку в первых словах поста, там про API телевизора). Это мне потом очень поможет :)

Удачи в ваших пет-проектах, котаны.

P. S. если кому интересно, вот тут человек на Go автоматизирует браузер телевизора, чтобы дашборды Grafana запустить. Целый кладезь команд и подсказок. Красивое: https://gist.github.com/freman/8d98742de09d476c4d3d9e5d55f9db63

#flutter #dart #websockets

#фишка дня

Я писал как-то о том, что одной из одновременно полезных и раздражающих вещей в CSS-препроцессорах является возможность создавать вложенность, nesting.

Склеивать селекторы, классы в БЭМ и не только, вкладывать теги... Удобно? Писать — да, поддерживать — не очень. Вот тут: https://t.iss.one/htmlshit/1643

К чему это я?

К тому, что Chrome 112 начал поддерживать CSS Nesting! Официальный! Который теперь часть спецификации: https://www.w3.org/TR/css-nesting-1/

.nesting {
color: hotpink;

> .is {
color: rebeccapurple;

> .awesome {
color: deeppink;
}
}
}

Ну и на видео показан процесс отладки этого дела в DevTools.

Статья в блоге разработчиков Chrome: https://developer.chrome.com/articles/css-nesting/, хороший способ вспомнить, что к чему.

Моё мнение остаётся прежним: для псевдоклассов, псевдоэлементов или влияния на соседей (+, ~) — очень хорошо. Для формирования БЭМ (склеивания классов) — нет.

Всем nesting, котаны!

#css #nesting

#статья дня

Что самое опасное может сказать фронтенд-разработчик, верстающий макет или готовящий ui-kit?

Опустим сейчас (несуществующее) разделение на настоящий и ненастоящий фронтенд.

Вот это:

— Я умею нормально называть классы, они у меня всегда уникальные!

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

Ребят, штуки вроде пространств имён, БЭМ, OOCSS, CSS-in-JS, CSS modules появились не потому что их разработчики глупы или ленивы. Они появились потому что все мы люди и толпа может быть как умнее одного человека, так и бесконечно глупее. Ок, если не глупее, то, как минимум невнимательнее.

Ведь подобная ситуация она везде, не только в вёрстке.

Ну вот давайте возьмём для примера Next.js. За базу там взяты CSS-модули, поэтому уже один только этот факт делает вопрос: «А css-модули уже устарели, да?», — некорректным.

Да, «гладить» фреймворк против шерсти не стоит. Да, создать глобальный класс для компонента способом, не предусмотренным документацией (созданием отдельного глобального скоупа) будет проблемой (То же самое касается и css-in-js).

Но зато насколько легче решаются остальные 99% задач!

Короче, чтобы вам сегодня сделать своё понимание кода и его сборки чуть лучше и заодно понять сопутствующие проблемы CSS-модулей горячо рекомендую эту статью: https://habr.com/ru/post/688844/

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

Прекрасно и максимально понятно написано. Заодно скилл вебпака подтянете :)

#css #cssmodules #webpack #бородач

#такое дня

Давайте дадим слово защитникам Tailwind.

Что заставляет вас учить целый DSL вместо того, чтобы просто использовать CSS?

Пишете ли вы код на Tailwind вручную, или генерируете конструктором?

Пробовали ли другие Atomic-подходы? Пробовали ли БЭМ?

Вы все поголовно из бакенда?

Давайте, господа, вам слово. А то мне аж страшно.

#tailwind #atomic

#фишка дня

Как сымитировать эффект печатной машинки на одном лишь CSS?

Очень просто! Используйте функцию анимации steps и анимируйте ширину ступенчато. Остальное скройте: https://codepen.io/alinaki/pen/vYVNdOO

Ну разве что символы придётся посчитать самому...

#css #animation #typewriter

#прекрасное дня

Ни больше ни меньше. Прекрасное. Потому что я не могу это описать каким-то другим словом.

Я вообще сел другой пост писать, но наткнулся на эти карточки в моей твиттер-ленте.

Не, я понимаю, мода на 3D-карточки в лендингах давно прошла, все эти перевороты и шевеления мышкой… Это всё прошлое десятилетие.

Но ребят, я за всю свою карьеру и представить не мог, что можно настолько точно передать эффект переливающейся металлизированной карточки настолько точно манипулируя одним только положением фона! Это какое-то безумное умение сочитать mix-blend-mode, градиенты и SVG-фильтры.

Вам срочно надо зайти и посмотреть самим: https://deck-24abcd.netlify.app/

Ну и гитхаб, конечно: https://github.com/simeydotme/pokemon-cards-css

Крышу сносит, потрясающе. И без WebGL.

#css #3d #gradient #бородач

#til дня

Вот есть у вас какая-то библиотека, которой можно передать некие обработчики событий. Особенно этим славятся карусели, кастомные селекты и прочие т. н. плагины.

Почему плагины? Потому что многие из них или до сих пор являются плагинами к jQuery, или буквально вырасли из них. Так уж повелось.

И вот эти самые обработчики событий получают доступ к this, к инстансу объекта (функции, класса). Например, Selectize.js, покажем какой-то блок над селектом:

function onDropdownClose(value: string) {
    this?.$input.parent().find(‘.alert’).html(value);
}

$(‘select’).selectize({
    hideSelected: true,
    openOnFocus: true,
    onDropdownClose,
})

Куда нас пошлёт TypeScript с этим? Правильно, в «this implicitly has any type».

А что делать-то? Как указать тип this в методе?

Всё очень просто: начиная ещё с версии 2.0 для указания типа this его нужно передать как первый аргумент в функцию. Не бойтесь, остальные implicit аргументы оно не затрёт. Итого:

function onDropdownClose(this: SelectizeInstance, value: string)

И так же с любым конструктором объектов или функцией, принимающей коллбэки как аргумент.

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

#typescript #бородач

#заметка дня

Сервис GitHub Pages известен всем. Это один из самых простых способов разместить ваш статичный и не очень сайт в сети. Особенно учитывая, что вы скорее всего на гитхабе свои проекты и держите.

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

Ну, мне известно две: Netlify Drop и Cloudflare Pages (боже, как оригинально).

Drop отличается потрясающей простотой: дропнули папку с проектом и всё, отсюда и название. Ещё домен можно свой подключить.

А вариант от Cloudflare, помимо прочего, умеет в:

- интеграцию с GitHub
- пресеты для Next.js/11ty и других фреймворков
- всё обычные возможности Cloudflare для доменов
- аналитику
- разграничение доступа через feature-ветки

Запускайте свои проекты не только локально, котаны!

#pages #github #cloudflare #netlify #drop

#фишка дня

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

Как всегда, способ этот не очень-то стандартный. Спасибо, Apple, чо.

#safari #callout #бородач