I Saw Something

Remove Windows 8, Install Windows Vista from USB

Yes, Vista is old, yes, Windows 7 is much better, and yes, Windows 8 is already here. I’ve tried upgrade my Vista to Windows 8, and it was horrible for me.

First, when the system restarted and boot into Windows setup, it simply said unable to configure hardware, so it rebooted, and present me with Windows 8, Windows Setup and Windows Vista boot options, select Windows 8 will lead to another error and reboot, select Windows Setup and viola, corrupted the whole thing. So I decided to create an bootable USB and perform clean install, format my drive and then it shows could not install on selected drive error, after troubleshoot, use the command prompt in repair option to run some diskpart function, and it installed, and yes, the new UI have some inconsistent navigation flow (even for the very same button, it randomly navigate), very very confusing.

After installed and activated, try to run some update on the Windows 8 apps (the modern UI app thing), during update, it removed all the updating apps from my start menu, and the update keep on failing, I have no idea how to get them back. Then I try out the new split screen feature, and it keep crashing the Windows 8 apps, almost every time. Try to sync my iPhone through iTunes (the same installer I use on Vista and Windows 7 and Windows Server 2008), it just keep on disconnect my phone, too many trouble, so I decided to reinstall my Vista, this time, from USB. (Source)

To create a bootable USB from installer (I have ISO mounted), open command prompt with admin rights.

Read more ... →

Preparing Sencha Touch Apps for Production

During development, I, or perhaps most if not everyone will point the Sencha Touch SDK in the Sencha Touch folder, and the index.html usually looks like this (I don’t usually debug CSS):

<html lang="en">
<head>  
  <title>Movie Mango</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <script type="text/javascript" src=../sencha-touch-2/sencha-touch-debug.js"></script>  
  <script type="text/javascript" src="app.js"></script>  
  <link rel="stylesheet" type="text/css" href="../sencha-touch-2/resources/css/mango.css" />  
</head>  
<body>  
</body>  
</html>

In this setup, I pointing the Sencha Touch js file in the Sencha Touch SDK folder and also the CSS file I created for my own theming there. If I wanted to deploy this app on server, I can’t just copy the sencha-touch-debug.js out or sencha-touch-all.js out and update my index.html to point to that, it should be minified and optimized. Those brilliant guys in Sencha provided us with the neat little tool Sencha SDK Tools, that help us compile every classes that we need and, yes, basically everything that we need (by just going through our code, brilliant!) and put them all in one single minified JavaScript file, and that is what we need for deployment.

Read more ... →

iOS Search Went Back in Time

Just swiping around the pages of icons and the search screen on my iPhone without any objective, for the sake of enjoying the smoothness of it, and was wondering if the searches in iOS is really as fast as the counterpart Finder in the OS X, which is blazing fast when I’m searching on the OS X. So I decided to randomly search for something in my phone.

And so I search for “lol”

Read more ... →

Draw Things with Sencha Touch 2

As a retreat from my office workloads and other stuff, decided to do a quick apps with Sencha Touch 2, and an apps that can let user draw something to other user would be fun.

So the basic idea is simple, select a friend, and start to draw something, then send it to the friend, and the friend can “see” the drawing being drawn, just like Draw Something.

Read more ... →

Humble Music Bundle

Discovered Humble Bundle “Humble Indie Bundle”) 2 years ago, and ever since Humble Bundle continue to offer great indie games with name your price model, and developers were kind enough to include their soundtrack with the bundle.

Humble Bundle just did something not game related (not entirely though), they introduce a music bundle, it came with 6 albums, though I might not heard any of the artists before, but I can tell they all produced hell good music, I got myself the bundle and I love almost all the albums (personally not interested with any game soundtrack, beside during in game). Looking forward for another music bundle!

Outlook.com, Microsoft updated their web mail

Microsoft just released their new web mail, Outlook.com, which heavily based on their awesome Metro UI Modern UI, and it’s so smooth and responsive compared to the old version.

