لوحة المتصدرين

السلام عليكم و عيد مبارك. أريد القيام بanimation عند الscroll في صفحة الويب كما يلي: المشكل الحاصل هو في القيمة percentage لكل عنصر حيث تمت إعادة نفس القيمة لكل العناصر (35%). الكود الذي قمت به: function App() { const skills = [ { id: 1, language: 'html', progress: 70, }, { id: 2, language: 'css', progress: 65, }, { id: 3, language: 'javascript', progress: 50, }, { id: 4, language: 'github', progress: 40, }, { id: 5, language: 'jest', progress: 35, }, ] const progressAnim = useRef() const [percentage, setPercentage] = useState(1) window.onscroll = function () { if (window.scrollY >= progressAnim.current.offsetTop - 300) { skills.map(skill => setPercentage(skill.progress)) } } return ( <div className="App"> <Section src = {img_1}/> <Section src = {img_2}/> <div className="skills" ref={progressAnim}> { skills.map(skill => ( <Progress key = {skill.id} percentage = {percentage} circleWidth = "200" name = {skill.language} /> )) } </div> </div> ); }

عايزة اعرف ايه الكورسات اللى ممكن اخدها علشان ادخل مجال العمل الحر وبتاخد اد ايه فالوقت وازاى اعرف احدد المهارة اللى ممكن اتعلمها علشان الشغل

هل يمكنني اضافة صوت ترحيبي عند الدخول لصفحة الويب مع loader معين زي هذا https://shoppingecommerce.netlify.app/dist/imgs/loaders/08.gif؟ وهل يمكنني اضافة صوت عندما يسوي الزائر حساب جديد ويكون في الرسالة الصوتية متغير اضيف فيها اسم العميل الي كتبه في خانة الاسم؟

أنا الآن أدرس دورة علوم الحاسوب و أنا على وشك إنهاء مسار أنظمة التشغيل ونظام لينكس. قمنا في هذا المسار بتنصيب بيئة لينكس إفتراضية أعطيتها 2 غيغا بايت تقريبا لكي تعمل. ثم قمنا بتنصيب Ubuntu-server أيضا على البيئية الوهمية و أعطيته أيضا أقل من 2 غيغا بايت بقليل للذاكرة العشوائية لكي تعمل. الآن عند تشغيلهما معا ثم محاولة الإتصال بخادم Ubuntu من البيئة الوهمية للينيكس يتوقف الجهاز تقريبا أي أنه يصبح بطيئ جدا جدا جدا و لدرجة لا أستطيع العمل عليه. مساحة الرام عندي 4 فهل إذا زدتها إلى 6 أو 8 هل سيحل ذلك المشكلة أم أنه شيئا آخر يمكن أن يكون في حاجة للتطوير في جهازي و أن تطوير الرام أو تطويها وحدها لن ينفع أم شيء آخر.

مجال العمر الحر ليس مجال بحد ذاته بل سوق عمل، ويجب عليك إمتلاك مهارة للمنافسة به والحصول على مشاريع وفرص توظيف عن بعد. وفي البداية عليك بمعرفة المجالات الملطوبة في مواقع العمل الحر والتي منها المواقع التالية: مستقل خمسات بعيد ومن المفترض أن تكوني متخصصة في أحد المهارات التالية للعمل على المواقع السابقة: أعمال وخدمات استشارية برمجة، تطوير المواقع والتطبيقات هندسة، عمارة وتصميم داخلي تصميم، فيديو وصوتيات تسويق إلكتروني ومبيعات كتابة، تحرير، ترجمة ولغات دعم، مساعدة وإدخال بيانات تدريب وتعليم عن بعد وكل مجال من السابق بداخله تخصصات أخرى، فمثلاً، مجال البرمجة يحتوي على برمجة المواقع وبرمجة تطبيقات الهاتف وبرمجة برامج سطح المكتب، وبداخل كل تخصص هناك لغات برمجة مختلفة وهكذا. والأمر قد يبدوا معقد من الخارج، لكن خطوة بخطوة سيسهل الأمر عليك والجميع بدأ من نقطة الصفر. وبالنسبة للمدة اللازمة لتعلم أي مهارة، ففي رأي من 6 شهور وحتى سنة أو سنتين، حيث أن الأمر يتوقف على مقدار إجتهادك، وأيضًا معلوماتك المتوفرة أو خبراتك التي قد تساعدك في التعلم بشكل أسرع. والأفضل لك هو قراءة المقالات التالية لتحديد المجال الذي تريده، وفهم طبيعة العمل الحر بشكل شامل، بدلاً من التصورات الخيالية التي يروج لها على وسائل التواصل الإجتماعي. دليلك الشامل إلى العمل الحر عبر الإنترنت 28 وظيفة من وظائف العمل الحر الأكثر طلبًا للمبتدئين: 10 مقالات في مجال العمل الحر ينبغي لك قراءتها كيفية العمل على موقع مستقل وتحقيق أول 25 دولار بعد أن تقومي بقراءة المقالات السابقة، لا تترددي في الاستفسار عما تحتاجيه هنا، ولكن بعد قراءة المقالات. وأيضًا قد تحتاجي إلى قراءة النقاش التالي:

السلام عليكم.. هل يمكن عمل تطبيق هاتف متكامل باستخدام الجافاسكريبت؟وكيف ستكون كفاءته مقارنة باللغات الأخرى المستخدمه في إنشاء تطبيقات الهواتف؟

بالإمكان ربط كود بايثون مع كود React Native باستخدام Bridge API. ويستخدم Bridge API لإنشاء واجهات المستخدم والتعامل مع قواعد البيانات والاتصال بخدمات الويب والتحكم في التحليلات والأدوات الأخرى التي تعمل بلغة بايثون. ويتم تنفيذ Bridge API باستخدام وظيفة "native modules" في React Native و "Python modules" في بايثون. ويجب معرفة أنه يمكن استخدام Bridge API لتوفير القدرة على إعادة استخدام برامج بايثون الموجودة بالفعل وإضافة ميزات جديدة إلى تطبيقات React Native باستخدام لغة بايثون. مثلاً، تستطيعي استخدام بايثون لإنشاء نماذج التعلم الآلي والتفاعل معها في تطبيق React Native، وذلك من خلال مكتبة TensorFlow المتاحة في بايثون لإنشاء نماذج تعلم الآلة وتدريبها على البيانات. وبعد ذلك نستخدم Bridge API لربط تطبيق React Native مع تلك النماذج وتوفير واجهة المستخدم اللازمة لتفاعل المستخدمين معها. مثال بسيط على طريقة الربط بين بايثون وReact Native في البداية، عليك بإنشاء وحدة بايثون بسيطة تُسمى "calculator.py" وضعي بها الكود التالي: def add(a, b): return a + b الآن سنقوم بإنشاء Native Module في React Native لاستدعاء هذه الوحدة. يمكنك إنشاء ملف جديد يسمى "CalculatorModule.js" وضعي به التالي: import { NativeModules } from 'react-native'; const { Calculator } = NativeModules; export default { add: (a, b) => { return Calculator.add(a, b); }, }; وتأكدي من تحديد اسم Native Module كـ "Calculator"، ثم يمكنك استخدام هذا Native Module في كود React Native الخاص بك. من خلال إنشاء شاشة جديدة تُسمى "CalculatorScreen.js" كالتالي: import React, { useState } from 'react'; import { View, Text, TextInput, Button } from 'react-native'; import Calculator from './CalculatorModule'; const CalculatorScreen = () => { const [a, setA] = useState(''); const [b, setB] = useState(''); const [result, setResult] = useState(''); const handleAdd = () => { const res = Calculator.add(Number(a), Number(b)); setResult(res.toString()); }; return ( <View> <TextInput value={a} onChangeText={setA} /> <TextInput value={b} onChangeText={setB} /> <Button title="Add" onPress={handleAdd} /> <Text>{result}</Text> </View> ); }; export default CalculatorScreen; وكما ترين يتم استدعاء Native Module "Calculator" واستخدامه في دالة "handleAdd" لجمع الأعداد المدخلة، وعرض نتيجة الجمع في عنصر "Text". والمثال بسيط لكنه يوضح كيفية استخدام Bridge API لربط كود بايثون مع كود React Native، وبنفس المبدأ تستطيعي تطوير تطبيقات React Native متكاملة مع قواعد البيانات والتحكم في التحليلات والأدوات الأخرى.

