#такое дня
Меня очень забавляет как медленно, но верно, в блочную модель CSS протекают абстракции из inline, flex и grid-модели.
То есть, по факту, грани настолько стираются, что скоро можно будет просто верстать.
Ну, например, те же
А теперь ещё потихоньку начинает просачиваться концепция
Пример явно дан на иллюстрации. Более близким к реальности на момент конца 2024 года будет что-то такое:
Потому что с поддержкой ну пока никак: https://caniuse.com/?search=width%3A%20stretch
Кроме шуток, нужные патчи в Firefox вообще ещё только обсуждаются: ссылка.
А ещё из того обсуждения можно узнать, что браузеры до сих пор очень по-разному считают ширину.
Но когда-нибудь...
#css #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
#срочно дня
У меня через 20 минут собеседование человека на сеньора-фронтенда.
Раз вам так не понравился вопрос с Array.sort, накидайте ваших любимых.
Только срочно, я знаю, вы у меня лучшие по вопросам, вы можете🤩
У меня через 20 минут собеседование человека на сеньора-фронтенда.
Раз вам так не понравился вопрос с Array.sort, накидайте ваших любимых.
Только срочно, я знаю, вы у меня лучшие по вопросам, вы можете
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Ну что, будем долбиться в холст и аналитическую геометрию?
Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.
В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: https://www.tg-me.com/htmlshit/3279
Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.
Заодно мы получили бесконечно возможное число секторов.
Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?
Для зануд: мы тут в декартовых координатах работаем.
1️⃣ Определяем, не ткнули ли мы в центральную кнопку.
Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.
Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.
2️⃣ Если попали не в центр, то уже однозначно, в какой-то из секторов.
Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.
Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.
И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.
Радианы — просто всё умножается на π.
Ну и всё, перерисовали с учётом нового цвета.
Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010
Что делаем в следующий раз, анимируем?
#canvas #javascript #remote
Ну что, будем долбиться в холст и аналитическую геометрию?
Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.
В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: https://www.tg-me.com/htmlshit/3279
Как я уже писал, основным откровением стало понимание, что мне не нужно пять разных фигур, описывающих виджеты. В данном случае мне повезло и граница между элементами не должна была быть прозрачной. Иначе, пришлось бы решать иными методами.
Заодно мы получили бесконечно возможное число секторов.
Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?
Для зануд: мы тут в декартовых координатах работаем.
Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.
Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.
Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.
Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.
И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.
Радианы — просто всё умножается на π.
Ну и всё, перерисовали с учётом нового цвета.
Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010
Что делаем в следующий раз, анимируем?
#canvas #javascript #remote
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Chrome опять выходит на связь!
Я скучаю по временам, когда можно было делать проекты под киоски :) Вообще ничего не парило, берёшь последний Chromium и кладёшь на все стандарты.
Возможно, кому-то и сейчас так везёт...
Короче, я к чему. Нет, я не про новости, согласно которым Google хотят заставить продать Chrome (при этом уважаемые эксперты кругом уже начали хоронить веб, как будто других движков у нас нет).
Я про то, что Chrome в очередной раз ломает искусственные барьеры!
Когда-то мы с вами уже обсуждали ситуацию с несчастной комбинацией элементов
Оказывается, похожая ситуация имеется и с элементами
Им до Chrome 131 нельзя было задать никакой display, кроме block. Эффекта бы не было.
Надеюсь, глядя на видео вы уже поняли, что там происходит :) А происходит комбинация
Статья на тему: https://developer.chrome.com/blog/styling-details
А теперь, чтобы пресечь инсинуации: в Firefox и Safari всё прекрасно выглядит! Не работает лишь анимация. Ограничений на
Я пока всё ещё считаю использование
#css #ui #details
Chrome опять выходит на связь!
Я скучаю по временам, когда можно было делать проекты под киоски :) Вообще ничего не парило, берёшь последний Chromium и кладёшь на все стандарты.
Возможно, кому-то и сейчас так везёт...
Короче, я к чему. Нет, я не про новости, согласно которым Google хотят заставить продать Chrome (при этом уважаемые эксперты кругом уже начали хоронить веб, как будто других движков у нас нет).
Я про то, что Chrome в очередной раз ломает искусственные барьеры!
Когда-то мы с вами уже обсуждали ситуацию с несчастной комбинацией элементов
fieldset+legend и что они не могли быть flex-элементами. Ну, так исторически сложилось (они были виджетами ОС).Оказывается, похожая ситуация имеется и с элементами
details+summary!Им до Chrome 131 нельзя было задать никакой display, кроме block. Эффекта бы не было.
Надеюсь, глядя на видео вы уже поняли, что там происходит :) А происходит комбинация
display: flex на details и анимация до auto через interpolate-size.Статья на тему: https://developer.chrome.com/blog/styling-details
А теперь, чтобы пресечь инсинуации: в Firefox и Safari всё прекрасно выглядит! Не работает лишь анимация. Ограничений на
display у details нет, всё работает как и надо.Я пока всё ещё считаю использование
details для аккордеона натяжкой, но направление задано, что не может не радовать.#css #ui #details
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Я устал сидеть с покерфейсом на собеседованиях фуллстак- и бакенд-лидов, когда коллега начинает спрашивать про работу индексов в системах баз данных и их оптимизации.
Поэтому я решил найти хоть что-то визуальное, чтобы начать вхождение в тему.
И, не поверите, таки нашёл!
Итак, встречайте. Деревья поиска aka B-деревья и их использование в индексах баз данных: https://planetscale.com/blog/btrees-and-database-indexes
Насыщена интерактивными примерами, можно собственноручно подобавлять ключи и увидеть, как именно принимается решение в какую ветку полетит та или иная пара ключ-значение.
Объясняются принципы работы деревьев, принципы их хранения на диске и алгоритмы поиска, например, упорядоченных значений.
Это для многих (включая меня) немножко хард-левел, поэтому на данный момент пост на правах закладки и читаю я его параллельно с Виртом и Википедией.
Но как же красиво, ну.
#algorithms #db #index
Я устал сидеть с покерфейсом на собеседованиях фуллстак- и бакенд-лидов, когда коллега начинает спрашивать про работу индексов в системах баз данных и их оптимизации.
Поэтому я решил найти хоть что-то визуальное, чтобы начать вхождение в тему.
И, не поверите, таки нашёл!
Итак, встречайте. Деревья поиска aka B-деревья и их использование в индексах баз данных: https://planetscale.com/blog/btrees-and-database-indexes
Насыщена интерактивными примерами, можно собственноручно подобавлять ключи и увидеть, как именно принимается решение в какую ветку полетит та или иная пара ключ-значение.
Объясняются принципы работы деревьев, принципы их хранения на диске и алгоритмы поиска, например, упорядоченных значений.
Это для многих (включая меня) немножко хард-левел, поэтому на данный момент пост на правах закладки и читаю я его параллельно с Виртом и Википедией.
Но как же красиво, ну.
#algorithms #db #index
Перед вами форма с полями и блоком загрузки изображения. Закинули картинку, вывелось уведомление «Успешная загрузка».
Вы пошли на другую страницу не нажимая «Сохранить/Отмена» в форме. Когда вы вернется на страницу с формой вы ожидаете, что картинка:
Вы пошли на другую страницу не нажимая «Сохранить/Отмена» в форме. Когда вы вернется на страницу с формой вы ожидаете, что картинка:
Anonymous Poll
42%
сохранится
58%
не сохранится
Уточнение! Не "картинка сохранится на сервере", а "картинка останется в форме, даже если форма ещё не была отправлена".
#фишка дня
Это дежурное напоминание о том, что если объявить независимые и чистые функции вне контекста компонента, они не будут пересоздаваться на каждый рендер и, соответственно, вам не нужны будут ни useEffect, ни useCallback ни прочие трюки.
То есть:
Уточнение: я в курсе, что скролл нынче можно сделать в CSS, суть не в этом.
Видите, что мы сделали? Функция — чистый сайд-эффект, она не трогает никакое из состояний приложения, только его внешний вид. Нам достаточно просто ссылки.
Скролл, фокус, анимации, обращение к глобальным состояниям и шине событий — всё это можно смело выносить наружу.
Пруф: https://codesandbox.io/p/sandbox/scroll-into-view-forked-6t9ppq
Статья на тему от создателей React Query: https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs
И конечно же напоминание от команды React, что useEffect нужен далеко не всегда: https://react.dev/learn/you-might-not-need-an-effect
#react #ref #useeffect
Это дежурное напоминание о том, что если объявить независимые и чистые функции вне контекста компонента, они не будут пересоздаваться на каждый рендер и, соответственно, вам не нужны будут ни useEffect, ни useCallback ни прочие трюки.
То есть:
const scroller = (node: HTMLDivElement | null) => {
node?.scrollIntoView({ behavior: "smooth" });
};
const ChatWindow = () => {
return (
<>
{Array.from(Array(100).keys()).map((e) => (
<div key={e}>Chat message: {e}</div>
))}
<div ref={scroller} />
</>
);
};
Уточнение: я в курсе, что скролл нынче можно сделать в CSS, суть не в этом.
Видите, что мы сделали? Функция — чистый сайд-эффект, она не трогает никакое из состояний приложения, только его внешний вид. Нам достаточно просто ссылки.
Скролл, фокус, анимации, обращение к глобальным состояниям и шине событий — всё это можно смело выносить наружу.
Пруф: https://codesandbox.io/p/sandbox/scroll-into-view-forked-6t9ppq
Статья на тему от создателей React Query: https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs
И конечно же напоминание от команды React, что useEffect нужен далеко не всегда: https://react.dev/learn/you-might-not-need-an-effect
#react #ref #useeffect
#такое дня
Раньше говорили, что каждый программист должен написать свои Жизнь и Тетрис.
Но каждый писал свой музыкальный плеер. А в чате я постоянно рекомендую начинающим веб-разработчикам написать свои Инстаграм и Твиттер. Ну, до какого-то уровня, конечно.
А какие мнения слышали вы?
Раньше говорили, что каждый программист должен написать свои Жизнь и Тетрис.
Но каждый писал свой музыкальный плеер. А в чате я постоянно рекомендую начинающим веб-разработчикам написать свои Инстаграм и Твиттер. Ну, до какого-то уровня, конечно.
А какие мнения слышали вы?
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Итак, помните пример современного глитч-искусства на примере Твиттера?
Ну я про React Scan, который показывает число ререндеров на странице, вот: https://www.tg-me.com/htmlshit/3285
Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:
...и поехали.
Что-то резко стало охота завтра на работе шороху навести на корпоративном портале.
#react #render #devtools
Итак, помните пример современного глитч-искусства на примере Твиттера?
Ну я про React Scan, который показывает число ререндеров на странице, вот: https://www.tg-me.com/htmlshit/3285
Парни выпустили CLI-утилиту, чтобы можно было просканировать любой сайт! Да-да, они обещали расширение для браузера, но пока так:
npx react-scan@latest <URL>
...и поехали.
Что-то резко стало охота завтра на работе шороху навести на корпоративном портале.
#react #render #devtools
This media is not supported in your browser
VIEW IN TELEGRAM
#расширение дня
А что, если история гита может быть представлена не в виде вертикального списка?
А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?
А что, если можно не открывать интерфейс git blame на каждый чих?
Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.
Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Всем git, котаны!
P. S. вы же в курсе, что устанавливать расширения можно из консоли?
Как-то так:
Если команда
#git #history #vscode #бородач
А что, если история гита может быть представлена не в виде вертикального списка?
А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?
А что, если можно не открывать интерфейс git blame на каждый чих?
Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.
Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Всем git, котаны!
P. S. вы же в курсе, что устанавливать расширения можно из консоли?
Как-то так:
code --install-extension pomber.git-file-history
Если команда
code недоступна, решение тут.#git #history #vscode #бородач
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Сегодня немного о том, как же хорошо иметь отклик аудитории в соцсетях.
Некто Бен Дикен (ну как, некто, его статью по B-деревьям и индексам в базах данных мы недавно читали) решил хайпануть на теме производительности разных языков и сред. Ну, на синтетических тестах, если уж совсем точно.
И выкатил видео, на котором тупо визуализировал результат выполнения 1 миллиарда итераций вложенных циклов: https://benjdd.com/loops/
Ну, условно, вот такой код:
Если коротко, то получилось, что JS в Node.js в 30 раз медленнее, чем C, скомпилированный в gcc с -O1 (минимальной оптимизацией).
Ох, как же его начали макать... Опустим очевидные моменты вроде тех, что никому в реальной жизни не интересно, как там миллиард циклов выполнится. Что гораздо интереснее — это как всё улучшить.
Как оказалось, улучшать есть что! На иллюстрации к посту вы видите результат коллективной работы большого числа людей. Как видим, JS лишь в 2-2.5 раза медленнее: https://benjdd.com/languages/
Как так вышло? Очень просто: know your tools.
Например, прям из простейшего: если в JS создать массив как new Array(10000), он будет заполнен мусором и готов будет принимать в себя любые типы элементов. А если new Array(10000).fill(0) — движок оптимизирует код под работу с целыми числами. И буст будет просто огромный.
Вот вам и динамический язык, кто бы мог подумать. Дальше — больше (
В общем, и обсуждение оригинального поста и обсуждение результата коллективной работы стоят вашего внимания.
Особенно если вы собираетесь вложенные циклы миллиардами итераций выполнять.
#performance #test
Сегодня немного о том, как же хорошо иметь отклик аудитории в соцсетях.
Некто Бен Дикен (ну как, некто, его статью по B-деревьям и индексам в базах данных мы недавно читали) решил хайпануть на теме производительности разных языков и сред. Ну, на синтетических тестах, если уж совсем точно.
И выкатил видео, на котором тупо визуализировал результат выполнения 1 миллиарда итераций вложенных циклов: https://benjdd.com/loops/
Ну, условно, вот такой код:
let array = new Array(10000);
for (let i = 0; i < 10000; i++) {
for (let j = 0; j < 100000; j++) {
array[i] = array[i] + j;
}
}
Если коротко, то получилось, что JS в Node.js в 30 раз медленнее, чем C, скомпилированный в gcc с -O1 (минимальной оптимизацией).
Ох, как же его начали макать... Опустим очевидные моменты вроде тех, что никому в реальной жизни не интересно, как там миллиард циклов выполнится. Что гораздо интереснее — это как всё улучшить.
Как оказалось, улучшать есть что! На иллюстрации к посту вы видите результат коллективной работы большого числа людей. Как видим, JS лишь в 2-2.5 раза медленнее: https://benjdd.com/languages/
Как так вышло? Очень просто: know your tools.
Например, прям из простейшего: если в JS создать массив как new Array(10000), он будет заполнен мусором и готов будет принимать в себя любые типы элементов. А если new Array(10000).fill(0) — движок оптимизирует код под работу с целыми числами. И буст будет просто огромный.
Вот вам и динамический язык, кто бы мог подумать. Дальше — больше (
new Int32Array(10000), например).В общем, и обсуждение оригинального поста и обсуждение результата коллективной работы стоят вашего внимания.
Особенно если вы собираетесь вложенные циклы миллиардами итераций выполнять.
#performance #test
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Ана Тюдор выложила уморительный SVG-фильтр, который позволяет превратить картинку в её контуры.
Выглядит он прям максимально просто:
А результат даёт интересный, на видео.
Как минимум, это очень применимо в двух случаях:
1. Если есть иконка в PNG, но нужно срочно сделать её контурной
2. Для генерации разных игр вроде «сопоставь объект с его формой» для детей. Весьма популярная тема, кстати.
Лучше всего работает на картинках с чёткими раздельными элементами. Но даже для более простых вариантов я уже нашёл применение и распечатал ребёнку стикеров :)
#css #svg #filter
Ана Тюдор выложила уморительный SVG-фильтр, который позволяет превратить картинку в её контуры.
Выглядит он прям максимально просто:
<filter id="outline">
<feGaussianBlur stdDeviation='3'/>
<feComponentTransfer>
<feFuncA type= "table" tableValues="-3 4 -3"/>
</feComponentTransfer>
</filter>
А результат даёт интересный, на видео.
Как минимум, это очень применимо в двух случаях:
1. Если есть иконка в PNG, но нужно срочно сделать её контурной
2. Для генерации разных игр вроде «сопоставь объект с его формой» для детей. Весьма популярная тема, кстати.
Лучше всего работает на картинках с чёткими раздельными элементами. Но даже для более простых вариантов я уже нашёл применение и распечатал ребёнку стикеров :)
#css #svg #filter
Media is too big
VIEW IN TELEGRAM
#ссылка дня
Сегодня день такой, про SVG-фильтры.
Когда я в какой-то очередной раз писал дифирамбы шейдерам, мой коллега справедливо заметил, что так-то SVG-фильтры прекрасно с этим справляются и незаслуженно обделены вниманием.
Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.
Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо на HTML-элемент и он как работал, так и будет работать!
Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).
Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders
Она позволяет с лёгкостью или нагенерировать нужных фильтров, или вообще принять идею для своих проектов.
Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.
Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: https://www.tg-me.com/htmlshit/1416
#svg #filters #html #shaders
Сегодня день такой, про SVG-фильтры.
Когда я в какой-то очередной раз писал дифирамбы шейдерам, мой коллега справедливо заметил, что так-то SVG-фильтры прекрасно с этим справляются и незаслуженно обделены вниманием.
Ну, вниманием они обделены не только со стороны сообщества веб-разработчиков, но и немного со стороны разработчиков браузеров. У WebGL и WebGPU перспективы шире.
Но это не означает, что у SVG-фильтров нет козырей в рукаве! Один из самых важных — их можно применить прямо на HTML-элемент и он как работал, так и будет работать!
Естественно, этим пользуется не только Ана Тюдор (кстати, не пользуется, она не работает как разработчик, только как художник в этом смысле и консультант).
Глядите, какая демка: https://svg-shaders.vercel.app/
И её код: https://github.com/shuding/svg-shaders
Она позволяет с лёгкостью или нагенерировать нужных фильтров, или вообще принять идею для своих проектов.
Повторю: HTML-элементы продолжают работать как работали и это в разы проще, чем спользовать решения на Three.js.
Кстати, прикольный и уместный вариант использования SVG-фильтров на контенте мы с вами уже наблюдали на примере... PornHub: https://www.tg-me.com/htmlshit/1416
#svg #filters #html #shaders
#такое дня
Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»
Ну… как бы… мне даже добавить нечего: https://observablehq.com/@mizinov/area-comparison (на русском)
#optical #illusion #perception #design #бородач
Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»
Ну… как бы… мне даже добавить нечего: https://observablehq.com/@mizinov/area-comparison (на русском)
#optical #illusion #perception #design #бородач
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня
Не, ну вы только посмотрите, что происходит!
Исторически, библиотеки в Storybook собирались или с помощью webpack (5 версии сейчас), или vite. Но на днях автор Parcel выложил и свою интеграцию!
GitHub: https://github.com/parcel-bundler/storybook?tab=readme-ov-file
Основная фишка проекта продемонстрирована прямо на видео: благодаря поддержке React Fast Refresh, можно обновлять компоненты или целые стори без потери состояния!🤯
Конечно, если пропсы или аргументы стори поменялись — стейт не сохранится, но тем не менее это очень круто, что появилось больше вариантов бандлинга для Storybook.
#react #storybook #parcel
Не, ну вы только посмотрите, что происходит!
Исторически, библиотеки в Storybook собирались или с помощью webpack (5 версии сейчас), или vite. Но на днях автор Parcel выложил и свою интеграцию!
GitHub: https://github.com/parcel-bundler/storybook?tab=readme-ov-file
Основная фишка проекта продемонстрирована прямо на видео: благодаря поддержке React Fast Refresh, можно обновлять компоненты или целые стори без потери состояния!
Конечно, если пропсы или аргументы стори поменялись — стейт не сохранится, но тем не менее это очень круто, что появилось больше вариантов бандлинга для Storybook.
#react #storybook #parcel
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
#заметка дня
Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»
И, вроде, очевидный ответ: ставь таймаут да отменяй его:
Осторожно,псевдокод jQuery
Но это было бы скучно и недостаточно для поста, не правда ли?
И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://www.tg-me.com/htmlshit/2639
Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?
А вот на видео видно.
Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?
С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!
Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100
Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.
Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.
По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.
Достаточно просто и эффектно.
#js #animation #tween
Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»
И, вроде, очевидный ответ: ставь таймаут да отменяй его:
Осторожно,
let r = null;
$button.on("mousedown", function(e) {
e.preventDefault();
e.stopPropagation();
r = window.setTimeout(function() {
$button.html('Clicked');
}, 3000);
});
$button.on("mouseup", function() {
$button.html('Hold me');
window.clearTimeout(r);
});
Но это было бы скучно и недостаточно для поста, не правда ли?
И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://www.tg-me.com/htmlshit/2639
Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?
А вот на видео видно.
Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?
С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!
Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100
Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.
Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.
По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.
function forward() {
tween.stop().to({
value: 2000
}, 3000).startFromCurrentValues();
}
function reverse() {
tween.stop().to({
value: 1000
}, 3000).startFromCurrentValues();
}
Достаточно просто и эффектно.
#js #animation #tween
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня
Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.
Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles
Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.
А ребята развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html
Ну и адаптеры есть буквально под все фреймворки.
Да, снег там тоже имеется.
#particles #effect #бородач
Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.
Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles
Я помню первое появление этой либы, они начинали с connected particles и были тупо везде. В итоге это настолько надоело, что я вообще выкинул их из головы.
А ребята развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html
Ну и адаптеры есть буквально под все фреймворки.
Да, снег там тоже имеется.
#particles #effect #бородач
#фишка дня
Помните, обсуждали фишку в Git — bisect? Ну, буквально, двоичный поиск косяка в коммитах: https://www.tg-me.com/htmlshit/3061
Суть в том, что ты приближаешься к проблемному коммиту с двух сторон.
А где ещё у нас могут быть проблемы, потому что мы сделали или установили что-то не то?
Да везде, буквально.
И сегодня речь пойдёт о похожей фишке в редакторе Visual Studio Code. Спряталась она в трёхточечном меню в панели расширений.
Вот обновили вы редактор, или открыли что-то, что до этого не открывали. Или куча расширений обновились разом и началось какое-то неопределённое поведение — жамкаем на Start Extension Bisect.
Редактор отключит все расширения и перезагрузится, спросив о проблеме — видна или нет. Каждый раз вам нужно будет подтвердить её наличие, или опровергнуть. И так несколько раз.
А потом предложит отправить отчёт об ошибке, ну или просто отключить ломающее всё расширение.
Как вам идея, котаны?
#vscode #extension #bisect
Помните, обсуждали фишку в Git — bisect? Ну, буквально, двоичный поиск косяка в коммитах: https://www.tg-me.com/htmlshit/3061
Суть в том, что ты приближаешься к проблемному коммиту с двух сторон.
А где ещё у нас могут быть проблемы, потому что мы сделали или установили что-то не то?
Да везде, буквально.
И сегодня речь пойдёт о похожей фишке в редакторе Visual Studio Code. Спряталась она в трёхточечном меню в панели расширений.
Вот обновили вы редактор, или открыли что-то, что до этого не открывали. Или куча расширений обновились разом и началось какое-то неопределённое поведение — жамкаем на Start Extension Bisect.
Редактор отключит все расширения и перезагрузится, спросив о проблеме — видна или нет. Каждый раз вам нужно будет подтвердить её наличие, или опровергнуть. И так несколько раз.
А потом предложит отправить отчёт об ошибке, ну или просто отключить ломающее всё расширение.
Как вам идея, котаны?
#vscode #extension #bisect