https://github.com/mnr73/laravel-docker

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

داشتم توی مدیون گشت می‌زدم که به این مقاله ها برخوردم

https://medium.com/js-dojo/server-side-rendering-with-laravel-vue-js-2-5-6afedd64aa90

https://medium.com/js-dojo/advanced-server-side-rendering-with-laravel-vue-multi-page-app-486b706e654

تازه فهمیدم php اکستنشنی داره که میتونی موتور جاوا اسکریپت V8 رو توی php قابل استفاده کنه.

یعنی مثلا سایتی که فرانتش رو با vue زدید و بکندش رو با لاراول دیگه برای ssr کردن نیازی به Node ندارید و میتونید با همون php سمت سرور رندرش کنید. البته فکر میکنم پشت پرده از node استفاده میشه ولی شما دیگه لازم نیست درگیرش بشید.

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

توضیحات در سایت php

آموزش انتقال پروژه vue از Vite به Laravel mix

لینک ویدیو در یوتیوب
https://youtu.be/Zo5sDJO85Nw

لینک مقاله در مدیوم
https://medium.com/@mnrmilad/laravel-vue-js-with-laravel-mix-588baa8a17e5

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

https://youtu.be/gd79gZgjq-w

ویدیو جدید که اومدیم پروژه Vite رو بردیم روی لاراول اینبار به جای Laravel Mix از خود Vite استفاده کردیم. هم ساده تر بود و هم قابلیت های بیشتری میده. سرعتشم که قطعا بیشتره.

لینک مدیوم
https://medium.com/@mnrmilad/adding-an-existing-vite-vue-project-to-laravel-9128e1c86d0

خوب قسمت آخر این دوره هم تموم شد

https://youtu.be/2AZjK1KCGjM

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

توی این دوره ما با داکر، لاراول، vue، vite، windi.css، i18n، nginx و موارد دیگه کار کردیم.

پلی لیست کامل این دوره رو میتونید از این لینک ببینید
https://www.youtube.com/playlist?list=PLnhUuGnd2lXJD2uFN7PAwgKstVVqnijle

این واقعا میتونه تحول خیلی خیلی خیلی بزرگی توی وب باشه.

لینک گیتهاب
https://github.com/stackblitz/webcontainer-core

توضیحات کامل تو سایت خودشون
https://blog.stackblitz.com/posts/introducing-webcontainers/

ادیتوری که با همین تکنولوژی ساختن
https://stackblitz.com

این پروژه opensource نیست و فکر میکنم برای مسائل امنیتی کمی کند پیش میره.


********

داستان از اونجایی شروع شد که امروز به این فکر میکردم که چقدر خوب میشد اگر میشد توی برنامه های وب و سمت مرورگر بتونیم از node.js و پکیج های اون استفاده کنیم.

حالا چرا همچین چیزی به ذهنم رسید؟ چون میخواستم از پکیج Puppeteer برای کرال کردن استفاده کنم ولی این رو نمیشه سمت فرانت استفاده کرد و سمت بکند هم محدودیت هایی داره مثلا سایتی که داری کرالش می‌کنی ممکنه ip رو ببنده و ....

برای این کار ناچاری یا بری سمت برنامه های نیتیو یا این که از electron یا flutter استفاده کنی. یعنی فقط برای همچنین چیز کوچکی مجبوری برنامه رو با یک زبان دیگه بزنی. ولی اگر میشد node رو توی مرورگر اجرا کرد خیلی عالی میشد طوری که امنیتش هم حفظ بشه مثلا یه چیزی مثل کانتینر ساخته بشه که فقط با فایل های توی اون کانتینر دسترسی داشته باشه.

این رو توییت کردم و یکی از بچه های توییتر این پروژه رو منشن کرد. دقیقا همون چیزیه که توی ذهنم بود ولی متاسفانه پروژه اپن سورس نیست و فعلا هم api ارائه ندادن. ولی به نظر اگر این شدنیه پس به زودی شاهد تحولی بزرگ توی برنامه های وب هستیم.

دقیقا همین 20 دقیقه پیش webcontainer منتشر شد اکنون میتونید استفاده کنید. من امشب تا صبح نمیخوابم 😍

خیلی برام جالب بود دقیقا همین چند روز پیش همچین ایده ای به ذهنم رسید بعد با این آشنا شدم و دیدم به مدت حدود 4 ساله دارن روی این کار میکنن ولی عمومی نشده. در حدی پیگیر و علاقه مند به این موضوع بودم که گیتهابشون رو گذاشتم روی حالت watch و توی دیسکوردشون عضو شدم تا اگر خبری شد متوجه بشم. و دقیقا بعد از چند روز منتشر شد. خیلی حس خوبیه


لینک سایتشون
https://webcontainers.io/

What is a Lottie?
آیا میدونید Lottie چیه؟

انیمیشنت های بر پایه Json هست که میتونید توی وب و اپلیکیشن استفاده کنید. زمانی که از این فایل های توی وب استفاده کنید خروجی رو به شما به صورت SVG نشون میده که داعما تغییر میکنه و متحرک میشه.

برای اطلاعات بیشتر میتونید این صفحه رو ببینید.
https://lottiefiles.com/what-is-lottie

توی این صفحه اگر با دسکتاپ هستید روی انیمیشن ها راست کلیک کنید و inspect کنید و توی devTools میبینید که یه noscript هست که داعم در حال تغییره.

حالا میخوام چند تا چیز جالب بگم. هیچ به استیکر های متحرک تلگرام دقت کردید؟ پسوند استیکر های متحرک tgs هست. توی npm پکیج وجود داره برای تبدیل این استیکر های متحرک به Lottie

لینک پکیج
https://www.npmjs.com/package/tgs2lottie

و تازه یک پکیج دیگه هست که میتونه Lottie رو به Gif و mp4 تبدیل کنه
https://www.npmjs.com/package/lottie-puppeteer-fikuri

و حتی پکیج های بیشتری برای کار با لاتی هست

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

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

توی این سایت هم میتونید تعداد زیادی گیف متحرک که از تبدیل همین استکر های تلگرام ساخته شده پیدا کنید. یا بهش استیکر بدید و گیف تحویل بگیرید.
https://www.emojibest.com/

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

قسمت دوم آموزش الکترون . از قسمت بعدی تازه میرسیم به جاهای خوب
https://youtu.be/uv2bbDBDZ5Y