When I started to decorate the table by bootstrap classes like table, table-hover, table-condensed, table-nomargin, table-striped… I expected that bootstrap will have some useful class for awesome responsive behaviour, but NO. Then … I must created some custom solution and here is :

I want to rendered table like this :

to something like this:

The solution is really simple. We need to add only one class to table called e.g. table-specialresponsive and specify special attribute e.g. data-title per cell for new column header which will be displayed in row, when table header th-s will be hidden:

<table class="table table-striped table-specialresponsive">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-title="Column 1">Value 1-1</td>
                    <td data-title="Column 2">Value 1-2</td>
                    <td data-title="Column 3">Value 1-3</td>
                    <td data-title="Column 4">Value 1-4</td>
                </tr>
                <tr>
                    <td data-title="Column 1">Value 2-1</td>
                    <td data-title="Column 2">Value 2-2</td>
                    <td data-title="Column 3">Value 2-3</td>
                    <td data-title="Column 4">Value 2-4</td>
                </tr>
                <tr>
                    <td data-title="Column 1">Value 3-1</td>
                    <td data-title="Column 2">Value 3-2</td>
                    <td data-title="Column 3">Value 3-3</td>
                    <td data-title="Column 4">Value 3-4</td>
                </tr>
            </tbody>
        </table>

@media only screen and (max-width: 768px) {

    .table-specialresponsive > thead,
    .table-specialresponsive > tbody,
    .table-specialresponsive > tbody > tr,
    .table-specialresponsive > thead > tr,
    .table-specialresponsive > tfoot > tr,
    .table-specialresponsive > tbody > tr > td,
    .table-specialresponsive > thead > tr > td,
    .table-specialresponsive > tfoot > tr > td,
    .table-specialresponsive > tbody > tr > th,
    .table-specialresponsive > thead > tr > th,
    .table-specialresponsive > tfoot > tr > th
    {
        display: block;
    }

    .table-specialresponsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-specialresponsive tr {
        border-top: 1px solid #ccc;
    }

    .table-specialresponsive > tbody > tr > td,
    .table-specialresponsive > tfoot > tr > td {
        border: none;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

    .table-specialresponsive > tbody > tr > td:before,
    .table-specialresponsive > tfoot > tr > td:before {
        position: absolute;
        left: 6px;
        width: 50%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        content: attr(data-title);
    }
}

Responsive table is applicable for screen resolution less then 768 pixels .. and maybe interesting is last line content: attr(data-title) which specify the content which will be apply before every cell.

That's it

Názov tohto príspevku som prepisoval snáď 10 krát. Pravdepodobne nie je podľa neho jasné o čo pôjde, tak to skúsim objasniť: Ak chcete validovať formulárové prvky v ASP.NET MVC a na ich design používate Bootstrap, a súčasne na validáciu na klientskej strane používate javascriptovú knižnicu jQuery.Validate tak sa určite dostanete do rovnakej situácie ako ja. jQuery Validate pridáva css triedy s názvom “input-validation-error” a “valid” priamo do input elementu (alebo iných elementov formulára) čo je síce pekné, ale nechce sa mi dizajnovať niečo, čo už bootstrap vyriešil za mňa. Ak chceme použiť korektne knižnicu bootstrap, tak tá to potrebuje mať povedané v inom formáte. (Formát validného/nevalidného prvku nájdete na bootstrap stránke v sekcii Validation states). Čo s tým? ideálne toto:

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    }
});

Upraviť metódy highligh a unhighligh uvedeným spôsobom. (aby pridávali triedy has-success a has-error do nadradeného DIV elementu s triedou form-group).

Browser Mozilla Firefox Developer Edition v.38 ako developerských prehliadač podporuje najnovšie features zo sveta web technológií. Toto pravidlo platí aj pre fonty v najnovšom formáte .woff2. V našom prípade išlo o fonty od bootstrap-u s názvom glyphicons. Browser nám hlásil error code 404 –  File not found.f

Dané fonty sa samozrejme na webovom servery nachádzali. Problém je, že webový server (v tomto prípade IIS v8.5) nepozná túto koncovku (je pre neho jednoducho nová). Tak mu to musíme povedať pre danú aplikáciu nasledovne:

<system.webServer>
    <staticContent>
    	<mimeMap fileExtension=".woff2" mimeType="application/octet-stream" />
    </staticContent>       
</system.webServer>

Samozrejme túto koncovku vieme pridať aj globálne pre všetky weby na našom servery cez IIS manager, ikonka MIME Types:

Ak pracujeme s CSS knižnicou bootstrap, skôr či neskôr sa dostaneme do situácie, kedy potrebujeme nastaviť CSS štýl nejakému komponentu/tagu … podľa rôznej veľkosti obrazovky prehliadača. Slúži na to kľúčové slovo @media. Bootstrap rozlišuje 4 základné veľkosti (nájdeme ich aj vo vnútri knižnice):

