اگه بخوایم بین عناصر مشخصی از المنت هامون داخل فلکس باکس فاصله بدیم باید از مارجین آتو استفاده کنیم. بریم توی این ویدیو ببینیم چطور میشه انجامش داد.

https://www.instagram.com/reel/C-5opH3tLa1/?igsh=dXRqZm95NGFoOTRv

#آموزش_وب #توسعه_وب #فرانت_اند #سی_اس_اس #اچ_تی_ام_ال #ری_اکت #فلکس_باکس #مارجین_آتو

احتمالا با متدهای ارایه در جاوااسکریپت آشنا هستین. بیاین چن تا از مهم ترینشون رو در قالب مثال های ساده یاد بگیریم. 🐇🐢

#آموزش_وب #توسعه_وب #فرانت_اند #جاوااسکریپت #آرایه #ری_اکت

توی وی اس کد خیلی مهمه که ما به تب هایی که باز داریم دسترسی راحتی داشته باشیم. توی این ویدیو دو تا نکته راجع به تنظیمات تب ها در وی اس کد یاد میگیریم که دسترسیمون به تب ها رو راحت تر کنه.

https://www.instagram.com/reel/C--iOAntGme/?igsh=MTM2ODZqY242eW44cA==

توی این ویدیو با استفاده از تیلویند یه تولتیپ خفن میسازیم. چن تا نکته مهم توی ویدیو اموزش داده میشه حتما تا اخر ویدیو رو ببینین.

https://www.instagram.com/reel/C_GDZ2-tVUP/?igsh=MXhnMWdjdDkyZ3JqaQ==

#آموزش_وب #توسعه_وب #فرانت_اند #سی_اس_اس #اچ_تی_ام_ال #ری_اکت #تیلویند

کدهای تولتیپ آموزش داده شده در ویدیو:

<div>
  <MdOutlineInfo className="peer [anchor-name:--info] text-4xl text-green-600 cursor-pointer mx-auto" />
  <div className="peer-hover:visible invisible [position-anchor:--info] fixed left-[anchor(50%)] top-[anchor(100%)] translate-x-[-50%]">
    <div className="border-8 border-b-green-200 border-transparent w-2 mx-auto"></div>
    <p dir="rtl" className="bg-green-200 text-green-900 p-2 rounded">
      توسعه وب رو با ما راحت تر یاد بگیرین!
    </p>
  </div>
</div>

یه نکته ای که در مورد بریک پوینت ها در تیلویند وجود داره اینه که ما میتونیم ماکسیمم هم بهشون بدیم. مثلا بگیم از اس ام تا ال جی این کلاس رو اعمال کن. 🙌🏻

https://www.instagram.com/reel/C_IxSfjti6Z/?igsh=emI5cHpzam1ueGRx

توی این ویدیو یاد میگیریم چطور به المنتمون با استفاده از تیلویند یه سایه دلخواه با رنگ دلخواه بدیم. و اینکه چطوری از رنگ های پیش فرض تیلویند داخل اون سایه استفاده کنیم.

https://www.instagram.com/reel/C_Nn7aTN3r7/?igsh=MXIzeHY2aW5qeGE0eA==

ویدیو جدید در مورد استیت ها در ری اکت در یوتیوب منتشر شد.

https://youtu.be/5yOvnAtLZXc

جاستیفای آیتم و الاین آیتم توی سی اس اس گرید هر ایتم رو به صورت جداگانه در نظر میگیره و اون رو توی اون فضایی که اون آیتم داره چیدمان میکنه.

https://www.instagram.com/reel/C_WA-ZXttvz/?igsh=end2bWswNXZhNTln

ولی جاستیفای کانتنت و الاین کانتنت همه آیتم ها رو در نظر میگیره و همه اونها رو توی فضای کل گیرید چیدمان میکنه.

https://www.instagram.com/reel/C_SqDLDt6SA/?igsh=MXZuZ3FoaWF0MXhxcw==

توی این ویدیو یاد میگیریم چطور به آرایه ها توی جاوااسکریپت عنصری اضافه یا حذف کنیم، یا اون عنصر رو آپدیت کنیم. این موضوع مخصوصا در مدیریت استیت هایی که آرایه هستن در ری اکت خیلی اهمیت داره و باید خوب یاد بگیریمشون.

https://www.instagram.com/reel/C_dvVuQtSjl/?igsh=MTJjN3dvb2w0NW9lbw==

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

https://www.instagram.com/reel/C_3u6sPiU4a/?igsh=cndzNWI5NGZxdmVu

ویدیو جدید در مورد یادگیری استیت ها در ری اکت با استفاده از مثال کاربردی تودو لیست در یوتیوب منتشر شد. 🎉

توی این ویدیو از یه فرمت جدید استفاده شده، حتما نظرتون رو در مورد فرمت جدید توی کامنت ها بگین. 🙏🏻🌹

https://youtu.be/XIEYmCfiYbQ?si=zJpnJNzTgTfz0O3Z

فلوئید تیلویند یه پلاگین خیلی عالی برای تیلویند هست که ما رو توی طراحی ریسپانسیو خیلی کمک میکنه و میزان کلاسهامون رو به طور چشمگیری کاهش میده. حتما این ویدیو رو ببینین تا باهاش آشنا بشین و توی پروژه هاتون ازش استفاده کنین.


https://www.instagram.com/reel/C__FcB_i_VZ/?igsh=NGJqcTBrZHIzdnU2

توی این ویدیو با هوک یوز ترنزیشن در ری‌اکت آشنا می‌شیم و یاد می‌گیریم چطور می‌تونیم ازش استفاده کنیم تا تجربه کاربری بهتری در پروژه‌هامون ایجاد کنیم. با یک مثال عملی نشون می‌دیم که چطور می‌تونیم آپدیت‌های رندر رو بهینه کنیم و عملکرد رابط کاربری رو حتی در هنگام پردازش‌های سنگین بهبود بدیم.


https://youtu.be/f-zesSj8Z-U

#آموزش_وب #توسعه_وب #برنامه_نویسی #آموزش_برنامه_نویسی #برنامه_نویسی_وب #فرانت_اند #جاوااسکریپت #ری_اکت #هوک #یوز_ترنزیشن

در این ویدیو به بررسی دقیق دلیل رندر شدن کامپوننت‌ها در ریکت می‌پردازیم و مدل ذهنی پشت پرده این کتابخانه محبوب رو بررسی می‌کنیم. یاد می‌گیریم که ریکت چطور وضعیت کامپوننت رو مدیریت می‌کنه و چه زمانی تصمیم می‌گیره که نمای کاربری رو به‌روزرسانی کنه. همچنین به مباحثی مثل اسنپ شات، رندر اولیه و رندر مجدد پرداخته و مثال‌های کاربردی رو مرور می‌کنیم. اگر می‌خواهین درک بهتری از نحوه کار ریکت و بهینه‌سازی عملکرد رندرها داشته باشین، حتماً این ویدیو رو تماشا کنین!

https://youtu.be/te8nZvy7D2Q?si=aeddbonrxI77NGbx


#آموزش_وب #توسعه_وب #برنامه_نویسی #آموزش_برنامه_نویسی #برنامه_نویسی_وب #فرانت_اند #جاوااسکریپت #ری_اکت #رندر

توی این ویدیو یاد می‌گیریم چطور یک اینپوت سفارشی در ری‌اکت با استفاده از تیلویند بسازیم که شامل آیکون و پیام خطا باشد. در این روش از سی اس اس گرید استفاده می کنیم که به سادگی میتونیم آیکون و خطامون رو داخل اینپوت چیدمان کنیم.

https://www.youtube.com/watch?v=tXBG37GSyGs

#آموزش_وب #توسعه_وب #برنامه_نویسی #آموزش_برنامه_نویسی #برنامه_نویسی_وب #فرانت_اند #سی_اس_اس #اچ_تی_ام_ال #ری_اکت #تیلویند #جاوااسکریپت #گرید

توی این ویدیو یاد میگیریم چطور یک کامپوننت آپلود عکس در ری‌ اکت بسازیم که بتونیم بعد از انتخاب فایل، پیش‌نمایش اون رو ببینیم. با استفاده از کتابخانه تیلویند و ری‌ اکت، به سادگی این قابلیت را پیاده‌ سازی می‌کنیم. اگه میخواین قابلیت آپلود عکس و پیش نمایش اون رو به پروژه هاتون اضافه کنین، حتما این ویدیو رو ببینین.

https://www.youtube.com/watch?v=qOgVkdpSQgM

#آموزش_وب #توسعه_وب #برنامه_نویسی #آموزش_برنامه_نویسی #برنامه_نویسی_وب #فرانت_اند #سی_اس_اس #اچ_تی_ام_ال #ری_اکت #تیلویند #جاوااسکریپت #آپلود #پیش_نمایش

کد کامپوننت آپلود که در ویدیو پیاده سازی کردیم:

'use client'
import { cn } from '@/lib/utils'
import { Label } from './label'
import Image from 'next/image'
import { useState } from 'react'
import IconImage from '../icons/icon-image'

export default function Upload() {
  const [imageSrc, setImageSrc] = useState<string | null>(null)

  function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file) return
    setImageSrc(URL.createObjectURL(file))
  }

  return (
    <div className="flex flex-col sm:flex-row sm:items-center gap-6 ">
      <Label
        className={cn(
          'relative rounded-xl overflow-hidden aspect-square max-w-48 cursor-pointer p-6',
          imageSrc ? 'bg-black' : 'bg-light-purple',
        )}
      >
        {imageSrc && (
          <Image
            src={imageSrc}
            alt="uploaded image"
            className="absolute inset-0 object-cover object-center z-0 h-full w-full opacity-75"
            width={48}
            height={48}
          />
        )}
        <span
          className={cn(
            'z-10 relative grid place-content-center place-items-center justify-center h-full gap-2',
            imageSrc ? 'text-white' : 'text-purple',
          )}
        >
          <IconImage />
          <span className="text-heading-s">{imageSrc ? 'Change Image' : '+ Upload Image'}</span>
        </span>
        <input accept="image/*" type="file" className="hidden" onChange={handleInputChange} />
      </Label>
      <p className="text-body-s text-gray">
        Image must be below 1024x1024px. Use PNG or JPG format.
      </p>
    </div>
  )
}