Your SlideShare is downloading. ×
0
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Efficient JavaScript Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Efficient JavaScript Development

2,105

Published on

tools, strategies, tips and tricks

tools, strategies, tips and tricks

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,105
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Efficient JavaScript Development tools, strategies, tips and tricks Wolfram Kriesing, uxebu wolfram@uxebu.com
  • 2. 1. Writing Code 2. Running Code 3. Debugging Code 4. Fixing Code
  • 3. Writing Code • coding style, conventions, etc. • editors • customize your editor • templates • code analyzer • try it first
  • 4. Coding Style, etc. • less to think • all code looks the same • code not style • stay focused
  • 5. Useful Editors What is „useful“? faster writing of code, auto completion, code analyzer, syntax check and coloring, dive in • komodo • aptana • eclipse • many others ...
  • 6. Customize your editor • keyboard shortcuts • folding, bookmarking • make your editor do what you want!
  • 7. Templates • no typos • for the whole team • docs built in • copy with pride http://www.activestate.com/Products/komodo_ide/edit_features.mhtml
  • 8. Code analyzer • syntax coloring • knows the API of your library • understands your code • links code (dive in) • auto completion • JSLint built in
  • 9. JSLint • finds IE traps (trailing comma) • gives JS insight (parseInt, ===, ...) • understand type coercion • finds missing var statements • undefined variables (myVar vs. myvar) http://jslint.com http://wolfram.kriesing.de/blog/index.php/2007/understanding-jslint-output http://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/
  • 10. Try it first dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500)
  • 11. Try it first dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500) Are you sure this works?
  • 12. Try it first dojo.query(quot;h1quot;).style({color:quot;redquot;}).anim({left:300}, 500) Are you sure this works? • try the code in FireBug first • you learn more about your library • play with the code • maybe there is even a better way
  • 13. Running Code • loading times, order, etc. • environments • ajax requests • inspect and fix
  • 14. Loading the Code • syntax errors • any 404s • need a build
  • 15. Watch the traffic • Charles • HTTP Live Headers • Fiddler • etc.
  • 16. Environments • browsers • phones • air • widgets
  • 17. AJAX Requests • FireBug reveals it all • watch out with XD requests •
  • 18. Inspect and Fix • fix the DOM • fix the CSS • see inheritance chains • validate before trying
  • 19. Debugging Code • debuggers • object inspection • other sources • isolating the problem
  • 20. Debuggers • IE8, developer tool bar • FireBug • Drosera • Venkman • Microsoft Script Debugger • Visual Studio Express • pi.debugger, FireBug Lite, .... http://www.nczonline.net/blog/2008/03/22/falling-in-love-with-the-ie8-javascript-debugger/
  • 21. debugger; • programatic breakpoint • set on the fly
  • 22. Object inspection • console.log • console.dir
  • 23. Other Sources • google your problem • talk to a colleague • sleep over it •
  • 24. Fixing Code • trial and error • alert, console.log, etc. • in browser • tuning
  • 25. Trial and Error • you know your code • you think you know it • you imagine you knew it • you think you should try • you fail
  • 26. alert, console.log • alert, confirm • use numbered console.log •
  • 27. *.toString() • see the source • missing function name (you know it) • parameters • fix it in place!
  • 28. Tuning • console.time • console.timeEnd • console.trace
  • 29. thx http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com

×