حتی از زبان های برنامه نویسی هم میشه درس زندگی رو آموخت.

هر کسی در جای خودش ارزشمند و مهمه ❤️

#Figma_Template

Figma Template: Snowboard shop

Difficulty : ⭐️⭐️⭐️⭐️

🔗Click for Get Link

🔴</CodeHub>

#TypeScript

🔸برای کسی که تازه کار با TypeScript رو شروع کرده، این زبان ممکنه یه کم ترسناک به نظر بیاد. ولی اگه چند تا نکته و ترفند خوب یاد بگیری، می‌تونی از قدرت TypeScript استفاده کنی تا کدهای ایمن‌تر و قابل اعتمادتر بنویسی.

1 - فعال کردن حالت Strict 🚦
یکی از بهترین ویژگی‌های TypeScript سیستم بررسی دقیق نوع‌هاشه. با فعال کردن این حالت بررسی نوع‌ها رو با دقت بیشتری انجام می‌ده و پیام‌های خطای بهتری هم بهت می‌ده. برای فعال کردن این حالت، باید این گزینه‌ی رو به فایل tsconfig.json اضافه کنی.

{
  "compilerOptions": {
    "strict": true
  }
}

2 - از نوع‌های صریح استفاده کن 📝
زبان TypeScript همونطور که از اسمش پیداست، درباره نوع‌هاست، پس خیلی مهمه که وقتی نوع‌ها رو تعریف می‌کنی، دقیق و واضح باشی. به جای اینکه بذاری TypeScript خودش نوع‌ها رو حدس بزنه، بهتره که نوع متغیرها، پارامترهای تابع و مقادیر بازگشتی رو صریحاً مشخص کنی. این کار خوندن کد رو راحت‌تر می‌کنه و باعث می‌شه که بقیه برنامه‌نویس‌ها راحت‌تر کدتو بفهمن.

function addNumbers(a: number, b: number): number {
  return a + b;
}

3 - از اینترفیس‌ها استفاده کن📋
اینترفیس‌ها (Interfaces) تو TypeScript بهت این امکان رو می‌دن که شکل اشیا رو تعریف کنی و نوع ویژگی‌های اونا رو مشخص کنی. اینترفیس‌ها ابزار قدرتمندی هستن برای اینکه بتونی کدهای قابل استفاده مجدد و قابل نگهداری بنویسی.

interface User {
  name: string;
  age: number;
  email: string;
}

4 - استفاده از Union Types و Type Guards🔀
قابلیت Union types بهت این امکان رو می‌دن که یه متغیر داشته باشی که می‌تونه چند نوع مختلف داشته باشه. این خیلی به درد می‌خوره وقتی که با شرایطی سروکار داری که یه متغیر ممکنه چند تا مقدار مختلف داشته باشه.
با استفاده از union types و محافظت از نوع‌ها (type protection)، می‌تونی کدی بنویسی که هم انعطاف‌پذیرتره و هم محکم‌تر و با سناریوهای مختلف بهتر کنار میاد.

type Shape = 'circle' | 'square' | 'triangle';

function getArea(shape: Shape, size: number): number {
  if (shape === 'circle') {
    return Math.PI * size * size;
  } else if (shape === 'square') {
    return size * size;
  } else if (shape === 'triangle') {
    return (Math.sqrt(3) / 4) * size * size;
  }
}
const area = getArea('circle', 5);

5 - از جنریک‌ها برای کدهای قابل‌استفاده مجدد استفاده کن🔧
جنریک‌ها بهت این امکان رو می‌دن که اجزای کد رو به شکلی بنویسی که با نوع‌های مختلف کار کنه. اونا انعطاف‌پذیری و ایمنی نوع رو فراهم می‌کنن، چون بهت اجازه می‌دن که نوع‌ها رو توی توابع، کلاس‌ها و اینترفیس‌ها پارامتری کنی. با استفاده از جنریک‌ها می‌تونی توابع یا کلاس‌هایی بنویسی که با انواع مختلف داده‌ها کار کنن و در عین حال، ایمنی نوع رو حفظ کنی. اینجا یه مثال می‌زنم:

function identity<T>(value: T): T {
  return value;
}

const result = identity<number>(42);

6 - استفاده از Type Assertion mama🔍
قابلیت Type Assertion یه روش برای اینه که به کامپایلر TypeScript بگی نوع مشخص یه مقدار چیه، وقتی که تو بیشتر از چیزی که چکر نوع می‌دونه، اطلاع داری. این کار بهت اجازه می‌ده که نوعی رو که TypeScript حدس زده رو نادیده بگیری و مقدار رو به عنوان یه نوع دیگه در نظر بگیری. از Type Assertion با احتیاط استفاده کن و فقط وقتی این کار رو بکن که مطمئنی نوع‌ها با هم سازگار هستن. اینجا یه مثال می‌زنم:

let value: any = 'Hello, TypeScript!';
let length: number = (value as string).length;

7 - استفاده از Intersection Types برای ترکیب انعطاف‌پذیر نوع‌ها🔗
قابلیت Intersection types بهت اجازه می‌ده که چند نوع مختلف رو با هم ترکیب کنی و یه نوع جدید بسازی که همه‌ی ویژگی‌ها و متدهای هر کدوم از اون نوع‌ها رو داره. این کار تو زمان تایپ‌کردن خیلی انعطاف‌پذیری می‌ده و می‌تونه مخصوصاً وقتی با ساختارهای پیچیده‌ی آبجکت‌ها سروکار داری، مفید باشه. اینجا یه مثال برات می‌زنم:

type Greeting = {
  greet(): void;
};

type Farewell = {
  sayGoodbye(): void;
};
type GreetingAndFarewell = Greeting & Farewell;
class Person implements GreetingAndFarewell {
  greet() {
    console.log('Hello!');
  }
  sayGoodbye() {
    console.log('Goodbye!');
  }
}
const person = new Person();
person.greet(); // Hello!
person.sayGoodbye(); // Goodbye

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

🔴<CodeHub/>

15 سایت کار راه‌انداز که هر برنامه‌نویسی باید بشناسه؛ وقتت رو به جای هدر دادن، هوشمندانه مدیریت کن!

🔗https://javascript.plainenglish.io

🔴 <CodeHub/>

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

🔗https://github.com/practical-tutorials/project-based-learning

🔴</CodeHub>

#github_repo 🗂

بنظرم یکی از بهترین ریپو های کامیونیتی برنامه نویسی ایران این ریپو هستش که تسک ها و کد های مربوط به فرایند استخدام شرکت های بزرگ و کوچک رو میذاره که هم فرایند استخدام رو بهتر می کنه و هم آدم از دیدن کد ها بقیه ضرر نمی کنه.

🔗https://github.com/laravel98developer/laravel-hiring-projects

🔴<CodeHub/>

#Extension

بنظر خودم یکی از شاید بهترین اکستنشن های VS Code این اکستنشن jsoncrack هستش که تمام فایل های json رو به شکل نمودار در میاره که فهمش راحتر باشه.

🗂GitHub : https://github.com/AykutSarac/jsoncrack.com

🔴 <CodeHub/>

🚩 پایتون ۳.۱۳؛ فیچرهای جدید و دپریکیشن‌ها!


🔥 گیل (GIL) آپشنال: امکان بیلد گرفتن از CPython و غیرفعال کردن GIL. (در حالت عادی شما از GIL استفاده می‌کنید)

🔥 کامپایلر JIT: قراره در این پچ جدید، از یک کامپایلر just in time رونمایی شه که در یک سری از سناریوهای خاص، سرعت اجرای کدتون رو افزایش میده. این رو موقع بیلد گرفتن دستی از CPython میشه تنظیم‌ کرد و بصورت پیشفرض غيرفعال هست.

🔥 تایپ هینت IsType و ReadOnly: دوتا تایپ جدید به typing اضافه شده. در مقاله مثال زدم.

🔥 ساپورت از سیستم‌عامل iOS: یک رلیز قابل نصب روی iOS قراره در این پچ قرار داده بشه. هنوز خبری از رلیز اندروید نیست ولی گویا دارن روش کار می‌کنن. (چیزی که بعنوان پایتون روی دیوایس‌های اندرویدتون نصب دارید، رلیز لینوکس پایتون هست.)

🔥 بهبود Interaction: ارورها و تریس‌بک‌ها دقیق‌تر و هوشمندتر شدن. همچنین ارورها بصورت رنگی نمایش داده میشن.

🔥 بهبود REPL: کامندهای exit، help و quit تغییر کردن.

و کلی فیچر و امکانات جدید که در مقاله زیر توضیح داده شده به همراه مثال‌های ساده و قابل فهم:

🔗https://blog.imsadra.me/python-313-new-features-deprecations

🔴</CodeHub>

#جاوااسکریپت

📸 با جاوااسکریپت دوربین خودتو روشن کن و عکس بگیر! توی این پست یاد می‌گیری چطور با چند خط کد ساده، دوربین گوشی یا لپ‌تاپ رو به خدمت بگیری و یه عکس فوری بگیری. آماده‌ای برای کدنویسی؟ 🤩

