Avil Page (Posts about browser)

Switching Hosts With Bookmarklets - Web Development Tips

Anand Reddy Pandikunta — Wed, 08 May 2019 15:40:52 GMT

When debugging an issue related to web development projects, which is inconsistent between environments (local, development, QA, staging and production), we have to frequently switch between them.

If we are debugging something on the home page, then we can just bookmark the host URLs. We can switch between them by clicking on the relevant bookmark. Some browsers provide autocompletion for bookmarks. So we can type a few characters and then select the relevant URL from suggestions.

When debugging an issue on some other page like https://avilpage.com/validate/books/?name=darwin&year=2019, which has URL path and query param, switching between enviroment becomes tedious. To switch to local environment, we have to manually replace the hostname with localhost.

To avoid this, we can use a bookmarklet to switch the hosts. A bookmarklet is a bookmark which contains a JavaScript code snippet in its URL. This code snippet will be executed when the bookmarklet is clicked.

Lets create a bookmarklet to replace host in the URL with http://localhost:8000. Create new bookmark called To Local and in the URL add the following snippet.

javascript:(function() { window.location.replace("http://localhost:8000" + window.location.pathname + window.location.search); }())

If we click on To Local bookmarklet, it will redirect the current active page to localhost URL.

We can create one more bookmarklet to switch to production. Create a bookmarklet called To Production and add the following snippet in the URL.

javascript:(function() { window.location.replace("http://avilpage.com" + window.location.pathname + window.location.search); }())

We can create similar bookmarklets to switch to other environments. Now, switching between environments on any page is as easy as clicking a button.

Auto Completion For Custom Search Engines In Chrome

Anand Reddy Pandikunta — Sat, 11 Jun 2016 12:07:00 GMT

If we have to search for a video on YouTube or a product on Amazon, we will open up that site first and then we will search for it.

To avoid this, Chrome allows us to search using custom search engines without visiting the site first. In chrome search settings, we can assign a single letter to a custom search engine.

Now if we go to browser, type y and hit Tab, it prompts for YouTube search instead of default search.

This is handy. But the major problem with this approach is there won't be autocompletion in chrome address bar.

This is where vimium comes into picture. Vimium provides auto completion for custom search engines.

You can install it from chrome webstore. Once it is installed, go to Vimium options and add youtube search to custom search engines.


y: http://www.youtube.com/results?search_query=%s Youtube

Also add a custom key map for this search.


map y Vomnibar.activateInNewTab keyword=y

If we just press y, it open youtube custom search with autocompletion.

Now in every page, we have autocompletion for custom search engines.

Chrome Extensions For Efficient & Productive Web Surfing

Anand Reddy Pandikunta — Mon, 08 Sep 2014 12:20:00 GMT

I do use a lot of chrome extensions. Here are some of my favorite extensions which I use for everyday browsing.

1. AdBlock

Blocks annoying ads all over the web.

2. Vimium

I love browsing web with just keyboard. If you are familiar with Vim, install it without any second thoughts. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.

3. Alexa Traffic Rank

If you are a webmaster or stataholic, you need this.

4. Google Quick Scroll

If you have searched for something on Google and landed on a page with lot of text, it helps you jump directly to the relevant bits of a search result.

5. Hover Zoom

Simply enlarge thumbnails by hovering your mouse.

6. HoverReader

While reading an article, if you encounter a hyperlink, peek into it by hovering the mouse.

7. Magic Actions for YouTube

Auto HD, Ad Block, Cinema Mode, Mouse Wheel Volume Control and more magic actions for YouTube.

8. Readable Wikipedia WikiWand

Previously I used Readable Wiikpedia to read wiki articles.
But now I use WikiWand. It provides amazing look for our beloved Wikipedia.

9. AutoPager Chrome

Scroll through paginated web pages.

10. DevTools Auto Save

Saves changes to your CSS and JS right from the browser. Comes in handy for web developers.

11. OneTab:
Pull all tabs into single tab & save up to 95% memory and reduce tab clutter.

12. Popup Blocker Pro:
Blocks all annoying popups and popunders the professional way. You will never see popups anymore. Permissions Visit website

13. Stylebot:
Change the appearance of websites instantly. Preview and install styles created by other users on stylebot.me

14. Tab Number:
Tab number show number on each tab. If you want to jump a particular tab, So you can jump around easily by pressing ALT + pagenum.

15. Thin Scroll Bar:
Thin Scroll Bar to increase screen space for little more visibility.

Custom Key Maps For Vimium To Speed Up Browsing

Anand Reddy Pandikunta — Sat, 26 Apr 2014 08:04:00 GMT

For keyboard ninjas, Vimium is a boon! Vimium made browsing with keyboard a cat walk and ditch the mouse completely! This post is specifically written for those who are good at Vim and installed Vimium on Chrome or Firefox!

Vimium is THE BEST Chrome extension for Keyboard navigation! Since it was inspired by Vim, most of the shortcuts resemble that of vim. In Vim, we can set custom maps, if we are not comfortable with a particular command. The same goes for Vimium also!

By having some custom mapping, we can make surfing the web much easier and productive! Lets look at some custom maps which will come handy in everyday browsing.

0. Characters Used for Link Hints!

By default some characters are set for link hints. But I am more comfortable with the following keys

"sdfercvjkluim". So I set the characters to "fjdkslrueiwvm". But You can choose the key which you are comfortable with and use them. So when you press "f" or "F", characters used to suggest links will be the ones which you are comfortable to type!

1. Navigating Your History!

I navigate back and forth a lot. To back in history, I need to press "H" ( which means SHIFT + h ). So I mapped this 'h'. Actually by default h is mapped to scroll left, which I never use at all. So, to go back 3 pages in history, U just press "3h". The same applies for "L" also.

2. Navigating to New pages

By default "o" is mapped to open URL ( or bookmarks or history ) in current tab and "O" to open them in new tab. Most of the time, I need to open URL in new tabs only so I swapped the above options. The same goes for "b" ( for bookmarks ) also.

You can get a list of all shortcuts at Vimium Github page or if You have installed Vimium, You can just press "?" You can set these custom maps in advanced settings of Vimium

Custom Key Mappings


                        

                            map h goBack

                            map l goForward

                            map o Vomnibar.activateInNewTab

                            map O Vomnibar.activate

                            map b Vomnibar.activateBookmarksInNewTab

                            map B Vomnibar.activateBookmarks

Characters used for Link hints:

fjdkslrueiwvm

With these custom key maps, browsing becomes much productive.