So whats been happening? Well the most important change is that I have made a career transition to work for AOL in NY. I’ve taken a step back from leadership to start working on ground breaking social implementations at the Huffington Post (a now AOL company). Im currently leading social development and have launched some really cool things like the Huffington Post Facebook App.

I continue to work closely with the Facebook and Twitter engineers on some really cool and exciting stuff. I am extremely happy and proud to be employed by AOL. They are the single best company I have ever worked for and I look forward to being there for a long time.

I also recently released a new wordpress plugin on CodeCanyon.net. WPToWord is a content export tool that takes your posts or pages and exports them to a downloadable word document. A lot of writers have found it really useful and I continue to develop on it.

In October I spoke at WordCamp Boston about user management, and in November I spoke at WordCamp Philly about HTML5. Its been a really great experience speaking at these conference and I really look forward to doing more of them. WordPress 3.3 (Sonny) was release this month, I was also named in the credits having done some bug fixes for some multisite functions.

I moved and sadly I no longer have my recording studio :( but I am trying to fill the void with really awesome development work. Look forward to some really cool stuff coming this  year.

Merry Christmas and Happy Holidays!

Number 10: Using tables to layout a site design.

While this practice is slowly going the way of the dodo, I feel that for continuity it has to have a place on this list. So coming in at number 10, please please please don’t ever use tables to layout a site design. Do it right, do it wrong, but do it with elements.

Number 9: iFrames

There is a time and a place for everything, it will rarely ever be the time or place for an iFrame. Web apps are about the ONLY place I have ever seen an iFrame used properly… So if your not developing web apps for Google or Apple, leave this  element at the curb with the rest of the trash.

Number 8: Using Images for Text

For the vast majority of basement web designers doing this for the first time, it is extremely common to pitch a site with an unsupported font for a header or body content. Come development time you realize that you can’t put that font in real text and your client absolutely loved it! In fact it’s so unique they’d never seen a site do that before (for a reason), you’re a hero! We’ll guess what ::fail::… now you have to put all that great content in an image and none of the engines will ever get to read it.. Stay away from this mistake, learn the difference between a web safe font and a non-web safe font. If you still really need to go that extra mile, check out one of the terrific font serving services like typekit.com or fonts.com.

Number 7: Flash Based Websites

Wow, that people are still doing this is amazing to me. It has always been my opinion that Flash should be used to enhance a site not build one. If you find your self in the Flash application for more the 5% of your total development allotment you are probably doing something wrong. Pay attention to the industry, when the leading edge computer company is not shipping ANY of it’s devices with flash support…. then something is changing. Tell your clients that all that moving and shaking is great…as long as they don’t care if no one ever see’s it.

Number 6: Unnecessary Scrolling (of ANYTHING)

When I load a site in my 19″ monitor I should NEVER see a horizontal scroll bar, especially when it just scrolls dead space caused by an over abundance of empty <p> tags or non-breaking spaces &nbsp;

Number 5: Using &nbsp; To Align Elements

Number 6 leads us nicely into number 5, never ever ever use ‘&nbsp;’ to align elements. We have such great tools in CSS that add no weight to the web page, why would you resort to the unpredictability of spaces. Margin, padding, line-height, word-spacing, text-align and letter-spacing are all proper ways to space your content.

Number 4: Optimizing for One Browser

Get off your highhorse, people use IE and people use Firefox, Safari, Opera and Chrome. Saying that you won’t support or gracefully degrade your site for browsers other than your favorite is just cocky and ridiculous. Clients like their sites to be viewed, that’s why they are paying you to make them viewable. Is it really that big of a deal to spend 15 minutes creating an IE only style sheet that removes all of your rounded corners and drop shadows that you’ve probably overused anyway?

Number 3: Declaring CSS or JS inline or on page.

This is great for a one page site, but when you want to change the font across your ecommerce store, this practice becomes quite a big headache. Not to  mention that all the extra weight your adding to your HTML page by typing those long strings of styling in your element property tags.

The same is said for Javascript… a little hint most engines cut off reading your site after the first 5-600 characters of CODE, not CONTENT. Filling the entire <head> with JS eats up all this space. Not that you should be putting JS in the <head> of your doc anyway it should really go at the bottom.

Either way, keep your styles and JS in separate external files, its just the right thing to do…. unless you want kittens to die.

Number 2: Terminating lines of code JS or CSS

I see this as the web developers tripwire. Leave a line of code un-terminated and sit back and watch as the next developer struggles to figure out why his code is breaking as you snicker in amusement. Terminate your lines… leaving off that last semi-colon does not make you cool nor does it save anything when it comes to page load therefore making it a pointless and irritating habit.

Number 1: Using 3 different JS Frameworks on the same page

I like to call this a side affect of GCP or Google Copy Paste. Too many front end developers go out and search Google for the needed slide show, fading UL, or form validation scripts and end up compiling 3 or 4 different Javascript frameworks on a single page. This then escalates into conflicts in the code, endless hours of trolling forums for help and overall a page that is so heavy it could crush a Volkswagon. Learn one library and stick to it, if you don’t have the patience or technical expertise to learn Javascript then at least stick to solutions that all use the same framework making it easier for people to help you when you are trying to figure out why nothing is rotating, sliding or fading.

Runners Up: A few practices that make honorable mention….

A. Empty property tags: if your going to leave them empty, why bother putting them in at all?
B. Negative Margins: Although there are a few good tutorials that show you how to achieve results from difficult designs using these, try seeing if you can change the design first
C. Non-repeating Backgrounds: It’s great that the 1280×1024 picture of your cat fits perfectly in your browser window, but when I view it on my 1650×1040 resolution, the added white space looks really unprofessional. Not that I would like your site anyway if a cat is your background image…. #justsayin

Well that concludes my list of the top 10 (or 13) web development faux-pas. Go forward and be well knowing that someone out there is meticulous judging you and your work while snickering behind your back.

So a few months ago, the Envato network put out a call to all HTML5 developers to help them fill out their new HTML5 category on CodeCanyon.net. I decided to convert one of my existing drop down menu scripts to an HTML5 powerhouse that used some new entities and CSS3 properties.

After one simple revision my HTML5, CSS3 and Javascript drop menu system was approved for sale. Check it out here!

I have to give mad props to the guys over at Envato, especially Jeffrey Way. These guys take a lot of pride in their work and ensure that all the code that gets submitted to their site is thoroughly reviewed and is top notch.

Thanks Guys, I plan to post a lot more snippets now that I am comfortable with the process!!!

HTML and CSS Validation has been the center of an intense debate for years; some web developers believe that validation is pointless since many of the specs change on various DOCTYPE’s and DTD’s, while others believe that your website is not truly valid and accessible unless you are in 100% compliance with whatever DOCTYPE you use. I will not begin to pretend that I can fairly and accurately mitigate both sides of this argument, what I want to do is take a look at it from a different perspective.

About 10 years ago while I was attending a small technical college in New Jersey, I began freelancing web design. At that time standards were pretty low, and there hadn’t been too many companies or individuals doing it as a business. As a result, pricing was erratic often ending up only at “well it works and the client likes it so how much can I milk them for!”. Without today’s convenience of jQuery or Prototype and certainly very few frameworks, almost everything was from scratch. You never really knew how long it was going to take you to complete a job.

Shortly after the big internet boom and the collapse of the job market, the community of web designers and developers was flooded with what I like to call ‘myspace coders’ and overseas application developers who all considered themselves to be top notch when it came to markup and the development of websites. Individuals who could change the CSS on their Myspace page started applying for entry level jobs at large corporations, setting a new curve of salaries that we are still fighting today. What made things worse, is that companies were still trying to figure out the web and had no idea who to hire to help them do it.

Resume’s started to read every keyword under the sun… IE( EXPERT AT PHP, RUBY, ASP, XML, XHTML, JSP, JAVASCRIPT, HTML, CSS, PHOTOSHOP, DREAMWEAVER, PYTHON, PERL, C++).. etc. As a hiring manager for an agency I will tell you that the first thing I do is throw these resumes away. I know that when this person comes in, you can ask them to code something in any of these languages and the response will be ‘I can try but I am rusty‘ or ‘I have modified it, but not from scratch‘. Alas, most companies don’t test people and will just hire you based on what you say you know. So the infiltration was a success.

So what does all this angry rambling mean, at first I viewed this as what would be the death of the real web developer. Real developers like myself would get frustrated and give up, while these half time hero’s would slowly creep in and take over the industry producing nothing more than poorly modified templates from some outsourced vendor. Even ‘my neighbors 15 year old son’ was in on the action building websites for the price of a new skateboard.

As we begin to move into what I like to call the golden age of the web, we have an opportunity to flush the market and rid the community of these impostors. With the sudden interest in and finite definition of web standards, along with the growing community of industry idols like Eric Meyer, Jeremy Keith, Jeff Way, and Jeffery Zeldman, we now have the tools to solidify our future and the industry.

This all brings me to my point, Validation! Validation gives us a baseline for the quality of our medium. Validation can help us filter out the impostors and quantify our costs to deliver. A successfully marked up and validated piece of code can not be argued or refuted. It is industry standard and is something that we should all be taking advantage of. This can be the first step to reclaiming the business that should belong to those that have the necessary training and education to properly build a web presence. I know validation is heavily debated, but I think it stands to reason that there are many ways to build the same site, and as long as it validates its safe to say it was done correctly.

This script is intended for people who already know about themes in wordpress, and kn0w how to use the ‘functions.php’ file.

Its pretty simple. First you have to globalize the ‘posts’ variable within the function or get_pages() wont work. There are number of params you can pass to get_pages() however I only really need to use 3. The first is what pages to exclude. I pass this in via the template files. I am only doing this because I need to exclude a particular custom page from all the navigations on the site.

Lets take a look at the others..

$pages = get_pages("exclude=$exclude&parent=0&child_of=0&sort_column=menu_order");

In order to only display the top level pages of my site, I am passing in parent=0, this means top level, and child_of = 0, this means no children of the parent page. So now I am free to add a bunch of sub pages and know that they wont automatically blow up our custom nav, but top level pages will be added.

The next item is sort_column=menu_order… just a side note, these variable are passed like a query string so always remember to use your ampersands :) The sort_column has a few options, I manually manage the page order in the WP CMS, thats what I am using.

