#javanoscript

باز هم JS عزیز بهمراه یاور همیشه مومن، CSS
بخودی خود css خودش ، کلی حرف برای گفتن داره و خیلی فراتر از کارهای معمول میشه پروژه و کارهای شگفت انگیز و باحال باهاش انجام داد
حالا توی این مینی پروژه ، با ترکیب این دوتا می‌بیند که میشه همچین شاهکاری رو ساخت
به نظرم فارغ از فضای کار ، خیلی خوبه همچین آثاری رو هم خلق کرد و با فرانت عشق کرد...

راستی لینکش هم اینجاست
https://codepen.io/amit_sheen/pen/gbbzbeR


@DevTwitter | <Abolfazl Shekarshekan/>

امروز یکی از همکارانم سوال خوبی پرسید که فکر می‌کنم دغدغه خیلی‌هاست:
"فرق واقعی Async و Concurrency چیه؟ مگه هر دو به معنی انجام همزمان کارها نیستن؟"
این دو مفهوم اغلب با هم اشتباه گرفته می‌شن. بذارید با یک مثال ساده تفاوتشون رو باز کنم:
۱. Synchronous vs. Asynchronous
این مفاهیم درباره انتظار کشیدن هستن.
Sync
مثل اینه که بری کافه، قهوه سفارش بدی و همونجا جلوی پیشخوان منتظر بمونی تا آماده بشه و تحویل بگیری.
تا قهوه رو نگیری، هیچ کار دیگه‌ای نمی‌کنی.
Async
سفارش می‌دی، یک پیجر (Pager) می‌گیری و می‌ری سر میزت می‌نشینی.
در این فاصله می‌تونی ایمیل‌هاتو چک کنی.
هر وقت قهوه‌ات آماده شد، پیجر بهت خبر می‌ده.
تو منتظر نموندی و از زمانت استفاده کردی.

۲. Concurrency
این مفهوم درباره مدیریت چند کار در یک بازه زمانی هست.
باریستای کافه رو در نظر بگیرید:
اون همزمان هم سفارش شما رو آماده می‌کنه، هم سفارش نفر بعدی رو می‌گیره و هم شیر رو برای یک سفارش دیگه گرم می‌کنه.
در واقع اون با جابجایی سریع بین کارها (Context Switching)، چند وظیفه رو پیش می‌بره.
این یعنی هم‌روندی.

نکته کلیدی
برنامه‌نویسی Async یکی از راه‌های رسیدن به Concurrency هست.
درک این تفاوت، در طراحی سیستم‌های مدرن مثل میکروسرویس‌ها یا پایپ‌لاین‌های پردازش دیتا، یک مزیت فوق‌العاده است.
این درک به شما کمک می‌کنه تا بین ابزارهایی مثل Kafka, gRPC یا WebSockets انتخاب درستی داشته باشید و سیستمی بسازید که هم Scalable و هم Reliable باشه.


@DevTwitter | <Ali Naseri/>

https://blogs.cisco.com/security/detecting-exposed-llm-servers-shodan-case-study-on-ollama
به امنیت خودتون اهمیت بدید

@DevTwitter | <Reza Arani/>

#angular

آیا تا حالا وسط پروژه Angular گیر کردید که بدونید یه فیچر هنوز Stable هست یا Deprecated شده؟
یه ابزار عالی پیدا کردم
درست مثل caniuse.com برای وب، اینجا هم می‌تونید ببینید هر فیچر Angular توی نسخه‌های مختلف چه وضعیتی داره (Stable, Deprecated, Experimental, Removed).
به نظرم برای هر دولوپر Angular (به‌خصوص موقع Upgrade) یه ابزار نجات‌بخش حساب میشه
https://www.dolmen.tools/en/angular/caniuse/explorer


@DevTwitter | <Hesam Valizadeh/>

امنیت در Docker: چیزی که اغلب فراموش می‌کنیم!

