5 کد ادیتور آنلاین و کاربردی ⚡️


🔴Replit.com

🔴Codepen.io

🔴Codesandbox.io

🔴Vscode.dev

🔴Stackbiltz.com


#code_editor
@CodeModule

این سایت کمک می‌کنه سریع تر کد بزنی! 💀

قطعا براتون پیش اومده که مجبور باشید یه سری استایل های پیور و به کلاس های tailwind ریفکتور کنید، اما حوصله و وقتشو ندارید.

با استفاده از این سایت، خیلی راحت میتونید کدهای خام css و به کلاس های tailwind تبدیل کنید 😎

🔵tailwind converter


#tools #tailwind
@CodeModule

آشنایی با Kubernetes و تفاوت آن با Docker 🐚

در واقع Kubernetes نوعی سیستم هست که وظیفه هماهنگ کردن برنامه‌های کاربردی و در حال اجرا روی کانتینر‌های مجازی بر عهده داره. Kubernetes اغلب “K8s”  نامیده میشه. K8s به‌منظور استقرار و مدیریت برنامه‌های ابری، از طریق زیرساخت‌ها و پلتفرم‌های ابر عمومی و بصورت خودکار، استفاده میشه.


⚡️وظایف kubernetes چیه ؟

انعطاف‌پذیر کردن برنامه‌ها، اختصاص فضای ذخیره‌سازی پایدار، مقیاس‌بندی خودکار و فعالیت مداوم برای حفظ وضعیت مطلوب نرم‌افزار‌ها از جمله وظایف مهم و کلیدی این سیستم یاد شده.


☯️ ویژگی‌های قابل توجه Kubernetes

◀️کشف سرویس و بالانس کردن بار

◀️سازماندهی Storage و فضای ذخیره‌سازی

◀️جمع‌کردن و گسترش دوباره داده‌ها

◀️بسته‌بندی خودکار

◀️ویژگی Self-healing

◀️مدیریت و پیکربندی مخفی


تفاوت Docker با Kubernetes چیه ؟

همونطور که توی پست های قبل توضیح دادیم، docker یک سکو و پلتفرم نرم‌افزاریه که به‌منظور ساخت و ایجاد برنامه‌های کاربردی کانتینری استفاده میشه. درحالی‌ که Kubernetes یا K8s وظیفه خودکار کردن ابزارهای مختلف و از جمله فرآیند اجرای برنامه‌های کانتینری و cloud native application ها رو که با استفاده از Docker ساخته شدن رو بر عهده داره.

😉بسیاری از سازمان‌ها و شرکت‌ها از هر دو سیستم یعنی Docker و Kubernetes به‌صورت همزمان استفاده می‌کنن.

در نهایت Kubernetes تاریخچه‌ای ۱۵ ساله داره و به لطف این پشتوانه و جامعه بزرگ توسعه‌دهنده هایی که اونو بهینه می‌کنن، تونسته که به یکی از موفق‌ترین نمونه‌ها در دنیا متن‌باز تبدیل بشه و انتظار میره در آینده هم شاهد افزایش و پیشرفت این ساز و کار کارآمد باشیم

برای یادگیری kubernetes میتونید به داکیومنتش مراجعه کنید.😎

Document 🌕

#kubernetes #containers #different #docker
@CodeModule

ایجاد تصویر با هوش مصنوعی 🤖

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

برای استفاده از این ابزار کاربردی و خفن، میتونید به وب سایتش مراجعه کنید.😎

➡️Website◀️

#ai #tools
@CodeModule

نمونه قرارداد پروژه های فریلنسری 🔥

تو این پست یک نمونه قرارداد برای پروژه‌های فریلنسری قرار دادم که بهتون کمک می‌کنه، پروژه‌های فریلنسریتون و به شکل حرفه‌ای‌تر و شفاف‌تر جلو ببرید، و احتمال بروز مشکلات حقوقی و کاهش بدید.

این قرارداد، جامع و برای پروژه های فریلنسری نرم افزاری و با نظارت کارشناس حقوقی آماده شده 😎

