I’m famous!

Well, maybe that’s a stretch, but I was listed as one of the contributors to WordPress 5.0 in the official release post. It has been really fun to be able to contribute to Gutenberg lately. Even though I only made one or two small contributions, it’s exciting thinking about the sheer number of people who will be using the code I wrote. It’s also fun to think about the fact that 450+ other people worked together to make it happen. Most of them probably just like me, contributing purely because they are able to.

Hopefully, I can keep setting aside some time to work on it. Both because it’s fun and because it’s really helped me learn a lot. I think one thing that people don’t talk about enough when discussing open source is how much it helps you grow as a developer. I’ve learned a lot of things I wouldn’t have in my normal day-to-day work, most of which has helped me get better at my real job.

Gray Harmonizer

https://brentswisher.github.io/gray-harmonizer/

I just finished up creating a little tool to help with a design task I find tedious. Being more of a developer than a designer, choosing color schemes can be a little challenging sometimes. One technique I’ve found really helpful is “harmonizing the grays”. Basically, once you have your colors, you filter the gray values with your primary or secondary color so they are “tinted” slightly. I’m not sure if she created it, but I first heard about it from Erica Schoonmaker.

What’s not great, is having to use Photoshop or some other design software to do it. So I made it a website! It was a perfect use case for React, and the test suite in create-react-app made it easy to make sure my color conversions were correct.

teageek.blog

I have been blogging about tea at teageek.org for several years. I guess more accurately, I blogged about tea for several years there several years ago. I’ve been wanting to bring it back and decided to use it as a test case for creating a new WordPress theme from scratch, which I haven’t done in a while.  I also decided it was time to get with the hip kids and give it a cool new url, so it’s not located at teageek.blog.

I’ll be writing there about tea a couple times a week if you are interested, mostly tea reviews and some things I’ve learned over the years drinking entirely too much tea.

If you are interested in the theme, you can find it here, although fair warning, it’s not quite ready for widescale use.

Grand Valley Magazine

I recently finished up a fun project at work and thought I would share it, you can see it live now at https://www.gvsu.edu/gvmagazine. GVMagazine is the quarterly magazine that gets sent out from the university to keep alumni up to speed on what’s happening around campus,

It was fun for a few reasons: 

Designers are awesome

I was working off of design specifications from some of our very talented graphic designers. Most of my projects tend to lean heavily on the CSS framework we built into our CMS, as opposed to totally custom design. Not that there is anything wrong with that, but it is fun to work with something new that is so well thought out. I used the foundation framework for some of the basics, but most of the design is custom. I am an adequate designer when I need to be, but they are on another level and I think that is shows in the end product. There also is now a really great continuity from the print piece to the online version that wasn’t there before.

React for the win

The public design was fun to implement, but the really fun part of this was creating the custom admin/CMS. I was developing this project solo so I got a little more leeway and decided to use react for the content editor. It was the biggest project I’d used it for so far, so I got to learn a bit and the end result was great. It was a little complicated because the design called for a lot of features in the articles: images, video embeds, pull quotes in multiple styles, and “featurettes” throughout the page. In the end, the users creating content have loved it and it really gave me a lot of flexibility.  I was able to use the same styles for the admin and the public side so that it truly became a WYSIWYG editor, something I have been chasing for a while. It was a little tricky tying into the back-end system that we use, but it ended up not being as I thought it was going to be.

An Accessible Color Scheme for Bootstrap Buttons

A while ago while doing an accessibility review of a site I was working on, I realized that the button styles I was using, which I imported from Bootstrap 3, were failing my accessibility checker. The default colors of the primary, default, and warning buttons all fall short of the 4.5:1 contrast ratio required for WCAG 2.0 specs.

At first, I assumed I just didn’t have the latest version of bootstrap, but after searching around I found a post on bootstrap’s Github page, which essentially said they aren’t interested in changing their design to accommodate at this time. Disheartening to see from a big company/framework, but not to be deterred, I headed over to Google. I assumed I could find some neat little CSS classes someone had created, and continue my day. I found a post from Scott Galloway on Codepen that I thought was perfect, but when I ran it by my coworker for review, he pointed out that if someone was color-blind (as he was), it was really difficult to determine which button was which:

Screenshot showing bootstrap buttons with simulated color-blindness

Out of easier options, I took a shot at it myself. Working with some of my coworkers, I came up with some requirements we had for the buttons:

  1. Pass WCAG 2.0 Guidelines
  2. Work well for common color-blind variants
  3. Maintained the look and feel of the Bootstrap

A common recommendation was making a custom color palette and changing them completely. Our issue with that solution was that the buttons were part of a custom CMS, and if you’ve never worked on a CMS, users tend to get unhappy when you drastically change their designs without warning. Because of this, the last point of maintaining the look and feel was important. In a perfect world, we could change the buttons without anyone noticing.

Here is a demo of what we came up with

(The trick was to invert the hover/active color to have a white background and colored text, otherwise making the info and warning buttons dark enough to pass accessibility made them either hard to differentiate, or just plain ugly.)

It worked! We swapped the styles out in our custom CMS and have never received a complaint from our users about the change, and can feel good that the buttons now pass accessibility. I figured there may be some other developer out there right now looking for the same thing and threw it on Github. Hopefully, it can save someone a little bit of time and make their site more accessible.

(On a side note, yes, my site has some accessibility issues, it’s on the to-do list, my only excuse is I made the theme about 5 years ago, and am just getting back into writing here.)