Forem: Matthew Rungwe

How to add a map to a Website or Web App using Mapbox

Matthew Rungwe — Thu, 22 Jul 2021 20:48:27 +0000

Have you ever wanted to add a map to your application to make it look nice? You might have wanted to build an entire application dedicated to using a map or add it to your contact page.

In the article, we will look at a few steps to help you get started with adding a map to your website or web application using Mapbox. At the end of the article, you should know how to prepare an HTML page that shows a map using the Mapbox API.

Get your HTML file ready
Create a Mapbox account
Get the Mapbox map code to integrate to your application
The result of the HTML file after adding the code
Preview
Further reading

Get your HTML file ready

We want our map to render somewhere on the website. So, we need to have a file with an .html extension. For this article, we will use index.html.

Treat this how-to article as a project. Place your files into a folder dedicated to learning how to add the map, for example, ./documents/Map-with-Mapbox/index.html.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding a map to your website or web application using Mapbox</title>

    <!-- Styles -->

</head>
<body>
    <!-- Header -->
    <header>
        <h1 style="text-align: center;">Map with Mapbox</h1>
    </header>

    <!-- Main -->
    <main>
        <!-- Add your div tag -->
    </main>

    <!-- Scripts -->

</body>
</html>

Create a Mapbox account

What is Mapbox?

Mapbox is a provider. A provider for online location data to integrate into your websites or applications. Their APIs allow you to gain access to their tools and services using programmatic skills.

To create an account, go to mapbox.com. Create an account for yourself and sign in. In your Dashboard, you will have the information you need to get started with integrating a map into your website.

Get the Mapbox code to add to your application

Go to the Integrate Mapbox link in the Dashboard.
Choose the JS Web SDK link.
Use the Mapbox CDN link.
Copy the styles link below into the head:

<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />

Copy the script tag below towards the bottom of the body:

<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>

Press the Next > button to get the script that accesses the Mapbox API and allocates a container:

<script>
    mapboxgl.accessToken = 'Add your Access Token Here';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11'
    });
</script>

Add a div tag into the body with an id that matches the container in the script above:

<div id='map' style='width: 400px; height: 300px;'></div>

The result of the HTML file after adding the code

I have included a sample of the result of the HTML file after I have added the code from the Mapbox CDN.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding a map to yor website or web application using Mapbox</title>

    <!-- Styles -->
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
    <!-- Header -->
    <header>
        <h1 style="text-align: center;">Map with Mapbox</h1>
    </header>

    <!-- Main -->
    <main>
        <div id='map' style='width: 400px; height: 300px; margin: 0 auto;'></div>
    </main>

    <!-- Scripts -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>

    <script>
        mapboxgl.accessToken = 'Add your Access Token Here';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [28.112268, -26.270760], // [Longitude, Latitude]
            zoom: 5 // Initial zoom
        });
    </script>
</body>
</html>

Preview

After you have saved and rendered your HTML file, the map will display on your web page. The image added below is a preview of how the code above displays in the browser.

chrome

Getting the most out of Online Learning

Matthew Rungwe — Mon, 12 Jul 2021 17:04:50 +0000

Are you planning to start learning online? Are you busy with an online course already? Do you feel like you are not keeping up? Are you just researching how online learning works? If you answered yes to any of these questions? If so, that's great. In this article, we will be sharing some tips that can help you get the most out of online learning.

Anyone who has taken an online course can testify. Without a solid plan, it's easy to lose track of your online studies.

What it means to be an online student
Create a learning plan
Give yourself a reasonable deadline
Pace yourself
Take breaks
Improve your time management
Take down notes
Go the extra mile
Collaborate
Leverage your network

What does it mean to be an online student

Online learning is just like traditional learning. The only difference is that you are going to be more accountable for how you complete the course.

Treat your online learning as your would for traditional learning. Show up and be willing to put in the work. Don't just create a plan. Follow through with it. Most of these courses are going to be purchased so, don't let it slip away.

Create a learning plan

The first step to getting the most out of online learning is creating a learning plan. Picture the learning plan as your road map for the journey that you are about to embark on. As you make your learning plan, you will get a high-level overview of the entire course and your expectations.

Don't just stop there. Check in with your plan to see if you are still on track from time to time. Hold yourself accountable because it is up to you to do everything in good time.

I go into a little more detail in a how to create Your Learning Plan article on Hashnode.

Give yourself a reasonable deadline

Deadlines are important. Give yourself enough time to learn, understand and practice what you have learned. As much as completing the course is crucial, understanding what you have learnt is crucial. If you give yourself too little time, your learning experience gets overwhelming. If you give yourself more than enough time, you would have forgotten the first half of the content you learned by the time you finish.

When you start the course, appreciate the advice on how long it might take to complete it. Use visual cues to remind you when you need to complete the course. Use the calendar, stickers or board to make sure you keep it in mind.

Pace yourself

Create a learning pace for yourself. Intentionally dedicate time for your learning and do this repeatedly so you may have a routine. In the same way, create an environment where you complete your work. These changes might seem minor but, they can train your mind. You will become more focused during a specific time or area.

Pay attention to your productivity and what's working for you. Do research and experiment with different times or working environments.

Take breaks

Taking breaks is one strategy I learnt the hard way because it is very crucial. Allow your mind to rest and refocus.

Taking breaks comes with some benefits that include:

helps you to stay focused and improves your memory retention.
relieving and reducing harmful stress levels.
re-boosting your energy when you feel depleted and tired.
improving your performance and creativity by giving yourself enough time to think of new ideas and approaches.
improving your health by positively impacting the immune system, reducing the risk of heart diseases, inflammation, posture and other conditions.

Techniques such as Podomoro have proven to help people improve their productivity while being excited and well engaged in what they are doing. Also, take advantage of the weekends and holidays to give your body and your mind some time to rest.

Improve your time management

Online learning paints a big picture portraying the importance of time management. How you manage your time is extremely crucial so, manage your time wisely. Cut down on some activities and remove distractions. Give yourself enough time to complete different tasks during the day. Block your time with a detailed to-do list. Plan the time to attend to your emails and your messages. Employ different apps or tools like calendars and reminders to help you keep track of your time. Add other activities like exercising to help you stay focused and stay healthy.

Take down notes

Notes are a great way to take down a good summary of what you are learning. They will give you a chance to slow down and pay attention to the details. As you take the notes, you will also be growing in your understanding of the concepts and ideas.

You can use:

a notebook,
Microsoft Word,
Google Docs,
or audio recordings.

Keeping track of your notes does not have to be restricted to the traditional way only. Do some research yourself and find applications that work for you.

Go the extra mile

We have all heard at some point in our lives, "Practice makes perfect." Well, spoiler, practice does make you better. Don't confine yourself to the learning material that you have. Practice with the new skills that you have learned. Don't just copy the exercises but, make a few changes of your own and experiment with different concepts. Deep dive into the skills you are learning by researching more and asking questions about them because the one to benefit from all this will be you. Always be willing to go the extra mile in your learning.

Collaborate

While working alone is good, working with others is better. When working with others, you can learn more as everyone has something different to bring to the table.

Here are some other benefits of working with others:

you will get the platform to help others understand and put your knowledge into practice.
motivating each other and holding each other accountable in your progress.
sharing diverse resources and opportunities.
developing your soft skills like effective communication and teamwork.

Leverage your network

The community that you are in during your learning is usually your closest network. There is a possibility that a lot of the online courses out there are being taken by professionals. Some of these professionals may include entrepreneurs and even CEOs. Showcase your skills as you are learning because someone might have an interest in your work.

Ask questions from those who have a lot more experience than you have. Be willing to learn more than what you are already learning but, make sure it does not fall too far to be a distraction. Take advantage of your community and grow your network.

These strategies are just a few to help you work towards getting the most out of online courses. This is your future, your time, your effort and your finances on the line. Make the most out of every opportunity you get because it could be the beginning of something great.

Still here? Thank you for reading. Please, let me know about your thoughts on this article in the comments or your appreciation in any way.

Best advice I ever got: My advice to you too

Matthew Rungwe — Thu, 15 Apr 2021 14:46:34 +0000

When I first started in Web Development, I had no idea where I was headed. I had chosen a career that was quite unique to my surrounding and I didn't have people to learn directly from. It took me months to navigate through the web and have a descent learning plan. A learning plan that was custom and not overwhelming. During this time of researching and trying to get started, I stumbled onto communities that really inspired and helped me. I read books, blogs, took courses and joined a few groups.

Looking back now, a lot of people had a hand in the way I grew as a developer. I am still growing too. In this article I am going to share just share some of the best advice I ever received that has played a pivotal role in upbringing, learning and work.

Set reasonable goals.

It's is very tempting to set unreasonable goals for your learning, your projects or for your work. Give yourself enough time to breathe and enough time to find a balance your social and work life. Cut down your tasks into workable components.

Goals help you to work towards your dreams because dreams without goals will amount to nothing.

Be willing to learn from others.

Learning this was humbling. You can not learn everything alone. We all come from different walks of life, everyone has a story to tell and and something to share. If you can't go through it yourself, listen to those who have been there.

A wise person is born from listening and learning from others. Don't go in alone when you can get help.

Share the little you know.

One thing that held me back for so long is that I was convinced that I didn't know enough until someone told me that, "until you let it out there, you will never know if it can help someone." Don't be afraid to share what you know. Your take about everything is important and you never know who how many people actually relate to you unless you try.

You will always have something unique to share. Allow others to learn from you.

You are the master of your own ship.

Your life is your is yours and yours alone. Take responsibility for your decisions and everything you do. Own your learning and your growth. You need to be able to motivate and inspire yourself to keep on going when things are tough.

Don't be afraid to take charge of your story and for creating a new path for yourself and for others.

What is your why?

Understand your why. Why are you doing what you are doing? Understanding this will carry you through your journey because you will go through phases when you don't understand what you are doing. Your why will remind you why you started this in the first place. Have an ultimate goal and a deep understanding of where you want to end.

Have passion in what you do and understand where you are coming from because that will carry you through the tough times.

Run your own race.

Understand that you are different. The way you do your things will always be different from others. Understand your pace, accept it and appreciate it. This gave me peace because I was a slow learner. The key if to always have a positive mind and feel comfortable with who you are and how God created you.

Set your values and your principle. Live by them.

Work with what you have.

Don't wait to be somewhere in order to start doing something.

I was surprised to eventually realise that I had most of the resources I needed in me and around me which allowed me to get started. Look intently at what you have around you. It does not only have to be possessions, your surrounding but your personality too. Yes, your work will take you half way but your personality will also do a lot of the work as you are growing.

Build habits.

Be consistent in everything you do. Build a routine around you life and the things that are important to you. Start making small changes today. It's never too late to start doing the right things and the things that you want to do.

Habits are are just tiny actions that will eventually sum up to something great.

