All solutions

Decided to just put my own content on this one, rather than just recreate the project "as is." I setup a basic CRUD in Rails, and got the form working with Mailgun and Action Mailer. The project is sitting on a free Heroku dyno, and therefor may be slow to load. Since it's not really being used as a production app, I'm ok with the slow loading free hosting from Heroku. :-)

Absolutely did not need to use Ruby on Rails for this single pager, but I wanted a chance to see how easy it was to use Tailwind with the 7.0 release. OMG, getting Tailwind working was effortless compared to older versions of Rails. Also wanted an opportunity to tinker with Alpine. Again, I didn't need the library, and wouldn't have used it on a production site. But, the beauty of these FEM projects is that I get to tinker with whatever tools I want. :-)

I am continuing to use these projects to get more reps in with NuxtJS. We are using this framework at work, and it is helpful to work through these projects to get more experience with Nuxt.

Admittedly, Nuxt.js or anything beyond a single HTML file, CSS file, and Javascript file is a bit overkill for this project. But, Nuxt makes dealing with templating and iterating over data so easy. Also, not having to deal with Webpack or Gulp for processing is quite nice.

Looking forward to the next JAM stack challenge.

I am continuing to use these projects to get more reps in with NuxtJS. We are using this framework at work, and it is helpful to work through these projects to get more experience with Nuxt.

Those big purple blobs behind the hero and featured section images were an interesting challenge. I tried several approaches using ::before and ::after pseudo attribute selectors, but decided to use an empty div using aria-hidden="true".

This ended up being a much larger project than I originally anticipated, but it introduced me to some new ideas, so it was definitely worth it. One thing I learned is the Vue.js <component is="h2">/<component is="h3">. The thing I like about this is that it allows me to create a reusable component while ensuring proper semantics within the document flow. No more worrying about using an h2 element inside a component that should really contain an h3.

The more of these I do, the more I find opportunities to improve my component development. I assert that these submissions are not perfect, but give me an opportunity to reflect on my progress as I continue to learn.

As I've mentioned in other challenges, I am continuing to use these projects to get more reps in with NuxtJS. Each new project exposes me to a new way to approach something in VueJS and/or Nuxt, giving me an opportunity to dig in to the documentation and learn a new or better way to do something in this environment.

The layout for this project seemed pretty simple when I first looked at it. Interestingly, the layout was more difficult for me than the game logic. Yes, my eyes deceived me. :-) I haven't used CSS grid very much, and this project gave me an opportunity to do that. I’d like to rework this at some point to scale better.

Regarding the buttons:

I took advantage of multiple box shadows to achieve the interesting borders around the rock, paper, and scissor buttons.

A possible refactor?

I let my wife and daughter play this. They enjoyed it. They were wondering what they needed to do to “win.” It may be fun to refactor this game to have a winning score, and an associated view for winning. Perhaps, keeping track of the “house” score would be cool, too. If I do that, I’ll be sure to post the link in the comments.

As always, I welcome any constructive feedback.

I am continuing to use these projects to get more reps in with NuxtJS. We are using this framework at work, and it is helpful to work through these projects to get more experience with Nuxt.

My biggest challenge on this project was applying meaningful "loading state animations" of the dynamically generated content. I'm not finding much information in the Nuxt community regarding the transition element that is available in regular Vue apps. It doesn't appear to be working in Nuxt. I've accounted for this in a non-visual way by applying the aria-live="polite" attribute to the container that is created after the short url is requested.

Since animation isn't a requirement for this project, I am ok submitting it. But, I feel a a less jarring introduction of components would be a win for UX.

Regarding validation errors: There is no src attribute on the image icons in the dark blue circles because they are being lazy loaded.

Using CSS Grid, CSS Custom Properties, NuxtJS, Axios, and the Vuetensils library. My main goal is to use these frontendmentor.io projects to get some reps in with Nuxt.js. We have adopted it at work, and the more opportunities I have to build things, the better.

I am aware that Nuxt is triggering some HTML validation errors. Since they are non-breaking issues, I'm ok with them. I am happy to receive any constructive feedback regarding performance and accessibility. Would love to keep the conversation positive and useful for people who read the comments thread.