DEV Community: Musa Yazlık

Google Code Wiki: Understanding Code Might Become Much Easier

Musa Yazlık — Fri, 06 Mar 2026 12:53:42 +0000

Google has introduced a new tool aimed at solving one of the biggest challenges developers face:

🚀 Code Wiki

Project: https://codewiki.google/

In software development, most developers actually spend more time understanding code than writing it.

Especially in cases like:

Large and legacy codebases
Projects with missing or outdated documentation
Joining a new team project
Microservice architectures

Understanding how the system works can sometimes take days or even weeks.

Google’s Code Wiki is designed to tackle exactly this problem.

What is Code Wiki?

Code Wiki is an AI-powered tool that analyzes a repository and automatically turns it into a wiki / documentation platform.

The core idea is simple:

Generate living documentation directly from the code.

This allows developers to understand:

System architecture
Relationships between components
Service flows
Responsibilities of functions

much faster.

How Does Code Wiki Work?

Code Wiki analyzes a repository and performs the following steps:

1️⃣ Scans all files in the repository

2️⃣ Analyzes code relationships

3️⃣ Extracts the system architecture

4️⃣ Generates documentation pages

5️⃣ Produces diagrams

6️⃣ Provides an AI-powered Q&A interface

As a result, a centralized knowledge hub is created for the repository.

Key Features

1. Automatic Documentation

Code Wiki analyzes files and relationships within the project and automatically generates wiki pages.

For example:

Module descriptions
Service structures
API flows
Component relationships

This significantly reduces the need for developers to write manual documentation.

2. AI-Powered Code Querying

The platform includes a Gemini-powered chat interface.

Developers can ask questions like:

Where does the authentication flow start?
Which services are connected to this API?
How does the user creation process work?
Which files call this function?

The AI answers these questions based on the repository analysis.

3. Architecture Diagrams

Code Wiki can automatically generate architectural diagrams such as:

Architecture diagrams
Class diagrams
Dependency graphs
Sequence diagrams

This makes it much easier to understand the overall system structure, especially in large projects.

4. Documentation Updated with Every Commit

One of the classic problems in software projects is outdated documentation.

Code Wiki addresses this by automatically updating documentation whenever the code changes.

With every commit, the documentation is refreshed.

This creates a living documentation system.

Why Is It Important?

One of the biggest costs in modern software projects is:

Developer onboarding time

When a new developer joins a project, the typical process looks like this:

Explore the repository
Read README files
Open multiple files
Try to understand how the system works

This process can take days.

Code Wiki’s goal is simple:

👉 Make the code explain itself

If this approach becomes widespread:

onboarding time could be significantly reduced
legacy code could become easier to understand
documentation debt could decrease

Potential Impact for Developers

Tools like Code Wiki could significantly change software development workflows in the future.

Especially in areas like:

Developer onboarding
Code review processes
Large codebase management
Technical documentation generation

AI-powered code understanding tools are expected to become much more common in the coming years.

Conclusion

There is a well-known truth in software development:

Developers spend more time reading code than writing it.

Google’s Code Wiki project aims to change that.

If the tool delivers on its promise, we might soon say this about documentation:

“The code already explains itself.”

95% of AI-Built MVPs Fail — Here’s What Everyone Ignores

Musa Yazlık — Thu, 12 Feb 2026 12:27:04 +0000

We Can Build an MVP in 3 Days with AI

So Why Do Most of Them Die in 3 Weeks?

Over the last two years, something dramatic happened in software.

We can now:

Build a SaaS MVP in days
Generate full features with AI
Scaffold authentication, dashboards, and payments in hours
Launch publicly within a week

Speed has never been higher.

But here’s the uncomfortable truth:

Success rates haven’t improved.

If anything, the failure rate of AI-built products is brutally high.

Because building fast is not the same as building right.

The Real Problem Isn’t AI

AI can:

Generate components
Create API routes
Scaffold CRUD operations
Integrate third-party libraries

But AI doesn’t:

Design clean domain boundaries
Think about long-term maintainability
Plan scalable folder structures
Control architectural drift
Prevent technical debt accumulation

AI writes working code.

It does not design sustainable systems.

And that difference is everything.

The 3-Week Collapse Pattern

I’ve seen this pattern repeat over and over:

Founder builds MVP with AI
Launches publicly
Gets initial traction
Starts adding features
Codebase grows inconsistently
Performance issues appear
Refactor becomes necessary
Motivation drops
Project slowly dies

The idea wasn’t bad.

The architecture was.

“It Works” Is Not a Strategy

Many AI-generated projects share common issues:

1️⃣ No Architectural Direction

Everything is feature-driven. Nothing is system-driven.

2️⃣ No Clear Boundaries

UI, business logic, and data access are tightly coupled.

3️⃣ Inconsistent Conventions

Each feature follows a different internal pattern.

4️⃣ No Scaling Plan

Works with 100 users. Breaks at 10,000.

5️⃣ Hidden Technical Debt

Shortcuts taken for speed become permanent.

This is why so many AI-built products collapse early.

Not because AI is bad.

Because structure was never defined.

Speed Without Structure Is Fragile

The conversation shouldn’t be:

“Should we use AI?”

The real question is:

“How do we use AI without destroying long-term maintainability?”

The competitive edge today is not who ships fastest.

It’s who survives longest.

Sustainable velocity > raw speed.

What I Noticed as a Developer

Working on freelance and team-based projects, I started noticing something:

The easier it became to generate features,

the more critical the initial foundation became.

If you don’t start with:

Clear architectural boundaries
Scalable folder structure
Defined conventions
Separation of concerns
Production-ready patterns

You will pay for it later.

Every single time.

So I Built a Starter Kit Focused on Sustainability

Instead of another empty boilerplate, I designed something different.

The goal was simple:

AI-friendly structure
Clear domain boundaries
Scalable architecture
Clean and predictable conventions
Production-ready foundation
Designed to grow, not just to launch

Because real speed is not:

Launching in 3 days.

Real speed is:

Still moving fast 6 months later.

If you’re building with AI and want a foundation that won’t collapse under growth:

👉 https://turbostack.pro/

Harnessing the Power of Self-Hosted Supabase on Coolify: A Complete Guide to Server Setup and OAuth Providers Integration

Musa Yazlık — Thu, 09 Jan 2025 09:00:00 +0000

Supabase is one of the great tools you can choose for back-end development in a project. One of its advantages is that you can self-host it on your own server. However, I believe there is a lack of documentation when it comes to configuration. I'm using Coolify, a service similar to Vercel, on my own server, and you can easily set up Supabase with this service.

However, I spent quite a bit of time setting up the auth service, but eventually, I succeeded. In this post, I will guide you through how to configure the auth provider settings for your self-hosted Supabase on Coolify.

Let's get started…

I will proceed assuming that you have already set up and running the Supabase service in Coolify. Once inside the service, click on the "Environment Variables" menu in the left sidebar. Then, click the "Developer view" button.

At the bottom of the opened section, enter the following values. For demonstration purposes, I used Google as the provider. If you want to add GitHub instead, you can replace "GOOGLE" with your desired provider name, such as "GITHUB." You will also need to fill in the value fields according to your own setup.

ENABLE_GOOGLE_SIGNUP=true
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_CALLBACK_URI=https://supabase.domain.com/auth/v1/callback

Now, we're getting to the main point. Since Supabase runs under Docker, we need to make edits in the compose file. To do this, go to the "Service stack" menu and click the button I've highlighted with an arrow. This will open a window where you can make the necessary edits.

In the opened window, find "supabase-auth," which should be on line 193. Go to the "environment" section. Add the following code just above the "realtime-dev:" section at the bottom. Make sure to follow the correct indentation for the code. Afterward, save the file.

      - 'GOTRUE_EXTERNAL_GOOGLE_ENABLED=${ENABLE_GOOGLE_SIGNUP}'
      - 'GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}'
      - 'GOTRUE_EXTERNAL_GOOGLE_SECRET=${GOOGLE_CLIENT_SECRET}'
      - 'GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI=${GOOGLE_CALLBACK_URI}'

Now, one final adjustment is needed. On the "Environment Variables" page, change the value of the "SERVICE_FQDN_SUPABASEKONG" field to the callback URL you want to redirect to, and don't forget to save it. For example: "https://domain.com/auth/callback".

Finally, we need to reset the service. Once the service restarts, the auth provider you want to use in Supabase will be ready to go.

This brings us to the end of this guide. I've tried my best to explain how to add and set up auth providers for the Supabase service you've set up on Coolify.

If you need paid support in this area or for web development, you can contact me through the addresses below. See you in the next post…☺️

✉️ E-mail: support@musayazlik.com
Fiverr: https://www.fiverr.com/musayazlik

Next.js != Full Stack

Musa Yazlık — Thu, 06 Jul 2023 20:21:56 +0000

I thought I was developing a full-stack application with Next.js, but I wasn't. There were settings to add images and videos in the administration panel. In development mode, these features work without any problems, but in production mode, images and videos added later do not work. So they are not shown in the browser. It is necessary to restart the project. You need a 3rd party service or an additional backend structure for image and video upload.

