What are the top plugins and tools for web developers?
January 15, 2011 12:23 PM Subscribe
What are your favourite plugins, IDEs, tools and tricks for client side web development? I'd like to have a "tip of the week" or a "plugin of the week" spot in a course I'm delivering. Main content of the course is HTML5/JavaScript/CSS, with a bit of JQuery and Silverlight.
My preference is for browser plugins or online tools, rather than things that require admin rights to install - so the students can have a play with it. If there's something awesome that requires an install I might talk about it with slides though, so go ahead and mention it.
My preference is for browser plugins or online tools, rather than things that require admin rights to install - so the students can have a play with it. If there's something awesome that requires an install I might talk about it with slides though, so go ahead and mention it.
Spoon's Browser Sandbox is a fantastic way to test on different browsers. Unfortunately they recently lost their ability to host IE instances, but hopefully they'll restore that soon.
posted by drjimmy11 at 1:06 PM on January 15, 2011 [1 favorite]
posted by drjimmy11 at 1:06 PM on January 15, 2011 [1 favorite]
(I think Spoon does require a small install, though. Sorry.)
posted by drjimmy11 at 1:07 PM on January 15, 2011
posted by drjimmy11 at 1:07 PM on January 15, 2011
There's also the Developer Tools which come with IE8. They come bundled with the browser, but a lot of people don't know about them. Frankly, they suck- it's like an extremely crummy ripoff of Firebug- but it's the best you can do for IE debugging. You can open them by pressing F12, I think, or using the top menus.
posted by drjimmy11 at 1:10 PM on January 15, 2011
posted by drjimmy11 at 1:10 PM on January 15, 2011
I use XRAY a lot for figuring out the structure of a page without getting into Firebug or Safari's Web Inspector.
posted by nicwolff at 1:15 PM on January 15, 2011
posted by nicwolff at 1:15 PM on January 15, 2011
I'd recommend a little overview of source control, git, mercurial, or svn. Some people think of it only from a programming point of view, but it's amazingly helpful in anything text or markup based.
posted by advicepig at 1:22 PM on January 15, 2011 [1 favorite]
posted by advicepig at 1:22 PM on January 15, 2011 [1 favorite]
Fiddler is an Http debugging proxy for Windows. You can see the raw Http requests and responses, as well as set breakpoints to modify responses before the browser gets them, simulate modem speeds, and tons of other stuff. Works with Chrome and IE.
You should not use tools like spoon or IETester that host multiple versions of IE side by side because the haphazard mixing of Windows system DLLs is unsafe and unreliable. You can get free app compat virtual machines from Microsoft for testing different IE versions in Virtual PC. Just do a google search.
Finally, Visual Studio 2010 is my favorite environment for development of all sorts. You can get VS Express for free; again just google it.
Press F12 for developer tools in IE8+ or install Firebug Light. Chrome has excellent built-in developer tools as well.
LiveHttpHeaders is a firefox plugin that gives you about 1% of Fiddlers features. It lets you see the requests and responses, but that's about it. Better than nothing I suppose.
posted by jeffamaphone at 2:02 PM on January 15, 2011
You should not use tools like spoon or IETester that host multiple versions of IE side by side because the haphazard mixing of Windows system DLLs is unsafe and unreliable. You can get free app compat virtual machines from Microsoft for testing different IE versions in Virtual PC. Just do a google search.
Finally, Visual Studio 2010 is my favorite environment for development of all sorts. You can get VS Express for free; again just google it.
Press F12 for developer tools in IE8+ or install Firebug Light. Chrome has excellent built-in developer tools as well.
LiveHttpHeaders is a firefox plugin that gives you about 1% of Fiddlers features. It lets you see the requests and responses, but that's about it. Better than nothing I suppose.
posted by jeffamaphone at 2:02 PM on January 15, 2011
Frankly, they suck- it's like an extremely crummy ripoff of Firebug- but it's the best you can do for IE debugging. You can open them by pressing F12, I think, or using the top menus.
drjimmy11, you reminded me also that there is a "Firebug Lite" too (for browsers other than Firefox) that I remember playing with once...don't know how awesome it is though.
posted by dubitable at 2:19 PM on January 15, 2011
drjimmy11, you reminded me also that there is a "Firebug Lite" too (for browsers other than Firefox) that I remember playing with once...don't know how awesome it is though.
posted by dubitable at 2:19 PM on January 15, 2011
A lot of JavaScript programmers still mix logic and content. As far as things to teach I think client-side templating should have more emphasis. The inbuilt jQuery template is adequate (albeit a bit slow) but Mustache.js or Handlebars are quite a bit faster.
posted by holloway at 2:44 PM on January 15, 2011
posted by holloway at 2:44 PM on January 15, 2011
JWPlayer is a fantastic HTML5 compatible video player.
Firebug is awesome itself but there are even more cool extensions like Yslow and FireQuery
ditto on Fiddler.
Check out Google App Engine + Gaelyk for a ridiculously easy way to get a web site up and running.
posted by kenliu at 8:27 PM on January 15, 2011
Firebug is awesome itself but there are even more cool extensions like Yslow and FireQuery
ditto on Fiddler.
Check out Google App Engine + Gaelyk for a ridiculously easy way to get a web site up and running.
posted by kenliu at 8:27 PM on January 15, 2011
Charles is similar to fiddler, but I like the layout a lot more. It has the option to view requests sequentially or hierarchically, and you can view requests and responses as headers, raw, text, and navigable XML, JSON and AMF views (Charles is specifically designed to make Flash debugging easier). Also does throttling, rewriting and all that crap.
It costs a little, but it's worth it to get rid of the nag screen and 30-minute run time of the free version.
posted by klanawa at 12:47 AM on January 16, 2011
It costs a little, but it's worth it to get rid of the nag screen and 30-minute run time of the free version.
posted by klanawa at 12:47 AM on January 16, 2011
Typetester is an in-browser service allowing you to compare your screen type using web-safe fonts as well as any other font on your system. It allows you to experiment with leading, tracking and other formatting and then pull the generated CSS code from it. Invaluable for creating sweet headings . . .
posted by jeremias at 12:21 PM on January 16, 2011
posted by jeremias at 12:21 PM on January 16, 2011
Microsoft has just released webmatrix, and it's looking good as a lightweight Web development environment.
This gives you a .net MVC web environment with the Razor view engine. Because you're using Razor, it's perfect for focusing on the HTML.
posted by seanyboy at 5:58 AM on January 18, 2011
This gives you a .net MVC web environment with the Razor view engine. Because you're using Razor, it's perfect for focusing on the HTML.
posted by seanyboy at 5:58 AM on January 18, 2011
This thread is closed to new comments.
posted by dubitable at 12:45 PM on January 15, 2011 [1 favorite]