This is why having a routine is so important. Not just for the sake of ticking boxes, but because consistency has a great effect: one pull request builds into another, one comment turns into a conversation, one contribution creates an opening.

Let’s talk about how you can build a contribution habit that actually holds.

Here’s what we’ll cover:

• How to Build an Open Source Contribution Routine

  • 1. Define Your Motivation and Goals

  • 2. Choose the Right Projects

  • 3. Create a Consistent Schedule

  • 4. Engage With the Community

  • 5. Leverage Tools

  • 6. Take It to the Next Level With Structured Programs

• The Long-Term Value of Showing Up

How to Build an Open Source Contribution Routine

Starting to contribute to open source can feel overwhelming, but it becomes easier once you build a simple routine. With clear goals and steady habits, you’ll stay consistent and motivated. Here’s how to get started:

1. Define Your Motivation and Goals

Before you write your first line of code or fix your first typo, ask yourself: Why am I doing this?

People contribute to open source for many reasons. Some land new jobs, build businesses, or form partnerships with big companies. Others win prizes, gain recognition, or simply enjoy being part of a collaborative community.

For example, my friend Param joined the MLH Fellowship to grow as a software engineer by working alongside mentors and peers. Since then, his career has taken off.

Maybe you want to sharpen your technical skills, find mentorship, or give back to a project that helped you grow. Whatever your reason is, write it down and be clear about it.

Writing down your reason gives you direction and keeps you motivated. Then, turn that “why” into a measurable goal:

• Make one contribution per week

• Get comfortable with Python testing

• Join a community call once a month

Clear goals help you track progress and stay focused on your purpose.

2. Choose the Right Projects

It’s often better to start small. Rather than submitting your first pull request to a large, complex project, begin with easier tasks like fixing a typo or improving documentation.

This approach helps you understand the contribution process and gives you confidence to take on more involved issues later.

To find beginner-friendly tasks, you can search for your preferred programming language in the GitHub search bar, then select Issues from the left sidebar. Here’s what that looks like:

But manually checking each GitHub result for suitable issues can get overwhelming over time. To avoid burnout and save time, try using platforms like First Contributions, Up For Grabs, or CodeTriage. These platforms help you discover projects that are actively looking for contributors like you.

Here’s how each works:

Some tips for beginners:

• Pick something you're genuinely interested in. You're more likely to stay engaged and push through challenges if the project aligns with your passions or long-term goals.

• Choose projects that fit your current level but still offer room for growth. The sweet spot is where you're challenged enough to learn without feeling overwhelmed.

• Check for clear and active contribution guidelines. A well-documented contributing guide, readme, and issue tracker show that the maintainers care about helping contributors succeed.

• Look for projects that welcome newcomers. Explore how maintainers respond to issues and pull requests. A friendly, constructive tone in comments is a good sign that they value and support new contributors.

3. Create a Consistent Schedule

Open source doesn’t have to take over your nights or weekends. It just needs a dedicated time slot that fits your routine, whether it’s 30 minutes after dinner, Saturday mornings with coffee, or one task every Sunday night.

Even if you’re working on a big problem, you don’t have to spend hours in one go on it. Just keep track of it and do it at your own pace. There might also be a deadline for your issue, depending on how you found it.

Use time-blocking or the Pomodoro technique to stay focused during that time. Track your progress with a checklist, GitHub activity graph, or Notion board. A visible streak can keep your motivation strong and help you build lasting momentum.

4. Engage With the Community

At the end of the day, humans are running the open-source projects, from maintainers to contributors. The more you interact, the easier it becomes to navigate the project and find meaningful ways to contribute.

Join the project’s Discord, Slack, or mailing list to stay updated and get a feel for the team culture. Comment on issues, even if it's just to ask for clarification or thank someone for their work. Attend community calls or syncs when you can.

You can also join general open-source communities like r/opensource on Reddit or The Programmer’s Hangout.

You don’t need to be the loudest voice. Being present, respectful, and curious is often enough to build trust. And if you’re stuck, ask. Many maintainers are open to guiding contributors who show initiative and a willingness to learn.

Ask for coffee chats to connect with experts and learn from their experience over a call. Keep an eye on opportunity channels to get job, scholarship, and feature opportunities.

If you have two coffee chats a week, that’s one hour. Add 15 minutes a day for messaging or helping others, which comes to 150 minutes. In total, you spend around 2 hours and 45 minutes each week on community building, and that small effort can create meaningful connections.

Here’s a sample message you can send to people you’ve been interacting with in communities to have a coffee chat:

Hi [Name],

I’ve really enjoyed your insights in the [community/project name] discussions, and I’d love to learn more about your open source journey. Would you be open to a 15–20 minute virtual coffee chat sometime this week or next?

5. Leverage Tools

Tools make your life easier, no matter what task you’re working on. Luckily, most of these tools are free and can act as your assistants.

Here are a few good tools (and a little bit of automation) that can really help.

Tracking

Tools like GitHub’s contribution graph and a Notion checklist help you stay organized and avoid losing track of what you were working on. You can create a simple list of issues and update their status as you go, like "PR created," "PR reviewed," or "merged." Watching that list grow gives you a clear sense of progress, even when the steps feel small.

If your schedule is consistent, block a regular “Open Source Hour” on your calendar and link it to your active project list. This way, you always know what to work on next without having to think twice.

Skip the Setup Hassle

Setting up your dev environment every time can feel like a chore, especially if you're switching between projects or working on a lightweight machine. Tools like GitPod and Codespaces make this easier by spinning up a ready-to-code environment in your browser. No installs, no messy configurations. Just click and get started.

Stay Updated Without the Tab Overload

Keeping up with changelogs, release notes, and blog updates can get messy fast. Instead of jumping between tabs, use an RSS reader like Feedly. It pulls everything into one clean feed so you can stay in the loop without the noise.

Level Up With Your Own Dev Space

If you’re going deeper into open source and need to host a test version of your contribution, having your own environment makes things easier. A VPS (Virtual Private Server) gives you a clean, flexible space where you can:

• Host a test version of the project you're contributing to

• Reproduce bugs without affecting your local setup

• Set up your own CI pipelines or preview environments

• Run a dashboard, webhook listener, or static site

You don’t need anything fancy to start. Some of the most affordable and reliable VPS options include InstanceHost, OVH, and Hostinger. They offer solid performance without burning through your wallet. There are plenty of other options out there, but I’ve personally used these three and can vouch for them.

6. Take It to the Next Level With Structured Programs

If you're feeling motivated and ready to take on bigger goals, consider applying to open source programs that offer mentorship, structure, and real-world experience. Programs like OnlyDust, Outreachy, MLH Fellowship, Season of KDE, and FOSSASIA Codeheat help you grow as a contributor while working on meaningful projects with experienced mentors.

These opportunities often lead to full-time roles. Many participants have landed jobs at top tech companies by showcasing the skills and contributions they built during these programs.

Here’s how each one works:

• OnlyDust: OnlyDust’s "Wave" is a monthly program that connects thousands of developers with curated open source projects. As your contributions get merged, you earn recognition, climb the leaderboard, and build your reputation.

• Hacktoberfest: A month-long celebration of open source held every October. It encourages first-time contributors to make meaningful pull requests while engaging with the global open source community.

• Outreachy: A paid, remote internship for people from underrepresented backgrounds in tech. You work on an open source project for about three months with close mentorship.

• MLH Fellowship: A 12-week remote program where you collaborate with other fellows on open source projects. Partner companies like Meta, GitHub, and Amazon often sponsor teams.

• Season of KDE: A mentorship program focused on contributing to KDE projects. You work with KDE developers over a few months while building real features and getting feedback.

• FOSSASIA Codeheat: A global contest where contributors work on FOSSASIA projects. It’s open to everyone and includes mentorship, recognition, and sometimes job referrals.

The Long-Term Value of Showing Up

Open source contributions might seem like free work at first, but in the long run, they can open doors to a successful career. It helps you grow your skills, build a network, and show what you’re capable of all in public. With the right routine, your small, consistent efforts can lead to big outcomes.

But if you’re serious about product adoption, your docs need to do more than exist. They need to guide, support, and convert. In this tutorial, we’ll break down how to write documentation that actually helps users and gets them to stick around.

Table of Contents

