class: middle center # ~ Digital Impermanance ~ ## documenting & archiving your work --- class: middle ## Documenting your work One of the most important steps in preserving and future proofing your work is to add documentation to your javascript, html, and css. Use comments to note what functions or particularly dense sections of code do. Add comments to you html and css to help explain why you are using certain elements or selectors for. It's easiest to do this as you're coding— but some documentation at the end of the project is better than nothing. When you return to the project months or years later, it'll be so much easier to pick up and fix anything that might have stopped working with documentation. --- class: middle A few of the following strategies might be obvious.. but there are still lots of little details that can improve your documentation. --- class: middle ### Screenshots In addition to adding text documentation to your project, you should take high quality screenshots of a selection of site views. A few things to consider when creating screenshots: + Do you want to include the browser chrome? This can help date and add context to your screenshot. + If you're using a Mac, the baked in dropshadow can make it harder to work with the images in the future. (cmd + shit + 4 and then press space) + Firefox has a built in [screenshot utility](https://screenshots.firefox.com/) that can take screenshots of elements or a whole page. + Give the files a meaningful name. Use a naming scheme aka `PUCD_Final_<n>.png` and store them together so that they're easier to locate in the future. --- class: middle ### screen recordings Along with screenshots, screen recordings can be really useful to showcase both the design and interactions in a controlled setting. .pect-50[] Quicktime has a nice screen recording utility. Practice a few times and then make a recording. --- class: middle If you'd like to display it online, keep the full quality version and use a program like [Handbrake](https://handbrake.fr/) to make a lower resolution copy for web publishing. It can also be useful to make a series of videos demonstrating different aspects of the site instead of one long video. --- class: middle center ### link rot and the case for web archiving .pect-100[] --- class: middle While things online might seem to provide the sense of endless connectivity and availability, the web is a fragile and interdependent system. One of most fundamental and first things we learned were links. Links to other sites, images, videos, javascript files, apis.. We build our websites often with deep dependencies on other sites and resources online. --- class: middle These resources we rely on are exceedingly susceptible to disappearing: .pect-100[] .footnote[Graphic from <a href="https://perma.cc">perma.cc</a>] --- class: middle Sometimes it's easy to recover or fix `link rot`. But other times, like when a weather API you relied on for a project shuts down, there isn't much you can do, other than find a new API (if you're lucky) and rewrite your code... That's why it's essential to `archive` your work in addition to documenting it. Web archives preserve and afford the presentation of your site in the exact way it first functioned for long long time*. .footnote[*In the archives world, we refrain projecting stability eternally... and you should always be critical of a tool or service does.] --- class: middle Beyond link rot, it's also important to web archive your projects to preserve the way you intended them look and function. When you hand over a site you designed or built to a client, they'll inevitably make changes or alter it in ways that might compromise your original vision. Or browsers might deprecate a technology you utilized, like Flash. ...or you might just want to save a [beautiful accident](https://webrecorder.io/_embed/m4rk3r/cool-old-web/20150313041327/http://www.sewingandembroiderywarehouse.com/embtrb.htm) before it's [fixed or removed.](https://www.sewingincanada.com/troubleshooting/) <span class="rotate-90">: )</span> --- class: middle center ### How, and who, is Archiving? --- class: middle ## The Internet Archive The Internet Archive is one of the earliest and most thorough web archives. Captuing the web since 1996, the publicly accessible [Wayback Machine](https://web.archive.org) is one of the best resources for viewing past websites. The Internet Archive operates a `web crawler` that regularly searches and copies a large portion of the web in frequent intervals to capture a fairly detailed snapshot of the web. This requires Petabytes (that's 1 petabyte = 1,000,000 gigabytes) Even with all that storage, they are only able to capture a shallow archive. It would be impossible to make a exact copy of the web every hour.. --- class: middle center Let's quickly browse the [Wayback Machine](https://web.archive.org) --- class: middle A couple years ago I created a small tool called `lan before time` to take screenshots of Wayback Machine results for a website you provide. It loops over every available archive and converts them into a simple animated gif. It's kind of a nice way to see how web aesthetics have shifted over time, from narrow columns to cater to small screens to our current web with responsive, expanded websites. --- class: middle center .pect-100[] --- class: middle center .pect-100[] --- class: middle center .pect-100[] --- class: middle Other web archives: + [Portugese Web Archive](https://arquivo.pt/?l=en) + [Icelandic Web Archive](https://vefsafn.is/index.php?page=english) + [UK Web Archive](https://www.webarchive.org.uk/) + [and many more](https://en.wikipedia.org/wiki/List_of_Web_archiving_initiatives) And preservation projects: + [Restorativeland](https://restorativland.org/) + [GifCities](https://gifcities.org/) + [One Terabyte of the Kilobyte age](https://oneterabyteofkilobyteage.tumblr.com/) --- class: middle As great as it is what the Internet Archive and other sites are doing, it won't help us archive our own work... It's hard to extract archives from the Internet Archive* so they are not a reliable way for you to archive your work for personal keeping. .footnote[<a href="https://github.com/hartator/wayback-machine-downloader">*but not impossible</a>] --- class: middle ## Webrecorder As I mentioned at the beginning of our class, I work at [rhizome.org](https://rhizome.org) on a personal web preservation tool called [Webrecorder](https://webrecorder.io) ...and now it's time for me to shamelessly plug this tool!! --- class: middle Just kidding, Webrecorder is a part of small group of tools that are being developed to make personal web archiving accessible to everyone. Let's cover a few: + [Webrecorder](https://webrecorder.io), [Webrecorder Desktop](https://github.com/webrecorder/webrecorder-desktop/releases/latest) + [WAIL](https://machawk1.github.io/wail/) And some more advanced/command line tools: + [httrack](https://www.httrack.com/) + [heritrix](https://github.com/pirate/ArchiveBox/wiki/Web-Archiving-Community) + [squidwarc](https://n0tan3rd.github.io/Squidwarc/) + [wget](https://www.gnu.org/software/wget/) + [and many more...](https://github.com/iipc/awesome-web-archiving) --- class: middle Utilizing all these approaches will cover you on all aspects, from being able to show documentation (images, text), showcase functionality (video) and maintain a restageable version of your site for a long time to come (web archive). Speaking from experience, the hardest part of creating thorough documentation of a project is *recognizing the need* at the time when everything is fresh in your head and working as intended. There are a lot of projects I wish I could go back and fix, but they are unfortunately lost to time. This Pitchfork piece called [A Strange Visitor](https://webrecorder.io/_embed/m4rk3r/personal-work/20170425015744/http://pitchfork.com/features/cover-story/reader/aphex-twin/) that I worked on is a simple example. By the time I realized (years later) I should archive this project, it was too late. The subscription for the fonts ran out, which were loading via adobe typekit. --- class: middle center ## In conclusion: archive archive archive~ .rise[and have a great summer, stay safe & be well <span class="rotate-90">: )</span>] .grid[] .grid[] .grid[] .grid[] .grid[] .grid[]