diff --git a/README.md b/README.md index 23977ed..f50671d 100644 --- a/README.md +++ b/README.md @@ -10,3 +10,4 @@ Run `julia --startup-file=no add_stuff.jl ` with arg `blog` or `p5`. ### Convert Will be automated (soon); in the meantime, run `julia build-blogs/run.jl` to convert all block markdown src.md files to index.html files. +Requires a local installation of [prettier](https://formulae.brew.sh/formula/prettier) diff --git a/add_stuff.jl b/add_stuff.jl index 692fbce..4a4eefe 100644 --- a/add_stuff.jl +++ b/add_stuff.jl @@ -28,7 +28,7 @@ function new_p5_project() str = replace(str, "{{ DIR_NAME }}" => dir_name) write(file, str) end - + @info "Adding new project to project index" let index_path = joinpath("projects", "index.html") @@ -58,12 +58,12 @@ function new_blog_post() @info "Creating new blog directory" blog_title dir_name cp(joinpath("blog", "__template"), dir) for file in readdir(dir; join=true) - if endswith(file, ".rss_blob.xml") || endswith(file, ".html.template") + if endswith(file, ".rss_blob.xml") || endswith(file, ".html.template") rm(file) continue end startswith(basename(file), ".") && continue - + @info "Updating $file..." str = read(file, String) str = replace(str, "{{ BLOG_TITLE }}" => blog_title) @@ -88,13 +88,15 @@ function new_blog_post() let new_blob = read(joinpath("blog", "__template", ".rss_blob.xml"), String) pub_date = Dates.format(now(Dates.UTC), dateformat"e, d U yyyy HH:MM:SS ") * "GMT" - new_blob = replace(new_blob, "{{ BLOG_TITLE }}" => blog_title, - "{{ PUB_DATE }}" => pub_date, "{{ BLOG_DIR }}" => dir_name) + new_blob = replace(new_blob, + "{{ BLOG_TITLE }}" => blog_title, + "{{ PUB_DATE }}" => pub_date, + "{{ BLOG_DIR }}" => dir_name) str = read("rss.xml", String) i = findfirst(NEW_BLOG_COMMENT, str) isnothing(i) && throw(ArgumentError("Oh no, $(NEW_BLOG_COMMENT) not found in $(index_path)")) - str = str[1:first(i)-1] * new_blob * str[(first(i)):end] + str = str[1:(first(i) - 1)] * new_blob * str[(first(i)):end] write("rss.xml", str) end diff --git a/blog/__template/index.html.template b/blog/__template/index.html.template index e78f50a..4936818 100644 --- a/blog/__template/index.html.template +++ b/blog/__template/index.html.template @@ -1,33 +1,31 @@ - + + + + + + $if(rawtitle)$$rawtitle$$else$$title$$endif$ + + $header$ + - - - - - $if(rawtitle)$$rawtitle$$else$$title$$endif$ - - $header$ - - - -
- -

$title$

+ +
+ +

$title$

$body$ -
-
    -
  • created: $created$
    • -
  • last updated: $updated$
    • -
  • tags: $for(tags)$$tags$$sep$, $endfor$
    • -
-
- - +
+ +
+ diff --git a/blog/clapping-music-for-flip-disc-displays/index.html b/blog/clapping-music-for-flip-disc-displays/index.html index 3f16125..c9bd8de 100644 --- a/blog/clapping-music-for-flip-disc-displays/index.html +++ b/blog/clapping-music-for-flip-disc-displays/index.html @@ -1,298 +1,317 @@ - + - - - - - - Clapping Music for two flip-disc displays - - - - - -
- -

Clapping Music for two flip-disc -displays

-

I present unto you: Steve Reich’s Clapping -Music, as performed by a pair of flip-disc displays:

- -

Read on for its provenance…

-

Down the flip-disc rabbit -hole

-Several years ago, I became obsessed with flip-disc -displays and the art made with them: -
-
- -
-
- -
-
-
- -
-
- -
-
-
-
- -
-
- - - -
-
-
-View this post on Instagram -
-
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
-
- -
-
- -
-
- -

-A -post shared by Ksawery Komputery (@ksawerykomputery) -

-
-
-
-
- -
-
- -
-
-
- -
-
- -
-
-
-
- -
-
- - - -
-
-
-View this post on Instagram -
-
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
-
- -
-
- -
-
- -

-A -post shared by Motus Art (@motus_art) -

-
-
-

As a result, my partner gifted me a pair of AlphaZeta -boards: one 7x28 flip-dots display, and one 7x4 seven-segment -flip-digits (“Vane”) display. We set them up in our living room and -programmed them to show the date, current outside temperature, and -current weather (prioritizing upcoming precipitation), updated on the -half hour.1

-

-Static image of two flip-disc displays, one reading '71 + sun icon', the other reading '6 sep friday' -

-

