Nette: zmenšení průhledného PNG, zachování průhlednosti

Při zmenšování průhledného PNG obrázku v Nette jsem měl problém se zachováním průhlednosti. Místo průhlednosti byla černá barva. Nakonec jsem problém vyřešil takto:

Kód resize je obalen alphaBlending a saveAlpha

Debian 7 (wheezy) instalace PHP 5.6

Dnes jsme se při vývoji webu eshopvikend.cz zasekli na PHP 5.3. Knihovna pro přihlášení uživatelů přes sociální sítě vyžaduje alespoň PHP 5.4

Inu, mám trochu času tak se podívám na mé VPS na kterém běží Debian 7 Wheezy a PHP 5.4.36. Většina mých projektů je na Nette (verze 2.2) nebo aktualizovaný WordPress. S přechodem na PHP 5.6 nebude problém 🙂

Po motivačním videu od Petra Krčmáře se jde na to!

Dávejte pozor a před aktualizací pro jistotu zazálohujte vaši konfiguraci! Rovněž nezapomeňte že při upgrade na PHP 5.6 na Debianu budete potřebovat Apache 2.4 (který má trochu jiné konfigurační soubory)

Ze stable repozitáře Debianu (Wheezy) není možné nainstalovat vyšší verzi PHP než 5.4. Připadá v úvahu ruční kompilace, ruční instalace zkompilovaného balíčku nebo backports.

Backports má výhodu v tom, že nainstalované programy bude možné dále aktualizovat a pokud chceme instalovat z backports musíme při instalaci zadat určitý identifikátor.

Větve Debianu:

  • stable – bylíčky z větve testing se přibližně jednou za 2 roky vezmou a překlopí do větve stable
  • testing – balíček který se 14 dní neopravoval ve větvi unstable propadne do větve testing
  • unstabe – neznamená nestabilní (lépe řečeno pohyblivá) – často přichází nové verze balíčků

Pokud chceme novější PHP, použijeme větev testing.

Ze všeho nejdřív doporučuji nainstalovat apt-show-version:

 

Nastavení výchozí větev pro instalaci balíčků

vim /etc/apt/apt.conf.d/00release

Nyní přidáme testing repozitář:

vim /etc/apt/sources.list přidáme řádek:

Uděláme update balíčků:

Podíváme se na dostupné verze PHP:

Kde vidět aktuálně nainstalovaná verze 5.4.36-0+deb7u1 a dostupná verze 5.6.4+dfsg-1 z testing větve.

Přidaný testing repozitář nená žádný vliv na instalací balíčků. Pro instalaci z testing větve je nutné uvést parametr. Přesvědčme se o tom. Zobrazme si verzi PHP která se nabízí k instalaci:

Vidíme že instalátor nabízí: Version: 5.4.36-0+deb7u1

Pokud chceme instalovat balíčky z testing větve použijeme parametr: -t testing

Nyní si zobrazme verzi PHP nainstalovaného z testing větve:

Vidíme že instalátor nabízí: Version: 5.6.4+dfsg-1 který nainstalujeme:

 

 

CoffeeScript + Node.js => Hello world

Poslední dobou ujíždím na Node.js. Neskutečně rychlý nástroj! K tomu se pokouším naučit CoffeeScript. Blog dost často používám jako “tahák” co jsem jak dělal. Pojďme si ukázat jak na první Hello World.

CoffeeScript můžeme nainstalovat globálně (bude přístupný v celém OS):

Inicilizujeme Node.js projekt – vyplníme požadované údaje, čímž se vytvoří soubor package.json:

Node přidáme jako závislost do projektu (packages.json):

server.coffee:

Spustíme coffee script v Node.js:

V prohlížeči na adrese http://localhost:5000/ vidíme výsledek

Velice zajímavý mi přijde modul express, což je minimalistický a rychlý framework pro pohodlnější generování stránek:

Spustíme příkazem

a o správné funkčnosti se opět přesvědčíme na portu 5000

Node.js crawling data

Pokud někdy budete chtít získávat obsah webových stránek, doporučuji kvůli rychlosti použít Node.js a modul nazvaný jsdom. Tento modul analyzuje webovou stránku ze které získá DOM, který můžete parsovat přes jQuery.

Před nainstalováním jsdom je nutné nainstalovat Python (verze 2.x) Při instalaci je nutné zaškrtnou volbu Python do PATH (App python.exe to Path).

Nainstalujeme jsdom:

example.js

spustíme příkazem:

 

Jak nainstalovat Grunt pod Windows

Pojďme si ukázat nástroj, který za mne dělá špinavou práci. Všechny procesy které děláte stále ručně do kola se většinou dají zautomatizovat. Já je nechávám na Gruntu aby je udělal za mne. Stroj nedělá chyby a je rychlý.

