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

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

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

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" }}

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?

☁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)

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

How To Internet: The Magic Words

Technology

Transcript of How To Internet: The Magic Words

Guide-book = Magic Words From Past-new Directions for Future.

Magic Words CD

Gann, W.D. - Magic Words (1953)

Modern day magic on the Internet - Virus Bulletin · Modern day magic on the Internet (Social Engineering) Greg Day Principal Security Analyst, EMEA

Jennie Osborn, 'The Magic Words'

Internet of Things Magic Show

Level 1 Which of these words are connected with magic ...

General Words about the Internet

Proyecto de investigación: Club de Lectura Magic Words

Presentation without words - Internet Avenue 2013

Magic Words MUST be Coded. See why.

Magic of words

Magic words 0102

The Magic Of Thinking Big In The Internet Era

ARREARS - ONLY CASES...“Fast and speedy” are Magic Words. The Magic Words have nothing to do with you. “Statute of Limitations” equals Magic Words. The NCP must say them for

Magic Relationship Words

Magic “e” Activities - Playdough To Plato• Magic “e” board game (play in partners) – This game includes CVC words that can be transformed into new words when a “magic

2009 Quinín Freire 5 THE MAGIC OF RHYMING WORDS LEARNING.

Magic Words

Reading, The Magic Beyond Words