DEV Community: Samandar Hodiev

UX/UI Typography

Samandar Hodiev — Tue, 10 Feb 2026 18:18:46 +0000

Typography deganda nimani tushunamiz?

Typography bu:

qaysi shrift ishlatiladi
qaysi joyda qanchalik katta bo‘ladi
qanchalik qalin bo‘ladi
qatorlar orasidagi masofa
rang va kontrast
matnlar o‘rtasidagi iyerarxiya

Ya’ni foydalanuvchi sahifani ochganda:

nimani birinchi ko‘radi
nimani keyin o‘qiydi
nimani umuman o‘qimaydi

Shularning hammasini typography hal qiladi.

Nega typography UX uchun muhim?

Chunki foydalanuvchi o‘qish uchun keladi.

mahsulot nomini
tugma yozuvini
xabarini
narxni

Agar o‘qish qiyin bo‘lsa, dizayn chiroyli bo‘lishining foydasi yo‘q.

UX’da bir qoida bor:

“O‘qib bo‘lmasa, ishlamaydi.”

Font tanlash: kamroq — yaxshiroq
Yangi dizaynerlarning eng katta xatosi — ko‘p font ishlatish.

Aslida:

_ 1 ta asosiy font 1 ta yordamchi font yetarli_

UX/UI’da eng ko‘p ishlatiladigan fontlar:

Inter
Roboto
SF Pro
Poppins

Sababi oddiy: ular ekranda yaxshi o‘qiladi. Chiroyli bo‘lgani uchun emas, qulay bo‘lgani uchun.

Typography’ning yuragi — iyerarxiya.

Agar:

sarlavha
matn
yordamchi text

BUlar bir xil ko‘rinsa, foydalanuvchi chalgiydi.

Oddiy misol:

Heading - kattaroq, qalinroq
Body text - oddiy, tinch
Secondary text - kichikroq, rangsizroq

Hamma joyni bold qilish bu "best practise" va yaxshi dizayn emas

Line-height va spacing: ko‘rinmaydi, lekin seziladi

Ko‘pchilik e’tibor bermaydigan joy.

Juda zich matn:

professional ko‘rinmaydi
o‘qishni qiyinlashtiradi

Body text uchun:

line-height odatda 140–160%

Bu matnga “nafislik” beradi.

Rang va typography

asosiy text juda qora bo‘lmasligi kerak
secondary text haddan tashqari xira bo‘lmasligi kerak
kontrast yetarli bo‘lishi shart Chiroyli, lekin o‘qilmaydigan matn — bu dizayn xatosi.

UX’da ranglar o‘qilishgaham xizmat qiladi faqat bezakka emas.

Button va UI elementlardagi typography

Button ichidagi matn:

aniq
qisqa
tushunarli

Shuning uchun:

juda kichik bo‘lmasligi kerak
juda yengil weight bo‘lmasligi kerak

Foydalanuvchi nima bosayotganini aniq bilishi shart.

Typography system: professional bosqich

Real loyihalarda typography tasodifiy bo‘lmaydi.

Heading styles
Body styles
Caption styles
Button text styles

oldindan belgilanadi va dizayn davomida o‘zgarmaydi.

Bu:

dizaynni bir xil qiladi
developer uchun tushunarli bo‘ladi
product o‘sayotganda muammo chiqarmaydi

Xulosa

UX/UI’da typography:

bezak emas
ikkinchi darajali narsa emas
“keyin tuzatamiz” qilinadigan detal emas

Yomon typography bilan:

yaxshi layout ham yomon ko‘rinadi
foydalanuvchi charchaydi
mahsulot ishonchsiz tuyuladi

Yaxshi typography esa:

dizaynni tushunarli bo'ladi
foydalanuvchini majburlamaydi
professional taassurot qoldiradi

UI dizaynda Shadow turlari va ularning vazifasi

Samandar Hodiev — Thu, 05 Feb 2026 16:40:53 +0000

Drop Shadow (Eng klassik va eng ko‘p ishlatiladigan)

