<p text-align="left">I'm a <b>Fullstack Engineer</b> with a passion for constantly learning and pushing the boundaries of my comfort zone. I have <b>2+ years of experience in Front-End Development</b> working on design, deployment, and maintenance of web-based projects and <b>3+ years of experience in Graphic Design and Marketing</b>. I am very comfortable using design tools like <b>Photoshop, Illustrator, After Effects, and Premiere.</b></p>
<h2></h2>
<h3 align="center">⚡️ How To Contact Me ⚡️</h3>
<p align="center">
  [
  <a class="text-gray-700  font-bold hover:underline hover:text-blue-500 duration-200 transition-colors" href="https://www.twitter.com/thestoicdev/" target="_blank" rel="noreferrer">Twitter</a>
  |
  <a class="text-gray-700  font-bold hover:underline hover:text-blue-500 duration-200 transition-colors" href="https://linkedin.com/in/alexisdavalos" target="_blank" rel="noreferrer">LinkedIn</a>
  |
  <a class="text-gray-700  font-bold hover:underline hover:text-blue-500 duration-200 transition-colors" href="mailto:alexisdavalos.dev@gmail.com" target="_blank" rel="noreferrer">Email</a>
  ]
  
</p>
<h2></h2>
<h3>What I'm up to:</h3>
<ul>
<li>🔭 I’m currently looking for a new software engineering role and learning German 🇩🇪</li>
<li>🌱 I’m currently learning to better myself through daily practice and discipline</li>
<li>🏋 I’m extremely passionate about technology, fitness, philosophy and language</li>
<li>📚 I’m currently reading "The Secret Teachings of All Ages" by Manly P. Hall</li>
<li>💬 Ask me about design, crypto, surfing, skiing, skating, and philosophy</li>
<li>⭐️ Fun fact: I speak three languages: [ 🇺🇸 English | 🇪🇸 Spanish | 🇷🇺 Russian ]</li>
<li>💼 Check out my <a class="text-gray-700 font-bold hover:underline hover:text-blue-500 duration-200 transition-colors" href="https://www.alexisdavalos.dev" target="_blank" rel="noreferrer">portfolio</a>, built with React.js,download my <a class="text-gray-700 font-bold hover:underline hover:text-blue-500 duration-200 transition-colors" href="https://www.alexisdavalos.dev/static/media/Alexis_Davalos_Resume.5dfe0da1.pdf" target="_blank" rel="noreferrer">resume</a> or check out my <a class="text-gray-700 font-bold hover:underline hover:text-blue-500 duration-200 transition-colors" href="https://blog.alexisdavalos.dev" target="_blank" rel="noreferrer">blog</a></li>
</ul>
<h1></h1>
<div class="flex flex-col mb-4">
<div class="w-full">
<h3>Front End Technologies:</h3>
<p><img src="https://img.shields.io/badge/code-React-informational?style=for-the-badge&#x26;logo=react&#x26;logoColor=white&#x26;color=61DAFB">
<img src="https://img.shields.io/badge/code-Redux-informational?style=for-the-badge&#x26;logo=redux&#x26;logoColor=white&#x26;color=764ABC">
<img src="https://img.shields.io/badge/code-Vue.js-informational?style=for-the-badge&#x26;logo=vue.js&#x26;logoColor=white&#x26;color=4FC08D">
<img src="https://img.shields.io/badge/code-Next.js-informational?style=for-the-badge&#x26;logo=next.js&#x26;logoColor=white&#x26;color=000000">
<img src="https://img.shields.io/badge/code-JavaScript-informational?style=for-the-badge&#x26;logo=javascript&#x26;logoColor=white&#x26;color=F7DF1E">
<img src="https://img.shields.io/badge/code-HTML-informational?style=for-the-badge&#x26;logo=html5&#x26;logoColor=white&#x26;color=E34F26">
<img src="https://img.shields.io/badge/code-SASS-informational?style=for-the-badge&#x26;logo=sass&#x26;logoColor=white&#x26;color=CC6699">
<img src="https://img.shields.io/badge/code-CSS-informational?style=for-the-badge&#x26;logo=css3&#x26;logoColor=white&#x26;color=1572B6"></p>
</div>
<div class="w-full">
<h3> Back End Technologies:</h3>
<p><img src="https://img.shields.io/badge/code-Node-informational?style=for-the-badge&#x26;logo=node.js&#x26;logoColor=white&#x26;color=339933">
<img src="https://img.shields.io/badge/code-PostgreSQL-informational?style=for-the-badge&#x26;logo=postgresql&#x26;logoColor=white&#x26;color=336791">
<img src="https://img.shields.io/badge/code-SQLite-informational?style=for-the-badge&#x26;logo=sqlite&#x26;logoColor=white&#x26;color=003B57">
<img src="https://img.shields.io/badge/code-Knex-informational?style=for-the-badge&#x26;logo=Knex.js&#x26;logoColor=white&#x26;color=6a3d7c">
<img src="https://img.shields.io/badge/code-Python-informational?style=for-the-badge&#x26;logo=python&#x26;logoColor=white&#x26;color=3776AB">
<img src="https://img.shields.io/badge/code-GraphQL-informational?style=for-the-badge&#x26;logo=GraphQL&#x26;logoColor=white&#x26;color=E10098"></p>
</div>
<div class="w-full">
<h3>Operating Systems:</h3>
<p><img src="https://img.shields.io/badge/os-Windows-informational?style=for-the-badge&#x26;logo=Windows&#x26;logoColor=white&#x26;color=0078D6">
<img src="https://img.shields.io/badge/os-macOS-informational?style=for-the-badge&#x26;logo=Apple&#x26;logoColor=white&#x26;color=999999"></p>
</div>
<div class="w-full">
<h3> IDE's Utilized:</h3>
<p><img src="https://img.shields.io/badge/IDE-VisualStudioCode-informational?style=for-the-badge&#x26;logo=visual-studio-code&#x26;logoColor=white&#x26;color=007ACC">
<img src="https://img.shields.io/badge/IDE-Vim-informational?style=for-the-badge&#x26;logo=Vim&#x26;logoColor=white&#x26;color=019733"></p>
</div>
<h3> Github Stats:</h3>
</div>
<p><img src="https://github-readme-stats.vercel.app/api?username=alexisdavalos&#x26;include_all_commits=true&#x26;show_icons=true&#x26;theme=dracula" alt="Alexis&#x27; github stats"></p>
<p><a href="https://github.com/alexisdavalos/"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=alexisdavalos&#x26;layout=compact&#x26;theme=dracula&#x26;card_width=445" alt="Top Langs"></a></p>
<div>
<p class="text-md text-black text-bold">Github Stats Made Possible By: <a class="text-gray-700  font-bold hover:underline hover:text-blue-500 duration-200 transition-colors" href="https://github.com/anuraghazra/github-readme-stats">Anuraghazra</a></p>
</div>


