Home > Shorts
Collection of Short Tips & Tricks
Very opinionated 🧐
Coding reject method with JavaScript
Coding reject method with JavaScript Reject method iterates over a given list of element, calls the predicate on each element. It returns…
Open in new tab
You can use logical operator 'or' insted of ternary operator
In some cases you can use logical operator 'or' insted of ternary operator
Open in new tab
Merge two objects in JavaScript
Merge two objects in JavaScript Spread operator is the perfect way to merge two simple objects into one.
Open in new tab
Add opacity to a background image without an overlay and without impacting the opacity of the content
Add opacity to a background image without an overlay and without impacting the opacity of the content
Open in new tab
Coding reduce() function with JavaScript
Coding reduce() function with JavaScript The reduce() method executes a reducer function (that you provide) on each element of the array…
Open in new tab
Coding range() function with plain JavaScript
Coding range() function with plain JavaScript There is no built in range() method in JavaScript. Let's code it!
Open in new tab
Native lazy loading via attribute for images
The loading attributing on images gives authors control over when the browser should start loading the resource.
Open in new tab
Coding filter() function with plain JavaScript
Coding filter() function with plain JavaScript The filter() method creates a new array with all elements that pass the test implemented by…
Open in new tab
Coding map() function with JavaScript
Coding map() function with JavaScript The map() method creates a new array populated with the results of calling a provided function on…
Open in new tab
Submit a form with a button located outside of a "form" attribute
You can submit a form with a button located outside of a "form" attribute.
Open in new tab
Check whether an array includes a certain value
The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate. Option…
Open in new tab
CSS Hide empty paragraphs with :empty selector
Hide empty paragraphs with :empty selector
Open in new tab
CSS box-shadow vs drop-shadow
box-shadow is always rectangular but filter: drop-shadow contours the actual shape of transparent image
Open in new tab
Check if a variable is an Integer in JavaScript
The Number.isInteger() method determines whether the passed value is an integer. If the target value is an integer, return true, otherwise…
Open in new tab
Method vs Computed in Vue
Method vs Computed in Vue methods: { 🔵 Runs whenever an update occurs 🔵 Not cached 🔵 Typically invoked from v-on/@ } computed: { 🟡 Runs…
Open in new tab
Swap Variables in JavaScript with destructuring assignment
Destructuring assignment lets you extract items of an array into variables.
Open in new tab
See variable name in console
Wrap the arguments in curly brackets in console.log to see the variable name when logged.
Open in new tab
Add the option to addEventListener() to call it once
You can add the option { once: true } to an event listener to automatically remove it when has been invoked. A Boolean indicating that the…
Open in new tab
Terminal Command-Line Shortcuts with Aliases
Terminal Command-Line Shortcuts with Aliases To see a list of all your aliases, use: It'll show a bunch of shortcodes Some of my favorite…
Open in new tab
JavaScript Array.from() method
The Array.from() static method creates a new, shallow-copied Array instance from an array-like or iterable object. It has an optional…
Open in new tab
JavaScript quiz time
What is the output of the console?! The answer is 'banana' aka 🍌 " + 'a' " will give NaN You can imagen it as ('b' + 'a' + NaN + 'a…
Open in new tab
Array.isArray()method in JavaScript
The Array.isArray() method determines whether the passed value is an Array.
Open in new tab
Composition VS Inheritance in React
React has a powerful composition model, and it's recommended using composition instead of inheritance to reuse code between components.
Open in new tab
Avoid Negative Conditionals
Negatives are just a bit harder to understand than positives. So, when possible, conditionals should be expressed as positives.
Open in new tab
Using fragments in React
Fragments look like empty JSX tags <></> They let you group a list of children without adding extra nodes to the DOM. If you don't need div…
Open in new tab
Paint each corner in different color with CSS
You can blend two gradients to paint each corner in different color.
Open in new tab
Compare two numbers with JavaScript
If you want to compare two numbers, but one of them has a type of string. You can use ">" or "<" signs. It'll convert string to a number.
Open in new tab