نعم، يمكن عمل تطبيق هاتف متكامل باستخدام الجافاسكريبت، ولكن يجب أن تستخدم إطارات عمل مخصصة لهذا الغرض، مثل React Native أو Ionic أو Cordova. هذه الإطارات تسمح لك بكتابة كود جافاسكريبت واستخدام تقنيات الويب مثل HTML و CSS لإنشاء واجهات مستخدم أصلية أو هجينة تعمل على نظامي Android و iOS. كفاءة هذه التطبيقات تعتمد على عوامل عديدة، مثل جودة الكود وأداء السيرفر. بشكل عام، يمكن أن تكون التطبيقات المبنية على الجافاسكريبت أقل كفاءة من التطبيقات المبنية على لغات أخرى مثل Java أو Kotlin أو Swift، لأنها تحتاج إلى استخدام محرك جافاسكريبت لتفسير الكود في وقت التشغيل، بدلا من ترجمته إلى كود آلة مسبقا. لذلك، قد تواجه بعض التحديات في التعامل مع المهام المعقدة أو الموارد المحدودة أو التفاعل مع خصائص الجهاز الأصلية. لكن هذا لا يعني أن التطبيقات المبنية على الجافاسكريبت غير قابلة للاستخدام أو ذات جودة منخفضة، فهناك العديد من التطبيقات الناجحة والشهيرة التي تم إنشاؤها بهذه الطريقة، مثل Facebook و Instagram و Skype و Uber و Airbnb وغيرها. إذا كنت ترغب في تعلم كيفية إنشاء تطبيق هاتف باستخدام الجافاسكريبت، و هناك العديد من المصادر والدورات المتاحة على الإنترنت تعلم هذه التقنيات، نعم، يمكنك ربط كود بايثون مع كود React Native من خلال سيرفر مثل Flask أو Django, يمكنك كتابة API بلغة بايثون وتشغيل سيرفر ، ومن ثم تستخدم لغة الجافاسكريبت للإتصال بالAPI والتواصل مع السيرفر في تطبيق React Native. و يمكن ايضاً ربط كود بايثون مع كود React Native باستخدام مكتبات مثل Native Modules. يمكن استخدام هذه المكتبة للاتصال بتطبيق Python واستدعاء الوظائف من خلال تطبيق React Native. يمكن استخدام هذه التقنية لإضافة مزايا إضافية إلى تطبيق React Native أو لتحسين أداء التطبيق.

شكرا ،جزاك الله خيرا، سؤال آخر لوسمحت هل تعلم إذا كان بإمكان ربط كود بايثون مع كود React Native؟

بالطبع يمكنك إنشاء مواقع، تطبيقات وبرامج سطح مكتب باستخدام جافاسكريبت. والتطبيقات يتم إنشائها باستخدام إطار العمل الشهير "React Native"، و الذي يستخدم مجموعة متنوعة من التقنيات والأدوات بما في ذلك HTML و CSS و JavaScript لإنشاء تطبيقات الهواتف. وبالنسبة لكفاءة التطبيقات المبنية باستخدام الجافاسكريبت، فإنها متقاربة في الأداء مقارنة باللغات الأخرى المستخدمة في تطوير التطبيقات مثل Swift و Kotlin و Java. ومع ذلك ، فإن كفاءة التطبيق يعتمد على عدة عوامل أخرى بما في ذلك نوع التطبيق وحجم البيانات التي يتم تداولها ومستوى تحسين الأداء للكود. والمقارنة ظالمة بعض الشيء، حيث أن React Native يسمح لك بإنشاء تطبيقات متعددة المنصات بسهولة بين منصتي iOS و Android ، وبالتالي يسهل عملية تطوير التطبيقات ويوفر الكثير من الوقت والجهد. أما التطبيقات الأصلية Native المبنية بواسطة Swift و Kotlin و Java فهي لا تعمل على المنصات الأخرى، أي Swift تستخدم لبناء تطبيقات لنظام iOS بينما Kotlin و Java لنظام أندرويد. وقد تم ذكر المزيد من التفاصيل والشرح والمقارنات في نقاشات سابقة، أرجو منك قرائتها تجنبًا للتكرار.

