#100DaysOfCode - Day 32: JavaScript Utility Libraries

Today, I’ve mostly been looking into AngularJS, a useful javascript framework. While I’ve been able to use it in the past for projects, it’s always fun being able to dive back in and use tools like it (which are much easier to manage long-term than frameworks like jQuery and their associated dependencies)… You can find the start code from the official site here, which serves up a textbox that suggests user input based on a pre-defined list. The list, whilst not originally modifiable, can easily be altered to be changable in the source code as well.

Through-out this week, I’ll be working on implementing this library in a scalable way to the Secret Santa application I’m working on with Cole, so stay tuned on any updates there as well… it’s going to be the application’s first implementation using NPM (a package manager), so I’ve been putting off that deployment to make sure that I roll out NPM in an effective (and well-documented) manner to make sense to newer users reading into the code.

Extending beyond just what I’ve worked on today, I also enjoyed listening to Wes Bos and Scott Tolinski’s syntax.fm podcast on JavaScript Utility Libraries. They had some great mentions that I’ve started looking into, and plan to implement in some of my future projects

General JavaScript

• Lodash (Official Site): a collection of handy methods that allow us to work with different types of data, such as working with arrays, functions, objects in JS. This is sort of the replacement (2nd generation) for a classic JS library called Underscore.js and it’s very modular (you only need to import what you want). This makes it much easier to work with deeply nested data (e.g. objects in arrays in arrays in arrays). Example taken from site:

    _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });
    // → { 'a': 1, 'b': 2 }
    _.partition([1, 2, 3, 4], n => n % 2);
    // → [[1, 3], [2, 4]]
  

Date Times

• Moment.js: A classic JS library that makes working with datetimes MUCH easier, because it allows use of things like date.now(), moment().format() to format specific ways. It even allows adoption of different locales, like so:

    /* Taken from https://momentjs.com/docs/ */
    require(['moment/locale/de'], function(localeModule) {
    // here the locale is loaded, but not yet in use
    console.log(moment().format('LLLL'));  // 'Friday, June 24, 2016 1:42 AM'
  
    moment.locale('de');
    // Use moment now that the locale has been properly set.
    console.log(moment().format('LLLL')); // 'Freitag, 24. Juni 2016 01:42'
  

  • One caveat to this library is that all data is mutable, meaning you may be accidentally editing data that you’re passing to functions.

• date-fns: Aims to be the replacement for Moment.js that is a bit more modular, allowing you to just cherry pick the specific pieces of Moment.js that are needed. Additionally, it is naturally immutable, meaning it’s a lot harder to shoot yourself in the foot with.

URIs

• slugify(NPM): Handles a lot of the symbol translation when you need to move things into URLs, which isn’t necessarily dependent on all of unicode (a huge class of symbols), so it’s very lightweight. Wes Bos actively uses this libray and recommends it, whereas Scott tends to use SpeakingURL.

• Axios: Similar to using .Fetch() in the browser, which defaults to JSON and can break if the thing you’re fetching isn’t JSON. This library tends to make things (like specifying headers) a lot easier. It’s all promise based as well, so you can use it server side.

  • Server side, you can also use something called CookieJar to fake or hold cookies, which allows you to save or fake cookies to re-use on requests. Super useful for scraping or logging into systems.
  • Also has a cacheing plug-in (name or function unspecified)

Storage

• Store.js: Scott: Makes working with local storage variables as easy as store.set(), store.get(), not needign to worry about browser dependencies.
• Cross Storage: Wes: owned by ZenDesk, where you create a hub on one website and use it as your local storage hub. you can then share this local storage with other sites, which pops up an iFrame on one of those other domain names, and syncs them whenever specified.

Testing

• Faker.js: Can easily create fake data to test your application to test your front-end stuff. It’s always nice to fill things with some real world looking data.

• url.searchParams() is a thing

• parseURI: allows you to get the domain name, hash, path, etc. from the existing URI.

• NGrok: Standard way to create requests out or create sessions with devices from the command line.

• BrowserSync: With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of sync settings from the UI or command line to create a personalised test environment. Need more control? Browsersync is easily integrated with your web platform, build tools, and other Node.js projects.

• Async: Really good flow control in your application, without getting into what’s termed “callback hell” (per Wes Bos). This isn’t as necessary nowadays with async await, but could still be useful for complicated flow control when mixing sync/async requests.

• Bling.js: if you want the $ of jQuery, without the jQuery part. I LOVE THIS IDEA!!! (but need to try it before I officially endorse it)

    // forEach over the qSA result, directly.
    document.querySelectorAll('input').forEach(el => /* ... */);

    // on() rather than addEventListener()
    document.body.on('dblclick', evt => /* ... */);

    // classic $ + on()
    $('p').on('click', el => /* ... */);
    

Anyways, that’s all I have for today! Happy coding ya’ll.

~ Moxnr