Recent Blog Posts
Blogs » JavaScript & CSS
Stylish Scripting
: JavaScript & CSS BlogCSS Theme Week: More CSS Tutorials Than You Can Handle!
It’s CSS Theme week on SitePoint!
What does that mean for you, dear reader?
Well, it means that we’ve trawled through the archives and hand-picked our favourite (and your favourite) CSS tutorials, and will be republishing one article per day for the next five days on the front page of sitepoint.com. Be sure to bookmark (you might even want to subscribe to the RSS feed for our articles if you haven’t done so yet). CSS has evolved and techniques have changed, but rest assured that these articles hold the test of time.
But that’s not all!
We also have a jaw-droppingly awesome new CSS technique that we’ll be throwing in there in the middle of the week. We’ve published some cutting-edge stuff in the past, but this is definitely up there in terms of pushing the envelope. I promise you haven’t seen CSS do this before … it’s awesome stuff.
In the mean time, though, I’d like to introduce you to our first article for CSS Theme Week. Allow me to reacquaint you with Rachel Andrew’s seminal article from last year …
Nifty Navigation Using CSS
This article is an excerpt from Rachel’s popular book The CSS Anthology, 2nd edition, and is one of …
In-browser Development Tools: Firebug Still King
At the start of this year, I sat down to write the “Errors and Debugging” chapter of Simply JavaScript. I cracked my fingers, dove into the landscape of JavaScript debugging tools, and emerged very disappointed several hours later. At the time, Firefox was the only browser with a JavaScript debugging tool worth writing about: Firebug.
Less than a year later, the landscape has changed dramatically. Every major browser has introduced new development tools that make it easier to diagnose problems with your HTML, CSS, and JavaScript code right inside the browser in question. But can any of these tools stack up against the slick and effortlessly powerful tools provided by Firebug? Let’s take a look.
Internet Explorer
Internet Explorer is notorious for coughing up mysterious rendering behavior and useless JavaScript error messages at every turn, and Microsoft is obviously making a concerted effort to improve not just the browser itself, but the tools available for developers to diagnose such issues.
The Internet Explorer Developer Toolbar for IE6 and IE7 is a useful tool for fiddling with page styles on the fly when you’re hunting for a work-around to the rendering issues in those browsers. Its features for diagnosing actual bugs in your CSS are …
Serve JavaScript Frameworks Faster with the Google AJAX Libraries API
Google has announced an extension to their Google AJAX APIs service: the AJAX Library APIs. They’ve assembled a collection of the most common JavaScript libraries and made them available on their content delivery network.
A common criticism leveled at JavaScript framework libraries is that the same code is downloaded from all the sites that use them, wasting bandwidth and creating duplicate files in the browser’s local cache. Google’s initiative is an effort to relieve that burden and create a kind of JavaScript Shangri La where all the frameworks hang out together, making efficient use of their time and possibly singing. if there’s a better way to ruin a decent plane-crash-survival movie than singing I haven’t seen it! Frank Capra has a lot to answer for.
Anyway, if enough sites use the Google CDN for their JavaScript libraries, the better the chance that the browser has already cached a local copy of it and can avoid having to download it again. Everyone reaps the performance benefits!.
Using the service is simple. You can directly reference the libraries via URI like so:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js”>
</script>
Alternatively, you can use Google’s API thusly:
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(”prototype”, “1.6.0.2″);
</script>
The first argument is the name of the …
Two Hidden Features New in Firefox 3
Firefox 3 Release Candidate 1 was revealed to the world last week, which means the final release is only about a month away. If you haven’t yet checked that your site works smoothly in the new browser, now’s the time!
Building The Matrix - Notes from The Architect
Matt Magain’s recent blog post about constructing the new SitePoint Book Matrix raised a couple of interesting questions, which I’m going to try to answer, since it was me who built it.
When is a table not a table?
When its data isn’t really tabular; in other words, when the data it represents isn’t really two-dimensional. What we have here is visually two-dimensional, hence at first glance it might seem reasonable to represent it as tabular data; but the data itself isn’t really two-dimensional at all, it’s linear.
A two-dimensional data set has two axes, each representing a different range or set of values, so we should be able to plot axes against the data and be able to make meaningful cross-references. But as the illustration below shows, we can’t:
Sure we can plot those lines and create that reference point, but they don’t mean anything, because the x and y axes both represent the same scale (skill level).
Before we can implement the design we need to decide how the data should be marked up, and that’s why it’s so crucial to determine the …
JavaScript MIME Type: Damned if You Do, Damned if You Don’t!
In an article he posted a little while back, Alex Walker mentioned some trouble he had with <script> tags when trying to add the type attribute. The Google script Alex was embedding had no type attribute but wouldn’t work when he added one. Douglas Crockford has suggested in his Advanced JavaScript videos that we drop the type attribute altogether since browsers default to JavaScript anyway. The problem is under HTML 4.01 and XHTML 1.0 the type attribute is required. So if you care about validation, like Alex does, then you’ll want to add it.
But, what is the correct type value for JavaScript? The other reason Mr Crockford provides for dropping the attribute is that that the value most people use, text/javascript, is wrong! It’s obsolete, according to rfc4329. This is also confirmed by Anne van Kesteren who has covered this issue already (way back in May of 2006 - yes Anne is one of the gurus and I am not), as well as the SitePoint HTML Reference.
The correct type value for JavaScript is actually application/javascript. But wouldn’t you know it, Internet Explorer will not execute the code if you use that type value. So here’s a hell of a situation, …
Is Your JavaScript Library Standards Compliant?
One of the things JavaScript libraries like jQuery, Dojo, and YUI can do for you is add support for features in the latest Web standards long before they are built into browsers. But are some libraries going too far?
For the developers of JavaScript libraries, there is a temptation to extend the features of the standard, and build something even better! A good example of this is the CSS selector queries that first made jQuery famous, but which are now available in most JavaScript libraries.
CSS queries provide an extremely convenient way of getting a list of elements from an HTML document that match certain criteria. As an example, you might write a script that opens all hyperlinks with the attribute rel=”external” in a new window. Using just the DOM API supported by all major browsers, the JavaScript code to retrieve that list of links is pretty cumbersome:
var anchors = document.getElementsByTagName(’a');
for (var i = 0; i < anchors.length; i++)
{
var href = anchors[i].getAttribute(’href’);
var rel = anchors[i].getAttribute(’rel’);
if (href != null && href.length > 0 &&
rel != null && /(^| )external( |$)/.test(rel))
{
// anchors[i] is a link with …
CSS Gradients, Transforms, Animations, and Masks
With the CSS Working Group seemingly toiling in obscurity to pin down the exact wording of specs that may never be implemented in a real-world browser, the WebKit team is leading the charge in moving the web forward by implementing new CSS features that you’ll be able to use in production in just a few months’ time.
Every browser contains a rendering engine responsible for producing a rendered page from the HTML and CSS code that makes up a given web page. WebKit is the rendering engine at the heart of Apple’s Safari browser (not to mention most recent Nokia cell phones and the Adobe AIR platform). You can download the latest work-in-progress version of WebKit to try it out.
Web designers interested in the future of CSS have a very good reason for downloading WebKit right now. The team has introduced some astounding new CSS features that Apple is planning to release in this June’s 2.0 update to Mobile Safari for the iPhone and iPod touch. Presumably we can expect an update to the desktop version of Safari for Mac OS X and Windows around the same time.
Here’s a run-down of the features announced so far …
Adobe AIR for JavaScript Developers
With just under two weeks left in our Adobe AIR/Flex competition, time is running out to get your articles in. As a reminder, we have two copies of Adobe CS3 Web Premium to give away!
If you’ve been experimenting with Adobe AIR and hitting walls due to lack of documentation, here’s a resource that might help: the team behind Adobe AIR have released a pocket guide to AIR for JavaScript developers. It’s available either for free in digital form (under a Creative Commons license) or in print from Amazon.
This is a smart move by Adobe to encourage developers to play and build things with AIR. Hopefully some of you will find it helpful in writing your article!
Download the Adobe AIR for JavaScript Developers pocket guide (PDF, 1.2 MB).
You’re Fat and I Hate You
So this has happened to me a few times recently (mentioning no names) — I read up on some neat trick or other that somebody’s figured out in JavaScript, and I’m like ooh that’s cool, I wonder how it works. So I follow it up, only to find out that the author doesn’t know how it works, and reading their code throws no light on it either, because most of the work is done by an external framework.
It irritates the hell out of me that so much modern JavaScript development hinges on frameworks. Not because there’s anything wrong with that in pragmatic terms, but because I’m interested in the mechanics of things, and programming with frameworks obscures the mechanics. It’s simply too laborious to work through that convoluted chain of dependencies and see what a script is actually doing. And the code of the framework itself is generally optimized to such an extent that it’s virtually illegible — great for speed and efficiency in practice, but very difficult to read and understand.
Of course, from the point of view of developers using frameworks, that’s exactly the point. The mechanics are supposed to be obscured so that the application is easier …
Sponsored Links
Logo Design, Web page Design and more!
- Custom logo designs created ‘just for you’.
- Pick the design you like best.
- Only pay if you’re satisfied with the result.
Want More Traffic?
Get up to five quotes from qualified SEO specialists, with no obligation!
Download sample chapters of any of our popular books.
