DEV Community

loading...
Cover image for 10 Things I Learned As A Junior Developer (First Month)

10 Things I Learned As A Junior Developer (First Month)

gedalyakrycer profile image Gedalya Krycer ・Updated on ・9 min read

In February of 2021, I started my first programming job as a part-time Junior React Native Developer! (πŸŽ‰)

The company is called WorkoutMe and its iOS app allows people across the world to do live workouts together. (Think Zoom, but for exercise. πŸ’ͺ)

My first month had been a blur of discovery, so I wanted to take a moment to document some of the things I learned during that time.


10 Things I've Learned

1. React Native

2. Onboarding Matters

3. Linting Code

4. 15 Minute Troubleshoot Rule

5. Cross Workflow Naming Conventions

6. Ongoing Progress List

7. Tracking Time: Production Vs. Learning

8. Jetbrains PHPStorm IDE

9. Using Aliases For Importing

10. Structuring Array/Object Data


1. React Native

React Native Hero Banner

Fun fact, before this job I've never used React Native before. 😲

I was definitely nervous about jumping into a mobile-only environment and what seemed like a new language.

(I have used React extensively before, but there are many differences between coding for the web vs mobile applications.)

To help prepare I read through the React Native documentation and purchased an in-depth React Native Udemy course, which I am still working through.

Discovery πŸ’‘

I am learning more "on the job" than through Udemy courses.

By trying to solve project-specific issues, I'm reading the documentation in a targeted way. This is actually making the research less overwhelming.

Courses are still beneficial, but I am starting to use them now to "fill in the gaps".

πŸ” Back to top


2. Onboarding Matters

Onboarding Hero Banner

I'm very grateful for the onboarding process at WorkoutMe, as I feel like it is setting me up for success.

Discovery πŸ’‘

Each project was designed to incrementally introduce me to different parts of the app.

Project 1:

Move all hardcoded front-end text into a JSON file and reference them with a localization helper function. (For future multi-lingual support.)

This made me review almost every major component in the codebase, with purpose. As a result future edits seemed familiar.

Project 2:

Change the layout of several onboarding screens to utilize buttons instead of interactive bars.

This exposed me to React Native core components like <View> and <TouchableOpacity>, without worrying about creating new logic.

Project 3:

Create several screens from scratch based on a provided design and have them display data from the backend.

This introduced me to more complex RN components like <SectionList> and required new front-end logic for processing backend user data.

There were still many moments where I thought:

"How in the world am I going to build this? πŸ€” I can't even get the emulator working. Also...what is an emulator again?" πŸ₯²

The great thing is that with each project's pull request came recommendations and corrections from my supervisor. His feedback was invaluable to helping me learn and start the next project correctly.

πŸ” Back to top


3. Linting Code

Linting Code Hero Banner

On my first pull request review, my supervisor chuckled while looking at my code and said "you have a different coding style than us, have you ever used a linter?" It was a very nice way of saying "your code is a mess". πŸ˜‚

He showed me how to install ESLint, which analysis the code as I write it and enforces best practices specific to React Native.

Discovery πŸ’‘

Most of my code was highlighted in red! I was shocked by how different it was from the standards my new team used.

I quickly learned to love ESLint. Among other things, It makes sure we all use double spaces for indentations, warns against whitespace, and even simplifies some of my code.

My next goal is to learn what it is catching and start making a habit to code in that style and avoid those errors in the first place.

Want to learn more?

πŸ” Back to top


4. Cross Workflow Naming Conventions

Naming Conventions Hero Banner

Speaking of staying consistent...

Discovery πŸ’‘

No matter the platform, each issue/feature is named the same.

1 β€” A new issue/feature is added to our project management software Jira and is given a code and a name.

Example: DEV-120 Onboarding Screens

2 β€” In GitHub, a branch is also created called dev-120-onboarding-screens.

3 β€” Whenever I make commits to that branch I start each message with the code.

git commit -m "DEV-120 Add button layout"
Enter fullscreen mode Exit fullscreen mode

