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

PHPHTMLPythonRubyJavascriptGoJava

Why 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