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

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

✅لینک اکانت گیت هاب دوستان✅

https://github.com/mahdi-noori-ai

https://github.com/BenyaminKeshavarz

https://github.com/erfan-8

https://github.com/khosro-web

https://github.com/rex-vero

https://github.com/MohamadHusein
https://github.com/MahdiJalilvandir
https://github.com/aminfallahzadeh

http://github.com/alifcpr

#گیت_هاب

❗️ Challenge

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

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

★彡 @kiau_program 彡★

❗️ Challenge

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

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

★彡 @kiau_program 彡★

🎯 داکیومنت‌ها

- داکیومنت HTML از سایت MDN

- داکیومنت Accessibility از سایت MDN

- داکیومنت CSS از سایت MDN

- داکیومنت SASS از سایت sass-lang

- (داکیومنت JavaScript از سایت javascript.info

داکیومنت JavaScript از سایت fa.javascript.info ورژن فارسی)

- داکیومنت Git از سایت git-scm

- داکیومنت Github از سایت docs.github

- داکیومنت Vite از سایت vitejs.dev

- داکیومنت NPM از سایت docs.npmjs

- داکیومنت Tailwind از سایت tailwindcss

- داکیومنت Bootstrap از سایت bootstrap

- داکیومنت Vue از سایت vue.js

- داکیومنت Nuxt.js از سایت nuxt

- داکیومنت React از سایت react.dev

- داکیومنت Next.js از سایت nextjs

- داکیومنت TypeScript از سایت typescriptlang

- داکیومنت Frontend Guidelines

- داکیومنت JavaScript Style Guides


#فرانت
★彡 @kiau_program 彡★

✅ فریمورک Vue js (پارت 1)

فریمورک ها و کتابخانه ها با ارائه پلتفرم و بستری پایدار، باعث راحتی کار و کاهش سختی ها و چالش هایی که توسعه دهندگان معمولا تجربه می کنند میشه.
یکی از همین فریمورک ها Vue js که معمولا با نام Vue شناخته می شه. اگر JavaScript رو به عنوان الفبا در نظر بگیریم، Vue کتابی از عبارتهاست که برنامه نویس رو قادر می سازه تا جملات هوشمندانه ای برای برقراری ارتباط با صفحه تشکیل بده.

فریمورک Vue یک فریمورک متن باز برای وبسیات ها و وب اپلیکیشن های SPA یا Single Page Application است، که در طراحی آن روی انعطاف پذیری تمرکز بسیاری شده و تمرکز اصلی این فریمورک روی لایه view قرار داره، این فریمورک در هسته (core) خودش از معماری MVVM یا Model-View-View-Model استفاده میکنه که تعامل زیادی با لایه view برقرار میکنه.

برای اولین بار Vue js در دسامبر سال 2013 توسط فردی به نام Evan You، یکی از کارمندان سابق گوگل به دنیا معرفی شد. ایوان که در شغل سابق خودش از فریمورک پرقدرت Angular js در توسعه وبسایت ها و وب اپلیکیشن ها استفاده می کرد، تصمیم گرفت تا فریمورکی به پایه و قدرت Angular اما در عین حال سبک و انعطاف پذیر خلق کنه.
بر خلاف React که توسط فیسبوک سابق یا شرکت متا و Angular که توسط گوگل پشتیبانی میشه، Vue از طریق کمک های مالی کاربران و با Patreon توسعه پیدا کرد و تامین مالی شد. پشتوانه و پشتیبانی این فریمورک توسط جامعه برنامه نویسان صورت میگیره و آپدیت های این فریمورک بعد از بررسی توسط افراد تیم Vue منتشر میشه، اما نکته قابل توجه اینه که این فریمورک در 3 سال اخیر بسیار پیشرفت کرده و روز به روز حمایت و علاقه توسعه دهندگان وبسایت رو به خودش جذب میکنه و جزو قدرتمندترین فریمورک های زبان JavaScript قرار گرفته.

یکی از اصلی ترین دلایل محبوبیت Vue سادگی ارتباط با view و همینطور حجم کم نسبت به فریمورک های دیگر است.
همچنین با معرفی و ساخت Vite توسط Evan You فریمورک Vue بر پایه و بیس نسل جدید ابزار های فرانت اند قرار گرفت که امروزه از Vite js درون فریمورک های محبوب دیگر مثل React نیز استفاده میشه.

#فرانت
★彡 @kiau_program 彡★

✅ فریمورک  Vue js (پارت 2)

شرکت های مختلفی مثل نینتندو، لویی ویتون، ادوبی، bmw، آپ ورک (Upwork)، علی بابا، گیت لب (GitLab) و شیائومی برای ساخت رابط های کاربری فرانت اند و وبسایت های خود از این فریمورک استفاده کرده اند.

فریمورک Vue js مانند React از سینتکس و ساختار JSX نیز پشتیبانی میکنه اما حالت دیفالت vue template بدلیل ساختار منظم، مشخص، ساده و جداسازی view از منطق محبوبیت بسیار بیشتری داره.
ساختار کلی یک پروژه کامل Vue به شکل زیر است.

File name: page.vue

<template>
  <div></div>
</template>

