Web Dev Crash CourseZane Staggs - CodingHouse.co

1

Your instructorHusband, Father and DeveloperLiving the dream...

Coding House

MIS graduate U of Arizona

BetterDoctor

2

Coding House

Learn how to code 60 days of Intensive training

Physical activities and food provided

Full time immersion in coding environment

Hands on mentorship and career placement

Accessible to bart

First class in January

3

So you want to be a web/ mobile developer?

Coding languages: html/php/ruby/java/javascript/c

Design skills: user interface, photoshop, illustrator, optimizing graphics

Business skills: communication, group/team dynamics,

Everything else: optimization, seo, sem, marketing, a/b testing, unit testing, bugs, debugging, operating systems, browser bugs/quirks, devices, responsiveness, speed,

4

Why would you want to do this?

Career

Fame and Fortune

Fun, creative

Wild West days of the internet

Technology

Startups

5

It’s actually not that hard

Today we will do a high level overview so you are at least familiar with the concepts that a web developer must deal with on a daily basis.

It’s the bigger picture that matters when dealing with business people and engineers.

I’m here to show you the quick and dirty.

6

The web browserVery complicated client software.

Lots of differences between platforms (os) and rendering engines: gecko (firefox), webkit (safari/chrome)

Reads markup, css, and js to combine to a web page

IE is the underdog now, always a pain for web devs but getting better slowly

http://en.wikipedia.org/wiki/Comparison_of_web_browsers

7

How the web worksClient/Server (front vs back end), networking, ip addresses, routers, ports, tcp/ip = stateless protocol

Request/Response Life Cycle

DNS (translates readable requests to map to servers)

API’s (rest, xml, json, etc)

Databases (mysql, mssql, mongodb)

Markup languages (html, xml, xhtml) Doctypes

8

Client/Server Communications

Client requests data from a server, server responds

Cloud based/virtualization = many servers on one box sharing resources through software virtualization

9

DNS requestsBrowser requests to look up a website address, hits the closest DNS server says yes I know where that is it’s at this IP address.

Cacheing, propagation

Nameservers

10

APIsAPI = Application Programming Interface - good for decoupling your application. Data access.

JSON = Preferred format for describing and transferring data native js object, nested attributes and values

XML = brackets and tags, old school and heavier

REST = (REpresentational State Transfer) - url scheme for getting and updating/creating data based on http requests

HTTP Requests: GET, POST, UPDATE, DELETE

Error codes: 200, 404, 500, etc

11

DatabasesLike a big excel sheet, way to organize and retrieve data through columns and rows (schemas)

Runs on the server responds to requests for data using specified syntax like SQL, JSON

Example SQL: “select type from cars where color = blue”

Mysql, MSSQL = traditional relational database

MongoDB = schema-less, nosql database

12

Markup LanguagesHTML5 - modern html lots of new features, not even an official approved spec but vendors started implementing them anyway.

W3C/standards

Doctype tells the browser what spec to adhere to.

DOM = Document Object Model: tree of elements in memory, accessible from javascript and the browser

13

Example Dom Tree

14

Let’s create a websiteHTML

CSS

Javascript

General Programming Concepts

15

HTMLDescendant of xml so it relies on markup

<p>text inside</p>, a few are “self closing” like <img />

Nesting Hierarchy: html, head, body - DOM

Can have values inside the tag or as attributes like this: <p style=”....”>some value inside</p>

http://www.w3schools.com/html/html_quick.asp

16

HTML5

Latest spec

New html5 tags: article, section, header, footer, video, audio, local storage, input types, browser history, webrtc

http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547

http://www.html5rocks.com/en/

17

CSSStyle definitions for look and feel can be inline, in a separate file, or in the <head> of the document.

Describe color, size, font style and some interaction now blurring the lines a bit

Media queries = responsive

Paths can be relative or absolute

Floating, scrolling, and centering stuff.

Modern stuff, table layout, flexbox, not supported yet everywhere

18

Javascript (not java)

Most ubiquitous language, also can be inline, in the head, or in a separate file.

Similar to C syntax lots of brackets

Actually a lot of hidden features and very flexible

