مثال أكثر تفصيلاً
عندما تقوم بشراء شئ ما اونلاين، هل يتم تنفيذ طلبك على الفور؟ كلا بل يتم التحقق من بعض الأمور الهامة مثل: -هل قُمت بتسجيل الدخول على الموقع؟ -هل قُمت بإدخال معلومات مهمة مثل عنوانك ورقم هاتفك للتواصل معك عند توصيل طلبك -وأشياء اخرى كثيرة كل هذه الأشياء يمكن التحقق منها بإستخدام الـ Middlware، والكود التالي يوضح الأمر

عايزين نعمل مواقعنا الإلكترونية أسرع وأحسن؟ يلا نشوف ازاي نحسن أداء الموقع بتاعنا عشان ندي لزوارنا تجربة مستخدم فوق الرائعة وكمان نتقدم في نتائج البحث.

هنا 9 نصائح ذهبية ليك:
1- ضغط الصور: استعمل أدوات زي TinyPNG أو ImageOptim عشان تقلل حجم الصور مع الحفاظ على جودتها.
2- خفف حجم ملفات CSS وJavaScript: دمج وضغط الملفات دي مهم جداً عشان تقلل عدد الطلبات وزمن التحميل، وتأكد إنك بتستخدم أحسن الطرق في الترتيب وإزالة أي كود مش مستخدم.
3- استفيد من التخزين المؤقت: خلي المتصفح يخزن نسخ مؤقتة من الملفات على جهاز المستخدم لتسريع التحميل في المرات الجاية.
4- تحسين CSS وJavaScript: تأكد تاني إنك بتستخدم أحسن الممارسات للتحسين.
5- استخدام خوارزميات الضغط: استخدم Gzip أو Brotli لتقليل حجم الملفات قبل ما توصل للمستعرض.
6- ركز على تحسين الواجهة الأمامية: تحسين تجربة المستخدم بتقليل وقت تحميل الصفحة الأولى وتجنب العناصر اللي ممكن تعطل التفاعل.
7- تحسين قواعد البيانات: شغل تحسين لاستعلامات قواعد البيانات واستخدم فهارس لتسريع البحث.
8- استخدام CDN: خدمات شبكة توزيع المحتوى بتساعد على تحسين سرعة تحميل الموقع للمستخدمين في أماكن مختلفة.
9- اختبار الأداء بانتظام: استعمل أدوات زي Google PageSpeed Insights وGTmetrix وWebPageTest لتحديد وتحسين أداء الموقع.

بالتطبيق الجد للنصائح دي، هتقدر تحسن من أداء موقعك جامد وتقدم تجربة مستخدم لا تنسى

لو انت Front end فاكيد سمعت عن API ....

ال API، ده اختصار لـ "Application Programming Interface"، يعني حاجة بتربط بين مكونين
بتساعد على نقل البيانات بينهم. يعني لو عايز تجيب معلومات من موقع تاني وتستخدمها في موقعك أو تطبيقك، هتستند على الـ API عشان تجيب البيانات دي.

ال API مش بس بيستقبل بيانات، لكنه بيبعت بيانات كمان.
مثال ، لو حد عنده موقع بيبيع منتجات وعنده فورم بيملاه بتفاصيل المنتج، زي الاسم والسعر وكدة، وبعد ما يملاه يضغط علشان يضيف المنتج، دور الشخص اللي خلف الكواليس (الباك إند) بيكون إنه بيأخد البيانات دي وبيبعتها للـ API.

الـ API بيرجع بيأخد البيانات دي ويخزنها في قاعدة البيانات. وبعدين الشخص اللي خلف الكواليس بيبعت الـ API للجهة اللي بتعمل الواجهة (الفرونت إند). هنا بيبقى دور الفرونت إند إنه يأخد البيانات من الـ API ويعرضها في الموقع بتاعه.

والـ Fetch هو العملية اللي بتخلِّيك تجيب البيانات من الـ API. يعني بتستخدم الـ Fetch عشان تجيب البيانات اللي بتجيلك من الـ API وتستعملها في مشروعك.

و اخيرا API من اهم الحاجات اللى هتستخدمها كتير و خصتا فى المشاريع الكبيرة فلازم تكون ملم بيها كويس و تدرب عليها كتير فانك ازاى تعرض البيانات بالشكل المطلوب و تبعت بيانات بشكل صحيح و الاهم من كل ده يكون كود منظم و مرتب مش مجرد تطلع المطلوب و بس

أفضل موقع للمبرمجين الذين لا يريدون أو ليس لديهم الوقت لتصميم واجهة الموقع و تنسيق الألوان و العناصر و اختيار النصوص.

‏موقع Free Figma Templates تجد فيه كل من:
‏- Website Designs
‏- Mobile Designs
‏- Illustrations & Icons
‏- Wireframes & Design Systems
‏و الأهم من هدا تحميل الملفات Templates مرفقة بالصور و الخطوط.

