CSS Experiment @ Bookmark

It is sort of a “Hello World” program. But why a bookmark? It’s simply because all the materials I have at hand, a photo shot last autumn in Beijing and a poem for one of my best friends whom I have lost contact with, are appropriate to make a bookmark.

• CSS Layout via Float

As you can see, the photo is positioned on the top-left of the page. To do that, I wrap the image in a div and layout the div using “float: left“.

To understand float, let’s think about magazines. In a magazine layout, pictures are usually set into a page such that text wraps around them. This is commonly called “text wrap”. With the CSS float property, text wrap could be applied to web layout too. Floated element remains a part of the flow of the web page; however, it is taken from the normal flow and placed along the left or right side of its container.

There are many issues related to float. One of them is how floated element can affect its parent. If a parent element contains nothing but float elements, the height of it collapses to nothing.

To solve this bizarre issue, just set parent’s “overflow:auto“. CSS overflow property specifies whether to clip content, render scroll bars or display overflow content of a element.

Another issue is how to clear the float. An element that has the clear property set to it doesn’t wrap around floated elements, but moves down below them.

• Line Separator

To make the poem looks like written on a piece of letter paper, I have added some lines between paragraphs. The lines look like cut down on the page. How to get this effect? Well, the adjacency of  border-bottom (darker) with border-top (lighter) makes this stair-step effect.

However, we notice that there are some unwanted borders, such as the white border on the very top and the border below the empty line.

To remove these unwanted borders, I resort to the pseudo selector nth-child. I remove the top border on the first line, sixth line, eleventh line…; likewise I remove the bottom border on the fifth line, tenth line, fifteenth line…

• Shadows

Casting some drop shadows off the boxes make them look 3D.

0px means the horizontal offset is zero. If this number is positive, the shadow is to the right of the box, while a negative number is to the left of the box. 1px is the vertical offset, which means the shadow is at the bottom of the box. 2px is the blur radius. The higher this number, the more blurred the shadow is.    #D1D1D1 is the color of the shadow.

In a similar way, we are able to drop the text shadow.

• Gradient Background

Gradient background is still an experimental feature. Therefore, we have to add prefixes to accommodate various browsers. Here I add a top-to-bottom linear gradient to the footer, beginning at color #658F88 and ending at color #31796C.

• Reference

1. All About Floats
2. Mozilla Developer Network CSS
3. 30 days to learn jQuery – Day 5

CSS Selector – Some Basics

CSS Selectors are nice, fancy, awesome… blablabla….Yep, I know that feeling. But you know there is no perfect world; hence, power usually comes along with cost. That’s why we have to dig into the basics of CSS selectors to ensure that we don’t misuse it at the expense of the rendering performance of browsers.

 1. Right to Left

Browsers parse CSS selectors from right to left. For example, for CSS selector .footer h3 {…}, the browser starts from the rightmost tag selector h3, finding out all the h3 elements. And then the browser traverses up the DOM tree, evaluating every ancestor element to see if it’s of class footer until it reaches the root element. Bearing the rule ‘Right to Left’ in mind, it’s easy for us to understand why following selectors are inefficient:

2. Cascading Order

Cascading Style Sheets. What’s the actual meaning of cascading? The so-called cascade refers to the priority or weight scheme to determine which style rules apply if more than one rule matches against a particular element. The rules concerning the CSS selectors are chosen in the following order:

• the rules with more ids in the selector
• the rules with more classes in the selector
• the rules with more tags in the selector

In the example below, all the tag selector, the class selector and the ID selector are targeting the div element. However, only the ID selector applies because ID selector weights more than class selector, while class selector weights more than tag selectors.

The specificity is calculated by counting the respective occurs of ID attributes, class attributes and tag attributes in the selector. And then write the three numbers in exact order with no spaces or commas to obtain a three digit number. The selector of larger number is applied. See, #main wins in the compete. 

Learn jQuery source codes with Paul Irish

Here is a video by Paul Irish explaining some details about jQuery source codes. Personally, I was amused while watching this video. I particularly like all of the unexpected laughs throughout the presentation. Haa….

10 Things I Learned from the jQuery Source

Following are some tips of JavaScript programming given by Paul.

1. Self-executing Anonymous Function

What’s particular of this function is: Firstly, it’s anonymous. In other words, no name refers to this function; hence, it can’t be invoked anywhere else. Secondly, this function is immediately called at declaration. In addition to the above standard way, following two methods could also be used to create self-invoking anonymous functions.

What’s the point of the JavaScript Pattern below?

Well, the window and window.document object are passed into the function as parameters. Obviously, it gives us sort of scope traversal benefit because inside the function we don’t have to refer to outer scope (global scope) to access window and document object. The window and document object are now within the function’s local scope. In addition, we are able to guarantee that undefined is actually of undefined value since no value is passed in here.

2. An Elegant Substitute for setInterval

Many have argued that setInterval is an evil function. It keeps calling a function at specified intervals regardless of whether the function is finished or not. For example, it’s quite likely that function doStuff() takes more than 100 milliseconds to complete. However, setInterval doesn’t care about it and it keeps invoking doStuff() every 100 milliseconds.

So, an alternative to setInterval is as below. The following function invokes itself every 100 milliseconds as well. But each time it runs, it guarantees doStuff() is actually finished before next calling is registered. And another huge benefit to developers is that we’re able to debug doStuff() now. The debug won’t be interrupted by another function calling.

3. propFix

propFix is simply an object containing some name-value pairs. It magically does some translations so that you are able to access, say, a class attribute via “jQuery(‘#id’).attr(‘class’)”. On a DOM element, you know, class attribute is actually named className, because class is a reserved word. With the help of propFix, you don’t have to worry about these spelling issues anymore. What’s more, you are able to add some default properties in propFix so that you can use them natively.

4. CSS Selectors

$(‘#id’).find(‘li’) works faster than $(‘#id li’). Why? If you debug jQuery codes, you could see that the later one invokes Sizzle CSS Selector Engine whereas the former one doesn’t.

 

5. Parse JSON

 

All of the popular browsers have built-in JSON parsers. Of course, jQuery attempts to parse using native JSON parser first.

 

 

If there is no native JSON parser, jQuery resorts to using Function’s return method. This mechanism is almost the same as using eval() function. Both of ways turn a string into an object and both of them couldn’t avoid executing some malicious codes.

 

 

6. Latest jQuery Source Code

 

http://bit.ly/jqsource

 

Variable

Variables are declared using the keyword “var”. For instance, the following statement creates a variable named “message”:

message holds the value “undefined” because no initial value is assigned to it. To notice that, if a variable is undeclared, it’s also undefined.

However, an undeclared variable is different from an variable holding “undefined” value. Trying to use un undeclared variable may cause exceptions.

Variable is defined at where “var” statement is executed. Do not access a variable declared afterwards because at that point, the variable isn’t available yet.

It’s noteworthy that assigning value to an undeclared variable accidentally creates a variable in the global scope.

What’s the use of Array.prototype.slice.call(arguments)?

makeArray() returns an actual array, which is a copy of arguments. Arguments isn’t an real array, even though it has a length property and could be accessed through array indexes. 

To verify that Arguments isn’t Array, simply take a look at of Arguments object.  In its prototype chain, there is no Array; hence, it doesn’t own slice method.

To convert it into an real array, we resort to Array methods:

Array().slice