Author Archives: Mark Reyes

About Mark Reyes

Web Developer based out of Southern California.

The Loaded Question

Introduction

What’s up everyone and welcome back to AllWebSD. As 2021 unpacks itself the recruiting season is once again in full swing. And as companies unleash their budgets for their next round of hires its a no-brainer that you may get a call. Sometimes its a tech recruiter gauging your interest. But every now and again you might get called because someone marked you as a professional reference.

And that’s what leads me into tonight’s topic.

You see, that very much happened just a few hours ago and one question in particular felt like an awkward one to answer.

The Loaded Question

What are some of his/her weaknesses?

– Hiring Manager

Dear Recruiters

What can I say? Obviously, if someone inks me in as a professional reference, I intend on outlining the brightest attributes about this person. I’m going to deliver, in real-time, a series of bullet points as to why this person is more than qualified for the role on hand. I’m not placed on a short-list to bad mouth my peer. I was called to spotlight what could help you make a more informed decision.

That said, I’m not foolish on the inquiry either. I understand that to even get this far into the conversation, my peer must have done well enough to make it to that next step.

But what gives? I’m hard-pressed to find something sensical with this specific question. What does a question like this serve? Where would you like me to begin? How does my answer play into the company’s philosophy? Better yet, how does my answer play into the Hiring Manager’s psychology?

Dear Listeners

This is definitely food for thought. And I have to throw it out there into the universe and ask…how on Earth do you answer the loaded question? And is honesty an effective solution which can surpass the inherent negative bias?

Think about it and let me know!


Thanks again for listening in. Remember, I’m here to foster innovation through conversation. So if you’d like to continue this discussion or any topics previously discussed, join me at San Diego Tech Hub and go head first into the AllWebSD Group. It’s totally free. Just visit this link or click San Diego Tech Hub on the footer of AllWebSD.com. Thanks and Aloha!

Vue Components in 5 Steps or Less

What’s up everyone and welcome to Season 4, Episode 2. I guess this episode is more of a heads up in that, I’ve been revisiting VueJS. And with version 3 recently released, its’ once again become a premier option in JavaScript frameworks. I’ve noticed more so that Vue and React’s community continue to push each other’s frameworks into the next level, whereas Angular is definitely blazing its own unique path.

That said, I wanted to brush up quickly but I also didn’t want to spend any more money on subscriptions.

Hence, when I stumbled onto Vue School, I was very excited to see that they had an abundance of free courses designed for all levels. I encourage you to check them out at vueschool.io if you have a moment. I do not have an affiliation with them. This is simply a courtesy.

On my behalf I went ahead and did some of their tutorials – all of which were straightforward and under an hour to complete. It was well worth it!

Feel free to check out 2 articles I wrote with source code and demo attached regarding Vue components. The goal here was to get a grasp of reusable components and implement them in 5 steps or less.

Cheers and happy coding!


Thanks again for listening in. Remember, I’m here to foster innovation through conversation. So if you’d like to continue this discussion or any topics previously discussed, join me at San Diego Tech Hub and go head first into the AllWebSD Group. It’s totally free. Just visit this link or click San Diego Tech Hub on the footer of AllWebSD.com. Thanks and Aloha!

Vue Components: Bootstrap Card, Github API

I’m dabbling with Vue version 3. Here’s Part 2 of 2 in generating a reusable component. This time with an API call attached.


Introduction

Let’s build this. A simple Vue app which accesses Github’s REST API and prints a user’s profile into a Bootstrap 4 card interface.

What’s the Goal?

Create a reusable component that displays a person’s Github profile.

What will we need?

  • Stackblitz – to quickly prototype a Vue project and its dependencies.
  • Bootstrap 4 – to grab some ready-made user interfaces (e.g. cards).
  • Axios – the promise based library we’ll use to communicate with Github’s API.
  • Github API – the data source we’ll need to access and display a user’s profile.

Step By Step

Step 1: Create Vue App

Visit Stackblitz.com and click the Vue icon to automatically generate a default HelloWorld project.

Step 2: Install Dependencies

Enter additional dependencies such as axios and bootstrap (jquery and popper is optional but I added it anyway).

Step 3: Add Dependencies to main.js

const { createApp } = require("vue");
import App from "./App.vue";
import "bootstrap"; // Add this import.
import "bootstrap/dist/css/bootstrap.css"; // Add this import.

createApp(App).mount("#app");

Step 4: Create a Service for API Call

Create a new directory called services and add new file GithubAPI.js.

The Service Code

Debrief of the GithubAPI service code:

  • Line 1: Import axios library for promise based HTTP requests.
  • Line 5: Write a function called getGithubProfile() and pass in username as an argument.
  • Line 7: Leverage the get method and concatenate the username variable.
  • Line 9: Return the response object (component will consume this).

Step 5: Modify HelloWorld.vue Component

Out of box, Stackblitz generates a default Vue project paired with a component called HelloWorld.vue. Rename it.

We’ll repurpose most of this by first renaming it to GithubProfile.vue.

The Component Code

Debrief of the GithubProfile component code:

  • Lines 3-16: The Bootstrap card.
  • Line 20: Import the service made from Step 4.
  • Lines 23-28: The prop you’ll pass in (e.g. a profile name).
  • Lines 29-33: Setup Vue’s data object which will populate the card.
  • Lines 34-42: Setup the API call inside of the created lifecycle hook.

Debrief of the App component code:

  • Line 13: the prop passed in as a string (e.g. my profile name).

Key Takeaways

We’ve now created a reusable component which is dynamic enough to apply a Bootstrap card by passing in the Github profile as a prop. This will use Github’s API to make a call on their end which will print the profile data to the card.

Additional Resources