NEW BOT Телеграм, страница - 53866756

InstaDevs

1.13K subscribers

694 photos

436 videos

2 files

675 links

یه عده برنامه نویسیم، برنامه خاصیم نداریم

Download Telegram

About

Blog

Apps

Platform

1.13K subscribers

This media is not supported in your browser

VIEW IN TELEGRAM

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 2 -

Channel | Group | YouTube

👍11❤2😁2👀1

877 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 16:30

تجربه اشو داشتین؟🗿

#meme_image

Channel | Group | YouTube

🗿17👍6

734 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 06:30

This media is not supported in your browser

VIEW IN TELEGRAM

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 3 -

Channel | Group | YouTube

👍6

813 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 11:30

فیچر های جدید CSS از 2023 ---> تا 2024 -پارت 2- 2- اندازه ویوپورت یکی از مسائل طولانی‌مدت تو CSS، ناپیوستگی واحدهای ویوپورت ("vh"، "vw"، و غیره) تو مرورگرها و دستگاه‌های مختلف بوده. واحدهای پویای ویوپورت تو CSS، اینجا حل این مسأله رو بر عهده گرفتن، با این…

3_Transforms

تبدیل‌ها در CSS فیچر جدیدی نیستن، اما چیز جالب اون، قابلیتیه که به شما اجازه می‌ده تا تبدیل‌هایی مثله "translate"، "rotate" و "scale" را با روش‌های پیچیده‌تری از قبل ترکیب کنین. این موضوع صد البته برای انیمیشن‌ها و ترانزیشن‌های پیچیده خیلی حیاتیه. داشتن کنترل بیشتر روی تبدیل‌های جداگونه مثله "rotate"، "translate" و "scale" واقعاً امکاناتتون رو گسترش می‌ده، از تأثیرات پارالاکس بهتر تا انیمیشن‌های روونتر. توابع جدید مانند "rotate3d" و به‌روزرسانی‌هایی برای "matrix" و "matrix3d" این کارها رو حتی آسونتر و انعطاف‌پذیرتر از قبل میکنن. این معنیش اینه که می‌تونین انیمیشن‌های پیچیده‌ای بسازین اونم بدون اینکه بیش از حد به JavaScript یا کتابخانه‌های دیگر وابسته باشین!

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

@keyframes rotateAnimation {

  from {

    transform: rotate3d(1, 1, 1, 0deg);

  }

  to {

    transform: rotate3d(1, 1, 1, 360deg);

  }

}

.box {

  width: 100px;

  height: 100px;

  background-color: red;

  animation: rotateAnimation 2s infinite linear;

}

#CSS

Channel | Group | YouTube

👍7👀1

800 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 16:45

This media is not supported in your browser

VIEW IN TELEGRAM

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 4 -

Channel | Group | YouTube

👍9

773 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 06:30

تازه از --c هم استفاده میکنم🗿

#meme_image

Channel | Group | YouTube

🤣29👍1

986 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 11:30

فیچر های جدید CSS از 2023 ---> تا 2024

-پارت آخر-

اضافه شدن Nesting!
این ویژگی سالها تو Sass بوده ولی حالا...
بالاخره به css اومده😎 .

👨‍💻 با استفاده از این ویژگی بالاخره میتونیم سلکتورهای فرزند رو داخل سلکتورهای والدینشان گروه بندی کنیم!

🧑‍💻 به جای سلکتوری مثله "والد .فرزند"، می‌تونین "فرزند" رو داخل "والد" بزارین!

به عنوان مثال برای استایل دهی به یه کارت داریم:

.card {
    /* استایل‌های کارت */
}

.card:hover, 
.card:focus {
    /* استایل‌های اصلاحگر */
}

حالا بیاین از Nesting استفاده کنیم 🔥:

.card {
    /* استایل‌های کارت */
    &:hover,
    &:focus {
        /* استایل‌های اصلاحگر */
    }
}

Channel | Group | YouTube

🔥14👍3

860 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 16:30

This media is not supported in your browser

VIEW IN TELEGRAM

موس رو کنار بزار!

شرت‌کات های VS Code
- پارت 5 -

Channel | Group | YouTube

🔥3

897 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 06:30

میدونستین با html میتونین ایموجی به صفحه تون اضافه کنین؟🤔

#HTML

Channel | Group | YouTube

👍9🔥2🏆1🤨1

1.04K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 11:30

دوستان چیت شیت مقادیر مختلف Transform تو CSS 😎

#CSS
شیر فراموش نشه❤️

Channel | Group | YouTube

🔥9👍1

1.12K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 16:55

آقا چیت شیت دوس دارین؟
این بار چیت شیت Background ها رو براتون آوردم 😎

