This Blog is Moved

This blog, which was bound to blog.int3ractive.com is now deprecated. I'm moving to GitHub Pages. Please head over to int3ractive.com for the new blog site.

This Blogger version is now for archive only.

Mức Tối Thiểu Của Lập Trình Viên Front End

Mức kỹ năng tối thiểu (baseline) là gì?

Là hệ thống kỹ năng và kiến thức tối thiểu của một nhân viên kỹ thuật cần có để có làm việc trong nhóm một cách hiệu quả và không cần nhiều sự trợ giúp.

Tại sao phải có mức kỹ năng tối thiểu cho lập trình viên Front End?

Từ kinh nghiệm làm việc trong nhiều nhóm phát triển phần mềm lớn nhỏ khác nhau, tôi nhận ra rằng một lập trình viên mới gia nhập rất cần được chỉ dẫn về quy ước và quy trình làm việc của nhóm phát triển để có thể nhận nhiệm vụ cũng như thay thế và hỗ trợ đồng nghiệp một cách trơn tru. Ngoài ra, những lập trình viên ít kinh nghiệm cũng cần được đào tạo những kiến thức tối thiểu để có thể đảm bảo được yêu cầu kỹ thuật cũng như hiệu suất khi thực hiện dự án. Tất cả những kiến thức và kỹ năng đó khi tập hợp lại sẽ thành mức kỹ năng tối thiểu của một lập trình viên trong môi trường phát triển phần mềm.

Baseline for Modern Front End Developers

word cloud by wordle.net

From my own experiences working in small and large development teams, I learned that setting a baseline of skills and workflow know-how among the people in a technical team is as much important as the coding conventions.

Without a doubt, raising team members' skills (esp. juniors) to a standard will not only enhance collaboration (as they should know what others are doing) but also improve their productivity.

When forming up my front-end team at Nau Studio, I thought a lot about what are the most essential skills and technical knowledge which will become my team's baseline and focus of basic training.

Inspired by this popular article by Rebecca Murphey, A Baseline for Front-End Developers, I'm presenting Baseline for Modern Front End Developers (Not-Just-JavaScript edition) which is tailored to target juniors and more updated with latest trends:

Fixing Web Font Padding Issues on Linux/Mac/Android Browsers

Recently I came across an annoying issue with web font (@font-face) in which the text does not appear vertically center within buttons or inputs (see image). Google around, I found that not all web fonts are affected, this defect seem to occur only on Mac/Linux and may vary in different browsers and is commonly referred to as "web font padding issue".

It's interesting enough that although the issue is quite common and has been reported several times but there seem to be no absolute solutions. Most suggested the workaround to set uneven padding to compensate for the shift. I have struggled so much with workarounds for this especially the padding didn't help to correct the alignment across browsers and devices (I preview my app in Chrome/OSX but it runs on iOS Safari and Android browser) so I decided to look into the issue again and thought about typography metrics problems.

Honestly, I know very little about typography and font metrics. I used FontForge (which happens to be easily installed on Ubuntu) to tinker with the troubling font file. After a few hours, I have discovered the problem when I tried to replicate the settings of another good font on the defective one. It was one of my Eureka moments!

Project: In2Ideas HTML5 Website

This is the complete rework of the front page of my (now ex) agency to show case our experiences and expertise. The concept was that the whole site is a mind map which is often associated with brainstorming & ideas generating.

The key feature of the site is the mind-map-like navigation in which you can drag to move in any direction. It works on both desktop and tablet's browsers. Looping animations are made of SVG graphics which were authoring in Flash and then converted to Google Swiffy. The dynamic dash lines were programatically drawn on HTML5 Canvas. To support older browser (IE8+), Flash will be in place of the SVG & Canvas graphics.

My roles: technical researcher, key front-end developer.
Technical highlights: HTML5, CSS3, RequiredJS, jQuery, Google Swiffy, FlashCanvas

Live URL: http://in2ideas.com

More screen shots:

Interaction demo:

HTML5 Wordle Tag Cloud

This is a direct port of my AS3 Wordle Tag Cloud to HTML5. Please read my old blog post for some background.

Some technical notes:

• Thanks to Canvas' RenderingContext2D.measureText(), I can calculate size of the words off browser's stage.
• Initially, I was using Canvas as rendering stage for the tag cloud. However, it demands extra work to make the words interactive. So I decided to use normal block text with CSS3's transform/rotate. The result is texts are searchable and out-of-the-box hyperlinks.
• The position checking process may cause browser hang momentarily if run through all of the words. I have split the process of each word into each RequestAnimationFrame to avoid the script hang.

However, there is still room to improve, for example, enhancing the intersection check and using any angle rotation...

There you go! Check out the live demo and source code.

Google App Engine for static websites

Nowadays, there are many options to host a static website (portfolios, generated weblogs, front-end demos, etc.) for free. One of the best ways is to push your static files to a Github's repo and publish them through Github Page.