So we can say that Next.js ≠ Full Stack application.

Why are the API calls made in useEffet()?

Musa Yazlık — Tue, 14 Feb 2023 16:33:06 +0000

In general, I see that API call operations are done in the useEffect hook in projects made with react. As a result of my research, I saw that API call operations are not recommended to be done in useEffect(). Why do developers make API calls in useEffect?

Where do you guys make the API calls?

How To Make Pagination In React Without Using Npm Package?

Musa Yazlık — Thu, 24 Nov 2022 13:59:26 +0000

Hello everyone. In this article, I will be explaining how you can make pagination in your React projects using only Javascript and React Hooks without using an npm package like “react-paginate“. Let’s get started. 😄😄

When you search for pagination with React in Google, you will see many resources, but when you enter the resources, you will see that pagination is usually done using an npm package. But in this article, I will be telling you how you can pagination without using an additional npm package.

What is npm?

Before starting pagination, let’s take a look at what npm is. Npm is a package management system developed for the Javascript programming language and accepted as a standard by Node.js . In this package system, there are packages that meet all kinds of software needs.

Likewise, there are packages such as react-paginate, react-js-pagination and react-responsive-pagination that meet your pagination needs in your (https://en.musayazlik.com/category/software/javascript/react/) projects. We will be paginating without using these packages.

Preliminary Preparation of the Structure

Let’s first create a react project with the following command.

npx create-react-app react-pagination

Then we will do a little cleanup only in App.js and App.css files. App.js file will be as follows. You can delete all css codes in the App.css file.

import './App.css'

function App() {
  return (
    <div className='App'>

    </div>
  )
}

export default App

Now we have created our project and structure without pagination coding. After that, we will now start making pagination.

Pagination without Npm Package

Before we start, we will be using “https://jsonplaceholder.typicode.com/posts” as the API source. From here we will receive 100 post data. Depending on the number we want, we will show the posts. At the same time, depending on it, the number of pagination pages will be created. Now let’s create the statuses.

Creation of Statements

We will create two states here. One will keep the data coming from our API as an array. The other will hold the pagination values. Pagination state will hold currentPage and dataShowLenght values as an object.

    const [data, setData] = useState([]);
    const [pagination, setPagination] = useState({
        currentPage: 1,
        dataShowLenght: 3,
    });

currentPage : Will specify the current pagination page.
dataShowLenght : It will specify the number of posts to be shown on the page.

Data Retrieval from Api

With the following coding, we received posts data from “https://jsonplaceholder.typicode.com/posts” and transferred it to the data state.

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then((res) => res.json())
            .then((data) => setData(data));
    }, []);

Determining the Total Number of Pages

There is a simple formula to determine the number of pagination pages that will occur. When we divide the number of data by the number of data to be displayed, we find the number of pages that will occur. If the resulting value is a decimal number, we need to round this number to the next higher number.

The logic here is to get the correct totalPage number that will show all the data. We add the remaining values to the last page.

For example, when there are 10 content, when we want to show them as three, we will have 1 left and we will show it alone on the next page. In this way, 4 pagination pages are created for 10 content. We will be using the Math.ceil() method for this. This method rounds the decimal number to the next higher number. If the result is 3.11, it will round to 4. The first 3 pages will show 3 data and the last page will show 1 data.

const totalPage = Math.ceil(data.length / pagination.dataShowLenght);

Above, we divided the number of data by the number of dataShowLenght to be displayed, rounded it to the next higher number if it is decimal with the Math.ceil() method and assigned it to the totalPage variable.

Functions to Run When Clicking Pagination Buttons

Here we will be looking at the functions prepared for the functionality of the pagination buttons to be created. We will create 3 functions, Numbers, Next and Prev.

Function that changes CurrentPage when pressing numbers

In the function below, the currenPage value is replaced with the incoming page value. dataShowLenght value remains the same.

    const paginationPage = (page) => {
        setPagination({ ...pagination, currentPage: page });
    };

Function Providing CurrentPage Change When Next Button is Pressed

In the function below, the currenPage value increases the currentPage value by one. In the if query, if the pagination.currentPage value is less than the totalPage value, it will increase the currentPage value by 1 each time. But if it is equal or greater, it will assign the totalPage value to the currentPage value.

What we want to do here is to make the next button non-functional when the last pagination page is reached. dataShowLenght value will remain the same.

    const paginationNext = () => {
        if (pagination.currentPage < totalPage) {
            setPagination({ ...pagination, currentPage: pagination.currentPage + 1 });
        } else {
            setPagination({ ...pagination, currentPage: totalPage });
        }
    };

