# Serhat Varlı

> Senior Front End Developer — Gaziosmanpaşa / İstanbul. I design and code beautifully simple things, and I love what I do. It's as simple as that!

## Contact
- Website: https://www.serhatvarli.com/
- Email: info@serhatvarli.com
- Phone: +905012076753
- Location: Gaziosmanpaşa / İstanbul
- facebook: https://tr-tr.facebook.com/serhat.varli1
- twitter: https://x.com/serhatvarli1
- instagram: https://www.instagram.com/serhatvarli1/
- linkedin: https://tr.linkedin.com/in/serhat-varli1

## About
Since starting my freelance and full-time front end developer journey in 2013, I have worked remotely for agencies and software companies, taken part in many projects, and worked as a front end developer for companies large and small.

## Specializations
- **Website Design**: I created digital products from unique ideas using Figma and Framer.
- **Development**: I build and launch websites with PHP, MVC, Vue.js, React or WordPress.
- **SEO/Marketing**: I increase your website's traffic with an SEO-friendly structure.

## Skills
JavaScript, jQuery, ReactJS, VueJS, AngularJS, NodeJS, npm, Git, Grunt, Gulp, HTML5, CSS3, Sass, Less, GitLab, GitHub, Plesk, cPanel, MySQL, AWS, PHP, MVC, WordPress, Figma

## Experience and education
- 2023–present: Senior Front End Developer, Misli.com
- 2017–2023: Senior Front End Developer, RND E-Ticaret
- 2016–2017: Front End Developer, Hiperaktif Digital Agency
- 2016–2016: Front End Developer, Creaturk Interactive
- 2015–2016: Front End Developer, Beycon
- 2013–2015: Front End Developer, ProSmart Yazılım Hizmetleri
- 2013–2015: Kırklareli University, Computer Programming

## Blog articles (English)

### What Are State and Lifecycle in React?

URL: https://www.serhatvarli.com/blog/what-is-state-and-lifecycle
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

"State" and "lifecycle" are two important concepts in React and play a key role in building modern web applications.

1. **State:**

- **Definition:** State is the data a React component holds at a given moment. It can change as a result of user interaction or over time.

2. **Example:** Think of a form component: the text the user types can be kept in the component's state, so its appearance and behaviour can follow the input.

3. **How it works:** In class components, state is usually initialised in the constructor and updated with **this.setState**. Changing the state re-renders the component.

- **Lifecycle:**

1. **Definition:** Lifecycle methods are special methods called at different stages of a component's life, from creation to removal. They control how the component behaves and when it updates.

2. **Example methods:**

**componentDidMount**: Called right after the component is added to the DOM. Typically used for API calls and subscriptions.

3. **componentDidUpdate**: Called when the component updates (for example after receiving new props or a state change).

4. **componentWillUnmount**: Called right before the component is removed from the DOM; clean-up such as cancelling subscriptions happens here.

- **How it works:** Lifecycle methods are defined in the component class, and React calls them automatically at the right moment.

Together these two concepts are cornerstones of component-based development and give you the flexibility to build dynamic, interactive interfaces: state manages a component's inner data, lifecycle methods manage its life.

## In function components: useState and useEffect

**this.setState** and the lifecycle methods above belong to class components. Since React 16.8, **Hooks** let function components do the same: state is kept with **useState**, and **useEffect** covers the work of **componentDidMount**, **componentDidUpdate** and **componentWillUnmount**.

```jsx
import { useState, useEffect } from 'react';

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    // componentDidMount: start the timer
    const timerId = setInterval(() => setDate(new Date()), 1000);
    // componentWillUnmount: clear the timer
    return () => clearInterval(timerId);
  }, []);

  return <h2>Time: {date.toLocaleTimeString('en-GB')}</h2>;
}
```

The clock updates every second. The function returned from **useEffect** runs when the component is removed and clears the timer.

### What Are Components and Props?

URL: https://www.serhatvarli.com/blog/what-are-components-and-props
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

In React, components and props are the core concepts that let you build an application from independent, reusable pieces. Here is a closer look at both:

## Components

1. **Definition**: Components are the independent, reusable pieces that make up the user interface in React. A React application usually consists of many components.

2. **Types**:

- **Function components**: Defined as JavaScript functions; they receive inputs called props and return the React elements to display. Example: **function Welcome(props) { return <h1>Hello, {props.name}</h1>; }**

3. **Class components**: Defined as JavaScript classes; their **render** method returns the React elements to display. Example: **class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }**

- **Reuse and composition**: Components make code reusable; small components can be combined into bigger ones.

## Props

1. **Definition**: Props pass data into components. A component can read the props it receives but must not change them (they are read-only).

2. **Usage**: Passing a prop looks like adding an attribute to an HTML element. Example: in **<Welcome name="Sara" />**, **name** is a prop.

3. **Communication between components**: Data flows from parent to child components through props.

4. **Reading props**: Function components receive props as the function's parameter; class components read them from **this.props**.

## Example

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahit" />
      <Welcome name="Eda" />
    </div>
  );
}
```

Here the **Welcome** component is used three times, each time with a different **name** prop. The **App** component combines them into a single UI.

Components and props let you build React applications in a modular way, so even complex user interfaces stay manageable and easy to understand.

### What Does Rendering Elements Mean in React?

URL: https://www.serhatvarli.com/blog/what-is-rendering-elements
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

In React, "rendering elements" is the process of drawing React elements on the screen to show them to the user. React elements are lightweight, plain objects that usually describe HTML elements. Since React 18 they are placed in the DOM with the **render()** method of a root created with **createRoot**. Here is the process in more detail:

1. **Creating an element**: In React everything starts as an element. Elements can describe HTML tags such as **div**, **span** or **button**, or your own components. For example, **const element = <h1>Hello, world!</h1>;** creates an **h1** element.

2. **Rendering the element**: To show an element, you first create a root for the target DOM node and then render the element into it. For example: **const root = ReactDOM.createRoot(document.getElementById('root')); root.render(element);**. This places **element** in the DOM node whose **id** is **root**.

3. **Updates**: React elements are immutable; once created, their children and attributes cannot change. To update the UI you create a new element and render it again with **root.render()**. React compares the previous and the new elements and applies only the DOM updates that are needed.

4. **Virtual DOM**: React works out changes on a "virtual DOM" before touching the real DOM. This improves performance, because working with the real DOM is expensive; React finds what changed and updates the real DOM as efficiently as possible.

5. **Component-based approach**: React encourages building UIs from independent, reusable components, each managing its own state and rendering on its own.

This is a basic summary of rendering elements in React — the foundation every React application is built on, and what makes dynamic, interactive interfaces easy to build.

### What Is JSX?

URL: https://www.serhatvarli.com/blog/what-is-jsx
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

JSX is a syntax extension that adds HTML-like syntax to JavaScript. It lets developers describe user interfaces in a more intuitive and readable way, acting as a bridge between JavaScript and HTML when defining the structure of React components.

Key features of JSX:

1. **HTML-like syntax**: JSX looks like HTML, so building interfaces feels like writing HTML tags.

2. **JavaScript expressions**: Any JavaScript expression can be used inside JSX by wrapping it in **{}**, which makes dynamic content easy to show.

3. **Component structure**: JSX describes the structure of React components, and components themselves can be used in JSX like HTML tags.

4. **Attributes and events**: JSX supports attributes (props) and events, so you can pass data to components and handle user interaction.

5. **Readability and maintenance**: Keeping a component's structure and behaviour in one place makes the code easier to read and maintain.

A simple JSX example:

```jsx
const element = <h1>Hello, world!</h1>;
```

This is a JSX expression containing the text "Hello, world!" in an **h1** heading. JSX is only a syntax: browsers cannot run it directly, so before a React application is published, a compiler (usually Babel) turns it into plain JavaScript.

### React Hello World!

URL: https://www.serhatvarli.com/blog/react-hello-world
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

"Hello World" in React is the first step of building a simple application with the library. React is a popular JavaScript library for building user interfaces, and a "Hello World" program is the classic first step when learning a new language or technology.

A React "Hello World" usually involves these steps:

1. **Adding React**: The React and ReactDOM libraries are added to the project — either with **<script>** tags in an HTML file or installed with **npm** or **yarn** in a Node.js project.

2. **Creating a root DOM element**: The HTML contains a root element (**root**), usually a **<div>**, where React renders the components.

3. **Writing a component**: In its simplest form a component describes what to show. In "Hello World" it is a function that returns the text "Hello, World!".

4. **Rendering with ReactDOM**: **ReactDOM.createRoot()** creates a React root for the DOM element, and **root.render()** renders the component into it.

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloWorld />);
```

This code shows the heading "Hello, World!" on the page — the basic use of React and a good starting point for beginners.

> **Note:** Before React 18, components were rendered with **ReactDOM.render(<HelloWorld />, document.getElementById('root'))**. That method was deprecated in React 18 and removed in React 19.

### What Is a Web Component?

URL: https://www.serhatvarli.com/blog/what-is-a-web-component
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

A **Web Component** is a browser standard for creating reusable HTML elements that work natively and do not depend on any framework. It consists of three main technologies:

- **Custom Elements:** define your own HTML tag (for example **<greeting-card>**) with **customElements.define()**.

- **Shadow DOM:** isolates the element's internal structure and styles from the rest of the page.

- **HTML Templates:** reusable markup is defined with **<template>** and **<slot>**.

## How it differs from a Vue component

Vue components work only inside a Vue application. A Web Component can be used in a plain HTML page, in a React or Angular application, or with no framework at all. Vue offers the **defineCustomElement** function to turn a component into a Web Component (see [What Is a Vue Custom Element?](https://www.serhatvarli.com/blog/what-is-a-vue-custom-element)).

```javascript
import { defineCustomElement } from 'vue';

// Turn a Vue component into a Web Component class
const GreetingCard = defineCustomElement({
  props: { name: String },
  template: `<p class="card">Hello, {{ name }}!</p>`,
  styles: [`.card { padding: 12px 16px; border-radius: 8px; background: #28e98c; color: #1f1f1f; }`],
});

customElements.define('greeting-card', GreetingCard);

// Now it can be used like any HTML tag
document.body.innerHTML += '<greeting-card name="World"></greeting-card>';
```

## When to choose it

- When a component must be shared across projects built with different technologies (a design system, an embeddable widget).

- When styles must be completely isolated from the page.

Inside a single Vue application, regular Vue components are more practical: you get the full benefit of Vue's reactivity, slots and developer tools.

### What Is a VNode in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-vnode
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, a **VNode** — a "virtual node" — is an object used in the virtual DOM. The virtual DOM is a lightweight representation of the real DOM that lets DOM updates happen more efficiently. VNodes describe real DOM nodes, but they are cheaper because they involve no real DOM operations.

A VNode can:

1. **Represent DOM elements**: each VNode describes a DOM node — a div, a span or any HTML element.

2. **Represent components**: Vue components are represented by VNodes too, which lets Vue manage the component hierarchy in the virtual DOM.

3. **Enable reactive updates**: when the application's state changes, Vue determines which VNodes are affected and updates only those nodes in the real DOM, which is more efficient than reloading the whole DOM.

4. **Work with slots and children**: VNodes play a key role in Vue's slot mechanism and in managing child components.

In short, a VNode is part of Vue's virtual DOM implementation and is used to improve performance, simplify reactive updates and manage the structure of Vue applications. You create VNodes yourself with **h()** when writing a [render function](https://www.serhatvarli.com/blog/what-is-a-render-function).

### What Is the Virtual DOM in Vue?

URL: https://www.serhatvarli.com/blog/what-is-the-virtual-dom
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, the virtual DOM is a lightweight representation of a web application's user interface. It is a common concept in modern JavaScript frameworks such as Vue, created to improve performance and efficiency. Its key elements:

1. **Definition:** the virtual DOM is a lightweight copy of the real DOM (Document Object Model). The DOM represents the structure and content of a web page; the virtual DOM is a representation of that structure built from JavaScript objects.

2. **Why use it?** Working directly with the real DOM can be expensive, especially in large, complex applications; DOM updates can be slow and resource-intensive. The virtual DOM optimises these interactions so applications run faster.

3. **How it works:** when the application's state changes, Vue first applies the changes to the virtual DOM. It then compares the new virtual DOM with the previous one and applies only the parts that changed to the real DOM. This is done with an algorithm called "diffing".

4. **Better performance:** the virtual DOM reduces unnecessary DOM manipulation and updates, which matters especially for dynamic applications that respond quickly to user interaction.

5. **Reactive updates:** Vue uses a reactive system that detects changes in application data and updates the related components automatically; the virtual DOM helps carry out these updates quickly and efficiently.

In short, the virtual DOM is a technique that helps Vue build web applications faster and more effectively, letting developers create quick, responsive applications with a better user experience.

### What Is the VDOM in Vue?

URL: https://www.serhatvarli.com/blog/what-is-the-vdom
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue's virtual DOM (VDOM) is a technique used to improve the performance and efficiency of web applications and plays an important role in modern web development. The key points:

1. **What is the virtual DOM?** A lightweight copy of the real DOM. Vue and other modern JavaScript frameworks use it to make DOM updates more efficient.

2. **Compared with the real DOM:** working with the real DOM can be slow, especially in large or complex interfaces. The virtual DOM speeds this up: changes made to the virtual DOM are fast and cheap compared with updates to the real DOM.

3. **Update process:** when data changes in a Vue component, Vue first produces the new state as a virtual DOM. It then compares the new virtual DOM with the previous one and applies only the parts that changed to the real DOM. This process is called "diffing".

4. **Performance benefits:** using a virtual DOM can noticeably improve performance by avoiding unnecessary DOM updates, which improves load and response times.

5. **Reactive updates:** Vue's reactivity system tracks data changes in components; when data changes, Vue updates the virtual DOM and then synchronises it with the real DOM.

The virtual DOM is an important optimisation tool in modern web development and lets Vue build user interfaces quickly and effectively, helping developers create fast, responsive applications.

### What Is a Template Ref in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-template-ref
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, the **ref** attribute keeps references to components or DOM elements. It can be used on Vue components or plain HTML elements and gives JavaScript direct access to them. Used in a template, it reaches DOM elements or component instances outside Vue's declarative rendering.

The main uses of ref:

1. **Accessing DOM elements**: add a ref attribute to an HTML element and reach it through **this.$refs** on the Vue instance. For example, with **<input ref="myInput">** you can reach the input with **this.$refs.myInput**.

2. **Accessing component instances**: if ref is used on a Vue component, **this.$refs** gives you that component's instance, so you can call its methods or read its data directly.

3. **Not reactive**: refs are not reactive; when the referenced element changes, Vue's reactivity system is not notified.

4. **Component lifecycle**: referenced elements and components are available according to the lifecycle — for example you can reach a DOM element through its ref once the component is mounted.

Refs are useful for DOM manipulation or direct interaction with child components, but within Vue's reactive, declarative rendering model it is best to keep their use limited.

> **Note (Vue 3):** With **<script setup>**, a template ref is a **ref** with the same name: **const myInput = ref(null)** receives the element after mounting, for example in **onMounted(() => myInput.value.focus())**. Vue 3.5 also adds **useTemplateRef('myInput')**.

### What Is a Slot in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-slot-in-vue
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, the "slot" concept distributes content between components. Slots are defined in a component's template and filled by the parent components that use it, which makes content integration between components more flexible and reusable.

The main features of Vue slots:

1. **Default slots**: if a component's template contains **<slot></slot>**, it is a place where the parent's content can go — the parent's content is placed where the slot tag is.

2. **Named slots**: naming slots allows more specific placement. With **<slot name="header"></slot>**, for example, the parent can provide content just for the header slot.

3. **Scoped slots**: this kind of slot lets the child pass data to the content the parent provides, enabling a more dynamic data flow.

4. **Fallback content**: you can define default content that is shown when the parent provides nothing for a slot.

Slots make components more flexible and reusable and usually lead to cleaner code — especially valuable in large, complex applications.

In the example below, the **BaseCard** component defines a named slot (**header**), a default slot and fallback content for both. The second card receives no content, so it shows the fallback texts:

```vue
<template>
  <base-card>
    <template #header>Card title</template>
    This text goes into the default slot.
  </base-card>
  <base-card />
</template>

<script>
const BaseCard = {
  template: `
    <div class="card">
      <h3><slot name="header">Default title</slot></h3>
      <p><slot>This fallback text appears when no content is given.</slot></p>
    </div>
  `,
};

export default {
  components: { BaseCard },
};
</script>

<style>
.card { margin-bottom: 12px; padding: 12px 16px; border: 1px solid #444; border-radius: 8px; }
</style>
```

### What Is a Single-File Component in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-single-file-component
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Single-File Components (SFCs) are a file format used in Vue applications. The approach combines a component's HTML, JavaScript and CSS in one file. These files, saved with the .vue extension, are used throughout the Vue ecosystem.

The single-file component structure offers these advantages:

1. **Organisation**: keeping HTML, JavaScript and CSS in one file makes component-based development tidier and easier to manage.

2. **Modularity**: each component is isolated, which improves reuse and maintenance.

3. **Ease of development**: Vue's tooling (Vite, the Vue CLI and webpack setups) processes .vue files and integrates them into the application.

A single-file component usually has three sections:

- **<template>**: the component's HTML structure.

- **<script>**: the component definition and JavaScript code.

- **<style>**: the component's own CSS.

This structure supports Vue's reactive, component-based nature and makes building modern web applications more efficient. See [What Is a Vue Component?](https://www.serhatvarli.com/blog/what-is-a-vue-component) for a complete single-file component you can run.

### What Is a Side Effect in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-side-effect
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In programming, a **side effect** is anything a function does to the outside world beyond returning a value: changing the DOM, sending a request to an API, starting a timer, writing to **localStorage** or updating a global variable. In Vue, side effects are such operations, run when reactive state changes or when a component appears.

## Where should side effects run?

- **Not in templates or computed:** **computed** functions should only calculate a value. Sending requests or changing other state inside them leads to unexpected loops and bugs.

- **watch / watchEffect:** for work that should happen when a reactive value changes (for example fetching results from an API when a search box changes).

- **Lifecycle hooks:** work to do when the component appears goes in **onMounted**, and clean-up in **onUnmounted**.

## Clean-up

Every side effect you set up should be cleaned up when the component is removed or before the effect runs again; otherwise timers and event listeners pile up and leak memory.

```javascript
import { createApp, ref, watchEffect } from 'vue';

createApp({
  setup() {
    const seconds = ref(0);
    const running = ref(true);

    // Side effect: starts a timer while running is true
    watchEffect((onCleanup) => {
      if (!running.value) return;
      const id = setInterval(() => seconds.value++, 1000);
      // Clear the timer before the effect runs again or the component is removed
      onCleanup(() => clearInterval(id));
    });

    return { seconds, running };
  },
  template: `
    <p>Elapsed: {{ seconds }} s</p>
    <button @click="running = !running">{{ running ? 'Stop' : 'Resume' }}</button>
  `,
}).mount('#app');
```

Here the timer is a side effect. Thanks to **onCleanup**, pressing "Stop" clears the timer and "Resume" starts it again.

In short, side effects are unavoidable — most of an application's real work is done with them. What matters is running them in the right place (watch, watchEffect, lifecycle hooks) and always cleaning them up.

### What Is an SFC in Vue?

URL: https://www.serhatvarli.com/blog/what-is-sfc
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue Single File Components (SFCs) are one of the most important concepts in Vue. Vue is a popular JavaScript framework, and SFCs are the structure that makes using it and developing with it easier. Their main characteristics:

1. **Single-file structure**: a Vue SFC is one file, usually saved with the .vue extension, containing the three main parts of a component: template, script and style.

2. **Template section**: defines the component's HTML structure; Vue's reactive features and directives are used here.

3. **Script section**: holds the JavaScript — the component's data, methods, computed properties, lifecycle hooks and so on.

4. **Style section**: the component's own styles, in CSS or a language such as SCSS. The "scoped" attribute keeps the styles limited to this component.

5. **Modularity and reuse**: the SFC structure makes components modular and reusable; each one is complete and independent, which eases maintenance.

6. **Ease of development**: SFCs simplify component-based development; structure, behaviour and style can be seen and managed in one file.

SFCs bring efficiency and order to modern web development and are one of the cornerstones of Vue's popularity.

### What Is a Scoped Slot in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-scoped-slot
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, a "scoped slot" lets a component's content be customised with data that comes from the component itself. The child exposes data to its slot, and the parent decides how to display it — the parent sends its own structure (HTML, other components) into the child's slot, using the child's data.

Scoped slots give flexibility when building reusable components: the content can change dynamically depending on the data, so the same component works in many different situations.

Example:

**Child component:** the child contains a **<slot>** and passes data to it through attributes, which makes it a scoped slot.

```vue
<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :user="userData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: { name: 'John Doe', age: 30 },
    };
  },
};
</script>
```

**Parent component:** the parent fills the child's slot with its own markup and the data it receives.

```vue
<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>User name: {{ slotProps.user.name }}</p>
      <p>User age: {{ slotProps.user.age }}</p>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>
```

Here **ChildComponent** offers a slot with the user's data, and **ParentComponent** fills it with its own HTML to show that data. Scoped slots make data exchange and reuse between components easier.

### What Is the Vue Scheduler?

URL: https://www.serhatvarli.com/blog/what-is-the-vue-scheduler
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, the **scheduler** is the internal mechanism that collects the work triggered by reactive changes — re-rendering components, running **watch** callbacks — in a queue and runs it all together at the right moment. Vue does not update the DOM the instant it sees a change; it gathers every change made in the same "tick" and updates the DOM once.

## Why a queue?

Imagine changing the same value three times in an event handler. If the DOM were updated after every change, Vue would render three times for nothing. The scheduler de-duplicates the work: each component re-renders at most once per tick.

## nextTick

That is why, right after you change a value, the DOM still shows the old state. To wait for the DOM update, use **nextTick**. Run the example below, click the button and watch the console:

```javascript
import { createApp, ref, nextTick } from 'vue';

createApp({
  setup() {
    const count = ref(0);

    async function increment() {
      count.value++;
      count.value++;
      count.value++;
      // The DOM has not been updated yet: the old value is shown
      console.log('Right after the change:', document.getElementById('counter').textContent);

      await nextTick();
      // The scheduler has processed the queue: the DOM was updated once
      console.log('After nextTick:', document.getElementById('counter').textContent);
    }

    return { count, increment };
  },
  template: `
    <p id="counter">{{ count }}</p>
    <button @click="increment">Increment 3 times</button>
  `,
}).mount('#app');
```

## Watcher timing (flush)

The scheduler also decides when **watch** and **watchEffect** callbacks run; you can change it with the **flush** option:

- **'pre'** (default): runs before the component updates.

- **'post'**: runs after the DOM has been updated; use it when you need the updated DOM (shortcut: **watchPostEffect**).

- **'sync'**: runs immediately when the value changes, without queuing; use it carefully for performance reasons.

> **Note:** "Scheduler" components for calendars and event planning are unrelated to this internal mechanism; they are third-party libraries.

### What Is a Render Function in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-render-function
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

A **render function** is a way of describing what a component looks like in JavaScript instead of a template. In Vue, templates are already compiled into render functions at build time; writing a render function means doing that step by hand.

## The h() function

In Vue, render functions create virtual DOM nodes (VNodes) with **h()**, called as **h(tag, attributes, children)**:

```javascript
import { createApp, h, ref } from 'vue';

const Counter = {
  setup() {
    const count = ref(0);
    // When setup returns a function, it becomes the render function
    return () =>
      h('div', [
        h('p', `Count: ${count.value}`),
        h('button', { onClick: () => count.value++ }, 'Increment'),
      ]);
  },
};

createApp(Counter).mount('#app');
```

This component gives the same result as a counter written with a template. When the reactive **count** changes, the render function runs again and Vue updates only the part of the DOM that changed.

## When to use it

- When the structure of the output is very dynamic (for example a heading whose level h1–h6 comes from a parameter).

- When writing library components that need to handle slots and VNodes programmatically.

- When you prefer JSX (Vue supports it through a Babel or Vite plugin).

For most components templates are more readable and benefit more from compiler optimisations, so render functions are usually kept for special cases.

> **Note:** React has a similar concept: the **render()** method of class components and the JSX returned by function components describe what appears on the screen.

### What Is ref in Vue?

URL: https://www.serhatvarli.com/blog/what-is-ref-in-vue
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, the **ref** attribute creates references to components or DOM elements. It gives the JavaScript part of a Vue application direct access to a specific DOM element or component in the template — an alternative to traditional DOM queries that keeps you inside Vue's system.

## Using ref

1. **Accessing DOM elements:** add a ref attribute to an element in the template and reach it through the Vue instance.

```vue
<template>
  <div ref="myDiv">Hello World!</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv);
    // Gives access to the DOM element
  },
};
</script>
```

2. **Accessing components:** add a ref to a child component to reach its instance, its methods and its data.

```vue
<ChildComponent ref="myComponent" />

<script>
export default {
  methods: {
    doSomething() {
      this.$refs.myComponent.someMethod();
      // Calls a method on ChildComponent
    },
  },
};
</script>
```

## Things to know

- **$refs** is an object on the Vue instance that gives access to elements marked with ref. It is not reactive: changes to **$refs** are not tracked by Vue.

- A ref is set when the component or element is created and is available from **mounted** onwards; in **beforeMount**, **$refs** is still empty.

- When you create many elements dynamically (for example with v-for), you can use the same ref name instead of a unique one for each; Vue collects the references into an array.

ref is especially useful when you need to work with the DOM directly or call methods of child components. Use it carefully so you do not work against Vue's reactivity and data flow.

### What Is the Vue Reactivity API?

URL: https://www.serhatvarli.com/blog/what-is-the-reactivity-api
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue's Reactivity API is the system used to manage state in Vue applications and update the user interface automatically. Vue offers a set of tools and approaches for reactive data binding and DOM updates; together they let the application track changes in its state and react to them.

The core of the Reactivity API is the **ref**, **reactive**, **computed**, **watch** and **watchEffect** functions. The main parts that work with this system are:

1. **Reactive data**: Vue makes JavaScript objects "reactive", meaning changes to their properties can be tracked and reacted to automatically.

2. **Computed properties**: reactive values calculated from other data; they are recalculated automatically when their source data changes.

3. **Watchers**: run custom behaviour in response to changes in specific data or computed properties, enabling more complex reactions.

4. **Directives**: special HTML attributes, such as v-bind and v-model, that bind elements to the data model and manage DOM updates.

5. **Virtual DOM**: Vue uses a virtual DOM to optimise DOM updates, changing the real DOM as little as possible.

The Reactivity API lets modern web applications build dynamic, interactive interfaces while reducing code complexity and performance costs. It simplifies data flow and UI updates, saving developers time and offering a more intuitive development experience.

### What Is Reactivity in Vue?

URL: https://www.serhatvarli.com/blog/what-is-reactivity-in-vue
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, reactivity is the system that makes an application respond to data changes automatically. It is the foundation of Vue and lets an application manage its state effectively. The main features of the reactivity system:

1. **Reactive data**: Vue watches the application's data model and detects changes automatically. This data is usually defined in a component's data function.

2. **Dependency tracking**: Vue tracks where each piece of data is used, so when it changes, every component and calculation that depends on it is updated.

3. **Reactive getters and setters**: Vue uses getters and setters to make data reactive; they run when data is read and when it changes, which triggers the reactivity system.

4. **Computed properties**: reactive properties that depend on other data and are recalculated when it changes. They are efficient because they recalculate only when their dependencies change.

5. **Watchers**: track changes to specific data and respond to them, for example triggering an operation when a value changes.

6. **Asynchronous updates**: Vue processes data changes asynchronously: changes are queued and applied efficiently in a batch.

Thanks to reactivity, Vue gives developers a strong, intuitive link between data and user interface for building dynamic, interactive web applications.

> **Note:** Vue 2 achieved reactivity with getters and setters defined through **Object.defineProperty**; Vue 3 uses JavaScript **Proxy** objects. This lets Vue 3 track properties added to an object later and array indexes automatically.

### What Is a Reactive Effect in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-reactive-effect
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, a "reactive effect" is a function that runs automatically in response to data changes. The concept is the basis of Vue's reactivity system. Its main characteristics:

1. **Reactive data**: Vue manages an application's data model reactively — when a piece of data changes, Vue notices.

2. **Effect functions**: functions that run in response to data changes, for example triggering DOM updates or calculations when a value changes.

3. **Dependency tracking**: Vue tracks which reactive data triggers which effects, so when a value changes only the effects that depend on it run.

4. **Automatic re-runs**: when a value changes, Vue re-runs the related effects automatically, keeping data and user interface in sync.

5. **Ease of use**: Vue makes this system transparent for developers; most of them build applications without thinking about how it works inside.

In short, reactive effects are the mechanism that lets a Vue application respond to data changes smartly and efficiently, which makes dynamic, interactive applications easier to build. Components' rendering, **computed** properties and **watchEffect** are all reactive effects; see [What Is effect in Vue?](https://www.serhatvarli.com/blog/what-is-effect-in-vue) for a runnable example.

### What Is Provide / Inject in Vue?

URL: https://www.serhatvarli.com/blog/what-is-provide-inject
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, the **provide** and **inject** options pass data between components that are nested deep in the component tree. They are especially helpful in large, complex applications, where data has to reach components that are not in a direct parent-child relationship. They work together with Vue's reactivity and give you a strong way to manage data flow.

## Provide

The **provide** option makes data or methods available to a component's descendants; everything provided can be reached by any component further down the tree. A component defines a **provide** function that returns the data or methods to share:

```vue
export default {
  provide() {
    return {
      sharedData: this.someData
    };
  },
  data() {
    return {
      someData: 'This value is shared with child components'
    };
  }
};
```

## Inject

The **inject** option is declared in a descendant to use data or a method provided by an ancestor. With it, the provided value can be used directly in the child:

```vue
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData);
    // logs "This value is shared with child components"
  }
};
```

## Use cases and limits

provide and inject are useful in large component trees, when components are not directly parent and child. They are meant for specific cases, not as a replacement for global state management.

Provided values are not reactive by themselves: if you provide a plain value and it changes later, injecting components do not see the change. If you provide reactive data (for example an object created with Vue's **reactive** function, or a **ref**), its changes are reflected reactively.

Using provide and inject can make an application harder to follow, because you cannot tell from a template which ancestor a value comes from. Use them carefully and only when needed.

### What Is a Prop in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-prop-in-vue
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

In Vue, a "prop" (short for "property") is the mechanism used to pass data from one component to another — usually from a parent component to a child. Props are a core part of Vue's reactive data flow and create a one-way data connection between components.

The main characteristics of props:

1. **One-way data flow**: props pass data from parent to child in one direction. The child can read a prop but must not change it directly; if it wants a change, it usually emits an event to tell the parent.

2. **Validation and type checking**: Vue lets a component declare the types of the props it accepts, whether they are required and their default values, which makes components more reliable and robust.

3. **Reactivity**: props are part of Vue's reactivity. When a parent changes a prop's value, the child receives the change automatically and re-renders.

4. **Customisation**: props make components customisable and reusable — the same component can be used again and again with different data, reducing duplication and easing maintenance.

To declare props, you list in the component's **props** option the names of the props it accepts and, optionally, their types, default values and other validation rules. For example:

```vue
Vue.component('my-component', {
  props: {
    // Simple declaration
    title: String,
    // With a type and a default value
    likes: {
      type: Number,
      default: 0
    },
    // Required, with a type check
    isPublished: {
      type: Boolean,
      required: true
    }
  }
});
```

This keeps the data flow between components clean and easy to follow.

> **Note (Vue 3):** **Vue.component** is the Vue 2 global API. In Vue 3 the same **props** object is used in a component definition (**export default { props: { … } }**), or with **defineProps({ … })** inside **<script setup>**.

### What Is a Vue Plugin?

URL: https://www.serhatvarli.com/blog/what-is-a-vue-plugin
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

A Vue plugin is a set of features or functionality designed for Vue applications. Plugins are usually used to extend Vue's core abilities, add reusable components or directives, or make applications more modular and flexible.

Vue plugins can include:

1. **Global methods or properties**: a plugin can add global methods or properties that every component can use.

2. **Custom directives**: directives give more control over the DOM; plugins can add them to provide custom behaviour or interaction.

3. **Filters**: in Vue 2, filters format data; plugins could add new ones.

4. **Components**: reusable components or whole UI kits can be added to an application through plugins.

5. **Mixins**: plugins can provide global mixins to add shared behaviour to every component.

6. **Application options**: some plugins add configuration or functionality when the application starts.

Plugins are installed with the **use()** method, which integrates them into the application and can apply settings at start-up. A router or a state management library, for example, is added to a Vue application this way.

Below is a simple plugin written for Vue 3. It adds a **$formatPrice** helper method and a **v-focus** directive to every component:

```javascript
import { createApp } from 'vue';

const pricePlugin = {
  install(app, options) {
    // A global method available in every component
    app.config.globalProperties.$formatPrice = (value) =>
      new Intl.NumberFormat('en-GB', { style: 'currency', currency: options.currency }).format(value);

    // A global directive: focuses the element when it appears
    app.directive('focus', { mounted: (element) => element.focus() });
  },
};

const app = createApp({
  template: `
    <p>Price: {{ $formatPrice(1499.9) }}</p>
    <input v-focus placeholder="Focused automatically" />
  `,
});

app.use(pricePlugin, { currency: 'EUR' });
app.mount('#app');
```

> **Note (Vue 3):** In Vue 3, plugins are installed on the application instance with **app.use()** instead of **Vue.use()**, and global properties are added with **app.config.globalProperties** instead of **Vue.prototype**. Filters were removed in Vue 3; use methods or computed properties instead.

### What Is the Vue Options API?

URL: https://www.serhatvarli.com/blog/what-is-the-options-api
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue's Options API is a way of defining Vue components. It has been the basic way to define components since Vue's first versions. When you create a component you define various options that describe how it behaves: its data, props, computed properties, methods, lifecycle hooks and more.

Some of the main options:

1. **Data**: the component's reactive data, which updates the user interface dynamically.

2. **Methods**: the component's methods, for example event handlers.

3. **Computed**: computed properties — new reactive values derived from other data.

4. **Watch**: watches specific data or computed properties and runs a function when they change.

5. **Props**: data passed in from outside, important for passing data from parent to child.

6. **Lifecycle hooks**: functions that run at various stages of the component's life (for example **created**, **mounted**, **updated**, **destroyed**).

7. **Components**: the child components used inside this component.

8. **Directives**: custom Vue directives.

9. **Filters**: text-formatting filters (removed in Vue 3).

The Options API is the foundation of Vue and offers a simple, understandable structure. Vue 3 introduced the Composition API as well, but the Options API is still widely used: the Composition API gives larger, more complex applications more flexibility and organisation, while the Options API is a good choice for getting started simply and quickly.

> **Note (Vue 3):** In Vue 3 the **destroyed** hook was renamed to **unmounted**, and **beforeDestroy** to **beforeUnmount**.

### What Is a Named Slot in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-named-slot
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

In Vue, a "named slot" lets a component receive different pieces of content. Regular slots pass content between components; named slots do the same in a more organised and controlled way.

When you want to put specific content into several slots of a component, you give each slot a name and decide which content goes where. This is especially helpful for keeping content organised in complex components. For example:

```vue
<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Custom content for the header</h1>
    </template>

    <template v-slot:default>
      <p>Content for the default slot</p>
    </template>

    <template v-slot:footer>
      <footer>Custom content for the footer</footer>
    </template>
  </ChildComponent>
</template>
```

Here **ChildComponent** has three named slots (**header**, **default**, **footer**). The parent fills each of them using **<template v-slot:slot_name>**, and **ChildComponent** decides where each slot's content appears.

The **ChildComponent** that defines these slots looks like this:

```vue
<!-- ChildComponent.vue -->
<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>
```

A **<slot>** without a name is the "default" slot. As a shorthand, **#header** can be written instead of **v-slot:header**.

### What Is a Macro in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-macro-in-vue
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

In the Vue world, "macro" usually means one of two things: Vue's own **compiler macros** and the community project **Vue Macros**. What they have in common is that they are turned into regular code at build time and add no runtime cost.

## 1. Compiler macros

Compiler macros are functions used inside **<script setup>** without being imported: **defineProps**, **defineEmits**, **defineExpose**, **withDefaults**, **defineModel**, **defineOptions** and **defineSlots**. See [What Is a Compiler Macro in Vue?](https://www.serhatvarli.com/blog/what-is-a-compiler-macro) for details and examples.

```vue
<script setup>
const props = defineProps({ name: String });

// A parent can call greet() through a template ref
defineExpose({ greet: () => `Hello ${props.name}` });
</script>

<template>
  <p>Hello, {{ name }}!</p>
</template>
```

## 2. The Vue Macros project

**Vue Macros** is a community project that provides, experimentally, macros Vue does not offer officially yet. It is added to a project as a Vite or webpack plugin. Some ideas tried there were later adopted by Vue itself; **defineOptions** is one example.

## Why macros?

- Less boilerplate code.

- Better TypeScript type inference.

- Shorter, more readable component definitions.

In return, macros need a build step and only work at the top level of **<script setup>**.

### What Are Vue Lifecycle Hooks?

URL: https://www.serhatvarli.com/blog/what-are-vue-lifecycle-hooks
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue lifecycle hooks are special functions that run at the different stages a Vue instance goes through, from creation to destruction. They are called at specific moments of a component's life and let developers step in at those moments.

The most common Vue lifecycle hooks and what they do:

1. **beforeCreate:** runs while the instance is being initialised, before data and events are set up.

2. **created:** runs right after the instance is created. Data and methods are available, but the DOM is not mounted yet and **$el** does not exist.

3. **beforeMount:** runs right before mounting. The template or render function has been prepared but not applied to the real DOM yet.

4. **mounted:** runs after the instance is mounted. The whole component is rendered and in the DOM.

5. **beforeUpdate:** runs when reactive data changes, before the DOM is updated.

6. **updated:** runs after reactive changes have been applied to the DOM.

7. **beforeDestroy:** runs right before the instance is destroyed; it is still fully functional.

8. **destroyed:** runs after the instance is destroyed; its event listeners and child components have been removed.

These hooks manage a component's lifecycle and run custom work at each stage — for example fetching data from an API, or setting up and cleaning up event listeners.

> **Note (Vue 3):** In Vue 3, **beforeDestroy** and **destroyed** were renamed to **beforeUnmount** and **unmounted**. In the Composition API their counterparts are **onBeforeMount**, **onMounted**, **onBeforeUpdate**, **onUpdated**, **onBeforeUnmount** and **onUnmounted**; instead of **beforeCreate** and **created**, code goes directly into **setup**.

### What Is inject in Vue?

URL: https://www.serhatvarli.com/blog/what-is-inject-in-vue
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue's **inject** option is the mechanism that passes values from a parent component down to its children. It is a convenient way to share data or functions between components.

**inject** is used to receive values that a component makes available with **provide**. **provide** supplies values to every component below it in the tree. Here is a simple example:

```vue
<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      message: 'Hello, I am sharing this value!',
    };
  },
};
</script>
```

```vue
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  computed: {
    injectedMessage() {
      return this.message;
    },
  },
};
</script>
```

**ParentComponent** provides a value called **message** to all its descendants with **provide**. **ChildComponent** receives it with **inject** and uses it through the **injectedMessage** computed property, so it can read the **message** that comes from **ParentComponent**.

This mechanism makes sharing data and communicating between components easier.

### What Is an In-DOM Template in Vue?

URL: https://www.serhatvarli.com/blog/what-is-an-in-dom-template
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

An "in-DOM template" is a Vue feature: a template written directly inside the page's HTML (the DOM). Vue is a JavaScript framework for building user interfaces, and one of its basic features is that a template can be defined inline in the HTML.

Templates written directly in the HTML are called in-DOM templates; Vue code then lives inside the HTML page itself. Here is a simple example:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js In-DOM Template</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue.js!',
        },
      });
    </script>
  </body>
</html>
```

Here a template is defined inside the div with the id #app. The **{{ message }}** expression is bound to the **message** data managed by Vue; Vue watches it and updates the DOM automatically whenever it changes.

This approach makes Vue easy to adopt and lets you put templates directly into existing HTML.

> **Note:** The example uses Vue 2 (**new Vue**). In Vue 3 the same page uses **Vue.createApp({ data() { return { message: 'Hello, Vue.js!' } } }).mount('#app')**. In-DOM templates are parsed by the browser first, so tag and attribute names must be lower-case and kebab-case (for example **<my-component>**).

### What Is Hoisting in JavaScript?

URL: https://www.serhatvarli.com/blog/what-is-hoisting
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

"Hoisting" is a JavaScript concept, so it is not tied to Vue itself. Vue is a JavaScript framework built on top of the language, and hoisting comes from how JavaScript runs code.

Before JavaScript executes code, variable and function declarations are moved ("hoisted") to the top of their scope. This means a variable or function can be referenced before the line that declares it.

For example:

```javascript
console.log(x); // undefined
var x = 5;
console.log(x); // 5
```

When **console.log(x);** runs before **var x = 5;**, the result is **undefined**: the declaration of **x** (**var x**) has been hoisted, but its value (5) has not been assigned yet.

Vue does not add anything special around hoisting, but it is built on JavaScript and works with its general concepts, so understanding hoisting helps when writing Vue code.

> **Note:** Only variables declared with **var** are hoisted with the value **undefined**. **let** and **const** are hoisted too, but cannot be accessed before the line that declares them (the Temporal Dead Zone); in that case **console.log(x)** throws a **ReferenceError**.

### What Is a Functional Component in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-functional-component
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue functional components are simple components that usually have no state and only turn their input into output. They are designed with an approach close to functional programming: they need no state management and produce output from the data they receive — one of the core principles of functional programming.

In Vue 3 a functional component is a plain function that receives **props** and a **context** (attrs, slots, emit) and returns a virtual DOM node. It has no state and no component instance (**this**).

```javascript
import { createApp, h } from 'vue';

// Vue 3: a functional component is a plain function of props and context
function MessageBox(props, { emit }) {
  return h('div', [
    h('p', props.message),
    h('button', { onClick: () => emit('select') }, 'Click me'),
  ]);
}
MessageBox.props = ['message'];
MessageBox.emits = ['select'];

createApp({
  render: () =>
    h(MessageBox, {
      message: 'Hello, I am a functional component!',
      onSelect: () => console.log('The button was clicked'),
    }),
}).mount('#app');
```

**MessageBox** produces its output only from the **message** prop it receives and reports the click to its parent with **emit**.

> **Note (Vue 2):** In Vue 2, functional components were declared with the **functional: true** option or **<template functional>**. That option was removed in Vue 3; the old syntax below works only in Vue 2 projects.

```vue
<template functional>
  <div>
    <p>{{ props.message }}</p>
    <button @click="props.onClick">Click me</button>
  </div>
</template>

<script>
export default {
  functional: true,
  props: {
    message: String,
    onClick: Function,
  },
};
</script>
```

In Vue 2, functional components were noticeably faster than regular ones. In Vue 3, regular components got so much faster that the difference is negligible, so functional components are recommended only for genuinely simple, stateless pieces.

### What Is a Fragment in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-fragment-in-vue
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

In Vue, a **fragment** means a component template with more than one root element. The feature arrived with **Vue 3**. In Vue 2 every template had to have exactly one root element, so returning several elements meant wrapping them all in an unnecessary **<div>**.

In Vue 3 you can put several elements at the root of a template, and Vue renders them without an extra wrapper. This keeps table rows, list items and flex or grid layouts from being broken by needless wrappers.

A simple example:

```vue
<template>
  <!-- Vue 3: three root elements, no wrapper div -->
  <h1>Heading</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>
```

This component returns the **<h1>** and the two **<p>** elements directly.

## Watch out: attribute fallthrough

Attributes such as **class** or **id** given to a single-root component are added to its root element automatically. With several roots Vue cannot know which element should receive them and shows a warning. In that case pass them to the element you want explicitly with **v-bind="$attrs"**:

```vue
<template>
  <header>Header</header>
  <main v-bind="$attrs">Content</main>
  <footer>Footer</footer>
</template>
```

### What Is an Event in Vue?

URL: https://www.serhatvarli.com/blog/what-is-an-event-in-vue
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

In Vue, an "event" is something that happens — a user interaction or another occurrence in the browser. Vue is a JavaScript framework for building user interfaces, focused on building interactive applications from components.

Events can be user interactions (clicking a button, typing into an input) or things that happen inside a Vue component (for example the moment it is created). They are handled through Vue's event system.

Here is a simple example:

```vue
<template>
  <div>
    <button @click="buttonClicked">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClicked() {
      console.log('The button was clicked!');
      // Anything else can happen here too.
    },
  },
};
</script>
```

The **@click** directive on the **<button>** adds a listener for the "click" event. When it happens, the **buttonClicked** method is called and reacts to the click.

Events are used to listen to user interaction, update component state, notify other components and much more — they are what make Vue components interactive and dynamic.

### What Is effect in Vue?

URL: https://www.serhatvarli.com/blog/what-is-effect-in-vue
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

In Vue, **effect** is the lowest-level building block of Vue 3's reactivity system. It runs a function immediately, records the reactive values (**ref**, **reactive**) it reads as dependencies, and runs the function again whenever one of them changes. **computed**, **watch**, **watchEffect** and component re-rendering are all built on this mechanism.

**effect** does not take a dependency list; it only takes a function. It finds its dependencies itself by tracking which reactive values the function reads while it runs (automatic dependency tracking). It is not a replacement for Vue 2's **beforeUpdate** and **updated** hooks either — those hooks still exist in Vue 3 under the same names.

Example:

```javascript
import { ref, effect } from 'vue';

const count = ref(0);

// effect runs once immediately and again whenever count changes
effect(() => {
  console.log('Count updated:', count.value);
});

// Every change to count runs the effect again
count.value++;

// The console shows "Count updated: 0" and then "Count updated: 1"
```

Because the function reads **count.value** while it runs, the effect depends on **count**. Each time **count** changes, the function runs again automatically and logs the new value.

> **Note:** **effect** is a low-level API and is rarely used directly in application code. In components, use **watchEffect** for the same job — it is stopped automatically when the component is removed.

### What Is a Dynamic Component in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-dynamic-component
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

In Vue, dynamic components let you switch or load a component programmatically, deciding at runtime which component is displayed.

There are several ways to use dynamic components in Vue. Here are some of them:

1. **The <component> element:** Vue has a built-in **<component>** element. Its **is** prop decides which component is displayed:

```vue
<template>
  <component :is="currentComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'MyComponent',
    };
  },
};
</script>
```

Here the **currentComponent** data property decides which component is shown; your application logic can change it at any time.

2. **With <keep-alive>:** Vue's **<keep-alive>** element keeps dynamic components in memory and reuses them — useful when a component's state should be preserved while switching:

```vue
<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>
```

3. **With v-if or v-show:** the decision to show a component can also be made with the v-if or v-show directives, adding or removing components under certain conditions:

```vue
<template>
  <div>
    <my-component v-if="shouldShowComponent"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shouldShowComponent: true,
    };
  },
};
</script>
```

These are only a few ways of using dynamic components in Vue; which one to choose depends on the needs and structure of your application.

### What Is a Vue Directive?

URL: https://www.serhatvarli.com/blog/what-is-a-vue-directive
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue directives are special instructions, part of the Vue.js framework, that add behaviour to HTML elements. Combined with Vue's reactivity, they keep the HTML in sync with the application's data model and make interactive applications possible.

Vue directives start with the **v-** prefix and activate a specific behaviour when added to an HTML element. Some common directives:

1. **v-bind:** binds an HTML attribute to data. For example, you can bind an element's href to a value:

```vue
<a v-bind:href="url">Link</a>
```

2. **v-model:** binds form fields (input, textarea, select) to a data property, so what the user types is stored in the data:

```vue
<input v-model="username">
```

3. **v-for:** renders a list by looping over data, for example the items of an array:

```vue
<ul>
  <li v-for="item in items">{{ item.name }}</li>
</ul>
```

4. **v-if, v-else-if, v-else:** render an element only when a condition is true:

```vue
<p v-if="isUserLoggedIn">You are signed in!</p>
<p v-else>Please sign in</p>
```

5. **v-show:** like v-if it depends on a condition, but it is lighter: the element always stays in the DOM and is only shown or hidden with CSS:

```vue
<p v-show="isVisible">This text is shown or hidden</p>
```

These examples show different uses of Vue directives. Directives create a strong link between HTML and JavaScript and give developers flexibility in building interactive, dynamic web applications.

The example below uses all of these directives in one component; run it, type in the input and click the button:

```vue
<template>
  <a v-bind:href="url">Vue.js documentation</a>
  <input v-model="username" placeholder="Your name" />
  <p v-if="username">Hello, {{ username }}!</p>
  <p v-else>Please type your name.</p>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <p v-show="isVisible">This text is shown and hidden with v-show.</p>
  <button @click="isVisible = !isVisible">Show / hide</button>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org',
      username: '',
      items: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' },
      ],
      isVisible: true,
    };
  },
};
</script>
```

### What Is a Vue Custom Element?

URL: https://www.serhatvarli.com/blog/what-is-a-vue-custom-element
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue custom elements are a feature introduced in Vue 3.2. They let you use Vue components or whole applications on non-Vue pages or together with other JavaScript frameworks.

A custom element turns a Vue component into a regular HTML element, so other frameworks or libraries can use it. This makes integrating Vue with other technologies much easier.

To create one, you use the **defineCustomElement** function. It turns a Vue component into a custom element class, which is then registered with the browser using **customElements.define**. For example:

```javascript
import { defineCustomElement } from 'vue';

// Create a Vue component
const MyComponent = defineCustomElement({
  template: '<div>Hello, this is my custom element!</div>',
});

// Register it as a custom element
customElements.define('my-component', MyComponent);

// Use it in HTML: <my-component></my-component>
document.body.append(document.createElement('my-component'));
```

Here the **MyComponent** Vue component is turned into a custom HTML element called "my-component" with **defineCustomElement** and **customElements.define**, and it can then be used in any HTML page.

Thanks to this feature, Vue fits into a more modular and flexible architecture that can be combined with other technologies.

### What Is the Vue Composition API?

URL: https://www.serhatvarli.com/blog/what-is-the-composition-api
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

