بررسی آنلاین کد NodeJS 🆒

🌐 سایت RunKit یه ابزار آنلاین فوق‌العاده برای برنامه‌نویس‌های Node.js هست که توش می‌تونی خیلی سریع و راحت کدهای Node.js رو تست و اجرا کنی. فکر کن مثل یه دفترچه یادداشت آنلاین هست که هر وقت خواستی می‌تونی کد بزنی و همونجا نتیجه‌اش رو ببینی! و صد البته که به npm هم دسترسی دارین ⚡️

💎یک سایت با همین کاربرد ولی برای زبان های مختلف توی این پست معرفی کردیم

🔗 Runkit

#runkit #nodejs
☕️ @CodeExplore

👋در ادامه مباحث TailwindCss رسیدیم به جایی که دیگه نصب و راه اندازی شده و امروز میخایم یکم باهاش کار کنیم تا بفهمیم داره چه اتفاقاتی میوفته، یسری استایل و کلاس های مربوط به اندازه هارو در ادامه باهم بررسی میکنیم

💥خب اولین بحث درباره اندازه های تیلویند هستش که واحد های مخصوص خودشو داره و اومده لیست عظیمی از اندازه های پر استفاده رو برامون قرار داده، واحد های اندازه تیلویند اینطوریه که هر واحد میشه 4 پیکسل و 0.25rem که خب میتونین هروقت خاستین با یه فرمول ساده درش بیارین، یعنی واحد تیلویند رو ضرب در 4 کنین میشه اندازش به پیکسل و اگرم اون پیکسل رو تقسیم بر 16 کنین، واحدش برای rem به دست میاد
دقت کنین که اندازه های صرفا واحد هایی هستن که میگیم و میشه برای اکثر کلاس های مربوط به اندازه استفاده کرد، مثلا عرض و ارتفاع و...

حالا این اندازه های چطورین؟ برای مثال :

class="w-0"

اینجا داریم به width اندازه 0 رو میدیم که معلومه اصن، ولی

class="w-4"

اینجا دیگه این المنت ما میاد عرض 16 پیکسل میگیره یا همون 1rem
اگرم از خود size استفاده کنین، عرض و ارتفاع رو میده:

class="size-24"

البته برای تعیین اندازه ها برای ارتفاع میتونیم از h استفاده کنیم، و اینم بگم که اگه بخایم 1 پیکسل اندازه بدیم از کد زیر استفاده میکنیم:

class="h-px"

اینجا px یعنی یک پیکسل

⚡️حالا ما ممکنه بخایم اندازه auto بدیم، یا حتی درصد بدیم، یا اینکه از موارد دیگه استفاده کنیم، خدمت شما:

w-full //100%
w-screen //100vw
v-svw //100svw
w-lvw //100lvw
w-dvw //f100dvw
w-min // min-content
w-max // max-content
w-fit // fit-content
w-1/2 // 50%
w-1/4 // 25%
w-auto

دقت کنین این اندازه های فقط مختص به w یا همون width نیستش! صرفا داریم مثالش رو با این میزنیم

◀️حالا بریم سراغ بحث min , max و بررسیش کنیم، اینجا دیگه خبری از درصد ها مثل 1/4 و... نیست، ما باید برای min و max از اندازه های ثابت استفاده کنیم(البته نه همیشه)
اون واحد های پیکسلی رو که داریم و سر جاشونن
علاوه بر اون ها موارد px , full , min , max , fit رو داریم (تا اینجا برای min-w و max-w مشترک)
اما اما برای max-width که بشه همون max-w ما یسری موارد برای سایزهای مختلف رو داریم که مثل حالت رسپونسیو هستن البته با جزئیات بیشتر ( یعنی اندازه های ریز تر)
دقت کنین:

max-w-xs //320px
max-w-sm //384px
max-w-md //448px
...
max-w-7xl //1280px

max-w-prose //65ch
max-w-screen-sm //640px
...
max-w-screen-2xl //1536px

