Martin Kopta — blog

Responsive design s

Mon, 21 Nov 2011 12:29:00 +0100

Když upravujete kód HTML podle zásad responsive designu, k těm náročnějším problémům patří otázka, jak vyřešit načítání různě kvalitních obrázků pro různá zařízení. Na malé displeje s nízkým rozlišením není nutné stahovat stejně velké obrázky jako na displeje stolních počítačů, notebooků a tabletů s vysokým rozlišením.

Pokud nechcete všechny obrázky přenést na pozadí prvků, abyste jejich zdroje mohli měnit pomocí CSS a @media queries, zbývá už asi jen možnost podle hlavičky User-Agent rozlišovat zařízení, a pomocí mod_rewrite pak dosazovat vhodné zdrojové soubory.

Napadlo mě, že by šlo s využitím relativních cest, javascriptu a značky <BASE> problém elegantně vyřešit bez nutnosti cokoli nastavovat na serveru.

Mějme všechny obrázky pro zařízení s vysokým rozlišením ve složce /img/high a všechny obrázky pro zařízení s nízkým rozlišením ve složce /img/low. Na obrázky odkazujme pouze názvem souboru. Do hlavičky dokumentu vložme značku <BASE> s cestou k obrázkům o menších rozměrech a javascriptem v případě načítání na zařízení s vysokým rozlišením změňme její vlastnost href na cestu ke složce s většími obrázky:

<!DOCTYPE html>
<html>
<head>
  <title>Pokus s tagem &lt;BASE&gt;</title>
  <base href="http://www.example.org/img/low/" id="responsive">
  <script>
    if(window.innerWidth > 800) 
      document
        .getElementById('responsive')
        .setAttribute('href', 'http://www.example.org/img/high/');
  </script>
</head>
<body>
  <img src="img.png" alt="">
</body>
</html>

Zbývá dořešit problém pomalejšího vykreslování layoutu v důsledku absence rozměrů v prvku <IMG>.

Jak na skloňování @mentions ve tweetech

Thu, 09 Jun 2011 12:16:00 +0200

U Twitteru mě vždycky trochu otravovalo, že se musím obejít bez skloňování uživatelských jmen v textu tweetů (@atpok bez @atpoka), anebo musím používat různé obezličky, jako je vkládání apostrofů mezi základní tvar a koncovku (@atpok’a), což nevypadá úplně česky. Chtělo by to místo apostrofu nějaký znak, který se nezobrazuje a nemá žádný rozměr, napadlo mě.

Takové znaky opravdu existují. Třeba bezrozměrná mezera (U+200B), bezrozměrný spojovník (U+200D) a pár dalších. Chvíli jsem přemýšlel, a pak jsem si vzpomněl na měkký rozdělovník (U+00AD, v angličtině soft hyphen, který kodéři znají jako entitu ). A je vyhráno!

Na klávesnici měkký spojovník sice bohužel nenajdete, ale dostat se k němu můžete třeba přes mapu znaků nebo ho můžete vložit z klávesnice jako sekvenci Alt+0173.

Uživatelé desktopového klienta TweetDeck @LukasUXD a @ScottyCZE hlásí, že měkký spojovník se jim zobrazuje, kde nemá. Proto bude možná lepší používat bezrozměrnou mezeru. Tu z klávesnice nejspíš nezadáte, a tak nezbude než používat mapu znaků nebo nějaký bookmarklet. Například pomocí následujícího bookmarkletu vložíte bezrozměrnou mezeru na konec textového pole: bezrozměrná mezera.

Výsledek potom vypadá následovně:

Pokud jste napsali lepší bookmarklet (který třeba vloží bezrozměrnou mezeru na pozici kurzoru), dejte vědět, rád na něj odkážu.

Konfigurace externího skriptu v těle volající značky

Thu, 02 Jun 2011 00:51:00 +0200

Jestli se mi na novém tlačítku Google +1 pro weby něco líbí, tak je to způsob konfigurace, který používá pro externí skript. Konfigurace je provedena pomocí anonymního objektu, který je obsažen v těle značky <script> volající externí skript.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'cs', parsetags: 'explicit'}
</script>

Vzhledem k tomu, že objekt není přiřazen do žádné proměnné, musí si pro něj externí skript sáhnout přes DOM a parsovat si ho. Nějak takhle:

var konfigurace = {};
var zdroj = 'http://apis.google.com/js/plusone.js';
var skripty = document.getElementsByTagName('script');
var delka = skripty.length;

for(index = 0; index < delka; index++) {
  if(skripty[index].src.indexOf(zdroj) > -1) {
    konfigurace = JSON.parse(skripty[index].text);
  }
}

Na téhle metodě se mi líbí, že přehledně přiřazuje konfiguraci k volanému skriptu, šetří místem ve zdrojovém kódu HTML a nezanechává za sebou globální proměnné.

Nahrazení podmíněného operátoru logickým

Sat, 07 Nov 2009 23:52:00 +0100

Ode dneška přestávám v javascriptu používat podmíněný operátor v těchto případech:

var a = b ? b : c;

Místo toho si musím zapamatovat postup s logickým operátorem:

var a = b || c;

Elegantní řešení a kromě lehkého zkrácení snad i zpřehlednění kódu.

Drobné doplnění

V diskuzi, která se rozpoutala po zveřejnění tohoto zápisku na Facebooku přišel Honza Tichý se zajímavým řešením pro PHP. Od verze 5.3 je v něm možné podmíněný operátor zapisovat s vynecháním prostřední části:

$a = $b ?: $c;