Stop Wasting Your Time - Use These 16 JS Utility Functions Instead

Thanks man, i recomment to use momentJS for handling dates

You do not need `qs` and `qsa` function. Simply use `const { querySelector } = document`;

Better to add `async` to sleep and change `duration` to `ms`, for example. Some functions using duration in seconds

@web dev simplified did you play the guitar intro?

and make them npm package and add them in any project

Title is misleading doesn't relate to content very much
Wouldn't global event handler have bad performance like some events is triggering contantly like mouse move
Last thing why not using slice , it has best performance

Thanks to your javascript tutorials I learned how to access all of your video files from your website, so now I can watch them for free and I also uploaded them on torrent so everyone is happy ^^

You should rename addGlobalEventListner to aGEL and createElement to cEL

This is sooo useful, just like CSS we create utilities for less repetition. 🙌

My createElement() function has a third parameter which is childElements. These childElements will be appended to the newly created element.

Great vid. Re: your sleep function... what is the benefit of using a Promise with setTimeout vs calling it directly?

Readable code is always more valuable than easy-to-type code. It's criminal to take descriptive functions and rename them to "qs" and "qsa" and that really kind of highlights the one complaint I have about your channel: You've either never worked with other people or have simply never been told "No" on anything. I like some of these concepts but I don't understand this—very incorrect—notion that programming is slow because things take a long time to type. Programming is slow because we are solving problems, not for lack of short function names. Create a reusable library for sure but make it a good one with descriptive names and built-in documentation.

And then people say why DSA is given importance. The things mentioned in the video are the easy to medium question from DSA :)

if I want to add many classes on element what should I do?

RelativeDateFormat is exaclty what I was looking for and what I was going to implement by myself. Thanks, you saved me a lot of time.

You shouldn't be using filter() for the first()/last() methods. It becomes exponentially slower as the array grows in size.
slice(0,n)/slice(-n) are much more efficient and show no significant degradation in performance with larger arrays.

Great video. Many of these should be first class functions.

Hola! It is childish, but it made me happy that you said 'Spain' 😂💃

doing FE stuff on a PC is why you wont get to 1m subs. ;)

Nice codes

Is it that much harder to write though? The thing is half the time, you end up adding functionality over functionality to the utilities themselves because you reach more complex cases.
If it's genuinely very tough to write (example WebRTC / IndexedDB), please do go ahead and make sure you add as many utils as possible.
And if it's a function you use all the time just with different params from the browser API, please do go ahead and modularise it.
I would argue that using browser APIs directly would be a better choice if the saving is minimal.

array.at(-1) can be used instead of array[array.length - 1]

Very handy. Great video. Thanks!

Thank you. Very useful indeed.

These methods are going to be part of ES7!

Really nice 👍

Awesome! So helpfull! I changed the createElement function to .className = value (on key === 'class'), so i can pass all classes in one single string

I wish two things--feasible ones--at the end of Roland Garros 2022 Rafael Nadal champion and WDS with 1M subscribers...

kyle, you can make a pollyfilll for the arrays for example for pluck Array.prototype.pluck = function(key) {return this.map(elem => elem[key])}

Awesome video, but how would you stack a function, the groupBy for example, suppose you had an array of objects of people like the example, but you wanted to group them by gender, then hair color, then eye color. How would you write something like that? I tried what I thought it would be, but didn't work.

Amazing video, I love these as a junior ♥️

Thank you, Kyle!!! 👏

Most useful stuff was definitely the date stuff. Every thing else was of questionable utility but those dates still confuse a lot of devs

Superlike! Why did I not see this earlier... Thank you!

physcotic way to arrange ur method paramaters

The number formatter is a life saver. I don't even want to know how many times I've done a replaceAll(".",","), because Denmark uses French decimals

This is so cool. Thank you, Kyle.

Sir how to create uber app backund php

so.... jQuery... you've reinvented jQuery

Very helpful.

I think your groupBy implementation is inefficient, because the spread syntax copies the entire object into a new one (and lets the GB dispose the previous) every single iteration

That's great Tutorial. Thank you.

Excellent video. Can you do a video on using the underscore as a variable like you do in first and last array functions. I don't quite understand that.

Man your content is amazing. Been working on a vaniila js project and I have so many utility functions as esm, they are so handy. About to modify some of them to use yours 😂 and add the rest to my huge util.js file. Thanks man. Amazing work.

Awesome video and great advice. Just as every good chef maintains their personal set of knives, every good programmer should have their personal arsenal of general-use utility functions. Your “bag of tricks” should follow you in your travels as a developer and evolve/improve with repeated use across multiple projects. This has the added benefit of making your work more consistent and therefore easier to maintain over time. Nice work, Kyle!