jQuery foundamentals

Selector

Selector in jQuery works very much the same as that of CSS in regards of what you should type to select an element. In CSS, if a p a means selecting the element(s) under the

element. In jQuery, issuing the statement

$("p a")

has the same effect as that of CSS.

The syntax $( ) is an alias for the jQuery( ) function and acts to make a function call to jQuery core that will return a special JavaScript object containing an array of DOM elements, in the order in which they are defined within the document, that match the selector. $( ) comes with a huge set of methods that can be applied on the selected elements.

This kind of construct is called a wrapper because it wraps a set of elements and provides further functions. In jQuery, a wrapper is referred as jQuery wrapper or a wrapped set, and the methods associated with the wrapper function are called the wrapper methods.

There are some characteristics of jQuery wrappers:

• Most wrapper methods return the same set of elements that they have operated on for further operations. E.g. $("div.dummy").hide(); returns all found
  elements classed “dummy” for further manipulation after jQuery has hide(); them.
• The fact that a wrapper method normally returns the same set of elements for further operations means that a jQuery user can append methods endlessly to the same jQuery wrapper (i.e. a $("div.something")) to apply endless operations. This kind of function call is dubbed a jQuery chain. E.g. $("div.dummy").hide().addClass("removed");
• Although referenced as $("div.dummy"), a jQuery wrapper is still essentially a JavaScript object (a highly sophisticated one) and therefore can be treated as an array when necessary. E.g. the followings have the same effect:
  $("#someElement").html("Text here");
$("#someElement")[0].innerHTML = "Text here";

Paths in Photoshop

The Pen tool

The Rubber Band option

The Rubber Band option is located in the drop-down menu next to the Custom Shape Tool button in the property bar of the Pen tool. Enabling this options allows you to have a preview of how your paths look like before clicking to position the anchor.

Spring-loaded tools

Spring-loaded tools are hidden from the surface of the Pen tool and are activated through key combination. The combinations are:

Tools	Combination
Convert to Point	Alt while hovering over an anchor point
Direct Selection	Control + clicking the path
Path Selection	Control + Alt + clicking the path
Group Selection	Control + Alt while hovering over a path segment or anchor point

The Shape tool

The hidden advanced options of the Shape tool (U) can be activated by clicking the down arrow to the right of the Custom Shape tool. If you would like pixel-perfect result of a drawn shape, you should tick the Snap to Pixels option.

The Type tool

Photoshop doesn’t allow as much transformation option on type then path and raster images (there is no distort or perspective transformation options for type). Rasterizing type means possible loss of quality, which makes it really handy to convert type to shape for transformation.

To convert type into paths, right-click on the type layer and select “Convert Type to Shape.” Alternatively, you can convert type into a “work path,” which produces a new path of the shape of type. Making “work path” also works on normal raster shapes; however, it is achieved by first making a selection of the raster shape and then convert that selection into a work path.

Vector mask

A vector mask is basically the same as a raster mask, except that it retains the easy-to-shape nature of a path. To add a vector mask, it’s very much like adding a raster mask (have a selection, select the layer to mask, and click Add Layer Mask). The actual procedure goes like this: select the path, select the layer to mask, and Ctrl + click the Add Layer Mask function.

Type paths

To run text along a path, first draw the path, and then with the Type tool selected, click on the path and start typing. The path can later be further manipulated, and the start point (indicated by an “x”) and the end point (indicated by a black circle) of the text can also be rearranged. You can also type in a close path to create a custom shaped text box.

Managing colours for Web design in Photoshop

Calibrating the display

Using a colorimeter

Some affordable solutions include: Monaco Optix, LaCie blue eye, and basICColor displaySQUID. A colorimeter should be used after the monitor display has warmed up for at least half an hour and in an environment in which the lighting is soft and evenly distributed. There should be no light shines directly on the monitor.

Gamma correction

Gamma is basically a value that represents the relationship between luminance values of the monitor. For general web users, a gamma of 2.2 is the most common setting, and the most common white point is D65.

ICC profiles

International Color Consortium (ICC) has specified vendor-neutral colour specifications for devices to interpret and display colours as intended. In order for ICC to work, however, both device and file need to embed the same ICC profile. To best represent the Web environment, the ICC profile sRGB IEC 61966-2.1 is used on the Internet as the standard, and therefore this profile should be used to maintain maximum consistency on the web.

Converting between colour profiles

Photoshop works with a Color Management Module (CMM) that employs the Profile Connection Space (PCS) engine to convert between ICC profiles. For a colour to display, Photoshop needs to convert the raw data into the assigned working space ICC profile and then tells the computer to display the colour using the monitor’s embedded ICC profile. Whenever there is a conversion, the colour goes astray from the raw data, which makes the final result sometimes way different from the raw. To avoid this double conversion, you can set Photoshop’s working space ICC profile to the same as your monitor’s by going Edit > Assign Profile.

Although setting Photoshop’s working space ICC profile the same as your monitor’s makes it easier to achieve WYSIWYG, the actual Photoshop file becomes less flexible because the colours will only be true to your monitor’s ICC profile (i.e. taking the file to another computer would doom all the colours).

To maintain consistency across platforms, Photoshop working space is best suited with sRGB ICC profile. If you would like to preview the image in any other profiles, you can set up proof colours by going View > Proof Setup. Remember to tick View > Proof Colors after choosing the proof profile.

Further readings

Tips for Managing Web Color in Photoshop

Performance Optimization for Websites

File Optimizations

Give correct image dimensions in IMG tags

Don’t specify a dimension of different values to the image’s original dimension. This makes browsers scale the image and therefore takes longer to load the image. Besides, browser-scaled images do not look as good.

Reduce image file size

If image quality acceptable, save images in the 256-colour palette as many as possible. Smush.it of the YSlow Firefox add-on can analyze and shrink the image files automatically. You can download the shrunk image files in a zipped file.

Use image sprites

An image sprite is an image file that have multiple graphics for different purposes recorded on it. For example, a 20*200px image file can record 10 20*20px smiley faces that can be manipulated to show different faces using the CSS background-position property. This technique saves the number of HTTP requests that a page needs to make in order to get these ten images (one v.s. ten).

Further reading: www.smashingmagazine.com/?p=6319

Use Content Delivery Networks and Servers

Simply put, Content Delivery Networks (CDN) and servers are servers dedicated to the static content of a website and are located in proximity to the users. For this optimization to work, renting servers all over the world is required, so normally, only big companies have the budget for this kind of optimization.

Combine CSS and JavaScript files

Each external CSS or JavaScript call is an HTTP request that adds to the load time, so it makes perfect sense to combine all CSS and JavaScript files in a production site. Of course, in the development environment, everything can still remain separated.

CSS to the top; JavaScript to the bottom

Put CSS declaration in the <head> section of an HTML file so that the browser knows about the rules of displaying the page elements before the page loads. Put JavaScript at the bottom just right above </body> to prevent JavaScript from screwing around with page elements before the page is even properly loaded.

Minify CSS and JavaScript

Run your JavaScript code with JSLint first to make sure the JavaScript will minify well. To actually minify CSS and JavaScript, you can use the Minify service or YUICompressor from Yahoo!.

Make CSS and JavaScript external

Not using CSS and JavaScript inline is the standard practice of separating structure from style and behaviour. Putting CSS and JavaScript in external files also makes it easier to manage the files and reduces the HTML file size. Another advantage of such practice is caching, which also reduces HTTP requests.

Specify a document type

Specifying a document type doesn’t necessarily have a direct impact on the overall speed; however, giving the browser a clue of which set of rules it should follow to interpret HTML and CSS does give you the full potentiality of the specified document type.

Validate your pages

Validating your pages does not necessarily have a direct impact on your site performance; however, it does give a sense of trust because a successful validation against W3C’s validation service suggests your dedication to quality.

No CSS expressions

CSS expressions allow logic operations in CSS, which goes against the principle of separating logic from style. CSS expressions are slow in styling page elements when a page updates on the fly and therefore are not accepted by the web design community nor W3C. Microsoft, the inventor of CSS expression, also abandoned CSS expression in Internet Explorer 8.

Server Optimizations

Real techie:

• Set up expires header
• Set up ETags (entity tags)
• MySQL Tuning Primer
• Transparent compression

Avoid unnecessary redirects

Any unnecessary redirect mean the server is not fully optimized. Using Firebug (a Firefox add-on) can help in determining whether a page is redirecting its access. In Firebug, under the Net tab, anything that shows a 302 Found in its Status column is giving a redirect. Reduce the number of 302 Found if possible to increase performance.

Avoid dead links

A dead link includes an HTTP request to a non-existing external CSS, JavaScript, or image file. Web server is required to send a 404 header is a dead link is requested, which really does nothing but adds to the server load. Besides, web server logs all 404 incidents, and giving it the chance to log a 404 incident simply means that you are wasting your server space.

Other than YSlow

Google has also its own Firefox add-on for optimization check called Page Speed.

Branding Department of English

More of a personal than an official project. Some WIPs.

Smoke & Magic Lighting

I tried two Photoshop tutorials from abduzeedo.com today, one Smoke Effect and the other Magic Lighting Effect. The Magic Lighting Effect actually incorporated the Smoke Effect, so I tried the Smoke Effect tutorial first.

The Smoke Effect

The Smoke Effect incorporates a Photoshop filter called Liquify. This is something I am extremely unfamiliar with (in fact, I am unfamiliar with all of the filters). Because of this unfamiliarity, I was quite stuck half way through the tutorial. I was literally staring at the Liquify dialogue and really hesitating to do anything with it.

In order to know what the heck Liquify really was, I did a little research. I found that this filter was actually available since version 6 of Photoshop, and I absolutely had no idea whatsoever of its existence back then. I also found a video tutorial on YouTube teaching the basics of this filter. It is a very nice beginner tutorial as it demonstrates some of the most basic and commonly-used tools in this filter. Here are some notes:

• “Brush Size” refers to how big your brush is.
• “Brush Density” refers to how big within your brush the filter is applied. A value of 100 means the filter will be applied from the centre of the brush all the way to the edge. (video tutorial 1:40)
• “Brush Pressure” refers to how sensitive should the filter be applied as per your mouse moving speed. (video tutorial 3:20)
• There is also a quick reference to the Liquify command.

Here is what I ended up with:

Smoke Effect take 1

Smoke Effect take 2

As shown, take 1 was quite a failure, though take 2 doesn’t really achieve much smoke effect, either. The Liquify filter in Photoshop really needs time to harness.

The Magic Lighting Effect

This tutorial was actually a little bit easier than the Smoke Effect one, partially because it uses less Liquify effect; partially I have explored the Liquify filter a bit. In this Magic Lighting effect, I fooled around with:

1. The Wave filter (Filter > Distort > Wave) applied on text
2. Color Dodge layer blending mode
3. Creating a new brush that makes small particles

It is also interesting to note that the tutorial author used Cloud filter (Filter > Render > Cloud) in a 80px-feather marquee and applied Gaussian Blur to two additional distorted text layers to create the atmosphere of magic. The Smoke Effect was also incorporated to increase this magic feeling.

Here is what I ended up with:

Magic Lighting Effect take 1

Not too bad, I reckon.