5 کد ادیتور آنلاین و کاربردی ⚡️
🔴 Replit.com
🔴 Codepen.io
🔴 Codesandbox.io
🔴 Vscode.dev
🔴 Stackbiltz.com
#code_editor
@CodeModule
#code_editor
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡8🔥2👌2
این سایت کمک میکنه سریع تر کد بزنی! 💀
قطعا براتون پیش اومده که مجبور باشید یه سری استایل های پیور و به کلاس های tailwind ریفکتور کنید، اما حوصله و وقتشو ندارید.
با استفاده از این سایت، خیلی راحت میتونید کدهای خام css و به کلاس های tailwind تبدیل کنید😎
🔵 tailwind converter
#tools #tailwind
@CodeModule
قطعا براتون پیش اومده که مجبور باشید یه سری استایل های پیور و به کلاس های tailwind ریفکتور کنید، اما حوصله و وقتشو ندارید.
با استفاده از این سایت، خیلی راحت میتونید کدهای خام css و به کلاس های tailwind تبدیل کنید
#tools #tailwind
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡8🔥5👌3❤🔥2
آشنایی با 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
در واقع Kubernetes نوعی سیستم هست که وظیفه هماهنگ کردن برنامههای کاربردی و در حال اجرا روی کانتینرهای مجازی بر عهده داره. Kubernetes اغلب “K8s” نامیده میشه. K8s بهمنظور استقرار و مدیریت برنامههای ابری، از طریق زیرساختها و پلتفرمهای ابر عمومی و بصورت خودکار، استفاده میشه.
انعطافپذیر کردن برنامهها، اختصاص فضای ذخیرهسازی پایدار، مقیاسبندی خودکار و فعالیت مداوم برای حفظ وضعیت مطلوب نرمافزارها از جمله وظایف مهم و کلیدی این سیستم یاد شده.
تفاوت Docker با Kubernetes چیه ؟
همونطور که توی پست های قبل توضیح دادیم، docker یک سکو و پلتفرم نرمافزاریه که بهمنظور ساخت و ایجاد برنامههای کاربردی کانتینری استفاده میشه. درحالی که Kubernetes یا K8s وظیفه خودکار کردن ابزارهای مختلف و از جمله فرآیند اجرای برنامههای کانتینری و cloud native application ها رو که با استفاده از Docker ساخته شدن رو بر عهده داره.
در نهایت Kubernetes تاریخچهای ۱۵ ساله داره و به لطف این پشتوانه و جامعه بزرگ توسعهدهنده هایی که اونو بهینه میکنن، تونسته که به یکی از موفقترین نمونهها در دنیا متنباز تبدیل بشه و انتظار میره در آینده هم شاهد افزایش و پیشرفت این ساز و کار کارآمد باشیم
برای یادگیری kubernetes میتونید به داکیومنتش مراجعه کنید.
Document
#kubernetes #containers #different #docker
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7⚡3❤🔥2
ایجاد تصویر با هوش مصنوعی 🤖
ابزاری که توی این پست معرفی میکنیم یکی از اولین هوش مصنوعی ها برای تولید تصاویر هست و قادره، تصاویر رو به شکلهای خلاقانه و هنری تبدیل کنه.
برای استفاده از این ابزار کاربردی و خفن، میتونید به وب سایتش مراجعه کنید.😎
➡️ Website◀️
#ai #tools
@CodeModule
ابزاری که توی این پست معرفی میکنیم یکی از اولین هوش مصنوعی ها برای تولید تصاویر هست و قادره، تصاویر رو به شکلهای خلاقانه و هنری تبدیل کنه.
برای استفاده از این ابزار کاربردی و خفن، میتونید به وب سایتش مراجعه کنید.
#ai #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👌3
نمونه قرارداد پروژه های فریلنسری 🔥
تو این پست یک نمونه قرارداد برای پروژههای فریلنسری قرار دادم که بهتون کمک میکنه، پروژههای فریلنسریتون و به شکل حرفهایتر و شفافتر جلو ببرید، و احتمال بروز مشکلات حقوقی و کاهش بدید.
این قرارداد، جامع و برای پروژه های فریلنسری نرم افزاری و با نظارت کارشناس حقوقی آماده شده😎
https://7ln.ir/el7
#freelancer
@CodeModule
تو این پست یک نمونه قرارداد برای پروژههای فریلنسری قرار دادم که بهتون کمک میکنه، پروژههای فریلنسریتون و به شکل حرفهایتر و شفافتر جلو ببرید، و احتمال بروز مشکلات حقوقی و کاهش بدید.
این قرارداد، جامع و برای پروژه های فریلنسری نرم افزاری و با نظارت کارشناس حقوقی آماده شده
https://7ln.ir/el7
#freelancer
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥8🔥4⚡3
با استفاده از Wave سایتتو خوشگل کن!🔥
احتمالا همچین شکل هایی رو تو سایت های مختلف دیدید. امروز میخوام یه سایت بهتون معرفی کنم که با استفاده از اون، Wave های دلخواه خودتون رو به شکل های مختلف کاستوم کنید و به صورت svg یا png خروجی بگیرید⚡️
➡️ Website◀️
#tools
@CodeModule
احتمالا همچین شکل هایی رو تو سایت های مختلف دیدید. امروز میخوام یه سایت بهتون معرفی کنم که با استفاده از اون، Wave های دلخواه خودتون رو به شکل های مختلف کاستوم کنید و به صورت svg یا png خروجی بگیرید
#tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡6🔥3
ادیتور vim یکی از ادیتورهای پرطرفداره که امروزه برخی از برنامه نویسا از اون استفاده میکنن. نرم افزار Vim رایگان و اوپن سورسه که توسط Bram Moolenaar نوشته شده.
این ادیتور اولین بار در سال ۱۹۹۱ برای انواع یونیکس منتشر شد. هدف اصلی از ساخت اون ارتقاء ویرایشگر Vi بود که در سال ۱۹۷۶ منتشر شده بود. Vim در واقع به عنوان کلونی از نرم افزار قدیمی Vi هست که improved شده. همچنین مثل Vi این ادیتور هم command line محوره و مبتنی بر ترمیناله.
#vim #editor
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6⚡2
کد های مرتب با اکستنشن 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
اکستنشن Prettier، یکی از اکستنشن های محبوب طراح ها و توسعه دهنده ها تو ادیتور VsCode هست. این افزونه به شما امکان فرمتبندی خودکار کد با استفاده از قواعد خاص را میدهد تا کدهایتان به شکلی منظم و قابل خواندن تبدیل شوند.
با نصب و فعالسازی اکستنشن Prettier، شما میتونید کدهاتون و فرمتبندی، و از قواعد استانداردی برای قالببندی کد استفاده کنید. این افزونه همچنین امکاناتی برای پیکربندی سفارشی هم داره.
این اکستنشن بعد از نصب به صورت اتوماتیک فعال نمیشه و برای کانفیگ و فعالسازی اون آموزش کوتاه زیر رو آماده کردیم.
اکستنشن Prettier رو روی VsCode تون نصب کنید.
با زدن کلیدهای “, + Ctrl” یا دنبال کردن مسیر “File-> Preferences -> Settings” وارد بخش تنظیمات ادیتور VsCode میشیم، در کادر جستجو عبارت “format on save” رو سرچ می کنیم. در نهایت در گزینه های موجود تیک گزینه “Format on Save” رو میزنیم.
در همون کادر جستجوی تنظیمات عبارت “default formatter” رو سرچ کنید، کادر تنظمات Default Formatter رو باز کنید و آیتم “Prettier – Code Formatter” رو انتخاب کنید.
#extension #vscode #prettier
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡5🔥3
متد entries در جاوا اسکریپت ⌨️
این متد توی ES6 معرفی شده و مخصوص آرایه ها هست. با استفاده از متد ()entries میتونیم آیتم های یک آرایه در قالب یک شئ قابل تکرار یا ( Iterator ) در خروجی به نمایش در بیاریم.
📱 مثال:
❗️ همچنین با استفاده از این متد دیگه به ارور های شایع موقع پیمایش آرایه ها مثل ″Array is not iterable" بر نمیخوریم.
#js #debug #es6
@CodeModule
این متد توی 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 اومدیم آیتم های همین شئ قابل تکرار رو در خروجی به نمایش درآوردیم.
پس در خروجی ۲ بخش داریم، [ کلید یا شماره ایندکس آیتم ] + [ مقدار آیتم ]
}
#js #debug #es6
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👌2⚡1
با 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
ریکت نتیو یک فریم ورک برای توسعه اپلیکیشن های موبایله که به دولوپر اجازه توسعه برنامههای چند پلتفرمی ios و اندروید، با استفاده از عناصر بومی UI میده.
پایه این فریمورک زمان اجرای JavaScriptCore و مبدلهای Babel هست. React Native از ویژگی های جدید (JavaScript ES6) مثل توابع arrow و async/await و غیره پشتیبانی میکنه
مزایای React Native
این قالب کاری روش ساخت یک پایه کد تنها رو که میتونه برای Android و iOS ترکیب بشه، تقویت میکنه. این باعث میشه که دولوپرا برای کدنویسی انرژی کمتری صرف کنن.
در کنار اینها، یک مهندس جاوااسکریپت ماهر در تمام زمینهها میتونه یک برنامه تطبیقپذیر و با استفاده از این فریمورک توسعه بده، بدون اینکه درگیر اکوسیستم و مشخصههای زبانی هریک از OSها بشه.
برنامههای این فریم ورک، زمان بارگذاری سریعتری نسبت به برنامههایی که با مدل هیبریدی نوشته شدن، داره.
سینتکس React و React Native به طور کلی شبیه به یکدیگر هستن، چون React Native بر پایه React ساخته شده. پس اگه با React آشنا هستید، زمانی که به React Native میپردازید، بسیاری از مفاهیم و سینتکسها رو قبلاً تجربه کردید. این باعث میشه فرایند یادگیری و توسعه برنامهها، برای شما آسون تر بشه.
فریمورک React Native قطعا انتخاب خوبی برای شروع حوزه موبایل هست. اگه علاقه مند به یادگیری این فریم ورک هستید، یه سر به داکیومنتش بزنید.
Document
#reactNative
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡10🔥4
توی این پست میخوایم به فریم ورک خفن 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
در واقع NestJS یک فریمورک Node.js برای توسعه سیستم های بزرگ و چالش برانگیزه. با استفاده از این فریمورک، شما میتونید برنامه های مقیاس پذیر و آزمایش پذیر رو تو چارچوبی مشخص و ساختاری بسیار مناسب ایجاد کنید.
در حالی که Express.js هنوز یک فریمورک محبوب و پر کاربرد برای ساخت برنامه های وب با Node.js هست، NestJS طیف وسیعی از مزایا و ویژگی های اضافی رو ارائه میده که میتونه به شما تو ساخت برنامه های مقیاس پذیر، قابل توسعه و مطمئن تر کمک کنه.
برای یادگیری فریم ورک Nest.js میتونید به داکیومنتش مراجعه کنید.
Document
#nestjs #framework #nodejs #js
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👌2
زن: اون حتما داره به یه زن دیگه فکر میکنه!
مرد: اگر اسم فرزندم رو بزارم برنامه نویسی، پس من پدر برنامه نویسی خواهم بود.😂 😂
#fun
@CodeModule
مرد: اگر اسم فرزندم رو بزارم برنامه نویسی، پس من پدر برنامه نویسی خواهم بود.
#fun
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
😁16⚡1
تاحالا شده لازم باشه یک عکس کامل از صفحه سایتتون به کارفرما بدید و نمیدونستید چجوری باید این کارو بکنید ؟ 🧐
🧩 برای این کار میتونید از اکستنشن Go Full Page استفاده کنید تا بتونید یک عکس کامل از صفحه سایتتون بگیرید و در فرمت های pdf یا png خروجی بگیرید
این اکستنشن کاربردی رو میتونید از لینک زیر روی مرورگر کروم خودتون نصب کنید.🔥
Extension🌕
#tools #extension
@CodeModule
🧩 برای این کار میتونید از اکستنشن Go Full Page استفاده کنید تا بتونید یک عکس کامل از صفحه سایتتون بگیرید و در فرمت های pdf یا png خروجی بگیرید
این اکستنشن کاربردی رو میتونید از لینک زیر روی مرورگر کروم خودتون نصب کنید.
Extension
#tools #extension
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥6🔥3👌2
Marijn_Haverbeke_Eloquent_JavaScript_A_Modern_Introduction_to_Programming.pdf
17 MB
#book #js
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
👌6🔥4
Good Night 🌚 ✨
⌛️ زمان مناسب هيچوقت فرا نمیرسه!
☯️ شما هميشه خيلي جوون، خيلي پير، خيلي گرفتار، خيلي خسته هستین! اگر هميشه دنبال زمان مناسب بگرديد، هیچوقت به خواسته هاتون نمیرسيد!
@CodeModule
⌛️ زمان مناسب هيچوقت فرا نمیرسه!
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
👌12❤🔥3
امنیت در Frontend 🔒
هر فرانت دولوپر باید یک سری اصول امنیتی و تو پروژه هاش رعایت کنه. دو مقاله زیر، نکاتی راجب امنیت ارائه دادن که پیشنهاد میکنم حتما مطالعه کنید.
🔵 Medium
🔵 securitytrails
#frontend #security
@CodeModule
هر فرانت دولوپر باید یک سری اصول امنیتی و تو پروژه هاش رعایت کنه. دو مقاله زیر، نکاتی راجب امنیت ارائه دادن که پیشنهاد میکنم حتما مطالعه کنید.
#frontend #security
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡6🔥3