DEV Community: Joseph Guillory

Learning Regular Expressions

Joseph Guillory — Sun, 07 Aug 2022 05:18:12 +0000

ReGex

One concept I find particularly difficult to grasp is that of regular expressions or regex.

What is a regular expression exactly? Well lets turn to Wikipedia for a definition:

"A regular expression (shortened as regex or regexp; sometimes referred to as rational expression) is a sequence of characters that specifies a search pattern in text. Usually such patterns are used by string-searching algorithms for "find" or "find and replace" operations on strings, or for input validation. Regular expression techniques are developed in theoretical computer science and formal language theory."

Well said Wikipedia, well said.

So regex is useful for checking if certain characters are in a string. You can then replace or extract those matches.

Writing RegEx

So how do we write out a regular expression? Well I'll be using JavaScript to do this but several programming languages support regex.

Simply use regular expression literals. Two forward slashes. Put the characters you're looking for in between the literals:

Here I've created a basic regex and saved it to a variable. Now I'll test my regex to see if it works.

These 3 strings came back a true because they all had matches for the string 'lie'. Let's see what a fail looks like.

These came back as false. notice that even strings that contain all 3 characters from our expression came back as false if they were not in the right order or only had partial matches.

Start and End of line

Pretty cool so far, but what if I want to match the beginning or end of a string?

You would use ^ for the start and $ for the end.

I'm starting to get the hang of this.

Ranges

In order to make or regex more dynamic we can set ranges to check for:

[a-z] checks for any lowercase letter from a to z.
[A-Z] checks for capital letters.
[0-9] checks for numbers between 0 and 9.

You can combine ranges as well:

[A-Za-z]
[a-z0-9]
[A-Za-z0-9]

There's so much more to learn when it comes to writing regular expressions. Way more than I plan to cover here. But I would like to leave off with a practical example. validating and email address.

If our goal is to check to see if an email is valid or not, we first need to define what makes an email.

Alpha numeric
Case insensitive
Has @ before the domain
Domain must contain a period

This list is not extensive but will serve our purposes for now.

So we want our local part (the part before @) to be alpha numeric and case insensitive. let's start with ^ and pick a range.

"^[A-Za-z0-9]"

We can also add on any other characters that are valid in the local part of an email address. "+._-" are all valid in this part of the address so we'll add them here.

"^[A-Za-z0-9+._-]"

adding a "+" lets any of these characters repeat. Without it our regex would be looking for just one character in this range, but who ever heard of an email address with only one letter? Now it can be any number of characters long.

"^[A-Za-z0-9+._-]+"

next we'll add the @. It should only appear once and it divides the address into two parts. We'll indicate that like this.

"^[A-Za-z0-9+._-]+@"

So far this code is looking for a range of undefined length which can repeat characters, followed by a single @.

The domain comes next. We'll set another range of characters that are valid to appear in a domain.

"^[A-Za-z0-9+._-]+@[A-Za-z0-9.-]"

Note there are slightly fewer valid characters in the domain. Lets add a "+" to let our regex know it's alright for these characters to repeat.

"^[A-Za-z0-9+._-]+@[A-Za-z0-9.-]+"

But our domain must contain one period. followed by an extension (.com, .net, .co, .org, .cvvc, etc.). First we need to add the "." but "." is a special character. It has properties attached to it in regex, so in order to process it as a plain old period we have to prepend it with a backslash.

"^[A-Za-z0-9+._-]+@[A-Za-z0-9.-]+."

Now to add our extension. They are usually lowercase and 2 - 4 characters long. How do we write this?

"^[A-Za-z0-9+._-]+@[A-Za-z0-9.-]+.[a-z]{2,4}"

Here we said that after the "." there should be a range of lowercase letters. The same way putting a + at the end of a range signified any character from our range can be repeated any number of times, we can limit the number of times a character can in a range can be used.

inside the brackets we set a minimum of 2 and maximum of 4. this allows us to use 2 char. extensions (.co, .io), 3 char. (.com, .org, .net), and even 4 char. (.cvcv, .cvvc).

