Leveling Up

Photo by Tim Mossholder from Pexels

Leveling Up

There are a lot of good articles out there on how to level up your software engineering career. I’m going to focus on one: digging deeper. Digging deeper is the concept of being comfortable understanding what you use and how you use it. Let’s get to it.

1 Player Game

When I first started, I had no clue what I was doing. My method of doing anything, especially in the early days of web development, was to just piece things together. Some HTML here, add a little bit of CSS (Blueprint anyone?) to make it look good and a sprinkle of jQuery. I’d download assets, add it to the project and then FTP it — done!

I didn’t dig into any of those libraries. This was my method:

  • Read some blog post
  • Integrate recommendations
  • Ship the project
  • Make cash 💰💰💰

This wasn’t sustainable.

2 Player Game

I feel sorry for the people who had to maintain code from my early days. Who knows, perhaps they still are. It’s a spaghetti mess. I eventually learned to clean up my act and my code! Once I got out of freelancing and had opportunities to join formal engineering teams — I understood that it was necessary to think through solutions.

I thought about maintenance, scaling, and code styling. This was my method:

  • Read some blog post
  • Discuss solutions with the team
  • Integrate recommendations
  • Ship the project
  • Make 💰💰💰

That’s where I plateaued.

Grand Prix

When I was working in Ember and working closely with folks on the core team, I was introduced to a novel concept: debugging internals. We would put a debugger and just step through the whole stack. I had never done this before! I thought it was crazy! I also thought it was the coolest thing in the world!

During that time — I found that the tools I was using were developed by other humans! Humans who had an idea and just wrote the code for it. Some of it was great, some of it was terrible.

Over the course of a year or so — I had developed some core knowledge about Ember that helped me:

  1. Develop features faster
  2. Communicate more effectively with teammates
  3. Contribute to OSS (to overcome roadblocks)

This was my method:

  • Read some blog post
  • Discuss solutions with the team
  • Integrate recommendations
  • Learn about my tools
  • Knowledge share
  • Ship the project
  • Make 💰💰💰 (this increased significantly)

How do you get here?

Let’s-a Go!

Don’t wait to get to this step! Start today!

I’m going to showcase an example. For this example, I’m going to dive into Apollo’s hook. I haven't used Apollo for almost six to seven months now, and I haven't dug into before, so this is my first time.

Alright, let’s start here:

Let’s say that for whatever reason my loading state isn’t working. I don’t know why my query works and the graphql playground is working as expected. I’ve looked at the docs several times and I’m stumped. What can I do? I can add a debugger at this line and step into what’s happening — that’s a great option.

I could also dive into the source code. This is what I’m going to do because I need to know whats going on to figure out what’s up. Keep in mind, I’ve never done this before this article.

Here’s what I do:

Let’s start by going to the repo:

I’m going to search for , and luckily my second result is the test for this hook. I can look at the test, but I'm going to dive deeper.

The test tells me where exists, so I'm going to go up one directory and check it out.

Ok cool, there it is — let’s click into

Alright! We’re looking at source code…but… there’s nothing here — what do I do?

It looks like it’s using something called , the import above shows it's in a utils directory - let's go to it.

Ok, we’ve found the file — let’s open it.

Ok. I’m digging through the file and I see something called . I don't know what is so, let's see what it is...

Ok, looks like it depends on if is true or false. Since we didn't specify anything about our hook as an option, I'm assuming it is the second one where we typecast it as .

This is the line, I’m assuming we hit:

Regardless, whats ? Ah, ok it's above.

Ok so within this other hook is a call to or just .

I’m going to assume where calling because I didn't specify . But, what's ?

Looking further above, it looks like it gets set to some current thing or a new thing. The new thing is an instance of . So, knowing what we know so far is a method on an instance of .

Nothing significant about here - it looks to be contained within this type. So let's dig deeper.

Looks like is being imported by two levels above. Let's go to it.

Found it! Let’s go into the data directory:

Once here, we’ve found - let's click it.

Alright, we’ve found the class! Let's investigate for

Found it! Let’s see what it does:

Ok, it seems to make a call to or . Since we're not doing anything SSR related, I'm going to expect is what gets called. Let's see what that does.

There it is!

This function seems to call - ok, that definitely seems relevant! Let's see what it does.

And boom! We’ve found where all the magic happens. This is the function that returns the result we’ve been looking for. Here, we’ll find , , and .

Fín

A very important step in your career is the ability to dive into the tools you use. Doing this is a crucial step in giving you the freedom you need to build software the way you want. With this in mind, go on and triumph!

More about:

Alvin Crespo