As my loyal blog readers have now learned, I am slowly becoming Python’s number one fan. But, did you know that Python is also friends with another reptile? Introducing: Turtle.

The Turtle module is a Graphical User Interface (or GUI) that you can import and use in your Python projects. The documentation calls it “a popular way for introducing programming to kids” but I would say adults like fun things too and this is a great resource for visual learners and people getting started with the concepts of Object-Oriented Programming in Python.

Turtle Basics

The great thing about Turtle is, unlike some other Python packages, it’s already on your machine! No need hunting it down and making sure it’s downloaded; if you have Python downloaded on your computer it is included and you are good to go.

Step 1: Import Turtle

The module may be downloaded, but you still need to import it into your file. Do it at the top of your file like so:

from turtle import Turtle, Screen

Turtle and Screen are the two Classes we will be using today, so that’s all we need to import for now.

Step 2: Make a Turtle

The first thing we need to do is to make our turtle. To do so, we need to call on the Turtle class, followed by two parentheses to signal that we want to build a new instance of the Turtle class.

arthur = Turtle()

Step 3: Make a Screen

Now that arthur has been brought into existence, we also need to build a screen so we can get a good look at him! This is when we use the Screen class.

screen = Screen()

Step 4: Keep Screen Open

If you run the code just as is now, you will see a quick flash of the screen and that’s it. What gives? Well, we need to use a special Screen method that will make sure that the screen will only close when we click on the exit, like so:

screen.exitonclick()

Now, we can get a good look at our turtle:

Hmm…Arthur sure isn’t very turtle-y. Let’s get to fixing that!

Turtle Methods

Arthur the turtle has lots of fun things he can do! Let’s get started with spiffing him up a bit.

Shape

Like we see above, Arthur is…well, he’s not a turtle. We can change that with the Turtle.shape() method. Check out the documentation to see all of your options, but today I’m going to give Arthur a classic turtle shape, using the string ‘turtle’ as my parameter inside the method.

arthur.shape('turtle')

Look at that cute guy! Now it’s time to brighten him up a bit.

Color

Turtle.color() is a method similar to the shape method we discussed above, that takes a string of a color name as its argument and will then change that turtle into said color. I’m gonna go classic and give Arthur a green color:

arthur.color("green")

Look at that guy! Now he’s all spiffed up and ready for his day.

These are the basics of the Turtle package, but there is so much you can do with this guy — he can travel all over the screen, he can make art, he can place dots — there are lots of ways to make really cool and creative projects very simply…maybe next time we’ll build a fun project together? For now explore the really helpful documentation…happy coding!

Hello friends! I am in week 3 of my learning journey with Python. I am continuing to love it, and let me just emphasize to any other newbie software engineers that learning your second and third language are significantly easier than learning your first one.

Something new that I came across this week that I hadn’t yet encountered in Ruby or JavaScript was this little thing called docstrings. Today, I’m going to break down what the hell a docstring is, why you should add them to your code, and how to do just that.

What is a Docstring?

Docstring is short for documentation string, and it’s exactly what it sounds like! It’s a string literal that is used to help explain a specific line of code. For example, let’s say I’m using the len() function in Python:

Do you see the description above the len() function while I’m typing out the code? That is the docstring found in the actual Python documentation to help explain the len() function if you need a little reminder. But, what’s even cooler is you can create your own docstrings for the functions you build out in your Python projects. Check it out below!

Implementing Docstrings into Your Code

The symbol for implementing a docstring is quite simple: three sets of quotation marks:

"""Inside these three quotations is my docstring."""

Pretty easy huh? When you implement it in your code, you want to put it right after you define the function. Let’s say you want to write a function called sum that will add two numbers together. You would add the docstring like so:

Now, when I call on the function, here’s what appears:

Pretty neat!

If, for some reason, you want to access that string, it is within the __doc__ object, and you can access it like so:

***Pro-tip: Make sure you put two underscores on each side of the “doc”…learned that the hard way!

Why are docstrings important?

Docstrings may seem like a silly and somewhat unnecessary tool for small projects, but once you start building out big applications it can be a really big game changer. If you wrote a function you want to call on that’s 200 lines of code away, rather than scrolling through and trying to find how it works, the docstring will do the work for you and demonstrate not only what the function does, but what parameters to include.

