CSS Font-Size: em vs. px vs. pt vs. percent

• CSS Font-Size: em vs. px vs. pt vs. percent
  tags: webdesign web css font design font-size blog reference

Posted from Diigo. The rest of my favorite links are here.

Very well explained comparison and example use of px, pt, em, percent units used in CSS web design. The conclusion is that a combination of em and percent is best suitable for web documents today. You should put that into practice.

Stying HTML forms with CSS

There are two important tags for form styling: <fieldset> and <legend>. To see some examples about styling these two tags, check this link.

In addition, if you want to have CSS centering layout, here is a common methodology for your own reference. 

Google App Engine Blobstore API experience

I have been building a small website in the past few days using Google App Engine. During this small project, the most intriguing part is hacking Blobstore API. Luckily, I conquered it again and found a few things:

1. To create your own blob in blobstore, you'd better follow this example
2. If you follow that example exactly, you will create a blob without filename. To set the filename when creating a blob, I found this discussion; the original google api document isn't very helpful on that. To get more insights about that API, check the source code here.

Useit.com Alerbox Column - Changing the color of visited links

A subtle but essential web design tip about link colors - visited links should have different colors than unvisited links. Useit.com tells you why:

http://www.useit.com/alertbox/20040503.html

So, this becomes your first web UI lesson.

Additionally, this web site is a web UI guru's website, which means you can learn how to design a clear and neat web page from viewing its source codes. Notice that this website doesn't involves Javascript! Go check its CSS style sheets!

Web Devout

• Web Devout
  A website providing information for web developers to make the web healthier.
  tags: webdesign webdev web web2.0 standards tools

Posted from Diigo. The rest of my favorite links are here.

A must-visit website for developing standard compatible websites; even better than quirksmode!

Yet another web development framework - web.py

• Web.py
  Yet another web framework for python. However this one is minimalist and developed by one of the founders of Reddit.
  tags: python web framework webdev programming web.py opensource

Posted from Diigo. The rest of my favorite links are here.

Web.py lets you write web apps in python while Django lets you write web apps in Django.

jQuery effects

Hide, Show, Toggle, Slide, Fade, and Animate. WOW! With all these, you already can create quite an interactive web pages! Amazing jQuery!

http://www.w3schools.com/jquery/jquery_effects.asp

Okay, enough of jQuery lessons for today!

jQuery selector concept

In HTML DOM terms:

Selectors allow you to manipulate DOM elements as a group or as a single node.

jQuery Element Selectors

jQuery uses CSS selectors to select HTML elements.


$("p") selects all elements.
$("p.intro") selects all elements with class="intro".
$("p#demo") selects the first element with id="demo".


jQuery Attribute Selectors

jQuery uses XPath expressions to select elements with given attributes.


$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value equal to "#".

$("[href!='#']") select all elements with an href attribute NOT equal to "#".

$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".


jQuery syntax for selecting HTML elements

The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

Basic syntax is: $(selector).action()

• dollar sign to define jQuery
• (selector) to "query (or find)" HTML elements
• jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides current element

$("p").hide() - hides all paragraphs

$("p.test").hide() - hides all paragraphs with class="test"

$("#test").hide() - hides the element with id="test"


P.S. jQuery uses a combination of XPath and CSS selector syntax.

CSS selectors

• CSS selectors
  CSS selector reference from W3C
  tags: css selectors w3c cascading style sheets

Posted from Diigo. The rest of my favorite links are here.

Best CSS reference is from W3C!