Frustrating Typos with JavaScript

Sometimes it's the small things that can frustrate you. A missing semi-colon, an extra comma. This afternoon, I ran into the invalid script type:

<script type="text/javscript" src="example.js"></script>

If you're more observant than I you'll notice that the second A is missing in javascript. Without a proper MIME type, browsers don't process the script leaving you with...nothing. Imagine my amazement when none of my functions worked, with no error messages, no nothing. It took me retyping the line to suddenly discover I had mistyped it. Even worse, I copy-pasted the line two more times to include some other scripts. None of those worked either.

I think I need to find a new editor that does code completion. In many ways I feel like a dinosaur in this industry sticking to my antiquated text editors.

Published April 15, 2008
Categorized as JavaScript
Short URL: https://snook.ca/s/887

Conversation

54 Comments · RSS feed
Nate Klaiber said on April 15, 2008

Shouldn't your header be 'Frustrating Typos with Javscript'.

What editor do you currently use?

Bramus! said on April 15, 2008

Dreamweaver CS3 in Code View suits my JS & CSS needs thanks to its clever intellisense (viz. autocompletion). Allows me to code very very very fast.

To make things complete, I'm using Zend Studio for the PHP Development, a real pleasure as it even autocompletes home brew classes (if documented properly) :-)

Tim said on April 15, 2008

Actually just helped a friend who was having problems with his script this weekend. He also uses a text editor to code and was confused because his script wasn't throwing any errors but also wasn't working. Turns out he was checking to see if the browser supported getElemntById instead of getElementById.

Also, to echo Nate's question, what text editor are you using right now?

Jay Gilmore (smashingred) said on April 15, 2008

Jonathan,

I don't know what you are using but if you are on PC (which I seem to think you are) you may want to try e-TextEditor which is a Windows clone of TextMate that has code completion and can use most/many TM bundles. Plus it has built in remote file editing for when those nasty tiny bugs show up and you don't need to diff or SVN.

Cheers,

Jay

Jonathan Snook said on April 15, 2008

@Nate Klaiber: I currently use Ultraedit. It's been my editor for...about 10 years now.

I've been playing with Aptana but it doesn't have the text editing capabilities I need. I use Dreamweaver for bulk HTML production but it's too heavy for light-weight text editing. I tried E and didn't mind it but my trial has expired and I didn't try it enough to make the jump to actually paying for a license. I'm not on a Mac so no Textmate for me.

Ara Pehlivanian said on April 15, 2008

Heh, what a pain. It seems the type attribute serves no real purpose other than to cause trouble.

wally said on April 15, 2008

Tell me about it...

Stephen Tudor said on April 15, 2008

Wot's this? One of my web dev heroes isn't on a Mac, and uses Ultraedit? My respect-o-meter jumps up a notch for his being so loyal to what he is comfortable with, even if it's not what all the cool kids are using.

Me? Cargo-culting TextMate-running fanboy :)

Have you tried Vim 7? I found it pretty configurable and extensible when I played with it.

Jonathan Christopher said on April 15, 2008

I hear great things about E Text Editor. Nearly all of my Windows-using dev colleagues are hooked on it, and at $35 they're happy to buy a license. Bundles and tab triggers basically change your life.

jdbartlett said on April 15, 2008

I personally would like to see some new technologies introduced for client-side scripting, Ara. "application/py", for example, or "application/ruby". Let's see you misspell those, Jon!

