← Home

Foundational skills

Broadly applicable skills for digital creation

Sat Nov 26 2022 • 13 min

The most important skills I’ve developed over the past 5-10 years revolve around computing, writing, and design. Together they’ve helped me become a well-rounded digital creator and are really useful for starting your own projects– specifically 0 → 1 efforts where you need to get something off the ground quickly. You don’t have to be an expert in each, but they all complement each other and having proficiency in each can unlock lots of new things you can make.

This is intended to mostly be a self reflection on what I think about and use a lot in my practice. It’s also meant to be read by people across different skill / knowledge levels, so I tend towards over-explaining concepts that might be trivial to some of you. I also sometimes underexplain things so if something is confusing or you want more context, DM or email me. This is also not some sequence of skills you should develop since lots of these skills can be developed in parallel and some you might already have.

Build for the web

Lots of people have talked about this in the past, but the web has some amazing advantages for launching new projects, which include (but aren’t limited to):

If you’re into games, awesome! If you’re into mobile or native development, that’s cool too. There are lots of platform-specific toolkits and environments to make those. There’s also a lot of effort in creating cross platform tools and community-driven projects for both domains (like Unity and Flutter). They all have their advantages, but to me, nothing beats the portability and speed of launching new websites and using web tech to get ideas out the door.

I know non-native code has been getting a lot of heat lately, but using web tech for 80-90% of my projects has a lot of skill transfer effects. Since I’m using similar tools for lots of different projects, I can still refine my core skillset no matter what I’m making. If I’m making a drawing tool concept, a game, or a text editor— I’ll can still probably build all three with React. Of course there are specific libraries or APIs I might need to learn to make each kind of project, but there’s enough in common between all the projects that I can focus on the new content instead of yakshaving and deliberating over unnecessary details.

There are also market pressures that imply focusing on web will have long term payoff, like the rise of wasm, new browsers, and collaborative apps becoming the norm.

So, what does this mean practically?

I don’t have many specific recommendations for resources to look at for these, but Dan Abramov and Maggie Appleton’s Just JavaScript course is wonderful and focuses on core mental models of how JavaScript works.

Databases, realtime apps, etc anything backend-related I’m not really including here because tools for this stuff change all the time and are honestly secondary to the basics around frontend programming and getting simple static websites up at first. That being said, basic data modeling, interacting with REST and GraphQL APIs, understanding websockets and webhooks are all paramount if you’re going to get deeper into web dev.

As a shameless plug, I’d also say make a Replit account, check out Vercel, get acquainted with GitHub and git, or just check out MIT’s missing semester course. There are a bunch of other web-related things I could say here (like understanding HTTP, how to build and design APIs, etc) but I’m leaving it at skills that affect my day to day life the most.

Core computing concepts

Some of this is implied in build for the web, but I’m talking about some core operating system concepts, mental models, data structures, and algorithms.

Primitives and abstractions

A lot of computing is about understanding systems, and specifically their primitives and abstractions. All systems are created with simple primitives, or building blocks, and basic abstractions, or general ways of assembling those building blocks that can also be used to build other things (I am oversimplifying here)

Good abstractions help us do things like:

With Legos, primitives are individual bricks, and you combine bricks together to form doors, houses, axels, cars, and other patterns that are reused across different Lego sets. So a lego set is an abstraction on top of individual lego bricks. We see these kinds of patterns everywhere, and it’s really useful to look at anything (a city, an app, an argument) and break it down into its core components and figure out how they interact with each other.

Domain : Primitives : Abstractions

Lego : Bricks : Buildings

Scratch : Blocks : Games

Photoshop : Layers : Designs

Music : Notes : Chords

Physics : Atoms : Molecules

School : Classes : Degrees

Language : Words : Sentences

Programming : Integers : Functions

Getting comfortable with identifying examples of primitives and abstractions in the real world helps you build intuition for how to build new ones yourself. In the software world, creating good abstractions is the foundational skill behind great API and user interface design.

Functions and input/output

A function is basically a machine that takes some kind of input, does something with it, and produces an output. Let’s take a physical machine for example: a blender takes in fruits and ice as input, chops them all up, and outputs a smoothie when it’s done. Blend is the function that takes fruits in as input. This all ultimately produces a smoothie. So you’d say that a smoothie is a function of fruit.

Now take an image classifier, e.g. an app that tells you if an animal is a dog or not. Here, the input is the animal picture, the function is the app that evaluates whether it’s a dog or not, and the output is the result: yes or no.

In computing these concepts of feeding data in one end, processing it, and then using that output in more processes are ubiquitous. Some of the biggest examples are file input/output, unix pipes, the client/server model, REPLs, and even just chatbots and google search. Everyone is familiar with the concept of a little textbox where you type something, press enter, and get a list of results back. The browser itself is like this when you enter URLs, too, except the result could be any web page. All fancy ML tools you see today that do “media translation” (text-to-[image, video]) are ultimately functions at the end of the day (very complex ones).

Basically, the more you can figure out how to model processes as functions, the easier it is to model how to achieve a goal by transforming some input into a desired output.

Other topics and brainworms