You will find people that will appreciate you.

Finding a job or the communities that you will fit in is very hard. The truth is, after a long search, you will find someone or a group of people that are going to appreciate your personality and your experience. They will invest in you, employ you and help you grow.

It's okay to be different and to do things differently. If you are not sure, try it and see the benefits that follow.

This was some of the advice I got that played an important role in my growth as a Front-End Developer. This is also now my general advise to you because I have lived through it and it works.

Leave a comment and your thoughts about the article.

Thank you 👍.

How to be a good Mentor

Matthew Rungwe — Fri, 02 Apr 2021 18:08:55 +0000

Introduction

Everyone has the ability to teach the next person something. Okay then Matthew, if everyone can teach, why doesn't everyone do it? There is no one answer to this question. However, I believe that to be able to teach it has to come from the heart because the knowledge alone won't be enough.

In this article, I will try to go in detail on a few tips that can help you become a good Mentor. This article is also not just for those who have been assigned a mentee, or need to take up a mentoring role but rather a challenge to everyone.

"The world needs to learn from you and don't be afraid to take up the torch and shine it on someone's path."

Change your mind-set
What is a Mentor
Get to know your mentee, their goals and expectations
Plan your sessions
Show up and be present
Customise the experience for your mentee
Deliver honest feedback
Be willing to learn
Go the extra mile
Become a life coach
Let your mentee pick up their torch
Lead by example
Qualities of a mentor
To wrap up

Change your mind-set

Whenever we hear the word mentor we immediately assume that this is someone who has some amazing level of experience or someone who is going to be constantly telling the mentee what to do and how to do it. I don't believe so now and in this article we will see how a mentor can contribute even when they don't know much about the subject.

What is a Mentor?

For starters, let's ask ourselves, what is a mentor? "A mentor is an individual who acts as an advisor or coach for a less experienced or advanced mentee, providing expertise and professional knowledge from a more experienced perspective." by Indeed.

A mentor can be anyone who is at a level that the mentee wants to get to. I also think that both of you, mentor and mentee are going to be constantly learning from each other, this allows to keep an open mind and remove the sense of dependency.

Mentor:

You will constantly need to find different ways to explain a particular concept.
You will find yourself reading books or taking courses with the intent to understand more so you can pass it down to someone.
You are not the only one who needs to put in 100% of the work or be the source of information. Inspire the mentee to be independent so they can explore their own way of understanding too.

Get to know your mentee, their goals and expectations

Before you start having any official sessions with your mentee, have your first meet-up over coffee, lunch or a video call. Chances are the mentee would be scared about how everything will go, they will have questions and they just need to know you.

This will be your chance to break the ice:

Talk about who you are and how you want to help,
Allow the mentee to ask questions,
In turn, you can ask questions to better understand how you can help or have a better understanding of what you can do. Have a small questionnaire because it will help you to plan future lessons.
Have a casual conversation about your backgrounds and how you both came to be in the same environment.
Discuss the goals your mentee has so you may set dates and deadlines you are working towards.

This time allows you build respect and trust. By the end you should also have an idea of where you are headed. The goal is important because it will help in the planning.

"Listen more and speak less."

Plan your sessions

After you have had a talk about how you can help each other, quickly get down to planning. Chance are, you and your mentee have other commitments. This can include family, work, studies or hobbies. You need to take some time to figure out how you will make it work.

Agree on tools that you will use to communicate, how many physical or virtual meetups that you will need. Plan towards your goals and your expectations. Block your time by setting reminders on your calenders.

Show up and be present

Showing up for a session is half of the battle. You need to be:

proactive,
engaged,
attentive,
positive and
awake.

This should go without say, be prepared before your sessions or at least have a understanding of what the session is all about. As much a you will be letting the mentee do most of the work, it is only fair to be ready to answer the questions they might have.

If it's possible to switch off some distraction during your sessions, please do. This will not just help you stay focused but it will make the mentee feel special and valued because despite your busy schedule you have found time to prioritize them.

Your attitude towards your sessions greatly influences how your mentee performs.

Customise the experience for your mentee

Everyone has a different way of learning, as a mentor it your duty to also understand the unique way the mentee learns. Unfortunately, when it comes to leaning, one size does not fit all. There will be a lot of strategies to carry over but most of them need to be customised to suit your mentee.

So, one has to find comfort in the fact that the mentee is not them because no two people are the same. You are there to shine the light on most of the things they want to do although they might chose different paths. As a mentor you need to know when to respect and challenge their difference.

Learn to anticipate your mentee, sometimes they might be shy to ask something and you need to know how to read their speech and body language. Sometimes, you also need ask questions that your mentee may not have asked because it would be important if they did.

Deliver honest feedback

No one knows everything, the only way anyone can grow is if the people that love them also help by being honest about what they do. As a mentor, your mentee will depend on the feedback that you provide them. Be honest about their performance, don't be afraid to tell them what they did right and what they did wrong so changes can be made accordingly.

Offer constructive criticism where it is needed or a compliment when it has been earned. As much as you are pushing your mentee, don't push them away at the same time.

Hold each other accountable to the goals, expectations and the targets that you have set. If research or a project has to be done after a certain period, remind each other to abide to that deadline.

Be willing to learn

Be willing to up-skill or learn new skills. Learning as Developers has become part of our day to day lives. This idea holds through mentoring too as much as it is for our careers. This also holds for people in other industries too.

