How To Internet: The Magic Words

How To InternetKnowing The Magic Words

University of Denver, Emergent Digital PracticeFebruary 17, 2016

1 How to Internet / David Newbury / @workergnome

Why should you listen to me?


Why should you not listen to me?• I have opinions.

• I may be wrong.

• I will leave stuff out.

• I may lie.


Tools.4 How to Internet / David Newbury / @workergnome

Text Editors• Sublime Text• Atom • Not Textmate• Not Notepad


Version Control• Git• Github• Bitbucket


Browser Development Tools


http://caniuse.com


http://caniuse.com

Stack Overflow.


Are you full-stack?


The stack keeps expanding.1996

• HTML



• Design• Front-end• Back-end



• UX• UI• Content Strategy• DevOps• Database Admin• APIs13 How to Internet / David Newbury / @workergnome


• Microservices• Mobile Strategy• Responsive Design• Growth Hacking• Frozen Yogurt


Concepts you will hear about• Agile• Extreme Programming


Other Useful Tools• Postman• JSFiddle• CodePen• Gist• Github• Google


Clients,Servers,Networks.17 How to Internet / David Newbury / @workergnome

NETWORKS


Protocols

• TCP/IP• UDP• Websockets

• HTTP• HTTPS

!


http://www.workergnome.com/banana.htmlThis is a web address.


http://www.workergnome.com/banana.html The protocolThis is the part of the address that says what network protocol we'd like to use to communicate.


http://www.workergnome.com/banana.htmlThe DomainThis is the part that tells the network which computer we'd like to talk to.


http://www.workergnome.com/banana.htmlThe DomainThe first (or last) part is the Top Level Domain, and they are controlled by large companies or governments. You can't get one of these.


http://www.workergnome.com/banana.htmlThe DomainThe next-to-last part is the network. This is what you own, or what you buy.


http://www.workergnome.com/banana.htmlThe DomainThe last (or first) part is the computer on the network.


DNS,Nameservers,Registrars,Certificate Authorities26 How to Internet / David Newbury / @workergnome

http://localhost/banana.htmlhttp://10.0.0.1/banana.htmlThese are special addresses, and they mean "The computer I'm using".


http://www.workergnome.com:80/banana.html The portThis is the port on that computer that we'd like to talk to.

(by default, HTTP is on port 80.)


http://www.workergnome.com:80/banana.htmlHelpful Hint:

It's important to remember that only 1 program can listen to a given port at a time. Which means that if you have a Rails server running on 8000, and you try to start up another copy of it, it will tell you that it can't access the port, and will usually shut down or crash.


http://www.workergnome.com/banana.html The PathThis is the specific page that we'd like on that server.


http://www.workergnome.com/banana.html?robots=cool&fish=not%20cool

The ParametersThese are variables for the page sent from the client to the server.


http://www.workergnome.com/banana.html#bottom_half

The Anchor (or Hash)This is the specific section of the page.


HTTP Request Types• GET• POST• PUT• DELETE


REST - CRUD• POST - CREATE• GET - READ• PUT - UPDATE• DELETE - DELETE


HTTP Codes• 100s: Informational.• 200s: Success• 300s: Redirection• 400s: Client Error• 500s: Server Error


Common HTTP Codes• 301: Redirect.• 200: OK. - Means it worked.• 204 No Content - OK, but you're not gonna see anything• 400: Bad Request - I can't do that• 403: Forbidden - You can't do that• 404: Bad Request - I can't find that• 418: I'm a teapot36 How to Internet / David Newbury / @workergnome

Headers.


Cookies.

!


CLIENTS39 How to Internet / David Newbury / @workergnome

Web Browsers• Internet Explorer• Chrome • Firefox• Safari


CLIENT SIDE TECHNOLOGYHTML, CSS, JAVASCRIPT


HTML

<h1 class="example_header"> Example</h1> <p> This is html. <span class='exciting_text'> Exciting, isn't it? </span> </p>


CSS

