I have been a member of VirtualCoffee.io for most of 2021. It is a wonderfully supportive community and to say that it has changed my life for the better is an understatement. I have learned so much from chatting and pair coding with fellow members, hanging out on the weekly coffee chats, listening to the VC podcast, and watching the awesome lightning talks and brown bag presentations ... AND I have made new friends along the way. Wins all around.
Virtual Coffee also offers a monthly challenge. May's challenge was about giving meaningful and empathetic feedback. June's challenge is to build in public and the community has come together for daily stand-ups and encouragement. I was excited about this challenge and took the opportunity to build a fun project with a new stack, shared through this blog post, live stream, and Twitter thread.
The Build
My criteria were to build something light and fun that could be completed within a week, to build something with a new stack, and of course to share my experience along the way. So, in celebration of Father's Day and all the hard joking dads out there, I decided to build an app with the icanhazdadjoke API. The app is small, consisting of a few API calls, a handful of unit tests, a bit of CSS, and a few easter eggs 👀, but this allowed me to focus on the new stack and building in public ... plus more dad jokes.
The Stack
I have been working in React since 2019 but Vue.js has been on my radar, so I took this opportunity to spin up a stack with the following:
- Vue - Javascript framework
- Vite - next generation frontend tooling
- TailwindCSS - utility first CSS framework
- Jest / Vue Test Utils - unit testing
- SplitBee - analytics platform
- ESLint / Prettier - code linting and formatting
- Axios - promise-based HTTP client for node.js and the browser
- icanhazdadjoke API - the internets largest database of Dad Jokes
Vue
Coming from React, I was able to feel comfortable with the basics of Vue fairly quickly. I attribute this to a combination of my past work in React and the Vue framework itself. Vue feels very intuitive to me and was a joy to work with. I love the single file component syntax and separation through the <script>, <template> and <style> tags. This app is comparatively simple so I can't comment on what Vue would feel like once I got into a heavier, more complex app, but so far so good.
Vite
Considering I did a basic install with default configs, there is not much to say about Vite at the moment, except that it is fast. I did experience some lag in Hot Module Replacement when editing CSS but I didn't take the time to find out why and I would like to believe it had to do with something on my end.
TailwindCSS
I have been using Tailwind CSS for most of the year now and it is my go-to for most builds, especially a small and quick app such as this. I am drawn to utility classes within the markup, but I also like Tailwind's @apply directive, which I used within the Vue components style tag and the app's global index.css.
Jest & Vue Test Utils
I have been deep diving into unit testing over the past few months and have learned a lot. Jest is my go-to for unit testing and Vue has provided utils that work on top of Jest. This build only required a few tests (see more below) but Jest and Vue Utils made it super easy.
...Rest
ESLint, Prettier, and Axios are great defaults.
The Challenges
The first challenge was overcome once I decided on the build and stack. The biggest challenge with the UI was building the scrolling marquee. It took longer than I expected but I was able to pull it together with the help of the dev community (see resources below). The other big challenge was mocking API calls within my unit tests. I realize testing may not have been necessary with this small build but I took the opportunity to improve my unit testing skills through a few essential tests. Other than a few CSS quirks these were the things that gave me the most trouble. I talked more about these in the live stream.
The Resources
No build is complete without Google, Youtube, online courses and learning from the great dev community.
To kick off my Vue education, I turned to Vue Mastery, where I learned the typical javascript framework basics like attribute binding, conditional rendering, list rendering, event handling, class and style binding, components, props, etc... These videos are great and have an easy-to-understand teaching style and presentation. I found myself moving beyond the intro and into real-world concepts and unit testing fairly quickly. And there are more intermediate and advanced courses to digest and videos are added weekly. Vue Mastery is a great resource to learn and master Vue.
Since this app is emoji heavy I had the idea to implement an emoji favicon. I got my inspiration and the approach from this CSS Tricks post
It could be argued that a scrolling text marquee is bad UX and I don't disagree, but I decided that it was perfectly fine for this light and fun build. So, with a little bit of research, I took inspiration from this codepen and this codrop. I did turn this feature off by default, giving the user control, so that is a UX win right?
Conclusion
VirtualCoffee.io is a great community that supports, inspires, and challenges devs at all levels. I am happy to be a part of it and happy to have taken on this build in public challenge. The process of generating an idea and building that idea while learning a new stack is quite enjoyable, plus the world needs more dad jokes so I consider this build a win for society. But with any build, no matter how simple, comes challenges. The particular UI and testing challenges presented here were tough enough to push me but not too tough to discourage me, and with help from the dev community, I was happy to resolve them. I will continue my learning through Vue Mastery and I look forward to the next build. Thank you for reading and to all the hard joking dads out there, Happy Father's Day!!
Top comments (0)