DEV Community: Nirmal Thomas Mathew

Create your own React State Management

Nirmal Thomas Mathew — Tue, 09 Nov 2021 13:20:15 +0000

Level: Intermediate⚛️; Scroll to bottom for full code⬇️

Pen and Paper

The implementation is simple, I think many blogs have been written about the same method; I think this needed to be written. We will be using react context for universal state management.

Create a wrapper component
use React.createContext to create state context
create new app state using useReducer()
create a method in reducer function to add / update state

Implementation

Create wrapper

export const StateManager = ({children}) => {
    return (

    )
}

Creating context

export const store = React.createContext({})

Creating state in wrapper

// store context
export const store = React.createContext({})
const {Provider} = store

export const StateManager = ({children}) => {
    // creating state
    const [state, dispatch] = React.useReducer(reducer, {})
    return (
        <Provider value={{state, dispatch}}>
            {children}
        </Provider>
    )
}

Implementing reducer

const reducer = (state, action) => {
    const {type, payload} = action
    switch (type){
        case "ADD":
            return {...state, ...payload}
        default:
            return state;
    }
}

One thing to be noted is that, the payload given must be an object containing app data

Usage

import {useContext} from "react"
import {store, StateManager} from "./StateManager.js"

function App(){
    return (
        <StateManager><ChildComp /></StateManager>
    )
}

function ChildComp(){
    const {state, dispatch} = useContext(store)
    // work with app state

    return (
        <div></div>
    )
}

References

How to use useReducer ?
How to use react context ?

Whole Code

// StateManager.js
import React from "react"
// reducer function 
const reducer = (state, action) => {
    const {type, payload} = action
    switch (type){
        case "ADD":
            return {...state, ...payload}
        default:
            return state;
    }
}
// store context
export const store = React.createContext({})
const {Provider} = store

export const StateManager = ({children}) => {
    // creating state
    const [state, dispatch] = React.useReducer(reducer, {})
    return (
        <Provider value={{state, dispatch}}>
            {children}
        </Provider>
    )
}

Get Started with Raspberry Pi [ For js and python ]

Nirmal Thomas Mathew — Sat, 30 Jan 2021 14:50:43 +0000

Introduction

So how to get started. Raspberry Pi is a single board computer that you can use to do automation, smart systems, servers, and a lot more .So hop on to get started with some blinking led example.You need the following things now..

Raspberry Pi 1/2/3/4 A,B,..
SD card with NOOBS/ raspbian [ OS ]
Breadboard (optional)
Some LEDs
Resistor of 200ohm
Some wires to connect
A 5v power supply with usb micro [ > 2A]

It is advisable to use a high power mobile charger if you are using Rpi 3 or above

Basic Info

The raspberry pi is a single-board computer that you can definitely connect a mouse, keyboard and display with its on board connectors. But you can connect it to a ssh ( which I will talk about in another post) also. It has 26 or more GPIO pins (general pins for Input and Output ) to control external things using its signal. We can control the board using code written on it. The pi in the raspberry pi refers to the python language that it is initially intended to use with.But now there are libraries and packages for almost every language.

Get Started

If you are not at all unaware or uncomfortable with breadboard don't use it. We can do this without it

Turn off the board if it is on. And connect the 7th pin on the board to the breadboard.
Connect the 6th pin of RPi to another slot of breadboard. 3.Connect the LED's longer pin to the first slot connected and the shorter to the wire last connected.

After this boot up the raspberry pi, I would recommend using a mouse, keyboard and display ( but SSH is fine )

Start Coding

Try creating a folder for your own.

For python

Install RPi and python if not installed ( it would be already installed ).
Code for blinking LED.

import RPi.GPIO as GPIO # Import Raspberry Pi GPIO library
from time import sleep # Import the sleep function from the time module

GPIO.setwarnings(False) # Ignore warning for now
GPIO.setmode(GPIO.BOARD) # Use physical pin numbering
GPIO.setup(8, GPIO.OUT, initial=GPIO.LOW) # Set pin 8 to be an output pin and set initial value to low (off)

while True: # Run forever
 GPIO.output(7, GPIO.HIGH) # Turn on
 sleep(1) # Sleep for 1 second
 GPIO.output(7, GPIO.LOW) # Turn off
 sleep(1) # Sleep for 1 second

GPIO.cleanup()

Save the file as main.py
Now open terminal ( use CTRL + ALT + T ) and type the command cd yourfoldername. Use your folder name instead of the placeholder in the command. After that type the command python main.py. See your LED blinking. If it is not, check your connections after shutting down.

For Javascript

Open terminal Using CTRL + ALT + T, and use the command cd yourfoldername in terminal. After that use the command nano main.js, a text editor will open up. Use CTRL + X and type Y is prompted. After that you will be back in terminal. Type the command npm init, it will prompt you to type name and other things. Just hit enter for everything, and after that use the command npm i onoff --save. Now type again nano main.js and use the following code.

