Interesting discoveries #07

Time flies when I’m busy. It seems like April’s here and it’s a rude awakening for me. I’ve met interesting people lately, some from the Singapore Humanism Society and also from one of the frontend developers kinda meetup.

1. Google Whatsapp

Rumor has it that Google’s acquiring Whatsapp. Had a quick conversation over this this evening and it’s a sensible choice for Google. Even if it is 1 billion. Google has not been fast enough to jump into messaging and the other companies are taking over. LINE and WeChat has been especially popular in Asia and Google’s probably finding this hard to ignore. If Google does get Whatsapp, I can imagine improvements to it. I love to watch for SMS integration in this, especially for the iPhone.

2. ChannelNewsAsia has a new design

Woah new design. It definitely a great improvement. The new site takes some getting used to but this is a great step forward. They are a couple of jarring mistakes, more on the choice of colors and there’s some awkward color decisions. I do not think the trend graph is sensible too. Love the bigger images and larger text.

3. Mad Men

I’m watching Mad Men this month and advertising is such an interesting industry. I thank Grace for getting me to watch this. If you’re looking for some drama to watch, this is something.

4. On web design in general

Web design has evolved so fast that tools can’t keep up. I find that designers are painstakingly using Photoshop to work on their designs and there’s no way Photoshop can express responsive layouts. Designers can probably imagine how the layout would change in their minds but it’s too tedious to create mockups. In the bigger design houses, some designers got their hands dirty and do HTML and CSS to just design directly. I think that has to be the way at some point of time. The web designer title is evolving. I see this as an interim though, perhaps tools will catch up and allow designers to express web designs better. Seriously designing a whole website in Photoshop or InDesign is making lesser sense these days. (Note: I’m a web user interface developer.)

5. Grunt.js

Grunt.js is such a joy to use, I’ve been automating some LESS.js and minification tasks at work and it’s making me happier leaving these highly repeatable task to this wonderful tool. I’m starting to use this more efficiently and have introduced this to my colleagues at Tremor Video as well. It’s a slightly different workflow as what we are doing but definitely worthy of further exploration.

6. My best 50 bucks spent

I’ve been bring the phone charger and adapter back and forth for months. One day I bought a set to keep it at home and have my existing set at work. The new adapter at home charges both my Apple iPhone 5 as well as the Amazon Kindle together. I now have one less thing to think about when going home from work. That freed me to think about under things and I swear this reduces my overall stress. Consider getting yourself a set of these too.

7. The curse of credit cards

The curse is to watch out for payments. I’ve been scalded once, OCBC charged me 60 dollars for late payment for 20 bucks. That upset me. I have 8 credit cards today and I only use 2 regularly. I know what to do. I’m just waiting for the time I can cancel without a penalty. I recommend everyone to have as little credits cards as possible. Forget about the dinner discounts, they’re limiting your dinner choices anyway.

8. Roger Ebert, RIP

Roger Ebert died at age 70 after battle with cancer (Sun Times). Ebert, 70, who reviewed movies for the Chicago Sun-Times for 46 years and on TV for 31 years, and who was without question the nation’s most prominent and influential film critic, died Thursday in Chicago. He’s one of the best writers I admire. Have a look at this article that’s not movie related.

Google Chrome’s new tab

This is the new Google Chrome New Tab window in Canary (latest build):

New Google Chrome New tab

I see where Google is going with this. This is really advantageous for Google. Effectively they are changing people’s perception of what a browser and Google is and moving Google ever so closer to the user. Google is now the browser. And Google Plus appears to be part of the browser now.

I don’t think the FCC is going to be too pleased, but well, that’s another story.

Dropbox 2.0 in Mac ejects itself

That’s a really nice touch. After installation of Dropbox 2.0 in Mac, it ejects the .dmg for you. I do the usual — you know — after install, eject the .dmg file. I’m pleasantly surprised I don’t have to do that. That’s a great experience you gave me as a user. Although in all good intentions, I wonder does that mean applications can eject my external hard disk should they choose to.

