DEV Community: mcardona9015

A Blog about Blogs

mcardona9015 — Thu, 25 Mar 2021 16:55:19 +0000

Blogs, blogs, blogs. It seems like everyone in the tech world is always talking about them, sharing them, telling you to write them. Are they worth the effort and what are the benefits of them?

The Struggle

As a current software development bootcamp student I was surprised to learn that writing at least four or more blog posts was a mandatory part of the curriculum in order to graduate. When I first started I couldn't understand why I was required to take time out of my busy schedule to write what I considered to be a glorified diary post and share it publicly on the internet for anyone to see. I started this bootcamp to learn programming, not to dredge up my English essay writing skills. As the deadline approached for the blog presentation I began dreading the thought of writing the blog, I was filled with anxiety about choosing a topic for the post, and I was worried I would be judged on my lack of experience about the topic. Why should I, who has been studying programming for such a short amount of time be writing a public post about it that anyone can see?

As I began to write my first post and read the posts that were shared by my fellow programmers-to-be I started to see the benefits of the humble blog in the tech world. The three major upsides of blog posts that I've found are the sharing of knowledge, learning through teaching, and preparing for the professional world.

Sharing of knowledge

We've all been there; staring at a jumbled mess of code, banging our heads against the keyboard, desperate for someone to help us figure out how to tackle the latest problem we've run into. Our first instinct as the esteemed programmers we are is to turn to Google, after all most problems that exist have already been tackled. There is a good chance that one of the first results that will come up is going to be a blog post by a fellow programmer who once upon a time was in a similar situation and decided to share their knowledge on the solution. In a way it is comforting to know that we are not alone in our struggle and there was and will be again someone else facing the same issues you face. So when you next make your big break through consider writing a blog about it to help out the next person with keys plastered to their forehead.

Learning through Teaching

I've found that one of the best ways to solidify your knowledge on a topic is to try to explain it to someone else. Teaching forces you to really examine a subject in depth and think about it from different angles. Being able to explain a topic also helps to build confidence in your abilities; if you are confident enough to teach someone about a subject then you are confident enough to apply those skills to your own personal projects. Writing blog posts is a great way to grow your skills as a teacher, and in turn improve your own self-efficacy as a programmer.

Preparing for the professional world

In this day and age of zoom interviews, remote work, and slack meetings, our professional personas live more and more on the internet. There are many facets to this, whether it is your LinkedIn page, portfolio, personal website or social media feed, your potential employer will likely get their first impression of you from somewhere on the internet. Posting technical blogs on the subjects you will likely be utilizing in your work will not only show a degree of skill in the field, but will also show you have the confidence and know-how to put into practice what you've been learning. Regularly posting blogs will allow your fellow professionals to see you are active in the field and allow them to get a taste of your personality without ever need to meet face-to-face. Having an online presence is more important than ever in the professional world.

Wrap-up

As daunting as it may seem at first to put yourself out there on the internet in yet another form, I hope this blog post about blog posts has shown the benefits of writing blogs and encouraged my fellow lurkers to take the plunge and make their mark on this community. And next time you turn to a blog post for guidance, make sure to show your thanks to the writer with a comment or follow.

CSS Grid Introduction

mcardona9015 — Thu, 11 Mar 2021 05:01:38 +0000

CSS GRID

There are many ways to style your website, and today I'm going to give a brief introduction to styling using CSS Grid layout. CSS grid provides you with a modular and dynamic way to layout your website. We'll start with a simple 3 x 3 grid example.

Codepen Example

Getting started with `display: grid;`

The first thing you need to do to get started with CSS grid is to select the element you would like to turn into a grid and give it a display property of display: grid;. This will be the parent element, which you can think of as the outer container of the grid. All of its child elements can then be placed in the columns and rows you define within the grid.

`grid-template-columns` and `grid-template-rows`

The next step is to define how many rows and column you would like to give your grid and what size they should be. A common choice for size is to use fr, a fractional unit which represents a fraction of the available space in the grid container.

For the columns we will give the container a property of grid-template-columns and then specify the size of the column using fr. A column will be created for each size declared. If we wanted three columns, with the middle column taking up half the space, we would set the property as grid-template-columns: 1fr 2fr 1fr;.

We can specify the rows in a similar fashion using grid-template-rows. If we wanted three identically sized rows we could specify the row size to repeat three times at the size of 1fr using repeat() notation like so: grid-template-rows: repeat(3, 1fr);

`grid-column` and `grid-row`

Now that we have our grid container set up we can place its child elements anywhere we specify in the grid using the grid-column and grid-row properties.

In our 3 x 3 grid example if we wanted to place a specific child element in the center of the grid at column two - row two we would select the element in our css and give it properties of:
grid-row: 2;
grid-column: 2;

Grids within grids

Child elements of grids can also be grids themselves. It is possible to have multiple layers of grids, each with their own specific column and row sizes. Another use case for giving child elements the display: grid; property is to gain access to the place-items property. This is a handy shortcut for aligning and justifying an elements content in one line. using
place-items: center;
will center any items within that grid.

Wrap-up

There are many, many other use cases and properties for CSS Grid Layout, but if you know the basics laid out above then you are on your way to creating orderly, dynamic websites! You can checkout more about CSS Grid at the MDN docs here.

Create a Simple Sprite Animation with CSS

mcardona9015 — Tue, 16 Feb 2021 06:29:32 +0000

In order to create a simple sprite animation using nothing but HTML and CSS you will need to start with a sprite sheet of the sprite you would like to animate. You can either find resources online for free or paid sprite sheets, or create your own. Piskelapp is a handy website that allows you to create multiple frames of pixel art and import them as a single sprite sheet.