Don't depend solely on your experience and knowledge but be willing to take up classes, books or blogs that will help you offer the best experience to your mentee. Not doing this will deprive them. Learn alongside your mentee, you will be surprised at how much you might not have known or be impressed by the conventions that your mentee resorts to to solve problems.

Take the time to learn and research what you do not know or what you have forgotten if it's going to be crucial for your mentee and your goal.

Go the extra mile

Don't be afraid to invest in your mentee. Once you agree to the responsibility of taking on a mentee, the least you can do is offer everything that you can. It is a painful feeling of seeing you mentee struggle knowing that you could have done something to make their experience better.

There are so many ways you can go the extra mile like:

Picking up tailored resources for them where you can.
Schedule special events in recognition of the effort that has been made and the time that has been spent.
Support them with opportunities and referrals so the may grow.
Help them with professional networking.

Become a life coach

Sometimes you will find yourself doing more than just coaching but offering advice about other aspects of life: finances, relationships, health and even religion. We all know that life can be challenging and most of the time the reason we want to make changes in our life is beyond our desires but because of the circumstances in our lives that push us out of our comfort zone.

Help your mentee to navigate the balance between work life and social life.
Offer valuable, realistic and relevant advice.
Motivate and inspire your mentee to look beyond the life around them but what they can do and contribute.
Nature and inspire their decisions. Help them to become a better form of themselves and help them understand that their uniqueness is important.

Let your mentee pick up their torch

Remember, it's all about the mentee. Let them carve their own path and you be there to understand that path and guide them through it.

Your opinion and experience are very important, that's why you are here in the first place but it shouldn't take precedence over theirs. A simple reason is that, if something is more personal and dear to the mentee, they will see it through. If your mentee feels like a decision has been brushed onto them, they will eventually lose interest or be discouraged because they won't see the point of continuing.

Know when to take the long pause. Wait and let your mentee struggle through something or through finding a solution before you pitch in. It is through the hardships of learning that we can develop a solution that we can remember.

Don't be too far ahead and don't be too far behind either, be there, be active and be present.

Lead by example

Yes! Practice what you preach. Being a mentor is a lot of things and one of them it to be a leader. Be willing to take the time to show how something is done rather than just saying it. Allow your experience and knowledge speak for themselves.

Qualities of a mentor

This article began with the assumption that you already have the qualities to become a mentor. We can quickly discuss a few to give you confidence and confirmation that this is for you.

Being trust worthy: People are going to trust you with their time, their personal life, their ideas and their opinions. A lot of this will be disclosed in confidentiality because they will trust that you won't share this with others. You need to be someone who is trust worth.
Have expertise and experience on the subject: As much as you can do without expert knowledge in the subject, you need to have considerable experience with the subject to be able to teach the other person.
Have good time management: This is a skill that is crucial to have. Chances are that you are going to have a lot on your plate and you need to know how to navigate through it all or at least try. This is a good skill to impart on your mentee.
Have diverse perspectives: Experiment with different strategies so you can be able to tell what methods to immediately resort to in different cases.
Be able to adapt: You will find yourself in so many different situations and with people with different personalities. Be able to adapt and have a compatible personality. This will open up a lot of opportunities for you.
You need to love your work: Of course, right? Passion speaks for itself. It really helps if you love what you do because you will build tolerance, acceptance, humility and care in and towards your work.

To wrap up

In this are article we explored a few different ways that can help you make a stand as a good mentor. Mentoring is not just a question of whether you have the knowledge and the experience but a question of how you are going share the knowledge and the experience.

As a mentor, your listening, patience, tolerance, morality, attention and emotional growth will also be challenged. You are going to live in so many people's shoes and still find a way to make it work.

For me, despite all this work to become a mentor I wouldn't substitute the feeling you get when you see a smile on the face of your mentee after they have accomplished something or understood a concept that was seemingly impossible. That sense of gratitude they will have is what most mentors will be after and that feeling far out weighs the challenges, the late hours preparing, the time spent and the risks taken.

Still here? Thank you. You may leave a comment about your thoughts about this article.

This article was originally published at matthewrungwe.hashnode.dev

The Building Process of a Website or Web App.

Matthew Rungwe — Wed, 27 Jan 2021 20:47:31 +0000

So, you have a web project you want to start working on and have no idea how or where to start?

In this article, we will look at the general building process of a website or web application. This article can serve as a guide of how you can start and finish a website.

The Application Overview
Design the application
Decide on the technologies
Set up the project
Development
Test and Debug
Review the App
Deployment

The Application Overview

The application overview is essentially a broad but yet simple high-level explanation of the application's reach and purpose. The best way to imagine this is to think of a pitch where you outline the problem and the potential solution to it.

Design the application

Once you have a general working idea of the application, start working on the design. You can use tools like Sketch or Figma to create an interactive design of the web application you have in mind and how it will address your problem.

Advantages of having a design:

Having an idea of the UI outcome saves time than to figure it out as you go.
Saves money and resources by having to get feedback from yourself and others before development begins.
Allows you to be creative and to come up with ideas that can help you stand out.
Helps you decide on additional tools you might need to tackle certain features.

Give yourself a little bit of time to design your project. The development stage becomes a lot easier when you have a blueprint, a mock-up, to refer to when working.

Decide on the technologies

Yes! With a detailed application overview and design, you should be able to deduce the complexity and the needs of your application.

In Web Development. An application like a Todo List can easily be created by using HTML, CSS and JavaScript while an app like Netflix may require something more robust, a framework, like Angular, React or Vue to mention a few.

