Pitch – CSS Components and Tweaks for Your itch.io Pages
Introducing our (experimental) CDN!
Introducing the thing that nobody asked for: the Pitch CDN – content component delivery network 🎉
Basically its a tiny link that’ll give you the CSS components that you want.
@import url(
'https://pitch.nnda.dev/ accordion, info-list, label'
);
When you add the code above to the custom CSS field, it’ll give you Accordion, Info List, and Label components. Without having to select, and copy-paste them manually from the app.
Why CDN??
Cleaner, Shorter CSS Codes
Compare it to the raw CSS copy-pasted from Pitch (left), and the one using CDN (right). It is much more shorter and cleaner to read. This is especially useful for profile pages, since it has a limit of 5120 characters on the custom CSS.
And talking about profile pages, for now, like 90% of the components are not really compatible with it, but that’ll change with the next update.
Always Up-to-date
When the CSS components are updated, you don't need to re-pick and then copy-paste the components again to your CSS field. As the CSS served from the CDN are guaranteed to be their most latest version.This also may force breaking changes for components in the future. Like if a component uses .custom-uwu class, and in the next update it uses .custom-owo instead. I’m looking for a way to version the delivered components, so that this wouldn’t be a problem.
Why NOT CDN??
Slower
The use of@import is frowned upon in CSS because of this reason. It creates another request to the server, pick which CSS components that are being requested, and then serve it.
Which is slower than having the manually-picked CSS components already sitting in your page.
Limited Requests
The service run on budget free plan of Cloudflare Workers, which is limited to 100.000 requests per day, so, I'd advise to not use it for production (yet). Or if your project expects lots of visitors.And if the requests hits the 100.000 limit, no CSS for anybody using the CDN until the requests limit resets the next day :(
Available Components
For now, only some few select components are available via the CDN:
accordioncalloutimage-comparisoninfo-listinputlabelread-moretabletimeline-listtooltip
The list is defined in the following lines on the TypeScript source code.
IMPORTANT NOTE!
Please do not type or change the URL directly in the itch.io custom CSS field!!!
Everytime time you type or change the URL directly there, it’ll count as a new URL, which creates a new request! burning up the limits!
Type/change it somewhere else, like in a text editor, and then copy-paste it to the custom CSS field.
Honestly, I just want an excuse to learn and make CF Workers/back-end web project. And this seems like the best time and opportunity to develop one. Use it with caution, as its still in its very early prototype stage, and also made with just like 50 lines of TypeScript.
The next update will be big, like major version bump big. But, I’m afraid it’ll took quite a long, very long time.
As always, thank you for reading, and for all the support, and don’t forget to update your browsers.
Comments
Log in with itch.io to leave a comment.
Really Cool !!!