It doesn't matter if you're just starting out or have been coding for years. Knowing how to effectively use Developer Tools (DevTools for short) can significantly boost your development process. You can edit pages on the fly, quickly spot issues, and deeply understand your site's performance.

All major browsers have their own DevTools that let you examine the code of a webpage, evaluate its metrics, and run some tests alongside. This article will discuss Chrome's DevTools, as it's the industry standard.

Table of contents:

• What is Chrome DevTools?
• How to Open Chrome DevTools
• Keyboard shortcuts for Easy Navigation
• Key Chrome DevTools Features
• Practical DevTools Use Cases
• Conclusion

What is Chrome DevTools?

Chrome DevTools is a set of tools that are essential for diagnosing and solving web development challenges, directly within the Google Chrome browser.

It gives you direct access to a website's inner workings - to inspect HTML and CSS, debug JavaScript, analyze performance, and see the immediate impact of your code, all in realtime.

This direct access to a website's inner workings is crucial for diagnosing issues quickly and efficiently, ensuring your web applications are both performant and bug-free.

A grid of elements, console, performance and network panels screenshots

How to Open Chrome DevTools

To open DevTools in your Chrome browser, you can either:

1. Right-click on any webpage and select inspect from the list of options.
2. Use the shortcut (command + option + I on Mac or control + shift + I on Windows).
3. Click the three dot icon next to your profile picture on your Chrome browser, choose 'More Tools' and 'Developer Tools' from the second option box.

It usually opens in a split screen interface, either below your current webpage or beside it. Once open, its features line up as tabs at the top of the DevTools window. These tabs include: Elements, Console, Source, Network, Application, Security, Memory, Performance, Audits.

Keyboard Shortcuts for Easy Navigation

1. Use Cmd or Ctrl + Shift + C to open the Elements panel
2. Use Cmd or Ctrl + Shift + J to open the Console panel
3. Use Cmd or Ctrl + ] to move forward to the next panel
4. Use Cmd or Ctrl + [ to move back to the previous panel

Key Chrome DevTools Features

DevTools is packed with features essential for web developers to streamline various aspects of their workflow. Let's look at a few of them in some detail now.

Elements Panel

This panel is used for inspecting and modifying the HTML and CSS of a webpage in real-time, which is great for debugging layout issues or experimenting with new styles before applying them in your actual code. You also get to see how the DOM (Document Object Model) is structured.

Imagine fine-tuning your website's footer appearance (background color, font size) directly in your browser and seeing the results instantly.

With DevTools open, click on the Elements tab to access it.

A screenshot of Chrome DevTools' Elements panel

Console Panel

This panel serves as your interactive playground for JavaScript within the browser. Whether you're tracking down an elusive bug with a quick console.log() or experimenting with DOM elements, in the Console panel you can test snippets of JavaScript and view any logs or errors in the currently loaded webpage.

To use it, simply open DevTools and select the "Console" tab or use the shortcut (option + command + J on Mac or contrl + shift + J on Windows).

A screenshot of Chrome DevTools' Console panel

Network Panel

This panel gives you an overview of all network activity on your webpage – from tracking every resource that is loaded to how your site communicates with servers.

If you've wondered why your website takes forever to load or why some API requests seem to vanish into thin air, the Network panel is your go-to as it provides insights into the success or failure of API calls.

To access it, open DevTools and navigate to the "Network" tab.

A screenshot of Chrome DevTools' Network panel

Performance Panel

This panel is used for capturing and analyzing a website's performance metrics. It shows all the activities happening when interacting with a page.

When your web app starts to crawl under heavy usage, the Performance panel can pinpoint where the performance bottlenecks lie so that you can resolve these issues, ensuring your app runs smoothly.

With DevTools open, click on the "Performance" tab to use it.

A screenshot of Chrome DevTools' Performance panel

The above are only a handful of the panels available, but they're by far the most popular and must-knows. Using them properly will make your development processes more intuitive and rewarding.

Practical DevTools Use Cases

In the following interactive examples, I intentionally created the mini project in Codepen with issues to simulate real-world debugging scenarios using Chrome DevTools.

I figured it'd be a great way to highlight the practical uses of certain DevTools panels and features in identifying bugs and troubleshooting right in the browser.

Prerequisites

• Chrome browser (Click this link to download)
• A basic understanding of HTML, CSS, and JavaScript
• Codepen

See the Pen Modal Window by Ophy Boamah (@ophyboamah) on CodePen.

How to Debug HTML and CSS with the Elements Panel

Our mini project contains a modal that, upon clicking, should display a modal window with some important information. But there's a bug preventing this from happening.

This situation sets the stage for a practical demonstration of how you can use the Elements Panel to troubleshoot and resolve styling and structural issues.

<body>
  <button class="show-modal">Click me to learn a secret 🤫</button>

  <div class="modal hidden">
    <button class="close-modal">&times;</button>
    <h1>Hey Ophy here 👋🏾</h1>
    <p>
      I lead Women Who Code Frontend, a global remote community of 3,000+ women frontend devs and enthusiasts. Find us on beacons.ai/wwcodefrontend
    </p>
  </div>
  <div class="overlay hidden"></div>

  <script src="script.js"></script>
</body>

.hidden {
  display: none;
}

.modal {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 70%;

  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
}

In our modal's HTML code above, we've added the class name 'modal hidden' which has a corresponding styling with the CSS property of display:none that is set to hide the modal when the page is loaded initially and only display it when the button is clicked.

✅ Step 1 - Initial inspection:

Attempt to trigger the modal by clicking on the 'Click me to learn a secret' button. Since we've set that up not to work, right-click on the area where the modal should appear and choose "Inspect" to open DevTools' Elements Panel.

✅ Step 2 - Diagnose visibility issues:

In the Elements Panel, locate the modal in the DOM to see that the modal is present but not visible. This confirms that the bug is caused within our CSS code display: hidden.

As soon as you click on the modal in the DOM, any corresponding CSS classes will be pulled up within Styles at the bottom section of the Elements panel. You can toggle some properties on and off or type others to see the effects in real-time.

Manually change the class name from modal hidden to modal block to trigger the right properties that'll cause the modal to show.

A screenshot of debugging the modal's HTML, CSS in Elements panel

✅ Step 3 - Center the modal:

Now the modal is visible, but it's displayed at the top – which is different from where we'd like it to be (that is, in the center of the page).

To change this, modify the transform property to translate(-50%, -50%) by adding the second -50% and ensure that top: 50%, and left: 50% are correctly set to center the modal on the screen.

✅ Step 4 - Enhance the appearance:

You can go further to refine the modal's appearance by tweaking its background-color, padding, or other stylistic properties directly within the Styles to achieve the desired look and feel.

A GIF fixing the modal in Chrome DevTools' Elements panel

Debug JavaScript with the Sources Panel

I added a bug in the JavaScript code of our modal mini project to prevent it from opening when the button is clicked.

In the real world, this would cause neither the open nor close commands to trigger any action, which would leave users unable to interact with the content and frustrated as a result. Let's troubleshoot and debug this issue in the Sources Panel.

In the code below, the openModal function is set to remove the indicated classes. However, this doesn't work because we deliberately misspelled hidden.

// Introducing a bug: Incorrectly spelling 'hidden' as 'hiddn'
const openModal = function () {
  modal.classList.remove("hiddn"); // Intentional bug
  overlay.classList.remove("hidden");

  // Fetch data from a real API and display in the modal
};

✅ Step 1 - Set up breakpoints:

Open Chrome DevTools and navigate to the Sources Panel. Here, find the JavaScript file that includes the modal functionality (in our example its pen.js).

The openModal function contains the logic for displaying the modal on the screen. This function will include a line where the modal element's class is manipulated to remove a "hidden" class.

Click on the number next to this code line in DevTools. A blue (or sometimes red, depending on the theme) icon appears next to the line number, indicating that a breakpoint has been set. This breakpoint will pause the execution of our JavaScript code as soon as it reaches this line.

A screenshot of setting breakpoints the modal's JS in Sources panel

Breakpoints pause code execution at critical points, allowing you to inspect the current state of variables and understand the flow of execution. This step is crucial for identifying where the code deviates from expected behaviour.

✅ Step 2 - Examine the code execution flow:

With our breakpoint in place, try to open the modal by clicking on its button. Execution of our JavaScript code now pauses at our breakpoint, which enables us to step through the code line by line.

This is an opportunity to observe variables, function calls, look for anomalies such as misnamed functions, incorrect logic, or uncaught exceptions that could explain why the modal isn't working.

In our case it's because we intentionally misspelled the class name hidden as hiddn. Fix that in the code to get the modal working again.

A GIF troubleshooting the modal bug in Chrome DevTools' Elements panel

Optimize Performance with the Network Panel

Here I've added a fetch function that makes an API call to a live endpoint (https://jsonplaceholder.typicode.com/posts/1). This is an excellent opportunity to explore the Network Panel's capabilities in diagnosing and understanding network-related problems.

From the code below, you can see that the openModal function doesn't only open the modal but also makes an API call to the jsonplaceholder endpoint to fetch some data.

const openModal = function () {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => document.getElementById('modal-content').innerText = json.title)
    .catch(error => console.error('Error loading the content:', error));
};

✅ Step 1 - Initiate the API call:

On the modal project UI, click on the 'Click me to learn a secret' button. Though the modal does not visibly activate, because of the fetch logic within the openModal function, an API call will be made.

✅ Step 2 - Network Panel Inspection:

Ideally, your Network Panel should be open before clicking the button, but you can also reverse the steps. Detailed insights on your API request such as the request's method, status code, response and the time it took to complete, will be available under headers, preview, response, initiator and timing tabs respectively.

A screenshot overview of API request in Network panel

✅ Step 3 - Simulating Network Conditions:

Use the Network Panel's throttling feature to mimic various network speeds like offline or slow 3G to see how the API request behaves under constrained conditions.

From this you can compare how different network speeds can affect application performance. This will teach you the importance of optimizing data loading strategies to enhance user experience, especially on slower connections.

A GIF observing API requests and responses in Chrome DevTools' Network panel

Conclusion

Bringing Chrome DevTools into your web development routine is not just about fixing bugs. It's about streamlining your workflow, making your sites more accessible, and boosting their performance.

Through our modal window mini-project, we've seen firsthand how DevTools can address a wide array of development challenges, but that’s merely scratching the surface of what it can do.

As you continue to explore its capabilities and familiarize yourself with its features, you'll find it's an invaluable companion on your web development journey – designed to make your development process not just faster, but also more rewarding.

• The Official Chrome DevTools documentation
• How to use the Chrome DevTools to troubleshoot websites

You might have also needed to do this by either using a user-defined function or not using any function at all.

If this problem seems kind of complicated to you, then don't worry! I have come to help you. So, let's dive into the question real quick and see how it works.

🎥 If you are the kind of person that loves to follow along with a video too, I have also created a video for you:

Understand The Question – Then Start Solving

For solving any kind of problem, the first thing you have to do is to understand the question first. Not only that, you also need to pay close attention to all the instructions including the required criteria for solving that problem.

If your question asks you to use recursion, that's the technique you'll employ. If your question asks you not to use any built-in special functions, you'll avoid those.

For this article, I will be using only one question but with two different criteria. I will go through the process to help you understand what you would need to do from the beginning for solving the problem.

Here's the question with its criteria:

Create an integer array. Take the array elements as input from the user and print all the array elements in the given order and later in reverse order. You can't use any user-defined function.

Alright, now that we have our question, make sure you've read it fully. If reading it through one time does not make it clear in your mind, then read it two or three – or even more – times.

Then also look into the given criteria carefully. The question tells you that you can not use any user defined function. That means you can not add any kind of manually user-defined function in your code like myFunction(), and so on.

For this article, I will be using the C++ programming language. But if you can understand the core concept then you can use any other programming language to solve this problem. After solving the problem, make sure to add your solution to this GitHub repository.

Also, if you like to solve problems using programming languages, then make sure to check my ongoing YouTube playlist where I solve problems using the programming language.

How to Solve the Problem

In C/C++, if you declare an array without initializing the value, then you need to specify the array size as well.

When you declare the array with the array size, it automatically takes the necessary space in the memory for the entire array. So, if you take a larger array than you actually need, you will waste memory, as it takes the full space in memory for the full array whether you use all the indexes or not.

So first, we want the user to input the array size (how many numbers they want us to process). Then we will create the array with the given array size. In that way, we can save unnecessary memory wastage.

Well, as today's computers are more powerful, you would likely not notice any differences in memory wastage, as it would be pretty negligible. But trust me, you do need to understand how to save memory as that is one of the biggest concerns in today's world. Also, you never know when this knowledge will help you later, right?

    cout << "Enter the array size: ";
    int arraySize;
    cin >> arraySize;
    int arr[arraySize];

Well then, after declaring our array, we will take the array elements from the user. We can simply use a for() loop for that.

    cout << "Enter the array elements " << endl;
    for (int i = 0; i < arraySize; i++)
    {
        cin >> arr[i];
    }

In this way, we can take each value from the user and store it in our array in a sequential way. Keep in mind that the array always starts from the 0 index (the first element is at index 0, the second is at index 1, and so on).

Now it is time to print all the array elements (the value that each index of the array has) in the given order. That means we have to print the entire array in the same order we received from the user.

    // printing the array in the correct order
    cout << "Printing the array in the original order" << endl;
    for (int i = 0; i < arraySize; i++)
    {
        cout << arr[i] << " ";
    }

For printing the array in reverse order, we can simply print the array in a backwards direction. In this way, the last indexed value from the array will get printed first. Then the second to last indexed value (from the right side of the array) would get printed in the second position, and so on.

    // printing the array in the reverse order
    cout << "\nPrinting the array in the reversed order" << endl;
    for (int i = arraySize - 1; i >= 0; i--)
    {
        cout << arr[i] << " ";
    }

That's it! Through this, you can solve the problem easily. Notice that we did not use any kind of user-defined function in our entire code. Thus, we also made sure that we successfully met all of the criteria.

The entire code now looks like this:

#include <bits/stdc++.h>
using namespace std;

int main()
{
    cout << "Enter the array size: ";
    int arraySize;
    cin >> arraySize;
    int arr[arraySize];
    cout << "Enter the array elements " << endl;
    for (int i = 0; i < arraySize; i++)
    {
        cin >> arr[i];
    }
    // printing the array in the correct order
    cout << "Printing the array in the original order" << endl;
    for (int i = 0; i < arraySize; i++)
    {
        cout << arr[i] << " ";
    }
    // printing the array in the reverse order
    cout << "\nPrinting the array in the reversed order" << endl;
    for (int i = arraySize - 1; i >= 0; i--)
    {
        cout << arr[i] << " ";
    }    
}

Here's another example question and criteria:

Create an integer array. Take the array elements as input from the user and print all the array elements in the given order and later in the reverse order. You have to use a user-defined function for printing the array in reverse order.

Now, this time the criteria has been changed. The only difference is that we need to use a user defined function right now.

If you can understand the previous technique and the code, then most probably you have already guessed how to solve this problem. We have to shift the part of the code that prints the array in the reverse order to a new user-defined function. Simply doing that will solve our problem.