(I'm kidding, by the way. "text/vbscript" was bad enough.)

Dušan Smolnikar said on April 15, 2008

But doesn't Ultraedit colorize your code? It should, if I recall correctly. So it should be obvious when things are of the wrong color.

Oh and good luck with the hunt for a decent code-complete-able text editor. Do let us know when you find one. I'm currently working with Aptana, but it's so slow and unresponsive.. :/

Bill said on April 15, 2008

Ha, even knowing you were telling us there was a problem I had trouble seeing the missing 'a' - those are always the trickiest.

I use Editplus which has some code completion but I have to be honest, the "E" completion looks a lot slicker. I'm tempted to download it and give it a whirl.

Andrew Herron said on April 15, 2008

I've tried all sorts of editors on windows looking for something better, even giving some bloated IDEs a chance.

If you really want a full featured text-editor I say for go EditPlus2. It's cheap to buy, $30USD if I recall correctly. It support code highlighting, tabs, remote editing with FTP or SFTP, and can support auto-completion.

Even after jumping to Xubuntu I was using it under WINE with great success.

The one key thing it lacks is good project management but hey, we want a text-editor right?

The only other one I've used and like is jEdit but it can get sluggish. It's what I used full-time when I was running Xubuntu on my work box. It has good project management and plenty of plugins to boot.

Daniel Marino said on April 15, 2008

I used to use Dreamweaver for all HTML/CSS, etc... production, but it's a very resource-heavy program to run. I almost always have Photoshop and Illustrator running at all times along with mail apps and other knick knacks, so I recently gave it the boot! Recently I've been using Taco (which is a freebie) and don't have any major complaints. Another bonus is that it has forced me to stay sharp when coding since it doesn't have auto-complete features.

Jason Beaird said on April 15, 2008

Sounds a lot like my old rant about postion. That post is still the number one google result for "postion", just above Urban Dictionary's definition for the same and "sexual postions"...nice.

To add to the editor discussion, Textmate (sorry Jon) keeps me from making the same typos again and again. I still occasionally use Dreamweaver on large projects, but always end up missing all the cool TM features.

Christopher Hill said on April 15, 2008

Didn't you notice through Firebug or Web Developer Firefox extension that the script wasn't being included? The worst of these times are where you are editing an old version of a script and pulling your hair out when things aren't updating.

Jonathan Snook said on April 15, 2008

@Christopher Hill: That's the fun part, the file still gets downloaded so Firebug still showed the JavaScript as a downloaded resource. I had originally thought my src was wrong but seeing the code in Firebug said it was loading just fine. It just wasn't getting parsed because of the type.

Marc Grabanski said on April 15, 2008

In e text editor, you type "script" then hit tab and it writes the include for you. Also, while editing an HTML document, you can even drag and drop a JavaScript file onto the editor and it will write out the script include for you. Those kind of features is what makes E the best on Windows.

Scott Nelle said on April 15, 2008

I've actually just started using e instead of more full-featured editors and I haven't missed the lack of good code completion. I've been lucky in avoiding typos, I suppose. The editing features are great. I wish I could use Aptana, but I've found that there's too much interface getting in the way.

Tim Shortt said on April 15, 2008

The problem with the e texteditor is that you're going to have to install cygwin. Lame. I realize cygwin gives one "the power of unix" within the windows environment, but when I'm doing front-end web dev, I don't *need* "the power of unix" within my windows environment.

I'm currently running this shareware program call WeBuilder through the paces. I basically alternate between this tool and UltraEdit (which is awesome *as a texteditor*).

The bottom line is that for me there's such a variety of file types I'm working with (HTML, CSS, JS with/without libraries, ASPX, ASP, and sometimes PHP), and I'm so impatient with bloated IDEs (like Aptana, DMX, etc.). Komodo seems promising but it's geared toward the open-source languages--and I'm stuck in .Net land at work

Viva la antiquated text editors! (I guess)

Joseph Scott said on April 15, 2008

Oh man, I actually had the same exact typo just the other day. It turned my quick tweak of a page into a longer than expected ordeal trying to figure out why that chunk of Javascript wasn't doing anything.

Matt Wilcox said on April 15, 2008

ouch, typos like that are evil!

Aptana but it doesn't have the text editing capabilities I need

Out of curiosity, what sort of things are you looking for that Aptana doesn't have?

I've been using it for quite some time, and hardly a day goes by that I don't find something it does that I've wanted for ages but not found (like converting tabs to spaces for a file, or smart search-replace on a whole directory... man was I happy when I found both of those).

Seb Barre said on April 15, 2008

I was also going to chime in on Aptana (or any other Eclipse-based IDE) and ask what problems you are having with it?

I find Aptana as a whole a bit sluggish and heavy (others have pointed to this as wel) so I actually use the PDT installation (a PHP-based configuration of Eclipse) and I add in JSEclipse and Subclipse onto that. I find this combination is fast and efficient and covers all the types I regularly need (HTML, PHP, CSS and JS).

I have yet to try Zend Studio for Eclipse, but I've heard good things so far feature-wise.. I'm just waiting to hear less bad things performance-wise and stability-wise before trying it out.

I used to live without code completion, validation or refactoring, and I don't know why I ever did. It saves me so much time and frustration. I am easily (and measurably) 30-40% more efficient now.

As much as I love my quick-and-small text editors (Textmate on the Mac, Editplus on the PC), I don't think I'll ever do serious development work without an IDE anymore..

jack said on April 15, 2008

Actually, I don't think text/javascript is Javascript's MIME type. I think Javascript only recently got a MIME type and it's something like application/javascript.

If you leave out type="blah/foo" entirely it works just fine is all the browsers.

Paul Irish said on April 15, 2008

Alternatively, if you're willing to forego 100% validation, you can skip using the type attribute completely.

It will fail validation in HTML4Strict and XHTML1.0, but it'll still work fine in all browsers.

Darek said on April 15, 2008

I use Notepad++. It does most/all things Ultraedit can do, and it's free and open source. I'm happy with the color-coding feature, but it would be nice to have auto-complete.

renesilva said on April 15, 2008

I use Aptana for xHTML/JS/CSS and ZendStudio for PHP/XML. I know they are huge RAM consumers but I have more than 1 Gig. Actually Aptana is the best editor I've ever used, DreamWeaver sucks at programming.

Kalle Persson said on April 15, 2008

Heh, nice one. My favourite mistake is text/css when it's supposed to be text/javascript.

Patrick said on April 15, 2008

I can't tell you how many times I have done that EXACT same thing. Thankfully, dragging the file into textmate links it for me, typo free.

Kevin said on April 15, 2008

Jonathan--

@ "playing with Aptana but it doesn't have the text editing capabilities I need"

What is it that you'd like to have that Aptana does not have yet?

Let me know... my email: khakman [at] aptana.com

Remy Sharp said on April 15, 2008

@Paul Irish - you beat me to the punch!

Here's the script tag sans type working (though I'm not 100% certain of IE6 - it's installed in parallel with IE7, and I'm pretty sure it's using IE7's JScript engine):

