Most favourite time of the year is over. The summer I mean. More and more time to sit behind screen. Tried to be useful and started new project. Most probably from wrong end but let's see ...
Started to automate some stuff at home but as ordered harware still sails somewhere, started to play with dashboard options. All my experiences told me that charts should be avoided to keep the site performance at acceptable level. But from what I actually need I cannot avoid them. So the challenge begun. Find something lightweight and performant but stll good-looking. And gauges I need also. Those I have already prototyped and those may work. And the layout. Some framework? Or ist it really too hard to figure out with modern CSS?
All those things in my mind, started to pototype. Mobile first. That leads immediately to performance requirements and back to the questions what to use as the base. And the correct answer is - nothing. Raw Metal. DIY.
And here it is. Dashboard flow.
With template node giving me the body tags
Then turned into the Javascript and CSS world and created this:
Which when turned to landscape goes like this:
And of course for bigger screens the cards do arrange as needed
Ok but what about the performance then? Charts and stuff all in play.
Well it turned out pretty well. At least for now. I stresstested charts with over 2000 datapoints (I'll never going to reach such amounts in real usage) and that brouht sun back into my home. No problems to report.
The lighhouse report:
That fancy charting library is chartist: GitHub - chartist-js/chartist: Simple responsive charts
Gauges are html CSS only
The javascript (minified) for whole page weigths 54kb and non-minified CSS adds 32kb. Plus some images ..
That's it for now.. waiting for harware arrival to complete the thing.
9 Likes
Don't forget that you can simplify your flows even further by using uibuilder which will provide you your websocket connections with auto-reconnect and more as well as managing any libraries you may wish. And you can work with a build-step if you want to squeeze the last bit of performance/memory from the client code.
Use the IIFE or ESM versions of the "new" uibuilder client library to get smaller code and higher efficiency even that the previous versions.
I've even recently been working on a simple service worker example that lets you pre-load all the resources and use the uibuilder client code as a "native" web app, speeds up loading after the first use.
1 Like
And here it is. Dashboard flow.
This is my default setup. An end-point and a websocket.
I do use alpinejs, which allows you to instantly inject/replace elements into the page, ie you can render multiple elements/pages in-place by just receiving another input message over the websocket, no reloading.
For CSS I use the tailwindcss JIT library (this is not small, but serving from a LAN is fine), it is absurd how quick you can make good looking layouts and css while not having to write actual css (no stylesheets, everything inline and it's glorious).
Although I am not mostly not a fan of skeuomorphism, I do love these gauges, they look slick.
1 Like
I know the tailwind but not well enough. So for me it will be "fight with it" not "write it". And that is difference for sure.
2 Likes
I've tried it a few times and I agree, it feels far too complex for most things. One of the reasons I have, in the past, recommended the use of bootstrap-vue along with VueJS for people just getting going with writing their first web apps is that it looks decent straight from the box - no messing with CSS needed at all very often.
Of course, having rather gotten to like dark modes, I went to the opposite extreme in the last release of uibuilder and created a brand new CSS file that gives a starting framework that works in light and dark and lets to change and adjust on the fly using simple functions. Not complete by any means (and input would be more than welcome) but is certainly a decent start point when lots of the CSS frameworks really seem to struggle with light/dark switching.
Tailwind ? Or VueJS, buildsteps ? Yes :')
If you know css you can work with tailwind, it is supersimple, sure you need to get the hang of it but then you can do it without documentation. I don't see that with bootstrap and every bootstrap site looks the same to me :') Light/dark/dynamic theming are easy with css variables when using hsl properties, no need for frameworks.
For the page hotNipi created, I probably would also go the native route as there is not much styling required, but before you know it, it grows out to something bigger!
Tailwind. Vue 2 with bootstrap-vue does not need a build step.
That is, of course a potential downside. But if you think about it as a beginner creating a home automation dashboard, it is a significant benefit, the same as Dashboard. get the structure and logic done really quickly then go back and change the look and feel if you really want to.
There are many other options too, I was just pointing out that I've personally found Tailwind rather too intrusive in action and so I keep moving away from it. I've no doubt that for a more complex and customised look and feel, it would be a great tool.
It grows only the way I know so how can it be bigger than me? 
2 Likes
