Google Font API offers free custom fonts

Did you know, Google's new Font API lets you display text on your web page with custom fonts served from their server farm? (Thanks Chris)

There are currently 19 fonts, some with multiple variations, in the Google Font Directory. Their site informs that all fonts in the directory are available for use on your website under an open source license and are served by Google servers. You can use CSS or JavaScript to embed them. There is a Font previewing tool to fine tune how the letters should look.

This program is in beta & it is supported mostly on newer versions of popular browsers.

Read More

HOW TO prevent Google from indexing or caching a specific page

Did you know, you can prevent Google from indexing & caching specific pages of your website by just adding a META tag to those pages?

As explained on the Google blog.....

In addition to the robots.txt file -- which allows you to concisely specify instructions for a large number of files on your web site -- you can use the robots META tag for fine-grain control over individual pages on your site. To implement this, simply add specific META tags to HTML pages to control how each individual page is indexed. Together, robots.txt and META tags give you the flexibility to express complex access policies relatively easily.

To prevent a webpage from showing up in the search results, you can insert this line within HEAD tags:
<meta content="NOINDEX" name="GOOGLEBOT">

Add the NOARCHIVE tag to a web page and Google won't cache copy of a web page in search results :
<meta content="NOARCHIVE" name="GOOGLEBOT">
As a result of the above line, that web-page will appear in a search result but the Cached link that typically appears in a search result will not be shown.

Also see:
HOW TO find "dofollow" blogs/websites
rel="nofollow" - one non-standard HTML attribute value that the Big 3 search engines support

90

Read More

CSS Attribute selector input[type="checkbox"] works inconsistently

A web developer posted a question on the ASP.NET Forums wanting to know why a CSS style setting involving the attribute selector input[type="checkbox"] wouldn’t work.

As per the Quirksmode browser compatibility table, attribute selectors should work on popular browsers except on IE versions older than 7 but the selector input[type="checkbox"] seems to be an exception.

I created a test page by adapting a sample from W3Schools, adding a CSS attribute selector style setting to be applied to all checkboxes on a web page.



I found that the style  involving that attribute selector was applied only in IE version 7, 8 & Opera ( I tested in Opera 9.64). It failed in Safari, Firefox & Chrome.

While the style setting for input[type="text"] in the example appears correctly on all browsers, it was surprising that the style defined with the selector input[type="checkbox"] is not recognized by some browsers.

Also see:
HOW TO access a HTML Label tag's text programmatically
Conditional comments & CSS child selector

90

Read More

HTML5 features emerging in popular web apps

• GMail now supports dragging & dropping attachments & images in HTML5 compatible browsers
• All popped out windows from GMail will will continue to work after you close your main window. This includes GMail Tasks - the TO-DO list tool built into GMail
• If you are concerned about the security issues with Flash or don't like plugins, you can try the YouTube HTML5 Video Player
• Apple iPhone, iPad and Android support HTML5

Work in progress...

Related:
Get ready for HTML5

Read More

Sitepoint CSS Video Tutorials Giveaway

Sitepoint is giving away the video tutorials of it's CSS Crash Course. The offer ends today so grab those videos right away.

They take your email address to send you the Order Id which you'll need before you can start downloading. In case, you have trouble logging in with the email address & Order Id credentials, write to their Customer Support.

Here's what's in the nearly two and half hour tutorial -

• An Introduction to CSS (17:40)
• Videos 1 & 2: CSS Selectors (40:56)
• Videos 3 & 4: Text Properties (35:41)
• Video 5: Inheritance (13:10 mins)
• Video 6: The Cascade (25:21 mins)
• Video 7: What’s Next? (12:45 mins)

CSS is a very powerful but vastly under-rated technology. This tutorial is a good resource for web developers.

Also see:
My favorite Developer Cheat-Sheets

60

Read More

Get ready for HTML5

The upcoming versions of all browsers are busy implementing HTML5 features. Chrome & Safari 4 already have lead over the rest.

Some of the most notable new additions in HTML5 are the video tag that will let videos to be displayed directly in the browser without having to rely on plugins and Offline Storage. YouTube has a preview of it's HTML5 Video Player.

