DEV Community: Thomas Barrett

Discovering CSS Grid Layout - part 1 - Character Sheet beginning

Thomas Barrett — Tue, 02 Jun 2020 05:11:08 +0000

For a long time I put off learning CSS Grid Layout. I know flex-box and am able to achieve my layout goals with it, and therefore had no pressing need for grid. This attitude is one of the many mental traps I lay for myself, and so this morning I determined to recognize it and avoid slipping into it.

CSS-tricks served me well when learning flexbox so I turned to their guide for CSS-Grid.

I decided to try and recreate an RPG character sheet, as it relies on a structured layout, and I am likely to reuse the experience when I work on another planned future project.

A Grid layout consists of two layers, a parent and its children, just like with flexbox. You can have grids inside of grids, and even a flexbox inside of a grid. But at its simplest form the grid has two types of elements, the parent and its children. The parent container in css needs

display: grid;

This is going to allow all the other CSS Grid properties to be used on either the parent or children. For the character sheet I first wanted to establish a parent element that was centered on the page and filled the entire height.

In addition to the 'display' property there are two more necessary properties to place on the parent element 'grid-template-columns' and 'grid-template-rows'. These are going to establish your columns and rows. Syntax looks like this

grid-template-columns: [1st-grid-line-name] 1st-column-width [2nd-grid-line-name] 2nd-column-width [last-grid-line-name]

grid-template-rows follow the same syntax. If you don't put 'grid-line-names' in then grid will automatically give each line a positive and negative number (take a look at the CSS-Tricks Grid guide for a better explanation). I don't mind using the automated numbers myself so you won't see them in my code examples.

I created a character sheet div and used the following CSS to center it and take up the entire height.

body { display: grid; grid-template-columns: 1fr 18fr 1fr; grid-template-rows: 1fr; }

fr? What is fr? Oh right, I'm supposed to be the one explaining. fr is a unit that will allow you to set a size as a fraction of the remaining free space of a container. The key is the 'remaining'. If you set one of the columns to a non-flexible width (such as px) it will break up what is remaining into the fractional parts. In the above example I have not set any non-flexible widths, but I am breaking the entire width of the body into 20 parts (1 + 18 + 1) and assigning the first column to have 1/20 (5%), the middle column to have 18/20 (90%), and the third and final column to have the last 1/20 (5%).

For my rows I am establishing a single row which will take up 1/1 (100%) of the body's height.

Now all I need to do is tell the character sheet (body's child) div to occupy the middle column. but how? The 'grid-area' property. Now there are a few different properties you can use to set a child's area of the grid, but I like that grid-area clearly defines the four lines that will contain each child element. Here's the syntax

grid-area: row-start / column-start / row-end / column-end;

This is where you need the grid line names. Again I just use the auto generated ones (numbers starting at 1). Here is my code on the child of body (character-sheet) placing it inside the middle column, remember I only established one row.

.character-sheet { grid-area: 1 / 2 / 2 / 3; }

There we go, one character sheet centered with CSS grid. Well, sort of, really its just a div I named character sheet, I better get something inside. Now the process starts all over. A new grid needs to be established with character sheet as the parent, and each of the sections as children. Tune into part 2 to see how it's done.

-Thomas Barrett

Simple Math Adventure Game with PixiJS

Thomas Barrett — Sat, 30 May 2020 06:56:47 +0000

Last weekend I wanted to learn more about animations, specifically with the intent to build a game. A quick google search of "best framework for javascript game" brought up a few options, but Pixi.js caught my eye. A fleeting memory of the name crossed my mind and so I followed the link.

I quickly found a list of tutorials and jumped into CJ Gammon's youtube videos. After scratching my head a bit I decided to try kittykatattack's tutorial instead. I followed along, taking in a little at a time, and then trying it out in my own way, and going back to the videos when I needed them.

My experience with animations is limited so I can't make any comparisons, but I was pleased by what I could accomplish with Pixi rather quickly. Within a couple hours (over 2 nights) I had a promising start to a choose your own adventure type game, but I recalled that this type of game would lean heavily on the story, and in the end my aim was to strengthen my coding ability. While I was contemplating where to further my experiment and showing off to my wife she said something that stuck, "It looks like a kid's game." At first I was a little annoyed (that pesky ego of course), but once that moment passed ("moment" === "day") and I took another look I saw what she meant. The icons and artwork I had found all had a soft, welcoming, look and an idea began to emerge.

Since the beginning of school shutdown I struggled to juggle my work and homeschooling. This here might be an opportunity to combine the two. I set off to build a dungeon adventure game that incorporated basic math. Over this last week I spent my nights working on it and feel content with the result. There were plenty of bugs (and still are) but I was able to produce a working game that allows players to choose their adventurer and then solve addition equations to earn action points. Adventurers use the action points to move through a dungeon while avoiding arrows until they reach the other side.

Here is the github repo
And deployed site

There is still much to do (especially in organizing and commenting my code), but if you see any glaring issues or just have a suggestion please let me know.

-Thomas Barrett

Blog Intent

Thomas Barrett — Wed, 27 May 2020 20:59:40 +0000

As I am new to web development, I reached out for help in my journey yesterday to Sam Julien. The focus of the conversation was my portfolio, but in general I sought advice in my efforts to land that first tech job. During the conversation Sam suggested I start a blog. Nothing special, just a written record of my journey that I can share and reflect on. Today marks the beginning of that record.

My intent will be to write every other day, at least, about anything related to my journey. That may be about learning Pixijs, or how to improve my resume, or a new person I met and what I took from the interaction.

I imagine this will reach a rather small audience, initially, but I do ask anyone interested to help by holding me accountable. If I have not posted recently, please ask my why. Too often I convince myself that I am wasting time because I see no results. The problem is that often means I stop spending time on things that matter before the results are visible, but that does not mean they are not present.

-Thomas Barrett