Shwup

CSS Authoring: Less is more

2011-08-10T15:34:00.007+08:00

Introduction

Ever since CSS was first published many years ago to separate content from presentation its basic structure and "language" features have hardly changed. Tools such as Sass and Less aim to remedy some shortcomings, such as:

Variables - often you find yourself declaring the same dimensions or positions within your document (or even across documents), making it more difficult to change them later
Inheritance - nested rules require repetition of selectors, adding to the clutter
Operators - addition, subtraction and other functions can be helpful to add relationships between definitions

Making a choice

Both are great tools and make it easier for us developers to author CSS. Personally, I have chosen Less for a few reasons:

Existing CSS files are already valid Less files; though from 3.0.0 onwards, Sass now also supports this paradigm
Mixins don't necessarily have to be declared as such; they can be any #id, .class or element definition and are referenced by just their selector
Less stays closer to the CSS format, unlike Sass where conditions and loop structures are supported

Integration into Aptana

After selecting the right tool you will want to integrate this into your editing suite. This is not entirely trivial, so I've put together a guide for Aptana. The guide is geared towards a Windows installation, but should work fine on Linux with some tweaks.

Getting the stuff

You will need the command-line tool for Less, which you can get from their Github site. Download the zip and unpack it in a folder of your choice.

You also need Node.JS, which you can download from their site. Download the node.exe Windows executable and store it wherever you like.

Aptana modifications

First off, make .less files appear as CSS.

Go to Window > Preferences > General > Editors > File Associations
Click 'Add...'
Enter '*.less' and click 'OK'
Under 'Associated editors:' click 'Add...'
Select 'CSS Source Editor' and click 'OK'

Create a few string substitution variables (optional)

Go to Window > Preferences > Run/Debug > String Substitution
Click 'New...'
Enter the absolute filename of node.exe and name it 'nodejs_path'; click 'OK' when done
Repeat the last two steps for the installation path of 'lessc'; Note - because of NodeJS you need to use CYGWIN paths (e.g. /cygdrive/d/less/bin/lessc)

Now we can do the integration:

Go to Run > External Tools > External Tools Configurations...
Select 'Program' and follow the instructions to create a new configuration
Under 'Location:' specify the Node.JS installation path: ${nodejs_path}
As 'Working Directory:' set the path to the containing path of the current selection: ${container_loc}
For 'Arguments:' use this: ${lessc_path} "{$selected_resource_name}"
Open tab 'Common' and look for 'File:'; the value should be: ${selected_resource_loc}.css
When everything runs well, you can uncheck 'Allocate Console' here as well

That's it! Once you're done, you can run the tool from the toolbar and it will create a new file in the same folder with a .css extension.

jQuery outerHTML

2011-01-07T12:43:00.008+08:00

Since most of our code is based on jQuery, I was tasked to find a way to retrieve and modify an element's HTML contents.

Normally I would use html() for this purpose, but in this case I needed to operate on the HTML including the surrounding element, the so called outer HTML.

During my search for an efficient outerHTML() solution I found a few interesting sources that I eventually turned into a workable solution; here it is:

$.fn.extend({
	outerHTML: function(htmlString)
	{
		if (htmlString) {
			return this.replaceWith(htmlString);
		}

		if ('outerHTML' in this[0]) {
			return this[0].outerHTML;
		}

		return (function(element) {
			var attrs = element.attributes,
			i = 0,
			n = attrs.length,
			name = element.nodeName.toLowerCase(),
			attrlist = '';

			for (; i != n; ++i) {
				attrlist += ' ' + attrs[i].name + '="' + attrs[i].value + '"';
			}
			return '<' + name + attrlist + '>' + element.innerHTML + '</' + name + '>';
		}(this[0]));
	}
});

