Forem: Jessica Wilkins

How to Translate Open Source Contributions into Career Opportunities

Jessica Wilkins — Thu, 21 Dec 2023 15:39:43 +0000

2023 has proven to be a difficult year when it comes to getting a job in tech. With all of the layoffs and increased competition for roles, it can be hard to know how to stand out in the market. One way to stand out is through open source contributions. OpenSauced has just released a guide on how to categorize your open source contributions and highlight your impact on your resume.

In this article, we will go through a few key sections of the guide that will help you land your next job in tech.

Defining Your Career Goals

Before you embark on the job search, it is best to write down your goals and think about what types of skills are necessary for that new role. Some of you might be looking to get your first job in tech, while others of you have years of experience and looking to level up in your career.

No matter where you are at in your tech journey, study a few job ads to see the common requirements required for that role. Then assess how your current skill set matches up and what areas need room for improvement.

Finding Open Source Projects to Contribute to

Once you have defined your goals, you will need to find open source projects that will help you build out your skill set.

For example, if you are interested in pursuing a frontend developer role, then you will need to search for projects that have tons of HTML, CSS and JavaScript focused issues. Start off with smaller bug fixes and work your way up to more features and larger contributions. The more involved you get with a project, the more opportunities you will have to make meaningful contributions and leave an impact. This type of experience is something that you can highlight on your resume.

To learn more about the best ways to find projects using OpenSauced, please read through this section of the guide.

Using the Highlights Feature to Track Your Contributions

Once you start making contributions to open source projects, you will need to keep a record of what you have done. You will also want to share your achievements with the community. The highlights feature is a great way to post about your recent contribution. You should include a quick summary of the solution you provided and the impact you left. You can share that highlight on platforms like Twitter and LinkedIn. By showcasing your work online, you are demonstrating to potential employers that you have the skills to do the job they are looking for.

Networking and Professional Development Opportunities Through Open Source

Proper networking and building of relationships in the tech industry can help you advance in your career. By contributing to open source, you are able to collaborate with other contributors and maintainers for the project. They will be able to see your work, communication skills and how well you work on a team. That can lead to professional development opportunities like speaking engagements or collaboration opportunities. It can also lead to job opportunities.

To learn more about how to utilize OpenSauced to grow your network, please read through this section of the guide.

Conclusion

Even though the landscape for hiring has changed a lot over the past year, there are still ways to stand out from other job applicants and land a job in tech. I would suggest reading this complete in depth guide on how to translate your open source contributions into professional opportunities.

Join Virtual Coffee in the Healthy Habits for Happy Devs monthly challenge

Jessica Wilkins — Tue, 01 Aug 2023 13:02:41 +0000

This has been a really difficult year for a lot of people with the number of layoffs and uncertainty in the world. Sometimes it is easy to overwork ourselves and get lost in all of the stress and expectations of our lives.

The goal of this month's challenge is to be mindful of mental and physical health by building and practicing healthy habits.

Goals

Build a new habit

Think of one new habit that you would like to incorporate into your life. Examples can include drinking more water, meditating, or walking. The goal is to pick something that will make you a healthier dev.

You can also choose a habit that is more code focused like revisiting some of your old projects and updating the README or refactoring your code.

Practice a healthy habit

Once you have selected your habit, define what success means in completing this challenge. For example, if you want to drink more water, you could set a goal of drinking 2 glasses of water a day.

Or if you want to meditate, you could set a goal of meditating for 10 minutes a day.

Weekly check-ins - Are you hitting your goals?

Each week, we will be checking in with each other and sharing our progress. You can share your progress by replying to the weekly check in post with a short message.

If you are not hitting your goals, don't worry! This is a process and we are all here to support each other. If you are struggling, reach out to the community for support.

Or if something unexpected comes up, you can always adjust your goals. For example, if you are sick and can't meditate, you can adjust your goal to be 5 minutes of meditation instead of 10.

Remember this is not about perfection, it is about progress.

Who can participate?

This challenge is for all developers no matter where they are at in their coding journey. We are all here to support each other.

How it works

Set your intentions

Think about one new healthy habit you would like to start practicing this month.

Start your habit and track your progress

Make sure to track your progress by using a tool like a spreadsheet, habit tracker app or a habit journal.

Here are some options to consider:

Share your progress

Share your progress in the weekly checkin posts. You can focus on small replies like "Walked 20 minutes today" or "I meditated for 5 minutes today".

If you are interested in sharing your progress on other platforms like your personal blog, Twitter, or Dev.to, then you are free to do so.

Tips for forming healthy habits

Start small

When you are starting a new habit, it is important to start small. For example, if you want to drink more water, you could start with drinking a glass of water every morning.

If you want to meditate, you could start with 5 minutes of meditation a day.

No matter what habit you choose, make sure that it is easy to do so that it is hard to say no.

Make it a schedule

Block a time in your calendar to practice your habit. For example, if you want to meditate, you could block 10 minutes in the morning to meditate.

If you want to drink more water, you could block 5 minutes in the morning to drink a glass of water.

In the beginning of the month, I would suggest adding a recurring event in your calendar to remind you to practice your habit.

Track your habits

Tracking your habits is a great way to visualize your progress. You can use a spreadsheet, habit tracker app or a habit journal.

Be kind to yourself and celebrate your wins

Remember that this is a process and there will be some steps back. If you miss a day, don't worry! Just start again the next day.

Life can sometimes get in the way and that is okay. Just remember to be kind to yourself and to celebrate your wins.🎉

Conclusion

I hope that you will join us in this month's challenge in an effort to be a healthier dev. 😃

Additional Resources

How I overcame the fear of learning something new and embraced the joy of learning

Jessica Wilkins — Wed, 30 Nov 2022 04:51:35 +0000

When I first started learning how to code back in 2020, I struggled a lot with learning the basic concepts. I would often beat myself up for not learning things quickly and questioned if programming was really for me.

Fast forward two years, and I am now working as a developer and enjoy learning new concepts every day. In this article, I will walk through my initial points of fear and the steps I took to break through to the other side of joy.

Why was I scared in the first place?

Before being a developer, I was a professional musician and had spent most of my life in music. Ever since I was a little kid, I was always involved with some sort of performance, festival or other musical activity. Over time, I became very comfortable with my skills and enjoyed tackling new challenges.

When the pandemic hit, I started learning how to code and this was the first time in a while that I was struggling to learn something new. Every time a new challenge would come up, my first tendency was to walk away from it. At the time, I think I was scared to try because if I failed then that meant I wasn't supposed to be a programmer.

But then I realized that the struggle was part of the learning process. I thought back to when I taught music lessons and my students would struggle with learning a new passage. I had to remind them that struggling to understand it now was part of the process and that they were on their way to figuring it out. I had to take those same words and repeat them back to myself.

Once I started to embrace that part of the learning process, learning how to code became less stressful and started to become fun. I found myself sticking with a problem longer and feeling that sense of accomplishment when I finally figured it out.

Steps I took to break through the fear of learning new things

One of the things that helped me was to find a passion project I was interested in and start working on it. I would come up with an idea and then try to figure out what technologies were needed to build the project. I made sure to start with small projects and take baby steps in learning new things. After a few months of practicing this skill and getting outside of my comfort zone, I started to embrace learning and felt empowered to keep going.

Does that fear still come up today?

Of course! 😆

Right now at work, I am learning a whole lot about GraphQL and Apollo Server. There is a ton of new information being thrown at me with this new project but I am trying to embrace the process of learning. Every ticket I pick up is an opportunity for me to learn something new. Even though I will get stuck on problems and will spend time working my way through them, it feels good to get on the other side and figure it out.

Conclusion

When you are starting something new, it is completely normal to feel anxious about unfamiliar territory. My advice is to take a deep breath and take one small step at a time. Remember, every bit of struggle is one step closer to learning something cool and arriving at the point of joy 😃

Common mistakes that developers make on resumes

Jessica Wilkins — Wed, 30 Nov 2022 04:16:04 +0000

I belong to a few developer communities, and I have seen an uptick in posts from new developers asking for feedback on resumes. During this time, I have seen a lot of common mistakes people make when trying to land their first developer job.

In this article, I will outline what I believe to be mistakes you should avoid making on your resumes.

Disclaimer: I am not an HR person or professional career coach. I am a career changer that switched from music to development offering my two cents on the subject 😄

Broken or unsecured links
Unprofessional email addresses
Lack of good project descriptions
Misspelling technology names
Spelling errors in general
Skill bars
Generic Personal statements
Unconventional formatting
Conclusion

Broken or unsecured links

If you are going to include links in your resume, you need to make sure that they work. Before you start sending out your resume to a whole bunch of potential employers, please triple-check that all of the links in there are valid. You should also have your resume reviewed by other people and ask them to check the links too.

