اگه برنامه نویس نمی شدید ، دوست داشتید چیکاره شید ؟

#job #programming
☕️ @CodeExplore

⚡️خب بچه ها در ادامه مباحث 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

خروجی این کد کدوم گزینه هستش؟
توی کامنت ها بنویسید 😉

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

🌟🌟🌟

#fun
☕️ @CodeExplore

تگ <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

فیگما(Figma) دقیقا چیه؟ 💡

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

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

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

🔗لینک فیگما

#figma #frontend #design
☕️ @CodeExplore

📚دوتا کتاب مفید و رایگان برای یادگیری الگوریتم

⚪️Think Data Structures: Algorithms and Information Retrieval in Java by Allen B. Downey

این کتاب برای دوستانی که میخوان الگوریتم‌ها و Data Structure رو به صورت عملی و با استفاده از زبان برنامه‌نویسی Java یاد بگیرن، بسیار مفید هستش.


⚪️Competitive Programmer’s Handbook by Antti Laaksonen

این کتاب برای دوستانی که علاقه‌مند به مسابقات برنامه‌نویسی و الگوریتم‌ها هستن پیشنهاد میشه.
#algorithm #book
☕️ @CodeExplore

👑خوش اومدین به یکی از مهم ترین آموزش های تیلویند
چرا مهم ترین؟ چون امروز میخایم راجب کانفیگ کردن تیلویند صحبت کنیم و یادبگیریم چطور مواردی که میخایم و داخل تیلویند به صورت دیفالت وجود نداره رو اضافه کنیم

🔔ببینین ما وقتی تیلویند رو روی پروژمون نصب میکنیم یه فایل tailwind.config.ts به وجود میاد که میتونیم داخلش کلی کارای جالب کنیم

درحالت عادی و خالی، فایل شما به این صورته:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

مثال بالا رو از داک خود تیلویند براتون آوردم، اینجا میبینین که یسری موارد به صورت مستقیم داخل theme اضافه شدن مثل colors و fontFamily ، و همینطور هم یسریا مثل spacing و borderRadius دااخل extend اضافه شدن

⚡️فرق خیلی خیلی مهم اینجا اینه که اگه شما مثلا رنگ هارو داخل خود theme اضافه کنین، رنگ های دیفالت تیلویند دیگه از بین میرن و فقط رنگ هایی میمونن که شما اضافه کرده باشین، اما داخل extend، هرچی اضافه کنین کنار موارد دیفالت قرار میگیره و هردو رو باهم دارین

تمام موارد داخل theme و extend هم مثل همه و محدودیتی ندارین

◀️استفادش هم مثلا شما یه رنگ primary اضافه کردین اینطوری میزنین:

class="text-primary bg-primary"

#tailwind #tailwind_13
☕️ @CodeExplore

دوستان این مقاله Commit-Like-a-Pro رو سپهر رسولی ترجمه کردن.
خسته نباشید میگم بهشون و اینکه کار خفن ارزش حمایت کردن داره💔

🌐 https://github.com/SepehrRasouli/CommitLikeAProTranslation

#article
☕️ @CodeExplore

زندگی عادلانه نیست، به آن عادت کنید!

" بیل گیتس "

#motivational
☕️ @CodeExplore

آخی

#fun
☕️ @CodeExplore

دوستان تو کامنت ها کتاب هایی که خوندید و مفید بوده رو اسمش رو بگید و اگه PDF یا لینک دسترسی آنلاین بهش داشتید رو بفرستید تا بقیه دوستان استفاده کنن.

#book #pdf
☕️ @CodeExplore

⌨️ خروجی این کد پایتون کدوم گزینه هست؟

def quiz_function(x, y):
    result = []
    for i in range(x):
        if i % y == 0:
            result.append(i)
    return result

output = quiz_function(10, 3)
print(output)

A) [3, 6, 9]
B) [0, 3, 6, 9]
C) [0, 3, 6]
D) [1, 4, 7]

#python #challenge
☕️ @CodeExplore

زبان QBasic چه زبانیه؟ 💻

💠زبان QBasic (مخفف Quick Beginners All-purpose Symbolic Instruction Code) یک زبان برنامه‌نویسی ساده و مبتنی بر BASIC است که مایکروسافت در دهه 80 میلادی ارائه کرد. این زبان برای آموزش مفاهیم پایه برنامه‌نویسی به مبتدیان طراحی شده بود و در سیستم‌عامل MS-DOS به کار می‌رفت.