• What’s the Problem with Most Documentation?

• How to Write Documentation from the User’s Perspective

  • Start by Understanding Your Users

  • Structure Around the Four Documentation Types

  • Make it Easy to Reach Out

  • Keep Your Tech Team in the Loop

  • Reuse What You’ve Already Written

  • Get AI Help (The Smart Way)

  • Get Feedback Early

• How Does Documentation Increase Sign-ups?

• Making Complex Documentation Accessible

What’s the Problem with Most Documentation?

The most common problem with documentation is that its authors believe their audience knows everything. This leads to the loss of many potential leads – causing people to abandon your platform before even fully understanding it.

Here’s why:

• It’s often dry and code-heavy, with snippets and vague bullet points.

• It dumps information and expects the readers to figure it out.

• It’s written from the developer’s point of view, not the user’s.

• It rarely shows how the product fits into the user’s specific use case or workflow.

• It combines different content types into a chaotic mess that’s difficult to follow or navigate.

How to Write Documentation from the User’s Perspective

Most documentation is written from a developer’s perspective: technical, feature-first, and dry. But at the end of the day, developers are also humans with problems like others, and when browsing your documentation, they are asking:

• “Can this solve my problem?”

• “How do I get it working for my use case?”

• “What happens if I get stuck?”

Here’s how you can make people stay and come back to your documentation.

Start by Understanding Your Users

Before writing a single line of documentation, pause and ask: What do our users actually care about? And it's more than just “connect an API to their client’s app”. It's the intangible benefits they’re seeking, such as two hours saved due to your tool while connecting the API or collecting payments from different clients with a single workflow.

This means that you need to listen before you write.

Dig into conversations happening around your product, not just within it. What questions do users consistently ask during sales calls? What pain points come up in Reddit threads or support tickets? What complaints are circulating on social media that haven’t been addressed yet?

Pay close attention to the words they use while referring to your product.

When you use their words, not yours, your documentation starts to sound like a helpful guide, not a technical manual. That shift alone can be the difference between “let me try this tool” and “I’ll figure it out later.”

Supabase is a good example of user-friendly docs. It begins by categorizing content by product, module, and client library. Each category includes comprehensive documentation with real-world examples, practical use cases, tutorials, and built-in feedback support.

Structure Around the Four Documentation Types

Now that you know your customer, your job is to guide them to the correct answer fast. That’s hard to do if everything’s thrown together in one long page. Structure is what turns chaos into clarity.

The best documentation systems categorize information into four types, a framework originally proposed by Divio. Not just different sections, but completely different purposes. Each one meets your user at a different stage of their journey.

Let’s break them down:

1. Quickstart

This is the user’s first real experience with your product, and it’s where they decide whether to continue using it. So your job here isn’t to explain everything. It’s to walk them through one thing that works. Slowly. Clearly. And in their language.

Use examples. Don’t assume prior knowledge. Avoid jargon unless you’ve already explained it. The goal is to create that first “Oh, I get it now” moment. Because once they’ve had it, they’ll stick around for more.

For example, the React documentation gives beginners a simple walkthrough, from creating a component to passing data between them. It avoids jargon, focuses on one working example, and explains each step clearly. This helps users quickly grasp how React works, creating that first “Oh, I get it now” moment.

2. How-to Guides

These are for users who already know the basics and just want to solve a problem. “How do I connect this to Slack?” “How do I export this as a CSV?” They’re not here to learn concepts. They just want to follow instructions and get something done.

Start by telling them exactly what the guide will help them do. List prerequisites up front if needed. Then walk them through the steps.

For example, the TensorFlow documentation includes a step-by-step guide on how to build a Convolutional Neural Network (CNN) to classify images. It’s task-focused and practical, so anyone trying to implement image classification with TensorFlow knows exactly where to go and what steps to follow.

3. Technical Reference

This is where the raw details live. Your endpoints, CLI commands, Parameter lists, what happens when something fails, and so on. Think of it like a glossary of your tool.

People scan this portion of your documentation, so make it easy to scan. Organize it so someone can jump to what they need. Use consistent formatting and avoid explanations here, but add links to the explanations sections.

For example, the Kubernetes documentation includes a comprehensive API reference that lists all available resources, their fields, default values, and behaviors. It’s organized into categories like common parameters and workload resources, making it easy to navigate. Each section focuses on definitions and parameters, with links to related conceptual docs for deeper context.

4. Explanations

This is where you step back and explain the thinking behind your system. Why does your product rely on webhooks? Why did you structure your SDK a certain way? When should someone use one method over another?

This part differentiates your tool from the crowd and builds trust. Yet, many documentations miss this. Don’t forget to add a separate section on common errors beyond 404s here. The errors that people encounter when using your tool provide a straightforward solution to those errors.

For example, Divio has an explanation section in its documentation that covers each relevant concept in detail. It starts by explaining the concept itself, then shows how it works within Divio and what practical applications it has. This helps users understand the reasoning behind the system and how to use it effectively.

Make it Easy to Reach Out

Even with perfect docs, users will get stuck. And the worst thing you can do now is make them hunt for help.

Make it ridiculously easy to reach out.

Add a simple “Was this helpful?” prompt at the end of each page. If the answer is no, give them a quick way to say why.

Drop in a link to report bugs, outdated steps, or confusing content. You’ll get real-time feedback from real users.

Invite them to contact support or drop a question in your community Slack or Discord. It’s not just about solving issues. It’s about showing them you’re listening.

Keep Your Tech Team in the Loop

You don’t need to know how every line of code works. But you do need a clear path to someone who does.

Set up a shared document, Notion page, or Slack thread where your development team can casually share technical decisions, temporary errors, important workarounds, and other relevant information.

Also, don’t be afraid to ask your devs directly. A 3-minute voice note or quick message like “Does this sound right to you?” can prevent a dozen user errors later..

Reuse What You’ve Already Written

Chances are, you've already explained 80% of what needs to go in your docs you just didn’t call it “documentation” at the time.

Start by digging through what’s already there:

• Sales or support Slack threads where you broke things down clearly

• Onboarding emails that walk users through the first steps

• Internal guides your team relies on

• Blog posts where you’ve explained product decisions

• FAQs your support team sends on repeat

Copy-paste, trim, reframe, and you’ve got a doc draft in minutes.

Get AI Help (The Smart Way)

AI tools can cut your documentation time in half, but only if you treat them like a collaborator. One powerful way to use them is by turning raw code into structured docs.

Just drop in a code snippet or feature file and prompt something like: “Write a reference doc for this API endpoint. Include usage, parameters, response structure, and a working example.”

Then take it a step further: “Now rewrite this for a non-technical product manager who’s using the tool for the first time.” This way, you get both the technical version and a plain-English explanation without switching tabs ten times.

I used AI to generate the documentation for the user.updated webhook event, and here’s what it came up with. While the generated doc is functional, I’d like to improve it further.

Here are my initial thoughts:

• Avoid starting with generic phrases like “This document describes...”

• Jump straight into what the user.updated event does

• Remove unnecessary passive voice to improve clarity

• For example, instead of:
  "The user.updated event is triggered when a user's profile is updated in the system."
  use:
  "Whenever a user profile is updated in your system, the user.updated event is triggered."

If the generated text sounds robotic, you can use an AI humanizer to make it more natural. Then, give it a final review to remove unnecessary content, add your voice, and ensure accuracy.

Get Feedback Early

Don’t wait for the “final version” before asking for input. Documentation needs to be useful, and it’s better to get clarity early in the process. When you ask real humans for feedback on your documentation, you get a reality check before a customer spreads negative feedback about you.

Instead, test your docs in real-world conversations:

• Drop a how-to guide in your support team’s Slack and ask, “Would you send this to a user?”

• Ask a teammate or friend to follow your tutorial. Watch where they pause or get confused.

• Run it by sales or customer success, they know exactly where users get stuck in onboarding.

And if you're just a small team of two people, ask each other. Then ask each other's friends. You don’t need a formal process, just honest reactions from real people.

How Does Documentation Increase Sign-ups?

When a developer first arrives at your documentation page, they give it a few minutes to decide whether your tool is worth using, especially if they’re still exploring options.

If they’re required to use your tool for any reason, they’ll likely spend a day or two trying to figure things out. If they can’t find the right information, the frustration builds and often escalates to upper management. That’s when you risk not just losing a user, but losing a team or even a larger client.

Good documentation prevents that.

It is well-structured, speaks to users at all levels, and is easy to navigate. It keeps users on your page longer and encourages them to test your tool instead of bouncing to a competitor. If you also offer feedback channels or live support, users are more likely to reach out when they get stuck, and that support interaction can make all the difference.

Good documentation:

• Reduces support dependency, so users spend more time building and less time troubleshooting

• Lowers frustration, which signals maturity and product quality

• Builds trust by showing that your team has thought through user needs

• Helps users get something working quickly, which often turns into a sign-up

Making Complex Documentation Accessible

Writing good docs requires careful planning, collaboration, and a solid understanding of your users. Whether your developers are writing it or you're working with a technical copywriter, excellent documentation is rarely a solo job. It requires input from the people who developed the product and those who support its users daily.

When done right, your docs don’t just explain things – they make your product more straightforward to use, build trust with potential customers, and drive sign-ups.

Liked what you read? I help SaaS companies clarify their messaging and build authority through content. You can connect with me on LinkedIn.

And if you're a developer, you may be in a good position to get into technical writing if it's something that interests you.

Developers have a lot of knowledge about topics like Git, Markdown, programming languages, and IDEs that they can use to teach others. And since they have worked with these tools and technologies themselves, they can often write documentation with a user-centric approach.

It's also fairly lucrative to be a technical writer, with the average salary in the US being $76,432 per year. This makes it a viable career to support yourself and your family.

Luckily, I had technical writing samples to exhibit my writing skills when I decided to give it a chance. My love for writing offered me a ready-made technical writing portfolio and made my career change easier.

But this is not the case for everyone and people regularly ask me tips to start technical writing and earn through it. So I'm compiling all the things that helped me transition into technical writing in this article.

What is Technical Writing?

Technical writing typically involves breaking down complex technical knowledge into simple words, making it easier for a non-technical audience to grasp technical concepts. The aim of technical writing is to ensure that users can effectively use a technology, which ultimately improves user satisfaction.

As a technical writer, you can write about a wide range of topics and write for different purposes and audiences. Some of the types of writing you may do will include:

• User manuals
• Documentation
• Detailed guides
• Blog posts
• White papers
• SOPs

and so on.

Accuracy, consistency, clarity, and conciseness are some of the crucial aspects of technical writing.

What are the Responsibilities of a Technical Writer?

Technical writing requires extensive research, which can make the writing process longer. Technical writers stay in a loop with Subject Matter Experts (SMEs) to understand the technical details of client products/ services.

After gathering loads of information through expert interviews and research, technical writers compile relevant information into their writing.

After gaining some experience, technical writers might also have to edit and proofread others' writing. Proofreading and editing require patience, attention to detail, and empathy.

How to Become a Technical Writer

Share Your Knowledge

Start writing tutorials, how-to guides, and share your experience with technology on an open publishing platform like Medium, Hashnode, or HackerNoon. These blog sites are easy to handle for beginners because they're free and some of their publications have a huge audience base.

If you're unsure about how to write technical articles, start reading a lot of them. This will start to give you the sense of how technical writers share their information in an approachable way, how they structure their articles, what topics they focus on, and so on.

Below are some beginner-friendly blog post ideas:

• How to do X in/ using Y (Example: How to build a portfolio website in WordPress)
• X ways to do Y (Example: 3 ways to avoid overfitting in machine learning models)
• What I learned in 10 days of working with X (Example: What I learned in 10 days of working in VSCode)
• A guide to X: Everything you need to know (Example: A guide to AI Website builders: Everything you need to know)

You can also read various publications' technical writing guides. These contain a lot of helpful hints and information about how to write good technical tutorials. Digital Ocean has a pretty well-known one, and freeCodeCamp has their own as well.

Build a Portfolio

Once you've got a few writing samples, you can help build your credibility by creating an online portfolio that contains all your writing samples. This is something you can share with potential employers or project maintainers.

You can share it on social media platforms, display it on LinkedIn featured section, and send to potential clients.

You can also try writing for publications. Well-known publications often have a huge following and they share contributor content on their social media platforms. This can help build your personal brand as a technical writer, grow your network, and motivate you to write more good stuff.

Some publications that accept contributions from new writers are:

• freeCodeCamp: freeCodeCamp expects you to have at least three writing samples when you submit a contributor application. The application process is a bit more rigorous than some, and they don't accept every application for various reasons. But if you don't hear from them and aren't accepted the first time, don't give up. You can keep improving your writing, and try again later – or try other publications. You can find the fCC contributor guidelines here.
• Towards Data Science: Towards Data Science accepts articles revolving around data science and machine learning. They expect you to submit well-structured, comprehensive, and up-to-date articles. Read the TDS contributor guidelines here.
• Level Up Coding: Level Up Coding is an online publication focused on sharing technical knowledge to help software engineers learn and grow. They have an audience of developers, designers, and data scientists so they expect content that's useful to them. Here are the contributing guidelines for Level Up Coding.

Though all publications have contributing guidelines in place to help contributors write relevant samples, a few tips to make your pitch a success are:

1. Get familiar: Read at least 3-5 top-performing articles in the publication you want to contribute to. Pay attention to the tone of voice and the level of detail shared to understand their preferences.
2. Create an outline: An outline is a structure for your content that keeps you on track while writing. You can create a good outline using top-performing content, AI tools, and your expertise.
3. Drafting: Create a draft based on your outline and let it sit for at least two days. This gap helps you spot mistakes in your draft that you might overlook during or immediately after writing.
4. Submit your draft: Finally, send your draft for review to the publication. They might edit your draft or ask you to make some changes before they publish it. Some publications also use AI content detectors, so if your publication does, make sure to verify your content using the same AI detector.

Share Your Work

While you're building your portfolio of technical articles, you can share them on LinkedIn (and other social media sites like Twitter) to let the world know about your new skills – and that you're writing about interesting technical topics.

You can also include a link to your LinkedIn profile in the articles you write, if the publication allows it, to help people find you. You'll be amazed to see how many people admire your work, and this will keep you going. You might also receive paid projects and job opportunities in your DMs.

Upskill to Documentation Writing

One great way to practice your technical writing (and help others along the way) is to contribute to documentation issues on GitHub open-source projects. This will expand your skillset and give you experience writing documentation and help you become more familiar with contributor guidelines.

Documentation writing is more focused on the product and, unlike blog posts, is usually concise. It follows a predefined structure, and the content format across pages is consistent. Accessibility, consistency, and clarity are the general best practices of writing documentation.

Pay attention to the editor's suggestions to develop a better understanding. There are usually two types of editor suggestions: objective and subjective. Objective suggestions are about general writing guidelines such as transition and clarity, whereas subjective suggestions are focused on company tone and preference.

Objective suggestions help you improve your writing skills and subjective suggestions guide you to align with company voice.

Find Paid Projects

Once you're comfortable writing technical content and doing content research, start searching for paid work. Apply to entry level jobs or look for freelance projects on job boards and in your circle. Doing the real work will really help advance your technical writing journey.

Though freelance platforms have become competitive, you can still find paid projects there. Personal branding works wonders in landing paid opportunities. Keep your GitHub and LinkedIn profiles updated, and share your achievements there to attract potential clients and stand out from the crowd.

How to Learn the Skills for Technical Writing

You can find a lot of quality writing courses, but finding the right course can be a struggle. I've taken quite a few writing courses and I'd love to help you out by sharing the tips and courses that are worth your time:

1. The Secret Sauce of Great Writing by Shani Raja is a perfect course for beginners. It covers the core aspects of good writing with practice exercises and lots of examples.
2. DevRel Uni is an online cohort-based program for people seeking to switch to developer relations. They've got a separate class on documentation writing where experts share the secrets of good documentation.
3. Whenever you secure your first external project, pay attention to editor suggestions. If it's a contributor article and they don't offer a one-to-one editing process, compare your submitted copy with the published article. Take notes of the changes they made. Editor suggestions are precious to make your writing better and if you take them seriously, you'll witness improvements in your writing soon.

Conclusion

Though career change can be exciting, transitioning from development to technical writing isn't too daunting. You just need to manage your career change anxiety, build a portfolio, and start cultivating your personal brand for a successful transition.

