درود دوستان عزیز یه نکته کوچیک
یکی از مواردی که وقتی روی ادمین هایی که توسط دوستان توسعه داده شده اندمییبینم اینه که تکنولوژی فرانت ندارن و به صورت css,html هستند ، که فرد همه assets ها و لایبراری ها رو میاد یه جا تو master.blade.php لود میکنه حالا چون قالبی که خریده این کارو کرده و این کارباعث میشه داخل هر صفحه تمام این ها لود بشن این در حالی هستش که در هر ماژول ما یا اصلا نیاز به لایبراری نداریم یا اگر داریم به یکی از اونها نیاز داریم و ادمین در همه صفحات داره لود زیادی برای این لایبراری ها میگیره حالا بریم که بهترش کنیم
مورد اول اینکه برای هر صفحه یا ماژول assets های مورد نیاز خودش رو لود کنیم
مورد دوم اینکه میتونیم یک لودر برای خودمون بسازیم که خیلی ساده هم هستش که بتونیم داخل هر صفحه assets مورد نیاز رو لود کنه من برای این کار از Enum استفاده کردم و یک فایل لودر ساختم حالا چه مزیت هایی به من میده
· اینکه Typehint دارم مجبور نیستم مسیر assetsها رو بنویسم ( البته auto complete ide کمک میکنه )
· فایل های blade تمیز تری نسبت به حالت اول دارم
· اینکه میتونم به راحتی یک لایبراری یا یک استایل رو داخل کله پروژه جایگزین کنم
یک تیکه از کدش رو با مقایسه براتون گذاشتم امیدوارم مفید بوده باشه . سپاس

https://www.linkedin.com/posts/ali-mousavi-28938894_laravel-php-activity-7107694135981006848-f7GO

@TheRaymondDev

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

@TheRaymondDev

🔶 وایرفریم،یکی از‌ مهم‌ترین‌ مراحل طراحی✨

وايرفریم در واقع طرحی اولیه از محصول ما هست. ما با رسم و طراحی hashtag#وایرفریم اسکلت و ساختار اصلی وب سایت یا اپلیکیشن رو مشخص می‌کنیم ؛از وایرفریم‌ها همچنین می‌تونیم برای پیاده‌سازی اولیه ایده‌های مختلفی که داریم و بهتر کردنشون استفاده کنیم👌🏻

👈🏻 وایرفریم‌ها باتوجه به میزانی که از لحاظ جزییات به محصول نهایی شباهت دارن ،به سه نوع تقسیم میشن :
•وایرفریم با جزییات کم
•وایرفریم با جزییات متوسط
•وایر فریم با جزییات زیاد

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

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

📝تو پست های بعدی قراره وایرفریم های مختلف رو بهتون توضیح بدم👩🏻‍💻
📝اگر این پست براتون مفید بود،حتما اون رو با دوستای‌‌ طراحتون به اشتراک بزارید🚀🙏🏻

https://www.linkedin.com/posts/activity-7109167474171891712-UwOV?utm_source=share&utm_medium=member_desktop

@TheRaymondDev

🔥 اولین پیشنهاد در کارلنسر در سال 1402 درخواستم رد کرد...
این کارفرما فیک نبود
پشمام ریخت 😂

@TheRaymondDev

🔶 وردپرس مثل برنامه نویسی نیست که بخواهی از صفر تا صد همش توی یه مبحث آموزشی یاد بگیرید .

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

کار با پنل وردپرس یاد میگیرید .

بعدش میری سراغ فروشگاه ساز ووکامرس و کار با اون یاد میگیرید

بعدش چند تا افزونه عمومی و کاربردی یاد میگیرید مثل گرویتی فرم و ...

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

بعدش دو سه تا قالب معروف مثل وودمارت و فلت سام نصب میکنی ببینی اصلا ساختار قالبها و دمو وارد کردن و تنظیمات قالب ها چطوری انجام می شود.

و بعدم دیگه برای هر چیزی که میخواهی باید سرچ کنید و آموزش همون یاد بگیرید

@TheRaymondDev

🙋‍♂️ سلام دوستان ...

دوره باز تولید شده از راه رسید.

فصل اول فرانت اند رایگان خواهد بود.
فصل دوم بک اند (ووکامرس) پولی خواهد بود.

این دوره در تاپلرن منتشر و فصل اول هم رایگان در کانال هم منتشر میشه...

@TheRaymondDev

🔶ایجاد breadcrumb در صفحات لاراول :

سلام 🙋‍♂️

بخش breadcrumb یک راهنمای ناوبری در واسطه‌های کاربری است و به کاربران کمک می‌کند تا مکان فعلی خود را پیگیری کنند.

