Code In the Dark was originally the brainchild of Tictail, who developed the editor we used at the event. There has now been a number of events held world-wide. The concept is that a group of developers partake in markup coding using only HTML and CSS with absolutely no looking at the browser output. After 15 minutes the results are shown on a screen and the audience votes for their favourite using some sort of voting system, preferably anonymous. In our event we had two ‘heats’ and I was in the first heat.
The fun in this challenge was that members of the public could vote in the audience and roam around looking out for anyone trying to cheat or just watch their styling strategies. I sat down with my macbook ready to write some HTML and CSS old-school style. The lights were dimmed and the first challenge was shown on-screen.
The first challenge
The frontend lead here at Zedge had allowed me some time that day to practice at work beforehand and my practice sessions had given some mixed results. This is a weird way of working as I often implement styling right into the browser, then copy it into the CSS or Sass file. I came up with some very strange looking sites. Even though it had only taken me a minute or two to get them somewhat decent. After a couple of tries though I had gained some momentum and decided on some layout strategies, which included using flexbox and staying well away from any relative positioning. Because I didn’t know at what resolution the screen would be I used percentages for widths and heights, ems for font-sizes and only used pixel values for margins and padding. I had most success with very simple site designs. Luckily we were given quite simple designs for the challenges.
While I was coding away I shut off the outside world as best I could and focused on visualising the code. At the end with a minute left, I went back over what I had written and picked up on some errors. The audience and visitors to Work-Work peeked over our laptops to see what we were writing and to make sure we didn’t cheat by opening the HTML or googling for CSS syntax.
My finished entry
The timer went off and we were asked to submit our entries. I had absolutely no idea which mine was. When the entries were shown on-screen I couldn’t recognise any as my own but one had very large text all over it and I thought that might have been it. However there was a clear winner with most votes and after the voting concluded, the host revealed the names and it was announced to be mine. I was through to the final round 😊
I looked back over my design and I had made a few errors. The styling for the purple button didn’t get applied as I was missing a bracket in the block above it. I also missed out a flex declaration that would have enabled the main text to be vertically aligned. Other people had all the information in the page but the styling and positioning was very messed up because it could have failed on some basic container element. One had what looked like a syntax error with no styling applied at all.
For the second round I relaxed and chatted, watching the competition. For this round they were asked to code Apple’s homepage. This was similar in complexity and layout to the design I had been given.
The second challenge
After the 15 minutes were up the finished designs were shown on-screen. These weren’t quite as text heavy and not as funny looking, but again there was an obvious winner. The layout was very similar to the original design and it won almost all the votes. Next there was to be a head-to-head battle for a winner.
The final challenge
The final round was head to head but by then I wasn’t too nervous. The design was shown on-screen and I wracked my brains trying to remember animation syntax. This one featured animation on mouse-over and I could not for the life of me remember the ordering of the animation or transition CSS property. I worked on the rest of the design and tried my best to implement it, including the margins, padding and text styling.
The two finalists
Right at the end I double checked the included images and found the image names and sizes to vary a bit, so some of them would have been broken links. I re-implemented. Unfortunately in my rush I missed off .jpg on two of the images and those showed up as blue boxes. I realised this when the designs were shown on-screen and this time spotted mine straight away.
My final entry
Both designs were good in terms of layout. The other entry did have some animation, though it was very broken and funny to see. This was the winning design by a handful of votes.
I really enjoyed this challenge and I hope more companies and meetup groups host it in future!
(Photo in the heading: Aaron Pruzaniec / Wikimedia Commons / CC-BY-SA-3.0)