Element ostiga tushadigan oddiy soya. Go‘yoki element fon ustida turibdi.

Qayerda ishlatiladi?

Card
Modal
Button
Navbar

Nima beradi?

Depth (chuqurlik)
Element “bosiladigan” ekanini bildiradi

Misol (mantiqan):

Card fon ustida suzib turgandek
Button bosishga tayyor

Drop shadow = “bu element fon emas, alohida obyekt”

Drop shadov

Inner Shadow (Ichkariga botgan effekt)

Soya tashqariga emas, ichkariga tushadi.

Qayerda ishlatiladi?

Input field
Textarea
Ba’zan neumorphism dizaynida

Nima beradi?

Element ichiga botgandek ko‘rinadi
“Bu joyga yoziladi” degan signal

Inner shadow

Soft Shadow (Yumshoq, noaniq)

Blur katta, opacity past bo‘lgan soya.

Qayerda ishlatiladi?

Zamonaviy web UI
Minimal dizayn
Katta card’lar

Nima beradi?

Elegant ko‘rinish
Ko‘zga urilmaydi

Agar shadow sezilib tursa — demak u haddan oshgan

Soft shadov

Hard Shadow (Qattiq, aniq)
Nima?

Blur kam, chetlari aniq bo‘lgan soya.

Qayerda ishlatiladi?

Material Design
Illustrativ UI
Retro yoki bold dizaynlar

Nima beradi?

Kuchli urg‘u
Elementni ajratib ko‘rsatadi

Xavfi:

Juda ko‘p ishlatish dizaynni xunuklashtiradi.

Hard shadow

Elevation Shadow (Daraja asosida)

Shadow element balandligiga qarab o‘zgaradi.

Qayerda ishlatiladi?

Google Material Design
Floating button
App bar, modal

Nima beradi?

Qaysi element yuqorida, qaysi biri pastda ekanini ko‘rsatadi

Misol:

Modal - eng kuchli shadow
Card - o‘rtacha
Button - yengil

Shadow turi	Vazifasi
Drop shadow	Elementni fondan ajratish
Inner shadow	Ichki interaction yaratish
Soft shadow	Zamonaviy va yengil effekt
Hard shadow	Kuchli urg‘u yaratish
Elevation	Ierarxiya va depth ko‘rsatish

Auto Layout & Responsive

Samandar Hodiev — Sat, 31 Jan 2026 19:13:15 +0000

Auto Layout & Responsive Design: Figma’da Professional UI Yaratish Asosi

Zamonaviy UI dizayn faqat chiroyli ko‘rinish bilan o‘lchanmaydi. Dizayn moslashuvchan, barqaror va real product sharoitiga tayyor bo‘lishi kerak. Figma’da bunga erishishning eng asosiy vositasi — Auto Layout.

Auto Layout nima va nega muhim?

Auto Layout bu elementlarni qat’iy koordinatalar bilan emas, mantiqiy tuzilma asosida joylashtirish tizimi. Ichidagi kontent o‘zgarganda, dizayn avtomatik moslashadi.

Misol:

Button ichidagi text uzunlashsa, button kengayadi
Card ichiga yangi element qo‘shilsa, balandlik avtomatik oshadi

Bu yondashuv dizaynni statik rasm emas, tirik interfeysga aylantiradi.

Padding va Spacing

Auto Layout’ning asosiy ustunliklaridan biri masofalarni aniq boshqarishdir.

Padding — element ichidagi kontent bilan chegaralar orasidagi masofa. Bu button, card va input’lar uchun muhim.
Spacing — bir nechta elementlar orasidagi masofa. Auto Layout orqali bu qiymat doim barqaror bo‘lib qoladi.

Natijada dizayn vizual jihatdan toza va tizimli ko‘rinadi.

Vertical va Horizontal yo‘nalish

Auto Layout yo‘nalishi layout tuzilishini belgilaydi:

