HTML5 WebGL Demo : Lord of the Ring

Share

Here is a HTML5 Demo of ‘Lord of the Ring’ from Ayzenberg creative technology team. This demo is running on WebGL ( sorry no Ipad, Iphone, or other mobile devices that do not support webGL).

Please view using latest chrome and firefox.  Sorry Internet Explorer will not run WebGL at the moment  (If you are using safari browser, you need to turn on the developer mode + webgl mode to view; or you can simply use other browsers).

Click here to view the demo

HTML5 WebGL:  Lord of the Ring

Tony Lee | 2012

HTML5 WebGL Demo: Tony Lee

Share

Here is a HTML5 Demo of Tony Lee, from Ayzenberg creative technology team. This demo runs on WebGL ( sorry no Ipad, Iphone, or other mobile devices that do not support webGL).

Meshes of the 3d model was retouched through Maya, then translated into Json Object through Python script (credit: three.js utils).  There are total three different textures.  Once you are on the demo page, you can toggle through different textures by clicking anywhere on the browser.

Please view using latest chrome and firefox.  Sorry Internet Explorer will not run WebGL at the moment  (If you are using safari browser, you need to turn on the developer mode + webgl mode to view; or you can simply use other browsers).

Click here to view the demo
 

Export to HTML5 from Flash Professional

Share

If you are a hardcore flash animator or a flash developer in any level, this news will make you horny. Adobe is currently working on html5 export from Flash Professional.

Yes, there are few plugins or components for Flash Professionals that would export to HTML but this is different, very different.

Previous tools were privately developed and lacked financial support. Those components are janky and the code output to JavaScript is not editable by front-end JavaScript developers.

What’s the difference? Grant Skinner, the Flash Developer guru who is also known for his JavaScript libraries such as easel.js and tween.js, is working directly with Adobe Flash Professional team that would uses his library when exporting a project from Flash into HTML5. It uses canvas element (yes real html5, not some janky javascript stuff) along with his libraries makes the exported code fully editable. The exported javascript code is clean and well organized that it can be easily editable by javascript developers who does not know anything about flash even when you are not there.

Youtube Link

source:

http://www.flashstreamworks.com/2012/03/01/sneak-peek-export-to-html5-from-flash-professional/

FuelCMS login fails with localized user data [SOLVED]

Share

Introduction
We use the FuelCMS with a custom module for website translation management. After creating a series of logins for our translators, I realized that users with non-latin characters in the first_name and last_name field where unable to login. It appeared as if the password was incorrect.

The Cause
Since most of what we work on requires localization, all of the tables created for this project use utf8. Additionally, the database config is set to use utf8 and the page headers are set to use utf8. After backtracking a bit, I discovered the issue was the sessions table.After moving the website behind a load balancer we began using the database to maintain user sessions. The default session schema from the CodeIgniter documentation didn’t set the character set to utf8. This was causing CodeIgniter to fail when unserializing the user_data. In turn, causing the authentication to fail.

Solution
Set the character set in the sessions table. Replace your sessions table with the one below to resolve the issue.

CREATE TABLE `sessions` (
  `session_id` varchar(40) NOT NULL DEFAULT '0',
  `ip_address` varchar(16) NOT NULL DEFAULT '0',
  `user_agent` varchar(120) NOT NULL,
  `last_activity` int(10) unsigned NOT NULL DEFAULT '0',
  `user_data` longtext COLLATE utf8_unicode_ci,
  PRIMARY KEY (`session_id`),
  KEY `last_activity_idx` (`last_activity`) USING BTREE
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Image Optimization Tips

Share

Image Optimization Tools

Fireworks:
This is my personal technique that I have learned over the years.  You should try using fireworks when optimizing all kinds of image format.  Developers team from fireworks are not the same as Photoshop developers and their optimization engine is different.  You often get far better result in terms of reducing the number of file size.

For PNGs, you can select a 8bit with alpha transparency and specify the number of colors to include.  (8 bit = up to 256).

Smush.it
Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files.

Link: http://www.smushit.com/ysmush.it/

ImageOptim
ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations. ImageOptim provides GUI for various optimisation tools: AdvPNG from AdvanceCOMP, OptiPNG, Pngcrush, JpegOptim, jpegtran from libjpeg, Gifsicle and optionally PNGOUT. It’s excellent for publishing images on the web (easily shrinks images “Saved for Web” in Photoshop) and also useful for making Mac and iPhone applications smaller.

Link: http://imageoptim.pornel.net/

Find files by their content

Share

When Finder just isn’t cutting it, I always end up Google’ing for something else. During development I often leave a marker like “___AYZ_PLACEHOLDER___” in sections that I plan to do more work on. I have noticed that Finder doesn’t search all file types therefore not returning all my markers. Grep works great in these situations.

Example: Search for files containing “daniel” excluding .svn directories

grep --color=auto -iRnH 'daniel' ./ | grep -v .svn

FUEL CMS with a multi-database configuration

Share

In a recent project we implemented a MySQL master-slave replication configuration. We wanted all reads to be made on the slave and write to be made on the master. This was handled easily in CodeIgniter using the database groups and active_group in the database.php config file. I had some trouble figuring out how to elegantly achieve the same result in FUEL CMS. I found an article that pointed me in the right direction, but I didn’t like the idea of having to modify the core files.

After further investigation I realized FUEL CMS had the capability built in. The property ‘dsn’ of MY_Model can be used for setting an “alternative dsn value”. In my case, that means simply setting the database group name.

$db['master_db']['hostname'] = "db01.website.com";
$db['master_db']['username'] = "root";
$db['master_db']['password'] = "";
$db['master_db']['database'] = "database_name";
$db['master_db']['dbdriver'] = "mysql";

$db['slave_db']['hostname'] = "db02.website.com";
$db['slave_db']['username'] = "root";
$db['slave_db']['password'] = "";
$db['slave_db']['database'] = "database_name";
$db['slave_db']['dbdriver'] = "mysql";

$active_group = "slave_db";
class Foo_model extends Base_module_model {
   protected $dsn = 'master_db';
   function __construct(){}
}