استخراج آرایه به روش destructing در جاوااسکریپت ✌️

این روش خیلی باحال و جدیده، کمتر هم درگیری دارید برای دریافت مقادیر، ببینید:

let user = { name: 'Ali', age: 25 };
let { name, age } = user;
console.log(name, age); 
 // 'Ali', 25

let numbers = [1, 2, 3];
let [first, second, third] = numbers;
console.log(first, second, third); 
 // 1, 2, 3

#javascript #js #trick #destructing
☕️ @CodeExplore

👋خوش اومدین به اولین قسمت از اموزش TailwindCss ، امروز میخایم فقط به معرفی و ویژگی های این داداشمون بپردازیم

💪اول اینکه باید بدونین TailwindCss یه فریمورک Css عه که با اسکن کردن کل فایل های html شما، کامپوننت های javascript و تمپلیت هاتون با اسم های مختلف کار میکنه و میاد اون استایل هارو به صورت استاتیک داخل فایل Css مینویسه

✅حالا ویژگی هایی که تیلویند رو اینقدر خفن کرده چیه؟
🔵افزایش سرعت توسعه: چون که با کلاس ها استایل میدیم و کلی قابلیت در اختیار ما قرار میده سرعتمون خیلی میره بالا
🔵قابلیت شخصی سازی بالا: تیلویند بخاطر فایل های کانفیگی که داره و البته قابلیت های خفن خودش بهتون این اجازه رو میده که کلی کانفیگ و کارای کاستوم انجام بدین
🔵سرعت بالای سایت با کمترین حجم Css: با تیلویند این قابلیت رو دارین که فایل های css تون کوچیک و جمع و جور باشه
🔵واکنش پذیری ( Responsive ): خیلی راحت میتونین صفحاتتون رو باهاش رسپونسیو کنین
سازگاری بالا با فریمورک های مختلف JavaScript

👍یک پست قبلاً درست کردیم به عنوان "چرا تیلویند ارزش یادگیری داره" که پیشنهاد میکنم حتما بخونیدش تا بیشتر آشنا بشید با این فریم ورک خفن.

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

#tailwind #tailwind_1
☕️ @CodeExplore

👀خودم دارم مهاجرت میکنم رو لینوکس و این چند روزه خیلی پیگیر این موضوع بودم که تو یوتیوب یک ویدیو دیدم که 60 کامندی که حتما باید تو لینوکس بلد باشیم رو گفته ، تصمیم گرفتم با شما هم به اشتراک بزارم.

🖥 https://www.youtube.com/watch?v=gd7BXuUQ91w

#linux #comment #youtube
☕️ @CodeExplore

☕️ دوستان شما میتونید توی گپ کد اکسپلور هم جوین باشید.

توی گروه با راهنمایی، رفع مشکلات و انتقال تجربیات خودتون باعث پیشرفت خودتون و دوستان میشید.🔝

با کد اکسپلور یادبگیر، لذت ببر و بروز باش😉🤍

☕️ https://t.iss.one/CodeExploreGap

معمای اینترنت در ایران💔...

☕️ @CodeExplore

⚪️ با استفاده از این سایت میتونید کد یا زبان انسان رو به هر زبان برنامه نویسی که میخواید تبدیل کنید. از زبان فارسی هم برای Prompt و از اکثر زبان های برنامه نویسی هم پشتیبانی میکنه.
قسمت پریمیوم هم وجود داره که برای استفاده های بیشتر و قابلیت های ویژه تر میتونید تهیه کنید.

🔗 aicodeconvert.com

#ai #code #convert
☕️ @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

تست آنلاین و فوری کد 💻

🔺تا حالا شده بخواین سریع و دم دستی یه کدی رو تست بکنین؟ مثلا آخر شبه و یه کد جالبی میخوره به چشمتون،اما سیستم خاموشه و رو گوشی هم کامپایلر یا ادیتور یا ... نیست؛ خب اینجور وقتا این سایت به کارتون میاد!

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

🔗 Codechef

#codechef #programming #site
☕️ @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

منبعی کاربردی برای آموزش زبان برنامه نویسی Go با مثال های ساده و متنوع در حوزه های مختلف

🔗https://gobyexample.com

🌪 https://github.com/mmcgrana/gobyexample

#go #example #tutorial
☕️ @CodeExplore

هنگامی که فرد عادت به تعیین اهداف و دستیابی به آنها داشته باشد، به نصف پیروزی و موفقیت در رسیدن به هدف دست یافته است.

" Og Mandino "

#motivational
☕️ @CodeExplore

ارور>>>داکیومنت

#fun
☕️ @CodeExplore

تولید داده های لیستی رندوم ⁉️

❓ تا حالا شده سر ساخت داده های رندوم برای sql یا json,xml,csv یا ... به مشکل بخورید و ازتون وقت بره؟

👑این سایت بهتون داده های رندوم توی تایپای مختلف میده و میتونید فرمت های مختلف(از جمله فرمت هایی که نام بردم) رو استفاده کنید!

🔗 Mockaroo

#mockaroo #data
☕️ @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

بررسی آنلاین کد 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