Summary
- After being laid off in 2023, I taught myself Vue.js, a JavaScript framework for building user interfaces for the web.
- For my first Vue project, I built an updated version of the website for Crossroads Ranch and Daycare, a daycare and summer camp operating in Penngrove, CA.
- The site is built with Vue, the Vuetify component library, and hosted on Google Firebase.
Background
Software development in contrast with physical product development, moves quickly. Prototypes can be assembled in days or weeks and radical changes, instead of breaking the fit of every component in an assembly, can often be implemented directly or with minimal changes. All this is to say that the software world offers an alluring playground for someone who enjoys exploring with technology and solving problems.
Learning Vue
Up to this point, my experience writing code has been in Python. You can check out this project as an example of how I've used Python to automate repetitive data manipulation and reporting tasks.
In the weeks after being laid off in 2023 I had the spacetime to sate my curiosity and I set about learning the fundamentals of Vue.js. I can recommend this course by Maximilian Schwarzmüller for anyone also interested in Vue. While there were plenty of alternatives to Vue.js at the time of this writing but I picked Vue.js over Angular, React, Svelte, etc. because the syntax felt intuitive to me. I suspect (and have read as much) that knowledge of any JavaScript framework will help in learning another so I didn't see reason to worry about which one I started with.
After completing the course, I felt that I should try to build a project on my own using what I'd learned. My mother is good friends with the owner and operator, Kristine Sheets, of Crossroads Ranch and Daycare, located in Penngrove, CA. I had previously put together a small static website for her to help share information about her services so I was familiar with the content and decided to use Vue.js to make a second version of the site.
Crossroads Ranch
Crossroads Ranch operates as an after-school daycare in addition to offering week-long summer camp sessions focused on horsemanship and enjoying the outdoors.
The initial aim for the site was to provide a presentation of services, schedules, and prices. In addition, Kristine wanted to feature a selection of the horses, farm animals, and activities on offer.
Phase 1 - Pure HTML
The original website was muddled together using pure HTML and CSS. Much of the content of the site was presented in the form of images taken directly from Kristine's promotional flyers.
The original site
Image-based content like this cannot be indexed by search-engines nor copy-and-pasted by users. An obvious first improvement for a second version would be to adjust the content presentation and move the important information into the body of the site and out of the static images.
My mother, incidentally designed and created the content for this site which made it easy to jump into developing. Content creation offers a different set of challenges so I was grateful to have the set of assets ready for assembly into this new project.
You can check out my mothers' art and design work on her website: marfineart.com
Phase 2 - Adding Vue.js
Truthfully there is no reason this site couldn't have remained pure static HTML but the goal after all, was to apply my Vue.js learnings. While arguably overpowered for this application, Vue does offer many features that make developing a site like this easier and more fun.
For one, the ability to abstract repeated content into reusable components down on copy and paste errors and reduces code. In addition, frameworks like Vue, offer features like conditional rendering, that is, applying logic to determine what is shown on the screen and when. For example, certain elements can be shown and hidden when a button is clicked or when a form is filled. This logic can be implemented in JavaScript without a framework but as Mark Zuckerberg used to say, "move fast and break stuff." So if by using a framework, a layperson like me can reach a 'finished' product then likely the tradeoffs are worthwhile (especially since I haven't learned what all the tradeoffs are yet, ha!).
To Component Library or Not
One of the many challenges I've found, working as a solo developer, is that there is substantial overhead in developing a set of styles and utility classes that both look good (I'm not a designer. See the screenshots for proof.) but also remain cohesive. I've tried on several occasions to style an entire project by myself and I've never been happy with the results. Therefore, for this project I tried for the first time, a component library, specifically Vuetify.
Vuetify provides ready-made user interface components to speed up the development process. Technically the library components styles can be customized by developing and applying custom themes but at the risk of subjecting myself to the previously-mentioned lack of design skill, I opted to use the built-in colors and styles.
(Re)Building the Site
As a first-time user of both Vue and Vuetify, I can say that overall the process went smoothly. I was able to improve upon the original functionality, and by breaking the original presentation into individual pages and, using Vuetify, actually improve the look and feel of the site. Several times I caught myself fighting the Vuetify component library which, I realize, is one of the tradeoffs of using a third-party library. I'm sure with additional practice I'll learn the 'right-way' to implement the prebuilt components as well as customize the appearance without so much friction.
The landing page of version two
The end result is a site that, in my opinion, conveys the information in a much more accessible way and actually looks better too! You can check out the finished project here at crossroadsranchanddaycare.com where I'm continuing to make tweaks and updates as I notice mistakes or as Kristine requests updates to content.
Phase 3...
I already have several ideas that would take this site to the next level in addition to leveraging more of what Vue is truly capable of. For example, I can imagine adding a users area where clients can sign-in and manage their sign-ups to both daycare and summer camp sessions. I imagine being able to take payments using a payment service like Stripe and being able to track sign-ups and attendees for Kristine to have a better understanding of her business.
These features would push the site into the realm of being a 'web app' and would require the addition of server-side functionality. I have some familiarity with the offerings of Google Cloud Firebase and will probably attempt to integrate cloud services to extend the site in the future. I've also been taking a look at Nuxt which extends Vue.js with server side functionality and quality of life improvements and would love to give it a try on a coming project.
Thanks for reading!
Lessons Learned
Component library all the way!
Using a prebuilt component library allows a single developer to move very fast and reach a minimum viable product much sooner than they would if approaching each piece of the user interface from the ground up. Furthermore, component libraries are often developed and maintained by hundreds of experienced developers son using their components means building a site with up-to-date accessibility features built-in.
Design is hard
Even though I can usually tell when something looks bad, that doesn't mean I know how to fix it. I can say that one of the best ways to appreciate good design is by trying (and failing) to design something good oneself.
Perfect isn't real
Reality is constrained and perfection only exists in our imagination. While it can be frustrating to leave a project imperfect or, unfinished when you imagine what it could be, there is great satisfaction in reaching a state of 'done' and time has a way of hiding those hints of imperfection that originally appeared glaring.
Changing the way you think makes you better at thinking
Particularly as someone from outside the field computer science, learning to solve a problem by writing your own software requires you to think in new and interesting ways. Not only for the syntax and control flow of code execution but also for mental-modeling how objects and data are represented in bits and bytes. This forced shift in thinking can be helpful when approaching problems in the physical world. I'd encourage anyone who is passionate about engineering and design to seek out and learn a tool or technology that would be considered 'outside your field.' You may be surprised to find, not only that the mental models you develop and alternate perspectives you gain will make you more effective in your field.