Forem: Leira Sánchez

Pursuing a Software Career via Capital One Developer Academy

Leira Sánchez — Tue, 01 Sep 2020 22:09:02 +0000

This article was originally posted on capitalone.com

Hi, I’m Leira! I’m a software engineer in Capital One’s Technology Development Program. I joined Capital One through CODA - Capital One Developer Academy. While CODA is a six-month software engineering program, this isn't your average bootcamp. CODA associates are full-time Capital One employees that are expected to master full-stack development principles. This program is aimed at ramping up the coding skills of recent STEM grads who have an interest, but not a background, in software engineering. With my mechanical engineering degree and strong interest in coding, I was a perfect match for CODA!

From Automobiles to Software

All I ever wanted to do since I was 13 years old was to become an automotive engineer. In school, I was part of the Solar Car and Baja (an all-terrain vehicle) projects from the Society of Automotive Engineers. I had the opportunity to work at two large automakers where I did engine calibration, body engineering, and research & development. Now, I have a patent-pending for a method of manufacturing thermoplastic filament.

My internship sparked my interest in innovation and led me to join the Human-Centered Design R&D Lab at the University of Puerto Rico at Mayagüez as an undergraduate researcher. My experiments with virtual reality involved coding, which prompted me to pursue an MS in Computer Science. These experiences led me to my dream job offer as an automotive engineer. However, my interest in coding soon outgrew my desire to become an automotive engineer.

While I was thinking over this offer, I received an email from a Capital One recruiter who wanted to interview me for the Capital One Developer Academy (CODA) program. CODA is a fully insourced six-month software engineering bootcamp targeting analytical non-Computer Science majors. Graduates of the program transition to the Technology Development Program (TDP), a two-year rotational program, where associates work in two different roles across our tech LOBs. I didn’t know this kind of program existed, and I couldn’t pass up the opportunity!

Joining Capital One Developer Academy

In February of 2019 I moved to DC to join CODA, which had 30 associates from different backgrounds. Our majors were Mechanical Engineering, Chemical Engineering, Music, Linguistics, Information Systems, Math, Biology, and many others. Most of us spoke multiple languages like Spanish, Korean, Mandarin, Cantonese, Russian, and Arabic. A third of us were women.

My days in the CODA program alternated between instructor-led and individually-paced lessons. Half the afternoons were spent doing hands-on labs that challenged my learning. Fridays were spent on all-day projects covering everything taught that week. Then, at the end of each unit, there was a week-long project.

Unit 1 got us started with front end development with HTML, CSS, JavaScript basics, and some JQuery. For the unit project we built a game that was then showcased to our mentors. Games ranged from text-based to full on Guitar Hero copycats.

Unit 2 covered RESTful APIs with Node.js, Express, PostgreSQL & Sequelize, MongoDB & Mongoose. The unit project had us working in pairs to create a website of our choice that used a database. My partner and I made a tutorial website where users could post tutorials and interact with each other by posting comments.

Unit 3 introduced front end frameworks with React and Redux, as well as an intro to Typescript. This time, we were tasked with forming teams of four or five to create a website that incorporated the framework. My team and I built a website for sharing and liking images, commenting, and communicating in real-time through direct messages.

Unit 4 involved picking a technology we wanted to learn. In my case, I chose iOS development, but others studied topics such as GraphQL, Angular, Docker, Java, etc. We were also introduced to AWS and Jenkins. In this solo project, I created a War card game for iPhones.

After completing our technical curriculum we had the opportunity to work with stakeholders to build products tackling business problems across the enterprise. During the five week mini-internship, referred to as “Dojo,” we applied the knowledge we gained throughout the program while learning the process of building products at Capital One in an Agile environment.

One team built a mobile app to help Capital One associates migrate collaboration and productivity tools, another built a web scraper with machine learning, and my team built a full-stack website to house coding challenges for our Software Engineering Summit.

My Career After CODA