Another thing to consider is to make sure that all of the links lead to secure sites. We have all been in that situation where we have clicked on a site and the browser shows us the "Not Secure" warning. You don't want to put recruiters and potential employers through the same thing. If any of the links on your resume are labeled as "Not Secure", you will need to rectify that immediately.

Unprofessional email addresses

I have seen a few cases where people put some crazy things for their email addresses. It is important to remember to display yourself as a professional and ditch the wacky email addresses you created in high school. A nice safe email address would be jane.doe@gmail.com instead of partypants@hotmail.com.

If you don't have a nice clean email, then hop over to Google and create one real quick. You don't want to be passed over for a job, because they didn't take you seriously.

Lack of good project descriptions

If you are a self-taught developer or boot camp grad, your projects will most likely be the star of the resume. It is important to provide detailed project descriptions so people will know what your project is about. You want to avoid phrases like "React project that fetches data" or "Responsive website built with HTML and CSS". Neither of those project descriptions tells me what the project is really about.

When it comes to project descriptions, you should think about the following things:

Does this project solve a problem?
Was this project built for a business or organization? If so, how did your site help their business?
What are some interesting features of this project?

You don't need to write several paragraphs for these project descriptions. But you should provide a few sentences on what this project is about to get people interested in learning more.

Misspelling technology names

This one is a big one for me. If you are going to apply for a developer job working with certain technologies, you have to spell the names correctly. A common mistake would be the misspelling of JavaScript. Here are a few variations of JavaScript that I have seen on resumes:

javascript
Javascript
Java Script

You must provide a level of detail and care on your resume. Before you send out your resume, triple-check that all of the technology names are spelled correctly.

Spelling errors in general

This ties into the last section, but it is really important to reread your resume several times and have others read through your resume to catch all spelling errors. I would also highly suggest running your resume through a program like Grammarly to help you.

Skill bars

I have seen this come up a few times where people will add skill bars on their resumes to show ratings for different technologies. I think you should leave out skill bars on your resume because these self-ratings don't mean anything. Your potential employer is going to make up their mind on your skill level and so you don't need to take up valuable space on your resume with skill bars.

Generic Personal statements

Writing personal statements is difficult because you only have a few sentences to engage your audience. I hate writing personal statements on my resume and sometimes I will just leave it out. If you are going to include one, you have to be careful that it is not generic.

Phrases like "Hard working individual that wants to learn" or "eager developer that loves to code" unfortunately doesn't add a whole lot to your resume.

If you are interested in learning about good personal statements, then I would suggest looking at these articles.

Unconventional formatting

Sometimes developers will get creative with the colors and layouts for their resumes. You want to be careful about doing this because if you get too creative then it might be difficult to read your resume. I believe that you should keep the formatting consistent and conventional. There are plenty of times to get creative in your projects, but your resume should be straight to the point and informative.

Conclusion

Writing a good resume is tough because you only have a few seconds to make an impression. Getting a tech job is tough and you don't want to make it harder for yourself by not polishing up your resume.

I hope this article will help you avoid common pitfalls in resume writing.

If you want to learn more about how to write a good resume, please check out the following articles. 😃

Developer Health: Tips for dealing with workplace anxieties and imposter syndrome

Jessica Wilkins — Wed, 30 Nov 2022 02:34:45 +0000

Over a year ago, I wrote an article titled Voices of Gatsby: Fighting Back Against Imposter Syndrome. The article details some of my experiences dealing with imposter syndrome as a professional musician and the lessons I learned along the way. Now that I work as a software developer, I still have thoughts of feeling inadequate but I have learned how to develop skills on how to deal with those anxieties.

In this article, I will walk you through some methods I use to deal with imposter syndrome that will hopefully help you in your life.

Keep a record of your accomplishments

Something that I have started to do recently is write down some workplace wins in a small journal. Some of my wins have included working through a difficult issue on a project or celebrating the release of a new product with my team. Whether this win is big or small, you should write it down and take a moment to pat yourself on the back for a job well done.

Writing down your accomplishments will be a record of the good things you have done so far. When imposter syndrome tries to rear its ugly head, you will have written down evidence that you are good enough and will be able to silence those thoughts.

Talk through workplace anxieties with trusted friends and family

When you are struggling, the tendency is to keep everything bottled up inside and withdraw from other people. For many years, I have been resistant to talk about my workplace struggles with friends and family but I have learned that struggling alone just ended up making the problem worse.

If you are feeling inadequate at work or with learning how to code in general, reach out to a trusted community and talk about it. You will quickly learn that you are not alone and that community can help you through difficult times.

Talk with your manager

A lot of times we believe that we are doing a worse job than we are. For the first few weeks on the job, I thought I was failing at everything and wasn't going to make it as a software developer. During one of the end-of-day status updates on Slack, our project manager posted a list of questions about how the week was going. I replied that I didn't feel like I contributed anything and felt bad about it. Well, multiple team members reached out to me that I was doing well and that getting up to speed on a new project was no easy task. I even had senior developers privately messaging me that I was doing well and that I shouldn't be hard on myself.

After that day, my manager and I had a good 1 on 1 about my workplace anxieties and that made me feel a lot better about the situation. I was grateful to have people in my corner rooting for me to succeed and listening to my situation when I was struggling.

Conclusion

Imposter syndrome and anxiety affect a lot of people and it is nothing to be ashamed about. Whether you are two days into your tech journey or two decades, it is important to build a healthy community of people around you to lend support when you are going through difficult times.

Should developers study 20 hours a week after work?

Jessica Wilkins — Fri, 25 Nov 2022 18:47:58 +0000

I just started reading Robert C. Martin's Clean Coder and have been enjoying it so far. But I did run across one section that I found interesting where people would probably have thoughts about it. In the first chapter, there is a section labelled Work Ethic where he talks about how it is the responsibility of the developer to continually grow their skills outside of work. That makes total sense to me because this is an industry where technology is always changing and you have to keep learning to stay relevant.

The part I found interesting was in this quote here:

You should plan on working 60 hours per week. The first 40 are for your employer. The remaining 20 are for you. During this remaining 20 hours you should be reading, practicing, learning, and otherwise enhancing your career.

He then goes onto breaking down the math for how many hours that leaves you for free time.

Do the math. In a week there are 168 hours. Give your employer 40, and your career another 20. That leaves 108. Another 56 for sleep leaves 52 for everything else.

In this article, I wanted to explore this a little bit and leave my thoughts on how much you should study after work.

How does 20 hours of studying after work affect those with busy family lives?

I am a single woman without kids and when it comes to studying, my time is my own and not shared with anyone else. But I am curious how this 20 hours of studying works for those with kids and busy family lives. Between little league, band practice, and the millions of other activities kids are involved with, where does the time go?

Maybe a strict 20 hours a week isn't feasible? Maybe it is better to pick a study schedule that works for your family life. Or maybe you are reading this and think that 20 hours is completely doable.

If you are developer with a busy family life, I would love to hear your thoughts on this. 😃

Should junior developers spend 20 hours or more studying after work?

As a junior, I feel like a lot of us will spend time studying after work so we can continue to learn and grow. But sometimes this could lead to us spending a lot more time studying and burning ourselves out. When I first started working I put in more than 20 hours after work because I felt like there was so much I didn't know. Looking back, I wonder if I was overdoing it.

Is 20 hours a week expected of juniors?
Should it be more?
Or should it depend on their personal schedules?

Curious to hear your thoughts 😃

How does this 20 hours a week apply to more seasoned developers?

If you are more seasoned in this industry, how much time do you spend studying after work? Are you working on personal projects, reading books, listening to podcasts, or doing something else?

I am curious to hear what learning after work looks like for seasoned developers 😃

Conclusion

I feel like I have raised more questions then I have provided answers in this article, but this is a good discussion to have in our community.

What does continual learning look like for developers?
Should there be a strict time commitment or should it be more fluid?
Are there seasons of your career where you will invest more time in learning outside of work?

Love to hear your thoughts on any of the questions I raised in the comments below 😃

How to get started with technical writing - An inside look into my writing process

Jessica Wilkins — Thu, 24 Nov 2022 07:49:11 +0000

For the past two years, I have been involved with technical writing on a variety of web development and career advice topics. Like anything in life, writing is a process and it has taken me a lot of time to get comfortable with it. With every new blog post, I manage to not only learn something new but also get a little bit stronger as a writer.

In this article, I will show you my writing process and provide some tools that have helped me along the way.

How to come up with ideas for writing
How to come up with good headlines
How to create an outline for your blog post
How to write for your target audience
How to create a rough draft for your blog post
- Don't worry about spelling errors at this stage
How to proofread your work
Where to publish your work
Conclusion

How to come up with ideas for writing

I have heard from a lot of people that they have always wanted to get started writing but they don't know what to write. My answer for them is to write about what is currently happening in your life.

If you just started working as a Junior developer, write about your first few months on the job. Lots of aspiring developers want to know what it is like to work as a developer and your insights could help them out.

If you just started learning how to code, write about what you are currently learning. Write about a JavaScript method you learned or a new project you just built. Or write about your experience learning how to code. There are plenty of people looking to get into programming and your article can help them on their journey.

For me, I choose to write about things I have learned at work, beginner developer tutorials or response posts to current events in the industry. Other times I will write about my journey and the lessons I have learned along the way.

Whether you are 2 days into programming or 2 decades in, everyone has something valuable to share and there will be people that are willing to listen.

How to come up with good headlines

A strong headline can mean the difference between someone choosing to read your article or not. You might have the best content in the world but if the title is not engaging, then people probably won't bother to click on it. Sometimes people will take this to the extreme and create clickbait titles because they are more concerned with likes and clicks instead of producing strong quality content. But your goal is to create a strong headline with strong content behind it.

I learned a lot about creating headlines from freeCodeCamp. They have an incredible publication style guide that provides tips on how to create strong headlines.

If you are writing a tutorial, then your headline should include "How to do x ..." or "How to build x". People are always looking for good tutorials and a strong crafted headline can help them find your blog post.

If you are writing about your journey, you might consider starting with "Why I chose to ..." or "What I learned from x".

The more you write articles, the better you will get at coming up with strong headlines that will grab the attention of the reader.

How to create an outline for your blog post

Once you have come up with an idea and headline, you can start planning out your article. I choose to write out some subheadings to help me organize my thoughts. I use Markdown for all of my articles and this is an example of some of the subheadings for this article.

## How to come up with ideas for writing

## How to come up with good headlines

## How to create an outline for your blog post

## How to create a rough draft for your blog post

## How to proofread your work

## Where to publish your work

This is just a starting point and usually, I will edit this list as I start to revise my article. But I find it helpful to get some general talking points written down to help get started with the writing process. Some people will choose to do more elaborate outlines but for me, I like to keep it on the simple side.

How to write for your target audience

As you are writing your article, it is important to keep your target audience in mind. Think about what types of problems this audience is facing and how your article will help them. Also, think about what kind of content this audience is looking for. Maybe you are a seasoned developer and you are seeing a lack of high-quality articles for that target audience.

If you are writing for beginners, please make sure to not skip steps. Walk through the entire step-by-step process for tutorials so beginners can follow along with what you are doing. It is also helpful to include links for more learning resources, so they can continue to learn more about the topics you are writing about.

Another thing to consider is being mindful of making assumptions about the reader. If your articles are geared towards a more intermediate or advanced technical audience make sure to include prerequisites at the beginning. For example, I was working on a recent article about GraphQL and Apollo Server. This article was geared towards those already working with Apollo Server, so we weren't going to cover the basics. I added a small section at the beginning labeled prerequisites, that let people know I wasn't going to be covering the basics of Apollo Server and GraphQL so they would know what to expect in the article.

Lastly, I would suggest staying away from using phrases like "this is simple" or "it's easy, you just do this". What might seem simple to you might be difficult for someone else. So it is important to write articles that are inviting and welcoming to everyone.

How to create a rough draft for your blog post

It is important to remember that writing is a process. It will take you a few revisions for a blog post until it is considered to be the final draft and that is ok. That first draft is meant to be rough around the edges. It is better to focus on the general content than achieve a perfect draft the first time around.

When I am writing my articles, I start by getting all of my ideas on the page. Some ideas are good and some are removed later on. But I don't get hung on small details at this stage. My main goal is to just get something going.

There will be times when you will read a draft and not like a lot of what you wrote and that's completely normal. There have many times when I deleted whole sections from my article because it didn't fit or work at all. Sometimes you have to see what doesn't work to get to what will.

Don't worry about spelling errors at this stage

When I am working on my rough draft, I have tons of spelling errors. Here is an example of the first draft for the intro of this article:

For the past two years, I have been involved with tenical writing on variety of web development and career advices topics. LIke anything in life, writing is a process and it has taken me a lot of time to get comfortble with it. With every new blog post, I manage to not only learn smething new but I also get a little bit stronger as a writer. In this article, I will show you my personal writtting process and provide some tools that have helped me along the way.

There are tons of mistakes but the basic idea is there. This gives me something to work with and edit later on.

How to proofread your work

Once you have finished your first draft, I would suggest taking a small break before returning to edit it. This break will give you a fresh pair of eyes and allow you to spot errors better.

When I am editing my work, I will go through section by section and clean up the spelling and grammar mistakes. I like to use the Grammarly extension in VS Code to help with that.

I also use the Markdown Preview Enhanced extension and Markdown All in One extension to help with formatting and generating previews for the final draft.

I find it helps to read out loud the final drafts just to make sure that everything flows nicely and in a logical manner. You would be surprised what mistakes you can catch by reading your content out loud.

Where to publish your work

There are many free options to publish your work. Here are a few places to consider:

You might also consider creating a blog and building an audience there.

Conclusion

I hope you enjoyed this article and learned a few tips on how to get started writing technical articles. If you have an idea, jump in and get started writing today.

Beginner JavaScript Project: How to reverse a sentence and display it on screen

Jessica Wilkins — Wed, 23 Nov 2022 20:28:17 +0000

The best way to practice your JavaScript skills is to build small projects. In this article we will build a small app that takes in a sentence and reverses it.

We will be building out this project in CodePen. CodePen is a popular online code editor used by many developers around the world. It is free to use and you will need to create an account first and then fork the pen to get started. Here is the CodePen starter code you will need to fork that has all of the HTML and CSS.

Prerequisites
All of the HTML and CSS has been provided for you and we will not be covering any of that in this tutorial. This tutorial assumes that you have basic working knowledge of HTML and CSS. If you are interested in learning about HTML and CSS, then I suggest you go through freeCodeCamp's Responsive Web Design Course.

The basic functionality behind the reverse a sentence project
Topics covered
Accessing HTML elements using JavaScript
Creating the reverse sentence button functionality
- Adding an event listener to the Reverse Sentence button
- Accessing the value from the input element
- Adding an alert for users that do not provide an input
- Reversing the sentence using the split, reverse, and join methods
- Displaying the reversed sentence and working with template strings
- Resetting the input value after the result is displayed on the page
Conclusion

The basic functionality behind the reverse a sentence project

When you open up the CodePen starter code, you should see this result.

We want to build an app where a user inputs a sentence and clicks on the "Reverse Sentence" button, and the reversed sentence is displayed on the screen.

If the user clicks on the "Reverse Sentence" button without providing an input, then an alert with display asking them to provide a sentence.

Topics covered

Here is the complete list of topics covered in this project. You can click on any of the topics and it will take you to an article or MDN link to learn more.

Accessing HTML elements using JavaScript

Our application has three main HTML elements that we need access to in our JavaScript file. We need access to the input which contains the value for the user's sentence. We need access to the button which will be used to display the result when clicked on. And we also need access to the empty paragraph element which will display the result.

There are a few ways to access elements using JavaScript. In this project we are going to use the getElementById method. This method will access the HTML element that matches the id that we specify. Since id names have to be unique in an HTML document, we can be certain that we are getting back the correct element.

Here is the basic syntax for the getElementById method:

document.getElementById(id);

Let's first start by accessing the input which has an id of user-sentence.

document.getElementById("user-sentence");

We want to be able to assign that to a variable so we can use it later on in our program. We are going to create a const variable called userSentence and assign it the document.getElementById("user-sentence"). We are using the const keyword here because this const variable will not be re assigned.

const userSentence = document.getElementById("user-sentence");

If you are curious on what this document.getElementById("user-sentence") returns, then I would suggest using console.log like this:

const userSentence = document.getElementById("user-sentence");
console.log(userSentence);

Note: To access the console in CodePen, click on the console button in the bottom left hand corner of the screen

You can use console.log to print messages to the console output. This method comes in handy when you need to understand what your code is doing.

Now that we understand how to use console.log, we can remove that line from our program.

The next steps would be to access the paragraph element with the id of reversed-str-result. We can use the getElementById method again and assign it to a variable called reversedStrElement.

const reversedStrElement = document.getElementById("reversed-str-result");

The last element we need access to would be the button with the id of reverse-str-btn. We can use the getElementById method again and assign it to a variable called reversedStrBtn.

const reversedStrBtn = document.getElementById("reverse-str-btn");

Your first three lines of code inside the JavaScript section should look like this:

const userSentence = document.getElementById("user-sentence");
const reversedStrElement = document.getElementById("reversed-str-result");
const reversedStrBtn = document.getElementById("reverse-str-btn");

Creating the reverse sentence button functionality

When the user clicks on the "Reverse Sentence" button, we want to display the reversed sentence on the screen. We need to start by using the addEventListener method.

Adding an event listener to the Reverse Sentence button

The addEventListener is used to detect events in your program and execute a function when that event has occurred. The event that we are listening for is the click event to represent when a user clicks on a button.

Below the const variables, let's add an event listener to our reversedStrBtn.

reversedStrBtn.addEventListener("click", () => {
  // the rest of our functionality will go here
});

