View PDF file using JS

You have had for sure the situation when it was needed to display the content of PDF file on your webpage. In most cases the biggest problem is to get this solution work onto all the devices and without any unnecessary delay.

Naive and oldschool solution

For a very long time the only suitable solution was to insert EMBED element containing directly the URL of PDF file. The browser will then try to execute the corresponding extension to display the content. In the most cases it will try to start Adobe Reader. Solution is good, but onto devices where the browser extension to display the PDF confent is missing (some mobile devices) it will display nothing.

Code for this solution will look like this:

<embed src="http://gach.cz/wp-content/uploads/2015/06/love-banana-minions.pdf" type="application/pdf" width="630" height="275"></embed>

This will probably show you something like below (if PDF browser extension is present):

Pure JS way

Library PDF.js can be used in 2 ways. You may be able to use NodeJS pdf viewer as seen in this demo example. To get it work it is needed to run NodeJS script onto server side. The browser itself cannot be modified easily. This solution is fine if you do not need to integrate the PDF preview not directly into your webpage.

But in most cases it is needed to somehow render the PDF into your page. In this case we use the second approach and utilize mozilla / pdf.js. This solution uses the library which offers the capabilities to do basic PDF modifications as rendering, pagination, zoom, etc. It is fine, that all of those can be used very flexible together with your own JavaScript code. The bad thing is that you need to implement all the actions like pagination or zoom.

Some easy example without any advanced functions will look like this:

<canvas id="the-canvas" style="border: 1px solid black"></canvas>

<script src="http://gach.cz/wp-content/uploads/2015/06/pdf1.js"></script>
<script>
  //
  // If absolute URL from the remote server is provided, configure the CORS
  // header on that server.
  //
  var url = 'http://gach.cz/wp-content/uploads/2015/06/love-banana-minions.pdf';
  //
  // Disable workers to avoid yet another cross-origin issue (workers need
  // the URL of the script to be loaded, and dynamically loading a cross-origin
  // script does not work).
  //
  // PDFJS.disableWorker = true;
  //
  // In cases when the pdf.worker.js is located at the different folder than the
  // pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
  // shall be specified.
  //
  PDFJS.workerSrc = 'http://gach.cz/wp-content/uploads/2015/06/pdf.worker1.js';
  //
  // Asynchronous download PDF
  //
  PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
    //
    // Fetch the first page
    //
    pdf.getPage(1).then(function getPageHelloWorld(page) {
      var scale = 1;
      var viewport = page.getViewport(scale);
      //
      // Prepare canvas using PDF page dimensions
      //
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = 275;
      canvas.width = 630;
      //
      // Render PDF page into canvas context
      //
      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext);
    });
  });
</script>

This will lead to display the PDF file in pure JavaScript way:



Do it Google way!

Google makes it possible to display the PDF file and embed it into your site using iframe. Lot of people does not know about this solution. Personaly I think it is the easies and prefered solution in case you do not need any advanced actions to the PDF file. Also as a benefit this approach support much more file types then PDF. You should be able (according to documentation) preview and embed Powerpoint or Word documents preview into your webpage.

It is easy as:

<iframe style="width: 630px; height: 275px;" src="http://docs.google.com/gview?url=http://gach.cz/wp-content/uploads/2015/06/love-banana-minions.pdf&amp;embedded=true" width="300" height="150" frameborder="0"></iframe>

.. and outputs:

E-shopy a fakturační systémy rozbity jednou změnou API

V polovině toho týdne jsem programoval, jak tomu bývá, nějaké ty nové funkce do našeho volně dostupného on-line fakturačního systému Doklad24.cz. UnitTesty prošly, testy v AngularJS taky, říkám si, že tedy udělám release verzi. No, ale jak tomu tak většinou bývá, radši jsem si chtěl vše ještě jednou vyzkoušet.

Tedy zkusil jsem se registrovat na staging verzi. Proces registrace jsme zjednodušili tak, že v podstatě stačí zadat při registraci do systému minimum informací. Ty, které se nezadaly se pak následně při vytváření účtu načtou ze systému ARES. Pro jistotu, kdyby se to náhodou nepovedlo, tak uživatel po prvním přihlášení je nucen zadat data o firmě ručně. Takže jsem si prošel registrací, počkal až se mi worker postará o založení účtu a přešel na první přihlášení. A ouha, ukázala se mě obrazovka pro upřesnění a doplnění informací o firmě. Prostě takový ten klasický WTF moment.

Po kontrole IČO jsem zjistil, že je opravdu korektní. Přeci si pamatuju IČO vlastní firmy, říkám si. Marně jsem se pokoušel najít chybu někde v kódu. Prostě a jednoduše se načetl název firmy, IČO a DIČ. Informace o adrese sídla firmy zůstala prázdná. Takže prostě a jednoduše kód, který jsem převzal (a asi mnoho dalších) od Radka Hulána přestal fungovat.

Šel jsem tedy hledat příčinu. Na stránkách MFČR jsem se proklikal ke stránce  XML služby ARES a připravujíce si kafe jsem se utěšoval, že to přečtení dokumentace nezabere více jak hodinu… no, zabralo více. V popisu rozhraní jsem nenašel jakoukoliv zmínku o datu poslední změny verze či formátu dat v XSD. Tato adresa http://wwwinfo.mfcr.cz/cgi-bin/ares/darv_bas.cgi?ico= zjevně vypadala, že prostě musí fungovat OK.

Po testovacím dotazu na http://wwwinfo.mfcr.cz/cgi-bin/ares/darv_bas.cgi?ico=27074358 volání API Výpis na dotaz Basic jsem zjistil, že v bloku AA je nějak méně informací a přibylo absolutně nepoužitelné políčko AT (Adresa Textem) s obsahem: <D:AT>Budějovická 778/3a, Michle, 140 00 Praha 4</D:AT> Kde se poděla další políčka a proč se nikde o tom nikdo nezmiňuje je mi záhadou. Verze XML odpovědi je pořád stejná – 1.0.3.

Po hodinovém bádání jsem nakonec došel i k tomu, že nelze žádným rozumným způsobem na jedno volání API nyní získat informace o DIČ a sídle firmy. Takže jsem byl nucen kombinovat získaná data z Výpis na dotaz Basic a Doplňující informace k službě RES. Tento dotaz navíc získávání dat z ARES asi dvakrát prodloužil na nějaké skvělé  až 4 sekundy.

Nejhroznější mi na tom všem ale přijde, že ministerstvo proklamuje, že verze je pořád stejná. Nicméně došlo k tak celkem zásadní změně. Dále jsem se koukal, že tato změna dopadla na jeden fakturační systém, který má 61.000 zákazníků. Zde získání dat z ARES nefunguje doteď. Nedokážu si ani představit nedozírné následky této změny na různé e-shopy a home-made řešení, které již nikdo neudržuje. Hold Asseco Central Europe, a.s. to nějak asi nejspíše zazdilo…

Podle mého pátrání nejede ani třeba na iDoklad.cz a třeba ani v Pohodě (díky Michalovi za ověření :).

UPDATE: Jak jsme s Michalem Špačkem vypátrali, tak asi nemá vliv, zda je človek živnostník či nikoliv – viz IČO 72183373, kde je vše OK. Nicméně některé firmy, u kterých vše fungovalo nejedou. Třeba obě dále uvedená IČO fungovala. Nyní 24698059 (funguje) a 29209200 (nefunguje). Zjevně v tom moc neexistuje žádný klíč.

 

 

Stream.cz a https? Ani ránu…

Mám pro vás hezký příklad toho, jak se to nemá dělat s HTTPs. Vezměme si jako učebnicový příklad třeba namátkově server stream.cz. 🙂

Moderní prohlížeče jako Mozilla nebo Chrome podporují user friendly blokování obsahu (již několikrát to i mně vytrestalo). O tom, že byl obsah blokován se dozvíte ve Firefoxu tak maximálně z malé ikonky v adresní řádce prohlížeče. Chrome jde ještě dále, třeba na Linuxu neukazuje vůbec nic.

Vice třeba zde na stránkách nápovědy Mozilly: https://support.mozilla.org/en-US/kb/how-does-content-isnt-secure-affect-my-safety?as=u&utm_source=inproduct

Výsledkem je to, že https://www.stream.cz/ nejede ani ve Firefoxu a ani v Chrome. Tedy nejede v tom smyslu, že se vůbec nenačte video.

