Zen Coding – כתוב מעט, עשה הרבה

זן קודינג הוא תוסף שמטרתו להקל על בוני אתרים הכותבים את הקוד בידיהם. התוסף מספק שפת קיצורי דרך הממירה קיצורים לתגיות או לפקודות css. כך למשל, במקום לכתוב <p></p>, מספיק לכתוב את האות p ולאחריה צירוף מקשים המרחיב את הקיצור (בד"כ זה ctrl+E). אחד הדברים היפים בזן קודינג הוא תמיכתו במגוון עורכי קוד, אם לציין כמה מפורסמים: Notepad++, Dreamweaver, Komodo, Coda, TextMate ועוד.

שלב א: התקנה

ובכן, עכשיו שאתם מבינים למה אתם צריכים את זה, גשו לעמוד ההורדות של Zen Coding והורידו את קובץ הזיפ המתאים לעורך הקוד שלכם. חלצו את קובץ ה-zip. אמורים להיות לכם בתיקיה הוראות וקבצי התקנה.

דף ההורדות של זן קודינג
דף ההורדות של זן קודינג

שלב ב: התחלת עבודה - Expand Abbriviation

לאחר שהתקנתם את התוסף, צריך ללמוד להכיר את שפת קיצורי הדרך שמציע זן קודינג. תוכלו להעזר ב-cheat sheet שמוצע באתר הפרוייקט של זן קודינג. אך למעשה, כל מי שיודע קצת html יוכל להתחיל לעבוד מיד. הקיצורים הברורים ביותר והקלים ביותר הם שמות תגיות, פשוט כתבו את שם התגית, למשל html ולחצו על קיצור הדרך (ctrl+E בנוטפד++) והופ! הקסם מתחיל לקרות.כאן המקום לציין שקיצור הדרך יכול להיות שונה בתוכנה בה אתם משתמשים - הוא יכול להיות גם ctrl+, בתוכנות מסויימות.

html + (ctrl+e) = <html></html>
head + (ctrl+e) = <head></head>
body + (ctrl+e) = <body></body>

אנחנו מתחילים באמת לחסוך לעצמנו עבודה בתגיות כמו a ו-img מאחר וזן קודינג מוסיף עבורנו את התכונות שלהם וגם שם את הסמן במקום.

a + (ctrl+e) = <a href=""></a>
img + (ctrl+e) = <img src="" alt="" />

שלב ג: קיצורים מתקדמים

נמאס לכם לכתוב שוב ושוב מבנה של מסמך html עם הגדרת doctype וקידוד? יש פתרון!

html:5 + (ctrl+e) = 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

מרשים נכון? יש עוד כמה טריקים מגניבים כאלו. למשל קישור לקובץ css - מי זוכר בכלל איך רושמים את זה?

link:css + (ctrl+e) =
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

script:src + (ctrl+e) =
<script type="text/javascript" src=""></script>

ויש עוד הרבה כאלה, לרשימה המלאה אתם יכולים לפנות ל-cheat sheet שהזכרתי קודם. בהערת אגב, אלו מכם שעדיין רוצים לכתוב ב-xhtml יכולים לכתוב html:xt, אך המלצתי האישית היא לעבור ל-doctype של html5 - הוא נתמך בכל הדפדפנים. זן קודינג מאמץ גם כמה רעיונות מתחביר של סלקטורי css:

  • id: #header => <div id="header"></div> - מזהה
  • class: .text => <div class="text"></div> - מחלקה
  • child: ul>li => <ul><li></li></ul> - ילד שלו
  • sibling: h1+p => <h1></h1><p></p> - אח שלו

והנה עוד שתי דוגמאות:

p.text + (ctrl+e) =
<p class="text"></p>		

#container>#header+#content
<div id="container">
	<div id="header"></div>
	<div id="content"></div>
</div>

תגיות:, , ,

תגובות

נעול לתגובות.