DEV Community: AidanMargo

3 Html Tags You Need to Know About

AidanMargo — Tue, 07 Dec 2021 14:53:41 +0000

Every webpage is built off of HTML. Even if it's appended to the DOM, without this code, we've got nothing to show on our page. Every developer needs to understand HTML, at least at a basic level. Yet, most of us aren't utilizing all of the tools available to us.

"But Aidan, how much else could there be to learn? This is such a basic language!"

Well, sort of. If you've worked with HTML in the past, you know of the basic tag types:

Headers (h1, h2, etc.)
Paragraphs
Divs
Inputs and so on. There are some other amazing options we have too, though, to make our lives so much easier. Let's take a look at them.

3 HTML Tags You Need to Know about

Details

We're gonna start out with my personal favorite. If you're looking for a real quick way to hide and show some information throw the tag in there and watch the magic happen!

Then...

Tip: Use in conjunction with the tag for some extra customization.

Different Input Types

Need to let the user pick a color for their profile? How about set a date-time, or from a range of numbers? You can use the "type" attribute to give your user a bunch of different options.

Datalist & Option

A great way to give your user some autocompleted options is by using the and tags in conjunction with your input! Here's an example using some common icecream flavors:

One thing to note here is that you will need to make sure that your datalist id matches the "list" attribute of your input, so the types sync up. Here's the code used for the above example:

 <label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Frameworks vs. Libraries

AidanMargo — Mon, 22 Nov 2021 05:40:13 +0000

Developers use tools each and every day to make their jobs faster, easier, and more accessible.

React Hooks, Ruby Gems, npm packages, these are all fantastic tools that make our lives as developers easier, but there are two in particular that seem to get thrown around more than the others:

Frameworks and Libraries

The majority of developers you come across will know what a framework or a library is for their language of choice; or at least they think they do. These terms are used interchangeably all the time, and while they're related, they are most definitely not the same.

What is a Framework, and What is a Library?