Function Providing CurrentPage Change When Prev Button is Pressed

In the function below, the currenPage value reduces the currentPage value by one. In the if else query, if the pagination.currentPage value is greater than 1, it will decrease the currentPage value by 1 each time.

But if it is equal or less, it will assign a value of 1 to the currentPage value. What we want to do here is to make the prev button non-functional when the first pagination page is reached. dataShowLenght value will remain the same.

    const paginationPrev = () => {
        if (pagination.currentPage > 1) {
            setPagination({ ...pagination, currentPage: pagination.currentPage - 1 });
        } else {
            setPagination({ ...pagination, currentPage: 1 });
        }
    };

Since the above 3 functions change the pagination state value, it will cause the component to render again. Now let’s look at the code in return and try to understand it.

Return Field Codes

The following codes contain all the codes in the return field in the component.

You can visit my website for more.

2022 – Javascript Array Methods: Find()

Musa Yazlık — Wed, 16 Nov 2022 17:35:34 +0000

In the previous blog post, we learned the map method, which is one of the most used methods among Javascript array methods. In this article, we will continue with array methods and learn the find array method. Let’s get started.

What is the Javascript find() Method?

Find() method is a javascript array method that returns the first value it finds after searching the array based on the specified condition. If no element suitable for the condition is found, it will return the undefined value.

Now let’s look at the usage structure of the find method

array.find(function(currentValue, index, array),thisValue)

currentValue : Specifies the value of the element being processed.
index : Specifies the index value of the processed element.
array : Specifies the array value being processed.
thisValue : Specifies the this value to be used when the specified operation is performed, i.e. when the callback function is executed.

Important Warnings

The Find() method does not modify the default array. It searches the array and returns the first value it finds.
The find() method will not work on arrays with no elements.
If the searched element is not found in the array, the result will be returned as undefined.

EXAMPLES

Find A Standard Example

Let’s write the code that finds the first element with a number value greater than 17 in an array of numbers using the find() method.

const numberArray = [2, 5, 10,15,17,54,18,19];

const findElement = numberArray.find((element) => element > 17);
console.log(findElement);

Output;

Yes, as you can see in the output below, it took the first value greater than 17 in the array and showed us the value 54 as output. It processes each value one by one and if the result is true, it returns that value and ends the process. If false, it moves on to the next element. When it examines the last element, if the operation is not true, it will return the result as undefined. This is the main logic of the Find method.

Now let’s see an example of how frontend developers use the find() method in react projects in their daily work life.

Find Method Example Project Usage

In the endpoint where there are blog posts, the fields where the user will be displayed in general are also sent in the same endpoint. But in jsonplaceholder, it is divided into two endpoints as posts and users and an association is made between them. A user can have many posts, which means one-to-many associations. If you are asking how to use the find method here, let’s move on to it 😁

Let’s first understand the following codes. We have created a data state for posts. We also create a state for users. Then we transfer the data from the “https://jsonplaceholder.typicode.com/users” endpoint to the users state using fetch. Now we have both posts data and users data.

    const [data, setData] = useState([]);
    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then((response) => response.json())
            .then((resPost) => {
                setData(resPost);
            });
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((response) => response.json())
            .then((resUsers) => {
                setUsers(resUsers);
            });
    }, []);

Now how will the one-to-many association be here. If you have noticed, there is a field called userId in each object in the posts data. Here, using this field, we will make an association with the users data coming from the users endpoind. Now we are moving on to it…

    const usernameValue = (id) => {
        return users.find((user) => user.id === id).username;
    };

    return (
        <div id="content">
            <h1>Find</h1>
            <div className="card">
                {data &&
                    data.map((item) => {
                        return (
                            <div className="card-item" key={item.id}>
                                <span className="card-username">{usernameValue(item.userId)}</span>
                                <h2 className="card-title">{item.title}</h2>
                                <p className="card-description">{item.body}</p>
                            </div>
                        );
                    })}
            </div>
        </div>
    );

Above we created a function called usernameValue. Let me explain what exactly this function will do. While printing the posts data in Return, I also want to print the name of the user who prepared that post. I send the userId value in the post to the usernameValue function. Then the usernameValue function returns the first value whose user.id is equal to the id I sent by using the find method in users for me.

This value is all the data value of that user. But what I need is only the username field value, so I add the username value to the end of the find method. In this way, the usernameValue function returns the username value of the user who wrote that post depending on the id sent to me. The explanation was a bit complicated, but I hope it was understood.

