Rey Bango

Web developer, honey badger

A New Way to Test Internet Explorer on OS X, iOS and Android

Today, the Internet Explorer team is launching a new tool to make it easier to test sites in IE regardless of which platform you’re on; seriously! Don’t believe me? Here are some Vines to show you it in action:

The tool is called RemoteIE and is designed to offer a virtualized version of the latest version of IE. This allows you to test out the latest version of IE without have to have a virtual machine installed.

Getting it all Setup

I ran through the steps to use the tool myself and wanted to document everything in case you run into any hiccups.

First, head on over to https://remote.modern.ie/ which will take you to this page:

mainpage

You’ll need a Microsoft account to use the service since it needs to associate the service to that account.

perms-2

If you have a Live.com or Outlook.com you can use that or you can register for a new one. No, you don’t need to use those services for anything else if you don’t want to but they’ve actually gotten way better and it might be worth a look.

Next, you’ll want to select which server is closest to you so you have the best possible performance:

location-3

At which point you’ll be asked to download the Microsoft Remote Desktop app for whichever platform you want. This could be for

  • Mac OS X
  • iPhone or iPad
  • Android
  • Windows x86 or x64
  • Windows RT

download-4

As you can see, I was serious when I said this would be available cross-platform.

For this tutorial, I’ll be showing you how to get this up and running on OS X since I think that’s where a lot of the friction for web developers is. To do that you’ll need to download the app from the Apple App Store. Clicking on the “Mac” link will direct you to the online Apple store site.

applecom-5

Click on the “View in Mac App Store” button so that you can launch the App Store app on your Mac. You’ll be presented by a confirmation notice from Chrome (or your fav OS X browser) to launch the external app:

launchappstore-6

And after you confirm it you’ll be in the App Store entry:

appstore-7

In my case, I already had the app installed which is why it shows “Open”. If you don’t have it installed, go ahead and do so. Once you installed it, look for it in Finder:

finder-8

or if you’re like me, use the awesome Alfred to find it:

alfred-9

Now, the next step is why I wanted to create this tutorial since it isn’t immediately obvious once you run Remote Desktop what to do. When you launch the app, if you take a look at the header, you’ll see an entry called “Microsoft RemoteApp“. That’s what you’ll want to click:

msremoteapp-10

From there, you’ll now be asked for your Microsoft account information to determine what app subscriptions you have available:

msremoteappemail-11

msremoteappsignin-12

msremoteappsubs-13

Now that it’s figured out that you’re legit, you’ll see a dialog showing what your app subscriptions are:

msremoteappinvite-14

Again, I want to help you avoid confusion here since the UX at this specific point is a little off. When you click on the checkbox for “Internet Explorer (email: iewebeco@microsoft.com)”, an entry for “Internet Explorer->IE Technical Preview” will be added to the main Microsoft Remote Desktop app BUT the dialog with the checkbox I just mentioned doesn’t disappear. See here:

msremoteappiechk-15

So heads up. Once you see the entry in the main app that says “IE Technical Preview”, you can close the dialog box with the checkbox. You can see in the previous image how I highlighted the close dialog icon.

We’re almost done. Next, go ahead and double-click on “IE Technical Preview” to launch your virtualized version of IE. it’ll take just a minute to spin everything up so be patient:

msremoteappconnect-16

And once it’s up, you have a full blown version of IE 11 Technical Preview ready for you. Notice in the following image how the F12 Developer Tools are there for you:

ieonosx-17

Read the Full Blog Post

This is a great new tool and it’ll definitely lower the friction to testing on the latest version of IE but there are some limitations that should be noted including the inability to access the local file system. It be great if that were possible but VMs can be tricky to deal with, especially from a security perspective.

So now that you’ve got this all setup, be sure to head over to the IE blog and read up on RemoteIE to get all the details about this new awesome tool.

Where do you get your web development information from?

At JSConf, I posed this question to a group of developers (in a pool no less):

“What are your primary sources for the web development information that you use, need and value?”

The reason for this question is because I’ve been trying to come up with better ways of ensuring that developers know about the new features in Internet Explorer. I’ve used the example of how I’ve had several conversations where developers didn’t know that IE10 supported such features as WebSockets, Transitions, or (gasp!) border-radius. It got me motivated to figure where you, the dev community, goes to get the most relevant info on new browser features and web development techniques. Hacker News and MDN were two immediate resources mentioned.

So I’ll ask you, the reader, the same question:

“What are your primary sources for the web development information that you use, need and value?”

