Review: HTML5 for Web Designers by Jeremy Keith

Book review of HTML5 for Web Designers by Jeremy Keith

I’ve read three books by Jeremy Keith at this point, and I can’t say I’ve found another author who can teach you something and make you laugh quite as well as Keith can. HTML 5 for Web Designers is no different, I mean, he manages to work in a Hitler reference in the first sentence of this book.

HTML5 for Web Designers is the first in a new line of books from A Book Apart, the publishing company founded by Jeffrey Zeldman, Jason Santa Maria, and Mandy Brown. If you’re a web standards fanboy, like me, you’re already drooling. Once you take a gander at the lineup of authors A Book Apart has already, and plans to feature, you might just be pushed over the edge. In addition to Jeremy Keith, Dan Cederholm, Ethan Marcotte, Aarron Walter, Luke Wroblewski and more have all signed on to pen a book for the new publisher. Its like the super-hero lineup of The Avengers, but more geeky, if that’s possible.

So HTML5 for Web Designers is a short book, around 100 pages, (394 pages on my iPod Touch, for anyone counting), which means you can read it in an afternoon if you can concentrate on one thing for such an immense quantity of time, and for web designers like me, that’s exactly how much time I’d like to spend wrapping my head around HTML5 in order to decide what pieces of it I can use in my work today.

Keith wastes no time, giving us a very brief history of markup, and then jumping right in to the differences in HTML5’s DOCTYPE declaration, and how we reference external CSS and JS files. He gives working examples of using the new canvas, audio and video elements, some of which I’ve already been able to incorporate into my own work. He then spends a chapter on HTML5’s improvements to web forms, before diving into new elements offered by HTML5 like mark, time, meter, and progress, as well as the new structural elements like section, header, footer, aside, nav and article. The final chapter is spent analyzing how you can put HTML5 into practice today, and offers a few alternate approaches.

There it is, a very brief review for a very brief, but informative, book. Reading a short book like this on a mobile device is an absolute pleasure. I’ve read a few books of this size on my iPod Touch: Rework by the 37 Signals founders, Mobile Web Design by Cameron Moll, and now HTML5 for Web Designers by Jeremy Keith. I can say that this form factor works, and works very well for reading on mobile devices, and for books that don’t contain large amounts of code, this seems to be the format of choice for the future.

HTML5 for Web Designers comes highly rated if you’re a working web designer who’d rather spend quality time learning about HTML5’s goodies rather than tedious time picking through the official HTML5 spec.

You can purchase HTML5 for Web Designers over at A Book Apart.

Rating

Overall: 9 out of 10

Attached Images in WordPress using the_post_thumbnail

Leave a reply

I’ve been working with WordPress for years now, and I’ve always struggled with an easy way to display an image that’s attached to a post in a list of posts. I didn’t say it wasn’t possible, just not easy. In the past I’ve used plugins, like "The Attached Image", or hacked my way around the issue. While these methods worked, they weren’t ideal, and any time you can avoid using plugins, the more healthy your WordPress site will be.

I was delighted then, to find that WordPress 2.9+ comes with a few new functions designed specifically for working with images attached to posts. Specifically, the_post_thumbnail works wonders. Here’s how it works:

Add Thumbnail Support

First, you have to activate post thumbnails for your theme. Open functions.php, and add this line somewhere near the top:

add_theme_support('post-thumbnails');
set_post_thumbnail_size(224, 126, true);

The first line adds thumbnail support to your theme. The second line overrides the "thumbnail" settings in your WordPress admin panel. The three values passed here are image width, image height, and the crop flag. If you set the crop flag to true, WordPress will automatically re-crop images so they’re not distorted.

Next, open any of your existing posts. You’ll be happy to find a new box in the right column, titled "Featured Image". You can then use the standard WordPress media tool to either upload a new image, or select an image from your site’s Media Library. Once you’ve associated a featured image with a post, the next step is adding it to your templates.

Insert Thumbnails in Your Theme

Locate the loop where you’d like thumbnail images to appear, and insert the following code:

the_post_thumbnail();

This will insert a full image HTML element, with the option to pass an array to specify dynamically generated attributes, like the image’s alt or title text.

Have More than One Size? No Problem!

Say you want to feature two thumbnail sizes on your site. Switch back to functions.php and add this code, below the code we added earlier:

add_image_size('thumbnail-50', 50, 50);