I am also sharing the final version of the code with you.

import { useEffect, useState } from "react";

const Find = () => {
    const [data, setData] = useState([]);
    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then((response) => response.json())
            .then((resPost) => {
                setData(resPost);
            });
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((response) => response.json())
            .then((resUsers) => {
                setUsers(resUsers);
            });
    }, []);

    const usernameValue= (id) => {
        return users.find((user) => user.id === id).username;
    };

    return (
        <div id="content">
            <h1>Find</h1>
            <div className="card">
                {data &&
                    data.map((item) => {
                        return (
                            <div className="card-item" key={item.id}>
                                <span className="card-username">{usernameValue(item.userId)}</span>
                                <h2 className="card-title">{item.title}</h2>
                                <p className="card-description">{item.body}</p>
                            </div>
                        );
                    })}
            </div>
        </div>
    );
};

export default Find;

#content {
    width: 100%;
    height: 100%;
}

.card-item {
    width: 700px;
    min-height: 200px;
    height: auto;
    border: 2px solid #ccc;
    box-shadow: 0 2px 10px 2px #ccc;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
}

.card-username {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background-color: #e74c3c;
    padding: 10px 20px;
    border-radius: 10px;
}

.card-title {
    font-size: 24px;
    font-weight: 800;
    color: ;
}

.card-description {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: #333;
}

Remember, if you are looking for 1 unique element in an array, the find method is one of the best methods. But if you want to see all values conditionally in the search result, that is, if you want to get all numbers greater than 17 as in the standard example above, I recommend looking at the filter method for this.

The End

In this article, I have given you information about the find method, which is a Javascript array method. You have also learned how to use this method in projects using the React library. I wish you to use the find method in your projects a lot and I hope to see you in my next blog post. Goodbye.

Source : https://en.musayazlik.com/2022-javascript-array-methods-find/

🆕What's new with Bootstrap Icons v1.10.0🆕

Musa Yazlık — Sat, 12 Nov 2022 09:53:31 +0000

Bootstrap Icons library continues on its way with the v1.10.0 version with the addition of approximately 150 icons. This version includes the addition of new similar icons such as person, building and database icons, as well as new brands, rockets, road signs, spheres and much more. Let's see exactly what kind of icons have come to the bootstrap Icons library, which currently has over 1,900 icons, with the v1.10.0 version.

150 icons were added to the Bootstrap Icons library.

With the Bootstrap Icons library v1.10.0 version, 150 new icons were added to the library. You can take a look at the added icons below.

Here are some features for the newly added icons;

22 new person icons have been added.
26 new house icons have been added.
24 new building icons have been added.
22 new database icons have been added.
24 new street sign icons have been added.
New globe icons have been added.
New electric vehicle, taxi, bus and scooter transport icons have been added.
New rocket icons have been added.
And many more icons were added. 😁

Minor Adjustments Were Made To The Documentation.

Brand and Brands category names have been changed to Brand only.
The labels on the various icon pages for additional aliases have been updated again.

Bootstrap Icons Project Setup

Installation with npm package manager;

npm i bootstrap-icons

Installation with Composer;

composer require twbs/bootstrap-icons

You can download version files from GitHub, or you can download only SVGs and fonts (without the rest of the repository files).

Bootstrap Icons Included in Figma Community.

The Bootstrap Icons library is now live in the Figma Community. Now you designers will be able to include Bootstrap icons in your projects through the Community and use them easily.

In this article, I have given you information about the innovations that came with Bootstrap Icons v1.10.0. See you in my next blog post…

Go to Bootstrap Icons

Content Source : https://en.musayazlik.com/whats-new-with-bootstrap-icons-v1-10-0/

2022 – Javascript Array Methods: ForEach()

Musa Yazlık — Fri, 11 Nov 2022 07:34:09 +0000

Hello, in this article, I will be giving you information about forEach, a javascript array method. At the same time, we will be reinforcing it with examples. In addition, I will also be providing examples of using this method in real life with React, a javascript library.

Before entering the subject, I have not come across many blog posts that provide examples while explaining these methods, but I have not come across a blog post that explains with examples exactly where and how they are used in a real project. In this blog post and in my next blog posts, I will be explaining these methods to you by providing examples of exactly how these methods are used in a real project. Let’s start…

What is the Javascript Array Method ForEach()?

It ensures that each element in the array goes through the defined operation. But map() does not return a value, an array, like the array method.

value : The value of the element that is processed in the loop.
index : The index number of the element in the loop that passes through the operation. (We do not forget that arrays start from zero. 😊)
data : The array to which the element in the loop belongs.

