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).

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
A MacOS system extension that allows you to record directly from any app into Audacity by piping sound output/input through a new "channel". (I suspect something similar is available for PCs but I'm not sure yet what it is. Let me know if you find it!)

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.
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?

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

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.
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.) The latest version, Bootstrap 4, uses Flexbox and is therefore now 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).

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 step-by-step
Jekyll on GitHub from scratch
Jekyll Quickstart (aka your quickest reference after setup)

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 above 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!

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](https://citiesandmemory.com/2014/03/ten-top-simple-field-recording-tips/), 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.

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)
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!

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 Atom, so you don't have to start from an empty editor.

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?

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.
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 is really doing on the page. 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.
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.
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.
Atom text editor

There are lots of great coding-friendly text editors out there, and even many excellent free ones. Essential features to look for are syntax highlighting and the ability to view several files side-by-side.

Lately I've been pretty into Atom: it's cross-platform; it uses your existing file system for project management (rather than inventing its own file system); it has flexible panes for viewing; it's open source and extendable – and thus has lots of packages out in the world, including for rendered HTML or Markdown previews. Plus, it can work directly with git and GitHub, without even having to leave the editor.

I'm still in the market for good tutorials on working with Atom, but this one from Level Up looks pretty decent; essential episodes include #3 The Atom Interface with Tips and Tricks and #6 Project Management In Atom.

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!