NoV 2024 | CSS and The AI Colleague

---

“What was Saachshaini Sadchatheeswaran’s research about?”

ChatGPT4o responds with three paragraphs, each one with a specific source link. The first two are generic summaries of my PhD research from the University of Cape Town’s web pages. But the third one makes me pause: 

“After completing her PhD, she transitioned into a role as a business intelligence reporting analyst in Toronto, Canada, applying her analytical skills to the financial sector. As of May 1, 2024, she embarked on a year-long sabbatical to reconnect with her scientific and storytelling roots, focusing on the sustainability of urban waterfronts, particularly concerning food systems in cities like Toronto."

source: Saachi Sadcha

I click the source link provided and find myself on the first page of the website on which you’re reading this blog post. 

Image credit: Saachi Sadcha 

“Huh…I didn’t realize it had access to everything on the internet.” I shut down the chatbot and decide this month’s blog post will be about working with artificial intelligence while I puzzle through CSS this month.  

My name is Saachi and I’m on a sabbatical. For those who are new, I would normally give the project’s elevator pitch here, but ChatGPT4o beat me to it. So…moving swiftly on. 

In last month’s post, I stated I wanted to build three apps in November to represent Fall 2029 in my project. Attempts were made, but I think I spent this month more wisely by figuring out why I wasn’t happy with what I published last month. 

When I published the Summer 2024 apps last month https://saachisadcha.ca/october-2024, I wanted to be proud of myself. I had sculpted, painted, typed, and coded my little heart out. The result was not one, but three working apps. Subsequent testing showed that the apps had issues but worked mostly as intended. 

And yet, I didn’t like the physical look of anything I had published. I also didn’t like that the apps worked best on desktops in landscape mode. Ideally, I wanted to use them on my phone in portrait. But even with AI, the CSS - cascading style sheet - that governs the UX/UI (user experience, user interface) of my website, was beyond me. 

So I did what I normally do when I’m frustrated - I pulled out my iPad, opened Nomad, and started sculpting and painting quite randomly. 

Sometimes the outputs from such sessions are terrible. But sometimes an answer to an unspoken internal problem takes shape. And in this particular session, the ultimate look I wanted for my website came into focus: 

Image credit: Saachi Sadcha 

This painting of oranges gives me the feeling I want when interacting with this project. Quiet, intimate, cozy, with a streak of brightness. If this was the first thing I saw of a project, I would think the project would be high quality and worth exploring. 

1. Build for mobile and portrait resolution first
2. Consistent look and feel that matches my painting of oranges above
3. Clear interactions that are restricted to familiar mobile actions
4. Restrict 3D interactions to small models and data viz games. 
5. Replace large 3D explorable areas with paintings and videos to limit performance and image quality issues

 I’m comfortable making individual elements when making art in general but I find composition and layout difficult. 

So I put myself through a crash course via this channel:

https://www.youtube.com/@juxtopposed 

 In particular, her videos on UX/UI and Figma were exactly what I needed. 

This developer also created amazing tools, such as Stack Sorted and realtimecolours, which I highly recommend using in the design stage. 

There are many skills required for this project: 3D modelling, sculpting, painting, research, writing, and UX/UI. All of these I do myself. The only skill I outsource to AI is coding. And, in the last seven months, my experience coding with AI has been…enlightening.

Since I’m only using AI for coding, I can test the results instantly, which is great. However, I expect instant gratification, and in reality, I need to do a lot of fixing/debugging. I’m pretty sure an experienced coder would take an hour or less to create what I plus a chatbot can accomplish together in a few hours or even a day.

For example, I wanted to create a minimal but interactive 3D data viz that will encapsulate an oversimplification of this project’s overall message, which is: 

Minimizing food waste and turning a concrete harbour into a spongy wetland will help increase food security.

Why? Lots of reasons. But I’ll keep them to myself for now. If this project is done well, those reasons will become clear when I publish this project in full. 

I think AI is an incredible, albeit ethically questionable, tool even when restricted to coding. It allows a non-coder like me to create a playground to expand the use of the 3D models I spend so much time making.

But it does, like all tools, have its limitations. Most of the time I can’t just use the code it gives me. I have to spend time debugging and breaking the code into little bits to reuse it as needed. 

I probably wouldn’t learn so much if I didn’t have to. 

That being said, I’ve noticed a clear difference in this chatbot’s abilities in different languages. When it generated React code, the code would work with some adjustments most of the time. However CSS-generated code sometimes took too much effort to fix. 

Image credit: Ramzi Bach

So I’m glad I decided to spend 30 minutes every day this month working through this great CSS course by Ramzi Bach: 

https://www.slayingthedragon.io/dashboard/css/introduction  

I’m about 70% complete and I’ve already learned enough to make up for the holes in AI-generated CSS code.  

Now that I have most of the final framework and code complete, I’d like to rework the three “Summer 2024” apps I made in October so that they’ll follow the rules I’ve set above. I also want to complete the three “Fall 2029” apps I started in November. It would be nice to publish the website with these apps embedded and send it to testers.  I also want to complete the CSS course by Ramzi Bach, which includes creating a portfolio website (but only with CSS and HTML). 

However, December is usually when the least amount of work can be done due to the upcoming winter celebrations so this is a “we’ll see what we can get done” situation.

Thank you kindly, 

Saachi