#codepen дня

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

Чаще всего это решается скриптом, но вот теперь есть вариант на чистом CSS: https://codepen.io/jh3y/pen/XWMobqx

В данном примере JS нужен лишь для того, чтобы сразу показать React-компонент.

Но вот от имплементации аж разит чем-то со времён Internet Explorer 6 🤪

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

История точно движется по спирали.

#css #component #directional

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

Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.

Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей.

Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.

Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌

Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...

#react #component

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

Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.

Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей. И хотелось бы их использовать в своем корпоративном корыте.

Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.

Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌

Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...

#react #component #бородач

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

Итак, потребовалось тебе написать статью. В статье что должно быть? Правильно, примеры. Где у нас лежат одни из лучших примеров?

Правильно, на CodePen.

Но как вставить кодпен на страницу, да ещё так, чтобы это все удобно хранить в гите и даже редактировать?

Ответ: использовать web-компонент <code-pen>!

Вот этот вот: https://darn.es/code-pen-web-component/

<script type="module" src="code-pen.js"></script>

<code-pen>
<pre>
<code>&lt;p&gt;Hello world&lt;/p&gt;</code>
</pre>
</code-pen>

Красота.

#component #codepen

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

Не так давно мы с вами использовали 3D-преобразования в CSS для эффектного выбора персонажа: https://t.me/htmlshit/2969

Тогда получилось неожиданно хорошо. Но пришло время для настоящих 3D-моделей!

Сходу демо: https://codepen.io/RAFA3L/pen/raBJjgO

Тут используется веб-компонент <model-viewer>: https://modelviewer.dev/

Атрибуты компонента схожи с тегом video, а JS API максимально простой, да и чаще всего нужна работа с «орбитальной» камерой, как в кодпене выше.

Есть поддержка VR и XR, но я, если честно, от этого совсем далёк :) Поддерживается смена текстур, освещения и теней, установка сцены.

Норм? По-моему, норм :)

#3d #component #webgl