#фишка дня

Родительский селектор aka :has уже так близко к нам подобрался, что пора выкатывать новые подходы к стилизации всего и вся.

Пока только Safari 15.4 поддерживает полностью, но Chrome/Blink давно уже давали эту возможность “за флагом“.

Думаю, будет целая серия таких постов с приятными и удобными фишками нового селектора. Почему бы и нет.

#css #future #has

#codepen дня

Я же обещал продолжение заглядывания в будущее с псевдоселектором :has, помните?

Так вот, если объединить has и контейнерные запросы, можно создавать тупо раскладку мечты: делать шрифт больше в блоке, когда картинки нет, и наоборот.

Для самых умных: да, через + тоже конкретно этот эффект прекрасно достигается :) Но полифилл на контейнерные запросы всё равно будет нужен.

https://codepen.io/una/pen/oNpoqGp

#css #future #has

#фишка дня

Продолжаем наше путешествие по уже-не-столь-будущему псевдоселектору :has aka родительский селектор.

На сей раз абсолютно прекрасная штука, сочетание :has и object-view-box (aka фокусировка на части изображения):

img {
  object-view-box: inset(var(--top) ...);
}

:root:has(#car:checked) {
  --top: 61%;
  ...
}

Залипаем на видео, смотрим кодпен:

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

Ах, простите. Смотрим кодпен только в Chrome Canary с флагом Experimental Web Platform Features 😜

Но заглянуть в будущее всегда приятно.

#css #has #future

#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

#библиотека дня

А что если бы был такой UI-фреймворк, чтобы можно было запилить браузерку про космос и прочий киберпанк?

Оказывается, такое есть! Называется Arwes: https://arwes.dev/

Выглядит очень круто. У меня ассоциируется с чем-то из начала нулевых, но в хорошем смысле. Просто все ассоциации оттуда: StarCraft, Warfare Inc., Homeworld...

Учитывая, что во многих, даже AAA, играх интерфейс управления рисуется с помощью веб-технологий, создатели Arwes совсем не впустую работают 🙂

Страница примеров всё ещё в разработке, зато их песочница вполне себе доступна и очень крута: https://arwes.dev/play

Крайне рекомендую прокликать, вдохновляет.

#react #ui #future #games

#фишка дня

А давайте немного заглянем в будущее.

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

Так вот, если у вас есть Chrome Canary aka 120, можно пройти в chrome://flags, включить Experimental Web Features и увидеть возможности будущего элемента selectlist.

Уна Кравец собирает различные примеры использования в своей коллекции на Codepen: https://codepen.io/collection/QWeLGB?cursor=eyJwYWdlIjoyfQ==

Вот, например, меню из Airbnb с видеоиллюстрации: https://codepen.io/una/pen/PoXbgVW

А вот GitHub: https://codepen.io/una/pen/KKbNYbo

Там много разных. Повторю: только на Canary и только с Experimental Web Features.

Впрочем, естественно, давно имеется веб-компонент, ведущий себя ровно так же: https://github.com/luwes/selectlist-polyfill

Так что пробовать можно уже сейчас. Пора начинать!

P. S. я тут сделал sortable multiselect combobox на React Downshift. Надо кому инструкцию?

#select #html #future

#шок дня

TL;DR: Идем на https://makereal.tldraw.com/, вставляем ключ GPT4, рисуем интерфейс с описанием и нажимаем кнопку Make Real.

Я не то чтобы старательно, но избегал темы ИИ в контексте кодогенерации. Хотя, естественно, использовал и использую для генерации конфигов, тестов, типов. Пару раз пробовал для создания и обработки структур данных.

Просто как-то скучно всё выглядело.

Но тут уже два дня интернет разрывает от работы Стива Руиза, автора офигенной совместной рисовалки диаграмм tldraw: https://tldraw.com/

И называется она Make Real: https://tldraw.substack.com/p/make-real-the-story-so-far?r=1vezzj

Если у вас есть ключ OpenAI GPT4 — вот ссылка на демо: https://makereal.tldraw.com/

Рисуем интерфейс и, например, схему состояний конечного автомата (state machine, проще говоря, схему состояний приложения и его реакцию на внешние действия). Дополняем описанием, группируем и нажимаем кнопку Make Real.

И у вас есть готовое приложение. Не нравится? Выделили результат, описали снова и снова нажали. И так пока не получится.

