Recommended XHTML and CSS Practices

1.Divitis , Classitis, Tagitis

Please think twice before adding a tag to the page.

Bad code

 
<div id="header">
 
<div class="headerTop">
<h2 class="headerTxt">Site Name</h2>
</div>
 
<div class="headerTagline">
<span class="tagline">tagline</span>
</div>
 
</div>

Better Way

 
<div id="header">
<h2>Site Name</h2>
<span class="tagline">tagline</span>
</div>

2.Tables are okay for tabular data

I see some times that web developers are so passionate about divs and table less designs that they try to fake a table using divs (I was one among them :D) Be sensible to use tables when you are needing to show tabular data, like a list of customers orders etc.

 
<table>
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>varun</td>
    <td>varunkrish.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>google</td>
    <td>google.com</td>
  </tr>
</table>
 
is okay compared to 
 
<div id="table">
  <ul class="heading">
    <li>col1</li>
    <li>col2</li>
    <li>col3</li>
  </ul>
  <ul>
    <li>1</li>
    <li>varun</li>
    <li>varunkrish.com</li>
  </ul>
  <ul>
    <li>2</li>
    <li>google</li>
    <li>google.com</li>
  </ul>
</table>

3.Let the page have good content flow even with CSS removed.

By writing Semantic Markup, you make sure the content flow displayed to the user remains the same even with CSS turned off.
This is very critical when you see from the angle of the Search Engines and Mobile / PDA Devices.This also mean that you separate the content from the presentation

4.Use Tools to make ur life easier

Firefox – Web Developer Toolbar

IEIEDEV Toolbar

Opera – Dev Opera tools

5.Why do you need Inline Styles ?
Dont use them unless you want to messy code . Try to keep all the CSS in external files. Split the files if it gets big.

6.CSS / Loading times

When loading times of CSS file becomes a concern , you must try moving the styles into separate files so as to the reduce the amount of data. Also you dont need all the styles in the world for a single page. So organize them acording to your needs

7.Use relative paths to images

I see a a lot of sites using absolute paths for images used in either the HTML code or for the CSS background images.

Be smart, use relative paths to your images.

use 
background-image:url(/images/background.gif);
 
instead of 
background-image:url(http://site.com/images/background.gif);

8. I can do a lot of this with HTML why do i need XHTML ?

But HTML is loosing adoption and XHTML is gaining acceptance.Check these pages

for some benefits

New York Library site
WSG

XHTML is more closer to XML although both are derivatives of the same.

9.Make you site printer friendly with just a extra line of code and a CSS file

You must have seen media=”print” or media=”projector” line while including CSS files.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Should do the trick

10. Use a Syntax validator

MySQL 5 migration issue auto_increment property goes missing

I was migrating a simple MySQL database from my PC to my Web server.

I was stuck when I could not add records to my table . MySQl threw a duplicate value for primary key error.

I was able to add records to my table in the local database in my PC though.

When I compared the two tables side by side , I found the auto_increment property missing in the remote table.

 remote table mysql 4.1.21

auto increment missing

 local table mysql 5.0.27-community-nt

auto increment present

Further investigation proved that the real culprit is PhpMyAdmin.

When you export a table along with the SQL compatiblity mode set to Mysql 4, it chops the auto_increment property.

phpmyadmin

Need to find a workaround for this, Or is it time to revert back to Mysql 4.1 on local or look of a Mysql 5.0 host

Podworks.in – India’s largest Podcasting workshop

Podworks is the first of its kind podcasting workshop to be conducted in chennai on June 9 and 10. The two day event which will take place at Tidel Park will have the some of the famous podcasters from the country. Podworks is yet another initiative from the knowledge foundation, the key force behind the events like Blogcamp,Wikicamp and many other events.Podworks will be a workshop style unconference where all the knowledge needed for making a podcast will be imparted from people who have done it before and there will also be many hands on sessions, competitions and discussions. Podworks will be India’s Biggest Event on Audio & Video Podcasting event and promises to bring the best of the podcasting/blogging/new media community together to learn, share, experience, and grow.

There will be a door donation of Rs.200 for meeting the expenses of the event and of course there will be some give aways which will help you continue your podcasting experiments at home.

Registrations for the event are open and rush up if you are interested as the number of participants for the workshop is restricted. Keep yourself updated about the event by joining the mailing list. If you are interested in volunteering go check the wiki and take up some responsibility

Object Relational Mapping and Active Record Design Pattern

Object Relational Mapping ORM is a programming approach to handle data between the Database and the Object Oriented Language ex: .Net , PHP5 , Ruby on Rails, Python etc. I m writing in the context of Web Applications alone.

You might have come accross the term RAD – Rapid Application Development. ORM is a tool which helps rapid development.

CRUD – Create Read Update Delete is a cool technique used to speed up development and data entry.

There are many CRUD generators available for allmost all platforms as form development takes up a lot of development time. Some frameworks like CakePHP call it Scaffolding.Its not recommended for production environment though.

Some examples

Active Record Design Pattern

According to this design pattern, each database table is an object.So each Object is mapped to a database table (Relational Data) and hence O R M.

In short a database table is wrapped into a Class.

Also these concepts aid seperation of business logic and database code in the application.

For instance,

Product. name=”Code Book”

Product.price=”20″

Product.quantity=”10″

Product.save();

The framework should fire a SQL statement internally like

INSERT into Products (id,name,price,quantity) VALUES(null,’Code Book’,20,10)

For reading the Model / Class Data , you should be able to do something like

Product.findAll() which does a query – select * from products

Product.find(condition=>[name LIKE ‘%Code%’])

select * from products where name LIKE ‘%Code%’

I would like to tell about the Dependent Models/ Classes or Parent Child relationships.

A Product can have a ProductDetail class which is stored in the product_details table

Now we would normally have a foreign key in the product_details table which points to the Product table.

In terms of Classes/ Models the ProductDetail class is a child of the Product class. or Product class is a Parent of the ProductDetail class.

So when i load the Product using

Product.find(condition=>[name LIKE ‘%Code%’]) Internally a JOIN happens on the product_details table the object would have all related data Stored or Persisted

This is a very simple case, ideally many tables might be joined on the parent table based on a Foreign Key.

Performance IssuesÂ

What’s my concern about ORM is the amount of System resources this thing is going to take in an high traffic production environment.Say i have 1 Parent table and 30 dependent tables.

Each and every time I do any manipulation on the main table (even a simple read) 31 tables are going to used.

I remember Ram telling me that some ORMs do support Lazy Loading.

CakePHP does offer this called as the Recursive Loading where u can say recursive =0,1,2

from the manual

When the $recursive option is set to an integer value greater than 1, the findAll() operation will make an effort to return the models associated to the ones found by the findAll(). If your property has many owners who in turn have many contracts, a recursive findAll() on your Property model will return those associated models.

What I feel is that ORMs are not perfect and are highly suitable for internal applications.

Links

http://manual.cakephp.org/chapter/models

http://ramsnotes.blogspot.com/2007/02/brief-introduction-or-mapping.html

http://www.martinfowler.com/eaaCatalog/metadataMapping.html