Hadi Hasan

مرحباً بكم

لقد قمت بتحميل مشروعي (موقع الويب) إلى Github لفتح هذا الموقع في (Render)، ثم قمت بإجراء بعض التغييرات في هذا المشروع حيث قمت بتثبيت cloudinary بواسطة هذا الكود في

Visual Studio Code:  

 npm install cloudinary

: كيف يمكنني إضافة "cloudinary" إلى مشروعي في Github ؟

لقد أجريت جميع التغييرات على الأكواد، و بقي إضافة "cloudinary" .

شكراً على المساعدة

بتاريخ 8 ساعات قال عمر قره محمد:

المشكلة Reached heap limit Allocation failed - JavaScript heap out of memory تعني ان الذاكرة المخصصة ل node غير كافية للقيام بالعملية.

جرب تنزيل نسخة احدث من node لأنه هنالك بعض العقبات في موضوع الذاكرة في النسخ القديمة.

في حال لم يجدي ذلك نفعاً فتأكد من توفر رام "ذاكرة عشوائي" كافية للمشروع الخاص بك، فإن كان ليس هنالك مساحة كافية في الذاكرة العشوائية فيجب عليك زيادة الذاكرة العشوائي بتركيب رامات اضافية للحاسوب الخاص بك أو إغلاق كل التطبيقات التي تستخدم الرام "الذاكرة العشوائية" حتى تتوفر مساحة كافية للمشروع الخاص بك وقد يساعدك في ذلك استخدام برامج الـ ram cleaner.

لقد تم إصلاح الخطأ , لو تصبح الذاكرة ألف جيجا لن تكفي, لأنني كتبت كود حلقة غير منتهية ب while ,  نسيت و ضع كود زيادة قيمة المتغير كل مرة , و لم يذكر البرنامج هذا الخطأ.

 مرحبا

كنت أعمل على sass  بشكل طبيعي ثم بعد يومين ظهرت لي مشكلة و لم يعد يعمل : 

بعد طول انتظار من إدخال أمر التشغيل

command prompt :

 sass --watch "C:\Users\hp\Desktop\Sass project\sass"

تظهر لي الرسالة:

<--- Last few GCs --->

[9080:000001EAA35BDC80]   286224 ms: Mark-sweep 4053.1 (4136.7) -> 4040.4 (4140.5) MB, 33616.7 / 0.0 ms  (average mu = 0.275, current mu = 0.031) allocation failure; scavenge might not succeed
[9080:000001EAA35BDC80]   313500 ms: Mark-sweep 4056.8 (4140.7) -> 4044.7 (4144.2) MB, 25487.2 / 0.0 ms  (average mu = 0.185, current mu = 0.066) allocation failure; scavenge might not succeed

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF682FC1B7F node_api_throw_syntax_error+203775
 2: 00007FF682F41556 v8::internal::wasm::WasmCode::safepoint_table_offset+63558
 3: 00007FF682F428C2 v8::internal::wasm::WasmCode::safepoint_table_offset+68530
 4: 00007FF6839E47F4 v8::Isolate::ReportExternalAllocationLimitReached+116
 5: 00007FF6839CFB52 v8::Isolate::Exit+674
 6: 00007FF683851BBC v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
 7: 00007FF68384EDDB v8::internal::Heap::CollectGarbage+3963
 8: 00007FF683865013 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
 9: 00007FF6838658BD v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
10: 00007FF6838750F3 v8::internal::Factory::NewFillerObject+851
11: 00007FF683566825 v8::internal::DateCache::Weekday+1349
12: 00007FF683A81E81 v8::internal::SetupIsolateDelegate::SetupHeap+558193
13: 00007FF683A07992 v8::internal::SetupIsolateDelegate::SetupHeap+57218
14: 00007FF603D53739

حاولت إصلاح المشكلة بالبحث في النت ووجدت عدة حلول كلها لم تفلح .

أرجو الرد بكل الحلول المتوفرة و  الجالات علماً أن نظام التشغيل عندي وندوز 10 .

ولكم الشكر

عندما نضع input  من نوع  password  تكون الأحرف داخل الخانة دوائر سوداء, في بعض الحالات يكون هناك زر على شكل عين مثلاً إذا ضغطت عليه تظهر الأحرف داخل الخانة, يمكنني عمل ذلك بواسطة جافاسكربت, ولكن ألا يوجد طريقة أسرع منها بواسطة  css  أو bootstrap أو html   ?

بتاريخ 19 ساعات قال Kais Hasan:

في حال كان لديك موقع بسيط كما ذكرت فلا داعي لكي تدفع من أجل استضافة، هناك العديد من الاستضافات المجانية التي يمكنك استعمالها، مثلاً غوغل تقدم استضافة مجانية يمكنك الإطلاع عليها من هنا.

بشكل عام كما أعتقد فإن هذه هي أول تجربة لك بالرفع على استضافة، فمن الجيد أن تقوم بتجربة استضافات مجانية قبل التعامل مع استضافة غير مجانية، حيث أنه لا داعي للانتقال إلى الاستضافة المدفوعة ما لم توجد حاجة إلى ذلك.

كما أنه في مثالك لا حاجة لل  wordpress، بعض الاستضافات تأتي مع تسهيلات من أجل أطر عمل معينة، و بالتالي عند عدم استعمالك للإطار المذكور لا يجب عليك استعمال الإستضافة الخاصة به.

شكراً على ردك, لكن وضعت بالفعل الموقع على استضافة مجانية, لكن شخص يعرفني يريد حجز مساحة مدفوعة وأضع فيها ملفاتي, وسألني عن نوع استضافة ووردبرس هل سيعمل موقعي عليها ام لا, و ليس لدي أي خبرة في الاستضافات.

أعيد صياغة السؤال : هل في حال وضعت موقعي(ملفاتي) على نوع الاستضافة ووردبرس فيه إشكالية من الناحية الفنية ؟ أنا لا أسأل عن الناحية الاقتصادية . 

مساء الخير

إذا كان الموقع الذي أنشأته بواسطة جافاسكربت و css  و  html فقط .

فهل حجز استضافة  wordpress  للموقع مناسب ؟

بتاريخ 23 ساعات قال علي محسن:

وكذلك النظام التشغيلي حيث أن بعض الخصائص لنفس نوع المتصفح قد تعمل على وندوز ولكن ليس على ios على سبيل المثال.

هل هناك مصدر لأراجعه من أجل التنسيق حسب أنظمة التشغيل وكيف أعرف الخصائص المدعومة و غير المدعومة للأنظمة المشهورة ؟

علمت اليوم أنه لم يكن خطأً في جافاسكربت بل أيضاً في css  خاصية ال animation.

نعم اعتقدت أن المشاكل بسبب أنواع المتصفح , لكن حتى عندما فتح الشخص الآخر نفس المتصفح لدي وهو كروم بقيت هناك مشاكل, علماً أن نظام التشغيل لديه ماكنتوش وليس وندوز , وبالتالي المشاكل محصورة بنظامي التشغيل : أندرويد و ماكنتوش , و ربما غيرهما , أما نظام التشغيل لدي فهو : وندوز10.

كيف أنسق لجميع أنظمة التشغيل ؟

أنشأت موقع الكتروني و وضعته في موقع استضافة مجانية حملت إليه ملفاتي, و ظهر عندي بشكل جيد على الكمبيوتر لكنه بطيء بسبب حجم بعض الملفات , وعند تصغير عرض نافذة المستعرض يكون التجاوب جيد كما صممته تماماً , لكن عندما أفتح البرنامج على الموبايل يكون الموقع سيء جداً و ليس كما صممته أبداً و العناصر متداخلة ...

كذلك عندما قام شخص آخر بفتح الموقع عنده على الكمبيوتر ظهرت لديه أخطاء برمجية لا توجد عندي  عندما أفتح الموقع من الكمبيوتر لدي .

ما السبب و ما الحل , عملت أكثر من كورس عل css ,  ولم تذكر فيهم هذه الأمور .

علماً أني وضعت اكواد التنسيق المطلوبة :

بالنسبة للمسارات كتبت أكواد html  في مجلد , و أكواد جافاسكربت في مجلد آخر و أكواد css  في مجلد ثالث و هكذا ...

جربت وضع جميع الاكواد  css , javascript في ملف  html ,  لكن لم يتغير شيء على الموبايل, بل ظهرت لدي مشاكل على الكمبيوتر بسبب اختلاف الاولوية لبعض الخصائص.

 ماهو الحل  ؟

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

أنشأت موقع نت لا يحتاج قاعدة بيانات (تم إنشاء الموقع بواسطة css  و جافاسكريبت فقط )، و أريد أن أنشره في النت بحجز مساحة مدفوعة، هل هناك إمكانية لهجوم يؤدي إلى تعطيله أو تهكيره ... و كيف يمكنني حمايته ؟

مرحباً

أحتاج في كثير من الأحيان صوراً بخلفية شفافة , أحمل من النت صوراً مكتوب أن خلفيتها شفافة و لكن عندما أضعها في الموقع تكون غير شفافة مع أن لاحقتها  png .

 أحتاج الآن مثلاً أيقونة الموسيقا بخلفية شفافة , بحثت كثيراً فلم أنجح , ماذا أعمل ؟

الآن انتبهت للسبب، الشاشة في ملف ويب الأصلي كانت مكبرة بنسبة 10% ،كانت مكبرة فقط لملف الويب هذا دون بقية الملفات. 

(لا أقصد التنسيق بواسطة css، بل الشاشة نفسها بواسطة + ctrl) 

عنوان السؤال لم يكن كذلك  فأنا أعلم جيداً الخاصية transform بكل حالاتها .

لا أدري كيف تغير العنوان الذي كتبته .

مرحبا

أنشأت صفحة ويب : html و ربطها مع ملف  css أنشأته لتنسيق الصفحة , ثم أنشأت نسخة طبق الاصل من صفحة الويب السابقة و ربطها مع نفس ملف css ,  و أنشأت في صفحتي الويب رابطاً للتنقل بينهما .

المفروض عندما أنقر الرابط في صفحة الويب الاصلية تفتح صفحة الويب النسخة مثلها تماماً , لكن الواقع أنها تكون أصغر منها حوالي 1% أو 2% , أي جميع العناصر فيها أصغر مما هي عليه في الصفحة الاصلية ,  ما هو السبب ؟

بحثت عن تنسيق قد يؤدي إلى ذلك مثل scale مثلاً فلم أجد .

شكراً لكم

نجح معي هذا الحل : animation-fill-mode: forwards

يحافظ العنصر على آخر حركة ويستمر بالدوران بنفس الاتجاه 

بتاريخ 1 ساعة قال Adnane Kadri:

إليك المثال:

<div>
Hsoub Academy
</div>

div{
  background: red;
  animation: rotateDiv 5s linear infinite normal;
}
@keyframes rotateDiv{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}

الخاصية animation

أما في هذا المثال فما يحدث هو أن العنصر يدور 360 درجة ثم تنتهي الحركة الأولى فيعود العنصر إلى وضعه الأصلي بدون دوران بل بشكل مباشر ثم تبدأ الحركة الثانية و هكذا فنتخيل أنه استمرار بالحركة .

بتاريخ منذ ساعة مضت قال Adnane Kadri:

 

بتاريخ منذ ساعة مضت قال Ahmed Sadek:

يمكنك تغيير الوحدة من deg إلى turn 

transform: rotateY(5turn);

 

 المشكلة نفسها تماماً , هذه الواحدة تعني الإنتقال إلى زاوية مقدارها 5 لفات , و ليس بمقدار 5 لفات .

بتاريخ منذ ساعة مضت قال Ahmed Sadek:

 

بتاريخ منذ ساعة مضت قال Adnane Kadri:

ما تحاول القيام به غير منطقي فدورة بمقدار 360deg تمثل دورة كاملة لا تعبر إلا على 2π، نفس الأمر بالنسبة لأي مضاعف للدرجة 360 او 2π لطالما أن محور الدوران هنا هو المحور Y الثابت. فإذا أكمل العنصر مقدار 3π/4 من دورة أو 270 أو أي من مضاعفاتها فإنه سيحتاج مكملها إلى 2π فقط، وهو π/4 أو 90 أو أي من مضاعفاتها.

الفكرة هنا، هي في أن الموضوع لا يجب أن يرى كدرجات. تخيل محور دوران العنصر كالمحور Y في الدائرة المثلثية. فأي موضع أصبح فيه العنصر من الدائرة، لن يخرج عن كونه ضمن الدائرة، ومهما كان عدد اللفات فهو سيعبر دوما عن نسبة معينة من لفة واحدة.

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

ان كنت تحاول تجنب هذا الموضوع، فلن يكون عليك إلا الاستفادة بشكل أو بآخر من الخاصية animation-iteration-count في css التي تحدد عدد مرات تكرار الدورة حتى توقف الحركة. من بين القيم التي تقبلها infinite.

لمقاربة نفس النتيجة، أنشئ عنصرا:

• يقوم بالدوران حول المحور Y دورة كاملة.
• يسير في اتجاه عادي.
• يدور بشكل لا متناهي.

إليك المثال:

<div>
Hsoub Academy
</div>

div{
  background: red;
  animation: rotateDiv 5s linear infinite normal;
}
@keyframes rotateDiv{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}

الخاصية animation

شكرا على إجابتك, لكن هذا الكود أعرفه وليس هو ما أريد, جرب أن تضع زر يدوّر العنصر 90درجة فقط, ليدور دوما بنفس الاتجاه .

سيكون عليك ان تضع الزوايا بالتسلسل التالي : 0 ,90 ,180 ,270 ,360 ,450 , ....إلى لا نهاية .