WARNING : If the given array is empty, forEach will not work. Also, if there is an empty value in the array, it will be ignored.

ForEach Standard Example

Let’s reinforce the forEach method with a standard example. If we want to replace the elements of an array containing numbers from 1 to 9 with 2 times, how can we do it? Let’s do it with forEach.

    let data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    data.forEach((value, index, data) => {
        data[index] = value * 2;
    });

    console.log(data);

Now if I explain the codes above. In the “data[index] = value * 2;” section, we multiply the value of the element in the loop by 2 and replace it with the new value. In this way, we have replaced the value of each element in the data with a value that is twice the value.

Real Project Use of ForEach

In React projects, the map() method is generally used to embed a json data from the api into html. But again, I will show you the use of the forEach method on React on a similar coding example.

import { useEffect, useState } from "react";

const ForEach = () => {
    const [data, setData] = useState([]);

    const names = []; // names array

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((response) => response.json())
            .then((res) => {
                setData(res);
            });
    }, []);

    data?.forEach((value, index) => {
        names.push(
            <h3 key={index} className="name">
                {value.username}
            </h3>
        );
    });

    return (
        <div>
            <h1>ForEach</h1>
            <div>{names}</div>
        </div>
    );
};

export default ForEach;

In the above coding, we pull our data from the Api using the fetch method via jsonplaceholder. But we want to do something special for the usernames of the data coming from this data. So we created a new array called names, in which we will be holding React elements. Finally, we print the names array in return.

In a real project, the forEach array method is used in this way. But as I said, the map() method is used in general.

In this article, we have learned how to use forEach, a javascript array method, in a standard and real project. See you in my next blog post…

Content Source: https://en.musayazlik.com/2022-javascript-array-methods-foreach/

What Is Context Api? Why Use Context Api? – 2022

Musa Yazlık — Thu, 10 Nov 2022 10:26:55 +0000

Hello everyone, in this article I will be giving you information about Context Api, a state management tool in React . Before moving on to Context Api, I want to give a little information about state, props and state management tools.

What is State?

We call state the data that specifies, qualifies and can be manipulated the state of a component. Let’s create an example state.

Creating State in Function Components

To create state in function components, it is generally created using the useState Hook in React.


import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Creating State in Class Components

Let’s see how to create a state with a class structure.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Above we have learned what state is and how it is used in function and class components. Now let’s look at what props is.

What is Props?

It is a method of transferring a state created in the parent component to a child component. This transfer phase is also called Prop Drilling. Let’s look at using props with a simple props example.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" /> 
      <Welcome name="Cahal" />    
      <Welcome name="Edite" />    
    </div>
  );
}

Welcome is our child component. When we add the welcome child component to the app, we create a props with the name attribute. So we can send data to the child component with the help of props. Yes, we have learned what props is. Now let’s take a look at the most used state management tools.

Widely used State Management Tools

Context Api (A state management tool ideal for small projects)

Redux (Redux Toolkit) (A state management tool used in large projects)

Recoil

Jotai

Rematch

Zustand

Hookstate

Yes, we have learned state, props and some of the most used state management tools above. Now let’s look at the context api state management tool, which is our main topic.

What is Context Api?

When we first created a react project, we could move our states to a sub-component with the help of props. But when the project grew or there were 10-20 components nested inside, our work was getting very difficult. After a while, we were unable to do state management. Here, context api, one of the state management tools, comes into play. Context Api helps us to manage the states we have created. But how does it do this?

Context API takes the created components into a container provider. In this way, a state created in a parent component can be transferred to the lowest component without being transferred to a child component with props.

Without Context api, we had to transfer our statet to the child component as in the following coding.

import React, { useState } from "react";
import "./App.css";

const App = () => {
    const [title, setTitle] = useState("Hello World");
    return <HeaderContainer title={title} />;
};

const HeaderContainer = (props) => {
    const { title } = props;
    return (
        <HeaderBackground>
            <HeaderTitle title={title} />
        </HeaderBackground>
    );
};

const HeaderBackground = (props) => {
    return <div className="header-image">{props.children}</div>;
};

const HeaderTitle = (props) => {
    const { title } = props;
    return <p>{title}</p>;
};

export default App;

Now let’s prepare this structure step by step with context api.

1-) Let’s create a file named context.jsx in the src file of the project. Let’s add the following codes into this file. Then we will be importing this file in every component where we will use the contenxt structure.

import { createContext, useContext } from "react";

const context = createContext();

export { context, useContext };

2-) Now let’s edit the state management done with the props above and do the state management with context api.

