Azad's Programmers

🎯 دوره‌های آموزشی (Web Development) منبع انگلیسی (دوبله شده، زیرنویس فارسی) - دوبله فارسی آموزش JavaScript Jonas Schmedtmann - دوبله فارسی آموزش React Jonas Schmedtmann - دوبله فارسی آموزش Node Js Jonas Schmedtmann - زیرنویس فارسی آموزش مقدماتی HTML CSS Jonas Schmedtmann - زیرنویس فارسی آموزش JavaScript Jonas Schmedtmann - زیرنویس فارسی آموزش React Jonas Schmedtmann - آموزش زبان اصلی Advanced CSS Jonas Schmedtmann ★彡 @kiau_program 彡★

💎 JSTips: نگاهی به تاریخچه JavaScript: یسری از دوستانی که تازه وارد حوزه طراحی وب میشن و یا حتی شاید تجربه کاری هم داشته باشن، این زبان رو (JavaScript) با زبان (Java) اشتباه میگیرن. حرف های زیادی پشت این زبان هست مثل جاوااسکریپت کوچیک شده زبان جاواست، یا حتی نسخه قدیمی جاواست😄 اما هیچکدوم اینا صحت نداره و این دو زبان کاملا از همدیگه مستقل هستند. 👈🏼 در سال 1995: از بین اندک مرورگر های موجود در دنیا، مرورگر محبوب Netscape به دلیل نیاز کاربران و برنامه نویسان به سایت های پویا و داینامیک تر فردی به نام Brendan Eich رو استخدام میکنه، شخصی که خالق زبان محبوب جاوااسکریپت بود و نسخه اولیه این زبان که Mocha نام داشت رو فقط و فقط در 10 روز میسازه، اما با این حال خیلی از قابلیت های جاوااسکریپت امروزی درونش وجود داشته. 👈🏼 در سال 1996: زبان Mocha نخست به LiveScript تغییر نام میده. اما نکته قابل توجه اینه که در اون زمان به دلیل محبوبیت بیشمار زبان Java در بین برنامه نویسان و توسعه دهنده ها، این زبان سپس صرفا به دلایل تبلیغاتی به JavaScript  تغییر نام میده. این دو زبان هیچ ارتباطی با یکدیگر ندارند. در همین سال مایکروسافت از اولین مروگر خود (Internet Explorer) رو نمایی میکنه و زبان جاوااسکریپت رو از Netscape کپی و نام اون رو JScript قرار میده. 👈🏼 در سال 1997: بخاطر وجود دو زبان کاملا مشابه در حوزه وبسایت و مشکلاتی که به وجود میومد. با توافق طرفین برای استاندارد کردن این زبان برنامه نویسی، JavaScript به سازمان بین المللی Ecma واگذار میشه و اولین استاندارد رسمی جاوااسکریپت با نام ECMAScript 1 یا ES1 منتشر میشه. (درواقع JavaScript زبان پایه و ECMAScript استاندارد این زبان هست) 👈🏼 در سال 2009: پنجمین نسخه ECMAScript با نام ES5 یا ECMAScript 5 منتشر میشه که بیشترین قابلیت های جاوااسکریپت در این نسخه عرضه میشه. 👈🏼 در سال 2015: نسخه ششم یا ES6 که در بین توسعه دهندگان به ES2015 هم مشهوره عرضه میشه و به عنوان بزرگرترین آپدیت این زبان در تاریخ یاد میشه. بعد از این آپدیت سازمان ECMA چرخه عرضه نسخه های این استاندارد رو به 1 سال کاهش میده تا فیچر ها و قابلیت های کمتری رو در سال عرضه کنه و توسعه دهندگان اطلاعات خودشون رو راحت تر بروز کنن. 👈🏼 و به این ترتیب از سال 2016 تا کنون: نسخه های مختلف از ES عرضه میشه که این نسخه ها به ES2016 / ES2017 / ES2018 / ES2019 / ES2020 / ES2021 / ... معروفن. #جاوااسکریپت #javascript ★彡 @kiau_program 彡★

باکس مدل (Box Model) تو CSS یه مفهوم خیلی مهمه که تعیین می‌کنه چطور یه المنت HTML تو صفحه وب قرار میگیره و چطوری اندازه‌ها و فواصل اون محاسبه میشن. این مفهوم شامل چهار مولفه اصلی هست: 1. Content (محتوا): قسمت داخلی یه المنت که شامل محتوای واقعی مثله متن، تصاویر یا سایر المنت های HTML هست. 2. Padding: فضای بین محتوا و حاشیه المنت. پدینگ می‌تونه به صورت جداگانه برای هر سمت (بالا، پایین، چپ، راست) تنظیم بشه. 3. Border: حاشیه اطراف پدینگ و محتوا که مرزهای المنت رو مشخص میکنه. 4. Margin: فضای بین حاشیه المنت و سایر المنت ها در صفحه. #CSS #فرانت ★彡 @kiau_program 彡★

