Code Module | کد ماژول
1.91K subscribers
357 photos
42 videos
6 files
355 links
Hello World 🌎

<> Earth is programmable if you code it </>

Group 👇🏻
@CodeModuleGap

Contact Us 👇🏻
@MrShahiin
@neoMahan
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
ModuleTrick 🔢

توی این اپیزود قراره روش جدیدی برای استایل دهی به المنت های مشابه داخل یک والد و یاد بگیریم⚡️

#ModuleTrick #css
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥92
تفاوت کتابخانه (library) و فریم‌ورک (framework) چیه؟ 🧐

یکی از سوالای اساسی توی مصاحبه ها اینه که چه تفاوتی بین کتابخانه و فریم ورک هست؟

🔵 تفاوت اصلی بین کتابخانه و فریم‌ورک در “وارونگی کنترل (inversion of Control)” هست. وقتی که شما یک method رو از کتابخانه فراخوانی می‌کنید، شمایید که بر رویکرد اون کنترل دارید. اما در فریم‌ورک این‌مسئله برعکسه.

فریم‌ورکه که کدهای شما و فراخوانی می‌کنه.

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

🔵 در سمت دیگه، کتابخانه هیچ چیزی رو برای شروع در اختیار شما نمیزاره. در مقابلِ فریم‌ورک، ویژگی‌های محدودتری در کتابخانه وجود داره. همچنین برای استفاده گسترده‌تر از اونا باید از ویژگی‌های ثالث (third-party) دیگر استفاده کنید.

🔵 فریم‌ورک، تمامی جریان (flow) رو در کنترل خود داره و نقاطی از پیش تعریف‌شده وجود داره که شما باید، با کد‌های خودتون اونا رو تکمیل کنید. همچنین فریم‌ورک معمولاً پیچیده‌تر هستن.

🔵 فریم‌ورک اسکلتی رو تعریف می‌کند که در اون، برنامه ما ویژگی‌های خاص خودشو برای تکمیل‌کردن این‌اسکلت به اون اضافه میکنه. از این‌طریق، فریم‌ورک در زمان موردنیاز کدهای شمارو فراخوانی ‌می‌کنه.
در هردوی اونا – فریم‌ورک و کتاب‌خانه، APIهای تعریف شده‌ای موجوده که توسط برنامه‌نویسان، مورد استفاده قرار می‌گیره.

در نهایت میشه به این نتیجه رسید که کتابخانه، تو توسعه ویژگی‌های اپلیکیشن به ما کمک می‌کنه و فریم‌ورک اسکلت اون رو تشکیل میده. در این‌میان API، اتصال دهنده‌ای برای استفاده هر‌دوی اونا در کنار هم است😉


#framework #library #different
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👌2
5 کتابخانه خفن ری اکت که احتمالا ازشون
بی خبری!
🔵


1⃣ کتابخانه Ant Design

کتابخانه Ant Design در ری اکت شامل مجموعه بسیار گسترده و متنوع از کامپوننت های از پیش ساخته شده و آماده برای توسعه اپیکیشن های ری اکتی هست!
این کتابخانه بیش از 75 کامپوننت آماده داره که هم ظاهر جذابی دارن و هم امکانات فوق العاده ای در اختیار ما میزارن.


🔢 کتابخانه React-motion

کتابخانه های خیلی زیادی برای بحث انیمیشن در ری اکت وجود دارن اما کتابخانه React-motion از spring configuration برای اعمال انیمیشن استفاده میکنه و پیچیدگی خیلی کمی داره.
پیاده سازی انیمیشن به کمک React-motion در ریکت خیلی آسونه و نیاز به یادگیری خاصی نداره.


🔢 کتابخانه Enzyme

کتابخانه Enzyme در ری اکت برای تست نویسی کاربرد داره و معمولا نسبت به سایر کتابخانه های تست نویسی در ری اکت محبوب تره.
کتابخانه Enzyme در ریکت خیلی انعطاف پذیره و به همین دلیل نسبت به سایر کتابخانه های تست نویسی در ریکت ترجیح داده میشه.


🔢 کتابخانه Advanced Cropper

کتابخانه React Advanced Cropper به ما اجازه میده تصاویر رو در اپیکیشن های ری اکتی، برش بدیم ( ابزار Crop )

همچنین میشه به کمک کتابخانه Advanced Cropper در ری اکت، سایز و نسبت تصویر رو تغییر داد ( Aspect ratio )