* از rootless containers استفاده کنید: اجرای اپلیکیشن با کاربر non-root ریسک نفوذ رو خیلی کم می‌کنه.
* از Base image سبک و امن استفاده کنید: مثلاً alpine یا distroless. imageهای بزرگ‌تر مثل ubuntu اغلب پکیج‌های غیرضروری دارن که سطح حمله رو زیاد می‌کنن.
* حتما وDependencyها رو pin کنید: همیشه نسخه دقیق کتابخونه‌ها رو مشخص کنید تا از تغییرات ناخواسته جلوگیری بشه.
* از .dockerignore استفاده کنید: فایل‌های حساس (مثل .env یا کلیدها) هرگز نباید داخل image قرار بگیرن.
* به‌روز نگه داشتن imageها: آسیب‌پذیری‌ها خیلی سریع پیدا می‌شن، پس آپدیت مرتب imageها ضروریه.
بارها پیش میاد که به خاطر استفاده از یک base image قدیمی، vulnerability جدی توی اسکن امنیتی پیدا میشه. فقط با عوض کردن base image به نسخه‌ی جدیدتر و سبک‌تر، هم امنیت بیشتر میشه، هم حجم image کاهش پیدا میکنه.

نکات تکمیلی امنیت در Docker
1. استفاده از Healthcheck
- توی Dockerfile با HEALTHCHECK وضعیت سرویس رو بررسی کنید که باعث می‌شه container ناسالم زودتر شناسایی و جایگزین بشن.
2. حداقل کردن Surface Attack با distroless images
- این imageها فقط باینری نهایی رو دارن (بدون package manager یا shell).
- دسترسی مهاجم به شدت محدود می‌شه.
3.فعال کردن User namespace remapping
- باعث می‌شه کاربر root داخل container، روی سیستم میزبان واقعاً root نباشه.
4. استفاده از Read-Only Filesystem
- container رو با --read-only بالا بیارید تا کسی نتونه فایل‌های سیستمی داخلش رو تغییر بده.
5. مدیریت Secretها به‌درستی
- هرگز secrets رو داخل image نذارید.
- از ابزارهایی مثل Docker secrets، HashiCorp Vault یا AWS/GCP Secret Manager استفاده کنید.
‏6. Scan امنیتی منظم
- ابزارهایی مثل Trivy, Grype یا Docker Scout رو برای اسکن image استفاده کنید.
- این ابزارها آسیب‌پذیری‌های شناخته‌شده (CVE) رو شناسایی می‌کنن.
7. محدود کردن Resourceها
- با --cpus و --memory منابع container رو محدود کنید تا جلوی حملات DoS یا مصرف بی‌رویه گرفته بشه.
8. استفاده از شبکه‌های ایزوله
- کانتینرهایی که لازم نیست با اینترنت یا کانتینرهای دیگه در ارتباط باشن رو توی یک شبکه‌ی جداگانه نگه دارید.
9. امضای دیجیتال و اعتبارسنجی Imageها
- با Docker Content Trust (DCT) یا cosign امضا و اعتبارسنجی کنید که image تغییر نکرده باشه.
10. بروزرسانی مرتب Docker Engine و Runtime
- چون آسیب‌پذیری‌ها فقط توی imageها نیستن، بلکه خود daemon و runtime هم می‌تونه مشکل امنیتی داشته باشه.


***امنیت در Docker فقط به Dockerfile محدود نیست؛ از انتخاب base image شروع می‌شه، به مدیریت secret و network می‌رسه و حتی شامل CI/CD pipeline هم می‌شه***

@DevTwitter | <Somaye Omidi/>

اگه اهل افکت و هاور و انیمیشن‌های چشم‌گیر هستی، این سایت یه معدن طلاست!