h1 { font-size: 200%; color: #ff0000;}.exciting_text { text-decoration: underline; }


JAVASCRIPT

var timeout;function beAnnoying() { timeout = window.setTimeout(annoyMe,3000);}function annoyMe() { alert("HONK!"); beAnnoying();}beAnnoying();


Important Javascript libraries

jQuery

Makes working with the DOM easy.Makes working with AJAX easy.Hides browser inconsistencies.



Underscore/Lodash

A swiss army knife of useful functions. Written in a functional styleThey're conveniences, not requirements, but they're helpfulLodash is updated more regularly, but they're basically the same.



Modernizr

A polyfill/feature detection library


JSON{ "name" : "David Newbury", "height_in_inches": 76, "occupation": ["nerd","artist","teacher"], "favorites": { "food": "pecan pie", "drink": "coffee", "movie": "The little Mermaid" }}


AJAX


Websockets


SERVERS1. Serve Content2. Store Information3. Make Decisions


The Backend Stack• Operating System• Web Server• Database• Programming Language


For Example: The LAMP Stack• Operating System - Linux• Web Server - Apache• Database - Mysql• Programming Language - PHP


1. The Operating System

Use a UNIX.(OS X is UNIX. Linux is Unix. Windows is NOT Unix.)


Local Servers.(You're gonna need one.)


The Command Line.(You're gonna need to use it.)


Cheating.(cheating is encouraged.)

• Wordpress• Squarespace• Tumblr


2. The Web ServerWhere and how are you going to run your code?


2. The Web ServerWhere and how are you going to run your code?

☁59 How to Internet / David Newbury / @workergnome

Static Hosting• Github Pages• Netlify


Google FirebaseHalfway between a static site and a dynamic site,often used for prototyping.


AWS(Amazon Web Services)

• S3• Elastic Compute• Many others


PaaS(Platform as as Service.)

• Heroku


VPS(Virtual Private Servers)

• Digital Ocean


Running it yourself.• Don't do this.


Apache.


3. Storing InformationWhere do you store information on the server?


YAGNI.(a brief digression)


YAGNI.(a brief digression)

You Ain't Gonna Need It.


Relational Databases (SQL)This is the classic way to store information.

• Sqlite• Postgresql• Mysql/MariaDB


Key/Value StoresThe Simple, Fast Option.

• Redis• Mongo• Memcached ( not really, though sort of.)• Many others


Search EnginesWhen you need something, but you're not sure what.

• Elasticsearch• Solr• Lucene


Cloud DatastoresSomewhere, over the rainbow...

• AWS one• Google one


Esoteric DatabasesThere are uses for these, but they're likely not for you.

• Neo4J• Hadoop• Cassandra• Many, Many more


Running a DatabaseIt has to live somewhere, and it's likely to cost money.

• Remember to back it up.• Security matters.• Changing it can be hard.• Look for good libraries.


4. Backend LanguagesThis is the part where you write code.

• PHP• Ruby• Python• Javascript


Things you should know about(if you're interested in getting a job)

• Java• .NET


Things you may hear about(but no longer need to worry about)

• Perl• Lisp


Things you may hear about(but don't need to worry about yet)

• Clojure• Haskell• Elixir• Erlang• Go


How to Choose?• What do you know?• What are you trying to do?• Libraries & Frameworks


RubyPros

• Friendly community• Very website focused• Good at strings and languages


RubyCons

• Not as fast• Poor at evented models


RubyMain Frameworks

• Ruby on Rails - Major Framework• Sinatra - Microframework• Middleman//Jekyll - Static Site Generators


RubyImportant Things to Know

• Gem - Package Manager• Bundler - Dependency Management• RVM / rbenv - Version Management


PythonPros

• Academic community• Very math/science focused• Good at math, images, and hardware


PythonCons

• Python 2 / Python 3 compatibility issues• Significant Whitespace. (really?)


PythonMain Frameworks

• Django - Major Framework• Flask/Bottle - Microframeworks• Pelican - Static Site Generator


PythonImportant Things to Know

• PyPI / pip - Package Managment• setup.py / requirements.txt - Dependency Management• Virtualenv - Version Management


PHPPros

• Runs everywhere• Incredibly simple• Very Flexible


PHPCons

• Built by aggregation• Lots of magic• Inconsistent


PHPMain Frameworks

• Wordpress• Drupal• Symfony/Silex• Laravel/Lumen


PHPImportant Things to Know

• Composer / Packagist - Dependency Management


Javascript (Node)Pros

• Frontend / Backend compatible• Currently the most hipster• Very good at asynchronous behaviour


Javascript (Node)Cons

• Incredibly fragmented environment• Asynchronous behaviour


Javascript (Node)Main Frameworks

• Express - Microframework• Meteor? - Major Framework• Ember/Angular/React - Isomorphic Frameworks?


Javascript (Node)Important Things to Know

• NPM - Dependency Manager


The Fundamental tradeoff of web programming:

Balancing the amount of developer work with the complexity of the project.


HTML-only sitesThese are still perfectly acceptable in 2016.

• Github Pages• AWS S3 Static Sites


Markdown## This is a header

This is a paragaph of text. It can have multiple lines.

* List item 1* List Item 2


Markdown as Content• Stack Overflow• Github• Jekyll for Github Pages


CSS Frameworks• Bootstrap• Foundation


CSS Pre-processors• Sass• Less• Stylus


h1 { color: #990000;}h1 .header { color: #ff0000;}

VS.$HEADER_COLOR: #990000h1 color: $HEADER_COLOR .header color: lighten($HEADER_COLOR,30)


HTML Pre-processors• Haml• Jade• ERB• Jinja2• Many, many more


Javascript Pre-processors• Coffeescript• LiveScript• TypeScript• Clojurescript• EMCASCRIPT 6


Task Runners• Make• Grunt• Gulp• Browserify• Webpack


Server JS vs Browser JS• AMD• CommonJS• UMD• ES6 • Browserify


Dynamic SitesThis is the 'Standard Website'. Forms, logins, a server running code in the background.


Static SitesThis is a compromise between the power of dynamic websitesand the simplicity of HTML only websites.


WebappsThese are applications running on the web. Think GMail.


Webapp Frameworks• React• Ember• Angular• Meteor


Art on the Web• WebGL• Canvas• HTML


Art on the Web: Libraries• p5.js - Processing on the Web• d3.js - Data visualization • threeJS - 3D on the web• Highcharts - Graphing for the Web• Shadertoy - Just really cool


Are you exhausted yet?I am.


if you want a blog:• Wordpress.org


If you want to build a simple site:• Bootstrap• jQuery• Markdown• Github Pages


If you want to build a static site:• Bootstrap + SASS• jQuery• JSON• ERB• Markdown• Middleman• Netlify117 How to Internet / David Newbury / @workergnome

If you want to build a simple form-driven site:• Bootstrap + SASS• jQuery• ERB• Middleman• Firebase


If you want to build a custom dynamic site:• Bootstrap + SASS• jQuery • ERB• Redis• Sinatra• Heroku


If you want to build a webapp:• Ember or React, depending on your scale


Questions?How to Internet: The Magic WordsUniversity of Denver, Emergent Digital PracticeFebruary 17, 2016

David Newbury@workergnome


Technology

How To Internet: The Magic Words