Dnes si ukážeme úvod do Gruntu. S Gruntem spolupracuje další skvělý nástroj – Bower. Ale o tom až někdy příště.

Pro zprovoznění programu Grunt je nutné nainstalovat node.js

Z webu stáhneme instalaci (tlačítko INSTALL) a nainstalujeme. Instalaci stačí odklikat. Po dokončení instalace pro jistotu restartujeme PC.

Přesvědčíme se že máme správně nainstalovaný node.js. Spustíme příkazovou řádku ( Start -> Příslušenství -> Příkazový řádek ). Do příkazové řádky zadáme příkaz node a potvrdíme klávesou ENTER:

node-test-run

Součástí každého projektu by měl být soubor package.json. Vytvoříme ho příkazem:

package.json obsahuje základní informace o projektu ( autor, verze, verzi Node, závislé balíčky a jejich verze, …) je to něco jako composer.json pro php. Pokud si projekt s tímto souborem stáhnete, jednoduše nainstalujete všechny potřebné balíčky příkazem:

Instalace Grunt

Parametr -g říká, že Grunt instalujeme globálně.

Úspěšné nainstalování Gruntu prověříme příkazem:

node-test-run-grunt

Z hlášky v konzoli je vidět že nemáme soubor Gruntfile.js pojďme si ho vytvořit (ten musíme vytvořit ručně):

Vytvořili jsme 2 tasky:

  • section – multiTast vykoná všechny tasky v sekci section
    node-test-run-grunt-run
  • only-baz – vykoná pouze 1 task ze sekce section ( section -> baz )
    node-test-run-grunt-run-1task

Neužitečný příklad výstupu, ovšem nutný pro pochopení fungování Gruntu. Příště si ukážeme zajímavější použití v praxi 🙂

Nette: handle (signál)

Předpokládejme že máme TODO list ve kterém budeme chtít vybraný úkol nastavit jako splněný.

Na takový úkon je vhodný signál:

Signál v šabloně zavoláme jednoduše:

 

Grunt – task pro automatický release nové verze

Dělám na několika doplňcích pro WordPress. Kámen úrazu je verzování. S vydáním nové verze jsem musel přepisovat verzi ve zdrojovém kódu, vytvořit nový tag v Gitu a tuto změnu commitnout a pushnout. Ale protože jsem lajdák vždy jsem na něco zapoměl…

Při vydání nové verze dělám:

  • nastavit novou verzi ve zdrojových souborech ( Version: 0.0.1 => Version: 0.0.2 )
  • coomitnout tuto změnu
  • vytvořit nový tag ( 0.0.2 )
  • pushnout tyto změny

To jsem dělal ručně do doby než jsem poznal Grunt. Nyní mám tento proces automatizovaný a tuto nudnou opičí práci za mne udělá Grunt.

Pojďme si ukázat jak. Předpokládejme nainstalovaný Grunt (o instalaci Gruntu zase někdy jindy).

Vytvoříme soubor package.json:

Nainstalujeme grunt-version:

Vytvoříme soubor Gruntfile.js:

Příkazem grunt release nastavíme v souboru my-file.php novou verzi uvedenou v package.json:

Version:           0.0.1 se změní na verzi zadanou v souboru package.json

To je solidní základ 🙂 Ale mne to nestačí. Verzi kterou chci vydat musím zapsat do souboru package.json a příliš práce to za mne neudělá…

Dělám různé releasy:

  • patch (1.2.X)
  • minor (1.X.0)
  • major (X.0.0)

Pojďmě si napsat script který bude automaticky zvyšovat verzi v souboru package.json v závislosti na vydávané verzi. Vužijeme modul grunt-update-json

Použijeme tento kód:

To už je lepší. Můžeme použít následující příkaz:

  • grunt release:patch
  • grunt release:minor
  • grunt release:major

K dokonalosti chybí pouze commit, vytvořit tag s novou verzí a push. K tomu využijeme grunt-git

Do souboru package.json přidáme následující kód:

Celý kód nakonec vypadá takto:

 

 

Nette + Texy

Pokud si zájemce o web přeje základní formátování textů, vetšinou nejprve sáhnu po Texy. Nemám rád weby které vypadají jako omalovánky (ano, tomu kdo dá tu práci aby každé písmenko ve slově mělo jinou barvu se to moc líbí ale spoustu návštěvníků to odradí). Texy je jednoduchý nástroj kterým můžete bez odborných znalostí psát HTML kód. Příklad si ukážeme na jednoduchém formuláři, jehož odesláním naformátujeme zadaný text přes Texy.

 

