ولاگ رویداد هنگ‌اوت دولوپر ها😍💪

هنگ‌اوت دولوپر ها یه کامیونیتی کوچیک که ایونتای زبان انگلیسی برگزار میکنند
برنامه ام به این شکله که اول یه ارائه داریم که ارائه این هفته درباره دیزاین پترن ها بود و بعد از ارائه ام به گروهای ۷،۸ نفره تقسیم میشیم مکالمه آزاد و تخصصی داریم با بچه ها
ویدیو ولاگ برنامه این هفته رو هم میتونید از پیج ایسنتاگرام من تماشا کنید

https://www.instagram.com/reel/C6WWXIMsEGa/?igsh=NHVpdm03dng2bWRi

#NEWPost #vlog

Channel | YouTube | Instagram

#event

بعد از همایش فرانت‌چپتر امسال من تونستم کلی دوستای خفن پیدا کنم و به همین منظور با بچه ها تصمیم گرفتیم که یه دورهمی حضوری بزاریم توی باغ‌کتاب و دیداری تازه کنیم ولی خب داستان به همینجا خطم نمیشه و از اونجایی که خیلی استقبال شد از این دورهمی نزدیک 30 نفر شدیم و از بچه های خود فرانت چپتر هم اومدن پیشمون از شهرای دیگه و خیلی اتفاق خفنی بودش و تمام تلاشمون رو میکنیم که به زودی یه دورهمی حضوری خفن دیگه بزاریم برای برنامه نویسا و همگی باهم به سمت پیشرفت حرکت کنیم و بترکونیم💪

لینک ویدیو دورهمی در یوتوب :
https://youtu.be/sxAq0MYhuc8?si=gJMniOANi0Cri7od

Channel | YouTube | Instagram

#javanoscript #video

حتما برای شما ام پیش اومده که وارد یه وبسایتی میشید و مثلا یه منویی رو باز میکنید ولی به محض اینکه دکمه بک گوشیتون رو میزنید صفحه عوض میشه 😨🤦🏼‍♂️

این اتفاق بخاطر هندل نکردن درست این مسئله داخل کد هستش، حالا توی این ویدیو بهتون یاد میدم که چجوری میتونید این مورد رو با جاوااسکریپت هندل کنید

Channel | YouTube | Instagram

#reactjs #youtube

داخل این ویدیو بهتون یاد دادم که چجوری میتونید بدون استفاده از هیچگونه لایبرری خاصی داخل برنامه ری‌اکتی خودتون دیتای فرم هاتون رو‌ خیلی ساده با چند خط کد جاوااسکریپت مدیریت کنید ⚡️

مشاهده کامل ویدیو داخل‌ چنل یوتوب

مشاهده ریپازیتوری گیت هاب کد های استفاده شده داخل ویدیو

Channel | YouTube | Instagram

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

#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