<p><strong>// Newbie</strong></p><p>#PostController.php</p><pre><code class="language-php">class PostController extends Controller
{
    ...
    public function index()
    {
    	if(auth()-&gt;user()-&gt;role == 'superadmin'){
    		$posts = Post::all();
    	}else{
    		$posts = Post::where('author_id', auth()-&gt;id())
    	}
    	
        return view('posts.index', [
        'posts' =&gt; $posts
        ]);
    }
    ...
}</code></pre><p>&nbsp;</p><p><strong>// Experienced</strong></p><p>#User.php</p><pre><code class="language-php">class User extends Authenticatable
{
	...
	public const ROLE_SUPERADMIN = 'superadmin';
	...
}</code></pre><p>#PostController.php</p><pre><code class="language-php">class PostController extends Controller
{
    ...
    public function index()
    {
    	if(auth()-&gt;user()-&gt;role == User::ROLE_SUPERADMIN){
    		$posts = Post::all();
    	}else{
    		$posts = Post::where('author_id', auth()-&gt;id())
    	}
    	
        return view('posts.index', [
        'posts' =&gt; $posts
        ]);
    }
    ...
}</code></pre><p>We replaced <code>superadmin</code> with <code>User::ROLE_SUPERADMIN</code> and set its value in User Model</p><p>You can use model const in blade view as well</p><p>#index.blade.php</p><pre><code class="language-php">@if (auth()-&gt;user()-&gt;role == \App\Models\User::ROLE_SUPERADMIN)
	I am superadmin! 😎
@else
	I am normal user! 🤠
@endif</code></pre><p>&nbsp;</p>

Laravel Model Const

<h2>Prerequisites</h2><ul><li>LightSail server up and running.</li><li>Project on GitHub (in this tutorial I’m using the Next js application).</li><li>Server SSH private key (the key you create while creating a new instance).</li></ul><h2>Step 1 - Create GitHub Action secrets</h2><p>We need 3 Action secrets <code>AWS_USERNAME</code> <code>AWS_HOSTNAME</code> <code>AWS_PRIVATE_KEY</code></p><ul><li>Navigate to the main page of the repository.</li><li>Click on Setting Tab (top right area).</li><li>Select Action under “Secrets”</li><li>Click on the “New repository secret” button (top right area)</li><li>Set Name to “<code>AWS_PRIVATE_KEY</code>".</li><li>Paste the content of the server SSH private key remove <code>----BEGIN RSA PRIVATE KEY---—</code> and <code>----END RSA PRIVATE KEY---—</code></li><li>Click on “Add secret”</li><li>follow the above point to add further “action secrets”</li><li>Set <code>AWS_USERNAME</code> value to your Linux users (most commonly centos, apache2) you can use <code>whoami</code> command to get your current user name.</li><li>Set <code>AWS_HOSTNAME</code> value to your server IP address.</li></ul><blockquote><p>Note : You can also add any ENV variable as Action secrets by following same guide above.</p></blockquote><h2>Step 2 - Setup Workflows</h2><p>This is the part where all magic happens</p><ul><li>Create folders in your project repository <code>my-cool-app/.github/workflows</code></li><li>Set up your workflow by creating two <code>.yml</code> files. For the sake of simplicity, we named it <code>build.yml</code> and <code>deploy.yml</code>.&nbsp;</li></ul><p><i><u>#build.yml</u></i></p><pre><code class="language-yml">name: build

on:
    push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build
      env:
        NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
</code></pre><p>Add env variable under <code>env:</code> if any.</p><p><i><u>#deploy.yml</u></i></p><pre><code class="language-yml">name: deploy

on:
  push:
    branches:
      - main
  workflow_dispatch:  

jobs:
  deploy:
  	needs: [build]  # require build to pass before deploy runs
    name: Deploy
    runs-on: ubuntu-latest
    environment: production

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: SSH to Host
      env:
        AWS_PRIVATE_KEY: ${{ secrets.AWS_PRIVATE_KEY  }}
        AWS_HOSTNAME: ${{ secrets.AWS_HOSTNAME }}
        AWS_USERNAME : ${{ secrets.AWS_USERNAME  }}

      run: |
          echo "$AWS_PRIVATE_KEY" &gt; private_key &amp;&amp; chmod 600 private_key
          ssh -o StrictHostKeyChecking=no -i private_key ${AWS_USERNAME}@${AWS_HOSTNAME} '

            # 📌 Start your instance/server related tasks form here.
            # 1
            cat whereami.txt
            # 2
            bash ~/scripts/my-app-deploy.sh
          '
</code></pre><p>#1</p><p>Tip: Create <code>whereami.txt</code> file on your server to test out the connection.</p><p>#2</p><p>You can run your <code>.sh</code> file stored on your LightSail server, the script will contain all the required commands to build and start your application.</p><p><i><u>#my-app-deploy.sh</u></i></p><pre><code class="language-bash">pm2 stop my-app

git pull

npm install

npm run build

pm2 start my-app

echo "my-app-deploy script executed"
</code></pre><h3><strong>WTH is pm2?</strong></h3><p>it is a production process manager for Node.js applications with a built-in load balancer.</p><p>For More info Check out our guide <a href="https://devsolo.in/posts/how-to-deploy-next-js-application-on-linux-server"><strong>How To Deploy Next js application on linux server</strong></a></p>

AWS LightSail CI / CD

<blockquote><p>There is no Number 1 🥇, Make your Own research and try to find the perfect system for your next project</p></blockquote><h3>1: Firebase Authentication</h3><p>You can use Firebase Authentication to allow users to sign in to your app using one or more sign-in methods, including email address and password sign-in, and federated identity providers such as Google Sign-in and Facebook Login.</p><p><a href="https://firebase.google.com/docs/auth/web/start">source</a></p><h3>2: Auth0</h3><p>Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications.</p><p><a href="https://auth0.com/docs/get-started/auth0-overview">source</a></p><h3>3: SuperTokens</h3><p>it is an Open-Source auth provider Add <strong>secure login and session management</strong> to your apps. <a href="https://supertokens.com/docs/community/sdks">SDKs available</a> for popular languages and front-end frameworks e.g. Node.js, Go, Python, React.js, React Native, Vanilla JS, etc.</p><p><a href="https://github.com/supertokens/supertokens-core">source</a></p><h3>4: NextAuth.js</h3><p>NextAuth.js is a complete open-source authentication solution for <a href="http://nextjs.org/">Next.js</a> applications.</p><p><a href="https://github.com/nextauthjs/next-auth">source</a></p><h3>5: Breeze &amp; Next.js&nbsp;</h3><p>Laravel Breeze can also scaffold an authentication API that is ready to authenticate modern JavaScript applications.</p><p><a href="https://laravel.com/docs/9.x/starter-kits#breeze-and-next">source</a></p>

Next js Authentication

<h3>Step 1 - Generate favicons</h3><p>You can use “https://www.favicon-generator.org” to generate different sizes of favicon.</p><h3>Step 2 - Create SEO component</h3><pre><code class="language-javascript">import React from "react";
    import Head from "next/head";
    export default function Seo({
    
      title = "your site title",
      description = "your site description",
      url = "https://example.com",
      image = "/images/favicons/android-icon-192x192.png",
      keywords = "tag1, tag2, tag3",
    }) {
      return (
        &lt;Head&gt;
          {/* Global Title */}
          &lt;title&gt;
            {title ?? process.env.NEXT_PUBLIC_APP_NAME ?? "Next js App"}
          &lt;/title&gt;
          {/* URL's */}
          &lt;link rel="canonical" href={url} /&gt;
          {/* &lt;!-- Primary Meta Tags --&gt; */}
          &lt;meta charSet="UTF-8"&gt;&lt;/meta&gt;
          &lt;meta name="title" content={title} /&gt;
          &lt;meta name="description" content={description} /&gt;
          &lt;meta name="keywords" content={keywords}&gt;&lt;/meta&gt;
          {/* &lt;!-- Open Graph / Facebook --&gt; */}
          &lt;meta property="og:type" content="website" /&gt;
          &lt;meta property="og:url" content={url} /&gt;
          &lt;meta property="og:title" content={title} /&gt;
          &lt;meta property="og:description" content={description} /&gt;
          &lt;meta property="og:image" content={image} /&gt;
          {/* &lt;!-- Twitter --&gt; */}
          &lt;meta property="twitter:card" content="summary_large_image" /&gt;
          &lt;meta property="twitter:url" content={url} /&gt;
          &lt;meta property="twitter:title" content={title} /&gt;
          &lt;meta property="twitter:description" content={description} /&gt;
          &lt;meta property="twitter:image" content={image} /&gt;
          {/*  Favicons  */}
          &lt;link
            rel="apple-touch-icon"
            sizes="57x57"
            href="/images/favicons/apple-icon-57x57.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="60x60"
            href="/images/favicons/apple-icon-60x60.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="72x72"
            href="/images/favicons/apple-icon-72x72.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="76x76"
            href="/images/favicons/apple-icon-76x76.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="114x114"
            href="/images/favicons/apple-icon-114x114.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="120x120"
            href="/images/favicons/apple-icon-120x120.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="144x144"
            href="/images/favicons/apple-icon-144x144.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="152x152"
            href="/images/favicons/apple-icon-152x152.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/images/favicons/apple-icon-180x180.png"
          /&gt;
          &lt;link
            rel="icon"
            type="image/png"
            sizes="192x192"
            href="/images/favicons/android-icon-192x192.png"
          /&gt;
          &lt;link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="/images/favicons/favicon-32x32.png"
          /&gt;
          &lt;link
            rel="icon"
            type="image/png"
            sizes="96x96"
            href="/images/favicons/favicon-96x96.png"
          /&gt;
          &lt;link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="/images/favicons/favicon-16x16.png"
          /&gt;
          &lt;link rel="manifest" href="/images/favicons/manifest.json" /&gt;
          &lt;meta name="msapplication-TileColor" content="#ffffff" /&gt;
          &lt;meta
            name="msapplication-TileImage"
            content="/images/favicons/ms-icon-144x144.png"
          /&gt;
          &lt;meta name="theme-color" content="#ffffff"&gt;&lt;/meta&gt;
        &lt;/Head&gt;
      );
    }</code></pre><h3>Step 1 - Usage</h3><p><code>pages/index.jsx</code></p><pre><code class="language-javascript">return (
	...
		{/* SEO Component*/}
		&lt;Seo /&gt;
		{/* /SEO Component*/}
	...
)</code></pre><p><code>pages/posts/index.jsx</code></p><pre><code class="language-javascript">return (
	...
		{/* SEO Component*/}
		&lt;Seo title={"MySite | Posts"} url={'https://example.com/posts'} /&gt;
		{/* /SEO Component*/}
	...
)</code></pre><p><code>pages/posts/[slug].jsx</code></p><pre><code class="language-javascript">return (
	...
		{/* SEO Component*/}
		&lt;Seo
        	title={post.title}
        	description={post.excerpt}
        	url={'https://example.com/posts/'+post.slug}
      	/&gt;
		{/* /SEO Component*/}
	...
)</code></pre><p>&nbsp;</p>

Next js SEO component

<h3>🔔 You can use any <u>Node JS</u> application to follow along with this tutorial.&nbsp;</h3><h3><strong>Prerequisite :&nbsp;</strong></h3><ul><li>Linux Server, &nbsp;I'm using AWS Lightsail Linux (centos 8) server</li><li>Next js application in Github repo.</li><li>Node &amp; Apache pre-install and setup</li></ul><p style="margin-left:0px;">I'm assuming you've previously met all of the prerequisites.</p><h3><strong>Step 1 - Clone your repo in your domain root directory</strong></h3><p>NOTE: You can configure your domain and its root directory how you want.</p><pre><code class="language-bash">$ git clone my-next-app:username/my-next-app.git</code></pre><p>💡 <a href="https://devsolo.in/posts/how-to-clone-github-private-repo-to-any-linux-server">Check our guide on how to clone GitHub repo in a few steps</a></p><h3><strong>Step 2 - Install PM2</strong></h3><p>if you are wondering what is PM2, it is a production process manager for Node.js applications with a built-in load balancer.</p><p>for more information, you can check out their site <a href="https://pm2.keymetrics.io/">here</a>.</p><pre><code class="language-bash">$ sudo npm install -g pm2</code></pre><p>“-g” to install pm2 globally&nbsp;</p><h3><strong>Step 3 - Build and Start your Next js Application</strong></h3><p>cd into your project directory e.g “/my-next-app”</p><p>Run Build Command</p><pre><code class="language-bash">$ npm run build</code></pre><pre><code class="language-bash">$ pm2 start npm --name "my-next-app" -- start</code></pre><h3><strong>Step 4 - Open Port &amp; Setup</strong></h3><pre><code class="language-bash">$ firewall-cmd --zone=public --add-port=3000/tcp --permanent</code></pre><pre><code class="language-bash">$ firewall-cmd --reload</code></pre><pre><code class="language-bash">$ /usr/sbin/setsebool httpd_can_network_connect true
//OR
$ /usr/sbin/setsebool httpd_can_network_connect 1</code></pre><p>To make the changes persist. Use “-P”</p><pre><code class="language-bash">$ /usr/sbin/setsebool -P httpd_can_network_connect 1</code></pre><p>Now Restart your Apache server</p><pre><code class="language-bash">$ service httpd restart</code></pre><h3><strong>Step 5 - Make a few changes to “your-domain.conf” file</strong></h3><p><strong>Port 80 :</strong></p><pre><code class="language-plaintext">&lt;VirtualHost *:80&gt;
    ...
    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full

    &lt;Proxy *&gt;
        Require all granted
    &lt;/Proxy&gt;

    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/
    ...
&lt;/VirtualHost&gt;</code></pre><p><strong>Port 443 :</strong></p><pre><code class="language-plaintext">&lt;VirtualHost *:443&gt;
    ...
    ProxyPreserveHost on
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/
    LogLevel warn
   ...
