Experience – Page 51 – cuteprogramming

A Day in Microsoft: Having Fun with Windows 8 App Development

July 22, 2012August 8, 2012 by Chun Lin, posted in C#, Event, Experience, Product, Windows 8

Last month when I read a Facebook post from Spiffy that Microsoft Singapore was going to organize a hackathon, I immediately emailed my friends about it. Desmond, one of my OneSync Dev Team teammates, gave me a prompt reply saying that he was interested to join it as well.

The event is called Dream Build Launch. It’s an event specially prepared for local developers to build their (first) Windows 8 metro-style app. Since the event was held on Saturday, I can happily participated in it without applying for leave. There are a few reasons why I would like to join the hackathon. Firstly, I wanted to learn more about WinRT. After listening to the talk delivered by Hammad Rajjoub and Bruce Wang from Microsoft in the Microsoft Campfire, I always wanted to try out the interesting features offered by WinRT.

Secondly, it’s a very good opportunity to meet imba software developers in Singapore. So, during the event, I was quite happy to see many friends from School of Computing (SoC), NUS taking part in the event also. Some of them were actually Microsoft interns. It’s also fun to share our ideas about what we’re going to build with them.

Thirdly, due to the fact that the event was held at Microsoft Singapore office, so I was very excited to see the working life in Microsoft. Their workplace was just renovated not too long ago. The office shared the same building as the NTUC centre. It’s a very clean and comfortable workplace.

MS Hackathon - JS Lab Session — HTML5 for Metro Apps talk given by Alex Goh. Photo Credits: Spiffy

Before the hackathon began, there were two lab sessions held. Since both of the lab sessions were held at the same time, so the participants could only choose to attend one of them, either JavaScript lab or C# lab. Desmond and I finally decided to attend the JavaScript one because we’re interested to see how a metro-app could be built using HTML5 and JavaScript. I couldn’t find the slides they used in the JavaScript lab session. However, Hammad Rajjoub did share some links to the related topics on the Facebook group of the event, for example how to style controls to your preferences in metro-style apps using JavaScript and HTML. For the C# lab session delivered by Bruce Wang which both of us didn’t attend, his slides can be found here.

The hackathon began at around 1pm. We had about 22 hours to complete our app. According to the rules of the hackathon, our app needed to have a theme and the theme was ” I ❤ SG” (I love Singapore).

Introducing EsplandeGo! – The First Esplanade App on Windows 8

Three days before the event, I was thinking what kind of app we should build. After having dinner at Raffles City, I walked to CityLink Mall and then I saw an advertisement about the events in Esplanade. Then I suddenly had an idea. Why don’t we build an app about Esplanade? So, I walked to Esplanade which is located nearby to get more ideas for the app that we’re going to build.

After coming back from Esplanade, I was so excited about the idea. Thus I immediately wrote the first version of our app and emailed some screenshots of the app to Desmond to explain to him the idea of building an app which listed Esplanade events. I named the app “EsplanadeGo!”.

EsplanadeGo! - Draft — The screenshot of the first version that I built in half an hour

Yup, so during the event, we continued on building the app.

Desmond was in charge of writing a program to crawl the live data from the Esplanade official website. Since there would be delay when waiting the results from the crawler, Desmond used Asynchronous Programming with Async and Await. It’s a newly introduced approach to do asynchronous and concurrent programming in Visual Studio 2012 RC. Yup, so that was my first time to see how await keyword worked.

I was trying out the Search and Share contracts. After listening to the Windows 8 talk on Microsoft Camp, I always wanted to see how easy it was to add the contracts to the program. It turned out to be not so straight-forward. I also added App Bar to our app. There is a set of guidelines for developers to understand what should and should not be put in App Bar.

Working Hard on Our App: EsplanadeGo! — Working hard on our app, EsplanadeGo!

There is one thing that I forgot to do is making sure our program could run in an environment which had no Internet access. So, when I tried to run it on MRT after the end of the hackathon, then I realized our app actually crashed because there was no Internet connection. >__<

Nice People, Nice Food

I like the Dream Build Launch hackathon very much. I like the workplace as well. Coding in such a nice environment is truly enjoyable. I could see the beautiful Singapore Strait clearly from the office. Watching sea, drinking free coffee, coding stuff. That partially explains why people like to work in Microsoft Singapore.