Our display has been running for nearly three years at this point, -with only minimal intervention (i.e., manual restarts after the power -goes off.2 It makes me so happy! Two unexpected -benefits:

-
    -
  1. My internal mapping of temperature (Farenheit) to garments of -clothing I should put on before going outside? MUCH better.
    2. -
  2. Passive awareness of clock time, as the -shickshick update on the hour/half hour is a -nice reminder that I need to jump into that meeting/head out to the -bus/consider going to bed.
    3. -
-

The source of that -mysterious ticking noise

-

One of my favorite things about electromechanical displays is how -visceral they are—that tiny “chk!” when changing state. The two displays -sound different from one another: while a single dot makes a soft snick, -such that updating many dots yields a whirring noise, a single digit’s -segment makes a much sharper clack, and a fast digits update creates an -agressive clacking din.

- - -

As soon as we had successfully sent commands to the boards (a win in -its own right!), I started playing around with playing basic rhythms -with them. I sent a video of a beat to a musician/composer friend, whose -immediate response was

-

-Screenshot of a message that reads 'ooh gotta make it do clapping music' -

-

They were right: I did gotta make it do -clapping music. Immediately. :D

-

Clapping Flipping music

-

Steve Reich’s Clapping -Music is a composition in which two performers (or -sets of performers) repeatedly clap a single 12-beat pattern. After -eight or twelve repeats, the second performer shifts their position in -the pattern back by a single beat. This process is repeated until the -second performer has shifted back to playing the original no-offset -pattern. The shifting offset causes a delightful phasing effect for -listeners.

-

Here is the clapped pattern:

-

-Single bar of 12/8 rhythm, with repeat -

-

and someone else’s very nice visualisation of its performance: -

-

The code for performing this on two flip-disc displays is relatively -simple:

-
function _clapping_music(sink_dots, sink_digits; pause=0.15,
+  
+    
+    
+    
+    Clapping Music for two flip-disc displays
+    
+    
+  
+
+  
+    

+      
+      

+        Clapping Music for two flip-disc displays
+      

+      

+        I present unto you: Steve Reich’s Clapping Music, as performed by a pair of flip-disc displays:
+      

+      
+      
Read on for its provenance…

+      
Down the flip-disc rabbit hole

+      Several years ago, I became obsessed with flip-disc displays and the art made with them:
+      

+        
+      

+      

+        
+      

+      

+        As a result, my partner gifted me a pair of AlphaZeta boards: one 7x28 flip-dots display, and one 7x4 seven-segment flip-digits (“Vane”) display. We set
+        them up in our living room and programmed them to show the date, current outside temperature, and current weather (prioritizing upcoming precipitation), updated on the half hour.1
+      

+      

+        Static image of two flip-disc displays, one reading '71 + sun icon', the other reading '6 sep friday'
+      

+      

+        Our display has been running for nearly three years at this point, with only minimal intervention (i.e., manual restarts after the power goes off.2 It
+        makes me so happy! Two unexpected benefits:
+      

+      
    
+        
  1. My internal mapping of temperature (Farenheit) to garments of clothing I should put on before going outside? MUCH better.
    2. 
+        
  2. 
+          Passive awareness of clock time, as the shickshick update on the hour/half hour is a nice reminder that I need to jump into that meeting/head out to the bus/consider going to bed.
+        
    3. 
+      

+      
The source of that mysterious ticking noise

+      

+        One of my favorite things about electromechanical displays is how visceral they are—that tiny “chk!” when changing state. The two displays sound different from one another: while a single dot makes a soft snick, such that updating
+        many dots yields a whirring noise, a single digit’s segment makes a much sharper clack, and a fast digits update creates an agressive clacking din.
+      

+      
+      
+      

+        As soon as we had successfully sent commands to the boards (a win in its own right!), I started playing around with playing basic rhythms with them. I sent a video of a beat to a
+        musician/composer friend, whose immediate response was
+      

+      

+        Screenshot of a message that reads 'ooh gotta make it do clapping music'
+      

+      

+        They were right: I did gotta make it do clapping music. Immediately. :D
+      

+      
Clapping Flipping music

+      

+        Steve Reich’s
+        Clapping Music
+        is a composition in which two performers (or sets of performers) repeatedly clap a single 12-beat pattern. After eight or twelve repeats, the second performer shifts their position in the pattern back by a single beat. This process
+        is repeated until the second performer has shifted back to playing the original no-offset pattern. The shifting offset causes a delightful phasing effect for listeners.
+      

+      
Here is the clapped pattern:

+      

+        Single bar of 12/8 rhythm, with repeat
+      

+      

+        and someone else’s very nice visualisation of its performance:
+        
+      

+      
The code for performing this on two flip-disc displays is relatively simple:

+      

+        
function _clapping_music(sink_dots, sink_digits; pause=0.15,
                          clap_pattern=Bool[1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0],
                          num_repeats=12, num_shifts=length(clap_pattern) + 1,
                          num_dots_to_set=28, num_digits_to_set=2)
@@ -307,103 +326,130 @@ 
Clapping Flipping music

         end
         i_pattern_shift += 1
     end
-end

-
The included parameters are:

-
    
-
  • pause: Adjusts the playback speed
    • 
-
  • clap_pattern, num_repeats,
-num_shifts: While the default composition is Reich’s, the
-same approach can be used to play any other pattern with any other shift
-approach. I thought it could be fun to play with these! (Also, sometimes
-one wants to demo the piece without playing through the whole
-thing…)
    • 
-
  • num_dots_to_set,
-num_digit_segments_to_set: The relative volume difference
-between a single disc flipping on each of the two boards was noticeable
-enough that, if the same number of discs were flipped per “clap” on each
-board, the digits board drowned out the dots board. I therefore cut down
-the number of flip-digit segments toggled until the boards “clapped” at
-roughly the same volume. Due to randomness in discs flipped, this is
-actually the maximum number of discs flipped per clap (e.g., all “on” to
-all “off”), but in practice the variation is mild enough that it sounds
-good enough, and I don’t need to keep track of and adjust the previous
-state.
    • 
-

-
The resultant performance sounds pretty cool:

-
-
This is an abridged version, where I repeat each bar only
-twice instead of all 12 times; the full unabridged performance is at the
-top of this post.

-
Playing around with different clap patterns is also fun:

-
# Variant A
+end

+      

+      
The included parameters are:

+      
    
+        
  • pause: Adjusts the playback speed
    • 
+        
  • 
+          clap_pattern, num_repeats, num_shifts: While the default composition is Reich’s, the same approach can be used to play any other pattern with any other shift approach. I thought it could be
+          fun to play with these! (Also, sometimes one wants to demo the piece without playing through the whole thing…)
+        
    • 
+        
  • 
+          num_dots_to_set, num_digit_segments_to_set: The relative volume difference between a single disc flipping on each of the two boards was noticeable enough that, if the same number of discs were flipped per
+          “clap” on each board, the digits board drowned out the dots board. I therefore cut down the number of flip-digit segments toggled until the boards “clapped” at roughly the same volume. Due to randomness in discs flipped, this is
+          actually the maximum number of discs flipped per clap (e.g., all “on” to all “off”), but in practice the variation is mild enough that it sounds good enough, and I don’t need to keep track of and adjust the previous state.
+        
    • 
+      

+      
The resultant performance sounds pretty cool:

+      
+      

+        This is an abridged version, where I repeat each bar only twice instead of all 12 times; the full unabridged performance is at the top of this post.
+      

+      
Playing around with different clap patterns is also fun:

+      
# Variant A
 clap_pattern = Bool[1, 0, 0, 1, 1, 1]
 pause=0.12
 num_repeats=2
 num_dots_to_set=14
 num_digits_to_set=4

-
-
# Variant B
+      
+      
# Variant B
 clap_pattern = Bool[1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 0]
 pause=0.15
 num_repeats=2
 num_dots_to_set=28
 num_digits_to_set=14

-
-
I particularly enjoy that, because the two boards have different disc
-flip timbres, the overall effect is of two different performers—just as
-there would be with two human performers with slightly different claps.
-While the piece could just as easily be performed on a single flip-disc
-board, or on two different boards of the same type, the current
-presentation is quite pleasing.

-
What’s next?

-
Yet to be determined! If you have fun ideas to try—or additional
-electromechanical displays for me to play with!—do reach out. :) A
-friend recently suggested adding the set of chromatic rainbow desk bells
-displayed nearby to the performance, which would be pretty cool; I’m
-still mulling over how best to implement her idea. If you want to pair
-with me on that….

-

-Photo of two rows of rainbow desk bells.
-

-

-
The full code for this display—including set-up
-instructions—is available on GitHub. Thanks to
-AF for filming the examples here, and to Cosmo for putting up with us
-being annoying while she was trying to sleep.

-
-

-

-
Footnotes

-
    
-
  1. This setup took non-zero effort: this was my first real
-Raspberry Pi project, and while the AlphaZeta boards shipped with a
-basic Python application installed on a companion Raspberry Pi, we
-wanted lower-level control of their pixel arrays. We therefore needed to
-set up our Raspberry Pi, send serial commands to flip individual
-discs/segments on the display boards (using AlphaZeta’s serial
-communication protocol), and write (in Julia) the higher-level
-applications to display static text, scrolling text, and weather. We
-also had fun figuring out how we wanted to dislpay the project, and
-ended up modifying a spare Ikea shelf for that purpose.↩︎
    2. 
-
  2. Yes, I know this is automatable, I just haven’t done it
-yet!↩︎
    3. 
-

-

-    

-    
    
-      
  • created: 2024-09-14
    • 
-      
  • last updated: 2024-09-14
    • 
-      
  • tags: project-writeup, electromechanical-display, raspberry-pi, music, programming, hardware, software, julia
    • 
-    

-
- - + +

+ I particularly enjoy that, because the two boards have different disc flip timbres, the overall effect is of two different performers—just as there would be with two human performers with slightly different claps. While the piece + could just as easily be performed on a single flip-disc board, or on two different boards of the same type, the current presentation is quite pleasing. +

+

What’s next?

+

+ Yet to be determined! If you have fun ideas to try—or additional electromechanical displays for me to play with!—do reach out. :) A friend recently suggested adding the set of chromatic rainbow desk bells displayed nearby to the + performance, which would be pretty cool; I’m still mulling over how best to implement her idea. If you want to pair with me on that…. +

+

+ Photo of two rows of rainbow desk bells. +

+
+

+ The full code for this display—including set-up instructions—is available on GitHub. Thanks to AF for filming the examples here, and to Cosmo for putting up with us being + annoying while she was trying to sleep. +

+ +
+
+

Footnotes

+
    +
  1. +

    + This setup took non-zero effort: this was my first real Raspberry Pi project, and while the AlphaZeta boards shipped with a basic Python application installed on a companion Raspberry Pi, we wanted lower-level control of their + pixel arrays. We therefore needed to set up our Raspberry Pi, send serial commands to flip individual discs/segments on the display boards (using AlphaZeta’s serial communication protocol), and write (in Julia) the + higher-level applications to display static text, scrolling text, and weather. We also had fun figuring out how we wanted to dislpay the project, and ended up modifying a spare Ikea shelf for that purpose.↩︎ +

    +
    2. +
  2. +

    Yes, I know this is automatable, I just haven’t done it yet!↩︎

    +
    3. +
+
+
+
    +
  • created: 2024-09-14
    • +
  • last updated: 2024-09-14
    • +
  • tags: project-writeup, electromechanical-display, raspberry-pi, music, programming, hardware, software, julia
    • +
+
+ diff --git a/blog/clapping-music-for-flip-disc-displays/src.md b/blog/clapping-music-for-flip-disc-displays/src.md index b650a6d..20edc37 100644 --- a/blog/clapping-music-for-flip-disc-displays/src.md +++ b/blog/clapping-music-for-flip-disc-displays/src.md @@ -42,7 +42,7 @@ As soon as we had successfully sent commands to the boards (a win in its own rig They were right: I ***did*** gotta make it do clapping music. Immediately. :D -## ~Clapping~ Flipping music +## ~~Clapping~~ Flipping music Steve Reich's [***Clapping Music***](https://en.wikipedia.org/wiki/Clapping_Music) is a composition in which two performers (or sets of performers) repeatedly clap a single 12-beat pattern. After eight or twelve repeats, the second performer shifts their position in the pattern back by a single beat. This process is repeated until the second performer has shifted back to playing the original no-offset pattern. The shifting offset causes a delightful phasing effect for listeners. diff --git a/blog/cuttle-obsession/index.html b/blog/cuttle-obsession/index.html index 1a3a1bb..d911478 100644 --- a/blog/cuttle-obsession/index.html +++ b/blog/cuttle-obsession/index.html @@ -1,483 +1,324 @@ - + - - - - - - Obsessed with Cuttle: Parametric CAD for prototyping, -producing, and procrastinating - - - - - -
- -

Obsessed with Cuttle: Parametric CAD for prototyping, producing, -and procrastinating

-

One of my primary creative outlets this year has been playing with -the CNC laser cutter1 at my library’s makerspace. It is -the first CNC (“computer numerical control”, i.e., -computer-programmable) shop tool I’ve gotten comfortable and fluent -with: while I’ve worked informally with plenty of manual shop -tools for wood and metal, I’ve never previously bridged that -programming/shop divide.2 Unsurprisingly, it is SO. MUCH. -FUN.

-
- - - -
-

There is a vast and inspiring community of makers who share their -laser cutter designs and knowledge online. I used some of these -pre-existing projects to get comfortable with the machine, and then -wanted to move on to designing my own projects—both fully from scratch -and by iterating on projects I’ve seen someone else create. To do that, -I found Cuttle.

-

Cuttle is a web-based 2D parametric computer-aided design (CAD) tool. -It is easy to learn, has a full-featured free tier, and—most -importantly—it Just Works™. It has a clean and usable interface (not a -given with CAD!), several high-quality tutorials for getting started, -and a bunch of project templates of varying degrees of complexity, which -serve as both a teaching tool (“how was this piece constructed? look at -the internals to figure it out!”) and a starting point for customization -(it is trivially easy to clone an existing project and modify it -yourself). While it includes many built-in components and modifiers, it -also supports custom JavaScript code. This means that it is both easy -for non-programmers to use, and extensible by folks who want additional -customization.

-

In short, Cuttle is a powerful design system with an exceptionally -shallow learning curve, a commendable set of tutorials and pre-existing -templates, and an active and welcoming community in which its developers -actively participate.

-

Also, now I’m addicted to it.

-

How do I CAD thee? Let -me count the ways

-

There are several types of activity for which I’ve turned to -Cuttle:

-
    -

  • Creation of physical laser-cutter objects. This -is the most straight-forward situation, and why I started using Cuttle -in the first place: I have a set of shapes that I need to be able to cut -with the laser cutter, in service of building a physical object. I build -them in Cuttle, export them as SVG files, and then import and print them -from the laser cutter.

    -

    Examples (illustrated in the following section): decorative bookends, a doorbell chime cover, and assorted calibration tools.

    • -

  • Exploration of arbitrary -patterns/shapes/concepts. This situation is a natural result of -Cuttle being fun to play with. When I see an interesting shape or -pattern, I now think “hrm, how might I construct that?” and then I give -it a try. Notably, instead of hard-coding specific dimensions or -qualities of the item (number of sides, number of repeats, sizes of -angles, etc), I attempt to parameterize them in different ways: instead -of making a 6-sized shape, I’ll make an n-sided shape and -set n as a Cuttle variable. Then, once I have successfully -completed the original item, I can play with those parameters to see -what other interesting shapes or designs fall out. (In case it doesn’t -go without saying, there is no one way to parameterize a design! Therein -lies the madness creativity.)

    -

    Examples: assorted pattern studies, poem.

    • -

  • Non-CAD prototyping. These situations have come -about because when I am having fun in CAD software, every problem looks -like it can be solved with CAD. Instead of defaulting to other more -familiar-to-me programming paradigms/languages/environments when working -on these projects, I used Cuttle for the prototype stage.

    -

    Examples: music box punch -cards, weaving cartoon, parallax animation.

    • -
-

Show, don’t tell

-

The following are an un-ordered selection of projects I’ve designed -myself—or in a couple cases, have significantly modified from someone -else’s initial design.3 I encourage you to go to at least -one of the associated project pages and play around with any parameters -that are visible; you can’t possibly break anything, and it’s really -fun.

-

Bookends

-

Play with this project here!

-
- - - -
-

These decorative bookends were designed as a gift. There are two -aspects of this project I’m especially proud of. First, the initial -conception of “faceplate designed to attach (with magnets) to cheap -metal bookends,” including correctly managing registration (i.e., -alignment of the piece) during printing, to engrave both front and -back.

-
- - - -
-

Second, I’m pleased with the specific book icon I designed. The book -icon is parameterized on number of pages, page and cover thickness, and -open angle:

-
- - - -
-

You can see that the bookends each play with that design in a -different way—note the changing number of pages for the left design, and -the degrees of openness of each book on the right.

-
- - - -
-

-*** -

-

Doorbell chime cover

-

Play with this project here!

-
- - - -
-

I designed this decorative doorbell cover for my parents, to replace -an original doorbell chime cover that they didn’t like. I started from a -basic Cuttle -box template, and then added a design to the sides, a decorated -front plate, and a cutout on the bottom for the chimes.

-
- - - -
-

It took me a while to build this, as I did a lot of angsting over how -to decorate it—the only project requirement was that the size and bottom -cutout matched the original, so that it would fit. Eventually I got -unstuck by building a single little snowflake pattern unit and then -playing around with with repeating and incrementally scaling a couple -parameters until it felt visually pleasing.

-
- - - -
-

I also had to cut a bunch of test pieces to see how thin I could get -the lines on the decorative cutouts before they were too thin for the -laser to handle.

-
- - - -
-

-*** -

-

Punch cards for music boxes!

-

Play with this project here!

-
- - - -
-

This was a project I’ve wanted to do for a long time: automatically -generate and cut the music rolls played by a mechanical music box. I’m -planning to document this project with its own write-up, so am -intentionally skimping on details here.

-
- - - -
-

These music box rolls are an example of using Cuttle to prototype: -rather than building out an end-to-end MIDI-to-SVG pipeline -(midi2svg!), I instead converted MIDI to note index -coordinates in an external Julia script, and then plugged the output -coordinates of that script into a Cuttle template. This allowed me to -spend my development time easily tweaking print parameters (hole -spacing, metadata engraving, roll pagination, etc) with immediate visual -feedback. When I turn it into an end-to-end system in the future, I -won’t include Cuttle in the pipeline, and I knew that from the start, -but it still made the development process easier and faster for me than -it would have been otherwise.

-

-*** -

-

Card display for a -truck-loving kid

-

Play with this project here!

-
- - - -
-

My young niblings have a Yoto player, along with a -collection of various story and music cards; I made this card holder for -them so that they could see their entire library at a glance.4 (A Yoto player is a small portable -music box for kids; specific playlists are triggered by inserting a -corresponding card.) While I CADed this myself, I modeled it off of card -holders I saw elsewhere on the internet, and made it customizable for -the number of cards in a collection.

-

The aspect of this project that I was most excited about was the -color: I cut the piece from Glowforge Draftboard—a medium-density -fiberboard material—and then painted it with watercolor paint (!) and -sealed it.

-

The aspect of this project that the recipient was most excited about -was that the truck design was one that he specifically likes to color in -during quiet time, when printed at a slightly larger scale.

-

-*** -

-

A handful of calibration -tools

-

Play with the various calibrators here!

-
- - - -
-

Most of these were in support of some other project, either public or -non, for learning how to appropriately tune the laser cutter across -different materials. You can see the ones where I thought I was -engraving words but was actually cutting all the way through the -material (whoops!), and also the ones where I scrawled on them to be -able to later map back to various print settings.

-

-*** -

-

Weaving cartoon

-

Play with this project here!

-
- - - -
-

My mom is a weaver; she asked me to make a “weaving cartoon” (i.e., a -mock-up) in service of potentially weaving a site-specific piece. (What -she requested was a very basic hacky photoshop collage…instead I had -some fun in Cuttle. Overkill!)

-

-*** -

-

Pattern studies

-

Play with these projects here!

-
- - - -
-

Pattern studies are how I “let” myself procrastinate these days. I -could respond to that email…or I could see how quickly I can -implement a basic moiré -pattern. ¯\_(ツ)_/¯ I didn’t previously do this type of pattern -playing, except maybe via the occasional doodle. Now I do it -regularly, and it scratches the dual creativity itches of “constrained -problem solving” followed by “open-ended exploration and search for -visually interesting results”. (Translation: Making pretty pictures is -fun.)

-

The approach is basic: I see a pattern I think is cool and then I -have a go at CADding it.

-
- - - -
-

Once you start thinking in CAD components, it is very hard to -stop—but it does make the world more interesting at large! Hard to be -bored if you can instead be thinking through how you’d replicate the -design of the wallpaper/that building across the street/the figure you -saw in a scientific paper/etc.

-
- - - -
-

I was sick for a week mid-summer,5 and while I was both -low-energy and going stir-crazy, I ended up sketching up some kumiko -patterns to keep myself amused:

-
- - - -
-

After the initial pattern recreation, I love seeing the additional -patterns that fall out of tweaking various angles and ratios. For -example, here’s a close-up of one of the kumiko patterns:

-
- - - -
-

And that same pattern, after scaling some of the parameters to -various degrees:

-

And an alternate set of variations:

-

-*** -

-

Animating parallax

-

Play with this project here!

-
- - - -
-

I wanted to test out a basic animation with parallax, in service of a -future flip book-type application. It worked! Onward to images that take -longer than 3 minutes to draw…

-

-*** -

-

A poem!

-

Play with this project here!

-
- - - -
-

Last but not least, the most off-label task I’ve used Cuttle for thus -far: a poem. I made this as a creative coding exercise while at the Recurse Center. During the weekly -creative coding session, attendees have ~1.5 hours to build something -based on a prompt received at the start of the session (anything, in any -programming language or paradigm!). The week’s prompt had been -“Everybody has a hungry heart,” so I approached it by way of a very -basic custom modifier in Cuttle.

-

I’m actually really pleased with how this one turned out, and it -makes me want to do more interactive poem-type pieces in the future. I -encourage you to make your own Cuttle poem—it doesn’t have to be fancy! -If you do, please share it with me.6

-

-*** -

-

Wrap-up

-

And that’s all that’s worth sharing for now! The amount of time it -took to make any of these depended strongly on the complexity of the -pattern, my familiarity with the various tools at the point I made it, -and how much time I spent strategizing ahead of time. Some of the -projects here took days (the music box rolls, the doorbell chime box, -etc) while others were much faster. The moiré pattern took ~15 minutes, -if that.

-

Cuttle isn’t without flaws—but also, it is relatively new software, -and is under active and responsive development. So far I’ve been able to -design around any limitations I’ve encountered.7 The -biggest problem with Cuttle is that it is fun. Too fun. Too easy to say -“oh, let me just try one more thing…” and then come up for air to find -that it is 1am. 🙃

-

A gallery of all my Cuttle work can be found here. Thanks to the folks at -the The -Hive, the Cambridge Public Library’s makerspace, for their laser -cutter trainings and assistance. Thanks to the team at Cuttle for -building such an awesome tool.

-
-
-

Footnotes

-
    -

  1. Technically my makerspace has two laser cutters, an Epilog -Zing and a Glowforge; while -I’ve trained to use both, I prefer the Zing. I’ll save the reasoning—and -my Zing workflow—for a future write-up. Both are great, though, for -different reasons.↩︎

    2. -

  2. I had one aborted attempt many years ago, where I got -trained to use a very large (and very cool!) CNC laser cutter for -working with sheet metal. Lack of materials, lack of transport for -acquiring materials, and lack of initiative for solving either issue -proved prohibitive, so I never ended up making anything with it. Now -that I feel comfortable with this desktop-sized CNC machine, I feel a -lot more empowered (not to mention motivated!) to try the large-format -version.↩︎

    3. -

  3. I’m not including pre-existing Cuttle templates that -I’ve printed-but-not-altered, although those are also nifty. E.g., this -mini -Crankie, which makes a particularly fun/customizable gift.↩︎

    4. -

  4. “…and remember that music other than Helper -Cars exists,” I thought, to no avail!↩︎

    5. -

  5. I’ll give you one guess what with…↩︎

    6. -

  6. You can find me over in the Cuttle Discord server, at the -handle @hannahilea (naturally!).↩︎

    7. -

  7. Sometimes large numbers of objects (or modifiers that -I’m asking to do A Lot™) cause my browser to choke. Is that truly the -fault of the software? I suspect that it’s more that my approach to a -given design needs rethinking, and I need to simplify it. So far I -haven’t run into anything so problematic that I’ve needed to ask for -assistance, as it has been fast enough to redesign the offending part in -an alternate way. Until further notice, let’s assume that this browser -choking is a me-issue and not a fundamental limitation of the -software.↩︎

    8. -
-
-
-
    -
  • created: 2024-09-27
    • -
  • last updated: 2024-09-27
    • -
  • tags: project-writeup, cuttle, cad, programming, prototyping, javascript, creative-coding, makerspace
    • -
-
- - + + + + + Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating + + + + +
+ +

Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating

+

+ One of my primary creative outlets this year has been playing with the CNC laser cutter1 at my library’s makerspace. It is the first CNC (“computer + numerical control”, i.e., computer-programmable) shop tool I’ve gotten comfortable and fluent with: while I’ve worked informally with plenty of manual shop tools for wood and metal, I’ve never previously bridged that + programming/shop divide.2 Unsurprisingly, it is SO. MUCH. FUN. +

+
+ Side-by-side photo of decorated bookend faceplates with their original CAD rendering +
+

+ There is a vast and inspiring community of makers who share their laser cutter designs and knowledge online. I used some of these pre-existing projects to get comfortable with the machine, and then wanted to move on to designing my + own projects—both fully from scratch and by iterating on projects I’ve seen someone else create. To do that, I found Cuttle. +

+

+ Cuttle is a web-based 2D parametric computer-aided design (CAD) tool. It is easy to learn, has a full-featured free tier, and—most importantly—it Just Works™. It has a clean and usable interface (not a given with CAD!), several + high-quality tutorials for getting started, and a bunch of project templates of varying degrees of complexity, which serve as both a teaching tool (“how was this piece constructed? look at the internals to figure it out!”) and a + starting point for customization (it is trivially easy to clone an existing project and modify it yourself). While it includes many built-in components and modifiers, it also supports custom JavaScript code. This means that it is + both easy for non-programmers to use, and extensible by folks who want additional customization. +

+

+ In short, Cuttle is a powerful design system with an exceptionally shallow learning curve, a commendable set of tutorials and pre-existing templates, and an active and welcoming community in + which its developers actively participate. +

+

Also, now I’m addicted to it.

+

How do I CAD thee? Let me count the ways

+

There are several types of activity for which I’ve turned to Cuttle:

+
    +
  • +

    + Creation of physical laser-cutter objects. This is the most straight-forward situation, and why I started using Cuttle in the first place: I have a set of shapes that I need to be able to cut with the laser + cutter, in service of building a physical object. I build them in Cuttle, export them as SVG files, and then import and print them from the laser cutter. +

    +

    + Examples (illustrated in the following section): decorative bookends, a doorbell chime cover, and assorted + calibration tools. +

    +
    • +
  • +

    + Exploration of arbitrary patterns/shapes/concepts. This situation is a natural result of Cuttle being fun to play with. When I see an interesting shape or pattern, I now think “hrm, how might I construct that?” + and then I give it a try. Notably, instead of hard-coding specific dimensions or qualities of the item (number of sides, number of repeats, sizes of angles, etc), I attempt to parameterize them in different ways: instead of + making a 6-sized shape, I’ll make an n-sided shape and set n as a Cuttle variable. Then, once I have successfully completed the original item, I can play with those parameters to see what other + interesting shapes or designs fall out. (In case it doesn’t go without saying, there is no one way to parameterize a design! Therein lies the madness creativity.) +

    +

    Examples: assorted pattern studies, poem.

    +
    • +
  • +

    + Non-CAD prototyping. These situations have come about because when I am having fun in CAD software, every problem looks like it can be solved with CAD. Instead of defaulting to other more familiar-to-me + programming paradigms/languages/environments when working on these projects, I used Cuttle for the prototype stage. +

    +

    Examples: music box punch cards, weaving cartoon, parallax animation.

    +
    • +
+

Show, don’t tell

+

+ The following are an un-ordered selection of projects I’ve designed myself—or in a couple cases, have significantly modified from someone else’s initial design.3 + I encourage you to go to at least one of the associated project pages and play around with any parameters that are visible; you can’t possibly break anything, and it’s really fun. +

+

Bookends

+

+ Play with this project here! +

+
+ Side by side photos of a set of books being held up by a bookend, each decorated differently with engraved book icons +
+

+ These decorative bookends were designed as a gift. There are two aspects of this project I’m especially proud of. First, the initial conception of “faceplate designed to attach (with magnets) to cheap metal bookends,” including + correctly managing registration (i.e., alignment of the piece) during printing, to engrave both front and back. +

+
+ Photo of the back of a flat bookend, with magnets glued on to attach it to the underlying metal bookend +
+

Second, I’m pleased with the specific book icon I designed. The book icon is parameterized on number of pages, page and cover thickness, and open angle:

+
+ Animated image of a line drawing of an open book, with the line dimensions shifting and the book opening +
+

You can see that the bookends each play with that design in a different way—note the changing number of pages for the left design, and the degrees of openness of each book on the right.

+
+ Side-by-side photo of decorated bookend faceplates with their original CAD rendering +
+

***

+

Doorbell chime cover

+

+ Play with this project here! +

+
+ Photo and zoomed in photo of a decorated wood box hanging on a wall with doorbell chimes sticking out the bottom +
+

+ I designed this decorative doorbell cover for my parents, to replace an original doorbell chime cover that they didn’t like. I started from a basic + Cuttle box template, and then added a design to the sides, a decorated front plate, and a cutout on the bottom for the chimes. +

+
+ CAD rendering of the sides of a decorated box +
+

+ It took me a while to build this, as I did a lot of angsting over how to decorate it—the only project requirement was that the size and bottom cutout matched the original, so that it would fit. Eventually I got unstuck by building a + single little snowflake pattern unit and then playing around with with repeating and incrementally scaling a couple parameters until it felt visually pleasing. +

+
+ CAD rendering of a set of snowflake icons, with a gradually shifting scale +
+

I also had to cut a bunch of test pieces to see how thin I could get the lines on the decorative cutouts before they were too thin for the laser to handle.

+
+ A set of decorative strips cut in different widths +
+

***

+

Punch cards for music boxes!

+

+ Play with this project here! +

+
+ Photo of a mechanical music box, loaded to play a strip of paper with holes punched into it +
+

+ This was a project I’ve wanted to do for a long time: automatically generate and cut the music rolls played by a mechanical music box. I’m planning to document this project with its own write-up, so am intentionally skimping on + details here. +

+
+ Screencapture of a CAD drawing of a long rectangular shape with holes cut out. +
+

+ These music box rolls are an example of using Cuttle to prototype: rather than building out an end-to-end MIDI-to-SVG pipeline (midi2svg!), I instead converted MIDI to note index coordinates in an external Julia script, + and then plugged the output coordinates of that script into a Cuttle template. This allowed me to spend my development time easily tweaking print parameters (hole spacing, metadata engraving, roll pagination, etc) with immediate + visual feedback. When I turn it into an end-to-end system in the future, I won’t include Cuttle in the pipeline, and I knew that from the start, but it still made the development process easier and faster for me than it would have + been otherwise. +

+

***

+

Card display for a truck-loving kid

+

+ Play with this project here! +

+
+ Photo of a rainbox-painted flat rectangle with parallel cut lines in it that are displaying cards +
+

+ My young niblings have a Yoto player, along with a collection of various story and music cards; I made this card holder for them so that they could see their entire library at a + glance.4 (A Yoto player is a small portable music box for kids; specific playlists are triggered by inserting a corresponding card.) While I CADed + this myself, I modeled it off of card holders I saw elsewhere on the internet, and made it customizable for the number of cards in a collection. +

+

The aspect of this project that I was most excited about was the color: I cut the piece from Glowforge Draftboard—a medium-density fiberboard material—and then painted it with watercolor paint (!) and sealed it.

+

The aspect of this project that the recipient was most excited about was that the truck design was one that he specifically likes to color in during quiet time, when printed at a slightly larger scale.

+

***

+

A handful of calibration tools

+

+ Play with the various calibrators here! +

+
+ Photos of small boards with holes of various sizes cut out +
+

+ Most of these were in support of some other project, either public or non, for learning how to appropriately tune the laser cutter across different materials. You can see the ones where I thought I was engraving words but was + actually cutting all the way through the material (whoops!), and also the ones where I scrawled on them to be able to later map back to various print settings. +

+

***

+

Weaving cartoon

+

+ Play with this project here! +

+
+ Animated image of a wall photo with a rectangular overlay that is being scaled in size and composition +
+

+ My mom is a weaver; she asked me to make a “weaving cartoon” (i.e., a mock-up) in service of potentially weaving a site-specific piece. (What she requested was a very basic hacky photoshop collage…instead I had some fun in Cuttle. + Overkill!) +

+

***

+

Pattern studies

+

+ Play with these projects here! +

+
+ Animated image of two overlaid grids shifting to cause moire patterns +
+

+ Pattern studies are how I “let” myself procrastinate these days. I could respond to that email…or I could see how quickly I can implement a basic moiré pattern. + ¯\_(ツ)_/¯ I didn’t previously do this type of pattern playing, except maybe via the occasional doodle. Now I do it regularly, and it scratches the dual creativity itches of “constrained problem solving” followed by + “open-ended exploration and search for visually interesting results”. (Translation: Making pretty pictures is fun.) +

+

The approach is basic: I see a pattern I think is cool and then I have a go at CADding it.

+
+ Side-by-side photo of a pattern punched into brass and the same pattern rended as a CAD drawing +
+

+ Once you start thinking in CAD components, it is very hard to stop—but it does make the world more interesting at large! Hard to be bored if you can instead be thinking through how you’d replicate the design of the wallpaper/that + building across the street/the figure you saw in a scientific paper/etc. +

+
+ Side-by-side figure with multiple repeating patterns and those same patterns reproduced in CAD +
+

+ I was sick for a week mid-summer,5 and while I was both low-energy and going stir-crazy, I ended up sketching up some + kumiko patterns to keep myself amused: +

+
+ Side-by-side photo of a zoomed in wooden kumiko pattern and the same pattern rended as a CAD drawing +
+

After the initial pattern recreation, I love seeing the additional patterns that fall out of tweaking various angles and ratios. For example, here’s a close-up of one of the kumiko patterns:

+
+ Side-by-side photo of a zoomed in wooden kumiko pattern and the same pattern rended as a CAD drawing +
+

And that same pattern, after scaling some of the parameters to various degrees: CAD of kumiko pattern progressively shifting

+

And an alternate set of variations: CAD of kumiko pattern shifting in another way

+

***

+

Animating parallax

+

+ Play with this project here! +

+
+ Animated image of a cartoon figure with mountains and trees moving in the background, implying forward motion by the character +
+

I wanted to test out a basic animation with parallax, in service of a future flip book-type application. It worked! Onward to images that take longer than 3 minutes to draw…

+

***

+

A poem!

+

+ Play with this project here! +

+
+ Animated image of a stack of roughly human-shaped outlines containing heart outlines, with the outlines becoming progressively more jumbled +
+

+ Last but not least, the most off-label task I’ve used Cuttle for thus far: a poem. I made this as a creative coding exercise while at the Recurse Center. During the weekly creative coding + session, attendees have ~1.5 hours to build something based on a prompt received at the start of the session (anything, in any programming language or paradigm!). The week’s prompt had been “Everybody has a hungry heart,” so I + approached it by way of a very basic custom modifier in Cuttle. +

+

+ I’m actually really pleased with how this one turned out, and it makes me want to do more interactive poem-type pieces in the future. I encourage you to make your own Cuttle poem—it doesn’t have to be fancy! If you do, please share + it with me.6 +

+

***

+

Wrap-up

+

+ And that’s all that’s worth sharing for now! The amount of time it took to make any of these depended strongly on the complexity of the pattern, my familiarity with the various tools at the point I made it, and how much time I spent + strategizing ahead of time. Some of the projects here took days (the music box rolls, the doorbell chime box, etc) while others were much faster. The moiré pattern took ~15 minutes, if that. +

+

+ Cuttle isn’t without flaws—but also, it is relatively new software, and is under active and responsive development. So far I’ve been able to design around any limitations I’ve encountered.7 + The biggest problem with Cuttle is that it is fun. Too fun. Too easy to say “oh, let me just try one more thing…” and then come up for air to find that it is 1am. 🙃 +

+

+ A gallery of all my Cuttle work can be found here. Thanks to the folks at the + The Hive, the Cambridge Public Library’s makerspace, for their laser cutter trainings and assistance. Thanks to the team + at Cuttle for building such an awesome tool. +

+
+
+

Footnotes

+
    +
  1. +

    + Technically my makerspace has two laser cutters, an Epilog Zing and a Glowforge; while I’ve trained to + use both, I prefer the Zing. I’ll save the reasoning—and my Zing workflow—for a future write-up. Both are great, though, for different reasons.↩︎ +

    +
    2. +
  2. +

    + I had one aborted attempt many years ago, where I got trained to use a very large (and very cool!) CNC laser cutter for working with sheet metal. Lack of materials, lack of transport for acquiring materials, and lack of + initiative for solving either issue proved prohibitive, so I never ended up making anything with it. Now that I feel comfortable with this desktop-sized CNC machine, I feel a lot more empowered (not to mention motivated!) to + try the large-format version.↩︎ +

    +
    3. +
  3. +

    + I’m not including pre-existing Cuttle templates that I’ve printed-but-not-altered, although those are also nifty. E.g., this mini Crankie, which + makes a particularly fun/customizable gift.↩︎ +

    +
    4. +
  4. +

    “…and remember that music other than Helper Cars exists,” I thought, to no avail!↩︎

    +
    5. +
  5. +

    I’ll give you one guess what with…↩︎

    +
    6. +
  6. +

    You can find me over in the Cuttle Discord server, at the handle @hannahilea (naturally!).↩︎

    +
    7. +
  7. +

    + Sometimes large numbers of objects (or modifiers that I’m asking to do A Lot™) cause my browser to choke. Is that truly the fault of the software? I suspect that it’s more that my approach to a given design needs rethinking, + and I need to simplify it. So far I haven’t run into anything so problematic that I’ve needed to ask for assistance, as it has been fast enough to redesign the offending part in an alternate way. Until further notice, let’s + assume that this browser choking is a me-issue and not a fundamental limitation of the software.↩︎ +

    +
    8. +
+
+
+
    +
  • created: 2024-09-27
    • +
  • last updated: 2024-09-27
    • +
  • tags: project-writeup, cuttle, cad, programming, prototyping, javascript, creative-coding, makerspace
    • +
+
+ diff --git a/blog/driven-developments/index.html b/blog/driven-developments/index.html index 82c8339..e91daae 100644 --- a/blog/driven-developments/index.html +++ b/blog/driven-developments/index.html @@ -1,264 +1,190 @@ - + + + + + + Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs + + - - - - - Dopamine-driven development (DDD), spite-driven development -(SDD), and other DDs - - - - - -
- -

Dopamine-driven development (DDD), spite-driven development -(SDD), and other DDs

-

A few weeks ago, Recurser -friend Nicole Tietz-Sokolskaya published Making -progress on side projects with content-driven development, an -excellent write-up about Doing Stuff in order to be able to Share About -Having Done Stuff™. You should read it!

-

Unfortunately for me, her denomination of “Content-driven -development” tripped some switch in my brain, and since then a rotating -slate of “X-driven development” variations have taken over. I started -with obsessing over spite-driven development (SDD), am currently on a -dopamine-driven development (DDD) kick, and have (today) shifted to a -rapidly changing moment-by-moment characterization of my actions: -feed-the-cat-driven development (FCDD)! Coffee-shop-driven development -(CSDD)! Beat-the-rain-home-driven development (BRHDD)! Perhaps writing -about it will help me keep the situation in check, before it becomes my -whole personality?1 We can only hope. In the meantime, I -am writing this post following muffin-driven development (MDD).2

-

What is a “driven -development”, anyway?

-

Many software engineers (and possibly only software -engineers?) are familiar with a process called test-driven -development (TDD). TDD is the OG “driven development”: it -defines both a specific approach to writing code (write a failing test, -see that it fails, write the code to make the test pass, write the next -failing test, repeat ad nauseam) and a general approach to software -development that emphasizes testing units of behavior rather -than units of code.3

-

TDD is part of the gestalt; there’s a reason Nicole’s “content-driven -development” was so mentally sticky, and that when I have said -“spite-driven development” to a number of software folks, I have -immediately been regaled with their own relevant experiences, no -additional explanation necessary.

-

As far as I’m aware, the “X-driven development” pattern -isn’t a widespread naming approach. There are at least a couple less -prevalent software engineering practices pattern-matched on TDD in -definition and naming, but nothing sweeping.

-

Also, there’s no reason this needs to be a software engineering -thing: in the same way that test-driven development can be applied to -any number of other non-software domains (devising a rubric for your -students’ end-of-unit essays; picking a metric with which to evaluate -your microbiology experiment; etc)4, there’s no reason any -other DD shouldn’t also bridge the nominal engineering/non-engineering -boundary.

-

Proposed “driven -development” criteria

-

While it’s fun to turn basically any noun into a DD (see also: -muffin-driven development!), I think the DDs that most resonate with me -(and feel like actual techniques) meet at least some of the following -requirements:

-
    -
  1. Leads to (and/or actively motivates) effort on the part of the -practitioner, i.e. some action/unit of progress/etc must occur as a -result of the technique that would not occur absent it, and/or
    2. -
  2. Provide a thought framework for reinterpreting a goal in a way that -makes it achievable, and/or
    3. -
  3. Provides an operating scaffold for working through steps towards -that goal.
    4. -
-

In short, “X-driven development” must aid the practitioner -in making desired progress towards some goal, by means of X. If -X is driving your development, you are practicing -XDD.

-

Like TDD, there’s a time and a place for each approach, and multiple -DDs can be used simultaneously.

-

X-driven development -examples

-

Some DDs I’ve identified as using most often myself, in no particular -order:

-

Dopamine-driven development -(DDD)

-

If you accomplish a task in a particular way, you will be given some -combination of attention, recognition, and/or praise; if you break it -down further into specific subtasks, you’ll maximize the amount or type -of praise per unit of work. DDD is a super-technique that overlaps with -many niche driven-developments; for example, Nicole’s content-driven -development can be a subtype of dopamine-driven development.

-

Checkbox-driven development -(ChDD)

-

Another flavor of DDD, but one where the tasks are known relatively -well up front so that they can be written down ahead of time and then -checked off systematically. ChDD encourages breaking tasks down into -stupidly small units, so that progress through the list feels smooth and -positively reinforcing. See also: First things -first: Make a list.

-

Procrastination-driven -development (PDD)

-

This is a dangerous one if unrecognized, as it is a variation of DDD -that runs counter to the most important task on your task list. If -wielded strategically, however, it can be used to make progress towards -two separate goals, by avoiding one in service of the other and then -switching back as the next task up becomes less desirable. For example, -instead of doing my laundry, I am stalling by editing this post.

-

Spite-driven development -(SDD)

-

Need I define this one? Everyone I’ve mentioned it to has their own -example of it; I’ve love to just list those here, but they were -discussed confidentially SO ask your friends about this. They will -surely have their own examples.

-

The overarching theme is one of

-
-

They said that I couldn’t do it, so I went and did it

-

– Connor Price

-
-

and/or “I am doing this to prove them (the great them) wrong”, and/or -“they said not to do it this way so I did it this way”, and/or “I warned -you that this will go badly and you said to do it anyway” , and/or … you -get the picture.

-

If you have never experienced SDD, congrats, you must be -exceptionally forgiving (or exceptionally disengaged, in a probably good -way!). Also, consider giving it a go sometime, it can be pretty fun!

-

If you realize that you’re practicing SDD regularly, you may want to -consider an attitude readjustment or a job and/or community change.

-

Speedrun-driven development -(SrDD)

-

You’ve learned a new skill! Congrats! Now you apply it as quickly as -possible to everything you can pattern match against.

-

SrDD is a subtype of DDD, and can pair nicely with SDD on occasion. -For example, I once spent a Certain Amount of Time (on the order of -days) investigating how a particular type of audio artifact (click) was -being introduced by one of my team’s algorithms; it took me a while to -understand the underlying pattern, but once I did I was able to solve a -bunch of similar bugs (both filed and un-filed) in a relatively short -period of time. Whew. Exhilarating!

-

Swear-driven development -(SwDD)

-

Welp, the deadline is tomorrow, regardless of how long you gave -yourself to work on it. Better cut some scope, cut some expectations, -and use the power of pure adrenaline—and some well-timed expletives—to -Get. It. Done. Also encountered if you have limited time booked on a -piece of equipment, and need to (random crazy example) cut a certain -number of pieces on the laser cutter in a too-short amount of time. (Can -pair nicely with content-driven development, if the task involves some -flavor of presentation.) If wielded adeptly, can stem from initial -anti-patterns such as hanger-driven development, and -under-the-thumb-of-capitalism-driven development.

-

Dancing-driven development -(DDD)

-

You’re feeling sluggish about working on a fairly mundane and -repetitive task, but you put on a jam and now you can’t help but power -through it. Often involves head-bobbing and chair dancing; can be -counter-productive if the music is too good, so an effective -practitioner must balance the chosen music against the current task.

-

Service-driven development -(SrvDD)

-

Someone in your community needs or wants something, and you know how -to make it happen for them! For me, this often shows up when making a -present or acting as tech support. When used as the target of PDD, SrvDD -can be a double-edged sword. (Alternative name: love-driven development -(LDD).)

-

-*** -

-

…and those are my big ones! I’ve found it useful to classify my -motivations like this; it has been helping me provide a sanity-check -about the goal of a given task, as well as help me recognize when I’ve -unintentionally gone off-task. I’ve also found that DD terminology does -a nice job of succinctly communicating my current state to others. It’ll -be interesting to see if I feel like using the terminology longer term, -or if it’s just a short-term meme.

-

I’ve started using DDD and SDD conversationally, and folks in my -circles have run with it in delightful ways—both by sharing their own -examples of spite-driven development (it’s the one that seems to stand -out!!) and by coining new “driven development” techniques. Keep ’em -coming!

-

FAQs

-

Q: Ooh, I have a great idea for a DD! What -now?
A: Bring it to life by using it! And/or -write it up in a blog post of your own (and share the link with me, -please)!

-

Q: Okay, but I have a job to do. What about, -like, paycheck-driven development? Or healthcare-driven -development?
A: Those are great DDs if they -work for you! Personally I find that I usually need a more specific -technique to drive my efforts on an minute-by-minute basis, but it’s all -context dependent.

-

Q: It seems like an awful lot of these overlap, -or maybe are even exactly the same, with a different name. Or like you’d -use multiple at once.
A: That isn’t a -question, but you’re totally right. For example, I am often powered by -both DDD and TDD, with an occasional background smattering of SDD! I -contain multitudes. You probably do too.

-

Q: I have a really cool idea for one: -string-theory driven development! But the acronym is…not ideal. What -gives?
A: That’s on you, friend. I have -confidence that you can use a trusty thesaurus to find an alternate -name. Or don’t, and own it!

-
-
-

Footnotes

-
    -

  1. Get-it-out-of-my-brain-driven development (GIOMBDD)↩︎

    2. -

  2. I chose a time to make muffins -that cut a liiiiiiittle too close to the Publication Accountabilibuddies -session I frequent, such that I am only now coming off the adrenaline of -getting them in the oven in time. The next step is to write as much as -possible before the oven timer goes off. How will I know I’m done? There -will be words on my page AND a muffin to consume. Muffin-driven -development!↩︎

    3. -

  3. I’ve found that many engineers seem to have strong -opinions about whether TDD is “good or not,” which is a generalization -that I don’t think is particularly useful. I also think TDD hate is -often misdirected and comes after not following the actual practices! -Early in my career, the company I worked at brought in a coach to give -the engineering team a multi-day TDD workshop. At the time I was too -junior to have strong opinions about it; now that I’ve experienced a -bunch of different software development goals and contextual -environments, I feel strongly that is extremely useful in the right -contexts, and extremely not useful in others.↩︎

    4. -

  4. Okay okay, I would not necessarily take TDD -literally in many domains—but it is certainly possible to think -through the “what-ifs” to understand what a failing case would look -like, and then what a successful case looks like. And it seems like -(from the TDD -wikipedia page) this cross-domain adoption is something that folks -already do. Good!↩︎

    5. -
-
-
-
    -
  • created: 2024-09-20
    • -
  • last updated: 2024-09-20
    • -
  • tags: musings, brainstorm, techspeak
    • -
-
- - + +
+ +

Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs

+

+ A few weeks ago, Recurser friend Nicole Tietz-Sokolskaya published + Making progress on side projects with content-driven development, an excellent write-up about Doing Stuff in order to be able to Share About + Having Done Stuff™. You should read it! +

+

+ Unfortunately for me, her denomination of “Content-driven development” tripped some switch in my brain, and since then a rotating slate of “X-driven development” variations have taken over. I started with obsessing over spite-driven + development (SDD), am currently on a dopamine-driven development (DDD) kick, and have (today) shifted to a rapidly changing moment-by-moment characterization of my actions: feed-the-cat-driven development (FCDD)! Coffee-shop-driven + development (CSDD)! Beat-the-rain-home-driven development (BRHDD)! Perhaps writing about it will help me keep the situation in check, before it becomes my whole personality?1 + We can only hope. In the meantime, I am writing this post following muffin-driven development (MDD).2 +

+

What is a “driven development”, anyway?

+

+ Many software engineers (and possibly only software engineers?) are familiar with a process called test-driven development (TDD). TDD is the OG + “driven development”: it defines both a specific approach to writing code (write a failing test, see that it fails, write the code to make the test pass, write the next failing test, repeat ad nauseam) and a general approach to + software development that emphasizes testing units of behavior rather than units of code.3 +

+

+ TDD is part of the gestalt; there’s a reason Nicole’s “content-driven development” was so mentally sticky, and that when I have said “spite-driven development” to a number of software folks, I have immediately been regaled with + their own relevant experiences, no additional explanation necessary. +

+

+ As far as I’m aware, the “X-driven development” pattern isn’t a widespread naming approach. There are at least a couple less prevalent software engineering practices pattern-matched on TDD in definition and naming, but + nothing sweeping. +

+

+ Also, there’s no reason this needs to be a software engineering thing: in the same way that test-driven development can be applied to any number of other non-software domains (devising a rubric for your students’ end-of-unit essays; + picking a metric with which to evaluate your microbiology experiment; etc)4, there’s no reason any other DD shouldn’t also bridge the nominal engineering/non-engineering boundary. +

+

Proposed “driven development” criteria

+

While it’s fun to turn basically any noun into a DD (see also: muffin-driven development!), I think the DDs that most resonate with me (and feel like actual techniques) meet at least some of the following requirements:

+
    +
  1. Leads to (and/or actively motivates) effort on the part of the practitioner, i.e. some action/unit of progress/etc must occur as a result of the technique that would not occur absent it, and/or
    2. +
  2. Provide a thought framework for reinterpreting a goal in a way that makes it achievable, and/or
    3. +
  3. Provides an operating scaffold for working through steps towards that goal.
    4. +
+

In short, “X-driven development” must aid the practitioner in making desired progress towards some goal, by means of X. If X is driving your development, you are practicing XDD.

+

Like TDD, there’s a time and a place for each approach, and multiple DDs can be used simultaneously.

+

X-driven development examples

+

Some DDs I’ve identified as using most often myself, in no particular order:

+

Dopamine-driven development (DDD)

+

+ If you accomplish a task in a particular way, you will be given some combination of attention, recognition, and/or praise; if you break it down further into specific subtasks, you’ll maximize the amount or type of praise per unit of + work. DDD is a super-technique that overlaps with many niche driven-developments; for example, Nicole’s content-driven development can be a subtype of dopamine-driven development. +

+

Checkbox-driven development (ChDD)

+

+ Another flavor of DDD, but one where the tasks are known relatively well up front so that they can be written down ahead of time and then checked off systematically. ChDD encourages breaking tasks down into stupidly small units, so + that progress through the list feels smooth and positively reinforcing. See also: First things first: Make a list. +

+

Procrastination-driven development (PDD)

+

+ This is a dangerous one if unrecognized, as it is a variation of DDD that runs counter to the most important task on your task list. If wielded strategically, however, it can be used to make progress towards two separate goals, by + avoiding one in service of the other and then switching back as the next task up becomes less desirable. For example, instead of doing my laundry, I am stalling by editing this post. +

+

Spite-driven development (SDD)

+

+ Need I define this one? Everyone I’ve mentioned it to has their own example of it; I’ve love to just list those here, but they were discussed confidentially SO ask your friends about this. They will surely have their own examples. +

+

The overarching theme is one of

+
+

They said that I couldn’t do it, so I went and did it

+

– Connor Price

+
+

+ and/or “I am doing this to prove them (the great them) wrong”, and/or “they said not to do it this way so I did it this way”, and/or “I warned you that this will go badly and you said to do it anyway” , and/or … you get the picture. +

+

If you have never experienced SDD, congrats, you must be exceptionally forgiving (or exceptionally disengaged, in a probably good way!). Also, consider giving it a go sometime, it can be pretty fun!

+

If you realize that you’re practicing SDD regularly, you may want to consider an attitude readjustment or a job and/or community change.

+

Speedrun-driven development (SrDD)

+

You’ve learned a new skill! Congrats! Now you apply it as quickly as possible to everything you can pattern match against.

+

+ SrDD is a subtype of DDD, and can pair nicely with SDD on occasion. For example, I once spent a Certain Amount of Time (on the order of days) investigating how a particular type of audio artifact (click) was being introduced by one + of my team’s algorithms; it took me a while to understand the underlying pattern, but once I did I was able to solve a bunch of similar bugs (both filed and un-filed) in a relatively short period of time. Whew. Exhilarating! +

+

Swear-driven development (SwDD)

+

+ Welp, the deadline is tomorrow, regardless of how long you gave yourself to work on it. Better cut some scope, cut some expectations, and use the power of pure adrenaline—and some well-timed expletives—to Get. It. Done. Also + encountered if you have limited time booked on a piece of equipment, and need to (random crazy example) cut a certain number of pieces on the laser cutter in a too-short amount of time. (Can pair nicely with content-driven + development, if the task involves some flavor of presentation.) If wielded adeptly, can stem from initial anti-patterns such as hanger-driven development, and under-the-thumb-of-capitalism-driven development. +

+

Dancing-driven development (DDD)

+

+ You’re feeling sluggish about working on a fairly mundane and repetitive task, but you put on a jam and now you can’t help but power through it. Often involves head-bobbing and chair dancing; can be counter-productive if the music + is too good, so an effective practitioner must balance the chosen music against the current task. +

+

Service-driven development (SrvDD)

+

+ Someone in your community needs or wants something, and you know how to make it happen for them! For me, this often shows up when making a present or acting as tech support. When used as the target of PDD, SrvDD can be a + double-edged sword. (Alternative name: love-driven development (LDD).) +

+

***

+

+ …and those are my big ones! I’ve found it useful to classify my motivations like this; it has been helping me provide a sanity-check about the goal of a given task, as well as help me recognize when I’ve unintentionally gone + off-task. I’ve also found that DD terminology does a nice job of succinctly communicating my current state to others. It’ll be interesting to see if I feel like using the terminology longer term, or if it’s just a short-term meme. +

+

+ I’ve started using DDD and SDD conversationally, and folks in my circles have run with it in delightful ways—both by sharing their own examples of spite-driven development (it’s the one that seems to stand out!!) and by coining new + “driven development” techniques. Keep ’em coming! +

+

FAQs

+

+ Q: Ooh, I have a great idea for a DD! What now?
+ A: Bring it to life by using it! And/or write it up in a blog post of your own (and share the link with me, please)! +

+

+ Q: Okay, but I have a job to do. What about, like, paycheck-driven development? Or healthcare-driven development?
+ A: Those are great DDs if they work for you! Personally I find that I usually need a more specific technique to drive my efforts on an minute-by-minute basis, but it’s all context dependent. +

+

+ Q: It seems like an awful lot of these overlap, or maybe are even exactly the same, with a different name. Or like you’d use multiple at once.
+ A: That isn’t a question, but you’re totally right. For example, I am often powered by both DDD and TDD, with an occasional background smattering of SDD! I contain multitudes. You probably do too. +

+

+ Q: I have a really cool idea for one: string-theory driven development! But the acronym is…not ideal. What gives?
+ A: That’s on you, friend. I have confidence that you can use a trusty thesaurus to find an alternate name. Or don’t, and own it! +

+
+
+

Footnotes

+
    +
  1. +

    Get-it-out-of-my-brain-driven development (GIOMBDD)↩︎

    +
    2. +
  2. +

    + I chose a time to make muffins that cut a liiiiiiittle too close to the Publication Accountabilibuddies session I frequent, such that I am only now + coming off the adrenaline of getting them in the oven in time. The next step is to write as much as possible before the oven timer goes off. How will I know I’m done? There will be words on my page AND a muffin to consume. + Muffin-driven development!↩︎ +

    +
    3. +
  3. +

    + I’ve found that many engineers seem to have strong opinions about whether TDD is “good or not,” which is a generalization that I don’t think is particularly useful. I also think TDD hate is often misdirected and comes after + not following the actual practices! Early in my career, the company I worked at brought in a coach to give the engineering team a multi-day TDD workshop. At the time I was too junior to have strong opinions about it; now that + I’ve experienced a bunch of different software development goals and contextual environments, I feel strongly that is extremely useful in the right contexts, and extremely not useful in others.↩︎ +

    +
    4. +
  4. +

    + Okay okay, I would not necessarily take TDD literally in many domains—but it is certainly possible to think through the “what-ifs” to understand what a failing case would look like, and then what a successful case + looks like. And it seems like (from the TDD wikipedia page) this cross-domain adoption is something that folks already do. Good!↩︎ +

    +
    5. +
+
+
+
    +
  • created: 2024-09-20
    • +
  • last updated: 2024-09-20
    • +
  • tags: musings, brainstorm, techspeak
    • +
+
+ diff --git a/blog/future-blog-posts/index.html b/blog/future-blog-posts/index.html index 0bbb12a..4c77c8e 100644 --- a/blog/future-blog-posts/index.html +++ b/blog/future-blog-posts/index.html @@ -1,132 +1,124 @@ - + + + + + + Titles of blog posts I might never write + + - - - - - Titles of blog posts I might never write - - - - - -
- -

Titles of blog posts I might never write

-

…but maybe I will!

-

My tech writing these days follows DDD (Dopamine-Driven Development), -which means that if you tell me what you want to read from me, I will be -that much more likely to write it.

-

Without further ado, some things I could write right now1:

-

Project write-ups2 and tutorials

-
    -
  • Musidex | What I wanted was a Craigslist jukebox; what I -got was a Rolodex. (Closing line: I still want a Craigslist -jukebox.)
    • -
  • Obsessed with Cuttle: -Parametric CAD for prototyping, producing, and -procrastinating [EDIT 9/27/24: Written!]
    • -
  • Making mixtapes for your youngest pals | Do you want to -enable the song addictions of the small children in your life, to set -them on a path towards music obsession, while potentially annoying the -heck out of their parents? Of course you do! (This post is not sponsored -by Yoto, but -could be, should they choose… 👀)
    • -
  • Small Tales | On building a bookshelf of your favorite -reads, in miniature, for when you have limited bookshelf space or a -limited book budget.
    • -
  • Mobiles! For that new tiny human in your extended -universe
    • -
  • Easy inter-room trolling: OSX’s say, a bluetooth -speaker, and you
    • -
  • Quick and easy meme-making, for fun and no profit3
    • -
  • How do I do a creative coding?4
    • -
  • Mix of the Month Clubs for the 2020s | Mixtapes are my love -language, but no one has a cd player anymore (not to mention a disc -drive, or a cassette player). What’s a fellow to do?
    • -
  • Message in a bottle, or, the US Postal Service is way more fun -than most people know it is
    • -
  • Stabby McStabface: The joy of needlefelting memes
    • -
  • From LiveJournal to tinylogger and beyond: My current -writing workflow
    • -
  • How should I know when there’s a new blog to read? | What -the heck is RSS, and how do I make it work for me if I don’t consider -myself tech saavy?
    • -
  • The rest of the owl: My first experience with codecrafters
    • -
-

Feelings™ (tech and otherwise)

-
    -
  • Dopamine-Driven Development (DDD), Spite-Driven Development -(SDD), and other DDs [EDIT 9/23/24: Written!]
    • -
  • A batch at the Recurse Center: My antidote to burnout
    • -
  • The Mike Ratio: A Bechdel test for the modern tech -team
    • -
  • Towards a Bechdel test for assessing a candidate employer5
    • -
  • The Hannahspeak cheatsheet | The what/why/wherefore/emojis -of the phrases I parrot, and why you might want to use them too
    • -
  • The “just” flag flies true
    • -
  • The 1-1 IC template for my future self (that I wish I’d been -using all along)
    • -
  • Niceties™: From third grade to the Recurse Center, and -beyond
    • -
-

Right. Now that I’ve gotten this current list out of my head, maybe -I’ll be able to pick one and just go for it….

-
-
-

Footnotes

-
    -

  1. Not included: any hypothetical projects I have not yet -done.↩︎

    2. -

  2. Also, this list only includes a few of the -as-yet-undocumented projects from my -backlog, but anything on that page is fair game for a DDD request.↩︎

    3. -

  3. This already exists in slide form from my batch at RC, -so :just: needs to be edited appropriately.↩︎

    4. -

  4. Ditto↩︎

    5. -

  5. Why yes, the Bechdel test does -play an oversized role in my consciousness, why do you ask? As does Bechdel herself -and the musical -incarnation of her memoir.↩︎

    6. -
-
-
-
    -
  • created: 2024-09-18
    • -
  • last updated: 2024-09-24
    • -
  • tags: brainstorm, metawriting
    • -
-
- - + +
+ +

Titles of blog posts I might never write

+

…but maybe I will!

+

My tech writing these days follows DDD (Dopamine-Driven Development), which means that if you tell me what you want to read from me, I will be that much more likely to write it.

+

+ Without further ado, some things I could write + right now1: +

+

+ Project write-ups2 and tutorials +

+
    +
  • Musidex | What I wanted was a Craigslist jukebox; what I got was a Rolodex. (Closing line: I still want a Craigslist jukebox.)
    • +
  • + Obsessed with Cuttle: Parametric CAD for prototyping, producing, and procrastinating + [EDIT 9/27/24: Written!] +
    • +
  • + Making mixtapes for your youngest pals | Do you want to enable the song addictions of the small children in your life, to set them on a path towards music obsession, while potentially annoying the heck out of their + parents? Of course you do! (This post is not sponsored by Yoto, but could be, should they choose… 👀) +
    • +
  • Small Tales | On building a bookshelf of your favorite reads, in miniature, for when you have limited bookshelf space or a limited book budget.
    • +
  • Mobiles! For that new tiny human in your extended universe
    • +
  • + Easy inter-room trolling: OSX’s say, a bluetooth speaker, and you +
    • +
  • + Quick and easy meme-making, for fun and no profit3 +
    • +
  • + How do I do a creative coding?4 +
    • +
  • Mix of the Month Clubs for the 2020s | Mixtapes are my love language, but no one has a cd player anymore (not to mention a disc drive, or a cassette player). What’s a fellow to do?
    • +
  • Message in a bottle, or, the US Postal Service is way more fun than most people know it is
    • +
  • Stabby McStabface: The joy of needlefelting memes
    • +
  • + From LiveJournal to tinylogger and beyond: My current writing workflow +
    • +
  • How should I know when there’s a new blog to read? | What the heck is RSS, and how do I make it work for me if I don’t consider myself tech saavy?
    • +
  • + The rest of the owl: My first experience with codecrafters +
    • +
+

Feelings™ (tech and otherwise)

+
    +
  • + Dopamine-Driven Development (DDD), Spite-Driven Development (SDD), and other DDs [EDIT 9/23/24: Written!] +
    • +
  • A batch at the Recurse Center: My antidote to burnout
    • +
  • The Mike Ratio: A Bechdel test for the modern tech team
    • +
  • + Towards a Bechdel test for assessing a candidate employer5 +
    • +
  • The Hannahspeak cheatsheet | The what/why/wherefore/emojis of the phrases I parrot, and why you might want to use them too
    • +
  • The “just” flag flies true
    • +
  • The 1-1 IC template for my future self (that I wish I’d been using all along)
    • +
  • Niceties™: From third grade to the Recurse Center, and beyond
    • +
+

Right. Now that I’ve gotten this current list out of my head, maybe I’ll be able to pick one and just go for it….

+
+
+

Footnotes

+
    +
  1. +

    Not included: any hypothetical projects I have not yet done.↩︎

    +
    2. +
  2. +

    + Also, this list only includes a few of the as-yet-undocumented projects from my backlog, but anything on that page is fair game for a DDD request.↩︎ +

    +
    3. +
  3. +

    This already exists in slide form from my batch at RC, so :just: needs to be edited appropriately.↩︎

    +
    4. +
  4. +

    Ditto↩︎

    +
    5. +
  5. +

    + Why yes, the Bechdel test does play an oversized role in my consciousness, why do you ask? As does + Bechdel herself and the musical incarnation of her memoir.↩︎ +

    +
    6. +
+
+
+
    +
  • created: 2024-09-18
    • +
  • last updated: 2024-09-24
    • +
  • tags: brainstorm, metawriting
    • +
+
+ diff --git a/blog/index.html b/blog/index.html index 48633ad..63e882c 100644 --- a/blog/index.html +++ b/blog/index.html @@ -47,7 +47,7 @@

Blog

Subscribe to @hannahilea RSS feed - + diff --git a/blog/make-a-list/index.html b/blog/make-a-list/index.html index 093eb67..47a10c0 100644 --- a/blog/make-a-list/index.html +++ b/blog/make-a-list/index.html @@ -1,84 +1,83 @@ - + + + + + + First things first: Make a list + + - - - - - First things first: Make a list - - - - - -
- -

First things first: Make a list

-

To-do list:

-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
-
-

I am a big fan of Making A List, whether on paper or digitally.1

-

As taught to me by Chuck2, the most important thing -about a to-do list is that the first item on it is “Make a -list”. Then, when you’ve finished adding tasks to your list, -you can check it off immediately. Bam, dopamine. Happy day, you’re already -partly done with your list! Look at you, so much progress already! My -notebook is filled with (partially-completed 😅) daily to-do lists, each -of which starts with “make a list”.

-

The one type of list I don’t regularly start this way is the punch lists that I -often add to pull requests. (Pull requests (PRs) are proposals to merge -a set of changes into a set of existing documents, e.g., source code.) -PR punch lists both keep me on task and let my reviewers know what -subtasks I intentionally considered—and, implicitly, what I did not. -(Are you requesting a non-trivial review from me? Bonus points if you -include a punch list!)

-

I’ve also found that adding a punch list to a Github -PR template helps improve review turnaround time and reduces review -friction, and sets newer contributors up to succeed more quickly.

-
-
-

Footnotes

-
    -

  1. This is a different skill than the skill of completing -tasks, mind…↩︎

    2. -

  2. One of the most valuable things I learned in grad -school!↩︎

    3. -
-
-
-
    -
  • created: 2024-09-21
    • -
  • last updated: 2024-09-21
    • -
  • tags: musings, devtips, DDD
    • -
-
- - + +
+ +

First things first: Make a list

+

To-do list:

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+

+ I am a big fan of Making A List, whether on paper or digitally.1 +

+

+ As taught to me by Chuck2, the most important thing about a to-do list is that the first item on it is “Make a list”. Then, when you’ve finished adding tasks to your list, you can check it off immediately. Bam, + dopamine. Happy day, you’re already partly done with your list! Look at you, so much progress already! My notebook is filled with (partially-completed 😅) daily to-do lists, each of which starts + with “make a list”. +

+

+ The one type of list I don’t regularly start this way is the punch lists that I often add to pull requests. (Pull requests (PRs) are proposals to merge a set of changes into a + set of existing documents, e.g., source code.) PR punch lists both keep me on task and let my reviewers know what subtasks I intentionally considered—and, implicitly, what I did not. (Are you requesting a non-trivial review from me? + Bonus points if you include a punch list!) +

+

+ I’ve also found that adding a punch list to a + Github PR template helps improve review turnaround time and + reduces review friction, and sets newer contributors up to succeed more quickly. +

+
+
+

Footnotes

+
    +
  1. +

    This is a different skill than the skill of completing tasks, mind…↩︎

    +
    2. +
  2. +

    One of the most valuable things I learned in grad school!↩︎

    +
    3. +
+
+
+
    +
  • created: 2024-09-21
    • +
  • last updated: 2024-09-21
    • +
  • tags: musings, devtips, DDD
    • +
+
+ diff --git a/blog/site-structure/index.html b/blog/site-structure/index.html index f4e6df7..9119784 100644 --- a/blog/site-structure/index.html +++ b/blog/site-structure/index.html @@ -1,60 +1,44 @@ - + + + + + + This website’s structure: A meta post + + - - - - - This website’s structure: A meta post - - - - - -
- -

This website’s structure: A meta post

-

While doing a batch at the Recurse -Center, I revived my personal website—the very site you are almost -certainly looking at Right Now!

-

surprise-pikachu

-

Motivation

-

I had two goals for this site at the outset:

-
    -
  1. Be trivially easy to set up, so that my focus could -be on “building new stuff” rather than “building, styling, and -maintaining a website” and
    2. -
  2. Be trivially easy to update, so that I can reduce -the friction of sharing projects and (in theory!) get out of my own way -to actually share them.
    3. -
-

In service of 1, I was hoping to avoid using templating engines, but -was prepared to use one if it was the fastest way to achieve my two -goals. (My limited experience with templating engines in the past has -been a bit frustrating, in that I spend more time trying to understand -and work within/around their confines than I spend working on the -content of said site.)

-

I asked a bunch of questions of my Recurse batchmates, and got a lot -of good advice from folks with web expertise (have I mentioned that I do -not have web expertise? I myself do not have web expertise!), and was -gratified that their advice boiled down to “just do it in vanilla -html/js”, plus some pointers to reading material/examples/etc. So that’s -what I did!

-

Now that I’ve been working with it and adding projects to it for a -few months, the structure seems static enough to be worth sharing. If -you are a person who, like me, has cursory web experience and similar -goals for website creation, perhaps this documentation will help you set -up your own site.

-

Structure

-

The structure is pretty basic:

-
.
+  
+    

+      
+      
This website’s structure: A meta post

+      
While doing a batch at the Recurse Center, I revived my personal website—the very site you are almost certainly looking at Right Now!

+      
surprise-pikachu

+      
Motivation

+      
I had two goals for this site at the outset:

+      
    
+        
  1. Be trivially easy to set up, so that my focus could be on “building new stuff” rather than “building, styling, and maintaining a website” and
    2. 
+        
  2. Be trivially easy to update, so that I can reduce the friction of sharing projects and (in theory!) get out of my own way to actually share them.
    3. 
+      

+      

+        In service of 1, I was hoping to avoid using templating engines, but was prepared to use one if it was the fastest way to achieve my two goals. (My limited experience with templating engines in the past has been a bit frustrating,
+        in that I spend more time trying to understand and work within/around their confines than I spend working on the content of said site.)
+      

+      

+        I asked a bunch of questions of my Recurse batchmates, and got a lot of good advice from folks with web expertise (have I mentioned that I do not have web expertise? I myself do not have web expertise!), and was gratified that their
+        advice boiled down to “just do it in vanilla html/js”, plus some pointers to reading material/examples/etc. So that’s what I did!
+      

+      

+        Now that I’ve been working with it and adding projects to it for a few months, the structure seems static enough to be worth sharing. If you are a person who, like me, has cursory web experience and similar goals for website
+        creation, perhaps this documentation will help you set up your own site.
+      

+      
Structure

+      
The structure is pretty basic:

+      
.
 ├── README.md
 ├── add_stuff.jl
 ├── blog
@@ -70,99 +54,76 @@ 
Structure

     ├── <project-1>
     ├── ...
     └── <project-n>

-
There are also some top-level style folders that I’ve excluded here,
-as they will likely be reshuffled at some point. (Want to see the full
-source? You’re in
-luck.)

-
Blog subdirectories

-
The structure of each blog subdirectory <blog-n>
-is

-
.
+      

+        There are also some top-level style folders that I’ve excluded here, as they will likely be reshuffled at some point. (Want to see the full source? You’re in luck.)
+      

+      
Blog subdirectories

+      
The structure of each blog subdirectory <blog-n> is

+      
.
 ├── index.html
 └── src.md

-
src.md contains the full content of a blogpost, written
-in markdown. index.html is identical across blog posts and
-contains no specialized content; it exists simply to contain the results
-of converting src.md to html, which is performed with the
-md-block.js
-library.

-
Why this approach? Writing markdown feels much more natural to me
-than writing html, and even though I have to include the same
-boilerplate html file in every blog post directory, it is mentally
-cheaper than switching the whole site over to a templating engine that
-generates the whole site from a set of markdown files. (It is also
-cheaper than writing my own markdown-to-html converter, however tempting
-that was…)

-
Project subdirectories

-
The structure of each project subdirectory
-<project-n> depends on the type of project, as many
-projects are not hosted directly on the site at all: some link out to
-external repositories or sites, etc.

-
That said, for a common type of project that I’ve been building
-lately, namely, self-contained creative coding sketches, the structure
-looks like:

-
.
+      

+        src.md contains the full content of a blogpost, written in markdown. index.html is identical across blog posts and contains no specialized content; it exists simply to contain the results of converting
+        src.md to html, which is performed with the
+        md-block.js
+        library.
+      

+      

+        Why this approach? Writing markdown feels much more natural to me than writing html, and even though I have to include the same boilerplate html file in every blog post directory, it is mentally cheaper than switching the whole site
+        over to a templating engine that generates the whole site from a set of markdown files. (It is also cheaper than writing my own markdown-to-html converter, however tempting that was…)
+      

+      
Project subdirectories

+      
The structure of each project subdirectory <project-n> depends on the type of project, as many projects are not hosted directly on the site at all: some link out to external repositories or sites, etc.

+      
That said, for a common type of project that I’ve been building lately, namely, self-contained creative coding sketches, the structure looks like:

+      
.
 ├── index.html
 └── sketch.js

-
where the index contains no little specialized content except a
-description of the project, and the content of the sketch lives in
-sketch.js.

-
This structure has made it trivially easy to transfer javascript
-sketches to this site from sandbox environments like the p5.js editor.

-
Site hosting and deployment

-
I build, host, and deploy the site using GitHub Pages. Thanks, GitHub! You
-can look at the GitHub
-Action I use to deploy, but there is nothing custom or personal
-about it.

-
Adding new content

-
You might be thinking, well, if the blog and project subdirectories
-all have similar structures, it would probably be easy to auto-setup new
-blog posts and/or projects. And you would be correct! (That was, in
-fact, one of the reasons I did it this way. :))

-
The top-level add_stuff.jl
-file is a commandline Julia script that (1) generates a new
-subdirectory, based on files in the corresponding
-__template subdirectory; (2) adds it to the relevant list
-in the corresponding project/blog index.html; and (3) (in the case of
-blogs) adds it to the rss feed. (Okay, this last item isn’t actually
-implemented yet, but it will be shortly.)

-
Setting up the script and templates was relatively easy, and has made
-adding new content to the site downright delightful. (“Delight” may be a
-strong word, but the less overhead and wordsmithing I have to deal with
-in order to post content to my site, the more likely that said content
-will get posted at all…)

-
Why is the script in Julia? Because I like Julia, and I find it easy
-to read/write.

-
That’s all, folks!

-
The structure of this site has evolved slightly since I first set it
-up, and may evolve further, but for now I’m in a state where both goals
-(trivially easy to set up, trivially easy to update) are met, as evinced
-by the fact that I have fairly consistently added projects to the site as I’ve built them! 🎉
-Will this site structure work out longer-term? Time will tell! But at
-least it exists (!) publicly (!!) right now (!!!).

-
As I borrowed (with permission!) when first assembling this site,
-please feel free to borrow from me. It doesn’t seem worthwhile to turn
-the whole site into a template itself (yet?!), but I could be convinced
-otherwise if you reach out to let me know that you’re interested.

-
And finally if you, erstwhile reader, are a Web Person™ who thinks
-I’ve made an egregious error in approach or wants to propose some
-additional tweaks/improvements, do let me know!

-
Thanks to Teresa
-Ibarra, whose site (and assistance!) I used as an initial starting
-point.

-    

-    
    
-      
  • created: 2024-05-17
    • 
-      
  • last updated: 2024-05-17
    • 
-      
  • tags: project-writeup, webdev, programming, metawriting
    • 
-    

-  

-
-
+      
where the index contains no little specialized content except a description of the project, and the content of the sketch lives in sketch.js.

+      

+        This structure has made it trivially easy to transfer javascript sketches to this site from sandbox environments like the p5.js editor.
+      

+      
Site hosting and deployment

+      

+        I build, host, and deploy the site using GitHub Pages. Thanks, GitHub! You can look at the
+        GitHub Action I use to deploy, but there is nothing custom or personal about it.
+      

+      
Adding new content

+      

+        You might be thinking, well, if the blog and project subdirectories all have similar structures, it would probably be easy to auto-setup new blog posts and/or projects. And you would be correct! (That was, in fact, one of the
+        reasons I did it this way. :))
+      

+      

+        The top-level add_stuff.jl
+        file is a commandline Julia script that (1) generates a new subdirectory, based on files in the corresponding
+        __template subdirectory; (2) adds it to the relevant list in the corresponding project/blog index.html; and (3) (in the case of blogs) adds it to the rss feed. (Okay, this last item isn’t actually implemented yet, but
+        it will be shortly.)
+      

+      

+        Setting up the script and templates was relatively easy, and has made adding new content to the site downright delightful. (“Delight” may be a strong word, but the less overhead and wordsmithing I have to deal with in order to post
+        content to my site, the more likely that said content will get posted at all…)
+      

+      
Why is the script in Julia? Because I like Julia, and I find it easy to read/write.

+      
That’s all, folks!

+      

+        The structure of this site has evolved slightly since I first set it up, and may evolve further, but for now I’m in a state where both goals (trivially easy to set up, trivially easy to update) are met, as evinced by the fact that I
+        have fairly consistently added projects to the site as I’ve built them! 🎉 Will this site structure work out longer-term? Time will tell! But at least it exists (!) publicly (!!) right now (!!!).
+      

+      

+        As I borrowed (with permission!) when first assembling this site, please feel free to borrow from me. It doesn’t seem worthwhile to turn the whole site into a template itself (yet?!), but I could be convinced otherwise if you reach
+        out to let me know that you’re interested.
+      

+      
And finally if you, erstwhile reader, are a Web Person™ who thinks I’ve made an egregious error in approach or wants to propose some additional tweaks/improvements, do let me know!

+      

+        Thanks to Teresa Ibarra, whose site (and assistance!) I used as an initial starting point.
+      

+      

+      
    
+        
  • created: 2024-05-17
    • 
+        
  • last updated: 2024-05-17
    • 
+        
  • tags: project-writeup, webdev, programming, metawriting
    • 
+      

+
+ diff --git a/build-blogs/run.jl b/build-blogs/run.jl index 100aca7..899e541 100644 --- a/build-blogs/run.jl +++ b/build-blogs/run.jl @@ -78,6 +78,13 @@ function generate_blog_html(md_file; overwrite_existing=true) @info "Converting $(basename(dirname(md_file)))..." html_outfile = replace(md_file, "src.md" => "index.html") convert_to_html(md_file, html_outfile; overwrite_existing) + + @info "...and formatting it" + try + run(`prettier $(html_outfile) --write --print-width 240`) + catch + @warn "Prettier not installed OR current html errors" + end return nothing end