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
#ссылка дня
А ссылок будет много! Ведь на дворе декабрь, а значит — время рождественских календарей! Aka advent calendar.
Да, я в курсе, что сегодня второе число. Представьте, что я, например, гамбургский рождественский рынок. Который — естественно — не работает по воскресеньям.
1. Итак, нестареющая классика — Advent of Code. 24 задачи, решать которые можно на любом доступном языке программирования и любыми методами: https://adventofcode.com/
Есть у меня товарищи, которые в прошлом году чуть ли не лидировали в общем зачёте.
При этом, производительность не важна. Это вам не Литкод.
2. Advent of TypeScript: https://www.adventofts.com/
Не хватает типов на своей тырпрайзной работе? Вот напиши ещё!
3. Advent of CSS: https://www.adventofcss.com/
Поверстаем? :)
4. Advent of QA: https://www.rusau.net/qa-advent
Тестировщикам тоже досталось! Первый и единственный в подборке календарь, рассчитанный до 31 декабря :) Так что, если предыдущих вам было мало...
Добавляйте свои календари, я бы хотел, например, найти адвент для продактов!
Стоит отметить, конечно, что почти все эти календари рассчитаны до 24 числа. Так что придумайте себе развлечение на оставшуюся неделю — в российской и пост-советской традиции календари если и прижились, то до Нового года, а не Рождества :)
#advent #calendar
А ссылок будет много! Ведь на дворе декабрь, а значит — время рождественских календарей! Aka advent calendar.
Да, я в курсе, что сегодня второе число. Представьте, что я, например, гамбургский рождественский рынок. Который — естественно — не работает по воскресеньям.
1. Итак, нестареющая классика — Advent of Code. 24 задачи, решать которые можно на любом доступном языке программирования и любыми методами: https://adventofcode.com/
Есть у меня товарищи, которые в прошлом году чуть ли не лидировали в общем зачёте.
При этом, производительность не важна. Это вам не Литкод.
2. Advent of TypeScript: https://www.adventofts.com/
Не хватает типов на своей тырпрайзной работе? Вот напиши ещё!
3. Advent of CSS: https://www.adventofcss.com/
Поверстаем? :)
4. Advent of QA: https://www.rusau.net/qa-advent
Тестировщикам тоже досталось! Первый и единственный в подборке календарь, рассчитанный до 31 декабря :) Так что, если предыдущих вам было мало...
Добавляйте свои календари, я бы хотел, например, найти адвент для продактов!
Стоит отметить, конечно, что почти все эти календари рассчитаны до 24 числа. Так что придумайте себе развлечение на оставшуюся неделю — в российской и пост-советской традиции календари если и прижились, то до Нового года, а не Рождества :)
#advent #calendar
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Думали, научились отличать
Не, так не пойдёт. И дело даже не в том, что у нас есть ещё
Когда придумывали
Но тут у нас появились усложнения процесса скролла:
Видите ли, согласно спецификации
А что это значит для нас, как пользователей? Что ни
А ещё, браузер буквально не даст вам адекватно настроить индивидуальное скрытие по осям, он всегда выставит auto на вторую ось, что приведёт к скроллу.
И тут на помощь приходит
Вообще, описывать это словами довольно сложно. Потому я очень рекомендую почитать интерактивную статью Ахмада Шадида: https://ishadeed.com/article/overflow-clip/
Самый говорящий пример из неё вынесен в иллюстрацию к посту.
Думали, научились отличать
overflow: scroll
от overflow: auto
и всё на этом? Не, так не пойдёт. И дело даже не в том, что у нас есть ещё
visible
и hidden
. Дело в том, что у нас есть clip
! И вот тут-то и начинается самое интересное.Когда придумывали
hidden
, задача была простая: скрыть всё, что не помещается в контейнер, чтобы посетителю не пришлось скроллить. Вообще.Но тут у нас появились усложнения процесса скролла:
position: sticky
и ScrollAnimation API. И с обоими есть проблемы.Видите ли, согласно спецификации
overflow: hidden
создаёт инстанс скролла (контейнер), который буквально перехватывает взаимозействие пользователя с ним, но при этом — позволяет обратиться скриптом к модели и подвинуть контейнер куда надо. Подробнее есть у Брамуса: тык.А что это значит для нас, как пользователей? Что ни
sticky
, ни таймлайн-анимации, определённые в CSS, работать не будут, потому что hidden сломает механизм поиска ближайшего доступного скролла.А ещё, браузер буквально не даст вам адекватно настроить индивидуальное скрытие по осям, он всегда выставит auto на вторую ось, что приведёт к скроллу.
И тут на помощь приходит
clip
! Он не создаст скролл-контейнер и позволит браузеру правильно обрезать и анимировать элемент, а пользователю — с ним провзаимодействовать.Вообще, описывать это словами довольно сложно. Потому я очень рекомендую почитать интерактивную статью Ахмада Шадида: https://ishadeed.com/article/overflow-clip/
Самый говорящий пример из неё вынесен в иллюстрацию к посту.
#ссылка дня
Очень коротенькое дополнение в коллекцию адвент-календарей, которую мы собрали вчера: https://www.tg-me.com/htmlshit/3317
Правда, на сей раз без задачек :)
Календарь статей по производительности веба!
Web Performance Calendar: https://calendar.perfplanet.com/2024/
Каждый день на протяжении декабря будет появляться по статье, посвящённой тому или иному аспекту производительности.
Темой первого декабря был Закон Гудхарта: «Когда мера становится целью, она перестает быть хорошей мерой», очень хорошая вводная статья о том, что не надо бездумно гнаться за показателями.
Темой вчера стал общий обзор терминов.
А сегодня — а пока не знаю, ждём открытия окошка!
#advent #calendar #webperf #performance
Очень коротенькое дополнение в коллекцию адвент-календарей, которую мы собрали вчера: https://www.tg-me.com/htmlshit/3317
Правда, на сей раз без задачек :)
Календарь статей по производительности веба!
Web Performance Calendar: https://calendar.perfplanet.com/2024/
Каждый день на протяжении декабря будет появляться по статье, посвящённой тому или иному аспекту производительности.
Темой первого декабря был Закон Гудхарта: «Когда мера становится целью, она перестает быть хорошей мерой», очень хорошая вводная статья о том, что не надо бездумно гнаться за показателями.
Темой вчера стал общий обзор терминов.
А сегодня — а пока не знаю, ждём открытия окошка!
#advent #calendar #webperf #performance