DEV Community: Coding is Love

Marvel’s Shang-Chi – What if he was a web developer? | Web Multiverse

Coding is Love — Wed, 09 Mar 2022 12:05:08 +0000

The post Marvel’s Shang-Chi – What if he was a web developer? | Web Multiverse appeared first on Coding is Love.

12 commonly used Javascript Array methods that you should know

Coding is Love — Tue, 08 Feb 2022 06:21:09 +0000

The post 12 commonly used Javascript Array methods that you should know appeared first on Coding is Love.

Pushpa logo using HTML & CSS #Pushpa #Thaggedele

Coding is Love — Sat, 05 Feb 2022 15:49:01 +0000

I made this awesome Pushpa logo using HTML and CSS. I have used the power of CSS mask-image to give the logo a nice fingerprint texture as seen in the original movie.

Don’t miss Allu Arjun’s dialogue at the end ![🤘]

The post Pushpa logo using HTML & CSS #Pushpa #Thaggedele appeared first on Coding is Love.

RoughNotation.js, A JavaScript library to create and animate annotations | Spotlight of the day

Coding is Love — Sat, 05 Feb 2022 15:46:15 +0000

Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.

Rough Notation is 3.8kb in size when gzipped, and the code is available on GitHub.

Reference links:

RoughNotation Github – https://github.com/rough-stuff/rough-notation
RoughNotation website – https://roughnotation.com/

The post RoughNotation.js, A JavaScript library to create and animate annotations | Spotlight of the day appeared first on Coding is Love.

Rythm.js, A javascript library that makes your page dance | Spotlight of the day series

Coding is Love — Wed, 02 Feb 2022 18:47:58 +0000

A javascript library that makes your page dance.

The post Rythm.js, A javascript library that makes your page dance | Spotlight of the day series appeared first on Coding is Love.

I threw a confetti party on my website, Find out how! | Spotlight of the day series

Coding is Love — Mon, 31 Jan 2022 20:38:11 +0000

Learn how to shoot confetti on your website using HTML canvas and javascript and make it snow!

Reference links:

Canvas-confetti : https://github.com/catdad/canvas-confetti
Code example : https://codepen.io/Ranjithkumar10/pen/mdqeoVp

Convert text to realistic handwriting using Javascript

Coding is Love — Mon, 31 Jan 2022 20:18:33 +0000

hello everyone welcome back to another episode of the spotlight of the day series. Today we have a library called handwritten.js This is a library that helps us in converting text to realistic handwriting.

let me show you an example first.

This is just text the text is converted into realistic-looking handwriting using the library. if someone sees this, they’ll think that is this actually written by someone by hand. it’s converted it perfectly like almost someone wrote it by hand.

You can use this library in multiple ways. you can use it using the cli, you can use it in node.js or you can use it in the browser as well. We’ll try to use it in node.js

Practical use case

let’s say you want to fake your homework and you have some content online you can just copy the content and use this library to convert it into realistic handwriting and you can submit it.

Create cool typing animation in your website | Spotlight of the day series

Coding is Love — Sat, 29 Jan 2022 18:45:46 +0000

Learn how to create a cool text animation that appears to be typed by a real user

Reference links

Typed.js GitHub – https://github.com/mattboldt/typed.js
Typed.js website – https://mattboldt.com/demos/typed-js

The post Create cool typing animation in your website | Spotlight of the day series appeared first on Coding is Love.

Text recognition in the browser using Tesseract.js | Spotlight of the day series

Coding is Love — Fri, 28 Jan 2022 20:41:55 +0000

Learn how to do text recognition in the browser in a react app using tesseract.js

Source code is available at Tesseract OCR React

Watch the full tutorial below

The post Text recognition in the browser using Tesseract.js | Spotlight of the day series appeared first on Coding is Love.

Automate Whatsapp using Javascript | Spotlight of the day

Coding is Love — Fri, 28 Jan 2022 08:16:12 +0000

Learn how to automate whatsapp using Javascript (NodeJS) Ex: Automate sending messages/replying to messages, scheduling messages etc. A lot more can be automated!

Spotlight of the day is a library called whatsapp-web.js

Checkout whatsapp-web.js github repo and watch the full tutorial video below

