DEV Community: Melih Şahin

Web Development with Web Components: The New Way of Modularity

Melih Şahin — Mon, 22 Apr 2024 17:42:00 +0000

Web Components is a web technology that forms the basis of modern web development practices and allows to create repetitive elements on web pages in a reusable and modular way. This technology enables web developers to create more efficient, maintainable and modular code.

Fundamentals of Web Components

We can examine web components under 4 headings in terms of features:

Custom Elements: Allows to create new custom tags with HTML. These custom tags come with their own functionality and appearance. For example, or .
Shadow DOM: This is a technology that isolates the content and styles of a component from other page content. Thus, the content and style of a component can be managed internally without affecting the outside world.
HTML Templates: This is used to define repeating structures. Templates can be used inside a component and are only called when needed.
ECMAScript Modules: allows JavaScript files to be organized in a modular way and exported to other files. This allows for better code organization and reusability.

Advantages of Web Components

Web components offer many advantages over traditional web development methods:

Modularity and Reusability: Components are built as independent units and can be reused at will. This ensures less code duplication and speeds up the development process.
Isolation: Shadow DOM isolates the content and styles of a component from outside influences. This avoids conflicts and prevents the component from being affected by unwanted changes.
Standardization: Web components provide consistency across browsers. This reduces problems with compatibility between different browsers.
Ease of Development: Web components make it easier to manage the development process by breaking down the code. Each component can be developed independently.

Disadvantages

While web components are a big step forward in many aspects of modern web development, they can also present some disadvantages. However, these challenges should be recognized as problems that can be overcome with proper planning, design and implementation:

Browser Support Issues: Full support of web components can be problematic for older browsers or certain platforms. In particular, older browsers such as Internet Explorer may struggle to run some web components properly.
Performance Cost: Web components can include more complex structures and features, which can come at a performance cost. Performance issues can arise, especially in large web applications with a large number of complex components.
Increased Learning Curve: Web components are based on a different paradigm than traditional web development approaches. Therefore, developers may need to learn to work with web components and restructure their applications accordingly.
Complexity and Abstraction: Web components allow code to be more modular and reusable, but this modularity and reusability can, in some cases, result in code that is more complex and difficult to understand.
SEO Challenges: Because some web components dynamically generate content, they can be difficult to index and be indexed by search engines. This can affect the SEO performance of websites.
Development Tools Support: Web components may not be fully supported by development tools and IDEs. This can complicate the development process and complicate the debugging process. Update and Maintenance Challenges: With a large number of web components

Usage Areas of Web Components

Web components have a wide range of uses and can be used in various scenarios:

UI Components: UI elements such as buttons, forms, menus can be created and reused as components.
Widgets: Small widgets such as calendars, maps, social media sharing buttons can be packaged as web components and easily integrated.
Application Development: Large web applications can be built by combining different components together. This increases the modularity of the application and makes it easier to maintain.

Let’s see how web components work by doing a simple example.
In the example, we will create a simple button component, which when clicked will display the message “button clicked”.



class CustomButton extends HTMLElement {
    constructor() {
        super();
        // Attach shadow DOM
        this.attachShadow({
            mode: 'open'
        });

        // Add click event listener
        this.addEventListener('click', this.handleClick.bind(this));
    }

    // Handle click event
    handleClick() {
        alert('Button clicked!');
    }

    connectedCallback() {
        // create the component to render
        this.shadowRoot.innerHTML = `
     <style>
      .custom-button {
       padding: 10px 20px;
       background-color: #007bff;
       color: #fff;
       border: none;
       border-radius: 5px;
        cursor: pointer;
      }
      .custom-button:hover {
       background-color: #0056b3;
       }
      </style>
    <button class="custom-button"><slot></slot></button>`;
    }
}
// component is defined
customElements.define('custom-button', CustomButton);



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Component</title>
</head>
<body>
  <h1>Button Component</h1>
  <custom-button>Click!</custom-button>
  <script src="button.js"></script>
</body>
</html>

You can access the live example from this link.

Libraries related to web components

There are several popular libraries that facilitate the use of web components. Here are some of them:

Polymer: A library developed by Google that makes it easy to create, share and use web components. Polymer is especially popular for creating components that follow design guidelines such as Material Design.
LitElement: A lightweight and performance-oriented version of Polymer, LitElement enables the creation of modern web components. LitElement is based on the standard Web Component API and facilitates the creation of components using JavaScript template literals.
Stencil: Stencil, a library developed by Ionic, enables the creation of fast, performant and SEO-friendly web components. Stencil can be used with frameworks such as Angular, React or Vue.
SkateJS: is a JavaScript framework for the creation of user interface components. SkateJS focuses on the use of Vanilla JavaScript and is easy to integrate with other frameworks.
Vue.js: is a JavaScript framework that is especially popular for modern web applications. Vue.js has a component-based architecture and Vue components can be built in accordance with the Web Component standard.
React: one of the most popular libraries of recent times, it is a JavaScript library developed by Facebook and is used for the creation of user interface components. Although React components do not conform to the Web Component standard, components created with React can be used with other Web Component components.

