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.