کداکسپلور | CodeExplore

🚨 شروع ثبت نام دوره جامع بازاریابی تحلیلی با پایتون 🔰 ویژه مدیران، فارغ التحصیلان و علاقه مندان به حوزه مارکتینگ و پایتون 🔰 اعطای گواهینامه قابل ترجمه از سازمان جهاد دانشگاهی صنعتی شریف • پس از گذراندن این دوره چه توانایی هایی خواهید داشت؟ 📌 تصمیم‌گیری داده‌محور و دقیق‌تر در استراتژی کمپین های بازاریابی 📌 افزایش توانایی در پیش‌بینی و تحلیل روندها 📌 استفاده از ابزارهای مدرن و کاربردی 📌 بهبود کارایی و بهره‌وری تیم بازاریابی • مزیت های دوره: ❌ پشتیبانی ویژه پس از انتهای دوره ❌ ❌ دسترسی به ویدئو های ضبط شده پس از انتهای هر جلسه ❌ 💡 اطلاعات بیشتر از طریق لینک زیر: 📎 t.me/+Efe-sgfXhbQ4MTFk ⬅️ 💬 مشاوره رایگان: 🆔 @JDSL55

🔶 دوستان عزیز دیروز سه ویژگی جدید برای کتابخانه 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

💥 فرصت برنامه‌نویس شدن رو از خودت نگیر! 💯 با ورود به بخش "آموزش رایگان برنامه‌نویسی" در پنل کاربری ‌خودتون در سایت مکتب شریف، می‌تونی مقدمات برنامه‌نویسی رو راحت و رایگان یاد بگیری و آمادۀ ورود به دنیای برنامه‌نویسی بشی. 🟢 جهت راهنمایی بیشتر فیلم رو حتما ببینید. 🔔 ورود با لینک مستقیم ➡️ و یا برای کسب اطلاعات بیشتر کافیه به آی‌دی ما پیام بدی! 🔽‌‌‌‌ 💬 @MaktabSharif_Admin ▪️▫️▪️▫️▪️▫️▪️▫️▪️▫️ 🌐 وبسایت |💬 کانال تلگرام |🌐 اینستاگرام

☄️سلام عزیزای دلم امروز میخایم در ادامه مباحث 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

🟢سایت httpbin یه ابزار آنلاین خیلی ساده و رایگان برای تست کردن درخواست‌های HTTP هست. میتونید با استفاده از این سایت، درخواست‌های مختلف مثل GET POST و ... رو بفرستید و ببینین سرور چه جوابی میده. این کار باعث میشه راحت‌تر مشکلات رو پیدا و رفع کنید. به طور خلاصه این سایت به درد هر کسی می‌خوره که می‌خواد بفهمه درخواست‌های اینترنتی چطور کار می‌کنن و چطوری میشه باهاشون کار کرد 💡 🔗 httpbin.org #http #request #tools ☕️ @CodeExplore

تعریف تابع در یک خط در جاوااسکریپت ✌️ 🥸توی این پست میبینید که اجباری نیست توی جاوااسکریپت بنویسید function بعد اسم بعد مقادیر بعد براکت و ... اینجوری هم میشه تابع نوشت:

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

#javascript #js #trick ☕️ @CodeExplore

سایت مناسب طراحی برای برنامه نویسان ✨ ✍️توی این سایت میتونید الگوریتم یا طراحی اولیه سایت و نرم افزارتون رو بکشید و به اشتراک بزارید! تازه برای بعضی از ابزارهاش از هوش مصنوعی هم کمک میگیره! 🔗 Excalidraw #excalidraw #site ☕️ @CodeExplore

👌 #fun ☕️ @CodeExplore

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

منابع خلاقانه و کاربردی Design برای طراحا و برنامه نویسا که میتونید توی طراحی هاتون ازشون استفاده کنید. 🌪 https://github.com/gztchan/awesome-design #design #awesome ☕️ @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

