Forem: Ko Htet

Using Quill Rich Text Editor in the HTML Form element

Ko Htet — Mon, 30 Sep 2024 04:59:56 +0000

Quill JS

Quill is a free, open-source WYSIWYG editor designed for the modern web.
Let's use Quill js in form element. You can check the final HTML code at the bottom of this post. (￣y▽,￣)╭

Create `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Add Bootstrap 5

It is ok if you don't use Bootstrap.
In <head> tag

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />

Add <script> at the bottom of the <body> tag

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

Let's put some layout and form in <body> tag

<div class="container">
        <div class="m-5">
        <h1 class="text-center">HELLO</h1>
      </div>
      <form action="https://httpbin.org/post" method="post">
        <div class="mb-3">
          <label for="title" class="form-label">Title</label>
          <input
            type="text"
            class="form-control"
            name="title"
            id="title"
            required
          />
        </div>
        <button type="submit" class="btn btn-primary">Add</button>
        <a href="./" class="btn btn-dark">Back</a>
      </form>
</div>

For the action, you can also use your own backend code like function.php. For now, I will use "https://httpbin.org/post".

Add Quill Rich Text Editor

Now, we will add Quill text editor.
https://quilljs.com/docs/quickstart
In <head> tag.

<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />

Add <script> at the bottom of the <body> tag

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script>
  const quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

In the <form> tag, add <div> for text editor.

<div class="mb-3">
          <label for="des" class="form-label">Content</label>
          <div id="editor" class="form-control" name="des"></div>
 </div>

Send Post method for Quill text editor.

  form.addEventListener("formdata", (event) => {
          event.formData.append("des", quill.root.innerHTML);
        });

Add this code in <script> tag. This append Quill content as html code before submitting.

Final index.html will look like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container">
      <div class="m-5">
        <h1 class="text-center">HELLO</h1>
      </div>
      <form action="https://httpbin.org/post" method="post">
        <div class="mb-3">
          <label for="title" class="form-label">Title</label>
          <input
            type="text"
            class="form-control"
            name="title"
            id="title"
            required
          />
        </div>
        <div class="mb-3">
          <label for="des" class="form-label">Content</label>
          <div id="editor" class="form-control" name="des"></div>
        </div>
        <button type="submit" class="btn btn-primary">Add</button>
        <a href="./" class="btn btn-dark">Back</a>
      </form>
 </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"
      ></script>
      <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
      <script>
        const quill = new Quill("#editor", {
          theme: "snow",
        });
        const form = document.querySelector("form");
        form.addEventListener("formdata", (event) => {
          event.formData.append("des", quill.root.innerHTML);
        });
      </script>
  </body>
</html>

Let's test the code

Output:

Here, you can see the text is submitted with HTML code.

Thank you for reading. (〜￣▽￣)〜

15 Re-usable UI Component Libraries with Framer Motion

Ko Htet — Fri, 20 Sep 2024 15:57:01 +0000

Hello, This is the list of react components with framer motion that I have been using. All of these components are easy to use just by copy and paste. These components save me a lot of time and headaches when developing projects with animations. They are also customizable as they become your code after copy and paste into the project.

1. Aceternity UI

Aceternity is the most popular library by far, it has a lot of animated ui components ready to be used.

2. Motion-primitives

Motion-primitives has decent animated ui components and update regularly.

3. Lukacho UI

Lukacho UI doesn't have many components like others but still, its components are pretty useful for quick development.

4. Hover.dev

Not all of Hover.dev components are free but its free components are enough to develop a beautiful animated website so you should check it out.

5. Magic UI

Magic UI has a lot of cool animated components. I often use its text animations and special effects components in my projects. Magic UI is a library you should check after Aceternity UI.

6. Eldora UI

Eldora Ui also has nice animated components and templates. Although, its "Cobe globe" lags a little when opening but others are fine, so no problem.

7. Ui-layout

Components in Ui-layout are creative and beautiful. It is an amazing ui component library you should check out if you are looking for another cool library like Aceternity UI and Magic UI.

8. Cult-ui

Cult-ui is a collection of reusable components with the best use of framer motion and tailwind CSS. Like other libraries, it has a ton of animated components.

9. Animata

Animata is also a reusable components collection of animations, effects, and interactions that you can use in your project with a simple copy and paste.

10. Nyxbui

A fusion of Shadcn and Magic Ui which is pretty cool if you are planning to use both in your project.

11. Edilozi

Edilozi has beautifully animated components and effects that you can copy and paste into your project.

12. Variant Vault

Variant Vault has cool text animations with framer motion.

13. CodeUi

CodeUi components library has eye-catching designs with animated components ready to be used.

14. Syntaxui

SyntaxUi has simple minimalistic animated components for free. There is also a paid version called Syntaxui Pro.

15. Cuicui

Cuicui has simple and straightforward components that you can easily use. You can easily understand how the components are made just by looking at the code.

(〜￣▽￣)〜

Creating a simple page router in PHP

Ko Htet — Wed, 18 Sep 2024 04:57:14 +0000

Create files

First, We will create index.php, router.php, and .htaccess files.

Redirect all requests to `index.php` in `.htaccess`

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L,QSA]

Prevent from direct access for router.php

This code will show a 404 response if the user enters the url for accessing router.php directly.

<?php
if (basename($_SERVER['PHP_SELF']) == basename(__FILE__)) {
    http_response_code(404);
    die();
}

Add Page class in router.php

class Page
{
  protected static bool $Return_404 = true;
}

Create a static boolean variable for returning the 404 page. We will set it to true as default.
Now we add a function for the 404 page.

protected static function Return_404(): void
    {
       (file_exists("./Pages/404.php")) ?  require_once "./Pages/404.php" : http_response_code(404);
    }

Here, I put a 404 page inside the Pages folder. You can put it in any folder you want.

We will also add the "File" function.

protected static function File(string $file): string
{
    if (!empty($file)) {
        (str_contains($file, "?")) ? $file = strtok($file, '?') : $file;
        ($file[strlen($file) - 1] === "/") ? $file = rtrim($file, "/") : $file;
    }
    return $file;
}

This function will check if the request url contains a query string or ending with "/" and remove it.
I use "strtok" string function to get the string values before "?". I know "strtok" isn't meant to be used like this but it works and saves me from doing complex algorithms unnecessarily. I use "rtrim" string function to remove the "/" if it is contained at the last of the string.

Add Routes class in router.php

class Routes
{
    public static array $Route = array(
        "" => "Pages/home.php",
        "/about" => "Pages/about.php",
    );
}

Here, I create a static array for storing routings.
This array contains "Requested url" => "File location".
I put all the page files in the Pages folder. You can put them anywhere you want.
Note that "" => "Pages/home.php", is for the home page.

Add Router class in router.php

The Router class will extend from the Page class that we already created above.

class Router extends Page
{

}

Now, we will write the function that checks whether the requested file exists in the Router class.

   public static function Run(): void
    {
        $requested_file = self::File($_SERVER["REQUEST_URI"]);
        foreach (Routes::$Route as $request => $file) {
            if ($requested_file === $request) {
                if (file_exists($file)) {
                    self::$Return_404 = false;
                    require $file;
                } else echo "Error";
            }
        }
        if (self::$Return_404) self::Return_404();
    }

This function checks the requested file is in the $Route array first. If it exists, the static boolean $Return_404 is set to false so that the 404 page will not show and get the page file. If not exist, this will return the 404 page.
If it exists but there is no file in the Pages folder, the function will echo "Error". You can show the 404 page instead of echo "Error" here.

The final router.php file will look like this.

<?php
if (basename($_SERVER['PHP_SELF']) == basename(__FILE__)) {
    http_response_code(404);
    die();
}

class Page
{
    protected static bool $Return_404 = true;
    protected static function Return_404(): void
    {
        (file_exists("./Pages/404.php")) ?  require_once "./Pages/404.php" : http_response_code(404);
    }
    protected static function File(string $file): string
    {
        if (!empty($file)) {
            (str_contains($file, "?")) ? $file = strtok($file, '?') : $file;
            ($file[strlen($file) - 1] === "/") ? $file = rtrim($file, "/") : $file;
        }
        return $file;
    }
}
class Router extends Page
{
    public static function Run(): void
    {
        $requested_file = self::File($_SERVER["REQUEST_URI"]);
        foreach (Routes::$Route as $request => $file) {
            if ($requested_file === $request) {
                if (file_exists($file)) {
                    self::$Return_404 = false;
                    require $file;
                } else echo "Error";
            }
        }
        if (self::$Return_404) self::Return_404();
    }
}
class Routes
{
    public static array $Route = array(
        "" => "Pages/home.php",
        "/about" => "Pages/about.php",
    );
}

Index.php

In the index.php, we will use the "Run" function from the Router class.

<!DOCTYPE html>
<html lang="en">
<?php
require_once "./router.php";
?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Router</title>
</head>

<body>
    <?php
    Router::Run();
    ?>
</body>

</html>

All the HTML code from the pages will be in the "body" tag.

Create pages

Finally, create home.php, about.php, and 404.php in the Pages folder.

home.php

<h1>Home page</h1>

about.php

<h1>about page</h1>

404.php

<h1>404 page</h1>

Check if the code working or not with "xampp" or "PHP server" extension.

If you encounter an error, feel free to tell me. XD

You can also check the github repository at:

Tokigin / page-router

Manual router from php-router repository

Using Aceternity UI in Astro

Ko Htet — Thu, 05 Sep 2024 06:29:04 +0000

I really like to use Aceternity Ui in Nextjs but sometime, I don't really need Nextjs to develop a project. About half of my new projects are done in Astro SSG. So, I thought, why not use Aceternity Ui in Astro.

Astro is an open-source web framework that allows developers to create fast and lightweight websites. My personally favorite is that Astro can support React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components, and more. It is Zero JS, by default and customizable.

For this, we will take advantage of using Astro with React and of course, TypeScript.

Installation

Firstly, we will create an Astro project using Bun. If you are not using Bun, don't worry. You can still use NPM instead of Bun.

We will start creating a project with Astro CLI.

1. Creating Astro Project



bun create astro@latest




dir   Where should we create your new project?
         ./project-name

tmpl   How would you like to start your new project?
         Empty

ts   Do you plan to write TypeScript?
         Yes

use   How strict should TypeScript be?
         Strict

deps   Install dependencies?
         Yes

git   Initialize a new git repository?
         No



cd project-name

2. Add React

If you are using npm, use npx instead of bunx.



bunx astro add react

Answer Yes to all the questions.

3. Add Tailwind



bunx astro add tailwind

Answer Yes to all the questions.

Add the following code to the tsconfig.json file to resolve paths:



{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Import the globals.css file in the @/pages/index.astro file:



---
import '@/styles/globals.css'
---

Update tailwind() in astro.config.mjs :



export default defineConfig({
  integrations: [
    //your code,
    tailwind({
      applyBaseStyles: false,
    }),
  ],
})

Update tailwind.config.mjs :



export default {
//your code,
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
}

4. Install Shardcn Ui

Aceternity Ui is based on Shardcn Ui. So we will need to install Shardcn in the project. Luckily, Shardcn provides installation for Astro.



bunx shadcn@latest init

There is still no error after running this command with bun but if you are using npm, there may be an error like this. (#issue)

To fix this error, you have to create a folder named "npm" in "AppData\Roaming".
There are two ways to create the folder.

Open PowerShell and enter New-Item -Path "$env:APPDATA\npm" -ItemType Directory.
Open Run command window, enter %appdata% and create a folder named "npm".

After that, you can continue the process below.



√ Would you like to use TypeScript (recommended)? ... yes
√ Which style would you like to use? » Default
√ Which color would you like to use as base color? » Slate
√ Where is your global CSS file? ... ./src/styles/globals.css
√ Would you like to use CSS variables for colors? ... no
√ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
√ Where is your tailwind.config.js located? ... tailwind.config.mjs
√ Configure the import alias for components: ... @/components
√ Configure the import alias for utils: ... @/lib/utils
√ Are you using React Server Components? ... no
√ Write configuration to components.json. Proceed? ... yes

5. Install Framer Motion

Finally, install Framer Motion.



bun i framer-motion clsx tailwind-merge

6. Add Aceternity Ui component

After installing Framer Motion, we can basically use Aceternity component in our project but there are a few adjustments that need to done.

Now we will add 3d-card from Aceternity.



bunx aceternity-ui@latest add 3d-card

In 3d-card.tsx , remove "use client"; as it is from Nextjs. We are using Astro so we don't need Nextjs Syntax.

Remove import Image from "next/image"; and use normal <img> tag.

Replace it with import { Image } from 'astro:assets';.

7. Using Aceternity Ui component

After adding the component, we can now use the Aceternity component.
I will skip writing the code from scratch so I will copy and paste from the example.

Create threedcarddemo.tsx in "@/components/".

Copy and Paste the code from https://ui.aceternity.com/components/3d-card-effect example.

Remove these lines because we don't need them in Astro :



"use client";
import Image from "next/image";
import React from "react";

Import component in the @/pages/index.astro file:



---
import { ThreeDCardDemo } from "@/components/threedcarddemo";
---

You can use client:idle or client:load as you like.



<ThreeDCardDemo client:idle />

I hope you encounter no error during the process.
Thank you for reading. :D

You can check my github repository at:

Tokigin / astro-aceternity

Using Aceternity ui in Astro project

Astro + Aceternity

Reference

https://docs.astro.build/en/install-and-setup

https://www.framer.com/motion/introduction

https://ui.shadcn.com/docs/installation/astro

https://ui.aceternity.com/docs/add-utilities

Installation

I use Bun here but you can use npm or npx.

1. Creating Astro Project

bun create astro@latest


dir   Where should we create your new project?
         ./project-name

tmpl   How would you like to start your new project?
         Empty

ts   Do you plan to write TypeScript?
         Yes

use   How strict should TypeScript be?
         Strict

deps   Install dependencies?
         Yes

git   Initialize a new git repository?
         No

cd project-name

2. Add React

bunx astro add react

Answer Yes to all the questions.

3. Add Tailwind

bunx astro add tailwind

Answer Yes to all the questions.

Add the following code to the tsconfig.json file…

View on GitHub

References

https://docs.astro.build/en/install-and-setup

https://www.framer.com/motion/introduction

https://ui.shadcn.com/docs/installation/astro

https://ui.aceternity.com/docs/add-utilities

Forem: Ko Htet

Using Quill Rich Text Editor in the HTML Form element

Quill JS

Create index.html

Add Bootstrap 5

Add Quill Rich Text Editor

Send Post method for Quill text editor.

Final index.html will look like this.

Let's test the code

15 Re-usable UI Component Libraries with Framer Motion

1. Aceternity UI

2. Motion-primitives

3. Lukacho UI

4. Hover.dev

5. Magic UI

6. Eldora UI

7. Ui-layout

8. Cult-ui

9. Animata

10. Nyxbui

11. Edilozi

12. Variant Vault

13. CodeUi

14. Syntaxui

15. Cuicui

Creating a simple page router in PHP

Create files

Redirect all requests to index.php in .htaccess

Prevent from direct access for router.php

Add Page class in router.php

Add Routes class in router.php

Add Router class in router.php

The final router.php file will look like this.

Index.php

Create pages

Tokigin / page-router

Manual router from php-router repository

Using Aceternity UI in Astro

Installation

1. Creating Astro Project

2. Add React

3. Add Tailwind

4. Install Shardcn Ui

5. Install Framer Motion

6. Add Aceternity Ui component

7. Using Aceternity Ui component

Tokigin / astro-aceternity

Using Aceternity ui in Astro project

Astro + Aceternity

Reference

Installation

1. Creating Astro Project

2. Add React

3. Add Tailwind

References

Create `index.html`

Redirect all requests to `index.php` in `.htaccess`