Forem: Borna Šepić

Why Shopify? - dev edition

Borna Šepić — Fri, 30 Oct 2020 12:09:31 +0000

At over 820,000 merchants (source) Shopify is becoming the go-to solution for upcoming e-commerce brands.

So why should you, as a developer, care about it?

Sutton’s law #1: Go where the money is

As mentioned Shopify currently has more than 500,000 active store owners, accounting for more than $200 billion (yes with a B) in platform sales.

That's 500,000 potential customers in need of improvements / features / additions to their websites. With the average hourly rate for Shopify developers being between $50-200/hour depending on your capabilities.

To get some things clear, is Shopify the most exciting platform to work on in 2020?

Not really no.

Unless you're building custom apps or headless stores, you'll mostly be writing HTML/CSS/JS (or jQuery) creating custom themes / improving existing ones.

Is it boring? Not by a longshot.

There is always something new being added to the platform, or your client has a brilliant new idea to implement that doesn't really work with Shopify, but with their extensive API, there are very few things you won't be able to achieve.

Also, I don't know about you, but seeing your customers' conversion rate going up as a result of your work/idea is one of the best feelings you can have as a freelancer.

I've been working almost exclusively with Shopify for the better part of the last three years, and it's still forcing me to learn something new almost every week.

So feel free to reach out if you have any questions or just want to chat, I'll also be creating some more Shopify related content in the upcoming weeks, so stay tuned for that 😊

PS. If you're already working with Shopify, or starting to get into it, I've recently created a builder for Shopify Schema -> Scheemy, cause nothing is worse then writing JSON by hand 😄

Tic Tac Toe with TypeScript - Part 1

Borna Šepić — Thu, 23 Jan 2020 12:13:34 +0000

Why TypeScript?

If you're like me and Javascript is the only programing language you've ever learned you might be a bit repulsed to get into Typescript, at the end of the day your apps work just fine, why would you need to add another layer of complexity to it?

Well, the short answer is... It makes you a better developer.
It can also drastically reduce the number of run time bugs you encounter and make the developer experience far better and more efficient (once you get into it).

As always there is a bit of a learning curve to it, and it can really be frustrating sometimes to have your trusted IDE scream at you on every save. But it's a worthwhile tradeoff in the long run.

So without further ado, let's convert a small app from regular Javascript into its typed superset that is Typescript 🚀

The setup

For our application, we'll use the Tic Tac Toe we've written in the last article.

If you don't have it already you can grab it from Github here.

First things first, we'll need to install Typescript.
You'll first want to position your terminal at the root of the project and run npm init -y. This will create our package.json file (without asking too many questions 😇) and allow us to install typescript via NPM.

Next up we'll run npm i typescript to actually install Typescript and all it needs.

I'd recommend moving our project files (index.html, styles.css, script.js) into a new folder, just to keep things nice and clean, I've named the folder src but that's totally up to you.

This is how the project should look like at this point:

You'll also want to run tsc --init. This will generate our tsconfig.json file to allow us to have more control over the TS compiler.

Before continuing you'll want to change the // "lib": [], line in the config file (line 7) and replace it with "lib": ["es6", "dom", "es2017"],. This will allow us to use some more advanced features of JavaScript in our code.

To actually get started all we need to do is change our script.js into script.ts. And run tsc script.ts (this will compile our TypeScript file into good old regular JavaScript).
You've probably gotten an error compiling your script.ts file, but that's expected.

Please note we are still only including the script.js file in our index.html. Since "TypeScript is a typed superset of JavaScript", your browser will never actually run TypeScript. So it a nutshell your users won't notice in any way whether your app is written in TypeScript or not (except for the lack of bugs, and a 😃 on your face).

Actual TypeScript

Now let's get to the fun part and write ourselves some TypeScript! We'll go through the script line by line and convert what we can to TypeScript.
To keep things nice and "short", for this article we'll just go through the initial variables and finish the app in another one.

In the previous tutorial, we've created some variables that are storing our game state. Let's first take a look at them.

const statusDisplay = document.querySelector('.game--status');

