#Coderİnfo #frontend

Frontend proqramçı nələri bilməlidir?

Frontend proqramçılar fərqli brauzerlərdə düzgün görünüş təmin etmək, kodu daha faydalı və vaxta qənaət edən bir formada yazmaq üçün cavabdehdilər. Əlavə olaraq, frontend proqramçı arxa planda server məlumatlarını yükləyərək səhifələrin dinamik yüklənməsinə və ya məlumatların dəyişməsinə imkan verən metod və kitabxana biliklərinə də sahib olmalıdır.

HTML, CSS, JavaScript

Bootstrap

React və ya Angular JS

jQuery kitabxanalar

Ajax

və s

©️ Coder.Tv | @CoderrTv

#Coderİnfo #frontend

📍60 günə Front-End Developer ol!

Hamıya salam. Bu məqalədə sizlərə "60 gündə" necə "Front-End Developer" ola biləcəyinizi deyəcəm. Front-End Developer olmaq üçün bizim bilməli olduğumuz dillər və Frameworklar aşağıdakilardır:

1. HTML5
2. CSS3
3. JavaScript & React
4. Bootstrap & Responsive Design
5. Git

× 1-ci gündən 7-ci günə qədər HTML5
× 8-ci gündən 15-ci günə qədər CSS3
× 15-ci gündən 24-cü günə qədər JavaScript təməlləri
× 24-cü gündən 27-ci günə qədər Bootstrap & Responsive Design
× 27-ci gündən 44-cü günə qədər JavaScript üst səviyyə
× 44-cü gündən 57-ci günə qədər React.js
× 57-ci gündən 60-cı günə qədər Git öyrənə bilərsiniz.

Qeyd: Yuxarıda saydıqlarımı gündə sadəcə 4-5 saat praktika edərək öyrənə bilərsiniz. Az məşğul olsanız təəssüf ki nəticə almağınız gec olacaq.

Oxuduğunuz üçün təşəkkürlər. Hər kəsə uğurlar!

©️Coder.Tv | @CoderrTv

#mega #frontend #python

📌 50+ Saatlik Komple FRONTEND EĞİTİMİ WEB TASARIM 12+PROJE:

https://mega.nz/folder/GgxgVD7A#PnT5PKVVqjays9EIs9QdXQ



📌 (40+ Saat) Python Sıfırdan İleri Seviye Programlama (2020):

https://mega.nz/folder/9kl2SLib#AQ_4e2-47C1vmSDRUfAbqA

©️Coder.Tv | @CoderrTv

#mega #web #frontend #backend

🌟 Modern Web Geliştirme Kursu | Sıfırdan Sektörün Yükseklerine

📚 Arxiv Linki: https://mega.nz/folder/BH503TqR#tU9j2zViF6FeWOsm1fgDOQ

©️Coder.Tv | @CoderrTv

#mega #web #frontend #backend

🌟 Modern Web Geliştirme Kursu | Sıfırdan Sektörün Yükseklerine

📚 Arxiv Linki: https://mega.nz/folder/BH503TqR#tU9j2zViF6FeWOsm1fgDOQ

©️Coder.Tv | @CoderrTv

#Coderİnfo #frontend

📍60 günə Front-End Developer ol!

Hamıya salam. Bu məqalədə sizlərə "60 gündə" necə "Front-End Developer" ola biləcəyinizi deyəcəm. Front-End Developer olmaq üçün bizim bilməli olduğumuz dillər və Frameworklar aşağıdakilardır:

1. HTML5
2. CSS3
3. JavaScript & React
4. Bootstrap & Responsive Design
5. Git

× 1-ci gündən 7-ci günə qədər HTML5
× 8-ci gündən 15-ci günə qədər CSS3
× 15-ci gündən 24-cü günə qədər JavaScript təməlləri
× 24-cü gündən 27-ci günə qədər Bootstrap & Responsive Design
× 27-ci gündən 44-cü günə qədər JavaScript üst səviyyə
× 44-cü gündən 57-ci günə qədər React.js
× 57-ci gündən 60-cı günə qədər Git öyrənə bilərsiniz.

Qeyd: Yuxarıda saydıqlarımı gündə sadəcə 4-5 saat praktika edərək öyrənə bilərsiniz. Az məşğul olsanız təəssüf ki nəticə almağınız gec olacaq.

Oxuduğunuz üçün təşəkkürlər. Hər kəsə uğurlar!

©️Coder.Tv | @CoderrTv

#mega #web #frontend #backend

🌟 Modern Web Geliştirme Kursu | Sıfırdan Sektörün Yükseklerine

📚 Arxiv Linki: https://mega.nz/folder/BH503TqR#tU9j2zViF6FeWOsm1fgDOQ

©️Coder.Tv | @CoderrTv

#mega #web #frontend #backend

🌟 Modern Web Geliştirme Kursu | Sıfırdan Sektörün Yükseklerine

📚 Arxiv Linki: https://mega.nz/folder/BH503TqR#tU9j2zViF6FeWOsm1fgDOQ

©️Coder.Tv | @CoderrTv

Yeni bir səhifəyə keçid etdikdə səhifənin hər zaman
yuxarısında başlamaq üçün (əgər scroll edib aşağıya
düşmüşüksə əvvəlki səhifədə) funksiya


#reactjs #javascript #frontend #frontenddeveloper #html

@CoderrTv | © Cəfərli Ziya

Create React App köməyilə proyekt yaratmısınızsa, onun nə qədər yavaş olmasını bilirsiniz.Bu yavaşlıqları dev serveri aktivləşdirəndə(cold start) və koddakı dəyişliklərin browserde göstərilməsində müşahidə etmək olar. Ən pis tərəfi də ondadır ki, proyektin kodbazası və asılılıq sayı artdıqca bu göstəricilər daha da yavaşlayır.💻 

Problem nədədir? 🤔 

Create React App Webpack bundler-dən istifadə edir. Webpack dev server aktivləşəndə bütün kodu bundle edir, yəni bütün kodbazanı bir və ya bir neçə optimizasiya olunan fayla çevirir.

Prosesi necə sürətləndirmək olar? 🧐 

Create React App yerine ViteJS dən istifadə oluna bilər. Vite özünü yeni nəsil frontend tooling kimi tanıdır.🛠️ 

Xüsusiyyətlər:

1.Development zamanı esbuild-dən istifadə edir. Esbuild Go dilində yazılan çox sürətli bundler-dir.
2.Koddakı dəyişikliklərin browser-də göstərilməsi vaxtı kodbazasının ölçüsündən aslı olmayaraq eyni qalır.
3.TypeScript, SCSS, JSX konfiqurasiyasız dəstəkləyir (SCSS-dən istifadə etmək üçün npm dən yükləmək lazımdır.) və s.

Əminəm ki, Vite-ni yoxladıqdan sonra bir də Create React App-a qayıtmayacaqsınız 🙂

#frontend #react #development #vite #programming


@CoderrTv | ©️Mammadkhan Bayramov

#internship
#ishvar

CV-lər gəlməyə davam edir. DevOps da əlavə edildi!

İri dövlət qurumunun biznes proseslərinin avtomatlaşdırılmasında, Azərbaycanda alternativi olmayan "Elektron Universitet Platforması"nın daha da genişləndirilməsində və mobil tətbiqinin hazırlanmasında yer almaq istəyən gəncləri komandamıza aşağıdakı sahələr üzrə dəvət edirik:

Junior-lar:
1. Junior Backend Engineer (NET CORE 5+) - 2 nəfər
2. Junior Mobile App Developer (.NET MAUI) - 1 nəfər
3. Junior FrontEnd (html, css bilikləri kifayətdir, blazor ciddi üstünlükdür, təlim keçiriləcək) - 1 nəfər
4. Junior Oracle DBA/Developer - 1 nəfər
5. Junior QA Engineer - 1 nəfər
6. Junior DevOps Engineer - 1 nəfər

Təcrübəçilər:
1. Backend Engineer (NET CORE) - 2 nəfər
2. UI/UX designer (Figma, araşdırma vəs) - 1 nəfər
3. PowerBI Developer - 1 nəfər

Email: info@timgroup.az
#backend #csharp #powerbi #developer #designer #ux #frontend #oracle #qa #DevOps

Agentlikdə 2-ci İT təcrübə proqramına namizəd qəbuluna start verildi!

Bu proqram hazırda təhsili davam edən tələbələrə və yeni məzunlara Agentlikdə aşağıdakı istiqamətlərdən birində praktiki təcrübə əldə etmək imkanı yaradır:
1. .NET / .NET Core üzrə #backend proqramlaşdırma
2. React üzrə #frontend proqramlaşdırma

Əgər siz ali təhsil müəssisələrinin 4-cü kurs bakalavriat pilləsində və ya 1-ci/2-ci kurs magistratura pilləsində İT istiqamətləri üzrə təhsil alırsınızsa, müraciət etdiyiniz istiqamət üzrə müəyyən texniki bilikləriniz varsa, aşağıdakı link vasitəsilə daha geniş məlumat ala və Proqrama müraciət edə bilərsiniz.

Əlavə suallarınız olarsa, mənə ünvanlaya bilərsiniz :)

https://lnkd.in/eFkwPdha


@CoderrTv

CSS Media Queries

CSS-də Media Queries proqramlaşdırma dillərindəki "if" şərti strukturuna bənzəyir.

Brauzer/pəncərə üçün mötərizələr arasındakı şərt təmin edilirsə, buruq mötərizələrin içindəki qaydalar nəzərə alınır. #css #frontend #responsive


@CoderrTv

📢 Yeni başlayanlar və Tələbələr üçün #Onlayn #Frontend Proqramlaşdırma Təlimi!

Frontend proqramlaşdırma, interaktiv veb səhifələr və veb tətbiqlərin inkişafında əsas rol oynayır. Bizim təlimlərimiz vasitəsilə, HTML, CSS və JavaScript (React Js) kimi ən güclü və populyar veb texnologiyalarını öyrənəcəksiniz.

MasterCode Academy-də #Onlayn #frontend bootcamp-ına qoşulun və təcrübəli təlimçilərlə 5 ay müddətində frontend kodlaşdırma biliklərinə yiyələnin.

Bizim təlimlərimizdən faydalanmaqla, bir frontend proqramçı olmaq üçün tələb olunan lazımi bacarıqları əldə edəcəksiniz.

Dərslər həftədə 5 dəfə xüsusi tədris proqramı ilə həyata keçirilir.
Təlimçilərimiz ilə yanaşı mentor heyətimiz sizə 7/24 dəstək olur.

Bootcamp-a qoşulan #tələbələr üçün özəl qiymət təklifimiz də mövcuddur.

💬 Ətraflı məlumat üçün rəy bölməsinə və ya @coderarxivdev'ə yaza bilərsiniz.

#javascript #developer #html #css #reactjs

#frontend #reactjs

ℹ️ Use Optimistic nədir? və nəyə görə useState-dən fərqlidir?

Use Optimisctic - UI-ni optimist şəkildə yeniləməyə imkan verən React Hook-dur.

useState dəyişiklikləri ani göstərmir – dəyişiklik baş verir, sonra cavab alınır, sonra state yenilənir.

`useOptimistic` isə istifadəçiyə ani reaksiya verir (məsələn: "bəyənildi" effektini dərhal göstərir), amma arxa planda (backend API) sorğunu sonradan göndərir. Əgər uğursuz olarsa, əvvəlki vəziyyətə qayıtmaq mümkündür.

Bu, istifadəçi təcrübəsini daha sürətli və səlis edir.

📌 Nümunə: Post Like (Bəyənmə) funksiyası:

🟥 useState ilə (gec reaksiya)

