My idea of a vacation might be weird to some. Sure, I like sunshine, I like beaches – but more than all that, I like making stuff with computers.

So I spent my last trip to the west coast scratching my own itches, writing the little dream features and requests that have been floating around in my head for months.

I didn’t want the stress of shipping anything while on vacation, so after I got back I released one of those features per day. I called it “The Week of Sensory Experiments” because of this cool art,

That week included card resizing, an updated image picker, space embeds, improved card overlaps, and my personal favorite, multi-connect,

People seemed to really like the busy week, I should do this more often…

Deciding What to Make

My biggest source of ideas is people’s problems or requests on the forums, on discord, or IRL. These take the form of either:

1. “I need X”, which is straight-forward and just a matter of priority
2. ”I want to do Y”, which doesn’t make sense initially, but finding out the why behind the request leads to something new
3. ”I wish I could do Z”, sometimes I wish I could do Z too, but I need to swirl the idea around in the back of my brain for a couple months before I figure out how to build it in a way that’s performant and works with the Kinopio interface

Equally important are my own dreams – Kinopio is nowhere near complete in my eyes. Maybe it won’t ever be.

So I continually ask myself:

1. ”How can spaces be more expressive?”, more personal, and more fun to use. My goal is for the tool to feel like an extension of your mind
2. ”How can the tool be more usable?”, the more reasons people have to use Kinopio, the more reasons they have to share and invite others to their spaces

I benefit from these in my own spaces. Especially in Life Tasks, where I figure out what I’m doing next, and jot down errands and random ideas and observations,

Designing, Coding, Sometimes in That Order

In 2014, I wrote about my belief that design and engineering are best when tightly woven together. That’s truer now than ever.

If I’m feeling confident, I’ll jump right into my text editor and write something like this to create a new controls,

.button-wrap
  button(@click="toggleIsVisible")
    span Say Hello
  dialog.narrow(:open="isVisible")
    p yolo friends 🛶

From here, more functionality is added and the code is tweaked until the feature looks and feels right to me. Whether it’s something simple like this, or prototyping a new interaction like multi-connect, there’s no substitute for designing with real code.

In rare cases when I have ideas or plans that I’m less confident about, it’s time to break out the paper, pens, and markers,

Because the Kinopio interface elements and aesthetic are full-grown, I almost never use traditional design software anymore.

Ship It to the World

I keep the review and release process simple – commits are linted, PRs are code-reviewed, branch merges auto-deploy to production.

While coding, I create a list of interactions to manually QA test afterwards. If the change is risky or risqué, I’ll release sneak-peek videos for feedback, and ask beta testers to try it out in a staging environment beforehand.

Marketing

Everything I know about marketing I learned by osmosis in previous jobs. Most software marketing messages are variations on a theme,

“We exist! We can help! We’re really popular! Trust us!”

After a new feature is shipped, I post and tweet about it. With practice, weaving marketing into design and development is starting to feel like a natural part of the cycle.

There’s no shortage of articles with silver bullets like how to double your audience with one cool trick™. But once you strip away the artifice and wipe off the sludge, marketing is just communication – and the best communication informs, inspires, and entertains.

In the case of Kinopio, I hope to convey,

1. Function, how Kinopio helps you make sense of information in a more engaging way
2. Beauty, create expressive and interesting spaces that you’ll want to share
3. Aspiration, using Kinopio helps you turn your problems into solutions, and your ideas into actions

It’s a long road to travel. Like the Oregon Trail, but instead of losing people to dysentery, new friends are jumping on the caravan everyday.

Comments…

In theory, every marketing website has the same basic job “Here’s what this thing is, here’s how it can help you.”

Beyond that, I hope to vibe with your higher aspirations. “This will help you live the calm, creative life that you yearn for.”

To this end, the three weeks I spent writing, designing, and building the new About Kinopio page almost broke me.