.container {
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Základné veľkosti podľa bootstrap-u sú teda štyri:

1. veľkosť do 768 pixelov
2. veľkosť od 768 do 992 px
3. veľkosť od 992 do 1200 px
4. veľkosť nad 1200 pixelov

Toto nie je žiadne tajomstvo. No týmto blog postom by som chcel upozorniť na jednu drobnosť. A to použitie reverzného princípu pomocou @media (max-width: x). Definovanie štýlu nie od minimálnej šírky ale do maximálnej šírky. Tu treba dať pozor na jednu vec a tou je jeden pixel. Ak definujeme štýl od minimálnej šírky pomocou min-width:x tak k nemu opačná definícia pomocou max-width je max-width:x-1. Pre úvodný kus kódu by to bolo nasledovne:

@media (max-width: 767px) {
    /* Custom definitions ...*/
}

@media (max-width: 991px) {
    /* Custom definitions ...*/
}

@media (max-width: 1199px) {
    /* Custom definitions ...*/
}

A ešte jedna poznámka na záver:

• @media (max-width: 767px) platí pre šírku od 0 do 767 pixelov 
• @media (min-width: 768px) platí pre šírku od 768 pixelov a viac

Pre tieto účely – optimalizácia html stránok - je veľmi užitočný tool priamo od google s názvom Webmaster tool a konkrétne jeho súčasť PageSpeed Insights. Ten vie prebehnúť požadovanú url adresu a poskytnúť nielen výslednú štatistiku, ale aj návrhy ako dané nedostatky riešiť.

Tie najdôležitejšie nedostatky sme riešili nasledovne:

1. Minifikácia Css a Javascript súborov

Minifikácia súborov Css,Js ale napr. aj HTML je vo Visual studiu skutočne jednoduchá v spojení s toolom s názvom Web Essentials. Stačí v Solution explorer nájsť požadovaný súbor a v kontextovej ponuke vybrať minifikáciu nasledovne:

Tool vygeneruje rovnomenný súbor s koncovkou .min.css, resp. .min.js do rovnakého priečinka a zavesí ho ako sub-node daného súboru. Web essentials je veľmi užitočný tool .
Takto minifikované súbory sme ešte pomocou tzv bundlingu (referenčná kližnica System.Web.Optimization) zabalili do jedného výstupného súboru:

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            // CSS
            bundles.Add(new StyleBundle("~/Styles/Css").Include(
                "~/Styles/Bootstrap.min.css",
                "~/Styles/Fonts.min.css",
                "~/Styles/font-awesome.min.css",
                "~/Styles/font-iconpack.min.css",
                "~/Styles/Bootstrap-cutom.min.css",
                "~/Styles/Animate.min.css", 
                "~/Styles/Technologies.png.min.css",
                "~/Styles/Main.min.css"));

            // JS
            bundles.Add(new ScriptBundle("~/Scripts/Js").Include(
                "~/Scripts/jquery-{version}.min.js",
                "~/Scripts/jquery-Lightbox.js",
                "~/Scripts/jquery-viewportchecker.min.js",
                "~/Scripts/jquery-typed.min.js",
                "~/Scripts/modernizr-{version}.min.js",
                "~/Scripts/detectizr.min.js",
                "~/Scripts/bootstrap.min.js",
                "~/Scripts/respond.min.js",
                "~/Scripts/Site.min.js"));

            BundleTable.EnableOptimizations = true;
        }
    }

Výsledok:

2. Caching na strane klienta

Aby prehliadač klienta nemusel pre každú stránku ťahať po sieti aj zdroje, ktoré už má, musíme mu to povedať cez hlavičku HTTP requestu. V ASP.NET to zabezpečíme veľmi jednoducho. Do priečinkov, ktoré cheme zacacheovať na strane klienta doplníme nasledovný web.config:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
        </staticContent>
    </system.webServer>
</configuration>

3. Caching na strane servera

Na cacheovanie na strane servera sme využili tzv. OutputCache a to nasledovnou konfiguráciou vo web.configu projektu:

<system.web>
	<caching>
    	<outputCache enableOutputCache="true"></outputCache>
    	<outputCacheSettings>
    		<outputCacheProfiles>
        		<add name="Cache1Hour" location="ServerAndClient" duration="3600" enabled="true" varyByParam="*" />
            	<add name="Cache1Day" location="ServerAndClient" duration="86400" enabled="true" varyByParam="*" />
       	 </outputCacheProfiles>
    	</outputCacheSettings>
    </caching>
 </system.web>

<%@ Page Language="C#" %>
<%@ OutputCache CacheProfile="Cache1Hour" %>

Blogovacie systémy (samozrejme aj BlogEngine.NET) poskytujú prispôsobenie si vzhľadu pomocou inštalácie témy. No v našom prípade, kedy sme potrebovali, aby blog zapadol do dizajnu webu Turingion.com, sme sa museli vybrať inou cestou. Pozreli sme sa na fungovanie tohto blogovacieho systému zblízka a upravili default tému (ktorá nám ako taká vyhovovala) nasledovne :

Témy sú uložené na ceste Blog_RootFolder\Custom\Themes\Standard\ kde sa nachádza aj master page site.master

Mater page sa dá jednoducho customizovať. Stačí nepoškodiť existujúcu funkcionalitu a doplniť, alebo nahradiť ju za vlastnú. V prípade Blog.Turingion.com to nebolo vôbec zložité. Nahradil som header a footer stránky za vlastný kus HTML kódu z Turingion.com. Viď obrázok nižšie; región Menu/Header a Footer je prepísaný, pôvodná ostala len časť Content, do ktorej sa generujú blog posty. Komponenty na ľavej strane blogu sú generované pôvodnou user kontrolkou blog:WidgetZone.

Samozrejme je možné includnuť ľubovoľné Css či Javascript. Drobný problém môže nastať len s cestami k obrázkom, fontom a podobným komponentom referencovaným napr. v CSS. V prípade tohto blogu si to vyžiadalo vložiť do šablóny 2 css súbory (font-awesome.min.css, Fonts.min.css) a ich súčasti (priečinok fonts) viď. screen nižšie: