When starting a new project it will probably take you at least 15-20 minutes of getting your stuff together. Many times I found that exactly these routine tasks are the most annoying which keep us from being productive (and happy). So, go get the html5boilerplate.com and be happy 🙂
This project by 5 driven guys, Nicolas Gallagher, Hans Christian Reinl, Mathias Bynens, Paul Irish, Cãtãlin Mariş, and Divya Manian is a great starting point for any HTML based web development. Simply awesome!
The boilerplate bundle includes:
- Directory structure (index file, img dir, js dir, css dir, etc.)
- CSS reset using normalize.css
- HTML5 feature detection through Modernizr
- Google Analytics snippet (just replace your own id)
- Other really useful tips and tricks for better development
Starting into the new year with a short list of high quality links. As always, your feedback and suggestions are greatly welcome 🙂 Cheers!
- Cross Browser HTML5 Progress Bars In Depth (by Zoltan “Du Lac” Hawryluk)
- 15 Web Design Trends to Watch Out For in 2012 (by Jake Rocheleau)
- Profiling CSS for fun and profit. Optimization notes (by kangax)
- Google Maps: Designing the Modern Atlas (by Willem Van Lancker)
- Password strength verification with jQuery (by Jim Nielsen)
Free online book: Dive into HTML5 by Mark Pilgrim.
The paper version is titled HTML5: Up and Running (O'Reilly, via Amazon).
Table of Contents
- Introduction: Five Things You Should Know About HTML5
- A Quite Biased History of HTML5
- Detecting HTML5 Features: It’s Elementary, My Dear Watson
- What Does It All Mean?
- Let’s Call It a Draw(ing Surface)
- Video in a Flash (Without That Other Thing)
- You Are Here (And So Is Everybody Else)
- A Place To Put Your Stuff
- Let’s Take This Offline
- A Form of Madness
- “Distributed,” “Extensibility,” And Other Fancy Words
- Manipulating History for Fun & Profit
- The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything
- HTML5 Peeks, Pokes and Pointers
- How To Create a Slick Features Table in HTML & CSS (by Chris Spooner) - very slick 😉
- 10 Absentee UX Features on Top e-Commerce Sites (by Paul Bryan) - co-shopping? en espanol?
- 6 tips to create better one-page websites (by Kendra Gaines)
- 10 Unmissable TED Videos For Designers (by Alvaris Falcon) - love TED, and you should too
- 20 jQuery Tutorials Teaching Super Cool Visual Effects (by Chris Spooner) - that's why you must love jQuery
- Requirements-Driven Software Development Must Die (by Fred Beecher) - nice approach with really good arguments, but with any workflow it seems just a little bit off
- 70+ Awesome Tumblr themes (by Cameron Chapman) - got tumblr? get a theme - and a life 😉 ...and follow me on tumblr
- Examples of Sites where localStorage should or is being used (by Chris Coyier) - localStorage is to HTML5 what isolated storage is to Silverlight
- jQuery plugin: Chosen (by Harvest) - go check it out, nothing else to say
- Freelance Web Development: 9 Tips for Better Project Management (by Kelli Shaver) - you do freelance work? enhance your productivity with these tips, very nice!
- User-interface, user-experience & usability explained (by Bernard Schokman) - I think the title is misleading, it's more about "Practical design principles for UI/UX/Usability Design"
- 10 Important UI Design Considerations for Web Apps (by Marc Gayle) - try polishing the little things to make your app truly awesome
- Tools for Facilitating Feedback on Prototypes and Wireframes (by David Leggett) - What's your favorite? Why?
- How to Identify the Best Design Problems (by Joshua Porter) - About the importance of prioritization.
- A Guide to CSS Colors in Web Design (by Alexander Dawson) - Once again a great guide by Alexander; contrast, shades, hues, transparency and co.
- 40 Beautiful and Elegant WordPress Themes of May 2011 (by Madalin Tudose) - very nice collection, wordpress has come a long way and so did its front-end designers
- HOW TO: Add the +1 Button to Your WordPress Site (by Christina Warren) - if you like it or not, here is the +1 Button integration...
- Why You Should Buy Your First 5000 Twitter Followers (by Rohit) - ethical or not... love or not love... with a little help from your friends
- So you think you can build a website? (by Vitamin in Talent) - a really handy flowchart to determine if your idea will result in a great website
- The ultimate HTML5 resource guide (by Cameron Chapman) - what else to say? ultimate resouce guide!
- (More) Useful Web Usability Testing Tools (by hongkiat) - What are your experiences with these tools? Which one is your favorite? Why?
- Information Architecture 101: Techniques and Best Practices (by Cameron Chapman) - good summary and references.
- 40+ Useful Online Generators For Web Designers (by Cameron Chapman) - here another one by Cameron - a MUST-READ references list for web designers.
- Data Visualization with CSS: Graphs, Charts and More (by bellefoong via hongkiat) - pure HTML/CSS charting examples, yes, that means copy-paste...
- The A-Z List for Web Designers (by Alexander Dawson) - love this alphabet soup, nothing really surprising, but that's maybe why i like it so much 😉
- Slideshow Patterns in Modern Web Design (by Joel Reyes) - slideshows become more and more prominent - so here are some patterns used widely
- Useful Calendar & Date Picker Scripts For Web Developers (by hongkiat) - collection of calendars
- 10 Random CSS Tricks You Might Want to Know About (by Catalin Rosu) - *background-color? give me a break IE...
- Introducing HTML5 Web Sockets – taking bidirectional communication on the web to the next level (by Robert Nyman) - pushing data to the client? wow-wow-wow!
- Designing Websites Under Information Technology Restrictions (by Maria Malidaki) - the article argues that technology restrictions are challenges that can be solved - I would argue that restrictions are blessings
Really interesting research note by Gartner.
- HTML5 will become the mainstream of the Web during the next decade.
- HTML5 is a potential threat to the continued adoption of plug-in based RIA approaches (including Flash/Silverlight).
- Enterprises should try avoid becoming dependent on any one browser or client-side technology.
- Enterprise developers should “design for standards” and not browsers or runtimes.
- Developers should favor the lightest-weight technology that will meet their requirements.
- Architects should consider hybrid approaches […]
- Before purchasing or committing to a new UI technology or platform, enterprises should first invest in a user-centered design process based on objective data about user behavior.
Complete Analysis: http://www.adobe.com/enterprise/pdfs/html5_flash.pdf
On a personal note I especially like the following part (btw: brilliantly written):