let gameActive = true;
let currentPlayer = "X";
let gameState = ["", "", "", "", "", "", "", "", ""];

const winningMessage = () => `Player ${currentPlayer} has won!`;
const drawMessage = () => `Game ended in a draw!`;
const currentPlayerTurn = () => `It's ${currentPlayer}'s turn`;

We first have a document.querySelector method that returns an element with the class of 'game--status'. By doing a quick search on MDN we can see that the .querySelector returns an Element.
So we'll add a type to our statusDisplay variable to let TS know it should contain and Elemenet, like this:

const statusDisplay: Element = document.querySelector('.game--status');

You should be getting an error warning here saying type 'Element | null' is not assignable to type 'Element'.

When you think about it this error makes sense, we have no guarantee that the element with a class of "game--status" exists in our DOM. If this was a bigger app we might want to handle this case just to future proof our code but since it's a small application and we know that that element will always be there and we can tell TS that it will never return null by adding an exclamation point to the end, like this:

const statusDisplay: Element = document.querySelector('.game--status')!;

Next up we have our gameActive variable. Since we know this will only contain a boolean value (either true or false) we can assign the type of boolean to our variable.

let gameActive: boolean = true;

After that we have the currentPlayer variable. This technically does only contain a string, and there would be nothing wrong with just writing something like:

let currentPlayer: string = "X";

But because we have only two distinct cases here (the variable can only be "X" or "O", we can use a more appropriate functionality of TypeScript here called Enum. So the end product should look something like this:

enum PlayerSigns {
    X = "X",
    O = "O"
}
let currentPlayer: PlayerSigns = PlayerSigns.X;

We have created an Enum that will hold our player signs, and assigned the value of our currentPlayer variable to that enum.

After that we have our gameState variable, where... we hold our game state (😎).

let gameState = ["", "", "", "", "", "", "", "", ""];

We can see that this will always be an array of strings, so we can pass that on to our comipler like this:

let gameState: string[] = ["", "", "", "", "", "", "", "", ""];

And lastly, we have our three functions that return our game status messages:

const winningMessage = () => `Player ${currentPlayer} has won!`;
const drawMessage = () => `Game ended in a draw!`;
const currentPlayerTurn = () => `It's ${currentPlayer}'s turn`;

Since they are all simple functions, without any inputs, that return strings we can use the same types for all of them.

const winningMessage: () => string = () => `Player ${currentPlayer} has won!`;
const drawMessage: () => string = () => `Game ended in a draw!`;
const currentPlayerTurn: () => string = () => `It's ${currentPlayer}'s turn`;

It can seem a bit annoying at times to have to write all the types yourself, but it's another one of those things that become second nature after a brief adjustment period.

Hopefully, by the end of this series, you'll be convinced on the benefits of using TypeScript for your project.

As always, thanks for reading, and until the next one ✌️

Tricking the human eye with CSS animation steps

Borna Šepić — Mon, 13 Jan 2020 16:45:24 +0000

This article was inspired by the amazing Drew Conley the author behind the Danger Crew, a video game made with the technologies we all love (HTML, JS, CSS).

I listened to a podcast episode he appeared in on Syntax where he talked about the game and the processes behind it. One of the things that intrigued me the most was the way they created the animations for the characters, basically, it's just an image and some CSS animation magic... Could it really be that "simple"?

Well... Yes it is

In case you have no idea what I'm talking about, here's a quick rundown!

The image

Wait what?

So let's break down what we have here (please note I'm far from a graphics designer, and I really wanted to make this look better but... there really is a maximum number of hours you can spend adding shapes in Figma to an image before you lose your sh**).

Basically what we have here are are the four frames we'll be showing in quick succession to trick the human eye into seeing an actual animation.

Don't believe me? Let's write some HTML & CSS and see 😏

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css"/>
    <title>CSS Step Animation</title>
</head>
<body>
    <div class="car-container"></div>
</body>
</html>

All we will do here is include our stylesheet and add a container div which will contain our animation.

CSS

This is where the magic happens 🎉

