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

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

اینترنت چیه؟

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

مهم‌ترینش خانواده 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

کد ها، رمز های GTA نیستن که حفظ بکنی...

@awat_dev

طراح سایتی که به سرعت لود شدن سایت توجه نمیکنی، قبل از باز شدن سایت نصف کاربر هات پریدن عزیز...

باید توی ذهنت داشته باشی اینو که کاربر ها عجول ترین آدمای دنیا هستن

@awat_dev

3 وبسایت کاربردی برای طراحان سایت

سایت اول سایت گلس مورفیسم هست که شما میتونید با این سایت گلس مورفیسم های خیلی جذابی بسازید:

https://ui.glass/generator/

سایت دوم خیلی سایت خوبیه برای اینکه خلاقیت شما رو بالاتر ببره ایده بده بهتون یک سایت که اونواع دکمه های آماده رو در اختیار شما قرار میده و کدش رو هم میتونید دریافت بکنید:
https://cssbuttons.io/
https://uiverse.io/
دوتا لینک داره هر کدوم باز کرد براتون میتونید استفاده کنید

سایت سوم یک سایتیه که شما میتونید با استفاده از اون بکگراند های ویدیو رو حذف بکنید و کاربردیه بنظرم:
canva.com/features/video-background-remover/

موفق باشید

برنامه نویسی رو مثل قرمه سبزی یاد بگیرید !؟

دقت کردید که قرمه سبزی هایی که آروم پخته میشن ، به اصطلاح عامیانه جا میوفتن ؟!

یادگیری برنامه نویسی هم همینه ، باید آروم آروم مطالب رو یاد بگیرید تا ثبات بهتری داشته براتون مطالب

@awat_dev