https://github.com/kosperera/vanilla-js-snippets
Library of commonly used boilerplate code for all things vanilla JS
https://github.com/kosperera/vanilla-js-snippets
boilerplate-code code-snippets vanilla-javascript
Last synced: 2 months ago
JSON representation
Library of commonly used boilerplate code for all things vanilla JS
- Host: GitHub
- URL: https://github.com/kosperera/vanilla-js-snippets
- Owner: kosperera
- License: mit
- Created: 2020-09-01T17:44:34.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-09-01T18:49:25.000Z (almost 4 years ago)
- Last Synced: 2025-04-12T04:09:54.471Z (2 months ago)
- Topics: boilerplate-code, code-snippets, vanilla-javascript
- Language: Shell
- Homepage: https://kosalanuwan.github.io/journal/
- Size: 84 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vanilla JavaScript { snippets }
[
][all-things-js]
I'm a huge nerd :nerd_face: of [vanilla javascript (JS)][all-things-js]. This repository serves as a library of helper functions and boilerplate code written with native javascript and browser APIs instead of major frameworks and libraries.
[Read the journal notes to learn more.][journal-notes].
[all-things-js]: https://github.com/topics/javascript?l=javascript
[journal-notes]: https://kosalanuwan.github.io/journal/javascript/vanilla-js-snippets/
### On this repo
- `boilerplate-*` are code templates to get started with various patterns and practices.
- `helper-*` are nano-libraries written for various needs and wants which I typically either copy & paste as and when needed.
- `examples/try-*` are partials mixed and matched in order to demonstrate a bit more complexed implementations.
## Getting Started
For minimum requirements, you will need the followings:
- [VS Code][download-vscode] with [Remote - Container][download-remote-container-ext] extension.
- [Docker Desktop][download-docker-desktop]
- A web browser, like [Brave][download-brave] as for javascript playground
[download-vscode]: https://code.visualstudio.com
[download-remote-container-ext]: https://
[download-docker-desktop]: https://
[download-brave]: https://brave.com/latest
## Run from Source
With VS Code:
- Run command: Open with Live Server, or
- Click `Go Live` on the status bar
Spin up your favorite browser to visit [localhost:5505/examples/](http://localhost:5505/eamples/)
[Read the journal notes to learn more.][journal-notes].
## Feedback
If you were wondering, [ask questions and problems on GitHub][ama]. It is as easy as creating a new discussion. If not, here are the ways you can provide feedback.
- [Submit bugs and request code snippets][new-issue]
- [Upvote popular code snippets][openned-issues]
- [Review source code and documentation][pull-requests]
[ama]: https://github.com/kosalanuwan/ama/#readme
[new-issue]: https://github.com/kosalanuwan/vanilla-js-snippets/issues/new
[openned-issues]: https://github.com/kosalanuwan/vanilla-js-snippets/issues
[pull-requests]: https://github.com/kosalanuwan/vanilla-js-snippets/pulls
## Learning Resources
Nowadays, vanilla javascript already cover most of it anyways. And, polyfills are there whenever some random feature doesn't support on the browser.
- [You Don't Need Lodash and Underscore][learning-yagni-repo] shows what vanilla javascript methods and techniques to use instead.
- [Financial Times polyfill repository][learning-polyfills-repo] is good for polyfill code snippets.
- [Writing vanilla JS snippets and examples #30][journal-discussion] for a curated list of online resources referred on these snippets.
[journal-discussion]: https://github.com/kosalanuwan/journal/discussions/30
[learning-yagni-repo]: https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore/#readme
[learning-polyfills-repo]: https://github.com/Financial-Times/polyfill-library
## Contributing
If you were wondering, I'd be happy to have more code snippets here. Have a suggestion or a bug fix? Just open a pull request or an issue. Include the code snippet with a clear file name and the simplest HTML possible.
## License
Licensed under [MIT][lic]
[lic]: LICENSE