I started with words. If I can make something compelling in a .txt file, that’s a good place to build from. Strangely, I think clearly describing what a product does is probably hardest for the person who made it. But all the feedback I’ve gotten from readers of the Kinopio email bulletin was super helpful in figuring out what themes and use-cases to focus on.

How it Looks, How it Works

Much of my initial inspiration came from going down the rabbit holes of Fonts in Use. Besides finding cool typefaces, there’s a lot of compelling layouts and art direction to be found in the books and posters on the site that we don’t really see on the web.

My design process began by putting the goals I had for the page along with pieces of inspiration in a mood-board space.

• Aesthetically, I wanted the page to feel approachable and conventional – but also be memorable and characterful.
• The page should feel like a genuine counterpart to the app’s design.
• Exude the qualities of craftsmanship and a focus on small details that differentiates Kinopio from more corporate competitors.

For the fonts I was interested in, I tried out free trial versions on the page itself using css @fontface

The page headers are set in the very french Jean Luc. I’ve had this font on my hard drive – and in the back of my mind – for 10 years, and I finally found a use for it.

Contrasting this, the organic and earthy Recoleta is used for headlines.

From here, I poked, then hoped, then tweaked my way towards a layout in the html and css itself. I created new template spaces for each example use-case. And also recorded videos using the macOS screen recorder (⌘-Shift-5) which were then converted to web-friendly mp4 files with Handbrake.

Auto-Paint

Just like with Kinopio itself, I wanted the way you interact with this page to have a little extra somethin’ somethin’.

So, the page paints itself. Kind of like I’m sitting on your shoulder and I’m saying “hey check this out, and also this part is really cool”.

To build auto-painting, I wrote some code that records the x,y position and timings of my paint strokes on the page. On page load, these recorded strokes have their positions transformed to be relative to specific elements on the page. When you scroll those elements into view, auto-painting happens.

Honestly, this was kind of a nightmare. I should’ve chosen an easier profession, like navy seal.

Putting It All Together

Here’s how the page turned out. Weeks from now, after the pain is forgotten, I’ll be really happy with it.

Comments…

If you visit the rich parts of Paris, it’s a beautiful place. I fondly recall narrow cobble-stone streets, road-side cafés, funky french cars, homes, shops, and chapels each more ornate and gracefully detailed than the last.

Coming from a suburb designed by bean-counters and losers, I imagined that I’d be endlessly inspired by Paris, by New York, by wherever. But inevitably, the opulence, the architecture, the tradition, it all blends together.

I’m glad I travelled to all these places. Everyone should see more of everything.

That said, every journey inevitably leads me back to my ever-growing collection of charming, beautiful, and peculiar jpeg’s.

Collecting Inspiration

I started my personal inspiration library in 2010, saving cool images from the world wide web, and snapping photos from architecture and illustration books.

Like pruning a bonsai, sometimes I remove things that no longer resonate. What lives on are perennially interesting and memorable. The oldest branches evoke vibes and eras that I think are worth remembering and learning from.

I didn’t have a plan behind it, besides striving to express myself by combining and imitating the things I liked. I definitely didn’t think I’d be scrolling through these images a decade later.

At first I threw everything into a folder. Then I moved everything to LittleSnapper (now abandoned), then later onto the web with Are.na. Today, the collection lives in this Kinopio space.

Using Inspiration

I visit this space often. Sometimes to wander and wonder, other times to gather ideas for something new.

One of my original Kinopio references – nestled alongside drawings of nature with bright colors, and ’80s digital synthesizers with chunky buttons and sliders – is this gig poster:

Maybe one day I’ll make something charming-enough, beautiful-enough, and peculiar-enough to be in someone else’s collection.

Bonus

I found this comic while going through some my old inspiration, it probably inspired the Kinopio logo.

Comments…

You’ve probably heard, or lived, a story that goes like this…

I’m tired of technology. I’m leaving to do something real like sculpt clay, work wood, herd sheep, and grow vegetables.

But making software that runs fast, efficiently, and reliably is it’s own kind of craft, tangible in its own way. But, to do any kind of craft you have to understand the materials of your medium, how they bend, and how to work together.

