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

فایل بسیار کاربردی برای مرور و کار با دستورات گیت و گیت هاب
#گیت #گیت_هاب #هوش_مصنوعی
★彡 @kiau_program 彡★

❗️ Challenge

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

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

★彡 @kiau_program 彡★

معرفی ۵ سایت کاربردی در حوزه برنامه‌نویسی:


💢 سایت www.w3schools.com: آموزش قدم‌به‌قدم انواع زبان‌های برنامه‌نویسی با مثال‌های جالب و کاربری به همراه ویژگی تست و مشاهده خروجی در لحظه.

💢 سایت stackoverflow.com: دارای بینهایت ترفند و راهنما جهت پیشرفت و برطرف‌سازی مشکلات در زمینه IT، فضایی پیشرفته و تعاملی بین کاربران مختلف.

💢 سایت 10015.io: تمامی ابزار‌های کاربردی برای برنامه‌نویسی، گرافیک، طراحی و ... در یک‌جا.

💢 سایت typeo.top: اموزش استاندارد و قدم‌به‌قدم تایپ ده‌انگشتی.

💢 سایت smalldev.tools: ابزار‌های کاربردی برای برنامه‌نویسان حوزه وب.


#five_things

@kiau_program

❗️ Challenge

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

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

★彡 @kiau_program 彡★

وضعیت برنامه نویسی وب در گذشته در برابر حال:

اینده از نظر شما چطوره🤔😂

#fun

★彡 @kiau_program 彡★

https://www.linkedin.com/feed/update/urn:li:activity:7191094197850947585?updateEntityUrn=urn%3Ali%3Afs_feedUpdate%3A%28V2%2Curn%3Ali%3Aactivity%3A7191094197850947585%29 @kiau_program

5 افزونه کاربردی Vscode

🔷 افزونه Black Box : یک هوش مصنوعی که به سرعتتون کمک میکنه و باگ هاتونو رفع میکنه

🔶 افزونه Thunder Client : این افزونه کار Postman رو میکنه ولی چون برای من بالا نمیاد از این افزونه استفاده میکنم

🔷 افزونه Error Lens : ارور های کدتون رو به صورت خطی نمایش میده

🔶 افزونه Code Time : تایم کد زدنتون رو حساب میکنه 😄

🔷 افزونه Vscode-icons : آیکن های پیشفرض Vscode رو تغییر میده

@kiau_program