یه منبع پیدا کردم که پره از افکت‌های موس و هاورهایی که وقتی تو پروژه‌ت استفاده کنی، دیگه کسی نمی‌پرسه "بلدی؟" خودشون پروژه رو دو دستی بهت میدن
افکت‌هایی که فقط زیبا نیستن تجربه می‌سازن
مناسب برای عکس ها، متن ها، بکگراند صفحات و...
خوبیش اینه که با React توسعه داده شده
دیگه چی از این بهتر؟؟
لینکش هم اینجاست ، تستش کن، عاشقش می‌شی
reactbits.dev

@DevTwitter | <Abolfazl Shekarshekan/>

امروز سه‌تا شرکت به ریپوی شغل‌های ریموت PHP اضافه کردم. باشد که در نهایت خودم با یکی‌شون کار کنم.

http://github.com/rasoulrahimii/PHP-Remote-Jobs

@DevTwitter | <Rasoul Rahimii/>

لیت‌کد یکی از بهترین جاها برای تمرین الگوریتمه. این ریپو جواب بالای هزار تا از مسئله‌هاشو داره. اگه نمی‌دونی از کجا شروع کنی، اول جوابارو یه نگاه بنداز، بعد خودت امتحان کن. همین می‌تونه شروع مسیرت باشه:
https://github.com/haoel/leetcode

@DevTwitter | <Misa/>

برای فان یک مسنجر P2P امن(E2EE) تحت CLI با پایتون نوشتم.
سرور بین دو کلاینت حکم Relay رو داره و فقط کلید های عمومی شون رو ذخیره میکنه.
دوست داشتند چک کنید.
https://github.com/mthri/e2ee-chat

@DevTwitter | <Amir Motahari/>

یه ابزار خوب بخصوص برای دولوپرها Mastra AI ئه

فریمورک متن‌باز برای ساخت اپ‌های هوش مصنوعی

کاربرد عملی: می‌تونی راحت LLM رو به اپلیکیشن (Laravel، Next.js و …) وصل کنی، agent بسازی، به دیتابیس یا API وصلش کنی و یه دستیار هوشمند توی محصولت داشته باشی.

https://github.com/mastra-ai/mastra

@DevTwitter | <Hamed Ebrahimi/>

ترد (Thread) تو فرانت یعنی چی؟

ترد (Thread) یعنی یه خط یا مسیر اجرای کد توی برنامه یا مرورگر.

تصور کن برنامه یا مرورگر مثل یه آشپزخونه بزرگه:
- هر ترد مثل یه سرآشپز یا کارمند توی آشپزخونه‌ست که یه کار مشخصو انجام می‌ده.
- وقتی یه ترد مشغول یه کار سنگین می‌شه، فقط همون مسیر (یا سرآشپز) تحت تأثیر قرار می‌گیره، نه همه چیز.

---

چندین نوع ترد داریم که خوبه باهاشون اشنا باشیم و بدونیم از هرکدوم باید برای چه کاری استفاده کنیم:

1- ترد اصلی (Main Thread)
- که مسئول همه چیزای اصلی صفحه است: DOM، CSS، رندر و eventها
- هر چیزی که با کاربر در تعامله، اینجا اجرا می‌شه

2- ترد وب وورکر (Web Worker)
- کارهای سنگین و طولانی مثل پردازش داده‌های بزرگ رو با این ترد انجام میدن
- مستقیم نمیتونه با DOM کار می‌کنه و فقط با پیام با main thread حرف می‌زنه

3- ترد سرویس وورکر (Service Worker)
- مخصوص PWA: کش، fetch، push notification
- مستقل از main thread و UI رو قفل نمی‌کنه


برای اینکه کار با main thread خوب و روان باشه، مهمه که کارای سنگین و طولانی رو مستقیم توش نذاریم. همه چیزای مربوط به DOM، رندر و تعامل با کاربر باید سریع اجرا بشه تا صفحه لگ نزنه. کارای پردازشی بزرگ رو بهتره به Web Worker بسپاریم و فقط نتیجه رو برگردونیم. همینطور از تکنیک‌هایی مثل debounce و throttle برای کنترل eventها استفاده کنیم تا main thread شلوغ نشه. وقتی این نکات رو رعایت کنیم، UIامون همیشه روون و بدون لگ می‌مونه

