Week Nº 19

• Semantics

  Glancing through some of your in-progress work⁠—we want to remind people to pay attention to their semantic structure⁠—around images (perhaps figure), in particular. 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 fluidly responsive, as our last couple have been! We’re seeing an almost across-the-board regression into Desktop First thinking so far⁠—let’s reframe around Mobile First. And be sure to include the viewport tag!

• Modern properties

  In this house, we use relative units (shouldn’t see any px), logical properties) (block- and inline-), and comparison operators (width > 550px) for our media queries. (And of course, thorough CSS variables, relationships/​calc use, and nesting!)

  Besides being more resilient/​accessible/​simpler/​structural/​systematic⁠—this shows us you are engaging with the course material.

• Dev Tools

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

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

• Smaller Commits

  We’ve talked about this before⁠—we want to see much smaller, more-frequent commits! For one, it makes your code more resilient to annoying errors; also, it shows us how you (…not an LLM) are working through and understanding things.

• Right, LLMs/​attribution (…again)

  As Eric noted last night, we’re seeing some pretty… suspect code committed in your projects, so far⁠—concepts, patterns, and syntax we haven’t discussed (which is fine) without any attribution comments or explanation (which is code plagiarism).

  What are we learning? Could you explain your understanding to us? Are you in control? Consider this your final warning!

  Or Lance Armstrong, forklifts in the gym, reverse-centaurs, and doing more (and understanding) vs. less (and not), etc.

We’re going to spend the bulk of class today looking at your progress using Are.na as an API. Here are our groups:

• Our goal is that everyone will see one of us

• We’ll shoot for about 8 minutes 5 minutes with each of you

• We’ll each see one group two groups, then take a short break

• Give us some brief conceptual background, then right to live work

• Have your work up on your phone!

• We want to focus on the Big Picture, to start⁠—let’s save specific/​technical minutia for Slack

• Have your laptop/​notebook ready for notes!

• Feedback for one group is often feedback for all; let’s be actively listening to each turn

• Do the same with your peers when we are not at your table!

For the next part of your project, you’ll be Adding Interactivity. We’ll do an example to close out today:

• “Show More (Block) Info”

  • Add a <button> to a block template
  • Create a function that listens for click events on each of these <button>
  • 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

For time, we’re going to take a look at this async/​on Loom!

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

  Project Nº 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. We don’t want to see our “Fall Fundamentals” neglected!

• Update us with your progress:

  Submission Form

• We’ll be using the entirety of class next week for longer 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.