Mailing List Articles Atom Feed Comments Atom Feed Twitter Reddit Facebook

Tag Cloud

3d 3d printing account algorithms android announcement architecture archives arduino artificial intelligence artix assembly async audio automation backups bash batch blender blog bookmarklet booting bug hunting c sharp c++ challenge chrome os cluster code codepen coding conundrums coding conundrums evolved command line compilers compiling compression containerisation css dailyprogrammer data analysis debugging demystification distributed computing dns docker documentation downtime electronics email embedded systems encryption es6 features ethics event experiment external first impressions freeside future game github github gist gitlab graphics hardware hardware meetup holiday holidays html html5 html5 canvas infrastructure interfaces internet interoperability io.js jabber jam javascript js bin labs learning library linux lora low level lua maintenance manjaro minetest network networking nibriboard node.js open source operating systems optimisation own your code pepperminty wiki performance phd photos php pixelbot portable privacy problem solving programming problems project projects prolog protocol protocols pseudo 3d python reddit redis reference releases rendering resource review rust searching secrets security series list server software sorting source code control statistics storage svg systemquery talks technical terminal textures thoughts three thing game three.js tool tutorial tutorials twitter ubuntu university update updates upgrade version control virtual reality virtualisation visual web website windows windows 10 worldeditadditions xmpp xslt

Page Position Bookmarklet


Today I have a trio of related javascript bookmarklets for your browser. They allow you to save / restore / clear your position on any web page. It persists across sessions / reboots / page navigations too. It does this by saving the position in your local storage for each path at each domain. This means that you can save your place on multiple pages (even on the same domain!) and they will all be saved until you use the clear bookmark on each page you saved it on or clear your local storage.

I will probably come back and write an upgraded version of these later, but for now they only save one position per page. It would be neat if the saved positions acted like a stack, so you could save multiple positions on each page.

Link: Page Position System

Saving and Restoring <inputs />

I have made a pair of Javascript bookmarklets that allow you to save and load the contents of input boxes and textareas on any webpage.

To use them, simply drag the 2 links below to your bookmarks (bar), and click "Save Inputs" when you wish to save the contents of all the inputs, and click "Restore Inputs" and paste in the code you received from the "Save Inputs" bookmarklet to restore the contents of the input boxes on any given page.

Save Inputs

Restore Inputs

Source Code

The (pretty printed and decoded) source code for the two bookmarklets can be found below:

Save Inputs

(function () {
	var inputs = document.querySelectorAll("input, textarea"),
	savedata = [];
	for (var i = 0; i < inputs.length; i++)
	prompt("< input /  > and < textarea > savedata :", JSON.stringify(savedata));

Restore Inputs

(function () {
	var savedata = JSON.parse(prompt("Savedata: ", "")),
	inputs = document.querySelectorAll("input, textarea");
	for (var i = 0; i < savedata.length; i++)
		inputs[i].value = savedata[i];

Known Limitations

  • The savedata code that the "Save Inputs" bookmarlet produces is not copied to the clipboard
  • Strange things happen if you try to restore the contents of a set of input boxes from a savedata code from another page
  • The script breaks if the input boxes on a page get changed

If you have a better version of these bookmarklets, please leave a comment below.

Found a spelling mistake? Got suggestion? Leave a comment below. Suggestions for improvement are always appreciated.

Lightsout and Syntax Highlighting


I am releasing a javascript bookmarklet that allows you to select an element of any web page and put the rest of the page behind a screen.

To use it, simply drag the link below to your bookmarks bar and then click the bookmark when you want to use it. After it loads, you can then select the element of the page you want to focus, indicated by the blue border. You can also press 'A' to attempt to autoselect a flash object, while avoiding ads.


If you can't get the bookmarklet to load by dragging the link above to your bookmarks, copy and paste the following code into a new bookmark:

javascript: (function () { var lightsoutloading = document.createElement('div');'SBRLlightsoutloadingmessagecontainer'; lightsoutloading.innerHTML = '<div id=\'SBRLlightsoutloadingmessage\' style=\'width:300px;height:auto;position:fixed;top:0;left:0;background:rgba(200, 200, 200, 0.8);border-radius:5px;z-index:2147483647;transition:all 0.5s;margin:10px;padding:10px;border:none;opacity:1.0;text-transform:none;min-height:0;min-width:0;font-faamily:sans-serif;bottom:auto;right:auto;font-size:12px;text-indent:0;line-height:normal;color: black;text-decoration:none;clip:auto;font-style:normal;font-variant:normal;font-weight:normal;max-height:none;max-width:none;direction:ltr;word-spacing:normal;visibility:visible;text-shadow:none;\'>Loading lightsout...</div>'; document.body.appendChild(lightsoutloading); var jsCode = document.createElement('script');jsCode.setAttribute('src', '');document.body.appendChild(jsCode);}()););

Since this is a javascript bookmarklet, there are probably websites that this doesn't work with. If you stumble across one of these websites, leave a comment below and I will look into it.

I am also trialing a new syntax highlighter along with this post! It is possible that the site may not work as expected during this trial period.

Edit: Testing complete! This blog now has code syntax highlighting enabled thanks to PrismJS.

Art by Mythdael