Trevan Hetzel

How we build UI components in Rails at Flywheel

Maintaining visual consistency in a large web application is a shared problem throughout many organizations. At Flywheel, we’re no different. Our main web application is built with Ruby on Rails and we have about 15 Rails developers and three front-end developers committing code to it on any given day. We’re big on design, too (it’s one of our core values as a company), and have three designers who work very closely with developers on our...

Continue Reading

Prevent loading of unnecessary JavaScript and CSS from The Events Calendar WordPress plugin

One of my biggest pet peeves with WordPress plugins is when authors enqueue scripts and styles on pages other than what they are needed on. For example, I’m using The Events Calendar (which seems to be a great plugin – perfect for my client’s use case) and I am only using it on two pages – the main events page and single event pages. But no matter what page I’m on, the plugin loads 4...

Continue Reading

Prevent widows in WordPress custom fields

I use Advanced Custom Fields on nearly every client site I develop. One thing that’s kind of not cool about user generated content is the lack of control over non-breaking spaces between the last two words to prevent widows. But fear not! With this regex snippet from David Walsh, you can create a helper function in your custom theme and wrap all your ACF output (or just static text) in the helper that will insert...

Continue Reading

An introduction to Stimulus

Stimulus was released in 2018 by the Basecamp team. Its motto is “A modest JavaScript framework for the HTML you already have.”. It sounded catchy (and lead by DHH) so I wanted to play around with it and see what it was all about and how it stacks up to more modern reactive frameworks like Vue and React (spoiler alert: it is not at all similar to Vue or React). After playing around with it,...

Continue Reading

Simple animated sticky header with plain JavaScript and CSS

Sticky headers are a very common pattern found on a lot of websites. You see lots of site headers that stick to the top of the page once the user scrolls down to a certain point (usually the height of the header). Since it’s such a common UX pattern, there are lots of libraries, plugins and different ways to build them. But I hate adding libraries to my codebases when just a few lines of...

Continue Reading