This cuts an additional image at 50×50 every time an image is uploaded to the WP Media Library. You can add as many sizes as you’d like. You can then add this call in any of your templates:

the_post_thumbnail('thumbnail-50');

Here you’re just passing the name of the thumbnail you assigned in functions.php, so WordPress knows which thumbnail to use. When the_post_thumbnail() is called with no argument, it will use the default size originally set in set_post_thumbnail_size().

There’s a lot more you can do with these new functions, including setting up conditional PHP during loops to display a larger image first, with smaller images for the second and subsequent posts, for example. I encourage further reading at the WordPress codex:

WordPress Codes: the_post_thumbnail()

Access Remote XML via jQuery+AJAX with PHP as a Proxy

Leave a reply

If you’ve ever had to work with XML from another domain, and only had JavaScript in your toolbox, you can feel my pain. Cross-domain XML has been the bane of my existence for many years now, when working on sites where there is no server-side scripting language available. jQuery has some great AJAX features, but you can’t make use of any of them if the file you’re trying to retrieve is an XML file on another domain. Until now. PHP is still required as part of this equation, but it acts as a web service, rather than residing on the server where your site lives.

Setting Up PHP as a Web Service

Thanks to a few new JSON functions added in PHP 5.2, we can build an XML to JSON web service in 4 lines of code. That’s right, 4 lines. Here it is, in all its glory:

$c = $_GET['car'];
$s = file_get_contents('http://www.example.com/' . $c . '.xml');
$a = json_decode(json_encode((array) simplexml_load_string($s)),1);
echo $_GET['callback'] . '(' . json_encode($a) . ');';

This code would reside on a server separate from the server where your site is hosted. And now the break down:

$c = $_GET['car'];

Get the value from the query string (browser’s url bar) with the name “car”, which we’ll see when we build the jQuery request, and save it in a variable named “$c”. Easy enough.

$s = file_get_contents('http://www.example.com/' . $c . '.xml');

Get the contents of a remote XML file, inserting the $car variable in the URL, and save in a variable named “$s” (for “string”).

$a = json_decode(json_encode((array) simplexml_load_string($s)),1);

Convert the XML string into a JavaScript array using PHP’s new json_decode and json_encode functions, and save this new array in a variable titled “$a”.

echo $_GET['callback'] . '(' . json_encode($a) . ');';

Here’s where the magic happens. We take that array, and convert it into JSON using PHP’s json_encode function. We also get the “callback” variable from the query string, which is required by jQuery, and append parentheses around the encoded JSON. The appended parentheses are also known as the “P” in JSONP, or “JSON with Padding”. What this does is essentially create a JavaScript function to pass back to your site that looks like this:

callback987986215(allyourJSONdata)

Setting Up jQuery to Call Your Web Service

Once you’ve got your PHP web service setup to convert XML to JSON, making the request in jQuery is pretty simple as well. Here’s how its done:

$(document).ready(function() {
	$.ajax({
		dataType: 'json',
	  	url: 'http://www.example2.com/my-web-service.php?car=mercedes&callback=?',
		success: function(data) {
			//parse your new JSON object here
		}
	});
});

This is a pretty standard jQuery AJAX request. The url paramater is the most important piece here. We’re looking for the JSON data on our server where our PHP service is hosted, and passing 2 variables:

car with a value of mercedes, and
callback with a value of ?

The variable of car=mercedes depends on the site where you’re pulling your XML from. This isn’t required, it just demonstrates how you could build a flexible web service to leverage for more than one external XML feed. The second variable callback=? is required by jQuery. The question mark is just there to append an additional name/value pair. jQuery will recognize the variable callback=? and replace the question mark with a randomly generated string of numbers. That’s why in your PHP web service, you get the callback variable, and send it back to jQuery as the function name. Its a sort of security measure.

That’s really it; from this point you have a jQuery object to work with containing all the data in the original XML file. You can see the jQuery object and all its pieces easily by setting a few breakpoints in Firebug and digging in.

If you want to get into the gritty details of how this works, like the coolness of how you can call functions in JavaScript by passing JSON as the argument, and how PHP can convert XML to an array and then to JSON, check out a few of the articles I referenced while building this:

Its like rejuvenation

Leave a reply

I couldn’t resist the temptation to blatantly quote Howard Stern whack packer Blue Iris, as the phrase describes my recent adventures in web design perfectly. It had been way too long; way too long since I’d put myself back in student mode, way too long since I’d let HTML 5 and CSS 3 take shape without paying too much attention, and way too long since I’d posted here. So without further ado, lets take a look at what’s happened in web design over the past six months:

