What THML5 features can I start using now?

List of popular names used for the class="" attribute in HTML.

Handy snippits of HTML5 goodness

List of meta data tags and links to use in the head of an HTML document.

A quick guide for a bare bones, handheld stylesheet. Works well on Blackberry browsers.

Excellent video series teaching the fundamentals of web design and development

Clearly showing the difference between tags, elements, and attributes for HTML.

http://0to255.com/ – “0to255 cures your color manipulation woes. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.” My favorite part is that it uses a RESTful API so you can do things like http://0to255.com/0099ff You know I just love things that you can manipulate with a url.

http://cssdesk.com/ – A tool for quickly mocking up snippets of HTML/CSS. I would prefer to just create a new HTML file in Dreamweaver and play with it using Firebug, but this could work too. I found the cursor in the HTML/CSS box to be a little off when hitting return. CSSdesk has a nice interface which is almost like a desktop application. And since you can download it and run it locally, I guess it qualifies as a genuine application.

Please Do Not Change Your Password – Alot of security’s best practices cause more problems than they solve. “At countless conferences and seminars, experts have consistently called for more education and outreach as the answer to user apathy or ignorance. But the research of Herley and others is causing many to realize most of the blame for noncompliance rests not with users, but with the experts themselves — the pros aren’t able to make a strong case for all their recommendations.”

Holistic Web Browsing: Trends Of The Future – “The future of the Web is not at your desk. It’s not necessarily in your pocket, either. It’s everywhere.” How do we design for a Web that was only intended to be used in a single context?

WTF? (Video) – “This clip comes from Hard Ticket to Hawaii, possibly the worst 1980’s movie made (though to be fair, it’s tagline of Bombs, Babes, and Beaches is quite… radical).” At first I thought the acting was WTF, then I saw the ending.

“How many SEO copywriters does it take to change a lightbulb, light bulb, light, bulb, lamp, bulbs, flowers, flour…?” — Chris Rowe 5 Links Of Interestingness by Russell Heimlich

How to modify WordPress' Gallery HTML shortcode

I woke up this morning with a profound realization. “Why not put print stylesheets at the bottom of the page so they load last?”, I thought to myself. It makes perfect sense to any performance-conscious web developer who savors every last millisecond of performance gained. Your print styles aren’t needed until you print the page, so it is okay if it takes a little while longer to download.  Unfortunately the quirkiness of the browser makers trumps our otherwise sound logic. According to tests done by Steve Souders, web performance guru extraordinaire, Internet Explorer blocks the rendering of content until all of the stylesheets have been downloaded regardless of their media type. And since Internet Explorer is the dominant browser by visitors to most mainstream sites, there is absolutely no benefit to including the print stylesheet at the bottom of the page. A possible workaround would be to dynamically insert the print stylesheet (using JavaScript) into the web page after it has finished loading. This just feels icky to me as the poor sap who is most likely to print out the webpage I so meticulously coded is also the poor sap using Internet Explorer 5.5 with JavaScript turned off and BonziBUDDY turned on.

a

PHP script that automates creating HTML/CSS bar charts out of UL or OL elements.

Tips for optimizing HTML documents.

5 WYSIWYG editors

Simple lines of code to crash IE6.

Every web developer is looking forward to the new HTML spec, HTML 5. The new spec will birth 20 new elements to add more underlying semantic meaning to content. The new elements came out of popular IDs and Class attributes for common situations in web design: <nav> is just like <div id=”nav”>. But these new elements are just a stop gap.

I wish the web community could move beyond pigeon-holing ourselves with specific elements. Why can’t we make our own elements to better describe our content? If I had my way <div>s would be ancient history and any element not already defined in the HTML spec would be treated by browsers like a <div>. There are many benefits to opening up the element nomenclature like this. 1) It will be much easier to describe content. No longer will we need to shoehorn our content into quasi-relevant elements. Did you know the <address> tag is to define the contact information for the author or owner of a document and not to hold a plain street address? 2) No more div-itis. Web developers will no longer have to wade through a dozen </div> tags. <div> tags are the least-semantic structural elements in a web designers toolbox; it literally means ‘division’ of a page and is used to mark off different sections within a document. Things can get pretty messy when using too many <div>s however as it is hard to tell where they end. Take a look at this code example:

<div id="container"> <div id="article"> ... <div id="chart"> ... </div> </div> </div>

Look how much better this markup looks from both a readability and maintainability perspective:

<container> <article> ... <chart> ... </chart> </article> </container>

