Tag Archives: bookmarklet

Online Less compiler bookmarklet

Premise: as soon as I knew Less I started using it and I hardly think I’ll go back to write pure CSS.
Problem: I don’t always have the tools or the environment I need to code comfortably (it’s a lie, I’m lazy and I never installed what I really need…).
Solution: Less has an awesome Javascript library that processes .less files client side. That’s perfect for developing time, but not really the best solution for the release, considering that you have to put blocking code in the <head> tag of the page to process always the same files (Less has an interesting cache system, but that’s not the argument of this post).
So, when I’m not able to compile the less files on my machine, I use a bookmarklet to copy the code that the client side library compiled and paste it in a .css file.
Here it is:

Make Less

Just go to the webpage in which you are using the client side less library and click the bookmarklet.
It will open a popup with textareas containing all the styles compiled in plain css.

Warn to myself: this is not the right way to work! This can work only as a temporary or “emergency” case, so move your ass and install the right tools!

Mobile layout bookmarklets

I often need to view a web page I’m viewing on my desktop as I was on a mobile screen.
I used to manually resize the browser but I could not have a reference on which size should have the browser to be like a tablet or a smartphone.
So I’ve done myself some simple bookmarklets that open the page I’m viewing in a browser page of the correct size.
Here they are:

phone portrait (320×480)

phone landscape (480×320)

iPad landscape (1024×768)

iPad portrait (768×1024)

laptop 1440×960

If you think they can be useful drag them to your bookmarks bar.
I use to put them in a “Screens” folder in my bookmarks bar.

If just resizing the browser isn’t enough and I really want to know how a webpage is viewed on a smartphone and don’t want to write the entire URL with the uncomfortable virtual QWERTY, I show a QR code of the current page by using this bookmarklet:

to qr

After i did them I found Bricss uses a similar way to show how the webpage appears in different screen sizes.
That’s interesting too, because it allows you to see how a webpage appears on different screens at once.