Web developers can benefit from proactively understanding & planning on incorporating HTML5 features in their websites. There are some good learning resources online for HTML5 -

• W3Schools HTML5 tutorial
• Dive Into HTML 5
• HTML 5 Demos and Examples
• HTML5 Rocks
• HTML5 Doctor

Also see:
HOW TO disable Flash in IE and Firefox

60

Read More

jQuery is now on W3Schools

Whether you are getting started with Web development or need a good reference, W3Schools is a great online resource you can turn to. In over a decade of it's existence, the Norwegian family-owned company Refsnes Data that runs W3Schools has meticulously created tutorials on close to 50 Web development topics. The tutorials are in plain-English, thorough and to the point. I was glad to see today that jQuery has been added to that growing list of topics.  Also included is a tutorial on HTML5, the next generation of HTML.

W3Schools has been a dependable companion to me for much of my web development career. Just yesterday, I learnt that the rel attribute of the anchor tag is not really supported by any major browsers and it can take over a dozen possible values. rel="nofollow" is used by search engines to let search spiders know they should not follow a link which contains that attribute.

W3Schools is currently ranked 341 on Alexa & enjoys over 103+ million monthly page views (March 2010).

Also see:
Free .NET 4 & VS 2010 Learning Resources
HOW TO block IFRAME based ads

60

Read More

Building blazing fast Web pages

Everyone loves fast loading pages but building such pages requires care & implementing best practices. Some best practices only provide minor benefits but when put together the performance gain is significant.

Steve Souders, the author of "High Performance Web Sites", who champions the cause of building faster Web pages & thereby a better Web, shares 3 new tricks to speed up loading web pages -

• Specify a Character Set at the very top of your HTML document - Browsers take a performance hit of varying severity when you fail to specify it. A META tag specifying the charset should ideally be the first element inside the HEAD tag.
• Minify HTML
• Minimize HTTP Request Size - If the total size of the request headers exceed one packet (~1500 bytes), a roundtrip is required just to submit the request thereby hurting performance.

These "rules" are now part of Google's YSlow clone, Page Speed 1.6 Beta Firefox plugin

Also see:
What is "domain sharding"
HOW TO improve the front-end performance of a website

Read More

My favorite Developer Cheat-Sheets

The SEO Cheat Sheet I ran into recently ......


...reminded me of all the other Cheat-Sheets that have helped me in the past -

• CSS Cheat-Sheet
• JavaScript Cheat-Sheet
• jQuery Cheat-Sheet
• Regular Expressions Cheat-Sheet
• Web Developer's SEO Cheat Sheet

Also see:
Keyboard shortcuts common to Firefox & IE 8
My Favorite Visual Studio 2005 & SQL Server 2005 Keyboard Shortcuts
My favorite Foxit Reader keyboard shortcuts

Read More

HOW TO access a HTML Label tag's text programmatically

On a technical Forum that I frequent, there was a question on how to get the Label tag's text associated with a radio button (or for that matter any other control). The easiest way I found is to use jQuery -
alert($("label[for='radio1']").text()); //radio1 is the ID of a radio button

You would need to throw in a reference to the jQuery library when you run that statement. The better way is to link to the online copy here - http://code.jquery.com/jquery-latest.js

Is the label tag important anyway? I didn't think so until I read this in W3Schools -

The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

The for attribute of the label tag should be equal to the id attribute of the related element to bind them together.

Did you know an ASP.NET radiobutton control renders as an INPUT tag with type "Radio" and the radio button's text is rendered with a LABEL tag? So clicking on the radiobutton's text would be as good as clicking it.

Also see: The optgroup tag

Read More

HOW TO create a Contact/Feedback form without coding

Typically building a Contact or Feedback form requires some amount of server-side programming as submitted values need to be saved in a database or emailed to a specified address. There are also infrastructure costs associated with running self-hosted database software and email.

Zoho Creator offers free readymade configurable templates for a host of forms including Contact or Feedback forms. Once configured, Zoho Creator provides you a code snippet that you can paste into your web pages. When a visitor fills the feedback form, the values are saved to a database that can be accessed online and the values submitted can also be sent to an email address that you specify.

I was able to set up a Contact form for this blog within minutes.

