Web Development World

Quick overview of the web and best practices to keep in mind. Talk given to CISC 3140 class at Brooklyn College (Fall 2019).

Transcript

1. Web Development World
   “Plumbing on the Internet”
   By Katherine Chuang
   

   View Slide

2. Common knowledge: The sky is blue
   

   View Slide

3. Actually: The sky is blue when it’s sunny
   

   View Slide

4. But rain, smog, lighting, perspective, etc.
   

   View Slide

5. Mario is a plumber who travels through the sewer
   tunnel system in a well known video game.
   

   View Slide

6. Man made world has rules and conventions
   

   View Slide

7. Internet: The Information Superhighway
   a telecommunications infrastructure or system (as of television, telephony, or
   computer networks) used for widespread and usually rapid access to information
   

   View Slide

8. The Information Superhighway https://youtu.be/SFJHHbue_Aw
   

   View Slide

9. Early AOL Commercial (1995) https://youtu.be/1npzZu83AfU
   

   View Slide

10. Global Network connected by the speed of light
    

    View Slide

11. Basically a bunch of networked machines
    Our job as “plumbers” is to make sure
    data passes through correctly,
    consistently, etc.
    

    View Slide

12. The “Layers” of the Internet. 2 well known models
    

    View Slide

13. Application Development
    “Web Development”
    is generally the application layer
    

    View Slide

14. HTML / CSS / Javascript / Etc
    https://twitter.com/js_tut/status/1189926784470519808
    Disclaimer: this is one
    person’s opinion (not a
    general fact)
    

    View Slide

15. Another person’s perspective
    

    View Slide

16. Luncheon Kingdom - Super Mario Odyssey (2017)
    In 2017, Nintendo came up with a new storyline for Mario. He has to save
    Princess Peach with various new challenges in The Luncheon Kingdom.
    Application development is very much like working as a
    Chef in a restaurant. Challenging, terrifying, yet exciting.
    Presentation will henceforth
    feature an expert in the
    dining industry, Mr. Ramsey
    →
    

    View Slide

17. Stacks and layers... Maybe like a stack of pancakes?
    HTML
    CSS
    Javascript
    SEO
    Database
    etc
    

    View Slide

18. Nah, web development is a means to an end
    I like this analogy of a dim sum
    meal. Application development
    includes providing:
    1) Various widgets are possible.
    2) Use of containers for
    delivering widgets.
    3) End user can access any
    combination of widgets.
    4) End user may lack technical
    literacy.
    

    View Slide

19. The browser is like the diner’s table
    

    View Slide

20. There is a sense of organization
    To maintain high quality
    service and product
    offerings, follow specs:
    ● World Wide Web
    Consortium (W3C)
    Specifications
    ● Semantic HTML
    Etc.
    

    View Slide

21. The minimalist HTML structure read by browser
    HTML Specs https://www.w3.org/TR/html52/
    
    
    
    
    
    
    
    
    
    

    View Slide

22. Structure ←→ layout
    

    View Slide

23. Presentation is everything to the end user
    

    View Slide

24. UX Design, Graphic Design, etc. are like plating
    techniques
    

    View Slide

25. Grid Layout
    From print design
    https://www.interaction-design.org/literatur
    e/article/the-grid-system-building-a-solid-de
    sign-layout
    

    View Slide

26. 90’s: the time
    before grid layout
    

    View Slide

27. View Slide

28. Frameworks, Libraries, etc.
    

    View Slide

29. Better to learn the techniques rather than products
    

    View Slide

30. Otherwise… you get what you get
    

    View Slide

31. Professionals manage to provide consistency across
    all conditions
    Before
    After
    

    View Slide

32. View Slide

33. Document Type Definition (DTD)
    ..>
    Should be declared as the first
    line of a file. To define the
    markup language.
    

    View Slide

34. Backus Naur Form (BNF)
    ● A compact way to represent the grammar of computer languages
    ● Many specifications use this format to describe legal syntax
    Example:
    sandwich ::= lower_slice [ mustard | mayonnaise ]
    lettuce? tomato? [ bologna | salami | ham ] {2,4}
    cheese + top_slice
    

    View Slide

35. DevTools
    Chrome DevTools https://developers.google.com/web/tools/chrome-devtools
    Firefox DevTools https://developer.mozilla.org/en-US/docs/Tools
    CanIUse https://caniuse.com/
    

    View Slide

36. The stakes are high
    

    View Slide

37. What is the cause of a webpage error?
    Could be at
    any level
    

    View Slide

38. BTW… Each browsers render a different default
    

    View Slide

39. HTTP Status Codes
    ● Grouped into categories
    ● Links:
    ○ https://www.iana.org/assignments/http-status-codes/
    ○ https://httpstatuses.com/
    

    View Slide

40. Server side errors - Include a message to end user
    

    View Slide

41. Could be a hardware issue
    

    View Slide

42. End user may not have same expectations as you
    

    View Slide

43. View Slide

44. Remember that someone will inspect your code
    ● Comment your code.
    ● Write clean code.
    Further advice:
    ● https://css-tricks.com/different-ways-to-format-c
    ss/
    ● https://developers.google.com/style/html-format
    ting
    

    View Slide

45. Community of Practice - Find your support group
    Web Design Blogs
    ● https://www.smashingmagazine.com/
    ● https://alistapart.com/
    ● https://codepen.io/spark/
    ● CoDrops
    ● CSS-Tricks
    “Plumbing” (Backend blogs)
    ● https://devops.com/
    ● http://highscalability.com/
    ● Superhero.js
    ● https://scotch.io/
    ● http://www.echojs.com/
    

    View Slide

46. Cascading Style Sheets (CSS)
    ● Used for describing the presentation of a document written in HTML
    ● Enables separation of presentation and content
    ● In CSS, selectors declare which part of the markup a style applies to by
    matching tags and attributes in the markup itself.
    ○ Selectors may apply to all elements of a specific type, e.g. the
    second-level headers h2
    ○ elements specified by attribute, in particular:
    ■ id: an identifier unique within the document
    ■ class: an identifier that can annotate multiple elements in a
    document
    ■ elements depending on how they are placed relative to others in
    the document tree.
    

    View Slide

47. CSS Specificity depends on the HTML structure
    

    View Slide

48. CSS Rules Specificity)
    Tree-Based Inheritance
    

    View Slide

49. CSS Pre-processors
    Tools that allow you to generate CSS from
    preprocessor’s syntax.
    ● May have added features that don’t
    come with CSS
    ● Helps with maintaining large scale CSS
    structure
    https://sass-lang.com/
    http://lesscss.org/
    

    View Slide

50. CSS Frameworks
    How to use:
    1. Link to the style sheets
    
    2. Use their CSS classnames (see next slide)
    Some of the ones available
    ● Bootstrap https://getbootstrap.com/
    ● Bulma https://bulma.io/
    ● Material Design https://material.io/
    ...and more
    

    View Slide

51. View Slide

52. Style Guides
    Examples:
    ● http://styleguides.io/
    ● https://developer.android.com/design
    

    View Slide

53. Thank you
    ~
    Questions?
    Katherine Chuang
    Lecturer, Department of Computer & Information Science
    Brooklyn College of CUNY
    katherine.chuang@brookyn.cuny.edu
    

    View Slide