Answer in the comments.

Making Internet Explorer Testing Easier with new IE VMs

When Microsoft first launched modern.IE and revamped the way that IE VMs were offered, I wrote up a post that talked about how to install them. Since then, the site has changed so it’s time to update this post to reflect not only the new UI of the site but the new method of downloading individual VMs.

If you haven’t heard about modern.IE, then definitely read up on it here:

Introducing modern.IE – Testing sites for Internet Explorer made easier

The New Way to get IE VMs

Up until now, if you wanted to test different versions of IE natively you had to download VPC images that would allow you to run virtual machines for the different versions of IE. It wasn’t a great solution because:

  • They were designed to be run in Microsoft’s Virtual PC software making it hard for non-Windows developers to use them.
  • They were broken apart into multiple, large download files

There were ways to use them on other OSes but it required some work or unofficial scripts to convert them. Either way, the IE VPCs weren’t very easy or convenient to use.

We wanted to make this easier so as part of the modern.IE project, we created a new set of VMs that targeted your OS and your VM-specific software.

When you hit the page “Test across browsers” page, scroll down until you see this:

vms

This is the section that helps you to choose the right OS and platform. Now, you’ll be able to choose your OS:

vm-os

then choose the VM software:

vm-platform

and download the VM with the version(s) of IE you’d like to install:

vm-options