A lesser known solution is to make use of Google App Engine (GAE). Actually, GAE is designed for building and publishing high-performance, highly scalable web applications written in Python, Java or the newly-introduced Go language. However, by tinkering with the set up and deployment process, I figured out that it is also great for hosting static website with no server side coding at all. Like Github Page, your static website will be served through http://[your-app].appspot.com or you can customize it with a (sub)domain.

The advantages of GAE over Github Page are: higher static files quota (known in GAE as blobstore, known in Github as repository size); allowed SSL; better performance (since GAE app is hosted with reserved thread and bandwidth); possible to supplement data and dynamic server-side scripting later.

Project: ISS 2012

This is a post-event highlighting microsite for Intεl Sοlμtiοn Sμmm!t 2012. The site is to capture the activities and everything related to event in the forms of videos, photos & other kind of materials. Audience of this microsite are participants of the event and other users of APɅC Intεl Channεl Pοrtal which is a member-only partners relation web site.

Live URL: www.%69%6E%74%65%6C.com/apac/channel/ISS2012/index.html [?]

Technical features:

• jQuery
• Galleria photo gallery (library)
• OSMF's Strobe Media Playback (component)

Obfuscation Reasons

Fish Boids - Three.js Demo

This is my adaptation from the Three.js Birds Demo which was featured in the famous HTML5 Music Interactive Film The Wilderness Downtown.

The original birds demo was done by Mr.Doob based on the boids simulation. You can read more about behind the scene of The Wilderness Downtown and the flocks of birds simulation from his blog here. (Thank Mr. Doob for your awesome Three.js library and the nice bird demo.)

The significant adaptations that I made to this school of fishes simulation are: the fish objects are PlaneGeometry with bitmap texture; some tweaks to the boids' speed and movement to make them more fish-like; and making the fish wiggle its tail instead of bird wings' flapping.

This fish and the bird demos are used in my side-project for my friend's HTML5 portfolio.

Now, go see the demo. The source code can be found on Github.

A Cave, 3D Stereo Images & 2-State Looping Animation

When I visited this cave during the trip to the central provinces of Viet Nam. I wanted to capture it magnificence and beauty but the cave's texture was too complex to visualize its depth and space on 2D photos. I recalled this 3D photography technique and tried to take some stereo photos of the scenes (take 2 photos of the same scene from 2 slightly different position) and made them into 3D stereo animation when I get back.

Traditionally, these 3D stereo images are presented by a 2-frame animated GIF. But GIF images are not efficient for live photographs and they normally take up more bytes than JPG for large pictures so I decided to use CSS and JavaScript to reproduce the animation with JPG photos.

Basically, the JPG is set as background of a div which has dimensions of half of the image. JS will shift the background-position at intervals revealing half of the background one at a time. And here's the results.

During the making of the effect, I also explored its possibility with CSS3 animation and steps() function. The result is the same without any coding. But for the sake of compatibility for the audience, the said demo still use JS. I put the CSS3 solution on Dabblet for later reference of similar 2-state animation. Check it out.

Tutorial: Realistic Waterfall with CSS3

A recent project requires me to create a realistic running waterfall. For such task, what came first to my mind was to use animated GIF or PNG sprite sheet and loop them frame by frame. Then my friend, Justin, explored more with a semi-transparent water layer overlaying a static waterfall image using Photoshop & Flash. The result was really satisfying. So I decide to adopt it into our project which is pure HTML. Thanks to CSS' background repeat and the new CSS3's animation, the task was really simple to achieve and straight forward.

Here's the demo & source code on Dabblet: http://dabblet.com/gist/2403656

It is worth noting that CSS3's animation is still an experiment feature. You can still achieve same result using JS to shift the background at intervals.

Let me explain step by step to re-create the effect:

Geany: open-source SublimeText for front-end developer

