Vanilla JavaScript { snippets }

I'm a huge nerd 🤓 of vanilla javascript (JS). I've built a few websites on it, as well as a few libraries and still has a long way to go to. This repository serves as a library of commonly used boilerplate code for all things vanilla javascript.

Read this article to learn more about this repository works.

On this repo

• $qsa.js is to alias the document.querySelectorAll to traverse thru DOM elements
• $.js is a micro-library for manipulating DOM as angular's $q
• format-string.js is to replace strings as C# String.Format()
• snake-case.js is to style strings to 'snake_case' as Lodash _.snakeCase()
• mixin.js is to allow prototype option for helper functions as Lodash _.mixin()
• script-data-src.js is magic code to replace <script> tags with attribute data-src with new HTMLScripElement

Learning Resources

Documenting javascript

• How to document javascript with JSDoc is a simple article that has the obvious examples

Coding style

• Air bnb style guide for javascript (es5) is deprecated for vanilla JS but still a good source of information
• Naming functions and the differences is a good explanation.

Differences between .call() and .apply()

• .apply() requires input args as a single array
• Managing arguments in JavScript to learn about leaky arguments
• arguments is not purely Array type is described on MDN spacification

Using prototype

• Code snippet that allows both prototype and function options from the string.format example
• episode 22 and episode 23 on prototypes is a good start.
• Use of C# like String.Format in vanilla JS for various ways to write a helper function

Building libraries as modules (.mjs)

• Serving vanilla JS libraries as modules (.mjs) on the web for full comparison of classic vs. modules

Namespace and IIFE for JS libraries

• Creating and using namespace pattern and IIFE explains how to properly expose the library to global namespace
• Namespace fundamentals when writing vanilla JS libraries by O’Railly library
• Learning JavaScript - namespaces and scoping

Building JS micro-libraries

• Create your own utility libraries like Lodash and Underscore.js for a walkthru with examples
• Create your own DOM manipulation library like jQuery for replacing jQuery

Testing performance

• Performance testing using console.time() and console.endTime() for helper functions

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