The Vue Composition API, introduced in Vue 3.0, gives developers a better way to organise and share component logic. In Vue 2 logic was usually split across the Options API's data, methods and other options; the Composition API offers a more flexible, readable and organised alternative.

Its main characteristics are:

1. **Organising logic with functions:** the Composition API encourages splitting component logic into reusable functions (composables). State management and behaviour can be grouped by feature instead of by option type.

2. **Vue's reactivity system:** it builds on Vue's reactivity, with **ref** and **reactive** making state management simple.

3. **The setup function:** the Composition API is based on the **setup** function introduced in Vue 3. It runs while the component is being created and prepares its reactive state, methods and everything else the template needs.

An example:

```vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // Declare reactive state
    const count = ref(0);

    // Declare behaviour
    function increment() {
      count.value++;
    }

    // Expose them to the template
    return {
      count,
      increment,
    };
  },
};
</script>
```

Here the Composition API manages a counter's state and its increment function. **setup** runs when the component starts and configures it by returning the reactive state and functions.

### What Is a Composable in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-composable
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue composables are a design pattern and a structural building block in the Vue ecosystem: reusable functions used to share and manage logic between components.

A composable groups a piece of functionality so it can be used outside a single component — in another file or in several components. This keeps the code tidy, creates reusable parts and makes sharing logic between components easy.

A composable is usually a JavaScript function built for one task. It typically uses Vue's reactivity (**ref**, **reactive**, **computed**) to manage state. Here is a simple example:

```javascript
// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  return {
    count,
    increment,
    decrement,
  };
}
```

This composable manages the state of a counter together with its increment and decrement functions, and any component can use it.

Usage:

```vue
<!-- MyComponent.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment, decrement } = useCounter();

    return { count, increment, decrement };
  },
};
</script>
```

Here the **useCounter** composable is used inside **MyComponent** — an easy, tidy way to bring the counter's state and behaviour into the component.

> **Note:** Templates unwrap only top-level refs. If you return the whole object (**return { counter }**) and write **{{ counter.count }}**, the ref is not unwrapped; destructure the composable's result as above, or wrap it with **reactive()**.

### What Is a Vue Component?

URL: https://www.serhatvarli.com/blog/what-is-a-vue-component
Published: 2024-01-03 · Updated: 2026-10-05 · Category: VueJS

A Vue component is a structure in the Vue.js framework that represents a reusable, customisable element. Vue is a JavaScript framework for building user interfaces, and components are how it splits the UI into reusable, independent and manageable pieces.

Vue components usually have these parts:

1. **Template:** an HTML-based template that defines the component's markup and structure.

2. **Data:** each component manages its own data, which controls its behaviour and appearance.

3. **Methods:** functions that react to events or perform specific tasks.

4. **Lifecycle hooks:** components can react to moments of their life such as creation, update and removal.

5. **Styles:** CSS (or another style language) for styles that belong to the component.

Components are designed to be reusable, easy to maintain and independent. In large applications this reduces complexity and keeps the code modular.

Here is a simple Vue component:

```vue
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!',
    };
  },
  methods: {
    changeMessage() {
      this.message = 'New message!';
    },
  },
};
</script>

<style scoped>
/* Styles that belong to this component */
h1 {
  color: blue;
}
</style>
```

This component shows a message and changes it when the button is clicked. It can then be used in other Vue files.

### What Is a Compiler Macro in Vue?

URL: https://www.serhatvarli.com/blog/what-is-a-compiler-macro
Published: 2024-01-03 · Updated: 2026-10-05 · Category: VueJS

In Vue, a **compiler macro** is a special function that can only be used inside **<script setup>** and is turned into plain JavaScript at build time. Macros arrived in Vue 3.2 together with the **<script setup>** syntax. They are not imported: the Vue compiler recognises them and converts them into component options, so they do not exist at runtime.

## The most common compiler macros

- **defineProps**: declares the props the component accepts.

- **defineEmits**: declares the events the component emits.

- **defineExpose**: chooses what a parent can reach through a template ref.

- **withDefaults**: gives default values to props declared with TypeScript types.

- **defineModel** (Vue 3.4+): declares a value bound two-way with **v-model** in a single line.

- **defineOptions** and **defineSlots** (Vue 3.3+): declare component options and slot types.

## Example

```vue
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
});
const emit = defineEmits(['increment']);
</script>

<template>
  <h2>{{ props.title }}</h2>
  <button @click="emit('increment')">Increment ({{ count }})</button>
</template>
```

Here **defineProps** and **defineEmits** are used without importing them. The compiler turns these calls into the component's **props** and **emits** options, which is why macros can only be called at the top level of **<script setup>** — not inside a function or in a regular **<script>** block.

The component (for example **CounterTitle.vue**) is used in another component like this:

```vue
<script setup>
import { ref } from 'vue';
import CounterTitle from './CounterTitle.vue';

const count = ref(0);
</script>

<template>
  <CounterTitle title="Counter" :count="count" @increment="count++" />
</template>
```

> **Note:** For **:key** in **v-for**, the best choice is a unique and stable id for each item (for example **item.id**). Using the array index can lead to wrong matches when the list is sorted or items are added. This is a template rule, not a compiler macro.

### What Is an Async Component in Vue?

URL: https://www.serhatvarli.com/blog/what-is-an-async-component
Published: 2024-01-03 · Updated: 2026-10-05 · Category: VueJS

In Vue, an "async component" is a component that is loaded asynchronously. It is used when a component does not need to be loaded as soon as the application starts or the page opens, and it is especially useful for improving performance in large applications.

In Vue 3, async components are defined with the **defineAsyncComponent** function and a dynamic **import()**, so the component's code is fetched only when it is needed. Here is an example:

```javascript
// AsyncComponent.js
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

export default AsyncComponent;
```

Here an async component called **AsyncComponent** is created. The **./MyComponent.vue** file inside **import()** is the component to load; it is downloaded when the user opens the page or when a particular event happens.

You use the async component inside another component like this:

```vue
<!-- App.vue -->
<template>
  <div>
    <AsyncComponent />
  </div>
</template>

<script>
import AsyncComponent from './AsyncComponent.js';

export default {
  components: {
    AsyncComponent,
  },
};
</script>
```

**AsyncComponent** is registered in the **components** option like any other component. Vue downloads **MyComponent.vue** as a separate chunk the first time the component is shown, which keeps the initial page load smaller.

> **Note:** In Vue 2 it was enough to pass a **() => import(...)** function as a component. In Vue 3, components must use **defineAsyncComponent**; a plain **() => import(...)** is only valid in Vue Router route definitions. **defineAsyncComponent** also lets you set components to show while loading and on error (**loadingComponent**, **errorComponent**).

### What Is Less?

URL: https://www.serhatvarli.com/blog/what-is-less
Published: 2024-01-03 · Updated: 2026-10-05 · Category: Less

Less is first of all a CSS preprocessor language. CSS (Cascading Style Sheets) is the style language used to control how web pages look; Less was created to make writing and maintaining that CSS easier.

Less extends CSS and offers a more flexible way of writing styles. Its syntax lets you write less code and organise your styles better, and it adds programming features such as variables, functions and nesting.

Here is a simple Less example:

```less
@mainColor: #3498db;
body {
  background-color: @mainColor;
}
h1 {
  color: darken(@mainColor, 10%);
}
```

This code defines a main colour variable (**@mainColor**), uses it as the background colour of **body** and gives **h1** a darker shade of the same colour. This way Less helps you write more modular and maintainable CSS.

### What Is HTML?

URL: https://www.serhatvarli.com/blog/what-is-html
Published: 2024-01-03 · Updated: 2026-10-05 · Category: Html

HTML (Hypertext Markup Language) is the markup language used to structure web pages. It is a text-based language that web browsers can read and interpret, and it is used to arrange and describe the text, links, images, tables, forms and other elements of a page.

HTML describes elements wrapped in tags. Tags usually come in pairs — an opening tag (<tag>) and a closing tag (</tag>) — and give the content between them its meaning. For example, the <h1> and </h1> tags mark a heading, the <a> and </a> tags create a link, and the <img> tag adds an image.

Browsers read and interpret HTML so that users can see web pages. HTML is usually combined with other web technologies: CSS (Cascading Style Sheets) for presentation and JavaScript for interactivity. Together, HTML, CSS and JavaScript form the foundation of modern web development.

### What Is React?

URL: https://www.serhatvarli.com/blog/what-is-react
Published: 2024-01-03 · Updated: 2026-10-05 · Category: ReactJS

React is an open-source JavaScript library for building user interfaces, originally developed by Facebook (now Meta). It is used to build web applications and is especially well suited to single-page applications (SPAs).

React takes a component-based approach. The parts of an application — its interface elements — are components that can be built, managed and combined independently. This keeps the code modular and easier to maintain.

One of React's key features is the virtual DOM (Document Object Model). Instead of manipulating the real DOM directly, React works on a virtual DOM and updates only the parts that changed, which improves performance.

React is also based on one-way data flow: data moves through the application in one direction (usually from parent to child), which makes the application's behaviour more predictable.

React has a large community and ecosystem and is used by many major projects. Thanks to its sibling project React Native, the same component-based approach can also be used to build mobile apps.

### What Is Vue.js?

URL: https://www.serhatvarli.com/blog/what-is-vue-js
Published: 2024-01-03 · Updated: 2026-10-05 · Category: VueJS

Vue.js is an open-source JavaScript framework, mainly used to build user interfaces. It is especially suited to single-page applications (SPAs). Vue is lightweight and flexible, so it is used at every scale, from small and medium projects to large applications.

The main features of Vue.js:

1. **Lightweight and easy to use:** Vue is a small library with a gentle learning curve, so developers can add it to projects and use it quickly.

2. **Two-way data binding:** with v-model, changes in the model are reflected in the user interface automatically, and input from the interface updates the model.

3. **Component-based development:** Vue encourages splitting an application into small, reusable components, which makes code more modular and easier to maintain.

4. **Directives:** Vue supports directives that add special behaviour to HTML, making it richer and more dynamic.

5. **Templating:** Vue builds user interfaces from HTML templates that work together with JavaScript to produce dynamic content.

6. **State management with Vuex:** Vue applications can use the Vuex library to manage application-wide state centrally.

7. **Routing:** Vue Router, Vue's official router, manages navigation between pages in SPAs.

Vue appeals to a wide audience, from beginners to experienced developers. Being lightweight, easy to learn and flexible are the main reasons for its popularity.

> **Note:** With Vue 3, the officially recommended state management library is **Pinia**. Vuex keeps working in existing projects, but Pinia is preferred for new ones.

### What Is AngularJS?

URL: https://www.serhatvarli.com/blog/what-is-angularjs
Published: 2024-01-03 · Updated: 2026-10-05 · Category: AngularJS

AngularJS is a JavaScript framework mostly used to build single-page applications (SPAs). It was developed by Google and is open source. First announced in 2010, it drew attention by offering a more effective and modular approach to building web applications.

AngularJS is built around the MVC (Model-View-Controller) design pattern. The pattern splits an application into three parts — the data (Model), the user interface (View) and the application logic (Controller) — and manages how they interact.

The main features of AngularJS are:

1. **Two-Way Data Binding:** Changes in the model are reflected in the user interface automatically, and changes in the user interface are passed back to the model.

2. **Modularity:** AngularJS is good at splitting an application into small, independent and reusable modules, which makes development easier to manage.

3. **Dependency Injection:** AngularJS has an injection system for managing dependencies, which makes sharing data and services between components easier.

4. **Directives:** Directives added to HTML elements let you extend HTML with your own syntax and attach dynamic behaviour to the page.

5. **Templating:** HTML templates bound to the model make it easy to build dynamic user interfaces.

6. **Routing:** A routing system lets users move between different views inside the application.

AngularJS became popular because it helped developers build and manage complex applications more effectively. However, it has been replaced by Angular (version 2 and later), which is generally recommended for new projects.

> **Note:** Official long-term support (LTS) for AngularJS ended on 31 December 2021; it no longer receives security updates. New projects should use Angular or another maintained framework.

### What Is Sass?

URL: https://www.serhatvarli.com/blog/what-is-sass
Published: 2024-01-02 · Updated: 2026-10-05 · Category: Sass

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor language used in web development. It adds features to CSS and keeps the code better organised, so stylesheets are easier to manage.

The main features of Sass are:

1. **Variables:** Store colours, fonts and other values and reuse them; stylesheets become more modular and less repetitive.

2. **Nesting:** Write CSS rules in a hierarchy that mirrors the HTML, which makes the code easier to read.

3. **Mixins:** Define reusable blocks of CSS declarations.

4. **Functions:** Sass supports functions for maths and other calculations.

Sass is compiled into plain CSS that browsers understand, so it helps you write more effective and maintainable stylesheets during development.

### What Is SCSS?

URL: https://www.serhatvarli.com/blog/what-is-scss
Published: 2024-01-02 · Updated: 2026-10-05 · Category: Scss

SCSS (Sassy CSS) is an extended form of CSS that makes writing styles more effective with extra features and flexibility. It is one of the two syntaxes of the Sass (Syntactically Awesome Stylesheets) preprocessor — the newer one.

The main difference between SCSS and the indented Sass syntax is the syntax itself: Sass is shorter and relies on indentation, while SCSS keeps the familiar CSS syntax with braces and semicolons. Any valid CSS file is also valid SCSS, which makes moving to it easy.

Some key features of SCSS:

1. **Variables:** Store values such as colours, fonts and sizes; this keeps a design consistent and makes changes easy.

```scss
$main-color: #3498db;
body {
  background-color: $main-color;
}
```

2. **Nested styles:** Nest rules to make the stylesheet easier to follow.

```scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
    margin-right: 10px;
  }
}
```

3. **Mixins:** Group declarations into reusable mixins.

```scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
```

4. **Import:** Split styles into files and combine them; the @import rule brings other SCSS files in.

```scss
@import "reset";
@import "base";
@import "layout";
```

These features make CSS more modular, readable and maintainable. Browsers cannot read SCSS directly, so it is compiled to CSS with a preprocessor (for example Dart Sass) before use.

> **Note:** Since Dart Sass 1.80, **@import** is deprecated. New projects should connect files with **@use** and **@forward** instead — for example **@use "base";**.

### What Is CSS?

URL: https://www.serhatvarli.com/blog/what-is-css
Published: 2024-01-02 · Updated: 2026-10-05 · Category: Css

CSS stands for "Cascading Style Sheets". It is the style language used to lay out web pages, style them and control their visual design. It is used together with HTML (Hypertext Markup Language) to define how a page looks.

CSS is designed to control the appearance of text, images, backgrounds, spacing, colours and every other element on a page. This lets developers manage the structure of a page (HTML) and its style (CSS) separately, so design and content are easier to maintain.

The main jobs of CSS are:

1. **Colour and background:** Setting visual properties such as the colours and background colours of elements.

2. **Typography:** Setting the typographic properties of text — font family, size, colour and other text styles.

3. **Position and size:** Controlling where elements are placed and how big they are.

4. **Spacing and layout:** Defining the space between and around elements and the overall layout.

5. **Animations and transitions:** Controlling transitions and animations of elements on the page.

CSS can live in an external stylesheet or inside the HTML file. An external stylesheet lets every page of a website share the same rules and update them in one place, which makes maintenance easier and keeps the look consistent.

### What Is jQuery?

URL: https://www.serhatvarli.com/blog/what-is-jquery
Published: 2024-01-02 · Updated: 2026-10-05 · Category: Jquery

jQuery is an open-source JavaScript library. It was designed to make common web development tasks easier: handling events in HTML documents, creating animations, exchanging data with AJAX and working with the DOM (Document Object Model).

Its main goal was to solve browser compatibility problems and to give developers a simpler, more effective way to build web applications. It made DOM manipulation especially approachable for developers without much JavaScript experience.

jQuery lets you reach DOM elements with CSS selectors, simplifies listening and reacting to events, and makes AJAX requests easy. Shorter, simpler code speeds up development. With the progress of modern JavaScript and browsers, however, the need for jQuery has decreased, and in many cases plain JavaScript is now the better choice.

### What Is JavaScript?

URL: https://www.serhatvarli.com/blog/what-is-javascript
Published: 2024-01-02 · Updated: 2026-10-05 · Category: JavaScript

JavaScript is a programming language that mainly runs in web browsers. It is used for many tasks — making pages dynamic, handling user interaction, working with data — and, together with HTML, it makes web pages interactive.

The main characteristics of JavaScript are:

1. **Runs in the browser:** JavaScript is interpreted by browsers, so it can run directly in the page and add interactivity to it.

2. **Dynamic and lightweight:** Being a lightweight language that runs in the browser, it is ideal for dynamic pages: user interaction, form validation, animations and similar tasks.

3. **Object-oriented programming:** JavaScript supports object-oriented programming (OOP). Its objects are prototype-based; the **class** syntax introduced in ES2015 is a more readable way of writing on top of that prototype model. Objects help organise code and make it reusable.

4. **Platform independence:** Because it runs in the browser, JavaScript works the same on different operating systems.

5. **Works with HTML and CSS:** JavaScript manipulates the DOM (Document Object Model) to change the content and style of a page while it is open.

JavaScript is one of the cornerstones of web development, and today it is not limited to the browser: with technologies such as Node.js it is also a popular language on the server.

### What Is HTML5?

URL: https://www.serhatvarli.com/blog/what-is-html5
Published: 2024-01-01 · Updated: 2026-10-05 · Category: Html 5

HTML5 (Hypertext Markup Language version 5) is the fifth major version of the HTML standard used to create and structure content on the web. Today HTML is developed by the WHATWG as a "living standard" (the HTML Living Standard) that is updated continuously, without version numbers. It is a core web technology supported by every major browser, and it brought many new features compared with its predecessors, HTML 4.01 and XHTML 1.0.

1. **Semantic elements:** HTML5 introduced semantic elements such as <article>, <section>, <nav>, <header>, <footer>, <aside>, <figure> and <figcaption>. They describe the structure and meaning of the content.

2. **Audio and video:** HTML5 supports embedding audio and video natively, without third-party plugins. The <audio> and <video> elements embed media files directly in the page.

```html
<audio controls>
  <source src="sound.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>
<video width="400" height="300" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>
```

3. **Canvas:** The <canvas> element provides a drawing surface for graphics and animations with JavaScript. It is often used for games, charts and interactive content.

```html
<canvas id="myCanvas" width="320" height="160"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // Rectangle
  ctx.fillStyle = '#28e98c';
  ctx.fillRect(20, 20, 120, 80);

  // Circle
  ctx.beginPath();
  ctx.arc(230, 60, 40, 0, Math.PI * 2);
  ctx.fillStyle = '#4fc1ff';
  ctx.fill();

  // Text
  ctx.fillStyle = '#ffffff';
  ctx.font = '16px sans-serif';
  ctx.fillText('Hello Canvas', 20, 135);
</script>
```

Here **getContext('2d')** returns the drawing context; **fillRect** then draws a rectangle, **arc** a circle and **fillText** the text.

4. **Local and session storage:** HTML5 includes the localStorage and sessionStorage APIs for storing data in the user's browser — a way to keep data between visits.

```javascript
// Save a value in local storage
localStorage.setItem('key', 'value');

// Read it back
var value = localStorage.getItem('key');
console.log(value); // "value"
```

5. **Geolocation:** With the Geolocation API a website can ask for the user's location — useful for location-based services.

```javascript
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition);
} else {
  console.log('Geolocation is not supported by this browser.');
}

function showPosition(position) {
  console.log('Latitude: ' + position.coords.latitude + ', Longitude: ' + position.coords.longitude);
}
```

6. **Web Workers:** Web Workers let developers run scripts in the background, independently of the page. Moving heavy work to separate threads keeps the page responsive.

```javascript
// Create a new worker
var worker = new Worker('worker.js');

// Listen for messages from the worker
worker.onmessage = function (event) {
  console.log('Message from worker: ' + event.data);
};

// Send a message to the worker
worker.postMessage('Hello from the main page!');
```

These are some of the features introduced in HTML5. As web technologies evolve, HTML remains the basic building block of modern, interactive web applications.

### What Is CSS3?

URL: https://www.serhatvarli.com/blog/what-is-css-3
Published: 2024-01-01 · Updated: 2026-10-05 · Category: Css 3

CSS (Cascading Style Sheets) is the style language used to lay out web pages and define their visual style. It is used with document types such as HTML or XML and tells web browsers how those documents should be displayed. Here are some basic CSS properties, with short explanations:

1. **Colours:**

```css
/* Using a colour name */
color: red;

/* Using a hex colour code */
color: #ff0000;

/* Using an RGB colour value */
color: rgb(255, 0, 0);
```

2. **Background:**

```css
/* Coloured background */
background-color: yellow;

/* Background image */
background-image: url('image.png');
```

3. **Text style:**

```css
/* Font family and size */
font-family: 'Arial', sans-serif;
font-size: 16px;

/* Bold text */
font-weight: bold;

/* Italic text */
font-style: italic;
```

4. **Border and radius:**

```css
/* Border width, style and colour */
border: 2px solid blue;

/* Corner radius */
border-radius: 5px;
```

5. **Shadows:**

```css
/* Add a shadow to a box */
box-shadow: 5px 5px 10px gray;
```

6. **Alignment:**

```css
/* Centre the text */
text-align: center;

/* Centre the box */
margin: 0 auto;
```

7. **Visibility:**

```css
/* Visibility */
display: none; /* Hidden */
display: block; /* Shown */
```

These basic properties cover some of the style options you can use when building web pages. CSS has a very wide range of properties, and you can adjust each property and value to your needs.

## Blog articles (Turkish)

### State and Lifecycle Nedir?

URL: https://www.serhatvarli.com/tr/blog/state-and-lifecycle-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

ReactJS'de "State" ve "Lifecycle" iki önemli konsepttir ve modern web uygulamalarının geliştirilmesinde kilit roller
  oynarlar.

  1. **State (Durum):**

      - **Tanımı:** State, bir React bileşeninin herhangi bir zamandaki veri durumunu temsil eder. Bu
        veri, kullanıcı etkileşimleri veya zaman içindeki değişiklikler sonucu değişebilir.

      2. **Örnek Kullanım:** Bir form bileşeni düşünün; kullanıcının girdiği metin, bileşenin state'inde
        saklanabilir. Bu sayede, kullanıcı girdisine göre bileşenin görünümünü ve davranışını dinamik olarak
        güncelleyebilirsiniz.

      3. **Nasıl Çalışır:** State, genellikle bileşenin constructor'ında başlatılır ve
        **this.setState** fonksiyonu ile güncellenir. State'in değişmesi, bileşenin yeniden render edilmesine
        sebep olur.

  - **Lifecycle (Yaşam Döngüsü):**

      1. **Tanımı:** Lifecycle metotlar, bir React bileşeninin doğumundan ölümüne kadar geçen süreçteki
        çeşitli aşamalarda tetiklenen özel metotlardır. Bu metotlar, bileşenin nasıl davranacağını ve ne zaman
        güncelleneceğini kontrol eder.

      2. **Örnek Metotlar:**

          **componentDidMount**: Bileşen DOM'a eklendikten hemen sonra çağrılır. Genellikle API çağrıları,
            veri abonelikleri gibi işlemler için kullanılır.

          3. **componentDidUpdate**: Bileşen güncellendiğinde (örneğin, yeni props aldığında veya state
            değiştiğinde) çağrılır.

          4. **componentWillUnmount**: Bileşen DOM'dan kaldırılmadan hemen önce çağrılır. Burada,
            aboneliklerin iptali gibi temizlik işlemleri yapılır.

      - **Nasıl Çalışır:** Lifecycle metotları, bileşen sınıfı içinde tanımlanır ve React tarafından
        otomatik olarak uygun zamanlarda çağrılır.

React'ın bu iki konsepti, bileşen tabanlı geliştirme yaklaşımının temel taşlarından biridir ve dinamik, interaktif
  kullanıcı arayüzleri oluşturmak için esneklik ve güç sağlar. State, bileşenin iç durumunu yönetirken, lifecycle
  metotları bileşenin yaşam sürecini yönetir.

## Fonksiyon bileşenlerinde: useState ve useEffect

Yukarıda anlatılan **this.setState** ve yaşam döngüsü metotları sınıf bileşenlerine aittir. React 16.8 ile gelen **Hooks** sayesinde bugün aynı işler fonksiyon bileşenlerinde yapılır: durum **useState** ile tutulur; **componentDidMount**, **componentDidUpdate** ve **componentWillUnmount** işlerinin karşılığı **useEffect**'tir.

```jsx
import { useState, useEffect } from 'react';

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    // componentDidMount karşılığı: zamanlayıcıyı kur
    const timerId = setInterval(() => setDate(new Date()), 1000);
    // componentWillUnmount karşılığı: zamanlayıcıyı temizle
    return () => clearInterval(timerId);
  }, []);

  return <h2>Saat: {date.toLocaleTimeString('tr-TR')}</h2>;
}
```

Bu örnekte saat her saniye güncellenir. **useEffect**'in döndürdüğü fonksiyon, bileşen ekrandan kaldırıldığında çalışır ve zamanlayıcıyı temizler.

### Components and Props Nedir?

URL: https://www.serhatvarli.com/tr/blog/components-and-props-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

ReactJS'de "Components and Props" (Bileşenler ve Özellikler), uygulamanızı bağımsız ve yeniden kullanılabilir
  parçalar halinde inşa etmenizi sağlayan temel kavramlardır. İşte bu iki kavram hakkında detaylı bilgi:

## Bileşenler (Components)

  1. **Tanım**: Bileşenler, React'te kullanıcı arayüzünü oluşturan bağımsız ve yeniden
      kullanılabilir
      parçalardır. Bir React uygulaması, genellikle birçok bileşenden oluşur.

  2. **Türleri**:

      - **Fonksiyonel Bileşenler**: JavaScript fonksiyonları olarak tanımlanırlar ve props
        olarak
        adlandırılan girdiler alıp, görüntülenmesi gereken React elemanlarını döndürürler. Örnek:
        **function Welcome(props) { return <h1>Hello, {props.name}</h1>; }**

      3. **Sınıf Bileşenleri**: JavaScript sınıfları olarak tanımlanırlar ve **render** metodu
        içinde görüntülenmesi gereken React elemanlarını döndürürler. Örnek:
        **class Welcome extends React.Component { render() { return <h1>Hello,
          {this.props.name}</h1>; } }**

  - **Yeniden Kullanım ve Bileşim**: Bileşenler, kodun yeniden kullanılabilirliğini artırır.
      Küçük
      bileşenler büyük bileşenlerde birleştirilebilir.

## Özellikler (Props)

  1. **Tanım**: Props, bileşenlere veri aktarmak için kullanılır. Bileşenler, kendilerine
      aktarılan
      propsları okuyabilir ama değiştiremezler (değişmezlerdir).

  2. **Kullanım**: Bir bileşene prop aktarmak, HTML etiketlerine özellik eklemek gibidir.
      Örnek:
      **<Welcome name="Sara" />** burada **name** bir prop'tur.

  3. **Bileşenler Arası İletişim**: Üst bileşenden alt bileşenlere veri aktarımı props
      aracılığıyla
      yapılır. Böylece bileşenler arası iletişim sağlanır.

  4. **Okuma ve Kullanım**: Fonksiyonel bileşenlerde props, fonksiyonun parametresi olarak
      geçilir. Sınıf
      bileşenlerinde ise **this.props** üzerinden erişilir.

## Örnek

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahit" />
      <Welcome name="Eda" />
    </div>
  );
}
```

Bu örnekte, **Welcome** bileşeni farklı isimlerle üç kez kullanılıyor. Her kullanım, **name**
  prop'u ile farklı bir isim alıyor. **App** bileşeni bu **Welcome**
  bileşenlerini bir araya getirerek
  birleşik bir UI oluşturuyor.

Bileşenler ve props, React uygulamalarının modüler ve etkili bir şekilde inşa edilmesini sağlar, böylece karmaşık
  kullanıcı arayüzleri daha yönetilebilir ve anlaşılır hale gelir.

### Rendering Elements Nedir?

URL: https://www.serhatvarli.com/tr/blog/rendering-elements-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

ReactJS'de "Rendering Elements" (Elemanları Render Etme), bir web arayüzünde kullanıcıya göstermek için React
  elemanlarının ekrana çizilmesi işlemidir. React elemanları, genellikle HTML öğelerini temsil eden hafif, basit
  nesnelerdir. Bu elemanlar, React 18 ve sonrasında **createRoot** ile oluşturulan kökün **render()** metodu kullanılarak DOM'a yerleştirilir. İşte
  bu süreç hakkında daha ayrıntılı bir açıklama:

  1. **Eleman Oluşturma**: React'te, her şey bir eleman olarak başlar. Bir **div**,
      **span**, **button** gibi HTML etiketlerini veya özel React bileşenlerini temsil edebilirler.
      Örneğin, **const element = <h1>Hello, world!</h1>;** ifadesi bir **h1** elemanı
      oluşturur.

  2. **Elemanı Render Etme**: Elemanı ekrana çıkarmak için, önce hedef DOM düğümü için bir kök oluşturur, ardından elemanı bu köke render edersiniz. Örneğin: **const root = ReactDOM.createRoot(document.getElementById('root')); root.render(element);**. Bu kod, **element** isimli
      elemanı **id**'si **root** olan DOM düğümüne yerleştirir.

  3. **Reaktif Güncellemeler**: React elemanları değişmezdir; bir kez oluşturulduktan sonra çocukları
      veya özellikleri değiştirilemez. Ancak, UI'ı güncellemek istediğinizde, yeni bir eleman oluşturup
      **root.render()** ile tekrar render edebilirsiniz. React, önceki ve yeni elemanları karşılaştırarak
      sadece gerekli olan DOM güncellemelerini yapar.

  4. **Sanal DOM**: React, gerçek DOM'a dokunmadan önce değişiklikleri bir "Sanal DOM" üzerinde
      gerçekleştirir. Bu, performansı artırır çünkü gerçek DOM'la etkileşim pahalıdır. React, sanal DOM'daki
      değişiklikleri algılar ve en verimli şekilde gerçek DOM'u günceller.

  5. **Bileşen Tabanlı Yaklaşım**: React, UI'ları bağımsız, yeniden kullanılabilir bileşenler olarak inşa
      etmeye teşvik eder. Her bileşen kendi durumunu yönetebilir ve bağımsız olarak render edilebilir.

Bu, ReactJS'deki "Rendering Elements" sürecinin temel bir özetidir ve React uygulamalarının temelini oluşturur. Bu
  süreç, web uygulamalarının dinamik ve etkileşimli kullanıcı arayüzlerini kolayca oluşturmasını sağlar.

### Introducing JSX Nedir?

URL: https://www.serhatvarli.com/tr/blog/introducing-jsx-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

"Introducing JSX" ReactJS'de, JSX'in tanıtımını ve kullanımını ifade eder. JSX, JavaScript'i HTML benzeri bir
  sözdizimiyle genişleten bir ReactJS özelliğidir. Temel olarak, web geliştiricilerinin kullanıcı arayüzlerini daha
  sezgisel ve okunabilir bir şekilde tanımlamalarını sağlar. Geleneksel JavaScript ile HTML arasında bir köprü görevi
  görür ve React bileşenlerinin yapısını tanımlamak için kullanılır.

JSX'in Öne Çıkan Özellikleri:

  1. **HTML Benzeri Sözdizimi**: JSX, HTML'e benzer bir sözdizimine sahiptir. Bu, geliştiricilerin HTML
      etiketleriyle benzer bir şekilde kullanıcı arayüzleri oluşturmasını sağlar.

  2. **JavaScript İfadeleri**: JSX içerisinde JavaScript ifadeleri **{}** içine alınarak
      kullanılabilir. Bu, dinamik içeriklerin kolayca kullanıcı arayüzüne entegre edilmesini sağlar.

  3. **Bileşen Yapısı**: JSX, React bileşenlerinin yapısal tanımını sağlar. Bileşenler, HTML etiketleri
      gibi JSX içerisinde kullanılabilir.

  4. **Öznitelikler ve Olaylar**: JSX, HTML özniteliklerine benzer öznitelikler (props) ve olayları
      (events) destekler. Böylece, bileşenlere özellikler aktarılabilir ve kullanıcı etkileşimleri yönetilebilir.

  5. **Daha İyi Okunabilirlik ve Bakım**: JSX, bileşenlerin yapısını ve davranışını aynı yerde tutarak
      kodun okunabilirliğini ve bakımını kolaylaştırır.

Basit bir JSX örneği:

```jsx
const element = <h1>Hello, world!</h1>;
```

Bu kod parçası, **h1** başlık etiketi içinde "Hello, world!" metnini içeren bir JSX ifadesidir. JSX, bu tarz
  yapıları daha doğal ve anlaşılır kılarak React geliştiricilerinin verimliliğini arttırır. JSX, yalnızca bir
  sözdizimidir ve tarayıcılar tarafından doğrudan anlaşılamaz. Bu nedenle, React uygulamaları yayınlanmadan önce bir
  derleyici (genellikle Babel) tarafından normal JavaScript koduna dönüştürülür.

### ReactJS Hello World!

URL: https://www.serhatvarli.com/tr/blog/reactjs-hello-world
Published: 2024-01-06 · Updated: 2026-10-05 · Category: ReactJS

"ReactJS Hello World" temelde, ReactJS kullanarak basit bir uygulama oluşturmanın ilk adımıdır. ReactJS, kullanıcı
  arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. "Hello World" programı, programlama
  öğreniminde genellikle ilk adım olarak kabul edilir ve yeni bir programlama dili veya teknolojisine giriş yapmak için
  kullanılır.

ReactJS'de "Hello World" programı genellikle şu adımları içerir:

  1. **React Kütüphanesinin Eklenmesi**: React ve ReactDOM kütüphaneleri projeye dahil edilir. Bu,
      genellikle bir HTML dosyasına React kütüphanelerinin **<script>** etiketleri ile eklenmesi veya bir
      Node.js projesinde **npm** veya **yarn** ile kütüphanelerin kurulması ile yapılır.

  2. **Bir Root DOM Elemanının Oluşturulması**: HTML'de, React bileşenlerinin eklenmesi için bir kök
      (**root**) DOM elemanı oluşturulur. Bu genellikle bir **<div>** etiketidir.

  3. **React Bileşeninin Yazılması**: En basit haliyle bir React bileşeni, ekranda gösterilecek içeriği
      tanımlar. "Hello World" örneğinde, bu genellikle sadece "Hello, World!" metnini döndüren bir fonksiyondur.

  4. **ReactDOM ile Bileşenin Sayfaya Render Edilmesi**: **ReactDOM.createRoot()** ile kök DOM elemanı için bir React kökü oluşturulur ve **root.render()** ile bileşen bu köke eklenir.

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloWorld />);
```

Bu kod, bir web sayfasında "Hello, World!" başlığını gösterir. Bu, ReactJS'nin temel kullanımını gösterir ve yeni başlayanlar için iyi bir başlangıç noktasıdır.

> **Not:** React 18 öncesinde bileşenler **ReactDOM.render(<HelloWorld />, document.getElementById('root'))** ile render ediliyordu. Bu yöntem React 18'de kullanımdan kaldırıldı, React 19'da ise tamamen kaldırıldı.

### Web Component Nedir?

URL: https://www.serhatvarli.com/tr/blog/web-component-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

**Web Component**, tarayıcıların doğal olarak desteklediği ve herhangi bir framework'e bağlı olmayan, yeniden kullanılabilir HTML öğeleri oluşturma standardıdır. Üç temel teknolojiden oluşur:

- **Custom Elements:** **customElements.define()** ile kendi HTML etiketinizi (ör. **<greeting-card>**) tanımlarsınız.

- **Shadow DOM:** Öğenin iç yapısını ve stillerini sayfanın geri kalanından yalıtır.

- **HTML Templates:** **<template>** ve **<slot>** ile yeniden kullanılabilir işaretleme tanımlanır.

## Vue bileşeni ile farkı

Vue bileşenleri yalnızca bir Vue uygulamasının içinde çalışır. Web Component ise saf bir HTML sayfasında, React veya Angular uygulamasında, hatta hiçbir framework olmadan kullanılabilir. Vue, bir bileşeni Web Component'e dönüştürmek için **defineCustomElement** fonksiyonunu sunar (bkz. [Vue.js Custom Element Nedir?](https://www.serhatvarli.com/tr/blog/custom-element-nedir)).

```javascript
import { defineCustomElement } from 'vue';

// Vue bileşenini bir Web Component sınıfına dönüştür
const GreetingCard = defineCustomElement({
  props: { name: String },
  template: `<p class="card">Merhaba, {{ name }}!</p>`,
  styles: [`.card { padding: 12px 16px; border-radius: 8px; background: #28e98c; color: #1f1f1f; }`],
});

customElements.define('greeting-card', GreetingCard);

// Artık normal bir HTML etiketi gibi kullanılabilir
document.body.innerHTML += '<greeting-card name="Dünya"></greeting-card>';
```

## Ne zaman tercih edilir?

- Bir bileşeni farklı teknolojilerle yazılmış projelerde paylaşmanız gerektiğinde (tasarım sistemi, gömülebilir widget).

- Stillerin sayfadan tamamen yalıtılması gerektiğinde.

Tek bir Vue uygulaması içinde ise normal Vue bileşenleri daha pratiktir: Vue'nun reaktivite, slot ve geliştirici araçları desteğinden tam olarak yararlanırsınız.

### VNode Nedir?

URL: https://www.serhatvarli.com/tr/blog/vnode-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'te bir **VNode**, ya da "Virtual Node", sanal DOM'da kullanılan bir objedir. Sanal DOM, gerçek DOM'un
  hafif bir temsilcisidir ve DOM güncellemelerinin daha etkili bir şekilde yapılmasına olanak tanır. **VNode**
  nesneleri, DOM'da gerçek düğümleri temsil eder, ancak daha az maliyetlidirler çünkü gerçek DOM işlemlerini içermezler.

Bir **VNode** şunları yapabilir:

  1. **DOM Elemanlarını Temsil Etme**: Her **VNode** bir DOM düğümünü temsil eder. Örneğin, bir
      div, span veya herhangi bir HTML elementi.

  2. **Componentleri Temsil Etme**: Vue componentleri de **VNode** ile temsil edilir. Bu,
      Vue'nun component hiyerarşisini sanal DOM üzerinde yönetmesine olanak tanır.

  3. **Reaktif Güncellemeler Sağlama**: Vue, uygulama durumunda bir değişiklik olduğunda, hangi
      **VNode**'ların etkilendiğini tespit eder ve sadece bu düğümleri gerçek DOM'da günceller. Bu, tüm DOM'un
      yeniden yüklenmesinden daha verimlidir.

  4. **Slotlar ve Çocuklarla Çalışma**: **VNode**lar, Vue'deki slot mekanizmasının ve çocuk
      componentlerin yönetiminde temel bir rol oynar.

Özetle, **VNode**, Vue.js'in sanal DOM implementasyonunun bir parçasıdır ve performansı artırmak, reaktif
  güncellemeleri kolaylaştırmak ve Vue uygulamalarının yapısal özelliklerini yönetmek için kullanılır.

### Virtual DOM Nedir?

URL: https://www.serhatvarli.com/tr/blog/virtual-dom-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'teki Sanal DOM (Virtual DOM) bir web uygulamasının kullanıcı arayüzünün hafif bir temsilidir. Sanal DOM,
  Vue.js gibi modern JavaScript çerçevelerinde yaygın olarak kullanılan bir kavramdır ve web uygulamalarının
  performansını ve verimliliğini artırmak amacıyla geliştirilmiştir. İşte bu konseptin temel unsurları:

  1. **Sanal DOM'un Tanımı:**
      Sanal DOM, gerçek DOM'un (Document Object Model) hafif bir kopyasıdır. DOM, bir web sayfasının yapısını ve
      içeriğini temsil eder. Sanal DOM ise, bu yapının JavaScript nesneleri kullanılarak oluşturulan bir temsilidir.

  2. **Neden Sanal DOM Kullanılır?**
      Gerçek DOM ile doğrudan etkileşim, performans açısından pahalı olabilir, özellikle büyük ve karmaşık web
      uygulamalarında. DOM güncellemeleri yavaş ve kaynak yoğun olabilir. Sanal DOM, bu etkileşimleri optimize ederek
      web uygulamalarının daha hızlı çalışmasını sağlar.

  3. **Çalışma Mekanizması:**
      Vue.js, uygulamanın durumunda bir değişiklik olduğunda, bu değişiklikleri önce Sanal DOM üzerinde gerçekleştirir.
      Daha sonra, yeni Sanal DOM'u bir önceki Sanal DOM ile karşılaştırır ve yalnızca değişen kısımları gerçek DOM'a uygular. Bu süreç, "diffing" adı verilen bir algoritma ile gerçekleştirilir.

  4. **Performans Artışı:**
      Sanal DOM kullanımı, gereksiz DOM manipülasyonlarını ve güncellemelerini azaltarak, uygulamanın performansını
      iyileştirir. Bu, özellikle kullanıcı etkileşimlerine hızlı yanıt veren dinamik uygulamalar için önemlidir.

  5. **Reaktif Güncellemeler:**
      Vue.js, reaktif bir sistem kullanır. Bu, uygulama verilerindeki değişikliklerin otomatik olarak algılanarak,
      ilgili bileşenlerin güncellenmesini sağlar. Sanal DOM, bu reaktif güncellemelerin hızlı ve verimli bir şekilde
      gerçekleştirilmesine yardımcı olur.

Özetle, Vue.js'teki Sanal DOM, web uygulamalarının daha hızlı ve etkili bir şekilde oluşturulmasını sağlayan bir
  tekniktir. Bu, geliştiricilere daha iyi kullanıcı deneyimi sunan, hızlı ve duyarlı web uygulamaları geliştirme olanağı
  tanır.

### VDOM Nedir?

URL: https://www.serhatvarli.com/tr/blog/vdom-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'in Sanal DOM (VDOM) kavramı, web uygulama performansını ve verimliliğini artırmak için kullanılan bir
  tekniktir. Bu kavram, modern web uygulama geliştirmede önemli bir rol oynar. İşte temel noktalar:

  1. **Sanal DOM Nedir?**
      Sanal DOM, gerçek DOM'un hafif bir kopyasıdır. Vue.js ve diğer modern JavaScript çerçeveleri, DOM güncellemelerini
      daha verimli hale getirmek için Sanal DOM'u kullanır.

  2. **Gerçek DOM İle Karşılaştırma:**
      Gerçek DOM ile etkileşim, özellikle büyük veya karmaşık arayüzlerde yavaş olabilir. Sanal DOM, bu etkileşimleri
      hızlandırmak için kullanılır. Gerçek DOM'da yapılacak her güncellemenin aksine, Sanal DOM'da yapılan değişiklikler
      hızlı ve maliyetsizdir.

  3. **Güncelleme Süreci:**
      Bir Vue bileşeninde veri değiştiğinde, Vue önce bu değişiklikleri Sanal DOM'da gerçekleştirir. Daha sonra, Sanal
      DOM'un yeni hâlini bir önceki Sanal DOM ile karşılaştırarak yalnızca değişen kısımları gerçek DOM'a uygular. Bu
      süreç, "diffing" olarak bilinir.

  4. **Performans Avantajları:**
      Sanal DOM kullanımı, uygulamanın performansını önemli ölçüde artırabilir. Gereksiz DOM güncellemelerinin
      önlenmesi, sayfa yüklenme süresini ve tepki süresini iyileştirir.

  5. **Reaktif Veri Güncellemeleri:**
      Vue.js, reaktif veri sistemi ile bileşenlerdeki veri değişikliklerini otomatik olarak takip eder. Veri
      değiştiğinde, Vue Sanal DOM'u günceller ve ardından gerçek DOM ile senkronize eder.

Sanal DOM, modern web geliştirmede önemli bir optimizasyon aracıdır ve Vue.js'in kullanıcı arayüzlerini hızlı ve
  etkili bir şekilde oluşturmasını sağlar. Bu yaklaşım, geliştiricilerin daha hızlı ve duyarlı uygulamalar
  geliştirmelerine olanak tanır.

### Template Ref Nedir?

URL: https://www.serhatvarli.com/tr/blog/template-ref-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de **ref** özelliği, bileşenlerin veya DOM elemanlarının referanslarını (references) tutmak için
  kullanılır. **ref** özelliği, Vue bileşenlerinde veya düz HTML elemanlarında kullanılabilir ve bu elemanlara
  JavaScript kodu üzerinden doğrudan erişim sağlar. **template** içinde kullanıldığında, bu özellik Vue'nun
  reaktif sisteminden bağımsız olarak DOM elemanlarına veya bileşen örneklerine erişim sağlar.

İşte **ref** özelliğinin temel kullanım özellikleri:

  1. **DOM Elemanlarına Erişim**: Bir HTML elemanına **ref** attribute'u ekleyerek, bu elemana
      Vue instance'ının **this.$refs** özelliği üzerinden erişebilirsiniz. Örneğin,
      **<input ref="myInput">** tanımlaması yapıldığında, **this.$refs.myInput** kodu ile bu
      input elemanına erişebilirsiniz.

  2. **Bileşen Örneklerine Erişim**: Eğer **ref** bir Vue bileşenine uygulanırsa,
      **this.$refs** üzerinden o bileşenin instance'ına (örneğine) erişebilirsiniz. Bu, bileşenin metodlarını
      veya verilerini doğrudan kullanmanıza olanak tanır.

  3. **Reaktif Olmayan**: **ref** özelliği reaktif bir özellik değildir. Yani, **ref**
      ile bağlanan bir eleman değiştiğinde, bu değişiklikler Vue'nun reaktif sistemine otomatik olarak yansımaz.

  4. **Component Lifecycle**: **ref** ile bağlanan elemanlar veya bileşenler, Vue bileşenlerinin
      yaşam döngüsü (lifecycle) bağlamında kullanılabilir. Örneğin, bileşen tamamen oluşturulduktan (mounted) sonra
      **ref** aracılığıyla bir DOM elemanına erişebilirsiniz.

**ref** özelliği, özellikle DOM manipülasyonları veya çocuk bileşenlerle doğrudan etkileşim gerektiren
  durumlar için kullanışlıdır. Ancak, Vue'nun reaktif sistemi ve deklaratif render mantığı çerçevesinde,
  **ref** kullanımının mümkün olduğunca sınırlı tutulması tavsiye edilir.

### Slot Nedir?

URL: https://www.serhatvarli.com/tr/blog/slot-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de "slot" kavramı, bileşenler arasında içerik dağıtımını sağlamak için kullanılır. Slotlar, bir bileşenin
  şablonunda tanımlanır ve bu slotları kullanan ebeveyn bileşenler tarafından doldurulabilirler. Bu, bileşenler arası
  içerik entegrasyonunu daha esnek ve yeniden kullanılabilir hale getirir.

İşte Vue.js slotlarının temel özellikleri:

  1. **Varsayılan Slotlar**: Eğer bir bileşenin şablonunda **<slot></slot>** etiketi
      kullanılmışsa, bu, ebeveyn bileşenlerin içeriğini kabul edebileceği bir yer olduğunu gösterir. Ebeveyn bileşen
      içeriği, slot etiketi arasına yerleştirilir.

  2. **İsimlendirilmiş Slotlar**: Slotlara isim vermek, daha spesifik içerik yerleştirme imkanı sunar.
      Örneğin, **<slot name="header"></slot>** şeklinde bir tanımlama yaparak, ebeveyn bileşenlerin
      sadece **header** isimli slot için özel içerik sağlamasına izin verebilirsiniz.

  3. **Scope Slotlar**: Bu slot türü, çocuk bileşenden veri almak ve bu verileri ebeveyn bileşenin
      şablonunda kullanmak için kullanılır. Scope slotlar sayesinde, bileşenler arasında daha dinamik bir veri akışı
      sağlanabilir.

  4. **Fallback İçerik**: Bir slot için ebeveyn bileşenden herhangi bir içerik sağlanmadığında
      gösterilecek varsayılan içeriği belirleyebilirsiniz.

Vue.js slotlarını kullanmak, bileşenlerin esnekliğini ve yeniden kullanılabilirliğini artırır, ve genellikle daha
  temiz ve anlaşılır kod yapısı sağlar. Bu özellik, özellikle büyük ve karmaşık uygulamalar geliştirirken çok yararlı
  olabilir.

Aşağıdaki örnekte **BaseCard** bileşeni bir isimli slot (**header**), bir varsayılan slot ve her ikisi için yedek (fallback) içerik tanımlıyor. İkinci kart hiç içerik almadığı için yedek metinleri gösterir:

```vue
<template>
  <base-card>
    <template #header>Kartın başlığı</template>
    Bu metin varsayılan slota yerleşir.
  </base-card>
  <base-card />
</template>

<script>
const BaseCard = {
  template: `
    <div class="card">
      <h3><slot name="header">Varsayılan başlık</slot></h3>
      <p><slot>İçerik verilmediğinde bu yedek metin görünür.</slot></p>
    </div>
  `,
};

export default {
  components: { BaseCard },
};
</script>

