Lately, I realized that I was using the same functionalities in different projects, so I decided to create an npm package to boost my development and make it easy for me to apply those utilities in my applications.
In this article, I will be sharing my favorite ones with you. 😄
💡 It is worth remembering that I wrote that package in the TypeScript language. Therefore, some utilities, such as decorators, are not available directly in JS code.
Handling HTML elements
We commonly need to make some changes to DOM in our projects, and this task may take us some precious time. So I created a function to help us do that.
createElement
This function makes it much easier to create elements, give them content, append them to their parents, and even add listeners to them. See how it works:
const button = createElement('button', {
id: 'my-button',
classes: ['rounded-button'],
content: 'Click me!'
listeners: [['click', e => doSomething(e)]],
childOf: document.querySelector('#button-wrapper')
});
All properties of the object passed as the second argument to the function are optional, so you can use only what you need. In some cases, the function does exactly what you want and you do not even need to create a variable to store the element.
Random values
It is common to write algorithms that need to get random values and use them to bring to the application some spirit of change sometimes.
In my package, there are three functions that return random values:
randomNumberBetween
Returns a random number between two other numbers:
randomNumberBetween(1, 100) // 99
randomNumberBetween(1, 100) // 42
randomDateBetween
If you want to get a random date between two other dates, use this function.
const date1 = '01/01/2020';
const date2 = '12/31/2020';
randomDateBetween(date1, date2); // '6/3/2020'
randomDateBetween(date1, date2); // '11/23/2020'
getRandomValueFrom
Returns a random index value from the given array. See how it works:
const letters = ['a', 'b', 'c', 'd'];
getRandomValueFrom(letters); // 'd'
getRandomValueFrom(letters); // 'c'
Accessibility
addGlobalEntries
Sometimes, especially when we are creating packages that will be adapted to the browsers later, we want to keep some variables, functions, and classes available from anywhere out of the source they were created. In these cases we can use addGlobalEntries, passing an object with the properties we want to keep available globally:
const something = 'Something';
const doSomething = () => console.log('Doing something');
addGlobalEntries({
something,
doSomething
anotherProperty: 'Another thing'
});
Then, we can use these properties anywhere out of the bundle file:
<script type="text/javascript">
doSomething(); // prints 'Doing something'
</script>
Global
This decorator has the same purpose as the addGlobalEntries function but it is applicable to classes. See the following example:
@Global
class SomeType { }
Now, we are able to use SomeType anywhere:
<script type="text/javascript">
new SomeType(); // ok
</script>
Conclusion
Oops! Looks like I forgot to say how to install the package! 😅
Click here to see the official repository and docs. And if you want to skip this step, you can go directly to the installation, using npm:
npm i easy-coding
I will add more utilities to the package as I discover more functionalities being used in multiple projects of mine.
I hope you like the package and that its utilities could be helpful for you too. Thanks for reading! See you in my next post! 😉✌🏻