The post Automate Whatsapp using Javascript | Spotlight of the day appeared first on Coding is Love.

How to setup Mobx with react context

Coding is Love — Mon, 29 Jun 2020 16:40:40 +0000

Mobx is a Javascript library for state management. It is not specific to react but works great with react. Let’s see how to setup Mobx with react and react context specifically.

What is react context?

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In simple words, React context is used to store some data at one place and use it all over the app. Components also re-render every time the data in context is modified. If we don’t use context then we would be passing data manually using props.

Technically, Mobx and other state management libraries also do the same thing but with more features

Why use Mobx with react context?

It is not mandatory to use react context with Mobx but it is recommended now officially on the mobx-react website.

Earlier, Mobx had an Provider/inject pattern. There’s one Provider in the root, inject is used to inject the mobx store to any component and observer is used to make a component re-render whenever the store is modified.

This Provider/inject works great but it is heavily opinionated. Provider/inject pattern still works with mobx-react 6.x but it is considered as obsolete now. You can read more about it here – Why inject pattern is obsolete

So, It is better to use Mobx with react context starting from mobx-react 6.x but the problem is the official docs on setting up Mobx with react context is quite confusing.

If you read the docs then there will be many questions in your mind. Like how to use Mobx react context with class components , how to use Mobx react context with functional components, how to observe for changes on class components and functional components.

Official docs only mention how to use context and mobx with hooks but there’s nothing related to class components. I’m pretty sure that majority of the react developers are still using class components even if they have started using hooks.

So I’m writing this detailed guide on how to setup Mobx with react context to clarify any such questions.

How to setup Mobx with react native

This exact setup works with react native as well. Just skip the react specific sections. I’m assuming that you have a basic react native app generated using react-native-cli. Everything else remains the same.

Basic react app

I’m starting from scratch just to be clear but if you already have a react app setup then that is completely fine and you can skip this section.

Create a basic react app using create-react-app by running the following command :

npx create-react-app my-app

You have a basic app now. You can cd into the newly created app and run it using.

cd my-app && yarn start

If you go to http://localhost:3000/ then you can see a basic react app running which looks like this :

We need to eject from create-react-app for enabling Mobx decorators syntax. Eject using :

yarn eject

Install Mobx and Mobx-react

Mobx is the main library and mobx-react has the mobx binding for react. Install both Mobx and Mobx-react using the following command :

yarn add mobx mobx-react

If you had already setup react app and Mobx then Make sure that mobx-react is 6.x or higher

Enable Mobx decorators syntax

You can use Mobx without the decorators syntax as well but using decorators simplifies the code so let’s enable it.

Enable decorators for react app

Make sure that you have ejected from create-react-app as mentioned above using yarn eject

Install the babel plugins for decorators using :

yarn add --dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

Go to package.json file and replace the babel section with the following

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
  }

Enable decorators for react-native

Install the babel plugins for decorators using :

yarn add --dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

Go to babel.config.js and paste this :

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
  ],
};

Decorator syntax is enabled now!

Setup a basic Mobx store

go to src folder in react app, create a folder named services and create a file named store.js inside the services folder. You create this file anywhere in the project as per your preference. I’m just showing an example to organize it properly.

Go to newly created store.js file and paste the following code

import React from "react";
import { action, observable } from "mobx";

/* Store start */
export default class Store {
  @observable title = "Coding is Love";

  @observable user = {
    userId: 1,
    name: "Ranjith kumar V",
    website: "https://codingislove.com",
    email: "ranjith@codingislove.com",
  };

  @action
  setUser(user) {
    this.user = user;
  }

  @action
  updateUser(data) {
    this.user = { ...this.user, ...data };
  }

  @action
  clearUser() {
    this.user = undefined;
  }

  @action
  setTitle(title) {
    this.title = title;
  }
}
/* Store end */

/* Store helpers */
const StoreContext = React.createContext();

export const StoreProvider = ({ children, store }) => {
  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
};

/* Hook to use store in any functional component */
export const useStore = () => React.useContext(StoreContext);

/* HOC to inject store to any functional or class component */
export const withStore = (Component) => (props) => {
  return <Component {...props} store={useStore()} />;
};

Store explanation

Its a very simple store with a user object to store user data, a title string, a few functions to modify the user and title. @observable is used to tell mobx to re-render components whenever an observable property is modified.

@action is a function that is used for modifying observables. Running an @actions also triggers autoRun functions if you have set up any of them.

useStore is our custom hook to use mobx store in any functional component

withStore is a custom HOC (Higer order component) to use mobx store in any class component.

Mobx Provider setup

Go to your main file. App.js in case of create-react-app and paste this :

import React from "react";
import Home from "./screens/Home";
import Store, { StoreProvider } from "./services/store";

const store = new Store();
/* Create a new store */

function App() {
  return (
    <StoreProvider store={store}>
      <Home />
    </StoreProvider>
  );
}

export default App;

We are using StoreProvider in the root and a single component named Home

Create a folder called screens and create a file named Home.js inside the folder and paste this :

import React, { Component } from "react";
import logo from "../logo.svg";
import "../App.css";
import { observer } from "mobx-react";
import { withStore } from "../services/store";

@withStore
@observer
class Home extends Component {
  toggleTitle = () => {
    const { store } = this.props;
    if (store.title === "Coding is Love") {
      store.setTitle("Mobx React Context");
    } else {
      store.setTitle("Coding is Love");
    }
  };

  render() {
    const { store } = this.props;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <a
            className="App-link"
            href="https://codingislove.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            {store.title}
          </a>
          <button onClick={this.toggleTitle} style={{ margin: 20 }}>
            Toggle title
          </button>
        </header>
      </div>
    );
  }
}

export default Home;

We are using @withStore HOC that was created in store.js to use our store. @observer is used to re-render the component whenever store is modified.

This is an example of How to use Mobx and react context setup with class components

withStore HOC injects store into the component as a prop so we can accessing it using this.props.store

I’ve written one small function named toggleTitle just to show how to modify the store.

That’s it! We’ve completed the mobx setup! Now, Whenever we modify the store, all the components with observer get re-rendered automatically.

If you want to know how to use the useStore hook then continue reading.

useStore hook for functional components

This is an example on How to use Mobx and react context with functional components. Create a folder named components inside src folder. Create a file named Username.js inside components folder.

Go to Username.js and paste this :

import React from "react";
import { observer } from "mobx-react";
import { useStore } from "../services/store";

const Username = observer(() => {
  const store = useStore();
  return <div style={{ fontSize: 14 }}>- By {store.user.name}</div>;
});

export default Username;

All we have to do is use observer so that the component re-renders when store is modified. Use the store using useStore hook. It is as simple as that.

Now import the Username in Home.js and use it.

Final code looks like this:

import React, { Component } from "react";
import logo from "../logo.svg";
import "../App.css";
import Username from "../components/Username";
import { observer } from "mobx-react";
import { withStore } from "../services/store";

@withStore
@observer
class Home extends Component {
  toggleTitle = () => {
    const { store } = this.props;
    if (store.title === "Coding is Love") {
      store.setTitle("Mobx React Context");
    } else {
      store.setTitle("Coding is Love");
    }
  };

  render() {
    const { store } = this.props;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <a
            className="App-link"
            href="https://codingislove.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            {store.title}
          </a>
          <button onClick={this.toggleTitle} style={{ margin: 20 }}>
            Toggle title
          </button>
          <Username />
        </header>
      </div>
    );
  }
}

export default Home;

Wrapping up

Final output looks like this :

Full source code for this boilerplate project is available here – https://github.com/codingislove01/mobx-react-context

If you have any questions or feedback then let me know in the comments below

The post How to setup Mobx with react context appeared first on Coding is Love.

Love-hate relationship with react hooks ❤️😏

Coding is Love — Thu, 25 Jun 2020 15:19:37 +0000

React hooks! The new cool thing in the react eco-system right now! Its been just a year since the concept of react hooks has been introduced. Do you love react hooks or hate them?

Let me share my experience with react hooks. I hated them in the beginning. Now, I love using them in a few specific scenarios but still hate them in other scenarios. Let’s dive into it!

Ever heard of Javascript fatigue? In simple terms, Javascript fatigue is how there’s a new technology every week and JS developers run into using them and there’s a pile of libraries and frameworks stuck in this JS ecosystem.

JS devs when they see a new library!

Over a period of time, This fatigue has decreased and people are leaning towards well maintained and battle-tested technologies based on how useful they are for the current project but not everyone.

I think that most developers are using react hooks in their project just because it’s the new cool thing! They neither see the benefits of hooks nor try to understand the best practices in implementing hooks.

I’ve seen some devs re-writing their entire codebase just to use hooks. You don’t have to do that buddy! You are just wasting your time for nothing. Performance benefits are minimal to hardly noticeable. In addition to that, If you don’t implement hooks in the right way then you’re only making the performance worse!

First impressions on react hooks

What’s the first impression that you got while reading react hooks documentation for this first time? Don’t tell me you never read the docs! Some of them never read docs. Only googling randomly 😂

Documentation! What’s that?

My first impression was that it is useful to add life cycle hooks and state for some functional components. There are other use cases but these are the main. But I never thought that hooks would be used to entirely replace class components with functional components.

First project with react hooks

I never re-wrote any of the old projects with hooks. I wouldn’t do that even now. It’s just a waste of time to re-write the entire project using hooks.

Then I got one project around 6 months ago which was written by some other developers. It was only around 4 or 5 months since hooks were released at that time. But they had already adopted it. I thought Okay cool, I get to play with react hooks!

Then I saw the code base!

The code readability with react hooks is terrible if you use them in large components. I want to stress this again :

Code readability with React hooks is terrible!

– A react enthusiast

No matter how good you are with react, Code readability with class components would still be a lot better compared to functional components with hooks

I also saw few mistakes that devs tend to make with hooks. The most imporant mistake is not using useCallback for functions inside a functional component! This is a very bad mistake.

Stuffing 10 functions and other calculations inside a functional component without useCallback! Now every time that component is re-rendered, all those functions and calculations get executed again which is terrible for performance.

Let’s cut the chase and talk about what I love and hate about hooks.

What I love about hooks

It is very useful in a few cases. Here’s an example – I had to handle the back button of several components manually in a react native project. In this case, it was very helpful using a custom hook.

Here’s the custom hook that i wrote

import { useEffect } from 'react';
import { BackHandler } from 'react-native';

export default function useBackHandler(handler) {
  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handler);

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handler);
    };
  });
}

Now All I have to do is use the custom hook in any component that I want.

useBackHandler(someHandlerFunction)

It is very convenient and readable in this use case.

The same goes with use cases like adding a custom message listener or internet connection listener.

It is also useful for keeping related logic together. For example: BackHandler.addEventListener and BackHandler.removeEventListener in the above code are related to the same functionality and they are kept in the same place in case of hooks.

Same code in case of class components would have been separated because addListener would be in componentDidMount and removeListener would be in componentWillUnmount

It is also useful for smaller functional components which need to maintain just a single state property or minimal state. For example, a modal with open and close state. Functional components with hooks are great for this use case.

So I get it, hooks are useful in few cases and I love using them in such cases. But I still don’t get why do you need to use hooks for your entire project and every component!

What I hate about hooks

Terrible readability

As mentioned earlier, Terrible readability! I have to read a functional component with hooks thoroughly for some time to understand what’s going on there!

In case of normal class components, Just one glance and you understand what’s going on in that component.

Stuffing functions with useCallback inside a functional component?

What’s going inside those multiple useEffect blocks without names? Only comments can help

No guidelines for beginners

Beginners tend to make a lot of mistakes with hooks. Specifically not using useCallback, stuffing a lot of function inside one functional component.

Inserting wrong dependencies in useEffect blocks

React docs doesn’t even try to warn the developers not to follow such bad practices. They don’t guide the developers with best practices.

React team had introduced an eslint plugin which helps in finding some errors such as exhaustive deps rule etc. but it still doesn’t really help that much.

React team should implement some proper guidelines for hooks so that developers can follow them for the best performance, readability and maintainability.

Easy to make mistakes

Writing useCallback for every function? You don’t have to do that for good old class components.

Wrapping up

So yea I would use hooks in my project but only for few smaller components. I would stick to class components without any hooks for every other use case. I may be right or wrong. This is just my opinion. Do let me know your thoughts. That would help me learn better