بررسی آنلاین کد NodeJS 🆒 🌐 سایت RunKit یه ابزار آنلاین فوق‌العاده برای برنامه‌نویس‌های Node.js هست که توش می‌تونی خیلی سریع و راحت کدهای Node.js رو تست و اجرا کنی. فکر کن مثل یه دفترچه یادداشت آنلاین هست که هر وقت خواستی می‌تونی کد بزنی و همونجا نتیجه‌اش رو ببینی! و صد البته که به npm هم دسترسی دارین ⚡️ 💎یک سایت با همین کاربرد ولی برای زبان های مختلف توی این پست معرفی کردیم 🔗 Runkit #runkit #nodejs ☕️ @CodeExplore

ترکیب دو لیست در پایتون ⌨️ اگر میخواستین دوتا لیست رو با هم توی پایتون ادغام کنید، چیکار میکردید؟

l1=[1,2,3]
l2=[4,5,6]
for i in l2:
   l1.append(i)

درسته؟ خب ولی بیاین با اضافه کردن یک کتابخونه یکم کارمونو سریعتر پیش ببریم...

import itertools

chain = itertools.chain([1, 2, 3], [4, 5, 6])
l1=list(chain)

💬نظرتون چیه؟ استفاده از کتابخونه خوبه؟ #python #trick #list #itertools ☕️ @CodeExplore

تولید داده های لیستی رندوم ⁉️ ❓ تا حالا شده سر ساخت داده های رندوم برای sql یا json,xml,csv یا ... به مشکل بخورید و ازتون وقت بره؟ 👑این سایت بهتون داده های رندوم توی تایپای مختلف میده و میتونید فرمت های مختلف(از جمله فرمت هایی که نام بردم) رو استفاده کنید! 🔗 Mockaroo #mockaroo #data ☕️ @CodeExplore

ارور>>>داکیومنت #fun ☕️ @CodeExplore

هنگامی که فرد عادت به تعیین اهداف و دستیابی به آنها داشته باشد، به نصف پیروزی و موفقیت در رسیدن به هدف دست یافته است. " Og Mandino " #motivational ☕️ @CodeExplore

منبعی کاربردی برای آموزش زبان برنامه نویسی Go با مثال های ساده و متنوع در حوزه های مختلف 🔗https://gobyexample.com 🌪 https://github.com/mmcgrana/gobyexample #go #example #tutorial ☕️ @CodeExplore

🔥بریم سراغ آموزش های Tailwind و سعی کنیم هم نصبش کنیم هم یسری مباحث پایه رو پیش ببریم ☄️خب اول از همه برای اینکه تیلویند رو روی پروژمون نصب و استفاده کنیم نیاز به توضیحات من نیست خداییش ولی یه خلاصه ازش میگم: ( دقت کنین فقط توی یه پروژه ساده html css هست بدون استفاده از فریمورک و اگه دارین از فریمورک استفاده میکنین به داکیومنتش که لینکشم میزارم مراجعه کنین) شما اول از همه باید دستورات مربوط به نصبش رو داخل کامندلاین پروژه وارد کنین تا براتون نصب بشه، البته دقت کنین قبلش node.js روی سیستمتون نصب باشه این دستورات برای نصب tailwind :

npm install -D tailwindcss
npx tailwindcss init

با یکم صبر براتون نصبش کامل میشه، البته دقت کنین این کامند ها ممکنه اپدیت شن و بهتره از دایکومنت خود تیلویند بردارین همیشه ✨وقتی که نصب و دانلود تموم میشه باید یسری کانفیگ اسون انجام بدیم، قبلش اینکه یسری فایل ها به پروژتون اضافه میشه و یکیش tailwind.config.js هستش که مربوط به کانفیگ های تیلویند میشه ( از اسمش معلومه اصن من چرا گفتم ) شما داخل این فایل بیاین یسری تغییراتی اعمال کنین، یعنی این محتوا رو داخلش بندازین:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

