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

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

xPath 🤔

ایکس پس چیه؟

خیلی از ما ممکنه با querySelector توی جاوا اسکریپت آشنا باشیم. که سلکتوری که میتونیم در اون قرار بدیم مشابه با سلکتور های توی CSS است. اما xPath چیه و چه کاربردی داره؟

درواقع xPath یک عنصر اصلی در استاندارد XSLT است که کارکردش مشابه به همون querySelector در جاوا اسکریپت هست و به ما کمک میکنه که در بین المنت ها و ویژگی های اونها توی XML جابه‌جا بشیم و اونها رو انتخاب کنیم.

حالا کاربردش چیه؟ 🤔
خودم تازه با این آشنا شدم و نمیدونم کابردهاش چقدر ممکنه زیاد باشه اما یکی از بزرگترین کاربرد هاش توی کتابخانه هایی مثل سلنیوم و Puppeteer هست.

اما ما توی این کتابخانه ها میتونیم از querySelector هم استفاده کنیم پس چه لزومی داره از XPath استفاده کنیم؟
به نظر من دو دلیل خیلی خوب داریم که از XPath استفاده کنیم. دلیل اول اینکه در بعضی مواقع ساده تر هست.
و دلیل دوم اینکه بر اساس متن داخل المنت ها هم میتونیم سلکت کنیم.

برای استفاده و تجربه XPath کافیه کنسول مرورگرتون رو باز کنید و از سلکتور XPath در فانکشن زیر استفاده کنید
$x()

در زیر چند مثال میارم

document.querySelectorAll('div')
$x('//div')

document.querySelectorAll('div > div')
$x('//div/div')

document.querySelectorAll('div div')
$x('//div//div')

document.querySelectorAll('div.foo div')
$x('//div[@class="foo"]//div')

document.querySelectorAll('div[attr="foo"] div')
$x('//div[@attr="foo"]//div')

و در آخر مهمترین چیزی که میتونیم با XPath انجام بدیم ولی با querySelector نه یعنی انتخاب المنت با توجه به متن داخل آن
$x('//button[text()="Hello World"]')
اینجا دکمه ای که متن داخلش Hello World هست انتخاب میشه
$x('//button[contains(., 'Hello')]')
و اینجا دکمه ای که در متن داخل آن Hello وجود داشته باشد

ببینید چی شد 😍

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

برای دوستانی که پرسیده بودن. قسمت اصلی برنامه LexiPad تقریبا تمام شده و دیکشنری آکسفورد هم اضافه شده سعی میکنم تا آخر این هفته که میاد تکمیلش کنم و نسخه تست رو توی همین کانال قرار بدم.

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

خود برنامه رایگان هست و میتونید طبق چیزی که توی ویدیو دیدین استفاده کنید.

تکمیل نسخه اولیه برنامه lexiPad هم زمان شد با آخرین دقیقه های سال 1401. پس این رو میتونید به عنوان عیدی در نظر بگیرید. امیدوارم این برنامه باعث بشه بتونید بهتر زبان انگلیسی رو یاد بگیرید و سال دیگه این موقع اینجا نباشید. ❤️

برای استفاده از این برنامه کافیه برنامه را دانلود و نصب کنید و لینک زیر را کپی کنید و در قسمت تنظیمات زیرنویس PotPlayer قرار بدید. متاسفانه در حال حاظر این برنامه فقط با PotPlayer کار میکنه که این پلیر هم فقط روی ویندوز نصب میشه.

lexiPad-app://open?text=%%SS

لینک نصب پات پلیر
https://potplayer.daum.net/

لینک آموزش ویدیویی 👇🏻
https://youtu.be/4sshBTWiPs0

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

در مورد لکسی پد به یک مشکلی بر خوردم که دیکشنری آکسفورد کار نمیکنه. دارم روی راه حلش کار میکنم و همین یکی دو روزه اکی میشه ✌🏻

به روز رسانی جدید lexiPad

- حل مشکل کار نکردن دیکشنری آکسفورد

برای نصب نسخه جدید ابتدا نسخه قدیمی را حذف کنید.

برای استفاده از این برنامه کافیه برنامه را دانلود و نصب کنید و لینک زیر را کپی کنید و در قسمت تنظیمات زیرنویس PotPlayer قرار بدید. متاسفانه در حال حاظر این برنامه فقط با PotPlayer کار میکنه که این پلیر هم فقط روی ویندوز نصب میشه.

lexiPad-app://open?text=%%SS

لینک نصب پات پلیر
https://potplayer.daum.net/

لینک آموزش ویدیویی 👇🏻
https://youtu.be/4sshBTWiPs0

اگر در باره کار با برنامه مشکلی داشتین یا برنامه برای شما کار نمیکرد به من پیام دهید @mnrmilad

