Picking my battles

Recently I've been thinking about what's important to me and what I like to focus on in my professional life.


Besides my job I obviously care about the usual suspects. I care about my girlfriend and our kids. I care about music and other forms of entertainment like movies and tv-shows. I like to take a ride on my bike or to go swimming. I love doing a podcast every few weeks with my best friend.

Specialization in jobs

However, let’s focus on my professional life. When I started out the title of my job was webdesigner and what I had to do was pretty clear: design a pretty picture in Photoshop and then convert it to HTML and CSS. Maybe sprinkle some MooTools on top of it.

Nowadays there’s no such thing as a webdesigner anymore, that job has been divided in separate jobs. Unless you’re doing relatively small projects it’s become hard to do everything by yourself. Most teams will have a front-end developer, a UX Designer, a UI Designer, maybe a copywriter etc. The list goes on and on.

I’m sure that 10 years from now those jobs will have become even more specialized: there are not many people who can build an app in React, but can also create beautiful 3D-animations in CSS and make them accessible as well.

Recently I’ve been thinking about what I really care about, trying to pick my battles. Below you’ll find a list of subjects that I care about. That does not necessarily mean that I am an expert in them, just that I deeply care about, and enjoy working on them.

Disclaimer: I’m sorry if this comes across as some kind of list of buzzwords.

The battles I picked

Scalability

Smart reuse of CSS, HTML and JavaScript makes websites fast, consistent and responsive. I was quite an early adopter of BEM and am very interested in topics like OOCSS, ITCSS and similar methodologies to create scalable and maintainable CSS.

Performance

Time is money and faster is better. Users love websites or apps that are fast, responsive and snappy. Conditionally loading assets and behaviour (ConditionerJS), responsive images, optimizing the rendering of websites - this stuff fascinates me. It’s a shame that I don’t have enough time to bring everything I read and learn about into practice though. As I said before, sometimes you have to pick your battles.

Consistency

Styleguides, grids and vertical rhythm are just some of the tools that can be used to build consistent UIs. I think a major part of a front-end developers job is making sure there is consistency in a website. When talking about consistency I’m not only talking about using the same button style everywhere, but also about topics like:

  • Vertical rhythm
  • Consistent paddings and margins
  • Typographical scale

Consistency is important for everyone, from the client, to the developers and of course the end-user. A UI should do what the user expects it to do on every single page. If a UI-component behaves and looks differently between pages, you’re doing something wrong.

Accessibility

I try to make sure that whatever I build is accessible for everyone. People using the keyboard should still be able to tab through a carousel, people using a screenreader should still be able to make sense of a page and the contrast on a page should be sufficient so that people with poor eyesight or colorblindness will still be able to use it. Techniques like ARIA can help with making complex interfaces or components accessible.

Content

Good content is still king. The use of semantic HTML and micro-data makes sure that your content can be correctly identified and used, both by humans and machines. I think it’s very important to think about content (and thus HTML!) structures as early as possible in a project.

This way you can make sure that everyone has a clear view of what content will be expected so you won’t have to deal with ‘lorem ipsum’ dummy data. Please note that I’m talking about content structures, not the actual content.

Another advantage of thinking about structures early on is the ability to use structured data techniques like microdata or RDFa from the start of your project instead of trying to add it later on.

Simplicity

Simple is good. UI should not be complex and should behave as expected. The less code needed, the better. Every time someone designs a custom select-box, reinvents inputs a puppy dies or tries to add something which hacks the scroll a puppy dies.

It’s our job as front-end developers to make sure we keep things as simple as possible. A user not being able to use your website because the “Add to cart”-button is not really a button but a span will cost you money. No-one has ever purchased something because the website had such fancy animations when scrolling down. Again - pick your battles!

Final thoughts

Obviously this is just the top of the iceberg. There’s tons of other stuff that I care about as well, like coding conventions, automation, testing etc. There’s also a lot of stuff I don’t care about. That’s something I’ll write about in a post next month. Let me know what you think about the battles I chose to fight!



© 2016 Pim Derks. All rights reserved. This website is build on Jekyll. If you have any questions or comments, please feel free to drop me a line.