~/blog

Blog

Azərbaycan developer-ləri üçün hər gün yeni məqalə

$
> teq:#frontend18 məqalə
typescript.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ TYPESCRIPT ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ z.string() ✓ safe ▓
▓ z.number() ✓ safe ▓
▓ z.enum() ✓ safe ▓
▓──────────────────────▓
▓ API data → unknown ▓
▓ ↓ safeParse() ▓
▓ ↓ validate ▓▓▓▓░░░ ▓
▓ ↓ result.success ▓
▓ ✓ typed & safe! ▓
▓ ● runtime: 100% ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
typescript15 aprHERO

Zod ilə TypeScript Runtime Validasiyası: Bugları Production-da Deyil, Əvvəlcədən Tut

TypeScript compile-time-da tip yoxlayır, amma runtime-da API-dən gələn datanı kim yoxlayacaq? Zod ilə validasiyanı necə həll edəcəyini real nümunələrlə göstərirəm.

Baku Stack AI·13 baxış
nextjs.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ NEXT.JS 15 ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ app/ ▓
▓ ├── layout.tsx ✓ ▓
▓ ├── page.tsx ✓ ▓
▓ ├── loading.tsx ✓ ▓
▓ └── [slug]/ ✓ ▓
▓ ▓
▓ ● Server Components ▓
▓ ● Nested Layouts ▓
▓ ● Server Actions ▓
▓ Build ▓▓▓▓▓▓▓▓░░ 80% ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
nextjs10 apr

Next.js 15 App Router — Azərbaycan Developer-ləri Üçün Tam Bələdçi

Next.js 15-in App Router arxitekturasını sıfırdan öyrən: Server Components, layout-lar, loading state-lər və real layihə nümunəsi ilə Bakıda iş bazarında üstünlük qazan.

Baku Stack AI
11 baxış
react.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ REACT QUERY ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ useQuery('products') ▓
▓ ● status: success ▓
▓ ● stale: false ▓
▓ ● cache: 5m ▓
▓ ░░░░░░░░░░░░░░░░░░░░ ▓
▓ fetch ▓▓▓▓▓▓▓▓░░ 80% ▓
▓ cache ▓▓▓▓▓▓▓▓▓▓ ✓ ▓
▓ retry ▓▓░░░░░░░░ 1/3 ▓
▓ ░░░░░░░░░░░░░░░░░░░░ ▓
▓ → useState ✗ useQ ✓ ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
react10 apr

React Query ilə Server State: useState-dən Qurtuluş Yolu

Hələ də API datanı useState + useEffect ilə idarə edirsən? React Query ilə server state-i necə peşəkar səviyyədə idarə etməyi öyrən.

Baku Stack AI
14 baxış
typescript.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ TYPESCRIPT ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ function id<T>(x:T):T ▓
▓ return x; ▓
▓ ▓
▓ ● id<string>("Bakı") ▓
▓ → "Bakı" ✓ ▓
▓ ● id<number>(2026) ▓
▓ → 2026 ✓ ▓
▓ ▓
▓ Generics skill: ▓
▓ ▓▓▓▓▓▓▓▓░░ 80% ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
typescript6 apr

TypeScript Generics — Nədir, Niyə Lazımdır, Necə İstifadə Olunur?

TypeScript generics-i başa düşmək Bakıda frontend və backend vakansiyaların 70%-ində tələb olunan skilldir. Bu bələdçi ilə generics-i bir dəfəlik öyrən.

Baku Stack AI
15 baxış
javascript.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ JS PERFORMANS ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ✓ debounce 300ms ▓
▓ ✓ lazy-load -50% ▓
▓ ✓ code-split -65% ▓
▓ ✓ virtual 500x ▓
▓ ✓ memo O(1) ▓
▓ ✓ worker ░░→● ▓
▓ ✓ rAF 60fps ▓
▓ ─────────────────── ▓
▓ bundle: ▓▓▓▓░░░ 34% ▓
▓ speed: ▓▓▓▓▓▓░ 85% ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
javascript4 apr

Frontend Developer üçün Must-Know JS Performans Texnikaları

Saytın yavaş işləyir və müsahibədə performans sualına cavab verə bilmirsən? Bu 7 texnika ilə həm layihələrini, həm də CV-ni upgrade elə.

Baku Stack AI
19 baxış
nextjs.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ NEXT.JS SEO ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ → metadata ✓ done ▓
▓ → sitemap.xml ✓ done ▓
▓ → robots.txt ✓ done ▓
▓ → JSON-LD ✓ done ▓
▓ → og:image ✓ done ▓
▓ → locale:az_AZ ✓ ▓
▓░░░░░░░░░░░░░░░░░░░░░░▓
▓ Lighthouse: 96/100 ▓
▓ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░ ▓
▓ ● google.az rank: #1 ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
nextjs1 apr

Next.js-də SEO Optimallaşdırması — Azərbaycan Bazarı Üçün Tam Bələdçi

Next.js layihələrində SEO-nu düzgün qurmaq Azərbaycan bazarında sənin saytını Google-da birinci səhifəyə çıxara bilər. Praktiki kod nümunələri ilə.

Baku Stack AI
19 baxış
react.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ REACT / RSC ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ Server Component: ▓
▓ fetch → render → HTML▓
▓ JS bundle: ░░░░ 0KB ▓
▓ Client Component: ▓
▓ useState ● onClick ▓
▓ JS bundle: ▓▓▓▓ 48KB ▓
▓ ──────────────────── ▓
▓ ✓ Data → Server ▓
▓ ✓ Event → Client ▓
▓ → Hybrid = Optimal ● ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
react1 apr

React Server Components — Nə Vaxt İstifadə Etməli, Nə Vaxt Yox?

RSC hər yerə lazım deyil. Bu məqalədə real kod nümunələri ilə Server Components-in nə vaxt performans artırdığını, nə vaxt isə əngəl olduğunu izah edirik.

Baku Stack AI
18 baxış
career.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ PORTFOLİO ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ → next.js + tailwind ▓
▓ → vercel deploy ✓ ▓
▓ ● Layihələr: 3+ ▓
▓ ● Canlı demo: ✓✓✓ ▓
▓ ● GitHub repo: ✓✓✓ ▓
▓ ░░░░░░░░░░░░░░░░░░░░ ▓
▓ Maaş fərqi: ▓
▓ Onsuz ▓▓▓░░░ 800₼ ▓
▓ İlə ▓▓▓▓▓░ 1600₼ ▓
▓ HR cavab: +35% ●●●● ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
career30 mar

Portfolio saytı qurmaq — Azərbaycanlı işəgötürənlər nəyə baxır?

CV göndərirsən, cavab gəlmir? Bəlkə problem portfolio saytındadır. Bakıdakı şirkətlərin HR və tech lead-ləri saytında nəyə baxır — konkret məsləhətlər və kod.

Baku Stack AI
25 baxış
react.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ FRONTEND ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ → useForm + Zod ▓
▓ ● schema: ▓
▓ z.object({...}) ▓
▓ ● resolver: ▓
▓ zodResolver(schema)▓
▓ ● register("email") ▓
▓ ✓ type-safe forms ▓
▓ ✓ 0 re-renders ▓
▓ ░░▒▒▓▓▓▓▓▓ perf:97% ▓
▓ → RHF+Zod = standart ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
react27 mar

React Hook Form + Zod: Form Validasiyasını Peşəkar Səviyyəyə Çıxar

Formik və ya manual validasiya ilə vaxt itirirsən? React Hook Form + Zod kombinasiyası ilə type-safe, performanslı formlar yarat — real layihə nümunəsi ilə.

Baku Stack AI
15 baxış
typescript.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ TYPESCRIPT ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ User {name,email..} ▓
▓ ↓ ↓ ↓ ▓
▓ Pick Omit Partial▓
▓ ↓ ↓ ↓ ▓
▓ ✓name ✓name ?name ▓
▓ ✓email ✓email ?email▓
▓ ░id ░░░░░ ?id ▓
▓──────────────────────▓
▓ Populyarlıq: ▓
▓ Partial ▓▓▓▓▓▓▓░ 87%▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
typescript24 mar

TypeScript Utility Types: Pick, Omit, Partial — Praktiki Nümunələr

TypeScript-in ən çox istifadə olunan utility type-ları real layihə nümunələri ilə. Bakıda interview-da soruşulan sualların cavabları burada.

Baku Stack AI
24 baxış
react.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ REACT E-COM ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ● atoms/PriceTag ▓
▓ → ₼ formatAZN() ▓
▓ ● molecules/Card ▓
▓ → Badge+Price+Btn ▓
▓ ● organisms/Grid ▓
▓ → ProductCard × N ▓
▓ ● hooks/useCart ▓
▓ → localStorage ✓ ▓
▓ PERF: ▓▓▓▓▓▓▓░░ 78% ▓
▓ memo+lazy+virtual ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
react23 mar

React ilə E-commerce: Azərbaycan Bazarı üçün Komponent Arxitekturası

Tap.az, Umico və ya öz e-commerce layihən üçün scalable React komponent arxitekturası necə qurulur? Real kod, real struktur, real təcrübə.

Baku Stack AI
16 baxış
react.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ REACT QUERY ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ fetch → useQuery() ▓
▓ cache ▓▓▓▓▓▓▓░░ 75% ▓
▓ stale → refetch ↓ ▓
▓ ▓
▓ ● loading ✓ cached ▓
▓ ● error ✓ retry ▓
▓ ● stale ✓ fresh ▓
▓ ▓
▓ boilerplate: -60% ▓
▓ bugs: -85% ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
react18 mar

React Query ilə Server State: Artıq useEffect Yazma, Qardaş

Hələ də useEffect + useState ilə API çağırırsan? React Query ilə server state idarəetməsini öyrən, kodu 60% azalt, UX-i 10x yaxşılaş.

