The lost art of bookmarklets
Bookmarklets, I think they are an underrated tool in the toolchain of problem solvers today. They can be fast, contextual, visual and cheap to build. What is not to love?
Looking up translations
For a project I worked on, the translations for the UI elements were managed in a CMS. Looking up a message meant:
- opening up a new tab in your browser
- navigating your way through the poor UX
- copy-pasting the translation
- clicking the search button
I always felt bad for the copywriters when I saw them go through the process. One day I decided to make some friends by creating a simple bookmarklet that would use the text selected on the current page as a query input for the search engine of the CMS. Now the process was simplified to:
- select the text you wish to alter
- hit the bookmarklet
That obviously got the copywriters hungry for more tools. The framework in place would retrieve the translations at build time so any changes made by the copywriters after that would not be visible until the project got build again. That is why they would often request the developers to “clear the cache” on production. We hacked around that with a combination of a simple controller and a bookmarklet that enabled the copywriters to do it themselves and iterate fast on different versions of copy.
Obviously the main problems were still there: Editing copy was underrepresented on the roadmap and our framework prevented runtime translations. But with a few small scripts we turned a bad situation into a workable one.
The Legacy System
For another client of mine I had to add an additional step to a business process.
Unfortunately the approval cycle that we wanted to introduce would have to be managed from within the legacy backend system.
Rather than immediately changing the legacy backend system to accommodate our change in process we created two little bookmarklets.
Based on the information embedded on the page they could perform the required step for approval with a few XMLHttpRequests.
This allowed us to confirm the process before going through rewriting the backend.
Placefill.js: a bookmarklet for filling out forms based on the placeholder data.
If you have come this far you must be interested in what bookmarklets can do for you.
Placefill.js is a bookmarklet for filling out forms based on the placeholder data.
Let’s say you made some changes to last step of a multi-step form.
You can use Placefill to quickly fill out the forms first steps until you have reached the part you wish to test.
It will take whatever is set in the placeholder attribute and set it the fields value.
When I design forms I like to use the placeholder to show an example value which I often prefix with E.g.
Placefill.js therefor removes them before setting the value.
Does your form have select boxes? Options are selected by looking for the first “non-empty” value.
Highlighting placeholder copy
In my opinion you can only do proper visual design when you use real copy. Sometimes that is impossible though. In those cases I like to classify the placeholder copy in HTML documents and highlight it in a different color using CSS. That is why I often add this snippet to a CSS file
.placeholder-copy {
color: red;
}
.like-production .placeholder-copy {
color: inherit;
}
Great, so you will now see the stuff that still needs work. But what if you want to get the “normal” experience?
That is where the bookmarklet Like production comes into play.
It will add a like-production class to the body element of the page.
You can switch back and forth by using the same bookmarklet again.
/* the URL for the bookmarklet is `javascript:document.body.classList.toggle('like-production');` */
document.body.classList.toggle('like-production');
Sharing is caring
What nifty bookmarklets have you created in your carreer? Share them with me on Twitter or contact me personally. I have a few more that I will share myself, but those deserve a place in their own dedicated articles :-)