Thursday, January 30, 2020

Google Chrome Keyboard Shortcuts

Window and Tab Shortcuts
Ctrl+N	Open a new window
Ctrl+Shft+N	Open a new window in incognito mode
Press Ctrl, and click a link	Open link in a new tab
Press Shft, and click a link	Open link in a new window
Alt+F4	Close current window
Ctrl+T	Open a new tab
Ctrl+Shft+T	Reopen the last tab you've closed. Google Chrome remembers the last 10 tabs you've closed.
Drag link to tab	Open link in specified tab
Drag link to space between tabs	Open link in a new tab in the specified position on the tab strip
Ctrl+1 through Ctrl+8	Switch to the tab at the specified position number. The number you press represents a position on the tab strip.
Ctrl+9	Switch to the last tab
Ctrl+Tab or Ctrl+PgDown	Switch to the next tab
Ctrl+Shft+Tab or Ctrl+PgUp	Switch to the previous tab
Ctrl+W or Ctrl+F4	Close current tab or pop-up
Alt+Home	Open your homepage
Ctrl+O, then select file	Open a file from your computer in Google Chrome


Address Bar Shortcuts
Type a search term	Perform a search using your default search engine
Type the part of the web address that's between 'www.' and '.com', then press Ctrl+Enter	Add www.and .com to your input in the address bar and open the web address
Type a search engine keyword or URL, press Tab, then type a search term	Perform a search using the search engine associated with the keyword or the URL. Google Chrome prompts you to press Tab if it recognizes the search engine you're trying to use.
F6 or Ctrl+L or Alt+D	Highlight content in the web address area
Type a web address, then press Alt+Enter	Open your web address in a new tab

Shortcuts to open Google Chrome features
Ctrl+B	Toggle bookmarks bar on and off
Ctrl+H	View the History page
Ctrl+J	View the Downloads page
Shft+Escape	View the Task manager

Webpage shortcuts
Ctrl+P	Print your current page
F5	Reload current page
Esc	Stop page loading
Ctrl+F5 or Shft+F5	Reload current page, ignoring cached content
Press Alt, and click a link	Download link
Ctrl+F	Open find-in-page box
Ctrl+G or F3	Find next match for your input in the find-in-page box
Ctrl+Shft+G or Shft+F3	Find previous match for your input in the find-in-page box
Ctrl+U	View source
Drag link to bookmarks bar	Bookmark the link
Ctrl+D	Bookmark your current webpage
Ctrl++	Make text larger
Ctrl+-	Make text smaller
Ctrl+0	Return to normal text size


Text shortcuts
Highlight content, then press Ctrl+C	Copy content to the clipboard
Place your cursor in a text field, then press Ctrl+V or Shft+Insert	Paste current content from the clipboard
Place your cursor in a text field, then press Ctrl+Shft+V	Paste current content from the clipboard without formatting
Highlight content in a text field, then press Ctrl+X or Shft+Delete	Delete the content and copy it to the clipboard

More shortcuts
Backspace, or press Alt and the left arrow together	Go to the previous page in your browsing history for the tab
Shft+Backspace, or press Alt and the right arrow together	Go to the next page in your browsing history for the tab
Ctrl+K or Ctrl+E	Places a '?' in the address bar. Type a search term after the '?' to perform a search using your default search engine.
Place your cursor in the address bar, then press Ctrl and the left arrow together	Jump to the previous word in the address bar
Place your cursor in the address bar, then press Ctrl and the right arrow together	Jump to the next word in the address bar
Place your cursor in the address bar, then press Ctrl+Backspace	Delete the previous word in the address bar
Space bar	Scroll down the web page
Home	Go to the top of the page
End	Go to the bottom of the page

Reference

Thursday, January 23, 2020

Simple JaveScript Tricks with Array and Object

Combining Multiple Objects

Consider you have three different objects:
const obj1 = {'No': 1, 'firstname': 'Rakesh'};
const obj2 = {'lastname': 'Patel'};
const obj3 = {'Sex': 'Male','progLang':['.Net','MVC','SharePoint']};

combine all the above 3 object into another object:

const objCombined = {...obj1, ...obj2, ...obj3};

The '…' is the spread operator. You can read more about this in the MDN Web Docs

Check if an object is an array

const obj = {data: 1};
const arr = [1, 2, 3];

Array.isArray(obj); // false
Array.isArray(arr); // true

Rest parameter syntax

A function that accepts any number of arguments. There is a special syntax called the rest parameter syntax to create such a function.

Example 1:

function test(...values) {
console.log(values);
}
test(1);
test(1, 2);
test(1, 2, 3);
test(1, 2, 3, 4);

output:
[1]
[1, 2]
[1, 2, 3]
[1, 2, 3, 4]

you can even pass object as a arguments

Example 2:

function sum(...values) {
let sum = 0;
for (let i = 0; i < values.length; i++) {
sum += values[i];
}

return sum;
}

console.log(sum(1));
console.log(sum(1, 2));
console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4));

output:
1
3
6
10

Saturday, January 18, 2020

Fill element on hover

Create a button so that on hover the background color fills the element from left, right or center side of the element.

.button{
  position: relative;
  display: inline-block;
  padding: 15px 70px;
  border: 5px solid #D42069;
  color: #D42069;
  font-size: 30px;
  font-family: arial;
  background-image: linear-gradient(#D42069, #D42069);
  background-repeat: no-repeat;
  border-radius:50px;
  transition: background-size .5s, color .5s;
}
.center-right-left, .center-top-bottom, .center-corner {
  background-position: 50% 50%;
}
.to-left {
  background-position: 100% 50%;
}
.to-right {
  background-position: 0% 50%;
}
.to-top {
  background-position: 50% 100%;
}
.to-bottom {
  background-position: 50% 0%;
}
.center-right-left, .to-left, .to-right {
  background-size: 0% 100%;
}
.center-top-bottom, .to-top, .to-bottom {
  background-size: 100% 0%;
}
.center-corner {
  background-size: 0% 0%;
}
.button:hover {
  background-size: 100% 100%;
  color: #fff;
}

<h1>
From center towards left and right</h1>
<div class='button center-right-left'>
NEXT</div>
<h1>
From center towards top and bottom</h1>
<div class='button center-top-bottom'>
NEXT</div>
<h1>
From center towards corners</h1>
<div class='button center-corner'>
NEXT</div>
<h1>
From right to left</h1>
<div class='button to-left'>
NEXT</div>
<h1>
From left to right</h1>
<div class='button to-right'>
NEXT</div>
<h1>
From bottom to top</h1>
<div class='button to-top'>
NEXT</div>
<h1>
From top to bottom</h1>
<div class='button to-bottom'>
NEXT</div>

OUT Put

From center towards left and right

From center towards top and bottom

From center towards corners

From right to left

From left to right

From bottom to top

From top to bottom

Shortcode in a WordPress Template

Shortcodes in WordPress are invoke for some kind of function to accomplish certain tasks. But what if you want to use a shortcode from within a template instead of with the content of a Post/Page?
You can invoke it with a special function: