vim Frequent Used Commands

 

Command

Description

 Save and Quit

:w

Save changes

:wq   or   😡

Save changes and quit

:q! 

Quit without saving

u

Undo last change

 Move Cursor

^

Move cursor to the beginning of current line

$

Move cursor to the end of current line

w

Move cursor to the beginning of next word

b

Move cursor to the beginning of preceding word

Delete

dw

Delete single word beginning with the character under cursor

dd

Delete current line

d$

Delete the remaining of line beginning with the character under cursor

:1,$d

Delete all the lines

:1,Nd

Delete 1 to N lines

:Ndd

Delete the next N lines, including the current line

Copy and Paste

yw

Copy a word

yy

Copy current line

Nyy

Copy the next N lines, including the current line

:1,Ny

Copy 1 to N lines

p

Paste buffer after the current line

:r filename

Read file named filename and insert after current line

 Search and Replace

/string

Search for a string. Press n, cursor moves to the next occurrence; Press N, cursor moves to the preceding occurrence.

:s/old/new/g

Find each occurrence of ‘old’ on the current line and replace it with ‘new’

:%s/old/new/g

Find each occurrence of ‘old’ throughout the file and replace it with ‘new’

 Display

:set number

Display line numbers

:vsplit filename

Split vi vertically and display file named filename on the left half

ctrl-w ctrl-w

Move cursor between split screens

Tips of jQuery Mobile

I have been intensively working with jQuery Mobile during recent days. Following are some of the tips I grasp via using this library.

  • Methods
  1.  $.mobile.changePage

It enables programmatically change from one page to another. That implies your Javascript codes take full control of page loading and page transition. For example, after the user correctly fills and submits the authentication form, the view changes from the login page to the home page, with a sliding left transition effect.

The first parameter is a string which specifies the relative URL of the home page resource. The second parameter is an object with one property ‘transition’, which specifies the transition to use when showing the page. Actually, you could specify more properties in the second parameter. Please refer to http://jquerymobile.com/test/docs/api/methods.html for the details.

By taking a closer look of jQuery Mobile codes, we could find out what has been done after invoking the method above. Firstly, ‘pagebeforechange‘ event is triggered prior to any page loading and transition. Then, $.mobile.loadPage is invoked to load external page ‘home.html’ via Ajax. The Ajax call looks like below.

By default, Ajax request type is ‘GET’ and data is ‘undefined’. All these default configurations could be rewritten via the second parameter of  $.mobile.changePage method. In addition, cross-domain Ajax request is disallowed by default. To allow cross-domain requests, $.mobile.allowCrossDomainPages configuration option should be set to true. After the external page is successfully loaded and injected into DOM, a ‘pageload‘ event is triggered. Later on, page transition occurs. Finally, after the page transition animations complete, ‘pagechange‘ event is triggered. In addition to above events, a ‘hashchange‘ event is also triggered because the current location hash is changed.

  1.  $.mobile.path.parseUrl

URL path helper provide many useful utility methods. One of them is parseUrl function. It parses a URL into a structure that allows easy access to parts of the URL. It returns an object which allows us to access the sub-parts of the URL.

Additionally, path object also provides functions to get (get()) and set (set(path)) location hash, to check whether a URL is relative (isRelativeUrl(url)) or absolute (isAbsoluteUrl(url)).

  • Refresh

Refresh is highly important especially when the page is partially updated. For example, if we update a select via Javascript, we have to call the refresh method on it to update the visual styling.

 

Here, we add options into select dynamically via Javascript. Afterwards, we have to invoke refresh explicitly so that the display could be refreshed. It’s the same case with list views. If we add items to a listview, we have to call .listview(‘refresh’) on it.

Another generic way to refresh the display is to trigger ‘create‘ event.  In most of the cases, it’s the easiest way to update the whole display.

CSS Sprites

While I was working on the navigation bar, I came across this AaHa… trick. In the beginning, I thought it was crazy that icons and small images are combined into a large picture. A minute later, I realized that there must be some reason because so many websites have applied this technique.

         Facebook                                 Google

Not surprisingly, it turns out to be a must-to-know CSS technique called CSS Sprites. The basic idea is by combining multiple images into one, it’s able to reduce the number of HTTP requests. One HTTP request is able to fetch all of the icons and small images required to display the web page. And performance research has indicated that “reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make“.

How to implement sprites with CSS? Generally speaking, firstly, we have to merge the icons into one big sprite image via Photoshop or any other kind of image processing tool. Next, we set the sprite image as the background image. Finally, we could display any part of the image via shifting the background position.

The top picture in this post is a demo I did applying CSS sprites.  I merged a series of apple products into one image (the icons are downloaded from Icon Archive). Each icon is of the size 64px * 64px. All the icons are aligned side by side, without gaps between them. Therefore, the whole sprite image is of the size 256px * 64px.

 The content consisting the navigation bar is an unordered list:

To align the unordered list horizontally, the tip is to set the list element’s display as inline-block. Basically speaking, inline-block is a way to make elements inline, yet preserving their block capabilities such as setting width and height, top and bottom margins and paddings etc. Thus, list elements are displayed horizontally. 

However, since the list elements are treated as inline elements, there is always some space between two list elements even if the margin of li is set to zero. To remove these annoying gaps, one method is to set the margin to a negative value, say -2px

Next, I set the sprite image as the background image of the anchor element itself:

Each anchor element displays only a part of the whole background. For example, the second anchor element displays the iPhone icon. To do that, merely shift the background position with negative X coordinates -64px. The shift is calculated in this way: originally, the background image is positioned with its (0, 0) aligned to the top-left of the container. Since the iPhone icon starts at (64px, 0) on the image, we have to shift the image leftward of 64px to align the start of iPhone icon to the top-left of the container. Therefore, the background is shifted with X coordinates -64px

Here, I want to take some time to showcase the inset shadow effect. See, I have dropped some shadow inside the top of the boxes (only on the top side).

This effect is done by setting the box shadow to inset and the spread radius to a negative value. Feel free take a try.

Reference

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

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….

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.