document.addEventListener("DOMContentLoaded", async () => {
    const videoPlayer = document.getElementById("videoPlayer");
    const canvasElement = document.getElementById("canvas");
    const captureBtn = document.getElementById("captureBtn");

    // نمایش عناصر مدیا پلیر
    const showMediaPlayer = () => {
        videoPlayer.style.display = "block";
        captureBtn.style.display = "block";
    };

    // مخفی کردن مدیا پلیر
    const noShowMediaPlayer = () => {
        videoPlayer.style.display = "none";
        captureBtn.style.display = "none";
    };

    // دسترسی به دوربین و پخش ویدیو
    const getMedia = async () => {
        // بررسی پشتیبانی مرورگر از MediaDevices API
        if (!("mediaDevices" in navigator)) {
            alert("Your browser does not support MediaDevices API");
            return;
        }

        try {
            // درخواست دسترسی به ویدیو
            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
            showMediaPlayer(); // نمایش ویدیو و دکمه
            videoPlayer.srcObject = stream; // نمایش جریان ویدیو در videoPlayer
        } catch (error) {
            console.error('Error accessing camera:', error);
        }
    };

    // گرفتن عکس از جریان ویدیو
    captureBtn.addEventListener("click", (event) => {
        event.preventDefault();
        noShowMediaPlayer(); // مخفی کردن ویدیو و دکمه
        canvasElement.style.display = "block";

        // کشیدن تصویر ویدیو روی بوم
        let context = canvasElement.getContext("2d");
        context.drawImage(videoPlayer, 0, 0, canvasElement.width, canvasElement.height);

        // متوقف کردن جریان ویدیو
        videoPlayer.srcObject.getVideoTracks().forEach(track => track.stop());

        // تبدیل بوم به Blob و ذخیره آن در window.picture
        canvasElement.toBlob(blob => {
            window.picture = blob;
        });
    });

    // فراخوانی تابع برای دریافت و نمایش جریان ویدیو
    await getMedia();
});

🔴<CodeHub/>

👨‍💻#جاوااسکریپت

🌍 با چند خط کد، موقعیتتو پیدا کن! 🗺

این اسکریپت ساده بهت کمک می‌کنه تا موقعیت جغرافیاییتو سریع پیدا کنی و یه لینک مستقیم به نقشه بگیری! 😎 دیگه نگران گم شدن نباش، با این کد همیشه موقعیتت تو جیبت هست!

📌 یه جاوااسکریپت توپ که خطاها رو هم مدیریت می‌کنه. امتحان کن و ببین چقدر کارش درسته!