.car-container {
    height: 87px;
    width: 210px;
    background-image: url("./car.png");
    animation: play 0.8s steps(4) infinite;
}

@keyframes play {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: -840px 0px;
    }
}

Let's first break down the properties we've assigned to the .car-container class.

We've set the height property to match the actual height of the image.
We've also set the background-image to the before provided image, feel free to download it or include it via a link.

So why is the width not set to the 840px (the width of the image)?
Because we want to only show one "frame" at a time, this is why we have set the .car-container width to 210px (1/4 of the total width).

Before taking a look at the animation property, let's first see what we are doing in the definition of the play animation.

If you're not familiar with keyframes, essentially what's going on, we are defining an initial state for a CSS property (from). And giving it an end state (to). This allows us to control the intermediate steps in a CSS animation sequence. If you'd like to dive into it more here's an excellent article at css-tricks.

All we are changing here is the background-position property, basically, we are moving the image to the left.

So how does any of this actually work?
The reason this all actually works is the steps argument in our animation property.
If you've been following along through your IDE (or in Notepad 😱), I'd recommend stopping here and removing the steps(4) from the animation property to see what happens.

Steps allows us to specify how many keyframes an animation uses to get from point a (from) to point b (to).
Since we only have four frames in our image, we will only go through four steps before repeating the circle.

End result:

So it turns out... It really is that simple

Huge shoutout to Drew Conley and the Syntax podcast for creating awesome content!

Pure and Simple - Tic Tac Toe with Javascript

Borna Šepić — Wed, 08 Jan 2020 22:15:28 +0000

Have you wanted to build something fun and simple to practice your Front End skills but the thought of building another TODO application makes you want to quit this wonderful path you’ve started on?

You can find the completed project on my Github here.

Well look no further, today we’ll be building a simple (drumroll) Tic Tac Toe game. We’ll cover some basics like using CSS grid, query selectors and structuring our game flow and logic.
Let’s first take a look at the end product

The big question then… Where do we start?
Well, usually the best way to start would be to break down the application into smaller, easily digestible pieces.

First, let’s break down the user interface:

title
3x3 grid
- the grid should be clickable
- the grid cells should have the correct player sign displayed an information display
should display a message informing the current player it’s their turn
- should show us who won the game
- should show us if the game ended in a draw
restart button
- will restart the entire game

Next, let’s break down the game flow for a cell click:

needs to track any clicks that happen on our cells
needs to check if a valid move has been made
- needs to make sure nothing happens if an already played cell has been clicked
we should update our game state
we should validate the game state
- check if a player has won
- check if the game ended in a draw
either stop the game or change the active player, depending on the above checks
reflect the updates made on the UI
rinse and repeat

That’s it, nothing special or overly complicated but still an excellent opportunity to practice and improve.

Let’s get to the fun part and build something!

Folder Structure

We’ll start by building the user interface so we have something to look at while building the game logic.
As I mentioned this is a simple game so there is no need for complicated folder structures.

You should have three files in total:

index.html (will hold our UI structure and import the other files we need)
style.css (to make our game look halfway decent)
script.js (will hold our game logic, and handle everything else we need)

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <h1 class="game--title">Tic Tac Toe</h1>
        <div class="game--container">
            <div data-cell-index="0" class="cell"></div>
            <div data-cell-index="1" class="cell"></div>
            <div data-cell-index="2" class="cell"></div>
            <div data-cell-index="3" class="cell"></div>
            <div data-cell-index="4" class="cell"></div>
            <div data-cell-index="5" class="cell"></div>
            <div data-cell-index="6" class="cell"></div>
            <div data-cell-index="7" class="cell"></div>
            <div data-cell-index="8" class="cell"></div>
        </div>
        <h2 class="game--status"></h2>
        <button class="game--restart">Restart Game</button>
    </section>
<script src="script.js"></script>
</body>
</html>

Aside from the usual boilerplate, we have included our style sheet in the <head> element, we do this to make sure the style sheet is always loaded before the actual HTML.
We have also included our script.js file just above the closing </body> tag to make sure that the javascript is always loaded after the HTML.

We will hold the actual game cells in a wrapping div to allow us to make use of the CSS grid. Also, each cell has a “data-cell-index” attribute to allow us to easily track with cell has been clicked.

We also have an <h2> element where we will display the beforementioned game information and a restart button.

CSS

body {
    font-family: "Arial", sans-serif;
}
section {
    text-align: center;
}
.game--container {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: 306px;
    margin: 50px auto;
}
.cell {
    font-family: "Permanent Marker", cursive;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 0 1px #333333;
    border: 1px solid #333333;
    cursor: pointer;
line-height: 100px;
    font-size: 60px;
}

I wanted to keep the CSS for the application down to a minimum so the only thing I’d draw your attention to are the styles for the “.game — container” since this is where we implement our CSS grid.

Since we want to have a 3x3 grid we make use of the “grid-template-columns” property setting it to repeat(3, auto);

In a nutshell, this splits the contained divs (cells) into three columns and letting the cells automatically decide their width.

JavaScript

Now we get to the fun part!
Let’s kick our JS off by structuring some pseudo-code to break it down into smaller pieces using our before written game logic template

/*
We store our game status element here to allow us to more easily 
use it later on 
*/
const statusDisplay = document.querySelector('.game--status');
/*
Here we declare some variables that we will use to track the 
game state throught the game. 
*/
/*
We will use gameActive to pause the game in case of an end scenario
*/
let gameActive = true;
/*
We will store our current player here, so we know whos turn 
*/
let currentPlayer = "X";
/*
We will store our current game state here, the form of empty strings in an array
 will allow us to easily track played cells and validate the game state later on
*/
let gameState = ["", "", "", "", "", "", "", "", ""];
/*
Here we have declared some messages we will display to the user during the game.
Since we have some dynamic factors in those messages, namely the current player,
we have declared them as functions, so that the actual message gets created with 
current data every time we need it.
*/
const winningMessage = () => `Player ${currentPlayer} has won!`;
const drawMessage = () => `Game ended in a draw!`;
const currentPlayerTurn = () => `It's ${currentPlayer}'s turn`;
/*
We set the inital message to let the players know whose turn it is
*/
statusDisplay.innerHTML = currentPlayerTurn();
function handleCellPlayed() {

}
function handlePlayerChange() {

}
function handleResultValidation() {

}
function handleCellClick() {

}
function handleRestartGame() {

}
/*
And finally we add our event listeners to the actual game cells, as well as our 
restart button
*/
document.querySelectorAll('.cell').forEach(cell => cell.addEventListener('click', handleCellClick));
document.querySelector('.game--restart').addEventListener('click', handleRestartGame);

We have also outlined all the functionalities we will need to handle our game logic, so let’s go and write our logic!

handleCellClick

In our cell click handler, we’ll handle two things.
First off we need to check if the clicked cell has already been clicked and if it hasn’t we need to continue our game flow from there.
Let’s see how this looks in action:

function handleCellClick(clickedCellEvent) {
/*
We will save the clicked html element in a variable for easier further use
*/    
    const clickedCell = clickedCellEvent.target;
/*
Here we will grab the 'data-cell-index' attribute from the clicked cell to identify where that cell is in our grid. 
Please note that the getAttribute will return a string value. Since we need an actual number we will parse it to an 
integer(number)
*/
    const clickedCellIndex = parseInt(
      clickedCell.getAttribute('data-cell-index')
    );
/* 
Next up we need to check whether the call has already been played, 
or if the game is paused. If either of those is true we will simply ignore the click.
*/
    if (gameState[clickedCellIndex] !== "" || !gameActive) {
        return;
    }
/* 
If everything if in order we will proceed with the game flow
*/    
    handleCellPlayed(clickedCell, clickedCellIndex);
    handleResultValidation();
}

We will accept a ClickEvent from our cell event listener. That will allow us to track which cell has been clicked and get its’ index attribute more easily.

handleCellPlayed