http://remysharp.com/demo/simple-script.html

David Walsh said on April 15, 2008

Jonathan -- you gotta use jEdit.

Alex Bilbie said on April 15, 2008

I'm really happy with Aptana for HTML/PHP/CSS and JS. My only complaints is that there is no word wrap and auto-complete does not work if you try adding PHP into HTML code e.g.

< input type="text" name="< ?php echo $name ?>" />
adrian said on April 15, 2008

Textmate is to me like guns were to Charlton Heston...

You can pry it from my cold dead fingers.

Devon said on April 15, 2008

I still use notepad or vi for most everything.

satts said on April 15, 2008

Hi Jonathan

Till date I was using SciTE for all coding stuff on my linux box, but problems like the one you faced has pushed me to Aptana and I dont think that code completion makes a programmer dumb it only simplyfies the dev process

Lo J said on April 16, 2008

Aptana doesnt auto-complete html entities... too bad. And no wyswig for easy and quick HTML content editing.
But Aptana can be configured to format any Js file to your requirements in terms of indentation and curly brackets! and that is sooo cool when you want to read code from another guy wo uses a different coding style! too bad you can't do that in the php editor section. (you can for HTML,CSS AND JS if i'm correct) He can also auto complete some popular Js frameworks API's.
Anyway, it's free and it's a great IDE when it comes to javascript. Give it another chance.

Nik Chankov said on April 16, 2008

Man, I have the same situation a week or two ago. But instead of misspell, I wrote javascript/text and the result was the same - nothing was working. But I think your is worst, because at first glance I didn't find it as well.

Pete Jones said on April 16, 2008

I tend to use Top Style for HTML, Zend Studio for PHP and anything that falls in between, Notepad ++

Matt Wilcox said on April 16, 2008

Aptana doesnt auto-complete html entities... too bad. And no wyswig for easy and quick HTML content editing.

