#fun

- سنگر آخر
میدونین چیکار میکنه دیگه ؟ 😂 ( بدون اطلاع کامل استفاده نشود ❌)

@coolycode

میدونین Headless Cms‌ چیه و چیکار میکنه ؟؟؟

#WhatsThat #CMS #HeadlessCMS

●● آشنایی با Headless CMS  ●●

هدلس CMS سیستمیه که فقط بخش مدیریت محتوا و APIها رو برای شما ایجاد می‌کنه و فاقد بخش Frontend هستش. این ساختار برای شما این امکان رو فراهم میکنه تا بتونید محتوای خودتون رو از طریق API ها در هر نوع دستگاه یا پلتفرمی (وب، موبایل، IoT و ... ) نمایش بدید.

مزایا 🚀

➊ استقلال فرانت‌اند : فرانت‌اند و بک‌اند از هم جدا هستند.

➋ چندپلتفرمی بودن : محتوا به هر دستگاهی ارسال می‌شه.

➌ کاهش ریسک امنیتی : دسترسی مستقیم به سرور کمتر می‌شه.

معایب ❌

➊ پیچیدگی توسعه : نیاز به تخصص در چندین فناوری و ابزار مختلف.

➋ هزینه بیشتر : ممکنه به تیم‌های بزرگ‌تر و منابع بیشتری نیاز باشه.

➌ نبود رابط کاربری پیش‌ساخته : فرانت‌اند باید از طراحی بشه.

یکی از بهترین موارد برای استفاده از هدلس CMS وبسایت های وبلاگی هستش و کارتون رو واقعا ساده می‌کنه⚡

Channel | Group | YouTube

〰💎 آپلود فایل توی باکت S3 در node.js 💎〰

امروز میخوام در مورد یکی از موضوعات پرکاربرد و جذاب در دنیای Node.js صحبت کنم: آپلود فایل با استفاده از باکت S3! 🎉

📦 چی هست این S3 و چرا باید ازش استفاده کنیم؟
باید بدونید S3 (Simple Storage Service) یکی از سرویس‌های معروف و محبوب آمازون وب سرویس (AWS) هست که به شما اجازه میده فایل‌هاتون رو روی فضای ابری ذخیره کنید. 🤓 این سرویس به خاطر قابلیت‌های زیادی مثل مقیاس‌پذیری بالا، امنیت و سرعت زیادش خیلی طرفدار داره.

فرض کن یه پروژه داری که توش کلی فایل (مثل عکس، ویدیو یا حتی فایل‌های بزرگ) باید ذخیره بشه. به جای اینکه این فایل‌ها رو روی سرور خودت نگه داری و مدام نگران فضای ذخیره‌سازی باشی، می‌تونی از S3 استفاده کنی تا همه چیز روی فضای ابری مدیریت بشه. 🚀

🎯 حالا چطور می‌تونیم با Node.js فایل آپلود کنیم؟
بریم سراغ اصل مطلب! 😊 برای آپلود فایل در S3 با Node.js چند تا مرحله باید انجام بدیم:

📥 نصب پکیج‌های مورد نیاز:
اول از همه باید پکیج‌های aws-sdk و multer رو نصب کنیم. aws-sdk کتابخانه‌ای هست که AWS رو به Node.js متصل می‌کنه و multer هم برای مدیریت فایل‌های آپلودی استفاده می‌شه.

npm install aws-sdk multer

⚙ کانفیگ AWS:
حالا باید کلاینت AWS رو کانفیگ کنیم. برای این کار نیاز به accessKeyId و secretAccessKey دارید که باید از کنسول AWS بگیرید.

const AWS = require('aws-sdk');

AWS.config.update({
    accessKeyId: 'YOUR_ACCESS_KEY_ID',
    secretAccessKey: 'YOUR_SECRET_ACCESS_KEY',
    region: 'YOUR_REGION'
});

const s3 = new AWS.S3();

🔧 ساختن تابع آپلود:
حالا بیایم یه تابع ساده برای آپلود فایل بسازیم. این تابع فایل رو از کلاینت میگیره و به S3 آپلود می‌کنه:

const uploadFile = (file) => {
    const params = {
        Bucket: 'YOUR_BUCKET_NAME',
        Key: file.originalname,
        Body: file.buffer
    };

    return s3.upload(params).promise();
};