Zeldman released Designing with Web Standards, 3rd Edition.
HTML 5 and CSS 3 support gain traction.
WordPress 3 set to drop any day now.
The BIG Web Show launched.
jQuery still rocks.

Lets take them one at a time:

1. Zeldman has released Designing with Web Standards, 3rd Edition.

The king is back. And this time he’s got a sidekick. That’s right, Jeffrey Zeldman released the 3rd edition of the book that changed the web industry, and he signed up Ethan Marcotte as his trusty co-author this time around. I just blazed through the book in a week, and I’m gearing up for a second run-through. Needless to say, not only will this book give you a rock-solid foundation for building modern web sites, its been updated with current technologies in mind, including new kids on the block, HTML 5 and CSS 3. Also, a special treat this time around is a companion volume, Developing with Web Standards, released simultaneously. Author John Alsopp picks up where Zeldman leaves off, providing the practical solutions to Zeldman’s powerful theory. I’m giving myself a bit of time to digest Designing with Web Standards prior to diving into Developing, but look for a full review of Designing to come over the next few weeks here at Withinsight. All I can say for now is, bravo.

2. HTML 5 and CSS 3 support gaining traction.

HTML 5 and CSS 3 not only offer all kinds of fun new goodies for web designers and developers alike, they’re now starting to gain real support. In addition to the support already provided for new HTML elements and CSS properties in browsers where you’d expect it like Firefox, Chrome and Safari, it appears that IE9 has completely jumped on the bleeding-edge standards wagon. While the finalized specs are still years off, if all major browsers support them with the release of the next version of IE, we’ll be able to start using them reliably very soon. Actually, you already can, but more on that in bullet 4. If IE9 really does support HTML 5 and CSS 3 as well or better than other modern browsers, this may just be the kick that IT departments and large corporations need to drop their “IE6 fo’ life” mantra. Exciting times indeed.

3. WordPress 3 is set to drop any day now.

WordPress 3 will support multi-site installations, meaning you can install WordPress once and create multiple blogs from the single installation. I’m so happy I think I just made a mess in my pants. This means no more upgrading multiple installations of WordPress with each release, centralized plugin management, and huge swaths of citizens rejoicing in the streets for weeks on end. Well, maybe not that last part, but this one feature alone would be enough for me for one upgrade. I’ve played with the beta 2 release a bit, and its super-simple to setup multiple blogs, and basically acts like WPMU did, where you can select subdomains or subdirectories for all your additional blogs. The potential is making me dizzy. Roo-haa.

4. The BIG Web Show launched.

Zeldman’s The BIG Web Show launched recently, and just concluded its third episode this past Thursday. If you like web design, pay attention. Episode 2 featured Jeremy Keith as a special guest, promoting his latest book, HTML 5 for Web Designers, which is slated to drop in June. Remember when I mentioned using HTML 5 and CSS 3 now above? Good! In The BIG Web Show, episode 2, Keith explains how you can start supporting the semantics of HTML 5 now by using standard class names for your divs that correspond to the HTML 5 elements. Not only does it make transitioning in a future redesign easier, it makes explaining your classes to other designers or developers 100 times easier when you hand off your work because you can just point them to the spec. Fantastic. Also, kind of a sub-bullet here, HTML 5 for Web Designers is the first book from A Book Apart publishing! I’m overjoyed with this new publishing company and will likely gobble up each and every offering they proffer from here until infinity.

5. jQuery still rocks.

I really only started working with jQuery personally about a year ago, and since then the library has really gone full-blown as the hands-down most popular JavaScript library in existence. Not only has it been included in the download of WordPress for a while now, its hosted by Google in its compressed form, which means if you link to the Google version and your site visitors already visited a site that also links to the Google version of jQuery, they don’t have to download it again. In addition, all the JavaScript examples in Designing with Web Standards, 3rd Edition are in jQuery, because it just makes JavaScript so much more concise and is easy for the uninitiated to pick up, having a syntax very similar to CSS selectors.

So that’s it for now, stay tuned for more frequent updates as I’m completely turned on by the impending release of WordPress 3 and impending web standards developments. This truly is an exciting time to be a web developer. Cheers!

How Fluid.app will Change the World

Leave a reply