&lt;/VirtualHost&gt;</code></pre><p>Restart your Apache server</p><pre><code class="language-bash">$ service httpd restart</code></pre><p>YAY ! 🥳 Visit your site access your Next js application</p><h3><strong>⚙ Troubleshooting</strong></h3><p>If you get an error, make sure you follow each step exactly. Moreover, if you continue to encounter problems, consider the solutions listed below.&nbsp;</p><p>Site Throwing 503</p><ul><li>Make sure there is no error occurred on build and run time</li><li>Check if the application is running</li></ul><pre><code class="language-bash">$ pm2 show my-next-app

//OR

$ pm2 monit</code></pre><ul><li>The port on which your application is running is open and accessible, in my case it was 3000 (checkout <strong>Step 4</strong>)</li><li>Run the following command to check open and running ports</li></ul><pre><code class="language-bash">$ netstat -tulpn | grep LISTEN</code></pre><ul><li>Restart your instance manually, Go to your server management panel and restart your server and re-run <strong>Step 3</strong> and<strong> Step 4</strong></li></ul><p>&nbsp;</p><p>In the end, if the given solution doesn't work for you then like a PRO Google 😎 it.</p>

How To Deploy Next js application on linux server

<h3>Step 1 - ZIP your project and upload it to the outside domain root directory</h3><blockquote><p>Domain root directory e.g. <code>public_html</code></p></blockquote><p>Upload and Extract your project in <code>/home/username/source</code></p><h3>Step 2 - Move project public folder content to the domain root directory</h3><pre><code class="language-html">/home/source/my-laravel-app/public -&gt; /home/source/public_html</code></pre><h3>Step 3 - Edit <code>/home/source/public_html/index.php</code> and set up <code>vendor</code> and <code>bootstrap</code> folder path.&nbsp;</h3><pre><code class="language-php">/*
|--------------------------------------------------------------------------
| Register The Auto Loader
|--------------------------------------------------------------------------
|
| Composer provides a convenient, automatically generated class loader for
| this application. We just need to utilize it! We'll simply require it
| into the script here so we don't need to manually load our classes.
|
*/

require __DIR__.'/../source/my-laravel-app/vendor/autoload.php';

/*
|--------------------------------------------------------------------------
| Run The Application
|--------------------------------------------------------------------------
|
| Once we have the application, we can handle the incoming request using
| the application's HTTP kernel. Then, we will send the response back
| to this client's browser, allowing them to enjoy our application.
|
*/

$app = require_once __DIR__.'/../source/my-laravel-app/bootstrap/app.php';</code></pre><h3>Step 4 - Now 🚀 set up your project</h3><ul><li>Copy <code>.env.example</code> &nbsp;<code>.env</code></li><li>Edit .env according to your project needs</li></ul><h3>Step 5 - Link Storage</h3><p>Create a symlink file under <code>public_html</code></p><p><i>#symlink.php</i></p><pre><code class="language-php">symlink('/home/{username}/source/my-laravel-app/storage/app/public','/home/{username}/public_html/storage');</code></pre><p>Call symlink.php <a href="https://example.com/symlink.php"><code>https://example.com/symlink.php</code></a>&nbsp;</p><p>💡 <a href="https://aws.devsolo.in/posts/laravel-storage-link-on-server-local">Checkout other methods to link storage folder</a></p>

How to deploy laravel on shared hosting

<h3>Step 1 - Setup “tailwind.config.js”</h3><pre><code class="language-javascript">module.exports = {
 	...
  	darkMode: "class",
  	...
};</code></pre><h3>Step 2 - Make Changes in the header component.</h3><pre><code class="language-javascript">import React, { useEffect, useState } from "react";

export default function Header() {
  const [theme, setTheme] = useState("");

  /* Toggle Method */
  const toggleTheme = () =&gt; {
    if (localStorage.theme == "light") {
      localStorage.setItem("theme", "dark");
      document.documentElement.classList.add("dark");
    } else {
      localStorage.setItem("theme", "light");
      document.documentElement.classList.remove("dark");
    }
    setTheme(localStorage.theme);
  };
  
  /* Set Current theme Method */
  const setCurrentTheme = () =&gt; {
    if (
      localStorage.theme === "dark" ||
      (!("theme" in localStorage) &amp;&amp;
        window.matchMedia("(prefers-color-scheme: dark)").matches)
    ) {
      setTheme("dark");
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  };

 /*Call setCurrentTheme when page load */
  useEffect(() =&gt; {
    setCurrentTheme();
  });
  
  return(
  	&lt;header&gt;
  	...
  	{/* theme toggle btn */}
  	&lt;button className="nav-link" onClick={toggleTheme}&gt;
    	{theme !== "dark" ? (
    	moon icon
    	) : (
      	sun icon
    	)}
  	&lt;/button&gt;
	...
  	&lt;/header&gt;
  )
 }</code></pre>

Next js Toggle Taiwind Css Theme

<blockquote><p>Note : in this version of package we are using <a href="https://tailwindcss.com/docs/installation">Tailwind css v3</a></p></blockquote><h3><strong>Step 1 - Create an anonymous blade component</strong></h3><p>Create a new &nbsp;file called <code>easyAlert.blade.php</code> in side <code>/views/components</code> and add the following content to the file</p><pre><code class="language-html">&lt;div class="debug fixed top-16 right-6 space-y-4 p-4 overflow-hidden pointer-events-none" id="easy-alert-box"&gt;

    {{-- success --}}
    @if (session()-&gt;has("success"))
    &lt;div class="easy-alert relative bg-green-50 border border-green-100 rounded-lg shadow-lg p-4 w-[320px] pointer-events-auto"
        id="easy-alert-success"&gt;
        &lt;div class="flex gap-4"&gt;
            &lt;div&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor"&gt;
                    &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;h2 class="font-semibold leading-none text-green-800"&gt;Succussful!&lt;/h2&gt;
                &lt;p class="text-muted text-sm mt-2 text-green-700"&gt;{{ session('success') }}&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="absolute top-3 right-3"&gt;
            &lt;button type="button" onclick="closeAlert('easy-alert-success')"&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-800" viewBox="0 0 20 20"
                    fill="currentColor"&gt;
                    &lt;path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd" /&gt;
                &lt;/svg&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    @endif
    {{-- /success --}}

    {{-- info --}}
    @if (session()-&gt;has("info"))
    &lt;div class="easy-alert relative bg-blue-50 border border-blue-100 rounded-lg shadow-lg p-4 w-[320px] pointer-events-auto"
        id="easy-alert-info"&gt;
        &lt;div class="flex gap-4"&gt;
            &lt;div&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor"&gt;
                    &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;h2 class="font-semibold leading-none text-blue-800"&gt;Information!&lt;/h2&gt;
                &lt;p class="text-muted text-sm mt-2 text-blue-700"&gt;{{ session('info') }}&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="absolute top-3 right-3"&gt;
            &lt;button type="button" onclick="closeAlert('easy-alert-info')"&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-800" viewBox="0 0 20 20"
                    fill="currentColor"&gt;
                    &lt;path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd" /&gt;
                &lt;/svg&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    @endif
    {{-- /info --}}

    {{-- warning --}}
    @if (session()-&gt;has("warning"))
    &lt;div class="easy-alert relative bg-yellow-50 border border-yellow-100 rounded-lg shadow-lg p-4 w-[320px] pointer-events-auto"
        id="easy-alert-warning"&gt;
        &lt;div class="flex gap-4"&gt;
            &lt;div&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor"&gt;
                    &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;h2 class="font-semibold leading-none text-yellow-800"&gt;Attention needed!&lt;/h2&gt;
                &lt;p class="text-muted text-sm mt-2 text-yellow-700"&gt;{{ session('warning') }}&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="absolute top-3 right-3"&gt;
            &lt;button type="button" onclick="closeAlert('easy-alert-warning')"&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-800" viewBox="0 0 20 20"
                    fill="currentColor"&gt;
                    &lt;path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd" /&gt;
                &lt;/svg&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    @endif
    {{-- /warning --}}

    {{-- danger --}}
    @if (session()-&gt;has("danger"))
    &lt;div class="easy-alert relative bg-red-50 border border-red-100 rounded-lg shadow-lg p-4 w-[320px] pointer-events-auto"
        id="easy-alert-danger"&gt;
        &lt;div class="flex gap-4"&gt;
            &lt;div&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor"&gt;
                    &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;h2 class="font-semibold leading-none text-red-800"&gt;Error!&lt;/h2&gt;
                &lt;p class="text-muted text-sm mt-2 text-red-700"&gt;{{ session('danger') }}&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="absolute top-3 right-3"&gt;
            &lt;button type="button" onclick="closeAlert('easy-alert-danger')"&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-800" viewBox="0 0 20 20"
                    fill="currentColor"&gt;
                    &lt;path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd" /&gt;
                &lt;/svg&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    @endif
    {{-- /danger --}}

    {{-- errors --}}
    @if ($errors-&gt;any())
    &lt;div class="easy-alert relative bg-red-50 border border-red-100 rounded-lg shadow-lg p-4 min-w-[320px] pointer-events-auto pr-12"
        id="easy-alert-errors"&gt;
        &lt;div class="flex gap-4"&gt;
            &lt;div&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor"&gt;
                    &lt;path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /&gt;
                &lt;/svg&gt;

            &lt;/div&gt;
            &lt;div&gt;
                &lt;h2 class="font-semibold leading-none mb-2 text-red-800"&gt;There were {{ count($errors-&gt;all()) }} errors
                    with you submission&lt;/h2&gt;
                &lt;ul class="list-inside list-disc"&gt;
                    @foreach ($errors-&gt;all() as $error)
                    &lt;li class="list-item text-sm text-red-700"&gt;{{ $error }}&lt;/li&gt;
                    @endforeach
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="absolute top-3 right-3"&gt;
            &lt;button type="button" onclick="closeAlert('easy-alert-errors')"&gt;
                &lt;svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-800" viewBox="0 0 20 20"
                    fill="currentColor"&gt;
                    &lt;path fill-rule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clip-rule="evenodd" /&gt;
                &lt;/svg&gt;
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    @endif
    {{-- /errors --}}

    &lt;script&gt;
        function closeAlert($id) {
            document.getElementById($id).classList.add('close');  
        }
    &lt;/script&gt;
&lt;/div&gt;</code></pre><h3>😵</h3><h3><strong>Step 2 - Adding easy-alert animation</strong></h3><p>Make an <code>easy-alert.css</code> file add the following content and import it into your layout or main blade file.&nbsp;</p><pre><code class="language-css">.easy-alert {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: slide-in-right 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.easy-alert.close {
    -webkit-animation: fade-out-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
    animation: fade-out-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* animation */

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes fade-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
        display: none;
        visibility: hidden;
    }
}

@keyframes fade-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
        display: none;
        visibility: hidden;
    }
}</code></pre><p>#layouts/app.blade.php</p><pre><code class="language-html">...
&lt;!-- easy-alert-styles --&gt;
&lt;link rel="stylesheet" href="{{ asset('css/easy-alert.css') }}"&gt;
 ...</code></pre><h3><strong>Step 3 - Use </strong><code><strong>easyAlert</strong></code><strong> Component in layout</strong></h3><p>#layouts/app.blade.php</p><pre><code class="language-html">...
&lt;!-- Page Content --&gt;
&lt;main&gt;
	...
	&lt;!-- easyAlert --&gt;
	&lt;x-easyAlert /&gt;
	&lt;!-- /easyAlert --&gt;
 	...
&lt;/main&gt;
...</code></pre><h3>Step 4 - Start Using Laravel easyAlert</h3><pre><code class="language-php">public function store(Request $request){
	...
	session()-&gt;flash("success", "New Tag Created");
	return back();
}</code></pre><p><i>//output</i></p><p><img src="https://app.devsolo.in/storage/media_images/3SPGu5a7hdzaudFqsqmUukak7paLuCyXXAJ0Wiv7.png"></p><p>//validation errors</p><p><img class="image_resized" style="width:44.92%;" src="https://app.devsolo.in/storage/media_images/qzwSPYBTnnitRQ8Gij1FeeuVUkFsYgFT4ZDoTXkj.png"></p><h3><strong>Conclusion</strong></h3><p>In this tutorial, I'll show you how to add a simple and customizable alert system called Laravel easyAlert.&nbsp;</p>

Laravel Easy Alert With Tailwind 3

<h3><strong>Step 1 - Install nano</strong></h3><pre><code class="language-bash">$ sudo dnf install nano</code></pre><h3><strong>Step 2 - Edit </strong><code><strong>.bash_profile</strong></code></h3><pre><code class="language-bash">$ nano ~/.bash_profile</code></pre><p>At the bottom of the file, add the following line:</p><pre><code class="language-json">export VISUAL="nano"
export EDITOR="nano"</code></pre><p>To Save <strong>CTRL+O</strong> | <strong>ENTER | CTRL+X</strong></p><h3><strong>Conclusions</strong></h3><p>On Centos, the default editor is "vi" a powerful editor. However, for beginners, working with vi can be difficult, and using a much simpler editor like nano is the best way to begin learning while focusing on the main topic.&nbsp;</p>

How to change default editor on centos

<h3><strong>Step 1 - &nbsp;Generating a new SSH key</strong></h3><p>If you have not already configured one, run the following command to generate an SSH key:</p><pre><code class="language-bash">$ ssh-keygen -t rsa -f ~/.ssh/my_key -b 4096 -C "username@example.com"</code></pre><p>Replace <code>my_key</code> with your key name.</p><p>Copy the content of <code>my_key.pub</code> for future use.</p><pre><code class="language-bash">$ cat ~/.ssh/my_key.pub</code></pre><h3><strong>Step 2 - Adding your SSH key to the ssh-agent</strong></h3><pre><code class="language-bash"># start the ssh-agent in the background
$ eval "$(ssh-agent -s)"
&gt; Agent pid XXXXX</code></pre><pre><code class="language-bash">$ ssh-add ~/.ssh/my_key</code></pre><h3><strong>Step 3 - Adding an SSH key to your GitHub Project Repository</strong></h3><ul><li>Go to the repository(e.g. @username/my-laravel-app).</li><li>Select the <u>settings tab</u>.</li><li>Go to <u>Deploy keys</u> under Security</li><li>Click on <u>Add Deploy Key</u> (Top right section).</li><li>Give a title to your deploy key and paste the content of (my_key.pub) in the key section.</li><li>You can check <u>Allow write access.</u> If you want this key to be used to <strong>push</strong> to this repository? Deploy keys always have pull access.&nbsp;</li><li>Click on <u>Add key</u> to save Deploy Key.</li></ul><h3><strong>Step 4 - Test the SSH key</strong></h3><pre><code class="language-bash">$ ssh -i ~/.ssh/my_key -T git@github.com</code></pre><p>//output</p><pre><code class="language-plaintext">Hi username/my-laravel-app! You've successfully authenticated, but GitHub does not provide shell access.</code></pre><h3><strong>Step 5 - Setup SSH config.</strong></h3><pre><code class="language-bash">$ nano ~/.ssh/config</code></pre><p>Refer to the following config to set up.</p><pre><code class="language-xml">#Github repo1
Host my-laravel-app
        HostName github.com
        User git
        IdentityFile ~/.ssh/my_key
                IdentitiesOnly yes</code></pre><p>To Save <strong>CTRL+O</strong> | <strong>ENTER | CTRL+X</strong></p><p>Test SSH config&nbsp;</p><pre><code class="language-bash">$ ssh {Config Host} -T</code></pre><pre><code class="language-bash">$ ssh my-laravel-app -T</code></pre><p>//output similar to the previous test (Step 4)</p><pre><code class="language-plaintext">Hi username/my-laravel-app! You've successfully authenticated, but GitHub does not provide shell access.</code></pre><h3><strong>Step 6 - Clone your repository</strong></h3><pre><code class="language-bash">#cd into your directory where you want to clone your gitHubrepository
$ cd ~/repositories</code></pre><pre><code class="language-bash">$ git clone Host:username/repo.git</code></pre><pre><code class="language-bash">$ git clone my-laravel-app:username/my-laravel-app.git</code></pre><p>Clone from a specific branch :</p><pre><code class="language-plaintext">$ git clone -b &lt;branch_name&gt; &lt;remote_repo_url&gt;</code></pre><pre><code class="language-bash">$ git clone -b production my-laravel-app:username/my-laravel-app.git</code></pre><p>Here <strong>-b</strong> is just an alias for <strong>--branch</strong></p><h3><strong>Step 7 - cd into the project and install required dependencies (if any)</strong></h3><pre><code class="language-bash">$ cd my-laravel-app</code></pre><h3><i>💡 </i><a href="https://devsolo.in/posts/deploy-laravel-application-on-linux-server-with-github"><i>Check out our quick and easy guide on how to deploy and set up your Laravel project.</i></a><i>&nbsp;</i></h3>

How to Clone Github Private Repo To Any Linux Server

<h3><strong>Prerequisites</strong></h3><ul><li>GitHub repository (public) with Laravel project.</li></ul><h3><strong>Step 1 - Clone your repository</strong></h3><pre><code class="language-bash">#cd into your directory where you want to clone your gitHub repository
$ cd ~/repositories</code></pre><pre><code class="language-bash">[repositories]$ git clone https://github.com/username/my-laravel-app.git</code></pre><p>Clone Successful 🥳</p><h3><strong>Step 2 - cd into the project</strong></h3><pre><code class="language-bash">[repositories]$ cd my-laravel-app</code></pre><h3><strong>Step 3 - Change Permissions</strong></h3><pre><code class="language-bash">[my-laravel-app]$ sudo chmod 777 -R bootstrap</code></pre><pre><code class="language-bash">[my-laravel-app]$ sudo chmod 777 -R storage</code></pre><h3><strong>Step 4 - &nbsp;List of commands to set up your laravel project</strong></h3><pre><code class="language-bash">$ composer install --optimize-autoloader
#OR
$ composer install --optimize-autoloader --no-dev</code></pre><pre><code class="language-bash">$ mv .env.example .env</code></pre><pre><code class="language-bash">#edit you .env file
$ nano .env</code></pre><pre><code class="language-bash">$ php artisan key:generate</code></pre><pre><code class="language-bash">$ php artisan migrate --seed</code></pre><pre><code class="language-bash">$ php artisan storage:link</code></pre><pre><code class="language-bash">$ php artisan config:cache
$ php artisan route:cache
$ php artisan view:cache</code></pre><pre><code class="language-bash">$ php artisan optimize:clear</code></pre><pre><code class="language-bash">$ php artisan optimize</code></pre><h3><strong>Step 5 - Error Fix</strong></h3><blockquote><p>Error : SQLSTATE[HY000] [2002] Permission denied</p></blockquote><p>Edit <code>.env</code> and change DB_HOST=127.0.0.1 to DB_HOST=localhost</p><h3><strong>Step 6 - Link (symlink) domain root directory to </strong><code>~/repositories/<strong>my-laravel-app/public</strong></code><strong> folder.</strong></h3><pre><code class="language-bash">$ ln -s /repositories/my-laravel-app/public /var/www/example.com</code></pre><p>YAY! 🥳 Setup is complete.&nbsp;</p><h3><strong>Conclusion</strong></h3><p>In this tutorial, I'll walk you through how to deploy laravel project on any Linux server using GitHub.</p>

Deploy Laravel Application on linux server with Github

<h2><strong>Prerequisites</strong></h2><ul><li>Fresh or existing <a href="https://laravel.com/">laravel </a>application</li><li>Installed <a href="https://laravel-livewire.com/docs/2.x/quickstart">Livewire</a></li><li><a href="https://ckeditor.com/ckeditor-5/online-builder/">CKeditor 5 Custom Build</a></li></ul><h3><strong>Step 1 - Setup Scripts</strong></h3><p>Refer to the following code to set up the livewire component blade file.</p><p><i>#post-component.blade.php</i></p><pre><code class="language-javascript">&lt;script src="/ckeditor-5/build/ckeditor.js"&gt;&lt;/script&gt;</code></pre><pre><code class="language-javascript">&lt;script&gt;
	const watchdog = new CKSource.EditorWatchdog();
	window.watchdog = watchdog;
&lt;script&gt;</code></pre><pre><code class="language-javascript">&lt;script&gt;
	document.addEventListener('livewire:load', function () {
		Livewire.on('resetCkEditor', () =&gt; {
		console.log('resetCkEditor');
		watchdog.editor.setData("");
		});
	});
&lt;/script&gt;</code></pre><h3><strong>Step 2 - Setup Livewire Component</strong></h3><p>Refer to the following code to set up the component file.</p><p><i>#PostComponent.php</i></p><pre><code class="language-php">function resetCkEditor(){
	$this-&gt;emit('resetCkEditor');
}</code></pre><pre><code class="language-php">function updatePost(){
	...
	$this-&gt;reset([...]);
	$this-&gt;resetCkEditor();
	...
}</code></pre><h2><strong>Conclusion</strong></h2><p>In This tutorial, we will learn how to reset the value of Custom Build CKEditor 5 while working with livewire.</p>

Reset Value Of Custom Build CKEditor 5 With Livewire

<h3><strong>Step 1 - Create folders for custom scripts and database backups.&nbsp;</strong></h3><p>&nbsp; &nbsp;&nbsp;</p><pre><code class="language-bash">$ mkdir custom_scripts</code></pre><pre><code class="language-bash">$ mkdir db_backups</code></pre><h3><strong>Step 2 - Create .sh file</strong></h3><pre><code class="language-bash">$ nano ~/custom_scripts/auto-backup.sh</code></pre><p>Add the following content to the file:</p><pre><code class="language-bash">#!/bin/bash
mysqldump -u root -p{password123} my_site_db &gt; ~/db-backups/my_site_db_`date +"%Y-%m-%d"`.sql</code></pre><blockquote><p>Note: set password without {…}</p></blockquote><p>Add the following line to delete backups that are more than 10 days old. &nbsp; &nbsp;</p><pre><code class="language-bash">find ~/db-backups -mtime +10 -type f -delete</code></pre><p><i>//full script</i></p><p>#auto-backup.sh &nbsp; &nbsp;</p><pre><code class="language-bash">#!/bin/bash
mysqldump -u root -p{password123} my_site_db &gt; ~/db-backups/my_site_db_`date +"%Y-%m-%d"`.sql
find ~/db-backups -mtime +10 -type f -delete</code></pre><h3><strong>Step 3 - Set crontab</strong> &nbsp;&nbsp;</h3><pre><code class="language-bash">$ crontab -e</code></pre><p>Add the following line:&nbsp;</p><pre><code class="language-plaintext">* * * * * ~/custom_scripts/auto-backup.sh</code></pre><blockquote><p>Note: using <code>* * * * * </code>script will run every minute</p></blockquote><p>To backup your database on daily basis Use <code>0 0&nbsp;<i> * * *</i></code>&nbsp;</p><p>TIP: <a href="https://crontab.guru/">https://crontab.guru/</a></p><h3><strong>&nbsp;⚙ Troubleshooting</strong></h3><p>To check logs : &nbsp; &nbsp;</p><pre><code class="language-bash">$ sudo cat /var/log/cron</code></pre><pre><code class="language-bash">$ sudo tail /var/log/cron</code></pre><p>If the logs show any permissions-related errors. Make sure the script (<code>auto-backup.sh</code>) is executable by checking folder and file permissions. &nbsp; &nbsp;&nbsp;</p><pre><code class="language-bash">$ sudo chown -R $USER ~/custom_scripts   </code></pre><pre><code class="language-bash">$ sudo chmod -R 755 ~/custom_scripts</code></pre><h2><strong>Conclusion</strong></h2><p>Some applications rely on a database to function. and possibly a database loss is required to terminate the application. We can restart our application with backup data if we have a database backup, and automatic database backup simplifies things even more.&nbsp;</p>

How To Automate Database Backup In CentOS

<h3>Step 1 - Fetch response</h3><pre><code class="language-php">use Razorpay\Api\Api;
$api = new Api($key_id, $secret);</code></pre><pre><code class="language-php">$response = $api-&gt;payment-&gt;fetch($paymentId);</code></pre><p><i>//OR</i></p><pre><code class="language-php">$response = $api-&gt;payment-&gt;fetch($paymentId)-&gt;capture(array('amount'=&gt;$amount,'currency' =&gt; 'INR'));</code></pre><p><a href="https://razorpay.com/docs/api/payments/#capture-a-payment"><i>//sample response</i></a></p><pre><code class="language-json">{  
"id": "pay_G8VQzjPLoAvm6D", 
"entity": "payment",  
"amount": 1000,  
"currency": "INR",  
"status": "captured",  
"order_id": "order_G8VPOayFxWEU28",  
"invoice_id": null,  
"international": false,  
"method": "upi",  
"amount_refunded": 0,  
"refund_status": null,  
"captured": true,  
"description": "Purchase Shoes",  
"card_id": null,  
"bank": null,  
"wallet": null,  
"vpa": "gaurav.kumar@exampleupi",  
"email": "gaurav.kumar@example.com",  
"contact": "+919999999999",  
"customer_id": "cust_DitrYCFtCIokBO",  
"notes": [],  
"fee": 24,  
"tax": 4,  
"error_code": null,  
"error_description": null,  
"error_source": null,  
"error_step": null,  
"error_reason": null,  
"acquirer_data": {    
	"rrn": "033814379298"  
},  
"created_at": 1606985209
}</code></pre><h3>Step 2 - Save the response to the database.</h3><pre><code class="language-php">RazorpayPayment::create([
	"details" =&gt; json_encode($response-&gt;toArray())
]);</code></pre><h3>Step 3 - In RazorpayPayment Model</h3><pre><code class="language-php">class RazorpayPayment extends Model
{
   	...
    public function getDetailsAttribute($value)
    {
        return json_decode($value);
    }
    ...
}</code></pre><h2>Conclusion</h2><p style="margin-left:0px;">Razorpay payment fetch/capture returns a large block of JSON data. I'll show you how to save the entire JSON response at once.</p>

How To Store Entire JSON response of Razorpay fetch/capture API

<h3>Prerequisites</h3><ul><li>Fresh or Existing <a href="https://laravel.com/docs/8.x/installation">Laravel</a> Project</li><li><a href="https://laravel-livewire.com/docs/2.x/quickstart#install-livewire">Install Livewire</a></li><li>Include the JavaScript And Styles (on every page that will be using Livewire).</li></ul><blockquote><p>Suggestion layouts/app.blade.php</p></blockquote><pre><code class="language-html">...
  	@livewireStyles
...
    @livewireScripts</code></pre><h3>Step 1 - Create Livewire Component</h3><pre><code class="language-bash">php artisan make:livewire categories-select</code></pre><h4>#App/Http/Livewire/CategoriesSelect.php</h4><pre><code class="language-php">&lt;?php

namespace App\Http\Livewire;

use App\Models\Category;
use App\Models\SubCategory;
use App\Models\SubSubCategory;
use Livewire\Component;


class CategoriesSelect extends Component
{
    public $categories;
    public $subcategories;
    public $subsubcategories;

    public $selectedCategory;
    public $selectedSubCategory;
    public $selectedSubSubCategory;


    public function updatedSelectedCategory($value)
    {
        $this-&gt;subcategories = SubCategory::where("category_id", $value)-&gt;get();
    }

    public function updatedSelectedSubCategory($value)
    {
        $this-&gt;subsubcategories = SubSubCategory::where("sub_category_id", $value)-&gt;get();
    }

    public function mount()

    {
        if ($this-&gt;selectedCategory) {
            $this-&gt;subcategories = SubCategory::where("category_id", $this-&gt;selectedCategory)-&gt;get();
        }
        if ($this-&gt;selectedSubCategory) {
            $this-&gt;subsubcategories = SubSubCategory::where("sub_category_id", $this-&gt;selectedSubCategory)-&gt;get();
        }
    }


    public function render()
    {

        $this-&gt;categories = Category::all();
        return view('livewire.categories-select');
    }
}</code></pre><h3><strong>Step 2 - Edit Livewire View</strong></h3><p>Now Edit filename <code>categories-select.blade.php</code> in <code>/views/Livewire</code></p><p>&nbsp;</p><pre><code class="language-html">&lt;div class="row"&gt;
    &lt;div class="col-md-4 col-12"&gt;
        &lt;div class="mb-1"&gt;
            &lt;label class="form-label" for="title"&gt;select category {{ $selectedCategory }}&lt;/label&gt;
            &lt;select class="form-control" name="category_id" wire:model='selectedCategory'&gt;
                &lt;option value="" selected&gt;none&lt;/option&gt;
                @foreach ($categories as $category)
                &lt;option value="{{ $category-&gt;id }}"&gt;{{ $category-&gt;title }}&lt;/option&gt;
                @endforeach
            &lt;/select&gt;
            @error('category_id')
            &lt;small class="text-danger"&gt;{{ $message }}&lt;/small&gt;
            @enderror
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 col-12"&gt;
        &lt;div class="mb-1"&gt;
            &lt;label class="form-label" for="title"&gt;select sub category {{ $selectedSubCategory }}&lt;/label&gt;
            &lt;select name="sub_category_id" id="" class="form-control" wire:model='selectedSubCategory'&gt;
                &lt;option value="" selected&gt;none&lt;/option&gt;
                @if ($subcategories)
                @foreach ($subcategories as $category)
                &lt;option value="{{ $category-&gt;id }}"&gt;{{ $category-&gt;title }}&lt;/option&gt;
                @endforeach
                @endif
            &lt;/select&gt;
            @error('sub_category_id')
            &lt;small class="text-danger"&gt;{{ $message }}&lt;/small&gt;
            @enderror
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 col-12"&gt;
        &lt;div class="mb-1"&gt;
            &lt;label class="form-label" for="title"&gt;select sub sub category {{ $selectedSubSubCategory }}&lt;/label&gt;
            &lt;select name="sub_sub_category_id" id="" class="form-control" wire:model='selectedSubSubCategory'&gt;
                &lt;option value="" selected&gt;none&lt;/option&gt;
                @if ($subsubcategories)
                @foreach ($subsubcategories as $category)
                &lt;option value="{{ $category-&gt;id }}"&gt;{{ $category-&gt;title }}&lt;/option&gt;
                @endforeach
                @endif
            &lt;/select&gt;
            @error('sub_sub_category_id')
            &lt;small class="text-danger"&gt;{{ $message }}&lt;/small&gt;
            @enderror
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre><h3><strong>Use livewire component in blade</strong></h3><pre><code class="language-html">@livewire('categories-select')</code></pre><p>//OR</p><pre><code class="language-html">@livewire('categories-select',[
	'selectedCategory' =&gt;$product-&gt;category_id,
	'selectedSubCategory' =&gt;$product-&gt;sub_category_id,
	'selectedSubSubCategory' =&gt; $product-&gt;sub_sub_category_id
])</code></pre><h2><strong>Conclusion</strong></h2><p>In this tutorial, we will create a Livewire Multi-level Category Select List with dependent data such as country, state, and city.</p><p>Credit: <a href="https://laravel-livewire.com/">livewire</a></p>

Laravel Livewire Multi-level Category Select List

<h3><strong>Why We Need SSL ?</strong></h3><p>SSL certificates are required for websites in order to protect user data, validate website ownership, prevent attackers from creating a false version of the site, and transmit trust to users.&nbsp;</p><h3><strong>What is Certbot?</strong></h3><p>Certbot is a free, open-source software tool for automatically using <a href="https://letsencrypt.org/">Let’s Encrypt</a> certificates on manually-administrated websites to enable HTTPS.</p><p>source: <a href="https://certbot.eff.org/pages/about">certbot</a></p><h3><strong>Prerequisites</strong></h3><ul><li>Server with CentOS 8</li><li>Apache installed on the server with the configured virtual host for your domains.</li></ul><h3><strong>Step 1 - Installing the Certbot Client</strong></h3><p>Add the CentOS 8 EPEL repository</p><pre><code class="language-bash">$ sudo dnf install epel-release</code></pre><p>Now Install Certbot with required packages <code>python3-certbot-apache</code> and <code>mod_ssl</code></p><pre><code class="language-bash">$ sudo dnf install certbot python3-certbot-apache mod_ssl</code></pre><h3><strong>Step 2 - Getting a Certificate</strong></h3><p>To obtain a certificate that covers only one domain</p><pre><code class="language-bash">$ sudo certbot --apache -d example.com</code></pre><p>To obtain a certificate that covers multiple domains</p><pre><code class="language-bash">$ sudo certbot --apache -d www.example.com -d example.com</code></pre><p>You can also use <code>certbot</code> utility prompt</p><pre><code class="language-bash">$ sudo certbot --apache</code></pre><p><i>#Output</i></p><p>Successful Installation output will be something similar to this</p><pre><code class="language-plaintext">IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/example.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/example.com/privkey.pem
   Your cert will expire on 2022-01-26. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le</code></pre><h3><strong>Step 3 - Testing</strong></h3><pre><code class="language-plaintext">https://www.ssllabs.com/ssltest/analyze.html?d=example.com</code></pre><h2>Conclusion&nbsp;</h2><p>We learned how to install a free SSL certificate on your domain in a very basic and straightforward manner.&nbsp;</p>

How To Get Let's Encrypt SSL Certificate with Apache on CentOS 8

<h3>#Note</h3><blockquote><p>Before making any changes to the <code>.htaccess</code> file must check <code>RewriteEngine</code> &nbsp;is set to <code>On</code>.&nbsp;</p></blockquote><pre><code class="language-plaintext">RewriteEngine On</code></pre><h3><strong>#Redirect Browser to HTTPS</strong></h3><pre><code class="language-plaintext">RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
#OR
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]</code></pre><h3><strong>#Redirect Browser to HTTP</strong></h3><pre><code class="language-plaintext">RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
</code></pre><h3><strong>#Set the Time Zone</strong></h3><pre><code class="language-plaintext">SetEnv TZ Asia/Kolkata </code></pre><h3><strong>#Remove the www from your URL.</strong></h3><pre><code class="language-plaintext">RewriteBase /
RewriteCond %{HTTP_HOST} ^www.yourdomain.com [NC]
RewriteRule ^(.*)$ http://yourdomain.com/$1 [L,R=301]</code></pre><h3><strong>#Custom Error Pages</strong></h3><pre><code class="language-plaintext">ErrorDocument 400 /400.html
ErrorDocument 401 /401.html
ErrorDocument 403 /403.html
ErrorDocument 404 /404.html</code></pre><h3><strong>#Set DirectoryIndex</strong></h3><pre><code class="language-plaintext">DirectoryIndex index.php</code></pre><p>configure multiple index files as a fallback.</p><pre><code class="language-plaintext">DirectoryIndex index.php index.html index.htm</code></pre>

.htaccess cheatsheet