Still got questions? Feel free to reach out to me on LinkedIn.

Do these sound familiar? I've been there when I worked on most of my tasks during an apprenticeship, but another member would take all the credit. Turns out, I wasn't clearly speaking about my contributions to the project and how they helped make our project a success.

I was trying to make my contributions count, not to sell any product or impress an employer.

Whether you want to land a new job or make your contributions count, effective communication goes a long way.

Why Good Communication is Important for Developers

You might have seen developers who have the same level of technical skills as you being are more successful. And if you pay attention to their daily activities, you'll realize that they've mastered the art of clear communication.

One of the most common reasons behind unclear communication is the assumption that everyone else already knows what you know.

Developers often have to deliver their technical knowledge to their clients, colleagues, or bosses. And if you know the gist about speaking clearly, you'll unlock a lot of opportunities with the same level of technical skills.

Interviews

My friend, just out of college, had an interview at a startup. The interview was extensive but he managed to make it. And when I asked him for the tips, he said, "Explain technical reasoning to them as if they are 10". This cannot happen without good communication skills.

Today, companies also conduct behavioral interviews to gauge the non-technical skills of candidates and when you're good at speaking, you can easily nail them.

I have a detailed guide on how to crack behavioral interviews in 3 easy steps on my blog. The guide has the exact steps I took to crack every behavioral interview last year, regardless of the company culture.

Networking

Whether you have a large following on LinkedIn or people who praise you at local meetups, good communication skills go a long way.

Without knowing the art of communication, you can't have any of them because people are short on time and they can't stick around if you can't deliver value.

Also, having a network unlocks a lot of new opportunities.

Client Communication

While some clients also are not good at delivering their goals clearly, you can save yourself if you know how.

Whether it's connecting with clients emotionally, understanding requirements, or conveying your thoughts, effective communication does the job.

Thought Processing

Knowing to speak effectively is knowing your thoughts at a deeper level. When your brain thinks, you can't speak clearly. It's in a rush to pack up every speaking session. The rush will keep you from processing your thoughts when it's time to impress others.

Memorizing every sentence before a meeting and forgetting the script only does harm to your reputation.

When you develop communication skills, you can easily convey the ideas that come to your mind in the middle of having conversations. This builds credibility and offers you a competitive advantage.

How to Improve Your Communication Skills

Just like you build projects to master dev skills, communicating with humans is the key to improving your communication skills.

There is no shortcut to it. You can't communicate better by observing others, you have to do it yourself if you want growth.

I refined my speaking skills subconsciously, while I was looking for better opportunities. The impact it had on my way of expressing ideas was big enough that my mentors praised it during a cohort.

Join Engaging Discord Groups

You might think that discord communities are time-demanding. The thing is, you can chat for as little as ten minutes daily and still see a difference. One or two good communities work well if they've got a safe and active community.

Also, you can respond to messages throughout the day, just as you would with your friends.

Replying to others' wins, sharing your fears, and discussing daily errands or deadlines is a good ways to fine-tune your communication skills. Observe others' tone and try to be as clear as possible. You'll see a difference in your way of describing things in no time.

There is a voice and video call option too on Discord which can help enhance your speech.

GitHub Contribution

Giving and receiving feedback without bias is one of the most important skills to learn. If you're still waiting to land your first developer job or find yourself taking feedback personally, GitHub contributions will teach you to not lose your cool every other day at work.

When you submit a pull request on GitHub, you're likely to receive feedback from the project maintainers. Think of that feedback as an opportunity to improve your tech skills. You'll soon realize how others' attention to detail helps you to think broadly and get better at your craft. Realizing this will help you accept feedback as a privilege to grow beyond limits.

Find a Mentor

Good mentors will encourage you to speak more by asking more. I've had the privilege to find a mentor who'd ask a lot of questions regarding my project, daily life, pets, work, and so on. And that'd stimulate my thoughts and speech. He'd then tell me about his life and this cycle allowed me to notice things that I felt didn't matter.

Finding a mentor is easier than you think through social media. All it takes is a motivation to find like-minded people whose work you admire.

Social Media

An active social media account speaks about your credibility. I found a mentor through Instagram who helped me find free resources and would ask me about my progress.

Start posting on social media today about your progress, your work or whatever you find valuable. Comment on other people's posts to engage with them and make new connections. Also, don't forget to send non-pushy, sweet messages to new connections telling them you like their work.

Social media will help you stay accountable and keep track of your progress.

How to Improve Your Speaking Skills

If you're good at writing clearly but go blank when speaking, you're still behind in the game. Speaking more will refine your skills and you can start doing that even if you have no one to speak to.

The Collab Lab

The Collab Lab is a cohort-based program focused on helping developers learn collaboration for free.

You'll work within a team of 4-5 software developers to build a project under the guidance of mentors. The mentors keep you on track and foster a safe communication environment.

Topmate

Topmate is a platform where professionals offer 1 on 1 sessions. From teachers sharing knowledge to therapists saving lives.

Over 10000 people use Topmate. The good thing is, some of them also offer free sessions and you just need to find them. The goal here is to improve your speaking skills.

LinkedIn

LinkedIn is a great place to ask people on a virtual coffee chat. They don't need to be experts as the goal is to develop stronger speaking skills. Schedule meetings to speak about work, side projects, hobbies or anything you like and witness your skills skyrocket.

Discord (Not an additional point, but an extension to the first one 😉)

Use the calling feature on Discord and speak to people you've already interacted with. Invite them to work on projects together or discuss anything you both find interesting.

Last Words

According to K. Anders Ericsson in his book, Peak: Secrets from the New Science of Expertise, "The right sort of practice carried over a sufficient period of time leads to improvement. Nothing else."

Ericsson was a psychologist and the expert of experts. He presented the performance theory and said expertise is achieved outside your comfort zone.

So if you feel you aren't a good communicator or you don't want to speak in front of others, then you should know that only speaking can take you away from those doubts.

The methods I listed above helped me speak better English. However, I used to escape every English conversation at school.

Interested in becoming internet friends? You can hit me up on LinkedIn or Instagram.

In this guide, we will start by understanding what props are and what they do. We'll look at the different types of props, and how to use similar props in multiple components.

It is helpful if you understand React state before diving into this guide.

What Are Props in React?

Props stand for properties. They are read-only values that can be passed across components in order to display relevant data in your React apps.

Take an example of a simple JavaScript function. In it, we pass two parameters, a and b, to manipulate them inside the function and return the sum of both parameters.

function add(a, b) {
    const sum = a + b
    return sum
}

When we pass a prop to a component, the same thing happens inside the component. We take the props, manipulate them, and return something. See the example below:

export default function App() {
    return <DummyComponent name="Tooba" a={5} b={2} />
}

function DummyComponent(props) {
    const sum = props.a + props.b

    return (
        <>
            <p>My name is {props.name}</p>
            <p>The sum of the numeric props I received is {sum}</p>
        </>
    )
}

In the React code above, we have an App component that returns DummyComponent and we have passed three props (properties) to this component: name, a, and b.

In DummyComponent, we receive those props as function parameters and perform a simple addition between a and b. Props are received as an object with properties equal to what we pass into our component.

The props object for our example would look like {name: "Tooba", a: 5, b: 2}. Therefore we need to grab the properties we need just as we do in regular JavaScript objects.

const sum = props.a + props.b grabs a and b properties from our props object and stores its sum in the sum variable. Next, we return two

tags, one displaying our name prop and the other displaying the sum. The output rendered on the screen looks like this:

Screenshot showing the output rendered ("My name is Tooba / The sum of the numeric props I received is 7.")

And if I console.log the DummyComponent, I get a function having props passed as a parameter exactly as we discussed above. See the code below:

export default function App() {
    console.log(DummyComponent)
    return <DummyComponent name="Tooba" a={5} b={2} />
}

function DummyComponent(props) {
    const sum = props.a + props.b

    return (
        <>
            <p>My name is {props.name}</p>
            <p>The sum of the numeric props I received is {sum}</p>
        </>
    )
}

The output rendered on console is:

Output of the code logging DummyComponent to the console

How Props Are Shared Accross Components in React

Props are usually passed from a parent component to a child component. A parent component is a component in which you import another component and pass props inside it.

