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

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

استفاده از regex در کوئری Mysql.

احتمالا خیلی از شما می‌دونید که میشه از regex توی Mysql استفاده کرد ولی تفاوت هایی در استفاده از regex توی Mysql‌ با استفاده از آن در زبان های برنامه نویسی وجود داره. برای مثال توی زبان PHP استفاده از \s به معنی هر کارکتر فاصله است. مثل اسپیس و نیم اسپیس و ... اما توی Mysql باید از [:space:] استفاده بشه.

حالا یک مثال کاربردی از این رجکس می‌زنم. فرض کنید شما قصد دارید در یک جدول که مربوط به شهر ها است جستجو کنید. و قصد دارید جستجو به این صورت باشه که کلیدواژه جستجو حتما اول یک شهر باشه یا قبلش حتما یک فاصله باشه. مثلا زمانی که تک حرف "ا" رو جستجو می‌کنید شهر اصفهان رو در نتیجه جستجو ببینید ولی کرمان رو نه. در این صورت میتونید به این صورت کوئری رو بنویسید.

SELECT * FROM `cities` WHERE name REGEXP '^(.*[:space:])?ا';

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

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

City::where('name', 'REGEXP', "^(.*[:space:])?$searchKey")->get()

از همین REGEXP میشه در order by نیز استفاده کرد.

لیست کامل راهنمای regex در mysql در لینک زیر
https://www.geeksforgeeks.org/mysql-regular-expressions-regexp/

لینک همین پست توی لینکدین
https://www.linkedin.com/posts/mnrmilad_mnr-tech-activity-7131377596109316097-KWRU?utm_source=share&utm_medium=member_desktop

بلیط ایکس، لذت خرید بلیط

https://blitx.ir
این یک سایت واقعی نیست و فقط برای نمونه کار ساخته شده
قابلیت های این سایت

بکند و دواپس:
- پروژه داکرایز شده
- استفاده از دیزاین‌پترن و طراحی مناسب جدول ها برای قابلیت چند پروایدری
- یک سرویس ماک جدا برای شبیه سازی پروایدر ها
- کش کردن داده ها برای درخواست کمتر به پروایدر
- سیستم ریجن یکپارچه برای سرویس های مختلف مثل هواپیما و اتوبوس
- امکان خرید بلیط رفت و برگشت از پروایدر های مختلف

فرانت:
- رسپانسیو تا 320 پیکسل
- ساخت اینپوت های سفارشی
- امکان دانلود برنامه به صورت pwa

برای فرانت این پروژه از vue و برای بکند از لاراول استفاده شده.

متاسفانه به دلایلی این سایت رو مجبور شدم غیر فعال کنم و بیارم پایین🥲

فرق api تلگرام با cli یا کلاینت چیه؟

⁧ api چیه؟

هر سرویسی میتونه روی بستر http یک سری api ارائه بده که بر اساس درخواست ها یا همون request ها یک سری عملیات رو توی اون سرویس برای ما انجام بده. api های مختلفی وجود داره که میتونن پولی یا بعضا رایگان باشن. مثل api قیمت ارز و طلا، api صرافی های ارز دیجیتال برای انجام معاملات خودکار و ...

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

اما یکی از قویترین عملکردها رو در این زمینه تلگرام ارائه داد که با کمک api بشه ربات هایی ساخت که بسیار پرکاربرد باشن و تجربه کاربری رو در این پیامرسان افزایش بده. هممنون با ربات های تلگرامی با کاربرد های متنوع آشنا هستید. از نمونه های اونها می‌تونم به ربات مدیریت گروه و ربات مدیریت کانال خودم اشاره کنم.
@mnrg1bot
@mnrcbot

اما قبل از اومدن ربات های api به تلگرام بعضا شما ربات هایی دیده بودید که ربات نبودن شبیه یک کاربر بودن ولی عملکردشون شبیه به ربات بود. به اونها میگن ربات های cli یا client bot. اگر توی گیتهاب سرچ کنید کلاینت بات ها هم برای برنامه هایی مثل اینستاگرام هم وجود دارن.

تول تلگرام هم از اونجایی که open source هست و TDLIB رو در اختیار همه گذاشته که پایه و اساس همون تلگرام های غیر رسمی هست در نتیجه با همین کتابخونه میشه بات های cli ساخت.

مزیتی که میتونه نسبت به ربات های api داشته باشه این هست که در بعضی موارد ربات های api محدودیت هایی دارند که بسته به سیاست های شرکت اضافه نشدند به api. برای مثال دیدن مقدار بازدید از یک پست رو نمیشه با ربات api انجام داد. یا پاکسازی کامل یک گروه و کانل رو نمیشه با ربات api انجام داد. ولی با ربات cli میشه این موارد رو انجام داد.

یکی از ریپوهایی که به زبان php هم نوشته شده برای ساخت ربات cli ریپو MadelineProto هست. ولی کار باهاش یه کم عذاب آور و پردردسر هست. به همین جهت تو فکر این بودم که یک سرویس بسازم که با استفاده از همین ریپو کار کنه ولی بشه به صورت api باهاش کار کرد وقتی امشب داشتم این کار رو شروع میکردم دیدم که مدتی قبل افراد دیگری زحمتشو کشیدن. TelegramApiServer که به کمک همین کتابخونه اومده و به صورت داکرایز شده یک سرویس api ساخته که به راحتی میتونید ازش استفاده کنید.

لینک ها
https://github.com/danog/MadelineProto
https://github.com/xtrime-ru/TelegramApiServer
https://core.telegram.org/tdlib/docs/
https://core.telegram.org/bots/api

آماده سازی محیط ویندوز برای برنامه نویسی

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

00:00 شروع
03:15 نصب wsl
11:20 نصب گیت روی اوبونتو (wsl)
13:25 نصب php
17:25 نصب کامپوزر
19:03 نصب node و npm
22:18 نصب پاورشل 7.4 روی ویندوز
25:55 نصب vscode
28:24 سفارشی سازی windos terminal
31:40 نصب فونت fira code روی ویندوز
34:08 نصب vscode روی wsl ویندوز
34:15 نصب powertoys روی ویندوز
41:55 نصب داکر روی ویندوز
44:40 پایان

https://youtu.be/12f6Guf5L3U