Vertical: elementlar yuqoridan pastga joylashadi. Listlar, card ichidagi kontent, formalar uchun ishlatiladi.
Horizontal: elementlar chapdan o‘ngga joylashadi. Navbar, button ichidagi icon + text kabi holatlar uchun mos.

To‘g‘ri yo‘nalish tanlash dizayn mantiqini aniq ko‘rsatadi.

Hug, Fill va Fixed tushunchalari

Bu sozlamalar element o‘lchamining qanday boshqarilishini aniqlaydi:

Hug contents: element o‘lchami ichidagi kontentga moslashadi. Text o‘zgarsa, element ham o‘zgaradi.
Fill container: element parent bo‘sh joyini to‘ldiradi. Responsive layout’lar uchun juda muhim.
Fixed: qat’iy o‘lcham. Faqat maxsus holatlarda ishlatiladi, aks holda responsive’ni buzadi.

Professional dizayn asosan Hug va Fill kombinatsiyasiga tayanadi.

Constraints

Constraints Auto Layout ishlatilmagan frame’larda responsive xatti-harakatni belgilaydi. Element qaysi tomonga yopishib turishini va ekran o‘lchami o‘zgarganda qanday harakat qilishini aniqlaydi.

Masalan:

Left + Right → element ekran bilan birga kengayadi
Center → har doim markazda qoladi

Responsive dizayn va Auto Layout aloqasi

Responsive dizayn degani interfeys har xil ekran o‘lchamlarida mantiqan va vizual jihatdan to‘g‘ri ishlashi. Figma’da bunga erishishning eng ishonchli yo‘li — Auto Layout’ni to‘g‘ri qurish.

Auto Layout ishlatilgan dizayn:

kontent o‘zgarishiga tayyor bo‘ladi
developer uchun tushunarli bo‘ladi
real product’da kamroq muammo keltirib chiqaradi

Xulosa

Auto Layout bu Figma’dagi qo‘shimcha funksiya emas, balki professional UI dizaynning asosi. Padding, spacing, yo‘nalish, Hug/Fill va Constraints birgalikda ishlaganda dizayn haqiqatan ham moslashuvchan va ishonchli bo‘ladi.

Agar dizayn Auto Layout’siz bo‘lsa, u faqat chiroyli rasm. Auto Layout bilan esa u real interfeysga aylanadi.

Shakllar va Matn Bilan Ishlash

Samandar Hodiev — Fri, 30 Jan 2026 21:29:46 +0000

Figma Asoslari: Shakl Chizish va Matn Bilan Ishlash

Figma’da dizayn boshlash uchun shakllar va matn bilan ishlashni bilish juda muhim. Quyida asosiy tushunchalar va amaliy yo‘llar keltirilgan.

01)Frame va Rectangle

Frame – bu konteyner. Ichiga boshqa elementlarni (text, image, rectangle) joylashtirish mumkin. Frame bilan ichidagi elementlarni birga boshqarish oson.

Rectangle – oddiy dizayn elementi. Fon, tugma yoki kardning shakli sifatida ishlatiladi.

02)Text layer

Text layer - matn qo‘shish uchun ishlatiladi (T tugmasi bilan).

Siz font, o‘lcham, rang, line height va alignment’ni sozlashingiz mumkin.

Text element frame ichida bo‘lsa, frame bilan birga harakatlanadi.

03)Fill va Stroke

Fill – layer ichki rangi.

Stroke – layer chegarasi, qalinligi va rangini sozlash mumkin.

04)Corner Radius va Gradient

Corner radius – layer burchaklarini yumaloqlashtiradi.

Gradient – rang o‘zgarishini beradi (linear, radial, angular). Tugmalar, kartalar va fonlarda ishlatiladi.

05)Shadow

Shadow elementga chuqurlik beradi va dizaynni jonli qiladi.

Figma’da Drop shadow (tashqi) va Inner shadow (ichki) mavjud.

07)Align & Distribute

Align – layer’larni bir tekisga joylashtirish.

Distribute – bir nechta layer’larni teng masofada taqsimlash.

