کد های css استفاده شده داخل این ویدیو :

@import url("https://fonts.googleapis.com/css?family=Montserrat");

      html,
      body {
        height: 100%;
        margin: 0;
        font-family: "Montserrat", sans-serif;
        background: linear-gradient(45deg, #9cb169, #86bf49);
      }

      #container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #card {
        overflow: hidden;
        display: flex;
        justify-content: start;
        align-items: center;
        padding-top: 1vw;
        position: relative;
        background: rgb(23, 22, 22);
        flex-direction: column;
        cursor: pointer;
        transition: transform 0.1s;
        border-radius: 1vw;
        box-shadow: rgb(0 0 0 / 66%) 0 30px 60px 0;
        background: #062743;
      }

      #card,
      #panel-cover {
        width: 16vw;
        height: 48vh;
        width: 15vw;
        height: 42vh;
        width: 16vw;
        height: 20vw;
      }

      #panel-cover {
        position: absolute;
        transition: transform 0.1s;
        transform: perspective(400px) rotateX(0deg) rotateY(0deg);
        transform-style: preserve-3d;
        box-shadow: 1.5rem 2.5rem 5rem 0.7rem rgba(0, 0, 0, 0.13);
        display: flex;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        transition: transform 0.1s ease 0s, width 0.1s ease 0s,
          height 0.1s ease 0s;
      }

      #panel-cover img {
        width: 100%;
        height: auto;
      }

      #panel-container {
        position: relative;

        width: 73%;
        height: 56%;
        overflow: hidden;
        border-radius: 0.3vw;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #darkness-background {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.204);
        box-shadow: inset 0 0 1vw 0.1vw #000000;
        transition: 0.1s;
        z-index: 2;
      }

      #card:hover #darkness-background {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.024);
        box-shadow: inset 0 0 1vw 0.3vw #000000;
      }

      .panel-content {
        color: #fff;
        text-align: start;
        transform: translateZ(80px) scale(0.8);
        transform-style: preserve-3d;
        overflow-wrap: break-word;
        font-size: 2vw;
        align-self: flex-start;
        margin: 1vw 0 0 0.5vw;
      }

      .panel-content .song-noscript {
        text-shadow: -2px 2px 3px #000, -1px 3px 15px #000;
        font-size: 1em;
        font-weight: bold;
      }

      .panel-content .song-artist {
        font-size: 0.6em;
        margin-top: 1vw;
      }

#reactjs #youtube

تو این ویدیو بهتون هوک یوزافکت رو با یه مثال جالب یاد دادم و لیمیت سابمیت فرم رو با یوز افکت هندل کردم برای درک بهتر این هوک که می‌تونه جالب باشه براتون 😁⚡

آموزش کامل هوک یوزافکت در ری‌اکت با مثال کاربردی و مینی پروژه فرم با ولیدشن

Channel | YouTube | Instagram

https://youtu.be/udlqlFd4U7w?si=k2yuYWlC4et0G12B

#libarary #reactjs #javanoscript

● معرفی لایبرری react hook form ●

توی این ویدیو به طور کامل بهتون توضیح دادم که این لایبرری دقیقا چیکار میکنه و چه مزایایی داره ⚡

https://www.instagram.com/reel/C7HCXB4sfK0/?igsh=ZHRjcHVpY2ZrbG92

Channel | YouTube | Instagram

#youtube

کی سریع تر کد میزنه ؟ 😎😂

درسته توی کد زدن سرعت مهم نیست ولی چالش جالبیه که خودمون رو بسنجیم و ببینیم که چقدر سریع میتونیم کد بزنیم 😉

فکر میکنم که تاحالا همچین سبک محتوایی نبوده باشه تا جایی که من گشتم امیدوارم خوشتون بیاد 🤩💪

مشاهده ویدیو

Channel | YouTube | Instagram

#javanoscript #video

یه روش جالب برای هندل کردن دیتای فرم ها، بدون استفاده از ایونت onChange که میتونه خیلی جاها به کارتون بیاد 😉🔥

Channel | YouTube | Instagram

#fun

این بده 😂😂😂

Channel | YouTube | Instagram

#reactjs #youtube

سلام رفقا امیدوارم حالتون خوب باشه 🔥

توی ویدیو یک تودولیست کامل رو با هم دیگه داخل ری‌اکت با استفاده tailwind css پیاده سازی میکنیم که میتونه پروژه تمرینی خیلی خوبی باشه و همچنین برای استفاده شخصی هم ازش استفاده کنید ✅

برای ذخیره سازی تودو‌ها ام از لوکال‌استوریج استفاده میکنیم که کارمون رو خیلی ساده تر میکنه و چند تا تکنیک جالب و مهمم برای ذخیره سازی آرایه و آبجکت داخل لوکال استوریج بهتون گفتم که ممکنه توی پروژه های واقعی به کارتون بیاد ⚡

مشاهده ویدیو

لینک ریپازیتوری پروژه


Channel | YouTube | Instagram

https://youtu.be/XoOIITEyLiw

#tools #website

● معرفی وبسایت Bundlephobia ●

یکی از مهم ترین مسائلی که باید بهش توجه بشه داخل پروژه های جاوااسکریپتی استفاده درست از لایبرری‌های مختلف هستش، چون که به شدت روی پرفورمنس سایت شما تاثیر گذار هستند ⚠️

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

Channel | YouTube | Instagram

#javanoscript

توی خیلی از پروژه ها نیاز داریم که یک عددی رو به قیمت تبدیل کنیم مثل این : 4000 => "4,000"

حالا داخل جاوااسکریپت دیگه نیازی نیست که خودتون فانکشن دستی بنویسید و میتونید خیلی ساده تر و حرفه‌ای تر از متدی که توی این ویدیو بهتون یاد دادم استفاده کنید ⚡

Channel | YouTube | Instagram

کد مناطق مختلف گفته شده در ویدیو

داخل سایت w3scool هم میتونید بیشتر راجب این متد بخونید

https://www.w3schools.com/jsref/jsref_tolocalestring_number.asp

و بالاخره اینم از پروفایل جدید 😎🔥

بریم برای ویدیو جدید 😎⚡

#reactjs #youtube

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

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

داخل این ویدیو قراره که لایبرری محبوب ری‌اکت‌جی‌اس رو با هم دیگه بررسی بکنیم و اولین پروژه خودمون رو ایجاد بکنیم ⚡


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

1️⃣ - ری‌اکت جی‌اس چیه ؟

2️⃣ - ساخت اولین پروژه با Create React App

3️⃣ - ساختار فایل‌ها و کامپوننت‌ها در ری‌اکت

5️⃣ - چگونگی و نحوه‌کار ری‌اکت

6️⃣ - بررسی ساختار کامپوننت ها و ساخت اولین کامپوننت

مشاهده ویدیو

Channel | YouTube | Instagram

https://youtu.be/q-380g_ypHc

#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