Who is this guy

• Chris Langton
• Community <3 Speaker for meetups
• Python <3 Django, Pandas, Hadoop
• PHP <3 PHP7 ZF2 CI Doctrine
• Raspberry Pi <3 My fish can sms me!
• Blogger with publications in WDW, Pi Weekly, Openshift
• chrislangton84@gmail.com
• github.com/chrisdlangton
• www.nodewiz.biz
• @chrisdlangton

You have a clever idea

To turn that idea into (something)... consider;

• Is it viable?
• What are your capabilities?
• Is this idea Collaborative?
• Get it done
• Pay for all of this (somehow)  [Crowdfund]  [Investor] or [Partner]

Obstacles when Outsourcing development

• Good developers already have jobs and queues of freelance and hobby projects
• Good developers are expensive
• Developers will need to understand your project to be interested in it
• You'll spend a lot of time and money on something that might not work
• You won't know what your developers are up to

Alternatively

You can do it yourself

• Hardware is cheap (your home computer can be a server)
• Documentation and resources are abundant
• Open Source can provide tools, resources, and community.
• You know best what you're after
• You'll have fun

You Don't Have To Be A Genius

• It doesn't have to be beautiful
• It can be slow
• It can be buggy
• Gain interest with proof of concept
• All you need is a prototype

Software Engineers Vs Hackers

• Software engineers practice computer science
  They can tell you the most efficient ways to sort a deck of playing cards
• Hackers make things, the science is less important
  Do'ers do things, and hackers achive goals by best means available.
• But, Software engineers make things too.
• Optimal implementation isnt always the desired outcome.
• Both perspectives are good, and anyone can wear either or both hats.

The Minimum Viable Product

• A proof of concept
• Something to show off to investors
• ... and developers
• ... and designers
• ... and lawyers
• ... and everyone else who'll help make it great

The Minimum Viable Product

Building it yourself will give a deep understanding of your product.

You'll be able to understand and manage what your developers are doing and why.

And they (we) will love you for it.

Software literacy is the new literacy

Code Year

2012 was http://www.codeyear.com/

• Free course in programming
• For non-programmers
• Resources au-go-go
• General Assembly also offers short classes to help you level up in specific areas
• The Programming Fundamentals course will help you get to grips with the practice of programming

Don't be Shy

• You can and should ask questions
• The only dumb questions are ones you dont ask

The Big Picture

How the Web Works

• The Web uses a client-server model
• What we see in the browser is the front-end
• This is the stuff the browser understands
• HTML, CSS, Javascript
• The browser is the client

The Big Picture

How the Web Works

• What you don't see is the back-end
• Processes and databases on computers far away
• This is the server
• The "Internet" doesn't do much — it just passes data from the server to the client

What makes up a website

HTML: Structure

+ CSS: Presentation

+ Javascript: Animation and Reaction

+ Content: Texts

= A Website

What's involved

Choosing Your Tools

• There are hundreds of programming languages
• C, ASP, BASIC, PHP, Perl, Python, JavaScript, Ruby, C++, Java, xCode to name a few.
• Different dialects for telling computers how to do things
• They all have different strengths and weaknesses
• You'll need to learn atleast one of these in the case of JavaScript, or usually more!
• ... but wait, there's more

Structure

For things to happen data and interfaces need structure

• HTML and CSS is the structure for the presentation of web pages.
• Plain old XML is alternative for web page presentation structure
  XML is also a popular choice for data storage and communication medium.
• Yaml, JSON, EDI, Plaintext, CSV, arrays, are also common.
• SQL is a query language to access data from a Databased
• You will need familiarity of most of these for many applications

Goals for Today

• Make friends and ask lots and lots of questions
• Learn HTML
• Learn how to style a website using CSS
• No Javascript
• Understand the Twitter Bootstrap framework
• Use the Bootstrap framework to turn ordinary HTML into beautiful, standardised, mobile-ready HTML
• Upload and deploy your practice website
• Bonus: Find and use Bootstrap themes

Non-technical: Content

• Just ordinary words like this.
  You can read this, and so can your website visitors

Interactivity: JavaScript

• Programming language that adds interactions to your website such as Animations
• confirm('do you want to shutdown?')
• $('body').show();
• $('body').fadeOut();

Design: CSS

• Cascading Style Sheets
  Rules about how a website will look.
• .red{color: red}
• .logo{padding-top: 10px}
• footer{width: 100%}

Structure: HTML

Describes the webpage to the browser.

paragraph

Bold text

For next time: Node.js

Node is an insanely popular JavaScript based back-end

• One language for both front-end and back-end
• Millions of NPM modules you can freely reuse
• Includes its own webserver, no need to learn that!
• Best utilises hardware than any other language 
• Easy to get started
• Node is similar in design to and influenced by systems like Ruby's Event Machine or Python's Twisted.

Success Stories

These sites were built with Node.js:

• eBay
• LinkedIn
• PayPal
• Rdio
• Trello
• Wikia
• Yahoo!

What Will Go Wrong?

Everything

If debugging is the practice of removing bugs from software... then programming must be the practice of adding them.

You will have to make mistakes to learn how to fix them

Fixing Things

• You may not understand the error message
  
• Most problems will have been encountered previously
• So a quick Google search should get you back on track
• If not: congratulations! You found a harder problem
• Debug / Get help!

Additional Resources

• stackoverflow.com
• www.w3.org
• MDN: developer.mozilla.org (not just firefox)

Don't be a help vampire

• People are generally very happy to share their knowledge...
• IF you've made a fair attempt to help yourself first
• Read How To Ask Questions The Smart Way
• Read Help Vampires: A Spotter's Guide
• General Rules: Google first, ask questions later. Be polite. Keep trying!

Heroku

• http://www.heroku.com/
• Free, instant hosting
• Scales as needed
• Only pay if your app takes off
• BONUS: Built on Node.js
• Other options: AWS, Redhat Openshift, Nodejitsu.

Happy hacking!