بفرست براش 🌝💙

@CodeModule

دنبال ایده یا نمونه پروژه های حرفه ای هستی؟ 🤔

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


project-based-learnin 🌪


#repository #github
@CodeModule

میدونید چرا کیبورد هیچوقت نمیخوابه ؟
چون داره دو شیفت کار میکنه 😂

#fun
@CodeModule

❓پلتفرم Appwrite چیه و چرا باید یادش بگیریم؟

در واقع Appwrite یک پلتفرم متن‌بازه که به توسعه‌ دهنده ها (به خصوص برنامه‌نویسان front-end) این امکانو میده که برنامه‌هاشونو خیلی سریع‌تر از قبل توسعه بدن. هدف اصلی پلتفرم Appwrite جداکردن و ساده‌سازی تسک‌های back-end در توسعه بخش front-end برنامست و همین کار باعث میشه تا روند توسعه برنامه، سرعت قابل توجهی پیدا کنه.

پلتفرم Appwrite به توسعه‌دهنده این امکانو میده که به سادگی بتونه قابلیت‌هایی همچون احراز هویت (Authentication)، پایگاه‌داده‌ها (DataBases)، توابع (Functions) و فضای ذخیره‌سازی (Storage) رو به پروژه‌هاشون اضافه کنه🔥

شعار این پلتفرم محبوب، توسعه back-end برنامه، بدون عذاب و کار اضافیه. این پلتفرم تو کمپانی‌های بزرگی از جمله Apple، oracle، TikTok، intel و bosch مورد استفاده قرار گرفته.

‼️با استفاده از Appwrite، شما قادر خواهید بود که قابلیت‌هایی که پایین قید شده رو به پروژتون اضافه کنید:

◀️احراز هویت کاربر (User Authentication)

◀️روش‌های مختلف ورود و ثبت نام کاربران

◀️دیتابیس برای ذخیره‌سازی و سازماندهی

◀️توابع مختلف در برنامه


اگر طبق مستندات Appwrite جلو بریم، Appwrite برای این طراحی نشده که جایگزین تیم back-end توسعه یک برنامه بشه. بلکه هدف از طراحی این پلتفرم تجربه توسعه بهتر و شروع قوی‌تر پروژه‌های بزرگه.

Document 🌕

#platform #database #appwrite
@CodeModule

به اشتراک گذاشتن localhost با ngrok ⚡

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

به عبارت دیگر برنامه ngrok برنامه‌ای هست که دسترسی خارجی (یا همون دسترسی از طریق اینترنت) به سیستم‌های شخصی که پشت یک NAT یا فایروال پنهان شدن، امکان‌پذیر می‌کنه. این برنامه اساسا یک تونل TCP ساده و رمزگذاری‌شده هست؛ این تونل یک آدرس اینترنتی و فراهم می‌کنه که هرکسی می‌تونه به اون دسترسی داشته باشه، و سپس سمت دیگه تونل به سرویسی متصل بشه که به صورت محلی (local) در حال اجراست.

ایجاد تونل‌های امن به لوکال هاست با استفاده از ngrok 🔥

همونطور که گفتم ngrok یک ابزار سبک و فوق‌العاده هست، یک تونل امن روی دستگاه لوکال شما ایجاد می‌کنه و یک URL عمومی به شما میده که می‌تونید از اون برای دستیابی به سایت لوکال خود استفاده کنید.

زمانی که ngrok در حال اجرا هست، به همان پورتی که سرور لوکال وب شما روش اجرا میشه گوش می‌کنه و درخواست‌های خارجی رو به دستگاه لوکال شما پروکسی خواهد کرد.

بعد از دانلود ngrok، یک فایل آرشیو دریافت می‌کنید که باید اونو extract کنید. بعد از این که محل ذخیره اونو انتخاب کردید، یک گام ساده باقی میمونه تا اونو وادار کنید که به وب سرور شما گوش بده. باید بهش بگید که شما وب سرور لوکال خودتون و روی پورت ۸۰۸۰ تنظیم کرده‌اید. برای این کار کافیه در ترمینال تایپ کنید: ngrok http 8080. این باعث میشه که این نرم‌افزار شروع به گوش دادن روی پورت ۸۰۸۰ کرده و یک تونل امن ایجاد کنه.


Download 🌐

#ngrok #localhost
@CodeModule

Good Night 🌚✨

"به یاد داشته باش که همیشه با یک رویا به خواب بری و با یک هدف، برای رسیدن به رویا از خواب بیدار بشی"

@CodeModule

با Autoprefixer بیشتر آشنا بشید🔵

از ابزار Autoprefixer برای افزودن پیشوندهای مرورگر (vendor prefixes) به کدهای CSS به منظور حمایت از مرورگرهای قدیمی و جلوگیری از مشکلات سازگاری مرورگرها استفاده میشه. این ابزار به طور خودکار پیشوندهای مرورگرها رو به کدهای CSS شما اضافه می‌کنه.

کد زیر و در نظر بگیرید:

div { 
  transition: all 1s ease;
 }
 

برای اینکه این استایل بهترین پشتیبانی و در مرورگرهای مختلف داشته باشه باید به صورت زیر پیشوندگذاری بشه:

div {   
 -webkit-transition: all 1s ease; 
 -moz-transition: all 1s ease;                              ‌ -o-transition: all 1s ease; 
 transition: all 1s ease;
 }

قبلنا برای اینکه مجبور به نوشتن پیشوندها به صورت دستی نباشیم از ابزارهایی مثل پلاگین های Sublime استفاده می کردیم. به مرور با بوجود آمدن پیش پردازنده هایی (preprocessor) مثل Sass و Less یا Stylus می تونستیم از mixin ها برای اضافه کردن پیشوندها استفاده کنیم.

اما این روزها بازار ابزارهایی مثل Grunt و Gulp داغ هست و میشه از بسته هایی که برای این ابزارها نوشته شده برای کارهای مختلف استفاده کرد. یکی از این بسته ها Autoprefixer هست که معروف ترین ابزار این روزها برای نوشتن پیشوندها هست و گوگل استفاده از این ابزار و توصیه می کنه 💀

برتری که Autoprefixer نسبت به دیگر ابزارهای پیشوندگذاری داره اینه که بر اساس تنظیماتی که ما براش در نظر می گیریم و بر اساس آماری که از سایت caniuse داره، عملیات پیشوندگذاری و انجام میده.


اطلاعات بیشتر و نحوه استفاده از این ابزار و میتونید تو این مقاله مطالعه کنید⚡️


#autoprefixer #css
@CodeModule

🌾 همه چیز راجب وب سرور Nginx

در واقع Nginx که به صورت engine-ex تلفظ میشه، یک وب سرور اوپن سورسه‌ که از زمان ارائه موفق و اولیه خود به عنوان وب سرور، کاربرد داشته و امروزه به عنوان پروکسی معکوس، حافظه کش HTTP و سیستم(Load Balancing) تو انواع سرور مجازی هم استفاده میشه.

تفاوتی نداره که شما سرور مجازی آلمان رو دارید یا سرور مجازی ایران، در همه موارد می‌تونید از Nginx استفاده کنید.

با پیشرفت تکنولوژی های در بستر وب، وب سرور NGINX هم همراه با اون رشد کرده و امروزه از تمام اجزای وب مدرن، از جمله WebSocket، HTTP / 2، gRPC و پخش چند فرمت ویدیویی (HDS، HLS، RTMP و سایر موارد) هم پشتیبانی میکنه. همچنین در صورت نیاز به خرید ssl هم می‌تونید به راحتی روی سرور nginx اونو نصب کنید.


✅چند تا از مزایای Nginx


🔢 تجربهٔ‌ کاربری بهتر

استفاده از انجین ایکس زمان انتظار کاربران برای بارگذاری وب‌سایت رو کاهش میده و اینجوری تجربۀ کاربری ارزشمندی برای اونا میسازه.

🔢 سرعت بالاتر

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

🔢 قیمت به‌صرفه و خوب

این وب‌سرور نسبت به سایر وب‌سرورها قیمت معقول تری داره.

🔢 مدیریت درخواست‌های زیاد

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

🔢 ارتقا در زمان اجرا

اگر از nginx به‌عنوان وب‌سرور استفاده می‌کنید،‌ نیازی نیست نگران اختلال‌های احتمالی در زمان ارتقا باشید. این وب‌سرور در هنگام ارتقا تو عملکردش اختلالی ایجاد نمیشه.


❌چند تا از معایب Nginx