@DevTwitter | <Reihaneh SadatShokouhi/>

امروز گوگل یک مدل بسیار کوچک ولی خیلی قدرتمند برای امبدینگ به اسم EmbeddingGemma ارائه کرد. خلاصه اش:

- مدل جمع‌وجور با ۳۰۸ میلیون پارامتر (بر پایه Gemma 3)
- بهترین عملکرد بین مدل‌های زیر ۵۰۰ میلیون روی MTEB
- اجرای کاملاً روی دستگاه با کمتر از ۲۰۰ مگابایت رم (نسخه کوانتایز شده)
- تولید امبدینگ در کمتر از ۱۵ میلی‌ثانیه روی EdgeTPU
- پشتیبانی از بیشتر از ۱۰۰ زبان
- خروجی قابل تنظیم (از ۱۲۸ تا ۷۶۸ بُعد) با روش Matryoshka
- پشتیبانی از context window با ۲۰۰۰ توکن
- کاملاً آفلاین کار می‌کنه و حریم خصوصی رو حفظ می‌کنه
- مناسب برای RAG روی دستگاه، جستجوی معنایی و پرس‌وجوی داده‌های شخصی
- قابل فاین‌تیون کردن با نوت‌بوک‌های آماده
- در دسترس روی Hugging Face، Kaggle و Vertex AI؛ با مستندات و پشتیبانی توی ابزارهایی مثل transformers.js، MLX، llama.cpp، LiteRT، Ollama، LMStudio، Weaviate
لینک بلاگشون:
https://developers.googleblog.com/en/introducing-embeddinggemma/

@DevTwitter | <Mehdi Allahyari/>

این مخزن گیت هاب همهٔ سیستم‌پرامپت‌های واقعی ابزارهای AI رو جمع کرده و می‌تونه کمکتون کنه پرامپت نویسی و کار با ابزار مختلف رو یاد بگیرید

لینک مخزن
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools

@DevTwitter | <پسر لوسیفر/>

کد ۴۸ ساله معروف بیل گیتس، اوپن‌سورس شد!
مایکروسافت کد ۴۸ ساله‌ی معروف بیل گیتس را متن‌باز کرد تا هر کسی بتواند آن را ببیند و استفاده کند.
https://github.com/microsoft/BASIC-M6502

@DevTwitter | <Saber V/>

زبان C یاد بگیرید.

و به عنوان تمرین، هر مفهومی که در برنامه‌نویسی و مهندسی نرم افزار به گوش‌تون خورده رو در C پیاده کنید. هر پترن، پارادایم، سناریو، و مشکلی که تابه حال اسمش رو شنیدید. نه حتما به صورت ساختاری و واو به واو، بلکه به صورت مفهومی.

درهای جدیدی در ذهن‌تون باز میشه.

@DevTwitter | <Amirreza Gh/>

بیش از ۱۰۰۰+ تمپلیت n8n آماده‌ — کاملاً رایگان
می‌تونید ازشون برای این کارها استفاده کنید:

– لید جنریشن (Lead Generation)
– استراتژی ورود به بازار (GTM)
– تولید محتوا

۱) اتوماسیون‌های ایمیل
– سامانه‌ی پاسخ‌دهی ایمیل
– پاسخ‌گوی خودکار ایمیل با هوش مصنوعی
– تحلیل محتوای مشکوک ایمیل
– دسته‌بندی خودکار ایمیل‌ها
– و خیلی موارد دیگر
لینک:
https://github.com/enescingoz/awesome-n8n-templates/tree/main/Gmail_and_Email_Automation


۲) پژوهش هوش مصنوعی، RAG و تحلیل داده
– کراولر خودکار هوش مصنوعی
– ساخت جست‌وجوی تصویر با تشخیص اشیا
– ساخت چت‌بات RAG (بازیابیِ تقویت‌شده)
لینک:
https://github.com/enescingoz/awesome-n8n-templates/tree/main/AI_Research_RAG_and_Data_Analysis

