CSS: Nastavte nějaký rozměr jen moderním prohlížečům díky calc()

Občas se mi při kódování CSS stává, že staré prohlížeče (zejména tedy IE 8 a starší) něco zobrazují jinak – něco je nějak širší, vyšší, jinde atd. Způsobů jak to řešit je mnoho, většinou se použije nějaký jiný způsob, místo paddingu se použije margin, prvky se jinak přeskupí atd.  Ale někdy to prostě nejde či by řešení bylo složité.

Třeba teď jsem potřeboval nějakým flexbox prvkům nastavit width: 100%, aby zabraly celou šířku svého flexbox „sloupce“. No ale protože staré prohlížeče nemají flexbox, tak se u nich použije inline-block a tomu kdybych nastavil stejných 100 %, tak zabere celou šířku rodičovského prvku.

Vyřešil jsem to tak, že jsem prvku nastavil width:calc(100%). Tomu staré prohlížeče taky neporozumí, takže prostě ten width nenastaví.

Mimochodem calc je skvělá metoda a dostupná prakticky všude, která má spoustu zajímavých a praktických využití, doporučuji kodérům nastudovat.

Otevírejte např. mailto odkazy v Gmailu a webcal v Kalendáři

Pakliže používáte nějakou webovou aplikaci, např. Gmail, pro práci s maily, jistě jste někdy narazili na problém, že jste chtěli někde kliknout na mailto: odkaz a ono se nic nestalo.

Dříve se to řešilo různými prográmy či pluginy do prohlížeče, ale už nějakou dobu umí minimálně Chrome, Mozila a Opera automaticky zaregistrovat libovolnou stránku k libovolnému URI schématu (i vlastnímu).

Chrome vám to v případě Gmailu i tuším jednou vyloženě nabídne, ale když to přehlédnete, tak už na to nemusíte narazit. Přitom je to velmi jednoduché – stačí si všimnout nenápadné ikonky vpravo v URL liště, která se tam objeví vždy, když mají stránky nějaký takový link handler k dispozici. Stačí pak kliknout, zvolit Povolit a potvrdit a služba je s příslušným handlerem spárovaná.

Podobně to umí i v Kalendáři se standardními webcal odkazy. We Windows 10 na vás možná vyskočí hláška, že je třeba to změnit v System / Default Apps / Choose default program by protocol (přiřadíte tam Chrome).

Jestli chcete prověřit současné přiřazení, či jej chcete smazat, navštivte stránku chrome://settings/handlers. (jak je to v jiných prohlížečích si vygůglete sami).

Zajímá-li vás, jak se může nějaká stránka přihlásit k nějakému takovému handleru, protože byste to chtěli třeba nějak užitečně využít ve vaší webové aplikaci, pak vězte, že je to strašně jednoduché – stačí jeden řádek a funkce registerProtocolHandler.

Např. kdyby Seznam chtěl zaregistrovat, aby jste po zadání kliknutí na odkaz s URI hledej:nějaká+fráze skočili na jeho vyhledavač, stačilo by, aby kamkoliv přidal následující skript

<script type="text/javascript">
 navigator.registerProtocolHandler("hledej",
 "http://search.seznam.cz/?q=%s",
 "Hledej na Seznamu");
</script>

Ten zajistí, že se v URI objeví ta podivná ikonka, takže pak už vás jen bude muset přesvědčit, abyste na ní klikli a je to.

Z praktičtějšího soudku – řekněme, že vyvíjíte nějakou nějakou aplikaci pro správu úkolů, která poběží někde na různých doménách různých klientů, a chcete přitom, aby si mohli snadno zadávat úkoly a posílat je libovolným programem. Takže vytvoříte třeba schéma pro task:Název+úkolu&date=21.09.2015&from=email@example.com a uživatel, který dostane takový odkaz a klikne na něj, dostane task rovnou do své aplikace na svém serveru (jednotlivé parametry si odchytíte v té aplikci).

Protože je tahle funkcionalita ve zmíněných prohlížečích už 4 roky a je takhle primitivní pro nasazení, je trochu s podivem, že není k dispozici ani např. u největšího českého mailového poskytovatele – Seznamu. Tak snad jim můj post otevře oči.

Jak zjistit zapamatované heslo v prohlížeči

Nevím jak vy, ale já si ukládám hesla v prohlížeči, páč mám různě unikátní, ale dost často pak potřebuji to zapomenuté heslo zjistit, třeba proto, že jej potřebuji napsat i do mobilní aplikace dané služby či v jiném profilu prohlížeče.

Takže když pak na mě vyskočí přihlašovací okno, kde je heslo vyplněné, ale za hvězdičkami, tak musím použít drobný fígl, abych jej zjistil – prostě změním typ příslušného password políčka něco jiného. Tedy kliknu pravým na políčko s heslem, zvolím Inspect element (Prozkoumat prvek) a v editaci elementu kliknu na type=“password“ a to „password“ (třeba) smažu a potvrdím. Heslo se pak hned objeví.

P.S.: vím, že na to existuje tuna rozšíření, ale instalovat kvůli takové prkotině nějaké rozšíření, které má pak z principu přístup k obsahu všeho co prohlížíte, považuji za nerozum.
Update: Jak mě upozornil správně kámoš, Chrome má speciální stránku, kde lze heslo také najít, ale buď si ji musíte uložit/zapamatovat, nebo se k ní proklikat přes asi 5 tlačítek a pak do ní ještě vyplnit ten web, kde jste. Tohle mé řešení je na dvě vteřiny.

MS Windows 10 to Go – počítač na USB

Takhle vypadá můj počítač s Windows 10. Ne to černé vzadu, ale ten USB flash disk, který mám na klíčích v noži od Victorinox.

Na tom flashdisku jsou plnohodnotné Windows 10, s mými nastaveními, s mými aplikacemi, s mým přihlášením a se svými soubory synchronizovanými s ostatními počítači v cloudu. Mohu jej připojit ke kterémukoliv počítači na kterém může být cokoliv (či nic), nabootovat z něj a mám hned „svůj“ počítač.

Tahle vymožnost se jmenuje Windows to Go, Windows jí nabízí standardně ve své Enterprise edici, ale nic vám nebrání ji vytvořit i třeba z vaší Home edice. Stačí vám ISO libovolné Windows 10 instalace (které si můžete stáhnout pomocí tohoto nástroje přímo z Microsoftu).

A když nemáte Enterprise edici (kde toho dosáhnete snadno tím, že dáte vyhledat Windows To Go Creator Wizard, kliknete a pokračujete podle pokynů), tak pak budete potřebovat ještě aplikaci, která z vašeho USB klíče vytvoří bootovací a nahraje na něj správným způsobem data z toho ISO souboru. Doporučuji jeden z těchto dvou:

  • Rufus – v češtině, rychlý a přehledný. Poté co v něm zvolíte „Vytvořit bootovatelný disk“ a vyberete příslušný Obraz ISO z vedlejšího výběrového seznamu, se pod tím objeví volba Windows to Go. Kliknete na Start a hotovo. Bohužel, mě to hlásilo nějakou nekompatibilní flešku (oficiálně totiž MS podporuje jen asi 10 USB disků) a po chvíli i chybu, po které to přestalo pracovat.
  • WinToUSB (stačí verze zdarma) – v angličtině, pomalý a ošklivý. V ISO file vyberete ISO s vaším Windows, Next, zvolíte disk a potvrdíte oddíly, kam se nahraje, Next a hotovo.

Pro ty kdo zdají Linux, je to něco jako Live Linux, až na to, že to funguje :-) – tedy fungují bez modlení a hackování všechny periferie a aplikace. Samozřejmě je to taky pomalé až hrůza (použijte nejlépe nějaký rychlý USB disk s minimálně 16 GB a počítač s hodně paměti, obojí optimálně na USB 3.0), ale berte to jako nouzovku. A samozřejmě tam, kde je v BIOSu zakázáno bootovat z flash disků vám to nepomůže.

P.S. standardně po startu nevidíte pevné disky toho hostujícího počítače (bezpečnost). Lze je zpřístupnit: Win+x / Správa disků / kliknout pravým na váš hardisk v dolním seznamu (nejspíše to bude Disk 0, bude u něj červená šipka dolů) / Online.

P.S.: pakliže vám stačí Google Chrome prohlížeč, Chrome aplikace, data na Google disku a nutný internet, tak vám možná postačí přihlášení s vlastním profilem v Chrome na hostujícím počítači. Nebo si uděláte podobné USB třeba s Chromixium (kde je pro tu „systémovou“ část Linux). A nebo tedy můžete použít libovolný Live Linux pro USB, třeba LinuxLiveUSB.

Nečekejte, prohlížejte si videa, ještě než se stáhnou

Možná už se vám stalo, že jste si chtěli stáhnout nějaké (samozřejmě naprosto legální) dlouhé video z internetu, třeba z UložTo či podobné služby, a chcete se na něj co nejdříve podívat, nečekat třeba 2 hodiny, než se stáhne.

Jenže Chrome stahovaný soubor ukládá při stahování přejmenovaný s koncovkou CRDOWNLOAD – nejspíše proto, že by spuštění nějakého nekompletního spustitelného souboru mohlo při troše smůli přivodit systému problém (pád systému, poničení dat atd.). Takže už to není soubor .MP4, .AVI atp. a nejde tak spustit.

Ale všechny dnes používané formáty videí počítají s tím, že se donačítají do paměti postupně, ostatně to znáte určitě i třeba z YouTube, kde se také pustí video okamžitě a nečeká se, až se stáhne celé.

Takže stačí, když prostě poklepete normálně na ten .CRDOWNLOAD soubor, neleknete se hlášky, že k tomuto formátu není přiřazena žádná aplikace, a prostě k ní přiřadíte váš oblíbený přehravač videí. A můžete rovnou sledovat, zatímco se bude video donačítat (ani přehravače s tím problém zřejmě nemají, minimálně ty co používám já, třeba VLC).

Jak na uživatelské funkce v Google Sheets (příklad funkce encodeURI)

Už jsem tu psal o vlastních funkcích/vzorcích pro MS Excel, které se od standardních VBA maker (subrutin) liší použitím Function namísto Sub a tím, že návratovou hodnotou je automaticky proměnná uvntiř této funkce, která se jmenuje stejně jako název funkce.

Uživatelské vzorce v Google Sheets se od ostatních funkcí neliší vlastně vůbec v ničem, jsou to prostě normální Google Apps Script (v podstatě Javascript) funkce a návratová hodnota se prostě řeší standardním returnem. Snadno jim lze také vytvořit nápovědu pomocí standardního JSDoc.

Bohužel většina funkcí, které někdo vytvářel a někde zveřejnil není psána správně, typickým problémem je kromě absence nápovědy také to, že nepočítají, že by někdo danou funkci použil na nějaké pole prvků a že by návratovou hodnotou také mohlo být pole prvků.

Vše ukážu na jednoduchém příkladu standardní Javascript funkce encodeURI, když byste ji chtěli použít ve vzroci v Google Sheets. Jděte do Nástroje / Editor skriptů a vložte:

/**
 * Encodes special characters, except: , / ? : @ & = + $ # (Use encodeURIComponent() to encode these characters)
 * http://www.w3schools.com/jsref/jsref_encodeuri.asp
 *
 * @param {string|Array} input The text or range of cells to be encoded.
 * @return Encoded input.
 * @customfunction
 */
function ENCODEURI(input) {
 if (input.map) { // Test whether input is an array.
 return input.map(ENCODEURI); // Recurse over array if so.
 } else {
 return encodeURI(input.toString() );
 }
}
  • Na začátku je JSDoc dokumentace, která se pak objeví v bublině, když budete funkci používat. Prvních 40 znaků je vidět už v přehledu funkcí. Nepovinná, ale velmi doporučuji
  • @param vysvětluje, jaké parametry se očekávají na vstupu. V tomto případě jeden parametr input, který může být buď string a nebo Array. Také je vidět v nápovědě
  • v @return si můžete poznačit, co očekáváte na výstupu, ale nikde to vidět není
  • @customfunction říká Google Sheets, že se jedná o uživatelskou funkci a že ji má nabízet mezi funkcemi.
  • Následuje samotná funkce v Google Apps Script / Javascriptu. Není povinné, aby byla psaná velkými písmeny, jen jsou tak psané všechny build-in funkce, tak je fajn to ctít. Tady ve script editoru jsou funkce case sensitive, v Google Sheets nikoliv, takže tam pak klidně můžete použít =encodeURI(string) jako používáte někde na webu.
  • Pak je zde jednoduchý rekurzivní hack, který využije Javascript funkci map, která zavolá vybranou funkci na každý prvek pole – v tomto případě tedy rekurzivně zavolá sebe sama.
  • A když se o pole nejedná, tak funkce převede hodnotu na string, převede jí přes Javascript funkci encodeURI a vrátí jí zpět do Google Sheets.
  • Pozor, kdybych chtěl pojmenovat funkci malými písmeny, tedy encodeURI, shodně jako je ta Javascript funkce, kterou zde volám, tak místo ní zavolá opět sebe sama a funkce se zacyklí.

Výsledek vidíte na obrázku. Všimněte si, že jsem vzorec napsal opět jen do jedné buňky, a to ve formátu B1:B, takže se propíše na všechny řádky.

vlastni-funkce

ARRAYFORMULA – důvod, proč si zamilujete Google Sheets