إذا حاولت أن تعود الحركة إلى الزاوية 0 كما فعلت أنا , سيتغير اتجاه الحركة مرة واحدة كل لفة كاملة . ستعلم عندها أن الأمر لم يكن دوران بمقدار معين بل دوران إلى زاوية محددة  .

مرحباً

الخاصية : ;transform: rotateY(90deg)

تحدد مقدار الزاوية التي سوف يكون العنصر عندها وليس مقدار دوران العنصر , هل يوجد طريقة لتحديد مقدار الدوران أينما تواجد العنصر في زاوية ما ؟

بعبارة أخرى : إذا دار العنصر من 0 درجة إلى 270 درجة ثم أردت إعادته إلى 0 يجب وضع الزاوية 360 و ليس 0 وإلا دار باتجاه معاكس و بالتالي إذا كان هناك عدد لا نهائي من اللفات يتم بواسطة ضغط زر يجب أن نضع مضاعفات 360 حتى لا ينعكس اتجاه الدوران   وهذا لا نهائي غير ممكن . 

أريد طريقة مثل scrollTo  ليتحرك السكرول بمقدار محدد وليس إلى موضع محدد .

بتاريخ 3 دقائق مضت قال علي محسن:

<input class="custom-input" type="text" id="fname" name="fname">

 المقصود من سؤالي : شكل الصندوق ل "input type="checkbox  لم تؤثر خواص الإطار border عليه  ولا border-radius  

بتاريخ منذ ساعة مضت قال Kais Hasan:

يمكنك استعمال الخاصية border-radius للقيام بتغيير شكل الصندوق، عند قيمة معينة لهذه الخاصية سيصبح الشكل دائري، يمكنك تجريب القيم حتى الحصول على الشكل المطلوب، حيث أنه بتغيير القيمة تصبح الحواف أنعم و عند قيمة معينة سيصبح الشكل دائري.

يمكنك استعمال الخاصية accent-color لتغيير اللون، كمثال على ذلك:

#cb1 {
  accent-color: #ffffff;
}

يوجد أيضاً الكثير من الأشكال الجاهزة التي يمكنك استعمالها و التي قام مطورون آخرون بتطويرها، و يمكنك إيجادهم هنا.

شكراً على إجابتك, 

حاولت استخدام خاصية border-radius لعنصر input من نوع checkbox لكنها لم تنجح , هل أنت متأكد من هذه الخاصية انها تؤثر  ؟ 

هل يمكن من خلال css  تغيير شكل الصندوق المربع ل  input  من نوع checkbox , ليصبح دائري  مثلاً , و تغيير لونه و لون خلفيته و غير ذلك  ؟

بتاريخ 3 ساعات قال Hadi Hasan:

هذا السطر الوحيد الذي لم يكن في الصفحات

على كل حال لم أستفد من إضافة السطر .

حاولت فتح الملفات في الموبايل عن طريق chrome لأنه موجود عندي في الموبايل , لكن لم أستطع لا يوجد إلا خيار فتحه عن طريق : عارض  html  . 

بتاريخ 14 ساعات قال عمر قره محمد:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

هذا السطر الوحيد الذي لم يكن في الصفحات , ماذا يعني هذا السطر ؟

بحثت عن جواب سؤالي فوجدت عدة خيارات هل أضعها كلها  ؟

<meta http-equiv="X-UA-Compatible" content="IE=5" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="X-UA-Compatible" content="IE=7.5" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<meta http-equiv="X-UA-Compatible" content="IE=100" />

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=5" >

أنشأت موقعاً من عدة صفحات html و عدة صفحات css  و صفحات جافاسكريبت , و قمت بتنسيق الصفحات في  css حسب عرض الشاشة ( حتى عرض 300 بكسل ) .

لكني عندما نقلت الملفات إلى جهاز الموبايل (  alcatel )  و ذلك بضغطها و من ثم فك الضغط في الموبايل , تفاجأت أن الصفحات غير منسقة إطلاقاً حتى عندما أضع الشاشة بشكل عرضي , كما أن بعض الصور لم تظهر  رغم تأكدي من تحميلها .

هل السبب هو تنسيق خاطئ على الكمبيوتر؟ أم أن نقل الملفات كان بطريقة خاطئة ؟ أم أن السبب هو أنه جهاز على نظام أندرويد و لا يوجد فيه المتصفح الذي عملت عليه و لا يوجد فيه برنامج جافاسكريبت ... ؟

ماذا علي أن أفعل و كيف أتأكد من تنسيق الصفحات ؟

للتحكم بخاصية scroll-behavior  في  css وضعت هذه الخاصية لجميع العناصر  :   *  , و نجح الأمر .

ولكن لم أعرف بالتحديد , أي عنصر هو الذي يجب أن أعطيه هذه الخاصية ( ضمن css ) ؟