https://7ln.ir/el7

#freelancer
@CodeModule

با استفاده از Wave سایتتو خوشگل کن!🔥

احتمالا همچین شکل هایی رو تو سایت های مختلف دیدید. امروز میخوام یه سایت بهتون معرفی کنم که با استفاده از اون، Wave های دلخواه خودتون رو به شکل های مختلف کاستوم کنید و به صورت svg یا png خروجی بگیرید⚡️

➡️Website◀️

#tools
@CodeModule

🌂 تا حالا اسم ادیتور VIM به گوشتون خورده؟

ادیتور vim یکی از ادیتورهای پرطرفداره که امروزه برخی از برنامه نویسا از اون استفاده می‌کنن. نرم افزار Vim رایگان و اوپن سورسه که توسط Bram Moolenaar نوشته شده.

🧑‍🎓 تاریخچه کد ادیتور vim

این ادیتور اولین بار در سال ۱۹۹۱ برای انواع یونیکس منتشر شد. هدف اصلی از ساخت اون ارتقاء ویرایشگر Vi بود که در سال ۱۹۷۶ منتشر شده بود. Vim در واقع به عنوان کلونی از نرم افزار قدیمی Vi هست که improved شده. همچنین مثل Vi این ادیتور هم command line محوره و مبتنی بر ترمیناله.


✅مزایای استفاده از ویرایشگر VIM چیه؟

🔵این نرم افزار در هر سیستمی قابل نصبه.

🔵می‌تونید از اون در دو حالت ترمینالی و گرافیکی استفاده کنید.

🔵حجم کمی داره

🔵قابلیت شخصی سازی بالایی داره و از یک فایل متنی ساده برای ذخیره این تنظیمات استفاده می‌کنه.

🔵پلاگین‌های خیلی زیادی داره که این پلاگین‌ها باعث افزایش قابلیت‌ها و کاربردهای این نرم‌افزار میشن.

🔵از قابلیت چند پنجره‌ای پشتیبانی می‌کنه. با استفاده از این ویژگی میشه صفحه نمایش رو به چندین بخش تقسیم کرد.

🔵از ویژگی چند زبانه‌ای (multiple tabe) پشتیبانی می‌کنه که اجازه میده تا توی چندین فایل کار کنید.

🔵دستورات Vim به سادگی به حافظه سپرده میشه.

🔵یادگیری نسبتا ساده

⚠️خوبه که بدونید ویرایشگر Vim به طور سنتی دارای محیط گرافیکی (GUI) نیست، اما به تازگی نسخه جداگانه‌ای به نام gVim ایجاد شده که محیط گرافیکی برای این ادیتور فراهم میکنه.

#vim #editor
@CodeModule

Good Night 🌚✨

"برای خود واقعی بودن نیازی به تأیید مردم نیست، خودت باش دوست من "


@CodeModule

کد های مرتب با اکستنشن Prettier 📥

اکستنشن Prettier، یکی از اکستنشن های محبوب طراح ها و توسعه دهنده ها تو ادیتور VsCode هست. این افزونه به شما امکان فرمت‌بندی خودکار کد با استفاده از قواعد خاص را می‌دهد تا کدهایتان به شکلی منظم و قابل خواندن تبدیل شوند.

با نصب و فعال‌سازی اکستنشن Prettier، شما می‌تونید کدهاتون و فرمت‌بندی، و از قواعد استانداردی برای قالب‌بندی کد استفاده کنید. این افزونه همچنین امکاناتی برای پیکربندی سفارشی هم داره.

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

1️⃣مرحله اول:

اکستنشن Prettier رو روی VsCode تون نصب کنید.

با زدن کلیدهای “, + Ctrl” یا دنبال کردن مسیر “File-> Preferences -> Settings” وارد بخش تنظیمات ادیتور VsCode میشیم، در کادر جستجو عبارت “format on save” رو سرچ می کنیم. در نهایت در گزینه های موجود تیک گزینه “Format on Save” رو میزنیم.

