Your time is limited. Don’t waste it living someone else’s life.

Because the people who are crazy enough to think they can change the world, are the ones who do.

Steve Jobs. Thank you.

Related Posts

• No Related Post

Query #1:

2

SELECT * FROM a, b WHERE a.b_id = b.id AND b.id > 0;

vs

Query #2:

2

SELECT * FROM a INNER JOIN b ON a.b_id = b.id AND b.id > 0;

1. Are they the same?
2. Do they produce the same result?
3. Which query runs faster?

Related Posts

• No Related Post

How to hide the status bar in Xcode 4? Amazingly, it is pretty straightforward.

1. In XCode, go to your project folder > supporting files > [project name]-Info.plist
2. Hover to the last line and click the “+” button to add another entry.
3. Enter the key field as “UIStatusBarHidden”. Once you’ve done that, it will change to “Status Bar is Initially Hidden”.
4. Enter the value field as “YES”.

Related Posts

• No Related Post

Reading the new edition of “Designing the Obvious” by Robert Hoekman, Jr has certainly led to many new insights about creating user interfaces.

Many of us have come to know the terms of “user centric design” (UCD). In UCD, designs are based on research on users. While these designs might create great designs, this approach presents a few fallbacks:

1. It takes a lot of time to perform a deep research on user’s behavior.
   Unfortunately, nowadays, it is not possible to perform a deep research because a project’s timespan is becoming shorter and shorter.
2. UCD uses a few personas to judge on how the design is going to look like.
   Persona descriptions are too broad. Several aspects of them might throw you off track rather than putting you on track.
3. Focusing on individual people (persona) might improve the things for them BUT at the cost of making worse for others.

So, what can we do? Activity centered design (ACD) – focused on the activities instead on the users. After all, what we are looking for in developing a design is what the people are doing and not who they are.

ACD in itself is also not particularly right because it is too self-focused on the activity without taking regards of the user.

While UCD is too general, ACD is too narrow. UCD looks too much at a person while ACD looks too little.

The other approach is Situation Centered Design (SCD). The applications we design are solutions to problems. Problems are situational. People are not. APplication design should start where situations can be aided by software. It’s situation-centered. And, if situations are the 5Ws, then the applicaiton is the H.

So, how can we do a SCD?

1. Self-design by immersing yourself in the situation.
   Immerse yourself in the situation. Put yourself in the situation.
   Ask yourself what kind of information you need for you to solve your current problems, where can you get them, why do you need them, who are affected, and when you need them.
   Adjust your app so that your app will be the “how” of the above answers.
   For instance, if you are on a weekend night and you are starving, what will you do? You will grab your phone and..
   - What you are looking for? Food, restaurants, cafe, etc.
   - What are the price? Cheap, expensive?
   - Where can I find them? Where are the locations of the restaurants.
   - Why should I choose this particular restaurant? Rating and reviews from other people!
   - When do I need them? Do these restaurants open at these hours?
   Then, the how?
   How can your app integrate them so that users can easily find the answers what they are looking for.
2. Other way is by observing other people.
   The observation has to be  done to people who HAVE BEEN in the situation. Remember, it is situation-centric and not user-centric.

#2 might take awhile to complete but it might give you a more complete understanding on how the situation is. However, doing #1 might be good enough.

Related Posts

• No Related Post

When submitting a form, we will usually get redirected to the “thank you” page. During this process, the header given out at the target page is 302 redirect.

So, what has this got to do with jQuery AJAX Call?

We might have used jQuery AJAX call to submit a form and this form redirects it to the thank you page.

For instance:

$.ajax({ 'type' : 'POST', data: data, url: 'submit.php', complete: function (xhr, status) { $('#content').html(xhr.responseText); });

where submit.php will redirect its page to thankyou.php.

However, when we tried using the above code, the page did get redirected, but the on complete function did not get called. So, $('#content') did not get updated.

To solve this, basically all we need is to add async: false to the ajax option. So, it will be like:

$.ajax({ 'type' : 'POST', data: data, url: 'submit.php', async: false, complete: function (xhr, status) { $('#content').html(xhr.responseText); });

~voila. The problem is fixed. Now, $('#content') gets updated correctly.

Related Posts

• No Related Post

We have recently found out that there is an alignment bug on the “Dialog” feature of jQuery UI on Google Chrome.

In the picture below, you notice that the Dialog window appears to be aligned on the left instead of in the center in Google Chrome.

It turns out that there is a quick fix around this. Simply add the following CSS style:

1

.ui-dialog { margin-left:auto; margin-right:auto; }

Basically, what it does, it will just set both left and right to be of equal values and thus, putting the Dialog back in the center! *Yippeee!*

Related Posts

• No Related Post

WordPress just released a Critical important security update to 3.0.4.

From their site, it seems that there is a bug in WP KSES HTML sanitation library that will allow XSS (Cross Site Scripting) vulnerabilities.

How urgent is it? Here’s a quote from the announcement:

I realize an update during the holidays is no fun, but this one is worth putting down the eggnog for. In the spirit of the holidays, consider helping your friends as well.

So, why wait, UPDATE NOW! O yeah, tell your friends, families, clients, and everyone who knows who is using WP.

PS: It is always a great idea to always keep your open-source software updated.

Related Posts

• Blogging as an Authoritative Source

When you invest on something, you will be happy when you receive a return on your investment. Right?

Same with your client. A client doesn’t just pay for your service or product. He / she invests something on you. Thus, it is clear that ROI is expected.

Until then, it is hard to imagine or conclude if he/she is happy.

Return on investment might mean:

• Save cost
• More income
• More productivity
• Positive branding
• And many others.

Focus on how you can use your product or service to bring ROI to your client, then you can expect a happy and return client (or even an ambassador to your business).

Related Posts

• No Related Post

In web design, it is important that you minify or compress your HTML web page for a faster load. Google Page Speed includes “Minify HTML” as one of the factors that contribute to a fast loading web page.

Fortunately, you can do this easily with CodeIgniter using Hooks. Learn more about CodeIgniter Hooks.

In order to minify HTML output, we need to do the following steps:

1. Enable hook on CodeIgniter:
   - Open up /system/application/config/config.php.
   - Set $config['enable_hooks'] = TRUE;
2. Create a hook file with the minify HTML:
   - Create a file Minifyhtml.php in /system/application/hooks/ folder.
   - Copy paste the following code:
   <?
class Minifyhtml {
function output()
{
$CI =& get_instance();
$buffer = $CI->output->get_output();$search = array(
'/\>[^\S ]+/s', //strip whitespaces after tags, except space
'/[^\S ]+\',
'<', '\\1' );
$buffer = preg_replace($search, $replace, $buffer); $CI->output->set_output($buffer);
$CI->output->_display();
}
}
?>

   Thanks to Jerome Jaglale at CodeIgniter Wiki for the Minify HTML code.
3. Setup your hook config file found at /system/application/config/hooks.php and enter the following code:
   
$hook['display_override'] = array(
'class' => 'Minifyhtml',
'function' => 'output',
'filename' => 'Minifyhtml.php',
'filepath' => 'hooks',
'params' => array()
);

   The above code basically tells CodeIgniter to do a different thing for the display_override (which is the hook to display the output). The code will tell CodeIgniter to find a file name called Minifyhtml.php in the folder /system/application/hooks/, find a class Minifyhtml and run the function output() as a substitute when running the display_override. Thus, it basically replaces the output with the minifyhtml function that we have created which takes in the output and produces the minified version.

There you go. A simple 5 minutes step that will help alot. Plus, if you don’t want to see the “minified” version of your HTML, you can simply turn the “hook” off in the config file.

Related Posts

• No Related Post

This is the third part of the Web Optimization series.

In the previous part, we have discussed that there are 3 different areas where you can optimize in a web design – backend area, frontend area, and in-between area.

In this article, we will go deeper into backend area optimization. When we say “backend”, we are referring to optimization related to what you can do within your server.

While there are many different ways to optimize your server or backend coding, we will cover 3 most common backend optimizations:

1. Optimize Your Database Queries and Server

For a dynamic database driven website, optimizing your database queries and server will greatly enhance your web design performance.

There are so many ways to optimize your SQL. Here are a few things:

• Optimize your query performance. Are you indexing the correct keys? Use EXPLAIN to understand on how your queries are executed.
• Setup slow-query log. Setup your database server to record any slow query so that you can optimize them later on.
• Tune your SQL server. The number of threads allowed, timeouts, memory size, etc. Fine tune your SQL server to fit your query executions behavior.

If you are using MySQL, learn more about MySQL optimizations.

2. Use memcached

Memcached is a general-purpose distributed memory caching system used to speed up dynamic database-driven websites by caching data and objects in RAM (Wikipedia). This reduces the number of times to read data from external sources such as a database and API. Reading from RAM / memory is much faster compared to accessing the data from other external sources.

If you are using the LAMP technology, you can easily follow the PHP memcache installation instruction.

A simple example usage of memcache with PHP and MySQL is as follow:

// connect to memcache
$memcache = new Memcache;
$memcache->connect('localhost', 11211) or die ("Could not connect");
// create a query
$sql = "SELECT * FROM schools WHERE state = 'WA'";
// check if result in memcache exists
$key = md5('mysql_query'.$sql);
$result = $memcache->get($key);
if($result == null) {
// if not, then run the query and store it
$qry = mysql_query($sql) or die(mysql_error()." : $sql");
if(mysql_num_rows($qry)> 0) {
$result = mysql_fetch_object($qry);
// this will store the data for 1 hour
$memcache->set($key,$result,0,3600);
}
}

From the above code, we are caching queries using memcache. Therefore, when the same query is called subsequently, the system will pull the data from the RAM / memory instead of running the query again. This reduces the processing time by retrieving the cached result.

3. ZIPPED IT!

Finally, before sending your output, compress them so that the data travels is smaller and faster. This reduces the bandwidth for everybody!

If you are running IIS, you can enable compression.

If you are on Apache, you can enable output compression with either mod_deflate or mod_gzip. You can do this by adding the following into your .htaccess file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>

Or, if you don’t have access to your .htaccess, you can use the following:

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

In this third part of Web Optimization series on web design, we learn how to optimize by optimizing our SQL queries and server, caching results and objects, and compressing the output. These actions will help to reduce the processing time as well as the size of the output. Hence, it will allow the web to load faster.

Related Posts

• 3 Areas to Optimize Your Web
• 3 Reasons for Optimizing Your Web