We can test this out by adding a console.log that will print the message "This button was clicked".

reversedStrBtn.addEventListener("click", () => {
  console.log("This button was clicked");
});

Open up your console and click on the button. You should see the following result:

Now that we know our button is working, we can go ahead and remove that console.log.

reversedStrBtn.addEventListener("click", () => {
  // the rest of our functionality will go here
});

Accessing the value from the input element

We need to be able to get the user's input so we can successfully reverse it and display it on the screen. We can accomplish this by adding .value to our userSentence variable.

Inside the function for our event listener, let's add a console.log for userSentence.value.

reversedStrBtn.addEventListener("click", () => {
  console.log(userSentence.value);
});

Open up your console, type in a sentence and click on the "Reverse Sentence" button to see the value in the console.

We can remove that console.log and assign that user value to a const variable called userValue.

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
});

Adding an alert for users that do not provide an input

Before we can start reversing a string, we need to check if the user provides a value.

Below the userValue variable, we need to add an if statement. An if statement is a type of conditional statement that will run a block of code if the condition is true.

Here is the basic syntax for an if statement:


if(/*condition is true*/){
    // run this code here
}

For our condition, we want to check if the user value is an empty string. Empty strings in JavaScript are considered falsey values. In if statements, falsey values are coerced to false. We want to use the ! operator which reverses the boolean value (ex. true is now false, and false is now true).

This is what our if will look like:

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;

  if (!userValue) {
    // run this code here if condition is true
  }
});

The !userValue is basically saying run this code in the if statement if userValue is not false. If you don't feel comfortable with the ! operator, then you could rewrite your if statement like this:

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
  if (userValue === "") {
    // run this code here if condition is true
  }
});

Inside the if statement, we want to add an alert to let users know that they need to provide a sentence. Below that alert, we need to add the return statement because we want to exit our function if the user does not provide an input.

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
  if (!userValue) {
    alert("Please provide a sentence");
    return;
  }
});

Click on the "Reverse Sentence" button without providing an input to see the alert.

Reversing the sentence using the split, reverse, and join methods

There are many different ways to reverse a string. In this project we are going to use three built in JavaScript methods.

The first step is to take our userValue and split that into individual characters. We can use the split method which takes in a string and creates an array of characters.

Add a console.log below our if statement for the split method.

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
  if (!userValue) {
    alert("Please provide a sentence");
    return;
  }
  console.log(userValue.split(""));
});

Open up the console, provide an input and click on the "Reverse Sentence" button to see the console results.

Next, we want to take that array of characters and reverse it using the reverse method.
Note: I am using a method called chaining here which is used to chain multiple methods together

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
  if (!userValue) {
    alert("Please provide a sentence");
    return;
  }
  console.log(userValue.split("").reverse());
});

Open up the console, provide an input and click on the "Reverse Sentence" button to see the console results.

Lastly, we need to convert that array of characters back into a string. We can use the join method to accomplish this.

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
  if (!userValue) {
    alert("Please provide a sentence");
    return;
  }
  console.log(userValue.split("").reverse().join(""));
});

Open up the console, provide an input and click on the "Reverse Sentence" button to see the console results.

We can remove the console.log and assign the reversed sentence to a const variable called reversedSentence.

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
  if (!userValue) {
    alert("Please provide a sentence");
    return;
  }
  const reversedSentence = userValue.split("").reverse().join("");
});

Displaying the reversed sentence and working with template strings

Now that we have the reversed sentence, we want to be able to display that result on the screen. We can use what are called template strings(or template literals) to inject variables inside strings. Template strings use backticks instead of double("") or single quotes('').

Here is what our template string will look like:

`Reversed sentence: ${reversedSentence}`;

We want that value to display in the reversedStrElement which represents the empty paragraph element in our HTML document. We can use the innerText method to render the reversed sentence on the page.

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
  if (!userValue) {
    alert("Please provide a sentence");
    return;
  }
  const reversedSentence = userValue.split("").reverse().join("");
  reversedStrElement.innerText = `Reversed sentence: ${reversedSentence}`;
});

Resetting the input value after the result is displayed on the page

When the result is displayed on the page, it would be nice if the input value would clear out. We accomplish this by assigning an empty string to the userSentence.value.

reversedStrBtn.addEventListener("click", () => {
  const userValue = userSentence.value;
  if (!userValue) {
    alert("Please provide a sentence");
    return;
  }

  const reversedSentence = userValue.split("").reverse().join("");
  reversedStrElement.innerText = `Reversed sentence: ${reversedSentence}`;
  userSentence.value = "";
});

Now you can test out your project with a variety of sentences and should see the reversed results.

Here is the entire code for our project. Here is the final working result.

Conclusion

I hope you learned a lot with this beginner JavaScript project. For more JavaScript projects like these, please check out the following article:

40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS

Beginner JavaScript Tutorial: How to build your own Mad Libs game

Jessica Wilkins — Sun, 20 Nov 2022 18:21:31 +0000

When you are learning JavaScript, it is really important to continually practice your skills and build projects along the way. That is going to help you solidify your knowledge and make you a stronger developer.

In this article, I will walk you through how to create your own Mad Libs using HTML, CSS and JavaScript. Mad Libs is a popular word game where you have an existing piece of text with blank spaces and you ty to fill in those blanks with verbs, nouns and adjectives. Usually the outcome produces some sort of wacky or funny result.

Our goal with this project is to learn about a few different JavaScript concepts and practice some concepts that you have probably worked with before in the past. When you finish the tutorial, I advise to play around with it and expand on it to make it your own. Feel free to create your own styles for this project or add new features.

We will be building out this project in CodePen. CodePen is a popular online code editor used by many developers around the world. It is free to use and you will need to create an account first and then fork the pen to get started. Here is the pen you will need to fork that has all of the HTML and CSS.

Topics covered
The basic JavaScript functionality for the Mad Libs game
Accessing HTML elements using JavaScript
Declaring variables using the let keyword
Adding addEventListeners for the onchange events
Adding functionality to the Generate Mad Lib button
- Creating a Mab Libs text array
- How to select a Mad Lib sentence at random using Math.random and Math.floor
- Adding an alert to display when users click on the button without making selections
- Displaying the Mad Libs result on the page
- Testing out the generateMadLibBtn event listener
Adding a reset function for the user selections
Conclusion

Topics covered

Here is a list of all of the JavaScript and Web API topics that we will cover in this tutorial. Each topic has a link to a helpful article or MDN page if you are interested in learning more.

The basic JavaScript functionality for the Mad Libs game

When you open up the pen, you should see the following output.

When a user chooses a name, location, verb and food item and clicks on the Generate Mad Lib button, the game should return a text result with their selections.

If the user does not provide all four selections and clicks on the Generate Mad Lib button, then we will show them an alert box.

Accessing HTML elements using JavaScript

Our project has four select elements and we need to be able to access each of those elements using JavaScript. The reason why we need access to those HTML elements, is because we want to have access to the user's selections so we can show them in the final result.

Here is the basic syntax for the getElementById method:



document.getElementById(id);

The first select element we want to access is the one with the id of people-dropdown.

Add this line of code to the top of your JavaScript section in CodePen.



document.getElementById("people-dropdown");

If you are curious on what this method returns, then I would suggest using console.log like this:



console.log(document.getElementById("people-dropdown"));

Note: To access the console in CodePen, click on the console button in the bottom left hand corner of the screen

You can use console.log to print messages to the console output. This method comes in handy when you need to understand what your code is doing.

Now that we have seen what the getElementById method returns, we can remove that console.log and assign the document.getElementById("people-dropdown") to a variable to use later on. We are going to use the const keyword here because this const variable will not be re assigned.

Your first line of the project should look like this:



const peopleDropdown = document.getElementById("people-dropdown");

Just below that line of code, we want to access the other select elements and assign them to const variables.

Add these lines of code here:



const verbsDropdown = document.getElementById("verbs-dropdown");
const locationDropdown = document.getElementById("location-dropdown");
const foodDropdown = document.getElementById("food-dropdown");

Next, we need to access this <p id="madlib-text"></p> element which is responsible for displaying the Mab Lib results on the page.

We can access that element using the getElementById method again like this:



const madLibTextResult = document.getElementById("madlib-text");

The last HTML element that we need to access is the "Generate Mad Lib" button.

We can access that element using the getElementById method again like this:



const generateMadLibBtn = document.getElementById("generate-madlib-btn");

Your first six lines of JavaScript code should look like this:



const peopleDropdown = document.getElementById("people-dropdown");
const verbsDropdown = document.getElementById("verbs-dropdown");
const locationDropdown = document.getElementById("location-dropdown");
const foodDropdown = document.getElementById("food-dropdown");
const madLibTextResult = document.getElementById("madlib-text");
const generateMadLibBtn = document.getElementById("generate-madlib-btn");

Declaring variables using the let keyword

