• Idea is similar to social bookmark. Instead of people posting links, they now can post products with their own comments and feelings associated with it.
• We need to make it very easy for people to add a product and share. That is the most critical element for this service.

• Once users add a product in their profile, they can easily share with their friends in facebook and twitter.
• Users need to categorize the products before sharing. But for Amazon products, we can automatically do it for them.
• If user is not using amazon and provide a regular url for a product, we crawl and list out all the photos on this landing page and ask users to pick one to represent the product.
• We also allow user to post their own picture for the product but we would suggest users to include links so their friends can get it if they want.
• Post price as well.

What motivate them to post products?

• Make it fun and users love to share stuffs with their friends.
• User can use this service to make their own virtual collections and show their friends what they own.
• They can earn social score that can be rewarded somehow down the line.

Why don’t user use the facebook to do that?

• Wall moves fast and soon the picture you post is gone.
• Wall is not organized it well. Now they use timeline, it is not for products. We need a catalog!
• People cannot perform product search

How we make money out from it?

• We manipulate the url user post to include our affiliate id for the products that can be found in our affiliate network like Amazon. This way each users doing a post is like our sales and marketing agent that helps us to drive income.

Steps to follow

1. Download and install MAMP (comes with Apache, MySQL and PHP)
2. Edit your hosts file
3. Download WordPress and set up virtualhost in apache that points to it.
4. Edit your wp-config.php file
5. Download Coda and import WordPress mode for auto-completion for wordpress syntax.

Code auto-completion for wordpress syntax

http://hitchhackerguide.com/2011/02/18/wordpress-syntax-mode-for-panic-coda/

How to use the post metadata?

To use this metadata, you need to know how to pull them out. Below is what you can do:

//single value

<?php echo get_post_meta($post->ID, 'key', true); ?>

//multiple values
<?php $songs = get_post_meta($post->ID, 'songs', false); ?>
<h3>This post is inspired by:</h3>
<ul>
  <?php foreach($songs as $song) {
      echo '<li>'.$song.'</li>';
    } ?>
</ul>
?>

Now you know how to get this metadata out from database. What can you do about this metadata? To get some ideas, you can look into a powerful plugins like Yoast’s WordPress SEO. It uses the custom fields to manage the html meta for SEO purpose. Many powerful frameworks like Genesis, Headway, iThemes are also utilizing custom fields to control different single post layouts. Here are other ideas:

• Only Display Posts with a Specific Custom Field
• Display the Digg Button only when the custom field is present
• Rewrite Guest Author’s name with Custom Fields (need add_filter)

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );

function guest_author_name( $name ) {
   global $post;
   $author = get_post_meta( $post->ID, 'guest-author', true );
   if ( $author )
     $name = $author;
   return $name;
}

• Custom sidebar. Replace “<?php get_sidebar(); ?>” in  page.php or single.php with the following code:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

How to build a custom write panel?

In fact, there are more and more plugins and frameworks are using custom fields to extend the power of wordpress. Imagine if you need to use custom field panel in post to manage all those custom fields, you may spend days to write a post. So, many plugin and framework designers are now using custom write panel to hide this from us in order to make our lives easier.

What is wordpress shortcodes?

The best way to show you the power of wordpress shortcode is to give you some examples.

Amazon ProductPrice Change HistoryFollow

Apple iPad 2 Tablet (16GB, Wifi,) NEWEST MODEL

$499.00

3rd party new price

• Feb 04, 2012 02:33 PM – $512.00
• Feb 04, 2012 09:55 AM – $500.00
• Feb 03, 2012 07:28 PM – $512.00
• Feb 03, 2012 02:06 PM – $521.00
• Feb 03, 2012 07:41 AM – $508.00
• Feb 03, 2012 03:06 AM – $499.98
• Feb 02, 2012 04:56 PM – $508.00
• Feb 02, 2012 11:55 AM – $499.95
• Feb 01, 2012 09:12 PM – $499.00
• Feb 01, 2012 03:58 PM – $495.99

