Cross Training in Client Side Development - Part 1

I’ve started cross-training into HTML/CSS at my job. I have a pretty decent working knowledge of front end development: given enough time, I can usually google my way into a working, albeit largely cargo-culted, solution. But I wanted to feel more efficent and confident when making front-end changes.

The training is pretty self-guided. Its broken down into three milestones, each being a different step in building out a full page from a PSD. Each milestone links to few related articles and then basically tosses you into the fire.

Which is my favorite way to learn.

I’m not even half-way to first milestone, and already I’ve learned this: client-side development is way harder than I thought.

Photoshop is a beast

Just opening the file was a challenge. After it finally loads, it tells me I’m missing fonts. It doesn’t tell me which fonts of course, so I’m stuck trying to figure out how to use the text tool to know what font, then downloading them one at a time from our font repository.

It has way too many toolbars and buttons. I’ve had some experience using GIMP, so I knew how to work with layers and other common image editing tools, but this was on a whole other level. I felt pretty dumb, needing help to do simple things like scroll around and select text and objects and layers.

Naming things is harder

I’ve often joked that CSS is an append-only file format. You never refactor or rename anything, you just add more cruft with a different name somewhere at the bottom.

In C#, when building something out, the name is not so important: its incredibly easy to change. Often as you build the object you realize it would be better served by a different name. Right click, Rename, bam done. All references updated.

But on the front end, a poorly named structure is basically stuck with you forever. Changing it requires very careful find-replace and seems almost not worth it.

Naming colors in SASS was difficult too. Should I name the color after its purpose? Should I name it based on its color? BRAND_PRIMARY or BRAND_BLUE? Suddenly you have DARK_BLUE and DARKER_BLUE and DARKEST_BLUE_FOR_THAT_ONE_BUTTON.

Lots of churn

Every week theres a new front-end framework, a new build tool, and a new set of best-practices, whos evangelists push you towards throwing everything away and starting over. It’s extremely tiring, especially for a back-end developer, to keep up with.

While we have a client-side boilerplate generator, I still had to make a lot of decisions up front: Did I want a templating engine? Did I want SASS or straight cSS? What sort of javascript tooling did I need: jquery, requirejs, or anything else?

I’ve only been able to marginally keep up with this stuff.

Things to work on

I feel really good about what I’ve accomplished so far. It’s almost magical when things come together and look exactly like the design called for.

I need more practice breaking down a design into parts. It’s hard sometimes to know where to get started.

I want to learn more about creating re-usable modules and structures: classes that can be flexibly applied in a variety of situations.

Looking forward to getting through the rest of this project!