Jako bonus je pak ještě absence redirectu při zadání https://stream.cz/ což spadne na warningu neplatného certifikátu. Tedy něco v duchu:

stream.cz uses an invalid security certificate. The certificate is only valid for *.stream.cz (Error code: ssl_error_bad_cert_domain)

UPDATE: Kontaktoval jsem před publikování tohoto článku seznam.cz. Odpověď byla, že https testují (na produkci a několik dní) a prý, že tam přes https skoro žádní lidé nechodí… OK, nechám na posouzení čtenáře… 🙂

 

 

 

Validace v Doctrine modelu

Pomalu jsem se začal učit Doctrine. Ideálním zdrojem pro začátek je článek na Zdrojak.cz. I když tento je již celkem starý a pojednává v té době ještě o beta verzi Doctrine 2. Více zde: www.zdrojak.cz/serialy/doctrine-2/

Jistou dobu jsem bádal, jak nejideálněji provádět validace modelu. Chtěl jsem si napsat vlastní třídy, ale hrabání do runtime Doctrine není zrovna jednoduchý úkol.

Pokud tedy někdo bude chtít použít validace v Doctrine modelech, tak doporučuji symfony / Validator: github.com/symfony/Validator

Katalog dárků k Valentýnu

Den se ze dnem sešel, nasbíral jsem nějaký ten volný čas a pustil se do zbrusu nového projektu.

Nainstaloval WordPress, stáhl a trochu poupravil šablonu. Dokonce jsem se pustil do analýzy klíčových slov a SEO optimalizace článků. Je to fakt SEO-legrace.

V blízkých týdnech budou na stránkách přibývat nové a nové tipy na dárky k Valentýnu. A adresa je www.svatyvalentyn.cz, jak jinak, že? 🙂

Blowfish hash v PHP

Ve verzi PHP < 5.3.7 sice lze Blowfish hash získat pomocí volání metody crypt(), nicméně občas to prostě zlobí – viz CRYPT_BLOWFISH security fix details.

Pro verzi PHP >= 5.3.7 a PHP < 5.5 již má funkce crypt() bug opraven a doporučuji použít wrapper nad crypt() ircmaxell / password_compat implementující password_* funkce tak jak je známe z PHP 5.5.

Pro PHP >= 5.5 stačí použít nativní password_* funkce.

A nakonec 2 malé postřehy:

Pokud dobře nastavíte, tak se salt pro Blowfish hash generuje automaticky. Toto zvyšuje při dobrém nastavení generující fukce bezpečnost – nemusí se řešit unikátnost, nahodilost a délka saltu.  Nicméně salt je uložen v řetězci s hashem. takže nastává podobná situace jako u SHA nebo MD5 se saltem. Pokud se někdo dostane k hashům hesla, tak s vysokou pravděpodobností je ve stejné tabulce i salt. U Blowfish hashe je pak salt přímo v řetězci hashe. jedinou výhodou budiž to, že při dobrém nastavení cost factoru je brute force útok dost pomalý (v porovnání třeba s útoky na SHA1 nebo MD5) a to ikdyž útočník zná salt.

Pokud použijete Blowfish hash pro ověření hesel na stávajícím systému využívajícím hashovací funkci SHA1 nebo v horším případě pekelnou MD5 apod., tak přechod na Blowfish hash je naprosto jednoduchý a nemusí se ani generovat nová hesla nebo nutit uživatele si je měnit. U nových záznamů se uloží Blowfish hash hesla (salt generován automaticky) a použije se pro ověření klasicky password_verify. U starých hesel se stávající (starý) hash nahradí Blowfish hashem hashe původního – salt se zde v db u těchto záznamů ponechá pro účel verifikace hesla (a bude informovat, že máme použít složitější postup). Hash hesla se zmigruje na novou verzi a přeuloží u uživatelů v db pomocí password_hash(puvodni_hash, PASSWORD_BCRYPT). Ověření po přihlášení u SHA1 (v mém případě původní hash funkce pro uložení hesel) s použitím saltu bude pak u účtů se starým způsobem uložení hesla schématicky password_verify(SHA1(‚mnou zadane heslo‘ .  salt_z_db), blowfish_hash_z_db).

