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

التعريف بالمشروع هذه سلسلة من الدّروس مُوجّهة للمبتدئين بتطوير الويب، تهدف إلى تعليم استخدام بيئة Node.js وإطار العمل Express من خلال بناء مدوّنة متكاملة تسمح للكُتَّاب بإضافة التّدوينات وتسمح للزوّار بإنشاء حسابات والتّعليق على التُدوينات. لن تقتصر هذه السّلسلة على شرح Express، بل ستقدّم شرحًا (نأمل أن يكون وافيًا) للعديد من المفاهيم المتعلّقة بتطوير الويب من جهة الخوادم (Server-side web development)، حيث سنتطرّق إلى تثبيت خادوم MySQL مع شرح استخدامه في Node.js بالإضافة إلى آليّة عمل بروتوكول HTTP ونظام إدارة المستخدمين وإنشاء الجلسات، في نهاية السّلسلة سنُلقي نظرة على مواضيع تحسين الأداء والأمان قبل نشر المشروع على الويب. في نهاية هذه السّلسلة من المفترض أن يكون المتعلّم قادرًا على التّعامل مع بيئة Node.js بسهولة ويمكنه إنشاء الخوادم وقواعد البيانات وإنشاء برامج تصل بين هذه الأجزاء. إذا كنت قادمًا من عالم PHP، فستكون هذه السّلسلة مناسبة لك أيضًا على حدٍّ سواء. ‏Node.js لعلّك سمعت من قبل بـNode.js، لكنّها ما تزال غامضةً بشكل أو بآخر خصوصًا بين المطوّرين العرب، والسبب ربّما يكون ضعف الرّغبة في التّغيير أو صعوبة تأمين استضافة مشاريعها مقارنةً باستضافة مشاريع PHP أو غير ذلك من الأسباب. Node.js هي بيئة تطوير تسمح لنا بكتابة البرامج وتنفيذها باستخدام JavaScript، اللّغة الّتي كانت حتى وقت قريب حبيسة المتصفّح؛ لكنّها لم تعد كذلك بل أصبحت تُستخدم في كتابة مشاريع الويب وتطبيقات سطح المكتب وحتى التّطبيقات الّتي تعمل في الطّرفيّة، وربّما يعود الفضل في ذلك إلى Node.js ذاتها. إن كنت استخدمت PHP مع Apache لإنشاء موقع من قبل، فستجد أن Node.js تستطيع القيام بالمهمّة ذاتها وأكثر، وبأسلوب أبسط وأكثر تنظيمًا وتوفيرًا للوقت. ‏Express لعلّ Express أهمّ مكوّنات مشروعنا، وعليه سينصبّ معظم شرحنا. Express باختصار هو إطار عمل لمشاريع الويب يعمل في بيئة Node.js، فهو بالنّسبة لـNode.js يقابل Laravel بالنّسبة لـPHP، وإن كان يختلف عنه كثيرًا في الفكرة الّتي يقوم عليها، إذ أنّ Express يلتزم بفلسفة Node.js الّتي تهدف إلى تجزئة المشاريع الضّخمة إلى وحدات، لن تجد في Express ذاته وحدات تتعامل مع قواعد البيانات أو تتولّى إدارة الجلسات وحماية كلمات المرور وما إلى ذلك، بل عليك أن تعتاد أنّ لكلّ شيء في Node.js وحدة مستقلّة يمكن استيرادها واستخدامها مع الوحدات الأخرى لنحصل على مشروع يسهل تطويره وصيانته دون الاعتماد على مكوّن ضخم من جهة مُطوّرة واحدة قد يكون مصير تطويره إلى الإهمال في المستقبل. يتولّى Express إدارة الرّوابط وتوجيهها فقط، ويمكن توسيعه باستخدام ما يُسمّى "البرامج الوسيطة" (middleware) التي تُشبه إلى حدّ ما إضافات المتصفّح التي تستخدمها، فهي تضيف المزيد من المزايا إلى الوظيفة الرئيسيّة لـExpress، وسنجد مثلاً برنامجًا وسيطًا يحفظ الجلسات باستخدام الكعكات (cookies) وآخر يخزّن نتائج الاستعلامات بشكل مؤقّت لتسريع استجابة الخادوم... من الواجب أن نذكر أنّ Express ليس إطار العمل الوحيد المتوفّر في Node.js، ولكنّه قد يكون الأشهر لبساطته الشّديدة وهيكليّته الممتازة. يبدو المستقبل واعدًا لمشاريع مثل Koa‏ الّذي يستفيد من المزايا القادمة إلى الإصدارات المستقبليّة من JavaScript لتحسين كتابة الشّيفرة أكثر. يُشرف على تطوير Koa الفريق المطوّر لـExpress ذاته. ‏MySQL سنستخدم لغة قواعد البيانات الشّهيرة SQL (بنكهة MySQL إن جاز التّعبير) لتخزين التّدوينات والتّعليقات ومعلومات المستخدمين، إن كنت لا تعرف الكثير عن SQL فلا بأس، لأنّ صياغتها غاية في السّهولة وتكاد تُشبه جمل اللغة الإنكليزيّة الحقيقيّة! تثبيت Node.js للحصول على آخر إصدار من Node.js: إذا كنت تستخدم Windows أو Mac فتوجّه إلى الصّفحة الرئيسية لموقع Node.js سيقوم الموقع بالتّعرّف على نظامك وبنيته وانتقاء برنامج التّثبيت المناسب، ليس عليك سوى الضّغط على زر Install لتنزيل برنامج التّثبيت ثم فتحه ومتابعة الخطوات. إذا كنت تستخدم Arch Linux، فستجد أحدث إصدار من Node.js ضمن مستودعات مستخدمي Arch (‏AUR). ويمكن تثبيته بالأمر التالي إذا كنت تستخدم yaourt (الأمر مشابه بالنّسبة لكلّ البرامج التي توفّر وصولاً إلى AUR‏? yaourt -S nodejs --noconfirm سيُطلب منك إدخال كلمة المرور إلى مستخدمك أو كلمة المرور إلى المستخدم الجذر (إن وُجدت). كما يمكن التّثبيت بالطّريقة المشروحة في الخيار التّالي. إذا كنت تستخدم توزيعة Linux أخرى، فقد تجد إصدارًا قديمًا من Node.js ضمن مستودعات توزيعتك، لذا يُنصح بتثبيت Node.js عن طريق مُدير إصدارات Node.js المتوفّر على GitHub، ويتمّ التثبيت بالطّريقة التالية: قم بتنزيل آخر نسخة من مدير إصدارات Node.js عن طريق زر Download ZIP في صفحة المشروع على GitHub‏. فكّ ضغط الملفّ الذي قمت بتنزيله انتقل بالطّرفيّة إلى مسار المجلد الناتج عن العمليّة السابقة، مثلاً: cd ~/Downloads/n-master ثم قم بتنفيذ أمر بناء المشروع: sudo make install قم بتثبيت آخر إصدار مستقرّ من Node.js مستخدمًا الأمر n الذي يوفّره مدير إصدارات Node.js: sudo n stable سيُطلب منك إدخال كلمة المرور إلى مستخدمك أو كلمة المرور إلى المستخدم الجذر إن وُجدت. من فوائد مُدير إصدارات Node.js إمكانيّة التبديل بشكل سريع بين عدّة إصدارات من Node.js، فقد ترغب أحيانًا بتجربة بعض المزايا المتوفّرة في إصدار غير مستقرّ (مثل v0.11 الذي يتضمّن بعضًا من مُكوّنات ECMAScript 6) مُستخدمًا الأمر n latest، ولكنّك ترغب بالعودة للعمل على مشاريع جادّة ضمن إصدار مستقرّ. ولهذا يمكنك استخدام الأمر n stable. يمكن أيضًا تثبيت الإصدارات الحديثة من Node.js على Ubuntu والتّوزيعات الأخرى باتّباع التّعليمات الرّسميّة المتوفّرة على صفحة Node.js على GitHub. للتحقّق من تثبيت Node.js اكتب الأمر التالي في الطّرفيّة (أو سطر أوامر Windows): node -v لتحصل على نتيجة برقم إصدار Node.js الذي قمت بتثبيته، مثل v0.10.33. إن كانت النتيجة تُفيد بعدم وجود الأمر مثل bash: node: command not found (على Linux) أو node is not recognized as an internal or external command... (على Windows)، فتحقّق من اتّباع الخطوات السّابقة مجدًدًا. إنشاء المشروع لنبدأ العمل بشكل نظيف، أنشئ مُجلّدًا جديدًا في مكان ما في جهازك وانتقل إليه باستخدام الطّرفيّة، سأقوم بإنشاء مجلّد ضمن مسار مُستخدمي /home/f/‏ وأسمّيه my-blog، ثم سأنتقل إليه باستخدام الأمر cd (اختصارًا لـchange directory) (الذي يتطابق في Linux وMac وWindows): cd /home/f/my-blog في Windows، قد يكون الأمر مُشابهًا لهذا: cd C:\Users\f\my-blog سنستخدم الأمر init الذي يوفّره مُدير حزم Node‏ (npm) لإنشاء مشروع جديد، افتح الطّرفيّة (سطر الأوامر في Windows) واكتب الأمر التالي: npm init سيطرح البرنامج عليك مجموعة من الحقول لتعبئتها: ‏name: اسم المشروع، ويقترح npm اسم المجلد الحالي كاسم للمشروع، ويمكنك الأخذ بالاقتراح بترك الحقل فارغًا وضغط Enter. ‏version: إصدار المشروع (يمكنك تركه كما هو). ‏description: وصف للمشروع. ‏entry point: الملفّ الرئيسيّ الذي ينطلق منه المشروع، يمكنك تركه كما هو وإنشاء الملف index.js لاحقًا. ‏test command: الأمر الذي يجب أن ينفّذه npm عندما يطلب منه تنفيذ الاختبارات على المشروع، أي عندما ينفذ الأمر npm test ضمن مجلد المشروع الرئيسيّ. سنتركه فارغًا الآن. ‏git repository: مسار مستودع git الذي ستستخدمه لإدارة المشروع، يمكن أن يكون رابط http://‎ أو git://‎ ويمكن تعديله لاحقًا. ‏keywords: الكلمات المفتاحية للمشروع مفصولة بفاصلة لاتينية (,)، أمثلة: blog, mysql, expressjs, tutorial. ‏author: كاتب المشروع. ‏license: رخصة المشروع، يمكن استخدام أي رخصة مثل GPLv2 أو MIT. بعد الانتهاء سيعرض البرنامج عليك المعلومات التي أدخلتها وهي جاهزة للكتابة إلى ملفّ package.json، اكتب yes لكتابة الملفّ. الملفّ package.json هو نقطة الانطلاق في كلّ مشاريع Node.js، ويُستخدم للتعريف بالمشروع ووصفه عند نشره في سجلّ حزم npm‏، والأهم من ذلك أنّه يستخدم لحفظ ما يعتمد عليه المشروع من حزم مع أرقام الإصدارات المطلوبة لكلّ حزم؛ ومن خلال هذا الملفّ يمكن إستنساخ المشروع وإعادة تثبيت المتطلّبات للتعديل عليه في وقت آخر أو من قبل أشخاص آخرين. تثبيت متطلّبات المشروع سيعتمد مشروعنا على إطار العمل Express كما هو واضح، بالإضافة إلى قواعد بيانات MySQL لتخزين التدوينات والمستخدمين وتعليقاتهم، سنحتاج أيضًا إلى بعض المتطلّبات الأخرى التي سنثبّتها في وقت الحاجة إليها. لتثبيت أحدث إصدار من express وحفظه كمتطلّب ضمن ملفّ package.json، نفّذ الأمر التّالي: npm install express --save ملاحظة: سنعتمد الإصدار الرّابع في هذه السلسّلة لكونه أحدث إصدار في وقت كتابتها، للتأكّد من تثبيت الإصدار الرّابع حتّى بعد صدور إصدارات أحدث، يمكنك استخدام الأمر: npm install express@4.10.* --save يحتاج تثبيت MySQL إلى خطوتين: الأولى تثبيت الخادوم الذي يوفّر قاعدة البيانات، ويُنجز بطريقة مختلفة لكل نظام تشغيل: في Windows وMac OS X، يمكن تثبيته بتنزيل برنامج التّثبيت المناسب لإصدار النّظام وبنيته من الموقع الرّسمي ثمّ اتّباع خطوات التّثبيت كما في تثبيت أي برنامج آخر. في Arch Linux، أنصح باستخدام MariaDB، وهي بديل مطابق تمامًا لـMySQL ويحلّ محلّه بدون الاضطرار لتعديل أي جزء من الشيفرة، ويمكن تثبيته من خلال مستودعات مستخدمي Arch بالأمر التّالي: yaourt -S mariadb --noconfirm في توزيعات Linux الأخرى مثل Ubuntu وFedora، فقد تتوفّر MariaDB وMySQL في المستودعات الرّسميّة ويمكن تثبيتها باستخدام apt-get وyum. الخطوة الأخرى تتضمّن تثبيت عميل MySQL (أو ما يسمى MySQL client)، وهو الجزء الذي سيتواصل مع الخادوم ليجلب نتائج الاستعلام من قاعدة البيانات ويوفّرها لمشروعنا، وفي حالتنا هذه ليس سوى وحدة Node.js يمكن تثبيتها بسهولة عبر npm install واستخدامها ضمن مشروعنا؛ تتوفّر العديد من الوحدات التي تقدّم إمكانية التواصل مع خادوم قواعد بيانات MySQL، ومن أفضلها الوحدة mysql‏ التي يمكن تثبيتها بتنفيذ الأمر: npm install mysql --save نصيحة: يمكن تثبيت الحزمتين بأمر واحد: npm install express mysql --save بعد تثبيت الحزمتين، سنلاحظ إضافة حقل جديد في ملفّ package.json يوضّح متطلّبات المشروع التي حفظناها إلى الآن (قد تختلف أرقام الإصدارات لديك): "dependencies": { "express": "^4.10.6", "mysql": "^2.5.4" } إنشاء قاعدة البيانات وإدخال بعض التّدوينات كعيّنة وجود بعض التدوينات سيساعدنا في بناء الواجهة ورؤية التغييرات بسهولة أكبر، لذلك سنقوم بإنشاء قاعدة البيانات وإدخال بعض التّدوينات إليها قبل كلّ شيء. لإنشاء قاعدة البيانات وإدخال التدوينات، سنقوم بالتواصل مع الخادوم عبر الطّرفيّة، مستخدمين البرنامج mysql الذي يتمّ تثبيته تلقائيًّا عند تثبيت خادوم MySQL أو MariaDB. افتح الطّرفية ونفّذ الأمر: mysql -u root ملاحظة: إن اخترت اسمًا للمستخدم وكلمة مرور مختلفين أثناء التثبيت، فيمكن إدخالها بالطريقة الآتية (سيطلب منك إدخال كلمة المرور إلى هذا المستخدم): mysql -u username -p ستظهر شاشة مشابهة لهذه: ملاحظة: إن واجهتك مُشكلات في بدء البرنامج mysql، جرّب إعادة تشغيل النّظام. ملاحظة (2): يمكنك الاستغناء عن استعمال صدفة MySQL إذا كنت قد ثبّتت PHPMyAdmin على جهازك، حيث بإمكانك إدخال الأوامر ذاتها في مربّع الاستعلامات. في صدفة MySQL هذه يمكننا إدخال أوامر MySQL ليقوم الخادوم بتنفيذها على الفور. سنقوم بإنشاء قاعدة بيانات المدوّنة، وسنسمّيها myblog: CREATE DATABASE myblog; النتيجة التّالية دليل على نجاح التنفيذ: Query OK, 1 row affected (0.00 sec) اتّصل بقاعدة البيانات الجديدة بالأمر: connect myblog لنقم بإنشاء جدول للمستخدمين وآخر للتدوينات ثم لندخل مستخدمًا مع 4 تدوينات كتبها في أيام مختلفة، يمكنك نسخها ولصقها في صدفة MySQL فحسب: CREATE TABLE `users` (id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50), password VARCHAR(500) NOT NULL, full_name VARCHAR(50), is_author BOOLEAN DEFAULT , UNIQUE INDEX (username)); INSERT INTO `users` (username, password, full_name, is_author) VALUES ("admin", "$2a$08$Z3FpAQwRgj7W0i71TtizFO7QDjpsIRNJfHh6mLgRJRJBtheKJh1Tu", "admin", 1); CREATE TABLE `posts` (id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, title VARCHAR(100), body LONGTEXT, date TIMESTAMP, author_id INT, slug VARCHAR(50), UNIQUE INDEX (slug), FOREIGN KEY (author_id) REFERENCES `users` (id)); INSERT INTO `posts` (title, body, date, author_id, slug) VALUES ("مرحبًا بالعالم!", "مرحبًا بكم في مدوّنتي المتواضعة!", "2014-12-29", 1, "hello-world"); INSERT INTO `posts` (title, body, date, author_id, slug) VALUES ("اقتباسات (1)", "الغني لو سئل عن تحسين العمل والحياة فسوف يقول: نحن نعرف أن البؤس غيرمفرح والواقع أن البؤس مادام بعيداً عنا فإننا نتسلح بفكرة أنه غير مفرح. ولكن لا تتوقع منا أن نفعل أي شيء بصدده. نحن آسفون لطبقاتكم الدنيا مثل مانحن آسفون لقطة جرباء...غير أننا سنقاتل كالمردة ضد أي تحسين لظرفكم. نحن نشعر انكم مأمونون أكثر وأنتم في حالكم هذا. إن الواقع الراهن يناسبنا ولسنا مستعدين لمخاطرة تحريركم حتى بساعة إضافية في اليوم هكذا يا إخوتي الأعزاء إن كان عليكم ان تعرقوا لدفع رحلاتنا إلى إيطاليا فلتعرقوا ولتحل عليكم اللعنة ― جورج أورويل، متشردًا في باريس ولندن", "2014-12-30", 1, "quotes-1"); INSERT INTO `posts` (title, body, date, author_id, slug) VALUES ("اقتباسات (2)", "التليفزيون يُغرقك في بحر من الأصوات والألوان بحيث لا تجد الوقت الكافي لتفكر أو تنتقد... إنه يقدم لك الأفكار الجاهزة ولا يسمح لك بالانتقاد الذي يسمح به الكتاب. ― راي برادبري، فهرنهايت 451", "2014-12-31", 1, "quotes-2"); INSERT INTO `posts` (title, body, date, author_id, slug) VALUES ("اقتباسات (3)", "أستطيع أن أقول لك يا بنيّ إنّ السّعادة ينبوع يتفجّر من القلب، لا غيث يهطل من السّماء، وأنّ النّفس الكريمة الرّاضية البريئة من أدران الرّذائل وأقذارها، ومطامع الحياة وشهواتها، سعيدة حيثما حلّت. [...] فمن أراد السّعادة فلا يسأل عنها المال والنّسب، وبين الفضّة والذّهب، والقصور والبساتين، والأرواح والرّياحين، بل يسأل عنها نفسه الّتي بين جنبيه فهي ينبوع سعادته وهنائه إن شاء، ومصدر شقائه وبلائه إن أراد. ― مصطفى لطفي المنفلوطي، الفضيلة", "2015-01-01", 1, "quotes-3"); لكلّ سطر في جدول التّدوينات الحقول التالية: العنوان title ونص التدوينة body وتاريخها date ومُعرّف الكاتب author_id الذي يُشير إلى أحد الكُتّاب المُسجلّين في جدول المستخدمين users، ثمّ slug وهو العنوان بالإنكليزية الملائم لاستخدامه ضمن رابط التّدوينة مثل hello-world في http://myblog/posts/hello-world. نحن الآن جاهزون للعمل! في الدّرس القادم سنبدأ بإنشاء الصّفحة الرّئيسيّة لمدوّنتنا، والّتي ستعرض التّدوينات الّتي أضفناها لتوّنا.

لربما لاحظت مُؤخّرا أنّ CSS في تطور مستمر، وإلى الأفضل بالطبع. فمن جهة لدينا العديد من المُميّزات الجديدة (مثل القواعد الجديدة @rules وأشباه الأصناف المطورة) ونظم بناء الصّفحات وتقسيمها (مثل flexbox و Grid system). ومن جهة أخرى لدينا بعض الأدوات التي تُتيح لنا التّلاعب بالأشكال والصور مباشرة من المتصفح، وأنا أحب هذه الأمور، ومتأكد من أنّك تُحبّها أيضًا، وفي هذه المقالة سنعرض بعضا منها. سنتحدث عن بعض الأمور التي لا تحظى بالكثير من الشّهرة عادة، هذه الأمور المجهولة ستزيد من إنتاجيتك بشكل مُعتبر، وستجعلك تُفكّر بطرق مُختلفة لحلّ المشاكل اليومية. بعض هذه الأمور هي المُحدّدات Selectors الجديدة الخاصة باللغة، والبعض الآخر عبارة عن دوال، وأشباه أصناف pseudo-classes جديدة. وحدات القياس النّسبيةبحكم أنّنا في 2015 فلابد وأنّك قد تعاملت من قبل مع الوحدات النّسبية em والنّسب المئوية. ولذا فأنا واثق من أنّك وقعت في المُشكلة الشّائعة والتي تكمن في استخدام هذه الوحدات ضمن الوراثة. سأشرح الأمر بمثال بسيط. من الشّائع مُؤخّرًا أن يتمّ استعمال حجم خط ثابت في الصّفحة، ومن بعدها استعمال وحدات القياس النّسبية لتحديد حجم الخطّ لبقية العناصر في الصفحة. في CSS سيبدو الأمر كالتالي: html { font-size: 10px; } p { font-size: 1.4em; }إلى غاية هذه اللحظة، كل شيء يسير على ما يرام. لكن تظهر المشكلة عندما تريد أن تحدد حجم خط مُختلف لعنصر ما داخل العُنصر السّابق. لنجرب المثال التالي: The cat sat on the <span>mat</span>.إذا أردت أن يكون حجم خط span أصغر مثلا، وليكن مثلًا 1.2em، فما الذي ستفعله؟ تحضر الآلة الحاسبة وتحسب نتيجة 1.2/1.4؟ لتحصل على شيء كهذا: p span { font-size: 0.85714em; }مشكلة الوراثة ليست محدودة في em فحسب. فإذا كُنت تستخدم النّسب المئوية فالقيمة عادة منسوبة إلى العنصر الحاوي (الأب) وليس إلى حجم الصّفحة. لنضرب مثالًا بسيطًا، ولنقل أنك تملك عنصرًا بارتفاع يُقدّر بـ75% من الصفحة، وهذا العنصر يملك بداخله عنصرًا آخر، ونحن نريد من العنصر الابن أن يكون بارتفاع 40% من الصفحة، في هذه الحالة عليك أن تعطيه قيمة 53.33333%. الأمر ليس مثالّيًّا إطلاقًا. القيم المنسوبة إلى أساس ثابتكالعادة، لكل مشكلة حل. في حالتنا تم تقديم وحدة جديدة تُدعى rem. هذه الوحدة هي وحدة نسبية، ولكنها منسوبة إلى قيمة ثابتة وليس إلى حاويها. هذه القيمة هي حجم الخط في العنصر الأساسي في الصفحة (في حالة HTML فهذا العنصر هو دوما وسم html ). في مثالنا السابق، استعملنا 10px كحجم الخط في الصفحة، سنرى كيف يمكن لـrem أن تساعدنا: p { font-size: 1.4rem; } p span { font-size: 1.2rem; }الآن كلاّ من قيمة التصريحين منسوبة إلى حجم الخط المبدئي، وهذا أفضل من ناحية التّحكم والاستخدام. خُصوصًا إذا كنت تملك حجمًا مبدئيًّا بسيطًا مثل 10px أو 12px. الأمر شبيه باستخدام وحدة البكسل مُجدّدًا، عدى أنها قابلة للتوسع. هذه الخاصّيّة مدعومة بشكل جيّد من المُتصفّحات. كل المُتصفّحات المُتطوّرة إلى جانب IE9 تقوم بدعمها. لكن هناك مشاكل بسيطة في الدعم، فمُتصفّح IE لا يدعمها في حال ما إذا استخدمتها داخل الخاصّيّة المُختصرة font ويتم تجاهل التّصريح كاملًا. تستطيع قراءة المشاكل المعروفة هنا في خانة Known Issues في الأسفل Can I use rem. وحدات القياس المنسوبة إلى النّافذة (Viewport)إلى جانب وحدة rem، هناك وحدات جديدة أخرى. هذه الوحدات أتت لتحلّ مُشكلة النّسب المئوية والوراثة. هذه الوحدات تعمل بطريقة مُشابهة لـrem عدى أنّ الأساس التي تعتمد عليه هو أبعاد النّافذة أو شاشة الجهاز. الوحدات الرّئيسية هي vh (التي ترمز إلى viewport height) و vw (التي ترمز إلى viewport width) وهي منسوبة إلى ارتفاع وعرض النّافذة. الوحدتان منسوبتان إلى أبعاد النّافذة حيث أن قيمة واحدة تقدر بـ 1 بالمئة من أبعاد الشّاشة. أيّ `1vw = 1%’. هذا مثال بسيط لنشرح به الأمر: div { height: 50vh; }في هذا المثال، ارتفاع العنصر سيكون بالتّحديد نصف ارتفاع النافذة، حيث أنّه -كما أسلفنا- 1vh = 1% أيّ أن 50vh = 50%من ارتفاع النّافذة. قيمة الوحدة -كما سبقت الإشارة إليه- منسوبة إلى أبعاد النّافذة، فإذا تغيّر حجم النافذة ستتغير معه قيمة الوحدة. أُنشئت هذه الوحدة لتحل مشكلة النّسب المئوية في الوراثة، حيث أنّ10vw ستبقى دومًا منسوبة إلى حجم النّافذة مهما كان حجم الحاوي. هناك أيضا وحدة vmin والتي تُساوي أصغر قيمة من أيّ من vh أو vw، إلى جانب وحدة vmax التي تقوم بالعكس أيّ أكبر قيمة من أيّ منهما. دعم المتصفحات جيد، فكل المتصفحات إلى جانب IE9 تقوم بدعم كل من vh وvw. دعم وحدة vmin جيّد أيضًا، على عكس وحدة vmax فهي غير مدعومة في كل إصدارات IE. هناك بعض المشاكل في chrome في الإصدارات التي سبقت 34 (عند استعمال الوحدة داخل border وبعض التصريحات الأخرى) Can I use Viewport units. القيم المحسوبةخلال عملك على موقع مُتجاوب، ستصادفك مشكلة شائعة وهي الخلط بين الوحدات. كمثال على ذلك: أنت تريد أن تُسند إلى عنصر ما حجمًا بالنّسب المئوية، ولكنك تريد أن تُضيف له حاشيّة بقيمة ثابتة (عبر البكسل)، شيء كهذا مثلا: div { margin: 20px; width: 33%; }إن كنت تستخدم قيم padding و border فحسب في تقسيم عناصرك في الصّفحة، فتستطيع تخطّي المُشكلة السّابقة عبر استخدام box-sizing: border-box ولكن هذه الخاصّيّة لن تُساعدك في حال كنت تستخدم الحواشي margins. لذا تم توفير دالة تُدعى بـ calc(). هذه الدّالة تسمح لك بالقيام بعمليات حسابية على مختلف الوحدات. شاهد هذا المثال: div { margin: 20px; width: calc(33% - 40px); }تستطيع استعمال الخاصّيّة في أيّ مكان تريد، ولو داخل نفسها. انظر للمثال في الأسفل: width: calc(calc(50% - 4em) + 4vmin);هذه الخاصّيّة مدعومة بشكل جيد، كل الإصدارات الحديثة من المُتصفّحات إلى جانب الإصدار 9 من IE تدعمها (هناك بعض الاستثناءات التي يمكنك قراءتها في خانة known issues على Can I use calc()). تحميل مجموعة مُعيّنة من الأحرفالأداء هو عامل رئيسي في بقاء الزّائر في موقعك من عدمه. وسرعة تحميل الموقع هي أحد هذه العوامل. والآن مع انتشار الهواتف الذّكيّة وشبكات الإنترنت اللاسلكية (شبكات 3G التي من مشاكلها التّدفّق البطيء) تدفع المطور للتّحسين من سرعة الموقع أكثر وأكثر. القاعدة الرئيسية في تقليل وقت التحميل هي التقليل من حجم وعدد الملفّات الخارجية، والخاصيّة التّالية تقوم بهذا الأمر. الخاصية الجديدة تُدعى unicode-range وهي تأخذ مجالًا مُعيّنًا من unicode كقيمة (unicode هو إعطاء كل محرف قيمة له على مجال ما، مثلا الأحرف العربية تقع في المجال 0600—06FF وتقدر بحوالي 255 رمز، وكل ترميز يخصّ محرفًا). هذه الخاصّيّة تُضاف إلى تصريح @font-face. وعندما يقوم المُتصفّح بجلب الخط، سيقوم بجلب الحُرُوف المُحدّدة فحسب، ويتم التّخلّص من الحروف غير المرغوب فيها. الأمر مُفيدٌ جدًّا في الخطوط الكبيرة جدًّا مثل Helvetica الذي يُقدّر حجمه بـ500kbs ويحتوي أغلب لغات العالم. في هذا المثال سنقوم بسحب الحروف “عـ ، ـلـ، ـم” (يجب التّنويه إلى أنّ حرف العين المُنفصل ‘ع’ يملك رمزًا مُستقلّا عن حرف العين في أول الكلمة ‘عـ’ والذي يملك رمزًا مُستقلًّا عن نفس الحرف في نهاية الكلمة أو في وسطها، وهذا الأمر ينطبق على كلّ الحروف. تستطيع معرفة ترميز كل حرف من هنا). @font-face { font-family: foo; src: url('helvetica.ttf'); unicode-range: U+FECB,U+FEE0,U+FEE2; }في هذا المثال سنقوم بسحب الحروف العربية فقط عبر مجال كامل: @font-face { font-family: foo; src: url('helvetica.ttf'); unicode-range: U+0600-06FF; }سيُقلّل هذا من حجم الخط من 500kb إلى حوالي 30kb وهذا تحسن مُمتاز جدًّا. دعم المُتصفّحات ليس جيّدًا بما فيه الكفاية حاليًّا، الخاصية مدعومة من طرف chrome و من طرف Safari ومتصفح فيَرفُكس سيدعم الخاصية ابتدءًا من الإصدار 36، كما أنّها مدعومة من طرف IE9+ لكن يتم تجاهلها إذا استُخدمت u على شكل صغير (lowercase). Can I use Font unicode-range subsetting أشباه الأصناف الجديدة (pseudo-classes)إلى جانب كل تلك الأمور الجميلة التي رأيناها، فأنا أجزم أنّ أشباه الأصناف هي أجمل ما تم إصداره، عبر تحديد أنماط مُعيّنة من خلالها أصبحنا نملك القدرة على تحديد عناصر تتبع نمطًا مُعيّنًا وهذا من شأنه تقليل كمية الجافاسكربت المُستخدمة. شبه صنف التّجاهل (negation pseudo-class)شبه صنف التجاهل الجديد not() هو صنع رائع جدا إذا عرفت أين تستخدمه. لتستخدمه عليك أن تُمرّر مُحدّدًا (على شرط أن لا يكون مُركّبًا). سيتم تطبيق كل التأثيرات المُرادة على مجموعة العناصر هذه عدى العُنصر الذي تمّ تمريره للصّنف. فلنلق نظرة على المثال التّالي: لنقل أن لديك مجموعة من العناصر، وتريد أنّ تغيّر لون كل عنصر ذي مرتبة زوجية ما عدى العنصر الأخير، ستقوم بشيء كهذا: li { color: white;} li:nth-child(even) { color: red;} li:last-child { color: white;}لكن عبر مُحدّد التّجاهل تستطيع القيام بهذا عبر الشكل التالي li { color: white;} li:nth-child(even):not(:last-child) { color: red;}الخاصّيّة ليست عجيبة، فكما رأيت تستطيع أن تعيش بدونها، ولكنك ستقع في حالات تكون فيها الخاصية مُفيدة جدًّا. الخاصّيّة مدعومة بشكل جيد من طرف المُتصفّحات الحديثة ومن طرف IE9+. شبه صنف المُطابقة (matches-any pseudo-class)شبه صنف matches() يقبل مُحدِّدًا (selector)، أو مُحدِّدًا مُركّبًا، أو مجموعة من المُحدّدَات. لكن ما الذي يفعله؟ إنّه مفيد للقيام بتأثير ما على مجموعة من العناصر. كمثال، تخيل أنّه لديك مجموعة من وسوم الفقرات <p> في أماكن مختلفة من الصّفحة، وأنت تريد التّأثير على مجموعة مُعيّنة منها، قد تقوم بالأمر التّالي: .home header p, .home footer p, .home aside p { color: #F00; }لكن مع matches() تستطيع اختصار الأمر السّابق عبر إيجاد الأمور المشتركة في ما سبق. في مثالنا كل سطر يبدأ بـ .home وينتهي بـ p، لذا نستطيع استخدام matches() لتحديد كل العناصر الموجودة بينهما. لم تفهم كيف سنقوم بذلك؟ لابأس، هذا ما سنفعله: .home :matches(header,footer,aside) p { color: #F00; }شبه الصنف هذا هو جزء من CSS4 لذا دعمه ليس قويًّا كالبقية. حاليًّا تستطيع استخدامه مع chrome و safari بشكل عادي وفي IE9+ تحت الاسم matchesSelector وفي فيَرفُكس أيضًا، من الأفضل أخط الحيطة واستخدامه مع -moz- و -webkit- قبل اسمه. Can I use matches() DOM method إذًا، ما رأيك في ما سبق؟الرائع بشأن هذه الخواص أنها تحل مشاكل فعلية في حياتنا اليومية، انطلاقًا من المُحددّات المُتكرّرة المُزعجة في CSS إلى طرق أكثر رُقيًّا في بناء المواقع التجاوبية. سبق وأن استخدمت العديد من هذه الخواص كثيرا وسأستخدمها مُجدّدًا. الميزات الجديدة الأخرى مثل المُرشِّحات (filters) الخاصّة بالصّور قد تكون أجمل ولكن استخدامها محدُود على عكس الميزات التي استعرضناها. كل واحدة منها تستطيع جعل حياتك أسهل بشكل أكثر، ولكن لا تتوقّف هنا. هناك الكثير لتتعلمه فلا تتوقف عن البحث. ترجمة -وبتصرّف- للمقال Learning to Love the Boring Bits of CSS لصاحبه Peter Gasston