Thursday, June 30, 2011

Notes from velocity 2011

Reference: (Yahoo) (Netflix) (JS Engine)

Saturday, June 25, 2011

First php on macbook

Step 1: Enable Apache
System Preferences -> Sharing -> Web Sharing

Step 2: Enable PHP
/private/etc/apache2/httpd.conf -> LoadModule php5_module libexec/apache2/

Step 3:  Config PHP
cd /private/etc
sudo cp php.ini.default php.ini

Step 4: Restart apache
sudo apachectl restart

Step 5: phpinfo
<?php phpinfo(); ?>

Step 6: hello world
  <title>PHP Test</title>
 <?php echo '<p>Hello World</p>'; ?>

Tuesday, June 21, 2011

streamstolob=false caused ORA-01407

When insert large amount of characters into CLOB column of one Oracle db table, iBatis will throw ORA-01407 exception
--- The error occurred in conf/sqlmaps/maps/EmailTemplate.xml. 
--- The error occurred while applying a parameter map. 
--- Check the UpdateSiteEmailTemplate-InlineParameterMap. 
--- Check the statement (update failed). 
--- Cause: com.inet.ora.Ora4SQLException: [Oracle] #56 ORA-01407: cannot update ("TEST"."TESTTABLE"."MESSAGE") to NULL
[Oracle] #56
        at com.ibatis.sqlmap.engine.mapping.statement.GeneralStatement.executeUpdate(
        at com.ibatis.sqlmap.engine.impl.SqlMapExecutorDelegate.update(
        at com.ibatis.sqlmap.engine.impl.SqlMapSessionImpl.update(
        at com.ibatis.sqlmap.engine.impl.SqlMapClientImpl.update(

Root Cause:
By default, inet JDBC driver implemented property streamstolob is set to false. Change stream parameter to CLOB/BLOB parameter to make it compatible with this data types. Without it, streams are only compatible until 4K bytes. Note: This property will work for i-net SERO, i-net SEROPTO and i-net ORANXO only.

For more info, check out i-net JDBC Driver Manual (from

To use BLOB or CLOB data types larger than 4 KB for persistence using the Inet Oraxo JDBC Driver for Oracle Databases, you must set the database's streamstolob property value to true. There are two ways to set this property:
  1. append the properties to the URL like this:
  2. connectionProperties - A list of driver specific properties passed to the driver for creating connections. Each property is given as name=value, multiple properties are separated by semicolons. Default: no properties
Other interesting driver connection properties
  • queryTimeout - set default value for Statement.setQueryTimeout()
  • sduSize - the maximum packet size the driver is sending. default is 2920
  • failover - if set on true, the driver connects to alternative hosts, if connecting failed, default is false
  • loadbalance - if set on true, driver connects to one of the given hosts, default is "failover" value
  • initSQL - This query is executed once per connection

Friday, June 10, 2011

Chrome browser about: chrome:// internal links

Almost everyday I need clear Chrome cache from "Options - Under the hood" page for Web performance investigation. Usually I type Ctrl+Shift+Del to "Clear browsing data...", and the URL is chrome://settings/advanced. From that I realize that Chrome has similar about: pages like other browser does, and also has chrome:// protocol. After some google and try, I got some useful links



Tuesday, June 7, 2011

Books (Javascript, HTML, CSS, jQuery, HTML5)

Web terms: Javascript, HTML, XHTML, DHTML, CSS, jQuery, HTML5

Head First JavaScript
JavaScript: The Missing Manual
Learning JavaScript, Second Edition

JavaScript Patterns
JavaScript: The Definitive Guide, Sixth Edition
JavaScript Cookbook
JavaScript & DHTML Cookbook, Second Edition

Douglas Crockford JavaScript Master Class
Unobtrusive Ajax
High Performance JavaScript Programming
Developing Large Web Applications
JavaScript: The Good Parts

Professional JavaScript for Web Developers (Wrox Programmer to Programmer)
JavaScript: A Beginner’s Guide, Second Edition, Third Edition
Murach’s JavaScript and DOM Scripting (Murach: Training & Reference)
JavaScript(TM) Step by Step
Pro JavaScript Techniques
Object-Oriented JavaScript: Create scalable, reusable high-quality) JavaScript applications and libraries
Pro JavaScript Design Patterns (Recipes: a Problem-Solution Ap)
Beginning JavaScript

jQuery Cookbook
jQuery Pocket Reference
Dojo: The Definitive Guide
Node: Up and Running
Closure: The Definitive Guide
Microsoft Windows Building iPhone Apps with HTML, CSS, and JavaScript
Building iPhone Apps with HTML, CSS, and JS
Building Android Apps with HTML, CSS, and JS
Scripting InDesign with JavaScript
Tom Hughes-Croucher on Node
Programming HTML5 Applications
HTML5 Up and Running
HTML5 Geolocation
HTML5 Canvas

CSS: The Missing Manual by David Sawyer McFarland
CSS Cookbook by Christopher Schmitt
Teach Yourself CSS in 24 Hours by Kynn Bartlett
CSS: The Definitive Guide by Eric Meyer
Cascading Style Sheets by Example by Steven E. Callihan
Core CSS by Keith Schengili-Roberts
CSS Mastery by Andy Budd
CSS: The Designer's Edge by Molly Holzschlag
CSS Pocket Reference by Eric Meyer
CSS for Web Designers Only by Donna L. Baker

Stylin’ with CSS: A Designer’s Guide (2nd Edition) (Voices That Matter)
Pro CSS and HTML Design Patterns
The Ultimate CSS Reference
Transcending CSS: The Fine Art of Web Design (Voices That Matter)
Beginning CSS Web Development: From Novice to Professional
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition) (Voices That Matter)
Handcrafted CSS: More Bulletproof Web Design
The Zen of CSS Design: Visual Enlightenment for the Web
More Eric Meyer on CSS (Voices That Matter)
Designing with Web Standards (2nd Edition)

Head First HTML with CSS & XHTML
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)
Build Your Own Web Site The Right Way Using HTML & CSS
HTML, XHTML, and CSS All-in-One Desk Reference For Dummies
HTML and XHTML Pocket Reference (Pocket Reference (O’Reilly))
HTML A Beginner’s Guide (Beginner’s Guide (Osborne Mcgraw Hill))
HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
Creating a Web Page with HTML: Visual QuickProject Guide
DHTML: The Definitive Reference (2nd edition)
DHTML and CSS Visual QuickStart guide

Saturday, June 4, 2011


Wikipedia gives such a definition about JSONP:
JSONP or "JSON with padding" is a complement to the base JSON data format, a pattern of usage that allows a page to request data from a server in a different domain. As a solution to this problem, JSONP is an alternative to a more recent method called Cross-Origin Resource Sharing.

Remy sharp defines JSONP in his blog (what is JSONP?) like this:
JSONP is script tag injection, passing the response from server in to a user specified function.

More explanations from wikipedia:
Said a different way, the typical use of JSONP provides cross-domain access to an existing JSON API, by wrapping a JSON payload in a function call.
In that way, the use of JSONP can be said to allow browser pages to work around the same origin policy via script element injection.

Same origin policy:
Wikipedia has the explanation about this policy. Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port or  protocol.

Possible solutions to same_origin_policy:
Proxy (e.g. Nginx)
Script tag
CORS (Cross-Origin Resource Sharing)

<title>JSONP Example</title>
<p>Script injection to get a jsonp response from twitter,
and in callback function handleResponse(),
we retrieve the latest tweet from "cnnbrk"</p>
<div id="id"></div>
function handleResponse(responseJson){   
   document.getElementById("id").innerHTML = responseJson.status.text;
<script type="text/javascript"
jQuery and JSONP
jQuery has supported JSONP. For details, see jQuery .ajax() API document, also there is a project on google code which is an alternative solution to jQuery's implementation of JSONP. The interface $.jsonp() is similar to $.ajax().

Wednesday, June 1, 2011

Resize image using Src

If we google "resize image online", there are many web sites/utilities providing image resizing capability, but it is kind of manual process with three main steps: upload, configure and resize, then download image. Some sites provide advanced options like rotate/crop/effect etc, but they are all web based image processing tool.
and more ... Src
provides Optimized Fast Image Delivery, which is very cool. Here is its production introduction: Put a single high resolution image on your server, point your IMG tag to Src and let the cloud take care of the rest. Src sizes your images to the device that is requesting them, then caches and optimizes them for efficient repeat delivery. Src API
is very simple and ease of use. Just follow the documentation and remember the the full syntax of the API:[/data][/family][/format][/width[/height]]/url

Here are two examples using iGoogle logo (small version, original size 8393 bytes, width*height=166*55px):

Example 1: shrink it by 50%  (4550, 83*28px) (which is to shrink to 50% of the screen rather than 50% of the original image)

Example 2: shrink it to 1/4 of original size and get data URIs

It will return the base64 data URI which is a way to save one HTTP request for very small image in terms of Web performance.
The HTML code looks like <img id="img1" src="data:image/png;base64,thebase64data"/>
  • width/height only accepts integer value
  • will only shrink images. It will not enlarge them.
  • Subtraction sizing and Percentage sizing are relating to computer/device screen
  • family sizing is now a legacy technique, use adaptive sizing instead. 
  • For charts showing common mobile device screen sizes, you are recommended to take a look at dotMobi’s DeviceAtlas which provides up-to-minute device detection data for mobile development