‏الموقع: ⁦ www.freefigmatemplates.com/ ⁩

هرمش / harmash ,هو موقع لتعلم البرمجة باللغة العربية.
المحتوى في الموقع كله في شكل مكتوب و ليس فيديوهات.

الدورات الموجدة في الموقع:
- أساسيات البرمجة
- قواعد البيانات
- HTML
- CSS
- جافاسكريبت
- بايثون
- الخوارزمات وهياكل البيانات
- Java
- C++
- SQL

بالإضافات للتحديات البرمجة و المقالات المتفرقة في كل ما يخص البرمجة

الموقع: https://harmash.com/

جماعة ال front end 🪄
مواقع مفيدة جدا لموقعك الإلكتروني
‏Amazing Website | Use For Css

‏1- Make Some Waves
موقع يوفر أداة مجانية لإنشاء موجات SVG بطريقة بسيطة وسهلة

‏ https://getwaves.io/
___

‏2- Fancy Border Radius
موقع fancy-border-radius يقدم أداة مجانية لإنشاء أشكال معقدة وجذابة باستخدام CSS border-radius.

‏ https://9elements.github.io/fancy-border-radius/

___

‏3- CSS Buttons
يعتبر أداة مفيدة لتوفير مكتبة شاملة من العناصر الجاهزة التي يمكن استخدامها في تصميم واجهات المستخدم.

‏ https://uiverse.io/elements

___


‏4- SVG Background
هو أداة مفيدة لإنشاء وتوليد صور خلفيات (Backgrounds) بشكل سريع وسهل.

‏ https://bgjar.com/#google_vignette

___

‏5- CSS Grid
هو أداة مفيدة لإنشاء وتوليد أنظمة الشبكات باستخدام CSS Grid بشكل سهل وسريع.

‏ https://cssgrid-generator.netlify.app/?ref=producthunt

___

‏6- Smooth Shadow
باختصار، موقع هو أداة ممتازة لمصممي الويب الذين يرغبون في إنشاء تصاميم حديثة وأنيقة باستخدام تقنية Neumorphism بسهولة وفعالية.

‏ https://neumorphism.io/#e0e0e0

موقع اليوم يعتبر من أحسن المواقع المفيدة جدا و اللي يستحق تحافظ عليه.

موقع GoalKicker يحتوى على أكثر من 50 كتاب إلكتروني مجاني في مجال التقنية, في أكثر من مواضيع لغات برمجة, أطر عمل (Frameworks) و أدوات تقنية.

رابط الموقع: https://books.goalkicker.com

لو عندك ملف JSON وحابب تستكشفه او تفهمه او تعمله visualize
ممكن ترفعه هنا على الموقع ده وهو هيحوله ل Graph
لينك الموقع : https://jsoncrack.com/

جبت لكم موقع ممتاز بيقدملك مصادر لأهم أُطر العمل الموجودة في مجال الويب 🔻

‏- Angular 
‏- React
‏- Vue
‏- Qwik
‏- Solid.js
‏- GraphQL
‏- Node.js 
‏- Svelte
‏- Deno

‏⁦ framework.dev⁩

‏عشان تعرض pdf من خلال ال html بكل بساطة

الكنز دة هينقلك نقلة تانية في جافاسكريبت
هتتعلم كل حاجة وبالأمثلة وكمان هتتعلم تكتب كود نظيف بالمعايير المتبعة في الشركات الكبيرة

كل حاجة بتتشرح بيقولك امثلة للطرق السيئة وامثلة تانية للطرق الصحيحة اللي لازم تكتب الكود بيها

‏ https://github.com/airbnb/javascript

‏اهم المواقع لحل مسائل Problem Solving :-

‏1 - موقع Codewars :
‏⁦ codewars.com ⁩

‏2- موقع LeetCode :
‏⁦ leetcode.com ⁩

‏3- موقع HackerRank :
‏⁦ hackerrank.com ⁩
‏وده انصح بيه المبتدئين.

‏4 - موقع Topcoder :
‏⁦ topcoder.com ⁩

‏5 - موقع Coderbyte :
‏⁦ coderbyte.com ⁩

‏6-موقع Codeforces:

‏⁦ codeforces.com ⁩

‏شوية اسئلة Interview Front End ممكن تتسالها لو عندك مقابلة قريب
‏و لو معندكش هتفيدك برضو لو فى حاجه واقعه منك او حاجه اول مرة تسمع عنها ممكن تاخد الاسئلة تبحث عنها و تزود معلوماتك

