Web Development World

0c64f5404b8787a038e8f6fa9522224d?s=47 Kat Chuang
November 05, 2019

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).


Kat Chuang

November 05, 2019


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

  2. Common knowledge: The sky is blue

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

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

  5. Mario is a plumber who travels through the sewer tunnel

    system in a well known video game.
  6. Man made world has rules and conventions

  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
  8. The Information Superhighway https://youtu.be/SFJHHbue_Aw

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

  10. Global Network connected by the speed of light

  11. Basically a bunch of networked machines Our job as “plumbers”

    is to make sure data passes through correctly, consistently, etc.
  12. The “Layers” of the Internet. 2 well known models

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

  14. HTML / CSS / Javascript / Etc https://twitter.com/js_tut/status/1189926784470519808 Disclaimer: this

    is one person’s opinion (not a general fact)
  15. Another person’s perspective

  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 →
  17. Stacks and layers... Maybe like a stack of pancakes? HTML

    CSS Javascript SEO Database etc
  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.
  19. The browser is like the diner’s table

  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.
  21. The minimalist HTML structure read by browser HTML Specs https://www.w3.org/TR/html52/

    <html> <head> <!-- This is a comment. --> <!-- metadata goes in the head section --> </head> <body> <!-- Page contents goes in the body. Multiline comments are allowed. --> </body> </html>
  22. Structure ←→ layout

  23. Presentation is everything to the end user

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

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

  26. 90’s: the time before grid layout

  27. None
  28. Frameworks, Libraries, etc.

  29. Better to learn the techniques rather than products

  30. Otherwise… you get what you get

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

  32. None
  33. Document Type Definition (DTD) <!DOCTYPE ...> Should be declared as

    the first line of a file. To define the markup language.
  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
  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/

  36. The stakes are high

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

    at any level
  38. BTW… Each browsers render a different default

  39. HTTP Status Codes • Grouped into categories • Links: ◦

    https://www.iana.org/assignments/http-status-codes/ ◦ https://httpstatuses.com/
  40. Server side errors - Include a message to end user

  41. Could be a hardware issue

  42. End user may not have same expectations as you

  43. None
  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
  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/
  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.
  47. CSS Specificity depends on the HTML structure

  48. CSS Rules Specificity) Tree-Based Inheritance

  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/
  50. CSS Frameworks How to use: 1. Link to the style

    sheets <link rel="stylesheet" href="css/bootstrap.min.css" > 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
  51. None
  52. Style Guides Examples: • http://styleguides.io/ • https://developer.android.com/design

  53. Thank you ~ Questions? Katherine Chuang Lecturer, Department of Computer

    & Information Science Brooklyn College of CUNY katherine.chuang@brookyn.cuny.edu