const [liked, setLiked] = useState(false);

const handleLike = async () => {
  const res = await fetch("/api/like", {
    method: "POST",
    body: JSON.stringify({ postId }),
  });

  if (res.ok) {
    setLiked(true);
  }
};

➡️ Burda await bitmədən bəyənmə görünmür. Yəni istifadəçi bəyən düyməsinə kliklədikdə, arxa plandan cavab gəlməyincə heç nə dəyişmir. Bu isə yavaş görünür.

🟩 useOptimistic ilə (ani reaksiya)

"use client";

import { useOptimistic, useState } from "react";

export default function PostLikeButton({ postId, defaultLiked }) {
  const [liked, setLiked] = useState(defaultLiked);

  const [optimisticLiked, addOptimisticLike] = useOptimistic(liked);

  const handleLike = async () => {
    // Əvvəlcə istifadəçiyə dərhal göstər
    addOptimisticLike(!optimisticLiked);

    // Sonra serverə göndər
    const res = await fetch("/api/like", {
      method: "POST",
      body: JSON.stringify({ postId, liked: !liked }),
    });

    if (res.ok) {
      setLiked(!liked);
    } else {
      // burda hata varsa, sabitləşdirmək üçün istəsən `setLiked(liked)` edə bilərsən
    }
  };

  return (
    <button onClick={handleLike}>
      {optimisticLiked ? "❤️ Bəyənildi" : "🤍 Bəyən"}
    </button>
  );
}

✅ Faydası:

- İstifadəçi "Like" düyməsinə klikləyən kimi dəyişiklik görünür – ani reaksiya
- Backend API cavab verəndə isə əsl məlumat useState ilə sabitlənir
- Əgər backend uğursuz olarsa, geri ala bilirsən


@TechCodeAz | TechCode.Az

#html #frontend #meta

#Meta tag nədir?

HTML-dəki meta teqləri (yəni <meta> teqləri) səhifə haqqında brauzerə və axtarış sistemlərinə əlavə məlumatlar təqdim etmək üçün istifadə olunur. Bu teqlər <head> hissəsində yerləşir və birbaşa istifadəçiyə görünmür, amma SEO, sosial paylaşım və brauzer davranışları üçün çox vacibdir.

Gəlin, attribute-larına baxaq:

🧠 1. charset — Simvol kodlaşdırması: saytın hansı simvol kodlaşdırmasından istifadə etdiyini bildirir. Nümunə olaraq:

<meta charset="UTF-8">

🔹 Ən geniş istifadə olunan kodlaşdırma UTF-8-dir. Azərbaycan dili simvolları da daxil olmaqla, əksər dilləri dəstəkləyir.

🔍 2. name="description" — Sayt təsviri (SEO üçün) : axtarış sistemlərinə səhifənin qısa təsvirini verir. Nümunə olaraq:

<meta name="description" content="Azərbaycan haqqında maraqlı faktlar və məlumatlar.">

🔹 Google bu təsviri axtarış nəticələrində göstərə bilər. 150-160 simvol tövsiyə olunur.

📱 3. name="viewport" — Mobil uyğunluq: Mobil cihazlarda səhifənin düzgün görünməsi üçün bu teq vacibdir. Nümunə olaraq:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

🔹 Saytın mobil cavabdeh (responsive) olmasına kömək edir.

🗣 4. name="keywords" — Açar sözlər (az təsirli, amma bəzi sistemlərdə hələ də istifadə olunur). Nümunə olaraq:

<meta name="keywords" content="Azərbaycan, tarix, mədəniyyət, turizm">

🔹 SEO üçün əvvəllər vacib idi, indi Google bu teqi nəzərə almır, amma bəzi axtarış sistemləri hələ istifadə edir.

🧾 5. name="author" — Müəllif adı. Nümunə olaraq:

<meta name="author" content="Murad Qurbanzadə">

🔹 Səhifənin müəllifini göstərir.

