Women Who Code In the Dark 2019

Humans love mystery. Not knowing something eats us up, like an itch waiting to be scratched, because we all feel the need to eventually find out. We have to.

But once we do know, the fun is over. The loveliest part of it all remains to be the not-knowing.

When you’re a developer though, it’s a different story. No one likes to be surprised with how things would look like on production. We have staging environments for that very purpose: catch bugs before they catch us off-guard. And even before that, we have our development environments—our local machines where we do the dirty work.

And I can assure you that when coding websites, I probably sneak a preview of what I’m doing every ten or fifteen seconds.

Enter Code In the Dark. In case it’s the first time you’re hearing about it, it’s a contest with very simple rules:

1. They flash up a website peg.
2. They give you the assets, colors, and 15 minutes.
3. Then you’ll have to hard-code the website using this editor and try, as best as you can, to replicate the website peg.

The catch: No previews.

Basically, you have 15 minutes to code a website page with nothing but your plain ol’ HTML/CSS skills and the text editor in front of you. You won’t be able to see what you’re coding, so better knock on the HTML/CSS gods out there and hope you implemented your flexes right, or tacked all your semicolons and closing tags properly (we don’t want a broken page at the end of those 15 minutes, don’t we?). Winners are decided through audience votes.

I don’t know about you, but for me that sounds so friggin’ exciting. We’ve hosted a few in our office, and the results always come out funny. If anything, the goal was to get the basic layout nailed, and everything else is just bonus points.

Though if I’m being really honest, the exciting part is anticipating how you screwed up 🤣

* * *

Women Who Code In the Dark (Year 2) was organized by Women Who Code Manila, ManilaCSS, and Philippine Web Designers Organization (PWDO). Before the contest itself, ManilaCSS’ Sam Cruz gave a talk on SVG animations which, honestly, I found pretty cool. Probably something to look up (I wonder when? 😭) because it looked so fun, and I’d love to be able to implement something like that in our very own work soon.

AWS hosted us in their very own headquarters at BGC, which I have to say is a very fancy office. (They have an instruments room.) They prepared this room for us where each participant gets her own monitor, and when the real fun started they turned the lights out.

There were four rounds in total: a warm-up, an Accenture Challenge (Round 1 where elimination begins), and then Rounds 2 and 3.

I’ll just show the round I think I did best and the round I think I sucked most. 🤣

Best Round - Expectation

Best Round - Reality

Not bad, eh? This was Round 2. I nailed the layout, but I forgot my paddings 🤣 So the input fields and buttons are all weird. The assets were .svgs as well, and I wasn’t sure if I imported them right. But the background turned out okay, at least. I didn’t risk it with the leaves, so I just left it at that.

Worst Round - Expectation

Worst Round - Reality

This peg right here. This is a goddamn piece of work. HAHAHA. I missed an important property, background-size, and it was costly. The text and logo suddenly disappeared with the white margins 🤣

AND I LEFT MY CHEAT SHEET ON!!! HAHAHAHAHA. It’s up there at the top. I copy-pasted the colors from the instructions to save time, but I forgot to erase/comment them out 🤣

Anyway, in the end, I placed third. I sorta expected it because the girl on my left did a pretty decent job, so in the end it was between her and the defending champ (who by the way, is apparently still a student. Hahahaha gosh we need to level up).

We got swagz! Though nothing I don’t already have, because they were the same stuff from Accenture’s #DevelopHER hackathon 🤣 (Oh my gosh, I need to backtrack and blog that as well. Our team won 50K from that contest HAHAHAHA)

That was pretty much it! I had a great time, and it was nice being surrounded by frontend people. Back at work I was the one they counted on mostly for CSS and all the pretty-looking kind of stuff, and this is like being in a flock of birds of the same feather. I felt small, which excited me, because I knew I had a lot to learn. Here are people talking about animations! SVGs! Transitions! And they were all new to me. These are things I should be bringing to the table, and being around these people nudged me to push what I know a little bit further 🌱

‘Til next year, frontend friends!

* * *

Follow the organizers on Twitter:

• Women Who Code Manila @WWCodeManila
• ManilaCSS @ManilaCSS
• Philippine Web Designers Organization @PWDO