CSS
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
jQuery Mobile 1.0.1 Released – with bada Support
In case you missed it, as I did, jQuery Mobile released version 1.0.1 a week ago.
The biggest changes seem to be the addition of official Samsung bada support, along with some additional test clients. bada is an operating system for mobile developers developed by Samsung. It doesn’t sound like the team had to do anything to support the platform, but it’s nice to know there will be an additional device tested with releases.
To download the new jQuery Mobile 1.0.1:
- JS - http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js (24KB)
- CSS w/ Theme - http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css (7KB)
- CSS w/o Theme - http://code.jquery.com/mobile/1.0.1/jquery.mobile.structure-1.0.1.min.css (6KB)
Not only do we have 1.0.1 now, but jQuery Mobile 1.1 is coming out soon.
Here’s some stuff to look forward to in jQuery mobile 1.1:
- AMD support
- True Fixed Toolbars – it’s always been buggy, but they seem to have come up with a CSS based method that works everywhere (and doesn’t jump around)
- Better AJAX page transitions
I could swear there was a beta version of jQuery Mobile 1.1 out there, but I can’t seem to find the link. Maybe I’m crazy?
Firefox 10 Released
Mozilla released Firefox 10 this morning.
Firefox has converted over to the Google Chrome release numbering, so browser versions aren’t as “major” anymore, but the new browser still brings some nice enhancements.
The biggest addition (especially for us web developers) is the addition of extra built-in developer tools (very similar to Chrome’s):
- Inspect tool for CSS
- Page Inspector (also like chrome, although it has a nice whole page highlight / dehighlight so you can see exactly what you are inspecting
Some other additions are:
- Forward button hides until you go back
- WebGL suppors anti-aliasing
- CSS3 3D Transforms are present
- Full Screen API (should be better for running web applications / kiosks)
- General Bug Fixes
I think it’s worth checking out, as this version will also be part of the ESR program (Extended Support Release). That means it won’t be updated for another 42 weeks, to allow businesses to use the browser long term.
How to Hide all the WordPress in WordPress
I’ve been working on writing an article on Purpose Built WordPress templates. This morning I ran across a post by Ben Word, at benword.com — How to Hide The Fact That You’re Using WordPress.
WordPress tends to add a LOT of “stuff” in both the final HTML, and all the layers that build it. This is done to accommodate the masses. As a developer you can write <img src=’images/image.gif’ alt=’test’> or you can ping a database, resize an image, pull the proper alt tag, construct the final img tag then output it to the screen.
All the same, WP adds code to your header to account for all the functionality it MIGHT use. Not necessarily all the functionality it does use.
iOS 5 Beta 2 unveils Native Momentum Scrolling in CSS
In iOS 5 we will be able to use the nice velocity / momentum base scrolling through CSS in Safari.
Identified by Johan Brook, at Native style momentum scrolling to arrive in iOS 5, the new functionality will be a nice addition to web based iOS apps and websites.
The CSS code is:
overflow: scroll;
-webkit-overflow-scrolling: touch;
Week in Web: jQuery Menus, Flowplayer update, Stylesheet removal, drop shadows, Gury, Sliders, etc
I’m going to start publishing, every Friday, a list of some useful / interesting links I’ve visited throughout the course of the week.
Usually this will involve whatever I am working on at the moment. If you like these links, you can follow me on Twitter to get them as I find them (as opposed to waiting for Friday).
This week I’ve been working a lot with jQuery (nothing new), Flowplayer, and CSS. An average week for a web developer.
› Continue reading
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.
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.
Web development with the iPhone and iPad in Mind
In the very near future, I will be posting a series of posts on what you should/shouldn’t be doing to develop a website where the iPhone and iPad are a target demographic. jQuery will figure prominently in the series, as I’ve seen almost all websites now require work with jQuery (or anther AJAX platform).
Let me know if you have any specific questions / concerns, and I’ll be glad to answer them.
Some interesting things to think about:
- How are mouse clicks triggered? (It’s not as straightforward as you’d think)
- How are hover states triggered? (Hint: the iPad has a hover state, but it’s not what you think — remember you only have a single touch, no arrow following your finger)
- What types of gestures can we use?
- What special considerations must we make for CSS?
- What are the ideal screen dimensions? (this is easy, but remember we have multiple devices, and multiple orientations)
- What types of video can we play? (iPad, iPhone 3GS, iPhone 3G, iPhone 2G and the original iPhone all have different specifications, it’s not that easy)
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