DEV Community: Shanoy Sinclair

Built Fitur! a Trello Clone in ReactJS

Shanoy Sinclair — Sun, 14 Mar 2021 02:36:30 +0000

I spent the last couple of weeks creating this full-stack application to increase my understanding of how the web works and how the frontend and backend is connected. There is a lot of things I would of done differently if I was to start again like:

Think about the Minimum viable product(MVP) this will help you to clear your thoughts and not worry about features that are not yet needed. This was a really big issue for me adding code for features I did not yet need. Some of those feature was not worth it to implement causing me to waste a lot of time and causing a messy code base which I had to fix.
I don't know if this one will help anyone but try to think about the project on a whole and how each feature is connected and break it down to small pieces this also helped me to write cleaner code. for this project there is still a lot of work to be done.

Main technologies used in this project

react
nextjs
react-query - state management
mongoDB/mongoose - database
next-auth - authentication
Typescript
react-beautiful-dnd - drag and drop
framer-motion - animation
react-toastify - toast notification

demo: https://fitur.herokuapp.com/
code: https://github.com/shanoysinc/fitur

my-portfolio: https://shanoysinc.vercel.app/

Would love to here your feedback on this project! ❤️

Create redux in 28 lines of code

Shanoy Sinclair — Tue, 15 Sep 2020 03:00:05 +0000

Its such an eye opener when you learn to create the tools you are using and get a glimpse of how some of its functionality works under the hood.

function createStore(reducer, initialState) {
    let state = initialState;

    function getState() {
        return state;
    }

    function dispatch(action) {
        state = reducer(state, action);
    }

    return { dispatch, getState };
}

function reducer(state = [], action) {
    switch (action.type) {
        case "add":
            return [...state, action.payload];
        default:
            return state;
    }
}

const store = createStore(reducer);
store.dispatch({ type: "add", payload: "learn to code" });
store.dispatch({ type: "add", payload: "react" });
store.getState();
//[ 'learn to code', 'react' ]

inspired by: typeofnandev

Understanding what Static does in Javascript

Shanoy Sinclair — Sat, 12 Sep 2020 02:18:52 +0000

I am sure you have probably watched a tutorial of Javascript where the instructor have used the static method on a class and not fully explain what static even does. Here is a simple explanation of what the functionalities are as stated by the Mozilla Developer Network.

The static keyword defines a static method for a class. Static methods aren't called on instances of the class. Instead, they're called on the class itself. These are often utility functions, such as functions to create or clone objects eg.

class Greet {
    static sayHi() {
        console.log("hello");
    }
}
Greet.sayHi(); // return 'hello'

If we were to create an instance and call the method sayHi on that instance we would get a TypeError of not a function eg.

const greeting = new Greet();
greeting.sayHi(); // return TypeError: greeting.sayHi is not a function

For more information on Static methods: click here

Understanding Call, Apply and Bind by creating them - Javascript

Shanoy Sinclair — Sun, 30 Aug 2020 02:04:27 +0000

Creating stuff with the tools that you are using is pretty fun but you know what's amazing is when you know how to create the tools that you are using. So I started to experiment with small javascript methods such as call, apply, and bind. I even created react virtual dom and Git but I will leave that for another post. So let's get into it starting with the Call method!

The JavaScript call() Method

The call method allows us to change what the this value of a function is point to eg.

function greeting(lan) {
    console.log(`My name is ${this.name} and I am learning ${lan}`);
}

let Shanoy = {
    name: "Shanoy",
};

let Lamar = {
    name: "Lamar",
};

If we were to call the greeting function the this.name would point to the Global window object and search for a property called name. But that's not what we want. We want it to point to an object that we specify which is Lamar and Shanoy

greeting.call(Shanoy, "React"); 
//return My name is Shanoy and I am learning React


greeting.call(Lamar, "Vue"); 
//return My name is Lamar and I am learning Vue

Did you see that? The call method is now pointing to Lamar and Shanoy Object. Now that you understand call lets implement our own which is quite simple

Object.prototype.calling = function (obj, ...args) {
    const newObj = Object.assign({}, obj, { newMethod: this });
    return newObj.newMethod(...args);
};

greeting.calling(Shanoy, "React");
//return My name is Shanoy and I am learning React

greeting.calling(Lamar, "Vue");
//return My name is Lamar and I am learning Vue

So what we are doing above is creating a new method call calling to work on every Object that's why we place it on the global object prototype. It takes two arguments:

Our Object that we want the this value to change to
The rest of the arguments that were specified on the greeting function

The three dots(...) in front of the args is a spread operator that turns all arguments after the first into an array

Next, we need to create a new object combine with the object we want the this value to change to and the current this value which is the greeting function. There is no way we can save a function in an object without placing it with a key pair value that's why we place it on the newMethod key

const newObj = Object.assign({}, obj, { newMethod: this });

Final we return the new object that we created and call the newMethod as you can see the greeting function is now point to our
object that we specify and we spread the arguments out of the array and into our greeting function

return newObj.newMethod(...args);

The JavaScript apply() Method

Apply is similar to call the only difference is if the second argument that your passing in is an array and not a string

Object.prototype.applying = function (obj, args) {
    const newObj = Object.assign({}, obj, { newMethod: this });
    if (!Array.isArray(args)) {
        throw new Error("Second argument should be an Array");
    }
    return newObj.newMethod(...args);
};

Do you notice that we are not spreading the args parameter that's because we are expecting an array as an argument.

greeting.applying(Shanoy, ["React"]);
//return My name is Shanoy and I am learning React

The JavaScript bind() Method

The bind method is kind of similar to call and apply but it returns a function and we would have to invoke it for it to run eg.

let greet = greeting.bind(Shanoy);
greet("golang");

We change the this value to Shanoy object and save the return function in the greet variable to call at a later date and that's the power of the bind method. Here's our implementation of it

Object.prototype.binding = function (obj) {
    const newObj = Object.assign({}, obj, { newMethod: this });
    return function () {
        return newObj.newMethod(...arguments);
    };
};

Did you see what we are doing differently instead of return the newobj we return a function. When we return a function it won't run unless we invoke it

let greet = greeting.binding(Shanoy);
greet("golang");
// return My name is Shanoy and I am learning golang


let lamarGreet = greeting.binding(Lamar);
lamarGreet("Flutter");
// return My name is Lamar and I am learning Flutter

A quick run down of what each method does

Call invokes the function immediately and allows you to pass in arguments one by one
Apply invokes the function immediately and allows you to pass in arguments as an array.
Bind returns a new function, and you can invoke/call it anytime you want by invoking a function.

Thank you guys for reading my post it was my first post so I hope you guys learned something new I know I did. I just learn a few MarkDown syntaxes.