Top it all off with a $ to indicate it should end with the extension.

"^[A-Za-z0-9+._-]+@[A-Za-z0-9.-]+.[a-z]{2,4}$"

Let's try it out:

This is the regex I came up with to check for email addresses. It is by no means the only way to do this. But having gone through this process I feel a lot more confident in my ability to use Regular Expressions. I hope you do to.

Flex plus Grid equals CSS success

Joseph Guillory — Sun, 03 Jul 2022 05:34:43 +0000

My CSS journey

CSS has been a constant thorn in my side. In the past I've gotten by with the "Throw everything at the wall and see what sticks" method. Although it's served it's purpose in the past, I feel I have reached the limits of what this technique has to offer.

Now I plan to conquer CSS one step at a time. In my research I've come up with a simple strategy for teaching myself:

Practice styling a react app.
Style the components with flex.
Style the App page with grid.

I've concluded that this work flow will serve me best. My next step was to experiment with flex and Grid. I'll walk through what I did to style my practice App. Maybe as I show my process, you can learn something too.

First thing I did after creating a new react app, and naming it CSS_react_sandbox, was to create five components.

Each component was set up with an outer parent div, and 3 inner child divs. I gave them respective class names and each child a unique id.

I decided that my first component would serve as my header. I styled the div accordingly:

I chose a display of flex with flex-direction row. My thinking here was that as a header/nav component, this component should be sprawled across the top of the page. The 3 child divs represent, from left to right:

The space allocated for the navigation.
A personalized welcome message.
A log out button.

I changed the size of each child element according to the amount of space I wanted each to take up. Using the flex-grow property I was able to determine how much space I wanted each element to take up. By imagining the div divided into 8 parts I allocated 6 parts to the largest element and the remaining two one part each.

Next I did similar styling for the other four components. I designated that the second and fourth would be asides, the third would be the main content, and the fifth would be the footer.

Left aside:

Right aside:

Footer:

And the Main:

Now that I have all my components, it's time to move over to App.css and add grid.

First I set the display to grid and the height to 100vh. Since I want the app component to cover the whole screen.

Next I set up my grid parameters with grid-template-columns, and grid-template-rows.

With the columns I start from the left side of the screen. This will be my first columns edge, I label it "first". I label the right edge of the column line2. I want the first aside to take up 20% of the available space so I insert that between the first and second lines. The two remaining lines will be labeled line3 and end. Between line3 and end I set the percent to 20 once again. Then the space between line 2 and 3 is set to auto.

For the rows my four lines are:

row1-start
row1-end
footer-start
footer-end

Labeling it this way helps me remember what each line represents.

Now I need to set the grid-columns and grid-rows for the components. This tells them where on the page they should be.

The final result:

This is by no means an exhaustive exploration of what can be accomplished with Grid or Flex. But I certainly learned a few things that I can build upon. I hope you did as well.

Until next time.

The Reduce Method

Joseph Guillory — Sat, 07 May 2022 15:08:41 +0000

In my quest to collect all the coding infinity stones in my JavaScript gauntlet, I decided to tackle the methods that perplex me. Case in point, the reduce method. Wrapping my head around how this method works was challenging for me, so what better way to master it than to write a blog post about it? As they say, if you really want to learn something, teach it.

For starters, what exactly is the reduce method? My understanding of it is, it’s a way to iterate over an array and reduce it into a single value.

The syntax is simple enough:

You run the reduce method on an array using dot notation.
Then you call a function you want to use on each item in the array. This function takes in a minimum of two values. The first is the total value, the second is the current value. Represented above by “init”, for initial value.

You can have up to four parameters plus an initial value, but that’s a little more advanced, for today we’ll keep it simple.
Now that we have our syntax, how do we apply it?

In the example above we start out with our array called numbers. Inside are 4 integers. Here we are trying to subtract each number in the array from the number proceeding it.

In order to accomplish this task, we create our callback function, called subFunc (subtract function). We give it two parameters. The total, this amount will accumulate the results of our function being called on each array item. The second parameter is the current value, here represented as num (number).