A poznámka na závěr. Na serverech, kde budu tuto změnu implementovat nemám možnost nastavit nové extensions do PHP, proto zde je nejvhodnější volbou bscrypt. Nicméně pokud máte na serveru možnost přidat do PHP extension použijte (díky @spazef0rze za tip) scrypt dostupný jako extension DomBlack / php-scrypt. Pro ty, co přešli (nejspíše z donucení :-)) na Zend framework 2.x je možné použít zendframework / Component_ZendCrypt.

Ohlédnutí za #develcz ^2 2013

Tento rok jsem se dostal celkem na 3 konference. V březnu první devel.cz, pak UXMasterclass Prague a nyní druhá devel.cz konference tohoto roku. Pominu-li vstávání ve 4 abych se dostal vlakem 5:30 z Brna do Prahy, bloudil metrem a nakonec dorazil několik minut před začátkem, je to vše jinak naprosto super. Cítil jsem se skoro jako David Grudl, jen jsem o tom nepsal na twiteru. 🙂 Na konference tohoto typu jezdím opravdu rád, jelikož člověk jako majitel vývojářské firmy musí mít nějaké lepší podklady než diskuze na netu k tomu aby se rozhodl, jaký framework použít, které technologie zrovna frčí atd. Mimochodem všechny tři konference mi dodaly energii pokračovat v tom co dělám, což je taky docela přínosné. Jeden den jsem se zamyslel s odstupem nad celou konferencí a rozhodl sepsat pár osobních postřehů.

Publikum

Na první konferenci v březnu jsem se trochu cítil jak za časů, kdy jsem učil na VUT. Prostě jako bych koukal na osazenstvo nějaké přednášky bakalářského oboru. Nyní jsem byl docela překvapen, že ubylo batůžkářů, lidí v kapsáčích, či s trekovou obuví. Dokonce věkový průměr se zvýšil a byl jsem rád, že ho nezvyšuju jen já. Prostě celkově publikum mě přišlo mnohem více fajn.

Přednášející

Pro mě jedním slovem: Šok (ale s dobrým koncem). Přirovnal bych to asi k tomu, když hokejoví trenéři kdysi povyhazovali skoro celé hokejové repre, nechali tam Davida Jaromíra Jágra, kterého nasadili vždy na 5 minut na led, jelikož bez něj to není hokej, nahnali hromadu nováčků, o kterých skoro nikdo nesledující denodenně hokej neslyšel a přizvali jednoho člověka ze zámoří aby chválil, jak kluci z Česka super hrají, ikdyž nebyli nikdy v NHL. 🙂

Nicméně i přes to, že ubylo známých jmen se úroveň konference zachovala a osobně mi přišla i zajímavější než v březnu.

Honza Tichý a jeho přednáška o tom, proč si nezakládat vývojářskou firmu mě mluvila v 80% obsahu z duše. Jen v jedné věci jsme se rozcházeli. Na rozdíl od Honzy kdybych se mohl znovu vrátit o tři roky nazpět a rozhodoval se o firmě, tak bych do toho stejně zas a znovu šel. Miško Hevery nezklamal. A i přes to, že jsem na jazykovky.cz jsem hledání v AngularJs neprogramoval, ale jen řídil vývoj této části, tak i přes to mě přednáška hodně dala. Skoro vše se dalo totiž hezky pochopit. A úplně nejvíce se mě líbila přednáška o vyhlídkách pro verzi angularJS 2.x. Nemůžu ani pominout Miškovu česko-slovensko-angličtinu. Pobavilo mě taky, když se Miško ptal, kdo zkoušel spojovat AngularJs s jQuery UI. Přihlásil jsem se snad sám a Miško s úsměvem odvětil: „je to troušku tricky, že?“. Jen sem si pomyslel, že pokud „tricky“ znamená označení pro 6h sprostého nadávání, tak asi má pravdu. Je to „tricky“. 🙂

Karel Smutný hezky vysvětlil, k čemu jsou dobří projektoví manageři, proč nás infiltrují, proč mají telefon s  Windows Mobile a objedvají výlučně sami. Borek Bernard a přednáška o TypeScriptu taky stála za to. Je prostě stále nemůžu přijít na chuť něčemu, co má statické datové typy. V AngularJs 2.x budou datové typy dynamicky, na což se hodně těším. Přednáška Ondry Žáry o web socketech byla poučná a technicky na hodně pokročilé úrovni. A i přes to, že jsem se o sítě kdysi zajímal jsem se dozvěděl hodně nových věcí.

