Skip to main content

This set of resources will likely expand as we move forward; feel free to suggest others that you come across! (You can fork the repo, edit this page, and file a pull request! Or just email me. That works, too.)

Resources

Table of contents:

Services at Pitt

LinkedIn Learning tutorials

This is a portal for high-quality, often in-depth, video and screencast tutorials for a wide variety of digital tools: from audio, image, and video editing, to web design, to photography and graphic design, to programming languages. Your tuition dollars give you access while you're at Pitt; might as well take advantage while you can!

The start button follows the 'LinkedIn Learning' header and a heart button to 'Add Favorite'.

You'll need to log in first through my.pitt, click the Start button to access the video library, and then search within that or come back here for a direct link. Otherwise, it'll try to get you to sign up or log in through LinkedIn, which is probably not what you meant to do.

I particularly recommend the following starting points:

DMAP site
The English department maintains a Digital Media And Pedagogy site with a number of useful resources, including recording equipment you can check out, easy-to-reserve office hours with either a grad student or faculty digital media consultant (see the sidebar), and a way to reserve the DMAP studio (CL 463) for up to eight people.
Pitt Writing Center
Though not every consultant will have experience in multimodal composing or digital media, some will; but more importantly, the Writing Center's emphases on process-oriented reflection and rhetorical thinking makes every consultant a useful sounding board for developing ideas, getting feedback from an outside reader, and getting organized for revision and reflection. It's a good idea to plan for your visit and to make an appointment before you go.
Disability Resources
If you have a disability for which you are or may be requesting an accommodation, you are encouraged to contact both your instructor and the Office of Disability Resources and Services, 140 William Pitt Union, 412-648-7890 / 412-624-3346 (Fax), as early as possible in the term. Disability Resources and Services will verify your disability and determine reasonable accommodations for this course.
Counseling Services
Pitt also offers free counseling for students who are experiencing personal or emotional difficulties. The Counseling Center, located on the 2nd Floor Nordenberg Hall, offers Psychological Services and Sexual Assault Services (412-648-7930) (8:30 am-5:00 pm, Monday-Friday) or (412-648-7856) (after 5 pm, Monday-Friday or on weekends).
UpStreet mental health services
Not actually a Pitt service, but a Pittsburgh one, and still potentially good to know about: UpStreet offers free, no-appointment-needed counseling with licensed mental health professionals via webchat -- and it's designed for people aged 12-22. They also have free readings on coping with stress and other wellness topics; conversely, they also offer paid appointments for more extensive one-on-one therapy.

Help with Git and GitHub

Get free private repositories
Important for starting out: GitHub defaults to making repositories public, and ordinarily you would have to buy a paid account to keep your projects private. But if you have a .edu email account, you can request a discount that lets you get unlimited private repositories for free. Click the link to find out more.
Git and GitHub for Poets
A delightfully nerdy, yet strangely accessible, playlist of tutorial videos on using GitHub and Git (in that order) to keep track of changes to a text file. A great way to learn more about the features that make these tools appealing to coders and non-coders alike.
Getting Started with GitHub Desktop
Contributing and Collaborating using GitHub Desktop
The official documentation for using the GH Desktop application, a GUI (graphical user interface) that gives you more flexibility than the GitHub website, but also a more user-friendly appearance (including next-step-in-the-workflow suggestions) than command-line git. See especially the section, part of the second page linked above, about making changes in a branch.
What to do if your files are too large for GitHub

If you get an error message telling you that you can't push to GitHub because your files are too large, try Git Large File Storage (git-lfs): it stores large files on a separate server, and converts the file in your GH repo into a tiny pointer file. The documentation is pretty clear, though it does involve a little command-line fu at times. (Nothing major: you can just follow the steps.) And when it's all set up, it works in GitHub Desktop pretty seamlessly.

The one catch is that if you're using git-lfs on a forked repo, the extra storage you get counts against the quota of the upstream fork, so if everyone uses it for CDM assignments, eventually I run out of data and *nothing* can be pushed. So at the end of the semester, I'll ask you to re-clone your repo and add a new remote branch that's not on my fork tree. But we'll cross that bridge if/when we come to it!

