The Art of Literate Projecting

layout: true
background-image: url(img/RStudio-Logo-Flat.png)
background-position: 0% 100%;
background-size: 10%

---
class: title-slide, center, middle
background-image: url(img/alberto-triano-rL7BHmjUV50-unsplash.jpg)
background-size: cover

# The Art of Literate Projecting

## Alison Hill &#183; RStudio

### @apreshill &#183; [alison.rbind.io](https://alison.rbind.io/talk/2019-ysc-keynote/)

???

Hello.

I'm very excited to be here in Australia, and especially to be here in Canberra speaking with you all today.

I want to thank the conference organizers for the invitation, and especially to Dr. Emi Tanaka.

And today I want to talk to you all about what I'm going to refer to as the "art of literate projecting." This is not something you should already have heard of, but I hope at the end of my talk you'll know why I think it is so important.

This is a little play on words if you are familiar with the idea of "literate programming", and we'll talk about that too.

But first, let me tell you a little bit about me..

---
class: middle, center, inverse
background-image: url(img/intro.png)
background-size: cover

???

I am a data scientist and professional educator at RStudio, a software company that makes it easier for you to do data science with the statistical programming language R. I'm based out of the United States in the Pacific Northwest.

Before joining RStudio, I was an academic for the last 10 years, since I got my PhD in developmental psychology. I was an assistant then associate professor, and I was active in both teaching and research, primarily at a leading academic medical center in Portland, Oregon.

My research focused on children with autism, which I studied for about 15 years.

Which sounds like a very very very long time when I say that out loud.

And it also sounds very far removed from my career today.

But it is actually not that far off, given the way that I was doing my research and teaching in the years leading up to my career switch.

Now I'd like to start off by playing a little game.

---
class: middle, center, inverse

1

# Talk about yourselves

# (2 minutes)

???

I want you to turn to the person sitting behind you, and tell each other about a project you did.

---

---
class: middle, center, inverse

2

# 📱 Google each other! 📱

# (2 minutes)

---

---
class: middle, center, inverse

3

# 🔗 Send a lifeline 🔗

# (1 minute)

---

---
class: middle, center

.left-wide[
# .large[.fancy[How this might feel...]]
]

.right-narrow[
<video width="480" height="600" controls="controls">
<source src="img/cat.mp4" type="video/mp4">
</video>
]

---
class: top, center, inverse
background-image: url(img/joseph-perez-EH3s7UzsmjI-unsplash.jpg)
background-size: cover