<style>
.card { margin-bottom: 12px; padding: 12px 16px; border: 1px solid #444; border-radius: 8px; }
</style>
```

### Single-File Component Nedir?

URL: https://www.serhatvarli.com/tr/blog/single-file-component-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'teki Single-File Components (SFC), Vue.js uygulamalarında kullanılan bir dosya formatıdır. Bu yaklaşım, bir
  Vue bileşeninin HTML, JavaScript ve CSS gibi farklı teknolojilerini tek bir dosyada birleştirmenize olanak tanır.
  Genellikle **.vue** uzantısı ile kaydedilen bu dosyalar, Vue.js ekosisteminde yaygın olarak kullanılır.

Single-File Component yapısı şu avantajları sunar:

  1. **Organizasyon**: HTML, JavaScript ve CSS kodlarını tek bir dosyada tutmak, bileşen bazlı
      geliştirmeyi daha düzenli ve yönetilebilir hale getirir.

  2. **Modülerlik**: Her bileşen kendi içinde izole edilir, bu da kodun tekrar kullanılabilirliğini ve
      bakımını kolaylaştırır.

  3. **Geliştirme Kolaylığı**: Vue.js'in CLI araçları ve webpack gibi yapılandırmalar, **.vue**
      dosyalarını kolayca işleyip uygulamaya entegre eder.

Bir Single-File Component genellikle üç ana bölümden oluşur:

  1. **<template>**: Bileşenin HTML yapısını içerir.

  2. **<script>**: Vue instance'ı ve JavaScript kodunu içerir.

  3. **<style>**: Bileşene özgü CSS stil tanımlarını içerir.

Bu yapı, Vue.js'in reaktif ve bileşen tabanlı doğasını destekleyerek, modern web uygulamalarının geliştirilmesini
  daha verimli ve etkili bir hale getirir.

### Side Effect Nedir?

URL: https://www.serhatvarli.com/tr/blog/side-effect-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Programlamada **side effect** (yan etki), bir fonksiyonun değer döndürmenin ötesinde dış dünyayı etkilemesidir: DOM'u değiştirmek, bir API'ye istek atmak, zamanlayıcı kurmak, **localStorage**'a yazmak ya da global bir değişkeni güncellemek gibi. Vue.js'de yan etkiler, reaktif durum değiştiğinde ya da bileşen ekrana geldiğinde çalıştırılan bu tür işlemlerdir.

## Yan etkiler nerede çalıştırılmalı?

- **Template ve computed içinde değil:** **computed** fonksiyonları yalnızca bir değer hesaplamalıdır. İçlerinde istek atmak veya başka bir durumu değiştirmek beklenmedik döngülere ve hatalara yol açar.

- **watch / watchEffect:** Reaktif bir değer değiştiğinde yapılacak işler için kullanılır (ör. arama kutusu değişince API'den sonuç getirmek).

- **Yaşam döngüsü kancaları:** Bileşen ekrana geldiğinde yapılacak işler **onMounted** içinde, temizlik ise **onUnmounted** içinde yapılır.

## Temizlik (cleanup)

Kurulan her yan etki, bileşen kaldırıldığında ya da etki yeniden çalışmadan önce temizlenmelidir; aksi halde zamanlayıcılar ve olay dinleyicileri birikerek bellek sızıntılarına yol açar.

```javascript
import { createApp, ref, watchEffect } from 'vue';

createApp({
  setup() {
    const seconds = ref(0);
    const running = ref(true);

    // Yan etki: running true olduğunda bir zamanlayıcı kurar
    watchEffect((onCleanup) => {
      if (!running.value) return;
      const id = setInterval(() => seconds.value++, 1000);
      // Etki yeniden çalışmadan veya bileşen kaldırılmadan önce zamanlayıcıyı temizle
      onCleanup(() => clearInterval(id));
    });

    return { seconds, running };
  },
  template: `
    <p>Geçen süre: {{ seconds }} sn</p>
    <button @click="running = !running">{{ running ? 'Durdur' : 'Devam et' }}</button>
  `,
}).mount('#app');
```

Bu örnekte zamanlayıcı bir yan etkidir. **onCleanup** sayesinde "Durdur" düğmesine basıldığında zamanlayıcı temizlenir; "Devam et" ile yeniden kurulur.

Özetle yan etkiler kaçınılmazdır; uygulamaların asıl işi çoğunlukla onlarla yapılır. Önemli olan onları doğru yerde (watch, watchEffect, yaşam döngüsü kancaları) çalıştırmak ve her zaman temizlemektir.

### SFC Nedir?

URL: https://www.serhatvarli.com/tr/blog/sfc-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js Single File Components (SFC) nedir diye soruyorsanız, Vue.js ile ilgili oldukça önemli bir konseptten
  bahsediyoruz. Vue.js, popüler bir JavaScript çerçevesidir ve SFC, Vue.js'in kullanımını ve geliştirmeyi kolaylaştıran
  bir yapıdır. İşte SFC'nin ana özellikleri:

  1. **Tek Dosya Yapısı**: Bir Vue SFC, genellikle **.vue** uzantısı ile kaydedilen tek bir
      dosyadır. Bu dosya, bir Vue bileşeninin üç ana bölümünü içerir: template, script ve style.

  2. **Template Bölümü**: Bu kısım, bileşenin HTML yapısını tanımlar. Vue.js'in reaktif özellikleri ve
      direktifleri burada kullanılır.

  3. **Script Bölümü**: JavaScript kodu bu kısımda yer alır. Bileşenin verileri, yöntemleri, hesaplanmış
      özellikleri ve yaşam döngüsü kancaları gibi özellikleri bu bölümde tanımlanır.

  4. **Style Bölümü**: Bileşene özel stiller bu bölümde tanımlanır. CSS, SCSS gibi stil dilleri
      kullanılabilir. Ayrıca, stillerin yalnızca bu bileşene özgü olması için "scoped" özelliği kullanılabilir.

  5. **Modülerlik ve Yeniden Kullanım**: SFC yapısı, Vue bileşenlerinin modüler ve yeniden kullanılabilir
      olmasını sağlar. Her bileşen kendi içinde tamamlanmış ve bağımsızdır, bu da kodun bakımını ve yönetimini
      kolaylaştırır.

  6. **Geliştirme Kolaylığı**: Vue SFC'ler, Vue.js projelerinde bileşen tabanlı geliştirmeyi
      basitleştirir. Geliştiriciler, bileşenlerin yapısını, davranışını ve stilini tek bir dosyada kolayca görebilir ve
      yönetebilirler.

Vue.js SFC'ler, modern web uygulamalarının geliştirilmesinde etkinlik ve düzenlilik sağlayarak, Vue.js'in
  popülerliğinin temel taşlarından biri haline gelmiştir.

### Scoped Slot Nedir?

URL: https://www.serhatvarli.com/tr/blog/scoped-slot-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de "scoped slot" (kapsamlı yuva), bir bileşenin içeriğini dışarıdan gelen verilerle özelleştirmek için kullanılan bir özelliktir. Bu, bir ebeveyn bileşenin, çocuk bileşenin içeriğine veri aktarmasına olanak tanır. Temel olarak, ebeveyn bileşen, çocuk bileşenin slot'una belirli bir yapı (HTML, diğer bileşenler, vb.) ve veri gönderebilir.

Scoped slot'lar, Vue.js'te yeniden kullanılabilir bileşenler oluştururken esneklik sağlar. Bir bileşenin içeriği, ebeveyn bileşenden geçirilen verilere göre dinamik olarak değişebilir. Bu, birçok farklı durumda aynı bileşeni kullanma esnekliği sağlar.

Örnek kullanım:

    1. Çocuk Bileşen: Çocuk bileşen bir **<slot>** etiketi içerir. Bu slot etiketi, scoped slot olarak işaretlenir ve çocuk bileşenden veri geçirmek için kullanılır.

```vue
<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :user="userData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: { name: 'John Doe', age: 30 }
    };
  }
};
</script>
```

    2. Ebeveyn Bileşen: Ebeveyn bileşen, çocuk bileşenin slot'una kendi içeriğini ve verisini gönderir.

```vue
<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:default="slotProps">
      <p>User Name: {{ slotProps.user.name }}</p>
      <p>User Age: {{ slotProps.user.age }}</p>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>
```

Bu örnekte, **ChildComponent** bileşeni, kullanıcı verisini içeren bir slot sunar ve **ParentComponent** bu slot'u, veriyi göstermek için kendi HTML yapısıyla doldurur. Scoped slot kullanımı, bileşenler arası veri iletişimini ve yeniden kullanımı kolaylaştırır.

### Scheduler Nedir?

URL: https://www.serhatvarli.com/tr/blog/scheduler-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de **scheduler** (zamanlayıcı), reaktif veri değiştiğinde yapılacak işleri — bileşenlerin yeniden render edilmesi, **watch** geri çağrıları — bir kuyrukta toplayan ve uygun anda topluca çalıştıran iç mekanizmadır. Vue, bir değişikliği gördüğü anda DOM'u güncellemez; aynı "tick" içinde yapılan tüm değişiklikleri biriktirir ve DOM'u bir kez günceller.

## Neden bir kuyruk?

Bir olay işleyicisinde aynı değeri üç kez değiştirdiğinizi düşünün. Her değişiklikte DOM güncellenseydi gereksiz yere üç kez render yapılırdı. Scheduler bu işleri tekilleştirir: her bileşen bir tick içinde en fazla bir kez yeniden render edilir.

## nextTick

Bu yüzden bir değeri değiştirdikten hemen sonra DOM henüz eski halindedir. DOM'un güncellenmesini beklemek için **nextTick** kullanılır. Aşağıdaki örneği çalıştırıp düğmeye tıklayın ve konsolu izleyin:

```javascript
import { createApp, ref, nextTick } from 'vue';

createApp({
  setup() {
    const count = ref(0);

    async function increment() {
      count.value++;
      count.value++;
      count.value++;
      // DOM henüz güncellenmedi: eski değer görünür
      console.log('Değişiklikten hemen sonra:', document.getElementById('counter').textContent);

      await nextTick();
      // Scheduler kuyruğu işledi: DOM tek seferde güncellendi
      console.log('nextTick sonrasında:', document.getElementById('counter').textContent);
    }

    return { count, increment };
  },
  template: `
    <p id="counter">{{ count }}</p>
    <button @click="increment">3 kez artır</button>
  `,
}).mount('#app');
```

## watch zamanlaması (flush)

**watch** ve **watchEffect** geri çağrılarının ne zaman çalışacağı da scheduler tarafından belirlenir ve **flush** seçeneğiyle değiştirilebilir:

- **'pre'** (varsayılan): Bileşen güncellenmeden önce çalışır.

- **'post'**: DOM güncellendikten sonra çalışır; güncel DOM'a erişmeniz gerekiyorsa kullanılır (**watchPostEffect** kısayolu).

- **'sync'**: Değer değiştiği anda, kuyruğa alınmadan çalışır; performans açısından dikkatli kullanılmalıdır.

> **Not:** Takvim ve etkinlik planlama arayüzleri için kullanılan "scheduler" bileşenleri, Vue'nun bu iç mekanizmasıyla ilgili değildir; bunlar üçüncü taraf kütüphanelerdir.

### Render Function Nedir?

URL: https://www.serhatvarli.com/tr/blog/render-function-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

**Render function** (render fonksiyonu), bir bileşenin ekranda nasıl görüneceğini şablon (template) yerine JavaScript ile tanımlamanın yoludur. Vue'da şablonlar derleme sırasında zaten render fonksiyonlarına dönüştürülür; render fonksiyonu yazmak, bu adımı elle yapmak demektir.

## h() fonksiyonu

Vue'da render fonksiyonları **h()** ile sanal DOM düğümleri (VNode) üretir. **h(etiket, öznitelikler, çocuklar)** şeklinde çağrılır:

```javascript
import { createApp, h, ref } from 'vue';

const Counter = {
  setup() {
    const count = ref(0);
    // setup bir fonksiyon döndürürse bu fonksiyon render fonksiyonu olur
    return () =>
      h('div', [
        h('p', `Sayaç: ${count.value}`),
        h('button', { onClick: () => count.value++ }, 'Artır'),
      ]);
  },
};

createApp(Counter).mount('#app');
```

Bu bileşen, şablonla yazılmış bir sayaçla aynı sonucu verir. Reaktif **count** değiştiğinde render fonksiyonu yeniden çalışır ve Vue yalnızca değişen kısmı DOM'da günceller.

## Ne zaman kullanılır?

- Çıktının yapısı çok dinamik olduğunda (ör. seviyesi parametreyle belirlenen bir başlık: h1–h6).

- Kütüphane bileşenleri yazarken slotları ve VNode'ları programatik olarak işlemek gerektiğinde.

- JSX tercih edildiğinde (Vue, Babel veya Vite eklentisiyle JSX'i de destekler).

Çoğu bileşen için şablonlar daha okunurdur ve derleyici optimizasyonlarından daha fazla yararlanır; bu yüzden render fonksiyonları genellikle özel durumlar için tercih edilir.

> **Not:** React'te de benzer bir kavram vardır: sınıf bileşenlerinin **render()** metodu ve fonksiyon bileşenlerinin döndürdüğü JSX, ekranda gösterilecek elemanları tanımlar.

### Ref Nedir?

URL: https://www.serhatvarli.com/tr/blog/ref-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de **ref** özelliği, Vue bileşenlerinde veya DOM elemanlarında referanslar oluşturmak
    için
    kullanılır. Bu özellik, Vue uygulamasının JavaScript kısmından, şablon içindeki belirli bir DOM elemanına veya
    bileşene doğrudan erişim sağlar. Bu, geleneksel DOM manipülasyonu metodlarına bir alternatif olarak Vue'nun reaktif
    sistemi içinde kalmanıza yardımcı olur.

## ref Kullanımı:

    1. **DOM Elemanlarına Erişim:**
            Şablon içinde bir DOM elemanına **ref** attribute'u ekleyerek, bu elemana Vue örneği
            üzerinden
            erişebilirsiniz.

```vue
<template>
  <div ref="myDiv">Merhaba Dünya!</div>
</template>

<script>
export  default {
  mounted() {
    console.log(this.$refs.myDiv);
    //DOM elemanına erişim sağlar
  }
}
</script>
```

    2. **Bileşenlere Erişim:**
            Başka bir bileşene **ref** attribute'u ekleyerek, o bileşenin örneklemesine
            (instance) ve onun
            metodlarına, verilerine erişim sağlayabilirsiniz.

```vue
<ChildComponent ref="myComponent" />

  <script>
export  default {
  methods: {
    doSomething() {
      this.$refs.myComponent.someMethod();
      // ChildComponent üzerinde bir metodu çağırır
    }
  }
}
</script>
```

## Önemli Noktalar:

    1. **$refs** Vue örneğinde bir objedir ve **ref** ile belirlenen
        elemanlara erişim sağlar. Ancak,
        bu özellikler reaktif değildir. Yani **$refs** üzerinde yapılan değişiklikler Vue'nun
        reaktif sistemine
        dahil edilmez ve değişiklikleri izlemez.

    2. **ref**, bileşenin ya da DOM elemanının oluşturulduğu anda atanır ve **mounted** ömrü boyunca
        erişilebilir olur. **beforeMount** aşamasında **$refs** içeriği
        boştur.

    3. Dinamik olarak çok sayıda eleman oluşturuyorsanız (örneğin, v-for ile), her bir elemana benzersiz bir
        **ref** atamak yerine, aynı **ref** ismini kullanarak bir array
        oluşturabilirsiniz. Vue, her
        bir eleman için bu array'a bir referans ekleyecektir.

Vue.js'te **ref** kullanımı, özellikle DOM'a doğrudan müdahale gerektiğinde veya çocuk
    bileşenlerin
    metodlarını çağırmak gibi durumlarda oldukça yararlıdır. Ancak, Vue'nun reaktif sistemini ve veri akışını bozmamak
    için dikkatli kullanılmalıdır.

### Reactivity API Nedir?

URL: https://www.serhatvarli.com/tr/blog/reactivity-api-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'in Reactivity API'si, Vue.js uygulamalarında veri durumunu yönetmek ve kullanıcı arayüzünü otomatik olarak
    güncellemek için kullanılan bir sistemdir. Vue.js, reaktif veri bağlama ve DOM güncellemeleri için bir dizi araç ve
    yaklaşım sunar. Bu özellikler, uygulamanın veri durumundaki değişiklikleri izlemesine ve bu değişikliklere tepki
    göstermesine olanak tanır.

Reactivity API'nin çekirdeği **ref**, **reactive**, **computed**, **watch** ve **watchEffect** fonksiyonlarıdır. Bu sistemle birlikte çalışan temel parçalar şunlardır:

    1. **Reactive Data**: Vue.js, JavaScript nesnelerini "reaktif" hale getirir. Bu, bir nesnenin
            özelliklerindeki değişikliklerin otomatik olarak izlenebilmesi ve bunlara tepki verilebilmesi anlamına
            gelir.

    2. **Computed Properties**: Hesaplanan özellikler, diğer veri kaynaklarına bağlı olarak dinamik
            olarak hesaplanan reaktif verilerdir. Bu özellikler, temel veriler değiştiğinde otomatik olarak yeniden
            hesaplanır.

    3. **Watchers**: Vue.js'te izleyiciler, belirli veri ya da hesaplanan özelliklerdeki değişikliklere
            yanıt olarak özel davranışlar gerçekleştirmek için kullanılır. Bu, veri değişikliklerine daha karmaşık
            tepkiler vermeyi mümkün kılar.

    4. **Directives**: Vue.js, DOM güncellemelerini yönetmek için özel HTML öznitelikleri sağlar.
            Örneğin, **v-bind** ve **v-model** direktifleri, HTML öğelerini Vue.js veri modeline
            bağlamak için kullanılır.

    5. **Virtual DOM**: Vue.js, DOM güncellemelerini optimize etmek için sanal DOM kullanır. Bu, gerçek
            DOM üzerinde minimum değişiklik yaparak uygulamanın performansını artırır.

Vue.js'in Reactivity API'si, modern web uygulamalarının dinamik ve etkileşimli kullanıcı arayüzleri oluşturmasına
    olanak tanırken, kod karmaşıklığını ve performans maliyetlerini azaltır. Bu API, veri akışını ve kullanıcı arayüzü
    güncellemelerini kolaylaştırarak geliştiricilere zaman kazandırır ve daha sezgisel bir geliştirme deneyimi sunar.

### Reactivity Nedir?

URL: https://www.serhatvarli.com/tr/blog/reactivity-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de reaktivite (reactivity), uygulamanın veri değişikliklerine otomatik olarak tepki vermesini sağlayan bir
    sistemdir. Bu sistem, Vue.js'in temelini oluşturur ve uygulamanın veri durumunu etkili bir şekilde yönetmesine imkan
    tanır. İşte Vue.js reaktivite sisteminin ana özellikleri:

    1. **Reaktif Veri**: Vue, uygulamanın veri modelini izler ve veri öğelerinde yapılan değişiklikleri
            otomatik olarak algılar. Bu veri öğeleri, genellikle Vue örneklerinin **data** fonksiyonunda
            tanımlanır.

    2. **Bağımlılık İzleme**: Vue, veri öğelerinin kullanıldığı yerleri izler. Böylece, bir veri öğesi
            değiştiğinde, bu veriye bağlı olan tüm bileşenler ve hesaplamalar otomatik olarak güncellenir.

    3. **Reaktif Getter ve Setterlar**: Vue, veri öğelerini reaktif yapmak için getter ve setter
            metodları kullanır. Bu metodlar, veriye erişildiğinde ve veri değiştiğinde tetiklenir, böylece Vue
            reaktivite sistemi devreye girer.

    4. **Hesaplanmış Özellikler (Computed Properties)**: Hesaplanmış özellikler, diğer veri öğelerine
            bağlı olan ve bu veri öğelerindeki değişikliklere bağlı olarak yeniden hesaplanan reaktif özelliklerdir. Bu
            özellikler, verimlilik açısından önemlidir çünkü yalnızca bağımlı oldukları veriler değiştiğinde yeniden
            hesaplanırlar.

    5. **İzleyiciler (Watchers)**: İzleyiciler, belirli veri öğeleri üzerindeki değişiklikleri izlemek
            ve bu değişikliklere yanıt vermek için kullanılır. Örneğin, bir veri öğesi değiştiğinde belirli bir işlemi
            tetiklemek için kullanılabilirler.

    6. **Olay Döngüsü ve Asenkron Güncellemeler**: Vue, veri değişikliklerini asenkron olarak işler, bu
            da uygulamanın verimli çalışmasını sağlar. Veri değişiklikleri bir olay döngüsünde sıraya konur ve etkin bir
            şekilde işlenir.

Reaktivite sistemi sayesinde, Vue.js geliştiricilere, veri ve kullanıcı arayüzü arasında güçlü ve sezgisel bir
    bağlantı sağlayarak, dinamik ve interaktif web uygulamaları oluşturma imkanı sunar. Bu sistem, modern web
    geliştirmede önemli bir kolaylık ve verimlilik getirir.

> **Not:** Vue 2 reaktiviteyi **Object.defineProperty** ile tanımlanan getter ve setter'larla sağlıyordu; Vue 3 ise JavaScript'in **Proxy** nesnelerini kullanır. Bu sayede Vue 3, nesneye sonradan eklenen özellikleri ve dizi indekslerini de otomatik olarak izleyebilir.

### Reactive Effect Nedir?

URL: https://www.serhatvarli.com/tr/blog/reactive-effect-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de "reaktif etki" (reactive effect), veri değişikliklerine yanıt olarak otomatik olarak yürütülen
    fonksiyonları ifade eder. Bu kavram, Vue.js'in reaktif sistemine dayanır. İşte temel özellikleri:

    1. **Reaktif Veri**: Vue, bir uygulamanın veri modelini reaktif olarak yönetir. Bu, bir veri öğesi
            değiştiğinde, Vue bu değişikliğin farkına varır.

    2. **Etki Fonksiyonları (Effects)**: Bu, veri değişikliklerine yanıt olarak çalışan
            fonksiyonlardır. Örneğin, bir veri öğesi değiştiğinde, ilgili DOM güncellemeleri veya hesaplamaları
            tetikleyebilir.

    3. **Bağımlılık İzleme**: Vue, hangi reaktif verinin hangi etkileri tetiklediğini izler. Böylece,
            bir veri öğesi değiştiğinde, yalnızca o veriye bağlı etkileri yürütür.

    4. **Otomatik Yeniden Hesaplama**: Bir veri öğesi değiştiğinde, Vue otomatik olarak ilgili etkileri
            yeniden çalıştırır. Bu, veriler ve kullanıcı arayüzü arasında sürekli bir senkronizasyon sağlar.

    5. **Kullanım Kolaylığı**: Vue.js, bu reaktif sistemi geliştirici için şeffaf ve kolay kullanılır
            bir şekilde sunar. Geliştiricilerin büyük bir kısmı bu mekanizmanın iç işleyişini düşünmeden uygulamalarını
            oluşturabilirler.

Özetle, Vue.js'de reaktif etki, uygulamanın veri değişikliklerine akıllıca ve verimli bir şekilde yanıt vermesini
    sağlayan bir mekanizmadır. Bu, modern web uygulamalarının dinamik ve interaktif olmasını kolaylaştırır.

### Provide / Inject Nedir?

URL: https://www.serhatvarli.com/tr/blog/provide-inject-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de **provide** ve **inject** seçenekleri, bileşen hiyerarşisinde derinlemesine yerleşmiş bileşenler arasında veri aktarmak için kullanılır. Bu özellikler, özellikle büyük ve karmaşık uygulamalarda, doğrudan parent-child ilişkisi olmayan bileşenler arasında veri paylaşımını kolaylaştırır. **provide** ve **inject**, Vue.js'in reaktif veri sistemiyle entegre şekilde çalışır ve veri akışını yönetmek için güçlü bir yöntem sunar.

## Provide

**provide** seçeneği, bir bileşenin alt bileşenlerine veri veya metot sağlamak için kullanılır. Sağlanan veri veya metot, hiyerarşide daha alt seviyedeki tüm bileşenler tarafından erişilebilir hale gelir.

Bir bileşen içinde **provide** fonksiyonu tanımlanır ve bu fonksiyon, sağlanacak verileri veya metotları döndürür:

```vue
export  default {
  provide() {
    return {
      sharedData: this.someData
    };
  },
  data() {
    return {
      someData: 'Bu veri alt bileşenlerle paylaşılacak'
    };
  }
};
```

## Inject

  **inject** seçeneği, bir üst bileşen tarafından **provide** ile sağlanan veriyi veya metodu kullanmak için alt bileşenlerde tanımlanır. **inject** kullanılarak, bir üst bileşenden sağlanan veri veya metot doğrudan alt bileşen içinde kullanılabilir hale gelir.

```vue
export  default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData);
    //"Bu veri alt bileşenlerle paylaşılacak" çıktısını verir
  }
};
```

## Kullanım Senaryoları ve Limitler

    1. **provide** ve **inject** özellikle geniş bileşen ağaçlarında, doğrudan üst-alt bileşen ilişkisi
      olmayan durumlarda yararlıdır.

    2. Bu yöntem, genellikle global durum yönetimi için bir alternatif olarak değil, özel durumlarda kullanılır.

    3. **provide** ve **inject**, reaktif değillerdir, yani **provide** ile sağlanan veri
      değiştiğinde, bu değişiklik otomatik olarak **inject** yoluyla erişen bileşenlere yansımaz. Ancak, sağlanan
      veri bir reaktif obje ise (örneğin, Vue'nun **reactive** fonksiyonu ile oluşturulmuşsa), bu veride yapılan
      değişiklikler reaktif olarak yansır.

    4. **provide** ve **inject** kullanımı, bazen uygulamanın takip edilmesini zorlaştırabilir, çünkü
      verinin hangi üst bileşenden geldiği şablonlara bakarak doğrudan görülemez. Bu nedenle, bu özellikleri
      dikkatli ve gerektiğinde kullanmak önemlidir.

### Prop Nedir?

URL: https://www.serhatvarli.com/tr/blog/prop-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de bir "prop" ("property" kelimesinin kısaltması), bir bileşenden diğerine veri aktarmak için kullanılan bir mekanizmadır.
    Genellikle, bir üst bileşenden (parent) bir alt bileşene (child) veri geçmek için kullanılır. Props, Vue.js'in
    reaktif veri akışının temel bir parçasıdır ve bileşenler arasında tek yönlü bir veri bağlantısı oluşturur.

Prop'ların temel özellikleri şunlardır:

    1. **Tek Yönlü Veri Akışı**: Prop'lar, üst bileşenden alt bileşene doğru tek yönlü bir
            veri akışı
            sağlar. Alt bileşen, gelen prop'u okuyabilir ama doğrudan değiştiremez. Eğer alt bileşen, prop üzerinde bir
            değişiklik yapmak istiyorsa, genellikle bir olay (event) yayınlayarak bu bilgiyi üst bileşene iletir.

    2. **Validasyon ve Tip Kontrolü**: Vue.js, prop'lar için tip kontrolü ve validasyon
            sağlar. Bir
            bileşen, kabul ettiği prop'ların tiplerini, zorunlu olup olmadıklarını ve varsayılan değerlerini
            tanımlayabilir. Bu, bileşenlerin daha güvenilir ve hata karşı daha dayanıklı olmasını sağlar.

    3. **Reaktiflik**: Prop'lar Vue'nun reaktif sistemine dahildir. Bir üst bileşende bir
            prop'un
            değeri değiştiğinde, bu değişiklik otomatik olarak ilgili alt bileşene yansıtılır ve ilgili bileşen yeniden
            render edilir.

    4. **Özelleştirilebilirlik**: Prop'lar, bileşenleri özelleştirmek ve yeniden
            kullanılabilir hale
            getirmek için kullanılır. Farklı veriler ile aynı bileşeni tekrar tekrar kullanabilirsiniz, bu da kod
            tekrarını azaltır ve uygulamanın bakımını kolaylaştırır.

Prop'ları tanımlamak için, bir bileşenin **props** seçeneğinde, kabul edeceği prop'ların
    isimlerini ve isteğe bağlı olarak tiplerini, varsayılan değerlerini ve diğer validasyon kurallarını belirtirsiniz.
    Örneğin:

```vue
Vue.component('my-component', {
  props: {
    // Basit tanımlama
    title: String,
    // Tip ve varsayılan değer ile daha detaylı tanımlama
    likes: {
      type: Number,
      default: 0
    },
    //Zorunlu ve tip kontrolü ile tanımlama
    isPublished: {
      type: Boolean,
      required: true
    }
  }
});
```

Bu şekilde, bileşenler arasında temiz ve anlaşılır bir veri akışı sağlanmış olur.

### Plugin Nedir?

URL: https://www.serhatvarli.com/tr/blog/plugin-nedir
Published: 2024-01-06 · Updated: 2026-10-05 · Category: VueJS

Vue.js plugin, Vue.js uygulamalarında kullanılmak üzere tasarlanmış bir ek özellik veya işlevsellik setidir.
    Genellikle, Vue.js çekirdek yeteneklerini genişletmek, yeniden kullanılabilir bileşenler veya direktifler eklemek,
    veya uygulamaları daha modüler ve esnek hale getirmek için kullanılırlar.

Vue.js plugin'leri şunları içerebilir:

    1. **Global Metodlar veya Özellikler**: Plugin, Vue'nun prototipine global metodlar veya özellikler
            ekleyebilir. Bu, tüm Vue örneklerinde bu metodların veya özelliklerin kullanılabilmesini sağlar.

    2. **Özel Direktifler**: Vue.js, özel direktifler yoluyla DOM üzerinde daha fazla kontrol
            sağlayabilir. Plugin'ler bu tür direktifler ekleyerek, özel davranışlar veya etkileşimler sunabilir.

    3. **Filtreler**: Vue.js, veri biçimlendirmesi için filtreler kullanır. Plugin'ler, uygulamalarda
            kullanılmak üzere yeni filtreler ekleyebilir.

    4. **Bileşenler**: Yeniden kullanılabilir bileşenler veya UI kitleri, plugin'ler aracılığıyla
            Vue.js uygulamalarına entegre edilebilir.

    5. **Mixin'ler**: Mixin'ler, Vue bileşenlerine işlevsellik eklemek için kullanılır. Plugin'ler,
            global mixin'ler sağlayarak, tüm bileşenlere ortak işlevsellikler ekleyebilir.

    6. **Uygulama Seçenekleri**: Bazı plugin'ler, Vue uygulamasının başlangıç aşamasında özel
            konfigürasyon veya işlevsellik eklemek için kullanılabilir.

Vue.js plugin'lerinin kullanımı, Vue.use() metodu ile yapılır. Bu metod, plugin'leri Vue uygulamasına entegre etmeyi
    ve gerekirse başlangıçta bazı ayarlar yapmayı sağlar. Örneğin, bir yönlendirme kütüphanesi veya durum yönetim
    kütüphanesi, Vue.js uygulamalarına bu şekilde eklenebilir.

Aşağıda, Vue 3 ile yazılmış basit bir eklenti örneği bulunuyor. Eklenti, tüm bileşenlere bir **$formatPrice** yardımcı metodu ve bir **v-focus** direktifi ekliyor:

```javascript
import { createApp } from 'vue';

const pricePlugin = {
  install(app, options) {
    // Tüm bileşenlerde kullanılabilen global bir metot
    app.config.globalProperties.$formatPrice = (value) =>
      new Intl.NumberFormat('tr-TR', { style: 'currency', currency: options.currency }).format(value);

    // Global bir direktif: öğe ekrana gelince ona odaklanır
    app.directive('focus', { mounted: (element) => element.focus() });
  },
};

const app = createApp({
  template: `
    <p>Fiyat: {{ $formatPrice(1499.9) }}</p>
    <input v-focus placeholder="Otomatik odaklanır" />
  `,
});

app.use(pricePlugin, { currency: 'TRY' });
app.mount('#app');
```

> **Not (Vue 3):** Vue 3'te eklentiler **Vue.use()** yerine uygulama örneği üzerinden **app.use()** ile kurulur; global özellikler **Vue.prototype** yerine **app.config.globalProperties** ile eklenir. Filtreler (filters) Vue 3'te kaldırılmıştır; yerine metotlar veya computed özellikler kullanılır.

### Options API Nedir?

URL: https://www.serhatvarli.com/tr/blog/options-api-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue.js'in Options API'si, Vue bileşenlerini tanımlamak için kullanılan bir yapıdır. Vue'nun ilk sürümlerinden beri bileşen tanımlamanın temel yoludur. Bir Vue bileşeni oluştururken, çeşitli seçenekler (options) tanımlayarak bileşenin nasıl davranacağını belirlersiniz. Bu seçenekler, bileşenin verilerini, özelliklerini, hesaplanmış özelliklerini, yöntemlerini, yaşam döngüsü kancalarını (lifecycle hooks) ve daha fazlasını içerebilir. İşte bazı temel seçenekler:

  1. **Data**: Bileşenin reaktif verilerini tanımlar. Bu veriler, kullanıcı arayüzünde dinamik olarak güncellenir.

  2. **Methods**: Bileşenin yöntemlerini tanımlar. Bu yöntemler, olay işleyicileri (event handlers) gibi çeşitli işlevler için kullanılabilir.

  3. **Computed**: Hesaplanmış özelliklerdir. Veriler üzerinde işlem yaparak yeni veriler üretir ve bu veriler de reaktif özellikler taşır.

  4. **Watch**: Bileşenin belirli verileri veya hesaplanmış özellikleri izlemesini sağlar. İzlenen veri değiştiğinde, belirtilen fonksiyon çalıştırılır.

  5. **Props**: Bileşene dışarıdan veri aktarmak için kullanılır. Üst bileşenden alt bileşenlere veri aktarımında önemlidir.

  6. **Lifecycle Hooks**: Bileşenin yaşam döngüsü boyunca çeşitli aşamalarda çalıştırılan fonksiyonlardır (örneğin **created**, **mounted**, **updated**, **destroyed**).

  7. **Components**: Bileşen içinde kullanılacak alt bileşenleri tanımlar.

  8. **Directives**: Özel Vue direktiflerini tanımlamak için kullanılır.

  9. **Filters**: Metin formatlaması için kullanılan filtreleri tanımlar (Vue 3'te kaldırılmıştır).

Options API, Vue.js'in temelini oluşturur ve genellikle basit ve anlaşılır bir yapı sunar. Vue 3 ile birlikte Composition API da tanıtılmıştır, ancak Options API hala yaygın olarak kullanılmaktadır. Composition API, daha büyük ve karmaşık uygulamalar için daha esnek ve organize bir yapı sağlarken, Options API daha basit ve hızlı başlamak için uygun bir seçenektir.

> **Not (Vue 3):** Vue 3'te **destroyed** kancası **unmounted**, **beforeDestroy** ise **beforeUnmount** olarak yeniden adlandırılmıştır.

### Named Slot Nedir?

URL: https://www.serhatvarli.com/tr/blog/named-slot-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de "named slot" (isimlendirilmiş slot), bir bileşenin farklı içerikler alabilmesi için kullanılan bir yapıdır. Standart slotlar, bileşenler arası içerik aktarımı sağlarken, named slotlar bu işlemi daha düzenli ve kontrollü bir şekilde yapmanıza olanak tanır.

Bir bileşenin birden fazla slotuna özel içerik yerleştirmek istediğinizde, her bir slot için bir isim belirleyerek, hangi içeriğin hangi slota gideceğini belirleyebilirsiniz. Bu, özellikle karmaşık bileşenlerde içeriği düzenli tutmak için çok yararlıdır.

Örnek olarak:

```vue
<!-- ParentComponent.vue -->
<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Bu başlık için özel içerik</h1>
    </template>

    <template v-slot:default>
      <p>Bu varsayılan slot içeriği</p>
    </template>

    <template v-slot:footer>
      <footer>Bu footer için özel içerik</footer>
    </template>
  </ChildComponent>
</template>
```

Bu örnekte, **ChildComponent** isimli bir bileşen üç farklı named slot (**header**, **default**, **footer**) içeriyor. Ebeveyn bileşen, bu slotları **<template v-slot:slot_adı>** şeklinde kullanarak her birine özel içerik sağlayabiliyor. Bu sayede, **ChildComponent** içerisinde bu slotların hangi içeriği göstereceğini kolaylıkla yönetebilirsiniz.

Bu slotları tanımlayan **ChildComponent** bileşeni ise şöyle görünür:

```vue
<!-- ChildComponent.vue -->
<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>
```

İsimsiz **<slot>** öğesi "default" slottur. Kısaltma olarak **v-slot:header** yerine **#header** da yazılabilir.

### Macro Nedir?

URL: https://www.serhatvarli.com/tr/blog/macro-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue.js dünyasında "macro" (makro) denildiğinde genellikle iki şey kastedilir: Vue'nun kendi **derleyici makroları** ve topluluk tarafından geliştirilen **Vue Macros** projesi. İkisinin ortak noktası, derleme sırasında normal koda dönüştürülmeleri ve çalışma zamanına ek maliyet getirmemeleridir.

## 1. Derleyici makroları

Derleyici makroları, **<script setup>** içinde import edilmeden kullanılan fonksiyonlardır: **defineProps**, **defineEmits**, **defineExpose**, **withDefaults**, **defineModel**, **defineOptions** ve **defineSlots**. Ayrıntılar ve örnekler için [Vue.js Compiler Macro Nedir?](https://www.serhatvarli.com/tr/blog/compiler-macro-nedir) yazısına bakabilirsiniz.

```vue
<script setup>
const props = defineProps({ name: String });

// Üst bileşen, template ref üzerinden greet() metodunu çağırabilir
defineExpose({ greet: () => `Merhaba ${props.name}` });
</script>

<template>
  <p>Merhaba, {{ name }}!</p>
</template>
```

## 2. Vue Macros projesi

**Vue Macros**, Vue'nun henüz resmî olarak sunmadığı makroları deneysel olarak sağlayan bir topluluk projesidir. Vite veya webpack eklentisi olarak projeye eklenir. Bu projede denenen bazı fikirler zamanla Vue'nun kendisine alınmıştır; **defineOptions** buna bir örnektir.

## Neden makro?

- Daha az şablon kod (boilerplate) yazılır.

- TypeScript tip çıkarımı iyileşir.

- Bileşen tanımı daha kısa ve okunur olur.

Buna karşılık makrolar bir derleme adımı gerektirir ve yalnızca **<script setup>** bloğunun en üst seviyesinde çalışır.

### Lifecycle Hooks Nedir?

URL: https://www.serhatvarli.com/tr/blog/lifecycle-hooks-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue.js'in yaşam döngüsü (lifecycle hooks), Vue örneğinin (instance) yaratılmasından yok olana kadar geçirdiği çeşitli aşamalarda çalışan özel fonksiyonlardır. Bu kancalar, bir Vue bileşeninin (component) yaşam döngüsü boyunca belirli zamanlarda tetiklenir ve geliştiricilere bu aşamalarda müdahale etme imkanı sunar. İşte en yaygın Vue.js yaşam döngüsü ve bunların işlevleri:

    1. **beforeCreate:**  Bu kanca, Vue örneği yaratılmadan hemen önce çalışır. Bu aşamada, data ve olaylar (events) henüz kurulmamıştır.

    2. **created:**   Bu kanca, Vue örneği yaratıldıktan hemen sonra çalışır. Bu aşamada, data ve metodlar (methods) erişilebilir durumdadır, ancak DOM henüz monte edilmemiş ve $el property'si mevcut değildir.

    3. **beforeMount:**  Bu kanca, DOM'a monte edilmeden hemen önce çalışır. Bu aşamada, şablon (template) veya render fonksiyonu sanal DOM'a render edilmiş, ancak gerçek DOM'a uygulanmamıştır.

    4. **mounted:**   Bu kanca, Vue örneği DOM'a monte edildikten sonra çalışır. Bu aşamada, bileşenin tamamı render edilmiş ve DOM'a uygulanmıştır.

    5. **beforeUpdate:**  Bu kanca, reaktif verilerde bir değişiklik olduğunda ve DOM güncellenmeden önce çalışır.

    6. **updated:**  Bu kanca, reaktif veri değişikliklerinin DOM'a uygulandıktan sonra çalışır.

    7. **beforeDestroy:**  Bu kanca, Vue örneği yok edilmeden hemen önce çalışır. Bu aşamada, örnek hala tamamen işlevseldir.

    8. **destroyed:**  Bu kanca, Vue örneği yok edildikten sonra çalışır. Bu aşamada, tüm olay dinleyicileri (event listeners) ve bağlı tüm alt bileşenler yok edilmiştir.

Bu kancalar, Vue bileşenlerinin yaşam döngüsünü yönetmek ve çeşitli aşamalarda özel işlemler gerçekleştirmek için kullanılır. Örneğin, API'dan veri çekme, olay dinleyicileri ayarlama veya temizleme gibi işlemler bu kancalar aracılığıyla gerçekleştirilebilir.

> **Not (Vue 3):** Vue 3'te **beforeDestroy** ve **destroyed** kancalarının adı **beforeUnmount** ve **unmounted** olarak değişmiştir. Composition API'de bu kancaların karşılıkları **onBeforeMount**, **onMounted**, **onBeforeUpdate**, **onUpdated**, **onBeforeUnmount** ve **onUnmounted** fonksiyonlarıdır; **beforeCreate** ve **created** yerine kod doğrudan **setup** içinde yazılır.

### Inject Nedir?

URL: https://www.serhatvarli.com/tr/blog/inject-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue.js'nin **inject** özelliği, bir üst (parent) bileşenin değerlerini alt (child) bileşenlere iletmek için kullanılan bir mekanizmadır. Bu, bileşenler arasında veri veya fonksiyonları paylaşmak için kullanışlı bir yol sağlar.

**inject** özelliği genellikle bir bileşenin **provide** özelliği aracılığıyla sağladığı değerleri almak için kullanılır. **provide** özelliği, bir bileşenin altındaki tüm alt bileşenlere değerleri sağlamak için kullanılır.

İşte basit bir örnek:

```vue
<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component />
  </div>
</template>

 <script>
import  ChildComponent   from './ChildComponent.vue';

export  default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Merhaba, bu değeri paylaşıyorum!'
    };
  }
};
</script>
```

```vue
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
export  default {
  inject: ['message'],
  computed: {
    injectedMessage() {
      return  this.message;
    }
  }
};
</script>
```

Yukarıdaki örnekte, **ParentComponent** bileşeni, **provide** özelliği aracılığıyla **message** adlı bir değeri altındaki tüm alt bileşenlere sağlıyor. **ChildComponent** bileşeni ise **inject** özelliğini kullanarak bu değeri alıyor ve **injectedMessage** adlı bir computed property üzerinden kullanıyor.

Bu sayede **ChildComponent**, **ParentComponent**'tan gelen **message** değerine erişebilir ve bu değeri kullanabilir. Bu tür bir mekanizma, veri paylaşımını ve iletişimini kolaylaştırmak için kullanışlıdır.

### In-DOM Template Nedir?

URL: https://www.serhatvarli.com/tr/blog/in-dom-template-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

"Vue.js in-DOM template" ifadesi, Vue.js'in bir özelliğini ifade eder. Vue.js, bir JavaScript framework'üdür ve kullanıcı arayüzü oluşturmak için kullanılır. Vue.js'in temel özelliklerinden biri, DOM (Document Object Model) içinde inline olarak tanımlanan şablonlardır.

Vue.js'de, HTML içinde doğrudan yazılan şablonlar "in-DOM template" olarak adlandırılır. Bu, Vue.js'in kodunun HTML içinde doğrudan yer almasını sağlar. Aşağıda basit bir örnek bulunmaktadır:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js In-DOM Template</title>
</head>
<body>

  <div id="app">
    <h1>{{ message }}</h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  <script>
    new Vue({
      el: '#app',
      data: {
      message: 'Merhaba, Vue.js!'
      }
    });
  </script>

</body>
</html>
```

Bu örnekte, Vue.js kullanılarak **#app** ID'li bir div içinde bir şablon tanımlanmıştır. **{{ message }}** ifadesi, Vue.js tarafından yönetilen **message** veri öğesine bağlanır. Vue.js, bu veriyi izler ve herhangi bir değişiklik olduğunda otomatik olarak DOM'u günceller.

Bu "in-DOM template" yaklaşımı, Vue.js'in kullanımını basitleştirir ve şablonları doğrudan HTML içine entegre etmenizi sağlar.

### Hoisting Nedir?

URL: https://www.serhatvarli.com/tr/blog/hoisting-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

"Vue.js hoisting" terimi, JavaScript'in kavramlarından biri olan "hoisting" ile ilişkilidir. Ancak, "hoisting" aslında Vue.js framework'ü ile doğrudan bağlantılı değildir. Vue.js, bir JavaScript framework'üdür ve JavaScript dilinin üzerine inşa edilmiştir.

Hoisting, JavaScript'in çalışma mantığından kaynaklanan bir kavramdır. JavaScript yürütülmeden önce değişken tanımlamaları ve fonksiyon tanımlamaları bellekte yukarıya (üst kısma) çıkarılır. Bu, bir değişkeni veya fonksiyonu kullanmadan önce bile bu değişkenin veya fonksiyonun tanımlı olduğu anlamına gelir.

Örneğin:

```javascript
console.log(x); // undefined
var x = 5;
console.log(x); // 5
```

Yukarıdaki örnekte, **var x = 5;** ifadesinden önce **console.log(x);** çağrıldığında, **x** değişkeninin tanımı (**var x**) yukarı taşınmış ama değeri (5) henüz atanmamış olduğu için sonuç **undefined** olur.

Vue.js framework'üyle ilgili olarak, Vue.js kendisi hoisting'e özel bir özellik sunmaz. Ancak, Vue.js'in JavaScript temelli olduğunu ve genel JavaScript kavramları ile etkileşimde bulunduğunu unutmamak önemlidir. Bu nedenle, Vue.js kodlarınızı yazarken JavaScript dilinin hoisting özelliklerini anlamak yararlı olabilir.

> **Not:** Yalnızca **var** ile tanımlanan değişkenler **undefined** değeriyle yukarı taşınır. **let** ve **const** de yukarı taşınır ancak tanımlandıkları satıra kadar erişilemez (Temporal Dead Zone); bu durumda **console.log(x)** bir **ReferenceError** fırlatır.

### Functional Component Nedir?

URL: https://www.serhatvarli.com/tr/blog/functional-component-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue.js functional components, genellikle state (durum) yönetimi olmayan ve yalnızca girdi alıp çıktı üreten basit bileşenlerdir. Bu tür bileşenler, işlevsel programlamaya daha yakın bir yaklaşımla tasarlanmıştır. İşlevsel bileşenler, bir durum (state) yönetimine ihtiyaç duymazlar ve giriş aldıkları verilere dayanarak çıktı üretirler. Bu, fonksiyonel programlamanın temel prensiplerinden biridir.

Vue 3'te işlevsel bir bileşen, **props** ve **context** (attrs, slots, emit) alan ve sanal DOM düğümü döndüren düz bir fonksiyondur. Kendi durumu (state) ve bileşen örneği (**this**) yoktur.

```javascript
import { createApp, h } from 'vue';

// Vue 3: işlevsel bileşen = props ve context alan düz bir fonksiyon
function MessageBox(props, { emit }) {
  return h('div', [
    h('p', props.message),
    h('button', { onClick: () => emit('select') }, 'Tıkla'),
  ]);
}
MessageBox.props = ['message'];
MessageBox.emits = ['select'];

createApp({
  render: () =>
    h(MessageBox, {
      message: 'Merhaba, ben işlevsel bir bileşenim!',
      onSelect: () => console.log('Düğmeye tıklandı'),
    }),
}).mount('#app');
```

Yukarıdaki örnekte **MessageBox** yalnızca kendisine verilen **message** prop'una göre çıktı üretir ve tıklamayı **emit** ile üst bileşene bildirir.

> **Not (Vue 2):** Vue 2'de işlevsel bileşenler **functional: true** seçeneği veya **<template functional>** ile tanımlanıyordu. Vue 3'te bu seçenek kaldırılmıştır; aşağıdaki eski sözdizimi yalnızca Vue 2 projelerinde çalışır.

```vue
<template functional>
  <div>
    <p>{{ props.message }}</p>
    <button @click="props.onClick">Click me</button>
  </div>
</template>

<script>
export default {
  functional: true,
  props: {
    message: String,
    onClick: Function,
  },
};
</script>
```

Vue 2'de işlevsel bileşenler normal bileşenlerden belirgin şekilde hızlıydı. Vue 3'te normal bileşenlerin performansı o kadar iyileşti ki aradaki fark önemsiz hale geldi; bu yüzden işlevsel bileşenler yalnızca gerçekten basit ve durumsuz parçalar için önerilir.

### Fragment Nedir?

URL: https://www.serhatvarli.com/tr/blog/fragment-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de **fragment**, bir bileşenin şablonunda birden fazla kök öğe bulunabilmesi anlamına gelir. Bu özellik **Vue 3** ile gelmiştir. Vue 2'de her bileşenin şablonunda tek bir kök öğe olması zorunluydu; birden fazla öğe döndürmek için hepsini gereksiz bir **<div>** ile sarmak gerekiyordu.

Vue 3'te şablonun kök seviyesine birden fazla öğe yazabilirsiniz; Vue bunları DOM'a ek bir sarmalayıcı koymadan yerleştirir. Bu, özellikle tablo satırları, liste öğeleri ya da flex ve grid düzenlerinde gereksiz sarmalayıcıların yapıyı bozmasını önler.

İşte basit bir örnek:

```vue
<template>
  <!-- Vue 3: üç kök öğe, sarmalayıcı div yok -->
  <h1>Başlık</h1>
  <p>Paragraf 1</p>
  <p>Paragraf 2</p>
</template>
```

Yukarıdaki örnekte bileşen **<h1>** ve iki **<p>** öğesini doğrudan döndürür.

## Dikkat: öznitelik aktarımı

Tek kökü olan bir bileşene verilen **class**, **id** gibi öznitelikler otomatik olarak kök öğeye eklenir. Birden fazla kök olduğunda Vue hangi öğeye ekleyeceğini bilemez ve bir uyarı verir. Bu durumda öznitelikleri istediğiniz öğeye **v-bind="$attrs"** ile açıkça aktarmanız gerekir:

```vue
<template>
  <header>Üst bölüm</header>
  <main v-bind="$attrs">İçerik</main>
  <footer>Alt bölüm</footer>
</template>
```

### Event Nedir?

URL: https://www.serhatvarli.com/tr/blog/event-nedir
Published: 2024-01-05 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de "event" (olay) terimi, kullanıcı etkileşimleri veya tarayıcıda meydana gelen diğer olaylar gibi belirli bir durumu ifade eder. Vue.js, kullanıcı arayüzü oluşturmak için kullanılan bir JavaScript çerçevesidir ve bu çerçeve, bileşen tabanlı bir yapıda etkileşimli uygulamalar geliştirmeye odaklanmıştır.

Vue.js'de olaylar, kullanıcı etkileşimleri (örneğin, bir düğmeye tıklama, bir input kutusuna yazma gibi) veya belirli bir Vue bileşeni içinde gerçekleşen başka olaylar (örneğin, bileşenin oluşturulduğu an gibi) olabilir. Bu olaylar, Vue.js'in olay sistemi aracılığıyla yönetilir.

İşte basit bir örnek:

```vue
<template>
  <div>
    <button @click="buttonClicked">Tıkla</button>
  </div>
</template>

<script>
export  default {
  methods: {
    buttonClicked() {
      console.log('Düğmeye tıklandı!');
      //Burada başka işlemler de gerçekleştirilebilir.
    }
  }
}
</script>
```

