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




                                      ...
what?
why?
                   learn

                   knowledge
                   skill
    love           fu

    appr...
oscillating between confusion and success,
 as one progresses along a learning curve
                  -1, 0, +1
         ...
1. the command line
2. html (tags, dom)
3. css (styles, selectors, media type)
4. http (request, response, caching, sessio...
TIME CHALLENGE


    Time allotted: 45 minutes

    Presentation: 35 minutes

     Discussion: 10 minutes

75 slides = 28 ...
1. the command line
Command Line, Why?

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

it c...
Example *nix commands:

ls -lSr                            - list files (sorted by size)
less some.file                   ...
2. html
html: structure
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd...
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-fo...
3. css
“Cascading Style Sheets”



cascade |kasˈkād|
    a process whereby something,
    typically information or knowledge,
   ...
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 usin...
css:
   selectors




Source:
http://www.w3.org/TR/css3-selectors/
css:
media types
4. HTTP

        A Web browser is a software application for retrieving, presenting, and
        traversing information re...
ping request
 First, let's consider a “ping”:

    [22:24][jonathan@jsl:~]$ ping google.com
    PING google.com (74.125.45...
browser:
http request


  Example: http://www.google.com

  - browser looks up domain name in DNS, gets IP address
  - bro...
http                                       Status: response code

response                                   eTag: for cac...
http
response codes

1xx Informational

2xx Success
200 OK

3xx Redirection
301 Moved Permanently
302 Found – this is the ...
browser
cache
         Conditional GETs

         Conditional GETs based on date
         HTTP header has Last-Updated. If...
browser
                              The web is inherently “stateless”
                              Each request is self...
5. programming
programming:
objects
  – a self-contained thing with an interface (API) to create, modify,
  control, destroy, etc.

  – o...
programming:
control flow
programming: Ruby examples
                                                        def grant( wish )

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

      describe Page, "name" do
        it ...
6. javascript

- client-side (browser) programming language

- used to be “bad”
     (problems: cross browser, security, a...
Wednesday, November 4, 2009
    javascript:
                                 <div>
    example                        <scr...
javascript:
 jQuery example
Think of a FAQ page, where all answers are hidden first, and shown when the
question is clicke...
ajax
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 ap...
View:
templates
   <h1>Public Directory</h1>

   <% if @public_projects.empty? %>

     <h3>No public projects found on th...
Model: ORM
“object-relational mapping”
maps a database table to an object in the framework
e.g. Rails' ActiveRecord




so...
Model:
 associations




source: http://guides.rails.info/association_basics.html
8. database
SQL
Application                         =>   SQL
User.find 3090                           SELECT * FROM `users` WHERE (`us...
database performance
Database management has a long, hard, cold history dating back decades, housed in
the faux floored re...
9. hosting
Example: Engine Yard




            Disclaimer: I am neither a customer nor employee of Engine Yard or
            Heroku...
10. media




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

                Image                     Video                   Audio


resolution      width    (pixels)   ...
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.ster...
Sampling at too low a resolution can loose significant features




http://www.umt.edu/geosciences/faculty/sheriff/438-Gra...
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,...
Jon Linowes

        linojon@gmail.com
           twitter @linojon

         my main project:
      http://reviewramp.com
...
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
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
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
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
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
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
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
Upcoming SlideShare
Loading in …5
×

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

1,361 views
1,288 views

Published on

Presentation at PodCamp New Hampshire 2009

A "dim sum" (light sampling) of core technologies which everyone who considers themselves a "technocrat" should have some understanding and appreciation. Since there's a lot to cover, each topic will move pretty quickly, keeping the descriptions at a conceptual level.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,361
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. 12 core technologies you should learn, love, and hate to be a 'real' technocrat jon linowes podcamp nh nov 8, 2009
  2. 2. what? why? learn knowledge skill love fu appreciation passion hate ftw confusion pain wtf
  3. 3. oscillating between confusion and success, as one progresses along a learning curve -1, 0, +1 where are you?
  4. 4. 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)
  5. 5. TIME CHALLENGE Time allotted: 45 minutes Presentation: 35 minutes Discussion: 10 minutes 75 slides = 28 seconds per slide...
  6. 6. 1. the command line
  7. 7. 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)
  8. 8. 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
  9. 9. 2. html
  10. 10. 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>
  11. 11. html: tags Source: http://www.w3schools.com/tags/tag_DIV.asp
  12. 12. Firefox Firebug plugin and Web Developer plugin
  13. 13. Safari Web Inspector DOM
  14. 14. 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
  15. 15. 3. css
  16. 16. “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
  17. 17. Un-styled document, has content and structure
  18. 18. html + css = formatted content
  19. 19. “Themes” are standard styles applied to a standard document structure (Themes may also extend the document structure using templates)
  20. 20. css: selectors Source: http://www.w3.org/TR/css3-selectors/
  21. 21. css: media types
  22. 22. 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
  23. 23. 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 64 bytes from 74.125.45.100: icmp_seq=1 ttl=50 time=800.581 ms 64 bytes from 74.125.45.100: icmp_seq=2 ttl=50 time=729.355 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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/
  28. 28. 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/
  29. 29. 5. programming
  30. 30. 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”
  31. 31. programming: control flow
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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; }
  36. 36. 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
  37. 37. ajax
  38. 38. ajax source: http://www.adaptivepath.com/images/publications/essays/ajax-fig1.png
  39. 39. 7. MVC application frameworks source: http://www.bhartisoftland.com/technologies-skill-sets/gifs/mvc-php.png
  40. 40. “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
  41. 41. 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 %>
  42. 42. 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
  43. 43. Model: associations source: http://guides.rails.info/association_basics.html
  44. 44. 8. database
  45. 45. SQL Application => SQL User.find 3090 SELECT * FROM `users` WHERE (`users`.`id` = 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 `accounts` (`name`, `created_at`, `updated_at`, `deleted_at`, `owner_id`) VALUES('newco', '2009-11-04 08:21:30', '2009-11-04 08:21:30', NULL, NULL)
  46. 46. 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...
  47. 47. 9. hosting
  48. 48. 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
  49. 49. 10. media source: http://kindacarsick.com/post/230881676#
  50. 50. 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.
  51. 51. Relationship between resolution and sampling source: http://www.wavetrace.com/images/RatesAndResolution.gif
  52. 52. Pixellation is sampling (and/or averaging) and then re-enlarging (generally not a good idea) source: http://www.stereophile.com/features/308mp3cd/
  53. 53. Sampling at too low a resolution can loose significant features http://www.umt.edu/geosciences/faculty/sheriff/438-Gravity_Electromagnetics/images/Anomaly%20sampling.gif
  54. 54. Compression also introduces noise CD tones: After MP3 compression:
  55. 55. 11. business business == people ok, so it's not really a technology, but it is the context
  56. 56. I LOVE MY USERS I HATE MY USERS
  57. 57. I LOVE MY CUSTOMERS I HATE MY CUSTOMERS
  58. 58. I LOVE MY PARTNERS I HATE MY PARTNERS
  59. 59. I LOVE MY STAFF I HATE MY STAFF
  60. 60. 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?
  61. 61. 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

×