در صفحه اصلی یا ادمین:

<ol class="breadcrumb">
    <li class="ms-2"><a href="{{ route('admin.index') }}" class="text-decoration-none text-dark">پیشخوان</a></li> /
    {{ $breadcrumb ?? '' }}
</ol>

در دیگر صفحات :

<x-slot name="breadcrumb">
        <li class="ms-2"><a href="{{ route('category.index') }}" class="text-decoration-none text-dark">دسته بندی</a></li> /
</x-slot>

@TheRaymondDev

#موزیک مناسب زمان برنامه نویسی

🎧 لیست پخش
► 00:00 Rainy Nights - Azaleh
► 03:46 In A Cabin By The Lake - Lazarus Moment
► 09:47 Hollow - Ecepta
► 11:44 For The Sky - Himalia
► 17:16 Disconnect - Victoriya
► 21:11 Horizon - Almost Vanished
► 25:50 Forget Me Not - Oscuro Official
► 29:59 Radiance - Menual
► 33:51 Dawn - Kazukii
► 37:36 No One Is Forever - Moon
► 41:44 But You Never Told Me - Groundfold
► 44:56 God Will Let Me Know - Dakun
► 48:06 Asylum - Eyeri
► 52:50 Tension - Kazukii
► 57:19 Your Reflection - Lux Natura
► 1:01:38 Frustration - Brimstone
► 1:06:22 Wanderer - Fyze
► 1:11:09 Hypnos - 4lienetic
► 1:14:52 We Are Blind - RIT & LuQus
► 1:19:04 Asterism - Ecepta
► 1:22:48 Cosmo Pollen - Brombaer & Noahs Boat
► 1:27:22 One Too Many - Exist Strategy
► 1:31:23 Somewhere - F3edo
► 1:37:10 Ilia - Kisnou
► 1:39:56 Tea - Quok
► 1:44:33 Quenching - Margari's Kid

@TheRaymondDev

چه خوبه 😍

🔶 ابزارهای هوش مصنوعی :

_ copy.ai : برات ایمیل می‌نویسه
_ loora.ai : کوچ اسپیکینگ
_ summarize.tek : متن خلاصه می‌کنه
_ murf.ai : تبدیل متن به گفتار
_ poe.com : هر سوالی بپرسی جواب میده
_ beautiful.ai : برات پاورپوینت میسازه
_ wordtune.ai :رایتینگ می‌نویسه
_ smalltalk2.me : پارتنر اسپیکینگ

@TheRaymondDev

سلام 🙋‍♂️

دوستان عزیز ...

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

1- بوت استرپ چارچوب سی اس اس هست که دارای المان های آماده برای توسعه سریع صفحات وب هست.
2- اگر ریز تا درشت طراحی صفحات بدون چارچوب بوت استرپ پیش ببریم باعث طولانی شدن طول دوره آموزشی خواهد شد که مطمئنا دانشجویان از آن خوش نخواهد آمد و دوره را ول می کند.

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

و در آخر بوت استرپ قابل شخصی سازی است.


@TheRaymondDev

سلام 🙋‍♂️

🔶 آپلود عکس ویرایشگر CKEditor 5 در لاراول

کنترلر EditorController را ایجاد کنید:

php artisan make:controller EditorController

مسیر روت با متد post برای EditorController ایجاد کنید:

Route::post('editor', [EditorController::class, 'upload'])->name('editor.upload');

کد زیر را در کنترلر وارد کنید:

public function upload(Request $request)
{
   if ($request->hasFile('upload')) {
       $originName = $request->file('upload')->getClientOriginalName();
       $fileName = pathinfo($originName, PATHINFO_FILENAME);
       $extension = $request->file('upload')->getClientOriginalExtension();
       $fileName = $fileName . '_' . time() . '.' . $extension;
       $request->file('upload')->move(public_path('media'), $fileName);

       $url = asset('media/' . $fileName);
       return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);
   }
}

کد بالا هنگامی آپلود عکس انجام می شود, پوشه media در پوشه public لاراول ایجاد می شود و نیازی نیست دستی ایجاد کنید.

فایل جاوا اسکریپت ویرایشگر CKEditor 5 به لاراول منتقل کنید:

<noscript src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></noscript>

می توانید روی این پیوند لینک کنید و فایل را دانلود کنید.
ویرایشگر متنی CKEditor را فعال سازی می کنیم:

<textarea class="form-control" id="editor" rows="10"></textarea>
<noscript>
    ClassicEditor
    .create( document.querySelector( '#editor' ), {
        ckfinder: {
            uploadUrl: '{{route('editor.upload').'?_token='.csrf_token()}}'
        },
        language: {
            content: 'ar'
        }
    })
   .then( editor => {
         console.log( editor );
   })
   .catch( error => {
        console.error( error );
   })
