Announcing Faviconist

faviconist screenshot

I have made a new Favicon generator, Faviconist. Since most favicons are just a letter with some colour theme, I found it crazy to have to open up a photo editor every time I wanted a new favicon. Or alternatively, it’s easy enough to convert an image with ImageMagick, but most images don’t scale down nicely to a tiny icon! So the aim here is not an editor as such, but a true “favicon generator”.

Using Faviconist

To create a favicon, it’s as simple as typing the first letter of your website. But you probably don’t want the default colour scheme, so it’s easy enough to tweak. Under the covers, Favicon has a concept of a “FillStyle” and both foreground and background are instances of FillStyle, so they have the same flexibility. You can have a solid fill style (just a single colour), a linear gradient, or a radial gradient.

For simplicity, Linear gradients don’t have stops (it’s just a linearly increasing spectrum from start to finish), though you can choose the direction. And in the same sprit of simplicity, radial gradients may only begin at some points, and their span is fixed. The guiding principle here is “YAGNI” – You Ain’t Gonna Need It. I’m catering for the 95% of people who don’t want to micro-design their icons; the rest will still need to resort to PhotoShop et al.

The preview images are PNGs, which can easily be downloaded directly. However, another gripe of mine is the whole thing of downloading to hard drive and uploading back to a server somewhere else. Hot-linking, aka “bandwidth theft”, is rightly a problem for the original image host…but it’s a shame the only way we can deal with it is to silo everything. (A parallel vision of the web, which might have almost succeeded and still might, saw it more as embedded content than a collection of copies and links.) In this case, it’s only favicons, so I’ll just say hot-link and be merry. When you click “Save Favicon”, it saves the icons on my server and you can just cut-and-paste into your own project.

I hope this is useful for quick hacks and hackathons, where favicons are often forgotten! These days Favicons are more useful than here. Of many reasons to use a favicon, things one might forget are: they’re used on third party sites like Google Plus, tabbed browsing is super-popular these days; if you don’t provide favicons, you’ll get 404s in your log files.

And here’s a little tip for you – don’t just use letters. Try special characters, and don’t just limit yourself to ASCII. You have the entirety of Unicode at your disposal!

How Favicon Works

Buzzword Bingo time. There are a number of technologies at work here:

  • HTML5 Canvas In the past, a site like this would have to be powered by the server – every change would require a long wait for the server to generate a new image. But now, we can do it in real-time, in the browser, using Canvas. The only server interaction is conversion to “.ico”; unfortunately, Canvas will output to PNG, but not ICO. And while a JavaScript ICO encoder is certainly a possibility, no-one has yet written one.

  • Canvas Text To draw text, Faviconist uses Canvas’s fillText method. e.g. context = canvas.getContext('2d'); context.fontStyle = '25px arial'; context.fillText('Yo!'). When Ace Editor effort got started (called Bespin), in the early days of canvas, text support was patchy. But now it’s very well supported.

  • MeasureText Library I thought Faviconist would be easy because I thought there would be simple metrics for fonts. Turns out canvas’s measureText() returns a “TextMetrics” object, and guess what TextMetrics contains:

interface TextMetrics {
  readonly attribute double width;
};

Huh? We can only find the text’s width, not its height. And as a I went down the path, I learned you can’t just say “draw this text with its top-left at (0,0)”. To center the font, as we do in Faviconist, we actually need to determine text offset as well – left and top.

