Browsed by
Archiv autora: Honza Novák

React Workshop

React Workshop

Připravujeme další z našich otevřených vývojářských workshopů, tentokrát zaměřený na React, který se uskuteční v sobotu 25.2.2017 od 10h v Plzni na adrese náměstí Republiky 28 (https://www.id-sign.com/kontakt). Místo může být v případě velkého zájmu změněno, proto prosím sledujte naší FB stránku ať vám neuniknou žádné změny. K akci je rovněž i vytvořena FB událost a registrovat se lze na srazy.info

V průběhu workshopu vás Jarda Šnajdr provede základními principy Reactu, vysvětlí klíčové vlastnosti a pokud si přinesete svůj počítač, tak vám pomůže napsat vaší první reactí aplikaci :-) Plánovaná osnova workshopu je následující:

  • Základní principy a proč je React tak populární?
  • Komponenty, rendering, virtuální DOM
  • Změny stavu, obsluha událostí
  • Flux, Redux, Immutable – architektura aplikace
  • Jak optimalizovat rychlost a spotřebu paměti

Pro koho je workshop určen? Pro všechny zájemce o React, kteří chtějí pomoci se začátkem, mají alespoň základní znalost javascriptu a ES6 syntaxe a v počítači funkční npm příkaz. Pokud něco z toho nesplňujete, tak čas zbývající do workshopu můžete vyplnit nápravou.

Přednáška o Symfony na ZČU

Přednáška o Symfony na ZČU

Rádi pomáháme komunitě kolem PHP a Symfony. Vůbec jsme neváhali, když nás oslovil Martin Dostál ze ZČU – jestli bychom nepředstavili Symfony v rámci předmětu KIV/WEB. Trochu mě znervóznila informace, že si tuto nepovinnou přednášku zapsalo 80 studentů – adventní čas si ale vyžádal své a tak jsme byli nakonec rádi za 8 účastníků :-) Mírná nervozita zůstala, když v první řadě zasedl guru všech českých programátorů – Pavel Herout.

Jednalo se o klasickou přednášku, tedy bez společného programování. I tak doufám, že jsme těm 8 statečným Symfony trochu přiblížili a provedli je prvními krůčky. Osnovu přednášky jsme na základě našich zkušeností připravili z těchto témat:

  • Co je to framework (a Sf obzvlášť)?
  • MVC pattern
  • Od Request k Response, Routing
  • Šablony, TWIG
  • Formuláře, validace
  • Moderní aplikace
  • Profiler

Zajímáte se také o Symfony a chtěli byste s pomoci s prvními krůčky, nebo jej již používáte a měli byste chuť pokecat? Napište nám – určitě společně něco vymyslíme :-)

Fotografie z přednášky

Naučte se s námi React nebo Symfony

Naučte se s námi React nebo Symfony

Připravujeme krásný projekt, který bude startovat ve více zemích EU a má potenciál ovlivnit určitý trh obdobně, jako bezrealitky.cz ovlivnily realitní trh. Tentokrát v celoevropském měřítku.

Technicky se jedná o frontend v Reactu a backend v Symfony. Zdatní frontend developeři, kteří umí, nebo mají chuť naučit se React by byli velmi vítané posily týmu. Obdobná nabídka platí i pro PHP vývojáře, kteří buďto mají zkušenost se Symfony, nebo mají chuť se jej naučit pod vedením zkušených borců :-)

Více se o nás můžete dozvědět na stránce o nás, co jsme již dokázali na přehledu našich projektů a koho hledáme a co nabízíme na stránce kariéry v iD-SIGN.

Ke kontaktu a zvídavým otázkám můžete využít jak kontaktní formulář, tak i email info@id-sign.com. Rádi vás přivítáme! :-)

Hledáme v databázi dle velikosti průniku polygonů

Hledáme v databázi dle velikosti průniku polygonů

