Since the web and its constituent code are constantly changing, there is no one resource that is best. Instead, students should aim to absorb resources from a variety of sources, putting them to use through trial and error.
Rubber duck debugging is a method of debugging code. Programmers using this technique carry around a rubber duck and debug their code by forcing themselves to explain it, line-by-line, to the duck.
Teaching a subject forces its evaluation from different perspectives and can provide a deeper understanding. By using an inanimate object, the programmer can try to accomplish this without having to interrupt anyone else.
Remember that most of the time spent writing code will be fixing bugs. In fact, learning how to debug is what programming is all about! (And sometimes bugs will allow you to discover something new and never seen before.)
If you find yourself stuck with a bug, first try breaking your problem down into smaller, more manageable parts. Search Google or Stack Overflow for how to solve those parts, one at a time.
Downloads
You should make sure your computers have:
A web browser. We'll use Chrome exclusively for its developer tools.
A computer log entry from the Mark II, with a moth taped to the page —
“The terms ‘bug’ and ‘debugging’ are popularly attributed to Admiral Grace Hopper in the 1940s. While she was working on a Mark II computer at Harvard University, her associates discovered a moth stuck in a relay and thereby impeding operation, whereupon she remarked that they were ‘debugging’ the system.
HTML stands for Hypertext Markup Language. It's used to structure a webpage and its content. HTML is not a programming language, but a markup language.
CSS stands for Cascading Style Sheets. It's a series of rules used to style a webpage. Like HTML, CSS is not really a programming language—it's a style sheet language.
JavaScript is the programming language of HTML and the web. Interaction with the user, animation, etc., are all done with JavaScript.
jQuery is a library, or set of helpful add-ons, to the JavaScript programming language. In general, jQuery is much better at giving you immediate, visual results than regular JavaScript. In this class, it's likely you'll use a mix of basic JavaScript and jQuery.
Terminal is a type of command-line interpreter or shell. Mac OS X includes a program appropriately called "Terminal," which can be used to run UNIX commands.
Keyboard shortcuts can be a useful tool. With limited real estate on screens and multiple applications open, it’ll become important that you can quickly interact with your code, in plain text, the web inspector and in the browser. These are some common shortcuts, grouped by application, that you might want to use while working. This list is by no means all-inclusive and will change based on your own machine's keyboard, applications, user settings, and operating system.
These shortcuts are meant for the software most of us are using in this class: Google Chrome, Atom or Brackets, and macOS.
⌘ the Command Key symbol ⌥ the Option Key symbol ⇧ the Shift Key symbol ⌃ the Control Key symbol
In Atom, for a full list of shortcuts, go to File / Preferences / Keybinding.
You can also drag your 'Interactive' folder into your text editor for quick access to all of its files and directories.
Google Chrome
Open the Inspector: ⌥⌘I
Open the JavaScript Console: ⌥⌘J
View page source: ⌥⌘U
Full Screen: ⌃⌘F
New Window: ⌘N
New Incognito Window: ⌘⇧N
New tab: ⌘T
Switch between tabs: ⌃tab
Close tab: ⌘W
Refresh the page: ⌘R
Hard refresh: ⌘⇧R
Show/Hide the bookmarks bar: ⌘⇧B
Zoom in: ⌘+
Zoom out: ⌘-
Back in history: ⌘[
Forward in history: ⌘]
macOS General
Switch between applications: ⌘ tab
Spotlight (quick find an application): ⌘ space
Screenshot of whole screen: ⌘⇧3
Screenshot a selected part of screen: ⌘⇧4
Screenshot a selected application: ⌘⇧4 space
Tutorials
All students at Yale have free access to Lynda.com, a website that contains thorough online video courses for all skills learned in this course. Access Lynda here:
