لنبدأ بملاحظة: أنا أحب بعض الأطر. كبديل لإعادة اختراع العجلة تمامًا ، أو تصميم زر من الصفر ، مرة أخرى ، من الصعب التغلب على حل شامل لاحتياجات HTML / CSS / JavaScript الأساسية.
المشكلة هي ، حسنا ، هذا ما قلته هناك. أطر العمل ليست حقا حل الكل في واحد هم؟ على الرغم من أننا قد جعلناهم نمطيًا وسهلًا في التخصيص ، فإنهم في بعض الأحيان لا يملكون ما نحتاجه.
من المستحيل تضمين كل مقتطف HTML ممكن أو نمط عنصر أو وظيفة جافا سكريبت التي قد يحتاجها المرء. ولكن بعد ذلك ، يمكن أن يكون هذا أيضًا أمرًا جيدًا.
قد يحتوي إطار العمل على الكثير من الأشياء التي لا نحتاجها. شملت بعض أكثر أعمالي إحباطًا على الإطلاق البحث يدويًا عن طريق ملفات CSS الضخمة في Bootstrap لتغيير بعض الشفرات الصغيرة التي كانت تعيث فسادًا في تصميمي.
فقط استفد من مكون شريط التنقل في Bootstrap على سبيل المثال. إنه أمر رائع ، إنه يعمل بشكل لا تشوبه شائبة ، ويبدو جيدًا. ولكن إذا حاولت تغيير الطريقة التي تبدو عليها بأي طريقة كبيرة ، فعليك تغيير مجموعة كبيرة من الأنماط ، ويستغرق الأمر بعض الوقت للعثور عليها كلها. إذا كانت مجرد قائمة أفقي من الارتباطات الموجودة أعلى الصفحة التي تريدها ، فقد يكون من الأسهل كتابة واحدة جديدة من البداية.
ولكن ، والأطر الأكثر شعبية هناك ، Bootstrap على وجه الخصوص ، لديها الكثير من أدوات التخصيص ، أليس كذلك؟ نعم ، وهذا شيء عظيم ، لكن الخيارات الافتراضية لا توفر لك مساحة كافية للعمل.
ببساطة ، إذا كان تركيزك على الإبداع ، فمن المحتمل ألا يكون إطار العمل الهائل هو الطريق. بالتأكيد ، يمكنك اختراقه ، لكن ذلك سيستغرق الكثير من الوقت.
مشكلة أخرى واجهتها: عدم توافق جافا سكريبت. كرجل ليس حقا مبرمج ، كان هذا مؤلما.
على وجه التحديد ، كان هناك هذا مرة واحدة عندما حاولت دمج اثنين من الإضافات jQuery في التصميم على أساس المؤسسة. هذه ليست صفقة منفردة من تلقاء نفسها ، ولكن المزيد من الوقت المستغرق في تصحيح الأخطاء.
بالطبع ، كان هذا بعض الوقت في العام الماضي. أنا بصراحة لا أعرف ما الذي سيحدث إذا حاولت الشيء نفسه مع الإصدارات الجديدة من نفس الإطار والمكونات الإضافية ، ولكن لا يزال هناك شيء للنظر.
باختصار ، هناك أوقات تكون فيها الأطر ببساطة غير جواب. هذا هو المكان الذي تأتي فيه مجموعة الأدوات ، ويجب أن يكون لديك واحد.
مجموعة الأدوات ، في سياق هذه المقالة ، هي مجموعة من الأدوات ، والمقتطفات ، والمكونات الإضافية ، والموارد التي يتم جمعها ذاتيًا والتي تسمح لك برمز مشاريعك بشكل أسرع. سيجد الناس هذه الموارد في كثير من الأحيان بمرور الوقت ويصبحون مرتبطين بها. إنه شيء شخصي ، وعليك أن تصنعه بنفسك.
التشابه
اختلافات
تكمن فائدة مجموعة الأدوات في إطار العمل في تعدد استخداماتها. وكما ذُكر من قبل ، في المشاريع التي تنوي فيها دفع حدود التصميم ، فإن إطار العمل غالبا ما يكون مرهقًا للغاية.
نفس الجودة هي أيضا سقوط الإطار في المشاريع الصغيرة إلى المتوسطة الحجم. هل تنشئ صفحة هبوط ترويجية؟ موقع من صفحة واحدة؟ مدونة بسيطة؟ ثم ربما يكون إطار العمل غير ضروري. من الأفضل أن تبدأ من الصفر ، وأن تصنع كل التفاصيل الخاصة بالمشروع.
سأذهب إلى حد القول - هذا رأيي فقط - أن معظم المواقع التي تعتمد على المحتوى لا تحتاج إلى إطار عمل كامل. الاستثناء سيكون للمواقع الضخمة ، مثل آرس تكنيكا فمثلا. لشيء كبير يجب عليك استخدام إطار عمل ، ولكن ربما يجب عليك تطويره من الصفر لتلبية احتياجات الموقع بالضبط.
حيث أن الأطر مثل Bootstrap و Foundation shine حقا هي في تطوير تطبيقات الويب والمواقع المعتمدة على التطبيقات. في هذه المشاريع ، تكون القيود الصارمة نسبيًا سهلة الاستخدام ، بدلاً من إبطائك.
إن إنشاء مجموعة الأدوات الخاصة بك هو مسألة وقت وصبر وتجربة. أعني ، بالتأكيد ، يمكنك الذهاب والبحث عن "موارد تصميم الويب". ستحصل على الآلاف والآلاف من النتائج ، وفي بضع ساعات يمكنك تنزيل المزيد من الشفرات أكثر مما يمكنك استخدامه.
لكن هذا ليس مجموعة أدوات. هذه مكتبة لن تلمسها أبدًا ، لأن فرزها يستغرق وقتًا طويلاً جدًا. نحن مشغولون بالناس ، لذا فقد اتخذت نهجًا عضويًا أكثر لهذا: عندما أواجه مشكلة ، فأنا أقوم بذلك.
غالبًا ما يكون حفظ القصاصات طويلاً جدًا ، لذلك إذا وجدت نفسي مرارًا في البحث عن الشيء نفسه ، فأضفه إلى مجموعة الأدوات. وينطبق نفس الشيء على البرامج: إذا كان هناك شيء تعرف أنه سيستخدمه كثيرًا ، فأضفته.
هذا لا يعني أنه يجب عليك عدم تخصيص وقت لتجربة بعض "الألعاب" الجديدة… يجب عليك. إذا سمعت عن مورد معين يمكن أن يغير طريقة عملك للأفضل ، فقم بفحصه بكل الوسائل. لكن تذكر أن حافظات الأدوات تبقى أفضل نسبيا صغيرة. يجب التركيز على الاحتفاظ فقط بما تحتاجه لتلبية الاحتياجات التي تواجهها بانتظام.
مرة أخرى ، سوف أكرر أن مجموعات الأدوات هي شيء لديك لجعل نفسك ، لتلبية احتياجاتك الخاصة. ومع ذلك ، سأقوم بإدراج الأشياء الموجودة في مجموعة الأدوات الخاصة بي لأعطيكم فكرة أفضل عما يجب أن تبحثوا عنه أثناء إنشاء ملف خاص بك.
CSS pre-processors like أقل و ساس افعل شيئين:
إذا لم تكن قد جربت شفرة CSS مسبقًا باستخدام معالج مسبق ، فأنا أحثك على القيام بذلك الآن. الآن. سوف انتظر.
يمكن أن تكون قائمة العلامات المنظمة بشكل جيد مفيدة للغاية عندما تحتاج إلى شيء لا يمكنك توفيره على القرص الصلب المحلي لديك. أنا المرجعية أشياء مثل مولدات CSS3 ، مولدات سبريت ، المبدعين نظام الألوان والأدوات الأخرى التي تساعدني على إنجاز المهام بسرعة والتي تستغرق وقتًا أطول بكثير عندما تقوم بها يدويًا.
أنظمة الشبكة حتى 2000s. منذ أن أصبح تصميم الويب سريع الاستجابة أمرًا فعليًا ، أصبحت أنظمة الشبكة معقدة بشكل متزايد من أجل تلبية احتياجات الأجهزة التي لا تعد ولا تحصى.
وماذا لو كنت بحاجة إلى نظام شبكة مخصصة؟ هل يمكن أن تصل إلى واحدة من العديد من مولدات النظام شبكة استجابة على الإنترنت ، لكنها محدودة.
الحل يأتي في شكل semantic.gs . الآن ، بينما يسميه مؤلفه الخاص نظام شبكة ، اخترت أن أسميها محرك تخطيط ، لأنها ليست شبكة واحدة. إنها أداة تعتمد على المعالجة المسبقة لـ CSS (يمكنك استخدامها مع LESS و SASS و Stylus) ، كما أنها تسمح لك بإنشاء أي شبكة ترغب بها ، أو بعرض ثابت أو استجابة ، على الفور.
كل ما عليك فعله هو تغيير بعض الأرقام في ملف .less (أو SASS ، الخ) ، والانتقال.
ايميت هي عبارة عن مجموعة من المكونات الإضافية التي تحول الاختصارات إلى أسطر رمز كاملة ، في كل من HTML و CSS.
في الأساس ، يتحول هذا:
div>ul>li*3>aفي هذا:
كم ذلك رائع؟
المقتطفات هي تلك الأجزاء الصغيرة من التعليمات البرمجية التي تحتفظ بها مرارًا وتكرارًا لأنها مفيدة جدًا وتحبها إلى أجزاء ، وتريد أن تتذكرها جميعًا ولكنك لا استطيع.
أي محرر نص جيد عادة لديه طريقة لتخزين واسترجاعها بسهولة. الآن ، يجب أن تكون مجموعة مقتطفاتي المفضلة هذا واحد لورد . يمكن أن يكون من الصعب تذكر وظائف القوالب في WordPress وخياراتها لـ functions.php ، وهذا هو موفر الحياة.
كما قلت من قبل ، أنا لست مبرمج حقيقي. لذلك عندما يتطلب أي نوع من الرسوم المتحركة المتقدمة أو وظيفة واجهة المستخدم ، ولكن ليس كثيرا لجعل إطار يستحق العناء ، أنتقل إلى الإضافات الفردية.
بعض من المفضلة هي:
ليس من السابق لأوانه أن يكون لديك مكتبتك الشخصية لأشياء مفيدة.
ما هي الأدوات التي ترغب في رؤيتها في مجموعة الأدوات الخاصة بك؟ ما هي الموارد التي لا يمكنك العيش بدونها؟ اسمحوا لنا أن نعرف في التعليقات.
صورة مميزة / صورة مصغرة ، صورة مجموعة أدوات الرياضيات عبر مارك كيرلاند.