‏إظهار الرسائل ذات التسميات تطوير المواقع. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات تطوير المواقع. إظهار كافة الرسائل
عمل ويندوز لودر Windows Loader باستخدام HTML و CSS فقط

عمل ويندوز لودر Windows Loader باستخدام HTML و CSS فقط

سنتعلم في هذه المقالة كيفية إنشاء ويندوز لودر أو بالانجليزية Windows Preloader أو Loader باستخدام HTML وCSS فقط.

ماهو المحمل المُسبق؟ أو Loader أو PreLoader


كلها مسميات لنفس الشئ وهو ما تراه أثناء تحميل صفحة ما تزورها والتي لم يتم تحميل باقي محتواها.
يساعد Preloader في الترفيه عن الزوار بينما لا تزال بقية الصفحة قيد التحميل. ويساعد التحميل المسبق في الحفاظ على معدل الارتداد في الموقع حيث أنه يقوم بتأخير الزائر للحظات قبل وصوله للمحتوى وهي منحة اضافية من الوقت للبقاء داخل موقعك.

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

{setMore}

في هذا البرنامج يكون المحمل المسبق هو نفس فكرة المحمل الذي تجده داخل جهاز الكمبيوتر عند البدء في تشغليه والذي يدور في إتجاه عقارب الساعة بلا توقف. تم تحديد نسب معينه للمحمل ليختفي فيها ويظهر بنسب معينة حتى يشابه تمام المحمل المسبق الخاص بالويندوز Windows Loader.

إذا كان هذا صعباً عليك، يمكنك مشاهدة الفيديو المبسط لشرح كيفية عمل محمل مسبق (Windows Preloader أو Loader).

فيديو تعليمي لعمل المحمل المسبق



إذا كُنت جديداً فى عالم تطوير المواقع ولديك خبره بسيطة في HTML وCSS يمكنك إنشاء المزيد من هذه المحملات المسبقة باستخدام افكارك الشخصية.

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

إذا كُنت ترغب في الحصول على اكواد المصدر الخاصة بهذا المحمل المسبق Preloader فقط مرر لأسفل.

محمل مسبق Windows Loader أو Preloader (مفتوح المصدر)


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

قم فقط بنسخ محتوى كل ملف ولصق هذه الأكواد داخل ملفاتك:

أولاً: قم بإنشاء ملف باسم index.html والصق داخله محتوى الكود التالي، ولكن تأكد ان الملف بامتداد أو صيغة .HTML.

<html lang="en">
<!--* BergStock.Com *-->
<head>
    <meta charset="UTF-8"></meta>
    <title>Windows Loader - ويندوز لودر</title>
    <link href="style.css" rel="stylesheet"></link>
</head>
<body>
    <div class="container">
        <div class="warpper">
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
            <div class="bergloader">
                <div class="circle"></div>
            </div>
        </div>
        <div class="waitingmessage">
            لحظات من فضلك
        </div>
    </div>
</body>
</html>

ثانياً: قم بإنشاء ملف باسم style.css والصق الرموز التالية داخله وتذكر أنه يجب عليك أن يكون الملف بامتداد أو صيغة .CSS.
  
/* Brought to you from BergStock.Com */
/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
body {
    display: flex;
    align-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    background: #1540EA
}
.container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center
}
.warpper {
    position: absolute;
    top: -50px;
    transform: scale(1.5)
}
.bergloader {
    height: 25px;
    width: 1px;
    position: absolute;
    animation: rotate 3s linear infinite
}
.bergloader .circle {
    position: relative;
    top: 25px;
    height: 5px;
    width: 5px;
    background: #fff;
    border-radius: 50%;
}
.waitingmessage {
    position: absolute;
    bottom: -75px;
    font-size: 20px;
    font-weight: 600;
    font-family: Tahoma;
    color: #fff
}
@keyframes rotate {
    25% {
        transform: rotate(220deg)
    }
    50% {
        transform: rotate(450deg);
        opacity: 1
    }
    75% {
        transform: rotate(720deg);
        opacity: 1
    }
    76% {
        opacity: 0
    }
    100% {
        opacity: 0;
        transform: rotate(0deg)
    }
}
.bergloader:nth-child(1) {
    animation-delay: 0.15s
}
.bergloader:nth-child(2) {
    animation-delay: 0.3s
}
.bergloader:nth-child(3) {
    animation-delay: 0.45s
}
.bergloader:nth-child(4) {
    animation-delay: 0.6s
}
.bergloader:nth-child(5) {
    animation-delay: 0.75s
}
.bergloader:nth-child(6) {
    animation-delay: 0.9s
}