2️⃣مرحله دوم:

در همون کادر جستجوی تنظیمات عبارت “default formatter” رو سرچ کنید، کادر تنظمات Default Formatter رو باز کنید و آیتم “Prettier – Code Formatter” رو انتخاب کنید.

🔵در نهایت بعد از نصب و کانفیگ بندی، با هر بار تغییر و سیو کردن کد، prettier خودشو نشون میده و کدهاتون و مرتب میکنه🔥


#extension #vscode #prettier
@CodeModule

از فردا بدنا همه آرنولدی😂😂


#fun
@CodeModule

متد entries در جاوا اسکریپت ⌨️

این متد توی ES6 معرفی شده و مخصوص آرایه ها هست. با استفاده از متد ()entries میتونیم آیتم های یک آرایه در قالب یک شئ قابل تکرار یا ( Iterator ) در خروجی به نمایش در بیاریم.

📱 مثال:

var MyFriends = ["Reza","Ali","Shahin","Mani","Hesam"];
var result = document.getElementById("Result");
 
var MyIterator = MyFriends.entries();
 
for ( MyItem of MyIterator ) {
result.innerHTML = result.innerHTML + MyItem + "<br>";


در مثال بالا در خط ۶ ، اول آرایه مون رو به یک شئ قابل تکرار تبدیل کردیم، بعدش در خط ۸ و با استفاده از حلقه For/of اومدیم آیتم های همین شئ قابل تکرار رو در خروجی به نمایش درآوردیم.

پس در خروجی ۲ بخش داریم، [ کلید یا شماره ایندکس آیتم ] + [ مقدار آیتم ]
}

❗️همچنین با استفاده از این متد دیگه به ارور های شایع موقع پیمایش آرایه ها مثل ″Array is not iterable" بر نمیخوریم.


#js #debug #es6
@CodeModule

با React Native بیشتر آشنا بشید! 🔵

ریکت نتیو یک فریم ورک برای توسعه اپلیکیشن های موبایله که به دولوپر اجازه توسعه برنامه‌های چند پلتفرمی ios و اندروید، با استفاده از عناصر بومی UI میده.

پایه این فریمورک زمان اجرای JavaScriptCore و مبدل‌های Babel هست. React Native از ویژگی های جدید (JavaScript ES6) مثل توابع arrow و async/await و غیره پشتیبانی می‌کنه 💀


مزایای React Native⬇️

🔵کدنویسی آسان

این قالب کاری روش ساخت یک‌ پایه کد تنها رو که می‌تونه برای Android و iOS ترکیب بشه، تقویت میکنه. این باعث میشه که دولوپرا برای کدنویسی انرژی کمتری صرف کنن.


🔵 یک اکوسیستم

در کنار این‌ها، یک مهندس جاوااسکریپت ماهر در تمام زمینه‌ها می‌تونه یک برنامه تطبیق‌پذیر و با استفاده از این فریمورک توسعه بده، بدون اینکه درگیر اکوسیستم و مشخصه‌های زبانی هریک از OSها بشه.


🔵سریع بودن

برنامه‌های این فریم ورک، زمان بارگذاری سریعتری نسبت به برنامه‌هایی که با مدل هیبریدی نوشته شدن، داره.


🔵سینتکس شبیه به React.js

سینتکس React و React Native به طور کلی شبیه به یکدیگر هستن، چون React Native بر پایه React ساخته شده. پس اگه با React آشنا هستید، زمانی که به React Native می‌پردازید، بسیاری از مفاهیم و سینتکس‌ها رو قبلاً تجربه کردید. این باعث میشه فرایند یادگیری و توسعه برنامه‌ها، برای شما آسون تر بشه.


فریمورک React Native قطعا انتخاب خوبی برای شروع حوزه موبایل هست. اگه علاقه مند به یادگیری این فریم ورک هستید، یه سر به داکیومنتش بزنید.

Document 🌐

#reactNative
@CodeModule

Good Night 🌚✨

