تست آنلاین و فوری کد 💻
🔺 تا حالا شده بخواین سریع و دم دستی یه کدی رو تست بکنین؟ مثلا آخر شبه و یه کد جالبی میخوره به چشمتون،اما سیستم خاموشه و رو گوشی هم کامپایلر یا ادیتور یا ... نیست؛ خب اینجور وقتا این سایت به کارتون میاد!
🔸 میتونید توی این سایت آنلاین کدتون رو بنویسید و اجراش کنید و نتیجه رو ببینید! اکثر زبان های معروف رو هم پشتیبانی میکنه با ورژن های مختلف!
🔗 Codechef
#codechef #programming #site
☕️ @CodeExplore
#codechef #programming #site
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡6🔥4❤🔥2
شما اول از همه باید دستورات مربوط به نصبش رو داخل کامندلاین پروژه وارد کنین تا براتون نصب بشه، البته دقت کنین قبلش node.js روی سیستمتون نصب باشه
این دستورات برای نصب tailwind :
npm install -D tailwindcss
npx tailwindcss init
با یکم صبر براتون نصبش کامل میشه، البته دقت کنین این کامند ها ممکنه اپدیت شن و بهتره از دایکومنت خود تیلویند بردارین همیشه
شما داخل این فایل بیاین یسری تغییراتی اعمال کنین، یعنی این محتوا رو داخلش بندازین:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}البته تو فایل دیفالتش هستن فقط ما اینجا content رو اپدیت کردیم که مربوط میشه به اینکه الان این تیلویند ما، چه فرمت هایی رو از چه ادرس هایی بخونه و باهاشون سر و کار داشته باشه
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
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 رو طبق همین کارا و یا توی فریمورک های مختلف از این لینک کامل و جامع مطالعه کنین:
قبل از اتمام اموزش، درباره اون لایه هایی که اضافه کردیم یکم صحبت کنیم، ببینین دوستان من، تیلویند 3 تا لایه داره به اسم base , components , utilities که هرکدوم یه دسته از تیلویندمون داخلشه، مثلا داخل base ، فونت ها، ریست ها و... وجود داره، یا components میشه همون استایل های مربوط به کامپوننت های تیلویند
#tailwind #tailwind_2
Please open Telegram to view this post
VIEW IN TELEGRAM
Tailwindcss
Installing with Vite - Installation
Integrate Tailwind CSS with frameworks like Laravel, SvelteKit, React Router, and SolidJS.
❤🔥13⚡4🔥2
منبعی کاربردی برای آموزش زبان برنامه نویسی Go با مثال های ساده و متنوع در حوزه های مختلف
🔗 https://gobyexample.com
🌪 https://github.com/mmcgrana/gobyexample
#go #example #tutorial
☕️ @CodeExplore
#go #example #tutorial
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡11🔥3❤🔥1
هنگامی که فرد عادت به تعیین اهداف و دستیابی به آنها داشته باشد، به نصف پیروزی و موفقیت در رسیدن به هدف دست یافته است.
" Og Mandino "
#motivational
☕️ @CodeExplore
" Og Mandino "
#motivational
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡12❤🔥5🔥3
تولید داده های لیستی رندوم ⁉️
❓ تا حالا شده سر ساخت داده های رندوم برای sql یا json,xml,csv یا ... به مشکل بخورید و ازتون وقت بره؟
👑 این سایت بهتون داده های رندوم توی تایپای مختلف میده و میتونید فرمت های مختلف(از جمله فرمت هایی که نام بردم) رو استفاده کنید!
🔗 Mockaroo
#mockaroo #data
☕️ @CodeExplore
#mockaroo #data
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡7❤🔥3🔥1
ترکیب دو لیست در پایتون ⌨️
اگر میخواستین دوتا لیست رو با هم توی پایتون ادغام کنید، چیکار میکردید؟
درسته؟ خب ولی بیاین با اضافه کردن یک کتابخونه یکم کارمونو سریعتر پیش ببریم...
💬 نظرتون چیه؟ استفاده از کتابخونه خوبه؟
#python #trick #list #itertools
☕️ @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
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡8🔥2😁2❤🔥1
بررسی آنلاین کد NodeJS 🆒
🌐 سایت RunKit یه ابزار آنلاین فوق‌العاده برای برنامه‌نویس‌های Node.js هست که توش می‌تونی خیلی سریع و راحت کدهای Node.js رو تست و اجرا کنی. فکر کن مثل یه دفترچه یادداشت آنلاین هست که هر وقت خواستی می‌تونی کد بزنی و همونجا نتیجه‌اش رو ببینی! و صد البته که به npm هم دسترسی دارین ⚡️
💎 یک سایت با همین کاربرد ولی برای زبان های مختلف توی این پست معرفی کردیم
🔗 Runkit
#runkit #nodejs
☕️ @CodeExplore
#runkit #nodejs
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥8🔥3⚡1
دقت کنین که اندازه های صرفا واحد هایی هستن که میگیم و میشه برای اکثر کلاس های مربوط به اندازه استفاده کرد، مثلا عرض و ارتفاع و...
حالا این اندازه های چطورین؟ برای مثال :
class="w-0"
اینجا داریم به width اندازه 0 رو میدیم که معلومه اصن، ولی
class="w-4"
اینجا دیگه این المنت ما میاد عرض 16 پیکسل میگیره یا همون 1rem
اگرم از خود size استفاده کنین، عرض و ارتفاع رو میده:
class="size-24"
البته برای تعیین اندازه ها برای ارتفاع میتونیم از h استفاده کنیم، و اینم بگم که اگه بخایم 1 پیکسل اندازه بدیم از کد زیر استفاده میکنیم:
class="h-px"
اینجا px یعنی یک پیکسل
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 نیستش! صرفا داریم مثالش رو با این میزنیم
اون واحد های پیکسلی رو که داریم و سر جاشونن
علاوه بر اون ها موارد 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>
خب دیگه مباحث کلی اندازه های تموم شد و اینکه دقت کنین لیستش خیلی زیاد و بزرگه برای همین داخل لینک های پایین میتونین اینارو کامل ببینین:
#tailwind #tailwind_3
Please open Telegram to view this post
VIEW IN TELEGRAM
Tailwindcss
width - Sizing
Utilities for setting the width of an element.
⚡10🔥3❤🔥1
منابع خلاقانه و کاربردی Design برای طراحا و برنامه نویسا که میتونید توی طراحی هاتون ازشون استفاده کنید.
🌪 https://github.com/gztchan/awesome-design
#design #awesome
☕️ @CodeExplore
#design #awesome
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡12🔥2❤🔥1
سایت مناسب طراحی برای برنامه نویسان ✨
✍️ توی این سایت میتونید الگوریتم یا طراحی اولیه سایت و نرم افزارتون رو بکشید و به اشتراک بزارید! تازه برای بعضی از ابزارهاش از هوش مصنوعی هم کمک میگیره!
🔗 Excalidraw
#excalidraw #site
☕️ @CodeExplore
#excalidraw #site
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤🔥2⚡2
تعریف تابع در یک خط در جاوااسکریپت ✌️
🥸 توی این پست میبینید که اجباری نیست توی جاوااسکریپت بنویسید function بعد اسم بعد مقادیر بعد براکت و ...
اینجوری هم میشه تابع نوشت:
#javascript #js #trick
☕️ @CodeExplore
اینجوری هم میشه تابع نوشت:
const add = (a, b) => a + b;
console.log(add(2, 3));
// خروجی: 5
#javascript #js #trick
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡9❤🔥3🔥1
به طور خلاصه این سایت به درد هر کسی میخوره که می‌خواد بفهمه درخواست‌های اینترنتی چطور کار می‌کنن و چطوری میشه باهاشون کار کرد
#http #request #tools
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡10❤🔥3🔥1
خب اول اینکه منظور از Spacing ها همین فاصله ها هستن که شامل padding و margin و یه مبحث جدید و مرتبط به تیلویند به اسم Space Between ( که از اسمشم مشخصه چیه ) میشه
p-0
px-0
py-0
ps-0
pe-0
pt-0
pb-0
pr-0
pl-0
دقت کنین به جای 0 میتونین از اون اندازه هایی که جلسه قبل باهم حرف زدیم دربارش استفاده کنین، مثلا : p-24
برای مارجین هم دقیقا به همین صورته فقط به جای p از m استفاده کنین
استفادش خیلی سادس، شما میاین یه جهت و اندازه میدین و تمام، اینم مثالش:
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
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡10❤🔥4🔥2
کداکسپلور | CodeExplore
🔶 کتابخانه مولتی اسلایدر بوت استرپ منتشر شد. 🥳 🎉 😎 ویژگی جدیدی که به این کتابخانه اضافه شده است افزودن تاج برای سازگاری با موبایل و تبلت است که با لمس انگشتی اسلایدر را حرکت می دهید. با نسخه های ۴ و ۵ فریم ورک بوت استرپ سازگار است. آدرس گیت هاب : 👨💻 h…
🔶 دوستان عزیز دیروز سه ویژگی جدید برای کتابخانه Sliderable اضافه شد.
1️⃣ افزودن Autoplay
2️⃣ پس از اتمام Autoplay، به حالت پیش فرض باز می گردد.
3️⃣ افزودن تنظیمات جاوا اسکریپت
Developer : @RaymondDev
#library #bootstrap
☕️ @CodeExplore
var options = {
autoPlay: true, // Or false
autoPlayInterval: 3000, // Autoplay interval in milliseconds
swipeThreshold: 50, // Minimum swipe distance in pixels
};Developer : @RaymondDev
#library #bootstrap
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥9⚡3🔥2
سایت Glitch یک پلتفرم آنلاین عالی برای توسعه و اشتراک‌گذاری پروژه‌های وب هست. توی این سایت میتونید خیلی راحت برنامه‌های تحت وب، سایت ها و ابزارهای کاربردی و خلاقانه رو توسعه بدین و با بقیه به اشتراک بذارید. محیطش ساده و کاربرپسنده و برای نمونه کار و کار تیمی هم خیلی کاربردیه.
👉 https://glitch.com
#programming #interactive
☕️ @CodeExplore
#programming #interactive
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥9⚡3🔥3
مرورگر مخصوص برنامه نویسا 💥
☄️ مرورگر Polypane یه مرورگر خاص برای توسعه‌دهندگان وب هست که ابزارهای زیادی برای طراحی واکنش‌گرا (responsive) و تست سریع وب‌سایت‌ها ارائه میده. این مرورگر به شما کمک میکنه که وب‌سایت‌هاتون رو در اندازه‌ها و دستگاه‌های مختلف تست و بهتر کنید.
👀 چندتا از ویژگی ها:
1️⃣ پیش‌نمایش چندگانه
2️⃣ همگام‌سازی کامل
3️⃣ نمایش گرید و خطوط راهنما
4️⃣ ابزارهای دسترسی‌پذیری
5️⃣ نمایش متا تگ‌ها و اطلاعات سئو
6️⃣ ابزارهای تست سرعت
🔗 Polypane
#polypane #browser
☕️ @CodeExplore
#polypane #browser
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9⚡3❤🔥2
شما هم هوش مصنوعی های پیشنهادیتون رو داخل کامنتا بنویسید
#ai #developer
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡9🔥4❤🔥1💔1