So I built the MeasureText library. It works as a drop-in replacement (~shim) for the built-in HTML5 Canvas MeasureText mechanism, and also provides a new convenience function not requiring an existing canvas. It works by drawing the text and scanning the resulting bitmap to get a true representation of the metrics. Using this, and with a little geometry, it’s possible to center text.

  • Favicon Library Figured it would be cool to show a preview of the favicon by changing the site’s actual favicon! For which I used ye olde Favicon library, which I originally created via this blog and I’ve now officially moved to Faviconist.com. The library also incorporates a new “badge” feature, so you can show number of pending emails, etc. Go try the demo!

  • Font Selection You can choose fonts, with the fonts coming from the Google Font Directory. It wasn’t feasible load all fonts, so they’re loaded dynamically, but I wanted to show previews … so there’s a script to build a 38,000 pixel sprite map! It’s loaded after the page loads, with a canvas-based check to see if it loaded successfully (since it doesn’t work on Firefox). To show it in a dropdown, I used a fork of the Chosen library, a fork which retains the class of each option in the select list.

  • Chrome Frame Didn’t want to support IE6-IE8, so introduced Google Chrome Frame, based on the code in HTML Boilerplate, but increasing the version check from 6 to 8.

  • JavaScript Libraries Faviconist uses several useful libraries: jQuery, Underscore, Backbone, and jQuery Tools. And just to say, jQuery Tools is the very picture of Developer Experience heaven. Great explanations, many easy-to-follow demos, lots of options…and a CDN for the libraries.

  • NodeJS, Connect, Express The server is NodeJS running the Express-Connect stack. Considering that the app is almost all client-side, I spent a ton of time getting up to speed with this stack, partly due to performance optimisatins, and partly due to the next point …

  • Jade, Stylus, Kaffeine Being a fan of DRY, I’m very happy to be using higher-level abstractions of HTML, CSS, and JavaScript. I certainly am happy with Jade, with the exception of dropping in raw HTML script snippets. And Stylus is absolutely awesome. Kaffeine makes JavaScript much easier, though I’ve found it difficult to incorporate everywhere because the ecosystem is very much geared around CoffeeScript. e.g. Connect comes with a default CS compiler, Nodemon (a node watch-and-run-tool by Remy Sharp) supports CS, there’s a ton of doco about getting CS working with things. So that was really the biggest challenge. I mainly wanted Kaffeine because I’m not such a fan of significant whitespace, but the ecosystem’s preference for CoffeeScript did present challenges.

I hope you enjoy Faviconist. It’s a work in progress, so please leave feedback if you have suggestions.

WebWait Two Point Oh

I’m pleased to announce a major upgrade to WebWait, the first big upgrade since I launched the site 2.5 years ago. It’s based on watching how people are using it, talking about it, and sending me direct feedback about it. Thanks to all who have provided feedback.

The new features are:

  • Multiple sites You can keep typing in new URLs and hitting “Add”. This will put them in a queue of sites to eventually be benchmarked. (I decided against a big textarea where you could type in all URLs at once; this would be confusing to the majority of WebWait users, who are casual visitors wanting to check out the time for their own site.)
  • Stats Average, median, and standard deviation for each website, in a summary table. Indeed, the summary table is the cultural centre for all these new features – when you queue up a site, it’s immediately added to the table.
  • Export The export feature seems to be popular in List Of Tweets. I took the same UI concept and applied it here, so you can export data in plain text, HTML, and CSV format. The CSV is especially interesting as one of the people who’ve given me feedback is a statistician who’s planning to run analysis on some data.
  • Call Data View times for each individual call.
  • Expand/Collapse Call Data You can choose whether to show call data or not. Collapsing call data gives you a neat overview of stats for each domain.
  • Delete You can delete individual call data, or delete an entire website record. This is useful for outlier data; for example, you can see how fast the site loads from your browser cache, by turning browser cache on and deleting just the first call in the sequence.
  • Stats Average, median, and standard deviation for each website.
  • Browser compatibility. WebWait didn’t work upon launch in Safari, but it does now work in recent versions of Safari (I think a change in 3.0 made it work again :)), and works fine in Chrome too. This is important for users testing how their website loads in different browsers.

Thanks for reading. As always, let us know what you think of the site and anything else you’d like to see.

Table with expanded results:

Table with collapsed results:

Export results data (text):

Export results data (HTML):

Export results data (CSV):

Instalicious: Push Delicious “ToRead” Items Into Instapaper