✨الان من یه مثال کوچیک میزنم برای کار با این اندازه ها و دقت کنین کلاس های اضافه‌ای که هنوز نگفتیم رو زیاد حساس نشین در اینده بهش میرسیم صرفا برای کار با اندازه ها میزنم که خشک نباشه:

<div class="w-24 h-screen max-w-sm min-h-4 max-h-32 border bg-black">
card
</div>

خب دیگه مباحث کلی اندازه های تموم شد و اینکه دقت کنین لیستش خیلی زیاد و بزرگه برای همین داخل لینک های پایین میتونین اینارو کامل ببینین:
🌐https://tailwindcss.com/docs/width
🌐https://tailwindcss.com/docs/max-width
🌐https://tailwindcss.com/docs/size

#tailwind #tailwind_3
☕️ @CodeExplore

منابع خلاقانه و کاربردی Design برای طراحا و برنامه نویسا که میتونید توی طراحی هاتون ازشون استفاده کنید.

🌪 https://github.com/gztchan/awesome-design

#design #awesome
☕️ @CodeExplore

تنظیم هدف، راز داشتن یک آینده گیرا و خوب است.
" Tony Robbins "

#motivational
☕️ @CodeExplore

👌

#fun
☕️ @CodeExplore

سایت مناسب طراحی برای برنامه نویسان ✨

✍️توی این سایت میتونید الگوریتم یا طراحی اولیه سایت و نرم افزارتون رو بکشید و به اشتراک بزارید! تازه برای بعضی از ابزارهاش از هوش مصنوعی هم کمک میگیره!

🔗 Excalidraw

#excalidraw #site
☕️ @CodeExplore

تعریف تابع در یک خط در جاوااسکریپت ✌️

🥸توی این پست میبینید که اجباری نیست توی جاوااسکریپت بنویسید function بعد اسم بعد مقادیر بعد براکت و ...

اینجوری هم میشه تابع نوشت:

const add = (a, b) => a + b;
console.log(add(2, 3)); 
// خروجی: 5

#javascript #js #trick
☕️ @CodeExplore

🟢سایت httpbin یه ابزار آنلاین خیلی ساده و رایگان برای تست کردن درخواست‌های HTTP هست. میتونید با استفاده از این سایت، درخواست‌های مختلف مثل GET POST و ... رو بفرستید و ببینین سرور چه جوابی میده. این کار باعث میشه راحت‌تر مشکلات API ها رو پیدا و رفع کنید.

به طور خلاصه این سایت به درد هر کسی می‌خوره که می‌خواد بفهمه درخواست‌های اینترنتی چطور کار می‌کنن و چطوری میشه باهاشون کار کرد 💡

🔗 httpbin.org

#http #request #tools
☕️ @CodeExplore

☄️سلام عزیزای دلم امروز میخایم در ادامه مباحث TailwindCss به موضوع Spacing ها بپردازیم

خب اول اینکه منظور از Spacing ها همین فاصله ها هستن که شامل padding و margin و یه مبحث جدید و مرتبط به تیلویند به اسم Space Between ( که از اسمشم مشخصه چیه ) میشه

⚡️اول از همه برای margin و padding ما جهت های مختلفی داریم، مثلا پدینگی که از همه طرف اعمال بشه میشه همین p و جهت های خاص هم بعد از p میتونیم بزنیم:

p-0
px-0
py-0
ps-0
pe-0
pt-0
pb-0
pr-0
pl-0

دقت کنین به جای 0 میتونین از اون اندازه هایی که جلسه قبل باهم حرف زدیم دربارش استفاده کنین، مثلا : p-24
برای مارجین هم دقیقا به همین صورته فقط به جای p از m استفاده کنین