Oh! And if you discover that you have large files you can't push after they're already in your commit history, you'll need to start managing *those* large files with git-lfs, too. Luckily there's now [a (simple command line) tool to help you do that](https://github.blog/2017-06-27-git-lfs-2-2-0-released/)!

If all else fails, fear not! You can always (1) start an empty new repository on GitHub, (2) point your local repository to that new one by changing the remote URL at the command line, and (3) pushing your now-correctly-configured files to the new repository. The new repo should now inherit the entire history of your local one, including all your messages. Just be sure to (4) add a link to the new repository in the README.md file of your old one, so we can find it easily.

Git Cheat Sheet
Two pages containing everything you need to know for everyday version-tracking, from how to set up your local repository to how to recover past versions, with your normal status->add->commit->push-> workflow prominently placed. This is all for the command line; if that makes you uncomfortable, you might enjoy this somewhat irreverent Command Line Crash Course. Or, you know, just go with the GitHub Desktop GUI.
ohshitgit.com
dangitgit.com
These are the same site; the second is just, ah, cleaned up a bit. The frustration, though, is the same, because let's face it: there are times when even experienced users of git feel that something has gone terribly wrong. This is a great resource of quick command-line fixes for common problems, compiled by someone who feels your pain.
GitHub Learning Lab
Should you feel enticed by our course to want to go deeper into the capabilities of GH and go with the GitHub Flow, come here: it's a system of tutorials built directly into the GitHub web interface, with a "robot" that gives you prompts and affirmations of success right in the Issue Queues and Revision Histories of your own repositories. (Each new "course" you take in the Learning Lab will auto-generate a new repository to play with.) To enable this magic of automation work, you'll have to give the app some major permissions on your account – but since it's written by the same people who make GitHub, I felt pretty comfortable trusting them anyway. (They already keep all my stuff, you know?)

Free and Licensed Images, Sounds, and Other Assets

In this section:

search.creativecommons.org
A portal for searching multiple sites that have built-in CC licensing, including flickr, jamendo, and ccmixter

Sounds and Music

Freesound
As they put it in their FAQ, "Freesound aims to create a huge collaborative database of audio snippets, samples, recordings, bleeps, ... released under Creative Commons licenses that allow their reuse." Note that this won't have music as such; it's more for incidentals.
CCMixter
SoundCloud
Jamendo
Free Music Archive
Sites where you can find music with open licenses for remix. Each has its own community and search interface; I've had some success using CCMixter's tag search feature. Pay attention to the licenses for the specific tracks you want: some have the non-commercial Creative Commons license, and some are licensed only to listen to, especially on SoundCloud, where a lot of professional recording artists post to build buzz. If you're planning on doing any cutting or distorting, look for something you can modify (which includes CC-BY or CC-BY-NC).
YouTube Audio Library
This could easily be folded in with the list above, but I want to keep it separate for a few reasons: (1) I'm adding it later, so I want to make its newness more visible; (2) because it requires a login to use (but Google login works fine); and (3) because it's got a really excellent interface! There's an impressive set of filters, including genre, mood, and duration; single click to download; and if there's a CC license, it'll give you the permalinks and citation right there for ease of copy-paste. Also has sound effects on a separate tab.
Soundflower
BlackHole

These aren't repositories of sounds, but rather another way to get sound: they're MacOS system extension that allow you to record directly from any app into Audacity by piping sound output/input through a new "channel" which you can select as Audacity's input device. (I suspect something similar is available for PCs but I'm not sure yet what it is. Let me know if you find it!) Soundflower works for Macs up through MacOS Catalina; for more recent devices that use an M1 chip, you'll want to use BlackHole. Once installed, you just set your computer's "speaker" to the new channel (as if you were selecting headphones) and set Audacity's input to the same. (And don't forget to change them back after you've made the recording...)

Whatever source you're recording from, be sure that you have permission to do so, either from an explicit license, from public domain, or from fair use. As always, make a note of these permissions as you're making the recording, so you don't lose track!

NB: the easiest way to install either extension is via the command-line tool Homebrew; see that linked page for more about Homebrew, and see the project's GitHub repositories for the appropriate brew command.

Visuals

Unsplash
A collection of high-res, large-scale images that are free for personal and commercial uses; they may be especially useful for splashy website headers and homescreens.
Undraw
A collection of open-licensed illustrations in .svg format, meaning they can scale to any size without losing quality. Perhaps especially useful during the web unit. Thanks to Michael Pacifico for the recommendation!
Font Squirrel