☄️ویژگی ها:

1️⃣محیط تعاملی:
‏QBasic یک محیط توسعه یکپارچه (IDE) داشت که شامل ویرایشگر کد، ابزارهای اشکال‌زدایی و مفسر بود. کاربران می‌توانستند کد را بنویسند، اجرا کنند و نتایج را فوراً ببینند.

2️⃣دستورات ساده:
دستورات QBasic مثل PRINT برای نمایش متن و IF...THEN برای شرط‌گذاری بسیار قابل فهم بودند که یادگیری را آسان می‌کرد.


ℹ️قابلیت‌ها و محدودیت‌ها:
‏QBasic از حلقه‌ها (FOR...NEXT)، توابع و مدیریت فایل‌ها (OPEN, CLOSE) پشتیبانی می‌کرد. با این حال، برای پروژه‌های حرفه‌ای مناسب نبود و از برنامه‌نویسی شی‌گرا پشتیبانی نمی‌کرد. با وجود این محدودیت‌ها، QBasic نقش مهمی در آموزش برنامه‌نویسی به مبتدیان داشت و همچنان به عنوان یک ابزار آموزشی مورد توجه است.

#qbasic #languages
☕️ @CodeExplore

سلام خوش اومدین به یه آموزش دیگه از تیلویند 🔥
تو مباحث قبلی ما درباره کانفیگ کردن تیلویند صحبت کردیم و خب برای بحث کانفیگ کردن فونت ها امروز قراره این پست کوتاه رو ببینیم ⚡️

خب اول از همه شما نیاز به ادرس فونت یا فایلش دارین، بعد از اون خب داخل نصب تیلویند یه فایل css داریم که لایه های تیلویند رو اضافه کردیم داخلش
مثلا فایل main.css که داخلش این موارد هست هرچند توی نصب تیلویند تو همون مباحث اولیه گفتیم:

@tailwind base;
@tailwind components;
@tailwind utilities;

🟢خب حالا ما میتونیم اینجا به لایه های مختلف تیلویند یسری چیزارو اضافه کنیم، اگر قرار باشه فونت اضافه کنیم باید داخل لایه base باشه چون که مربوط به چیزای ریشه‌ای میشه.

این کارو میکنیم:

@layer base {
 @font-face {
       font-family: "new font",
       src: url("./path/to/your/font.ttf)
  }
}

حالا داخل فایل tailwind.config.ts میایم و فونتمون رو اضافه میکنیم:

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

💡تبریک میگم فونت شما اضافه شد به تیلویند
استفادش:

class="font-newFont"

#tailwind #tailwind_14
☕️ @CodeExplore

⚪️منبعی کاربردی که لودینگ های مختلفی داره Customize کنید و به شکل کد های CSS میتونید توی بخش های مختلف ازشون استفاده کنید.

🔗cssportal.com/css-loader-generator

#loader #css
☕️ @CodeExplore

تشخیص جنسیت صدا 🎙️

🌪 یکی از دوستان یک ریپوزیتوری نوشته که باهاش میتونید تشخیص بدید ویسی که بهش دادید مال یک زن هست یا مال یک مرد هست.

آموزش:

1. ریپو رو کلون میکنید:
git clone https://github.com/RiraAI/gender-recognition

2. لایبرری های مورد نیاز رو نصب میکنید :
pip3 install -r requirements.txt

3. فایل صوتی خودتون رو مطابق کامند زیر تست میکنید:

sudo python recognition.py --file "samples/fa_006.wav"

🔗RiraAI

#ai
☕️ @CodeExplore | </Mahi>

🥤🥤🥤

#fun
☕️ @CodeExplore

به آخر لینک، png. یا json.اضافه کنید و خودتون نتیجه رو ببینید.

🌐 https://github.com/π

#json #png #github
☕️ @CodeExplore

پاک کردن مقادیر کاذب (Falsy) از آرایه در جاوا اسکریپت ✌️

💎توی جاوااسکریپت از filter برای حذف مقادیر کاذبی مثل null، undefined، 0، "" و false از یک آرایه استفاده کنید، چطوری؟ اینطوری:

const array = [0, 1, false, 2, '', 3, null, 'test', undefined];
const cleanedArray = array.filter(Boolean);
console.log(cleanedArray); 
// [1, 2, 3, 'test']

#javascript #js #trick
☕️ @CodeExplore