Žijeme v době elektronických udělátek. Téměř všichni máme u sebe nějaké chytré zařízení, které nás zásobuje informacemi a zároveň o nás informace ukládá. Včetně naší polohy. A občas se musí najít někdo, kdo tyto informace zpracuje :-)

Naštěstí databáze mají podporu pro prostorové (spatial) funkce a tím nám to velmi usnadňují. Úkoly jako hledání bodů v libovolném polygonu, zjišťování průniků nebo měření vzdáleností jsou díky této podpoře triviální záležitostí. Co když ale chceme najít všechny polygony, které leží v určeném polygonu z více než polovinou své plochy? Tam už je potřeba trochu zapojit geometrii a zkombinovat dostupné funkce. A abych nemusel pořád dohledávat jak přesně to zkombinovat, tak vznikl tento blogový zápisek :-)

Prostorové funkce

Prostorové funkce, které využijeme, a co o nich říká dokumentace:

  • ST_Area(g1) – vrací plochu geometrie s přesností na 2 desetinná místa.
  • ST_Intersection(g1, g2) – vrací novou geometrii, která reprezentuje průnik geometrií g1 a g2.

 

Popis řešení

Řešení je příjemně jednoduché a stručné. Necháme databázi u prohledávaných polygonů spočítat jejich plochu a tuto plochu zmenšíme (vydělíme v takovém poměru) na velikost, kterou hledáme (50% = /2 nebo * 0.5 atd). K tomu si necháme spočítat velikost průniku s porovnávaným polygonem a tyto dvě hodnoty aritmeticky porovnáme. Hotovo :-)

Příklad v SQL syntaxi vypadá cca následovně (testováno v mysql, nicméně postgresql by měl být stejný):


SET @shapeToCompare = ST_GeomFromText('polygon((0 0, 10 0, 10 10, 0 10, 0 0))');
SET @moreOutside = ST_GeomFromText('polygon((9 9, 14 9, 14 14, 9 14, 9 9))');
SET @moreInside = ST_GeomFromText('polygon((3 3, 11 3, 11 11, 3 11, 3 3))');

SELECT (ST_Area(@moreOutside) * 0.5) < ST_Area(ST_Intersection(@shapeToCompare, @moreOutside)) as result;
+--------+
| result |
+--------+
|      0 |
+--------+
1 row in set (0.00 sec)


SELECT (ST_Area(@moreInside) * 0.5) < ST_Area(ST_Intersection(@shapeToCompare, @moreInside)) as result;
+--------+
| result |
+--------+
|      1 |
+--------+
1 row in set (0.00 sec)

 

V reálné situaci při práci s databází proměnné jednoduše nahradíme názvy sloupců a vše bude fungovat stejně. A byť ten příkaz vypadá relativně složitě, jeho výsledek lze ukládat do query cache.

První Symfony workshop pro začátečníky je za námi

První Symfony workshop pro začátečníky je za námi

V sobotu 13.8.2016 jsme pro vás uspořádali první Symfony Workshop a zpětně si troufnu tvrdit, že snad i úspěšně :-) Dorazilo 12 zájemců, kteří dali svojí sobotu všanc naději, že se dozví něco nového ze světa Symfony. Začali jsme v 10h a pro dopolední část připravil Martin Jedlička přednášku o základních principech a komponentách Symfony. Pokusili jsme se vysvětlit především ty části, které mátly i nás při našich začátcích se Symfony, nebo jsme nepoužívali správně. Největší důraz jsme kladli na vysvětlení principů Dependency Injection a co to je Service Container. Pomáhaly nám i otázky z publika, takže jsme snad pár nejasností skutečně objasnili.

Poté následovala přestávka, společný oběd, rychlý pokec a mohli jsme se pustit do praktické části :-)