Yukarıdaki örnekte, **<button>** elementi üzerinde @click direktifi kullanılarak "click" (tıklama) olayına bir dinleyici eklenmiştir. Bu olay gerçekleştiğinde, **buttonClicked** adlı bir yöntem çağrılır. Bu yöntem, tıklama olayına tepki olarak belirli bir işlevi gerçekleştirir.

Vue.js'de olaylar, kullanıcı etkileşimlerini dinlemek, bileşen içindeki durumları güncellemek veya başka bileşenlere haber vermek gibi birçok senaryoda kullanılabilir. Olaylar, Vue bileşenlerinin etkileşimli ve dinamik bir şekilde çalışmasına olanak tanır.

### Effect Nedir?

URL: https://www.serhatvarli.com/tr/blog/effect-nedir
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue.js'deki **effect**, Vue 3'ün reaktivite sisteminin en alt seviyedeki yapı taşıdır. Bir fonksiyonu hemen çalıştırır, çalışırken okuduğu reaktif değerleri (**ref**, **reactive**) bağımlılık olarak kaydeder ve bu değerlerden biri değiştiğinde fonksiyonu yeniden çalıştırır. **computed**, **watch**, **watchEffect** ve bileşenlerin yeniden render edilmesi de bu mekanizmanın üzerine kuruludur.

**effect** fonksiyonu bir bağımlılık listesi almaz; yalnızca bir fonksiyon alır. Hangi değerlere bağlı olduğunu, fonksiyon çalışırken hangi reaktif değerlere eriştiğine bakarak kendisi belirler (otomatik bağımlılık izleme). Vue 2'deki **beforeUpdate** ve **updated** kancalarının yerine geçen bir şey de değildir; o kancalar Vue 3'te de aynı adlarla bulunur.

Örnek kullanım:

```javascript
import { ref, effect } from 'vue';

const count = ref(0);

//effect fonksiyonu hemen bir kez çalışır, count değiştiğinde yeniden çalışır
effect(() => {
  console.log('Count değeri güncellendi:', count.value);
});

//count değerini güncelledikçe, effect fonksiyonu otomatik olarak çalışacaktır
count.value++;

//Konsolda önce "Count değeri güncellendi: 0", sonra "Count değeri güncellendi: 1" görülür
```

Bu örnekte **effect** fonksiyonu çalışırken **count.value** değerini okuduğu için **count**'a bağımlı hale gelir. **count** her güncellendiğinde fonksiyon otomatik olarak yeniden çalışır ve yeni değeri konsola yazar.

> **Not:** **effect** düşük seviyeli bir API'dir ve uygulama kodunda nadiren doğrudan kullanılır. Bileşenlerde aynı işi, bileşen kaldırıldığında otomatik olarak durdurulan **watchEffect** ile yapmanız önerilir.

### Dynamic Component Nedir?

URL: https://www.serhatvarli.com/tr/blog/dynamic-component-nedir
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de dinamik bileşenler (dynamic components), uygulamalarda bir bileşeni programatik olarak değiştirmenizi veya yüklemenizi sağlayan bir özelliktir. Bu, uygulamanızın çalışma zamanında hangi bileşenin görüntüleneceğini belirleme esnekliği sağlar.

Vue.js'de dinamik bileşenleri kullanmanın birkaç farklı yolu vardır. İşte bunlardan bazıları:

    1. **<component> Elemanı:** Vue.js'de yerleşik bir **<component>** elemanı bulunur. Bu eleman, **is** prop'unu kullanarak görüntülenen bileşeni belirler. Örneğin:

```vue
<template>
  <component :is="currentComponent"></component>
</template>

<script>
export  default {
  data() {
    return {
      currentComponent: 'MyComponent'
    };
  }
};
</script>
```

        Yukarıdaki örnekte, **currentComponent** veri öğesi, görüntülenen bileşeni belirlemek için kullanılır. Bu değer, uygulamanızın mantığına bağlı olarak dinamik olarak değiştirilebilir.

    2. **<keep-alive> Elemanı ile Kullanım:** Vue.js'in **<keep-alive>** elemanı, dinamik bileşenleri bellekte tutmanıza ve yeniden kullanmanıza olanak tanır. Bu, bir bileşenin durumunu korumak istediğinizde faydalı olabilir. Örneğin:

```vue
<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>
```

    3. **v-if veya v-show ile Kullanım:** Bileşenleri görüntüleme kararını **v-if** veya **v-show** direktifleriyle de yapabilirsiniz. Bu, belirli koşullar altında bileşenleri eklemenizi veya kaldırmanızı sağlar.

```vue
<template>
  <div>
    <my-component v-if="shouldShowComponent"></my-component>
  </div>
</template>

<script>
export  default {
  data() {
    return {
      shouldShowComponent: true
    };
  }
};
</script>
```

Bu yöntemler, Vue.js'de dinamik bileşen kullanımının sadece birkaç örneğidir. Hangi yöntemi kullanacağınız, uygulamanızın gereksinimlerine ve yapısına bağlı olarak değişebilir.

### Directive Nedir?

URL: https://www.serhatvarli.com/tr/blog/directive-nedir
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue.js direktifleri, Vue.js framework'ünün bir parçası olan özel komutlardır ve HTML elementlerine özel davranışlar eklemek için kullanılırlar. Bu direktifler, Vue.js'in reaktif özellikleriyle birleştirilerek, HTML dokümanını Vue.js uygulamasının veri modeli ile senkronize etmeye ve etkileşimli web uygulamaları oluşturmaya olanak tanır.

Vue.js direktifleri, **v-** öneki ile başlar ve bir HTML elementine eklenerek belirli bir işlevselliği aktive eder. İşte bazı yaygın Vue.js direktifleri:

  1. **v-bind:** HTML attribute'larını dinamik bir şekilde bağlamak için kullanılır. Örneğin, **v-bind** ile bir elementin **href** özelliğini belirli bir veriye bağlayabilirsiniz.

```vue
<a v-bind:href="url">Bağlantı</a>
```

  2. **v-model:** Form elemanları (input, textarea, select) ile ilişkilendirilerek, kullanıcının girdiğini bir Vue.js veri özelliğine bağlamak için kullanılır.

```vue
<input v-model="username">
```

  3. **v-for:** Döngü kullanarak bir liste üzerinde işlem yapmak için kullanılır. Örneğin, bir dizi içindeki öğeleri listelemek için kullanılabilir.

```vue
<ul>
  <li v-for="item in items">{{ item.name }}</li>
</ul>
```

  4. **v-if, v-else-if, v-else:** Bir şartın doğruluğuna bağlı olarak bir HTML elementinin görünürlüğünü kontrol etmek için kullanılır.

```vue
<p v-if="isUserLoggedIn">Kullanıcı giriş yaptı!</p>
<p v-else>Giriş yapın</p>
```

  5. **v-show:** **v-if** gibi, bir şartın doğruluğuna bağlı olarak bir elementin görünürlüğünü kontrol eder, ancak **v-show** daha hafif bir yöntemdir ve element sadece CSS ile gösterilip gizlenir.

```vue
<p v-show="isVisible">Bu metin gösterilecek veya gizlenecek</p>
```

Bu örnekler, Vue.js direktiflerinin çeşitli kullanımlarını göstermektedir. Vue.js direktifleri, HTML ve JavaScript arasında güçlü bir bağlantı sağlar, bu da geliştiricilere daha etkileşimli ve dinamik web uygulamaları oluşturmada esneklik sunar.

Aşağıdaki örnek bu direktiflerin hepsini tek bir bileşende bir arada kullanıyor; çalıştırıp metin kutusuna yazmayı ve düğmeye tıklamayı deneyebilirsiniz:

```vue
<template>
  <a v-bind:href="url">Vue.js belgeleri</a>
  <input v-model="username" placeholder="Adınız" />
  <p v-if="username">Merhaba, {{ username }}!</p>
  <p v-else>Lütfen adınızı yazın.</p>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <p v-show="isVisible">Bu metin v-show ile gösterilip gizlenir.</p>
  <button @click="isVisible = !isVisible">Göster / gizle</button>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org',
      username: '',
      items: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' },
      ],
      isVisible: true,
    };
  },
};
</script>
```

### Custom Element Nedir?

URL: https://www.serhatvarli.com/tr/blog/custom-element-nedir
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue.js custom element, Vue.js framework'ünün 3.2 sürümüyle sunulan bir özelliktir. Bu özellik, Vue.js'in Vue öğelerini, Vue bileşenlerini veya uygulamalarını non-Vue sayfalarında veya farklı JavaScript çerçeveleriyle entegre etmek için kullanılır.

Vue.js custom element, Vue bileşenlerini normal HTML öğelerine dönüştürmeyi sağlar, böylece bu bileşenler başka bir framework veya kütüphane tarafından kullanılabilir hale gelir. Bu özellik sayesinde Vue.js uygulamaları diğer teknolojilerle daha kolay entegre edilebilir.

Vue.js custom element kullanımı için **defineCustomElement** fonksiyonu kullanılır. Bu fonksiyon, bir Vue bileşenini bir özel öğe (custom element) sınıfına dönüştürür; sınıf **customElements.define** ile tarayıcıya kaydedilir. Örneğin:

```javascript
import { defineCustomElement } from 'vue';

//Vue bileşeni oluştur
const MyComponent = defineCustomElement({
  template: '<div>Merhaba, benim özel öğem!</div>'
});

//Vue bileşenini özel öğeye dönüştür
customElements.define('my-component', MyComponent);

//HTML içinde kullanım: <my-component></my-component>
document.body.append(document.createElement('my-component'));
```

Bu örnekte, **MyComponent** adlı Vue bileşeni **defineCustomElement** ve **customElements.define** ile "my-component" adlı özel bir HTML öğesine dönüştürülmüştür. Daha sonra bu özel öğe normal bir HTML sayfasında kullanılabilir hale gelir.

Bu özellik sayesinde Vue.js, farklı teknolojilerle birleştirilebilen daha modüler ve esnek bir yapıya sahip olur.

### Composition API Nedir?

URL: https://www.serhatvarli.com/tr/blog/composition-api-nedir
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue.js Composition API, Vue.js 3.0'da tanıtılan ve geliştiricilere daha iyi bir organizasyon ve paylaşılabilirlik sağlayan bir API'dir. Vue 2.x'de, mantığı özellikler, yöntemler ve diğer öğeler arasında bölüştürmek için genellikle Options API kullanılıyordu. Composition API, bu konuda daha esnek, okunabilir ve düzenli bir alternatif sunar.

Composition API'nin başlıca özellikleri şunlardır:

  1. **Mantığın Fonksiyonlarla Düzenlenmesi:** Composition API, bileşen mantığını yeniden kullanılabilir fonksiyonlara (composable) bölmeyi teşvik eder. Bu, bileşenin durum yönetimi ve işlevselliği gibi kısımlarını daha küçük ve daha anlamlı fonksiyonlara bölebileceğiniz anlamına gelir.

  2. **Vue'un Reaktif Sistemi:** Composition API, Vue'un reaktif (reactive) sistemini kullanmaya dayanır. **ref** ve **reactive** gibi reaktif özelliklerle durum yönetimini kolaylaştırır.

  3. **Vue'un Yeni `setup` Fonksiyonu:** Composition API, Vue 3 ile birlikte gelen yeni **setup** fonksiyonunu tanıtır. Bu fonksiyon, bileşenin kurulumu sırasında çalıştırılır ve bileşenin içindeki reaktif durumları, yöntemleri ve diğer öğeleri hazırlamanıza olanak tanır.

Örnek bir kullanım:

```vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    //Reaktif durumu tanımla
    const count = ref(0);

    //İşlevselliği tanımla
    function increment() {
      count.value++;
    }

    //Dışa açılacak öğeleri döndür
    return {
      count,
      increment
    };
  }
};
</script>
```

Bu örnekte, Composition API kullanılarak bir sayacın durumu ve arttırma işlevselliği yönetilmektedir. **setup** fonksiyonu, bileşenin başlatılması sırasında çalıştırılır ve gerekli reaktif durumları ve işlevselliği döndürerek bileşeni yapılandırır.

### Composable Nedir?

URL: https://www.serhatvarli.com/tr/blog/composable-nedir
Published: 2024-01-04 · Updated: 2026-10-05 · Category: VueJS

Vue.js Composables, Vue.js ekosistemi içindeki bir tasarım deseni ve yapısal bir öğedir. Composables, Vue.js uygulamalarınızdaki mantığı ve işlevselliği paylaşmak ve yönetmek için kullanılan yeniden kullanılabilir fonksiyonlardır.

Composables, genellikle bir işlevsellik kümesini gruplamak ve bu işlevselliği bir bileşen içinde değil, başka yerlerde (örneğin, başka bir dosyada veya başka bir bileşende) kullanmak için tasarlanmıştır. Bu, kodunuzu daha düzenli hale getirmenize, tekrar kullanılabilir parçalar oluşturmanıza ve bileşenler arasında mantığı kolayca paylaşmanıza yardımcı olabilir.

Bir Vue.js Composable, genellikle bir JavaScript fonksiyonu olarak tanımlanır ve genellikle belirli bir görevi yerine getirmek üzere tasarlanmıştır. Composables, kullanıcılara bir bağlam sağlamak ve genellikle reactive (reaktif) Vue özelliklerini kullanarak durum yönetimini kolaylaştırmak için tasarlanmıştır.

İşte basit bir örnek:

```javascript
import { ref } from 'vue';

export  function  useCounter () {
  const count = ref(0);

  function  increment() {
    count.value++;
  }

  function  decrement() {
    count.value--;
  }

   return {
    count,
    increment,
    decrement
   };
}
```

Bu örnek, bir sayacın durumunu ve arttırma/azaltma işlevselliğini yöneten bir Composable örneğidir. Bu Composable, başka bir bileşen içinde kullanılabilir ve sayacın durumunu güncellemek için kullanılabilir.

Kullanımı:

```vue
// MyComponent.vue
<template>
   <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export  default {
  setup() {
     const { count, increment, decrement } = useCounter();

    return { count, increment, decrement };
  }
};
</script>
```

Bu örnekte, **useCounter** Composable'i, **MyComponent** adlı bir Vue bileşeni içinde kullanılmaktadır. Bu, sayacın durumunu ve işlevselliğini **MyComponent** bileşeni içinde kullanmanın kolay ve düzenli bir yolunu sağlar.

### Component Nedir?

URL: https://www.serhatvarli.com/tr/blog/component-nedir
Published: 2024-01-03 · Updated: 2026-10-05 · Category: VueJS

Vue.js component, Vue.js framework içinde kullanılan ve özelleştirilebilir öğeleri temsil eden bir yapıdır. Vue.js, kullanıcı arayüzü oluşturmak için kullanılan bir JavaScript framework'üdür ve bu framework içinde UI öğelerini tekrar kullanılabilir, bağımsız parçalara bölen ve yönetilebilir bir yapı olan "component" kavramını kullanır.

Vue.js componentleri, genellikle şu özelliklere sahiptir:

    1. **Şablon (Template):**Componentlerin içinde görüntü ve yapıyı tanımlamak için HTML tabanlı bir şablon bulunur.

    2. **Veri (Data):**Her bir component kendi içindeki verileri yönetebilir. Bu, componentin özgün davranışını ve görüntüsünü kontrol etmek için kullanılır.

    3. **Metotlar (Methods):**Componentler, olaylara tepki göstermek veya belirli işlevleri gerçekleştirmek için metotları içerebilir.

    4. **Hayat Döngüsü Hook'ları (Lifecycle Hooks):**Vue.js componentleri, bir componentin oluşturulması, güncellenmesi ve yok edilmesi gibi özel hayat döngüsü olaylarına tepki verebilir.

    5. **Stil (Styles):**Componentlere özgü stil tanımlamak için CSS veya diğer stil formatları kullanılabilir.

Vue.js componentleri, genellikle uygulama içinde tekrar kullanılabilir, bakımı kolay ve bağımsız parçalara bölünmüş bir şekilde tasarlanır. Bu, büyük uygulamalarda karmaşıklığı azaltmak ve kodu daha modüler hale getirmek için kullanışlıdır.

İşte basit bir Vue.js component örneği:

```vue
<template>
                <div>
                <h1>{{ message }}</h1>
                <button @click="changeMessage">Mesajı Değiştir</button>
                </div>
                </template>

                <script>

                    export  default {
                   data() {
                    return {
                   message: 'Hello, Vue.js!'
                   };
                   },
                   methods: {
                   changeMessage() {
                   this.message = 'New Message!';
                   }
                   }
                   };

                </script>

                <style scoped>

                    /* Componente özgü stil tanımlamaları */
                    h1 {
                    color: blue;
                    }
                    </style>
```

Bu örnekte, bir Vue.js componenti, bir mesaj gösteren ve bir düğme aracılığıyla mesajı değiştirebilen basit bir yapıya sahiptir. Bu component daha sonra başka Vue.js dosyalarında kullanılabilir.

### Compiler Macro Nedir?

URL: https://www.serhatvarli.com/tr/blog/compiler-macro-nedir
Published: 2024-01-03 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de **compiler macro** (derleyici makrosu), yalnızca **<script setup>** içinde kullanılabilen ve derleme sırasında normal JavaScript koduna dönüştürülen özel fonksiyonlardır. **<script setup>** sözdizimiyle birlikte Vue 3.2'de gelmiştir. Bu fonksiyonlar içe aktarılmaz (import edilmez); Vue derleyicisi onları tanır ve bileşen seçeneklerine çevirir. Çalışma zamanında böyle bir fonksiyon bulunmaz.

## En çok kullanılan derleyici makroları

- **defineProps**: Bileşenin aldığı prop'ları tanımlar.

- **defineEmits**: Bileşenin yaydığı olayları tanımlar.

- **defineExpose**: Üst bileşenin template ref ile erişebileceği değerleri belirler.

- **withDefaults**: TypeScript tipleriyle tanımlanan prop'lara varsayılan değer verir.

- **defineModel** (Vue 3.4+): **v-model** ile iki yönlü bağlanan bir değeri tek satırda tanımlar.

- **defineOptions** ve **defineSlots** (Vue 3.3+): Bileşen seçeneklerini ve slot tiplerini tanımlar.

## Örnek

```vue
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
});
const emit = defineEmits(['increment']);
</script>

<template>
  <h2>{{ props.title }}</h2>
  <button @click="emit('increment')">Artır ({{ count }})</button>
</template>
```

Bu örnekte **defineProps** ve **defineEmits** import edilmeden kullanılmıştır. Derleyici bu çağrıları bileşenin **props** ve **emits** seçeneklerine dönüştürür. Bu yüzden makrolar yalnızca **<script setup>** bloğunun en üst seviyesinde çağrılabilir; bir fonksiyonun içinde ya da normal bir **<script>** bloğunda kullanılamazlar.

Bu bileşen (ör. **CounterTitle.vue**) başka bir bileşende şöyle kullanılır:

```vue
<script setup>
import { ref } from 'vue';
import CounterTitle from './CounterTitle.vue';

const count = ref(0);
</script>

<template>
  <CounterTitle title="Sayaç" :count="count" @increment="count++" />
</template>
```

> **Not:** **v-for** ile kullanılan **:key** için en iyi yöntem, her öğenin benzersiz ve kalıcı bir kimliğini (ör. **item.id**) kullanmaktır. Dizi indeksi, liste sıralandığında veya öğe eklendiğinde yanlış eşleşmelere yol açabilir. Bu bir derleyici makrosu değil, şablon yazım kuralıdır.

### Async Component Nedir?

URL: https://www.serhatvarli.com/tr/blog/async-component-nedir
Published: 2024-01-03 · Updated: 2026-10-05 · Category: VueJS

Vue.js'de "async component" terimi, bir Vue bileşeninin asenkron olarak yüklenmesi anlamına gelir. Bu, uygulama
    başladığında veya sayfa yüklendiğinde bir bileşenin hemen yüklenmesi gerekmeyen durumlarda kullanılır. Özellikle
    büyük uygulamalarda veya sayfalarında performansı artırmak için kullanışlıdır.

Vue 3'te asenkron bileşenler **defineAsyncComponent** fonksiyonu ve dinamik **import()** ifadesiyle tanımlanır ve bu bileşenlerin
    yüklenmesi gerektiği anda dinamik olarak alınabilir. İşte bir örnek:

```javascript
// AsyncComponent.js
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

export default AsyncComponent;
```

Yukarıdaki örnekte, **AsyncComponent** adlı bir asenkron bileşen oluşturulmuştur. **import** ifadesi içindeki **./MyComponent.vue** dosyası, yüklenmesi
    gereken bileşeni temsil eder. Bu dosya, kullanıcı sayfayı açtığında veya belirli bir olay gerçekleştiğinde
    yüklenecektir.

Bu asenkron bileşeni kullanmak için, genellikle Vue.js içindeki bir bileşen içinde şu şekilde kullanabilirsiniz:

```vue
// App.vue
                <template>

                    <div>
                     <AsyncComponent />
                     </div>

                </template>

                    <script>

                        import  AsyncComponent  from './AsyncComponent.vue';
                        export  default {
                        components: {
                        AsyncComponent
                       }
                        }
                        </script>
```

Burada **AsyncComponent**, normal bir bileşen gibi **components** seçeneğine kaydedilir. Vue, bileşen ekranda ilk kez gösterileceği zaman **MyComponent.vue** dosyasını ayrı bir parça (chunk) olarak indirir; böylece sayfanın ilk yüklemesi küçülür.

> **Not:** Vue 2'de bir bileşeni **() => import(...)** fonksiyonu olarak vermek yeterliydi. Vue 3'te bileşenler için **defineAsyncComponent** kullanılmalıdır; düz **() => import(...)** yalnızca Vue Router rota tanımlarında geçerlidir. **defineAsyncComponent**, yükleme sırasında ve hata durumunda gösterilecek bileşenleri (**loadingComponent**, **errorComponent**) de tanımlamanıza olanak tanır.

### Less Nedir?

URL: https://www.serhatvarli.com/tr/blog/less-nedir
Published: 2024-01-03 · Updated: 2026-10-05 · Category: Less

"LESS," öncelikle bir CSS ön işleyici dilidir. CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemek
    için kullanılan bir stil dilidir. LESS, CSS kodunun yazımını ve yönetimini daha kolay hale getirmek için
    geliştirilmiş bir dil olarak öne çıkar.

LESS, temel olarak CSS'nin özelliklerini genişleterek ve geliştirerek daha esnek bir stil oluşturma deneyimi sunar.
    Sözdizimi açısından, LESS daha az kod yazmayı ve stilinizi daha düzenli bir şekilde organize etmeyi sağlar. Ayrıca,
    LESS'in içinde değişkenler, fonksiyonlar, nesting (iç içe geçmiş yapısı), ve diğer programlama özellikleri gibi
    avantajlar bulunmaktadır.

Örneğin, aşağıda basit bir LESS kodu örneği bulunmaktadır:

```less
@mainColor: #3498db;
                body {
                background-color: @mainColor;
                }
                h1 {
                 color: darken(@mainColor, 10%);
                }
```

Bu kod, bir ana renk değişkeni tanımlar (**@mainColor**), sonra **body** elemanının arka plan rengini bu değişkenle ayarlar ve **h1**
    başlığının rengini bu ana renkten daha koyu bir tonla belirler. Bu şekilde, LESS kullanılarak daha modüler ve
    sürdürülebilir bir CSS kodu oluşturmak mümkündür.

### Html Nedir?

URL: https://www.serhatvarli.com/tr/blog/html-nedir
Published: 2024-01-03 · Updated: 2026-10-05 · Category: Html

HTML (Hypertext Markup Language), web sayfalarının yapılandırılması için kullanılan bir işaretleme dilidir. HTML, web tarayıcıları tarafından anlaşılır ve yorumlanabilir bir biçimde yazılmış metin tabanlı bir dildir. Web sayfalarındaki metin, bağlantılar, görseller, tablolar, formlar ve diğer öğelerin düzenlenmesi ve tanımlanması için kullanılır.

HTML, belirli etiketlerle çevrelenmiş öğeleri tanımlar. Etiketler, açılış (<tag>) ve kapanış (</tag>) biçiminde çiftler halinde gelir ve içerdikleri içeriği belirli bir şekilde düzenlerler. Örneğin, metin içinde bir başlık belirtmek için <h1> ve </h1> etiketleri kullanılır. Benzer şekilde, bir bağlantı oluşturmak için <a> ve </a> etiketleri, bir resim eklemek için <img> etiketi kullanılır.

HTML, tarayıcılar tarafından okunup yorumlanarak kullanıcıların web sayfalarını görmelerini sağlar. HTML, genellikle diğer web teknolojileriyle birlikte kullanılır, örneğin CSS (Cascading Style Sheets) ile görünüm düzenlemesi ve JavaScript ile interaktif özellikler eklemek için. Bu üç teknoloji (HTML, CSS, JavaScript), modern web geliştirme süreçlerinin temelini oluşturur.

### ReactJS Nedir?

URL: https://www.serhatvarli.com/tr/blog/reactjs-nedir
Published: 2024-01-03 · Updated: 2026-10-05 · Category: ReactJS

