Hi y’all, it is that time of the month again and I’ve been wanting to talk about a really cool tool I’ve been using lately.I know a lot of you probably already know about jsdelivr but, as it happened to me, maybe not all of you know how it can be of use for you or how you add it to your stack, so let me help you change that.
What is JSDelivr?
Putting it in their own words… it is a free CDN for Open Source Projects but, what does that mean?
Well a CDN is a network of different servers that share the content from a particular place or it’s origin throughout the world by caching content close to each end user that tries to access the internet. The content they try to reach gets stored first on the origin server and is then replicated and stored elsewhere as needed.
In simpler words a CDN is an easy way to share content through the internet by replicating it in different locations thus making it more accessible for everyone who needs it.
In this case JSDelivr is a tool that will allow you to share your code ( specially JS and ESM since it is optimized for it ) through the internet so it can be easily integrated in your (or anyone else’s ) projects.
My experience
As I mentioned during my last blog I’ve been working on my Webflow trickery packages and a way to share them to the world, during this time I tried a couple of different ways to do so, first thing I did was I added them in the code section of Webflow which doesn’t work that well since
- We have limited characters and
- Why would I continuously copy and paste the same code in every page it just doesn’t make sense.
Then I tried uploading a js file with everything in it to my site but I don’t use every integration on every page and same as the the option above why would I do this to every site, just having random js files everywhere doesn’t make much sense.
Lastly while looking over the internet I saw a solution I’ve actually used before to get plugins and integrations from more people but never tried on my own. this option was JSDelivr so I thought well why not give it a try?
Not gonna lie this totally made it for me, it allows me to have small modules so either my self or someone else trying to use my code can access it easily and not only that but it also allows us to add multiple modules in one link, I’ll share a bit of the usability in a moment but if you’re a dev out there trying to put your code out for more people you should definitely give it a try.
Usability
Now for the most important part and the one part I assume people may be looking forward to, how this works.
I’ll first share with y’all their documentation since in my case I’ll be only explaining the GitHub integration for now.
So here’s how it works!
First of all you need the base URL: https://cdn.jsdelivr.net/gh/{username}/{repo}/
here you replace {username} with the GitHub username and {repo} with the repository name for the project.
Append that URL with the path to the file you want to access in the project. For example, in my Webflow Trickery library, the JavaScript files are located in the /dist directory within it’s functionality directory /formaters.
If you want to get the script related to the number formatting plugin you’d use this:
https://cdn.jsdelivr.net/gh/JorchCortez/Weblfow-utils/dist/formaters/FormatNumber.js
You can also take advantage of versioning by adding @{version-number} to the repository name. You can target major, minor, and patch releases as desired.
For versioning I’d recommend using releases, setting a release with a tag 1.0.0, 1.0.1, 1.0.2, … etc. so you can have a cleaner way of managing your code.
Now some suggestions to keep in mind:
<div class='c-code-text'>
<!-- Always get the latest version -->
<!-- Not recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/gh/JorchCortez/Weblfow-utils/dist/utilities/ReadTime.js"></script>
<!-- Get minor updates and patch fixes within a major version -->
<script src="https://cdn.jsdelivr.net/gh/JorchCortez/Weblfow-utils@1/dist/utilities/ReadTime.js"></script>
<!-- Get patch fixes within a minor version -->
<script src="https://cdn.jsdelivr.net/gh/JorchCortez/[email protected]/dist/utilities/ReadTime.js"></script>
<!-- Get a specific version -->
<script src="https://cdn.jsdelivr.net/gh/JorchCortez/[email protected]/dist/utilities/ReadTime.js"></script>
</div>
This being said, I’ll be updating the docs on my projects in the following weeks so you might want to take a look to my Webflow Trickery library which will contain a closer look towards how this should be added to your projects.
Final thoughts
A really cool tool for those who want to share their code or use someone else’s code and needs a quick and relatable way to integrate it with their own, also jsDelivr supports NPM and WordPress which makes it a pretty flexible tool for a lot of different needs.
