DEV Community: Kodebae

How to remove a leaked .env file from GitHub permanently...

Kodebae — Sat, 31 Aug 2024 05:11:06 +0000

OOoooppss...

Ok we don't have time to waste, you did the unthinkable, it was a rookie move, but we need to fix it asap! I'll skip any further banter and cut straight to the case. Here's how were gonna do it...

Quick Summary:

Remove .env and commit the removal.
Use filter-branch to delete the file from history.
Force push the changes.
Clean up the local repository.

1. Remove the .env File and Commit

First, remove the .env file from your repository and commit the changes:

bash
Copy code
git rm --cached .env
echo ".env" >> .gitignore
git add .gitignore
git commit -m "Remove .env file and add to .gitignore"

2. Remove the .env File from History with filter-branch

Use Git’s filter-branch to remove the .env file from the entire history:

bash
Copy code
git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch .env' --prune-empty --tag-name-filter cat -- --all

3. Force Push the Changes

After running the filter-branch, you'll need to force push the changes to the remote repository:

bash
Copy code
git push --force --all
git push --force --tags

4. Clean Up Local Repository

Finally, clean up your local repository to remove the old references:

bash
Copy code
rm -rf .git/refs/original/
git reflog expire --expire=now --all
git gc --prune=now --aggressive

5. Revoke Any Leaked Credentials

As with any method, if your .env file contained sensitive information, revoke and regenerate those credentials immediately.

😅 You did it! Hopefully nobody saw that. Pat yourself on the back and please please please don't skip step 5. You need to revoke access and regenerate new credentials to insure that you don't get hacked. You've been warned...

Ok that's it, bye!

Credits:

Author: 👩🏽‍💻 Kodebae
Buy me a ☕️: (https://www.buymeacoffee.com/karmendurbin)
Website: (https://kodebae.github.io/kodebae-app/)
X: (https://twitter.com/karmen_durbin)

SEO for Engineers: How to Build Search-Friendly Features

Kodebae — Fri, 26 May 2023 17:56:06 +0000

How To Improve Your Website's Ranking and Reach More Customers

Introduction:

In today's digital world, implementing SEO on your website is essential for businesses of all sizes. Think about it, what's the point of having a website if nobody is going to see it? Advertising can be expensive, so we need to generate as much organic traffic as possible, but how do we do that?

As a software engineer, you play a key role in the SEO process. By incorporating SEO best practices into your development process, you can help ensure that your website ranks high in search results and yields a good ROI. But how do you get there without previous SEO experience?

In this blog post let's explore ways that you can improve your website's SEO ranking and reach more potential customers. That way you can get back to debugging your app. Yay!

Core Principles of SEO:

So what does SEO even stand for? SEO stands for search engine optimization. This is the process of improving the ranking of a website in the search engine results pages (SERPs). The key goal is to optimize your website for SEO, you can increase its visibility and reach more potential customers.

There are many different SEO techniques, but the topics we will discuss today are:

Keyword research:

This involves identifying the keywords that people are using to search for information online. Once you have identified your target keywords, you can use them throughout your website content, including your titles, meta descriptions, and headers.

On-page optimization:

You can significantly impact on-page optimization by optimizing crucial website elements such as meta tags, header tags, and URLs. By structuring webpages effectively and ensuring keyword relevance, software engineers can enhance search engine rankings and visibility.

Enhancing user experience (UX):

This refers to the overall experience that users have when they visit your website. Good UX design means its more likely that users will stay on your website and take the desired action, such as making a purchase or signing up for a newsletter.

Mobile responsiveness:

Mobile responsiveness is a key factor in SEO. According to this blog post by All Connect "Mobile phones generated over 60% of website traffic in 2022, with desktops and tablets only generating about 39%.". So it is important to make sure that your website is mobile-friendly.

Meta data & structured data

Metadata is data that provides information about other data. Profound isn't it? All joking aside in the context of SEO, metadata is used to provide information about your website's content to search engines like Google. This information can help search engines to better understand your website and to rank it higher in search results.

Structured data is a type of metadata that is used to mark up your website's content in a way that search engines can understand.

Backlinks:

Backlinks are links from other websites to your website. Backlinks are a valuable signal to search engines that your website is authoritative and trustworthy. You want as many backlinks as possible.

Monitor website performance:

In addition to SEO, its also important to monitor your website's performance. This includes things like tracking your website's traffic, bounce rate, and conversion rate. By monitoring your website's performance, you can identify areas where you can improve your website and increase its visibility and reach.

Stay updated with SEO trends:

SEO is a constantly evolving field. What works today may not work tomorrow. By staying up to date on SEO trends, you can ensure that your website is always optimized for search engines and that you are getting the most out of your SEO efforts. We'll also discuss techniques on how you can stay up to date on the latest trends.

Let's get this party started.

1. Keyword Research and Implementation:

Keywords are the building blocks of SEO. I personally use Google Ads as my keyword research tool for two reasons. First, it's free and easy to use. Secondly it's a Google product used to place ads on their search engine. Since your intention is to rank higher on Google, this is the perfect tool to use for keyword research.

Implementing these keywords strategically throughout the website's code, metadata, headings, and content can enhance your visibility on search engine result pages (SERPs). You should practice due diligence and collaborate with your teams to identify relevant keywords and key phrases that align with your projects purpose and target audience.

Target audience is another key point here and the topic could lead down a rabbit trail. Remember to research your target audience thoroughly. Another thing to mention is that you can't be everything to everyone. If you try you will become nothing to nobody. And your website won't rank either.

Checkout this Keyword Researching master guide by Moz

Moz Keyword Research Master Guide

2. On Page Optimization:

In today's fast-paced digital world, page speed is a critical factor for both user experience and SEO. These are my go to strategies for speeding up a website, quickly: You should optimize your website performance by minimizing file sizes, leveraging browser caching, and employing compression techniques. Faster loading times result in lower bounce rates, higher user engagement, and improved search engine rankings. Minify CSS, reduce image sizes, and remove unnecessary images from files to help boost performance.

A well-structured website not only improves user experience but also helps search engines crawl and index its content effectively. Having a well structured website will reduce bounce rates, the two go hand in hand. Reducing bounce rates is one of my main concerns when improving website performance for companies.

Put emphasis on on optimizing your website's content, structure, and code for SEO. This includes things like using relevant keywords throughout your content, optimizing your website's title tags and meta descriptions, and ensuring that your website is mobile-friendly.

3. Enhancing the User Experience

User experience (UX) plays a pivotal role in SEO success. Software engineers can contribute to a positive UX by optimizing website loading speed, ensuring mobile responsiveness, and designing intuitive navigation. By delivering a seamless user experience, you can reduce bounce rates and signal search engines that the website is valuable and user-friendly.

Here are some specific UX techniques that software engineers can use:

Optimize website loading speed: A slow-loading website will frustrate users and make them more likely to click away. As a software engineer, you can optimize website loading speed by minifying and caching your website's code, and by using a content delivery network (CDN).
Ensure mobile responsiveness: More and more people are using their mobile devices to access the internet. As a software engineer, you can ensure that your website is mobile-friendly by using a responsive design.
Design intuitive navigation: Make it easy for users to find the information they are looking for by designing intuitive navigation. This includes using clear and concise menus, and by using breadcrumbs to help users track their progress through your website.

4. Mobile Responsiveness:

With the rise in mobile device usage, search engines prioritize mobile-friendly websites in their rankings. Software engineers should ensure that their websites are responsive, adapting seamlessly to different screen sizes and resolutions.

My honest advice for making your website mobile-friendly:

Use a responsive design: A responsive design means that your website will automatically adjust to the size of the device it is being viewed on.
Use a mobile-friendly theme or template: There are many themes and templates available that are specifically designed for mobile devices.
Optimize your images: Images can slow down your website, so it is important to optimize them for mobile devices.
Test your website on mobile devices. Make sure that your website looks good and works well on mobile devices.

Employing responsive design techniques and testing the website across various devices and platforms can significantly impact your visibility and user satisfaction. You can implement responsive design with tools like: Flexbox, media queries, built in libraries like Material UI, and Bootstrap. Bootstrap is my personal favorite.

5. Metadata and Structured Data:

As a software engineer you should optimize SEO efforts with metadata, such as title tags and meta descriptions. These elements provide concise summaries of webpage content for search engine users.

Let's explore some tips for using metadata and structured data:

Use the correct schema.org markup: Schema.org is a vocabulary of structured data that is supported by most major search engines. When using schema.org markup, make sure that you are using the correct schema for your content.
Keep your metadata up-to-date: As your website's content changes, make sure that you update your metadata accordingly. This will help to ensure that search engines always have the most accurate information about your website.
Test your metadata: Once you have added metadata to your website, test it to make sure that it is working correctly. You can do this by using a tool like Google's Rich Results Test.

Meta data example code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example Page</title>

  <!-- Meta Tags for SEO -->
  <meta name="description" content="This is an example page for SEO structured meta data.">
  <meta name="keywords" content="SEO, meta data, structured data, example">

  <!-- Open Graph Tags for Social Media Sharing -->
  <meta property="og:title" content="Example Page">
  <meta property="og:description" content="This is an example page for SEO structured meta data.">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com">

  <!-- Twitter Card Tags for Twitter Sharing -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Example Page">
  <meta name="twitter:description" content="This is an example page for SEO structured meta data.">
  <meta name="twitter:image" content="https://example.com/image.jpg">

  <!-- Other Meta Tags -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="index, follow">

  <!-- Canonical Tag -->
  <link rel="canonical" href="https://example.com">

  <!-- CSS and JavaScript -->
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- Your Page content goes here -->
</body>
</html>

The tags in the head section of the HTML code provide information about the website to search engines and browsers. The charset meta tag specifies the character encoding used on the website. The viewport meta tag specifies the width and initial scale of the website in mobile devices. The title meta tag specifies the title of the website. The description meta tag provides a brief description of the website. The keywords meta tag specifies the keywords that are used to describe the website.

By including metadata in your website, you can help search engines to understand your website and to rank it higher in search results. You can also help browsers to display your website correctly.

Below is a brief explanation of each of the metadata tags:

charset: The charset meta tag specifies the character encoding used on the website. This is important for ensuring that the text on your website is displayed correctly for users of different languages.

viewport: The viewport meta tag specifies the width and initial scale of the website in mobile devices. This is important for ensuring that your website looks good on mobile devices.

title: The title meta tag specifies the title of the website. This is the title that will appear in the browser's title bar and in search engine results pages (SERPs).
description: The description meta tag provides a brief description of the website. This is the text that will appear in search engine results pages (SERPs).

keywords: The keywords meta tag specifies the keywords that are used to describe the website. This information is used by search engines to determine how to rank your website in search results.

Utilizing structured data:

Structured data is a type of metadata that is used to mark up your website's content in a way that search engines can understand. This allows search engines to display your website's content in a more prominent way in search results.

For example, if you have a product page, you can use structured data to mark up the product's name, price, and availability. This will allow search engines to display your product in a rich snippet in search results, which can make it more likely that users will click on your link.

Incorporating structured data markup enables search engines to understand and display the website's information more effectively, enhancing its visibility and click-through rates.

What are some of the benefits of using structured data for SEO?:

Improved click-through rate (CTR): Rich snippets can make your website's listings more visually appealing and informative, which can lead to an increased CTR.
Improved rankings: Search engines may use structured data to improve the ranking of your website's listings in search results.
More engagement: Rich snippets can encourage users to click on your website's listings and learn more about your products or services.

There are many different types of structured data that you can use on your website. Some of the most popular types of structured data include:

Product schema: This type of structured data is used to mark up product pages. When used correctly, product schema can help your product listings appear in rich snippets in search results.
Event schema: This type of structured data is used to mark up event pages. When used correctly, event schema can help your event listings appear in rich snippets in search results.
Recipe schema: This type of structured data is used to mark up recipe pages. When used correctly, recipe schema can help your recipe listings appear in rich snippets in search results.

There are a few different ways that you can utilize structured data on your website. One way is to use a plugin or extension for your website builder. Another way is to manually add the structured data markup to your website's code.

If you are not sure how to use structured data, there are a number of resources available to help you. The Schema.org website provides a comprehensive guide to structured data, and there are also a number of plugins and extensions available for popular website builders.

By using structured data on your website, you can improve your website's SEO and make it more likely that your website will appear in search results in a more prominent way.

6. Backlinks

Backlinks are links from other websites to your website. These are a valuable signal to search engines that your website is authoritative and trustworthy. The more backlinks you have, the higher your website is likely to rank in search results.

There are two main types of backlinks:

Dofollow backlinks: are the most valuable type of backlink. Dofollow backlinks pass PageRank from the linking website to your website. PageRank is a measure of a website's authority.
Nofollow backlinks: do not pass PageRank. Nofollow backlinks are often used for sponsored links or links from low-quality websites.

There are a number of things you can do to improve your website's backlink profile:

Create high-quality content: The best way to get backlinks is to create high-quality content that people want to link to. Your content should be informative, engaging, and well-written.
Participate in online communities: You need to participate in online communities related to your niche. This will help you to build relationships with other website owners and get them to link to your website.
Guest blogging: This is a great way to get backlinks. When you guest blog, you will be able to include a backlink to your website in your author bio.
Submit your website to directories: You can submit your website to directories is a great way to get backlinks. However, it is important to only submit your website to high-quality directories.
Ask for backlinks: You can also ask other website owners to link to your website. However, it is important to be polite and respectful when asking for backlinks.

| It is important to note that not all backlinks are created equal. Some backlinks are more valuable than others. The most valuable backlinks are those that come from high-quality websites that have a high domain authority.

You can use a variety of tools to help you build backlinks, such as Ahrefs, Moz, and Majestic SEO. These tools can help you identify high-quality websites that you can reach out to and ask for backlinks.

Building backlinks takes time and effort, but it is a valuable investment. By building backlinks, you can improve your website's ranking in search results and attract more visitors.

Here is a blog post by SEMrush with 41 tips on SEO. See how I just snuck a backlink into this blog? You're catching on now.

41 Tips SEO Checklist

7. Monitor Website Performance:

SEO is an ongoing process that requires continuous monitoring and analysis. Software engineers should utilize tools like Google Analytics and Google Search Console to track key performance metrics, such as organic traffic, bounce rates, and keyword rankings.

These insights help identify areas for improvement and inform future optimizations. In my professional career, I utilized Google Analytics for most of my clients projects. This visualized data helped me understand and unmask the audience. I learned what parts of the website they engaged with, and where they were coming from.

There are a number of tools that you can use to monitor your website's performance. Some of the most popular tools include:

Google Analytics: My favorite free tool that provides detailed information about your website's traffic, bounce rate, and conversion rate.
Webmaster Tools: Another free tool from Google that provides information about your website's indexing, ranking, and performance in search results.
Pingdom Tools: This is a paid tool that provides detailed information about your website's speed, uptime, and performance.

Check out this free course from Google on getting started with Google Analytics Basics.

Google Analytics 101

8. Stay Updated with SEO Trends:

The field of SEO is dynamic and constantly evolving. You must stay up to date with the latest trends, algorithm changes, and best practices and implement them into our work. Engaging with SEO communities, following industry blogs, and attending relevant conferences or webinars can help us as software engineers remain informed and adapt to strategies.

What are some tips on how to stay up to date on SEO trends?:

Read industry blogs and publications: There are a number of blogs and publications that cover SEO trends. By reading these blogs and publications, you can stay up to date on the latest changes to SEO algorithms and best practices.
Attend SEO conferences and workshops: SEO conferences and workshops are a great way to learn about the latest SEO trends from industry experts. And it's always fun to network.
Join SEO communities: There are a number of online communities where SEO professionals can discuss SEO trends and best practices. By joining these communities, you can network with other SEO professionals and learn from their experiences.
Use SEO tools: There are a number of SEO tools that can help you track your website's SEO performance and identify areas where you can improve. By using these tools, you can stay up to date on the latest SEO trends and make sure that your website is optimized for search engines.

It is important to note that SEO is a constantly evolving field. What works today may not work tomorrow. By staying up to date on SEO trends, you can ensure that your website is always optimized for search engines and that you are getting the most out of your SEO efforts.

Let's look at some of the latest SEO trends that you should be aware of:

Mobile-first indexing: Google has announced that it will be indexing websites for mobile devices first. This means that it is more important than ever to make sure that your website is mobile-friendly.
Voice search: Voice search is becoming increasingly popular. This means that you need to optimize your website for voice search.
Local SEO: Local SEO is important for businesses that want to attract local customers. This involves optimizing your website for local search results.
Content marketing: Content marketing is still a valuable SEO strategy. By creating high-quality content, you can attract more visitors to your website and improve your website's ranking in search results.
Social media marketing: Social media marketing can help you to improve your website's ranking in search results. By sharing your content on social media, you can increase your website's visibility and reach.

Conclusion:

By incorporating SEO best practices into your development workflow, you can significantly contribute to the success of websites in search engine rankings even as a software engineer. Understanding the core SEO principles, conducting thorough keyword research, optimizing website structure and performance, and monitoring performance metrics are all vital steps for enhancing websites' visibility and user engagement. By embracing SEO as an integral part of your work, you can amplify the impact of your websites digital footprint and ensure your website reaches the intended target audiences effectively.

That’s it, please follow me and subscribe for my next blog post on the inter webs.

Credits:

Author: 👩🏽‍💻 Kodebae
Buy me a ☕️: (https://www.buymeacoffee.com/karmendurbin)
Website: (https://github.com/kodebae)
X: (https://twitter.com/karmen_durbin)

SEO Image by NisonCo PR and SEO on Unsplash

How to Design a Scalable System Like Uber: Ride Sharing Micro Services

Kodebae — Thu, 11 May 2023 03:48:45 +0000

Ride-sharing services like Uber and Lyft have transformed the transportation industry by providing an efficient and convenient way for people to get around. However, building a ride-sharing system that can handle millions of requests per day, track drivers and passengers in real-time, and allocate drivers to passengers efficiently requires a highly scalable and fault-tolerant system. In this blog post, we'll explore how ride-sharing microservices can be used to design such a system.

What are Microservices?

Microservices is an architectural approach to building software applications that involves breaking down an application into a collection of loosely coupled services. Each service is responsible for a specific task or set of tasks, and communicates with other services using APIs or message queues. Microservices offer several benefits over traditional monolithic architectures, including:

Scalability: Microservices can be scaled independently of each other, allowing the system to handle spikes in traffic more efficiently.
Fault tolerance: If one service fails, it doesn't affect the entire system, as other services can continue to function normally.
Flexibility: Microservices can be written in different programming languages and use different data storage technologies, allowing developers to choose the best tool for each job.

Designing a Ride-Sharing System using Microservices

To design a ride-sharing system using microservices, we need to identify the different components of the system and break them down into individual services. Some of the key components of a ride-sharing system include:

Mobile app for passengers and drivers
Dispatching service
Geolocation service
Payment service
Database for storing user information and ride data

Let's look at each of these components in more detail and see how they can be designed using microservices.

Mobile App

The mobile app is the primary interface between passengers and drivers and the ride-sharing system. The app allows passengers to request rides, track the location of their driver, and pay for their ride. Drivers use the app to receive ride requests, navigate to the passenger's location, and receive payment for the ride.

To build the mobile app, we can create two separate services, one for the passenger app and another for the driver app. Each service can be developed independently, allowing us to make updates and changes to each app without affecting the other.

The passenger app service can communicate with the dispatching service to request rides and track the location of their driver. The driver app service can communicate with the dispatching service to receive ride requests and receive payment for completed rides.

Dispatching Service

The dispatching service is responsible for allocating drivers to passengers based on their location, availability, and other factors. The dispatching service receives ride requests from the passenger app service and assigns them to available drivers based on a set of rules and algorithms. The dispatching service also tracks the location of drivers and passengers in real-time to ensure that rides are assigned efficiently.

To design the dispatching service using microservices, we can break it down into several smaller services, including:

Ride request service: This service receives ride requests from the passenger app service and assigns them to drivers based on their availability and proximity.
Driver location service: This service tracks the location of drivers in real-time and sends updates to the dispatching service.
Passenger location service: This service tracks the location of passengers in real-time and sends updates to the dispatching service.
Ride allocation service: This service is responsible for assigning rides to drivers based on a set of rules and algorithms.

By breaking the dispatching service down into smaller services, we can scale each service independently and make updates and changes to each service without affecting the others.

Geolocation Service

The geolocation service is responsible for providing accurate location data for passengers and drivers. The service receives location updates from the mobile app services and provides this information to the dispatching service to assign rides efficiently.

To design the geolocation service using microservices, we can create two separate services, one for tracking the location of passengers and another for tracking the location of drivers. Each service can communicate with the dispatching service to provide location updates in real-time.

Payment Service

The payment service is responsible for processing payments for completed rides. The service receives payment information from the mobile app services and processes the payment using a third-party payment gateway.

To design the payment service using microservices, we can create a separate service for processing payments. The payment service can communicate with the mobile app services to receive payment information and with the dispatching service to confirm that a ride has been completed.

Database

The database is responsible for storing user information and ride data. The database should be designed to handle high volumes of read and write operations, and to ensure data consistency and integrity.

To design the database using microservices, we can break it down into several smaller services, including:

User service: This service is responsible for managing user accounts and authentication.
Ride service: This service is responsible for storing ride data, including pickup and drop-off locations, driver and passenger information, and payment information.

By breaking the database down into smaller services, we can scale each service independently and make updates and changes to each service without affecting the others.

Monitoring and Troubleshooting

To ensure that the ride-sharing system is working properly, we need to monitor and troubleshoot the system regularly. We can use various tools and techniques to monitor the system, including:

Logging: We can use logging tools to record system events and errors for later analysis.
Metrics: We can use metrics tools to collect data on system performance, such as response times and error rates.
Distributed tracing: We can use distributed tracing tools to track the flow of requests and responses through the system, making it easier to troubleshoot issues. (*This concept still feels a bit foreign to me)

Conclusion

In conclusion, designing a ride-sharing system using microservices can help us build a scalable and fault-tolerant system that can handle millions of requests per day. By breaking the system down into smaller services, we can scale each service independently and make updates and changes to each service without affecting the others. To ensure that the system is working properly, we need to monitor and troubleshoot the system regularly using various tools and techniques.

Here is a YouTube video that covers this SDE topic in detail.

System Design Tutorial Video Link

That’s it, please follow me to stay up to date on the next system design blog.

Kodebae 😉

Credits:

Author: 👩🏽‍💻 Kodebae
Buy me a ☕️: (https://www.buymeacoffee.com/karmendurbin)
Website: (https://karmen-durbin-swe.netlify.app/)
X: (https://twitter.com/karmen_durbin)

Cover Photo

Designing A Key Value Store : System Design Concepts

Kodebae — Fri, 17 Mar 2023 01:18:24 +0000

You've built an amazing app and it's ready to scale for millions of people all over the world. You're ready to collect lots of data from the people and utilize it to your fullest potential. But how will you store it all? Maybe you should consider a key value store. What's that?

According to "System Design Interview, an Insiders Guide" by Alex Xu.

A key-value store is a data storage system that stores data as a collection of key-value pairs, where each value is associated with a unique key.

Ok great! But how do you make one? Let's look at a (brief and watered down) overview of designing a key value store.

The following contains some system design concepts you should consider when designing your first key-value store:

Firstly, this type of data store is commonly used in many real world applications, such as caching systems, session stores, and distributed systems. You've already got an app that needs to store a lot of data. But what is the best way to distribute that data after the fact. The answer is, it depends. But before you make a final decision it's time to stop and consider CAP Theorem. Have you ever heard of CAP? 🧢 Of course it's not the cap you put on your head!

CAP stands for: consistency, availability, and partition-tolerance. In a nutshell the theory suggests that it is impossible for a database to maintain more than two of these concepts at a time. Click Here for an article with an in depth overview on the subject.

When designing a key-value store, you need to consider the trade-offs between consistency and availability. Consistency ensures that all nodes in the system have the same view of the data, while availability ensures that the system is always up and running. You should choose a consistency model that meets the needs of your application, such as eventual consistency or strong consistency. You will need to make a decision about the most important characteristics of your key value store. This means you'll need to select the right CAP to maintain your system accordingly.

Larger jobs require bigger storage. If your application requires more than one server you'll need to partition the data and store it on multiple servers. Depending on the size of your data set you may need to partition your data across multiple nodes or servers. Data partitioning is the process of dividing your data set into smaller subsets and distributing them across multiple machines. You should choose a partitioning scheme that allows for efficient data access and minimizes data movement. Consistent hashing with virtual nodes may be a good solution for your application.

You'll also need to decide the data model when designing your key-value store. You should determine what data you need to store and how you will store it. This is VERY important. For example, you might store strings, integers, or JSON objects as values. You may also need to consider how to handle large objects or values that are too large to fit in memory.

The storage engine is responsible for storing and retrieving data from the key-value store. You should choose a storage engine that can efficiently handle your data model and scale to meet your needs. Popular storage engines for key-value stores include LevelDB, RocksDB, and Redis.

To ensure data availability and durability, you may need to replicate your data across multiple nodes or servers. Replication ensures that if one node fails, the data can still be accessed from another node. You should choose a replication scheme that balances data consistency, availability, and performance. This system should also take accountability of handling failures into account. Failures can be minimized, but not avoided entirely (better luck next time).

Caching can help improve the performance of your key-value store by reducing the number of disk reads or network requests. You should consider implementing caching at different levels of the system, such as at the client or server level, depending on your performance requirements.

Finally, you should consider how you will monitor and manage your key-value store. You should implement tools to monitor system health, track performance metrics, and manage backups and failover procedures.

Building The System Architecture:

A key-value store is a type of database that stores data as a collection of key-value pairs. The keys are used to uniquely identify each value in the store, and the values are the actual data that is being stored. This concept may seem familiar if you know what "key value" pairs are.

Consider this, In a key-value store system architecture, there are typically three main components:

Client: The client is the user or application that wants to store or retrieve data from the key-value store. It communicates with the key-value store through a set of APIs provided by the store.

Key-Value Store: This is the main component of the system architecture that stores the key-value pairs. It receives requests from the client and processes them accordingly. The key-value store can be implemented using various storage technologies, such as in-memory, disk-based storage, or a distributed file system.

Data Access Layer: This layer is responsible for managing the storage and retrieval of data in the key-value store. It provides an interface for the key-value store to interact with the underlying storage technology.

In addition to these three components, remember to consider the other components such as load balancers, caching layers, and replication mechanisms that can help improve the performance and availability of your key-value store.

By considering all of these concepts, you can create a key-value store that meets the performance, scalability, and availability requirements of your application. That's it. If you have any questions or if you want to have a conversation about this concept. Leave me a comment below.

Engineering is supposed to be easy peasy lemon squeeze, but all I have is sour lemonade. 🍋

Author: 👩🏽‍💻 Kodebae
Buy me a ☕️: (https://www.buymeacoffee.com/karmendurbin)
Website: (https://karmen-durbin-swe.netlify.app/)
X: (https://twitter.com/karmen_durbin)

What are Graphs in Computer Science?

Kodebae — Fri, 10 Sep 2021 15:28:39 +0000

Today let's talk about the "BASIC" structure of graphs as they are used in computer science. I'm going to explain this concept in simple terms but understand that graphs are a very advanced subject. This is just enough information to get you up to speed with what a graph consists of in general. Don't fault me for the simplicity of this post.

What is a Graph?

A graph is an abstract data type that is a representation of Nodes and the connections between those Nodes. So yes, a Binary Search Tree would (technically) be considered a type of graph. Today we'll touch on three types of graphs, Directed, Undirected, Cyclic graphs. These graphs actually function exactly how they sound. Directed graphs have clear directions laid out along the edges, undirected graphs do not have a clearly defined route, and cyclic graphs represent one or more different cycles. Let's take a look at the main components of graphs and how they represent data, so we can get a better grasp of how everything fits together. Take a look at the example below to see how the structure of trees differ from other graphs.

Vertices

A vert, or vertices, or vertexes are what we would call each individual Node in our graph. So if you see a Node, think, "this is a vert". Great! So how are the vertices connected? The vertices are connected by the edges. Every single connection between the Nodes is an edge and they can go in different directions or in no particular direction at all. Sometimes our data isn't so "structured" and sometimes it is. We can use graphs to represent our data no matter how it fits together. Let's explore this concept with a directed graph.

Directed Graphs

With directed graphs, we represent data that moves in a specified direction, but they can be bidirectional between the Nodes and move in both directions. Check out the graph below. *Note that this graph is also cyclic. ⬇️

Now look at this graph. 'A' is a bi-directional graph, or a graph that can move in both directions. 'B' is only moving in one direction between the Nodes. ⬇️

As we can see from the image above bidirectional graphs have the ability to move in both directions.

We can use these connections to represent all different kinds of data. And this example shows us how our data flows to each of the Nodes. Time for a more imaginative example. Think about how we can use maps to direct us to buried treasure. Each Node could be a specific landmark, and each edge would be the direction we'd need to take to get to the buried treasure. There may even be multiple routes that we can take to get to the same treasure, though some routes may be faster than others. A bad analogy I know, but basically, we use the edges to guide us along the path that the Nodes have laid out via their connection to one another.

Undirected Graphs

What about the undirected graphs I mentioned before? Well, with undirected graphs, we could represent more unstructured yet measurable data. They are less structured and more abstract because the data isn't representative of a specific direction or destination like a map. The Nodes and data are still related to each other, but the specific order isn't necessarily one-dimensional. For instance the representation of LinkedIn connections. We don't need directions to represent this data. We just need to know that the Nodes are related to each other in some way.

Cyclic Graphs

With cyclic graphs, we could paint out a system of data connections. Maybe we want to represent the weather patterns throughout the year. We could use a cyclic graph to represent the temperature data of the seasons: Spring, Summer, Fall, and Winter, and then back to Spring. A graph is cyclic when you can start at one Node, move along a path, and return to the Node you started at. The first and last nodes are always the same. With cyclic graphs the edges connect in an abstract circular shape? You move through the graph via adjacent edges (or vertices). This is what represents the "cycle". The length of our cycle must always be greater than or equal to 3, or else it's not a cycle. See the picture below? This is a good example of the difference between cyclic and acyclic graphs.

Conclusion:

Now you know the difference between some of the most common graphs that you will see in data structures. Is the concept more clear now? I hope so. :)

**(waves bye)

Credits:

Author: 👩🏽‍💻 Kodebae
Buy me a ☕️: (https://www.buymeacoffee.com/karmendurbin)
Website: (https://karmen-durbin-swe.netlify.app/)
X: (https://twitter.com/karmen_durbin)

How To Create a Dictionary In Java

Kodebae — Fri, 26 Feb 2021 19:13:24 +0000

What Is A Java Dictionary?

The ORACLE definition is as follows:
"The Dictionary class is the abstract parent of any class, such as Hashtable, which maps keys to values. Every key and every value is an object. In any one Dictionary object, every key is associated with at most one value. Given a Dictionary and a key, the associated element can be looked up. Any non-null object can be used as a key and as a value."

When you think about everyday (book-like) dictionaries, what comes to mind? How do you use normal dictionaries when looking stuff up? Dictionaries allow us to look up the meanings of words that we may or may not fully understand. So how do dictionaries function in Java? The exact same way actually. We are able to access the stored values of specific keys within our Java dictionaries. Woah, did I lose you? Think about it like this...

Our word that we want to know the meaning of is our 'key' in Java. The meaning of that word or the definition is our 'value'. In Java, we are able to store information with something called 'key: value pairs' and these key-value pairs are directly reminiscent of a dictionary. In this tutorial, I am going to show you how I created an English to German dictionary in Java. I will leave links to my GitHub repo and other important resources below. Let's get coding.

Project Setup

We need to create our dictionary using a HashMap and then we will need to set it up to hold both English and German string values. Think about what kind of values your dictionary needs to hold. Don't forget to import the HashMap class and the Map interface. We can do all of that like this...

How to create a Java dictionary



import java.util.HashMap;
import java.util.Map;

// This program is an English to German dictionary created in Java utilizing the abstract Class "Dictionary" using a HashMap

public class dictionary {
    public static void main(String[] args) {
        // English to German Dictionary
        Map<String,String> englishToGermanDictionary = new HashMap<String,String>(); // creating a dictionary and setting both keys and values to String, could use any data type here. 
    }
}

Adding Values To The Dictionary

Now that we have our project instantiated let's add some key-value pairs. Since I am using the dictionary Class to create a literal English to German dictionary my key-value pairs will be strings with both English and German phrases. We can do all of that, like this.

Creating key-value pairs in Java



import java.util.HashMap;
import java.util.Map;

// This program is an English to German dictionary created in Java utilizing the abstract Class "Dictionary" using a HashMap

public class dictionary {
    public static void main(String[] args) {
        // English to German Dictionary
        Map<String,String> englishToGermanDictionary = new HashMap<String,String>(); // creating a dictionary and setting both keys and values to String, could use any data type here.
        englishToGermanDictionary.put("I'd like to practice German.", "Ich mochte Deutsch uben."); // adding English to German Strings to the dictionary
        englishToGermanDictionary.put("Could you repeat that?", "Konnten Sie das bitte wiederholen?");
        englishToGermanDictionary.put("Do you speak English?", "Sprechen Sie English?");
        englishToGermanDictionary.put("Where is the bus stop?", "Wo ist die Bushaltestelle?");
        englishToGermanDictionary.put("How much is this?", "Wie viel kostet das?");
        englishToGermanDictionary.put("Can I try this on?", "Kann ich es anprobieren?");
        englishToGermanDictionary.put("Could you take a photo of me?", "Konnten Sie ein Foto von mir machen?");
        englishToGermanDictionary.put("My name is ...", "Mine Name ist...");
        englishToGermanDictionary.put("Nice to meet you.", "Angenehm.");
    }
}

Getting Values From The Dictionary

Now that we have all of our strings input into the dictionary how do we get them out? I'm so glad you asked. Good ol 'sout' to the rescue! We could also just print all of the key, or maybe all of the values. Ok, there are a few ways to get values out of the dictionary actually. So I decided to demonstrate a few below.

Getting Keys and Values Out Of A Dictionary

package ArrayStringPractice;
import java.util.HashMap;
import java.util.Map;

// This program is an English to German dictionary created in Java utilizing the abstract Class "Dictionary" using a HashMap

public class dictionary {
public static void main(String[] args) {
// English to German Dictionary
Map englishToGermanDictionary = new HashMap(); // creating a dictionary and setting both keys and values to String, could use any data type here.
englishToGermanDictionary.put("I'd like to practice German.", "Ich mochte Deutsch uben."); // adding English to German Strings to the dictioonary
englishToGermanDictionary.put("Could you repeat that?", "Konnten Sie das bitte wiederholen?");
englishToGermanDictionary.put("Do you speak English?", "Sprechen Sie English?");
englishToGermanDictionary.put("Where is the bus stop?", "Wo ist die Bushaltestelle?");
englishToGermanDictionary.put("How much is this?", "Wie viel kostet das?");
englishToGermanDictionary.put("Can I try this on?", "Kann ich es anprobieren?");
englishToGermanDictionary.put("Could you take a photo of me?", "Konnten Sie ein Foto von mir machen?");
englishToGermanDictionary.put("My name is ...", "Mine Name ist...");
englishToGermanDictionary.put("Nice to meet you.", "Angenehm.");
// Retrieve the values by acessing the keys
System.out.println(englishToGermanDictionary.get("I'd like to practice German.")); // using the keys to access the German translation
System.out.println(englishToGermanDictionary.get("Could you repeat that?"));
System.out.println(englishToGermanDictionary.get("Do you speak English?"));
System.out.println(englishToGermanDictionary.get("Where is the bus stop?"));
System.out.println(englishToGermanDictionary.get("How much is this?"));
System.out.println(englishToGermanDictionary.get("Can I try this on?"));
System.out.println(englishToGermanDictionary.get("Could you take a photo of me?"));
System.out.println(englishToGermanDictionary.get("My name is ..."));
System.out.println(englishToGermanDictionary.get("Nice to meet you."));
System.out.println(englishToGermanDictionary.keySet()); // will print out all of the keys
System.out.println(englishToGermanDictionary.values()); // will print out all values

}


<br>

### What's So Great About A Dictionary


Alright, that we have seen exactly how the Java dictionary works and how to use it (on a very basic level), I bet you're wondering what the big deal is. There are **several advantages to using a HashMap over an Array.** For one thing, arrays have a fixed size and HashMaps do not. So we could in fact just keep adding values to this HashMap. Lookup is easy as long as we have the key, and in most cases is 0(1) or constant time, worst case 0(n). Another good thing is that most data types can be used. That means we could use int or even booleans with our HashMaps as well. So what are the **disadvantages?** There are a few, we actually can not control what order the keys are stored in. With arrays, our data would be indexed and easy to look up. All we would need is the index. But with a HashMap we actually have no idea where the info is going to be stored. I linked an article below that explains how **HashMaps are actually built on top of arrays.** 

### Conclusion

There you have it. Dictionaries are easy and simple and can be implemented to store key-value pairs. The keys and values can be accessed in different ways depending on what we need them to do. Please don't confuse HashMaps with HashTables in Java because they are in fact, different. I'll leave a link down below to an article that explains that in more detail. Well, that's it. What do you think of my English to German dictionary in Java? Leave me a comment or a <3. 

Goodbye, Take care.

Kodebae ;)


**Credits:**

Author: 👩🏽‍💻 Kodebae
Buy me a ☕️: (https://www.buymeacoffee.com/karmendurbin)
Website: (https://karmen-durbin-swe.netlify.app/)
X: (https://twitter.com/karmen_durbin)

### Links ---> 

> ORACLE Docs
https://docs.oracle.com/javase/8/docs/api/java/util/Dictionary.html

> My GitHub
https://github.com/kodebae/Data-Structures-And-Algorithms-In-Java/blob/main/src/ArrayStringPractice/dictionary.java

> HashMaps are built on Arrays?
https://www.interviewcake.com/concept/java/hash-map

> Difference between HashMaps and HashTables
https://www.geeksforgeeks.org/hashmap-treemap-java/

> A video Explaining HashMaps
https://www.youtube.com/watch?v=c3RVW3KGIIE

So, You Finished Your First Dev Project

Kodebae — Thu, 04 Feb 2021 04:39:54 +0000

Project Background Information

I just wrapped up production on my first real-world project for an application called MicroFund. MicroFund is a startup company that has not yet pushed its application to production. They are in the middle of an acquisition process. Our team of 5 developers was the second team to inherit this application/codebase. The purpose of the application is to connect individuals seeking small business grants to other businesses that are providing the funding called "partner administrators". The app in and of itself is owned by main administrators, referred to as the stakeholder in this blog post. This application has a multidimensional authentication process handled by OKTA.

Our stakeholder for this project asked for a serious revamping of the UX/UI for his application. The main concern for the stakeholder was ensuring that the interface was clean and able to match any partner logo designs. So the main color scheme of the app is black, white, and shades of grey. The look and feel of the application were the main focus of our project with major updates made to the backend database design.

When undertaking this project, my main concern was ensuring that we could meet as many UX/UI stakeholder needs as possible. My role in the team was wireframing, debugging, engineering architecture, and technical documentation writing.

Our Key Feature Updates

Main Updates To Features
Key updated features: Improved the overall user experience of the application. Overhaul of UX/UI design features. ThemeProvider implementation for individually styled-components. Creation of signup page for User Interface. Generation of user flow and new user stories.

Technologies Used
React Query, ThemeProvider, Java Spring.

Team Efforts:
Agile Planning Methodology
Wire Framing
Engineering Architecture
Feature Planning
Application Debugging
UX/UI Updates
FrontEnd Design
Generation Of User FLow & User Stories

Working With An App That's Not Working

As soon as we gained access to the application we quickly realized that our app was not functioning as expected. Our plans now need to be altered. The user roles were not working properly due to an unknown OKTA authentication issue. We discovered this issue after spending a significant amount of time trying to login to the application with the given credentials. The issue caused us to interact with the application in different ways. We all tried different approaches to get to the point of updating the admin and partner admin-related data.

Together as a group, we worked past a few blockers but we still needed to gain access to the applications dashboard and backend user tables. We did connected enough dots to lead to a more executable solution for the next team to inherit the application. We flushed out a lot of data for the application user stories and planned a lot of UX/UI updates. These updates were completed on time. The main blocker for this was finding a way to completely override all of the previous stylings which had been implemented in each individual component. The solution was a theme override via styled-components.

Example Of Theme Override Provider

module.exports = {
  '@primary-color': '#39ec39',
  '@link-color': ' #ec3944',
  '@success-color': '#52c41a',
  '@warning-color': '#faad14',
  '@error-color': '#f5222d',
  '@font-size-base': '14px',
  '@heading-color': 'rgba(0, 50, 0, 0.85)',
  '@text-color': 'rgba(0, 0, 0, 0.65)',
  '@text-color-secondary': 'rgba(0, 0, 0, 0.45)',
  '@disabled-color': 'rgba(0, 0, 0, 0.25)',
  '@border-radius-base': '2px',
  '@border-color-base': '#d9d9d9',
  '@box-shadow-base':
    '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',

  '@layout-header-background': '#9c9',
};

Updating The Documentation

One of my roles on our team was to update the technical documentation. My first step in writing the necessary documentation was ensuring that the application was clear to navigate. This was all included in the technical documentation file. Contents of the documentation file include; the necessary configuration instructions, environment setup instructions, as well as commentary on the known bugs of the application. Deployment information is included as well.

Documentation Snippet

Configuration Instructions
Please check the package.json file. You will need to install any dependencies you need when you start up the app. Another requirement is the .env file with the correct environment variables. These should connect to OKTA for authentication purposes.

Operation and Installation Instructions
This application is running React and React Query for the frontend of the application. You will need to have your environment set up to run the dependencies you see in the package.json file. You can install the required dependencies in the terminal. Be sure to install the correct

Known Bugs
Problems with user roles: Unable to differentiate or create user roles, blocks ability for user flow and user interaction. Can not sign in as a microentrepreneur which makes you unable to apply to the program, which makes it impossible for the main admin to accept or reject the application. Same for partner admins. An unknown issue with OKTA authentication process. Environment issues where some users may not be able to log into the backend of the application.

Future Updates To The Product

For the future of this application, the newest updates to the UX/UI would need to be carried over to the mobile version of the application. The creation of two more authenticated users is also relevant to this application's future development. With the multi-admin nature of this application continued updates to the user roles are imperative for future developers. Our team also created a new sign-up page that will need to be connected to the future application at some point in the app's continued development process. This could be challenging to navigate with the OKTA authentication process so proper planning will need to be set in place.

Peer Feedback

My peers did provide feedback for a few updates that I could make to the technical documentation. I incorporated our contact information and pictures from our social profiles in the technical docs. Since we worked on separate features than the previous team it was important to add a separate file specifying exactly what was added rather than erasing the previous documentation.

Final Thoughts

This project gave me a new appreciation for project planning and technical documentation. There is a lot of back and forth conversation that goes into fleshing out data. At times we spent hours talking, creating wireframes and plans. We had to make sure we checked each other's work. Spending hours talking through blockers and debugging problems via a Zoom chat was difficult. We spent our days in constant Slack communication while posting screenshots and code snippets from our computer screens. After all that hard work was done that information had to make its way to the technical docs. It is extremely difficult to navigate what needs to be included and what does not. We had to stay in constant contact with the team. Talking through our environmental issues, setup blockers, and missing data together.

So, what are my main takeaways? I have a newfound appreciation for software development teamwork and agile methods. I got to experience firsthand what it's like to work with an application that I did not build from scratch. I learned how to face challenges head-on and to keep asking questions, asking for help, reaching out to my peers, and pushing through to find answers. I was able to plan user stories and work with my team to redesign an application. We were able to ship features for a stakeholder's project. At the end of the day, I feel as though I have left labs with a newfound appreciation for development, and I feel more prepared to take on my next development role.

Apple M1 MacBook App Installation Guide

Kodebae — Tue, 12 Jan 2021 20:50:08 +0000

If you're a Mac lover and developer like me I bet you just assumed that the new M1 chip was compatible with your developer lifestyle. Well if you have tried to install Homebrew recently you learned that we were sadly mistaken in assuming the new M1 chip was out-of-the-box developer-friendly but, fret not. Follow my instructions below and you should be up and running in no time at all.

Let it be known that you will 100% need to install Rosetta2 before you can install Homebrew. And you should also know that Homebrew will be the easiest way to install Intel apps on your machine. The reason you will need to install Rosetta2 first is that Rosetta2 will allow you to run the Intel apps on your computer. At the time of writing this post, M1 Macs do not run Intel apps on their own. I will link an article for you directly below that gives detailed instructions on how to install Rosetta2 on your machine.

Do not, I REPEAT, DO NOT try to install Homebrew before you install Rosetta2. Side note this install might take a while. So pour a cup of coffee and wait.

How To Install Rosetta2

Now that you installed Rosetta2, you will need to follow the steps in the video directly below to install Homebrew. Please note that I did follow the steps in the video, but I did not use the audited script provided by the YouTuber. I will post the command I used below instead. One more thing, this one WILL for sure take a while. So pull up a chair, and wait.

How To Install Homebrew

My Script To Install Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)

NOTE: Why didn't I use the audited script provided in the Youtuber's description? I did try to use it, but it just didn't work for me. So I used the line of code posted above that a fellow developer sent to me. Once I got Homebrew installed I first used it to install Python3. To do that I entered the following commands into the terminal one at a time.

brew doctor *(return)

brew search python3 *(return) 

brew install python3 *(return)

Python installed fine for me after that. THERE you have it! You're Homebrew should be ready to install whatever you need it to now. So do you still need more help setting up the rest of your packages? Then watch the videos below next. The videos will walk you through the rest of the M1 Macbook setup.

More Videos: I have a few more resources for you to install even more Intel apps on your machine. Just skip the lengthy intros, unless you like that sort of thing. ;)

Thanks for reading!
**(waves bye)

Kodebae 😉

Credits:

Author: 👩🏽‍💻 Kodebae
Buy me a ☕️: (https://www.buymeacoffee.com/karmendurbin)
Website: (https://karmen-durbin-swe.netlify.app/)
X: (https://twitter.com/karmen_durbin)

Links —>

M1 Setup for Software Engineering

How To Install Intel Apps M1 Mac

How To Traverse A Binary Tree in Python

Kodebae — Tue, 20 Oct 2020 18:17:00 +0000

I decided the best way for me to understand basic data structures and algorithms is for me to write a little bit about them during my learning process. This is in no way an in-depth description of how these complex computer science concepts work. I'll be explaining things as though I'm talking to a 3-year-old. This is just a place for me to share simple notes and attempt to explain what I am learning. As I learn more, I'll publish more or update my postings. Like a diary but I'm gonna be talking about code and tech stuff and not my obsession with Shonen anime, ramen, and German culture.

Today I am going to explain what I learned about binary tree traversal. Please feel free to add anything in the comment section below, I'm always open to new ideas and perspectives as well as constructive criticism. Now on to the explanation.

From my understanding, there are two different types of binary tree traversal, Depth First Traversal (DFT) and Breadth First Traversal (BFT).

Firstly, Depth First Traversal is a way of moving forward through the Nodes while visiting each one in a certain order, moving from node to node left and right until we find a dead end. Every single node is visited, and the order changes based upon the type of DFT. There are 3 types of DFT: inorder, preorder, and postorder traversal. These different types of DFT can be implemented recursively or iteratively. We might make the choice to implement recursively if we're using a stack.

Inorder traversal ~ left, Node, right. As the name suggests, this would potentially print in order.

Preorder traversal ~ Node, left, right.

Postorder traversal ~ left, right, Node.

Here is what an inorder traversal could look like in Python:

class TreeNode: def _init_(self, val=0, left=None, right=None): self.val = val self.left = left self.right = right def helper(root, res): if root is None: return helper(root.left, res) <----- The left res,append(root.val) <----- The Node!!! helper(root.right, res) <----- The right def inorder_traversal(root): result = [] helper(root, result) return(result)

As we can clearly see from the above example written in Python (that I grabbed from a video for educational purposes) the patterns... (like 'left, right, Node') no matter what the order is, inorder, postorder, or preorder, it can be CLEARLY seen in the code.

The only part that we need to pay attention to are the lines with the arrow. Let's call them left, right, and NODE. The only part of this code that needs to change is the placement of the append for us to manipulate this code to write all three different DFT's.

Remember left, Node, right was the order for inorder traversal. So if we wanted to change this code to make it a postorder traversal, we'd just move the "Node" line of code down one to where "helper(root.right, res)" is and basically move the "right" line of code up one, we're switching the Node line with the right line to make the order 'left, right, Node'.

I didn't want to breakdown the entirety of the code. I just wanted to touch on the fact that all three DFT's can be written almost the exact same aside from three small lines of code.

Now on to the BFT's.
In a Breadth First Traversal (sometimes called a level order traversal), we would need to visit all of the Nodes on the same level before we move on to the next level. We can't do this with a recursive function. We need to utilize a queue to do this. The data structure for a queue is first in first out. And I'll talk about queues in another post. :)

**(wink wink)

Credits:
Author: 👩🏽‍💻 Kodebae
Buy me a ☕️: (https://www.buymeacoffee.com/karmendurbin)
Website: (https://karmen-durbin-swe.netlify.app/)
X: (https://twitter.com/karmen_durbin)

Understanding Binary Tree Traversal in Python

Kodebae — Thu, 15 Oct 2020 03:08:54 +0000

Today I am going to explain what I learned about binary tree traversal. Please feel free to add anything in the comment section below. I'm always open to new ideas and perspectives as well as constructive criticism. Now on to the explanation.

From my understanding, there are two different types of binary tree traversal, Depth First Traversal (DFT) and Breadth First Traversal (BFT).

Inorder traversal ~ left, Node, right. As the name suggests, this would potentially print in order.

Preorder traversal ~ Node, left, right.

Postorder traversal ~ left, right, Node.

Here is what an inorder traversal could look like in Python:

 class TreeNode:
    def _init_(self, val=0, left=None, right=None):
        self.val = val
        self.left = left
        self.right = right
def helper(root, res):
    if root is None:
        return 
    helper(root.left,  res)   <----- The left
    res.append(root.val)     <----- The Node!!!
    helper(root.right,  res)  <----- The right
def inorder_traversal(root):
    result = []
    helper(root, result)
    return(result)

As we can clearly see from the above example written in Python (that I grabbed from one of my school videos for educational purposes) the patterns... (like 'left, right, Node') no matter what the order is, inorder, postorder, or preorder, it can be CLEARLY seen in the code.

I didn't want to breakdown the entirety of the code. I just wanted to touch on the fact that all three DFT's can be written almost the exact same aside from three small lines of code.

Now on to the BFT's.
In a Breadth First Traversal (sometimes called a level order traversal), it's more simple. We would need to visit all of the Nodes on the same level before we move on to the next level. We can't do this with a recursive function. We need to utilize a queue to do this. The data structure for a queue is first in first out. The actual concept is a bit more complex than that but I just wanted to give a general rundown of how it works. I did find this article on Geeks For Geeks on Python queues. ----> https://www.geeksforgeeks.org/queue-in-python/