comiCSS: Month One
Tags: css, html, sideprojects, showdev
Published: 2022-03-13 22:29:03

---
title: comiCSS: Month One
published: true
description: Last month, I created comiCSS a project with comics about CSS drawn in CSS. This article reviews those first 30 days.
tags: css,html,sideprojects,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/335ns4gp73emzwmak9ne.png
canonical_url: https://alvaromontoro.com/blog/68000/comicss-month-one
---

Last month, I created <a href="https://comicss.art/">comiCSS</a>—a project with comics about CSS drawn in CSS. It is a fun project (I like drawing in general and drawing with CSS in particular), and I'm enjoying it so far.

As part of the project, I set some goals for publication, engagement, and economics (this last one is more like an experiment.) In this post, I will review those goals just after the site reaches its 30th day of existence. But as a tl;dr version: everything is on track or exceeding expectations, and it's impressive.


<h2 id="the-webcomics">The webcomics</h2>
<p>During this first month, I published 15 comics on the site. It started with eight initial comic strips, and it grew at a rate of 2 more publications per week. But not all of them were new. Some are re-purposed cartoons that I drew months/years back.</p>
<p>I want to grow the site organically by creating new content, but the two publications per week may be too much for me at the moment. So I will continue publishing just one new webcomic a week and having some "specials" here and there. I will be happy to keep a pace of 4 to 6 new comics each month.</p>
<p>These are the comics published during the first month of comiCSS (<b>remember, all are HTML and CSS</b>. You can <a href="https://comicss.art/">see the code on the site</a>):</p>
<h3>The originals</h3>
<div style="text-align: center">
<img src="https://comicss.art/comics/1/flexing.png" alt="A cartoon with two panels. In the first one, there's a black-and-white character small in the box, and says 'sometimes I feel quite small'. In the second panel, the character looks big in the box, and says 'then I flex a little'"><br>
<span class="has-shadow" style="display: inline-block;"><img src="https://comicss.art/comics/2/word-breaking.png" alt="A cartoon with one panel. A serious-looking black-and-white character over the repeating message 'The world is a really peculiar place. There are times when you feel like break-dancing, and some other times, when you just feel like word-breaking...'"></span>
</div>

<h3>Playful Unicorn and Lion</h3>
<img src="https://comicss.art/comics/3/lioncorn.png" alt="Cartoon showing a lion with a unicorn hat saying 'I am a unicorn! Roar!... and so forth'. And an ashamed unicorn smiling next to it."><br>
<img src="https://comicss.art/comics/4/unilion.png" alt="Cartoon showing a unicorn with a lion mane wig hat saying 'I am a lion! Roar!... and so forth'. And an ashamed lion smiling next to it.">

<h3>At the barbershop</h3>
<img src="https://comicss.art/comics/5/barbershop.png" alt="A comic strip with two panels showing a barber with a razor and a client. In the first one, the barber asks 'do you prefer the neckline square or rounded?'. In the second one, the client replies 'border-radius: 100% / 20%' to the surprise of the barber.">

<h3>Texas Freezing Weather</h3>
<p>We had another batch of freezing weather in Texas (although not as bad as last time), which triggered some CSS-related comic strips.</p>
<img src="https://comicss.art/comics/6/texas-freeze-i.png" alt="Comic strip with two panels. The first one reads: 'A cold front approaches Texas... again...'' and it has a white man reading a text message on his phone: *message from parents* It is freezing in Texas. What are you doing to stay warm?. In the second panel, the man replies: Don't worry. I'm fine. I'm holding a laptop and opened one of my CSS animations."><br>
<img src="https://comicss.art/comics/7/texas-freeze-ii.png" alt="Comic strip with two panels. The first one reads: 'A cold front approaches Texas... again...' and it has a white man reading a text message on his phone: *message from parents* Temperatures will drop to the single digits. In the second panel, the man replies: Got it! Then I'll open the 3D animations."><br>
<img src="https://comicss.art/comics/8/texas-freeze-iii.png" alt="Comic strip with two panels. The first one reads: 'A cold front approaches Texas... again...' and it has a white man reading a text message on his phone: *message from parents* This is serious!! It could get really cold!!!. In the second panel, the man replies: Ok, ok. I'll use Chrome to open the animations.">

<h3>Animated CSS/Accessibility</h3>
<p>The <a href="https://comicss.art/comics/9/accessory.html">original version of this cartoon is animated</a>, but the comic strip looks weird. The 3D animation gives a nice extra touch.</p>
<img src="https://comicss.art/comics/9/accessory.png" alt="Comic strip with two panels. The first one shows a white man saying: 'You cannot write accessibility without CSS'. The second panel is a view of the same white man from behind, he is holding a blood-soaked knife and says: nor accessory to murder... but let's put a display:none on that one for now.">

