# Session 14 - Server-Side, Part 2

Harvard Extension School
Fall 2023

Course Web Site: https://cscie12.dce.harvard.edu/

### Topics

1. Announcements
2. Final Project Notes and Observations
3. Tonight
4. CSR or SSR or SSG
5. Example of SSG/BTR
6. Example of SSG/BTR
7. SSR with Web CMS (Content Management Systems)
8. JavaScript Framework Libraries
9. CSS
10. Web Components
11. Thank You!

Session 14 - Server-Side, Part 2, slide1
Announcements, slide2
Final Project Notes and Observations, slide3
Tonight, slide4
CSR or SSR or SSG, slide5
Example of SSG/BTR, slide6
Example of SSG/BTR, slide7
SSR with Web CMS (Content Management Systems), slide8
JavaScript Framework Libraries, slide9
List of Web Resources, slide10
CSS, slide11
BEM (Block Element Modifier) naming system for CSS, slide12
CSS preprocessors, slide13
CSS Frameworks, slide14
Web Components, slide15
Thank You!, slide16

Presentation contains 16 slides

- img
- img
- img
- img
- img

## 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 20 minute scheduled appointments.
- Final Project information, including GitHub repo info (optional), example report, and submission parts published.
- Wednesday, December 20. Final Project Due and Final Project Presentations [Optional]

## 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!

## Tonight

- Build time rendering (BTR) or Static Site Generation (SSG) approach!
- JavaScript Frameworks that can make this easier!
- Punch list of things you should have heard about before completing an intro web development class!

## CSR or SSR or SSG

- CSR - Client Side Rendering
  e.g. JavaScript within web browser makes request for JSON data, then builds the page based on that data
- SSR - Server Side Rendering
  Web server hands off HTTP request to a program, and the program generates the content
- SSG - Static Site Generation also Build Time Rendering (BTR)
  Content is created programmatically at build time, and the static HTML content is served at time of request.

## Example of SSG/BTR

- 11ty (Eleventy): a simpler static site generator
- What is it?
  - JavaScript based tool -- and specifically Node.js, which allows us to run JavaScript on the server or from the command line.
  - Templates!
  - Data
  - Build system to generate site
  - Can couple this with GitHub actions to automate deployments (e.g. commit to a branch in GitHub, site is built, tested, and copied to hosting server).
- Examples
  - Nature of America Stamp Series
  - Nobel Prizes

## Example of SSG/BTR

- 11ty (Eleventy): a simpler static site generator
- What is it?
  - JavaScript based tool -- and specifically Node.js, which allows us to run JavaScript on the server or from the command line.
  - Templates!
  - Data
  - Build system to generate site
  - Can couple this with GitHub actions to automate deployments (e.g. commit to a branch in GitHub, site is built, tested, and copied to hosting server).
- Examples
  - Nature of America Stamp Series
  - Nobel Prizes

## SSR with Web CMS (Content Management Systems)

CMS aims to solve both "DRY" (Don't Repeat Yourself) as well as "easy editing" of sites through a browser.

### WordPress

Open source software which you can use to easily create a beautiful website, blog, or app.

- WordPress.org
- WordPress.com

### Drupal

Drupal - the leading open-source CMS for ambitious digital experiences that reach your audience across multiple channels. Because we all have different needs, Drupal allows you to create a unique space in a world of cookie-cutter solutions.

Drupal is an open source platform for building amazing digital experiences. It's made by a dedicated community. Anyone can use it, and it will always be free.

## 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

## 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

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

- 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.
- Tailwind — Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
- 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

## 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

## Thank You!

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