How To Internet: The Magic Words
-
Upload
david-newbury -
Category
Technology
-
view
269 -
download
1
Transcript of 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?
2 How to Internet / David Newbury / @workergnome
Why should you not listen to me?• I have opinions.
• I may be wrong.
• I will leave stuff out.
• I may lie.
3 How to Internet / David Newbury / @workergnome
Tools.4 How to Internet / David Newbury / @workergnome
Text Editors• Sublime Text• Atom • Not Textmate• Not Notepad
5 How to Internet / David Newbury / @workergnome
Version Control• Git• Github• Bitbucket
6 How to Internet / David Newbury / @workergnome
Browser Development Tools
7 How to Internet / David Newbury / @workergnome
Stack Overflow.
9 How to Internet / David Newbury / @workergnome
Are you full-stack?
10 How to Internet / David Newbury / @workergnome
The stack keeps expanding.1996
• HTML
11 How to Internet / David Newbury / @workergnome
The stack keeps expanding.2000
• Design• Front-end• Back-end
12 How to Internet / David Newbury / @workergnome
The stack keeps expanding.2010
• UX• UI• Content Strategy• DevOps• Database Admin• APIs13 How to Internet / David Newbury / @workergnome
The stack keeps expanding.2016
• Microservices• Mobile Strategy• Responsive Design• Growth Hacking• Frozen Yogurt
14 How to Internet / David Newbury / @workergnome
Concepts you will hear about• Agile• Extreme Programming
15 How to Internet / David Newbury / @workergnome
Other Useful Tools• Postman• JSFiddle• CodePen• Gist• Github• Google
16 How to Internet / David Newbury / @workergnome
Clients,Servers,Networks.17 How to Internet / David Newbury / @workergnome
NETWORKS
18 How to Internet / David Newbury / @workergnome
Protocols
• TCP/IP• UDP• Websockets
• HTTP• HTTPS
!
19 How to Internet / David Newbury / @workergnome
http://www.workergnome.com/banana.htmlThis is a web address.
20 How to Internet / David Newbury / @workergnome
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.
21 How to Internet / David Newbury / @workergnome
http://www.workergnome.com/banana.htmlThe DomainThis is the part that tells the network which computer we'd like to talk to.
22 How to Internet / David Newbury / @workergnome
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.
23 How to Internet / David Newbury / @workergnome
http://www.workergnome.com/banana.htmlThe DomainThe next-to-last part is the network. This is what you own, or what you buy.
24 How to Internet / David Newbury / @workergnome
http://www.workergnome.com/banana.htmlThe DomainThe last (or first) part is the computer on the network.
25 How to Internet / David Newbury / @workergnome
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".
27 How to Internet / David Newbury / @workergnome
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.)
28 How to Internet / David Newbury / @workergnome
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.
29 How to Internet / David Newbury / @workergnome
http://www.workergnome.com/banana.html The PathThis is the specific page that we'd like on that server.
30 How to Internet / David Newbury / @workergnome
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.
31 How to Internet / David Newbury / @workergnome
http://www.workergnome.com/banana.html#bottom_half
The Anchor (or Hash)This is the specific section of the page.
32 How to Internet / David Newbury / @workergnome
HTTP Request Types• GET• POST• PUT• DELETE
33 How to Internet / David Newbury / @workergnome
REST - CRUD• POST - CREATE• GET - READ• PUT - UPDATE• DELETE - DELETE
34 How to Internet / David Newbury / @workergnome
HTTP Codes• 100s: Informational.• 200s: Success• 300s: Redirection• 400s: Client Error• 500s: Server Error
35 How to Internet / David Newbury / @workergnome
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.
37 How to Internet / David Newbury / @workergnome
Cookies.
!
38 How to Internet / David Newbury / @workergnome
CLIENTS39 How to Internet / David Newbury / @workergnome
Web Browsers• Internet Explorer• Chrome • Firefox• Safari
40 How to Internet / David Newbury / @workergnome
CLIENT SIDE TECHNOLOGYHTML, CSS, JAVASCRIPT
41 How to Internet / David Newbury / @workergnome
HTML
<h1 class="example_header"> Example</h1> <p> This is html. <span class='exciting_text'> Exciting, isn't it? </span> </p>
42 How to Internet / David Newbury / @workergnome
CSS
h1 { font-size: 200%; color: #ff0000;}.exciting_text { text-decoration: underline; }
43 How to Internet / David Newbury / @workergnome
JAVASCRIPT
var timeout;function beAnnoying() { timeout = window.setTimeout(annoyMe,3000);}function annoyMe() { alert("HONK!"); beAnnoying();}beAnnoying();
44 How to Internet / David Newbury / @workergnome
Important Javascript libraries
jQuery
Makes working with the DOM easy.Makes working with AJAX easy.Hides browser inconsistencies.
45 How to Internet / David Newbury / @workergnome
Important Javascript libraries
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.
46 How to Internet / David Newbury / @workergnome
Important Javascript libraries
Modernizr
A polyfill/feature detection library
47 How to Internet / David Newbury / @workergnome
JSON{ "name" : "David Newbury", "height_in_inches": 76, "occupation": ["nerd","artist","teacher"], "favorites": { "food": "pecan pie", "drink": "coffee", "movie": "The little Mermaid" }}
48 How to Internet / David Newbury / @workergnome
AJAX
49 How to Internet / David Newbury / @workergnome
Websockets
50 How to Internet / David Newbury / @workergnome
SERVERS1. Serve Content2. Store Information3. Make Decisions
51 How to Internet / David Newbury / @workergnome
The Backend Stack• Operating System• Web Server• Database• Programming Language
52 How to Internet / David Newbury / @workergnome
For Example: The LAMP Stack• Operating System - Linux• Web Server - Apache• Database - Mysql• Programming Language - PHP
53 How to Internet / David Newbury / @workergnome
1. The Operating System
Use a UNIX.(OS X is UNIX. Linux is Unix. Windows is NOT Unix.)
54 How to Internet / David Newbury / @workergnome
Local Servers.(You're gonna need one.)
55 How to Internet / David Newbury / @workergnome
The Command Line.(You're gonna need to use it.)
56 How to Internet / David Newbury / @workergnome
Cheating.(cheating is encouraged.)
• Wordpress• Squarespace• Tumblr
57 How to Internet / David Newbury / @workergnome
2. The Web ServerWhere and how are you going to run your code?
58 How to Internet / David Newbury / @workergnome
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
60 How to Internet / David Newbury / @workergnome
Google FirebaseHalfway between a static site and a dynamic site,often used for prototyping.
61 How to Internet / David Newbury / @workergnome
AWS(Amazon Web Services)
• S3• Elastic Compute• Many others
62 How to Internet / David Newbury / @workergnome
PaaS(Platform as as Service.)
• Heroku
63 How to Internet / David Newbury / @workergnome
VPS(Virtual Private Servers)
• Digital Ocean
64 How to Internet / David Newbury / @workergnome
Running it yourself.• Don't do this.
65 How to Internet / David Newbury / @workergnome
Apache.
66 How to Internet / David Newbury / @workergnome
3. Storing InformationWhere do you store information on the server?
67 How to Internet / David Newbury / @workergnome
YAGNI.(a brief digression)
68 How to Internet / David Newbury / @workergnome
YAGNI.(a brief digression)
You Ain't Gonna Need It.
69 How to Internet / David Newbury / @workergnome
Relational Databases (SQL)This is the classic way to store information.
• Sqlite• Postgresql• Mysql/MariaDB
70 How to Internet / David Newbury / @workergnome
Key/Value StoresThe Simple, Fast Option.
• Redis• Mongo• Memcached ( not really, though sort of.)• Many others
71 How to Internet / David Newbury / @workergnome
Search EnginesWhen you need something, but you're not sure what.
• Elasticsearch• Solr• Lucene
72 How to Internet / David Newbury / @workergnome
Cloud DatastoresSomewhere, over the rainbow...
• AWS one• Google one
73 How to Internet / David Newbury / @workergnome
Esoteric DatabasesThere are uses for these, but they're likely not for you.
• Neo4J• Hadoop• Cassandra• Many, Many more
74 How to Internet / David Newbury / @workergnome
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.
75 How to Internet / David Newbury / @workergnome
4. Backend LanguagesThis is the part where you write code.
• PHP• Ruby• Python• Javascript
76 How to Internet / David Newbury / @workergnome
Things you should know about(if you're interested in getting a job)
• Java• .NET
77 How to Internet / David Newbury / @workergnome
Things you may hear about(but no longer need to worry about)
• Perl• Lisp
78 How to Internet / David Newbury / @workergnome
Things you may hear about(but don't need to worry about yet)
• Clojure• Haskell• Elixir• Erlang• Go
79 How to Internet / David Newbury / @workergnome
How to Choose?• What do you know?• What are you trying to do?• Libraries & Frameworks
80 How to Internet / David Newbury / @workergnome
RubyPros
• Friendly community• Very website focused• Good at strings and languages
81 How to Internet / David Newbury / @workergnome
RubyCons
• Not as fast• Poor at evented models
82 How to Internet / David Newbury / @workergnome
RubyMain Frameworks
• Ruby on Rails - Major Framework• Sinatra - Microframework• Middleman//Jekyll - Static Site Generators
83 How to Internet / David Newbury / @workergnome
RubyImportant Things to Know
• Gem - Package Manager• Bundler - Dependency Management• RVM / rbenv - Version Management
84 How to Internet / David Newbury / @workergnome
PythonPros
• Academic community• Very math/science focused• Good at math, images, and hardware
85 How to Internet / David Newbury / @workergnome
PythonCons
• Python 2 / Python 3 compatibility issues• Significant Whitespace. (really?)
86 How to Internet / David Newbury / @workergnome
PythonMain Frameworks
• Django - Major Framework• Flask/Bottle - Microframeworks• Pelican - Static Site Generator
87 How to Internet / David Newbury / @workergnome
PythonImportant Things to Know
• PyPI / pip - Package Managment• setup.py / requirements.txt - Dependency Management• Virtualenv - Version Management
88 How to Internet / David Newbury / @workergnome
PHPPros
• Runs everywhere• Incredibly simple• Very Flexible
89 How to Internet / David Newbury / @workergnome
PHPCons
• Built by aggregation• Lots of magic• Inconsistent
90 How to Internet / David Newbury / @workergnome
PHPMain Frameworks
• Wordpress• Drupal• Symfony/Silex• Laravel/Lumen
91 How to Internet / David Newbury / @workergnome
PHPImportant Things to Know
• Composer / Packagist - Dependency Management
92 How to Internet / David Newbury / @workergnome
Javascript (Node)Pros
• Frontend / Backend compatible• Currently the most hipster• Very good at asynchronous behaviour
93 How to Internet / David Newbury / @workergnome
Javascript (Node)Cons
• Incredibly fragmented environment• Asynchronous behaviour
94 How to Internet / David Newbury / @workergnome
Javascript (Node)Main Frameworks
• Express - Microframework• Meteor? - Major Framework• Ember/Angular/React - Isomorphic Frameworks?
95 How to Internet / David Newbury / @workergnome
Javascript (Node)Important Things to Know
• NPM - Dependency Manager
96 How to Internet / David Newbury / @workergnome
The Fundamental tradeoff of web programming:
Balancing the amount of developer work with the complexity of the project.
97 How to Internet / David Newbury / @workergnome
HTML-only sitesThese are still perfectly acceptable in 2016.
• Github Pages• AWS S3 Static Sites
98 How to Internet / David Newbury / @workergnome
Markdown## This is a header
This is a paragaph of text. It can have multiple lines.
* List item 1* List Item 2
99 How to Internet / David Newbury / @workergnome
Markdown as Content• Stack Overflow• Github• Jekyll for Github Pages
100 How to Internet / David Newbury / @workergnome
CSS Frameworks• Bootstrap• Foundation
101 How to Internet / David Newbury / @workergnome
CSS Pre-processors• Sass• Less• Stylus
102 How to Internet / David Newbury / @workergnome
h1 { color: #990000;}h1 .header { color: #ff0000;}
VS.$HEADER_COLOR: #990000h1 color: $HEADER_COLOR .header color: lighten($HEADER_COLOR,30)
103 How to Internet / David Newbury / @workergnome
HTML Pre-processors• Haml• Jade• ERB• Jinja2• Many, many more
104 How to Internet / David Newbury / @workergnome
Javascript Pre-processors• Coffeescript• LiveScript• TypeScript• Clojurescript• EMCASCRIPT 6
105 How to Internet / David Newbury / @workergnome
Task Runners• Make• Grunt• Gulp• Browserify• Webpack
106 How to Internet / David Newbury / @workergnome
Server JS vs Browser JS• AMD• CommonJS• UMD• ES6 • Browserify
107 How to Internet / David Newbury / @workergnome
Dynamic SitesThis is the 'Standard Website'. Forms, logins, a server running code in the background.
108 How to Internet / David Newbury / @workergnome
Static SitesThis is a compromise between the power of dynamic websitesand the simplicity of HTML only websites.
109 How to Internet / David Newbury / @workergnome
WebappsThese are applications running on the web. Think GMail.
110 How to Internet / David Newbury / @workergnome
Webapp Frameworks• React• Ember• Angular• Meteor
111 How to Internet / David Newbury / @workergnome
Art on the Web• WebGL• Canvas• HTML
112 How to Internet / David Newbury / @workergnome
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
113 How to Internet / David Newbury / @workergnome
Are you exhausted yet?I am.
114 How to Internet / David Newbury / @workergnome
if you want a blog:• Wordpress.org
115 How to Internet / David Newbury / @workergnome
If you want to build a simple site:• Bootstrap• jQuery• Markdown• Github Pages
116 How to Internet / David Newbury / @workergnome
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
118 How to Internet / David Newbury / @workergnome
If you want to build a custom dynamic site:• Bootstrap + SASS• jQuery • ERB• Redis• Sinatra• Heroku
119 How to Internet / David Newbury / @workergnome
If you want to build a webapp:• Ember or React, depending on your scale
120 How to Internet / David Newbury / @workergnome
Questions?How to Internet: The Magic WordsUniversity of Denver, Emergent Digital PracticeFebruary 17, 2016
David Newbury@workergnome
121 How to Internet / David Newbury / @workergnome