Hello World... from My New Blog!


## The 7 best tools for beginner Software Engineers going into 2022

When you are a beginner Software Engineer, the abundance of tools at your disposal can be a bit overwhelming at first. There is so much to choose from, and although that is a privilege, it can be hard to know which tools will actually help you in becoming a better programmer.

To make things easier for you, I put together a list of the 7 best tools for Software Engineers. These have not only helped me improve my skills, but have also made life easier in numerous aspects! Although the list is numbered, there is really no order as to which one of them is the best, they are all equally helpful in their own way.

<ul class="list-decimal">

<li>

<a target="_blank" rel="noreferrer" href="https://tailwindcss.com/docs/">

### Tailwind CSS

</a>

Tailwind CSS describe themselves as a utility-first CSS framework. What does that mean? Instead of focusing on the functionality of the item you style, Tailwind has its focus on how it should be displayed.
With this technique developers can easily test out new styles or change the layout.
Tailwind CSS is packed with classes like flex, pt-4, text-center and rotate-90, to build any design you like directly in your markup.

It is really easy to use and has flex and grid models right out of the box. This really helps limit the amount of CSS Utilities required for your project. For example the following HTML + TailwindCSS:

```html
<div class="bg-gray-800 w-full p-32">
	<div class="flex flex-col md:flex-row justify-center items-center">
		<div class="p-16 m-2 flex bg-purple-500 text-white">Box 1</div>
		<div class="p-16 m-2 flex bg-blue-500 text-white">Box 2</div>
		<div class="p-16 m-2 flex bg-indigo-500 text-white">Box 3</div>
	</div>
</div>
```

Renders the following responsive content - test it out by resizing your browser!
To learn more about responsive design with Tailwind CSS - read the <a title="TailwindCSS Official Docs" class="text-primary font-bold hover:text-accent" target="_blank" rel="noreferrer"  href="https://tailwindcss.com/docs/responsive-design">Official Documentation</a>

<div class="bg-gray-800 w-full p-32">
	<div class="flex flex-col md:flex-row justify-center items-center">
		<div class="p-16 m-2 flex bg-purple-500 text-white">Box 1</div>
		<div class="p-16 m-2 flex bg-blue-500 text-white">Box 2</div>
		<div class="p-16 m-2 flex bg-indigo-500 text-white">Box 3</div>
	</div>
</div>

</li>

<li>

<a title="Visual Studio Code Official Docs" target="_blank" rel="noreferrer" href="https://code.visualstudio.com/">

### Visual Studio Code

</a>

Visual Studio Code is a great IDE application to use for your code workflow with the amazing out of the box features like the Git/Source/Terminal integrations, it's hard to not be impressed. There are four main VS Code Extensions that really improved my coding while using this application.

<ul class="list-decimal">

<li>

### Live Server

The Live Server of Visual Studio Code allows you to launch a development local Server with a live reload feature for static and dynamic pages. This will make working on a project so much easier, as you get an instant, up-to-date view of your changes. This is especially useful for plain HTML/CSS rendering or when youre not explicitly working with a framework that supports hot-reloads out of the box i.e: React, Next, Vue, Svelte, Angular, etc..

Launch a local development server with live reload feature for static & dynamic pages.

![Launch a local development server with live reload feature for static & dynamic pages.](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif "Visual Studio Code Live Server Extension")

</li>

<li>

### Prettier Code Formatter

Prettier will parse your code and re-print it with its own rules to enforce a consistent style. This code formatter will wrap your code if necessary.

More information can be found here:

<a title="Prettier Official Github" target="_blank" rel="noreferrer" href="https://github.com/prettier/prettier-vscode">https://github.com/prettier/prettier-vscode</a>

<a title="Prettier Official Marketplace" target="_blank" rel="noreferrer" href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode</a>

</li>

<li>

### TODO Highlight

The TODO Highlight is an extension that allows you to highlight TODO, FIXME and other similar annotations within your code.
You might wonder why this is useful. It will happen at times that you will publish your code to production without reviewing the TODOs that you’ve added while coding, simply because you forgot. By automatically highlighting them, these TODOs are more likely to catch your attention and remind you of things not yet done.

