So, week #2 of bootcamp has already flown by and we’re also day 3,504,229(?) into quarantine. It’s taken quite a bit of time to adapt to this new status quo of voluntary incarceration. On some days, I feel a bit like Andy out of The Shawshank Redemption, finding myself day-dreaming about what it would be like breaking out of my metaphorical prison and spending the day in the sun climbing or having a beer with mates. Then quickly realise, I wouldn’t have enough spoons to make it past the living room.

Most days though, I find the time flies by and really enjoy the daily problem solving involved in learning to code. On the plus side, I probably couldn’t have picked a better time in the past 100 years to choose to be cooped up for an extended period of time either. Plus, this whole experience has really helped to re-affirm to myself that I’ve made the right choice in a career change.

“…my CSS is a mess”

The past two weeks have been a bit of a rollercoaster ride and we covered everything from HTML and CSS fundamentals to wireframing, design, advanced CSS and preprocessors like SASS.

The course is fast paced and I’ve been left thinking “thank God, I did the precourse preparation” a fair few times. We’ve had some great support from the faculty available at DevelopMe_ though and our tutors including Ruth, Jack and Kye, who have all made the transition to remote working in particularly short timescales, seem effortless.

In our second week, we were given a brief by a “client” in a simulated exercise intended to demonstrate the full lifecycle of the development process from requirements gathering right through to build and testing.

After qualifying the brief, we scamped the design in groups, built a wireframe using Figma and later tested our code for bugs, validation and accessability using a number of tools like WC3 Validator, Wave and Lighthouse.

One of the major challenges I found coming out of the first week though was approaching the development or build of something new in a systematic way. In week 1, I had previously just grabbed a design and started coding it from top to bottom - line by line. Which is bonkers looking back on it now.

I rock climb a lot as a hobby, and a big part of any major route or trip is in the preparation: do you have the right equipment? where does the route go? how is the weather? do you have enough food? If you translated my earlier approach to coding to rock climbing it would have been like turning up to a random place in the middle of nowhere with no food or water, without enough equipment in the middle of a Met Office yellow warning.

My earlier projects had resulted in aethestically good code at face value but if you had asked me to return to it in a weeks time, I would have had no idea where to start if I needed to fix or debug part of the website as my CSS was a mess.

From mess to modular design

I needed a new approach, which is when I was introduced to Brad Frost’s, Atomic Design. Conceptually, Frost’s model is pretty easy to get your head around and provides a systematic way to approach not just web design but user interface development for any device.

The result though is this really powerful and simple tool you can use to create modular code for any UI. The key word here being modular.

Atomic Design breaks down UI design into parts, starting with something as simple as a color pallete and typography and moving onto larger concepts likes organisms which could represent something like a navigation bar.

The reason modularity is key here is that it helped me to start looking at UI design and development as a series of components rather than one really large overwhelming problem to solve. It also meant that if I needed, for instance, to change the color scheme throughout the site that I could do this in one place rather than five different ones.

So you end up with a system that is scalable, maintainable and probably most importantly, just easier to read.

Each element in your design, e.g. a <p>, <h1>, <img> for instance represents an atom. Combinations of these atoms form molecules or something like the row of like, comment and elipsis icons in the image above.

Combinations of these molecules form an organism which are your major building blocks, e.g. a card or main content area above. The template is a skeleton which can account for the dynamic nature of any content that the application or site might hold.

“… standing on the shoulders of giants”

Some other things highlights from this week included:

• learning about variables in CSS
• @extend, nesting and loops in SASS
• using BEM to better organise my CSS
• improving modularity using @import and CSS / SASS

All of this combined with the Atomic Design model has enabled me to write cleaner, DRY(er?) code by the end of week two that was unrecognisable from the stuff I was creating in the first. All in less time too!

It got me to thinking about an early lecture I watched by David Malan on Harvard’s CS50x - if you haven’t watched it then I 100% recommend it - where he referred to the layers upon layers of abstraction we now experience as Developers which enable us to develop solutions faster, more efficiently and effectively.

He referred to this advantage as the result of standing on the “shoulders of giants” (or more accurately Developers) that came before us.

One thing I know for certain, I’m just glad I have a process now to follow for starting my projects.