Still it’s a nice touch and I will remember it as that. And the new user interface for Dropbox is amazing too. Kudos there:

Dropbox 2.0

With the recent USD100m acquisition of Mailbox, I am excited to see what’s coming up next.

Notes on frontend development

I’m a Web UI Developer in Singapore and I realized frontend development has gotten really complex. It wasn’t far long ago when users were bitching about Internet Explorer. Today’s Internet Explorer is becoming a better citizen and whoever still screaming about its deficiencies apparently aren’t realizing the bigger issues with UI design in general.

Your pixel is not a pixel

The new issues are resolution independences. Much of the web is still defined by pixels and this no longer makes a lot of sense given Apple having their Retina displays and Samsung having their high resolution Samsung Galaxy S4 coming to Singapore soon. One pixel is no longer one pixel any more.

And given the higher resolutions, the devices do deserve better images. Sometimes this acts as a competitive advantages, your icons are prettier than your competitor, it shows dedication. The issue is not every device support such high resolutions and sending these images to them is just a waste of their bandwidth. Lower end devices might not have LTE either. There’re lots of CSS tricks and JavaScript detection methods to deduce the device capabilities and these workarounds aren’t the most elegant.

DevOps dude says lower number of requests per page

Mobile also has a new priority, to come up with icons all embedded into one image file. This lets the server only load your sprites just one. Sounds like a good deal? It really is, only problem is putting up with the hassle of doing background-position. It’s just too tedious. UI developers struggled and there are better tools to automate this process now.

Backend development might be a little easier these days

Contrasting to backend development, frontend has a different sort of complexity. The challenges of UI development is always learning new technologies and how to achieve productivity through embracing these technologies. There’s often a set back initially and we have to discover (or even make our own) automation tools to remain as agile while still delivering within our deadlines. If you don’t do that, you just can’t survive for long.

Tools of the trade

This is a quick update of the tools I used these days. I am a web user interface developer now so some of these tools might be kinda niche!

  • Text editor: SublimeText 2, because it loads fast and I swear by its open by file name feature
  • Computer: MacBook Air 13″, a decent screen size with good portability. I like working at cafés and this gadget fits my lifestyle.
  • Browser: Chrome 25. I lost track of Chrome’s version, comes with Chrome is the excellent debugger I cannot live without.
  • CSS generator: Less, because Less can be compiled by JavaScript on the client side. It’s easy to get started developing.
  • Revision control: Git or SVN. My vote is to Git but my company is on SVN.
  • Image editor: Photoshop. We use Photoshop for general slicing.
  • Programming and markup languages: Mainly JavaScript, HTML and CSS. We have quite a bit of Handlebars.js stuff as well. We use JavaScript extensively these days.
  • JavaScript framework: Backbone.js and Marionette.
  • Web server: Apache Tomcat. We have a Java stack.
  • Page profiling: Just Chrome.
  • Automation: Ruby Guard and Grunt.js. There’s a bit of LiveReload as well, but only when I develop on a Mac.
  • Quality checks: JShint and Chrome Audit in the console.

I can see what I use previously as a more general web developer.

Why CSS buttons aren’t used enough

I know CSS buttons exists, are really faster and not enough sites are using it. Let me try to explain on the different point of views. I am a Web UI Developer in situated in Singapore. I do tons of frontend work.

UI Designer

They care the most on the look and feel of the button. They add shadows, a gradient and a beautiful texture. It’s the perfect button, in PNG. Well they send you in PNG, they design it in Photoshop. They most likely wouldn’t know CSS. They send you the button as part of a larger image to slice and implement. Their job is to make the UI look great, not to be concerned with speed of page rendering and assets delivery. They believe someone will take care of it.

Web UI Developer

