DevGuide – Telegram
11.1K subscribers
2.93K photos
19 videos
133 files
3.62K links
Level up daily with insider dev hacks, smart career tips, and real talk! 🚀

⚡️ Stay connected with me: linktr.ee/AliSamir

📍 To advertise on the channel: https://telega.io/c/the_developer_guide
Download Telegram
Frontend Libraries You Should Try 💯
7
يعني إيه Canary Testing؟ 🤔
.
.
تخيل معايا إنك بتشتغل في شركة Tech كبيرة، وعندك Feature جديدة اشتغلت عليها أكتر من أسبوع، اختبرتها على الـ dev environment، وعدّت الـ QA، وكل حاجة تمام…
بس قبل ما تطلعها لكل الناس على الـ production، في سؤال بيخطر في بالك:

"يا ترى الفيتشر دي هتشتغل فعلًا كويس لما تنزل؟ ولا ممكن تعمل مشاكل للمستخدمين؟"

وهنا ييجي دور الـ Canary Testing...

——-—

الكلمة دي أصلها لما كانوا عمّال المناجم بياخدوا طيور الكناري معاهم تحت الأرض. الطيور دي كانت بتحذرهم لو فيه غاز سام قبل ما هم نفسهم يتأثروا.
لو الكناري ماتت، يبقى فيه خطر، ولازم يطلعوا فورًا

نفس الفكرة بالضبط في البرمجة
قبل ما نـ rollout feature أو update لكل الناس، بنطلّعها لعدد صغير جدًا من المستخدمين الحقيقيين — الكناري بتاعنا — ونراقب سلوك السيستم كويس. لو كل حاجة ماشية تمام، نكمّل التحديث لباقي الناس. لو حصلت مشاكل؟ نوقف الدنيا بسرعة ونرجّعها زي ما كانت.

———

📌 إمتى نستخدم الـ Canary Testing؟

- لو الـ Feature حساسة شويتين وممكن تعمل impact كبير لو فيها bug.
- لو بتشتغل على Microservices وعايز تتأكد إن الـ service الجديدة مش هتبوّظ الـsystem كله.
- لو شغال في بيئة فيها ملايين الـusers ومينفعش تخاطر.

———

💡 إيه الفرق بين Canary Testing و A/B Testing؟

ناس كتير بتتلخبط بينهم، بس الفرق واضح:

الـ Canary Testing: إحنا بنجرب نفس الـ feature على نسبة صغيرة من الناس ونشوف هل فيها مشاكل ولا لا.

الـ A/B Testing: إحنا بنجرب نسختين مختلفين (Version A و Version B) ونشوف أنهي فيهم هيكون أحسن.

يعني الـCanary هدفه الأساسي الأمان، والـA/B هدفه الأساسي التحسين والتطوير.

———

⚙️ إزاي بنطبّق Canary Testing؟

فيه كذا طريقة، على حسب الـ Infra اللي شغال بها:

1- الـ Feature Flags: بتكون مشغل الـ feature الجديدة بس لناس معينة أو نسبة صغيرة.

2- الـ Traffic Splitting: ممكن تستخدم أدوات زي Kubernetes أو Load Balancers علشان توزّع الـ traffic بشكل كويس.

3- الـ Monitoring Tools: أهم حاجة تتابع الـ logs والـ metrics والـ errors أول بأول، سواء بـ Datadog أو New Relic أو أي أداة بترتاح فيها.

4- الـ Rollback Plan: لو حصلت مشكلة؟ تكون محضّر خطة rollback سريعة.

———

وفقكم الله لكل خير 🌿
9
The Hidden SEO Superpower: Mastering Sitemaps & Site Structure for Explosive Organic Growth 🧭


What if I told you that your website could be brilliant, beautiful — and invisible to Google?

That’s the harsh reality for many site owners who ignore the quiet powerhouse of SEO: the sitemap.

———

🔗 https://dev.to/alisamir/the-hidden-seo-superpower-mastering-sitemaps-site-structure-for-explosive-organic-growth-18pn
3
Conditional Types for Flexible Logic
5
يعني إيه Sitemap؟ وإزاي بتأثر على SEO؟ 🚀
.
.
فيه حاجات في الويب لو فهمتها بدري، هتوفر على نفسك مشاكل كتير قدام…
واحدة من الحاجات دي هي الـ Sitemap.

وهي دي إجابة سؤال: "ليه جوجل مش بيأرشف كل صفحات الموقع؟"
أو
"ليه الصفحات الجديدة مش بتظهر في السيرش؟"

وده لأنك مش عامل Sitemap صح، أو مش عاملها أصلًا.

تعال ندردش شوية ونعرف يعني إيه Sitemap، وإزاي ممكن تساعد موقعك...

———

📌 يعني إيه Sitemap؟

تقدر تعتبرها خريطة الموقع بتاعك.
زي خريطة مول كبير، فيها كل المحلات والمداخل والمخارج… بس هنا الخريطة معمولة عشان Google و Bing وكل محركات البحث.

يعني sitemap.xml دي عبارة عن فايل بيقول لمحركات البحث:

"الموقع بتاعي فيه الصفحات دي كلها، ودي أهمها، ودي اللي تم تحديثها قريب، ودي اللي محتاج تدخلها بسرعة."

فالـ Sitemap بتسهّل جدًا على الـ Crawlers إنها تـفهم موقعك وتمشي فيه من غير توهان.

———

💡ليه الـ Sitemap مهمة؟

خليني أقولك على شوية سيناريوهات واقعية:

- لو موقعك لسه جديد ومفيهوش لينكات كتير، فغالبًا الـ Google مش هيعرف يوصل لكل الصفحات بسهولة. هنا sitemap بتساعده يوصل أسرع.

- لو عندك صفحات كتير مش مربوطة ببعض (يعني مفيش internal links كفاية)، فـ محركات البحث ممكن تفوّت صفحات مهمة جدًا.

- لو بتحدّث محتوى باستمرار، الـ sitemap بتقول لـ Google إن فيه تحديثات حصلت، فيعيد عملية الـ crawl على الصفحات دي بسرعة.

———

🛠 أنواع الـ Sitemap؟

1- الـ XML Sitemap: وده اللي بنبعته لمحركات البحث.

- بيكون فايل اسمه غالبًا sitemap.xml.
- بيحتوي على لينكات الصفحات، وتواريخ آخر تحديث، وأحيانًا priority.


2- الـ HTML Sitemap: وده بيكون معمول للمستخدم العادي.

- صفحة فيها كل اللينكات المهمة في الموقع.
- بتساعد الناس يتنقلوا بسهولة.

لكن اللي يهمنا في الـ SEO هو الـ XML Sitemap.

———

🤔 إزاي تعمل Sitemap؟

فيه أدوات بتعمل ده تلقائي:

- لو بتستخدم WordPress: إضافة زي Yoast SEO أو Rank Math بتعمل sitemap تلقائي.

- لو بتشتغل بـ Next.js أو أي framework تاني: تقدر تستخدم حاجة زي next-sitemap، أو تعمل generate يدوي.

- لو عندك static site: استخدم أدوات زي sitemap-generator أو screaming frog.

———

بعد ما تجهز sitemap.xml:

ارفعها على root بتاع الموقع، زي:
https://example.com/sitemap.xml


روح على Google Search Console:

- اختار الموقع
- اختار Sitemaps
- ضيف اللينك بتاع الـ sitemap

ده بيقول لجوجل: "إن الموقع جاهز وادخل بص على الصفحات دي."

———

وفقكم الله لكل خير 🌿
10👍1
Useful CSS Properties You Should Know 💯
5