I know, your are very much in CSS and HTML, But you may get more complex situation when project is getting bigger. Basically your styles sheet is getting larger and it may difficult to manage. This may also effect scalability into your project. If you have a team and work with front-end development, you should have a well defined process and procedures. If not, you may get trouble in future, when you are going to improve your project.

Also web page rendering speed is another matter to subject from a Web developer perspective. The front-end developer should suggest, how to improve the user experience by adding some performance best practices into the web pages.

How we can identify this situation.

1. When new features add into a project, stylesheet get larger because we couldn’t reuse style rules for new elements added.
2. Lack of well-defined documentations for HTML layouts and CSS may waste your time and new updates may conflict from old styles rules.
3. We have to spend more time to communicate within team to do small updates.
4. Basically CSS and HTML files maintainability is more difficult within the team.
5. Lack of scalability

Finally we have to learn how to structure our CSS to allow for flexibility and maintainability as our project and team grows.

Here is what we did for overcome to this situation,

The main purpose was to identify how to organize CSS, flexibility, scalability and maintainability when the our project and our team grows. The following resources were found in initial research.

• Object Oriented CSS Framework by Nicole Sullivan
• Sass – is a web-framework plugin/ command line tool which can be translated to well-formatted in adding nested rules, variables, mixins, selector inheritance, and more.
• Kss – is a methodology for documenting CSS and generating style guides

In addition to great set articles for Scalable and Modular Architecture for CSS in advance reading.

The Principles Of OOCSS

The purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.

KSS

Documentation is a must when you work on a project as a team. This will give more understanding among the team, it will save more time as well. KSS is great small library to provide a methodology for writing maintainable, documented CSS within a team. KSS only generate well-define documents your project.

KSS is built on Sinatra ruby framework. You can enhance the documentation by adding more simple helper. It basically support Sass to parsing the CSS documented with KSS guidelines.

The first week we try to collect the resources above. So by next week we will try to implement the thing using above tools.

I wanted to special thanks Lakshan (Initiate the concept behind this project) and Amila (work on HTML and CSS)

I like to Theme System in PyroCMS.

PyroCMS has two main theme systems for “Front-end Theme” and “Admin Theme”. This is the great feature in this system, so that create our own professional “Control Panel” for my clients. As well as front-end theme system is so easy to understand what you are having the HTML knowledge by using the WordPress system.

WordPress system is build on for only blogs, But eventually lot of web developers tried to create much advance website also. Currently wordpress has more than 18,000 plugins their repository and lot of custom themes. This is the power of WordPress. But back-end customization is not easy as PyroCMS. PyroCMS admin control panel is separate from the website. So regular users cannot see the admin view, but we can provide a better dashboard view for each users by extending role management system. This is one of main point to use this CMS for my future developments.

Widgets, Plugins, and Modules

If you need to get more complex functionality into your website, you can install custom widgets, plugins and modules or you can create your own widgets, plugin and modules. In addition to you can download free and paid third party ones for their “add-on” store.

If you are interesting to develop, PyroCMS provide lot of customization other than creating new modules. In my first installations I need Faqs module to be installed. But I needed to change the presentation view into the webpage. I am lucky to using such a advance system provide to overwrite the Module view in your template.

Finally I can says, PyroCMS is easy to use, it has a smart caching system to keep everything running smoothly. It can be easily extended with Modules, Widgets, and Plugins which are easily as you like.

If you are trying to think the content objects as modules format structure, definitely your will get more benefit for more dynamic behavioral pages in your web application.

What are the major advantages,

1. You will able to increase your rate of development process.
2. This module format structure provide accessibility and performance.
3. Naming convention is fit into Yahoo’s Standard Module Format and it became standard across all JavaScript libraries as well.
4. Simple to make it up (Skin)
5. Facilitate reuse the CSS styles
6. Flexibility to add element objects into the separate sections in the module

The standard module format is based on the YUI module control.

<div class="mod">
	<div class="inner">
		<div class="hd">head</div>
		<div class="bd">body</div>
		<div class="ft">foot</div>
	</div>
</div>

Find more details from Modules – Container Objects of the OOCSS project.

The Ajax Pagination plugin is to convert WordPress default pagination behavior into the Twitter style (old) using Ajax functionality. You can use this plugin to where the pagination is available in your template. You can check demo on Vesess blog also using this plugin.

Features

1. Load posts in Ajax functionality
2. Twitter pagination style
3. The default pagination where the functionality is available in your template can be replaced
4. Custom post type post pagination support
5. Javascript “callback” function after one page is loaded

Download and Installation

Download the plugin and install using correct with guidance.

How to use this plugin in your template
After you install the plugin, insert following code into your index.php file.

