DEV Community: Hannah

How to Mentor a Junior Developer New to Your Team

Hannah — Tue, 04 May 2021 23:16:16 +0000

I've been at my job for less than a year, and frequently have days where I'm consumed with imposter syndrome. So when my manager asked me to help support a Junior Developer new to our team, I was both flattered and overwhelmed. Thoughts crept up like: "I barely know enough about my own job, let alone enough to mentor someone else." "I struggle with my own tasks, how will I be able to help this person with theirs?" After the thoughts rooted in fear had their chance to speak, the thoughts of excitement and joy chimed in: "This is an amazing opportunity to cement your own knowledge of our processes and share what you've learned so far." "Remember all the great mentors you've had? Now is your chance to be that person for someone else!".

My fear and self-doubt were still there, but the joy and excitement I had about being this new employee's mentor far outweighed any of those negative thoughts.

Below, I will share some strategies I used in helping this new employee get familiar with our systems and processes to conquer their first PR!

1. Familiarize yourself with their first task, and expect to pair with them the entire time.

In order for me to help this new employee succeed, I needed to be up to speed with the task at hand, the technical requirements, the designer responsible, and any other stakeholders or decision-makers involved. This helped with providing overall context of the task so that my lack of understanding was not a bottleneck in our pairing time together.

2. Let them drive.

This employee is very junior. I really didn't know what their level of comfort would be navigating through our codebase, and pushing commits to Github. In order for them to gain more confidence, I had them share their screen the whole time so they could drive. That way, they will become more comfortable with these new-to-them processes.

3. Explain the why.

If a newer employee is driving, they can get so focused on where to click, what to click, where to paste that text, etc., that they can forget the why behind what we're doing. I made sure to explain what we were doing in great detail, and provide as much context as possible to help paint a bigger picture for them about why we were doing something.

4. Tell them when you don't know something.

There were a few times during our pairing sessions that I didn't know the answer, or wasn't sure where to find a certain file. I made sure to say to this new employee "Hmm... I don't know where that is, but here is what I'm thinking we might try." It is always reassuring to me to hear another developer say "I don't know, but let's try this." That tells me that it's okay not to know something, and also helps give me clues into how others tackle problems.

5. Make To-Do lists together.

Having a design mock handy certainly helped guide our pairing sessions; but each morning we met, we outlined what was still outstanding or what needed to be fixed or polished. This gave them a jumping-off point and clear direction when I had to step away for other work commitments.

6. Celebrate every milestone.

It can be very overwhelming and scary to start your first developer job. It was important to me that I made sure this employee felt like they were succeeding at every juncture. I made sure they knew how impressed I was with their progress. And when we met hurdles, I reassured them that I too had encountered these same challenges. Every new day, new challenge, and new milestone was a chance to celebrate their great work both on the task, and within our team.

In conclusion

These first few weeks helping this new employee feel comfortable in their new role has been so rewarding. I have seen the joy in their face when their code works as expected, and frustration as more changes are added to their PR. But I have tried my best to reassure them along the way that they are doing great work, and that changes are expected, and that we will merge this PR eventually. 😅

I hope you have found these tips helpful. Let me know in the comments below: What is something that a coworker has done to help you feel comfortable in a new role?

Sidebar layout using Grid & TailwindCSS

Hannah — Wed, 27 Jan 2021 02:01:49 +0000

Implementing Tailwind into your Codepen project

In the CSS window, click on the gear icon.
In the "Add External Stylesheets" section, search for "tailwind" and select "tailwindcss" from the dropdown menu.
Hit "Save & Close"

Building the grid

In the html section, start with a <section> tag and build out some base styles



<section class="w-full max-w-6xl mx-auto px-4 m-4 border-2 border-red-600">

taking a mobile-first approach, establish this <section> as a full-width element with the tailwind class w-full, and a max-width of 72rem, or max-w-6xl.

Next, let's add some margin and padding to get this area some breathing room.

mx-auto sets the margin left & right to auto, which helps center this section on the page; while m-4 sets the margin on all sides to 4rem, or 16px. px-4 sets the padding left & right to 4rem, or 16px.

The border-2 class adds a border around the element with a width of 2px. The border-red-600 class adds a red color to the existing border. These two border classes are for demonstration purposes, so you can easily see where the <section> tag ends, and the following tags begin.

Inside the section tag, we will need a <div> to establish our grid property.



<div class="grid md:grid-cols-12 gap-5 p-4 m-2">

grid is shorthand for display:grid. This will establish our div as a grid element so we have a main section that will take up the majority of the space, and a sidebar element next to it. md:grid-cols-12 says that on medium size screens (screens with a minimum width of 768px) the div will span 12 grid columns. gap-5 acts as our grid-gap and will add a grid-gap of 1.25rem, or 16px. p-4 and m-2 set the padding and margin to 1rem and 0.5rem, respectively.

Adding properties inside the Grid element

Now that our grid layout has been established, we need our <main> and <aside> tags.



<main class="md:col-span-9 p-4 border-2 border-green-600">

Similar to earlier when we established the div element as a 12 column grid, adding md:col-span-9 will tell this <main> element to span the width of 9 of our available 12 columns on medium size screens. p-4 adds 1rem of padding in the element. And like before, the border elements are just for fun.

Inside of the <main> tag I also added a headline, subhead, and paragraph of text. Go ahead and add those now.



<h1 class="text-3xl">Headline</h1>
<h3 class="text-xl">Subheadline</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum voluptas saepe sit qui, veniam, distinctio quos suscipit provident dolorum tempore officia eaque, delectus reiciendis. Ad odio quam ullam nostrum nisi.</p>

text-3xl and text-xl set the font-size of these header tags as 1.875rem and 1.25rem respectively.

After the closing </main> tag, add an <aside> html element.



<aside class="md:col-span-3 md:pt-0 p-2 border-2 border-blue-600">

On medium screens, this section will span 3 of our available 12 columns using md:col-span-3, have a padding-top of 0px on medium screens, padding of 0.5rem on all sides, and as before, the borders are for fun!

Add a <p> tag with some placeholder text inside of the <aside> element and these two elements should live side-by-side on medium size screens and larger, and should stack, with the <main> area above the <aside> area on smaller screens.

Viewing our finished product

Let's take a look here, at this codepen example.

Notice how the css column of our Codepen project is empty? -- we wrote all of our css using Tailwind classes inside of our html elements!

I like to think of Tailwind as writing a short-hand css. Tailwind assumes knowledge of css, so I suggest learning css first and slowly incorporating Tailwind into your projects.

Resources I find helpful

Two Tailwind resources I love to use are the TailwindCSS docs and this TailwindCSS Cheat Sheet

If you are interested in becoming more familiar with CSS Grid, I suggest Wes Bos' FREE css grid course.

Thank you!

Thank you so much for reading. Let me know if you have any questions, suggestions or comments.

You can find me on Twitter @hannahrosecodes

JavaScript & Ruby Project Ideas

Hannah — Thu, 12 Mar 2020 16:02:59 +0000

I am a self-taught JavaScript developer, and my friend just graduated from a bootcamp. We want to collaborate on a project together, but i'm not sure what we should build.

Do you have any ideas of a project we can build that uses Ruby on Rails for the backend, and JavaScript for the frontend?