HTML
Google’s HTML/CSS Style Guide
Sorry for the deluge of posts today. This next one is a must read for web developers.
I’m not sure when it was first posted, but I just came across it today, the Google HTML/CSS Style Guide.
There are some useful reminders in there, and also some curveballs (beyond “Use Valid HTML where possible”):
- Omit protocol from embedded resources – this means your JS and CSS includes should use “//” as opposed to “http://”. This means whenever your code runs over HTTPS it won’t generate all those annoying popup windows.
- Don’t use Entity references – an interesting point. If your entire environment revolves around UTF-8, there is no need to encode special characters (except for < > and & because they are HTML code). Bye bye —
- Omit optional tags – skipping a few lines of code must save Google millions annually, but it’s interesting. I don’t know if I can stop writing “<head><title>Title Here</title></head>” … but according to HTML5 specifications it’s an optional tag, and you can just write “<title>Title Here</title>”.
- Hexadecimal Notation – Use 3 character notation where possible. I’ve been doing this, but didn’t realize it was a best practice (this may save Google hundreds of thousands of dollars a year, me? nothing).
- Alphabetize CSS declarations – I guess this makes sense, so there is at least SOME organization to CSS declarations
- Property name stops – For some reason Google WANTS room between a CSS property and the value (“value: 0px” vs “value:0px”). Seems odd to me, but at least it’s what I’ve always done
HTML5 Video – Attributes and Events
When working with the new HTML5 video tag, the official documentation is very confusing. We just want a list of attributes and events!
I ran across an excellent resource, HTML 5 Video – DOM Attributes and Events at chipwreck.
From the post (this is incomplete, please go to the source for a full list):
Display attributes
src(string): The source file
poster(URL): An image to display before the video is playing
controls(boolean): Are the playback-controls being provided by the browser?
videoWidth, videoHeight(integer): The original video size
Playback attributes
currentTime(float): The current playback time in seconds
startTime*(float): The video start time (if the video does not start at 0.0 – streams for example)
duration(float): The duration in seconds
paused(boolean): Is the video currently paused?
ended(boolean): Has the video ended?
autoplay(boolean): Is is set to autoplay?
loop(boolean): Is is set to play in a loop?
They list everything beyond that .. thanks guys!
HTTP Archive: Average Webpage now 965 KB (up 30%) in 2011
ExtremeTech published an article, The web in 2011: HTML5 dominates Flash, trouble for data capped mobile surfers.
From the article:
According to new research from HTTP Archive, which regularly scans the internet’s most popular destinations, the average size of a single web page is now 965 kilobytes (KB), up more than 30% from last year’s average of 702KB.
Wow. That is huge growth. I still complain to web designers who want to include a 650KB photo.
Internet Explorer 9: New browser, Same Problems – IE9 HTML5 Failures
Way back when, in the times of HTML 4, and CSS was just getting started we worked with IE6. IE6 required us to do everything differently, because of the ways things were implemented. They just had to be different.
Fast forward to 2011. The world is rapidly expanding use of an incomplete spec, HTML5, and things seem OK. Browsers support it, the implementations seem pretty consistent.
Enter IE9.
Notes on IE9 for Web Developers
I’m reading through the Interoperable HTML Parsing in IE9 blog post on MSDN and there are some nice, and some not so nice things.
The following are some subjects talked about, and what it means for us web developers.
› Continue reading
Google Translate’s Toolbar: How to disable the banner
Working with multiple languages is tough, one of the great tools is Google Translate Tools.
It lets you specify which languages and make them available on your site.
Unfortunately once you are viewing a page written NOT in your browser’s native language, it pops up automatically. The banner that pops up pushes your site content down independent of your background graphic, and that can cause problems for certain layout / design approaches.
There’s a quick and easy fix.
Google Code University: Free Courses, Tutorials and Lectures for Web Development – AJAX, HTML5, HTML, CSS, Javascript and more
I grew up with webmonkey as the single best destination for web developers and any tutorial you could want, but just saw that Google has a Google Code University featuring Tutorials, Contributed course content and Video lectures on:
- Web Programming
- HTML
- CSS
- Javascript
- AJAX
- HTML5
- Web Security (yes, web developers should be well versed in Web Security)
Just looking through the site it is so much more than basic web development. Material covers topics ranging from the Android platform, to basic algorithms. Please check out the material that isn’t just web development. There’s a reason Google is providing content for Distributed Systems, Tools and working with APIs.
We’re never beyond refreshing our own skills, as I’m sure Google has some great advice on their site.
I wish I could send this link to some other web developer’s I’ve had to rescue projects from.
Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example
This tutorial will cover:
- Modifying CSS attributes with jQuery
- Setting a class for a page element
- Removing a class from a page element
- Testing if a class exists
- A quick toggle click behavior example
The final example will use all of the other elements in a single exercise.
HTML Zen Coding: Speed up HTML creation
HTML Zen Coding is a plugin for many popular HTML editors that gives the web developer many tools for quickly building out HTML pages. If you are comfortable (and enjoy) CSS selectors popular today in many frameworks (such as jQuery) then this may be for you.
When we build HTML documents, we are always building code that is repetitive, and we have ways of making that better. Creative copying and pasting usually. Sometimes I feel like I’m playing music on my keyboard when I do my copy paste and edit keyboards commands over and over.
With Zen Coding the process is much “simpler”. You need to learn the syntax, which is straightforward for most selector friendly folks — but it will shorten your workload and let you do some things that you may have avoided before.
HTML 5 Presentation on HTML5
Saw a great HTML5 presentation today at Apirocks.com: HTML5 Presentation. Has tons of useful demos of new HTML5 technologies that you can actually USE TODAY.
Please share, it makes me happy:
Subscribe to Email Alerts
Make a Donation
Popular Posts
Follow Me
Recent Posts
Archives
Tags
Blogroll
- 456 Berea St
- ActionScript 3 Design Patterns
- adactio – home of Jeremy Keith
- ajaxian
- Boxes and Arrows
- Chris Brogan
- CSS Globe
- InsideRIA
- Jarrod Michael Studios
- Johan Brook: Designer and Developer
- Mad Vertices
- NETTUTS
- Portsmouth Community Calendar
- Roomware Blog
- Signal vs. Noise
- Six Revisions
- Snook
- Style Grind
- Tiago’s Weblog
- Viget Extend
- Vitamin
- Whats the latest
- Woork
- zupko.info