Převod fontů se zpětnou kompatibilitou Internet Exploreru

http://www.fontsquirrel.com/

Zde se dají převádět fonty, které se správně zobrazí i v Internet Exploreru 8.

Zmenšení velikosti PDF souborů

Velikost PDF souborů se dá zmenšit o desítky mega zde. http://smallpdf.com/

Online převod formátu souborů

Pro zachování formátování při převodu z .pdf do .doc se mi osvědčil tento online konvertor:

http://www.htmlpublish.com/

Jak donutit klientské prohlížeče, aby načetly nová css a netahali jej z cache?

Buď přejmenovat css soubor a nebo, jak se píše zde použít verzovací parametry...

Online nástroj pro hledání rozdílů v textu

Jste taky tak líní, jako já a přijde vám diffování (hledání rozdílů v textu souborů) zdlouhavé?
Pak zkuste http://www.diffchecker.com/ - další z mocných nástrojů, které vyskakují na Google jako první po zadání správných klíčových slov:-)

Zakázání automatického vyplňování formulářů a oprav zadaných údajů

Stává se vám, že při vyplňování údajů do formulářů, se údaje předvyplní, začnou se podtrhávat špatně napsaná slova nebo se dokonce samy opravují podle své vůle, případně zvětšují počáteční písmena?

Vše řeší tyto parametry (atributy), které stačí přidat k příslušným input polím:

autocomplete="off" - zakáže automatické dokončování textů

autocorrect="off" - zakáže automatické opravy - obzvlášť vhodné na mobilech

autocapitalize="off" - zakáže zvětšování počátečních písmen

spellcheck="off" - zakáže kontrolu pravopisu

WTF, HTML and CSS?!

Zajímavý web, který rozhodně stojí za pár minut četby. Pojednává o problémech, na které kodéři často naráží a nedokáží si je vysvětlit.

http://wtfhtmlcss.com/

ApiGen - generátor dokumentace projektů

Pokročilejší nástroj, který na základě komentářů a struktury projektu zdokumentuje webovou aplikaci:

ApiGen

Vhodné pro rozsáhlejší projekty, v nichž ztrácíte orientaci nebo pro převzaté projekty většího rozsahu.

Barevné schéma webu

Když si nevím rady s barvami na webu, jdu sem: http://colorschemedesigner.com/

Na stránce je nástroj pro vyhodnocování vhodných kombinací barev ve webovém prostředí.

Multi Dejavu

Zdá se ti, že jsi již danou věc někdy dělal?
Zdá se ti, že se ti už někdy zdálo, že jsi danou věc už někdy dělal?
Když nad tím přemýšlíš, zdá se ti, že už jsi nad tím někdy přemýšlel?
Zmínil jsi se o tom nahlas a máš dojem, že jsi se o tom již někdy nahlas zmiňoval?

A nejsi ty náhodou kodér?

Zmenšení velikosti PNG obrázků

Často se mi pod ruku dostane obrázek ve formátu PNG, který je obvykle neoptimalizovaný a kvůli průhlednosti musí být právě ve formátu PNG. Výsledný soubor má potom velkou velikost a zbytečně zpomaluje načítání stránky.

Zvykl jsem si tento problém řešit pomocí online nástroje TinyPNG.

Do středové oblasti "Drop your .png files here" přetáhnete soubory a chvíli počkáte. Stránka vám dá najevo, že pracuje a po dokončení operace vám nabídne upravené soubory ke stažení.
Výsledné soubory mají obvykle 40-20% původní velikosti.

Celý proces pro jeden obrázek trvá cca 5 vteřin.

Custom checkbox & radio button generator

Narazili jste při kódování webu na potřebu implementovat nestandardní vzhled checkboxu nebo input radio Věc nebyla nikdy jednodušší.

Vzhledem k tomu, že IE8 již končí podpora a tak jej můžeme s veselím odpálkovat, můžeme použít online nástroj CSS Checkbox.

Nástroj na základě vámi dodaných grafických podkladů vytvoří kód potřebný pro implementaci do webu. Druhou možností je využití již předpřipravených radio inputů nebo checkboxů.

Jak na věc?

1. Otevřete si generátor.
2. Připravte si soubor - čtvercový obrázek s checkboxem nebo radio buttonem v nezaškrtnuté (nezvolené) verzi. Ten zvolte do Unchecked box.
3. Připravte si soubor - čtvercový obrázek s checkboxem nebo radio buttonem v zaškrtnuté (nezvolené) verzi. Ten zvolte do Checked box.
4. Zvolte, jestli se jedná o input radio nebo input checkbox a pokud si jste jistí, že se jedná o obrázky, na něž máte legální nárok, zaškrtněte políčko s malým textem.
5. Klikněte na Create Checkbox.
6. Web zachroustá a vám se stáhne soubor s obrázkem, vzorovým html kódem a css, které checkbox naimplementuje.

To, co se stáhne musíte samozřejmě dostat na váš web. Jak již bylo zmíněno výše, v IE8 tato metoda nefunguje.

Web fonts converter

Narazili jste na potřebu naimplementovat na stránky nějaký nestandardní, nesystémový font (písmo)? Pak jistě nejste sami, kdo čelí problému kompatibility ve všech prohlížečích.
Aby výsledné texty vypadaly stejně v IE, Firefoxu, Chrome, Opeře i Safari, musíte použít tento font v několika různých formátech.

Jak na to?

1. Najděte (získejte, vytvořte, ukradněte... čechům se meze nekladou) soubor s fontem
2. Font naimplementujte klasicky a zjistěte, že funguje jen někde (font-face)
3. Otevřete stránku fonts2web a nahrajte do ní soubor s fontem
4. Klikněte na Convert & download, web převede font do všech potřebných formátů a pošle vám soubor .zip
5. Rozbalte stažený soubor a obsah .css souborů přidejte do svých souborů s kaskádovými styly a soubory fontů dejte do správného umístění
6. Pokud něco nefunguje, máte špatně cesty k fontům

Umístění na web probíhá opět přes font-face, akorát s několika různými formáty.

Existuje ještě druhý zajímavý nástroj - Free Font Converter, který převede soubor písma na konkrétní jiný formát, který si zvolíte.

Závěrem článku je nutno podotknout, že ačkoliv jsou nestandardní fonty pěkné, profesionální design na nich nezávisí a dokáže k dokonalosti přizpůsobit fonty systémové.