Minimalizace počtu přesměrování na https

Proč využívat HTTPS protokol namísto HTTP protokolu asi nemá cenu řešit. Nicméně často je k vidění nastavení, kdy pravidla pro přesměrování z protokolu HTTP na HTTPS obsahují nadměrný počet přesměrování. Primárně jde hlavně o to určit si hlavní adresu domény (buď s www nebo bez) a na tu pak přesměrovávat. Přesměrovávat vždy na tu variantu, kterou návštěvník zadal je již nadbytečné.

Test nastavení

Zda u vaší domény dochází k více přesměrováním než je nezbytné, si můžete ověřit na adrese: https://varvy.com/tools/redirects/

Jak docílit správného nastavení

Ukažme si tedy jak docílit správného přesměrování. Níže uvádím dvě správné varianty přesměrování, kdy jsem si vybral jako cílovou adresu https://ambroz.blog/cokoliv.

Varianta 1

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^/(.*) https://ambroz.blog/$1 [R=301,L]
</IfModule>

Varianta 2

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^/(.*)$ https://ambroz.blog/$1 [R=301,L]
</IfModule>

Publikováno 26.10.2017 v 18:44 | Kategorie: .htaccess

Více datových tabulek zobrazených pod sebou

U jednoho svého projektu jsem řešil vypisování více datových tabulek pod sebou. Měl jsem problém s tím, že stránkování, vyhledávání, řazení apod. se zobrazovalo jen u první tabulky a u těch dalších již ne. Na těchto stránkách jsem našel kvalitně popsané a jednoduché řešení. Pojďme si zde tedy shrnout jak na to.

JavaScript

Pro výslednou funkčnost použijeme na stránkách tyto dané zdroje JavaScript kódu:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

A tento kód:

<script type="application/javascript">
    $(document).ready(function () {
        $('table.display').DataTable();
    });
</script>

HTML

Tabulky (samozřejmě doplněné o libovolný CSS kód) pak budou v HTML kódu vypadat nějak takto:

<table id="dataTable">
    <thead>
    <tr>
        <th>Nadpis 1</th>
        <th>Nadpis 2</th>
        <th>Nadpis 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Položka 1</td>
        <td>Položka 2</td>
        <td>Položka 3</td>
    </tr>
    </tbody>
</table>

<table class="display" id="dataTable">
    <thead>
    <tr>
        <th>Nadpis 1</th>
        <th>Nadpis 2</th>
        <th>Nadpis 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Položka 1</td>
        <td>Položka 2</td>
        <td>Položka 3</td>
    </tr>
    </tbody>
</table>

<table class="display" id="dataTable">
    <thead>
    <tr>
        <th>Nadpis 1</th>
        <th>Nadpis 2</th>
        <th>Nadpis 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Položka 1</td>
        <td>Položka 2</td>
        <td>Položka 3</td>
    </tr>
    </tbody>
</table>

Publikováno 18.10.2017 v 06:04 | Kategorie: JavaScript

Jak na stránky umístit responzivní video

Je mnoho způsobů jak na stránky vkládat videa z Youtube, Vimeo apod. Mně se nejvíce osvědčil způsob, který jsem našel zde. Jednoduché, elegantní a samozřejmě responzivní řešení.

CSS kód

Samotný CSS kód, který k umístění videa na stránky použijeme, vypadá tedy takto:

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px;
    overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML kód

Kód, který pak vložíme do stránek, se již dá jednoduše odvodit:

<div class="responsive-video">
<iframe src="https://www.youtube.com/embed/XXXX"></iframe>
</div>

Publikováno 17.10.2017 v 02:26 | Kategorie: CSS