DEV Community: Jatin Kathuria

Building State management system like react from scratch with VanillaJS.

Jatin Kathuria — Fri, 08 Nov 2019 09:16:52 +0000

Background

So I have been doing React for 8 months now and I can say with some confidence that I am comfortable in making and structuring React apps.

But, I was not sure If I can say that about Vanilla JS because I entered the world of Web development with React. So I had this epiphany to understand some basics and started a campaign for myself called 30-days-of-Vanilla-JS.

I strongly think that you learn by action and result oriented tasks so I keep looking for new mini-projects(1-4 hours) I can build.

State Management System similar to React.

It is Day 3 of this campaign and I want to build a state Management system similar to React but very bare-bones. But it should follow one-way data flow. I initially had very less clue how I would build it but as I went on it with it, it became easier.

We are going to take a simple app so that we can focus on state management system, so we will be building a todo App as show below

So If I can build it, any beginner can. Let's get started.

Design

Now below is the one way flow I was trying to build and there are 3 things that we need to do:

Catch user Actions.
Dispatch those user actions to set a new state
As soon as the state is set rebuild the view.

Let's start in reverse order. Let us first build a mechanism so that our page know when the state has been updated and it rebuilds itself.

State

First thing we need is an event that will be fired as soon as the state is updated. So let us create an event as show below :

let stateUpdated = new Event('stateUpdate');

Once, we have the event, we will need to define a state and state setter.

function StateManager(initialState) {
    this.state =  initialState   
}

We define a function/class called StateManager which takes in an initial state for a component and sets it.

Now let's us write method which will take in the new state.

function StateManager(initialState) {
    this.state =  initialState
    //
    const setStateInternal = (newState) => {
        console.log(`In the setting. Setting state now with value ${JSON.stringify(newState)}.`)
        this.state = newState;
        console.log(`New state is ${JSON.stringify(this.state)}`);
    }
}

For now I have kept the state setter internal as I don't want anyone to directly call this method, because remember, our setter needs to dispatch the event as well so the components gets updated/regenerated.

function StateManager(initialState) {
    this.state =  initialState
    //
    const setStateInternal = (newState) => {
        console.log(`In the setting. Setting state now with value ${JSON.stringify(newState)}.`)
        this.state = newState;
        console.log(`New state is ${JSON.stringify(this.state)}`);
    }


    // public state setter.
    this.setState = new Proxy(setStateInternal, {
        apply: function(target, thisArgs, argumentList){
            console.log(arguments)
            console.log('Now setting the state');
            target(...argumentList);
            let eventFired  = dispatchEvent(stateUpdated);
            console.log(`Event Fired : ${eventFired}`);
        }
    });


}

Checkout this.setState above, it is a proxy for the setStateInternal to dispatch the event (second last line). We simply call dispatchEvent function to dispatch the event that we created in the first step.

In case you are not aware of proxy, you can check out this tutorial.

In one line, proxy is a kind of middle-ware for Javascript objects, Let's say if you are calling a function or setting a property of an object you can do an action before/after that function call or property assignment.

This could have been achieved without Proxy as well easily but I wanted to learn and use it so here it is.

Alternatively, you can have function which will just call setStateInternal and dispatches the event as show above in second last line.

Now, the definition of out state is complete and we should have a way for each component to create it's own state as shown below :

function createState (initialState) {
    console.log('initializing state')
    let tempState = new StateManager(initialState);

    return tempState;
};

Above function will create a new instance for the state everytime it is called with state and setState as public members.

Our state.js is now completed.

Since, i am building a todo app, i would call my new file as

todo.js

Let's first create different views/components within our JS files as shown below :

TODO_ITEM

This will be our lowest level component which will represent one TODO_ITEM.

 const TODO_NEW_ITEMS = (item, deletionAction) => {
     console.log(`In todo items : ${item}`)
     return `
        <div id="todo-item" class= "todo-item" data-id=${item.id}>
            <p id='todo-text'>${item.value}</p>
            <button id="delTodo" onclick=${deletionAction}(this)>DEL</button>
        </div>
     `
 }

It takes the item details and deletionAction/completionAction from our state. We will find that out soon. But in a nutshell it returns a view/string representation of HTML.

Are you getting JSXy feeling yet? I was ecstatic when I wrote this piece of code.
Notice () after deleteAction in above code. Remember, in HTML, we need to call the function and not just pass the reference like in React.

Similarly, we will write a component/view of competed items.

 const TODO_COMPLETED_ITEMS =(item) => {
     return `
        <div id="todo-completed-item" class= "todo-completed-item" data-id=${item.id}>
            <p id='todo-completed-text'>${item.value}</p>
        </div>
     `
 }

It is not exactly following DRY principle but since I was under time constraint, I went ahead with separate declarations.

Now it is time to write the Completed TODO_COMPONENT

const TODO_PAGE = (state) => {

    return ` <div class="todo-container">
    <div class="todo-items">
    ${
        state.items.map(item=>{
            if (!item.completed){
                return TODO_NEW_ITEMS(item, state.events.deleteTodo);
            }

        }).join('\n')
    }
    </div>
    <form class="todo-input-container" action='javascript:' ">
      <div class="todo-input">
        <input id="newTodo" type="text" name="newTodo" value="${state.currentItem}"  placeholder="Add to do item" onkeyup="${todoState.state.events.recordTodo}(this)" />
      </div>
      <div class="todo-add">
        <button type='button' id="addTodo" name="addTodo" onclick="${todoState.state.events.insertTodoItem}(this)" >ADD</button>
      </div>
    </form>
    <div class='todo-completed'>
    ${
        state.items.map(item=>{
            if (item.completed){
                return TODO_COMPLETED_ITEMS(item);
            }

        }).join('\n')
    }
    </div>
  </div>`
 }

I know it is a lot but let us break it part by part.

a. TODO_PAGE takes in complete state as an input

b. It has a section for new todo Items as shown below so it looks in the items property of state and loops it and call our TODO_NEW_ITEMS component.

Similarly at the end of above code, we have todo Completed Items component code as well.


<div class="todo-items">
    ${
        state.items.map(item=>{
            if (!item.completed){
                return TODO_NEW_ITEMS(item, state.events.deleteTodo);
            }

        }).join('\n')
    }
    </div>

c. The next piece of code is the the text-box to write Todo component and button to submit it to the todo item list.

 <form class="todo-input-container" action='javascript:' ">
      <div class="todo-input">
        <input id="newTodo" type="text" name="newTodo" value="${state.currentItem}"  placeholder="Add to do item" onkeyup="${todoState.state.events.recordTodo}(this)" />
      </div>
      <div class="todo-add">
        <button type='button' id="addTodo" name="addTodo" onclick="${todoState.state.events.insertTodoItem}(this)" >ADD</button>
      </div>
    </form>

Now that we have defined our components, it is time to define our initial state and actions.

We know that out state should have below properties

items : List of todo-Items with the text, an identifier and whether it has been completed or not.
events : list of actions/events that need to be performed. Because as you see in the above code, we need to pass action to the components as well.
currentItem : What current Item that user is trying to save.
target : The element on which our action has taken place. As we go further, I will explain why this is required. For now, may be you can ignore it.

So below will be the code for initial state and remember that todoState below is not a state but our StateManager Object. It has 2 members state and todoState:

let todoInitialstate = {
    items: [],
    currentItem: '',
    events: {
        recordTodo: 'recordTodo',
        insertTodoItem:'insertTodoItem',
        deleteTodo: 'deleteTodo',
    },
    target:{}
};

let todoState= createState(todoInitialstate);

As you can see above, there are 3 events are are required.

recordTodo -> This is to maintain what the user is typing when she is trying to add Todo. Below will be the simple code for it. For people familiar with React it is a cake walk.

function recordTodo(target) {
    //todoItemsSpace.appendChild(todoItem(event.target.value));
    // state.currentItem = event.target.value;
    console.log(`event fired with state value ${JSON.stringify(todoState.state)}`);
    console.log(target)
    // updateState(state);
    // rough.innerHTML = event.target.value
    todoState.setState({
        ...todoState.state,
        currentItem : target.value,
        target: target
    })
}

One thing you will notice that, it take target as an input and not the event. this is because how HTML and JavaScript work. There are 2 ways to attach an event

a. When you attach it in HTML as I have done above. This method gives target HTML element to the JavaScript function if you pass this within HTML

b. When you add event listener with addEventListener function in JavaScript, then you get Event as the parameter.

Please correct if I am missing something here but this is what I observed.

Also, in the last line of above code, we will simple call set state and it will set the appropriate state and fire the event. We will see how we will refresh this component by listening to stateUpdate event.

insertTodo

function insertTodoItem(target){
    console.log('insertTodoItem')
    console.log('Adding todo npow.')


    let id = Date.now();
    let tempState = todoState.state;
    tempState.items.push({
        id: id,
        value: tempState.currentItem,
        completed: false
    })

    tempState.currentItem = '';
    tempState.target = target;
    todoState.setState(tempState);

}

Just bear with me, we are almost done. We have created the state, State Manager, components and actions.

Now is the time to see how we can regenerate the the view. You remember, we generate the view when stateUpdate event is fired. So let us listen to that first.

window.addEventListener('stateUpdate', generateView);

Now that we are listening to this event, let us define generateView function.

function generatePage(){

    let main_Page =  TODO_PAGE(todoState.state);

    document.getElementById('root').innerHTML = main_Page;

    let element = todoState.state.target;
    if(element.type == 'text'){
        document.getElementById(element.id).setSelectionRange(element.selectionStart, element.selectionEnd)

        document.getElementById(element.id).focus(); 
    }
}

First line gets the HTML string of the TODO_PAGE component.

In Second line, we find the root Element in our HTML file and just render this HTML string. Our HTML page is very similar to react which I will share below.

From third line, we can see that I use target and I promised you, I will explain why we need target. Consider a scenario,

What happens when you set innerHTML

I am trying to add a todo component and as I type, it will fire recordTodo action which will update the state and will in turn re-render the view as can be seen by code above.

Now as page is re-renders, we will lose the focus on the text box in which we were typing our todo item. Not only we need to maintain the focus, but also, we need to restore the cursor position so that page seems smooth and flicker-less.

Therefore, I just reset that focus back to that element where event actually occurred and I also restore that cursor position.

That's it. We are done. Below is the minimal HTML file :

index.html
_____________________________

<html>
    <head>
        <title>Todo - State Managed App</title>
        <script async src='./state.js'></script>
        <script  async src='./todo.js'></script>
        <link rel= 'stylesheet' type='text/css' href="./index.css" />
    </head>

    <body>
        <div id='root'>

        </div>
    </body>
</html>

To see the whole code, please visit my 30-days-of-Vanilla-JS repo. You can star it to follow my 30 days of Vanilla JS ideas in case you are beginner like me.

In case you are a guru, do support me by suggesting some ideas of mini-projects that can be completed in 1-4 hours and will have something to learn.

Design Review Needed - An anonymous Chat Application

Jatin Kathuria — Wed, 14 Aug 2019 11:00:24 +0000

Background

So I have been learning design by action from 5-6 weeks(or weekends) now for my Resume Builder application and I made 3 posts for my journey here. I was finding it really difficult to proceed with the design of that website so I thought of trying something easier. Hence, I designed a simple Chat Application will be good as a starting point as it has less number of screens and interactions as a part of my MVP design.

Welcome Chatrr

Chatrr is the name I thought during the rise of Web 2.0 8-9 years back ( you can guess that just by looking at the name) but at the time, I didn't have time, skills and dedication to get started with it. Welcome 2019, I got into web development after years of making excuses and I was sure that this is one of the open-source product, I need to ship. It works or not is not really my priority as of now.

Motivation

There are 100s of chat applications out there but very less of them are anonymous. I had always loved the feel of Yahoo Rooms that used to exist 10 years back but now there is nothing like that. Moreover, Chat Application will help me develop following skills from scratch :

Mobile Design Languages
Design tools such as Figma
Web Sockets
React Native/Flutter/Kotlin (Not sure yet)
GraphQL

First Phase

So I plunged into it 3 weeks back and have been spending weekends on doing the prototyping in Figma. I think I am happy with first draft and can start doing the development. UI is not my forte and hence I am feeling a little accomplished because I am liking colors, fonts, choice of buttons and overall look and feel of the app.

But who doesn't love their own solution. Hence, I would appreciate the community's opinion. If you are an expert, please be brutal in judging what looks good, bad and ugly and Why. If you are not, please do not hide your opinion.

With this, I will not take much of your time and state assumptions and functionality of app in few lines before we get to mock-up video so that you have some context.

Functionality

So this is an anonymous chat application and hence login screen doesn't have anything apart from :
- username
- gender
- submit button (May be captcha in actual app)
Rooms
- Chat-rooms are pre-created and cannot be created by user.
- These are like groups which will have members who have joined that particular chat room.
- People cannot exit all rooms, they can only switch rooms. Hence, if during the login if a person has joined a Room, they will remain joined in the background and User should be able to access the member list from anywhere. User can either switch rooms of Log out.
User Profile
- Very minimalist as already stated and you can only modify your gender as a part of MVP.
Settings page is still remaining as I am still thinking about it but it will mostly have notification stuff and gender hiding. Nothing more.
Font is Quicksand in multiple sizes
Logo and Name is temporary and are merely placeholders.

Note : Figma has only screen transition but not component animation and transition so there are elements where current animation is not there or it sucks. For example, The main menu will be an expanding circle like shown below (not mine). but in prototype it just slides or dissolves:

Note : above awesome animation is by Fausto Renier. Do checkout this website's home page. It have really interesting elements.

And here is mine :

You can find all the material on my github Repo here

Making Strides | Web Design by/for a Non-designer - Part 3

Jatin Kathuria — Sat, 20 Jul 2019 20:53:55 +0000

It's a happy day today as I think I have made some good progress in this 3rd weekend of designing as a noob. If you are interested in background, links are given below :

Reflection

As concluded in the part 2, I said I was not very happy with the design but it is OK for now to move forward with. And as I started my work today and looked at it... Yukkk! I couldn't even look at it. I needed to do something about it and guess what, I already had an idea what I am gonna do.

More Inspiration

This past week I was listening to Basics of UI Design for Engineers with Erik Kennedy on Programming Throwdown and it gave me a lot of insight on different design elements and Erik was congnizant of how a non-designer would approach any design. Go give it a listen if you interested to learn design and you will come back enlightened in one way or the other.

One of the things Erik emphasised on was the important of CopyWork and how it can help any newbie in developing gut feeling for the design they work on. "Should I just copy that website?", this thought has already crossed my mind multiple times. So I thought, I should go ahead and try to find a website that may be similar to what I am trying to do and I will first copy that and then customize(ruin) it according to my needs and liking.

So I started browsing land-book & dribbble for more inspiration with below things in my mind. :

It should have some kind of caraousal or photo showcase where I can show-case CV templates. Like did it previous design on the left side, see below for reference
It should have place where I can write captions as you see on the right.
A basic Nav bar.

Essentially, I didn't want elements on the page to change. So after couple of hours of change, I reached what you can see on the left side.

Learnings & Action

We can see the design I found has very similar layout but was much more professional and better in every way. My initial wish was to have Material theme and Flat icons but this looks really good to eye and I love white and black whitespace which this design has in plenty.

So we start with the result. After much of tinkering, this is what I got.

I didn't copied it exactly but I ripped off main text layout, shadow and color decision where was I struggling a lot and applied it to my elements.

Things I am happy about

Color - White is looking much better than the violet/mauve(I'm not sure) I chose earlier, the gradient didn't seem very smooth.
Text Layout - This is my favourite part of the page today. I am loving how it looks and color of button is very bold.
- I added my flavour of pagination as well which was represented by arrows in last design. Not sure if you noticed but this text box will be sliding carousal for 3 difference Call To Actions(CTAs).
- Typography is also something I chose independently with one font remaining as it is in the previous design. Although, I think I can do better. Below are the fonts I'm using :
  - Righteous
  - Ubuntu (One of my favourites)
Buttons - Color of buttons is not much better and I need to solve this mystery of what makes a color better than the other. I am unable to answer why this color is better.

Can anybody please explain What makes #8144E6 better than #AA86E6 which is just few shaded lighter. See example below:

Things that are missing/need improvements.

Alignments : Alignment is off at many places and I am still figuring out how to correct or control that. See below examples.

Check the alignment on left and right.
Carefully look at the gridlines and alignment above login word is much more than it is below. Not terrible. Not Great. ;).
You see this red line. This is the whitespace, I don't like. I am not sure what to do with it as I don't have any more content. Any suggestions are welcome.

Extra-extra whitespace - See the red block on the bottom, It is empty space and it is too much, I would like to fill it. But I am not sure with what. Suggestions?
Background - If you look closely, the original design has some kind of white background, it is giving it some texture on the right hand side. I tried some gradient but those were hedious, I will try some more and will report next week.

Ciao.

Web Design by/for a Non-designer - Part 2

Jatin Kathuria — Sat, 13 Jul 2019 17:38:42 +0000

Recap

This is part 2 in the series of stories that I am writing about my struggles with front end design. You might want to start in the beginning here.

Last week, I came up with a very rudimentary style of homepage for my web-site after thinking about the contents I wanted to keep on my homepage. But there were some problems with that page.

Scaling was completely off. Login page seems too big.
There was no marketing material on the page which will tell user why this CV Builder is different from others.
The way CV's previews were stacked on the left side were ugly.

New Strategy

I went back to drawing board and thought a little harder on things I needed on my homepage. Here are things I came up with :

Marketing material - as I discussed above
Request a new template - The main feature of this website is ability to request new templates.
Contribute - This is a call to action for developers, so that they can contribute new templates as requested by users. This will good opportunity for anyone looking to learn CSS and React as a newbie.
Templates - Showcase of CV Templates.
Login/Register - Login/Registration screen

Inspiration

By this time, I am sure that I will not be able to build something from scratch until after 2 weeks. So it was time to look for an inspiration and steal a good design.

I did some research and landed on land-book.com and after going through some of the templates I decided to go with traditional layout and came up with something like this :

Although, I am not happy with the colour but it is okay for now. And I have discovered that I am pretty bad at it.

To talk about typography, I went with very safe Roboto font(Lato is again very similar), It is still fluid and may change in future. For now, it is good as a placeholder.

There are now 2 things left.

CV template showcase
Marketing material.

Here also I decided to divide the main coloured section in 2 parts as below :

Things I liked about this design

Layering : I liked the layering in Resume templates and I am happy that shadows came off fine. Curves on the corner are pretty good.

Things I don't like about this design

Everything : Coloured section is ending abruptly which is not at all eye pleasing.
**Marketing Material Layout ** : There is no boundary on this layout, I think Righteous font is looking pretty nice.

That's it for today, It is not really very good but it is evolving well. Let's see how we proceed on this next week.

Web Design by/for a Non-designer - Part 1

Jatin Kathuria — Sat, 06 Jul 2019 20:12:03 +0000

Why this article

I aim to narrate my thought process behind web design which I am doing it for my web app and seek advice and validation from the experts here.

You guys are awesome

I recently joined Dev.to community and I must say I enjoy reading the discussions here and passion of the people is infectious.

Background about me

Since, this is my first post, I will give some background about me. I am from India, been in IT for 9 years now. I have mainly worked on data-modelling and Oracle application implementations. I have been wanting to work on Web development for years now.

Recently, I moved to a role I love and which involves working with web and juggling multiple technologies. First thing I did was to kick-off my personal project as I wanted to learn some technologies so that I can be up-to speed with latest in web.

The Project

3 months back I started my personal project called Resume Builder. It is inspired from NovoResume which is an amazing website but paid.

It involves different templates of CV which users can download in pdf format. I had an idea to build all this as open source so that template building can be more democratic and people can request certain templates to be created on this site.

There are 3 reason I decided to go with this project :

It was very UI driven project and I wanted to learn React.
It is heavily design focused project and I am very bad in both design process and CSS. Hence, it is good opportunity to build everything from ground-up.
Open source and free education online has give me a lot and Resume Builder seems like a thing which many people can make use of.

The Design

Let's get to the meat now. I am done with some part of the back-end of my web app and I thought now may be a good time to start designing a good homepage and give my web-app a design language. So after lots of crappy CSS mock-ups and scrapping them I decided to follow below process :

1. Settle on a good design tool for creating mock-up

Creating UI on CSS takes time, especially when you are learning it. Also, it is tough to imagine how your design is moving forward. So I decided that I need to work on a tool where I can create quick mock-ups and get a good understanding of the design language I want to follow.

There are not many free tools and only good options that I found were :

Adobe XD
Figma

I decided to go with Figma as it is available as Web App and very easy to get started with. It is also completely free for personal use.

2. Decide on the content of the page

Alright, as now we are sorted with the tool, I need to think about what i want on my homepage.

Logo

I haven't designed it yet. But for now I will keep it as placeholder.

SignIn/SignUp Page.

I wanted to give a "dev"vy feel to the signIn/SignUp page so I decided to make it little geeky with a JSON like template. Not sure how it is but I am liking it for the starters. Any kind of comments/crtique is welcome.

But it is too white as of now and every time I try to use colors I screw up. Anyway, I happy that I have made progress on this front.

Some Carousel of Resume templates.

I surely need carousel/collection of some "Hall of Fame" resume templates that will displayed on the homepage.

So these are things I need to arrange on my page and after 2 hours of dabbling I came up with very simpleton design as below :

I know it is pretty shitty but I want to share few things that I am finding very difficult here.

Scaling - Inspite of Figma providing exact Desktop screen resolution templates, I am not able wrap my head around scaling. If you look at this simple design carefully, the login is page is pretty humongous, it is half page. Which login page in the world is this big.
Negative/White Space - I love neagative space but I don't have any idea how to use it and if I attempt to use, I end up like my login page, no colors - only negative space & no colors.
Typography - I am sure that I want to go with a sans serif font. This is why my login page I chose Righteous and it was looking slick to me until I put it on my homepage in my Figma mock-ups and Yuck! it looks hideous.
Backgound/Colors - I feel this is my most challenging task and I have no idea as of now if I will be able to do it myself or will end up copying from somewhere. :(

This is it for now.
I will be adding to this post every week and documenting the whole process of this design completion as it may help any of my fellow devs who may be in same dilemma of "how can I learn to design"

=========================

Any input/advice/comment/criticism is graciously welcome. Please do comment if you think that can help me move in right direction.

Fun Trivia

Check out User In yer Face for some really bad designs, worse than mine :P.

.........To be Continued.

Web Design by/for a Non-designer - Part 2
Making Strides | Web Design by/for a Non-designer - Part 3