My Code in the Dark Experience — As an audience

This year, two Code In The Dark competitions happened in Manila.

The first one happened last February 21 was organized by PWDO and ManilaCSS. Some friends encouraged me to join, but weren’t able to get in — I’m not sure why. I’m guessing that I registered too late. It would been better if the organizers told me why.

I also wasn’t able to go — to watch due to conflict of schedule and location (Is far. For me). Which is mostly my reason or excuse why I barely go to events and meetups.

Last Saturday though, I was invited by Kath, a friend who also happens to be a participant.

This time, it was organized by Women Who Code Manila, in partnership with PWDO and ManilaCSS. A big thanks to Atlassian for sponsoring the event and venue!

To be honest, I am a bit uncomfortable to go because I thought it was an all girl event as it is organized by Women Who Code. It feels like being invited to attend a baby shower!

Obviously, the event was filled with girls, but thankfully there are familiar faces and that I’m not the only guy there. It felt a little less`out of place/don’t belong`.

As the program started, Michie of WWC Manila and Sam/ManilaCSS mentioned that they wanted to see more girls on other similar events in the future. I didn’t notice that until they mentioned it – that the majority of attendees on tech meet-ups and events are dudes. Which made me think that maybe, some of the girls also had the same experience like me. The`out of place / don’t belong` feeling and it’s good that there are people volunteering and stepping up for them to have this kind of organization that will empower them to do and achieve more in our technical field. Kudos to you guys, I mean girls!

Okay, enough with the introduction and let’s move on to the main point of this article.

I’m sorry, but I’ll skip the other details of what happened before the main event. If you want to know about the whole event, you can check PWDO or WWC’s Facebook pages.

The Competition

Before the competition started, the organizers provided the assets needed for the whole competition to 13 participants. I didn’t witness everything that happened after that because I’ve gone out to buy milk tea (priorities).

When I got back — slowly sipping rock salt and cheese plus pearls from Happy Lemon (No, this is not sponsored — yet), the light was already out and the organizers have already started explaining the simple rules.

Code in the Dark

15 minutes per round coding front-end in the browser. The layout to be replicated and assets needed to do it is also accessible within the browser. NO PREVIEW.

It sounded simple. It looked simple. Especially if you’re there, just to watch. After a brief orientation, they immediately started round zero.

Round Zero / “Warm-up”

It looks easy and simple right? Especially if you’ve been coding front-end for years. You’ll probably think it won’t take that long to layout this.

After the 15 minute timer, only 3 out of 13 had managed to do a close replica of the layout.

You see where this is going? Before I get in to details of what I had witnessed, experienced and realized while watching them, let’s see the other layouts that the participants need to reproduce.

Round 1 — Take a Break

Provided assets: Fonts(Roboto), all icons and raw photo (no gradient).

Round 2 — A mobile dashboard wireframe

Provided assets: Fonts(Roboto), Plus icon, grid icon, hamburger menu icon, and kebab menu icon.

Round 3 — A web page

Provided assets: Fonts(Source Sans Pro) Logos and the image beside the ‘design development’ header .

As you can see, the difficulty increases round after round.

This is to eliminate contenders until there’s 5 participants left for the last round.

The event proper

As soon as the organizers announced that audience can roam around to watch and read lines of codes from the participants screens, we did, checking 1 screen at a time.

As I watch with my fellow spectators, I felt excitement, (a bit of) stress, panic, and pressure even if I’m not writing code! If I already felt that while watching, what more if I’m also one of the participants?

Since there’s no visual preview at all of what they’re doing, everyone is blind. Everyone has no idea if the code will work or not, even if the code looks really good and clean. All we can do is guess and anticipate base on their previous results, round after round.

On the last round, I decided to try doing it on the side with the participants. I borrowed Kath’s laptop, by watching the first 3 rounds (zero to two, not a new book), I was able to think of a strategy that I can try.

When the timer for the last round started, I didn’t start coding right away. My strategy is to list out every element, before styling them. Which took 3–4 minutes. Doing that, I already lost 20–25% of the allotted time. Eventually, 10 seconds before the 15 minute mark, I was able to code most of the styles for the primary elements. Still, I failed to reproduce, the layout.

It was faaaaar from what I had expected to see. One of the logos didn’t render at all, the other one is stretched, I positioned the image from the left side instead of the right (always been my weakness, Code in the Dark or not), etc.

It felt like racing to the finish line with a blindfold on. Though you have a clue where the finish line is, you’ll never know for sure, and there’s a high chance that you may end up running to something else. Especially without practice.

Failure, frustrating and shameful as it may seem, I had fun.

To be honest, it is challenging to keep yourself composed the whole 15 minute, not to be distracted by the loud and dark environment with people talking and roaming around.

Also, your old habits like switching (cmd/ctrl+tab) from IDE to layout preview can also eat time as the preview is within the browser/page itself.

You also have to make sure that you will not misspell properties or asset paths which will likely happen since you’re racing against time.

So If you’re planning to join someday, a few days of practice is definitely a must. Maybe you can go to a loud and noisy bar to replicate the dark chaotic environment.

You may try do the challenge alone, and it might be easier if done in a peaceful, but I don’t think it’ll have the same level of fun or adrenaline as you’re only competing against time and yourself.

Still, If you’re curious and want to see the assets or even try the challenge yourself, check this link from ManilaCSS.

Again, I had fun. And I think, most of us did. Participant or not.

As I’ve said when they asked me to share my experience. I said that even though I’ve been coding for years, it is challenging for anyone doing front-end coding. Regardless of how long they been doing it. Especially if you’re already used to using tools and preprocessors such as LESS, SASS or STYLUS.

The competition is challenging and fun, a good experience for everyone who loves to code CSS and may improve your skill, but in my perspective, it is proven by experience that we can’t rely on our memory alone. Stack Overflow, CSSTricks and W3Schools is there to help us out, it is not even necessary to memorize everything, though it is good to be aware of it.

Still, I’m in awe with the skills of the participants and would like to congratulate the winners of the competition!

With this, I’m looking forward to join the next Code in the Dark.

All photos used (except the header) was taken by Riel Reyes of PWDO