<p>&nbsp;</p><blockquote><p>To make these files accessible from the web, you should create a symbolic link from <code>public/storage</code> to <code>storage/app/public</code>.</p></blockquote><p>There Are multiple ways to achieve this.</p><h3><strong>#Local</strong></h3><p>To create the symbolic link, you may use the <code>storage:link</code> Artisan command:</p><pre><code class="language-bash">$ php artisan storage:link</code></pre><h3><strong>#Terminal</strong></h3><p>//create</p><pre><code class="language-bash">$ ln -s /path/to/target /path/to/link</code></pre><p>//update</p><pre><code class="language-bash">$ ln -sfn /path/to/target /path/to/link</code></pre><h3><strong>#URL</strong></h3><pre><code class="language-php">Route::get('/storage-link', function () {
    Artisan::call('storage:link');
});</code></pre><h3><strong>#symlink file</strong></h3><pre><code class="language-php">symlink('/home/{username}/myLaravelApp/storage/app/public','/home/{username}/public_html/storage');</code></pre><p>Credit: <a href="https://laravel.com/docs/8.x/filesystem">Laravel docs</a></p>

Laravel Storage link On Server / Local

<h3><strong>#sortBy</strong></h3><blockquote><p>The <a href="https://laravel.com/docs/8.x/collections#method-sortby"><code>sortBy</code></a> method sorts the collection by the given key.</p></blockquote><p>We sort / arrange the fetched data in descending order according to the "id" of the data using sortByDesc("id").&nbsp;</p><pre><code class="language-php">dd(Enquiry::all()-&gt;sortBy("id", "desc")); 
//OR
dd(Enquiry::all()-&gt;sortByDesc("id")); </code></pre><p>Note that the sort function cannot be used before "all()" or "get()".</p><h3><strong>#orderBy</strong></h3><p>If we use "orderBy()" rather than "sortBy()."&nbsp;</p><p>We sort / arrange the Data before fetching it in descending order according to the "id" of the data using orderBy('id', 'desc').&nbsp;</p><pre><code class="language-php">//Ascending order
dd(Enquiry::orderBy("id")-&gt;get());  </code></pre><pre><code class="language-php">//Descending order
dd(Enquiry::orderBy("id", "desc")-&gt;get());</code></pre><h3><strong>#Conclusion</strong></h3><p>If you noticed the Output Index value of the child objects of the Fetched array "#items". Both methods return a collection of data but in different order of index values.&nbsp;</p>

Difference Between "sortBy" and "orderBy" in Laravel

<h3>What is GSAP</h3><p style="margin-left:0px;">GreenSock Animation Platform (GSAP) is a well-known suite of JavaScript tools for creating web animations.</p><h3 style="margin-left:0px;">#index.html</h3><pre><code class="language-html">...
&lt;div class="mouse-icon"&gt;
	&lt;div class="scroll-icon"&gt;&lt;/div&gt;
&lt;/div&gt;
...</code></pre><h3>#style.css</h3><pre><code class="language-css">.mouse-icon {
	border: 2px solid #fff;
	width: 40px;
	height: 70px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	border-radius: 50px;
	padding: .6em;
	margin: 1em;
}

.mouse-icon .scroll-icon {
	width: 8px;
	height: 16px;
	background-color: #fff;
	border-radius: inherit;
}</code></pre><h3>#Output</h3><p><img src="https://i.imgur.com/iBwXrBg.png"></p><p>We utilize <a href="https://greensock.com/gsap/"><mark class="marker-green">GSAP</mark></a> to animate the scroll icon.&nbsp;</p><p>Import core gsap js first, then write the animation part.&nbsp;</p><h3>#main.js</h3><pre><code class="language-javascript">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"&gt;&lt;/script&gt;
&lt;!-- GSAP scroll icon animation --&gt;
&lt;script&gt;
	gsap.from('.scroll-icon',{
		y:-30,duration:1,repeat:-1,yoyo:true
	})
&lt;/script&gt;</code></pre>

Animated Mouse Scroll Icon Using GSAP

<p style="margin-left:0px;">In this tutorial, I'll show you how to make Mobile/Sidebar Navigation with a backdrop blur effect without using any third-party resources.</p><h3 style="margin-left:0px;">#index.html</h3><pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" href="./main.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;header&gt;
            &lt;nav&gt;
                &lt;div class="logo"&gt;
                    Logo
                &lt;/div&gt;
                &lt;button id="open"&gt;
                    menu
                &lt;/button&gt;
            &lt;/nav&gt;
        &lt;/header&gt;
        &lt;div class="hero"&gt;
            &lt;h1&gt;
                I'm &lt;br&gt; 
                Hero...  
            &lt;/h1&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="sidebar"&gt;
        &lt;nav&gt;
            &lt;button id="close"&gt;close&lt;/button&gt;
        &lt;/nav&gt;
        &lt;div class="nav-link-wrapper"&gt;
            &lt;a href="#" class="nav-link"&gt;home&lt;/a&gt;
            &lt;a href="#" class="nav-link"&gt;class&lt;/a&gt;
            &lt;a href="#" class="nav-link"&gt;jobs&lt;/a&gt;
            &lt;a href="#" class="nav-link"&gt;list&lt;/a&gt;
            &lt;a href="#" class="nav-link"&gt;about&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="./main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><h3><strong>#main.css</strong></h3><pre><code class="language-css">body {
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  height: 100vh;
}

header {
  padding: 1em;
}

header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.hero {
  padding: 1em;
  font-size: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 80%;
}

.sidebar {
  background-color: turquoise;
  width: 0px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
}

.sidebar nav {
  padding: 1em;
  height: 20%;
}

.sidebar .nav-link-wrapper {
  padding: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sidebar .nav-link-wrapper .nav-link {
  margin: 1em 0;
  list-style: none;
  display: block;
  text-align: center;
  color: #0e0e0e;
  text-decoration: none;
  text-transform: capitalize;
  font-size: 2rem;
}

.sidebar .nav-link-wrapper .nav-link:hover {
  text-decoration: underline;
}</code></pre><h3><strong>#main.js</strong></h3><pre><code class="language-javascript">var open = document.querySelector('#open');
var close = document.querySelector('#close');
var sidebar = document.querySelector('.sidebar');
var container = document.querySelector('.container');

open.addEventListener('click',()=&gt;{
    sidebar.style.width = '240px';
    sidebar.style.transition = '0.3s';
    container.style.transition = '0.3s';
    container.style.filter = 'blur(2px)';

});
close.addEventListener('click',()=&gt;{
    sidebar.style.width = '0px';
    container.style.filter = 'blur(0px)';
});</code></pre><h3><strong>#OUTPUT</strong></h3><p>//nav close</p><p><img class="image_resized" style="width:18.6%;" src="https://i.imgur.com/yNS7qi2.png"></p><p>//nav open</p><p><img class="image_resized" style="width:18.48%;" src="https://i.imgur.com/mXiY638.png"></p>

Mobile navigation with backdrop blur effect

<p>The simplest way to avoid an error <code>Cannot read property 'addEventListener' of null</code> is to check whether the variable is null or not.&nbsp;</p><pre><code class="language-html">&lt;button id="myButton"&gt;Click me&lt;/button&gt;</code></pre><pre><code class="language-javascript"> var btn = document.getElementById('myButton');
  if(btn){ //check if btn exists or not.
   btn.addEventListener('click', myFunction);
  }
 function myFunction(){
   console.log('Hello World');
 }</code></pre>

Join Our Newsletter