DEV Community: Emmanuel Galindo

In short, what to look for when refactoring

Emmanuel Galindo — Sat, 24 Jul 2021 20:45:31 +0000

The goal of software development

The goal of software development is to meet the needs of users with the least possible effort. Software that doesn't serve the needs of its users, simply isn't good software. And since the needs of our users changes often, it's important to make sure that software was designed in order to be changed.

Refactoring the code will help us achieve this goal.

Refactoring is a way of removing or decreasing technical debt and improving the internal structure of our software system.

How? - Improve code structure, readability and scalability from a software system
Condition - Do not alter the external behavior of the code
Why? - Improve internal structure
Consequences - Minimize new bugs due to changes in the code, introduce new features and modify existing ones with ease

Refactoring is the process of changing a software system in such a way that it does not alter the external behavior of the code yet improves its internal structure. It is a disciplined way to clean up code that minimizes the chances of introducing bugs. In essence when you refactor you are improving the design of the code after it has been written.

While refactoring, we should look for:

Ideally, a software system should be flexible, maintainable and scalable.

Flexible: we could alter the code behavior easily without creating side effects.

Maintainable: we could apply refactors easily to improve code structure.

Scalable: we could add new features with less effort.

Scalable forms - React-TS - in 2 custom hooks and 1 object

Emmanuel Galindo — Mon, 10 May 2021 22:30:34 +0000

TL;DR

We are going to have an array of objects that defines our form. The properties from the objects are going to be the properties from the inputs from our form. These objects should have the same interface. The array could be store in the back-end or in a directory in the front-end, its up to you.

Then we are going to have a hook which return an object that will map the properties from the object properties one by one and returns the input component with the properties that we passed. For handle the form I will use the custom hook I created, use-form.

And with a map method we combine and created our form.

I don’t have an exclusive repository for this explanation but I applied it to one side proyect I have.

georgexx009/photos-app

The render form hook is here: https://github.com/georgexx009/photos-app/blob/main/hooks/use-render-form.tsx

The form state hook is here: https://github.com/georgexx009/photos-app/blob/main/hooks/use-form.ts

The properties object is here: https://github.com/georgexx009/photos-app/blob/main/constants/photoForm.ts

Where it is consumed is here: https://github.com/georgexx009/photos-app/blob/main/components/PhotoForm/index.tsx

Situation that caused the creation of this solution

Writing forms is something that almost every coder do for a web application. Most of the times if your application is growing, you would need to add more inputs or delete inputs. Also you could have different forms around the app.

Having the above in mind means that when we write code, we should keep in mind scalability. This will help us to not have to pay technical debts in the future when we need to make changes to the code.

So in this post I’m going to explain one approach to make forms dynamic and scalable with ease.

Render form hook

This hook is basically to return an object, where each property key is a type of input. Example: text, select. You could define whatever works for you because all will be typed. In my app I created only for input and select.

The value of each key is a function, which has as parameter the properties and attributes need it for our input. The important ones to accomplish this are name, value and handleChange params. The name attribute is used by our form hook, later I’m going to explain how use-form works.

The parameter clearBtn is for my project, to show a button to clear the input value easily.

https://github.com/georgexx009/photos-app/blob/main/hooks/use-render-form.tsx

import React from 'react';
import { PhotoForm } from '@types';
import { Select, Input } from '@components'

export const useRenderForm = () => {
    return {
        text: ({
            name,
            label,
            placeholder,
            value,
            handleChange,
            clearBtn
        }: PhotoForm) => (
            <div className="mb-6" key={name}>
                <label
                    htmlFor={name}
                    className="block mb-2 text-sm text-gray-600"
                >
                    {label}
                </label>
                <Input
                    type="text"
                    name={name}
                    placeholder={placeholder}
                    value={value}
                    handleChange={handleChange}
                    clearBtn={clearBtn}
                />
            </div>
        ),
        select: ({
            options,
            value,
            name,
            handleChange,
            label
        }: PhotoForm) => (
            <div className="mb-6" key={name}>
                <label className="block mb-2 text-sm text-gray-600" htmlFor={name}>
                    {label}
                </label>
                    <Select
                        options={options.map(option => ({
                            value: option,
                            label: option
                        }))}
                        name={name}
                        value={value}
                        handleChange={handleChange}
                    />
            </div>
        )
    };
}

Property object

This object will have the values from the params that use render form hook will use. This object could be place and consume in the most combinient way for your application.

The interface that I use is PhotoForm. If you see thats the interface from the params I passed to the function inside use render form hook.

export interface PhotoForm {
  name: string;
  label: string;
  placeholder?: string;
  type: 'text' | 'select';
  value?: string;
  defaultValue?: string;
  handleChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement>) => void;
  options?: string[];
  clearBtn?: boolean;
}

In type, I have a string literal type, these strings are the properties that we should have as properties from the object return by render form hook. This interface is like a mix from properties needed it from both, input text and select. The ones that are unique from an option type should be optional (?), to not cause errors in other parameters.

Most of the inputs I have are a Select component, so I show options. I created a string literal type from the values of the select options object.

export const photoOrientationOptions = [
  'horizontal',
  'vertical',
  'square'
] as const;
export type PhotoOrientation = typeof photoOrientationOptions[number];

And an example of the properties object is:

export const photoFormProperties: PhotoForm[] = [
  {
    name: 'name',
    label: 'Photo name',
    type: 'text',
    placeholder: 'photo name',
    clearBtn: true
  },
  {
    name: 'photoOrientation',
    label: 'Photo orientation',
    type: 'select',
    defaultValue: 'horizontal',
    options: (photoOrientationOptions as unknown) as string[]
  }
]

What I know that could change is the property of options in case that we use a select, I like to use type literals or enums for the options, so this property would be any, because either way literal types are not going to be the same and the same goes for enums. (I set this property to string[] when I choose literal types, but I would need to set the literal type options to unknown and then to string[] with the assertion “as”.

Form Hook

This hook is for handle the state of the form and provide the value state and handleChange for every input in our form.

It is very important that the name attribute from the inputs is the same as the variable state.

I have also handleChangeFile for tiles because I needed it for the photo files from my app, but you could omit this.

import { ChangeEvent, useState } from 'react'

interface UseFormProps<T> {
    initialState: T
}

export const useForm = <T>({ initialState }: UseFormProps<T>) => {
    const [formState, setFormState] = useState<T>(initialState)

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        setFormState(prevState => ({
            ...prevState,
            [event.target.name]: event.target.value
        }))
    }

    const handleChangeFile = (event: ChangeEvent<HTMLInputElement>) => {
        if (!event.target.files?.length) {
      return;
    }

        setFormState(prevState => ({
            ...prevState,
            [event.target.name]: event.target.files
        }))
    }

    return {
        formState,
        setFormState,
        handleChange,
        handleChangeFile
    }
}

Consume the hooks

The component were I consume everything is here:

https://github.com/georgexx009/photos-app/blob/main/components/PhotoForm/index.tsx

import { photoFormProperties } from 'constants/photoForm'

const { formState, setFormState, handleChangeFile, handleChange} = useForm<PhotoFormState>({ initialState: formInitialState })

const renderForm = useRenderForm()

{photoFormProperties.map(property => renderForm[property.type]({
    ...property,
    value: formState[property.name],
    handleChange: handleChange
}))}

Upload a file with React

Emmanuel Galindo — Fri, 30 Apr 2021 04:35:46 +0000

We could make it controlled or uncontrolled as any input with react. Will vary only on how we store the file in the React component.

I don’t have an exclusive repo for this but an app that I’m working on apply this in photo form component and in an endpoint from the API.

georgexx009/photos-app

Controlled

We need an input file type. No value need it.

<input type="file" name="theFiles" onChange={handleChangeFile} />

For the “on change handler” y use one custom hook that helps me with my forms.

This hook has the state from the form, and returns two types of handlers (one for text inputs, and another for files), but you can add more.

import { ChangeEvent, useState } from 'react'

interface UseFormProps<T> {
    initialState: T
}

export const useForm = <T>({ initialState }: UseFormProps<T>) => {
    const [formState, setFormState] = useState<T>(initialState)

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        setFormState(prevState => ({
            ...prevState,
            [event.target.name]: event.target.value
        }))
    }

    const handleChangeFile = (event: ChangeEvent<HTMLInputElement>) => {
        if (!event.target.files?.length) {
      return;
    }

        setFormState(prevState => ({
            ...prevState,
            [event.target.name]: event.target.files
        }))
    }

    return {
        formState,
        handleChange,
        handleChangeFile
    }
}

What we should see here, is that we are going to save event.target.files. If the input supports multiple files then the array will have all the files, but for now is only an array with one element. One thing to point here, is that the name from the input has to be the same as the name from the property in the form state to could save it with the bracket notation which accepts a variable.

Then, to being able to send it, we have to append the file to a FormData object.

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data”.
MDN - https://developer.mozilla.org/en-US/docs/Web/API/FormData

const formData = new FormData();

Array.from(formState.theFiles).forEach((file: any) => {
    formData.append('theFiles', file);
});

One core point to mention here is that the key we use to save our file has to be the same we use in the back when we call Multer method. Is up to you if you change the way of handle this.

And finally, we call our fetch method with axios.

const config = {
    headers: { 'content-type': 'multipart/form-data' }
};
const response = await axios.post('/api/photos', formData, config);

Server

For the endpoint we will need Multer to manage our file.

multer

A simple configuration will be:

const oneMegabyteInBytes = 1000000;
const outputFolderName = './public/uploads';

const upload = multer({
  limits: { fileSize: oneMegabyteInBytes * 2 },
  storage: multer.diskStorage({
    destination: './public/uploads',
    filename: (req, file, cb) => cb(null, file.originalname),
  }),
});

And we set as middleware the call from this.

upload.array('theFiles')

This will set in our request object a files property with our files/file.

UX advices to create a good web app

Emmanuel Galindo — Fri, 16 Apr 2021 02:14:40 +0000

Place user in control of the interface

Make actions reversible. Be forgiving

A user should never be wondering:

Where am I?
How did I get to this screen?
What do I need to press in order to do my task?
What is this button for?

Provide informative feedback - be acknowledging

Show the visibility of system status.

Users are much more forgiving when they have information about what is going on and are given periodic feedback about the status of the process.

Accommodate users with different skill levels.

Once users are familiar with a product, they will look for shortcuts to speed up commonly used actions. You should provider fast paths for experienced users by enabling them to use shortcuts.

Make it comfortable for a user to interact with a product

Eliminate all elements that are not helping your users.

Don't ask users for data they've already entered.

When designing a product, it’s important to use language that is easy to read and understand.

Short flows and bigger targets (inputs)

It’s better to design large targets for important functions (big buttons are easier to interact with).

Also reduce the total number of targets that user interact with to complete a given task.

Metaphors

Use real-world metaphors. Metaphors are often used to make the unfamiliar familiar.

Effective error messages as return

An effective error message is a combination of explicit error notification together with hints for solving the problem.

Try to either eliminate error-prone conditions or check for them and present users with a confirmation dialog before they commit to the action.

Don't loose work while refreshing

Ensure that users never lose their work. Accidentally refresh a web page with a form that has user input.

Don't make the user think

Reduce cognitive load. It’s better to avoid making users think or work too hard to use your product.

Service example to sync the database with data from a third party API (with tests)

Emmanuel Galindo — Wed, 14 Apr 2021 03:42:25 +0000

Service example to sync the database with data from a third party API (with tests)

Situation

Imaging you have an app which creates data in your database base on a third party API (this doesn’t mean that you replicate the data from the third party in your database, is more like if something changes in the third party app, then you create something in your DB base on that). This means that when the data changes in the third party, probably you will need to delete or create data in your database (model).

I’m going to explain you one approach for doing this with a list (array) of data. It includes the tests for the functions.

UI Example

I made an App with Next.js that consumes this services. Basically it fetch Pokemons from the https://pokeapi.co and saves them in a global variable that would simulate a database. It has a number input used as an “until this id” to fetch Pokemons, so we can simulate a change in a third party API that will trigger our sync service. Also, it shows a list with the current Pokemons saved and on the right side it shows which Pokemons were delete or create by the sync service.

DEMO: https://sync-db-app.vercel.app

Repository: https://github.com/georgexx009/sync-DB-app

Functions

We are going to divide our service in 4 functions. One it is going to coordinate the whole process, would be like the root of the service (syncDb). Also another to check which entities are going to be add to the database and which ones are going to be deleted, something like reducing an array (reduceSyncList). And the last two are for deleting and adding to our database.

Reduce sync list

This function should has two parameters. One is going to be your data list and the other is going to be the third party data list. If it possible, define the interface of how it looks the data from the 3rd party API, this will make your coding more easy.

interface Params {
    internalData: InternalData;
    externalData: ExternalData;
}

interface ReducedSyncList {
  toDelete: InternalData[]
  toAdd: ExternalData[]
}

export const reduceSyncList = ({ internalData, externalData }: Params): ReducedSyncList => {}

Observe that the property toDelete has the interface from your internal data. This is because the data that is going to be deleted comes from your database and the data that is going to be added comes from an external source.

You could add a mapper function to help you with this. What I would do is to map the external data to reduce it to only what I need. Also will help me to differentiate each type of data.

The first step in our reduce sync list function is to create an object, map each element from the internal data, place as key the externalID and as value the element it self. This would help us when we search each external element with the internal elements, making time complexity of O(N) instead of O(N^2).

const mappedInternalData = internalData.reduce((obj, el) => {
        return {
            ...obj,
            [el.externalId]: el
        }
    },{})

The second step is to find which external elements doesn’t exist in our DB (internal data). We are going to use a reduce and make the comparison statement searching the id from the external in the object that we created. Observe that this search takes O(1).

If it exists, we are going to delete the property from the object. Because we use spread to created the new object, we are not pointing to the same space of memory, we use a new one. If it doesn’t exists, we are going to add it to the new array with the elements that are going to be added.

const toAddList: ReducedSyncList['toAdd'] = externalData.reduce((syncLists, el) => {
    if (mappedInternalData[el.id]) {
      delete mappedInternalData[el.id]

      return syncLists
    }
    return [el ,...syncLists]
  }, [])

The third step is to get the ones that are going to be deleted. If they remain in the mappedInternalData, that means that doesn’t exist in the external source and if it is want you need, we are going to delete it.

We use Object.values which returns an array of the values from an object.

const toDeleteList: InternalData[] = Object.values(mappedInternalData)

And finally we return the object with the results.

return {
        toAdd: toAddList,
        toDelete: toDeleteList
  }

Create and delete DB record

I separate this to have more clean clode but is up to you. These functions are for using the ORM from your preference and interacting with your DB. Since this post is more focus on the sync service instead of saving the data in the DB, I’m going to mock this but you can use Sequelize, typeORM, mongoose or whatever works for you.

Im going to return a promise with a setTimeOut simulating a query to the DB.

const createDbRecord = ({ externalElement }: { externalElement: ExternalData }): Promise<InternalData> => {
    // simulating being connected with a database
    // use any orm of your preference
    const newID = generatorID();
    const mapped = mapExternalToInternal({ id: newID, externalData: externalElement });
    // SAVE IN DB
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(mapped)
        }, 200)
    });
}

const deleteDbRecord = ({ id }: { id: number }): Promise<boolean> => {
    // use try/catch, sometimes ORMs like Sequlize only returns a confirmation
    // if there is an error, return false
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true)
        }, 200)
    })
}

Sync DB function

This function coordinates everything. We are going to have an interface that represents the results from our operations. I use this to only now the status of my operations and have a goog log or even repeat the operation for the ones that failed.

interface ResultOperation {
  id: number
  name: string
  status: boolean
}

let deleteResults: ResultOperation[] = []
let createResults: ResultOperation[] = []

Then we call our reduce function and we are going to iterate through the results to make our queries to our database. The only thing that I think should be said here is to remember how the array of promises works. We created the array with the map method, and then we use Promises.all() to retrieve the results.

const syncList = reduceSyncList({ internalData, externalData });

    if (syncList.toAdd.length > 0) {
        const arrayPromises = syncList.toAdd.map(async (el) => {
            const elCreated = await createDbRecord({ externalElement: el })
            return {
                id: el.id,
                name: el.name,
                status: elCreated ? true : false
            }
        });

        createResults = await Promise.all(arrayPromises);
    }

    if (syncList.toDelete.length > 0) {
        const arrayPromises = syncList.toDelete.map(async (el) => {
            const elDeleted = await deleteDbRecord({ id: el.id })
            return {
                id: el.id,
                name: el.name,
                status: elDeleted
            }
        });

        deleteResults = await Promise.all(arrayPromises);
    }

Finally we return again the results from the syncronization service.

Tests

I have a function to create the test data because I don’t want to have a file with the data.

I’m going to use the poke API, and from there create the data, internal and external data. Only I’m going to map the internal data because I’m simulating that I already process it and it is what I need to save in my database. And the external data will be as it comes from the API.

const createTestData = async (): Promise<{ externalData: ExternalData[], internalData: InternalData[] }> => {
    const generatorID = generateID({ initialID: 1 });
    const promises = [1,2,3,4,5].map(async (i) => {
        const res = await fetch('https://pokeapi.co/api/v2/pokemon/' + i);
        const data = await res.json();
        const newID = generatorID()
        return {
            internal: mapExternalToInternal({ id: newID, externalData: data }),
            external: data
        }
    })

    const data = await Promise.all(promises);

    return data.reduce((result, data) => {
        return {
            internalData: [...result.internalData, data.internal],
            externalData: [...result.externalData, data.external]
        }
    }, {
        externalData: [],
        internalData: []
    })
}

If you see, I have a fun function called generateID, I created it to generate my IDs (just numbers) to maintain the code simple. This is a clousure, that receives an initial ID number and from there every time the function returned is called, it increments the number count and returns it.

export const generateID = ({ initialID = 1 }: { initialID?: number } = {}) => {
    let ID = initialID;
    return () => {
        ID = ID + 1;
        return ID;
    }
}

Then, the tests consist on the escenarios to add a new element, to delete one and when there is no changes.

Depending on the test case, im going to add a mocked element to set the right context. The full test suites are in the repo.

describe('reduce sync list', () => {
        let externalData: ExternalData[];
        let internalData: InternalData[];

        beforeAll(async () => {
            const testData = await createTestData();
            externalData = testData.externalData;
            internalData = testData.internalData;
        });

        test('there is one to be deleted', () => {
            const internalDataWithOneInactive = [
                ...internalData,
                deletedInteralPokemon
            ];

            const result = reduceSyncList({ internalData: internalDataWithOneInactive, externalData });
            const { toAdd, toDelete } = result;
            expect(toAdd.length).toBe(0);
            expect(toDelete.length).toBe(1);
        });

        test('there is one to be added', () => {
            const externalDataWithOneNew = [
                ...externalData,
                newExternalPokemon
            ];
            const result = reduceSyncList({ internalData, externalData: externalDataWithOneNew });
            const { toAdd, toDelete } = result;
            expect(toAdd.length).toBe(1);
            expect(toDelete.length).toBe(0);
        });

        test('there is no changes', () => {
            const result = reduceSyncList({ internalData, externalData });
            const { toAdd, toDelete } = result;
            expect(toAdd.length).toBe(0);
            expect(toDelete.length).toBe(0);
        })
    })

Tip for making good reusable components - React TS

Emmanuel Galindo — Wed, 07 Apr 2021 03:51:31 +0000

When we are coding an app, most of the time we have a button or an input component in our components directory to reuse across the entire application. And what makes them reusable are their props.

One thing that I found really useful is to add at the end of destructuring the props an spread. With that I could pass different attributes for the specific html tag (button, input, etc).

const Button = ({x, y, …restProps}) => {
    return <button {…restProps}>btn</button>
}

And good news are that there is someway of doing with types.

JSX.IntrinsicElements[] accepts an array of strings with the tag elements and we get the typed attributes.

type DefaultInputProps = JSX.IntrinsicElements['input'];

Nice. And we could extend them with the props types from our component.

And in the case that we want to replace the default types of certain properties because we are going to apply ours, we just omit them with the utility type Omit.

import { ChangeEvent, RefObject } from 'react';

type DefaultInputProps = Omit<JSX.IntrinsicElements['input'],
    'name' | 'label' | 'value' | 'placeHolder'
>;

export interface InputProps extends DefaultInputProps {
    name?: string;
    label?: string;
    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
    value?: string;
    placeHolder?: string;
    ref?: ((instance: HTMLInputElement) => void) | RefObject<HTMLInputElement>
}

Since the idea of this components is that they don’t handle their logic and state, they mostly will receive as props these properties.

Minimal setup for React app with Webpack as bundler

Emmanuel Galindo — Wed, 16 Sep 2020 19:43:04 +0000

Hello There!

This is a post where I share the minimum set up for React application in development stage as it renders the application in the browser (client side), which in production I don't recommend doing this. It uses webpack for bundle the JS code and Babel for traspile it.

The files content is above, for make it simple I won't go in detail for every file.

Find the repo:
Github Repository

Summary

When we run the script npm run dev , which uses webpack-dev-server --mode development to start the process for server our application. Webpack will take the entry file to bundle it.

Webpack will use the index.js from entry property. If it is not declared, don't worry, it is the default value. Also, webpack uses a babel-loader for traspile the JS code. Babel requires a .babelrc file that stablish the presets, in this case "@babel/preset-env", "@babel/preset-react" , env is for general JS and preset-react for React code. Then, Webpack uses HtmlWebpackPlugin for attached the bundled JS content, so it could be render in the browser.

Create any React application code, that renders with React DOM.

Obviously I add .gitignore to remember everyone to not add node_modules directory to the repository.

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: './index.html',
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [htmlPlugin],
};

// scripts and dependencies need it

"scripts": {
  "dev": "webpack-dev-server --mode development"
},
"dependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1"
},
"devDependencies": {
  "@babel/core": "^7.11.6",
  "@babel/preset-env": "^7.11.5",
  "@babel/preset-react": "^7.10.4",
  "babel-loader": "^8.1.0",
  "html-webpack-plugin": "^4.4.1",
  "webpack": "^4.44.1",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
}

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>src</title>
  </head>
  <body>
    <section id="root"></section>
  </body>
</html>

// index.js

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<h1>React app</h1>, document.getElementById('root'));

.gitignore

/node_modules
/dist

Luhn’s algorithm - verify credit cards - GO

Emmanuel Galindo — Tue, 15 Sep 2020 00:27:47 +0000

Check out the repository
repo

The explanation is from course CS50 from HarvardX, the algorithm in GO is my approach. It just uses mathematics.

Algorithm from Hans Peter Luhn of IBM for validate credit cards in GO
A credit (or debit) card, of course, is a plastic card with which you can pay for goods and services. Printed on that card is a number that’s also stored in a database somewhere, so that when your card is used to buy something, the creditor knows whom to bill. There are a lot of people with credit cards in this world, so those numbers are pretty long: American Express uses 15-digit numbers, MasterCard uses 16-digit numbers, and Visa uses 13- and 16-digit numbers. And those are decimal numbers (0 through 9), not binary, which means, for instance, that American Express could print as many as 10^15 = 1,000,000,000,000,000 unique cards! (That’s, um, a quadrillion.)

Actually, that’s a bit of an exaggeration, because credit card numbers actually have some structure to them. All American Express numbers start with 34 or 37; most MasterCard numbers start with 51, 52, 53, 54, or 55 (they also have some other potential starting numbers which we won’t concern ourselves with for this problem); and all Visa numbers start with 4. But credit card numbers also have a “checksum” built into them, a mathematical relationship between at least one number and others. That checksum enables computers (or humans who like math) to detect typos (e.g., transpositions), if not fraudulent numbers, without having to query a database, which can be slow. Of course, a dishonest mathematician could certainly craft a fake number that nonetheless respects the mathematical constraint, so a database lookup is still necessary for more rigorous checks.
Luhn’s Algorithm

So what’s the secret formula? Well, most cards use an algorithm invented by Hans Peter Luhn of IBM. According to Luhn’s algorithm, you can determine if a credit card number is (syntactically) valid as follows:

Multiply every other digit by 2, starting with the number’s second-to-last digit, and then add those products’ digits together.
Add the sum to the sum of the digits that weren’t multiplied by 2.
If the total’s last digit is 0 (or, put more formally, if the total modulo 10 is congruent to 0), the number is valid!

That’s kind of confusing, so let’s try an example with David’s Visa: 4003600000000014.

For the sake of discussion, let’s first underline every other digit, starting with the number’s second-to-last digit:

4003600000000014

Okay, let’s multiply each of the underlined digits by 2:

1•2 + 0•2 + 0•2 + 0•2 + 0•2 + 6•2 + 0•2 + 4•2

That gives us:

2 + 0 + 0 + 0 + 0 + 12 + 0 + 8

Now let’s add those products’ digits (i.e., not the products themselves) together:

2 + 0 + 0 + 0 + 0 + 1 + 2 + 0 + 8 = 13

Now let’s add that sum (13) to the sum of the digits that weren’t multiplied by 2 (starting from the end):

13 + 4 + 0 + 0 + 0 + 0 + 0 + 3 + 0 = 20

Yup, the last digit in that sum (20) is a 0, so David’s card is legit!

So, validating credit card numbers isn’t hard, but it does get a bit tedious by hand.

package main

import (
    "fmt"
    "strconv"
)

// 4003600000000014 - VISA
// it doesn't use arrays or struct
// pure mathematic solution

func main() {
    // get card number
    var cardNumber int = -1
    for cardNumber == -1 {
        cardNumber = getCardNumer()
    }

    // get the number of digits from the card
    numDigits := getNumberDigitsCard(cardNumber)

    // AUX VARIABLES ---------------------------
    // aux vars for iterate through the card number
    mod := 10
    divider := 1
    // aux for know the ieration, because it goes from right to left
    var generalOdd bool = (numDigits % 2) != 0
    // aux var for iterate one yes - one no
    odd := generalOdd
    // accumulators
    ac1 := 0 // special - the one that will be multiple by 2
    ac2 := 0 // odds - start from the second digit

    // ITERATE CARD NUMBER
    for cardNumber > divider {

        // get the digit from the right
        var currentVal int = (cardNumber % mod) / divider

        // move one digit to the left
        mod = mod * 10
        divider = divider * 10

        // LOGIC FROM Hans Peter Luhn ALGORITHM
        // make the sum step from digits
        if odd {
            if !generalOdd {
                ac1 = ac1 + specialSum(currentVal)
            } else {
                ac1 = ac1 + currentVal
            }
        } else {
            if generalOdd {
                ac2 = ac2 + specialSum(currentVal)
            } else {
                ac2 = ac2 + currentVal
            }
        }
        odd = !odd
    }
    var result int = ac1 + ac2

    // CHECK THE RESULT
    // compare the info given from the credit cards
    var cardType string = checkResult(result, numDigits, cardNumber)
    fmt.Println(cardType)
}

func getCardNumer() int {
    // get the value
    var str string = ""
    fmt.Print("Enter a card number: ")
    fmt.Scanf("%s", &str)

    // convert value
    cardNumber, err := strconv.Atoi(str)

    // handle error if no number was provided
    if err != nil {
        fmt.Println("Enter only numbers")
        return -1
    }

    return cardNumber
}

func getNumberDigitsCard(card int) (numDigits int) {
    divider := 10
    // because is an int, will delete the decimals from each division
    for card != 0 {
        card = card / divider
        numDigits += 1
    }
    return
}

// SPECIAL SUM
// because the log says if multiple by 2 is equal to a number with two digits
// we should sum the two digits from the number
func specialSum(num int) int {
    if num < 5 {
        return num * 2
    } else {
        num = num * 2
        var n1 int = num % 10
        var n2 int = num / 10
        return n1 + n2
    }
}

// CHECK THE RESULT
// compare the info given from the credit cards
func checkResult(result, numDigits, cardNumber int) string {
    if (result % 10) == 0 {
        var divisor int = 1
        for i := 0; i < numDigits-2; i++ {
            divisor = 10 * divisor
        }
        var firstDigits int = cardNumber / divisor
        var firstDigit = firstDigits / 10
        if firstDigits == 34 || firstDigits == 37 {
            if numDigits == 15 {
                return "AMEX"
            } else {
                return "INVALID"
            }
        } else if firstDigits == 51 || firstDigits == 52 || firstDigits == 53 || firstDigits == 54 || firstDigits == 55 {
            if numDigits == 16 {
                return "MASTERCARD"
            } else {
                return "INVALID"
            }
        } else if firstDigit == 4 {
            if numDigits == 13 || numDigits == 16 {
                return "VISA"
            } else {
                return "INVALID"
            }
        }
    }
    return "INVALID"
}

SSR Boilerplate app - consumes markdowns

Emmanuel Galindo — Wed, 09 Sep 2020 18:09:15 +0000

Create a SSR app that consumes Markdown files to create a post block.

Create dynamically routes for MK files
Set webpack SSR
Consume data from MK files
Get list of MK files

Summary

This is a Boilerplate app for a blog webpage. It uses Server Side Rendering with Webpack 4 and consume Markdown files for populate post pages.

Hello There!

I want to share my repository of a Boilerplate blog application. This application makes the rendering on the server side when the user request the webpage. We all know this as Server-Side-Rendering. It includes two examples: one that returns an static web page (only the html) and another one that includes a JS file that will make more dynamic the webpage. This JS file is bundled and transpiled by Webpack and Babel. Redux is already set, so we can interact with it in case you want to add more functionalities to your application. Finally, I mentioned that is a Blog app, so it shows you how to consume markdown files to be rendered as HTML files.

A personal tip is that use Private Window, and be carefull with the cache from the browser

Overview

Initial steps for both scenarios

The app is running (Node.js + Express)
When Node.js starts, it reads all the MarkDown files and save the content in an object.
The user makes the request

Then, the server process the request. Here are two options for SSR.

Generate static files

Renders the component
If need it, it injects HTML content (markdown content transformed)
Set the full HTML template
Send final HTML file

Generate static files with React+Redux functionality

Create the Redux Store with any initial data
Add the Provider component with the Store created to the app component
Render this new component
Start setting the full HTML template
Save the state from the Store in the window variable
Add in the Script tag, the JS file with our application logic (React app)
Apply the rest of the elements to complete the HTML template
Send final HTML file

How to SSR with Webpack?

Lets see the process.

So, the script command first makes the transpile and bundle process with webpack and then run the node.js server.

"scripts": {
    "start": "webpack --mode production && node index.js",
    "dev": "webpack --mode production && nodemon index.js",
    "build": "webpack --mode production"
  },

Webpack Configuration

The output from Webpack is the JS file that will be call on the tag script from our final HTML file (in case is not a completly static file). This file needs to be serve as static by our server to let the HTML interact with it.

Find the webpack configuration file below:

// webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    client: './src/ssr/reactiveRender/client.js',
  },
  output: {
    path: path.resolve(__dirname, 'assets'),
    filename: '[name].js',
  },
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }],
  },
};

The entry file will be as a normal React render file but with two differences.

import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from '../../redux/configureStore';

import Home from '../../sections/Home';

const state = window.__STATE__;
delete window.__STATE__;
const store = configureStore(state);

hydrate(
  <Provider store={store}>
    {' '}
    <Home />{' '}
  </Provider>,
  document.querySelector('#app')
);

The step with window.__STATE__ is for get the Redux Store generated on the server and pass it to the JS that the client side will use.

Then we use hydrate() instead of render(). Both are mostly the same but hydrate() is used to hydrate elements rendered by ReactDomServer. It ensures that the content is the same on the server and the client.

Node.js Server

As most of the times, lets use express for make things easier. Our index file for this will the normal express set up + importing babel register.

Babel/register is used in test environment. Is for register babel into nodes runtime. The require hook will bind itself to node's require and automatically compile files on the fly.

This is done when we need to run babel without a build step like webpack of rollup, and run babel on the fly.

So, importing in our index.js file will help us to use ES6 syntax because this code that runs the node.js server will not pass through webpack.

We set a path for send back our rendered page. We will use "/" for this.

// mw function to start SSR

// render page with list of posts
//
app.get('/', async (req, res) => {
  // render our HTML file
  const finalHtml = await ssrV2({
    content: listPages.pageTitles,
    Component: Home,
  });

  res.setHeader('Cache-Control', 'assets, max-age=604800');
  res.send(finalHtml);
});

I made another path for the reactive page.

app.get('/reactive_page', (req, res) => {
  // render Home Reactive component
  // include js file which also contains Redux
  const finalHTML = ssrReactive(listPages);
  res.send(finalHTML);
});

SSR module

The key here, is renderToString . It receives our React app and renders it on the server. Now we have HTML content that will be inject in our final HTML. This enables you to render React components to static markup.

Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
If you call ReactDOM.hydrate() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

// ssr module

import React from 'react';
import { renderToString } from 'react-dom/server';

import remark from 'remark';
import html from 'remark-html';
import template from './template';

// render a component and inserts content to it
// returns an HTML file
const ssr = async ({ content = '', Component, htmlContent = '' } = {}) => {
  // convert the mk content into html syntax
  const contentHtml = await remark().use(html).process(htmlContent);
  let appContent = renderToString(
    <Component content={content} htmlContent={contentHtml} />
  );

  // create a full HTML file with app content
  const fullHtml = template('Post', appContent);

  return fullHtml;
};

export default ssr;

Also we have the option to render our components with Store content.

We create our Redux store and pass it to the Provider Higher Order Component.

Finally, we save the current store status.

import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';

import configureStore from '../../redux/configureStore';
import template from './template';
import HomeReactive from '../../sections/HomeReactive';

/*
  creates the preloaded state from the Redux store

  renders the content that will be injected to the html file
  in the server side, to be sent to the client
*/
const srr = initialState => {
  // init our redux store
  const store = configureStore(initialState);

  // render our app content and returns a HTML string
  let appContent = renderToString(
    <Provider store={store}>
      <HomeReactive />
    </Provider>
  );

  const preloadedState = store.getState();

  const finalHtml = template('reactive app', preloadedState, appContent);
  return finalHtml;
};

export default srr;

Template module

This module sets the rest of the HTML file content. Then we set the redux store in the window object. You will see in a moment where we will consume it.

This HTML file returned is the one that our node.js server will return as static file.

If you don't need a script attached, you could delete it and send a complete static file.

// html skeleton provider
export default function template(title, initialState = {}, content = '') {
  let scripts = ''; // Dynamically ship scripts based on render type
  if (content) {
    scripts = ` <script>
                   window.__STATE__ = ${JSON.stringify(initialState)}
                </script>
                <script src="assets/client.js"></script>
                `;
  }

  let page = `<!DOCTYPE html>
              <html lang="en">
              <head>
                <meta charset="utf-8">
                <title> ${title} </title>
                <link rel="stylesheet" href="assets/style.css">
              </head>
              <body>
                <div class="content">
                   <div id="app" class="wrap-inner">
                      ${content}
                   </div>
                </div>
                  ${scripts}
              </body>
              `;

  return page;
}

What is a MarkDown file?

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

The process for consume these markdown files is next one:

Display the list of posts (each post is a markdown file)
When the user request a post page, the server will render it with the information from the markdown
Send the HTML file

We have two core points here, get the list of posts and consume the markdown file depending on the page requested. Lets check the first one.

Get the list of posts (markdown files)

This will be a module that will read the content directory and will get each name from the files.

export default function getAllPages() {
  const pagesLayers = {};

  // separate directories from files in the content directory (initial)
  const dividedElements = readFilesProcess(process.cwd(), 'content');

  // save the root pages
  pagesLayers['root'] = dividedElements.pages;

  // start reading deeper directories
  dividedElements.directories.forEach(directory => {
    readProcess(directory, path.join(process.cwd(), 'content'));
  });

  // this function is a clousure, because we need to access pagesLayers 
    //to keep tracking the result
  function readProcess(directory, directoryPath) {
    // separate directories from files
    const dividedElLayer = readFilesProcess(directoryPath, directory);

    // save pages from current directory
    pagesLayers[directory] = dividedElLayer.pages;

    // check if there are more directories to check in the current layer
    if (dividedElLayer.directories.length !== 0) {
      // pass the current layer path to could keep going deeper
      dividedElLayer.directories.forEach(directory => {
        readProcess(directory, layerPath);
      });
    }
  }

  return pagesLayers;
}

The variable pagesLayers will save the file names. We can have directories inside the content directory, and they will be save as properties inside pageLayers.

The process consists mainly of reading the files in the directory, separate them into pages (md files) and sub-directories, save the pages in pagesLayers variable and repeat with the sub-directories.

The readFilesProcess function receives a path and a target directory. It will read the files from the target directory. Finally it separates the markdown files from the directories.

// read the elements from target directory
function readFilesProcess(startPath, targetDirectory) {
  // get full path of the directory
  const layerPath = path.join(startPath, targetDirectory);
  // read all files
  const layerFiles = fs.readdirSync(layerPath);

  const accumulator = {
    pageTitles: [],
    fullPages: {},
    directories: [],
  };

  // separate the files in pages and directories
  return layerFiles.reduce((accumulator, currentVal) => {
    // avoid adding next.js files that are not pages
    if (currentVal.endsWith('.md')) {
      // read the file
      const fileContent = fs.readFileSync(layerPath + `/${currentVal}`, 'utf8');
      const newPage = {
        title: currentVal,
        content: fileContent,
        //content: 'content',
      };
      accumulator.fullPages[currentVal] = newPage;
      accumulator.pageTitles.push(currentVal);
    } else {
      accumulator.directories.push(currentVal);
    }
    return accumulator;
  }, accumulator);
}

I am assuming that you don't add any other file than .md but if you do, just change the algorithm.

An example of the structure of the object returned is:

{
  pageTitles: [ 'Minimum_Spanning_Tree.md', 'crud_app.md', 'set_up_prisma.md' ],
  fullPages: {
    'Minimum_Spanning_Tree.md': { title: 'Minimum_Spanning_Tree.md', content: 'content' },
    'crud_app.md': { title: 'crud_app.md', content: 'content' },
    'set_up_prisma.md': { title: 'set_up_prisma.md', content: 'content' }
  }
}

The pageTitles property is for render the menu of all the posts. And the fullPages property has the content for the post pages.

Boilerplate with MERN Stack + Redux + JWT for registration, login and authentication of users with CRUD operations.

Emmanuel Galindo — Fri, 28 Aug 2020 19:33:09 +0000

Repository

Github Repo

About

Boilerplate with MERN Stack + Redux + JWT for registration, login and authentication of users with CRUD operations for users posts.

Introduction

This boilerplate can be used as the basis for an application that needs to authenticate, register and log in users. For the authentication process, it uses a JSON Web Token that validates the user before performing certain operations.

In addition, it shows as an example CRUD operations for posts that relate to each user. Only the posts of the logged user can be modified.

The application uses custom hooks that make it easier to change the logic of the application and allow everyone customize it for their own needs.

Just want it to try it?

The application is stored at https://georgexx009.herokuapp.com/ . Feel free to try it out.

To test it on your own computer:

Add your mongodb uri in .env file in the server directory.
Run npm install
Go to the server directory (server side). Run npm run dev
In the root (another tab), (client side) run npm run dev

Overview from app structure

The client side is made with React.js. Lets you divide the page into components and seperate the logic from the view. To centralize the data, it uses Redux. It might be a bit difficult to understand at first, but once you get it, you will see the full benefits from of it. To manage the different routes, it uses React Router.

The server side is really simple. It is made in Node.js with Express. For communicate with the Database, it uses Mongoose as MongoDB Object Modeling.

The Database is a MongoDB. You could use it locally or in the cloud, you just need the mongo URI. I want to clarify that I do not recommend using Mongo as Database if you project has many relationships. This one is really simple because it only manages users who owns posts. In other cases, use a relational Database (PostgreSQL project comming soon).

Client side - How it works

First, create your own environmental file with your Prod API URL. An example is already provided and webpack is already configured to consume an .env file.

For testing, Jest is already configured. Just add a file ending with .test.js to create a test for your different modules.

The componentsV2 directory is divided into two types of components, containers and UI (presentational). I tried to separate most of the main logic from the components and set it on custom hooks. In that way, everyone could consume those hooks into their own components.

Warning! Those custom hooks dispatch many Redux actions as they modify data in the store.

The services directory holds all the JS modules that handle the API calls. I could say that this could be also implemented within Redux Middleware, but I prefer it this way for better debugging.

Server side - How it works

As on the client, create your own environmental file with the mongo URI of your database.

The server application is really simple. The routers directory manages the routers (I know hahah), there we only set the paths and import the middleware functions that are stored in the middleware directory. The middleware functions manage the logic of the operations and use the controllers to interact with the database.

In the database directory we set the models for our mongo documents. Here, the database configuration is also set.