Let It Snow

Posted on December 2014 at about 6:27 AM by hwa

It’s December, so let it snow. 😉

9 Basic Principles Of Responsive Web Design

Posted on November 2014 at about 11:52 PM by hwa

Got this from FROONT’s blog, very informative and well explained with animated GIF on responsive web design.

Tips: Click on the image to view the animated GIF!

Responsive vs Adaptive

It might seem the same but it isn’t. Both approaches complement each other, so there is no right or wrong way to do it. Let the content decide.


It might seem the same but it isn’t. Both approaches complement each other, so there is no right or wrong way to do it. Let the content decide.

Flow vs Static

As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it’s called the flow. That might be tricky to grasp if you are used to design with pixels and points, but makes total sense when you get used to it.


As screen sizes become smaller, content starts to take up more vertical space and anything below will be pushed down, it’s called the flow. That might be tricky to grasp if you are used to design with pixels and points, but makes total sense when you get used to it.

Relative Units vs Static Units

The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere. That’s where relative units like percents come in handy. So making something 50% wide means it will always take half of the screen (or viewport, which is the size of the opened browser window).


The canvas can be a desktop, mobile screen or anything in between. Pixel density can also vary, so we need units that are flexible and work everywhere. That’s where relative units like percents come in handy. So making something 50% wide means it will always take half of the screen (or viewport, which is the size of the opened browser window).

With Breakpoints vs Without Breakpoints

Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Most CSS properties can be changed from one breakpoint to another. Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint. But use them with caution – it can get messy quickly when it’s difficult to understand what is influencing what.


Breakpoints allow the layout to change at predefined points, i.e. having 3 columns on a desktop, but only 1 column on a mobile device. Most CSS properties can be changed from one breakpoint to another. Usually where you put one depends on the content. If a sentence breaks, you might need to add a breakpoint. But use them with caution – it can get messy quickly when it’s difficult to understand what is influencing what.

Max Width vs No Max Width

Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense. This is why Min/Max values help. For example having width of 100% and Max width of 1000px would mean that content will fill the screen, but don’t go over 1000px.


Sometimes it’s great that content takes up the whole width of a screen, like on a mobile device, but having the same content stretching to the whole width of your TV screen often makes less sense. This is why Min/Max values help. For example having width of 100% and Max width of 1000px would mean that content will fill the screen, but don’t go over 1000px.

Nested vs Not Nested

Remember the relative position? Having a lot of elements depending on each other would be difficult to control, therefore wrapping elements in a container keeps it way more understandable, clean and tidy. This is where static units like pixels can help. They are useful for content that you don’t want to scale, like logos and buttons.


Remember the relative position? Having a lot of elements depending on each other would be difficult to control, therefore wrapping elements in a container keeps it way more understandable, clean and tidy. This is where static units like pixels can help. They are useful for content that you don’t want to scale, like logos and buttons.

Desktop First vs Mobile First

Technically there isn’t much of a difference if a project is started from a smaller screen to a bigger (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first. Often people start from both ends at once, so really, go and see what works better for you.


Technically there isn’t much of a difference if a project is started from a smaller screen to a bigger (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first. Often people start from both ends at once, so really, go and see what works better for you.

System Fonts vs Webfonts

Wanna have a cool looking Futura or Didot on your website? Use webfonts! Although they will look stunning, remember that each will be downloaded and the more you’ll have, the longer it will take to load the page. System fonts on the other hand are lightning fast, except when the user doesn’t have it locally, it will fall back to a default font.


Wanna have a cool looking Futura or Didot on your website? Use webfonts! Although they will look stunning, remember that each will be downloaded and the more you’ll have, the longer it will take to load the page. System fonts on the other hand are lightning fast, except when the user doesn’t have it locally, it will fall back to a default font.

Vectors vs Images

Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image. For bitmaps use a jpg, png or a gif, for vectors the best choice would be a SVG or an icon font. Each has some benefits and some drawbacks. However keep in mind the size — no pictures should go online without optimisation. Vectors on the other hand often are tiny, but some older browsers won’t support it. Also, if it has lots of curves, it might be heavier than a bitmap, so choose wisely.


Does your icon have lot of details and some fancy effects applied? If yes, use a bitmap. If not, consider using a vector image. For bitmaps use a jpg, png or a gif, for vectors the best choice would be a SVG or an icon font. Each has some benefits and some drawbacks. However keep in mind the size — no pictures should go online without optimisation. Vectors on the other hand often are tiny, but some older browsers won’t support it. Also, if it has lots of curves, it might be heavier than a bitmap, so choose wisely.

This article is originally posted at FROONT’s blog, under the title 9 basic principles of responsive web design. Head over to the original blog for more information, and also discussion on this subject.

 
Status

Yay~! Got my LG G Watch R today!! ^^

 
 
Image

#Ultron, I remember I saw it somewhere many years ago… Oh ya, that graphic card box. #AvengersAgeOfUltron http://t.co/1s3Hby0AVR

 
 
Status

Tried #Roquefort AKA blue #cheese, the smell is like… Damn! But when I taste it I actually OK with it, especially with crackers.

 
 
Status

I’m lucky to see the rise and fall of #Walkman, #Discman and MP3 player #iPod – On Death and iPods: A Requiem | WIRED wired.com/2014/09/rip-ip…

 

Pebble Steel Review

Posted on August 2014 at about 7:57 PM by hwa

After 4 months of using my Pebble Steel smartwatch, I feel grateful that I made the choice to buy the watch, it’s been really useful for me.

I pair the watch with my tablet, the Nexus 7 2013, and I use it to relay all the notification from my tablet to me, so I get to read the notification without even touching my tablet. This is very useful for me especially when I’m working, as I easily get hooked up with my tablet when I start playing with it, this will cause distraction and reduce my productivity, it’s not a good image to portray. Other than that, I also use the watch to keep track of my sleep pattern.

The battery life is satisfying, I can use it for at least 3 days without even charging it, sometime can go for 5 days.

Of course I wouldn’t dare to say the watch is perfect, there are still places that I think it can be better. One of them being the buttons, as I mentioned before, the buttons is really hard, even after 4 months of using it, the button doesn’t get to lose that much, I can feel the tactile a bit but not much.

Another thing is, from time to time the notification will cause the watch to crash, when this happen, the watch will keep on vibrate non-stop until I soft restart it, by holding the left + right middle button. This is actually quite critical, because the vibration will drain the battery. There’s one time when I finish charge the watch, unplug the cable and left it on table, then the watch crash. When I check the watch about an hour later, the battery left only 10%.

My review for the Pebble app store is, it sucks. The app store is sluggish, it appear to be heavy load although there are nothing much in the page. Also, there aren’t many apps in the app store for you to play around.

And those are the bad things about the watch, nothing serious.

Though I’m satisfy with the watch, but I will still suggest to wait a while if you are planning to buy one. The Moto 360, which can be a strong competitor for Pebble, will be release soon. From the promo video it looks promising, cool presentation, nice UI, nice design and touch screen!

 
Status

MAS can bankrupt already…
Malaysian airplane found burning in eastern Ukraine: source reut.rs/1nf5EvU via @reuters

 
 
Status

Yay! Just got my #PowerBank from #xiaomi #Mi mi.com/my/mipowerbank/

 
 
Image

#MindFuck #lol #misleading http://t.co/WcAr1mLNqa