از nginx انتظار ندارید که گل بی‌خار باشه! انجین ایکس هم مثل همه وب‌سرورهای دیگه معایبی داره مثل:

🔢 به‌روزرسانی‌های کم و ویژگی‌های محدود

از آنجایی که افراد کمتری از این وب‌سرور استفاده می‌کنند، به‌روزرسانی‌هایی که این سازمان ارائه می‌کند نسبت به سایر رقبا کمتر است و ویژگی‌های کمتری روی وب‌سرور در اختیار کاربران قرار می‌گیرد.

🔢 نیاز به دانش فنی بالا

کار کردن با وب سرور انجین ایکس کار هر کسی نیست! تنها افرادی که اطلاعات فنی نسبتاً خوبی دارن می‌تونن از کار کردن با این وب‌سرور لذت ببرن.

⚡️به عنوان جانشین Nginx از چه وب سرور هایی میشه استفاده کرد؟

🔵وب سرور MS IIS
🔵وب سرور Apache
🔵وب سرور lite speed

اگر سایت بزرگ و پربازدیدی دارید، Nginx همون وب‌سروریه که به کار شما میاد؛ چرا که می‌تونه به‌طور هم‌زمان هزاران درخواست مخاطبان وب‌سایت شمارو پردازش کنه، بدون اینکه سرعت وب‌سایت کاهش پیدا کنه.


#nginx #webserver #web
@CodeModule

⬅️ کتابخانه ant design چیه و به چه کاری میاد؟

کتابخانه Ant Design دومین کتابخانه مشهور و پر استفاده جهت پیاده سازی UI در React.js هست. در حقیقت Ant Design یک design system اوپن سورس هست که بیش از 75 کامپوننت آماده و طرح از پیش ساخته شده در اختیار ما میزاره.
همچنین کمپانی های مشهور خیلی زیادی از جمله علی بابا در سطح جهانی از کتابخانه Ant Design تو اپ های ریکتی شون استفاده میکنن.

درصورتیکه از کتابخانه Ant Design در React استفاده کنیم، میتونیم به کامپوننت های مختلفی از جمله فرم، جدول، منو ، دکمه و .. دسترسی داشته باشیم. البته این کل مزیت Ant Design نیست!

برای باقی مزایای ant design میتونیم به موارد زیر اشاره کنیم : ⬇️

1⃣ طراحی یکپارچه و زیبا

🔢 قابلیت هماهنگی با استانداردهای طراحی

🔢 پشتیبانی از React و Angular

🔢 کامیونیتی فعال

خب حالا بریم کمی هم از معایبش بدونیم :⬇️

1⃣ حجم زیاد

🔢 نگهداری و تطابق دادنش با آپدیت های فریم ورک ها مشکله


کتابخانه Ant Design با تمرکز بر روی سادگی، یکپارچگی، اطمینان، ارتباطات و نوآوری، به توسعه‌دهنده ها ابزارها و کامپوننت‌های طراحی آماده ارائه میده تا به سرعت و با کیفیت به ساخت رابط‌های کاربری حرفه‌ای بپردازن.

برای یادگیری این کتابخونه میتونید به داکیومنتش مراجعه کنید 🔥

Document 🌕

#ui #react #angular #ant_design
@CodeModule

Good Night 🌚✨

موفقیت نسیب کسیه که یک ثانیه دیرتر نا امید میشه و یک لحظه دیرتر دست از تلاش برمیداره.
مواظب همین «یک» های ساده باشید…

@CodeModule

🎤میخوای هرچی که میگی تبدیل به متن بشه ؟ پس این ابزار خفن مال خودته

🔥 برنامه  Speechnotes

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

لینک دانلود اپلیکیشن 🧑‍🦽

#tools
@CodeModule

همه چیز راجب گردش کار Gitflow 💀


در واقع Gitflow یک مدل branching هست که برای مدیریت کدهای منبع با استفاده از Git استفاده میشه. این مدل توسط Vincent Driessen توسعه داده شد و به طور گسترده‌ای توسط توسعه‌دهندگان استفاده میشه.

در Gitflow، مخازن Git به صورت 5 branch اصلی تقسیم میشن⬇️

شاخه Master: این branch برای حالت production پروژه استفاده میشه و شامل کدهای پایدار و آماده برای انتشار هست.