هذا كل شئ، فقد قمت بإنشاء محمل مسبق مشابه للموجود في جهازك الكمبيوتر Windows Preloader باستخدام HTML وCSS فقط.

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

مقدمة عن التخزين المحلي وكيفية التعامل مع بيانات localStorage

التخزين المحلي localStorage هو قاعدة بيانات داخل المتصفح، تتيح لك حفظ البيانات بتنسيق Key-Value.

معظم المتصفحات المُحدثه أو الأكثر شيوعاً تدعم التخزين المحلي مثل Chrome, Firefox, Safari.

التخزين المحلي localStorage

لا تحتوى البيانات المخزنة داخل التخزين المحلي على بيانات أو تواريخ انتهاء ولذلك سيستمر المتصفح بتذكر هذه البيانات حتى بعد غلقه تماماً.

{setMore}

يحتوى التخزين المحلي على اضافة API طفيفة لتحديد قيمة مفتاحية دائماً سلسة وسهلة الاستخراج على المتصفح.

إذا كنت تستخدم أحد المتصفحات الحديثة مثل Chrome أو Firefox، فيمكنك الوصول للبيانات المخزنة داخل التخزين المحلي للمتصفح لكل موقع تزوره باستخدام اداة الفحص داخل المتصفح واستخدام الكائن localStorage.


يمكنك الوصول للبيانات المخزنة من خلال علامة التبويب Application أو من الناتج الذي سيظهر بعد استخدام الكائن.


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

كيفية استخدام التخزين المحلي

يمكنك اضافة بيانات في التخزين المحلي localStorage باستخدام كائن localStorage.setItem(key, value) مع اضافة مفاتح وقيمة له.

ويمكنك استدعاء او حذف بيانات من التخزين المحلي localStorage باستخدام كائن localStorage.getItem(key) أو localStorage.removeItem(key) مع تحديد نفس المفتاح والقيمة المُدخله مسبقاً.

إضافة بيانات في التخزين المحلي


localStorage.setItem('a', 'bergstock.com');
localStorage.setItem('b', 'بيرجستوك');

استدعاء بيانات من التخزين المحلي


localStorage.getItem('a'); // الناتج bergstock.com
localStorage.getItem('b'); // الناتج بيرجستوك

حذف بيانات من التخزين المحلي


localStorage.removeItem('a'); // حذف bergstock.com من التخزين المحلي
localStorage.getItem('a');  // ناتج undefined حيث انه تم حذف المفتاح a

حذف كافة البيانات المخزنة داخل التخزين المحلي

سيتم حذف البيانات المخزنة فقط للنطاق الذي تقوم بتصفحه الآن.

localStorage.clear();

عيوب وقيود التخزين المحلي

  1. قاعدة بيانات localStorage تعد غير آمنة فلا يجب استخدامها لتخزين البيانات الحساسة.
  2. الحد الأقصى لحجم التخزين هو 5 ميجابايت فقط لذلك لا تقم بتخزين كمية كبيرة من البيانات داخله.
  3. ذاكرة مؤقتة يمكن حذفها بسهولة ولا يمكن اخذ نسخة احتياطية منها.

أول شئ يأتي في مخيلتك قبل تخزين البيانات في التخزين المحلي هو "هل يستطيع الزائر فعل شئ ما كـ انتحال صفة شخص آخر باستخدام هذه القيمة؟"

الإجابة نعم، وإذا كان زوار موقعك هدفهم تطبيق اذن شراء أو بيع او يستخدمون موقعك للمعاملات المادية فلا يجب استخدام التخزين المحلي كوحدة تخزين لبيانتهم او معرفهم وكلمة مرورهم.

يمكنك تطوير التخزين المحلي الخاص بك لاستخدامه في الواجهات البسيطة لحفظ تفضيلات الزائر مثل لون الموقع أو غيرها من البيانات التي لا تؤثر على صحة الموقع والزائر.
كيفية التحويل من jQuery إلى JavaScript – وماهي الفوائد الناتجة