🔢 کتابخانه React Helmet

کتابخانه React Helmet یک کامپوننت بسیار کاربردیه که در زمینه مدیریت تگ head هر صفحه به ما کمک میکنه.

از اونجایی که خزنده های موتور های جستجوگر مثل گوگل از طریق تگ head هر صفحه متوجه میشن اون صفحه شامل چه اطلاعاتیه و بر این اساس رتبه بندی میشن، استفاده از کتابخانه React Helmet تو ری اکت ضروریه ( البته اگه نیاز به سئو داشته باشیم )


شاید یادگیری همه این کتابخانه ها ضروری نباشه اما به عنوان یک React Developer بهتره باهاشون آشنا باشید تا درصورت نیاز، از اونها استفاده کنید🔥


#react
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥62
This media is not supported in your browser
VIEW IN TELEGRAM
🛸 انجام بازی ماریو کارت از طریق تراشه نورالینک!

🔵اولین دریافت‌کننده تراشه مغزی نورالینک، حالا با ذهنش می‌تونه یه بازی رو پیش ببره! این تراشه مغزی امکان کنترل نشانگر ماوس یا کیبورد، تنها از طریق افکار و سیگنال‌های مغز رو ممکن می‌کنه...

#news #ai
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
6
تا حالا به این فکر کردید که چطور به صورت همزمان از چند ورژن Node.js استفاده کنیم؟ 🤟


با توجه به مشکلات وابستگی ها و آپگرید در ورژن های Node.js, بعضی اوقات نیازه از ورژن های دیگه ای استفاده کنیم

در این سناریو شما باید دو یا چند پروژه که ورژن های مختلف از Node.js دارن رو مدیریت کنید یا حتی ممکنه نیاز باشه ورژن ها رو آپگرید یا دانگرید کنید و این سرمنشا مشکلاتی هست.

راه حل این مشکلات NVM هست🔥

ماژول Node version manager توسط Creationix نوشته شده. این اسکریپت ورژن های مختلف فعال Node.js رو مدیریت میکنه تا بتونید برنامه ها با ورژن های متفاوت Node رو نصب کنید.

برای نصب nvm شما باید CURL یا WGET رو نصب کرده باشید.

برای دانلود و نصب curl در ویندوز میتونید از این لینک و برای دانلود wget از این لینک استفاده کنید.

تو داکیومنت nvm توضیحات بیشتری هست و پیشنهاد میکنم اگه علاقه مند هستید حتما یه سر بزنید😎

#node #nvm
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥82
نوبتی هم ک باشه، نوبت معرفی فریم ورک Svelte هست😀

فریم ورک Svelte، یک فریم ورک جاوا اسکریپته که از سال 2016 برای استفاده در اختیار توسعه دهندگان وب قرار گرفته. Svelte مثل انگولار، React.js و Vue.js این امکان و فراهم می‌کنه تا یک برنامه نویس به صورت بهینه کدنویسی کنه و با دردسر کمتری کد خودش و تغییر، و با استفاده از یک رابط، آسون‌تر برنامه‌ی خودشو توسعه بده.

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


مهم ترین ویژگی های Svelte⬇️


1⃣ کم حجم بودن

حجم یک برنامه‌ی کامپایل شده با Svelte نسبت به سایر فریم ورک‌های جاوا اسکرپت بسیار کمتره اما چرا؟
چون Svelte، علاوه بر یک فریم ورک، یک کامپایلر هم هست 😎


🔢 فوق العاده سریع

اجرای برنامه با Svelte سریع تر خواهد بود، زیرا این فریم ورک تنها بخش‌هایی از رابط کاربری و بروز می‌کنه که تغییر کرده باشه. همچنین برخلاف Vue.js و دیگر چارچوب‌هایی که از DOM مجازی استفاده می‌کنن، Svelte از یک DOM مجازی استفاده نمی‌کنه


🔢 سینتکس ساده

سینتکس Svelte.js شبیه به HTML و CSS هست و این باعث میشه که بومی‌ترین برنامه‌نویس‌ها هم به راحتی با این فریم ورک آشنا شوند.


از Svelte برای توسعه‌ی یک برنامه به صورت مستقل یا در بخشی از یک برنامه‌ی دیگه، به عنوان یک کتابخانه میشه استفاده کرد. چون دارای پیاده‌سازی متفاوتی نیست و از روندی استفاده می‌کنه که در React ،Vue یا Angular وجود دارد.


