Validating HTML5 in the browser

I like to be alerted of any validation errors that sneak into my markup as soon as possible. That’s why I find the HTML Validator Extension for Firefox very hard to live (well, work) without.

Unfortunately, it does not support HTML5. I’ve been looking hard for an alternative that does and has the same features as the HTML Validator Extension, i.e. runs locally in the browser without sending anything to a remote server and validates every page you load automatically.

No luck.

There are tools that validate markup by sending it to a remote server, either automatically or manually, but I don’t want that. I want to be able to check my work even though it’s behind a login or if I’m not connected to the Internet.

If you happen to know of a browser extension that solves this problem, please let me know. It doesn’t have to be for Firefox – Opera, Chrome or Safari would be fine too as long as it runs on my Mac.

Be careful with non-ascii characters in URLs

One thing that is rather common, especially on websites whose content is not in English, is URLs that contain unencoded characters such as space, å, ä, or ö. While this works most of the time it can cause problems.

Looking at RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax, characters that are allowed to be used unencoded in URLs are either reserved or unreserved. The unreserved characters are a-z, A-Z, 0-9, -, ., _, and ~. The reserved characters are used as delimiters and are :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, and =.

In essence this means that the only characters you can reliably use for the actual name parts of a URL are a-z, A-Z, 0-9, -, ., _, and ~. Any other characters need to be Percent encoded.

So what does using an unencoded character like space or å in a URL mean in practice?

• It doesn’t work in all user agents. Recent browsers seem to handle it pretty well, but older browsers may not be able to follow links or load images. It also causes problems for some other software that expects URIs to be valid (Ruby’s URI.parse is one).
• It may make URLs ugly and hard to read since browsers may percent encode some of these characters before displaying them in the location bar. This varies from browser to browser. A URL like http://example.com/å ä ö/ may be displayed as http://example.com/å ä ö/, http://example.com/å%20ä%20ö/, http://example.com/%C3%A5%20%C3%A4%20%C3%B6/, or even http://example.com/√•%20√§%20√∂/.

To keep things simple and predictable, consider sticking to the unreserved characters in URLs unless you have a really strong internationalisation requirement for using other characters.

Remember non-vendor-prefixed CSS 3 properties (and put them last)

Everybody wants to use CSS 3 now that even Internet Explorer will support parts of it once IE 9 is out. But since parts of CSS 3 are still subject to change, most browsers use a vendor prefix for many CSS 3 properties to signal that their implemenation is “experimental” and may change in a later version of the browser.

This means that for a property like border-radius to work cross-browser you need to specify it several times with different vendor prefixes, like this:

.box {
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
}

The -moz- prefix targets Firefox and other Gecko-based browsers, -webkit- is for older versions of Safari and other WebKit-based browsers, and the non-prefixed border-radius property is currently used by Safari 5, Chrome, Opera 10.5, and IE 9.

“Inspect element” is not the same as “View source”

Tools like Firebug for Firefox, WebKit’s Web Inspector and Opera’s Dragonfly are indispensible tools for front-end Web developers, letting you view the DOM as the browser sees it.

And that’s where these tools can actually cause some problems, or at least a bit of confusion. When you choose “Inspect element” or otherwise bring up one your browser’s DOM inspector, what you’re looking at is the document tree after the browser has applied its error correction and after any JavaScripts have manipulated the DOM. It is not necessarily the same as what you see when you choose “View source”.

CSS Colors: Take Control Using PHP

While many web sites use powerful programming environments to create HTML, these same tools are usually ignored when it comes to creating Cascading Style Sheets (CSS). This article describes how to take control of your colors in CSS using PHP. You will learn how to:

• Centralize your color definitions using variables.
• Separate presentation and content by referring to colors using abstract names such as base and highlight.
• Automatically generate a color gradient from a single base color:
  
  -5
  -4
  -3
  -2
  -1
  0
  +1
  +2
  +3
  +4
  +5
• Automatically adjust the contrast of foreground colors so they can viewed on top of your background colors:
  
  -5
  -4
  -3
  -2
  -1
  0
  +1
  +2
  +3
  +4
  +5

Learn CSS Positioning in Ten Steps

his tutorial examines the different layout properties available in CSS: position:static, position:relative, position:absolute, and float

1. position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Simple 2 column CSS layout

This is a tutorial on how to use CSS to create a simple two column layout.


The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with CSS once you know how to deal with the inevitable Internet Explorer bugs.


To see the full CSS used for each step, view source on the example documents.

Installing Windows 2000 Professional

To install Windows 2000 Professional, follow these steps:

1. Start the installation by using one of the following methods:
   
   • Start from the Windows 2000 Professional installation CD-ROM. Make sure that the CD-ROM is set to start before the hard disk starts. Insert the CD-ROM, and then when you are prompted, press any key to start the Windows 2000 Professional Setup program.
   • Start from boot disks. Insert Disk 1, and then insert each of the remaining three floppy disks when you are prompted to do so. For additional information about creating boot disks for Windows 2000
   • Start from within a current operating system. Insert the CD-ROM, and then, at a command prompt, type drive:\i386\winnt32.exe and then press ENTER, or if this is an installation on a computer that has no previous installation of Windows, type drive:\i386\winnt.exe and then press ENTER, where drive is the letter of the CD-ROM drive.
2. Setup inspects your computer's hardware configuration and then begins to install the Setup and driver files. When the Microsoft Windows 2000 Professional screen appears, press ENTER to set up Windows 2000 Professional.
3. Read the license agreement, and then press the F8 key to accept the terms of the license agreement and continue the installation.
4. When the Windows 2000 Professional Setup screen appears, either press ENTER to set up Windows 2000 Professional on the selected partition, or press C to create a partition in the unpartitioned space.
5. If you choose to install Windows 2000 Professional on a file allocation table (FAT) partition, specify whether you want to:
   
   • Leave the current file system intact.
   • Format the partition as FAT16.
   • Convert the existing file system to the NTFS file system.
   • Format the partition by using the NTFS file system.
   Press ENTER after you make your selection. Setup examines the existing hard disks and then copies the files that are needed to complete the installation of Windows 2000 Professional. After the files are copied, the computer restarts.
   
   Important Do not press a key to boot from your CD-ROM drive when your computer restarts.
6. When the Windows 2000 GUI Mode Setup Wizard appears, click Next to start the wizard. Setup detects and installs such devices as a specialized mouse or keyboard.
7. When the Regional Options dialog box appears, customize your installation of Windows 2000 Professional for locale, number format, currency, time, date, and language, if necessary. Click Next.
8. In the Personalize Your Software dialog box, type your name and the name of your organization, and then click Next.
9. In the Product ID dialog box, type the 25-character product key, and then click Next.
10. In the Computer Name and Password dialog box, either accept the default name that Setup generates or assign a different name for the computer. When you are prompted for an administrative password, type a password for the Administrator account. (You can leave the box blank; however, this is not recommended.) Click Next.
11. In the Date and Time Settings dialog box, set the correct date and time for your computer. You can also specify which time zone you are in and set the computer to automatically adjust the clock for daylight saving time. Click Next.
12. Setup installs the networking software and detects your network settings. When the Network Settings dialog box appears, click either
    
    
    
    • Typical to set default network settings such as File and Print Sharing for Microsoft Networks, Client for Microsoft Networks, and TCP/IP protocol that uses Dynamic Host Configuration Protocol (DHCP), or
    • Custom to specify the network components that you require for your network environment,
    and then click Next.
13. In the Workgroup or Computer Domain dialog box, specify the workgroup or the domain to join. If you indicate that you are part of a domain, specify your domain user name and password. Click Next.
    
    Setup installs the networking components.
14. During the final stage of installation, Setup installs Start menu items, registers components, saves settings, and removes temporary files. When the Completing the Windows 2000 Setup Wizard dialog box prompts you to do so, remove the Windows 2000 CD-ROM, and then click Finish to restart the computer.
15. After the computer restarts, click Next in the Welcome to the Network Identification Wizard dialog box.
16. In the Users of This Computer dialog box, specify either that users must enter a user name and password or that you want Windows 2000 to automatically log on a specific user when the computer starts. Click Finish.

When the Windows 2000 Professional desktop appears, the installation is complete.

Shop more at Bizrate

Using Associative Arrays for Client-side Caching using AJAX & Javascript

Introduction

This article shows you a useful technique to cache some of that page data on the browser in-memory. Since we use Ajax, the page is not reloaded each time. This prevents the cache from being invalidated on each round-trip. Client-side caching is sometimes required for performance reasons and also to take the load off of the DBMS. Since most modern PCs have plenty of RAM to spare, client-side caching becomes an important weapon in the modern programmer's arsenal of tricks.

With the advent of Ajax, application data can be maintained on the client without the use of ViewStates (aka hidden fields) or to a lesser degree, cookies. As any experienced developer will tell you, ViewState is a double-edged sword. Indiscriminate use of ViewStates can really have a detrimental effect on performance - what with the Viewstate payload ferried to and from the server with every postback.

The accompanying code can be extended to use record data too, via Javascript and the presentation logic can also be hived off to a Javascript routine on the client. We could even pipe XML down to the client and it could be parsed and presented through client-side script.