4 β€” Lastly, when I track my time for this project, I can include this code in the timesheet. (I'll speak more about this below.)

All of this helps keep communication and organization of what is being worked on clear across multiple platforms and team members.

Learn More About Commit Messages

πŸ” Back to top


5. 15 Minute Troubleshoot Rule

Troubleshooting Hero Banner

I sometimes encounter errors I never heard of or glitches that there is no error message to even Google about. I can easily spend hours trying to solve them.

On one project, I spent over an hour trying to figure out how to make a progress bar have a gradient.

It turns out that this is a very complex thing to do with the package we were using and our designer was actually ok with us just using a solid color.

Discovery πŸ’‘

It's important to not get stuck on single issues and instead ask informed questions about them later on.

If a problem starts taking more than 15-20min to solve I now write out the issue and what I have done to troubleshoot it.

Asking my supervisor for help allows him to guide me, change the direction or approve my taking another stab at it.

Learn More About Not Getting Stuck On Bugs

πŸ” Back to top


6. Ongoing Progress List

Ongoing Progress List Hero Banner

As I am working through projects, questions are bound to come up for my supervisor. We also work in two different time zones, so he isn't always online for quick feedback.

Discovery πŸ’‘

It is quicker to document questions and suggestions as they come up, instead of at the end of my shift.

Every time I finish a major feature, run into a complex bug or have a suggestion β€” I add it to a numbered list. This way I don't have to remember all the points after a few hours of coding. And he can easily respond to individual points as needed.

Example:

// List To Supervisor

1 β€” Pushed list change progress to branch DEV-82.
2 β€” Is it important that the dividing lines have space on the ends or can they go to the end? (Screenshot)
3 β€” Do you know if there is a way to apply shadows to a single group of items in a <SectionList>? I couldn't find anything in the docs or after googling around for a bit.
4 β€” Currently the video button just has a generic function that runs a console log. At this point did it need to anymore?
5 β€” Should I break-up the code in <AwesomeListComponent> into sub-components or is it fine as is?
Enter fullscreen mode Exit fullscreen mode
// Supervisor Response 

1 β€” Great.
2 β€” Yes, please add the space at the ends.
3 β€” Let's actually move away from using the shadow. Here is a different approach from the designer. 
4 β€” This works for now.
5 β€” Let's keep it to one component for now. 
Enter fullscreen mode Exit fullscreen mode

πŸ” Back to top


7. Tracking Time: Production Vs. Learning

Tracking Time Hero Banner

I found it incredibly helpful to track my time using a tool called Harvest.

Discovery πŸ’‘

Track time in two different buckets. One for time spent coding and another for time spent learning.

It can be a little bit disheartening to feel like I spent the whole day on tutorials and barely got any "real work" done. But by tracking where my time is going, I can also track my growth.

One of my first big projects at work I spent an astounding 81% of my time on tutorials and research. Only 19% went to actual shippable code.

I was bummed, but it made sense. I never used React Native and barely touched the codebase before, so every step required some form of education.

By my 3rd big project, I went up to 65% of time spent on shippable code and only spent 35% researching solutions.

Seeing the trajectory of my time spent more towards bringing the company value, helped me feel a lot more motivated.

πŸ” Back to top


8. Jetbrains PHPStorm IDE

PHPStorm IDE Hero Banner

I'll probably write a whole separate post about this one. But let me just say that switching from Visual Studio Code has been an amazing experience.

My supervisor recommended I look into Jetbrains WebStom IDE since that is what our team used. It would make it easier to collaborate and it has been a favorite of his for many years.

I opted for PHPStorm since it has all the same features as WebStorm and adds many great additions for working with WordPress.

Discovery πŸ’‘

Out of the box PHPStorm allows me to spend more time on coding and less on making things run, commit or configure correctly.

I love the built-in panels for working with GitHub and running different emulators with React Native. All without plugins and typing lengthy commands in the terminal.

I especially love the local history feature that lets me restore any deleted code in a file. It's also pretty cool how it generates React components from parts of larger code, with one click. πŸ˜„

πŸ” Back to top


9. Using Aliases For Importing

Aliases Hero Banner

I love learning new ways to write less code! 😁

Discovery πŸ’‘

Importing via aliases requires less "pathing" code and no manual refactoring when files are moved.

Regular Import Pathing

import icon from require('../../../../assets/icons/icon.svg')
Enter fullscreen mode Exit fullscreen mode

Alias Import Pathing

import icon from require('@assets/icons/icon.svg')
Enter fullscreen mode Exit fullscreen mode

Basically, this is a little configuration feature with Webpack, where you can specify specific folders it should look within.

In the above example, we just need to specify /@assets/ in the require() and Webpack will start pathing from that directory. It doesn't matter where in the src folder the component we are making the import from is located.

(This is achieved with configuring the resolve.alias setting.)

πŸ” Back to top


10. Structuring Array/Object Data

Object Data Hero Banner

In my past projects, I didn't really need to worry about how my data was stored. Typically I had a bunch of uniform objects in an array. Each object had a unique id and some data I wanted to use in my app.

const DATA = [
  {
    id: 'asd',
    name: 'Gedalya Krycer',
    hobby: 'Hiking'
  },
  {
    id: 'dsa',
    name: 'Graciella Krycer',
    hobby: 'Writing'
  },
  β€’β€’β€’
]
Enter fullscreen mode Exit fullscreen mode

Discovery πŸ’‘

When structuring data within arrays and objects, take some time to consider where it will be used.

Take for example the <SectionList> component. It allows you to "map" through data and create groupings of elements.

Between these groupings, you can add a header. Imagine a table that between every few rows there was a bold green header row.

For this to work, the data array needs an object for each group. Within the group object, it stores a title key/value pair and a data array.

The title holds the information that goes in that header.

The data holds the information that goes in the main sections.

const myData = [
  {
    title: 'This is the headline',
    data: [
      name: 'Peter',
      phone: '(012) 345-6789',
    ],
  },
  {
    title: 'This is a different headline',
    data: [
      name: 'Jill',
      phone: '(987) 654-3210',
    ],
  },
]
Enter fullscreen mode Exit fullscreen mode

Without this special formating, the won't render the information correctly.

πŸ” Back to top


Thanks for reading!

That concludes 10 things that I learned during my first month working as a Junior Developer.

I hope you took away something important... I didn't have to know everything about coding on day 1.

There is a lot of opportunities to learn while working on projects. With great direction from my supervisor, taking the time to practice, and googling a lot, I am growing more every day.

So I encourage you to keep applying and going after the jobs you think are interesting. You might be a better fit than you think. πŸ‘

If you are interested in a fun workout, check out WorkoutMe for iOS. πŸƒ


All images are designed with Figma

Discussion (20)

pic
Editor guide
Collapse
yourdevguy profile image
Mike Haslam

Dude you are rocking itπŸ„β€β™‚οΈ I am really enjoying your content.

As someone who always been an indie developer and wanting to join a πŸ‘¨β€πŸ’»team to grow and learn more. This article has some great insights that helped me thanks πŸ™Œ

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

So glad you found it helpful! That is great to hear. Keep coding on!

Collapse
maxiqboy profile image
Thinh Nguyen

Great article, I learned a lot from your post, Thanks,

By the way, one small typo here:

The data holds the information that goes in the main sections.

const myData = {  // should it be an array ???
...
}
Enter fullscreen mode Exit fullscreen mode
Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Oh, thank you! Yup totally should be an array instead and the name of the component in the paragraph above wasn't showing up either. 🀦

Both are now fixed. Good catch!

Collapse
nickmaris profile image
nickmaris

This interesting: "Track time in two different buckets. One for time spent coding and another for time spent learning."

Is there any way to integrate tools like Harvest with editors, browsers and shells so that I don't have to stop what I am doing to start/stop a timer? If yes, which integrations do you use and how does the tool track idle time like disappearing to go on a phonecall, kitchen, etc?

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

I do believe there is a an integration with Trello. I don’t really like it though.

I use their desktop app, as it puts a start/stop button in the top Mac OS toolbar. This makes it very easy to change timers.

Anything that isn’t coding related (phone calls, rest room breaks, etc) I will pause the timer.

Collapse
nickmaris profile image
nickmaris

Shortcuts can help.

Keep blogging, not only you are good but you are good at writing too.

Thread Thread
gedalyakrycer profile image
Gedalya Krycer Author

Nice, that is a great find. And thank you so much, that is so encouraging to hear!

Collapse
yukimochii profile image
Vivian T.

I loved your article! I'm also starting out as a Junior but your experience is very different from mine, specially because I don't get any support or assistance from my team as you do. But still, I can use most topics to create VERY helpful habits for myself and future opportunities. Thank you very much <3

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Congratulations on starting out as a Junior Developer as well! Hang in there! Forging your own way can be tough (had a few jobs like that myself) but growth built from perseverince is also very valuable. It can definitely lead to better jobs with healthier cultures in the future.

Collapse
jpotts7 profile image
jpotts7

Great insights! It's really helpful to hear about which processes and problems are utilized more frequently on the job than others.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

I am so glad you found it helpful! :)

Collapse
nnguyenminh profile image
nnguyenminh

This article made me think of myself, where am I and what am I doing, learning ?
Thank you! You're great as you're!

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thank you so much! Keep it up too!

Collapse
aalphaindia profile image
Pawan Pawar

Good one!!

Collapse
gedalyakrycer profile image
Collapse
rahoulb profile image
Rahoul Baruah

Excellent article. And really good progress

Collapse
gedalyakrycer profile image
Collapse
andrewbaisden profile image
Andrew Baisden

Impressive I enjoyed reading this article.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thanks, so glad you enjoyed it!