Make your first contribution with Copilot

By Mariah Morales

Roadmap | Contribute to the project here

• Copilot is the pair programmer you want to learn from
• Use case: enabling new feature with Google Civic API
• Navigating vue component structure
• Implementing with v-card and v-avatar

New language, no problem? How Copilot works:

🧠When was the last time you had to learn a new language? For those of us who are beginning our journeys - filling out our portfolio can be daunting. After all, how many Udemy courses can we take to understand the complexities of languages outside of hello world?

Copilot was encouraged in this open project -  trained on billions of lines of code, GitHub Copilot turns natural language prompts into coding suggestions across dozens of languages.

How do you use it? Write a comment describing the logic you want and GitHub Copilot will immediately suggest code to implement the solution.

And just like that, I opened a PR in less than 2 weeks of being introduced to a completely new framework. 🤯

Problem at hand: Enabling a new feature with Google Civic API

Project Amplify defaults to organizers’ experiences to deliver features that are more accessible. One of the stories that inspires this use case came from volunteer coordinator Michi Lew at Asian Americans Advancing Justice (empowering Native PI and Hawaiian communities) who highlights the importance of a mobile first design that accommodates logistics at events and makes it more accessible for elders too - pictures offer facial recognition that names alone do not.

This required working with and understanding the Cicero civic api and corresponding front end components. While we’ll dive into the uniqueness of vue component structure and Why can be helpful for open source projects here we consider how API documentation is an open-source effort itself and how reading can be navigated.

Vue component structure

How many maintainers does it take to have up to date documentation? I don’t know the answer to that but the component structure of Vuetify allows for easy contribution to frontend that's both integrated and siloed from creating accidental disruptions.

Vue has had exponential growth as a framework and my own experience summarized a few ways that it enhanced modularization - making my onboarding easier.

• Collaboration: It makes it easier for multiple people to allocate work without rewriting things
• Stack Coordination: Easier to abstract backend functions while the abstractions adds another layer of security
• Reusability in code: integration of HTML, CSS, and Javascript

In our case, the change I had to make was contained in one file: searchreps.vue where I was adding to an existing v-card in a way that could be resizeable as the app expands from desktop to mobile.

Using v-card and v-avatar

What is v-card and v-avatar?
V-card is a card component that is used in Vue that can create styles of cards from panels, information cards, weather cards, you pretty much name it! Similarly to React, Vue provides ways in which designing is made easy through the use of different kinds of components. The use of these components allows splitting the UI into independent and reusable pieces.

V-card, specifically, is a card that incorporates v-basic components. v-card-title, v-card-subtitle, v-card-text and v-card-actions. V-card-actions allow for placing actions like v-btn or v-menu. It also applies special margins to the buttons so that they can line-up properly. v-card-title, v-card-subtitle, and v-card-text quite literally speak for themselves and feature default font-size and padding.

V-avatar simply is a component used to display circular user profile pictures. This component will allow you to dynamically size and add a border radius of responsive images, icons, and text. You can play with the size prop to find a height and width that satisfies you. You can also use the tile proper to remove the border radius to leave you with a square avatar.

What vue does well

With my experience with vue, I have seen that it has many benefits. There is obviously component reusability. As said earlier on, components provide independent and reusable templates. With these single-file components, this also allowed for better code reusability. Each component can be seen as their separation of concern so to speak which makes the code not only easier to read and understand but easier to fix and bug out.

What vue doesn’t
I have quite a few dislikes with vue. For example, our V-card campaigns title were facing some awkward word wrapping. Turns out the v-card-title had a default styling for that would break the word.

I also faced additional problems with the built in padding and margins of the V-card components. Because of the default padding, there were many awkward spaces our list of representatives

What did integration look like
For our representatives lists, I added additional inline styling to get rid of the awkward padding. As for our campaign titles, I used one of vuetify's built-in header classes to get rid of the awkward word wrapping.

There’s nothing quite like when you make an open source contribution..well this badge helps when you do for the first time.