Would be very cool if this is done with a charting component that doesn't bring in > 1mb of JS framework (uncompressed) to draw the chart alone... but hey.
Hmm...
<div class="card">
vs.
<div class="w-1/4 mx-auto flex p-6 bg-white rounded-lg shadow-xl">
Which one is much less complicated and less code again?
Seems to be a smaller implementation for the MongoDB BSON data format.
Here's an article going over this and some competing formats.
https://yuhui-lin.github.io/blog/2017/08/01/serialization
edit: If this is for an API response structure, than you may want to also consider GRPC as a protocol (uses protobuf3)
It's worth noting, that this application does not use 12-factor[1] principles in general. There are no unit tests, and some Dockerfile or better yet a Docker compose file would be helpful in getting started with local development.
Aside: seems to be a SaaS provider for this service, unsure how much different the commercial offering is from the source offering.
1. https://12factor.net/
Decent rant in terms of where the divide between a website and a web application are... it's a bit muddled.
Personally, I build web based applications... some of them have been public facing, many have been internal. Some have been training simulations. In the end, what this has been comes down to what you're trying to do.
If you are dealing with mostly static content, I would favor using markdown docs and templates. For interactivity, I would suggest loading JS as a module and use the browser support.
If you are building an application, I reach for React + @material-ui/core + redux + parcel ... It's a combination of tools that makes it easier to build applications. Not everything needs to be a web application.
Even then... most modern JS is written in modules (cjs or esm)...
//module singleton...
let numProcess = 0;
export default { // or module.exports for cjs
increment: () => numProcess++,
};
Can still have the internal numProcess private.
Nice tutorial... SVG in React has been incredibly useful. I would make a minor suggestion, and that would be to just embed the styles into the component render directly, instead of CSS for this type of component, if making it for a reusable case.
This is also a really good approach for something like simple pie charts, etc... most of the frameworks that provide charts/graphs are very big, when all you might need is a little SVG. I've also used SVG for scalable content display and overlays... Inside the SVG, you can use the actual image (say from a scan) dimensions, where outside, you use the containing sizes.
React + SVG = <3
Hmm... <div class="card"> vs. <div class="w-1/4 mx-auto flex p-6 bg-white rounded-lg shadow-xl"> Which one is much less complicated and less code again?Even then... most modern JS is written in modules (cjs or esm)... //module singleton... let numProcess = 0; export default { // or module.exports for cjs increment: () => numProcess++, }; Can still have the internal numProcess private.