Home Blog

Latest Tech Tips About Android Phone.

palanivel.nhai
-
0

There are a number of exciting developments happening in the world of Android phones, and here are a few of the latest tech updates:

  1. 5G connectivity: One of the biggest trends in Android phones right now is the adoption of 5G connectivity. This technology promises to bring faster download and upload speeds, lower latency, and better coverage compared to 4G networks.
  2. Foldable screens: Samsung’s Galaxy Fold, Galaxy Z Flip, and Huawei’s Mate X2 are all examples of foldable Android phones that are gaining popularity. These devices have screens that can fold in half, allowing them to be more compact when not in use, and providing a larger display when opened up.
  3. Improved camera technology: Android phone manufacturers are investing heavily in camera technology, with many devices now featuring multiple lenses, improved low-light performance, and advanced software features for taking better photos and videos.
  4. Better battery life: Battery life is always a concern for smartphone users, but recent advancements in battery technology are promising longer-lasting batteries. For example, Samsung’s Galaxy S21 Ultra features a 5,000mAh battery, while the OnePlus 9 Pro has a 4,500mAh battery.
  5. Enhanced security features: Android phones are becoming more secure with features like facial recognition, fingerprint scanners, and improved encryption. Google has also made it easier to manage security and privacy settings with the launch of its Privacy Dashboard.
  6. Artificial intelligence: AI is being integrated into Android phones in a variety of ways, including voice assistants like Google Assistant, which can now understand multiple languages and dialects. AI is also being used to improve battery life, optimize performance, and enhance camera functionality.

Overall, Android phones are continuing to evolve and improve with new technology, and there are sure to be even more exciting developments in the near future.

Hello world!

palanivel.nhai
-
1

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

[Tips] [Tailwind CSS] How to add Local font to Tailwind CSS and NextJS

Make Money Advisor
-
0
[Tips] [Tailwind CSS] How to add Local font to Tailwind CSS and NextJS

 ✋✋✋Hello everyone, welcome back to Learn Tech Tips Blogspot. I am Zidane (大家好， 我是雞蛋🥚🥚) 

How to add Local font to Tailwind CSS and NextJS

This topic is for NextJS developer, who is working with NextJS and want to fast build UI without write CSS, this topic is for you. On this topic I will use Tailwind css (Slogan: Rapid build modern website without ever leaving your HTML – The slogan is so impressive that I was fascinated and curious when I first met, The Tailwind is very cool and very useful for frontend developer now. Thanks Tailwind) and NextJS for build one page recent search, you will see Tailwind very helpful in build UI. As my idea, Tailwind maybe will become a new trends on the future for web development, because of its convenience and support fast build, I really love it now.

Let’s Follow me on

👉 Tiktok

👉 Facebook:

Ok. Let’s go though the topic, This topic I will share with you how to add local (download) font in NextJS and Tailwind CSS

Part One: How to add Local font to Tailwind CSS and NextJS

Example: I wanna add Gilroy font in NextJS and Tailwind CSS, 

Step 1: go to fonts page and download it: https://www.cufonfonts.com/font/gilroy-bold#google_vignette

Step 2: This step is very IMPORTANT. Many people got stuck on this step, If you don’t do this step you cannot use download local font. It actually take me much time to do it. I don’t want you waste time, so I will share this on here. 

Please be note: BEFORE use font (with TTF) remmember convert it to woff2, this ONLY format can use it on NEXTJS and TAILWIND CSS at this point. 

so please go to this website for convert it first. https://www.onlinewebfonts.com/tools

How to add Local font to Tailwind CSS and NextJS

Step 3: copy woff2 font file into public/fonts

How to add local font to Tailwind CSS and NextJS

Step 4: go to styles/globals.css and put below code here

@tailwind base;

@tailwind components;
@tailwind utilities;

@layer base {
@font-face {
font-family: ‘Gilroy’;
font-style: normal;
font-weight: 300;
src: url(‘/fonts/Gilroy-Light.woff2’) format(‘woff2’);
}

@font-face {
font-family: ‘Gilroy’;
font-style: bold;
font-weight: 700;
src: url(‘/fonts/Gilroy-Bold.woff2’) format(‘woff2’);
}
}

Step 5: On tailwind.config.js

/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [
‘./pages/**/*.{js,ts,jsx,tsx}’,
‘./components/**/*.{js,ts,jsx,tsx}’,
‘./app/**/*.{js,ts,jsx,tsx}’,
],
theme: {
extend: {
screens: {
‘xs’: ‘375px’,
‘3xl’: ‘1900px’
},
fontFamily: {
gilroy: [‘Gilroy’],
},
},
},
plugins: []
}

Step 6: How to use it?

Congratulation, on this step you just simple to put className = “font-gilroy” with any element you want to active font Gilroy

Bouns: if you wanna use Bold, you can add className with: font-bold (font-weight: 700), normally will default use font-weight: 300

<div className=“flex “>
<div className=“font-gilroy “>Member</div>
<div className=“text-white font-gilroy font-bold”>Booster </div>
</div>

If you want to add goolge font use Tailwind CSS and NextJS, you can reference on this page

https://learn-tech-tips.blogspot.com/2022/11/how-to-add-google-font-.html

Thanks for reading How to add local font to Tailwind CSS and NextJS. I hope this helps. Feel free to ask back any questions and let us know how it goes, I will keep working with you until it’s resolved.
✋✋✋✋ Learn Tech Tips – I am Zidane, See you next time

[Tips] [Tailwind CSS] Fast build sale category items with Tailwind CSS and NextJS

Make Money Advisor
-
0
[Tips] [Tailwind CSS] Fast build sale category items with Tailwind CSS and NextJS

 ✋✋✋Hello everyone, welcome back to Learn Tech Tips Blogspot. I am Zidane (大家好， 我是雞蛋🥚🥚) 

Fast Build Sale Category Items with Tailwind CSS and NextJS

This topic is for NextJS developer, who is working with NextJS and want to fast build UI without write CSS, this topic is for you. On this topic I will use Tailwind css (Slogan: Rapid build modern website without ever leaving your HTML – The slogan is so impressive that I was fascinated and curious when I first met, The Tailwind is very cool and very useful for frontend developer now. Thanks Tailwind) and NextJS for build one page recent search, you will see Tailwind very helpful in build UI. As my idea, Tailwind maybe will become a new trends on the future for web development, because of its convenience and support fast build, I really love it now.

 

Fast build sale category items with Tailwind CSS and NextJS

Let’s Follow me on

👉 Tiktok

👉 Facebook:

Ok. Let’s go though the topic, Let check the UI below and please imagine if you want to build it with normal CSS , how much time you will complete, but with Tailwind you just need around 20-30 minutes for not professional. Its true, hehe, let check it out from my video

@learntechtips Easy build sale category item component with Tailwind #tailwind #tailwindcss #ui #frontend #learntechtipszidane ♬ Motivation For Success – TimTaj

 

 

 

 Or you can reference on source code here

import Image from “next/image”;
import Head from “next/head”;
import WomanLongSleeved from “/public/images/woman-long-sleeved.jpg”;

export default function sale() {
return (
<>
<div>
<Head>
<title> Woman long sleeved </title>
<link rel=“icon” href=“/favicon.ico” />
</Head>
</div>

<div className=“flex font-sans p-4 bg-white shadow-lg m-8 rounded-lg max-w-lg”>
<div className=“flex-none w-48 relative”>
<div className=“absolute inset-0 w-full h-full object-cover”>
<Image
src={WomanLongSleeved}
alt =“long sleeved”
layout=“fill”
objectFit=‘contain’
/>
</div>
</div>
<form className=“flex-auto p-6”>
<div className=“flex flex-wrap”>
<h1 className=“flex-auto text-lg font-semibold text-slate-900”>
Woman long-sleeved
</h1>
<div className=“text-lg font-semibold text-rose-500”>$110.00</div>
<div className=“w-full flex-none text-sm font-medium text-slate-700 mt-2”>
In stock
</div>
</div>
<div className=“mt-4 mb-6 pb-6 border-b border-slate-200”>
<div className=“space-x-2 flex text-sm”>
<label>
<input
className=“sr-only peer”
name=“size”
type=“radio”
value=“xs”
checked
/>
<div className=“w-9 h-9 rounded-lg flex items-center justify-center 
text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 
peer-checked:text-white”>
XS
</div>
</label>
<label>
<input
className=“sr-only peer”
name=“size”
type=“radio”
value=“s”
/>
<div className=“w-9 h-9 rounded-lg flex items-center justify-center 
text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 
peer-checked:text-white”>
S
</div>
</label>
<label>
<input
className=“sr-only peer”
name=“size”
type=“radio”
value=“m”
/>
<div className=“w-9 h-9 rounded-lg flex items-center justify-center 
text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 
peer-checked:text-white”>
M
</div>
</label>
<label>
<input
className=“sr-only peer”
name=“size”
type=“radio”
value=“l”
/>
<div className=“w-9 h-9 rounded-lg flex items-center justify-center 
text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 
peer-checked:text-white”>
L
</div>
</label>
<label>
<input
className=“sr-only peer”
name=“size”
type=“radio”
value=“xl”
/>
<div className=“w-9 h-9 rounded-lg flex items-center justify-center 
text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 
peer-checked:text-white”>
XL
</div>
</label>
</div>
</div>
<div className=“flex space-x-4 mb-6 text-sm font-medium”>
<div className=“flex-auto flex space-x-4”>
<button
className=“h-10 px-6 font-semibold rounded-md bg-black text-white”
type=“submit”
>
Buy now
</button>
<button
className=“h-10 px-6 font-semibold rounded-md border border-slate-200 
text-slate-900 w-full”
type=“button”
>
Add to bag
</button>
</div>
<button
className=“flex-none flex items-center justify-center w-9 h-9 rounded-md 
text-slate-300 border border-slate-200″
type=“button”
aria-label=“Like”
>
<svg
width=“20”
height=“20”
fill=“currentColor”
aria-hidden=“true”
>
<path
fill-rule=“evenodd”
clip-rule=“evenodd”
d=“M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 
115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z”
/>
</svg>
</button>
</div>
<p className=“text-sm text-slate-700”>
Free shipping on all continental US orders.
</p>
</form>
</div>
</>
);
}

Or you can view on live demo here:

https://nextjs-cms-tailwind-zidane168.vercel.app/admin/member/ui/sale


 

Thanks for reading fast build sale category items with Tailwind CSS and NextJS topic. I hope this helps. Feel free to ask back any questions and let us know how it goes, I will keep working with you until it’s resolved.
✋✋✋✋ Learn Tech Tips – I am Zidane, See you next time

 

 

[Tips] [Tailwind CSS] How to add Google font to Tailwind CSS and NextJS

Make Money Advisor
-
0
[Tips] [Tailwind CSS] How to add Google font to Tailwind CSS and NextJS

 ✋✋✋Hello everyone, welcome back to Learn Tech Tips Blogspot. I am Zidane (大家好， 我是雞蛋🥚🥚) 

How to add Google font to Tailwind CSS and NextJS

This topic is for NextJS developer, who is working with NextJS and want to fast build UI without write CSS, this topic is for you. On this topic I will use Tailwind css (Slogan: Rapid build modern website without ever leaving your HTML – The slogan is so impressive that I was fascinated and curious when I first met, The Tailwind is very cool and very useful for frontend developer now. Thanks Tailwind) and NextJS for build one page recent search, you will see Tailwind very helpful in build UI. As my idea, Tailwind maybe will become a new trends on the future for web development, because of its convenience and support fast build, I really love it now.

Let’s Follow me on

👉 Tiktok

👉 Facebook:

Ok. Let’s go though the topic, This topic I will share with you how to add custom google font in NextJS and Tailwind CSS

Part One: How to add Google font to Tailwind CSS and NextJS

Example: I wanna add Poppins font in NextJS and Tailwind CSS, 

Step 1: go to google fonts: https://fonts.google.com/specimen/Poppins

How to add Google font to Tailwind CSS and NextJS

Step 2: click import; choose the code
go to styles/globals.css and put into it.

@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap’);

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 3: go inside tailwind.config.js and put your font here, Here is Poppins

/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [
‘./pages/**/*.{js,ts,jsx,tsx}’,
‘./components/**/*.{js,ts,jsx,tsx}’,
‘./app/**/*.{js,ts,jsx,tsx}’,
],
theme: {
extend: {
screens: {
‘xs’: ‘375px’,
‘3xl’: ‘1900px’
},
fontFamily: {
Poppins: [‘Poppins’],
},
},
},
plugins: []
}

Step 4: how to used it? 

just go to styles/style.css and add below code

html {
font-family: Poppins;
font-weight: 300;
}

Don’t forgot import “../styles/style.css” into your projects on pages/_app.tsx

import ‘../styles/globals.css’
import type { AppProps } from ‘next/app’
import “../styles/style.css”;
function MyApp({ Component, pageProps }: AppProps) {
return <Component {…pageProps} />
}

export default MyApp

 

Thanks for reading How to add google font to Tailwind CSS and NextJS. I hope this helps. Feel free to ask back any questions and let us know how it goes, I will keep working with you until it’s resolved.
✋✋✋✋ Learn Tech Tips – I am Zidane, See you next time

 

[Tips] How to make a div background-image responsive

Make Money Advisor
-
0
[Tips] How to make a div background-image responsive

Happy new year everyone

Welcome to Learn Tech Tips Blogspot, I am Zidane (nick name: 鸡蛋) I Wishes you have a wonderful new year and succeed in your life

If you a front end developer. I think sometime you will do a responsive with a background image. So today I will support you how to easy do it.

 

How to make a div background-image responsive

 

How to make a div background-image responsive

I have summary a solution on this video link, you can go check it out. 

First of it, please be follow me if you like my topic. Thanks so much

Let’s Follow me on

👉 Tiktok

👉 Facebook:

On backhground image: you MUST remember 3 attributes: aspect-ratio, width and background-size:

– with aspect-radio: you should make width/height for sure the image with full resolution with desing

– with width of background image: you should let a value is 100vw / 100% same as my video

– width: background-size: you MUST choose: ‘contain’ for sure image display on view size

just three above attributes you can make a div background image responsive already.

 

Is it Easy everyone, I think you all can do it after read this topic. 

I will post all my source code here for you easy reference

@learntechtips happy new year. How to make a div background image responsive #responsive #cssstandard #learntechtips #learntechtipszidane #happynewyear ♬ Merry Christmas and Happy New Year – Lia Syila

HTML

<!DOCTYPE html>
<html lang=“zho”>

<head>
    <meta charset=“UTF-8”>
    <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
 

    <link rel=“stylesheet” href=“public/css/responsive.css?v=1.2”>
</head>

<body class=“content”>  

    <div class=“main-title”>
        <div>Welcome to Learn Tech Tips – Zidane</div>
        <div> <a href=“https://learn-tech-tips.blogspot.com”> 
https://learn-tech-tips.blogspot.com </a> </div>
    </div>
    <div class=“title”>
        Guideline:
    </div>
    <div class=“title”>
        How to make a div background-image responsive
    </div>
    <div class=“description”>
        <ul>
            <li> Set background-size: contain  </li>
            <li> Set aspect-ratio: width/height  </li>
            <li> Set width: 100vw </li>
        </ul>
    </div>
    <div class=“diamond”>        
       
    </div>    
</body>

</html>

CSS:     

@media screen and (min-width: 0px) and (max-width: 320px) {
    body {
        font-size: 4px;
    }
}

 
@media screen and (min-width: 321px) and (max-width: 639px) {
    body {
        font-size: 5px;
    }
}

@media screen and (min-width: 640px) and (max-width: 1200px) {
    body {
        font-size: 6px;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1900px) {
    .body {
        font-size: 10px;
    }
}
 

.content {
    padding: 20px;
    border: 2px solid orange;
    box-shadow: 3px 3px orange;
    background-color: white;
    margin: 50px;
}

.main-title {
    font-size: 5em;
    color: yellow;
    background-color: black;
    border-radius: 20px;
    padding: 20px;
    font-weight: 900;
    text-align: center;
}

.title {
    margin-top: 20px;
    font-size: 3em;
    color: red;
    font-weight: 900;
}

a {
    color: white;
}

.description {    
    font-size: 3em;
}

ul li {
    line-height: 2em;
}
 

.highlight {
    text-transform: uppercase;
    background-color: yellow;
    padding: 20px;

}
.diamond {
    background-image: url(‘../../public/image/mobile/Mobile_OJ05.png’);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    aspect-ratio: 881/501;
    margin-top:  30px;
}

If you have any question or feedback about topic: make a div background image responsive. leave your comment, we can discuss about it

 

Thanks for reading How to make a div background-image responsive. I hope this helps. Feel free to ask back any questions and let us know how it goes, I will keep working with you until it’s resolved.
✋✋✋✋ Learn Tech Tips – I am Zidane, See you next time

[Tips] Zustand Simple, modern state management for React

Make Money Advisor
-
0
[Tips] Zustand Simple, modern state management for React

Hello everyone, welcome to Learn Tech Tips Zidane 

If you working with React, you will see we will work with state, and if you have many state, you should use state management for React for you can easy control it by yourself. This topic today I will share with you 

The simple modern state management for React, That is Zustand

Zustand simple modern state management for React. Actually, the title is had share with your more information. On this topic I don’t focus compare another manage state tool, I just focus on Zustand, About compare state. I will show more information on another topic

On This topic I will share with you detail source code, guideline for how to manage state with Zustand

Let’s Follow me on

👉 Tiktok

👉 Facebook:

Before go to management state. Here is some information about Zustand

Zustand is a fast and scalable state management solution built by the developers of Jotai and React springs. Zustand is known for its simplicity, using hooks to manage states without boilerplate code.

There are several popular React State Management options available, but the following are some justifications for choosing Zustand:

1. Zustand makes use of simple-to-use and easily implementable code.

2. Zustand renders components only on changes to the value of the state. Changes in the state can often be handled without having to re-render a component.

3. Less boilerplate code

4, Uses hooks to consume states. Hooks are popular in React and, as such, a welcome state management method.

5. State management is centralized and updated via simple defined actions. It is similar to  Redux in this regard, but unlike Redux, where the developer has to create reducers, actions, and dispatch to handle state, Zustand makes it far easier.

6. Provides clean code by eliminating the need to use Context Provides, thus resulting in shorter and more readable code.

7. Zustand provides a middleware to view state values from browser using Redux dev tool extension.

8.  Zustand makes storing asynchronous data in the very easy

Simple, modern state management for React

Zustand Package need install


       npm install zustand / yarn install zustand

Create store in Zustand


const useStore = create(set => ({
    number: 0,  /* type: number*/
    fruits: [],  /* type: array */
})) 

Debug state with Redux dev tool extension

const store = (set, get) => ({

        number: 0,

        addNumber: (item: IState)  => {

               set(state => ({

                           todos: [...state.todos, item]

               }))

       }

})
const useStore = create(devtools(store))

Now you can view of the state using devtool

Zustand Simple, modern state management for React

Working with asynchronous data very easy


  const url = "https://api.github.com/search/users?q=zidane&per_page=10";
  const useStore = create((set) => ({
    url: url,
    Results: {},
    fetch: async (url) => {
      const response = await fetch(url)
      const json = await response.json();
      set({ Results: json.items })
    },
  }))

When create store with Zustand, you just simple create one store.js file. 

Example a todos state management a state for set, get todos tasks everyday, addTodo function, function markCompleteTodo function, remove Todo function

first take a look my current package for make sure version and package name need to install

package.json

{
  “private”: true,
  “scripts”: {
    “dev”: “next dev”,
    “build”: “next build”,
    “start”: “next start”
  },
  “dependencies”: {
    “moment”: “^2.29.4”,
    “next”: “latest”,
    “react”: “18.2.0”,
    “react-dom”: “18.2.0”,
    “zustand”: “^4.3.1”
  },
  “devDependencies”: {
    “@types/node”: “18.11.3”,
    “@types/react”: “18.0.21”,
    “@types/react-dom”: “18.0.6”,
    “autoprefixer”: “^10.4.12”,
    “postcss”: “^8.4.18”,
    “tailwindcss”: “^3.2.4”,
    “typescript”: “4.9.4”
  }
}

store/todo/index.js

import { create } from ‘zustand’
import { devtools } from ‘zustand/middleware’
import { IItem } from ‘./../../utils/interface’
import { STATUS } from ‘./../../utils/contants’
import moment from ‘moment’;

interface ITodoState {
    id: string;
    job: string;
    type: string;
    remark: string;
    dueDate: Date;
    status: STATUS.DOING;
    created: Date;
}

interface IListTodoState {
    todos: Array<ITodoState>;
    types: Array<IItem>;
    addTodo: () => void;
    markCompleteTodo: (id: number) => void;
    removeTodo: (id: number) => void;
}
 
const store = (set, get) => ({
    todos: [],
    types: [
        {‘name’: ‘Home’, ‘value’: ‘Home’},
        {‘name’: ‘Research’, ‘value’: ‘Research’},
    ],

    addTodo: (item: ITodoState) => {
       
        item.status = STATUS.DOING
        item.created = moment().format(‘YYYY-MM-DD’)
        set(state => ({
            todos: […state.todos, item]
        }))        
    },

    markCompleteTodo: (index: number) => {

        let items = get().todos;

        let temp = { …items[index] };

        if (temp.status === STATUS.COMPLETED) {
            temp.status = STATUS.DOING
        } else {
            temp.status = STATUS.COMPLETED
        }
       
        items[index] = temp;

        set(state => ({
            todos: items
        }))
    },

    removeTodo: (id: string) => {
        let items = get().todos

        items = items.filter( (item, _) => {
            return item.id != id
        })

        set(state => ({
            todos: items
        }))
    }
})
const useStore = create<IListTodoState>(devtools(store))

export default useStore

page/todos/index.ts

import { useEffect, useRef } from “react”;

import useTodoStore from “./../../store/todos”;

import TDHeader from “./../../components/TDHeader”;
import TDFooter from “./../../components/TDFooter”;
import TDTitle from “./../../components/TDTitle”;
import TDCombobox from “./../../components/TDCombobox”;
import {
  TDEditIcon,
  TDRemoveIcon,
  TDMarkCompleteIcon,
  TDMarkUncompleteIcon,
} from “./../../components/TDIcon”;

import moment from “moment”;

import { STATUS } from “./../../utils/contants”;

export default function Add() {
  const { todos, types, addTodo, removeTodo, markCompleteTodo } =
    useTodoStore();
  const today = moment().format(“YYYY-MM-DD”);

  const id = useRef();
  const job = useRef();
  const dueDate = useRef();
  const remark = useRef();
  useEffect(() => {
    let modal = document.getElementById(“addModal”);
    modal.style.display = “none”;
  }, [])    // call 1 time

  const closeAddForm = () => {
    let modal = document.getElementById(“addModal”);    
    modal.style.display = “none”;  
  };

  const openAddForm = () => {
    let modal = document.getElementById(“addModal”);
    modal.style.display = “block”;
  };

  const add = () => {
    let item = {
      id: id.current.value,
      job: job.current.value,
      type: document.getElementById(“Type”).value,
      dueDate: dueDate.current.value,
      remark: remark.current.value,
    };
    addTodo(item);
  };

  const markCompleteFunc = (index: number) => {
    markCompleteTodo(index);
  };

  return (
    <>
      <TDHeader />
      <TDTitle>List Task items</TDTitle>
      <div className=“mt-[10px] container mx-auto”>
       
        <div className=“flex justify-end”>
            <button id=“myBtn “ onClick={() => openAddForm()}>
                Add New Task
            </button>
        </div>
        <div className=“w-full”>
          {todos.length > 0 && (
            <table className=“table”>
              <thead>
                <tr>
                  <th> No </th>
                  <th> Job </th>
                  <th> Type </th>
                  <th> Remark </th>
                  <th> Create Date </th>
                  <th> Due Date </th>
                  <th> Overdue </th>
                  <th> Status </th>
                  <th> Action </th>
                </tr>
              </thead>
              <tbody>
                {todos.map((item, index) => {
                  let dueDate = moment(item.dueDate, “YYYY-MM-DD”);
                  let distance = moment.duration(dueDate.diff(today)).asDays();
                  let highlightOverDue = “”;

                  if (distance === 0) {
                    if (item.status === STATUS.DOING) {
                      item.status = STATUS.OVERDUE;
                      highlightOverDue = “text-rose-700”;
                    }
                  }

                  let todoStyle = “uncomplete”;
                  let buttonCompleteStyle = “info”;
                  let statusStyle = “doing”;
                  if (item.status === STATUS.COMPLETED) {
                    todoStyle = “complete”;
                    statusStyle = “done”;
                    buttonCompleteStyle = “success”;
                  }

                  let typeStyle = “home”;
                  if (item.type === “Research”) {
                    typeStyle = “research”;
                  }

                  return (
                    <tr key={index} className={todoStyle}>
                      <td> {item.id} </td>
                      <td> {item.job} </td>
                      <td>
                        {” “}
                        <span className={typeStyle}> </span> {item.type}{” “}
                      </td>
                      <td> {item.remark} </td>
                      <td> {item.created} </td>
                      <td> {item.dueDate} </td>
                      <td>
                        {” “}
                        <span className={highlightOverDue}>
                          {” “}
                          {distance}{” “}
                        </span>{” “}
                        days!{” “}
                      </td>
                      <td className={statusStyle}> {item.status} </td>
                      <td>
                        <div className=“flex space-x-2”>
                          <button className=“warning “>
                            <TDEditIcon bgColor=“#FFF” width=“20” />
                          </button>

                          <button
                            className=“danger”
                            onClick={() => removeTodo(item.id)}
                          >
                            <TDRemoveIcon bgColor=“#FFF” width=“20” />
                          </button>

                          <button
                            className={buttonCompleteStyle}
                            onClick={() => markCompleteFunc(index)}
                          >
                            {item.status === STATUS.COMPLETED ? (
                              <TDMarkUncompleteIcon bgColor=“#FFF” width=“20” />
                            ) : (
                              <TDMarkCompleteIcon bgColor=“#FFF” width=“20” />
                            )}
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}

          {
          todos.length <= 0 &&
            <div className=‘text-rose-500 text-xl text-center h-[calc(100%-100px)]’> Congratulation, You had completed all task today!</div>
          }
        </div>
        <div id=“addModal” className=“modal”>
            <div className=“modal-content” id=“modal-content”>
              <div className=“modal-header”>
                  <h2>Add Items</h2>
                  <span className=“close” onClick={() => closeAddForm()}>
                  &times;
                  </span>
              </div>
              <div className=“modal-body”>
                  <div className=“bg-sky-300 shadow-lg p-4 container w-[500px] mx-auto rounded-md”>
                  <div>
                      <label>
                      {” “}
                      <span className=“required-star”> * </span> ID:{” “}
                      </label>
                      <input
                      ref={id}
                      required
                      type=“text”
                      name=“id”
                      placeholder=“1”
                      />
                  </div>

                  <div>
                      <label>
                      {” “}
                      <span className=“required-star”> * </span> Job Name:{” “}
                      </label>
                      <input
                      ref={job}
                      required
                      type=“text”
                      name=“job”
                      placeholder=“Learn NextJS in 3 weeks”
                      />
                  </div>
                  <div className=“mt-4”>
                      <TDCombobox
                      is_required={true}
                      label=“Type”
                      placeHolder=“Please Select”
                      items={types}
                      />
                  </div>
                  <div className=“mt-4”>
                      <label>
                      {” “}
                      <span className=“required-star”> * </span> Due Date:{” “}
                      </label>
                      <input
                      ref={dueDate}
                      min={today}
                      required
                      type=“date”
                      name=“dueDate”
                      />
                  </div>
                  <div className=“mt-4”>
                      <label> Remark: </label>
                      <input
                      ref={remark}
                      type=“text”
                      name=“text”
                      placeholder=“Please focus, Try your best, go ahead”
                      />
                  </div>

                  <div className=“mt-4 text-right”>
                      <button onClick={add}> Add Todos Items </button>
                  </div>
                  </div>
              </div>
            </div>
        </div>

      </div>
      <TDFooter />
    </>
  );
}

ultis/constants.ts

export const ROUTES = {
    HOME: “/”,
    TODO_LIST: “/todos/”,
    TODO_ADD: “/todos/add”,  
};

export const TYPE = {
  RESEARCH: 1,
  HOME: 2
}

export const STATUS = {
  DOING: ‘DOING’,
  COMPLETED: ‘COMPLETED’,
  OVERDUE: ‘OVERDUE’,    
}

ultis/interface.ts

export interface IItem {
    name: string;
    value: string;
}

Above step will help you easy use zustand state for manage todolist app. On next topic I will share with you how to build it

You can reference my source code on github.

https://github.com/zidane168/nextjs-zustand-todo

or on my tiktok channel

@learntechtips Zustand simple modern state management for REACT #zustand #learnontiktok #learntechtips #learntechtipszidane ♬ 喜气洋洋迎新年-巧克力盒子 – 巧克力盒子
Thanks for reading. Any feedback and questions abouve Zustand simple modern state management for React. Leave your comment on below post, we can discuss about it.
✋✋✋✋ Learn Tech Tips – I am Zidane, See you next time

[DevOps] How to create a Docker Compose file for MSSQL Database Service

Make Money Advisor
-
0
[DevOps] How to create a Docker Compose file for MSSQL Database Service

Hello everyone, welcome back to Learn Tech Tips Blogspot. I am Zidane (大家好， 我是雞蛋🥚🥚)

Nice to meet you back. Today I will show you how to create Microsoft SQL Database Docker Compose file for you can easy deploy MSSQL on MACOS / LINUX OS, even on the WINDOW environement if you don’t wanna setup MSSQL in your PC, laptop

As you know when you working with Docker, you should know what is Docker? 

If you are new in docker  you can check below information. 

👇

“Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. The service has both free and premium tiers. The software that hosts the containers is called Docker Engine. It was first started in 2013 and is developed by Docker, Inc”

If you already know docker, you can go through this topic right now.  

Before enter the topic, I want to share with you my tiktok account and my fan page.

👉 Tiktok

👉 Facebook:

Ok. Let’s back to topic

How to create a Docker Compose file for MSSQL Database Service

How to create a Docker Compose file for MSSQL Database Service

Docker container is a unit of software that packages up code and all its dependencies to allow the application to tun quickly and reliably from one computing environment to another. For laynching multiple docker containers, a YAML file is used by compose to initialize services for the app. Creating and lauching all of the functions is as simple as issuing a single command when configutation is complete

Ok. Let’s create a Docker compose file or Redis service. Just below some row you will get a redis service easily.

version: ‘2’
services:
  mssqldb:
    image: “mcr.microsoft.com/mssql/server:2017-latest”
    container_name: mssqlserver
    restart: always
    hostname: mssqldb
    environment:
      SA_PASSWORD: Password123   #password /opt/mssql-tools/bin/sqlcmd -S localhost -U SA -P ‘Password123’
      ACCEPT_EULA: Y
    ports:
      – “1433:1433”                                         # port
    volumes:
      – “./rdmbs/mssql/data:/var/opt/mssql/data” # db
      – “./rdmbs/mssql/backup:/var/opt/mssql/backup”      # backup

start your docker file then type the command
docker-compose up –build -d
 
you will see this result 
 
How to create a Docker Compose file for MSSQL Database Service - Learn Tech Tips - Zidane
On docker container UI you will see 

How to create a Docker Compose file for MSSQL Database Service
Congratulation, You succeed created Docker Compose for MSSQL Database Service
 
Thanks for reading. Any feedback and questions for Create a Docker compose file for MSSQL database service. Leave your comment on below post, we can discuss about it.

✋✋✋✋ Learn Tech Tips – I am Zidane, See you next time

[Tips] [Tailwind CSS] Fast build recent search with Tailwind CSS and NextJS

Make Money Advisor
-
0
[Tips] [Tailwind CSS] Fast build recent search with Tailwind CSS and NextJS

✋✋✋Hello everyone, welcome back to Learn Tech Tips Blogspot. I am Zidane (大家好， 我是雞蛋🥚🥚) 

Fast Build Recent Search with Tailwind CSS and NextJS

This topic is for NextJS developer, who is working with NextJS and want to fast build UI without write CSS, this topic is for you. On this topic I will use Tailwind css (Slogan: Rapid build modern website without ever leaving your HTML – The slogan is so impressive that I was fascinated and curious when I first met, The Tailwind is very cool and very useful for frontend developer now. Thanks Tailwind) and NextJS for build one page recent search, you will see Tailwind very helpful in build UI. As my idea, Tailwind maybe will become a new trends on the future for web development, because of its convenience and support fast build, I really love it now.

Let’s Follow me on

👉 Tiktok

👉 Facebook:

Ok. Let’s go though the topic, Let check the UI below and please imagine if you want to build it with normal CSS , how much time you will complete, but with Tailwind you just need around 20-30 minutes for not professional. Its true, hehe, let check it out from my video

Recent Search with TailwindCSS and NextJS

And here is my time to coding use for Tailwind css

@learntechtips Fast build UI recent search with Tailwind CSS#learntechtips #learntechtipszidane #tailwindcss #tailwind @Learn Tech Tips in 60s ♬ nhạc nền – 𝑱𝒖𝒔𝒕 𝑭𝒐𝒓 𝑳𝒖𝒗

 

 

 

 

👉Share full source code from here

import { useState } from ‘react’
import  Image from ‘next/image’

import Search from “/public/images/search.svg”;
import Folder from “/public/images/folder.svg”;
import AddNewFile from “/public/images/add-new-file.svg”;
import AddNewFolder from “/public/images/add-new-folder.svg”;
import HashTag from “/public/images/hashtag.svg”;
import Label from “/public/images/label.svg”;

export default function MembersUI() {
       
    return (
        <>
            <div className=“mt-2 p-6 rounded bg-orange-500 text-white max-w-sm”>
                Welcome to Zidane – Learn Tech Tips Channel
            </div>

            <div className=“bg-white-100 mt-2 ml-2 p-2 max-w-md border rounded-t-lg”>
                <div id=‘search’ className=“flex items-center “>
                    <div className=“w-8”>
                        <Image src={ Search } width=“20px” height=“20px” />
                    </div>
                    <input type=“text” className=‘w-full border-none 
active:border-none focus:border-none’ placeholder=“Search Projects …” />
                </div>
            </div>
 
            <div className=“bg-white-100 border-t-0 ml-2 p-1 max-w-md border Recent 
Searches border-b-2″>
                <div className=“px-2”>
                    Recent Searches
                </div>
                <ul className=“mb-2”>
                    <li className=‘ml-2 mt-2 flex space-x-2 align-top 
hover:bg-indigo-600 hover:rounded-lg p-1 hover:text-white’>
                        <div>
                            <Image src={ Folder } width=“20px” height=“20px” />
                        </div>
                        <div>
                            Tailwind Labs / Website Redesign
                        </div>
                    </li>

                    <li className=‘ml-2 mt-2 flex space-x-2 align-top 
hover:bg-indigo-600 hover:rounded-lg p-1 hover:text-white’>
                        <div>
                            <Image src={ Folder } width=“20px” height=“20px” />
                        </div>
                        <div>
                            Laravel LLC / Conference Branding
                        </div>
                    </li>  
                </ul>
            </div>

            <div className=“bg-white-100 border-t-0 ml-2 p-1 max-w-md border 
rounded-b-lg Recent Searches border-b-2″>
                <ul>
                    <li className=‘ml-2 mt-2 flex space-x-2 align-top 
hover:bg-indigo-600 hover:rounded-lg p-1 hover:text-white’>
                        <div>
                            <Image src={ AddNewFile } width=“20px” height=“20px” />
                        </div>
                        <div>
                            Add new file …
                        </div>
                    </li>

                    <li className=‘ml-2 mt-2 flex space-x-2 align-top 
hover:bg-indigo-600 hover:rounded-lg p-1 hover:text-white’>
                        <div>
                            <Image src={ AddNewFolder } width=“20px” height=“20px” />
                        </div>
                        <div>
                            Add new Folder …
                        </div>
                    </li>

                    <li className=‘ml-2 mt-2 flex space-x-2 align-top 
hover:bg-indigo-600 hover:rounded-lg p-1 hover:text-white’>
                        <div>
                            <Image src={ HashTag } width=“20px” height=“20px” />
                        </div>
                        <div>
                            Add hashtag …
                        </div>
                    </li>
                    <li className=‘ml-2 mt-2 flex space-x-2 align-top 
hover:bg-indigo-600 hover:rounded-lg p-1 hover:text-white’>
                        <div>
                            <Image src={ Label } width=“20px” height=“20px” />
                        </div>
                        <div>
                            Add label …
                        </div>
                    </li>
                </ul>
            </div>

        </>
    );
}
 

search.svg (or you can find on IconFinder)

<?xml version=“1.0” ?><!DOCTYPE svg  PUBLIC ‘-//W3C//DTD SVG 1.1//EN’  
‘http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd’><svg height=“512px” id=“Layer_1” 
 style=“enable-background:new 0 0 512 512;” version=“1.1” viewBox=“0 0 512 512” 
 width=“512px” xml:space=“preserve” xmlns=“http://www.w3.org/2000/svg”  
xmlns:xlink=“http://www.w3.org/1999/xlink”>
<path d=“M448.3,424.7L335,311.3c20.8-26,33.3-59.1,33.3-95.1c0-84.1-68.1-152.2-152-152.2
c-84,0-152,68.2-152,152.2  s68.1,152.2,152,152.2c36.2,0,69.4-12.7,95.5-33.8L425,448L448
.3,424.7z M120.1,312.6c-25.7-25.7-39.8-59.9-39.8-96.3  s14.2-70.6,39.8-96.3S180,80,216
.3,80c36.3,0,70.5,14.2,96.2,39.9s39.8,59.9,39.8,96.3s-14.2,70.6-39.8,96.3  c-25.7,25.7
-59.9,39.9-96.2,39.9C180,352.5,145.8,338.3,120.1,312.6z”/></svg>

folder.svg (or you can find on IconFinder)

<?xml version=“1.0” ?><!DOCTYPE svg  PUBLIC ‘-//W3C//DTD SVG 1.1//EN’  
‘http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd’><svg height=“512px” id=“Layer_1”  
style=“enable-background:new 0 0 512 512;” version=“1.1” viewBox=“0 0 512 512”  
width=“512px” xml:space=“preserve” xmlns=“http://www.w3.org/2000/svg” 
 xmlns:xlink=“http://www.w3.org/1999/xlink”><path d=“M390.5,144c0,0-154.7,0-167,0c-4.7
,0-10.7-9.9-18.5-19c-7.1-8.3-14.7-13-20.5-13c-7.5,0-60.3,0-60.3,0  c-15.5,0-28.2,8.9-28
.2,24.3v234.6c0,15.5,12.7,29.1,28.2,29.1h266.3c15.5,0,25.5-13.6,25.5-29.1V168.8C416,153
.3,406,144,390.5,144  z M124.2,128H168c0,0,7.4,0,11.3,0c3.9,0,8.6,1.6,14.3,8.3c12.1,14.
3,15.5,23.7,29.9,23.7h167c6.6,0,9.5,2.2,9.5,8.8V192H112v-55.7  C112,127.3,122.3,128,124
.2,128z M390.5,384H124.2c-6.5,0-12.2-6.2-12.2-13.1V208h288v162.9C400,376.9,397.4,384,
390.5,384z”/></svg>

add-new-file.svg (or you can find on IconFinder)

<?xml version=“1.0” ?>
<svg data-name=“Layer 1” id=“Layer_1” viewBox=“0 0 32 32” 
 xmlns=“http://www.w3.org/2000/svg”><title/>
<path d=“M23.93,2H8.07a2.8,2.8,0,0,0-2.8,2.8V27.2A2.8,2.8,0,0,0,8.07,30H23.93a2.8,2.8,0
,0,0,2.8-2.8V4.8A2.8,2.8,0,0,0,23.93,2Zm.94,25.2a.94.94,0,0,1-.94.93H8.07a.94.94,0,0,1-
.94-.93V4.8a.94.94,0,0,1,.94-.93H23.93a.94.94,0,0,1,.94.93Z”/><path d=“M21.44,15.07H16.
93V10.56a.93.93,0,1,0-1.86,0v4.51H10.56a.93.93,0,1,0,0,1.86h4.51v4.51a.93.93,0,1,0,1.86
,0V16.93h4.51a.93.93,0,1,0,0-1.86Z”/></svg>

add-new-folder.svg (or you can find on IconFinder)

<?xml version=“1.0” ?>
<svg data-name=“Layer 1” id=“Layer_1” viewBox=“0 0 32 32”  
xmlns=“http://www.w3.org/2000/svg”><title/><path d=“M25,6.61H22.26V4.47A2.48,2.48,0,0,0
,19.79,2H6.72A2.48,2.48,0,0,0,4.25,4.47V22.92a2.48,2.48,0,0,0,2.47,2.47h3V27.2a2.81,2.8
1,0,0,0,2.8,2.8H25a2.81,2.81,0,0,0,2.8-2.8V9.41A2.81,2.81,0,0,0,25,6.61ZM6.72,23.52a.6
.6,0,0,1-.6-.6V4.47a.6.6,0,0,1,.6-.6H19.79a.61.61,0,0,1,.6.6V6.61H12.54a2.81,2.81,0,0,0
-2.8,2.8V23.52ZM25.88,27.2a.93.93,0,0,1-.93.93H12.54a.93.93,0,0,1-.93-.93V9.41a.93.93,
0,0,1,.93-.93H25a.93.93,0,0,1,.93.93Z”/><path d=“M24.19,17.37H19.68V12.86a.94.94,0,0,0
-1.87,0v4.51H13.3a.94.94,0,0,0,0,1.87h4.51v4.51a.94.94,0,0,0,1.87,0V19.24h4.51a.94.94,
0,0,0,0-1.87Z”/></svg>

hashtag.svg (or you can find on IconFinder)

<?xml version=“1.0” ?>
<svg viewBox=“0 0 448 512” xmlns=“http://www.w3.org/2000/svg”>
<path d=“M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623
-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175
 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.
813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818
 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377
.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40
.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178
 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813
-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12
 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z”/></svg>

label.svg (or you can find on IconFinder)

<?xml version=“1.0” ?>
<!DOCTYPE svg  PUBLIC ‘-//W3C//DTD SVG 1.1//EN’  
‘http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd’>
<svg enable-background=“new 0 0 48 48” height=“48px” id=“Layer_1” version=“1.1” 
 viewBox=“0 0 48 48” width=“48px” xml:space=“preserve” 
 xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink”>
<path clip-rule=“evenodd” d=“M44.602,23.775L21.806,46.571c-0.032,0.048-0.053,0.102-0.
095,0.144  c-0.197,0.196-0.457,0.287-0.715,0.281c-0.258,0.006-0.518-0.085-0.715-0.281
c-0.042-0.042-0.062-0.096-0.095-0.144L3.425,29.81  c-0.048-0.032-0.101-0.053-0.144-0.
095C3.084,29.518,2.995,29.258,3,29c-0.006-0.258,0.084-0.518,0.281-0.715  c0.043-0.042
,0.096-0.062,0.144-0.095L26.221,5.395C26.404,5.16,26.676,5,26.996,5h0.021c0.002,0,0.
004,0,0.006,0h4.029  c0.133-1.502,0.746-2.82,1.67-3.683l0.016,0.018C32.934,1.128,33.
201,1,33.496,1c0.592,0,1.072,0.512,1.072,1.143  c0,0.375-0.18,0.691-0.441,0.899C33.
648,3.484,33.307,4.181,33.193,5h4.775c0.002,0,0.004,0,0.008,0h0.02  c0.32,0,0.594,
0.16,0.775,0.395l5.83,5.83c0.234,0.183,0.395,0.456,0.395,0.776v0.021c0,0.002,0,
0.004,0,0.006v10.945  c0,0.002,0,0.004,0,0.007V23C44.996,23.32,44.836,23.593,44.602,
23.775z M34.254,16.666C34.061,16.872,33.793,17,33.496,17  c-0.592,0-1.07-0.512-1.07-
1.143c0-0.375,0.18-0.691,0.441-0.9c0.248-0.229,0.451-0.537,0.617-0.883  c-0.855,0.228-
1.488,1-1.488,1.925c0,1.104,0.896,2,2,2c1.105,0,2-0.896,2-2c0-0.473-0.17-0.901-0.445-
1.244  C34.936,16.302,34.254,16.666,34.254,16.666z M42.996,12.381L37.615,7h-4.213c0
.174,0.444,0.424,0.822,0.725,1.1l0,0  c0.041,0.033,0.092,0.053,0.127,0.092l0.018-
0.018c1.041,0.973,1.725,2.508,1.725,4.254c0,0.042-0.01,0.079-0.012,0.12  c1.197,
0.691,2.012,1.97,2.012,3.452c0,2.209-1.791,4-4,4s-4-1.791-4-4c0-2.147,1.695-3.885,
3.82-3.982  c-0.09-0.888-0.441-1.648-0.949-2.118c-0.041-0.033-0.092-0.053-0.129-
0.092l-0.016,0.018C31.979,9.131,31.43,8.141,31.17,7h-3.793  l-22,22l15.619,
15.619l22-22V12.381z M14.282,27.285c0.382-0.381,1-0.381,1.381,0l7.049,7.049c0.381,
0.381,0.381,0.999,0,1.381  c-0.381,0.381-1,0.381-1.381,0l-7.049-7.049C13.901,
28.285,13.901,27.667,14.282,27.285z M18.282,23.285  c0.382-0.381,1-0.381,1.381,
0l7.048,7.049c0.381,0.381,0.381,0.999,0,1.381c-0.381,0.381-1,0.381-1.381,0l-
7.048-7.049  C17.901,24.285,17.901,23.667,18.282,23.285z” fill-rule=“evenodd”/></svg>

👌Thanks for you reading my topic, Love you all, If you have any question or feedback about Tailwind and fast build UI or Fast build recent search with Tailwind css and nextjs, just leave me your comment on below post, I will support you. Forgot one best things, On the next topic I will share with you the advanced of Tailwind css for you can easy pickup / do some customize css on Tailwind without write any css. Ok, now let’s save this article I think you will NEED it on the furture soon, I am Zidane. ✊

If you want to add goolge font use Tailwind CSS and NextJS, you can reference on this page

https://learn-tech-tips.blogspot.com/2022/11/how-to-add-google-font-.html
 l

Thanks for reading. I hope this helps. Feel free to ask back any questions and let us know how it goes, I will keep working with you until it’s resolved.
✋✋✋✋ Learn Tech Tips – I am Zidane, See you next time

 

 

 

[Solved] Object literal may only specify known properties, and ‘cli’ does not exist in type TypeOrmModuleOptions

Make Money Advisor
-
0
[Solved] Object literal may only specify known properties, and ‘cli’ does not exist in type TypeOrmModuleOptions

✋✋✋Hello everyone, welcome back to Learn Tech Tips Blogspot. I am Zidane (大家好， 我是雞蛋🥚🥚) 

Object literal may only specify known properties, and ‘cli’ does not exist in type TypeOrmModuleOptions

This topic is focus on NestJS developer, who is working with NestJS and TypeORM and special update TypeORM to version 0.3.x 

package.json

Object literal may only specify known properties, and 'cli' does not exist in type TypeOrmModuleOptions

Because of many people got stuck on TypeORM after update to version 0.3.x (this update from May 2022) and until now so less resource talking about this issue, I had found many solution and finally I have a solution for migration now, so i want to share with you how to solved successfully in below way. Save this articles and share to NestJS use TypeORM 0.3.x developer for they can easy do it too.

If you use typeorm 0.3.x, typeorm-cli needs migration path as a command option now, don’t support cli on TypeOrmModuleOptions anymore.

Let’s Follow me on

👉 Tiktok

👉 Facebook:

Ok. Let’s back to topic

So you can do this on command like that

Typeorm: 0.2.x

export const connectionSource = new DataSource({
migrationsTableName: ‘migrations’,
type: ‘postgres’,
host: ‘localhost’,
port: 55432,
username: ‘postgres’,
password: ‘123456’,
database: ‘todolist’,
entities: [‘src/**/entity/*.entity.ts’],
cli: {
migrationDirs: [‘src/migrations/*.ts’],
}
extra: {
charset: ‘utf8mb4_unicode_ci’,
},
synchronize: false,
logging: true,
migrations: [‘src/migrations/*.ts’],
subscribers: [‘src/subscriber/**/*{.ts,.js}’],
});

Typeorm: 0.3.x (should remove cli) ./configORM.ts

export const connectionSource = new DataSource({
migrationsTableName: ‘migrations’,
type: ‘postgres’,
host: ‘localhost’,
port: 55432,
username: ‘postgres’,
password: ‘123456’,
database: ‘todolist’,
entities: [‘src/**/entity/*.entity.ts’],
extra: {
charset: ‘utf8mb4_unicode_ci’,
},
synchronize: false,
logging: true,
migrations: [‘src/migrations/*.ts’],
subscribers: [‘src/subscriber/**/*{.ts,.js}’],
});

package.json – Typeorm: 0.3.x 

“typeorm”: “typeorm-ts-node-commonjs -d ./configORM.ts”,

So when use command (Typeorm 0.3.x), you should add the path like below command

npm run typeorm migration:generate src/migrations/Init

I explain a little more:


entities: [‘src/**/entity/*.entity.ts’],

This entities will map with current structure: 

src/users/entity/users.entity.ts

src/roles/entity/roles.entity.ts

src/permissions/entity/permissions.entity.ts

Object literal may only specify known properties, and 'cli' does not exist in type TypeOrmModuleOptions

migrations: [‘src/migrations/*.ts’],

And this migrations folder on location src/migrations/*.ts 

Object literal may only specify known properties, and 'cli' does not exist in type TypeOrmModuleOptions

Please be carefully on the location, if you cannot run migration (No migrations are pending) by command: npm run typeorm generation:run, that maybe your location for migrations folder is not correct.

Another noted is your path on each entiry must be a relative path, normally when you import  when use below link: /src/users/entity/users.entity. But this unluckily will catch an error when you run migration, for sure on run migration succeed. You must change your path to relative like below screenshot.

the correct is:./../../users/entity/users.entity

Object literal may only specify known properties, and 'cli' does not exist in type TypeOrmModuleOptions - Learn Tech Tips
Add command into package.json
“scripts”: {
…
“typeorm”: “typeorm-ts-node-commonjs -d ./configORM.ts”,
“migration:generate”: “npm run typeorm migration:generate”,
“migration:run”: “npm run typeorm migration:run”,
“migration:revert”: “npm run typeorm migration:revert”
},
configORM.ts must put on root folder so the below folder can point to folder correctly
entities: [‘src/**/entity/*.entity.ts’],
migrations: [‘src/migrations/*.ts’],
subscribers: [‘src/subscriber/**/*{.ts,.js}’],

👌Ok, That’s all message I want to share with you, this issue had taken me a few hours, I don’t want to you waste time like me, so I had shared all around issue for typeorm 0.3.x nestjs now for your reference, save this articles I think you will use it on the furture soon, I am Zidane. ✊


 

Thanks for reading. I hope this helps. Feel free to ask back any questions and let us know how it goes, I will keep working with you until it’s resolved.
✋✋✋✋ Learn Tech Tips – I am Zidane, See you next time

123...16Page 1 of 16
© Newspaper WordPress Theme by TagDiv