Week 19, February 12

Some Quick Notes #

• Attendance!

  When folks come in after we call attendance, it is their responsibility to let us know that they did, in fact, show up. Grace period is over!

• Semantics!

  Glancing through some of your in-progress work—we want to remind people to pay attention to their semantic structure. Nothing has changed here with the addition of JS; you should only be reaching for div when nothing else is more appropriate!

• Mobile-First!

  Your projects should be responsive, as our last couple have been! We’re seeing a lot of Desktop First thinking so far—let’s reframe around Mobile First. And be sure to include the viewport tag!

• DevTools!

  The Inspector has always been our friend—but should have even more prominence in your toolbelt now as we learn some JS. What is the Styles Tab telling us about what we’re seeing? What is The Console complaining about when our code doesn’t work?

  When we look at your sites, this is how we diagnose what is going on!

Project Check-Ins #

We’ll be spending the first half of class today looking at your progress using Are.na as an API. Here are our groups:

• You’ll each see one instructor, today
• We’ll have about 4 minutes with each person
• Have your live work up in Dev Mode for mobile
• Give us a very quick background to your channel/concept and then show us where you are at
• Think about how best you want to use this time!
• Do the same with your peers when we are not at your table

Demo Time #

For the next part of your project, you’ll be Adding interactivity. We’ll be doing a run-through of some techniques you might use to do this. Here’s an agenda:

• “Filtering” Blocks by Type

  • Let’s use a new channel for something fun
  • Are.na does not really have tagging, for better or for worse!
  • Could have buttons that add/remove classes that show/hide per-type
  • Also could separate areas (or pages) with their own insertion points—with logic/conditionals around the id

• Show More Block Information

  • Add a button to a block template
  • Create a function that listens for events on each of these buttons
  • When the button is pressed, add a class to its block
  • Use this class to show more information (description)
  • Maybe you want to show a modal/lightbox instead
  • Then adjust ancestor styles when it :has an open overlay
  • Add an event listener on this new element to close/hide it

• Transition Blocks In

  • Use Intersection Observer to fade in blocks as they enter the viewport
  • Adjust the rootMargin property, shifting when the block starts to fade in
  • Talk about prefers-reduced-motion in this context

For Next Week #

• We’re on to the next phase of your projects:

  Project 4 Adding Interactivity

  First think about how you want someone to understand, navigate, and interact with your collection—and then interpret that through the tools JavaScript avails us. We want these things to feel alive!

• Here we also want to emphasize prioritization—think about what gets you the most “bang for your buck.”

  Don’t neglect strong, foundational styles due to chasing down JS/refactoring. Can you approximate more complicated behavior by adding/removing classes with different states? (Probably.) Think about what seems achievable in the next two weeks.

• Update us with your progress:

  Submission Form

• We’ll be using the entirety of next week for reviews, and you’ll each hear from both of us.

  So we expect a lot of progress between now and then! The following week is for refinement, not your catching up on your core functionality—get that in before we see you next, so we can respond to it.