For demonstration purposes I created a simple character walking animation using Pixelapp and imported it in a 4x1 frame.(Please don't judge the terrible pixel art, I'm studying to be a programmer, not an artist!)

It takes just a few tricky lines of CSS in order to turn this static sprite sheet into this animated sprite:

HTML

To start we'll need some boilerplate HTML with a div in the body. We'll give that div a class of character. Within that div will be our sprite sheet img with a class of character-spritesheet.

<!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>Sprite Animation</title>
</head>
<body>
    <div class="character"> 
        <img class="character-spritesheet" src="sample_sprite_sheet_large.png" alt="Character" />       
     </div>
</body>
</html>

And that's all we'll need for the HTML!

CSS

In order to create the illusion of movement for our animation we will need to cycle through each frame of the sprite sheet in quick succession while having only one frame visible at a time.

The key to accomplishing this lies in creating a keyframe animation on the .character-spritesheet using transform: translate, while applying overflow: hidden to the container div .character.

Applying transform: translate to an image will make the image move across itself in the specified x and y axis. We want the image to start at the x position of 0 and move across itself 100%, so we create the @keyframes like so:

@keyframes moveSpritesheet {
 from {
      transform: translate(0px,0)
  }
  to {
      transform: translate(-100%,0)
  }
}

Then we apply the animation to the .character-spritesheet, setting the speed we want to it to move, how many frames there are, and how long we want the animation to move:

 .character-spritesheet {
   animation: moveSpritesheet 1s steps(4) infinite;
 }

The final key step to create the animation is to set the container .character div's height and width to match the size size of one frame of you animation(in our case '320px'), and to set overflow: hidden. Setting overflow to hidden is the key to the illusion of the animation; it tell the div to hide any part of an element within it that goes beyod the div's width and height. Since we set the .character div's size to be equal to only one frame of the animation, as the animation takes place all of the other frames will be hidden from view, creating the illusion of movement!

.character {
  width: 320px;
  height: 320px;
  overflow: hidden;
  position: relative;
}

References

piskelapp.com - Pixel Art Creation Tool
CSS @keyframes
CSS transform: translate
CSS position

Video
Drew Conley has a great YouTube video where he walks through this process in much greater detail. It is worth a watch if you are interested in game design using purely HTML, CSS, and JavaScript.

Full Code

<!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>Sprite Animation</title>
</head>
<body>
    <div class="character"> 
        <img class="character-spritesheet" src="sample_sprite_sheet_large.png" alt="Character" />       
     </div>
     <style>
         .character {
        width: 320px;
        height: 320px;
        overflow: hidden;
        position: relative;
      }

      .character-spritesheet {
        animation: moveSpritesheet 1s steps(4) infinite;
      }

      @keyframes moveSpritesheet {
        from {
            transform: translate(0px,0)
        }
        to {
            transform: translate(-100%,0)
        }
      }
     </style>
</body>
</html>

Active Record Callbacks Introduction

mcardona9015 — Thu, 28 Jan 2021 14:31:38 +0000

All objects created in a rails application have a life cycle, which consists of three general stages: Create, Update, and Destroy. Callbacks allow you to trigger designated methods before, during, or after each stage of an objects life cycle.

Below I will go over some of the basics of an objects lifecycle, as well as a few callback methods and the order in which they will be called.

Create

Object.create

While this one method may seem to only be creating a new object and saving it to the database, there are actually many steps taking place under the hood to achieve this.

Before the object is created it needs to pass its validations.
After the object is validated it is given the okay to be created.
After creation the item is finally saved to the database

Before, during, and after each of these steps takes places we are able to utilize callback methods to perform actions.

Callback methods for Create

before_validation
after_validation
before_save
before_create
after_create
after_save

In order to demonstrate the order the above callbacks are called in we can define a simple user model with a method that puts out the name of each callback.

class User < ApplicationRecord

    before_validation :bv
    after_validation :av
    before_save :bs
    before_create :bc
    after_create :ac
    after_save :as
    after_commit :a_com

    def bv
        puts "before_validation"
    end
    def av
        puts "after_validation"
    end
    def bs
        puts "before_save"
    end
    def bc
        puts "before_create"
    end
    def ac
        puts "after_create"
    end
    def as
        puts "after_save"
    end

Once we create an instance of the user model we can see in the console the order in which the methods are being called as the item is created and then saved to the database.

Update

Object.update

Callback methods for Update

before_validation
after_validation
before_save
before_update
after_update
after_save

Callback methods for Update behave very similarly to the create callbacks.

Note: after_save runs both on create and update, but always after the more specific callbacks after_create and after_update

Destroy

Object.destroy

Callback methods for Destroy

before_destroy
after_destroy

Conclusion

There are many uses for callbacks, which are covered in greater detail at the Ruby on Rails guide.
I encourage anyone creating a Rails project to look into them further and utilize there powerful features!

DEV Community: mcardona9015

A Blog about Blogs

The Struggle

Sharing of knowledge

Learning through Teaching

Preparing for the professional world

Wrap-up

CSS Grid Introduction

CSS GRID

Getting started with display: grid;

grid-template-columns and grid-template-rows

grid-column and grid-row

Grids within grids

Wrap-up

Create a Simple Sprite Animation with CSS

HTML

CSS

References

Full Code

Active Record Callbacks Introduction

Create

Callback methods for Create

Update

Callback methods for Update

Destroy

Callback methods for Destroy

Conclusion

Getting started with `display: grid;`

`grid-template-columns` and `grid-template-rows`

`grid-column` and `grid-row`