تنظیم هدف، راز داشتن یک آینده گیرا و خوب است.
" 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

🔵چه ویژگی های جدیدی توی PHP 8.4 اضافه شده؟
توی این پست به ویژگی های جدید و جالبی که توی PHP 8.4 اضافه شده میپردازیم.

‏1. Property Hooks: این ویژگی به شما اجازه میده تا برای خواندن و نوشتن پراپرتی‌ها، هوک تعریف کنید و نیاز به Getter و Setter های تکراری رو از بین می‌بره.

‏2. Array Utility Functions: توابع جدیدی مثل array_find، array_find_key، array_any و array_all اضافه شده که کار با آرایه‌ها رو خیلی راحت‌تر می‌کنه.

‏3. DOM HTML5 Support: کلاس DOM\HTMLDocument اضافه شده که می‌تونه HTML5 رو به درستی پردازش کنه و مشکلات قبلی رو حل کنه.

‏4. Increased Bcrypt Cost: مقدار پیش‌فرض برای هش پسورد با Bcrypt به 12 افزایش پیدا کرده که امنیت پسوردها رو بیشتر می‌کنه.

‏5. Large XML Document Parsing: بهبودهایی در پردازش فایل های بزرگ XML صورت گرفته که دیگه مشکلی پیش نیاد.

‏6. New Multibyte Trimming Functions: توابعی مثل mb_trim، mb_ltrim و mb_rtrim اضافه شده که برای برش دادن رشته‌های چندبایتی استفاده می‌شن و این کار رو خیلی راحت‌تر می‌کنن.

‏7. Method Chaining Without Parentheses: این بهبود اجازه میده تا بدون نیاز به پرانتز اضافی، از متدهای زنجیره‌ای استفاده کنید و کدتون رو ساده‌تر و خواناتر می‌کنه.

‏8. JIT Improvements: بهبودهایی در کامپایلر JIT صورت گرفته که سرعت اجرا رو بالا می‌بره و مصرف حافظه رو کاهش می‌ده. همچنین، نحوه فعال و غیرفعال کردن JIT ساده‌تر شده.

‏9. Implicit Nullable Types Deprecation: رفتار پیش‌فرض که متغیرهای تایپ شده با مقدار پیش‌فرض null رو به صورت ضمنی nullable می‌کرد، حالا deprecated شده و باید به صورت صریح مشخص بشه.

#php #new #feature
☕️ @CodeExplore

سایت bundlephobia چیه؟ ⛔️

🙂ابزار Bundlephobia یه ابزار آنلاینه که به درد توسعه‌دهندگان جاوااسکریپت می‌خوره. وقتی می‌خوای یه پکیج npm رو به پروژه‌ت اضافه کنی، این سایت بهت نشون می‌ده که این پکیج چقدر حجمه و چه تأثیری روی زمان بارگذاری پروژه‌ت داره.

🔗 Bundlephobia

#bundlephobia
☕️ @CodeExplore

⚡️جیگرا بیاین بریم سراغ ادامه مباحث TailwindCss، میخایم وارد کار با فونت و متن ها بشیم شاید طول بکشه و اگه نیاز شد 2 پارتش کنیم

👑خب اول از همه اینکه فونت ها داخل تیلویند خیلی ساده هستن و به صورت دیفالت هم یسری فونت داخل خودش هست، میتونین هم داخل کانفیگ ها هر فونتی خاستین اضافه کنین( رنگ و سایز و.. هم میشه ولی هنوز دربارش صحبتی نکردیم )
خب شما اگه بخاین یه فونت به یه المنت اختصاص بدین روشش اینه:

font-fontName

مثلا

font-serif

بحث بعدی راجب وزن فونت هاس، یعنی همون font-weight که اونم خیلی راحت میتونین استفاده کنین:

font-thin
font-extralight
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

به ترتیب از font weight های 100 تا 900 میره بالا

☄️خب برسیم سراغ اندازه فونت ها یا همون Font Size که اینسری با کلمه font شروع نمیشه به جاش از text استفاده میکنیم
برای اندازه فونت ها میتونین این کلاس هارو به المنتتون اضافه کنین:

text-xs => 12px
text-sm => 14px
text-base => 16px
text-lg => 18px
text-xl => 20px
text-2xl => 24px
...
text-9xl => 128px

البته در نظر داشته باشین این موارد یه line-height هم بهتون میدن نسبت به اندازشون

اما خب ما بخایم رنگ متن هارو عوض کنیم چی؟ خیلی راحت بعد از text بیاین و رنگ مورد نظرتون رو قرار بدین:

text-red-500
text-black
text-white

حالا برای کاستوم کردن text decoration چه کلاسایی داریم؟ خدمت شما:🌟

underline
overline
line-through
no-underline

دیگه اون اضافه هاش توسط تیلویند حذف شده و همین اصل کارش مونده
نکته خفن اینه که میتونین این decoration رو کاستوم کنین، رنگ و استایل بهش بدین مثلا!

decoration-green-800
decoration-solid
decoration-double
decoration-doted
decoration-dashed
decoration-wavy

حتی اصن ضخامتش هم تغییر بدین اصن همچی در اختیارتونه:🦦

decoration-0
decoration-1
decoration-2
decoration-4
decoration-8

اینا هرکدوم بر اساس پیکسله دیگه مثلا 4 میشه 4 پیکسل
برای استایل فونت هاتون هم میتونین از موارد زیر استفاده کنین:

italic 
not-italic

اسمشون معلومه دیگه میان این استایل ایتالیک بودن رو میدن یا نمیدن

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

#tailwind #tailwind_6
☕️ @CodeExplore

🎵3 تا پلی لیست جذاب که موقع برنامه نویسی میتونید گوش بدید.

Coding Mode

Music For Programming

Deep Focus

#programming #playlist
☕️ @CodeExplore