I can not imagine why any web developer that cares about producing good code would use a WYSIWYG approach. But, should you want to, there is in fact a toolbar for this in the newer versions. I turned all mine off, waste of screen space.

Jonathan Snook said on April 16, 2008

@Matt Wilcox: the idea that a WYSIWYG editor can't be used to produce good code is an outdated line of thinking. I write all my blog posts using Dreamweaver, for example. I also use Dreamweaver for larger projects with more static content. It works extremely well and I can lay out text and tables much faster and still maintain clean code.

parrfolio said on April 16, 2008

Editor Textmate = Live spell checking built in = problem solved. Get a mac save the world.

Stevie K said on April 16, 2008

By far the worst thing to do is linking a js file with a self closing tag. Which I've done in a lapse of concentration. For 15 minutes to half an hour I couldn't figure out why the code worked perfectly in Firefox and not at all in IE!

Josh Stodola said on April 16, 2008

You should know that nobody does it better than Microsoft. You wouldn't have to type half of what you type now. Visual Studio. Intellisense. You're lightyears behind for using PHP, brotha. Lightyears. You'll catch on someday, though.

Josh Stodola said on April 16, 2008

Some quick examples of what I am talking about...

http://img73.imageshack.us/img73/320/pwned1di0.png
http://img73.imageshack.us/img73/5246/pwned2mr3.png
http://img73.imageshack.us/img73/5872/pwned3dk1.png

You really gotta use it to believe it though. It'll change your life.

Andy Kant said on April 17, 2008

I would also recommend e-TextEditor (like others have said, a Windows clone of Textmate). I've been using it a few months now (bought it when it went 1.0). It can be a bit buggy at times due to how young it is, but it is easily the best text editor on Windows if you'd rather have that level of simplicity. I wish that Microsoft would release an Express version of Visual Studio that would be able to use add-ins to support other languages because that IDE is worlds better than any competitor.

Andy Kant said on April 17, 2008

@Josh Stodola
I'm with you on the excellent of Visual Studio + Intellisense, but there's nothing wrong with PHP (I use PHP, ASP.NET, Java/JSP, Ruby/Rails, and Python/Django - it all depends on what's the best solution for the project at hand). Plus if you have a commercial version of VS, you can get an add-in to add PHP support. VS2008 has Ruby/Python support built in, don't remember if they still have Java/J# support though.

Josh Stodola said on April 17, 2008

@Andy Kant
You're right. PHP is most definitely powerful, I know. I've also done JSP and Servlets, and even Perl way back in the day. I don't believe there is anything that will make you more productive than ASP.NET though. Just spreading the word!

myName said on April 18, 2008

ãîëàêòåêî îïàñíîñòå!

Hal Rigler said on April 22, 2008

Guess no one uses a Spell Checker anymore. Must be out of style after reading about all the alternatives.

Anonymous said on April 24, 2008

Well, some IDE just making it harder to have typos at all - Visual Studio Web Developer for example does a great job on that.

David Simmer said on April 29, 2008

(just thought I'd close those code and pre tags for everybody)

Avadhut Phatarpekar said on October 09, 2008

I guess I am late to the party, but KomodoEdit is the way to go. It's intelligent script completer is really really helpful. And it has a very small footprint.

In your case, for example, it would display a red squiggly line (like in MS Word for typos) when you sprung a *javscript* on it.

Zotattdandemi said on March 17, 2011

Исключительно для Вас господа, лучшие из лучших жрицы любви Столицы готовы доставить бесподобное наслаждение! На сайте x-stars.ru Вы с легкостью найдете все, что Вам необходимо. Фаворитные индивидуалки от эконом класса до премиум класса. Для всех тех, кто стремиться провести свое время ярко и осуществить собственные сексуальные желания в явь, индивидуалки Москвы предлагают обширный спектр оказываемых услуг. Удобный поиск анкет поможет вам избрать конкрентно ту индивидуалку, какой вы отдаете предпочтения по каким-либо параметрам. x-stars.ru не оставит равнодушным даже самого прихотливого гурмана. У нас лишь подлинные фото, у нас самые лучшие индивидуалки Москвы.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.