DEV Community: Orkhan Jafarov

Download a file with react hook

Orkhan Jafarov — Sun, 30 Apr 2023 20:59:55 +0000

What for?

Simply couldn't find a react hook that will let me just pass my data (string, arraybuffer) and download it as a file.

Description

A react hook to handle data downloading as a file.
Without any dependencies and with typescript support.

How to use?

npm install --save react-downloadfile-hook

yarn add react-downloadfile-hook

Examples

Download properly through a link

This is a recommended method to handle downloading. You need to provide required fileName, format/mime-type, data properties into the hook.

import { useDownloadFile } from "react-downloadfile-hook";

const { linkProps } = useDownloadFile({
  fileName,
  format: "image/svg+xml",
  data: `<svg><circle cx="50" cy="50" r="40"fill="red" /></svg>`,
});

<a {...linkProps}>Download SVG File</a>;

Download on click

The simplest way to handle downloading. It also named as a "force download a file". It uses old-school method, adding a link into the DOM and click it.

import { useDownloadFile } from "react-downloadfile-hook";

const { downloadFile } = useDownloadFile({
  fileName,
  format: "image/svg+xml",
  data: `<svg><circle cx="50" cy="50" r="40"fill="red" /></svg>`,
});

<Button onClick={downloadFile}>Download SVG File</Button>;

Advanced handling

If your data is not a string type (ArrayBuffer, Uint8Array, etc), you may need to replace the built-in handler.
You need provide onCreateBlob callback that returns Blob.

import { useDownloadFile } from "react-downloadfile-hook";

const { downloadFile, linkProps } = useDownloadFile({
  fileName,
  format: "image/svg+xml",
  data: new Uint8Array([1, 2, 3]),
  onCreateBlob: (data: uint8Array, format) => {
    const arrayBuffer = uint8Array.buffer;
    return new Blob([arrayBuffer], { type: format });
  },
});

<a {...linkProps}>Download File</a>;
<Button onClick={downloadFile}>Download File</Button>;

Cheers!

Build mock-server with Reactend in one touch

Orkhan Jafarov — Mon, 22 Feb 2021 22:55:59 +0000

Hey there,

Reactend is still in experimental mode, but it's ready to go as a mock-server for now.

What is mock-server ?

Most of you know about it. But for any case I'll describe it. Mock-server is a http-server with fake/mock data. Before you build your frontend, you need to have a backend that responses you data you need. In case if you're backend is not ready yet.

How can Reactend help you ?

It provides you declarative way to build your http-server
It uses faker.js inside that has a lot of fake data methods
Implement with any (Get, Post, Put and etc.) methods
One touch run
One tiny app file

How it looks like?

Let's create simple mock-server

To start building with Reactend, you should run this or clone this repo

npx create-reactend my-app --template faker

We need to mock:

Sign-up and Sign-in
Get user data
Get orders

Modify src/app.js to base app structure

import React from "react";
import { registerApp, App, Router, Logger } from "@reactend/express";

const MockServerApp = () => (
  <App port={3000}>
    <Logger mode="dev" />
    <Router path="/api">
      {/* Magic will be here */}
    </Router>
  </App>
);

registerApp(MockServerApp);

Mock sing-up and sign-in

We put this code in Router as children. There - {/* Magic will be here */}

<Post path="/sign-up">
  <Res.Content json={{ msg: 'success' }} />
</Post>
<Post path="/sign-in">
  <Res.Header name="AuthToken" value="tokentokentoken" />
  <Res.Content json={{ msg: 'logged in' }} />
</Post>

Mock user data

We use Res.Faker to get fake data, we will have user data with userId, profile and etc.

<Post path="/user">
 <Res.Faker
    map={{
      userId: "random.uuid",
      isAdmin: false,
      profile: {
        fullName: "name.findName",
        avatar: "image.people",
        registeredAt: "date.past",
      }
    }}
  />
</Post>

on POST request we got this json object

{
    "userId": "26a3392f-d80c-4927-8f09-773f9979a6ea",
    "isAdmin": false,
    "profile": {
        "fullName": "Enrique Moore",
        "avatar": "http://placeimg.com/640/480/people",
        "registeredAt": "2020-06-11T04:11:36.297Z"
    }
}

Mock user's order

<Get path="/user/orders">
  <Res.Faker
    length={5}
    map={{
      id: "random.uuid",
      name: "commerce.productName",
      color: "commerce.color",
      qty: 'random.number',
      price: 'random.float'
    }}
  />
</Get>

Note. There're two props length (number of objects) and locale (default:en)

on GET request we got this json object