Graduation came faster than any of us expected; it was hard to believe that just six months earlier all I knew about web development was some basic styling I learned during the MySpace era. Now I can build dynamic applications, APIs, and collaborate within teams using the Agile methodology.

As a full stack web developer in the TDP, I now have firsthand experience writing code that thousands of people at Capital One use in their day to day. My primary work supports an enterprise communications platform that was developed by my team and is widely used by associates.

Although I still feel passionate about mechanical engineering and the idea of working in the automotive industry continues to appeal to me, I have discovered a new passion of which I still have a lot to learn. I am thankful to Capital One, not only for the bootcamp, but for promoting a culture of self-development which gives me the space to continue growing as a software engineer.

How do you deal with your teammate's founder syndrome?

Leira Sánchez — Wed, 12 Aug 2020 17:24:05 +0000

If you join a project and you have to work closely with its founder how do you deal with his founder syndrome?

This article describes founder syndrome pretty well.

From the article:

Often fail to share information about the inner details of their projects.
A founder intent on keeping total control of decision making.

What are some good questions to ask when you're inheriting a codebase?

Leira Sánchez — Wed, 25 Mar 2020 13:38:42 +0000

When you are getting a project assigned that has a considerable codebase already, what are some good questions to ask to help you hit the ground running?

CSS: Overlay Text Over Image

Leira Sánchez — Thu, 12 Mar 2020 20:46:40 +0000

This example is from the mobile version of a personal website I'm building with HTML/CSS and vanilla JavaScript.

To overlay an element over another, we first need to understand z-index.

Z-Index

z-index is a CSS property that sets the order of elements in a stack.

Only works on elements with positions other than static (the default position). They could be absolute, relative, fixed, or sticky.

Let's say your computer's screen is the back, the real world is the front, and every element on your app without a specified z-index is the default layer. If you want to throw something to the back, the z-index will be smaller than 0. The element with the smallest number will go furthest back. If you want to put an element over the default layer, then you use positive numbers. The bigger the number, the closer to the front it will be.

Elements are overlayed in ascending order.
The default layer is equal to z-index: 0.
Negative values of z-index throw elements behind the default layer.
The element with the smallest z-index value will be all the way to the back.
Positive values throw elements on top of the default layer.
The element with the biggest number will be all the way to the front.

Example

Here, I sent the image to the back by setting the z-index to -1. I didn't have to specify a z-index value to my text because it is by default on layer 0, which is above layer -1.

See it on codepen! Disclaimer: I did not make this codepen responsive so it only looks good on desktop.

Playground

Here's a playground on codepen or repl.it for you to experiment with.

Like `console.log` But Better

Leira Sánchez — Wed, 26 Feb 2020 22:47:07 +0000

Who hasn't peppered their code with console.logs in an attempt to find that pesky bug? The logs can get daunting and confusing. These will help you enhance your debugging experience with the console.

Did you know the console has more properties than log? Try it yourself! Write this into your console and be amazed.

console.log(console);

I will go through the ones I find the most useful.

console.table();

This method displays your arrays and objects in a neat table. It takes in two parameters, the data, and the names (in an array) of the columns you wish to display (optional). Every element, or property, will correspond to a row in the table.

Example:

const array = [1, 2, 3, 4, 5];
const object = {
  name: "Leira",
  lastName: "Sánchez",
  twitter: "MechEngSanchez",
};

console.log('array: ', array); 
// array:  [ 1, 2, 3, 4, 5 ]

console.log('object: ', object); 
// object:  { name: 'Leira', lastName: 'Sánchez', twitter: 'MechEngSanchez' }

What is displayed when using table, is much more organized and easy to understand.

console.table(array);

console.table(object);

console.count()

This method keeps a count of how many times it has been called. I mostly use it to check that my functions are being called when I expect them to. You can provide it with a string as a parameter. It will serve as the label. If left blank, the default label is "default".