💎 JSTips: تفاوت بین target و currentTarget در event context: ✅ پراپرتی target از آبجکت event، شامل المنتی هست که باعث اجرای یک رویداد یا event خاص شده:

<div onclick="getElement(event)">
    <p>
        <button></button>
    </p>
</div>

function getElement(event) {
    alert(event.target.tagName);
}

همونطور که می‌بینید یک رویداد onclick به یک div نسبت داده شده. مقداری که event.target می‌گیره، اگه روی تگ div کلیک کنیم شامل تگ div، اگه روی p کلیک کنیم شامل تگ p و اگه روی button کلیک کنیم شامل تگ button خواهد بود. ✅ پراپرتی currentTarget از آبجکت event شامل المنتی هست که رویداد به اون نسبت داده شده:

<div onclick="getElement(event)">
    <p>
        <button></button>
    </p>
</div>

function getElement(event) {
    alert(event.currentTarget.tagName);
}

اگه روی تگ‌های div و p و button کلیک کنیم، پراپرتی currentTarget شامل تگ div خواهد بود. چون ما رویداد رو به div نسبت دادیم. #جاوااسکریپت #javascript ★彡 @kiau_program 彡★

کد هک پسورد با پایتون👇🏻

import os
from random import randint

os. system('color a')
U_pass = input("Enter your password: ")
pas = ['a', 'b', 'c', 'd',
       'e', 'f', 'g', 'h',
       'i', 'j', 'k', 'l',
       'm', 'n', 'o', 'p',
       'q', 'r', 's', 't',
       'u', 'v', 'w', 'x',
       'y', 'z', '0', '1',
       '2', '3', '4', '5',
       '6', '7', '8', '9']
ps = ''
while ps != U_pass:
    ps = ''
    for letter in range(len(U_pass)):
        guess = pas[randint(0, 35)]
        ps += guess print (ps)
        print('Cracking Password..Please wait')
        os.system('cls')
print(f'Your Password : {ps}')

ری‌اکشن یادتون نره♥️ ★彡 @kiau_program 彡★

پاسخگویی به یک سری سوالات پر تکرار درباره مسیر هوش مصنوعی ----------------------------------------------------------- من می خواستم این حرفه رو شروع کنم ولی از هر کسی که سوال کردم گفتن اموزشگاه های بیرون اصلا خودشون هم بلد نیستن می خواستم بدونم این حرفه شامل چه دوره هایی هست؟ چند ماه طول میکشه تا یاد بگیریم؟ بهترین منابع برای یادگیری چی هستش؟ و اینکه کدوم شاخه داخل این حرفه درامدزایی خوبی داره؟ #هوش_مصنوعی @kiau_program

رفقا Component/Template Kit رسمی تیلویند یا همون Tailwind UI یسری کامپوننت ها و تمپلیت های ساخته شده توسط تیم خود تیولوینده که قیمتش تو سایت تیلویند برای شخص چیزی حدود 300 دلار و برای تیم یا کمپانی حدودا 800 دلاره. این آپدیت برای سال 2023 و کامپوننت هارو در قالب react, vue, html, alpine داره. یسری تمپلیت های آماده هم داره که اگر اشتباه نکنم با Next js توسعه داده شده. علاوه بر این هم فایل لایه باز figma هم در بر میگیره که اگر نیاز داشتید میتونید ازش استفاده کنید. https://downloadly.ir/theme/tailwind-ui-application-ui-marketing/ #فرانت ★彡 @kiau_program 彡★

جاوااسکریپت wtf ترین زبان برنامه نویسی :) ★彡 @kiau_program 彡★

آناتومی توابع (Function Decleration) در جاوااسکریپت #جاوااسکریپت #javascript ★彡 @kiau_program 彡★

سال نوتون مبارک رفقا، آرزو نمیکنم که سال خوبی براتون باشه، بلکه از ته دل امیددارم که امسال بهترین سال زندگیتون رو با دستای خودتون خلق کنید✌️🏼❤️ ★彡 @kiau_program 彡★

نیم نگاهی به برخی از متودهای آرایه ها در جوااسکریپت #جاوااسکریپت #javascript ★彡 @kiau_program 彡★

