10 Notable HTML5 Resources
The web's new golden child
Usually I’m not given to doing Letterman-style lists of topics, but I’m getting really interested and involved in HTML5 at the moment and there are a number of really good resources out there for those looking to learn more about this emerging specification.
- HTML5 Doctor (http://html5doctor.com) : has a raft of excellent articles relating to HTML5 and its semantics and how to use them.
- HTML5 Gallery (http://html5gallery.com) : is a showcase of some high-quality sites built using HTML5
- Techmic Screencasts (http://www.techmic.com) : is a great resource for quickly and easily learning cutting-edge web technologies, focusing on topics such as HTML5, Ajax, RDF, SVG, microformats, and web frameworks.
- Dive Into HTML5 (http://diveintohtml5.org/): is an incomplete, but useful introduction that “…seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other standards”.
- The HTML5 Specification (http://www.whatwg.org/html5) : is all the official technical documentation. Hardly light reading, but useful for an in-depth, specific treatment of each new feature.
- W3Schools HTML5 Reference (http://w3schools.com/html5/html5_reference.asp) : is a good alternative to the actual specification if you find that level of technical reading a bit overwhelming.
- HTML5 Shiv (http://ejohn.org/blog/html5-shiv) : There’s not much point getting too involved in HTML5 when IE doesn’t support most of it, right? This JavaScript technique shows an incredibly simple approach to overcoming that problem.
- Twitter (My HTML5 List) : has a huge community of professionals that can be tapped in to. Lots of links, resources and personal recommendations available.
- Your Community : There are plenty of great communities out there, full of enthusiastic, like-minded peers just ready to help you.
- You : Without the individual, the community is nothing. Once you get your head around the new surprises in HTML5, let other people know about it.
Got more suggestions? Leave a comment below or tweet them to @Phil_Wheeler.
Taking Advantage of HTML5 Today
The web's new golden child
I was asked in a formal situation recently, “If you were to build a new web site from scratch, which doctype would you use?”.
Me: “Commercial site for a customer?”
“Just a site for the open web”
“Well, then I guess I’d have to say <!doctype html>”
I wish I had a camera for the look of shock and disbelief I was given in response. But the fact of the matter is that for modern browsers, HTML5 is an excellent alternative for new sites and applications.
With the upcoming production release of Firefox 3.6 – and the inevitable hype that is surrounding it, I felt it was an opportune time to look at how the current mainstream browsers provide for the HTML5 specification.
read more…
I found myself in a very frustrating position last week as I tried to deploy my first ASP.Net MVC application to my own hosted web server. If you’re building MVC apps for in-house use or for deployment to servers over which you have full control, you may have found the process to be quick, painless and generally quite enjoyable. Similarly, if you’re deploying to servers running IIS7, then you may also have had a pretty good experience.
My hosting provider however, is running IIS6 and does not have configurations for MVC pre-prepared. Customers need to raise a Tech Support ticket to request their site to be MVC-enabled on a case-by-case basis. Not realising that I couldn’t just “build and drop”, I spent much time analysing my code and Web.Config before humbly going before the Tech Support folks and admitting I didn’t really know why my application wouldn’t run.
Here is a brief overview of the problems I encountered and what I had to do to overcome them.
Initial Deployment
I figured it was going to be a walk in the park after I read Phil Haack’s article on bin-deploying MVC applications. However, after following his instructions to the letter and FTPing my files to my hosted server, I was greeted with an alarming and altogether unnatural-looking 404 page. Well, that’s not right. I pored over my Web.Config and controller classes to see what I could have done that wasn’t going to be picked up on my local machine. Not much, as it turned out. So in desperation, I swallowed my pride and logged a Tech Support ticket.
As it turned out, my host hadn’t installed Service Pack 1 for my account. They did this almost immediately and I was miraculously presented with my app’s home page. Success!
Or so I thought. As soon as I’d closed the ticket as “resolved”, I browsed to a view page below the main home page and – horror – there it was again: that damn 404.
The Actual Problem
The full story of what my web host needed to do can be found on the ASP.Net MVC Learning page, tutorial 8. The short of it is that I needed my hosting provider to create a wildcard script map for my account that would map all requests to the web server to the ASP.NET framework. That way, I could then use the default ASP.NET MVC route table with IIS 7.0 (in classic mode) or IIS 6.0 (which is what they were actually running).
Now the big, important “but”:
Be aware that this option causes IIS to intercept every request made against the web server. This includes requests for images, classic ASP pages, and HTML pages. Therefore, enabling a wildcard script map to ASP.NET does have performance implications.
[from the section, "Creating a Wildcard Script Map"]
What this meant was EVERY domain and subdomain I was running on my account was affected by this rule and each one that I did not want the rule applying for needed to be reconfigured individually. This blog runs as a subdomain of my main account, so the WordPress PHP files found it all too much and my blog promptly died.
Hopefully if you find yourself in a similar situation to me, this will help you work through some of the gotchas involved in publishin MVC applications to older IIS boxes.
Working With Tables in jQuery
Possibly one of the most frustrating or confusing tasks a developer may find is retrieving information from within a table. Getting references to cells, rows and columns often seems like it should be a doddle with jQuery, but getting just the right combination of selectors and commands can sometimes be more elusive than it would seem at first blush.
Let’s have a look at how to get the right information from your tables first time, every time.
read more…
IE8 Developer Tools Need Love Too!
I attended a Microsoft Unplugged session the other day where Giorgio Sardo presented a discussion on creating cross-browser compatible websites using IE8′s Developer Tools and Expression Web SuperPreview. While I went in as a skeptical developer expecting to hear the usual rhetoric around some misguided enthusiasm about a new feature set that other browsers have been doing for years, I came out highly surprised and impressed with some of the tools that are bundled as part of the embattled browser.
Internet Explorer has a well-established track record of not performing. The legacy of IE6 still haunts web developers today and is widely loathed throughout that community, so it should come as no surprise to Microsoft that developers are cynical about any claims of “better performance”, “better standards” or “better tools”. Like most of my peers, I’m a devout Firebug enthusiast. It’s an excellent tool for playing with your styles and markup and quickly visualising your DOM element dimensions. I’ve always felt that IE8′s developer tools never really measured up in this regard. But the IE8 has its own little bag of tricks that present a good argument against dismissing the browser completely.
I’m going to look at some of the more interesting and useful features in future posts, but I’ll quickly cover off a couple now. The first two are found in the Tools menu.
Start by opening up the IE8 Developer Tools by pressing F12 and have a look at the Tools menu. You will see three submenus: Resize >, Show Ruler and Show Color Picker. The Ruler is really useful if you want to measure out page elements (image heights, content block widths, etc). You can select from one of four high-contrast colours, easily snap to page elements, draw multiple rulers on the page and generally measure anything you want, however you want. Compare this to Firefox’s MeasureIt addon which, for starters, is an addon (as opposed to baked-in), and – at time of writing – was basically restricted to a single box outline with fixed ruler tickers. Ultimately, they’re two very basic features and they both do what they’re designed to do, but it’s the little features that make the difference.
The color picker is in a similar vein, except here Firefox has the advantage. I didn’t even know that IE8 had a color picker and have always used the ColorZilla addon instead. Both tools allow you to sample the color of a page, but the Firefox variant adds a lot of extra functionality such as being able to take your chosen color and change its RGB values as well as the Webpage DOM Color Analyzer (didn’t know about that one?! Try it now. Right-click and select Webpage DOM Color Analyzer).
In upcoming posts, I’ll look at some other lesser-known features of the Developer Tools, including script debugging and page optimisation.
In one of my previous posts, I looked at some of the lesser known and understood features of the jQuery library. Included among them was the data() function, which allows you to set and get values at a named point associated with a DOM element. An interesting feature, but not one that’s documented particularly extensively on the jQuery site. So in this post, I’d like to look at this in a bit more depth and see what we can really do with it.
read more…
jQuery’s Undiscovered Country
I was tasked recently with presenting to other developers in my business unit at The Office on advanced jQuery techniques. Not your bleeding-edge, hard-core type of complex development; rather the lesser-known time savers that go beyond your basic AJAX call, DOM event or element animation.
Over the course of a few weeks, I found several really useful and exciting jQuery functions that, had I not been actively seeking them out, would have remained hidden to me forever, most likely. I should probably stop being surprised by the various gems tucked away in the jQuery library but there are just so many!
In this post, I’m going to look at some of the more notable, but certainly less familiar functions that you may well want to add to your bag of tips and tricks.
Don't let your styles get away on you!
If, like so many others, a large portion of your work revolves around writing, editing or reviewing Microsoft Word documents, then you need to have a very strong understanding of how Styles work.
Styles are designed to make it easier for you to achieve consistent and easily-managed text designs that can also be used to make document creation and automation faster. You can create the look you want to use for a particular purpose throughout your document and save that as a new style. Whenever you want to apply that style to a region of text, you select the text and just choose your style from the Styles dropdown (Word 2003-) or the Styles group of the Home tab (Word 2007).
So when I see documents whose formatting has never once been standardised and whose author has applied similar – but distinctly different – formatting to each heading, highlight and list, my blood begins to boil. If your document has a styles list that looks like the image shown, YOU’RE DOING IT WRONG!!
Discovering Microformats
Microformat Logo
I don’t know why I haven’t looked at this sooner – probably because I’m so busy being distracted by all sorts of other interesting things that I’m finding out there at the moment, but I’m finally discovering Microformats.
To bring you up to speed, Microformats are a way of leveraging the existing properties of HTML (i.e. classes and attributes) and assigning specific, standardised values so that software can recognise them and interpret the meaning of what that HTML represents. Confused? Read on – and all will become clear.
Definition Lists Deserve More Respect
I’m willing to bet you don’t use the Definition List much. In fact, I’d even go so far as to say you don’t use them at all. But the humble <dl> element is actually one of the most useful list formats available.
