Javascript
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.
HTML5: Video, 3D, Javascript and a Big Buck Bunny
An article written by Sean Christmann over at Craftymind reviews some cool effects you can create with HTML5, Video and 3D featuring the Blender created Big Buck Bunny.
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.
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
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
How To: Track File Downloads with Google Analytics
Google Analytics is what most people use nowadays for web traffic reports. It is flexible, powerful and simple.
The problem with Google Analytics is that it doesn’t analyze web traffic reports, but generates data in real time. In most cases, this isn’t a problem. In fact, it is big feature. The problem is what about files that do not parse javascript such as PDFs, ZIP files, or other non-HTML documents.
When a user clicks on a PDF from your site, you will never see that PDF in Google Analytics.
How to track File downloads with Google Analytics
It’s very easy. As is most things with Google Analytics.
Google Analytics provides a method for tracking anything you want. It’s called “_trackPageview”.
You use it in javascript as “pageTracker._trackPageview(‘/downloads/map’);”.
How does this help us track file downloads? Simply modify the link to the file asset to have an “onClick”:
[jscript]
Link to the file here:
[/jscript]
See how easy that was?
Hopefully you have a function used to print out those links, then you can modify it in one place (that’s what I did).
You should see results in Google Analytics under Top Content shortly.
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.
JSDoc: How to document your JavaScript
JSDoc is meant to do for Javascript, what Javadoc does for Java.
It does.
You can download and install JSDoc easily:
- Download JSDoc
- Expand the tgz.gz file (I use Winrar)
- Optional – I copy the jsdoc folder to my C: drive to make things easier
- Reminder – you need a perl runtime installed. ActivePerl is recommended
- Open up a command prompt
- Change to your JSDoc folder (mine is c:\JSDoc-1.10.2\)
- Run it: “perl jsdoc.pl test.js” (to test it against the built in JS file)
Usage of JSDoc is as simple as Javadoc was. An example of usage taken from the official JSDoc page is below:
[sourcecode language='jscript']/**
* Shape is an abstract base class. It is defined simply
* to have something to inherit from for geometric
* subclasses
* @constructor
*/
function Shape(color){
this.color = color;
}
// Bind the Shape_getColor method to the Shape class
Shape.prototype.getColor = Shape_getColor;
/**
* Get the name of the color for this shape
* @returns A color string for this shape
*/
function Shape_getColor(){
return this.color;
}
/**
* Circle is a subclass of Shape
*/
function Circle(radius){
this.radius = radius;
}
/**
* A very rough value for pi
*/
Circle.PI = 3.14;
/**
* Get the radius of this circle
* @returns The radius of this circle
*/
function Circle_getRadius(){
return this.radius;
}
// Circle is a subclass of Shape
Circle.prototype = new Shape(null);
[/sourcecode]
You can use the reference on the official site to learn about more of the “@” attributes you can use for JSDoc.
The example code is here:
- test.js – original example javascript file
- JSDoc generated documentation for the test.js file.
Introduction to JSON (JavaScript Object Notation)
JSON, JavaScript Object Notation, is a very useful tool for AJAX developers (and many others I’m sure).
XML is fairly difficult for JavaScript to parse out. It also includes quite a bit of infrastructure overhead in certain applications.
Implementation of JSON can be very easy, it is imported natively in JavaScript through the eval() procedure. It is also supported by many server side languages.
Lets take a basic example of an XML statement and see it’s JSON equivalent:
XML
<book id=”123″><author>Tom Jones</author></book>
JSON
{“book”: {“id”:”123″, “author”:”Tom Jones”}}
It may seem more cryptic, but if you look, that’s just because there are fewer iterations of key words. The compression gets extended when you implement longer arrays of data.
The best part about JSON, in my opinion, is the speed increase you get when using it in javascript. Please implement something in XML and JSON with the same data, you will notice a significant performance increase.
JSON is easy to consume in JavaScript:
objJSON = eval(jsonDataFeed);
You can access data (using our example earlier):
alert(objJSON.book.id);
alert(objJSON.book.author);
Server side implementation can be quite simple as well:
[php]
$dataObject = array();
$dataObject["book"] = array();
$dataObject["book"]["id"] = 123;
$dataObject["book"]["author"] = “Tom Jones”;
echo (json_encode($dataObject));
[/php]
Ask any questions in the comments below.
Here are some articles to continue your exploration of JSON:
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