My techniques.

Image ratio calculator

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

21st century ready

This is just to say that I upgraded my blog to support two majors things that qualify a blog as “21st century ready”:

  • Markdown
// Oh my God.๐Ÿ˜œ
alert('Finally!!!');
  • Emojis

๐Ÿ˜€ย ๐Ÿ™‚โญ๏ธย โœจย โšก๏ธย ๐Ÿค“ย ๐Ÿ˜ณย ๐Ÿ˜‚ย ๐Ÿ˜ย ๐Ÿ˜ย ๐Ÿ˜‡ย ๐Ÿ‘‰ย ๐Ÿ˜Žย ๐Ÿ’ชย โœŒ๏ธย ย ๐Ÿ‘€ย ๐Ÿ™Œย ๐Ÿ‘ย ๐Ÿ’•ย ๐Ÿ™ƒย ๐Ÿ˜œย ๐Ÿ™„ย ๐Ÿ‘‹ย ๐Ÿ˜นย ๐Ÿพย ๐Ÿ’ฅย ๐Ÿ’ซย ๐ŸŒฝย ๐ŸŸย ๐Ÿ’–ย ๐Ÿ’žย ๐Ÿ˜ผย ๐Ÿค–ย ๐Ÿ‘ปย ๐Ÿ‘ฝย ๐Ÿ‘…ย ๐Ÿ˜Šย ๐Ÿ˜‰ย โ˜บ๏ธย ๐Ÿ˜ย ๐Ÿ˜‘ย ARE YOU FREAKING KIDDING ME ๐Ÿ˜ฑย ๐Ÿ˜ฑย ๐Ÿ˜ฑย ๐Ÿ˜˜ ! ! ! ! ! ! ! ! ! ? ?

CHARACTER ENCODING HAS ALMOST KILLED ME. ๐Ÿ”ช ๐Ÿ”ช ๐Ÿ”ช

Posted in Technical, Misc

Tagged ,

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

By value, by reference in javascript

The pass by reference mechanism in javascript

Lately I have realized some useful facts about the pass by reference mechanism in javascript.
Let me share them here.

To cut to the chase, there is no such thing as passing a variable as reference in javascript. Variables are always passed as values in arguments. This means that what you can do in PHP for example when you do function test(&$val){} is not possible in javascript, there is no special keyword or symbol to do that.

However, there are some cases when you can “simulate” this behaviour in javascript. But before showing you how to do that, let’s make a recap.

Continue reading

Posted in Code, Programming, Wiki

Tagged

Binary Insert : How to keep an array sorted as you insert data in it ?

With javascript and recursion

Recently I played solving the overlapping rectangles problem. This problem is simple, it is about finding out among a set of rectangles laid out on a surface which are the ones that overlap, with code of course. I will certainly detail my solution later but since it is very big and requires a bit of work and graphics, I prefer starting by sharing small bricks of the solution now.

A brick of the solution involves scanning the x coordinates of each rectangles like you’re moving from left to right reading every x coordinate of a rectangle you encounter, both left and right side. In computing terms, this means you need a structure to put the x coordinates in, and the scanning means the structure needs to be sorted : first x coordinate is the first coordinate you encounter and therefore the smallest one, last x is the largest.

I picked an array as the data structure so I needed this array to be sorted at all times to track the x coordinates. In real life conditions, the rectangles are thrown at you in chaos order and you have to add the x coordinates to your array and keep it sorted. How would you do that? This is the very problem I intend to expose and solve in this article :

How to keep an array sorted as you insert data in it?

My code is in javascript but the reasoning I will describe is totally language agnostic, you can always apply it to your own language.
Continue reading

Posted in Code, Algorithms

Tagged ,

The Infometer Concept : Making information measurable

Introducing the Infometer chrome extension

In this article I will show you what’s missing in the way we process digital content and what we could do to improve that with the concept of “Infometer”. It is the rationale behind the Infometer chrome extension that I also introduce here as an illustration of this concept. Continue reading

So I am a heavy reader. My best rate is one book per week. I read mostly practical books that make me learn something and sometimes novels. My reading is consequently very goal driven : I have to understand and learn. Being rather a practical reader, I have developed some reading techniques that make me read faster, with more focus, so that I learn more efficiently.

Continue reading

How does a web session work ?

Finally illustrated with diagrams

Not long ago I had to investigate on a session reset bug that forced me to do some research on sessions. Since I didn’t find the subject well covered, I thought I would share what helped me solve my bug, so that it can also help you in time.

I will describe here sessions in web applications, my area of practice.

Continue reading

Posted in Technical, Wiki

Tagged

My git settings

A good practice to use git in command line

I wish I could port my git settings from one computer to another. But how ? If only there was a guide I could follow for that. So I’ve decided to document it here so my future self can check it anytime.

Here are the settings I use for git.
Continue reading

Posted in Technical, Tools & System

Tagged

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