مفهوم الـ Optimistic UI 💯
.
.
إزاي تخلي المستخدم يشوف التطبيق بتاعك سريع حتى لو هو سلحفاة؟
تخيل معايا السيناريو ده: أنت فاتح تطبيق طلبات الأكل، ضغطت على زرار "تأكيد الطلب" أو "Confirm Order"، وفورًا ظهر لك إن الطلب اتبعت واتسجل، وبعدها بثانية كده جالك إشعار إن المطعم بدأ يحضّر الأكل. إحساسك إيه؟ التطبيق سريع، ومفيش أي تأخير.
بس الحقيقة إن الطلب ممكن يكون لسه بيتبعت للسيرفر، ولسه فيه احتمال إنه يفشل، صح؟
هنا بقى بييجي دور الـ Optimistic UI ... تعال ندردش شوية ونفهم إزاي بيشتغل وأهم الاستخدامات.
———
https://www.linkedin.com/posts/dev-alisamir_frontenddeveloper-webdeveloper-frontend-activity-7296566041948643328-L0-A
https://qabilah.com/posts/XGCF0rV7X2M
.
.
إزاي تخلي المستخدم يشوف التطبيق بتاعك سريع حتى لو هو سلحفاة؟
تخيل معايا السيناريو ده: أنت فاتح تطبيق طلبات الأكل، ضغطت على زرار "تأكيد الطلب" أو "Confirm Order"، وفورًا ظهر لك إن الطلب اتبعت واتسجل، وبعدها بثانية كده جالك إشعار إن المطعم بدأ يحضّر الأكل. إحساسك إيه؟ التطبيق سريع، ومفيش أي تأخير.
بس الحقيقة إن الطلب ممكن يكون لسه بيتبعت للسيرفر، ولسه فيه احتمال إنه يفشل، صح؟
هنا بقى بييجي دور الـ Optimistic UI ... تعال ندردش شوية ونفهم إزاي بيشتغل وأهم الاستخدامات.
———
https://www.linkedin.com/posts/dev-alisamir_frontenddeveloper-webdeveloper-frontend-activity-7296566041948643328-L0-A
📍 Qabilah
https://qabilah.com/posts/XGCF0rV7X2M
❤7👍1
لو بتدور على أفكار مشاريع JavaScript تساعدك تطوّر مستواك، سواء كنت مبتدئ أو محترف، هتلاقي في الريبو ده أكتر من 500 فكرة مشروع تقدر تشتغل عليها. 💡
https://github.com/deepakkumar55/ULTIMATE-JAVASCRIPT-PROJECT
A comprehensive list of 500 JavaScript project ideas for developers of all skill levels. 🚀
https://github.com/deepakkumar55/ULTIMATE-JAVASCRIPT-PROJECT
❤3👍1
كورسات مجانية من شركة سيسكو - Cisco 💯
https://www.netacad.com/courses/introduction-data-science
https://www.netacad.com/courses/introduction-to-cybersecurity
https://www.netacad.com/courses/introduction-iot
https://www.netacad.com/courses/computer-hardware-basics
https://www.netacad.com/courses/python-essentials-1
https://www.netacad.com/courses/networking-basics
https://www.netacad.com/courses/operating-systems-basics
https://www.netacad.com/courses/linux-essentials
📍 Introduction to Data Science - 6 hours
https://www.netacad.com/courses/introduction-data-science
📍 Introduction to Cybersecurity - 6 hours
https://www.netacad.com/courses/introduction-to-cybersecurity
📍 Introduction to IoT and Digital Transformation - 6 hours
https://www.netacad.com/courses/introduction-iot
📍 Computer Hardware Basics - 6 hours
https://www.netacad.com/courses/computer-hardware-basics
📍 Python Essentials 1 - 30 hours
https://www.netacad.com/courses/python-essentials-1
📍 Networking Basics - 25 hours
https://www.netacad.com/courses/networking-basics
📍 Operating Systems Basics - 12 hours
https://www.netacad.com/courses/operating-systems-basics
📍 Linux Essentials - 70 hours
https://www.netacad.com/courses/linux-essentials
❤4👍2
مقرأة عالمية عن بعد لتعليم القرآن تطلقها جامعة أم القرى.
تعليم قراءة القرآن وتصحيح تلاوته، على يد قُراء مختصين مُجازين.
نهاية التسجيل: 1 رمضان.
للتسجيل:
https://uqu.edu.sa/coldawa/MaqraaUmmAlQura
تعليم قراءة القرآن وتصحيح تلاوته، على يد قُراء مختصين مُجازين.
نهاية التسجيل: 1 رمضان.
للتسجيل:
https://uqu.edu.sa/coldawa/MaqraaUmmAlQura
❤8🔥2👍1
لو لسه بتذاكر React أو حتى اشتغلت بها قبل كده، أكيد قابلت Hook اسمه
بس هل فعلًا فاهمه كويس؟ يعني إيه
في المقال ده، هنتكلم عن
Simplifying React Hooks: useState 💯
اقرأ المقال من هنا 👇
https://dev.to/alisamir/simplifying-react-hooks-usestate-bga
https://medium.com/@dev.alisamir/simplifying-react-hooks-usestate-19e1e864704c
useState، وده واحد من أكتر الـ Hooks استخدامًا في أي مشروع React. 💡بس هل فعلًا فاهمه كويس؟ يعني إيه
useState؟ بيشتغل إزاي؟ وامتى تستخدمه؟ 🤔في المقال ده، هنتكلم عن
useState بشكل بسيط وسهل، وهنوضح إزاي بيشتغل، إزاي نستخدمه بشكل صحيح.Simplifying React Hooks: useState 💯
اقرأ المقال من هنا 👇
📍 Dev Community
https://dev.to/alisamir/simplifying-react-hooks-usestate-bga
📍 Medium
https://medium.com/@dev.alisamir/simplifying-react-hooks-usestate-19e1e864704c
❤3👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Trae For Windows 🎉
Trae is an adaptive AI IDE that transforms how you work, collaborating with you to run faster.
https://www.trae.ai
❤5
ليه الـ Caching مهم؟ وإزاي تختار الطريقة الأفضل؟ 🤔
.
.
خليني أسألك سؤال: عمرك دخلت على تطبيق ولقيته سريع جدًا في تحميل البيانات؟ ولو فكرت ليه سريع كده، غالبًا الإجابة هتكون إنه بيستخدم الـ Caching.
التخزين المؤقت (Cache) مش بس بيساعد في تحسين الأداء، بل ممكن يكون الفرق بين تجربة مستخدم ممتازة وتطبيق الناس بتكرهه بسبب البطء (وأكيد مر عليك تطبيقات بالشكل ده).
لما بتطلب داتا، بدل ما ترجع للسيرفر في كل مرة، بتحفظ نسخة منها في الـ Cache، وده بيقلل الـ Latency، ويخفف الحمل على قواعد البيانات (Database)، ويوفر في التكلفة.
لكن السؤال المهم: إيه أفضل طريقة تستخدم بها الـ Caching؟ 🤔 مش كل الـ Caching Strategy بتنفع في كل السيناريوهات.
———
http://bit.ly/4gG6TAY
.
.
خليني أسألك سؤال: عمرك دخلت على تطبيق ولقيته سريع جدًا في تحميل البيانات؟ ولو فكرت ليه سريع كده، غالبًا الإجابة هتكون إنه بيستخدم الـ Caching.
التخزين المؤقت (Cache) مش بس بيساعد في تحسين الأداء، بل ممكن يكون الفرق بين تجربة مستخدم ممتازة وتطبيق الناس بتكرهه بسبب البطء (وأكيد مر عليك تطبيقات بالشكل ده).
لما بتطلب داتا، بدل ما ترجع للسيرفر في كل مرة، بتحفظ نسخة منها في الـ Cache، وده بيقلل الـ Latency، ويخفف الحمل على قواعد البيانات (Database)، ويوفر في التكلفة.
لكن السؤال المهم: إيه أفضل طريقة تستخدم بها الـ Caching؟ 🤔 مش كل الـ Caching Strategy بتنفع في كل السيناريوهات.
———
http://bit.ly/4gG6TAY
❤6👍2
لو بتدور على قوالب Figma مجانية تخليك تصمّم مواقع وتطبيقات باحترافية وبمنتهى السهولة...🚀
في الموقع ده هتلاقي مجموعة مميزة من القوالب الجاهزة اللي هتوفر عليك وقت ومجهود، سواء كنت مصمم UI/UX أو مطور وعاوز تبدأ بتصميم جاهز واحترافي. 💡
https://www.freefigmatemplates.com
في الموقع ده هتلاقي مجموعة مميزة من القوالب الجاهزة اللي هتوفر عليك وقت ومجهود، سواء كنت مصمم UI/UX أو مطور وعاوز تبدأ بتصميم جاهز واحترافي. 💡
Free Figma Templates 🔥
https://www.freefigmatemplates.com
👍3❤2👏1
DevGuide
لو لسه بتذاكر React أو حتى اشتغلت بها قبل كده، أكيد قابلت Hook اسمه useState، وده واحد من أكتر الـ Hooks استخدامًا في أي مشروع React. 💡 بس هل فعلًا فاهمه كويس؟ يعني إيه useState؟ بيشتغل إزاي؟ وامتى تستخدمه؟ 🤔 في المقال ده، هنتكلم عن useState بشكل بسيط وسهل،…
خلال رحلتك في React أكيد قابلت الـ useEffect قبل كده، وغالبًا مر عليك مواقف حسيت فيها إنه معقد أو مش قادر تفهمه بشكل كويس..
في المقال ده، هنفصل الـ useEffect بشكل بسيط وسهل، وهتعرف امتى وليه بنستخدمه، وإيه الأخطاء الشائعة اللي ممكن تقع فيها وإزاي تتجنبها. 💡
https://dev.to/alisamir/simplifying-react-hooks-useeffect-3ogb
https://medium.com/@dev.alisamir/simplifying-react-hooks-useeffect-bd3d862f2e65
في المقال ده، هنفصل الـ useEffect بشكل بسيط وسهل، وهتعرف امتى وليه بنستخدمه، وإيه الأخطاء الشائعة اللي ممكن تقع فيها وإزاي تتجنبها. 💡
📍 Dev Community
https://dev.to/alisamir/simplifying-react-hooks-useeffect-3ogb
📍 Medium
https://medium.com/@dev.alisamir/simplifying-react-hooks-useeffect-bd3d862f2e65
❤5
DevGuide
ليه الـ Caching مهم؟ وإزاي تختار الطريقة الأفضل؟ 🤔 . . خليني أسألك سؤال: عمرك دخلت على تطبيق ولقيته سريع جدًا في تحميل البيانات؟ ولو فكرت ليه سريع كده، غالبًا الإجابة هتكون إنه بيستخدم الـ Caching. التخزين المؤقت (Cache) مش بس بيساعد في تحسين الأداء، بل ممكن…
ليه الـ Caching مهم؟ وإزاي تختار الطريقة الأفضل؟ 🤔 - الجزء الثاني
https://www.linkedin.com/posts/dev-alisamir_%D9%84%D9%8A%D9%87-%D8%A7%D9%84%D9%80-caching-%D9%85%D9%87%D9%85-%D9%88%D8%A5%D8%B2%D8%A7%D9%8A-%D8%AA%D8%AE%D8%AA%D8%A7%D8%B1-%D8%A7%D9%84%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-activity-7298401038376574976-M_5F
https://www.linkedin.com/posts/dev-alisamir_%D9%84%D9%8A%D9%87-%D8%A7%D9%84%D9%80-caching-%D9%85%D9%87%D9%85-%D9%88%D8%A5%D8%B2%D8%A7%D9%8A-%D8%AA%D8%AE%D8%AA%D8%A7%D8%B1-%D8%A7%D9%84%D8%B7%D8%B1%D9%8A%D9%82%D8%A9-activity-7298401038376574976-M_5F
❤2👍1
لو اشتغلت بـ React قبل كده، أكيد قابلت مشكلة إنك تبعت بيانات بين الـ Components المختلفة، وخصوصًا لما تكون عايز توصل معلومة بين Components فيه بينهم children كثيرة! 🤯
الحل اللي ناس كتير بتستخدمه هو الـ props، بس كلنا عارفين إنه بيبقى متعب ومرهق لما التطبيق يكبر.
هنا بقى بييجي دور الـ useContext، الهوك بسيط لكنه قوي جدًا، بيساعدك تبعت البيانات لأي مكان في التطبيق من غير دوشة الـ props. 💡
في المقال ده، هنعرف مع بعض يعني إيه useContext وإزاي تستخدمه بالطريقة الصح. 💯
———
https://dev.to/alisamir/simplifying-react-hooks-usecontext-4hf8
https://medium.com/@dev.alisamir/simplifying-react-hooks-usecontext-715224c47c80
الحل اللي ناس كتير بتستخدمه هو الـ props، بس كلنا عارفين إنه بيبقى متعب ومرهق لما التطبيق يكبر.
هنا بقى بييجي دور الـ useContext، الهوك بسيط لكنه قوي جدًا، بيساعدك تبعت البيانات لأي مكان في التطبيق من غير دوشة الـ props. 💡
في المقال ده، هنعرف مع بعض يعني إيه useContext وإزاي تستخدمه بالطريقة الصح. 💯
———
📍 DEV Community
https://dev.to/alisamir/simplifying-react-hooks-usecontext-4hf8
📍 Medium
https://medium.com/@dev.alisamir/simplifying-react-hooks-usecontext-715224c47c80
❤4
كورس أساسيات أنجولار 💡
Angular 101 Crash Course For Beginners: Learn Angular Fundamentals (4 HOURS!)
https://youtu.be/uWpgtcSxJ3E
Angular 101 Crash Course For Beginners: Learn Angular Fundamentals (4 HOURS!)
https://youtu.be/uWpgtcSxJ3E
YouTube
Angular 101 Crash Course For Beginners: Learn Angular Fundamentals (4 HOURS!)
Full Angular (v18) 101 Crash Course for Beginners. In this 4-hour course, you'll learn the fundamentals of Angular v18 (and even Typenoscript too).
This Crash Course covers the first 4 hours of Luis' 30-hour Angular Bootcamp Course, which is one of the most…
This Crash Course covers the first 4 hours of Luis' 30-hour Angular Bootcamp Course, which is one of the most…
❤2👍2
الفرق بين gRPC و REST – أيهما أقوى وليه ممكن تحتاج الـ gRPC؟ 🤔
.
.
زمان لما الإنترنت كان بسيط، الـ REST كان كفاية جدًا للتعامل مع الـ APIs. بس مع الوقت، ظهرت تحديات جديدة، وبدأنا نحتاج حلول أسرع، أخف، وأكتر كفاءة.
هنا ظهر الـ gRPC، بس هل ده معناه إن REST انتهى؟ لا طبعًا، كل واحد له مكانه واستخدامه. تعال نشوف الفرق بينهم وامتى تستخدم كل واحد منهم...
———
https://www.linkedin.com/posts/dev-alisamir_%D8%A7%D9%84%D9%81%D8%B1%D9%82-%D8%A8%D9%8A%D9%86-grpc-%D9%88-rest-%D8%A3%D9%8A%D9%87%D9%85%D8%A7-%D8%A3%D9%82%D9%88%D9%89-%D9%88%D9%84%D9%8A%D9%87-%D9%85%D9%85%D9%83%D9%86-activity-7299443497290330112-zYAc
.
.
زمان لما الإنترنت كان بسيط، الـ REST كان كفاية جدًا للتعامل مع الـ APIs. بس مع الوقت، ظهرت تحديات جديدة، وبدأنا نحتاج حلول أسرع، أخف، وأكتر كفاءة.
هنا ظهر الـ gRPC، بس هل ده معناه إن REST انتهى؟ لا طبعًا، كل واحد له مكانه واستخدامه. تعال نشوف الفرق بينهم وامتى تستخدم كل واحد منهم...
———
https://www.linkedin.com/posts/dev-alisamir_%D8%A7%D9%84%D9%81%D8%B1%D9%82-%D8%A8%D9%8A%D9%86-grpc-%D9%88-rest-%D8%A3%D9%8A%D9%87%D9%85%D8%A7-%D8%A3%D9%82%D9%88%D9%89-%D9%88%D9%84%D9%8A%D9%87-%D9%85%D9%85%D9%83%D9%86-activity-7299443497290330112-zYAc
❤3
DevGuide
Photo
24 Good Resources to Learn Software Architecture in 2025 💯
The resources can be divided into different types such as:
Some books that can help are DDIA, System Design Volume 1 & 2, Clean Architecture, Domain-Driven Design, and Software Architecture: the Hard Parts
Read technical blogs by companies like Netflix, Uber, Meta, and Airbnb. Also, the ByteByteGo newsletter provides insights into software design every week.
YouTube channels like MIT Distributed Systems, Goto Conferences, and ByteByteGo can help with software architecture and system design. Azure Architecture Center and AWS Architecture Blog are other important resources.
For deeper insights, read whitepapers like Facebook Memcache Scaling, Cassandra, Amazon DynamoDB, Kafka, and Google File System.
A Software Architect also needs to develop holistic skills. Books about software career aspects such as Pragmatic Programmer, The Software Architect Elevator, The Software Engineer's Guidebook, and Philosophy of Software Design can help.
The resources can be divided into different types such as:
1- Software Design Books
Some books that can help are DDIA, System Design Volume 1 & 2, Clean Architecture, Domain-Driven Design, and Software Architecture: the Hard Parts
2- Tech Blogs and Newsletters
Read technical blogs by companies like Netflix, Uber, Meta, and Airbnb. Also, the ByteByteGo newsletter provides insights into software design every week.
3- YouTube Channels and Architectural Resources
YouTube channels like MIT Distributed Systems, Goto Conferences, and ByteByteGo can help with software architecture and system design. Azure Architecture Center and AWS Architecture Blog are other important resources.
4- WhitePapers
For deeper insights, read whitepapers like Facebook Memcache Scaling, Cassandra, Amazon DynamoDB, Kafka, and Google File System.
5- Software Career Books
A Software Architect also needs to develop holistic skills. Books about software career aspects such as Pragmatic Programmer, The Software Architect Elevator, The Software Engineer's Guidebook, and Philosophy of Software Design can help.
❤5👍1
أهم 5 طرق لتحسين أداء الـ API 🚀
.
.
هل الـ API عندك بطيء؟ الـ requests بتتأخر؟ السيرفر بيستهلك موارد كتير؟ 🤔
لو بتتعامل مع الـ APIs باستمرار، مهم جدًا تعرف إن تحسين الأداء جزء أساسي لنظام سريع وقابل للتوسع. كل ملي ثانية بتفرق: تجربة مستخدم أفضل، تكلفة أقل، وضغط أقل على الـ infrastructure.
تعال ندردش شوية عن أهم 5 طرق لتحسين أداء الـ API... 🔥
———
https://www.linkedin.com/posts/dev-alisamir_api-backendeveloper-softwaredeveloper-activity-7300167777254805505-uFam
https://qabilah.com/posts/DVgkkr3BYMw
———
وفقكم الله لكل خير ☘️
.
.
هل الـ API عندك بطيء؟ الـ requests بتتأخر؟ السيرفر بيستهلك موارد كتير؟ 🤔
لو بتتعامل مع الـ APIs باستمرار، مهم جدًا تعرف إن تحسين الأداء جزء أساسي لنظام سريع وقابل للتوسع. كل ملي ثانية بتفرق: تجربة مستخدم أفضل، تكلفة أقل، وضغط أقل على الـ infrastructure.
تعال ندردش شوية عن أهم 5 طرق لتحسين أداء الـ API... 🔥
———
https://www.linkedin.com/posts/dev-alisamir_api-backendeveloper-softwaredeveloper-activity-7300167777254805505-uFam
📍 Qabilah
https://qabilah.com/posts/DVgkkr3BYMw
———
وفقكم الله لكل خير ☘️
❤5
Yesterday Angular v19.2 was released 🎉
Even though this isn't a major release, we have some great new features!
1️⃣ The new experimental httpResource (Signal based API calls
2️⃣ Support default value in resource()
3️⃣ Support streaming resources
4️⃣ Support for hashtag#TypeScript 5.8
5️⃣ Support untagged template literals in expressions
6️⃣ A schematic to migrate to Self Closing tags
There are also some notable bug changes and other improvements. If you want to read the full release notes and dive into the code you can find everything here:
https://github.com/angular/angular/releases/tag/19.2.0
👍2