• Like


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

How I got started in JavaScript

Uploaded on

A little overview on how I got started in JavaScript, presented at beermatesjs ( http://www.beermatesjs.com/ ), a local JavaScript user group meetup in Singapore (4 Nov 2010)

A little overview on how I got started in JavaScript, presented at beermatesjs ( http://www.beermatesjs.com/ ), a local JavaScript user group meetup in Singapore (4 Nov 2010)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. How I got started in JavaScript.
  • 2. http://ajaxian.com/archives/bacon-a-sizzling-new-yui-utility
  • 3. Hello, I’m @cheeaun. I do lots of awesome web stuff.
  • 4. In the old days, JavaScript is (sort of) known as DHTML. Or at least, that’s how I know it.
  • 5. But, I wasn’t really that interested in it.
  • 6. Later I was inspired by this guy. Shaun Inman.
  • 7. http://si8.shauninman.com/plete/
  • 8. http://si8.shauninman.com/plete/
  • 9. It was so cool, I just got to view source.
  • 10. I had totally no idea what it does. Still I try to learn JavaScript anyway.
  • 11. My first attempt is to fix a small, simple problem on my own web site.
  • 12. The scenario.
  • 13. I have a float-ed image here with variable width.
  • 14. I don’t want this to happen.
  • 15. The solution.
  • 16. Display image this way if its width is roughly 90% of the container width.
  • 17. The code. Please pardon my noobness.
  • 18. http://gist.github.com/655217#file_floatimages1.js
  • 19. The code evolves.
  • 20. http://gist.github.com/655217#file_floatimages2.js
  • 21. The code may look simple(?) but it took me weeks to figure it out. I didn’t touch JavaScript for a period of time since then.
  • 22. Until I got inspired, again.
  • 23. One day, I saw this. http://wiki.github.com/madrobby/scriptaculous/effect-fade
  • 24. I realize the existence of JavaScript frameworks and decided to learn one of them.
  • 25. I end up learning MooTools. http://mootools.net/
  • 26. Why MooTools?
  • 27. Because I like the MooTools code, syntax style, and documentation.
  • 28. http://mootools.net/docs/
  • 29. http://keetology.com/blog/2009/07/00-up-the-moo-herd-mootools-tips-and-tricks
  • 30. Also, MooTools developers are seriously awesome.
  • 31. http://twitter.com/cpojer/status/26416392120
  • 32. http://twitter.com/davidwalshblog/status/26109921796
  • 33. http://engineering.twitter.com/2010/09/tool-legit.html
  • 34. The best part is the more I learn about MooTools, the more I learn about JavaScript itself.
  • 35. Remember my imageFloat() function? It evolves, again. Not the prettiest code in the world but oh well.
  • 36. http://gist.github.com/655217#file_floatimages3.js
  • 37. I dive in deeper. I’ve coded some JavaScript-intensive apps and MooTools plugins.
  • 38. One of the most interesting is Mooj, which provides jQuery- like syntax for MooTools. http://github.com/cheeaun/mooj
  • 39. Though the most exciting of all is MooEditable, a simple web- based WYSIWYG editor. http://github.com/cheeaun/mooeditable
  • 40. http://twitter.com/kamicane/status/1773451438
  • 41. But then, here’s my advice; Don’t even think of writing your own WYSIWYG editor. It’s a living hell.
  • 42. After all this, I’m still learning. One step at a time.
  • 43. http://twitter.com/cheeaun/status/9908162471
  • 44. http://twitter.com/cheeaun/status/5010791853
  • 45. So does everyone else. Even you.
  • 46. http://twitter.com/izs/status/9716361341
  • 47. http://twitter.com/cowboy/status/20381852737
  • 48. http://shouldilearnjavascript.com/
  • 49. That’s all, folks. Thanks! Tools used during the production of these slides: http://pastie.org/ http://placehold.it/ http://jsfiddle.net/ http://jsconsole.com/