Thursday, October 16, 2025

Identical Concept, Totally different Paint Brush


There’s the idiom that claims all the pieces seems to be like a nail when all you could have is a hammer. I additionally like the one about worms in horseradish seeing the world as horseradish.

That’s what it felt like for me as I labored on music for an album of covers I launched yesterday.

I used to be raised by my mom, a former highschool artwork instructor (and a gifted artist in her personal proper), who uncovered me to a whole lot of totally different instruments and supplies for portray and drawing. I’m satisfied that’s what pointed me within the route of net improvement, despite the fact that we’re speaking years earlier than the web of AOL and 56K dial-up modems. And simply as there’s artwork and craft to producing a inventive 2D visible on paper with moist paint on a brush, there’s a stage of artwork and craft to designing person interfaces which might be written in code.

You may even say there’s a poetry to code, simply as there’s code to writing poetry.

I’ve been portray with code for 20 years. HTML, CSS, JavaScript, and pals are my medium, and I’ve created a bunch of works since then. I do know my mother made a bunch of creative works in her 25+ years instructing and learning artwork. In a way, we’re each artists utilizing a special brush to provide works in numerous mediums.

Naturally, all the pieces seems to be like code once I’m observing a clean canvas. That’s whether or not the canvas is paper, a display, some Figma artboard, or what have you ever. Code is my horseradish and I’ve been marinating on this horseradish ocean for fairly some time.

That is what’s difficult to me about performing and producing an album of music. The work is completed in a special medium. The comb is now not code (although it may be) however sounds, be them vibrations that come from a bodily instrument or digital waves that come from a programmed beat or pattern.

There are parallels between portray with code and portray with sound, and it’s principally a matter of strategy. The ideas, duties, and challenges are the identical, however the brush and canvas are completely totally different.

What’s in your stack?

Sound isn’t any totally different than the net relating to choosing the proper instruments to do the work. Simply as you want a stack of technical instruments to provide a web site or app, you’ll need technical instruments to seize and produce sounds, and the choice impacts how that work occurs.

For instance, my improvement surroundings may embrace an editor app for writing code, a digital server to see my work domestically, GitHub for model management and collaboration, some construct course of that compiles and deploys my code, and a number that serves the ultimate product to everybody on the net to see.

Making music? I’ve recording software program, microphones, gobs of guitars, and an audio interface that connects them collectively in order that the bodily sounds I make are captured and transformed to digital sound waves. And, in fact, I want a distributor to serve the music to be heard by others simply as a number would serve code to be rendered as webpages.

Can your web site’s technical stack be so simple as writing HTML in a plain textual content editor and manually importing the file to a internet hosting service by way of FTP? In fact! Your album’s technical stack can simply as simply be a boombox with a in-built mic and recording. Be as indie or punk as you need!

Both approach, you’ve gotta set up a working surroundings to do the work, and that surroundings requires you to make choices that have an effect on the best way you’re employed, be it code, music, or portray for that matter. Personalize your course of and make it joyful.

It’s the “Recording Expertise” (EX) to what we consider as Developer Expertise (DX).

What’re you portray on?

When you’re portray, it might be paper. However what sort of paper? Is college-rule cool or do you want one thing extra substantial with heavier card inventory? You’re going to need one thing that helps the kind of paint you’re utilizing, whether or not it’s oil, water, acrylic… or lead? That wouldn’t be good.

On the net, you’re most frequently portray on a display that measures its area in pixel items. Screens are totally different than paper as a result of they’re not restricted by bodily constraints. Certain, the {hardware} could pose a constraint so far as how giant a sure display will be. However the scene itself is limitless the place we will scroll to any portion of it that isn’t within the present body. However please, keep away from AJAX-based infinite scrolling patterns in your work for everybody’s sake.

I’m additionally portray music on a display that’s as infinite because the canvas of a webpage. My recording software program merely exhibits me a timeline and I paint sound on prime of time, typically layering a number of sounds on the identical cut-off date — sound photos, if you’ll.

That’s merely a method to have a look at it. In some apps, it’s attainable to view the canvas as actions that maintain buckets of sound samples.

Screenshot of the Ableton Live recording app in grid view. There are nine colored columns representing song sections containing sound samples.

Identical factor with code. Authoring code is as more likely to occur in a code editor you sort into as it’s to occur with a point-and-click setup in a visible interface that doesn’t require touching any code in any respect (Dreamweaver, anybody?). Heck, the youngsters are even “vibe” coding now with none consciousness of how the code really comes collectively. Or possibly you’re tremendous low-fi and prefer to sketch your code earlier than sitting behind a keyboard.

How’re individuals utilizing it?

Internet builders be like all obsessive about how their work seems to be on no matter system somebody is utilizing. I do know you realize what I’m speaking about since you not solely resize browsers to verify responsiveness however most likely even have tried opening your web site (and others!) on a slew of various units.

⚠️ Auto-playing media
Animated gif showing a browser viewport being resized and how the layout adjusts to the changes.

It’s no totally different with sound. I’ve listened to every tune I’ve recorded numerous occasions as a result of the best way they sound varies from speaker to speaker. There’s one tune particularly that I almost scrapped as a result of I struggled to get it sounding good on my AirPods Max headphones which might be bass-ier than your typical speaker. I couldn’t deal with the placing distinction between that and a special output supply that is likely to be extra extensively used, like automotive audio system.

Will anybody really take heed to that tune on a pair of AirPods Max headphones? Most likely not. Then once more, I don’t know if anybody is viewing my websites on some display constructed into their fridge or washer, however you don’t see me dashing out to check that. I definitely do attempt to have a look at the websites I make on as many units as attainable to ensure nothing is totally busted.

A collage of various phone devices drawn in black and white line illustrations.

You may’t management what system somebody makes use of to have a look at a web site. You may’t management what audio system somebody makes use of to take heed to music. There’s a stage of person expertise and high quality assurance that each fields share. There’s an entire different layer about accessibility and inclusive design that matches right here as nicely.

There’s one massive distinction: The cringe of listening to your individual voice. I by no means really feel personally hooked up to the web sites I make, however listening to my sounds takes a sure stage of vulnerability and humility that I’ve to deal with.

The inventive course of

I discussed it earlier, however I feel the best way music is created shares a whole lot of overlap with how web sites are typically constructed.

For instance, a tune not often (if ever) comes absolutely fashioned. Most accounts I learn of musicians discussing their inventive course of discuss concerning the “magic” of a melody wherein it just about falls within the author’s lap. It typically begins because the germ of an concept and it’d take minutes, days, weeks, months, and even years to develop it right into a complete piece of labor. I hold my telephone’s Voice Memos app on the prepared in order that I’m capable of rapidly “sketch” concepts that strike me within the second. It’d merely be one thing I hum into the telephone. It might be strumming a couple of chords on the guitar that sound very nice collectively. No matter it’s, I like to consider these recordings as little low-fidelity sketches, not completely not like sketching web site layouts and content material blocks with paper and pencil.

A close up photo of a set of paper wireframes for a website project I worked on years ago.
I’m keen on sketching web sites on paper and pencil earlier than leaping straight into code.

It’s go time!

And, in fact, there’s what you do when it’s time to launch your work. I’m waist-deep on this a part of the music and I can most undoubtedly say that delivery an album has as many transferring elements, if no more, than deploying a web site. However they each require a whole lot of steps and dependencies that complicate the method. It’s no exaggeration that I’m extra confused and misplaced about music publishing and distribution than I ever felt studying about publishing and deploying web sites.

It’s completely comprehensible that somebody may get misplaced when internet hosting a web site. There’s so some ways to go about it, and the “proper” approach is shrouded within the cloak of “it relies upon” based mostly on what you’re attempting to perform.

Screenshot of an  FTP application with local files on the left and server connection settings on the right.

Nicely, identical goes for music, apparently. I’ve signed up for knowledgeable rights group that establishes me because the proprietor of the recordings, similar to how I have to register myself because the proprietor of a specific net area. On prime of that, I’ve enlisted the assistance of a distributor to make the songs out there for anybody to listen to and it’s precisely the identical idea as needing a number to distribute your web site over the wire.

I simply want I might programmatically push modifications to my music catalog. Importing and configuring the content material for an album launch jogs my memory a lot of manually importing hosted information with FTP. Nothing mistaken with that, in fact, however it’s definitely a chance to enhance the developer recording expertise.

So, what?

I assume what triggered this publish is the belief that I’ve been in a self-made rut. Not a foul one, thoughts you, however extra like being run by an automatic script programmed to run effectively in a single route. Engaged on a music undertaking pressured me into a brand new context the place my improvement surroundings and paint brush of code are approach much less efficient than what I have to get the job executed.

It’s kind of like breaking out of the grid. My format has been fairly mounted for a while and I’m drawing new grid tracks that open my creativeness as much as an entire new approach of labor that’s been proper in entrance of me your complete time, however drowned in my horseradish ocean. There’s a lot we will be taught from different disciplines, be it music, portray, engineering, structure, engaged on automobiles… seems front-end improvement is like a whole lot of different issues.

So, what’s your horseradish and what helps you look previous it?

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles