Paloma Kop

Recurse Center Log

I'm currently attending a 6-week coding retreat at Recurse Center (Feb 17 - March 28, 2025). Below is a log of my activities and projects during this time.

Table of Contents

Day 1

  • Joined meetings for welcome and orientation, met some of the peers in my cohort and heard a bit about what they are interested in and planning to work on. I was excited to hear some overlap with my own interests and ideas.
  • Took the metro north train to NYC (from my home in New Haven, CT). It's a ~2 hour train ride. I joined one of the zoom meetings while riding the train, which worked surprisingly well.
  • Created this page to keep track of things I do and projects I work on during my batch.

To-do:

  • ✅ Create a separate section of my website called "The Lab" to host web-based projects in progress!

Day 2

  • Went to the Hub (Recurse Center's in-person location in Downtown Brooklyn). Received a key fob, a tour of the space, and a bagel. (I also drank some coffee, which I don't normally do and it made me feel slightly wired).
  • Hung out and chatted with a bunch of folks, and joined a group that went to Xi'an Famous Foods around the corner for dumplings.
  • Attended the Pairing Workshop. Worked with Irena on implementing Conway's Game of Life in p5.js (code link). At the end of the time, we had a bug in our code, and then during the demo, we showed our code and people helped us debug it live.
  • Took the metro north train back to New Haven. While on the train, I set up my new Laboratory site: lab.palomakop.tv

To-do:

  • ✅ Make a list of ideas to work on
  • Start coding and exploring

Day 3

  • Had a coffee chat with Basil. (Actually I was drinking tea so it was really a tea chat.) We discussed our project ideas, the parallels between modular video synthesis and shaders, and I learned about "metal" shaders. We plan to pair on webGL when I'm in the hub next week.
  • Wrote a python script to get address data from Stripe, and format it as a CSV, for a batch of Zine Club Mystery Objects that I need to ship.
  • Met with Laura from RC about their career services offerings and my plans and goals for my work life in the future.
  • Made plans to talk to or meet with a bunch of other folks in the next few days.
  • Started compiling a list of ideas and things to do during my batch — I will share it here soon~

Ideas

Here are some ideas of things I'd like to explore during the next six weeks. I might not necessarily get to them all, but they should provide me with a jumping-off point for what promises to be a meandering path forward.

Note: This is a living list; I will keep updating it as I have more ideas.

  • A web app that allows the user to draw a spread of tarot cards
    • Use the Random.org random number api
    • Cards could be SVGs (perhaps generative)
    • Create a neat splash page that appears before you draw
    • Animate flipping the cards
      • Maybe you should have to flip each card by clicking on it
    • Figure out a decent layout for smaller screens
  • Generative SVGs as asemic poetry
  • Generative SVG truchet tiles
  • A webpage that takes in a webcam feed and creates an ascii art version of the image (low resolution like a gameboy camera)
  • Just create some fun animations
    • A shader with colorful gradient-mapped noise
    • Animated brushes playable with mouse or touch
  • Pixel art cellular automata in the browser
  • Playable generative mazes
  • ✅ Play with hydra more and look at the code
  • ✅ Add dark mode to a website

Tools and methods to explore

  • Vanilla Javascript
  • HTML canvas
  • p5.js
  • WebGL
  • Three.js (?)
  • Progressive enhancement

Next steps

  • ✅ Refresh my knowledge of javascript
  • ✅ Port my webGL shader playground to the lab
  • ✅ Just start noodling around...
  • Start building the tarot app
    • Figure out what tech stack to use
  • Do leetcode exercises

Note to self

  • It's OK and valuable to "reinvent the wheel"

References & Examples

Things to read up about

  • How to store cookies in the browser
  • How to directly integrate with webGL
  • The canvas element
  • What is a web component and how to make & use them
  • How to grab data from a webcam in a webpage
  • Neural networks in image processing / pattern generation (Reference)

Day 4

  • Had an afternoon coffee chat with Eric. We discussed his URL shortener project and the challenges of letting strangers use it, the messiness of the process of programming and getting a window into others' process through pairing, and the awesomeness of hydra.
  • Joined presentations, where people shared about:
    • A thing that lets you render three.js in react
    • A trippy generative p5.js sketch with lissajous curves, perlin noise, and poisson process
    • Building an e-bike
    • A pong game that gets rendered in a grid of favicons of browser windows with too many tabs open
    • Rendering images and video as colorful ascii art in the terminal with rust and FFmpeg
    • A very scalable database created by Google called "Spanner"
    • Making generative music using ideas from linguistics
    • Programs that can mutate and combine genetically (?)
    • A web app that lets you generate fictional Japanese city names
  • Did a bit of javascript review
    • const and let were introduced in ES6 and both have a block scope. var is older and always has a global scope. The value of let can be changed, while a const can not be changed. Also, var can be redeclared, while let cannot. (w3schools links: let const)
  • Ported some fragment shaders I wrote a while ago to the lab. Also, I made the lab homepage read like a text adventure. (Visit the lab or jump straight to the shaders page)
  • Added dark mode to the lab with color-scheme: light dark; (Reference)

To-do:

  • Start noodling around with some of the ideas in my ideas list

Day 5

  • Had a coffee chat with Piya. We discussed her monitoring project for the heap server cluster, and self-hosting projects in general. We both have thought about running a server from our home internet but have reservations about the security implications of doing so. Piya recommended that I talk to Stephen, who has a homelab and is experienced in such matters.
  • Joined the Volitional Muscles workshop, where we all wrote out our ideas for what we want to work on, our reasons for wanting to work on those things, and the actionability or next steps of each one. I had a slight head start on the list of ideas front, but it was helpful to think through the rest of it and come up with some action items. It also felt kind of good to cross certain things off my list and just say "I'm not doing that." Seeing my reasoning behind why I wanted to do things made it easier to cull some of them.
  • Found some code references for certain things I want to do or learn, and added them to my ideas list. (Yes, I will keep linking to the ideas list every time I mention it.) I also looked more deeply into p5.js and three.js. I think I would like to try to make some things by working more directly with the HTML canvas element and vanilla javascript, instead of having to load several megabytes of dependencies for my page and probably learn less fundamentals in the process. I even feel that way about the GLSL canvas tool that I used for the shaders page on the lab, even though it's comparatively small and lightweight.
  • Had a chat with Emily, one of the RC faculty, who also led the workshop earlier. It turns out that she used to live in New Haven for a number of years as well. We talked about what brought me to Recurse Center at this point in my life, and my experience of the first week of my batch as a mostly-remote-but-occasionally-in-person participant.

To-do:

  • Log off for the weekend and chill.
  • When I return on Monday, delve back into the browser-based graphical things I want to research and build (as outlined in the ideas list).

Weekend 1

  • On Saturday, I ended up at the hub because I was in the city with nothing to do for a little while.
  • Played a guessing game with a bunch of folks who were hanging out when I showed up. Also ended up having a more in-depth conversation with Reed afterwards.
  • Added a fun animated gradient on link hover to The Lab.
  • Read about localStorage and sessionStorage and started implementing a dark mode toggle for The Lab. I want to respect the user's color scheme preference when they first load the page, but also allow them to toggle it.
  • On Sunday morning, while staying with my friend, I finished implementing the light switch on The Lab and improved the navigation with anchor links.

Day 6

  • Came into the hub for the day.
  • Joined the Monday Meditation group. We did a guided metta meditation practice and then had a discussion afterwards. It was very nice and I want to go to more of the weekly sessions going forwards.
  • Posted on Zulip about starting a Critical AI Reading/Discussion Group. Proposed a book to read and discuss. I am a bit unsure how this would go but I think it would be good to have more discussion around this since I see people using AI code generators and such without much discussion of their larger implications.
  • Noticed that the dark mode toggle I set up on The Lab is not working properly on my iPhone web browser.
    • Bug description: When the device prefers-color-scheme is set to "dark," the toggle initially does not change the mode to light unless you refresh the page when the lights are switched on.
    • Used safari developer tools with an iPhone simulator in xCode to view the javascript console for debugging.
    • Decided to change the way that dark mode is implemented, so sketched out a pseudocode flow chart for the new method.
      • I want to respect prefers-color-scheme (device theme), but also allow users to toggle the dark/light mode and have their preference saved. So I am using both media queries, and a javascript toggle to add/remove a class from the body.
      • Previously, I was using JS to modify the css stylesheet, in the hopes that I could avoid having to write both media queries and rules for the body class. But the code that iterated through the CSS media rules and modified them turned out to be unnecessarily complex.
      • Now the light switch is working properly, theme preference is saved across visits, and despite the increase in lines of CSS, the decrease in complexity of the JS code was well worth it.
      • Also, if the browser does not have JS enabled, the device color scheme is used, and the toggle switch remains hidden. Yay, progressive enhancement!
  • Had a chat with Stephen about self-hosting. Got some tips on how to go about host public web things from my home computer without exposing things on my network that I don't want to. It was very helpful because I now feel a bit more confident to try things out. I'll be looking into hypervisor software I can use to run and manage VMs on my desktop computer. Perhaps some day, I will look into dedicated hardware options (apparently used servers are quite affordable).
  • Added a little animation to the page header of The Lab, because lab can be short for either "laboratory" or "labyrinth". Also, added some styling to distinguish external links with a little arrow.

To-do:

  • Now that I've finished these tweaks to the lab UI, I want to make more little projects to add as new pages on there.

Day 7

  • Back to remote as I'm home in New Haven.
  • Had a very interesting chat with Tim that went from generative SVGs, to our personal websites, to broader topics like image processing techniques, to each of our respective meandering career paths. They were a professional photo retoucher and shared some techniques that they used in that industry, which basically involved tracing and recreating an entire photo from scratch in hyperrealistic detail. We made plans to jam on making mandelbulbs in Houdini during the Creative Coding session tomorrow.
  • Discovered and fixed a minor bug in The Lab where the footer was blocking the link to view code on the second sketch on the shaders page
  • Looked at the code for the GLSLcanvas library to see how hard it might be to add touch detection in addition to mouse detection. Made a fork.
  • Paired with Colleen to make a little sketch of underwater bubbles in p5.js. Colleen had not used p5 before so she drove.
  • After a run to the grocery store on my bike, I added a few things to the p5.js sketch, including a way for bubbles to be removed from the array of objects once they float off screen, and a gradient background. I also embedded the sketch in a new page on the lab: lab.palomakop.tv/p5
    • I tried out the sketch, both on The Lab and on the p5.js website, on my iPhone, and I noticed that touch events were not registering properly when the sketch was embedded as an iframe. Apparently this is a known issue with Safari. I added a link to view the sketch as a fullscreen page, and a note to ios users to use it. Developing for both mouse and touch screen events is tricky, as I already noted above with the GLSLcanvas library. It kind of bothers me that my current embedding method isn't fully cross compatible, but I have to choose my battles here.

To-do:

  • Add more stuff to The Lab and do more pairing tomorrow

Day 8

  • Joined the Remote Recurser Check-in call. We had a nice discussion facilitated by Emily.
  • Added the Conway's Game of Life implementation I did in the pairing workshop with Irena to the p5.js page on The Lab.
  • Joined the Creative Coding meetup and jammed for the rest of the afternoon on making mandelbulbs in Houdini with Timothy, Sophia, and Richard. I have never used Houdini before but there is a free version you can use to experiment, and it has advanced scripting capabilities to create and animate custom geometry and effects.

To-do:

  • I'd like to get started with my tarot web app soon. The first thing I need to do is figure out what tech stack to use for it. Ruby on Rails seems like it would work well but it's a bit outdated...
  • Do some leetcode coding exercises

Day 9

  • Started making a page on The Lab to display a 3D mandelbulb model from yesterday's Houdini session (haven't published it yet but I got a three.js demo working!)
  • Solicited advice on what tech stack to use for my tarot app, and received a lot of feedback. I have some ideas for how to move forward, but I need to do a bit more research to decide my next steps.
    • I'm interested in using Vue(/Nuxt.js?) to build the UI. Better auth looks like a helpful auth plugin, and Nuxt Hub could be a good hosting option as it also provides a database. There are also Supabase and Neon for database options with auth included. (Shout out to Timothy for these resources!)
    • For the back end, I'm thinking of using Python & Flask, since I've used them before. But I might be able to build the full app in Vue(/Nuxt?) and forgo a separate back end.
    • It might make sense to build in a Docker container to help manage dependencies.
    • Other interesting toolkits that people suggested, which I'd like to explore in the future, include:
      • Golang could be a full stack solution, with embedded SQLite. This is how Vore (minimal rss reader) was made. (The code for Vore also includes a functioning auth system.)
      • Python/Flask can also work without a separate toolkit for the front end. This is how izzzi (minimal social diary) was built.
      • Svelte has some very cool built-in progressive enhancement features that are super interesting, I'd like to explore this at some point as well.
      • Ruby on Rails is still a viable and robust option if I ever want to explore it.
      • HTMX looks like something cool, though I'm not sure exactly what it is.
      • I have heard that Elixir and Phoenix are great options for back-end stuff, if I ever want to branch out from Python.
  • Started making a list of my techical projects to share with potential employers
  • Had a nice coffee chat with Shannon and talked about React and other web frameworks, and fun experimental projects (I enjoyed seeing this project that she made with Matter.js)
  • Went to presentations and saw:
    • An arduino-powered robot that constantly points an arrow in the direction of the International Space Station
    • A walkthrough of making a contribution to Typst (and other open source projects)
    • An AI powered screen reader that can also interact with webpages
    • Tokenization and how it works in language models
    • A sonification app
    • A p5.js game with icebergs that play Conway's game of life
    • How to make things beautiful in the terminal
    • A light bulb you can control by screaming
  • People voted on a time for the Critical AI group I proposed, so it's on the calendar now. We'll have our first meeting next Wednesday.

To-do:

  • Finish the mandelbulb three.js page and publish it to The Lab
  • Start building the tarot app
  • Publish some code on Github from past projects that I have not published

Day 10

  • Started this Vue tutorial - so far I've got a dev server running with hot reload
    • Got more advice about front-end frameworks from Thomas on Merveilles
  • Finished building the mandelbulb page on the Lab
  • I was planning to join some of the career services calls but decided to take some time to organize myself and do some heads-down work instead
  • Organized my to-do lists, notes, and resources. Feeling more clear about my next steps, but it's been another jam-packed week, so time for a break!

Weekend 2

  • I finished going through this Vue.js tutorial. The result was a directory of employees that you can do CRUD operations on. However, the data was just stored in variables, not a real database. Still, a cool demo and so far I like Vue a lot more than React (from the brief time I tried it out a while ago). I also like the idea of things being all inside of modular "components". The trick will be getting used to passing data between different components and levels/layers of the app.
    • Next steps:
      • Learn how to work with TypeScript in Vue (apparently it's 'zero config.' Does that mean you just put it in the script tag instead of JS and it gets handled automatically?)
      • Learn how to configure and use pinia for state management and vue-router for routing. Also, learn more about what state management and routing are :p
        • I think routing is what updates the URL based on the current "virtual page" of a single-page application
      • Look into Nuxt.js and how using it would differ from plain Vue
        • I noticed that, with the sample app I created from the tutorial, I can already "build" the app to the dist folder and then serve it as a static site. However, the page basically doesn't show anything with javascript disabled. I think using Nuxt would improve this
      • Figure out what my server setup will be, and decide how to approach the back end of my app
        • Python/Flask is still probably the most familiar option for back-end for me, but I can't host it on Netlify; maybe Heroku would be a good option
          • Heroku basic dyno + Heroku Postgres essential 0 + a pipeline with Git integration
        • Another option for a very basic backend is Val.town
        • Netlify could be a good option for just the front end, or Vercel or Nuxt Hub
        • At what point in the project will I need the back end to exist?
  • Wrote out some notes to outline the initial features of the app and the functionality of the front and back end. I don't think I will include any auth at this point; for now I can just generate a unique, public share URL for each pull
  • Shared the code for txxt.club, my mysterious SMS-powered group blog, to github (repo link)
  • Added more things to my technical projects list and added a readme to my github profile

Day 11

  • Joined the Monday Meditation call, where we did a very nice noting meditation on sounds. In the discussion afterwards, we ended up talking about sphere-packing and Indra's Net.
  • Started doing this tutorial to deploy a basic Flask app to Heroku.
    • In the tutorial they have you deploy to Heroku via git, but instead I linked my Heroku app to a repo on Github so when I push to the main branch it will automatically deploy the app
    • Added Heroku Postgres addon for the database
    • Installed Postgres on my mac for dev environment parity
    • References:
  • Got a bit tired of working with this dry database stuff so I decided to start downloading the tarot card images for my tarot app. I downloaded and cropped them all and renamed the files consistently; tomorrow will try some batch processing on them with imagemagick.
  • Started reading the book for the critical AI discussion group, but so far it isn't very good. Others on Zulip said they felt the same way, so we might switch to a different reading or just share articles if most others agree.
  • I have a call scheduled for tomorrow for a potential job lead!

Day 12

  • Created a JSON file containing data about all of the 78 tarot cards in the Rider-Waite-Smith deck.
  • Applied a threshold to the tarot card images with imagemagick, so they are all black-and-white, and uploaded them to an s3 bucket.
  • Joined the Impossible Day Kickoff call, and heard about what everyone is building today. I'm just continuing on this tarot app, since it already feels like a good challenge of my abilities.
  • Continued building my Flask API, and set up testing in Postman.
  • Continued to try to set up a database and write to it, without much progress; I was able to connect to a postgreSQL database from the Flask app on both my local machine (dev enviroment), and the heroku dyno (prod), but the process of setting up schema and creating tables was complex, and I didn't want to have to do it all twice.
  • Got too annoyed by the Postgres thing, so I decided to try using supabase and connect to it from both environments. (I can always create a new supabase project if I want a separate dev DB later.) They have a handy python library that looks way easier to use than psycopg2 which I tried earlier. You can just push a dict to add data. So that seems promising, but it's time for me to wrap up so I'll continue tomorrow.
    • I created a new table that stores most of the data for a tarot card pull inside a row with type JSONb, which will hopefully keep things simple and flexible.

Day 13

  • Joined the Critical AI Discussion Group call and had a very interesting chat with everyone who came. We all had very mixed feelings on the topic and it seemed very helpful to have a space to just share our thoughts, concerns, and experiences.
  • Got an api key for the Random.org API and started integrating it into my function that chooses the cards for the tarot spread.
  • Continued working on the back end of the tarot app, and I now have almost the whole API working !!!

To-do:

  • Make the database responses not have a bunch of escape characters in them

Day 14

  • Fixed the /get-pull/{id} method to parse the json coming from the database properly and make the response formed the same as the call to /create-pull
  • Added documentation in the readme and edited routes to be nicer:
    • /create-pull is now /pull/new
    • /get-pull/{id} is now /pull/{id}.
  • Yay! I have a working POC of my Flask API and can start building the front-end for my tarot app. Github repo
  • I was planning to build the front end with Vue.js, but for the sake of practicality I might use React, since it's more standard and will probably be more useful in job contexts. I think I will start with React + Typescript, then maybe try it with Next. But I still definitely want to learn Vue (and Nuxt) too, they seem more useful and pleasant for future personal projects than React. In both frameworks, I'll be working with Typescript.
  • Had a very enlightening chat with Kate about databases and general practices and approaches for using them.
  • Joined the Reflect and Unblock meeting led by Emily, and discussed our experiences so far and intentioned for the rest of our batches. I also pulled a tarot card with the new API and got Ace of Swords, which I suppose bodes well for clarity and breakthroughs in the remainder of my time.
    • This reminds me that I am almost halfway done with my batch now. Wowow!
  • Went to a whirlwind of Presentations

Day 15

  • Started a new front-end app template using the netlify template for react-router, and started messing around with it. So far it's a lot of new stuff: React, React-router, Typescript, and Tailwind all in one project. I'm able to make changes and see what they do, so hopefully I can figure it out enough by just searching for how to do individual things, because I'm not in the mood to build a tutorial project. I'd rather just build my own project (if a bit slowly) to learn instead.
  • Joined the Job Search Support Group and Resumé AMA calls. In the former, people talked about Leetcode a lot; I haven't done any of the exercises yet, but it's annoying that so many companies rely on those types of problems to screen applicants when they don't always correlate to actual practical programming knowledge. Still, in this market (as someone in the call said), they may be difficult to avoid. In the latter, Laura from the recruiting arm of RC gave some helpful tips and answered questions.
  • Also had a 1:1 meeting with Laura, the ever-helpful job fairy of RC.

To-do:

  • ✅ Style links & add a hover
  • ✅ Add left and right padding to the about page content
  • ✅ Fix excessive top and bottom padding on homepage
  • ✅ Make button styles just an outline
  • Build the form for /pull/new
  • Make form submission on /pull/new make api call and route to /pull/{id} page
  • Build the /pull/{id} page with the data from payload response
  • Figure out how tf react works more

Fun/ideas:

  • Add page transitions
  • Add a fun background to the splash page
  • Make a loading animation for when the pull is submitted that looks like floating/shuffling cards
  • Animate the cards flipping over one at a time when pull page is loaded
  • ✅ Add an indicator for the current moon phase

Weekend 3

  • Came into the Hub on Sunday evening for a bit of work time, since I was in the city and wanted a quiet environment.
  • I did some design tweaks to the Tarot GUI so far and added a dynamic little moon phase emoji icon that indicates the current moon phase.
  • React is still confusing to me and I still feel like I'm cargo-culting it with this react-router starter template, but I want to finish a working GUI sooner than later so I don't want to start over from scratch. Anyway, as far as templates go, there is very little example content.
  • I wanted to animate page transitions, and tried a few different methods (again, without knowing fully what I was doing) and couldn't get anything to work, but I found this guide for react-transition-group which seems the most applicable to my setup of anything I've found so far. I'm still not sure how to apply it since my project has routes.ts in a separate file from root.tsx but perhaps if I save the bookmark, I will be able to make use of it later once I've figured out more.

To-do:

  • Start actually building the form page to submit a new tarot pull. This will be the main part of my app and I think I've noodled around enough that I should start working on the meat and potatoes (or tofu and potatoes if we are vegetarians). I'll be coming back into the hub tomorrow morning so will resume then!

Day 16

  • Joined the Monday Meditation call, arrived late but luckily still got to participate in the discussion and led a short meditation.
  • Paired with Elliot, who helped me understand what React is actually doing and why. I now feel more confident about how to go about building the rest of it. I also helped him whiteboard out ideas for how to handle what happens when a websocket connection is lost on a multiplayer web-based game he's building.
  • Had a chat with Lucas and showed him how Eleventy works and how I use it to make websites. He said it might work well for his site which he currently builds from markdown files with PanDoc.
  • Helped Kate (who helped me understand PostgreSQL last week!) solder something because I was working in the room with the soldering iron when she came in.
  • Sent out an issue of my email newsletter.
  • Made a cute favicon for the tarot app.
  • Added view transitions to my tarot app UI pages using the new View Transition API (as suggested by the React Router docs). This doesn't work in Firefox but it is a nice progressive enhancement where it does work (and I don't mind waiting for them to implement it instead of messing around with that react-transition-group package which turned out to be outdated and overcomplicated).
  • Implemented new routes /pull/new and /pull/:id which are both children of the /pull route. Right now they just have placeholder content but I was able to grab the value of the dynamic segment :id and display it dynamically on the page. It was oddly satisfying.
    • I also made the /pull index route redirect to / (the homepage) since there was nothing there without a child route.

To-do:

  • Create a form on /pull/new that submits a post request to the back end.
  • Make /pull/:id display the tarot pull with that ID based on data fetched from the back end.

Days 17 & 18

  • I didn't write a log update yesterday, and I wasn't able to spend the full day working on my tarot app project (due to external circumstances), but I did create the HTML portion of a tarot pull creation form at the /pull/new route on my GUI.
  • Today, I came into the hub just in time for the Critical AI Discussion Group meeting, which I very lightly facilitated, and during which ranted a bit about gay space communism.
  • Prepared materials for my workshop tomorrow.
  • Started working on handling for the tarot pull form submission. Not much to show for it yet, but at least I understand typescript types slightly better.
  • Gotta go catch an Amtrak train to Philly now, but I might keep working on my laptop on the train if I feel like it.