💻 6. http-equiv="refresh" — Avtomatik yönləndirmə. Nümunə olaraq:

<meta http-equiv="refresh" content="5; url=https://example.com">

🔹 Səhifə 5 saniyədən sonra example.com-a yönləndiriləcək. (Amma bu çox tövsiyə olunmur, çünki istifadəçi təcrübəsinə mənfi təsir göstərə bilər.)

📷 7. Open Graph (Facebook, LinkedIn, WhatsApp paylaşımı üçün). Nümunə olaraq:

<meta property="og:title" content="Azərbaycanın Gözəllikləri">
<meta property="og:description" content="Azərbaycanın təbiəti, mədəniyyəti və tarixi haqqında geniş məlumat.">
<meta property="og:image" content="https://example.com/azerbaycan.jpg">
<meta property="og:url" content="https://example.com/az">

🔹 Sosial şəbəkələrdə link paylaşarkən necə göründüyünü bu teqlər müəyyən edir.

🐦 8. Twitter Card (Twitter paylaşımı üçün). Nümunə olaraq:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Azərbaycan Turizmi">
<meta name="twitter:description" content="Azərbaycanın turizm potensialı haqqında ətraflı məlumat.">
<meta name="twitter:image" content="https://example.com/image.jpg">

🔹 Sosial şəbəkələrdə link paylaşarkən necə göründüyünü bu teqlər müəyyən edir.

Ümumən baxdıqda isə:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Azərbaycan haqqında faydalı və maraqlı məlumatlar.">
  <meta name="keywords" content="Azərbaycan, mədəniyyət, turizm, tarix">
  <meta name="author" content="Murad Qurbanzadə">
  <meta property="og:title" content="Azərbaycan Gözəllikləri">
  <meta property="og:description" content="Azərbaycanın təbiəti və mədəniyyəti haqqında məlumat.">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/az">
</head>

@TechCodeAz | TechCode.Az

#frontend #css

🔷 CSS nədir?

CSS – Cascading Style Sheets ifadəsinin qısaltmasıdır, Azərbaycan dilində bu "Silsiləvi Üslub Cədvəli" deməkdir.
CSS, HTML elementlərinin necə görünəcəyini (rəngi, ölçüsü, yerləşməsi, arxa fonu və s.) təyin etmək üçün istifadə olunur.

CSS 3 yolla yazılır. Gəlin CSS-in 3 əsas tətbiq üsulunu nümunələrlə izah edək və sonda hansının daha çox üstünlük təşkil etdiyini və səbəbini açıqlayaq.

🔹 1. Inline CSS (Daxili səviyyədə yazılan CSS) : Inline CSS birbaşa HTML elementinin style atributu ilə yazılır. Bu üsul çox lokal dəyişikliklər üçün istifadə olunur.

<p style="color: red; font-size: 20px;">Bu mətn qırmızıdır və 20px-dir.</p>

➕ Üstünlükləri:
- Sürətli düzəlişlər üçün uyğundur
- JavaScript ilə asanlıqla dəyişdirilə bilər

➖ Mənfi cəhətləri:
- Təmiz kod prinsiplərinə ziddir
- Təkrarçılığa səbəb olur, reusable deyil
- İdarə olunması çətindir (böyük layihələrdə)

🔹 2. Internal CSS (Daxili <style> tag-i ilə yazılan CSS): Bu üsulda CSS qaydaları <head> daxilindəki <style> tag-ında yazılır.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>Bu mətn göydür və qalındır.</p>
</body>
</html>

➕ Üstünlükləri:
- Tək səhifəlik layihələr üçün uyğundur
- Sürətli testlərdə rahatdır

➖ Mənfi cəhətləri:
- Kodun təkrar istifadəsi çətindir
- Böyük layihələrdə idarəolunmaz hala gəlir
- HTML faylı çox böyük olur

🔹 3. External CSS (Xarici .css faylı ilə): Bu üsulda bütün CSS qaydaları ayrı bir .css faylında saxlanılır və HTML faylına <link> vasitəsilə əlavə olunur.

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="green-text">Bu mətn yaşıl olacaq.</p>
</body>
</html>

CSS:

.green-text {
  color: green;
  font-size: 18px;
}

➕ Üstünlükləri:

- Kodun təkrar istifadəsi asandır
- Fərqli səhifələr eyni .css faylını istifadə edə bilər
- Layihəni modulyar və təmiz saxlayır
- Brauzer bu faylı cache-ləyir, performans artır

➖ Mənfi cəhətləri:

- Fayl çoxdursa səhifənin ilk yüklənməsi biraz gecikə bilər

Sizcə hansı daha çox SEO və performans baxımından daha sərfəlidir? Səbəbini də istəsəz bizimlə bölüşə bilərsiz.
1. İnline
2. External
3. İnternal

@TechCodeAz | TechCode.Az

#frontend #html #javascript

<script /> nədir?

HTML-də JavaScript kodunu işlətmək üçün <script> tagından istifadə olunur.

Bu tag brauzerə deyir ki, "buradan sonra JavaScript kodu gəlir və onu icra et.”:

<script>
  alert("Salam, dünya!");
</script>

JavaScript-in HTML-ə 3 cür bağlanma üsulu:

1. Daxili script (Internal JavaScript) - JavaScript kodları birbaşa HTML faylının içində, <script> tagı vasitəsilə yazılır:

<!DOCTYPE html>
<html>
<head>
  <title>Daxili Script</title>
</head>
<body>
  <h1>Salam!</h1>
  <script>
    alert("Bu daxili scriptdir.");
  </script>
</body>
</html>

✅ Üstünlükləri:

- Kiçik layihələr üçün rahatdır.
- Fayl sayı az olur.

❌ Dezavantajları:

- Kodlar HTML ilə qarışır.
- Təmizlik və təkrar istifadəyə uyğun deyil.

2. Xarici script (External JavaScript) - Kodlar ayrıca .js faylına yazılır və HTML faylında çağırılır:

<!DOCTYPE html>
<html>
<head>
  <title>Xarici Script</title>
  <script src="main.js"></script>
</head>
<body>
  <h1>Xarici fayl nümunəsi</h1>
</body>
</html>

main.js:

alert("Bu, xarici scriptdir.");

✅ Üstünlükləri:

- Kod daha səliqəli və təşkilatlanmış olur.
- Eyni faylı bir neçə HTML faylında istifadə etmək mümkündür.
- Kodun saxlanması və inkişafı asanlaşır.

❌ Dezavantajları:

- Əlavə HTTP sorğusu (performansa təsir edə bilər).
- Əgər script faylı tapılmasa, səhv çıxar.

3. Inline script (Sətir içi JavaScript) - HTML elementinin içində birbaşa yazılır (məsələn, onclick atributu ilə).:

<button onclick="alert('Düyməyə basıldı!')">Beni bas</button>

✅ Üstünlükləri:

- Sadə funksiyalar üçün tez və rahatdır.

❌ Dezavantajları:

- Kodlar HTML ilə qarışır.
- Oxunması və idarə olunması çətindir.
- Təhlükəsizlik riski artar (XSS hücumları).

⭐️ Ən çox istifadə olunan hansıdır və niyə? -

✅ Xarici script üsulu ən çox istifadə olunur.

Səbəbləri:

- Kodun təkrar istifadəsi mümkündür.
- Layihənin böyüməsinə uyğun səliqəli struktur təmin edir.
- HTML və JavaScript ayrı saxlandığı üçün baxımı və inkişafı asan olur.

@TechCodeAz | TechCode.Az

#frontend #javascript #reactjs

useFormStatus - React 19 ilə gələn yeni hook-lardan 1-i:
- useFormStatus
- useActionState
- useOptimistic
- use