In this handler, we’ll need to handle two things. We’ll update our internal game state, and update our UI.

function handleCellPlayed(clickedCell, clickedCellIndex) {
/*
We update our internal game state to reflect the played move, 
as well as update the user interface to reflect the played move
*/
    gameState[clickedCellIndex] = currentPlayer;
    clickedCell.innerHTML = currentPlayer;
}

We accept the currently clicked cell (the .target of our click event), and the index of the cell that has been clicked.

handleResultValidation

Here comes the core of our Tic Tac Toe game, the result validation. Here we will check whether the game ended in a win, draw, or if there are still moves to be played.
Let’s start by checking if the current player won the game.

const winningConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];
function handleResultValidation() {
    let roundWon = false;
    for (let i = 0; i <= 7; i++) {
        const winCondition = winningConditions[i];
        let a = gameState[winCondition[0]];
        let b = gameState[winCondition[1]];
        let c = gameState[winCondition[2]];
        if (a === '' || b === '' || c === '') {
            continue;
        }
        if (a === b && b === c) {
            roundWon = true;
            break
        }
    }
if (roundWon) {
        statusDisplay.innerHTML = winningMessage();
        gameActive = false;
        return;
    }
}

Take a minute to break this down before continuing as an exercise.

Values in arrays for our winningConditions are indexes for cells that need to be populated by the same player for them to be considered a victor.

In our for-loop, we go through each one and check whether the elements of our game state array under those indexes match. If they do match we move on to declare the current player as victorious and ending the game.

Of course, we need to handle the other two cases as well. Let’s first check if the game has ended in a draw. The only way the game can end in a draw would be if all the fields have been filled in.

const winningConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];
function handleResultValidation() {
    let roundWon = false;
    for (let i = 0; i <= 7; i++) {
        const winCondition = winningConditions[i];
        let a = gameState[winCondition[0]];
        let b = gameState[winCondition[1]];
        let c = gameState[winCondition[2]];
        if (a === '' || b === '' || c === '') {
            continue;
        }
        if (a === b && b === c) {
            roundWon = true;
            break
        }
    }
if (roundWon) {
        statusDisplay.innerHTML = winningMessage();
        gameActive = false;
        return;
    }
/* 
We will check weather there are any values in our game state array 
that are still not populated with a player sign
*/
    let roundDraw = !gameState.includes("");
    if (roundDraw) {
        statusDisplay.innerHTML = drawMessage();
        gameActive = false;
        return;
    }
/*
If we get to here we know that the no one won the game yet, 
and that there are still moves to be played, so we continue by changing the current player.
*/
    handlePlayerChange();
}

Since we have a return statement in our roundWon check we know that, if a player has won that round, our script will stop there. This allows us to avoid using else conditions and to keep our code nice and compact.

handlePlayerChange

Here we will simply change the current player and update the game status message to reflect the change.

function handlePlayerChange() {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    statusDisplay.innerHTML = currentPlayerTurn();
}

We are using a ternary operator here to assign a new player, you can learn more about it here. It really is awesome!

The only thing left to do would be to connect our game restart functionality.

handleRestartGame

Here we will set all our game tracking variables back to their defaults, clear the game board by removing all the signs, as well as updating the game status back to the current player message.

function handleRestartGame() {
    gameActive = true;
    currentPlayer = "X";
    gameState = ["", "", "", "", "", "", "", "", ""];
    statusDisplay.innerHTML = currentPlayerTurn();
    document.querySelectorAll('.cell')
               .forEach(cell => cell.innerHTML = "");
}

Conclusion

Basically, that’s it!
You have a functioning playable Tic Tac Toe game (* self-high five*)

Of course, there are a lot more things we could do here, like make the game actually multiplayer, so you can play with a friend that’s on the other side of the world. Or why not write an algorithm that will play the game with you? Maybe try writing the app in a framework of your choice to see how it compares to vanilla JavaScript?

There are a lot of possibilities to explore and grow here, let me know which one you’d like the most and I’d be more than happy to make another one of these guides!

As always you can find the completed project on my Github here.