خدمة C-View المجانية لمراجعة الCV وتصحيحه ومحاكاة لمقابلة العمل من منصة مسارات Masaraat

https://bit.ly/3w2kuh9

#تحدي :
Content:
اعمل الشكل دا بالضبط
Tools:
Language : HTML5 , CSS3(Version 3)
Lib : FontAwsome(icon Lib)
الممنوعات:
اي مكتبة غير fontawsome او اي فريم ورك سواء بقي Bootstrap او اي مكتبة زي JQuery وممنوع تستخدم Javascript
ملاحظة :
دا تمرين ليك انت وانت المستفيد انا مش خسران اي حاجه

اي رايكم اعمل شرح علي اليوتيوب لانشاء بوتات تليجرام الشرح هيكون ع يوتيوب ؟😁

بس هيكون ب Nodejs

دي رابط القناه:
https://youtube.com/@WebDev1

أفضل 5 مكتبات UI لمطورين REACT JS
هذه المكتبات توفر لك تصاميم UI جاهزة تختصر عليك الوقت بإنشاء المشاريع ويمكنك التعديل عليها زي ما تحب .
⬇⬇

‏دي مجموعة من المكتبات هتوفرلك UI جاهزة لمطورين React js ... تساعدك بإنشاء تصاميم جميلة وبسرعة أكبر, وتختصر لك الكثير من الوقت ...

‏1 - Material UI
يعد Material UI أحد أكثر أنظمة التصميم شيوعًا ، ويستند إلى إرشادات تصميم Material من Google. يوفر مجموعة واسعة من المكونات ، من الأزرار وعناصر التحكم في النماذج إلى التنقل والتخطيط ...
Link : https://mui.com/


2 - Next UI
نظام تصميم مميز يحتوي على العديد من العناصر كما يدعم خاصية dark mode بسهولة
Link : https://nextui.org/

‏3 - Horizon UI
نظام تصميم عصري بسيط وجميل يتوفر من هذه المكتبة مجموعة من العناصر المجانية ,كما يتوفر المزيد من العناصر بشكل مدفوع.
Link : https://horizon-ui.com/

‏4 - Ant Design
Ant Design هو نظام تصميم تم تطويره بواسطة فريق Alibaba ، وهو أحد أكثر أنظمة التصميم استخدامًا في العالم
Link : https://ant.design/

5 - Chakra UI
نظام تصميم بسيط يوفر لك المكونات الأساسية لبناء مشروع سريع
Link : https://chakra-ui.com/

ما هي مكتبة الرياكت React js وما أهم مزايا استخدامها

ما هي مكتبة الرياكت – React js:
(React js) هي عبارة مكتبة مفتوحة المصدر مبنية باستخدام لغة البرمجة جافا سكريبت، وقد تم بناء هذه المكتبة بواسطة شركة فيسبوك، وتعتبر من المكتبات المتخصصة بواجهات
وهي مبنية على أساس مفهوم الـ (Component) والذي نستطيع إعادة استخدامه بسهولة فائقة دون الحاجة لبنائه مرة أخرى في كل مرة، وباستخدام هذه المكتبة يتمكن المستخدم من بناء واجهات صعبة ومعقدة دون الحاجة لكتابة الكثير من أكواد الجافا سكريبت، ويُمكن للمطورين من خلال استخدام هذه المكتبة من بناء تطبيقات متكاملة كالتي يتم بناؤها بالجافا أو لغة البرمجة كوتلن أو لغة (Swift). المستخدم وبناء واجهات المواقع أيضاً؛ حيث تقدم طريقة سهلة وسلسلة وقوية لبناء الواجهات.
 أشهر ميزات مكتبة React js:
 
تمتلك مكتبة (React JS) واجهات معتمدة على المكونات (Component):
 
حيث أن لكل مكون (Component) مجموعة من القواعد البرمجية الخاصة بحيث من الممكن بسهولة إعادة استخدامه في أي واجهة أخرى، وبما أن المكونات تبنى عن طريق لغة جافا سكريبت؛ فهذا يجعل من السهل تمرير ما يلزم من البيانات للمكونات وهذا بديل جيد لاستخدام القوالب الجاهزة.
 