And that’s it! A simple addition to your Python code that will make your life a lot easier when handling large amounts of code. Check out the official documentation about Python docstrings here. Happy coding!

Hi friends! I had a CoderByte assessment for another job application this week that threw me a little bit for a loop: run length encoding. This is a concept I had never heard of so I figured it would be helpful for others to break it down, along with the problem and my solution.

***Full disclosure and reminder that this is by no means the PERFECT solution to this algorithm and I’m sure there are more “correct” and more efficient answers on the internet; this is just the way I was able to logically solve it in my brain with time constraints!***

THE PROBLEM

Given an input string, write a function that returns a compressed version of the string using the Run-length encoding algorithm. This algorithm works by taking the occurrence of each repeating character and outputting that number along with a single character of the repeating sequence. For example: “wwwggopp” would return 3w2g1o2p. The string will not contain any numbers, punctuation, or symbols.

BREAKING DOWN RUN-LENGTH ENCODING

The first thing I thought when I read this problem was “What the hell is run-length encoding?” I had no flipping clue, and had never heard of this concept in my life. So, what better time then now to learn?

I like Wikipedia’s definition:

Run-length encoding (RLE) is a form of lossless data compression in which runs of data (sequences in which the same data value occurs in many consecutive data elements) are stored as a single data value and count, rather than as the original run.

On first glance this seems like a silly and useless concept, but in situations where there are very very large runs of characters, I see where this can make things more efficient.

MY SOLUTION

https://replit.com/@thequeenbeebs/RunLengthEncoding

THE METHOD TO MY MADNESS

Building Out Initial Variables

let count = 1
let finalString = string[0]

The first thing I thought of when I saw this problem was that I was going to need to loop through each character in the string and create some sort of counter to determine the number of each character. I built a variable called “count” that would tell us the number of each character, and increment as we looped through the string.

I also wanted to create a string that would contain all of the final information that we would eventually return. The reason I didn’t begin by creating it as an empty string was that I knew that we would need something to compare to when looping through the input string, so I added the first character from the string. So, right now, using the example above, finalString would simply be “w”, and the count would be 1 to represent the 1 character we have already looped through.

Looping through Each Character in the String

for (let i = 1; i < string.length; i++) {
    ...
}

For this loop, I decided to use this style of iteration instead of a for/in situation, because I knew that I actually wanted to just start with the second character in the string, and compare it to the first character already in our finalString variable.

The Conditional: Part 1

if (string[i] === finalString[finalString.length - 1]) {

    count += 1

}

So, what this conditional does is checks and sees if the current character in the loop is the same as the character before it, which we have added to our finalString and is currently the last character.

If we are still using our example from above, string[1] would be “w”, and finalString[0] would also be “w”. So, this conditional returns true and we add one more to the count.

The Conditional: Part 2

else {

    finalString = finalString.slice(0, finalString.length - 1) +    

    count + finalString.slice(finalString.length - 1) + string[i]

    count = 1

}

This is the part that gets a little tricky. What happens when we move on from one character to the next, when we’ve hit the 4th character in the string, “g”?

I’m sure there is a more elegant way to come up with a solution but the one I found is to slice up finalString like so:

all the characters in the finalString except the last one

+

the counter we have been adding to 

+ 

the character we have been comparing the other characters with

+

the new character that we have come across, that we will now be using to compare against other characters

It’s a little confusing, but this will give you the exact format you need for this problem. In this situation, if we put a console.log() inside this else conditional, the first one would come up as “3wg”. There is only one character in finalString at the moment, so there is nothing before the count, which is 3. After that we have the “w” that we have been referencing the whole time, and then the “g” that we will be referencing after that.

The last thing you need to do is reset the count variable to 1, since we are starting over and counting the instances of a new character.

Tacking on the Final Count

finalString = finalString.slice(0, finalString.length - 1) + count + finalString.slice(finalString.length - 1)

The only thing that this loop does not accomplish is that there will be still one more count that needs to be tacked onto the finalString after we have finished iterating. Like in the else conditional above, we are putting the count inside slices of finalString so it’s in the exact position that we need. The only thing that is different is that we are not tacking another character on the end of finalString, because we’ve looped through them all and there’s nothing else to compare!

Put this code outside of both the conditionals and the looping, so that it is only performed once right before we return the finalString.

