#библиотека дня
Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без JavaScript-библиотек тут никуда.
Из бесплатных и/или открытых: Recharts, Chart.js, D3 для чего похардкорней, Google Charts… Из коммерческих у всех на слуху, естественно, Highcharts.
Ещё есть интересные способы рендера диаграм в HTML и SVG, но они оба достаточно сложны и подходят, скорее, для проектов с SSR (server-side rendering), ведь сначала нужно правильно сгенерировать разметку.
Но я хочу поговорить о подходе без скриптов вообще. Одним только CSS. Семантично. С дикой скоростью отрисовки для десятков диаграмм.
Откуда возьмутся десятки диаграмм? Ну, последний год нам это прекрасно продемонстрировал.
Что такое диаграмма? Это лишь способ представления данных. Чаще всего — табличных данных. На ум приходит очевидное: нужно лишь правильно наложить стили на таблицу и бум – готово.
Но не всё так просто. До недавнего времени у нас не было рабочих инструментов для этого. CSS Grid, flex и clip-path достигли нужного уровня поддержки давно, но не было главного: простого способа передать данные в CSS. Догадываетесь, о чём речь?
Ага. Custom properties, пользовательские свойства. Переменные, если хотите. Их киллер-фичей является возможность установить значение свойства через атрибут style. Он подхватится стилями и позволит изменить вид элемента до неузнаваемости. Область применения безгранична.
Итак, меньше слов больше ссылок. Вашему вниманию предлагается Charts.css: https://chartscss.org/
Принцип работы прост: берётся таблица, указываются пара классов, основной и тип желаемой диаграммы, и в некоторых случаях – в стили через установку значений свойств ячеек передаются реперные точки. Всё, ваша таблица стала, например столбчатой диаграммой.
Да, это всё ещё чуть сложнее, чем просто передать немного JSON-а, но не забывайте, что таблица – максимально семантична и в некоторых условиях может быть отображена в мини-виджетах Google и Островах Яндекса, что прекрасно для SEO.
Ну и при печати или генерации PDF можно будет легко выбрать нужный формат.
Библиотека всё ещё в разработке и самые вкусные решения впереди, присоединяйтесь!
#css #table #chart #diagram
Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без JavaScript-библиотек тут никуда.
Из бесплатных и/или открытых: Recharts, Chart.js, D3 для чего похардкорней, Google Charts… Из коммерческих у всех на слуху, естественно, Highcharts.
Ещё есть интересные способы рендера диаграм в HTML и SVG, но они оба достаточно сложны и подходят, скорее, для проектов с SSR (server-side rendering), ведь сначала нужно правильно сгенерировать разметку.
Но я хочу поговорить о подходе без скриптов вообще. Одним только CSS. Семантично. С дикой скоростью отрисовки для десятков диаграмм.
Откуда возьмутся десятки диаграмм? Ну, последний год нам это прекрасно продемонстрировал.
Что такое диаграмма? Это лишь способ представления данных. Чаще всего — табличных данных. На ум приходит очевидное: нужно лишь правильно наложить стили на таблицу и бум – готово.
Но не всё так просто. До недавнего времени у нас не было рабочих инструментов для этого. CSS Grid, flex и clip-path достигли нужного уровня поддержки давно, но не было главного: простого способа передать данные в CSS. Догадываетесь, о чём речь?
Ага. Custom properties, пользовательские свойства. Переменные, если хотите. Их киллер-фичей является возможность установить значение свойства через атрибут style. Он подхватится стилями и позволит изменить вид элемента до неузнаваемости. Область применения безгранична.
Итак, меньше слов больше ссылок. Вашему вниманию предлагается Charts.css: https://chartscss.org/
Принцип работы прост: берётся таблица, указываются пара классов, основной и тип желаемой диаграммы, и в некоторых случаях – в стили через установку значений свойств ячеек передаются реперные точки. Всё, ваша таблица стала, например столбчатой диаграммой.
Да, это всё ещё чуть сложнее, чем просто передать немного JSON-а, но не забывайте, что таблица – максимально семантична и в некоторых условиях может быть отображена в мини-виджетах Google и Островах Яндекса, что прекрасно для SEO.
Ну и при печати или генерации PDF можно будет легко выбрать нужный формат.
Библиотека всё ещё в разработке и самые вкусные решения впереди, присоединяйтесь!
#css #table #chart #diagram
#инструмент дня
Когда я в очередной раз уронил продакшен, мне было сказано сесть и отрисовать диаграммы работы системы и пометить на них точки сбора логов, трекинга.
Чтобы знание было доступно всем.
В нашем Confluence (wiki) конечно же был инструмент для рисования, на базе draw.io. Штука хорошая, но мне хотелось создавать и хранить диаграммы в коде, если уж не на базе кода. Совместно с текущей документацией по развёртыванию.
И такой инструмент нашёлся! И назвывается он Mermaid:
https://mermaid-js.github.io/mermaid/#/
Прекрасно встраивается в Markdown, имеются и плагины для предпросмотра в VS Code, Confluence, WebStorm и так далее.
И конечно же, библиотеки для интеграции с различными языками.
Естественно, Mermaid не один такой, есть Kroki, blockdiag и ещё несколько. Но мне Mermaid зашёл больше всех.
Задачу я решил, CTO в восторге. Поддерживать легко.
А недавно поступило предложение о поддержке в GitHub Markdown, будет круто!
#markdown #mermaid #diagram
Когда я в очередной раз уронил продакшен, мне было сказано сесть и отрисовать диаграммы работы системы и пометить на них точки сбора логов, трекинга.
Чтобы знание было доступно всем.
В нашем Confluence (wiki) конечно же был инструмент для рисования, на базе draw.io. Штука хорошая, но мне хотелось создавать и хранить диаграммы в коде, если уж не на базе кода. Совместно с текущей документацией по развёртыванию.
И такой инструмент нашёлся! И назвывается он Mermaid:
https://mermaid-js.github.io/mermaid/#/
Прекрасно встраивается в Markdown, имеются и плагины для предпросмотра в VS Code, Confluence, WebStorm и так далее.
И конечно же, библиотеки для интеграции с различными языками.
Естественно, Mermaid не один такой, есть Kroki, blockdiag и ещё несколько. Но мне Mermaid зашёл больше всех.
Задачу я решил, CTO в восторге. Поддерживать легко.
А недавно поступило предложение о поддержке в GitHub Markdown, будет круто!
#markdown #mermaid #diagram
👍12🔥3
#статья дня
Я не так давно писал про инструмент для построения диаграм в Markdown-файлах, Mermaid.
Так вот, в том посте я говорил, что поступило предложение о поддержке Mermaid в GitHub.
И таки да! Завезли: https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
Рендерится, правда, в iframe. С другой стороны, ну и что.
Осталось дождаться пока завезут в GitHub Enterprise.
К слову, в предыдущем посте я не упомянул, что поддержка языков диаграм Mermaid и PlantUML имеется и в продуктах от JetBrains: PhpStorm, WebStorm, IDEA и т. д. Прямо во встроенном плагине Markdown.
#github #diagram #mermaid
Я не так давно писал про инструмент для построения диаграм в Markdown-файлах, Mermaid.
Так вот, в том посте я говорил, что поступило предложение о поддержке Mermaid в GitHub.
И таки да! Завезли: https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
Рендерится, правда, в iframe. С другой стороны, ну и что.
Осталось дождаться пока завезут в GitHub Enterprise.
К слову, в предыдущем посте я не упомянул, что поддержка языков диаграм Mermaid и PlantUML имеется и в продуктах от JetBrains: PhpStorm, WebStorm, IDEA и т. д. Прямо во встроенном плагине Markdown.
#github #diagram #mermaid
👍5🔥4
#инструмент дня
В копилку декларативных языков описания диаграмм, где уже лежат Mermaid и PlantUML, встречайте: D2.
https://d2lang.com/
…интересно, это реверанс в сторону D3.js? 🤔
Так или иначе, я предпочитаю использовать языки описания диаграмм визуальным инструментам. Наверное, профессиональная деформация.
…или просто надо перестать использовать тачпад и вернуться на мышь. Замечали, что мысли иначе работают?)
#diagram #language
В копилку декларативных языков описания диаграмм, где уже лежат Mermaid и PlantUML, встречайте: D2.
https://d2lang.com/
…интересно, это реверанс в сторону D3.js? 🤔
Так или иначе, я предпочитаю использовать языки описания диаграмм визуальным инструментам. Наверное, профессиональная деформация.
…или просто надо перестать использовать тачпад и вернуться на мышь. Замечали, что мысли иначе работают?)
#diagram #language
❤4
#инструмент дня
Миграции с JavaScript на TypeScript часто заходят не туда. Или не заканчиваются. Или откатываются. Зачастую в лучшем случае весь новый код начинает писаться на TypeScript и всё на этом.
Да, ещё не факт, что оно вам надо вообще, но это тема иной беседы.
Итак, с чего же начать вашу миграцию если автоматизированные средства, расставляющие везде any, вам не подходят, а
Начните с модулей с наибольшим числом зависимостей, говорит нам Matt Pocock, а он в общем-то в курсе, о чём утверждает, он учит людей тайпскрипту фулл-тайм :)
А как найти эти самые модули? Очень просто, возьмите построитель диаграмм зависимостей. Madge вполне подойдёт: https://github.com/pahen/madge
Ну и никто не мешает весь новый код писать сразу на TS.
#typescript #javascript #ts #js #diagram #deps
Миграции с JavaScript на TypeScript часто заходят не туда. Или не заканчиваются. Или откатываются. Зачастую в лучшем случае весь новый код начинает писаться на TypeScript и всё на этом.
Да, ещё не факт, что оно вам надо вообще, но это тема иной беседы.
Итак, с чего же начать вашу миграцию если автоматизированные средства, расставляющие везде any, вам не подходят, а
//@ts-nocheck — для быдла?Начните с модулей с наибольшим числом зависимостей, говорит нам Matt Pocock, а он в общем-то в курсе, о чём утверждает, он учит людей тайпскрипту фулл-тайм :)
А как найти эти самые модули? Очень просто, возьмите построитель диаграмм зависимостей. Madge вполне подойдёт: https://github.com/pahen/madge
Ну и никто не мешает весь новый код писать сразу на TS.
#typescript #javascript #ts #js #diagram #deps
🔥9❤1
#инструмент дня
А есть ли среди моих подписчиков школьники и студенты/аспиранты? Потому что то, что я нашёл, очень может пригодиться при подготовке различного рода рефератов, презентаций и научных работ.
И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!
Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:
...и так далее. Прелестно же!
Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/
Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.
Всем науки, котаны!
#dsl #diagram #science
А есть ли среди моих подписчиков школьники и студенты/аспиранты? Потому что то, что я нашёл, очень может пригодиться при подготовке различного рода рефератов, презентаций и научных работ.
И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!
Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:
SingleBond(N2, C4)
SingleBond(C4, C5)
DoubleBond(C5, C6)
...и так далее. Прелестно же!
Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/
Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.
Всем науки, котаны!
#dsl #diagram #science
👍9❤1❤🔥1
#инструмент дня
А есть ли среди моих подписчиков школьники и студенты/аспиранты? Потому что то, что я нашёл, очень может пригодиться при подготовке различного рода рефератов, презентаций и научных работ.
И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!
Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:
...и так далее. Прелестно же!
Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/
Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.
Всем науки, котаны!
#dsl #diagram #science #бородач
А есть ли среди моих подписчиков школьники и студенты/аспиранты? Потому что то, что я нашёл, очень может пригодиться при подготовке различного рода рефератов, презентаций и научных работ.
И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!
Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:
SingleBond(N2, C4)
SingleBond(C4, C5)
DoubleBond(C5, C6)
...и так далее. Прелестно же!
Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/
Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.
Всем науки, котаны!
#dsl #diagram #science #бородач
👍11
#ссылка дня
Наверное, стоило прислать это сразу после пятничных котов :)
Итак, вашему вниманию: диаграмма разрешения кодов HTTP.
Тут: https://github.com/for-GET/http-decision-diagram?tab=readme-ov-file
Разрешения не в смысле "можно ли", а в смысле процесса принятия решения, когда какой код уместен.
Она довольно большая и основывается на большом количестве RFC: RFC7230, RFC7231, RFC7232, RFC7233, RFC7234 RFC7235.
Ну и там, где в спецификациях оставлены пробелы — дополняет.
Всё весьма хорошо укладывается в голове.
#http #diagram
Наверное, стоило прислать это сразу после пятничных котов :)
Итак, вашему вниманию: диаграмма разрешения кодов HTTP.
Тут: https://github.com/for-GET/http-decision-diagram?tab=readme-ov-file
Разрешения не в смысле "можно ли", а в смысле процесса принятия решения, когда какой код уместен.
Она довольно большая и основывается на большом количестве RFC: RFC7230, RFC7231, RFC7232, RFC7233, RFC7234 RFC7235.
Ну и там, где в спецификациях оставлены пробелы — дополняет.
Всё весьма хорошо укладывается в голове.
#http #diagram
👍10❤3🫡1