It combines the use of the relatively new replaceWith() and the outerHTML property (which doesn't work in Firefox). The last resort is by wrapping the element up, selecting the wrapper and call html() on that.

Update 11-Aug-2011: replaced with something friendlier than using .clone() - it can also be found here: http://codepad.org/g710npMF

Arrays in SOAP

2010-11-30T13:45:00.005+08:00

PHP exposes a great SOAP client to consume remote services, taking away much of the complexities involved in constructing your requests and deciphering the responses; it particularly shines when used in WSDL mode.

However, in the case of single element arrays, it doesn't work as expected. It will return an object instead. For instance, considering the following SOAP declaration:

<xsd:complexType name="ArrayOfEmailAddressDetails">
<xsd:sequence>
<xsd:element maxOccurs="unbounded" minOccurs="0" name="EmailAddressDetails" nillable="true" type="ns4:EmailAddressDetails"/>
</xsd:sequence>
</xsd:complexType>

It defines an array using xsd:sequence and a field with 'maxOccurs' set to 'unbounded'. When translated into PHP it becomes the following by default:

stdClass Object
(
    [EmailAddressDetails] => Shenton_Type_Email Object
    (
        [isDefault] => 1
        [type] => HOME
        [value] => tjerk@shentontest2.ben.muveenet
        [isConfirmed] => 1
    )
)

This is probably not what you want. You can work around this problem in two ways:

Use the 'SOAP_SINGLE_ELEMENT_ARRAYS' option:

$client = new SoapClient('http://www.example.com', array(
    'features' => SOAP_SINGLE_ELEMENT_ARRAYS,
));

Use a function to force the response into an array:

function forceList($obj, $prop)
{
    $r = &$obj->$prop;
    return isset($r)?is_array($r)?$r:array($r):array();
}

Passing arrays to JavaScript

2010-06-03T10:45:00.007+08:00

The accepted standard way of passing any data to JavaScript is via json_encode(); this ensures proper encoding is applied when it's decoded on the other end. Handling arrays is not much different, except that the amount of data getting sent isn't always expected. For instance, take the example of a standard array:

echo json_encode(array(1,2,3));

Output:

[1,2,3]

Short and sweet huh? Now let's try a multi-dimensional array:

$row = array('a'=>1, 'b'=>2, 'c'=>3);
echo json_encode(array(
  $row,
  $row,
));

Output:

[{"a":1,"b":2,"c":3},{"a":1,"b":2,"c":3}]

Even though two rows with the same keys are inserted, it will repeat them nonetheless; this is of course excepted behaviour, but it causes a measurable overhead in terms of data size when used to send across lists of records that all share the same field names.

Solutions

Use indexes instead of keys -- though this will solve the data size issue, the receiving end needs to be aware of the field positions; this can be somewhat overcome by declaring variables in JavaScript to keep track of them. Use one-letter keys -- not as good as using indexes in terms of data size and due to the nature of very short key names, it's easy to forget the meaning of each.

Introducing FixedArray

Using the following small helper class in PHP it's possible to achieve both objectives of having a small data size and yet being able to use descriptive key names.


<?php

class FixedArray implements Countable
{
    private $_h = array();

    public $h = array();
    public $i = array();

    function count()
    {
        return count($this->i);
    }

    function push(array $hash)
    {
        if (!count($this->_h)) {
            $this->_h = array_flip($this->h = array_keys($hash));
        }
        $this->i[] = array_values(array_intersect_key($hash, $this->_h));
    }
}

?>

Usage

Let's go back to the previous example and rewrite it using FixedArray:

$row = array('a'=>1, 'b'=>2, 'c'=>3);
$list = new FixedArray;
$list->push($row);
$list->push($row);
echo json_encode($list);

Output:

{"h":["a","b","c"],"i":[[1,2,3],[1,2,3]]}

The output has two parts; a header indicated by 'h' and a data part indicated by 'i'. Adding more records would only add to 'i' thus saving 12 bytes per record for this example.

Decoding

The FixedArray needs a decoder on the JavaSript side; this one is based on jQuery:

$.decodeFixedArray = function(data) {
  var h = data.h, n = h.length
  return $.map(data.i, function(item) {
    var hash = {}
    var idx = n
    while (idx--) {
      hash[h[idx]] = item[idx]
    }
    return hash
  })
}

May '10 release

2010-05-31T15:22:00.002+08:00

Last week we launched a point release while working towards the next version. This release fixes bugs that were reported by our users and some other improvements and features. Have you ever wanted to download a DVD of a single muvee uploaded with muvee Reveal? Now you can! While viewing the muvee on the website, the right panel will show a link to download an ISO image of the muvee. When you burn this image on an empty DVD you can play it on any standard DVD player in the house, not just your PC! It's priced at only $1.95 In the invitation page we're now using delegated authentication for Google Mail, Yahoo and Windows Live. This means that when you're importing your contacts, you will be directed to the respective service provider to grant us access to read your contact list for a limited amount of time. Soon, AOL will be migrated as well, so that you never have to give us your e-mail password again. Some users have experienced some problems inviting their friends into the album. They may not have noticed that it's required to verify your e-mail address before any invitations are sent out; bounced emails are the other problem. Now, invitations that have not been sent due to above reasons are now highlighted in red and accompanied by suggestions on how to resolve it. Others may have experienced that loading their homepage can take a long time; we have managed to speed this up dramatically, only causing a slow-down on your first visit after the launch.

About constants

2010-04-03T12:20:00.007+08:00

Every project, small or big, has some configuration in the form of keys and their associated values, commonly defined using constants. These configuration settings normally get loaded upon each request, making them a good target for optimizations.

The contenders

By default, PHP supports defines and class constants, but extensions such as APC and hidef can give you a better performance if enabled. The APC extension has a function to define constants using an array, called apc_define_constants(). The hidef extension is different, it reads the constants from a set of files during PHP initialization; this makes the constants available at compile time for immediate substitution.

Setup

To test the four aforementioned methods, I've chosen a simple set of operations using the most commonly used types of constants: integers, strings and doubles. The script would then run those operations in a tight loop for a fixed number of iterations and record CPU time and memory consumption. Lastly, the APC extension is not being used as an opcode cache for this test. The outcome reveal that the define() method yields the longest running time while class constants method yields the higher memory consumption; the results of those methods are therefore used as the benchmarks for the other results.

Performance results

Test performed	Time spent	Memory consumed
Using define()	100%	32.6%
Using class constants	30.2%	100%
Using apc_define_constants()	24.2%	32.0%
Using hidef	13.9%	13.5% (*)

(*) hidef consumes memory during initialization, but this was not taken into account for this test

Analysis

The clear winner of this test is the hidef extension; upon initialization it creates constants that are both persistent and available during the compilation phase. The results opcode is superior to any of the other methods described above. However, all this goodness comes with a drawback: configuration settings are instance wide, which impacts all setups of PHP that runs beyond a single web request (e.g. Apache module or FastCGI). Using apc_define_constants() is a good runner up in terms of performance (6% faster than class constants) and memory consumption (comparable to using define). It uses optimized code to create constants, speeding it up threefold. Some people may still use eAccelerator and/or Zend Optimizer, but APC is much more actively developed and has additional features to work with variable caching (like Memcached but only server wide). And it will be integral part in the upcoming PHP6 (or whatever they're going to call it). In the bottom two we still see a substantial difference in execution time between class constants and using define(). Using class constants has the benefit of being available during execution time, which makes it a prime candidate for further optimization using APC. However, the OO nature of this method has two drawbacks: resolving the constant still needs to take place during run-time and there's more memory consumed (at least three times that of the runner up).

Conclusion

If you're only running one site per web server instance or you can namespace your constants, choose hidef. If you're already using the APC extension or interested in doing so, choose apc_define_constants(). If you don't mind the extra memory consumption to yield 300% CPU time improvements, choose class constants.

The design chain reaction

2010-02-10T07:48:00.002+08:00

Yesterday's release also initiated a design overhaul process to improve user experience. The first goal was to group all media related actions right next to the item you're viewing, actions such as tag, rotate, share, etc. After moving the media actions we realized that the album toolbar had more empty space to enlarge the navigation tool (the drag bar to seek into your album). The second goal was introduced when we were working on a feature to show the camera details; we realized that due to our chunky boxes we were wasting precious space that could be better utilized. So we went ahead and made a more dynamic interface, whereby you can choose to collapse or expand certain sections. We're looking forward to making more changes to the album page design, all suggestions are welcome ;-)

Invite the world!

2010-02-09T22:03:00.002+08:00

We've had many requests from our users asking how to share their album with either a large group of friends (of whom you're bound to miss a few) or a group of people you may not even know (e.g. users from a forum or newsgroup). With the introduction of viewers in last year's release we are now able to present the next major feature in line; album sharing. So how does it work? Simple! Visit an album you wish to share with others and click "Share album" from the top menu bar; the system will then generate a link that you can share with Facebook, Twitter or via e-mail. People who follow the link just have to leave their contact details behind so that you know who is visiting your albums. They can comment on your photos and videos, but won't be able to do anything else. You can give more permissions to any of these users by clicking on their name in the member list and selecting "Make this member a co-host". Did your link end up in the wrong hands? No problem, just click "Share album" and then "Unshare album"; confirm your action and the link has been deactivated. You can then remove any offending members from the album to make sure they won't come in again.

Facebook changes

2010-02-09T21:34:00.005+08:00

Last year we introduced Facebook integration on our site; ever since, we have been trying to make the experience as smooth as possible - which is not always straightforward as Facebook is going through quite a few changes in the next few months. One of those efforts has gone into simplifying the way you visit shwup albums by following invites from other Facebook friends. In the past you would have to make your way through the front door so to speak, whereas now you simply connect via your Facebook account in just a few steps. At the same time we have been looking into making communication with Facebook users easier; recently Facebook launched a feature to get in touch with our users more easily via direct email. Today we have implemented this on shwup and we're confident that this will make the user experience better. It's not all good news for us, as Facebook is also taking away certain features that we were using before; the notifications mechanism. So temporarily we're sending Facebook invites via wall-to-wall communications; the new upcoming feature - Inbox - will soon take its place. The invitations, albeit visible to more users, are still as private as before; there's no way someone else can take advantage of the personal invitations.

end of year release

2009-12-30T18:21:00.004+08:00

I'm happy to announce the last point release of shwup.com for this year! We made just a few changes, but we think they're worth it for all those photos and video you're going to upload in the new year ;-) The major change is that we've changed the way media titles are shown and updated. After a good look at the current page design we realized that showing the titles at the top of the page wasn't that great; therefore, we now show them in a more logical spot: underneath the photo. Editing the title is easy, click the title and a textbox will allow you to change it; pressing Enter or clicking outside the text area automatically saves the new title. Yet another change was made to the kiosk mode that was mentioned in my last post. In the new design we aimed to make the control box smaller and prettier. Hope we did a good job, enjoy your slide shows (and don't forget to press F11). Some improvements on the presentation of our muvees as well, as we noticed that most muvees are hard to distinguish from each other. Instead of showing the first frame of each muvee we show one of the media that was used to make it. Let us know your feedback on this. We hope that you will continue to use shwup and convince all your friends that they should give it a shot ;-) See you in the next year!!

