#tournament

سلام دوستان امیدوارم حالتون خوب باشه !

ما تصمیم گرفتیم که یک مسابقه برگزار کنیم تا سطح دانش خودمون رو از برنامه‌نویسی تحت وب و طراحی سایت محک بزنیم 😎

🏁 این مسابقه ۲ تا مرحله داره و با ۴ شرکت کننده برگزار میشه و شرکت کنندگان به دو تیم دو نفره تقسیم میشوند و با هم دیگه به صورت یک به یک مسابقه میدن و برنده هر کدوم از تیم ها به فینال این مسابقه راه پیدا میکنه ⚡

📌 توی هر مرحله ۲۰ تا سوال پرسیده میشه و شرکت کنندگان ۱۰ ثانیه فرصت دارند تا به سوال پاسخ بدن و هر کسی که به سوالات بیشتری پاسخ بده برنده میشه


1️⃣ مرحله اول آسونه نسبتا و با html, css قراره شروع بکنیم و ۲۰ تا سوال در مورد html و css به صورت ترکیبی پرسیده میشه و هر کسی که تعداد بیشتری از سوالات رو پاسخ بده برنده میشه، البته باید بگم که توی این مرحله قراره به اعماق html و css نفوذ کنیم 🔥

2️⃣ مرحله دوم مسابقه سخت تره و JavaScript هم وارد بازی میشه و اینجاس که میتونید دانش خودتون رو از زبان جاوااسکریپت محک بزنید 😉

3️⃣ حالا اگر شرکت کننده ها مساوی بشن وارد مرحله سوم میشیم که این قسمتش سخت تره و مرحله پایانیه و فعلا تاپیکش محرمانس ( اگر وارد مرحله سوم بشیم بهتون میگیم که به چه نحوی هستش )

🏆 و در نهایت در فینال این مسابقه قراره که برندگان دور اول دست به کد بشن و چالشی رو که براشون در نظر گرفتیم رو به بهترین شکل در مدت زمانی که تایین شده انجام بدن و اینجاست که برنده نهایی مشخص میشه
راستی داخل فینال این مسابقه قراره یه مهمان جدید به عنوان داور بهمون اضافه بشه 🤩

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

‍♀️نحوه برگزاری مسابقه هم آنلاین هست و داخل میت برگزار میشه و صرفا نیازه که با یک گوشی و یا دوربین دیگه از خودتون فیلم بگیرید در حین مسابقه به این دلیل که کیفیت کمرا توی میت خیلی خوب نیستش

❗️فصل اول این مسابقه با ۴ شرکت کننده برگزار میشه و ظرفیت باقی مونده محدود هستش و فقط ۳ نفر باقی مونده

اگر علاقه مند به شرکت کردن داخل این مسابقه هستید به آیدی زیر پیام بدید :
@MohammadTazaroie

برای آشنایی بیشتر با چنل ما میتونید محتوای چنل یوتوب رو از لینک زیر دنبال کنید 🤩
https://www.youtube.com/@coolycode

Channel | YouTube | Instagram

#javanoscript #youtube

احتمالا برای شما هم پیش اومده که یک آبجکت و یا آرایه رو داخل لوکال استوریج ذخیره کردید و وقتی اومدید دیتاش رو بخونید با این مقدار مواجه شدید ❗

"Object object"

این اتفاق بخاطر هندل نکردم درست این موضوع هنگام ذخیره کردن دیتا هستش ⚠️

داخل این ویدیو دلیلش رو به طور کامل بررسی کردیم و راه حل درست هندل کردنشم بهتون گفتم که قطعا خیلی جاها میتونه کمکتون کنه ⚡

مشاهده کامل ویدیو

Channel | YouTube | Instagram

یه نفر مونده تا صد تاییییی شدنمون 😎🤩
دمتون گرم خدایی ❤️

اولش که این کانال رو زدم  فکر نمی‌کردم اصلا قراره انقدر اینجا پیش برم
واقعا خوشحالم که محتوایی که گذاشتم براتون مفید بوده ❤️
قطعا همینقدر پر قدرت و قوی مثل همیشه میریم جلو
راستی ایشالا امروز ویدیو جدید داریم 🤩⚡

ویدیو جدید آپلود شد 🤩⚡

#javanoscript #youtube

