I basically save a lot of bookmarks, every page visited is bookmarked it, I know this is not good and i should leave this habit, but i always have this feeling what if i might need this URL sometime in near future. So because of this fear and also did not wanted to clutter my bookmark bar of the browser, so was trying to use a very simple techniques to write the link(URL/Title) to a markdown file, and save it into my DropBox Folder so that that it is synced across my devices.
There are lot of alternative already available, i am providing a list of few of them.
This is a very good plugin available for all the browser so that you can sync across browsers, here is my tutorial on setting it up.
Now you can also google for other social bookmarking sites, the problem is I did not wanted to use these sites, as these were ready made solution and most of them looked like trying to kill a fly with a tank basically meaning these had to many features for my simple use case.
Another reason was, i started learning a little bit of
CSS, so i wanted to use this learning to create a bookmarklet.
Like most of the journeys in this world, mine was also not smooth, faced many hurdles in solving this simple problem, but i learned few new things from this. So i will take you through the problem which were faced and how it was solved.
Java developer before I started
- to Open a File using
- Read the content of the file.
- Modify the content.
- And then Save the file.
So i thought i can use the same concept and open the same file, read the content, modify the content and then save it with the same name. So with this help my problem was solved.
Now to adapt to this solution the problem was i cannot make this complete code as a bookmarklet, because, i need to have these in a HTML page.
inputfile tag to input the file.
- One button to save the file.
So the idea of just a bookmarklet was not looking a possibility, the plan changed to having a bookmarklet get the Title and URL of the page to bookmark and then pass it to this WebPage, and will host this code on GitHUB and then Clone it across my Apache WebServer on different System so that my bookmarklet works both in my office and in my home.
How to Pass the Title and the URL to my WebPage
So solving this simple bookmaklet use case was turning into a nightmare, as i was getting hit by one roadblock after another, so now after deciding that i will split the work between.
- A bookmarklet which will just get the URL and Title of the Webpage.
- Pass this URL and Title to my local WebPage to be saved into the text File.
Now the problem is how to pass these two information from my bookmarklet to the local Webpage. The Solution which came to my mind we also liitle bigger than my actual use case required. The solution which came were:-
- Write a Cookie and the read it in the Local webPage.
- Use the Local Storage of the browser.
Even worse, coming from a Java and C background which have global variable, i was trying to make something global in bookmarklet and then using it in the Local webpage, not understanding that when i redirecting from the bookmarklet to the local webpage all my variables were gone, side effects of being a C developer, the Browser looked like one big context where i am saving variables.
So after these initial understanding i found out about
window.location.hash so i thought i can pass both my Title and URL as a Hash, here is the code which did this.
window.location = "http://localhost/myTutorials/linksSavedtoLocalFile/" +"#"+myHref+"#"+myTitle;
So after passing the Hash it was all about reading the hash and modifying it as shown below:-
var receivedStringArray = (window.location.hash).split("#");
- Hash Usager MDN
- Create Bookmarklet – The Right Way
- GitHub Code for the Local WebPage
- GitHub Gist for the BookMarklet