Dirty your F11 keys

2009-12-16T17:23:00.002+08:00

Last week, after deploying our friend clamper feature we figured that we could squeeze in one more release before Christmas to keep in the spirit of giving. We've improved our kiosk mode feature, which appears when you click "Start slideshow" or "Full screen" in the album page. The chunky white borders are gone and all the control buttons are now in one place, positioned at the bottom right corner of your browser window. For the best experience it's advised to switch your browser to kiosk mode (for most browsers, by pressing F11); this will maximize the available space to show your photos and videos to the fullest. When you stop moving your mouse for 5 seconds the control bar in the bottom right corner will automatically disappear as well. We hope you enjoy this improved feature ;-) Merry Christmas from the shwup team~!

Put the clamps on your friends

2009-12-08T16:29:00.003+08:00

Ever invited your goofy photographer friends into your album, only to see your collection of carefully crafted compositions get tainted by their trigger happy, underexposed, dubiously angled or simply unrelated shots? Now you can safely invite them into an album without the permission to upload, invite, share or tag. We thought it'd be fair to still allow them to comment on your nice photos and videos. The option can be found on the invite page as well as inside the tagging feature. Check it out! This has been a highly requested feature, so we're happy to know your comments and/or suggestions to make it even better; a simple "good job" comment is also welcome of course ;-)