Now that we have our array and our callback, we’ll run reduce on the numbers array using dot notation. Inside of the function call for reduce we place our callback, subFunc. Now let’s see what happens when we set our initial value to 0. We get a return value of:

Hmmm… that doesn’t look quite right, what happened here? Let’s console log each step of the iteration.

Ahh… So, our initial number we added, zero, was inserted as our total to start from. Then the first item in our array, 250, was subtracted from zero. Giving us -250. The next item, 45 was then subtracted from that. The loop continued until we end up with our final result, -370.

What would happen if we left out the initial value when calling reduce?

The result is:

Now this looks like what we were expecting. Let’s console log to see what happened behind the scenes.

This time the first item in our array was used as the initial amount. The second item was then subtracted from that number and the result becomes the new total that is used in the next loop.
When the method is finished it will return the final accumulated result. In this case 130.

Now instead of an array of integers, how about an array of doubles?

Here we have an array called moreNumbers, that holds an array of float/doubles. Next, we create a callback called sumFunc (sum function), which rounds up/down each number to an integer then adds it to the accumulated total.
Our result:

But wait, shouldn’t the final number be an integer if we’re rounding each number? Why has our function returned a double?
Let’s get to the bottom of this with a console log.

Aha! Since we didn’t set an initial value, it took the first index of our array and used that instead. The call back used in a reduce method doesn’t run the calculations on the initial number, so the first item in the array was not rounded up. Therefore, it remained a double no matter how many integers we added to it.

When we add an initial value of 0, we get a different result.

When the reduce method plugs 0 into the total position of the equation, it can then apply the math in sumFunc to every item in the entire array. Numbers are rounded into whole numbers and added all together.

Here’s an example of what it will look like if we have an initial value of 95.

The reduce method is not limited to array’s of numbers however.
You can reduce an array of strings into a single string.

Here we have an array of strings. We name the string words.

We build a callback function called makeSentence. It will have no initial value, so the first word will be the “sentence” when we begin. It then concatenates an empty space and the next word to our sentence.

When it’s done it will return the finished sentence.

One last example of our method.

Let’s say I want to keep track of how many tools a shop has sold. Every time the shop sells a tool The name of the tool is added to an array. We’ll call this array tools.

Next, we write a callback function we’ll call reduceTools.
This function starts off with an empty object. This is our total. It then checks to see if the ‘item’ parameter is a key in the object. If it is or if it isn’t, it will update the value of the key by one. If the key’s value is 0, meaning the key doesn’t exist it will add it to the object (add to the total).

Every time it comes across a key that exists it increases that keys value by 1. When it encounters a key that doesn’t exist it will add that key with an updated value of 1 to it.

This is what the process will look like if we console log it:
{} hammer
1
{ hammer: 1 }
{ hammer: 1 } nails
1
{ hammer: 1, nails: 1 }
{ hammer: 1, nails: 1 } screwdriver
1
{ hammer: 1, nails: 1, screwdriver: 1 }
{ hammer: 1, nails: 1, screwdriver: 1 } hammer
2
{ hammer: 2, nails: 1, screwdriver: 1 }
{ hammer: 2, nails: 1, screwdriver: 1 } hammer
3
{ hammer: 3, nails: 1, screwdriver: 1 }
{ hammer: 3, nails: 1, screwdriver: 1 } screwdriver
2
{ hammer: 3, nails: 1, screwdriver: 2 }
{ hammer: 3, nails: 1, screwdriver: 2 } nails
2
{ hammer: 3, nails: 2, screwdriver: 2 }
{ hammer: 3, nails: 2, screwdriver: 2 } hammer
4
{ hammer: 4, nails: 2, screwdriver: 2 }
{ hammer: 4, nails: 2, screwdriver: 2 } hammer
5
{ hammer: 5, nails: 2, screwdriver: 2 }
{ hammer: 5, nails: 2, screwdriver: 2 } nails
3
{ hammer: 5, nails: 3, screwdriver: 2 }
{ hammer: 5, nails: 3, screwdriver: 2 } saw
1
{ hammer: 5, nails: 3, screwdriver: 2, saw: 1 }
So after all that the result is:

We now have a single object with our tools as keys and the number sold as their values.

Awesome! We mastered the basics of the reduce method. What other ways can this method be used I wonder?

Have fun experimenting with it and see what you can types of data you can reduce.

Thanks for coming along with me on my journey of reduce method self-discovery.

I hope you learned something. I know I did.

Why I Choose To Pursue Software Development

Joseph Guillory — Fri, 08 Apr 2022 17:00:11 +0000

On Monday, March 16, 2020, I was going about my regular day. Shuffling passengers back and forth to their destinations. I had just completed a drop off at SFO airport and had my next passenger in tow. We engaged in idle chit chat about a certain “bug” that was going around. He asked if business had been affected by it, and I told him so far it hadn’t. Then the voice of London Breed, the mayor of San Francisco came onto the radio as if on queue. She announced a stay-at-home order, I believe the first in the nation. My passenger and I shared a laugh at the seeming coincidence and parted ways. At that point I decided to turn off my app and call it a day. I checked my earnings, nearly $200 for just under 8 hours of driving. Not bad. My work week was off to a good start.

Then came Tuesday, March 17, 2020, I woke up the same time as the day before. Took my same route I always took. Drove the same number of hours as I always drove. By the end of the day, I had made a whopping $17… In 8 hours. Now the ride share business always had fluctuations in the amount of money you would make in a day. On a good day I could make as much as $260. On the slower days I’d make around $120 in 8 hours (I know some drivers who averaged a lot more, but I could never replicate their success). But the contrast between my Monday earnings and Tuesday earnings was enough to shake me out of my comfort zone. I needed something more stable, and I needed it now!

My plan was simple, just two steps. Step 1, find something immediately to replace the money I was losing. Step 2 was to find a long-term income replacement. The first step was simple enough. I was able to secure part time work at an Amazon warehouse. It had been five years since I’d worked in manual labor, so it was an adjustment, but it at least it was a steady check. Next, I had to decide what my long-term working goal would be. I decided to teach myself how to code. It seemed like the perfect fit for me. I loved the idea of remote work. It was what initially attracted me to ride share. The ability to turn on my app and make money anywhere with my car would become the ability to turn on my laptop from anywhere and make money.

Programming was a skill I could take with me anywhere. So, I spent months teaching myself how to code in my spare time. I was highly motivated when I first began so it was easy to spend hours practicing my new craft. Then by the end of summer I was beginning to burn out. The more I learned it seemed like there was even more I didn’t know how to do. I became overwhelmed trying to learn everything I possibly could so I would be ready for absolutely any situation. I wasn’t sure what I needed to know to be employable. I also had no idea how to network or make an appealing resume. So, my motivation slowly died down, and the procrastination began to kick in. I made less and less time to code, and I was getting used to my routine at Amazon. Before I knew it, I had stopped studying coding altogether and quietly accepted the idea of Amazon being my permanent job.

Everything changed when Amazon switched my shift from mornings to nights. I found my new shift to be a bad fit for my lifestyle. Suddenly I began to think about other options again. So, I became an interim driver trainer. For 4 months I was temporarily taken from the night shift and placed back on days for my new role. I tried to become permanent in the driver trainer position, but my all attempts had fallen through. I was on a ticking clock; it was only a matter of time before I would once again have to go back to the night shift which I did not want. So, I again began to look for alternatives. I had seen the flyers for Amazon’s career choice program hanging in the bathroom before and ignored them, but now I an incentive to pay attention. Although I had forgotten everything, I taught myself by this time, I was sure it would come back to me. I felt like this time would be different because I would be forming a connection with an actual teacher and other students. So, I went for it.

And then as if it was all preordained everything fell into place. The new Driver trainer they hired quit within his first week, and now they were ready to give me an interview. I became a full-time Driver Trainer at the same time I was accepted into the career choice program. So even if I don’t find a job writing code, at least I don’t have to go back to the dreaded night shift. I’m not sure what the future will be, but from where I’m standing it looks bright.