🔥خب حالا spece between چیه داستانش؟ بخاییم خلاصه بگیم اول باید اشاره کنم به اینکه ما داخل css یسری پراپرتی هایی داریم توی دیسپلی های خاصی که فاصله بین ایتم هارو مشخص میکنه، مثلا داخل دیسپلی flex و grid ، ما میتونیم با استفاده از gap بیایم و مشخص کنیم ایتم های ما چقدر از هم فاصله داشته باشن، اما نمیشه به صورت معمولی توی خیلی از دیسپلی ها این gap رو استفاده کرد، خب حالا تیلویند اومده با اضافه کردن space-between کلی کارمون رو راحت کرده و مارو از اینکه بخایم بین ایتم ها فاصله بندازیم و حتما از یسری دیسپلی ها استفاده کنیم راحت کرده!
استفادش خیلی سادس، شما میاین یه جهت و اندازه میدین و تمام، اینم مثالش:

space-y-4
space-x-10

الان این قسمت یعنی ایتم های داخل المنت ما، از محور عمودی یا همون y به مقدار 4 واحد فاصله بگیرن و از محور افقی یا همون x به اندازه 10 واحد، هیچ نیازیم به دیسپلی و این کارا نیست چون اینا با یه سیستم مارجین دهی هندل میشن در اصل

👑یه مثال ببینیم باهم:

    <div class="px-5 mx-auto mt-24 bg-black space-y-5 space-x-5 max-w-sm">
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
        <div class="size-24 bg-red"></div>
    </div>

👋خب این مبحث تیلویند هم تموم شد امیدوارم لذت برده باشین
#tailwind #tailwind_4
☕️ @CodeExplore

🔶 دوستان عزیز دیروز سه ویژگی جدید برای کتابخانه Sliderable اضافه شد.

1️⃣افزودن Autoplay
2️⃣پس از اتمام Autoplay، به حالت پیش فرض باز می گردد.
3️⃣افزودن تنظیمات جاوا اسکریپت

var options = {
   autoPlay: true, // Or false
   autoPlayInterval: 3000, // Autoplay interval in milliseconds
   swipeThreshold: 50, // Minimum swipe distance in pixels
};

Developer : @RaymondDev

#library #bootstrap
☕️ @CodeExplore

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

👉 https://glitch.com

#programming #interactive
☕️ @CodeExplore

یعنی باید با بیل بیوفتی دنبالشونا 😒

#fun
☕️ @CodeExplore

مرورگر مخصوص برنامه نویسا 💥

☄️مرورگر Polypane یه مرورگر خاص برای توسعه‌دهندگان وب هست که ابزارهای زیادی برای طراحی واکنش‌گرا (responsive) و تست سریع وب‌سایت‌ها ارائه می‌ده. این مرورگر به شما کمک می‌کنه که وب‌سایت‌هاتون رو در اندازه‌ها و دستگاه‌های مختلف تست و بهتر کنید.

👀چندتا از ویژگی ها:
1️⃣پیش‌نمایش چندگانه
2️⃣همگام‌سازی کامل
3️⃣نمایش گرید و خطوط راهنما
4️⃣ابزارهای دسترسی‌پذیری
5️⃣نمایش متا تگ‌ها و اطلاعات سئو
6️⃣ابزارهای تست سرعت

🔗 Polypane

#polypane #browser
☕️ @CodeExplore

🟢جایگزین های پیشنهادی ChatGPT برای برنامه نویسا

🔢 GitHub Copilot

🔢 Codeium

🔢 CodeWhisperer

🔢 Tabnine

🔢 Codex

🔢 Intellicode

🔢 AskCodi

شما هم هوش مصنوعی های پیشنهادیتون رو داخل کامنتا بنویسید 🍸

#ai #developer
☕️ @CodeExplore

یکی از دوستان درخواست کرده بود که یک  سایت خفن برای یادگیری Web3 معرفی کنیم و گفتم این کارو انجام بدم و سایت زیر رایگان هست. جدیدا خیلی هارو دیدم که دارن میرن سمت Web3 ❤️‍🔥

🌐 https://learnweb3.io

#پست_درخواستی
#web3
☕️ @CodeExplore

💥بریم واسه یادگیری رنگ‌ ها و استفادشون داخل TailwindCss

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