يؤثر حجم الذاكرة العشوائية RAM على أداء الحاسوب بشكل كبير، فكلما زاد حجم الذاكرة العشوائية RAM زادت سرعة الحاسوب وأداءه، والسبب في ذلك هو أنه كلما زاد حجم الذاكرة العشوائية RAM زاد عدد التطبيقات التي يمكن تشغيلها في نفس الوقت، وزادت سرعة تشغيل هذه التطبيقات، وأيضًا زادت سرعة تحميل الملفات والبرامج، وزادت سرعة تصفح الإنترنت، وزادت سرعة تشغيل الألعاب، وزادت سرعة تشغيل برامج المونتاج والجرافيكس. وفي حالتك فالـ 4 جيغا غير كافية أبداً فأقل ما يمكن يجب ان يتم رفع الذاكرة إلى 8 أو 12، والافضل هو ان تصبح 16 أو 32. ولكن سرعة الجهاز تعتمد على عدة عوامل ومنها القرص الصلب فمكما اخبرك المدرب في الاجابة السابقة فإن القرص الصلب من نوع SSD يحسن اداء الجهاز بشكل جذري حيث يعتبر القرص الصلب من النوع SSD أسرع بكثير من الأقراص الصلبة التقليدية، وذلك لأنه لا يحتوي على أجزاء متحركة، بالإضافة إلى أنه يستخدم ذاكرة فلاش لتخزين البيانات بدلاً من الأقراص المغناطيسية التي تستخدم في الأقراص الصلبة التقليدية. وبالتالي، فإنه يوفر سرعات قراءة وكتابة أسرع. ومن بين المزايا الأخرى للاستخدام SSD هو أنه يستهلك طاقة أقل من الأقراص الصلبة التقليدية، مما يؤدي إلى تحسين عمر بطارية جهاز الكمبيوتر المحمول، كما أنه يعمل بشكل هادئ ولا يحتوي على أجزاء متحركة، مما يجعله أكثر موثوقية وأقل عرضة للفشل. بعد قول ذلك فإن اداء الحاسوب يتأثر بشكل كبير من قدرة المعالج، وما انصحك به هو ان تنظر إلى مدير المهام task manager وتراقب اداء الحاسوب فإذا رأيت أن الهارد هو الذي يتم استخدامه بنسبة 100% فهذا يعني ان المشكلة لديك هي من الـ هارد وإذا كان الرام أو المعالج هو الذي يتم استهخدامه بنسبة 100% فهذا يعني ان المشكلة من الرام أو المعالج.

مساحة الرامات لديك صغيرة جدًا، وتشغيل نظامي وهمي على تلك المساحة من الرامات أمر صعب، لذلك يجب أن تكون على الأقل 8 جيجابايت وتلك مساحة صغيرة أيضًا، ففي الوقت الحالي المساحة المناسبة للرامات هي 16 جيجابايت. وذلك لتتمكن من تشغيل المتصفح ومتابعة الدروس وتشغيل محرر الأكواد وبرامج أخرى بجانب النظام الوهمي وأيضًا النظام الأساسي الخاص بك يشغل ما بين 2 جيجابايت إلى 4 جيجابايت. ولا تضغط على نفسك كثيرًا، يكفيك 8 جيجابايت من الذاكرة العشوائية لتعمل بشكل جيد، والأفضل هو 16 أو 12 جيجابايت حسب استطاعتك. وأيضًا سيفيدك بالتأكيد شراء هارد SSD وجعله وحدة التخزين الأساسية للنظام والبرامج لديك، فالعمل على هارد HDDيجعلك تشعر كأن الجهاز يعاني حتى لو كانت مواصفات الحاسوب مرتفعة، وذلك سبب سرعة القراءة والكتابة المنخفضة لذلك النوع من وحدة التخزين. لكن كما أشرت لك، الأمر يتوقف على ميزانيتك ولا تضغط على نفسك كثيرًا ،قم بشراء الرامات أولاً وتستطيع شراء رامات مستخدمة و SSD وأيضًا بتكلفة منخفضة.

