کداکسپلور | CodeExplore
7.92K subscribers
2K photos
342 videos
103 files
1.82K links
با کد اکسپلور یاد بگیر، لذت ببر و بروز باش ⚡️😉

سایت:
CodeExplore.ir
👨🏻‍💻 ارتباط با ما :
@CodeExploreSup
گروه :
@CodeExplore_Gap
تبلیغات در کد اکسپلور :
@CodeExploreAds
Download Telegram
سایت Searchcode این امکان رو به شما میده به سرعت به بیش از 75 میلیارد خط کد از پروژه های اوپن سورس مختلف دسترسی پیدا کنید 💡

⚪️این سایت با پشتیبانی بیشتر از 70 زبان برنامه‌نویسی و جستجو بین میلیون‌ها فایل کد، به کاربران کمک میکنه تا نمونه کدها، الگوریتم‌ها و کتابخانه‌های مورد نیاز خودشون رو داشته باشن و از اونها توی پروژه هاشون استفاده کنن. با قابلیت‌های پیشرفته سرچ مثل فیلتر کردن بر اساس زبان برنامه‌نویسی یا نوع فایل، Searchcode ابزاری ارزشمند برای برنامه نویسا هستش.

🔗 https://searchcode.com

#search #code
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥10🔥43
بزرگ ‌ترین خطر برای اکثر ما این نیست که هدف ما بیش از حد بالاست و ما آن را از دست می‌ دهیم، بلکه این است که خیلی پایین است و ما به آن دست می یابیم.

" Michelangelo "

#motivational
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥12🔥62
😂😂

#fun
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
😁23❤‍🔥3🔥2
اندازه های مختلف به همراه کدشون برای طراحی رسپانسیو

#css #responsive
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
16❤‍🔥3🔥1
چندتا کار که انجام دادنشون گوشیتون رو به فنا میده! ⚠️

پ.ن: گوشی خودم داره سر شارژ کردنای اضافه به فنا میره 🥲

#mobile
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥11💔32
⚡️اومدیم با یکی دیگه از آموزش های TailwindCss و قراره که چندین مباحث مختلف رو باهم بررسی کنیم

حاشیه نریم و بریم لیست کلاس هارو ببینیم

برای اینکه z-index رو تنظیم کنیم ده تا ده تا طبقه بندی داریم براش و خب اینطوری داخل تیلویند هستش:
z-0
z-10
z-20
...
z-50


برای تنظیم visibility هم اینارو داریم:
visible
invisible //hidden
collapse


👑اما خب برای اینکه دیسپلی یه تگ رو none کنیم چی؟ خیلی راحت بهش کلاس hidden بدین

برای تنظیم overflow هم لیست زیر رو داریم:
overflow-auto
overflow-hidden
overflow-clip
overflow-visible
overflow-x-...
overflow-y-...


خب دوستان عزیز این پست برای این بود که یکم موارد متفرقه رو ببریم جلو، از پست های بعد قراره وارد مباحث جزئی تر بشیم
شماهم خودتون این صفحه رو نگاه کنین جالبه برای دیسپلی ها:
🌐 https://tailwindcss.com/docs/display

#tailwind #tailwind_11
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
14❤‍🔥4🔥1
Pyinstaller
کتابخانه ای مختص به تبدیل فایل های پایتون به فایل های اجرایی به ساده ترین روش ممکن.

اول باید کتابخونه رو نصب کنیم :
pip install pyinstaller


1.commands

--name
تعیین اسم خروجی
pyinstaller main.py --name main

--onefile
خروجی فایل معمولا وابستگی داره ، این تمام وابستگی هارو داخل خود فایل اجرایی میذاره
pyinstaller main.py --onefile

--noconsole or --w
برای برنامه های گرافیکی ( مثل tkinter ) خوشایند نیست  که ترمینال همراه صفحه گرافیکی باز بشه پس این گزینه باید فعال باشه
pyinstaller main.py --noconsole



2. pyinstallerGUI
یه چیزی هم هست از همین پای اینستالر که همه این اپشن ها و به صورت یه محیط گرافیکی نسبتا قابل قبول ارائه میده و میتونین دانلود و اجرا کنین

☕️ @CodeExplore | </Ehsan>
Please open Telegram to view this post
VIEW IN TELEGRAM
20❤‍🔥3🔥1
دوستان برای مطالب و محتوایی که روزانه توی چنل قرار میگیره انرژی و زمان زیادی توسط دوستان توی تیم کد اکسپلور صرف میشه تا بهترین محتوا در دسترس شما قرار بگیره و کد اکسپلور منبع مفیدی برای شما باشه.

شما با ری اکشن و فروارد پست ها میتونید از ما حمایت کنید تا ما بتونیم همیشه برای شما مطالب مفیدی رو قرار بدیم ⚡️


☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
55❤‍🔥9🔥4😁1
اندروید کارا اعلام حضور کنن 👋

#fun
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
😁303🔥1
تگ های details و summary در HTML 🖐

🔴برای ایجاد محتوای قابل‌گسترش (collapsible content) استفاده می‌شن که به کاربر اجازه می‌دن با کلیک روی یک عنوان، محتوای مخفی رو ببینن. بریم سراغ جزئیات:تگ <details>این تگ برای تعریف یک بخش از محتوا استفاده می‌شه که می‌تونه باز یا بسته بشه.

⭐️تگ <summary>این تگ داخل <details> قرار می‌گیره و عنوانی رو که کاربر روش کلیک می‌کنه، مشخص می‌کنه.مثالفرض کنیم می‌خوایم اطلاعات بیشتری درباره‌ی یه موضوع نشون بدیم، اما نمی‌خوایم همیشه تمام اطلاعات نمایش داده بشن. از این تگ‌ها استفاده می‌کنیم:
<details>
<summary>بیشتر بدانید</summary>
<p>این محتوای اضافی است که کاربر می‌تواند با کلیک روی "بیشتر بدانید" مشاهده کند.</p>
</details>

#html #summary #details
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
12❤‍🔥4🔥3
انواع متد های HTTP

1⃣ GET

🔴هدف این متد ارسال و دریافت داده‌ها از سرور هستش. این متد برای درخواست منابع خاص از سرور استفاده میشه و درخواست‌های GET تنها داده رو دریافت میکنن و نمیتونن تغییری در سرور بوجود بیارن. درخواست‌ها در URL قابل مشاهده ان و معمولاً برای درخواست‌های بدون حساسیت استفاده میشن چون از امنیت پایینی برخوردارن. از این متد برای سرچ و صفحه بندی نتایج سرچ و باز کردن صفحه های سایت استفاده میشه‌.

🔢 POST:

⚪️هدف این متد ارسال داده به سرور هستش و این متد برای ارسال داده به سرور به منظور ایجاد یا به‌روزرسانی منابع استفاده میشه. داده‌ها در بدنه درخواست (body) ارسال میشن و برخلاف GET، اطلاعات حساس با امنیت بیشتر انتقال داده میشن. این متد معمولاً در فرم‌های وب مورد استفاده قرار میگیره.

🔢 PUT:

🟢هدف این متد آپدیت یا ایجاد منابع جدید هستش. این متد برای به‌روزرسانی کامل یک منبع مشخص استفاده میشه. اگر منبع وجود نداشته باشه یک منبع جدید بوجود میاد. داده‌ها در بدنه درخواست ارسال میشن.

🔢 DELETE:

🔴هدف این متد حذف منابع از سرور هستش. این متد برای حذف یک منبع خاص از سرور استفاده میشه و درخواست DELETE باید منبعی که باید حذف بشه رو مشخص میکنه.

🔢 PATCH:

🔵هدف این متد به‌روزرسانی جزئی منابع هستش. این متد برای به‌روزرسانی بخشی از یک منبع استفاده میشه. برخلاف PUT که تمام منبع رو به‌روزرسانی میکنه، PATCH فقط بخشی از منبع رو تغییر میده.

🔢 HEAD:

🟠هدف این متد دریافت متادیتا (metadata) بدون دریافت بدنه (body) پاسخ.
این متد شبیه به متد GET هست اما سرور فقط هدرهای (headers) پاسخ رو برمیگردونه و هیچ بدنه‌ای ارسال نمیشه. این متد برای بررسی وجود منابع و دریافت اطلاعات درباره اون ها بدون انتقال داده استفاده میشه.

🔢 OPTIONS:

🟡 هدف این متد دریافت اطلاعات درباره متدهای پشتیبانی شده توسط سروره.
این متد برای درخواست اطلاعات درباره قابلیت‌های ارتباطی یک منبع مشخص استفاده میشه و در پاسخ سرور گفته میشه که چه متدهایی برای منبع مورد نظر پشتیبانی میشه.

🔢 CONNECT:

🟢هدف این متد راه‌اندازی یک اتصال تونلی (tunnel connection) به سرور هستش.
این متد برای ایجاد یک تونل بین کلاینت و سرور، معمولاً برای استفاده در پروتکل‌های HTTPS، استفاده میشه.

🔢 TRACE:

🟣هدف این متد آزمایش مسیر درخواست به سرور هستش. این متد درخواست می‌کند که سرور درخواست همونطور که دریافت کرده، برگردونه. این متد برای اهداف تشخیصی و رفع اشکال استفاده میشه.

#http #method
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
10🔥3❤‍🔥1
اگه برنامه نویس نمی شدید ، دوست داشتید چیکاره شید ؟

#job #programming
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤‍🔥21
⚡️خب بچه ها در ادامه مباحث TailwindCss رسیدیم به جاهایی که وقتشه کارای حرفه‌ای تر بکنیم

ببینین ما تا الان یسری کلاس هایی رو باهم کار کردیم که خب خیلی نیازهامون رفع میشه ولی هنوز کلی کار هست که نمیتونیم انجام بدیم!

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

◀️خب اول از همه این لیستش رو ببینین که داخلش بریک پوینت های تیلویند رو با سایزی که دارن ( Mofile First هستن ) نشون دادیم:

sm : 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

این بریک پوینت ها خب اصولا تو اکثر فریمورک های Css هستش و زیاد گنگ نیست براتون😠

حالا بریم سراغ نحوه استفادش
ببینین داخل مباحث قبلی گفتیم که اره وقتی میخایم بگیم این المنت ما وقتی مثلا هاور شد فلان استایل رو بگیره اینطوری عمل میکردیم:
class="bg-red-500 hover;bg-green-500"

حالا برای اینکه کلاس های رسپونسیو هم اعماد کنیم دقیقا با استفاده از بریک پونت ها همچین کاریو پیش میبریم:
class="bg-red-500 sm:bg-green-500 md:bg-yellow-500 lg:bg-black xl:bg-blue-500 2xl:bg-white"

اینم بگم که بریک پوینت های تیلویند از سایز موبایل شروع میشه و بهش میگن Mobile First پس استایل های دیفالت از کوچیک ترین سایز اسکرین هستن


حالا فرض کنین ما کلی استایل های المنتمون رو میخایم تو سایز lg تغییر بدیم:
class="w-full h-24 border lg:w-1/2 lg:h-96 lg:border-0

اینطوری چند بار مینویسیم و خب اره یکم شلوغ و طولانی میشه
فقط امیدواریم تو اپدیت های بعدی تیلویند اینم درست کنن که مثلا به جاش بیایم اینکارو کنیم یه بار بریک پوینت رو بنویسیم و بعدش یه لیست از کلاس هارو بزنیم جلوش

اما اینم بگم همین الانشم خیلی خفنه و کارمون رو خیلی خوب جلو میبره

💎در آینده وقتی رفتیم سراغ کانفیگ های تیلویند بهتون میگم که چطوری سایز و بریک پوینت های جدید هم اضافه کنین یا اسم اینارو عوض کنین

