Small Sites; Big Stories

Interactive narratives
collected in a catalog of microsites
written using as little code as possible

Small Sites; Big Stories

Interactive narratives
collected in a catalog of microsites
written using as little code as possible

What is this project?

“Small Sites; Big Stories” is a few things.

1

It’s a collection of microsites, written using as little code as possible, that tell interactive narratives.

2

It’s a resource for learning about code and discovering how to use it in creative ways.

3

It’s a tool for teaching code in a non-linear trajectory.

By focusing on exploration and community-engagement, and by eliminating technical barriers to coding, “Small Sites; Big Stories” attempts to make code accessible to a wide audience both within and outside of formal educational environments.

What are the rules?

As little code as possible

The goal of “Small Sites; Big Stories” is to showcase meaningful, exciting digital experiences whose design and development can be understood by outsiders, particularly beginners.

One way to make design and code more accessible is to make it simpler. But, simpler doesn’t always mean easier to understand. So, microsites can use more code to achieve their goal as long as adding more code decreases the story’s complexity.

To counteract this increase in code, there are several exceptions to what counts as a line of code. This includes “freebie” code snippets that won’t count toward the total line count.

What counts as a line of code?

A line of code is, generally speaking, just as it seems — a line of code. However, it is often easier to understand code if it’s formatted properly, which can lead to some very short lines of code (e.g. “<div>” on its own line).

It might also be easier and simpler to copy-paste code instead of writing code that duplicates itself.

Because of both of these reasons, lines of code are (generally) counted based on the following rules:

1

Lines of code only count toward the total if they are meaningful. This means that something like a “<p>” tag on its own line might not count as a line of code. This is up to the author’s discretion.

2

Lines of code only need to count toward the total if they are unique. This means that copy-pasted lines may only count the first time they appear (within reason).

3

Comments and formatting do not count toward the total.

In all cases, the exact total count is up to the author’s discretion.

Freebies

There are some code snippets that frequently make life easier. Authors get to use these code snippets for free, since they’re less about storytelling and more about best practices and polished presentation.

This is the list of current freebies:

1

Several HTML elements have some margin and padding set by default. This is especially obvious on the <body> tag, which has a margin of 8px. The following code removes margin and padding from all elements:

* {
    margin: 0;
    padding: 0;
}

2

Images can break the boundaries of the elements they’re inside of. To fix this, we can set a maximum width to all image elements:

img {
    max-width: 100%;
}

3

The width and height of elements usually excludes the border, which makes sizing difficult. We can set the width and height to include the border for all elements with the following property:

* {
    box-sizing: border-box;
}

4

If we want our content to take up the whole screen, we can create a container class with a set width and height (we use dvh here instead of vh to account for mobile devices):

.container {
    width: 100vw;
    height: 100dvh;
}

5

Flexbox is the easiest way to vertically and horizontally center things on the screen. We can add to our container class to hold our content if we want it centered:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

6

p5.js is a fantastic JavaScript library that makes drawing images really easy. It creates a <canvas> element, but this element does not resize to fill the available space. We can use the following JavaScript code to make that canvas automatically resize when the window changes size:

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}


The following CSS removes a slight bottom margin as well:

canvas {
    display: block;
}

Freebies are usually marked by comments in the code editor.

This list may change to include new freebies in the future, which could affect the actual code count for older stories.

How can I use this project to learn code?

No matter your skill level, the first thing to do is explore! Experience as many stories as you want, and maybe try changing around parts of the code to see what happens.

Over time, you should strive to understand why certain things change when you edit the code. This is an important step in learning to program — learning to analyze pre-existing code, so that you can modify it, adapt it for use somewhere else, or even fix it if it’s broken.

This project functions best as a supplement to a traditional coding curriculum, since it does not feature formal tutorials or demos. If you’re looking for a place to learn code (with lots of bells and whistles!) then check out this project’s sister site, the Web Programming Workshop.

How can I use this project to teach code?