import React, { useState } from "react";
import "./App.css";
import { MainContext, useContext } from "./context/context";

const App = () => {
    const [title, setTitle] = useState("Hello World");
    return (
        <MainContext.Provider value={{ title, setTitle }}>
            <HeaderContainer />
        </MainContext.Provider>
    );
};

const HeaderContainer = () => {
    return (
        <HeaderBackground>
            <HeaderTitle />
        </HeaderBackground>
    );
};

const HeaderBackground = (props) => {
    return <div className="header-image">{props.children}</div>;
};

const HeaderTitle = () => {
    const { title } = useContext(MainContext);
    return <p>{title}</p>;
};

export default App;

Yes, I transferred our title statet from App component to HeaderTitle component using Context api. When the coding was not a nested props structure, our codes became more readable and our work became easier. We can do a little more editing on the value value used with MainContext.Provider in App. We can keep the values in a StateValue value. We can transfer that value to the value value. I think the coding done in this way will be cleaner 😊

const App = () => {
    const [title, setTitle] = useState("Hello World");

    const StateValue = {
        title,
        setTitle,
    };
    return (
        <MainContext.Provider value={StateValue}>
            <HeaderContainer />
        </MainContext.Provider>
    );
};

In this article, I have given you information about state, props and Context Api which is a state management tool. See you in my next blog post. Take care of yourselves. 😁

Content Source : https://en.musayazlik.com/what-is-context-api-why-use-context-api-2022/

Making Self-Writing And Erasing Text Animation – 2022

Musa Yazlık — Fri, 04 Nov 2022 04:38:00 +0000

Hello everyone. If you have examined it, you have noticed that there is a self-writing text animation in many portfolio themes. In articles such as I am developer or I am desinger, you have seen that the developer and desinger part is written and deleted by itself. In this article, I will give you information about how to make this animation effect using html, css and javascript.

First, let’s write the html codes of our text animation.


 html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Text Animations</title>
  </head>
  <body>
    <h5>
      I am a
      <span
        class="txt-rotate"
        data-period="2000"
        data-rotate='[ "web designer.", "wannabe developer.", "Photoshop lover." ]'
      ></span>
    </h5>
  </body>
</html>

The I am a part in h5 is the part that will remain fixed as our text. The part in the span tag will be the text animation part that writes and deletes itself.

data-period : The attribute that you can specify the period for writing and deleting the text.
data-rotate : Attribute that provides a list of posts to be written and deleted.

That was the html part.

Now let’s move on to the css part.


 css
h5 {
  font-weight: 200;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 1.9em;
  color: #000;
  padding: 0;
  line-height: 0.8em !important;
  text-transform: none;
  font-weight: 600;
}

h5 span {
  color: red;
  animation-delay: 2s;
  font-weight: 600;
}

.txt-rotate > .wrap {
  border-right: 0.08em solid #666;
}

After making a small edit in the css part, we now come to the javascript part, which is the father part of the job. 😁

Let’s do the JavaScript coding.


 javascript
let TxtRotate = function (el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = "";
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function () {
  let i = this.loopNum % this.toRotate.length;
  let fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">' + this.txt + "</span>";

  let that = this;
  let delta = 300 - Math.random() * 100;

  if (this.isDeleting) {
    delta /= 2;
  }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === "") {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function () {
    that.tick();
  }, delta);
};

window.onload = function () {
  let elements = document.getElementsByClassName("txt-rotate");
  for (let i = 0; i < elements.length; i++) {
    let toRotate = elements[i].getAttribute("data-rotate");
    let period = elements[i].getAttribute("data-period");
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
};

Yes, after writing the javascrip code above, let’s run our index.html file in a browser and test it.

Animation test result

Our animation is working the way we want. Now you can customize this self-writing and erasing text animation by changing the data in the data-period and data-rotate attributes. In this article, I have explained to you how to make a self-writing and deleting text animation, see you in my next blog post. If you want to be notified of new content instantly, you can confirm to receive notifications from the bottom left corner.

Content Source: https://en.musayazlik.com/making-self-writing-and-erasing-text-animation/

Code Source : https://codepen.io/LPwd/pen/bGvrmzK

What is the structure of a scss mixin and how to create it?

Musa Yazlık — Wed, 02 Nov 2022 11:48:54 +0000

We frontend developers do most html css coding while coding in general. When coding, instead of writing repeated structures over and over again, we prepare them as a component structure and include them in the coding, that is, we do the inclusion process. We usually use sass or scss tools when coding css. Within these tools, there is a mixin structure, a structure where we can create repeated structures.

What is scss mixin?

When css coding, we repeat a lot of coding, for example, we use the following codes to combine objects in a box in the middle.

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

Creating a mixin called BoxCenter and including it when we need to create these codes will make our job a little easier than rewriting these codes many times. In addition, it will minimize the time we lose in writing the same codes.

Mixin Structure and Creation

Creating and using mixin in scss is actually very simple. If a function is created in a programming language, a mixin structure can be created in a similar structure in scss.

@mixin isim(parameter or parameters){
   // Css Code
}

You can create a mix with or without parameters. This is completely up to you. I will be explaining both uses.

Creating and using a mix without parameters

We create a mixin called BoxCenter. Then we include the mixin we created " @inculude BoxCenter() " in the .box. That's how simple it is.


@mixin BoxCenter() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  color: red;
  @include BoxCenter();
}

