Blog

Rozhovor s Borkem Bernardem o VersionPressu a WordPressu

Vydal jan.bien / 2.3.2016  23:10 / Trvalý odkaz / Přidat komentář

VersionPress je revoluční technologická hračka, startup a technologická firma. Tipuji, že VersionPress během několika let velmi významně přispěje ke změně WordPress platformy.

Nejzákladnější myšlenka VersionPressu je zcela prostá: jakákoliv změna na WordPressem poháněném webu vytvoří commit do git repozitáře. A to nejen na na úrovni souborů (na tom nic není), ale i na úrovni databáze (a to je ta revoluční „těžká“ část). Prostá myšlenka, která však otevírá zcela nový svět.

(Pokračování textu…)


Vzhůru do CSS3, o kaskádových stylech česky

Vydal jan.bien / 14.9.2015  13:08 / Trvalý odkaz / Komentáře (2)

Knih o moderní (rok 2015) a poctivé UX vývojařině (HTML a CSS kodéřině) v češtině mnoho nevyšlo (vyšly vůbec nějaké?). Proto jsem ani minutu neváhal podpořit Martin Michálka nákupem jeho elektronické knihy Vzhůru do CSS. Martinova osvěta si podporu rozhodně zaslouží.

(Pokračování textu…)


Rezervované názvy parametrů ve WordPressu

Vydal jan.bien / 21.8.2015  13:23 / Trvalý odkaz / Přidat komentář

Při odesílání parametrů v HTTP požadavcích (proměnné v $_GET, $_POST a $_REQUEST), například při odesílání formulářů nebo přidávání parametrů do adres, je třeba myslet na to, že některé názvy jsou vyhrazené WordPressem. Pokud bych některý z vyhrazených parametrů použil pro své data (například pro název políčka formuláře), mohl bych nechtěně ovlivnit výstup a chování stránky.

(Pokračování textu…)


Základní optimalizace rychlosti načítání webu

Vydal jan.bien / 20.8.2015  13:59 / Trvalý odkaz / Přidat komentář

Nedávno jsem tu psal o extrémním tuningu rychlosti načítání webu skrze kritická css a asynchronní načítání stylů a scriptů. Pár dnů po vydání článku mou dílnu opustil web Optika Anděl, na kterém jsem tuto metodiku aplikoval. Klientce jsem se pak při předávání webu poslal odkaz na PageSpeed Insights a vyzval ji, ať najde web s lepšími čísly, načež jsem si pak dva dny připadal jako borec.

Takový tuning je ale docela sofistika, která mě jako autora šablony vede k celkem bizarní práci s technologií. Dá také víc práce to zautomatizovat a vnáší to do vývoje i webu samotného další potenciální místo pro vznik chyb. Také ne vždy je úplně vhodné to takhle „přehánět“, nebo na to jen není prostor. Pak je vhodnější zvolit optimalizaci základnější, obecně již celkem známou, která spočívá ve dvou úkolech:

  1. Spojit a minifikovat všechny javascripty a stylopisy do jednoho souboru = snížit tak počet HTTP požadavků a množství dat.
  2. Všechny javascripty připojit až na konci stránky = neblokovat javascriptem vykreslení stránky.

Tento tuning light je celkem standardní, dobře se automatizuje, lze ho bez kodérova zásahu použít i na již hotové správně napsané šablony, a měl by fungovat i se slušně napsanými pluginy.

Ve WordPressu pak může tuto optimalizaci provádět i člověk bez hlubších znalostí skrze některý z pluginů pro tento účel vytvořených. Mně se líbí tyto dva:

js-css-script-optimizer-options

Tož tak.


Jak u Gravity Forms spojit a přesunout scripty do patičky webu

Vydal jan.bien / 20.8.2015  13:55 / Trvalý odkaz / Přidat komentář

V minulém článku o slávě formulářových pluginů jsem si postěžoval, jak se Gravity Forms nedají naoptimalizovat tak, aby nebrzdily rychlost načítání frontendu. Asi mě to nějak podvědomě vyhecovalo či co … uplynulo totiž pár dnů a jednoho rána jsem se se probudil s myšlenkou, jak by to jít mohlo. Sedl jsem za stroj, a za chvíli už mi bylo jasné, kudy se vydat. A do druhého dne jsem měl celé řešení, které zde dokumentuji.

(Pokračování textu…)


Lesk a bída formulářových pluginů pro WordPress

Vydal jan.bien / 11.8.2015  15:58 / Trvalý odkaz / Komentáře (4)

Kontaktní formulář je součástí snad každého webu a pro WordPress je na to tvorbu formulářů hromada pluginů. Přečíst si o nich člověk může v řadě srovnání, namátkou u Elegant Themes nebo WPMU DEV. Tímto článkem bych k nim rád přidal pár poznámek z pohledu agenturního vývojáře a kodéra.

(Pokračování textu…)


Spouštění úloh na příkazové řádce ze Sublime Text (ve Windows)

