Area of a room with Alina
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
Alina and Derek were hanging out and revisiting a bunch of JS interface concepts. So, we were putting those here for practical reasons.
But, this brings up an interesting point. In a world with a million boot camp grads with the same portfolio showing the same 4 projects with ugly thumbnails and no story… this page of CodePens might actually be an even better way to prove your skills.
You don’t have to make a fully finished web application to show that you know JavaScript and that you know it at many levels and can reason about it and explain it.
1. Just the JS
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
If you can’t do it without the form, you’ll know it’s too tightly coupled to the template.
Sometimes we’re in a rush, and we don’t write out the pseudocode, but that usually comes back to haunt us (and cost a lot more time) so, if you’re in a rush then you know it’s even more important to make a clear plan. Planning out what you want to do, is part of the work – and what if someone else needs to take over? This way, all of your time is of value – even if you have to switch gears and come back to it later.
* in the pseudocode means it’s not the highest priority.
Also, you might need to unit-test the functions and you might also test the form actions. So, they need to be separate and then composed together.
2. With a form
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
3. With a handler
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
4. With better UX
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
5. With input event (better UX?)
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
6. Showing paint buckets
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
Showing paint bucket left overs
See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.
But they look upside down!