Forem: ziqin

Step by step on how to setup fabric.js in the next.js app

ziqin — Sat, 30 Sep 2023 03:12:44 +0000

🧐 What is `fabric.js`

Fabric.js is a powerful and simple
Javascript HTML5 canvas library. It provides an interactive object model on top of the canvas element.
Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.

What we build in this blog

The demo above is taken from this medium blog, in which there's some slight modification or fix need to be done.

Install `fabric.js`

npm

npm i fabric
npm i -D @types/fabric # typescript

yarn

yarn add fabric
yarn add -D @types/fabric # typescript

pnpm

pnpm add fabric
pnpm add -D @types/fabric # typescript

Setup for next.config.js

Below is the code for next.config.js. The reason is to configure the webpack for canvas runtime error that will crash the application and utf-8-validate & bufferutil warning. View more at the relevant references.

/** @type {import('next').NextConfig} */
const nextConfig = {
  // reactStrictMode: false,
  webpack: (config) => {
    config.externals.push({
      "utf-8-validate": "commonjs utf-8-validate",
      bufferutil: "commonjs bufferutil",
      canvas: "commonjs canvas",
    });
    // config.infrastructureLogging = { debug: /PackFileCache/ };
    return config;
  },
};

module.exports = nextConfig;

Boilerplate for Next.js with Fabric.js

Below is the next.js .tsx code. If you are using Next.js 13.4 and above and opt-in to the app router, add "use client" on top of the file to use the Next.js client component, or else ignore the line.

"use client"; // next.js app router

import React, { useState, useEffect } from "react";
import { fabric } from "fabric";

const App = () => {
  const [canvas, setCanvas] = useState<fabric.Canvas>();

  useEffect(() => {
    const c = new fabric.Canvas("canvas", {
      // ...
    });

    // settings for all canvas in the app
    // ...

    setCanvas(c);

    return () => {
      // ...
    };
  }, []);

  const addRect = (canvi?: fabric.Canvas) => {
    // ...
  };

  return (
    <div>
      <button onClick={() => addRect(canvas)}>Rectangle</button>
      <canvas id="canvas" />
    </div>
  );
};

export default App;

Ensure that <canvas> tag has an ID the same as new fabric.Canvas(id, {...})

useEffect & addRect function

  useEffect(() => {
    const c = new fabric.Canvas("canvas", {
      height: 400,
      width: 800,
      backgroundColor: "black",
    });

    // settings for all canvas in the app
    fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.cornerColor = "#2BEBC8";
    fabric.Object.prototype.cornerStyle = "rect";
    fabric.Object.prototype.cornerStrokeColor = "#2BEBC8";
    fabric.Object.prototype.cornerSize = 6;

    setCanvas(c);

    return () => {
      c.dispose();
    };
  }, []);

  const addRect = (canvas?: fabric.Canvas) => {
    const rect = new fabric.Rect({
      height: 280,
      width: 200,
      stroke: "#2BEBC8",
    });
    canvas?.add(rect);
    canvas?.requestRenderAll();
  };

Note

c.dispose() is required to clean up the instantiated canvas element. See why you should clean up so that your rectangle can move and resize properly -> StackOverflow Question.

If you refuse to add the return () => {c.dispose();}; statement, you can disable the reactStrictMode in next.config.js. See the concept of reactStrictMode in this StackOverflow Question.

❤️ Leave a like if you like this post
❤️ It will be a massive motivation for me

Modern Recipe URL to 🍬 Sugar Level Estimation Web App From Scratch

ziqin — Sat, 10 Jun 2023 03:06:37 +0000

Overview

When users input the recipe url into the text prompt, the web app will extract the ingredients out of the recipe url using cheerio and forward to a deep learning model exported in onnx format and was trained using HuggingFace Trainer, lastly, sugar level will get returned.

The AI model is deployed at the edge, which means the AI model will get loaded at the client side using onnxruntime with wasm backend, no custom Python backend is required which drastically reduce the deployment costs.

Try it here: https://ingbetic.vercel.app/

Technology used

Frontend

Next.js - Full Stack React Framework
Typescript - Superset Form of JS
TailwindCSS - Utility CSS Class
Reactflow - Node-based Interactive Editor

Model

Python - Prog Lang
HuggingFace - Hub for Model & Dataset
ONNX - Quantization & Inference

See the open source code below

https://github.com/ziqinyeow/ingbetic

Beautiful NPM Icon packages for your next web project

ziqin — Fri, 09 Jul 2021 10:45:52 +0000

My Favourite

These are my favourite npm icon packages

Icon pack	How to install	Documentation
Lucide	`npm i lucide` or `npm i lucide-react` (React)	Website
Tabler	`npm i @tabler/core` or `npm i @tabler/icons-react` (React)	Website
Boxicons	`npm i boxicons`	Website
Remix Icon	`npm i remixicon`	Github
Radix Icon	`npm i @modulz/radix-icons`	Github

Icon pack	How to install	Documentation
CoreUI Icon	`npm i @coreui/icons@next`	Website
Teenyicons	`npm i teenyicons`	Github
Bootstrap Icon	`npm i bootstrap-icons`	Website
Feather Icon	`npm i feather-icons`	Github
Octicons	`npm i @primer/octicons`	Website
Ikonate	`npm i ikonate`	Github
CSS.gg Icon	`npm i css.gg`	Github
Phosphor Icon	`npm i phosphor-icons`	Github
React-icons (for React)	`npm i react-icons`	Github
Material-UI Icon (for React)	`npm i @material-ui/icons`	Website

Hope you are getting excited!😎

Further Research:
ShapeFonts
WWEB.dev

Thanks for reading, see you in the next post.

How to add custom font file to your React App?

ziqin — Wed, 07 Jul 2021 14:24:20 +0000

Before everything gets started, go ahead and run the following code in your terminal.

npx create-react-app [app-name]
cd [app-name]
code .

Step 1: Create a font folder in src

In this case, I will name it as fonts.

Step 2: Download a font family file from the Internet

In this case, I will download Airbnb Cereal App font from this website: Airbnb Cereal App Font.

Step 3: Extract the .zip folder

Copy the .ttf file or .woff file from the folder and paste it to your fonts folder in the React project.

Step 4: Create `@font-face` in your App.css/index.css

In this case, I will create @font-face in my App.css file. Open your App.css and write:
@font-face {
  font-family: "Light";   /*Can be any text*/
  src: local("AirbnbCerealLight"),
    url("./font/AirbnbCerealLight.ttf") format("truetype");
}
Continue to write for the other font files in the same format.

Notice that if your font file is .woff format, you should write the format if woff like this:
@font-face {
  font-family: "Medium";   /*Can be any text*/
  src: local("AirbnbCerealMedium"),
    url("./font/AirbnbCerealMedium.woff") format("woff");
}

Step 5: Import it into your project

In this case, I will import it to my App.js file, which can then access by all the components.

then you can use the font in your CSS code like this:

.css file
.container {
  font-family: "Light"; //"Medium"
}
styled-components
const Container = styled.div`
  font-family: "Light"; //"Medium"
`;

Thanks for reading; I hope you are getting excited and finding this helpful.

Further research:
CSS-Tricks-font-face
CSS-Tricks-best-font-loading-strategies

See you in the next post.

Forem: ziqin

Step by step on how to setup fabric.js in the next.js app

🧐 What is `fabric.js`

What we build in this blog

Install `fabric.js`

npm

yarn

pnpm

Setup for next.config.js

See also relevant references

Boilerplate for Next.js with Fabric.js

useEffect & addRect function

Note

Modern Recipe URL to 🍬 Sugar Level Estimation Web App From Scratch

Overview

Technology used

Frontend

Model

See the open source code below

Beautiful NPM Icon packages for your next web project

My Favourite

Recommended

How to add custom font file to your React App?

Step 1: Create a font folder in src

Step 2: Download a font family file from the Internet

Step 3: Extract the .zip folder

Step 4: Create `@font-face` in your App.css/index.css

Step 5: Import it into your project

Forem: ziqin

Step by step on how to setup fabric.js in the next.js app

🧐 What is fabric.js

What we build in this blog

Install fabric.js

npm

yarn

pnpm

Setup for next.config.js

See also relevant references

Boilerplate for Next.js with Fabric.js

useEffect & addRect function

Note

Modern Recipe URL to 🍬 Sugar Level Estimation Web App From Scratch

Overview

Technology used

Frontend

Model

See the open source code below

Beautiful NPM Icon packages for your next web project

My Favourite

Recommended

How to add custom font file to your React App?

Step 1: Create a font folder in src

Step 2: Download a font family file from the Internet

Step 3: Extract the .zip folder

Step 4: Create @font-face in your App.css/index.css

Step 5: Import it into your project

🧐 What is `fabric.js`

Install `fabric.js`

Step 4: Create `@font-face` in your App.css/index.css