Browsed by
Archiv rubriky: Programování

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 :-)

Výpočet vzdálenosti z GPS souřadnic

Výpočet vzdálenosti z GPS souřadnic

Při práci se souřadnicemi často narazíte na úkol určit vzdálenost dvou míst. Dlouhou dobu jsme pro tento případ používali jednoduchý vzoreček okořeněný magickou konstantou:

dist = sqrt( (lat1 - lat2) ^ 2  + (lng1 - lng2) ^ 2 ) * 0.012

kde lat1, lat2, lng1, lng2 jsou souřadnice bodů jejichž vzdálenost máme určit a 0.012 je magická konstanta, která v našich zeměpisných šířkách upravuje výsledek tak, aby udával vzdálenost v kilometrech.

Bohužel předchozí věta není úplně pravdivá: výsledek se tu více, tu méně skutečné vzdálenosti pouze blíží. To podle toho, kterým směrem jsou od sebe body položeny a v jaké se pohybujeme zeměpisné šířce. Když pak přišla potřeba výpočet zpřesnit, museli jsme používaný vztah změnit.

Problém se vztahem je asi každému zřejmý. Bohužel nežijeme na placce, ale na kouli (zhruba) a tak nevystačíme s rovinnou geometrií a Pythagorovo větou, ale musíme počítat s geometrií sférickou. Nepotřebujeme dostat přímou vzdálenost mezi body (pokud nejste krtek a nepočítáte tunel). Zajímá nás vzdálenost mezi body po obvodu kružnice, jejíž poloměr je dán poloměrem Země.

Pro tento případ lze odvodit tzv. haversine vzorec, který lze s nevelkou chybou zjednodušit na následující vztah:

dist = acos (sin(lat1) * sin(lat2) + cos(lat1) * cos(lat2) * cos(lng1 - lng2) ) * 6371

kde lat1, lat2, lng1, lng2 jsou souřadnice bodů a 6371 poloměr země v km, výsledkem je vzdálenost v kilometrech. Pozor: předpokládáme zde výpočet ve stupních. Pro výpočet v radiánech je třeba konstantu poloměru Země náležitě upravit (na 6371 / 360 * 2 * Pi = 111.19).

Protože souřadnice udáváme nejčastěji ve stupních, je nutné i tyto nejprve převést na radiány. Výsledný kód funkce pro výpočet vzdálenosti v PHP je pak následující:


function distance($lat1, $lng1, $lat2, $lng2) {
  $theta = $lng1 - $lng2;
  $dist = acos(
      sin(deg2rad($lat1)) * sin(deg2rad($lat2)) 
      + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta))
    );
  $kms = $dist * 111.19;
  return $kms;
}

Popis dalších metod výpočtů týkajících se vzdáleností a souřadnic v angličtině je k nahlédnutí zde http://www.movable-type.co.uk/scripts/latlong.html.

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ě.