אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » HTML5 Boilerplate

HTML5 Boilerplate

רן בר-זיק אוגוסט 25, 2013 7:19 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

כשאני צריך ליצור דף 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 המצויין והמפורט שלו. אם לא הכרתם אותו עד היום, זה הזמן להכיר!

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
HTML 5 תשתית

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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