از اونجایی که ما در برنامه نویسی خیلی با آبجکت ها سر و کار داریم، حتما باید بتونیم به خوبی باهاشون کار بکنیم، حالا یسری تریک ها و ترفند ها هستند که قطعا خیلی به بهمون کمک می‌کنند در روند کار و سرعت مارو بالا تر میبرند ❗

داخل این ویدیو پنج تا تریک خفن و کاربردی در مورد آبجکت ها داخل جاوااسکریپت بهتون یاد دادم که هر وب دولوپری باید بدونه ⚡


1️⃣ -  کپی عمیق یا deep copy چیست ؟
2️⃣ - چک کردن موجودیت پروپرتی موردنظر داخل آبجکت
3️⃣ - حذف یک پروپرتی از آبجکت
4️⃣ - ادغام و مرج کردن دو آبجکت با یکدیگر
5️⃣ - استفاده از defineProperty برای تعریف پروپرتی جدید در آبجکت

مشاهده کامل ویدیو

Channel | YouTube | Instagram

ویدیو جدید منتشر شد 🔥🤩

#reactjs #youtube #reactjs_tutorial

ری‌اکت یه کتابخونه‌ی نسبتا تودرتو هستش و همه چیز داخل ری‌اکت داخل یه سری کامپوننت تو در تو چیده شده که این مسئله می‌تونه بعضی از کارها رو خیلی سخت‌تر کنه، مثلا اگر یک جایی نیاز داشته باشیم که محتوای ری‌اکت رو در جایی خارج از جریان دام داشته باشیم آیا میتونیم کاری انجام بدیم ؟ در این صورت، پورتال‌های ری‌اکت به کمک ما میان !

🎯 با پورتال ها میتونید یک المنت رو داخل یک کامپوننت با همه قابلیت هایی که نیاز دارید استفاده کنید و خیلی ساده اون المنت رو به عنوان فرزند یک المنت دیگه داخل اپلیکیشن خودتون قرار بدید.‌

توی این ویدیو به صورت کامل پورتال هارو بهتون آموزش دادم ⚡

مشاهده کامل ویدیو

Channel | YouTube | Instagram

#reactjs #youtube #reactjs_tutorial

سلام به همگی، امیدوارم حالتون عالی باشه 🔥

یه دوره جدید داخل چنل یوتوب استارت زدیم و قراره که توی این دوره آموزش کامل لایبرری ری‌اکت جی‌اس رو به صورت کامل از سطح مقدماتی تا پیشرفته داشته باشیم تا بتونیم به صورت کامل به این لایبرری مسلط بشیم ⚡

اطلاع رسانی قسمت های جدید دوره داخل چنل تلگرام انجام میشه


مشاهده پلی لیست دوره ▶️

Channel | YouTube | Instagram

#reactjs #youtube #reactjs_tutorial

جلسه دوم دوره ReactJS - کامپوننت ها در ری‌اکت

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

توی این ویدیو، به آموزش کامل کامپوننت ها در ری‌اکت جی‌اس می‌پردازیم و همه قسمت های مختلف و نکات کلیدی رو در مورد کامپوننت ها بررسی میکنیم.


توی این جلسه چیا قراره یادبگیریم ؟

1️⃣ - مزایای استفاده از کامپوننت ها در ری‌اکت جی‌اس

2️⃣ - تاریخچه کامپوننت ها

3️⃣ - نحوه پیاده سازی کامپوننت ها در ری‌اکت جی‌اس

4️⃣ - استفاده از props در کامپوننت ها

5️⃣ - تفاوت استفاده از کامپوننت به صورت Self-Closing و Open-Close 

6️⃣ - مینی پروژه کارد محصول در ری‌اکت جی‌اس با استفاده از کامپوننت ها


مشاهده ویدیو ▶️

ریپازیتوری گیت‌هاب پروژه این جلسه 🧑‍💻

جلسه قبلی

Channel | YouTube | Instagram

سلام و درود به همگی 👋

ما تصمیم گرفتیم از این به بعد داخل چنل کولی کد نکات کاربردی، آموزش‌های کوتاه و چلنج های مختلف رو هم پوشش بدیم تا بتونیم روز به روز بیشتر و بیشتر یاد بگیریم و باهم دیگه این مسیر جذاب رو طی بکنیم 🤩⚡