Document 🌐

#svelte
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥32
تست نویسی چیه و به چه دردی میخوره؟ 🌀

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


فرآیند تست نویسی چطوری انجام میشه ؟

هر پروژه از چندین واحد تشکیل شده و هر واحد یه کار خاص انجام میده. حالا باید دید که هر کدوم از این واحد ها کاری که باید انجام بدن و با موفقیت به سرانجام میرسونن یا نه؟؟ برای این کار از مفهوم Unit Testing استفاده میشه، توی این مفهوم هر بخش از پروژه ما یه واحد یا Unit به حساب میاد و کد هایی نوشته میشه که اون Unit و تست کنند.
اگه توی اون تست موفق بودیم، به اصطلاح تستمون Pass میشه و ما تونستیم واحد مورد نظرمونو از نظر کارایی تست کنیم.


چرا باید تست نویسی انجام بدیم ؟

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


چالش های تست نویسی چیه ؟

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


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


#testing
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👌52
فریم ورک Million.js چیه و چه کاربردی داره؟🧐

فریم ورک Million یک DOM مجازی بسیار سریع و سبکه (<4 کیلوبایت) که اجزای React رو تا 70٪ سریعتر می کنه که این خیلی عالیه :))


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

ویژگی های اساسی این فریم ورک⬇️

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

ویژگی دوم پایداریه که امری حیاتی حساب میشه.
به همین دلیل کاملاً کامپایلر در Million 3 بازنویسی شده. این بازسازی بر این تمرکز داره که تجربه شما رو پایدارتر و قابل اعتمادتر کنه اما چطور ؟
با پوشش دادن یک طیف گسترده‌تر از سناریوها.


اطلاعات بیشتر راجب این فریم ورک و میتونید تو داکیومنتش مطالعه کنید.

Document 🌐

#dom #performance #js
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥74
🦎خزنده وب یا crawler چیه؟

برای معنی crawler داخل فارسی میتونیم از خزنده وب استفاده کنیم ولی خب کلمه انگلیسی اون درست و تخصصی تره حالا بگذریم. web crawler ها در واقع بخش اصلی و مرکزی یک موتور جستجو و تشکیل میدن. در واقع به زبان ساده، یک نرم افزار یا اسکریپت اتوماتیکه که با توجه به الگوریتم مشخص و هدفمند انواع موتورهای جستجو که براش تعریف شده، تو وب سایت های موجود میگردن و محتوای اونا رو داخل دیتابیس موتور جستجو یا همون سرچ انجین ذخیره می کنن.
هر کراولر سایت از الگوریتم و معماری منحصر به فرد و کاملا مخفی تشکیل شده. اسامی مختلفی برای کراولر در نظر گرفته شده و معروفترینشون اینا هستن : Web Spider, Automatic Indexer, Web Robots یا نرم افزار FOAF.

🕸 یک وب کراولر چجوری کار می کنه؟

امروزه سرچ انجین های زیادی وجود دارن مثل Google، Bing، Yahoo!، DuckDuckGo، Baidu، Yandex و ... که هر کدوم از این انجین ها، کراولر مخصوص به خودشونو برای نمایه بندی صفحات به کار میگیرن.

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

تمام صفحات موجود در اینترنت، توسط (hyperlinks) به یکدیگر متصل هستن. بنابراین، ربات های کراولر، میتونن این لینک ها رو کشف کرده و اونارو تا صفحات بعدی دنبال کنن. ربات های وب، تنها زمانی متوقف میشن که محل تمامی مطالب و وبسایت های متصل به هم رو پیدا کنن. و بعد، اطلاعات ثبت شده رو برای نمایه جستجو میفرستن که بر روی سرورهای سراسر دنیا ذخیره شده. تمامی این فرایند، شبیه به یک تار عنکبوت واقعیه که در اون همه چیز در هم تنیده شده.

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

#searchengin #browser
@CodeModule
🔥74👌2
بین phpstorm و vscode کدوم یکی بهتر و قدرتمند تره؟ 🤨

تو این پست قراره دو تا از برنامه های محبوب دنیا رو با هم مقایسه کنیم. احتمالا بدونین که vscode مال مایکروسافته و phpstorm هم مال جت برینز. اشاره کردن به این نکته خالی از لطف نیست.


🔢 قیمت