Update: Moved instalicious to GitHub. The main change I made since posting this was to stop items reappearing in Instapaper once you’ve deleted them; the sync process was causing them to be pushed from Delicious again. The script now changes the “toread” tag to “instaliciousd” (configurable name), so “toread” items will only be pushed once.

Instapaper lets me read stuff later – I hit a bookmarklet when I’m reading it and I can see it later on my browser or in iphone, or print articles in a newspaper format. The problem is, I’d rather add that stuff to my Delicious stream so I have a permanent record, others can see it, and it plays nicely with in mashups.

So I decided I want a way to bookmark things in Delicious as normal, but still have them appear in Instapaper. Here’s the script repo:

Instalicious repository at GitHub

Instalicious is a little Python script that plucks out items tagged “toread” – or some other configurable tag – and pushes them to Instapaper. Fortunately, both services have easy APIs (Instapaper API; Delicious API), and in the case of Delicious, there was even a pleasant Python binding to the API. Also, the Instapaper API happily doesn’t create duplicates when you send it something you’ve already sent…so Instalicious doesn’t have to remember what it sent. It just dumbly polls Delicious and sends it over to Instapaper.

Now you can have your cake and eat it :).

List Of Tweets

ListOfTweets.com is a little twitter mashup I made to organise tweets. The tool lets you build up a list of tweets from search results, which you can convert to HTML or text. The list doesn’t empty unless you clear it, so you can keep running searches and adding to the list. You can easily rearrange tweets with drag-and-drop.

By the way, List Of Tweets is another example of a URL Trail. Thanks to the simplicity of the Twitter API and the elegance of JQuery, it was possible to build a raw version in a couple of hours. t is approaching zero. Only after tweeting about it and discovering people found it useful did I decide to flesh it out some more.

A future upgrade might involve saving the list at a unique URL. It would be nice if any of the pastebins provided some support for this via a JSON API (admittedly with relatively short URLs – only up to 2000 characters could be reliably posted). But I will probably build my own, or just start a new frame and post into a pastebin.

I originally wanted this as I’ve been thinking about podcasting again and wanted to pull out some highlights from my recent tweets, to act as a schedule, and something I could publish as a playlist at the end. However, a colleague suggested a far more useful scenario, which is to find tweets matching a keyword, hence I added the search keyword parameter, which I now use much more often than the tweeter parameter. Here’s an example of someone using it in their blog to archive tweets about a hashtag.

I’ve already let people know about the tool via Twitter, but it feels incomplete until I blog about it. Done!

Scrumptious: Conversations About Websites (and other resources)

Scrumptious is a web framework I’ve begun working on at Osmosoft. It’s a web app and web service for sharing bookmarks and comments about websites, and pretty much anything else with a unique URL. Things it is related to: Delicious (bookmarking), Digg (threaded comments), JS-Kit and Disqus (embedded comments with common identity across multiple sites).

Scrumptious is open source, under the BSD license (meaning you can do just about anything you like with it). There are already many open-source clones of this sort of thing, so why make a new one? There are a few reasons:

  • Adherence to RESTful principles – Scrumptious is backed by TiddlyWeb, a RESTful data service.
  • A non-TiddlyWiki TiddlyWeb client – So far, people who have used TiddlyWeb as a server have used TiddlyWiki as a client. They do play nicely together, but TiddlyWeb is a powerful RESTful framework on its own. Part of the motivation for Scrumptious was to port the TiddlyWiki nest comments plugin to a generic JQuery plugin that could be used on any web page. (Comments are indeed implemented as a plugin right now, but more work needs to be done to extract it into something truly modular and reusable; for example, the plugin right now assumes comments are about a web page; also, they are tied to TiddlyWeb. Nevertheless, the app still does achieve the main purpose of demonstrating TiddlyWeb is a fine data service for generic web apps.)
  • Demonstrating the power of URLs – In evangelising web standards, a very practical piece of advice is simply to associate a unique URL with each distinct resource. That’s REST 101, but it’s something lacking in many web apps. With a tool like Scrumptious, you get a comment system “for free” as long as each resource in your system has a unique URL. We’ll be developing a similar framework for URL Trails in the future, and the same principle applies: use unique URLs, and people can put your stuff in trails “for free”.
  • Flexible security model – Again, TiddlyWeb offers flexible permissioning, so you can use the app in different ways. e.g. a private conversation between colleagues; a public conversation (as with the demo), a publicly readable conversation where only certain individuals can contribute, etc. Likewise, TiddlyWeb offers flexible authentication, so you could hook into an organisation’s LDAP system, use open ID, simple user-password pairs, or any other form of authentication you wish to use.