</noscript>

@TheRaymondDev

🙋‍♂️ سلام دوستان ...

آزمونی برای کارفرما شدن ..

کار سختی پیش رو دارم.

@TheRaymondDev

سلام 🙋‍♂️

🔶 کد تغییر ساختار آدرس دسته بندی های وردپرس

به طور پیش فرض در دسته بندی های وردپرس کلمه Category در آدرس دسته بندی سایت شما وجود دارد و اگر تمایل به حذف آن کلمه را دارید می توانید با تابع زیر ساختار آدرس دسته بندی های سایت وردپرسی خود را حذف کنید.

function remove_category( $string, $type )
{
  if ( $type != 'single' && $type == 'category' && ( strpos( $string, 'category' ) !== false ) )
  {
    $url_without_category = str_replace( "/category/", "/", $string );
    return trailingslashit( $url_without_category );
  }
  return $string;
}
 
add_filter( 'user_trailingslashit', 'remove_category', 100, 2);

پیوند زیر:

https://B2n.ir/h83750

@TheRaymondDev

🙋‍♂️ سلام

اولین ویدئو ضبط شده آموزشی مال پارسال اسفند ماه هست.

🔶 آموزش ویدئویی ایجاد فهرست محتوا با کد نویسی بدون افزونه وردپرس

@TheRaymondDev

🔶 چهار راه برای محدود کردن راست کلیک, کپی و پیست و کات با جاوا اسکریپت

1- غیر فعال سازی راست کلیک

document.addEventListener("contextmenu", evt => evt.preventDefault(), false);

2- غیر فعال سازی کپی کلیپ بورد

document.addEventListener("copy", evt => {
  // (B1) CHANGE THE COPIED TEXT IF YOU WANT
  evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
 
  // (B2) PREVENT THE DEFAULT COPY ACTION
  evt.preventDefault();
}, false);

3- غیر فعال سازی انتخاب متن با CSS

<!DOCTYPE html>
<html>
  <head>
    <noscript>Title of the document</noscript>
    <style>
      .unselectable {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #cc0000;
      }
    </style>
  </head>
  <body>
    <p>I am a selectable text. You can select me.</p>
    <div class="unselectable">I am an unselectable text. My text selection is disabled.</div>
  </body>
</html>

4- فقط یک بخش خاص غیر فعال شود

<noscript>
window.addEventListener("load", () => {
  var target = document.getElementById("no-copy");
  target.addEventListener("contextmenu", evt => evt.preventDefault(), false);
  target.addEventListener("copy", evt => {
    evt.clipboardData.setData("text/plain", "Copying is not allowed on this webpage");
    evt.preventDefault();
  }, false);
});
</noscript>
 
<style>
#no-copy { user-select: none; }
#no-copy::selection { background: none; }
#no-copy::-moz-selection { background: none; }
</style>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p id="no-copy">This section cannot be copied.</p>

@TheRaymondDev

🔶 هوش مصنوعی های جدید و پرکاربرد!


1. YouTube Summaries
👉 eightify.app
2. Photo Editor
👉 picwish.ai
3. Website Builder
👉 mixo.io
4. Voice Notes
👉 vribble.ai
5. Text Notes
👉 albus.org
6. Text-to-Video
👉 pika.art
7. Viral Clips
👉 opus.pro
8. Music Production
👉 wavtool.com

@TheRaymondDev

🔶 معرفی Cursor اولین ویرایشگر مبتنی بر AI

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

ویژگی های cursor:

- ویژگی Command K:
با استفاده از این ویژگی بعد از اینکه بخشی از کد را که میخواستید تغییر کند رو انتخاب کردید، نحوه تغییر کد را به Ai توضیح می دهید و کد را براتون عوض می کند.

- چت
بر اساس کد بیس پروژه می توانید با Ai چت کنید و بدون نیاز به توضیح خط کد و لاجیک پروژه جواب مناسب دریافت کنید

- دیباگ اتوماتیک
به کمک این ویژگی با کمک AI کد را رو دیباگ کنید

- و ....

ویرایشگر Cursor برای سه سیستم عامل مک و ویندوز و لینوکس در دسترس است ولی استفاده از مدل های GPT-4 و GPT-3.5 در پلن رایگان محدودیت دارد که شما می توانید با وارد کردن OpenAI Key این محدودیت رو برطرف کنید.

وب سایت پروژه:
https://www.cursor.so/

گیت هاب پروژه:
https://github.com/getcursor/cursor

@TheRaymondDev