Everything looks so gorgeous now (except those spams migrated nicely to my new inbox), the function bar (which I name it) now placed on top and bigger and easier to use. Clicking on the smiley face icon on the top right corner will bring up the chat panel on the right. I still not able to get it to show list of my friends who are currently online (at the time I’m testing it, and I just test it on my offline contact), though I can get to them by typing their name in the box. The new chat box also looks nice, but they seems like removed some icon, like the (h5) high five icon.

Composing email now made it even more easy to the eyes compared to the previous version.

Read more ... →

Vertical center, finally!

Though I’m not a good web designer, but sometimes I do need to mockup some web pages or in charge for web design for my fellow unlucky internal user, and there is time that I want to center everything to center, such as login box, it will look nice to be centered.

But extra DOM, extra style, it always confused the hell out of me, and I don’t want to use <table> for layout, <table> not use for this purpose. But lucky enough, CSS3’s display:box came to save the life.

It’s dead simple to do that using the CSS3:

div {  
  width: 350px;  
  height: 100px;  
  border: 1px solid black;

  /* Firefox */  
  display: -moz-box;  
  -moz-box-orient: horizontal;  
  -moz-box-pack: center;  
  -moz-box-align: center;

  /* Safari and Chrome */  
  display: -webkit-box;  
  -webkit-box-orient: horizontal;  
  -webkit-box-pack: center;  
  -webkit-box-align: center;

  /* W3C */  
  display: box;  
  box-orient: horizontal;  
  box-pack: center;  
  box-align: center;  
}

HTML5 Color Input

Finally, when I’m searching for some JavaScript libraries, I came across with some input box, that actually called up OS X color chooser dialog, so I checked with the W3Schools page, it appears that <input type=”color”> and <input type=”date”> now is supported in Google Chrome, which was not working last I check months back.

HTML5 new input type such as color and date actually do save some times on implementing client side validation, a simple input tag rather than coding some scripts to check. Input tag such as <input type=”email”> actually trigger the email layout keyboard in mobile devices, which allows user to key in email addresses more easily because of quick access to symbols that appears in email address.

HTML5 Video, Leaving IE Users

While composing my previous post, I wanted to add a video to show the animation that I’m mention, so I decided to capture screen shots to show it on my post.

Lucky enough OS X came with many useful apps that most people might not aware about them, and download third party apps for the exact functionality. To capture the screen (in video), I use Quicktime’s screen recording function to capture iPhone Simulator and output as .mov file, then use a nice little free convertor called Adapter, to convert into flv, and was looking for WordPress plugin to post a video since then.

I have came across few, like Stream Video Player and JW Player, they both offer simple video browser to pick from my upload library, and generate the video player, but it keeps saying permission error when it plays, even though I already set permission 777 on uploads and plugin folder, no luck.

Then I remembered the HTML5 video, and the Gizmodo post, I decided to leave legacy browser behind, namely the IE 6 – 8, and go for HTML5 video. So I convert the mov file into mp4 and ogv, mainly because not all browser plays the same format as shown here. With a simple <video> with multiple source for supported browser to download.

Read more ... →

iOS Style Navigation in Sencha Touch 2

Recently I’ve noticed that in iOS, the navigation animation for the title bar is more than simply slide in new screen from right to left, despite I’m using iPhone for few months now, I didn’t aware of the animation until I felt something different with the animation done by Sencha Touch, the attention paid to the detail made the whole screen switching much smoother.

Your browser does not support native video tag, that’s bad
(video quality might not be that clear, but still able to see the title bar animation)

It appears that Sencha Touch 2 provide a new component Ext.navigation.View, which according to the documentation, it’s a container with extra features. Using navigation view is a bit different than what I’ve done previously.

Another navigation animation I found different from iOS native and Sencha Touch is the tab panel switching, in Sencha Touch, it use the slide effects, while in stock apps in iOS, it don’t have animation, but this one is a quick fix in Sencha Touch.

So, as usual, we need the MVC folder structure, index.html, app.js and Viewport.js to get started. In this testing, I’m using tab panel on the viewport.

Read more ... →