1
The origins:
It all began with “My Boyfriend Came Back From The War” by Olia Lialina. The storytelling, visuals, and interactions crafted purely with images and HTML captivated me. Then came JODI, Alexei Shulgin, Cory Arcangel, and then Vuk Ćosić, Molly Soda, Ben Grosser and then Mariela Yeregui, Gustavo Romano, Broken English, and so many others. I quickly got trapped in the net art movement.
But…
What is net art?
Juan Martín Prada, in his book "Prácticas artísticas e Internet en la época de las redes sociales" (2012), provides a concise definition of net art. He states that "net art encompasses two distinct categories:
- Artistic expressions that rely on the internet for their existence.
- The early web movement that opposed dominant usage patterns. This movement, aligned with its initial manifesto, focused on telematic networks and highlighted governmental and corporate strategies aimed at standardizing technology use and consumption."
Guiding forces
In my early high school years (2003/2004), there was a government program that provided internet access at a minimal cost. Since my parents hadn't yet bought me a computer, I spent hours after school surfing the web. I believe that was when my fascination with the internet's potential began to take shape. While I didn't experience the heyday of personal web pages like Geocities, I had a period where my cultural consumption happened not through social media platforms, but through diverse and often unique web portals. These sites, while sharing certain design trends, still offered much more room for diversity compared to the repetitive templates of today's social media platforms.
In a 2016 interview, Olia Lialina lamented the loss of personal web pages, stating, "The most important phenomena we lost [was] personal web pages. People don't build them and don't feel responsible for building the World Wide Web. That's the tragedy of today's Internet...we should take it very serious[ly] and [not] give up our 'corners of the cyberspace' to the aggregation networks of the future."
In our contemporary online life, heavily mediated by a few centralized corporations, this concept drives my desire to build a more diverse and open internet. Another of Lialina's ideas that resonates with me is the concept of the "General Purpose User or Turing Complete User," a nod to Alan Turing.
Lialina contrasts users, who control their computers, with people who passively experience technology. She challenges us to reclaim our user rights and demand better software, the ability to choose "none of the above," to delete our files, to recover lost files, to fail epically, and most fundamentally, to see the computer for what it is. The Turing Complete User is the opposite of an "invisible user"; it’s someone who can write an article in their email client, layout a business card in Excel, and even shave in front of a webcam. These users find ways to publish photos online without Flickr, tweet without Twitter, like without Facebook, add a black frame to a picture without Instagram, remove it from an Instagram picture, and wake up at 7 a.m. without an app. Lialina herself embodies this kind of user—enthusiastically using Twitter, but not as prescribed. She updates regularly but follows no one, preferring to read her friends' tweets sequentially rather than through a corporately defined algorithm. Turing Complete Users develop workarounds, consciously or not, to wrest control from the increasingly dominant technology-experience-person trifecta.
2
Creating bebeto.pizza
In 2016, while learning web development, I had the idea to create a website to accompany a music album I was planning to release. I designed the site to showcase different aspects of the character I portrayed in my music. For this project, I drew inspiration not only from the early net art movement but also from concepts related to relational aesthetics in contemporary art and works like Quehué by Marisa Rubio and exhibitions like Experiencia Infinita at the Malba Museum. My goal was to engage users by placing them in two states: inconvenience and constant doubt. So I built this website using the old boys: vanilla JavaScript, PHP, jQuery, p5.js, MySQL, CSS, a bunch of Ajax calls, and a couple of other libraries (you may be old, but are you this old?).
Initially, I hosted it on a shared cheap hosting but later upgraded to a VPS to store and display user-drawn images, which wasn't possible on shared hosting.
(A VPS is like renting your own mini-computer in the cloud. Unlike shared hosting where you're sharing resources with many other websites, a VPS gives you dedicated resources and more control over your hosting environment, allowing for more advanced features and better performance).
For the domain, I chose an elegant .pizza 🎀
3
3
The decision to migrate and improve
The maintenance of a (web) net art project over time can be challenging. I recommend reading “Preservation by Accident is Not a Plan” where Vint Cerf (Vice President and Chief Internet Evangelist for Google) and Dragan Espenschied (Preservation Director at Rhizome) discuss this topic in depth.
I initially paid $31 monthly for my VPS, before migrating to a cheaper $10/month option. I also renewed my domain annually (side note: my .pizza domain eventually increased to $99 per year—just a reminder that exotic domains can become more expensive over time).
Some people visited the site and hated it, others loved it. It was showcased in a few digital art pavilions.
After years (2024), I decided it was time to improve my project in three main aspects:
Migrate my static site to a bundler tool:
To improve performance, optimize builds, and utilize modern development tools.
Make it mobile-friendly:
By redesigning and adapting it to support mobile devices and small screens.
Decrease infrastructure costs:
Leveraging the free tiers of some services.
4
4
Exploring bundler tools
I explored various bundler tools, including Vite, Webpack, Parcel, and Snowpack. Initially, I decided to try Vite due to its popularity, as a few developers I knew had started to use it and had positive feedback. I was also drawn to features like instant server start and optimized builds, which were exactly what I was looking for.
5
5
Migrating to Vite
During the migration, I noticed that Vite requires updating script tags to use the type="module" attribute. This change is necessary for Vite to handle scripts correctly and leverage modern browser features.
Before Migration:
<script src="main.js"></script>After Migration:
<script type="module" src="main.js"></script>6
6
Challenges with ES Modules
However, I encountered several challenges that made it impractical to convert my existing JavaScript files to ES modules:
Library Compatibility:
Some libraries I relied on were not designed to be used as ES modules, requiring significant refactoring.
Complex Codebase:
The project consisted of multiple JavaScript files with intricate dependencies, tightly coupled and reliant on the global scope.
Legacy Code:
Converting legacy code to ES modules can be time-consuming and error-prone.
7
7
Implementing Webpack
Ultimately, I chose to implement Webpack, allowing me to use classic script tags without the type="module" attribute while benefiting from a modern build process.
Key Benefits of Webpack:
Compatibility:
Bundles existing JavaScript files and libraries without requiring conversion to ES modules.
Code Splitting:
Optimizes loading by splitting code, improving site performance.
Development Experience:
Features like hot module replacement (HMR) enhance the development workflow.
Custom Configuration:
Flexible configuration allows tailoring the build process to specific needs.
8
8
Migrating to Webpack
I used this multipage Webpack template from Marcin Wosinek and started following his article.
One of the challenges I faced was accessing assets in the build directory and managing JavaScript scripts in production.
These two plugins respectively helped me address these issues:
Copy Webpack Plugin: Copies files from the build directory to the output directory.
HTML Webpack Deploy Plugin: Simplifies the creation of HTML files to serve the bundled JavaScript.
Just in case, this is how my Webpack configuration files look:
webpack.common.js
The configuration file defines the entry points, output paths, and plugins used in the build process.
webpack.dev.js
Plugins extend Webpack's functionality, such as copying files and generating HTML files.
webpack.prod.js
Loaders preprocess files before bundling, such as converting Sass to CSS.
9
Updating my project
I also made the following improvements to my project:
Migration from PHP to Node.js
I chose to move to Node.js because of my growing expertise with it over recent years. Working with JavaScript across the entire stack streamlines development and integrates well with modern frontend frameworks like React. Node.js offers advantages such as native JSON support, access to a rich ecosystem, and better compatibility with hosting platforms like Vercel or Heroku.
To facilitate this, I created a new Node.js + Express backend.
Transition from a MySQL database running with phpMyAdmin to MongoDB
With the shift away from PHP, and considering the project's relatively simple database requirements, I opted for MongoDB. My previous work experience with non-relational databases made MongoDB an attractive choice. Its schema-less nature offers flexibility and scalability while allowing me to use JavaScript throughout the stack.
Migration of User-Generated Content Storage
As Vercel doesn't provide persistent storage for uploaded files, I needed an alternative solution for storing user-generated drawings. After exploring options like Amazon S3 and Google Cloud Storage, I settled on Google Cloud Storage. It meets my needs and offers a free tier, which aligns with my project goals.
Shift from VPS to Free-Tier Hosting
To reduce costs for this hobby project, I migrated from a VPS to a hosting service with a free tier. I chose Vercel due to my familiarity with the platform and its ability to meet the project's current needs.
Mobile-Friendly Redesign and Enhanced Graphics
When I initially launched this project in 2018, mobile compatibility wasn't a priority. However, in 2024, it's crucial to offer a mobile-friendly experience. I redesigned and adapted interactive sections to work with mobile gestures. Additionally, I upgraded the graphics by migrating from A-frame to Three.js for 3D rendering and incorporated GSAP (GreenSock Animation Platform) for smoother animations.
Integration of React projects as pages
Given my extensive experience with React, I wanted the flexibility to add new pages using React components. I established a process to configure my Webpack project to incorporate React build code, allowing for a gradual integration of React into the existing structure. This approach enables me to leverage React's powerful features while maintaining the project's original architecture. I may delve into the details of this process in a future article.
Updating the domain
As part of my ongoing efforts to optimize the project, I've made a change in the domain name. My previous domain, https://bebeto.pizza, expired and was acquired by Dan.com (a GoDaddy brand) asking me 100$ to purchase the domain. While this price matched the previous renewal cost at Namecheap.com, I realized it was higher than necessary. After researching alternatives, I found that other companies offer renewals for $50 or less.
Taking this opportunity to reduce costs, I decided to rebrand with a new domain name. I've registered https://lohacemosporbebeto.pizza through Porkbun.com, which offers more competitive pricing. This change not only helps in managing expenses but also gives the project a fresh identity 👒
10
Conclusion
Creating, adapting, and migrating lohacemosporbebeto.pizza over the years has been really really fun 😋. This project has served as a playground for experimentation, allowing me to explore new technologies and concepts while navigating various challenges.
It has underscored the importance of maintaining diversity and fostering innovation within the web ecosystem, all while highlighting the complexities of long-term project maintenance.
Now, https://lohacemosporbebeto.pizza stands as a testament to this balance—more performant, cost-effective, and mobile-friendly, yet still retaining its experimental spirit.
Please feel free to email me with any suggestions, or questions or just to chat. I’m always eager to connect and learn from others in the community :)
Keep creating!
🤠 Emi