#подкаст дня

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

В 1899 году электромобиль поставил рекорд в 105 километров в час и проехал 130 километров на одной зарядке.

Но на 100 лет вперёд распространение получили двигатели внутреннего сгорания. И получается, что сейчас Илон Маск развивает давно забытую технологию.

Та же аналогия прослеживается и с базами данных.

Объектно-ориентированные БД появились в 80-х годах прошлого века, а распространение получили только с приходом концепции NoSQL.

В этом подкасте узнал почему так произошло, какова внутренняя логика в развитии БД, движков хранения, языков запросов.

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

#podcast #db #nosql

#объяснение дня

Вы бы так на обычные посты реагировали, котаны и котанессы :) Более 70 реакций!

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

Значащий код:

.element:has(+ .element:hover)

Давайте по пунктам. Плюс — "+" — это селектор соседнего элемента, вниз по DOM на одном уровне. Важно понимать, что только одного, следующего.

Псевдокласс :has же в свою очередь выделит элемент, в котором присутствуют элементы, подпадающие под селектор в скобках. То есть, если есть структура:

<p class="element">
<a href="/">link</a>
</p>

<p class="element">
<a href="/">link</a>
</p>

...то селектор .element:has(a:hover) выделит тот параграф, в котором ты навёл мышкой на ссылку. Или, например, можно подсветить форму, в которой есть обязательный, но не выделенный чекбокс: https://codepen.io/alinaki/pen/bGxjOgm

В общем, здесь всё просто и понятно, но что случится, если объединить две эти сущности?

Вернёмся к значащему коду:

.element:has(+ .element:hover)

Выглядит как бред, ведь оба элемента на одном уровне, ну, по условию плюса. И никакой :has там не применим, одно в другое не входит!

Не-не, не торопись. :has не имеет отношения к DOM, он не значит "содержит в себе".

Псевдокласс :has это часть CSSOM, объектной модели CSS и означает "имеется ли нужный селектор в пространстве тех, которые вообще можно вокруг этого элемента написать".

В данном случае это значит, будет ли иметь хоть какое-то воздействие и смысл селектор + a.hover, или нет.

Грубо говоря, у каждого элемента есть своё "облако" удовлетворяющих условий, браузер ими и оперирует.

Вот и получается следующая картина: https://codepen.io/alinaki/pen/mdGjaLL?editors=1100

Ну и вариант повеселее: https://codepen.io/jh3y/pen/abGPKGO

Мыслите шире, котаны и котанессы :)

Ну и статья в помощь: https://webkit.org/blog/13096/css-has-pseudo-class/

#css #has

#фишка дня

Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?

Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/

Там div, не fieldset.

Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:

Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)

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

Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!

Вот так: https://codepen.io/alinaki/pen/NWLOPqy

Где это может пригодиться?

Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.

Ну или всю форму, при желании.

P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr

#fieldset #disabled

#ссылка дня

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

Ни слова больше! Google has us covered!

https://web.dev/patterns/

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

Хотелось бы больше примеров, конечно, но кому не хочется? :)

#web #app #patterns #бородач

#статья дня

Помните пост про шейдеры? https://news.1rj.ru/str/htmlshit/1865

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

Немного математики, немного программирования — и вот уже получается классический google-style спиннер: http://pixelscommander.com/interactive-revolution/glsl-web-components-webgl/

Вы наверняка видели такие на SVG, но вряд ли — на WebGL :)

Вход в шейдеры очень прост, а вот выхода можно и не найти....

#glsl #spinner

Создайте навык Алисы 💡

Алиса — виртуальный голосовой помощник. Она умеет ставить музыку, сообщать погоду, говорить шёпотом и даже заказывать продукты из магазина.

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

Чтобы создать навык Алисы быстро и просто, используйте serverless-решения Yandex Cloud:

— все необходимые компоненты и технологии в рамках одной платформы;

— использование функций Cloud Functions для навыков Алисы не тарифицируется;

— управление сервером, администрирование, обновление ПО и интеграцию Yandex Cloud берёт на себя;

— автомасштабируемое окружение справится с любыми нагрузками, в том числе нерегулярными и непостоянными;

— доступна подробная документация, пошаговые инструкции и вебинары о создании навыков Алисы в экосистеме serverless.

Узнайте больше и создавайте навыки Алисы с помощью serverless-решений ➡️

#фишка дня

Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).

Вот только есть нюанс.

Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?

Использовать селектор атрибута: [readonly].

Пример: https://codepen.io/elad2412/pen/wvpmjGR

Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.