Mám moc rád MS Excel a jsem přesvědčen, že neexistuje lepší tabulkový kalkulátor. Ale přesto čím dál častěji používám Google Sheets a to ze dvou důvodů – snadné (a bezplatné) sdílení tabulek a funkce ARRAYFORMULA.

Ona to vlastně není až tak úplně funkce, je to jen jakýsi konstrukt, který říká, že daný vzorec se týká nějakého pole buněk, nikoliv jedné. Ano, i MS Excel má pole vzorců, jenže je zde podstatný rozdíl – u MS Excelu musíte předem označit všechny buňky, které se mají vyplnit výsledkem, u Google Sheets napíšete vzorec jen do jedné a on vyplní všechny ostatní.

Skvěle se to totiž hodí i pro řešení problému, který jsem zmínil včera, tedy když potřebujete do nějakého sloupce tabulky dát nějaké hodnoty či výpočet a chcete, aby se to automaticky počítalo u všech řádků a nemuseli řešit problémy, když nějaké řádky přesunete, přidáte, smažete.

Tedy řekněme, že máte

  • v buňkách A1 až A1000 nějaké hodnoty
  • v buňkách B1 až B1000 nějaké další hodnoty

A potřebujete do buněk C1 až C1000 dá třeba násobek hodnot v předchozích dvou sloupcích, tedy pro buňku C1 byste napsali =A1*B1

Takže vy místo toho napíšete do C1 vzorec

=ARRAYFORMULA(A1:A*B1:B)

a Google automaticky doplní všechny hodnoty. A co víc, když zkusíte nějakou hodnotu z kteréhokoliv řádku ve sloupci C smazat nebo změnti, tak ji Sheets okamžitě dopočítá zpět. Další výhodou je pak rychlost, nemáte to totiž 1000 výpočtů, ale jen jeden (byť nad tisíci řádků).

Nahrazení A1 za A1:A jsme Google Sheets řekli, aby prostě počítal od A1 až do konce sloupce A. Proto jste si asi všimli, že Sheets doplní výpočet do všech řádků, nejen do těch tisíce. Při řešení využijeme druhé úžasné funkce Google Sheets, o které si někdy povíme více a to je funkce Filter. Prostě napíšeme

=ARRAYFORMULA(FILTER(A1:A*B1:B;A1:A<>""))

Tím říkáme „Použij výpočet A1*B1 na všechny pole od A1 resp. B1 po poslední pole ve sloupci A resp. B, ale pouze pakliže příslušná buňka ve sloupci A není prázdná“.

Teď si možná říkáte, že to tak užitečné není, že toho byste dosáhli i třeba pomocí Formátovaných tabulek, které má Excel někdy od verze 2007 a které také umí vyplňovat vzorce do všech řádků. Jenže tyhle funkce v Google Sheets fungují i napříč listy. Takže si dáme další příklad:

Řekněme, že vám nějaký online systém vyjíždí CSV tabulku, kde máte seznam objednávek – ID uživatele, ID objednávky a její hodnotu. Vy si tenhle seznam natáhnete do vaší Google tabulky pomocí další skvělé funkce IMPORTDATA.

No a teď chcete mít na dalším listu seznam objednávek, které byly vyšší než 1000 Kč. Zvládnete to tímhle jedním zápisem na další list:

=ARRAYFORMULA(FILTER('List 1'!A1:C;'List 1'!C1:C>1000))

Tedy vezmi mi všechny hodnoty z A1:C, ale pouze za předpokladu, že hodnota ve sloupci C je vyšší než 1000. Úchvatné, ne? V Excelu byste to museli řešit makry či kontingenčními tabulkami, se všemi jejich nevýhodami.

A to není všechno – výstup pak můžete i seřadit podle nějakého sloupce, třeba sestupně podle posledního sloupce, díky funkci SORT

=ARRAYFORMULA(SORT(FILTER('List 1'!A1:C;'List 1'!C1:C>10);3;FALSE))

Jo a možná vás napadlo: kdybyste chtěli udělat součet všech objednávek pro jednotlivé uživatele, tak aby se jejich ID neopakovalo, můžete použít funkci UNIQUE nad sloupcem s ID uživateli a následně využít funkce SUMIF, a opět přes ARRAYFORMULA si ji natáhnout do všech řádků ke všem uživatelům.

Zmenšete PDF, PNG a JPG o desítky procent

Pokaždé, než na svůj web umístíte nějaké větší PDF, PNG či JPG, nebo než je pošlete mailem, zamyslete se nad tím, jestli náhodou zbytečně nezatěžujte příjemce/čtenáře.