بین این دو محیط توسعه، vscode کاملا رایگانه و می تونید از سایت رسمی ویژوال استودیو دانلودش کنید. ولی phpstorm رایگان نیست و باید هر سال لایسنسشو تهیه کنید. البته چون ما تو ایرانیم نیازی به خرج نیست و سایت هایی مثل سافت ۹۸ اونو برای ما کرک میکنن.


🔢 حجم

نرم افزار phpstorm حدود ۴۰۰ مگابایته و vscode هم حدود ۸۰ مگ. ممکنه سوال پیش بیاد که چرا انقدر توی حجم با هم تفاوت دارن؟ دلیل اصلی اینه که vscode با پلاگین هاش کار می کنه و بدون پلاگین واقعا چیز قدرتمندی نیست.
وقتی این برنامه رو نصب می کنید هیچ پلاگینی از قبل روش نیست و خودتون باید دونه دونه پلاگین هایی که نیاز دارید و پیدا و نصب کنید. اما phpstorm از اول یه پکیج کامله و نیازی به نصب پلاگین خاصی نداره و از اول با قدرت براتون کار می کنه.


🔢 پشتیبانی از زبان ها

یه نکته ای که اینجا هست اینه که vscode می تونه تقریبا همه زبان ها رو پشتیبانی کنه. ولی میشه گفت phpstorm به صورت تخصصی تر برای یه مبحث آماده شده.
مثلا pycharm به صورت تخصصی برای برنامه نویسی پایتون ساخته شده. به خاطر همین phpstorm به نظر دقیق تر و قوی تره. همچنین کامپلیشن phpstorm از vscode خیلی قدرتمند تره.


🔢 نیازمندی‌های سیستمی

برای استفاده از phpstorm باید سیستم قدرتمند و خوبی داشته باشید.
اما vscode به عنوان یک IDE سبک، روی سیستم‌های متوسط و ضعیف هم کار میکنه.




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



#vscode #phpstorm
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥104
آره خلاصه فکر ۶ ماهه برنامه نویس شدن و از سرت بیرون کن 😁


#fun
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
😁11👌5💔4
تو این پست قراره زبان برنامه نویسی Swift و باهم بررسی کنیم ⌨️

سوئیفت اسم یک زبان برنامه نویسی همه منظوره، چند پارادایمی و اوپن سورسه که ازش برای توسعه iPadOS، macOS، tvOS، watchOS و IOS استفاده میشه. بر طبق اعلام سایت swift.org، این زبان برنامه نویسی به طوری طراحی شده که سریع، رسا و امنه و در ضمن جایگزین خوبی هم برای زبان‌های مبتنی بر C هست. این زبان برای حل کردن مشکلات زبان قدیمی‌تر اپل، یعنی Objective – C طراحی شده و الهام گرفته از برخی زبان‌های برنامه نویسی نظیر C+، پایتون، روبی و… هست.


مزیت‌های زبان برنامه نویسی Swift🔥


🔢 مدرن بودن

خواندن و نگهداری از APIهای سوئیفت کار سختی نیست. اونها انواع استنباطی کد شما رو تمیزتر و کمتر مستعد خطا می‌کنن.


🔢 سریع و قدرتمند

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


🔢 امنیت بالا

این زبان برخوردار از بسیاری از ویژگی‌های امنیتی نظیر مدیریت خودکار حافظه، داده‌های Value Type و مقداردهی اولیه به متغیرها هست. در این زبان هیچ شئ‌ای نمی‌تونه خالی باشه و اگر از همچین شئ‌ای استفاده کنید، کامپایلر این زبان جلوی شما رو خواهد گرفت.


🔢 یادگیری راحت و آسان

طراحی زبان سوئیفت با توجه به نیازهای برنامه نویسان تازه‌کار صورت گرفته و سادست.


🔢 برخورداری از کامیونیتی بزرگ

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



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


Document 🌐

#ios #swift
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥5
قطعا همتون با Cdn ها آشنا هستید اما به صورت تخصصی چیه و چه کاری انجام میده؟🧐


در اصل CDN مخفف Content Delivery Network میباشد و وظیفه اون رسوندن و توزیع محتوا و اطلاعات شما به سرور بازدیدکننده سایت هست.
با استفاده از این سیستم، سرعت ارسال اطلاعات به بازدیدکنندگان سایت افزایش پیدا می‌کنه و زمان بارگذاری صفحات تا حد زیادی کاهش پیدا می‌کنه.