In the example above, App is our parent component. So to pass props into the child component we need to import it in App.js first. Because of this, we imported DummyComponent in App.js and then passed the props we needed inside it <DummyComponent name="Tooba" a=5 b=2/>.

But the app is not always the only parent component of all the other components.

Suppose we have another component where we want to maintain some state and use it in another component. In such a situation, the component where we maintain the state to pass it to another component becomes the parent of the latter component and the app component becomes the grandparent.

See the example below to understand what I mean:

import React from "react"

export default function App() {
    return <DummyComponent name="Tooba" a={5} b={2}>
}

function DummyComponent(props) {
    const sum = props.a + props.b

    return (
        <>
            <p>My name is {props.name}</p>
            <p>The sum of the numeric props I recieved is {sum}</p>
        </>
    )
}

function Parent() {
  const [isParent, setIsParent] = React.useState(true)

  return (
    <>
      <Child isParent={isParent}/>
    </>
  )
}

function Child(props) {
  return (
    <>
      <h3>{props.isParent 
      ? "I am the child component of Parent.js" 
      : "There might be a bug"}</h3>
    </>
  )
}

In the above code, we have added two new components. Parent.js is maintaining the isParent state. It indicates whether this is a parent component or not. If the state is true, we display "I am the child component of Parent.js" in the Child.js file. Otherwise we display "There might be a bug".

But to actually display this in the browser, we need to import Parent.js in App.js and return it inside the App function. The code is displayed in the browser like this:

Output displayed on the browser based on the isParent prop passed from the parent to the child component

No matter how big your React app becomes, the child components always need to be imported into the parent component and the parent component in the grandparent component (if it exists).

What Are PropTypes in React?

There is a library in React called "prop-types" that allows us to avoid errors caused by invalid data type issues.

Suppose you want a variable to be of datatype Number, but when you try to manipulate it mathematically, it throws errors. You might have encountered this problem numerous times in your coding journey.

But with propTypes in React, we can make sure that each prop is of a certain data type and nothing else.

Consider the DummyComponent from the example above:

import { PropTypes } from "prop-types"

function DummyComponent(props) {
    const sum = props.a + props.b

    return (
        <>
            <p>My name is {props.name}</p>
            <p>The sum of the numeric props I recieved is {sum}</p>
        </>
    )
}

DummyComponent.propTypes = {
        a: PropTypes.number,
        b: PropTypes.number
}

To use propTypes, we first import it and define propTypes with the name equal to our component. propTypes are objects with keys equal to our prop names and values equal to the datatype we want that prop to be.

We can also chain propTypes with isRequired which throws an error if the required prop is not provided to the component.

DummyComponent.propTypes = {
        a: PropTypes.number,
        b: PropTypes.number.isRequired
}

The available data types for propTypes are String, Number, Boolean, Object, Function, and Symbol.

How to Update Props from a Child Component

Even though props are usually passed down to child components and are read-only data items, we have a way to update a prop from the child component. And it is not as complicated as it might sound. Let's go through it step by step:

1. Pass setState as a prop to child component
2. Add an event in the child component that triggers the setState function

Let's have a look at the code that makes it work:

function Parent() {
  const [isParent, setIsParent] = React.useState(true)

  return (
    <>
      <Child isParent={isParent} 
      changeIsParent={isParent => 
      setIsParent(isParent => !isParent)}/>
    </>
  )
}

function Child(props) {
  return (
    <>
      <h3>{props.isParent 
      ? "I am the child component of Parent.js" 
      : "There might be a bug"}</h3>
      <button onClick={() => props.changeIsParent()}>Click me</button>
    </>
  )
}

In the code above, we have passed a prop named changeIsParent that updates the isParent state using setIsParent function.

In the child component, we have added a button and passed an onClick event that runs the changeIsParent function on every click. Since isParent's state is continuously changing on every click, the text inside the

tag changes accordingly.

How to Use the useContext Hook Instead

When you start building bigger React apps, it becomes frustrating to pass props down in the React component hierarchy, especially when components with different parents need the same props. Let's have a look at the diagram below to understand this:

React app hierarchy sample

Let's suppose the middlemost child component in the diagram needs some props from its parent. We can cater for this need by maintaining a state in its parent component and passing it down to the child as a prop.

But, what if the leftmost parent component needs the same prop? We can define the same state in its parent (grandparent in the diagram) and pass it down to it as a prop.

Still, the right most grandparent component also needs the same prop. We can solve this issue by maintaining the state in the App component and passing it down through its children.

This approach might seem to work. But we need to pass props unnecessarily to each child component whether they need it or not.

The term prop drilling describes this problem of passing data through all the children whether they need it or not. Fortunately, you can use the useContext hook in React to solve this problem by maintaining a state globally and passing it to the components that need it.

Let's understand how to do this with useContext through a step-by-step approach:

1. Create a Context.js file and create the context in it
2. Maintain a global state in the newly created Context component
3. Pass that state as a value to the Context provider
4. Wrap the App component or the lowest common parent component inside the Context provider
5. Access the global state through components that need it

Now let's suppose we are building a game in React and need to toggle the user score display in multiple components. For this, we maintain a showScore state in the Context.js component like below

import {useState, createContext} from "react"
const Context = createContext()

function ContextProvider(props) {
    const [showScore, setShowScore] = useState(false)

    function toggleScore() {
        setShowScore(!showScore)
    }

    return (
        <Context.Provider value={{showScore, toggleScore}}>
            {props.children}
        </Context.Provider>
    )
}

export {ContextProvider, Context}

In the first line, we import the state and context from React. In line 2, we create a context named Context. In line 4, we create a function named ContextProvider. In line 5, we initiate the showScore state and in line 7, we define a function that toggles the showScore state. In line 12, this function returns the context provider that lets the children access its state and pass a value to it.

The value can be a single value or an object having multiple values. Since we have a state and a function to pass down the children, we use an object to define our value having both the state and the function that toggles the showScore state.

Lastly, we export the ContextProvider function and Context as named exports.

You might be wondering, why is our context component receiving props and why are we passing it to our context provider? We will get back to this in a moment – first let's see what our next step would be

To make our context accessible throughout our app, we need to wrap the App component inside the ContextProvider component in the main.js/ index.js file:

import React from 'react'
import App from './App'
import { ContextProvider } from './Context'

ReactDOM.createRoot(document.getElementById('root')).render(
  <ContextProvider>
     <App />
  </ContextProvider>
)

In the code above, we import ContextProvider from the Context component and wrap <App /> inside it. Every child of the component that's wrapped inside the Context Provider can access the global context. We have passed <App /> inside <ContextProvider> so every child component of our app can access showScore and toggleScore.

Now that the context is available to be used throughout the app, let's see how we can use it:

import { Context } from './Context'
import {useContext} from 'react'

function ScoreDisplay(props) {
    const {showScore} = useContext(Context)
    return (
        {showScore && <h3>Your score is {props.score}</h3>}
    )
}

function ScoreToggle() {
    const {toggleScore} = useContext(Context)
        return (
        <button onClick={displayScore}>Show Scores</button>
    )
}

See how we just need to import Context from the Context component and access whatever value we need to use in any component.

In the ScoreDisplay component we destructure showScore from Context and display the score according to it. In the ScoreToggle function, we destructure toggleScore and pass it to the onClick event handler.

To recap, we created a separate context component and created a context using the createContext hook. Inside the component, we define the states and functions we want to maintain globally and return Context.Provider from the Context we created. Then we export the context component and the Context we created using createContext hook.

Context.Provider takes in a value that can be an object having multiple key-value pairs. We passed both our state and toggle function to the value. We then wrapped the App component inside the ContextProvider in the main.js/ index.js file.

Next, we need to import the Context component and the useContext hook wherever we need the global state and destructure the value object according to our needs.

Now let's get back to the props our context component is receiving. See how in the second code example we are passing <App /> inside the <ContextProvider /> component as its child? In React, when we write a component with a corresponding closing tag, all the components passed as their children become its props.

<Context.Provider value={{showScore, toggleScore}}>    
    {props.children}
</Context.Provider>

So when we pass props.children inside <Context.Provider/> in the Context.js file, we are basically passing the App component inside it. This makes sure our App component has access to the context and it renders properly.

The Context API helps us totally get rid of the prop drilling problem. But we should avoid using it when the props are needed to be passed through certain levels. The reason is that whenever the context state updates, React re-renders every component that uses the state and it may cause performance issues.

In situations when you want to avoid prop drilling through some levels, the React docs have provided a reasonable solution for that called component composition. You can read more about it here.

Conclusion

Props is short for properties which are read-only data items that are passed through the components to be manipulated and displayed in the browser.

Props are shared down the hierarchy, that is from parent to child components. You can use the propTypes library to specify the data type of each prop in order to avoid data type-related issues.

Though props can only be passed from the parent component to the child component, we have a way to update props from a child component using an event handler that updates a state in the parent component.

To avoid the prop drilling problem, we may use Context API in React which helps us completely get rid of the problem.

Interested in connecting on LinkedIn? Hit me up at Tooba Jamal.

The biggest challenge was that I couldn't find resources to learn about APIs in simple terms.

Now that I know how APIs work, I decided to write this guide for any newbies out there who are struggling to make sense of this not-so-complicated but still confusing topic in web development and software engineering.

What is an API?

API stands for Application Programming Interface. The application can be any software that performs a specific task and the interface is a point where two applications communicate.

One application acts as a client and the other acts as a server. A client asks for some resource, say for example a photo, and the server sends that photo to the client.

The client here can be your mobile phone, desktop or laptop computer, or any device you use to surf the internet. And the server is a bigger computer that stores the data you want (a photo in our case).

Suppose I want a nature photograph to upload to my travel blog. I might go onto the Unsplash website, type "nature: in the search bar, and it would return a large number of nature photographs.

That's an API working behind the scenes to make the conversation between Unsplash and me happen.

How Do APIs Work?

Computers follow a protocol to communicate with each other. A protocol is nothing but a set of rules that computers follow to communicate. Any computer that doesn't follow the protocol breaks the communication thread.

You might have used Bluetooth to share data back in the day. Bluetooth is nothing but a protocol for mobile devices to communicate with each other at a shorter distance.

When you ask your friend to send you photos of their last trip, your device acts as a client, and your friend's device (the one that sends photos) is the server.

This is just an example of a protocol. We have a large number of protocols in the world of computer science – one for almost anything.

On the web, we use the HTTP protocol (which stands for Hyper Text Transfer Protocol). APIs available on the web use the HTTP protocol for a number of reasons - it's easy to use and it's popular, for example.

Communications that take place over the HTTP protocol are also known as the request-response cycle because this is exactly how the protocol works. The client sends a request to the server and the server responds to the client regarding that request.

Unlike humans, computers have to be rigid to communicate with each other or they break the communication. For this reason, a client (requesting computer/ device) needs a set of information to send with the request so the server responds accordingly. This information includes:

1. URL – a web address where you want to make a request
2. Method – whether you want data already stored somewhere or want to save new data in a database
3. Header – all the relevant information about your request including in what format the client device expects to receive the data
4. Body – the body contains the actual request data

In our Unsplash example, the URL is https://unsplash.com/s/photos/nature. The method is GET because we want the server to get nature images back. The header includes information like the format our computer expects to get and accept – like language meaning, the language of the device, our operating system, and so on. The body includes the data we need to send to the server, the nature keyword for example.

There are four types of methods for HTTP requests which we will get back to in a moment. For now, just know that a method indicates what you want to do with the data available on the server. For example, whether you want that data as documents or you want to save a new entry in data saved somewhere.

When a client makes a request, the server responds to that request. The response might be the data the client requested or an error.

Just like a response, a request has a structure including a URL, status code, header and body. In a request, we have a method, which has four types. And in the response, we have a status code which indicates whether a request has been accepted or declined.

HTTP methods

There are four available HTTP methods, and each has its unique functionality.

1. GET: as already discussed, this indicates that the client is requesting data to be sent from the server.
2. POST: this method tells the server that the client wants to create a new entry in a database. For example, saving a new blog post in a database of all previous blogs.
3. DELETE: as the name suggests, the client wants to delete a data record from a database.
4. PUT: this method is used when a client wants to update or edit a data record. For example, changing your Facebook password.

HTTP status codes

There is a huge list of HTTP status codes, but let's look at a few of the most common:

1. 200 OK: this indicates that the request was successfully fulfilled by the server
2. 201 CREATED: the data entry that you requested to create was created
3. 404 NOT FOUND: this indicates that the resource you requested wasn't found by the server
4. 500 INTERNAL SERVER ERROR: this means that an error occured at the server's end and it couldn't fulfill your request

There is no need to memorize these status codes, as the list is huge and you will subconsciously learn them as you encounter them in your development journey.

Still, there is a range of status codes that indicates a generic response, as you can see here:

1. 100s: Informational responses, indicating the request's progress
2. 200s: Success, indicating the request's success
3. 300s: Redirection, indicating the request had to redirect somewhere else
4. 400s: Client errors, indicating errors that occurred on the client side
5. 500s: Server errors, when the server fails to respond to a valid client request

Types of APIs

Remember how I told you that I got confused when people would talk about APIs in different contexts? That's because we have different types of APIs available as well.

The ones we talked about in this article are web APIs that use the HTTP protocol. Developers can use them to create a better user experience for their users.

Other types include internal APIs that are hidden from external users and that are used within a company only.

There are also open APIs that are available to be used by anyone for free (like the open weather map API). You can have partner APIs that are shared among business partners only to carry out their business tasks, and composite APIs that sequentially combine multiple API requests into a single API call to reduce server load and create a faster experience.

Resources to learn more about APIs:

If you want to learn more about how to design APIs, here's a full book for you to get started.

And you can learn more about types of APIs, testing tools, and documentation here.

Here's a tutorial that'll teach you all about REST APIs.

And here's a Fetch API cheatsheet to get you started learning about Fetch.

Conclusion

An API is an interface for two computers to communicate in order to carry out tasks on the internet.

APIs follow the HTTP protocol to communicate, which has a specific request and response structure.

Different methods exist to perform different tasks and numerous status codes are available that indicate whether the request is successful, declined, or in a pending state.

Interested in connecting on LinkedIn? Hit me up at Tooba Jamal.

During the website development process, you want to make sure that the end user has the best user experience. And that includes people with disabilities or those who faces challenges when using a website.

Unfortunately, there are still websites that don't use accessibility best practices. But you can make sure yours does.

If you keep a few things in mind during the web development process, you can improve the user experience for all users, including differently abled users.
Below are some helpful tips you can use to improve website accessibility.

Add Alt Text to Images

You might have heard about the importance of adding alt text on image tags in HTML5. So how do you use them? Do you provide alt text for every image on your webpage?

Image alt text makes it easier for people with visionary disabilities to understand the content of a webpage. But you should include the alt text only for informational images that aid in the understanding of the content.

Decorative images should have empty alt text. This tells screen readers that the information provided by the image is not important and might in fact detract from the user experience.

Informational images are images that convey important information related to the content. You should be able to describe what they show in a few words of alt text.

Let's suppose we run a fitness blog and are working on creating an article about how to do a workout at home and we use the following image in our article.

_Photo by [Unsplash](https://unsplash.com/ja/@jonathanborba?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jonathan Borba on <a href="https://unsplash.com/s/photos/workout?utm_source=unsplash&utm_medium=referral&utmcontent=creditCopyText)

This image is supposed to convey a message to the blog readers on things you need for a crunch exercise. The alt text for this image could be something like this:

<img src="crunch_exercise.png" alt="You must have a good quality exercise mat and workout clothing to avoid back injuries and skin allergies">

The alt text we provided for our image clearly tells visually impaired users the message our image conveys.

Decorative images, on the other hand, serve the sole purpose of decoration on the webpage – maybe they just break up the content or complement general descriptions in the text.

Images used as icons are a great example of decorative images. The Airbnb homepage has a navigation bar with multiple icons (like the one in the red circle) indicating different types of living spaces available at Airbnb. The icons used in the navigation bar are for decoration purposes and we can leave their alt text empty.

Airbnb homepage

<!-- Example of decorative image -->
<img src="decorative_img.png" alt="">

Maintain Heading Hierarchy

If you don't use headings in the correct hierarchy (from

– the biggest – to

– the smallest), screen readers might assume there's some content missing.