Скелетон вернётся с новыми подробностями о фронтенде завтра.

#css #html #input #бородач

#заметка дня

Почему-то многим разработчикам, не обязательно начинающим, в какой-то момент приходит в голову шикарная идея: объявить дочерний элемент прямо в родительском.

А что, это же так естественно и удобно, пространство имён не засоряется...

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

Чем это чревато? Ну, например, объявленный вами инпут будет, как минимум, терять фокус.

Вообще, у Алекса Сидоренко, на чей твит выше я сослался, огромное количество полезных советов о внутрянке React. Крайне рекомендую, котаны. От души.

#react #rerender #antipattern

#перевод дня

Я тут не так давно постил шикарную статью о том, как рисовать веревку (канат) на основе любого SVG-контура:
https://news.1rj.ru/str/htmlshit/1819

Оказывается, на Хабре есть её перевод, который я почему-то пропустил!

Вот он: https://habr.com/ru/company/nmg/blog/719822/

Что статья, что перевод отличные и достойны пристального внимания. Даже если ты никогда в жизни веревку не применишь (ну не каждый же человек делает сайты браслетам с якорями, правда?), сам подход к расстановке приоритетов и отрисовке геометрии — очень полезен.

Я сам очень часто сначала рисую анимацию или схему, а потом уже верстаю.

#noscript #geometry

#фишка дня

В Safari Technology Preview наконец-то стал поддерживаться @counter-style!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style

Что это значит?

Что наконец-то можно адекватно использовать все возможности стилизации списков, а не выдумывать псевдо- и обычные элементы просто чтобы добавить иконки к элементам списка. Да и не только иконки: больше не надо долбиться в ручной counter-increment.

От простых букв и цифр до эмодзи и картинок. Например, захотелось вам изобразить первое, второе и третье место с помощью эмодзи, нет ничего проще: https://codepen.io/alinaki/pen/WNgmeLg

К сожалению, картинки пока не поддерживаются нигде... но это вопрос времени. Эмодзи-то можно 🙂

#css #feature

#заметка дня

Плоские интерфейсы вошли в нашу жизнь лет 10 назад и уходить не собираются.

Набора из linear-gradient, box-shadow, drop-shadow, border-radius хватает практически на всё. Вот такое сверстать не проблема: https://codepen.io/joshnh/pen/DmdxLY

Но так было не всегда и до сих пор в игроподобных интерфейсах можно заметить весьма сложно оформленные элементы. Например, кнопки с орнаментом. Как же их верстать?

На помощь приходят таблицы и т. н. техника сдвижных дверей (sliding doors).

Другое название таблиц — 9-slice scaling. Есть плагины для Figma, позволяющие легко резать картинки. В итоге остаётся сверстать, используя background-repeat, псевдоэлементы или border-image.

Суть же дверей в том, что у вас есть один неподвижный элемент с достаточно длинным нужным паттерном и второй — это его завершение. Раньше решалось двумя тегами, а нынче — псевдоэлементы решают: https://codepen.io/chriscoyier/pen/rZPPOd

Если интересно — следующим постом могу дать больше примеров. Голосуем 🙂

#css #button #9slice

#фишка дня

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

Вот сказал я, берёте картинку, режете на 9 кусочков — и долбитесь в псевдоэлементы... А подписчик, мол, дядя, на дворе 2023 год, пора бы научиться в border-image. И я такой: «А, чо? В смысле?».

Короче, это я к тому, что свиток на картинке из поста выше верстается в один элемент и одну строку CSS!

Ну вот, посмотрите: https://codepen.io/mdss/pen/KKxEJWQ

Развиваемся, котаны. Развиваемся.

#css #border #9slice

#такое дня

TFW тебе даже отвечать не надо, настолько ты крутой.

#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 noscript to ignore list: для пропуска конкретного скрипта
• Add all third-party noscripts 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 отдаёт некий интересный адрес http://192.168.3.6:7676/rcr/. Несложно догадаться, что rcr это receiver, приёмник. И там имеется XML со всей необходимой информацией, включая поддердживаемые протоколы. Но, честно, покажите мне человека, который любит разгребать XML? Да и пакет отдельный надо ставить, давно уже формат не в фаворе... Но если интересно, как это делают на Dart — могу рассказать.

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

2. На телевизорах с 2016 года имеется web-API! http://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-запрос на http://192.168.1.145:8001/ws/apps/Netflix или пустой POST-запрос на http://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 #бородач