Nejvíce mi i přes to dala přednáška Martina Michálka. Poslední dobou se čím dál tím více chci ubírat cestou responzivního designu. Martin ukázal, že to má smysl, ikdyž mě pořád trápí to, že hodně firem na tento směr vývoje kašle a je těžké zákazníky přesvědčit, že jim to něco přinese. Určitě si o tomto tématu taky zjistím více, stojí to za to.

The Team

Samozřejmě za vším stála super organizace, které se nedalo nic vytknout a vše klapalo jak má. Aspoň jsem si nevšiml žádného většího problému. Kromě toho přejmenování Ládi Prskavce, čemuž jsem se nenápadně smál taky. Sepisovali jsme totiž žádost na financování školení z fondů EU a zde jsem těsně před odesláním upravoval u Jiřího Prskavce křestní jméno.

A co zlepšit?

Všiml jsem si dvou věcí. Na twitteru to moc nežilo na to, že v přednáškovce bylo 297 mužů a 3 ženy. Což je škoda, mohlo by být pak více postřehů k zamyšlení. A druhou věcí je to, že by bylo fajn nějak spojit účastníky mezi sebou. Dát jim prostor se seznámit, popovídat si, přidat se navzájem na LinkedIn apod. Ono i o tom by to mělo být. I přes to, že jsem docela společenský typ mě bylo blbé se k někomu vecpat ke stolečku u kafe. A když se mě to podařilo, tak většinou tito lidé byli na míle vzdálení PHP a UX. Ikdyž dělali celkem zajímavé věci. Ono bylo by zajímavé udělat „diskuzní kafe stolečky“ rozdělené podle oboru činnosti. A pak pro každého projekťáka stoleček separátní aby nás neinfiltrovali. 😀

Toť moje shrnutí. Kluci z devel.cz a zdrojak.cz a všichni organizátoři, odvedli jste super práci!

Kde soudruzi ze stream.cz udělali chybu

S velkou slávou přišel před 2 dny redesign stream.cz. Osobně se mi nové stránky líbí, ikdyž jsem slyšel od kolegů i opačný názor. Třeba to, že jsou nedomyšlené, uživatelsky neotestované a na co že mají ty oční kamery v Seznamu, když je určitě nepoužili.

Jediné co mě zarazilo na plné čáře a nechci být urýpaný, je zachování starých adres. Chápu, že se to může stát, ale jedničce na českém trhu a u projektu, který těch odkazů z googlu a jiných stránek má mraky?

Nehledě na to, že k tomuto účelu má asi sloužit old.stream.cz.

EDIT: Jen co jsem seznam_cz napsal na twitter a dopsal tento článek, je vše opraveno. Kluci, jste rychlí… 

Stále staré adresy nefungují dobře. Třeba http://www.stream.cz/peklonataliri/838729-tradicni-ceske-potraviny způsobí chybu. Je zřejmé, že rewrity jsou podle ID videa, které se po migraci na novou verzi změnilo. Zde důkaz (jak poznamenal vtipně kolega Bedřich Hovorka na mém FB) http://www.stream.cz/od-sousedu/838729-nemecke-fekal-porno Žádné HTTP 302 nebo 404, natvrdo chyba…

A nyní nově zde http://www.stream.cz/porady/peklonataliri nefunguje ani jeden odkaz na video. Tedy přechod na video zatočí kolečkem a ukáže seznam pejska…

peklo

google_hledani

 

stream

 

 

Louis XIII za 5Kč, proč ne. :-)

O bezpečnosti českých eshopů bylo napsáno mnoho. Ale to, čeho jsem dokázal níže mě pobavilo.

ludvik

 

AVG pod útokem hackerů

Stránky AVG.com byly shozeny Anonymous Palestine.

Žádné stupidní DDoS. Hezky celé… Nyní stránky ukazují chybu. Ale z Google cache je možné si přečíst něco o Palestině a Sionitech… http://webcache.googleusercontent.com/search?q=cache:Z73IqjjfqHcJ:www.avg.com/+&cd=1&hl=fr&ct=clnk&gl=fr

avg

←Older