Pojďme si ukázat jak zprovoznit  Nette společně s Texy!

Ukázka je na poslední verzi Nette (2.2.6) a poslední verzi Texy (2.6).

Instalace Nette

Stáhneme Nette sandbox (přes composer):

příkazem se vytvoří složka nette-texy do které se nahraje Nette + sandbox. Document root pro virtualhost nasměrujeme do nette-texy/www/

Instalace Texy

nainstalujeme samozřejmě přes composer :

 

Zprovoznění Texy

Uděláme si pořádek na hřišti. Nahradíme obsah šablony pro titulní stránku: app/templates/Homepage/default.latte:

 Vytvoření formuláře

app/presenters/HomepagePresenter.php:

Máme formulář který při odeslání odešle do šablony (proměnná $text ) zadaný text.

Zapnutí Texy

Nejprve je nutné přidat Texy do neon.config aby o Nette o Texy vědělo:

app/config/config.neon:

 

 

V souboru app/presenters/BasePresenter.php je nutné vytvořit helper, který bude fomárovat text přes Texy.

V nové verzi Nette (>=2.4) se helper (filtr) registruje takto, metodu createTemplate můžete úplně vynechat):

Nejlepší cesta

Kvůli bezpečnosti, doporučuji tento způsob použití, ve kterém filtr vrací Nette\Utils\Html, který nemusíme nonescapovat. Registrujeme filter klasicky v beforeRender:

A pak již pouze v šabloně vypíšeme:

 

Integrace Bitbucket + Pivotal tracker

Zalíbíl se mi verzovací hosting Bitbucket. Oproti GitHubu nabízí neomezené množství privátních repozitářů.

Poohlížím se po trackovacím nástroji a zalíbíl se mi Pivotal tracket který je možné integrovat s Bitbucketem. Jak na to?

 

Pivotal Tracker

  • přejděte do sekce: Profile -> API token

Bitbucket

  • zvolte repozitář který si přejete propojit s Pivotal trackerem
  • Settings -> Integrations -> Hooks
  • Vyberte hook “Pivotal Tracker” a zadejte API token z Pivotal trackeru

Nyní když v commit zprávě uvedete id tiketu z Pivotal trackeru, bude commit a task propojen. V Pivotal trackeru u tasku uvitíte jednotivé commity.

Commit se s taskem propojí identifikátorem: [#123456] kde 123456 je ID Pivotal tasku

Znáte lepší trackovací nástroj, který je zdarma?

Tip liga – ročník 2014/2015

Znáte Tip ligu? Sportovní nadšenci a sázkaři určitě ano. Jedná se o Facebookovou aplikaci, která je v provozu většinou od září do července. Na každý den je vypsán 1 zápas a uživatelé tipují jeho výsledek (výhra domácích, remíza, výhra hostů). Za každý správný tip získá uživatel 1 bod. Podle počtu bodů se vypočítá pořadí. Za nesprávný tip se body nestrhávají.

tip-liga

Bylo to v roce 2012 kdy chtěl ZdendaKoran utrati jeho nechtěné dítě jménem Tip liga (s kým si ho udělal mi nikdy neřekl – asi je to tak lepší 🙂 ).  Již neměl chuť tuto hru dále rozvíjet a proto jsem se jí s radostí zhostil a začal dělat adoptivního otce. V tu dobu jsem začínal koketovat s Nette. Přepsal jsem Tip ligu do Nette + MySQL a začal se učit Facebook API. Uf, byla to fuška ale zvládl jsem to.

Od té doby uplynulo hodně času a Tip liga začínala fungovat bez chyb a se správně zadanými výsledky. Celý proces zadávání nových zápasů + zadávání výsledků jsem si maximálně ulehčil a zautomatizoval. Prakticky nemusím vůbec psát a pouze klikám. Zadávání výsledků mám rovněž v lite verzi a není problém odkliknout správný výsledek přes telefon odkudkoliv. Tím mám solidní přehled o sportovním dění 🙂

Jenomže 30.dubna 2015 ukončí Facebook podporu api v1.0 ve kterém Tip liga fungovala. Spuštění ročníku 2014/2015 jsem naplánoval na 1.9.2014 a nasadil rovnou api v 2.1 které má být funkční do 7.8.2016. Z nového api jsem trochu zmatený. U tipů proto zatím není možné sdílet tipovaný výsledek zápasu na zdi, ani není možné vidět pořadí mezi přáteli. Pokusím se tyto vlastnosti co nejrychleji zapracovat aby Tip liga neztratila žádnou funkčnost a přibývali spokojení hráči.

V ročníku 2014/2015 přeji hráčům hodně správně tipnutých výsledků a co nejlepší možné umístění.