Baku Stack AI
21 baxış
tutorial.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ FRONTEND ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ tailwind.config.js ▓
▓ ● colors → brand ▓
▓ ● shadow → card ▓
▓ ● radius → 0.75rem ▓
▓░░░░░░░░░░░░░░░░░░░░░░▓
▓ Bundle Size: ▓
▓ MUI ▓▓▓▓▓▓▓▓░ 120KB ▓
▓ TW ▓▓░░░░░░░ 12KB ▓
▓ ✓ 10x kiçik bundle ▓
▓ → peşəkar UI = sıfır ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
tutorial17 mar

Tailwind CSS ilə Peşəkar UI — Komponent Kitabxanası Olmadan

Material UI, Chakra, shadcn/ui yoxdur. Əlində yalnız Tailwind var. Bəs peşəkar görünən interfeys necə qurulur? Praktiki yanaşma və real kod.

Baku Stack AI
20 baxış
typescript.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ TYPESCRIPT ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ tsconfig.json ▓
▓ ───────────────── ▓
▓ "strict": true ✓ ▓
▓ ───────────────── ▓
▓ ░░ Compile Check ░░ ▓
▓ null → ✓ tutuldu ▓
▓ any → ✓ tutuldu ▓
▓ this → ✓ tutuldu ▓
▓ ───────────────── ▓
▓ Bug azalma: ▓▓▓▓░ 38% ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
typescript15 mar

TypeScript Strict Mode — Niyə Vacibdir və Necə Aktivləşdirmək

TypeScript strict mode bug-ların 40%-ni compile vaxtı tutur. Bakıda işləyən hər developer bunu bilməlidir — praktiki nümunələrlə izah edirik.

Baku Stack AI
24 baxış
react.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ REACT / RSC ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ Server → HTML only ▓
▓ Client → JS + State ▓
▓──────────────────────▓
▓ Bundle: ▓▓▓▓░░░░░░ ▓
▓ Before: ▓▓▓▓▓▓▓▓░░ ▓
▓ ● -38% JS ölçüsü ▓
▓ ● -1.2s TTI ▓
▓──────────────────────▓
▓ ✓ Data → Server ▓
▓ ✓ Click → Client ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
react9 mar

React Server Components — nə vaxt istifadə etməli, nə vaxt yox?

RSC hər yerə lazım deyil. Gəl birlikdə baxaq: hansı hallarda Server Components layihəni uçurur, hansı hallarda isə əlavə baş ağrısıdır.

Baku Stack AI
28 baxış
typescript.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ TYPESCRIPT ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ $ npm install zod ▓
▓ ✓ added 1 package ▓
▓ ▓
▓ z.object({ }) ▓
▓ → name: z.string() ▓
▓ → age: z.number() ▓
▓ → city: z.enum() ▓
▓ ▓
▓ .safeParse(data) ▓
▓ ✓ success ▓▓▓▓▓▓░░ ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
typescript6 mar

Zod ilə TypeScript Runtime Validasiyası: Bugları Compile-dan Əvvəl Öldür

TypeScript sənə compile-time təhlükəsizlik verir, amma runtime-da API-dən gələn datanı kim yoxlayır? Zod ilə hər iki dünyada güvəndə ol.

Baku Stack AI
38 baxış
react.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ FRONTEND ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ● Storybook v8.5 ▓
▓ → npx storybook init ▓
▓ → localhost:6006 ▓
▓░░░░░░░░░░░░░░░░░░░░░░▓
▓ Components: ▓
▓ ✓ Button ▓▓▓▓▓▓░░ 75%▓
▓ ✓ Input ▓▓▓▓░░░░ 50%▓
▓ ● Modal ▓▓░░░░░░ 25%▓
▓ ○ Card ░░░░░░░░ 0%▓
▓ ↓ Deploy → Vercel ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
react5 mar

Storybook ilə Komponent Library Qurmaq: Praktiki Bələdçi

Storybook ilə öz komponent library-ni quraraq development sürətini 2-3x artır, komandanı sinxronlaşdır və portfolio-na ciddi layihə əlavə et.

Baku Stack AI
37 baxış
react.ascii
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ ■ ■ ■ REACT QUERY ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ useQuery() ▓
▓ → fresh ▓▓▓▓▓░░░ ▓
▓ → stale ▓▓▓░░░░░ ▓
▓ → fetch ▓▓▓▓▓▓▓░ ▓
▓ ● cache ✓ 5 dəq ▓
▓ ● retry ✓ 3 dəfə ▓
▓ ● dedup ✓ auto ▓
▓──────────────────────▓
▓ useMutation() ▓
▓ POST → invalidate↓ ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
█
react1 mar

React Query ilə Server State: Artıq useEffect Cəhənnəmində Yaşama

useEffect + useState ilə API çağırışları yazmaqdan yoruldun? React Query (TanStack Query) ilə server state idarəetməsini kökündən dəyiş.

Baku Stack AI
37 baxış

📬

Yeni məqalələrdən xəbərdar ol

Hər gün Azərbaycan developer-ləri üçün yeni məqalə — emailinizə.