#статья дня

Сколько языков вы можете насчитать в браузере?

HTML, CSS, JavaScript, SVG... XML туда же в целом. Ну, это если брать современные.

А что если есть ещё один? И он позволяет делать потрясающие эффекты. И язык этот — GLSL. OpenGL Shading Language. С-подобный язык описания шейдеров.

И вот в представленной статье рассказывается, как сделать эффект сливающихся блямб на Three.js и GLSL: https://mofu-dev.com/en/blog/gooey-shader/

Вообще, шейдеры штука максимально мощная. Даже в вебе. Достаточно посмотреть на галерею https://www.shadertoy.com/

Математики море, конечно :)

#glsl #webgl #threejs

#фишка дня

Давайте вдогонку к шейдерам реализуем похожий эффект на чистом CSS. World of Goo, если вы понимаете, о чём я.

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

Но как добиться эффекта соединения двух капель? Выкрутить контраст на 11!

Если ты не знаешь, что такое выкрутить на 11, ты не настолько стар, как я. Поздравляю. Вообще это из фильма This is Spinal Tap. Неважно.

Помните пост про режимы наложения? Вот этот: https://t.iss.one/htmlshit/1836

Секрет эффекта в том, что выкручивание контраста сильно повышает резкость картинки и даёт возможность творить странное.

Короче, смотрим тут: https://codepen.io/alinaki/pen/wvEmroe

Думаю, есть, как минимум, ещё вариант с SVG.

#goo #css #blob

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

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

Правильно, я. С помощью этого милого крабика с КДПВ.

Проект называется Rspack: https://www.rspack.dev/

Чем хорош помимо скорости?

Ребята не стали придумывать велосипед, а сделали Webpack-подобный инструмент с аналогичным API для плагинов и максимально совместимым конфигом.

Поддержка sass-loader, postcss-loader, less-loader из коробки. Удобная (и понятная!) работа с ассетами, адекватное управление путями.

Да, не все плагины работают из коробки. Например, NormalModuleReplacementPlugin не заработал. Но за ускорение в 15-20 раз я готов немного переделать процессы (а не переделывать всё вообще, как предлагает тот же Turbopack).

Для некоторых лоадеров имеются замены, чем я не преминул воспользоваться. Больше никаких MiniCssExtractPlugin. Поддержка HTML тоже из коробки.

В общем, мне нравится. Одобрение на внедрение я получил, проведём аудит кода и вперёд.

И вам рекомендую попробовать.

#webpack #rust #rspack

#заметка дня и #codepen

Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.

К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.

Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.

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

Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.

Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.

Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010

P. S. если вам нужны подобные изображения — ищите по запросу macos dynamic wallpaper.

#css #geometry #бородач

#такое дня

Я знаю отличную шутку про 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 тебе даже отвечать не надо, настолько ты крутой.