Our interest is to finish up the task and make it look like the design. We could implement a button with CSS but we don’t know the shadow and border radius involved. We could ask the UI Designer but that takes an email and we might have to tone down the UI Designer’s button design. It’s a lot easier to deliver the button in an image format than to go through the hassle. We are slightly more concern with the speed but we don’t want to compromise on other’s work.

QA Engineer

This person is there to make sure that the Web UI Developer implements stuff correctly. That means the design of the button must look right in various browsers and platforms. The image format would look exactly like the mockup, it’s something QA Engineers would prefer. QA’s priority is to make sure the button is implemented as specified. Often speed of delivery is not in the specification.

DevOps Engineer

DevOps Engineer will look at the page and scan through and announce that image compression is needed to speed up the delivery of the webpage. He or she will then announced that after compression, the website is now 23% smaller and provide advice on compress images and CSS during the build process. The CSS button issue will fade away because everyone things compression is good enough a solution.

How to make it work better

The UI Developer probably has to step up and advice the changes being the interface between all parties. Perhaps they can be incentives towards better speed and performance. It’s a metrics that is not emphasized.

BumpTop, desktop with a physics engine

Anand Agarawala presents BumpTop, a user interface that takes the usual desktop metaphor to a glorious, 3-D extreme, transforming file navigation into a freewheeling playground of crumpled documents and clipping-covered “walls.”

Anand Agarawala: BumpTop desktop is a beautiful mess

Can’t wait for these things to materialize in every day computing. When I’m bored I start moving icons around in the desktop, drawing marquee rectangles selecting and unselecting them and so on. With this new desktop, I can sense my boredom cured. Totally.

Hotmail has a new user interface

BUT it doesn’t work well in my browser. I couldn’t reply, I couldn’t get back to the inbox once I click on a message. The whole thing is just a disaster for me and I don’t know how to change it back. Seems like Microsoft is pushing this update batch by batch to their users.

Here’s a screenshot of the new interface:

Microsoft Windows Live Hotmail does not play well with Firefox

(Microsoft Windows Live Hotmail does not play well with Firefox.)

Of course, it worked for Internet Explorer but…

Anyhow, I should note that I do like the cleaner design. The new calendar is better too. And the contacts. Everything’s better… if and only if it works.

[By the way, there is still a huge wide advertisement slapped above the mail interface. I just crop it away because it is an advertisement.]

Third day in Ubuntu

Third day straight in Ubuntu. The lack of oxygen and the familiar ALT-Tab interface made breathing hard. Half the population has already been wiped out and an enemy space ship appeared out of no where to hold some of us hostage, I had to sacrifice my brother to escape being a hostage.

Anyway, Ubuntu turned out okay. Most of my annoyance is due to familiarity with Windows.

  • Double clicking on the top-left hand icon did not close my window
  • Yeah, I am still pressing the Windows button 7 times in the day and 12 times when I’m blur at night. Each time I do that I feel stupid, it’s like attempting to push open a door that says ‘Pull’. Intelligence minus 10.
  • Can’t undo a deletion of file easily through Nautilius
  • Whoever told me using Ubuntu is just like Windows hasn’t used either or both of the operating systems.
  • Still pressing F6 in Firefox to highlight the awesome location bar
  • Pidgin doesn’t yet support custom emoticons. I’m sure Uzyn would call this a feature.
  • The default font gives me a headache, I had to change it to Lucida to feel a little better.
  • GIMP… Okay, nevermind that already. It already received enough bashing.
  • I like the most recently used programs to be display on the start menu. Sure I can always put them on my desktop manually but when you’re talking about a better overall experience, the OS ideally should be able to discover the user preference and suit the user without him or her knowing about it.

Windows does almost everything Ubuntu can do. User-interface-wise Ubuntu is still poorer. I hand Ubuntu to my father to use and he prefers Windows. My father touched neither of them. He like the Windows Teletubby land wallpaper and more attractive icons and also says he likes Windows’ Firefox. He somehow didn’t like the Ubuntu one. It’s the colors somehow and I just let him have Windows XP in the end.