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

Truncate a string with JavaScript

Truncate a string with JavaScript

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

Array methods cheat sheet.

Array methods cheat sheet.

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

Chain map() functions in JavaScript

You can chain map() functions in JavaScript

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
© 2021, Andrew Losseff