Exercises for programmers #1 in all the flavors
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.
We didn’t have element.querySelector() yet, so you can see how this short-form $(selector) was nice! It solved tons of cross-browser issues and made things shorter and more fun to write.
Angularjs (2011)
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
It was good! But it did seem a lot more complicated to write out further along.
Meteor (2012)
https://en.wikipedia.org/wiki/Meteor_(web_framework)
Can we get this running in StackBlitz or something?
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
We can use StackBlitz to show this / and embed it –
*** Vue v2 (with "the options api")
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)
*** Vue 3 single file with "The composition API" and the "setup pattern"
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
This is how we’ll be doing it in the final project.
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!