Some applications need to be in constant communication with the servers. Whereas, some may get by by handling the user data on the client-side. Understanding the needs of your application (having the overview and design) will help you to decide beforehand on what technologies to incorporate, which database to use or the deployment platform that will be best.

Setup the project

Next, you can start preparing to develop the application. Before we start developing, we need to create an environment for the project:

Creating a repository.
Creating a project in your repository to track your development.
Creating issues for the project, link them to your repository, assign them and link them to a milestone.
Creating milestones, your timelines, like design, development and testing.
Downloading packages and all dependencies.

Development

Aah, finally 😊 now you can start with your code. Recreate your design using your the coding languages you decided on and your favourite tools.

During this time, you will get to:

Spend a lot of time trying different ways to implement a feature.
Follow best practices and conventions.
Revisit your notes and take other short tutorials.
Become a close friend of Google, StackOverflow, Youtube or Grepper.
Create numerous branches and make several commits.
Create Pull Requests and close issues.

Test and Debug

This section is dismissed by so many. Test, test and test your code. Debug your code using Developer Tools in the browsers or any other tools. Make sure your application is not giving back errors, handling requests and data correctly.

Review the App

Take your application for a complete test drive. Pretend you are the user for a while, question everything and see how the application performs.

Also, having an extra pair of eyes won't hurt. Get a different opinion from a mentor or a trusted friend.

Get help from a Third-Party, run your application through Lighthouse. You can also do this during development or testing. Get a detailed report about your application's code to improve the app's performance.

If the review is critical and honest enough, you should be ready to present your idea to the world.

Deployment

Finally, lets show the world what we have been working on for the past few hours, weeks or months. Get a link that you can share and people can start benefiting from all the work you put in. There are so many deployment platforms out there, among them are Firebase, Netlify or Heroku.

Please, note that the tools, technologies and platforms mentioned in this article were just a short selection. There are so many technologies out there and discovering them is part of your adventure.

Let me know what you think in the comments below.

Update your GitHub profile using a README file.

Matthew Rungwe — Fri, 22 Jan 2021 08:03:00 +0000

Quite recently I learned about how to add a README file to my GitHub profile. In this article, I am going to share a 3 steps that will help you get it done.

Create a repository with your username name
Edit your README file
Maintaining your profile

Create a repository with your profile name.

A shown in the image above, create a new repository in your GitHub account with the same name as your username.

Other things to check:

The repository needs to be a public repository
Initialize the repository with a README file

Edit your README file

To add more information to your profile you can Edit README. The README file is pre-populated with some content to help you get started, curtesy of GitHub.

What can you add to your profile?

Introduction
Fun Facts
Banner
GitHub Stats
Contact Details

Maintaining your profile

You can maintain your GitHub profile just like you would any other projects. You can clone the code for the repository, you can pull the code and you can push it.

I wish you all the best with creating an attractive and inspiring GitHub profile because how you put yourself out there does matter.

You can let me know what you think below or even share your profiles to inspire others.

Writing code that is clean and code that inspires

Matthew Rungwe — Mon, 14 Dec 2020 22:24:56 +0000

So, finally, you now know how to write code or you have been doing it for a while but do you still feel like you could be doing more? A good place to start will be to go through your projects and take a closer look at the code that you have written and see if you can make it better.

In this article, we are going to look at a few ways that can help you to start writing not only code that is clean but also code that inspires. I hope that after this read, you will be able to have a different mindset, approach in the way to structure your files and also have a few ideas of where to begin with the process.

Change your mindset
Use comments
Separate concerns
Follow best practices
Refactor whenever you can
Use descriptive variable names
Be consistent in your style
Learn from others
Learn to read the documentation
Review your own code

Change your mindset

At some point in your journey, you will be in a position to share your work. For some, it may be sooner while for others even a little later in their career. Carry the mindset that you are not just writing for yourself, but rather the ides that you are writing for others. So, keep in mind that one day someone will go through your work. I also believe you would love to see a smile on their face and a nod of respect.

Use comments

Simple right? Then why do we forget to do it? The beauty of writing comments sometimes it's not just for the next person, it's actually for yourself.

Sometimes I find myself taking hours just to understand the code I wrote a few weeks or months back. You can quickly become a stranger to your own code. Now think, if you sometimes struggle with this, how about handing over a file like that to a colleague, a friend or a mentee. They would be disappointed if not hurt by the time they will need to spend just to understand the meaning of code you wrote.

Separate concerns

If you have been coding for at least a few weeks, I am sure you have asked yourself if there maybe another way to organize your code. It is important to separate functionality in the application that you are developing. As your application gets bigger and more complex, you need to be able to maintain it and there is no better way than to isolate each feature of the application into separate files. Guys in Computer Science will call this a loosely coupled system.

This idea can be as simple as writing HTML in it's own HTML file and writing JavaScript in it's own JavaScript file just so there will be a little order in your code. It can get as complicated writing your own API or base code that will depend heavily on modules that will communicate using import statements.

Follow Best Practices

Best practices are standard approaches that have been proven to produce effective results. These techniques (ways of doing things) are not there to guard you from being unique or creative but rather guide you towards developing systems that don't fall too far off from the standard scale.

The other beauty of best practices is that there will always be a lot of resources out there to assist you in solving the problems you come across during development or maintenance.

Refactor whenever you can

In addition to best practices, refactor as you go because you might not have enough time to come back and redo your code especially when you are working on a tight deadline.