‏1 - What is the difference between dom and bom
‏2 - What is the event loop?
‏3 - What is the difference between callback and promise
‏4 - What is the react helmet?
‏5 - What is nextjs?
‏6 - What is the difference between SPA & SSG & SSL & SSR
‏7 - How to improve performance in the react app
‏8 - What is the reaction cycle?
‏9 - What is the lazy function?
‏10 - How do we use the design pattern in CSS?
‏11 - How to ensure the best SEO experience
‏12 - What are the solid principles?
‏13 - What is the difference between var & let & const
‏14 - What is the difference between asynchronous function and synchronous function
‏15 - What is the difference between async and await and when to use them?
‏16 - What is the promise and what should I use?
‏17 - What is the difference between context and redux
‏18- What is the difference between next js and react helmet in seo
‏19 - What is the react query?
‏20 - What is the difference between formik and yup?
‏21 - What is usememo?
‏22 - What is hosting?
‏23 - What is call stack?
‏24 - What is it set data type ?
‏25 - What is the difference between use memo and use callback?
‏26 - What is the higher order function?

What is the output of the following code in js ?

The JavaScript Tree:
|
|── Variables
| ├── var
| ├── let
| └── const
|
|── Data Types
| ├── String
| ├── Number
| ├── Boolean
| ├── Object
| ├── Array
| ├── Null
| └── Undefined
|
|── Operators
| ├── Arithmetic
| ├── Assignment
| ├── Comparison
| ├── Logical
| ├── Unary
| └── Ternary (Conditional)
|
|── Control Flow
| ├── if statement
| ├── else statement
| ├── else if statement
| ├── Switch statement
| ├── for loop
| ├── while loop
| └── do-while loop
|
|── Functions
| ├── Function declaration
| ├── Function expression
| ├── Arrow function
| └── IIFE (Immediately Invoked Function Expression)
|
|── Scope
| ├── Global scope
| ├── Local scope
| ├── Block scope
| └── Lexical scope
|
|── Arrays
| ├── Array methods
| | ├── push()
| | ├── pop()
| | ├── shift()
| | ├── unshift()
| | ├── splice()
| | ├── slice()
| | └── concat()
| └── Array iteration
| ├── forEach()
| ├── map()
| ├── filter()
| └── reduce()
|
|── Objects
| ├── Object properties
| | ├── Dot notation
| | └── Bracket notation
| ├── Object methods
| | ├── Object.keys()
| | ├── Object.values()
| | └── Object.entries()
| └── Object destructuring
|
|── Promises
| ├── Promise states
| | ├── Pending
| | ├── Fulfilled
| | └── Rejected
| ├── Promise methods
| | ├── then()
| | ├── catch()
| | └── finally()
| └── Promise.all()
|
|── Asynchronous JavaScript
| ├── Callbacks
| ├── Promises
| └── Async/Await
|
|── Error Handling
| ├── try...catch statement
| └── Throw statement
|
|── JSON (JavaScript Object Notation)
|
|── Modules
| ├── import
| └── export
|
|── DOM Manipulation
| ├── Selecting elements
| ├── Modifying elements
| └── Creating elements
|
|── Events
| ├── Event listeners
| ├── Event propagation
| └── Event delegation
|
|── AJAX (Asynchronous JavaScript and XML)
|
|── Fetch API
|
|── ES6+ Features
| ├── Template literals
| ├── Destructuring assignment
| ├── Spread/rest operator
| ├── Arrow functions
| ├── Classes
| ├── let and const
| ├── Default parameters
| ├── Modules
| └── Promises
|
|── Web APIs
| ├── Local Storage
| ├── Session Storage
| └── Web Storage API
|
|── Libraries and Frameworks
| ├── React
| ├── Angular
| └── Vue.js
|
|── Debugging
| ├── Console.log()
| ├── Breakpoints
| └── DevTools
|
|── Others
| ├── Closures
| ├── Callbacks
| ├── Prototypes
| ├── this keyword
| ├── Hoisting
| └── Strict mode
|
|____________ END ______________

Mastering the fundamentals of JavaScript is like building a solid foundation for a skyscraper! 🌐💡 Dive deep into variables, data types, control flow, functions, arrays, objects, and more before venturing into frameworks like React, Angular, or Vue.js. 📚💻 Strengthen your core skills first, and you'll be empowered to conquer any framework effortlessly

كــنــز APIs

أكثر من 300 API مجاني هيساعدوك في المشروع بتاعك...⭐️

———

‏300+ FREE APIs Every Developer Needs to Know 🔥

‏ https://dev.to/falselight/300-free-apis-every-developer-needs-to-know-3j76

عزيزي مبرمج الموبايل والويب
انا جبتلك اكستنشن هتبنيلك Ui بتاعك كامل بستخدام Ai
هتديله لينك ديزاين figma وهو هيتعامل
ومش Flutter بس لا Web كمان ك
‏React
‏Html
‏Vlue
‏Anglar
‏Svelte
‏React Native
‏Code parrot Ai Figma to code

هام جدا

كل كتب البرمجه موجودة هنا متقسمه ع حسب المجال في الريبو دي ❤️

‏ https://github.com/EbookFoundation/free-programming-books/blob/main/books/free-programming-books-langs.md