البته تو فایل دیفالتش هستن فقط ما اینجا content رو اپدیت کردیم که مربوط میشه به اینکه الان این تیلویند ما، چه فرمت هایی رو از چه ادرس هایی بخونه و باهاشون سر و کار داشته باشه ✔️قدم بعدی اینه که بیایم و لایه های مختلف تیلویند رو به پروژه اضافه کنیم، برای این کار نیاز داریم یه فایل css داشته باشیم توی یه ادرس قشنگی که با خروجی های تیلویندمون قاطی نشه، ما میایم داخل پوشه src ، یه فایلی با هر اسمی خاستیم ( حتی این پوشه هم دلخواهه بخدا ) میسازیم، مثلا input.css و داخلش اینارو میزنیم:

src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

خب حالا دیگه کانفیگ هامون حل شه و ما میتونیم از تیلویند استفاده کنیم، فقط یه مسئله هست و اینجا باید تیلویند به صورت لحظه‌ای تغییرات مارو بررسی کنه و هربار استفاده میشه ازش، بیاد کامپایل هارو انجام بده، پس این کامند رو داخل کامندلاین میزنیم ( اون واچ اخرش برای لحظه‌ای بودنه، اگه حذفش کنین هر بار اجرا شه کامپایل رو انجام میده )

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

داخل این قسمت ما داریم میگیم که تیلویند گلم، بیا فایل داخل ./src/input.css رو در نظر بگیر به عنوان استایل های ورودی و خروجیتو داخل ادرس ./src/output.css بریز، حالا دیگه تیلویند ما میاد کامپایل هارو انجام میده و طبق لایه هایی که توی input.css اضافه کردیم کامپایل میکنه به output.css 📣در آخر فقط و فقط نیازه اون فایل خروجی ( اینجا از ما output.css عه ) رو لینک کنیم به html

src/index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

و تمام! شما میتونین تحوه نصب تیلویند و PostCss رو طبق همین کارا و یا توی فریمورک های مختلف از این لینک کامل و جامع مطالعه کنین: 🌐https://tailwindcss.com/docs/installation قبل از اتمام اموزش، درباره اون لایه هایی که اضافه کردیم یکم صحبت کنیم، ببینین دوستان من، تیلویند 3 تا لایه داره به اسم base , components , utilities که هرکدوم یه دسته از تیلویندمون داخلشه، مثلا داخل base ، فونت ها، ریست ها و... وجود داره، یا components میشه همون استایل های مربوط به کامپوننت های تیلویند 👑امیدوارم لذت برده باشین تا اینجا کار #tailwind #tailwind_2 ☕️ @CodeExplore

تست آنلاین و فوری کد 💻 🔺تا حالا شده بخواین سریع و دم دستی یه کدی رو تست بکنین؟ مثلا آخر شبه و یه کد جالبی میخوره به چشمتون،اما سیستم خاموشه و رو گوشی هم کامپایلر یا ادیتور یا ... نیست؛ خب اینجور وقتا این سایت به کارتون میاد! 🔸میتونید توی این سایت آنلاین کدتون رو بنویسید و اجراش کنید و نتیجه رو ببینید! اکثر زبان های معروف رو هم پشتیبانی میکنه با ورژن های مختلف! 🔗 Codechef #codechef #programming #site ☕️ @CodeExplore

‏Flat کردن array در جاوااسکریپت ✌️ 🟣دیدین بعضی وقتا آرایه رو میدن این شکلیه:

let array = [1, [2, 3], [4, [5, 6]]];

و شما میخواین به صورت 1,2,3,4,5,6 باشه! 💡اینجور وقتا به جای اینکه کفرتون در بیاد میتونین این کد رو بنویسید و به آرامش درونتون برگردید:

let array = [1, [2, 3], [4, [5, 6]]];
let flatArray = array.flat(2);  
// [1, 2, 3, 4, 5, 6]

✅اینجور وقتا اصطلاحا یک آرایه پیچ در پیچ یا تو در تو رو، flat کردیم❤️‍🔥 #javascript #js #trick ☕️ @CodeExplore