Return finalString

return finalString

That’s it! You’re done!

I’m really interested in seeing other people’s solutions to this problem, so feel free to comment and let you know how you’d tackle run-length encoding. Happy coding!

Hey guys! As I mentioned last week, I have just started my journey learning Python. As with any new language it is a little slow going at first, but I have started picking up speed and have really started to fall in love with it. One of the things that was a game changer to me this week was being introduced to the Random module and all of the methods inside it that you can use! Today, I’m going to break down the Random module, show you how to add it to your application, and the most important and commonly used functions within it.

What is Random?

Random is a module in Python that generates pseudo-random numbers for various purposes. It’s been super great for all of the silly CLI games I’ve been building, but also has fabulous uses for real life as well.

Importing Random

Importing Random in your Python file is super simple, and similar to importing React components if that’s something you know how to do. At the top of your Python document, simply type:

import random

That’s it! Now you can call on all of the random functions that your heart desires. Let’s break down a few of them that I love now.

Random Functions To Know

random.randint()

This function is the most commonly used in terms of returning random numbers. The function has two parameters, that are the range, and the function will return a random integer inside that range.

random.randint(1, 10) # returns a number between 1 and 10

This function is great for any sort of application where you need to rely on chance. Rock, Paper, Scissors! Heads or Tails! Roulette! These are all things with an equal amount of probability where you can assign each choice to a number.

random.random()

This function doesn’t take any parameters, and returns a number between 0.0 and 1.0.

random.random() # 0.3

random.choice()

This is definitely my favorite of the random functions. It takes as its parameter a list, and will choose a random item from that list.

fruits = ["Apple", "Pear", "Banana", "Peach", "Plum"]

random.choice(fruits) # "Banana"
random.choice(fruits) # "Plum 

This is a way of creating an even simpler game of chance; instead of having to assign each selection to a number, you can create an array of all of the choices like so:

choices = ["Rock", "Paper", "Scissors"]
random.choice(choices)

random.shuffle()

Another great one for lists, random.shuffle() will take a list and mix it up into a random order. Let’s use the same fruits list from above:

fruits = ["Apple", "Pear", "Banana", "Peach", "Plum"]

random.shuffle(fruits) # ["Pear", "Plum", "Apple", "Peach", "Banana"]

These are the four functions that I have used the most, but there are plenty more. Check out more info about it in the Python documentation, and I also really like this explanation from W3Schools. Happy coding!

I have begun the exciting journey of learning my first language post-bootcamp: Python! A senior engineer friend of mine once described learning new coding languages as “more like learning a new accent rather than an entire language” and so far I completely agree. There are more similarities then differences: variables work the same, there are the same data types (strings, integers, booleans, floats, etc.), string interpolation works the same…the list goes on and on. Once you understand the basic foundation of one language, the next one comes to you much more quickly and easily.

However, there are always going to be differences, especially in syntax. After spending a lot of time with JavaScript, here are my 5 main takeaways of things I have found that are different between JS and Python so far:

1. Print instead of console.log

Need to print something to the console? No more console.logs; simply type the command print() with whatever you wanted printed inside the parentheses.

print("Hello World") # Hello World

