Будни разработчика
14.5K subscribers
1.39K photos
403 videos
8 files
2.31K links
Download Telegram
#инструмент дня

Так, в дополнение к JSON Hero обнаружился ещё один очень крутой и полезный инструмент для визуального представления JSON: https://jsoncrack.com/

JSON Crack не даст красивого представления отдельных полновесных сущностей, как Hero, но зато отобразит JSON в виде древовидного графа, ну или диаграммы, если хотите. Весьма удобно, если нужно быстро окинуть взглядом типы данных и связи.

Лишним не будет, короче.

P. S. Есть и тёмная тема, и desktop-вариант и возможность встраивания на сайт.

#json #graph #tree
🔥15🤔1🍓1
#расширение и #статья дня

Вот эта вот странная блок-схема на иллюстрации — сгенерированное VS Code-расширением ReacTree дерево компонентов одной из частей нашего продукта.

Ссылка: https://marketplace.visualstudio.com/items?itemName=ReacTreeDev.reactree

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

Расширение сыроватое. Например, оно пока не умеет в условный рендеринг и обрывает построение. Ну, спасибо, хотя бы, что не падает. Хотя схему React Router-а оно понимает прекрасно (на иллюстрации).

Помимо построения дерева, показывает пропсы компонентов. Может быть удобно. Желаю им всяческого развития, короче.

А ещё они заодно написали статью о том, как разрабатывать расширения VS Code, использующие WebView: https://medium.com/@michaelbenliyan/developers-guide-to-building-vscode-webview-panel-with-react-and-messages-797981f34013 Возможно, кому-то будет полезно.

Делитесь схемами, котаны 🙂

#react #tree #vscode #extension
👍8
#статья дня

Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.

В моей предыдущей компании были очень популярны турниры по настольному футболу, aka foosball. Не до драк, конечно, но со своим лором, правилами и даже традициями. Например, проигравший увековечивал своё имя под столом.

Так вот, к чему это я.

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

Как вам такое: отрисовка дерева с помощью... списков!

Вот, глядите: https://codepen.io/alinaki/pen/ZYOOWOL

Не, ну буквально. У автора четыре статьи, от горизонтальных и вертикальных деревьев до более сложных конструкций вроде центрально-ориентированной диаграммы (вот то, что на иллюстрации, к таким как раз относится) и прочих экспериментов.

Начало тут: https://fractaledmind.com/2018/03/05/css-tree/

Ну что, будем таки писать такой сервис? Или максимально гибкая отрисовка на холсте наше всё?

#css #html #tree #list
6