★彡 @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 彡★

💎 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:

کوکی ها یا Cookies در جاوا اسکریپت:

کوکی یا Cookie : در لغت به معنی یک نوع شیرینی یا بیسکویت است ولی خب این ربطی نداره و یک معنی دیگش یعنی فضایی برای نگهداری توکن و یا اطلاعات ( داده های کوچک ) از جمله مشخصات کاربر ( نام ، ایمیل و.. ) در یک فایل متنی کوچک در سیستم شخصی خوده کاربر.

✅ یعنی اگه شما مثلا رفتید تو فلان سایت و خواستید نظری یا دیدگاهی ارسال کنید، اونجا اون سایت نام و ایمیل شمارو درون کوکی قرار میده و ذخیرش میکنه و در سری های بعدی نام و ایمیل شمارو از همون حافظه کوکی میگیره و نمایش میده ( یعنی دیگه نیاز نیست شما دوباره نام و ایمیل تون رو وارد کنید ) تموم شد رفت، به این میگن کوکی.

⚠️نگهداری داده های بزرگ و درکل نگهداری مطمعن داده ها ( برای همیشه ) فقط از طریق پایگاه داده ها ( مثل PostgreSQL) امکان پذیره، و نباید از کوکی ها برای اینکار استفاده کرد، چون کوکی ها معمولا برای نگهداری داده های کوچک و بصورت موقت استفاده میشه.

✅ ایجاد کوکی در زبان javascript

document.cookie = "Cookie_Name = example";

#جاوااسکریپت
#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 彡★

📚Exercises in Machine Learning
@kiau_program
#هوش_مصنوعی

نیم نگاهی به برخی از متودهای آرایه ها در جوااسکریپت

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

★彡 @kiau_program 彡★

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


★彡 @kiau_program 彡★

آناتومی توابع (Function Decleration) در جاوااسکریپت

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

★彡 @kiau_program 彡★

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

★彡 @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 彡★

پاسخگویی به یک سری سوالات پر تکرار درباره مسیر هوش مصنوعی
-----------------------------------------------------------
من می خواستم این حرفه رو شروع کنم ولی از هر کسی که سوال کردم گفتن اموزشگاه های بیرون اصلا خودشون هم بلد نیستن
می خواستم بدونم این حرفه شامل چه دوره هایی هست؟
چند ماه طول میکشه تا یاد بگیریم؟
بهترین منابع برای یادگیری چی هستش؟
و اینکه کدوم شاخه داخل این حرفه درامدزایی خوبی داره؟
#هوش_مصنوعی
@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 彡★

💎 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 彡★

باکس مدل (Box Model) تو CSS یه مفهوم خیلی مهمه که تعیین می‌کنه چطور یه المنت HTML تو صفحه وب قرار میگیره و چطوری اندازه‌ها و فواصل اون محاسبه میشن. این مفهوم شامل چهار مولفه اصلی هست:

1. Content (محتوا):
قسمت داخلی یه المنت که شامل محتوای واقعی مثله متن، تصاویر یا سایر المنت های HTML هست.

2. Padding:
فضای بین محتوا و حاشیه المنت. پدینگ می‌تونه به صورت جداگانه برای هر سمت (بالا، پایین، چپ، راست) تنظیم بشه.

3. Border:
حاشیه اطراف پدینگ و محتوا که مرزهای المنت رو مشخص میکنه.

4. Margin:
فضای بین حاشیه المنت و سایر المنت ها در صفحه.

#CSS
#فرانت


★彡 @kiau_program 彡★

🎯 دوره‌های آموزشی (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 彡★

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

در این دوره عملی، پایتون را از ابتدا شروع می‌کنید تا سطحی که می‌توانید تقریباً هر چیزی را با آن بسازید، خواه یک برنامه وب کاملاً کاربردی مبتنی بر پایگاه داده یا یک ابزار اتوماسیون باشد.

این دوره به شما پایتون را از ابتدا و از سطح بسیار ابتدایی آموزش می دهد و به تدریج شما را به سمت موضوعات پیشرفته تر سوق می دهد.

ما نه تنها تمام اصول اولیه پایتون را پوشش می دهیم، بلکه محبوب ترین کتابخانه های پایتون مانند جنگو، فلاسک، تیکینتر و سلنیوم را نیز پوشش می دهیم. در اینجا همه چیزهایی است که در این دوره کامل یاد خواهید گرفت:

در این دوره عملی، پایتون را از ابتدا شروع می‌کنید تا سطحی که می‌توانید تقریباً هر چیزی را با آن بسازید، خواه یک برنامه وب کاملاً کاربردی مبتنی بر پایگاه داده یا یک ابزار اتوماسیون باشد.

این دوره به شما پایتون را از ابتدا و از سطح بسیار ابتدایی آموزش می دهد و به تدریج شما را به سمت موضوعات پیشرفته تر سوق می دهد.

ما نه تنها تمام اصول اولیه پایتون را پوشش می دهیم، بلکه محبوب ترین کتابخانه های پایتون مانند جنگو، فلاسک، تیکینتر و سلنیوم را نیز پوشش می دهیم. در اینجا همه چیزهایی است که در این دوره کامل یاد خواهید گرفت:

در این دوره عملی، پایتون را از ابتدا شروع می‌کنید تا سطحی که می‌توانید تقریباً هر چیزی را با آن بسازید، خواه یک برنامه وب کاملاً کاربردی مبتنی بر پایگاه داده یا یک ابزار اتوماسیون باشد.

این دوره به شما پایتون را از ابتدا و از سطح بسیار ابتدایی آموزش می دهد و به تدریج شما را به سمت موضوعات پیشرفته تر سوق می دهد.

ما نه تنها تمام اصول اولیه پایتون را پوشش می دهیم، بلکه محبوب ترین کتابخانه های پایتون مانند جنگو، فلاسک، تیکینتر و سلنیوم را نیز پوشش می دهیم. https://www.youtube.com/watch?v=spXdDP7J0TA&list=PLIrsP8dft12CSv-KEbiXq21JmR3LUr854
#هوش_مصنوعی #پایتون
@kiau_program

❗️ Challenge

اگر سوالی داشتید، تو گروه بپرسید.

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

★彡 @kiau_program 彡★