Making an aircraft engine requires an understanding of the tolerances and capabilities of different metals, airflow and combustion. Not that I know anything about all that – our engine is made of state, localStorage, API, and websockets.

But First, the Two Kinopio Apps

• kinopio-client is a Vue.js app that weighs 150 KB. When you go to https://kinopio.club, it’s downloaded and run in your browser. This is the only part of Kinopio you use if you don’t have an account.
• kinopio-server is a Node.js app that runs on a server out in the world. If you’re signed in, it saves your data to a database so that you can share, collaborate, and access your spaces on other devices.

Kinopio Engineering Principles

• Speed first, perfect later. You shouldn’t need to wait for server requests to complete before editing your spaces. Because fast software is the best software.
• Favor easy maintenance. To help you sleep at night choose open technologies that are widely supported and well documented.
• Building a foundation for decades. This mindset encourages me to write small, simple code that is easy to re-read in the future. If I’m adding a third-party library to Kinopio, that’s now a commitment over years so I’m motivated to really know what I’m adding – and maybe write it myself instead if that’s the smaller and faster option.

The Four Elemental Web Technologies

State

State is your current space and user data, which informs the display of elements on the page. E.g. my user.name = 'Pirijan' and my user.color = 'cyan'. Kinopio uses Vue.js/Vuex to bind data to elements on the page. So when you change your user.color, everything that references that user’s color updates.

State is not persistent though, unless it’s saved somewhere it’ll be lost the next time you refresh.

LocalStorage

Update: I later switched from LocalStorage to IndexedDB to improve performance and storage size. That said, I’m still using IndexedDB as a key-value storage system, via idb-keyval.

LocalStorage is 2-5 MBs of key-value data that every website gets to save on your device. Unlike cookies, localStorage data can only be accessed by the URL that created it which means it’s secure and can’t be used for user tracking and other shady shit.

Here’s a secret, by stringifying JSON objects you can save any kind of data structure to it. LocalStorage is fragile though, you can accidentally wipe it out by clearing your browser cache.

API and Database

The Kinopio API is used to GET and POST(save) data to the database so that you can edit your spaces on other devices. Getting data from servers is much slower than getting data from your localStorage, because of the round-trip and because every request needs to be privacy authorized.

Websockets

Websockets create that magical collaboration feeling by enabling a real-time stream of messages to be sent and received by a client, e.g. Pirijan moved cardId ABC123 to position {x: 100, y: 200}. These messages are relayed by the server to collaborators whose space state is updated. e.g. updating the position of the card.

Websocket connections must be actively kept alive with a ‘heartbeat’ exchange. If you go afk for a while, like to make a coffee or something, reconnecting to the stream takes a couple seconds.

Putting it All Together

When you load Kinopio for the first time, your state is created and saved to localStorage so it can be restored. When you update your state by editing cards or connections, localStorage is also updated. Once you sign up, updates also save to the API.

Once you start using Kinopio on other devices, the localStorage on your phone might be ahead of the one on your computer.

To be fast, Kinopio first restores state from possibly outdated localStorage. Once the latest server data is downloaded, the state is re-restored.

While the space is downloading from the server, edits you make are saved and then applied on top of the server copy.

Websockets only stream relayed updates to connected collaborators and spectators. You might be wondering, why don’t you just update the database with websockets instead of relatively slow API requests?

The problem with saving data with websockets is that they’re too fast. Authenticating that many messages per second and writing them to disk would be really inefficient. E.g. If you’re moving a card from position x: 20 to x: 420, Kinopio will use websockets to broadcast many updates during the move: moving card x to 21, moving card x to 24, moving card x to 28… potentially hundreds of messages. Or you could send a single API request after you’ve moved the card, PATCH card.x = 420.

Building fast, easy to maintain software that’ll hopefully last for decades means understanding and using the right technology for the right job. It’s its own kind of craft, in its own kind of way.

Comments…