Review: Fooling Houdini by Alex Stone

This book gives an interesting insight into the world of magic. In Fooling Houdini, Stone described how his own fascination with magic have so deeply affected how he interacted with the world around him, giving him a whole new perception on the world.

This book is a great inspiration that gives impetus to hone one’s craft. In Stone’s search for his unique form magic, he took advantage of his awe of the mysterious to gather new knowledge and finally produced a trick of his own.

Stone’s book serves as aspiration for amateur magicians to start working on their craft so that they can one day showcase a performance they can truly call their own.

Sketchnote:

Advertisements

Css Tip – Using flexbox to style a button

When you try to use flexbox in a button, it doesn’t render as it is supposed to , why is this so, and how do I fix this?

Introduction

The flexbox model is one of the up and coming standards for web design. Once you have mastered it, you can use it for any design you want.

You would expect that it should work on different HTML elements as well, but when you try to apply the model to a button and render it in Firefox, it just wouldn’t render properly. (click on caption to view codepen)

How it appears
how it looks like

How it is supposed to look like
how it supposed to look

As a good developer ensuring cross browser compatibility, this problem annoys me to no end.

Solution (inline block)

In the particular example above where we try to style the button, we could render the image and text as inline block. In that case, the image and text will align side by side.

But using this method, you won’t be able to easily get the image and text to align vertically (unless you use some margin or valign hack, which complicate stuff).

The more generic method

I didn’t believe it could work until I tried it out, the solution seems too simple. Apparently, by wrapping the button’s content with a “div” element, you can render the flexbox properly without any problems.

This way, you can still use flexbox for all your layout needs. But do note that having a content wrapper means that you have to remember to remove the background and border of your button to get the look that you want.

Why didn’t it work originally?

It all boils down to how the button is implemented in Firefox. For special elements, like buttons and form inputs, its safer to assume that structured differently across browsers.

This is because these special elements have unique responses that the browser have to take into consideration, so they are often rendered differently cross browser.

If you are searching for a more technical answer, you can use this thread as a starting point.

Any questions or issues, you can leave a comment here, or direct your query to my email.

Review: The Nature of Software Development by Ron Jeffries

Jeffries included many of his personal insights into the book. Although this book does not really provide an actual framework that one can easily “plug and play”, it explains the rationale behind many modern management frameworks targeted at tech startups and firms.

Although this book is not exactly useful in itself, it is a great compliment to books that details how to execute certain agile framework such as scrum and XP.

Sketchnote:

Explaining Gray Code

Introduction

I have known binary code for sometime now, the basics at least, how they are formed, what values they represent. But recently, I have came across a different kind of binary code.

Here, I am going give a brief explaination how the Gray code works, and what’s so special about it.

Basic introduction

So how you tell the value of a Gray code? Actually, there is no simple way, at least, its not as simple as a binary system, where you can count like “this is 2 to the power of 1, this is 2 to the power of 2”.

Instead, for Gray code, to get the values, you will need to have a table of values to refer to. But getting the table is really not that hard.

Understanding the values

Let me give an example of Gray code works. To do that first let me show you a table of what the Gray code values are.

Table for Gray code

Decimal Gray Code
0 000
1 001
2 011
3 010
4 110
5 111
6 101
7 100

Seen that already? For each consecutive values, like from 0 to 1 or 1 to 2, there is only one bit flip. To make it easier to see, I have highlighted the changed bits to make it more obvious.

But what about the binary code? I have placed the Gray code and typical binary code side by side so you can see the difference in the pattern. For binary code, to jump one value, it might not just have one flipped bit. (Take 1 to 2 for example, you have to “off” the first bit and “on” the second bit)

Bold refers to changed bits

Decimal Gray Code Binary Code
0 000 000
1 001 001
2 011 010
3 010 011
4 110 100
5 111 101
6 101 110
7 100 111

So how do I generate it?

So how do I generate Gray code for values beyond the table? Here’s an example. Let’s say the table is only has 4 values (0 to 3). So how do I go about getting the Gray code for the following values?

To understand how the system works, first follow this flow of logic – assuming that all the Gray code for the previous values are valid (meaning that it take only one bit flip to increment or decrement the value), if we reverse the whole block of code, then the rule will still apply. Let’s pause here and see what we get.

So, here is what we’ll get after the first step.

values step 1
0 00
1 01
2 11
3 10
4 10
5 11
6 01
7 00

So as you can see, the pattern here is as so, the Gray code for the numbers are reversed and placed for the the next set of values. Meaning the pattern for 0 and 7 will match, so does 1 and 6, so on, until we get to 3 and 4.

So how do we tell them apart, the 2 corresponding values? It’s all in the second step. For the actual set of values, we prepend a 0 at the front, and for the second set where we reverse the values, we prepend a 1 at the front.

There we have it, the Gray code for the first 8 values (0 to 7).

values step 1 step 2
0 00 000
1 01 001
2 11 011
3 10 010
4 10 110
5 11 111
6 01 101
7 00 100

Why is there a need for Gray code

In the past, when computers are all mechanical switches, it made sense to have as little bit flip between increment and decrement, since more bit flip equates to more chances of error.

Also, because of the way some of the mechanical hardware are designed, its easier to use a value table that only have one bit flip for increment and decrement.

If you want to learn more about the system that uses Gray code, you can go here.

How to convert between Gray code and binary

Well, is there a simple way of converting Gray code to binary? Of course, after all, there is a pattern to these things.

This is a piece of python code written by joshua, it uses the “bitwise exclusive or” operator to do the conversion.

The xor operator is a different topic altogether and I am not going to cover it here. But those interested can go read more about it here and uncover the pattern for yourselves.

def gray2binary(gray):
    binary = gray[0]
    i = 0

    while(len(gray)>i+1):
        # the xor operator
        binary += `int(binary[i] ^ int(gray[i+1]))`

Learn more about other kinds of Gray code

What about other arrangment of code that give rise to patterns where increments are one bit flip apart?

Well, this particular type of Gray code that we have discussed here is known as the “binary reversed Gray code”. (after reading so far, I hope you know the reason why)

There are other types of binary Gray code too, there is the balanced Gray code to make the transition between values more uniform and the pattern more balanced. They are other types of binary Gray code too, you can have a look at them out here.

There are Gray code in other number systems too. I mean, you can extend the reverse system idea into other number systems (base-3, base-4, etc). You can see how to adapt the idea here.

Review: Smart Change by Art Markman

This book covers many concepts behind behavior and motivation. Using findings from certain research, Markman has created a system that makes use of all these human tendencies to help build new habits and stop new ones.

The concepts in this book is simple to understand, but may be too commonplace to be considered unique advice. But considering that there is a system built around habit building, it certainly saves a lot of legwork of your own.

The companion website comes with a journal template to help you get started on building new habits. It is a great resource to take a look at.

Sketchnotes: