Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Schoolhouse Rock: How a Simple Website Becomes a Magical API

Schoolhouse Rock: How a Simple Website Becomes a Magical API

Presentation given at Penn State Web Conference, June 2014

Jason Rhodes

June 09, 2014
Tweet

More Decks by Jason Rhodes

Other Decks in Technology

Transcript

  1. school
    rock
    house
    !
    How a Simple Website
    Becomes a Magical API

    View full-size slide

  2. BUZZWORD BINGO!
    Structured Content
    WYSIWYG
    REST API
    JSON

    View full-size slide

  3. Data
    Architecture
    Views

    View full-size slide

  4. Darchaviiettewcatures

    View full-size slide

  5. HTML CSS
    DATA

    View full-size slide

  6. WHAT YOU SEE
    IS WHAT YOU GET

    View full-size slide

  7. WHAT YOU SEE
    IS WHAT YOU GET

    View full-size slide

  8. WHAT I SAW
    WASN’T WHAT I GOT

    View full-size slide

  9. BIG AREA 

    OF MOST
    IMPORTANT
    CONTENT
    !
    (BAMIC)

    View full-size slide

  10. The Sweet Smell
    of Success
    THE frenetic and often sordid machinations of a power-mad Broadway columnist, the unprincipled press agent who is his hatchet man and the avid coterie
    that surrounds them are savagely dissected in "Sweet Smell of Success," which came to Loew's State yesterday.
    !
    It is not a towering, universal theme the producers have developed in their indictment of this small, special segment of society operating in a tiny domain
    known intimately only to the cognoscenti. But pulsating dialogue, brisk direction, good performances and photography that captures the sights and sounds
    of Manhattan's Bistro Belt make the meanness of this singular "success" story fascinating a good part of the way.
    !
    The adaptation by Clifford Odets and Ernest Lehman of the latter's fiction has caught the mannerisms and the language of the hustling guys and dolls in
    search of power, fame and a fast buck. But the basic motivation of J. J. Hunsecker, the columnist read by millions and sought after by the famous and
    infamous, remains unexplained. This is the film's major flaw.
    !
    What sort of love does the imperious Hunsecker have for his young sister? Is this exaggerated possessiveness psychological or something else? The only
    clue a viewer gets is Hunsecker's simple and uninformative admission to the thoroughly cowed lass, "You're all I've got in this whole wide world." And then
    he coldly sets in motion a plan to destroy the decent young jazz guitarist who wants to marry her.
    !
    Much clearer is the mental makeup of Sidney Falco, the publicist who has practically devoted body and soul to getting "items," muddy or otherwise, into
    Hunsecker's syndicated column. He is admittedly client-hungry and "fully up to the slimy tricks of the trade." Why? The "sweet smell of success" is a reality,
    he is convinced, and "Hunsecker is the golden ladder to where I want to get."
    !
    He squirms at his assignment—the planting of narcotics on the guileless guitarist, who is then nabbed by a detective also in thrall to the columnist—but
    coolly effects it because he cannot fight that drive toward success. That the diabolical schemers are upset is somewhat anticlimactic. The fact that justice is
    done and young love wins out eventually does not really solve the riddle that is Hunsecker.
    !
    Tony Curtis contributes a polished performance as the venal, double-talking, two-timing Falco, who is willing to go to extremes to do his gossip-dispensing
    Svengali's bidding. Nevertheless it is a disturbing portrait since he does not entirely emerge the black-hearted villain he is supposed to represent.
    !
    Burt Lancaster's delineation of Hunsecker is efficient but largely restrained. He is a seemingly bland, professorial type speaking in columnar clichés, who
    only explodes into violent emotion on rare occasions. It might be difficult for the uninitiate to understand why it is necessary to curry his favor but he gives
    the role its proper modicum of callousness.
    !
    Susan Harrison, a newcomer to films and a pert, appealing youngster, evokes sympathy as the columnist's distraught sister. Marty Milner is sincere and
    believable as her indomitable romantic vis-a-vis, and Barbara Nichols, as the voluptuous nightclub temptress Mr. Curtis uses in his schemes; Sam Levene, as
    an agent; Joe Frisco, as a comic, and Jeff Donnell, as Mr. Curtis' harried secretary add competent touches in their brief appearances.
    !
    Alexander Mackendrick, the British director, and James Wong Howe, his cinematographer, who shot a good part of their film hereabouts, have gotten a fair
    portion of our town's fast tempo, its night spots and its sleazy aspects into their production. A viewer cannot blame Hunsecker too much when he happily
    exclaims, "I love this dirty old town." It's harder, of course, to fall for the characters in "Sweet Smell of Success." They are mighty interesting but rarely
    lovable.

    View full-size slide

  11. CONTENT
    RUINS
    EVERYTHING

    View full-size slide

  12. CONTENT
    EDITORS
    RUIN
    EVERYTHING

    View full-size slide

  13. Which design?

    View full-size slide

  14. AND THEN WE TOLD THEM
    THERE WAS ONLY ONE DESIGN

    View full-size slide

  15. STRUCTURED
    CONTENT
    IS AWESOME.

    View full-size slide

  16. ‣ Article
    ‣ Blog Post
    ‣ Person
    ‣ Image
    Object

    View full-size slide

  17. Object
    Name Author Date
    ( properties )

    View full-size slide

  18. Object 1
    ( relationship )
    Object 2

    View full-size slide

  19. explicit/manual relationships
    Object 1 Object 2
    Title:
    Smith wins Nobel
    Prize in Physics
    !
    Title:
    New Safety Laws
    Announced
    !

    View full-size slide

  20. explicit/manual relationships
    Object 1
    Related:
    Object 2
    Object 2
    Title:
    Smith wins Nobel
    Prize in Physics
    !
    Title:
    New Safety Laws
    Announced
    !

    View full-size slide

  21. implicit/dynamic relationships
    Object 1
    Title:
    Lacrosse team
    beats UMD
    !
    Tags: lax
    Object 2
    Title:
    New lacrosse field
    approved for 2014
    !
    Tags: lax, infrastructure

    View full-size slide

  22. implicit/dynamic relationships
    Object 1
    Title:
    Lacrosse team
    beats UMD
    !
    Tags: lax
    Object 2
    Title:
    New lacrosse field
    approved for 2014
    !
    Tags: lax, infrastructure

    View full-size slide

  23. Objects have
    properties
    with other objects
    WHAT IS STRUCTURED CONTENT?
    and relationships

    View full-size slide

  24. Title
    Alternate Title
    Long Summary
    New Article

    View full-size slide

  25. Thumbnail Image
    Hero Image
    Body

    View full-size slide

  26. ### A subtitle
    !
    This is some text that I
    wish was in a “p” tag,
    but editors sometimes
    just use _new lines_.
    !
    **That’s annoying.**
    !
    > Markdown can solve
    that.
    > -A person

    View full-size slide

  27. ### A subtitle
    !
    This is some text that I
    wish was in a “p” tag,
    but editors sometimes
    just use _new lines_.
    !
    **That’s annoying.**
    !
    > Markdown can solve
    that.
    > -A person
    A subtitle
    !
    This is some text
    that I wish was in a
    “p” tag, but editors
    sometimes just use
    new lines.
    p>
    !
    That’s
    annoying!
    !
    Markdown
    can solve that.
    -A person

    View full-size slide

  28. The
    Franchises

    View full-size slide

  29. The
    Delivery System
    (API)

    View full-size slide

  30. News Order Form
    science
    news and politics
    university news
    health
    everything

    View full-size slide

  31. The
    Factory Store

    View full-size slide

  32. api.hub.jhu.edu/articles?per_page=5
    News Order Form

    View full-size slide

  33. Articles
    Images
    Videos
    Courses
    Campuses
    People
    Research papers
    Grants
    Buildings
    Events
    Donations
    Messages
    EVERYTHING IS OBJECT

    View full-size slide

  34. All articles that mention
    people who work
    in the Reed building

    View full-size slide

  35. All events happening
    tomorrow that take place
    on Homewood campus

    View full-size slide

  36. All courses on topics
    that are mentioned in
    grants that are
    currently funded by NIH

    View full-size slide

  37. SO MUCH POWERRRRR

    View full-size slide

  38. ?v=0&key=psuweb
    http://api.hub.jhu.edu

    View full-size slide

  39. api.hub.jhu.edu/

    View full-size slide

  40. api.hub.jhu.edu/articles

    View full-size slide

  41. api.hub.jhu.edu/articles/3571

    View full-size slide

  42. api.hub.jhu.edu/articles/3571

    View full-size slide

  43. api.hub.jhu.edu/articles/3571

    View full-size slide

  44. #1 Know your content.

    View full-size slide

  45. #1 Know your content.
    @kissane
    @karenmcgrane

    View full-size slide

  46. #2 Define objects.

    View full-size slide

  47. #3 Limit properties.

    View full-size slide

  48. #3 Limit EVERYTHING.

    View full-size slide

  49. YAGNI BIMNI
    vs

    View full-size slide

  50. #4 Create meaningful
    categories.

    View full-size slide

  51. #5 Expose an API…

    View full-size slide

  52. #5 USE YOUR API!!!

    View full-size slide

  53. Rate this talk!
    bit.ly/psudevtrack
    THANKS.
    Follow me/AMA
    twitter.com/rhodesjason
    Tomorrow @11am
    Let’s Use More JS

    View full-size slide