12 core technologies you should learn, love, and hate to be a 'real' technocrat

12 core technologies you should learn, love, and hate to be a 'real' technocrat

jon linowes
podcamp nh
nov 8, 2009

what?
why?
learn

knowledge
skill
love fu

appreciation
passion hate
ftw
confusion
pain
wtf

oscillating between confusion and success,
as one progresses along a learning curve
-1, 0, +1
where are you?

1. the command line
2. html (tags, dom)
3. css (styles, selectors, media type)
4. http (request, response, caching, sessions)
5. programming (objects, control, BDD)
6. javascript (& ajax)
7. MVC application frameworks
8. database (structure, sql)
9. hosting (server layers, clusters, caching)
10. media - images, video & mp3 (resolution, compression, etc)
11. business (users, customers, partners, investors, staff)
12. (TBD)

TIME CHALLENGE

Time allotted: 45 minutes

Presentation: 35 minutes

Discussion: 10 minutes

75 slides = 28 seconds per slide...

Command Line, Why?

because it feels good to “let your fingers do the walking”
while you're working “under the hood”

it can be...
faster (typing vs clicking)
more direct (names vs picture)
more flexible (plethora of options)
you're already there (fingers already on the kb)
more natural (login to remote machines)
the only way (e.g ping)

Example *nix commands:

ls -lSr - list files (sorted by size)
less some.file - list a text document, paginate
mkdir newfolder - create a new folder (directory)
mv my.file newname.file - move, rename a file
cp my.file dup.file - copy a file
scp my.file me@server.com:/stuff - copy a file across the 'net
du -sh /some/dir - show how much space dir is taking up
ps aux | grep blah - list all the running processes
but only show ones that contain 'blah'
mysqldump > mydb.sql - backup a database
mysql < mydb.sql - restore a database
wget -spider http://0at.org - fetch pages and behave like a web spider:
don't download, just check to see if there

html: structure
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Corporate Information - Company Overview</title>
</head>

<body>

<div id="container">

<h2>Company Overview</h2>

<p>
<strong>Our name</strong>
</p>

<p>Founders Larry Page and Sergey Brin named the search engine they built
"Google," a play on the word "googol" </p>

</div>

</body>

</html>

html: tags

Source: http://www.w3schools.com/tags/tag_DIV.asp

Firefox Firebug plugin

and Web Developer
plugin

Safari Web Inspector

DOM

html: DOM
● the Document Object Model (DOM) is an application programming interface
(API) for valid HTML and well-formed XML documents.

● the term "document" is used in the broad sense (increasingly, XML is being
used as a way of representing many different kinds of information)

● programmers can build documents, navigate their structure, and add, modify,
or delete elements and content.

Source: http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

“Cascading Style Sheets”

cascade |kasˈkād|
a process whereby something,
typically information or knowledge,
is successively passed on”
(Oxford)

The cascade:
● browser defaults
● CSS file(s)
● <style> tag in HTML
● style= attribute in a tag

Un-styled document, has content and structure

html + css = formatted content

“Themes” are standard styles applied to a standard document structure

(Themes may also extend the document structure using templates)

css:
selectors

Source:
http://www.w3.org/TR/css3-selectors/

4. HTTP

A Web browser is a software application for retrieving, presenting, and
traversing information resources on the World Wide Web.

An information resource is identif ed by a Uniform Resource Identif er
i i
(URI) and may be a web page, image, video, or other piece of content.

Hyperlinks present in resources enable users to easily navigate their
browsers to related resources.

Source: http://en.wikipedia.org/wiki/Web_browser

ping request
First, let's consider a “ping”:

[22:24][jonathan@jsl:~]$ ping google.com
PING google.com (74.125.45.100): 56 data bytes
64 bytes from 74.125.45.100: icmp_seq=0 ttl=50 time=759.847 ms

- ping looks up domain name in DNS, gets IP address
- ping sends “echo” request with a “payload” (data) to the IP address
- server listening, accepts the request, echo's back the data
- ping receives echo, verifies, and prints time it took for round-trip

Useful to verify server is alive, and measure response times (your ISP + Internet in
general + that specific server, combined).

p.s. satellite internet sucks esp during peak times

browser:
http request

Example: http://www.google.com

- browser looks up domain name in DNS, gets IP address
- browser sends HTTP GET request to the IP address
- server listening on port 80, accepts the request
- server prepares a response
- server sends response back to browser (status: 200 ok)
- browser receives response, parses the document
- browser may GET additional stuff (images, css, etc)
- browser builds the DOM, and paints the screen

http Status: response code

response eTag: for cache
Content-type: kind of data, for browser
Set-cookie: cookies, for server

Example HTTP response header:

Response Headers - http://www.reviewramp.com/