<script>
export default {
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped></style>

مزایای استفاده از Vue.js:
1️⃣ حجم کم
این فریمورک بسیار کم حجم و تنها 18 کیلوبایت است. همچنین می توان از توان کمتری از Vue داخل وب اپلیکیشن ها استفاده کرد و برای مدیریت یک Slider تصاویر یا ساخت یک وب اپلیکیشن کامل با همه امکانات مورد استفاده قرار بگیره، به همین منظور حجم پروژه بسته به نوع استفاده از Vue متغیره.

2️⃣ یادگیری آسان
یادگیری Vue js نسبت به دیگر فریمورک های محبوب خیلی ساده تر بوده و همین باعث گسترش محبوبیت بین توسعه دهندگان شده.
برای یادگیری Vue لازم نیست مانند Angular یا React درک بالایی از کتابخانه ها، TypeScript یا سینتکس JSX داشته باشید.

3️⃣ ابزار های فراوان

4️⃣ وجود انجمن ها و کامیونیتی های مختلف مردمی و پشتیبانی از هزاران توسعه دهنده

5️⃣ سادگی در عین پرقدرت بودن و وجود قابلیت های فراوان


🔺 همچنین Vue js از بودجه کمتری نسبت به فریمورک های دیگر برخوردار است که همین امر درحال حاضر باعث شده تا در مقایسه با فریمورک ها پر استفاده دیگر ابزارهای کمتری داشته باشه و کمتر در بین شرکت های بزرگ مورد استفاده قرار بگیره.
همچنین از آن جایی که Vue نسبت به دیگر رقبا سال های کمتر فعالیت کرده و مدتی طول کشید تا وارد بازار کار شود و توجه برنامه نویسان رو به خودش جلب کنه، از متخصصان با تجربه و سنیور کمتر و منابع اموزشی محدود تری برخورداره،
اما این به این معنی نیست که در آینده جایگاه خوبی پیدا نخواهد کرد چرا که همچنان Vue یک فریمورک تازه نفس و جوان در میان کاربران است که جای رشد و پیشرفت بسیاری دارد.

#فرانت
★彡 @kiau_program 彡★

❗️ Challenge

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

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

★彡 @kiau_program 彡★

✅ مقایسه SSR و CSR در وبسایت ها:

مفهوم SSR چیست؟
اول از همه باید گفت که SSR مخفف Server Side Rendering است. این توانایی یک وب اپلیکیشن است که می تواند دیتا ها، المنت ها و صفحات وب را به جای اینکه در مرورگر کاربر رندر بگیرد، روی سرور رندر بگیرد.
زمانی که درخواست از طرف سرور دریافت می شود، اگر محتوای صفحه به دیتا های پایگاه داده (Data base) نیاز داشته باشد، سرور این کار را انجام می دهد، سپس دیتا ها را به صفحه کاملا رندر شده ارائه می ده و آنها را به عنوان پاسخ برای گیرنده یا کلاینت ارسال می کند و در مرورگر صفحات به نمایش در می آید.

مفهوم CSR چیست؟
عبارت CSR مخفف Client Side Rendering است، CSR نقطه مقابل SSR است. اگر در SSR صفحه سمت سرور رندر گرفته می شود، در CSR صفحه را در کلاینت و سمت کاربر رندر می گیرد. هنگامی که درخواست از سرور دریافت می شود، صفحه رندر گرفته نمی شود. در عوض، سرور یک صفحه واحد را که اسکلت صفحه است برای کلاینت ارسال می کند. سرور اسکلت صفحات در قالب html به همراه فایل javascript ارسال می کند، سپس در سمت کلاینت و در مرورگر کاربر صفحه را به یک صفحه کاملا رندر شده تبدیل میکند و کد های جاوااسکریپت لود می شود. پس محتوا چه می شود؟ در این زمان api وارد می شود. کلاینت درخواستش را به api می فرستد تا دیتا ها را از طریق دیتا بیس دریافت و در صفحه نمایش دهد.

تفاوت SSR و CSR چیست؟
تفاوت اصلی بین SSR و CSR محل رندر گیری در صفحه است. یک وب اپلیکیشن SSR صفحه را در سمت سرور و CSR در سمت کاربر و کلاسنت رندر می گیرد. با در نظر گرفتن پارامتر های یک وبسایت می توان گفت که کدام روش برای استفاده در وبسایت ها مناسب تر است، اگر وبسایت ترافیک بسیار بالایی ندارد، بیشتر صفحات در قالب تکست، بلاگ، کانتنت و ... ست و مهم تر از همه، سئو اهمیت بالایی در وبسایت شما دارد، طراحی وبسایت در قالب Server Side Rendering گزینه مناسب تری است. اما اگر وبسایت پر ترافیک، با انیمیشن های پیچیده دارید و تعامل با کاربر بیشتر از سئو برای شما اهمیت دارد، CSR می تواند گزینه خوبی باشد.
نکته قابل توجه این است که می توان وبسایت ها را به شیوه ای طراحی کرد که در سمت کاربر و کلاینت، به صورت CSR و در سمت ربات های گوگل و موتور های جستجو به صورت SSR لود شوند.

در واقع SSR بودن یک وبسایت برای ربات های گوگل از اهمیت بالایی برخوردار است چون که توانایی index کردن صفحات، شناسایی تگ ها و المنت ها، دستیابی به قالب کلی سایت و محتوا را دارند.

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

برخی از فریمورک های SSR معروف عبارتند از:
Next js (SSR Framework for React)
Nuxt js (SSR Framework for Vue)

#فرانت
★彡 @kiau_program 彡★

⁉️ سیستم باینری و اعداد مبنای 2⃣ به چه صورت عمل میکنن؟

از اونجایی که انسان‌ها 🔟 تا انگشت دارند، سیستم عددی که برای شمارش از آن استفاده می‌کنند، در مبنای 🔟 هست.

★彡 @kiau_program 彡★