V ní jsme začali instalací Symfony a vytvořili jsme si první projekt. Na vyzkoušení základních principů, které předtím Martin popisoval v teoretické části jsem připravil koncept velmi jednoduché aplikace pro ukládání kontaktů do databáze. Tu jsme si naprogramovali a vyzkoušeli si tak práci s Controllery, Action, Routování, práci s twigem, Entitami, formuláři, a validaci dat z formulářů. Nadefinovali jsme si i vlastní službu pro práci s databází přes Doctrine a tu jsme volali přes Service Container.

Odezva byla kladná, takže nám nevzala chuť do dalších přednášek a akcí :-)

Pokud vás mrzí, že jste u tuto akci přišli, tak nám dejte vědět a zkusíme najít další vhodný termín. Rádi bychom připravili přednášky i pro zkušenější vývojáře v PHP s tématy jako testování reálných aplikací, vaše struktura kódu a projektu, nasazování produkčních verzí atd. Určitě bude i něco pro zájemce o NodeJS a asynchronní programování.

Chcete mít jistotu, že vám žádná naše akce neuteče? sledujte náš Facebook, nebo Twitter – všechny akce budeme vyhlašovat vždy s dostatečným předstihem :-)

Pár ilustračních fotografií

workshop1

workshop2

workshop3

Jak na nechtěné horizontální scrollbary

Jak na nechtěné horizontální scrollbary

Když kóduji stránky, tak se mi občas u složitějších responzivních šablon stane, že nějaký element přesáhne šířku dokumentu a způsobí horizontální scrollbary. Ne vždy si toho rychle všimnu, protože k tomuto přetečení může docházet jenom při některých šířkách a i oprava se může zvrhnout v detektivní práci.

Mazání jednotlivých nodů dokud přesah nezmizí nevede vždy rychle k cíli. Se zkoumátkem jsem také ne vždy uspěl. Využíval jsem i Firefox a jeho režim 3D pohledu, který dokázal vykreslit hranice všech vrstev ve 3D včetně hranic základního dokumentu. Tento režim byl již ale z firefoxu odstraněn a tak nezbývalo podívat se po jiném řešení.

Na CSS-Tricks jsem našel skvělý článek https://css-tricks.com/findingfixing-unintended-body-overflow/ s šikovným snippetem, který vám po zkopírování do konzole najde všechny viníky a výpíše je v seznamu.


var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Pokud podobný problém občas řešíte i vy, tak to také zkuste takto. Pokud vám to pomůže, tak enjoy :-)

Apache log a analýza podezřelého provozu

Apache log a analýza podezřelého provozu

Při správě serveru se často objeví situace, kdy potřebujeme prověřit podezřelý provoz na webserveru. Provozujeme linuxové konfigurace s Nginx pro statický obsah a zároveň jako proxy pro Apache a PHP requesty a stav monitorujeme pomocí Muninu. Čas od času se na některém ze serverů objeví neobvyklé špičky v množství požadavků na server s prudkým nárustem zatížení. Tehdy přichází na řadu analýza logů abychom prověřili příčinu takového stavu a reagovali na případné „stahovače“, kteří se utrhli ze řetězu. K tomuto účelu používáme několik utilitek, které dle potřeby kombinujeme – např. goaccess, apachetop, iftop, server status atd.

Nejvíce se mi však osvědčilo zřetězení několika základních linuxových příkazů, díky kterým si mohu log rychle rozparsovat a zpracovat tak, aby mi rychle okamžitě zobrazil podezřelé IP adresy z jednoho, nebo více logů najednou, v libovolném časovém úseku a pro libovolné url.

IP adresy s nejvíce přístupy

Následující sled příkazů dokáže rozparsovat všechny apache logy v adresáři tak, že dokáže zobrazit 20 na server nejčastěji přistupujících IP adres v aktuální den (v tomto případě 22. srpna 2015) v čase mezi 13:00 až 13:59:59. Pokud je potřeba projít jiný den než aktuální, tak se musí upravit pattern pro vypisované soubory, protože ty již budou mít na konci číslo jak staré jsou – např. access.log.2 atd.