التفاعل ضمن الواجهات:
حيث من السهل بناء واجهة تفاعلية مميزة باستخدام مكتبة (React JS).
:JSX
تُعتبر ميزة اختيارية موجودة لمطوري مكتبة (React Js) حيث تدمج هذه المكتبة بين لغة الهيكلة والتصميم (HTML) بلغة الدينامكية والبرمجة (JavaScript) أي أن المستخدم سيكون قادراً على كتابة كود باستخدام (HTML) عن طريق الوسوم المعتادة داخل صفحة الجافا سكريبت والكود الناتج هنا ليس كود (JavaScript) أو (HTML) إنما نطلق عليه (JSX).

تعدد الاستخدامات:
 
 حيث من الممكن استخدام هذه المكتبة في تطوير الواجهات الخاصة بالمواقع كما هو الحال في الكثير من المواقع الإلكترونية كالفيسبوك وإنستجرام (Instagram) وتويتر، ومن الممكن أيضاً استخدامها في مجال تطوير تطبيقات الهاتف عن طريق الـ (React Native)، والذي يعتبر إطار عمل تابع للرياكت، ومن خلال هذه المكتبة أيضاً يتم تطوير تطبيقات لأنظمة التشغيل مثل: الأندرويد والـ (IOS) على أعلى مستوى ،إضافةً لذلك فإن الرياكت تستطيع التعامل مع برمجيات السيرفر (Server) من خلال استخدام الـ (Node).

الـ Authentication و الـ Authorization

الـ Authentication و الـ authorization كلمتان المستخدمتان في عالم security قد تبدو متشابهة ولكنها مختلفة تمامًا عن بعضها البعض.

ما هي الـ Authentication ( المصادقة )

الـ Authentication هي عملية تحديد هوية شخص ما من خلال التأكد من أن الشخص هو نفسه من يطالب request و يتم استخدامه من قبل كل من server و client

و يستخدم server الـ Authentication عندما يريد شخص ما الوصول إلى المعلومات ، ويحتاج الـ server إلى معرفة من يقوم بالوصول إلى المعلومات بواسطة server في الغالب باستخدام اسم المستخدم وكلمة المرور .

الـ techniques الشهيرة لـ Authentication

1. الـ authentication على أساس Password

إنها أبسط طريقة authentication يتطلب password و username المحدد إذا تطابقت كلمة المرور مع اسم المستخدم وكلتا التفاصيل تتطابق مع database النظام ، فسيتم authentication على المستخدم بنجاح.

2. authentication بدون Password

في هذه التقنية لا يحتاج المستخدم إلى أي كلمة مرور ؛ بدلاً من ذلك ، يحصل على OTP (One-time password) أو رابط على رقم phone يمكن أن يقال علية OTP-based

3. الـ 2FA / الـ MFA

الـ 2FA / الـ MFA أو المصادقة الثنائية و المصادقة متعددة العوامل هي المستوى الأعلى من authentication و يتطلب الأمر رقم PIN إضافيًا أو أسئلة أمان حتى يتمكن من authenticate المستخدم.

4. الدخول الموحد SSO

يُعد تسجيل الدخول الأحادي أو SSO طريقة لتمكين الوصول إلى تطبيقات متعددة باستخدام مجموعة واحدة من بيانات الاعتماد يسمح للمستخدم بتسجيل الدخول مرة واحدة ، وسيتم تسجيل الدخول تلقائيًا إلى جميع تطبيقات الويب الأخرى المترتبطة بهذا النظام

الـ Authorization ( التفويض )

هي عملية منح شخص ما داخل الـ system للقيام بمجموعة من العملياتداخل هذا system يعني أنها طريقة للتحقق مما إذا كان المستخدم لديه إذن لاستخدام موارد هذا النظام لا فهو يحدد ما هي البيانات والمعلومات التي يمكن لمستخدم واحد الوصول إليها.

يعمل الـ Authorization عادةً مع authentication حتى يتمكن النظام من معرفة من يقوم بالوصول إلى المعلومات.

تقنيات Authorization

التحكم في access على أساس الدور