jQuery conditions

2009-11-21T11:33:00.002+08:00

One of the powers of jQuery lies in its ability to chain actions on a set of elements. Sometimes, the chain needs to be interrupted to apply specific actions based on a condition. For instance, when you construct menu items on-the-fly, you may want to apply a CSS class or add child nodes for a few of those items. Introducing the doif() extension:

$('<li />')
  .text('menu item #1')
  .doif(my_condition)
    .addClass('selected')
    .end()
  .appendTo(menu)

All conditional statements start with doif(<condition>) and stop with end(), just like how all the other "destructive" jQuery operations work. And here's the internal code:

(function($){
  $.fn.doif = function(cond)
  {
    return this.pushStack(cond?this:[]);
  }
})(jQuery);

We're liking it

2009-10-28T21:14:00.002+08:00

The last few weeks were spent hunched over new designs and features we wanted to introduce in the near future, hopefully in time for Christmas. As a result, not much actual development was done despite many suggestions from our respected users. However, over the last week or so we have managed to get a few new features in: * Like it - a feature that allows users to indicate photos or videos that they like; in future we will also allow filtering based on this rating so that you can make muvees with only the best material ;-) * Date changer - manually update the date at which a photo or video was taken from the view mode; in future we also want to offer our users a batch update mode to change the date of more than photo or video at a time. * Facebook updates - the Facebook Connect feature looks nicer now ;-) In the meantime we've also fixed a few bugs here and there, such as Windows Live and Gmail contacts import. Another update will be scheduled in a few weeks, hopefully with more changes! And keep that feedback coming ;-)

