When developing a program in JavaScript (or any language, for that matter) you will often find yourself choosing between DIY code and existing code snippets to do what you need. Being able to find the snippet you need when you need it can save you a lot of time and prevent those JavaScript writing headaches.
But where should you start looking? If your answer is “Google” then you should really keep reading, as we’re about to save you a lot of precious hours of scrolling through search results.
Disclaimer: This article was written by yours truly and originally published on the blog of Codota, a cool startup bringing AI to your IDE.
The Haystack Overflow
Trying to find the code snippet you need with Google, or even searching GitHub gists, shared GitLab snippets, and (of course) StackOverflow is literally like trying to find a needle in a haystack. Even if you have advanced Google-Fu skills, the snippets you will find in these vast haystacks of code will not necessarily come with proper commenting or documentation. In fact, it might not run at all and just cost more in terms of time and energy invested.
The solution? An arsenal of curated JavaScript snippet libraries and repositories you can save and customize. To help you boost that arsenal we’ve collected nine of the best websites and free repositories full of useful JavaScript snippets and micro-frameworks to use in your projects.
The Best JavaScript Snippet Libraries
There’s no shortage of personal and public collections of JavaScript snippet libraries online. However, many are outdated, hard to search or limited to a specific tool or application in the form of a plugin package. Our list includes curated libraries that started out as personal collections, ones meant as learning tools for new programmers, and smart searchable databases of code snippets in community maintained open source projects.
1.30 Seconds of Code
30 Second of Code is a fantastic project aimed at both new and seasoned developers. This library is based on a very simple concept: snippets you can understand in thirty seconds or less. Which makes sense because if it’s more complex it’s not really a snippet, is it?
With hundreds of useful snippets neatly organized by category and properly tagged, frequent updates and an engaged community, this library is a great resource to have. It even includes a special section for beginners and an archive of niche snippets.
2.CSS-Tricks
Don’t let the name and URL fool you – this library of snippers offers quite a few useful ones. All curated by Chris Coyier, this list may not offer a large selection, but it’s probably one of the most visually pleasing websites linked in this post.
3.Codota
As the creators of a smart AI coding assistant, Codota’s library excels in both selection and intelligent search capabilities. With a vast database of thousands of lines of codes, finding the snippet you need is surprisingly easy.Though it is not manually curated, this library makes up for it with a pleasant UI, IDE integration and the sheer volume of useful code snippets.
4.Code to go
Aimed mostly at beginners, Code to go provides a limited number of very basic code snippets. However, it but brings added value to those looking to learn and not just copy and paste.
5.Snippetlib
Another personal collection that had become a public library is Snippetlib. It holds a fairly extensive searchable collection of snippets in various programming languages and is curated by Jessie Frazelle.
6.Useful Angle
Another library aimed at devs new is Useful Angle, with a frequently updated list of well documented and thoroughly explained code snippets. Built more like a blog than a proper library for code snippets, it’s nearly impossible to find anything useful without the Google angle.
7. Snipplr
Established way back in 2006, Snipplr serves two functions: a website to save and share your snippets, and a huge library of 63173 snippets (not all of them JavaScript, of course) at the time of writing. It’s fairly easy to search using the advanced search function to narrow down results.
8. Codepen
Somewhat similar to Snipplr, Codepen offers a more polished UI, some brilliant copywriting (check out the topic descriptions), and quite a lot of code snippets to make your app work and look pretty. In addition to the library, Codepen features, among others, a radio show and job listings.
9. Microjs
This collection of micro-frameworks and snippets is organized in one single page, which can take forever to scroll. Fortunately, the helpful search function on the top of the page can guide you toward the right file to download.
(source:
)https://twitter.com/xmrtni/status/846942114659389450
- xmrtni
If you can’t find the code snippet you seek in any of these repositories, it’s time to default back to Google and hope someone somewhere was kind enough to write the snippet you need. Then, if your search is taking too long, you have no choice but to be the hero for others. Write it, test it, and be sure to share it on one or more of the repositories above to do the next dev to need it a huge time-saving favor.
-=-=-=-
Top 9 JavaScript Snippet Libraries was originally published on the Codota blog and is copied here since I wrote it and got permission.