Are you the type of web surfer who has tons of tabs open all the time? Do you get frustrated when one web page causes all your other tabs to crash, or even just slows your productivity when you install a plugin and have to restart your browser?

How many of the tabs that you typically keep open all day are web apps? How many of them do you frequently revisit or refresh, constantly checking their status?

If you can identify with any of the questions above (and you have a Mac), get ready to experience a revolution. Fluid.app allows you to insert any web app URL, give it a title and icon, and voila, you’ve got an application (or SSB: Site Specific Browser) running like an application in OS X.

You can dock all your new web apps (I’ve got Yahoo Mail, Finance, Basecamp, Facebook and Google Reader setup here):

web-apps

You can also convert your SSB into a MenuExtra SSB, which exists only as an icon in your OS X Status Bar:

stats-bar

Fluid.app is based on Safari’s Webkit rendering engine, and all the SSB’s you create are true Cocoa OS X applications.

Once the coolness factor wears off, you may start to realize what this all means. People have been talking for years about how once web apps get to the point where they’re as robust as desktop apps, we’d see a major paradigm shift in the way people use computers. With this single application, you are now able to convert any web app you use into a desktop app.

While web apps still have a ways to go before they truly offer the same functionality as desktop apps, this is the first major move in that direction.

Grab Fluid.app today. Its changed the way I use my Mac in less than 24 hours since I got it.

Review: ProBlogger by Darren Rowse and Chris Garrett

Leave a reply

Book review of ProBlogger by Darren Rowse and Chris Garrett

While not a book covering strictly web design or development, ProBlogger is relevant in many ways. Authors Darren Rowse and Chris Garrett walk the reader through the very basics of blogging, right through more advanced topics like blog promotion, advertising and blog “flipping”, the digital version of TLC’s Flip that House. The fact that they detail the various blog publishing platforms, but express their tendency to lean toward WordPress for all their personal sites was appealing to me. Also, just about every designer or developer comes across the issues of having to drive traffic, monetize pages, and analyze site performance at one point or another in their career.

I took some rather lengthy notes while reading the book, to make implementation on my personal sites a bit easier after completion of the book, and I’ll share some of those notes with you here.

1. Websites You Should Investigate

These are a few tools that I realized I should be using while reading the book. These cover the main bases that every web site should be using to monitor or enhance their site:

Alexa – for researching hot topics and competitor sites
Technorati – add your blogs to the Technorati index, and monitor popular tags
Quantcast – track your site’s performance and compare to competitor site performance
Google Webmaster Tools – discover keywords that people are already using to find your site through Google

2. Tools to Target Hot Topics

Staying on top of industry news is an important task for a lot of web sites, from newspaper sites, to sporting sites, to the latest Hollywood gossip. Here are some of the best:

3. Content Tips

For bloggers that are just starting out, Rowse and Garrett offer a fantastic intro to formatting blog posts so that they will rank well in search engines. This happens to coincide with HTML standards and best practices, so this section is doubly worth your time:

Post regularly (1x/day or 1x/week)
Titles are important!
Vary long posts (reviews), with shorter posts (news)
Use h2 and h3 tags
Number paragraphs (helps with web audiences that typically scan pages)
Break longer posts into series
Write your entire post first, then go back and edit

4. Types of Blog Posts

ProBlogger contains a wealth of ideas. Here are some of their recommendations for varying the style of your posts, so as not to become repetitive and stale:

Tutorials
Reviews
Lists
Profiles (pick an idol of yours or industry mogul and write a review of their life)
Links (microblogging)
Rants
Memes (idea virus, further explanation)

5. Link Bait Ideas

Further depth on content ideas is detailed in ProBlogger, and the issue of link baiting is discussed. My thoughts on link baiting are that if the content is original, helpful, or insightful, its a good practice. The content really has to come first. Here are some ideas that you could potentially build content around:

Tools
Quizzes
Competitions
Awards
Freebies
Interviews

6. Blog Valuation Factors

Rowse and Garrett even get into the topic of buying existing blogs, and “flipping” them, or turning around and selling them for a profit. The main benefit of blog flipping is that domain age is a major factor in Google’s evaluation of web sites. Most of the most popular blog sites on Technorati have a domain age of three years or more. If you purchase an existing domain, with an existing audience, you skip the work involved in starting from scratch. Here are some factors to use while evaluating a blog purchase or sale:

Audience
Content
Search Rankings
Traffic
Inbound Links
Brand
Profit
Design
Domain

7. Blog Promotion & Marketing

After you’ve got your blog up and running, and feel that your content is good enough and regular enough to warrant an audience, you’ll want to promote or market it in some fashion. The Field of Dreams mentality does not apply in the blogosphere. Here are some of the promotion ideas I found in ProBlogger:

Build “content magnets”
Comment on other niche blogs (1x/day)
Encourage comments through questions in your posts
Add “blog carnival” posts that link to many other industry/niche blogs
Promote subscription via RSS
Join a blogging community or forum in your industry, and participate regularly
Request links from relevant industry blogs

I’m not going to get into further detail on any of the ideas here, to do that you’ll have to purchase ProBlogger. I’ve only listed a sampling of the ideas Rowse and Garrett reveal in their book. There are many more topics and ideas within, as well as much more detail and explanation.

Overall ProBlogger is a invaluable book for anyone with their own website. Its an idea starter, and that’s a huge part of running your own website. The other is finding time to actually do everything. Then again, that’s where Brickwork could help you out.

You can purchase ProBlogger over at Amazon.com.

Rating

Overall: 9 out of 10

Blogs with Balls, June 13, NYC

Leave a reply

I was in New York on June 13 with NESN, visiting the Blogs With Balls conference, which is a conference for people involved in both blogging and sports. The conference is still in its infancy, with an attendance of around 250, and it was held in the basement of Stout, which wasn’t all bad, since the Guinness 250 lunch started around 11:30. Rockin’ good times.

The conference was an eclectic mix ranging from CEO’s of blog networks like YardBarker and SBNation to individual bloggers who have taken the leap from corporate life to the risky world of independent blogging. Conference topics ranged from leveraging social media and working with content networks, to getting down to business with making money with your blog. I especially enjoyed Kathleen Hessert‘s discussion about how Sports Media Challenge proposed Twitter to Shaq, and not only did he embrace the technology, but his Tweets now have a circulation larger than the daily circulation of the New York Times. Simply astounding.

Three Things You Need to Know

My largest takeaways from the conference:

Become a portal. If your site can be the start of a discussion, you can increase users and traffic exponentially.
Join a blog network. If you haven’t considered it, joining a blog network can be a tremendous benefit to your traffic. I’m going to get into more detail on this in a future post (I’m reading “ProBlogger” right now…)
Integrate related industry content gracefully.

Become a Content Ninja

I’d like to get into a bit more detail on that last one. It seems to me that there are a lot of large blog sites out there that do one of the two following items, and do them well, and lead their category or niche because of it:

Offer original content.
Offer aggregate content.

It also seems that the tendency of companies that already do one is to stick with that one, and not designate much focus to the other. What I heard resoundingly at this conference is that if you can master both, and do it with a little flair, you can likely top your niche or category. The trick is finding enough original content to come up with, and being tech-savvy enough to incorporate the aggregate content. Of course, there are new web services like Yahoo! Pipes that are making this easier to accomplish practically daily.

Definitely Check it Out

Overall, this was an extremely beneficial experience, and I would recommend it to anyone in the New York area who has an interest in sports on the web. Definitely check it out next time around. They’re supposedly going to post video from the show on the BWB site, so keep an eye on it over the coming weeks.

How to Setup a Page-Driven Nav in WordPress 2.7

Leave a reply

I’ve been working with WordPress for years now, and I thought it might be a good time to start sharing my knowledge of WordPress best practices. One item that I think a lot of people just getting started using WordPress might find handy is how to build a navigation that is driven by pages. Having a navigation driven by pages has numerous benefits, including having the nav written out as an XHTML compliant unordered list, being able to include or exclude any pages you’d like, being able to sort the list items to your preference, and being able to style the current page’s nav button differently.

Create those Pages

The first thing you need to do to setup a nav driven by pages is create the pages themselves. The title you give the page will be the text that appears in the nav. Also note that by default the nav items will be sorted alphabetically, but you can prioritize them setting the “Order” field from within each individual page.

The Magic of Template Tags

After you’ve created all the pages you’d like to include in the navigation, all that’s left to do is add the template tag to your template (usually in header.php). The template tag that lists pages in WordPress is, you guessed it, wp_list_pages. Here’s a sample template tag included in my header.php file that passes a few parameters to the function:

<?php wp_list_pages('include=2,7,9,11&title_li='); ?>

