كيف يجب أن يتعلم المصممون البرمجة؟ محررات النصوص والنصوص الطرفية (الجزء الأول)

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

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

فهم المواد الخام

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

كما أطمئن زملائي إلى أن المعرفة بالبرمجة لا تعني أن على المرء أن يصبح مهندسًا. يشير الاثنان إلى مجموعات مهارات مختلفة ، على الرغم من ارتباطها. كما كتب كايل ثاير ، طالب دكتوراه في جامعة واشنطن مؤخرًا ، فإن مجال علوم الكمبيوتر (أو الهندسة) يدور حول إعطاء الطلاب "نظرة عامة على المجال العلمي للحوسبة":

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

- كايل ثاير

على النقيض من ذلك ، فإن الترميز يعني ببساطة أن تصبح مألوفًا بشكل كافٍ مع لغة برمجة معينة لإكمال مهمة ما. إن مطالبة شخص ما بتعلم HTML أو JavaScript الأساسي لا يستلزم أن يصبح مهندس برمجيات متكامل. على الرغم مما قد يعتقده البعض ، فإن إجراء إعادة شراء ونسخ / لصق إجابات Stack Overflow لا يجعلك مهندس برمجيات - ولكن يمكن أن يزيد من القيمة التي تجلبها كمصمم لفريق تطوير المنتج.

ماذا عن "قانون منخفض"؟

قد يقول البعض أننا ندخل مستقبلًا منخفضًا للشفرة حيث يستطيع المصممون (والمطورون) إنشاء تطبيقات من خلال وظائف السحب والإفلات وواجهة المستخدم الرسومية (GUI). لذا فإن قضاء الوقت في تعلم لغة برمجة "لا يستحق كل هذا العناء". يبدو أن ظهور أدوات مثل Webflow و Modulz و FramerX و UXPin وما إلى ذلك ، يدعم هذا الخط من التفكير. ويمكن أن يكون هذا صحيحًا جدًا للعديد من التطبيقات - فقد أصبح إنشاء موقع أو تطبيق بدون سطر واحد من التعليمات البرمجية أسهل من أي وقت مضى. ومع ذلك ، إذا لم تفهم المبادئ الأساسية ، فستحدد القيمة التي يمكنك تقديمها باستخدام تطبيق رمز منخفض.

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

ومع ذلك ، يجلب الجميع مزيجًا فريدًا من المهارات إلى الطاولة. معرفة الكود ليست ضرورة مطلقة ويجب فقط التشجيع عليها وليس إلزامها.

من اين نبدأ؟

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

بدأ العديد من المصممين / المطورين الذين أعرفهم عادةً في اختراق قوالب HTML و CSS على مواقع مثل MySpace أو Geocities أو Tumblr أو Neopets أو غيرها. الآن بعد أن قمت بتأريخ نفسي بشكل كافٍ ، لأي شخص يبدأ اليوم ، أوصي بالبدء في واجهة سطر الأوامر الودية (CLI).

المحطة: أداة أساسية

تطبيق go-to لمديري هوليوود عندما يكون هناك متسلل كمبيوتر على الشاشة ، فإن الجهاز هو مجرد واجهة تسمح لك بتنفيذ الإجراءات عبر إدخال نص بدلاً من واجهة المستخدم الرسومية (GUI) التي اعتاد عليها معظم الناس. سأدع المطورين الحقيقيين يشرحون التعقيدات والكيفية التقنية ، ولكن لأغراضنا من الجيد بما يكفي أن تعرف أن التعرف على CLI مفيد لعدد من الأسباب.

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

مثل الكثير من المصممين ، أستخدم بيئة macOS (المعروفة سابقًا باسم OS X) ، ولكن ينطبق ما يلي على أنظمة تشغيل * nix الأخرى (Linux ، و Unix) ، وكذلك على Windows PowerShell. على الرغم من وجود الكثير من التداخل بين أنظمة التشغيل الحديثة المختلفة ، إلا أن هناك بعض الاختلافات التي سأبذل قصارى جهدي لإبرازها.

التعبيرات العادية

الميزة الرئيسية في CLI هي القدرة على استخدام التعبيرات العادية (regex) في أوامرك. فكر في regex كعمليات بحث منطقية (باستخدام علامات الاقتباس للبحث عن عبارات محددة أو علامة الطرح لاستبعاد الكلمات) على المنشطات - فهي تتيح لك تحديد نمط في سلسلة نصية بحيث يمكنك تنفيذ بعض الإجراءات على الإخراج. فيما يلي بعض الأمثلة الواقعية:

1. إذا كانت لديك قائمة طويلة من أرقام الهواتف بتنسيقات متنوعة ، فيمكنك تحديد نص برمجي يمنحك مخرجات متسقة بناءً على تعبير عادي - على سبيل المثال: (###) ###-#### لـ تنسيق أرقام الهواتف الأمريكية.
2. إذا كنت تريد إعادة تسمية مجموعة من الملفات بسرعة إلى حالة معينة - من حالة الكباب إلى حالة الجمل أو أي شيء بينهما.

فيما يلي بعض أوامر المحطة الأساسية ^* لمساعدتك على البدء:

1. cd تعني "تغيير الدليل" ، اكتب هذا ثم ملف أو مسار مجلد للذهاب - لاحظ أنه يمكنك كتابة اسم مجلد ولكن يجب أن يكون داخل مجلدك الحالي للانتقال إليه.
2. يسرد ls الملفات والمجلدات الموجودة في مجلدك الحالي.
3. يرمز pwd إلى "طباعة دليل العمل" - وهذا سوف يسرد مكان وجودك حاليًا على جهاز الكمبيوتر الخاص بك.
4. mkdir وسيقوم اسم المجلد بإنشاء مجلد في دليل العمل الخاص بك.
5. استخدام cd مع .. يأخذك إلى مستوى أعلى - إذا كنت في /users/username/documents/2019 وقمت بإدخال cd ../.. سينتهي بك الأمر في /users/username .
6. نصيحة إضافية - سيؤدي الضغط على مفتاح Tab إلى الإكمال التلقائي أثناء كتابة مسار المجلد / الملف.

ملاحظة : ما يلي سيعمل على سطر أوامر Windows ( cmd ):

• cd ، cd .. ، mkdir ، مفتاح Tab للإكمال التلقائي للمسار ( لن يعمل ls و pwd ).

يدعم سطر أوامر Windows الأكثر حداثة (Windows PowerShell) جميعها:

• cd و cd .. و ls و pwd و mkdir و Tab للإكمال التلقائي للمسار.

للحصول على قائمة كاملة بالأوامر المتوفرة في PowerShell ، تحقق من صفحة تعليمات Microsoft "استخدام أسماء الأوامر المألوفة".

إدارة الملفات الجماعية

يمكنك معالجة الملفات والمجلدات بشكل جماعي عبر الجهاز - إليك بعض الأفكار:

1. يمكنك إنشاء ثلاث سنوات من المجلدات مع المجلدات الفرعية لكل شهر في أمر واحد - باستخدام mkdir -p و {list-of-years}/{list-of-months} ​​ستنشئ مجلدات لكل عام بمجلدات فرعية لكل شهر. استخدم خيالك ، أنا متأكد من أنه يمكنك استخدام هذا بشكل جيد!
2. يمكنك تنظيف سطح المكتب بسرعة باستخدام mv Screen\ Shot* Screenshots - سيؤدي ذلك إلى نقل جميع ملفاتك التي تبدأ بـ "لقطة شاشة" إلى مجلد يسمى "لقطات الشاشة".

البرمجة النصية والصيانة

الآن بعد أن أصبح لدينا لمحة عن قوة التعبيرات النمطية والخيارات المتاحة في المحطة ، يمكننا البدء في دمج هذه الأشياء في نصوص . أحد البرامج النصية البسيطة جدًا ، لكنها قوية وشائعة الاستخدام ، هي إعادة تسمية ملف Mike G:

 criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done

ما يتيح لك هذا البرنامج النصي القيام به ، هو تحديد النطاق ( criteria ) ، وتحديد ما تريد تغييره ( re_match ) ، وما الذي ترغب في تغييره إلى ( replace ) - ثم تنفيذه.

هناك عدد لا يحصى من البرامج النصية الأخرى التي يمكنك إنشاؤها بخلاف إنشاء الملفات وإعادة تسميتها - يعد برنامج Vlad's Batch Resizing script مثالاً ممتازًا لإمكانيات توفير الوقت التي يمكنك إنشاؤها باستخدام البرامج النصية bash.

نصائح وحيل متقدمة

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

ولكن لا يجب أن يكون كذلك - باستخدام عدد قليل من أدوات سطر الأوامر ، بمجرد نسخ نظام التشغيل احتياطيًا ومسحه وإعادة تثبيته ، لا يمكنك تثبيت قائمة التطبيقات المفضلة لديك فحسب ، بل يمكنك أيضًا تثبيت الخطوط في غضون دقائق باستخدام البيرة. (Homebrew مخصص لنظامي التشغيل Mac و Linux فقط. بالنسبة لنظام التشغيل Windows ، جرب Chocolatey وهو بديل قوي.)

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

إذا لم يكن لديك متسع من الوقت لسلسلة Wes الكاملة من البرامج التعليمية حول سطر الأوامر - على الأقل أوصي بشدة بالمكدس التالي:

1. يا بلدي ZSH
2. اقتراحات تلقائية
3. تسليط الضوء على بناء الجملة zsh
4. z- القفز حولها

اختيار محرر نص

هناك العديد من الخيارات عندما يتعلق الأمر باختيار محرر الكود - Sublime Text و VS Code (Visual Studio Code) هما الخياران اللذان لديهما أكثر خبرة وأستخدمهما حاليًا.

كان Sublime Text أحد برامج تحرير النصوص السابقة التي أصبحت شائعة لدى مطوري الواجهة الأمامية - لقد كان المعيار الذهبي حتى سنوات قليلة مضت. ميزات مثل المؤشرات المتعددة ، ومدير حزم قوي ، واختصارات قابلة للتخصيص بدرجة كبيرة تتيح لك التنقل بسرعة بين الملفات والمجلدات. ناهيك عن أنه كان تطبيقًا خفيف الوزن وسريعًا بشكل لا يصدق مما جعله اختيارًا سهلاً.

ظهر VS Code (Visual Studio Code) في المشهد حوالي عام 2015 ، واستغرق الأمر بعض الوقت حتى ينتقل الأشخاص من Atom و Sublime ، لكن VS Code أثبت نفسه كمحرر مفضل لدى العديد من المطورين. بالإضافة إلى جميع ميزات Sublime تقريبًا ، ميزت VS Code نفسها بمحطة مضمنة وتكامل محكم مع Git. بالإضافة إلى ذلك ، يحتوي Visual Studio Code على نظام إيكولوجي غني للمكونات الإضافية يسمح لك بتوسيع وتخصيص بيئتك بما يرضي قلبك.

كل هذا يعني - لست بحاجة إلى أن تكون مطورًا لتقدير ميزات محرر الكود الجيد. لقد وجدت العديد من الاستخدامات لها في عملي اليومي ؛ اثنان ، على وجه الخصوص ، هما القدرة على استخدام مؤشرات متعددة ، واستخدام regex للبحث عن النص واستبداله عبر مجلدات الملفات. دعونا نلقي نظرة فاحصة على كليهما.

التحرير بمؤشرات متعددة

تخيل معالج الكلمات النموذجي الخاص بك - هذا الخط العمودي الوامض الذي يوضح أين سيذهب النص الذي تدخله؟ تخيل الآن إمكانية إضافة أكثر من مؤشر إلى هذه النافذة بحيث يظهر كل ما تكتبه أينما يوجد مؤشر!

قد لا يذهلك هذا الأمر حتى الآن - لذا إليك مثال يوضح بعض الطرق التي يمكن أن يساعدك بها محرر نصوص متقدم في إنشاء كفاءات يومية في سير عملك.

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

بمجرد لصق القائمة ، يقوم Cmd + Shift + P بإحضار لوحة الأوامر (مصطلح خيالي لقائمة قابلة للبحث تمنحك جميع الوظائف المتاحة). يمكنك أن تكتب في هذه القائمة ما تريد القيام به ، إلى حد كبير أي شيء يمكنك القيام به للنص متاح هنا. إذا لم يكن الأمر كذلك ، فمن المحتمل أن يكون هناك مكون إضافي أو ملحق يمكنك العثور عليه.

يمكننا تغيير الحالة وفرز الخطوط في غضون ثوانٍ - ثم يؤدي الضغط على Ctrl + Shift + مفاتيح الأسهم إلى إضافة المؤشرات ، ثم تتم إضافة كل ما نكتبه إلى كل سطر - في هذه الحالة ، نقوم بتحويل الأسماء إلى عناوين البريد الإلكتروني ، ولكن خيالك الجامح يمكن أن يجد طرقًا أخرى لا تعد ولا تحصى لاستخدام هذا.

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

ما هو محرر الكود الذي يجب أن أستخدمه؟

أنا مصمم - بالطبع ، جوابي هو "يعتمد الأمر".

• إذا كنت جديدًا على هذه المفاهيم ، فإنني أوصي بالحصول على نسخة تجريبية مجانية من Sublime - فهو لا يزال تطبيقًا خفيف الوزن للغاية ولا يستهلك الكثير من موارد النظام. يمكنك تخصيص روابط مفاتيح Sublime (كلمة خيالية لمفاتيح الاختصار) وتوسيع وظائفها المضمنة مع المكونات الإضافية.
• إذا كنت تستخدم محرر Sublime أو Atom أو محررًا آخر - فإنني أوصي بمراجعة VS Code أيضًا. لقد قام الفريق في Microsoft بعمل ممتاز حقًا مما جعله محرر نصوص قويًا وسهل الاستخدام.

أنا شخصياً أستخدم كلا المحررين - Sublime سريع البرق ويفتح في جزء من الثانية مما يسمح لي بلصق النص ومعالجته بسهولة. ولكن عندما أرغب في إنجاز بعض الأعمال الجادة ، أستخدم VS Code. من الصعب أن تتصدر حزمة الكل في واحد التي توفرها VS Code - مكون إضافي نابض بالحياة ونظام امتداد ، ولوحة أوامر قوية ، وواجهة قابلة للتخصيص بشكل كبير مما يعني أنه يمكنك حقًا جعلها خاصة بك. ناهيك عن حقيقة أن Microsoft لديها حافز كبير لضمان أنها تجربة من الدرجة الأولى لإنتاجية المطورين.

الخلاصة وماذا بعد؟

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

أي شيء خاطئ؟

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