P.S. Want to comment out code in Python? Simply use the pound/hash sign (#), just like with Ruby.

2. Using Different Quotations in Strings is Crucial

Using quotes inside a string? Make sure to use different quotations (for example, single quotes and double quotes) so the computer can properly understand what needs to be printed.

print("Strings in Python are similar to strings in JavaScript, in that they are wrapped in quotation marks like so: 'Hello World'") 

# Strings in Python are similar to strings in JavaScript, in that they are wrapped in quotation marks like so: 'Hello World'

3. Use Underscores for Large Integers

If you have a very large integer that you would usually separate with commas, you can use underscores for better readability. Simply place them wherever you would normally place commas, like so:

large_int = 123_456_789
another_large_int = 1_000_000

large_int is the same as writing 123,456,789. another_large_int is the same as writing 1,000,000. The computer ignores the underscores, but it is extremely helpful for human eyes when trying to read large numbers.

4. Booleans begin with capitals.

This one felt a little bizarre to me at first, because booleans in both Ruby and JavaScript are all lowercase. In Python, the first letter is capitalized:

true_boolean = True
false_boolean = False

5. Division always returns a float.

When performing division in Python, you use the same symbol as JavaScript (/). However, with Python, division will always return a float rather than a plain integer.

print(10 / 5)   # 2.0

Characteristics like this are the reason why Python is a great choice when building applications that require a lot of math.

These are my main takeaways from learning just a couple of different Python methods and being introduced to Python data types. I have been really enjoying learning Python through Dr. Angela Yu’s Python course on Udemy, which you can check out here. As always, the Python documentation is also a great place to dig deeper. Happy coding!

To start, I’m going to remind you what the syntax of a TestCafe test looks like:

test('name of your test here', async t => {

   // testcafe actions go in here 

})

Pretty simple. So, the actions are what we put inside of the function to instruct the test what to do on the web page. Most of them are pretty self explanatory, but I’m going to break down 5 of them now!

Click

Use this action when you want the test to click an element on the page. First step is to use the TestCafe Selector to find the element you are looking for, and then call on that like so:

test('name of your test here', async t => {

   const button = Selector('#submit-button')
   await t.click(button)

})

I’m not going to go into Selectors too much, but you can find out more about them here. As I mentioned in my previous blog, make sure you import Selector at the top of your file, and then use a CSS selector to grab the element you seek. IDs are definitely the easiest to use in this situation!

Type Text

Like click, type text is pretty explanatory. The most frequent time it is used it is to make sure forms are working properly:

test('name of your test here', async t => {

   const passwordInput = Selector('#password')
   await t.typeText(passwordInput, 'password1234')

})

With type text, the action takes two arguments: the first is the selector we want to type text into, and the second is the string that we would like to be entered.

Press Key

The press key action enables the test to press a key of your choice. This can be either a letter, a number, or anything on the keyboard!

test('name of your test here', async t => {

   await t.pressKey('enter')

})

There’s only one argument for pressKey: the key you want to be pressed!

Hover

A hover actions tells the test to hover your mouse over a certain element. Perhaps you want a button to change colors when you hover over it:

test('name of your test here', async t => {

   const colorChangeButton = Selector('#color-change-button')
   await t.hover(colorChangeButton)

})

Like the click action, the only argument you need is the selector of the element you want to hover over.

Navigate

The navigateTo action is very helpful if you want to navigate to a new URL in the middle of a test:

test('name of your test here', async t => {

   await t.navigateTo('http://www.blairebaker.com')

})

The URL you want to navigate to is the only parameter, so in the example above you would be navigating to my faaaaabulous website.

These are the ones that you are most likely to use, but there are plenty more. Read more about them in the super helpful TestCafe documentation. Happy coding!

It’s not cute. Also, if you are using any sort of formatting or styling on your page, it can really throw a wrench into all of it.

For my take-home assessment, one of the tasks required me to iterate through some data and create a “team roster,” which each team member having a card that contained a profile picture, along with their name, title, and bio. I wanted all of the images to be a consistent size, which worked beautifully with CSS until…I realized one of the image src URLs was broken. The broken image icon of doom showed up on the screen and messed up all of my hard work and formatting.

What is a poor programmer to do? Here, I’m going to step through the process of fixing this little problem in your React applications!

Step 1: Choose a Default Image

Decide on the default image that will replace the SRC if your image is broken! You can choose whatever you like: the silhouette of a head, an “oops this image is broken sign,” or even a corgi with its snoot in the middle of a slice of bread:

With a face like that, who cares if the image is broken, right?

Step 2: Make Sure to Always Include an Alt Property

This is common knowledge, but I just wanted to remind you to always include the alt property in all img tags you use. This is important not only for situations where the image is broken, but it is also crucial for screen readers to make your application more accessible. If you’re not familiar, this is what it looks like:

<img src="www.dog-pics.com" alt="funny picture of a corgi">

Step 3: Create Function to Call on Default Image

Now, we’re going to create a function inside our React component that will change the SRC to our selected default image.

const addDefaultImg = ev => {
   ev.target.src = "default-dog.jpg"
}

This function, addDefaultImg, takes an event (an image tag), and changes the src to the default image you have already selected. Pretty simple!

Step 4: Use onError to Call on Function

In order to call on that function, we are going to use the onError property that React has in its framework, which is called every time there is an error when a tag is rendered (i.e. when the src is broken). Check it out:

<img src="www.dog-pics.com" alt="funny picture of a corgi" onError={addDefaultImg}>

Note: I used all functional components. If using a class component, make sure to use this.addDefaultImg.

And that’s it! A super quick way to add a default image in case one of yours breaks and you don’t catch it quickly. Happy coding!

Who can remember all of our usernames and passwords these days anyways? Those “Remember Me” checkboxes at the bottom of login forms have really come in handy in this day and age, and the way that is done is by saving that sort of data on the user’s machine. A simple way to do that is through localStorage! Today, I’m going to walk through exactly what localStorage is, how to find it on your DevTools, and a couple of important functions in order to implement it into your own React applications.

What is localStorage?

My favorite definition is from LogRocket:

localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed.

In the past, I have only used localStorage for authorization and authentication usage, but this week I was given a take-home assignment for a company that asked me to keep the state on my application persistent “even if the server has restarted.” I know there are probably more secure ways to handle such problems, but I knew that localStorage would be there in a pinch to help me out!

Finding localStorage in your DevTools

For me, the thing that really helped me understand localStorage and how it works was to find and play with it in my DevTools! Of course every browser is going to be different, but today I will walk you through finding it on Google Chrome.

1. Right click on your application, and select “Inspect”

2. Click on the >> dropdown menu and then select Application.

3. Click on the localStorage button to see all of the key-value pairs!

There you have it! This really comes in handy with debugging and making sure your localStorage is working like you’d like it to! Now, let’s move on to a couple of commonly used methods in order to implement localStorage in your application.

localStorage.setItem()

localStorage.setItem adds a key and value pair to your localStorage, taking two arguments like so:

localStorage.setItem('name', 'Blaire');

In this instance, it would save the string ‘Blaire’ in localStorage under the key of ‘name’.

localStorage.getItem()

Now, let’s say we want to retrieve a piece of useful information from localStorage…we would use the getItem method, which use takes just one argument: a key.

localStorage.getItem('name') /// 'Blaire'

Now, we are calling on localStorage and asking it to return the value that is signed to a particular value. Not too difficult, right?

Putting It All Together

Now, I’m going to show you a bit of how I used localStorage in action!

What I wanted to do was check and see if localStorage already had a value connected to the key of userData. If it did, I would set my state to that value. If not, I would make a fetch request to the API to get the data I needed. This is how I did it:

useEffect(() => {

   if (localStorage.getItem('userData')) {

      setUserData(JSON.parse(localStorage.userData))

   } else {

      fetch(`http://localhost:3000/users/${userId}`)

         .then(resp => resp.json())

         .then(data => {

            setUserData(data)

            localStorage.setItem('userData', JSON.stringify(data))

      })

   }

}, [])

HINT: localStorage can only take strings for values. If you need to use another data type, like I did with an array of objects, all you need to do call on JSON.stringify() to turn that array into a string, and parse that string when you get it back!

Play around with it, and make sure to take advantage of your DevTools when debugging. Happy coding!

During my job search process for junior software engineering positions, I frequently am asked to tackle code challenges to demonstrate my knowledge and ability to potential employers. My jaw just about dropped to the floor when I realized I was encountering the exact same HackerRank problem twice in one week. I wasn’t able to solve it in time during the first attempt, but was very pleased to pass all of the tests the second time around.

Since I am imagining I will encounter this problem again, I figured I would break down my solution and try and help other junior developers.

Note: I’m sure this is not the most efficient solution, this is just what I logically came up with in a limited amount of time!

THE PROBLEM

Given an array of strings, remove each string that is an anagram of an earlier string, then return the remaining array in sorted order.

Example

str = ['code', 'doce', 'ecod', 'framer', 'frame']

code and doce are anagrams. Remove doce from the array and keep the first occurrence code in the array.

code and ecod are anagrams. Remove ecod from the array and keep the first occurrence code in the array.

code and framer are not anagrams. Keep both strings in the array.

framer and frame are not anagrams due to the extra r in framer. Keep both strings in the array.

Order the remaining strings in ascending order: ['code','frame','framer'].

MY SOLUTION

function funWithAnagrams(array) {

   let sortedArray = array.map(string =>       
      string.split('').sort().join(''))

   let firstAnagram = [sortedArray[0]]

   let indices = [0]

   let results = []

   for (let i = 1; i < sortedArray.length; i++) {

      if (firstAnagram.includes(sortedArray[i])) {

      } else {

         firstAnagram.push(sortedArray[i])

         indices.push(i)

      }

   }

   indices.forEach(index => {

      results.push(array[index])

   })

   return results.sort()

}

THE METHOD TO MY MADNESS

Now, I’m going to attempt to break down my code line by line and explain how this problem works.

sortedArray

The first thing I did was create sortedArray, where I took the input array, split it by characters, sorted those characters in alphabetical order, and then joined them back together. If you used the example above, sortedArray would look a little like this:

['cdeo', 'cdeo', 'cdeo', 'aefmrr', 'aefmr']

Now, I can clearly see which strings are anagrams of each other.

firstAnagram and indeces

These are both arrays that we are going to push items into when we are looping through our sorted array; indeces will contain the indeces of each string where an anagram is seen for the first time, and firstAnagram will contain each anagram we come across. For now, we put 0 in the indeces and the instance of sortedArray[0] into firstAnagram, as we need something to compare to in our loop, and this function will always return the first item in the array.

Looping Through sortedArray

This is a pretty basic for loop, with the exception that we are starting with i = 1, because the string at index 0 is already included.

If/Else Conditional

Now, this logic is a little out there but try to follow me on this one. Using the array.includes() method, I check and see if the firstAnagram array contains the string found at sortedArray[i].

If the firstAnagram array already includes that string, I don’t want to do anything: we already have an earlier string that is an anagram, so that one will be omitted.

However, if firstAnagram does not include that string, we should add it to the firstAnagram array, and also add the index of that string to the indeces array. I do both of these in the else statement using the array.push() method.

Looping Through indeces

Now, we will have an array, indeces, that contains the index of each first instance of an anagram! In the above example, it would look like this:

[0, 3, 4]

Now, we need to take the strings at the corresponding indeces from the original input array. I created an empty array at the top of the function called results. So, using a forEach loop, we will loop through the indeces array, and push the corresponding string from the input array onto our results array.

Sorting

Last but not least, the problem asked us to return the array in sorted order. Because this is simply strings, always we have to do is return results.sort().

So, there we have it! Let me know if any of this is still confusing and I will try to break it down for you. Happy coding!

I am very excited to be almost done building out my personal portfolio page and deploying it for the world to see. One of my last steps is posting information about the projects I have completed to show off my work, and I want to embed the demo videos I made that walk through my projects. I’m sure I’m not the first or the last that will do this, so I’m going to walk through some steps to get your videos up as quickly and painlessly as possible.

1. Upload your videos to YouTube.

If you haven’t done this before, it’s pretty simple! Log in to your YouTube account (or create one if you haven’t already). There’s a button on the upper right hand corner of the page that looks like a camera with a plus sign on it:

Click on that, then the upload video button, and the page should look like this:

Now, you can drag and drop your video file and it will upload to YouTube! Easy as pie.

2. Use the <iframe> element on your HTML page.

The <iframe> HTML tag stands for “inline frame,” and is used to embed another document within your HTML file. This is the tag that you will use to embed your video.

<iframe></iframe>

3. Point the src attribute to the URL of your YouTube video.

<iframe src="https://www.youtube.com/embed/hhK7M_CAPAU"></iframe>

4. Insert width and height attributes.

<iframe src="https://www.youtube.com/embed/hhK7M_CAPAU" width="560" height="315"></iframe>

5. Add other attributes as needed.

There’s quite a few other parameters that you can add to the <iframe> tag, including:

• allowfullscreen: allows a user to expand the YouTube video to take up the entire screen of their computer
• URL parameters: in the SRC attribute, you can also add parameters. Check out more details at this W3Schools article. Here is an example of the same <iframe> tag as above, but with a video that starts automatically and muted:

<iframe src="https://www.youtube.com/embed/hhK7M_CAPAU?autoplay=1&mute=1" width="560" height="315"></iframe>

Hint: Always add a question mark after the URL, and separate each parameter with an ampersand.

And it’s that simple! Uploading media to your projects are much easier than you’d think, especially with easy-to-use video hosting platforms like YouTube. Hope this helps you take you projects to the next level!