IE6: we don't like you no more

2009-10-27T12:07:00.003+08:00

IE6 is really a developer nightmare: a large part of the time we spend building shwup, is used to address cross-browser issues, with IE6 taking the largest chunk of time. IE6 really is old technology. IE8 is now released, and there is a plethora of other modern browsers out there, such as Firefox 3.5, Safari, Opera, etc. For that reason, we will officially be dropping support for IE6, from January 2010. IE6 users (if we still have any by then) will probably be greeted with a message inviting them to upgrade their browser to access shwup.com .

Authorization header passing in Apache/FastCGI

2009-05-25T09:19:00.006+08:00

When PHP is running as an Apache module, any Authorization header is passed as HTTP_AUTHORIZATION inside $_SERVER; this, unfortunately, stops working when you switch to FastCGI.

The guys over at Best Host Ratings have a simple solution using mod_rewrite:

#Remove this part if you always have this module loaded
<Ifmodule !mod_rewrite.c>
LoadModule rewrite_module modules/mod_rewrite.so
<IfModule>
RewriteEngine on
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]

You can put this piece of configuration in your virtual host definitions or closer to where you really need it.

Paypal IPN issues with Unicode

2009-05-21T11:46:00.004+08:00

I've spent several hours today trying to figure out why I couldn't verify the IPN data I was receiving from Paypal. The code itself couldn't be easier:

return 'VERIFIED'==file_get_contents(
  'https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_notify-validate',
  false,
  stream_context_create(array(
    'http'=>array(
      'method'=>'POST',
      'header' => 'Content-Type: application/x-www-form-urlencoded',
      'content' => file_get_contents('php://input'),
    )
  ))
);

After reading Jacques' article regarding this issue, the source of my problems was easily found. As it turned out, the "Language Encoding" inside our profile page was miraculously set to "Chinese Simplified"; changing this to UTF-8 made the problem go away immediately.

Splitting a jquery object into 2

2009-05-14T17:16:00.003+08:00

In shwup, using jquery, we had to handle a few times situations where we need to apply some actions on some elements, and other actions to all other elements. Typically, you'd do it with a filter, and then the same filter in a not(). For example:

myJquery .filter(".important").css('background', 'red') .not(".important").css('background', 'yellow');

The duplication of the filter is very annoying. Here is a nice jQuery plugin that we are using, discovered last year on the jQuery mailing list in a post by Oliver:

$.fn.others = function() { return this.end().not(this); };

Now we can do:

myJquery .filter(".important").css('background', 'red') .others().css('background', 'yellow')

And that works regardless of the filter function used, including is() and not(). I recently had to implement shifting some elements of a jquery set ahead of all other elements. This is using a set of floating nodes, not attached to the DOM _yet_. Using the nice 'others' plugin, here is some code to do that:

var importants = myJquery.filter(".important"); myJquery = importants.add(importants.others());

Line continuation in JavaScript

2009-05-14T16:13:00.002+08:00

Due to the nature of the language parser in JavaScript, strings cannot span multiple lines by just starting with a quote (or double quote) and ending with another, like:

var s = "hello world";

