Week 24

AI/ChatGPT use?

As we noted on Slack, we were pretty disappointed to see some of your last reading responses smelled of AI/ChatGPT large language model summarization. This isn’t widespread, and you know who you are—but it’s something we should talk about:

• AI/ChatGPT/LLM/Copilot/what-have-you can (generously) be thought of as tools.

• Like any other resource—Stack Overflow, Code Tutors, Abhishek—they might help you understand, but they also might be incorrect.

• And, like other tools—they do not do the work for you.

• It should be clear that submitting an AI summary of a reading you didn’t do isn’t using a tool to help you understand—it is you not doing the work.

• Likewise, pasting code without understanding it is also not doing the work.

• If it isn’t abundantly clear yet, we’re grading you on doing the work.

• Copying writing or code could (easily) be considered forms of plagiarism.

• We don’t want to get into academic honesty territory, and hope you don’t either.

• Grading and rules aside, ostensibly you are here because you want to learn this stuff. When you hit ⌘ V, always ask yourself if you are learning.

Adding state to your projects

We’re going to (properly) start today with a demo/workshop on adding some state to your projects, using forms/inputs, search/URL params, and web storage. Here’s the repo for today with our example code:

forms-params-storage

Our agenda:

• Briefly, static vs. dynamic websites (in a build/hosting context)

  • We have been writing static sites—only you can change your pages, in code
  • GitHub Pages (our hosting) does not allow server-side languages (PHP, Ruby, Go, etc.) nor databases (MySQL, Postgres, etc.)
  • These are how most sites are dynamic—constructing pages, storing information
  • But we can approximate/suggest this kind of dynamic behavior with JS

• Then forms and inputs (comment out the form-state.js to start)

  • <form> / <input> / button are semantic indicators of interactivity
  • The type= attribute is used for different (user-agent) controls
  • required makes them… required
  • <label> elements are connected by for=, id=, name= attributes
  • You can (and should) style them from these defaults

• Onto search (aka: query strings) and URL params (for parameters)

  • By default, forms add their query string to the URL on the submit event
  • We’re going to use these to track our state
  • URLs makes these shareable—you could bookmark/QR to different states
  • Comment form-state.js back in and go through
  • preventDefault stops the form from submitting/refreshing
  • Instead, we update the URL on the input event (any change to the form)

• Finally web storage

  • Persists across reloads/browser sessions—but still limited to one device
  • Cookies (cross domain, visible to server) vs. sessionStorage vs. localStorage
  • Visible/editable in Inspector (Application > Storage > Local Storage)

• Putting this to use

  • Edit/simplify the form and watch the corresponding URL/storage
  • Add a conditional based on a param, with localStorage.getItem
  • Manipulate the DOM from these inputs

We’ll break somewhere here, either during the demo or after.

Developing directions

We’re going to spend the rest of today going over your revised proposals for Project 5. You will be splitting up into (new-old) groups again, and we will be going around to each—same drill as before:

• Group 1: Chi, Dusha, Bobby, Keren

• Group 2: Mariia, Sarah, Tanvi, Sushanto

• Group 3: Amaya, Lucine, Dayna, Caroline

• Group 4: Jocelyn, Dhruv, Hamza, Kinjal

• Group 5: Madhura, Shivi, Kendall, Abhishek

• Group 6: Andre, Myriam, Vasu

• Group 7: Ina, Vidushi, Giselle, Azra

• Group 8: Fahila, Sandra, Sanjana

For next week

• If you are still uncertain about your project proposal—in terms of scope/feasibility—reach out to us (both) on Slack.

  Just a reminder that these are due in 4 weeks! You should have an idea of how they are going to unfold.

• We’re on to the next phase of your project, Shift into code.

• Make sure we have your links:

  Assignment submission

Session recording

Session recording