Figma’da shakl va matn bilan ishlashni o‘rganish dizayningizni tez va samarali qilishga yordam beradi. Frame va rectangle farqlarini, text, fill, stroke, shadow va gradientlarni bilish sizgaa professional dizayn ishlabchiqich uchun mustahkam poydevor bo'ladi.

Figma - Asosiy tushunchalar va tez boshlash qo‘llanmasi

Samandar Hodiev — Fri, 30 Jan 2026 18:18:07 +0000

Figma bugungi kunda UI/UX dizaynerlar va front-end dasturchilar uchun eng samarali vositalardan biri. Shu maqolada Figma interfeysini tez tushunish va samarali ishlash uchun kerakli asosiy tushunchalarni ko‘rib chiqamiz.

1. Figma account va yangi fayl

Figma.com’da bepul account yaratib, “New File” tugmasi orqali loyihaga start berish mumkin. Har bir yangi fayl – sizning ish canvasingiz bo‘lib, unga ekranning har qanday elementlarini joylashtirishingiz mumkin.

2. Page vs Frame

Page – loyihaning katta bo‘limi (misol: Homepage, Dashboard).

Frame – individual ekran yoki UI blok, ichida boshqa elementlar va frame’lar bo‘lishi mumkin.

Figma’da hamma narsa Frame ichida joylashadi. Shu sababli Frame bilan ishlash dizayner uchun asosiy ko‘nikma hisoblanadi.

3. Canvas, Move va Scale

Canvas – ishlash maydoni, unda elementlarni joylashtirasiz va tekshirasiz.

Move – elementni pan orqali ko‘chirish.

Scale – elementning o‘lchamini kattalashtirish yoki kichiklashtirish (Shift + Drag nisbatni saqlaydi).

Tez harakatlanish uchun:

Zoom: Ctrl / Cmd + Scroll
Pan: Space + Drag

4. Layers panel

Layers panel har bir elementni tartiblaydi, yashirish, lock qilish va guruhlash imkonini beradi. Katta loyihalarda elementni topish va tuzatish uchun layers paneldan foydalanish samara beradi.

5. Shortcut’lar va samaradorlik

Asosiy shortcut’lar:

R – Rectangle
O – Circle
T – Text
Ctrl / Cmd + D – Duplicate

Shortcut’larni bilish ish jarayonini tezlashtiradi va samaradorlikni oshiradi.

Menu, Canvas, Layers, ...

Xulosa

Figma bilan ishlashni boshlash uchun bu asosiy tushunchalarni bilish yetarli. Page va Frame farqi, layers panel, Move/Scale va shortcut’larni o‘rganish sizga erkin dizayn yaratish imkonini beradi. Ushbu poydevor sizni murakkab interfeyslar va prototiplarga tayyorlaydi.

Node.js path Module

Samandar Hodiev — Wed, 23 Apr 2025 21:04:54 +0000

💻 Node.js path Module

In Node.js, working with file paths can get tricky, especially when you're developing cross-platform applications. Fortunately, the built-in path module is here to simplify things and ensure that your paths are handled properly, no matter if you're on Windows or Unix.

Why Use the path Module?

Cross-platform compatibility — handles paths in a consistent way across different operating systems.
Simplifies working with file paths — easy to manipulate and resolve paths.
No need to install — it’s built into Node.js!

💻 Common path Methods

1 path.basename(path)
Gets the last portion of a path, i.e., the file name.

const path = require('path');
console.log(path.basename('/users/samandar/app.js')); // app.js

2 path.dirname(path)
Returns the directory name of the given path.

console.log(path.dirname('/users/samandar/app.js')); // /users/samandar

3 path.extname(path)
Returns the extension of the given file.

console.log(path.extname('/users/samandar/app.js')); // .js

4 path.parse(path)
Returns an object containing the root, dir, base, ext, and name of the path.

console.log(path.parse('/users/samandar/app.js'));