In JavaScript, there were so many features that came with ES6 alone: arrow functions, template literals, ternary statements, symbols, de-structuring just to mention a few. In HTML we can now use semantic HTML elements which can even substitute a lot of ARIA attributes to improve accessibility.

Not only do these features simplify your code, you can also see a reduction in your file sizes which may not seem important in development but may very well play a role in the performance of your application in production.

Use descriptive variable names

Really Matthew? YES. I was part of the MWS Mentor Team for the Google Africa Developer Scholarship 2020 and had the privilege to review some of the projects submitted by students during the second phase. Some of the students would use variables like t for temperature and hu for humidity because they were building a Weather Web App. While to them it made clear sense but to others, it was painful process trying to understand what they were looking at.

Use variables that are meaningful and that describe the purpose they have been created for. Try not to use single letter variable names like xor y unless you are actually dealing with or referring to axes.

Be consistent in your style

As much as we want our code to look the same, it's a little hard. We all have a signature in our code, our way of doing things we say. Well, pick up a style and stick to it. If you prefer to have loosely defined variables or have them tied to an object, it's okay. However, try to maintain that approach through out your projects.

//JavaScript

// Loosely defined variables
let courseName = `Beginner's guide to Web Development`;
let courseRating = 4.5;

// Using objects
let course = {
    name: `Beginner's guide to Web Development`,
    rating: 4.5
}

Consistency may range from the code that you actually write to the architecture and technologies. If you are using a SASS as your CSS preprocessor try to hold to it throughout and not add LESS in the process.

Learn from others

As much as we don't want to admit it, there are some people that know how to do things better maybe because they have more experience or they may have spent a lot of time perfecting their technique and researching.

I improved my files structure by observing others mostly Angular folders generated by the CLI and HTML5 Up projects. I learnt how to organize my Data, Services and Interfaces from Deborah Kurata's code files on Pluralsight.

Sometimes, the way others do it just works. Don't wait too long to figure it out on your own when someone can save you all the time by learning from them.

Learn to read the documentation

This one is an interesting one. I was quite surprised when this idea popped up in my mind when I was planning this article. I am guilty of not spending enough time in the documentation of the technologies I use but it's something I am working on and I thought it would be nice to share anyway.

Reading the documentation allows you to stay up-to-date with the advancements in the technologies that you are using. You can adopt these improvements into your projects to save yourself from any vulnerabilities and to stay at the top of your game with you projects or your content.

I was inspired by Lea Verou, Deborah Kurata, John Papa and Brad Traversy from my courses on Pluralsight. They also happen to be experts in the Web Development industry.

Review your own code

It always amazes me how much changes I make when when I just dedicate a few hours to go through what I have written. Take a closer look at the code you have written and question yourself, "is there another way you could have written this?" or "are you sure there aren't any mistakes or misconceptions?"

It's always a good thing to go through your code again. You will always find some changes to make: it might be a comment to add or a better way to implement a function. This idea does not have to be independent to code alone, it can also apply to other aspects of life. Just take some time to go through what you do again and you will be amazed at the improvements you can make.

Writing code that inspires can take some time to be good at but it is not impossible. Try each time to improve the way you write your code and eventually you will get there because you can only get better if you try.

In summary, write you code as though you are writing it for a team and that it might potentially be a big thing tomorrow

Feel free to to leave a comment. Thank you for reading.

How to Stand Out as Developer?

Matthew Rungwe — Thu, 26 Nov 2020 10:36:44 +0000

When I first started out, this question never came up in my mind. Like most, we start asking ourselves this question when we are now preparing for a job or further along in your career.

So, what makes a you stand out developer? On a general note, be good at what you do. While this response is correct, it is vague as to what to focus on and is often interpreted as hard skills. In this article, I will share a little about what can stand out as a developer from when you starting out and throughout your career.

Master your Path
Become a problem solver
Develop an analytical mind
Be Innovative
Learn how to Learn
Know how to Communicate
Be able to adapt
Follow best practices
Manage your time
Have more you can bring to the table
Be consistent

Core Skills

Master your Path

First things first, you need to choose a path. For some it can be Front End Web Development, others Android Development or Cloud Engineering. After you've chosen a path, master it. You don't have to be perfect in the path that you chose but you do need to be competent in it and you need to understand a majority of the features in the path.

Become a problem solver

To those who are just starting out and those who have been in the industry for a while now, I think we can all agree that there is a great amount of problems that we get in writing the code. While we have people and databases to turn to:

It amazing when you can solve your own problems. Being a problem solver also means you need to be able to come up with ways to implement a feature or fix a bug and if solution one is not working, be able to come up with solution two. Be able to work around obstacles.

Be Innovative

Being innovative means being able to create a solution for a larger audience or to be deployed on a broader scale.
Our world is filled with challenges and struggles. Being a developer does not just mean you can write code for your organization or yourself but it also means you are in a place to design solutions, come up with ideas to a lot of problems being faced out there.

Transferable Skills

Transferable skills are soft skills. These can be carried across industries hence transferable. Soft skills are important because as a developer, you are designing and developing solutions for people and not just for yourself. These soft skills allow us to see beyond the screen and understand the world or live with it.

Learn to learn

Learning never really ends. There is always going to be something that you did not know, it can be a new technology or a more concise way to implement a feature. Be willing to learn yourself for growth and to improve the way you do things. Be willing to learn from others because everyone has something unique to share. Keep an open mind, never close your doors to growth because you never know what opportunity is around the corner. You can take a look at this article Your Learning Plan I wrote on setting up a learning plan.

