Translating Geek Into English
Once you’ve created a Stripe account and have acquired an SSL certificate, you’re ready to write the form through which you’ll accept payments to be processed via Stripe. This is surprisingly simple to do, and completely secure when done right. In this post, I’ll explain what you need to do with your HTML.
Continue Reading...
Back in May, an interesting article was posted at Zoompf.com titled “html5shiv and Serving Content from Code Repositories“. In it, the author Billy Hoffman argues about why you shouldn’t use the version of html5shiv hosted in Google’s code repository. This is something I did regularly in my “Modern JavaScript: Develop and Design” book, based upon code in the HTML5 boilerplate (I believe). Also, I hand’t really thought about it before. Anyway, the article is something worth reading to get you thinking about the things developers commonly do, and to perhaps change some of those habits.
In this edition…
One of the great qualities of HTML5 is that even though it has not been standardized yet, you don’t have to wait to use it. Well, if you’re prudent about what HTML5 features you use, that is. For example, in my “Modern JavaScript: Develop and Design” book, I use several of the new HTML5 form elements as they get treated as plain text elements on browsers that don’t support HTML5. Similarly, several new form attributes will be ignored by browsers that don’t recognize them. By adopting select HTML5 features, you can provide a better experience to those using better, current browsers, and rest assured that those using older browsers, or Internet Explorer, will still be able to use your site. The question, then, is what HTML5 features are safe to use and what ones are not?
One good resource for answering that question is HTML5 Please, created by the same brilliant minds that created the HTML5 Boilerplate and the Modernizr library. HTML5 Please covers HTML5, CSS3, and related technologies and while the information is good, the interface is even better. Through a single page and some sweet JavaScript, you can find out all you need to know. There’s a search box at the top and a series of demo filters you can use to quickly find the feature you’re thinking about using. These filters include specific versions of IE, support on mobile device, including older ones, and more. For example, you can quickly find out that the new date input type can be used with caution along with a “polyfill”. As defined by Remy Sharp, a polyfill is:
…a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.
So, for example, you can safely use the new HTML5 elements, such as footer, nav, and article, if you also use the html5shiv polyfill.
An alternative resource is When can I use… The interface isn’t as clean as HTML5 Please, but the site provides a lot of information and uses table to present most of its data. When can I use… covers CSS, HTML5, JavaScript APIs, SVG, and much more.
Let me know if there’s a good HTML5 resource that you’ve come to rely upon!
As I have little to no design skill, I don’t often attempt to create my own HTML design. It’s really for the best. (When I do sites for clients, I’m normally using HTML and CSS created by an actual designer.) But when I go to write a book, I have to come up with a design to use for many of the examples. In such cases, I try to find something as simple and clean as possible, while still being a bit stylish. HTML5 goes a long way towards this end, as do the many CSS reset tools that have been around for years. Well, HTML5, CSS resets, and more have been beautifully combined in a couple of different blank HTML5 reset templates.
One is the HTML5 Boilerplate, which just came out in version 3. This is a fully-loaded template that includes key JavaScript libraries (Modernizr, jQuery, and Google Analytics), caching recommendations, server configuration, and more. You can download the template in a well-documented format, a bare-bones file, or a custom creation based upon your desired needs.
Very similar is the HTML5 Reset. It also includes Modernizr, jQuery, and Google Analytics, along with a CSS reset, but doesn’t get into the server-side configuration, caching, and such. It’s also available in a corresponding blank WordPress theme, which I’m likely to use as the basis of my next site redesign.
Even if you don’t need to use an HTML5 reset template yourself, you can learn a lot about creating a well-constructed HTML template from these. A lot of very smart people put quite a bit of thought into the ideas and functionality expressed in the templates. In sum, both represent the current best of the best practices, considering CSS3, jQuery, HTML5, meta tags, SEO, etc., etc.
