Posted in : UI-Components

The typing symbol hack

Introducing the symbolTyper js library ♥

Do you remember as a kid playing with the Wingdings font of Microsoft Word on Windows 95 ? Personally it’s one of my favourite memories. I used to always activate the font and type on the keyboard to discover which symbols appeared on the screen. Every key was hiding a symbol. I never really understood why this font even existed mixed in with Times New Roman and Arial. It was like a pirate in the navy, discarding any character encoding rule, outputting whatever it wanted, like a crazy font. It seemed very odd that engineers would come up with that since it follows no logic and the use is really not obvious. Anyway, I found it very fun to play with and always ended up making some posters or invites with it. In the end I would do something that approached this :

For some reason, I particularly loved the bomb symbol, it is very unique, I’ve never seen it in any other font. So this is what the hack I want to share today made me think of, typing symbols in my childhood. High moment of almost creativity.

Continue reading

jGridder : how to fit elements in a sized grid

A recursion pattern for UI

Today I want to share about jGridder : https://github.com/eloone/jgridder.

jGridder is a javascript UI component that I developed to fit a number of elements in a sized html grid.
It solves this problem :

Given a height and width and a number of items, how do I place those items as squares in a grid that fits those dimensions?

To see what I mean, peek at the demo : http://eloone.net/jgridder/demo/.

In this post I will share my approach to design the script and tackle the problem, it’s not a tutorial about the code itself. But hopefully it will enlighten and help you regarding similar problems you might have in UI. The focus will be on the method.

Continue reading