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.
Conversation
Shouldn't your header be 'Frustrating Typos with Javscript'.
What editor do you currently use?
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) :-)
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?
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
@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.
Heh, what a pain. It seems the type attribute serves no real purpose other than to cause trouble.
Tell me about it...
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.
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.
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.)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.. :/
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.
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.
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.
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.
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.
@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.
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.
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.
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)
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.
ouch, typos like that are evil!
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).
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..
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.
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.
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.
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.
Heh, nice one. My favourite mistake is text/css when it's supposed to be text/javascript.
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.
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
@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
Jonathan -- you gotta use jEdit.
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.
Textmate is to me like guns were to Charlton Heston...
You can pry it from my cold dead fingers.
I still use notepad or vi for most everything.
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
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.
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.
I tend to use Top Style for HTML, Zend Studio for PHP and anything that falls in between, Notepad ++
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.
@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.
Editor Textmate = Live spell checking built in = problem solved. Get a mac save the world.
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!
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.
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.
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.
@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.
@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!
ãîëàêòåêî îïàñíîñòå!
Guess no one uses a Spell Checker anymore. Must be out of style after reading about all the alternatives.
Well, some IDE just making it harder to have typos at all - Visual Studio Web Developer for example does a great job on that.
(just thought I'd close those code and pre tags for everybody)
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.
ИÑключительно Ð´Ð»Ñ Ð’Ð°Ñ Ð³Ð¾Ñпода, лучшие из лучших жрицы любви Столицы готовы доÑтавить беÑподобное наÑлаждение! Ðа Ñайте x-stars.ru Ð’Ñ‹ Ñ Ð»ÐµÐ³ÐºÐ¾Ñтью найдете вÑе, что Вам необходимо. Фаворитные индивидуалки от Ñконом клаÑÑа до премиум клаÑÑа. Ð”Ð»Ñ Ð²Ñех тех, кто ÑтремитьÑÑ Ð¿Ñ€Ð¾Ð²ÐµÑти Ñвое Ð²Ñ€ÐµÐ¼Ñ Ñрко и оÑущеÑтвить ÑобÑтвенные ÑекÑуальные Ð¶ÐµÐ»Ð°Ð½Ð¸Ñ Ð² Ñвь, индивидуалки МоÑквы предлагают обширный Ñпектр оказываемых уÑлуг. Удобный поиÑк анкет поможет вам избрать конкрентно ту индивидуалку, какой вы отдаете Ð¿Ñ€ÐµÐ´Ð¿Ð¾Ñ‡Ñ‚ÐµÐ½Ð¸Ñ Ð¿Ð¾ каким-либо параметрам. x-stars.ru не оÑтавит равнодушным даже Ñамого прихотливого гурмана. У Ð½Ð°Ñ Ð»Ð¸ÑˆÑŒ подлинные фото, у Ð½Ð°Ñ Ñамые лучшие индивидуалки МоÑквы.