Read More

Generate Dynamic Tooltips with ASP.NET & jQuery

Let's say you have to scan a web page to find words matching those in a Glossary (that is continuously updated to provide descriptions for keywords), highlight them and show a brief explanation of the term as a tooltip when the mouse hovers over it. I wrote an article recently that shows how to accomplish this requirement using jQuery functions and a jQuery Plugin called SearchHighlight.


The job of scanning a web page to find words matching those in a Glossary and highlighting them is done by the jQuery SearchHighlight Plugin. This Plugin basically takes the list of words that we want to match and whenever it finds a matching word in a web page, it wraps the word within a SPAN tag and the style setting for the SPAN gives the highlighted effect. Next, in order to show a dynamic tooltip that SPAN tag's TITLE attribute is used. The content for the TITLE attribute is fetched asynchronously from the Glossary which is a dynamic web page that retrieves keyword descriptions from a data source. The Glossary page can be implemented as a Generic Handler (.ashx) or a simple .ASPX page so that it returns just the description of a keyword which is provided to it as a querystring value. jQuery makes DOM manipulation & AJAX interaction simple and keeps the code short. You can first run the no-frills sample and hover over the highlighted word to see the dynamic tooltip before browsing through the article.

Related:
Infinite Scrolling or Continuous Scrolling UI Pattern using ASP.NET & jQuery
Generate Dynamic Tooltips with ASP.NET & jQuery

Read More

Usability Tips

Smashing Magazine offers 8 usability check-points you should be aware of -

1. Avoid Pop-ups
2. Don’t change users’ window size.
3. Don’t use too small font sizes.
4. Don’t have unclear link text.
5. Avoid dead links.
6. Have at most one animation per page.
7. Make it easy to contact you.
8. Open internal links in the same window.

The article explains how if your visitors don’t understand how they can get from point A to point B they won’t use your site.

Read More

IE8 Developer Tools Tips & Tricks - #4: Edit CSS Visually

Debugging CSS in an inherited web application or trying to adapt CSS from an inspiring design of someone's website is generally not an easy task. One of the interesting features in IE 8 Developer Tools is the facility to edit CSS visually.

1. After you open the desired web page of which you want to debug CSS, open Developer Tools from the menu or using the keyboard shortcut F12.
2. Click on the CSS tab.
3. If you already know the Class and ID information, select it from the treeview of all Class and ID style definitions for the corresponding web page otherwise go to the View menu in Developer Tools and select Class and ID information. On choosing this all the CSS Classes and IDs will be displayed as small labels on the web page that you are debugging CSS for.
4. You can see how the attributes of a particular style definition operate by un-checking the checkboxes next to each element's style definition & view the changes immediately in real-time by switching to the web page.

Read More

Learning Resources for Building High Performance Websites

I have high regard for Steve Souders & Peter-Paul Koch. Their knowledge and contributions to the Web Development community are exemplary. Steve is the man behind YSlow, a nifty tool that analyzes web pages and tells you why they're slow based on the rules for high performance web sites.

Steve recently finished teaching a course on High Performance Web Sites at Stanford. He has graciously shared the material from the class on the class web site & also interesting guest lectures. All these resources are great fodder for web developers.

As part of their course, the students studied popular websites to identify performance issues in them. Their findings confirm that websites that follow Performance best practices have a high YSlow Grade and load the fastest. Craigslist.org (YSlow Grade:96) & Windows Live (YSlow Grade:94) top their charts while Fox News Channel (YSlow Grade:24) & ESPN (YSlow Grade:28) are at the bottom.

The Q&A from the Midterm Exam & Final Exam are good brain teasers. Sample this -

How many connections per hostname is suggested in the HTTP spec? Do the five most popular browsers follow this recommendation?
2
no, Firefox 3, IE8, Safari 3.1+, Opera 9.60, and Chrome all support 4 or more. IE6 & 7 are still 2.

What are the two request headers that can be used to determine if a cached resource is valid (i.e., used as part of a Conditional GET request)? If the resource is valid, what status code does the web server return?
If-Modified-Since, If-None-Match
304 Not Modified ("304" and "Not Modified" are also valid answers)

