Art Daily

It all started with discovering ASCII art. Seeing how people used normal letters to make art pieces was mesmerizing. My mind couldn’t stop thinking and asking questions  

“wait how?” 

“Based on what exactly did they choose this specific letter?” 

“How did they know when to cut it off and when to start another row?”

That was just some of what went on my head (did I discover the answer to any of these… no. but I kept asking anyways) 

But seriously, how could you not just stop and be in awe of the ingenuity of those engineers?

Writers note: 

I remember the first since comp 101 assignments were folded with ASCII art the instructor had to tell me to stop with the art and just focus on the requested output. Nice. Also here’s a nice website that has an archive of ASCII 

Later on, I started seeing animated ASCII, and then just abstract art is done with code! 

So at this point, I wanted in! I want to make art with my brain! Please sign me up! However, when I started looking at the code… it was overwhelming and I just felt stupid. So I did what I do best. I forgot about it and just continued on with life. 

However, life kept on reminding me. I see tutorials pop up here and there. I see art exhibits that use generative art. I even went to a museum of light that is basically a generative art installation. Each time I get reminded, I get this sort of sting in my heart. I didn’t understand at first why I felt a mixture of hurt and amazement at the same time. Yet slowly, I understood that a part of me wants to make art, just like all those artists, and I was just suppressing it because of fear. 

Now, I think, that part of me, needs to be nourished and yes it will be scary, yes I’ll make shit sketches, yes, I will break things a lot. Yes, I won’t understand a lot of the things, but I need to start regardless. 

So here’s my declaration of my project. I call it ART DAILY where I’ll do a sketch a day to get comfortable in the field and slowly grow. I plan on hosting those sketches on GitHub and having the site live here. I also think I’ll have a readme for sketches to keep notes and who knows it might help people (hopefully) 

Now I’ll share the process of building the site and then any later updates will be hosted on a project-dedicated page for those sketches (and if a sketch is worth it, it might have its own post) now let’s move on to explaining the process of developing the website! 

started off by doing some mockups of how I want my website to look here’s the sample 

I chose Mockup 2 because it looked the best to me. Now in the development process, I decided to build an MVP (minimal viable product) which basically means it won’t look like the final result but something close to it because I want to start the project as soon as possible and don’t want to waste time on beauty touches (which will come with time) 

Let’s break down the progress of developing this website and what better way other than a bug? I was facing some issues whenever I try to publish the page. Not sure what the problem was. I tried every guide and had no luck. So I decided to just start a new one and call it art daily.

and lord and behold it fucking worked! Why? what was the issue before? maybe the generative in the repo name? I don’t know but it works.

Here’s how the published page looks like at the moment

So I started designing it a bit to follow my Figma sketch and I’m happy about the result thus far

I then moved on to design the card style. It took a little while to decide on how I wanted the component breakdown to be (as in who’s the parent element, how many children it will have, what’s the display, and spacing and, well, think of it as photoshopping it) and I like how the card design turned out in the end

Now I want this site to be easy to manage, I don’t want to copy code sections and update it with the content each time I did a sketch. It would be time-consuming, tiering, error-prone, and just annoying. So I wanted it to be dynamic and what better way other than using a JSON file to hold the data and make the Dom render it by looping over the data? This way, I have one file to update each time I do a new sketch. 

With that genius (I use that term loosely) idea I move on to coding it by building the JSON structure and creating the template string that would hold the card structure, then adding it to the parent container. And well…

Clearly, I’m doing something wrong. The Dom isn’t processing what I pass it as text rather than as Dom nodes. What better way to figure out a solution other than stack overflow, and they delivered.  Based on that answer I adjusted my code 

And lord and behold it worked!

Now I just need to fix the container to view the cards next to one another which is a simple fix and 

At this point, I remembered that initially, the background should be the actual sketch, which I forgot to style so I started adjusting the image container to match what was on my mind and have it fit the card and blend with it

Now it’s time to test with the Dom generating code and yay it works! 

Awesome, at this point, I can be done, but just to be on the safe side, let’s test it on different image formats and backgrounds to see if this works well and, well

To fix this, little updates on the data file and adding a blend mode for each type it was fixed 

Now I have no excuse to not start and tomorrow will be the official first sketch. Looking forward to what I’ll be doing (regardless of how lame they might be) If anyone is interested in following the project. You can check the repository here or the website itself here.

Helpful resources that helped me build the site:

• Using CSS custom properties (variables)
• HTML vs Body: How to Set Width and Height for Full Page Size
• Google fonts – VT323
• How To Load and Use Custom Fonts with CSS
• Font converter
• Complete guide to flex box
• Make white background of image transparent in css
• <blend-mode>
• Change image size via parent div
• z-index()

If you managed to read this far. Thank you for your time and here’s a virtual cookie for you 🍪

Update 30th June

So I need to add some updates here. I did develop the side and all was well and dandy, but once I pushed the code to GitHub… nothing worked.

I spent the whole day debugging and debugging some more and to no avail. There is something wrong with the fetch API (and it might be because I forgot how promises work but the data wouldn’t load) I tried and tried, and just felt frustrated.

I decided to sleep on it and come back the next day (which is today) and figure things out. So I decided to try a couple of tactics.

1. just load my JSON data in a script tag above the original script this way the data should be global right? Yeah, no it didn’t. it also turned out to be a bad practice.
2. after a couple of googling it all points to the XHR request and this gem of a guy Richard and this article “Load JSON file locally using pure Javascript” and it worked!

I can describe the joy I am feeling and now it’s up and running along with the first project 🥹