Forem: Jay Setlock

Having fun with CSS Part 2

Jay Setlock — Wed, 26 Oct 2022 14:03:05 +0000

This is a continuation of my previous post Having fun with CSS where I attempted to extract some joy while learning some neat CSS and JavaScript animations. While I have been using the 1982 Activison game Pitfall! as a way to make this fun, gaming is not the only application for these skills. I have some animations that I wrote for my capstone project that sprung from this exercise.

Last time around I introduced three different types of animations:
Animating a Sprite using CSS
Animating Element movement using JavaScript
Animating Element movement using CSS

This time we are going to look at
Combining a JavaScript and CSS animation

I have added a new sprite sheet to the project, created using Piskel. It is a sprite sheet with crocodiles in water.

Just like last time we are going use, along with our sprites, 3 files; index.html, script.js and style.css.

The html file looks like this now:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jump Guy 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game">
        <div id="character">
            <div id="harry"></div>
        </div>
         <div class="crocAnimation" id="croc-lake"></div>
    </div>
<script type="module" src="script.js"></script>
</body>
</html>

I have added a div element for the crocodiles and attached the crocodile animation as a class. This is appropriate because the crocodiles should always be chomping. I have also added a div with the id of "harry" that resides inside of our "character" div.

Combining a JavaScript and CSS animation

This change is necessary because applying two different animations simultaneously to a single element does not work. So we will be applying all movement to the character div. I like to think of this as Harry's car. He is the occupant of the character div and goes wherever it goes. The running sprite animation and our new vanish animation will be applied independently to the harry div.

We have some logic that will trigger this animation combination whenever the character walks or jumps into the water.

function checkDead(){
    characterLeft = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
    characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));

    if (((characterLeft>390)&&(characterTop===400))&&((characterLeft<890)&&(characterTop===400))){
         character.classList.add("descend")
         harry.classList.add("vanish")
         setTimeout(dead, 900)
    }
}

The first part of the animation is just character movement.

@keyframes sprite-descend{
    0%{top:400px;}
    25%{top:443px;}
    50%{top:485px;}
    75%{top:527px;}
    100%{top: 570px;}
}

.descend{
    animation: sprite-descend 2000ms linear;
}

We are pushing the character down with this animation. This would be sufficient if we split the water into two pieces and added background to hide our character using z index but I didn't want to do that. Instead I am using clipping to create the illusion of Harry sinking under the water.

@keyframes sprite-vanish{
    0%{clip:rect(0px, 128px,170px,0px)}
    25%{clip:rect(0px, 128px,127px,0px)}
    50%{clip:rect(0px, 128px,85px,0px)}
    75%{clip:rect(0px,128px,42px,0px)}
    100%{clip:rect(0px,128px,0px,0px)}
}

.vanish{
    animation: sprite-vanish 1000ms linear;
}

The difference in animation time is due to the scaling we applied to the character div. The vanish and descend are occurring at the same rate.

This post was a little briefer than I had but planned but this is my final week of software engineering boot camp. I do plan on part 3 in the near future. Here is a preview:

Here are some blog posts that inspired this one:
https://blog.logrocket.com/build-a-game-with-html-css-javascript/

https://blog.logrocket.com/making-css-animations-using-a-sprite-sheet/

Having fun with CSS

Jay Setlock — Mon, 10 Oct 2022 17:48:18 +0000

As I enter the final phase of software engineering boot camp I was reminded by a classmate that coding can be fun. So before we have to start our capstone project and polish our resumes and refine our portfolio and… I decided to have some fun coding during this long weekend.

What better way to have fun than doing a CSS heavy project, right? Okay maybe not. If my cohort is a fair representation, CSS is the bane of many beginning front end developers so I decided to bring an old friend, Pitfall Harry (from Activison's 1982 game Pitfall!).

This post is going to show you how to code out an 8-bit style character and animate it’s movement using JavaScript, Html and CSS. There are three different animation types happening in the clip below and I will show how they are used in conjunction with each other.

Animate a Sprite using CSS
Animate Element movement using JavaScript
Animate Element movement using CSS

Sprite Animation in CSS

At the start we are going to need a sprite sheet. To create this I started with an internet search and found one for Pitfall Harry that was a little messy, so I used Piskel to clean it up to get what I needed.

Here is the final 5 frame sprite output from Piskel.

I created one more sprite, a single frame of the character standing.

Now that we have our sprites we need to create 3 files, index.html, script.js and style.css.

The html file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jump Guy</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game">
        <div id="character"></div>
    </div>
<script src="script.js"></script>
</body>
</html>

We are defining two elements here, a game div that serves as our canvas and a character that our sprite will embody.

Now we will add some CSS styling to our elements. We are disabling the scroll bar in our body element, setting the dimensions of our game area and setting the size of our character as well as it's starting position (because our character is a child of the game element, we are setting it's position as relative to it's parent).

/* style.css */

body{
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-x: hidden; 
}

#game{
    width: 1000px;
    height: 600px;
    border: 1px solid black;
    margin:0%;
}

#character{
    width: 128px;
    height: 170px;
    position: relative;
    top: 400px; 
    scale:.75;
    left:0px;
}

Next we are adding links to our two sprite image files and the bulk of the code required to create the running animation. We are letting CSS know that one of our frames is 128 pixels wide and our 5 frame sprite sheet is 640 pixels wide. We are defining classes here that we will attach and remove as required in our JavaScript file in the next steps.

/* style.css */

.background-run{
    background: url("./harry-run.png");
}

.background-stand{
    background: url("./harry-stand.png");
}

@keyframes sprite-run {
    from { background-position: 0px; }
    to { background-position: -640px; }
}

.run{
    animation: sprite-run 500ms linear;
    animation-timing-function: steps(5);
    animation-iteration-count: infinite;
}

.flip{
    transform: scaleX(-1);
}

In our script.js file we are getting our character element and attaching our stand sprite to it. Then we are setting some global variables as well as the event listeners to handle our keystroke inputs.

var character = document.getElementById("character");
character.classList.add("background-stand")

/* Global Variables */
let pressed =false
let characterLeft=0


/* Event Listeners */
document.addEventListener("keydown",keydown);
document.addEventListener("keyup",keyup)


/* Functions */
function keydown(e){
    pressed===true
    if(e.code==="ArrowRight")run(1)
    if(e.code==="ArrowLeft")run(-1)
    if(e.code==="Space")jump()
}

function keyup(e){
    if(e.code==="ArrowRight"){
        clearInterval(movetimer)
        character.classList.remove("run")
        character.classList.remove("background-run")
         character.classList.add("background-stand")
        pressed=false
    }

    if(e.code==="ArrowLeft"){
        clearInterval(movetimer)
        character.classList.remove("run")
        character.classList.remove("background-run")
        character.classList.add("background-stand")
        pressed=false
    }
}

Next we define our run function taking our direction parameter and using it to tell the character in which direction to face based off of our arrow key inputs.

function run(direction){
    if(pressed===true){return;}

    /* Setting the direction of the character */
    direction<0 ? (character.classList.add("flip")) : (character.classList.remove("flip"))

    character.classList.remove("background-stand")
    character.classList.add("background-run")
    character.classList.add("run")
    pressed=true
}

At this point when our page loads our character is standing in the bottom left corner of our game area and he will run in place if you press and hold the right or left arrow key as well as face the correct direction.

Element Animation in JavaScript

What he won't do is actually run anywhere. We will remedy this by adding a few things to our script.js file.

Add this to our global variables: let moveTimer = 0

At the end of our run function add:
moveTimer=setInterval(move,10,direction)

This passes our direction variable to a new function called move that will be executed every 10 milliseconds by a moveTimer that is created with the setInterval function.

We also need to add clearInterval(moveTimer) to our keyup function for both the ArrowLeft and ArrowRight codes.

The move function looks like this:

function move(direction){
    direction<0 ? (characterLeft-=2) : (characterLeft+=2)

    /* Defining our movement boundaries */
    if (characterLeft>=800){characterLeft=800} 
    if (characterLeft<0){characterLeft=0} 

    character.style.left=characterLeft+'px';
}

Element Animation in CSS

This is a different type of animation than the one we just did in JavaScript. This involves an animation that, like the sprite sheet animation, is a loop. Meaning the start and end frames are the same. In this case we are talking about jumping.

We need to add a function to handle our jump and reference it to pressing the spacebar.

/* Functions */
function keydown(e){
    pressed===true
    if(e.code==="ArrowRight")run(1)
    if(e.code==="ArrowLeft")run(-1)
    if(e.code==="Space")jump()
}

function jump(){
    if(character.classList == "animate-jump"){return}
    character.classList.add("background-run")
    character.classList.add("animate-jump")

    setTimeout(removeJump,300) //300ms = length of animation
}

function removeJump(){
    character.classList.remove("animate-jump")
}

Finally we need to add the keyframes and timing for our jump to our style.css file.

@keyframes jump{
    0%{top: 150px;}
    30%{top: 100px;}
    70%{top: 100px;}
    100%{top: 150px;}
}

.animate-jump{
    animation: jump 300ms linear;
}

You can find the deployed code here:
https://setlock10.github.io/jump-guy/

You can find the github repository here:
https://github.com/setlock10/jump-guy

(Almost) any feedback would be appreciated. If there are points of confusion that you think need to be cleared up please let me know in the comments.

Here are some blog posts that inspired this one:
https://blog.logrocket.com/build-a-game-with-html-css-javascript/

https://blog.logrocket.com/making-css-animations-using-a-sprite-sheet/

Join Tables painlessly explained

Jay Setlock — Thu, 15 Sep 2022 19:40:01 +0000

Flat File vs Relational Databases

When learning about backend programming a good understanding of how modern databases work is essential and a lack of understanding can impede your progress. I decided to lay out some of the basics with a focus on join tables.

Lets begin by thinking about the spreadsheet you might have if you were selling shoes. You might start by entering every sale into a single worksheet. You could have columns that look like this:

This would be a flat file. If you filled this spreadsheet out as new orders came in it could be used to fulfill those orders. It is adequate but the problem with this design is already apparent even with just these few columns; when we have repeat customers the same data will be entered again.

If you're wondering what a list of sales like this has to do with join tables I have good news for you. This is a join table or it will be if we design our relational database correctly.

This is a representation of our sales spreadsheet as a table, with the table name at the top and each column in the database below the table name.

Primary Keys vs Foreign Keys

There is one difference from our spreadsheet found in our table description, the column: id. This is our primary key. We could have one in our flat file but it is required here. Every table you create will have one because it facilitates relationships with other tables in your database.

Let's take a peek at what this sales table will look like once we make it a proper join table.

That's it. The sales primary key and then two other entries, customer_id and shoe_id. These are foreign keys, primary keys from other tables and they are all we need to define to make our join table.

This what our other two tables look like.

And this is how they relate to the sales data (and each other).

Each table has its own primary key and its own columns of data. When accessing a row in the the join table, in our case the sales data, we now have access to everything associated with the customer and everything associated with the shoe they purchased.

Many to Many

Because our join table now exists, shoes and customers relate to each other as well. Let's examine this:

A shoe can have many sales.
A customer can have many sales.

But also, through our sales table:

A shoe can have many customers.
A customer can have many shoes.

You will hear these kinds of statements when learning about relational databases. This is describing a many to many relationship.

What it means is that you can now look up a customer and get the name, size and price of every shoe they have purchased, as well as the date they were purchased.

From the shoe side we can access the name and location of every customer that purchased a shoe and when they were purchased.

The power from a database such as this is how customizable the data is now. We can use the data to create sales reports with geographical information, make mailing lists and even help manage inventory and purchasing.

As programmers these join tables and the relational databases they belong to give us the freedom to pick and choose the data we wish to deliver.

Using Filter and Sort in JavaScript

Jay Setlock — Fri, 26 Aug 2022 17:03:22 +0000

Getting a grasp of filtering and sorting arrays in JavaScript can be quite confusing at first. Let's look at example of an array of objects that a substitute teacher might collect and see if we can't make it make sense.

const students = [
  { id:105, name: "Jessica",   is_present:true },
  { id:101, name: "Denise",    is_present:true },
  { id:103, name: "Blake",     is_present:false},
  { id:102, name: "Jaqueline", is_present:true },
  { id:104, name: "Aaron",     is_present:true },
]

Let's say we wanted to see who was not present in class. We would use .filter like so:

let filteredStudents =
students.filter(student=>student.is_present===false)

The result would be:

filteredStudents=[{id: 103, name: 'Blake', is_present: false}]

What if you wanted more than just a subset of your original array out of your filter operation? Since the filter is really answering a question then the result could be used to create new data.

We could guess what the result of the following would be:

let filteredStudents =  
students.filter(student=>student.name.includes("J"))

 filteredStudents = [
  { id:105, name: "Jessica",   is_present:true },
  { id:102, name: "Jaqueline", is_present:true }
]

But what if we wanted a new array that specified that the names in the array had passed the filter test?

let filteredStudentsJ =
students.filter(student=>student.name.includes("J"))
.sort((a,b)=>a.name>b.name?1:-1)
.map(filteredStudent=>({
   name:filteredStudent.name,
   id:filteredStudent.id,
   includes_J:true}))

We get a new array of objects that has the 'includes_J' key instead of 'is_present'.

filteredStudentsJ =[
 {name: 'Jaqueline', id: 102, includes_J: true}
 {name: 'Jessica', id: 105, includes_J: true}
]

The filteredStudentsJ array is also now in alphabetical order due to this tiny yet powerful piece of code:

array.sort((a,b)=>a.name>b.name?1:-1)

Huh? .sort is being asked to compare (in this case) the name key of a pair of objects within the array. We want ascending order in this case so we are using greater than (>) for our comparison. This comparison is used in a ternary statement that is applied to the index. If the value of a is greater than b, you add one to its index, if not you subtract 1 from its index. .sort then repeats the process through the array until no more sorting can be done.

Phew, now we're ready to take roll.

Viewing HTML Source Code On iPhone and iPad

Jay Setlock — Thu, 04 Aug 2022 15:55:00 +0000

As a new software engineering student I noticed a limitation when trying to test out my webpages on either my iPhone or iPad, there is no built in functionality to "view source page source". Sure, there are third party apps that do this plus much more but I just wanted a built in option right in my Safari mobile browser.

With a little googling I found there is a way and it starts with an app that every Apple device has called Shortcuts. You can use this app to build custom shortcuts that can be added to your browser actions. You can do a lot more with the Shortcuts app. (The gifs in this post were created using a shortcut!)

Once there hit the + in the top right corner to add a new shortcut. You can set the name, icon and icon color.

Then it is time to "Add Action" and search for and choose "Make HTML from Rich Text". Click the settings icon in the upper right and turn on "Show in Share Sheet". Add another action, search and choose "Quick Look".

All that is left to do now is test it out. Go to any webpage in Safari and hit the action button, then choose "View Source" and Voilà, source code!