Besides the nice view, I enjoyed the speeches given by the developers and staff from Microsoft Singapore. The lab session also helped me to understand more about the possibility of WinRT, especially the way we could use JavaScript to build a Win8 app.

In the event, I also met some friendly participants during the event. It’s fun to talk to them and listen to their ideas.

Last but not least, the lunch, dinner and supper provided by Microsoft Singapore are extremely good. So, Desmond and I had to queue for about 20 minutes just to get the food.

Yup, I’m happy to take part in the event. =D

Computing Workshops @ Kuala Lumpur High School

June 13, 2012December 22, 2013 by Chun Lin, posted in Arduino, Event, Experience

This year, I once again travelled to Kuala Lumpur. Same as two years ago, I was fortunate enough to get the chance to join the computing workshops organized by NUS School of Computing (SoC) and Chong Hwa Chinese Independent High School at Kuala Lumpur (CHKL).

Again, thanks to my boss, he happily allowed me to take leave to join the 4-day SoC computing workshops.

Introduction
The workshops were organized for the students from Malaysia Chinese independent high schools. During the event, the students got the opportunity to listen to the talks given by SoC lecturers on several interesting topics, such as PHP programming, E-commerce, Android app development, Arduino and so on. Before the event, when I read through the list of talks, I was so surprised that students nowadays were so fortunate to learn about all these exciting technology when they were still studying in high school.

There were other several interesting topics about algorithm, Facebook and iPad app development modules, and so on. I won’t talk about them here since I will be sharing more about the app development workshops in the 4-day event.

Learning Android App Development
I like how they chose MIT App Inventor as the tool for the students to learn building an Android app. App Inventor uses a graphical interface. Thus, instead of writing codes in text, students could just drag-and-drop the blocks to “write” their program. The blocks are actually those statements and expressions like if…else, assignment, for loop and so on. It is similar to Alice, a 3D programming environment, that we used in last year workshop. So now programming becomes easier because the students can just build their Android apps without writing single line of code and the whole experience is just like playing Tetris.

Students Showing Their Android App to Dr Chia — Students were showing their Android app to Dr Chia

A simple counting program written and designed by Nan Wei (Keat Hwa High School)

Having Fun with Arduino
In order to let the students have a little idea about the world of Computer Engineering, we had Arduino for the students to play. Arduino is a prototyping platform. It comes with an IDE which allows the user to compile their code and then upload it to the Arduino Board. So with the tools, students could easily write their simple C++ program to control the LED on the board. Some of the students learnt quite fast and they were able to do some amazing stuff like playing music and controlling LED brightness with the help of sensors. It’s amazing to see how the students nowadays get so much learning opportunity. When I was a student in SoC, I didn’t even know what Arduino was. Haiz.

Arduino demo proudly brought to you by Nan Wei and Yek Xian (Foon Yew High School)

Arduino Programming Exercises Done by Students — Arduino programming exercises done by the students

Not Just Coding, But Also Thinking
During the 4-day workshops, students also got to learn building a simple E-commerce website. Many of the students didn’t have PHP background. Due to the time constraint, the lecturer didn’t manage to cover everything in details. Luckily there was two lab sessions for the students to ask questions. Interestingly, some of their questions were actually quite good because from their questions, we could tell that the students really think a lot. One of the students even went further to learn JavaScript and came up with a beautiful website.

Cheng En and His PHP Web App (The one with extra features done in JS) — Cheng En (CHKL) and his PHP web app (The one with extra features done in JS)

Fun
Before the end of the workshops, one of the student helpers asked me whether I would join the workshops again as student helper next year. Well… I do hope that I will be invited by the school again. Frankly speaking, event or workshop like this is very tiring, especially for those who have to go back to work on next day of the event. However, it’s still fun to talk to the high school students and share our campus life experience with them. It’s also glad to see that most of them actually liked learning very much (Note: The students actually travelled from different cities across Malaysia just to participate in the workshops. Also that was during their school holiday).

OneSimpleTablePaging: Doing Client-Side Table Pagination Easily

April 7, 2012October 22, 2014 by Chun Lin, posted in CSS, Experience, JavaScript, Product

Motivation