"درد موفق شدن موقته اما درد موفق نشدن همیشگی"

@CodeModule

توی این پست میخوایم به فریم ورک خفن Nest.js بپردازیم 😎

🌦 اول از همه، باید بدونیم NestJS دقیقا چیه؟

در واقع NestJS یک فریمورک Node.js برای توسعه سیستم های بزرگ و چالش برانگیزه. با استفاده از این فریمورک، شما میتونید برنامه های مقیاس پذیر و آزمایش پذیر رو تو چارچوبی مشخص و ساختاری بسیار مناسب ایجاد کنید.

🏤 فریم ورک NestJS به طور قابل توجهی تحت تأثیر Angular هست و یکی از ویژگی های مهم اون، dependency injection هست؛ این ویژگی، امکان تزریق یک ماژول به ماژول دیگرو فراهم میکنه و استفاده مجدد از کد رو خیلی بهینه تر میکنه.

‼️چرا باید از Nest.js استفاده کنیم ؟

🔴استفاده از Typescript

🔴معماری ماژولار

🔴تزریق وابستگی (Dependency Injection)

🔴اعتبارسنجی داخلی

🔴پشتیبانی از وب سرویس های مختلف

🔴جامعه برنامه نویسان فعال

در حالی که Express.js هنوز یک فریمورک محبوب و پر کاربرد برای ساخت برنامه های وب با Node.js هست، NestJS طیف وسیعی از مزایا و ویژگی های اضافی رو ارائه میده که میتونه به شما تو ساخت برنامه های مقیاس پذیر، قابل توسعه و مطمئن تر کمک کنه.

✅ چه در حال ساخت یک پروژه کوچک چه درحال توسعه ی یک برنامه سازمانی در مقیاس بزرگ باشید، NestJS قطعا ارزش بررسی و استفاده رو داره.

برای یادگیری فریم ورک Nest.js میتونید به داکیومنتش مراجعه کنید.⚡️

Document 🌕

#nestjs #framework #nodejs #js
@CodeModule

زن: اون حتما داره به یه زن دیگه فکر میکنه!

مرد: اگر اسم فرزندم رو بزارم برنامه نویسی، پس من پدر برنامه نویسی خواهم بود. 😂😂

#fun
@CodeModule

تاحالا شده لازم باشه یک عکس کامل از صفحه سایتتون به کارفرما بدید و نمیدونستید چجوری باید این کارو بکنید ؟ 🧐

🧩 برای این کار میتونید از اکستنشن Go Full Page استفاده کنید تا بتونید یک عکس کامل از صفحه سایتتون بگیرید و در فرمت های pdf یا png خروجی بگیرید

این اکستنشن کاربردی رو میتونید از لینک زیر روی مرورگر کروم خودتون نصب کنید.🔥

Extension 🌕

#tools #extension
@CodeModule

✌️ یک کتاب جامع و خوب برای توسعه دهنده های JavaScript

📖کتاب Eloquent JavaScript یک کتاب خوب برای یادگیری مباحث پایه ای و کاربردی جاوااسکریپته که برای افرادی که میخوان دانش جاوااسکریپتیشونو تقویت کنن مناسبه.

#book #js
@CodeModule

Good Night 🌚✨

⌛️ زمان مناسب هيچوقت فرا نمیرسه!

☯️ شما هميشه خيلي جوون، خيلي پير، خيلي گرفتار، خيلي خسته هستین! اگر هميشه دنبال زمان مناسب بگرديد، هیچوقت به خواسته هاتون نمیرسيد!


@CodeModule

امنیت در Frontend 🔒

هر فرانت دولوپر باید یک سری اصول امنیتی و تو پروژه هاش رعایت کنه. دو مقاله زیر، نکاتی راجب امنیت ارائه دادن که پیشنهاد میکنم حتما مطالعه کنید.


🔵Medium

🔵securitytrails


#frontend #security
@CodeModule

یکم خلاقیت تو اسم گذاشتن به خرج بدید 😂


#fun
@CodeModule