Catch a Glimpse

Formidable Forms with HTML

Once upon a time, there existed countless paper forms that we had to fill up for activities like applying for jobs, opening bank accounts, admission to schools, and even registering marriages. The list went on and on. In those forms, more often than not, we would come across underscored spaces or empty boxes with labels like name and address, checkboxes with pre-defined values like “Male” and “Female”, and multiple line asking for descriptive information. These forms would have to be duly completed and submitted manually by hand or by post to the organizations that supplied the forms.

We still encounter paper forms today. Thanks to web technologies, however, their usage and popularity have been quietly eroded by a new “form” of forms — the web forms. Nowadays, when we want to sign up for some activity, we will just have to visit the relevant website and fill up a web form via a browser. In a way, web forms have become the de facto ways of interaction between websites and their users. With the proliferation of social media, web forms have also become the ubiquitous ways of communication between users of social networking websites.

In a nutshell, a web form usually consists of one or more form widgets such as text fields, text areas, drop-down lists, checkboxes, radio buttons, reset button, or submit buttons. Like their counterparts in paper forms, these form widgets are usually labeled with words to describe their purpose. Through such form widgets, users can enter, select, and submit data to the server for processing.

There are two parts to completing the learning of web forms — the client side and the server side. The client side focuses on building your first web form using HTML, while the server side focuses on writing server-side scripts to process the data submitted via your first web form.

In this tutorial, you will embark on a hands-on learning journey to creating a modern web form on the client side. Continue reading ›

Leaping into Motion

There has been a real buzz about Virtual reality (VR) and augmented reality (AR) technologies over the past few years. Major VR developments by the big tech companies. such as Sony’s PlayStation VR and Google’s Daydream, are pushing VR into the mainstream. The unrelenting fever of Pokemon Go in 2016 charted the unwavering course for the future development of AR. Even more excitingly, Microsoft’s HoloLens sets to bring the mix of virtual and augmented reality (Mixed Reality) into our real world may not seem so far-fetched after all.

While waiting for the fruits to ripe, aren’t you curious how it is possible to control an object in your computer screen using your hands or fingers in the air. What better way to find out the answer then trying your hand at creating one, albeit a simple one.

This article will get you started on writing code to perform simple manipulations of web elements in the browser using your finger in the air via a sensor device called Leap Motion controller by Leap Motion, Inc. Continue reading ›

Hands-on with HTML APIs

The advent of HTML Living Standard, previously known as HTML5, has revolutionized the traditional web scene (and sense). In this book, I will simply call it HTML. In particular, HTML mandatory support for incorporating the ever-increasing number of APIs into browsers has enable web pages to function more and more like desktop applications. This empowerment has brought about new possibilities and opportunities for the next generation of web applications that are more autonomous and can work offline, on multi-platforms, free of third party plug-ins and less reliant on server-side scripting. In the foreseeable future, it is not unimaginable that the web browser will replace our traditional metaphor of desktops on our computers, that of a web-based desktop.

Wow, the future of web landscape looks excitingly promising. However, reaching this stage is not without its challenges. For one thing, the supports of the current browsers must be improved and streamlined. For another, the awareness and education on HTML APIs among the web communities must be stepped up. Some would have argued about “the chicken or the egg” causality dilemma. I would argue that both can proceed in parallel.

Over the years, HTML specification has added a bag full of APIs that cover a wide spectrum of functionality and features that power the future web browsers and mobile devices. In this book, you will dip into the HTML APIs grab bag and draw out eight of them for discussion and exploration peppered with plenty of hands-on exercises —

  • Geolocation for finding and navigating your way on Earth;
  • Drag and Drop for dragging and dropping UI elements on HTML pages;
  • Server-Sent Events for delivering server push updates from servers;
  • Web Sockets for establishing full-duplex bi-directional communication between clients and servers;
  • Web Workers for spawning JavaScript on background threads;
  • Web Storage for inserting, updating, retrieving, and deletion of data in your browsers;
  • File API for turning your browser into a web-based file explorer where you can read and save files on your computer’s local file system; and
  • Canvas for drawing and animating multimedia resources on HTML pages.

Apart from the the many learning exercises, you also get to create interesting web applications including live stock quotes, real-time web chat, a web-based file explorer, and a clever hack to save web data from your HTML page to your computer’s file system.

If you wish to receive a copy of the source code, please contact me via the email address inside the book with proof of purchase.

What are you waiting for? Get your hands on the paperback now!

Also available as eBooks @

Other Publication

More books at the store ›

Winning Articles

HTML Geolocation

Best Web Development Article of May 2017 (First Prize) by Code Project

This is also one of the chapters from my publication “Hands-on with HTML APIs“.

Every one of us occupies a location on Earth. This location is specified by a geographic coordinate system of latitude, longitude, and altitude. With the proliferation of location-aware hardware and software, finding one’s location on the Earth has never been easier. There are many techniques available to identify the location of a user. A computer browser generally uses WIFI or IP based positioning techniques whereas a mobile browser may use cell triangulation that based on your relative proximity to the different cellular towers operated by the telcos, GPS, A-GPS, or WIFI. Today, location awareness is an ever-growing trend that finds its way into many applications like:

  • Showing one’s location on a map especially when you are in an unfamiliar area.
  • Providing turn-by-turn navigation while driving on unfamiliar journey.
  • Find out the points of interest in one’s vicinity.
  • Getting the latest weather or news of one’s area.
  • Tagging the location of picture.
  • Location tracking of a fleet of delivery trucks.

Thanks to HTML Geolocation API, you can now look up your own location on Earth using a browser, say Firefox. It is as easy as a piece of cake. Doing is believing. Let get your hands dirty… Continue reading ›

Getting Started with SQLite on Android

Best Mobile Article of January 2017 (First Prize) by Code Project

Every app involves data. Most data are supplied by users through the various input controls, such as text field, check box, radio group, spinner, and button. While some data is transient, most will require to stay or persist even after the app has stopped running. Android provides many ingenious technologies for storing persistent data locally. In this article, you will learn to perform CRUD, i.e. Create, Read, Update, and Delete, on data using a SQLite Database on Android.

On your favorite Android IDE, start a new Android app project. Let’s give it an application name of “AndroidSQLite” and a domain name of “”. The resulting package name of your project will be “com.peterleowblog.androidsqlite“.

In the project, create an Android activity called “MainActivity”. As shown in Figure 1, the user interface (UI) of this “MainActivity” comprises the following controls: Continue reading ›

More articles ›

Code Challenge

Find out more ›


Find out more ›

In Perspective