Output

Let's look at the css output. While reading this article, I assume that you know how to compile scss and get css output.


.box {
  width: 100px;
  height: 100px;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

Creating and using a parameterized mixin

In general, it is more preferred to create mixins with parameters.


@mixin BoxCenter($d, $jc, $ai) {
  display: $d;
  justify-content: $jc;
  align-items: $ai;
}

.box {
  width: 100px;
  height: 100px;
  color: red;
  @include BoxCenter(flex, start, end);
}

Output

The output of the above code will be as follows.


.box {
  width: 100px;
  height: 100px;
  color: red;
  display: flex;
  justify-content: start;
  align-items: end;
}

Yes, in this blog post you have learned how to create and use mixins with or without parameters in scss. I agree that you will definitely create your own mixins while using scss. 😁 Goodbye to see you in my next blog post.

DEV Community: Musa Yazlık

Google Code Wiki: Understanding Code Might Become Much Easier

What is Code Wiki?

How Does Code Wiki Work?

Key Features

1. Automatic Documentation

2. AI-Powered Code Querying

3. Architecture Diagrams

4. Documentation Updated with Every Commit

Why Is It Important?

Potential Impact for Developers

Conclusion

95% of AI-Built MVPs Fail — Here’s What Everyone Ignores

We Can Build an MVP in 3 Days with AI

So Why Do Most of Them Die in 3 Weeks?

The Real Problem Isn’t AI

The 3-Week Collapse Pattern

“It Works” Is Not a Strategy

1️⃣ No Architectural Direction

2️⃣ No Clear Boundaries

3️⃣ Inconsistent Conventions

4️⃣ No Scaling Plan

5️⃣ Hidden Technical Debt

Speed Without Structure Is Fragile

What I Noticed as a Developer

So I Built a Starter Kit Focused on Sustainability

Harnessing the Power of Self-Hosted Supabase on Coolify: A Complete Guide to Server Setup and OAuth Providers Integration

Next.js != Full Stack

Why are the API calls made in useEffet()?

How To Make Pagination In React Without Using Npm Package?

What is npm?

Preliminary Preparation of the Structure

Pagination without Npm Package

Creation of Statements

Data Retrieval from Api

Determining the Total Number of Pages

Functions to Run When Clicking Pagination Buttons

Function that changes CurrentPage when pressing numbers

Function Providing CurrentPage Change When Next Button is Pressed

Function Providing CurrentPage Change When Prev Button is Pressed

Return Field Codes

You can visit my website for more.

2022 – Javascript Array Methods: Find()

What is the Javascript find() Method?

Important Warnings

EXAMPLES

Find A Standard Example

Output;

Find Method Example Project Usage

The End

🆕What's new with Bootstrap Icons v1.10.0🆕

150 icons were added to the Bootstrap Icons library.

Minor Adjustments Were Made To The Documentation.

Bootstrap Icons Project Setup

Bootstrap Icons Included in Figma Community.

2022 – Javascript Array Methods: ForEach()

What is the Javascript Array Method ForEach()?

ForEach Standard Example

Real Project Use of ForEach

What Is Context Api? Why Use Context Api? – 2022

What is State?

Creating State in Function Components

Creating State in Class Components

What is Props?

Widely used State Management Tools

What is Context Api?

Making Self-Writing And Erasing Text Animation – 2022

First, let’s write the html codes of our text animation.

Now let’s move on to the css part.

Let’s do the JavaScript coding.

Animation test result

What is the structure of a scss mixin and how to create it?

What is scss mixin?

Mixin Structure and Creation

Creating and using a mix without parameters

Output

Creating and using a parameterized mixin

Output

https://en.musayazlik.com/what-is-scss-mixin-how-to-create-it/