Fonts that are free for personal and commercial uses, making them especially handy for advertising campaigns and the like. The site also includes some useful educational resources for learning more about font history and font selection.

For web design applications, see also their WebFont Generator, , because even once you've find a good font, before you can use it on the web, it has to be formatted for browsers to render properly. Some fonts on your favorite font sites will already have webfont versions. If they don't, you can convert them to web-ready fonts using this tool. Just make sure you have permission to do so, okay?

Similar font finder
A lot of fonts you'll see in commercial products are expensive to license, in part because they're crafted to be unique or brand-identifying. But often in a project you just want the flavor of a particular font, and the exact match isn't as essential. This tool, from WhatFontIs.com, indexes hundreds of thousands of free and commercial fonts and may help you locate something with an open license that will serve your purposes just fine. (And if you're not sure what font you're looking at, their main site might help you figure it out!)
The Noun Project
A collection of liberally licensed icon sets aiming to create "icons for everything," though as the name suggests, they specialize in things, rather than actions. If you realize you don't want all the detail of a photo when a simple line drawing would get the idea across, try searching their million-plus collection.
Adobe Color CC
Paletton
Color-Hex
Tools for color selection, for when you want to find a palette of complementary tones, or just to find the hex codes along an axis of saturation or intensity.
Font Joy
Font pairs are generated by mapping a number of features (x-height, obliqueness, stroke thickness, etc) and using a deep learning algorithm to suggest fonts that share some features while contrasting in others. The interface makes it easiest to just shuffle until you see something you like, but you can also click the menu button for a more organized list of contrasting fonts to narrow your search space. Thanks to Mason (CDM 2021 Spring) for suggesting this resource!

Web Frameworks and Libraries

loremipsum.io
Lorem ipsum is the shorthand name for the most commonly used placeholder text around. (There are also a lot of variants.) Essentially, you can use this text to fill in for the kind of writing that will change frequently: article or blog post text, for example. By quickly letting you fill out several paragraphs, you can start to see what your design looks like before you have fully fleshed-out content. This particular site, in addition to offering lorem ipsum generators and links to several others, gives a nice overview of the history and debates around this kind of placeholder.
templated.co
html5up.net
There are a lot of websites that offer collections of free website themes and templates. These are two of my favorite sources for starting up static sites with built-in semantic html5 and responsive css.
pageclip.co
formspree.co
Basin
For those looking to integrate form submissions within their static site, the above plug-and-play services allow redirects to emails, Slack channels, or csv's. Free plans are limited but generally sufficient for most small-scale projects. Thanks to Ben Adams for finding and testing these resources!
Bootstrap CSS Framework
Skeleton CSS
and other CSS libraries

Once you're clear on what a CSS class is, and how to add it to an HTML element, you can pretty much work from scratch designing your own CSS rules and building from there. But sometimes it helps to have a leg up, and that's where libraries come in: with a single line in the <head> element of your web page, you can import a whole slew of pre-made CSS rules (and even some related JavaScript actions), so that you can just start adding them to your html. It's a little like Lego for web design, only free.

Bootstrap is one of the most popular CSS libraries right now – I guarantee you've seen more than one website that uses it – and it's got enviably clear documentation for specific classes such as banner images, navigation, buttons, and boxes. (It's how I style the background colors for my in-class prompts, for example.) Since Bootstrap 4 (they're now on 5), uses Flexbox for layout and is therefore much better at aligning and centering things along both vertical and horizontal axes than was true in the past (and even in the past it was pretty good). It still doesn't use CSS Grid, though you can add that yourself as needed.

Skeleton describes itself as "A dead simple, responsive boilerplate" – it's a mobile-first, minimalist approach. Don't come here for elaborate color schemes or shadows, but if you just want a jump-start to responsive rows and columns and clean defaults for headers, this will give you a streamlined set of classes to learn.

Jekyll

Jekyll is actually a program in the Ruby language, but it functions as a tool for incorporating templates and variables into your web pages – so you can, for example, write the navigation once, and automatically have it pulled into every other html page you write. Especially useful for sites where you'll keep adding new pages, like blogs. (Or lesson plans! To see the code I use for this website, see the corresponding GitHub repo; there's a link in the footer.)