Know how to communicate

Communication is extremely important. Most of your time as a developer is spent communicating, either with a team or with a client. Ask questions where you don't understand, it's better to be redundant but certain. Share ideas, raise concerns

Be able to adapt

Technology is constantly changing and evolving rapidly. New solutions are coming up into the market every single time. You need to be able to adapt and be flexible. Don't be hard bent onto one way of doing things, one language or one framework because you never know if there will be a new solution to eliminate the way the current solution is working. You need to be willing to learn new things and build on what you know.

Follow best practices

There is nothing that makes a Developer stand out more than the way they write their code. Your code needs to be clean and dry. It's okay when you write code that works and you can read it but it is even batter to write it in a format that others can be able to read. Keep it concise, use comments and refactor where you can and as you code.

Manage your time

Time management is crucial as a developer. If you have a problem, you will need to know how you will break it up and how much time you will spend on each module. Without good time management, you will find yourself missing deadlines, not having enough time to finish Task B, you will be overwhelmed, always stressed and under a lot of pressure. This is a quality that spans across multiple industries. Good time management instills order into one's life.

Have more you can bring to the table

It's important to know your path and mastering it. It's also exciting when you have more than your general skills to offer. For others it can be blogging, others podcasts and some, research. For many, these can be well recognise as hobbies.

Be Consistent

Be consistent in all you do. Be able to show up and put in the work to the things that really matter to you: this might be at your work place or in your learning. Hard work will eventually get you somewhere. Build as many habits as you can, this will automate your problem solving skills for all the situations you encounter every single day.

Being a developer is a stepping stone to bringing the creative world hidden within you. Everyone has this element of creativity, most just need the right tools to make it happen.

All in all: to stand out, to be good, to be competent and to be a sort after developer you need to have both Core Skills and Transferable skills. Also, be willing at any point to go the extra mile for what you love and believe in.

Your Learning Plan

Matthew Rungwe — Tue, 10 Nov 2020 09:06:05 +0000

At some point I think we have all realised that we are always learning something new every single day. It can be simple as a new word from a book you were reading or a podcast you where listening to, a shortcut on a keyboard or a new recipe. It can also get as complicated as learning a new programming language, building a certain component using a new framework or finally figuring out how to restructure your algorithm to solve a problem.

So, as compared to the the more simpler forms of learning that tend to happen without even trying or without knowing, the complex type does not follow the same pattern. When you are learning something complex, you may need a more structured approach, you need a plan.

Why do you need a more structured approach?

Our minds are officially one of the most complicated structures you can ever find. Despite this, there has been numerous researches to figure out how it works. However, in this article, we will mostly focus on how it stores information.

Our minds store information using an incremental design. An incremental design is more like a growth pattern, you start small and then end big.

This is how it should be and while there is nothing wrong with a deep dive, there is very good chance that you may miss the fundamental aspects of the new skill that you are trying to learn. Take it from the ground and build it right up.

Steps to planning your learning?

As yourself why:

Everything has to start somewhere, right? You can start by asking yourself why do you want to learn the skill so badly? Your 'why' is the reason you will keep moving when things get hard. Your why will be the reason you stay up for long hours and make sacrifices.

We all have different reason for why we want to make changes in our lives. Some it's because the people around them look down on them, some for someone they love, others want to grow, others it's a memory they are trying to honor and others do it to improve the life of their family. Let your learning be personal.
Have an overall Goal:

Where do you want to end up after your learning? Do you want to get a job or you just want to be well versed in the subject? You overall goal can be, "Becoming a MEAN Stack Web Developer" or "Becoming a Data Analyst". The more specific you are about what you want your major outcome to be the better.
Identify the resources you will use and your *learning method*:

While it is quite traditional to just pick up a book and start going word after word, it is important that you yourself understand your style of learning. Others learn from:
- Books
- Blog posts
- Videos
There are so many platforms out there to use, you can take a look at some of them in this article A Developer's Resource Inventory published on DevTo. This stage includes a lot of research and time but it is worth it.

If you are not sure which method works best for you, it is safe to stick to the method you have always used. However, you can still continue to explore other methods as you go.
Create some milestones:

If there is anything a lot of us forget to do during our learning it to give yourself a deadline for a particular section. How do you identify these sections? When you are busy identifying what resources to use in Step 3, you will definitely catch on to what needs to be completed first and so on.

The time frames you create can be in weeks or months. Keep it short enough to give yourself a little pressure and responsibility, and keep it long enough to be realistic and give yourself a break e.g. Finish the Introduction to HTML module or lesson in a month.
Identify platforms that will help you practice:

Practice, practice and practice. If I could put this at the top of the list I could. To become competent at what you do, you need to practice as much as you can. A few platforms you can try to test your knowledge are:
Practicing is an essential part of your learning as much a learning the skill.
Take down notes:

One of the things I realised over time it that notes are precious. These help you to refresh your memory or to work offline. For me, a concept makes more sense when I put it down on paper. I guess my mind will be more concentrated.
Join a community:

A community can be as simple as a blog that you follow Skillcrush, Sitepoint, Medium, DevTo. It can be chat groups Twitter, Slack, Quora or Stackoverflow. It can also be meetups or conferences in your area that you can attend. This list can be different provided the path that you have taken but the idea holds. It is nice to have a group that you can learn from or those who are where you want to be.

Don't forget to be active on these communities. Leave replies, comments and you will be surprised how much you know already.