We have already started to work with the const keyword which represents a read-only and immutable variable. This means that we can not re assign the value like this:



const firstName = "Jessica";

// this is not allowed and will return an error
firstName = "Nancy";

But there will times where we will need to re assign a value. That is where the let keyword comes in. When you declare variables using let, then you are allowed to assign new values to them like this:



let firstName = "Jessica";

// this is allowed and firstName now holds the value of Nancy
firstName = "Nancy";

In our program, we have four variables that represent the user selections: person, verb, site, and food.

Just below our const declarations, we will need to add these lines of code:



let person;
let verb;
let site;
let food;

We are going to assign values to these variables later on in the code.

Adding addEventListeners for the onchange events

A large part of this program is having the ability to detect when a user has selected a choice from one of the given dropdowns and save that value to a variable. In JavaScript, there are methods that you can use to detect when a user has done something in your program.

The addEventListener is used to detect events in your program and execute a function when that event has occurred. The event that we are listening for is the change event to represent when a user makes a selection from the dropdown.

Let's start by adding an event listener for the peopleDropdown variable.



peopleDropdown.addEventListener("change" /*function goes here*/);

To test out our event listener, let's add an arrow function to log to the console "event fired".
Note: Arrow functions in JavaScript are another way to write function expressions.



peopleDropdown.addEventListener("change", () => console.log("event fired"));

In CodePen, open up your console, choose one of the names from the people dropdown menu and you should see the message "event fired" show up in the console.

Now, that we know our event listener is working we now need to focus on getting the name that the user has chosen. We can start by working with the Event interface. The Event interface represents a list of events that can happen in the DOM(Document Object Model) and it contains its own properties.

In our case, we are interested in getting the person's name from the select element so we can use event.target.value. Note: A lot of times, you will see people use e.target.value too.

The value in e.target.value corresponds with the value attributes from the option elements in our HTML here.



<option value="Susie">Susie</option>
<option value="Zac">Zac</option>
<option value="Amar">Amar</option>
<option value="Naya">Naya</option>
<option value="Ada">Ada</option>

Let's modify our function to log out the event. We are going to add the parameter of e to our arrow function and console.log(e.target.value).



peopleDropdown.addEventListener("change", (e) => console.log(e.target.value));

Now when you select a name from the people dropdown list, you should see that name in the console.

Let's remove that console.log and instead assign the e.target.value to the person variable we created earlier.



peopleDropdown.addEventListener("change", (e) => (person = e.target.value));

Let's finish this section out by adding event listeners for the rest of the dropdown menus.



peopleDropdown.addEventListener("change", (e) => (person = e.target.value));
verbsDropdown.addEventListener("change", (e) => (verb = e.target.value));
locationDropdown.addEventListener("change", (e) => (site = e.target.value));
foodDropdown.addEventListener("change", (e) => (food = e.target.value));

Adding functionality to the Generate Mad Lib button

Now that we have the change events setup, we now need to focus on the button functionality that is responsible for generating the new mad lib when the user clicks on the button.

The first step is to create a new event listener for the generateMadLibBtn variable that will listen for click events.



generateMadLibBtn.addEventListener("click", () => {
  // our main button functionality will go here
});

To test our new click event, let's log to the console.log a message that says "this button was clicked".



generateMadLibBtn.addEventListener("click", () => {
  console.log("this button was clicked");
});

You can test this out by opening up your console and clicking on the button to see this new message.

We can remove that console.log because we know that this click event is working.



generateMadLibBtn.addEventListener("click", () => {
  // our main button functionality will go here
});

Creating a Mab Libs text array

Part of the Mab Libs game is to have an existing piece of text to work with. For our program, we are going to create three sentences and add our four variables (person, verb, site, and food) into each of those sentences.

We can use what are called template strings(or template literals) to inject variables inside strings. Remember that these variables represent the values for each of the user's selections from the dropdown menus. When the user clicks on the button, then the real values will be used inside these sentences.

To use template strings, you will need to use backticks instead of double("") or single('') quotes.

Here is what our three sentences will look like:



`${person} was ${verb} in ${site} and had ${food}.`
`While ${verb} in ${site}, ${person} had ${food}.`
`${person} loves to travel to ${site} and eat ${food} while ${verb}.`

We want to be able to store these sentences somewhere so we can use them later. We can use an array which is a list of ordered values.

Here is the basic syntax for arrays:



[value1, value2, value3];

Inside the function for our click event, let's create a variable called madLibsArr and store our three sentences in there.



generateMadLibBtn.addEventListener("click", () => {
  const madLibsArr = [
    `${person} was ${verb} in ${site} and had ${food}.`,
    `While ${verb} in ${site}, ${person} had ${food}.`,
    `${person} loves to travel to ${site} and eat ${food} while ${verb}.`,
  ];
});

How to select a Mad Lib sentence at random using Math.random and Math.floor

When the user clicks on the "Generate Mad Lib" button, we want a random sentence from our list to show up each time to help keep the game more interesting. We can achieve this result by getting a random index value back each time the button is clicked. You can access array values by using bracket notation and the index number like this:



//Arrays are zero based indexed which means that the first value of any array will be `arr[0]`.

madLibsArr[0];
// this will return the first sentence in the array: ${person} was ${verb} in ${site} and had ${food}.

The first step is to work with the Math.random() function. Math.random() will generate a pseudo random number between 0 and just less than 1.

Let's test this by adding a console.log just below the madLibsArr.



console.log(Math.random());

Open up the console and click on the "Generate Mad Lib" button to see the different random numbers it generates.

Our goal is to get a random number of either 0, 1, or 2 so we can use one of those index numbers in our madLibsArr. But right now we are getting back results of 0.154 or 0.762.

We can multiply Math.random() by the length of the madLibsArr to get random numbers between 0 and less than 3. The length property is used to get the total number of items in an array.

Here is the basic syntax for the length property:



arr.length;

Let's modify our console.log to multiple Math.random() by the length of the madLibsArr



console.log(Math.random() * madLibsArr.length);

Open up the console and click on the "Generate Mad Lib" button to see the different random numbers it generates. You should now see numbers between 0 and less than 3.

This modification brings us closer to our goal of generating a random number of either 0, 1, or 2 but we are still working with decimal values. We can fix this by using Math.floor which will round the value down to the nearest whole integer.

Let's modify our console.log to wrap our Math.random() * madLibsArr.length inside the Math.floor method.



console.log(Math.floor(Math.random() * madLibsArr.length));

Open up the console and click on the "Generate Mad Lib" button to see the different random numbers it generates. You should now see numbers of 0, 1 or 2.

The final step, is to assign this random number to a const variable called randomIndex so we can use it later on in a our code.

Remove the console.log and add the following line of code underneath the madLibsArr.



const randomIndex = Math.floor(Math.random() * madLibsArr.length);

Adding an alert to display when users click on the button without making selections

If the user clicks on the "Generate Mad Lib" button without making selections from the dropdowns, then we want to display a message to let them know that the program requires them to select an option from all four of the dropdown menus.

We first need to add an if statement below the randomIndex variable. An if statement is a type of conditional statement that will run a block of code if the condition is true.

Here is the basic syntax for an if statement:




if(/*condition is true*/){
    // run this code here
}

For the condition in our if statement, we want to check if any of the four variables(person, verb, site, and food) is undefined because that means the user has not made a selection from the dropdown. undefined means that a variable has not been assigned a value.

One way to write this condition would be to use the strict equality and OR operators like this:



if (
  person === undefined ||
  verb === undefined ||
  site === undefined ||
  food === undefined
) {
  // run this code here
}

While this would technically work, it is a little repetitive and there is another method we could use instead. The arr.some() method takes in a function and checks if any of the elements in the array will returns true. We can use this method to check if any of the four variables returns undefined.

Here is the modified condition using the some method:



if (
  [person, verb, site, food].some(
    (userSelection) => userSelection === undefined
  )
) {
  // run this code here
}

Inside the {} for the if statement, we can add an alert to display a message to the user.



if (
  [person, verb, site, food].some(
    (userSelection) => userSelection === undefined
  )
) {
  alert("Please choose a selection from each of the dropdowns");
}

Let's test this out by clicking on the "Generate Mad Lib" button without making any selections from the dropdown menus.

The last piece we need to add is a return statement below the alert function. We need to add this return statement because we want to exit our function if the user does not make any selections.

Here is the entire if statement:



if (
  [person, verb, site, food].some(
    (userSelection) => userSelection === undefined
  )
) {
  alert("Please choose a selection from each of the dropdowns");
  return;
}

Displaying the Mad Libs result on the page

The madLibTextResult represents the paragraph element in our HTML that will display the Mad Libs result. We can use the innerText method to render the Mad Libs text with the user's selections on the page.



madLibTextResult.innerText = /*mad libs text goes here*/

When it comes to the Mad Libs text, we want to use the randomIndex variable that we created earlier, to randomly pull a sentence from our madLibsArr.



