Matthew Lang

It’s been a while since I dabbled in a bit of JavaScript. It’s not that I don’t like programming in JavaScript, it is growing on me, it’s just I’ve never found a real use case for it in a web application. The thing about JavaScript though is that there are so many great frameworks available that mean you often don’t have to write any of the curly bracket stuff.

Vue.js has been on my radar for a while but what has really grabbed my interest has been the release of Stimulus.

For a lot of web applications I work on, I don’t want to re-write a whole view for a particular framework, I just want to enhance a part of that view. Both the above mentioned frameworks do this, but I decided to try and use Stimulus with a web application of my own just for fun.

The copy to clipboard is a nice example to start from in the Stimulus handbook and so I started with this basic example by adding a copy to clipboard button when displaying a writing prompt in PenMuse. Not only was it good to broaden my reach beyond the Rails code that I am used to writing, I also got to experiment with WebPacker as well.

The final results are good and there was a few hiccups along the way in trying to copy the prompt from an input element that didn’t interfere with the user interface.

I did at one point create an input elemement on the fly to copy the prompt from when the button was pressed, but it jerked the screen up and down on tablet devices as it was copying the prompt. Horrible.

I decided to settle on using an input group so that you can partially see the prompt being copied. It’s not ideal, but it’s working and it doesn’t mess with the screen in anyway on different devices.

I’ve still got some adjustments to make for smaller devices like stacking the buttons on the home page so that they appear as a column but that will come later in the week.