Session 14 - Server-Side, Part 2

Harvard Extension School
Fall 2023

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

Topics

Presentation contains 16 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 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.

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>