The Accessibility of Programming
why is it so scary to learn?Chris Dolphin @likethemammal
http://goo.gl/l1ehqI...Don't just buy a new video game, make one. Don't just download the latest app, help design it. Don't just play on your phone, program it...No one's born a computer scientist...
Barack Obama
Dec 2013
Goals of this talk
Why its so scary.
How its not magic.
How easy it can be.
Starting in the wrong place
PHPHTMLPythonRubyJavascriptGoJavaWhy is learning so hard?
Its hard to get started
Install
Setup
Assumptions
Acronyms
etc
Its hard to practically apply what you've learned
For Android development you need an Android device
For Back-end development you need a server
It doesnt have to be this hard.
Why is the front-end web a good place to start?
You already use it everyday
So you understand how it should work.
Its open
Every site can be investigated to learn how things work
Doesn't require knowing the command line
All you need is a browser.
No terminal, editor, or install.
CMSs make it easy to start tweaking things without setting anything up.
Tech Demo!
Getting into the basics
What does front-end mean? How's it related to back-end?
Front-end
Layout
Colors
Buttons
Images
Animation
Media playback (Video/Music)
Dropdowns, sliders, transparency
Back-end
Databases
Real-time (i.e. chat, twitter feed, etc.)
Login/Signup
Search
Processing forms
Much scarier things...
I prefer the front-end web because I can easily see that I'm working with something
Theres a thing and I'm positioning it, changing its color, or animating it.
Basics of front-end
HTML
CSS
Javascript
HTML is the scaffolding
CSS is layout and colors
Javascript is for actions
How simple things can be
<html> <head> <title>Some Title</title> </head> <body style="background: blue"> <h1 onclick="alert('hey')">Hello World</h1> </body> <html>
Tech Example!
What is the DOM?
Investigate how your favorite sites work.
Its a great way to learn ;p
What is Javascript
The "programming" side of the web.
Javascript, jQuery, Java
needs some clarification...
Where the command line comes in
Git
Required to use some libraries
Serving and Watching files
Live Reload
Installing Modules
A bunch more reasons...
Overview of Chrome
Chrome OS
Chrome Dev Tools
Chrome OS
cheap
quick
extendable
closed
Chrome Dev Tools
Elements panel
Console panel
Sources panel
Selection tool
How do you compensate for Photoshop, Terminal, etc.?
Web tools
Koding
Pixlr Editor
JS Fiddle
Codepen
Stackoverflow
Koding (acct required, but its free)
https://koding.com/Terminal
Pixlr Editor (no account)
http://pixlr.com/editor
JS Fiddle (no account)
http://jsfiddle.net
Codepen (no account)
http://codepen.io
Stack Overflow (no account)
http://stackoverflow.com
Going further
Building Chrome Extensions
Building Dev Tools Extensions
Activate Dev Mode for Chrome OS
Wrapping up
Programming isnt scary
You dont have to dive into command line
Learn by example through your favorite sites
Thank You
Questions?
http://goo.gl/l1ehqI
@likethemammal
likethemammal.com
Always looking for freelance work
dolphin@likethemammal.com