Few days ago I was finding a solution for client-side HTML table pagination then I reached this page where I found a rather simple JS table pagination done by Ryan Zielke: http://neoalchemy.org/tablePagination.html

I like his solution very much because it does not require a lot of random CSS and JS files. In order to have the table pagination working in my web page, I just need to include one JS file and four images for the buttons. That’s all.

Few days after that, I started to think if there are ways to simplify his code and also to avoid using any image file. I would like to see if it’s possible that the table pagination can be done with just very simple and easy to understand JS code.

Mission Start!

After spending one day in Alumni Service Centre, NUS, I finally finished the first version of the project. I name it OneSimpleTablePaging: http://one-simple-table-paging.googlecode.com.

It now becomes my another open-source personal project after Google Docs Notifier and OneSync.

In my version, user can only customize the number of rows per page and the position of the pagination bar. This is to keep the code simple. So, if the user is okay with the default settings, after include the jQuery libraries and the OneSimpleTablePaging JS file to his/her web pages, he/she can actually just apply the method oneSimpleTablePagination() with empty array as parameter to existing tables to get the table pagination, for example

$(‘#main-table’).oneSimpleTablePagination({});

Yup, so now everything is so easy and straightforward. =)

Mission Clear

The following screenshot shows the look-and-feel of the table pagination handled by OneSimpleTablePaging.

By the way, the table showed in the screenshot is a collection of my (favourite) watched anime. =P

Yup, now you can visit the project homepage of OneSimpleTablePaging hosted on Google Project Hosting to download the source code and then play with it. =)

Edit (22 Oct 2014)

OneSimpleTablePaging is now on GitHub! — OneSimpleTablePaging is now on GitHub: https://github.com/goh-chunlin/one-simple-table-paging!

Introducing Viewport to Mobile Website

March 13, 2012March 13, 2012 by Chun Lin, posted in Experience, Mobile Website

Yesterday I downloaded Windows Phone Emulator from Microsoft Download Center (http://www.microsoft.com/download/en/details.aspx?id=13890). It came along with Visual Studio 2010 Express, Expression and XNA Game Studio 4. I basically just wanted to see how my mobile website will look on WP7.

Then I realized the display of the web page had some problems, as shown in the following screenshot.

It seems like the phone is showing the website as like on desktop.

Viewport

The screen size of mobile is always an important thing to take care of when I’m developing the mobile version of my website. Phone normally has screen width of about 400px. My Motorola Quench XT3 has the screen size of 320px x 480px (Reference: http://www.gsmarena.com/motorola_xt502_greco-3354.php). Hence, I need to find a way to tell the phone browser to show only the part with text.

So, how about setting the width of the body/div of the web pages? It just won’t work. Actually the screenshot shown above was done by setting the width of the div to be 320px and then positioning it at the center of the page. This method won’t work on most of the phones, except maybe my Android phone. In my Android phone browser, the website auto scale to fit the actual screen width. However, it’s not the case in my friend’s Android phone.

There are two types of viewport: Visual Viewport and Layout Viewport. There are a few very good online articles and discussion about these two viewports. For example, interesting and detailed explanation of the two can be found here: Browser compatibility — viewports and A tale of two viewports — part two. There is a thread discussing this on Stack Overflow: http://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport.

Solution

Soon, I found that by adding the viewport meta tag as shown below, the problem seems to be solved.

<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ />

It allows developers to tell the phone browser how the web page should be shown.

The code above says the width of the viewport to be the width of the device. Setting the maximum-scale to be 1.0 is to prevent users to expand the window size beyond the initial size. Munimum-scale is also playing the similar role. However, these two are currently not supported in the initial release IE Mobile for WP7 (Reference: The IE Mobile Viewport on Windows Phone 7). So, to keep user from scaling the viewport, I have to set user-scalable to be false in the viewport meta tag. Anyway, for details explanation on the viewport tag setting, please refer to The IE Mobile Viewport on Windows Phone 7 (for IE Mobile on WP7) and Configuring the Viewport (for Mobile Safari on iOS). Meanwhile, Firefox also started to support viewport meta tag with the same properties as Mobile Safari two years ago: Using the viewport meta tag to control layout on mobile browsers.

Yup, after adding in the viewport meta tag, the web pages look fine on the emulator.

Phone Website - With Viewport Meta Tag — Yup, the mobile website looks good now. =)