JavaScript Goodies: Underscore.js + Backbone.js

A MVC framework for Javascript code.  Who needs the heavyweight and restrictive GWT when you can write code like this?  All you really need to know is how JSON and basic JavaScript work and you can start build Java Web applications like a Rails app.

0

Java and Inner Classes.

I have tried in the past to explain why using  inner classes is a bad idea architecturally.  There is absolutely no reason to do it except out of convenience and having your code look concise, if done properly.  For a couple of years now, I have struggled to persuade my colleagues into getting rid of Java inner classes.  After going through a Java Security training course, I finally have a more compelling reason why not use inner classes.

Check out this thread:

http://stackoverflow.com/questions/1935479/do-javas-inner-classes-pose-a-security-risk

To summarize, the Java compiler does a bit of hacking so the implemented parent class is injected with setters and getters (even for your private properties.)  This can be seen if you try to disassemble the compiled bit code.  You will see the parent class will have setters and getters exposed.  If you are storing passwords or sensitive information, an attacker can easily write an object and use these classes as backdoors to your secured data.  So think twice before you write your next Java inner class.

0

For Macbook owners.

I have always wanted to disable the Wifi when the ethernet is plugged in. Although I know OSX allows preference of order of which network adapter gets to be used first, it is still not a great solution. Why turn it on if you don’t have to.

This is a great howto on getting your Macbook/Macbook Pro auto-sense your ethernet connection and turn off Wifi.

http://www.georges.nu/blog/2011/06/how-to-automatically-turn-off-airport-when-ethernet-is-plugged-in/

0

Spring Tutorial

I came across these new videos when I was updating my knowledge in regards to the Spring Framework. These are definitely great videos. I wish they had these when I started learning Spring years ago instead of reading that dry and hypnotizing “Spring in Action” book.

These are done by the SpringSource dev group and great for anyone who wants to dive into Spring development to simplify their Java enterprise apps.  This is a series of 5 videos that takes you into how to work with Spring.

 

0

What!? You have an HTML 5 page?

After listening to the W3Conf presentation last week. I can’t stop thinking what other developers are saying when they are building HTML 5 sites and web applications.  More people are talking about HTML 5 development. Are they talking about semantics? Are they talking about multimedia support within the browser without a plugin? Are they talking about animations? Are they talking about browser controlled graphics like SVG and canvas?  I have a sense there are some misconception what HTML 5 development really means.

Continue Reading →

1

Using CSS3Pie with Modernizr as a IE6-9 HTML 5 Polyfill

Love those slick rounded corners but working with legacy browsers?  You are not the only one out there  to make the user interface consistent across all browsers.  If you have worked with IE 6 to 8, you will come across border-radius, linear-gradient and box-shadow not being supported.  These are part of the CSS3/HTML5 specification but are not implemented into the Internet Explorer browser until IE9.  Regardless how much you hate developing for Internet Explorer and Microsoft, IE 6-8 still hold a healthy market share.  Do you want a little more than half your web application consumers to experience a different visual experience?  If you are a company with magnitude of Facebook, Google or Apple, you do care.  Let me explain my solution here.

Continue Reading →

0

HTML 5 – Polyfills and Shims

As a web developer, I was brought to attention of the new and exciting way of web development with polyfills and shims.  Have you ever come across working overtime and countless hours fighting with  browser specific support?  Internet Explorer’s  history of implementing proper W3C standard has always been poor and buggy.  Many times leaving web developers with a bad taste in their mouths.  Many times, hacks and libraries are used to fill the voids. No pun intended.  After listening to Rey Bango at the W3Conf (video link), I am brought into attention about the concept of Polyfills and Shims.  I like many other Web developers suffer from constant requests to make layout, styling and animated features work across all browsers from various platforms.  Unfortunately, as the complexity of the web application grows, the permutation to verify such features grows as well.  There are common libraries such as jQuery, CSS3Pie, HTML5reset, WebShims, HTML5 shiv, etc… to give web site enough backward compatibility across browsers and legacy browsers.  Polyfills and shims are presented as a solution to help.  What are these magical bits of the new Web?

Continue Reading →

1

Gone with the Clouds

I have decided to take advantage of the Amazon AWS EC2 offering for the Free Tier micro instances and moving my servers to the cloud. In the long run this will be a cheaper solution. To no surprise, I am quite amazed at the price of the solution stack.

 

0

Happy 2011!

Looking back at 2010, it’s been quite a year. Taking on a couple of new jobs since taking off the last third of 2009. Personal development is a major advancement as well, from getting my Certified Scrum Master certificate to take a certificate program for Project Management. In hindsight, this has been a growing year. I see new changes and bigger changes coming in 2011.

Again… I have been so busy I have neglected to update my blogger, twitter or even facebook. I got to do a better job about that. Maybe I am just way too busy. I have done very little artsy stuff like photography and drawings this year.

0

Cartoon Me.

Cartoon Illustration of Kevin

Cartoon Kevin

I haven’t drawn in a few months, decided to draw a cartoon character of myself. Thinking I will be using this for my site design in the future.

0

Back Again!