let dev = '';
const followMe = (dev) => {
    console.count('followers');
    return `${dev} is following you`;
}

followMe('John'); // followers: 1
followMe('Karen'); // followers: 2
followMe('Camila'); // followers: 3

console.assert()

This method only writes to the console if the assertion is false. You will not see it if it's true. The first parameter is what it will make the check on. The second one is the error message you wish to display.

const sum = (n1, n2) => {
    console.assert(n1 + n2 === 10, 'Not 10');
};

sum(3,2); // Assertion failed: Not 10
sum(5,5); //
sum(10,0); //

Style the `console.log`

Labels

A quick, easy way to organize and keep track of your console.logs is to add labels. Simply, add a string as the first parameter and whatever you want to log as the second. I also like to add a colon and a space for readability.

const firstName = 'Leira';
console.log('First Name: ', firstName); // First Name: Leira

You can add a string as every other parameter to add multiple labels to multiple values but I find that can get messy fast.

const lastName = 'Sánchez';

console.log('First Name: ', firstName, 'Last Name: ', lastName);
// First Name: Leira Last Name: Sánchez

Messy, right?

Add Flair with CSS!

Make your logs colorful and pretty. Just add '%c' to the front of a string as the first parameter. The second parameter will be the CSS styles as a string.

console.log("%cCLICKED!", "font-family:arial;color:green;font-weight:bold;font-size:3rem");

Let me know in the comments how else you use these or what other methods you find useful!

Useful Tools for Web Devs

Leira Sánchez — Tue, 11 Feb 2020 22:10:38 +0000

There are hundreds of tools for developers, both paid and free. It can be overwhelming to pick out which ones will actually benefit you. You also don’t want to clutter your workspace with every tool under the Sun. This is a list of the tools that have been helpful to me as I learned web development and in my job as a Software Engineer.

Fullstack

VSCode Extensions
- Bracket Pair Colorizer 2 - colors matching brackets so they are easier to pair
- Auto Rename Tag - whenever you change an HTML/XML tag, this extensions automatically renames its pair
- TODO Highlight - leave yourself reminders throughout yoru code. Whenever you add TODO: it will highlight the phrase
- Gitlens - this extension has a lot of great features but I mostly use it as a way to see who wrote what line of code and when (git blame). Let me know in the comments what else you use it for!
- Markdown Preview Github Styling VSCode's markdown preview is great but with this extension, your preview will resemble the Github styles more closely
Postico - edit your database using a friendly UI instead of dry commands
Postman - many uses for this app but I mostly use it to test APIs
Bundlephobia - compute how much your app will grow in size when adding an npm package to it

Design

Coolors - free color palette generator
Sketch - Sketch makes it super easy to create wireframes for your apps
Appicon - generates icons and images for mobile apps right from your browser

Productivity Stuff

Spectacle – easily arrange windows with custom keyboard shortcuts. Unfortunately, it is no longer being maintained. There are other apps like this one but I haven't experimented with them yet since Spectacle has been working great in Catalina
Pomoday.app - keyboard-based task management app. It's very new but I already use it everyday. You can time how long a task takes and see a snapshot of your day
Notes - this is the native notes app from Apple. I used to use OneNote but Notes is much cleaner and faster. You can search easily through them so I make sure to include keywords in my notes
HabitBull - Habitbull makes it easy to track my habits
Overcast - this is my go-to app for podcasts. I am so sad that there isn't an Alexa skill that works with it but it's still better than Spotify or Apple Podcasts. My favorite feature is the ability to create playlists made up of episodes from different shows
Booksloth - I am an avid reader and always keep my Goodreads up to date. However, Goodreads seems to be stuck in the past. Booksloth is beautifully designed and adds the ability to rate books based on badges such as "Story", "Worldbuilding", "Writing Style"

You’ll have to experiment with what’s out there and make sure to keep only those that benefit you and your work. If you use any of these, comment on your experience with them or recommend me tools to use, and I’ll check them out.