Это выглядит как волшебство. Работает на GPT-4V aka Vision Model. Особый кайф придает стиль взаимодействия с нейросетью — через холст. В три миллиона раз более наглядно, чем чат или любой конструктор. Повторю: результат работы возвращается на холст в виде рабочего приложения и превращается в часть диаграммы. Это пушка.

Если ключа нет — очень рекомендую хотя бы прочитать статью выше и посмотреть примеры.

Лень и это? Ну хотя бы на твиттер тогда зайдите: https://twitter.com/tldraw, примеров уже десятки!

Это потрясающее путешествие. Прототипы выйдут на новый уровень. Ждём подобное в Figma? :)

#ai #tldraw #future #prototype

#релиз дня

Итак, котаны, что мы с вами пропустили?

А пропустили мы релиз Firefox 121!

Что в нём такого важного? Ну, как минимум, поддержка :has aka родительский селектор!

Конечно же, он не родительский, но то такое.

Теперь поддержка имеется во всех трёх движках, а это значит, что можно вовсю применять!

На что способен :has

1. Подсветка колонок: https://xn--r1a.website/htmlshit/2396
2. Анимация в стиле MacOS Dock: https://xn--r1a.website/htmlshit/1873 с полным разбором: https://xn--r1a.website/htmlshit/1876
3. Весёлая анимация букв: https://xn--r1a.website/htmlshit/1634
4. Когда вышел Chrome 105, разработчики разродились большой статёй: https://xn--r1a.website/htmlshit/1391
5. Джим Нильсен тоже не отставал: https://xn--r1a.website/htmlshit/1313
6. Зум на определённых частях изображения: https://xn--r1a.website/htmlshit/1206
7. Ну и шикарнейший тред от Веса Боса в Твиттере о десяти применениях новинки: https://twitter.com/wesbos/status/1737148340322652632

В общем, не переключайтесь. Будет ещё :)

#css #has #future

#такое дня

Меня очень забавляет как медленно, но верно, в блочную модель CSS протекают абстракции из inline, flex и grid-модели.

То есть, по факту, грани настолько стираются, что скоро можно будет просто верстать.

Ну, например, те же align-content: center,margin-inline, margin-block, margin-inline-start...

А теперь ещё потихоньку начинает просачиваться концепция stretch, растяжения элемента, как во флекс-модели. Это когда элемент растягивается на всю доступную ширину, исключая поля.

Пример явно дан на иллюстрации. Более близким к реальности на момент конца 2024 года будет что-то такое:

width: -webkit-fill-available;
width: -moz-available;
width: stretch;

Потому что с поддержкой ну пока никак: https://caniuse.com/?search=width%3A%20stretch

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

А ещё из того обсуждения можно узнать, что браузеры до сих пор очень по-разному считают ширину.

Но когда-нибудь...

#css #future

#тред дня

Давно я не пользовал этот тег. Что мы делаем с тредами дня из X/Твиттера (Мастодона и так далее)? Правильно, воруем!

В этот раз воруем тред Антона C++ про компилятор, который был написан ИИ. Ссылку тоже прилагаем.

На прошлой неделе показали компилятор Си, собирающий ядро linux, ffmpeg и много другое + проходящий 99% GCC тестов, а сам компилятор написан полностью ИИ.

Оператор этой мультиагентной системы только задавал направление. За 2 недели сожгли 20к$ и получили вот такой результат.

ИИ-инфлюенсеры и позитивисты высрались в очередной раз, что скоро будет эпоха одиночек, корпорации и команды не нужны, через 2 года все программисты пойдут искать работу в ноготочках или где там ещё машина не заменит человека. Почитайте
@platoff в качестве такого примера.

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

ИИ это новый git и IDE, некоторые уже спрашивают на собеседованиях, но через 3 года уже будет стыдно не уметь, а через 5 стыдно спрашивать (git и IDE на это потребовалось лет 10-15).

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

Да, он производит код, способный работать на парочке платформ, но даже при прохождении 99% тестов это не 1% того, что требуется от компилятора. От компилятора требуется не производить код, но производить эффективный код.

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

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

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

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

Жаль, конечно, что нас не спросили, но что уже теперь поделать, будущее яркое и нам всё ещё есть в нём место, но только мы в этом будущем уже не будем прежними.

То есть ничего нового не произошло, осталось только это принять.

/thread

А теперь от автора канала: если хотите здорово посмеяться, вот вам ссылка на issues это компилятора, где у людей не собирается Hello World: https://github.com/anthropics/claudes-c-compiler/issues/1

Дивный новый мир.

#ai #llm #future