A benefit to free-form elements is the semantic closing tags making it clear where each element begins and ends. 3) Microformats might actually work. The movement to create semantic markup using loosely agreed upon Classes slowly died off due to the extra bloat it introduced to the underlying code. With the ability to create your own tags, Microformats could flourish and we can begin to set-up our own best practices for describing content. 4) Faster JavaScript. Not many browsers support the JavaScript method getElementsByClassName but every browser supports getElementsByTagName. Because of this many libraries have had to write their own implementations which are many times slower than native methods. Faster DOM traversal = faster JavaScript! What will it take to make this a reality? Boogers We’re already going to have issues with older browsers supporting brand new elements with HTML 5. We might as well go all the way and make sure every browser can support whatever element we can come up with. After all we only have one shot to get HTML right for this generation according to John Allsopp. Many browsers already support free-form elements both with CSS and JavaScript. To really flesh this out I created the Booger Test and below are my findings.

Firefox 3+ supports the <booger> tag as if it were a native element but has to be explicitly set to display:block. Firefox 2 has no problem with CSS unless there children elements in which case the <booger> tag collapses. Weird! All versions of Internet Explorer don’t know what to do with the <booger> tag but they do function normally when using a JavaScript shiv Safari and Chrome have no problems. Every browser I tested passed the JavaScript portions (getElementsByTagName(”booger”)) of the booger test with flying colors!

So as you can see, we are really close to being able to use our own elements. HTML 5 is already going in this direction but it would be a real shame if everyone got hung up on what frivolous new element names we should all agree to use instead of coming up with new functionality to move the capabilities of the web forward. a

The developer of the market-leading browser has become more actively engaged in hashing out many details of a proposed revamp of the Web page standard. Read this blog post by Stephen Shankland on Business Tech.

After reading through Smashing Magazine’s latest article, 50 New CSS Techniques For Your Next Web Design, I came across an article glossing over a technique for creating a triangle using pure CSS. A triangle using just CSS? That blew my mind! How is that even possible? After playing around with the sample CSS I started to get it. Using an empty HTML element and the border properties, you can make all kinds of shapes. Here is how it works. Note: As expected, Internet Explorer acts a bit wonky especially IE6. These experiments were done in Firefox 3.5 but you can see what they should look like in a screenshot I took. Per the box model, the border outlines the perimeter of an element. When an element has a width and height of 0px the border-width’s make up the dimensions of the element.The corners of borders meet at a 45° angle which is apparent with larger border widths and what makes pure CSS shapes possible. The final CSS to make a 200 pixel tall red triangle pointing up looks like this:

But let’s see how we got to this conclusion step by step starting with a basic square and borders. Each border will be given a different color so we can tell them apart.

.triangle { border-color: yellow blue red green; border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; }

We won’t need the top border so we can set its width to 0px. This makes our triangle easy to measure without any extra space on top; a border-bottom value of 200px will result in a triangle that is 200px tall.

.triangle { border-color: yellow blue red green; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; }

To hide the two side triangles we set the border-color to transparent. If we set the border-left and border-right widths to 0px then the whole shape would collapse, leaving us with nothing. Since the top-border has been effectively deleted, we can set the border-top-color to transparent as well.

.triangle { border-color: transparent transparent red transparent; border-style: solid; border-width: 0px 200px 200px 200px; height: 0px; width: 0px; }

There you have it; a triangle using only a single, empty HTML element and some CSS. The same technique can be applied to the other three sides for different orientations. Where might this come in handy? A JavaScript toggle to indicate a container is visible comes to mind. And using a pure CSS triangle is a lot more convenient than coming up with new images for each variation. Try playing around with different widths to create different kinds of triangles. You can also get some funky effects by changing the border-style; dotted produces a neat effect on our regular bordered square.

.funkyShape { border-color: yellow blue red green; border-style: dotted; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; }

I even managed to come up with the del.icio.us logo.

.delicious { border-color:#FFFFFF #3274D0 #D3D2D2 #000000; border-style:dashed; border-width:150px; height:0; width:0; }

And a heart shape.

.heart { border-color:red; border-style:dotted; border-width:0 150px 150px 0; height:0; margin-left:90px; margin-top:90px; width:0; }

I wasn’t the first one to explore CSS shapes, it turns out Tantek Çelik was playing around with these ideas way back in 2001. a Pure CSS Shapes: Triangles, Delicious Logo, and Hearts

How to create an accessible form with a finished example.