Face tracking web application

Continuing the theme of exploring various technology, it is time to see how far the browser has come.

A web application which tracks user faces through the device video capture source. On mobile phone, user can choose which camera to capture the video from. Since mobile phone have limited computational power, the resolution of the video capture is lower to ensure a smooth experience.

Try out the face tracking web app. Please note the application is rather large ~ 9 MB, and may require a few minutes to download on a slow connection. You will also need a a modern browser such as Google Chrome. Available for desktop and mobile devices

Don't worry, all processing are done on the client side, i.e. no video or imagery are send to anyone.

Trying out flutter 1.0 to build an Android App

With the recent 1.0 release of Flutter, it is time to try out yet another technology. This time, it was a pleasant surprise. It was surprisingly easy to build an app and publish it!

And here it is: Hong Kong Barbeque Sites in Google Play Store 

This is a simple app which list out the Barbeque sites from LCSD Hong Kong. In this app, I get to tryout:

1. Dart + Flutter
2. Google Map integration 
3. I18n with Chinese HK/CN and English.

Did you know? JDK comes with HttpServer since 1.6

Did you know? JDK comes with a HttpServer since 1.6

And it is not a secret, do not use API under sun.*. It is under com.sun.*. Just tried it out and still works on JDK 11.

Intellij SLF4J live template - psfl

In Settings > Editor > Live Templates
Under "others" section

Add the following with abbreviation: psfl and description: Insert slf4j logger

private static final org.slf4j.Logger log = org.slf4j.LoggerFactory.getLogger($CLASS_NAME$.class);

And "Edit Variable" where CLASS_NAME = className()

Bitcoin Faucet - And I actually got paid by one of them

In the past weekend, there was a Bitcoin-themed hackathon in Hong Kong. Although I didn't participate, it did bring my attention to bitcoin again and I did a little bit of research about it.

While I was doing my research, I learn about these little sites called "Bitcoin faucet". For those of us old enough to know about those get-paid-to-surf-the-net-schemes back in the 90s (e.g. AllAdvantage, are the still around?), are they back?

At first I was skeptical, but I figure I will give them a try. Of the 7-ish Bitcoin faucets I tried over the week, one of them actually did payout. The faucet that paid out is http://freebitco.in/

And here is a screenshot of the transaction receiving the bitcoin!

That's right. A Grand Total of $0.14 USD. Is it worth the time? Probably not. But at the end of the day, what intrigues me is the ability to enable micro-transactions. After all, paying out $0.14 USD by any other means, the transaction cost is probably more than the actual amount transferred.

Like it or not, Bitcoin or some other crypto-currency technologies like this will open a whole new world for us.

P.S. Wanna try out the bitcoin faucet? Here is the link to it again.

Javascript oddities #1

var func = function() {}
console.log(func.prototype.constructor == func); // return true

JHipster: A code generator with a truck load of tech for AngularJS and Spring Boot based projects

I recently came across a JHipster - a Yeoman-based generator, which generates a based project which includes a truck load of technologies (taken directly from JHipster's Technology Stack page):

Technology stack on the client side

Single Web page application:

• Responsive Web Design
• HTML5 Boilerplate
• Twitter Bootstrap
• AngularJS
• Full internationalization support with Angular Translate
• Optional Compass / Sass support for CSS design
• Optional WebSocket support with Spring Websocket

With the great Yeoman development workflow:

• Easy installation of new JavaScript libraries with Bower
• Build, optimization and live reload with Grunt or Gulp.js
• Testing with Karma and PhantomJS

And what if a single Web page application isn't enough for your needs?

• Support for the Thymeleaf template engine, to generate Web pages on the server side

Technology stack on the server side

A complete Spring application:

• Spring Boot for easy application configuration
• Maven or Gradle configuration for building, testing and running the application
• "development" and "production" profiles (both for Maven and Gradle)
• Spring Security
• Spring MVC REST + Jackson
• Optional WebSocket support with Spring Websocket
• Spring Data JPA + Bean Validation
• Database updates with Liquibase
• MongoDB support if you'd rather use a document-oriented NoSQL database instead of JPA
• Cassandra support if you'd rather use a column-oriented NoSQL database instead of JPA

Ready to go into production:

• Monitoring with Metrics
• Caching with ehcache (local cache) or hazelcast (distributed cache)
• Optional HTTP session clustering with hazelcast
• Optimized static resources (gzip filter, HTTP cache headers)
• Log management with Logback, configurable at runtime
• Connection pooling with HikariCP for optimum performance
• Builds a standard WAR file or an executable JAR file

Although I did not use it for any of my projects (yet), it is a great reference to see how to setup a project which truly separate the front and back development. What I meant by that is the project is setup where the front-end can be served via 'grunt serve', i.e. NodeJS, decoupled from the back-end Spring Boot server. Yet, we all these goodies, you can still easily call 'mvn package' to build a complete Spring Boot powered executable JAR.

It is a great project to get a glimpse of all these technologies and how they can integrate together. More importantly, it set up a viable project which separates but integrated workflow for front-end and back-end. After working with it for a bit, I do have some reservations and comments, but that for another post.

Have you used JHipster in your projects? In a production setting? If so, I love to hear your comments.