These libraries facilitate the creation, management and use of web components and offer a variety of approaches to suit different requirements and preferences. Which library to use may vary depending on the needs of the project, the ecosystem and developer preferences.

Continue with content 🚀
You can access my other content by clicking this link. I would be very happy if you like and leave a comment 😇

Sources:

Project Optimisation with Webpack Bundle Analyzer

Melih Şahin — Wed, 20 Mar 2024 10:47:32 +0000

Webpack is an indispensable part of modern web development processes. Acting as a module packager, this tool converts JavaScript modules into files that can be used in the browser. However, as projects grow and become more complex, the size and complexity of the packages created also increases. This is where webpack-bundle-analyzer comes in.

What is Webpack Bundle Analyzer?

Webpack-bundle-analyzer is a plugin that visualises the size of Webpack output files as an interactive and zoomable treemap. By showing the contents of your bundles with their actual size, this tool helps you identify which modules take up the most space and which modules are accidentally added there.

Why Should We Use Webpack Bundle Analyzer?

Performance Optimisation: You can detect unnecessary code and large dependencies to improve the load time of your application.
Debugging: You can find modules that are included by mistake and reduce the package size by removing them.
Analysis and Decision Making: By better understanding the structure of your packages, you can decide which libraries and modules are best suited for your project.

🚀 Example Project

In this section, we will present a sample project that demonstrates the use of webpack-bundle-analyzer in a simple React application. The project will show how you can use webpack-bundle-analyzer to analyse the size and performance of the application.

1.Create a new React project:As a first step, let’s create a React project. You can use a tool like create-react-app for this.

npx create-react-app example-bundle-analyzer

2. Switch to the project directory: Switch to the created project directory.

cd example-bundle-analyzer

3. Install Webpack Bundle Analyser: While in the project directory, let’s install Webpack Bundle Analyser.

npm install --save-dev webpack-bundle-analyzer

4. Update the Webpack configuration: Let’s configure the Webpack Bundle Analyzer by creating the webpack.config.js file of your React project or customising the configuration files provided by react-scripts.

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // Other configuration settings...
  plugins: [
    // Other plugins...
    isProduction && new BundleAnalyzerPlugin(),
  ].filter(Boolean),
};

5.Run the project: **Add the following command to the scripts section in the **package.json file. With this command we will be able to run the bundle analyser.

"analyze": "npm run build -- --stats && npx webpack-bundle-analyzer ./build/bundle-stats.json"

npm run analyze

We developed a simple React application using webpack-bundle-analyzer. I highly recommend using this tool to analyse the size and performance of your application.

You can access the source codes of the sample project from this link. 🔗

Continue with content 🚀
You can access my other content by clicking this link. I would be very happy if you like and leave a comment 😇

Monorepo Concept

Melih Şahin — Tue, 27 Feb 2024 15:34:36 +0000

Monorepo is a software development strategy where multiple projects are managed in a single code repository. In this strategy, each project has its own folder or package, but all code resides in a single repository. Monorepo can be a powerful tool for managing large and complex codebases.

Advantages of monoreponement:

Reduces repetition: Because code used in multiple projects is kept in one place, code duplication is reduced. This makes the code base more consistent and easier to maintain.
Increases productivity: Monorepo makes it easier for development teams to make changes to the codebase and add new features. Using a single repository makes things like code reviews and merges simpler.
Accelerates development: Monorepo ensures that changes to the codebase are instantly reflected across all projects. This speeds up the development cycle and enables faster deliveries.

Disadvantages of Monorepon:

Complexity: Monorepo can be a more complex structure for large and complex codebases. This can make it difficult to navigate and debug the codebase.
Performance: Monorepo may require more storage and processing power for large codebases.
Training: Monorepo may require development teams to learn a new way of working.

JavaScript Libraries for Using Monorepo:

Many JavaScript libraries are available to facilitate development with Monorepo. Some of the most popular libraries are:

Lerna: A JavaScript library that makes developing with Monorepo easier. Lerna helps automate things like package management, task execution and version control.
Yarn: JavaScript package manager. It has many features that make developing with Monorepo easier.
Nx: It is a tool for developing applications with various technologies such as Angular and React. Nx supports monorepo builds and allows you to manage multiple projects or libraries in a single repository. It also offers various features to facilitate the development process.
Rush: It is a monorepository management tool developed by Microsoft. It has many features similar to Lerna.

Monorepo can be a powerful tool for managing large and complex codebases. If you are considering using Monorepo, it is important to first carefully evaluate the advantages and disadvantages of this strategy.

Let’s make a simple monorepo project using Lerna and React JS.

First, install Lerna:

npm install -g lerna

Next, create a home folder and go into it:

mkdir monorepo-example
cd monorepo-example

Command to install monorepo with Lerna:

lerna init

Let’s have two packages, “common” and “sample-app”. Our scenario is to use the modal component in the common package in the sample-app application.

Let’s create a folder packages and inside it create a folder common and a folder sample-app:

