Reference:
http://velocityconf.com/velocity2011/public/schedule/grid
http://www.youtube.com/view_play_list?p=C394849408B5F203
http://velocityconf.com/velocity2011/public/schedule/detail/18280 (Yahoo)
http://velocityconf.com/velocity2011/public/schedule/detail/17785 (Netflix)
http://velocityconf.com/velocity2011/public/schedule/detail/18087 (JS Engine)
Thursday, June 30, 2011
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/libphp5.so
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(); ?>
http://localhost/~hj/info.php
Step 6: hello world
http://localhost/~hj/hello.php
<html>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>
http://php.net/manual/en/tutorial.firstpage.php
System Preferences -> Sharing -> Web Sharing
Step 2: Enable PHP
/private/etc/apache2/httpd.conf -> LoadModule php5_module libexec/apache2/libphp5.so
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(); ?>
http://localhost/~hj/info.php
Step 6: hello world
http://localhost/~hj/hello.php
<html>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>
http://php.net/manual/en/tutorial.firstpage.php
Tuesday, June 21, 2011
streamstolob=false caused ORA-01407
Problem:
When insert large amount of characters into CLOB column of one Oracle db table, iBatis will throw ORA-01407 exception
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 http://www.inetsoftware.de/)
Solution:
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:
When insert large amount of characters into CLOB column of one Oracle db table, iBatis will throw ORA-01407 exception
com.ibatis.common.jdbc.exception.NestedSQLException:
--- 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(GeneralStatement.java:91)
at com.ibatis.sqlmap.engine.impl.SqlMapExecutorDelegate.update(SqlMapExecutorDelegate.java:505)
at com.ibatis.sqlmap.engine.impl.SqlMapSessionImpl.update(SqlMapSessionImpl.java:90)
at com.ibatis.sqlmap.engine.impl.SqlMapClientImpl.update(SqlMapClientImpl.java:67)
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 http://www.inetsoftware.de/)
Solution:
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:
- append the properties to the URL like this:
jdbc:inetora:192.168.0.110:1521?service=mydb.test.com&failover=true&streamstolob=true - 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
connectionProperties="streamstolob=true;failover=true"
- 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
about:version
about:plugins
about:flags
about:cache
about:memory
about:net-internals
about:dns
chrome://extensions/
chrome://history/
chrome://newtab
chrome://downloads/
chrome://about/
chrome://thumb/http://www.google.com/
chrome://favicon/http://www.google.com/
chrome://settings/advanced
chrome://net-internals/
chrome://appcache-internals/
chrome://view-http-cache/
about:version
about:plugins
about:flags
about:cache
about:memory
about:net-internals
about:dns
chrome://extensions/
chrome://history/
chrome://newtab
chrome://downloads/
chrome://about/
chrome://thumb/http://www.google.com/
chrome://favicon/http://www.google.com/
chrome://settings/advanced
chrome://net-internals/
chrome://appcache-internals/
chrome://view-http-cache/
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
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
JSONP 101
Definition:
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
JSONP
CORS (Cross-Origin Resource Sharing)
Flash
Example:
jQuery has supported JSONP. For details, see jQuery .ajax() API document, also there is a project on google code http://code.google.com/p/jquery-jsonp/ which is an alternative solution to jQuery's implementation of JSONP. The interface $.jsonp() is similar to $.ajax().
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
JSONP
CORS (Cross-Origin Resource Sharing)
Flash
Example:
<html>jQuery and JSONP
<head>
<title>JSONP Example</title>
</head>
<body>
<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>
<script>
function handleResponse(responseJson){
//alert(responseJson.status.text);
//alert(document.getElementById("id"));
document.getElementById("id").innerHTML = responseJson.status.text;
}
</script>
<script type="text/javascript"
src="http://twitter.com/users/cnnbrk.json?callback=handleResponse"></script>
</body>
</html>
jQuery has supported JSONP. For details, see jQuery .ajax() API document, also there is a project on google code http://code.google.com/p/jquery-jsonp/ 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 Sencha.io 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.
www.shrinkpictures.com/
www.resizeyourimage.com/
www.picresize.com/
resizepic.com/
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"/>
www.shrinkpictures.com/
www.resizeyourimage.com/
www.picresize.com/
resizepic.com/
and more ...
Sencha.io 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. Sencha.io Src sizes your images to the device that is requesting them, then caches and optimizes them for efficient repeat delivery.
Sencha.io Src API is very simple and ease of use. Just follow the documentation and remember the the full syntax of the Sencha.io API: http://src.sencha.io[/data][/family][/format][/width[/height]]/url
Sencha.io 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. Sencha.io Src sizes your images to the device that is requesting them, then caches and optimizes them for efficient repeat delivery.
Sencha.io Src API is very simple and ease of use. Just follow the documentation and remember the the full syntax of the Sencha.io API: http://src.sencha.io[/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%
http://src.sencha.io/83/http://g0.gstatic.com/ig/images/igoogle_logo_sm.png (4550, 83*28px)
http://src.sencha.io/x50/http://g0.gstatic.com/ig/images/igoogle_logo_sm.png (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
http://src.sencha.io/data/42/http://g0.gstatic.com/ig/images/igoogle_logo_sm.png
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"/>
Notes:
- width/height only accepts integer value
- Sencha.io 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
Subscribe to:
Posts (Atom)