Believe or not, it’s been 10 months since I updated the blog. Mainly because looking back at these 10 months, I have gone through two jobs, taking a PMI Project Management course, getting to be a gold-plated Certified ScrumMaster.

Yet again, I want to be redesign the site again. I think the site can be more simple and intuitive. Too much fancy stuff going on. I definitely need to look at using this site to showcase more of my own work and be proud of it.

I hope to have some time keeping this site fresh.

0

Header size and usability creativeness.

Have you ever noticed when you sign up for a site or log into a site,  the header of the page becomes slimmer? A classic example of this is the Facebook page.  Before you are logged in or signed up, you will get a decently sized ( and readable ) top blue bar with an obvious ‘facebook’ logo as the branding.  However, once you registered and logged in, the top bar becomes about 40% of the height.  Following are screen captures of the example:

Continue Reading →

1

Binary Clock using jQuery and no Images.

Had a little time to touch up on my Javascript. Having some fun creating a binary clock.  Following is the code and demo for it.  If I have time, I will certainly create a plugin or widget for WordPress.

Screenshot

Demo

0

Looking at Photo Meta Data

Many of us take photos because we want to capture the memorable moment and create an snapshot of what we experienced at the very moment.  I recently looked into GPS integration with cameras and are fascinated by how a photo with the proper coordinates can tell me about the photo.  Before digital cameras existed knowing when the photo is taken was a big problem.  There were time stamps you can expose on the photo but that pretty much destroys the photo with that ugly numbers on the bottom right corner.    Now I can show GPS data on a map where I’ve been on a trip and have the pictures and video associated with it.  Digital information tagging on valuable personal documents has come a long way.  It’s far from perfect.

Continue Reading →

1

Avoid text in images in Web development.

Many Web designers and Web developers make one common mistake: it is to represent text as images. The most common scenario is hover action images. Mostly used with a string of text within an image to illustrate to the user that they can activate the link/button.

There are solutions in accomplishing this is to use a div with set width and height and format your text or anchor tags inside of the div background image. With the help of jQuery, you can easily make a div tag clickable. This is a lot more work to align your text and effect but the end result what you are going to achieve is far greater than when you don’t.

So what is the big deal having text in images you might ask? There are 2 major flaws that comes to mind. Your images cannot be searched if you have no ‘alt=’ attribute and the biggest factor is ability to change the text without generating the image again. You might argue that this is non-sense and it doesn’t take long for firing up your image editor to reword the text; however, how about changing your text in microseconds via Google Translate?  Your site becomes less functional and less usable since your image text will be stuck in the language your images were designed in.

Continue Reading →

0

ionorbit.com – New Theme – ionorbit.com Take 3

Since I wanted to review my PHP and jQuery for a couple of job applications, I thought it was a good idea to re-theme my site. Plus the old theme looks very ancient now. It ought to get replaced with a modern look ( something that looks more personal to promote my web presence and show my portfolio of Web programming skills).  On top of that, I am looking to make my site more functional in terms of user interface end and usability.   I haven’t touched CSS and layouts in detail for a good 6 to 7 months and I feel rusty already. However, this exercise of making a new theme has been a great learning experience and got me back up to gears programming with CSS, layouts and PHP. All that has been lost has come right back.

After finishing my design and making it live, I was surprised I actually drew almost all the graphics and icon except the twitter bird which I borrowed from ProductiveDreams (I made some color and extra bits to it after ). I first started out with the swanky theme . After heavy modification (with a silhouette design in mind), all were changed except the top menu and three column body. Those two elements were the things that stood out for me when I picked it.  The footer is my personal favourite.  Somehow I think my bottom of the page looks better than most people’s top of the page (or even my own page for that matter).    Since this is the third revision of the site, I have called it ionorbit.com Take 3.

This theme is much more manageable and allows easy modification. There are a few more minor details like comment box and pagination navigation that needs to be worked on. Again thanks for visiting. ( Next up re-theme my photo gallery and Twtiter. )

0

Exploring Next and Previous (Back) links/buttons designs.

While I have some time to do a bit of redesigning for my website, the user interface course material that I took at UBC has finally come back to me.  While designing, I realize that there is a lot of things that are VERY wrong in the common Web pages, whether a designer was hired to do it or not.   I never realize that given the time and proper analysis, some common ideas such as Next and Previous (Back) buttons are misused in most situations.

Continue Reading →

0

Cartoon RSS icon design

rss-icon-designI am in the mix of redesigning the themes for my websites and find it’s a good place to start designing the icons too.  Here is some sample work for my RSS icons.  You will soon see them on my website.

I will consider posting the vector files in EPS format if I generate enough interest for them.  Drop me a note if you want it.

0

Fruits with various things inside.

fruits-intel-inside Inspired by the Intel logo.  Having a little fun changing them with basic and creative fruit logos and having fun illustrating what is inside each fruit.

Enjoy. :)

2

Caution! This is Sparta!

caution-this-is-spartaI walked by the Richmond Night Market about a year and a bit ago seeing a stick man sign with the 300 famous scene. “This is SPARTA!”

Now I am borrowing the idea for a caution sign.

Enjoy!

2