• Like

Loading…

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

  • 1,568 views
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

Views

Total Views
1,568
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
3

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