Session 14 - Grab Bag

Topics

1. Announcements
2. Final Project Notes and Observations
3. Session 14 - Topic Grab Bag
4. JavaScript Framework Libraries
5. CSS
6. Web Components
7. Oh, The Places You'll Go!
8. Thank You!

Session 14 - Grab Bag, slide1
Announcements, slide2
Final Project Notes and Observations, slide3
Session 14 - Topic Grab Bag, slide4
JavaScript Framework Libraries, slide5
List of Web Resources, slide6
CSS, slide7
BEM (Block Element Modifier) naming system for CSS, slide8
CSS preprocessors, slide9
CSS Frameworks, slide10
CSS advances, slide11
Web Components, slide12
Oh, The Places You'll Go!, slide13
Thank You!, slide14

Presentation contains 14 slides

Announcements

• Office Hours - Appointment and Open. Check out the schedule for the upcoming week for office hours -- there are "open / drop-in" times as well as 15 minute scheduled appointments.
• Final Project information, including GitHub repo info, example report, and submission parts published.
• Wednesday, December 18. Final Project Due and Final Project Presentations [Optional]. Sign up if you want to present your final project to the class!

Final Project Notes and Observations

• Implement only three parts.
  • The rest doesn't have to exist
  • Use href="#" to link to those things that don't exist yet
• File structure organization:
  • All of your html files at the top level
  • directory/folder for images, styles, and scripts

    .
    |-- index.html
    |-- hello-harvard.html
    |-- images
    |   |-- harvard.jpg
    |   `-- world.jpg
    |-- scripts
    |   `-- map.js
    `-- styles
        `-- site.css

• lowercase file names and without spaces
  • Better: my_favorite_teas.html
  • Worse: My Favorite Teas.html
• Within your site, use relative URL links.
  • YES! relative:
    <link rel="stylesheet" href="styles/main.css" />
  • NOT relative:
    1. <link rel="stylesheet" href="/Users/david/Desktop/final_project/styles/site.css"/>
    2. <link rel="stylesheet" href="/styles/site.css"/> ← this will work in VS Code "Go Live" but most likely won't when you publish your site!
• Site-wide CSS Stylesheet!
  One CSS stylesheet to style all of your HTML pages!

Session 14 - Topic Grab Bag

JavaScript Framework Libraries

A JavaScript framework, like React or Vue, is a tool that helps create interactive and dynamic websites more efficiently. It provides a structured way to build web pages, allowing pieces of the page to update automatically without needing to refresh the whole page. These frameworks work alongside HTML, CSS, and JavaScript, making it easier to handle complex features and user interactions.

Descriptions are what the frameworks claim about themselves!

• React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
• Vue — the progressive JavaScript framework. An approachable, performant and versatile framework for building web user interfaces.
• AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!
• ...many many others.

List of Web Resources

• CSCI E-12 Web Resources

Implemented in Vue:

<ul class="resources">
  <li v-for="r in filterResources()" class="resource">
      <a class="concealed" v-bind:href="r.url"><img v-if="r.image" v-bind:src="r.image"
              v-on:error="removeImg" v-bind:alt="'site image for ' + r.title" /></a>
      <div class="title"><a v-bind:href="r.url">{{ r.title }}</a></div>
      <div v-if="r.hostname" class="hostname">{{ r.hostname }}</div>
      <div class="description">{{ r.description }}</div>
  </li>
</ul>

CSS

• naming systems
• preprocessors
• frameworks
• CSS advances

BEM (Block Element Modifier) naming system for CSS

• BEM — is a methodology that helps you to create reusable components and code sharing in front‑end development

And other methodology options

• OOCSS — Separating container and content with CSS “objects”
• SMACSS — Style-guide to write your CSS with five categories for CSS rules
• SUITCSS — Structured class names and meaningful hyphens
• Atomic — Breaking down styles into atomic, or indivisible, pieces

CSS preprocessors

What is a CSS preprocessor?

• Sass — Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
• LESS — Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

CSS Frameworks

CSS frameworks are pre-prepared libraries that are meant to be used to speed up the process of building websites or web applications.

• Tailwind — Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

  Why tailwind won the CSS race...

• Bootstrap — Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
• Semantic UI empowers designers and developers by creating a shared vocabulary for UI.
• Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.
• Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
• ...and many many more

CSS advances

• CSS Nesting allows nesting of CSS selectors, similar to preprocessors like Sass.
• clamp(), min(), and max() functions:math functions for more dynamic and responsive designs.
• :has() selector: A parent selector that allows selecting elements based on their children.
• :is() and :where() pseudo-classes: selectors that simplify and reduce the repetition of selectors.

Web Components

Web Components is a suite of different technologies (including HTML, CSS, JS) allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

• Hello World
• Google Maps

Oh, The Places You'll Go!

• Back-end programming (Python, JS)
• Front-end programming (JS, CSS)
• Content and Design

---

• Computer Science
  • CSCI E-3 Introduction to Web Programming Using JavaScript (Larry Bouthillier)
  • CSCI E-7 Introduction to Computer Science with Python
  • CSCI E-10A/B Introduction to Computer Science Using Java - I and II (Henry Leitner)
  • CSCI E-14A Building Interactive Web Applications for Data Analysis
  • CSCI E-15 Web Programming with PHP
  • CSCI E-31 Web Application Development Using Node.js (Larry Bouthillier)
  • CSCI E-33A Web Progamming with Python and JavaScript
  • CSCI E-34 User Experience Engineering
  • CSCI E-114 Web Application Development with Jamstack (Barrett, Bouthillier, Heitmeyer, and Hilborn)
• Digital Media
  • DGMD E-1 Digital Media: From Ideas to Designs and Prototypes
  • DGMD E-1 Digital Media: From Prototypes to Products and Services
  • DGMD E-20 Modern and Mobile Front-End Web Design I
  • DGMD E-23 Planning Successful Websites and Applications
  • DGMD E-25 Developing Websites with WordPress
  • DGMD E-26 WordPress Programming
  • DGMD E-28 Developing Single-Page Web Applications

Thank You!

<h1 data-to="Fall 2024 Class"
   data-from="David">
  Thank You!
</h1>