إزاي تخلي الموقع يشتغل من غير انترنت؟
.
.
عمرك فكرت إزاي ممكن تفتح موقع ويب ويفضل يشتغل حتى لو الإنترنت قطع؟ أو تلاقي الموقع سريع جدًا كأنه مخزن كل حاجة عندك؟ السر هنا في الـ Service Workers.
الـ Service Workers بتلعب دور كبير في تحسين تجربة المستخدم، كمان بتخلي المواقع تشتغل بسرعة وكفاءة حتى في حالة انقطاع الإنترنت.
تعال نفهم الموضوع ببساطة...
———
📌 يعني إيه Service Workers؟
ببساطة، ده كود أو سكربت JavaScript بيشتغل في الخلفية (background) بين المتصفح والسيرفر. وبيعطي الموقع مميزات كبيرة زي:
- الـ (Caching): يعني يحفظ ملفات الموقع عندك على الجهاز عشان يفتح بسرعة حتى لو الإنترنت ضعيف.
- الموقع يشتغل حتى لو الإنترنت قاطع.
- الـ (Push Notifications): الرسائل اللي بتجيلك من الموقع حتى لو مش فاتح الصفحة.
———
📌 إزاي الـ Service Workers بتشتغل؟
1- التسجيل (Registration): أول ما المستخدم يفتح الموقع، الـ Service Worker بيتسجل مرة واحدة.
2- التثبيت (Installation): هنا يقدر يبدأ يشتغل ويحفظ الملفات اللي محتاجها.
3- الحدث (Fetch Event): لما المستخدم يطلب أي حاجة (زي صورة أو صفحة)، الـ Service Worker يقرر يجيبها من الكاش ولا من السيرفر.
———
✅ مميزات الـ Service Workers:
- أداء أفضل: لأنه بيقلل الضغط على السيرفر.
- تجربة مستخدم ممتازة: من ناحية السرعة وإمكانية التشغل بدون إنترنت.
- الأمان: لازم الـ Service Workers يشتغلوا على HTTPS عشان يحافظوا على بيانات المستخدم.
———
📌 ملحوظات مهمة
📍 الـ Service Workers محتاجة تخطيط كويس عشان متعملش كاش للملفات زيادة عن اللزوم.
📍 مش كل المميزات بتشتغل في كل المتصفحات، فلازم تعمل حسابك.
———
لو عاوز تتعمق في الموضوع وتعرف تفاصيل أكتر 👇
Service Worker API
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
Service workers
https://web.dev/learn/pwa/service-workers
.
.
عمرك فكرت إزاي ممكن تفتح موقع ويب ويفضل يشتغل حتى لو الإنترنت قطع؟ أو تلاقي الموقع سريع جدًا كأنه مخزن كل حاجة عندك؟ السر هنا في الـ Service Workers.
الـ Service Workers بتلعب دور كبير في تحسين تجربة المستخدم، كمان بتخلي المواقع تشتغل بسرعة وكفاءة حتى في حالة انقطاع الإنترنت.
تعال نفهم الموضوع ببساطة...
———
📌 يعني إيه Service Workers؟
ببساطة، ده كود أو سكربت JavaScript بيشتغل في الخلفية (background) بين المتصفح والسيرفر. وبيعطي الموقع مميزات كبيرة زي:
- الـ (Caching): يعني يحفظ ملفات الموقع عندك على الجهاز عشان يفتح بسرعة حتى لو الإنترنت ضعيف.
- الموقع يشتغل حتى لو الإنترنت قاطع.
- الـ (Push Notifications): الرسائل اللي بتجيلك من الموقع حتى لو مش فاتح الصفحة.
———
📌 إزاي الـ Service Workers بتشتغل؟
1- التسجيل (Registration): أول ما المستخدم يفتح الموقع، الـ Service Worker بيتسجل مرة واحدة.
2- التثبيت (Installation): هنا يقدر يبدأ يشتغل ويحفظ الملفات اللي محتاجها.
3- الحدث (Fetch Event): لما المستخدم يطلب أي حاجة (زي صورة أو صفحة)، الـ Service Worker يقرر يجيبها من الكاش ولا من السيرفر.
———
✅ مميزات الـ Service Workers:
- أداء أفضل: لأنه بيقلل الضغط على السيرفر.
- تجربة مستخدم ممتازة: من ناحية السرعة وإمكانية التشغل بدون إنترنت.
- الأمان: لازم الـ Service Workers يشتغلوا على HTTPS عشان يحافظوا على بيانات المستخدم.
———
📌 ملحوظات مهمة
📍 الـ Service Workers محتاجة تخطيط كويس عشان متعملش كاش للملفات زيادة عن اللزوم.
📍 مش كل المميزات بتشتغل في كل المتصفحات، فلازم تعمل حسابك.
———
لو عاوز تتعمق في الموضوع وتعرف تفاصيل أكتر 👇
Service Worker API
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
Service workers
https://web.dev/learn/pwa/service-workers
❤8
بالرغم من إن GraphQL لها مميزات كتير زي المرونة في طلب البيانات وتقليل الـ requests، إلا أنها زي أي تكنولوجي، لها شوية عيوب لازم تاخد بالك منها...
.
.
تعال أقولك على أهم العيوب اللي ممكن تواجهك:
1. تعقيد في الـ Server-Side
في GraphQL، السيرفر محتاج يكون ذكي شوية عشان يتعامل مع كل الـ queries المختلفة اللي ممكن يطلبها العميل (client). بمعنى إن كل query ممكن تطلب بيانات مختلفة تمامًا، فممكن يبقى فيه ضغط على المبرمجين اللي شغالين على الـ backend عشان يبنوا الـ resolvers اللي بتتعامل مع الطلبات دي.
ده بيحتاج وقت وجهد أكتر مقارنة بـ REST اللي بيبقى كل endpoint ثابت ومعروف بيعمل إيه.
———
2. الأداء (Performance)
بالرغم من إن GraphQL بتقلل عدد الـ requests اللي بتتبعت، إلا إنها ممكن تستهلك موارد أكتر على السيرفر. السبب في ده إن العميل ممكن يطلب بيانات كتير في request واحد، والـ server لازم يعالج كل الـqueries دي مرة واحدة.
لو كان في طلبات معقدة بتطلب بيانات كتير من أماكن مختلفة، ممكن الأداء يتأثر بالسلب.
———
3. الـ Over-fetching والـ Under-fetching
في REST، كان العيب الأساسي إنك ممكن تاخد بيانات أكتر من اللي أنت محتاجه (Over-fetching)، لكن في GraphQL، العكس ممكن يحصل. يعني ممكن تطلب بيانات قليلة جدًا (Under-fetching)، وبعدين تكتشف إنك محتاج ترجع تعمل query تاني عشان تجيب بيانات ناقصة.
———
4. الحماية (Security)
بما إن العميل في GraphQL عنده حرية يطلب البيانات اللي هو عاوزها، ممكن يبقى في مشاكل أمنية لو الـ schema مش مكتوبة بشكل صحيح.
على سبيل المثال، العميل ممكن يطلب بيانات بشكل متكرر بطريقة تسبب ضغط على السيرفر أو يطلب بيانات حساسة لو الحماية مش مظبوطة.
———
5. مسار التعلم (Learning Path)
لو أنت أو التيم بتاعك متعودين على REST، التحول لـ GraphQL ممكن ياخد شوية وقت عشان تفهموا إزاي تشتغلوا بها بشكل فعّال.
———
6. عدم التوافق مع الـ Caching التقليدي
في REST، تقدر بسهولة تستخدم الـ HTTP Caching لأن الـ endpoints ثابتة، لكن في GraphQL، الـ queries ممكن تبقى مخصصة جدًا، وده بيصعب عملية الـ caching.
عشان كده، هتحتاج تستخدم حلول مختلفة زي Apollo Client اللي بيوفر caching مناسب لـ GraphQL، بس ده بيزود التعقيد.
———
في النهاية، GraphQL قوية ومرنة جدًا، لكن زي أي أداة، لها مميزاتها وعيوبها. محتاج تقرر لو العيوب دي هتأثر على مشروعك ولا لا، بناءً على متطلبات التطبيق والـ team اللي شغال معاك.
.
.
تعال أقولك على أهم العيوب اللي ممكن تواجهك:
1. تعقيد في الـ Server-Side
في GraphQL، السيرفر محتاج يكون ذكي شوية عشان يتعامل مع كل الـ queries المختلفة اللي ممكن يطلبها العميل (client). بمعنى إن كل query ممكن تطلب بيانات مختلفة تمامًا، فممكن يبقى فيه ضغط على المبرمجين اللي شغالين على الـ backend عشان يبنوا الـ resolvers اللي بتتعامل مع الطلبات دي.
ده بيحتاج وقت وجهد أكتر مقارنة بـ REST اللي بيبقى كل endpoint ثابت ومعروف بيعمل إيه.
———
2. الأداء (Performance)
بالرغم من إن GraphQL بتقلل عدد الـ requests اللي بتتبعت، إلا إنها ممكن تستهلك موارد أكتر على السيرفر. السبب في ده إن العميل ممكن يطلب بيانات كتير في request واحد، والـ server لازم يعالج كل الـqueries دي مرة واحدة.
لو كان في طلبات معقدة بتطلب بيانات كتير من أماكن مختلفة، ممكن الأداء يتأثر بالسلب.
———
3. الـ Over-fetching والـ Under-fetching
في REST، كان العيب الأساسي إنك ممكن تاخد بيانات أكتر من اللي أنت محتاجه (Over-fetching)، لكن في GraphQL، العكس ممكن يحصل. يعني ممكن تطلب بيانات قليلة جدًا (Under-fetching)، وبعدين تكتشف إنك محتاج ترجع تعمل query تاني عشان تجيب بيانات ناقصة.
———
4. الحماية (Security)
بما إن العميل في GraphQL عنده حرية يطلب البيانات اللي هو عاوزها، ممكن يبقى في مشاكل أمنية لو الـ schema مش مكتوبة بشكل صحيح.
على سبيل المثال، العميل ممكن يطلب بيانات بشكل متكرر بطريقة تسبب ضغط على السيرفر أو يطلب بيانات حساسة لو الحماية مش مظبوطة.
———
5. مسار التعلم (Learning Path)
لو أنت أو التيم بتاعك متعودين على REST، التحول لـ GraphQL ممكن ياخد شوية وقت عشان تفهموا إزاي تشتغلوا بها بشكل فعّال.
———
6. عدم التوافق مع الـ Caching التقليدي
في REST، تقدر بسهولة تستخدم الـ HTTP Caching لأن الـ endpoints ثابتة، لكن في GraphQL، الـ queries ممكن تبقى مخصصة جدًا، وده بيصعب عملية الـ caching.
عشان كده، هتحتاج تستخدم حلول مختلفة زي Apollo Client اللي بيوفر caching مناسب لـ GraphQL، بس ده بيزود التعقيد.
———
في النهاية، GraphQL قوية ومرنة جدًا، لكن زي أي أداة، لها مميزاتها وعيوبها. محتاج تقرر لو العيوب دي هتأثر على مشروعك ولا لا، بناءً على متطلبات التطبيق والـ team اللي شغال معاك.
❤9
React 19: Break Hook Cycles
Fix circular dependencies in your React hooks with useDeferredValue!
❤1
12 نصيحـة لحمـاية الـ APIs 💯
.
.
في عالم البرمجة، تعتبر الـ APIs هي الأعصاب في جسم التطبيقات، لو حصل فيها مشكلة، الدنيا كلها بتخرب. عشان كده، حماية الـ APIs مهمة جدًا وحاجة أساسية في التطبيق. 💡
تعال ندردش شوية عن طرق حماية الـ APIs...
———
1- استخدم الـ HTTPS:
دي أول حاجة لازم تعملها، أي حاجة بتتبعت أو بتستقبلها لازم تكون مشفّرة، عشان تحمي بياناتك.
2- اعتمد على الـ OAuth2:
ده المعيار الأساسي عشان تحمي التطبيقات اللي بتتصل بـ APIs، وبيضمن إن الـ Token اللي بيتبعت آمن ومحدود الصلاحيات.
3- جرب الـ WebAuthn:
لو شغلك فيه حساسية عالية، فكر في WebAuthn عشان تضيف طبقة أمان من خلال المصادقة البيومترية (زي البصمة أو التعرف على الوجه).
4- قسّم المفاتيح حسب الصلاحيات (Leveled API Keys):
مينفعش نفس المفتاح يقدر يعمل كل حاجة، قسّم المفاتيح بناءً على صلاحيات المستخدم أو التطبيق.
5- ركز على الـ Authorization مش بس الـ Authentication:
مجرد إن المستخدم سجل الدخول مش معناه إنه مسموح له يعمل كل حاجة. تأكد إن كل طلب معمول له تفويض.
6- طبّق الـ Rate Limiting:
متخليش أي حد يقدر يضرب الـ API بتاعك بمئات الطلبات في الثانية. كده هتحمي نفسك من الـ DDoS attacks.
7- اعمل API Versioning:
تغيير صغير في الـ API ممكن يبوّظ تطبيقات كتير لو مش مأمن نسخة قديمة ليها. حافظ على الإصدارات المختلفة.
8- استخدم Whitelisting:
اسمح بس لطلبات جايه من IPs معينة، وده بيقلل احتمالية الاختراق من جهات غير معروفة.
9- افحص OWASP API Security Risks:
قائمة OWASP دي زي الكتالوج للمخاطر الشائعة في الـ APIs. تأكد إنك عارفهم وعالجتهم.
10- خلي فيه API Gateway:
ده زي الحارس الشخصي للـ APIs. بيعمل فلترة للطلبات، مصادقة، وتحكم شامل في الأمان.
11- تعامل بحرص مع الأخطاء (Error Handling):
متطلعش معلومات حساسة لما يحصل خطأ، زي الـ stack traces أو البيانات الداخلية.
12- فعّل Input Validation:
بلاش تدي الأمان للبيانات اللي جايه من الـ client بشكل عشوائي. افحص كل المدخلات وتأكد إنها سليمة.
.
.
في عالم البرمجة، تعتبر الـ APIs هي الأعصاب في جسم التطبيقات، لو حصل فيها مشكلة، الدنيا كلها بتخرب. عشان كده، حماية الـ APIs مهمة جدًا وحاجة أساسية في التطبيق. 💡
تعال ندردش شوية عن طرق حماية الـ APIs...
———
1- استخدم الـ HTTPS:
دي أول حاجة لازم تعملها، أي حاجة بتتبعت أو بتستقبلها لازم تكون مشفّرة، عشان تحمي بياناتك.
2- اعتمد على الـ OAuth2:
ده المعيار الأساسي عشان تحمي التطبيقات اللي بتتصل بـ APIs، وبيضمن إن الـ Token اللي بيتبعت آمن ومحدود الصلاحيات.
3- جرب الـ WebAuthn:
لو شغلك فيه حساسية عالية، فكر في WebAuthn عشان تضيف طبقة أمان من خلال المصادقة البيومترية (زي البصمة أو التعرف على الوجه).
4- قسّم المفاتيح حسب الصلاحيات (Leveled API Keys):
مينفعش نفس المفتاح يقدر يعمل كل حاجة، قسّم المفاتيح بناءً على صلاحيات المستخدم أو التطبيق.
5- ركز على الـ Authorization مش بس الـ Authentication:
مجرد إن المستخدم سجل الدخول مش معناه إنه مسموح له يعمل كل حاجة. تأكد إن كل طلب معمول له تفويض.
6- طبّق الـ Rate Limiting:
متخليش أي حد يقدر يضرب الـ API بتاعك بمئات الطلبات في الثانية. كده هتحمي نفسك من الـ DDoS attacks.
7- اعمل API Versioning:
تغيير صغير في الـ API ممكن يبوّظ تطبيقات كتير لو مش مأمن نسخة قديمة ليها. حافظ على الإصدارات المختلفة.
8- استخدم Whitelisting:
اسمح بس لطلبات جايه من IPs معينة، وده بيقلل احتمالية الاختراق من جهات غير معروفة.
9- افحص OWASP API Security Risks:
قائمة OWASP دي زي الكتالوج للمخاطر الشائعة في الـ APIs. تأكد إنك عارفهم وعالجتهم.
10- خلي فيه API Gateway:
ده زي الحارس الشخصي للـ APIs. بيعمل فلترة للطلبات، مصادقة، وتحكم شامل في الأمان.
11- تعامل بحرص مع الأخطاء (Error Handling):
متطلعش معلومات حساسة لما يحصل خطأ، زي الـ stack traces أو البيانات الداخلية.
12- فعّل Input Validation:
بلاش تدي الأمان للبيانات اللي جايه من الـ client بشكل عشوائي. افحص كل المدخلات وتأكد إنها سليمة.
❤5
Real-World DevOps/Cloud Projects For Learning from Beginner to Advanced 🚀
This repository serves as a comprehensive resource for aspiring DevOps engineers to learn and implement real-world DevOps projects.
It includes guides and solutions for deploying scalable systems, such as deploying a Java application on AWS using a 3-tier architecture and setting up scalable VPC architectures in the cloud.
https://github.com/NotHarshhaa/DevOps-Projects
❤1
You know about the
vh unit in CSS, but what are these new mystery units in CSS?❤5
The Ultimate DevOps Developer Roadmap 🔻
Pick and master one or two programming languages. Choose from options like Python, JavaScript, Go, Ruby, etc.
Master the ins and outs of major operating systems like Linux, Windows, Mac, and so on.
Learn about source control management tools such as Git, GitHub, GitLab, and Bitbucket.
Master the basics of networking concepts such as DNS, IP, TCP, and SSH.
Pick tools like GitHub Actions, Jenkins, or CircleCI to learn about continuous integration and continuous delivery.
Learn noscripting in bash, and PowerShell along with knowledge of various terminals and editors.
Master multiple hosting platforms such as AWS, Azure, GCP, Docker, Kubernetes, Digital Ocean, Lambda, Azure Functions, etc.
Learn infrastructure as code tools like Terraform, Pulumi, Ansible, Chef, Puppet, Kubernetes, etc.
Master the key tools for monitoring and logging for infrastructure and applications such as Prometheus, Elasticsearch, Logstash, Kibana, etc.
Learn the basics of software development such as system availability, data management, design patterns, and team collaboration.
Programming Languages
Pick and master one or two programming languages. Choose from options like Python, JavaScript, Go, Ruby, etc.
Operating Systems
Master the ins and outs of major operating systems like Linux, Windows, Mac, and so on.
Source Control Management
Learn about source control management tools such as Git, GitHub, GitLab, and Bitbucket.
Networking
Master the basics of networking concepts such as DNS, IP, TCP, and SSH.
CI/CD
Pick tools like GitHub Actions, Jenkins, or CircleCI to learn about continuous integration and continuous delivery.
Scripting and Terminals
Learn noscripting in bash, and PowerShell along with knowledge of various terminals and editors.
Hosting and Platforms
Master multiple hosting platforms such as AWS, Azure, GCP, Docker, Kubernetes, Digital Ocean, Lambda, Azure Functions, etc.
Infrastructure as Code
Learn infrastructure as code tools like Terraform, Pulumi, Ansible, Chef, Puppet, Kubernetes, etc.
Monitoring and Logging
Master the key tools for monitoring and logging for infrastructure and applications such as Prometheus, Elasticsearch, Logstash, Kibana, etc.
Basics of Software Development
Learn the basics of software development such as system availability, data management, design patterns, and team collaboration.
❤3