۳) ایرتیبل Airtable + n8n
– ایجنت هوش مصنوعی برای مدیریت پروژه و جلسه‌ها
– ایجنت گفت‌وگو با Airtable برای تحلیل داده
– رسیدگی به درخواست‌های شغلی با هوش مصنوعی و فرم‌های n8n
– دستیار چت HubSpot با OpenAI و Airtable
لینک:
https://github.com/enescingoz/awesome-n8n-templates/tree/main/Airtable

۴) پایگاه‌داده و ذخیره‌سازی
– گفت‌وگو با پایگاه‌داده PostgreSQL
– تولید کوئری‌های SQL فقط از روی اسکیما
– ایجنت هوش مصنوعی برای MongoDB
– گفت‌وگو با SQLite با ایجنت LangChain
لینک:
https://github.com/enescingoz/awesome-n8n-templates/tree/main/Database_and_Storage

۵) دیسکورد
– بات مجهز به هوش مصنوعی
– ارسال روزانه‌ی گفت‌وگوهای ترجمه‌شده
– اشتراک‌گذاری ویدئوهای یوتیوب و خلاصه‌های هوش مصنوعی در دیسکورد
لینک:
https://github.com/enescingoz/awesome-n8n-templates/tree/main/Discord

۶) فرم‌ها و نظرسنجی‌ها
– مصاحبه‌های مکالمه‌ای با ایجنت‌های هوش مصنوعی و فرم‌های n8n
– سرویس اشتراک ایمیل با فرم‌های n8n، Airtable و هوش مصنوعی
– ارزیابی و تأیید درخواست‌های وقت ملاقات با هوش مصنوعی و فرم‌های n8n
لینک:
https://github.com/enescingoz/awesome-n8n-templates/tree/main/Forms_and_Surveys

۷) گوگل Drive و گوگل Sheets
– نویسندگی و انتشار پست‌های وبلاگ از داخل Google Sheets
– خودکارسازی فاین‌تیون سرتاسری مدل‌های OpenAI با Sheets
– ساخت دستیار OpenAI با Google Drive
– چت با Google Sheets با استفاده از هوش مصنوعی
– استخراج اطلاعات از یک شیتِ لوگو
– چت با برنامه‌ی رویدادها از Sheets در تلگرام
لینک:
https://github.com/enescingoz/awesome-n8n-templates/tree/main/Google_Drive_and_Google_Sheets

۸) شبکه‌های اجتماعی
– ایجنت هوش مصنوعی برای دایرکت‌های اینستاگرام
– ساخت بنر پویا برای پروفایل X (توییتر)
– تولید محتوای اینستاگرام از موضوعات ترند با هوش مصنوعی
– تولیدکننده‌ی توییت با OpenAI
– ارسال خودکار ویدئوهای جدید یوتیوب به X
– دایجست هوش مصنوعی برای Reddit
– تحلیل شبکه‌های اجتماعی + تولید خودکار ایمیل
لینک:
https://github.com/enescingoz/awesome-n8n-templates/tree/main/Instagram_Twitter_Social_Media

@DevTwitter | <Mohsen Rad/>

آپدیت‌ترین و تازه‌ترین دوره Computer Vision در حال حاضر دوره Stanford CS231N Deep Learning for Computer Vision که همین دو روز پیش تمام ویدیوهاش در یوتیوب منتشر شد، اگر میخواین تو حوزه تصویر کار کنید از دستش ندید!

https://www.youtube.com/playlist?list=PLoROMvodv4rOmsNzYBMe0gJY2XS8AQg16

@DevTwitter | <Reza Jafari/>