var Gpio = require('onoff').Gpio; //include onoff to interact with the GPIO
var LED = new Gpio(4, 'out'); //use GPIO pin 4, and specify that it is output, the 4 here is the 7 in the physical pin
var blinkInterval = setInterval(blinkLED, 250); //run the blinkLED function every 250ms

function blinkLED() { //function to start blinking
  if (LED.readSync() === 0) { //check the pin state, if the state is 0 (or off)
    LED.writeSync(1); //set pin state to 1 (turn LED on)
  } else {
    LED.writeSync(0); //set pin state to 0 (turn LED off)
  }
}

function endBlink() { //function to stop blinking
  clearInterval(blinkInterval); // Stop blink intervals
  LED.writeSync(0); // Turn LED off
  LED.unexport(); // Unexport GPIO to free resources
}

setTimeout(endBlink, 5000); //stop blinking after 5 seconds

After that CTRL + X and press Y, now type npm start or node main.js, now you can see the LED blinking.If it is not, check your connections after shutting down.

So what are you waiting, get started now. Comment your views.
References:
Fireship
W3Schools - JS version
Python version

Why bulma is actually cool?!

Nirmal Thomas Mathew — Mon, 16 Nov 2020 11:09:52 +0000

Note: This is my first post so please pardon me for my mistakes, if any. Any constructive criticism is welcome.

So how did I meet up with bulma. It's been only two years since I started web designing and only 2-3 months since I learned JavaScript. First language I learned was python, so it was fairly easy to catch up with js. The fascinating thing is it's been less than two weeks since I discovered Bulma and I already fell in love with it. I was having my vacation and I was away from my house and wanted to do something creative with Vue. So in my mobile I installed Spck editor and in fact it is the most wonderful code editor I have seen in mobile version.(I have very little experience doing web dev in mobile, please tell me if there are any better option), so in the app I created a new project and as js framework I chose vue and when it asked for css framework, it was puzzling. The options were bootstrap, bulma, material lite, semantic, etc,. I didn't know any of them so I went to do some research about each of them, so then I chose Bulma here's why 👇👇

1) Minimal and Simple

The framework itself is a css file 📁, and it doesn't require any extra knowledge about the framework. Just link the file like a css file and you are good to go. We can create simple and minimal looking webpages without using any to very little css.

2) Well documented 📝

The documentation of bulma is quite appreciable. Because any beginner can quickly start designing and developing professional looking pages with their instructions. Each of the features and components are categorised

3) Component structure 📶

So in Bulma each UI component has a class name with meaning. For example there are classes like button, then we have is-primary, is-secondary, is-large, is-dark and other properties which we can add

4) Newbie friendly 👨‍🏫

Those who are new to front end or just started with html can use any css library and Bulma would be the easiest one to start with. Or it would be great for developers concentrating in the programming part of the app rather than on the ui and just want a clean UI.Screw it there's even loading animations integrated.

5) Progressive

The Bulma CSS library can be constructively learnt and tweaked with the level of expertise. If you are complete noob you can just follow docs and create the ui if you have somewhat knowledge in css, you can put together various helper classes. And if you are a pro in css and sass you can costumize the themes of Bulma. And all of this doesn't mess up with the js. This comes in real handy when you are using vanilla js or just a library or anything

6)Other features

It is mobile first( means it has responsive components and features),flexbox layout and guess what it is inspired by Bootstrap.

Conclusion
So what I am telling is just give it a go. You'll love it.Follow and leave a like if you want more posts like this one.

Don't stick with the theme!

Nirmal Thomas Mathew — Mon, 16 Nov 2020 05:15:06 +0000

Before underestimating me hear me clearly.
This is my first post and I am a noob

What do I mean??
I am talking about the ui of your app. If you are a webdev or an app developer ( not the one with figma) and you struggle with your designs hear me out. There are a lot of design trends in the ui realm and it's a mess. Like the material or the Cupertino, etc.. and it's hard to implement. (Yes, in flutter it's quite simple but)Some functionality or widgets by our apps needs to be different and you can't find a widget or a component for that and you can't find it , so naturally you try to combine different widgets and nothing works here's what you wanna do.

1) Create your own widget/component
I mean your own. Why not just keep it simple and clean
2) Large apps are not strict followers of themes
For example take the ui of YouTube or instagram, do they follow stylish or extra flashy UI. No usability > style. Think about it
3) Don't follow the themes you see on Instagram.
There are lot of flashy themes created with UI design softwares and some of them are actually good. But yours is too. The only way you can improve is by trying

Conclusion
I mean that's is bye. Leave a like