Ono se sice třeba 10 MB na PDF může zdát v dnešní době málo, jenže když si vezmete, že většina lidí si otevírá maily na mobilu a u webů už to jsou také desítky procent lidí, tak taková příloha jim vezme nejen tuny času, ale i velkou část jejich limitu (a na webech často ani nepoznají, že se proklikávají do nějakého PDF). A i průměrného cca. 2Mb/s pevného připojení je znát, jestli se vám něco otevře za 5 vteřin, nebo za 20.

Řešení je přitom snadné – doporučuji službu http://smallpdf.com/compress-pdf, se kterou běžně zmenšíte PDF na čtvrtinu velikosti bez (viditelné) ztráty kvality, případně rovnou zvažte, jestli třeba jednostrákové letáky nepřevést na JPG pomocí http://smallpdf.com/pdf-to-jpg. Umí i další kousky, jako převést PDF z/do Office, spojit / rozdělit PDF atd.

Datový objem obrázků pak podobně razantně a snadno můžete změnit přes https://tinypng.com/ (nenechte se zmást názvem, zmenší i JPG), zachová se i průsvitnost PNG. Mají k dispozici i plugin do Photoshopu a API pro vývojáře, kteří by to chtěli integrovat do svých systémů, s tím že 500 úprav je zdarma, další za nějaký mrzký peníz. Používáte-li WordPress, tak je k dispozici i plugin, který vše udělá za vás.

Chrome – otevření stejné URL na jiném počítači (sdílení tabů)

Jestli třeba jako já používáte více počítačů (např. firemní/soukromý), určitě jste už někdy potřebovali na druhém počítači otevřít tab z prvního. Můžete si sice třeba poslat URL sobě samému do mailu, ale existuje i snadnější řešení.

Chrome má standardně zapnuté sdílení tabů (případně jej můžete povolit – Nastavení / Rozšířená nastavení synchronizace / Otevřené karty. Když to máte zapnuté, tak můžete prostě z hamburger menu Chromu vybrat Nedávno použité karty (případně ještě Další …) a tam vidíte i taby otevřené v Chromu na jiném počítači (pakliže jste na obou přihlášeni stejně).

Excel – automatické vyplnění hodnot ve všech řádcích

Tenhle tip jsem se dozvěděl teprve nedávno, což vzhledem k tomu, jak hodně Excel používám posledních 20 let a jak často jsem to potřeboval, je dost na pováženou.

Asi to znáte – máte v Excelu tabulku, která má tunu řádků. Vy potřebujete dát do nějakého sloupce hodnotu nebo vzorec a chcete je nakopírovat (či rozšířit) do všech řádků až do konce tabulky.

Nepochybně víte, že můžete vzít tu tečku/křížek vpravo dole myší a táhnout a táhnout, ale to je u hodně dlouhých tabulek fakt pruda.

Nebo to možná řešíte jako donedávna já, kdy jsem šel nejdříve do řádku, kde jsou hodnoty, tam jsem zmáčknul CTRL+šipka_dolů, přešel do sloupce, který jsem chtěl vyplnit, tam napsal cokoliv, pak kliknul na CTRL+šipka_nahoru, abych se dostal na tu horní buňku, kde mám vzorec, pak CTRL+SHIFT+šipka_dolů pro označení rozsahu od této buňky až po poslední buňku, načež jsem zmáčknul F2 pro aktivování vzorce v té horní buňce, a konečně CTRL+ENTER pro vyplnění dané hodnoty ve všech označených buňkách. Zní to strašně složitě, ale takhle jsem to dělal dvacet let a je to otázka méně než jedné vteřiny a nemusím sundat ruce z klávesnice.

Nebo jste si možná jako já udělali makro (doporučuji podívat se na vlastnost Range.CurrentRegion (tedy třeba ActiveCell.CurrentRegion.Rows.Count, což vám spočítá počet řádků v regionu buněk okolo aktuálně vybrané buňky).

No a nebo prostě a jednoduše uděláte dvojklik, na té tečce/křížku v pravém dolním rohu buňky, do které jste napsali vzorec, místo abyste za to táhli. Tímto vyplníte všechny následující buňky, až do konce aktuálního regionu. A pakliže máte vybráno více buněk a kliknete na tu tečku/křížek, tak Excel zkusí klasicky následující hodnoty dopočítat (tj. když budete mít v 1. řádku napsáno 1, ve druhém 2, označíte obě buňky a ve vedlejším sloupci budete mít třeba sto řádků s nějakými hodnotami, tak po dvojkliku na tečku/křížek se vyplní následujících 98 řádků hodnotami 3-100).

P.S.: kdybyste někdo věděl, jak toho dosáhnout nějakou klávesovou zkratkou, tak to uvítám.