mkdir packages
cd packages
mkdir common
mkdir sample-app

Let’s go inside each package and create React applications:

cd packages/common
npx create-react-app .
cd ../sample-app
npx create-react-app .

To add the dependency between sample-app and common, let’s give the common package as a dependency of the sample-app package:

package.json

...
 "dependencies": {
    "common": "file:../common/src/components/modal"
  },
...

Then run the yarn command to install the package:

yarn

Let’s add the Modal component in the sample-app package:

App.js

import Modal from "common/src/components/modal/Modal";

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Monorepo Example App</h1>
        <Modal/>
      </header>
    </div>
  );
}

export default App;

You may need an additional loader to handle the result of these loaders.

When we stand up the sample-app package, we are likely to get an error like below. So we will need to configure webpack with a package called “craco”. After installing the package, let’s create a craco.config.js file in the main directory and add the following codes.

yarn add -D @craco/craco

const path = require("path");
const { getLoader, loaderByName } = require("@craco/craco");

const packages = [];
packages.push(path.join(__dirname, "../common"));
module.exports = {
  webpack: {
    configure: (webpackConfig, arg) => {
      const { isFound, match } = getLoader(webpackConfig, loaderByName("babel-loader"));
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];

        match.loader.include = include.concat(packages);
      }

      return webpackConfig;
    },
  },
};

You can access the source codes of the sample project from this link. 🔗

Continue with content 🚀
You can access my other content by clicking this link. I would be very happy if you like and leave a comment 😇

Get rid of Copy/Paste with Plop Js!

Melih Şahin — Thu, 15 Feb 2024 21:32:31 +0000

Hello,

Almost all of us, while working on a project, are copy/pasting from the previous one while creating similar structures. While thinking if there is a fast way to do this, I came across plop js.

Plop js actually allows us to create the structures that we have previously created templates on cli via command. It does this in a very simple way. I can give hygen and yeoman as an alternative to plop js. I plan to write content about these libraries in the future.

What Are the Conveniences It Provides Us?

Saves time.
Saves from writing repetitive code blocks and folder structures every time.
Helps people working in the project to create structures in the same standard. So it provides code integrity.

Let’s reinforce them by writing a sample project. In our scenario, we will create a component whose name we will determine, a file where we determine the types contained in this component, and a style file with the help of a command.

Let’s create a next js project from scratch. project from scratch.



npx create-next-app@latest

First, let’s include plop js in our project with yarn.



yarn add plop -D

Those who use npm can use this.



npm install --save-dev plop

To run our Plop script from the terminal, let’s add it to our “package.json” file.



{  
 ...
  "scripts": {    
    ...,
    "plop": "plop"
  },
  ...
}

It’s time to create our code template. To do this, we use handlebars js, which allows us to create templates at a basic level. We create a folder called templates in the project home directory and add our template files inside.

template/{{name}}.tsx.hbs



import { {{pascalCase name}}Props } from "./{{name}}";
import  "./{{name}}.css";

const {{name}} = ({ className="" }:{{pascalCase name}}Props) => {

  return (
    <div className={`{{name}} ${className}`}>
      {{name}} component
    </div>
  );
};

export default {{name}};

template/{{name}}.ts.hbs



export interface {{pascalCase name}}Props {
 className?: string;
}

template/{{name}}.css.hbs



.{{name}} {
  background-color: "#FF5733";
}

When we have completed our template files, we can create a file called “plopfile.js” in the main directory of our project.

plopfile.js



module.exports = function (plop) {
  plop.setGenerator("component", {
    description: "this is a skeleton plopfile",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "Enter component name:"
      },
    ],
    actions: [
      {
        type: "addMany",
        destination: "app/components/{{camelCase name}}",
        templateFiles: "templates/*.hbs",
        base: "templates",
      },
    ]
  });
};

description: Describes what the command does.
prompts: The part where we define the questions asked to the user.
actions: The part that defines the operation that the command will execute.
actions types: is used to define the type of the function. For example, in our example, we create 3 files with a single command. We do this with the action of type addMany. The add type is used to add a single file. If we want to modify the file we use modify.

Finally, let’s run our command:



yarn plop

You can access the source codes of the sample project from this link. 🔗

Continue with content 🚀

You can access my other content by clicking this link. I would be very happy if you like and leave a comment 😇

Authentication with Firebase

Melih Şahin — Mon, 12 Feb 2024 07:47:43 +0000

Hello there
In today's article, I will tell you how to authenticate using firebase in the Next js project.

First of all, without doing this process, we need to log in to firebase with our google account and create a project. Let's perform these steps in order.

Let's go to https://firebase.google.com and log in with our google account. A screen like the one below will greet us.

By clicking on the Create a project button, we create our project by naming it.

When we complete the steps and create the project, it shows us a screen like the one below.

When we come to the console panel, we save our web application by selecting the web section I show with the red arrow and get the information to add the firebase sdk to our project.

We create a next js project in our local and then include the firebase package in our project. We will use the firebase config information it gives us on the screen by adding it to our environment file.

After completing the above process, we have one last action to do on the console screen. We need to go to the Authentication section and select our authentication method from the "sign-in method" tab. Since we want to authenticate with email and password in this article, we select "email/password" from the native providers section.

We need to click on the "email/password" field and activate it. Then we save and complete our operations with the console.

Now let's go back to our next js project and create the protected route that only logged in users can see.

login.tsx



"use client";
import * as Yup from "yup";
import Link from "next/link";
import { useFormik } from "formik";
import { redirect } from "next/navigation";
import toast, { Toaster } from "react-hot-toast";
import { Button } from "@nextui-org/react";
import EmailInput from "@/components/emailInput/EmailInput";
import PasswordInput from "@/components/passwordInput/PasswordInput";
import { useAuthState } from "react-firebase-hooks/auth";
import { signInWithEmailAndPassword } from "firebase/auth";

import { auth } from "@/lib/firebaseConfig";

const Login = () => {
  const [user, loading] = useAuthState(auth);

  const validationSchema = Yup.object().shape({
    email: Yup.string()
      .email("invalid or incomplete email")
      .max(50, "email is too long")
      .required("required"),
    password: Yup.string()
      .min(6, "password is too short must be at least 6 characters")
      .required("required"),
  });

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema,
    onSubmit: async ({
      email,
      password,
    }: {
      email: string;
      password: string;
    }) => {
      const res = await signInWithEmailAndPassword(auth, email, password);
      if (res?.user) {
        sessionStorage.setItem("user", "true");
        redirect("/");
      } else {
        toast.error("Check your user information!");
      }
    },
  });

  const { errors, values, touched, handleSubmit, handleChange, isSubmitting } =
    formik;

  if (typeof window !== "undefined") {
    if (user && sessionStorage.getItem("user")) return redirect("/");
  }

  if (loading) return <p>Checking...</p>;

  return (
    <div className="flex min-h-screen items-center justify-center bg-black">
      <div className="flex w-full max-w-md flex-col rounded-lg bg-white p-8 shadow-md">
        <div className="text-black-1 mb-12 flex flex-col items-center justify-center gap-y-3">
          <p className="text-2xl font-bold">Example App</p>
        </div>
        <form
          noValidate
          onSubmit={handleSubmit}
          className="flex flex-col gap-y-6"
        >
          <Toaster position="top-right" />
          <EmailInput
            handleChange={handleChange}
            values={values}
            errors={errors}
            touched={touched}
          />
          <PasswordInput
            handleChange={handleChange}
            values={values}
            errors={errors}
            touched={touched}
          />
          <Button
            fullWidth={true}
            type="submit"
            color="success"
            className="bg-primary rounded-lg px-6 py-3.5 text-lg text-white hover:bg-blue-600"
            isLoading={isSubmitting}
          >
            Login
          </Button>
        </form>
        <p className="mt-4 text-center text-sm text-gray-600">
          <Link href="/signup" className="text-blue-500">
            Sign up
          </Link>
        </p>
      </div>
    </div>
  );
};

export default Login;

signup.tsx



"use client";
import * as Yup from "yup";
import Link from "next/link";
import { useFormik } from "formik";
import { redirect } from "next/navigation";
import { auth } from "@/lib/firebaseConfig";
import { updateProfile } from "firebase/auth";
import toast, { Toaster } from "react-hot-toast";
import { Button, Input } from "@nextui-org/react";
import { useAuthState } from "react-firebase-hooks/auth";
import { createUserWithEmailAndPassword } from "@firebase/auth";

import EmailInput from "@/components/emailInput/EmailInput";
import PasswordInput from "@/components/passwordInput/PasswordInput";

const Signup = () => {
  const [user, loading] = useAuthState(auth);

  const validationSchema = Yup.object().shape({
    fullName: Yup.string().required("required"),
    email: Yup.string()
      .email("invalid or incomplete email")
      .max(50, "email is too long")
      .required("required"),
    password: Yup.string()
      .min(6, "password is too short must be at least 6 characters")
      .required("required"),
  });

  const formik = useFormik({
    initialValues: {
      email: "",
      fullName: "",
      password: "",
    },
    validationSchema,
    onSubmit: async ({
      email,
      password,
      fullName,
    }: {
      email: string;
      password: string;
      fullName: string;
    }) => {
      const res = await createUserWithEmailAndPassword(auth, email, password);
      await updateProfile(auth?.currentUser as any, {
        displayName: fullName,
        photoURL: "https://i.pravatar.cc/150?u=a04258114e29026302d",
      });

      res?.user ? sessionStorage.setItem("user", "true") : toast.error("error");
    },
  });

  const { errors, values, touched, handleSubmit, handleChange, isSubmitting } =
    formik;

  if (typeof window !== "undefined") {
    if (user && sessionStorage.getItem("user")) return redirect("/login");
  }

  if (loading) return <p>Checking...</p>;

  return (
    <div className="flex min-h-screen items-center justify-center bg-black">
      <div className="flex w-full max-w-md flex-col rounded-lg bg-white p-8 shadow-md">
        <div className="text-black-1 mb-12 flex flex-col items-center justify-center gap-y-3">
          <p className="text-2xl font-bold">Example App</p>
        </div>
        <form
          noValidate
          onSubmit={handleSubmit}
          className="flex flex-col gap-y-6"
        >
          <Toaster position="top-right" />
          <div>
            <Input
              size="lg"
              type="text"
              label="User name"
              name="fullName"
              labelPlacement="outside"
              placeholder="Enter your name"
              onChange={handleChange}
              value={values?.fullName}
              errorMessage={errors?.fullName}
              isInvalid={(errors?.fullName && touched?.fullName) as boolean}
            />
          </div>
          <EmailInput
            handleChange={handleChange}
            values={values}
            errors={errors}
            touched={touched}
          />
          <PasswordInput
            handleChange={handleChange}
            values={values}
            errors={errors}
            touched={touched}
          />
          <Button
            fullWidth={true}
            type="submit"
            color="success"
            className="green-1 rounded-lg px-6 py-3.5 text-lg text-white hover:bg-green-600"
            isLoading={isSubmitting}
          >
            Sign up
          </Button>
        </form>
        <p className="mt-4 text-center text-sm text-gray-600">
          <Link href="/login" className="text-blue-500">
            Sign in
          </Link>
        </p>
      </div>
    </div>
  );
};

export default Signup;

The part that integrates the firebase service into our project:

/lib/firebaseConfig.ts



import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

const auth = getAuth(app);

export { app, auth };

getApp() is the function that returns us our application registered in firebase.
initializeApp() is a function that takes our firebase environment information as a parameter to create an application object.



const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

getAuth() function returns the authentication provider according to the firebase application object we created (in our application we chose this provider as email/password)

signup.tsx



const res = await createUserWithEmailAndPassword(auth, email, password);

createUserWithEmailAndPassword() is used to create a new user on firebase side according to email and password.
updateProfile() is used to assign properties such as profile picture, full name to the created user.

Using the "react-firebase-hooks" package, we can access the logged in user information.

login.tsx



const [user, loading] = useAuthState(auth);

You can access the source codes of the sample project from this link. 🔗

Continue with content 🚀

You can access my other content by clicking this link. I would be very happy if you like and leave a comment 😇

The Fast Way to create documents Docsify

Melih Şahin — Thu, 08 Feb 2024 06:51:49 +0000

Hello,

In this article, I would like to introduce you to a tool that will make you love documentation while creating software projects.

What is Docsify and what does it do?

Docsify is a very simple to use, open source tool where we can create documents for our projects in markdown markup language and publish it like a website.

When we look at its key features, these are the highlights:

First of all, it is simple and lightweight
Having a search plugin where you can do full-text search
Multiple theme support
Emoji support
plugin support
Server-side rendering support

Let’s reinforce the subject by making a sample project 🧑🏻‍💻

1. Installation
Since its own documentation recommends to use it globally, I will do the same.

npm i docsify-cli -g

After the installation is finished, let’s create our project named “example-docsify” using cli.

docsify init ./example-docsify

Then let’s go inside the “example-docsify” folder and stand up the project with the following command.

docsify serve

2. Adding content
As an example, I will create the documentation of the project I did before with docsify. The document we will design will have the following features:

cover page
sidebar usage
Theme
Search

a. Create a cover page
First, we create a file called “coverpage.md” and add our content in markdown format. Then it will be enough to go to the “index.html” file and add the following code to the script there.

coverpage: "coverpage.md"

index.html

<script>
    window.$docsify = {
      name: '',
      repo: '',
      coverpage: "coverpage.md",
      homepage: "README.md",
    }
  </script>

Note:

The homepage section defines the homepage as Readme.md by default, but this is not a hard and fast rule. If desired, it can be assigned by creating a file with another name (e.g. home.md) or by giving an external url.

window.$docsify = {
  homepage: 'home.md',
  // or
  homepage:
    'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',
};

b. Sidebar usage

You don’t need to make an extra effort to add a new link to the sidebar :) all you need to do is define a title in markdown format in the homepage. Automatically these headings will appear in the Sidebar.

# Getting Started

### Installation ⚙️

git clone https://github.com/melihs/rec-weather.git

cd rec-weather/

yarn

yarn start

### Built With 🛠️
* tailwindcss https://github.com/tailwindlabs/tailwindcss
* react-icons https://github.com/react-icons/react-icons
* sass        https://sass-lang.com
* dotenv      https://github.com/motdotla/dotenv

### TODO 📌
- multi-language support

### Demo 🚀

https://rec-weather.netlify.app

If we want to add a logo at the top of the sidebar, all we need to do is add the “logo” key to the script in “index.html”.

window.$docsify = {
      logo:"https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg",
      name: 'docsify example project',
      repo: "https://github.com/melihs",
      coverpage: "coverpage.md",
      homepage: "README.md",
    }

c. Theme

We can change the color of the link, button and the github sharing section at the top right by adding the themeColor key in the section where we set all the settings.

  window.$docsify = {
      themeColor: '#FF0000',
      logo:"https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg",
      name: 'docsify example project',
      repo: "https://github.com/melihs",
      coverpage: "coverpage.md",
      homepage: "README.md",
    }

There are also ready-made css files with different background colors. Thus, it is also possible to use dark or different colored themes.

To activate it, it will be enough to change the imported css file in our index.html file.

Below are ready-made css files for various themes.

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/buble.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/dark.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/pure.css" />

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<!--  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">-->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css" />
</head>

d. Search

The search feature is one of the indispensable and most important elements when reading documents. Again, docsify offers us a quick solution in this regard. All we need to do to add a search section is to include the following script in our project.

<script src="https://unpkg.com/docsify/lib/plugins/search.js"></script>

Click here to access extra plugins and include them in your own projects.

As a result, docsify, which I mentioned the features that will be useful for basic use, has many different features. You can use the official site for more details.

https://docsify.js.org

You can access the source codes of the sample project from this link. 🔗

Continue with content 🚀
You can access my other content by clicking this link. I would be very happy if you like and leave a comment 😇

Creating Seeding with Prisma

Melih Şahin — Mon, 05 Feb 2024 18:10:43 +0000

Hello,
In this article, I will try to explain how to create basic data using Prisma ORM while developing a full-stack application with Next.js.

What is Prisma and what does it do?

"Prisma" is a modern and powerful ORM (Object-Relational Mapping) tool that provides developers with ease in managing and querying database operations. In short, its features

include:

Database Models
Relationship Establishment (Relations)
Query Creation
Database Connection
TypeScript Support
Migration Management

What is Seeding and what is its purpose?

"Seeding" refers to adding initial data to the database or populating the database with sample data. This process involves adding default or sample data to database tables that can be used during the development, testing, or initial stages of an application. Seeding ensures the necessary database content for an application to function correctly and be tested.

Used in the sample project:

Framework: Next js
Database: PostgreSQL
ORM: Prisma

Project setup

Since our topic is seeding, I will not talk about application setup and database connection processes too much.

1. Next js installation:

npx create-next-app@latest

2. Install Prisma and other packages:

npm i prisma --save-dev
npm i @prisma/client

npx prisma // you can use prisma cli via this command

npm i lodash
npm i @faker-js/faker --save-dev
npm i bcrypt

3. Database creation and setup:

a. Assuming that a PostgreSQL database is installed on our computer, let's create a database named example_db. Then create an .env file in our project and add the database connection url here.

DATABASE_URL="postgresql://postgres:@localhost:5432/example_db?schema=public"

**b. **Create a folder called prisma in the project main directory and create a model file called schema.prisma in it. This file is where we define our database tables.

schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   @db.VarChar(255)
  content   String   @db.VarChar(255)
  User      User     @relation(fields: [userId], references: [id])
  userId    Int
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  createdAt DateTime @default(now())
  name      String   @db.VarChar(255)
  password  String?  @db.VarChar(255)
  posts     Post[]
}

c. Then we use the following command to create these tables:

npx prisma db push

If we check the database, we will see that the tables have been created.

4. Seed File Creation

Let's create a seed.ts file inside the prisma folder and create the basic structure.

seed.ts

export default PostSeed;

import {PrismaClient} from "@prisma/client";

const prisma = new PrismaClient();

const main = async () => {
...
}

main()
  .then(async () => {
    await prisma.$disconnect();
  })
  .catch(async (e) => {
    console.error(e);
    await prisma.$disconnect();
    process.exit(1);
  });

Now let's create the seeder structure that we will define in the main() function. Here we will benefit from the power of Typescript. First, let's create an abstract class assuming that there will be more than one seeder file.

Seeder.ts

abstract class Seeder {
  protected count: number; // decides how much data to generate
  protected _data: any = []; // seed data

  constructor(count: number) {
    this.count = count;
  }

  protected abstract createData(): void; // function to generate the data

  get data(): [] {
    return this._data;
  }
}

export default Seeder;

Now let's create our seed files for the related tables.

userSeed.ts

import bcrypt from "bcrypt";
import range from "lodash/range";
import { faker } from "@faker-js/faker";

import Seeder from "./Seeder";

class UserSeed extends Seeder {
  constructor(count: number = 10) {
    super(count);
    this.count = count;
    this.createData();
  }

  createData() {
    range(this.count).forEach(() => {
      this._data.push({
        name: faker.person.firstName(),
        createdAt: faker.date.anytime(),
        email: faker.internet.email(),
        password: bcrypt.hashSync("12345678", 10),
      });
    });
  }
}

export default UserSeed;

postSeed.ts

import range from "lodash/range";
import { faker } from "@faker-js/faker";

import Seeder from "./Seeder";

class PostSeed extends Seeder {
  constructor(count: number = 10) {
    super(count);
    this.count = count;
    this.createData();
  }