إضافة صوت ترحيبي و Loader لإضافة صوت الترحيب ، تستطيع استخدام عنصر HTML5 audio ، ويتم تشغيله باستخدام JavaScript. أولاً ، قم بإنشاء عنصر audio في HTML الخاص بك باستخدام العلامة <audio> ، وحدد مصدر الصوت الخاص بك باستخدام العلامة <source> ، كما يلي: <audio id="welcome-sound"> <source src="path/to/sound/file.mp3" type="audio/mp3"> </audio> بعد ذلك، عليك استخدام addEventListener لتعيين حدث load لتشغيل الصوت عندما تنتهي صفحة الويب من التحميل بدلاً من استخدام window.onload. وسنعتمد على حدث DOMContentLoaded بدلاً من load لتحديد الحدث الذي يتم إطلاقه عندما يتم تحميل كل العناصر في الصفحة بشكل كامل بدلاً من انتظار الصفحة بالكامل (مثل الصور) للانتهاء من التحميل ، وهذا يجعل الصفحة تستجيب بشكل أسرع. document.addEventListener("DOMContentLoaded", function(event) { // تشغيل الصوت document.getElementById('welcome-sound').play(); }); إضافة loader إلى صفحتك سيتم الجمع ما بين استخدام العناصر المختلفة في CSS لإنشاء loader مخصص، وتستطيع استخدام صور GIF المحملة مسبقًا ، مثل الصورة التي أرفقتها، أو يمكنك استخدام الرسومات SVG أو CSS لإنشاء loader. بعد ذلك ، سنعتمد على JavaScript لإظهار وإخفاء loader بناءً على حالة تحميل الصفحة. HTML <!-- loader --> <div class="loader"> <img src="path/to/loader/image.gif"> </div> CSS .loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } في الكود أعلاه ، يتم إنشاء loader باستخدام حدود CSS ودائرة مع مجموعة محددة من الألوان. يتم إنشاء الحركة باستخدام animation CSS ، والذي يسمح لل loader بالدوران بشكل لا نهائي. Javascript document.addEventListener("DOMContentLoaded", function(event) { const loader = document.querySelector(".loader"); loader.style.display = "none"; // إخفاء loader عند بدء تحميل الصفحة // تشغيل الصوت document.getElementById('welcome-sound').play(); // إظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة setTimeout(function() { loader.style.display = "block"; }, 3000); // إخفاء loader بعد 5 ثوانٍ من بدء تحميل الصفحة setTimeout(function() { loader.style.display = "none"; }, 5000); }); من خلال استهداف العنصر .loader باستخدام document.querySelector يتم إخفاؤه باستخدام style.display = "none". ثم تشغيل الصوت بواسطة document.getElementById('welcome-sound').play();. بعد ذلك ، يتم استخدام setTimeout لإظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة ، وإخفائه بعد 5 ثواني. إضافة صوت عندما يقوم الزائر بإنشاء حساب جديد عليك باستخدام العنصر audio في HTML لتشغيل الصوت ويمكنك تعيين مصدر الصوت في الـ JavaScript. بالنسبة لإضافة اسم العميل المسجل إلى رسالة الصوت ، سنعتمد على قيمة العنصر input الخاص بالاسم لاسترداد الاسم الذي قام المستخدم بكتابته. ثم يمكنك إضافة هذا الاسم إلى نص الرسالة الصوتية باستخدام concat في JavaScript. HTML <input type="text" id="name" placeholder="الاسم"> <button id="submit">إنشاء الحساب</button> <audio id="welcome-sound"> <source src="welcome.mp3" type="audio/mpeg"> </audio> Javascript document.getElementById("submit").addEventListener("click", function() { const name = document.getElementById("name").value; const welcomeMessage = "مرحباً " + name + "! تم إنشاء حسابك بنجاح"; const audio = document.getElementById("welcome-sound"); audio.src = "welcome.mp3"; // مصدر الصوت audio.play(); setTimeout(function() { alert(welcomeMessage); }, 3000); // 3 ثوانٍ للتأكد من عرض الرسالة الصوتية بشكل كامل }); الكود يستخدم addEventListener لاستماع حدث النقر على الزر "إنشاء الحساب". ويتم استخدام قيمة العنصر input الخاص بالاسم لإعداد رسالة الترحيب بشكل ديناميكي. ثم يتم تشغيل الصوت وإضافة رسالة الترحيب إلى الـ alert التي تظهر بعد ثلاث ثوانٍ من تشغيل الصوت. ويمكنك تغيير المدة المحددة في setTimeout وفقًا لاحتياجاتك.

Telegram Bot API هي واجهة برمجية تم تصميمها للمطورين الذين يرغبون في بناء الروبوتات (Bots) لـ Telegram و يمكنك البدء في استخدام Telegram Bot API عن طريق قراءة الدليل الرسمي للمطورين في Telegram والذي يحتوي على شرح مفصل لكيفية استخدام الـ API والتعامل معها وهو الشرح الاكثر شمولية والمقدم من تلغرام. كذلك قد تجد بعض الشروحات إذا بحث عن (انشاء بوت تلغرام) على يوتيوب. وهذه بعض المقالات عن الموضوع :