madLibTextResult.innerText = madLibsArr[randomIndex];

Testing out the generateMadLibBtn event listener

Here is what the entire event listener should look like:



generateMadLibBtn.addEventListener("click", () => {
  const madLibsArr = [
    `${person} was ${verb} in ${site} and had ${food}.`,
    `While ${verb} in ${site}, ${person} had ${food}.`,
    `${person} loves to travel to ${site} and eat ${food} while ${verb}.`,
  ];

  const randomIndex = Math.floor(Math.random() * madLibsArr.length);

  if (
    [person, verb, site, food].some(
      (userSelection) => userSelection === undefined
    )
  ) {
    alert("Please choose a selection from each of the dropdowns");
    return;
  }
  madLibTextResult.innerText = madLibsArr[randomIndex];
});

Test out your application and you should be able to make four selections and see the Mad Libs results.

Adding a reset function for the user selections

We now have a working program but it would be nice if every time we generated a Mad Lib, the text would display and the dropdowns would default to their original state like this:

We can add a reset function to accomplish this result.

Below the madLibTextResult.innerText, invoke a function called resetValues.



generateMadLibBtn.addEventListener("click", () => {
  const madLibsArr = [
    `${person} was ${verb} in ${site} and had ${food}.`,
    `While ${verb} in ${site}, ${person} had ${food}.`,
    `${person} loves to travel to ${site} and eat ${food} while ${verb}.`,
  ];

  const randomIndex = Math.floor(Math.random() * madLibsArr.length);

  if (
    [person, verb, site, food].some(
      (userSelection) => userSelection === undefined
    )
  ) {
    alert("Please choose a selection from each of the dropdowns");
    return;
  }
  madLibTextResult.innerText = madLibsArr[randomIndex];
  resetValues();
});

Above the generateMadLibBtn event listener, create a new function called resetValues.



const resetValues = () => {
  // reset functionality will go here
};

The goal for this resetValues function is to set all of the dropdowns to their original state of "Please select an option". We can use the selectIndex property to set each of the dropdowns to the first option in the select list which will be an index of 0.



const resetValues = () => {
  peopleDropdown.selectedIndex = 0;
  verbsDropdown.selectedIndex = 0;
  locationDropdown.selectedIndex = 0;
  foodDropdown.selectedIndex = 0;
};

Then we also want to set all of four variables(person, verb, site, and food) back to undefined.



const resetValues = () => {
  peopleDropdown.selectedIndex = 0;
  verbsDropdown.selectedIndex = 0;
  locationDropdown.selectedIndex = 0;
  foodDropdown.selectedIndex = 0;
  person = undefined;
  verb = undefined;
  site = undefined;
  food = undefined;
};

Now you can test out your function and you should see that each time you create a new Mad Lib, the select dropdowns will return to their default states.

Here is the entire code for our project. Here is the final working result.

Conclusion

I hope you learned a lot with this beginner JavaScript project. For more JavaScript projects like these, please check out the following article:

40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS

7 common mistakes new contributors make in Open Source Software

Jessica Wilkins — Sun, 13 Nov 2022 03:50:17 +0000

Contributing to open source software is a great way to make a difference in the community and learn how to work on a team. As an open source maintainer, I love to work with new contributors and see the community grow in a positive way. But as I start to get more involved with open source projects, I have noticed a few common mistakes made by new contributors.

In this blog post, I will go over 7 commonly made mistakes by new contributors in open source projects.

Ignoring the contributing documentation
Picking up issues that are not available
Not reviewing their own work before reviews
Creating PR's for features that weren't asked for
Creating non descriptive issues
Creating non descriptive PR titles
Ignoring pull request and issue templates
Conclusion

Ignoring the contributing documentation

The purpose of the contributing documentation is to help onboard developers that are interested in contributing to a new project. Strong open source projects will have well defined contributing documentation which will include the following items:

how to setup the project locally
commit message conventions
pull request guidelines
types of contributions that will be accepted

It is important that all developers read through this documentation so they will understand what maintainers are looking for. If you skip the contributing documentation, then you will probably end up creating a PR that wasn't needed or asked for. That usually leads to the maintainers having to close the PR.

If you find a project that you interested in contributing to, please take the time to read through the README and contributing documentation. If you have any questions, reach out to the maintainers and they will be happy to help you.

Picking up issues that are not available

One of the issues that I ran into during Hacktoberfest was having developers pick up issues that were already assigned to someone else. That contributor would then open a PR and ask for a review which resulted in me closing it.

I understand that as a beginner sometimes it is hard to find issues that you can work on. But if the issue is not available, do not start working on it hoping that the maintainers will accept your PR over someone else that was assigned to the issue.

If you are struggling to find good first issues, then I would suggest looking into these resources:

Not reviewing their own work before reviews

One of the things I noticed while maintaining repositories during Hacktoberfest, is that a lot beginners didn't look at the PR they were submitting for review. I found a good amount of spelling mistakes, syntax errors or features that weren't tested or working correctly.

Before you request a review from a maintainer, make sure to do a quick review on your own work and run those changes locally. You would be surprised by the amount of bugs and mistakes that accidentally slip through when you are initially working on an issue. But that second look at the PR can help you find those mistakes and make the PR even better.

Creating PR's for features that weren't asked for

As a maintainer, there were a few instances of developers creating PR's for features that we were not looking to add in the project. These developers meant well but unfortunately they had wasted their time making contributions that ended up getting closed.

If you have a new idea for a feature, please do not start working on and wip up a PR. Instead you should create a new issue for your feature request. At that point, a maintainer will get back to you and let you know if they want to proceed with your feature or not.

Creating non descriptive issues

When you are creating an issue, it is important that you provide as much detail as possible so the maintainers know how to best respond to you. For example, if you find a bug on the site, make sure to include details on how to reproduce the bug, as well as links, screenshots or videos when applicable. That will give the maintainer an opportunity to troubleshoot the issue and determine what the next best course of action is.

Creating non descriptive PR titles

One of the issues that I run into a lot as a maintainer are PR's with vague and general titles. Titles like "Updating Readme" or "Fixing bug" do not help the maintainer understand what you trying to accomplish with your PR. It is important that you have short descriptive titles that effectively communicate the changes you would like to make.

Ignoring pull request and issue templates

A lot of open source projects will have issue and PR templates setup to help ensure that contributors provides all of the necessary information. Issue templates will usually be broken up into different categories like Bugs, Features, Documentation, etc. As a contributor, it is important that you choose the appropriate issue template and fill out all of the required fields so maintainers will know how to help you.

Here is an example of a PR template:

# Description

<!-- Please include a detailed summary of the changes made. Also please link the issue that this PR is fixing. -->

Fixes # (issue)

<!-- Please place an x in the [ ] to check off the type of change for this PR -->

## Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Chore items (this includes basic clean up of files, or updates to packages)
- [ ] Updates to documentation

<!-- Please make sure to go through the entire checklist before requesting a review. Place an x in the [ ] to check off all of the items completed -->

## Checklist

- [ ] I have a descriptive title for my PR
- [ ] I have linked the issue to this [PR](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue)
- [ ] I have run the project locally and reviewed the code changes
- [ ] My changes generate no new warnings

As a contributor, it is important that you follow all of the checklist items to help ensure that your new changes do not accidentally break another part of the application.

Conclusion

Getting involved with Open Source software is a great way to starting work on a team and contributing in a meaningful way to real world projects. While there is a lot of learn with open source, please be mindful of these 7 commonly made mistakes by new contributors.

If you have any more commonly made mistakes in open source, please reply below in the comments section.

Happy coding!

7 Tips to be a Successful Developer in a Remote Company

Jessica Wilkins — Tue, 17 May 2022 00:08:23 +0000

When the pandemic hit in March of 2020, most companies were forced to go remote and millions of workers had to learn how to work from home. Two years later, a lot people now prefer the work from home option, and many job seekers are looking for remote-only companies to work for.

For software developers, there are many advantages to working from home and still effectively working as a team to produce high quality results. But how can you be successful in a remote company?

In this article, I will provide 7 tips on what it takes to be a successful developer in a remote company.

Communication is key

It is now more important than ever to communicate effectively with your team. Now that everyone is working from home instead of being in one physical office, you have to be very conscious to reach out to teammates and share your progress on a project. In a physical office, you are surrounded by other co-workers all day, which makes it easier to walk over to someone's office and share what you have been working on. It also makes it easier to have impromptu meetings with other team members throughout the day.

But in a remote setting, it is very easy to become isolated and get carried away with work without reaching out to anyone all day. This becomes an issue for your team, because now they are no longer keeping up to date on the latest changes you have been contributing to the project.

My tip would be to post periodic updates throughout the day of what you have been working on. If your company is using something like Slack or another chat server, make sure to post a detailed update on what you have been up to the past few hours.

Here is an example of one of the status updates I would post to my team.

Status update:

finished making changes to xyz case study and put it up for review
reviewed a couple of PRs
ran accessibility audits for the homepage and working on increasing the performance score