Most importantly, it's also pre-installed on GitHub Pages, so you can easily deploy it for your web project. The first link below will take you to a step-by-step set-up for getting Jekyll running locally; if you do this in your website--username repository, you'll be good to add/commit/push and have your Jekyll-enabled code work online!

You can find setup instructions at the following links:

Advice and Examples

In this section:

Audio

Under the assets listings above, you might find FreeSound, CCMixter, SoundCloud, and Jamendo especially pertinent. See also the sections on file compression and the link to Courtney Danforth’s soundwriting advice, below.

Audacity Wiki
Members of the community that created the tool have contributed their own tips and tricks; in this case, it comes in the form of a minimally styled wiki. I find it not always as clear as I might like, but many of my initial searches led here, regardless, so it's worth familiarizing yourself with the sections. I do recommend at least starting with their Audacity Tour Guide, and the documentation on how to properly install Audacity and add mp3 export is essential.
10 Tips for How to Keep Audacity from Crashing
The title says it all. I haven't had problems, but if you start to, have a look here.
Advice on field recording, in terms of technique and storytelling
These are part of an assigned homework, but for convenience I'll relist them here: Alison MacAdam's “6 NPR Stories That Breathe Life into Neighborhood Scenes” suggests multiple approaches for rich contextualization in a purely sonic medium. (Note the time skips MacAdam recommends: sometimes a long clip is embedded, but not meant to be listened to in full.) Stuart Fowkes's “The Top 5 Things You Need to Make a Great Field Recording” has advice for what to focus on (and a little bit of what to avoid) as you're recording – and as you're editing. Also check out his more nuts-and-bolts advice on lessons learned, sometimes the hard way, for recording sound in the field.
Recommended smartphone recording apps
The New York Times's Wirecutter review site has a relatively recent roundup of free and nearly free apps for iPhone and Android. Save yourself some time trying to find the app with the least intrusive ads, and start with something pre-vetted and user-tested.
Examples of Soundwriting
There is kind of a glut of good radio out there, especially in the form of podcasts produced by NPR (National Public Radio) or PRX (Public Radio Exchange). You can look for something in the same genre as the piece you want to re-mediate.
I'll assign a few of my favorites over the next week or two.
Also, Courtney Danforth, a professor at the College of Southern Nevada and a prominent voice in favor of soundwriting in composition, has compiled a list of her favorite sound essays and audio stories as part of her three-page handout on Getting Started with Soundwriting.
Ira Glass's composing process
Glass, in case you haven't heard of him yet, is the host of This American Life, one of those much-beloved NPR podcasts I mentioned above. He's been called upon, on a number of occasions, to talk about how he makes the show work. Here he is holding forth on the basic building blocks of storytelling for broadcast.
And here's a longer lecture on "making better radio," punctuated with examples, that he gave back in 1998 (many of the principles – and critiques – still hold).
This may be less relevant for this particular assignment, but I was searching the web for a recording of Ira Glass talking about This American Life and how to write stories for the radio, but instead I found an interview-in-writing – for LifeHacker, of all things – in which he answers the question, "What everyday thing are you better at than everyone else? What’s your secret?" with a really great and concise rendering of how he takes hours of tape and condenses them into a story. So if you've got too much textual material for your audio remediation, and you're not sure how to render it down, click the link above and search for that question.
Examples of Transcripts

A readable transcript for an audio piece is a Good Thing to place alongside the sound file: it's not only more accessible for the temporarily or permanently hearing-impaired, but it also makes your piece easier to search for (and within).

NPR's This American Life does a great job of this, unsurprisingly, and they're relatively straightforward in format, too. Why not check out some of their recommended episodes, including a primer for listeners new to the show that tipped me off to this one on camp. (I was excited by this description: "This one drops you in a place and immerses you there so quickly and happily. Just a deeply cheerful trip into childhood summertime.") Or, for something closer to the length of what you'll be working on – a special episode with 20 acts in 60 minutes?

You access the transcript from the top of each full episode page, but you can jump to specific sections, or "acts," when choosing what to listen to.

On minding P's and S's

One of the more common challenges of recording speech is that sibilants (s sounds) and plosives (especially p sounds) tend to pop out in stark contrast to the sounds around them. Some of the extended early readings in the unit talk about ways to fix this when first recording, but there are also lots of tutorials out there describing Audacity tricks for filtering them out once they're in the mix.

Visual

