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 tabYou 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 tabMerge 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 tabAdd 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 tabCoding 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 tabCoding 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 tabNative 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 tabCoding 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 tabCoding 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 tabSubmit 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 tabCheck 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 tabCSS Hide empty paragraphs with :empty selector
Hide empty paragraphs with :empty selector
Open in new tabCSS box-shadow vs drop-shadow
box-shadow is always rectangular but filter: drop-shadow contours the actual shape of transparent image
Open in new tabCheck 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 tabMethod 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 tabSwap Variables in JavaScript with destructuring assignment
Destructuring assignment lets you extract items of an array into variables.
Open in new tabSee variable name in console
Wrap the arguments in curly brackets in console.log to see the variable name when logged.
Open in new tabAdd 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 tabTerminal 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 tabJavaScript 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 tabJavaScript 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 tabArray.isArray()method in JavaScript
The Array.isArray() method determines whether the passed value is an Array.
Open in new tabComposition 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 tabAvoid Negative Conditionals
Negatives are just a bit harder to understand than positives. So, when possible, conditionals should be expressed as positives.
Open in new tabUsing 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 tabPaint each corner in different color with CSS
You can blend two gradients to paint each corner in different color.
Open in new tabCompare 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