Apply for the next session

Hi, there. You're not logged in. So, you must be a visitor. Welcome!

What is this? You are viewing one of our supplemental "Stories." In addition to our core design curriculum, we are constantly building out additional resources. Stories are a collection of real work tasks, design history, UX explorations, and work-throughs. Stories are often off-the-cuff and less concerned with production value.

Introduction

This is essentially a collection of solutions.

Just putting this up to see if they’ll be a fun way to talk about it…

PHP

We should be able to port in a PHP version here… show the code, too –

Could have a few versions.

Native HTML validation.

Backup validation.

JavaScript progressive enhancement?

JavaScript with prompt()

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

(Press Result to run program)

(and Rerun to run it again after that)

JS with a function (and recursion?)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

(Press Result to run program)

(and Rerun to run it again after that)

JS with a form and event listener

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

jQuery (2006)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

going to make one of these…

Angularjs (pretend code) (2011)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

(pretend the v-dash things are ng-dash directives.) (for timeline purposes)

(it’s really Vue but so close that it’s basically the same)

Meteor (2012)

https://en.wikipedia.org/wiki/Meteor_(web_framework)

React classic (2013)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

React was introduced at Facebook in 2013 (video where they first explain it at Facebook)

Ember

Happens somewhere around here… and gets really good at v1.13

Vue

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

A little documentary about Vue and it’s creator.

Evan worked at Google and then at Meteor for a while.

Vue v2 (single file component)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

JS Class (generated DOM)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

ex2015 / es6  JavaScript spec starts getting added in all major browsers opening up templating without a framework.

JS Class many instances

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Vue 3 classic (Options API)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

If you don’t plan on supporting IE 11… then you should probably use Vue 3.

But there are many hold-outs. Here’s a recent story where Wikimedia foundations has decided to officially go with Vue, but aren’t sure if they’ll go with v2 or v3.

Vue 3 single file

The Options API version is basically the same as Vue 2. So, we can show the Composition API.

Setup function pattern  ??  (vs the much better newer Script setup pattern)

React with hooks

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

everyday.codes/javascript/please-stop-using-classes-in-javascript

React conference 2018: React Today and Tomorrow and 90% Cleaner React With Hooks

Why can't we have Ember/Glimmer - or Angular 2-9 - or Svelte here etc...

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Also not Rails or Django or PHP.

We’ve been looking at User Interface Libraries so far. They focus on the part of the web page. But once you get a full-on system of routing, full-on build environments, testing suites, and state management; it becomes another ball game. At that point you’re all in. That’s framework land. We’ll talk about them later though!

Video!

After you give those code examples a solid look-over, watch this!

Apply for the next session