100 days of frontend code: week 1

I have started another “100 Days of Code” challenge, and am focusing on honing my frontend development skills.

I did not finish my last one in 2020, but am determined to see this one to the end. Feel free to call me out on Twitter if you see me slipping.

I have worked with traditional HTML/CSS/JS, and Vue.js for frontend tech, but little else. My goal is to learn the ins and outs of four different front end frameworks that seem to offer different advantages. I am going to do this by building the same app with each. It is a “todo” application with a focus on a clean interface and useful features. The four frameworks I am planning to use are:

• Vue.js
• Svelte
• SolidJS
• Alpine.js

I felt these frameworks offered some variety and will give me a better toolset on future projects. I am starting with Vue.js since I already have some familiarity with it, making it easier to “ease” myself into this challenge. This will enable me to focus more on the design of the application while learning some of the newer features of Vue 3.

This Week’s Accomplishments

Week one is complete and I was able to get a prototype of the application up in Vue. All core components of the main todo list page are up and running. Most of the application code is “messy” at best, but functional. This is not the final state, but was more of a way for me to get my bearings on how to get things laid out and working in Vue. The application can:

• List and filter todos based on completion state
• Add new todos
• Edit existing todos
• Delete todos
• Display open todos count
• Navigate the various pages (mostly placeholders)

I built the application using Vue’s and TailwindCSS’s installation guides. The app stack consists of Vue.js (and Vue-Router), Vite, Pinia, and TailwindCSS.

What I Learned

I spent most of my time learning about Vue’s Composition API with the setup tag, the Pinia state management module, and a little bit on animations and transitions.

I am finding the Composition API with the setup tag to be very intuitive and appreciate the fact that there is less boilerplate. It has been a process transitioning from the Options API in Vue 2, but the concepts and design patterns are sticking better for me.

The Pinia state management module is a much more intuitive beast than Vuex was for me. I appreciate the removal of “mutations” and focusing on just the state, getters, and actions. It has been a bit easier to work with for me. I also appreciate that Pinia was designed to be modular so you don’t have a monolithic “store” file.

I am still figuring out transitions and animations. I have a couple working in the app, but some I am struggling with. I am focusing on that soon to try and get a solid understanding of how to implement it in Vue. This is mostly dealing with animating width and height changes.

Next Week's Plans

Overall I feel this was a solid start for the first week. I have a mostly functioning “todo” app in Vue with state management. The plan for the upcoming week is going to be focused on:

• transitions/animation,
• getting the app data stored in the browser’s localStorage,
• adding basic auth functionality (stored in localStorage)

This will allow for data entered into the app to still be present after refreshing the browser and give me my mock “backend”. It will also enable “securing” the application and only allowing data for the signed in user to be accessible.

I will also continue to learn best practices with the Composition API and Pinia. I want to have a firm grasp on how to build production ready apps with Vue and learning these foundational pieces of the tech will help me to achieve this. I am planning to work with Vue for another two weeks and then move on to Svelte. We’ll see how that goes though.

For more details check out my repository on Github