تمنح RBAC أو تقنية Role-Based Access Control إلى الدور users وفقًا role أو ملفهم الشخصي في organization يمكن تنفيذه system to system أو user-to-system

الـ JWT

الـ JSON web token أو JWT هو standard مفتوح يستخدم لنقل البيانات بشكل آمن بين الأطراف في شكل JSON object و يتم التحقق من المستخدمين وترخيصهم باستخدام key تكون private/public

الـ SAML

ترمز الـ SAML إلى لغة رمز تأكيد الأمان وهو معيار standard يوفر بيانات اعتماد الـ Authorization لـ service providers و يتم تبادل بيانات الاعتماد هذه من خلال XML documents.

الـ OpenID authorization

يساعد clients على التحقق من هوية المستخدمين النهائيين على أساس authentication .

الـ OAuth

الـ OAuth هو بروتوكول ، يمكّن API من authenticate والوصول إلى الموارد المطلوبة.

من الاخر محدش عارف غير اي اللي وره الكواليس عشان انت ادري بنفسك فسعي فحلمك يا بطل❤️✨

Introducing Turbopack: A Rust-based successor to webpack

https://blog.logrocket.com/introducing-turbopack-rust-based-successor-webpack/

موقع بسيط يستحق اللايك 🌚👍

https://page-nextjs-iunw.vercel.app

باستخدام ال nextjs

السورس كود علي جيت هاب:
https://github.com/Nourtaha13/page-nextjs

ts-is — useful package for data checking

Easy checks for TS and JS data.

مكتبه بسيطه بتسهل عليك ال check في البيانات.

https://www.npmjs.com/package/@p4ck493/ts-is

ملخص مهم لأوامر MongoDB

ما هو MongoDB؟


الـ MongoDB هي قاعدة بيانات NoSQL موجهة document-oriented تستخدم لتخزين بيانات valume data بدلاً من استخدام table و rows كما هو الحال في relational databses التقليدية ، تستخدم MongoDB الـ collections و الـ documents .

ما هي collections و documents ؟

الـ Documents : تتكون من key-value وهي unit للبيانات في MongoDB.

الـ Collections : تحتوي على مجموعات من Documents و functions التي تعادل relational database tables .

15 امر في MonogDB من الاوامر المهم و الاساسية :

1.Enlist available databases
→ Show db

2 . To Create a new DB
→ use db-name

3 . See your current working directry
→ db

4 . Delete Database

db.mydb.drop()

5 . Create User

-> db.createUser({
user:'admin',
pws:'root',
roles:["readWrite", "dbAdmin"]
})

6 . Creating Collections

-> db.createCollection('customers');

7 . Showing Collections

-> show collections

8 . Inserting values into collections

-> db.customers.insert({first_name:"shubham", last_name:"Athawane"});

9 . View Collection Records

-> db.customers.find();
//And
-> db.customers.find().pretty();
//Note: pretty() will show you result in json formate

10 . Add new Document in Collections

-> db.customers.insert([{"first_name":"Virat", "last_name":"Kohli"},
{"first_name":"Taylor", "last_name":"Swift"}])
// And -> $set, $inc, $unset
-> db.customers.update({first_name:"Glen"}, {$set:{age:45}})

11 . Rename Document

-> db.customers.update({first_name:"Virat"}, {$rename:{"age":"old"}})

12 . Remove document

-> db.customers.remove({first_name:"Joe"})

13 . find the matching

-> db.customers.findOne({first_name:"Joe"})

14 . Count Rows

-> db.customers.count()

15 . This is Less than/Greater than/ Less than or Eq/Greater than or Eq operators

db.customers.find({age: {$lt: 90}})
db.customers.find({age: {$lte: 90}})
db.customers.find({age: {$gt: 90}})
db.customers.find({age: {$gte: 90}})

Framework vs Library
المقارنة اللى مش هتحتاج تدور على مقارنات تاني بعدها 😉

هتلاقى مقارنات كتير بتقول ان المكتبة بتضم فانكشنز بتساعدك تنجز مهامك بشكل اسرع ... لكن اطار العمل كذلك برضو ، ف دا مش وجه مقارنة اطلاقا.