Because of this, it is best to use

for the main title only,

for headings that come after the title, h3 for subheadings, and so on.

Consider the example below: we have a webpage with a few headings.

is used for the document title,

for the second level document heading,

for subheadings and

for mini headlines (headings that come after

).

Heading hierarchy example

Below is the code for this web page. Notice the different heading tags in it:

<h1>Facts about dogs</h1>
<img src="dog.png" alt="a cute dog resting under the sun">
<h2>What makes a dog the best pet?</h2>
<p>Dogs are everyone's favorite and there are numerous science backed reasons behind it mentioned below</p>
<h3>Dogs can sense a lie</h3>
<p>Yup! You read it right! Dogs are smart enough to tell when a praise is sincere. They have a pretty sharp mind.</p>
<h3>Dogs have a great sense of smell</h3>
<p>Dogs have a sense of small that's 40x better than ours and this quality plays an important role in building a stronger bond between a human and a dog. The reasons to it are given below</p>
<h4>1. They can smell a stanger sneaking into your garage</h4>
<p>Dogs can spot a stranger because of their strong sense of smell and save you from theft.</p>
<h4>2. They can tell you whenever you forget to put meat in the fridge after a  grocery run</h4>
<p>Dogs might make you give them a half of the meat you bought from the supermarket but they can also help you save the remaining half. Thanks to their sense of smell!</p>

Use the Aria Property or Label Tag for Input Fields

Aria labels or tags tell screen readers what type of information an input field expects. Without them, screen readers would not know the purpose of an input field, which would provide a bad user experience to visually disabled users.

<!-- Aria label example -->
<input type="text" placeholder="Enter your name" aria-label="Enter your name">

<!-- Label tag example -->
<label>Full Name: <input type="text" placeholder="Enter your name"></label>

Example one uses the aria property for screen readers to read what the user is expected to enter in the name input field.

Example two uses the tag with text Full Name which is readable by screen readers.

Provide Keyword Functionality

Not all users can use a pointing device (mouse) yet a lot of websites do not provide keyboard functionality to users. This discourages users who only use the keyboard from returning to your website.

One simple example of this is adding a click event listener to the submit button of a form instead of making use of the onsubmit event (which requires a user to click to submit a form). Have a look at the example below:

<!-- Example one -->
<form>
    <label>Full name: <input type="text" value=""></label>
    <label>Email: <input type="email" value=""></label>
    <button onclick="handleSubmit>Submit</button>
</form>

<!-- Example two -->
<form>
    <label>Full name: <input type="text" value=""></label>
    <label>Email: <input type="email" value=""></label>
    <button>Submit</button>
</form>

Example one uses a click event listener on the submit button. This means that pressing the enter key on a keyboard would not submit the form.

Example two uses the onsubmit event and assigns a JavaScript function to that event. This way a click or an enter button both run the handleSubmit function.

Use an Accessible Color Palette

Bad color contrasts ruin the overall experience for people without disabilities as well as for those with disabilities. So it's important to get the contrast and complementary colors correct when designing your site.

There are tools like contrast checker that help you understand whether your colors contrast enough to be properly visible. Accessible color contrast helps disabled people distinguish between elements on a web page. See below the examples of good and bad color combinations.

Example of good and bad color combination

The first box has a dark blue background which makes the white easier to read. On the other hand, the second box has a green background with pink text that is not easy to read and causes eye strain.

Provide Alternatives for Audio and Video Content

Users who cannot hear or see well might find it difficult to access the audio and video content of a website.

To offer them a better experience, provide transcripts for any audio you use, and add easy-to-read captions on your video content.

Make Sure the Content is Easy to Understand

Easy to understand content is free of unexplained jargon and technical phrases.

Suppose you run an analytics firm and are an expert in the field of data science. But your users might include current or potential clients and job seekers. These people might not have enough technical knowledge to understand content stuffed with jargon.

We are a team of analytics experts who are masters at aggregating data from all the available warehouses, detecting anomalies, performing batch processing on high volumes of data, and applying robust algorithms to solve your business needs.

The above text is full of analytics jargon that not everyone can understand. This makes you lose your visitors – as why would they invest in you if they can't understand what you do?

Check out the below simplified version of the same text that uses more approachable terms everyone can understand:

We are a team of experts who specialize in collecting data from all the available sources, identifying errors in that data, handling high volumes of data in less time with greater accuracy, and making predictions to solve your business needs.

Make sure that your content delivers its purpose in language that everyone can easily understand.

Conclusion

Accessible websites are crucial for a good user experience. An accessible website can not only grab new users but it can also encourage old users return over and over again.

There is a lot more you can do when it comes to website accessibility. But with these tips and tricks, you can improve your site or app's UX significantly.

I hope these tips help you offer a better user experience in your upcoming projects.

Develop accessible websites and make the internet a better place for everyone!

Interested in connecting on LinkedIn? Hit me up at Tooba Jamal

In this article, you'll learn what is a web storage, the different types of web storage, and when to use each one of them.

What is Web Storage?

Web storage is an HTML5 feature that allows you to store data in key value pairs in the browser. This enables applications to store data in the client side so you can access it or manipulate it later. All data stored in web storage stays in the browser and is not transferred anywhere else.

Types of web storage

The two main types of web storage are‌‌ local storage‌‌ and session storage‌‌. Each one has its own unique characteristics.

But one thing they have in common is that they store the data in the particular browser the user uses to access the webpage. You won't be able to access the same data through another browser.

Now let's discuss both of them in detail.

Local Storage

Local storage can store 5MB of data per app for the lifetime of the app. Closing the browser will not affect the data in any way – it stays there unless you delete it.

You can only access the local storage object through localStorage. The methods you can use to perform operations on the localStorage object are:

localStorage // to access the localStorage object 
localStorage.setItem('name', 'John') // sets name equal to john localStorage.getItem('name') // "John" 
localStorage.removeItem('name') // removes name from the localStorage localStorage.clear() // clears the localStorage

localStorage.setItem() takes a key and value as parameters and sets a new item in the local storage object equal to the given key value pair.

localStorage.getItem() takes a key as a parameter and returns the value stored to that key in the storage.

localStorage.clear() clears the whole localStorage object.

localStorage.removeItem() takes in a key as a parameter and removes the corresponding key-value pair. ‌‌

Any item that you store in localStorage will be stored as a string. This means that you need to convert other data types such as arrays or objects to strings – otherwise you lose their structure.

See the example below:

const scores = [10, 8, 6, 3, 9] 
const scoresJSON = JSON.stringify(scores) 
localStorage.setItem('scores', scoresJSON) 
localStorage // output >> {scores: '[10, 8, 6, 3, 9]', length: 1}

In the example above, we first created an array score, then converted it into a string using JSON.stringify(), and finally saved the stringified scores array in localStorage.

Take your time to have a look at the output I get when I run the same code snippet in my browser console.

Example code in browser console

Note that the key scores has a value equal to our stringified scores array. But if we don't convert the scores array into a string, our array will loose it's structure and the items will be saved as a string like below:

const scores = [10, 8, 6, 3, 9] 
localStorage.setItem('scores', scores) 
localStorage // output >> {scores: '10, 8, 6, 3, 9', length: 1}

Let's also run the code in the browser console to see what is logs to the console:

Saving an array without converting it into a string

See how our scores array is converted into a string when we do not convert it into a string using JSON.stringify()?

Session Storage

Session storage allows you to store data in the browser depending on the system memory and the data stored in the browser until the browser is closed. In other words, closing the browser will clear all the data stored in session storage.

Like localStorage, you can access session storage by typing sessionStorage in the browser console.

sessionStorage // access the session storage 
sessionStorage.setItem('name', 'John') // add name to session storage with value john 
sessionStorage.getItem('name') // get the name item from session storage sessionStorage.removeItem('name') // remove name item from the session storage sessionStorage.clear() // clear the session storage

sessionStorage.setItem() takes a key and value as parameters and sets a new item in the local storage object equal to the given key value pair.

sessionStorage.getItem() takes key as a parameter and returns the value stored to that key in the storage.

sessionStorage.removeItem() takes in a key as parameter and removes the corresponding key-value pair.

sessionStorage.clear() clears the whole localStorage object. ‌‌