كيفية التحويل من jQuery إلى JavaScript – وماهي الفوائد الناتجة

التحويل من jQuery إلى JavaScript يوفر لك كـ مالك موقع أو مطور مواقع مزايا عديدة، إلى جانب إزالة الـ Dead Code أو بمعنى آخر الكود الضعيف أو الميت. يمكنك أيضاً زيادة سرعة موقعك والذي يُعد عامل اساسيي لتحسين محركات البحث.

تُعد مكتبة jQuery وتوابعها من أفضل المكاتب لتطوير المواقع، وبكل السُبل يمكنك استخدامهم إذا كان الغرض هو فقط بناء موقع الكتروني.

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

على أقل تقدير، تأكد من أنك تعرف ما تفعله مكتبة jQuery وما الذي لا تفعله.

{setMore}
يعتقد بعض المطورين أن jQuery يحمينا من وحش كبير في مخيلتنا جميعاً يتعلق بهوس عدم توافق المتصفح مع الكود البرمجي الخاص بي. في حين أن الحقيقة بعد تحديث Internet Explorer 8، أصبحت كل المتصفحات متوافقة مع جميع تقنيات وبدائل الأكواد البرمجية التي قد تستخدمها.

كيفية التحويل من jQuery إلى JavaScript

هل قمت بالانتقال من Jquery الى Pure JavaScript والتى يطلق عليها Vanilla JS – فانيلا جافاسكربت، إن كان جوابك نعم فبكل تأكيد لن تكون هنا تقرأ عن طريقة تحويل الجيكوري إلى جافاسكربت.

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

كدت استغرق اكثر من اسبوع على أمل أن أجد "محول jQuery إلى JavaScript" عبر البحث عنها في جوجل ولكننى أدركت أن عَلّي تحويل الكود بطريقة يدوية.

لذلك، إذا كنت تريد حقاً زيادة سرعة الموقع الخاص بك وتحسين محركات البحث فعليك القيام بتحويل من اكواد Jquery إلى أكواد JavaScript.

تحسين محركات البحث من خلال Vanilla JavaScript

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

أفضل استخدام مقياس اختبار السرعة من Web.Dev أو مقياس اختبار السرعة من Google. الموقعين يُظهران لك تقرير تفصيلي عن جميع مشاكل موقعك وبما في ذلك سرعة تحميل موقعك.

يمكنك اختبار موقعك، وإن كانت القيم المعطاه لسرعة الموقع منخفضة ستجد أن السبب هو أكواد jQuery وقد تحل هذه المشكلة بنسبة 100% بالتحويل من jQuery إلى JavaScript وستحصل على نتيجة مرضية جداً.

اختبار سرعة موقع يستخدم jQuery

ضمن الموارد التي يتم تحميلها ستجد ايضاً ملفات jQuery. وفي الغالب لا يتعدى حجم الملف عن 20 كيلوبايت بعد الضغط إلا أنه قد يقوم بإبطاء موقعك بنسبة تصل إلى 60%.

اختبار سرعة موقع يستخدم jQuery

لا تسئ فهمي، أنا حب jQuery فهي حقاً مكتبة عظيمة وتعطي من يتقنها امكانية لفعل أي شئ يريد، وقد قمت بالفعل بإستخدامها في كثير من البرمجيات وأعددت بها اعمال عظيمة، ولكن يجب عليّ الاعتماد على Vanilla JS أكثر من أجل تحسين محركات البحث في موقعي.

إزالة الكود الميت أو الضعيف

إذا قمت بكتابة أكواد jQuery بالفعل داخل موقعك، فيمكنك استغلال الفرصة لإزالة العلامات البرمجية الغير ضرورية أو القديمة.

لهذا قمت بعمل قائمة بجميع الوظائف التي قد تحتاجها في موقعك باستخدام مكتبة jQuery واستبدالها بأكواد Vanilla JS وفي هذه الحالة قد تواجه بعض الأخطاء البرمجية التي قد اقترفتها في حق موقعك ويمكنك إزالتها إن لم تعد مطلوبة.