Scrumptious is still at an early stage. Future work includes:

  • Bookmarking – for now, there is only commenting rather than social bookmarking per se.
  • Nested comments UI needs work to give it the same kind of UI as in the TiddlyWiki comments UI. e.g. show info like creator and creation data, and use suitable rendering and indenting.
  • Graceful degradation – It would be possible to provide a basic system not requiring Javascript. This would be probably be done using TiddlyWeb plugins, though I’d also be interested in running the JQuery-powered web app on the server, using server-side Javascript.
  • TiddlyWiki comments plugin harmonisation – As TiddlyWiki now ships with JQuery, it would be ideal if there was a single code base for the comments plugin, running in and out of TiddlyWiki. Indeed, I hope TiddlyWiki moves towards a general microkernel architecture, in which all plugins are useful outside TiddlyWiki. This is certainly becoming the case, with generic JQuery plugins being extracted for core activities like file saving, CSS applying, and wikifying.
  • Browser extensions – instead of a bookmarklet, use a browser extension to show, for each page, if comments are available, as well as bookmarking info. (Similar to the StumbleUpon or Delicious Firefox extensions.) A good opportunity to get my hands dirty with JetPack.
  • Login and identity management – while TiddlyWeb already provides the security and permissioning model, work is required to handle this at the UI level. For example, let anonymous users enter their email address and homepage, and/or register.
  • User admin – for situations where users must be authenticated, some form of user management would be handy. Again, TiddlyWeb provides a good model for this – a “bag” of tiddlers has its permission specified in JSON, which may include a list of users for each access type, so you simply need to PUT and GET this if you are sufficiently permissioned (ie an admin). What’s missing right now is a UI (in TiddlyWiki too, let alone standalone web apps).

Scrumptious Screencast:

<

p>Scrumptious from Michael Mahemoff on Vimeo.

A Contact Form

I recently got fed up of spam. Well, that happened a long time ago. What bothered me recently, enough to take action, was false positives, i.e. real email that fell into my spam folder. My primary email address, [email protected], gets about 3000 mails a day…so what goes in my spam folder, stays in my spam folder. There’s no way known I will ever fish it out.

People I know usually get through to me okay, but of course I also receive mails from people I don’t know – who found my mail from my blog, websites, writings, or offline meetings. For them, there’s a good chance of being marked as spam, especially if they use a subject line like “hello” which is a perfectly natural thing to do when you’re just checking in with someone you’ve met at a conference, for example, so you can keep each other’s contact details. (Incidentally, I still find it astonishing how many people maintain blogs – many of them meticulous, comprehensive, and full of goodness – but include zero contact info.)

So I finally bit the bullet and made a little PHP/Javascript contact form. It’s been working great for several months now. This kind of form is nothing new, of course. Mail forms were once ubiquitous in every book on CGI. But there were a few modern twists worth mentioning.

The form looks as follows:

The gnarly twists:

  • Captcha. Or, really, ReCaptcha. Actually, I prefer Captcha to ReCaptcha – I think the benefit of scanning books is great, but can’t justify the usability cost of having to enter two words instead of one (for no extra security benefit). Still, I wanted to try out ReCaptcha, and I also like the way its a popular, centralised, service, which means it should be better at detecting evil clients than a standalone library installation. The PHP plugin and instructions turned out to be incredibly easy to follow. A pleasant surprise that meant spam prevention took about 20 minutes to set up in total.
  • SMS option. Instead of email, you can send the message as SMS (text message to my phone). I need to improve the UI here a bit, ideally creating separate tabs for SMS and email. Anyway, the way this works is via everybody’s favourite micro-blogging service, Twitter. On the Twitter website, I set preferences so direct messages are routed to my phone as SMS messages. Ideally, I would then send a direct message to myself each time someone wants to SMS me. But unfortunately Twitter doesn’t let you send messages to yourself (silly!), so I created a secondary account (the venerable “mahemoff1″). Each time someone submits a SMS, I use the Twitter API to end a direct message from the secondary account to the primary account. This gets me a text message several seconds after the form is submitted. I also receive a copy in my Twitter account, as a bonus. (For all the talk about Twitter’s unreliability, its text messaging is lightning fast. It shows up on my phone long before it shows up on Air clients, which only poll once a minute or so. Ideally I’d upload a video if I had the time, to show how quick it is.)
  • A web chat facility. Everyone should have it, to avoid making people install AIM etc just to chat with you one time! I installed an open-source chat client so anyone can talk to me. In an ideal world, browsers would notify me when someone is trying to chat, but for now, it requires pre-arrangement. I would like to enhance the app so it uses the same SMS mechanism to tell me each time someone enters the chat room.

Music As She’s Developed

I made a little music mashup you might enjoy using.

A Little Music

As I was playing around with the new layout of this blog, I added a Last.FM widget to the sidebar. It looks like this:

(May not render if you’re reading this from a feed reader.)

Great. Now I can listen to trance from the blog. Trance is good for coding. So that’s ace. But I couldn’t stop there, could I?

Widgets, Widgets, Everywhere!

I made this page with 30+ gadgets in all sorts of genres. This is good for those times when I’m not coding and want to listen to something else. Being in the cloud, it means I can easily listen to whatever I feel like when I’m in an internet cafe or the such like. So even more ace.

Make Your Own Jukebox

In the spirit of sharing, you can easily make a page containing your own favourite music. The URL for the default music page resolves to something with a ridiculously long list of genres:

  1. http://softwareas.com/music?tags=trance,ambient,meditation,triphop,funk,randb,rap,hiphop,metalrap,latin,salsa,reggaeton,rock,pop,retro,alternative,metal,punk,aussie,britpop,europop,world,bhangra,arabic,70s,80s,90s,house,techno,electro,acid,garage,psychedelic,jazz,swing,lindyhop,classical,instrumental,orchestral
… which means you can hack the URL and make your own jukebox with your own genres and bookmark it and it will work and live on in the cloud and you too will be able to listen to your favourite music anywhere you go.

For example, you might be a more passionate fan of contemporary Japanese music than myself, in which case you would concoct the following URL and save it to your delicious bookmark manager to enjoy many years of musical gratification:

http://softwareas.com/music?tags=j-ska,j-pop,j-punk,j-hop,j-rap,anime

Add A Player on the Fly

One other feature is that you can add a new player on the fly. This again is great for travelling around as it will let me easily listen to any genre I care for without even having to edit the URL.

(Unamusing trivia: I actually caused a bug at first by using “gray” as the colour name here. I’m used to working with American spelling for programming of course, but then last.fm is a UK company and the name you want is actually British spelling, i.e. “grey”.)

Obligatory Wishlist I’ll Not Really Get Around to Implementing But it’s Cathartic to Braindump it Anyway

If I was going to do more work on this, I would:

  • Make it into a widget-like portal which lets you add/remove/layout etc and save settings within a hackable URL (using Unique URL. You could argue the whole thing is useless as you could achieve the same thing in iGoogle/Shindig, but sometimes a specialised interface, tucked neatly inside a separate tab, works best.
  • Provide more flexibility on layout
  • Add support for bands, not just tags
  • Run it on a separate page without the blog layout
  • Keep the loldog