<?php 
     if(function_exists('genarate_ajax_pagination')) 
         genarate_ajax_pagination('Read More', 'blue');  
?>

The “genarate_ajax_pagination($btn_name, $color_name, $loop, $query)” function has four parameters may help to you get more functionality from the pagination button.

$btn_name is string (optional). The button name default value is “Read More”

$color_name is string (optional). The button background color names. by default “blck” is applied and you can use following colors, or your custom colors.

1. blue
2. red
3. magenta
4. orange
5. yellow

Note: this plugin is used CSS3 functionality buttons. The original credits to Super Awesome Buttons with CSS3 and RGBA

$loop – string (optional). The default is ‘content’

Note:
The ‘twentyeleven’ theme support ‘content’
The ‘twentyten’ theme support ‘loop’

The loop file is where the posts/content will be loaded. The default value is (if you don’t set $loop variable) ‘loop’. This usage is that, the plugin load your post content template, eg: get_template_part($loop). Advantage of this parameter is that you can use the pagination in several places in your WordPress theme to load the posts/content from.

$query – array (optional), the default is array()

If you are using custom query to display posts, pagination plugin also need the custom query array to run loop. The advantage of this parameter, you can use any Custom Post Type Template. eg: array(‘post_type’ => ‘custom’)

How to handle the callback function

This plugin is used jQuery javacript framework to handle the AJAX functionality on client side. So this plugin is triggered a customer event name called ‘complete-paginate’ once complete the next page append to the page.

The important of the custom event in client side is that you may have twitter or Facebook button or a specific bound event in the loaded posts content. This custom event may help you to re-assign events any effect.

The custom event can be bound into the button (id=”ajax_pagination_btn”). eg:

$('#ajax_pagination_btn').bind('complete-paginate', function(event) {
  console.log('update other Js functionality');
});

Since Version 2.8, the taxonomy parameter was added so that any taxonomy could be used to generate the tag clouds. As well as WordPress contain existing widget so that easily add tag cloud to the sidebar or somewhere in template.

The clouds are available for Categories or any other Custom Taxonomies to present in you web site. But you can control only available parameters for appearance tag cloud.

But if you want to present the post count for a specific tag, we cannot generate using wp_tag_cloud() function. So we can use simply following Hack to generate any type of output in your tag cloud.

   $args = array('taxonomy'  => 'post_tags' );
   $tags = get_terms( $args['taxonomy'], array_merge( $args, array( 'orderby' => 'count', 'order' => 'DESC' ) ) ); // Always query top tags
 
   if (!empty( $tags )) {
	foreach ($tags as $tag){
          $link = get_term_link( intval($tag->term_id), $args['taxonomy'] );						
           $list .= '<li><strong class="tag_link"><a href="'.$link.'">'.$tag->name.'</a> ('.$tag->count.')</strong></li>';
	}
   }
echo $list;

The get_terms() function will fetch the all tags data as an array for specific taxonomy. Above example I used default post_tags as taxonomy. But get_terms() function doesn’t contain the tags link, so I used get_term_link() inside of the Foreach loop. Well, finally print the output as follows,

Before released WordPress 3.0, it had only one Post type to add article. But 3.0 has grate feature Custom Post Type . This feature will easy to hold and display many different types of content.

As well as another main issue also was solved with this introducing by Custom Post Types. The problem was URL suture of web site. Most of time post URL was Base_URL/blog/%date%/%post_name%/. But my opinion is URL should be best way to have as following
Base_URL/blog/%post_name%/ . Your know this format can be enabled old system. But we couldn’t set different kind of URL formats to the post. But this feature is come with Custom Post Type. We can have different kind of post urls. For examples you have a Magazine and Project in your organization. Now you can separately maintain two Post Type and you can assign the URL format for each post type.

I developed a new web site using WordPress 3.0 with new features. I created new two Custom Post Type for pages name called Magazine and Project.

You can create Custom Post type as Follows, Note: Let’s create Custom Post Type name as “Project”

<?php
	register_post_type( 'projects',
                array('label' => __('Projects'),
			'public' => true,
			'show_ui' => true,
			'supports' => array('title','editor','author','thumbnail','excerpt','comments', 'custom-fields'),
			'menu_position' => 5
			)
              );
?>

And you can taxonomy for each Custom Post Types.

function create_my_taxonomies(){
    register_taxonomy( 
                          'projects-category', 
                          'projects', 
                          array( 'hierarchical' => true, 
                                   'label' => 'Categories', 
                                   'query_var' => true, 
                                   'rewrite' => array( 'slug' => 'projects/category' ) 
                       ));
 
   register_taxonomy( 
                         'projects-tags', 
                         'projects', 
                         array( 'hierarchical' => false, 
                                  'label' => 'Post Tag', 
                                  'query_var' => true, 
                                  'rewrite' => array( 'slug' => 'projects/tags' ) 
                        ));
}
//create taxomony
add_action( 'init', 'create_my_taxonomies',0 );

