Sean Walther's Blog

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.

Tags: AJAX, CSS, Free Courses, Google Code University, HTML, HTML5, Javascript, Lectures, Lessons, Tutorials

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.

› Continue reading

Tags: anchor link, attribute, basic, CSS, css attributes, div id, exercise, hover, HTML, Javascript, jQuery, page element, toggle, Tutorial

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.

› Continue reading

Tags: Aptana, Coda, css selectors, Eclipse, editArea, Espresso, Expand Abbreviation, HTML, html editors, jQuery, komodo, NotePad, PSPad, Textarea, TextMate, web developer, Wrap with Abbreviation, Zen Coding

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.

› Continue reading

Tags: APIRocks, ARIA, CSS, HTML, HTML5, Javascript, jQuery, JS

HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery’s fadeTo

In this tutorial we will review:

• Basic document jQuery preparation
• Binding  jQuery actions to an anchor (A) tag
• Fading In and Fading Out html elements with Javascript/AJAX

› Continue reading

Tags: AJAX, ajax tutorial, fadein, fadeout, fadeTo, HTML, Javascript, jQuery, Tutorial, tutorial jquery

Apple’s iPad / iPhone HTML5 Bet: HTML5 Drawing App Proves Capabilities

Recently I’ve been posting on HTML5 versus Flash.  Many people who are not familiar with HTML5 may not know exactly the amount of power that has been provided with the new spec.  HTML 4 was nice, and a big upgrade, but I believe HTML 5 will be an even larger upgrade over HTML4.

The reason we are talking about HTML5, is Apple seems to be placing their bets on it.  Apple continues to refuse to have Flash running on their controlled devices (iPhone, iPad, etc) and seems to be pushing for HTML5 to take over.

We are slowly having to rethink the capabilities of the “HTML” platform that we have grown to know over the past 15 years. › Continue reading

Tags: Apple, Flash, HTML, HTML5, iPad, iPhone, Javascript, MugTug, Sketchpad

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.

Tags: CSS, Drupal, fix, HTML, ie6, IE7, Import, Internet Explorer, Link, Microsoft

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.

Tags: AlphaImageLoader, background, CSS, DXImageTransform, HTML, ie6, internet explorer 6, Javascript, Microsoft, png, transparent, Tutorial

Adobe and Apple working together for Flash on the iPhone

I know, can you believe it?  All this drama, and we find out they’re both amicably working towards a solution.  

Saw it on Apple Insider, Adobe, Apple working together on Flash for iPhone.  

Seems like it was announced recently.

Apple Insider mentions that Apple has been trying to tout HTML 5 as a replacement to flash on the iPhone.  I know HTML 5 has some cool toys in it, but not nearly enough to meet why people demand Flash on the iPhone — because everyone is already USING flash on the web.  Saying you provide a desktop like browsing environment and not including Flash is a big deal to me.

This made me happy to read (except the HTML 5 part).  Hope you enjoy the news too!

Tags: Adobe, Apple, Apple Insider, Flash, HTML, HTML 5, iPhone

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.

Tags: AJAX, Animation, Animations, CSS, download, Drew Douglass, HTML, Javascript, jQuery, Live Events, Mark Grabanski, Nathan Smith, Queuing, Sizzle, Tutorial, Zaefferer