I would usually post this in the middle of the day to update the team on what I have been working on. I also try to ask questions throughout the day to ensure that I don't get blocked on a particular issue for to long. This method of communication helps me stay connected with the team and helps my manager know where I am at in the project.

Find a separate space in your home just for work

When you are working in an office, there is a clear separation between work and home. This makes it easier to end your day and leave your work at the office. But with remote work, sometimes these lines between work and home become a little bit blurry. This is why it is important to designate a separate work space in your home.

In my situation, I have a small desk in another room where I do all of my work. That space is only used Monday through Friday for work purposes. I have found that by creating a work space, it allows me to be in the moment and fully concentrate on my duties. Then at the end of the day, I logout out of everything and leave the work space just like I would leave a physical business. That has given me freedom to relax in my home when I am not working and fully recharge for the next day.

I understand that everyone's living situation is different, and you might not have room for a designated work area. In those cases, do the best you can to carve out some space in your living situation just for work. The more you can do to separate home and business, the more productive you will be at work.

Set consistent work hours

When you are working in an office, you have set hours for when you are going to be there. It might be 9-5 or 8-3 with breaks throughout the day. But when you are working from home, it is very easy to work without a set schedule and put in more time outside of the standard work hours. This can quickly lead to burnout which is a huge issue within the developer community.

It is really important to set a consistent work schedule so your team knows when you are available, and when you are off work. This also forces you to work within a time frame which will lead to better focus, time management and productivity.

I have personally found that setting that time frame from 8-5 with breaks helps me structure my day better and get more done than if I had an open schedule.

Take breaks throughout the day

Developer health is another huge issue within the community. Many developers, including myself have gone for hours hunched over their computers trying to get something to work. In these situations, it is very easy to lose track of time and develop back, neck, shoulder, and eye problems.

One of the key advantages of working from home is being able to take breaks and leave your work space. Take ten minute breaks throughout the day and make sure to walk around, stretch, go outside, and drink water. Taking breaks from the computer will give your body and brain a chance to rest and recharge.

When I first started working remotely, I would be glued to the computer for hours at a time. But I quickly felt the negative health effects and started becoming more intentional about taking breaks. Now, I have developed a healthier work situation and can see the difference in the quality of work I am producing.

Dress appropriately for important meetings

We all enjoy the relaxed dress code that often accompanies working from home. In an office, you will typically be in a more work appropriate attire especially when it comes to meetings with clients. But when you are at home, it is very easy to work in some sweatpants and a t shirt.

If you don't have any meetings that day, then coding in your casual attire is fine. But if you are meeting with clients or interviewing remotely, it is important to dress appropriately. Remember that it is still a business and you want to be as professional as possible, even in a remote setting.

Avoid mixing personal tasks and work tasks

When you are in an office, you don't worry about personal chores like doing laundry or taking the trash out. But when you are working from home, it is very easy to get distracted and mix personal tasks with work tasks. It is very important that while you are working, you are focused on work. Then during breaks, you can take care of personal items.

In my situation, I make sure to finish up the task I was working on and then take a break to put a load of laundry on or take care of another personal chore. There are definitely times where something has come up and I will make sure to communicate that with the team so they know I will be unavailable for a certain amount of time. But just try to do the best that you can separating personal tasks and issues from your work tasks.

Time management and structuring your day

In order to work productively, it is important to plan out your day as best you can and structure your time accordingly. For example, as I am writing this blog today, I made sure to set aside time for writing the first draft, revising it and submitting it for review. During that time block, I am not focused on other PR's or other work responsibilities. That ensures I am focused 100% on writing a high quality article.

Once I complete a large task, then I make sure to take a break, hydrate, walk around and eat something. That allows me to energize and gear up for the next task in my day. I found that breaking up my day into manageable tasks has provided me the opportunity to focus and produce good work.

Conclusion

Those are my 7 tips on what it takes to be a successful developer in a remote company. I encourage you to give each of those tips a try and see how it affects your work productivity.

This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdot.co

How to implement a dark to light mode feature in your React/Sass project

Jessica Wilkins — Mon, 16 May 2022 23:30:27 +0000

There are many ways to implement a light/dark theme feature on your website. But how can you create a clean solution that will be easy to use and maintain overtime?

In this article, I will show you how to create a light/dark theme toggle functionality using React and Sass.

I have created a demo project based on the popular TV show Rick and Morty. There are a couple of pages dedicated to the main characters all designed in dark theme.

I will walk you through how to add light theme styles, and how to toggle between the two themes. You can then use this light theme solution in your own projects.

Prerequisites
Installation steps for the Demo App
How does the light/dark theme toggle work?
How to install the useDarkMode hook
Creating a custom useTheme hook
Creating the light/dark theme toggle button
Adding the useTheme hook to all the pages
How to add a Sass map for the light/dark theme styles
Applying the themes to the individual stylesheets

Prerequisites

This article assumes you have a basic fundamental knowledge of React, Sass, and the command line.

This demo project is using Yarn, so it is recommended that you install Yarn.

Installation steps for the Demo App

Clone the project



git clone https://github.com/jdwilkin4/Light-Dark-Theme-Starter-Code.git

cd into the Light-Dark-Theme-Starter-Code directory



cd Light-Dark-Theme-Starter-Code

Install the dependencies



yarn install

Start the local server



yarn start

You should see the homepage with two links that will lead you to the Rick and Morty pages.

How does the light/dark theme toggle work?

We will be creating a button where users can select if they prefer dark or light mode, and this button will toggle between the two styles. By default, the initial setting will be for dark mode.

When the user refreshes the page, their theme preference will be saved in local storage.

How to install the useDarkMode hook

We will be using an npm package called use-dark-mode which is a custom hook used to implement the toggle functionality between light and dark mode.

Keep your server running, open up a new tab in the terminal, and run the command yarn add use-dark-mode.

Creating a custom useTheme hook

The goal of this hook is to return a string value of either light-mode or dark-mode based on the current mode we are in. We will then use this string value as a class and apply it to the JSX elements.

Open up your code editor, locate the src folder and create a new folder called utils. Inside the utils folder, create a new file called useTheme.js.

At the top of your useTheme.js file, include the React and useDarkMode imports.



import React from "react";
import useDarkMode from "use-dark-mode";

Underneath those imports, add these two variables:



const lightTheme = "light-mode";
const darkTheme = "dark-mode";

Below the variable declarations, you will create the useTheme hook.



export const useTheme = () => {};

Inside the useTheme hook, we want to include the useDarkMode hook and assign it to a const variable called darkMode.



const darkMode = useDarkMode();

The return value for the useDarkMode() hook is an object, and one of the property names we are going to use is called value. The value property is a boolean which represents if dark mode is on or not.

Next, we want to add a new state variable and assign it the dark theme value.



const [theme, setTheme] = React.useState(darkTheme);

We are then going to add a useEffect hook and update the theme based on each time the mode changes.



React.useEffect(() => {
  setTheme(darkMode?.value ? darkTheme : lightTheme);
}, [darkMode.value]);

We are adding darkMode.value to the dependency array because we want it to only re-run the effect when the value changes on re-render.

Lastly, we want to return our theme.



return theme;

This is what the entire useTheme hook should look like.



export const useTheme = () => {
  const darkMode = useDarkMode();
  const [theme, setTheme] = React.useState(darkTheme);
  React.useEffect(() => {
    setTheme(darkMode?.value ? darkTheme : lightTheme);
  }, [darkMode.value]);

  return theme;
};

Creating the light/dark theme toggle button

Locate the src/components folder, and create a file ThemeBtn.js and a ThemeBtn.scss file.

Inside that file, add the imports for React, useDarkMode and useTheme.



import React from "react";
import useDarkMode from "use-dark-mode";
import { useTheme } from "../utils/useTheme";

Right underneath those imports, include your stylesheet for this button component.



import "../components/ThemeBtn.scss";

Now, we are going to create our Button component.



const ThemeBtn = () => {};
export default ThemeBtn;

Inside the ThemeBtn component, we are going to use the useDarkMode hook and set the value to true because we want the default to be set to dark mode.



const darkMode = useDarkMode(true);

We are also going to create a variable called theme and assign to it the useTheme hook.



const theme = useTheme();

Inside the return, we are going to create a button. Since darkMode is an object that has a property called toggle, we can use that in the onClick function to toggle between light and dark themes.

For the button text, we will create a ternary operator which will show the text of "Light mode" or "Dark mode" depending on the state of the theme.



return (
  <button className="btn-theme" type="button" onClick={darkMode.toggle}>
    {theme === "dark-mode" ? "Light mode" : "Dark mode"}
  </button>
);

In order to see our toggle button in action, we need to add it to one of the pages. Most people choose to add the toggle button to the navigation bar. For our demo project, we will add it to the App.js file.

Import the ThemeBtn into the App component, and add the <ThemeBtn /> just before the routes.



