#til дня

Реально, самый короткий TIL (Today I Learn) на свете.

Итак, хоть буква μ (мю) и означает звук m, µs (микросекунды) обозначаются в ASCII как us, потому что ms уже занято миллисекундами.

Или потому что u похожа на μ. Надо уточнить 😅

Вот так вот, котаны.

#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 сегодня, да. Сразу можно увидеть, что у меня руки по локоть в легаси.

#til дня

Волшебные 9999px для border-radius работают не только в CSS, но и во Flutter тоже.

Всё, не могу говорить, побежал. Подробности последуют.

#flutter

#til дня

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

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

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

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

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

#mysql

#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 #бородач

#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 #бородач

#фишка дня

Продолбался весь день с подготовкой релиза. С cherry-pick-ами нужных коммитов. Шутки про черрипики точёны оставьте себе.

В чём же проблема?

А в том, что наша команда работает по trunk-модели. Всё сливается в мастер, мастер автоматически релизится как Latest-версия продукта и отправляется в тестирование.

Продакшен-релиз, полученный из стабильного мастера (trunk), обзывается как минорный в рамках модели семантического версионирования.

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

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

Для этого реализуются различные feature-флаги и прочие условные условности для разделения потоков пользователей продукта по фичам.

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

Плохо когда вы забыли о гигиене и смешали коммиты от двух фичей — свободной к релизу и нестабильной. Или когда не засквошили PR-коммит (мой случай).

Тогда выборка черри-пиков может быть не самым приятным занятием. А грязные черри-пики штука очень неприятная.

Так вот, про что же фишка дня? А вот про то, что в процессе я выяснил: совсем не обязательно делать checkout коммита по его хэшу, можно по сообщению! Буквально:

git checkout ':/add multiselect to ui kit'

Причём, сообщение не надо вспоминать полностью!

В итоге, git выберет ближайший к вам такой коммит. Уютно!

В общем, соблюдайте гигиену репы, котаны. Не долбитесь весь день в черрипики.

#git #til #commit

#фишка дня

Продолбался весь день с подготовкой релиза. С cherry-pick-ами нужных коммитов. Шутки про черрипики точёны оставьте себе.

В чём же проблема?

А в том, что наша команда работает по trunk-модели. Всё сливается в мастер, мастер автоматически релизится как Latest-версия продукта и отправляется в тестирование.

Продакшен-релиз, полученный из стабильного мастера (trunk), обзывается как минорный в рамках модели семантического версионирования.

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

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

Для этого реализуются различные feature-флаги и прочие условные условности для разделения потоков пользователей продукта по фичам.

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

Плохо когда вы забыли о гигиене и смешали коммиты от двух фичей — свободной к релизу и нестабильной. Или когда не засквошили PR-коммит (мой случай).

Тогда выборка черри-пиков может быть не самым приятным занятием. А грязные черри-пики штука очень неприятная.

Так вот, про что же фишка дня? А вот про то, что в процессе я выяснил: совсем не обязательно делать checkout коммита по его хэшу, можно по сообщению! Буквально:

git checkout ':/add multiselect to ui kit'

Причём, сообщение не надо вспоминать полностью!

В итоге, git выберет ближайший к вам такой коммит. Уютно!

В общем, соблюдайте гигиену репы, котаны. Не долбитесь весь день в черрипики.

#git #til #commit #бородач

#фишка дня

Итак, разрабатываете вы интернациональный проект. А что самое главное в интернационализации?

Конечно же кавычки! И как их ставить в оформлении цитат? Руками чтоль?

Ну нет, конечно. У свойства content имеются зарезервированные значения open-quote и close-quote, которые и дадут нужный результат, среагируя на атрибут lang элемента. Ваши висячие кавычки никогда не будут прежними :)

Пруф: https://codepen.io/alinaki/pen/VwNqNpa

Элемент q, кстати, так из коробки умеет.

#css #til #quotes #i18n

#til дня

Нечасто использую этот тег, TIL aka Today I Learned (сегодня я узнал).

Не потому что я всё знаю, а потому что такие штуки обычно или в заметки уходят, или в фишке. Редко что прямо шокирует сходу.

Итак, тема дня: CSS paint-order, порядок отрисовки.

И предназначено это самое правило для управления порядком применения заливки, обводки (контура) и маркеров в SVG и HTML.

Под маркерами подразумеваются всякие там стрелочки, вдоль SVG контура.

По-умолчанию, обводка контура рисуется после заливки, но можно установить наоборот и получить эффект, как на иллюстрации: https://codepen.io/argyleink/pen/MWoeoKV

.paint-order {
paint-order: stroke fill;
}

Итого, контуры останутся только снаружи, а внутри всё будет залито.

Казалось бы, такая простая штука, а как забавно.

Поддержка очень хорошая: https://caniuse.com/mdn-css_properties_paint-order

Правда, как всегда, есть нюанс с Safari. Его алгоритмы теней чуть-чуть отличаются, но добиться нужного эффекта всё ещё можно, чуть-чуть поиграв с тенью.

#css #paint #order

#til дня

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

Мне — нет. Но вот сейчас почти да.

Вы знали, что вот уже djn больше года как nth-child в CSS стал нормальным?

Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (div, p, section).

Выходит какой-то бред, как мне посчитать второй элемент с классом .star?

И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!

:nth-child(2 of .star) {
background: red;
}

Ведь счастье так возможно. Стефан Юдис мне это показал.

Вот, Baseline 2023: https://caniuse.com/css-nth-child-of

И демо: https://codepen.io/alinaki/pen/LYKXWYo

Я, короче, очень доволен.

#css #nth #фишка

#til дня

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

Мне — нет. Но вот сейчас почти да.

Вы знали, что вот уже пару лет как nth-child в CSS стал нормальным?

Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (`div`, p, `section`).

Выходит какой-то бред, как мне посчитать второй элемент с классом .star?

И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!

:nth-child(2 of .star) {
background: red;
}

Ведь счастье так возможно. Стефан Юдис мне это показал.

Вот, Baseline 2023: https://caniuse.com/css-nth-child-of

И демо: https://codepen.io/alinaki/pen/LYKXWYo

Я, короче, очень доволен.

#css #nth #фишка #бородач