DEV Community: João Textor

The Gamification of Coding

João Textor — Mon, 01 Jan 2024 19:00:00 +0000

TL;DR
The Revolution of Gamification in Coding Learning
Dopamine's Role in Coding Engagement
Psychological Rewards of Error Resolution and Successful Tests
Impact of Visual Feedback on Programmer's Motivation
Organizational Tools: Kanban Boards and Story Points
Linking Gamification, Dopamine Release, and Skill Development

TL;DR

This blog post explores how gamification transforms coding into an engaging and enjoyable experience. It highlights the role of dopamine in boosting motivation, the satisfaction from solving coding errors, the impact of visual feedback on productivity, and the effectiveness of organizational tools like Kanban boards. The post concludes by examining how gamification and dopamine release aid in developing coding skills, making the learning process more effective and fun.

The Revolution of Gamification in Coding Learning

Gamification in coding has revolutionized the way I approach learning and developing programming skills. By incorporating game-like elements into coding, the process becomes more engaging and fun, transforming a sometimes monotonous task into an exciting adventure. This method capitalizes on our brain's response to rewards and achievements, making each step in learning to code feel like a level in a game. I find that this approach keeps me motivated and eager to tackle more complex coding challenges.

Dopamine's Role in Coding Engagement

Dopamine, a neurotransmitter associated with feelings of pleasure and motivation, plays a crucial role in the gamification of coding. When I solve a coding problem or understand a new concept, my brain releases dopamine, which not only makes me feel good but also enhances my motivation to continue learning. This biochemical response is a powerful motivator, keeping me engaged and focused on my coding tasks for longer periods.

Psychological Rewards of Error Resolution and Successful Tests

The psychological rewards of coding are not to be underestimated. Every time I see errors disappear from my code or watch my tests turn green, it feels like a mini-victory. This sense of achievement is profoundly satisfying and encourages me to keep refining and improving my code. The immediate feedback loop in coding, where I can see the results of my work in real-time, provides a continuous source of motivation and satisfaction.

Impact of Visual Feedback on Programmer's Motivation

Visual feedback in coding, such as the disappearing red underlined code, significantly impacts my motivation and productivity. The visual cues act as instant gratification for the work I put in. It's not just about the code working correctly; it's about seeing that visual confirmation that something has been fixed or achieved. This kind of feedback keeps me motivated to maintain high-quality code and strive for fewer errors.

Organizational Tools: Kanban Boards and Story Points

Implementing "to-do lists," similar to Kanban boards, and utilizing story points have been game-changers in how I organize and motivate myself in coding projects. These tools allow me to break down tasks into manageable chunks, making my goals seem more achievable. The satisfaction of moving a task from 'to-do' to 'done' is similar to completing a level in a game, providing a clear sense of progress and accomplishment.

Linking Gamification, Dopamine Release, and Skill Development

The relationship between gamification, dopamine release, and the development of coding skills is a fascinating aspect of learning to code. The gamified elements in coding act as a catalyst for dopamine release, which not only makes the learning process more enjoyable but also enhances memory retention and skill development. As I engage with these gamified aspects, I notice a significant improvement in my coding abilities, as well as an increase in my overall enthusiasm for coding.

Happy 2024 for all of you, and happy coding.

A Beginner Developer 2023 Recap

João Textor — Sun, 31 Dec 2023 14:26:03 +0000

Looking back, 2023 was the year my brain did more code crunches than I did at the gym (which, by the way, were few). This was the year I decided to dive headfirst into a career transition to programming - not that I was running away from my current job, but let's just say that developing software and bringing projects to life makes my heart beat faster.

In my current job, which has as much to do with software development as a duck has to do with classical ballet, I ended up creating 5 tools to make everyone's life easier (including mine). I think I ended up being more useful than I expected!

Personally, I lost count of how many projects I started. I finished some, others... well, let's just say they are in a "creative pause". I completed a Full Stack JavaScript course and a postgraduate in multi-platform mobile development that I started in 2022, and I did a bunch of other courses on Udemy. Let's just say my brain was on a learning marathon.

I used AI assistants in programming less than I expected. They are good for shaking off the rust or writing that basic code, but at the peak of programming "flow", these assistants are like someone trying to help cook and just making a mess. Useful, but sometimes they hinder more than they help. It's like giving a recipe book to a chef while he's preparing dinner! 🤖💻👨‍🍳

I learned some cool things that I will take to all my future projects:

TypeScript: at first, I thought it was just a "gourmet" version of JavaScript. But now, without it, I feel like I'm trying to navigate without GPS. Lost, confused, and always searching for that guidance beacon that TypeScript offers.
Clean Architecture: it was like those gourmet recipes you see on TV and think "I'm never going to make that". But, surprise! I ended up adopting it in my project, like someone who starts making artisanal burgers at home. Unexpected, a bit challenging, but incredibly satisfying for the organization it provides.
Unit and integration testing: before, I saw them as a tedious task. Now, I realize they are more crucial than I thought. If I applied the same dedication to testing my social life as I do with my code, maybe I wouldn't just be great at the keyboard, but also a master of casual conversation. Imagine that, implementing TDD (Test Driven Dating) to improve my social skills! 😄👨‍💻🎉

And, by chance, I entered the open-source world with a project for the abstraction of the DataJud API, from CNJ. It became more popular than I expected (check it out: https://github.com/joaotextor/busca-processos-judiciais).

Now I'm working on a personal SaaS project and thinking about another one. They certainly won't make me the next Bill Gates, but the learning is worth every second.

Finally, here's my GitHub retrospective. I hope next year's numbers are even more impressive!

A happy new year to everyone, with lots of health and dreams fulfilled (and, of course, lots of code)!

What I Love in TypeScript

João Textor — Thu, 28 Dec 2023 19:27:35 +0000

TL;DR

Reasons to Migrate to TypeScript:

Enhances code quality and readability with its strict typing system.
Improves collaboration and maintainability in team environments.
Offers superior tooling and ecosystem with robust IDE integration and developer tools.

Top 3 TypeScript Features:

Static Typing: Ensures higher code reliability and reduces runtime errors.
Advanced OOP Features: Supports interfaces, generics, decorators for more scalable code.
Seamless JavaScript Integration: Allows incremental adoption and leverages JavaScript familiarity.

Learning TypeScript: Strategies for Beginners:

Start with small integrations into existing JavaScript projects.
Utilize TypeScript documentation extensively.
Engage with the TypeScript community for support and learning.
Practice regularly to gain fluency.
Be patient and persistent in the learning process.

Introduction

Typescript has become a game-changer in the world of web development. As someone who has navigated the transition from JavaScript to TypeScript, I've come to appreciate its unique features and capabilities. In this article, I'll delve into why migrating from JavaScript to TypeScript can be a transformative step for developers, highlight three standout features that make TypeScript superior to JavaScript, and offer guidance for those finding the learning curve challenging.

Why Migrate from JavaScript to TypeScript?

Enhanced Code Quality and Readability

Typescript brings a layer of clarity and structure to your codebase. With its strict typing system, you can define what type of data each variable or function should handle. This makes the code more predictable and less prone to runtime errors. Unlike JavaScript, where debugging can often be a game of guesswork, TypeScript’s compile-time error checking flags issues before they become problematic.

Improved Collaboration and Maintainability

In team environments, TypeScript’s explicit typing system is a boon. It makes the intentions behind code more apparent, easing the onboarding of new team members and aiding collaboration. Over time, this leads to a codebase that is easier to maintain and evolve, as developers can quickly understand and build upon each other's work.

Superior Tooling and Ecosystem

The tooling support for TypeScript is robust, thanks to its integration with popular IDEs and build tools. Features like autocompletion, interface checking, and refactoring tools are incredibly powerful, making the developer's job not just easier but more enjoyable.

Top 3 Features Making TypeScript Superior to JavaScript

1. Static Typing

The heart of TypeScript’s superiority lies in its static typing system. By enabling developers to define types for variables, functions, and objects, TypeScript ensures a higher level of code reliability and predictability. This drastically reduces runtime errors and improves the quality of the codebase.

2. Advanced Object-Oriented Programming (OOP) Features

TypeScript embraces OOP more fully than JavaScript. Features like interfaces, generics, and decorators provide a level of functionality and flexibility that JavaScript simply can’t match. These OOP features allow for more reusable, scalable, and modular code, fitting perfectly with modern software design principles.

3. Seamless Integration with JavaScript

TypeScript doesn’t reinvent the wheel; it enhances it. It’s a superset of JavaScript, meaning any valid JavaScript code is also valid TypeScript. This makes the transition smoother for JavaScript developers and allows for incremental adoption, blending the familiarity of JavaScript with the robustness of TypeScript.

Struggling to Learn TypeScript? Here’s What to Do

Learning TypeScript can be daunting, especially if you’re coming from a dynamically typed language like JavaScript. However, the following strategies can make the journey easier:

Start Small: Begin by integrating TypeScript into small parts of your existing JavaScript projects. This gradual approach helps you learn TypeScript in a practical context without being overwhelmed.

Embrace the TypeScript Documentation: The TypeScript documentation is a treasure trove of information. Spend time with it, and don’t hesitate to refer back to it when you encounter something new or challenging.

Build a Support Network: Engage with the TypeScript community. Platforms like Stack Overflow, GitHub, and TypeScript’s official community channels are great places to seek advice, share experiences, and learn from others.

Practice Regularly: Like any language, fluency in TypeScript comes with practice. Set aside regular time to code in TypeScript, experimenting with its features and understanding its nuances.

Stay Patient and Persistent: Remember, mastering TypeScript is a journey. Celebrate small victories and don’t get discouraged by setbacks.

Conclusion

TypeScript offers a robust, scalable, and more reliable alternative to JavaScript. Its features like static typing, advanced OOP capabilities, and seamless JavaScript integration make it a superior choice for modern web development. For those new to TypeScript, patience, practice, and engagement with the community are key to overcoming the learning curve. Embrace the change, and you’ll soon find TypeScript an indispensable part of your development toolkit.

Abstraindo a API Pública do CNJ - DataJud

João Textor — Sun, 22 Oct 2023 13:43:07 +0000

Nesta semana o Filipe Deschamps postou em sua newsletter oficial sobre a API Pública do DataJud, lançada pelo CNJ para oferecer de forma unificada em uma única API os metadados dos processos judiciais de todo o Brasil (exceto os que tramitam em segredo de justiça).

Como trabalho atualmente no Judiciário Federal e me interesso por esse assunto, criei uma biblioteca javascript para abstrair o uso dessa API e estou convidando a comunidade open-source brasileira para ajudar na manutenção e construção de novas features😍.

Github do projeto
NPM
Notícia oficial postada aqui no Tabnews

Convidem seus amigos, familiares e pets para contribuir com o crescimento do projeto 😃

Stop Manually Uploading Your Site To The Hosting Service

João Textor — Sat, 14 Oct 2023 19:00:00 +0000

So, you are done creating or editing a website and now you need to upload it to your hosting service. What is your next step?

Let me answer that: there was a time when I uploaded all my files to the shared hosting service using a FTP Client. I needed to open the client, login, search for the folder I wanted to upload in, and then drag all the website files into it.

If you identify yourself in this routine, I say those days are over!

Let's create, today, a very simple script to automate this boring work.

Just like in the last week's post, we'll be using GitHub Actions to perform this automation.

1. Setting up the environment

If your project is not yet on GitHub, let's start by publishing it.

Then create a YAML file in your project's repository under the .github/workflows directory. You can name the file something like publish-ftp.yml.

└── .github
    └── workflows
        └── publish-ftp.yml

This is going to be the content of your YAML file:

on:
  push:
    branches:
      - main
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
      - name: 🚚 Get latest code
        uses: actions/checkout@v3

      - name: 📂 Sync files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: /path/to/your/project
          exclude: |
            README.md
            .editorconfig
            **/.git*/**
            **/.git*
            **/node_modules/**

2. Understanding the configuration

This YAML file is pretty straightforward: we start by defining that the workflow should run on each push to the repository and it will only run on main branch. Then, there's the usual code for configuring GitHub Actions and the configuration to use the FTP-Deploy-Action from SamKirkland.

Next, we will...

3. Set up the secrets

In here, we have 3 secret keys we must setup before committing and pushing to our remote repository.

Follow these steps:
a. Go to your GitHub repository.
b. Click on the "Settings" tab.
c. In the left sidebar, click on "Secrets and variables" and then "Actions".

github actions
d. Click the "New repository secret" button.
e. Name the secret "FTP_SERVER".
f. Paste the URL to your ftp server.
g. Click "Add secret" to save it.
h. Repeat with the other 2 keys, providing your credentials.

Also, don't forget to inform the exact path to your project inside your server on server-dir property.

Now that everything is set up correctly, it's time to commit your changes, push to your repository and wait for the ninja cats from GitHub to do their work 🐱!

See ya and until the next post!

Using GitHub Actions to Publish a Node Package Automatically

João Textor — Sun, 08 Oct 2023 16:00:00 +0000

GitHub Actions have revolutionized the way we automate workflows in our projects. In this guide, we'll explore how to use GitHub Actions to automatically publish your Node package to npmjs.com, simplifying the release process, since the GitHub cats will take care of the job 🐱.

With this setup, you can ensure that your package stays up to date without manual intervention (may be a paw-intervention). Let's get started with the step-by-step process.

Publish Your Code GitHub Repository
Create an NPM Token on npmjs.com
Create a GitHub Secret with Your NPM Token
Create a YAML File
Configuring the Workflow
- Brief Explanation of the Code
- Guidelines
Wrapping Up

1. Publish Your Code GitHub Repository

Before we dive into the automation, make sure your code is hosted on GitHub. If it's not already, create a repository for your Node.js project and push your code to it.

2. Create an NPM Token on npmjs.com

To publish packages to npmjs.com, you need an authentication token. Here's how to create one:

a. Visit npmjs.com.
b. Log in to your npmjs.com account.
c. Click on your profile picture in the upper right corner and select "Access Tokens."

d. Click the "Generate New Token" button and select "Classic Token".

e. Provide a Name for your token, such as "GitHub Actions Token."
f. Select the "Automation" permission.

g. Click "Generate Token."
h. Keep your generated token secure; you won't be able to see it again.

3. Create a GitHub Secret with Your NPM Token

a. Go to your GitHub repository.
b. Click on the "Settings" tab.
c. In the left sidebar, click on "Secrets and variables" and then "Actions".

d. Click the "New repository secret" button.
e. Name the secret "NPM_TOKEN".
f. Paste the npm token you generated in the previous step into the "Value" field.
g. Click "Add secret" to save it.

Create an YAML file

We'll now set up a workflow to automate the package publishing process. Start by creating a YAML file in your project's repository under the .github/workflows directory. You can name the file something like npm-publish.yml.

└── .github
    └── workflows
        └── npm-publish.yml

Configuring the workflow

Now, inside your YAML file, paste the following code.

name: Publish
on:
  push:
    branches:
      - master

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - name: checkout repo
        uses: actions/checkout@v4

      - name: setup node
        uses: actions/setup-node@v3
        with:
          node-version: 18.x
          cache: "npm"
          registry-url: "https://registry.npmjs.org/"

      - name: install dependencies
        run: npm ci

      - name: increment version
        run: git config user.email "<YOUR_EMAIL>" && git config user.name "<YOUR_NAME>" && npm version patch

      - name: run tests
        run: npm run lint && npm run test

      - name: build package
        run: npm run build

      - name: publish package
        run: npm set "//registry.npmjs.org/:_authToken" ${{ secrets.NPM_TOKEN }} && npm publish -access public

Brief explanation of the code

We have set up the workflow to run on every "push" to the repository, and it will run only on the "master" branch.

Next, we have set up the jobs with some standard GitHub actions configuration, setting up the node version and the "registry-url" from npmjs.org.

The workflow continues by installing dependencies, incrementing your package version (See details below), running the tests, building the package from our source code and finally publishing the package to npmjs.com.

Guidelines

Important: To ensure this workflow functions properly, you MUST have setup your package.json file before accordingly to this post: Building and Publishing Your TypeScript Code as a NPM Package.
Make sure you replace <YOUR_EMAIL> and <YOUR_NAME> with your email and name, respectively, since the command npm version patch will need to change your package.json file inside your repository.
You can replace npm version <patch> with any other <property> as stated on npm's official documentation; this is up to you.

Wrapping up

So, in this post we saw how you can automate the workflow of building and publishing a package to npmjs.com using GitHub Actions.

Next week I'll explore more this amazing feature from GitHub and use it to deploy a website to a shared hosting service (such as Hostinger, HostGator and so on...).

I was supposed to publish this article next Tuesday, but as I'm new to dev.to I decided to play a little with the posting dates/hours.

Hope you all enjoyed reading this and learnt something new 😄

Scroll to top

Building and Publishing Your TypeScript Code as a NPM Package

João Textor — Tue, 03 Oct 2023 19:00:00 +0000

I love open-source software. The previous couple of weeks, I posted about how I created a key generator and how I tested the code using jest.

Today, time has come to publish that code as a library on npmjs.com, so it can be consumed by anyone.

Are you ready for this?

TL;DR
First, the requirements
Dependency installing
Logging in to npm
Configuring tsconfig.json
Configure package.json
- Explaining the npx fix-tsup-cjs
Building our project
Testing
Publishing

TL;DR

(Scroll to Top)

This article explains how to publish a TypeScript project as an open-source library on npmjs.com. It covers the following steps:

Ensure you have an npmjs.com account and a suitable npm version.
Install the tsup library for bundling TypeScript projects.
Log in to your npmjs.com account using the npm CLI.
Configure your tsconfig.json file with specific options.
Set up your package.json file with essential package details.
Use the fix-tsup-cjs library to improve CommonJS module usage.
Build your project with npm run build.
Test the installation with npm install . -g.
Finally, publish your package to npmjs.com with npm publish.

First, the requirements

(Scroll to Top)

First of all, before we start the publishing process, we need to make sure:

We've created and account on npmjs.com.
Our npm version is at least 9.8 (I've used 10.1, but 9.8 is fine)

Dependency installing

(Scroll to Top)

We are going to use a library called tsup to bundle our TypeScript project. So, make sure you install it by running:

npm install tsup --save

Logging in to npm

(Scroll to Top)

After you've created your account on npmjs.com, login to it using the npm cli. You can type it using the terminal inside VS Code if you want:

npm login

After hitting 'Enter', you'll see the following message.

Just hit 'Enter' again to open the login page in your web browser. You will receive an One-time Password, so check your email and paste it in the form.

Your CLI should show a message like this: Logged in on https://registry.npmjs.org/.

You are good to continue!

Configuring tsconfig.json

(Scroll to Top)

Here we are making some configuration so tsup creates the bundle correctly.

Here are the options you should enable in your tsconfig.json (some may already be enabled):

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    /* Modules */
    "module": "CommonJS" /* Specify what module code is generated. */,
    "noEmit": true /* Disable emitting files from a compilation. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  "include": ["./"],
  "exclude": ["node_modules"] // which files to skip
}

Configure package.json

(Scroll to Top)

Configuring the package.json file correctly is a crucial part in packaging and publishing your code to npmjs.com, so I will briefly describe the configurations I make.

First, let's see the configuration file, and later I will explain it.

{
  "name": "easy-key-generator",
  "version": "1.1.9",
  "description": "Easy library for generating secret keys.
It supports various features like groups, separators,
key format, and the possibility of generating multiples
keys at once.",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "tsc --watch",
    "build": "tsup index.ts --format cjs,esm --dts && npx fix-tsup-cjs",
    "lint": "tsc",
    "test": "jest"
  },
  "author": "João Textor",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/joaotextor/easy-key-generator"
  },
  "keywords": [
    "key generator",
    "code generator"
  ],
  "devDependencies": {
    "@types/jest": "^29.5.5",
    "@typescript-eslint/eslint-plugin": "^6.7.0",
    "@typescript-eslint/parser": "^6.7.0",
    "eslint": "^8.49.0",
    "jest": "^29.7.0",
    "prettier": "^3.0.3",
    "ts-jest": "^29.1.1",
    "tsup": "^7.2.0",
    "typescript": "^5.2.2"
  }
}

name is the name of your package. Try choosing an unique one. Search for existing packages in npmjs.com.
version: self-explanatory. I started with 1.0.0, but you're free to choose what you want. Be aware that each time you publish to npmjs.com, the next time it must contain a newer version.
description: this is where you briefly describe what your packages does.
main: this is where you declare the path to your main bundled file (which not yet exists). This is the javascript file which users will import using import.
module: this is the bundled javascript file to be imported using require, as a commonJS module.
types: the path to your d.ts file, which contains your types.
scripts: here we created a build script that will call tsup to bundle our index.ts, which is our project's main file; we've passed the option --format with cjs,esm params, which will create the commonJS file and a ES Module file; finally, the --dts option is telling tsup to create our type file with d.ts extension. Next we will call npx fix-tsup-cjs. Why? I'll explain later on.
author: This is where you put your name, so everyone can blame you publicly if your library introduce bugs into their projects (just kidding...or not!)
license: You can inform an open-source license here if you want.
repository: want to make easier for people to yell at you online? Place the repository to your library here 😅. They might also submit a PR to fix your undesired bugs 😄.

Explaining the `npx fix-tsup-cjs`

(Scroll to Top)

When bundling your project using tsup, you might notice that when importing the CommonJs module using something like const KeyGenerator = require("easy-key-generator"); when calling your class' constructor you must type this: new KeyGenerator.default(). Also, when calling a method, let's say generate(), you need to call it by using KeyGenerator.default().generate.

This sucks, right? Why can't you instantiate your class by using only KeyGenerator()?

Well, the library fix-tsup-cjs enables you to do exactly that, that's why we executed it after bundling our project using tsup.

Building our project

(Scroll to Top)

Well, now that everything is setup correctly, is time for us to build our project.

Just type npm run build in your terminal in the root of your project and hit 'Enter'.

Testing

(Scroll to Top)

Before publishing the package, your should test installing it.

To test the install, type npm install . -g in the root of your project. NPM should be able to install it globally as any other package.

If anything goes wrong in this step, it means something is wrong with your configuration.

Publishing

(Scroll to Top)

Finally, it's time to publish your package to npmjs.com. Type npm publish, get your fingers crossed and TA-DA!

Congratulations, you've successfully published your TypeScript code to npmjs.com! It is now available to the npm community.

In this guide, we've covered the essential steps to publish your TypeScript project on npmjs.com. By following these steps and maintaining your package, you can share your code with the world and contribute to the open-source community. Happy coding!

If you did read through the entire post until here, please leave a reaction and a comment, and hit the follow button because next week we will be learning how to automatize the work of publishing a node package by using GitHub Actions!

Until next week!

Using Jest to bulletproof a TypeScript Class - Part 2

João Textor — Tue, 26 Sep 2023 22:00:00 +0000

The second and final part of our testing suite is here!
Check out the first part HERE.

We will continue testing our generate method.

Here we'll test generating a code with 2 groups and the default separator.

it("Should generate a code with 2 groups and the default group separator", () => {
    sut = new CodeGenerator(5, {
    groups: 2,
    });

    const code = sut.generate();    
    expect(code).toHaveLength(1);
    expect(code[0]).toHaveLength(11);
    expect(code[0]![5]).toBe("-");
});

Our code will still have the length of 1, and the first index will have a length of 11, since the key has 2 groups of 5 characters, additionally to the separator "-".

Now we will modify our configuration, this time using the "_" character as the group separator. We're testing if the CodeGenerator respects our choice of separator.

it("Should generate a code with 2 groups and the '_' 'groupSeparator'", () => {
    sut = new CodeGenerator(5, {
        groups: 2,
        groupSeparator: "_",
    });
    const code = sut.generate();

    expect(code).toHaveLength(1);
    expect(code[0]).toHaveLength(11);
    expect(code[0]![5]).toBe("_");
});

The next test will analyze the generation of 2 keys at the same time.

it("Should generate 2 random keys", () => {
    sut = new CodeGenerator(5, {
        numberOfKeys: 2,
    });
    const code = sut.generate();

    expect(code).toHaveLength(2);
    expect(code[0]).toHaveLength(5);
    expect(code[1]).toHaveLength(5);
});

As expected, the code Array will have 2 items, and each of them a length of 5.

We also need to test generating keys with a different characterType, which is done in the following test:

it("Should generate 1 key with only numbers", () => {
    sut = new CodeGenerator(5, {
        characterType: "Numbers",
    });
    const code = sut.generate();
    const numberCode = Number(code[0]);

    expect(code).toHaveLength(1);
    expect(numberCode).not.toBeNaN();
});

Here we converted our generated code (which is a string inside an Array) into a number, and test if the result is an actual number or it returned NaN in the type conversion.

Our next test will analyze if our code will give priority to the length of groupFormat over the length informed in the first property when instantiating a class.

it("Should generate a key with 'groupFormat' length instead of the length informed.", () => {
    sut = new CodeGenerator(5, {
        characterType: "LettersAndNumbers",
        groupFormat: "NNLNLLN",
    });
    const code = sut.generate();

    expect(code[0]).toHaveLength(7);
});

Our groupFormat have a length of 7, but we passed the number 5 for the property of numbersOfCharacters. Our logic demands that when the groupFormat is informed, the output group should have the length of the group format informed.

Finally, to our last test, we will verify if the groupFormat informed by the developer is actually being respected in the output.

In short, if the grouptFormat is "LLNLN", the output should be something like this: "ZH8D2".

This is going to be a more complex test than the others, since we will have to convert our string key to an Array and iterate this Array to see if it is a number or not.

it("Should generate a key with the format informed in 'groupFormat' property. ", () => {
    const groupFormat = "LLNLN";
    const groupFormatArray = Array.from(groupFormat);
    sut = new CodeGenerator(5, {
        groupFormat: groupFormat,
    });
    const codes = sut.generate();
    const codeArray = Array.from(codes[0]!);

    for (let char in codeArray) {
        const codeChar = Number(codeArray[char]);
        if (groupFormatArray[char] === "L") {
          expect(codeChar).toBeNaN;
          return;
        }
    expect(codeChar).not.toBeNaN();
    }
});

With this final test, we finished our suite of unit tests for the CodeGenerator class.

This is going to be the last post in this series. However, next week I will open a new series with an article on how I published the Easy Key Generator to npmjs.com as a library that can be used by anyone. Hit the follow button to stay tuned in future posts.

Talk to you all next week, and do not forget to react to this post and comment if you have any suggestions or to make any constructive criticisms :-)

Using Jest to bulletproof a TypeScript Class - Part 1

João Textor — Tue, 26 Sep 2023 19:00:00 +0000

Hello, my fellow developers.

In my previous post, I wrote about how to develop a simple and easy tool for generating keys for you to use in your projects.

As I wanted to publish it as a package on npmjs.com, I needed to write some tests to ensure everything was running smoothly in every situation.

Picture this: You've spent some time crafting a TypeScript library, meticulously designing its features. However, before you unleash your creation upon the world, you need to ensure that it's as robust as a tank and as reliable as your grandma's secret cookie recipe, right?

So I chose Jest.js, the trusty sidekick of TypeScript developers, ready to assist in the quest for bulletproof code.

In this post, we're going to start crafting a series of unit tests using Jest.js to ensure our Key Generator tool behaves impeccably.

I decided to split this into a 2-part article because it ended up being too long.

Testing the `validateGroupFormat` method

Our first group of tests will focus on our private method validateGroupFormat, guaranteeing it throw the errors when needed.

Let's start by setting the stage for our tests by writing 2 describes, thus creating 2 context blocks for our actual tests.

import CodeGenerator, { ICodeGenerator } from "../index";

describe("Key Generator Tests", () => {
  describe("Testing 'validateGroupFormat' errors and warnings'", () => {
  let sut: ICodeGenerator;

  // Our tests will be written here.
  [...]

  });
});

Don't forget to import our dependencies: the CodeGenerator class and our interface ICodeGenerator, since our sut (system under test) should have this type.

Also, we are not going to call the actual validateGroupFormat, but test its functionality by actual calling our generate method.

Now, let's see our first test.

Empty `groupFormat`

When a developer uses the CodeGenerator class without specifying the groupFormat, we don't want to pester them with unnecessary validation checks. Instead, we choose to be polite and silently skip the validation process.

it("Should skip validation if 'groupFormat' was not informed by the user", () => {
    sut = new CodeGenerator(5);
    const consoleSpy = jest.spyOn(console, "log");
    sut.generate();
    expect(consoleSpy).toHaveBeenCalledWith("Group Format is not defined, skipping validation.");
});

If you don't remember or didn't read my last post, I suggest you take a quick look at it by clicking here so you can get familiar with the code being tested.

So, when the groupFormat is empty this validation will simply call a console.log with the message 'Group Format is not defined, skipping validation.'.

Therefore, we used the 'spyOn' method on Jest to watch if the "log" method of the console was being called when we generate a new code.

You may be wondering why we even called our validateGroupFormat auxiliary method in the first place if the user did not inform the groupFormat property.

Well, we did this to comply with the first principle of SOLID: single responsibility. We could have actually checked if the groupFormat was empty before calling the validation method, but that would mean the generate method would also be doing its own validations, and this can get confusing. Of course this is a very small project, but it's important to follow a clean code pattern even when we are working on small pieces of code, so others (and your future self) can properly understand what the code is doing.

With that clear, let's jump to the other test.

`groupFormat` being passed with the wrong type of `characterType`

The groupFormat purpose is to let the user customize the order of characters (Letters or Numbers) in the output key.

it("Should throw an error when 'groupFormat' is used with 'characterType' other than 'LettersAndNumbers'", () => { 
    sut = new CodeGenerator(5, { characterType: "Letters", groupFormat: "NNLNL", }); 
    expect(() => sut.generate()).toThrow(
        new Error("The groupFormat can only be used with 'LettersAndNumbers' characterType!"), 
    ); 
});

So, in our second test, we don our detective hats to catch developers trying to mix incompatible options. Thus, we test by passing "Letters" to characterType property and at the same time we configure our output to have a groupFormat of "NNLNL".

The test is pretty simple. It ensures that our code enforces rules consistently, preventing developers from using incompatible settings that could lead to unexpected behavior.

One thing to notice here is that we have called sut.generate inside a anonymous function. If you don't do that, the test will not run due the Error being actually thrown.

`groupFormat` contains invalid characters

The third and final test for our validation method is all about maintaining order on our key generation tool. We won't tolerate any rogue characters sneaking into the groupFormat. If a developer dares to include characters other than 'L' (for letters) or 'N' (for numbers), our code will not hesitate to raise the alarm.

The code for our test is the following:

it("Should throw error when 'groupFormat' has any characters other than 'L' or 'N'", () => {
    sut = new CodeGenerator(5, {
    characterType: "LettersAndNumbers",
    groupFormat: "LLLLB",
    });
    expect(() => sut.generate()).toThrow(
    new Error("The group format can only contain letters 'L' and numbers 'N'"),
    );
});

The validation here is similar to the one being made in the previous test.
Our validation method is using a RegEx statement to match our string, as seen in the previous post.

Here we passed the string "LLLLB", so our code successfully throws an error when trying to generate a key.

`generate` method

To void making this post too long, I will place only the first test for the generate method. The second part is going to address the rest of the tests.

Generating a random key with the default settings

What a better way of starting our tests for the generate method if not by actual generating a key, right?

We are going to start with the default settings (no props being passed).

it("Should generate a random code with the default options", () => {
    sut = new CodeGenerator(5);
    const randomSpy = jest.spyOn(Math, "random");
    const code = sut.generate();

    expect(randomSpy).toHaveBeenCalledTimes(code[0]!.length);
    expect(code).toHaveLength(1);
    expect(code[0]).toHaveLength(5);
});

Here we are asking our "System Under Test" to generate a 5-character key.
We're also using Jest's spyOn to watch on the random method of the Math library.

Our code, which is an Array, should have a length of 1 and the length of the key needs to be of 5 characters. Hence, logic requires that the random method is being called 5 times as well.

In the next post, which is going live a few hours after this one, we are going to address the rest of our tests.

Hope y'all enjoyed this first part.
I'll be glad to read your thoughts.

How to Write a Key Generator using TypeScript

João Textor — Tue, 19 Sep 2023 18:45:00 +0000

Are you looking to create a custom key generator in TypeScript for your next project? Whether it's for generating secure API keys or unique identifiers, this type of function can be very useful.

In this step-by-step tutorial, I'll walk you through the process of how I built a TypeScript key generator from scratch.

The inspiration for this code came from this video (in Portuguese).

A disclaimer, though: as very well pointed in the comments, this is not a script for generating security keys (like API keys, etc). I got the idea for this from a YT in which they used an app for generating code for in-person sweepstakes. You can adapt it using Crypto module from Node.js or another JS runtime so it can be secure.

Also, I know there's a lot of libraries out there for generating keys and security hashes, but I deliberately didn't search them before implementing my idea so it didn't become biased by other's ideas. In short, this small project served more as a challenge for myself than anything else, like making a robust key and secure generator, which was not the goal.

Be aware that this is my first post here on dev.to, and actually my first time trying to explain a code to others, which is harder than writing in the coding journal I keep to my future-self.

Also, it has been less than an year I started studying Javascript and Typescript, so there might be some ugly code.

The File Structure
Step 1: Defining the Types
Step 2: Creating the Key Generator Class
Step 3: Defining and implementing an auxiliary method
Step 4: Implementing our Main Method
Final Step: Generating Keys

The File Structure

After I wrote this tutorial, I realized it could be confusing not knowing how the project was structured beforehand. So here are the files and folders of our project:

├── index.ts
└── utils
    ├── charactersByType.ts
    └── types
        ├── characterType.ts
        └── separatorType.ts

Step 1: Defining the Types

Character Types

Before we dive into the key generation logic, let's start by defining the types of characters we want to include in our keys.

I did this by creating a file called characterType.ts inside the folder utils/types. Here's the code for this file:

export const charType = {
  Letters: "Letters",
  Numbers: "Numbers",
  LettersAndNumbers: "LettersAndNumbers",
  HexChar: "HexChar",
} as const;

export type characterType = keyof typeof charType;

In this code snippet, we defined a set of character types such as "Letters," "Numbers," "LettersAndNumbers," and "HexChar" using TypeScript's const assertion. We also create a type characterType which is a union of all the keys of the charType object. These character types will be crucial for generating diverse and customizable keys in later steps.

Character Sets

Now we'll create a file named charactersByType.ts to define different character sets based on the characterType selected. Here's the code for charactersByType.ts:

export const charactersByType = {
  Letters: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  LettersAndNumbers: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
  Numbers: "0123456789",
  HexChar: "0123456789ABCDEF",
};

In this code snippet, we've defined four character sets:

Letters: Contains uppercase English letters.
LettersAndNumbers: Combines uppercase letters and numbers.
Numbers: Contains only numerical digits.
HexChar: Includes hexadecimal characters (0-9 and A-F).

These character sets will determine the available characters for generating keys.

Separators

We'll also define the separators that can be used to separate groups of characters within a key. Create a file named separatorType.ts with the following code:

export type separatorType = "-" | "_" | "." | " ";

Here, we've defined a type separatorType that represents four possible separators: hyphen (-), underscore (_), period (.), and space ( ). Feel free to include any characters you might want.

With our character sets and separators defined, we're ready to move on to the next step.

Step 2: Creating the Key Generator Class

Now that we have defined our character types, it's time to create the heart of our key generator: the CodeGenerator class. This class will allow us to generate keys based on various parameters such as the type of characters, the number of groups, separators, and more.

Let's create a index.ts file in our root folder and import our types, shall we?

import { charactersByType } from "./utils/charactersByType";
import { characterType, charType } from "./utils/types/characterType";
import { separatorType } from "./utils/types/separatorType";

Now let's write our interface, which will be implemented by our class.

export interface ICodeGenerator {
  numberOfCharacters?: number;
  generate: () => string[];
}

Since we will receive optional parameters as well, let's create a type called Props and pass the actual properties as optional parameters:

export type Props = {
  characterType?: characterType;
  groups?: number;
  groupSeparator?: separatorType;
  numberOfKeys?: number;
  groupFormat?: string;
};

Finally, let's implement those two and create our class.

export default class CodeGenerator implements ICodeGenerator {
  private _numberOfCharacters: number;
  private _characterType?: characterType;
  private _groupSeparator?: separatorType;
  private _groups?: number;
  private _groupFormat?: string;
  private _numberOfKeys?: number;

constructor(numberOfCharacters: number, props: Props = {} as Props) {
    this._numberOfCharacters = numberOfCharacters;
    this._characterType = props?.characterType ?? charType.LettersAndNumbers;
    this._groups = props?.groups ?? 1;
    this._groupSeparator = props?.groupSeparator ?? "-";
    this._numberOfKeys = props?.numberOfKeys ?? 1;
    this._groupFormat = props?.groupFormat;
  }

In our constructor, I assigned a default value for props, it being an empty object of type Props. That way, Typescript won't complain about it being the wrong type.

Also, we had to assign default values to our props in case they are not passed by the user. I've done that using the nullish coalescing operator to ensure that whenever the value is null or undefined, it will be replaced by our default value.

Step 3: Defining and implementing an auxiliary method

As you can see in the ICodeGenerator interface, we'll have a public method called generate to generate the actual keys.

However, to make the code inside the method cleaner, we'll have one private method to assist us validating our group format (which can only be used in certain circumstances and need to contain only two types of characters).

So, let's first write the code for our abstraction, and afterwards the code of the generate method, which will return an Array of strings.

validateGroupFormat method

The role of this private method is to validate the input of the groupFormat property that can be informed by the user.

There are 2 rules we need to have in mind for this:

The user can only use the groupFormat property when the charType is LettersAndNumbers.
The groupFormat can only contain the letters "L" (for Letters) and "N" (for Numbers).

Also, we need to check if the groupFormat is empty (the user didn't set the property), and if true, skip the entire validation.

Let's check how this method was implemented. I will split the code into 3 parts for better understanding.

private static validateGroupFormat(
  groupFormat: string,
  characters: string,
): void {

  if (!groupFormat) {
    console.log("groupFormat is not defined, skipping validation.");
    return;
  }

Here we've set the method, which will receive the groupFormat and the characters.

Also, our first rule has been set, checking if the groupFormat is null or undefined. This will output on console a message and skip the validation by returning stopping the method.

You can suppress this console.log method if you wish. I decided to keep it for debugging purposes.

Let's continue writing our code. Now we will write the first validation rule.

if (characters != charactersByType.Letters) {
  throw new Error("The grouptFormat can only be used with 'LettersAndNumbers' charaterType!");
}

This will check if the characters is something other than LettersAndNumbers. In other words, it checks if characters is not Letters, Numbers or HexChar, and throw an error if it is.

Now let's see our second and final rule:

const regexStatement = /[N|L]/g;
const matchLetters = groupFormat.match(regexStatement);

if (matchLetters!.length != groupFormat.length) {
  throw new Error("The group format can only contain letters 'L' and numbers 'N'");
}

To check if the groupFormat contains any letters or characters other than "L" and "N", I created a simple RegEx variable that will be used to verify this rule using the match() method that exists in every String.

This match method returns an Array containing all the characters that match the rule set using RegEx. We stored that array in matchLetters.

Afterwards, we compare the length of matchLetters with the length of the groupFormat. If their length are the same, it means all letters are either "L" or "N". If the groupFormat contains some character other than those, matchLetters's length will be smaller than groupFormat's length, since the Array will not contain those characters. In this case, we throw an error which will stop our app.

We are done with this auxiliary method. Now let's dive into the core of our little program: implementing the method for generating the actual keys.

Step 4: Defining and implementing our main method

The good stuff is here.
As before, I will split the code into separate blocks and briefly explain what I did.

public generate(): string[] {
    let characters = charactersByType[this._characterType!];
    const numberOfCharacters =
      this._groupFormat?.length || this._numberOfCharacters;

    CodeGenerator.validateGroupFormat(this._groupFormat!, characters);

First I declared and assigned the characters variable by selecting the characters from inside the charactersByType object. Note that we used the "non-null assertion operator" to ensure Typescript won't yell at us for passing a parameter that could potentially be undefined (We know it won't because we have set a default parameter to it).

Then, a new rule emerges (and you can totally implement this in a different way): if groupFormat is passed by the user, we will replace the property numberOfCharacters, which is mandatory, with the length of the groupFormat.

Here's why: Let's say a developer implement this and assign numberOfCharacters a value of "5", and then pass the groupFormat a value of "LLNLNLL" (7 characters).

Without this rule, the generate method would result a key with 5 characters. However, to ensure the groupFormat is actually respected and generate generates a key with 7 characters, I decided to assign to numberOfCharacters the length of that group, otherwise our loop won't have the necessary number of iterations to return all the characters needed.

On the other hand, if groupFormat has less characters than passed in numberOfCharacters, the problem would have been even worse. Hence the existence of this rule.

But considering this is a design preference, you can totally omit this rule and instead give priority to numberOfCharacters as informed in the constructor of the class. However, to do so, you'll need to adapt the code to either not accept a groupFormat with fewer characters, or define a rule on how the remaining characters would be generated.

But, let's get back on track. In the next line of code we'll call the validateGroupFormat method to ensure it has been passed according to our set of rules.

Next, we will create an Array containing the characters in the groupFormat, which will be used later, and another Array that will receive our actual generated keys.

const groupFormatArr = this._groupFormat
  ? Array.from(this._groupFormat!)
  : [];

let keys: string[] = [];

Now we will create 3 nested for loops, in this order:

The first to iterate on how many keys the user wants to be generated.
The second will iterate on how many groups that key should have.
Finally, the last will iterate on how many characters the key will have.

At the end of the second for loop, after our third loop finishes generating our group of keys, we will check if this is the last (or the only) group. If it's not, it will place our groupSeparator at the end of the characters.

Inside the last for loop, we will need to check if groupFormat was informed, so we can generate the key according to it, and otherwise just generate a key with a random format.

If groupFormat was informed, we will need to check, in each iteration, if the character generated needs to be a Letter or a Number, and reassign characters accordingly.

Next, to generate the character, we will randomly select a number between 0 and the length of characters (using Math.random and Math.floor), and use that number as an index for selecting a character inside characters, using the charAt method of Strings.

Finally, we will finalize the code by returning the keys.

Let's see how this was done:

  for (let count = 0; count < this._numberOfKeys!; count++) {
    let result: string = "";

    for (let groups = 1; groups <= this._groups!; groups++) {
      for (let i = 0; i < numberOfCharacters; i++) {
        if (this._groupFormat) {
          const char = groupFormatArr[i];

          characters =
            char === "L"
              ? (characters = charactersByType[charType.Letters])
              : (characters = charactersByType[charType.Numbers]);
        }

        result += characters.charAt(
          Math.floor(Math.random() * characters.length),
        );
      }

      if (this._groups! - groups != 0) {
        result += this._groupSeparator;
      }
    }

    keys.push(result);
  }

  return keys;
}

This is the end of our code.

Final Step: Generating Keys

Now let's execute it inside another file:

I created a new file called test.js that will import our class, set the props, create a new instance of the class and, finally, generate our keys.

Let's see how it works:

const KeyGenerator = require("./dist/index.js");

const props = {
  characterType: "LettersAndNumbers",
  groups: 3,
  groupSeparator: "-",
  numberOfKeys: 5,
  groupFormat: "LLLNN",
};

const codeGenerator = new KeyGenerator(4, props);

const code = codeGenerator.generate();

console.log(code);

Here I wanted to create 5 keys containing 3 groups each. Each group will have the following format: "LLLNN", where "L" stands for "Letter" and "N" for "Number", as we saw earlier.

I did not inform the groupSeparator, so the default is going to be used.

Notice I instantiated the class with the number 4, meaning I informed I wanted a key containing 4 characters, but I also informed a groupFormat of 5 characters.

Finally, I logged created another variable to receive the result of the generate method.

Notice you can also instantiate and generate the keys in a single line, like this:

const code = new KeyGenerator(4, props).generate();

After running this code, I got this:

[
  'STQ28-LYK19-AFK35',
  'JWK56-DLO89-QUO83',
  'NBC89-FAM05-LFO68',
  'XBS08-ZAX06-TOT61',
  'RUW52-KHC73-BVC16'
]

Observe how we received the right amount of keys with 3 groups each, but each group has 5 characters instead of 4. This is due to our rule that the length of groupFormat will have priority over the numberOfCharacters.

Well, that's it for today.

The full and updated code can be seen here: https://github.com/joaotextor/easy-key-generator

Let me know your thoughts about my first post here on dev.to in the comment section. Was I clear enough? Are there any adjustments you might do in my code?

I hope to get back here soon with more content for y'all.

DEV Community: João Textor

The Gamification of Coding

Table of Contents

TL;DR

The Revolution of Gamification in Coding Learning

Dopamine's Role in Coding Engagement

Psychological Rewards of Error Resolution and Successful Tests

Impact of Visual Feedback on Programmer's Motivation

Organizational Tools: Kanban Boards and Story Points

Linking Gamification, Dopamine Release, and Skill Development

A Beginner Developer 2023 Recap

What I Love in TypeScript

TL;DR

Reasons to Migrate to TypeScript:

Top 3 TypeScript Features:

Learning TypeScript: Strategies for Beginners:

Introduction

Why Migrate from JavaScript to TypeScript?

Enhanced Code Quality and Readability

Improved Collaboration and Maintainability

Superior Tooling and Ecosystem

Top 3 Features Making TypeScript Superior to JavaScript

1. Static Typing

2. Advanced Object-Oriented Programming (OOP) Features

3. Seamless Integration with JavaScript

Struggling to Learn TypeScript? Here’s What to Do

Conclusion

Abstraindo a API Pública do CNJ - DataJud

Stop Manually Uploading Your Site To The Hosting Service

1. Setting up the environment

2. Understanding the configuration

3. Set up the secrets

Using GitHub Actions to Publish a Node Package Automatically

Table of Contents

1. Publish Your Code GitHub Repository

2. Create an NPM Token on npmjs.com

3. Create a GitHub Secret with Your NPM Token

Create an YAML file

Configuring the workflow

Brief explanation of the code

Guidelines

Wrapping up

Building and Publishing Your TypeScript Code as a NPM Package

Table of Contents

TL;DR

First, the requirements

Dependency installing

Logging in to npm

Configuring tsconfig.json

Configure package.json

Explaining the npx fix-tsup-cjs

Building our project

Testing

Publishing

Using Jest to bulletproof a TypeScript Class - Part 2

Using Jest to bulletproof a TypeScript Class - Part 1

Testing the validateGroupFormat method

Empty groupFormat

groupFormat being passed with the wrong type of characterType

groupFormat contains invalid characters

generate method

Generating a random key with the default settings

How to Write a Key Generator using TypeScript

Table of Contents

The File Structure

Step 1: Defining the Types

Character Types

Character Sets

Separators

Step 2: Creating the Key Generator Class

Step 3: Defining and implementing an auxiliary method

validateGroupFormat method

Step 4: Defining and implementing our main method

Final Step: Generating Keys

Explaining the `npx fix-tsup-cjs`

Testing the `validateGroupFormat` method

Empty `groupFormat`

`groupFormat` being passed with the wrong type of `characterType`

`groupFormat` contains invalid characters

`generate` method