Date: Thu, 05 Nov 2009 05:04:53 GMT
Server: Mongrel 1.1.1
Status: 200
Etag: "baf1a682b9b690de2b1e5ff15be8193d"
X-Runtime: 8
Cache-Control: private, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
Content-Length: 9329
Connection: Keep-Alive
Keep-Alive: timeout=3
Set-Cookie: _reviewramp_session_id=BAh7BzoPc2Vzc2lvbl9pZCIlYWU...

200 OK

http
response codes

1xx Informational

2xx Success
200 OK

3xx Redirection
301 Moved Permanently
302 Found – this is the most popular redirect code
304 Not Modified – use the cache

4xx Client Error
403 Forbidden – the request was a legal request, but server is refusing to respond to it
404 Not Found

5xx Server Error
500 Internal Server Error

browser
cache
Conditional GETs

Conditional GETs based on date
HTTP header has Last-Updated. If you store this with a copy of the data, you can avoid re-
fetching it if it hasn't changed. When you next make a request, include this date in the header If-
Modified-Since. If the data has not changed, Gliffy will respond with an HTTP status of 304,
indicating you may safely use your cached copy.

Conditional GETs based on entity tag (eTag)
An alternate means is to use an "entity tag", which is essentially a hash of the data. Certain
resources will include an HTTP header for ETag. Save this value with the data. When you re-
request the data, include the header If-None-Match and use the value of the ETag you stored in
the cache. If the data to serve you has not changed, it will have the same ETag, and will return an
HTTP status of 304, indicating you may safely use your cached copy.

Source: http://www.gliffy.com/developer/apidocs/rest/

browser
The web is inherently “stateless”
Each request is self contained and must have all the info
needed to complete the transaction.
session A cookie is a 'chunk' of data stored in the browser which
is passed along to the server on each request.

A session cookie contains a unique identifier so the
server knows who the request came from (eg after you
logged in)

Source: http://www.jeevanchaaya.com/2008/10/14/web-application-state/

programming:
objects
– a self-contained thing with an interface (API) to create, modify,
control, destroy, etc.

– once defined (programmed), others can use it (other objects, other
programmers)

– has its own data

– as long as the API stays the same, the internal implementation can
change (“refactor”)

Class versus Instance

“car” - class of object

“my car” - an instance of “car”

programming: Ruby examples
def grant( wish )

non_eggroll = 0 if wish.length > 10 or wish.include? ' '
kitty_toys.each do |toy| raise ArgumentError, "Bad wish."
next if toy[:shape] == 'eggroll' end

non_eggroll = non_eggroll + 1 if @energy.zero?
end raise Exception, "No energy left."
end
@energy -= 1
Endertromb::make( wish )
def wipe_mutterings_from( sentence )
end
unless sentence.respond_to? :include?
raise ArgumentError,
"cannot wipe mutterings from a #{ sentence.class }"
end
while sentence.include? '('
open = sentence.index( '(' )
close = sentence.index( ')', open )
sentence[open..close] = '' if close
end
end

source: http://mislav.uniqpath.com/poignant-guide/book/chapter-1.html

programming: behavior-driven
Behavior specification:
File: page_spec.rb

describe Page, "name" do
it "should convert spaces and illegal chars to underscore" do
p = new_page( :name => "a b@c$d-e&f?g")
p.should be_valid
p.name.should == "a_b_c_d_e_f_g"
end
end

Class definition:
File: page.rb

class Page < ActiveRecord::Base
require "string"

def before_validation
self.name = name.urlize if name
end
end

Module:
File: string.rb

class String
def urlize
self.strip.downcase.gsub(/[^w.]+/, '_')
end
end

6. javascript

- client-side (browser) programming language

- used to be “bad”
(problems: cross browser, security, accessibility, usability)

- Google legitimized Javascript (gmail, earth etc). Libraries like jQuery
solve browser and usability issues.

- integrated into all browsers, has built-in DOM support

- use the <script> tag to embed into HTML

- used for making “smarter” web pages, visual effects,
better GUI, AJAX, client-side applications

Other client-side programming:
- VBscript
- ActiveX
- Flash

image: http://www.somethingdigital.co.za/services.php

Wednesday, November 4, 2009
javascript:
<div>
example <script type="text/javascript">todays_date()</script>
</div>

function todays_date() {

var now = new Date();

var days = new Array( 'Sunday' ,'Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday');

var months = new Array( 'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December');

var date = now.getDate();

var today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", "
+(fourdigits(now.getYear()));

document.write(today)
}

function fourdigits(number){
return (number < 1000) ? number + 1900 : number;
}

javascript:
jQuery example
Think of a FAQ page, where all answers are hidden first, and shown when the
question is clicked. The jQuery code for this:

$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
});
});