Like localStorage, any item stored in sessionStorage will be stored as a string. This means we need to convert them into strings before storing in the sessionStorage.

Web Storage Example Use Cases

You can use local storage when you want your data to be made available when the user revisits the web page, such as for a shopping cart or game/quiz score. Just keep in mind that the information saved in local storage should not be sensitive.‌‌

You can use session storage when the data that needs to be saved is sensitive. User authentication is an example of data that you would like to clear as soon as the user closes the tab.

Conclusion

In this article, you have learned the modern ways of storing temporary data in the browser. I hope this has helped you understand how and when to use both types of web storage in your projects.

Interested in connecting on LinkedIn? Hit me up at Tooba Jamal.

In this article, we will go through the process of building and deploying a machine learning web app using Flask and PythonAnywhere.

Flask is a Python web framework which is easy to work with, and PythonAnyWhere is a web hosting service provided by Anaconda.

How to Build a Machine Learning Web App

The idea of turning your predictive models into a web app can feel overwhelming. But I promise you it's relatively easy and straightforward.

Here are the steps we'll need to take to do this:

1. Save the machine learning model
2. Build a web page using HTML
3. Build a backend using Flask
4. Style it the way you want
5. Deploy it to the web

I wanted to build a diabetes prediction web app and so I used this dataset to do it. You can use any dataset you like, as the process will stay the same.

Before getting started, let's understand the directory structure we are going to follow. This will be helpful in keeping our files organized and making the deployment easy.

Directory structure

Directory structure we are going to follow

I have named my root directory diabetes_app, but you can name yours whatever you want.

We have three more directories and a Python file in diabetes_app (root directory). The Models directory will contain our trained model. The Static directory has two more directories, CSS will have all the stylesheets saved and script will have JavaScript files, if any. Lastly, the Templates folder will have HTML files saved and app.py is our Python file that has the backend (Flask) code.

Now that we have an organized file structure, let's get started.

How to Save the Machine Learning Model

Saving the model is the easiest of all tasks. We will use the Python pickle library to do this.

Once you are done with training, testing, and hyperparameter tuning, save the best performing model in a variable. For me the best model was RandomForestsClassifier and I saved it like this:

clf = RandomForestClassifier()
clf.fit(X_train.values, y_train)

Now clf has my trained RandomForestClassifier model which is ready to be saved in a file. For this, I will have to import the pickle library and save the clf like this:

import pickle
pickle.dump(clf, open('model.pkl', 'wb'))

pickle.dump() is a function used for saving models. The first parameter is the model name (that is clf in our case) and the second is another function that saves the model in disk. 'model.pkl' is the file name I want my model to be saved in and 'wb' refers to write binary which writes model data into the 'model.pkl' file.

After this step, you will have your model file saved in the same directory you are working in. Don't forget to copy the model.pkl file in the models folder in our project directory. And now that we have saved our model, we are ready to move ahead.

How to Build a Web Page using HTML

The main functionality of any machine learning web app is to make predictions. And for that the user will most probably need to answer a few questions if you have not used unstructured data or uploaded some documents in other cases.

The early stage diabetes risk prediction dataset is in .csv form with 17 features (of which 16 are used as input). We will use HTML forms to create a form that a user can fill out to get their predictions. For example:

<form action="{{ url_for('predict')}}" method="post">
    <p>What is your age?</p>
     <input type="number" name="Age" placeholder="Enter your age"                       required="required" /><br> 
    <p>What is your gender?</p>
     <label><input type="radio" name="Sex" value="1" required="required"         />Male</label>
        <label><input type="radio" name="Sex" value="0" required="required"         />Female</label><br>
     <button type="submit">Predict</button>
</form>
<p> {{ prediction }} </p>

Above, we have created a form with two questions. The action attribute on the form is set to {{ url_for('predict') }} which will render our prediction when the form is submitted. For age, we are providing the user with a number input field, and for gender, we have the radio buttons.

The value attribute contains the value for each radio button. Male has value 1 and female has value 0, which will be used as inputs for our prediction. Make sure each input field has matching value attributes as your final (processed/ ready for prediction) dataset. I had a binary encoded gender feature so I used the values 1 and 0 for gender.

The paragraph tag will display the prediction results. Prediction is a variable that will hold our prediction in the Python file which we will see in the next step.
You can add as many questions you want and whatever input type suits you – the functionality will remain the same.

How to Build the Backend using Flask

We are on the most interesting step now, which is to build the backend. First have a look at the code and then we will go deeper in it.

import numpy as np
from flask import Flask, request, render_template
import pickle

app = Flask(__name__)

model = pickle.load(open('models/model.pkl', 'rb'))

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/predict',methods=['POST'])
def predict():
    int_features = [int(x) for x in request.form.values()]
    features = [np.array(int_features)]  
    prediction = model.predict(features) 
    result = prediction[0]

    return render_template('index.html', prediction=result)

if __name__ == "__main__":
    app.run(debug=True)

Start by importing the libraries we are going to need. We'll need NumPy for handling input values, Flask for making predictions, and pickel to load the model we saved in the first step.

First we create our app object which we will use throughout to build our backend. Secondly, we load our model using the pickel.load() function. This time we have replaced 'wb' with 'rb' which means 'read binary' which tells pickel to read the data.

@app.route('/') means when we are at the homepage of our app and we want to do something here. To do something, we define a function home which renders our HTML file we created in the previous step as our homepage.

@app.route('/predict',methods=['POST']) does the main job of allowing us to make predictions. /predict means we have moved to the predict page of our app.

We define a predict function here, inside which we first store all the input values in an array called int_features using request.form.values(). Once we have our input values, we convert it into a 2D array for prediction and make the prediction like we normally do. Lastly, we store the prediction in the prediction variable which we will use to render result on our web app.

render_template('index.html', prediction=result) tells Flask to assign the result to the prediction variable and render it in our index.html file.

Remember the action attribute set to predict in our HTML? That is the same predict function we have defined here. When the user submits the form, the predict function gets called.

Finally we run our app in the last two lines. debug=True is an optional argument (default is False) which reloads the web page automatically when you make changes to the code. It will be helpful when you do the styling of your app.

How to Style the App the Way You Want

To keep things simple, I have showed you the simplest way to build a machine learning web app. But you can do a lot with it.

I styled my app into three separate web pages for home, form/ questions, and results. I also added a little bit of JavaScript to render random health related news from all over the globe to the homepage and a little bit of styling to make things look pretty.

The way to link CSS and JavaScript files when working with Flask is this:

 <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
 <script type="text/javascript" 
  src="{{ url_for('static',filename='script/script.js') }}"></script>

To add more than one web page, you just need to add more routes to the Python file like we did in the previous step. Let's suppose we want to add a separate results page to show predictions. The /predict route will look like this:

@app.route('/predict',methods=['POST'])
def predict():
    int_features = [int(x) for x in request.form.values()]
    features = [np.array(int_features)]  
    prediction = model.predict(features)  
    result = prediction[0]

    return render_template('results.html', prediction=result)

Instead of rendering index.html, we are rendering results.html with our prediction. You can structure and style your results.html file the way you want and add the prediction to it.

How to Deploy the App to the Web

Now that we are done with styling, the app is ready to be pushed to the cloud. PythonAnywhere is easy to use and has a free plan to deploy Python applications. You will have to create an account first and choose the free plan.

Next, you will need to give your app a name and go to the files tab and delete the existing site there. Upload all your files in the same directory structure discussed above. Then go to the web tab and click the blue reload button.

Uploaded files

If you have CSS and JavaScript files in your project, you will need to define their URL and directory path in the static files section on the web tab.

The URL will be /static/ since we are serving static files and the directory will be /home/yourwebsitename/mysite/assets since our CSS and JavaScript files are saved in the static directory.

Static files section

Reload the website by clicking the blue reload button again and CONGRATULATIONS – you have deployed your machine learning web app to the cloud.

Conclusion

Deploying machine learning web apps is not as difficult as it might seem – not at least as learning machine learning theories. And if you have done that, deployment is just a breeze which can take you to greater heights.

I hope this article helped you understand how you can deploy your models and make them look prettier. The code for the diabetes risk assessment web app I built can be found on my GitHub.

Deploy your models and show the world your superpower!

Interested in connecting on LinkedIn? Hit me up at Tooba Jamal