![VS Code TODO Highlight](https://github.com/wayou/vscode-todo-highlight/raw/master/assets/material-night.png "VS Code TODO Highlight Extension")

</li>

<li>

### Remote-SSH

The Visual Studio Code Remote - SSH extension allows you to open a remote folder on any remote machine, virtual machine, or container with a running SSH server and take full advantage of VS Code's feature set. Once connected to a server, you can interact with files and folders anywhere on the remote filesystem.

No source code needs to be on your local machine to gain these benefits since the extension runs commands and other extensions directly on the remote machine.

<a class="font-semibold hover:text-accent" title="Visual Studio Code Remote SSH Official Docs" target="_blank" rel="noreferrer" href="https://code.visualstudio.com/docs/remote/ssh">Learn More about Remote-SSH with Visual Studio Code.</a>

![Learn More about Remote-SSH with Visual Studio Code.](https://microsoft.github.io/vscode-remote-release/images/ssh-readme.gif "Learn More about Remote-SSH with Visual Studio Code.")

</li>
</ul>

</li>

<li>

### iTerm

iTerm is one of the most popular terminal emulators in the world. It is very frequently used by developers because it processes untrusted data.

The most recent version is iTerm 2. It works on Macs with macOS 10.14 and newer. A few of the most popular features are Split Panes, Search, Autocomplete, Copy Mode and Paste History; but there are many more. See a list of features here https://iterm2.com/features.html

![Split Panes Example iTerm 2](https://iterm2.com/img/screenshots/split_panes.png "Split Panes Example iTerm 2")

</li>

<li>

### Postman

Postman is a collaboration platform for API development that will make it very easy for you as a developer to create, test, share and document APIs. The Users are able to create and save simple and complex HTTP/s requests and read their responses.
The steps of the API lifecycle get simplified by Postman and it allows you to create better APIs faster.

Postman provides you with API tools, an API Repository, Workspaces and Intelligence.

![Postman Example UI](https://res.cloudinary.com/postman/image/upload/t_media_responsive_computer/v1625575178/homepage/homepage-hero-light.jpeg "PostMan UI Example")

</li>

<li>

### Firefox

You have likely heard of this Browser before, but you may not know why it is very useful for developers.

Firefox offers a very reliable performance, even with many tabs open.

It is opensource and is the best-secured browser to date by looking for Data breaches and blocking trackers automatically.

This browser also offers a variety of tools for developers. To open the Core Tools, you select Tools > Web Developer > Web Developer Tools from the menu. You can also use the Shortcut CTRL + Shift + I or F12 on Windows and Linux, and Cmd + Opt + I on macOS.

You will find tools like the Page Inspector, Web Console, JavaScript Debugger, Network Monitor, Performance Tools and many more.

I especially like the CSS inspection in Firefox when working with svg and polygon elements. It makes the experience a lot easier and much more intuitive.

<ul class="list-decimal">

### Page Inspector

![Firefox Developer Tools Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/landingpage_pageinspector.png "Firefox Developer Tools Page Inspector")

### Web Console

![Firefox Developer Tools Web Console](https://developer.mozilla.org/en-US/docs/Tools/landingpage_console.png "Firefox Developer Tools Web Console")

### Javascript Debugger

![Firefox Developer Tools Javascript Debugger](https://developer.mozilla.org/en-US/docs/Tools/landingpage_debugger.png "Firefox Developer Tools Javascript Debugger")

</ul>
</li>

<li>

### Onetab

Whether you’ve been a developer for years or you’re just starting out, you likely know the problem of having 500 different tabs open with things you might need in the future.

Onetab is a great option to save up to 95% of memory and reduce tab clutter. Once installed, you simply click the OneTab Icon to convert all of your tabs into a list.

<div style="margin-left:9px; padding-bottom:10px; position:relative; margin-top:14px; height: 460px; background-image: url(https://www.one-tab.com/web/images/home/before-after2019.jpg); background-size: 795px 379px; background-repeat:no-repeat;">

<div style="position:absolute; top: 94px; font-size: 24px; font-weight: 300; padding-left: 16px; ">
	Before: 1981 MB memory used
</div>
<div style="position:absolute; top: 388px; font-size: 24px; font-weight: 300; padding-left: 70px; ">
	After: only 99 MB memory used
</div>
<div style="position:absolute; top: 146px; font-size: 24px; font-weight: 300; padding-left: 505px; text-align: center">
	<div style="font-weight: 300; font-size: 96px; color:#00c6fc; margin-bottom: -20px">95%</div>
		<div style="font-weight: 300; font-size: 26px; ">memory reduction</div>
				<div style="padding-top: 10px ; font-size: 30px; font-weight: 300;">
    			<a style="color:#00c6fc" href="https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall">Add <span style="font-style: italic">One</span>Tab now</a>
    	</div>
    	<div style="padding-top:0px; font-size: 13px; font-weight: 400; ">
			No signup or registration required
		</div>
	</div>
</div>

</li>

<li>

### ES Lint

This is a static code analysis tool to identify problematic patterns in your JavaScript Code. The rules in ESLint are configurable and you can define and load your customized rules. The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

On new folders you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint --init in a terminal. If you have installed ESLint locally then run .\node_modules\.bin\eslint --init under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.

![Eslint Configuration](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fharshitpant.com%2Fd7d3bcbcca17d7e9b286cac4eb9c65f1%2Fgif2.gif&f=1&nofb=1 "Eslint Configuration")

You can find more information by following this excellent guide <a class="hover:text-accent font-semibold" href="https://harshitpant.com/blog/using-eslint-in-visual-studio-code-vscode" target="_empty" rel="noreferrer">here</a>

</li>

<li>

### Bonus - Framework

<ul>

<li>

#### Oh-My-Zsh

Oh My Zsh is an open source, community-driven framework for managing your Zsh configuration.

![Example of Zsh Configuration on a Terminal](https://ohmyz.sh/img/themes/mh.jpg "Example of Zsh Configuration on a Terminal")

My macbook installation came with `Zsh` out of the box and I gave this a shot. Since then,I've grown accustomed to this set up. It works super well for me and I recommend this example configuration at your root directory. Feel free to choose a theme that works best for you and further customize it!

```bash
# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH="/Users/your-user-goes-here/.oh-my-zsh"

# Disabled permission error
ZSH_DISABLE_COMPFIX=true

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="cloud"

# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in $ZSH/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )

# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"
```

</li>
</ul>
</li>
</ul>

## Conclusion

In conclusion.. there are many aspects of being a developer and having a great workflow is one of them. However you decide to configure your editor or your shell integration, there is always room for creativity! Be sure to check out any articles below on other topics that might interest you.


The 7 best tools for beginner Software Engineers/Developers going into 2022


<h2 class="text-xl font-bold">How to Stake $TFUEL and start an Elite Edge Node</h2>

Over the course of next few paragraphs I'm going to be writing about my approach to staking **TFUEL** and breaking down the complexity of setting up a Docker Image to stake with Theta Labs edge node application. We will be focusing on the solution for **MacOs** in this article.

## Theta Token Official Documentation

<div>I'll assume that you have read the <a title="Official Documentation - Theta Token" class="text-primary font-bold hover:text-accent" href="https://docs.thetatoken.org/docs/theta-edge-node-run-with-docker" target="_blank" rel="noreferrer" >official documentation</a>, and have Docker installed. I'm using MacOs but I think it's the same/similar steps in other OS as well.</div>

### Requirements

<ul class="list-disc list-inside">
  <li>You can get Docker CLI at the Docker <a title="Official Documentation - Theta Token" class="text-primary font-bold hover:text-accent" href="https://docs.docker.com/docker-for-mac/install/" target="_blank" rel="noreferrer" >Official Website.</a>
  </li>

  <li>Download an edge node in your environment at the Theta Token <a title="Official Documentation - Theta Token" class="text-primary font-bold hover:text-accent" href="https://docs.thetatoken.org/docs/setup-theta-edge-node" target="_blank" rel="noreferrer" >Official Website.</a>
  </li>

  <li>A minimum of 10,000 TFUEL is required to stake to an Elite Edge Node.
</ul>

<hr class="border-b-4"/>

### Getting Started

With Docker up and running, open a terminal window, and run the following command

```bash
docker pull thetalabsorg/edgelauncher_mainnet:v1.0.0 && docker rm edgelauncher
```

Generally you will only run the command above once (or perhaps later when an update is released by Theta Labs). This download should only take a minute or two, depending on your internet connection and then it will check for an existing edgelauncher.

Next let's create a container or a running instance from the docker image to the start it up.

```bash
docker run -e EDGELAUNCHER_CONFIG_PATH=/edgelauncher/data/mainnet -e PASSWORD=<YOUR_PASSWORD> -v ~/.edgelauncher:/edgelauncher/data/mainnet -p 127.0.0.1:15888:15888 -p 127.0.0.1:17888:17888 --name edgelauncher -it thetalabsorg/edgelauncher_mainnet:v1.0.0
```

Before you execute it, you'll need to tweak it a bit: `-e PASSWORD=<YOUR_PASSWORD>` has to be edited, you need to set your own password here. So it should look like this: `-e PASSWORD=MyStrongPassword.` Generate a strong password and ensure it is stored safely. The `--restart always` flag is to make the edge node restart everytime with the system. The `--detatch` flag is so it will run in the background. Feel free to configure the flags in whatever suits your needs best.

**Remember to change the password!**

```bash
sudo docker run -e EDGELAUNCHER_CONFIG_PATH=/edgelauncher/data/mainnet -e PASSWORD=AStrongPasswordGoesHere -v ~/.edgelauncher:/edgelauncher/data/mainnet -p 127.0.0.1:15888:15888 -p 127.0.0.1:17888:17888 --restart always --detach --name edgelauncher -it  thetalabsorg/edgelauncher_mainnet:v1.0.0
```

If you followed this correctly that should be it! You should also be able to generate a summary address for staking through the MacOS Edge Node App. However, you can also generate the summary address by running the following command.

```bash
curl -X POST -H 'Content-Type: application/json' --data '{"jsonrpc":"2.0","method":"edgecore.GetEdgeNodeSummary","params":[],"id":1}' http://localhost:17888/rpc
```

You can verify the status by executing `docker stats` command. Another great tool to monitor docker containers is portainer.

<div class="w-full p-4 rounded-md"> 
    <img class="w-full" src="https://firebasestorage.googleapis.com/v0/b/agamov-blog.appspot.com/o/edge_node_running.jpeg?alt=media&token=c5a3b0c0-f86a-45dc-9dbe-79caf1cbfe46" alt="Theta Edge Node Running" />
</div>

More information regarding the edge node application and staking can be found <a title="Official Documentation - Theta Token" class="text-primary font-bold hover:text-accent" href="https://medium.com/theta-network/theta-elite-edge-node-v3-0-6-released-to-enable-mainnet-3-0-features-7b07fc4bc7b3" target="_blank" rel="noreferrer" >here.</a>

You can also get a great amount of information from the Theta Edge Node GUI (Graphic User Interface).

<img class="w-full rounded-t-md" src="https://miro.medium.com/max/1400/1*BN9w0SR9nbXTip7iOheh-g.png" alt="Edge Node Home Application" />
<img class="w-full rounded-b-md" src="https://miro.medium.com/max/700/1*NDVGQsZltyPixpCBxdIGkA.png" alt="Edge Node Holder Summary" />

## Troubleshooting

For trouble shooting you can follow the reddit post that inspired this article <a title="Reddit Post - Guide On How To Start Edge Node" class="text-primary font-bold hover:text-accent" href="https://www.reddit.com/r/theta_network/comments/omoxz4/guide_how_to_start_the_edge_node_in_docker_how_i/" target="_blank" rel="noreferrer" >here.</a>

## Learn More About Theta:

#### Next generation video delivery powered by you.

### The Problem

<div class="w-full flex flex-col lg:flex-row justify-center items-center bg-gray-800 text-white p-8">
  <ul class="list-disc list-inside w-full lg:w-1/2">
    <li>
      <strong>Poor Quality:</strong> Today's content delivery networks (CDN) lack reach, causing video re-buffering, and high load times in many parts of the world.
    </li>
    <li>
      <strong>Sky rocketing data needs:</strong> Users demand 4k, 8k, and higher quality streams create infrastructure bottleneck.
    </li>
    <li>
    <strong>Centralized and inefficient system:</strong> The centralized nature means less revenue flows back to content creators and platforms.
    </li>
  </ul>
  <div class="shadow-md w-full lg:w-1/2 rounded-md"> 
    <img class="w-full" src="https://www.thetatoken.org/assets/diagrams/the-problem-en@2x.png" alt="The Problem Visualization" />
  </div>
</div>

### Solution

<div class="w-full flex flex-col lg:flex-row justify-center items-center bg-indigo-900 text-white p-8">
  <ul class="list-disc list-inside w-full lg:w-1/2">
    <li>
      <strong>Viewers earn rewards as Theta Fuel</strong>
For sharing excess bandwidth and resources, viewers are now rewarded to participate in the network.
    </li>
    <li>
      <strong>Higher quality, smoother video streaming</strong>
      A decentralized peer-to-peer network delivers streams efficiently globally.
    </li>
    <li>
    <strong>Reduced cost of delivering video streams</strong>
Video platforms no longer need to build expensive infrastructure, means more innovation and unique business models.
    </li>
  </ul>
  <div class="shadow-md w-full lg:w-1/2 rounded-md"> 
    <img class="w-full" src="https://www.thetatoken.org/assets/diagrams/the-solution-en-2021@2x.png" alt="The Solution Visualization" />
  </div>
</div>
<p class="text-xs">In the end, users benefit by sharing their bandwidth and building a community. Content creators and platforms all earn more with lower streaming costs.</p>


How to Stake $TFUEL and start an Elite Edge Node


<h2 class="text-xl font-bold">How to Invert a Binary Tree In Python</h2>

Lets get to the root of the problem. Today we will write an algorithm that takes in a Binary Tree and inverts it. In other words, the function will swap every left node in the tree for its corresponding right node. This article will focus on implementing a solution in **Python.**

## Problem Statement

> Write a function that takes in a Binary Tree and inverts it. In other words, the function should swap every left node in the tree for its corresponding right node. Each Binary Tree node has an integer value, a left child node, and a right child node. Children nodes can either be Binary Tree nodes themselves or None / null.

## Starter Code:

```python
# Tree Object Class
class Tree:
    def __init__(self, value):
        self.val = value
        self.left = None
        self.right = None

def invertBinaryTree(tree):
    # Write Solution Here
    return

# Tree Construction
tree = Tree(4)
tree.left = Tree(2)
tree.right = Tree(6)
tree.left.left = Tree(1)
tree.left.right = Tree(3)
tree.left.left.left = Tree(5)
tree.left.left.right = Tree(7)

```

First and foremost, this algorithm will implement a <a class="text-gray-700 font-bold hover:underline hover:text-blue-500 duration-200 transition-colors" href="https://en.wikipedia.org/wiki/Breadth-first_search" target="_blank" rel="noreferrer">Breadth First Search </a>approach to solving this problem. Breadth-first search (BFS) is an algorithm for traversing or searching tree or graph data structures. It starts at the tree root, and explores all of the neighbor nodes at the present depth or level prior to moving on to the nodes at the next depth level.

One of the key characteristics of a **BFS** algorithm is that it utilizes a **Queue Data Structure** to traverse the Tree Structure level by level.

![Queue Data Structure](https://i1.faceprep.in/Companies-1/queue-operations.gif)

Our first step is then to initialize a queue within our **`invertBinaryTree`** function and establish our first base case.

## Variable Initialization:

```python
def invertBinaryTree(tree):
    # Initialize a queue to store tree nodes
    queue = []
    # Tree = None Base Case
    if tree == None:
        return None
    # Add root node into queue
    queue.append(tree)
```

In this snippet, we have initialized a queue to store our tree nodes. We have also established that if the input tree is equal to **`None`** we simply return **`None`**. Next, if our code passes this check, we can go ahead and add the **`Root`** node to our queue.

The next logical step would be to create a loop while there are nodes in our queue. Then we can grab the node off the queue and swap its children nodes.

```python
    # Loop while the queue has nodes
    while len(queue) > 0:
        # Grab node off the queue
        treeNode = queue.pop()
        # Swap the children nodes
        if treeNode != None:
            swapChildren(treeNode)
```

Next we will define a helper function to swap the `treeNode` left and right children nodes.

## Swapping Children Nodes

```python
# Swap left and right children nodes
def swapChildren(node):
    temp = node.left
    node.left = node.right
    node.right = temp

```

A compact little function to make our code a little cleaner. All this is doing is storing the node's left child in a `temp` variable, reassigning the left child to be the right and then the right node to be our temp variable. This way, we can swap without losing reference to either node.

## Leaf Nodes & Enqueuing Children

We can then add an else conditional statement that tells returns the control to the beginning of the while loop. The continue statement rejects all the remaining statements in the current iteration of the loop and moves the control back to the top of the loop.

In other words, because we only want to call our `swapChildren` function on nodes that have children, if we reach a leaf node we want to stop the iteration on its tracks and avoid enqueuing `None`.

However, if we successfully swap the children nodes then it is safe for us to enqueue them.

```python
    # Loop while the queue has nodes
    while len(queue) > 0:
        # Grab node off the queue
        treeNode = queue.pop()
        # Swap the children nodes
        if treeNode != None:
            swapChildren(treeNode)
        # Otherwise continue to next iteration
        else:
            continue
        # Add swapped children to the queue
        queue.insert(0, treeNode.left)
        queue.insert(0, treeNode.right)
```

> Remember a Queue must honor a `FIFO (First In First Out)` enqueuing and dequeuing order.

That is why when we grab nodes off our Queue, we use:

```python
queue.pop()
```

When we insert nodes into our queue, we use the insert method to shift our list over by passing in the target index of 0, which is the beginning of our queue and our children nodes.

```python
queue.insert(0, treeNode.left)
queue.insert(0, treeNode.right)
```

## Finishing Up

Last but not least, when our code has traversed the entire tree structure, we should break out of the loop and return our inverted tree.

## Final Solution Code:

```python
def invertBinaryTree(tree):
    # Initialize a queue to store tree nodes
    queue = []
    # Return None if input tree is None
    if tree == None:
        return None
    # Add root node into queue
    queue.append(tree)
    # Loop while the queue has nodes
    while len(queue) > 0:
        # Grab node off the queue
        treeNode = queue.pop()
        # Swap the children nodes
        if treeNode != None:
            swapChildren(treeNode)
        # Otherwise continue to next iteration
        else:
            continue
        # Add swapped children to the queue
        queue.insert(0, treeNode.left)
        queue.insert(0, treeNode.right)

    # Return the inverted tree
    return tree


# Swaps left and right node children
def swapChildren(node):
    left = node.left
    node.left = node.right
    node.right = left
```

## Checking Our Work

Finally, you've reached this point and, you're ready to see a beautifully crafted inverted binary tree. Let's print that sucker out to our console!

```python
print('Original', tree)
print('Inverted', invertBinaryTree(tree))
```

![Queue Data Structure](https://media.tenor.com/images/9eb2d92b8b784610d75da703e736e760/tenor.gif)

What happened? You likely saw something like this print out in your console:

```python
Original <__main__.Tree object at 0x108eb6f40>
Inverted <__main__.Tree object at 0x108eb6f40>
```

> This is due to the fact that **Python** is printing out the address in memory where our tree is stored instead of the tree itself.

Did you notice the address is the same for both statements? This is because we are mutating the original tree structure.

Now that we know what **Python** is doing, let's tell it how to correctly format our `Tree Class` when it is printed out in the console.

The approach we're going to take is to display our trees in the following list format:

```python
[[4], [2, 6], [1, 3], [5, 7]]
```

This would represent the following balanced tree, where each sub-array is a level/depth:

```python
         4
       /   \
      2     6
     / \   / \
    1   3 5   7
```

To achieve this format we're going to take advantage of the `__repr__()` constructor method. This is used to compute the "official" string representation of an object. So lets go ahead and update our Tree Class:

```python
class Tree:
    def __init__(self, value):
        self.val = value
        self.left = None
        self.right = None

    def __repr__(self):
        queue = []
        path = []
        if self == None:
            return f'Tree: (None)'
        # Grab Node Off Queue
        queue.append(self)
        while(len(queue) > 0):
            # Our Level Subarray
            level = []
            # Current Size of Queue = Level
            size = len(queue)
            # Stores Node Values in Current Level
            for _ in range(size):
                node = queue.pop()
                level.append(node.val)
                if node.left:
                    queue.insert(0, node.left)
                if node.right:
                    queue.insert(0, node.right)
            # Adds Level to Path
            path.append(level)

        # Return our mapped tree
        return f'Tree: {path}'

```

In a familiar **BFS** manner, we traversed through our tree structure, except this time we created an inner loop to keep track of each level in our tree and therefore the result should be a list with subarrays for every level of our tree.

The following print statements..

```python
print('Original', tree)
print('Inverted', invertBinaryTree(tree))
```

Will correctly print out our tree in this manner:

```python
Original Tree: [[4], [2, 6], [1, 3], [5, 7]]
Inverted Tree: [[4], [6, 2], [3, 1], [7, 5]]
```

## Conclusion

In the end, we've found a way to swap tree nodes in place and invert a Binary Tree! The results can be visualized like so:

```python
      Original          Inverted
          4                4
        /   \            /   \
       2     6          6     2
      / \   / \        / \   / \
     1   3 5   7      3   1 7   5
```

Thanks so much for reading up to this point. I hope you found this article useful and it brought you a little closer to understanding how to work with Binary Trees!

<p class="text-lg  text-bold">You can find the source code to this problem on <a class="text-primary font-bold hover:text-accent" href="https://github.com/alexisdavalos/CodingChallenges/blob/solutions/BinaryTreeInversion/InvertBinaryTree.py">Github</a></p>

I've also compiled a solution in <a class="text-primary font-bold hover:text-accent" href="https://github.com/alexisdavalos/CodingChallenges/blob/solutions/BinaryTreeInversion/InvertBinaryTree.js">Javascript</a>


How to Invert a Binary Tree In Python


<h2 class="text-xl font-bold">How to Solve: Robot Vaccum Algorithm Problem</h2>

Over the course of the last couple of weeks, I've been practicing a daily committment to solving at least one coding challenge per day. So today I'm going to be writing about my approach to solving the Robot Vaccum Problem and breaking down the complexity analysis. We will be focusing on writing the solution in **Javascript** in this article.

## Problem Statement

> Given a string representing the sequence of moves a robot vacuum makes, return whether or not it will return to its original position. The string will only contain L, R, U, and D characters, representing left, right, up, and down respectively.

### Starter Code:

```javascript
const robotVacuum = (string) => {
	// Write Solution Here
};

// Ex: Given the following strings...
console.log(robotVacuum("LR")); // "LR", return true
console.log(robotVacuum("URURD")); // "URURD", return false
console.log(robotVacuum("RUULLDRD")); // "RUULLDRD", return true
```

### Variable Initialization:

```javascript
const robotVacuum = (string) => {
	// Initialized Variables:
	let hashTable = {};
	let moves = {
		L: "R",
		R: "L",
		D: "U",
		U: "D",
	};
};
```

So here we are utilizing an **Object/Dictionary** to store the count of every instruction within the input string as well as an opposites **Object/Dictionary.**

We are now going to move forward to looping through our input string with a **for Loop** to populate **moveCounts in: <br>** _`O(n) time | O(n) space.`_

```javascript
// counting robot instructions
for (char of string) {
	// move/key not in hash table
	if (!hashTable[char]) {
		// initialize key as 1
		hashTable[char] = 1;
	} else {
		// increment key count by 1
		hashTable[char] += 1;
	}
}
```

After this **for Loop** we should see **moveCounts** populate like this if we were to print it out in a **Node** environment:

```javascript
// Example of passing "LR" into our function
robotVacuum("LR")
// Adding a print statement after the first for loop
console.log(hashTable);
// Result:
{ L: 1, R: 1 }
```

Next, we are going to compare the values stored in **moveCounts** utilizing our **oppositeMoves** **Object/Dictionary.**

```javascript
// loop through keys in opposite moves obj
for (key in hashTable) {
	// check equality of opposite counts
	if (hashTable[key] === hashTable[moves[key]]) {
		// keep looping
		continue;
	} else {
		// encountered uneven key pairs break out of loop
		return false;
	}
}
// All keys had even counts, cycled all keys
return true;
```

By using this mirroring technique with a pre-built **Object/Dictionary** you can take advantage of the `O(1) time` look-up speed to solve this quickly with a final complexity of: <br> _`O(n) time | O(n) space`_.

<h3>Final Solution Code:</h3>

```javascript
const robotVacuum = (string) => {
	// Initialized Variables:
	let hashTable = {};
	let moves = {
		L: "R",
		R: "L",
		D: "U",
		U: "D",
	};

	// counting robot instructions
	for (char of string) {
		// move/key not in hash table
		if (!hashTable[char]) {
			// initialize key as 1
			hashTable[char] = 1;
		} else {
			// increment key count by 1
			hashTable[char] += 1;
		}
	}

	// loop through keys in opposite moves obj
	for (key in hashTable) {
		// check equality of opposite counts
		if (hashTable[key] === hashTable[moves[key]]) {
			// keep looping
			continue;
		} else {
			// encountered uneven key pairs break out of loop
			return false;
		}
	}
	// All keys had even counts, cycled all keys
	return true;
};

// Ex Test Cases: Given the following strings...

console.log(robotVacuum("LR")); // "LR", return true
console.log(robotVacuum("URURD")); // "URURD", return false
console.log(robotVacuum("RUULLDRD")); // "RUULLDRD", return true
```

<p class="text-lg  text-bold">You can find the source code to this problem on <a class="text-primary font-bold hover:text-accent" href="https://github.com/alexisdavalos/CodingChallenges/tree/master/RobotVaccum">Github</a></p>


How to Solve: Robot Vaccum Algorithm Problem

<h2 class="text-xl font-bold">Hello World... from My New Blog!</h2>
<p text-align="left">I'm a <b>Fullstack Engineer</b> with a passion for constantly learning and pushing the boundaries of my comfort zone. I have <b>2+ years of experience in Front-End Development</b> working on design, deployment, and maintenance of web-based projects and <b>3+ years of experience in Graphic Design and Marketing</b>. I am very comfortable using design tools like <b>Photoshop, Illustrator, After Effects, and Premiere.</b></p>
<br/>
<h3 align="center">⚡️ How To Contact Me ⚡️</h3>
<p align="center">
  <a class="text-primary font-bold hover:text-accent" href="mailto:alexisdavalos.dev@gmail.com" target="_blank" rel="noreferrer">Email</a>
</p>
<br/>
<h3>What I'm up to:</h3>
<ul>
<li>🔭 I’m currently learning German 🇩🇪</li>
<li>🌱 I’m currently learning to better myself through daily practice and discipline</li>
<li>🏋 I’m extremely passionate about technology, fitness, philosophy and language</li>
<li>⭐️ Fun fact: I speak three languages: [ 🇺🇸 English | 🇪🇸 Spanish | 🇷🇺 Russian ]</li>
</ul>
<div class="flex flex-col mb-4">
<div class="w-full">
<h3>Front End Technologies:</h3>
<p><img src="https://img.shields.io/badge/code-React-informational?style=for-the-badge&#x26;logo=react&#x26;logoColor=white&#x26;color=61DAFB" alt="Code React">
<img src="https://img.shields.io/badge/code-Redux-informational?style=for-the-badge&#x26;logo=redux&#x26;logoColor=white&#x26;color=764ABC" alt="Code Redux">
<img src="https://img.shields.io/badge/code-Vue.js-informational?style=for-the-badge&#x26;logo=vue.js&#x26;logoColor=white&#x26;color=4FC08D" alt="Code Vue.js">
<img src="https://img.shields.io/badge/code-Next.js-informational?style=for-the-badge&#x26;logo=next.js&#x26;logoColor=white&#x26;color=000000" alt="Code Next.js">
<img src="https://img.shields.io/badge/code-JavaScript-informational?style=for-the-badge&#x26;logo=javascript&#x26;logoColor=white&#x26;color=F7DF1E" alt="Code Javascript">
<img src="https://img.shields.io/badge/code-HTML-informational?style=for-the-badge&#x26;logo=html5&#x26;logoColor=white&#x26;color=E34F26" alt="Code HTML">
<img src="https://img.shields.io/badge/code-SASS-informational?style=for-the-badge&#x26;logo=sass&#x26;logoColor=white&#x26;color=CC6699" alt="Code SASS">
<img src="https://img.shields.io/badge/code-CSS-informational?style=for-the-badge&#x26;logo=css3&#x26;logoColor=white&#x26;color=1572B6" alt="Code CSS"></p>
</div>
<div class="w-full">
<h3> Back End Technologies:</h3>
<p><img src="https://img.shields.io/badge/code-Node-informational?style=for-the-badge&#x26;logo=node.js&#x26;logoColor=white&#x26;color=339933" alt="Code Node Js">
<img src="https://img.shields.io/badge/code-PostgreSQL-informational?style=for-the-badge&#x26;logo=postgresql&#x26;logoColor=white&#x26;color=336791" alt="Code PostgreSQL">
<img src="https://img.shields.io/badge/code-SQLite-informational?style=for-the-badge&#x26;logo=sqlite&#x26;logoColor=white&#x26;color=003B57" alt="Code SQLite">
<img src="https://img.shields.io/badge/code-Knex-informational?style=for-the-badge&#x26;logo=Knex.js&#x26;logoColor=white&#x26;color=6a3d7c" alt="Code Knex">
<img src="https://img.shields.io/badge/code-Python-informational?style=for-the-badge&#x26;logo=python&#x26;logoColor=white&#x26;color=3776AB" alt="Code Python">
<img src="https://img.shields.io/badge/code-GraphQL-informational?style=for-the-badge&#x26;logo=GraphQL&#x26;logoColor=white&#x26;color=E10098" alt="Code GraphQL"></p>
</div>
<div class="w-full">
<h3>Operating Systems:</h3>
<p><img src="https://img.shields.io/badge/os-Windows-informational?style=for-the-badge&#x26;logo=Windows&#x26;logoColor=white&#x26;color=0078D6" alt="Windows">
<img src="https://img.shields.io/badge/os-macOS-informational?style=for-the-badge&#x26;logo=Apple&#x26;logoColor=white&#x26;color=999999" alt="MacOs"></p>
</div>
<div class="w-full">
<h3> IDE's Utilized:</h3>
<p><img src="https://img.shields.io/badge/IDE-VisualStudioCode-informational?style=for-the-badge&#x26;logo=visual-studio-code&#x26;logoColor=white&#x26;color=007ACC" alt="Visual Studio Code - vs code">
<img src="https://img.shields.io/badge/IDE-Vim-informational?style=for-the-badge&#x26;logo=Vim&#x26;logoColor=white&#x26;color=019733" alt="VIM"></p>
</div>
<h3> Github Stats:</h3>
</div>
<p><img src="https://github-readme-stats.vercel.app/api?username=alexisdavalos&#x26;include_all_commits=true&#x26;show_icons=true&#x26;theme=dracula&#x26;border=none" alt="Alexis&#x27; github stats"></p>
<p><a href="https://github.com/alexisdavalos/"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=alexisdavalos&#x26;layout=compact&#x26;theme=dracula&#x26;card_width=445" alt="Top Langs"></a></p>
<div>
<p class="text-md  text-bold">Github Stats Made Possible By: <a class="text-primary font-bold hover:text-accent" href="https://github.com/anuraghazra/github-readme-stats">Anuraghazra</a></p>
</div>


Back to Blog.

Hello World... from My New Blog!
Total Views:33
2 min read

Share This Article on Social Media