- wait 'till document is loaded into the browser
- select element with ID=”faq” (presumably a DIV)
- find all <dd> elements within that element (presumably the answer text), and hide them
- find all <dt> elements within '#faq' (presumably the question text), and when one is
clicked:
- find the next element (presumably the <dd> tag>
- and show it by sliding down to reveal
- (or if presently visible, hide it by sliding up to hide)

source: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

ajax

source: http://www.adaptivepath.com/images/publications/essays/ajax-fig1.png

7. MVC application frameworks

source: http://www.bhartisoftland.com/technologies-skill-sets/gifs/mvc-php.png

“Representable State Transfer” … whatever.
REST
REST describes an architecture paradigm for web applications
that request and manipulate web resources using the standard
HTTP methods GET, POST, PUT and DELETE.
ref: http://www.b-simple.de/download/restful_rails_en.pdf

source: http://topfunky.com/clients/peepcode/REST-cheatsheet.pdf

View:
templates
<h1>Public Directory</h1>

<% if @public_projects.empty? %>

<h3>No public projects found on this account</h3>

<% else %>

<div id="projects_list">

<%= render :partial => "project", :collection => @public_projects %>

</div>

<% end %>

Model: ORM
“object-relational mapping”
maps a database table to an object in the framework
e.g. Rails' ActiveRecord

source: http://www.adobe.com/newsletters/edge/october2008/articles/article2/index.html?trackingid=DWZST

Model:
associations

source: http://guides.rails.info/association_basics.html

SQL
Application => SQL
User.find 3090 SELECT * FROM ùsers` WHERE (ùsers`.ìd` = 3090) LIMIT 1
@account.projects.find_by_name “test” SELECT * FROM `projects` WHERE (`projects`.`name` = 'test')
AND ((`projects`.account_id = 800)
Account.create :name => “newco” INSERT INTO àccounts` (`name`, `created_at`, ùpdated_at`,
`deleted_at`, òwner_id`) VALUES('newco', '2009-11-04 08:21:30',
'2009-11-04 08:21:30', NULL, NULL)

database performance
Database management has a long, hard, cold history dating back decades, housed in
the faux floored realm of corporate IT departments and enterprise software co's like
Oracle and SAP.

And then there were “toy” databases on PC's for personal and small business.

The massive proliferation of websites, web servers, and web applications since the
1990's has pulled database technology into the hands of unwitting and often clueless
people like you and me. But we are learning.

Usually, small and simple is good enough. But sometimes you -really- need to scale.
Personally, I haven't, yet.

As a developer, do the basics to optimize database performance: index the tables,
perform benchmarks, watch the logs, tune the app, use the expert services at your
hosting company, perform regular maintenance, and, of course, backup.

As a user, stand in awe of the likes of Google, Facebook, CNN, and the iTunes store.

BUT, IT'S NOT JUST THE DATABASE, stupid...

Example: Engine Yard

Disclaimer: I am neither a customer nor employee of Engine Yard or
Heroku, but I've looked at them because they specialize in Rails hosting.
More important, I like their graphics.

source: http://www.engineyard.com/technology

10. media

source: http://kindacarsick.com/post/230881676#

resolution

Image Video Audio

resolution width (pixels) width (pixels) channels (mono/stereo)
height (pixels) height (pixels) bit rate (kbps)
depth (#colors, length (time)
or bits RBG) frames rate (fps)

compression jpg H.264 mp3
(for example)

Resolution defines the physical dimensions, attributes of the data.

Reducing the resolution means sampling the data.

Compression can be loss-ey, or loss-less which files are much larger.

Relationship between resolution and sampling

source: http://www.wavetrace.com/images/RatesAndResolution.gif

Pixellation is sampling (and/or averaging) and then re-enlarging
(generally not a good idea)

source: http://www.stereophile.com/features/308mp3cd/

Sampling at too low a resolution can loose significant features

http://www.umt.edu/geosciences/faculty/sheriff/438-Gravity_Electromagnetics/images/Anomaly%20sampling.gif

Compression also introduces noise

CD tones: After MP3 compression:

11. business business == people

ok, so it's not really a technology,
but it is the context

I LOVE MY USERS

I HATE MY USERS

I LOVE MY CUSTOMERS

I HATE MY CUSTOMERS

I LOVE MY PARTNERS

I HATE MY PARTNERS

I LOVE MY STAFF

I HATE MY STAFF

12. [TBD]
What's your love, appreciation, passion?

What's your hate, confusion, pain?

What do you want to learn, know, be skilled?

Where are you between WTF and FTW?

Jon Linowes

linojon@gmail.com
twitter @linojon

my main project:
http://reviewramp.com
“Submit... Review... Decide!”

technical blog: http://vaporbase.com
personal blog: http://jon.linow.es

12 core technologies you should learn, love, and hate to be a 'real' technocrat

Related slideshows

More Related Content

12 core technologies you should learn, love, and hate to be a 'real' technocrat