Artifacts of the Small Web
patternsof.design
A Website by Nick Trombleymaya.land
an old-school blogroll, now with banners 😎
Every element is an html.
A Website by Katherine Yanghome sweet homepage
A Website by Amy Wibowoa comic about growing up online
Good Things
A Website by Melanie Richards155-217-155
A Website by Nick Trombleye-worm.club
A Website by Zach ShermanI’m building a custom pleroma client so that my friends and I can have a cute, self-hosted social network to post about politics and art. Besides being much more visually interesting than our facebook messenger groupchat, e-worm also attempts to solve design problems around conversational, collaborative thinking. The biggest of these problems is the inherent ephemerality of our groupchat— it doesn’t really succeed as a collaborative thinking space because it has no long-term memory. When messages are constantly buried under new ones, it places the burden on us to remember previous conversations. So the ultimate design goal for e-worm is to create a self-archiving conversational interface that preserves thought and helps us keep thinking new things rather than going in intellectual circles.
drawing.garden
A Website by Ben MorenGardening, but with emojis and less time.
Marginalia Search
A WebsiteI want to show you that that Internet you used to go exploring is still very much there. There are still tons of small personal websites, and a wealth of long form text from both the past and the present.
So it's a search engine. It's perhaps not the greatest at finding what you already knew was there, instead it is designed to help you find some things you didn't even know you were looking for.
emojraw.glitch.me (draw!)
A Website by Shannon Linminimator.app
An ApplicationMinimator is a minimalist graphical editor.
All drawings are made of lines in a grid based canvas. The lines are limited to vertical and horizontal lines, and quarter circles.
Looseleaf
A Websitepicnic.lectoro.me
A Website by Renan Le CaroCreate a text document, share the link and edit it with friends.
Can I include?
A WebsiteThis site helps you understand which tag you can include in another using the WHATWG HTML specification.
How I experience the web today
A WebsiteLoveFrom,
A WebsiteLoveFrom,
is a creative
collective.press.stripe.com
A WebsiteStripe partners with millions of the world’s most innovative businesses. These businesses are the result of many different inputs. Perhaps the most important ingredient is “ideas.”
Stripe Press highlights ideas that we think can be broadly useful. Some books contain entirely new material, some are collections of existing work reimagined, and others are republications of previous works that have remained relevant over time or have renewed relevance today.
Make Frontend Shit Again
A Website by Sara VieiraWe used to make websites because it was fun but at some point, we lost the way.
We need to make dumb shit!
Make useless stuff;
make the web fun again!Things that don't scale
An Article by Benedict EvansMaybe the internet is due for a wave of things that don’t scale at all. In that light, I’ve been fascinated by ‘Morioka Shoten’ in Tokyo - a bookshop that sells only one book at a time. This is retail as anti-logistics - as a reaction against the firehose, and the infinite replication of Amazon. Before the internet that would only work in a very dense city, but, again, the internet is the densest city on earth, so how far do we scale the unscalable?
AJDVIV
A WebsiteSeriesHeat
A Website by Jim VallandinghamSearch for a TV Series to see a heatmap of average IMDb ratings for each episode.
Kicks Condor: barnsworthburning
An Article by Kicks CondorDirectories aren’t surging. There isn’t this nascent directory movement fomenting - ready to take on the world. Directories aren’t trending.
But there is a certainly really sweet little directory community now. From the Marijn-inspired stuff listed in Directory Uprising to the link-sharing ‘yesterweb’ collected around sadgrl.online - or the originals at Indieseek and i.webthings.
Barnsworthburning (by Nick Trombley) is a very formidable addition to this community - a clean, multilayered design and an innovative bidirectional index.
So many little design helper sites!
An Article by Chris CoyierI’m sure y’all find these things just as useful as I do. They don’t make us lazy, they make us efficient. I know how to make a pattern. I know how to draw a curve with a Pen Tool. I know how to convert SVG into JSX. But using a dedicated tool makes me faster and better at it. And sometimes I don’t know how to do those things, but that doesn’t mean I can’t take advantage. Fake it ’til you make it, right?
Werner’s Nomenclature of Colours
A Website by Nicholas RougeuxA recreation of the original 1821 color guidebook with new cross references, photographic examples, and posters designed by Nicholas Rougeux.
The Whimsical Web
A Website by Max BöckA curated list of sites with an extra bit of fun.
Funcooker
A WebsiteUser Inyerface
A WebsiteA worst-practice UI experiment.
SEA — SEASONS
A Website by Melanie RichardsWith the many distractions life has to offer, it is all too easy to let the seasons slip by and wonder where an entire year has gone. This site is an effort to observe the seasons with intentionality. Each season documents ways to observe the moment, pulling often from pagan traditions.
Lizzo's Juice Shop
A WebsiteThis page is a truly naked, brutalist html quine
An Article by Leon BambrickI decided to make a truly naked, brutalist html page, that is itself a quine. And this page is it.
Viewing the source of this page should reveal a page identical to the page you are now seeing. Nothing is hidden. It's a true "What you see is what you get."
littlebigdetails
A Blog by Floris DekkerLittle Big Details is a curated collection of the finer details of design.
As Charles & Ray Eames put it:
“The details are not the details; they make the product.”
This is intended to be a source of inspiration.
Created and curated by Floris Dekker. Alumni: Andrew McCarthy.
Color Controversy
A Website by Leo RobinovitchSo some friends and I were talking about colors one day and how we all see colors a bit differently and how that's neat.
But is there a color that is interpreted differently THE MOST? Is there a most controversial color? Well, (if I contrive an ongoing survey and collect data about it), the answer is yes, of course!
this vs. that
A Website by Phuoc NguyenIf we were allowed to visit
A Poetry CollectionIf We Were Allowed To Visit is an anthology of poems by Gemma Mahadeo rendered by Ian MacLarty.
As you move through the game's environment, the poems are rearranged into the shapes of the objects they're about, each frame becoming a new generative poem.
When all of my friends are on at once
A Website by Laurel SchwulstMemories of being online
tixy.land
A Websitesin(t * x) * cos(t * y)
Creative code golfing.
tree.fm
A WebsiteTune Into Forests From Around The World. Escape, Relax & Preserve.
Games For Crows: Feels
A GameA Library Demand List
A Website by Robin SloanThis visualization takes the current New York Times Best Sellers list for combined print and e-book fiction and scales each title according to the demand for its e-book edition at a collection of U.S. public libraries, selected for their size and geographic diversity.
The small web is beautiful
An Essay by Ben HoytI believe that small websites are compelling aesthetically, but are also important to help us resist selling our souls to large tech companies. In this essay I present a vision for the “small web” as well as the small software and architectures that power it.
Telescopic Text
A Websitetelescopictext.org is an experimental tool for creating expanding texts. It is based on telescopictext.com.
sodelightful.com
A Website by Christina TranI'm Christina Tran. If you want to trace the trails I've made in the world through the intermittent marks left on the interwebs, below is a map of my becoming in no particular order. But I also hope we get the chance to share a meal, explore nature, experience art, and/or create something together sometime. Because we are all multi-faceted, multi-dimensional beings who can't be TL;DR'd.
Simon Collison's timeline
A Website by Simon CollisonI’ve shaped this timeline over five months. It might look simple, but it most definitely was not. I liken it to chipping away at a block of marble, or the slow process of evolving a painting, or constructing a poem; endless edits, questions, doubling back, doubts. It was so good to have something meaty to get stuck into, but sometimes it was awful, and many times I considered throwing it away. Overall it was challenging, fun, and worth the effort.
Nested
A WebsiteI have a secret for you
A strange universe-expanding game that's been described as "whoah dude".
Explore procedural galaxies, land on unknown planets, read the thoughts of every living thing, rummage through people's pockets, and more!
...and by islands I mean paragraphs
A Website by J.R. CarpenterIslands are possible only in literature. Topical islands are in a time without History. They are paragraphs. They are not part of the central body of the text. Isloated writing is always a testimonial. The castaway embodies the contradiction of beieng a speaker without a society.
HTML Elements Memory Test
A WebsiteMy first attempt was 54. Not even half!
How many HTML elements can you remember?
aboutfeeds.com
A Website by Matt WebbUse feeds to subscribe to websites and get the latest content in one place.
Feeds put you in control. It’s like subscribing to a podcast, or following a company on Facebook. You don’t need to pay or hand over your email address. And you get the latest content without having to visit lots of sites, and without cluttering up your inbox. Had enough? Unsubscribe from the feed.
You just need a special app called a newsreader.
This site explains how to get started.
The life and death of an internet onion
In her piece "A drop of love in the cloud" (2018), artist Fei Liu writes about the like/heart button as a flattening affordance of giving affirmation and love. The text-editor provides a much more expressive input.
But even people who can't communicate well because of language barriers can express love through actions, like cooking food. Can we create other "love inputs" that might allow us to "reach across the chasm of a seamless signal"?
What is expressing "real" love or affirmation about? Is it about effort, thoughtfulness, generosity, something else? What might a thoughtful or generous interface feel or behave like?
A Pattern Language
- Its place in the web of nature
- 9. Scattered Work
- 21. Four-Story Limit
- 51. Green Streets
- 53. Main Gateways
Its place in the web of nature
This is a fundamental view of the world. It says that when you build a thing you cannot merely build that thing in isolation, but must also repair the world around it, and within it, so that the larger world at that one place becomes more coherent, and more whole; and the thing which you make takes its place in the web of nature, as you make it.
9. Scattered Work
Problem
The artificial separation of houses and work creates intolerable rifts in people’s inner lives.
Solution
Use zoning laws, neighborhood planning, tax incentives, and any other means available to scatter workplaces throughout the city. Prohibit large concentrations of work without family life around them. Prohibit large concentrations of family life without workplaces around them.
21. Four-Story Limit
Problem
There is abundant evidence to show that high buildings make people crazy.
Solution
In any urban area, no matter how dense, keep the majority of buildings four stories high or less. It is possible that certain buildings should exceed this limit, but they should never be buildings for human habitation.
51. Green Streets
Problem
There is too much hot hard asphalt in the world. A local road, which only gives access to buildings, needs a few stones for the wheels of the cars; nothing more. Most of it can still be green.
Solution
On local roads, closed to through traffic, plant grass all over the road and set occasional paving stones into the grass to form a surface for the wheels of those cars that need access to the street. Make no distinction between street and sidewalk. Where houses open off the street, put in more paving stones or gravel to let cars turn onto their own land.
53. Main Gateways
Problem: Any part of town—large or small—which is to be identified by its inhabitants as a precinct of some kind, will be reinforced, helped in its distinctness, marked, and made more vivid, if the paths which enter it are marked by gateways where they cross the boundary.
Solution: Mark every boundary in the city which has important human meaning—the boundary of a building cluster, a neighborhood, a precinct—by great gateways where the major entering paths cross the boundary.
66. Holy Ground
Problem
What is a church or temple? It is a place of worship, spirit, contemplation, of course. But above all, from a human point of view, it is a gateway. A person comes into the world through the church. They leave it through the church. And, at each of the important thresholds of their life, they once again step through the church.
Solution
In each community and neighborhood, identify some sacred site as consecrated ground, and form a series of nested precincts, each marked by a gateway, each one progressively more private, and more sacred than the last, the innermost a final sanctum that can only be reached by passing through all of the outer ones.
70. Grave Sites
Problem
No people who turn their backs on death can be alive. The presence of the dead among the living will be a daily fact in any society which encourages its people to live.
Solution
Never build massive cemeteries. Instead, allocate pieces of land throughout the community as grave sites—corners of parks, sections of paths, gardens, beside gateways—where memorials to people who have died can be ritually placed with inscriptions and mementos which celebrate their live. Give each grave site an edge, a path, and a quiet corner where people can sit. By custom, this is hallowed ground.
80. Self-Governing Workshops and Offices
Problem
No one enjoys their work if they are a cog in a machine.
Solution
Encourage the formation of self-governing workshops and offices of 5 to 20 workers. Make each group autonomous—with respect to organization, style, relation to other groups, hiring and firing, work schedule. Where the work is complicated and requires larger organizations, several of these work groups can federate and cooperate to produce complex artifacts and services.
104. Site Repair
Problem
Buildings must always be built on those parts of the land which are in the worst condition, not the best.
Solution
On no account place buildings in the places which are more beautiful. In fact, do the opposite. Consider the site and its buildings as a single living ecosystem. Leave those areas that are the most precious, beautiful, comfortable, and healthy as they are, and build new structures in those parts of the site which are least pleasant now.
106. Positive Outdoor Space
Problem
Outdoor spaces which are merely “left over” between buildings will, in general, not be used.
Solution
Make all outdoor spaces which surround and lie between your buildings positive. Give each one some degree of enclosure; surround each space with wings of buildings, trees, hedges, fences, arcades, and trellised walks, until it becomes an entity with a positive quality and does not spill out indefinitely around corners.
109. Long Thin House
Problem
The shape of a building has a great effect on the relative degrees of privacy and overcrowding in it, and this in turn has a critical effect on people’s comfort and well-being.
Solution
In small buildings, don’t cluster all the rooms together around each other; instead string out the rooms one after another, so that distance between each room is as great as it can be. You can do this horizontally—so that the plan becomes a thin, long rectangle; or you can do it vertically—so that the building becomes a tall narrow tower. In either case, the building can be surprisingly narrow and still work—8, 10, and 12 feet are all quite possible.
112. Entrance Transition
Problem: Buildings, and especially houses, with a graceful transition between the street and the inside, are more tranquil than those which open directly off the street.
Solution: Make a transition space between the street and the front door. Bring the path which connects street and entrance through this transition space, and mark it with a change of light, a change of sound, a change of direction, a change of surface, a change of level, perhaps by gateways which make a change of enclosure, and above all with a change of view.
126. Something Roughly in the Middle
Problem
A public space without a middle is quite likely to stay empty.
Solution
Between the natural paths which cross a public square or courtyard or a piece of common land, choose something to stand roughly in the middle: a fountain, a tree, a statue, a clock-tower with seats, a windmill, a bandstand. Make it something which gives a strong and steady pulse to the square, drawing people in toward the center. Leave it exactly where it falls between the paths; resist the impulse to put it exactly in the middle.
127. Intimacy Gradient
Problem
Unless the spaces in a building are arranged in a sequence which corresponds to their degrees of privateness, the visits made by strangers, friends, guests, clients, family, will always be a little awkward.
Solution
Lay out the spaces of a building so that they create a sequence which begins with the entrance and the most public parts of the building, then leads into the slightly more private areas, and finally to the most private domains.
134. Zen View
If there is a beautiful view, don’t spoil it by building huge windows that gape incessantly at it. Instead, put the windows which look onto the view at places of transition—along paths, in hallways, in entry ways, on stairs, between rooms.
If the view window is correctly placed, people will see a glimpse of the distant view as they come up to the window or pass it: but the view is never visible from the places where people stay.
135. Tapestry of Light and Dark
Problem
In a building with uniform light level, there are few “places” which function as effective settings for human events. This happens because, to a large extent, the places which make effective settings are defined by light.
Solution
Create alternating areas of light and dark throughout the building, in such a way that people naturally walk toward the light, whenever they are going to important places: seats, entrances, stairs, passages, places of special beauty, and make other areas darker, to increase the contrast.
159. Light on Two Sides of Every Room
Problem
When they have a choice, people will always gravitate to those rooms which have light on two sides, and leave the rooms which are lit only from one side unused and empty.
Solution
Locate each room so that it has outdoor space outside it on at least two sides, and then place windows in these outdoor walls so that natural light falls into every room from more than one direction.
168. Connection to the Earth
Problem
A house feels isolated from the nature around it, unless its floors are interleaved directly with the earth that is around the house.
Solution
Connect the building to the earth around it by building a series of paths and terraces and steps around the edge. Place them deliberately to make the boundary ambiguous—so that it is impossible to say exactly where the building stops and earth begins.
172. Garden Growing Wild
Problem
A garden which grows true to its own laws is not a wilderness, yet not entirely artificial either.
Solution
Grow grasses, mosses, bushes, flowers, and trees in a way which comes close to the way that they occur in nature: intermingled, without barriers between them, without bare earth, without formal flower beds, and with all the boundaries and edges made in rough stone and brick and wood which become a part of the natural growth.
179. Alcoves
Problem
No homogeneous room, of homogeneous height, can serve a group of people well. To give a group a chance to be together, as a group, a room must also give them the chance to be alone, in one’s and two’s in the same space.
Solution
Make small places at the edge of any common room, usually no more than 6 feet wide and 3 to 6 feet deep and possibly much smaller. These alcoves should be large enough for two people to sit, chat, or play and sometimes large enough to contain a desk or a table.
180. Window Place
Problem
Everybody loves window seats, bay windows, and big windows with low sills and comfortable chairs drawn up to them.
Solution
In every room where you spend any length of time during the day, make at least one window into a "window place".
190. Ceiling Height Variety
Problem
A building in which ceiling heights are all the same is virtually incapable of making people feel comfortable.
Solution
Vary the ceiling heights continuously throughout the building, especially between rooms which open into each other, so that the relative intimacy of different spaces can be felt. In particular, make ceilings high in rooms which are public or meant for large gatherings (10 to 12 feet), lower in rooms for smaller gatherings (7 to 9 feet), and very low in rooms for one or two people (6 to 7 feet).
197. Thick Walls
Problem
Houses with smooth hard walls made of prefabricated panels, concrete, gypsum, steel, aluminum, or glass always stay impersonal and dead.
Solution
Open your mind to the possibility that the walls of your building can be thick, can occupy a substantial volume—even actual usable space—and need not be merely thin membranes which have no depth. Decide where these thick walls ought to be.
205. Structure Follows Social Spaces
Problem
No building ever feels right to the people in it unless the physical spaces (defined by columns, walls, and ceilings) are congruent with the social spaces (defined by activities and human groups).
Solution
A first principle of construction: on no account allow the engineering to dictate the building’s form. Place the load bearing elements—the columns and the walls and floors—according to the social space of the building; never modify the social spaces to conform to the engineering structure of the building.
207. Good Materials
Problem
There is a fundamental conflict in the nature of materials for building in industrial society.
Solution
Use only biodegradable, low-energy-consuming materials, which are easy to cut and modify on site. For bulk materials we suggest ultra-lightweight 40–60 lbs. concrete and earth-based materials like tamped earth, brick, and tile. For secondary materials, use wood planks, gypsum, plywood, cloth, chickenwire, paper, cardboard, particle board, corrugated iron, lime plasters, bamboo, rope, and tile.
239. Small Panes
Problem
When plate glass windows became possible, people thought that they would put us more directly in touch with nature. In fact, they do the opposite.
Solution
Divide each window into small panes. These panes can be very small indeed, and should hardly ever be more than a foot square. To get the exact size of the panes, divide the width and height of the window by the number of panes. Then each window will have different sized panes according to its height and width.
247. Paving With Cracks Between the Stones
Problem
Asphalt and concrete surfaces outdoors are easy to wash down, but they do nothing for us, nothing for the paths, and nothing for the rainwater and plants.
Solution
On paths and terraces, lay paving stones with a 1 inch crack between the stones, so that grass and mosses and small flowers can grow between the stones. Lay the stones directly into the earth, not into mortar, and, of course, use no cement or mortar in between the stones.
249. Ornament
Problem
All people have the instinct to decorate their surroundings.
Solution
Search around the building, and find those edges and transitions which need emphasis or extra binding energy. Corners, places where materials meet, door frames, windows, main entrances, the place where one wall meets another, the garden gate, a fence—all these are natural places which call out for ornament.
Now find simple themes and apply the elements of the theme over and over again to the edges and boundaries which you decide to mark. Make the ornaments work as seams along the boundaries and edges so that they knit the two sides together and make them one.
250. Warm Colors
Problem
The greens and grays of hospitals and office corridors are depressing and cold. Natural wood, sunlight, bright colors are warm. In some way, the warmth of the colors in a room makes a great deal of difference between comfort and discomfort.
Solution
Choose surface colors which, together with the color of the natural light, reflected light, and artificial lights, create a warm light in the rooms.
251. Different Chairs
Problem
People are different sizes; they sit in different ways. And yet there is a tendency in modern times to make all chairs alike.
Solution
Never furnish any place with chairs that are identically the same. Choose a variety of different chairs, some big, some small, some softer than others, some rockers, some very old, some new, with arms, without arms, some wicker, some wood, some cloth.
252. Pools of Light
Problem
Uniform illumination—the sweetheart of the lighting engineers—serves no useful purpose whatsoever. In fact, it destroys the social nature of space, and makes people feel disoriented and unbounded.
Solution
Place the lights low, and apart, to form individual pools of light which encompass chairs and tables like bubbles to reinforce the social character of the spaces which they form. Remember that you can’t have pools of light without the darker places in between.
253. Things From Your Life
Problem
“Decor” and the conception of “interior design” have spread so widely, that very often people forget their instinct for the things they really want to keep around them.
Solution
Do not be tricked into believing that modern decor must be slick or psychedelic, or “natural” or "modern art", or “plants” or anything else that current taste-makers claim. It is most beautiful when it comes straight from your life—the things you care for, the things that tell your story.