Imagine you need to run a simple task, but you're going to need to do it many times over. What would you do? You're most likely thinking "make a function/functions, duh!" And you would be right!
After all, we want to make sure that our code is DRY (Don't Repeat Yourself) and easily reusable. So, lets make a couple of functions:

function getWords(str) {
   const words = str.split(' ');
   return words;
}
function createSentence(words) {
   const sentence = words.join(' ');
   return sentence;
}

Great! Guess what? You just created a library. It's a small, largely irrelevant library, but it is one nonetheless.

A library is much more flexible in the way that we grab, place, and use our code. It allows us to use the tools it provides us how we see fit. Sort of like going to the library and pulling whatever resource you need as you right your history paper.

A framework, on the other hand, is a bit more like hiring an interior designer to do a lot of the heavy lifting for you. You may not have as much room to do what you'd like when and where you like it, but a lot of the brain power is handled by your new handy helper. Remember, a framework is NOT the same as a language!

When to use each?

Deciding when to use a framework and when to use a library will be quite clear if you're pulling apart your goal. Often times, though, the answer is both! Having an architecture set for you to build out your applications is great, since it will do a lot of the setup and organization for you. But, for those pesky instances where you need a bit more ease of use, use a library. Here's a graphic to help you out:

Examples

Here are some examples of some libraries you may see for some different languages and their uses:

Python: "Pandas" - Highly optimizes data analysis when working with text, numbers, or objects
Javascript: "face-api.js" - Includes well-known and loved face detection and recognition models. Great for use with node.js!
Ruby: "Better_errors" - Replaces the rails error page with an error page on the web to help with gathering information on their errors.
C++: "Torch" - Provides a variety of algorithms to make handling scientific and numerical operations much more quick and efficient.

Can't forget about those frameworks! Here are a few to check out:

Java: Spring
Javascript: Angular, React, Vue.js
Python: Django
Ruby: Ruby on Rails

What are some of your favorite libraries or frameworks to use on your projects and why? Is it what you learned first? Did you transition from a different framework? Share in the comments!

Understanding React Proptypes

AidanMargo — Tue, 02 Nov 2021 16:18:42 +0000

What is "Proptypes"

Proptypes is a react hook that makes debugging your programs a lot easier, namely when there's a conflict amongst data types.

You may remember Mousseboy if you've stopped by my page before. If not, here he is. We're gonna use him for our demonstration.

Starter Code

Here's some really basic, unstyled react code that we're using for this example:

import Mousseboy from './Mousseboy'


function App() {
  return (
    <div className="App">
      <Mousseboy name='Mousseboy' age={'12'}/>
    </div>
  );
}

export default App;

function Mousseboy ({name, age}) {
  return (
    <>
    <h3>{name} will be {age + 3} years old in 3 years!</h3>
    </>
    )}

export default Mousseboy

What should we expect to see when we run this code? Since we passed the 'age' prop down with a value of 12, we would hope to see 15 come back to us, right?

Not exactly! We passed down the age prop with a value of 12, but as a string. This causes the '3' to be tacked on to the end of the string '12.' He may be a grandpa, but he's not that old!

This is a really common bug that comes up, especially in large programs and applications. This is where proptypes comes in, to help us catch the issues when they arise.

Using Proptypes

First thing's first, we need to install the package so we can use it in our program. Run this code in the directory for your project:

$ npm i proptypes

Assuming the install went as planned, you can now use the prop-types hook in your program! We're gonna use this in our "Mousseboy" component. Import "PropTypes" at the top of your component.

import PropTypes from 'prop-types'

And we're off! So prop-types is really great for catching unintended data-type errors in our code. Here's how we use it:

call .proptypes on the component you're working in and set it to an object. It will need to be called after the return.

import PropTypes from 'prop-types'

function Mousseboy ({name, age}) {
  return (
    <>
    <h3>{name} will be {age + 3} years old in 3 years!</h3>

    </>
    )}

    Mousseboy.propTypes = {

    }
export default Mousseboy

We're going to need to add some keys and proptype values. Inside of our empty object, we're going to target the name and age props, and tell PropTypes what data type we're looking for.

    Mousseboy.propTypes = {
      name: PropTypes.string,
      age: PropTypes.number
    }

Now open up the devtools in your browser, and check out the error we get.

Awesome! This error is letting us know that the age prop was passed down as a string, but we were expecting a number.

Tips and tricks

*There are a few ways we can use this on a bit of a deeper level. For example, if we were to remove the 'age' key from our .proptypes object, there would be no error!

To ensure we're notified of something not being passed down correctly, we can add .isRequired after our proptype(string, number, etc.)

I took out the age prop in our App component and added .isrequired to it in our proptype object. It looks like this:

Mousseboy.propTypes = {
      name: PropTypes.string,
      age: PropTypes.number.isRequired
    }

And here is the error message we get:

*We can use this with multiple datatypes! Here are a few examples:

Proptypes.bool
Proptypes.object
Proptypes.symbol
Proptypes.function
Proptypes.any (rarely used, but if you do, add .isRequired !)

We can also add multiple options by using .oneOfType. Try this out:

Mousseboy.propTypes = {
      stringOrNumber: PropTypes.oneOfType ([
        Proptypes.string,
        Proptypes.number
      ]),
    }

Make sure to update your passed props up in App!

A Beginners Guide to CSS Grid

AidanMargo — Sun, 24 Oct 2021 20:22:40 +0000

CSS positioning has been the beast that many developers seem reluctant to conquer. It can be finnicky, particular, and frustrating to say the least. When do I use position: absolute or position: relative? Why are my elements not stacking on top of each other?

It's important that front-end developers know the uses of all of these different properties, and how to use them. However, there's another way to position your elements exactly how you want them:

CSS GRID

CSS grid came out in April of 2007, and helped tackle the struggles of positioning that came with Flexbox at the time. Where Flexbox handles one dimension (rows OR columns) really well, grid is generally better for working with two dimensions. Here's a little info graphic to help you out:

This is to show you the main axis on your page. With a flexbox design, you need to know which axis your element will be going before you start, as it can only work on one dimension

So let's get into some actual CSS Grid.

Here is the base code I'm using for the example, in case you want to test things out for yourself:

/* CSS */

.base-box {
  font-size: 1.5rem;
  width: auto;
  height: 125px;
  margin: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

#container {
  background-color: rgb(241, 194, 194);
}
#box-1 {
  background-color: rgb(75, 79, 105);
}

#box-2 {
  background-color: rgb(197, 40, 119);
}

#box-3 {
  background-color: rgb(54, 202, 228);
}

#box-4 {
  background-color: rgb(36, 233, 52);
}

#box-5 {
  background-color: rgb(238, 179, 90);
}

<!-- HTML -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id='container'>
      <div id='box-1' class='base-box'>Div 1</div>
      <div id='box-2' class='base-box'>Div 2</div>
      <div id='box-3' class='base-box'>Div 3</div>
      <div id='box-4' class='base-box'>Div 4</div>
      <div id='box-5' class='base-box'>Div 5</div>
    </div>
</body>
</html>

After opening index.html in your browser, you should see the page like this:

Now lets change the display of our container element to be display: grid;. At first, you shouldn't see much change besides a little bit of extra spacing. Where the real magic comes in is when you create your template. Try putting this code into the container element, and then open your browser dev-tools to check it out:

grid-template-columns: repeat(5, 250px);
grid-template-rows: 150px;

note: repeat() allows for us to create multiple copies of the same grid cell at a time.

If you hover over the container element using your browser dev-tools, you should see what some dotted lines between each of our boxes. These are the grid lines. Those are what were created with our grid-template-columns code above, and now each of our boxes has it's own cell.

Fractional Units

We can improve upon this, though. As this stands now, there's a little bit of extra space on the end, and it's not very responsive to different screen sizes. But we can take care of that! Grid has a specific unit of measurement called the fr. This stands for "fractional unit," and is an amazing way to allocate space to our child elements while also taking screen size and screen breakpoints into account.

Let's change our column width of 250px to

grid-template-columns: repeat(5, 1fr)

Here, we see that all of grid containers take up an equal fraction of the container. We can mix and match these sizes to get whatever kind of layout we want. Try:

/* grid-template-columns: repeat(5, 1fr) */
grid-template-columns: 2fr 1fr 3fr;
grid-template-rows: 1fr 1fr;

Grid Shorthand

Alright, so there's one more thing to note, and that is the grid shorthand. This lets us decide the space our children element takes up on the grid based on a start point/end point syntax.

We remember from earlier that our grid has grid-lines that break up our columns and rows. Beginning from the very start of our container, the lines are numbered from left to right for columns starting from the number 1, and from top to bottom for rows. In grid shorthand, we use those line numbers as a way to dictate when we start and stop our container on the grid.

Image Source

Our orange box seems to have a lot of leftover space at the end of the container. Let's fix that with grid-shorthand. We want this box to start at the *second grid-line, and take up the rest of the remaining space.

#box-5 {
  background-color: rgb(238, 179, 90);
  grid-column: 2/4;
}

CSS grid is a fantastic way to utilize the space of your page in a responsive, creative, and simple way. Below are some resources to take a deeper dive into CSS grid.

Phase 1 complete! My Thoughts So Far.

AidanMargo — Tue, 12 Oct 2021 04:39:14 +0000

Hi everybody!

With the first phase of my Software Engineering bootcamp coming to a close at Flatiron School, I thought I would update you on what I did over the last two weeks.

First, I completed my first code challenge on the first try! This was a huge accomplishment and it felt like a giant weight was lifted off of my shoulders once it was completed.

The week after that was project week. I was paired up with a couple of my favorite peers, and we developed a one page app that drew from a public API of cocktail recipes. We added a search function so the user can search recipes by name or ingredient, as well as a favorites list that successfully updates the server.
Check out the github repository here.

The last couple of weeks weren't without their struggles, though.

Imposter syndrome hit hard. Being paired with perhaps the two most experienced students in my cohort definitely made me feel a bit unprepared in comparison to them. I felt lost at times, and at others completely overwhelmed.

However, I also learned that while perhaps I'm not as strong as them in coding javascript off the fly, I am strong in other fields, such as design and styling! I styled our whole project (although there wasn't much to it) as well as helping to style another team's project as well! It was a lot of fun, and I quickly realized was perhaps my favorite part of the project. In the future I would like to build a project that has a bit more UI elements involved, so I can really toy around.

I start phase 2 tomorrow morning. We will be focusing on learning React, and I couldn't be more excited to learn a more clear and concise way of writing Javascript.

And here is a new picture of Mousseboy. Talk to you all soon :)

Hello Hello!

AidanMargo — Wed, 22 Sep 2021 01:09:54 +0000

Hi everybody!

My name is Aidan, and I'm a Software boot camp student at Flatiron School. I'm here to keep everybody in the loop as I go through my coding journey, and to let you know more about me each and every day as I make this life changing experience happen.

Here's a bit of information about me:

I'm from Minnesota, USA but I recently moved down to Fort Worth, Texas in order to pursue software engineering and be closer to my friends. It's WAY too hot down here, but I'll get used to it.
I have a 12 year old pup named Mousseboy. He's deaf and a bit grouchy, but he likes to sleep near the desk and watch as I plug away on my coding challenges and projects. I'll make sure to keep everybody updated on him too.
Some of my hobbies include: fitness, playing the harp, video games, and cleaning house (I LOVE TO CLEAN).

Since I'm here to keep you all updated on my coding journey, I want to share a small little To-do list that I put together. That can be found here: To-do list
This list allows you to add different items to your list, where they'll all be cataloged underneath. from there, you can select them, delete them, and more along with some nice basic styling and CSS animations to spruce it up a bit.

Thanks for reading and I hope to get to know some of you as I progress in this amazing part of my life!