To keep this sample code easy to comprehend, I have rendered the tabular data from within the Web Service itself - which may not be architecturally optimal. Since this is not a treatise on design best-practices, I have taken the liberty of cutting corners here and there for the sake of brevity.

img width="36" height="42" style="float: left;" alt="Screenshot - article1.gif" src="Client-sideCaching/article1.gif" />We use JavaScript associative arrays to maintain our client-side cache. One thing to be noted about JS associative arrays is that once you associate a string key with an array, there is no way to iterate through the array using indexes. Supposing you are using it like this:asarray["akey"] = <value> there is no way you can revert to accessing the elements by their ordinal position like this: var anyvar = asarray[0].

Calling Server Side Code from Client Side using Ajax

Introduction

Using Microsoft ASP.NET AJAX is to call ASP.NET Web services (*.asmx files) from the browser by using client script. The script can call a webservice containing server-based methods (Web methods) and invoke these methods without a postback and without refreshing the whole page. The option we are going to use in this article involves PageMethods. A PageMethod is basically a public static method that is exposed in the code-behind of an aspx page and is callable from the client script. PageMethods are annotated with the [WebMethod] attribute. The page methods are rendered as inline JavaScript

A cool'n'simple search page using Google AJAX Search API, and some DHTML

Introduction

In this article I'll demonstrate how easy it is, to create a usable webpage with some advanced technologies (such as fast asynchronous web search) in a very simple way, using a public API.

Salajax: simple Ajax library solving back button and bookmarks for Ajax web applications

Salajax is a simplified Ajax library that handles back buttons, bookmarks and is extremely simple to use. Yes, Ajax is great. It does have some minor issues though, like the back button not working and the inability to use bookmarks. This library provides a simple class that will handle all these issues and more, without you having to think about it too much.
The Simple Ajax Library Ajax class (Salajax) tries to:

• Make the back button work with Ajax
• Make bookmarks work with Ajax
• Run JavaScript contained in the Ajax response
• Keep the .NET Viewstate
• Submit forms as an Ajax request
• Specify OnStart and OnEnd JavaScript functions to call
• Specify an OnError JavaScript function to call when the Ajax response is an error
• Set the HTML to display when updating a div with an Ajax request
• Set the HTML to display when there is an error making the Ajax request
• Be extremely simple to use

Basically, I'm hoping that the Salajax class will make it very easy to do everything and anything you could possibly want to do using Ajax.

Dragging and dropping with ASP.NET 2.0 and Atlas

Introduction

This tutorial is intended to help readers understand how certain aspects of Microsoft's new AJAX Extensions technology works. AJAX Extensions is intended to simplify the development of AJAX-style functionality. As with all technologies, however, to use a tool well, it is important to understand the underlying technology that Atlas abstracts. One of the key ASP.NET AJAX abstractions is the new XML markup syntax developed to make coding with AJAX easier (originally included with the core Atlas files, XML markup is now a part of the CTP called AJAX Futures). With XML markup, developers can modify their code declaratively. However, there are times when a developer may want to be able to change her code programmatically, and in order to accomplish this, she will need to understand that underneath the markup abstraction, she is actually dealing with good 'ol JavaScript and some custom JavaScript libraries developed by Microsoft. In order to demonstrate the relationship between the Atlas declarative model and the programmatic model, I will go through a series of examples in which the same task will be accomplished both declaratively and programmatically. I will be demonstrating how to use the PreviewDragDrop library file to perform basic drag-drop operations as well as setting up drop zones.

Ajax AutoComplete in ASP.NET

Without using AjaxControlToolKit, we can implement AutoComplete Extender using pure Ajax Call. This article explains how to do make AutoComplete Extender.

OnKeyUp event helps you to fetch data from database with Ajax call. Here one Handler.ashx handles the AJAX request form Client. I add a Class file to handle database operations to better coding practice. Below I explain the database helper Class. Class has one method:

GetTable(string sqlQuery) 

Making Cross Domain jQuery AJAX Calls

Today's web browsers do not allow web pages to make cross-domain Ajax calls. By this, I mean that if you are at www.ajax.com and try to make an Ajax call (a call using the XmlHttpRequest object), the browser would not allow this to happen. Why? For security purposes that I cannot currently name.

However, at some point you get to a project where you're interfacing this third-party site that needs to talk to your main site, or some other similar situation where the only way you're going to get the data you need from point a to point b is with some JavaScript magic. Here is how to accomplish it.

Getting Started with iPhone and iOS Development

Introduction
This is a first in a series of articles to get some one up and running with iOS development. iOS is the operating system that runs on the iPhone, iPad, and iPod Touch. While I will use an iPhone for my example code you could apply the code to all three devices.