#tailwind #tailwind_12
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥15🔥21
خروجی این کد کدوم گزینه هستش؟
توی کامنت ها بنویسید 😉

function mysteryFunction(arr) {
return arr.map(num => num % 2 === 0 ? num * 2 : num * 3).reduce((acc, num) => acc + num, 0);
}

let numbers = [1, 2, 3, 4, 5];
let result = mysteryFunction(numbers);

console.log(result);


A) 45
B) 50
C) 39
D) 60

#js #challenge
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
6❤‍🔥3🔥1
🌟🌟🌟

#fun
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
😁32💔6
کداکسپلور | CodeExplore
تگ progress
تگ progress یک نوار پیشرفت را برای نشان دادن میزان تکمیل یک کار یا فرآیند ایجاد می‌کنه. این تگ یک عنصر بلوک هست و میتونه در هر مکانی در سند HTML قرار بگیره
تگ <progress> در HTML 🖐

💥برای نمایش پیشرفت یک کار خاص مثل آپلود یک فایل یا تکمیل یک وظیفه استفاده می‌شه. این تگ به صورت بومی توسط مرورگر پشتیبانی می‌شه و به طور خودکار یک نوار پیشرفت ایجاد می‌کنه. بریم سراغ جزئیات بیشتر:

<label for="file">پیشرفت دانلود فایل:</label>
<progress id="file" value="32" max="100">32%</progress>


توضیحات value: مقدار فعلی پیشرفت کار رو نشون می‌ده. در این مثال، پیشرفت 50 است.

توضیحات max: حداکثر مقدار پیشرفت رو تعیین می‌کنه. در این مثال، حداکثر مقدار 100 است.

محتوای داخل تگ: متنی که بین تگ‌های <progress> قرار می‌گیره، در صورتی که مرورگر نتونه نوار پیشرفت رو به درستی نمایش بده، به عنوان متن جایگزین نمایش داده می‌شه.

برچسب (Label): با استفاده از تگ <label> می‌تونی توضیحی درباره نوار پیشرفت بدی.

اتصال به تگ <progress>: با استفاده از خاصیت for در تگ <label> و خاصیت id در تگ <progress> می‌تونی این دو رو به هم مرتبط کنی.

#html #progress
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥3❤‍🔥1
فیگما(Figma) دقیقا چیه؟ 💡

🔴‏Figma یه ابزار آنلاین برای طراحی رابط کاربری (UI) و تجربه کاربری (UX) هست که خیلی از طراح‌ها و توسعه‌دهنده‌ها ازش استفاده می‌کنن. چون تحت وبه، لازم نیست چیزی نصب کنی و همه‌چیز توی مرورگر اجرا می‌شه. این ابزار برای طراحی‌های برداری و نمونه‌سازی عالیه، یعنی می‌تونی طرح‌های پیچیده و تعاملی بسازی و تست کنی.

🟠یه ویژگی خیلی خفن Figma اینه که چند نفر می‌تونن همزمان روی یه پروژه کار کنن. فرض کن مثل Google Docs، هرکی تغییر بده، بقیه هم همون لحظه می‌بینن. اینطوری کار تیمی خیلی راحت‌تر و سریع‌تر پیش می‌ره. حتی می‌تونید روش کامنت بذارید و نظر بدید تا کاراتون دقیق‌تر بشه.

‏Figma، برای ساخت سیستم‌های طراحی هم خیلی کاربردیه. یعنی می‌تونی اجزا و سبک‌های مختلف رو یه‌بار تعریف کنی و بعد توی کل پروژه ازشون استفاده کنی. اینطوری طراحی‌ها همیشه هماهنگ و منظم می‌مونن. علاوه بر این، Figma یه عالمه پلاگین داره که کلی امکانات اضافه بهت می‌ده؛ از انیمیشن گرفته تا مدیریت رنگ‌ها و حتی کارهای اتوماتیک.

🔗لینک فیگما

#figma #frontend #design
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
10🔥4❤‍🔥2