ReactJS, Facebook tarafından geliştirilen ve açık kaynaklı olarak sunulan bir JavaScript kütüphanesidir. Web uygulamaları geliştirmek için kullanılan bu kütüphane, kullanıcı arayüzlerini oluşturmak için kullanılır. React, özellikle tek sayfa uygulamaları (Single Page Applications - SPA) için ideal bir çözüm sunar.

React, bileşen tabanlı bir yaklaşımı benimser. Uygulamanın farklı bölümleri veya arayüz öğeleri olan bileşenler, bağımsız bir şekilde oluşturulabilir, yönetilebilir ve bir araya getirilebilir. Bu, kodun modüler olmasını sağlar ve geliştiricilere daha düzenli ve sürdürülebilir bir kod yazma imkanı tanır.

React'in temel özelliklerinden biri de sanal DOM (Document Object Model) kullanımıdır. React, DOM manipülasyonları yerine bir sanal DOM kullanarak, sadece değişen kısımları güncelleyerek performansı arttırır. Bu, uygulamanın daha hızlı çalışmasını sağlar.

React aynı zamanda bir "tek yönlü veri akışı" (one-way data binding) prensibine dayanır. Bu, verinin uygulama içinde tek bir yönde (genellikle üstten aşağı) akmasını sağlar, bu da uygulamanın daha öngörülebilir olmasını sağlar.

React, geniş bir topluluğa ve geliştirici ekosistemine sahiptir ve birçok büyük proje tarafından kullanılmaktadır. Ayrıca, React Native adlı bir kardeş proje sayesinde, React'in bileşen tabanlı yaklaşımı mobil uygulama geliştirmek için de kullanılabilir.

### VueJS Nedir?

URL: https://www.serhatvarli.com/tr/blog/vuejs-nedir
Published: 2024-01-03 · Updated: 2026-10-05 · Category: VueJS

Vue.js, açık kaynaklı bir JavaScript framework'üdür ve genellikle kullanıcı arayüzü geliştirmek için kullanılır. Vue.js, özellikle tek sayfa uygulamaları (SPA) oluşturmak için tasarlanmıştır. Vue.js, hafif ve esnek bir yapıya sahiptir ve bu nedenle özellikle küçük ve orta ölçekli projelerden büyük uygulamalara kadar çeşitli ölçeklerde kullanılabilmektedir.

Vue.js'in temel özellikleri şunlardır:

    1. **Hafif ve Kolay Kullanılabilir:** Vue.js, küçük boyutlu bir kütüphaneye sahiptir ve minimal bir öğrenme eğrisi sunar. Bu nedenle, geliştiricilerin hızlı bir şekilde projelerine entegre etmelerini ve kullanmalarını sağlar.

    2. **İki Yönlü Veri Bağlama (Two-Way Data Binding):** Vue.js, modeldeki değişikliklerin otomatik olarak kullanıcı arayüzüne yansıtılmasını sağlayan iki yönlü veri bağlama özelliğine sahiptir.

    3. **Component (Bileşen) Tabanlı Geliştirme:** Vue.js, uygulamaları küçük ve yeniden kullanılabilir bileşenlere bölerek geliştirmeyi teşvik eder. Bu, kodun daha modüler ve bakımı daha kolay hale gelmesini sağlar.

    4. **Directive (Yönerge):** Vue.js, HTML üzerinde özel davranışlar eklemek için kullanılan direktifleri destekler. Bu sayede HTML kodunu daha zengin ve dinamik hale getirmek mümkündür.

    5. **Templating (Şablonlama):** Vue.js, HTML şablonlarını kullanarak kullanıcı arayüzlerini oluşturmayı sağlar. Şablonlar, JavaScript koduyla entegre edilerek dinamik içerikler üretmeyi kolaylaştırır.

    6. **Vuex State Management:** Vue.js uygulamalarında durum yönetimi için Vuex adında bir durum yönetim kütüphanesi bulunur. Bu, uygulama genelinde veri durumunu merkezi bir şekilde yönetmeyi sağlar.

    7. **Routing (Yönlendirme):** Vue.js'in özelleştirilebilir bir yönlendirme çözümü vardır. Vue Router, SPA'ların farklı sayfalar arasında gezinmeyi yönetmelerine olanak tanır.

Vue.js, başlangıç düzeyinden deneyimli geliştiricilere kadar geniş bir kullanıcı kitlesine hitap eden bir framework'tür. Hafif olması, öğrenme eğrisinin düşük olması ve esnek yapısı, Vue.js'in popülerliğini artıran faktörlerden biridir.

> **Not:** Vue 3 ile birlikte resmî olarak önerilen durum yönetimi kütüphanesi artık **Pinia**'dır. Vuex mevcut projelerde çalışmaya devam eder ancak yeni projelerde Pinia tercih edilir.

### AngularJS Nedir?

URL: https://www.serhatvarli.com/tr/blog/angularjs-nedir
Published: 2024-01-03 · Updated: 2026-10-05 · Category: AngularJS

AngularJS, bir JavaScript framework'üdür ve genellikle tek sayfa uygulamalarının (SPA - Single Page Application)
    geliştirilmesinde kullanılır. AngularJS, Google tarafından geliştirilmiştir ve açık kaynaklıdır. İlk kez 2010
    yılında duyurulmuş ve web uygulamalarının geliştirilmesinde daha etkili ve modüler bir yaklaşım sunmasıyla dikkat
    çekmiştir.

AngularJS, özellikle MVC (Model-View-Controller) tasarım deseni üzerine inşa edilmiştir. Bu desen, uygulamayı veri
    (Model), kullanıcı arayüzü (View) ve uygulama mantığı (Controller) olarak üç ana bileşen içerir ve bu bileşenler
    arasında etkileşimi sağlar.

AngularJS'in temel özellikleri şunlardır:

    1. **İki Yönlü Veri Bağlama (Two-Way Data Binding):** AngularJS, modelde yapılan değişiklikleri otomatik olarak kullanıcı arayüzüne yansıtar ve aynı şekilde kullanıcı arayüzündeki değişiklikleri modele iletilir.

    2. **Modülerlik (Modularity):** Uygulamaları küçük, bağımsız ve yeniden kullanılabilir modüllere bölme konusunda AngularJS güçlüdür. Bu, uygulama geliştirme sürecini daha kolay ve yönetilebilir hale getirir.

    3. **Dependency Injection (Bağımlılık Enjeksiyonu):** AngularJS, bağımlılıkları (dependencies) yönetmek için bir enjeksiyon sistemine sahiptir. Bu, bileşenler arasında veri veya hizmet paylaşımını kolaylaştırır.

    4. **Directive (Yönerge):** AngularJS, HTML etiketlerine eklenen direktifler aracılığıyla özelleştirilmiş HTML sözdizimi ekleyebilme yeteneği sunar. Bu, HTML üzerinde dinamik olarak davranışlar eklemek için kullanılır.

    5. **Templating (Şablonlama):** AngularJS, HTML şablonlarını kullanarak kullanıcı arayüzü oluşturmayı kolaylaştırır. Bu şablonlar, modele bağlı olarak dinamik içerik üretmek için kullanılır.

    6. **Routing (Yönlendirme):** AngularJS, uygulama içinde farklı sayfalar arasında gezinmeyi sağlayan bir yönlendirme sistemine sahiptir.

AngularJS'in popülerliği, geliştiricilere karmaşık uygulamaları daha etkili bir şekilde yönetme ve geliştirme imkanı
    sağlamasıyla artmıştır. Ancak, AngularJS'in yerini Angular (Angular 2 ve sonrası sürümler) almıştır ve bu nedenle
    yeni projeler için genellikle Angular önerilmektedir.

> **Not:** AngularJS'in resmî uzun süreli desteği (LTS) 31 Aralık 2021'de sona ermiştir; güvenlik güncellemesi almaz. Yeni projelerde Angular veya başka bir güncel framework tercih edilmelidir.

### Sass Nedir?

URL: https://www.serhatvarli.com/tr/blog/sass-nedir
Published: 2024-01-02 · Updated: 2026-10-05 · Category: Sass

"Sass" (Syntactically Awesome Stylesheets), web geliştirme alanında kullanılan bir CSS ön işleyici dilidir. Sass, CSS'e bazı özellikler ekleyerek ve kodu daha düzenli hale getirerek stil sayfalarını daha etkili bir şekilde yönetmeyi amaçlar.

Sass'ın temel özellikleri şunlardır:

    1. **Değişkenler:** Değişkenler, renkler, fontlar veya diğer stil özelliklerini depolamak ve kullanmak için kullanılır. Bu, stil sayfalarını daha modüler hale getirir ve kodun tekrarını azaltır.

    2. **İç İçe Yazım (Nesting):** Sass, CSS kurallarını daha düzenli ve hiyerarşik bir yapıda yazmanıza olanak tanır. Bu, kodun okunabilirliğini artırır.

    3. **Mixin'ler:** Mixin'ler, tekrar eden CSS kod bloklarını tanımlamak ve kullanmak için kullanılır.

    4. **Fonksiyonlar:** Sass, matematiksel işlemler ve diğer özel hesaplamalar için fonksiyonları destekler.

Sass, daha sonra tarayıcılar tarafından anlaşılabilen düz CSS'e derlenir. Bu nedenle, geliştirme sürecinde daha etkili ve yönetilebilir stil sayfaları oluşturmanıza yardımcı olabilir.

### Scss Nedir?

URL: https://www.serhatvarli.com/tr/blog/scss-nedir
Published: 2024-01-02 · Updated: 2026-10-05 · Category: Scss

SCSS (Sassy CSS), CSS'nin genişletilmiş bir versiyonudur ve daha fazla özellik ve esneklik sunarak stil kodlamasını
    daha etkili hale getirir. SCSS, SASS (Syntactically Awesome Stylesheets) adlı bir CSS ön işlemcisidir ve SASS'ın
    yeni ve geliştirilmiş sözdizimini kullanır.

SCSS ve SASS arasındaki ana fark, sözdizimidir. SASS, daha açık ve kısa bir sözdizim kullanırken, SCSS, daha
    geleneksel CSS benzeri bir sözdizimini tercih eder. Yani, SCSS dosyaları genellikle mevcut CSS dosyalarını daha
    kolay bir şekilde dahil edebilir ve aynı zamanda daha rahat bir geçiş sağlar.

SCSS'in bazı temel özellikleri şunlardır:

    1. **Değişkenler:** SCSS, değişkenler kullanarak renkler, fontlar, boyutlar gibi değerleri
        depolamanıza olanak tanır. Bu, tasarımınızdaki tutarlılığı sağlamak ve değerleri daha kolay güncellemek için
        kullanışlıdır.

```scss
$main-color: #3498db;
                     body {
                     background-color: $main-color;
                    }
```

    2. **İç içe geçmiş Stiller:** SCSS, stil kurallarını daha anlaşılır hale getirmek için iç içe geçmiş bir yapı sağlar.

```scss
nav {
                    ul {
                      margin: 0;
                      padding: 0;
                      list-style: none;
                    }

                    li {
                      display: inline-block;
                      margin-right: 10px;
                    }
                  }
```

    3. **Miksindirler (Mixins):**  SCSS, tekrar kullanılabilir mixinler ile stil kurallarını gruplandırmanıza ve birleştirmenize olanak tanır.

```scss
@mixin border-radius($radius) {
                    -webkit-border-radius: $radius;
                    -moz-border-radius: $radius;
                    border-radius: $radius;
                  }

                  .box {
                    @include border-radius(10px);
                  }
```

    4. **İmport:** SCSS dosyalarını birleştirme işlemi daha kolaydır, çünkü @import komutu sayesinde başka SCSS dosyalarını içe aktarabilirsiniz.

```scss
@import "reset";
                    @import "base";
                    @import "layout";
```

Bu özellikler, SCSS'in CSS yazımını daha modüler, okunabilir ve bakımı kolay hale getirmesini sağlar. SCSS dosyaları genellikle tarayıcılar tarafından doğrudan anlaşılamaz, bu nedenle kullanılmadan önce bir CSS ön işlemci (örneğin, Dart Sass) kullanılarak CSS'e derlenir.

> **Not:** Dart Sass 1.80 sürümünden itibaren **@import** kullanımdan kaldırılma (deprecation) sürecindedir. Yeni projelerde dosyaları **@use** ve **@forward** ile bağlamanız önerilir; örneğin **@use "base";**.

### Css Nedir?

URL: https://www.serhatvarli.com/tr/blog/css-nedir
Published: 2024-01-02 · Updated: 2026-10-05 · Category: Css

CSS, "Cascading Style Sheets" (Basamaklı Stil Sayfaları) kısaltmasıdır ve web sayfalarını düzenlemek, stil vermek ve görsel tasarımını kontrol etmek için kullanılan bir stil dilidir. HTML (Hypertext Markup Language) ile birlikte kullanılarak web sayfalarının görünümünü belirlemek için kullanılır.

CSS, bir web sayfasındaki metinlerin, resimlerin, arka planların, kenar boşluklarının, renklerin ve diğer öğelerin görünümünü düzenlemek için tasarlanmıştır. Bu, web geliştiricilerin sayfanın yapısını (HTML) ve stilini (CSS) ayrı ayrı kontrol etmelerine olanak tanır, böylece tasarımı ve içeriği daha etkili bir şekilde yönetebilirler.

Temel olarak, CSS'in ana görevleri şunlardır:

    1. **Renk ve Arka Plan:** Sayfadaki öğelerin renkleri ve arka plan renkleri gibi görsel özellikleri belirleme.

    2. **Yazı Stili:** Metinlerin tipografik özellikleri, font boyutu, tipi, renkleri ve diğer stil özelliklerini belirleme.

    3. **Konum ve Boyut:** Öğelerin yerleşimini, konumunu ve boyutunu kontrol etme.

    4. **Kenar Boşlukları ve Yerleşim:** Öğeler arasındaki boşlukları, kenar boşluklarını ve yerleşimi belirleme.

    5. **Animasyon ve Geçişler:** Sayfadaki öğeler arasındaki geçişleri ve animasyonları kontrol etme.

CSS, genellikle bir harici CSS dosyası veya HTML dosyasının içinde yer alabilir. Harici bir CSS dosyası, bir web sitesindeki tüm sayfaların aynı stil kurallarını paylaşmasına ve bu kuralların tek bir yerden güncellenmesine olanak tanır, bu da bakımı kolaylaştırır ve tutarlı bir görünüm sağlar.

### Jquery Nedir?

URL: https://www.serhatvarli.com/tr/blog/jquery-nedir
Published: 2024-01-02 · Updated: 2026-10-05 · Category: Jquery

jQuery, JavaScript tabanlı bir açık kaynak kütüphanesidir. jQuery, HTML belgelerindeki olayları manipüle etmek, animasyonlar oluşturmak, AJAX ile veri alışverişi yapmak ve DOM (Belge Nesne Modeli) üzerinde kolayca işlemler gerçekleştirmek gibi web geliştirme görevlerini kolaylaştırmak için tasarlanmıştır.

jQuery'nin temel amacı, tarayıcı uyumluluğu sorunlarını çözmek ve geliştiricilere daha basit ve etkili bir şekilde web uygulamaları oluşturma imkanı sağlamaktır. jQuery, özellikle JavaScript ve DOM manipülasyonu konusunda tecrübesi olmayan geliştiriciler için kullanımı daha basit ve anlaşılır hale getirir.

jQuery, CSS seçicileri kullanarak DOM elemanlarına kolayca ulaşmayı, olay dinleme ve tepki verme işlemlerini basitleştirmeyi ve AJAX tabanlı veri alışverişini kolaylaştırmayı sağlar. Kod yazımını kısaltarak ve basitleştirerek geliştirme sürecini hızlandırır. Ancak, modern JavaScript ve tarayıcı teknolojilerinin gelişmesiyle birlikte, jQuery'ye olan bağımlılık azalmıştır ve birçok durumda jQuery kullanmak yerine saf JavaScript kullanmak tercih edilebilir hale gelmiştir.

### JavaScript Nedir?

URL: https://www.serhatvarli.com/tr/blog/javascript-nedir
Published: 2024-01-02 · Updated: 2026-10-05 · Category: JavaScript

JavaScript, genellikle web tarayıcılarında kullanılan bir programlama dilidir. Web sayfalarını dinamik hale
    getirmek, kullanıcı etkileşimleri sağlamak, veri manipülasyonu yapmak gibi birçok görevde kullanılır. JavaScript,
    tarayıcı tarafında çalışan bir betik dilidir ve HTML ile birlikte kullanılarak web sayfalarının etkileşimli hale
    gelmesini sağlar.

    JavaScript'in temel özellikleri şunlardır:

    1. **Tarayıcı Tarafında Çalışma:** JavaScript, genellikle tarayıcılar tarafından yorumlanan bir dil olarak çalışır. Bu nedenle, tarayıcı üzerinde doğrudan çalışabilir ve web sayfalarına etkileşim ekleyebilir.

    2. **Dinamik ve Hafif:** JavaScript, tarayıcıda çalışan hafif bir dil olduğu için web sayfalarını dinamik hale getirmek için idealdir. Kullanıcı etkileşimleri, form doğrulama, animasyonlar gibi görevleri kolaylıkla yerine getirebilir.

    3. **Nesne Tabanlı Programlama:** JavaScript, nesne tabanlı programlama (Object-Oriented Programming - OOP) paradigmasını destekler. JavaScript'te nesneler prototip (prototype) tabanlıdır; ES2015 ile gelen **class** sözdizimi bu yapının üzerine kurulmuş daha okunur bir yazımdır. Bu, kodun organizasyonunu ve tekrar kullanılabilirliğini artırmak için nesnelerin kullanılmasını içerir.

    4. **Platform Bağımsızlığı:** JavaScript, tarayıcı tabanlı bir dil olduğu için platform bağımsızdır. Yani farklı işletim sistemleri üzerinde çalışabilir.

    5. **HTML ve CSS Entegrasyonu:** JavaScript, HTML ve CSS ile birlikte kullanılarak, web sayfalarını daha etkileşimli ve dinamik hale getirebilir. Tarayıcı üzerindeki DOM (Document Object Model) üzerinde işlemler yaparak, sayfa içeriğini dinamik olarak değiştirebilir.

JavaScript, web geliştirmenin temel taşlarından biri olup, günümüzde sadece tarayıcı tabanlı değil, server tarafında da kullanılan popüler bir dil haline gelmiştir (Node.js gibi teknolojilerle).

### Html 5 Nedir?

URL: https://www.serhatvarli.com/tr/blog/html-5-nedir
Published: 2024-01-01 · Updated: 2026-10-05 · Category: Html 5

HTML5 (Hypertext Markup Language version 5), web üzerinde içerik oluşturmak ve yapılandırmak için kullanılan HTML standardının beşinci ana sürümüdür. Bugün HTML, sürüm numarası verilmeden WHATWG tarafından sürekli güncellenen bir "yaşayan standart" (HTML Living Standard) olarak geliştirilmektedir. Bu, web geliştirmede temel bir teknoloji olup, tüm büyük tarayıcılar tarafından
    desteklenmektedir. HTML5, önceki sürümleri olan HTML 4.01 ve XHTML 1.0'a göre birçok yeni özellik ve geliştirmeyi
    içermektedir.

    1. **Semantik Elemanlar:** HTML5, '<article>', '<section>', '<nav>', '<header>', '<footer>', '<aside>', '<figure>' ve '<figcaption>' gibi bir dizi yeni semantik eleman içerir. Bu elemanlar
                                        içeriğin yapısını ve anlamını belirlemeye yardımcı olur.

    2. **Ses ve Video:** HTML5, üçüncü taraf eklentilere gerek olmadan ses ve video içeriği gömmek için doğal destek
        sağlar. '<audio>' ve '<video>' elemanları, medya dosyalarını doğrudan web sayfalarına gömmek için kullanılır.

```html
<audio controls>
                               <source src="ses.mp3" type="audio/mp3">
                            Tarayıcınız ses etiketini desteklemiyor.
                            </audio>
                            <video width="400" height="300" controls>
                            <source src="video.mp4" type="video/mp4">
                            Tarayıcınız video etiketini desteklemiyor.
                          </video>
```

    3. **Canvas:** '<canvas>' elemanı, JavaScript kullanarak grafik ve animasyonlar için bir çizim yüzeyi sağlar. Genellikle oyunlar, grafikler ve etkileşimli içerikler oluşturmak için kullanılır.

```html
<canvas id="benimCanvas" width="320" height="160"></canvas>

<script>
  const canvas = document.getElementById('benimCanvas');
  const ctx = canvas.getContext('2d');

  // Dikdörtgen
  ctx.fillStyle = '#28e98c';
  ctx.fillRect(20, 20, 120, 80);

  // Daire
  ctx.beginPath();
  ctx.arc(230, 60, 40, 0, Math.PI * 2);
  ctx.fillStyle = '#4fc1ff';
  ctx.fill();

  // Metin
  ctx.fillStyle = '#ffffff';
  ctx.font = '16px sans-serif';
  ctx.fillText('Merhaba Canvas', 20, 135);
</script>
```

Bu örnekte **getContext('2d')** ile çizim bağlamı alınır; ardından **fillRect** ile bir dikdörtgen, **arc** ile bir daire ve **fillText** ile metin çizilir.

    4. **Yerel Depolama ve Oturum Depolama:** HTML5, localStorage ve sessionStorage API'larını içerir. Bu API'lar, kullanıcının tarayıcısında veri depolamak için kullanılır. Bu, oturumlar arasında veri saklamak için bir yol sağlar.

```javascript
// Veriyi yerel depolamada sakla
                        localStorage.setItem("anahtar", "değer");

                        // Veriyi yerel depolamadan al
                        var veri = localStorage.getItem("anahtar");
console.log(veri); // "değer"
```

    5. **Coğrafi Konum:** HTML5, web sitelerinin kullanıcının coğrafi konumunu Geolocation API aracılığıyla talep etmelerine olanak tanır. Bu, konum tabanlı hizmetlere ihtiyaç duyan uygulamalar için faydalıdır.

```javascript
if (navigator.geolocation) {
                         navigator.geolocation.getCurrentPosition(showPosition);
                         } else {
                        console.log("Geolocation is not supported by this browser.");
                      }

                      function  showPosition(position) {
                        console.log("Latitude: " + position.coords.latitude +
                          ", Longitude: " + position.coords.longitude);
                      }
```

    6. **Web Workers:** HTML5, web Workers kavramını tanıtarak geliştiricilere ana sayfadan bağımsız olarak arka planda betik çalıştırma olanağı sağlar. Bu, kaynak yoğun görevleri ayrı iş parçacıklarına aktararak daha iyi performans sağlar.

```javascript
// Yeni bir worker oluştur
                        var worker = new  Worker("worker.js");

                        // Worker gelen mesajları dinle
                        worker.onmessage = function(event) {
                        console.log("Message from worker: " + event.data);
                        };

                        // Worker mesaj gönder
                        worker.postMessage("Hello from the main page!");
```

Bunlar, HTML5'te tanıtılan birkaç örnek özelliktir. Web geliştirme teknolojileri evrimleştikçe, HTML5 modern ve etkileşimli web uygulamaları oluşturmak için temel bir yapı taşı olarak kalmaya devam eder.

### Css 3 Nedir?

URL: https://www.serhatvarli.com/tr/blog/css-3-nedir
Published: 2024-01-01 · Updated: 2026-10-05 · Category: Css 3

CSS (Cascading Style Sheets), web sayfalarını düzenlemek ve görsel stilini belirlemek için kullanılan bir stil
    dilidir. CSS, HTML veya XML gibi belge türleriyle birlikte kullanılır ve web tarayıcıları tarafından bu belgelerin
    nasıl görüntüleneceğini belirlemek için kullanılır. İşte temel CSS özelliklerinden bazıları Türkçe açıklamalarıyla
    birlikte:

    1. **Renkler:**

```css
/* Renk adı kullanımı */
                        color: red;

                        /* Hex renk kodu kullanımı */
                        color: #ff0000;

                        /* RGB renk kodu kullanımı */
                        color: rgb(255, 0, 0);
```

    2. **Arka Plan:**

```css
/* Renkli arka plan */
            background-color: yellow;

            /* Arka plan resmi */

                background-image: url('resim.png');
```

    3. **Yazı Stili:**

```css
/* Yazı tipi ve boyutu */
                        font-family: 'Arial', sans-serif;
                        font-size: 16px;

                        /* Kalın yazı */
                         font-weight: bold;

                        /* İtalik yazı */
                        font-style: italic;
```

    4. **Kenarlık ve Yarıçap:**

```css
/* Kenarlık rengi, kalınlığı ve stili */
                        border: 2px solid blue;

                        /* Köşe yarıçapı */
                        border-radius: 5px;
```

    5. **Gölgeler:**

```css
/* Kutuya gölge ekleme */
                        box-shadow: 5px 5px 10px gray;
```

    6. **Hizalama:**

```css
/* Metni ortala */
                        text-align: center;

                        /* Kutuyu ortala */
                        margin: 0 auto;
```

    7. **Görünürlük:**

```css
/* Görünürlük ayarı */
                        display: none; /* Görünmez */
                        display: block; /* Normal */
```

Bu temel CSS özellikleri, web sayfalarını oluştururken kullanabileceğiniz bazı stil seçeneklerini içermektedir. CSS'nin geniş bir yelpazede özelliklere sahip olduğunu unutmayın ve ihtiyacınıza göre belirli özellikleri ve değerleri özelleştirebilirsiniz.