بعد الانتهاء من تحويل jQuery إلى JavaScript سيعيد ذلك ترتيب الأكواد الخاصة بك وينتج عنه كود برمجي نظيف.

تحويل كود jQuery

يمكنك الاستعانة بموقع youmightnotneedjquery.com وسيكون مفيد بشكل خاص للانتقال إلى Vanilla JS.

يعتمد الموقع على المقارنات وكل كود برمجي في مكتبة jQuery بما يناسبها في مكتبة JavaScript، باستخدام هذا المقال والموقع المذكور قد تتمكن بتحويل أكوادك البرمجية بكل سهولة.

تنفيذ أمر أثناء تحميل الصفحة

يتم تنفيذ الأمر أثناء تحميل الموقع بإستخدام Document Ready Function، فبالتالي قد يستغرق كود jQuery ثلاث أضعاف كود JavaScript. ويفضل في هذه الحالة استخدام أكواد JavaScript والتي بدورها لن تعيق تحميل الصفحة.

// كود جيكوري
$(function() {
  /* التابع المنفذ */
});

// كود فانيلا جافاسكربت
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
ready(() => {
  /* التابع المنفذ */
});

اختيار احد عناصر الموقع

هناك اختلاف كبير عن اختيار احد العناصر باستخدام Pure Javascript يجب عليك إنشاء حلقة JS loop إذا كنت تريد اختيار عناصر متعددة، ولكن في jQuery يمكنك تسجيل حدث بإستخدام مُحدِّد ويتم التطبيق على جميع العناصر المُختاره. 

// كود جيكوري
// عدة عناصر
let buttons = $('button.red-btn');
// عنصر واحد فقط
let button = $('button.green-btn');

// كود فانيلا جافاسكربت
// عدة عناصر
let buttons = document.querySelectorAll('button.red-btn');
// عنصر واحد فقط
let button = document.querySelector('button.green-btn');


مع parentNode تحصل على العنصر الأصلي، يمكن ايضاً الجمع بين العناصر الأصلية، مثال parentNode.parentNode

// كود جيكوري
let foobarParent = $('#foobar-container').parent();
// كود فانيلا جافاسكربت
let foobarParent = document.querySelector('#foobar-container').parentNode;

التعامل مع الحدث

للتعامل مع الحدث عليك البحث عن العنصر إن كان واحداً أو أكثر، بينما في jQuery لا يهم ذلك التحديد فـ جيكوري تقوم بتسجيل الحدث على أي حال، وهذا مثال باستخدام jQuery و JavaScript. 

// كود جيكوري
$('.link').click(function() {
  /* التابع المنفذ */
});

// كود فانيلا جافاسكربت
// عنصر واحد فقط
document.querySelector('#link').addEventListener('click', event => {
  /* التابع المنفذ */
});
// عدة عناصر
document.querySelectorAll('.link').forEach(link => {
  link.addEventListener('click', event => {
    /* التابع المنفذ */
  });
});


ملحوظة: لإلغاء حدث فإن وظيفة رد الحدث(callback) مهمة جداً في Vanilla JavaScript ولذلك إذا قمت بتسجيل حدث سيتوجب عليك إنشاؤه في وظيفة رد اتصال(callback function) منفصلة. 

// الغاء حدث باستخدام جيكوري
$('#foobar').off('click');

// الغاء حدث باستخدام فانيلا جافاسكربت
document.getElementById('foobar').removeEventListener('click', clickEvent);
function clickEvent(event) { }

تطبيق إجراء على العناصر

باستخدام jQuery تستطيع بكل سهولة تطبيق show() أو hide()، ولكن في JavaScript يتم التطبيق عن طريق اضافة خواص CSS.

// كود جيكوري
$('.foobar').show();

// كود فانيلا جافاسكربت
document.querySelectorAll('.foobar').forEach(element => {
  element.style.display = 'block';
});
// كود جيكوري
$('.foobar').hide();

// كود فانيلا جافاسكربت
document.querySelectorAll('.foobar').forEach(element => {
  element.style.display = 'none';
});

الاستعلام عن سمات العناصر وتغييرها

