مكتبة Three.js وتطوير المواقع ثلاثية الأبعاد (3D) 💯
عبارة عن مكتبة JavaScript مفتوحة المصدر بتساعدك في عمل أشكال ثلاثية الأبعاد في الموقع بتاعك وبتوفر مجموعة كبيرة من الأدوات والميزات اللي بتخليك تعمل أي شكل ثلاثي الأبعاد في الموقع بكل سهولة.
———
📍 المكتبة مبنية على WebGL ودي تقنية بتسمح بتشغيل الأشكال ثلاثية الأبعاد في المتصفح بشكل سلس وبسيط، مكتبة Three.js بتستفيد من تقنية WebGL في بعض الوظائف زي الإضاءة والتأثيرات البصرية والتظليل وغيرهم.
———
📍 المكتبة بتوفر مجموعة واسعة من التأثيرات اللي بتضيف مظهر واقعي وجذاب على الأشكال ثلاثية الأبعاد زي التأثيرات الضوئية والظلال والانعكاس والانكسار وغيرهم.
———
📍 المكتبة بتساعدك في تحريك الأشكال ثلاثية الأبعاد باستخدام أنماط مختلفة متوفرة وجاهزة للاستخدام زي الدوران والانتقال وتغير حجم الشكل وغيرهم، وطبعا لو محتاج تعمل حاجات معقدة ممكن تستخدم إطار عمل زي Tween.js.
———
⚡️ A Collection of Three.js Resources for Building 3D Websites.
https://threejsresources.com
⚡️ A curated list of awesome Three.js resources
https://github.com/AxiomeCG/awesome-threejs
⚡️ Three.js Resources
https://www.linkedin.com/posts/dev-alisamir_javascript-threejs-3dwebsite-activity-7081229434543910912-sAvd
❤5
قنوات يوتيوب هتفيدك جدًا كـ مهندس برمجيات 💯
.
.
15 YouTube Channels You Must Subscribe to as a Software Engineer:
↳ Strong focus on JavaScript and Python and top-notch web dev tutorials
↳ youtube.com/@TechWithTim
↳ AI educational content to turn enthusiasts into professionals
↳ youtube.com/@CodeEmporium
↳ Covering in depth the latest AI content/news
↳ youtube.com/@aiexplained-official
↳ High-intensity code tutorials and tech news to help you ship your app faster
↳ youtube.com/@Fireship
↳ Learn about AWS, cloud computing, and system design concepts
↳ youtube.com/@BeABetterDev
↳ The best animations out there to understand math and physics
↳ youtube.com/@3blue1brown
↳ The official YouTube channel for AWS Events and Webinars
↳ youtube.com/@AWSEventsChannel
↳ Programming and software design with practical Python examples
↳ youtube.com/@ArjanCodes
↳ Low-level stories and learnings on computer software and engineering
↳ youtube.com/@LowLevelLearning
↳ Official courses and conferences from Stanford online
↳ youtube.com/@stanfordonline
↳ Super high density and variety of code tutorials!
↳ youtube.com/@freecodecamp
↳ The latest papers explained with visuals
↳ youtube.com/@TwoMinutePapers
↳ High quality code concepts taught with visuals
↳ youtube.com/@CodeAesthetic
↳ Making you better through interactive roadmaps and concepts in system design, CS fundamentals, and web dev!
↳ youtube.com/@roadmapsh
↳ The best channel to learn system design with visuals
↳ youtube.com/@ByteByteGo
.
.
15 YouTube Channels You Must Subscribe to as a Software Engineer:
0. Tech With Tim
↳ Strong focus on JavaScript and Python and top-notch web dev tutorials
↳ youtube.com/@TechWithTim
1. Code Emporium
↳ AI educational content to turn enthusiasts into professionals
↳ youtube.com/@CodeEmporium
2. AI Explained
↳ Covering in depth the latest AI content/news
↳ youtube.com/@aiexplained-official
3. Fireship
↳ High-intensity code tutorials and tech news to help you ship your app faster
↳ youtube.com/@Fireship
4. Be a Better Dev
↳ Learn about AWS, cloud computing, and system design concepts
↳ youtube.com/@BeABetterDev
5. 3 Blue 1 Brown
↳ The best animations out there to understand math and physics
↳ youtube.com/@3blue1brown
6. AWS Events
↳ The official YouTube channel for AWS Events and Webinars
↳ youtube.com/@AWSEventsChannel
7. Arjan Codes
↳ Programming and software design with practical Python examples
↳ youtube.com/@ArjanCodes
8. Low Level Learning
↳ Low-level stories and learnings on computer software and engineering
↳ youtube.com/@LowLevelLearning
9. Stanford Online
↳ Official courses and conferences from Stanford online
↳ youtube.com/@stanfordonline
10. freeCodeCamp
↳ Super high density and variety of code tutorials!
↳ youtube.com/@freecodecamp
11. Two Minute Papers
↳ The latest papers explained with visuals
↳ youtube.com/@TwoMinutePapers
12. Code Aesthetic
↳ High quality code concepts taught with visuals
↳ youtube.com/@CodeAesthetic
13. The Roadmap
↳ Making you better through interactive roadmaps and concepts in system design, CS fundamentals, and web dev!
↳ youtube.com/@roadmapsh
14. ByteByteGo
↳ The best channel to learn system design with visuals
↳ youtube.com/@ByteByteGo
❤1
Find Your Perfect Master's Degree
Explore and compare Master's programs worldwide. Search by university, subject, location, or scholarships.
https://www.mastersportal.com
Mastersportal
Find 90000+ Masters Worldwide: all MBA, MSc., MA, LLM, MPhil and other postgraduate programmes | Mastersportal
Find and compare Master degrees from top universities worldwide: search all MBA, MSc, MA, LLM, MPhil and more postgraduate programmes to study abroad or at home.
Backend Engineering (Beginner)
https://youtube.com/playlist?list=PLQnljOFTspQUNnO4p00ua_C5mKTfldiYT&si=QXSC5gMupjPSY2Np
Backend Engineering (Intermediate)
https://youtube.com/playlist?list=PLQnljOFTspQWGuRmwojJ6LiV0ejm6eOcs&si=T8kZTHfr1f-5K0kb
Backend Engineering (Advanced)
https://youtube.com/playlist?list=PLQnljOFTspQUybacGRk1b_p13dgI-SmcZ&si=18imfEAmwDj0K6gG
𝗡𝗼𝗱𝗲.𝗷𝘀 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 – 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝘁𝗼 𝗘𝘅𝗽𝗲𝗿𝘁 🚀
🟢 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 / 𝗝𝘂𝗻𝗶𝗼𝗿 𝗟𝗲𝘃𝗲𝗹
1. What is Node.js?
2. Why is Node.js single-threaded?
3. What is the V8 engine?
4. What is the Event Loop?
5. Difference between Node.js and JavaScript in the browser.
6. What are global objects in Node.js?
7. What is npm?
8. What is package.json?
9. What is module.exports?
10. Difference between require and import.
11. What is callback?
12. What is asynchronous programming?
13. What is Promise?
14. Difference between Promise and callback.
15. What is async/await?
16. What is REPL?
17. What is middleware?
18. What is Express.js?
19. What is REST API?
20. How do you handle errors in Node.js?
———
🟡 𝗠𝗶𝗱-𝗟𝗲𝘃𝗲𝗹 (𝟮–𝟱 𝗬𝗲𝗮𝗿𝘀 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲)
21. What is non-blocking I/O?
22. How does the Event Loop work internally?
23. Difference between process.nextTick and setImmediate.
24. What are streams in Node.js?
25. Types of streams.
26. What is Buffer?
27. What is clustering?
28. How do you handle multiple requests?
29. How do you manage environment variables?
30. What is CORS?
31. How do you secure Node.js APIs?
32. What is JWT authentication?
33. How do you connect Node.js with databases?
34. Difference between SQL and NoSQL in Node.js apps.
35. What is Mongoose?
36. How do you handle file uploads?
37. What is rate limiting?
38. How do you implement pagination?
39. How do you handle logging?
40. How do you test Node.js applications?
———
🔵 𝗦𝗲𝗻𝗶𝗼𝗿 / 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁 𝗟𝗲𝘃𝗲𝗹
41. Explain Node.js architecture.
42. How do you scale Node.js applications?
43. What is horizontal vs vertical scaling?
44. How do you handle CPU-intensive tasks?
45. How do you design microservices in Node.js?
46. How do you handle inter-service communication?
47. What is message queue usage in Node.js?
48. How do you implement caching?
49. What is Redis used for?
50. How do you handle memory leaks?
51. How do you monitor Node.js applications?
52. How do you implement CI/CD for Node.js?
53. How do you secure APIs at enterprise level?
54. How do you handle API versioning?
55. How do you manage secrets?
56. What are Node.js performance bottlenecks?
57. How do you implement graceful shutdown?
58. What are common Node.js anti-patterns?
59. How do you design fault-tolerant systems?
60. When should you NOT use Node.js?
🟢 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 / 𝗝𝘂𝗻𝗶𝗼𝗿 𝗟𝗲𝘃𝗲𝗹
1. What is Node.js?
2. Why is Node.js single-threaded?
3. What is the V8 engine?
4. What is the Event Loop?
5. Difference between Node.js and JavaScript in the browser.
6. What are global objects in Node.js?
7. What is npm?
8. What is package.json?
9. What is module.exports?
10. Difference between require and import.
11. What is callback?
12. What is asynchronous programming?
13. What is Promise?
14. Difference between Promise and callback.
15. What is async/await?
16. What is REPL?
17. What is middleware?
18. What is Express.js?
19. What is REST API?
20. How do you handle errors in Node.js?
———
🟡 𝗠𝗶𝗱-𝗟𝗲𝘃𝗲𝗹 (𝟮–𝟱 𝗬𝗲𝗮𝗿𝘀 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲)
21. What is non-blocking I/O?
22. How does the Event Loop work internally?
23. Difference between process.nextTick and setImmediate.
24. What are streams in Node.js?
25. Types of streams.
26. What is Buffer?
27. What is clustering?
28. How do you handle multiple requests?
29. How do you manage environment variables?
30. What is CORS?
31. How do you secure Node.js APIs?
32. What is JWT authentication?
33. How do you connect Node.js with databases?
34. Difference between SQL and NoSQL in Node.js apps.
35. What is Mongoose?
36. How do you handle file uploads?
37. What is rate limiting?
38. How do you implement pagination?
39. How do you handle logging?
40. How do you test Node.js applications?
———
🔵 𝗦𝗲𝗻𝗶𝗼𝗿 / 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁 𝗟𝗲𝘃𝗲𝗹
41. Explain Node.js architecture.
42. How do you scale Node.js applications?
43. What is horizontal vs vertical scaling?
44. How do you handle CPU-intensive tasks?
45. How do you design microservices in Node.js?
46. How do you handle inter-service communication?
47. What is message queue usage in Node.js?
48. How do you implement caching?
49. What is Redis used for?
50. How do you handle memory leaks?
51. How do you monitor Node.js applications?
52. How do you implement CI/CD for Node.js?
53. How do you secure APIs at enterprise level?
54. How do you handle API versioning?
55. How do you manage secrets?
56. What are Node.js performance bottlenecks?
57. How do you implement graceful shutdown?
58. What are common Node.js anti-patterns?
59. How do you design fault-tolerant systems?
60. When should you NOT use Node.js?
❤4🤯1
من ضمن المواضيع المهمة في الـ Web Security هو إنك تعمل Threat Modeling...
.
.
الفكرة ببساطة إنك تبص على السيستم بتاعك بعين الـ attacker قبل ما يبص هو عليه...
يعني بدل ما تستنى المشكلة تحصل، أنت بتحاول تتوقعها من بدري وتقفلها.
———
📌 يعني إيه Threat Modeling؟
ببساطة الموضوع كله إنك تقعد مع نفسك (أو مع التيم) وتجاوب على شوية أسئلة مهمة:
- إيه الحاجات المهمة عندي؟ (users data – auth system – APIs…)
- السيستم بتاعي ماشي إزاي؟ (data flow)
- فين النقاط اللي ممكن حد يدخل منها؟ (entry points)
- إيه أسوأ سيناريو ممكن يحصل؟
بعد كده تبدأ تفكر:
لو أنا مكان الهاكر… ممكن أخترق السيستم منين؟
مثلًا:
- هل فيه API ممكن تتضرب بـ brute force؟
- هل فيه input مش معمول له validation كويس؟
- هل فيه صلاحيات ممكن حد يغير فيها؟
ومن هنا تبدأ تطلع threats واضحة قدامك...
———
📌 طيب نعمل إيه بعد ما نحدد الـ threats؟
نبدأ نحط mitigations:
- rate limiting
- good validation
- proper auth & authorization
- logging & monitoring
الميزة الكبيرة بقى في الموضوع ده إنك:
بدل ما تعالج المشاكل بعد ما تحصل (وده بيبقى مكلف جدًا)، أنت بتمنعها من الأساس.
.
.
الفكرة ببساطة إنك تبص على السيستم بتاعك بعين الـ attacker قبل ما يبص هو عليه...
يعني بدل ما تستنى المشكلة تحصل، أنت بتحاول تتوقعها من بدري وتقفلها.
———
📌 يعني إيه Threat Modeling؟
ببساطة الموضوع كله إنك تقعد مع نفسك (أو مع التيم) وتجاوب على شوية أسئلة مهمة:
- إيه الحاجات المهمة عندي؟ (users data – auth system – APIs…)
- السيستم بتاعي ماشي إزاي؟ (data flow)
- فين النقاط اللي ممكن حد يدخل منها؟ (entry points)
- إيه أسوأ سيناريو ممكن يحصل؟
بعد كده تبدأ تفكر:
لو أنا مكان الهاكر… ممكن أخترق السيستم منين؟
مثلًا:
- هل فيه API ممكن تتضرب بـ brute force؟
- هل فيه input مش معمول له validation كويس؟
- هل فيه صلاحيات ممكن حد يغير فيها؟
ومن هنا تبدأ تطلع threats واضحة قدامك...
———
📌 طيب نعمل إيه بعد ما نحدد الـ threats؟
نبدأ نحط mitigations:
- rate limiting
- good validation
- proper auth & authorization
- logging & monitoring
الميزة الكبيرة بقى في الموضوع ده إنك:
بدل ما تعالج المشاكل بعد ما تحصل (وده بيبقى مكلف جدًا)، أنت بتمنعها من الأساس.
❤6
دردشة سريعة عن الـ Message Queueing ⚡️
.
.
عمرك سألت نفسك إزاي الأنظمة الكبيرة بتتعامل مع كميات مهولة من الطلبات في نفس اللحظة من غير ما تنهار؟ 🤔
الموضوع أبسط مما تتخيل… والسر في مفهوم صغير لكنه قوي جدًا اسمه Message Queueing.
الفكرة إن بدل ما السيستم يشيل الحِمل كله مرة واحدة، بنرتّب الشغل في طابور منظم، وكل حاجة بتتم واحدة واحدة.
تعال نفهم ليه الـ Message Queueing من أهم الأساليب اللي بنعتمد عليها في بناء أنظمة مرنة وقابلة للتوسع...
———
📌 إيه هي فكرة الـ Message Queue؟
تخيل أنك صاحب مطعم وطلبات الزبائن كتير جدًا. لو كل الطلبات دخلت المطبخ مرة واحدة، الطباخين مش هيعرفوا يشتغلوا، وهتلاقي الدنيا باظت.
فأنت كمدير، بتعمل نظام طابور (queue) قدام المطبخ. الطلبات تدخل واحد واحد على حسب أولوية كل طلب، والمطبخ يشتغل بالترتيب.
هو ده بالضبط اللي بيحصل في الـ Message Queueing. بدل ما السيستم بتاعك ينفّذ كل المهام في نفس اللحظة، بيحطها في طابور، ويسيب جزء معين من السيستم يعالجها واحدة واحدة.
———
📌 استخدامات الـ Message Queueing:
✅ الإشعارات (Notifications):
لما تبعت إشعار لعدد كبير جدًا من المستخدمين، مش كلهم لازم يوصلهم الإشعار في نفس اللحظة. بدل ما السيستم ينهار، بنبعت الإشعارات للطابور، وكل إشعار يتبعت في دوره.
✅ طلبات الدفع (Payment Processing):
لما يجي طلب دفع، بتحطه في الطابور علشان يتحقق منه ويتنفّذ بشكل آمن بدون ما يحصل تضارب.
✅ تحليل البيانات (Data Processing):
سيستم زي Google Analytics مثلًا، بيحتاج يتعامل مع مليارات الطلبات. الطابور هنا بيخلّي كل طلب ياخد دوره في التحليل.
———
📌 إيه مميزات الـ Message Queue؟
- المرونة (Scalability):
لو الطابور طويل، نقدر نزود عدد "الطباخين" بسهولة (workers) علشان يخلصوا الشغل أسرع.
- الثبات (Reliability):
حتى لو حصل مشكلة في جزء معين من السيستم، الطابور بيضمن إن البيانات متسجلة ومفيش حاجة هتضيع.
- الفصل بين الأجزاء (Decoupling):
كل جزء من السيستم بيشتغل لوحده. اللي بيبعت الرسائل مش محتاج يعرف التفاصيل بتاعة اللي بيعالجها، والعكس.
———
📌 أمثلة على الـ Message Queue Tools:
- الـ RabbitMQ: أداة قوية وسهلة الاستخدام.
- الـ Apache Kafka: مثالية للتعامل مع البيانات الكتيرة اللي بتيجي في وقت واحد.
- الـ Amazon SQS: خدمة بسيطة وسحابية من AWS.
.
.
عمرك سألت نفسك إزاي الأنظمة الكبيرة بتتعامل مع كميات مهولة من الطلبات في نفس اللحظة من غير ما تنهار؟ 🤔
الموضوع أبسط مما تتخيل… والسر في مفهوم صغير لكنه قوي جدًا اسمه Message Queueing.
الفكرة إن بدل ما السيستم يشيل الحِمل كله مرة واحدة، بنرتّب الشغل في طابور منظم، وكل حاجة بتتم واحدة واحدة.
تعال نفهم ليه الـ Message Queueing من أهم الأساليب اللي بنعتمد عليها في بناء أنظمة مرنة وقابلة للتوسع...
———
📌 إيه هي فكرة الـ Message Queue؟
تخيل أنك صاحب مطعم وطلبات الزبائن كتير جدًا. لو كل الطلبات دخلت المطبخ مرة واحدة، الطباخين مش هيعرفوا يشتغلوا، وهتلاقي الدنيا باظت.
فأنت كمدير، بتعمل نظام طابور (queue) قدام المطبخ. الطلبات تدخل واحد واحد على حسب أولوية كل طلب، والمطبخ يشتغل بالترتيب.
هو ده بالضبط اللي بيحصل في الـ Message Queueing. بدل ما السيستم بتاعك ينفّذ كل المهام في نفس اللحظة، بيحطها في طابور، ويسيب جزء معين من السيستم يعالجها واحدة واحدة.
———
📌 استخدامات الـ Message Queueing:
✅ الإشعارات (Notifications):
لما تبعت إشعار لعدد كبير جدًا من المستخدمين، مش كلهم لازم يوصلهم الإشعار في نفس اللحظة. بدل ما السيستم ينهار، بنبعت الإشعارات للطابور، وكل إشعار يتبعت في دوره.
✅ طلبات الدفع (Payment Processing):
لما يجي طلب دفع، بتحطه في الطابور علشان يتحقق منه ويتنفّذ بشكل آمن بدون ما يحصل تضارب.
✅ تحليل البيانات (Data Processing):
سيستم زي Google Analytics مثلًا، بيحتاج يتعامل مع مليارات الطلبات. الطابور هنا بيخلّي كل طلب ياخد دوره في التحليل.
———
📌 إيه مميزات الـ Message Queue؟
- المرونة (Scalability):
لو الطابور طويل، نقدر نزود عدد "الطباخين" بسهولة (workers) علشان يخلصوا الشغل أسرع.
- الثبات (Reliability):
حتى لو حصل مشكلة في جزء معين من السيستم، الطابور بيضمن إن البيانات متسجلة ومفيش حاجة هتضيع.
- الفصل بين الأجزاء (Decoupling):
كل جزء من السيستم بيشتغل لوحده. اللي بيبعت الرسائل مش محتاج يعرف التفاصيل بتاعة اللي بيعالجها، والعكس.
———
📌 أمثلة على الـ Message Queue Tools:
- الـ RabbitMQ: أداة قوية وسهلة الاستخدام.
- الـ Apache Kafka: مثالية للتعامل مع البيانات الكتيرة اللي بتيجي في وقت واحد.
- الـ Amazon SQS: خدمة بسيطة وسحابية من AWS.
❤7
Important Things To Learn Before Backend 💯
Before diving into backend development, it’s essential to build a solid understanding of the foundational concepts that power modern web applications.
Backend development isn’t just about writing server-side code—it’s about designing systems that are scalable, secure, and maintainable.
———
https://dev.to/alisamir/important-things-to-learn-before-backend-46ib
DEV Community
Important Things To Learn Before Backend 💯
Before diving into backend development, it’s essential to build a solid understanding of the...
❤3
WebSockets in JavaScript ⚡️
WebSockets are widely supported in modern browsers, but it's essential to check compatibility for your target audience.
You can use feature detection to determine if WebSockets are supported in the user's browser.
WebSockets are widely supported in modern browsers, but it's essential to check compatibility for your target audience.
You can use feature detection to determine if WebSockets are supported in the user's browser.
❤6