docs: displaying function sizes #36
Conversation
|
@aleksandrjet is attempting to deploy a commit to the Formkit Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Awesome! I like the smaller ones @aleksandrjet — and if we need to tweak them we can. I way prefer the small ones over the table. When you get it to a good place where you are wanting me to merge I can do that. If we need to do any further polishing we can. Great work! |
| import * as funcs from "../../dist/index.cjs" | ||
|
|
||
| const formatBytes = (size) => { | ||
| return bytes.format(size, { unitSeparator: " " }) |
There was a problem hiding this comment.
Hey @aleksandrjet. Nice addition to the docs. A minor addition to make it less dependent on third-party libraries:
const bytesFormatter = Intl.NumberFormat("en", {
notation: "compact",
style: "unit",
unit: "byte",
unitDisplay: "narrow",
})
console.log(bytesFormatter.format(5351)) // "5.4KB"
Feel free to delete the comment if it's off-topic.
P.S. I am not the developer of Tempo.
There was a problem hiding this comment.
This is a good addition, but I see a small problem with the native format display due to the missing space, which I was not able to add through the config
In my opinion, the option with bytes-iec is read better. Also bytes-iec is used in size-limit which is already present in the dependencies
Intl.NumberFormat
bytes-iec
There was a problem hiding this comment.
In this case you could use .replace() or .formatToParts() to add a space, but that would complicate the code and your solution with bytes-iec looks more readable. Good point. 👍🏻
|
I added the Also you need to pay attention to displaying sizes of p.s. The p.p.s. I see that there is no link to |
|
Awesome! great work @aleksandrjet. Ive merged this and iterated a bit more on the styles. One thought I had on this all — there is an initial size in brotli and gzip which is included in each of those. if you sum the total of all the functions its way more than the total size of the package because each contains quite a bit of compression information. addDays for example, is 524Bytes on the page, but its incremental size is tiny. I dont know exactly how we could make that more clear on the site though |
After discussing #28 I prepared mr showing the function sizes in documentation. @justin-schroeder talked about table with sizes at the end of docs, but I think it would be helpful for users to see the sizes right next to the description. Also I think a github link for each function would be useful.
I made a few variants with different sizes:
Icon size - 24px, font-size - 14px (sm), padding - 8px
Icon size - 24px, font-size - 14px (sm), padding - 4px
Icon size - 16px, font-size - 12px (xs), padding - 4px
Usage of sizes from the file is not ready yet, I'm still waiting for comments on the design
What do you think? Should I choose one of the variants or should I still make a table?