ZeroToHero – A Vue.js Powered Web App
May 2020 - June 2020
Goals
- Work with an open-source project workflow
- Integrate with an existing codebase
- Design new components to match the current app
Project Overview
For this open-source project, I took the existing Vue site and added new components, as well as updating existing ones. The client had an older existing WordPress site with similar content, but moved to a web app based solution. My job was to complete the process of migrating some old designs over to the new components.
The Revamped Sections
The project involved taking sections of the old WordPress site and updating them to be new Vue components. Here are some of the more significant changes.
Add a new testimonials section to the home page. The testimonials existed on the site elsewhere, but needed to be reshaped to allow specific testimonials to be displayed. I made this logic its own reusable component.
Reshape the current textbook section to reflect a new design. The main additions were the two column section, and the large orange buttons.
Process
The process was fairly straightforward since setting up Vue web apps is fairly easy. After setting up, it was all about getting familiar with the current codebase. Once I do that, it’s important that I reuse existing components and logic to adhere to the DRY principal. From there, it’s about adding custom logic on top of their existing components. The project went fairly quickly and the changes were all completed on time.
Technologies Used
The site used a Vue.js web app build, which includes Vue router and webpack support. Webpack provides many goodies such as JavaScript linting, hot reloading, and asset compilation.
Want to check out some code demos?
Check out code samples written in JavaScript, React, Node, and more
Demo 1
Converting jQuery Blog Post Component To Vanilla JS
I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]
Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript
I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]
Demo 3
Defining Reusable Column Extends with SCSS
Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]