There are lots of concepts that kinda always pop up in my work from time to time, so here’s a non exhaustive list of other things I haven’t mentioned (that are also not necessarily core and maybe slightly more advanced):

Basic graphic, visual, and information design

Not everybody has to be an expert at making visually stunning UIs or magazine covers. But it’s really important to have basic grasp on (among other things):

A significant amount of modern UI design is based on solid graphic and information design. Lots of these skills also transfer over to writing, and specifically formatting. Knowing how to split up paragraphs, adding proper breaks in the flow of your writing, and varying your sentence structure are all core parts of good writing and are a form of information deisgn.

Drawing, diagramming, and sketching are also all equally important. Being able to express yourself visually is a table-stakes skill for designers. But making easy-to-understand diagrams, graphs, and maps is also extremely useful for any field. The interactivity component of digital tools is another added layer of complexity on top of this, but the foundations will always be important and salient. There are multiple billion dollar businesses built on top of making easy-to-use visualization, diagramming, and presentation tools. Powerpoint and Keynote did this for general presentations, BioRender did this for lots of scientific diagrams, and FigJam for collaborative brainstorming.

Not everything can be explained thoroughly purely through writing. If you’re a statistician or mathematician, communicating visually can be essential for expressing complex graphical concepts. If you’re a writer, creating flow charts or outlines of your story can help reveal plot holes and help you organize your thoughts.

Writing as a tool

I’m not going to preach that “writing is important” since that’s been done a million times by other people who can write much better than me. But I’ll still insist that writing should be one of your primary tools to prototype, validate, and flesh out ideas.

Whether you’re pitching a research idea, describing some user interaction, critiquing some feature, or trying to explain a math concept, being able to write and speak simply is probably the most important and universally transferrable skill you can develop. I know this sounds obvious, but the point is that people completely overlook basic communication skills as the foundation of being a great designer and doing great creative work.

Lots of features I design start off as docs. Or even conversations! Sometimes I just explain ideas with voice notes and then formalize them later with sketches. I’ll explain user flows using arrows, describing how events flow from one event -> to the other -> and back.

Or, I’ll often use bracket notation to organize lists, just like I do in code, so that I can easily distinguish [groups, of, items]. Even figuring out how to properly structure good lists is a kind of information design, and is really useful for all kinds of communciation, like:

Not all design work is done in code, prototyping tools, or sketches. Likewise, not all engineering work is done in code or technical diagrams. Natural language, text, and conversations should be some of your primary mediums for creative work. My best designing actually happens when I’m just talking to people— talking through the primitives of a system, use cases, and following the rabbit hole wherever it takes me. I’ve done this personally through making “streams” which are my personal, tiny blog posts that look like DMs.

Analogies

On that note, one of the most important sub-skills for writing and conversation as a design medium is learning how to create great analogies. Douglas Hofstadter thinks that analogies are actually the core of cognition, which I buy.

Beyond the theory though, great analogies have a lot of tangible benefits to the creative process, similar to the ones I described about writing for people outside of your field. My parents don’t work in tech, my grandparents speak mostly Russian, and I have plenty of friends who aren’t engineers or designers. Being surrounded by them helps ground me and makes me explain what care about in simple ways. Of course I have friends that I can get really low-level with, but explaining myself without jargon helps me accomplish multiple things:

We’ve seen a lot of this around the internet, mostly in the form of ELI5 (explain like I’m 5). I also like explain this like we’re at a party, but I really hope you don’t get into conversations about abstraction with random people at parties

Concrete examples

Speaking of primitives and abstractions, whenever you’re explaining something complex, it’s usually really helpful to provide concrete, relatable (duh), and sometimes oversimplified examples of your idea. Make the abstract conrete!!! The whole point of an abstraction in the first place is generalizing from a set of real observations. Of course you can create abstractions on top of other abstractions too (and this happens in math all the time), but almost every abstract idea or rule can be reduced down into a set of approachable examples.

Say you’re explaining what Snapchat to someone who hasn’t seen a smartphone before and might only be familiar with analog cameras. It’s probably not very helpful to say “It’s just an app for sending disappearing pictures to your friends.” What’s an app? What do you mean it disappears? How is it being sent to your friend?

It might make more sense to say “it’s like a camera that mails pictures to your friends. Just like how Polaroid pictures fade in, imagine these pictures fade out after opening them. They disappear because they’re usually meant to be private and only looked at for a moment.”

This is obviously exaggerated and there’s still a few holes in the analogy, but it makes the core concepts much more tangible to someone who isn’t familiar with Snapchat in its native digital medium. This is also where LLMs might start to help us significantly with cross-cultural communciation: effortlessly creating effective examples and analogies to explain concepts to people from different backgrounds.

So what now?

Up to you! If you’re just getting started in design or engineering, take the time to dive deep into any one of these areas. If you want to learn more informally, just write, find writing you like, read about computer science, build some projects, and have fun. These are the kinds of skills you can get good out informally if you just spend enough time doing things you like that involve them, but I’ll probably make another blog post that has a bit more formal guidance on resources / courses / curriculum around these topics.