import ThemeBtn from "./components/ThemeBtn";
function App() {
  return (
    <>
      <ThemeBtn />
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="/rick" element={<RickSanchezPage />} />
        <Route path="/morty" element={<MortySmithPage />} />
      </Routes>
    </>
  );
}

You should now see the button in the browser. Try clicking on it and see the text change between light and dark mode.

Let's add some styling to our button.

Open up the ThemeBtn.scss file and add these styles for the btn-theme class.



@import "../styles/colors";

.btn-theme {
  background-color: $purple100;
  border: none;
  color: $grey100;
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  width: 150px;
  padding: 5px;
  text-align: center;
  margin: 0;
  cursor: pointer;

  &:hover {
    background-color: $purple200;
  }
}

Adding the useTheme hook to all the pages

We need to import the useTheme hook to all of our pages because we want to apply the dark and light mode classes to the JSX elements.

Inside the App.js file, import the useTheme hook.



import { useTheme } from "./utils/useTheme";

Inside the App component, create a variable called theme, and assign the hook to it.



const theme = useTheme();

Replace the empty React fragments with div elements, and apply the theme variable to the className.



<div className={theme}>
  <ThemeBtn />
  <Routes>
    <Route path="/" element={<Homepage />} />
    <Route path="/rick" element={<RickSanchezPage />} />
    <Route path="/morty" element={<MortySmithPage />} />
  </Routes>
</div>

For the Button.js file, import the useTheme hook, and create the theme variable like before. Then, add that variable to the className.



import { useTheme } from "../utils/useTheme";

export const Button = ({ text, path }) => {
  const theme = useTheme();
  return (
    <Link to={path} className={`btn ${theme}`}>
      {text}
    </Link>
  );
};

For the CharacterTemplate.js file, import the useTheme hook and create the theme variable like before. Then add that variable to the className for the div elements.



// here is the full JSX markup
<div className={theme}>
  <h1>{title}</h1>
  <Button text="Return Home" path="/" />
  <div className="flex-container">
    {characterInfo.map((character, id) => (
      <div key={id} className="character-container">
        <h2>{character.name}</h2>
        <img src={character.image} alt="character avatar" />
      </div>
    ))}
  </div>
</div>

How to add a Sass map for the light/dark theme styles

Inside the styles folder, open up the colors file and add the $grey200: #f5f1f1; variable.

This is what the complete colors file should look like.



$blue700: #1a1a40;
$blue600: #2c2c66;
$black: #000;
$grey100: #fdfcfc;
$grey200: #f5f1f1;
$purple100: #7a0bc0;
$purple200: #650c9d;

Inside the styles folder, create a new file called _light-dark-theme.scss.

At the top of your Sass file, import the colors file.



@import "./colors";

Then, we are going to create a new Sass map called themes.



$themes: ();

Inside the themes map, we are going to add individual maps for the background and text colors used for the light and dark themes.



$themes: (
  bgThemeColor1: (
    darkTheme: $blue700,
    lightTheme: $grey100
  ),
  bgThemeColor2: (
    darkTheme: $blue600,
    lightTheme: $grey200
  ),
  textThemeColor1: (
    darkTheme: $grey100,
    lightTheme: $black
  )
);

We are now going to create a mixin called styles with an argument called $mode. This mixin will be used later on in the dark-mode and light-modeclasses.



@mixin styles($mode) {
}

Inside the mixin, we are going to create an @each rule that will iterate through each key value pair in the themes map.



@each $key, $map in $themes {
}

The $key represents each of the background and text colors we created (Ex. bgThemeColor1). The $map represents each of the values.
For example:



  (
    darkTheme: $blue700,
    lightTheme: $grey100,
  )

Inside that @each rule, we are going to create another rule that iterates over each key/value pair for the individual maps.



@each $prop, $color in $map {
}

Inside that @each rule, we will create a condition that checks which mode we are in and applies the appropriate style to that class.



@if $prop == $mode {
  --#{$key}: #{$color};
}

The reason why we are adding the -- in front of the key, is because we want to reference these color variables in the individual stylesheets using CSS variable syntax.

For example:



var(--color)

This is what the complete mixin should look like.



@mixin styles($mode) {
  @each $key, $map in $themes {
    @each $prop, $color in $map {
      @if $prop == $mode {
        --#{$key}: #{$color};
      }
    }
  }
}

Below the mixin, we are going to add the light and dark theme styles to the appropriate classes using the @include rule.



.dark-mode {
  @include styles("darkTheme");
}

.light-mode {
  @include styles("lightTheme");
}

This is what the entire light-dark-theme file should look like.



@import "src/styles/colors";

$themes: (
  bgThemeColor1: (
    darkTheme: $blue700,
    lightTheme: $grey100,
  ),
  bgThemeColor2: (
    darkTheme: $blue600,
    lightTheme: $grey200,
  ),
  textThemeColor1: (
    darkTheme: $grey100,
    lightTheme: $black,
  ),
);

@mixin styles($mode) {
  @each $key, $map in $themes {
    @each $prop, $color in $map {
      @if $prop == $mode {
        --#{$key}: #{$color};
      }
    }
  }
}

.dark-mode {
  @include styles("darkTheme");
}

.light-mode {
  @include styles("lightTheme");
}

Applying the themes to the individual stylesheets

Inside the App.scss file, import the light-dark-theme file.



@import "./styles/light-dark-theme";

We are going to replace the background and text colors with the variables we created earlier.



body {
  background-color: var(--bgThemeColor1);
  color: var(--textThemeColor1);
  text-align: center;
}

If you test out the light/dark theme toggle button, you will notice that the background and text colors will change.

It would be nice if there were a gradual transition between the two colors. We can accomplish this by using the CSS transition property.



body {
  background-color: var(--bgThemeColor1);
  color: var(--textThemeColor1);
  text-align: center;
  transition: background-color 0.5s ease;
}

Inside the CharacterTemplate.scss file, import the light-dark-theme file.



@import "../styles/light-dark-theme";

Then replace the background and text colors with the CSS variables we created earlier.



  .character-container {
    color: var(--textThemeColor1);
    background-color: var(--bgThemeColor2);

Go to the browser and test out the light/dark theme button. You should be able to see both themes.

Conclusion

We have successfully created a light/dark theme solution using React and Sass.

You can implement this solution into your own projects and it will be easy to scale and maintain over time.

Here is the final demo project and source code.

Forem: Jessica Wilkins

How to Translate Open Source Contributions into Career Opportunities

Defining Your Career Goals

Finding Open Source Projects to Contribute to

Using the Highlights Feature to Track Your Contributions

Networking and Professional Development Opportunities Through Open Source

Conclusion

Join Virtual Coffee in the Healthy Habits for Happy Devs monthly challenge

Goals

Build a new habit

Practice a healthy habit

Weekly check-ins - Are you hitting your goals?

Who can participate?

How it works

Set your intentions

Start your habit and track your progress

Share your progress

Tips for forming healthy habits

Start small

Make it a schedule

Track your habits

Be kind to yourself and celebrate your wins

Conclusion

Additional Resources

How I overcame the fear of learning something new and embraced the joy of learning

Why was I scared in the first place?

Steps I took to break through the fear of learning new things

Does that fear still come up today?

Conclusion

Common mistakes that developers make on resumes

Table of Contents

Broken or unsecured links

Unprofessional email addresses

Lack of good project descriptions

Misspelling technology names

Spelling errors in general

Skill bars

Generic Personal statements

Unconventional formatting

Conclusion

Developer Health: Tips for dealing with workplace anxieties and imposter syndrome

Keep a record of your accomplishments

Talk through workplace anxieties with trusted friends and family

Talk with your manager

Conclusion

Should developers study 20 hours a week after work?

How does 20 hours of studying after work affect those with busy family lives?

Should junior developers spend 20 hours or more studying after work?

How does this 20 hours a week apply to more seasoned developers?

Conclusion

How to get started with technical writing - An inside look into my writing process

Table of contents

How to come up with ideas for writing

How to come up with good headlines

How to create an outline for your blog post

How to write for your target audience

How to create a rough draft for your blog post

Don't worry about spelling errors at this stage

How to proofread your work

Where to publish your work

Conclusion

Beginner JavaScript Project: How to reverse a sentence and display it on screen

Table of contents

The basic functionality behind the reverse a sentence project

Topics covered

Accessing HTML elements using JavaScript

Creating the reverse sentence button functionality

Adding an event listener to the Reverse Sentence button

Accessing the value from the input element

Adding an alert for users that do not provide an input

Reversing the sentence using the split, reverse, and join methods

Displaying the reversed sentence and working with template strings

Resetting the input value after the result is displayed on the page

Conclusion

Beginner JavaScript Tutorial: How to build your own Mad Libs game

Table of Contents

Topics covered

The basic JavaScript functionality for the Mad Libs game

Accessing HTML elements using JavaScript

Declaring variables using the let keyword