Forem: Thomas Fitzgerald

Get recognized: add some pizzazz to your portfolio

Thomas Fitzgerald — Thu, 17 Dec 2020 00:44:48 +0000

What?

When conceptualizing my personal profile site, the number one thing I had in mind was that I needed something to reflect my personality, to 'pop'. I had been searching for ideas for a while when I came across a CodePen that immediately caught my attention. I had seen moving gradient backgrounds before, but not like this; sliding diagonal backgrounds that are set under the content. I loved it.

We are going to recreate that together. What will this look like? Check out the live demo here:

Let's get started

Let's get some HTML written. We are going to create three divs (<div></div>) all with the class of background class="background. So, what we have now is:

<div class="background"></div>
<div class="background"></div>
<div class="background"></div>

We still need to do two things to the HTML. In the second and third <div>'s we need to add a second class="". Add 'background2' to the second div and add 'background3' to the third div. You’ll see the reason in the following paragraphs and now the result should look like this:

<div class="background"></div>
<div class="background background2"></div>
<div class="background background3"></div>

Add CSS

Now it's time to add some style! To start, let’s go ahead and create our three background classes. So now we have:

.background {

}
.background2 {

}
.background3 {

}

Now in the .background{} class we are going to set up our movement with the animation: property. We’ll add the code and then I’ll explain what it does. Add this code to the background:

.background {
    animation: slide 3s ease-in-out infinite alternate;

}

What are we doing here? It’s a lot jammed into that statement. First, we are naming the animation 'slide' and then telling it to take 3 seconds to complete. Next, we are telling the timing function to 'ease-in-out', which means to start slow and end slow and to iterate infinitely. Lastly, alternate tells the animation to 'play forward and then in reverse'.

Now let's add the rest of the properties to the .background{} starting directly below the animation line:

.background {
    animation: slide 3s ease-in-out infinite alternate;
    background-image : linear-gradient(-50deg, #ff0004 50%, #0065d7 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

Oh my! What's going on with the background-image: property? We set it up to be a linear-gradient. By default linear-gradient is from top to bottom. So, the first part where we set it to -50deg, sets a specific angle. Next, linear-gradient needs at least two colors, so we are going to use a shade of red and a shade of blue #ff0004 and #0065d7 respectively. The 50% after each color is an optional stop position you can add to the property. In our case, we only want each color to cover 50% of the gradient.

The remaining properties in the .background{} make sure it's positioned where we want it, that it will be behind the content, and that it’s slightly opaque. Let's finish up with the .background2{} and .background3{} classes.

.background2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}

.background3 {
    animation-duration: 5s;
}

For these two classes we just want to adjust a few specific qualities of the animation. In .background2{} we want it to play in the alternate direction of the .background{} class. We also want it to take a full one second longer to play (any faster reduces the UX). For .background3{}, we just want it to take a full two seconds longer than the .background{} class.

Why don't .background2{} and .background3{} have all the same properties as .background{}? Well, recall the <div>'s we created in the HTML? All three contain the .background{} class which handles all the color. The other two background classes will apply a white overlay effect in their respective <div>'s creating different shades, and with the slight animation property adjustments, give us the different shades of red and blue moving diagonally! BOOM!

Let's make it move

Time to add that last bit of CSS, the @keyframes! A keyframe is a CSS rule that controls the intermediate steps in an animation sequence by declaring waypoints (keyframes) along the animation sequence. Put this at the bottom of the CSS:

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}

Let’s break it down. We have 'slide', which is what we initially named the animation in the top-level .background{} class. Next, we’ll declare two waypoints. Essentially we’re directing the movement from top to bottom in a 'here' to 'there' way. So at the start of the animation (0%) we set it to an offset of -25% and then at the end of the animation (100%) it moves to an offset of 25%. Our full CSS should look like this:

.background {
    animation: slide 3s ease-in-out infinite alternate;
    background-image : linear-gradient(-50deg, #ff0004 50%, #0065d7 50%);
    bottom: 0;
    left: -50%;
    opacity: .5;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

.background2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}

.background3 {
    animation-duration: 5s;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}

To see this live, check out my profile site at fitzweb.dev!
See the code at this GitHub Repo fitzwebdev!

Call to action

Now that you have a fun little sliding diagonal background, make it your own! You can add a fourth or fifth background, using the same slide animation, but with the linear-gradient line set to be up and down. Then you'd have diagonal movement along with right to left vertical movement. There is a lot you can do with this to experiment with to understand the basics of what we've learned today. Go build and make it your own!

Random Joke Generator for the beginner (and that's no joke!)

Thomas Fitzgerald — Fri, 02 Oct 2020 00:47:43 +0000

When I first started dabbling with JavaScript one of the first things I learned was the classic "Random Quote Generator". I remember thinking how cool it was to get something like that to work. I didn't care how simple it was or how many people had made one mine was so cool.

It was my first time combining HTML, CSS and JavaScript together and seeing something happen in the browser. To me, IT WAS AWESOME!

So if you are a complete beginner this guide is going to be a great way to get your feet wet. Even if you aren't a beginner maybe you haven't done one in a while and would like a little refresher.

Today we are going to build a Random Joke Generator. It's the same concept if you would rather use random quotes - this is yours to customize!

In order to encourage you to customize the generator to your own style and imagination, this guide is going to be fairly plain when it comes to the CSS, doing the bare minimum for styling.

Our final product is going to look like this:

First things first, lets get out project in order. In your project folder create three files - an index.html, style.css, and scripts.js.

Let's get our HTML structure set up next.

Start with the basic HTML skeleton:

<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Go ahead and fill in your <title> with "Random Jokes". This will display in your browser tab. Additionally let's add <h1>Random Joke Generator</h1> inside the <body>, followed by a <div> with class="display" that will contain a <p>. Add an id="displayJoke" to your <p>. This is where our jokes are going to be displayed when we add the JavaScript.

<!DOCTYPE html>
<head>
<title>Random Jokes</title>
</head>
<body>
   <h1>Random Joke Generator</h1>
   <div class="display">
   <p id="displayJoke">
     <!-- this is where jokes will display -->
   </p>
   </div>
</body>
</html>

Add another <div> with a class="button-container" and put a <button> in it with a class="button". Give it text like this <button class="button">Get Joke<button> Before we forget, lets also link the CSS stylesheet in the <head> and link the JavaScript sheet by placing <script src="scripts.js"></script> directly before the closing </body>.

<!DOCTYPE html>
<head>
<link rel="sylesheet" href="style.css">
<title>Random Jokes</title>
</head>
<body>
   <h1>Random Joke Generator</h1>
   <div class="display">
   <p id="displayJoke">
     <!-- this is where jokes will display -->
   </p>
   </div>

   <div class="button-container">
     <button class="button>Get Joke</button>
   </div>

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

When all put together in your editor it looks like this:

Moving forward, we are going to jump straight into the JavaScript. This is because I want you to style the end product to make it your own! Don't fret, I'll still cover CSS at the end of the guide if you want to use it to build yours from. Without further ado, open up the scripts.js file.

Lets grab the button using querySelector().

const onClick = document.querySelector("button");

Next, we need to make the actual array that contains all the jokes! Feel free to use the one's provided in this guide or completely make it your own and snag jokes you'd prefer to use instead! Write the array as follows:

const jokes = [
    "What rock group has four men that don't sing? Mount Rushmore.",
    "When I was a kid, my mother told me I could be anyone I wanted to be. Turns out, identity theft is a crime.",
    "What do sprinters eat before a race? Nothing, they fast!",
    "What concert costs just 45 cents? 50 Cent featuring Nickelback!",
    "What do you call a mac 'n' cheese that gets all up in your face? Too close for comfort food!",
    "Why couldn't the bicycle stand up by itself? It was two tired!",
    "Did you hear about the restaurant on the moon? Great food, no atmosphere!",
    "How many apples grow on a tree? All of them!",
    "Did you hear the rumor about butter? Well, I'm not going to spread it!",
    "I like telling Dad jokes. Sometimes he laughs!",
    "To whoever stole my copy of Microsoft Office, I will find you. You have my Word!"
]

When making the array, be sure to use square brackets [ ]to place the jokes in and separate each joke with a comma.

Finally, it's time for the function that makes this whole things work!

Let's make our custom function and call it getJoke.

function getJoke() {

}

We are going to use some math in the function to randomly select a joke from our array of jokes - well JavaScrpt will use the math - we're just gonna type some math. Each joke in our array is an index starting at zero. The number of indexes we have is determined by the length of our array (READ: this is the number of jokes we have in the jokes array).

We need to generate a random number between zero and the length of our jokes array. We are going to start with Math.floor(). This will take a parameter and round it down to the nearest integer. An example is Math.floor(7.9) will give you 7. So, if we give it Math.random() (which generates random decimal between zero and one), we will have the first part of our math to generate a random number between zero and the length of our array complete. So let's write it out:

let randomNumber = Math.floor(math.random();

This is only half of the equation. This will always return zero because Math.random() will always return a decimal between zero and one. With Math.floor() it will always be rounded down to zero.

Remember, we need random whole numbers in order to grab jokes from our array. We will achieve this by taking our Math.random() number and multiplying it by a whole number.

As an example, if we multiply Math.floor(Math.random() * 10) for example it will always give us a number between 0 and 9. So how are we going to get it to always be a random number between zero and the number of jokes in our array? We are going to multiply Math.random() by our array length using jokes.length. So now we will have:

let randomNumber = Math.floor(Math.random() * (jokes.length));

The math is done! We will now generate a random whole number between zero and the length of our jokes array.

Next we're going to take that random number and pull a random joke from our array and put it in our index.html file so we can display it for the users to see. We are going to accomplish this using the id="displayJoke" that we assigned to our <p>.

So let's grab that id to pass our joke string into.

document.getElementById('displayJoke')

Now use .innerHTML to take a retrieved joke and add it to the HTML element.

document.getElementById('displayJoke').innerHTML = jokes[randcomNumber];

So now we have a full function that looks like this:

function getJoke() {
     let randomNumber = Math.floor(Math.random() * (jokes.length));
     document.getElementById('displayJoke').innerHTML = jokes[randomNumber];
}

Almost done! Now we need to use .addEventListener() to call our function when the user clicks on the Get Joke button.

onClick.addEventListener("click", getJoke);

ACTION: Please check your file - right now your scripts.js file should look like this:

As of right now we haven't touched our style.css sheet. This is where I encourage you to make this project your own. Style it to your heart's desire and link it in the comments below. You can now WOW your friends and family with awesome jokes.

If you need a base to start with, check out the quick styling below:

Here we are simply resetting the browser margin and paddings and establishing border-box. We center up the <h1> and <p> and style the text a bit. We'll take our display class and keep it from allowing the <p> to push all the way to the edges of the screen. We will center our button using the button-container class and then make the button look pretty with button and button:hover classes.

Please, I encourage you to make this your own and see just how far you can push this joke generator. Again, feel free to link the results in the comments!

Modal Made Easy

Thomas Fitzgerald — Thu, 01 Oct 2020 19:21:39 +0000

I'm back again and sharing showing another feature I learned while working on my profile site; Modals! This is what the finished product will look like:

Let's get started with the HTML structure.

Now we have a simple button that is used to activate the modal. We also have the modal container which becomes the actual modal and last, but not least, we have the content that goes inside the modal.

Now it's given CSS to make it look good.

You can add as much style as you'd like and I encourage you to do so. I've left it clean and simple for the sake of this tutorial, but please showcase your skills and reply with a link.

So, what have we actually done?

The .modal class creates the overlay looking background color when it's activated. It needs to be the full width and height of the screen. Next, we are hiding it so it doesn't appear until we want it to.

For .the-content class we simply want to give the actual modal some visual cues and set it to the middle of the screen.

.close-button and .close-button:hover gives the user a clear way to close the modal when actions are complete.

Lastly we need to add the .active class. This functionality will be handled by a bit of JavaScript which will be added next.

This bit of JavaScript is what makes the modal actually work.

First we grab the modal, the button and close button and create a custom function that will toggle the .active class.
This allows us to activate the modal when the user clicks the button and hides the modal when the close button is clicked. We can also hide the modal by clicking on the dark background.

That's it! Now you have a clean and simple modal with a smooth animation while opening and closing. Please comment with a link of your finished product. Thank you for bearing with me as I continue to teach what I've learned so far on my coding journey!

Responsive Nav Menu

Thomas Fitzgerald — Thu, 01 Oct 2020 02:13:12 +0000

What's up! As I started building my personal profile site I wanted to have a simple responsive navigation menu. Not only had I never attempted this, but I was just barely starting to scratch the surface of basic JavaScript.

Today I'm going to share what I learned during this process by re-creating a simple Flexbox Navigation Menu that is also responsive. The end result is a mobile first menu that will show the logo and a hamburger toggle; desktop view shows all the navigation menu items minus the hamburger toggle.

To preview the end result, check out the final product over at my CodePen: Responsive Hamburger Menu.

First, let's set up the basic html for the menu.

A few notes about the html set up. The "Services" navigation menu item has a tabindex="0" attached to the <a> element. Do this because <a> tags that don't contain an href attribute are omitted from the default tab order. The toggle uses a Font Awesome Icon, so you'll want to make sure to add <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> to the <head> section of your HTML document.

Let's style this thing! Here's a quick basic styling in CSS to get us going. Feel free to use whatever you'd like.

Since we are going for a mobile first menu, we are going to use Flexbox. With the menu closed, we want the logo and our menu toggle to sit next to each other at the top of the screen. One way we can do this is to ensure that the menu items span across the entire container. This way, Flexbox should display them stacked on each other. This will leave the logo and toggle at the top of the navigation menu side by side. Adding a bit more CSS to line thins up:

What did we do? We hid the .item elements and aligned the flex items vertically and the horizontally by using justify-content and align-items. We are going to have the hidden items only show when the user toggles the hamburger via the .active class. We will use this by dynamically adding it with JavaScript. Next, we will also need to set up the drop down menu, which we will style with mobile in mind.

Since we only want the drop down menu to be seen when the toggle menu is used we hide it with display:none;. To let the user know there is a drop down menu, we used Font Awesome here in the CSS. Next lets add some functionality with JavaScript. Don't forget to add <script src="scripts.js"></script> to the bottom of your html just before the </body> tag.

Using querySelector(), we'll grab the menu and hamburger toggle and add a custom function which is called when the hamburger is clicked. Next up, we add the event listener to capture the click. Next let'ss get the drop down menu to work.

Grab all the menu items with querySelectorAll(), then using a custom function we'll add and remove .drop-down-menu-active to and from the clicked element. We finish it off with adding two event listeners for the drop down menu items. One for the click, and one for the keypress. Next we are going to make it easier for the user to exit the drop down menu when at the desktop view.

Now that we have that done, lets create the desktop menu.

When we are at desktop size, it hides the toggle and repositions the drop down menu.

And there you have it, you've now created a clean and simple responsive navigation menu for your website!

Things to do EVERYDAY

Thomas Fitzgerald — Wed, 26 Aug 2020 04:20:20 +0000

As a relatively new developer taking advantage of a blessed opportunity (part of the current #VetsWhoCode cohort), I’ve been soaking up every bit of wisdom I can. Of course I’m learning the technical side of coding as well, but that’s not what this post is about. The mentors of #VetsWhoCode are all very experienced and vastly knowledgeable developers. Even the alum are rockstars. Any new developer in the program would be whack to dismiss the advice given daily.

Which brings me to the point of this post. The man who started it all, @jeromehardaway , has brought up one particular piece of advice several times already in the cohort. He simply calls it
"Things to do everyday", and then shoots off a list of 10 items. Sometimes he’ll paste it in the slack chat. The second time he brought it up, I made sure to get it typed up. I decided that I was going to use every bit of advice I could to get my career on the right path and moving forward.

The best thing about this advice is it applies to any developer, no matter what stage of their career. It is as follows:

Make a schedule. - Easy enough. Before, I’d never get to anything because it was all in my head and I couldn’t decide what to get started on first. Now, I make tangible progress daily on what I need to do and accomplish. I simply follow my schedule.
Make sure you schedule family time in it. - You are going to be busy. You are going to have your schedule to fit it all in. But what’s the point if you neglect your family and have no one to share it with. This is a mental thing as well. Must have balance.
Focus on your core skill. - Focusing on being a JavaScript developer? Focusing on a different language? Focusing on being a marketing expert? Don’t chase after every new shiny thing, focus on your skill. Become that expert.
Expand how you market AND sell your core skill. - What are you doing to brand yourself? What are you doing to stand out against the next developer? Always look for opportunities to put yourself out there and be seen.
Build a community around your core skill. - Find others that share your skill and can learn from, as well as those who are learning your skill. Expand your circle and be seen as someone to look up to.
Read / Listen / Learn at least 45 minutes a day. - This is a must to build into your schedule. Since implementing this the stack of personal development books on my nightstand has started to shrink. Result? I’m doubling down on my learning and growth.
Execute on your goal at least 45 minutes a day. - This might appear to be redundant, but I can assure you it isn’t. Are you trying to start a business? Are you starting a non-profit? Have a personal project? This is where you make sure you are able to take measurable action on it daily.
Workout at least every other day. - Even if you don’t like exercise, this is a must. I don’t have enough room to go into all the benefits of just getting out there and moving your body. Yes, it will suck at first. Yes, your overall health (mental and physical) will thank you later. You’ll also be surprised at how much more productive you become. I’ve only recently made sure to implement it and the results are real.
Drink water. - You are made of it. You need it. It will help with your working out. You’ll feel a lot better drinking water throughout the day rather than soda or sports drinks. Again, feel better and increase productivity and overall well being.
Stay positive, people who look up to you are watching. - Staying positive will open doors, it’s just a matter of time. You never know who you will inspire or what the results will be. Making sure I do this has turned what I previously viewed as roadblocks into insignificant parts of my day. In turn I’ve been able to get so much more done.

This may seem like a common sense list. But how many out there actually do or stick to it? What I can tell you is that a guy who is out there making real things happen in this community swears by it. You know where I want to be? I want to be out there making real things happen as well.

I’ve only recently applied this to my life, but it sure is making an impact. Beginner status or Legendary, everyone can apply this list. The key? Do it EVERYDAY.