⚡️هر رنگی ( منظور رنگ های دیفالته ) داخل تیلویند، از 50 و 100 تاااا 900 و 950 درجه بندی داره، مثلا اینطوریه که رنگ قرمز یه همچین درجه هایی داره:

red-50
red-100
red-200
...
red-800
red-900
red-950

✨و شما میتونین از این رنگ ها خیلی جاها استفاده کنین

فرض کنین قراره به متن یه رنگی بدیم، میایم از کد زیر استفاده میکنیم:

class="text-red-500"

یا اگه بخایم به بک گراند رنگ بدیم:

class="bg-green-200"

و کلی چیز دیگه که میتونین داخلش رنگ هارو به کار ببرین

✔️از این لیست میتونین رنگ های تیلویند رو کامل ببینین و حالشو ببرین که چجوری با چشم هاتون بازی میکنه:
🌐https://tailwindcss.com/docs/customizing-colors

اما خب برای اینکه مبحث رنگ ها زیاد طولانی نبود میخایم راجب یه سینتکس خیلی قشنگ و جمع و جور داخل تیلویند صحبت کنیم که خیلی انعطاف زیادی به ما میده🌟
ببینین دوستان شما میتونین مقدار هایی که حتی داخل خود تیلویند نیست و کانفیگ هم نشده رو داخل کلاس همینطوری بنویسین
مثلا فرض کنین اندازه 5 پیکسل داخل خود تیلویند نیست ولی من یه المنت دارم که 5 پیکسل عرض میخاد، میام داخل [] مقدارمو میدم، اینطوری:

class="w-[5px]"

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

یا فرض کنین یه رنگی میخام که داخل تیلویند نیست:

class="bg-[#123456]

به همین راحتی!🤩

#tailwind #tailwind_5
☕️ @CodeExplore

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

🔗therenegadecoder.com/code/python-code-snippets-for-everyday-problems/

#python
☕️ @CodeExplore

درجه سختی زبان ها ⭐

⚫️بنظرتون جدی سی شارپ از جی اس ساده تره؟ از کاتلین چی؟ مقایسه اش درست انجام شده؟ بنظر خودم که فقط پایتون و سی پلاس پلاس جاشون درسته 🙂

#programming
☕️ @CodeExplore

🫢

#fun
☕️ @CodeExplore

📌همه میدونیم که Css3 هنوز داره اپدیت میشه و هی چیزای جدیدی بهش اضافه میشه، و خب جدیدا شنیدم که نستینگ ( Css nesting ) هم به خود Css اضافه شده، ( یعنی یکی از بزرگ ترین امکاناتی که Sass داشت برامون فراهم میکرد دیگه داخل خود Css موجوده، ولی با سینتکس متفاوت

الان شما دیگه راحت میتونین به صورت نستینگ استایل بدین:

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

یا حتی هاور و سلکتور های دیگه:

.parent-rule {
  /* parent rule properties */
  :hover {
    /* child rule properties */
  }
}

بخایم یکم عمیق تر بشیم داخلش، الان & اشاره داره به همون کلاس پرنت، یعنی تو هر مرحله، اشاره میکنه به کلاس بالاییش، الان این کد رو در نظر بگیرین:🌟

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

🔥این کد در اصل داخل مرورگر اینطوری میشه:

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

حیفه یه مثال ازش نبینیم:😠

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

⚡️یه نکته خفن اینکه اگه از & داخل nested style ها استفاده نکنیم خب به چی اشاره میکنه؟ جوابش میشه اسکوپ اصلی! همون scoping root
مثلا:

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

/* & => :scope */

✔️و طبق جدولی که درباره ساپورت مرورگر ها راجبش دیدم، اینطوریه که همه مرورگرا کاملا ساپورتش میکنن و مشکلی نداره ولی خب مربوط به نسخه میشه که چند تاشونو مینویسم:
-Chrome: 120
- Edge: 120
-Firefox: 117
-Opera: 106

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

#css #css_nesting
☕️ @CodeExplore