Under the assets listings above, you might find FontSquirrel and The Noun Project especially pertinent here.

GIMP Tutorials
As with Audacity, the community making the tool knows it best, and so you can find quite a few intro-level tutorials on the GIMP site itself, at www.gimp.org/tutorials. These include "GIMP Quickies" and a tutorial on layer manipulation called "Simple Floating Logo." "Layer Masks" are also pretty important for non-destructive cropping, e.g. if you want to make an image fit into a specified shape, and still be able to edit the contours of what shows through.
GIMP also has a separate user manual.
If you get stuck, I highly recommend Chapter 4: Getting Unstuck!
There's a nice GIMP tutorial series posted to YouTube by LogosByNick, still being updated as of Fall 2020; his main channel also includes things like Common Mistakes New GIMP Users Make, as well as other series on Inkscape (a vector graphics program) and logo design.
Examples of Visual Rhetoric in Action
Thinker/Thought, a collection of academic infographics by Nathaniel Rivers. In addition to being useful for how he handles design elements, quotation, and citation, some of the content deals with ideas on multimedia composing and rhetoric.
Visual Design Lessons
There are lots of tutorials out there. One I've been enjoying is a series of blog posts by designer Julie Thompson on teaching middle-schoolers about principles of graphic design. You can read the whole series (from bottom to top), or jump to lessons on positive and negative space, ways to create visual dominance and hierarchy, or rhythm and movement – even in static images. The exercises are designed for a non-digital space, but the lessons easily apply in digital realms.
Font advice
There's a lot of this about! I'm still looking for the ideal balance of information and succinctness without being too overwhelming or didactic; let me know if you have any recommendations. For now, I'm putting forward How to Choose Fonts For Your Designs (With Examples) as a good-enough solution that includes some useful categories toward the end (playful, professional, etc), reducing your search space to a more manageable volume than the ever-growing lists at, say, Font Squirrel, while still giving you a range of possibilities to choose from.

Web Design

In the assets listings above, you might find Unsplash especially useful here (for banner images), as well as FontSquirrel (check the web licenses) and The Noun Project (for icons)… in addition, of course, to the web frameworks themselves.