3rd party used price

• Feb 04, 2012 02:33 PM – $425.00
• Feb 03, 2012 07:28 PM – $424.75
• Feb 02, 2012 10:35 PM – $429.99
• Feb 02, 2012 11:55 AM – $419.99
• Feb 01, 2012 09:12 PM – $429.75
• Feb 01, 2012 03:58 PM – $415.00
• Feb 01, 2012 11:18 AM – $399.00
• Feb 01, 2012 02:01 AM – $410.00
• Jan 31, 2012 09:32 PM – $399.00
• Jan 31, 2012 04:58 PM – $390.00

• 

  satoru__t satoru__t

  iPad2を手に入れた。※会社から支給された。

  19 seconds ago reply retweet favorite
• 

  LonFusha4173 Lon Fusha

  @Tea_bieberNce Get a free iPad 2 on us ..xoh.me/winipad2 !

  23 seconds ago reply retweet favorite
• 

  Ed_rasta Eduardo Ablan

  RT @ChinoyNacho: RT @CompraEnUSA: Aprovecha y GANATE UN IPAD 2 ! :) –> Solo síguenos @CompraEnUSA y dinos #YoQuieroElIpad2 por qué debe ser tuyo !…

  24 seconds ago reply retweet favorite
• 

  AldoPlouffe4516 Aldo Plouffe

  @SofiBelieber99 Get a free iPad 2 on us ..xoh.me/winipad2 !

  30 seconds ago reply retweet favorite
• 

  AlanMoore21 AlanMoore

  Buy Dual Electronics XGPS150A Universal Bluetooth GPS Receiver for iPad 2, iPad, iPod touch, iPhone and Other Smart t.co/MNOWMCLo

  31 seconds ago reply retweet favorite
• 

  AjiPrasetyo4 Aji Prasetyo

  @blink_clothesID Menangkan iPad 2 & ratusan hadiah lainnya dgn total 50jt!, Info lbh lanjut : t.co/mfvXdQNA

  38 seconds ago reply retweet favorite
• 

  CoryPluck1705 Cory Pluck

  @tutibieber1 Get a free iPad 2 on us ..xoh.me/winipad2 !

  45 seconds ago reply retweet favorite
• 

  gfhofg Jay Womack

  Griffin Technology PowerJolt Plus 2 amp Power Charger for iPad, iPhone and iPod (Black) t.co/jpcwuLbT

  46 seconds ago reply retweet favorite
• 

  EdgarMccomb1618 Edgar Mccomb

  @KTFNJ Get a free iPad 2 on us ..xoh.me/winipad2 !

  49 seconds ago reply retweet favorite
• 

  FranklynFenney7 Franklyn Fenney

  @Daniidejustin Well you can get a free iPad 2 at ..xoh.me/winipad2 !

  53 seconds ago reply retweet favorite

The widget above is created purely using wordpress shortcodes. See the code below:

[tabs style="default" title="Wordpress shortcode demo"]
   [tab title="Amazon Product"] [amazon asin="B0047DVWLW" template="Simple Ad Unit"][/tab]
   [tab title="Facebook Comments"]
      [rsstag url=http://camelcamelcamel.com/product/B0047DVWLW/new.xml]
      [rsstag url=http://camelcamelcamel.com/product/B0047DVWLW/used.xml]
   [/tab]
   [tab title="Follow"] [twitter_stream search="ipad 2"] [/tab]
[/tabs]

Shortcode in Template

If you are creating a product detail page, you can open your wordpress editor to type in the shortcode like above. However, if you have quit a bit of products, this process will be very tedious. If you are a tech person, you could create a script to load your products’ content into wordpress database’s post table. But if you want to use wordpress as the data entry UI, you can create a product detail template that leverages the shortcodes using the specific method below:

<?php echo do_shortcode("[shortcode]"); ?>

You can also use shortcode dynamically based on the custom field setting like below:

<?php
if(get_post_meta($post->ID, 'gallery', true)) {
    $shortcode = get_post_meta($post->ID, 'gallery', true);
    echo do_shortcode("$shortcode");
 }
 else { echo ''; }
?>

How to create your own wordpress shortcodes?

There are times you cannot find any shortcode that fits your need exactly. Two things you can do:

1. Customize an existing one from other plugin.
2. Build one from scratch yourself.

However, both require you to have good understanding how shortcodes work behind the scene. Don’t worry. It is not that difficult if you have a little bit of coding skill. To define your own wordpress shortcode, you first write a function of what you want the shortcode to do. Then you register the function via add_shortcode(tagName, functionName). Here is an example to define the shortcode name bartag with attribute foo. The extract method below taking the return of another function shortcode_atts that is used to define the default attribute value(s). If an attribute is not in this default list, it will not even be interpreted.

// [bartag foo="foo-value"]
  function bartag_func( $atts ) {
     extract( shortcode_atts( array(
        'foo' => 'something',
        'bar' => 'something else',
     ), $atts ) );
    return "foo = {$foo}";
  }
  add_shortcode( 'bartag', 'bartag_func' );

Now you have an good idea how to define a function. Here we are going to create a shortcode to make Google chart creation easier (ie. no need to remember the parameters and url).

Creating a Google chart is quite simple, you just need to simply define a url under “img” will do the magic. However, the url uses some short parameters that you may need to look them up in order to create the url correctly. To make it easier, we create the shortcode above to make the parameters more explicit and hide the google url for you. With this shortcode, now you can create a sparkline chart as following.

function chart_shortcode( $atts ) {
   extract(shortcode_atts(array(
     'data' => '',
     'colors' => '',
     'size' => '400x200',
     'bg' => 'ffffff',
     'title' => '',
     'labels' => '',
     'advanced' => '',
     'type' => 'pie'
   ), $atts));

switch ($type) {
case 'line' :
   $charttype = 'lc'; break;
case 'xyline' :
   $charttype = 'lxy'; break;
case 'sparkline' :
   $charttype = 'ls'; break;
case 'meter' :
   $charttype = 'gom'; break;
case 'scatter' :
   $charttype = 's'; break;
case 'venn' :
   $charttype = 'v'; break;
case 'pie' :
   $charttype = 'p3'; break;
case 'pie2d' :
   $charttype = 'p'; break;
default :
   $charttype = $type;
break;
}

if ($title) $string .= '&chtt='.$title.'';
if ($labels) $string .= '&chl='.$labels.'';
if ($colors) $string .= '&chco='.$colors.'';
$string .= '&chs='.$size.'';
$string .= '&chd=t:'.$data.'';
$string .= '&chf='.$bg.'';

return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_shortcode');

After you write this code, save it under plugin file named google-chart.php and put the following header above the function.

<?php
/**
* @package Google Chart
* @version 1.0
*/
/*
Plugin Name: Google Chart Shortcode
Plugin URI:
Description: This is google chart shortcode plugin
Author: Raymond Hon
Version: 1.0
Author URI: http://www.solutionhacker.com
*/

...

</php>

Then you can activate this plugin in WordPress. If it is activated, you can put the following wordpress shortcode in your post and generate the chart as below:

[chart data="0,12,24,26,32,64,54,24,22,20,8,2,0,0,3" bg="F7F9FA" size="200x100" type="sparkline"]

When wordpress shortcode meets custom fields in post

Congratulation! If you follow my tutorial above, you have just equipped the key skill that can take your wordpress website to the next level.  However, I am not going to stop here. I would like to show you how you can use shortcode with custom field. First, you can write a shortcode to extract custom field value and use it in your post. To do that, you can build a plugin following the code below:

add_shortcode('field', 'shortcode_field');
function shortcode_field($atts){
     extract(shortcode_atts(array(
                  'post_id' => NULL,
               ), $atts));
  if(!isset($atts[0])) return;
       $field = esc_attr($atts[0]);
       global $post;
       $post_id = (NULL === $post_id) ? $post->ID : $post_id;
       return get_post_meta($post_id, $field, true);
}

Once you can extract the custom field from post using shortcode, you can use it for UI and/ or post content.

1. Promote encapsulation and data hiding
2. Expose clean API and achieve high decoupling and in turn promote reusability. So, modules can be developed in parallel and fix in isolation.
3. Achieved in Java by access control (public, protected, package-private, private). Top level (non-nested) class can only be package-private and private. Public imposes maintenance cost! Once your API public or protected access, you must support it.
4. If a class A is only used by one class B, consider to make A private nested class of B.
5. Instance fields should never be public. Public mutable field is not thread-safe whereas public immutable field limits you from changing data type. Even you expose constant value, make sure it is public static final on a primitive or on a reference to an immutable object. NOTE: Array is mutable. Use immutable List instead.
6. There is one rule that restricts your ability to reduce accessibility of methods. If a method overrides a superclass method, it is not permitted to have a lower access level in the subclass.

Code Against Interface

Promote Immutability

1. Make its properties private and final
2. Take away any API that can change its properties
3. Make your class "final" to prevent subclassing.
4. Immutable object can be shared and thread-safe

Favor Composition over Inheritance

1. It is safe to use inheritance within a package but not cross package
2. It is also safe to use inheritance when extending classes specifically designed and documented for extension.
3. Interface inheritance is good. The above rules apply to implementation inheritance b/c it will violate encapsulation as subclass depends on implementation details of its superclass and superclass may change from release to release. Sometimes, superclass may break your security rules that you impose on the subclass. To avoid those problems as a whole, use composition. Along with forwarding class, the design is clean.

Scalability vs Performance

Performance measures whether an application can respond to a request within its defined service-level agreement (SLA). Scalability measures how well an application can maintain its performance under increasing load.

1. Horizontal scaling – To scale your system horizontally, the key problem you need to solve is how to replicate the state effectively. Serialization is primitive as it will replicate the full state (can be big) even one small field is changed. This approach's inefficiency hinders linear scalability. To overcome the limitations of Java serialization, Terracotta uses bytecode instrumentation (BCI) in the Terracotta client to identify the exact properties within stateful objects that change and then replicate only those properties across the cluster (fine-grained replication). Bytecode instrumentation is a process through which an application's behavior can be modified at runtime. NOTE: Bytecode instrumentation is a process through which an application's behavior can be modified at runtime. Terracotta uses BCI to intercept changes made to objects so that it can identify those changes and send them to the Terracotta server (hmm, it is not purely peer to peer approach).

Class and ID Selector

/* The difference between an ID and a class is that an ID can be used to identify
one element, whereas a class can be used to identify more than one. */

/* class selector */
.intro

/* id selector*/
#top

/* built-in html element (no need to put symbol) */
p

/* locate specific element – paragraph with class=jam
   (for example <p class=jam>xxx</p>) */
p.jam {xxxx} 

/* apply grouping */
h2, .thisClass, .thatClass {…}

/* nested selector */
#top{…}
#top h1{…}

/* state of an element (ex. link) */
a.snowman:link
a.snowman:visited
a.snowman:active
a.snowman:hover

/* shorthand : margin, padding, border-width where th
p {
    border-top-width: 1px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 20px;
}

//can be
p {
    border-width: 1px 5px 10px 20px;
}

//border-width, border-color and border-style shorthand
p {
    border: 1px red solid;
}

margin: 1em 10em; // top/bottom = 1em, left/right = 10em

//background-color, background-image, background-repeat, background-position
body {
    background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Box Model

All html tags/ elements in html can be think of within its own box/ container. And it can be aligned on the screen in accordance with the CSS box model. Here is the box model in diagram:

I keep forgetting where is margin and padding. So, I use the word "MBP" to help me out where M=margin, B=border, P=padding.

At the first glance, it is all about spacing between an element and its neighbors. However, when I see how creative people leverage negative margin. I think it is good to write about it. For margin like "margin: 0px -30px 0px 0px;",

Display Flow

Once you understand how the spacing of an element, you need to under the display flow. Block element (div, p, h1) will display in an newline while Inline element (span, a, img) will display without open up an newline. You can take an element out from its flow via explicitly setting its display properties: inline, block and none. "none" here means not showing it at all. The difference between "display:none" and "visibility:hidden" is "display:none" will take the element out from the flow, so it will not leave an empty space on screen. For example when you want to print an article, you want to just print its content. So, you will do:

#navigation, #seeAlso, #comments, #standards {
    display: none;
}

To take an element out from the display flow but still showing it, there are 2 common ways:

1. Floating
2. Positioning

I will cover these in the layout section.

Layout

margin: -30px 0 15px 0; (clockwise: top, right, bottom, left)
Imagine margin is like a photo white border that make your photo bigger in size and it is often enforced.
So, if a photo has margin inside a div like "right 50" and it is
floating right as well. Because external container doesn't moved by internal element, margin-right 50
will push the photo leftward by 50px instead. And -ve margin here will do the opposite.

When static element (ie. no float) is given a -ve margin on top, left, it pulls the element in that specified direction.
But for bottom and left, it doesn't move but move the content surrounding towards it (ie. overlap with it).

Possibility:
(1) use list to build a table
(2) Overlap to add emphasis
(3) Smashing 3D effect for Bevel text
(4) Layout – Flexible Document Structure

Using negative margins with floats sometimes pisses off older browsers. Some symptoms include:

    * Making links unclickable
    * Text becomes difficult to select
    * Tabbing any links disappears when you lose focus

Solution: Just add position:relative and it works!

Layout

Positioning

position has 4 options: absolute, relative, static and fixed

• absolute will take the element out from the flow and use top, left, buttom and left coordinate to locate it
• fixed did the same as absolute but it will not move even u scroll the browser.

Floating

floating an element will shift it to the right or left of a line, with surrounding content flowing around it. If you don't want the next element to wrap around the floating object, you can apply the clear property like: clear:left, clear:right and clear:both

@ Rules

/* attach a set of css to another css file */
@import url(xyz.css); 

/* apply its content to a specified media (ex. all, aural, handheld, print,
   projection, screen): IE just takes all, screen, print */
@media print{
    body {xxxx}
    …
}

/* embedded external font (not all browser supports it) */
@font-face {
    font-family: somerandomfontname;
    src: url(somefont.eot);
    font-weight: bold;
}

p {
    font-family: somerandomfontname;
    font-weight: bold;
}
 

Reference

ref: http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
ref: http://www.htmldog.com/guides/cssbeginner/
ref: http://www.htmldog.com/reference/cssproperties/
http://devzone.zend.com/article/627

• Persistence vs non-persistence web connection – web performance!
• Concerns of using cookie – security and size limitations
• Server side session management challenges in scalable web application
• Achieve linear scalability through stateless servers - start moving the session to the client

Today, I will start walking through all these topics at a high level. A series of articles will be written to further develop on each topic if necessary. Lets start!

Persistence vs non-persistence web connection

1. Before HTTP 1.1, HTTP is a stateless protocol that doesn't maintain persistence connection. Each request made by a Web browser, for an image, an HTML page, or other Web object, is made via a new connection.
2. HTTP 1.1 introduced persistence connection (ie. Keep-Alive) that Web browser can established a single connection, through which multiple requests could be made.
3. But before HTTP 1.1, how can state maintain across stateless HTTP request?
   • Normally, we keep the session in the server side and provide the session id to the client that can be used to link subsequent requests to the same session.
   • Normally, client (often time web client) will store the session id in cookie.
   • However, if the cookie is disabled, the session id will normally embedded in the URL (ie URL Rewriting).

Concerns of using cookie

What do we need to pay attention when we store info in cookie?

1. Size limitation and security concerns.
2. How long cookie can last? Default = expired when browser exits. In Java, you can do cookie.setMaxAge(int) with long future date if you want to keep the info lasting long in the cookie. If you do setMaxAge(0), it will void the cookie.
3. Normally, we don't keep all state info in cookie as the information could be sensitive and we are not able to protect it because it sits in the clients' filesystem. Apart from that, there has limitation in size as well. For these two concerns, we normally just store the session id in the cookie and keep the session in the server side. This approach can save us bandwidth as well.

Server side session management challenges

At the first glance, session in server side sounds like a great solution. However, when it comes to scale, it always raises the concerns. Imagine you need to replicate client session state across multiple servers to achieve high availability. Both the replication time and memory resource limit will cause your system not able to scale linearly. To solve or minimize this, we selectively pick what kind of info we store in the session, use sticky session to avoid one session replication across all the machine or even try to store the state to the client if possible like using rich client UI (ex. Flex and Silverlight). A post will be written about this topic later on.

Transient vs Persistent State

1. Session in the server can be timed out (~30 minute inactive)
2. Session in the server can be persisted in file across Tomcat restart.
3. Persistent state should be stored in database.
4. Object putting in session should be Serializable
5. Avoid putting too much info in the session b/c we don't want to put too much baggage during session replication. One server crash b/c of memory depletion can further spread across to other servers via session replication. Not Good! Should we reconsider storing session in client? This article talks about it.
6. Session replication is needed to support failover. Sticky session for simplicity but suffered data lost when the box is down. We can tell one or two servers as its backup to avoid the session lost. To go for sticky session approach, we need to identify the "sticky" part. What kind of thing we can use to link separate requests? Use IP address can potentially overload a box because some Internet service providers use a set of proxy servers to deal with many clients. This subject can be further developed. We will go back to it later!

Event Flow

The idea is simple. Here is the regular event flow: Users interact with the UI, event is generated, broadcast via the event dispatcher (bubbling up the display hierarchy if enabled) and captured by any registered listeners, and a set of actions is taken in response. To understand it a bit more in detailed, you can check this article and play with its demo. In short, under the hood, it has 3 phases: capturing, targeting and bubbling. In the display list, from the top, it always starts from Stage as the root, then SystemManager, then your Application. The event is created by the flash player and travel down from Stage to the target component and bubble it up back to Stage (if enabled). In this round trip, it will trigger the event listeners'  actions. Most components communicate with others using events which conveys useful information and data but only visual components (objects in the display list) can participate in the event flow described above.

in practice, you normally just need to worry about registering listener to the target component for a particular event propagated from it. You seldom need to understand the event flow above in detailed. However, if you want to exercise more control on the event like stopping the event from propagating, you need to understand how it works first.

Cancel/ Stop the event

Within Flex, by default, events only broadcast themselves to their parent component. If you want the event to broadcast to its parent's parent (and all the way up your component chain in the display object hierarchy), then you tell that event to bubble. If you don't want any component in chain cancels your event via stopPropagaton() or stopImmediatePropagation(), you can make it non-cancelable during event construction. The difference between stopPropagation and stopImmediatePropagation is that stopImmediatePropagation will not only prevent the event from moving to the next node, but it will also prevent any other listeners on that node from capturing their events.

Some events have an associated default behavior. For example, the doubleclick event has an associated default behavior that highlights the word under the mouse pointer at the time of the event. Your event listener can cancel this behavior by calling the preventDefault() method. 

Define your own Custom Event

Now you understand the event flow. Next, you need to know how to create a custom event to carry additional info. This article helps you to achieve this goal.

In fact, from his TOS, it stated clearly that the most important reason for Apple to ban Flash is because Apple doesn't want a third party layer of software come between the platform and the developer.

Allowing Flash — which is a development platform of its own — would just be too dangerous for Apple, a company that enjoys exerting total dominance over its hardware and the software that runs on it. Flash has evolved from being a mere animation player into a multimedia platform capable of running applications of its own. That means Flash would open a new door for application developers to get their software onto the iPhone: Just code them in Flash and put them on a web page. In so doing, Flash would divert business from the App Store, as well as enable publishers to distribute music, videos and movies that could compete with the iTunes Store – Brian on wired.com