2016 was a fantastic year for me professionally. I was promoted to Lead Front End Developer, the front end team worked together to come up with a set of standards we wanted to adhere to, and I learned a ton about CSS and JavaScript in general, as well as AngularJS (v1) specifically.

CSS

I'd always more or less thought of myself as being pretty good with CSS (at least once I was past my first year or so of learning) just because I generally knew what I needed to write in order to achieve certain effects and I was always really good at pinpointing browser-specific problems and solving them. But over time I started running into certain problems fairly consistently, especially on older projects. The biggest issue I was having was with specificity.

I stopped using IDs in CSS ages ago but I was still running into these issues due to rules that looked like this:

.trio-spotlight:hover>div>div { }
.trio-spotlight .trio-spotlight-inner div img { }

Sometime in 2015 I'd heard about something called BEM CSS and I decided to look into it and give it a try with a new project I was starting. I loved it and wanted to spread the love, so the front end team included it in the standards we wanted to implement in 2016.

BEM was something I'd avoided for a little while because I thought it was tremendously ugly to have class names that look like .main-nav__link--btn, but ultimately utilizing BEM principles made my CSS so much cleaner and my specificity issues pretty much vanished. I only wish I'd tried it earlier!

One of the greatest things about BEM is it also helped me move toward a more components-based development cycle. I was inspired by Brad Frost's atomic design, and of course BEM lends itself to this very well. It's allowed us to create some reusable components that can easily be dropped into multiple places on a website, and in some cases some components that could be used on completely different websites.

AngularJS

As far as AngularJS goes, I have dabbled in it over the past few years but never really had the opportunity to build something completely from scratch while also having enough free time to figure out how I wanted to do things. Every Angular project I had, pretty much all of the code was in the controller and I knew it was bad but didn't really know how to stop doing that. It was a resolution of mine at the beginning of the year to become more comfortable with Angular though. This year I was able to work on 4 different Angular projects (a landing page for loanDepot, Color Me Hungry, updates for Zalea, and another project that is still ongoing.) I'm happy to say that by now I feel very comfortable with directives, services, and controllers.

...just in time for Angular 2 :)

I think for now though, at least with personal projects if not with work projects, I'm going to look toward trying some other javascript MVC/MVVM frameworks. I've heard a lot of good things about vue.js recently, so that will probably be the next one I tackle!

UNICORN talks

I don't expect I'll ever be great at public speaking but I was inspired to try to get a little better at presenting in front of a group. A coworker came back from a conference with an idea she'd heard from another company where once a year they each do a big presentation about something. We decided to do a little spin on that and come up with smaller talks we'd give roughly once a month (on rotation, so most people wouldn't give a talk more than a few times a year).

I decided to have my first talk be about BEM to try to give the rest of the company an idea of the impact it had on the front end team as far as productivity and code reusability. My second talk was a more inspirational one about all the things that can be done with GSAP, which is a product I used on the Pfister Xtract microsite and fell in love with at the time. It was really fun to research these things that I already had some understanding of in order to explain it to an audience that wasn't 100% developers.

Web Advanced's Game Hackathon

While at lunch one day the dev team and one of the designers discussed the possibility of doing a game to help us learn something new and as a bit of a team building exercise. The concept we came up with eventually turned into Color Me Hungry. We had a handful of half days we were able to set aside to work on it, and I'm really happy with the end result! I enjoy matching games as well and it was fun to figure out how to balance the challenge. I still have a lot of ideas for it, but of course billable work comes first!

Because the site has a small express server running it and we mostly are using windows servers at work, we ended up setting up this site on AWS. I got to experiment with using Dokku to deploy it and that was a fun challenge. Especially since we misunderstood some instructions when setting up the key. Oops.

Accessibility

Accessibility was a big goal for the front end team to tackle this year. We wanted to increase awareness of web accessibility around the company in general, and also wanted to work toward making more of our sites accessible by focusing on accessibility from the ground up. That means making sure it's a consideration for the designers when they are doing their work, and also for the developers when we are translating those designs into code.

That ended up being super successful and it's still pretty cool to hear our designers discussing things like text contrast and font size when they are discussing their designs.

I got an office!

An office in our area opened up this year and Rebecca (the senior back end developer at Web Advanced) and I were both able to move into it! I do miss some things about working out in the main area where everyone else is, but I also really like having the privacy that an office offers. Plus, being able to close the door when I get a phone call from the doctor instead of running out of the building is a big plus!

Here's to 2017

I have a lot in mind to learn in 2017. Let's get started :)