Vydal jan.bien / 23.6.2015  12:16 / Trvalý odkaz / Komentáře (1)

Moc jsem si k produkci veškerého kódu oblíbil textový editor Sublime Text. Poslední dobou jsem si ho docela vytunil, abych mohl jet řadu úkonů na klávesové zkratky a autopilota, čímž šetřím mentální energii na kreativní práci. A jak přibývá projektů, tak má taková optimalizace docela velký efekt.

(Pokračování textu…)


O rychlosti webu, asynchronním načítání, kritických CSS a osudu zlatých kolovrátků

Vydal jan.bien / 10.6.2015  14:00 / Trvalý odkaz / Komentáře (7)

Pár týdnů jsem nebyl na žádném školení, tak jsem si udělal radost a nadělil si pokročilý responzivní design u Martina Michálka. Velká část dne jsme si povídali o rychlosti načítání webů, která je na datových tarifech žalostná. Rád bych si sesumíroval všechny s tím související myšlenky, dokud je mám v hlavě.

Pokud jde o rychlost webu, tak jako webmasteři tradičně uvažujeme o celkové velikosti stránky. Snažíme se stačit celkovou velikost stránky o těch pár desítek nebo stovek kB. Je to přístup legitimní, avšak těžkopádný, tvrdý a nemusí být ani moc efektivní. Může vést také k celkovému ochuzení webu o uživatelský zážitek, přehnané kompresi obrázků, k tvorbě nudných webů z minulého století, či k zapomenutí na dobré vývojářské návyky.

Ono totiž možná není až tak úplně důležité, jak dlouho tvá načtení celého webu (skutečná rychlost), ale spíše, jak je servírován uživateli (vnímaná rychlost). Odstrašující příklad, jak servírovat uživateli web, je velký kolovrátek přes celý web, který zmizí a zobrazí web, až se vše kompletně načte a zpracuje. (A to si chtěl uživatel zrovna jen zjistit telefonní číslo z hlavičky webu.)

(Pokračování textu…)


Konzistentní adresy médií ve WordPressu

Vydal jan.bien / 3.6.2015  14:00 / Trvalý odkaz / Přidat komentář

Když uživatel ve WordPressu vloží fotogalerii do stránky a odkazy nastaví na „stránku se zobrazením souboru“, pak adresa stránky detailem fotky bude v tomto formátu:

example.cz/jmeno-stranky/jmeno-prilohy/

gallery-link-page

URL jméno (slug) přílohy, v naší ukázce „jmeno-prilohy“, se implicitně vygeneruje z názvu nahrávaného soubory. To není moc šťastné, protože uživatelé často nahrávají nekonzistentně (a často i nevhodně) pojmenované obrázky. Adresy jsou potom tak říkajíc každý pes, jiná ves.

Proto je vhodné zajistit, že se URL jméno přílohy po nahrání nastaví do konzistentního formátu. K tomu se hodí akce add_attachment, která se vyvolává vždy po nahrání nového média. V přivázané funkci pak lze upravit „post_name“ do celkem libovolného formátu.

Takhle vypadá snippet, který nastaví URL jméno na znak „a“ následovaný ID číslem přílohy, adresa pak bude v tomto formátu:

example.cz/jmeno-stranky/a123/

Snippet stačí přidat k šabloně do souboru functions.php:


add_action( 'add_attachment', 'my_modify_attachment_slug');

function my_modify_attachment_slug ($post_id) {
	wp_update_post(
		array(
			'ID' => $post_id,
			'post_name' => 'a'.$post_id
		)
	);
}

Zde je pak ke stažení hotový plugin s tímto snippetem. Plugin stačí nainstalovat a aktivovat.

Tož tak.


Výstupní checklist – přesun webu do produkce

Vydal jan.bien / 27.5.2015  14:00 / Trvalý odkaz / Komentáře (2)

Při vývoji webů moc rád používám různé checklisty. Díky nim se mohu soustředit na vývoj samotný a nemusím myslet na žádné další věci kolem. Přitom mi zaručují, že mi při vývoji málokdy proklouzne nějaká zásadnější chyba.

Odškrtáváním checklistů končím každou fázi vývoje. O těchto fázích se tu ještě rozpovídám, dnes bych si vzal na paškál jeden z mých nejdůležitějších checklistů, který se jmenuje „přesun do produkce“.

Ten přichází na řadu až na úplném konci vývoje webu. Web je již komplet připraven, otestování a schválen a já jej „pouze“ přenáším z vývojové adresy na ostrou produkční adresu. To je klíčová chvíle — odteď už nový web vidí všichni uživatelé.

Pokud zde proklouzne nějaké chyba, dotkne se ostrého produkčního webu a může mít zásadní dopad. Proto je velmi důležité tento krátký checklist pečlivě projít a nic nepřeskočit.

1) Zkontroluj vždy:

2) Zkontroluj, když to dává smysl:

Tož tak. 🙂


Další stránka »