کد تقویم گرافیکی با پایتون👇🏻

import tkinter as tk from tkcalendar import Calendar import datetime root = tk.Tk() root.title("تقویم من") root.geometry("600x400") events = {'2023-09-28': ('Tehran', 'meeting'),           '2023-10-14': ('Mashhad', 'meeting'),           '2024-01-12': ('Isfahan', 'meeting')} cal = Calendar(root, selectmode="day", year=2024, month=3) for k in events.keys():     date = datetime.datetime.strptime(k, '%Y-%m-%d').date()     cal.calevent_create(date, events[k][0], events[k][1]) cal.tag_config('meeting', background='violet red', foreground='white') cal.pack(fill='both', expand=True) root.mainloop()

#پایتون #python ★彡 @kiau_program 彡★

💎 JSTips: کوکی ها یا Cookies در جاوا اسکریپت: کوکی یا Cookie : در لغت به معنی یک نوع شیرینی یا بیسکویت است ولی خب این ربطی نداره و یک معنی دیگش یعنی فضایی برای نگهداری توکن و یا اطلاعات ( داده های کوچک ) از جمله مشخصات کاربر ( نام ، ایمیل و.. ) در یک فایل متنی کوچک در سیستم شخصی خوده کاربر. ✅ یعنی اگه شما مثلا رفتید تو فلان سایت و خواستید نظری یا دیدگاهی ارسال کنید، اونجا اون سایت نام و ایمیل شمارو درون کوکی قرار میده و ذخیرش میکنه و در سری های بعدی نام و ایمیل شمارو از همون حافظه کوکی میگیره و نمایش میده ( یعنی دیگه نیاز نیست شما دوباره نام و ایمیل تون رو وارد کنید ) تموم شد رفت، به این میگن کوکی. ⚠️نگهداری داده های بزرگ و درکل نگهداری مطمعن داده ها ( برای همیشه ) فقط از طریق پایگاه داده ها ( مثل PostgreSQL) امکان پذیره، و نباید از کوکی ها برای اینکار استفاده کرد، چون کوکی ها معمولا برای نگهداری داده های کوچک و بصورت موقت استفاده میشه. ✅ ایجاد کوکی در زبان javascript

document.cookie = "Cookie_Name = example";

#جاوااسکریپت #javascript ★彡 @kiau_program 彡★

💎 JSTips: مقاله ی کوتاه و مختصر روش‌های مختلف Loop بروی یک آرایه در جاوا اسکریپت 1️⃣ استفاده از حلقه ی for: روش سنتی کنترل کامل بر رفتار حلقه

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let i = 0; i < fruits.length; i++) {
 console.log(fruits[i]);
}

2️⃣ استفاده از متود forEach: یک built-in متود در JS که فرآیند حلقه زدن هر عنصر را ساده می کند.

let fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.forEach(function (fruit) {
 console.log(fruit);
});

3️⃣ استفاده از حلقه for...of: جایگزینی مدرن و مختصر برای حلقه for سنتی.

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let fruit of fruits) {
 console.log(fruit);
}

4️⃣ استفاده از یک for...in (برای آرایه ها توصیه نمیشود): به دلیل رفتار غیرمنتظره احتمالی برای آرایه ها توصیه نمی شود. مناسب برای تکرار بروی object ها

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let index in fruits) {
 console.log(fruits[index]);
}

5️⃣ استفاده از متود map: یک آرایه جدید با اعمال یک تابع داده شده برای هر عنصر ایجاد می کند که برای تبدیل عناصر آرایه مفید است.

let fruits = ['apple', 'banana', 'cherry', 'date'];

let capitalizedFruits = fruits.map(function (fruit) {
 return fruit.toUpperCase();
});

console.log(capitalizedFruits);

6️⃣ استفاده از متود filter: یک آرایه جدید با عناصری ایجاد می کند که یک تست مشخص را پشت سر می گذارند، برای انتخاب عناصر بر اساس معیارهای خاص

let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = numbers.filter(function (number) {
 return number % 2 === 0;
});

console.log(evenNumbers);

console.log(sum);

7️⃣ استفاده از متود reduce: مقادیر آرایه را در یک مقدار ترکیب می کند که برای انجام محاسبات مفید است مانند یافتن مجموع همه اعداد.

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function (total, currentNumber) {
 return total + currentNumber;
}, 0);

console.log(sum);

8️⃣ استفاده از متود some و every : متود some بررسی می کنند که آیا حداقل یک عنصر یک شرط را برآورده می کند، در حالی که every بررسی می کند که آیا همه عناصر دارای شرط x هستند یا خیر

