SlideShare a Scribd company logo
1 of 51
Download to read offline
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 then.
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://jsfiddle.net/ http://jsconsole.com/

More Related Content

What's hot

jsptags-blocks 20090606
jsptags-blocks 20090606jsptags-blocks 20090606
jsptags-blocks 20090606
MyoungSu Shin
 
Multimedia in the classroom final presentation
Multimedia in the classroom final presentationMultimedia in the classroom final presentation
Multimedia in the classroom final presentation
stvna01
 
Wordpressdc yurivictor
Wordpressdc yurivictorWordpressdc yurivictor
Wordpressdc yurivictor
Yuri Victor
 

What's hot (12)

jsptags-blocks 20090606
jsptags-blocks 20090606jsptags-blocks 20090606
jsptags-blocks 20090606
 
10 Tips to Make WordPress Your Friend
10 Tips to Make WordPress Your Friend 10 Tips to Make WordPress Your Friend
10 Tips to Make WordPress Your Friend
 
Teaching with technology
Teaching with technologyTeaching with technology
Teaching with technology
 
Ingles sena
Ingles senaIngles sena
Ingles sena
 
5. Pre-Production - Print Project
5. Pre-Production - Print Project5. Pre-Production - Print Project
5. Pre-Production - Print Project
 
Pragmatic JavaScript
Pragmatic JavaScriptPragmatic JavaScript
Pragmatic JavaScript
 
Multimedia in the classroom final presentation
Multimedia in the classroom final presentationMultimedia in the classroom final presentation
Multimedia in the classroom final presentation
 
14 Really Useful Websites
14 Really Useful Websites14 Really Useful Websites
14 Really Useful Websites
 
I tried to dockerize my app but I had to PaaS
I tried to dockerize my app but I had to PaaSI tried to dockerize my app but I had to PaaS
I tried to dockerize my app but I had to PaaS
 
10-ish Tips to Make WordPress Your Friend
10-ish Tips to Make WordPress Your Friend10-ish Tips to Make WordPress Your Friend
10-ish Tips to Make WordPress Your Friend
 
Wordpressdc yurivictor
Wordpressdc yurivictorWordpressdc yurivictor
Wordpressdc yurivictor
 
Friday Mash
Friday MashFriday Mash
Friday Mash
 

Viewers also liked (8)

Things I've learnt from my Hacker News web app
Things I've learnt from my Hacker News web appThings I've learnt from my Hacker News web app
Things I've learnt from my Hacker News web app
 
Designing Firefox Themes
Designing Firefox ThemesDesigning Firefox Themes
Designing Firefox Themes
 
Pentago on Wave
Pentago on WavePentago on Wave
Pentago on Wave
 
Isheila doet Marathon Rotterdam
Isheila doet Marathon RotterdamIsheila doet Marathon Rotterdam
Isheila doet Marathon Rotterdam
 
Lets Look At Webquests
Lets Look At  WebquestsLets Look At  Webquests
Lets Look At Webquests
 
Tresoar GO social
Tresoar GO socialTresoar GO social
Tresoar GO social
 
Pedagogy To Practice
Pedagogy To PracticePedagogy To Practice
Pedagogy To Practice
 
M3 Class vivid vocab work
M3 Class vivid vocab workM3 Class vivid vocab work
M3 Class vivid vocab work
 

Similar to How I got started in JavaScript

The best way to learn java script
The best way to learn java scriptThe best way to learn java script
The best way to learn java script
Wei Sun
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
How to reuse content without killing your reputation
How to reuse content without killing your reputationHow to reuse content without killing your reputation
How to reuse content without killing your reputation
James Pruitt
 
WRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPointWRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPoint
Miami University
 

Similar to How I got started in JavaScript (20)

Georgia Tech Hack Day
Georgia Tech Hack DayGeorgia Tech Hack Day
Georgia Tech Hack Day
 
The best way to learn java script
The best way to learn java scriptThe best way to learn java script
The best way to learn java script
 
Animation in the classroom
Animation in the classroomAnimation in the classroom
Animation in the classroom
 
Fun with css frameworks
Fun with css frameworksFun with css frameworks
Fun with css frameworks
 
With Great Nerdery Comes Great Responsibility
With Great Nerdery Comes Great Responsibility With Great Nerdery Comes Great Responsibility
With Great Nerdery Comes Great Responsibility
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
7 Simple Things I Learned about JavaScript
7 Simple Things I Learned about JavaScript7 Simple Things I Learned about JavaScript
7 Simple Things I Learned about JavaScript
 
Hacking For Innovation
Hacking For InnovationHacking For Innovation
Hacking For Innovation
 
Web 2.0 Tools For The Classroom Cape Elizabeth
Web 2.0 Tools For The Classroom Cape ElizabethWeb 2.0 Tools For The Classroom Cape Elizabeth
Web 2.0 Tools For The Classroom Cape Elizabeth
 
Resisting The Feature Creature
Resisting The Feature CreatureResisting The Feature Creature
Resisting The Feature Creature
 
Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)Just One (CSS Dev Conference keynote)
Just One (CSS Dev Conference keynote)
 
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears
 
Ideation,demos
Ideation,demosIdeation,demos
Ideation,demos
 
Pixlr and small apps in the classroom
Pixlr and small apps in the classroomPixlr and small apps in the classroom
Pixlr and small apps in the classroom
 
Next Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv GohilNext Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv Gohil
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
How to reuse content without killing your reputation
How to reuse content without killing your reputationHow to reuse content without killing your reputation
How to reuse content without killing your reputation
 
How My Comic Book Obsession Birthed a New Functional Testing Tool
How My Comic Book Obsession Birthed a New Functional Testing ToolHow My Comic Book Obsession Birthed a New Functional Testing Tool
How My Comic Book Obsession Birthed a New Functional Testing Tool
 
WRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPointWRA 210 April 14th PowerPoint
WRA 210 April 14th PowerPoint
 
Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)Techniques For A Modern Web UI (With Notes)
Techniques For A Modern Web UI (With Notes)
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 

How I got started in JavaScript