{
  root: '/',
  dir: '/users/samandar',
  base: 'app.js',
  ext: '.js',
  name: 'app'
}

5path.join(...paths)
Joins multiple path segments together.

console.log(path.join('/users', 'samandar', 'app.js')); // /users/samandar/app.js

Note: Handles platform-specific separators (/ on Unix, \ on Windows).

6 path.resolve(...paths)
Resolves a sequence of paths into an absolute path.

console.log(path.resolve('samandar', 'app.js'));
// /current/working/dir/samandar/app.js

💻 Practical Example

Imagine you’re building a file upload feature and you want to ensure your app handles paths properly across all environments:

const path = require('path');
const uploadPath = path.join(__dirname, 'uploads', 'file.json');
console.log(uploadPath);
// /absolute/path/to/current/working/directory/uploads/file.json

This ensures your paths are absolute and platform-agnostic.

🧑‍💻 Wrapping Up
The path module is an essential tool in Node.js for handling file paths safely and efficiently. It’s simple to use, yet it helps you avoid many common pitfalls when working with file systems.

💥 Catch up on the full Node.js Learning Series

Global Object in Node.js

Node.js Modules

🔗 Follow me to stay updated on future posts in the Node.js series.

Modules in Node.js

Samandar Hodiev — Wed, 23 Apr 2025 20:39:32 +0000

💻 Mastering Modules in Node.js — A Complete Beginner’s Guide

When building apps in Node.js, one of the most fundamental concepts is modules.
But what exactly are modules? And how do require() and module.exports actually work?

Let’s break it down. 👇

💻 What Is a Module?

In Node.js, each JavaScript file is treated as a separate module.
This modular system allows you to split your code into reusable, isolated pieces — making it more maintainable and easier to manage.

// math.js

function add(a, b) {
  return a + b;
}

module.exports = add;

// app.js

const add = require('./math');
console.log(add(2, 3)); // 5

💻 How It Works Behind the Scenes

When you run require('./math'), Node.js does several things:

1 Resolves the path (math.js)
2 Wraps the code inside a function like this:

(function(exports, require, module, __filename, __dirname) {
  // your module code
});

3 Executes the function

4 Returns module.exports

This wrapping is what gives each file access to:

require
module
exports
__filename
__dirname

💻 module.exports vs exports

Here’s where many beginners get confused.

// ✅ Correct

module.exports = {
  name: 'Samandar',
  greet() {
    console.log('Hello');
  }
};

// ❌ Won’t work as expected
exports = {
  name: 'Samandar'
};

exports is just a shortcut to module.exports.
If you overwrite exports, you lose the reference to the real module.exports.

So when in doubt — always use module.exports.

💻 Built-in Modules

Node.js also comes with built-in modules like fs, path, http, etc...
No installation required!

const fs = require('fs');
const path = require('path');

💻 Why Modules Matter

Code reusability ♻️
Cleaner folder structure 📁
Easier to test and debug 🧪
Foundation for modern frameworks like Express.js

💻 Too Long; Didn't Read

Every file in Node.js is a module
Use module.exports to share code
Use require() to import code
Built-in modules come preloaded
Don't override exports directly

💬 Whether you're building a CLI tool or a full web app — mastering modules is essential for writing clean, scalable Node.js code. What’s your favorite module trick or tip? Let me know in the comments!

Global Object in Node.js

Samandar Hodiev — Wed, 23 Apr 2025 20:10:23 +0000

💻 Understanding the Global Object in Node.js

When working in Node.js, one of the most important things to understand is the global object. Unlike browsers where the global scope is attached to the window object, in Node.js it's slightly different — and more powerful in some ways.

Let’s break it down.

💻 What Is the Global Object?

In Node.js, the global object is named global. It provides a set of built-in modules, functions, and values that are available from anywhere in your application — no need to import or require them.

It is similar to window in the browser, but it's more tailored to server-side needs.

console.log(global); // Outputs the entire global object

💻 Common Global Variables

Here are some of the most used global values in Node.js:

Name	Description
__dirname	Absolute path of the folder containing the current file
__filename	Absolute path of the current file
global	The global object itself
module	Info about the current module
exports	Shortcut to module.exports
require()	Function to import modules
setTimeout()	Delays code execution
setInterval()	Repeats code at intervals
console	Standard logging interface

💻 Example: Using Global Values

console.log(__dirname);  // Prints the folder path
console.log(__filename); // Prints the full file path

setTimeout(() => {
  console.log("Executed after 2 seconds");
}, 2000);

You don’t need to import anything for these to work — they are available globally.

⚠️ Note on Scope

Unlike in the browser, variables defined in a Node.js file are not added to the global object by default. Each file is a separate module, so the variables are scoped locally unless you explicitly assign them to global.

let name = "NodeJs";
console.log(global.name); // undefined

global.name = "NodeJs";
console.log(global.name); // "NodeJs"

🚫 Don’t Overuse global

While global can be helpful, overusing it is considered bad practice. It can lead to conflicts and unpredictable behavior in larger applications.

Use it only when a value truly needs to be shared across all files, like configuration data or utility functions.

✅ In Summary

global is to Node.js what window is to browsers.
It contains many helpful built-in tools.
Use with care — prefer module exports for sharing logic.

💬 Have you used the global object in your Node.js projects? What use cases have you found most useful? Drop a comment and let’s discuss!

NodeJS Intro..

Samandar Hodiev — Wed, 23 Apr 2025 12:30:31 +0000

💻 What is Node.js.?

Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of the browser. Unlike traditional JavaScript, which is executed in the browser, Node.js runs on the server-side, making it possible to write server-side applications with JavaScript.

Key features of Node.js:

Non-blocking, event-driven architecture: Node.js is designed to handle multiple connections at once. This makes it great for building real-time applications (e.g., chat apps, live updates).
Single-threaded: It uses a single thread for handling requests, which is efficient due to its asynchronous nature.
Built on V8 Engine: Node.js uses Google's V8 JavaScript engine, the same engine used in Chrome, making it fast and reliable.

💻 How to Install Node.js

To get started with Node.js, you need to install it on your system.

Steps:

Go to the official Node.js website:
https://nodejs.org
Download the latest stable version:
You will see two versions available for download:

LTS (Long-Term Support): Recommended for most users.
Current: The latest features, but may not be as stable as LTS.

Install the downloaded package: Follow the installation wizard for your operating system (Windows, macOS, or Linux). The installation will include both Node.js and npm (Node Package Manager).

💻 Using Node.js in the Terminal

Once Node.js is installed, you can start using it directly from your terminal or command prompt.

How to check if Node.js is installed:

Open your terminal (Command Prompt on Windows or Terminal on macOS/Linux).

Type the following command and press enter:

node -v

This will display the installed version of Node.js.

How to run a simple Node.js script:

Create a new file called app.js.
Open it and write a simple JavaScript code:

console.log("Hello, Node.js!");

Save the file and go to your terminal.
Run the script with the command:

node app.js

You should see the output:

Hello, Node.js!

💻 What is npm?

npm stands for Node Package Manager, and it is a tool that allows you to manage and install libraries (packages) that you can use in your Node.js projects. It comes bundled with Node.js, so you don’t need to install it separately.

Key features of npm:

Install packages: Easily install packages and libraries to add new features to your project.
Manage dependencies: Automatically manage versions of libraries and dependencies.
Run scripts: Define and run custom scripts in your project.

Example of using npm:

1.Initialize a new Node.js project: In your project folder, run:

npm init

This will create a package.json file that holds your project metadata and dependencies.

2.Install a package: To install a package, such as Express (a popular Node.js framework), run:

npm install express

This will add Express to your node_modules folder and update package.json.

Conclusion

Node.js is a powerful tool for building server-side applications using JavaScript. With the help of npm, you can easily manage your project dependencies and libraries. Whether you're building simple scripts or complex applications, Node.js provides the flexibility and speed to make your development process faster and more efficient.