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

$qsa.js

$ aliases the document.querySelectorAll() to traverse thru DOM elements for manipulation.

$('a').each(function(el) { 
  el.addEventListener('input', console.log);
});

$.js

Micro-library for manipulating DOM as angular's jqLite but with most frequent use ones to manage classes, attributes, and to traverse thru DOM elements.

$('.highlight-source-js')
   .each(function(el) { 
    console.log(el.innterHTML);
  })
  .hide();

format-string.js

Replaces strings based on the format specified as C# String.Format().

_.format('{0} there! It's actually {1}', 'Hello', '/KP');
// expected output: 'Hello there! It's actually /KP'

snake-case.js

Style strings to 'snake_case' helper as Lodash _.snakeCase().

_.snakeCase('Library of vanilla JS snippets');
// expected output: 'library_of_vanilla_js_snippets'

mixin.js

Allow prototype option for helper functions as Lodash's _.mixin().

String.prototype.toSnakeCase = _.mixin(_.snakeCase);
// or
_.mixin(_.snakeCase, String, 'toSnakeCase');

// then use as
sometext.toSnakeCase();

script-data-src.js

Replace <script> tags with attribute data-src with new HTMLScripElement and attributes.

<script async
      data-src="../scripts/tokenizer.js" 
      data-client-id="{{client_id}}">
</script>
<script async
      data-src="../scripts/gtm.js" 
      data-client-id="{{ga-key}}">
</script>
<script async src="script-data-src.js"></script>

• .apply() requires input args as a single array
• Code snippet that allows both prototype and function options from the string.format example
• Lodash _.mixin for the kinda generic wrapper for both prototype and function options
• Creating and using namespace pattern and IIFE explains how to properly expose the library to global namespace
• episode 22 and episode 23 on prototypes is a good start.

Articles

• 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
• Use of C# like String.Format in vanilla JS for various ways to write a helper function
• Managing arguments in JavScript to learn about leaky arguments
• arguments is not purely Array type is described on MDN spacification
• Serving vanilla JS libraries as modules (.mjs) on the web for full comparison of classic vs. modules
• Namespace fundamentals when writing vanilla JS libraries by O’Railly library
• Learning JavaScript - namespaces and scoping
• 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