Don't forget to ask for help when you get stuck. Don't spend more than a day on a problem when you can learn from others.
Reward yourself:

Don't forget to give yourself a pat in the back when you complete a milestone. This stage is important because you need to recognize your efforts and celebrate. You can take a night off, get some snacks, go out or anything that you would love to give or do for yourself for the commitment.
Start your learning:

Planning can take some time but it is all worth it. Abraham Lincoln put it well, you can see the image blow. Learning should be as serious as it should be fun.

I leave you with one of my favorite quotes that reminds me how important planning is.

Image by Quotelancy

Please, feel free to reach out in the comments.

Thank you.

A Developer's Resource Inventory

Matthew Rungwe — Tue, 03 Nov 2020 07:32:00 +0000

Resource Inventory

Have you ever found yourself thinking about a resource you used last time but can't remember its name or someone has asked you for resources and you can feel they are somewhere near but you can't seem to get to it?

In this article I will share a little about a tool called a Resource Inventory that can help you package all the resources that you use as a developer.

What is a resource?

This is a term that floats around quite a lot but what is it really? It is simply a service that is of value to an individual or an organisation, an asset. If lost, there will be great loss to the organisation as a whole.

What is an inventory

A inventory is just a listing, a compilation of services that are available for one or more target groups.

Advantages of keeping a Resource Inventory

Improves your productivity by having easy access to tools for your work.
Saves you time on searches. There is no need to spend tons of minutes searching when you have a resource to answer those kind of questions.
Speeds up development.
Easy to share with colleagues and friends.
Reduced risk of losing information that is important.
Makes you a better developer as you will have specific resources for each problem.
Keeps you organised as you will have everything where you need it.
It is flexible, adjustable and grows as you grow.
Mobile and portable since you can access your resources from anywhere provided you also deployed them on the cloud.

What a Resource Inventory can consist of?

We have spoken a little about what a resource inventory is and what you can get from it. To demonstrate this, I have added an example below with a part of my personal resource inventory.

Learning Platforms

Codecademy : Understanding a new technology in depth, I use this platform. Free and paid courses.
Udacity : Want to learn from the best and get certified by an internationally recognized organisation. Free and paid courses.
Pluralsight : Practice by doing. Pluralsight has video content, demos and projects that will expand your horizon and experience. All paid courses, a few free weekend access specials throughout the year.
Other platforms can be Udemy, Google Digital Skills, Skillshare and so many others. Just keep a short list to make your decision making easier.

Blogs

Skillcrush : Lifestyle in tech, sharing about numerous careers in tech. This blog is by far the most amazing and inspiring. They have a learning platform too.
Career Karma : Best advise for your career in tech. This Platform is also bundle with resources for beginners and experts in tech.
There are so many other blogs out there Github, Sitepoint,
Codeburst and many others. This all depends on your career path

Download Sites

Sitepoint : Books
Syncfusion : Books
Unsplash : Images
Coolors : Colour palettes and colour themes
Icons8 : Icons

Searches

Google anything you want to find.
Stackoverflow solutions and contributing to code errors and fixes.
Mozilla Developer Network or searching in the search engine with an mdn suffix in your query e.g. Javascricpt template literals mdn.

Mentors and Role Models

It is always nice to add a short column for role models nearby that inspire you.

Sal Khan : Found of Khanacademy and Educator
Colt Steele : Udemy Web Development Instructor
Elon Musk : A ferocious engineer and industrial designer, Founder and CEO of SpaceX
Priscilla Shirer : Christian evangelist, author (The Armor of God) and actress (War Room, Overcomer)

This was just a brief introduction to the potential of a resource inventory in your career. Your resource inventory will grow and become more complex as you advance in your career as a Software Engineer.

Feel free to leave a like or a comment about your read.

Thank you.

Forem: Matthew Rungwe

How to add a map to a Website or Web App using Mapbox

Table of Contents

Get your HTML file ready

Create a Mapbox account

What is Mapbox?

Get the Mapbox code to add to your application

The result of the HTML file after adding the code

Preview

Further reading

Getting the most out of Online Learning

Table of Contents

What does it mean to be an online student

Create a learning plan

Give yourself a reasonable deadline

Pace yourself

Take breaks

Improve your time management

Take down notes

Go the extra mile

Collaborate

Leverage your network

Best advice I ever got: My advice to you too

Set reasonable goals.

Be willing to learn from others.

Share the little you know.

You are the master of your own ship.

What is your why?

Run your own race.

Work with what you have.

Build habits.

You will find people that will appreciate you.

How to be a good Mentor

Introduction

Table of Contents

Change your mind-set

What is a Mentor?

Get to know your mentee, their goals and expectations

Plan your sessions

Show up and be present

Customise the experience for your mentee

Deliver honest feedback

Be willing to learn

Go the extra mile

Become a life coach

Let your mentee pick up their torch

Lead by example

Qualities of a mentor

To wrap up

The Building Process of a Website or Web App.

Table of contents

The Application Overview

Design the application

Decide on the technologies

Setup the project

Development

Test and Debug

Review the App

Deployment

Update your GitHub profile using a README file.

Table of Contents

Create a repository with your profile name.

Edit your README file

Maintaining your profile

Writing code that is clean and code that inspires

Table of Contents

Change your mindset

Use comments

Separate concerns

Follow Best Practices

Refactor whenever you can

Use descriptive variable names

Be consistent in your style

Learn from others

Learn to read the documentation

Review your own code

How to Stand Out as Developer?

Table of contents

Core Skills

Master your Path