مزایای استفاده از CDN چیه ؟

1⃣ ارتباط و همخوانی راحت با مدیریت محتوای وردپرس

2⃣ بهبود وضعیت سئو سایت

3⃣ سرعت بیشتر سایت و افزایش رضایت بازدیدکنندگان

4⃣ افزایش تعداد صفحات بررسی شده در روز توسط ربات های گوگل

5⃣ کاهش مصرف پهنای باند و ترافیک هاست


تاثیر CDN بر روی عملکرد سایت چطوره ؟

◀️ شبکه توزیع محتوا یا همان CDN تمامی سرورهای شبکه جهانی اینترنت رو پوشش میده. بنابراین زمانیکه شما این سیستم رو برای سایتتون فعال میکنین، اطلاعات شما روی تمامی این سرورها کپی و ذخیره میشه و زمانیکه یک بازدیدکننده به سایت یا وبلاگ شما وارد میشه محتوای سایت شامل تصاویر و متون رو از نزدیک ترین سرور دریافت میکنه و مستقیما به هاست یا سرور شما وصل نمیشه. این کار موجب بهبودی قابل توجهی تو عملکرد سایت شما داره.

◀️ در اصل CDN تمام اطلاعات ثابت شما مثل تصاویر، کدهای CSS و javascript و فایلهای ویدئویی شمارو پشتیبانی میکنه و تنها اطلاعاتی که قابل تغییر و بروزرسانی هستن مثل متون و کدهای HTML از سرور اصلی شما کال میشن. با این کار مصرف پهنای باند هاست شما کاهش پیدا میکنه و هزینه ای که سالانه بابت اون میدید کاهش چشمگیری خواهد داشت.

◀️ تفاوت سرعت و عملکرد برای خودتون یا افرادی که در نزدیکی سرور اصلی شما هستند آنچنان تفاوت زیادی نداره، ولی برای کسایی که از خارج از کشور به سایت شما وارد میشن این افزایش سرعت ناشی از CDN کاملا محسوسه. با توجه به اینکه سایتهای ایرانی معمولا سرور و هاستشونو از خارج و کشورهایی مثل آلمان و آمریکا تهیه میکنند و عموم بازدیدکنندگان از داخل کشور هستن، استفاده از CDN میتونه خیلی موثر باشه.


#cdn #web #performance
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥84
آشنایی با فریم ورک Tailwind CSS و مقایسه اون با Bootstrap 💀

فریم ورک Tailwind یک فریمورک CSS مبتنی بر ایده utility-first هست که تو مدت کوتاهی تونسته طرفدارای بسیار زیادی و پیدا، و محبوبیت زیادی و کسب کنه. دادن قابلیت توسعه سریع به افراد برای طراحی و توسعه رابط کاربری یکی از دلایل بالا رفتن میزان محبوبیت این فریم ورک هست.

مزایای فریم ورک Tailwind

1️⃣ کنترل روی استایل‌دهی به المان‌ها

سیستم Tailwind یک استایل پیشفرض برای المان‌ها نداره و شباهتی تو این زمینه با سایر فریم ورک ها نداره. به همین دلیل شما می‌تونید کنترل کامل روی ظاهر المان‌ها داشته باشید.

2️⃣ پروسه استایل‌دهی سریع‌تر

زمانیکه بحث به استایل‌دهی به المان‌های HTML میرسه هیچ فریمورکی نمی‌تونه به سرعت Tailwind این کار و برای شما انجام بده. نتیجه این موضوع خروجی گرفتن سریع کاربر از المان‌های HTML میشه.

3️⃣ رسپانسیو

تمام المان‌ها و استایل‌های مربوط به Tailwind بصورت رسپانسیو شده به شما ارائه میشه. به همین دلیل این فریمورک از میزان رسپانسیو و Mobile first بودن بالایی برخوردار هست.

4️⃣ کتابخانه های کاربردی

خیلیا معتقدن Bootstrap به دلیل داشتن کامپوننت های آماده، یه پله از Tailwind جلو تره.
اتفاقا کتابخانه های کاربردی زیادی تو این بحث برای Tailwind وجود داره که کامپوننت های آماده و به ما تحویل میدن.
بین این کتابخانه ها Flowbite و بهتون پیشنهاد میکنم.

فرق بین Tailwind با Bootstrap چیه؟

