HTML

Google’s HTML/CSS Style Guide

Wednesday, April 25th, 2012 | Business | No Comments

GoogleSorry 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

 

Tags: , , , ,

HTML5 Video – Attributes and Events

Wednesday, January 11th, 2012 | Business | No Comments

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!

Tags: , , , ,

HTTP Archive: Average Webpage now 965 KB (up 30%) in 2011

Thursday, December 22nd, 2011 | Business | No Comments

ExtremeTech published an article, The web in 2011: HTML5 dominates Flash, trouble for data capped mobile surfers.

2011 Average Web Page Size

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.

› Continue reading

Tags: , ,

Internet Explorer 9: New browser, Same Problems – IE9 HTML5 Failures

Friday, January 14th, 2011 | Business | No Comments

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.

› Continue reading

Tags: , , , , , , ,

Notes on IE9 for Web Developers

Thursday, September 16th, 2010 | Business | 2 Comments

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

Tags: , , , , , , , , ,

Google Translate’s Toolbar: How to disable the banner

Sunday, September 12th, 2010 | Business | 14 Comments

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.

› Continue reading

Tags: , , , ,

Google Code University: Free Courses, Tutorials and Lectures for Web Development – AJAX, HTML5, HTML, CSS, Javascript and more

Wednesday, September 1st, 2010 | Business, Tutorials | No Comments

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:

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.

Tags: , , , , , , , , ,

Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example

Wednesday, June 16th, 2010 | Tutorials | 4 Comments

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.

› Continue reading

Tags: , , , , , , , , , , , , ,

HTML Zen Coding: Speed up HTML creation

Tuesday, May 4th, 2010 | Business | 2 Comments

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.

› Continue reading

Tags: , , , , , , , , , , , , , , , , ,

HTML 5 Presentation on HTML5

Saturday, April 17th, 2010 | Business | No Comments

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.

› Continue reading

Tags: , , , , , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template