CSS
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)
How to speed up your WordPress Blog
I finally got around to speeding up my WordPress blog and wanted to share with everyone the various things I did. I reduced my average page load time on certain pages from 15 seconds to about 1.5 seconds. That’s a big change.
My favorite test was a quick click through. On my new host I timed 6 page loads down to about 5 seconds. When I did the same test on my old setup, it took about 20 seconds (I know, below the 15 seconds average, that was really only for 1 page, but one of my most trafficked pages).
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 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.
10 CSS Tools: Cheat sheet, CSS Desk, Lorem 2, CSS Guide, etc.
Recently I saw some css links that I thought were useful:
- CSS Desk – Real time development tool for trying out CSS changes
- CSS Cheat Sheet – Look up some of those properties that you always forget. It is italic or italics?
- Don’t use @import – A comparison of performance using both @import and link
- Complete CSS Guide – In depth guide of the various controls we have in using CSS (probably more for beginners)
- Position is Everything – An entire blog devoted to CSS and web browser bugs
- CSS Working Group Blog – Stay up to date on CSS3 decisions, and CSS conversation
- CSS Type Set – A CSS tool that allows designers (and developers) to see how copy will look with various CSS controls, and the resulting CSS
- Lorem 2 – A “better” way to use Lorem Ipsum? I’ve always used Lorem Ipsum, but this looks promising.
- CSS Text Wrapper – I’ve always wondered why CSS didn’t support (and still doesn’t really) more complex shapes. This tool attempts to allow us the control we’ve been wanting, although the output is complex, it may fit the bill for a few sites out there.
- CSSTidy – Open source CSS parser and optimizer.
IE6: Graphical Illustration of Problems with CSS
Posted on flickr, css mess, is one artist’s (atzu) homage to the problems all web developers face in IE6. As the creator says:
By the way, I wanted to thank all these major sites as Youtube, Facebook, Google that are not supporting Internet Explorer 6 anymore.
– atzu
Click for Larger Version
IE6 and IE7 limit CSS links to 30
Help! Working in Drupal and having trouble getting stylesheets to work? Did they break all of a sudden in Internet Explorer only?
I can’t see my stylesheets anymore in IE6 or IE7!
Internet Explorer limits the number of stylesheets included with a LINK tag
That’s right. If you include an additional CSS file beyond 30, it will break other CSS files.
This problem is only in IE6 and IE7. Officially I’m sure Microsoft says the fix is to upgrade to IE8.
What code causes the problem? Perfectly valid code below:
[sourcecode language='html'] [/sourcecode]
Just repeat that 31 times, and you will see an error.
The Solution
While <link> tags may have issues beyond 30 stylesheets being included, you can cheat with using @import.
For example, include CSS using the following instead:
[sourcecode language='html']
[/sourcecode]
If you’re working in Drupal, there’s a module that implements this fix for you, IE Unlimited CSS Loader.
How do I use transparent PNGs in IE6: Using AlphaImageLoader
Internet Explorer is a tough beast. It was very popular years ago. Unfortunately, it’s still in use in out there.
This site, www.seangw.com, has a fairly technical crowd. We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).
I don’t believe IE6 should be supported anymore. In many jobs, that isn’t our decision to make. We can recommend ignoring IE6 specific issues, but should do so intelligently:
- Identify the current IE6 audience (knowing it will probably decrease over time)
- Approximate the cost of supporting IE6 (depends on what you are trying to do)
- Present the pertinent information to the client, and let them make an informed decision
- You should tell the client what you feel, but make sure they understand the difference between emotion and facts
Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue. Math is enlightening sometimes.
At that, you are here, and STILL want to do transparent PNGs in IE6.
How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.
This method is for implementations in CSS (you are using CSS, aren’t you?).
Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6). I use basic IE conditional comments:
[html]
[/html]
There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.
Assuming you defined a logo in style.css as follows:
[css]
#logo {
width: 300px;
height: 150px;
background: url(images/logo.png) no-repeat left top;
}
[/css]
You will find that the PNG does NOT work in IE6.
The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:
[css]
#logo {
background: transparent;
filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src=’images/logo.png’, sizingMethod=’scale’);
}
[/css]
There you go. It should work now.
The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.
jQuery 1.3 Released – How to use jQuery
jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”
jQuery version 1.3 was released yesterday.
Some new features in 1.3 are:
- Sizzle – a brand new CSS selector engine
- Live Events – event delegation with a jQuery twist
- jQuery Event Overhaul – simplified event handling
- HTML Injection Rewrite – Lightning-fast HTML appending
- Offset Rewrite – Super-quick position calculation
- No more browser sniffing!!
- New API Browser - http://api.jquery.com/
I have yet to play with jQuery 1.3, but will post my impressions after I get some hands on time with it.
Are you new to jQuery?
jQuery is a library that you can include on your web projects. jQuery enables HTML and JavaScript developers to rapidly deploy functionality that traditionally is more complex. Through browser independent APIs, developers and designers can implement event handling, CSS changes, animations, popular web 2.0 effects, or other common function of web 2.0+ sites.
Downloading jQuery
You can get jQuery by going to jQuery.com and downloading the version of jQuery you want:
- Production version – 18kb – Minified for production environments (don’t try to debug this, its a nightmare)
- Development version – 114kb – Developers can go in and see how things work with this version, but the footprint is huge
Getting Started with jQuery
jQuery provides a series of useful tutorials.
Some favorites are:
- Getting Started with jQuery – by Jörn Zaefferer - Goes through the basics of jQuery, all the way up to building plugins.
- jQuery Crash Course – by Nathan Smith – Great overview of what jQuery is and how to start using it.
- Submit a Form Without Page Refresh using jQuery – by Eric @ NETTUTS – Everyone starting out with AJAX wants to know how to do those cool form actions without the page refreshing. Here’s how.
- 5 Tips for Better jQuery Code – by Mark Grabanski – Useful tips to keep in mind when working with jQuery — slightly more advanced, but a good taste of what is to come
- The 20 Most Practical and Creative Uses of jQuery – by Drew Douglass @ NETTUTS – From scratch, how to creatively use jQuery in modern websites.
- jQuery Tip: Animation and CSS Queuing – by Drew Douglass – Queuing up animations is something we all run into and scratch our heads, Drew makes it sound easy.
There are so many more tutorials out there.
Featured Posts
- HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery's fadeTo
- Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin
- Basic AJAX Tutorial: jQuery toggle and slide
- Hosting: How to pick a WordPress Host
- Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example
Follow Me
Email Subscription
Recent Posts
Top Commentators
- No commentators.
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
- 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
- Why Banks Fail
- Woork
- zupko.info