وقتی برنامه نویسی و تولید محتوا ام میکنی ساعت انتشار ویدیو هات 😂😂😂 :

#javanoscript #video

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

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

Channel | YouTube | Instagram

کد های 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