Besides the normal ways around this (closing the string, appending a plus, opening the string), here's my recent favourite:

var s = "hello \ world";

The use of backslash is not standard compliant, though the following browsers definitely support it:

IE6/7
Google Chrome/Safari
Opera
Firefox 3

Fixing IE6 cache issues

2009-05-12T13:37:00.002+08:00

At the brink of our next release, we came across an interesting article regarding IE6 fixes that deal with image caching issues. More specifically, CSS background images in IE6 have the tendency to load, load again and maybe load one more time for good measure. On some of our pages this means dozens of requests for the dozens of images that are contained within. Debugging such pages in IE6 would take forever, and with our QA engineer temporarily cut off from her steady coffee supply ... well, you get the picture. Apparently this topic is well documented, which makes this post a bit shameful for not having found these articles before ;-) On the blog of Mister Pixel you can see how this fix utilizes a fairly unknown call inside IE:

document.ExecCommand("BackgroundImageCache", false, true)

Adding this command to the window load event makes IE6 load pages a lot faster and makes our servers happier ;-)

Creating horizontal rules using DIV

2009-05-04T18:10:00.006+08:00

Just a short post to illustrate how to create horizontal rules using DIV instead of HR; it requires some trickery, but it's easier to manage than styling HR elements, especially in IE browsers. One of the tricks is using "overflow: hidden" inside the container to get rid of IE6's default minimum height problems, using something like:

.hr { background:white; height:1px; margin:0 auto; padding:0; overflow:hidden; }

This will create a thin horizontal line occupying the full width of the parent container unless specified otherwise, using "width: 90%" or "margin: 0 5px" to define a relative width or a fixed margin on each side respectively.

Flash player upload issues on Mac

2009-04-28T11:51:00.004+08:00

The upload page on shwup used to be powered by Aurigma, a Java based tool that allows for multiple file selections and some other funky technical stuff. Since our last February release, we replaced this by our own custom uploader, written in Flash. From Flash player 8 onwards, file uploads are natively supported (albeit with some quirks regarding cookie passing in browsers other than IE and nasty security fixes from version 10 onwards). Together with the ExternalInterface, building a more powerful uploader tool was within our grasp. Within the first few weeks of deployment we received some feedback, predominantly from the Mac users, that the uploader simply wasn't working for them. Having no other means to upload files to shwup (other than via email) this was very painful for those users. So we went ahead with eliminating the differences:

use the same browser
use the same Flash player

This didn't pinpoint a particular client side issue that could be held responsible. However, performing the same tests on our test and staging environment didn't exhibit the same issue; it actually worked! Turning to the live server configuration it slowly became apparent that this problem was double sided; the combination of client platform and server configuration was causing some issue. To make sure our user's address bar always contains "www.shwup.com" when visiting our website we use mod_rewrite to redirect any requests without the proper address using the following rule: RewriteCond %{HTTP_HOST} !^www\.shwup\.com$ [NC] RewriteRule ^(.*)$ http://www.shwup.com$1 [R=301,QSA,L] We thought that this couldn't possibly cause an issue until we switched on the debug option; it became clear that Flash player was passing "www.shwup.com:80" as the HTTP Host header; obviously this breaks the above regular expression and causes a redirect after which the Flash player happily reports that the upload was done without issues. Funny enough, this only happens on the Mac. Some developers have already reported this issue on Adobe's file upload article. The following rule change fixed the issue: RewriteCond %{HTTP_HOST} !^www\.shwup\.com(:\d+)?$ [NC] RewriteRule ^(.*)$ http://www.shwup.com$1 [R=301,QSA,L] After spending this much time we can only say "assume nothing" when it comes to cross platform coding.

First post!

2009-04-27T16:26:00.000+08:00

Behind every site, popular or not so much, there are developers working hard to roll out features, perform bug fixes, monitoring critical processes, etc. Naturally most users only see the end product while we see the execution of object code that's carefully stacked on top of each other. Even a simple page can drive developers nuts trying to hide the quirks of antiquated and modern browsers alike; likewise, adding new features usually comes with interesting research processes and several incarnations before they're released in the wild. So what's better than to share some of those experiences with other developers, inside this plain looking blog. Stay tuned for the chronicles of the shwup developer!