function findLocation() {
            let status = document.getElementById("status"); // عنصر وضعیت
            let mapLink = document.getElementById("map-link"); // عنصر لینک نقشه

            // تابعی که در صورت موفقیت مکان‌یابی اجرا می‌شود
            const geoSuccess = (position) => {
                const latitude = position.coords.latitude; // عرض جغرافیایی
                const longitude = position.coords.longitude; // طول جغرافیایی

                // پاک کردن پیام وضعیت و تنظیم لینک نقشه
                status.textContent = "";
                mapLink.href = `https://www.openstreetmap.org/#map=16/${latitude}/${longitude}`;
                mapLink.textContent = `Latitude: ${latitude} , Longitude: ${longitude}`;
            };

            // تابعی که در صورت بروز خطا در مکان‌یابی اجرا می‌شود
            const geoError = (error) => {
                switch (error.code) {
                    case 0:
                        status.textContent = "Unknown error"; // خطای ناشناخته
                        break;
                    case 1:
                        status.textContent = "Permission denied"; // اجازه دسترسی رد شده
                        break;
                    case 2:
                        status.textContent = "Position unavailable"; // موقعیت ناموجود
                        break;
                    case 3:
                        status.textContent = "Timeout"; // زمان تمام شد
                        break;
                    default:
                        status.textContent = "Unable to retrieve your location"; // امکان بازیابی موقعیت نیست
                }
            };

            // بررسی پشتیبانی از مکان‌یابی در مرورگر
            if (!navigator.geolocation) {
                status.textContent = "Geolocation is not supported by your browser"; // مکان‌یابی پشتیبانی نمی‌شود
            } else {
                status.textContent = "Locating…"; // در حال یافتن موقعیت

                // درخواست موقعیت مکانی با تنظیمات سفارشی
                navigator.geolocation.getCurrentPosition(
                    geoSuccess,
     

🔴<CodeHub/>

❌پیشنهاد میکنم که حتما این ویدیو رو ببینید مثل این که چت بات های ناشناس داخل تلگرام یک مشکل امنیتی بزرگ داره که میتونه خیلی خطرناک باشه.

طی نفوذی که به چند ربات ناشناس تلگرام اتفاق افتاده، متوجه شدند ۴۵۰ میلیون چت، ۱۱ میلیون عکس و ۳ میلیون ویدیو روی سرورهای این بات‌ها ذخیره شده.

🎬https://youtu.be/1sZprSWgEsw?si=_faXx4TdN_9RSAhi

🔴<CodeHub/>

🧑‍💻 تفاوت دو روش Import در ری‌اکت : Named Import vs Default Import

1️⃣ Named Import :

import { useState } from 'react'

🔸این روش زمانی استفاده می‌شود که یک ماژول چندین قابلیت (export) داشته باشد و شما فقط یکی از آن‌ها را نیاز دارید. مثل useState در ری‌اکت.(❌default)

2️⃣ Default Import :

import React from 'react'

🔸این روش زمانی به کار می‌رود که ماژول یک export پیش‌فرض دارد. مثلا React که به عنوان default export وارد می‌شود.

🔸بعضی وقتا همین نکته های به ظاهر کوچیک میتونه خیلی مشکل ساز بشه🤦‍♂️

#React

©️<CodeHub/>

#Document

🔸یکی از مشکلاتی که خودم باهاش سر و کار داشتم و دارم اینه که همه داکیومنت های آموزش الگوریتم خیلی خشک و خسته کننده بودن.

🔸امروز این کتاب رو پیدا کردم که خوشبختانه ترجمه شده هم هست که بیشتر مباحت الگوریتم رو با زبون ساده و عکس آموزش میده که واقعا به درک بیشتر کمک میکنه , من خودم تازه خوندنشو شروع کردم پیشنهاد میکنم حتما یه نگاهی بهش بندازید.

📖درک الگوریتم راهنمای تصویری برای برنامهنویسها و افراد کنجکاو

✍️ نویسنده : آدیتیا بهارگاوا

مترجم : مهران افشارنادری 📝



🔴<CodeHub/>

#react

معماری پروژه های ری اکتی که میتونه خیلی به پرفورمنس پروژه کمک کنه و دولوپ رو هم آسون تر کنه.

🔴<CodeHub/>

#Figma_Template

Figma Template: Real Estate

Difficulty : ⭐️⭐️

🔗Click for Get Link

🔴</CodeHub>

#ترفند_جاوااسکریپتی

✨ ترفند جاوااسکریپتی: جابه‌جایی مقادیر دو متغیر بدون متغیر سوم!

جاوااسکریپت این کار را با یک راه‌حل شگفت‌انگیز و ساده امکان‌پذیر می‌کند! 🌟

تصور کنید دو متغیر a و b دارید:

let a = 1;
let b = 9;

حالا می‌خواهید مقادیر این دو متغیر را با هم جابه‌جا کنید. به جای استفاده از یک متغیر موقت، کافیست از این ترفند استفاده کنید:

let [a, b] = [b, a];

🔑این ترفند از دستورات (Destructuring Assignment) جاوااسکریپت استفاده می‌کند که به شما اجازه می‌دهد به راحتی مقادیر متغیرها را جابه‌جا کنید، بدون نیاز به کد اضافی.

به همین سادگی و زیبایی! 😊

©️<CodeHub/>

#react

این کتابخونه‌های React به کارت میاد! (پارت یک) 🚀

1 -🛠 فریم‌ورک‌های React

- اگه می‌خوای یه پروژه React با رندر سمت کاربر (client-rendered) درست کنی، بهترین انتخابت Vite هست که دیگه جاش رو به Create React App داده که قدیمی شده و دیگه استفاده نمی‌شه.

- اگه قصد داری یه پروژه React با رندر سمت سرور یا فول‌استک (full-stack) بسازی، Next.js بهترین و محبوب‌ترین فریم‌ورک فول‌استک برای React هست.

- اگه بعضی از ویژگی‌های Next.js برات سنگین و سخت به نظر میاد، یه جایگزین عالی برای ساخت سایت‌های داینامیک و استاتیک Remix هست.

- حالا اگه دنبال ساخت یه اپلیکیشن هستی که سریع لود بشه و بیشتر محتواش استاتیک باشه، Astro هم یه گزینه خیلی خوبه.

2 - 📦 مدیریت پکیج ها

برای نصب همه کتابخونه‌هایی که تو این راهنما گفته شده، نیاز به یه چیزی به اسم مدیر بسته (Package Manager) داری.‼️

- اگه Node.js رو نصب کرده باشی، که لازمه برای اینکه پروژه React رو روی کامپیوترت اجرا کنی، می‌تونی از NPM استفاده کنی که تو سال ۲۰۲۴ هم هنوز یه انتخاب عالیه. البته جایگزین‌های دیگه‌ای هم برای NPM اومده، مثل Yarn و PNPM.

- جدیدترین جایگزین که تو دنیای جاوا اسکریپت داره سریع محبوب می‌شه، Bun هست. Bun هم یه محیط اجرایی جاوااسکریپته مثل Node و هم یه مدیر بسته، و به عنوان یه جایگزین سریع‌تر برای Node و NPM معرفی شده.

©️<CodeHub/>