Friday, September 14, 2012

&what?


I recently published amp-what.com. I created it to solve a problem I have:  trying to remember (or google) character entity numbers or names. For example, our last project used the entity » (»). Try googling this if you don't remember the name! Now, with this tool, I can just type ">>" and the character, symbol and number appear.

It turned out to be surprisingly fun to play with. I discovered chess pieces, planet symbols, all sorts of boxes. There are a surprising number of icons to play with. What have you found that surprise you?

I initially sourced the tool with the standard 100 or so entities from W3C. Then I supplemented this with 10,000 interesting Unicode characters, and a nice set of entity synonyms from Remy Sharp (whose site is solving the same problem). Seeing that people were sometimes getting no results, I pulled in an internet jargon file for non-conventional names, and supplemented myself, by manually coding them. I am interested in adding more, but want to keep it "offline friendly", which means not too large.

I was intrigued by a couple questions around "mobile": I tried to make it "mobile friendly", and the initial version was "small"; small enough to fit on an iPhone screen. This ended up looking sad on larger screens, so that clearly is not the answer. I recently refreshed it with a responsive design approach. Now it uses the screen space nicely on both small and large screens.

I also wanted to build an HTML5 offline app. For those of you with an iDevice, you can save to the home screen and have the reference available whether you are online or not.

But beyond being mobile "friendly," I believe that HTML5 offers a good alternative to building a native app. I wanted to push the UX and see if I could get it to feel as responsive as a native app-- I think it does a pretty good job at executing quick searches, but I'll leave it up to you to judge.

Since the initial prototype, I've layered in a few features: It wanted to be able to link to certain queries, so I used the hashtag to do that, so you can share your favorite queries.

I allow changing the font (using the small (f) in the bottom right corner).

I found myself wanting to use the Unicode characters in different contexts: not only web pages, but Javascript source and CSS files. I've added some ability to customize the display-- hex, decimal, Javascript, or URL encoded. Those controls are also at the bottom of the screen.

Check it out, bookmark it, and please send me feedback.

6 comments:

Tor-Ivar Krogsæter said...

I was so surprised to find your site; it did to me what you tell it was designed as for you: solved having to google every time one needed a new symbol. Thanks a lot for making it! Do you have any plans to implement Alt codes as well? If you did, you would have the ultimate character map tool. Quite a lot of the special symbols seem to require special fonts installed, such as Maestro (I would presume) for the different notes symbols) or who-knows-what for symbols like thumbs up and thumbs down. Is there any way of overcoming this with CSS3, without making the site too heavy on the bandwidth for phones?

ndp said...

Thanks @Tor-Ivar Krogsæter for the feedback. Appreciate it and glad you find &what useful.

I need to do a little more research on the alt codes. When I know for sure how to map them, I'll add an output choice at the bottom. I believe "Alt codes" are simply 0 + the decimal equivalent of the unicode code (but I don't use windows so I need to confirm). If you pick ⑩ at the bottom of the &what page, this will show you the decimal encoding-- just prepend this with 0 and it should work...

As far as fonts, I'm using web fonts at this point. My strategy is to list a series of backup fonts and hope/trust the browser to figure out how to render individual glyphs. This may not work perfectly, but it is low-bandwidth and low-risk. I've picked fairly complete fonts for OSX and iOS, and made stabs at fonts for Linux and Windows.

Again, thanks for your feedback.

Stefan Seidner said...

Hi Andrew,
I like amp-what very much.
However, I don't manage to copy codes from the site. If I click a character there's a pop-up window, if I click again the window closes. So how can I copy codes?
Thanks,
Stefan

Razor X said...

This site is a great idea, like a Detexify for UTF8.

I've found it useful so far, but I need to leave this feedback: trying to copy the character codes are incredibly frustrating. I try to highlight the code by clicking and dragging or just double clicking until the code highlights, but doing this is actually impossible since clicking anywhere on the code either opens a modal box for the character or closes the modal box for the character.

ndp said...

@Stefan and RazorX... thanks for the positive comments. I'll make a rev so it's easier to copy codes and characters... a recent change made this more difficult than it original was. Coming soon!

ndp said...

I pushed up a quick fix for the copy/paste issue. Now within the small dialog you can copy and paste both the character or the code.