Forem: Cedric Muuo

An Iterative solution to Binary Tree Pre-Order Traversal in Python3

Cedric Muuo — Mon, 05 Sep 2022 22:55:52 +0000

Binary Trees are hierarchical data structures in which each parent node has at most 2 children nodes. In today's article, we will go over an important topic that shows up in plenty of technical coding interviews.

PROBLEM STATEMENT: Given the root of a binary tree, return the preorder traversal of its nodes' values. Provide an iterative solution instead of a recursive one.

SOLUTION:

Pre-Order Traversal in a Binary Tree happens in this order:

Visit the root first
Traverse the left subtree
Traverse the right subtree

In order to solve this problem with an iterative solution, we will have to implement the Stack data structure. This is a non-linear data structure in which the operations are carried out in a LIFO(Last In First Out) order. The approach to our answer is simple and will be as follows:

We will initialize two lists i.e one to carry the output and another to act as our stack data structure. The stack will be initialized with the root value of the binary tree.
We will then perform a while loop on our stack for as long as it has a value. In the loop, the following operations shall be carried out in order:
Remove(pop) the top most value(the root node) in the stack and append it to the output list
Push the right child of the popped value into the stack
Push the left child of the popped value into the stack
Return the output list at the end of the loop

As a result of this process, the root value will be accessed first, then the left subtree, and then the right subtree values will be accessed last.

It is important to note that the right child is pushed into the stack first then the left child. This is because of the LIFO nature of the stack. Doing so will allow us to access the left child first before the right child.

TALK IS CHEAP, SHOW ME THE CODE:

# Definition of a Binary Tree node
class TreeNode:
    def __init__(self, val=0, left=None, right=None):
        self.val = val
        self.left = left
        self.right = right
class Solution:
    def preorderTraversal(self, root: Optional[TreeNode]) -> List[int]:
        output, nodestack = [], [root]
        while nodestack:
            node = nodestack.pop()
            if node:  # preorder: root -> left -> right
                output.append(node.val)
                nodestack.append(node.right)
                nodestack.append(node.left)
        return output

If this piece was helpful, please feel free to like and subscribe to my newsletter for more DSA content in Python.

Checking for a Palindrome using Javascript built-in functions

Cedric Muuo — Fri, 23 Apr 2021 07:55:15 +0000

CHALLENGE

Return 'true' if a word is a palindrome and 'false' if not.

EXPLANATION

What is a Palindrome? It is a word or a sentence that is spelled the same both forward and backward, ignoring the punctuation, casing, and spacing. An example is the word 'Racecar'. To check for a palindrome in Javascript, you will need to remove all non-alphanumeric characters(punctuations, symbols, and spaces)then turn all the letters into lowercase.

In order to remove the non-alphanumeric letters, we shall use a Regular Expression(Regex). Regular Expressions are patterns used to match character combinations in strings. The Regex used to match any non-alpha-numeric characters is '[\W_]' which can be expounded to read '[^A-Za-z0–9]'.

SOLUTION

For this solution, we will use several methods:
a. toLowerCase() which will return all the characters in the string in lowercase.
b. .replace() which will return the replaced string(only alpha-numeric characters) by the Regular Expression we just created.
c. .split() which will split the returned string into and return an array of characters.
d. .reverse() which will reverse the order of the characters in the array.
e. .join() which will join the reversed characters into a string.

Here is the complete code for this:

const str = 'A man, a plan, a canal. Panama';

function palindrome(str) {

//Remove all the non-alphanumerics and turn the string to lowercase

var lowRegStr = str.replace(/[^0-9a-zA-Z]/g, '').toLowerCase();

// Split the returned string, reverse the characters ,join them, and return the reversed string.

var reverseStr = lowRegStr.split('').reverse().join('');
return reverseStr === lowRegStr;
}

console.log(palindrome(str));

This will log 'true' if the string is a palindrome and 'false' if otherwise.

Designing a Testing Strategy using the Test Pyramid

Cedric Muuo — Mon, 19 Apr 2021 02:45:23 +0000

If you are planning to kickstart or improve software testing in your system and are looking to venture more into automation rather than manual testing, then look no further. In this article, I will discuss the Test Pyramid in-depth and help you understand its core foundations and why they are valuable in automation testing.

As displayed above, the Test Pyramid is simply a 3-layered pyramid that defines the types of tests to be included in your test plan, the sequence of the tests, and the frequency in which they will be run. The most outstanding benefit of using this test automation framework is the efficiency it introduces in the development eco-system. This is because it reduces the time required for developers to identify if a change introduced breaks the code as it looks to offer feedback as soon as possible in the system.

The pyramid is divided into 3 levels:

Unit Tests
Integration Tests
End-to-End Tests(UI Tests)

Level 1 - Unit Tests

They are used to test the individual components and functionalities to validate that they work as expected in isolated conditions. They form the largest subset of the pyramid and in that case, they should be designed to run as fast as possible. Every time a new feature is introduced, this suite is run(which will be quite often in any developing system). As a result, developers will receive immediate feedback on if the introduced change might have had an impact on existing individual components.

In order to build a sturdy unit test suite, it is recommended to use the Test-Driven Development methodology which in summary requires tests to be written before any code hence promoting cleaner, simpler and bug-free code. To read more on TDD and other testing approaches, consider this article TDD vs BDD.

It is important to ensure you build a potent unit test suite as this will be the foundation of the pyramid and is the key to seamless communication in a testing system.

Level 2 - Integration Tests

These tests are used to verify that the individual units can integrate properly with external components or other pieces of code from the software. They also test how a feature communicates with external dependencies such as databases and APIs.

Integration tests are slower to run as compared to unit tests. They should therefore not be run as often as unit tests as you have more features to cover and more testing types to conduct. Note that these tests are run in a production environment.

Level 3 - End-to-End tests(E2E tests)

As the name suggests, these tests ensure that the application is running flawlessly from start to finish. These sit at the top of the pyramid and the most important thing to consider when writing these tests is the user's perspective. How would an actual user interact with the application? How can these tests then be written to replicate this interaction? A good approach to consider when writing these tests is Behavior-Driven Development which in summary describes behaviors in a single notation that is directly accessible to domain experts, testers, and developers consequently improving communication.

Also known as UI tests, these are the most fragile in the pyramid as they test a large variety of scenarios and take the longest to run. In that case, it is advised to run E2E tests only for high-level flows in the application. Like Integration tests, these tests may require the app to communicate with external dependencies resulting in possible bottlenecks in the system

In conclusion, the Testing Pyramid is an effective framework to consider for any QA team due to its array of benefits. The most significant of these being:

Using the Test pyramid introduces a clear progression and sense of logic in the system and this directly improves the speed and efficiency of the process. Time management and communication issues become a thing of the past.
The pyramid gives the testers the right priorities when writing the scripts. Testers will have to verify the unit tests run flawlessly before moving on to the other tests. This will ensure that the back-end functionalities are stable and will save you a lot of time as the features increase.

The Power of 'Deep work' in Remote settings.

Cedric Muuo — Fri, 21 Aug 2020 05:23:47 +0000

Recent circumstances have seen the majority of companies and potential job seekers turn to remote working. Carrying your laptop in your bag and heading out to the beach with a Daiquiri in hand ready to write code and change the world, right?

WRONG!!!

Working remotely is not a hobby that you can do from simply anywhere with an internet connection and still expect quality output of work. Well, at least not for Software Developers.

Working in a remote setting relies heavily on Asynchronous communication which is basically communication with team members via platforms such as Slack and Google Meet. For quality output to be achieved in this setting, team members have to be effective in communication so as to deliver a fully understandable message whilst saving time.

So, What is Deep Work?

Deep work is the state of development/working that is distraction-free and enables a developer to focus only on the task at hand delivering quality output in a short time.
Whether you agree or not, you will achieve more productivity when you are in a quiet office-like environment focussing only on one task as compared to working at the beach with people playing and being noisy all over the place.

To achieve this state of deep work, I recommend you have access to a quiet, distraction-free room where you can set up your work equipment such as a table and a chair. Once the perfect working environment is established, you need to actually train your mind to achieve this state of deep work.

Keep your phone on silent mode and put it away from you. I then suggest using the Pomodoro Technique.
Basically, group your tasks in order of priority then take 25-45 minute sessions of purely focussing on a task until it is complete. After every session, take a 5-10 minute break, grab water or a cup of coffee then do another session of Deep Work.

At the end of the day, I think we can all agree that 4 hours of Deep work sessions will achieve more productivity than 8 filled with distractions from team members and checking your social media feed every 10 minutes.

Installation and setup of Node.js on your Linux machine

Cedric Muuo — Thu, 13 Aug 2020 12:31:32 +0000

Node.js is an open-source JavaScript runtime built on Chrome's V JavaScript engine and it is used to run JavaScript on the server.

In today's post I will show you a step by step guide on how to install Nodejs on your Ubuntu system.

First things first, fire up your Terminal using Ctrl + Alt + T.
To install Nodejs use the following command; sudo apt install nodejs easy-peasy. Once that is done, check the version of node you are using by typing in; node -v or node –version

Note: It is recommended to install Node Package Manager(NPM) with Node.js. NPM is an open-source library of Node.js packages.
To install NPM, use the following commands:

sudo apt install npm npm -v or npm –version

How to create a dropdown menu on hover using jQuery

Cedric Muuo — Sat, 25 Jul 2020 15:10:20 +0000

Hello fellas, in today's post I want to show you guys a cool jQuery trick I learned recently.

When you are creating interactive web pages it is very likely you will need to have a navigation bar that has buttons or links which direct users to other webpages. In some scenarios, you need to display a couple of options for the user to choose from and an easy to use choice for this would be using a bit of jQuery to show a dropdown menu with links on hover.

For this you will need to have jQuery installed at the base of your project and linked to your HTML file as so;

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Ok so let's hop right into adding the flesh of the project. First, let us create a wrapper that will hold all of our content. Then create a button or just a link that will drop down our options.

<div class="wrapper"> <div class="button"> <button value="Hover on me!" id="hover">Hover On Me! </button> </div>

The next step is to add the list of options you want to be displayed on hover. In this case, we will create links to other pages.

<div class="dropdown"> <ul> <li><a href="#">JavaScript Page</a></li> <li><a href="#">HTML Page</a></li> <li><a href="#">CSS Page</li></a> </ul> </div> </div>

Now we have our HTML all set up. The next step is to set the display of the dropdown options to 'none'. This is because we only want this list of options to appear when we hover over the button and disappear when the mouse moves away.

In your CSS file;

.dropdown{ display: none; }

Looking pretty great so far, so let us proceed to the final step and this will be creating the actual hover effect using JavaScript.

In your JS file add these five lines of code;

$(document).ready(function(){ $(".button").hover(function(){ $(".dropdown").slideToggle(); }); });

What we are simply telling jQuery here is:

Check if the document is done loading using .ready()
'Listen' to the element with the class "button" and check if the user hovers on it using .hover()
If the user hovers on the element, slide down the dropdown menu using slideToggle()

Note: "slideToggle()" toggles between "slideDown()" and "slideUp()" depending on the element method which in this case is "hover()", hence the dropdown menu will slide down when the user hovers above the button and slide up when the user moves away from the button.

Happy coding and feel free to leave comments down below

Customizing your webpage with cool Google Fonts

Cedric Muuo — Sun, 12 Jul 2020 18:54:25 +0000

You probably have written a couple of HTML and CSS files by now. The font applied to your text is not as appealing to your eyes and you want to play around with a couple of options till you find the right one. You're in the right place then.

Google Fonts is a rich library of fonts where you can pick from almost one thousand Font Families and even more font styles. To get started with Google Fonts, simply add this line at the top of your CSS file that you will use to style your text;
@import url("https://fonts.googleapis.com/css?family="Family+name"&display=swap");
where "Family name" is the name of the font family you have chosen after browsing through Google Fonts' list.

Note that whenever a font has a Family name made up of more than one word, the words are separated by a + sign.

To apply the font to your content add the "font-family" property to your selector like this:

.text{
font-family: "Family name";
}
where "Family name" is the family name of the chosen Font.

An important thing to note is that while writing the family name on the link at the top of the file we do not use quotation around the name but while applying it to the CSS selector, we use quotation marks.

VS Code Customization For Front End Developers.

Cedric Muuo — Fri, 10 Jul 2020 12:14:34 +0000

Hey guys, Cedric here.I'm a Front End Developer based in Nairobi, Kenya. I'm constantly working on my Design game with web development. I love the concept of Integrating photography and web design and therefore in the meantime if there is any photographer out there that feels they need a web developer to grow their brand, feel free to reach out to me. Sooner, I'll get a camera and create my own content. One day at a time.

Anyway, enough of me ... Today I'll show you how some few tips and tricks I have learned so far on customizing your Interface especially for beginner devs who are trying to find their way around VS Code.

THEMES

The first thing you will need to customize is definitely the theme. Every dev needs to pick the right theme and colors for their tags and syntax. This is important to get you to enjoy what you do. I have to admit, opening up my editor really excites me just by how it looks and feels.
To get your terminal looking right and in the right mood for development, go to settings and search for 'Themes'. Here you will find a list of themes that you can choose from. If these still are not enough to choose from, here is a link that will help you find more options for your editor; VS Code Themes.

GITHUB SETUP

Working with code every day and more importantly with other developers will require you to put up your code on Github for ease of access and collaboration by other devs. Github is an open-source version control system that lets developers share code with others and also allows them to make changes to the code. VS Code allows you to fetch, edit, commit and push code back to Github with a few easy steps. To set it up, go to settings, search for Github and scroll down to "Git Authentification". Click on the option and authorize Github. Once this is done, you will be able to access Github functionality from the navigation bar on the left end of your screen.

GITLENS

An additional tool to help with your source control is GitLens.GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. To learn more about GitLens have a look at GitLens

EXTENSIONS

VS Code Extensions let you add tools such as "HTML Snippets" which autocomplete HTML tags once you start typing, languages such as Python and JavaScript, and debuggers such as "Debugger for Firefox".These extensions will help you a great deal with your development workflow. To add Extensions to your interface, click the 'Manage' icon at the left bottom corner and head to Extensions. Here, you can search for any Extensions that will suit your development environment and another cool feature about VS Code is that they will recommend to you a whole load of Extensions that will make your work much simpler and organized.

FIND AND REPLACE

Another really cool feature that has helped me a lot is the 'Find And Replace' feature. Take a scenario where you are working on a project and as you begin, you name your main file, 'home.html'. As you keep developing the project, you obviously link this file to other files hence there are a couple of 'home.html's in different files. Now, say you want to host your project on Github Pages. As per custom GitHub pages rules, your project has to have an 'index.html' file at the base of the repository for your site to go live. This means you have to replace all the 'home.html's with 'index.html' including the name of the file itself.

Here is where our tool comes in handy. By using this tool, you can simply find 'home.html' across every file and replace that instance with 'index.html'. I know, it saves you a lot of time that would have gone into making the changes individually on each file.

SPLIT EDITOR

Just as the name goes, enabling this will split your editor's workspace vertically giving you the power to simultaneously work on more than one file. The future is now, isn't it?

I have come to the end of my list, for now. I hope this helps you in simplifying your workflow as you get to work with VS Code. As I also keep developing, I will occasionally update this article with it's I find helpful.