🧾 مدیریت فایل‌های آپلودی:
از multer برای گرفتن فایل‌ها از فرم استفاده می‌کنیم. به این شکل که فایل‌ها به عنوان buffer به تابع uploadFile پاس داده می‌شن:

const multer = require('multer');
const upload = multer();

app.post('/upload', upload.single('file'), async (req, res) => {
    try {
        const result = await uploadFile(req.file);
        res.send(result);
    } catch (error) {
        res.status(500).send(error);
    }
});

توی این کد، وقتی کاربر فایلی رو آپلود می‌کنه، ما از طریق multer اون فایل رو می‌گیریم و با استفاده از aws-sdk اونو به S3 ارسال می‌کنیم.

💡 نکات اضافی و پیشنهادها

🛡 ایمن‌سازی: حواستون باشه که accessKeyId و secretAccessKey رو توی کد قرار ندید. به جای اون‌ها از متغیرهای محیطی (environment variables) استفاده کنید.

📟 استفاده از presigned URLs: اگه می‌خواید کاربر مستقیماً از کلاینت خودش فایل رو آپلود کنه، می‌تونید از presigned URLs استفاده کنید که امنیت و عملکرد بهتری داره.

🔬 مانیتورینگ و مدیریت فایل‌ها: با استفاده از امکاناتی مثل CloudWatch یا S3 Events می‌تونید عملیات‌های مختلف روی فایل‌ها رو مانیتور کنید.
امیدوارم این آموزش به دردتون بخوره و بتونید به راحتی فایل‌هاتون رو با Node.js توی S3 آپلود کنید.


امید وارم براتون مفید بوده باشه :) ❤️

#node.js #s3 #aws #clound_storage

@ninja_learn_ir

#golden_sentence

💎 صبحمون رو با این جمله طلایی شروع کنیم 💎

🔸Programming is the art of algorithm design and the craft of debugging errant code.

برنامه‌نویسی معنای ترکیب هنر طراحی الگوریتم‌ها و مهارت رفع اشکالات کد است 👌

Ellen Ullman

موافقید با این جمله ؟؟؟

https://www.instagram.com/p/C_Bgvzls8vK

Channel | Group | YouTube

#WhatsThat #strapi

●● آشنایی با هدلس CMS جذاب Strapi 🚀 ●●

اِستِرَپی یک Headless CMS محبوب و جذابه که با NodeJS ساخته شده و بهتون این امکان رو میده که به راحتی APIهای سفارشی بسازید و مدیریتشون کنید.

مهم‌ترین ویژگی Strapi انعطاف‌پذیری بالای اون در ایجاد و مدیریت محتواس اگر علاقه مندید خیلی سریع و ساده بکند سایتتون رو بزنید پیشنهاد میکنم ازش استفاده بکنید ⚡

Channel | Group | YouTube

#reactjs #react_icons

●● چرا React Icons یه انتخاب مناسبه ؟ ●●

چون یک لایبرری فوق‌العاده برای React و NextJs هستش که به شما این امکان رو می‌ده تا به سادگی از مجموعه گسترده ای از آیکون‌ها با قابلیت سفارشی‌سازی بالا استفاده کنید.

مهم ترین ویژگیش اینه که مجموعه بزرگی از آیکون های معروف مثل FontAwesome، Material Design و ... رو داخل خودش جمع آوری کرده و جواب هر نیازی رو میده 🚀

🌐 مشاهده داکیومنت React-Icons

Channel | Group | YouTube

برای حمایت ازمون شیر و ری‌اکشن یادتون نره چون بهمون انرژی میده تا پستای بیشتر و با کیفیت تری بزاریم 😊❤️

#PWA

- میدونید PWA چیه ؟؟؟

#WhatsThat #PWA

●● تکنولوژی PWA چیست ؟! ●●

تکنولوژی Progressive Web Application  یا به اختصار PWA نوعی نرم‌افزاره که با استفاده از تکنولوژی‌های وب مثل HTML ،CSS ،JavaScript و Web Assembly ساخته می‌شه، اما تجربه‌ای شبیه به اپلیکیشن‌های موبایل رو بهتون ارائه می‌دهد.

ویژگی های کلیدی 🚀

➊ قابل نصب : کاربران می‌توانند این اپلیکیشن‌ها رو از طریق مرورگر نصب کنند و به آیکونش رو در صفحه اصلی دستگاه خود داشته باشند‌

➋ کارکرد آفلاین : وقتی اینترنت قطع باشه، PWA می‌تونه به کمک "سرویس ورکر"ها (Service Workers) کار بکنه.