For example, I am going to name the new user-defined function printReversely(int arr[], int arraySize). You can name it however you want by following the naming conventions of C++ (or whatever programming language you're using).

I am simply giving you the entire code for now:

#include <bits/stdc++.h>
using namespace std;
void printReversely(int arr[], int arraySize);
int main()
{
    cout << "Enter the array size: ";
    int arraySize;
    cin >> arraySize;
    int arr[arraySize];
    cout << "Enter the array elements " << endl;
    for (int i = 0; i < arraySize; i++)
    {
        cin >> arr[i];
    }
    // printing the array in the correct order
    cout << "Printing the array in the original order" << endl;
    for (int i = 0; i < arraySize; i++)
    {
        cout << arr[i] << " ";
    }
    // printing the array in the reverse order
    cout << "\nPrinting the array in the reversed order" << endl;
    printReversely(arr, arraySize);
}

void printReversely(int arr[], int arraySize)
{
    for (int i = arraySize - 1; i >= 0; i--)
    {
        cout << arr[i] << " ";
    }
}

In C/C++, the code execution always starts from the upper left corner.

As I wrote my printReversely(int arr[], int arraySize) function after the main function, I added the declaration part of it before the main() function. This will help the compiler determine whether it has access to the function or not. If you do not do that, then you'll get an error.

But if you write the entire printReversely(int arr[], int arraySize) function before the main() function then you do not necessarily need to add the declaration again before that.

Conclusion

Thanks for reading the entire article. If it helps you then you can also check out other articles of mine at freeCodeCamp.

If you want to get in touch with me, then you can do so using Twitter, LinkedIn, and GitHub.

You can also SUBSCRIBE to my YouTube channel (Code With FahimFBA) if you want to learn various kinds of programming languages with a lot of practical examples regularly.

If you want to check out my highlights, then you can do so at my Polywork timeline.

You can also visit my website to learn more about me and what I'm working on.

Thanks a bunch!

This article will teach you how to break complex coding concepts into the simplest terms.

Let's get started 💃

The Feynman Technique Of Learning

Richard Feynman, a Nobel Prize-winning physicist, created the Feynman method for learning. He enjoyed explaining complex topics in simpler terms.

In Feynman's view, the best way to study an idea was to ask hard questions and fully understand it.

For more information about Richard Feynman, see this article.

"If you want to learn something, read about it. If you want to understand something, write about it. If you want to master something, teach it." - Yogi Bhajan.

Feynman's technique, in a nutshell, revolves around the belief that you can't explain something well if you do not know it well yourself.

When you try to explain what you know to someone who doesn't know anything about it, you'll notice the flaws in your understanding. The goal is to communicate what you've learned in a simple way that a child can understand.

What Are the Benefits of Using the Feynman Technique?

Here are a few of the benefits of using Feynman's learning techniques:

• It helps you gain a thorough understanding of what you're learning. If you're having trouble understanding JavaScript loops, for example, try this learning method.
• It helps you learn new ideas. This technique allows you to learn new things fast, recall what you have learned, and be more productive.
• It helps you become a better teacher. You get better at teaching when you keep sharing your knowledge with others.
• It improves your critical thinking ability. You will be able to reason in an organized manner to explain complex stuff in simpler terms.

The Four Steps of the Feynman Technique

The Feynman Technique is made up of four significant steps:

• Choose a topic you want to learn about.
• Explain it to a 12-year-old.
• Review your explanation.
• Simplify.

Step 1 - Choose a topic you want to learn about

First, you should come up with a subject or topic you would like to learn and then write it at the top of a piece of paper.

For example, if you want to study JavaScript loops, write it as a heading on a blank piece of paper. As you keep learning about JavaScript loops, write whatever you know on that piece of paper. Write it so that someone who knows nothing about JavaScript loops will understand it.

Notes on JavaScript Loops

Loops allow us to repeatedly run a code block until we meet a specific condition. We call this condition the stop condition.

Types of loops

• for loop
• for-of loop
• for-in loop
• While loop
• Do-while loop

For loop

For loop allows us to repeat a series of actions until a specific condition is false. When a stop condition is true, the for loop runs, and when it is false, it stops running.

For loop syntax:

for (initialExpression; stopCondition; incrementExpression) {
  // code block to be executed
}

Example of a for loop:

for (let i = 1; i<=10; i++) {
   console.log(i);
}  // 1,2,3,4,5,6,7,8,9,10

While loop

The while loop continues to run as long as the stop condition is true. It will stop running if the condition resolves to false.

We use a while loop when we are unsure of the number of times the loop will run before it starts running.

While loop syntax:

while (stop condition) {
   // code block to be executed
}

Example of a While loop:

let i = 1;

while(i <=10) {
   console.log(i);
   i++
}  // 1,2,3,4,5,6,7,8,9,10

Do-while loop

Do-while loops run a block of code (loop's body) at least once before rerunning if the stop condition is true or false.

Do-while loop syntax:

do {   
  // code to be executed 
} while(stop condition)

Example of a Do-while loop:

let i = 1;
do {
  console.log(i);
  i++;
} while(i <= 10) // 1,2,3,4,5,6,7,8,9,10

Check out this article for a detailed explanation of JavaScript Loops.

Before moving on to step 2, do more research on JavaScript loops or take a practice test to see how good you are.

Check out this article for resources to help you practice web development.

Once you have a firm understanding of the topic (JavaScript loops), proceed to step 2.

Also, just a note – paper can be anything you use for writing, such as your phone's notebook app to any other app you use every day.

Step 2 - Explain it to a 12-year-old

Now that you have a clear understanding of JavaScript loops, it's time to explain it to a 12-year-old.

You don't have to look for an actual 12-year-old to teach. All you have to do is explain loops in the most basic terms possible, such that even a child can understand.

Explanation of loops to a 12year old

Imagine you have a box of 20 candies and want to give them to your schoolmates. Each time there is still candy in the candy box, someone gets one until there is none left.

A classmate gets candy as long as there's candy in your box. If there's no candy left in the box, no one gets candy. To keep sharing sweets with more of your friends, you'll need to go out and buy more.

JavaScript loops help to make a series of activities repeat themselves. It allows you to run a code block repeatedly until we meet a specific condition and it stops running.

Loops operate similarly to your candy box. The code block must meet a specific condition to run or stop running.

• If the condition is true, your code runs

• If the condition is false, your code stops running

for (let candyBox = 1; candyBox <=20; candyBox++) {
   console.log(candyBox);
}  // 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20

• let candyBox = 1 means that your code should start counting at 1

• candyBox <= 20 is the condition that must be met for your code to run. It means that your code should stop counting when it gets to 20.

• candyBox++ means that your code should increase by 1 for every time it runs

There's a saying that using complex terms to explain a topic masks your lack of understanding. So your ability to explain loops in the simplest terms possible means you know what you are saying through and through.

How to explain your code – when you don't have a 12 year old to talk to

I know some of you reading this article are thinking, but what if I don't have somebody to explain what I'm learning?

That's not a problem. You can use a variety of methods to explain what you've learned, including:

Technical writing: You don't have to be a great writer to start writing. All you have to do is start getting knowledge down on paper, so to speak.

Open platforms like dev.to, Hashnode, and Medium make it easy to share what you learn. So sign up for one of the platforms and begin writing. Also, you can check out Google's free technical writing course.

Join online communities: Join online communities to share what you have learned. When you join online developer groups, you'll meet people who share your interests. This can help you become comfortable sharing and answering questions.

A fantastic developer community to join is the freeCodeCamp online forum. You can also use social media platforms like YouTube, TikTok, Twitter, and so on.

You can also join my community for developers on Twitter to ask questions, share ideas, and more.

Another way you can explain what you've learned is by doing it in front of an imaginary audience. Pretend you're teaching a group of 12-year-olds about JavaScript loops.

Teaching to an imaginary audience might be fun, but they cannot ask questions. This learning method works best when you use a real audience because they can ask questions.

When your audience asks you questions, you get to identify areas in which you need to improve.

Fun tip: you can also try out the rubber duck technique, where you explain your code to a rubber duck (or another inanimate object) to make sure you've thought it through clearly.

Step 3 - Review Your Explanation

Step 2 will help you identify specific areas where you need to improve. And then in step 3, you can review how you explained the topic to see what you could do better.

Review your loop explanation and identify areas where you think it fell short. Now that you know where you fell short, go back over your learning material to understand better.

Consider using other learning resources if possible. Study until everything you couldn't explain before is clearer to you.

Step 3's goal is to change your areas of weakness into your areas of strength.

Step 4 - Simplify Your Explanation

As a result of step 3, you now have a better knowledge of JavaScript loops. Step 4 requires you to practice step 2 again with your new understanding of loops.

Take up your notes and simplify every area of loops you couldn't explain before. Rewrite your loops article or give someone else a better explanation.

You can also pretend you're teaching a group of 12-year-olds again about JavaScript loops. If you cannot explain a particular part of the topic, go back to step 3 to understand it better.

This method of learning works best for topics that are tough to understand. It is not an effective learning method if you already understand a concept.

Conclusion

This learning style is all about understanding a topic to the point where you can explain it in your own words. When you describe it, act as though you're educating a child to see how well you know the subject.

Also, keep in mind that you can use this learning method to study any concepts that you find difficult.

Thank you for reading. I hope you enjoyed the article! If you have any questions or a learning strategy you would love to share? Send a message on Twitter or LinkedIn.

Resources

Here are some resources that may be useful to you:

• What are the different JavaScript Loops?
• Twitter Community for Developers
• Learning From the Feynman Technique
• Getting work done with the Pomodoro Technique

I originally wrote this article more than a year ago, before getting my first job offer as a developer.

I'm sharing this with you now because I recently went through another interview process. And I found that the same concepts and thoughts that helped me get my first job offer allowed me to pass all the interviews successfully again. 🙂

My Background

I took up coding more or less a year ago. I started learning out of pure curiosity, and as I learned more about it and was able to build personal projects, I just fell in love with it.

I got so obsessed and passionate about it that I dedicated all the free time I had to coding, reading about code, watching videos about code, and just learning as much as I possible could, because for me it was fun and interesting!

Time passed and at a point I started imagining myself working as a developer. First it was like a blurry thought, and then I started thinking about it seriously and learning about what I needed to do to get to that point.

My learning journey and the approach I took towards becoming a dev will probably be the subject of another article, but my point is that I made it! I recently got an offer for my first job as a full time developer and I couldn’t be happier about it.

And there were many things and learning experiences I had to go through to get to this point, but I’d say the toughest one – and the one I was less prepared for – was technical interviews.

What are Technical Interviews Like?

I come from a social sciences background, and most of the time, within that field, there’s nothing too “technical” to talk about during interviews. Employers normally hire you based on your experience and behavior during interviews.

But in the coding field it’s really different. Experience is valuable, of course, but employers also value projects you can show to them, theoretical knowledge about different programming topics, and, most of all, the problem solving skills you can show off during technical interviews.

In almost all selection processes I went through, there was a technical interview in which an interviewer tossed me a problem and I had to solve it live with them looking at me the whole time.

This is a standard practice for coding jobs, but I wasn’t prepared at all. I failed miserably more than once, and these experiences were some of the most embarrassing and frustrating moments in my professional life so far.

At times I felt stupid for even thinking I’d be capable of switching careers at almost 30. I thought I just wasn’t smart enough. But luckily I kept going, researched about technical interviews, learned, practiced, and kept failing until I didn’t fail anymore.

Technical interviews are tough and can be really stressful if you’re not prepared correctly. Also, even though I successfully passed a selection process, I know I still have a lot to learn about this and that I’ll need to perfect this skill to further grow my career in the future. So here are my main tips for nailing your technical interviews.

1. Prepare for the Interview

This is important for all kind of interviews, but for technical interviews I think it’s crucial. Your chances of passing these evaluations are way lower if you don’t prepare correctly for them.

Here are some ideas that allowed me to better prepare for these interviews.

Do Your Research

Find out about technical interviews in general, how are they normally organized, what interviewers ask and what do they intend to measure, what kind of problems do companies toss at you, and what are the best approaches towards interviews.

The internet is an infinite resource of knowledge, so don’t waste it! Google about everything you can and take advantage of the experience of the thousands of people who have gone through similar situations and share their experiences.

Practice Solving Problems

Problem solving is a skill just like any other. There is specific knowledge you’ll need to get good at it, but most of it is practice and getting your brain to be comfortable in that situation.

There are tons of websites that contain the types of problems you’ll see during interviews. freeCodeCamp has an amazing course designed for this. Some other cool resources are hackerrank.com, leetcode.com, codewars.com, exercism.io, app.codesignal.com, and algoexpert.io.

Solve as many problems as you can from any of these sites and you’ll start getting good at them.

And when you practice, at first it’s okay to just worry about solving the problem. But once you get comfortable enough, a great idea is to try to make your practice as similar as possible to an actual interview. And by this I mean setting a timer, explaining your solution out loud, analyzing your final algorithm and refactoring…just basically following all the steps you’d normally follow in an actual interview.

If your practice is similar to the actual situation, once you get to that situation you’ll feel more confident because in some way you’ve already been there.

Build a Theoretical Foundation

Besides actually practicing, learning theoretical concepts about algorithms and data structures is a great idea to get better at solving these problems.

Think about it as adding tools to your toolbox. The more tools and concepts you have in your mind, the more problems will sound familiar or ring a bell in your brain, and from that you'll be more able to arrive at a solution.

There are many resources on the internet, some free and some paid. A course about data structures and algorithms is pretty much a must for any programmer, so I encourage you to find a good one. Here are a couple you can start with:

• Data Structures Explained

• Learn Data Structures from a Google Engineer

• Learn Algorithms and Data Structures in Python

• Learn about Algorithms and Data Structures

Of course also theoretical knowledge about your programming language of choice and any other tools in your stack (frameworks, libraries, databases, and so on) is also very important.

Imitate Others

It’s ok to run into problems you don’t know how to solve or to come up with solutions that are not the best suited ones.

In these type of situations, or always actually, it’s a good idea to take a look at how other people solved that same problem and learn from them. What approach did they take? What ideas did they have? Did they get stuck? How did they move towards the solution?

Analyze their solution and their behavior, identify what works for them, think if that could work for you and if the answer is yes, copy them! It’s crucial that you deeply understand why their solution works and how their logic works. You want to internalize the logical approach, not the code, as that’s just an after effect.

Looking at problem solutions and videos of mock interviews is a good idea to get this kind of data.

Understand What Kind of Interview You'll Have

I mentioned the most classic type of technical interview is the one based on algorithms and data structures, in which the interviewer will give you a problem to solve through an algorithm.

But I found that there're also interviews that are mostly theoretical, in the sense that the interviewer will ask questions to measure your knowledge about a given programming language, framework, library, design and architecture patterns, and so on.

Another kind of interview is where the interviewer shows you an actual project or asks you to build one. During the interview you discuss the decisions you made to build it or implement new features/modifications on it.

Each kind of interview is different and might require different preparation, so it's always a good idea to ask the company what will the interview be based on, and prepare accordingly.

2. Breathe and Think Things Through

Once you've seen and gone through a ton of examples and start feeling somewhat confident around coding problems, it’s time to get to the deeper stuff.

Here are some tips that helped me go through the interviews successfully.

Don’t code

This sounds crazy right? The best approach to solving most coding problems is actually not coding, or at least not right away.

No matter how anxious or secure you are about the idea you have in mind, I find it better to always take a step back and make sure you understand things deeply before going to the details and breaking out the code.

So how do you do that?

Understand the Problem

The first step to solving a problem is actually understanding it. And to understand it, the best idea is to “make it yours”, and internalize it.

A good idea is to read the exercise twice, repeat it again in your own words, and go through multiple examples (simple ones, complex ones, examples with null or invalid inputs…).

No matter how silly, complex or simple the problem may seem, this helps you make sure you understand it properly and gives your brain data and time to come up with solution ideas.

Make Sure You Understood It

Repetitive? Yeah, but effective. Check and make sure you understood what you need to do and how your function will work.

Ask yourself, what are the inputs going to be? What will be the output? Check for edge cases. Will you always receive the same input or could you expect different formats? Do you have to be prepared for strange cases or does the exercise restrict the kind of situation you’ll encounter?

It’s better to clear out all this things before even starting to think about a solution.

Explore Your Toolbox

I said that learning theoretical concepts and practicing is like adding tools to your problem solving toolbox. When you see a new problem, it’s a good idea to explore that toolbox and see if any of the concepts or solutions you’ve used in the past could work here.

Could it help to use some sort of counter? What about implementing some sort of data structure to help you out? Could you use pointers or a sliding window? Would it be a good idea to take a divide and conquer approach? What about recursion? Could sorting the input help for anything?

You don’t necessarily have to know the exact path to take, but comparing the problem to previous patterns you’ve seen can help spark ideas in your mind.

Of course the more you practice solving problems and learning about possible solutions, the more patterns you’ll have to remember and compare.

Break Down the Problem

Once you’ve analyzed the problem deeply, hopefully you’ll have at least an idea of how to tackle it, or where to start.

A great idea here is to try to think about the different steps you need to take to get to your solution and write down those steps to analyze them, check if your logic is correct, and later use them as little memory helpers and “instructions” for you to translate into code.

Simplifying your solution through steps and specially writing them down will often help you identify flaws in your logic or cases you didn’t think about before.

This is great because you’re at a stage when it’s really easy to modify your approach or lean towards a different idea. You didn’t waste time coding or getting yourself into a maze of logic that doesn’t actually work.

Simplify the Problem

Specially when facing complex and difficult problems, a good idea is to first ignore the main difficulty of the problem and try to solve a similar, simpler version of it.

When you nail that solution, bring the main difficulty back and see if you can translate your solution to it.

Visualize the Problem

Complex problems are sometimes difficult to get your head around. Having a whiteboard, either a physical or a digital one, is always a great idea.

Visually stimulating your brain by drawing up the problem or an idea can be a good approach to buy yourself some time and see if that perspective shows you some data you didn’t notice.

Start to Write Your Code

So once you have a clear idea of the steps you’ll need to cover to get to the solution, it’s time for translating that into code. This should be the simple part if you’re comfortable enough with the language.

A thought to keep in mind here is that if you can’t remember something very specific, don’t let that hold you down – pseudo code it and carry on with the rest of the solution.

Talk to your interviewer and see if they can help you with that part, or ask if they'll let you Google it. In most cases this will be ok and the important thing will be to show that you nailed the correct logic to solve the problem.

Test Your Code

Test your solution at every step and at the end. There’s nothing more annoying than writing a ton of code and later seeing it fail without knowing the exact cause.

Test your code and your logic at every step of the solution, as this will allow you to catch bugs earlier and will save you from wasting time and effort.

Of course testing at the end is important to check if your solution actually works! So throw your function different inputs and edge cases to see if it behaves as expected.

Analyze the Solution

Once you've gotten to the solution, you’re not done yet. It’s a great idea to show your interviewer you can analyze what you did too.

Ask yourself and tell them, what’s the big O complexity of your solution? Can you think of a way to improve the performance or the memory usage of your algorithm? Is there a way to make your function easier to read and understand?

Even if you can’t think about how to code it exactly, it’s great to show them that you’re the kind of developer who is always going to look for improvements and not settle for something that just works.

Improve Your Solution

Of course, if you can find ways to optimize your solution and know how to code it, do it!

And about this, in a coding interview situation you’ll rarely come up with the perfect solution for a problem. You’re under pressure and on the clock, so it’s perfectly ok to come up with a so-so solution and then refactor it until it reaches an acceptable level.

It’s often better to show you can solve the problem even if not in the perfect way than spend all your time just thinking about the perfect solution.

Talk to Your Interviewer

Talk with your interviewer during the whole process. What your interviewer is trying to measure is your problem solving ability and your level of comfort with your programming language of choice.

That is a hard thing to measure if you don’t open your mouth and just code away.

It’s crucial that you talk to your interviewer and let them know what you’re thinking, what is your thought process, what ideas are you having, how are you understanding the problem, what logic are you going to follow with your solution and why are you making decisions.

Talk to them, ask questions, explain yourself, and if you get stuck or don’t know how to go on, explain to them exactly the thing that is giving you trouble. In most cases you’ll get some help and more importantly you’ll show them you’re actually trying to work towards a solution.

Listen to Your Interviewer

When you’re being given the problem to solve – and specially if you get tips or feedback from your interviewers – pay attention! No matter if you think you already have the best idea or if there’s something that’s driving you crazy and need to solve right now, just drop it and listen to what you’re being told.

If you don’t listen to feedback, you’re giving a very negative signal to your possible future employers. Think about it: would you like to work with someone that doesn’t listen to feedback? Besides, feedback will certainly help you solve your problem, so listen!

3. Control Your Emotions

This for me was the toughest part of the interviewing process, and it's something I didn’t really find a lot of information about when researching technical interviews.

Dealing with the anxiety and frustration these situations can provoke is hard, but also a crucial step to improve your performance.

So here are some things that have helped me in this regard.

Prepare Your Body and Mind

Interviews are stressful situations in which you have to deal with expectations and perform to reach those expectations while being judged by other people.

I’ve always felt uncomfortable in these type of situations so I’m quite familiar with the type of anxiety you might feel.

Something that helps me is try to think about it like the moment of a game for a sports player or when actors get out on stage. You normally see these people trying to warm up and focus before they start to perform, right? There’s a reason for that – and it’s that this preparation actually enhances performance and gets you ready to give your best.

It may sound stupid at first, but stretching, warming up your voice, meditating, imagining the moment in your mind and picturing yourself being successful in the moment are all things that will push you towards doing nicely in this important moment.

Be Confident

Easier said than done, right? Absolutely. Confidence for most people isn’t something you can just turn off and on, but something you build along the way and comes with lots of practice, studying, and preparation behind it.

You'll build confidence with the work you do prior to the interview, but once you’re in the moment it’s important to remember that you want to show the interviewers you have confidence in yourself as a coder and that you trust yourself to solve any problem you face.

This doesn’t mean you have to know absolutely everything and be able to solve any complex problem absolutely by yourself. Rather, it means that you won’t panic when you face something you don’t know how to solve at first, and that you have the ability to slowly analyze the problem, break it down, and work towards a solution.

Slow Down

Stress, anxiety, and the wish to show that you can solve the problem can make you rush more than you need to. And rushing can lead to missing key information, flaws in your logic, bugs in your code, and errors in general.

So take your time, actually, take more time than you actually need. Analyze the heck out of the problem, talk slowly, code slowly, think slowly, and remember to breath. Things are easier to deal with when you take your time and slow-mo the process.

Don’t Take it Personally – or Do...

You’ll mess up at some point, that’s a certainty. Especially in your first interviews, you’ll probably fail and feel miserable about it. It’s just the way it is, and it's a step that is needed for you to understand where you need to improve.

A key issue here is how you deal with that frustration. I could tell you to think about it as a process, to not get mad when you fail, to be patient… But if you’re an anxious and self demanding person as I am, you’ll be very frustrated when you fail, and there’s nothing you can do to avoid it.

But how do you deal with that? Do you get depressed and quit coding forever? Do you get scared of interviews and never apply for a job ever again?

Personally, I get very mad at myself when I fail at something or find out I don’t know something I "was supposed" to know. I get mad at myself for not preparing correctly or for missing things, and even though that anger feels bad at first, later on is something that pushes me forward.

I feel so bad about it that I make absolutely sure I won't fail at that again, and I practice as hard as I can to avoid being in that situation again.

Different approaches work for different people, but the thing is to handle your emotions in a way that pushes you forward and not backwards.

Learn from Your Mistakes

As it’s a certainty you’ll mess up, the smart thing to do is to learn from the errors you made and try to not make them again.

Always try to take note of the problems you were presented and your solutions, analyze your mistakes, analyze other possible approaches you could have taken, what optimizations you didn’t see, and what key concepts you didn’t remember at that moment.

Also always ask your interviewers for feedback about what you could have done better. This information is gold if you get the best of it.

Have Fun

If you love coding, you probably have lots of fun doing it. Never forget that, no matter the context.

In interviews, try to approach each problem with curiosity rather than fear of failing. Try to show your interviewers you’re enthusiastic about problems, because you’re probably going to work with similar stuff on a daily basis.

Plus if you’re having fun and thinking in a positive way, you’ll be more relaxed and your mind will be clearer, which of course helps your problem solving skills.

Keep Going

If you pass or if you fail, at the end it doesn’t matter, in the sense that your approach and behavior should stay the same.

Just as code can always be improved, so can you as a programmer. You should always keep learning, keep getting better, keep practicing, keep facing stuff you didn’t know anything about and eventually overcoming it.

So don’t get too high if you pass or too low if you miss – just keep coding and keep learning.

Roundup

As always, I hope you enjoyed the article and learned something new. If you want, you can also follow me on LinkedIn or Twitter.

See you later!

The latest GNOME DE (Desktop Environment) uses Wayland nowadays. And while it's possible to remove Wayland and select Xorg if you want, most users are starting to use Wayland as their daily driver.

And if you still use the Chrome or Chromium browsers, you'll often face the black screen issue during screen sharing.

If you typically use Wayland on your desktop, you'll have these issues while screen sharing, especially in Google Meet.

In this article, I will show you a very simple trick that will help you solve the black screen issue during screen sharing on any kind of Chromium browser including the most popular browser, Google Chrome.

I have used Ubuntu for writing this article, but the same process is applicable to all other Linux OS distros running on Wayland.

The Black Screen Issue

If you're having the black screen issue in Google Meet in a Chromium browser (Chrome, Brave, Vivaldi, etc), it probably looks like this:

Sometimes it might happen because screen sharing in Wayland gets broken or because of other issues. A lot of users also say it happens as developers are trying hard to increase the security level.

The issue of screen sharing might become common for many people in the usual way. A lot of users go back to X11 only for this issue or try the pipewire solution to fix this.

I will show you the solution using the pipewire technology so that you do not need to go back to X11 only for solving this issue. 😊

Go to chrome://flags/#enable-webrtc-pipewire-capturer using the address bar of your browser.

You will get a long list, but we are interested in WebRTC PipeWire Support. You will see that the option is on the Default mode right now.

We need to change it to Enabled.

Simply click the drop down menu, and click Enabled.

Now you will see a prompt on the below right side to relaunch the browser so this can take effect.

Click on Relaunch. It will simply restart your browser.

The issue has been solved! ✌️

How to Test Screen Sharing

Now if you want to share your screen as usual, you can definitely do that.

Whenever you want to share the screen, a prompt will appear and will request you to select the monitor. You have to share the monitor. If you have only one monitor like I do, then you would get one monitor. Simply click on that and click Share.

You will also get to see the preview of the screen sharing.

You may need to select the monitor again in the prompt. Simply select the monitor and click Share as earlier.

From now on, you can share your screen on Google Meet from Wayland.

Conclusion

If this article helps you resolve the black screen issue for your Linux DE, then I've been successful. 😊

Thanks for reading the entire article. If it helps you then you can also check out other articles of mine at freeCodeCamp.

If you want to get in touch with me, then you can do so using Twitter, LinkedIn, and GitHub.

You can also SUBSCRIBE to my YouTube channel (Code With FahimFBA) if you want to learn various kinds of programming languages with a lot of practical examples regularly.

If you want to check out my highlights, then you can do so at my Polywork timeline.

You can also visit my website to learn more about me and what I'm working on.

Thanks a bunch!

This list is not universal and, depending on what you are looking for, it may not be enough to solve your problem. But it should be a good start.

Before we start you should be familiar with a few things:

• How to run commands on Linux

• Protocols like DNS, HTTP, and TLS

• A scripting language like Python

Don't worry too much. I will give you enough information so you can follow along with the tutorial.

And what will you learn?

• Basic usage of strace, nslookup, and RPM

• How to use some interesting features of the Python debugger

• How to analyze traffic with Wireshark

The Problem: Failing to upload a file to asciinema

So I recorded an asciicast, using the cool Open Source project asciinema, for my small Open Source project SuricataLog. Then I decided to share it with the world.

But unlike the other recordings, this one refused to be uploaded:

[josevnz@dmaf5 SuricataLog]$ asciinema upload demo-ascii.cast 
asciinema: upload failed: <urlopen error [Errno 32] Broken pipe>
asciinema: retry later by running: asciinema upload demo-ascii.cast

Asciinema doesn't tell us much about the error. For example:

• What server and port does the tool try to use to upload the file?

• Which part of the protocol handshake is failing?

• Is the destination a problem or is it an issue on my side?

We will use a few tools to see what is going on here.

How to run the program with strace

What is strace?

strace is a diagnostic, debugging, and instructional userspace utility for Linux. It is used to monitor and tamper with interactions between processes and the Linux kernel, which include system calls, signal deliveries, and changes of process state.

System administrators, diagnosticians, and troubleshooters will find it invaluable for solving problems with programs for which the source is not readily available since they do not need to be recompiled in order to trace them.

strace is super useful when you don't have the source code of an application and yet you need to understand what is wrong when you call a program. Time to see it in action:

josevnz@dmaf5 SuricataLog]$ strace asciinema upload demo-ascii.cast
xecve("/usr/bin/asciinema", ["asciinema", "upload", "demo-ascii.cast"], 0x7ffdcddb1160 /* 55 vars */) = 0
brk(NULL)                               = 0x55e912d58000
arch_prctl(0x3001 /* ARCH_??? */, 0x7fff2f136480) = -1 EINVAL (Invalid argument)
access("/etc/ld.so.preload", R_OK)      = -1 ENOENT (No such file or directory)
openat(AT_FDCWD, "/etc/ld.so.cache", O_RDONLY|O_CLOEXEC) = 3
fstat(3, {st_mode=S_IFREG|0644, st_size=92299, ...}) = 0
mmap(NULL, 92299, PROT_READ, MAP_PRIVATE, 3, 0) = 0x7f69dd26a000
close(3)                                = 0
# 
# Commented out LOTS output
# ...
close(4)                                = 0
socket(AF_INET, SOCK_DGRAM|SOCK_CLOEXEC, IPPROTO_IP) = 4
connect(4, {sa_family=AF_INET, sin_port=htons(443), sin_addr=inet_addr("109.107.38.233")}, 16) = 0
getsockname(4, {sa_family=AF_INET, sin_port=htons(33771), sin_addr=inet_addr("192.168.1.22")}, [28 => 16]) = 0
connect(4, {sa_family=AF_UNSPEC, sa_data="\0\0\0\0\0\0\0\0\0\0\0\0\0\0"}, 16) = 0
connect(4, {sa_family=AF_INET, sin_port=htons(443), sin_addr=inet_addr("109.107.37.0")}, 16) = 0
getsockname(4, {sa_family=AF_INET, sin_port=htons(35023), sin_addr=inet_addr("192.168.1.22")}, [28 => 16]) = 0
close(4)                                = 0
socket(AF_INET, SOCK_STREAM|SOCK_CLOEXEC, IPPROTO_TCP) = 4
connect(4, {sa_family=AF_INET, sin_port=htons(443), sin_addr=inet_addr("109.107.38.233")}, 16) = 0
setsockopt(4, SOL_TCP, TCP_NODELAY, [1], 4) = 0
getsockopt(4, SOL_SOCKET, SO_TYPE, [1], [4]) = 0
getsockname(4, {sa_family=AF_INET, sin_port=htons(55682), sin_addr=inet_addr("192.168.1.22")}, [128 => 16]) = 0
ioctl(4, FIONBIO, [0])                  = 0
getpeername(4, {sa_family=AF_INET, sin_port=htons(443), sin_addr=inet_addr("109.107.38.233")}, [16]) = 0
getpid()                                = 45070
getpid()                                = 45070
getpid()                                = 45070
getpid()                                = 45070
getpid()                                = 45070
getpid()                                = 45070
write(4, "\26\3\1\2\0\1\0\1\374\3\3\327\2*\v\316GT*\262\207\235\264\317\254\37$|,V\205\362"..., 517) = 517
read(4, "\26\3\3\0z", 5)                = 5
read(4, "\2\0\0v\3\3E\217G?\335.;\212\237pn\16\257$\2\324J\324y\17\306\263\325i\264p"..., 122) = 122
read(4, "\24\3\3\0\1", 5)               = 5
read(4, "\1", 1)                        = 1
read(4, "\27\3\3\0\27", 5)              = 5
read(4, "0{}\22t9\264\265\340j\362\30\342\360\234\205\1\370\33\246\1z'", 23) = 23
read(4, "\27\3\3\17\335", 5)            = 5
read(4, "\17\5\310\261\355\271\227oUaI\366\361]\3\275q)\5{\367z\20\233\345\352k?\371\272\23\237"..., 4061) = 4061
stat("/etc/pki/tls/certs/8d33f237.0", 0x7ffd20be3620) = -1 ENOENT (No such file or directory)
read(4, "\27\3\3\1\31", 5)              = 5
read(4, "t\27\337\366G6\226Qs\273\327\314,\205\221\222Xu\233\21%\0s\340\270\224\330\t\2774\222h"..., 281) = 281
read(4, "\27\3\3\0005", 5)              = 5
read(4, "\204{\314\232\311\0P-*$\245\315\271\236c\210N\315\5\371\364\23\235\16\0350N0K\246\336\374"..., 53) = 53
write(4, "\24\3\3\0\1\1\27\3\3\0005\361\311\347\t\254m#\273\204\350\16\343\34P\320sS\211\30\232<"..., 64) = 64
ioctl(4, FIONBIO, [0])                  = 0
write(4, "\27\3\3\1\251\271\2673-\30\313\253\363\320H0\224\370Q\353(#?,\216\3\341\315|J\353\303"..., 430) = 430
write(4, "\27\3\3@\21\20\221\240\331\2737\10\244pv\312B\n\rn\272\33\336T\216\f\303\374k\177c\25"..., 16406) = 16406
write(4, "\27\3\3@\21\214\30\262\240s\216\240\354e\31\304Q\337Oy\21y\373\241g\311\224)\26\320\10{"..., 16406) = 16406
write(4, "\27\3\3@\21\36\323\240\376\276\224\35\f\10!@\36D\347\33ay\2617Hpv\4d\267y7"..., 16406) = 16406
write(4, "\27\3\3@\21\366x\264\242O2\7?\7\334\221W\24\2\f)\"@\20\375~\354\243W\32\0c"..., 16406) = 16406
write(4, "\27\3\3@\21\354\32W\36\265g\304\314\376\205\315\20\22\10c\333\342\264\330\366SS\4\217\356:V"..., 16406) = 16406
write(4, "\27\3\3@\21\1\274\35\335\271n\235e\202\202\207\221~\313\0y\210\344\312\32r\347\306x]\241C"..., 16406) = 16406
write(4, "\27\3\3@\21I\315\202\274\342\274\26\335qx\22-\226\322\320\203\231\274wLB\250\252\2\352\367\""..., 16406) = 8716
write(4, "\377\4m\341\317\376SUr\rQ\221\207\22#\262\314B7\33_v\310\271\fl\v\242\fK\v?"..., 7690) = -1 EPIPE (Broken pipe)
--- SIGPIPE {si_signo=SIGPIPE, si_code=SI_USER, si_pid=45070, si_uid=1000} ---
close(4)                                = 0
close(3)                                = 0
write(2, "\33[0;31masciinema: upload failed:"..., 76asciinema: upload failed: <urlopen error [Errno 32] Broken pipe>
) = 76
write(2, "\33[0;31masciinema: retry later by"..., 79asciinema: retry later by running: asciinema upload demo-ascii.cast
) = 79
munmap(0x7fa1aa089000, 12447744)        = 0
rt_sigaction(SIGINT, {sa_handler=SIG_DFL, sa_mask=[], sa_flags=SA_RESTORER, sa_restorer=0x7fa1bad0fa70}, {sa_handler=0x7fa1baf551d0, sa_mask=[], sa_flags=SA_RESTORER, sa_restorer=0x7fa1bad0fa70}, 8) = 0
munmap(0x7fa1ac649000, 593920)          = 0
exit_group(1)                           = ?
+++ exited with 1 +++

Look at this socket call (man 2 getpeername):

getpeername(4, {sa_family=AF_INET, sin_port=htons(443), sin_addr=inet_addr("109.107.38.233")}, [16]) = 0

And below that, as you can see, we are actually writing data to the website and the connection breaks:

write(4, "\27\3\3@\21\366x\264\242O2\7?\7\334\221W\24\2\f)\"@\20\375~\354\243W\32\0c"..., 16406) = 16406
write(4, "\27\3\3@\21\354\32W\36\265g\304\314\376\205\315\20\22\10c\333\342\264\330\366SS\4\217\356:V"..., 16406) = 16406
write(4, "\27\3\3@\21\1\274\35\335\271n\235e\202\202\207\221~\313\0y\210\344\312\32r\347\306x]\241C"..., 16406) = 16406
write(4, "\27\3\3@\21I\315\202\274\342\274\26\335qx\22-\226\322\320\203\231\274wLB\250\252\2\352\367\""..., 16406) = 8716
write(4, "\377\4m\341\317\376SUr\rQ\221\207\22#\262\314B7\33_v\310\271\fl\v\242\fK\v?"..., 7690) = -1 EPIPE (Broken pipe)
--- SIGPIPE {si_signo=SIGPIPE, si_code=SI_USER, si_pid=45070, si_uid=1000} ---

So who is '109.107.38.233'?:

[josevnz@dmaf5 SuricataLog]$ nslookup 109.107.38.233
233.38.107.109.in-addr.arpa    name = cip-109-107-38-233.gb1.brightbox.com.

You can see on the about webpage that brightbox.com provides the hosting for asciinema.

So what is wrong? It is not that the site is down or unreachable. Can we dig further?

If I only had the source code – deep diving with the Python debugger

[josevnz@dmaf5 SuricataLog]$ file /usr/bin/asciinema
/usr/bin/asciinema: Python script, ASCII text executable

Oh, yes we do! Ever curious, you open the asciinema script:

#!/usr/bin/python3
# EASY-INSTALL-ENTRY-SCRIPT: 'asciinema==2.0.2','console_scripts','asciinema'
import re
import sys 

# for compatibility with easy_install; see #2198
__requires__ = 'asciinema==2.0.2'

try:
    from importlib.metadata import distribution
except ImportError:
    try:
        from importlib_metadata import distribution
    except ImportError:
        from pkg_resources import load_entry_point


def importlib_load_entry_point(spec, group, name):
    dist_name, _, _ = spec.partition('==')
    matches = ( 
        entry_point
        for entry_point in distribution(dist_name).entry_points
        if entry_point.group == group and entry_point.name == name
    )   
    return next(matches).load()


globals().setdefault('load_entry_point', importlib_load_entry_point)


if __name__ == '__main__':
    sys.argv[0] = re.sub(r'(-script\.pyw?|\.exe)?$', '', sys.argv[0])
    sys.exit(load_entry_point('asciinema==2.0.2', 'console_scripts', 'asciinema')())

The main script was generated with easy install, which means asciinema.py is just a wrapper around the interesting code. To find out where the interesting stuff is, let's run the script through the Python pdb debugger:

[josevnz@dmaf5 SuricataLog]$ python3 -m pdb /usr/bin/asciinema upload demo-ascii.cast 
> /usr/bin/asciinema(3)<module>()
-> import re
(Pdb) n
> /usr/bin/asciinema(4)<module>()
-> import sys
(Pdb) c
asciinema: upload failed: <urlopen error [Errno 32] Broken pipe>
asciinema: retry later by running: asciinema upload demo-ascii.cast
The program exited via sys.exit(). Exit status: 1

Not quite what we need. The program runs, hits the exception, and then it restarts at the beginning.

Let's cheat a little. Was asciinema installed with an RPM (I use Fedora Linux)?

[josevnz@dmaf5 SuricataLog]$ rpm -qif /usr/bin/asciinema
Name        : asciinema
Version     : 2.0.2
Release     : 6.fc33

And we are trying to upload a file, anything that looks like an uploader?

josevnz@dmaf5 SuricataLog]$ rpm -qil asciinema|grep -i uploa
/usr/lib/python3.9/site-packages/asciinema/commands/__pycache__/upload.cpython-39.opt-1.pyc
/usr/lib/python3.9/site-packages/asciinema/commands/__pycache__/upload.cpython-39.pyc
/usr/lib/python3.9/site-packages/asciinema/commands/upload.py