برای دسترسی به مطالب هم میتونید از هشتگ های زیر استفاده کنید و هشتگ های کلی مثل :

#javanoscript_tutorial, #reactjs_tutorial

جهت آموزش های جامع تر و ویدیویی استفاده میشه مثل دوره ری‌اکت جی‌اس، و هشتگ هایی مانند :

#javanoscript #reactjs #trick #js_challenge #reactjs_challenge #fun

برای مباحث مختصر و مفید تر استفاده میشه 😉

امیدوارم که از مطالب کانال نهایت استفاده رو ببرید 🔥

این هم @MohammadTazaroie آیدی من هستش، هر موردی بود درخدمتم، منتظر پیشنهادات و چالش های برنامه نویسی و انتقاداتتون هستم ❤️‍🔥

چنل یوتبمون رو هم حتما داشته باشید چون مصالب مهم و آموزش های مفیدی رو براتون میزاریم که مطمئنم به کارتون میاد :

https://youtube.com/@coolycode

#reactjs #youtube #reactjs_tutorial

جلسه سوم دوره ReactJS - استیت ها در React، به همراه مینی پروژه افزودن به سبد خرید

استیت یکی از مهم ترین مفاهیم در ری اکت هست و بدون وجود اون تقریبا توسعه اپلکیشین های تعاملی با ری اکت امکان پذیر نیست.

توی این ویدیو، به آموزش کامل استفاده از استیت ها در ری اکت جی اس می‌پردازیم و استیت هارو به صورت کامل مورد بررسی قرار میدیم‌ و تمام نکات کلیدی استیت ها رو به همراه یک مینی پروژه کاربردی یاد میگیریم ⚡


توی این جلسه چیا قراره یادبگیریم ؟

1️⃣ - استیت ها چی هستند داخل ReactJS و چه ویژگی هایی دارند ؟

2️⃣ - نحوه استفاده از استیت ها ReactJS

3️⃣ - مینی پروژه دکمه افزودن به سبد خرید با استفاده از استیت ها

مشاهده ویدیو ▶️

ریپازیتوری گیت‌هاب پروژه این جلسه 🧑‍💻

جلسه قبلی

Channel | YouTube | Instagram

#WhatsThat #reactjs

ویر‌چوال دام چیست ؟ 🚀

اگر با ReactJS کار کرده باشید، احتمالا اسم ویرچوال دام ( VirtualDOM ) رو زیاد شنیده باشید

توی این ویدیو به صورت کامل بهتون توضیح دادم که ویرچوال دام چیه و چه کاری برای ما انجام میده ؟

📷 مشاهده در اینستاگرام

Channel | YouTube | Instagram

#reactjs #NEWPost

سه تا فکت جالب در مورد React Js 😉🔥


برای حمایت بیشتر میتونید از پیج اینستا مشاهده کنید :
https://www.instagram.com/reel/C9plLPrM5fE/?igsh=dnFicnZja2V5Y2Qz

Channel | YouTube | Instagram

#NEWPost

این ویدیو دلی بود امیدوارم که خوشتون بیاد ؛)

بالاخره یکی باید نشون میداد که برنامه نویسا همش تو یه اتاق تاریک با یه فنجون قهوه کد نمیزنن 😎😂

https://www.instagram.com/reel/C90OYbmMxgL

Channel | YouTube | Instagram

#tools #website #css #grid #tailwind

● با این سایتا لنگ گرید نمیمونی ●

وقتی با گرید در CSS کار می‌کنیم، خیلی پیش میاد که بعضی از پروپرتی های مهم رو فراموش کنیم و نتونیم طرحی که در ذهن خودمون داریم رو به درست ایجاد کنیم 🫠

میخوام سه تا سایت جالب بهتون معرفی بکنم که میتونید خیلی ساده با UI خوبی که براتون آماده کردند Grid مد نظر خودتون رو پیاده سازی کنید 😎

1️⃣ https://cssgrid-generator.netlify.app

2️⃣ https://grid.layoutit.com

3️⃣ https://visual-grid-generator.netlify.app

اگر هم دوست داشتید به طور کامل تر در مورد Grid داخل CSS اطلاعات کسب کنید میتونید از طریق داکیومنت زیر اقدام کنید 📄

https://learncssgrid.com


البته هنوز تموم نشده، اگر از tailwind استفاده میکنید میتونید از سایت tailwindgen استفاده بکنید که میاد گرید دلخواهتون رو با استفاده از class های tailwind براتون ایجاد میکنه و با فرمت HTML یا JSX خروجی رو براتون می‌فرسته 🤩 🔥

https://www.tailwindgen.com


Channel | YouTube | Instagram

اگر نیاز دارید که خیلی سریع کد های خودتون
رو بدون نیاز به هیچ نیازمندی خاصی به صورت آنلاین اجرا کنید و خروجیش رو در لحظه ببینید میتونید از سایت JSFiddle استفاده کنید ⚡

#javanoscript | #website

✅ با این سایت میتونید در عین سادگی خروجی کدتون رو خیلی سریع و در لحظه ببینید، که می‌تونه برای :

آموزش، تست کد و دیباگ کردن

بسیار کارآمد باشه 🤩

نحوه استفاده ازش هم خیلی ساده هست و فقط کافیه که وارد سایت JSFiddle بشید و Boilerplate ( متن/کد از پیش تعریف شده ) مد نظرتون رو انتخاب کنید مثل Typenoscript ,Reactjs و Sass و شروع کنید به کد زدن و در نهایت هم از بالای صفحه کدتون رو ران بکنید 💥

برای اشتراک گذاری آنلاین کدتون هم کافیه که روی دکمه Fork بالای صفحه کلیک کنید تا لینک اختصاصی خودتون رو بسازه 👀

یک سری قابلیت های پولی هم داره که میتونید داخل خود سایت JSFiddle مشاهده بکنید 🔗

Channel | YouTube | Instagram

#javanoscript #tricks

یکی از روش های جالب و سریع تبدیل Number به String داخل جاوااسکریپت به این شکل هست که میایم و یک عدد رو با یک رشته خالی جمع میکنیم.

5 + ' '  -->‌ ‌  ' 5 '

با این کار در واقع داریم عدد 5 رو به یک رشته خالی (' ') اضافه می‌کنیم.

حالا چرا این اتفاق می‌افته ؟ 🤔

جاوا اسکریپت یک زبان برنامه‌نویسی Dynamic Type هست و این به این معنی هست که نوع یک متغیر در زمان اجرا تعیین می‌شود و جاوا اسکریپت به طور خودکار تلاش می‌کنه تا انواع مختلف داده‌ها رو با هم سازگار کنه.
داخل جاوا اسکریپت، وقتی عملگر + بین دو رشته استفاده می‌شود، عمل الحاق (concatenation) انجام میشه؛ یعنی دو رشته به هم چسبیده و یک رشته جدید ایجاد می‌کنند.

حالا تبدیل عدد به رشته به چه شکلی اتفاق میفته ؟

وقتی یک عدد با یک رشته جمع می‌شود، جاوا اسکریپت به طور خودکار عدد رو به یک رشته تبدیل می‌کنه و سپس دو رشته رو به هم الحاق می‌ده.

⚡ نتیجه نهایی

در عبارت 5 + ' '، عدد 5 به رشته "5" تبدیل می‌شود و سپس به رشته خالی " " الحاق می‌شود. در نتیجه، خروجی عبارت "5" خواهد بود.

💥 مثال‌های دیگر

'Hello' + ' World' -> "Hello World"
'My age is ' + 30 -> "My age is 30"

کاربرد این روش 🚀

در کل این روش معمولاً برای ایجاد رشته‌های دینامیک استفاده میشه. ولی برای تبدیل عدد به رشته هم میتونید ازش استفاده بکنید 😉

Channel | YouTube | Instagram

#javanoscript #trcks

* حذف آیتم از Object داخل جاوااسکریپت *

برای حذف یک آیتم از آبجکت داخل جاوااسکریپت میتونید از عملگر delete استفاده کنید.

نحوه استفاده ازشم به این شکل هست که ابتدا عملگر delete رو مینویسید و بعد از اون property که میخواهید حذف کنید رو از آبجکت مد نظرتون سلکت میکنید طبق مثال زیر 👇👇👇

const user = {
   firstName: "Ali",
   lastName: "Asadi",
   email: "coolycode.dev@gmail.com"
}

delete user.email

console.log(user) // -> { firstName: "Ali", lastName: "Asadi", }

Channel | YouTube | Instagram