The above block of code includes an opening php statement <?php, the function call wp_list_pages('');, and the arguments to be passed to the function include=2,7,9,11 and title_li=.

Let’s take a look at the two arguments I passed to the wp_list_pages function, starting with include=2,7,9,11.

This tells the function I’d like to include only pages with the id’s of 2, 7, 9 and 11. To find the page id’s that match your specific pages, go to your pages>edit screen and hover over the link for the title of the page, and (if you’re using Firefox) look at the bottom of your browser. At the end of the link you’ll see something like post=7. The number here is your page id. Plug in the page id’s for any pages you’d like to include, and you’re good to go!

The other argument I pass to the wp_list_pages function is to remove the title that would appear by default. By passing title_li= you’re essentially saying “set the title to blank”, and the function does not return a title list item. Generally you won’t want the title, which is up one level in the document tree, to appear if you’re making a navigation that you’ll end up floating to the left with CSS.

The ampersand between the two arguments just allows you to string together multiple arguments. You can string together as many as you’d like to further develop your own custom WordPress queries using any of the further options detailed on the WordPress.org wp_list_pages template tag page.

Check out the Coolness

The last, and probably most worthwhile thing about building your nav in WordPress using pages is that while navigating your site, the list will be auto-updated with a class that allows you to style the current page’s button to look different than the other nav buttons. After you’ve got your nav set up and working, visit one of the pages and then view the page source. You’ll see the class of current_page_item applied to the list item for the page you’re currently on, automatically generated by WordPress for each page.

Now just start styling your way to a dynamic WordPress page-driven navigation! If you need more info on the CSS required to float a list to the left that creates a horizontally oriented navigation out of an unordered list, check out this tutorial at 456 Berea St.

I hope this can help you to build your own navigation, and take it even further using the WordPress.org template tag page.

Review: Simply JavaScript by Kevin Yank and Cameron Adams

4 Replies

Book review of Simply JavaScript by Kevin Yank and Cameron Adams

I read Simply JavaScript a few months back, and couldn’t help but include it in my reviews here at withinsight.com. Its simply too good not to. I’ve got a decent amount of JavaScript experience, although not necessarily through practice. JavaScript has always been that part of my web design arsenal that I’ve wanted desperately to add, but has never seemed to work its way into regular usage in my day-to-day work. You can’t say its for lack of trying, as I’ve read the first half of O’Reilly’s JavaScript, The Definitive Guide, which while full of great info, is not necessarily the best introduction to JavaScript for the beginning scripter. I then found DOM Scripting by Jeremy Keith, which offers a very, very introductory level explanation of JavaScript before digging into the basics of DOM Scripting. I had a decent picture of what else was out there in terms of JavaScript books.

Jeremy Keith is actually the one who recommended Simply JavaScript on his website a while back, which is how I originally heard about it. He stated that his book DOM Scripting was intended for a very specific audience, and that there really weren’t any other books that did it as well as he does, until Simply JavaScript was released. Very big of an author to acknowledge the competition with a tip of the hat.

Meet Your New Friend, JavaScript

If I could, I would probably go back and start from scratch originally with Simply JavaScript. It is a perfect introduction for the web designer looking fill out the third leg of the XHTML/CSS/JS stool that we all sit upon. Yank and Adams present the material in a way that anyone with a little XHTML and CSS experience will not only understand, but really find themselves enjoying. I literally found myself laughing out loud at a few points, such as:

The popularity of regular expressions has everything to do with how useful they are, and absolutely nothing to do with how easy they are to use – they’re not easy at all. In fact, to most people who encounter them for the first time, regular expressions look like something that might eventuate if you fell asleep with your face on the keyboard.

Fantastic! There are a number of moments like this that brighten up the pages.

Simply JavaScript is written in a progressive tutorial format, so you can move through it chapter by chapter, rather than using it as a reference. The one exception to this is the chapter on “Errors and Debugging” which falls fairly late in the book. I was okay without it for the first few chapters, but once I got into chapters 4, 5 and 6 on events, animation, and form enhancements, respectively, I think I could have done with reading that chapter first. In chapter 7, they introduce the Firebug Firefox extension, and how to use it to pause the state of JavaScript at selected lines in your code, which I definitely could have used a little earlier in the book while troubleshooting projects.

JavaScript Libraries Galore

