Menu
Victoria Retallick

Coding a website in only 15 minutes without the browser, docs, frameworks and tools

Last week I attended a Code in the Dark event. This event was held at Work-Work and organised by bart.js, a Trondheim JavaScript-based meet up group.

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!

Basic styling with CSS/Sass/LESS/etc is becoming a dying art among frontend developers who rely more and more on frameworks like bootstrap and foundation. There is so much technology we must learn as a new javascript framework gets released almost every week and here at Zedge in the frontend team we have used countless different frameworks, build systems, package managers within the last two years while I have been here. Now we use typescript as well. Many companies expect their developers to be full stack, dilluting the attention to styling. CSS is not going away any time soon unlike many of these technologies and flexbox has erased some of the headaches. There are some exciting new features coming up too like CSS Grid Layout.

So spending time challenging yourself to improve your CSS might be worth it. Take a look at Codepen and CSS Quests to find inspiration and others doing the same.

(Photo in the heading: Aaron Pruzaniec / Wikimedia Commons / CC-BY-SA-3.0)