فریم ورک Bootstrap برای طراحی و توسعه صفحات وب سمت کاربر به صورت واکنش گرا محسوب میشه.
این فریم ورک رایگان و اپن-سورسه که با استفاده از کلاس ها و کامپوننت های از پیش آماده شده باعث تسریع روند توسعه میشه. در مقابل،‌ Tailwind محبوب ترین فریم ورک CSS با ایده ی Utility-first برای توسعه سریع رابط کاربری محسوب میشه 👨‍💻

آیا Tailwind از Bootstrap بهتره؟

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


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


Tailwind Document 🌐

#bootstrap #tailwind
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👌53
افزودن جادو به وبسایت با کتابخانه GSAP

یکی از کتابخانه های قدرتمند جاوااسکریپتی برای استفاده از انیمیشن در صفحات HTML، کتابخانه GSAP هست.

این کتابخانه قابلیت ایجاد انیمیشن برای هر المانی در صفحه، مثل div ها و svg ها رو داره. از ویژگی های GSAP که اونو نسبت به سایر کتابخانه های جاوااسکریپتی قدرتمند تر می‌کنه میشه به موارد زیر اشاره کرد⬇️

1️⃣ سادگی و راحتی در استفاده

2️⃣ سرعت و کیفیت اجرای بالا

3️⃣حجم بسیار کم کتابخانه

4️⃣ وجود افزونه های متنوع برای کارهای مختلف

5️⃣ مستندهای خوب و جامع

6️⃣ وجود مثال و نمونه کد های فراوان

7️⃣ جامعه کاربری (community) خوب


برای استفاده از این کتابخانه در پروژه خود میتونید از یکی از روش‌های زیر استفاده کنید⬇️

🔵 استفاده از CDN
🔵 نصب توسط npm (یا yarn)

برای اتصال کتابخانه به پروژه خودتون با استفاده از cdn، میتونید از کد زیر استفاده کنید

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"> 
</script>


برای نصب این کتابخانه با استفاده از npm هم میتونید دستور زیر و در ترمیتال پروژه خود وارد کنید

npm install gsap


بدون شک GSAP یکی از قدرتمندترین کتابخانه های جاوااسکریپتی موجود برای استفاده از انیمیشن در صفحات html هست. برای آشنایی بیشتر با این کتابخانه بهتون پیشنهاد میکنم به داکیومنت این کتابخانه مراجعه کنید.

Document 🌐

#animation #gsap
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥93
یه سایت کاربردی برای حذف بک گراند اضافی
عکس ها
🔥

🔵 سایت Carve Photos سرویسی برای حذف پس زمینه از تصاویر ارائه میده که به راحتی با رقیب محبوب خود، یعنی RemoveBG رقابت می‌کنه و تمام جزئیات تصاویر رو با دقت بالا برش میده.

🔵 اما جذاب ترین قابلیت این سایت که اونو از رقیب خودش یعنی RemoveBG متمایز می‌کنه اینه که این امکان رو به شما میده تا به صورت کاملاً رایگان تمام تصاویرتون رو با کیفیت HD دانلود کنید.


carve.photos 🌐

#tools #ai
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥105
داکر (docker) چیه و چه کاربردی داره؟ 🐳


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


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

داکر براساس معماری کلاینت-سرور کار می‌کنه. این سرویس شامل کلاینت ، میزبان و رجیستری داکره. کلاینت برای اجرای دستورات مختلف کاربرد داره و هاست نیز وظیفه اجرای Daemon رو برعهده داره. در رجیستری نیز Imageهای داکر نگه‌داری می‌شن. کلاینت داکر از طریق REST API با daemon ارتباط برقرار می‌کنه و از این طریق می‌تونین کانتینرهای داکر رو ایجاد، اجرا و توزیع کنید. هم کلاینت و هم daemon رو می‌تونین روی یک سرور اجرا کنین و یا به صورت ریموت اونها رو روی دو سرور مجزا اجرا کنین.


داکر چه کاربرد هایی داره؟

1️⃣ توسعه سریع و پایدار نرم‌افزارهای مختلف

2️⃣ اجرا و مقیاس‌بندی واکنش‌گرا

3️⃣ اجرای حجم کاری بیشتر روی سیستم

4️⃣ استفاده از دیتابیس‌های زودگذر

5️⃣ ابزارهای یکبار مصرف

6️⃣ اجرای کامل دسته‌های نرم‌افزاری



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


Document 🌐

#docker #software #platform
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥114👌4