Above code will create a Custom Post Type and you can see it at backend in WordPress. Now you can create post under the “Project” post type as default “post” main type used by the blog in WordPress.

I will provide more details about complete WordPress 3.0 template creating on next posts.

I addition to WordPress having grate ability to change admin interface, just like organize Main menu order and remove some component without directly editing the core of WordPress.

Here is one of tip I just used today. Let’s think you don’t need WordPress default the Blog post type in your developed theme. As I shown above the codes, you have create your own Custom Post Types and you have a fully control of the web site with them. But you may not need default Post type anymore. So you can remove it form back-end main menu.

Just add hooks to the functions.php

function remove_menu() {
	global $menu;	
	$menu[0] = array( __('Posts'), 'edit_posts', 'edit.php', '', 'open-if-no-js menu-top', 'menu-posts', 'div' );
	//remove post top level menu
	unset($menu[0]);
}
 
add_action('admin_head', 'remove_menu');

I think this will help to understand backend configuration using simple and smart hooks of WordPress

Again, I will working with TYPO3 organization project in this year with my busy schedule. Anyway I am so happy at this time, because of I have to spend my best effort to this project. TYPO3 is a free, feature rich, Content Management Framework built with PHP. As a web developer I am so interesting with PHP, jQuery and RoR. TYPO3 is built with PHP and it use EXT JS as main Javascript library.

Basically, my project is “Enhancing usability of the next Generation List Module” in TYPO3 CMS. Through this project, I hope to integrate AJAX functionalities (using EXT JS library) into the next Generation List Module of the TYPO3 Backend. This project aims to enhance the user experience, accessibility, performance improvement in the system’s functionalities.

TYPO3 community’s members are giving good support to me and I am luck to say, there are two mentors assigned for my project. My core mentor is Thomas Hempel and Tobias Liebig also provide good support to continue my project.

This is my full proposal of TYPO3 project: https://docs.google.com/Doc?docid=0AbEzQPPZTDD0ZGZueG5nZjNfMzJ2NzljMnZmNQ&hl=en

I am not going to talk about Gmail and other applications. But I am also using Gmail. And I was a problem to notifying a new mails which come Gmail inbox. Sometime I am late to check the new important mails. Meantime I go to check new mails very often. But it was very time consuming task when I work projects. And I was finding a solution to avoid this problem. Finally I found a Firefox plugin named Gmail Notifier. It is very useful plugin if you are wasting time on Gmail.

It Supports:

• Mozilla 1.4+ (all platforms)
• Firefox 1.0+ (all platforms)
• Seamonkey 1.0+ (all platforms)
• Flock 0.7+ (all platforms)

Features:

• Monitor multiple Gmail accounts from within your Mozilla-based browser.
• Statusbar item available for all browsers, and Firefox users get a toolbar item as well.
• Supports Gmail Hosted accounts. Simply use username@hosteddomain.tld as the username in the notifier.

In addition can play a nice notify sound track when new mail receive. I think this is very good plugin for you and get a experiance with Gmail Notifier plugin.

If you want to disable any key in ur key board just select a key form the Key Selection Area, then click the Disable key button on the Keyboard Controls Area, by applying changes you did. Likewise you can control your keyboard keys.

And other features :

• Simple interface
• Ability to Teach remapping by pressing the keys to be remapped
• Easy-to-read lists of all current and pending re-mappings
• Implementation of Specialty Keys support for certain keyboards
• Remove all re-mappings with a single button
• Enable/disable annoying keys
• Displays what exactly is written to the “Scancode Map” registry value and how to
  interpret its binary data
• User warnings help ensure Ctrl-Alt-Delete sequence is maintained

Following tips are very useful to creating an email newsletter.

1. Make sure the information is well-structured.
2. Remove high score spam words.
3. Make sure the first paragraph is effective, as they are the most important.
4. Keep it simple.
5. Represent includes in graphically as possible.
6. Email template design is very creative and use relevant Colors.
7. Provide as much contact information as possible individual to contact, address, phone, fax, email, Web site address.
8. Provide to shorter summaries of your content, but link to more complete place in context.
9. Try to build up trust from the beginning.
10. Send Email at the right time

I have found some excellent email templates.

Skype email template form Skype

Curdbee template form Curdbee

Backpack template form Backpack

Xero template form Xero

Beanstalk template form Beanstalk

Shopify template form Shopify