Ah, getting interesting! Let's open 'upload.py':

from asciinema.commands.command import Command
from asciinema.api import APIError


class UploadCommand(Command):

    def __init__(self, api, filename):
        Command.__init__(self)
        self.api = api 
        self.filename = filename

    def execute(self):
        try:
            result, warn = self.api.upload_asciicast(self.filename)

            if warn:
                self.print_warning(warn)

            self.print(result.get('message') or result['url'])

        except OSError as e:
            self.print_error("upload failed: %s" % str(e))
            return 1

        except APIError as e:
            self.print_error("upload failed: %s" % str(e))
            self.print_error("retry later by running: asciinema upload %s" % self.filename)
            return 1

        return 0

Let's put a few breakpoints inside the UploadCommand (Lines 14, 26 on my copy of the code):

[josevnz@dmaf5 SuricataLog]$ python3 -m pdb /usr/bin/asciinema upload demo-ascii.cast 
> /usr/bin/asciinema(3)<module>()
-> import re
(Pdb) b /usr/lib/python3.9/site-packages/asciinema/commands/upload.py:14
Breakpoint 1 at /usr/lib/python3.9/site-packages/asciinema/commands/upload.py:14
(Pdb) c
> /usr/lib/python3.9/site-packages/asciinema/commands/upload.py(14)execute()
-> result, warn = self.api.upload_asciicast(self.filename)
(Pdb) c
> /usr/lib/python3.9/site-packages/asciinema/commands/upload.py(26)execute()
-> self.print_error("upload failed: %s" % str(e))
(Pdb) n
asciinema: upload failed: <urlopen error [Errno 32] Broken pipe>
> /usr/lib/python3.9/site-packages/asciinema/commands/upload.py(27)execute()
-> self.print_error("retry later by running: asciinema upload %s" % self.filename)
(Pdb) ll
 12          def execute(self):
 13              try:
 14 B                result, warn = self.api.upload_asciicast(self.filename)
 15      
 16                  if warn:
 17                      self.print_warning(warn)
 18      
 19                  self.print(result.get('message') or result['url'])
 20      
 21              except OSError as e:
 22                  self.print_error("upload failed: %s" % str(e))
 23                  return 1
 24      
 25              except APIError as e:
 26 B                self.print_error("upload failed: %s" % str(e))
 27  ->                self.print_error("retry later by running: asciinema upload %s" % self.filename)
 28                  return 1
 29      
 30              return 0

We got an APIError. Anything interesting with that type of exception?

(Pdb) source APIError
11      class APIError(Exception):
12          pass
(Pdb) e.args
('<urlopen error [Errno 32] Broken pipe>',)

So nothing special, derived directly from Exception. Also, the arguments to the exception are just the error message.

Of course the next step is to see if this error comes from a known library (Search on the Internet for the error).

I found this issue on GitHub. Reading further you can see than the generous author of Asciicast is paying the storage from his own pocket so all of us can enjoy the online storage for free:

The max size was set 2MB which appears to be too low. I have upped it to 5MB. This isn't much, but I'm paying for the storage (S3) from my own pocket, so I can't offer GBs of storage for every user. Let me know if that works for you. I'm fine with increasing it even more, but now I want to figure out the good middle ground between user needs and hosting costs.

So let's confirm that this is indeed the cause:

[josevnz@dmaf5 SuricataLog]$ ls -lh demo-ascii.cast 
-rw-rw-r-- 1 josevnz josevnz 12M Apr 21 15:44 demo-ascii.cast

So far the big size of the file seems to be the culprit.

I'm still running the debugger, and I would love to see what asciinema modules were loaded. For that switch to the 'interact' mode and get that listing with a list comprehension and a regular expression:

(Pdb) interact
*interactive*
>>> import re
>>> import sys
>>> import pprint
>>> pprint.pprint([name for name in sys.modules.keys() if re.search('asciinema', name)], indent=True)
['asciinema.asciicast.events',
 'asciinema.asciicast.v1',
 'asciinema.asciicast.v2',
 'asciinema.asciicast',
 'asciinema.term',
 'asciinema.pty',
 'asciinema',
 'asciinema.config',
 'asciinema.commands',
 'asciinema.commands.command',
 'asciinema.commands.auth',
 'asciinema.asciicast.raw',
 'asciinema.http_adapter',
 'asciinema.urllib_http_adapter',
 'asciinema.api',
 'asciinema.commands.record',
 'asciinema.player',
 'asciinema.commands.play',
 'asciinema.commands.cat',
 'asciinema.commands.upload',
 'asciinema.__main__']
>>>

The following look like they could hold some clues:

• asciinema.urllib_http_adapter

• asciinema.commands.upload

• asciinema.http_adapter

Exit the debugger (or go to another terminal) and search for the urllib_http_adapter:

[josevnz@dmaf5 SuricataLog]$ find /usr/lib/python3.9/site-packages/asciinema/ -name 'urllib_http_adapter*'
/usr/lib/python3.9/site-packages/asciinema/__pycache__/urllib_http_adapter.cpython-39.opt-1.pyc
/usr/lib/python3.9/site-packages/asciinema/__pycache__/urllib_http_adapter.cpython-39.pyc
/usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py

If you open the file you will see that 'post' method is the one we want to troubleshoot:

class URLLibHttpAdapter:

    def post(self, url, fields={}, files={}, headers={}, username=None, password=None):
        content_type, body = MultipartFormdataEncoder().encode(fields, files)

        headers = headers.copy()
        headers["Content-Type"] = content_type

        if password:
            auth = "%s:%s" % (username, password)
            encoded_auth = base64.encodebytes(auth.encode('utf-8'))[:-1]
            headers["Authorization"] = b"Basic " + encoded_auth

        request = Request(url, data=body, headers=headers, method="POST")

        try:
            response = urlopen(request)
            status = response.status
            headers = self._parse_headers(response)
            body = response.read().decode('utf-8')
        except HTTPError as e:
            status = e.code
            headers = {}
            body = e.read().decode('utf-8')
        except (http.client.RemoteDisconnected, URLError) as e:
            raise HTTPConnectionError(str(e))

        return (status, headers, body)

A breakpoint in line 65 will get us where we need to be:

[josevnz@dmaf5 SuricataLog]$ python3 -m pdb /usr/bin/asciinema upload demo-ascii.cast 
> /usr/bin/asciinema(3)<module>()
-> import re
(Pdb) b /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py:65
Breakpoint 1 at /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py:65
(Pdb) c
> /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py(65)post()
-> headers = headers.copy()
(Pdb) ll
 62          def post(self, url, fields={}, files={}, headers={}, username=None, password=None):
 63              content_type, body = MultipartFormdataEncoder().encode(fields, files)
 64      
 65 B->            headers = headers.copy()
 66              headers["Content-Type"] = content_type
 67      
 68              if password:
 69                  auth = "%s:%s" % (username, password)
 70                  encoded_auth = base64.encodebytes(auth.encode('utf-8'))[:-1]
 71                  headers["Authorization"] = b"Basic " + encoded_auth
 72      
 73              request = Request(url, data=body, headers=headers, method="POST")
 74      
 75              try:
 76                  response = urlopen(request)
 77                  status = response.status
 78                  headers = self._parse_headers(response)
 79                  body = response.read().decode('utf-8')
 80              except HTTPError as e:
 81                  status = e.code
 82                  headers = {}
 83                  body = e.read().decode('utf-8')
 84              except (http.client.RemoteDisconnected, URLError) as e:
 85                  raise HTTPConnectionError(str(e))
 86      
 87              return (status, headers, body)
(Pdb) args
self = <asciinema.urllib_http_adapter.URLLibHttpAdapter object at 0x7f59ed3e4640>
url = 'https://asciinema.org/api/asciicasts'
fields = {}
files = {'asciicast': ('ascii.cast', <_io.BufferedReader name='demo-ascii.cast'>)}
headers = {'User-Agent': 'asciinema/2.0.2 CPython/3.9.9 Linux/5.14.18-100.fc33.x86_64-x86_64-with-glibc2.32', 'Accept': 'application/json'}
username = 'XXXX'
password = 'XXXX0f1-1d73-43fc-XX36-c9d7ZZZAAAA'

Very interesting – we could use definitely use the following fields to exercise the upload functionality without Python (obtained using args from the debugger):

• url = 'https://asciinema.org/api/asciicasts'

• headers = {'User-Agent': 'asciinema/2.0.2 CPython/3.9.9 Linux/5.14.18-100.fc33.x86_64-x86_64-with-glibc2.32', 'Accept': 'application/json'}

• username = 'XXXX'

• password = 'XXXX0f1-1d73-43fc-XX36-c9d7ZZZAAAA'

What exception we will get? We set 2 more breakpoints and let the debugger run until it reaches them:

(Pdb) b 81
Breakpoint 2 at /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py:81
(Pdb) b 85
Breakpoint 3 at /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py:85
(Pdb) c
> /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py(85)post()
-> raise HTTPConnectionError(str(e))
(Pdb) e
URLError(BrokenPipeError(32, 'Broken pipe'))

The type of the error is BrokenPipeError:

A subclass of ConnectionError, raised when trying to write on a pipe while the other end has been closed, or trying to write on a socket which has been shutdown for writing. Corresponds to errno EPIPE and ESHUTDOWN.

One last thing – do we read the whole file in memory before sending it to the website?

[josevnz@dmaf5 SuricataLog]$ python3 -m pdb /usr/bin/asciinema upload demo-ascii.cast 
> /usr/bin/asciinema(3)<module>()
-> import re
(Pdb) b /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py:49
Breakpoint 1 at /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py:49
(Pdb) c
> /usr/lib/python3.9/site-packages/asciinema/urllib_http_adapter.py(49)iter()
-> yield (data, len(data))
(Pdb) len(data)
12444283

12MB, not huge for today's computer memory but also not small.

Do you remember the parameters we managed to capture before with the help of the debugger (URL, user, and so on)? We now know enough to use a different tool (curl) to try to upload the file:

[josevnz@dmaf5 SuricataLog]$ curl --fail --http1.1 --verbose --user $USER:$(cat ~/.config/asciinema/install-id) https://asciinema.org/api/asciicasts --form asciicast=@demo-ascii.cast
*   Trying 109.107.37.0:443...
* Connected to asciinema.org (109.107.37.0) port 443 (#0)
* ALPN, offering http/1.1
* successfully set certificate verify locations:
*   CAfile: /etc/pki/tls/certs/ca-bundle.crt
  CApath: none
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
* TLSv1.3 (IN), TLS handshake, Server hello (2):
* TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8):
* TLSv1.3 (IN), TLS handshake, Certificate (11):
* TLSv1.3 (IN), TLS handshake, CERT verify (15):
* TLSv1.3 (IN), TLS handshake, Finished (20):
* TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.3 (OUT), TLS handshake, Finished (20):
* SSL connection using TLSv1.3 / TLS_AES_128_GCM_SHA256
* ALPN, server accepted to use http/1.1
* Server certificate:
*  subject: CN=*.asciinema.org
*  start date: Mar  9 06:02:26 2022 GMT
*  expire date: Jun  7 06:02:25 2022 GMT
*  subjectAltName: host "asciinema.org" matched cert's "asciinema.org"
*  issuer: C=US; O=Let's Encrypt; CN=R3
*  SSL certificate verify ok.
* Server auth using Basic with user 'XXXX'
> POST /api/asciicasts HTTP/1.1
> Host: asciinema.org
> Authorization: Basic XXXXX=
> User-Agent: curl/7.71.1
> Accept: */*
> Content-Length: 12444495
> Content-Type: multipart/form-data; boundary=------------------------0d76dac3e1f8aed4
> Expect: 100-continue
> 
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* Mark bundle as not supporting multiuse
< HTTP/1.1 100 Continue
* Mark bundle as not supporting multiuse
* The requested URL returned error: 413 Request Entity Too Large
* Closing connection 0
* TLSv1.3 (OUT), TLS alert, close notify (256):
curl: (22) The requested URL returned error: 413 Request Entity Too Large

The error 413 Request Entity Too Large means:

The HTTP 413 Payload Too Large response status code indicates that the request entity is larger than limits defined by server; the server might close the connection or return a Retry-After header field.

So curl is much better than Python on telling us the truth about why our file was rejected.

How much data did we manage to transmit before our connection was cut off? Let's see if we can find that out using a packet sniffer.

How to use Wireshark and the SSLKEYLOGFILE to inspect the HTTP traffic

You can capture the traffic between your machine and the asciinema website using a network sniffer like Wireshark or the well known tcpdump.

The traffic will be encrypted as we use HTTPS, but using a feature supported by many programs known as a 'TLS master encryption secrets' you can decrypt the session. For that let's enable the feature on the client:

export SSLKEYLOGFILE=$HOME/keylogfile.txt

If is supported, the $SSLKEYLOGFILE file will be populated with the keys:

[josevnz@dmaf5 SuricataLog]$ export SSLKEYLOGFILE=$HOME/keylogfile.txt
[josevnz@dmaf5 SuricataLog]$ /usr/bin/asciinema upload demo-ascii.cast 
asciinema: upload failed: <urlopen error [Errno 32] Broken pipe>
asciinema: retry later by running: asciinema upload demo-ascii.cast
[josevnz@dmaf5 SuricataLog]$ ls -l $SSLKEYLOGFILE
-rw-rw-r-- 1 josevnz josevnz 832 Apr 21 21:02 /home/josevnz/keylogfile.txt

[josevnz@dmaf5 SuricataLog]$ cat /home/josevnz/keylogfile.txt

# TLS secrets log file, generated by OpenSSL / Python
SERVER_HANDSHAKE_TRAFFIC_SECRET 2987e32066d608a3de0cdd896f62801290045c2616abfaef5fac1c6986131847 4dd1a1bc1261a84886b28ee72798d89ba77d7de7051b3dcdafd548a621ed1124
EXPORTER_SECRET 2987e32066d608a3de0cdd896f62801290045c2616abfaef5fac1c6986131847 1ec8d94b7ec373a984abed25fa0dfaa6346fe67feea0516d7e2e46a666a12614
SERVER_TRAFFIC_SECRET_0 2987e32066d608a3de0cdd896f62801290045c2616abfaef5fac1c6986131847 e1d8fa6dba5eea00d4e52af0ce7e7007da0ade4c9dd9da3d9a060b55880531f1
CLIENT_HANDSHAKE_TRAFFIC_SECRET 2987e32066d608a3de0cdd896f62801290045c2616abfaef5fac1c6986131847 903bf381f927d783e72846201e87203ff130d9cf21f84cf0b923834d69c3fe76
CLIENT_TRAFFIC_SECRET_0 2987e32066d608a3de0cdd896f62801290045c2616abfaef5fac1c6986131847 495b5acf783869d74a7521e3b9c3f7bfc6dbc25e24ba95f684e96f6b2a435206
SERVER_HANDSHAKE_TRAFFIC_SECRET 82cab66e906c3cd3c58b3aeeecd66b2a12e521704d3e19e2f008550705e78e00 5a0d699640bd460530bd38148cf979e585b9a43c1bd545974561df18841fa5f4
EXPORTER_SECRET 82cab66e906c3cd3c58b3aeeecd66b2a12e521704d3e19e2f008550705e78e00 32b69cb41b8db36371e7d207a45e20d401bb05e0cd8bf492e3ace009e2845d12
SERVER_TRAFFIC_SECRET_0 82cab66e906c3cd3c58b3aeeecd66b2a12e521704d3e19e2f008550705e78e00 1f42b4392b2cc14789c4eaec4dae275c6a040ae3b11fc6bba58c90c7b80caa96
CLIENT_HANDSHAKE_TRAFFIC_SECRET 82cab66e906c3cd3c58b3aeeecd66b2a12e521704d3e19e2f008550705e78e00 bd93073bda56e559743a1f1ffc48c062089addcfc007c7defe08c28ac0ee6287
CLIENT_TRAFFIC_SECRET_0 82cab66e906c3cd3c58b3aeeecd66b2a12e521704d3e19e2f008550705e78e00 32b615c0dd25cb7b430a0cff44871e3263bd67af973e4b2f7fb19aab4df468d8
SERVER_HANDSHAKE_TRAFFIC_SECRET 68dcc859bc4edb51354a9f583e036d0b2787a337ee894e253925e273a5cd3889 a52a20827ce04dfc4ee557608ed5a0bfb6794ace0c4a1b69a1d56e5f16d8570b
EXPORTER_SECRET 68dcc859bc4edb51354a9f583e036d0b2787a337ee894e253925e273a5cd3889 8179afb8e7c7a77e35143c40a6bb62ccea2e644e48cc95b91b05f525bc59ada7
SERVER_TRAFFIC_SECRET_0 68dcc859bc4edb51354a9f583e036d0b2787a337ee894e253925e273a5cd3889 3d4abf6a9ea06395648a45428ca78c24962d8cc11440fe1d72f035ae35e61010
CLIENT_HANDSHAKE_TRAFFIC_SECRET 68dcc859bc4edb51354a9f583e036d0b2787a337ee894e253925e273a5cd3889 1d812a6c3c012a8fa4a6017ee573b47a5b361d15b861938ebca9194ecbc2a250
CLIENT_TRAFFIC_SECRET_0 68dcc859bc4edb51354a9f583e036d0b2787a337ee894e253925e273a5cd3889 6348a88dc9b6a350d72a7154140b824db80ba4f48c9e1fabcee76da8d248b041

Good. Next step is to capture the traffic. We'll use tcpdump with a simple expression to filter out the captured traffic:

[josevnz@dmaf5 temp]$ sudo tcpdump -i eno1 -v -v -v 'host asciinema.org' -w ~/temp/asciinema.org.pcap
dropped privs to tcpdump
tcpdump: listening on eno1, link-type EN10MB (Ethernet), snapshot length 262144 bytes

And in another window run the asciinema client (we'll do it twice to have more data):

[josevnz@dmaf5 SuricataLog]$ /usr/bin/asciinema upload demo-ascii.cast 
asciinema: upload failed: <urlopen error [Errno 32] Broken pipe>
asciinema: retry later by running: asciinema upload demo-ascii.cast
[josevnz@dmaf5 SuricataLog]$ 
[josevnz@dmaf5 SuricataLog]$ /usr/bin/asciinema upload demo-ascii.cast 
asciinema: upload failed: <urlopen error [Errno 104] Connection reset by peer>
asciinema: retry later by running: asciinema upload demo-ascii.cast

Now kill the tcpdump capture on the other window:

tcpdump: listening on eno1, link-type EN10MB (Ethernet), snapshot length 262144 bytes
^C113 packets captured
118 packets received by filter
0 packets dropped by kernel

Let's replay the pcap file to see what got recorded:

[josevnz@dmaf5 temp]$ tcpdump -r ~/temp/asciinema.org.pcap
reading from file /home/josevnz/temp/asciinema.org.pcap, link-type EN10MB (Ethernet), snapshot length 262144
07:17:18.244941 IP dmaf5.home.59896 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [S], seq 1651239781, win 64240, options [mss 1460,sackOK,TS val 3293505858 ecr 0,nop,wscale 7], length 0
07:17:18.337023 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59896: Flags [S.], seq 2395275599, ack 1651239782, win 65160, options [mss 1460,sackOK,TS val 3934370169 ecr 3293505858,nop,wscale 7], length 0
07:17:18.337070 IP dmaf5.home.59896 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [.], ack 1, win 502, options [nop,nop,TS val 3293505950 ecr 3934370169], length 0
07:17:18.337643 IP dmaf5.home.59896 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [P.], seq 1:518, ack 1, win 502, options [nop,nop,TS val 3293505951 ecr 3934370169], length 517
07:17:18.429273 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59896: Flags [.], ack 518, win 506, options [nop,nop,TS val 3934370263 ecr 3293505951], length 0
07:17:18.433850 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59896: Flags [.], seq 1:1449, ack 518, win 506, options [nop,nop,TS val 3934370267 ecr 3293505951], length 1448
07:17:18.433863 IP dmaf5.home.59896 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [.], ack 1449, win 501, options [nop,nop,TS val 3293506047 ecr 3934370267], length 0
07:17:18.433966 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59896: Flags [P.], seq 1449:2897, ack 518, win 506, options [nop,nop,TS val 3934370267 ecr 3293505951], length 1448
07:17:18.433981 IP dmaf5.home.59896 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [.], ack 2897, win 496, options [nop,nop,TS val 3293506047 ecr 3934370267], length 0
07:17:18.434089 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59896: Flags [.], seq 2897:4345, ack 518, win 506, options [nop,nop,TS val 3934370267 ecr 3293505951], length 1448
...
07:17:30.612523 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59898: Flags [.], ack 11148, win 501, options [nop,nop,TS val 3934382447 ecr 3293518134], length 0
07:17:30.612524 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59898: Flags [.], ack 12596, win 501, options [nop,nop,TS val 3934382447 ecr 3293518134], length 0
07:17:30.612558 IP dmaf5.home.59898 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [.], seq 35764:37212, ack 4724, win 499, options [nop,nop,TS val 3293518226 ecr 3934382447], length 1448
07:17:30.612563 IP dmaf5.home.59898 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [P.], seq 37212:38660, ack 4724, win 499, options [nop,nop,TS val 3293518226 ecr 3934382447], length 1448
07:17:30.612637 IP dmaf5.home.59898 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [.], seq 38660:40108, ack 4724, win 499, options [nop,nop,TS val 3293518226 ecr 3934382447], length 1448
07:17:30.612643 IP dmaf5.home.59898 > cip-109-107-37-0.gb1.brightbox.com.https: Flags [P.], seq 40108:41556, ack 4724, win 499, options [nop,nop,TS val 3293518226 ecr 3934382447], length 1448
07:17:30.613064 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59898: Flags [P.], seq 4724:5080, ack 12596, win 501, options [nop,nop,TS val 3934382448 ecr 3293518134], length 356
07:17:30.613106 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59898: Flags [P.], seq 5080:5104, ack 12596, win 501, options [nop,nop,TS val 3934382448 ecr 3293518134], length 24
07:17:30.614231 IP cip-109-107-37-0.gb1.brightbox.com.https > dmaf5.home.59898: Flags [R.], seq 5104, ack 12596, win 501, options [nop,nop,TS val 3934382448 ecr 3293518134], length 0

Time to fire up wireshark. I like to use a GUI for this as the filtering capabilities are nice, and you can explore the contents of the PCAP file much easier.

The contents of the traffic capture:

So we follow the first time we got a TLS hello message, right-click on the protocol preferences -> Transport Layer Security and then "pre-Master-Secret log filename":

Now time for the fun part. If you right-click the first hello message and say "follow TLS stream" a new window will open the whole conversation to the moment we got our connection reset, no encryption!

So we only managed to sent 33 KB before being cut-off by the asciinema server. How rude! :satisfied:

Because the data payload is not so big I will show it to you next, make sure you pay attention to the following:

1. I changed the Authorization: Basic contents as I don't want to leak my user/password encoded in base64.

2. Content-Length: 12444474. That's how asciinema knows how big is the file we want to upload, so the server rejects it.

3. Asciinema uses Nginx.

4. You can see the close message at the end (entity too large).

POST /api/asciicasts HTTP/1.1
Accept-Encoding: identity
Content-Length: 12444474
Host: asciinema.org
User-Agent: asciinema/2.0.2 CPython/3.9.9 Linux/5.14.18-100.fc33.x86_64-x86_64-with-glibc2.32
Accept: application/json
Content-Type: multipart/form-data; boundary=d5c6b2543ee94511943126c6a3c5d33a
Authorization: Basic XXXXX=
Connection: close

--d5c6b2543ee94511943126c6a3c5d33a
Content-Disposition: form-data; name="asciicast"; filename="ascii.cast"
Content-Type: application/octet-stream

{"version": 2, "width": 203, "height": 32, "timestamp": 1650568938, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}}
[0.191182, "o", "\u001b]777;notify;Command completed;eve_log.py --format table --timestamp '2022-02-23T18:22:24.405139+0000' test/eve.json\u001b\\\u001b]777;precmd\u001b\\\u001b]0;josevnz@dmaf5:~/SuricataLog-Logging-features-branch\u001b\\"]
[0.19215, "o", "\u001b]7;file://dmaf5/home/josevnz/SuricataLog-Logging-features-branch\u001b\\"]
[0.192399, "o", "[josevnz@dmaf5 SuricataLog-Logging-features-branch]$ "]
[1.000538, "o", "Let me show you how you can filter your Suricata alerts, displaying the results in different formats"]
[4.506902, "o", "\r\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C"]
[4.921813, "o", "\u001b[1@#"]
[5.170393, "o", "\u001b[1@ "]
[5.538486, "o", "\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C\u001b[C"]
[6.914337, "o", "\r\n"]
[6.918708, "o", "\u001b]777;notify;Command completed;# Let me show you how you can filter your Suricata alerts, displaying the results in different formats\u001b\\\u001b]777;precmd\u001b\\\u001b]0;josevnz@dmaf5:~/SuricataLog-Logging-features-branch\u001b\\"]
[6.920219, "o", "\u001b]7;file://dmaf5/home/josevnz/SuricataLog-Logging-features-branch\u001b\\"]
[6.920352, "o", "[josevnz@dmaf5 SuricataLog-Logging-features-branch]$ "]
[8.202111, "o", "1"]
[8.658197, "o", ")"]
[8.962176, "o", " "]
[10.153862, "o", "A"]
[10.409632, "o", " "]
[10.61679, "o", "n"]
[10.777002, "o", "i"]
[10.881112, "o", "c"]
[10.952884, "o", "e"]
[11.088641, "o", " "]
[11.201045, "o", "t"]
[11.466022, "o", "a"]
[11.553785, "o", "b"]
[11.818412, "o", "l"]
[11.961808, "o", "e"]
[13.51443, "o", "\r\n"]
[13.514675, "o", "bash: syntax error near unexpected token `)'\r\n"]
[13.518913, "o", "\u001b]777;notify;Command completed;1) A nice table\u001b\\\u001b]777;precmd\u001b\\\u001b]0;josevnz@dmaf5:~/SuricataLog-Logging-features-branch\u001b\\"]
[13.520551, "o", "\u001b]7;file://dmaf5/home/josevnz/SuricataLog-Logging-features-branch\u001b\\"]
[13.52072, "o", "[josevnz@dmaf5 SuricataLog-Logging-features-branch]$ "]
[22.176716, "o", "eve_log.py --format table --timestamp '2022-02-23T18:22:24.405139+0000' test/eve.jso"]
[24.202009, "o", "n"]
[26.097822, "o", "\r\n"]
[26.098024, "o", "\u001b]777;preexec\u001b\\"]
[26.312676, "o", "\u001b[?1049h\u001b[H\u001b[?1000h\u001b[?1003h\u001b[?1015h\u001b[?1006h\u001b[?25l\u001b[?1003h\r\n"]
[26.314059, "o", "\u001bP=1s\u001b\\\u001b[H\u001b[H                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                               "]
[26.314299, "o", "            \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                              "]
[26.314387, "o", "             \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                             "]
[26.314455, "o", "              \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                            "]
[26.314502, "o", "               \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                           "]
[26.31456, "o", "                \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                          "]
[26.314616, "o", "                 \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \u001bP=2s\u001b\\"]
[26.31467, "o", "\u001bP=1s\u001b\\\u001b[H\u001b[H                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                               "]
[26.314714, "o", "            \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                              "]
[26.314781, "o", "             \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                             "]
[26.314843, "o", "              \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                            "]
[26.314902, "o", "               \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                           "]
[26.314957, "o", "                \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                          "]
[26.315012, "o", "                 \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \u001bP=2s\u001b\\"]
[26.316033, "o", "\u001b[?25l"]
[26.318086, "o", "\r\u001b[2KParsing test/eve.json \u001b[38;5;237m........................................................................................................................\u001b[0m \u001b[35m  0%\u001b[0m \u001b[36m-:--:--\u001b[0m"]
[26.378123, "o", "\r\u001b[2KParsing test/eve.json \u001b[38;2;114;156;31m........................................................................................................................\u001b[0m \u001b[35m100%\u001b[0m \u001b[36m0:00:00\u001b[0m\r\n\u001b[?25h"]
[26.390312, "o", "\u001bP=1s\u001b\\\u001b[H\u001b[H                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                               "]
[26.39044, "o", "            \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                              "]
[26.390499, "o", "             \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                             "]
[26.390559, "o", "              \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                            "]
[26.390615, "o", "               \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                           "]
[26.39064, "o", "                \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                          "]
[26.390719, "o", "                 \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \u001bP=2s\u001b\\"]
[26.390868, "o", "\u001bP=1s\u001b\\\u001b[H\u001b[H                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                               "]
[26.390893, "o", "            \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                              "]
[26.390944, "o", "             \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                             "]
[26.391027, "o", "              \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                            "]
[26.391091, "o", "               \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                           "]
[26.391116, "o", "                \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                          "]
[26.391172, "o", "                 \r\n                                                                                                                                                                                                           \r\n                                                                                                                                                                                                           \u001bP=2s\u001b\\"]
[26.431391, "o", "\u001bP=1s\u001b\\\u001b[H\u001b[3m                                                                                      Suricata alerts for 2022-02-23 18:22:24.405139, logs=test/eve.json                                                   \u001b[0m\r\n.................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................\r\n...\u001b[1;35m \u001b[0m\u001b[1;35mTimestamp                      \u001b[0m\u001b[1;35m \u001b[0m...\u001b[1;35m \u001b[0m\u001b[1;35mSeverity\u001b[0m\u001b[1;35m \u001b[0m...\u001b[1;35m \u001b[0m\u001b[1;35mSignature                                           \u001b"]
[26.431543, "o", "[0m\u001b[1;35m \u001b[0m...\u001b[1;35m \u001b[0m\u001b[1;35mProtocol\u001b[0m\u001b[1;35m \u00HTTP/1.1 413 Request Entity Too Large
Content-Length: 176
Content-Type: text/html
Date: Fri, 22 Apr 2022 11:17:19 GMT
Server: nginx
Connection: close

<html>
<head><title>413 Request Entity Too Large</title></head>
<body>
<center><h1>413 Request Entity Too Large</h1></center>
<hr><center>nginx</center>
</body>
</html>

What is next for you?

So next time you have an issue with a program that is installed on your system you will know what to check.

We covered 3 ways to investigate an issue with an application that uploads a file to a remote website using HTTPS:

1. Using strace

2. If the program is a Python script, then there is a good chance you can read the code yourself and run the script through the debugger, step by step, to understand the issue. This is probably the most time-consuming way, but also it is the most rewarding as you learn how other good developers think!

3. And finally, we captured the encrypted traffic between us and the remote site and analyzed the upload. By enabling certain special features we were able to decrypt and replay the traffic, confirming our findings from the previous two interactions.

This list of techniques is not exhaustive, but for some cases like this they will give you a good start.

As usual please share your feedback! Let's have a conversation so everybody learns a little.

Discord was originally created for gamers, but many other people now use it these days. It has become an alternative to Slack for many users – especially for those who want to have an online community.

But sometimes, Discord might not open when you launch it. This could be due to pending updates, running games, and other causes.

In this article, I will show you 5 quick ways you can make Discord open again on a Windows 10 computer.

Table of Contents

• How to Fix Discord Not Opening in the Command Line
• How to Fix Discord Not Opening by Clearing AppData
• How to Fix Discord Not Opening by Clearing LocalAppData
• How to Fix Discord Not Opening by Closing Background Applications
• How to Fix Discord Not Opening with the Task Manager
• Conclusion

How to Fix Discord Not Opening in the Command Line

The number one fix I would recommend to make Discord open again is to kill the Discord task with the Command Prompt.

This is how to do it:

Step 1: Click on Start or press WIN (Windows key) on your keyboard, then search for "cmd".

Step 2: Hit ENTER or select the first search result to open the Command Prompt.

Step: Type in taskkill /F /IM discord.exe and hit ENTER.

You should get a message that the Discord process has been terminated.

How to Fix Discord Not Opening by Clearing AppData

When you clear an app's AppData, all cache files are cleared – which can fix some problems, including loading.

Go through the following steps to clear your Discord's AppData:

Step 1: Press WIN (Windows key) + R to open the Run dialogue.

Step 2: Type in "%appdata%" (without quotes) and press ENTER on your keyboard. This will open up the AppData folder.

Step 3: Locate the Discord folder and delete it. Delete it from your Recycle Bin too.

How to Fix Discord Not Opening by Clearing LocalAppData

Clearing the Discord's LocalAppData can make it open again. It can also fix the common JavaScript error associated with Discord as well.

To clear LocalAppData, follow these steps:

Step 1: Press WIN (Windows key) + R to open the Run dialogue.

Step 2: Type in "%localappdata%" (without quotes) and press ENTER on your keyboard. This will open up the LocalAppData folder.

Step 3: Look for the Discord folder and delete it. Go to your Recycle Bin and delete it too.

Note that you might have to reinstall Discord to get it running again after clearing its LocalAppData. I can attest that this solves the issue as I recently had to do it.

How to Fix Discord Not Opening by Closing Background Applications

A lot of games run in the background and this could have a negative effect on your Discord app.

Use the steps below to fix the issue only if you don't have useful apps running in the background.

Step 1: Click on Start or press WIN (Windows key) on your keyboard and select Settings.

Step 2: Select "Privacy".

Step 3: Click on Background apps on the left, then turn off the toggle under "Let apps run in the background".

How to Fix Discord Not Opening with the Task Manager

Stopping the Discord process with the Task Manager can make Discord open again as this refreshes the app.

Step 1: Press CTRL + SHIFT + ESC to open the Task Manager

Step 2: Make sure you are under the Processes. Right-click on Discord and select "End Task".

Conclusion

In this article, you learned how to fix Discord when it won't open in a few different ways.

Apart from the methods discussed in this guide, you can also fix the issue by uninstalling and reinstalling Discord.

Note that you can also fix another popular issue with Discord – JavaScript error – by using one of the fixes suggested in this article – clearing LocalAppData. I've had to do this myself.

Thanks a lot for reading. If you find this article helpful, consider sharing it with your friends. That's very much appreciated.

But before we jump into pseudocode, let's refresh our memories about what programming and coding are, in the simplest sense.

Programming is the manifestation of logic. A program is a set of instructions that defines the behaviour of your software application. Writing code is how you implement it for the machine.

What is Pseudocode?

Pseudocode literally means ‘fake code’. It is an informal and contrived way of writing programs in which you represent the sequence of actions and instructions (aka algorithms) in a form that humans can easily understand.

You see, computers and human beings are quite different, and therein lies the problem.

The language of a computer is very rigid: you are not allowed to make any mistakes or deviate from the rules. Even with the invention of high-level, human-readable languages like JavaScript and Python, it’s still pretty hard for an average human developer to reason and program in those coding languages.

With pseudocode, however, it’s the exact opposite. You make the rules. It doesn’t matter what language you use to write your pseudocode. All that matters is comprehension.

In pseudocode, you don't have to think about semi-colons, curly braces, the syntax for arrow functions, how to define promises, DOM methods and other core language principles. You just have to be able to explain what you're thinking and doing.

Benefits of Writing Pseudocode

When you're writing code in a programming language, you’ll have to battle with strict syntax and rigid coding patterns. But you write pseudocode in a language or form with which you're very familiar.

Since pseudocode is an informal method of program design, you don’t have to obey any set-out rules. You make the rules yourself.

Pseudocode acts as the bridge between your brain and computer’s code executor. It allows you to plan instructions which follow a logical pattern, without including all of the technical details.

Pseudocode is a great way of getting started with software programming as a beginner. You won’t have to overwhelm your brain with coding syntax.

In fact, many companies organize programming tests for their interviewees in pseudocode. This is because the importance of problem solving supersedes the ability to ‘hack’ computer code.

You can get quality code from many platforms online, but you have to learn problem solving and practice it a lot.

Planning computer algorithms with pseudocode makes you meticulous. It helps you explain exactly what each line in a software program should do. This is possible because you are in full control of everything, which is one of the great features of pseudocode.

Example of Pseudocode

Pseudocode is a very intuitive way to develop software programs. To illustrate this, I am going to refer back to a very simple program I wrote in my last article:

When a user fills in a form and clicks the submit button, execute a ValidateEmail function. What should the function do?

1. Derive an email regular expression (regex) to test the user's email address against.

2. Access the user's email from the DOM and store it in a variable. Find and use the right DOM method for that task.

3. With the email value now accessed and stored, create a conditional statement:

• If the email format doesn’t match the rule specified by the regex, access the element with the myAlert id attribute and pass in the “Invalid Email” message for the user to see.

• Else, if the above condition isn’t true and the email address format actually matches with the regex, check to see if the database already has such an email address. If it already does, access the element with the myAlert id attribute and pass in the “Email exists!” message for the user to see.

• Now, if both of these conditions aren’t met, (that is the email format matches the regex and the database doesn’t have such an email address stored yet), push the users email address into the database and pass in the “Successful!” message for the user to see.

Once you are done outlining the various steps you want your code to take, everything becomes easier and clearer. Now, let’s turn that psedocode into real JavaScript code:

let database = ['test1@gmail.com', 'test2@gmail.com', 'test3@gmail.com'];

function validateEmail() {
    let regexEmail = /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/;
    let emailAddress = document.getElementbyID('emailFld').value;
    if (!emailAddress.match(regexEmail)) {
        document.getElementbyID('myAlert').innerHTML = "Invalid Email!";
    } else if (database.includes(emailAddress)) {
        document.getElementbyID('myAlert').innerHTML = "Email exists!";
      else {
        database.push(emailAddress);
        document.getElementbyID('myAlert').innerHTML = "Successful!";
        return true;
      }
}

document.getElementById("myBtn").addEventListener("click", validateEmail);

All you have to do at this stage is find the programming language constructs that will help you achieve each of your steps. Noticed how seamless the transition from pseudocode to actual code became? That’s how effective writing pseudocode can be for program design.

Pseudocode is also a great way to solve programming-related problems when you're struggling with them. For those practising programming in coding challenge platforms like CodeWars, pseudocode can be of immense help.

How to Solve Programming Problems with Pseudocode

Solving programming problems can be hard. Not only do you have the logical part to reckon with, but also the technical (code forming) part as well. I recently uncovered a brilliant and effective formula for solving tricky coding problems.

Here are the steps you can follow to solving programming problems with pseudocode:

Step 1: Understand what the function does

First, you need to understand that all a function does is (optionally) accept data as input, work on the data little by little, and finally return an output. The body of the function is what actually solves the problem and it does so line by line.

Step 2: Make sure you understand the question

Next, you need to read and understand the question properly. This is arguably the most important step in the process.

If you fail to properly understand the question, you won’t be able to work through the problem and figure out the possible steps to take. Once you identify the main problem to be solved you'll be ready to tackle it.

Step 3: Break the problem down.

Now you need to break down the problem into smaller parts and sub-problems. With each smaller problem you solve, you'll get closer to solving the main problem.

It helps to represent these problem solving steps in the clearest and most easily understandable way you can – which is psedocode!

• Start solving: open and use tools like Google, Stack Overflow, MDN, and of course freeCodeCamp! :)

• For every step of the problem that you solve, test the output to make sure you’re on the right path. Keep solving these small problems until you arrive at the final solution.

I picked up this highly effective formula from Aaron Jack and I think you’ll benefit from it. Check out his video about how to solve coding problems:

Conclusion

As you can see, pseudocode is a very useful strategy for planning computer programs.

Of course, you have to remember that pseudocode is not a true representation of a computer program. While using pseudocode to plan your algorithm is great, you will ultimately have to translate it into an actual computer-readable program. This means that you'll eventually need to learn how to program in a real programming language.

Taking up coding challenges online is a great way to learn how to program because, as they say, practice makes perfect. But when you try your next challenge, don’t forget to implement pseudocode in the process!

You can check out some of my other programming-related posts on my personal blog. I am also available on Twitter.

Thank you for reading and see you soon.

P/S: If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here.

Python is one of the most powerful programming languages. It gives us various unique features and functionalities that make it easy for us to write code.

In this article we'll solve Leetcode array problems in one line using one of Python's most interesting features – List Comprehension.

What is List Comprehension?

Before going into the problems, let's make sure we understand what list comprehension is all about.

A list comprehension is a syntactic construct available in some programming languages for creating a list based on existing lists

• Wikipedia

Let's see how list comprehension works with an example.

Consider an array of numbers. Our task is to add 1 to the numbers at odd indices and to add 2 to the number at even indices.

Now we'll see how to solve the above problem using both a for-loop and list comprehension.

How to solve the problem with a for-loop

def addOneAndTwo(nums, n):
    for i in range(n):
        if i % 2 == 1:
            nums[i] += 1 
        else:
            nums[i] += 2 
    return nums

How to solve it with list comprehension

def addOneAndTwo(nums, n):
    return [nums[i] + 1 if i % 2 == 1 else nums[i] + 2 for i in range(n)]

You can see how the solution using list comprehension is simplified from 6 lines to 1 line. This is the power of list comprehension.

How to Solve Leetcode Problems with List Comprehension

Now let us solve the below Leetcode problems in 1 line using list comprehension.

1. Shuffle The Array

Here's the problem from Leetcode:

Given the array nums consisting of 2n elements in the form [x<sub>1</sub>,x<sub>2</sub>,...,x<sub>n</sub>,y<sub>1</sub>,y<sub>2</sub>,...,y<sub>n</sub>]. Return the array in the form [x<sub>1</sub>,y<sub>1</sub>,x<sub>2</sub>,y<sub>2</sub>,...,x<sub>n</sub>,y<sub>n</sub>].

Example

Input: nums = [2,5,1,3,4,7], n = 3
Output: [2,3,5,4,1,7]

Explanation: Since x1=2, x2=5, x3=1, y1=3, y2=4, y3=7 then the answer is [2,3,5,4,1,7].

Solution

def shuffle(self, nums, n):
    return reduce(lambda a, b: a + b, [[nums[i], nums[j]] for i, j in zip(range(0, n), range(n, 2 * n))])

2. Number of Good Pairs

Given an array of integers nums. A pair (i,j) is called good if nums[i] == nums[j] and i < j.Return the number of good pairs.

Example

Input: nums = [1,2,3,1,1,3]
Output: 4

Explanation: There are 4 good pairs (0,3), (0,4), (3,4), (2,5) 0-indexed.

Solution

def numIdenticalPairs(self, nums):
    return sum([int(i != j and nums[i] == nums[j]) for i in range(0, len(nums)) for j in range(i + 1, len(nums))])

3. Kids With the Greatest Number of Candies

Given the array candies and the integer extraCandies, where candies[i] represents the number of candies that the ith kid has.

For each kid check if there is a way to distribute extraCandies among the kids such that they can have the greatest number of candies among them. Notice that multiple kids can have the greatest number of candies.

Example

Input: candies = [2,3,5,1,3], extraCandies = 3
Output: [true,true,true,false,true]

Explanation: Kid 1 has 2 candies, and if they receive all extra candies (3) they will have 5 candies – the greatest number of candies among the kids.

Kid 2 has 3 candies, and if they receive at least 2 extra candies then they will have the greatest number of candies among the kids.

Kid 3 has 5 candies, and this is already the greatest number of candies among the kids.

Kid 4 has 1 candy, and even if they receive all extra candies they will only have 4 candies.

Kid 5 has 3 candies, and if they receive at least 2 extra candies then they will have the greatest number of candies among the kids.

Solution

def kidsWithCandies(self, candies, extraCandies):
    return [candy + extraCandies >= max(candies) for candy in candies]

4. Decompress Run-Length Encoded List

We are given a list nums of integers representing a list compressed with run-length encoding.

Consider each adjacent pair of elements [freq, val] = [nums[2*i], nums[2*i+1]] (with i >= 0). For each such pair, there are freq elements with value val concatenated in a sublist. Concatenate all the sublists from left to right to generate the decompressed list.

Return the decompressed list.

Example

Input: nums = [1,2,3,4]
Output: [2,4,4,4]

Explanation: The first pair [1,2] means we have freq = 1 and val = 2 so we generate the array [2].

The second pair [3,4] means we have freq = 3 and val = 4 so we generate [4,4,4]. At the end the concatenation [2] + [4,4,4] is [2,4,4,4].

Solution

def decompressRLElist(self, nums):
    return reduce(lambda a, b: a + b, [[nums[i + 1]] * nums[i] for i in range(0, len(nums), 2)])

5. Richest Customer's Wealth

You are given an m x n integer grid accounts where accounts[i][j] is the amount of money the i​​​​​<sup>​​​​​​th</sup>​​​​ customer has in the j​​​​​<sup>​​​​​​th</sup>​​​​ bank. Return the wealth that the richest customer has.

A customer's wealth is the amount of money they have in all their bank accounts. The richest customer is the customer that has the maximum wealth.

Example

Input: accounts = [[1,2,3],[3,2,1]]
Output: 6

Explanation: 1st customer has wealth = 1 + 2 + 3 = 6 2nd customer has wealth = 3 + 2 + 1 = 6 Both customers are considered the richest with a wealth of 6 each, so return 6.

Solution

def maximumWealth(self, accounts):
    return max([sum(row) for row in accounts])

Conclusion

I hope the above solutions were useful. You can combine list comprehension with other functions like map, filter and reduce to make the solutions more simple and effective.

Thank You 🤘

Linkedin | Github

This tweet about building projects really resonated with me:

It says a lot about how programmers build the projects we all admire. It pin-points the less glamorous parts of our activities which beginners don't always pay attention to, probably because of their lack of experience.

And that reminds me of my recent experience building a VSCode extension. The extension is meant to make me look like a genius in video tutorials and reduce my recording challenges. (But hey – I am really not a genius 😜).

The extension displays the content of a file per character whenever any key is pressed. It simulates a real-coding experience while I only pay attention to the voice recording. Wow! How did I build that? Well, let's see how it went.

It might go without saying, but you don't know how to build a new project until you've actually built it. Before I started, I didn't feel like I knew what to do and what to bring together. But I was sure of one thing – I knew how to find what I needed. Boom! The research began.

So let me tell you how I did it, so you can get better at building your own projects, too.

Break the Project Down into Smaller Units

_Photo by [Unsplash](https://unsplash.com/@markusspiske?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Markus Spiske / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

I knew it would be hard to find a complete tutorial about what I wanted to build. But it was relatively easy to find tutorial related to each unit of the project. So, I broke the project down into these parts:

1. Installing the VSCode extension.
2. Getting the content of an active file.
3. Breaking down the content of the file into characters. (Word => w, o, r, d).
4. Listening to key-presses.
5. Displaying the character one by one whenever any key was pressed.

Those are the basic things I expected the extension to be able to handle.

But wait! What if I am building a whole website? Don't worry – it's still the same process. This is what I would have done if I wanted to build a website, too.

Step 1: Break everything up into sections

For a website, your manageable sections might look like this:

1. Header
2. Main
3. SideBars
4. Footer

Step 2: Break the sections down into components

To do this, I would ask myself what I wanted in each section. And then I would list those elements out one by one.

✅ Header: I want a logo, search-box, signup/login button (or other navigation buttons) and settings in the header.

✅ Main: How many column(s) do I need? Does it have to include a left or right sidebar or a list?

✅ Footer: Do I want copyright information and navigation in the footer? Anything else?

Then I'd ask myself what other things I wanted and note them down as I thought of them.

In short, you have to list out everything you want in each section and component. But don't waste too much time on planning, because execution is key. Do it as quickly as possible because once you have a job, you'll probably hardly have any spare time to plan out your projects.

But you might be thinking, Oh, no! I am confused. How do I know all the sections and components I need as a beginner?

That is a good observation because I am not a beginner and I have had experience with of all of these components. That is why I can list them easily.

But it's ok. You will learn all these things along the line. You just need to pay attention to my VSCode extension story. :)

Write Your First Line of Code and Get Stuck‌

_Photo by [Unsplash](https://unsplash.com/@fx24?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Fernando Jorge / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

After having a clear picture of what to build, I believe the most important thing to kick-start a project is to write you first line of code and get stuck. It is pessimistic, but it helps you to become solution driven.

Instead of being worried unnecessarily because you're not sure of how to start, open you code editor of choice and write your first line of code – even if you get stuck right after that.

You first line of code will probably get deleted or improved upon several times, and that is fine. It is meant to help you overcome procrastination.

In reality, you will always be confused about how to start and what to do. Don't procrastinate because of such feelings, especially after you understand how the project should work in your head or on paper.

Don't try to understand everything before writing your first line of code. You will never understand everything. At least, no one has ever understood everything yet.

No Project is Perfect – Including Google‌

_Photo by [Unsplash](https://unsplash.com/@brett_jordan?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Brett Jordan / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

It is easy to want your project to be the best ever built, especially when you are a beginner. I have been there, so I know how it feels.

I was just an art student trying to solve a problem by using web technology. After I failed to hire a web developer to build the project for me because I couldn't afford the price they quoted, I decided to learn how to build it by myself.

Silly me tried to build almost every feature on the internet to make sure my project had all the features others didn't have. Anyway, I killed the project eventually.

The point I am making is don't try to build a project that can't be criticized – there is nothing like that. You need to focus on core features, not extra features that might make the project unusable.

Don't try to make a perfect project or feature – make usable and lovable projects and features instead.

Every Project is Built on Other Projects

_Photo by [Unsplash](https://unsplash.com/@lidyanada?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Lidya Nada / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

After I had a clear picture of what I needed to build the VSCode extension, I had to look into related projects. I opened the source code of vscode-hacker-typer to study how the project handles some of the things I wanted to implement. By doing that, I learnt a bit about VSCode extension APIs.

As I was totally inexperienced in making VSCode extensions, looking into vscode-hacker-typer helped me move from being totally clueless to knowing what to research.

Knowing the name of what you want to deal with is the greatest first step to solving any problem in programming.

For instance, say that there is a feature you like on a related website but you don't know what it is called. How will you research the feature? Well, it is not rocket science.

You can take a picture of the feature and ask for its name in programming groups or ask someone. Or you can discover it name or API by diving into a related project's source code like I did. So check out projects that are similar to your project, learn from them, and copy their features.

Don't Be Afraid to Google

_Photo by [Unsplash](https://unsplash.com/@mitchel3uo?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Mitchell Luo / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

Before I dove into creating the VSCode extension, I didn't even know where to start – but I was sure I would be able to research my way to something reasonable. I started googling different questions:

✅ How to get the content of a VSCode active editor?

✅ How to use VSCode activeTextEditor?

✅ How to use VSCode onDidTextDocumentChange?

And so on.

Understanding what you want to build is the first step to having relevant search results especially when building a project you have never built. You need to conceptualize the idea or features you want to implement so that you can find solutions you need.

Basic googling tips that can help you get better results

Know the keywords you care about.

For example, if I want to built a landing page with HTML and CSS only, I won't search for something like "How to build a landing page". That will be bring a lot of things I don't want. It has to include the keywords I care about.

Below are examples to study:

• How to build a landing page with HTML and CSS?
• How to make a VSCode extension with Typescript (If I want Typescript)?
• How to make a VSCode extension with JavaScript?

Make sure your expected keywords are included – be specific.

Googling (How to build a landing page with HTML and CSS?) may yield a generic result. That is an issue. But it can be fixed with exact matches.

Use quotes to get exact matches in Google

For example, "How to build a landing page with HTML and CSS" will give you an outcome with the exact words in that search.

If you want to explore general ideas about building a landing page, remove the quotes.

Exclude a search term with (-)

Sometimes, you only want a result with HTML and CSS, but you're getting those with HTML, CSS and JavaScript.

You can use "- JavaScript" to exclude JavaScript. For instance, you can search "How to build a landing page with HTML and CSS - JavaScript.

This is useful when you want to exclude certain keywords.

Switch out your terms

When you want to move from one language, library, or framework to another, you need to use all you know from the first language or framework.

For instance, you want to move from JavaScript to Python and you know how JavaScript works. All your previous search terms or approaches for JavaScript will still be very useful while using Python.

You only need to switch out your specific terms – replace JavaScript with Python in all your searches. Then, you can google "Array in Python" instead of "Array in JavaScript".

You'll Always Get Stuck – and That's OK

_Photo by [Unsplash](https://unsplash.com/@ianstauffer?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Ian Stauffer / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

‌The problem with "How to" tutorials is that they don't always inform you that getting stuck is a part of the process. The VSCode extension I have been working on is still not working because I am stuck. After thinking through every part, I was stuck while implementing the features.

The VSCode extension API I was using can't be iterated, so I have to find a way to do that. Also, vscode-hacker-typer doesn't use the approach I am using. It records keystrokes and replays them. I want to avoid recording keystrokes. I only want to display the content of an activeTextEditor character by character whenever any key is pressed.

You will always be stuck, and that is why you have to learn How to improve your debugging skills. Getting stuck is a significant part of the process. Your ability to overcome the challenges of getting stuck will determine how far you go in making projects.

Conclusion

It can be tempting to want to quit because you feel you are not as good as everyone else. The reality is that we all struggle behind the scenes. We've all solved a lot of problems through trial and error. We all feel dumb and fake because we are always building on the projects of others.

But don't forget that every amazing project has a less glamorous story you know nothing about behind it. What matters, above all, is making sure you build the project in the end.

Don't forget:

"The genius thing that we did was, we didn't give up" - Jay Z.

Ayobami loves writing history with software development and is currently helping those who are struggling to understand and build projects with HTML, CSS and JavaScript here.

I spent a year learning how to build products. Rather, I spent that year learning just how hard it is to build good products.

It's been a roller coaster ride so far and I want to share my learnings.

I'm going to highlight the most important lessons I've learned along the way.

What to Expect from This Article

Before I start, I do want to specify that this blog post is not as technical as most things you will read on freeCodeCamp.

While exploring the technology will be valuable, I believe it is just as beneficial for programmers to look at the business aspect of things. This is in part because it is not something most programmers pay attention to.

As programming becomes more and more popular and commoditized, it will become more valuable for programmers to understand exactly how they are adding value to a company.

Answering the why of problem solving is the most crucial business aspect while building technological solutions.

A Bit of Background and Context

I work at a garment manufacturing company headquartered in Bangalore, India. Nope, you read that right. I work in tech at a garment manufacturing company in Bangalore, India.

Not the most glamorous of jobs, but it does provide a lot of opportunities to experiment.

The garment industry is one of the most unorganized industries in India. For people working in the tech world, it's a little hard to grasp just how unorganized it is.

When people in tech think of a problem, they think of sifting through large sets of data to glean insights that might turn into more effective features.

But, what do you do when the data is still written in pencil on paper? How do you even get access to that information?

Sometimes it feels like the rest of the world stormed ahead leaving certain industries lagging far behind that. And it often feels like the wheel of invention is coming spinning back around again.

How Things Work at the Company

Before I can present the problems, I need to explain how a garment manufacturing unit works.

Here is an extremely simplistic overview of how the supply chain in garment manufacturing works

Pretty simple, right? It really is! And just like every other industry, the devil is in the details.

Let's dive in a little deeper. For brevity's sake, let's examine just the relationship between the textile mill and the garment manufacturer.

It starts with an order placed by the buyer with the garment manufacturer. The buyer will tell the garment manufacturer that they require a specific kind of fabric for their garments. This is called a style of fabric.

Now, when we refer to the style of fabric, it can mean many different things. Here are a few of the variables that comprise the style of the fabric.

For now, to keep things simple, let's just focus on fabric colour.

The garment manufacturer will then place an order for the fabric with the textile mill. Once the textile mill is ready to ship the fabric, the complexity starts.

The problem is one of scale. When you have over 30 suppliers of fabric, stationed all over a country, keeping track of when you get shipments of fabric is hard.

How We Can Define the Problem

Here are the key problems:

• Keeping track of when you receive the fabric shipment
• Keeping track of how much fabric you've received
• Keeping track of which supplier you've received the fabric from
• Keeping track of which location you've received the fabric at
• Whether the fabric passes quality inspection checks
• Whether the fabric passes the lab tests indicated by the buyer

Our problem is going to focus on only the following three points:

• When did we receive a shipment of fabric from a supplier?
• How much fabric did we receive in a specific shipment?
• At which location did we receive the fabric?

The most obvious solution is Excel sheets.

Lesson #1: In big organizations, Excel functions as a distributed database.

Excel works well, for a while, and then quickly becomes difficult to maintain.

Why? Let's start a hypothetical garment manufacturing company to answer that.

Phase 1

Okay, so we've just started and we have 2 suppliers, 3 factories, and a head office. That's pretty good for a start!

Let's also say that we have 1 buyer. Having a single buyer means that the number of different styles of fabric that we have to deal with are small.

As and when each factory receives fabric, they let the head office know via email the amount of fabric and the style of fabric they received. Then the head office puts that data into an Excel sheet.

Each factory receives fabric once a day, so that means the head office will receive 3 emails a day. Not too bad!

Even if a supplier delays a shipment, it's relatively easy to track because there are only 2 suppliers.

Phase 2

Things are going well, business is growing, and you decide to expand. You set up 5 more factories.

You also increase the number of buyers you're working with, which in turn increases the number of styles of fabric.

You also want to increase your turnover, so 3 of the factories receive fabric twice a day: once in the morning, once in the evening.

Things just got a little more real.

You'll notice that each supplier's face is now invisible. This is not a coincidence. Yeah, I did it to save space but I also did it to illustrate how as scale increases, your personal relationships with business partners take a back seat.

It's simply not possible to maintain the same kind of personal relationship you had with 2 suppliers, with 6 suppliers and 8 factories to boot!

You might wonder why the above point is relevant. That's because it leads into the next lesson.

Lesson #2: Business relationships are built almost entirely on trust, especially in the absence of technology.

Let's examine the lesson above for a bit. It's important because the goal of most technological systems is to eliminate the need for trust. Of course, that's not entirely possible.

Before continuing, there is one quick thing I need to mention. When suppliers provide fabric to manufacturing units, they usually provide it in the form of a roll of fabric.

Let's construct a scenario with you as a garment manufacturer. You have a supplier who provides you with rolls of fabric.

One time, you receive 10 rolls of fabric and based on an anonymous tip-off decide to measure the length of each roll of fabric against what the supplier tells you it is.

The above infographic shows you what that would look like.

To your dismay, you find out that the supplier is cheating you and you're short 36m of fabric. In a low-margin industry like garment manufacturing, this counts for a lot.

Also, this was only for 10 rolls of fabric. As your company grows, you're going to order more rolls of fabric from a supplier. Imagine you had a 100 rolls of fabric to go through instead of 10.

Manually checking each roll of fabric is not an operation that can scale, and as your operations scale, trust becomes more important.

Now, back to our problems of scaling. We have a total of 6 suppliers, 8 factories, and more buyers – and therefore more styles of fabric.

With 5 factories receiving fabric once a day and 3 factories receiving fabric twice a day, the head office will receive 5*1 + 3*2 = 11 emails a day.

Things have gotten harder not only because the head office is receiving more emails but because the styles of fabric they are receiving have also increased. This adds to the number of rows in an Excel sheet.

Now, when a supplier delays a shipment, things get a lot harder to keep track of because the factories are receiving 11 shipments a day from 6 different suppliers.

But, even now, Excel is not a bad option at all. However, the fabric department is under a lot of strain trying to keep up with the workload, so the head office does what any good organization would do and adds a couple more employees.

Was adding two employees a bad idea? All answers are opinionated.

A technologist would say: "Why would you add two more employees? You need to simplify the process by adding automation!"

A CEO would reply: "Why? The cost of automation is not worth it. It's simpler to add two employees and keep our process the same."

Lesson #3: Not everything is worth automating. This is the hardest lesson to accept for me.

Relevant XKCD

Phase 3

Time passes and business continues to boom. Being a capitalistically inclined CEO, you want to increase the scale of the business again!

This time, you increase the number of factories to 14. You also add more buyers to the portfolio, so this increases the number of styles of fabric the factories need to work with. 6 factories receive fabric twice a day and the remaining 8 receive fabric once a day.

You also work with 20 suppliers now because of all the different styles of fabric you require.

I haven't bothered to name any of the suppliers or the factories in the image above cause it would be too much effort.

But, again, this is to illustrate that the personal relationship you might have had with each of the managers of the factories deteriorates. You simply can't maintain each of those relationships to the same degree.

Now, the head office will receive 8*1 + 6*2 = 20 emails a day! Each email also contains more data because we increased the number of styles we are working with.

Maintaining a manual central Excel sheet becomes harder and harder. Simply adding more employees to the task also won't necessarily help because you might just end up with multiple copies of a centralized Excel sheet in the head office.

How To Solve The Problem

Now, there are multiple ways to solve this problem.

One could be to ask each of the factories to maintain their own daily Excel sheet and send it as an attachment via email to the head office.

However, this again involves someone copying and pasting the data from each factory into one centralized Excel sheet. Nothing wrong with this, but there is probably a more efficient solution.

Another potential solution is we could ask each of the units to maintain an individual Google Sheet and run a script using Google App Script every day like a cron job and pick up the data.

However, if you want more data like the length of each roll, you're out of luck. There is no way you can ask people working in factories to manually enter the length of each roll of fabric everyday. Because, like we said earlier, you could potentially receive 150 rolls of fabric a day.

Our Solution

The solution we ultimately went for, at my company, isn't a surprising one: we decided to use barcodes.

We place a barcode on each roll of fabric. The barcode correlates to the length of a roll, the style of fabric, and which buyer it's for.

We built a small Android application that allows users to scan barcodes with the device camera, and on each scan hits an API indicating that this specific barcode was scanned in a specific location (picked up via GPS).

Scanning a roll of fabric allows us to pick up the location of the roll via GPS and the date and time.

Adding up all the rolls of fabric scanned at a location allows us to know the total length of fabric received by a factory.

Best of all, this reduces the workload for the factories themselves. Their only job now is to scan the rolls of fabric. Scanning one roll of fabric takes ~3 seconds, so scanning 100 rolls of fabric takes ~5 minutes.

Here is a basic schematic of what we built:

• A web based application that is used to generate the barcodes
• An Android application that is used to scan the barcodes
• An API that both the web app and Android app communicate with. The API in turn communicates with the MySQL DB.

The whole thing is hosted on AWS and the Android app is hosted on Google Play Store.

The solution seems simple enough, but it isn't.

What We Learned From Solving The Problem

Lesson #4: Building things for people is hard because there is often a disconnect between the people building the thing and the people the thing is being built for.

This disconnect is why it's a great idea to build a product that fulfills a need you've long wished existed.

One of the first mistakes we made with the Android app was giving our users too many options

The sketch above shows what a very early verion of our application looked like. Clicking each of those buttons took you to the camera screen. However, each of them made a different API call and so returned a different result.

The rationale for including the Enter button was that, if the barcode were to get scratched and couldn't be picked up by the phone camera, the user could then enter the barcode instead and it would count as a scan.

Here's what one of our barcode numbers looks like: k29_%!s5qG. There is no chance that anybody is going to sit down and enter that sequence of characters.

The rationale for the Read button was that if someone were to want to identify what kind of fabric a specific roll was, they could scan the barcode in Read mode and it would return information about that roll of barcode.

The factories already had their own method of storing information about the roll, though. They just wrote it down in pencil and paper and stuck it to a tag that gets attached to the roll.

Is it the most technologically advanced system? Heck no! But, does it work? Heck yes! And we should have respected the fact that they already had their own way of doing the same operation.

The end result is that almost no one even bothers clicking on either of the Read or Enter buttons.

When building things, keep things to the bare minimum. There is no reason to add additional features unless absolutely required.

The second mistake we made was not knowing our audience.

When we came up with the idea of building a web application for people to use to generate barcodes, it seemed like a no-brainer.

We ran into a funny problem, though.

When we explained to the people working in the factories that they needed to enter the address into the address bar, we got blank looks in response.

You see, with the privileged background most of us come from, we tend to forget that there is a large majority of the population that doesn't know how to interact with a web browser. Why? They've never had the need to. They interact with the internet primarily through smartphone apps.

This might seem like a bit of a stretch but I've seen the evidence with my own eyes. This is not to suggest that people who don't know how to use a browser are less intelligent by any stretch of the imagination. It simply means that we need to communicate things to them differently.

Now, this topic of communication brings me to the final lesson I've learnt. Probably the most hard-earned lesson and definitely the most insightful.

Lesson #5: All problems in an organization are communication problems.

Look back at what we've covered in this article.

The first issue we uncovered was the issue of emails. When an organization is small, fewer emails are exchanged. As an organization scales, the number of emails increases and it becomes harder to keep track. Communication problem.

The second issue we uncovered was one of trust between the supplier and the manufacturer. The supplier communicated wrong/false information to the manufacturer. The manufacturer had to spend valuable time correcting this false information. Communication problem.

The third issue we uncovered was how to explain to people who've never used a web browser, how to navigate to a specific page. Communication problem.

I know it sounds a little like pigeon holing where I'm trying to force every problem into a communication problem, but at the heart of most problems is just that: poor communication.

Conclusion

I glossed over the more technical aspects of the solution we built. However, I think that is not the interesting part. What is interesting is how we've attempted to solve problems.

If you think the problems I am working on are interesting, take a look at our job listings.

If you can't find a role that suits you in the listings, please shoot me a mail at zaid@indian-designs.com.

I had fifteen minutes left, and I knew I was going to fail.

I had spent two months studying for my first technical interview.

I thought I was prepared, but as the interview came to a close, it hit me: I had no idea how to solve coding problems.

Of all the tutorials I had taken when I was learning to code, not one of them had included an approach to solving coding problems.

I had to find a method for problem-solving—my career as a developer depended on it.

I immediately began researching methods. And I found one. In fact, what I uncovered was an invaluable strategy. It was a time-tested four-step method that was somehow under the radar in the developer ecosystem.

In this article, I’ll go over this four-step problem-solving method that you can use to start confidently solving coding problems.

Solving coding problems is not only part of the developer job interview process—it’s what a developer does all day. After all, writing code is problem-solving.

A method for solving problems

This method is from the book How to Solve It by George Pólya. It originally came out in 1945 and has sold over one million copies.

His problem-solving method has been used and taught by many programmers, from computer science professors (see Udacity’s Intro to CS course taught by professor David Evans) to modern web development teachers like Colt Steele.

Let’s walk through solving a simple coding problem using the four-step problem-solving method. This allows us to see the method in action as we learn it. We'll use JavaScript as our language of choice. Here’s the problem:

Create a function that adds together two numbers and returns that value.

There are four steps to the problem-solving method:

1. Understand the problem.
2. Devise a plan.
3. Carry out the plan.
4. Look back.

Let’s get started with step one.

Step 1: Understand the problem.

When given a coding problem in an interview, it’s tempting to rush into coding. This is hard to avoid, especially if you have a time limit.

However, try to resist this urge. Make sure you actually understand the problem before you get started with solving it.

Read through the problem. If you’re in an interview, you could read through the problem out loud if that helps you slow down.

As you read through the problem, clarify any part of it you do not understand. If you’re in an interview, you can do this by asking your interviewer questions about the problem description. If you’re on your own, think through and/or Google parts of the question you might not understand.

This first step is vital as we often don’t take the time to fully understand the problem. When you don’t fully understand the problem, you’ll have a much harder time solving it.

To help you better understand the problem, ask yourself:

What are the inputs?

What kinds of inputs will go into this problem? In this example, the inputs are the arguments that our function will take.

Just from reading the problem description so far, we know that the inputs will be numbers. But to be more specific about what the inputs will be, we can ask:

Will the inputs always be just two numbers? What should happen if our function receives as input three numbers?

Here we could ask the interviewer for clarification, or look at the problem description further.

The coding problem might have a note saying, “You should only ever expect two inputs into the function.” If so, you know how to proceed. You can get more specific, as you’ll likely realize that you need to ask more questions on what kinds of inputs you might be receiving.

Will the inputs always be numbers? What should our function do if we receive the inputs “a” and “b”? Clarify whether or not our function will always take in numbers.

Optionally, you could write down possible inputs in a code comment to get a sense of what they’ll look like:

//inputs: 2, 4

Next, ask:

What are the outputs?

What will this function return? In this case, the output will be one number that is the result of the two number inputs. Make sure you understand what your outputs will be.

Create some examples.

Once you have a grasp of the problem and know the possible inputs and outputs, you can start working on some concrete examples.

Examples can also be used as sanity checks to test your eventual problem. Most code challenge editors that you’ll work in (whether it’s in an interview or just using a site like Codewars or HackerRank) have examples or test cases already written for you. Even so, writing out your own examples can help you cement your understanding of the problem.

Start with a simple example or two of possible inputs and outputs. Let's return to our addition function.

Let’s call our function “add.”

What’s an example input? Example input might be:

// add(2, 3)

What is the output to this? To write the example output, we can write:

// add(2, 3) ---> 5

This indicates that our function will take in an input of 2 and 3 and return 5 as its output.

Create complex examples.

By walking through more complex examples, you can take the time to look for edge cases you might need to account for.

For example, what should we do if our inputs are strings instead of numbers? What if we have as input two strings, for example, add('a', 'b')?

Your interviewer might possibly tell you to return an error message if there are any inputs that are not numbers. If so, you can add a code comment to handle this case if it helps you remember you need to do this.

// return error if inputs are not numbers.

Your interviewer might also tell you to assume that your inputs will always be numbers, in which case you don’t need to write any extra code to handle this particular input edge case.

If you don’t have an interviewer and you’re just solving this problem, the problem might say what happens when you enter invalid inputs.

For example, some problems will say, “If there are zero inputs, return undefined.” For cases like this, you can optionally write a comment.

// check if there are no inputs.

// If no inputs, return undefined.

For our purposes, we’ll assume that our inputs will always be numbers. But generally, it’s good to think about edge cases.

Computer science professor Evans says to write what developers call defensive code. Think about what could go wrong and how your code could defend against possible errors.

Before we move on to step 2, let’s summarize step 1, understand the problem:

-Read through the problem.

-What are the inputs?

-What are the outputs?

Create simple examples, then create more complex ones.

2. Devise a plan for solving the problem.

Next, devise a plan for how you’ll solve the problem. As you devise a plan, write it out in pseudocode.

Pseudocode is a plain language description of the steps in an algorithm. In other words, your pseudocode is your step-by-step plan for how to solve the problem.

Write out the steps you need to take to solve the problem. For a more complicated problem, you’d have more steps. For this problem, you could write:

// Create a sum variable.

Add the first input to the second input using the addition operator.

// Store value of both inputs into sum variable.

// Return as output the sum variable.

Now you have your step-by-step plan to solve the problem.

For more complex problems, professor Evans notes, “Consider systematically how a human solves the problem.” That is, forget about how your code might solve the problem for a moment, and think about how you would solve it as a human. This can help you see the steps more clearly.

3. Carry out the plan (Solve the problem!)

The next step in the problem-solving strategy is to solve the problem. Using your pseudocode as your guide, write out your actual code.

Professor Evans suggests focusing on a simple, mechanical solution. The easier and simpler your solution is, the more likely you can program it correctly.

Taking our pseudocode, we could now write this:

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

Professor Evans adds, remember not to prematurely optimize. That is, you might be tempted to start saying, “Wait, I’m doing this and it’s going to be inefficient code!”

First, just get out your simple, mechanical solution.

What if you can’t solve the entire problem? What if there's a part of it you still don't know how to solve?

Colt Steele gives great advice here: If you can’t solve part of the problem, ignore that hard part that’s tripping you up. Instead, focus on everything else that you can start writing.

Temporarily ignore that difficult part of the problem you don’t quite understand and write out the other parts. Once this is done, come back to the harder part.

This allows you to get at least some of the problem finished. And often, you’ll realize how to tackle that harder part of the problem once you come back to it.

Step 4: Look back over what you've done.

Once your solution is working, take the time to reflect on it and figure out how to make improvements. This might be the time you refactor your solution into a more efficient one.

As you look at your work, here are some questions Colt Steele suggests you ask yourself to figure out how you can improve your solution:

• Can you derive the result differently? What other approaches are there that are viable?
• Can you understand it at a glance? Does it make sense?
• Can you use the result or method for some other problem?
• Can you improve the performance of your solution?
• Can you think of other ways to refactor?
• How have other people solved this problem?

One way we might refactor our problem to make our code more concise: removing our variable and using an implicit return:

function add(a, b) {
 return a + b;
}

With step 4, your problem might never feel finished. Even great developers still write code that they later look at and want to change. These are guiding questions that can help you.

If you still have time in an interview, you can go through this step and make your solution better. If you are coding on your own, take the time to go over these steps.

When I’m practicing coding on my own, I almost always look at the solutions out there that are more elegant or effective than what I’ve come up with.

Wrapping Up

In this post, we’ve gone over the four-step problem-solving strategy for solving coding problems.

Let's review them here:

• Step 1: understand the problem.
• Step 2: create a step-by-step plan for how you’ll solve it.
• Step 3: carry out the plan and write the actual code.
• Step 4: look back and possibly refactor your solution if it could be better.

Practicing this problem-solving method has immensely helped me in my technical interviews and in my job as a developer.

If you don't feel confident when it comes to solving coding problems, just remember that problem-solving is a skill that anyone can get better at with time and practice.

Good luck!

If you enjoyed this post, join my coding club, where we tackle coding challenges together every Sunday and support each other as we learn new technologies.

If you have feedback or questions on this post, feel free to Tweet me @madisonkanna.

In this tutorial, we’ll learn how to find the number of vowels in a string with JavaScript. This is a problem you might be asked in junior developer job interviews, and it’s also a CodeWars problem.

Before we get started coding, let’s read over the problem description in full:

Return the number (count) of vowels in a given string. We will consider a, e, i, o and u as vowels, but not y. The input string will only consist of lower case letters and/or spaces.

Step 1: Make a plan to solve the problem

For this problem, we’ll create a function, called getCount, which takes as input a string and returns as output the count of how many vowels are in that string.

Let’s go over some examples.

With the first example, we see that our function returns 5, which is how many times a vowel appears in the string abracadabra. With the string abc, only 1 is returned, as only one vowel (a) appears.

To solve this problem, we’ll create a vowelsCount variable that will keep track of how many vowels are in the string.

We’ll also create an array, vowels, that holds all of our vowels. We’ll go through each character in our string. If the character is a vowel, we’ll increase our vowelsCount variable.

Finally, we’ll return the vowelsCount variable.

Let’s get started!

Step 2: Write the code to solve the problem

First we write our function, getCount. Next we’ll create a variable, vowelsCount, and set it to 0.

We’ll create our vowels array next. This allows us to have every vowel in one place, and we can use this array later.

Now we need to go through every character in our input string, str. We need to go through or look at every character in our string so that we can determine whether or not it is a vowel.

To do this, we can use the for...of statement that works on strings. You can read more on it here.

Now inside our for loop, we have the ability to look at and go over each character in our string.

Next, we want to check whether or not each character is a vowel.

To do this, we can use the includes method. The includes() method determines whether an array includes a certain value among its entries. It returns true if so, and false if not.

Using includes, we’ll check if our vowels array contains the character we’re currently iterating over in our loop.

We’ve created our if statement to check whether the current character is a vowel. If the character is a vowel, then we want to increase our vowelsCount variable. To do this, we can use the increment operator in JavaScript:

At this point in our code, we’ve looked at each character in the string, determined whether it was a vowel or not, and increased the number we stored in vowelsCount if it was.

Lastly, all we need to do is have our function return our vowelsCount variable. We can do this by returning the variable outside of our loop.

There we have it.

That's it!

We’ve now written a function that will take as input a string and return as output the number of times a vowel appeared in the string.

If you enjoyed this post, join my coding club, where we tackle coding challenges together every Sunday.

If you have feedback or questions on this post, feel free to Tweet me @madisonkanna.

Trade-offs are present in all our activities. Maybe you have heard the so-called "No free lunch theorem" in Machine Learning. The theorem states that there is no silver bullet when it comes to machine learning models. But in fact, there is never a silver bullet when it comes to anything.

And that is not a Computer Science principle but an economics principle.

If you have written code for more than a month you have likely experienced the necessity of trade-offs in programming – or at least have heard about them.

Sometimes you sacrifice performance in the name of security, security in the name of scalability, beauty and readability in the name of performance, and so on. Don't forget you also probably sacrifice parties and fun in general in the name of programming, so make it worth it.

In the specific case of algorithms, the main resources are time and memory, so the trade-offs always involve those resources.

It's common to find several solutions for the same problem, because one of them is faster but the other one is cheaper when it comes to storage. And of course, there are other factors like implementation, simplicity, and security.

In this post, I'm going to write about how you can combine several solutions to get the one that fulfills all your requirements.

First I'm going to show an interesting idea that E.W. Dijkstra proposed to find prime numbers. After that, I will show an idea I came up with to obtain a data structure that combines the power of arrays and linked lists.

Requirements

I assume you have basic programming skills as well as some knowledge about data structures like arrays, linked lists, and heaps.

You should also have some understanding of big-O notation to calculate complexity.

Lastly, it would be good you were familiar with the algorithm called tje Sieve of Eratosthenes. In case you aren't, you can check out this post link.

There is no other previous knowledge required to understand what I'm about to discuss.

Two algorithms, one problem

The problem is to find all prime numbers from 0 (zero) to N. It's the kind of problem you learn to do when you are beginning your journey in programming. And I want to start with the simplest solution.

The Naive Algorithm

In the naive algorithm, we iterate over all numbers x from 2 to N. Then we check whether x has any divisor besides itself and one. For the last step, we can check for every number d between 2 and x - 1 whether it is a divisor or not.

There is room for improvement in the last step, because we only need to check the divisors that are less than or equal to the square root of x. A pseudocode of the algorithm is written below:

   primes(N):
      prime_numbers <- [] # empty list
      for x = 2 to N:
          is_prime <- true
          for d = 2 to sqrt(x):
              if d divides x:
                   is_prime <- false # we found a divisor of x so x is not a prime number
          if is_prime:
               prime_numbers.add(x) # if we didn't find a divisor then x is prime
       return prime_numbers

What's the runtime complexity of the previous algorithm? Well, we take every number from 2 to N and for each one, we iterate over all its possible divisors. So we make O(N*sqrt(N)) operations, where sqrt stands for the square root function.

What about memory? We only store the primes we find. For a big enough N, the number of primes is relatively small compared with N. So, let's denote the memory complexity as O(Primes(N)), where Primes(N) is the number of primes between 0 and N. Note that this is optimum in terms of memory because we at least need to store all the prime numbers.

The Sieve of Eratosthenes

You probably already know that there is a better algorithm to find all the prime numbers in a given range: the sieve of Eratosthenes. Let's look at it.

The idea is to maintain an array of length N where every entry is either false or true. If the i-th position in the array is true, then we say that i is a prime number, otherwise i is not prime.

We start with all positions with a true value, and then for every position, starting with i = 2, we make false every multiple of i.

We end up with an array in which every position with a true value represents a prime number. The code with some optimizations is presented below.

    primes(N):
        prime_numbers <- [] # empty list
        sieve <- a boolean list with length equal to N and all its elements set to true

        for i = 2 to sqrt(N): # we only need to analyze the numbers less than or equal to sqrt(N)
            if sieve[i]: # if sieve[i] is true then i is prime
                prime_numbers.add(i)
                for j = i*i to N: # we can start the inner loop in i*i
                    sieve[j] <- false
                    j <- j + i
         return prime_numbers

It can be proved that the algorithm described above does O(N log(N)) operations which is better than the naive approach.

Even it can be improved to O(N)! But we need to store an array with all the N numbers, and thus, we end up with a more expensive algorithm in memory terms. Here we have the trade-off: time in exchange for memory.

Can we design an algorithm that is faster than the naive idea but cheaper in memory terms than the sieve of Eratosthenes?

Dijkstra and the production line

In the '60s, E.W. Dijkstra wrote in one of his manuscripts [PDF] an algorithm that combines the naive and the sieve ideas. But before we talk about it, let's analyze the differences between the two previous algorithms.

When applying the naive algorithm we focus on analyzing whether every number is prime or not. When applying the sieve we analyze, for every prime number, all its multiples. The difference can be illustrated with the following analogy.

Imagine we want to build several products, like action figures. We have two options: building them one by one or applying a production line and in every stage, we add one component of the action figure. With the latter, we end up producing more in less time, but we need the "line infrastructure".

Dijkstra combined those ideas by analyzing a number at a time but taking advantage of the previous operations. We can maintain a pool of primes that have already been discovered, and, for each of those prime numbers, store the smallest multiple that has not been analyzed yet.

For example:

If we are analyzing the number 6, then we have stored primes 2, 3, and 5, along with their smallest-not-analyzed-multiples that are: 6 for 2, also 6 for 3, and 10 for 5.

Then, when analyzing a new number we take the smallest multiple stored until that moment and if that multiple is greater than the new number, then we have found a new prime. Otherwise, we have a composite number and we need to update the multiples of the stored primes that have the new number as its smallest multiple.

We begin storing the prime number 2 with the smallest multiple 4 as well. Then when analyzing 3 we find that 4 > 3 so 3 is prime. We store 3 along with its smallest multiple that has not been analyzed yet (6). When analyzing 4 we find that 4 is stored as a multiple of 2, then we update the multiple of 2 that now will be 6. When analyzing 5 we find that 6 > 5 so 5 is a prime number and we store it along with 10, and so on... The code is presented below.

    primes(N):
        primes_pool <- Heap( (4, 2) ) # a heap that contains a tuple with a prime number (2) and its least multiple that hasn't been analyzed yet (4).
        prime_numbers <- [2] # a list that contains the number 2
        for i = 3 to N:
            tuple <- getMin(primes_pool) # get the tuple with the minimum multiple, the prime number attached to it is irrelevant
            mult <- tuple.first # the multiple is stored in the first position of the tuple
            if mult > i:
                prime_numbers.add(i) # i is prime!
                primes_pool.insert( (i*i, i) ) # we insert i along with their least multiple, but it can be inserted i*i instead and the algorithm remains correct
                continue
            # otherwise i isn't prime and then...
            for t such that t is in primes_pool and t.first is equal to mult:
                t.first <- t.first + t.second # we update every tuple in the pool that has i as it's least multiple
        return prime_numbers

The previous method only stores the prime numbers and another number for each of those primes. So we have a memory complexity of O(Primes(N)) which is the same as the naive idea.

If we store the prime numbers along with their multiples in a structure like a heap, we get a time complexity of O(N*log N) which is the same as the sieve. So we got what we wanted!

The trick here is that we don't need to mark every multiple of the given prime but just the smallest multiple.

I need to say that this is not a practical idea in the sense that the memory complexity of the sieve of Eratosthenes is not that bad and it is an algorithm that's very easy to implement.

My point is that sometimes, if you have several ideas, each of which cannot be applied because of some flaw, then maybe is a good idea to combine their strengths. This gives you a hybrid solution for your problem.

Dijkstra's Factory of Primes taught me to think that way, although I have never implemented that algorithm in a real-life scenario.

Combining arrays with linked lists

Arrays are simple structures that allow us to get an element by its index in constant time. But we need O(N) operations to insert or remove an element to/from the array in the worst case, where N is the length of the array.

On the other hand, linked lists are structures composed of nodes. Every node has a reference to the next one, and, in the case of doubly-linked lists, each node also has a reference to the previous one.

In this case, we need O(N) operations to reach a node in the worst case, but the insert and remove operations can be done in constant time.

I think it's natural to think about a "perfect data structure" that allows us to make the three operations in constant time. Sadly, such a structure does not exist, but I have found a middle point between the two opposite poles.

The "issue" with arrays is that they maintain a reference to all of their elements. That allows us to retrieve any element with the same amount of operations no matter where the element is.

But maintaining those references is what makes the insertions and deletions so costly.

When it comes to linked lists we only maintain a reference to the first and the last node and each node has a reference to its neighbors. So, when inserting or removing a new element we only need to change a few references.

But that lack of references is the reason that we have to spend so many operations to get an element in the worst case.

Viewing the problem from that angle, the idea of finding a middle point in the number of references seems natural. What happens if we maintain a reference to sqrt(N) nodes of the linked list instead of referencing just the first and the last element?

That allows us to have a list of length sqrt(N) such that the distance between each of those nodes in the actual list is sqrt(N). Having that, we can do each operation (index, insertion, and deletion) in O(sqrt(N)).

If you want to see more details about this structure and a Lisp implementation of it, you can do it here.

I have also written a post about it in my personal blog.

Conclusions

We have seen two examples of how you can combine existing solutions to get another one that has some of the good qualities of each of them. My purpose was to show you this way of thinking, not just specific examples.

Note that in the case of Dijkstra's idea, we could achieve the time of the fastest solution and the memory complexity of the naive algorithm. In the second example, we just got a middle point, so the fastest solution is still faster and the memory-cheaper solution is still cheaper.

But the new structure is like a decathlon athlete – it is good in every specificity, but not the best in any one of them.

So don't try to find the silver bullet – remember that there's no free lunch. Even Dijkstra's idea has the disadvantage of being harder to implement and to understand.

Hope you have learned something from this post. You can find more content like this in my personal blog and by following me on Twitter.

The answer may seem obvious: you’re done with a problem once you’ve solved it.

That’s how I approached problem-solving when I began learning to code. I was on a problem-solving treadmill: solving as many problems as quickly as possible.

And why not? There’s no shortage of problems to solve. Besides, don’t you get better by solving more problems? More to the point: what else can you do once you have the answer? As it turns out, quite a bit. The fallacy of my approach soon surfaced.

Although I solved the problem, I didn’t learn much from it. That’s because a few days or weeks later when I tried to re-solve the problem or when I came across a related one, I got really stuck. Mistakes were made. Concepts were confused. Progress was stalled.

I now realize that getting the solution is only part of the problem-solving process. Then, in the words of a mathematician named George Pólya, it’s time to “look back.”

Looking Back

Pólya writes about the problem-solving process in his book, How to Solve It, through the lens of mathematical problem-solving. But his ideas are applicable to programming. What’s particularly interesting to me is his fourth phase: looking back.

“By looking back at the completed solution, by reconsidering and reexamining the result and the path that led to it, [students] could consolidate their knowledge and develop their ability to solve problems,” Pólya writes.

In some ways, solving a problem is like creating a piece of art. There’s always something more we could do. “We could improve any solution, and, in any case, we can always improve our understanding of the solution,” explains Pólya.

For me, “looking back” is a practice of self-improvement and learning. The aim is to:

• Learn from my successes: understand what you wrote and why.
• Solidify my learning of new concepts.
• See patterns and understand the context for using a particular data structure or algorithm.

Consider a basketball player who takes 1,000 shots each day. That sounds admirable. But as he rushes to get the 1,000 shots in, his form gets sloppy. He uses the wrong technique.

He’d benefit more from taking a few hundred shots, then evaluating his performance: watching a video recording of his form, seeing the flaws, and correcting them. Then, he'd hit the court again.

Now he’ll be more informed, since he looked back and evaluated his performance. He’ll practice better.

The same is true with solving problems. The idea isn’t to check a box so you can claim you solved “x” number of problems. Instead it’s doing your best work each time and learning as much as possible along the way.

There are three reasons why looking back matters.

Reason #1: See the Patterns and Understand the Context

You’ll see similar patterns over and over again in the problems you solve.

Understand how to use a particular algorithm, like binary search. Train your eye so you know when and how to apply it. So when you encounter a related problem in the future, you’ll be ready. Doing so will save time (and frustration) in the long run.

Reason #2: Solidify Your Learning

Say you used something that’s new to you to solve a problem, like a stack or queue.

Do you really know how to use it again? Do you feel comfortable using a stack in a related problem? Take the time to understand anything new you used so you can use it again in the future.

Reason #3: Learn from Your Successes

Mathematician Richard Hamming gets to the heart of the matter with this quote from his book, The Art of Doing Science and Engineering.

“I regard the study of successes as being basically more important than the study of failures...there are so many ways of being wrong and so few of being right, studying successes is more efficient.”

As programmers, we deal with our fair share of errors. And then (many tries later) we run the program and it works. Now is a great time to put Hamming’s words to practice and study your success.

Do you understand how your program works? Do you understand what you wrote and why you wrote it?

By looking back⁠—when the information is still fresh in your mind⁠—you’re preparing your future self. It’ll help you bridge your understanding and solidify your mental models. It’ll help you improve and prevent repeating the same mistakes over again. In short, it’ll help you get better.

Four Ways to Look Back

There are a few ways that I “look back” at problems. Give them a try.

Teach Yourself

A fantastic way to help solidify your mental models is to teach yourself. After you complete a program or problem, go through your code and explain it line by line. It’s one of the best ways of “looking back” when you’re learning something new.

I’ve found this process invaluable while learning web development. After I complete a project, I copy my code into a Google Doc. Starting at the top, I make comments throughout to teach myself about important concepts.

Here’s an example of some code and some of the comments I wrote.

export default function ManageTeamMembersPage(props) {

    const [teammate, setTeammate] = useState({
       name:"",
       email: "",
       role: "",
   })

   ...

• Use props to access data passed down from the parent component.
• Add state hook. The hook takes a default, which is an object that contains everything I need for the form: name, email, role.

This method of “looking back” is about understanding. In this example, I was learning about state, props, and forms in React.

Writing out comments to explain your code will help you solidify concepts in your mind. If you can’t type a short explanation of it on the spot, then revisit the topic.

This method is equally useful for future problems and projects. I regularly pull up old problems and programs I’ve notated. I use them as a reference when writing related programs or solving related problems. Doing so reinforces key ideas, and to Hamming’s point, it helps me remember my successes: what to keep doing.

Study Solutions of Great Programmers

It’s not only useful to study your own code, but also the code of others who have solved the same problem. There are a lot of great programmers out there and we can learn from them.

After I solve a problem, I apply a learning technique that Ben Franklin used to become a better writer. His process involved trying to reproduce an article from a publication he admired after he’d forgotten the details of it.

I follow a similar process to become a better programmer.

Here’s how it works:

• Solve a problem.
• Find a programmer who’s better than you and who’s solved the same problem.
• Study their solution: read each line of code and type a comment in your editor to explain it.
• Re-solve the program after some time has passed. Use the comments you typed out as hints to guide you along the way.
• Compare your program to the one you studied.

To be clear, this practice isn’t about memorizing or copying someone else’s code—far from it. Rather, it’s about learning: get practice reading code; see another way to solve the same problem; experiment with new parts of a language; and get practice teaching yourself. It’s also about applying what you’ve learned by putting it into your own style.

Add a Constraint

See how different techniques apply to the same problem when you add a constraint. For example, you solved the problem using a hash table. Now try solving it using an array.

The idea is to gain another perspective, and adding a constraint can do just that. It’ll get you out of your comfort zone, forcing you to think creatively.

As a result, you may find a slicker approach and cut the length of your program in half. Or may realize what data structure not to use, which is equally important.

Here’s the point: you’ll have another approach at your ready when you’re faced with a related problem in the future.

Solve a Related Problem

The programming website LeetCode is great for many reasons. One is providing similar questions for problems that you solve.

In one problem on LeetCode you are given an array of integers and a target number. The aim is to find two numbers that add up to the target and return their indices.

You solve the problem.

Now solve a related one, which LeetCode provides. This time you’re given an array of integers that’s sorted in ascending order, along with a few additional constraints to differentiate this problem from the previous one.

Solving a related problem is a great way to get practice using a similar technique, data structure, or algorithm in a different context.

Looking back focuses on the process, instead of the end result. And revisiting the process matters. It’s getting out of your comfort zone, trying something new whether that’s a data structure or algorithm. It’s realizing there are different ways to solve the same problem. It’s understanding how to write better code. It’s about learning.

Yes, it takes some time to look back. But it’s time well spent: it’s how we get better.

I write about the programming skills you need to master and the concepts you need to learn, and the best ways to learn them (amymhaddad.com).