You’ll need to download ALL of the files listed for the specific version of IE you’d like work with. Depending on which OS you’re using, you may see a combo of *.exe/*.rar files (Windows) or *.sfx/*.rar files (OSX/Linux). The *.exe & *.sfx are self-extractors which will look for all of the files and combine them into the single VM you’ll need.

The great thing about this process is that:

  • You can use the VM software of your choice
  • You only have to download the files once per VM. They can be reused to recreate the VM after 90 days.

Currently, we’re offering VMs that will run on:

  • Windows
  • OSX
  • Linux

The VM software choices are specific to the OS you choose:

  • Windows – Hyper-V, Virtual PC, VirtualBox & VMWare Player for Windows
  • OSX- VirtualBox, VMWare Fusion and Parallels
  • Linux – VirtualBox

One thing to note is that it’s best to use an updated version of the VM software, especially for the Win8 VMs. Otherwise, you may encounter issues with the VM software not being able to run the virtualized OS properly.

The IE versions being offered are:

  • IE6 on Windows XP
  • IE7 on Vista
  • IE8 on Windows XP
  • IE8 on Windows 7
  • IE9 on Windows 7
  • IE10 on Windows 7
  • IE10 on Windows 8
  • IE11 Developer Preview on Windows 7
  • IE11 Developer Preview on Windows 8.1

For all intents you can now test against a full copy of any version of Internet Explorer.

Extracting the Virtual Machine

Windows

Notice that for IE9 on Win7 for VirtualBox on Windows, I’ve downloaded 5 files.

extract

I need to run “IE9.Win7.For.WindowsVirtualBox.part1.exe” to kick off the extraction. This will prompt me for a destination folder to extract to:

extract-2

Note that once the extraction is completed, the dialog box just disappears and you won’t get a prompt that it’s done. Hop over to your directory and you should find the newly extracted VM file waiting for you:

yourvm

OSX

OSX users have it even easier because you can use cURL to pull down all the files in one swoop. Just look for the “Grab them all with cURL” link and click on it. It’ll give you a popup like this:

curl

Open up terminal, “cd” to the directory where you want to download the files and paste the link displayed to kick off the download. Easy peasy.

To extract the virtual machine, you’ll need to go into terminal and set execute permission on the .sfx file like this “chmod +x filename.sfx”. You can then kick off the extraction by running the file: “./filename.sfx”.

extract-osx

You can find fully detailed installation instructions for the downloaded VMs in this PDF.

Installing the VMs

The VMs may come with some minimum resource settings already preconfigured. Here’s what I recommend to ensure you get a decent performing VM:

  • Give your VM a minimum of 1GB of RAM
  • Give it the most amount of video memory possible

Remember that you’re VM is an OS and it needs resources. Unless you’re loading multiple VMs at the same time, a gig of RAM shouldn’t have a major adverse issue on a decent system. Also note that while IE9 & IE10 support GPU-enhanced rendering, don’t expect the same performance in your VM as you would get from a native system.

The VMs you download are in compressed format. Once you’ve got them on your computer, you should run the extraction executable I referenced above to extract them for use. This will create the virtual machine file that you’ll import into your VM software. Again, you can find fully detailed installation instructions for the downloaded VMs in this PDF.

VirtualBox on Windows

Installing on VirtualBox is usually as easy as double-clicking the .ova file that you extracted.

yourvm

When you do this, you should get a VirtualBox dialog like this:

vb-import

Click on the “Import” button and VirtualBox will do the rest. It’s really that simple.

VMWare Fusion

The VM software I use on OSX is VMWare Fusion so here are the steps I went through to setup the Win8/IE10 VM.

Click on the “Add” drop down to create a new VM:

vmware

Choose “Continue without disc”:

vmware-new

This should present you with a screen to “Use an existing virtual disk” which is exactly what you want to do:

vmware-choosevm

I chose the “Select to create a copy of it” so that my original download isn’t affected and it makes a copy in the default VMWare VM directory. When you select the image, it will display a prompt asking if you want to convert it to an updated format:

vmware-dontconvert

Don’t convert it. I tried to and it seemed to corrupt the VM.

Select the proper version of Windows. These are 32 bit versions of the OS so the standard OS selections are fine (i.e.: not 64-bit). At the “Finish” screen, click “Customize Settings” to give the VM a better name like “Win8 – IE10″ and from there, VMWare will beging the process of copying the disc to the default VM directory and present you with the new VM:

vmware-vmdone

Before you start the new VM, change the RAM settings so your VM won’t have any trouble starting up. Again, I recommend a minimum of 1GB of RAM:

vmware-vmsettings

Your VM should now be ready to use.

REALLY IMPORTANT: If you’re using a Win8.x-based VM, be sure to set your screen resolution in the VM to a minimum of 1366×768 if you want to be able to use Internet Explorer. Internet Explorer desktop can launch in smaller resolutions but IE10 for Win8 and IE11 Developer Preview for Win8.1 are a Windows apps and needs the higher resolution. You’ll also want this for testing snap mode.

VirtualBox on OSX

Chris Wharton has written up a quick guide on how to get the Virtualbox VMs running on OSX. Just follow the steps I outlined for extracting your VM and then follow Chris’ steps for installing in VirtualBox.

Time Limits on the VMs

All of the VMs have a time limit 90 days of total time from the moment you first use the VM. Basically it’s 30 days usage with two 30-day rearms. To rearm, go into a command prompt with Administrator privileges and type in “slmgr –rearm

At the end of the 90 days, you’ll be able to use the VM for an hour before it shuts down. At this point, you’ll need to decide if that’s okay or if you’d like to recreate the VM and use it for another 90 days. Remember, you can reuse the same files you originally downloaded to recreate the VM so don’t delete them (unless you just love downloading big files).

Functional Limitations

I’ve been told that these images aren’t crippled and in my testing, I was able to apply updates and do installs with no issues. I would HIGHLY RECOMMEND that you run Windows updates when you use these VMs to get the latest updates and patches. Also, install an anti-virus software. Microsoft Security Essentials is free and will do the trick. If you’re running a Windows 8.x VM, it comes with anti-virus already.

The Results of my Essential Tools, Libs and Frameworks for Front-End Development Survey

Two days ago, I put up a simple survey that asked what essential tools, libs and frameworks you were using for front-end development. I closed out the survey last night a little before 9pm EST and after getting 1000+ responses. I now want to share the results.

Why Am I Doing This?

As I’ve mentioned, this was an incredibly unscientific survey and not meant to determine which tool is best. Just which tools seem to be in heavy use.

I’m doing this to help web developers (myself included) stay on top of commonly used tools. Since change constantly but at least this gives a snapshot of what’s frequently used.

A couple of people buzzed me (some complaining and eluding bias), because I hadn’t listed “x” tool or lib in the survey. The survey wasn’t meant to be all-inclusive and if you look at the “Other” section below, you’ll see how adding everyone’s favorite tool would’ve been impossible. That’s what the “Other” option was for. Ultimately, instead of looking at what wasn’t there, you should read this for what was selected to determine if you need to get up-to-speed on specific tools.

The Process

After closing the survey, I removed all blank records and then went entry by entry to factor in the “Other” submissions and list out tools not originally added on the survey. I did my best to list every technology mentioned although it’s quite possible I may have missed something. If I did, it was purely accidental.

I ended up with 1031 total responses that I felt were good submissions. The results shown below for the main list was based off of what Google Docs provided. I didn’t do those calculations but I have to assume they’re correct.

Important to note is that the following options were added after 218 people had already replied so those values could’ve been much higher if added at the beginning. This is evident in Git & Coffeescript’s high numbers despite being added late.

  • LESS
  • Git
  • ExtJS
  • Ember.js
  • prefix-free
  • JSBin
  • JSFiddle
  • dabblet
  • Kendo UI
  • Wijmo
  • Coffeescript
  • YUI

Results from the Main List

Results from the “Other” Submissions

The ones listed below were submitted via the “Other” option and not on the main list.

A note about Enyo

EnyoJS is a framework released by HP which looks to have come out of the great work done by Palm. I haven’t used it and don’t have an opinion whether it’s actually awesome or not. I’ve held off on including it in these stats, though, because there was a high number of out-of-place submissions for it and they seemed clustered together around the same time. Additionally, MANY were single Enyo submissions with no other option chosen. Just seemed too odd to me but I’ll put out the data and if someone else wants to publish, go for it.

The Raw Data

Here’s the raw data from the survey. Please feel free to use it as you like and I hope it helps you out.

Raw Data from the Survey (.csv)

Hey Paydirt: Your Site Works Just Fine in IE

One of the things that I’m passionate about in my role at Microsoft is helping developers ensure that their sites provide an awesome experience in every browser. Yeah, yeah I know it seems odd that a Microsoft evangelist would say this but it’s the honest truth and anyone who’s worked with me before knows that I take great pride in this effort.

We’re Not Supporting IE!

Today, I came across this article on HackerNews which caught me totally by surprise:

We don’t support Internet Explorer, and we’re calling that a feature

When I checked out the site entry, it directed me to a startup called Paydirt which has a very slick looking time-tracking & invoicing app. In their blog post, they rattled off a couple of reasons why they’re not supporting Internet Explorer and they were pretty upfront about it:

“That’s why we made a key decision at Paydirt: we don’t support IE – at all – and we don’t pretend to. You can’t even sign up for Paydirt using IE.”

They also mentioned that sensible browsers support cool features:

“Sensible browsers can do amazing things (canvas, SVG animations, CSS3, web-sockets, blazingly fast JS), and limiting usage to these lets Paydirt take full advantage of these new technologies.”

So of course, I had to dig in to figure out what magical features they were using that IE9, and especially IE10, didn’t handle.

Um…it works in IE

Sure enough, when I tried to sign up, I was blocked. So I used the IE F12 tools to fake the Chrome user agent string and, bam, I was able to sign up with no issues. The signup was painless and I waded through the app with Chrome & IE side-by-side. As I went through, I didn’t notice any differences in the functionality. Buttons worked as expected, data was being saved and even panels with fading functionality worked as expected. I was stumped because I couldn’t see what was preventing a user from using Internet Explorer on this site.


Chrome, IE10, IE9/Win8, IE9/Win7 Screenshots of Paydirt

Why is there code in here for IE support?

Next, I dug into the code and again, didn’t see anything that I could pinpoint as an issue. In fact, the Paydirt team had done a nice job of laying out their site using standards-based code. This is precisely what you want to see; developers using standards. As I dug through more files, I came across their main CSS stylesheet called paydirt-e08a29afb369fe41806659f40ff86301.css. When I looked in it, two things immediately popped out:

  • They were using many CSS3 features supported since IE9, like transforms & border-radius, but just not adding the –ms vendor prefix entry
  • They had the “-ms” prefix for CSS3 gradients which was added in IE10
  • They added support for -khtml-box-shadow but not -ms-box-shadow???

This threw me off because in their blog post, their concern was the IE didn’t offer amazing feature support yet many of the features they implemented are readily available in IE9. In addition, they had actually done some initial work on supporting CSS3 features that are vailable in IE10 (e.g.: transitions & CSS3 gradients).

At this point, I’m completely stumped because:

  • Their site works great in both IE9 & IE10
  • They’ve included support for some IE features in their CSS
  • They want sensible browsers that do amazing things and everything they’re doing is supported by IE9 & IE10. All they have to do is add the “-ms” vendor prefix just like they did for Webkit and Firefox. (They didn’t support Opera either unfortunately).

It works in IE so why not just Open it Up

So we’re left to wonder if IE issues are the real reason they didn’t support the browser. And trust me, I totally get the pain developers went through. I’ve only been with Microsoft for 2 years and was a web developer WAY before I joined them (even part of the jQuery project team). But IE9, and especially IE10, have come an incredibly long way since the IE6-8 days and I’m having a hard time rationalizing Paydirt’s decision here – particularly since it’s exactly this type of behavior (writing for or against specific browsers) that sets the Web back again.

Mind you, if their only reason was that their traffic didn’t justify the support for IE6-8, I could understand it. But one of the things that Microsoft has been advocating for is the concept of “same markup” and Paydirt is a great example of this. Despite them not wanting to support IE, because they used standards-based markup, the site just works in IE9 & IE10. And that totally contradicts Paydirt’s arguments about saving time and lack of feature support. Their site JUST WORKS!

Now, it’s not to say that if you really dig deep you may not find some issue. That happens actually in every browser and is not unique to IE. But seriously Paydirt, do you really want to use these arguments when your site actually does render great in Internet Explorer? Have you checked it out? Perhaps being a Mac-based company, testing may be the issue. If it is, then let’s discuss the options.

Claiming, though, that not supporting IE saves you time when your site is working just fine in IE9/10 is a tough sell. Let’s talk. I’m happy to help.

Update: Closing comments on the post. Plenty of lively feedback which regardless of your stance, I truly appreciate.

How to Create HTML5 Website and Page Templates for Visual Studio 2010

Now that I work at Microsoft, I’m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it’s pretty barebones. Since I’m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag.

Today, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create “Item Templates” in Visual Stuido.

The gist of it is that you can take any page that you create and turn it into a re-usable template via the “File->Export Template…” wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template.

Adding a Page Template

So here’s the basic HTML5 template I wanted to include:

<!doctype html>   
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	
    <!-- !CSS -->
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
	
    <!-- !Modernizr - All other JS at bottom 
	<script src="js/modernizr-1.5.min.js"></script> -->

	<!-- Grab Microsoft's or Google's CDN'd jQuery. fall back to local if necessary -->
    <!-- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> -->
	<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
	<script>	    !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

</head>

<body>
	<div id="container">

	</div>
</body>

</html>

After I created and saved this page, I went to “File->Export Template…” and followed these steps:

Now, when I select “File->New File…” to add a new item, my template is available:

Adding a Web Site Template

Creating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn’t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:

  • My HTML5 basic page template
  • jQuery
  • Modernizr
  • HTML5 Reset CSS file
  • An empty CSS file called style.css
  • A consistent folder structure for all of these

The first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:

So now when I select “File=>New Web Site” I see my new template:

and when I choose that, here’s what gets loaded for my new site:

Download the Templates

Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. Check it out here.

This is a huge time-saver for me and I want to share this. I’ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:

HTML5 Page Template

Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder

HTML5 Web Site Template

Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

Choose 3 Developers You’d Spend a Day With

Here’s a question. Given 3 days and allotted 1 day per developer, which 3 developers would you spend it with? Here’s the caveat, the developers MUST BE in the web development community.

Here are my choices in no specific order:

  • Nicole Sullivan – Why? Because she is a freaking CSS guru and the amount of CSS knowledge I could gain from a day of her mentoring would be so incredibly valuable. She’s also a super-cool person.
  • Nicholas Zakas – Why? Well, there are a lot of people who are really awesome JavaScript developers but few, in my opinion, who have the experience in a large-scale environment. Nicholas has that, as the principal front-end engineer for Yahoo! and that’s knowledge worth nabbing. And if you’ve watched his presentations, you know he can teach.
  • Joe Stump – Why? Because Joe is one of the coolest dudes on the planet and apart from that, he has the knowledge to build out BIG sites. Now that he’s focused on geolocation, getting into that would be so cool. Plus, I know Joe loves kids so I could talk to him about babies and stuff. ;)

Now, my list isn’t meant to leave anyone out because there are a ton of people who I’d like to learn from. This is just a group who I feel, at the moment, would offer knowledge that I want right now and they’re just great for providing that. So hopefully, I won’t hurt anyone’s feelings. :)

So who would you pick?

Tell Me the Development Problems that Script Junkie Can Try to Solve via Solutions-based Content

My biggest focus at Microsoft is the Script Junkie website. We use it to publish really great cross-browser, solutions-based content to help developers improve their JavaScript, HTML, & CSS development efforts.

The Script Junkie team is working on our content plan for the next six months and we’re looking to identify developer problem areas that we can provide solutions for. So I’m reaching out to my blog readers in an effort to understand what type of things pain you. Here are some examples of problem areas that we’ve heard of:

  • Designing and implementing for multiple devices like 42″ LCD TVs to 480px Android device
  • Getting users to upgrade their browsers in a friendly way
  • Developing cross-browser compatible websites with minimal hacks
  • How realistic is it to begin using HTML5 & CSS3 today?

It’s important to note that that we’re not looking for answers to the above problem areas at this time. These are examples to demonstrate the type of concerns we’re hearing. We’re looking for more questions that hopefully we can answer via solutions-based articles and code. So if you have thoughts on wide-spread development problems that you’d like to see tackled, please comment below. Remember that Script Junkie focuses on JavaScript, HTML and CSS so please be sure to keep that in mind when listing out your pain points.

We’ll roll-up your comments and then focus on the top 10 things listed by the development community.

Thanks for your help!

The Essential List of JavaScript, jQuery, HTML & CSS Books to Make You a Better Web Developer

Over the years, I’ve read or been recommended a number of books which are essential reading for professional web developers. I’ve compiled the list of books below to help the community find a comprehensive list of good books that can help them be better coders.

JavaScript

Professional JavaScript for Web Developers – My new favorite book. Almost 1,000 pages of VERY detailed JavaScript information. Written by Nicholas Zakas, Yahoo! Principal Front-end Engineer for Yahoo!’s home page and recommended by the YUI team as well. BUY THIS BOOK!

JavaScript: The Definitive Guide – Considered the Bible of JavaScript for its thorough coverage of JavaScript. You need to have this in your library, even as a reference.

DOM Scripting: Web Design with JavaScript and the Document Object Model – This is a good book to get you familiar with the DOM.

AdvancED DOM Scripting: Dynamic Web Design Techniques

Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional – The book by Christian Heilmann that really got me past the initial hump of plain ‘ole JavaScript. His writing style is awesome.

Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries – JUST BUY THIS BOOK! Stoyan did a great job of outlining OOJS principles and it’s been incredibly valuable.

JavaScript: The Good Parts – It’s certainly a good book and I would recommend reading it after one of the more intro books like JS for Web Developer by Nicholas Zakas.

Learning jQuery 1.3 – While covering jQuery v1.3, the techniques discussed are still useful and I still recommend the book highly.

Pro JavaScript Techniques – John Resig’s famous book on advanced JS techniques.

Secrets of the JavaScript Ninja – Still not out but considering that John Resig is that author, it’s sure to be great.

ppk on JavaScript, 1/e – One of the first books I picked up and great overview of the language.

Accelerated DOM Scripting with Ajax, APIs, and Libraries

Ajax Security – Billy Hoffman is the man when it comes to Ajax security and this books shows why.

jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide) – Tips & techniques from the jQuery team rolled up in a cookbook style. You can’t go wrong.

jQuery in Action, Second Edition – This is now updated for jQuery v1.4.x as well as jQuery UI 1.8.x. Definitely a must-have for jQuery developers

jQuery Enlightenment – Cody Lindley did an amazing job in outlining the best jQuery techniques in this self-published book. Totally worth the price.

Test-Driven JavaScript Development

jQuery: Novice to Ninja

HTML & CSS

Web Standards Solutions: The Markup and Style Handbook, Special Edition

Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)

The Art & Science Of CSS – This is one of Sitepoint’s best CSS books. Loved it.

HTML Utopia: Designing Without Tables Using CSS, 2nd Edition – Not being a designer, I thought this book was a tremendous help in understanding how to better design sites.

Head First HTML with CSS & XHTML – This has been my goto book for some time. The Head First books are just so great at breaking down topics in easy to understand ways and this book is no exception.

Introducing HTML5 (Voices That Matter) – Going to get this soon mainly because it’s written by Remy Sharp and Bruce Lawson whom I respect tremendously, especially for their HTML5 & CSS3 savvy.

HTML5 For Web Designers – Just got this on 7/19/10. Need to read it by it’s by Jeremy Keith and he rocks.

CSS Cookbook, 3rd Edition (Animal Guide) – Just picked this up on a recommendation.

CSS: The Missing Manual – I keep hearing rave reviews about this book all over the place.

Site Performance & Enhancement

High Performance Web Sites: Essential Knowledge for Front-End Engineers – Steve Souders is the performance guru and if you want your apps to perform better, get this book and the one right below this one.

Even Faster Web Sites: Performance Best Practices for Web Developers

High Performance JavaScript (Build Faster Web Application Interfaces) – Again, another great book by Nicholas Zakas which outlines very important performance techniques for JavaScript applications.

Designing with Progressive Enhancement: Building the Web that Works for Everyone – Great book on progressive enhancement by the superstars at the Filament Group.

This is certainly not all inclusive and I’m sure there are other books out there that have been great. If you feel very passionate about a specific title, let me know via the comments and I’ll check it out.

The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books

NOTE: I’ve moved the list to it’s own dedicated page so that I can manage it a little easier so for the most up-to-date list, go to the following page.

I’ve been meaning to do a roll-up of top JavaScript, CSS & HTML development tools that I use or have been recommended to me and after having lunch with my bud Brian Wilpon today, I realized I just needed to do it. He asked me what some of the newer tools are and I think this is the best way to help him (and the community in general). It’s definitely not an all-inclusive list so if you see some that you feel I should add or remove, let me know in the comments.

Here they are by category:

Debugging Tools That Make Life MUCH Easier:

Effectively debugging JavaScript applications is a royal pain in the derriere and to compile that, the available tools just don’t stand up to those used by managed code developers. Luckily, we do have a decent set of tools that lessens the pain substantially. Firebug is definitely a must have since it incorporates so much DOM & XHR introspection as well as the Web Developer Toolbar. Both are simply awesome. I also love Charles for HTTP sniffing and it’s saved my butt when Firebug couldn’t handle it.

IE8 Developer Tools – Microsoft’s browser debugger tools
Firebug – Mozilla’s browser debugger add-on
WebKit Web Inspector – Webkit’s browser debugger tools
Fiddler – HTTP Sniffer. Great for seeing Ajax requests.
Charles – HTTP Sniffer. Great for seeing Ajax requests. (my personal fav)
Service Capture – HTTP Sniffer. Great for seeing Ajax requests.
dynaTrace Ajax – HTTP performance analyzer
Web Developer’s Toolbar – All purpose Firefox toolbar to inspect everything on a page
YSlow – Analyzes page performance based on accepted industry best practices.
PageSpeed – Analyzes page performance based on accepted industry best practices.
DebugBar – An IE plugin that brings advanced debugging features to IE including JS, DOM & HTTP inspection

CSS Editors:

I prefer to write my CSS code by hand. Call me old-school but many swear by the following CSS editors. CSSEdit by MacRabbit (Mac only) is especially loved by many designers.

TopStyle
Rapid CSS
Xyle
Stylizer
CSSEdit

CSS Frameworks:

These frameworks have really taken off. Like their JavaScript brethren, they help to abstract much of the complexity of building consistent layouts in cross-browser fashion. They’re definitely something I need to look into more and from what I’ve read, 960 GS & Blueprint are the ones people are looking at.

960 Grid System
Blueprint CSS Framework
YAML
Yahoo YUI Grids CSS
Tripoli
Object-Oriented CSS

CSS Resets:

Want to minimize browser inconsistencies? Then use a CSS reset stylesheet to specify baseline CSS styles that make browser presentation defaults more consistent.

Meyer Reset by Eric Meyer
YUI2: Reset CSS
IECSS

JavaScript Libraries:

I definitely recommend everyone to learn JavaScript as you’ll need it to be a really effective client-side developer. With that said, a good JS library will go a long way to making your development faster and much more stable. These libraries are all very mature and dramatically help to abstract the complexities of cross-browser development. My personal favorite is jQuery, of which I’m a member of the project team.

jQuery
jQuery UI
Prototype
MooTools
Dojo
YUI
JavaScriptMVC
qooxdoo
Ext JS
Adobe Spry
Raphael.js – simplifies working with vector graphics on the web
LabJS Dynamic Script Loader – Allows execution and load management of JavaScript files
Lawnchair – A lightweight client-side JSON document store
Sessvars.js – Client-side session data management solution
Reactive Extensions For JS
PURE JS Templating Lib
Underscore.js – Utility lib for jQuery that provides a ton of extended functionality

JavaScript Minifiers

Every byte counts when you’re sending files via HTTP and best practices dictate that on a production, you need to optimize all of your files to minimize page load times. Compressing JavaScript code is one of the easiest ways to do that and these tools will help. On the jQuery project, we’ve started using Google’s Closure compiler because it’s generated the best compression. Try all of them out to see which suits you best.

YUI compressor
Closure compiler
JSMIN
Dean Edward’s Packer
Microsoft Ajax Minifer
Dojo Shrinksafe

JavaScript Shells

There are times when you just want to test a snippet of code without actually going through the trouble of creating a full page. That’s where JavaScript shells shine. JSFiddle and JSBin both rock because apart from supporting plain ole JS, they also allow you to include a host of libraries including jQuery, MooTools, & Dojo.

jsfiddle.net
JSBin
mootools.net/shell (MooTools-specific)

Color Management:

As a programmer, I’m insanely color scheme challenged. I’m inclined to mix yellow with mauve causing a concerted moan to occur across the design community. Luckily, these tools help you choose web safe color schemes that are not only consistent but won’t burn the eyeballs off your site visitors. :)

Colourlovers
Kuler

Editors and IDEs:

I work at Microsoft so you would expect me to be a Visual Studio whiz. Not so. Only recently starting at MS, I’ve only dipped my toe in the VS waters. What I’ve seen though has impressed me but I still have a long way to go before I understand it. If you’re on a Mac, though, I do highly recommend both TextMate and Coda. Both are truly awesome. I’ve used Coda a little more because I liked the UI of it a little better than TextMate’s but TM’s bundle system and ecosystem is amazing. You can get code-complete for just about anything via bundles. For Windows, Notepad++ has been just awesome. I wish it had built-in FTP support like UltraEdit.

Visual Studio
Expression
TextMate
Coda
UltraEdit
Komodo IDE
Notepad++
Notepad2
BBEdit
Aptana
Espresso
Sublime Text
WebStorm
VIM
Eclipse
Netbeans
Geany

Wireframing:

I know some of you are cowboys (or cowgirls) and you just want to start hacking. Well, for the truly impatient, these tools at least let you wireframe your pages quickly and easily. I’ve used Balsamiq and FlairBuilder and both rock. It seems that FlairBuilder is really cranking it up with some nice features. Both are Adobe AIR apps which means they’re cross-platform.

Omnigraffle
Balsamiq
FlairBuilder
Visio
Axure
WireframeSketcher

Browser Testing:

I’ve been fortunate to have multiple OS versions over the years. My wife would definitely prefer for me to have a couple of less PCs sitting around but it’s let me test out my web apps on a variety of platforms, browsers and OSes. Shoot, I even have a version of IE6! For those with less hardware, these services should definitely help. Note that services like BrowserCam & Gomez are subscription-based but worth the cash if you can afford it.

BrowserCam
Adobe BrowserLab
Microsoft Expression Web SuperPreview for IE
Gomez
TredoSoft MultipleIE
CrossBrowserTesting
Multi-Safari
Browserscope
Cuzillion
IETester

Testing (based on the list by John Resig):

This was a list I snagged from John Resig. Obviously, he’s done a boatload of testing so I know this list rocks. JSLint is the old mainstay created by Douglas Crockford but other have really become increasingly essential to good testing. jQuery developers should definitely be looking at QUnit & jQuery-Lint. The most complete tool is Selenium but it does have a bit of a learning curve. If you’re into determining JS performance, checkout SunSpider, Dromaeo, Google’s V8 Benchmark and JSLitmus. These measure the performance of the JS engine, not your apps.

JSLint
jQuery Lint
JSUnit
Selenium Core
JSSpec (MooTools)
UnitTestJS (Prototype)
QUnit (jQuery)
DOH Unit Testing (Dojo)
YUITest 2
YUITest 3
Mochitest
ScrewUnit
JsUnitTest
jsUnity
JsTestDriver
Crosscheck
Env.js
FireUnit
W3C Markup Validation Service
W3C CSS Validation Service
SunSpider
V8 Benchmark
Dromaeo
JSLitmus
HTML Validator Firefox Add-on

Documentation:

Yahoo UI Docs
APIs – Most comprehensive list of APIs on the web
jQuery Docs
jQuery UI Docs
MooTools Docs
Prototype Docs
Dojo Docs
JSON Reference
JSONP

Server-Side JavaScript

Rhino
Node.js
Narwhal.js
CommonJS Standards Project
Persevere
Comet

Books

The books below are really a great selection. I have many in my own library and every so often re-read them I’m currently reading High Performance JavaScript by Nicholas Zakas. Another great book is Stoyan Stefanov’s Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries. I also highly recommend Steve Souders performance book at the bottom of the list. They’re basically the definitive sources for optimizing your web apps.

JavaScript/DOM:

JavaScript Libraries:

HTML & CSS:

Performance:

Learn JavaScript!

What to Read to Get Up to Speed in JavaScript.

The best books & blogs for learning JavaScript development. Broken down by experience levels!


My BIG LIST of JavaScript, CSS & HTML Development Tools, Libraries, Projects, and Books.

Constantly updated with the latest and greatest tools. Check it out!

Categories

Rey Bango is Stephen Fry proof thanks to caching by WP Super Cache