Here is the rest of the function.

	function active_nav($exclude){
 global $post;
 $pages = get_pages("exclude=$exclude&parent=0&child_of=0&sort_column=menu_order");
 foreach ($pages as $row) {
 if(is_page($row->ID)){
 echo "<li><a href=\"".get_page_link($row->ID)."\" class=\"current\">".$row->post_title."</a></li>";
 }else{
 echo "<li><a href=\"".get_page_link($row->ID)."\">".$row->post_title."</a></li>";
 }
 }

 }

Its pretty simple, it just checks what the current page is, then applies a class 0f “current” to that navigation item, giving us a custom active class.

Now all you do is call the class in the theme files like so:

<div id="nav">
 <ul>                                   
 <?php 

 active_nav(your_page_id_int);

 ?>
 </ul>
 </div>

Here is a link to my github with this script.

Cheers

Updated: A new version of this script can be found on my GitHub Account… its much sleeker and requires nothing to be put on the input fields. Heres a link to my new self clearing input script

First you have the js

//This can go in the main js or whatever...
function clearInput(staticValue, id){
	if($(id).value == staticValue){
		$(id).value = '';
		$(id).observe('blur', function(){
			if($(id).value == ''){
				$(id).value = staticValue;
			}
		});
	}
}

Just make sure you download and include prototype.

