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)

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.

6. But, I wasn’t really that
interested in it.

7. Later I was inspired by this guy.
Shaun Inman.

8. http://si8.shauninman.com/plete/

9. http://si8.shauninman.com/plete/

10. It was so cool,
I just got to view source.

12. I had totally no idea what it
does. Still I try to learn
JavaScript anyway.

13. My first attempt is to fix a
small, simple problem on my
own web site.

14. The scenario.

15. I have a float-ed image here with
variable width.

16. I don’t want this to happen.

17. The solution.

18. Display image this way if its width is
roughly 90% of the container width.

19. The code.
Please pardon my noobness.

20. http://gist.github.com/655217#file_floatimages1.js

21. The code evolves.

22. http://gist.github.com/655217#file_floatimages2.js

23. 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.

24. Until I got inspired, again.

25. One day, I saw this.
http://wiki.github.com/madrobby/scriptaculous/effect-fade

26. I realize the existence of
JavaScript frameworks and
decided to learn one of them.

27. I end up learning MooTools.
http://mootools.net/

28. Why MooTools?

29. Because I like the MooTools
code, syntax style, and
documentation.

30. http://mootools.net/docs/

31. http://keetology.com/blog/2009/07/00-up-the-moo-herd-mootools-tips-and-tricks

32. Also, MooTools developers are
seriously awesome.

33. http://twitter.com/cpojer/status/26416392120

34. http://twitter.com/davidwalshblog/status/26109921796

35. http://engineering.twitter.com/2010/09/tool-legit.html

36. The best part is the more I learn
about MooTools, the more I
learn about JavaScript itself.

37. Remember my imageFloat()
function? It evolves, again.
Not the prettiest code in the
world but oh well.

38. http://gist.github.com/655217#file_floatimages3.js

39. I dive in deeper. I’ve coded
some JavaScript-intensive apps
and MooTools plugins.

40. One of the most interesting is
Mooj, which provides jQuery-
like syntax for MooTools.
http://github.com/cheeaun/mooj

41. Though the most exciting of all
is MooEditable, a simple web-
based WYSIWYG editor.
http://github.com/cheeaun/mooeditable

42. http://twitter.com/kamicane/status/1773451438

43. But then, here’s my advice;
Don’t even think of writing your
own WYSIWYG editor. It’s a
living hell.

44. After all this, I’m still learning.
One step at a time.

45. http://twitter.com/cheeaun/status/9908162471

46. http://twitter.com/cheeaun/status/5010791853

47. So does everyone else.
Even you.

48. http://twitter.com/izs/status/9716361341

49. http://twitter.com/cowboy/status/20381852737

50. http://shouldilearnjavascript.com/

51. 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/