برنامه CareUEyes برای ویندوز

اگر برنامه نویس هستید حتما ساعت های زیادی به مانیتور خیره می‌شوید. این برنامه نور مانیتور رو طوری تنظیم می‌کنه که آسیب کمتری به چشم بزنه علاوه بر اون تایمر داره که مثلا هر 45 دقیقه یک بار عکسی روی مانیتور قرار میده تا به مدت 5 دقیقه بی‌خیال کار شوید و به چشم هاتون استراحت بدین.

دقت کنید که زمانی که میخواین کارهای ui/ux و فرانت انجام بدید برای دیدن درست رنگ ها اون رو غیر فعال کنید.

این برنامه ui/ux خیلی خوبی داره و کار باهاش به شدت ساده و لذت بخشه.

https://soft98.ir/software/desktop-tools/74-careueyes.html

تفاوت refresh token و access token

اگر با لاراول کار کرده باشید دوتا پکیج معروف برای هندل کردن Authentication داره یکی passport و یکی sanctum تفاوت این دو چیه؟ (البته پکیج های دیگه هم هست)

پاسپورت از OAuth پشتیبانی میکنه ولی sanctum نه.

در عوض sanctum راحت تره و استفاده ازش دردسر کمتری داره.

حالا OAuth چیه؟
https://auth0.com/intro-to-iam/what-is-oauth-2

متد OAuth همون متدی هست که از access token و refresh token استفاده میکنه.

حالا کی لازمه از OAuth استفاده کنیم؟
1 - وقتی امنیت برای ما خیلی مهمه و میخوایم درصد دسترسی به اطلاعات رو وقتی هکر توکن یک کاربر به دست میاره به شدت کاهش بدیم. (به صفر نمیرسه!)
2 - وقتی برناممون خیلی بزرگه یا بخش های مختلفی داره که روی سرورهای مختلف ران شدن و ما یک سیستم Authentication یکپارچه برای همش نیاز داریم.


کی از passport استفاده کنیم و کی از sanctum
جواب این سوال رو لاراول توی داکیومنت خودش گفته
https://laravel.com/docs/10.x/passport#passport-or-sanctum

درواقع زمانی که باید از OAuth استفاده کنیم پس باید از پاسپورت استفاده کنیم چون sanctum اون رو پشتیبانی نمیکنه.

اما Sanctum برای استفاده برنامه های SPA یا برنامه های موبایل گزینه مناسب تری هست و خیلی ساده هست.

توی Sanctum ما دیگه رفرش توکن نداریم و توکن ها به صورت پیش فرض به صورت لایف تایم هست ولی کاربر میتونه هر زمانی خواست اونها رو revoke کنه. با revoke کردن توکن قبلی حذف میشه و یک جدید ساخته میشه. البته میتونیم به صورت دستی هم توکن ها رو بعد از زمان مشخص حذف کنیم تا دیگه کار نکنند و کاربر مجبور باشه دوباره لاگین کنه.

و اینکه Sanctum استفاده همزمان چند کاربر رو فراهم میکنه و حتی کاربر میتونه در قسمت از پنل کاربری ببینه الان چه دستگاه هایی و چه IP هایی با اکانت شخص لاگین هستن. چیزی شبیه به قسمت active sessions تلگرام.

حالا JWT (JSON Web Token) چیه؟
توی سیستم OAuth اکسس توکن فرمت خاصی نداره ولی معمولا از JWT استفاده میشه که یک جسان رو انکود میکنه که شامل اطلاعاتی در مورد توکن هست. https://jwt.io/

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

و این رو هم بگم مواردی که گفته شد نتیجه جستجو های خودم بود و ممکنه کمی ایراد داشته باشه پس به این ها اکتفا نکنید و میتونید با توجه به کلید واژه های JWT و OAuth و access token و refresh token خودتون جستجو کنید در این مورد.

4 تم دارک مینیمال برای کروم

https://chrome.google.com/webstore/detail/atom-one-dark-theme/obfjhhknlilnfgfakanjeimidgocmkim?hl=en

https://chrome.google.com/webstore/detail/dark-10/baebencgofnhbdimnijacljeoegbokeh?hl=en

https://chrome.google.com/webstore/detail/arc-dark/adicoenigffoolephelklheejpcpoolk?hl=en

https://chromewebstore.google.com/detail/material-theme-dark-blue/paoafodbgcjnmijjepmpgnlhnogaahme?hl=en-US&utm_source=ext_sidebar

این عکس رو با هوش مصنوعی لئوناردو کشیدم. از قابلیت های بی نظری لئوناردو (نسخه پولی). اینه که میتونی یه سری عکس توی یه سبک خاص بهش بدی و از همونها برات مدل میسازه و میتونی توی همون سبک عکس های دیگه بسازی.