Scope is important concept, window object, event propagation

Console, debugging with developer tools or firebug

Polyfills for patching older browsers to give them support

19

General coding tipsGood editor with code completion and syntax highlighting (webstorm or rubymine recommended)

Close all tags first then fill it in.

Test at every change in all browsers if possible. Get a virtual box and free vm’s from ms: modern.ie

Get a simulator, download xcode and android simulator

Minimize the tags to only what you need.

Semantics: stick to what the tags are for

20

JqueryJavascript framework, used everywhere. Free and open source.

Simplifies common tasks with javascript and the DOM

$ = get this element or group of elements using a selector

Plugins

$.ready = when document (DOM) is completely loaded and ready to be used

21

Jquery Plugin Example

Add the jquery language to your code

Add carousel plugin js file

Wire up the necessary components and start the plugin

http://jquery.malsup.com/cycle2/

22

BootstrapCSS Framework from Twitter.

Include the CSS file and js file

Use the various components as needed.

Override styles as necessary

http://getbootstrap.com/

Available themes: wrapbootstrap.com (paid), bootswatch.com (free)

23

Modern front end web development

HAML and SASS, Compass, Less,

Static site generators: middleman, jekyll

Coffeescript (simpler syntax for javascript)

Grunt and Yeoman (build anddependency management)

Node JS (back end or server side javascript)

MVC frameworks: backbone js, angular js

http://updates.html5rocks.com/2013/11/The-Landscape-Of-Front-end-Development-Automation-Slides

24

Server sideServer sits and wait for requests. It responds with some data depending on the type of the request and what’s in it.

Port 80 is reserved for website traffic so anything coming on that port is routed to the webserver on the machine. Apache, Nginx

The server says oh this is a request for a rails page so let’s hand this off to rails let it do its thing then respond with the result.

Rails runs some logic based on the request variables, session values and checks the database if needed to look up more data

25

Basic Server AdminWindows vs Linux

Terminal basics: cp, rm, cd, whoami, pwd

Services need to be running and healthy like mail, bind (dns), os level stuff disk space etc

Security

Backups

http://community.linuxmint.com/tutorial/view/100

26

Version Control

Git/Github - distributed version control

SVN/CVS - older non distributed

Branching

Merging diffs

Pushing to master

https://www.atlassian.com/git/workflows

27

Ruby on RailsRuby = another programming language with very nice syntax almost natural sounding and less code to write

Rails = framework for developing web applications

Model = data & business logic

View = html, erb, haml

Controller = decides where to go, where to get data, and view

Gems = packages of ruby code for reuse, easy management system.

Active Record, Rake: DB Migrations

MVC = model (data), view (view), controller (routing)

Development process: Bundler

Write once, convention over configuration

28

29

RubyRuby is "an interpreted scripting language for quick and easy object-oriented programming" -- what does this mean?

interpreted scripting language:ability to make operating system calls directlypowerful string operations and regular expressionsimmediate feedback during development

quick and easy:variable declarations are unnecessaryvariables are not typedsyntax is simple and consistentmemory management is automaticobject oriented programming:

everything is an objectclasses, methods, inheritance, etc.singleton methods"mixin" functionality by moduleiterators and closures

http://www.rubyist.net/~slagell/ruby/index.html

30

MVC

31

Let’s build a Rails applicationrails --version

rails new blog

rails server

Controller: receive specific requests for the application

Model: encapsulates the data access and business logic

View: displays the collected information in a human readable format: ERB, Haml

Routes: mapping urls to controllers and actions

http://guides.rubyonrails.org/getting_started.html#creating-a-new-rails-project

32

Mobile web development

HTML5 vs Native vs Hybrid

PhoneGap

Appgyver - fast way to get an app on the phone and development

Objective C/xcode - Native Iphone

Android: Java

33

Key TakeawaysDon’t give up the more you see it the more it will sink in

Do free/cheap work until you get good

Pay attention to the minor details

User experience is paramount

Always do what it takes to meet goals while managing the tradeoffs and complete as fast as possible

Stay on top of new tech

34

Questions

Have any questions speak up!

35