Posted in : UI-Components

Image ratio calculator

Posted on July 4, 2017 by eloone

Finally I coded my image ratio calculator…!

I use it to calculate the dimensions of the image I want to create with a precise ratio. Usually I only create 16:9 images, but since in Photoshop you sadly can’t set the image’s dimensions at creation based on a ratio (at least the ratio I’m interested in), I built myself this little tool. In Photoshop this is what you see:

Photoshop size options

Photoshop ratios

No 16:9 ratio. Yet, 16:9 is my favourite, since it’s the HD widescreen dimensions. So in my tool you just set your preferred orientation and dimension and it calculates the dimensions with the ratio that you provide. It saves me really a lot of time in my process. Even if Photoshop provides a way to create an image from a custom template with your custom dimensions, I don’t naturally recognize that such template is a 16:9, I always end up recalculating the dimensions… So I really need this! And maybe so do you! Bookmark it already:

https://eloone.github.io/image-ratio/

 

On the subject of images, I will elaborate later. But yeah, sometimes I produce stuff! This is mine !!👇👇👇 😉

Remember to be fearless

Posted in Technical, Projects, Github, UI-Components

The typing symbol hack

Introducing the symbolTyper js library ♥

Posted on June 25, 2014 by eloone

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 →

Posted in Code, Projects, Github, UI-Components

Tagged ,

jGridder : how to fit elements in a sized grid

A recursion pattern for UI

Posted on May 21, 2013 by eloone

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 →

Posted in Favourites, Projects, U.I, Software-Design, Algorithms, Github, UI-Components

Tagged