Another great aspect of Simply JavaScript is how they relate the tutorials completed in each chapter to the respective current JavaScript library. So if you’ve heard about all the cool stuff web designers and developers have been doing with libraries like Prototype & script.aculo.us, MooTools, Dojo, jQuery, or Yahoo’s YUI, but haven’t been able to find practical uses for any of them in your projects, here’s where you can make the connection.

Yank & Adams build a very nice core library that you can use to power a few solutions to design problems that have faced web designers for years, like building stripey tables on the fly, or validating form information. They even get into more advanced topics like animation and AJAX. Actually, after you read this book, you’ll probably realize how non-advanced these topics are. This book truly does make JavaScript simple!

I feel like a lot of JavaScript is like a catch-22 in that until you read a book like this, you have a very limited arsenal. You may know how to pop open a new window or change the behavior of a few links, but you don’t truly have a grasp of the potential of what you can accomplish with JavaScript. Reading a book like Simply JavaScript, even if you don’t go into all the details and grasp every last concept, at a bare minimum lets you know what you can do, which will help you tremendously in future projects.

First Impressions Make Such an Impact

One last thing that I need to mention is the production quality of this book. Sitepoint really went all out. I’ve got six Sitepoint books, everything from HTML basics to PHP, and Simply JavaScript is the only one that is full color. In addition to brightening up the pages with color, the footnotes are all located at the bottom of each page. I was recently reading the O’Reilly book AJAX Design Patterns, and found it extremely annoying to have to continually skip over URLs in the middle of the text. Sitepoint places URL footnotes where they should be, at the foot of each page, making it easier to concentrate on the text and code, and reference the footnotes when you want to.

Overall, this is absolutely the best starting point for the beginner JavaScript student, and I would recommend it to any web professional who works with code on a daily basis. It will teach you to apply the same unobtrusive principles that you hopefully already apply of CSS to XHTML documents, instructing you how to do the same with JavaScript.

You can purchase Simply JavaScript over at Amazon.com.

Rating

Overall: 9 out of 10

SXSW and jQuery

Leave a reply

So right about now I’m wishing that if I could be anywhere, it would be at SXSW (South by Southwest). For those of you who don’t know, its about the coolest festival on the planet. And I don’t know from experience, just from colleagues and coworkers and podcasts and industry moguls giving me an earful.

In addition to being a hotspot for web design, SXSW boasts an impressive musical lineup each year, and this year I’ll be disappointed that I’ve missed The Everyday Visuals, Madi Diaz, and the undisputable heavyweight of soul, Miss Erykah Badu.

I’ve been hearing about it for weeks, from Paul Boag blabbering about it on his Boagworld podcast, to having to postpone projects with colleagues who are attending, to CSS guru Eric Meyer tweeting, “If you’re not going to SXSW, tweet like you’re there. Nobody will know the difference.” Yeah, that almost makes up for not being able to attend.

But alas, I am not one to linger, and the time spent here at home has given me the opportunity to start exploring jQuery, which was recommended to me by Alex King, famed author of the WordPress Popularity Contest plugin, and another item that Paul Boag has been going on endlessly about for months now. I finally broke down and downloaded the library and started playing with it.

From my first impressions, Paul has reason to be going on endlessly. It seems that the potential of what a web designer or developer can accomplish with the JavaScript library is in fact endless. The first item that caught my eye was the fact that on the jQuery homepage they offer the expanded, developer version of the library, along with the compressed, production version. I was immediately reminded of the hours I’ve spent testing the best method to minify, compress and serve my Prototype and Scriptaculous libraries. jQuery does this for me? Fantastic.

Second, I was really impressed with the quality and quantity of documentation. Compared to Prototype, jQuery blows it out of the water in terms of a working online manual. I think I’ve officially moved the “Prototype and script.aculo.us” book to the back of my “must read” list. I’ve actually read the first half of it already, but it was cryptic and would have required re-reading on my part to fully absorb the material. jQuery is the complete opposite. There are video tutorials explaning the beginner steps. Video tutorials.

The last thing about jQuery that really hooked me was the ease with which a web designer can pick up the library. A lot of the arguments you pass to the library are the same as in CSS. So if you’re looking for a div with the id of conference, you pass (“#conference”) as the argument.

It seems like its going to be really easy to quickly get up to speed with the library, and that it has a lot of power in terms of what you can do with it. If you’re interested, check out the jQuery site, the jQuery UI site, as well as some of the video tutorials. Really, really, really cool stuff.