The Coding Cockpit and JS Exercises

Quakebot review

We'll review solutions to the quakebot assignment, which involved writing a Jinja template to generate an automated story from USGS earthquake data.

The Coding Cockpit

To the untrained eye, a cockpit dashboard is a nonsensical array of guages and dials. To a pilot, the dashboard is a vital window into the surrounding environment and status of a hurtling tube of metal.

Yes, programming is a far less risky endeavor, but we too we need visibility into the workings of the machine. Otherwise we're just pushing buttons and turning dials without understanding their effects.

When coding for the web, the browser's developer toolbar is your cockpit dashboard. It provides a window into how the code is - or is not - working. It lets you view the effects of changes, expose and debug errors, and experiment with different solutions.

If you're new to a language or technique (e.g. events in Javascript), it may require research to figure out one or more ways to gain visibility into the code. You might use console.log in Javascript, or a Python debugger in a web scraper. The tools and strategies will vary by context, but the overarching question remains the same: How do you get visibility into what's happening in the code?

Discovering and mastering these tools is as important as learning the syntax of a language. In fact, these tools can help in the process of learning a language.

JS Exercises with Dev Tools

Let's begin ramping up on Javascript by working through some basic exercises, learning about features of the developer toolbar along the way.

Assignments

Javascript learning exercise

Pick a Javascript language feature or technique that you're curious about but have not yet mastered, and create a code example that demonstrates how to use the feature.

Before commencing work, you must clear the feature or technique with me.

For this assignment, create a private Github repo called stanford-bna-js-tinker. You must add me as a collaborator and submit a link to the repo via Canvas.

The repo should contain:

• An HTML file that references external Javascript file(s)
• One or more JS files (again, referenced from the HTML)
• If relevant, CSS in an external file or embedded in the HTML in a style tag
• A README.md memo of no more than 500 words. The memo should include the following info:
  • What skill you set out to learn.
  • How you went about learning it (e.g. links to specific tutorials, StackOverflow posts, code tinkering you performed, usage of the Developer Toolbar, etc.). You're encouraged to embed code snippets in the README.md (here's how to embed code in Markdown).
  • Assessment of your degree of mastery. How much do you feel you have learned? Do you think you could code this technique from memory in the future? Could you explain/teach it to someone else?

Important notes

The skill you dig into must be something beyond basic language features. For example, writing a "for" loop or creating a conditional, variable or function are not acceptable subjects for this assignment.

However, more advanced language features or concepts are fair game. For example, demonstrating an understanding of variable scoping rules, closures, Javascript modules and prototypal inheritance, would all be acceptable.

That said, I would encourage you to focus on practical, task-oriented skill-building. Examples include:

• How to dynamically construct an HTML table from JSON data.
• How to dynamically style a nav bar using JS click events and modification of CSS properties.
• How to build a web form that can make a JSON API call without triggering a page reload.

Use your recent website work as inspiration for ideas. Was there a feature you had to drop because you didn't quite understand how to implement it in Javascript?

If you're still hard pressed for ideas, check out the Intermediate Use Cases from the Mozilla Developer Network.

But again, you must ping me ahead of time for approval of the idea.