#CSS
شیر فراموش نشه❤️

Channel | Group | YouTube

❤21👍2🔥2👀1

949 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 06:40

This media is not supported in your browser

VIEW IN TELEGRAM

بالاخره اعتماد به نفس حرف اولو میزنه🗿💪

#meme_video

Channel | Group | YouTube

🤣11😁4🍾2

964 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 11:48

این مقادیر و پراپرتی های css grid رو من همیشه فراموش میکنم💔

من که ذخیره کردم...شمام ذخیره کنین باشد که به یاد بسپاریم😎

#CSS_Grid

Channel | Group | YouTube

👍17👌1

1.4K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 18:09

سال ۱۴۰۲ هم به زودی تموم میشه...

راستشو بگید، از عملکرد خودتون امسال راضی بودید؟

👍25🥴7💔3🍾3👀1

1.12K viewsMehrshad, edited 18:57

سودو کلاس چیت شیت...
چه به هم میان کلمات، نه؟😎
#CSS

Channel | Group | YouTube

👍14

1.08K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 06:30

قبلا شرتکات های VS Code رو براتون پارت به پارت قرار دادیم.👌
اما خب گفتیم جمع بندی کنیم بد نیست 😎

Channel | Group | YouTube

👏9👍4

1.27K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 10:33

خیلی از وقتا باگها تنها فقط به این دلیل به وجود میان که ما از مفاهیم پایه درک درست یا حداقل کاملی نداریم. 💔

👌 میشه گفت Css Box Model یکی از اون مفاهیم کلیدی هستش که تو استایل دهی خیلی بهتون کمک میکنه و خیلی مهمه که درست درکش کنین.

#CSS

Channel | Group | YouTube

👍8

1.54K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 17:07

چیت شیت فونت ها، بریم ببینیم که واسه فونتامون چه استایلایی داریم؟
#CSS

Channel | Group | YouTube

👍9

1.59K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 06:31

Alexander Rybak - Fairytale (320)

عصرتون بخیر❤️

رفقا عیدتون ایشالا عیدتون پر از استایلهای fixed باشه تا آخر سال، امیدوام بتونین Background هاتون رو به زیبایی تموم بسازین.

👨‍💻و در نهایت css یا html مورد نظرتون بهتون 200 رو response بده. 😅

خلاصه که خوش بگذره، با قدرتی بیش از پیش پیشتون برمیگردیم...✌️👋

Channel | Group | YouTube

❤14👀3🤣2

1.59K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 14:04

Media is too big

VIEW IN TELEGRAM

آقا همین اول کار بگم که عیدی آوردم🗿
یکم دیره ولی خب نیت مهمه 💔😎
وقته عمل کردن به قولامونه...

-- تو این ویدیو سعی کردم به سادگی هرچه تمامتر نصب TailwindCSS رو براتون توضیح بدم. --

👨‍💻میدونم که خیلیاتون با نصب تیلویند و ست آپ کردنش مشکل دارین و گاها بعد مدتی دوباره یه ویدیو ای آموزشی چیزی براش میبینین، اما بهتون قول میدم، اگه که این ویدیو رو خوب ببینید، به آموزش دیگه ای برای نصب تیلویند نیازی ندارین👌😱

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

پ.ن ۲: اگه هر انتقادی داشتین از آموزش از ویدیو از چنل یا از هرچیز دیگه ای خوشحال میشم که بهم بگین😍❤️

پ.ن ۳: ادامه ی این روند دوستان بستگی به حمایت های شما عزیزان داره🥹....پس بترکونین ریکشنا و شیر رو...حالا دیگه ادامه کار دست شماست🫡
مخلص شما هتمل🗿
#Tailwind

Channel | Group | YouTube

🔥21❤1

1.31K views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, edited 15:30

برید کنار انیمیشنی نشید🗿
چیت شیت انیمیشن😎
#CSS

Channel | Group | YouTube

🔥12👍4

937 views<𝘴𝘱𝘢𝘯 𝘥𝘢𝘵𝘢-𝘵𝘺𝘱𝘦="𝘩𝘶𝘮𝘢𝘯" 𝘰𝘯𝘴𝘩𝘰𝘸="𝘥𝘢𝘯𝘤𝘦()" 𝘴𝘵𝘺𝘭𝘦="𝘥𝘪𝘴𝘱𝘭𝘢𝘺: 𝘨𝘳𝘦𝘦𝘥!" ᴄʟᴀꜱꜱ="𝘱𝘴𝘺𝘤𝘩𝘰𝘭𝘰𝘨𝘺" >𝘈𝘭𝘪<𝘴𝘱𝘢𝘯 >, 05:51