When I started doing JavaScript, I kept searching for an ideal JS code editor that is free, lightweight and fast just like FlashDevelop, my favorite ActionScript counter part. (In case you're wondering, I have made a Wine mod of FD4 and been able to run it on Linux). Most JS editors I tried were Java-based, heavy and code assistance is as not good as I expected.

Then I discovered SublimeText 2 and Geany. The former is commercial and the latter is opensource. Both of them are cross platform, lightweight, fast and has syntax highlighting for quite a number languages. For JavaScript and front-end stuff in particular, they both have some support for code hinting and auto completion but fairly limited.

Geany interface

Project: Justin Portfolio

One of the projects to challenge my skill in JavaScript and HTML5. The original parallax scrolling experience is coded from scratch with the help of MooTools framework. I learned a lot from this project and  got everything I need to handle larger front-end interactive websites.

Visit the site.

Technical features:

• HTML5 Boilerplate
• MooTools 1.4
• ThreeJS 3D library & its Birds Demo
• CSS3's transition & animation

Related posts:

• Realistic waterfall effect with CSS
• Fish boids

Project: J&J HTML Template

This is an HTML template for a privately developed CMS website. The job involved converting Photoshop .PSD files into HTML/CSS template, Javascripting validation for contact form and Google maps interaction. At the same time, I custom made the Flash banner carousel with the text & images customizable via XML feed. Due to CMS restrictions and corporate's guidelines, the template is rather traditional.

The live site can be visited here: www.comms.%6A%6A%73%65%61.com [?]
Note: the CMS developers have altered some layout and client-size logic. Here's the link to my demo site before integration.

Technical notes:

• jQuery
• Google Maps API

 

Demo: Stage3D Fireworks with Flare3D

My going back to Flash to experiment on Stage3D. The animation make use of Flare3D engine. Thanks to its built-in shaders and particles components, I was able to create the fireworks and the lightning effects without much trouble. However there's still room to improve the fireworks effect with more particles.

View the demo.

Case Study: WebGL 360° Panorama

A 360° walk-through of my office. This is a case study with the ThreeJS 3D engine for HTML5 Canvas and WebGL. I have adapted the ThreeJS WebGL equirectangular panorama demo, making it fall back to Canvas renderer when browser doesn't support WebGL. The overlaying markers are DOM objects. There's some coordinates conversion between ThreeJS 3D world and 2D DOM. In this adaptation, there are 2 spherical panoramas so users can navigate and see more corners of the office. Just for fun and experimental purpose, some snowing effect added on the occasion of Christmas 2011.

Components used:
- ThreeJS WebGL equirectangular panorama demo
- Snowing effect by Seb Lee-Delisle

Finally, check out the demo and grab the source code.

Case Study: In2 Profile

This is a case study that my team set out to explore HTML5 / CSS3 but it is also served as pitch deck for my company's profile presentation. This one-page parallax scrolling website is inspired by the one of the 2010 buzzing HTML5 experiences, nikebetterworld.com. Everything was coded from scratch.

We developed 2 versions. The first version features usual parallax scrolling with arrow drawing effect using canvas. The second version is a revamped one with additional animation on the illustrating graphics. I also experimented CSS3 transitions effect on the menu and some buttons.

My role: JavaScript + HTML Developer, Technical Researcher

Technical features:

• jQuery (library)
• HTML5 Boilerplate (library)
• HTML5 Canvas
• CSS3 transitions

Project: Turbo Race Track

This full flash minisite is part of a campaign to interactively inform users about Intel's partner membership program (APAC only) and guide them to earn more credits to enhance their membership level. There is a web service-driven section where weekly leading credit earners are listed to make the "race" more excited. The mechanism is relatively simple and straightforward. There's no demo link since this is a membership-only website.

My role: Flash developer
Technical highlights:

• MVC approach with Robotlegs framework
• AS3-Signals
• Greensock's TweenLite

Project: Training Credits Estimator

The aim of this site is to support Intel's partners and distributors in estimating their attendance in training courses offered by the company in order to maintain their privileged membership. For each type of membership, users have to select the courses with number of attendees, various training types and courses. The system will automatically calculate the credits members would be able to gain from said inputs. Disclaimer and a notice box will appear at the beginning and at the end respectively congratulating users having fulfilled the required credits. The most tricky part making text components flexible so that the site is interchangeable within 6 different languages.

My role: Flash Developer
Technical features:

• MVC approach 
• Multilingual with external fonts & texts loading
• Robotlegs framework
• AS3-Signals (AS3 Events replacement)

Bắt đầu với Molehill (Stage3D) - Phần 2

[This is a translation and edit of the article “Molehill Getting Started” from labs.jam3.ca]

PHẦN 2. TÌM HIỂU MOLEHILL (STAGE3D) API

Trình độ: Cao Cấp	Phần mềm	File mẫu
- Vững ActionScript 3 - Biết FlashDevelop - Biết Flash 3D hoặc 3D Engine	- Flash Develop 4 (tải về) - Flex SDK 4.5 r.19786 (tải về)	molehill_getting_start_p2.zip

(TTT) Đây là bài viết giới thiệu về Molehill (Stage3D) API ở khía cạnh cơ bản của nó. Molehill API là một tập lệnh cấp thấp nên đòi hỏi bạn phải vững về ActionScript 3 và có chút kinh nghiệm về 3D (Flash) để có thể dễ dàng tiếp cận hơn.

(Dịch)
Trước khi chúng ta bắt đầu, có một số thuật ngữ các bạn nên biết:

Các thuật ngữ:

• Vertex: Một điểm trong không gian 3D. Một vertex sẽ xác định đỉnh của một tam giác. Tuy nhiên trong MoleHill, vertex định nghĩa cả vị trí và màu của đỉnh.
• Matrix: Bạn dùng Matrix (ma trận) để biến đổi các Vertex. Hãy hình dung Matrix giống như là các "phương trình" để xoay, thay đổi tỉ lệ hoặc thay đổi vị trí của Vertex.
• Shader: Shader là một chương trình nhỏ dùng để xử lý Vertex. Shader có thể dùng Matrix để làm các phép biến đổi lên Vertex. (Hay nói cách khác, chương trình thực thi một phương trình lên tất cả các điểm trong 3D). Không như tôi nghĩ, Shader trong MoleHill không chỉ xử lý hoa văn và giao diện mà nó còn dùng để xử lý vị trí của các đối tượng.

Bây giờ chúng ta có thể bắt đầu xem xét các thành phần tạo nên MoleHill