DEV Community: Sham Gurav

Should I start learning React or is it too late ???

Sham Gurav — Sat, 23 Apr 2022 16:51:55 +0000

How to disable right click on web page ???

Sham Gurav — Wed, 20 Apr 2022 17:06:49 +0000

It is not recommended to disable the Right-Click on any web page. Anyone with basic understanding of browsers can view the source and extract the information they need.

No matter what we do, We cannot prevent users from having full access to the page content. oncontextmenu event can be disabled by disabling the Javascript on the webpage. But it's good to know a way to disable the right-click on page if you ever needed.

You can disable Right-Click on web page using contextmenu HTML Event. The contextmenu event occurs when the user right-clicks on an element to open the context menu.

<body oncontextmenu="return false">
   <div>...</div>
</body>

NOTE :- If you want users to stop copying page content then use oncontextmenu along with CSS directive user-select: none .

user-select: none will disable any selection on web page. User won't be able to select the any text or image after that.

Shorten The Console.log

Sham Gurav — Tue, 12 Apr 2022 15:04:19 +0000

Tired of writing console.log() again and again ??? the the following JS tip is for you .

You can shorten the log() function with the help of Function.prototype.bind .

Since ES5, all functions have a bind method that allows one to create a new function specifying the context.

Use bind method to pre-define the context execution to always point to console. This way, no matter how the function is invoked, we are instructing the JavaScript engine to always set the context execution to console.

const C = console.log.bind(console);

C("Downloaded Successfully !!!");
// Downloaded Successfully !!!

C("Code Executed Successfully !!!");
// Code Executed Successfully !!!

#27 Guess The Output ???

Sham Gurav — Mon, 11 Apr 2022 17:54:17 +0000

⭐ Reply with correct answer & Bonus points for explanation ⚡

💡 Correct answer with detailed explanation will be updated in comments after 48 hours.

Code -

console.log((055-35)-5);

How to change caret color using CSS ???

Sham Gurav — Mon, 11 Apr 2022 17:47:35 +0000

You might be wondering what is caret and why I need to change the color of caret ???

caret is blinking cursor in any text input field , visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. By default, it is black, but its color can be altered with this property.

Sometimes you want to change the color of caret to match the theme of website or make it visible and noticeable in dark themes of websites. At these times You can change the color of caret using caret-color property in CSS.

Code-

input {
  caret-color: red;
}

Result -

Resources -

1) caret-color MDN Documentation

#26 Guess The Output ???

Sham Gurav — Sun, 10 Apr 2022 16:41:08 +0000

⭐ Reply with correct answer & Bonus points for explanation ⚡

💡 Correct answer with detailed explanation will be updated in comments after 48 hours.

Code -

function foo1() {
  return {
    bar: 'Hello'
  }
}

function foo2() {
  return
  {
    bar: 'World'
  }
}

console.log(foo1());
console.log(foo2());

( HTML Tip ⚡ ) - Specify Fallback Image if Actual Image not found

Sham Gurav — Sun, 10 Apr 2022 12:42:38 +0000

Use onerror event When you need to specify a backup image in case if the actual image is not found or not available on the server for any reason.

<img src="image.gif" 
onerror="this.onerror = null ; this.src = 'imagenotfound.gif' ">

Note - The reason we have the "this.onerror=null" in the function is that the browser will be stuck in an endless loop if the onerror image itself generates an error.

Resources -

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

( JavaScript Tip 💡 ) - delete Operator

Sham Gurav — Sun, 10 Apr 2022 09:16:53 +0000

delete operator is lesser-known operator in JavaScript. This operator is more specifically used to delete JavaScript object properties.

The delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.

const User = {
  firstName: 'John',
  lastName: 'Wick'
};

delete User.lastName;

console.log(User);
// Output: { firstName: "John" }

console.log(User.lastName);
// Output - undefined

If the property which you are trying to delete does not exist, delete will not have any effect and will return true.

If a property with the same name exists on the object's prototype chain, then, after deletion, the object will use the property from the prototype chain (in other words, delete only has an effect on own properties).

Note - delete operator doesn’t delete property value rather the property itself.

#25 Guess The Output ???

Sham Gurav — Sun, 10 Apr 2022 09:10:05 +0000

⭐ Reply with correct answer & Bonus points for explanation ⚡

💡 Correct answer with detailed explanation will be updated in comments after 48 hours.

const numbers = [35, 2, 4, 11, 7];
numbers.sort();
console.log(numbers[2]);

:empty Selector In CSS

Sham Gurav — Fri, 08 Apr 2022 15:10:24 +0000

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace).

HTML Code -

<div> Hello World !!!</div>
<div> <!-- Empty --> </div>
<div> GoodBye World !!! </div>

CSS Code -

div:empty {
     background-color: #ff0000;
}

Output -

( ⭐ HTML Tip ⭐ ) - Hidden Property

Sham Gurav — Fri, 25 Mar 2022 07:46:08 +0000

No need to use CSS to hide stuff.
Instead of "display:none" , You can use hidden property to hide element directly from HTML.

#9 Guess the output ???

Sham Gurav — Thu, 24 Mar 2022 13:41:05 +0000

function getUserId(...args) {
  console.log(typeof args);
}

getUserId(21);

Options -
A) string
B) number
C) object
D) NaN

Reply with correct answer & WHY it is correct answer in comments.