Here is a sample of the html!

Each Input field must have a unique ID for this to work. The first argument in the clearInput() function is the static value of the input field.

First we have the PHP class file:

class last_tweet{

// The Base URL to Use
protected $base_url = "http://twitter.com/";

// Grab the URL
protected function get_url($uri)
{
// Start the cURL Connection
$connection = curl_init();

// Set Options
curl_setopt($connection, CURLOPT_HEADER, 1);
curl_setopt($connection, CURLOPT_RETURNTRANSFER,1);

// Set the URL to Grab
$fetch_url = $this->base_url . $uri;
curl_setopt($connection, CURLOPT_URL, $fetch_url);

// Get the Page
$page = curl_exec($connection);

// Close the Connection
curl_close($connection);

return $page;
}

// Parses the XML
protected function parse_xml($xml_string)
{
$xml_string = strstr($xml_string, 'get_url($api_call);
$xml = $this->parse_xml($page);

// Return the XML Object
return $xml;
}

public function show_tweet($username, $num)
{
// Grab the tweet
$tweet = $this->get_tweet($username, $num);

//all your display code can go here if you want, Im just returning the array from the simplexmlelement

return $tweet;
}

}

Its pretty simple, nice number of functions to set the cURL transfer, send the request to twitter and return the XML. So the next step is just instantiating the class and doing something with the data from twitter:

include_once('class.last_tweet.php');

//instantiate
$last_tweet = new last_tweet;

//Your Username
$username = 'Your Username';

// number of tweets returned, can be as many as you like. I think twitter limits at 200
$num = '1';

// Grab the Tweet XML
$tweet = $last_tweet->get_tweet($username, $num);

Here I just spit it out on an empty HTML page. You can decided how you want to disseminate the data.

print_r($tweet);

Thats it, get your last tweet info from twitter. Use it wisely, twitter only allows 100 calls an hour to the restful API.

Here is the source code: Last Tweet PHP Class

Cheers!

LSCOLORS A bash Command

The first thing you should know is that this is not as straight forward as most people like to make you believe. I am a total n00b when it comes to bash so I really need to start at the beginning.

Step 1: Make sure .bashrc is being used by terminal

This is the easiest step. In terminal navigate to your home directory. This is usually accomplished by typing ‘cd ~‘ and executing. Then do a quick directory listing showing all hidden files ‘ls -al‘. Once you do this, you should see both a ‘.bashrc‘ and a ‘.bash_profile‘. If you don’t, no need to panic we can create them easily and Snow Leopard is smart enough to know what to do with them.  So if they don’t exist, execute these 2 commands in terminal ‘touch .bashrc‘ ‘touch .bash_profile‘. If you re-run your ‘ls -al‘ again you should now see the files.

Step 2: Link .bashrc to .bash_profile

Using your favorite editor, in my case Textmate, open ‘.bash_profile’. This file needs one line.

source ~/.bashrc

Update: A good friend of mine at blog.ubrio.us just gave me the scoop on ‘bashrc‘ vs ‘bash_profile‘. The gist of it is that bashrc is read when you open a new tab in terminal locally and bash_profile is read when you are SSHing into the environment. So choose whichever works for you. I just link them because I want the same view no matter how I am connecting.

Next open the ‘.bashrc‘ file, this is where we can have some fun.

Step 3: Colors LSColors and more LS_Colors…

The first thing we have to do is prepare bash to receive the colors, in order to do that you need to enter these 3 lines.

export LS_OPTIONS='--color=auto'
export CLICOLOR='Yes'
export LSCOLORS=''

This should be pretty straight forward, we are exporting the LS_OPTIONS and saying to use colors and to automatically choose them for us if I have not chosen them. CLICOLOR=’YES’ is telling bash to force color output and LS_COLORS is where we will start to define our scheme.

Here are the colors that are available:

• a = black
• b = red
• c = green
• d = brown
• e = blue
• f = magenta
• g = cyan
• h = light gray
• x = default

It is important to note how the color codes pair up. Basically each entry will be a Foreground | Background pair. so ‘ex‘ means foreground blue background default. The ‘default’ color will be whatever you have set in your command line app’s preferences. Most default to a white background and black foreground. By simply upper-casing any of the color codes you can bold your text, this really on works on foregrounds. Example: Bx means bold red foreground and default background.

The next thing that I found difficult to find was how these color codes were ordered. So it’s like this….

1. DIR
2. SYM_LINK
3. SOCKET
4. PIPE
5. EXE
6. BLOCK_SP
7. CHAR_SP
8. EXE_SUID
9. EXE_GUID
10. DIR_STICKY
11. DIR_WO_STICKY

Wow that’s a lot, but that’s the order..

Step 4: Putting it all together

So now you have the order and you have the colors, lets put it all together. I use a default background of black and a foreground of white, so I use a lot of default color settings.

export LSCOLORS='Bxgxfxfxcxdxdxhbadbxbx'

Here is the break down:

1. DIR = Bx #Bold red text with default background
2. SYM_LINK = gx #cyan text with default background
3. SOCKET = fx #magenta text with default background
4. PIPE = fx #magenta text with default background
5. EXE = cx #green text with default background
6. BLOCK_SP = dx #brown text with default background
7. CHAR_SP = dx #brown text with default background
8. EXE_SUID = hb #light grey text with red background
9. EXE_GUID = ad #black text with brown background
10. DIR_STICKY = bx #red text with default background
11. DIR_WO_STICKY = bx #red text with default background

Step 5: Wrap UP

So your done, save your bash files and restart terminal. You should now have colors.

Well that’s it, I hope this helps you figure out your bash color profile: :) cheers!

	//Posted values are strings like "2010-01-26"
	//Parse dates as unix
	$start_date = mysql_to_unix($_POST['start_date']);
	$end_date = mysql_to_unix($_POST['end_date']);

	//now get the date details
	$start_date_array = getdate($start_date);
	$end_date_array = getdate($end_date);

	//now lets get all the days and get ready to put it in the DB.
	for ($i=$start_date; $i <= $end_date; $i = round($i + 86400)) {
		$day = getdate($i);
		if($day['weekday'] !== 'Saturday' && $day['weekday'] !== 'Sunday'){
			$days[$i] = $day;
		}
	}

	print_r($days);

So that's it pretty simple and straight forward. It just returns an array of 'day' data for each day between the 2 posted dates. I have a lot of sanity testing going on etc, but took a while to figure out so I felt like I should post it up and share.

Too often I find a little snippet like this on an obscure site that is the answer to a problem I have been trying to figure out all day. So maybe I can be that helping hand for someone else.

I am going to go ahead a regurgitate what everyone has been saying for years now, that IE6 is just well past its prime and its time to retire it. This has been beaten death time and time again, so I am not going to list all the reasons why we should drop it, I am just going to tell you how to make sure that users with IE6 are properly handled on your site.

Its actually very simple. First you drop in this bit of Javascript.

//Nothing special here... just telling javascript to kick IE users out
var browser=navigator.appName;
if(browser == "Microsoft Internet Explorer"){
window.location = "no_ie.html";
}else{
//you can remove this, I just like to see what browser we ARE seeing
//alert(browser);
}

This should stop IE users, if you are trying to detect some other browser or you are curious what the navigator.appName is returning just un comment the alert above. You can also change the window.location to be any URL you like. In my case I redirect them to a page that thoroughly insults IE6.

Add this to your sites and support IEDeathMarch.org