How I got started in JavaScript.
http://ajaxian.com/archives/bacon-a-sizzling-new-yui-utility
Hello, I’m @cheeaun.
I do lots of awesome web stuff.
In the old days, JavaScript is
(sort of) known as DHTML.
Or at least, that’s how I know it.
But, I wasn’t really that
interested in it.
Later I was inspired by this guy.
Shaun Inman.
http://si8.shauninman.com/plete/
http://si8.shauninman.com/plete/
It was so cool,
I just got to view source.
I had totally no idea what it
does. Still I try to learn
JavaScript anyway.
My first attempt is to fix a
small, simple problem on my
own web site.
The scenario.
I have a float-ed image here with
variable width.
I don’t want this to happen.
The solution.
Display image this way if its width is
roughly 90% of the container width.
The code.
Please pardon my noobness.
http://gist.github.com/655217#file_floatimages1.js
The code evolves.
http://gist.github.com/655217#file_floatimages2.js
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 th...
Until I got inspired, again.
One day, I saw this.
http://wiki.github.com/madrobby/scriptaculous/effect-fade
I realize the existence of
JavaScript frameworks and
decided to learn one of them.
I end up learning MooTools.
http://mootools.net/
Why MooTools?
Because I like the MooTools
code, syntax style, and
documentation.
http://mootools.net/docs/
http://keetology.com/blog/2009/07/00-up-the-moo-herd-mootools-tips-and-tricks
Also, MooTools developers are
seriously awesome.
http://twitter.com/cpojer/status/26416392120
http://twitter.com/davidwalshblog/status/26109921796
http://engineering.twitter.com/2010/09/tool-legit.html
The best part is the more I learn
about MooTools, the more I
learn about JavaScript itself.
Remember my imageFloat()
function? It evolves, again.
Not the prettiest code in the
world but oh well.
http://gist.github.com/655217#file_floatimages3.js
I dive in deeper. I’ve coded
some JavaScript-intensive apps
and MooTools plugins.
One of the most interesting is
Mooj, which provides jQuery-
like syntax for MooTools.
http://github.com/cheeaun/mooj
Though the most exciting of all
is MooEditable, a simple web-
based WYSIWYG editor.
http://github.com/cheeaun/mooeditable
http://twitter.com/kamicane/status/1773451438
But then, here’s my advice;
Don’t even think of writing your
own WYSIWYG editor. It’s a
living hell.
After all this, I’m still learning.
One step at a time.
http://twitter.com/cheeaun/status/9908162471
http://twitter.com/cheeaun/status/5010791853
So does everyone else.
Even you.
http://twitter.com/izs/status/9716361341
http://twitter.com/cowboy/status/20381852737
http://shouldilearnjavascript.com/
That’s all, folks. Thanks!
Tools used during the production of these slides:
http://pastie.org/ http://placehold.it/ http:...
How I got started in JavaScript
How I got started in JavaScript
Upcoming SlideShare
Loading in...5
×

How I got started in JavaScript

1,761

Published 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)

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,761
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

How I got started in JavaScript

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

    Clipping is a handy way to collect important slides you want to go back to later.

×