cat *-access.log | grep "22/Aug/2015:13" | awk '{ print $1 }' | awk -F "." '{ print $1 "." $2 "." $3 "." $4}' | sort | uniq -c | sort -n | tail -n 20

Příkaz by šel určitě napsat i jednodušeji, ale toto provedení má důvod ve snadné úpravě pro filtrování celých segmentů. Když si jej totiž spustíte v této podobě, tak se vám může zobrazit výpis podobný tomuto:

242 195.250.131.154
242 195.250.131.167
251 195.250.131.133
251 195.250.131.169
272 195.250.131.185
279 77.48.246.241
280 195.250.131.150
302 195.250.131.171
321 178.77.233.149
330 94.231.9.72
334 195.250.131.149
345 84.42.146.94
351 207.46.13.24
355 157.55.39.199
383 207.46.13.55
411 195.250.131.172
535 77.75.76.167
949 195.250.131.130
49823 127.0.0.1

Na první pohled v ní žádná vnější IP adresa nepůsobí výrazně vyšší provoz než jiné. Když si však upravíme příkaz tak, aby sloučil dohromady /24 segmenty (tj. ignorujeme poslední část IP adresy):

cat *-access.log | grep "22/Aug/2015:13" | awk '{ print $1 }' | awk -F "." '{ print $1 "." $2 "." $3}' | sort | uniq -c | sort -n | tail -n 20

Tak se nám v nových výsledcích hned jeden významně větší zdroj provozu ukáže:

235 109.81.210
236 212.79.106
242 37.48.34
247 109.81.209
262 78.108.103
279 77.48.246
282 109.81.211
316 66.249.78
321 178.77.233
330 94.231.9
334 109.81.208
342 194.228.20
345 84.42.146
347 194.228.13
483 157.55.39
535 77.75.76
816 207.46.13
9448 195.250.131
49823 127.0.0

K výsledku jsme se dokázali dostat během chvíle a nyní může následovat prověření co konkrétního a jak systematicky se stahovalo. Naše reakce pak závisí na okolnostech a dalších zjištěných informacích.

Nejčastěji zobrazené URL

Sled příkazů lze rovněž snadno upravit tak, aby zobrazil i seznam nejčastěji požadovaných URL. Pokud si tedy chceme zobrazit např. jaké nejčastější požadavky na URL chodili z podezřelého segmentu, který jsme v předchozím zkoumání objevili, tak to lze jednoduše takto:

cat host-access.log | grep "195.250.131" | grep "22/Aug/2015:13" | awk '{ print $7 }' | sort | uniq -c | sort -n | tail -n 20

A jako výsledek se nám může zobrazit něco takového:


42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_offer_pronajem&page=4
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_offer_pronajem&page=5
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_offer_pronajem&page=6
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_offer_spolubydleni&page=2
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_offer_spolubydleni&page=3
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_offer_spolubydleni&page=4
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_offer_spolubydleni&page=5
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_offer_spolubydleni&page=6
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_request_spolubydleni&page=2
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_request_spolubydleni&page=3
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_request_spolubydleni&page=4
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_request_spolubydleni&page=5
42 /vypis/nabidka-prodej/nebytovy-prostor?aType=estate_request_spolubydleni&page=6
42 /vypis/nabidka-prodej/rekreacni-objekt?aType=estate_offer_prodej&page=6
46 /vypis?aType=estate_request_spolubydleni&estatetype=kancelar
47 /vypis?aType=estate_offer_prodej&estatetype=kancelar
47 /vypis?aType=estate_offer_pronajem&estatetype=kancelar
47 /vypis?aType=estate_offer_spolubydleni&estatetype=kancelar
47 /vypis?aType=estate_request_prodej&estatetype=kancelar
47 /vypis?aType=estate_request_pronajem&estatetype=kancelar