useFormStatus — yalnızca formun içindəki Form komponentinin bir child komponentində istifadə oluna bilən bir hook-dur. Bu hook vasitəsilə:
- Formun hazırda göndərildiyini (pending) öyrənə bilərsən.
- Göstərilən butonun deaktiv olub-olmayacağını təyin edə bilərsən.
- Yükləmə animasiyası və ya spinner əlavə edə bilərsən.


✅ İstifadə qaydası (React 19 Server Actions ilə):

1. Form və Server Action:

// app/actions.ts
'use server'

export async function sendData(formData: FormData) {
  const name = formData.get("name")
  await new Promise(resolve => setTimeout(resolve, 2000)) // sadə gecikmə
  console.log("Ad göndərildi:", name)
}

2. Komponent və useFormStatus istifadəsi:

'use client'

import { useFormStatus } from "react-dom"

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button
      type="submit"
      disabled={pending}
      className={px-4 py-2 rounded ${pending ? "bg-gray-400" : "bg-blue-600 text-white"}}
    >
      {pending ? "Göndərilir..." : "Göndər"}
    </button>
  )
}

3. Əsas Form komponenti:

import { sendData } from "./actions"
import SubmitButton from "./SubmitButton"

export default function Page() {
  return (
    <form action={sendData} className="space-y-4">
      <input
        type="text"
        name="name"
        placeholder="Adınızı yazın"
        className="border p-2 rounded w-full"
      />
      <SubmitButton />
    </form>
  )
}

💡 Nə üçün useFormStatus faydalıdır?
- UX yaxşılaşdırır: Form göndərilərkən "Göndərilir..." mesajı və ya spinner göstərə bilərsən.
- Button disable: İkinci dəfə göndərmənin qarşısını alır.
- Server Action ilə uyğun işləyir.

⚠️ Nəzərə alınmalı məqamlar
- 🔒 useFormStatus yalnız form komponentinin içindəki child elementlərində işləyir.
- ❌ Form xaricində çağırıldıqda heç bir məlumat qaytarmır.
- ✅ React 19-un form komponenti ilə action={serverFunction} yazaraq istifadə etməlisən.

@TechCodeAz | TechCode.Az

#frontend #javascript #socket.io

Socket.io nədir? - Real vaxt rejimində veb programları üçün Javascript kitabxanasıdır.

O, WebSockets və ya fallbacks kimi ehtiyatlardan istifadə edərək brauzer və server arasında iki istiqamətli, hadisəyə əsaslanan əlaqəni təmin edir.

⚙️ Yüklənməsi:
Backend (Node.js):

npm install express socket.io

Frontend (Client):

<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>

💻 Nümunə:
Server (server.js):

const express = require("express");
const http = require("http");
const { Server } = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*",
  },
});

io.on("connection", (socket) => {
  console.log("User connected:", socket.id);

  socket.on("chat-message", (msg) => {
    io.emit("chat-message", msg);
  });

  socket.on("disconnect", () => {
    console.log("User disconnected:", socket.id);
  });
});

server.listen(3000, () => {
  console.log("Server running on http://localhost:3000");
});

Client (index.html):

<!DOCTYPE html>
<html>
<head><title>Socket.IO Chat</title></head>
<body>
  <input id="msgInput" placeholder="Type a message..." />
  <button onclick="sendMessage()">Send</button>
  <ul id="messages"></ul>

  <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
  <script>
    const socket = io("http://localhost:3000");
    const messages = document.getElementById("messages");
    const input = document.getElementById("msgInput");

    socket.on("chat-message", (msg) => {
      const li = document.createElement("li");
      li.textContent = msg;
      messages.appendChild(li);
    });

    function sendMessage() {
      const msg = input.value;
      socket.emit("chat-message", msg);
      input.value = "";
    }
  </script>
</body>
</html>

Sən bunları edə bilərsən:
- 💬 Chat applications
- 🔔 Notifications (e.g., new followers, messages)
- 📈 Live dashboards (e.g., user count, data updates)
- 🎮 Multiplayer games
- 🧑‍💻 Real-time collaborative editors

@TechCodeAz | TechCode.Az