يعد استخدام الاستعلامات عن العناصر والتغيير فيها بنفس سهولة استخدام jQuery. فقط طريقة كتابة الكود مختلفة قليلاً. وفي الأمثلة القادمة طرق تمكنك من إنشاء فئة لتغيير العناصر toggleClass() بكل سهولة.

// كود جيكوري
if($('.foo').hasClass('bar')) {
  /* التابع المنفذ */
}

// كود فانيلا جافاسكربت
if(document.querySelector('.foo').classList.contains('bar')) {
  /* التابع المنفذ */
}
// كود جيكوري
$('.foo').addClass('bar');

// كود فانيلا جافاسكربت
document.querySelector('.foo').classList.add('bar');
// كود جيكوري
$('.foo').removeClass('bar');

// كود فانيلا جافاسكربت
document.querySelector('.foo').classList.remove('bar');

الاستعلام عن بعض السمات الاخرى يعد متشابه تماماً بين jQuery و JavaScript ألا إنه في بعض الأحيان يكون الإخراج(output) مختلفاً. 

// كود جيكوري
console.log($('.foobar').attr('checked')); // الإخراج: checked/undefined

// كود فانيلا جافاسكربت
console.log(document.querySelector('.foobar').checked); // الإخراج: true/false
// كود جيكوري
$('.foobar').html();
$('.foobar').html('Hello world!');

// كود فانيلا جافاسكربت
document.querySelector('.foobar').innerHTML;
document.querySelector('.foobar').innerHTML = 'Hello world!';

تحديد التعويضات والأبعاد

// كود جيكوري
let offset = $(window).scrollTop();

// كود فانيلا جافاسكربت
let offset = window.pageYOffset;
// كود جيكوري
$(window).width();

// كود فانيلا جافاسكربت
parseFloat(getComputedStyle(document.querySelector('html'), null).width.replace("px", ""));
// كود جيكوري
$('.foobar').width();

// كود فانيلا جافاسكربت
document.querySelector('.foobar').offsetWidth;
// كود جيكوري
$('.foobar').offset().top;

// كود فانيلا جافاسكربت
document.querySelector('.foobar').offsetTop;

إضافة أنماط للعناصر

تتيح لك JavaScript جودة عالية لإضافة الأنماط باستخدام تقنية Camel Case والتي ينتج عنها فهم الأمر لتنفيذ النمط دون الحاجة لكتابته بالشكل المتوقع مثال justify-content تصبح justifyContent. 

// كود جيكوري
$('.foobar').css('display', 'flex');
$('.foobar').css('margin-top', '3rem');
let displayProperty = $('.foobar').css('display');

// كود فانيلا جافاسكربت
document.querySelector('.foobar').style.display = 'flex';
document.querySelector('.foobar').style.marginTop = '3rem';
let element = document.querySelector('.foobar');
let elementStyle = getComputedStyle(element, null);
let displayProperty = elementStyle.display;

إضافة عناصر جديدة

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

// كود جيكوري
$('.foo').append('
bar
');

// كود فانيلا جافاسكربت
let bar = document.createElement('p');
bar.classList.add('child');
bar.id = 'child-id';
bar.innerHTML = 'bar';
document.querySelector('.foo').appendChild(bar);

// اضافة عنصر سكربت للعنصر جسم باستخدام فانيلا جافاسكربت
// من أكثر الأشياء التي يبحث عنها المطورين
let t = document.createElement('script');
t.type = 'text/javascript';
t.src = 'js/file/path';
document.querySelector('body').appendChild(t);

وهذا كان تحويل jQuery إلى JavaScript وهذه معظم الميزات التي تحتاجها.

هل الأمر يستحق العناء؟

من وجهة نظري، بالطبع نعم. بغض النظر عن أنه عندما يتم اعادة كتابة الكود باستخدام Vanilla JavaScript قد تجد بعض الأكواد التي لا حاجة لها وسيكون من الواجب ازالتها أو استبدالها بكود برمجي نظيف يتم تحميله بسرعة اكثر ثلاث مرات.

ما هي تجربتك التي أتممتها باستخدام jQuery، وهل انت مستعد للانتقال لـ JavaScript أم أنت سعيد بإستخدام jQuery؟
متشوق لسماع أرائكم وهل كان المقال مفيد بالنسبة لك؟
الاشتراك في: الرسائل (Atom)