Pochopením jednotlivých částí můžeme celý příkaz snadno upravovat a získat tím velmi silného pomocníka při práci s logy. Během vteřiny tak můžeme vyfiltrovat v danou chvíli pro nás nejdůležitější informace z gigabajtových logů, které obsahují miliony záznamů.

Získání GPS polohy v prohlížeči

Získání GPS polohy v prohlížeči

UPDATE:
Prohlížeč Chrome od verze 50 považuje informace o poloze uživatele za soukromá data a přes Geolocation API je zpřístupňuje pouze na stránkách zabezpečených HTTPS protokolem.

========================

Mobilní telefon máme v kapse skoro všichni a snadno jsme si zvykli, že jsou zobrazované informace přizpůsobené naší poloze. Je to komfortní, dokáže to ušetřit spoustu času a přitom je velmi jednoduché se prohlížeče na aktuální polohu zeptat.

Využívá se k tomu Geolocation API, které má dnes již širokou podporu, viz. caniuse.com. Komunikace s API je velmi jednoduchá a stačí ošetřit několik možných stavů.

Definice metody geolocation.getCurrentPosition je do velké míry samovysvětlující:

 navigator.geolocation.getCurrentPosition(success, error, options) 
  • v success poskytujeme callback pro úspěšně získanou polohu,
  • v error poskytneme callback pro případ odmítnutí poskytnutí polohy a
  • v options můžeme upřesnit dodatečné volby metody

více informací můžete získat třeba na stránce MDN

Firefox

Zde nám do toho zákeřně vstupuje Firefox se svojí volbou „Nyní ne„, která oproti všem očekáváním nevyvolá error callback. Nevyvolá totiž žádnou událost. Z pohledu kódu se poté zdá, že se uživatel stále nerozhodl jestli sdílení polohy povolí, nebo odmítne.

Jako nejrozumnější reakce na tento stav se mi jeví vyvolat po nějaké době vhodnou akci pomocí setTimeout() a tento timeout rušit pokud uživatel zareaguje dříve než se tento timeout provede.

Ukázka kódu

V ukázce si připravíme dvě jednoduché metody. V první nastavíme timeout pokud nedostaneme do 5 vteřin žádnou reakci a vytvoříme callbacky pro jednotlivé stavy. Na konci vyvoláme druhou metodu pro získání vlastní polohy:


var showPosition = function () {
    var timeout = setTimeout(function() {
        console.log("Timeout vyprsel...");
    }, 5000);
    
    var success = function (position) {
        clearTimeout(timeout);
        console.log("Ziskani polohy povoleno", position);
    };
    
    var failure = function(error) {
        clearTimeout(timeout);
        console.log("Poloha nedostupna...", error);
    };

    getPosition(success, failure);
};

Ve druhé metodě již komunikujeme s API a pomocí poskytnutých callbacků si vrátíme patřičné odpovědi. V případě úspěšného získání polohy to bude objekt se souřadnicemi, jinak chybový objekt:


var getPosition = function (success, failure) {
    var available = function (location) {
        var lat, lng, acc;
        lat = location.coords.latitude;
        lng = location.coords.longitude;
        acc = location.coords.accuracy;

        success({lat: lat, lng: lng, acc: acc});
    };
    
    var unavailable = function(error) {
        failure(error);
    };
    
    var options = {enableHighAccuracy: true, timeout: 5000, maximumAge: 0};

    navigator.geolocation.getCurrentPosition(available, unavailable, options);
};

To je vše. Nyní byste v konzoli měli vidět vaše souřadnice :-)

Pokud toto vyzkoušíte třeba v klasickém desktopovém prohlížeči na notebooku, tak nemusí být souřadnice přesné. V závislosti na vašem připojení, nebo poskytovateli připojení mohou být i velmi nepřesné a nemusí souhlasit ani kraj. Nicméně tento způsob získávání informací o poloze uživatele je asi nejpřesnější z dostupných a v mobilních zařízeních se zapnutou GPS funguje velmi spolehlivě.