➌ به‌روزرسانی خودکار : این اپلیکیشن‌ها همیشه به‌روز هستند و نیازی به آپدیت دستی ندارند.

➍ امنیت بالا : PWA فقط از طریق HTTPS عرضه می‌شه، یعنی ارتباطات بین کاربر و سرور رمزگذاری شده و امن است.

مزایای PWA ✅

➊ صرفه‌جویی در زمان و هزینه : یک بار توسعه برای همه پلتفرم‌ها کافی است.

➋ حجم کم‌تر : نسبت به اپلیکیشن‌های بومی، PWA حجم کمتری داره و سریع‌تر دانلود و نصب می‌شود.

➌ دسترسی آسان : کاربران بدون نیاز به فروشگاه‌های اپلیکیشن، به راحتی می‌تونند اپلکیشن های PWA را نصب و استفاده کنند.

در کل PWA ترکیبی از بهترین ویژگی‌های وب و اپلیکیشن‌های موبایل رو بهتون ارائه می‌دهه و تجربه کاربری رو بهبود می‌بخشه⚡

Channel | Group | YouTube

اگر دوست داشتید با ری‌اکشناتون بهمون انرژی بدید 🔥❤️

#css #animation

●● آشنایی با Keyframes ها در CSS ! ●●

با استفاده از Keyframes ها در CSS میتونید انیمیشن‌های جذاب و کاربردی با دستورای CSS بسازید و خیلی ساده با درصدها یا کلمه کلیدی (from, to) تغییرات استایل را در طول انیمیشن مشخص می‌کند.

نکته مهمی که هست اینه که بعضی از کامپوننت هارو با تیلویند در اختیارتون قرار میده و اگر هم نبود میتونید بدید چت جی‌پی‌تی و بهش بگید تبدیلش کنه به کد tailwind ⚡

🆔 Channel | Group | YouTube

#fun

- این قشنگ بود 🤣

🔸 پنج شنبه ها برای شادی روح اموات این کد رو ران بکنید

if(!mom.isAlive && !dad.isAlive){
     GOD.amorzesh([mom, dad])
}

#golden_sentence

💎 جمله طلایی امروز 💎

🔸Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

هر کسی می‌تونه کدی بنویسه که یک کامپیوتر بتونه اون رو را اجرا کنه، اما برنامه‌نویسان خوب کسانی هستند که میتونن کدی بنویسند که برای انسان‌ها هم قابل فهم باشد 🚀

Martin Fowler

- به نظرتون چجوری میتونیم به همچین کسی تبدیل بشیم ؟

Channel | Group | YouTube

#javanoscript  #js_trick

●● نزار بیشتر از یک بار کلیک کنه ❌ ●●

برای اطمینان از اینکه یک ایونتی فقط یک بار اجرا بشه داخل جاوااسکریپت، میتونید از ویژگی once توی ارگومان سوم ایونتتون استفاده کنید.

button.addEventListener('click',() => {
  alert('سلام رفیق 👋');
}, { once: true });

🌐 مشاده آنلاین مثال استفاده واقعی

🆔 Channel | Group | YouTube

سلام رفقا امیدوارم حالتون عالی باشه 🔥

میخوام یه ویدیو بسازم در مورد نحوه ساخت این ویدیو های آموزشی، چون چندین بار ازم سوال شد که چجوری اینارو میسازی و بک‌ گراندت رو حذف میکنی و خب خودم چندین ماه درگیر این چیزا بودم تا الان بالاخره یه روش خیلی ساده و سریع پیدا کردم

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

نکته : حتما اگر دوست داشتید ویدیوش رو بسازم شرکت کنید تو نظر سنجی تا به حد نصاب برسه

پس منتظر ویدیوش باشید 🔥
به زودی منتشر میشه

#javanoscript #js_trick

●● اطلاعات کامل باتری با جاوااسکریپت🔋●●

با استفاده از Battery Status Api میتونید سطح باتری، وضعیت شارژ شدن و دیگر اطلاعات مرتبط با باتری رو به دست بیارید و ازشون استفاده کنید.

نمونه کد 🚀

navigator.getBattery().then(battery => {
    console.log(`Battery level: ${battery.level * 100}%`);
    console.log(`Is charging: ${battery.charging ? 'Yes' : 'No'}`);
});

🌐 استفاده واقعی در وبسایت

🆔 Channel | Group | YouTube