DEV Community: Vladimir Schneider

Writing Conway's Game of Life on JavaScript

Vladimir Schneider — Mon, 25 Dec 2023 15:44:06 +0000

Hi there 👋🏼,

In this post I'm going to share with you how I created the Game of Life using JavaScript (again).

Two years ago I wrote my initial version of Game of Life. However, in this new iteration, I aim to introduce improvements based on the knowledge and experience I have gained since then.

To give you a glimpse into my previous work, you can check out my earlier article on Conway's Game of Life.

In addition, I will guide you through the process of recreating this fascinating game and explain how I approached it.

I hope you'll find this article helpful and inspiring. Let's embark on an exciting journey into the captivating realm of the Game of Life!

Conway's Game of Life

The Game of Life devised British mathematician John Horton Conways in 1970. It is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves

read more on wiki

The game follows four rules that govern its progression. Let's delve into the rules:

Any live cell with fewer than two live neighbours dies, as if by underpopulation.
Any live cell with two or three live neighbours lives on to the next generation.
Any live cell with more than three live neighbours dies, as if by overpopulation.
Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

These rules dictate the evolution of the game and determine the fate of each cell in each generation.

For this challenge I'm going to use a canvas for drawing board and cells. To process, please ensure that you have a canvas element on your web page.



<canvas id="game-board"></canvas>

If you nothing know about Canvas API for continue reading this article I recommend to study this on MDN. In short:

The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element

read more on MDN

I decided to use ES6 modules and vanilla JavaScript for this game project. I made a conscious choice to utilize ES6 classes instead of functions this time around.

However, feel free to explore ES6 modules or any existing boilerplate that suits your needs. You could even opt TypeScript for writing the project to gain a different experience or prefer functions over classes.

To use export and import keywords in your JavaScript files as ES6 modules you need to include them in your HTML document just like regular JavaScript files. However, there is one key difference. You should use the type attribute with a value module in the HTML attribute.



<canvas id="game-board"></canvas>

<!-- do this for each module -->
<script src="./main.js" type="module"></script>

As in the previous article, I will begin by writing the code with the definitions of constants. These constants will be used to specify the size of the cell, the width and height of the game board, as well as the colors for the cell and the board.



export const CELL_SIZE = 10

export const BOARD_WIDTH = document.documentElement.offsetWidth
export const BOARD_HEIGHT = document.documentElement.offsetHeight

export const CELL_COLOR = "rgb(0, 255, 0)"
export const BOARD_COLOR = "rgb(0, 0, 0)"

By utilizing constants I can easily configure my game, as you already aware.

In the previous article, I followed a different approach compared to this one. I described the methods of one class and then proceeded to another class to do the same. However, in this article, I will be guiding you through the process of describing and evolving the game together.

The first step is to obtain the canvas element. In the main.js you can retrieve the canvas.



const canvas = document.getElementById("game-board")

Let's consider the game processes. Based on the game rules you need to have an initial state of the game. To achieve this, you will require a game board and cells. In the main.js file you can initialize and launch the game by following these steps: draw background of the game board, initialize cells and finally launch the game.

How could you guess I was referring to three classes and their methods. Let's unveil the details! The following classes are essential for our game:

Game class. This class handles the drawing and management of cells and the game board.
Board class. With this class, we can receive game parameters and draw the game board
Cell class. This class is responsible for drawing current and next generation of cells.

To start the game, all we need is an instance of the Game class, and we can initialize it whenever we're ready.

Since we already have the canvas element, let's take care about of the rest.



import { Game } from "./modules/game.mjs"

const canvas = document.getElementById("game-board")

const game = new Game(canvas)

game.initialize()

This sets the stage for the most challenging part of our adventure. I hope you continue this journey with me to the end.

Intro

For a wile I pondered where to begin I've settled on describing the Board class first. Not only because this class is simpler, but also because it forms the fundamental layer of our game.

class Board

I use private properties for constants within classes that are exclusively used within those classes. You will see this in each of them.

In brief about Bord class:
– it features a method for drawing the game board
– it includes getters for board size and canvas context

We've already defined constants for cells size and board color, utilizing private properties. In the drawBackground method we simply draw the background using the width and height of the context along with the board color from the private property.

For the size getter we return the number of cells at the x and y coordinates and the cell size. This is achieved by dividing the board sizes by cell size from the constant.

Next, for the context getter we should just return canvas context, nothing more.

Now, let's lay our cards on the table!



import {
    CELL_SIZE,
    BOARD_COLOR
} from './constants.mjs'

export class Board {
    #cellSize = CELL_SIZE
    #backgroundColor = BOARD_COLOR

    constructor(canvas) {
        this.canvas = canvas
        this.ctx = this.canvas.getContext("2d")
    }

    drawBackground() {
        const { width, height } = this.canvas

        this.ctx.fillStyle = this.#backgroundColor
        this.ctx.fillRect(0, 0, width, height)
    }

    get size() {
        const { width, height } = this.canvas

        return {
            cellNumberX: Math.ceil(width / this.#cellSize),
            cellNumberY: Math.ceil(height / this.#cellSize),
            cellSize: this.#cellSize,
        }
    }

    get context() {
        return this.ctx
    }
}

class Cell

The Cell class can only draws the cell but also determines whether the cell is alive or death. In fact, this class encapsulates all rules of the game in only one little method!

In brief about Cell class:
– it features a method to decide whether the cell is alive or death
– it features a method to draw the cell depending of its state
– it comprises a private position getter and a public alive getter
– it includes setters to set the alive and neighbor count

The key details is that the x and y coordinates stored in the Game class. The Cell class receives the context and cell size from the Board class instance getter.

Every game iteration we launch nextGeneration method to determine whether the cell alive or dead and the drawCells method to draw the cell.

The position getter just holds an array to destructure all these values for the fillRect context method used in cell drawing.

The setter and getter for the alive simply set and get the private property, just like the neighbors setter.



export class Cell {
    #alive = true
    #neighbors = 0

    constructor(ctx, x, y, cellSize) {
        this.ctx = ctx

        this.x = x
        this.y = y
        this.cellSize = cellSize
    }

    nextGeneration() {
        if (!this.#alive && this.#neighbors === 3) {
            this.#alive = true
        } else {
            this.#alive = this.#alive && (this.#neighbors === 2 || this.#neighbors === 3)
        }
    }

    draw() {
        if (this.#alive) {
            this.ctx.fillStyle = CELL_COLOR
            this.ctx.fillRect(...this.#position)
        }
    }

    get #position() {
        return [
            this.x * this.cellSize,
            this.y * this.cellSize,
            this.cellSize,
            this.cellSize
        ]
    }

    set alive(alive) {
        this.#alive = alive
    }

    get alive() {
        return this.#alive
    }

    set neighbors(neighbors) {
        this.#neighbors = neighbors
    }
}

class Game

So, now, let's bring it all together.

The first step I suggest is to combine all our classes and classes and their methods without writing introducing new logic.

What do we have on our hands?

We already know that knowledge about the cells is stores in the Game class; let's use a private property for it. In fact, it will be the only one private property in this class.

First, initialize everything. We should obtain a board instance to draw it and use the board's getters size and context. We will be use the class constructor for this, also setting the canvas size.



export class Game {
    #cells = []

    constructor(canvas) {
        this.canvas = canvas
        this.board = new Board(this.canvas)

        this.canvas.width = BOARD_WIDTH
        this.canvas.height = BOARD_HEIGHT
    }
}

As a quick remember, the Game class should have the initialize method. Just do it and let's move on.



export class Game {
    // ...

    initialize = () => {}
}

At the point, we've successfully implemented numerous methods for drawing and managing our cells. However, a crucial piece missing – we don't have cells yet! Let's address this gap!

The initializeCells method will iterate over every cell, push it to our #cells, set the cell's alive status randomly and then draw it!

In the board we already have a size getter to obtain x and y dimensions of this board. We will use it for iteration.



export class Game {
    // ...

    initializeCells = () => {
        for (let i = 0; i < this.board.size.cellNumberX; i++) {
            this.#cells[i] = []

            for (let j = 0; j < this.board.size.cellNumberY; j++) {
                this.#cells[i][j] = new Cell(this.board.context, i, j, this.board.size.cellSize)
                this.#cells[i][j].alive = Math.random() > 0.8
                this.#cells[i][j].draw()
            }
        }
    }
}

Now that we have the cells and can to operate with them, in the updateCells method, we will iterate over each cell twice. The first iteration is to calculate and set all neighbors of the cell, and the second iteration to draw new state.

Each cell already has a setter neighbors for the first iteration and the methods we need for the second iteration: nextGeneration and draw too.

Calculation how many neighbors a cell has may seem easy, but it's a signification piece of logic, so I've moved it to another method called updateCellNeighbors.



export class Game {
    // ...

    updateCells = () => {
        for (let i = 0; i < this.board.size.cellNumberX; i++) {
            for (let j = 0; j < this.board.size.cellNumberY; j++) {
                this.updateCellNeighbors(i, j);
            }
        }

        for (let i = 0; i < this.board.size.cellNumberX; i++) {
            for (let j = 0; j < this.board.size.cellNumberY; j++) {
                this.#cells[i][j].nextGeneration()
                this.#cells[i][j].draw()
            }
        }
    }

    updateCellNeighbors = (x, y) => {
}

Up until now, we've defined methods, setters and getters but nothing was has been drawn yet. We don't have much left to complete our game. Now I want to describe last piece of our puzzle to be ready to write final method updateCellNeighbors.

The this.board.drawBackground and updateCells are called in another method called launch and calling it again using requestAnimationFrame.



export class Game {
    // ...

    initialize = () => {
        this.initializeCells()
        this.launch()
    }

    // ...

    launch = () => {
        this.board.drawBackground()

        this.updateCells()

        requestAnimationFrame(this.launch)
    }

    // ...
}

updateCellNeighbors

Let's take a moment to summarize and outline what else needs to be written. The last thing we need to be write is updateCellNeighbors.

First, we get a map of all neighbors of the cell be x and y.



export class Game {
    // ...

    updateCellNeighbors = (x, y) => {
        const neighborCoords = [
            [x, y + 1],
            [x, y - 1],
            [x + 1, y],
            [x - 1, y],
            [x + 1, y + 1],
            [x - 1, y - 1],
            [x + 1, y - 1],
            [x - 1, y + 1]
        ]
    }
}

Some coordinates might be out of the game board bounds. We can easily check this by verifying if the x coordinate less than 0 or if the x coordinate is more than this.board.size.cellNumberX. For the y is the same.



export class Game {
    // ...

    updateCellNeighbors = (x, y) => {
        // ...

        for (const coords of neighborCoords) {
            let [xCord, yCord] = coords;

            const xOutOfBounds = xCord < 0 || xCord >= this.board.size.cellNumberX
            const yOutOfBounds = yCord < 0 || yCord >= this.board.size.cellNumberY
        }
    }
}

The last thing we need to do to finish is to choose the neighbor cell, check if the cell is alive or dead, and count it. After this, set neighbors using cell's neighbors setter.



export class Game {
    // ...

    updateCellNeighbors = (x, y) => {
        let aliveNeighborsCount = 0

        // ...

        for (const coords of neighborCoords) {
            // ...

            const wrappedX = xOutOfBounds ? (xCord + this.board.size.cellNumberX) % this.board.size.cellNumberX : xCord
            const wrappedY = yOutOfBounds ? (yCord + this.board.size.cellNumberY) % this.board.size.cellNumberY : yCord

            if (this.#cells[wrappedX]?.[wrappedY]?.alive) {
                aliveNeighborsCount++
            }
        }

        this.#cells[x][y].neighbors = aliveNeighborsCount
    }
}

Congratulations! It's the end of our journey. You can run the game, make changes, improvements – just feel free with it.

Repo

Demo #1

Demo #2

Thank you 💛 dear reader

normalize data without normalizr

Vladimir Schneider — Thu, 22 Sep 2022 05:20:14 +0000

Hi there 👋🏼

This is a short post about how normalize data using native available right now.

If you using a normalizr you know what I mean.

I've a simple server response data

const data = [
    { id: 1, name: 'Apple', type: 'fruit' },
    { id: 2, name: 'Orange', type: 'fruit' },
    { id: 3, name: 'Tomato', type: 'vegetable' },
];

and I wanna get the entities and collection by attribute.

So, define it all.

const attribute = 'id';
const entities = [];
const collection = {};

Next step will be iterate data and write

data.forEach((item) => {
    entities.push(item[attribute]);
    collection[attribute] = item;
});

In final we have entities and collection and can handy to iterate and get date by iterable attribute.

🔍 How stick element to bottom of viewport on mobile

Vladimir Schneider — Tue, 09 Aug 2022 15:23:00 +0000

Hi there 👋🏼

Not so long ago I had a task – to fix position the button on the viewport bottom. I spent some time in Figma to draw very beautiful button to stick to bottom of viewport.

In the moment I wrote this

.beautiful-button {
    position: fixed;
    bottom: 0;
}

And...it worked!

I was happy of solved task and went to do another. Everything was fine until I insert field. When I click in and I saw keyboard and...my button disappeared. I was so sad.

So, maybe the problem is in the safe area? I try this

.beautiful-button {
    position: fixed;
    bottom: 0;
    bottom: calc(0 + env(safe-area-inset-bottom));
}

and this doesn't work too.

I thought that Safari is Safari and go research next.

The first solution that came to mind was calculate the height of the viewport

const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

and this doesn't work. Viewport height with keyboard and without is equal.

After googling and colleagues asking I knew about Visual Viewport API (https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API).

Turns out there is an API to get viewport size.

The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page. (MDN).

So, my solution will be to use this

window.visualViewport.height

You can use window.visualViewport to listen events

window.visualViewport.addEventListener('resize', resizeHandler);
window.visualViewport.addEventListener('scroll', scrollHandler);

And use e.target to get viewport's parameters.

That's all! My beautiful button is now in the position it should be.

Thank you for reading ❤️

Very simple way to render star rating

Vladimir Schneider — Sun, 03 Jul 2022 09:43:46 +0000

Hi there 👋🏼

That is easy way to create star-rating component on React. The component will not support submit rating, it's about visualization of rating using stars only.

I did split solution on two components: <Star /> and <StarRating />.

Start with <Star /> component. Let's describe component's rules:

Component can be on and off. It's about filled or empty star.
If the value is not binary (on/off) component should render partially filled star

It's our component conditions.

The component will be have only one props:



type Props = {
  // value from 0 to 1
  filling?: number;
};

Let's start with first, it's easy.



export const Star = ({ filling }: Props) => {
  if (typeof filling === 'undefined' || filling === 1) {
    return (
      <FilledStar />
    );
  }

  if (filling === 0) {
    return (
      <EmptyStar />
    );
  }

  //...

This is a binary story. Go to next.

I need overlap empty star using filled star. I use container for stars and doing each star absolutely positioned. Filled star will have overflow: hidden and using filling props I can change width of star to control visibility.



  //...

  const width = filling * 100 + '%';

  return (
    <div className={styles.star}>
      <div className={styles.fill} style={{ width }}>
        <FilledStar />
      </div>
      <div className={styles.empty}>
        <EmptyStar />
      </div>
    </div>
  );
};

Next I need StarRating component.

The component have one props too.



type Props = {
  value: number;
};

So, let's write a simple component which render five stars.



export const StarRating = ({ value }: Props) => (
  <div className={styles.rating}>
    {Array.from(Array(5)).map((_, index) => <Star />)}
  </div>
);

I think it's very easy. All that's left is understand when I should render filled star, empty and partial filled.

I should always render filled star if serial number of the star less or equal than rounded in down value.



if (starSerialNumber <= Math.floor(value) >=) {
  //...

And I should render empty star if serial number of the star more than rounded in up value.



if (starSerialNumber > Math.ceil(value) >=) {
  //...

When serial number of the star is equal rounded in up value I should render partial filled star.

The filling props calculated as:



const filling = value - index;

Fill StarRating component looks like this



export const StarRating = ({ value }: Props) => (
  <div className={styles.rating}>
    {Array.from(Array(5)).map((_, index) => {
      const starSerialNumber = index + 1;

      if (starSerialNumber <= Math.floor(value)) {
        return (
          <div key={starSerialNumber} className={styles.star}>
            <Star />
          </div>
        );
      }

      if (starSerialNumber > Math.ceil(value)) {
        return (
          <div key={starSerialNumber} className={styles.star}>
            <Star filling={0} />
          </div>
        );
      }

      const filling = value - index;

      return (
        <div key={starSerialNumber} className={styles.star}>
          <Star filling={filling} />
        </div>
      );
    })}
  </div>
);

Thank you that have read the post. Have a good day.

How I'm covering changes with tests

Vladimir Schneider — Tue, 14 Jun 2022 14:24:32 +0000

Hi there 👋🏼

This is my short note where I wanna talk How I'm covering changes with tests (or how I write tests for my code) and find out how are you doing this.

Questions which I ask myself after all changes:

What's kind of a change?

Answer options: feature/fix/improvement

So, next if is the feature then

Features

For feature you always should write new tests.

If the change is logic then write unit-tests and if the change is visual only then write snapshot tests.

Improvements and bugs

If after running tests you have broken tests fix its and if all tests pass it means that a broken thing could have a test – write a test to never break again.

Create a test

At last, let's talk about creating. Creating have three nodes: unit, snapshots and combined tests.

Full scheme

Thank you!

Part 1: How do custom Caret(cursor)

Vladimir Schneider — Sat, 18 Dec 2021 19:26:44 +0000

Hi there 👋🏼

If you wanna see this right now: DEMO and GitHub.

I work on a startup about managing To-Do lists and now my task is to create a custom caret for editing some text content of To-Do items.

This is my first try (spoiler: not successful).

I did not find articles about how to create custom caret and I hope that this article and my thinkings will be helpful for you.

I wanna say now that this is not yet a solved problem. This is for fun only.

So. Let's write a silly component before starting to write logic.

`<Caret />`

This is a very simple component.

I use createPortal for position caret on a page.

The component has coords props and height of caret.

export type Coordinate = number | null;

export type CaretProps = {
  coords: {
    x: Coordinate
    y: Coordinate
  }
  height: number | null
};

So If coords or height props equal null I return null and caret is not visible. In the end, the component look like that

export const Caret = ({
  coords: {
    x, y
  },
  height
}: CaretProps) => {
  if (x === null || y === null || height === null) {
    return null
  }

  return createPortal(
    <div
      className={cx('caret')}
      style={{
        transform: `translate3d(${x}px, ${y}px, 0px)`,
        height: height,
        backgroundColor: 'var(--color-system-blue-light)'
      }}
    />,
    // @ts-ignore
    document.getElementById('caret')
  )
}

`<Text />`

This component calls our hook when I going to write later.

const {
    handleClick,
    handleChange,
    handleBlur,
    currentText,
    coords: {
      x, y
    }
    height,
  } = useCaret(refNode, text);

The props of hook I pass to <div /> when containing currentText and the <Caret /> component.

To do <div /> editable I use contentEditable attribute.

But by default, I have a placeholder and I should not have the ability to edit a placeholder, so contentEditable is true if currentText is not null. But I should catch a focus in the field, so I set another attribute tabIndex={0}.

So the component look like that

const Placeholder = () => (
  <span className={cx('placeholder')}>
    Enter your To-Do
  </span>
);

export const TextListsWidget = ({ text }: TextListsWidgetProps) => {
  const refNode = useRef<HTMLDivElement>(null);

  const {
    handleClick,
    handleChange,
    handleBlur,
    currentText,
    height,
    coords: {
      x, y
    }
  } = useCaret(refNode, text);

  return (
    <div className={cx('wrapper')}>
      <div
        ref={refNode}
        className={cx('text')}
        onClick={handleClick}
        onBlur={handleBlur}
        onKeyDown={handleChange}
        tabIndex={0}
        contentEditable={currentText !== null}
        suppressContentEditableWarning
      >
        {currentText || <Placeholder />}
        <Caret
          coords={{
            x, y
          }}
          height={height}
        />
      </div>
    </div>
  )
};

`useCaret` hook

So, first I write constants with keys and for keys as ignore, backspace, and arrows keys

export const IGNORE_KEYS = [
  'Shift',

  'Control',
  'Alt',
  'Meta',
  'Escape',
  'Tab',
  'CapsLock',

  // Arrows
  'ArrowUp',
  'ArrowDown',
  'Enter',
];

export const BACKSPACE_KEY = [
  'Backspace'
];

export const ARROW_LEFT_KEY = [
  'ArrowLeft'
];

export const ARROW_RIGHT_KEY = [
  'ArrowRight'
];

The hook has two props: text node and text.

I going to follow some values: caretPosition, currentText, x, y and caret height.

I did useState hooks for this.

const [caretPosition, setCaretPosition] = useState<CaretPosition>(null);

const [currentText, setCurrentText] = useState(text);

const [x, setX] = useState<Coordinate>(null);
const [y, setY] = useState<Coordinate>(null);

const [height, setHeight] = useState<number | null>(null);

Next, I going to write handlers and start with handleClick.

First I need the function to get coords and height of caret when the user does click.

For this I use window.getSelection(). Next I get first node with getRangeAt(0) and next I get x, y and height with getBoundingClientRect to selected node.

I should remember about the user scroll. Content could be very long and users can have the scroll. I get only y scroll because I can not have y scroll.

So If the text does not exist I should have x equal offsetLift of the node.

So, getCoords function

const getCoords = (node: RefObject<HTMLDivElement>, text: string | null) => {
  const scrollTopSize = document.documentElement.scrollTop;

  const selection = window.getSelection();

  if (!selection) {
    return {
      x: null,
      y: null,
      height: null
    };
  }

  const {
    x, y, height,
  } = selection.getRangeAt(0).getBoundingClientRect();

  if (text === null || text === '') {
    return {
      x: node.current?.offsetLeft || 0,
      y: y + scrollTopSize,
      height
    };
  }

  return {
    x, y: y + scrollTopSize, height
  };
};

Let's write a first handler 🙌🏼

`handleClick`

By click, I should get coords and set our states x, y, height and set caretPosition for component. If the text does not exist I set caretPosition to zero.

const handleClick = useCallback(() => {
  const selection = window.getSelection();

  if (!selection) {
    return;
  }

  const coords = getCoords(node, currentText);

  setX(coords.x);
  setY(coords.y);

  setHeight(coords.height);

  if (currentText !== null && currentText !== '') {
    setCaretPosition(selection.getRangeAt(0).startOffset);
  } else {
    setCaretPosition(0);
  }
}, [node, currentText]);

`handleBlur`

This is the very simple handler. I should reset our states

const handleBlur = useCallback(() => {
  setX(null);
  setY(null);

  setHeight(null);
}, []);

`handleChange`

This is the very important handler and I think It may be not simple for you.

First I check If the pressed key is IGNORE KEY and if it is I do return.

If the pressed key arrow left or right I set caretPosition to caretPosition - 1 or caretPosition + 1.

Next If pressed key is backspace I get left by caretPosition substring - 1 and right substring and do setCurrentText(left + right).

If I do not find pressed key in my keys constant I calc left and right substrings and do left + e.key + right.

Full handler look like that

const handleChange = useCallback((e: any) => {
  e.preventDefault();

  const coords = getCoords(node, currentText);

  setX(coords.x);
  setY(coords.y);

  setHeight(coords.height);

  if (IGNORE_KEYS.includes(e.key)) {
    return;
  }

  if (ARROW_LEFT_KEY.includes(e.key)) {
    if (caretPosition !== null && caretPosition !== 0) {
      setCaretPosition(caretPosition - 1);
    }
    return;
  }

  if (ARROW_RIGHT_KEY.includes(e.key)) {
    if (caretPosition !== null && currentText !== null && currentText !== '' && caretPosition < currentText.length) {
      setCaretPosition(caretPosition + 1);
    }
    return;
  }

  if (BACKSPACE_KEY.includes(e.key)) {
    if (currentText === null || currentText === '') {
      return;
    }

    if (caretPosition === null || caretPosition === 0) {
      return;
    }

    const left = currentText.substring(0, caretPosition - 1);
    const right = currentText.substring(caretPosition);

    setCurrentText(left + right);

    if (caretPosition !== 0 && caretPosition !== null) {
      setCaretPosition(caretPosition - 1);
    } else {
      setCaretPosition(0);
    }

    return;
  }

  if (caretPosition === null) {
    return;
  }

  if (currentText === null || currentText === '') {
    setCurrentText(e.key);
    setCaretPosition(e.key.length);
    return;
  }

  const left = currentText.substring(0, caretPosition);
  const right = currentText.substring(caretPosition);

  setCurrentText(left + e.key + right);

  setCaretPosition(caretPosition + e.key.length);
}, [node, currentText, caretPosition]);

So each time when I change the caret position I should update x, y, and height on correct values. So I use the useEffect hook for this and a native Range class.

useEffect(() => {
  const range = new Range();
  const selection = document.getSelection();

  if (selection && selection.focusNode && caretPosition !== null) {
    try {
      range.setStart(selection.focusNode, caretPosition);
    } catch (e) {}

    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);

    const {
      x, y, height
    } = getCoords(node, currentText);

    setX(x);
    setY(y);

    setHeight(height);
  }
}, [caretPosition, currentText, node]);

In the end, I just return handlers and values to the user in the out.

return {
    handleClick,
    handleChange,
    handleBlur,
    currentText,
    height,
    coords: {
      x, y
    }
  };

I wrote a simple example for you. Welcome to the GitHub page and thank you.

In the next week, I going to write the second part about how you can do this very simple and more boilerplate.

Ways reset the last margin

Vladimir Schneider — Sun, 26 Sep 2021 19:51:00 +0000

For example, I have a To-Do list ul > li for short.

I wanna have a gap between each li. How can I do it?

Flex Gap

I can use display flex.

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Cons

IE doesn't support gap 😞

Reset the last margin

.todo-item {
  margin-bottom: 1rem;
}

.todo-item:last-child {
  margin-bottom: 0;
}

You can do it. It's old school and all browsers support this.

Without last margin with `:not`

.todo-item:not(:last-child) {
  margin-bottom: 1rem;
}

I think It is very simple.

Without first margin

I want to say thank you to my colleagues for this way.

.todo-item + .todo-item {
  margin-top: 1rem;
}

I love this. It is so simple and so beautiful!

Thank you!

Always and everywhere make Triple equals

Vladimir Schneider — Thu, 05 Aug 2021 13:30:18 +0000

Hi there 👋🏼

Today I realized that a triple equal does an additional check to compare types of operands.

I got excited at the moment and I go to write a benchmark to check it!

I wrote two funny and stupid functions for it

With double equal

const f1 = () => {
  const v = Math.random();
  if (v === '2') {
    return true;
  }
  return false;
};

And with triple equal

const f2 = () => {
  const v = Math.random();
  if (v == '2') {
    return true;
  }
  return false;
};

And after that, I run a benchmark and saw what I did not expect.

Average f1 is faster than f2 for 80%. WHAT?!

I rewrote functions and in equal replaced string '2' to number 2 and did run a benchmark again.

So that I saw that functions execution times do not have a lot of difference.

So. What conclusion can I do?

Javascript engine spends a lot of time on type conversion, but using triple equal does not do your code very slowly.

Thank you!

How much do you know about cookies?

Vladimir Schneider — Wed, 21 Jul 2021 11:22:12 +0000

Hi there. Today I wanna talk about a Cookie.

I know that very many developers are using a cookie but they are using set/get/delete a cookie with some package like js-cookie and they know about cookies a bit.

Set a Cookie

Start with what is cookies and why do you can want to use them.

Cookies are string which are stored in the browser and this is a part of HTTP protocol. Your browser sends cookies to a web server that does the web like personal space.

You can be working with cookies in JavaScript. You can call document.cookie in the console of a browser.

document.cookie is not variable or something else. This works like setter/getter. You can get cookies and write a cookie with this.

Write some cookie right now. You can do it in this browser's tab or any other tabs.

document.cookie = 'userName=Bill'

You see that cookie has a format like key=value. In fact, the cookie has options but I am going to talk about this next.

A cookie's value can be any string so that you should use encodeURIComponent. So you can use value with spaces and other symbols.

document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}'

The Cookie options

Let's talk about a cookie's options.

You can write an option with the cookie using ; separator like this

document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}; keyOfOption1=value; keyOfOption2=value;'

path

The options about which pages of a website can get cookies. The path must be absolute. By defaults to the current setter path.

domain

The domain where your cookie will be available. If you set another domain name it is not working but you can set a cookie with a subdomain and do available a cookie for the subdomain of your website.

`max-age` or `expires`

max-age and expires are synonyms.

max-age is the time in seconds from this moment.

expires is the date when your cookie will be deleted.

If neither max-age nor expires specified it will be expire at the browser has closed.

secure

Cookie with this option will be available only on the website by HTTPS protocol.

httpOnly

Cookie with these options sets web server. You cannot work with a cookie with this option. You cannot get/set/delete the cookie.

samesite

The option has some values.

strict

The cookie with same site=strict never sent in the request if you came from another domain.

lax

This soft variable of strict value. If you use one of safe methods your cookies will be sent or if your request from head level (for example request from iframe will not be sent).

Delete cookie

You could guess that if you set max-age as negative value of set expires as a past date you will delete the cookie. That is true.

I hope that I help you know about cookies more in the post that you knew early.

Thank you for reading the post ☺️

Useful resource https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Put element into fullscreen in JS

Vladimir Schneider — Sun, 04 Jul 2021 07:08:50 +0000

Hi there!

Today I studied How can I put an element into fullscreen mode and I want to share with you How do it ☺️

Primarily, you should know that It works only in events, so you should use request into fullscreen mode in the event function.

So that put container into fullscreen mode use it

const d = document.querySelector("#d")

d.requestFullscreen(options)
    .then(() => {})
    .catch((error) => {})

You see that it is not guaranteed that the element will be put into fullscreen mode.

So, element.requestFullscreen() returned Promise of undefined.

In options you can change navigationUI param on "hide" | "show" or "auto" (default value).

First, I create a function for get fullscreen method, because fullscreen in some browsers works with prefixes only.

function goIntoFullscreen(element) {
    if (element.requestFullscreen) {
        return element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
        return element.mozRequestFullScreen()
    } else if (element.webkitRequestFullscreen) {
        return element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
        return element.msRequestFullscreen();
    }
}

Next, You should exit out of fullscreen mode.

For exit out of fullscreen mode used by document.exitFullscreen. I created a function for it with some browser prefixes too.

function outOfFullscreen() {
    if(document.exitFullscreen) {
        document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
    }
}

After put into fullscreen will be available document.fullscreenElement. You can check it for the button event of something else. I wrote a simple check function for it

function isFullScreenMode() {
    return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
}

Funnily I created an example so that you can try live demo.

You can style your fullscreen into fullscreen mode and elements in use by :fullscreen and ::backdrop.

Finally, you can be listening fullscreen with fullscreenchange and fullscreenerror events.

GitHub repositories I starred

Vladimir Schneider — Wed, 23 Jun 2021 13:51:16 +0000

Hi there 👋🏼!

This is my TOP 5 starred repositories on GitHub.

React Developer ROADMAP

I love Roadmaps and first is react developer roadmap

https://github.com/adam-golab/react-developer-roadmap

I do not think that this roadmap actually for me because I think that TypeScript is required for example and I do not thining that a react developer needs BEM (in CSS) you need CSS modules, but do not BEM.

But in this repository, you can find useful utils for your development.

Real World projects on React

The next repository is real-world projects on react. This is what I needed when I beginning.

https://github.com/gothinkster/realworld

You can see how to use react and other utils in real-world projects. It is wonderful!

Fake data

This package you can need for your test dates.

https://github.com/Marak/faker.js

The repositories including generation for address components, images, names, and very many types of data.

Fingerprint

This packages generation user hash. You can detect it to detect the user in a browser. User hash in public and private windows is matched. Wow!

https://github.com/fingerprintjs/fingerprintjs

Frontend for beginners

And the last repository at the top is resources for beginner javascript developers. It lots of resources!

https://github.com/thedaviddias/Resources-Front-End-Beginner

Thank you 😊

Conway's Game of Life 🎮 on JavaScript

Vladimir Schneider — Mon, 07 Jun 2021 09:43:14 +0000

Hi, last night I was watching video on YouTube with title "Math Has a Fatal Flaw". I saw Conway's Game of Life there.

I think every programmer should write the game, but for 4 years of programming experience I have never written this 😔.

The Post about How did I write Conway's Game of Life on JavaScript.

Last night I thought that I cannot write this game and It was sad 😵‍💫 but I was able.

For start I define constants.

const START_NUMBERS_OF_CELL = 2000
const CELL_SIZE = 10

const LIFE_WIDTH = document.documentElement.offsetWidth
const LIFE_HEIGHT = document.documentElement.offsetHeight

const GAME_BOARD_BACKGROUND_COLOR = "#000000";

I am using the screen size of the user's device for the size of the game board. I defined START_NUMBERS_OF_CELL, CELL_SIZE and GAME_BOARD_BACKGROUND_COLOR too so I can to configuration my game.

Cell's Class

I am using ECMAScript classes in my JavaScript code and canvas for drawing game for users.

I wanna start for Cell's class because this class is very simple class.

In order to draw Cell on canvas I need canvas context and x and y coordinates

class Cell {
    //...

    constructor(ctx, x, y) {
        this.ctx = ctx

        this.x = x
        this.y = y
    }

    //...
}

I know that I should kill cell If cell has not 2 or 3 neighbors so I need draw and dead methods.

class Cell {
    //...

    get position() {
        return [
            this.x * CELL_SIZE,
            this.y * CELL_SIZE,
            CELL_SIZE,
            CELL_SIZE,
        ]
    }

    draw(color = "#ffffff") {
        this.ctx.fillStyle = color
        this.ctx.fillRect(...this.position)
    }

    dead() {
        this.ctx.fillStyle = GAME_BOARD_BACKGROUND_COLOR
        this.ctx.fillRect(...this.position)
    }

    //...
}

I defined neighbors variable like privet variable and did setter and getter methods for work with it.

class Cell {
    #neighbors = 0

    //...

    set neighbors(neighbors) {
        this.#neighbors = neighbors
    }

    get neighbors() {
        return this.#neighbors
    }
}

Life's Class

Let's start Life class.

In Life class' constructor I passed HTMLCanvasElement and define canvas context, draw background and define array of cell. I have array of arrays so that I filled this.cells a empty items.

class Life {
    constructor(canvas) {
        this.canvas = canvas

        this.canvasWidth = LIFE_WIDTH / CELL_SIZE
        this.canvasHeight = LIFE_HEIGHT / CELL_SIZE

        this.canvas.width = LIFE_WIDTH
        this.canvas.height = LIFE_HEIGHT

        this.ctx = this.canvas.getContext("2d")

        this.ctx.fillStyle = GAME_BOARD_BACKGROUND_COLOR
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

        this.cells = []

        for (let i = 0; i < this.canvasWidth; i++) {
            this.cells[i] = []

            for (let j = 0; j < this.canvasHeight; j++) {
                this.cells[i][j] = undefined
            }
        }

        //...
    }

    //...
}

After that I did cycle from 0 to our START_NUMBERS_OF_CELL constant so that I fill of cells the game board. I generate random random position for cells and check If the cell is not in this.cells I create new a cell and drawing it. After that I need run the game. I am using requestAnimationFrame.

class Life {
    constructor(canvas) {
        //...

        for (let i = 0; i < START_NUMBERS_OF_CELL; i++) {
            const cellXPosition = Math.floor(Math.random() * this.canvasWidth)
            const cellYPosition = Math.floor(Math.random() * this.canvasHeight)

            if (!this.cells[cellXPosition][cellYPosition]) {
                this.cells[cellXPosition][cellYPosition] = new Cell(this.ctx, cellXPosition, cellYPosition, false)

                this.cells[cellXPosition][cellYPosition].draw()
            }
        }

        this.deadWave = this.deadWave.bind(this)

        requestAnimationFrame(this.deadWave)
    }

    deadWave() {
        //...
    }
}

After initialization the game board I have left write rules of the game in deadWave method:

Any live cell with fewer than two live neighbours dies, as if by underpopulation.
Any live cell with two or three live neighbours lives on to the next generation.
Any live cell with more than three live neighbours dies, as if by overpopulation.
Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

In deadWave method I have cycle for check cell neighbor and boring new cells using rules and cycle for dead cells

Cycles start like that

//...

deadWave() {
    for (let i = 0; i < this.canvasWidth; i++) {
        for (let j = 0; j < this.canvasHeight; j++) {
            //...
        }
    }

    for (let i = 0; i < this.canvasWidth; i++) {
        for (let j = 0; j < this.canvasHeight; j++) {
            //...
        }
    }
}

//...

In first cycle in start of iteration I check that cell by i, j address is exist and if it is I set neighbor of cell is 0.

Next I check every neighbor cell (in total is 8) and If neighbor cell is exist I count it.

In the end of cycle I check that cell is exist and if it is I set count of neighbors to cell If cell is not exist I do boring of cell and set neighbor is 2 because next cycle If cell have not neighbor cell will be dead.

//...

deadWave() {
    for (let i = 0; i < this.canvasWidth; i++) {
        for (let j = 0; j < this.canvasHeight; j++) {
            if (this.cells[i][j]) {
                this.cells[i][j].neighbors = 0
            }

            let countAroundCells = 0

            //...

            if (this.cells[i][j]) {
                this.cells[i][j].neighbors = countAroundCells
            } else if (countAroundCells === 3) {
                this.cells[i][j] = new Cell(this.ctx, i, j)

                this.cells[i][j].draw(this.randomColor)
            }
        }
    }

    //...
}

//...

Next cycle if a cell is exist I check that the cell is newborn and if is it I set newborn false value. If the cell is not newborn I kill the cell.

//...

deadWave() {
    //...

    for (let i = 0; i < this.canvasWidth; i++) {
        for (let j = 0; j < this.canvasHeight; j++) {
            if (this.cells[i][j]) {
                if (this.cells[i][j].newborn) {
                    this.cells[i][j].newborn = false;
                } else if (this.cells[i][j].neighbors !== 2 && this.cells[i][j].neighbors !== 3) {
                    this.cells[i][j].dead()

                    this.cells[i][j] = undefined
                }
            }
        }
    }
}

//...

Finally I should call deadWave method again and again so that I call requestAnimationFrame(this.deadWave) in the end of the method.

Thank you for reading the post ☺️

Full code you can see in GitHub repository or live demo right now

DEV Community: Vladimir Schneider

Writing Conway's Game of Life on JavaScript

Conway's Game of Life

Intro

class Board

class Cell

class Game

updateCellNeighbors

normalize data without normalizr

🔍 How stick element to bottom of viewport on mobile

Very simple way to render star rating

How I'm covering changes with tests

What's kind of a change?

Features

Improvements and bugs

Create a test

Full scheme

Part 1: How do custom Caret(cursor)

<Caret />

<Text />

useCaret hook

handleClick

handleBlur

handleChange

Ways reset the last margin

Flex Gap

Reset the last margin

Without last margin with :not

Without first margin

Always and everywhere make Triple equals

How much do you know about cookies?

Set a Cookie

The Cookie options

path

domain

max-age or expires

secure

httpOnly

samesite

strict

lax

Delete cookie

Put element into fullscreen in JS

GitHub repositories I starred

React Developer ROADMAP

Real World projects on React

Fake data

Fingerprint

Frontend for beginners

Conway's Game of Life 🎮 on JavaScript

Cell's Class

Life's Class

`<Caret />`

`<Text />`

`useCaret` hook

`handleClick`

`handleBlur`

`handleChange`

Without last margin with `:not`

`max-age` or `expires`