#такое дня

Я знаю отличную шутку про UDP, но не уверен, что что она до вас дойдет.

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

Но нести херню, пожалуй, не стоит.

P. S. если кто не в курсе, что такое TCP/UDP — в комментариях пример.

#говно

#codepen дня

Не перестаю орать с того, что в 2023 году написать свою анимацию а-ля dock в macOS – это буквально три значащие строчки кода:

a:has(+a:hover){
--lerp:var(--lerp-1);
translate: 0 calc(var(--lerp) * -75%);
}

https://codepen.io/jh3y/pen/mdxggmO

Конечно, примеров подобных масса, сходу: https://codepen.io/chriscoyier/pen/qBoogaX

Что их объединяет? Имитация селектора "предыдущего" элемента, конечно же.

Если требуется чуть больше пояснений — ставьте лайки, чо 👍

#css #has #future

#ссылка дня

Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!

Во всяком случае, так считает автор блога Comicss: https://comicss.art/

Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.

Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.

Максимально забавный подход.

#css #art

#подкаст дня

Немного оффтопа про электрокары. Первый электрический автомобиль появился далеко не с выходом 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://t.iss.one/htmlshit/1865

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

Немного математики, немного программирования — и вот уже получается классический google-style спиннер: https://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://t.iss.one/htmlshit/1819

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

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

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

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

#svg #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 script to ignore list: для пропуска конкретного скрипта
• Add all third-party scripts to ignore list: игнорировать все сторонние скрипты разом (Chrome 112).

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

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

#devtools #ignore #sourcemaps