Interneting is Hard (but it doesn't have to be)
(WebArchive version, if the above doesn't load)
Your one-stop shop for learning basic web architecture from the ground up, with clear explanations and cute illustrations. I'll assign chapters from this over several homeworks.
Web Design in 4 Minutes
We'll walk through this demo in class; if you're at a loss for what to include in your stylesheet, you can do far worse than adding the basic spacing rules Jeremy Thomas sets up here.
How CSS Selectors Work (CSS-Tricks)

This could be a very useful follow-up to the Interneting is Hard tutorial, or perhaps just a handy reference for some of the more common "advanced" CSS selectors. It starts from basic ways of matching style rules to html elements, and then proceeds to discuss what happens when multiple rules apply to the same element – which rule "wins," or supersedes the other. To sum up, it's not simply which one comes last in the \*.css file (though that also matters): in general, the more narrowly defined rule will still override a more broadly defined one. Read on for more details... and if even that doesn't satisfy you, try their deep-dive in Specifics on CSS Specificity.

Also, it's worth saying that many of my Google searches for solutions to CSS problems lead me to CSS-Tricks, so I figured I'd point it out early and reassure you that it's legit. Some very clear explanations not only of what to do, but why it works – and, often, alternative approaches to the same challenges.

For another one-page roundup of selectors, you might like this CSS Selector Cheat-sheet; many thanks to Thomas Brusilovsky for suggesting this resource!

Flexbox Zombies
Want a more bloodthirsty way to learn layout? Try Flexbox Zombies, an interactive course that's currently free. In it, you imagine the flex layout as aiming a crossbow at undead monsters: you have to position the targets using CSS rules to survive. It's kind of slow-paced, but that's because it's filled with challenges for you to solve, with the idea being that typing out the rules many times will make them second-nature by the end.
CSS Grid Layout tutorial on Medium

This is a great little introduction to the latest CSS approach to layout (display: grid) which is new enough that it's not in the Interneting is Hard tutorial, but old enough that it's now has almost universal browser support. (As with many things, older versions of Internet Explorer may not work with grid displays. But does anyone still use old versions of IE?) What I like about this particular tutorial is that it's embedded not only with images, but with short screen-capture GIFs that demonstrate in a very immediate way what happens to the layout when a new CSS rule is added.

Author Rafaela Ferro also does a great job of keeping the tone light by focusing on cute pictures of dogs. I also recommend her follow-up tutorial on using CSS Grid to create responsive layout – which is, as she argues, far easier to do with Grid than with Flexbox (let alone Float).

Grid By Example

Want more grab-and-go skeletons of grid layouts? This resource, from Rachel Andrew, includes some nice, short videos and quite a lot of CodePens you can mess around with and then copy into Visual Studio Code, so you don't have to start from an empty editor.

An Interactive Guide to CSS Transitions
An Interactive Guide to Keyframe Animations
Looking to up your game from a static environment users just move through, to an environment that itself responds with movement when they interact with it? These two tutorials by developer Josh Comeau break down the rules, the reasons, and the mental models that will help you learn to animate elements of your site – all within the comfort and speed of CSS. He's also the teacher behind "CSS for JS Developers," so there's plenty of detail for those who want it, even as the basics stay front and center for newcomers.
CSS Tricks

Often, when I'm searching the web for advice, this site will come up in the top 5; and when it doesn't, adding "css-tricks" to my search terms often gets me another valuable perspective on the issue. There are way more excellent pages than I could really put here – just about one for every design challenge you want to try to solve using CSS alone (plus a few that call for JavaScript).

Here are a few that I've found especially helpful or interesting:

CSS Auto-Prefixer

A dirty little secret of CSS that I sometimes try to pretend doesn't exist: different browsers implement CSS rules in different ways. Most of the time, the differences are minor, but every now and then, they're so out of sync that you might as well be writing a different styling rule. And so a convention has arisen of browser prefixes to automatically adjust for the shifts that occur among Chrome, Safari, Firefox, and Microsoft browsers like Edge and IE. I tend to gloss over them in class because (a) they're annoying, (b) they clutter the code, and (c) I just sort of like to put out into the universe that we should be adopting universal web standards; and most of the time, that's more or less okay. But not always.

Luckily, there are post-processors that will take standard-issue CSS and add the browser prefixes where you need them. If you go to autoprefixer.github.io/, you should be able to just paste in your stylesheet on the left, copy the output from the right, and save it as your new stylesheet – and everything should just work fine from that point on.

Of course, this is 100 times easier if you have all your CSS in the stylesheet, rather than in the HTML! But that's what I (and the internetingishard tutorial) have been encouraging all along, right?

caniuse.com
CSS is a living language, and the ongoing development of new CSS capabilities means that some browsers are slower to adopt the most current standards than others. To confirm that a particular rule will work across browsers, you can check here: just enter the CSS attribute you wish to set in the big "Can I use ______?" search box at the top of the page.
LinkedIn learning tutorials

As with GIMP and Audacity, there are plenty of tutorials in the LinkedIn Learning library that you have access to through my.pitt.edu. If, for example, you're interested in embedding audio or video media on your website, you might want to try the Learning Web Audio and Video tutorial by Joseph Labrecque, which covers the essential options, including native HTML5 <audio> and <video> elements.

htmlreference.io
cssreference.io
There are a *lot* of html elements and CSS attributes that you'll find in your travels through the web. As with book literacy, you'll pick up the vocabulary mostly by encountering them in the world, on websites, not by starting with a dictionary. But when you do find them, you'll want a good dictionary where you can look them up and learn more about how they're supposed to work. These are pretty well organized, and (unlike some of the "official" documentation) usually give you visual examples of what the elements and rules mean and do. And when you do want that official documentation, you can find it by clicking on the "MDN" link at the top right of any definition page.
Optimizing Images for Website Performance

You can find some beautiful free images out there, at very high resolution – and your own digital camera (even the one on your phone) probably defaults to a ridiculously high number of pixels, too. All those pixels come at a cost. If you find that your site is loading slowly, and especially if you see the images appear with some lag behind the text, you may want to scale down.

Luckily, you have a tool that can help you do it: GIMP! Check the link above for some tips on pixel counts, resolutions (pixels per inch), and jpeg compression quality.

Web Developer Plugins
This is a browser plugin, available for Chrome, Firefox, and Opera, that allows you to test your web pages by manipulating them in various ways – by temporarily turning off JavaScript, for example, or replacing all images with their alt text. (I've found the latter tool particularly useful.) It also includes html and css validators, to help you find typos that are throwing off your code.
Visual Studio Code

As mentioned in class, this is a widely popular syntax-aware text editor, suitable for all your web development needs. It's particularly valuable when you power it up with extensions written by the open source community to add new functionality. In general, if there's anything you think VS Code should be able to do, chances are someone's already made it happen. To search for, install, or otherwise manage extensions from within VS Code, go to View > Extensions or click on the sidebar icon that looks like building blocks.

Some extensions I expect you'll find useful:

  • Close HTML/XML tag, by Compulim: adds a keyboard shortcut to automatically detect the last-opened html tag, and close it. Useful for proofreading!

  • Auto Rename Tag, by Jun Han. If you change an h2 to an h3, this will automatically update the corresponding closing or opening tag so you don’t end up with a mismatch.

  • CSS Peek, by Pranay Prakash. Detects definitions for CSS ids and classes from inside your HTML files, by looking in linked stylesheets.

  • Intellisense for CSS Class Names in HTML, by Zignd. Offers autocomplete for CSS class names from linked stylesheets while you’re working in HTML.

  • HTML Preview, by George Oliveira (note that the more-frequently downloaded one, by Thomas Haakon Townsend, is no longer being maintained). Lets you see a preview of your HTML file without having to head to the browser (though you may still want to, for inspector reasons!)

  • Auto-Close Tag, by Jun Han. Every time you open a new HTML tag, the corresponding closing tag will be generated automatically. A lot of people love this, but I find it annoying; your mileage may vary.

Read the README inside any installed package for tips on how to use it. This will open just like any other file, so you can move it, split it, etc.

How to hide your website from search engines

You can make your website accessible to the world by using GitHub Pages, which is great for sharing personal or professional sites with friends, family, and potential employers. But if you've made a website for a business that doesn't actually exist, you might not want the link to spread too widely, lest someone try to buy something you can't yet sell them.

In that case, you'll want to create a file called robots.txt to tell all the webcrawlers (from Google and Yahoo, not from Marvel) to leave your site out of their indexes. See moz.com/learn/seo/robotstxt for more information.

File Compression

If you’re having trouble uploading large files to GitHub or through email, you can try compressing the files. But while most computers come with built-in compression algorithms, they tend not to be very good. Luckily, there are several excellent and free applications that will happily shrink your file sizes. Here are some recent roundups:

Twine / Interactive Narrative

Twine wiki
The starting point on your Quest to Learn Twine. Lots of useful info here, including descriptions of the various "story modes" (alternate syntaxes) and their relative advantages. Pay attention to the syntax being used in any particular code snippet!
Harlowe Documentation
This is the official documentation of the default editing mode for Twine 2.1. Head here if you're looking for ideas about what Twine is capable of under the hood.
Intro to Twine 2.0
This is a basic walkthrough of how to set and call variables in Harlowe – and why it's to your advantage as a storyteller.
A slightly more advanced intro to Twine 2.1
This has some great advice on how to organize your files so you can reliably include images and music, without needing to summon them from across the web (where someone else might take them down). But be warned: a lot of the example scripts here use SugarCube, an alternative syntax to the default Harlowe. Use the tutorial to get a sense of what's possible, but then look up the equivalent syntax in the Harlowe documentation wiki, above.

Logo Design

Some people have expressed interest in designing logos; this tutorial series seems like it might be useful:

Other Resource Roundups

Especially in the realm of digital production, there’s no need to reinvent the wheel; just as there are many excellent tutorials and sites on which to locate assets, there are many excellent lists of such tutorials and sites. Here are a few to draw on:

  • Noel Tague's bag of tricks is quite extensive, and includes sections on fair use, on archives of materials you can use or cite, on strategies for working with audio and video, and links to free / open source software.
  • Annette Vee's CDM resources page includes guidance on GitHub and Markdown (a widely used shorthand for HTML, with a bunch of variants a.k.a. "flavors").
  • Kelsey Cameron, another veteran Composing Digital Media instructor, has posted her own preferred links; the Sound section may be especially useful, as I've modeled our audio unit on hers.
  • Courtney Danforth has a full three pages of resources on Getting Started with Soundwriting that I expect will be useful in the audio unit.

As the semester goes on, we can identify our own list of favorites!