Hunter Henrichsen

Hunter Henrichsen
Search Circle
< lecture

Lecture 09 - Frontend

posted over 1 year ago ⋄ 12 min read

Lecture 09 - Frontend#

News and Housekeeping#

Parts of the Frontend#

One resource I found that’s worth looking at is the State of JS survey – it’s a good way to get a handle on what’s currently popular, discover new tools that other people are using, and just generally see how things are trending.

Before we Start#

Each of these things has some amount of “magic” and learning involved to make them work well for you.

Frontend Frameworks#

Frameworks are how you build webpages that respond to outside data and user input. Many of the frontend frameworks are now moving towards SSR which allows you to also use server information and generate the page even if the user is not using JavaScript, depending on the implementation. There are so many of these.

The Original Ones#

The New Ones#

Component Libraries#

Component libraries are the primitives used to build an app, and generally run on top of a framework. I recommend using one, since most of them come with automatic accessibility benefits, as well as save you time reinventing the wheel.

CSS Frameworks#

Bundlers and More#

Bundlers#

Other Tools#

Build Steps#

Hunter’s Crash Course in Design#

We will be working with this CodePen as I go over this section in class, but feel free to read through this section and then jump back to the CodePen.

Start with Features, Not Layouts#

_From Refactoring UI_

When starting on a feature, it’s easy to fall into the trap of “what should this all look like?”, when instead you should focus on building just what’s required for that feature. You can iterate and ask what things should look like once you have functionality.

Information Architecture#

The core of good design is information architecture. Not all elements on a page are equal. Each page generally has a primary piece of information, and some number of secondary and tertiary pieces of information.

Your design should reflect this. Primary information should be the most emphasized and easiest to find. Some should be de-emphasized. Color, weight, and size are easy ways to do this. You can also hide elements in each other, to remove the amount of secondary or tertiary information, and make it easy for your users to find the most important info.

Design System#

From Designary

One of the benefits that using Tailwind gives you is the fact that it gives you a built-in design system. A design system generally revolves around a pixel grid; normally 4px or 8px. Spacing, images, sizes of elements, images, etc. are all sized around that grid. The full system doesn’t need to be defined in advance, but should be decided on eventually.

Responsive Design#

One way of “take as much space as is needed” is not hardcoding widths, heights, and the such. Setting boundaries at breakpoints tends to work well via min-width and max-width, but content will generally resize to take up what’s in its children.

Responsive Design generally falls under the mental model of “my site supports mobile”, but building a truly responsive design will mean that your site will work on the 1:1 square monitor, a mobile phone, and a 32:9 ultrawide monitor without needing specific breakpoints.

Your content should be designed to squish elegantly, and if it no longer fits, it should either render a different version, or no longer show.

Parallel Structure and the Gestalt Rules of Grouping#

Parallel structure is an idea from writing: sentences and paragraphs that accomplish the same idea (list items in a sentence, new supporting ideas, or new paragraphs) should each follow the same structure to help your reader intuitively understand what is happening in a paragraph.

Similar is the Gestalt Rules of Grouping: things that take the same structure or appear close together are psychologically grouped.

This idea comes pretty intuitively from components; you should build components for ideas, and then use those wherever that idea occurs. Information that is relevant to other nearby information should be placed near to that information.

Designing for Readability#

Lots of web content is based around text. You should make sure that your text is readable. There are lots of different implementations about this, but the general guideline is that text should be no wider than 50-70 characters wide:

I also like to apply this concept to other things as well. Users respond better to taking as much space is needed, rather than using all of the available space.

Study Prior Art#

Some ideas have become fairly canonized in design. Looking at others’ designs is a good way to find what is working and what is not working.

Here are some places that I like to look for ideas if I’m not 100% sure how to build a UI:

A lot of these tend to be really pretty / overdesigned, however. Remember my first point: start with the feature, not with the design.

Demo: UI Design for a List#

Here’s a little Vue app that lists some blog posts. It’s not very pretty:

<script type="module">
  import { createApp } from "https://unpkg.com/petite-vue?module";
  createApp({
    posts: [
      {
        title: "Testing API Routes in the Next.js 13 App Router",
        date: "Nov 1 2023",
        rating: 4.3,
        content:
          "While I was first getting started in Next.js, I wasn't able to find any details about how to unit test Next.js API routes...",
        readingTime: "3 Minutes",
        imageUrl:
          "https://images.unsplash.com/photo-1698094276298-92b21f2df7f9?auto=format&fit=crop&q=80&w=2574&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      },
      {
        title: "Deploying Motion Canvas Animations to GitHub Actions",
        date: "Nov 4 2023",
        rating: 4.6,
        content:
          "Start by creating a new node project at the root of your repo and install some dependencies:...",
        readingTime: "5 Minutes",
        imageUrl:
          "https://images.unsplash.com/photo-1688716332896-1a8d510030af?auto=format&fit=crop&q=80&w=2487&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
      },
    ],
  }).mount("#app");
</script>


<main id="app">
  <div v-for="post in posts">
    <img v-bind:src="post.imageUrl" />
    <div>
      <div>{{ post.title }}</div>
      <div><span>Date:</span> {{ post.date }}</div>
      <div><span>Average Rating:</span> {{ post.rating }}</div>
      <div><span>Reading Time:</span> {{ post.readingTime }}</div>
      <div>{{ post.content }}</div>
    </div>
  </div>
</main>