Magic of Browser Bookmarks - Automate Simple Tasks using JavaScript

As I promised in #LearnedToday, I'm going to show you how much you can achieve with this little bookmark feature in the browsers.

Ever wondered how to easily remove citations from a Wikipedia page? 

What are bookmarks?

The bookmarks in the browsers are to save the links to the pages you wish to visit again, or you just find them useful and save them for later. 

Instead of creating a text file "Imp Links" and saving all the links there (I've done it a lot), you could use the browser's bookmark feature.

The shortcut to bookmark a webpage in most browsers is ctrl+b.

What more can they do?

To sum up, they can run JavaScript on a page. So instead of opening the browser console to do run a couple lines of code, you could create a bookmark and click that instead.

Example?

Whenever I needed to copy something from Wikipedia, I usually had to deal with the references/citations they have. You must've seen those, with squared brackets around numbers, something like this [1] or with a disclaimer like [citation needed], etc. I needed to remove all those. 

Initially, I used to do it in MS Word manually, by Find and Replace. I don't remember that now, doesn't matter anyway. 

Finally, I came to know about these browser bookmarklets, and then a simple regex was enough to do the work for me.

Now I have a simple bookmark. I go to any Wikipedia page, select the text I need, and click the bookmark. Viola! Citations are removed.

How to create a bookmarklet?

Got to Bookmarks Manager

1. Click three vertical dots in the upper right corner > Bookmark > Bookmark Manager

Or chrome shortcut: ctrl+shift+o

Or type in the address bar: chrome://bookmarks/

2. Click three vertical dots in the upper right corner of Bookmark manager (Shows tooltip: Organize) 

3. Add new bookmark

4. It will show a popup with two fields: Name and URL. 

5. Give any appropriate name, and in the URL bar, paste the JavaScript code you want to execute.

6. Click Save. 

You have your bookmarklet ready. 

Show/Hide Bookmarks bar with ctrl+shift+b. Clicking on the name of your bookmark will run the underlying code. 

Any easier way to do this?

If you don't want to go through all those steps, there's a simple tool called Bookmarkleter. Paste your JS code, it will generate a link that you can drag and drop to the bookmarks bar. 

For example, drag and drop the following link to your bookmarks bar. This will allow you to change fonts on any website. 

Set Font

Which bookmarklets am I using?

1. Citation Remover: Removes citations from a Wikipedia page. Drag&drop this link to the bookmarks bar: Citation Remover
2. Set Font: If a website is using bad font, use this. As I use Urdu a lot, and Urdu without Nastaleeq font looks ugly. So I apply any font to the page available in my system. Payami Nastaleeq is the default one for me.
3. Calci: A tiny calculator which returns results of simple arithmetic operations.
4. StyleStripper: Strips all CSS styles from a webpage. Helpful if I don't want to load an entire page I want to copy something from. Also works on most of the sites which disable copying using JavaScript. Click StyleStripper and you can copy the text. 

Misc. bookmarklets I created

QuoraSkip: Skip Quora-enforced 'login' popup by removing added elements and blur overlay.

To those who requested, don't complain now. (Abuzar :D) I have shared it finally. More such tips will follow. Keep visiting! And I know you will. :wink:

Rab Raakha!

PDF to Single Image - A Tutorial by 17 Year Old Me

Back in the days when I had a small Nokia phone, I wanted to do EVERTHING in that tiny device. It wasn't actually mine but because I was going to college, I was more "in need" of it than my sister.

Source: gsmarena.com [1]

The one on your right with maroon border. That was it.

Anyway, with a screen of 144x160px, I wanted to read PDFs which were stored in our desktop + laptop. Lots of books, of almost all genres I was interested in. Interestingly enough, the same neatly arranged folders are copied over to every computer I have used. So I still have all those books, plus what was added later on.

Initially, the idea to "read PDF on phone" was for the Quran, so that I could read it in the Indo-Pak Naskh font. Actually I had a Quran app in it, full text with super fast search engine, but the font used in that wasn't good enough for long tilaawat. In fact, even after getting android phone I've been searching something as fast as that app. I had been a fan of that guy who built it. Just looked it up, he goes by the name of Raza Mahi. His "Mahi Dictionary" was awesome too. All java .jar applications are things of the past now, but he has also moved on and started to build the similar apps for Android now. Good for him. I've linked his website in the references. [2]

So where was I? Yes. As I had difficulty reading the Quran in that app, I selected a PDF copy of Quran which had Arabic text in one column and its Urdu translation side-by-side. I cropped-out the translation part (making the text narrow enough to fit on my phone) and then started thinking about a way to achieve the result.

Necessity is the mother of invention they say, so I came up with two methods (discussed in the booklet below). Will attach the Quran files too for the record. Wow! Time flies. Seems like yesterday to me.

Later on when I converted many books to 'single image' using the same method, I compiled a short tutorial in the form of a booklet. I've left the whole text as is, without any correction in grammar or sentence structure, because

1. It's a reminder of my journey (read the booklet and see for yourself how writing styles change)
2. It's cute. ;)

Here's the summary of the two methods discussed in the booklet:

Method 1: Microsoft Office OneNote + MS Paint

Method 2: PDF to Images + IrfanView

Read the booklet and know how to use them. And remember it's an OLD tutorial.

DOWNLOADS

PDF to Single Image Tutorial (Booklet) : Read online or download

https://archive.org/details/PDFToSingleImageShakes.Ahmad

IrfanView: I came to know later on that this was very popular image-manipulation tool back then, and still is. Its first release was in June 1996. Now it's more powerful than ever. Check its Wikipedia page.[3]

https://www.irfanview.com

PDF to Images Converter: I still use it. Small size, works smoothly.

https://www.weenysoft.com/free-pdf-to-image-converter.html

Enjoy!

Reference

[1] Specifications of Nokia C1-01 via gsmarena [link]

[2] Raza Mahi Team - Old Apps [link]

[3] IrfanView on Wikipedia [link]