Teaching code to someone who has never programmed before can be difficult. This is particularly true because there are many fundamental concepts to cover before getting to anything creative. However, interesting projects don’t need to be complicated, and you don’t need a full understanding of code to start creating interesting things.

Teachers can use “Small Sites; Big Stories” to show students the potential of code even at small scales. This can take the form of a class exercise or assignment (e.g. create an interactive narrative using less than 40 lines of code), or even the form of research (e.g. what kinds of digital experiences evoke drama or mystery?).

“Small Sites; Big Stories” can also help fill a gap in instruction if a teacher isn’t confident in their coding skills. Students can go to the site directly to see how certain things are accomplished in practice, or teachers can select stories to show to a class for analysis and critique.

This project functions best as a supplement to a traditional coding curriculum, since it does not feature formal tutorials or demos. If you’re looking for a coding curriculum (with lots of bells and whistles!) then check out this project’s sister site, the Web Programming Workshop.

Can I use this code in my own projects?

For the most part, yes! This is an open source initiative that encourages you to learn from and use the techniques on display.

If you want to borrow a substantial amount of code from a story, consider crediting the original author in your project. And please don’t copy a story in its entirety or reuse it somewhere else without credit — that’s plagiarism, and also really lame.

Can I contribute a story?

Absolutely! Please email gabriel@noreplica.com if you have an idea or a finished story you’d like to submit. Anthologies are welcome too!

All stories are reviewed before being added to the site, and there isn’t a guarantee that your story will be included. If your story is accepted, revisions may be requested to make your story fit the project’s missions of accessibility and education.

Who made this project?

Design & Development: Gabriel Drozdov

Colophon: Limkin by Gabriel Drozdov

Contributors: TBA

“Small Sites; Big Stories” began as part of RISD’s Graduate Studio II course during the Spring 2023 semester, with the guidance of Lucinda Hitchcock and Paul Soulellis.

Hide Story Details

Anthology

Anthology Title

Story 1 of 2

20
Lines of Code

Story

Some sort of story title goes here

Created by

  • Firstname Lastname
  • Firstname Lastname

Explanation

Some sort of description about the story goes here. Some sort of description about the story goes here. Some sort of description about the story goes here. Some sort of description about the story goes here. Some sort of description about the story goes here. Some sort of description about the story goes here.

Tags

  • Tag 1
  • Tag 2
  • Tag 3
  • Tag 4

Hide Code Editor

HTML HTML (HyperText Markup Language) is a programming language used for structuring web pages. Internet browsers read HTML files to show you a website’s content.

CSS CSS (Cascading Style Sheets) is a programming language used for styling web pages. This includes everything from how typography will look, to how information is laid out and organized. Internet browsers read CSS in conjunction with HTML.

JavaScript JavaScript (JS) is a programming language used for dynamically modifying web pages. Some uses cases for JS include adding interactive elements, performing computation, or generating data and content. JS is able to manipulate HTML and CSS after the web page loads.

Hide Sorting & Filters

  • Stories

  • Anthologies

Lines of Code

  • 20 or less
  • 21–40
  • 41–60
  • 61–80
  • 81–100
  • More than 100

Sorting

  • Least code
  • Most code
  • Title A–Z
  • Title Z–A
  • Author A–Z
  • Author Z–A
  • Random

Filters

Search
Genre
  • Action
  • Adventure
  • Comedy
  • Drama
  • Documentary
  • Horror
  • Fantasy
  • Mystery
  • Romance
Programming Languages
  • HTML
  • CSS
  • JavaScript
JavaScript Library
  • p5.js
  • ml5.js
  • Tone.js
  • matter.js
Types of Interaction
  • Mouse
  • Click
  • Scroll Wheel
  • Keyboard
  • No Interaction
Design Techniques
  • Typography
  • Variable Fonts
  • Flexbox
  • Grid
  • Keyframes
  • Hover States
Programming Techniques
  • Math
  • Variables
  • Arrays
  • Objects
  • If/Then/Else
  • Loops
  • Randomization
  • Classes
Compatible Devices
  • Desktop
  • Mobile
Author
    Clear Filters
    No results match those settings!