<h3>Valentine's Day Special</h3>
<img src="https://comicss.art/comics/10/impossible-love.png" alt="Comic strip with a single panel showing a fly and a spider smiling at each other with a heart in between">

<h3>Superheroes</h3>
<p>I'll probably do many cartoons like this. They are silly and easy to make. Coming up with the ideas for the content is the tricky part.</p>
<figure>
<span style="display: block" class="has-shadow"><img src="https://comicss.art/comics/11/superherocss.png" alt="Comic strip showing CSS code that describes different comic superheroes. The code is too long to put in an alt text, please see the demo."></span>
<figcaption>I'm especially proud of that last one.</figcaption>
</figure>

<h3>Pikachu Meme</h3>
<img src="https://comicss.art/comics/12/pikachu.png" alt="Comic strip showing the surprised Pikachu meme, with the text: Me: *builds CSS animation*. *Computer fan goes crazy*">

<h3>Scroll Snap</h3>
<img src="https://comicss.art/comics/13/scroll-snap.png" alt="Comic strip with 6 stacked panels. The first, third, and fifth one show a man scrolling a mouse in front of the computer. The second and fourth show the man snapping his fingers. The sixth shows the man worried as someones says 'that's not how you do scroll snap!'">

<h3>Accent Colors</h3>
<img src="https://comicss.art/comics/14/accent-color.png" alt="Comic strip with 5 panels showing a white man getting angrier and angrier while updating the color value on CSS to green written in Spanish, German, French, and Ukranian. In the final panel he asks 'Hey, honey! How did you say accent-color worked in CSS?'">

<h3>Tribute to Mafalda</h3>
<p>Based on a classic Mafalda cartoon strip. I added a <a href="https://comicss.art/blog/#mafalda-inspired-cartoon">reference on the website</a>.</p>
<img src="https://comicss.art/comics/15/democracy.png" alt="Cartoon of a man looking at a laptop and saying 'My CSS is to Web Development what Communism is to Democracy!' (based on a classic Mafalda cartoon)">

<hr>

<p>Although they have many things in common, there is no clear definition to all the cartoons. Each of the comics has a slightly different tone and approach. I am still trying to find my style.</p>

<h2>Stats and Numbers</h2>
<h3>Engagement</h3>
<p>I created a <a href="https://twitter.com/comi_CSS">comiCSS Twitter account</a> and started posting the comics, links, updates, and previews of what's coming.</p>
<p>Trying to keep it encouraging but not too annoying, during the first month, I tweeted 48 times. And that turned out in 113 people following the account—humble numbers for a humble project. And I prefer it that way for now: keeping it small and maintainable at the beginning may be good for my overall mental health.</p>
<p>In the future, I'd like to increase the rate and topics of the tweets: not only comics but also talk about the properties used, how to draw them, share more videos of how the comics are coded, etc. And yes! <a href="https://www.youtube.com/c/AlvaroMontoroCSS">There are videos!</a> Just like this one:</p>

{% youtube icKWKEcsAIE %}

<h3>Economic update</h3>
<p>As I explained in the <a href="https://dev.to/alvaromontoro/introducing-comicss-1amh">introductory post</a>, I don't expect to make money from this project, but I will be happy if it can generate enough to be "self-maintainable."</p>
<p>It is a modest goal ($12/year, which is the domain cost, as the hosting is <em>free</em>, and the coding is for fun, so it doesn't count.) And the tools to do it are simple and non-invasive to the web visitors:</p>
<ul>
<li>Web monetization</li>
<li>Brave Creators</li>
<li><a href="https://www.patreon.com/alvaromontoro" rel="external">Patreon</a></li>
<li>Blog articles promoting the site (yes, like this article)</li>
</ul>
<p>It seems easy and, at the same time, challenging. But I have some good news: <strong>the project got a new patron on Patreon who pledged $1/month</strong>. (Thank you, Matthias!) If the patron stays the whole year, comiCSS will reach the economic goal automatically (minus the taxes and fees that Patreon charges.)</p>
<p>On top of that, <b>comiCSS got $0.02 through web monetization</b> (I think web monetization is a great idea, but it doesn't seem like it's all there yet), <b>and $1.34 through the Brave Creator program</b> (I wish I knew who it was to say "thank you.")</p>
<p>These numbers are low but exciting because they mean that comiCSS could stay online paying by itself. Remember, this is a static site developed in HTML and CSS (with a bit of JavaScript to simplify the navigation.) So anything that is not "losing money" is a success.</p>


<h2 id="whats-coming">What's coming</h2>
<p>I recently drew some <a href="https://codepen.io/alvaromontoro/full/NWwVqZV" rel="external">browser logos in CSS using a single HTML element</a> for each of them (a couple of them need rework, but close enough):</p>

{% codepen https://codepen.io/alvaromontoro/pen/NWwVqZV %}

<p>I have some ideas for them (although not all of them related to CSS), and they may start making some appearances in the comic strips soon (as soon as tomorrow!)</p>