Code Review : What’s Changed Lately?
About once or twice a year, I like to check in with myself about how things have changed in my coding habits and practices. It’s interesting how quickly things change – I feel like every website I do is a slight improvement on the previous one. Checking in allows me to analyze what’s going on – am I using new features and rules? Am I slacking off on accessibility? Has my HTML improved in terms of readability and semantics?
It also helps me to plan for the future. What browsers do I plan to support through the rest of the year? What do I plan to learn in the next six months? What should I improve in my current coding practices?
Let’s take a look at some of the new rules and features I’ve added to my standard toolset:
New Rules I’m Coding With
While Calc isn’t “new new” it’s something I never really looked at or cared about until recently. I just never understood or saw a need for it in my personal coding style. However, I’ve recently been using calc quite a bit in the past few websites, and I think it now has a permanent place in my toolbox.
Learning calc is thanks to my client-buddy, Tamara from Studio Simpatico, who helped with some tricky outside-of-parent positioning while using calc. I now use it mainly with absolute positioning, especially when doing layered items with z-index that are larger than 100% of the parent.
While I’ve been wary of using CSS Grid because I’m still supporting IE11, I decided to go ahead and jump in this past month. I’m still mostly using Flexbox, but slowly incorporating Grid into the more advanced layouts I’ve been coding. I still “support” IE11, but since it has such low usage, I just let Grid items automatically fall back to block level, similar to what it would end up looking like on mobile. I’m still not a fan of fallbacks, shims, or double coding an element, so this is a good compromise for me.
I definitely plan to start learning more advanced Grid layout techniques – this feature isn’t going to be “mastered” any time soon.
Old Rules, New Approaches
In addition to adding new features and CSS rules to my code, I also like to continuing improve the old ones.
I’ve been slowly switching over to using buttons instead of the <a> link element for anything that doesn’t take you to a new URL. That means most things that trigger some kind of JS – like tab links and menus. Or anything that requires a hashtag (#) as the URL. I feel like this is both better semantically and for accessibility, and helps to stop empty link elements.
I’ve taken a much greater interest in accessibility – especially after having to code a few sites specifically directed at disabled users and following AA compliance. I’ve always been pretty good about basic accessibility – but have been trying to get as close to compliance as possible in my normal every day coding practice – since accessibility should never be an “add-on” or “extra” feature.
Most of my emphasis in this category is ensuring fields always have labels and :focus states. All content is readable by voice devices and tab-able by keyboards. I also plan to start automatically adding jump to content links in every site soon.
I don’t follow any current naming conventions – I’m not a fan of BEM because of it’s verboseness. But I’ve been thinking more modular with my HTML. I try to give “blocks” more generic names. For example, instead of .blog-posts, I’ll use .image-grid. Or instead of .features-columns, I’ll use .image-columns or .callout-columns. My goal is to name it something that can be used somewhere else with other content, but that still gives me an idea of what it is.
Other 2018 Goals
So what do I plan to learn for the rest of the year? A lot! Front-End development changes so quickly, it’s almost impossible to not learn anything new, and 2018 is no exception.
CSS Variables have pretty good support now, so I plan to start using it on the next new project I start. Especially since I’m dropping IE11 soon (see below), I’m looking forward to only having to declare a website’s colors once. Besides font names and colors though, I’m not sure just yet what else I’ll use variables for.
I plan to finally drop support for IE11 sometime this year – it seems like usage rates are so low now, and Edge updates automatically like Chrome and Firefox now – it may finally be the end of having to support years old IE versions! (yay!)
WordPress Gutenberg vs Advanced Custom Fields
I’m *not* looking forward to the major Gutenberg release of WordPress. Partly because it requires React knowledge to use (and I don’t want to learn or use React). But mostly because it may break every previous site I’ve coded, which isn’t good for either my clients or my sanity.
I’m not sure where I’ll start with Gutenberg. If I’ll leave it off and continue using ACF for awhile until I see what it does with the rest of the web, or if I’ll dump ACF for Gutenberg, or even if I’ll use some kind of hybrid form of both.
We’ve only just about finished the second month of the year, but things are already looking interesting. While I already use clip-paths and advanced CSS animations, I’m planning to start doing some more advanced techniques with them. CSS Grid is going to probably take most of the year before I feel I’ve mastered it as much as I have Flexbox – both due to the completely different way of thinking about layout and the sheer amount of functionality with it.
Let’s go 2018!