Forem: Gabriel Manussakis

Why I decided to make a portfolio template an open source project (instead of selling it on ThemeForest)

Gabriel Manussakis — Tue, 04 May 2021 14:12:59 +0000

Leeneon is the name of my portfolio template that now is available on GitHub. The the initial idea was to sell it on ThemeForest and in this article I will let you know why I have changed my mind.

A brief history

When I started designing Leeneon, my main goal was to create a product to sell on internet. The idea was to create a website template that had accessibility as its main differential. But throughout the process, I had a hard time looking for other accessible open source websites that I could learn from.

When I finished the first version, I realized that I had developed the project that I would have liked to have had access to during my own template development.

It was my turning point, so I decided that Leeneon would be more useful to dev community as an open source project rather than being sold.

What makes Leeneon accessible (or very close to it)

The WCAG is a document that contains all the instructions for creating accessible content on the web. This document is maintained by W3C, the organization that regulates web standards worldwide. Leeneon was developed to meet a lot of those standards.

Check out some of the features implemented in Leeneon:

HTML semantics - Correct use of HTML 5 tags that provide meaning for its content.
Color contrast – All color combinations between text and background have a contrast of at least 4.5:1.
Keyboard navigation – All functionalities are available from keyboard and the focus are always visible.
Reduce motion – Leeneon identifies user's system preferences to disable or enable animations.
Dark and light theme – Leeneon identifies user's system preferences to choose between dark or light themes.
Responsive – The website adjusts for all screen sizes.
Zoom – It supports up to 400% zoom without breaking the page.
Right to left – Both right-to-left and left-to-right versions are supported.
Form errors – Contact form errors are clearly presented and guides the user on how to fix them.
Images description – Non-decorative images have alternative text.
User has the control – Although Leeneon adopts settings based on user's system preferences, an interactive panel is available for the user to manage preferences on their own.

Tests

This is the result of the automated test powered by Web Dev Measure Tool.

IMPORTANT: Automated tests are important, but they are not a substitute for human tests.

To make this article straight to the point I'm not going to explain all details involved in Leeneon's accessibility development. Let me know in the comments below if you would like to know more about it.

Screenshots

Client section in green color and dark mode:

Blog section in blue color and light mode:

Contact form errors alert in purple color and dark mode:

About section in right-to-left version, red color and light mode:

Accessibility preferences opened in orange color and dark mode:

Can you use Leeneon?

Of course you can! But first let me tell you something: Leeneon is an open source project that needs collaborations to be improved. If you find some bug don't forget to open an issue on GitHub. I will try to work on it as soon as possible.

You can use Leeneon to publish either personal or commercial websites, just remember to keep the credit that are at the bottom of the template. The documentation are available in project's repository on GitHub.

I want to be able to dedicate myself more and more to improve Leeneon's accessibility, but for that I would like to ask you for help: consider buying me a coffe.

Conclusion

Starting a project is the best way to learn new web development concepts and tools. The process of developing Leeneon was crucial to me in order to learn more about web accessibility.

If this project is in any way useful for the growth of accessibility on the web, I will be very happy to have made a small contribution to this issue that impacts the lives of millions of people.

Demos

Leeneon has two templates:

Check out the project on GitHub:

Manussakis / leeneon

Leeneon is a free portfolio template designed and developed to be accessible for as many users as possible.

Leeneon

The free accessible portfolio template.

There are few accessible websites on the internet and even less accessible websites with open source. However, open source projects heavily contribute to the evolution of web development, and web accessibility can't be left out this progression.

Leeneon is an open source project and it was born to contribute to the expansion of web accessibility. It is a free accessible portfolio template, ideal for resumes and for presenting creative works such as design projects, photography, illustration and more.

If you desire to use Leeneon to publish your personal or commercial website, read the License section of this documentation before.

Demos

Leeneon has two templates:

Why is Leeneon accessible?

View on GitHub

Como escrever links mais acessíveis para a web

Gabriel Manussakis — Wed, 28 Oct 2020 13:55:36 +0000

Um problema de acessibilidade muito comum em artigos na web são links com textos como:

clique aqui;
saiba mais;
continue lendo.

Mas por que esses links não são acessíveis?

Vamos usar este trecho de um artigo como exemplo. Nele os textos em azul são os links.

Saiba mais sobre a história do diretor de cinema Alfred Hitchcock e clique aqui para conhecer suas obras mais conhecidas.

Para um usuário que enxerga, não há dificuldade em saber para qual conteúdo ele será direcionado ao clicar em saiba mais ou clique aqui.

Mas e o usuário que não enxerga?

Ele pode pedir para o leitor de tela narrar apenas o texto dos links, antes de narrar todo o parágrafo, ou seja, o usuário saberá que há dois links no parágrafo, mas não saberá para onde eles levam após o clique, pois tudo o que ele ouviu foi: saiba mais e clique aqui.

Vamos deixar os links deste trecho mais acessíveis:

Saiba mais sobre a história do diretor de cinema Alfred Hitchcock e clique aqui para conhecer suas obras mais conhecidas.

Agora o leitor de tela irá narrar os links assim: história do diretor de cinema Alfred Hitchcock e na sequência, obras mais conhecidas.

Desse modo, mesmo só tendo ouvido o texto dos links e não de todo o parágrafo, o usuário é capaz de saber para qual conteúdo cada um dos links irá levar após o clique.

Uma simples mudança no seu site pode fazer muita diferença para outras pessoas.

Então lembre-se: os links devem descrever exatamente para onde o usuário será levado após o clique.

Como criar um tabuleiro de campo minado em JavaScript

Gabriel Manussakis — Fri, 09 Oct 2020 13:41:33 +0000

O desenvolvimento de jogos é um ótimo modo de aplicar diversos conceitos de programação, neste tutorial, vamos entender qual foi a lógica utilizada para criar o tabuleiro da minha versão do jogo de campo minado.

Entendendo o problema

Vamos comparar um tabuleiro de campo minado com um tabuleiro de xadrez, em ambos, cada casa pode ser acessada através da combinação de dois valores:

índice da linha;
índice da coluna.

A diferença é que, por convenção, as colunas no xadrez são representadas por letras, mas em nosso tabuleiro de campo minado, vamos usar números para identificar tanto as linhas quanto as colunas, além disso, vamos começar a nossa contagem no 0.

Qualquer combinação entre estes dois índices existentes representa uma posição no tabuleiro. Por exemplo, a posição “1, G” no tabuleiro de xadrez é equivalente à posição “0, 1” no tabuleiro de campo minado. É a mesma lógica usada também no jogo Batalha Naval.

Para que seja possível desenhar o tabuleiro utilizando Javascript é necessário encontrar uma estrutura de dados nesta linguagem de programação que possua o mesmo modo de acesso de seus valores, ou seja, através da combinação de suas linhas e colunas. Para isso, a estrutura ideal é o array multidimensional.

Array e Array multidimensional

Array é um tipo de dado presente em diversas linguagens de programação, em Javascript ele pode ser entendido como um dado capaz de armazenar uma lista. Essa lista pode conter itens de diversos tipos, como números, strings, objetos, etc.

const simpleArr = [ 1, '2', {c: 3} ];

Cada item do array pode ser acessado pelo seu índice. Como arrays em JavaScript começam com o índice 0, para acessarmos o primeiro item do array executamos:

const firstItem = simpleArr[0];
console.log(firstItem); // 1

Um array pode também conter outros arrays, a essa estrutura se dá o nome de Array multidimensional:

const multidimensionalArr = [
    [ 1, 2, 3 ],
    [ 4, 5, 6 ],
    [ 7, 8, 9 ]
];

Do mesmo modo que no exemplo anterior, utilizamos o índice para acessarmos um item do Array:

const firstArr = multidimensionalArr[0];
console.log(firstArr); // [ 1, 2, 3, ];

A constante firstArr armazena o primeiro array da lista. Sendo assim, para acessarmos o primeiro item dentro do primeiro array, devemos continuar buscando pelo seu índice:

const firstItem = multidimensionalArr[0][0];
console.log(firstItem); // 1

Portanto, assim como em um tabuleiro de campo minado, um Array multidimensional também tem os seus valores acessíveis através da combinação de dois índices, onde o primeiro se refere à linha e o segundo à coluna.

Criando o tabuleiro

Agora que temos a estrutura que representará o nosso tabuleiro, são necessárias algumas etapas para a sua criação:

1. Definir a quantidade de linhas, colunas e minas;
2. Criar um Array multidimensional com todos os itens zerados;
3. Definir aleatoriamente a posição das minas;
4. Inserir as minas no Array multidimensional;
5. Para cada mina, incrementar em 1 o valor das casas ao seu redor;
6. Imprimir o tabuleiro no DOM.

1. Definir a quantidade de linhas, colunas e minas

Para simplificar nosso exemplo, vamos criar um tabuleiro do nível mais fácil do jogo, com 9 linhas, 9 colunas e 10 minas:

class Minesweeper {
    constructor() {
        this.boardRowsLength = 9;
        this.boardColumnsLength = 9;
        this.minesLength = 10;
    }
}

2. Criar um Array multidimensional com todos os itens zerados

Agora é necessário criar um Array que represente uma linha no tabuleiro, esse Array irá conter nove zeros, referente ao número de colunas, e devemos inserir esse Array no nosso array multidimensional. Como nosso tabuleiro terá 9 linhas, devemos repetir essa ação por nove vezes.

generateEmptyBoard() {
    for (let y = 0; y < this.boardRowsLength; y++) {
        this.board.push([]);
        for (let x = 0; x < this.boardColumnsLength; x++) {
            this.board[y][x] = 0;
        }
    }
}

Este é o array atribuído à propriedade this.board após a execução do método generateEmptyBoard():

this.board = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
];

3. Definir aleatoriamente a posição das minas

Vamos armazenar em uma outra lista todos os pares de coordenadas que representarão a posição das minas e que serão gerados aleatoriamente a partir dos índices possíveis de linhas e colunas. Mais uma vez, utilizamos um array multidimensional para isso:

generateMinesPositions() {
    this.minesPositions = [];

    while (this.minesPositions.length < this.minesLength) {
        const y = this.getRandomInt(0, this.boardRowsLength);
        const x = this.getRandomInt(0, this.boardColumnsLength);

        if (!this.isAlreadyAMine([y, x])) {
            this.minesPositions.push([y, x]);
        }
    }
}

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

isAlreadyAMine(minePosition) {
    return this.minesPositions.join(" ").includes(minePosition.toString());
}

A propriedade this.minesPositions ficará mais ou menos assim (porém com outros índices, pois as posições são geradas aleatoriamente cada vez que o método é chamado):

this.minesPositions = [
    [0, 4], [2, 5], [1, 2], [3, 3], [7, 5],
    [6, 4], [2, 7], [8, 7], [4, 5], [5, 1],
];

4. Inserir as minas no Array multidimensional

O array this.minesPositions possui as dez posições onde as minas devem ser colocadas no tabuleiro. Para isso, acessamos essas posições no array this.board e trocamos o seu valor de 0 para “M” (“M” de mina)

insertMines() {
    for (let i = 0; i < this.minesPositions.length; i++) {
        const y = this.minesPositions[i][0];
        const x = this.minesPositions[i][1];
        this.board[y][x] = "M";
    }
}

this.board ficará assim após a execução do método insertMines():

this.board = [
    [0, 0, 0, 0, M, 0, 0, 0, 0,],
    [0, 0, M, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, M, 0, M, 0,],
    [0, 0, 0, M, 0, M, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, 0, 0,],
    [0, M, 0, 0, 0, 0, 0, 0, 0,],
    [0, 0, 0, 0, M, 0, 0, 0, 0,],
    [0, 0, 0, 0, 0, M, 0, 0, 0,],
    [0, 0, 0, 0, 0, 0, 0, M, 0,],
];

ATENÇÃO: A letra M presente nos arrays é na realidade uma string (“M”). Removi as aspas apenas para facilitar a visualização das posições.

5. Para cada mina, incrementar em 1 o valor das casas ao seu redor

A partir da posição de uma mina devemos acessar todas as outra casas ao seu redor. Mais uma vez, utilizaremos o array minesPositions para nos guiar.

Se temos uma mina na posição [5][3] e queremos acessar a casa logo acima, então devemos apenas subtrair em 1 o índice da linha da mina, logo, a posição da casa será [4][3].
Ou se quisermos acessar a casa ao lado direto na mina, basta adicionar 1 ao índice de sua coluna: [5][4].

Para facilitar o processo, podemos então criar um novo array multidimensional fora de nossa classe Minesweeper que contenha todas as operações que devem ser realizadas para acessar as casas ao redor de uma mina:

const AROUND_CELL_OPERATORS = [
    [-1, -1], [-1, 0], [-1, 1],
    [0, -1],           [0, 1],
    [1, -1],  [1, 0],  [1, 1],
];

Agora para cada uma das minas podemos utilizar este array para acessar as casas ao seu redor e incrementar o seu valor:

updateBoardNumbers() {
    for (let i = 0; i < this.minesPositions.length; i++) {
        for (let j = 0; j < AROUND_CELL_OPERATORS.length; j++) {
            const minePosition = this.minesPositions[i];
            const around = AROUND_CELL_OPERATORS[j];
            const boardY = minePosition[0] + around[0];
            const boardX = minePosition[1] + around[1];

            if (boardY >= 0 && boardY < this.boardRowsLength &&
                boardX >= 0 && boardX < this.boardColumnsLength &&
                typeof this.board[boardY][boardX] === 'number') {
                this.board[boardY][boardX]++;
            }
        }
    }
}

this.board ficará assim:

this.board = [
    [0, 1, 1, 2, M, 1, 0, 0, 0,],
    [0, 1, M, 2, 2, 2, 2, 1, 1,],
    [0, 1, 2, 2, 3, M, 3, M, 1,],
    [0, 0, 1, M, 3, M, 3, 1, 1,],
    [1, 1, 2, 1, 2, 1, 1, 0, 0,],
    [1, M, 1, 1, 1, 1, 0, 0, 0,],
    [1, 1, 1, 1, M, 2, 1, 0, 0,],
    [0, 0, 0, 1, 2, M, 2, 1, 1,],
    [0, 0, 0, 0, 1, 1, 2, M, 1,],
];

6. Imprimir o tabuleiro no DOM

O método printBoard($board) colocar o tabuleiro no DOM a partir da propriedade this.board.

printBoard($board) {
    for (let y = 0; y < this.board.length; y++) {
        const $row = document.createElement('DIV');
        $row.classList.add('row');

        for (let x = 0; x < this.board[y].length; x++) {
            const $cell = document.createElement('SPAN');

            $cell.innerHTML = this.board[y][x];
            $row.appendChild($cell);
        }

        $board.appendChild($row);
    }
}

Para deixar nossa classe mais genérica, vamos definir três parâmetros no seu constructor, desse modo, será possível criar tabuleiros com qualquer número de linhas, colunas e quantidade de minas. Além disso, vamos chamar o método init() também dentro do constructor:

class Minesweeper {
    constructor(boardRowsLength, boardColumnsLength, minesLength) {
        this.boardRowsLength = boardRowsLength;
        this.boardColumnsLength = boardColumnsLength;
        this.minesLength = minesLength;
        this.board = [];
        this.minesPositions = [];

        this.init();
    }

    init() {
        this.generateEmptyBoard();
        this.generateMinesPositions();
        this.insertMines();
        this.updateBoardNumbers();
    }
    // ...
}

Para concluir, criamos uma instância da classe Minesweeper, e chamamos o método printBoard($board), passando como parâmetro o elemento HTML no qual o tabuleiro deve ser renderizado:

const minesweeper = new Minesweeper(9, 9, 10);
const $board = document.getElementById('board');

minesweeper.printBoard($board);

Veja o resultado no CodePen:

Este é o código final do tabuleiro de campo minado feito com JavaScript no Github:

0fc0de / minesweeper-board

This project shows how to render a Minesweeper board with JavaScript using multidimensional array. This is the same logic used to develop the Minesweeper game here: https://ofcode.com.br/projects/minesweeper

Minesweeper Board

This project shows how to generate a Minesweeper board with JavaScript using multidimensional array. This is the same logic used to develop the Minesweeper Game with Angular.

This is the article about this project

Play the game

View on GitHub

Embora este seja só o começo do desenvolvimento do jogo, esta é uma etapa importante do processo. O código completo do Jogo de Campo Minado está também disponível no GitHub.

Este é meu Instagram caso se interesse.

Abraço!

The Fifteen Puzzle Game built with vanilla JavaScript

Gabriel Manussakis — Thu, 02 Apr 2020 12:22:49 +0000

This is the first game I developed for the web environment, my main goal was to build it with only HTML, CSS and vanilla JavaScript, without any kind of framework or library. Following the MVC pattern helped me to keep things organized.

With this project I learned a lot of multidimensional array and get the knowledge to do my second project as a puzzle: Angular Minesweeper.

The object of the fifteen puzzle is to place the tiles in order by making sliding moves that use the empty space whith as fewer moves as possible.

Play the game

You can see the code on Github:

Manussakis / fifteen-puzzle-game

The classic Fifteen Puzzle Game made with Vanilla JavaScript.

Fifteen Puzzle Game

Rearrange the pieces with as few moves as possible

Instructions:

In the "Shuffle moves" input, type how many moves you want the board to be shuffled with (any value between 1 and 80).
Click on the "Shuffle" button and watch the pieces shuffling around.
Try rearranging the board with the same (or even fewer) number of moves than it was initially shuffled by clicking on the pieces with space to move. The pieces should be placed in ascending order from left to right, up to down.

Development

Clone this repository to your machine.
Run npm install to install all the dependencies.
Run npm run start to start the server and open http://localhost:8080 on the browser. The site will reload automatically when changes in the source files are saved.

Build

Run npm run build to build the project. The built artifacts will be stored in the dist/…

View on GitHub

The classic Minesweeper game developed with Angular

Gabriel Manussakis — Mon, 02 Mar 2020 11:10:38 +0000

The game development is a great way to cover several programming topics. In this experiment I developed a differente version of the classic Minesweeper game.

My main goal was to build an accessible game where the user should be able to play with mouse, touch and keyboard. This is part of my desire to learn more about accessibility on the web.

The angular framework helped me to write less code and focus mainly on the logic of the game.

I hope you enjoy it!

Play the game

You can see the code on Github:

Manussakis / angular-minesweeper

Play a different version of the classic Minesweeper game built with Angular

Minesweeper

A different version of the classic Minesweeper game built with Angular.

Play the game

This project was generated with Angular CLI version 11.2.7.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

View on GitHub