شاخه Develop: این branch به عنوان مسیر اصلی توسعه برای تیم استفاده میشه و شامل کدهای جدید و تغییرات نسخه های بعدی هست.

شاخه Feature: در این branch‌ ویژگی‌های جدید و تغییرات بزرگ توسعه داده میشود. هر feature به طور جداگانه ایجاد میشه و پس از کامل شدن، به branch develop ادغام میشه.

شاخه Release: پس از اتمام توسعه و تست‌های لازم، یک release branch از develop ایجاد میشه. این branch برای آماده‌سازی برای انتشار نسخه استفاده خواهد شد.

شاخه Hotfix: در صورت بروز مشکلات یا باگ‌های اساسی در نسخه‌های تولیدی، branch hotfix ایجاد شده و پس از اصلاح باگ‌ها، به همه branch‌های مناسب (مانند master و develop) ادغام می‌شود.

استفاده از GitFlow، مزایایی همچون سازماندهی موثر تغییرات، افزایش امنیت کد و امکان انتقال به‌روزرسانی‌ها به نسخه‌های پایدار تر و فراهم می‌کنه.
همچنین استفاده ازش برای تیم‌های بزرگ و پروژه‌هایی که با چرخه عمر طولانی هستن بسیار مناسبه ⚡️


#gitflow
@CodeModule

چرا باید از Vite.js استفاده کنیم؟ 💌

(ویت) Vite.js ابزاریه که بر اساس زبان برنامه نویسی جاوا اسکریپت ساخته شده و قصد داره تو توسعه سریع تر پروژه به توسعه دهندگان کمک کنه. 

در واقع Vite.js یک Build Tool و Local Development Server هست.

هدف از توسعه چنین ابزاری نیز ساده‌‌سازی فرایند توسعه وب اپلیکیشن‌ها و اجرای اوناست. اصلی‌ترین ویژگی که باعث می‌شه تا توسعه دهنده ها از این ابزار استفاده کنن اینه که می‌تونه به صورت داینامیک یک وب اپلیکیشنو اجرا بکنه، در این حالت در زمان Reload کردن برنامه، نیازی نیست که کل اونو از اول کامپایل یا Recompile کنید.

🗝ویژگی‌های کلیدی ViteJS

ابزارهایی مانند Webpack و Rollup کمک زیادی به جریان توسعه وب اپلیکیشن‌ها کردن. اما این موارد نسبتا قدیمین و با پیچیده تر شدن کدبیس اپلیکیشن‌ها، تو بعضی از سناریوها نمی‌تونن پاسخگوی نیازای ما باشن. برای مثال Rollup دیگه جوابگوی وب اپلیکیشن‌های پیچیده نیست و به همین دلیل ViteJS ایجاد شد تا این مشکلاتو حل کنه.

💙دلیل محبوبیت Vite.js چیه؟

یکی از اصلی‌ترین ويژگی‌هایی که باعث می‌شه ViteJS محبوب باشه سرعت بالای اون تو Reloading هست. Dev Server هایی که از Bundler استفاده می‌کنن معمولا برای اجرا کردن کد به زمان زیادی نیاز داشتن، اما حالا Vite.JS با داشتن پشتیبانی محلی از اکمااسکریپت یا ESM مستقیما اونارو تو مرورگر اجرا میکنه و زمان اجرا کدارو بالاتر برده.
در واقع ViteJS این میزان از سرعتو مدیون مدل HMR یا Hot Module Replacement هست.

‼️به این هم اشاره کنم که HMR به این معنیه که ماژول‌ها می‌تونن به صورت مستقل از المان‌های دیگه خودشانو جایگزین یا بروزرسانی کنن. البته ابزارهای دیگه ای هم هستن که از این مدل پشتیبانی میکنن اما Vite.JS با استفاده کردن از ESM به صورت محلی یا لوکال، سرعت این حالت رو بیش از پیش سرعت داده.

❓به صورت پیشفرض از چه قالب های جاوا اسکریپتی پشتیبانی می‌کنه؟

🔵 قالب Vanilla
🔵 قالب Vue.js
🔵 قالب React.js
🔵 قالب Preact.js
🔵 قالب Svelte.js
🔵 قالب Solid.js
🔵 قالب Qwik.js

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


Document 🌕

#js #web
@CodeModule

Good Night 🌚✨

"روزای بد رو همه دارن، کسی موفق میشه که جا نزنه و برای هدفش تلاش کنه"

@CodeModule

چگونه یک commit با معنا در git بنویسیم؟ 💀

نوشتن کامیت خوب یک هنره و این زمانی بیشتر خودشو نشون میده که در یک تیم مشغول به کار باشید.

قدرت گیت در کارهای تیمی خیلی مشخص تره و رعایت کردن یکسری استاندارد بین افراد یک پروژه میتونه روند کار و سریعتر و اشتباهات و کاهش بده. یکی از این استانداردها قطعا تدوین قوانینی برای نوشتن توضیحات برای Commit ها در گیت هست.


هدف از نوشتن commit با معنا چیه؟ 🤔

🔵 تولید خودکار فایل CHANGELOG.md توسط اسکریپت

🔵 در نظر نگرفتن بعضی از کامیت های بی اهمیت با git bisect (مثل فورمت کردن کدها)

🔵 داشتن اطلاعات بهتر و کاراتر هنگام بازببینی تاریخچه کامیت ها


هر خط از پیغام کامیت نباید بیشتر از 100 کاراکتر باشه. همین باعث میشه که خوندن متن کامیت هم در گیتهاب و هم در سایر ابزار های گیت آسون تر باشه. هر متن کامیت دارای سرآمد (header)، بدنه (body) و بخش زیرین (footer) هست که توسط خط خالی (Blank line) از هم جدا میشن.


متن سرآمد

متن قسمت سرآمد یک خطه که به صورت خلاصه وار توضیحاتی در مورد تغییرات ارائه میده و شامل نوع (type)، محدوده [تغییرات] (scope) و موضوع (subject) هست.

کامیت ها باید با یه سری تایپ های مشخص و تعیین شده شروع بشن تا کامیت حرفه ای تر باشه. یه سری از تایپ های پر کاربرد:


🔵 feat
🔵 fix
🔵 docs
🔵 refactor
🔵 test
🔵 chore


متن بدنه

تو این بخش باید انگیزه دولوپر برای تغییر قسمتی از کد که قراره به گیت اضافه بشه گفته، و تفاوت و به صورت خلاصه شرح بده.

متن بخش زیرین

در این بخش برخی اطلاعات خاص در مورد commit ارائه میشه مثل BREAKING CHANGE.
این مورد در فوتر به عنوان یک توضیحات آورده میشه. همونطور که از اسمش هم مشخصه اگه یک تغییر اساسی در پروژه و فایلی داشتیم این مورد باید حتما اضافه بشه.



اطلاعات بیشتر و میتونید تو این مقاله مطالعه، و یک پله خودتون و نسبت به سایر دولوپر ها حرفه ای تر کنید⚡️

#commit #git
@CodeModule

اگر توسعه دهنده فرانت باشید، حتما توی پروژه هاتون به کتابخانه هایی برای نمایش دادن نمودار ها (chart) نیاز پیدا میکنید.

تو این پست ۶ تا از بهترین کتابخانه ها در این زمینه رو معرفی میکنم تا بتونید توی پروژه هاتون، چارت هارو مثل آب خوردن هندل کنید😎


◀️کتابخانه Chart.js

◀️کتابخانه HighCharts

◀️کتابخانه C3.js

◀️کتابخانه Chartist

◀️کتابخانه Plotly

◀️کتابخانه Apexcharts.js


#library #js #chart
@CodeModule

با استفاده از این سایت، میتونید مقالات پرمیوم سایت مدیوم رو به صورت رایگان بخونید 😎

فقط کافیه لینک مقاله رو بنویسید و سپس روی دکمه Go کلیک کنید.

➡️Website◀️

#tool
@CodeModule

کابوس بک اند دولوپرا 😂😂


#fun
@CodeModule

Good Night🌚✨

"شکست خوردن و موفق شدن، هر دوی این
تجربه ها به یه اندازه اهمیت دارن"



@CodeModule

محبوب ترین theme های برنامه VsCode
در سال 2023 👨‍💻


1⃣ Github theme

🔢 Winter is coming

🔢 Monkai pro

🔢 Dracula

🔢 Tokyo night

🔢 Ayu

🔢 One dark pro

🔢 noctis



#vscode #theme
@CodeModule