Name three potential drawbacks to using a CDN, and a way to mitigate these drawbacks.
your performance can be affected by your competitors, you don't have direct control, if the CDN's performance degrades so does yours
you can use two CDNs to hedge your bets

Name two browsers (including major version #) that support parallel script loading?
IE8, Safari 4 are the biggies. Also Android 1, iPhone 2, Konqueror 4, Opera 9, and some Blackberries.

How much does gzip compression typically reduce transfer sizes?
70%

Which trigger busy indicators?
script in iframe
script DOM element
script defer
document.write script tag

What's the benefit of splitting resource downloads across multiple domains? In general, how many domains should you shard across?
You can get more parallel downloads by splitting resources across multiple domains. The ideal number of domains is 2-4.

List two pros and two cons of using iframes.
pros:
embedding content from another web site
sandboxing 3rd party JavaScript
asynchronous loading of external scripts

cons:
most expensive DOM element
blocks parent's onload

List the seven types of CSS selectors and give an example of each.
ID: #navbar {}
class: .navbar {}
type: A {}
descendant: UL LI {}
child: UL > LI {}
adjacent sibling: UL + P {}
universal: [color: red] {}

Also see:
HOW TO improve the front-end performance of a website - II

Read More

IE Developer Tools Tips & Tricks - #1

IE Developer Tools formerly called Internet Explorer Developer Toolbar and available as a separately installable browser add on is now integrated in IE 8 (Beta 2). It is accessible from the Tools option in the IE menu or by using the F12 shortcut. Although there are differences between Firebug and IE Developer Tools, it can be said that Developer Tools is to IE what Firebug is to Firefox - a friendly tool that helps a developer understand how HTML, CSS & Javascript operate within a web page & aids in fixing any issues that may arise in those areas.

There are a host of features in IE Developer Tools, some hidden within the menu options and their utility is not readily obvious. By knowing the scenarios in which they would be helpful, a developer can better utilize IE Developer Tools.

Take for instance the Color Picker. It is not something you would use everyday but you can make your client's day when she wants the background color of a table in a web page that you are building to be same as a peculiar shade of color as on her favorite website and you show it implemented in a jiffy using the Color Picker!


All you have to do is go across to her favorite website, select 'Show Color Picker' from the Tools option in the Developer Tools menu and use the Dropper to pick the color she is referring to as a RGB or hex value so that it is usable in a web page.

In the absence of this you would have to use a standalone color picker like Pixie.

Read More

HOW TO build a simple Tab Menu Control

If you need a dynamic Menu for your ASP.NET website that should show up differently for different kinds of users, you need not look beyond the ASP.NET 2.0 Menu. It has umpteen properties (over 75!) that can be set declaratively to configure beautiful standards compliant Menus with no effort at all. But if all you need is a simple static Menu to navigate through a few pages, the ASP.NET 2.0 Menu could be overkill. Instead, you can consider building your own lightweight Tab Menu Control and play as you like with it.

This Simple Tab Menu Control leverages the power of Javascript & DOM to detect the hyperlink that matches the page visitor is on and highlights it. As all the processing is done on the client-side with Javascript & CSS, it is relatively faster & light-weight. Check this no frills, bare-bones example...

If you need a lightweight multi-level static menu for your ASP.NET pages, you can adapt & wrap the Suckerfish Menu into a User Control.

Read More

HOW TO make web pages "cross browser"

Hell is other browsers
(Hell is other people - Jean-Paul Sartre)

An oft repeated question on the online message-boards is how to make web pages render & behave the same in IE, Firefox and other popular browsers. This does not have an easy answer. The incompatibilities are due to the browser wars & the host of non-standard HTML & scripting features that the different browsers have introduced.

In my opinion, developers can build cross browser web pages by being aware of the standards that popular browsers commonly follow & sticking to them.

I have found these resources useful while building cross browser web pages -
HTML 4.01 / XHTML 1.0 Reference
CSS 2.0 Reference
QuirksMode.org Browser Compatibility Tables
JavaScript and Browser Objects Quick Reference
Migrate apps from Internet Explorer to Mozilla

Related links:
HOW TO easily verify your website design in different browsers/OSs

Read More