let numbers = [1, 2, 3, 4, 5];

let isGreaterThanThree = numbers.some(function (number) {
 return number > 3;
});

let allGreaterThanZero = numbers.every(function (number) {
 return number > 0;
});

console.log(isGreaterThanThree); // true
console.log(allGreaterThanZero); // true

#جاوااسکریپت #javascript ★彡 @kiau_program 彡★

💎 JSTips: مختصری در مورد دام مجازی (Virtual DOM) تمامی تگ های اچ تی ام ال یک صفحه در فضایی به عنوان دام (DOM) نگهداری می شود در واقع دام، یک شکل درختی از تگ های تو در تو HTML صفحه شما می باشد. لایبری React، از فضایی رو نمایی کرد به نام دام مجازی یا همان Virtual DOM، که این مفهموم بعد ها در سایر فریم ورک های فرانت مثل Vue نیز استفاده شد. این دام وظیفه بروزرسانی صفحه شما را بدون رفرش اطلاعات اضافی را بر عهده دارد دقیقاً کاری که AJAX انجام میدهد اما با این تفاوت که ایجکس روی دام اصلی تغییرات را اعمال می کند (که به مراتب کند تره) اما React، تغییرات را در دام مجازی انجام میدهد سپس جایگزین دام اصلی میکند (و بسیار سریع تره تا ایجکس). فرایند بروزرسانی یک صفحه طراحی شده توسط ریکت : - با لود صفحه شما یک DOM و یک Virtual DOM از صفحه شما ایجاد میشود که یوزر موارد درون دام را مشاهده می کند. - فرض کنید یک تغییر را در صفحه ایجاد کرده اید به عنوان مثال با کلیک بر روی یک باتن، قرار است یک پاراگراف در صفحه نمایش داده شود. - ری اکت، یک دام مجازی دیگر از صفحه شما با احتساب تغییراتی که قرار اعمال بشود ایجاد می کند و با دام مجازی قبلی که ابتدای لود صفحه ایجاد کرده بود مقایسه می کند. - پس از بررسی متوجه میشود که در دام مجازی جدید فقط یک پاراگراف جدید اضافه شده است و مابقی اجازی صفحه با دام قبلی مطابقت دارد. - حال بدون دست زدن به سایر کد های صفحه DOM، فقط تغییرات جدید را در درون کد های DOM جایگذاری می کند. - در این صورت مجدداً دو Virtual DOM که با هم مقایسه شدند حذف و مجدداً یک Virtual DOM جدید از دام فعلی ایجاد میشود. #جاوااسکریپت #javascript ★彡 @kiau_program 彡★

★彡 @kiau_program 彡★

رفقا. نکته برداری و ساخت داکیومنت یا ساخت چیت شیت حین آموزش از نکات مهم هر بخش یا نوشتن یکسری اصطلاحات تخصصی استفاده شده تو هر زبان، تکنولوژی، فریمورک و یا ... به شما هم تو فرآیند یادگیری و هم بعد از گذروندن آموزش ویدئویی کمک میکنه که سریعتر به مطالب آموزش دسترسی پیدا کنید. و یکسری نکات مهم رو همیشه جلوی چشمتون داشته باشید، پس جدیش بگیرید. اما پیشنهاد میشه که نکته برداری و جزوه نویسیتون رو توی حوزه برنامه نویسی به صورت دیجیتالی انجام بدید، به دلیل اینکه ✔️ جزوه ها و نکات بسیار تمیز تر و خوانا تر میشن ✔️ کدها خوانا تر نوشته میشن ✔️ امکان سرچ و دسترسی سریعتر به یک بخش وجود داره و راحتتر به مطالب دسترسی پیدا میکنید ✔️ میتونید فایل pdf نکات و جزوه هاتون رو حتی تو گوشی هم داشته باشید و هرکجا که بهش احتیاج داشتید ازش استفاده کنید ✔️ سریعتر و راحتتره و حین اموزش دیدن، درکنار کد زدن و تمرین، نکات رو هم به راحتی یادداشت میکنید از سایت زیر هم میتونید برای نوشتن جزوه های دیجیتالتون استفاده کنید که امکانات زیادی داره و علاوه بر ساخت داکیومنت میتونید ازش برای رسم طرح های ui، فلوچارت و ... استفاده کنید. https://whimsical.com/ این هم یک نمونه از داکیومنتی که خودم حین آموزش با این وب اپ ساختم. ★彡 @kiau_program 彡★