آیا یک توسعه‌دهنده فرانت‌اند به Docker نیاز داره؟
داکر (Docker) یک پلتفرم متن‌باز برای ایجاد و اجرای نرم‌افزارها در قالب کانتینره، کانتینرها بسته‌های سبکی هستند که شامل کد برنامه، کتابخانه‌ها، ابزارهای سیستم‌عامل و تنظیمات لازم برای اجرای برنامه‌اند فکرکنید یه ظرف استاندارد برای حمل‌ کالا دارید... دقیقاً مثل کانتینرهای کشتی که همه اجزای یک بار را یکجا حمل می‌کنن، کانتینر داکر هم همه اجزای نرم‌افزار را یکجا بسته‌بندی می‌کنه تا در هر محیطی قابل اجرا باشه، داکر در سال ۲۰۱۳ توسط سالومون هایکس معرفی شد تا مشکل ناسازگاری محیط توسعه و استقرار را حل کنه
با داشتن بزار Node Package Manager که بیشتر با اسم npm میشناسیمش بازم به داکر نیاز داریم ؟
اینا در دو دسته کاملاً متفاوت هستن npm ابزار مدیریت بسته‌های کتابخانه‌هاست یعنی وظیفه‌ی نصب و به‌روزرسانی کتابخانه‌هاییه که توی پروژه‌ی تعریف شده
داکر مربوط به محیط اجرای نرم‌افزاره
برگردیم به سوال اصلی :آیا یک توسعه‌دهنده فرانت‌اند به Docker نیاز داره؟
یادگیری داکر برای یک توسعه‌دهنده فرانت‌اند در شروع مسیر ضروری نیست؛ اما با تجربه کاری و نیاز به همکاری با تیم بک‌اند، آشنایی حداقلی با آن خوبه
حتی خود مستندات Next.js هم اشاره کرده‌ برای استقرار در محیط‌های واقعی (مثلاً کانتینر یا Kubernetes) میشه از داکر استفاده کرد، اما در توسعه local روی Mac/Windows معمولاً از حالت معمولا (npm run dev) استفاده میشه تا کارایی بهتری داشته باشیم

@DevTwitter | <Mohsen Zarei/>

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

راه‌حل؟ بازطراحی مغز با نوروساینس
پروژه‌ی Breakthrough دقیقا برای همینه:
- ترک عادت‌های بد (سیگار، شبکه‌های اجتماعی، …)
- ساخت عادت‌های مفید با پاداش‌های سالم
- همه‌چی اپن‌سورس + پرایوسی‌فرست

اپ رو همین الان تست کن:
breakthrough.nextproduction.dev

سورس پروژه تو گیت‌هاب هم هست، خوشحال می‌شیم استار بدید:
http://github.com/nextproduction/breakthrough

@DevTwitter | <Mahdi/>

یک اپ چت ساده با go و دپلویشم اوکیه
میخوام فیچر بهش اضافه کنم
دوست داشتید استار بزنید یا فورک
https://github.com/parvvaresh/chatApp

@DevTwitter | <Alireza Parvaresh/>

https://youtu.be/7xTGNNLPyMI?si=eecurZsy84kG6fS5

یه قسمت از این ویدئو نشون میده که اگه LLM اول جواب رو بده و بعد توضیحات، شاید جواب غلطی بده و تلاش کنه اونو توجیح کنه ولی اگه اول توضیحات رو بیاره، احتمال اینکه به جواب درست برسه بیشتره. یجورایی LLM خودش به توکن‌های تولید شده به عنوان توضیح، برای رسیدن به جواب نهایی نیاز داره. حداقل این برداشت من بود.
ولی این ایده تو دیباگ کردن با کمک AI Agent‌ها خیلی کمک‌کننده هست. اگه بهش توضیح بدید چیکار کردید، چه اروری گرفتید و چه حدس‌هایی برای رفع مشکل می‌زنید، یجورایی مسیر فهمیدن مشکل رو براش مشخص کنید، نتیجه خیلی بهتری می‌گیرید.


@DevTwitter | <Serajoddin Aliabadi/>