Slipped into the recent post on social bookmarking was a new little browser bookmarklet maker tool I made so someone can create a tool to bookmark links to any subreddit.

subreddit-maker

If it looks familiar, it’s because it’s the same theme I use for the flickr cc attribution helper, which is just another bookmarklet tool. It’s hosted on Github which is a slick thing to know how to do (I still flail my way through the process, operating about at a 75% confidence level, see below).

If you need an assist on bookmarklets they are little piles of Javascript that are added to your browser, and perform handy chores when you click them. They go back to the Neolithic period of early JavaScript Person.

Old tools, yeah.

It got me thinking about one I use every day, and when I checked back, I made it in 2005- just in my first days of WordPress, a tool that makes a browser tool for searching my own blog. Why do I need that?

To search my own blog, I have to go to a URL, type something in, and then I see my results. If you are the kind of person that actually reads an dissects URl, you will notice that a search on any wordpress blog can be triggered by appending index.php?s=dog+photos to a wordpress blog URl to search it for “dog photos”.

Where there is a pattern there is an opportunity for a tool.

And thus what the “>WP Search Maker Tool does is make a tool so I can search my own blog from anywhere I am on the web, in 2 different ways:

  1. If I just want to type in search terms, I can be anywhere on the web, click the tool, and a search box pops up- enter my terms, and boom! search results.
  2. Or if I am reading something on the web, I can highlight a chink of text, click the tool, and it runs a search on those terms.

I have used that so often in the last 11 years going to my own blog and using the search bar is like a foreign experience.

So I wondered about updating the tool, putting it too on github. I then noticed that Blogger blogs have a similar regular structure for search queries, so I was fairly sure I could make something that would generate bookmarklet tools for either kind of blog.

And so here is the Blog Search Bookmarklet Maker, shiny and new…

bs-maker

You put the name of your blog in one field (it’s just used for the search entry prompt, the blog URL), and then drag the link from the blue button to your browser tool/favorites bar. You can find a lavishly illustrated guide in the github repo (with thanks to the Bavatuesdays blog for playing a supporting role in the screenshots).

The way I do this is bang around first on a local copy of the github content running from the localhost Webserver on my MacbookPro (the Web Documents folder). This is a static HTML site, which means it can run from github.

I think the theme is this one https://github.com/Olical/gh-pages-theme (it’s hard to tell because the demo links there are busted). If you want it, you casn just download my site, the only content of mine is in index.html.

The part where I always trip up is setting up a github repo to host the publis site, it means creating a branch called gh-pages. I really screwed this up when I started with an existing repo, but these were new, and I think I got the operation set up right.

I first create a new github repo from my own home page or https://github.com/new. It will have just a Readme.md and maybe a license file in it.

Then I select from the Branches menu the option to create a new branch– this is key, it must be called gh-pages

new branch

I essentially have made a copy of the master branch, which has like nothing in it. I click on the tab at the top that says 2 branches. First, I want to make gh-pages the default branch. Then I delete the master branch, after reading some warnings. How can I mess up, there’s nothing in this yet.

So now I have a repo with just the one branch. Now if this was a project where I needed a code repo, I’d leave the master, but that’s not needed when I am just making a site to host my github pages.

Now I am ready to connect it to me local working area on my computer. Okay, I am lazy, I do not do this command line; I use the desktop Github app, so I click the little button that makes a copy of the repo to my desktop and sets it up in the desktop app.

download

This creates a new folder in the place on my computer I put my github work (I work in a folder on my Dropbox). I then slide a copy of the working files from my Web Documents directory into this new folder. With the desktop Github app, I can then sync it to the server.

So if my repo is stored in my github account as https://github.com/cogdog/dogs-are better-duh, a gh-pages branch there is published as https://cogdog.github.io/dogs-are better-duh.

If I have totally confused you, well… welcome to the blog. Try the Github pages documentation. It’s pretty good.

Give it try? It’s only mildly tested by a user group of 1.

But I really like this setup of creating some little web based tools that let someone else create their own tool. I could have just written up a description how to hand roll a Javascript bookmarklet, but now I have something that can make the tool for other people.

And just for grins, this is the last version of this that I built in 2005– the sucker still works!

make-wp-tool

Heck even that one is a fork of the first one I did in 2004 to search my old MovableType blog.

The way this blog has been going lately, I think it might need to be called RetroCogDogBlog!

steampunkdog


Top / Featured Photo: Some classic staplers of various vintages, all metal. I am pretty sure those were ones found at photographed at my Mom’s house when we had to clean it out. She liked her office tools. I brought home the Swingline in the front. There were boxes of staples I bet that were bought in the 1960s. This is my flickr photo http://flickr.com/photos/cogdog/6306848469 shared under a Creative Commons (BY) license

The post "Shining Up The Old Bookmarklet Tool" was originally slapped on the butt by a cigar smoking doctor yelling "It's a post!" at CogDogBlog (http://cogdogblog.com/2016/02/shining-up-bookmarklet-tool/) on February 7, 2016.

2 Comments

Leave a Comment

All fields are required. Your email address will not be published.