كذلك هتلاقى حاجة زى ان اطار العمل كافي لانشاء تطبيقات كاملة لكن المكتبة غير كافية ... و دا غلط طبعا دا احنا ممكن نعمل تطبيقات كاملة بدونهم هم الاتنين.

و هتلاقى كلام عن ان اطار العمل افضل من المكتبة ، او ان اطار العمل مكون من عدة مكتبات ... و دا لا يمت للواقع بصلة.

و هتسمع انك لو عملت فانكشن فى ملف ، كدا انت عملت مكتبة مش اطار عمل ... يؤسفنى اقولك ان دا برضو غلط ، و الامر معتمد على وظيفة الفانكشن دى.

خلينا متفقين ان كل الامور اللى فوق دى هى فروق خاطئة بين المكتبة و اطار العمل.

طب اى الفرق الحاسم بين المكتبة و اطار العمل ؟
• شايف كلمة "اطار عمل" ، معناها ايه ؟ معناها انه اطار هتكتب الكود بداخله.
• طب شايف كلمة "مكتبة" ، معناها ايه ؟ معناها مكان نقدر ناخد منه اكواد و نستخدمها.
• بس كدا الامر انتهى ، فى ابسط من كدا ؟ انزل تحت بقا عشان نتكلم بتفاصيل اكتر.

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

لكن اطار العمل احنا بنربط بيه التطبيق بتاعنا ، عشان هو يقدر يستخدم محتوى التطبيق دا ، ف مثلا Vue تعتبر اطار عمل.

المكتبة لازم تكون مكتوبة بطريقة معينة عشان نقدر نستخدمها.

لكن اطار العمل لازم نكون كاتبين التطبيق بتاعنا بطريقة معينة عشان هو يقدر يستخدمه.

تعالى ناخد مثال جامد جدا عن jQuery ، هل هى بتجبرك تعمل اى حاجة فى التطبيق بتاعك عشان تقدر تستخدمها ؟ لا خالص ، مجرد انك تربطها بالتطبيق فقط و هتقدر تستخدم كل حاجة فيها.

تعالى نشوف مثال اجمد عن Vue ، هل هى بتجبرك تعمل اى حاجة فى التطبيق بتاعك عشان تقدر تستخدمها ؟ دى مش بس بتجبرك دى ممكن تيجى تكتب التطبيق بدالك لانها عارفة ان المفروض نعمل object جديد من الVue class و نبعتله حاجات معينة ، و لو عاوزين نظهر اى بيانات فى الصفحة لازم نستخدم الtemplate الخاص بيها ، غير كدا مش هتقدر تستفيد من Vue ، ف هى اجبرتك انك تمشى بstandard معين.

طب هل React بتجبرك زى Vue كدا ؟ هتلاحظ انه لا و ان ال template اللى react app بيبدء بيه ممكن يتحذف كله و يتعمل تاني على مزاجك.

اثبتى بقا ان React مكتبة لكن Next اللى مبنية فوقها تعتبر اطار عمل ! هنسأل نفس السؤال "هل Next بتجبرك تمشى بstandard معين ؟" ، اه لازم تعمل صفحاتك فى مكان معين عشان Next تقدر تستخدمها و تعمل auto routing ، و غيره.

بما ان المكتبة بتسيبك تشتغل براحتك (و عادى جدا تشتغل بشكل عشوائي) ، لكن اطار العمل بيخليك تمشى على standard معين ، نقدر نقول ان اطر العمل مفضلة عن المكتبات اثناء انشاء مشاريع كبيرة ، كدا انت عرفت ليه بنفضل Angular عن React فى المشاريع الكبيرة.

ف الملخص ان المكتبة بيتم استخدامها بواسطة تطبيقك ، لكن اطار العمل هو اللى بيستخدم تطبيقك.

حتى هتلاقى ناس بتقول :
Your code calls a library, but a framework calls your code.
و دا معناه ان الكود بتاعك بينادى على المكتبة (بالتالى الكود بتاعك عارف مسارها) ، لكن اطار العمل بينادى على الكود بتاعك (بالتالى اطار العمل عارف مسار الكود بتاعك ، و لو اتغير مش هيشوفه)