  createData() {
    range(this.count).forEach(() => {
      this._data.push({
        title: faker.lorem.sentence(),
        createdAt: faker.date.anytime(),
        updatedAt: faker.date.anytime(),
        content: faker.lorem.sentence(),
      });
    });
  }
}

export default PostSeed;

Let's go back to seed.ts and add the seeders we created.

seed.ts

import { Simulate } from "react-dom/test-utils";
import error = Simulate.error;
import { PrismaClient } from "@prisma/client";
import UserSeed from "./data/userSeed";
import PostSeed from "./data/postSeeder";

const prisma = new PrismaClient();

const main = async () => {
  try {
    await prisma.post.deleteMany();
    await prisma.user.deleteMany();

    const posts = new PostSeed();
    const users = new UserSeed(3);

    for (const user of users.data) {
      await prisma.user.create({
        data: {
          ...(user as any),
          posts: {
            create: posts.data,
          },
        },
      });

    }

    console.log(`Database has been seeded. 🚀`);
  } catch (e) {
    throw error;
  }
};

main()
  .then(async () => {
    await prisma.$disconnect();
  })
  .catch(async (e) => {
    console.error(e);
    await prisma.$disconnect();
    process.exit(1);
  });

5. Add seed command

To run these seeders we created, we need to add a command to our package.json file. There are some issues to be considered here. For example, when doing this with the Next js project, there may be module insertion errors in the seed file. To prevent this, we need to add a "compiler-options" flag to the seed command. Thus, we will not get a module error when the process is triggered.

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "db-seed": "prisma db seed" 
  },
  "prisma": {
    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
  },

Finally, let's run the command to create our data.

npm run db-seed

As can be seen here, we have successfully generated test data 😊.

You can access the source code of the project from this link github link
Hope to see you in the next article 👋🏻

Redux and Redux Toolkit

Melih Şahin — Sun, 09 Apr 2023 13:53:24 +0000

Redux
is a state management library for JavaScript applications. It provides a predictable state container that helps manage the state of an application in a consistent and centralized way. Redux is commonly used with React to build complex applications.

Redux Toolkit is a library that simplifies the use of Redux by providing a set of tools and guidelines. It allows developers to write less boilerplate code and focus on the application logic. Redux Toolkit includes features such as creating Redux slices, configuring a Redux store, and writing asynchronous actions.

Let's take a look at an example project that uses Redux Toolkit to build a shopping cart application. We'll start by creating a Redux slice for the cart.

import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: {
    products: [],
    totalPrice: 0,
  },
  reducers: {
    addProduct: (state, action) => {
      state.products.push(action.payload);
      state.totalPrice += action.payload.price;
    },
    removeProduct: (state, action) => {
      const index = state.products.findIndex(product => product.id === action.payload);
      if (index !== -1) {
        state.totalPrice -= state.products[index].price;
        state.products.splice(index, 1);
      }
    },
  },
});

export const { addProduct, removeProduct } = cartSlice.actions;
export default cartSlice.reducer;

In the above code, we use the createSlice function from Redux Toolkit to create a slice for the cart. The initialState object defines the initial state of the cart, which includes an empty array of products and a totalPrice of zero. The reducers object defines the actions that can be performed on the cart state. In this case, we define addProduct and removeProduct actions that modify the products array and update the totalPrice accordingly.

Next, we'll configure a Redux store using the configureStore function from Redux Toolkit.

import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

const store = configureStore({
  reducer: {
    cart: cartReducer,
  },
});

export default store;

In the above code, we use configureStore to create a Redux store and pass it the cartReducer we defined earlier. This creates a single source of truth for the cart state that can be accessed by any component in our application.

Finally, we'll create a React component that uses the cart state and actions to display and modify the contents of the cart.


import { useSelector, useDispatch } from 'react-redux'
import { addProduct, removeProduct } from './cartSlice'

function Cart() {
  const products = useSelector((state) => state.cart.products)
  const totalPrice = useSelector((state) => state.cart.totalPrice)
  const dispatch = useDispatch()

  const handleAddProduct = (product) => {
    dispatch(addProduct(product))
  }

  const handleRemoveProduct = (productId) => {
    dispatch(removeProduct(productId))
  }

  return (
    <div>
      <h1>Shopping Cart</h1>
      <button
        onClick={() => handleAddProduct({ id: 1, name: 'Product 1', price: 10 })}>
        Add Product
      </button>
      {products.length === 0 ? (
        <p>No products in cart</p>
      ) : (
        <ul>
          {products.map((product) => (
            <li key={product.id}>
              {product.name} - ${product.price}
              <button onClick={() => handleRemoveProduct(product.id)}>Remove</button>
            </li>
          ))}
        </ul>
      )}
      <p>Total Price: ${totalPrice}</p>
    </div>
  )
}

export default Cart

In the above code, we use the useSelector hook to access the cart state and the useDispatch hook to dispatch actions to modify the cart state. We define handleAddProduct and handleRemoveProduct functions that dispatch the addProduct and removeProduct actions respectively. Finally, we render the contents of the cart using the products array and totalPrice value.

This is just a simple example of how Redux and Redux Toolkit can be used to manage the state of a React application. By using Redux Toolkit, we can write less boilerplate code and focus on the application logic, while still benefitting from the power and predictability of Redux.

Source:

Creating docker environment for laravel project with Devilbox

Melih Şahin — Wed, 13 Apr 2022 15:26:40 +0000

In this article, when we want to develop a project locally, or when we download an existing project to our computer and do development, the first problem is to prepare the local environment for the technologies we will use in the project. Although this job may seem simple, unfortunately it is a tiring process. In addition, if we work simultaneously on projects in more than one different infrastructure, the situation can become even more difficult. So what are the solutions we have?

Localhost programs: wamp,mamp ,xampp,laragon etc.
Stack by operating system: LEMP,LAMP,MEAN
Virtualization: vagrant, virtualbox, vmware, valet etc.
docker

The subject of our article is a docker tool that is used to quickly and effectively prepare a development environment for php frameworks and node js-based applications.

What can we do with Devilbox?

With basic docker knowledge, you can create your development environment that is fast and does not tire your computer. Separate environments for an unlimited number of applications.

Features:

We can use the desired versions of our server, programming language parameters without making any adjustments. For example: PHP 7.2 and mysql 5.6 are needed, we just need to activate these versions.
Since we will work in a Docker environment, it does not exploit our computer by using our system resources at the minimum level.
It has automatic dns configuration, it is easy to create virtual domains.
It is easy to enable or disable the necessary modules for php.
It offers this opportunity to those who want to use a visual interface.
It comes with the necessary admin panels for different databases. eg: phpmyadmin, pgadmin etc.
It offers infrastructure for almost every php framework.
It has clear and simple documentation.
Provides reverse proxy.
It allows us to make custom (customized) containers and to use ready-made ones.
It also allows us to easily generate ssl certificates with devilbox cli service and nginx acme application as a 3rd party application.

It's time to make our first application

NOTE: I am using Mac OS as the operating system in this article. However, it can be considered the same for every operating system, except for minor operations. With that in mind, I suggest you try it.

COMMANDS TO KNOW:

Basic git commands
Docker Compose commands (up,stop,kill,rm,logs,ps)

Clone the repo to the directory you want (I chose to add it to the home directory) from the terminal.



git clone https://github.com/cytopia/devilbox

Once the download is complete, go to the Devilbox folder and create the .env file by giving the command.



cp env-example .env

Then by opening the .env file:
Search for the PHP_SERVER line and comment out the php version you want. Comment the others and leave it that way.In the same way, set your database, cache and server in this way.If you are a mac user, the UID and GID values may be different from linux.



id -u
id -g

You need to learn from the terminal with the and commands and change it in the .env file.

Since the directory where the Laravel project we install will run will be "public", we change the "HTTPD_DOCROOT_DIR" part of Devilbox's env file to "public".

For performance on Mac, let's activate this MOUNT_OPTIONS=,cached section.

RUNNING THE DEVILBOX:

Yes, if we have come this far without any problems, it means that the fun part begins. First of all, run the Docker application and confirm that “Docker desktop is runnig” by clicking the Docker icon on your taskbar.

Let's get the containers we set up by typing the following command into the terminal.



docker-compose up -d php mysql

With this command, php, mysql and standard Nginx containers will be built first and then stand up.This process may take some time to install the necessary packages. To see the running containers when the process is complete, type the command:



docker ps

If our terminal output looks like this, it means that our containers have successfully stood up.

If we open our browser and type localhost, we will see the administration panel of devilbox.

You can find many information or perform many operations on this screen.

LARAVEL PROJECT INSTALLATION

First of all, there are a few things we will do before we set up our project. I want to keep my local projects under Desktop/project/ directory. The local location of our projects in Devilbox is under the devilbox/data/www/ directory. If you wish, you can store your projects under this directory or you can use them in different locations like mine. To do this, let's write the following command.



ln -s /Users/username/Desktop/projects/Users/username/devilbox/data/www

Thus, we will be able to keep the project files in the directory that I have determined, not in the standard directory of devilbox.
To install our Laravel project, let's go to the /Users/username/devilbox directory and run “shell.sh” for linux and mac users and “shell.bat” for windows users to log into the container.



./shell.sh

If we see the following screen when we run the command, it means that we have successfully logged into the container.



laravel new example

Let's start setting up our Laravel project named example with the command.
After the installation is complete, if you type "localhost" in the browser and browse to the virtual hosts tab from the devilbox administration panel, you will see the root directory of the project and an error message. We need to save it in the hosts file of our computer as projectname.loc with the ip address of 127.0.0.1. For this, we should do the following by stating that it will differ in operating systems:



sudo nano /etc/hosts

With this command, we open our hosts file, add the following and save and close it.

127.0.0.1 example.loc

If we refresh the Virtual hosts tab, we will see that this time it says "ok" instead of the error message.

Finally, when we open “example.loc” in our browser, we will now see the homepage of our Laravel project.