HTML5 Boilerplate

טמפלייט מוביל לבניית דפי HTML 5

כשאני צריך ליצור דף HTML מאפס, אני כמעט מעולם לא ממש מתחיל לכתוב את ה-doctype ואת שאר האלמנטים. אני בעצם מתחיל תמיד מטמפלייט מסוים. זה שימושי מאד גם לדף אד-הוקי שאני כותב לאיזשהו מקום וגם למערכות גדולות יותר שאני צריך ליצור להן איזה View זה או אחר. השאלה היא – איזה טמפלייט? בשנתיים האחרונות אני מוצא את עצמי תמיד מתחיל מפרויקט שנקרא HTML5 Boilerplate שהוא יופי של טמפלייט דוגמה שאפשר להתחיל ממנו כשמפתחים ל-HTML5. הוא מכיל המון עקרונות וטריקים חשובים ושימושיים שחוסכים לא מעט זמן ומדגימים עקרונות של פיתוח נכון.

HTML5 Boilerplate

ראשית? בשביל מה אני צריך את זה? כבר כתבתי שאני משתמש בזה כשאני צריך לכתוב דף HTML מאפס וצריך איזשהו בסיס, הרי אני לא אתחיל להקליד <body> ואת שאר התגים האלמנטריים כל פעם מחדש. HTML5 Boilerplate פשוט מכיל index.html שמכיל רוב הדברים שאני צריך – אבל לא רק! הוא גם בא עם jQuery, Modernizr וגם קובץ htaccess וכמה קבצים נוספים וחשובים – ואפילו אפשרות לקבל אותו עם twitter bootstrap הפופולרי. כשאני רוצה – אני משתמש בהם. וכשאני לא צריך, אז אני לא.

אז איך משתמשים? פשוט מורידים מהאתר הרשמי של HTML5 Boilerplate. אפשר להוריד את הגרסה האחרונה או ליצור custom build עם תוספות. אני ממליץ, לפחות בהתחלה, פשוט להוריד את הגרסה האחרונה.

מה אפשר למצוא שם?

אחד הדברים הכי מגניבים זה browser detection של גרסת אקספלורר ללא JavaScript. איך? ככה:


<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

אנו משתמשים בהערות מותנות על מנת להדפיס את גרסת אינטרנט אקספלורר ישירות כ-class של HTML. אני באופן עקרוני מעדיף להשתמש בקבצי CSS מותאמים לכל זוועתון של אינטרנט אקספלורר ואז צריך לעשות שינויים, אבל אם אתם לא נוקטים בשיטה הנלוזה הזו – זה גם נהדר.

דבר נוסף שיש שם הוא שרת מטא מידע שמפעילה את גוגל כרום פריים ומונעת מאקספלורר להפעיל את מצב התאימות:


        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

השורה הזו חשובה במיוחד כי לפעמים יש sys admins שמפעילים את מצב התאימות באופן אוטומטי לכל האקספלוררים בחברה. הוספת השורה הזו תכריח את האקספלורר לרנדר את הדף באופן החדש ביותר האפשרי ולא כאינטרנט אקספלורר 7.

דבר נחמד מאד שיש ב-Bolierplate זה normalize.css שבניגוד ל-reset.css, לא מנטרל את כל ההתנהגויות הדיפולטיביות של הדפדפנים אלא משמר את ההתנהגויות הטובות של כל הדפדפנים ומשווה ביניהם.


<link rel="stylesheet" href="css/normalize.css"> 

אחד מהדברים שאני הכי אוהב ב-Boilerplate זה איך שהוא טוען את jQuery – מנסה קודם כל דרך ה-CDN של גוגל ואם לא, אז הוא טוען את זה ממשאב מקומי והכל בשיא האלגנטיות. כך זה נראה:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

ב-plugins.js של boilerplate יש קוד קצר שמונע את שגיאות ה-console בדפדפנים שלא תומכים ב-console (כלומר אקספלוררים למיניהם…)


// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

למי שלא יודע – נכון שתמיד עדיף לא להשאיר קוד console ב-Production, אבל גם אם משאירים – זה לא יעשה תקלות בשום דפדפן מודרני. אך באקספלורר אומלל שמנסה לרנדר את הדף ללא כלי מפתחים פתוח – תהיה שגיאה. המפתח האומלל שינסה לדבג את השגיאה יפעיל את כלי המפתחים כמובן, ואז השגיאה לא תתקיים – שעות של הנאה! הכללת הקוד שלעיל תמנע את המצב.

יש עוד המון דברים טובים ב-Boilerplate – בראשם ה-htaccess המצויין והמפורט שלו. אם לא הכרתם אותו עד היום, זה הזמן להכיר!

פוסטים נוספים שכדאי לקרוא

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

כל אחד יכול לשאול את GPT, אבל אם תרצו לשאול אותו שאלות על תכנות – יש כמה שיטות וטיפים ליעל את העבודה מולו.

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

הסבר על הום אסיסטנט, מערכת הקוד הפתוח לבית חכם ואיך לחבר אליה מיקרובקרים.

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

פרק בפודקאסטעל נגישות בעברית שצולל לכלים האוטומטיים ולפן המאד מאד טכני של הנגישות.

פתרונות ומאמרים על פיתוח אינטרנט

יישום של nonce על מנת להגן מפני התקפות injection

בפוסט הקודם הסברתי על hash עם CSP על משאבי inline – שזה נחמד ומעולה אבל פחות ישים בעולם האמיתי שבו בדרך כלל התוכן ה-inline (בין

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

גלילה לראש העמוד