💻 اصول طراحی گرافیک در وب‌سایت 💻

طراحی یک وب‌سایت حرفه‌ای، نیازمند همکاری مؤثر میان طراحان گرافیک و برنامه‌نویسان است. برای رسیدن به نتیجه‌ای مطلوب، توجه به نکات زیر حائز اهمیت است:

👥 هماهنگی تیمی: پیش از اجرا، درباره جزئیات طرح، اندازه‌ها و محدودیت‌های فنی با یکدیگر گفت‌وگو کرده و هماهنگ شوید.

┈┅┅━✦━┅┅┈

🎨 رنگ‌ها: از رنگ‌هایی هماهنگ با هویت برند استفاده کنید و خوانایی متن‌ها را در اولویت قرار دهید.

🖼 تصاویر و بنرها: کیفیت، ابعاد و حجم تصاویر را متناسب با ساختار سایت انتخاب کنید تا زیبایی و سرعت بارگذاری حفظ شود.

⚙ اصول فـنی: طراحی واکنش‌گرا و سازگاری عناصر بصری با دستگاه‌های مختلف را جدی بگیرید.

┈┅┅━✦━┅┅┈
به یاد داشته باشید که بهترین نتیجه زمانی حاصل می‌شود که طراح گرافیک و برنامه‌نویس، از ابتدا تا مرحله اجرای نهایی، در کنار یکدیگر همکاری کنند...

@awat_dev

در مورد import و export توی جاوااسکریپت پست بزارم؟
ریکشن بزارید.

قسمت اول export

در پروژه های کوچیک معمولا تمام کد ها رو توی یک فایل قرار میدیم ولی توی پروژه های بزرگ تر توی یک فایل نوشتن کد ها کار درستی نیست و خوانایی کد رو کم میکنه برای بهتر شدن خوانایی کد میتوانیم کد ها را در فایل جداگانه قرار بدیم و از قابلیت ماژول ها استفاده کنیم.

توی این پست میخوایم در مورد export بگیم و ادامه رو توی پست بعدی براتون می نویسم.

دستور export به ما این اجازه رو میده که متغیر ها و توابع و کلاس ها و سایر قابلیت هایی یک فایل رو برای استفاده توی یک فایل دیگ در دسترس بزاریم

بیاین یک مثال بزنیم برای درک بهتر مثلا شما میخواهید هدر وبسایت خودتان را به صورت داینامیک توی همه ی صفحات نمایش بدید اگر به صورت استاتیک این کار رو بخواید انجام بدید حتمی باید تمام کد های هدر رو توی تمام فایلا بزارید ولی با ماژول ها یک بار اون رو میسازید و export میگیرید و توی تمام صفحات فقط یک خط کد اضافه میکنید با اینکار هم کد خودتون خوانا تر میشه و هم از تکرار کد ها جلوگیری میشه.

بریم تو دل کد که کاربرد واقعی اون رو متوجه بشیم

برای مثال فایلی به نام calculator.js ایجاد میکنیم:


‍‍‍

export const number = 10;

export function sum(a,b){
return a + b;
}

توی این مثال متغیر number و تایع sum با استفاده از export در دسترس ماژول های دیگ قرار گرفتند

یه نکته اینجا وجود داره متغیر ها و توابعی که صادر نشده اند به طور مستقیم از طریق این ماژول قابل وارد کردن نیستند.

مثلا:

const name = "Mohsen";

export const age = 21;

توی این مثال فقط سن صادر شده و نام همچنان داخل همین ماژول باقی میماند


انواع export توی جاوااسکریپت

named export:
برای صادر کردن قابلیت هایی با نام مشخص میتوان چندین خروجی نام دار داشت
default export:
برای تعریف یک خروجی پیشفرض هر ماژول حداکثر یک خروجی پیش فرض دارد

من پیشنهاد میکنم از روش named export استفاده کنید و توی این پست هم همین روش رو توضیح میدم اگر خواستید روش دیفالت اکسپورت هم یاد بگیرید میسپارم به خودتون یه سرچی دربارش بکنید.


توی روش named export میتونیم چند متغیر تایبع یا کلاس را از یک فایل صادر کنیم هر خروجی نام مشخص خودشو داره
روش اول استفاده از export هنگام تعریف

توی این روش ما وقتی تایع یا متغیر را تعریف میکنیم همراهش اکسپورت هم میگیریم مثلا فرض کنید فایلی به نام user.js داریم:

export const name = "mohsen";
export const age = 21;

export function great(){
console.log("Hello World);
};

توی این مثالی که زدم سه خروجی name , age , great داریم با این روش هرکدام از این قابلیت ها میتونند توی فایل های دیگ استفاده بشن

روش دوم استفاده از export در انتهای فایل

ما اول میتونیم متغیر ها تابع ها را تعریف کنیم و بعد همه را انتهای فایل صادر کنیم مثال:

const name = "mohsen";
const age = 21;

function great(){
console.log("Hello World");
};

export { name , age , great};

این روش هم نتیجه روش قبلی رو داره تنها تفاوتش توی محل نوشتن export هست توی روش اول کنار تعریف هر قابلیت نوشته میشه توی روش دوم نام قابلیت ها انتهای فایل مشخص میشه.

حالا بریم سراغ کاربرد این روش

این روش فقط وقتی مفید که یه فایل چند قابلیت مرتبط داشته باشه

مثلا توی فایل calculator.js میتونیم چند تا تابع ریاضی داشته باشیم:

export function sum(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
};

حالا این فایل سه تابع صادر میکند که هر کدوم اسم مشخصی دارد.

توی این پست export رو توضیح دادم توی پست بعدی نحوه import هم براتون توضیح میدم.

باتشکر.



@awat_dev

این همه اسطوره توی یه قاب؟ رم گوشی کم آورده

تعداد 33 مدال جهان و المپیک در یک قاب

@awat_dev

اینترنت و وب یکی نیستند

وقتی می‌گی «اینترنت قطعه»، منظورت اینه که سایت‌ها باز نمی‌شن. توی روزمره همین کافیه، ولی از نظر فنی اینترنت و وب دو چیز جدان. فرق‌شون رو که بدونی، بقیه مسیر فرانت‌اند خیلی راحت‌تر جا می‌افته.

اینترنت چیه؟

اینترنت یه شبکه جهانی از شبکه‌هاست. کابل فیبر، روتر و دیتاسنتر بدنه‌شه، ولی چیزی که این بدنه رو به کار می‌ندازه یه سری قرارداد مشترکه به اسم پروتکل.

مهم‌ترینش خانواده TCP/IP ـه:

• IP آدرس‌دهی می‌کنه و بسته‌های اطلاعات رو بین شبکه‌ها جابه‌جا می‌کنه.
• TCP روی IP سوار می‌شه و تحویل کامل و مرتب داده‌ها رو تضمین می‌کنه.

البته همه‌چیز با TCP نمی‌ره. UDP هم هست، و QUIC (که HTTP/3 ازش استفاده می‌کنه) روی UDP ساخته شده.

پس وب چیه؟

وب (World Wide Web) یکی از سرویس‌هاییه که روی اینترنت کار می‌کنه: مجموعه‌ای از صفحه‌ها و منابع که با لینک به هم وصلن و با مرورگر بازشون می‌کنی.

سه تا چیز پایه‌شه:

• URL: آدرس منبع
• HTTP: پروتکل درخواست و پاسخ بین مرورگر و سرور
• HTML: زبان ساختار صفحه

یه درخواست HTTP اصلاً چیز عجیبی نیست. نسخه ساده‌شده‌ش توی HTTP/1.1 فقط چند خط متنه:

GET /en-US/ HTTP/1.1
Host: developer.mozilla.org

مرورگرت همچین پیامی می‌فرسته و سرور جواب می‌ده، معمولاً با یه فایل HTML. وب یعنی همین رفت‌وبرگشت پیام‌ها روی اینترنت.

فرق‌شون توی عمل

ایمیل می‌فرستی؟ از اینترنت استفاده می‌کنی، ولی پروتکل خودش رو داره (مثل SMTP) و لزوماً HTTP نیست. بازی آنلاین، تماس تصویری و پیام‌رسان هم همین‌طورن: روی اینترنتن، نه الزاماً روی وب.

یه نکته هم اینه که خیلی از اپ‌های موبایل با HTTP به سرور وصل می‌شن بدون اینکه وب‌سایت باشن. یعنی HTTP فقط مال مرورگر نیست، ولی همین پروتکل ستون اصلی وبه.

یه نگاه تاریخی کوتاه

اینترنت قبل از وب وجود داشت و وب روش ساخته شد. مارس ۱۹۸۹ تیم برنرز-لی توی CERN پیشنهادی نوشت به اسم «Information Management: A Proposal». تا آخر ۱۹۹۰ هم اولین سرور و مرورگر وب توی CERN کار می‌کرد. یعنی وب یه ایده بود که روی زیرساخت آماده سوار شد.

این وسط فرانت‌اند کجاست؟

آدرس رو می‌زنی، مرورگر با HTTP از سرور فایل می‌گیره، HTML و CSS و JavaScript رو پردازش می‌کنه و صفحه رو می‌سازه. فرانت‌اند بیشتر کارش همین مرحله آخره، ولی بدون فهم بقیه مسیر خیلی چیزها گنگ می‌مونه، مثل DNS، API یا دلیل کند بودن یه صفحه.

جمع‌بندی

وب روی اینترنت سوار شده، ولی هر چیزی که روی اینترنت کار می‌کنه وب نیست.

قسمت بعد: Hypertext، ایده‌ای که حتی قبل از وب وجود داشت و راه رو برای اون باز کرد.

منابع
• CERN، A short history of the Web: https://home.cern/science/computing/the-birth-of-the-web/short-history-web/
• MDN، How the web works: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works



@awat_dev

قسمت دوم import

📌نکته: اول مقاله export رو بخونید بعد این رو بخونید.❗️

یکی از دستورای مهم ماژول ها import که به ما اجازه میده متغیر ها و توابع و کلاس ها و سایز قابلیت ها را که از ماژول های دیگر صادر شدن رو در فایل فعلی استفاده کنیم.

برای مثال فرض کن تابعی برای محاسبه مجموع دو عدد در فایل calculator.js نوشته ای و میخواهی توی فایل اصلی جاوااسکریپت main.js از اون استفاده کنی به جای نوشتن دوباره تابع میتونی اون رو با import وارد کنی

این دستور برای وارد کردن قابلیت هایی استفاده میشه که قبلا با export از یه ماژول دیگ صادر شدند.

برای مثال فرض کن فایل calculator.js را داریم:

‍‍‍

export function sum(a,b){
return a + b;
};

حالا میتونیم توی فایل main.js تابع sum را وارد کنیم:

import { sum } from "./calculator.js";

console.log(sum(10,20));

توی این مثال خروجی میشه 30

خیلی راحت تونستیم اطلاعاتی که توی فایل calculatr.js صادر کردیم رو توی فایل main.js بدون نوشتن دوباره توابع تا کد ها اضافه کنیم و فقط با import اینکار رو کردیم.

جندین نوع برای import وجود داره توی جاوااسکریپت

Named Import
Default import
Namespace import
side-effect import
dynamic import

که ما توی این مقاله در مورد Named import توضیح میدیم

توی این روش میتونیم قابلیت هایی رو وارد کنیم که با Named export صادر شده باشند

برای مثال فایل calculator.js رو در نظر بگیرید:

export const PI = 3.14;

export function sum(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

حالا در فایل main.js میتونیم به شکل زیر عمل کنیم:

import { PI, sum, subtract } from "./calculator.js";

console.log(PI);
console.log(sum(10, 5));
console.log(subtract(10, 5));

خروجی میشه:

3.14
15
5

توی این روش نام قابلیت‌هایی که وارد می‌کنیم باید با نام خروجی‌های ماژول اصلی مطابقت داشته باشد.
وارد کردن فقط یک قابلیت لازم نیست تمام خروجی‌های یک فایل را وارد کنیم. می‌توانیم فقط قابلیت موردنیاز خود را انتخاب کنیم:

import { sum } from "./calculator.js";

console.log(sum(10, 20));

برای وارد کردن چند قابلیت باید بصورت زیر عمل کنیم:

import { PI, sum, subtract } from "./calculator.js";

@awat_dev

شاید جالب باشه بدونید ایده ساخت هوش مصنوعی از دهه ۱۹۵۰ شکل گرفت. در سال ۱۹۵۶، اصطلاح هوش مصنوعی برای اولین بار در کنفرانس دارتموث آمریکا مطرح شد. توی اون زمان، هدف این بود که کامپیوترها بتونن مثل انسان فکر کنن و یاد بگیرن و توی همون سال 1956 توی ارتش آمریکا شروع به استفاده شد.

هوش مصنوعی در عین پیری هر روز جوون تر میشه

@awat_dev

💠 نسخه جدید کتابخانه تیلویند (Tailwind) منتشر شده است

🔸 ارتقا از نسخه 4.3.3 به 4.3.4

https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md