a screenshot of the lite-vimeo page on npm
Home » Blog » Lite Vimeo: My first npm package!

Lite Vimeo: My first npm package!

I really believe in open-source, and one of my go-to packages has been this lite-vimeo package by Alex Russell. However, it’s not been updated in a while, and in my work with the Choctaw Nation of Oklahoma, I’ve really needed a version that can handle unlisted videos. Since it’s just file and vanilla JS, it seemed easy enough to do, so I used this need as an opportunity to learn something new: publishing a package to npm and contributing to the open-source nature of the internet!

I ran into a small roadblock: unlisted videos can’t use the same API endpoint to grab thumbnails without an API key. Because of that, I also added a customPlaceHolder attribute to allow users to…..set a custom placeholder. Also, the current initImagePlaceholder method uses an v2 of the Vimeo API, whose documentation no longer exists. Thus, I can’t imagine it’s a super stable endpoint and I don’t think a fetch failure is handled super gracefully.

There are lots of little (and big) ways this package could be improved upon, but the biggest ticket items are done, so I’m counting it as a win!

The Takeaways:

  • It was a good learning experience to set up npm
  • It was good practice to work with Github actions (.yml files are still so annoying to me)
  • It was good practice doing vanilla-javascript-but-also-there’s-types-in-the-docs-so-it’s-typesafe-sort-of, which seems to be a trendy thing to do for package/library authors.

Since I didn’t really write a ton of the business logic of the code, I don’t really have a lot to say about it. I wouldn’t have used get and set methods because I’m unfamiliar with them and they don’t seem to be necessary to this project, but it was good practice (even if it made my brain hurt).

Bonus: Google Tag Manager Script!

I also wrote a script that works with Google Tag Manager to track video views. It’s not perfect, but it’ll get you at least 70-90% of the way there. Plus, it’s open-source and on Github too, so you could also add some issues or make a PR of your own to improve it!