[
    {
        "id": "b2cab08e-ab41-4db4-a6ca-cafe4ae53812",
        "name": "Sleek Frozen Bike",
        "color": "turquoise",
        "qty": 25725,
        "price": 37197.2
    },
    {
        "id": "a0eadf9f-89d2-4d9d-8b10-069c72a43337",
        "name": "Handmade Rubber Computer",
        "color": "tan",
        "qty": 56871,
        "price": 192.09
    },
....

Merge them all

Now we have simple mock-server to work with our frontend part. We can get response when we login, sing up, get user data and user's orders. We can even select locale, just need to pass locale prop in Res.Faker. ex. <Res.Faker locale="az" ...

import React from "react";
import {
  registerApp,
  App,
  Router,
  Logger,
  Res,
  Get,
  Post,
} from "@reactend/express";

const MockServerApp = () => (
  <App port={3000}>
    <Logger mode="dev" />
    <Router path="/api">
      <Post path="/sign-up">
        <Res.Content json={{ msg: "success" }} />
      </Post>
      <Post path="/sign-in">
        <Res.Header name="AuthToken" value="tokentokentoken" />
        <Res.Content json={{ msg: "logged in" }} />
      </Post>
      <Post path="/user">
        <Res.Faker
          map={{
            userId: "random.uuid",
            isAdmin: false,
            profile: {
              fullName: "name.findName",
              avatar: "image.people",
              registeredAt: "date.past",
            },
          }}
        />
      </Post>

      <Get path="/user/orders">
        <Res.Faker
          length={5}
          map={{
            id: "random.uuid",
            name: "commerce.productName",
            color: "commerce.color",
            qty: "random.number",
            price: "random.float",
          }}
        />
      </Get>
    </Router>
  </App>
);

registerApp(MockServerApp);

Conclusion

So, now you have your tiny mock-server (Hooray!)

You can also check Reactend repo and try playground on repl.it.

New features are coming for Reactend, so keep updated!

⚡️Reactend "The story of react.js on backend"

Orkhan Jafarov — Fri, 12 Feb 2021 11:13:10 +0000

Hey guys!

As I promised in my previous article. Here's the project/framework to build your React-like http-server.
@reactend/express repo link

What's that?

Node.js http-server based on React-Components
Express.js inside
Get, Post, Delete and etc. components to use router method
Get(render) and Res.Render to render your regular React DOM Components
useContext(ReqResContext) hook to access req, res
Support styled-components
Built-in logger (morgan)
Middleware component in Router and its Routes
handler prop in Route components to use as regular controller

and many many features that should be documented...

Get started

Run this to create reactend project on your local machine

npx create-reactend my-app

Play with that on repl.it

🕹 Playground on repl.it

Code Example

import React from 'react';
import { resolve } from 'path';

import { registerApp, App, Static, Router, Get, Post, Res, Logger } from '@reactend/express';

const ExpressApp = () => (
  <App port={process.env.PORT || 8080}>
    <Static publicPath={resolve(__dirname, '/public')} />
    <Logger mode="dev" />
    <Router path="/">
      <Get>
        <Res.Header name="Cache-Control" value="public, max-age=31557600" />
        <Res.Render component={HomePage} />
      </Get>
      <Get path="/components" render={ComponentsPage} />
      <Router path="/api">
        <Post
          path="/status"
          json={{ msg: 'It is okay, bro' }}
          handler={(req) => console.log(req.originalUrl)}
        />
      </Router>
      <Get path="*" text="Not Found" status={404} />
    </Router>
  </App>
);

registerApp(ExpressApp);

You can use this way too

import cors from 'cors';
<Middleware handler={cors()} />;

Use Res.* components

<Get path="/redirect">
  <Res.Redirect statusCode={301} path="https://ru.reactjs.org" />
</Get>

<Post path="/json">
  <Res.Status statusCode={401} />
  <Res.Content json={{ msg: 'No Access' }} contentType="application/json" />
</Post>

<Get path="/send-file">
  <Res.SendFile path={resolve('public/code-example.png')} onError={console.log} />
</Get>

<Get path="/render">
  <Res.Render component={() => <h1>Shut Up And Take My Money!</h1>} />
</Get>

Components

Note. This minor description for now (Docs is on the way)

<App /> - App Instance (props: port)
<Static /> - Static route (props: publicPath, path, options)
<Router /> - Router-Provider (props: path)
<Get />, <Post /> and ... - Route component (props: path, content, handler, status)
<Middleware /> - Middleware (props: handler)
<Logger /> - morgan logger (props: mode, disabled)
<Res /> - Response components
<Res.Render /> - Render (props: component)
<Res.Content /> - Response send (props: json, text, contentType)
<Res.Status /> - Response Status (props: statusCode)
<Res.SendFile /> - Response Send File (props: path, options, onError)
<Res.Redirect /> - Redirect (props: path, statusCode)

What is planning?

Done with Docs
Work on fixes/updates
Write an article about "How it works inside"

Conclusion

Just to be clear. It's not a production-ready product and it's not Next.js or whatever. Reactend is an experimental project to integrate React into Node.js server. But I'm working on it and trying to nail it. Let see :)

Follow me on twitter @orkhanjafarovr

Cheers 🎉✨,
Orkhan Jafarov

Express in React! React Backend! Whut?! 🤯

Orkhan Jafarov — Sun, 07 Feb 2021 19:36:01 +0000

Hey there! One more implemented crazy idea for React

Idea

So, long time ago when I was researching react custom renderer, I had a crazy idea to use it for Node.js server/backend. Finally, I've decided to try.

Disclaimer ⚠️

It's not fully-ready solution (in process)
Don't use it for production
Yes, I know about scalability, architecture and etc. This is just an experimental project. Relax 🛀

How it works?

It works with express.js framework to run Node.js server. Custom renderer is building express-structured app based on React Components.

How it looks like ?

Base code example

import React from "react";
import ReactExpress from "./renderer";

const HomePage = () => <h1>Welcome to home page</h1>;
const AboutPage = () => <><h1>About Company</h1><p>Bla bla</p></>;

const ExpressApp = () => (
  <app port={8080}>
    <router path="/">
      <get content={<HomePage />} />
      <get path="*" content="Not Found" status={404} />
    </router>
    <router path="/company">
      <get path="/about" content={<AboutPage />} />
    </router>
    <router path="/api">
      <post path="/status" content={{ msg: "It is okay, bro" }} />
    </router>
  </app>
);

ReactExpress.render(<ExpressApp />);

Instances

There're components for express.js instances like router, static, get, post and etc.

Components

<app /> - App Instance (props: port)

<static /> - Static route (props: publicPath, path, options)

<router /> - Router-Provider (props: path)

<get />, <post /> and ... - Route component (props: path, content, handler, status)

...still in process

Let's go deep into Route Component

Our route components are <get />, <post />, <delete /> and etc.

They have the same structure.

Examples:

// Response json
<get path="/status" content={{ msg: "I\'m okay" }} />

// Response SSR React-Component
<get path="/homepage" content={() => <h1>Welcome to home page</h1>} />

// Response error
<get path="/not-found" content="Page not found" status={404} />

// Response with handler
<get path="/posts/:id" handler={(req,res) => res.send(`id is ${req.params.id}`)} />

// The same for all methods
<post path="/posts/:id" handler={(req,res) => res.send(`id is ${req.params.id}`)} />

React API

Currently it's possible to use React Context API.
For example there's a way to get handler's request and response arguments. It used in the project's demo

import { context } from "../../context";

export const TopNav = () => {
  const { req, res } = useContext(context);
  return (
    <TopWrapper currentPath={req.originalUrl}>
      <Logo href="/"> </Logo>
      <NavItem href="/">Home</NavItem>
      <NavItem href="/components">Components</NavItem>
      <NavItem href="https://github.com/gigantz/react-xpress">Github</NavItem>
    </TopWrapper>
  );
};

What is planning?

I work on it and I'm trying to improve it, even it's not a good idea to use this kinda renderer for real-world app. But It would be awesome to have contributors to make its DX much better.

Future of the components

I have a plan to make it something like this


// Add components from the lib
import {Router, Middleware, Res, Get, Post} from 'react-xpress';

// Make more component based structure
<Get path="/not-found">
  <Res.Status code={404} />
  <Res.Content text="Page is not found" />
</Get>

// Using Middlewares
<Get path="/user">
  <Middleware handler={checkToken}>
    <Res.Status code={401} />
    <Res.Content json={{ status: 401, msg: "No access" }} />
  </Middleware>
  <Res.Content>
    <UserPage />
  </Res.Content>
</Get>
...

There're more crazy ideas is in process.

Demo

Here's a working prototype - http://react-xpress-demo.herokuapp.com/
Its Github repo - https://github.com/gigantz/react-xpress

Conclusion

Feel free to contact me and contribute the project. It's just on its way and just be followed to get updates. Hopefully we'll deliver better product soon. For now you can easily clone the repo and try it.

I'm also planning to write an article about react custom renderer. I hope you like this kind of experiments.

Cheers 🎉✨,
Orkhan Jafarov

🦸‍♂️ 11 JavaScript Tips and Tricks to Code Like A Superhero (Vol.2)

Orkhan Jafarov — Mon, 18 Jan 2021 19:58:34 +0000

Hi JS-heroes! Finally done with this new article! Let's go ahead ✨

1. Generate a list with random numbers

We need A LOT of fake data, for different reasons. So here's a way to do that gently.

Array.from({ length: 1000 }, Math.random)
// [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items

2. Generate a list with numbers

Yep, just one more trick to generate a list with numbers.

Array.from({ length: 1000 }, (v, i) => i)
// [0, 1, 2, 3, 4, 5, 6....999]

1-2 edited. Thanks to Andrew Courtice

3. Convert RGB → HEX

Convert your RGB to HEX without any libs!

const rgb2hex = ([r, g, b]) =>
  '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).substr(1);

rgb2hex([76, 11, 181]);
// #4c0bb5

4. Convert HEX → RGB

What's about convert it back?! Here's a nice way to implement that.

const hex2rgb = hex =>
  [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16));

hex2rgb("#4c0bb5");
// [76, 11, 181]

5. Odd or Even

Another yet odd/even checking.

const value = 232;  

if (value & 1) console.log("odd");
else console.log("even");
// even

6. Check valid URL

I guess most of you use this way to validate URL, but anyway. Let's share it

const isValidURL = (url) => {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
};

isValidURL("https://dev.to");
// true

isValidURL("https//invalidto");
// false

7. N something ago

Sometimes you need something to print a date to 6 minute(s) ago, but don't want to import monster-size libs. Here's a small snippet that does it, easily modify it as you wish and go ahead.

const fromAgo = (date) => {
  const ms = Date.now() - date.getTime();
  const seconds = Math.round(ms / 1000);
  const minutes = Math.round(ms / 60000);
  const hours = Math.round(ms / 3600000);
  const days = Math.round(ms / 86400000);
  const months = Math.round(ms / 2592000000);
  const years = Math.round(ms / 31104000000);

  switch (true) {
    case seconds < 60:
      return `${seconds} second(s) ago"`;
    case minutes < 60:
      return `${minutes} minute(s) ago"`;
    case hours < 24:
      return `${hours} hour(s) ago"`;
    case days < 30:
      return `${days} day(s) ago`;
    case months < 12:
      return `${months} month(s) ago`;
    default:
      return `${years} year(s) ago`;
  }
};

const createdAt = new Date(2021, 0, 5);
fromAgo(createdAt); // 14 day(s) ago;

8. Generate path with params

We work a lot with routes/paths and we always need to manipulate them. When we need to generate a path w/ params to push browser there, generatePath helps us!

const generatePath = (path, obj) =>
    path.replace(/(\:[a-z]+)/g, (v) => obj[v.substr(1)]);

const route = "/app/:page/:id";
generatePath(route, {
  page: "products",
  id: 85,
});
// /app/products/123

9. Get params from path

Yes! Now we need to get our params back. Also, you can pass serializer to parse your data gently.

const getPathParams = (path, pathMap, serializer) => {
  path = path.split("/");
  pathMap = pathMap.split("/");
  return pathMap.reduce((acc, crr, i) => {
    if (crr[0] === ":") {
      const param = crr.substr(1);
      acc[param] = serializer && serializer[param]
        ? serializer[param](path[i])
        : path[i];
    }
    return acc;
  }, {});
};

getPathParams("/app/products/123", "/app/:page/:id");
// { page: 'products', id: '123' }

getPathParams("/items/2/id/8583212", "/items/:category/id/:id", {
  category: v => ['Car', 'Mobile', 'Home'][v],
  id: v => +v
});
// { category: 'Home', id: 8583212 }

10. Generate path with query string

Of course, we work with paths and we need to generate path with query too.

const generatePathQuery = (path, obj) =>
  path +
  Object.entries(obj)
    .reduce((total, [k, v]) => (total += `${k}=${encodeURIComponent(v)}&`), "?")
    .slice(0, -1);

generatePathQuery("/user", { name: "Orkhan", age: 30 }); 
// "/user?name=Orkhan&age=30"

11. Get params from query string

Now it's a time to get params from query string.

const getQueryParams = url =>
  url.match(/([^?=&]+)(=([^&]*))/g).reduce((total, crr) => {
    const [key, value] = crr.split("=");
    total[key] = value;
    return total;
  }, {});

getQueryParams("/user?name=Orkhan&age=30");
// { name: 'Orkhan', age: '30' }

Conclusion

Try to understand how everything works and keep your code nice/clean.

Take your JS-hero's skills and save the world! ✨🦸‍♂️ ✨

Save and contribute tips/tricks on github code-like

⚡️ Generate Link Preview Cover with Nodejs

Orkhan Jafarov — Tue, 22 Dec 2020 02:05:08 +0000

Last couple years I see very nice generated covers for social link preview, also our lovely dev.to does it and I've tried to code something like this.

Note. I was planning to do it in Nextjs, but to avoid too much instruction I've decided to separate them. Article about Nextjs is on the way too.

Result we have to reach is this 🔥

Step 1

Let's draw some canvas on server side!
We're gonna use this package to draw canvas in nodejs.

Create lib folder.

Define our cover design theme and call it theme.js and put it into lib directory.

// use fonts in your machine
const fontFamily = "Lucida Sans Unicode";

const fontSizes = {
  heading: 80,
  author: 40,
  authorTitle: 26
};

module.exports = {
  fontStyles: {
    heading: `900 ${fontSizes.heading}px  ${fontFamily}`,
    author: `700 ${fontSizes.author}px ${fontFamily}`,
    authorTitle: `500 ${fontSizes.authorTitle}px ${fontFamily}`
  },
  fontSizes,
  colors: {
    primary: "#ffd166",
    secondary: "white",
    base: "#560bad"
  },
  avatarSize: 80,
  avatarBorder: 5,
  logoW: 100,
  logoH: 80,
  space: 40
};

Step 2

Install canvas package:
npm i --save-dev canvas

yarn add canvas

Create index.js file in lib folder that will create canvas and getContext to work with.

const { createCanvas, loadImage } = require("canvas");
const { wrapText } = require("./helpers");
const theme = require("./theme");

// Create canvas and get its context
const canvas = createCanvas(1200, 630);
const ctx = canvas.getContext("2d");

const {
  colors,
  avatarSize,
  avatarBorder,
  fontSizes,
  fontStyles,
  logoW,
  logoH,
  space
} = theme;

Step 3

Add main part in index.js above. Please read some hints about canvas while reading the code below.

module.exports = async function generateCover({
  title,
  avatarUrl,
  name,
  position
}) {
  // Load images
  const logo = await loadImage(
    "https://d2fltix0v2e0sb.cloudfront.net/dev-black.png"
  );
  const avatar = await loadImage(avatarUrl);

  // Background
  ctx.fillStyle = colors.base;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Heading text
  ctx.fillStyle = colors.secondary;
  ctx.font = fontStyles.heading;
  wrapText(
    ctx,
    title,
    space,
    fontSizes.heading + space,
    canvas.width - space * 2,
    fontSizes.heading
  );

  // Avatar
  const avatarTop = canvas.height - avatarSize - avatarSize / 2;
  const avatarLeft = space;

  // Border around avatar
  ctx.fillStyle = colors.primary;
  ctx.beginPath();
  ctx.arc(
    avatarSize / 2 + avatarLeft,
    avatarSize / 2 + avatarTop,
    avatarSize / 2 + avatarBorder,
    0,
    2 * Math.PI
  );
  ctx.fill();
  ctx.closePath();

  // Clip image before draw
  ctx.save();
  ctx.beginPath();
  ctx.arc(
    avatarSize / 2 + avatarLeft,
    avatarSize / 2 + avatarTop,
    avatarSize / 2,
    0,
    2 * Math.PI
  );
  ctx.closePath();
  ctx.clip();

  // Put avatar
  ctx.drawImage(avatar, avatarLeft, avatarTop, avatarSize, avatarSize);

  // Unclip all around avatar
  ctx.beginPath();
  ctx.arc(0, 0, avatarSize / 2, 0, Math.PI * 2, true);
  ctx.clip();
  ctx.closePath();
  ctx.restore();

  // Author name
  ctx.fillStyle = colors.secondary;
  ctx.font = fontStyles.author;
  ctx.fillText(
    name,
    avatarLeft + avatarSize + space / 2,
    avatarTop + fontSizes.author - 4
  );

  // Author title
  ctx.fillStyle = colors.primary;
  ctx.font = fontStyles.authorTitle;
  ctx.fillText(
    position,
    avatarLeft + avatarSize + space / 2,
    avatarTop + fontSizes.author + fontSizes.authorTitle
  );

  // Add logo
  ctx.drawImage(
    logo,
    canvas.width - logoH - 60,
    canvas.height - logoH - logoH / 2 + space / 4,
    logoW,
    logoH
  );

  // Return PNG Stream
  // you can pass pngConfig here
  return canvas.createPNGStream();
};

Test it with simple express framework.

const app = require("express")();
const generateCover = require("./lib");

app.get("/generate-cover", async (req, res) => {
  try {
    const coverStream = await generateCover({
      title: "Generate Link Preview Cover with Nodejs",
      avatarUrl:
        "https://res.cloudinary.com/practicaldev/image/fetch/s--4rczDrsA--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/152066/eb216eb5-1b78-42fd-8faf-2d5bc69f075c.jpg",
      name: "Orkhan Jafarov",
      position: "Senior Frontend Developer"
    });

    res.statusCode = 200;
    res.setHeader("Content-Type", "image/png");
    res.setHeader("Content-Control", "public, max-age=31536000");

    coverStream.pipe(res);
  } catch (error) {
    res.statusCode = 500;
    res.end(error.message);
  }
});

app.listen(3000);

Open it in browser

It's working 🔥

Last step

Add social meta tags into your html

<meta property="og:title" content="your_title" />
<meta
 property="og:image"
 content="http://example.com/generate-cover/uniq-id-1"
/>

<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="your_title" />
<meta
 property="twitter:image"
 content="http://example.com/generate-cover/uniq-id-1"
/>

Use absolute url to your image source

Done!

Try it yourself on codesandbox!

Check link preview https://0r8qz.sse.codesandbox.io/ here and here

Of course, that's only starter tutorial. There's no saving cover images and return if it's already generated. But that's up to you. For simple project it's enough, you can optimize it if you'll use less colors and it will be VERY fast.

Thank you! ✨

Idea to implement

You can pass your unique key and use a data from your DB. For example.

GET /generate-cover/uniq-id-1

app.get('/generate-cover/:postId', (req, res) => {
    const { postId } = req.params;
    const {
        title,
        author: {
            avatarUrl,
            name,
            position
        }
    } = await db.posts.findOne({ id: postId });

    const coverStream = await generateCover({
        title,
        avatarUrl,
        name,
        position
    });

    coverStream.pipe(res);
});

Create Your Effector-like State Manager ☄️

Orkhan Jafarov — Fri, 23 Oct 2020 18:55:43 +0000

Introduction

We have a lot of state managers in our Javascript-World and use them every day, but now it's a time to understand "How they work".

There's a very nice state manager Effector.js which is very simple to use in your application, also it's easy to replace your current global state manager. So, I recommend to use it for your project and doesn't matter for which framework. I use it on my React Apps.

Let's start to create own Effector-like state manager!

We're gonna create basics looks like Effector, of course Effector is deeper and complex and our state manager is just simple version of it.

1) Firstly, let's create a js file (effector-clone.js) with our state manager. We start with createStore function that create our store instance with events.

export const createStore = initState => {
  let state = initState; // State of instance
    let events = new Map(); // Events subscribed to the current store
    let watchers = []; // Array of watcher that get called on the state changes

  let store = {
    getState: () => state, // Get current state of the store
        on(event, cb) {}, // Method to subscribe event
        dispatch(event, payload) {}, // Dispatch event to make changes in the store
        watch(cb) {} // Subscribe to the state changes
  };

  return store;
};

2) We need to add a function that creates event instance.

Let's add this code into the file above!

export const createEvent = () => {
    // Return function that iterates stores linked to the event
  let event = payload => {
    event.stores.forEach((store) => {
      store.dispatch(event, payload);
    });
  };

    // Let's link stores to the event
    // We're gonna call stores' dispatches on event's call
  event.stores = [];

  return event;
};

3) Implement on, dispatch and watch methods for the store instance.

export const createStore = initState => {
  let state = initState;
    let events = new Map();
    let watchers = [];

  let store = {
    getState: () => state,
        on(event, cb) {
            // Subscribe to store
            // We use event instance as key for map and callback as a value
            // [event: Function]: callback: Function

            // Set event in the events map if it hasn't the event in this store
            if (!events.has(event)) {
        events.set(event, cb);
                event.stores.push(this);
      }
      return this;
        },
        dispatch(event, payload) {
            // We get and call event's callback and
            // set it's result to the store's state

            const cb = events.get(event);
      if (cb && typeof cb === "function") {
        let newState = cb(state, payload);

                // Check if state is the same
        if (newState !== state) {
          state = newState;
        }
      }

            // Iterable callbacks on the state changes
            watchers.forEach((watch) => watch(state, payload));
        },
        watch(cb) {
      watchers.push(cb);
            // Return function to unsubscribe the watcher
      return () => {
        watchers = watchers.filter((i) => i !== cb);
      };
    }
  };

  return store;
};

Core part of our state manager is Done! ✅

Use it with React + hooks ⚛︎

We're gonna use it as a global state manager. It's also okay to use inside your component.

1) Create useStore.js file and add this simple code.

import { useEffect, useState } from "react";

export const useStore = store => {
    // We get initial state of the store
  const [state, setState] = useState(store.getState());

  useEffect(() => {
        // Pass setState function as a callback
        // store.watch() returns unsubscribe function
    const unsubscribe = store.watch(setState);

    return () => {
            // Unsubscribe our watcher on component unmount
      unsubscribe();
    };
  }, [store]);

  return state;
};

2) Create counterStore.js file with our counter store

import { createStore, createEvent } from "./effector-clone";

export const $counter = createStore(0);

export const inc = createEvent();
export const dec = createEvent();
export const reset = createEvent();

$counter
  .on(inc, (state) => state + 1)
  .on(dec, (state) => state - 1)
  .on(reset, () => 0);

3) Create a Counter.jsx component

import React from "react";
import { $counter, inc, dec, reset } from "./counterStore";
import { useStore } from "./useStore";

export const Counter = () => {
  const total = useStore($counter);

  return (
    <>
      <p>Total: <b>{total}</b></p>
      <button onClick={dec}>-</button>
      <button onClick={reset}>Reset</button>
      <button onClick={inc}>+</button>
    </>
  );
};

Magic works ✨✨✨

Conclusion

We created own custom state manager and its size with useStore hook is only 1.4kb. I hope now it's a bit cleaner about how it works and how to create own state manager. Of course it needs upgrades and error handlers, but depends on your feedbacks I'll publish an article about these upgrades.

Try it on codesandbox! 🔥

Thank You For Reading!

by Orkhan Jafarov

🧙‍♂️ 9 JavaScript Tips & Tricks To Code Like A Wizard

Orkhan Jafarov — Sun, 13 Sep 2020 15:06:19 +0000

1. Generate numbers between a range

There are some situations when we create an array with numbers range. Let's say for birthday input where you need that range. Here's the easiest way to implement it.

let start = 1900,
    end = 2000;
[...new Array(end + 1).keys()].slice(start);
// [ 1900, 1901, ..., 2000]

// also this, but more unstable results for big range
Array.from({ length: end - start + 1 }, (_, i) => start + i);

2. Use array of values as arguments for functions

We have cases when you need to collect your values in array(s) and then pass it as arguments for function. With ES6 you can just use spread operator (...) and extract your array from [arg1, arg2] > (arg1, arg2)

const parts = {
  first: [0, 2],
  second: [1, 3],
};

["Hello", "World", "JS", "Tricks"].slice(...parts.second);
// ["World", "JS", "Tricks"]

You can use it with any function

3. Use values as arguments with Math methods

So, we're good in spreading values to put them into functions. When we need to find Math.max or Math.min of our numbers in array we do it like below.

// Find the highest element's y position is 474px
const elementsHeight =  [...document.body.children].map(
  el => el.getBoundingClientRect().y
);
Math.max(...elementsHeight);
// 474

const numbers = [100, 100, -1000, 2000, -3000, 40000];
Math.min(...numbers);
// -3000

4. Merge/flatten your arrays in arrays

There's a nice method for Array called Array.flat, as an argument it needs depth you need to flat (default: 1). But what if you don't know the depth, you need to flatten it all. We just put Infinity as the argument. Also there's a nice flatMap method.

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]];
arrays.flat(Infinity);
// [ 10, 50, 100, 2000, 3000, 40000 ]

5. Preventing your code crash

It's not good to have unpredictable behavior in your code, but if you have it you need to handle it.

For example. Common mistake TypeError, if you're trying to get property of undefined/null and etc.

Note. Use it if your project doesn't support optional chaining

const found = [{ name: "Alex" }].find(i => i.name === 'Jim');
console.log(found.name);
// TypeError: Cannot read property 'name' of undefined

You can avoid it like this

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {};
console.log(found.name);
// undefined

Of course it depends on situations, but for minor handle it's okay. You don't need to write huge code to handle it.

6. Nice way to pass arguments

Good example of using this feature is styled-components, in ES6 you can pass Template literals as argument for function without brackets. Nice trick if you're implementing function that format/convert your text.

const makeList = (raw) =>
  raw
    .join()
    .trim()
    .split("\n")
    .map((s, i) => `${i + 1}. ${s}`)
    .join("\n");

makeList`
Hello, World
Hello, World
`;
// 1. Hello
// 2. World

7. Swap variables like a wizard

With Destructuring assignment syntax we can easily swap variables.

let a = "hello";
let b = "world";

// Wrong
a = b
b = a
// { a: 'world', b: 'world' }

// Correct
[a, b] = [b, a];
// { a: 'world', b: 'hello' }

Solution for wrong way is to add third temporary variable :(

8. Sort by alphabetical order

I worked a lot in international companies and their apps had non-english data. When you do your "awesome" tricks to sort list of this kind of data it looks okay, sometimes because there're just a few strings for that moment. Maybe it looks okay cause you don't know that language's alphabet.
Use correct one to be sure that it's sorted by alphabetical order for that language.

For example. Deutsche alphabet

// Wrong
["a", "z", "ä"].sort((a, b) => a - b);
// ['a', 'z', 'ä']

// Correct
["a", "z", "ä"].sort((a, b) => a.localeCompare(b));
// [ 'a', 'ä', 'z' ]

9. Mask it nicely

Final trick is about masking strings. When you need to mask any variable. Not password of course :) it's just example. We just get part of string substr(-3), 3 characters from its end and fill length that left with any symbols (example *)

const password = "hackme";
password.substr(-3).padStart(password.length, "*");
// ***kme
// Hmmm I guess your first attempts might be wrong

Conclusion

Try to have nice and clean code. Save all tricks you would like to use in your code and track change logs of JavaScript.

Have a great dev-day! 🎉

Save and contribute tips/tricks on github code-like

Real Compass on mobile browsers with Javascript

Orkhan Jafarov — Fri, 11 Sep 2020 10:59:13 +0000

Well, one day I had a challenge from my muslim friend to code a map that's gonna show an arrow from his current geolocation to Qibla or any geopoint.

That wasn't the best solution, cause a compass will solve it better way and make people's life easier. So, I've started to find any package/lib to put the compass into his webpage.

Found these solutions Compass.js or this one, but none of them work ~~at all~~ well. Cause last commits were 6-7 years ago.

Let's make own real compass for mobile browsers!

Result we're gonna have

We will need several html elements.



<div class="compass">
  <div class="arrow"></div>
  <div class="compass-circle"></div>
  <div class="my-point"></div>
</div>
<button class="start-btn">Start compass</button>

Let's add css for that



.compass {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  margin: auto;
}

.compass > .arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 30px 20px 0 20px;
  border-color: red transparent transparent transparent;
  z-index: 1;
}

.compass > .compass-circle,
.compass > .my-point {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
  background: url(https://cdn.onlinewebfonts.com/svg/img_467023.png) center
    no-repeat;
  background-size: contain;
}

.compass > .my-point {
  opacity: 0;
  width: 20%;
  height: 20%;
  background: rgb(8, 223, 69);
  border-radius: 50%;
  transition: opacity 0.5s ease-out;
}

JavaScript time!

Define our html elements first and add event for button that starts it.
iOS needs to have manipulation by user to start DeviceOrientationEvent, but for Android it works without it.



const compassCircle = document.querySelector(".compass-circle");
const startBtn = document.querySelector(".start-btn");
const myPoint = document.querySelector(".my-point");
let compass;
const isIOS = !(
  navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
  navigator.userAgent.match(/AppleWebKit/)
);



function init() {
  startBtn.addEventListener("click", startCompass);
}

function startCompass() {
  if (isIOS) {
    DeviceOrientationEvent.requestPermission()
      .then((response) => {
        if (response === "granted") {
          window.addEventListener("deviceorientation", handler, true);
        } else {
          alert("has to be allowed!");
        }
      })
      .catch(() => alert("not supported"));
  } else {
    window.addEventListener("deviceorientationabsolute", handler, true);
  }
}

function handler(e) {
  compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
  compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;
}

init();

Done! Our compass is working for both iOS and Android.

Upgrade our compass to reach the goal

On this step we need to find correct angle/degree to our point (Qibla).
We put the point coordinates and calculate degree from out current geolocation.

How it works?

We're getting our current geolocation
Define point coordinates (where we should turn to)
Calculate degree from our position to defined point
Display point when we're in correct position

Define pointDegree and our functions for this.



let pointDegree;

function locationHandler(position) {
  const { latitude, longitude } = position.coords;
  pointDegree = calcDegreeToPoint(latitude, longitude);

  if (pointDegree < 0) {
    pointDegree = pointDegree + 360;
  }
}

function calcDegreeToPoint(latitude, longitude) {
  // Qibla geolocation
  const point = {
    lat: 21.422487,
    lng: 39.826206,
  };

  const phiK = (point.lat * Math.PI) / 180.0;
  const lambdaK = (point.lng * Math.PI) / 180.0;
  const phi = (latitude * Math.PI) / 180.0;
  const lambda = (longitude * Math.PI) / 180.0;
  const psi =
    (180.0 / Math.PI) *
    Math.atan2(
      Math.sin(lambdaK - lambda),
      Math.cos(phi) * Math.tan(phiK) -
        Math.sin(phi) * Math.cos(lambdaK - lambda)
    );
  return Math.round(psi);
}

We put our location handler into init function to listen Geolocation API. Add some code to handler that's gonna update our point state.



function init() {
  startBtn.addEventListener("click", startCompass);
  navigator.geolocation.getCurrentPosition(locationHandler);
}

function handler(e) {
  compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);
  compassCircle.style.transform = `translate(-50%, -50%) rotate(${-compass}deg)`;

  // ±15 degree
  if (
    (pointDegree < Math.abs(compass) && pointDegree + 15 > Math.abs(compass)) ||
    pointDegree > Math.abs(compass + 15) ||
    pointDegree < Math.abs(compass)
  ) {
    myPoint.style.opacity = 0;
  } else if (pointDegree) {
    myPoint.style.opacity = 1;
  }
}

We're done! We have a real compass in our mobile browsers.

Demo link

Here's a source link

by @gigantz

Manage your npm-package directly from your code

Orkhan Jafarov — Tue, 02 Apr 2019 19:55:17 +0000

vscode-here-and-now extension

Easily install/remove npm package directly from your code!
https://marketplace.visualstudio.com/items?itemName=orkhanjafarovr.vscode-here-and-now

by clicking here

import foo from 'bar';
const foo2 = require('baz');
Or in package.json

Key-bindings:

Install package: shift + alt + i
Remove package: shift + alt + u