Web App Common Tasks by jQuery

Introduction
One of my experience of using jQuery is that I often need to search around for solutions to some particular tasks, although there are good chances that the problems you try to tackle have already been solved by someone else via a plug-in, you still need to digest, evaluate, test and sometimes modify it to fit your project needs. That's perfectly fine for most rapid web development efforts. However, for some browser based, low-level tasks that are common for almost all web applications, searching for multiple plug-ins then put them together and test them out would cost unnecessary time. This article provides a jQuery plug-in (CBEXP) that encapsulates the most common tasks together and is reusable for different web applications.

For example, if your web application needs to conditionally (say, one Ajax call hasn't returned yet) warn user when navigating away or closing the browser window, or your client/service interaction relies on cookies and you want to make sure browser cookie is not turned off, or you need to parse query string and retrieve a particular parameter value in the client, or need to load different stylesheet dynamically without a post back to server, etc., it would be nice to have one jQuery plug in to handle all these low level browser based tasks, then we can focus more on application specific features.

As a matter of fact, CBEXP plug-in was initially put together for a real world consumer facing web application, it has been tested and working, wish it would be useful for your web application too.

Scroll Bar for Blog Post Body

Adding Scrollbar to Blog Post body
once you are logged into Blogger account, go to Template -> Edit HTML and scroll to this code. Add the portion shown in red:-

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;
Set 2 : Search for .post ( by browser Search) and Put the Red Portion in Curly Bracket. { }

.post {
height:200px;
overflow:auto;

}

This will give you scrollbars to every post:-

Scrollbars within Blog Post
Sometimes, you may not want to have the scrollbars to all the [...]

This will give you scrollbars to every post:-

Scrollbars within Blog Post

This setting, scrollbars will automatically appear according to your need:-
Sometimes, you may not want to have the scrollbars to all the blog posts, but only for several paragraphs within a post. Assuming you are writing an article and you wish to enclose some long text within a scrollbox, you have to first define a class within the stylesheet.

For example, we can insert in the stylesheet this code to specify the maximum height and width of the scrollbox. Once the text overflows

Step 1 : Open your Blogger Account and Edit Html Under Layouts Tab;
Set 2 : Search for by Browser search place the below code before it.

.scrollbox {

height:100px;

width:400px;

overflow:auto;

}

Step 3: Save the template.

Next, when you are writing a post, switch from the “Compose” mode to the “Edit HTML” mode and put the below code where your want to appear scrolling bar.

<div class=”scrollbox”>TEXT TO BE INCLUDED IN THE SCROLLBOX.</div>

You can continue typing the post by switching back to the “Compose” mode.

After you are done, when you publish your post, you will see that only the part of the text comprised with the tags will be in a scrollbox, like this:-

Show Limited Number of Labels in Widget.

As you write more and more posts you will keep adding labels to them to categorize your posts. You can add more than one label to any single post. Labels are useful as they serve as keywords channelling traffic to your posts through search engines like Technorati.

However the list of labels in your blog can get to be very long stretching your sidebar until y

our blog post looks like a flag on top of a long sidebar. To prevent this you can modify the code of your Labels widget to show only the topmost labels in your blog..............

Javascript Redirect Traffic from Blogspot to WordPress Site

Ok. So you’ve had a blogspot blog for a little while and you’ve decided you want a WordPress site. How do you redirect traffic from the old site to the new site and lose as little traffic as possible in the process.

First. Use the import feature available in WordPress. From your Daskboard, look for Tools > Import

Second. Add some javascript code to your blogger template. Update the vars blogTitle and wordPressUrl to match your blogspot blog.

<script>

  var blogTitle = 'Flexing My Kerkness';

  var wordPressUrl = 'http://kerkness.ca';
if( document.title == blogTitle ){

  window.location = wordPressUrl;

  } else {

  var newUrl = str_replace( document.title, blogTitle+’: ‘, ” );

  window.location = wordPressUrl + ‘/?s=’ + newUrl;

  }

  function str_replace(haystack, needle, replacement) {

  var temp = haystack.split(needle);

  return temp.join(replacement);

  }

  </script>

Basically what this script does is redirects from your blogger site to your new domain while conducting a search based on the title of page being requested.

For example. If you had a post called “How to change outboard motor oil” on blogger. When you try and access the blogspot url for that post you will be directed to the new wordpress domain and you will search for posts matching “How to change outboard motor oil”. If that post was imported into word press and you haven’t changed the title. Users will be shown a link to the post on your new site. Also they may find any new or relevant content you’ve posted since making the change to WordPress.