یک کد اتاق چت کامل به صورت real time با Node.js، Next.js و Socket.io نوشتهام که برای دوستانی که علاقهمند به نوشتن اتاق چت هست نمونهی خوبیه.
میتوانید برای دیدن کد به آدرس گیتهابم که در پایین گذاشتم مراجعه کنید.
https://github.com/mo3ito/chat-room
@DevTwitter | <Mostafa Entezami/>
میتوانید برای دیدن کد به آدرس گیتهابم که در پایین گذاشتم مراجعه کنید.
https://github.com/mo3ito/chat-room
@DevTwitter | <Mostafa Entezami/>
👍32🤣10❤4🔥4
«هوش مصنوعی هِزار: کتابخانهای برای آسانسازی یادگیری هوش مصنوعی در زبان فارسی، ساخته شده توسط جامعه فارسی زبان!»
این مجموعه ابزار، کار با عکس، متن و صدا را به زبان فارسی تسهیل میکند.
شخصا برای آموزش OCR فارسی تصاویر،ازش استفاده کردم.
https://github.com/hezarai/hezar
@DevTwitter | <Mohammad/>
این مجموعه ابزار، کار با عکس، متن و صدا را به زبان فارسی تسهیل میکند.
شخصا برای آموزش OCR فارسی تصاویر،ازش استفاده کردم.
https://github.com/hezarai/hezar
@DevTwitter | <Mohammad/>
👍45❤4👎1
(بررسی بهینگی روش آپلود تصاویر شما در بک اند)
خب نوبتی هم باشه نوبت یه گپ کوتاه و فلسفی درباره نحوه مدیریت یکی از پر استفاده ترین مباحث در برنامه نویسی بک انده (آپلود تصاویر)
از اونجایی که من خیلی وسواسی و کمال گرام، همیشه دنبال پرفورمنس و بهینه بودن در پیاده سازی هام هستم. اوایل خیلی واسم سوال بود که روش آپلود، پوشه بندی و مدیریت کردن تصاویری که آپلود میکنیم باید چطور باشه. بذارید خلاصه بگم:
فرض کنید برای یک مدل (مثلا Post) شما 5 تا تصویر آپلود کردید که هنگامی که Post رو Delete میکنید، میتونید به images مرتبط با اون Post دسترسی داشته باشید و هنگام این عملیات، تصاویرش رو هم با خودش از روی سرور حذف کنید، تا اینجای کار همه چیز اوکیه.
حالا چالش: فرض کنید تصاویر ما قبل از اجرا شدن عملیات Create اون پست و به صورت Ajax آپلود بشن (با ابزاری شبیه به Dropzonejs) در این صورت قبل از ایجاد شدن رکورد مرتبط با Post، ما ممکنه چند ده تصویر آپلود کرده باشیم.
حالا فرض کنید توی همین فرصت به هر دلیلی اون رکورد ایجاد نشه. حالا ممکنه فرد درج کننده بیخیال این قضیه بشه، مرورگر بسته بشه، برق بره یا هرچی....
این وسط تکلیف تصاویر آپلودی چی میشن؟ در طولانی مدت وقتی ده ها بار این اتفاق بیوفته چی میشه؟
توضیح راه حل:
بهتره در اون دایرکتوری ای که آپلود و ذخیره سازی تصاویر رو انجام میدیم، یه پوشه ای با نام temp داشته باشیم که تصاویر در ابتدا و به صورت موقت اونجا ذخیره میشن:
/images/uploads/articles/temp
و بعد از عملیات create شدن، فانکشن و سرویسی بنویسیم که عملیات Move کردن این تصاویر رو از اون پوشه temp به مسیر اصلی رو انجام بده:
/images/uploads/articles/2024/10/06/image1.jpg
/images/uploads/articles/2024/10/06/image2.jpg
...
با این روش میتونید از آپلود و تکرار تصاویر هرز و بی استفاده و استفاده شدن بیخودی از منابع ذخیره سازی سرور جلوگیری کنید و اون پوشه temp رو به صورت schedule یا حتی دستی هر از گاهی حذف کنید و هم در دنیا و هم در آخرت عاقبت بخیر بشید
@DevTwitter | <Keyvan Lotfi Kamran/>
خب نوبتی هم باشه نوبت یه گپ کوتاه و فلسفی درباره نحوه مدیریت یکی از پر استفاده ترین مباحث در برنامه نویسی بک انده (آپلود تصاویر)
از اونجایی که من خیلی وسواسی و کمال گرام، همیشه دنبال پرفورمنس و بهینه بودن در پیاده سازی هام هستم. اوایل خیلی واسم سوال بود که روش آپلود، پوشه بندی و مدیریت کردن تصاویری که آپلود میکنیم باید چطور باشه. بذارید خلاصه بگم:
فرض کنید برای یک مدل (مثلا Post) شما 5 تا تصویر آپلود کردید که هنگامی که Post رو Delete میکنید، میتونید به images مرتبط با اون Post دسترسی داشته باشید و هنگام این عملیات، تصاویرش رو هم با خودش از روی سرور حذف کنید، تا اینجای کار همه چیز اوکیه.
حالا چالش: فرض کنید تصاویر ما قبل از اجرا شدن عملیات Create اون پست و به صورت Ajax آپلود بشن (با ابزاری شبیه به Dropzonejs) در این صورت قبل از ایجاد شدن رکورد مرتبط با Post، ما ممکنه چند ده تصویر آپلود کرده باشیم.
حالا فرض کنید توی همین فرصت به هر دلیلی اون رکورد ایجاد نشه. حالا ممکنه فرد درج کننده بیخیال این قضیه بشه، مرورگر بسته بشه، برق بره یا هرچی....
این وسط تکلیف تصاویر آپلودی چی میشن؟ در طولانی مدت وقتی ده ها بار این اتفاق بیوفته چی میشه؟
توضیح راه حل:
بهتره در اون دایرکتوری ای که آپلود و ذخیره سازی تصاویر رو انجام میدیم، یه پوشه ای با نام temp داشته باشیم که تصاویر در ابتدا و به صورت موقت اونجا ذخیره میشن:
/images/uploads/articles/temp
و بعد از عملیات create شدن، فانکشن و سرویسی بنویسیم که عملیات Move کردن این تصاویر رو از اون پوشه temp به مسیر اصلی رو انجام بده:
/images/uploads/articles/2024/10/06/image1.jpg
/images/uploads/articles/2024/10/06/image2.jpg
...
با این روش میتونید از آپلود و تکرار تصاویر هرز و بی استفاده و استفاده شدن بیخودی از منابع ذخیره سازی سرور جلوگیری کنید و اون پوشه temp رو به صورت schedule یا حتی دستی هر از گاهی حذف کنید و هم در دنیا و هم در آخرت عاقبت بخیر بشید
@DevTwitter | <Keyvan Lotfi Kamran/>
👍70🤣4❤3👎3
This media is not supported in your browser
VIEW IN TELEGRAM
چیزی که زمان یادگیری Git کمبودش رو به شدت حس میکردم ابزاری بود که بتونه دستورات Git رو تصویرسازی کنه.
یادگیری Git تنها با مطالعه داکیومنت و مقالههای مختلف میتونه چالشبرانگیز باشه. چیزی که میتونه روند یادگیری این ابزار رو سریعتر و البته لذتبخشتر کنه تصویرسازی و انیمیشنه؛ چه بهتر که این تصویرسازیها زنده و در لحظه باشن.
دو تا ابزاری که خودم برای فهم بهتر دستورات Git ازشون استفاده کردم LearnGitBranching و Visualizing Git هستن.
با استفاده از این دو ابزار میتونید خیلی از دستورات گیت رو امتحان کنید و تاثیرشون رو در لحظه ببینید. فکر میکنم حتی اگر روزانه از git استفاده میکنید و با دستوراتش آشنایی کامل دارید، باز هم استفاده از این دو ابزار میتونه درکتون از git رو بیشتر و بهتر کنه.
شما از چه ابزارها و منابعی برای یادگیری git استفاده میکنین؟
LearnGitBranching:
https://learngitbranching.js.org/
Visualizing Git:
https://git-school.github.io/visualizing-git/
@DevTwitter | <Fateme Fouladkar/>
یادگیری Git تنها با مطالعه داکیومنت و مقالههای مختلف میتونه چالشبرانگیز باشه. چیزی که میتونه روند یادگیری این ابزار رو سریعتر و البته لذتبخشتر کنه تصویرسازی و انیمیشنه؛ چه بهتر که این تصویرسازیها زنده و در لحظه باشن.
دو تا ابزاری که خودم برای فهم بهتر دستورات Git ازشون استفاده کردم LearnGitBranching و Visualizing Git هستن.
با استفاده از این دو ابزار میتونید خیلی از دستورات گیت رو امتحان کنید و تاثیرشون رو در لحظه ببینید. فکر میکنم حتی اگر روزانه از git استفاده میکنید و با دستوراتش آشنایی کامل دارید، باز هم استفاده از این دو ابزار میتونه درکتون از git رو بیشتر و بهتر کنه.
شما از چه ابزارها و منابعی برای یادگیری git استفاده میکنین؟
LearnGitBranching:
https://learngitbranching.js.org/
Visualizing Git:
https://git-school.github.io/visualizing-git/
@DevTwitter | <Fateme Fouladkar/>
👍53❤6👎6
This media is not supported in your browser
VIEW IN TELEGRAM
این ریپو یک ابزار هست که میتونید به صورت لوکال صفحه مانیتورتون و صدا را ۲۴ ساعته ضبط کنید و بعد راجع به هرچیزی که گفتید و شنیدید و دیدید سوال بپرسید. یک جور ورژن اپن سورس rewind .ai هست.
https://github.com/mediar-ai/screenpipe
@DevTwitter | <Mehdi Allahyari/>
https://github.com/mediar-ai/screenpipe
@DevTwitter | <Mehdi Allahyari/>
🔥44👍9👎3🤣1
رندرینگ در Next.js
در دنیای توسعه وب، یکی از دلایل محبوبیت Next.js نحوه مدیریت فرآیندهای رندرینگ است. این
فریمورک انعطافپذیری زیادی در ارائه انواع مختلف رندرینگ برای بهینهسازی عملکرد و تجربه کاربری فراهم میکند. در ادامه به انواع رندرینگ در Next.js میپردازیم:
رندرینگ سمت سرور (SSR) - Server Side Rendering:
در این روش، صفحه وب در سمت سرور رندر شده و به صورت HTML کامل به مرورگر کاربر ارسال میشود. این نوع رندرینگ برای سئو (SEO) و دسترسی سریع به محتوای اولیه بسیار موثر است.
رندرینگ سمت کاربر - کلاینت (CSR) - Client Side Rendering:
در CSR، صفحه ابتدا به صورت یک فایل HTML خالی ارسال میشود و جاوا اسکریپت در مرورگر بارگذاری شده و محتوای پویا را ایجاد میکند. این نوع رندرینگ برای اپلیکیشنهای تکصفحهای (SPA) که تعاملات زیادی دارند، مناسب است.
رندرینگ استاتیک (SSG) - Static Site Generation:
در این روش، صفحات به صورت استاتیک و در زمان ساخت (build time) تولید میشوند و به کاربران ارائه میگردند. این نوع رندرینگ بسیار سریع و مناسب برای محتوای ثابت است.
رندرینگ هیبریدی (ISR) - Incremental Static Regeneration:
ترکیبی از رندرینگ استاتیک و دینامیک است که به شما اجازه میدهد صفحاتی را به صورت استاتیک ایجاد کنید و بعداً بدون نیاز به بازسازی کل سایت، آنها را بهروزرسانی کنید. این روش برای بهبود عملکرد در سایتهای پویا مفید است.
Next.js با پشتیبانی از این انواع مختلف رندرینگ، انعطاف و سرعت بالایی برای ایجاد اپلیکیشنهای وب پیشرفته فراهم میکند.
@DevTwitter | <Mohsen Abbasi/>
در دنیای توسعه وب، یکی از دلایل محبوبیت Next.js نحوه مدیریت فرآیندهای رندرینگ است. این
فریمورک انعطافپذیری زیادی در ارائه انواع مختلف رندرینگ برای بهینهسازی عملکرد و تجربه کاربری فراهم میکند. در ادامه به انواع رندرینگ در Next.js میپردازیم:
رندرینگ سمت سرور (SSR) - Server Side Rendering:
در این روش، صفحه وب در سمت سرور رندر شده و به صورت HTML کامل به مرورگر کاربر ارسال میشود. این نوع رندرینگ برای سئو (SEO) و دسترسی سریع به محتوای اولیه بسیار موثر است.
رندرینگ سمت کاربر - کلاینت (CSR) - Client Side Rendering:
در CSR، صفحه ابتدا به صورت یک فایل HTML خالی ارسال میشود و جاوا اسکریپت در مرورگر بارگذاری شده و محتوای پویا را ایجاد میکند. این نوع رندرینگ برای اپلیکیشنهای تکصفحهای (SPA) که تعاملات زیادی دارند، مناسب است.
رندرینگ استاتیک (SSG) - Static Site Generation:
در این روش، صفحات به صورت استاتیک و در زمان ساخت (build time) تولید میشوند و به کاربران ارائه میگردند. این نوع رندرینگ بسیار سریع و مناسب برای محتوای ثابت است.
رندرینگ هیبریدی (ISR) - Incremental Static Regeneration:
ترکیبی از رندرینگ استاتیک و دینامیک است که به شما اجازه میدهد صفحاتی را به صورت استاتیک ایجاد کنید و بعداً بدون نیاز به بازسازی کل سایت، آنها را بهروزرسانی کنید. این روش برای بهبود عملکرد در سایتهای پویا مفید است.
Next.js با پشتیبانی از این انواع مختلف رندرینگ، انعطاف و سرعت بالایی برای ایجاد اپلیکیشنهای وب پیشرفته فراهم میکند.
@DevTwitter | <Mohsen Abbasi/>
👍39🔥4
الگوهای ماکروسرویس که هر مهندس نرمافزار باید بدونه. این الگوها کمک میکنن سیستمهای نرمافزاری مقاوم در برابر خطا و قابل نگهداری طراحی کنید
https://blog.amigoscode.com/p/mircroservices-best-practices
@DevTwitter | <Mohammad Roshandelpoor/>
https://blog.amigoscode.com/p/mircroservices-best-practices
@DevTwitter | <Mohammad Roshandelpoor/>
🔥14👍7👎1
ذات فرانتاند به طرز وحشتناکی پیچیدهست. اینو زمانی متوجه میشید که بخواید یه تیکه از کد یه باندلر مثل ESbuild یا Rollup رو بخونید. یا بخواید درباره الگوریتمهای Virtual DOM توی مثلا ریکت یا Vue بخونید. فکر میکنید سادهاس چون فقط یه تیکه از رنگ دادن به دکمه رو توی فرانت دیدید.
@DevTwitter | <Yasha/>
@DevTwitter | <Yasha/>
👍149🤣44👎12🔥7
این مقاله جالب در مورد ده تا سوال راجع به promise ها توی جاوااسکریپت هست
https://medium.com/frontend-canteen/can-you-answer-this-senior-level-javanoscript-promise-interview-question-69f7b6ffc2e7
سطح سوالات بالاس و تقریبا سوالات مصاحبهس همشون
@DevTwitter | <ممد کاکل به سر/>
https://medium.com/frontend-canteen/can-you-answer-this-senior-level-javanoscript-promise-interview-question-69f7b6ffc2e7
سطح سوالات بالاس و تقریبا سوالات مصاحبهس همشون
@DevTwitter | <ممد کاکل به سر/>
👍18🔥2
اگر یک developer ساده مثل من هستید و هر از گاهی مجبورید پروژهای خودتون رو روی سرور دیپلوی کنید این چندتا کامند داکر به دردتون میخوره(دراصل برای خودم درست کردم که فراموش نکنم)
https://gist.github.com/mthri/fc0a594cb3d4ed06fc6b6c117e819a1c
@DevTwitter | <Amir Motahari/>
https://gist.github.com/mthri/fc0a594cb3d4ed06fc6b6c117e819a1c
@DevTwitter | <Amir Motahari/>
❤32👍13🤣8
سرعت پروژهتون رو با php opcode ببرید بالا
https://inspector.dev/php-opcode-improve-application-performance-without-changing-your-code/
@DevTwitter | <لادویا/>
https://inspector.dev/php-opcode-improve-application-performance-without-changing-your-code/
@DevTwitter | <لادویا/>
🤣26👍12❤3👎3
بعد سه بار خوندن کتاب You Don't Know JS شروع کردم به خلاصه کردنش و تو گیتهابم به اشتراک گذاشتم. ممنون میشم چکش کنید و اگه نظری داشتید بهم بگی و لطف کنید اگه خوشتون اومد یه ستاره بدید بهش
4 جلدش رو کامل خلاصه کردم و مشغول خلاصه کردن دو جلد آخرشم.
https://github.com/Masoud-z/You-Dont-Know-JS-summary
@DevTwitter | <Masoud/>
4 جلدش رو کامل خلاصه کردم و مشغول خلاصه کردن دو جلد آخرشم.
https://github.com/Masoud-z/You-Dont-Know-JS-summary
@DevTwitter | <Masoud/>
👍72❤22🔥7🤣4
بیش از ۵ ماه شده که دارم روی ریپوی دیزاین پترن ها کار می کنم. توی آپدیت جدید چندتا دیزاین پترن جدید اضافه شد. ممنون که با استار دادن بهش باعث میشین که ادامه بدم.
نکاتی که تو این ریپو هست:
- توضیح به همراه پیاده سازی و دیاگرام
- پیاده سازی بَد پرکتیس
- تست نویسی برای همه پترن ها
- مثال هایی که در دنیای واقعی پیش میاد (اکثرا برای خودم پیش اومده و قبلا مشابهش رو پیاده سازی کردم)
- و داکیومنت کامل برای نحوه اجرا و توسعه
https://github.com/vahidvdn/realworld-design-patterns
@DevTwitter | <Vahid/>
نکاتی که تو این ریپو هست:
- توضیح به همراه پیاده سازی و دیاگرام
- پیاده سازی بَد پرکتیس
- تست نویسی برای همه پترن ها
- مثال هایی که در دنیای واقعی پیش میاد (اکثرا برای خودم پیش اومده و قبلا مشابهش رو پیاده سازی کردم)
- و داکیومنت کامل برای نحوه اجرا و توسعه
https://github.com/vahidvdn/realworld-design-patterns
@DevTwitter | <Vahid/>
👍27🔥7
یه متن بلندبالا برای یادگیری گیت و دستوراتش
و یه خلاصه خفن برای یادگیری سریع markdown نوشتم وسط مریضی
دوست داشتین نگاهی بندازین
https://github.com/AmiinGholami/MyInternship
@DevTwitter | <Amiin Gholami/>
و یه خلاصه خفن برای یادگیری سریع markdown نوشتم وسط مریضی
دوست داشتین نگاهی بندازین
https://github.com/AmiinGholami/MyInternship
@DevTwitter | <Amiin Gholami/>
👍30❤5
مدلهای Llama، واقعاً بهترین مدلهای اپن سورس هستن و برای ساخت محصول خیلی مناسبن. آخرین ورژن این مدل، Llama 3.2 هست و 4 مدل مختلف داره:
مدل 1B و 3B برای دستگاههای Edge
مدل 11B و 90B که مالتیمدل هستن
دوره زیر در مورد این مدلها رو از دست ندید.
https://www.deeplearning.ai/short-courses/introducing-multimodal-llama-3-2/
@DevTwitter | <Reza Jafari/>
مدل 1B و 3B برای دستگاههای Edge
مدل 11B و 90B که مالتیمدل هستن
دوره زیر در مورد این مدلها رو از دست ندید.
https://www.deeplearning.ai/short-courses/introducing-multimodal-llama-3-2/
@DevTwitter | <Reza Jafari/>
👍19🤣2
اون زمان چون همه سایتها http بودن میتونستن همچین صفحهای رو نمایش بدن، یه جوری مثل این بود که انگار شما نامه بزنی به دوستت، ولی شرکت پست نامه رو تحویل نده و خودش نامتو جواب بده.
این به لطف https عوض شد، دیگه نتونستن از این کارا بکنن.
@DevTwitter | <Soroush Ahmadi/>
این به لطف https عوض شد، دیگه نتونستن از این کارا بکنن.
@DevTwitter | <Soroush Ahmadi/>
🤣179👎13👍7🔥3