.footnote[[Joseph Pérez](https://unsplash.com/photos/EH3s7UzsmjI)]

# February &mdash; April, 2017

???

Now I'm guessing that for most of you, this wasn't easy

And that's OK because it doesn't matter right now

So in early 2017, I had a baby. Now THAT is a project :)

But seriously, all my friends told me that I should try to have a personal project to do while I was on my maternity leave to keep my brain occupied- something for me and not for my baby. In the US, we get 3 months leave so I thought I had plenty of time...

---
class: center, middle
background-image: url(img/IMG_2289.jpg)
background-size: contain
background-position: left

.pull-right[
<img src="img/blogdown.png" width="80%" style="display: block; margin: auto;" />

]

???

What I didn't understand was that maternity leave is not a holiday. I basically had an hour a day when I could count on my baby taking a nap and when I could just sit.

And where I sat was at my laptop, determined to build my own personal website in an hour a day for 3 months.

Sounds feasible, right?

It was HARD. The first week I made a website a day that ended up getting trashed.

But eventually I did it. But not only that, I lived to talk about it, which is a small miracle. And not only that, I lived to blog about it, because I realized as I was doing it all that I cannot be the only other person in this world who finds this hard.

If me writing down how I did this can help one other, one single person, then how amazing would that feel?

It's better than just me.

---
class: center, middle
background-image: url(img/blogdown-first-post.png)
background-size: contain
background-position: left

.pull-right[

> "I did not want to learn more about a lot of things! For instance, the nitty gritty of static site generators and how domain names work.

> I am a new mom, and just in the process of writing all this up, I filled up my tea mug twice with ice cold water, and filled my water bottle with scalding hot water."

<https://alison.rbind.io/post/2017-06-12-up-and-running-with-blogdown/>

]

???

So it took me some time to write it up my scribbled notes into an organized tutorial, and I finally published it to my blog in June.

But after two days, I realized that no one would find my post or my site if I didn't tell them about it.

---
class: middle, center

![](img/yihui-gitter.png)

???

Since I had used the blogdown package, I decided to share my post in the online support room the developers had built for the package.

And on the same day, the developer of the package responded with this message.

I was elated. I thought I had maybe written up something so stupidly simple that I would "out" myself as a non-programmer. Clearly someone who has no business using this tool and building a website.

---
class: center, bottom
background-image: url(https://bookdown.org/yihui/blogdown/images/cover.png)
background-size: 30%

<https://bookdown.org/yihui/blogdown/>

???

Pretty soon I started needing to use all of my existing skills and then some to contribute to this book.

So my one little blog post led me to really grow up my programming skills, especially using version control, very fast.

---

???

but my message today is not that I wrote a nice blog post that had surprising side effects, although that is true.

What I want to tell you about is what I learned from doing that, and how having positive side effects are basically unavoidable once you start literate projecting.

What did I learn?

I learned there is power in projecting.
and that creativity is a way of operating.
and that that small extra effort to make it literate is WORTH IT.

So let's back up a bit...

---
class: middle, center
background-image: url(img/jazmin-quaynor-bYOi200uQ6w-unsplash.jpg)
background-size: cover

# .fancy-dark[So, what is a project?]

---
class: middle, center
background-image: url(img/def-project.png)
background-position: middle, center
background-size: 80%

.footnote[https://www.dictionary.com/browse/project]

---
class: inverse
background-image: url(img/projects-kitties.png)
background-position: left
background-size: contain

---
background-image: url(img/project-split.png)
background-size: cover

---
class: middle, center

# .fancy-dark[Projecting]

.footnote[https://www.dictionary.com/browse/projecting
]

???

The word "project" actually originally meant "before an action".

---
class: middle, center

# What does this have to do with .fancy[.large["literate programming"?]]

???

What is it?

---
background-image: url(https://upload.wikimedia.org/wikipedia/en/thumb/6/62/Literate_Programming_book_cover.jpg/220px-Literate_Programming_book_cover.jpg)
background-size: contain
background-position: middle center
class: inverse

???

---
background-image: url(img/diagrams/Slide1.png)
background-size: cover

---
background-image: url(img/diagrams/Slide2.png)
background-size: cover

---
background-image: url(img/diagrams/Slide3.png)
background-size: cover

---
background-image: url(img/diagrams/Slide4.png)
background-size: cover

---
background-image: url(img/diagrams/Slide5.png)
background-size: cover

---
name: knuth
class: middle, center, inverse
background-image: url(img/knuth-yoda.jpg)
background-size: contain
background-position: right

.right[.footnote[[Photo](https://www.nytimes.com/2018/12/17/science/donald-knuth-computers-algorithms-programming.html)]]

---
template: knuth

.pull-left[

.fancy[.large["I believe that the time is ripe for significantly better documentation of programs,]]
 
 
 
.fancy[.large[and that we can best achieve this by considering programs to be works of literature."]]

&mdash; [Donald Knuth](http://www.literateprogramming.com/knuthweb.pdf)

]

---
background-image: url(img/diagrams/Slide6.png)
background-size: cover

???

Knuth also noticed that when he did this, his software got better. Because he had been writing them to whole time with the intent of someone else being able to understand it. So not only was he able to enjoy working on it more, but his final product improved too.

Now, I never really thought literate programming was for me,
because I'm not a programmer.

And to be honest, talking about it felt a little uncomfortable, 
because I have realized that while programming isn't my job,
projecting is. And I'm really good at that.
Let me tell you what I mean.

---
background-image: url(img/diagrams/Slide7.png)
background-size: cover

---
background-image: url(img/diagrams/Slide8.png)
background-size: cover

---
background-image: url(img/diagrams/Slide9.png)
background-size: cover

---
background-image: url(img/diagrams/Slide10.png)
background-size: cover

---
background-image: url(img/diagrams/Slide11.png)
background-size: cover

---
background-image: url(img/diagrams/Slide12.png)
background-size: cover

---
background-image: url(img/diagrams/Slide13.png)
background-size: cover

---
background-image: url(img/diagrams/Slide14.png)
background-size: cover

---
background-image: url(img/diagrams/Slide15.png)
background-size: cover

---
background-image: url(img/diagrams/Slide16.png)
background-size: cover

---
class: middle, center, inverse

> .fancy[.large[...the work we’re doing internally at Netflix leverages images, gifs, playful color and novel visual methods to delight users...]]

.footnote[From [_3rd Wave Data Visualization_](https://towardsdatascience.com/3rd-wave-data-visualization-824c5dc84967) by [Elijah Meeks](http://elijahmeeks.com/#about)]

---
background-image: url(img/diagrams/Slide17.png)
background-size: cover

---
background-image: url(img/diagrams/Slide18.png)
background-size: cover

---
background-image: url(img/diagrams/Slide19.png)
background-size: cover

???

this is a way to "grow up" your skills *productively* in a way that pays off now (networks) and later (jobs)

---
background-image: url(img/diagrams/Slide20.png)
background-size: contain

---
template: knuth

.pull-left[

.fancy[.large[Science is what we understand well enough to explain to a computer.]]
 
 
.fancy[.large[Art is everything else we do.]]

&mdash; [Donald Knuth](https://www.math.upenn.edu/~wilf/AeqB.html)

]

---
background-image: url(img/John-Cleese-poster.jpg)
background-position: left
background-size: contain
class: middle, center, inverse

.pull-right[

> .fancy[.large[Now here's the negative thing:]]

> .fancy[.large[Creativity is not a talent. It is not a talent, it is a way of operating.]]

> &mdash; [John Cleese](https://genius.com/John-cleese-lecture-on-creativity-annotated)

]

---
class: middle, center

.pull-left[
<img src="img/giraffes/Notebooks.jpg" width="100%" style="display: block; margin: auto;" />

]

.pull-right[
<img src="https://tinystats.github.io/teacups-giraffes-and-statistics/images/02_bellCurve/Painter.png" width="100%" style="display: block; margin: auto;" />
]

???

John Cleese described two modes of working. One is the closed mode. This is your get it done mode. And it is a good mode to get into, when you are really deep into your work.

But there is another mode, the open mode. In this mode, you explore, you create, you experiment. And Cleese argued that to make anything creative, you need both modes. You need that freedom to make. And you need to see your project through other people's eyes, through different lenses.

Often times, literate projecting was the way for me to be creative. Reports, papers, and many formal talks can be so prescribed, I found this to be an outlet for creativity. And I've found, that doing that helps me to make it better.

---
background-image: url(img/yours-shelf.jpg)
background-size: contain
background-position: middle, center

???

Because even if you HAD a website, that is like a blank slate. You need to fill the shelves. You need to provide pointers from that website to you- what you are about, what you can do.

---
background-image: url(img/yours-rmd.jpg)
background-size: contain
background-position: middle, center

???

And as a data scientist, what I think goes on your shelves are your projects. And you don't have to have a website to fill your shelves, although it can make it easier because it gives you not just a place to put things, but a permanent place to put things.

So here is an example.

---
background-image: url(https://alison.netlify.com/rlm-sad-plot-better/images/version1.png)
background-size: contain
class: inverse

???

Through one of my collaborators, I became the parent of a certain plot, really more of a graphic, that was used to explain a methodological concept in a book chapter.

Now the plot felt more like the proverbial step-child at first- I didn't own it yet. It didn't feel like mine.

---
class: middle

---
background-image: url(img/sadplot/bookshelf.jpg)
background-size: cover

---
class: middle, center, inverse

# &#10087; The end &#10087;

???

Now this would be a pretty sad ending to this project story.

Because I put a lot of myself into that book chapter, and while it has been cited a lot, at the end of the day I didn't have an engaging story to tell and only a few kind of stale new lines on my CV.

I decided to give a talk. And I decided to give a talk where I would break down one, just one, of the figures I made for that book chapter.

I thought it would be fun to retrace my steps for taking a sad plot and making it better.

---
class: inverse

???

I gave the talk to approximately 20 people on a Friday in the basement with something going on with the projector screen.

---
class: inverse

---
class: inverse

???

I loved the slides I made. Really. Oh you should have seen them. They were good. Really.

---
class: middle, center, inverse

<https://alison.rbind.io/talk/2018-ohsu-sad-plot-better/>

???

But the real story is that I did some things that I hadn't done before. I was giving a talk- like I'd done before.

But as I began to make my slides, I got frustrated because I was manually inserting all these lovely ggplot2 graphs into my powerpoint slides. And it felt wrong.

I decided to make my slides in R, knit them to html, and put them online.

Then I did something really crazy. I walked back to my office and decided to take 15 minutes to make this gif from my slides. I thought, might as well share it on twitter.

And what I got out of that little exercise of making my slides was way much more than that single project ever got me.

---
class: middle, center, inverse

# "We've seen your resume and are very excited to talk with you!"

???

So fast forward about 6 months...

---
class: middle, center

To help us both learn more about each other and get the most out of this conversation, please provide us with at most 3 samples of your work.  
This could include (but is definitely not limited to):

### code,   
### visualizations,  
### presentations,  
### projects,  
### papers,  
### or links to websites.

---
class: middle, center

To help us both learn more about each other and get the most out of this conversation, please provide us with at most 3 samples of your work.  
This could include (but is definitely not limited to):

### code, ✔️ `project`  
### visualizations, ✔️ `project`  
### presentations, ✔️ `project`  
### projects, ✔️ `project`  
### papers, ✔️ `project`  
### or links to websites. ✔️ `project`

---
class: middle, center

To help us both learn more about each other and get the most out of this conversation, please provide us with at most 3 samples of your work.  
This could include (but is definitely not limited to):

### code, ✔️ `project` &rarr; 😱  
### visualizations, ✔️ `project` &rarr; 😱  
### presentations, ✔️ `project` &rarr; 😱  
### projects, ✔️ `project` &rarr; 😱  
### papers, ✔️ `project` &rarr; 😱  
### or links to websites. ✔️ `project` &rarr; 😱

---
class: middle, center, inverse
background-image: url(img/ship-done.png)
background-size: contain
background-position: left

---
background-image: url(img/ship-split.png)
background-size: cover

---
class: bottom, center, inverse
background-image: url(img/job_interview_office_space.jpeg)
background-size: cover

# Guess what

???

So during one in person interview, I found out after arriving on site that I was scheduled to give a talk that afternoon.

---
class: middle, center

## Job tenure by age group in Australia today

| Age group | Average job tenure |
|:---------:|:-------------------:|
| < 25 | 1 year; 8 months |
| 25-35 | 2 years; 8 months |
| 35-44 | 4 years |
| 45+ | 6 years; 8 months |
| Mean | 3 years; 4 months |

.footnote[Source: HILDA, Department of Employment; table reproduced from [McCrindle Research](https://mccrindle.com.au/insights/blog/job-mobility-australia/)]

???

So here is a hard truth.

In 3 years, most of you will not be in the same job that you are in now. This means that you will need to be able to do what you just did now.

Now, instead of feeling downtrodden at all the extra things you think I'm telling you to do and learn about, I want you be hopeful. Because there are lots of reasons for hope here.

---
template: knuth

.pull-left[

.fancy[.large[I suddenly have a collection of programs that seem quite beautiful in my own eyes,]] 
 
 
.fancy[.large[and I have a compelling urge to publish all of them so that everybody can admire these works of art.]]

&mdash; [Donald Knuth](http://www.literateprogramming.com/knuthweb.pdf)

]

---
class: bottom, center
background-image: url(https://summer-of-blogdown.netlify.com/assets/summer-header.png)
background-size: contain

<https://summer-of-blogdown.netlify.com/>

---
background-image: url(https://ysc-rmarkdown.netlify.com/slides/images/awesome-blogdown/maya.png)
background-size: cover

---
background-image: url(https://ysc-rmarkdown.netlify.com/slides/images/awesome-blogdown/joyce.png)
background-size: cover

---
background-image: url(https://ysc-rmarkdown.netlify.com/slides/images/awesome-blogdown/dan.png)
background-size: cover

---
background-image: url(https://ysc-rmarkdown.netlify.com/slides/images/awesome-blogdown/dewey.png)
background-size: cover

---
background-image: url(https://ysc-rmarkdown.netlify.com/slides/images/awesome-blogdown/therese.png)
background-size: cover

---
background-image: url(https://ysc-rmarkdown.netlify.com/slides/images/awesome-blogdown/desiree.png)
background-size: cover

---
template: knuth

.pull-left[

.fancy[.large[There is no telling what will happen if lots of other people catch `WEB` fever and start foisting their creations on each other.]]

&mdash; [Donald Knuth](http://www.literateprogramming.com/knuthweb.pdf)

]

---
background-image: url(img/giraffes/giraffe_forest_social.jpg)
background-size: cover

???

but that is just one talk, a small project, let's take another example...

---
class: middle, center

# Resume

<hr>

## RESEARCH & DATA SCIENCE EXPERIENCE

Developed an online module series using R Markdown and GitHub Pages to teach statistics and R for students and scientists as part of a collaborative project with colleague.

---
background-image: url(img/giraffes/giraffes-syllabus.png)
background-size: contain
background-position: right
class: middle center

.pull-left[
## Proposed syllabus
]

---
background-image: url(img/giraffes/giraffes-cover.png)
background-size: contain
background-position: top
class: center, bottom

<https://tinystats.github.io/teacups-giraffes-and-statistics/>

---
background-image: url(img/giraffes/giraffe_avatar.jpg)
background-size: contain
background-position: middle, center
class: middle, center

.pull-left[
HASSE WALUM
]

.pull-right[
DESIRÉE DE LEON
]

???

use Desiree's project to talk about open vs closed workflows

---
background-image: url(img/shiba-inu.jpg)
background-size: contain
background-position: middle, center

???

here is the thing- putting it all together helps you see the gaps better. And you need to budget that time in for your own headspace.

it is very easy to fall into the trap of nestling down.

---
background-image: url(img/giraffes/giraffe_lineup4.jpg)
background-size: contain
background-position: middle, center

???

"We saw something online that made it sound like you could make a website using R Markdown"

"characters and narrative were not initially part of the plan."

"it wasn’t until we actually started building stuff that we decided to use some sort of fun simulated data about animals so that people wouldn’t be working with meaningless “x” and “y” variables"

"When brainstorming new modules, we would start with what our ideal product would look like, i.e. start with ideas for interactivity and animations that we had no idea how to build.

Then an intense process of googling would follow to see if any of what we wanted was possible with R Markdown. That would then allow us to come up with cooler ideas for future modules."

---
background-image: url(img/david-clode-S3sJTdymsp0-unsplash.jpg)
background-size: cover
class: middle, center, inverse

# And now, a warning

---
class: middle, center

.left-wide[
# .large[.fancy[If you wait...]]
]

.right-narrow[
<video width="480" height="600" controls="controls">
<source src="img/welder.mp4" type="video/mp4">
</video>
]

---
class: top
background-image: url(img/georgia-de-lotz-788863-unsplash.jpg)
background-size: contain
background-position: left
name: todo

.pull-right[

## .large[.fancy[Your to-do list]]

]

---
background-image: url(img/giraffes/start-small.png)
background-size: 50%
background-position: top left

.pull-right[

## .large[.fancy[Your to-do list]]

]

.pull-right[

1
 Start small

If you did it, it counts...

+ Gave a good talk

+ Learned a new thing

+ Made a good plot

+ Wrote good, clear code

+ Presented a good poster

+ Wrote a good paper

]

---
background-image: url(img/giraffes/cave.png)
background-size: contain
background-position: top left

.pull-right[

## .large[.fancy[Your to-do list]]

]

.pull-right[

2
 
Make it literate

Lived experience = linkable experience

+ [GitHub Pages (free)](https://pages.github.com/)

+ [Netlify (free)](https://www.netlify.com/)

+ [Figshare](https://figshare.com/)

+ [A `README` file](https://github.com/noffle/art-of-readme)

]

---
background-image: url(img/giraffes/painter.png)
background-size: contain
background-position: top left

.pull-right[

## .large[.fancy[Your to-do list]]

]

.pull-right[

3
 
Make it better

What do you need to learn to make it better?

+ HTML

+ Publishing

+ CSS

+ JavaScript

+ SEO

]

---
background-image: url(img/giraffes/celery.png)
background-size: contain
background-position: top left

.pull-right[

## .large[.fancy[Your to-do list]]

]

.pull-right[

4
 
Get better at it

Look at your toolkit- does it help you get where you need to?

Look at other literate projectors- do they have tools you don't? Can you switch?

]

---
class: top
background-image: url(img/georgia-de-lotz-788863-unsplash.jpg)
background-size: contain
background-position: left
name: todo

.pull-right[

## .large[.fancy[Your to-do list]]

1
 Start small

2
 
Make it literate

3
 
Make it better

4
 
Get better at it

]

---
class: middle, center
background-image: url(img/giraffes/giraffes-thanks.png)
background-size: contain
background-position: right
name: thanks

.pull-left[

# .large[.fancy[Thank you!]]

Slides created via the package [**xaringan**](https://github.com/yihui/xaringan).

The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](http://yihui.name/knitr), and [R Markdown](https://rmarkdown.rstudio.com).

Slides deployed via [Netlify](https://www.netlify.com/) [![Netlify Status](https://api.netlify.com/api/v1/badges/fdb810c2-9ed4-46ae-93a8-27c940b435eb/deploy-status)](https://app.netlify.com/sites/alison/deploys).

This work is licensed under a Creative Commons Attribution- ShareAlike 4.0 International License. To view a copy of this license, visit:

https://creativecommons.org/licenses/by-sa/4.0/

]

---
class: middle, center
background-image: url(img/giraffes/giraffes-thanks.png)
background-size: contain
background-position: right
name: thanks

.pull-left[

# .large[.fancy[Thanks to...]]

[Jenny Bryan](https://jennybryan.org/)  
[Greg Wilson](http://third-bit.com/)  
[Desirée De Leon](https://desiree.rbind.io/)  
[Carl Howe](https://carlhowe.com/)  
[Nick Tierney](https://www.njtierney.com/)  
[Katherine Simeon](https://katherinesimeon.github.io/)

]

---
class: middle, center
background-image: url(img/giraffes/giraffes-thanks.png)
background-size: contain
background-position: right
name: credits

.pull-left[

# .large[.fancy[Credits]]

All design and illustrations by [Desirée De Leon](http://desiree.rbind.io/) [](https://twitter.com/dcossyle)

All photos from [Unsplash](https://unsplash.com/)

### Google Fonts

.large[.fancy[[Niconne](https://fonts.google.com/specimen/Niconne)]]

.title[[Prata](https://fonts.google.com/specimen/Prata)]

[Karla](https://fonts.google.com/specimen/Karla)

[`PT Mono`](https://fonts.google.com/specimen/PT+Mono)

]
---
class: inverse, right, middle

# Find me at...

[ @apreshill](https://twitter.com/apreshill) 
[ @apreshill](https://github.com/apreshill) 
[ alison.rbind.io](https://alison.rbind.io) 
[ alison@rstudio.com](mailto:alison@rstudio.com) 
[ literate-projecting.netlify.com](https://literate-projecting.netlify.com)