PR0GRAMISTAhttp://pr0gramista.pl/rss/Ostatnie posty na blogu PR0GRAMISTA.plpl-plThu, 03 May 2018 17:00:00 +0000Moja pierwsza pracahttp://pr0gramista.pl/post/moja-pierwsza-praca/<p>Dziś jest wolne, a 2 dni temu było Święto Pracy, zatem to idealny czas aby podzielić się doświadczeniami z mojej pierwszej pracy i tym jak ją znalazłem.</p> <h4>Poszukiwania</h4> <p>Pracy zacząłem szukać już w listopadzie 2017 i popełniłem przy tym wiele błędów, choć los też nie był mi przychylny. Najpierw pechowa rekrutacja, później pustki na rynku pracy a sukcesy na końcu. Im mniej mi zależało, tym lepiej mi wychodziło. Do tematu rekrutacji jeszcze kiedyś wrócę, może w formie prezentacji.</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/N6Zz-Nkkaxc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><h4>Tak rekrutują się najlepsi (podobno)</h4> <p>Mówi się, że znajomości to jeden z najlepszych sposobów na znalezienie nowej pracy i coś w tym może być, bo właśnie tak ostatecznie dotarłem do ARC Software - małego software house’u w centrum Wrocławia.</p> <h4>ARC to nie korpo</h4> <p>Jestem 12 członkiem tej firmy. Nie wiele osób ma szansę spotkać się z taką sytuacją. Ma to swoje wady i zalety. Może nie ma gaming roomu, pięknego biura czy kraftowego piwa, ale tak samo nie ma ściśle określonych stanowisk czy zasad. Panuje naprawdę luźna atmosfera i ma się świadomość, że nie piszesz kodu aby jakiś prezes zarobił 100 razy tyle co ty.</p> <h4>Pierwszy dzień</h4> <p>Nie było to coś tak ekscytującego. Przyszedłem, poznałem ekipę, projekt i przez cały dzień klikałem, oglądałem i słuchałem. Pracuję na swoim sprzęcie, więc nie musiałem nic konfigurować. Nie mogę powiedzieć, że się nudziłem, ale z pewnością czekałem na coś więcej.</p> <h4>Pierwsze zadanie</h4> <p>Drugiego dnia dostałem swoje pierwsze programistyczne zadanie - przenieść komponent z starszej wersji aplikacji i napisać go częściowo od nowa dla nowej wersji. Zadanie nie najprostsze, ale to mi się podobało. Nie wiem czy jadłem obiad tamtego dnia, ale bawiłem się wyśmienicie. Na koniec dnia miałem gotowy szkielet komponentu i wystarczyło tylko go podpiąć do reszty.</p> <p>Wiele osób podczas pierwszego spotkania z projektem czuje strach, niepewność czy zakłopotanie, ale ja poczułem się jakbym znowu miał te 11 lat i siedział przy tym mistycznym serwerze Minecrafta, no bo w końcu uczyłem się programowania przez ostatnie 5 lat. Często na pytanie "czy wiesz jak działa X" odpowiadałem:</p> <blockquote><p>Nie wiem, ale myślę, że to ogarnę.</p> </blockquote> <h4>Po dwóch tygodniach</h4> <p>Projekt nie kryje przede mną większych tajemnic. Kilka rzeczy dalej sprawia mi problem, ale są to w większości problemy kwestii architektury projektu a nie “jak zrobić by zadziałało”, ale projekty mamy różne, więc w wolnym czasie dalej się rozwijam w innych kierunkach. Machine learning i IoT nadchodzę!</p> <h4>Porady dla kogoś kto zaczyna pracę</h4> <p>Pytać i nie bać się pytać. Warto też nauczyć się wcześniej korzystać z Gita w współpracy z innymi, poznać zagadnienie "Trunk Based Development", nauczyć się rozkładać duże problemy na mniejsze i być optymistycznie nastawionym :)</p> <p><a href="https://arcsoftware.it/">Strona polskiego, wspomnianego Arc Software</a></p> Thu, 03 May 2018 17:00:00 +0000http://pr0gramista.pl/post/moja-pierwsza-praca/This blog is obsoletehttp://pr0gramista.pl/post/this-blog-is-obsolete/<p>Hej! Być może zauważyłeś, że na tym blogu już od pewnego czasu nie pojawiają się nowe posty. Powód jest prosty — teraz kręcę YouTuby. Już kiedyś próbowałem to robić, ale nie miałem pomysłu na treści. Na kanale nie będę umieszczał takich typowych, zamulających poradników tylko krótkie, zwięzłe filmiki o jakimś zagadnieniu, kursy przyśpieszone (szybkie wprowadzenie do języka) i jakieś recenzje czy może nawet vlogi.</p> <p>Zapraszam do subskrypcji i udzielania się w formie komentarzy, nawet te bez sensu są mile widziane.</p> <p> <div class="woo"> <div class="woo-fake" style="background: #FF0000;"></div> <a href="https://www.youtube.com/channel/UCHPUGfK2zW0VUNN2SgCHsXg"><div class="woo-content-wrapper"> <div class="woo-content "> <i class="material-icons">videocam</i> <div>Kanał YouTube</div> </div> </div></a> </div> </p> <p>Blog zostanie niedługo zamieniony w bardziej przejrzystą stronę wokół kanału.</p> Mon, 05 Mar 2018 08:50:38 +0000http://pr0gramista.pl/post/this-blog-is-obsolete/Klawiatura cz. 1http://pr0gramista.pl/post/klawiatura-1/<p>Klawiatura to najważniejsze narzędzie programisty. Mimo tylu lat i rozwoju technologii klawiatury dużo się nie zmieniły. Może są cieńsze i tańsze, ale ich funkcje, ilość i ustawienie przycisków się praktycznie nie zmieniło. Pora to zmienić!</p> <p><img src="https://static.12345.pl/klawiatura_hello.jpg" alt="Klawiatura"></p> <h3>Hello world</h3> <p>To co widzicie powyżej to moja własnoręcznie zbudowana klawiaturę mechaniczna. 61 klawiszy z przełącznikami Gateron Brown, 100% anti-ghosting, dużooo miejsca na makro i dodatkowo enkoder i potencjometr. Sercem klawiatury jest mikrokontroler Teensy LC, który jest kompatybilny z Arduino. Klawiatura jest normalnie wykrywana jako urządzenie wejściowe, żadnych sztuczek. Cały soft napisałem sam, choć nie jest to rocket science.</p> <h3>Dlaczego?</h3> <p>Powodów jest kilka:</p> <ul> <li>Droga do perfekcji — sięganie po strzałki, klawisze home/end, nieużywanie klawiszy pod prawym shiftem, zupełny brak kontroli nad klawiszami funkcyjnymi skłoniły mnie znalezienia drogi do lepszej pracy.</li> <li>Makro — nienawidzę skomplikowanych skrótów klawiszowych i dużo bym zyskał mając około 180 miejsc na makra.</li> <li>Cena — nie wierzę, że dobre klawiatury mechaniczne muszą kosztować ponad 400 zł. Jako przedstawiciel klasy średniej postanowiłem wykonać kalkulacje, oszacować koszty i stwierdziłem, że ja mogę to zrobić taniej. Nie myliłem się, choć rozłożenie kosztów może zdziwić.</li> <li>Nieśmiertelność — moja klawiatura w moich rękach jest nieśmiertelna. Mogę ją zalać, podpalić i przejechać czołgiem, ale zawsze będę ją w stanie naprawić.</li> <li>Bycie fajnym — na Massdropie ludzie wydają grube pliki dolarów aby otrzymać produkt podobny do mojego a ja zbudowałem to sam. Znacie kogoś innego kto pisze bloga na własnoręcznie wykonanej klawiaturze?</li> </ul> <h3>Jak?</h3> <h4>Ale najpierw prototyp (maj 2017)</h4> <p>Klawiatura, którą już widzieliście to nie jest moja pierwsza klawiatura. Przed nią wykonałem prototyp. Nie planowałem go, ale w ręce wpadło mi trochę darmowych materiałów i postanowiłem przetestować swoją wizję. Wykonanie prototypu pozwoliło mi uniknąć kilku błędów przy tworzeniu mojej wymarzonej klawiatury z których wcześniej zupełnie nie zdawałem sobie sprawy. W tym poście opowiem o tych problemach.</p> <h5>Galeria</h5> <p>Najpierw zdjęcia abyście nie czuli się zupełnie zagubieni podczas dalszej lektury. Na zdjęciach widać kilka ciekawych rozwiązań np. mocowanie na wiertła, ścieżki z markera czy też druciki łączące dwie strony płytki.</p> <p> <div class="gallery less"> <div class="gallery-content mdl-grid"> <div class="gallery-shadow"></div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170709_184648.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170804_195857.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170804_213636.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_183342.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_183346.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_183356.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_185548.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_191604.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_191611.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_192333.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_194316.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_194322.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_200059.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_200110.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_200714.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_200719.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_200726.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_201224.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_201228.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_203921.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_203926.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_214257.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_214833.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_215105.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_215113.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170811_235615.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_002103.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_015221.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_015227.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_181534.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_181547.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_181557.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_181606.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_183459.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_190826.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_190834.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170812_190842.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_003505.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_003507.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_003515.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_005529.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_011554.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_015124.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_224326.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_225058.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_232643.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_233159.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170813_233211.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170815_210802.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170815_210810.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170815_210815.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170816_184848.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170816_184857.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170816_184910.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170816_231322.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/IMG_20170820_182659.jpg"> </div> <div class="mdl-cell mdl-cell--4-col"> <img src="https://static.12345.pl/"> </div> </div> <div class="gallery-more"> <button><i class="material-icons">expand_more</i></button> </div> <div class="gallery-less"> <button><i class="material-icons">expand_less</i></button> </div> </div> </p> <h5>Keycapsy i przełączniki</h5> <p>Do prototypu użyłem przełączników i nakładek po starych kasach fiskalnych. Okazuje się, że skrywają one przełączniki MX Cherry Black, niezbyt przydatne dla większości użytkowników przez duży nacisk wymagany do aktywacji i liniowość ruchu. Idealne pole testowe.</p> <h5>PCB or plate mount</h5> <p>Są głównie dwa sposoby montowania przełączników. Jeden opiera się na wykorzystaniu płytki PCB i wlutowania w niej przycisków stosując przy tym dodatkowe stabilizatory. Drugi sposób to wciskanie przycisków w odpowiednie wyżłobienia w płytce wykonanej np. z aluminium. Do zbudowania prototypu postanowiłem skorzystać z tej pierwszej opcji, bo jest ona łatwiejsza do wykonania samemu, ale efekty mogą nie być satysfakcjonujące. Niska precyzja wywierconych dziur sprawiła, że przyciski są dosyć krzywe a sama płytka po wytrawianiu stała się bardzo elastyczna. Wniosek na przyszłość: użyć innego mocowania albo zdobyć profesjonalnie wykonaną płytkę.</p> <h5>Kabelki czy nie kabelki</h5> <p>Masz przed sobą 65 klawiszy. Jak je połączysz? W przypadku płytki PCB to dosyć proste, choć tutaj pojawia się problem dalszego połączenie z kontrolerem, które w prototypie jest bardzo niestabilne. Użyłem kabelków stworzonych z myślą o płytkach prototypowych. Duży błąd, ale później znalazłem świetny zamiennik — kabelki z typowej skrętki RJ-45. Tanie, łatwe w lutowaniu i stosunkowo wytrzymałe.</p> <h5>Anti-ghosting</h5> <p>Widzicie takie druciki z wybrzuszeniem? To są diody, które powodują, że prąd może płynąć tylko w jedną stronę. W prototypie zlutowałem je w złą stronę (musiałem odwrócić skanowanie), wynikało to z braku wiedzy o <code>INPUT_PULLUP</code>. Umieszczenie ich pozwala na pozbycie się ghostingu, który w uproszczeniu ogranicza liczbę wykrywanych jednocześnie przycisków. Typowe klawiatury nie pozwalają na wciśnięcie więcej niż około sześciu klawiszy. Zwykle nie sprawia to większych problemów, ale gdy spróbujesz zagrać z przyjacielem na jednej klawiaturze to bardzo mocno to odczujecie.</p> <blockquote><p>At the extreme, keyboards have been made with a diode at every key so that each key can be detected individually ~<a href="https://www.microsoft.com/appliedsciences/antighostingexplained.mspx">Microsoft Applied Sciences Group: Keyboard Ghosting Explained!</a></p> </blockquote> <h5>Layout i software</h5> <p>Od początku wiedziałem, że layout w mojej klawiaturze nie może być zupełnie nowy, strzeliłbym sobie w stopę porzucając QWERTY. Zastanowiłem się co jest mi potrzebne i jak mogę to polepszyć. Dodatkowa, dolna warstwa była kluczem do osiągnięcia celu. Wystarczy zdefiniować klawisz warstwy dolnej, który działa podobnie jak <code>Shift</code>, później zamiast wciskać <code>F1</code> będę wciskać <code>[warstwa dół] + 1</code>. Skonfigurowanie tych wszystkich opcji trochę trwa, ale wynik to bardzo naturalny sposób na powiększenie możliwości klawiatury bez dodawania klawiszy. Oczywiście w przypadku prototypu równe wiersze i kolumny (ortholinear) zaburzają rzeczywisty layout (US), ale idea jest ta sama — pozbyć się długich ruchów nadgarstków.</p> <h3>EOF</h3> <p>Jeśli tutaj dotarłeś to bardzo proszę pochwal się tym w komentarzu. <strong>Twoja reakcja</strong> na ten projekt bardzo mnie ciekawi.</p> <p>Prototyp nie był zbyt używalny. Połączenia były zbyt zawodne, klawisze nie satysfakcjonujące i całość zbyt uginająca się, ale niczego nie żałuję — to była świetna zabawa! W następnym poście opowiem o procesie tworzenia już ostatecznej klawiatury, który nie był już taki barwny jak prototypu, i o implementacji dodatkowych funkcji. Wspomnę też o planach związanych z tym projektem.</p> <p> <div class="woo"> <div class="woo-fake" style="background: #333333;"></div> <a href="https://github.com/pr0gramista/hello_world_keyboard"><div class="woo-content-wrapper"> <div class="woo-content "> <i class="material-icons">code</i> <div>Repozytorium kodu klawiatury</div> </div> </div></a> </div> </p> Sun, 10 Dec 2017 17:00:00 +0000http://pr0gramista.pl/post/klawiatura-1/Programistok 2017http://pr0gramista.pl/post/programistok-2017/<p>Gdy przeprowadziłem się do Wrocławia myślałem, że to będzie koniec długich podróży. Pomyliłem się, stąd też ten post nie będzie stricte o Programistoku, ale bardziej o mojej wyczerpującej podróży.</p> <h3>PKP</h3> <p>Ten wybór to był największy błąd. Orkan Ksawery, który przeszedł nad trasą jakiś dzień wcześniej mógł mieć na to wpływ. Jestem w stanie zrozumieć, że nie da się wszystkiego przewidzieć, ale to co się stało przechodzi ludzkie pojęcie.</p> <p><blockquote class="twitter-tweet" data-lang="pl"><p lang="pl" dir="ltr">PKP nie chce bym dojechał na programistok, coś kombinują <a href="https://t.co/tZSVJAHiJP">pic.twitter.com/tZSVJAHiJP</a></p>&mdash; Bartosz Wiśniewski (@pr0gramista) <a href="https://twitter.com/pr0gramista/status/916294800663597057?ref_src=twsrc%5Etfw">6 października 2017</a></blockquote></p> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><p>Pociąg przyjechał spóźniony, ale to była kwestia może 5 minut. Najpierw konduktor przechodzi i mówi "proszę nie wsiadać". Czekaliśmy jakieś kolejne 5 minut i już mogliśmy zająć miejsca. Usłyszeliśmy komunikat informujący, że pasażerowie podróżujący do Warszawy powinni opuścić pojazd i pojechać pociągiem ekspresowym na ten sam bilet. Było się wtedy ewakuować.</p> <p>Ruszyliśmy i w trakcie jazdy powiadomiono nas, że dojedziemy do Twardogóry (pogranicze Dolnego Śląska) i tam autobusami przetransportują nas do Ostrowa Wielkopolskiego (około 56 km, 55 min. jazdy). Dobra, 2h opóźnienia jeszcze przeżyje w końcu podstawią z 4 autobusy i jakoś to sprawnie pójdzie.</p> <p><img src="https://media.giphy.com/media/UZA15w44oCT1m/giphy.gif" alt=""></p> <p>Autobus był 1 czy może 2 i tak na odjazd z Ostrowa czekałem jakieś 7h w tym czasie:</p> <ul> <li>Poczęstowano nas kawą (wow)</li> <li>Wskoczyłem do autobusu komunikacji zastępczej, ale nie przypisanej do naszego pociągu</li> <li>Zrobiłem w tym autobusie objazd po okolicznych wsiach</li> <li>Pilotowałem kierowcę na dworzec w Ostrowie</li> <li>Wypiłem piwko, bo Wars był już pusty...</li> </ul> <p><blockquote class="twitter-tweet" data-lang="pl"><p lang="pl" dir="ltr">Próba dotarcia na <a href="https://twitter.com/hashtag/programistok?src=hash&amp;ref_src=twsrc%5Etfw">#programistok</a> update: przed chwilą pilotowałem autobus, ale wciąż jestem po niemieckiej stronie Polski WTF</p>&mdash; Bartosz Wiśniewski (@pr0gramista) <a href="https://twitter.com/pr0gramista/status/916386045197012992?ref_src=twsrc%5Etfw">6 października 2017</a></blockquote></p> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><p>Ruszyliśmy o 23, gdzie o tej godzinie powinienem być już na miejscu. Myślałem, że już nic strasznego mnie nie spotka. Myliłem się.</p> <h3>Bitwa o Autobus</h3> <p>Pan z obsługi pociągu policzył ilu z nas jedzie do Białegostoku i tak później usłyszeliśmy komunikat, że ten pociąg nie dojedzie do celu, ale za to podstawią nam na Warszawie Wschodniej autobusy. Właściwie to wszystko się sprawdziło tylko, że autobus był jeden. Na zewnątrz było chłodno, więc ludzie w tym ja szybko zajęliśmy miejsca, a do autobusu zbliżała się wycieczka szkolna podstawówki.</p> <p>Nauczyciele walczyli o miejsca dla swoich podopiecznych. Jedni dumnie opuścili autobus, drudzy pokazywali jak ważny jest ich przejazd — Pani jedzie na pogrzeb, Pani wykupiła pierwszą klasę i ma cukrzycę a Pan musi jutro do pracy pójść a reszta po prostu czekała.</p> <p>Przyszła Pani z PKP i kazała opuścić pojazd i poczekać 3h na dworcu na pociąg, który zapewne będzie przepełniony. Pasażerowie nie dali się tak łatwo i po prostu odmówili. Trochę posiedzieliśmy i usłyszeliśmy, że za chwilę przyjedzie taksówka klasy biznes i kto chce pojechać to niech wysiądzie. Pamiętając moją poprzednią przygodę z autobusem postanowiłem wyjść i moim oczom ukazała się owa taksówka, tuż za autobusem. Szczęśliwy wsiadłem i dojechałem do Białegostoku!</p> <h3>Zakwaterowanie</h3> <p>Moja przygoda z Białymstokiem zaczęła się od dworca kolejowego skąd musiałem dotrzeć na konferencje lub do mojego zakwaterowania — Willa Mamycięgdzieśrella. Zmęczony poczułem szczęście przekraczając próg drzwi tej willi. Pani za ladą jednak szybko ostudziła moją radość i stwierdziła, że moja rezerwacja jest już nieważna, bo się nie pojawiłem na miejscu a oni pokoi już nie mają.</p> <blockquote><p>PKP ma ogromne opóźnienia i najprędzej pojawię się w Białymstoku o 6 rano.</p> </blockquote> <p>Pani się zdziwiła czemu się z nimi nie skontaktowałem, odpowiedź: bo nie sprawdzacie bookingu. Maila im wysłałem, dzwonić w pociągu pełnym śpiących ludzi nie będę a nawet ochoty na to nie miałem. Ba! Rezerwacje miałem na dwie noce. Usiadłem i ponownie zarezerwowałem pokój przez booking (?).</p> <p>Czy ktoś wie jak booking działa? Bo to pierwszy raz, żebym się spotkał z takimi problemami.</p> <h3>Programistok</h3> <p>Mam takie odczucie, że Programistok chce być taką niezależną, kameralną, studencką konferencją i to im się udaje. Zgaduję, że organizatorzy odrzucali sporo ofert sponsoringu ze względu na reklamę jakiej oczekiwali. Warto też dodać, że programistok jest organizowany w formie non-profit.</p> <p>Prezentacje były świetne! Jedna dobra ścieżka zrobiła robotę. Najciekawsze były dla mnie lighting talki, czyli krótkie 5 minutowe wystąpienia. Najgorsza dla mnie była prezentacja o temacie "Znajdź swoje korzenie - dziedziczenie w JavaScript", ale prawdopodobnie tylko dlatego, że to zagadnienie już znałem.</p> <p>Oczywiście nie można zapomnieć o giftach! <figure><img src="https://i.imgur.com/AtYWMDP.jpg" alt="Zdjęcie giftów" /><div>Koszulki, super podkładka pod mysz i naklejki</div></figure></p> <h3>Powrót</h3> <p>Znalazłem jakiś hostel, poszedłem kupić nowe słuchawki (te kupione na ten wyjazd zgubiłem zapewne w trakcie akcji w Twardogórze) i tak pozwiedzałem trochę Białegostoku. Na aftera już sił nie miałem, w końcu 28h na nogach nie napawa do imprezowania.</p> <p>Powrót do Wrocławia przebiegł rewelacyjnie. Pociąg i samolot na czas — 5h podróży.</p> <h3>EOF</h3> <p>Tak jak wspomniałem we wstępie nie mam pełnego obrazu na programistok. Naprawdę żałuję, że nie byłem ani na beforze ani na afterze. Do Białegostoku przez następne kilka lat nie pojadę, ale event szanuję.</p> <p>Na końcu wrzucam vlog jednego z znanych prelegentów :)</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/-6jS3qcnMfA?rel=0" frameborder="0" allowfullscreen></iframe>Wed, 18 Oct 2017 18:00:00 +0000http://pr0gramista.pl/post/programistok-2017/It's Super Coolhttp://pr0gramista.pl/post/its-super-cool/<p>Uwielbiam gamedev, ale ciężko jest stworzyć grę bez bandy grafików, dźwiękowców i designerów. Oczywiście są pewne wyjątki gdzie programista może być takim "one man army" dla przykładu — Minecraft. Problem można też rozwiązać wykorzystując gotowe zestawy assetsów, ale ich jest mało i zwykle są bardzo ograniczone.</p> <p>Na początku sierpnia Gynvael Coldwind ogłosił konkurs <a href="http://gynvael.coldwind.pl/?id=657">Gynvael's Summer GameDev Challenge 2017</a> w którym celem było stworzenie jak najlepszej gry wykorzystując tylko grafiki z załączonej paczki stworzonej przez <a href="https://kenney.nl/assets/space-kit">Kenney'ego</a>. Gatunek gry, udźwiękowienie, język programowania dowolny. Podział na dwie kategorie: gry stworzone od prostej biblioteki np. PyGame, SDL (wykluczony libGDX) i na gry stworzone na podstawie silnika np. Unity. Czas na stworzenie gry: miesiąc.</p> <p><img src="https://kenney.nl/content/4-assets/2-space-kit/preview_kenney.png" alt="Space Kit by Kenney"></p> <h3>It's Super Cool</h3> <p>Na początku nie byłem pewny czy wziąć udział w tym konkursie. Byłem zajęty a brakowało mi pomysłu. Nie łatwo jest stworzyć oryginalną grę na takich zasobach. Z drugiej strony brakowało mi casualowej gry do zagrania ze znajomymi. Pewnego dnia zacząłem eksperymentować z assetsami i przyszedł mi do głowy genialny pomysł — Kosmiczny Quidditch. Gra miała być wieloosobowa (z opcją grania na tym samym komputerze), łatwo rozszerzalna (znajomi to programiści) i zdolna do odpalania na wszystkim.</p> <p>Jeśli chodzi o grafiki to wszystko mi się ułożyło: piłka z asteroidy, bramki z wsporników do rur, widownia z schodów i dwie drużyny: astronauci i kosmici. Nawet nazwę szybko wymyśliłem inspirując się ostatnimi odcinkami South Parku (S20E06)</p> <blockquote><p>Zrobię od zera, pewnie mniej ludzi tak zrobi...</p> </blockquote> <h3>Lenistwo</h3> <p>Zanim mogłem zacząć kodzić to najpierw musiałem stworzyć podstawową mapę. Na początku myślałem, że napiszę własny format mapy i jej wczytywanie, później spróbowałem wykorzystać <a href="http://www.mapeditor.org/">Tiled Map Editor</a>, ale nie moje elementy okazały się zbyt losowo rozmieszczone, zatem ostatni sposób — GIMP i do przodu. Szybkie skalowanie, warstwy i mnóstwo duplikowania. Szło mi to powoli i już po kilku godzinach nie miałem sił do tego wracać, ale w końcu skończyłem mapę i przeszedłem do kodzenia.</p> <h3>PyGame</h3> <p>Wolałbym użyć znanego mi libGDXa, ale on dostał bana w kategorii "od zera". Pomyślałem, że skoro się uczę Pythona to jego dodatek w formie gamedeva mi nie zaszkodzi. Początki były całkiem łatwe, problem pojawił się tworzeniu serwera gry. Po prostu było za mało czasu na przymyślenie każdego ciągu wydarzeń na serwerze. Nie potrzebnie bawiłem się w własny socket — było użyć HTTP i lepiej dbać o spójność danych. Muszę powiedzieć, że: sporo się nauczyłem w te <strong>4 dni</strong>.</p> <p><img src="https://i.gyazo.com/0c898d27270bda0a9e830ccb4b5817a5.png" alt="Kiedy Deadline się zbliża"></p> <p>To nie żart, w 4 dni zdążyłem nauczyć się korzystać z PyGame, napisać grę i ją przetestować. Jakość kodu, synchronizacji i optymalizacji może nie jest najlepsza, ale jak na coś pisanego bez planu i czasu daję 5.</p> <h3>Not cool</h3> <p>Wysłałem maila z zgłoszeniem, dodatkowo jak Gynvael prosił to napisałem komentarz pod postem. Czekałem na wyniki, ale zanim zostały ogłoszone pojawił się filmik z prezentacją gier. Nerwowo skaczałem po pasku YouTuba i nie mogłem znaleźć gry. O nie, czyżby coś się zepsuło?</p> <p>Napisałem maila i sprawa szybko się wyjaśniła a Gynvael nawet stworzył dodatkowe wideo z moją grą.</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/CB62TQ13fC4" frameborder="0" allowfullscreen></iframe><h3>Not cool2</h3> <p>To była środa, okropny dzień (rozsypała się partycja na biurowym komputerze...) i pojawiły się <a href="http://gynvael.coldwind.pl/?id=663">wyniki</a>. tldr: Z jednej strony pozytywnie, ale oczywiście nic nie wygrałem.</p> <blockquote><p>Fajnie jest brać udział w konkursach, gorzej jeśli się w nich przegrywa</p> </blockquote> <h4>Było zrobić na Unity?</h4> <p>Jeśli myślimy kategorią nagrody to rzeczywiście użycie Unity ze względu na brak konkurencji byłoby optymalne. Zrobienie gry nie zajęłoby mi 4 dni a może jeden wieczór. Multiplayer, edytor sceny i sterowanie do padów miałbym z głowy, ale za to — brak wyzwania. Niczego nowego bym się nie nauczył.</p> <h4>Wina serwera?</h4> <p>Serwer mojej gry nie jest najstabilniejszy, ale przy współpracy uczestników (najlepiej jakby każdy nic nie robił) dało się zagrać w 4 osoby. Sądzę, że największy błąd jaki zrobiłem to odpalenie gry dopiero po połączeniu się. Klient dostaje pakiety (których nie buforuje), ale przez te kilka milisekund gra jeszcze nie jest gotowa i dzieją się różne dziwadła.</p> <h3>Przyszłość</h3> <p>Do "It's Super Cool" jeszcze wrócę, bo w połączeniu z Raspberry Pi może to być genialna zabawa na imprezie. Plus w końcu do czegoś wykorzystam moją malinkę, a co do konkursów — w najbliższym czasie postaram się ich unikać, głupie są.</p> <p><strong>Fun fact:</strong> duża część efektów dźwiękowych to odgłosy wydawane przez znajomego na TeamSpeaku.</p> <p><figure><img src="https://i.imgur.com/ltA03hr.png" alt="Screenshot" /><div>Efekt końcowy</div></figure></p> Thu, 05 Oct 2017 09:43:28 +0000http://pr0gramista.pl/post/its-super-cool/Nowy Workdonehttp://pr0gramista.pl/post/workdone-new/<h1>Nowy Workone</h1> <p>Oto i jest, gotowy (prawie), działający nowy Workdone, czyli aplikacja dla perfekcjonistów z deadlinami. Dzisiaj krótko opowiem o trudnościach jakie mnie spotkały w trakcie pisania tego projektu.</p> <h3>Server-less?</h3> <p>Chciałem aby Workdone mógł żyć zupełnie bez mojej ingerencji, zaangażowania, ale obawiam się, że jest to niemożliwe.</p> <ol> <li>Firebase Cloud Functions nie potrafią wykonać się same co jakiś czas</li> <li>Jeśli będę zewnętrznie wywoływał Cloud Functions co 5s to przekroczę limit wykonań</li> <li>Firebase Admin w Pythonie nie potrafi nasłuchiwać zmian</li> <li>Nie chcę stawiać serwera na Javie czy NodeJS</li> <li>Rozwiązanie... hybryda</li> </ol> <p><figure><img src="http://southparkstudios.mtvnimages.com/images/shows/south-park/clip-thumbnails/season-10/1002/south-park-s10e02c01-thanks-16x9.jpg" alt="South Park: Smug Alert" /><div>It's hybrid. Good for you!</div></figure></p> <p>Mój ostateczny backend dzieli się na dwie części: Pierwsza to prosty skrypt w Pythonie, który ma za zadanie pobrać zakolejkowane powiadomienia a następnie je wysłać przez Firebase Cloud Messaging do klienta. Druga część to funkcje Firebase Cloud, które nasłuchują zmian w bazie <em>deadlinów</em> i aktualizują kolejkę powiadomień. Cloud Firebase jest też odpowiedzialny za tworzenie następnych powiadomień, gdy Python je wykona.</p> <h4>Co mi to daje?</h4> <p>Funkcje Firebase Cloud działają rzadko i na małej porcji danych. Python pobiera dane w ładnym zapytaniu, robi to często, ale to i tak bardzooo mały transfer. Ważne jest to, że skrypt ten może być gdziekolwiek, byle by miał dostęp do internetu. Czy to dalej server-less?</p> <p>Tak, lubię wyzwania <em>architektury</em> systemów.</p> <h3>Wygląd</h3> <p><figure><img src="http://i.imgur.com/1JtjsFt.png" alt="Screenshot z Workdone" /><div>Kilka sposobów wyświetlania i podstawowa implementacja Material Design</div></figure> Osobiście myślałem, że będzie trudniej. Napisanie własnego CSSa nie jest takie straszne, jeśli się korzysta z nowych zabawek. Flexbox to ogromny krok naprzód, podobnie grid layout. Podążanie za Material Design też nie było tak straszne, choć to głównie zasługa dobrych guidelinesów takich jak <a href="https://material.io/guidelines/components/buttons.html">tutaj</a>.</p> <h3>EOF i czy to działa?</h3> <p>Ten post powstał tylko przez to, że ustawiłem sobie deadline. To chyba coś znaczy, poza tym to było nawet przyjemne.</p> <p><em>A goal is a dream with a deadline</em></p> <p>Z Workdone możecie korzystać pod <a href="https://workdone.xyz">workdone.xyz</a>, choć nie gwarantuje stabilności na ten moment :)</p> Thu, 10 Aug 2017 20:01:57 +0000http://pr0gramista.pl/post/workdone-new/Workdone, ponowniehttp://pr0gramista.pl/post/workdone-ponownie/<p>Workdone jako projekt na "Daj Się Poznać 2017" miał być wymagający i wnoszący coś nowego do świata produktywności, ale wyszło jak zawsze. Budowa klienta webowego połączyła się z nauką nowego JSa i proces znacząco się wydłużył, ale ostatnio wpadłem na pewien pomysł.</p> <h3>Todo listy nie działają</h3> <p>Próbowałem używać Google Keep, a teraz Todoist i wnioski są następujące: nie obchodzą mnie powiadomienia, cyferki w przeglądarce — nic. Za to obchodzi mnie to kiedy coś ma być zrobione — deadline. Gdybym widział, czuł, że czas mija to może szybciej bym się do tego zabrał. Nowy Workdone ma dostarczać to wrażenie przez odliczanie czasu rodem z horrorów czy tykających bomb i powiadomienia krzyczące "Hej, tutaj rzeczywistość, czas coś zrobić".</p> <p>Dobra, pomysł jest, ale co z wykonaniem? Wracać do JSa i znów się tam mordować? <a href="https://github.com/pr0gramista/workdone/commit/c368aff76c721fc6be5d7417646d9f26a1d41bc5">Oczywiście nie mam zamiaru</a> i spróbuję czegoś innego — powrotu do korzeni.</p> <h3>Framework as a Language</h3> <p>Każdy frontendowy framework to prawie jak osobny język. Ba! Niektóre frameworki tworzą swoje własne formaty plików. Moje pytanie brzmi: czy tego potrzebujemy? Czy tak bardzo potrzebujemy bindowania, komponentów i szablonów? Może, ale w kwestii optymalizacji zapytania do tylko jednego pliku mamy HTTP 2.0 z <em>server push</em>, które tak nowe nie jest. Spróbujmy zatem nie używać frameworka.</p> <h4>CSS</h4> <p>CSS stale dostaje nowe funkcjonalności, które sprawią, że za kilka lat pożegnamy SASSa czy LESSa. Już teraz większość przeglądarek obsługuje zmienne w CSS. Oczywiście to nie znaczy, że za chwilę wszyscy rzucimy nasze preprocesory, bo jeszcze trochę brakuje i z tego też powodu pozwoliłem sobie użyć SASSa, szczególnie, że używam bardzo małej części jego funkcjonalności.</p> <h3>Dobry początek</h3> <p>Bez frameworków to i bez jQuery. Nie jest już tak potrzebne jak to było kiedyś. Tutaj odeślę was do postu z <a href="https://css-tricks.com/now-ever-might-not-need-jquery/">css-tricks.com: (Now More Than Ever) You Might Not Need jQuery</a>.</p> <p>Na początku dodałem sobie API Firebase i routing w prymitywnej postaci przełączania pola <code>display</code> na poszczególnych elementach DOM. Pisałem szybko, bez potrzeby szukania rozwiązania i było to nawet przyjemne. PStworzony w taki sposób kod nie jest najpiękniejszy, ale łatwo jest go podzielić, zdebugować i pokochać. To taki powrót do odmienionej przeszłości jak w Go. Jedyne co sprawiło mi problem to walidacja i ograniczanie <code>input</code>a.</p> <pre><code>&lt;input id="deadline-day" onkeypress='return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57' placeholder="1" maxlength="2" /&gt;. &lt;input id="deadline-month" onkeypress='return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57' placeholder="1" maxlength="2" /&gt;. &lt;input id="deadline-year" onkeypress='return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57' placeholder="2017" maxlength="4" /&gt; &lt;input id="deadline-hour" onkeypress='return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57' placeholder="12" maxlength="2" /&gt;: &lt;input id="deadline-minute" onkeypress='return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57' placeholder="00" maxlength="2" /&gt; </code></pre> <p>Chyba powinienem to jakoś inaczej zrobić.</p> <h4>Material Design</h4> <p>Chciałem aby Workdone jakoś wyglądał i byłem zdumiony jak wiele można uzyskać bez konieczności sięgania po wielkie komponenty, gotowe arkusze. W chwili słabości dodałem sobie BassCSS, nie użyłem go do tej pory ani razu. Efekty mojej pracy możecie zobaczyć na tym SSie:</p> <p><figure><img src="https://i.imgur.com/aVAydBg.png" alt="Nowy dashboard" /><div></div></figure></p> <h3>EOF</h3> <p>Wielkie aplikacje zwykle potrzebują wielkich frameworków, ale czy aby napewno twoja aktualna lub przyszła aplikacja zalicza się do tych <em>wielkich</em>? Ja polecam ten eksperyment a szczególnie w połączeniu z nowymi zabawkami w CSSie. Sprawdźcie takie zabawki jak flex (obowiązkowo), grid layout, variables czy features. Inną sprawą jest Service Worker i WebAssembly. Web idzie w dobrą stronę i warto się przyłączyć do tego ruchu.</p> Sat, 22 Jul 2017 18:00:00 +0000http://pr0gramista.pl/post/workdone-ponownie/Mój blog w Djangohttp://pr0gramista.pl/post/moj-blog-w-django/<p>To nie było moje pierwsze spotkanie z Django, ale dopiero teraz po dłuższym spotkaniu z Javą jestem świadomy tego jak wspaniały jest ten framework. Wiele widziałem i zbudowanie swojego bloga na Django okazało się idealną alternatywą dla Wordpressa. Wolę popisać sobie niż bawić się w jakieś makarony w Wordpressie. Z doświadczenia wiem, że lepiej nie polegać na pluginach a Wordpress bez nich jest do niczego.</p> <h4>Budujemy!</h4> <p>Początki są łatwe, szczególnie dla kogoś kto już pracował z Django. Oficjalna dokumentacja i poradniki to jedyne źródła z jakich musiałem skorzystać aby napisać większość mojego bloga. Większość elementów Django mimo swojej magii jest bardzo naturalna w swoim użyciu. Django siedzi pośrodku poziomu abstrakcji między Springiem a PHP i to miejsce mi się spodobało.</p> <p>Django przekonał mnie też swoim slangiem <em>batteries included</em> co oddaje zasadę DRY (don't repeat youself), czyli ponownie użycie gotowych elementów np. bezpieczeństwo, szablony. Większość takich inicjatyw kończy się słabo (przykład we wstępie), ale w tym przypadku jest naprawdę nieźle, nie perfekcyjnie, ale nieźle. Elementy dostarczone przez framework, których jest wiele i nie ma sensu ich tutaj opisywać, są eleganckie i działają bez zarzutów, ale te zewnętrzne.... no cóż, bywa różnie.</p> <h4>Klocki</h4> <p><a href="https://djangopackages.org/">Django Packages</a> to strona na której można zobaczyć jak dużo jest tych gotowych elementów. Część z nich już na pierwszy rzut oka wygląda podejrzanie, ale niektóre są w swoim założeniu proste i właśnie te lubię najbardziej. Ja zetknąłem się z tymi paczkami:</p> <ul> <li>django-imagekit --- pozwala przetwarzać obrazki, używam do miniaturek</li> <li>django-taggit --- tworzy tagi Te aplikacje zostały na produkcji, ale testowałem też:</li> <li>django-filer</li> <li>django-filebrowser</li> <li>django-colorfield</li> <li>easy-thumbnails</li> </ul> <p>Większość spełniała swoje zadanie (czasem miały one sporo dodatkowych zależności), ale nie koniecznie tak jakbym chciał, a ja staram się zachować minimalizm w tej kwestii.</p> <h4>Czas otworzyć okna</h4> <p>Nie wiedziałem, że będę tak się męczył aby ta aplikacja zobaczyła zapytanie poza localhostem. Ze Springiem było łatwiej --- jeden <code>.jar</code> mała konfiguracja i gotowe. Python wymaga trochę więcej zabawy. Najpierw trzeba podłączyć apkę pod jakiś serwer HTTP, w moim przypadku był to Apache na Ubuntu. Aplikacja nie zawiera w sobie paczek Pythona, więc trzeba je zainstalować, najlepiej w wirtualnym środowisku, aby później nie było niespodzianek. Do potencjalnych źródeł problemów dochodzi też baza danych. Krótko: jeśli nigdy tego nie robiłeś to...</p> <p><figure><img src="https://i.imgur.com/rL96vxM.png" alt="" /><div></div></figure></p> <p>Dodatkowo ja to robiłem jeszcze z użyciem funkcji wirtualnych hostów w Apache, dzięki czemu nie potrzebuję kilku adresów IP aby hostować więcej niż jedną stronę. Po walce z WSGI i virtualenvem doszedł problem z MySQL i <code>collation</code>, który stawiał problemy przy polskich znakach. Później zaimportowałem posty z Hugo do bazy przy pomocy własnego skryptu w Pythonie. Cała zabawa zajęła mi 2 dni, ale teraz zrobiłbym to w mniej niż godzinę, po prostu mieszanie wersji Pythona, ustawianie odpowiednich ścieżek, wirtualne środowisko, ustawienia MySQL sprawiły, że wszystko tak długo zajęło, ale było warto, bo ostatecznie wszystko działa! Pomocne okazały się instrukcje dostarczone przez Django m.in.: <a href="https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/">Deployment Checklist</a> czy też <a href="https://docs.djangoproject.com/en/1.11/howto/deployment/">Deploying Django</a>.</p> <h4>To nie koniec</h4> <p>Odkąd wypuściłem moją aplikację dokonałem już kilku zmian. Dodałem 404, analitykę, pogląd nieopublikowanego posta, ustawienia zewnętrzne czy też nowe testy. Trochę jeszcze trzeba po pracować nad tym blogiem. Przydałoby się dodać lepsze style na panelu administratora i ogólnie trochę go rozszerzyć. Warto byłoby też ustawić automatyczne backupy i dodać nowe widźety. Zapewne szybko to zrobię, bo wracanie do tego projektu to przyjemność.</p> <p>A jakie są Wasze odczucia z Django lub Pythonem? Warto inwestować w to swój czas? Chętnie was wysłucham.</p> Wed, 28 Jun 2017 17:25:03 +0000http://pr0gramista.pl/post/moj-blog-w-django/Co w trawie piszczy?http://pr0gramista.pl/post/co-sie-dzieje/<p>Minęły już prawie 2 tygodnie od ostatniego postu. Nie porzuciłem bloga, ale jest kilka rzeczy, które trzeba poprawić.</p> <h3>Nowa platforma bloga</h3> <p>Hugo to wspaniała platforma do blogowania, ale dalej jest to tylko generator statycznych plików. Potrzebuję czegoś więcej i nadarzyła się świetna okazja aby to zrealizować. Uczę się django, webowego frameworka do Pythona. W skrócie powiem, że jest bardzo produktywny. Przenoszę więc bloga na moją własną aplikację i montuje tam kilka featurów, których mi brakowało.</p> <ul> <li>Nowy layout --- to mógłbym zrobić już w Hugo, ale po co pisać coś dwa razy. Zajawki? Proszę bardzo! O wiele czystszy i bardziej uporządkowany, to jest to! <figure><img src="https://i.gyazo.com/431d3cba764a5c93ea5dfd77a39dbfdb.png" alt="" /><div>To jest wersja z bocznym panelem, która będzie występowała rzadziej.</div></figure> <figure><img src="https://i.gyazo.com/294dd0430a84dde5d271a590e52757e9.png" alt="" /><div>Porzuciłem zajawki na rzecz dużych ikon i widocznych tagów.</div></figure></li> <li>Obrazki --- ich ręczna edycja jest męcząca i django ma mnie w tym wyręczyć</li> <li>Mobilność --- aktualnie, jeśli jutro mój dysk się spali to nie zobaczycie na tej platformie nowych postów. Chcę wolności od miejsca, komputera i edytora tekstu!</li> <li>Dynamiczna zawartość --- wiem, że chciałbym aby mój blog trochę myślał</li> </ul> <p>Co do kosztów i samego pisania aplikacji --- koszty się nie zmienią, VPS i tak będzie stał, a piszę bo może to być świetny projekt do ćwiczeń i pokazowy.</p> <h3>Gala Daj Się Poznać 2017</h3> <p>Długo myślałem co by tu o niej powiedzieć. Ludzie byli naprawdę wspaniali, co owocowało kameralną atmosferą. Pozdrawiam wszystkich tam zgromadzonych. W sensie tam, mam na myśli biuro Microsoftu i pub JABEERWOCKY, gdzie odbywał się afterek.</p> <p>Stanowczo oczekujcie profesjonalnej relacji od <a href="https://twitter.com/zzmysl/status/876517922625269762">Marcina Połowianiuka z Spider's Weba</a>.</p> <h3>Filmy</h3> <p>Po nowym layoutcie przyszłej platformy bloga można coś zauważyć. Wszystko jest przystosowane do filmów, nawet ikony mają wymiar 16:9. To mój nowy cel --- filmy i jeszcze raz filmy. To prostu przyszłość i w moim odczuciu lepsza forma niż sam blog, który nie zniknie, bo za każdym filmem stoi pewien scenariusz i zapisanie swoich myśli jest tutaj bardzo przydatne.</p> <h3>Workdone</h3> <p>Mój projekt nie był ostatnio aktualizowany i jest pewien powód --- po prostu nie podoba mi się jego forma. Nie jestem fanem frontendu, ale jeszcze się nie poddałem. Spróbuję zacząć od zera i unikać zależności. Nowy JS nie jest dla mnie, nie jestem w stanie zrozumieć dlaczego w backendzie stosujemy clean code, SOLID, wszystko takie piękne etc. a w frontendzie --- ma działać i tyle.</p> <h4>EOF</h4> <p>Blog jest żywy, ale potrzebuję czasu aby skończyć pewne projekty i nie wracać do nich.</p> Sun, 18 Jun 2017 23:52:12 +0000http://pr0gramista.pl/post/co-sie-dzieje/Golanghttp://pr0gramista.pl/post/golang/<p>Swojego ukochanego języka szukam już kilka lat. Najpierw zakochałem się w Javie, później w Pythonie a teraz w Go?</p> <h3>Trochę historii</h3> <p>Go jest młodym językiem, bo został stworzony w 2007, ale dopiero w 2009 został ogłoszony. Dla porównania Java pojawiła się w 1995. Go ma swoje początki w Google, co owocuje dużym wsparciem dla języka. Go jest językiem dynamicznym, silnym, kompilowanym z zarządzaniem pamięcią.</p> <h3>Jaki jest Go?</h3> <h4>Dobrze prymitywny</h4> <p>Coś co najpierw mnie zdziwiło, ale da się to zrozumieć w kontekście Google. Składnia Go jest prymitywna, choć też ma swoje skróty. Pętle for zamiast streamów itp. Dlaczego tak zrobiono? Jedną z przyczyn podaje się to co się stało z C++, gdzie ilość możliwości zrobienia czegoś jest tak wielka, że brakuje pewnego naturalnego standardu. W Go większość rzeczy można zrobić dobrze na jeden sposób. To ma zapobiec istnieniu różnych stylów kodu, co jest trudne, gdy zatrudnia się tak wiele osób.</p> <h4>Wielowątkowość</h4> <p>Twórcy Go zauważyli, że taktowanie procesorów nie zwiększa się już tak drastycznie, ale dodanie większej ilości rdzeni już nie stanowi dla nas takiego problemu, dlatego jedną z ciekawszych cech Go to jego wsparcie dla operacji wielowątkowych. To brzmi głupio, więc powiem to inaczej: <strong>jeszcze nigdy nie chciałem tak często korzystać z wielu wątków jak przy Go</strong>. To jest tak proste i satysfakcjonujące.</p> <pre><code>// Kanał - łatwa komunikacja między wątkami userChannel := make(chan []User) // Pobieram 10 stron z listą użytkowników for i := 1; i &lt; 10; i++ { go getUsers(userChannel, i) // Polecenie go uruchamia nowy wątek } // 10 zapytań leci równolegle a nie po kolei for i := 1; i &lt; 10; i++ { // Czekam na odpowiedzi users := &lt;-userChannel fmt.Printf("Returned %d users\n", len(users)) for _, user := range users { // Coś tam robię } } </code></pre> <p>Warto dodać, że wątki Go nie jest typowymi wątkami, są to tak naprawdę <em>Goroutines</em> czyli lekkie wątki zarządzane przez Go a nie przez system.</p> <h4>Brak dziedziczenia</h4> <p>Go nie ma mechanizmu dziedziczenia. Kiedyś powiedziałbym, że to jest głupie, bo przecież dziedziczenie jest cudowne, ale dziś znam też i ciemną stronę. Spring przyzwyczaił mnie do szukania implementacji przodka implementującego interfejs Y klasy X. Chyba już rozumiecie. Płaska struktura nie jest najlepsza, ale na pewno lepsza od spagetti po <em>pięknym</em> dziedziczeniu.</p> <h4>Biblioteki</h4> <p><a href="/post/jaki-jezyk-programowania/">Jak już kiedyś wspominałem</a> Python ze swoim poleceniem <code>pip</code> sprawia, że instalacja bibliotek jest banalna. Golang robi to jeszcze lepiej zarówno od strony twórców bibliotek jak i ich użytkowników. Jak się to robi? Pokażę na przykładzie <a href="https://github.com/gosuri/uiprogress">uiprogress</a>: <code>go get github.com/gosuri/uiprogress</code>. Zamiast jakiejś wymyślonej nazwy podajemy link do GitHuba i tyle. Później w kodzie używamy <code>import "github.com/gosuri/uiprogress"</code> i tyle!</p> <p>A co do liczby bibliotek --- jest ona spora i dalej się powiększa, ale są jeszcze pewne braki, standardy. Bardzo przydatna lista bibliotek do Go jest dostępna <a href="https://github.com/avelino/awesome-go">tutaj jako Awesome Go</a></p> <p><figure><img src="https://blog.golang.org/gopher/gopher.png" alt="" /><div>Maskotką Go jest suseł w różnych formach, kolorach</div></figure></p> <h4>Go jest łatwy w nauce</h4> <p><a href="https://tour.golang.org/welcome/1">Go Tour</a> to wszystko co potrzebujecie aby poznać język. <a href="https://godoc.org/">GoDoc</a> generuje dokumentacje dla repozytoriów Go. Strukture projektu Go opisuje <a href="https://golang.org/doc/code.html">dokumentacja</a>. Narzucanie czegoś z góry jest w tym przypadku dobre, bo tworzy ładną krzywą uczenia się.</p> <h4>Go jest szybki</h4> <p>Go jest ciągle optymalizowany, są nawet narzędzia do benchmarków. Zmiany czasem widać z wersji na wersję i tak Go wypada lepiej w benchmarkach niż Java, bazując na <a href="https://benchmarksgame.alioth.debian.org/u64q/go.html">Benchmarks Game</a>. Nie dość, że jest szybszy to jeszcze zużywa mniej pamięci. Oczywiście nie ma on większych szans z C i C++, ale na tle innych języków wypada naprawdę dobrze.</p> <h4>Go się kompiluje</h4> <p>Po kompilacji Go otrzymujemy jeden plik, który możemy uruchomić bez żadnych zależności. Tak, nie trzeba nic instalować na serwerach. Kompilowanie do natywnego kodu ma jednak swoje wady, które Go sprytnie rozwiązał. Na przykład, jeśli programujemy na Windowsie 64-bitowym a chcemy otrzymać program na 32-bitowego Linuxa to jedyne co musimy zrobić dla Go to ustawić odpowiednie zmienne środowiskowe.</p> <p>Otwieramy konsolę i wpisujemy <code>set GOOS=linux</code> i wybieramy architekturę przez <code>set GOARCH=386</code> i kompilujemy przez <code>go build</code>. Tak samo możemy sobie poradzić z programami na macOS czy FreeBSD.</p> <p>Listę dostępnych systemów i architektur możemy zobaczyć na <a href="https://golang.org/doc/install/source#environment">golang.org/doc/install/source</a>. Go obsługuje też ARMy, yay!</p> <h3>EOF</h3> <p>Go jest świetnym językiem z równie dobrym ekosystemem. JavaScript mógłby się czegoś nauczyć. Według mnie aktualnym problemem Go jest brak frameworków out-of-the-box, takich jak django. Go nie ma najlepszego zastosowania do gier czy obliczeń naukowych. Aktualnie najlepiej się sprawdza jako część aplikacji biznesowej lub w zarządzaniu systemami. Go trafia też powoli na platformy IoT. Ciekawy język, ale czy znajdziecie dla niego miejsce?</p> Wed, 07 Jun 2017 21:08:19 +0000http://pr0gramista.pl/post/golang/Daj Się Poznać - podsumowaniehttp://pr0gramista.pl/post/dsp-podsumowanie/<p>Oto podsumowanie mojego udziału w konkursie Daj Się Poznać 2017.</p> <p><figure><img src="/media/old/dsp2017-long.png" alt="" /><div></div></figure></p> <h4>Cel</h4> <p>Nie stać w miejscu i robić coś ciekawego --- to był mój cel. Zawsze kiedy pracowałem przy jakimś projekcie mając go w myślach jako osobiste wyzwanie to czułem, że naprawdę czegoś się uczę. Tak było z moimi aplikacjami Android, Javy, Google Code-In, podróży na konferencje i teraz --- blogowaniem.</p> <h4>Spring</h4> <p>Java to jeden z najpopularniejszych języków programowania. Nie dziwię się, dziwię się natomiast dlaczego Spring jest standardem w klasie Enterprise. Może to wina kompatybilności z poprzednimi wersjami a może po prostu nie mam dostatecznej wiedzy aby to zrozumieć. Nie ważne, ważne, że chciałem podszkolić się w jego znajomości i mieć taki przykład gdzie wykorzystałem Spring Security, OAuth etc. Trochę się nie udało, bo po pierwsze Spring bardzo spowolnił development Workdone'a a po drugie wywaliłem go do osobnego projektu, bo nie spełnił moich wymagań. Zdarza się.</p> <h4>JavaScript i Vue.js</h4> <p>Mój projekt konkursowy zmusił mnie do bliższego spotkania z rozbudowanym JavaScriptem. Wcześniej pisałem tylko króciutkie skrypty a coś większego to była aplikacja w Angularze 1. Tym razem zapoznałem się z nowym podejściem, zupełnie innym od tego wcześniej. Moduły, ES2015, <code>npm</code> --- to było coś czego nie znałem. Nie była to łatwa droga, nawet dla mnie, a ja uwielbiam poznawać nowe technologie. Cieszę się, że najgorsze już za mną.</p> <p>Bardzo przydatnym w tej przygodzie był Vue.js. Znakomity framework z solidną dokumentacją. Mam wrażenie, że przez sposób w jaki kodzimy w Vue możemy odnieść wrażenie, że nie narusza on podstawowej struktury strony, ta cecha pomaga przy tej zmianie myślenia starego JSa na nowego. Mam przeczucie, że Vue.js zagości na dłużej w moim arsenale.</p> <h4>Filmy</h4> <p>Podczas konkursu zrealizowałem jeden film, który zresztą miał być tylko filmem objaśniającym cechy języków np. język statyczny a dynamiczny. Później były matury i już nie miałem ochoty na kręcenie. Myślę, że w tym aspekcie wpadłem w pułapkę perfekcjonizmu. Starałem się aby moje filmy były idealne, a wyszło tak, że nie zrobiłem drugiego. Wniosek? Jak tylko odzyskam aparat to zacznę kręcić filmy, bo teraz mam dużo wolnego czasu a szczerze --- pisanie to nie moja działka.</p> <h4>Czasem nie było tak kolorowo</h4> <p>No właśnie, pisanie. Na początku była to dla mnie najgorsza część konkursu. Nie lubię lekcji języka polskiego, literatury i to pisanie sprawiało mi kłopot. Teraz też nie powiedziałbym, że jestem pisarzem czy przynajmniej blogerem. Pisanie niektórych postów to była dla mnie przyjemność, tak było np. z postem <a href="/post/moja-pierwsza-konferencja/">Moja pierwsza konferencja</a> czy z <a href="/post/google-code-in/">Google Code-In</a>.</p> <p>Nie oszukuję, część postów była pisana byleby tylko coś było, ale czy to źle? Może to właśnie to wymaganie miało ustrzec przed popadaniem w wspomniane piekło perfekcjonisty czy prozaiczne lenistwo. Zawsze warto ćwiczyć i tworzenie tych niechcianych tekstów może właśnie takim ćwiczeniem były.</p> <h4>Efekt (końcowy)</h4> <p>Zobaczcie sami na <a href="https://workdone.xyz">workdone.xyz</a>. Nie, projekt nie jest skończony i brakuje w nim wiele rzeczy. Prace trwają.</p> <h4>Co dalej?</h4> <p>Blog pewnie już nie będzie aktualizowany tak często, pojawią się za to filmy i o wiele lepsze posty o bardziej sprecyzowanej tematyce. W planach mam też zainteresowanie się językiem Go lub ewentualnie Pythonem, ale dlaczego nimi to już kiedy indziej.</p> Wed, 31 May 2017 18:20:36 +0000http://pr0gramista.pl/post/dsp-podsumowanie/DevLog #12http://pr0gramista.pl/post/workdone-log-12/<p>W tym tygodniu trochę mniej niż zwykle, ale to dlatego, że byłem na Code Europe. Więcej Vue(coś). Będzie trochę radości i nienawiści.</p> <h5>Small things</h5> <p>Workdone doczekał się wielu mały poprawek np. autologowanie czy usunięcie niepotrzebnego odniesienia. W <a href="https://github.com/PoprostuRonin/workdone/commit/278abeb00cf68a9479e3410553016a52beedf4b2">@278abe</a> naprawiłem aktualizowanie się Packery i usunąłem hashe z linków od zmiany kolorów...</p> <h5>Vuex</h5> <p><a href="https://vuex.vuejs.org/en/intro.html">Vuex</a> to wzorzec i framework do zarządzania stanem w Vue.js. Służy jako scentralizowana baza dla reszty komponentów w naszej aplikacji a przy tym definiuje pewne zasady korzystania z nich. Więcej kontroli, lepszy dostęp dla devtoolsów i bardzo wygodne rozwiązanie. Dla mnie --- druga perełka w tym JSowym świecie.</p> <p><figure><img src="https://vuex.vuejs.org/en/images/vuex.png" alt="" /><div></div></figure></p> <p>Czy potrzebujesz Vuex w swojej aplikacji? Znalazłem ciekawą odpowiedź na to pytanie:</p> <p><em>Flux libraries are like glasses: you’ll know when you need them.</em></p> <h5>Strukturyzacja danych w Firebase</h5> <p>Firebase <a href="/post/firebase/">jak już kiedyś wspomniałem</a> sprawia problem przy strukturyzacji danych w bazie. Workdone nie opiera się na komunikacji z innymi, więc problem staje się o wiele mniejszy. Postawiłem na strukturę scentralizowaną na użytkowniku. Każdy unikatowy identyfikator klienta będzie zawierał swoje drzewko, swój <em>przydział</em> w bazie danych.</p> <p><figure><img src="https://i.gyazo.com/98c94bc887a5a634026901982557dd1f.png" alt="" /><div>Screenshot z widoku bazy danych w konsoli.</div></figure></p> <p>Jak to się zda w końcowej aplikacji? Zobaczymy :)</p> <h5>VuexFire</h5> <p>Vuex jest super, ale jak do niego możemy podłączyć Firebase? Nie jest to takie proste, choć zdołałem to zrobić bez użycia jakiś frameworków. Później jednak znalazłem też <a href="https://github.com/vuejs/vuefire">VueFire</a> i pomyślałem, że ktoś to zrobił znacznie lepiej ode mnie. Nie zrobił. Dokumentacja do tej biblioteki jest bardzo skromna. Instalacja jest dziwna i ma ten sam minus co moje rozwiązanie. Najgorsza jest jednak ilość boilercodu jaki VueFire wprowadza. Po co ręcznie zatwierdzać zmiany? Firebase po lubiłem właśnie za brak takich niby bezpieczniejszych rozwiązań.</p> <p>Mniej kodu to zwykle mniej problemów a już najgorsze są frameworki, które udają, że są przydatne. Żegnaj VueFire.</p> <h5>Moje rozwiązanie</h5> <p>Najciekawsza część to funkcja z <a href="https://github.com/PoprostuRonin/workdone/blob/master/src/components/Dashboard.vue">Dashboard.vue</a>:</p> <pre><code>created: function () { var dashboard = this if (dashboard.$store.getters.uuid != null) { dashboard.updateReferences() } else { this.$store.watch( function () { return dashboard.$store.getters.uuid }, function (uuid) { dashboard.updateReferences() } ) } } ... updateReferences: function () { this.$bindAsArray('habits', firebase.database().ref(this.$store.getters.uuid + '/habits/')) this.$bindAsArray('todos', firebase.database().ref(this.$store.getters.uuid + '/todos/')) } </code></pre> <p>Potrzebuje UUID aby odnosić się do danych użytkownika zatem zanim powiąże Firebase'a to poczekam aż uuid będzie zaktualizowane, a to stanie się kiedy użytkownik się zaloguje. Całkiem proste, prawda? Zanim spróbujecie to wykorzystać to pamiętajcie aby zdefiniować wartości np.</p> <pre><code>data: function () { return { selectedTag: '', habits: [], todos: [] } }, </code></pre> <h5>Przekazywanie wartości</h5> <p>Teraz uświadomiłem sobie jak wiele jest sposobów na przekazywanie informacji w Vue. Możemy użyć Vuex, globalnej kolejki zdarzeń, przekazywania bezpośrednio do innego komponentu jak i zewnętrznych odniesień. Myślę, że w tym całym przenoszeniu kodu to właśnie nowy sposób na przesył danych okazał się dla mnie największym wyzwaniem. Brak globalnych wartości (prawie) powoduje duży zamęt.</p> <h4>EOF</h4> <p>To już prawie koniec konkursowego żywota Workdone. Na pewno tego projektu nie porzucę, bo jest po prostu zbyt ciekawy na ten moment. Cała ta próba zmierzenia się z JavaScriptem to w tej chwili wyzwanie. Po za tym chcę jeszcze zrobić swój pierwszy plugin do Chrome i jakąś apkę na Androida. Nie poddam się tak łatwo.</p> Sun, 28 May 2017 17:35:11 +0000http://pr0gramista.pl/post/workdone-log-12/Code Europehttp://pr0gramista.pl/post/code-europe/<p>Podobno największa konferencja programistyczna w Polsce, ale czy najlepsza? Oto moja relacja z tego wydarzenia.</p> <h4>Przed</h4> <p>Nie pamiętam jak dowiedziałem się o Code Europe. Szczerze to na początku uważałem tą konferencje jako jakiś scam, głównie ze względu na kampanię marketingową jaką prowadzą. Wydaje się taka sztuczna i pusta. Nie planowałem się tam udać, ale dobry termin, lokacja i przede wszystkim chęć zobaczenia czegoś nowego przekonały mnie do wydania tych 58 złotych. Dotarcie na miejsce nie stanowiło problemu, choć kolejka do rejestracji była przerażająca. Było to rano więc nie było aż tak gorąco, ale i tak słońce mocno dawało się we znaki. To był pierwszy moment kiedy miałem wrażenie, że ilość ludzi jest przytłaczająca.</p> <h4>W trakcie</h4> <p><figure><img src="/media/old/code-europe-zdj-1.jpg" alt="" /><div>Pogoda dopisała.</div></figure></p> <h5>Miejsce</h5> <p>Miejsce w jakim odbywała się konferencja to Hala Stulecia we Wrocławiu. Ładna, pełna zieleni okolica, wycieczki emerytowanych Niemców i nowoczesne wnętrze. Dodatkowo, przypadkowo lub nie --- food trucki, dobra opcja na obiad, bo na samej konferencji ciężko było z jedzeniem. Duży plus za lokalizację.</p> <h5>Ludzie i organizacja</h5> <p>Trudno mi tu coś powiedzieć. Ilość ludzi sprawiała, że trudno było podyskutować. Przy wejściach z sal tworzył się ruch wahadłowy, na wielu prezentacjach brakowało miejsc, kolejki były naprawdę pospolite. Na szczęście toaleta była wolna od tego problemu. Zatem czy naprawdę <em>liczba miejsc jest ograniczona</em>? Pomijając ten aspekt brakowało mi jakiegoś kontaktu z organizatorami. Żadnego przywitania, pewnych wyjaśnień --- np. nie tylko ja miałem wątpliwości co do położenia sali Seattle, bo aby do niej dotrzeć trzeba było użyć wyjątkowych schodów. <figure><img src="/media/old/code-europe-zdj-2.jpg" alt="" /><div>Popcorn i kawa, ciekawe połączenie jako przekąska. Tak, tutaj rozciągała się kolejka na kilometr.</div></figure></p> <h5>Firmy</h5> <p>W sumie standard, choć zauważyłem, że stoiska miały bardziej charakter formalny w porównaniu do confitury co oczywiście jest zrozumiałe, ale nie było znowu tak źle. Ja jako ktoś kto ma absolutne 0 w doświadczeniu formalnym dobrze się bawiłem rozmawiając z przedstawicielami.</p> <pre><code># Stoisko Nokii, ja taki uśmiechnięty podchodzę. Ja: Dzień dobry, ja mam pytanie: co teraz robi Nokia? Pani: No na pewno nie telefony :) </code></pre> <p>To był dla mnie ciekawy trening umiejętności rozmawiania i wychodzenia ze swojej nieśmiałości.</p> <h5>Prezentacje</h5> <p>Było w czym wybierać. 5 sal, prezentacje od 9 do nawet 18, sporo prezentacji w języku angielskim, kilka prowadzonych przez osoby z znanych firm m.in Spotify. Code Europe tematycznie nie jest sprecyzowany. Widziałem prezentacje w formie opowieści o losach w firmie, przemyśleń o urządzeniach IoT, wprowadzenia do technologii czy technicznej implemetacji wzorca w Androidzie. Każdy mógł znaleźć coś dla siebie. Mi osobiście prezentacje wydały się zbyt ogólne, oczywiste, ale niemniej miło się ich słuchało. Muszę się też przyznać do błędu, czyli do nie zaplanowania agendy.</p> <h4>Po</h4> <p>Jak po confiturze miałem sporą motywację do nauki to tak po Code Europe nie mam takiej zajawki, ale to może wina tego, że i tak jestem już zapracowany (moje wakacje). Nie uważam jednak tego czasu za stracony, czuję że każda taka przygoda to krok do bycia odważniejszym i ciekawszym człowiekiem. Jeśli macie okazję zajrzyjcie na Code Europe, ale miejcie na uwadzę te drobne problemy. Ja wracam do kodu.</p> <p><figure><img src="/media/old/code-europe-gift.jpg" alt="" /><div>Stylowany notes, worek-plecak, długopis i nieobecna już woda i batonik.</div></figure></p> Fri, 26 May 2017 00:35:36 +0000http://pr0gramista.pl/post/code-europe/Stack Overflowhttp://pr0gramista.pl/post/stackoverflow/<p>Stack Overflow to zapewne najważniejszy serwis dla programistów jaki istnieje. Jego wpływ na naszą społeczność jest tak wielki, że następna lub już aktualna generacja programistów będzie od tego portalu uzależniona.</p> <h5>Moja przygoda z Stack Overflow</h5> <p>Swoje przemyślenia wynikają z moich wrażeń podczas miesiąca z SO. Tak po prostu nudziłem się i pomyślałem aby zrobić sobie takie wyzwanie. Codziennie chciałem uzyskać minimum 25 reputacji lub kilka udanych rozpatrzeń flag.</p> <p>Efekt tej zabawy? W ciągu miesiąca osiągnąłem około 2000 punktów reputacji, prawie 100 pomocnych flag i 25 edycji postów. Odpowiadałem na pytania z różnych technologii --- Java, libGDX, Unity, Python, JavaScript, Android, Firebase, API Google, PHP czy nawet Windows Phone. Ja to lubię sobie pożąglować.</p> <h5>Wrażenia</h5> <p>Jako osoba nieśmiała, która wątpi w swój głos to Stack Overflow było dla mnie bardzo ciekawym ćwiczeniem wypowiadania się, tłumaczenia i pewności siebie, bo jest ona czasem potrzebna. Być pewnym swojego kodu, wystawić go na ocenę to nie jest prosta rzecz dla początkujących, ale warto dać się sprawdzać, bo możemy być miło zaskoczeni.</p> <p><em>Lepiej żałować, że coś się zrobiło, niż że się tego nie zrobiło ze strachu przed dostaniem tego negatywnego punktu</em></p> <p>Satysfakcja z pomagania innym. To jest mój ulubiony element tego serwisu. Zobaczyć szczere podziękowania od zupełnie obcej osoby jest niesamowicie motywujące i poprawiające humor. Jeśli kiedyś ktoś odpowie na wasze pytanie --- podziękujcie mu, to zawsze daje większego kopa niż tylko te punkty.</p> <h5>Nie wszystko jest bez skazy</h5> <p>Stack Overflow to czasem taki dziki zachód. Pojawia się pytanie, umiesz na nie odpowiedzieć, piszesz swoją elokwentną, pełną odpowiedź... i widzisz coś takiego: <em>just use xxx, like this: <code>&lt;jakiś garbage code&gt;</code></em> już z jednym punktem. Czasem ludzie docenią twój wkład, ale zwykle po prostu pierwsza odpowiedź zadziała i nikt już nie będzie patrzył, że jest ona pozbawiona objaśnień. Tak właśnie będą programować <em>programiści Stack Overflow</em> --- copy-paste i do widzenia.</p> <p>Czasem ludzie idą w drugą stronę i zapominają, że chcą pomóc człowiekowi a nie maszynie, a różnica jest taka, że maszyna od początku będzie wiedziała do czego jest lamba. Wiele razy widziałem pytanie gdzie widać, że autor jest początkującym, ale zamiast pokazać rozwiązanie na kodzie, który jest dla niego zrozumiały to pakują mu lambdy, zewnętrzne biblioteki czy jakieś dziwne triki.</p> <p>Trzeci problem to uwielbienie odpowiedzi na proste pytania. Na moim <a href="https://stackoverflow.com/questions/39520426/typeerror-webelement-object-is-not-iterable-error/39520898#39520898">przykładzie</a>. Coś bardzo prostego, wymagającego niewielkiej wiedzy o Pythonie a jest moją najwyżej punktowaną odpowiedzią. Czy to fair wobec trudnych pytań? Oczywiście jest system nagród pozwalający wystawić nagrodę za odpowiedź na pytanie, ale nawet one często nie przyciągają uwagi tych doświadczonych.</p> <h5>Nie tylko pytania i odpowiedzi</h5> <p>No gdzie tu by można znaleźć programistów jak nie na ich ulubionym serwisie. Stack Overflow Jobs to dobrze zrobiony portal ogłoszeń prac. Oparty o tagi (prawie jak <a href="/tags/workdone/">Workdone</a>), ma dobrą wyszukiwarkę i sporo ofert. Po za tym pracodawcy szukają ludzi do pracy po Stack Overflow, jeśli ktoś widzi, że ktoś się na czymś zna i potrzebny jest ktoś taki to nie ma żadnych przeciwności aby nie zaproponować komuś takiemu pracy. Myślę też, że powiedzenie, że ma się X punktów na SO przy rozmowie o pracę może wywołać pozytywne wrażenie.</p> <p>Dobra dokumentacja to podstawa dobrego softu. SO nie tak dawno otworzyło swój portal z dokumentacją do wszystkiego. <a href="https://stackoverflow.com/documentation">Stack Overflow Documentation</a> to taka wikipedia technologii wraz z przykładami. Oprócz małej patologii jaka miała miejsce to dokumentacja SO jest całkiem przyjemna, choć jeszcze długa droga przed nią.</p> <p>Na koniec wspomnę o <a href="https://insights.stackoverflow.com">Stack Overflow Insight</a>, czyli statystykach o nas i technologii. Oprócz znanych corocznych zestawień dostępne jest też narzędzie, nie wszystkim znane, podobne do Google Trends a jest nim <a href="https://insights.stackoverflow.com/trends">Stack Overflow Trends</a>. Jeśli jeszcze nie zajrzeliście do zestawienia z 2017 roku to polecam to zrobić, mnie zaciekawiły: <a href="https://insights.stackoverflow.com/survey/2017#work-how-did-developers-find-their-current-job">znajomość a zdobycie pracy</a>, <a href="https://insights.stackoverflow.com/survey/2017#work-where-are-developers-working-remote-full-time">rosyjscy hakerzy</a> i <a href="https://insights.stackoverflow.com/survey/2017#developer-profile-importance-of-formal-education">czy studia są ważne</a>.</p> Sun, 21 May 2017 18:59:08 +0000http://pr0gramista.pl/post/stackoverflow/DevLog #11http://pr0gramista.pl/post/workdone-log-11/<p>Koniec matur --- wielki przypływ mocy i tak jak ostatnio zapowiadałem, przeniosłem projekt do Firebase.</p> <h5>Przyspieszmy!</h5> <p>10 dni do końca. Czas na przyspieszenie, ale aby to zrobić potrzebny będzie nam Firebase. Czas kompletnie przebudować projekt!</p> <h5>Moduły</h5> <p>Skoro i tak pozbywam się backendu to zdecydowałem użyć tak bardzo krytykowanego przeze mnie <em>nowego</em> podejścia do JavaScriptu --- miliony <code>npm</code>, configów, <em>linkowanie</em> JSa, etc. Dlaczego? Mimo, że nie lubię tych modułów (i słusznie) to muszę przyznać, że Vue.js sporo traci bez nich, a po drugie, chce spróbować przełamać się i poznać ekosystem JS.</p> <p>Trochę żałuje tej decyzji, bo moduły dalej są do kitu. Większość bibliotek wymaga jakiejś globalnej zmiennej, ale modułowość wyklucza takie. Próbowałem zrobić to w myśli modułów, ale nie po kilku godzinach poddałem się.</p> <p><figure><img src="https://i.gyazo.com/a807bcf86e6534c4c127c7e68ad1bb9b.png" alt="" /><div>Kiedy Chrome już nie pokazuje faviconów...</div></figure></p> <p>Nie chciałbym aby odebrano mnie jako zawsze sceptycznie nastawionego do JSa, ale spójrzmy:</p> <pre><code>window.$grid = $('.grid').packery({ itemSelector: '.grid-item', gutter: 0, columnWidth: 300 }) </code></pre> <pre><code>/*eslint-disable */ $('.dropdown-button').dropdown({ hover: true }) window.$grid.prepend(element).packery('prepended', element) var draggie = new Draggabilly(element) window.$grid.packery('bindDraggabillyEvents', draggie) /*eslint-enable */ </code></pre> <p>To wyłączenie ESLinta nie jest dla zabawy. Materialize chce przykleić się do jQuery, podobnie packery, ale jeśli spróbować importować jQuery jako moduł to nic tutaj nie wyjdzie. Można powiedzieć, że te frameworki wymagają globalnego jQuery. Kompletny brak konsekwencji.</p> <h5>Integracja Firebase</h5> <p><a href="https://github.com/vuejs/vuefire">VueFire</a> nie jest najlepszy, szczególnie jeśli używamy modułów. Problemem jest wymóg posiadania odnośnika do obiektu Firebase gdy chcemy zaktualizować jakiś element listy. Znowu widoczna jest tutaj sprzeczność między podejściem modułowym a globalnymi zmiennymi lub brak odpowiedniej dokumentacji pokazującej jakieś lepsze magiczne wyjście niż strzelanie eventami. Po za tym jednym dziwactwem VueFire to bardzo oszczędny wrapper, w końcu ma on 90 commitów.</p> <h5>Router</h5> <p>Vue.js ma najlepszy router jaki widziałem. Taki prosty i skuteczny, cudo!</p> <pre><code>export default new Router({ routes: [ { path: '/', name: 'Landing', component: Landing }, { path: '/work', name: 'Work', component: Work, children: [ { path: '/', component: Dashboard } ] } ] }) </code></pre> <p>Dodam jeszcze, że linkowanie i wyświetlanie komponentów jest w formie jednego elementu W HTMLu. To chyba jedyny element do jakiego nie mam żadnych zastrzeżeń.</p> <h5>EOF</h5> <p>Jestem zadowolony z tego co udało się osiągnąć. Teraz o wiele łatwiej jest tworzyć ten projekt. Live-reload (taki naprawdę live) bardzo przyśpiesza tempo pisania. Co prawda backend zniknął, ale Firebase też wymaga konfiguracji, choć o wiele mniejszej. JavaScript boli, ale może to tak jak z CSSem --- da się do tego przywyknąć.</p> <p>We wtorek jestem na <a href="https://www.codeeurope.pl/pl">Code Europe</a>, będzie relacja.</p> Sun, 21 May 2017 13:59:08 +0000http://pr0gramista.pl/post/workdone-log-11/DevLog #10http://pr0gramista.pl/post/workdone-log-10/<p>Męczące egzaminy i problem 90%.</p> <h5>Czas się zastanowić</h5> <p>Czas się kończy a Workdone jeszcze nie jest tam gdzie powinien. Czy to czas użyć swojego asa w rękawie? Nie chciałem używać <a href="/post/firebase/">Firebase</a>, to po prostu byłoby za łatwe, zamiast tego postawiłem sobie wyzwanie stworzenia własnego backendu, ale aktualnie widzę, dlaczego Java nie jest popularna w webie poza enterprisem. Z tą decyzją jeszcze poczekam, może po maturach będę miał więcej chęci</p> <h5>Vue router</h5> <p>Workdone potrzebuje więcej niż jednego widoku. Routerów jakich można do tego użyć jest sporo, ale dla Vue.js został stworzony <a href="https://github.com/vuejs/vue-router">vue-router</a>. Skonfigurowanie tego routera jest proste i oczywiste, gdy używamy Vue z ES2015. Bez niego część dokumentacji staje się nieprzydatna, ale to mnie nie powstrzymało.</p> <p>Dashboard wyodrębniłem od głównej części aplikacji jako komponent. Następnie komponent zamieniłem jako <em>rozszerzenie</em> Vue co pozwala mi na przypisanie tego komponentu do zmiennej.</p> <pre><code>Vue.component('dashboard', {... </code></pre> <p>zamieniło się w</p> <pre><code>var Dashboard = Vue.extend({... </code></pre> <p>Później proces konfiguracji routera jest bardzo podobny i łatwy.</p> <h5>Próba rozdzielenia</h5> <p>Największym problemem przy pracy ze Springiem jest fakt, że nawet przy zmianie jednej linijki w CSSie cały Spring musi się przeładowywać. Dodatkowo trzymanie jakichkolwiek build toolsów JavaScripta w folderze <code>resources</code> powoduje indexowanie ich w IDE. Masakra.</p> <p>Rozdzielenie frontendu z backendem nie jest niczym trudnym, chyba że używasz zewnętrznego OAuth. Pliki cookies, sesyjność, CORS i OAuth na środku powodują, że zadanie staje się problematyczne. Nie pomagają też poradniki w sieci, bo wyszukiwanie frazy OAuth z Springiem daje większości wyniki powiązane z tworzeniem własnego serwera OAuth, a nie o to mi chodzi.</p> <p>Jeśli spędzasz nad problemem więcej niż godzinę z rzędu to lepiej sobie odpuść i wróć do niego później. To działa. Kiedyś męczyłem się nad jedną rzeczą, zmęczony położyłem się aby pomyśleć. Oczywiście zasnąłem. Wstałem o 5 i w 30 minut rozwiązałem problem. To jeszcze było w trakcie roku szkolnego :)</p> <h5>EOF</h5> <p>Naprawiłem kilka małych błędów, dodałem router i rozpocząłem side-project o nazwie <a href="https://github.com/PoprostuRonin/ace-calcs">Ace calcs</a> --- kalkulator statystyk do MMO Ace Online.</p> Sun, 14 May 2017 18:00:32 +0000http://pr0gramista.pl/post/workdone-log-10/Firebasehttp://pr0gramista.pl/post/firebase/<p>Nowa i ciekawa technologia od Google, poniekąd zastępująca tradycyjny backend. Czy to rewolucja?</p> <p>Firebase to platforma do naprawdę szybkiego tworzenia aplikacji. Znacie zasadę DRY (Don't repeat yourself)? Firebase jest właśnie od tego. Pomyślcie, elementy jakie składają się na backend bardzo często się powtarzają. W prawie każdej aplikacji mamy bazę danych, hosting i uwierzytelnianie. Oczywiście napisanie tych systemów nie stanowi problemu dla korporacji, ale mniejsze zespoły powinny zerknąć na to okiem.</p> <p><figure><img src="http://www.androidhive.info/wp-content/uploads/2016/06/firebase-features.png" alt="" /><div>Infografika tego co składa się na Firebase</div></figure></p> <p>Firebase to nie tylko gotowe funkcjonalności, to również znacznie narzędzia do prowadzenia kampanii reklamowej naszej aplikacji. Zaproszenia, AdWords, analityka --- cały potencjał ekosystemu Google w jednym miejscu.</p> <p>Firebase może być także wykorzystywany jako narzędzie do developmentu. Test Lab to miejsce gdzie możemy przetestować swoją aplikację na różnych urządzeniach, coś co jest bardzo trudne w przypadku Androida. Dostępny mamy też crash reporting.</p> <iframe width="560" height="400" src="https://www.youtube.com/embed/O17OWyx08Cg" frameborder="0" allowfullscreen></iframe><p>Firebase swoje API głównie prowadzi (na maj 2017) dla 5 systemów: Web, skierowany do posiadaczy komputerów, obsługiwany językiem JavaScript, Android, iOS i tych, których jeszcze tak dawno nie było --- C++ i Unity. Brakuje czegoś dla was? Nie szkodzi, społeczność Firebase już zdążyła stworzyć nieoficjalne API dla różnych <a href="https://github.com/search?p=1&amp;q=firebase&amp;type=Repositories&amp;utf8=%E2%9C%93">języków (m.in. Python, Go, C#)</a>.</p> <p>Firebase ma też API serwerowe dla Node.js, Java i Pythona. Pozwala to na pełny dostęp do bazy z zewnętrznej aplikacji, wysyłać wiadomości Firebase Cloud Messaging czy generować swoje tokeny do autoryzacji. Firebase można więc potraktować jako mikroserwis.</p> <h5>Nie wszystko jest takie kolorowe</h5> <p>Firebase nie jest darmowy, to dosyć oczywiste, ale to jaką kontrolę mamy nad tymi wydatkami może budzić obawy. Floodowanie aplikacji wydaje się dużym zagrożeniem, a zablokowanie takiego ruchu wcale może nie być takie łatwe.</p> <p>Kolejnym problemem jest baza danych jaką udostępnia nam Firebase. Ma ona postać drzewka, takiego JSONa. Ma to kilka plusów jak i minusów. Zaletą jest prostota takiego rozwiązania, ale minusem jest wymóg naprawdę przemyślenia tego jak będziemy składować dane, aby nie pobierać całego drzewka. Reguły zabezpieczające są w koncepcie bardzo proste, ale w rzeczywistości może to sprawiać problem.</p> <h4>EOF</h4> <p>Czy to koniec pisania backendu? Nie, ale to droga do większej ilości innowacyjnych aplikacji, bo właśnie o to chodzi w Firebase, aby jak najszybciej zamienić pomysł w rzeczywisty produkt. Zamiast zaprzątać sobie głowę nudnymi elementami naszej programistycznej układanki warto móc skupić się na prawdziwym problemie. Osobiście polecam sprawdzić!</p> Sat, 13 May 2017 21:09:32 +0000http://pr0gramista.pl/post/firebase/DevLog #9http://pr0gramista.pl/post/workdone-log-9/<p>Filtrowanie przez tagi i nowy layout!</p> <h5>Filtrowanie</h5> <p>W poprzednim tygodniu stworzyłem proste tagowanie a w tym stworzyłem na jego podstawie filtrowanie karteczek. Wystarczy nacisnąć na tag i filtr automatycznie się nakłada.</p> <p><figure><img src="https://i.gyazo.com/88165ef1d974900ce3d7964300b86765.png" alt="" /><div>Takie przykładowe wykorzystanie</div></figure></p> <h5>Nowy layout</h5> <p>Lubię produkty Google i w czasie pracy nad Workdone wiele inspiracji zasięgnąłem od ich Google Keep. Bardzo podoba mi się layout jaki tam zastosowano i <a href="https://stackoverflow.com/questions/22929755/how-to-accomplish-something-like-google-keep-layout">najwyraźniej nie tylko mi</a>.</p> <p>Po obejrzeniu kilku frameworków, które mogłyby mi w tym pomóc zdecydowałem się na użycie <a href="https://packery.metafizzy.co/">Packery</a>. Nie jest to biblioteka całkowicie darmowa, ale wolno jej używać w projektach open-source na licencji kompatybilnej z GNU GPL wersji 3. Workdone ma taką licencję, więc nie ma problemu!</p> <p>Kilka linijek kodu i już mamy działający layout.</p> <video id="vid1" autoplay loop style="display: inline-block; margin-left: 30px; margin-bottom: 10px;"> <source src="https://i.gyazo.com/209c8a78fbbcfcdc815446558183276b.mp4" type="video/mp4"> </video><p>Teraz wystarczyło tylko dodać stylowanie i regułe dla małych urządzeń aby te karteczki zajmowały 100% szerokości.</p> <p><figure><img src="https://i.gyazo.com/91f79bc6f6422307459f1833bb421137.png" alt="" /><div>Efekt końcowy</div></figure></p> <h5>Debouncing</h5> <p>Kiedyś zauważyłem, że synchronizacja z serwerem odbywa się bardzo szybko generując duży ruch. Pomyślałem, że mogę od razu dodać coś aby nie było takiego spamu.</p> <p>Z ratunkiem przychodzi <a href="https://lodash.com/">lodash</a>, który jest taką biblioteką od utility. Funkcja <a href="https://lodash.com/docs/4.17.4#debounce"><code>debounce</code></a> zbiera wykonania funkcji i wykonuje ją raz po określonym czasie. Teraz edytując tytuł do serwera jest wysyłane jedno zapytanie a nie tyle ile znaków zmieniono. Świetne utility.</p> <h5>EOF</h5> <p>Mimo, że jestem w środku matur to jednak dla mnie praca przy kodzie to pasja. Życzcie mi powodzenia :)</p> <script> function omg() { document.getElementById('vid1').play(); } setTimeout(omg, 500) </script>Sun, 07 May 2017 20:05:00 +0000http://pr0gramista.pl/post/workdone-log-9/Jaki język programowania?http://pr0gramista.pl/post/jaki-jezyk-programowania/<p>Jesteś początkującym i nie wiesz od jakiego języka zacząć? Dobrze trafiłeś, bo mam już dość tego pytania i pokażę Ci cztery języki, które mogą Ci się spodobać.</p> <p><img src="/media/old/python.png" alt="Python Logo"></p> <h4>Python</h4> <p>Python to dynamiczny, ale silny język wysokiego poziomu. Ma prostą składnie, która wymusza na programiście pisanie ładnego kodu, co jest wielkim plusem dla początkujących. Kolejną cechą Pythona to system pakietów, który sprawia, że instalacja bibliotek (a tych jest sporo) nie będzie stanowiła problemu. Wewnętrzne</p> <p>Python przez swoją prostotę jest wykorzystywany głównie na 3 sposoby:</p> <p>Pierwszy z nich to zrobienie z Pythona języka do skryptów, czyli takich zwykłe małych programików, które mają np. przenieść plik A do folderu X etc. Implementacje intrepretera Pythona łatwo jest umieścić w swoim programie pozwalając na tworzenie pluginów jak np. w GIMPie. Zatem znajomość Pythona przydaje się nawet przy pracy przy innych językach.</p> <p>Python znalazł też swoje miejsce w aplikacjach webowych. Trzy najpopularniejsze frameworki webowe Pythona to:</p> <ul> <li><a href="https://www.djangoproject.com/">django</a> --- rozbudowany, bogaty w funkcjonalności</li> <li><a href="http://flask.pocoo.org/">Flask</a> --- minimalistyczny, nastawiony na rozszerzenia</li> <li><a href="https://trypyramid.com/">Pyramid</a> --- coś pomiędzy dwoma powyższymi</li> </ul> <p>Trudno popełnić błąd przy ich wyborze, choć django wydaje mi się najpopularniejszy i bardzo ciekawy.</p> <p>Ostatnie miejsce gdzie często spotkacie Pythona to sekcja naukowa. Przez swoją prostotę wąż został pokochany przez analityków, naukowców i nauczycieli programowania. Nie ma co się dziwić! Warto również dodać, że Python będzie dostępny dla maturzystów od roku 2018/2019.</p> <p>Dlaczego więc nie widzimy Pythona wszędzie? Głównie przez swoją nie zachwycającą wydajność i fakt, że aby go używać musimy mieć go zainstalowanego. Inną sprawą jest jego dynamiczne typowanie, nie jest to wada, po prostu nie tak przewidywalny jak...</p> <p><img src="/media/old/java.png" alt="Java Logo"></p> <h4>Java / C\</h4> <p>Java i C# (platforma .NET) to dwa potężne i podobne do siebie ekosystemy. Oba skupiają się na rozwiązaniach klasy enterprise. Z tego też powodu są to języki statyczne i silne. Składnia opiera się na składni C++, ale liczba ulepszeń jest długa.</p> <p>Te dwa ekosystemy, dające dużo $$$, wytworzyły najlepsze narzędzia jakie możecie spotkać w świecie programowania. IntelliJ IDEA od JetBeans do Javy i Visual Studio do C# to prawdziwe kombajny. Ilość i jakość bibliotek, debuggerów, narzędzi do budowania jest nie do pobicia.</p> <p>Java i C# to również popularne języki do tworzenia aplikacji okienkowych i gier, za sprawą takich silników jak LWJGL/LibGDX (Java) i popularnego Unity (C#). Z aplikacjami mobilnymi też nie będzie problemu. Aplikacje dla Androida głównie są pisane w Javie. C# ma na swoją obrone (oprócz Windows Phone...) framework Xamarin, który pozwala na multiplatformowe aplikacje.</p> <p>JVM (Java Virtual Machine) i .NET to nie tylko Java i C#. Wchodząc do tych ekosystemów będzie mogli skorzystać z innych języków np. <a href="https://www.scala-lang.org/">Scala</a> po stronie JVM czy F# po stronie .NET i korzystać wymiennie z kodu Scali i Javy. Warto zawsze mieć jakiś wybór, choćby z samej nudy pisania wciąż w tym samym.</p> <p>Co do C# i jego natury Microsoftu: to w ostatnich latach drastycznie się zmienia i argument, że <em>C# działa tylko na Windowsie</em> już nie takiej mocy.</p> <p><img src="/media/old/cpp.png" alt="C++ Logo"></p> <h4>C++</h4> <p>C++ to język statyczny i słaby. Z racji na swój wiek, narzędzia i problemach z standaryzacją nie on jest najlepszym językiem do nauki. Czemu więc go tutaj umieściłem? To przez to, że on zawsze się gdzieś tam pojawia, ale zacznijmy od początku.</p> <p>Wszystkie języki na tej liście nie są kompilowane do kodu maszynowego oprócz C++. To właśnie ta cecha sprawia, że C++ dalej jest językiem żywych, chociaż niszowym. Każdy silnik do gier, sterownik, system operacyjny musi zacząć od C++ lub C (taki starszy brat). Nie omija to urządzeń mobilnych. Mówiłem, że apki Androida są pisane w Javie, ale istnieje coś takiego jak Android NDK (Native Development Kit), czyli zestaw do pisania natywnego kodu dla Androida.</p> <p>C++ to również język od którego zwykle zaczyna się programowania w szkole a to sprawia, że w sieci znajduje się wiele materiałów dla początkujących i łatwo jest o pomoc np. od nauczyciela w szkole.</p> <p>Zatem jeśli interesujecie się językami niskiego poziomu, czyli takich bliżej podstaw, hardwaru to C++ jest dla was.</p> <p><img src="/media/old/js.png" alt="JavaScript Logo"></p> <h4>JavaScript</h4> <p><em>Nie mylić z Javą, ta nazwa jest zupełnie nieadekwatna</em></p> <p>Nie bez powodu umieściłem ten język na końcu. Ludzi dzieli się na dwa typy: Ci co kochają JS lub go nienawidzą. Sam język nie jest nowy, ale ostatnio przeżywa swój renesans, głównie za sprawą potrzeby lepszych aplikacji webowych i frameworka NodeJS.</p> <p>Każda nowoczesna strona wykorzystuje JS, bo to on ma monopol na kod wykonywany po stronie przeglądarki. To sprawiło też, że zaczęły powstawać frameworki do zawierania HTMLa, CSSa i JavaScriptu jako aplikacje mobilne czy okienkowe np. <a href="https://cordova.apache.org/">Apache Cordova</a> czy <a href="https://electron.atom.io/">Electron</a>.</p> <p>Framework NodeJS sprawił, że JS może być wykorzystywany jako backend (strona serwerowa) serwisów. Zatem czemu istnieją jeszcze inne języki (pomijając inne sekcje, brak natywności)? Otóż cały ten świat JavaScriptu to jeden wielki eksperyment. Nie zdziwcie się jeśli coś nie będzie działać tak jak powinno --- problemy optymalizacji nie są rzadkością a nauka narzędzi do budowania aplikacji JSa to koszmar. Ahh tak, JS jest interpretowany przez przeglądarkę, ale i tak powszechnie używa się <em>kompilatorów</em> aby kod był <em>lepszy</em>.</p> <p>JavaScript wkracza tam gdzie wcześniej go nie było. Nawet ma swój framework IoT od <a href="http://www.iotjs.net/">Samsunga</a>. Jest to nowość i ciężko określić czy będzie to hit czy kit.</p> <h4>EOF</h4> <p>Oczywiście to 4 języki to tylko moje propozycje oparte o własne doświadczenia. Wartych sprawdzenia jest o wiele więcej języków m.in. <a href="https://golang.org/">Go</a>, <a href="https://www.ruby-lang.org/pl/">Ruby</a>, <a href="https://www.php.net/">php</a> czy nawet <a href="https://developer.apple.com/swift/">Swift</a>. Jeśli mój post nie pomógł wam i jest mi przykro z tego powodu to <a href="http://carlcheo.com/wp-content/uploads/2014/12/which-programming-language-should-i-learn-first-infographic.png">tutaj</a> macie link na ciekawą infografikę związaną z tym dylematem.</p> Sat, 06 May 2017 16:37:42 +0000http://pr0gramista.pl/post/jaki-jezyk-programowania/DevLog #8http://pr0gramista.pl/post/workdone-log-8/<p>Więcej stylowania. Tagowanie!</p> <h5>Nagradzanie --- ciąg dalszy</h5> <p>O nagradzaniu było już w poprzednim dev logu, ale wtedy mówiłem głównie o backendzie. W tym tygodniu pierwsze co zacząłem tworzyć tę stronę frontendu dla tego cuda. Sprytnie wykorzystałem JavaScriptowe operacje na tablicach. Na końcu dodałem kolejne testy i jest super!</p> <h5>Stylowanie</h5> <p>Chciałem poprawić kilka rzeczy związanych z stylowaniem. Jedną z nich było lepszy podział obszaru dla list etc. w wypadku większych ekranów. Wiedziałem, że Materialize nie miał takiej funkcji, ale byłem miło zaskoczony kiedy w changelogu znalazłem wzmiankę o takich klasach jak <code>xl</code>. Musiałem pobrać nową wersję, dorobić swoje zmiany do niej i skompilować. Niełatwo jest znaleźć zmiany w CSSach... Proces ten musiałem powtarzać kilka razy, ale ostatecznie doszedłem do końca i było warto, bo przy okazji poprawiłem kilka szczegółów. Choć czuję, że jeszcze kiedyś wymienię ten system siatki na coś co pozwala na lepsze uporządkowanie.</p> <h5>Tagowanie</h5> <video id="vid1" autoplay loop style="display: inline-block; margin-left: 30px; margin-bottom: 10px;"> <source src="https://i.gyazo.com/1503443119d4b47c8f010b9379de3600.mp4" type="video/mp4"> </video><p>Jednym ze sposobów organizacji notatek jest ich tagowanie. Jest proste i pozwala na więcej swobody niż tworzenie kategorii, czy osobnych folderów. Workdone ma przypominać o zadaniach a chowanie ich jest tego przeciwieństwem. Tagi powinny być na widoku, łatwe do użycia.</p> <video id="vid2" autoplay loop style="display: inline-block; margin-left: 30px; margin-bottom: 10px;"> <source src="https://i.gyazo.com/830288fb0a4ed57681781540bce83ee0.mp4" type="video/mp4"> </video><p>Wykorzystałem <a href="http://materializecss.com/chips.html">Chipsy</a> od Materialize. Na początku próbowałem też wykorzystać widget Materialize do dodawania tagów, ale ostatecznie uznałem, że prościej będzie to zrobić po prostu w Vue.js. Automatyczna aktualizacja, zapisywanie i brak dziwnego zewnętrznego kodu --- takie decyzje powinien podejmować szanujący się <em>architekt</em> oprogramowania.</p> <h5>EOF</h5> <p>3 dni do matury a ja rozmyślam nad miejscem <code>input</code>u do tagowania. Jestem mile zaskoczony, że już 2 miesiące siedzę nad jednym projektem. Pewnie nie dałbym rady bez mojego GitHubowego motywatora. <figure><img src="https://i.gyazo.com/b69b2c5e06736c5d84503a12a0ba9295.png" alt="" /><div>Niedziele są zawsze najbardziej produktywne</div></figure> A teraz ruszam do pisania skryptu do następnego filmu! Tym razem o wiele lepszego i bardziej treściwego.</p> <h6>Mały dodatek</h6> <p>Wiecie jak wygląda śniadanie w Googlu? Nasz rodak pokazuje nam ciekawe miejsca związane z Googlem.</p> <iframe width="560" height="400" src="https://www.youtube.com/embed/CniAKMcolFk" frameborder="0" allowfullscreen></iframe><script> function omg() { document.getElementById('vid1').play(); document.getElementById('vid2').play(); } setTimeout(omg, 500) </script>Sun, 30 Apr 2017 18:05:07 +0000http://pr0gramista.pl/post/workdone-log-8/Wirtualna rzeczywistośćhttp://pr0gramista.pl/post/vr/<p>Gdy pierwszy raz zobaczyłem zapowiedź urządzenia do wirtualnej rzeczywistości --- Oculusa, byłem zachwycony, ale z każdą nową informacją o tym projekcie mój entuzjazm malał. Dlaczego?</p> <p><figure><img src="https://ksr-ugc.imgix.net/assets/011/400/691/6f16b49b73b5df4e2ab3dcb747313f0e_original.jpg?w=1552&h=873&fit=fill&bg=FFFFFF&v=1463682143&auto=format&q=92&s=97306bda029fa8ef6f3bea874e06dfa9" alt="" /><div></div></figure></p> <h5>Kickstarter</h5> <p>Kickstarter i idea crowdfundingu nie jest pozbawiona wad, a jedną z nich jest różnica między tym co twórcy obiecują a tym co ostatecznie wydają na świat. Po prostu łatwiej jest przedstawić swój pomysł niż go zrealizować. Idea jest mniej warta niż realizacja. Kickstarter to wylęgarnia złych pomysłów, wykorzystująca naiwność ludzi do <em>niesamowitej</em> technologii. Później otrzymują swoje zabaweczki, choć to dobrze, że cokolwiek otrzymali, bo <a href="https://www.kickstarter.com/projects/1523379957/oculus-rift-step-into-the-game/comments">nawet teraz część osób nie otrzymała swoich nagród za wspieranie Oculusa</a>.</p> <h5>Wymagania sprzętowe</h5> <p>Wymagania minimalne:</p> <pre><code>CPU: Intel Core i5-4590 / AMD FX 8350 GPU: NVIDIA GTX 970 / AMD Radeon R9 290 ... </code></pre> <p>Rekomendowane:</p> <pre><code>CPU: Intel Core i5-4590 or AMD FX 8350 GPU: NVIDIA GTX 1060 / AMD Radeon RX 480 ... </code></pre> <p>Oculus nigdy nie mówił, że będzie tani --- to można zrozumieć, ale wymagania sprzętowe, które na tamten moment spełniało około 1% użytkowników Streama przekreśliło sukces tej technologii. Niedawno, bo w grudniu 2016 dowiedzieliśmy się, że tylko 0.38% użytkowników Steam ma headset VR a ankiety marcowej wynika, że Oculus to około 30% graczy a prawie cała reszta to HTC Vive. {{&lt; figure class="figure-80 figure-center" src="<a href="https://i.gyazo.com/1eceefb4be9b004b548b5ad60e549d1b.png">https://i.gyazo.com/1eceefb4be9b004b548b5ad60e549d1b.png</a>" &gt;}} Takie wymagania pozostawiają też bardzo mało miejsca dla samej gry, która powinna działać w 90 FPSach. To przekreśliło pewne aspekty gier, które wymagają dużej mocy obliczeniowej.</p> <h5>Nie koniecznie zdrowe?</h5> <p>Są ludzie, którzy mówili: monitory do lamusa. Mylili się. Headsety VR nie są zbyt wygodne. Grube okablowanie przeszkadza a jakość obrazu nie jest idealna. Największym jednak problemem okazała się reakcja organizmu na <a href="https://en.wikipedia.org/wiki/Virtual_reality_sickness"><em>doznania</em> VR</a>. Zawroty głowy i wymioty są dalekie od dobrej zabawy.</p> <h4>Po premierze</h4> <p>Dostaliśmy swoje zabawki i się nie rozczarowaliśmy? Tak jakby, bo dziś już nikt nie myśli o VR. Przez miesiąc była burza --- zalewanie YouTuba filmami o VR, jakie to super, jakie to nowe, ale też jakie wybrakowane. Sprzęt jest bezużyteczny jeśli nie możemy na nim czegoś sensownego odpalić.</p> <h5>Rynek gier</h5> <p>Rynek gier VR jest mały i słaby. Większość gier to tak naprawdę mini-gierki albo dema. Studia zaczęły po prostu bombardować ten rynek prostymi, niskiej jakości grami co przypomina sytuację z roku '83. To w tamtym okresie rynek gier przeżył swój kryzys, głównie ze względu na przesyt zarówno w ilości konsol jak i gier, które były żenującej jakości.</p> <p>Aby uniknąć nieprzyjemnych doznań poruszanie się często jest przedstawiane jako teleportacja. Mało jest gier gdzie doświadczymy obrotu gracza czy świata. Zwykle wszystko jest statyczne. Gry ze względu na ograniczenia mocy obliczeniowej muszą sięgać po bardziej artystyczne formy ukazywania świata, co czasem się udaje a czasem nie.</p> <h5>EOF</h5> <p>Jeszcze daleko nam do codziennego wykorzystywania VR. Monitory nie mają się czego bać. Wirtualna rzeczywistość to genialny sposób na pokazywanie bardzo wąskiej części multimediów. Wideo 360 stopni jest bardzo nieintuicyjne, widz zwykle nie wie na co ma się patrzeć. Rzadko kiedy potrzebujemy pokazać wszystko wokół nas --- zatem zdjęcia nie są też jakąś rewelacją. Wniosek na dziś: <strong>nie dajcie się ponieść zapowiedziom, recenzjom nowych technologii, media pragną waszego zachwytu</strong>.</p> Sat, 29 Apr 2017 19:50:21 +0000http://pr0gramista.pl/post/vr/DevLog #7http://pr0gramista.pl/post/workdone-log-7/<p>Uwielbiam programować w Javie!</p> <h5>Rozwiązywanie problemów</h5> <p>Często tak mam, że muszę przez jakiś czas trochę pomyśleć a później mogę lecieć bez zatrzymywania się. W taki właśnie sposób nazbierało mi się kilka problemów jakich muszę rozwiązać.</p> <p><figure><img src="/media/old/zdj-tablica-todo.jpg" alt="" /><div>Często używam ściany pokrytej farbą tablicową jako miejsce do zapisywania zadań.</div></figure></p> <h5>Task jako ElementCollection</h5> <p>Buga z zadaniami zauważyłem już kiedyś, ale wtedy zapomniałem dodać go jako <a href="https://github.com/PoprostuRonin/workdone/issues/2">GitHubowego issue</a>. Tak swoją drogą to niewiele osób używa rozwiązań GitHuba a szkoda, bo są nie najgorsze.</p> <p>Rozwiązanie problemu było trudniejsze niż myślałem i wymagało ode mnie podjęcia decyzji. Czy <code>Task</code> ma być encją czy zwykłą formą danych, takim POJO. Zadałem sobie pytanie czy zadanie może istnieć bez listy i stwierdziłem, że nie, zatem nie ma potrzeby posiadania takiej encji. Im mniej kodu tym lepiej.</p> <pre> <code class="java">@ElementCollection(targetClass = Task.class) private List<Task> tasks; </code></pre><p>Adnotacja <code>ElementCollection</code> sprawia, że encja może trzymać listę innych obiektów, choć w rzeczywistości jest to podzielone na dwie tablice podobnie jak w relacji <code>OneToMany</code>. Teraz zadania nie wymagają zapisu do swojego repozytorium, nie potrzebują też pola ID z którym właśnie był problem. Hurra!</p> <h5>Nagradzanie za zadania</h5> <p>Nagradzanie za nawyki już jest to pomyślałem, że zrobienie podobnego kodu dla zadań i ich list nie będzie trudne. Nie myliłem się. Kilka klas doszło, bo musiałem stworzyć <code>Service</code> dla takiej operacji, ale wszystko napisałem w ładnym stylu z odpowiednią dokumentacją i testami. Szybko i przyjemnie --- to właśnie tak mi się kojarzy kodzenie w Javie. <figure><img src="https://i.gyazo.com/d7e48d47361eb6eb4232ab246f8029b6.png" alt="" /><div>IntelliJ rozpoznaje słowo todo jako forme zaznaczania miejsc w kodzie.</div></figure></p> <h5>EOF i przyszłość</h5> <p>Tydzień spokojny i pełen relaksu przed maturą. Java jest o wiele bardziej przewidywalna niż JavaScript co oszczędza tak mnóstwo czasu mimo, że Spring przeładowuje się te 5 sekund. Może warto byłoby pomyśleć o przyszłości tego projektu. Wiem, że następna funkcjonalność jaką przyjdzie mi stworzyć to przypomnienia, powiadomienia o wykonaniu zadań i historię operacji. Powoli też myślę nad aplikacją Androida, ale najpierw muszę wykonać do końca frontend przeglądarkowy, bo w końcu on też ma działać na mobilkach.</p> Sun, 23 Apr 2017 20:42:10 +0000http://pr0gramista.pl/post/workdone-log-7/Arduino i majsterkowaniehttp://pr0gramista.pl/post/arduino/<p>Łatwo jest się nauczyć programować. Wiedza jest szeroko dostępna, koszty są niewielkie, indywidualną pomoc możemy uzyskać na wielu serwisach, ale jest jedna wada: wstępna niepraktyczność, bo przecież nasze pierwsze programy są niezbyt przydatne czy widowiskowe.</p> <p>Moją odpowiedzią na ten problem jest połączenie elektroniki z programowaniem, krok w stronę robotów czyli Arduino.</p> <h5>Arduino</h5> <p><a href="https://www.arduino.cc/">Arduino</a> to platforma open-source skupiająca się na łatwym połączeniu elektroniki z programowaniem. Arduino sprzedaje płytki z mikrokontrolerem, które programujemy za pomocą Arduino IDE, takie płytki mają wyprowadzenia wyjść/wejść cyfrowych i analogowych w postaci pojedynczych pinów.</p> <p><figure><img src="/media/old/zdj-arduino.jpg" alt="" /><div>Arduino o wdzięcznej nazwie Uno</div></figure></p> <h5>Płytki</h5> <p>Arduino ma w swojej ofercie masę płytek. Małe, duże, z różnymi portami, sposobami łączności (Bluetooth, Ethernet, WiFi) --- <a href="https://www.arduino.cc/en/Main/Products">wybór</a> jest wielki, ale to nie wszystko! Oprócz oficjalnych płytek na rynku znajdziemy masę klonów i produktów kompatybilnych z Arduino np. <a href="https://www.pjrc.com/teensy/">Teensy</a>.</p> <p><figure><img src="https://i.gyazo.com/b9485bfb0e3a6896b6ad3f7db4b914db.png" alt="" /><div>Teensy LC - niedawno co zamówiłem</div></figure></p> <h5>Czy to trudne?</h5> <p>Nie, kod, który piszemy dla Arduino zwykle nie jest zbyt zaawansowany. Sam język Arduino to C, ale uproszczone, bo <a href="https://www.arduino.cc/en/Reference/HomePage">cały (?) spis języka</a> zajmuje około dwóch stron A4. Wystarczy naprawdę niewiele czasu aby móc napisać coś fajnego w Arduino.</p> <p>Co do elektroniki --- w sieci znajdziemy mnóstwo poradników zarówno w formie tekstu jak i wideo. Na kanale <a href="https://www.youtube.com/user/ElektroPrzewodnik/featured">ElektroPrzewodnik</a> znajdziecie sporą ilość dobrych filmów na ten temat. Od siebie powiem, że w praktyce jest to łatwiejsze niż w teorii.</p> <h5>Zabawa</h5> <p>Tworzymy! Może to być stacja pogodowa, alarm, zegar czy coś trochę bardziej skomplikowanego --- lampka włączająca się na klaśnięcie. Naszym polskim serwisem z świetnymi projektami jest <a href="https://majsterkowo.pl/elektronika/arduino/">majsterkowo.pl</a> na którym znajdziecie też projekty z bogatszym Raspberry Pi czy tańszym modułem ESP8266.</p> <p>Kluczem jest tutaj rozwiązywanie prawdziwych problemów, a nie budowanie dla samego budowania jak to bywa w większości różnych gotowych zestawów. Nauka lutowania --- niesamowicie satysfakcjonująca rzecz. Radość płynie też z takich banalnych, ale potrzebnych rzeczy jak: liczenie oporów, sprawdzanie obwodów czy testowanie modułów.</p> <p>Gdybym tylko wiedział, że mogę stworzyć windę dla swoich postaci z Lego.</p> <h5>Inne zalety</h5> <p>Majsterkowanie jest czasem dla mnie ucieczką od zwykłego kodu. Lutowanie, klejenie i takie dziecinne programowanie jest dla mnie wspaniałą formą relaksu.</p> <p>Kolejną zaletą to fakt, że często oszczędzam na tym relaksie np. swoje słuchawki naprawiłem kilkanaście razy zanim kupiłem nowe.</p> <p><figure><img src="/media/old/naprawa-sluchawki.jpg" alt="" /><div>Moje stare Superluxy 668B</div></figure></p> <p>Znajomość elektroniki przydaje się też w zastosowaniu naukowym i <em>debugowaniu</em> swojego życia. Przykład? W sezonie zimowym zauważyłem, że powietrze w moim pokoju często było za suche. Zbudowałem prosty układ z czujnika DHT11, Arduino i buzzera. Prosty kod i miałem swój miernik jakości, który zaczynał pikać, gdy powinienem przewietrzyć pokój/ustawić wodę.</p> <h5>Pewnie kosztuje</h5> <p>Nie, zabawa w taką elektronikę nie kosztuje dużo. Taki <a href="https://botland.com.pl/zestawy-startowe-dla-arduino/3795-starterkit-elektro-przewodnik-z-modulem-arduino-leonardo-box.html">podstawowy zestaw startowy</a> wraz z Arduino Leonardo kosztuje 150 złotych. Jeśli chcemy zaoszczędzić to możemy próbować z chińskimi klonami czy nawet zbudować własne Arduino. Dużo elementów jesteśmy w stanie pozyskać z starych urządzeń a tych nie brakuje.</p> <h5>EOF</h5> <p>Zabawa w majsterkowanie wraz z Arduino to świetna zabawa i sposób na spędzenie wolnego czasu (nawet ze znajomymi*) gdy na dworze jest pochmurnie i zimno. Wejście w ten świat jest tak samo proste i względnie tanie jak wejście w świat programowania. Zachęcam was do wypróbowania takiej formy naukowej rozrywki.</p> <p>* --- naprawa procesora przez wtykanie drucików w Socket.</p> Sat, 22 Apr 2017 17:29:46 +0000http://pr0gramista.pl/post/arduino/DevLog #6http://pr0gramista.pl/post/workdone-log-6/<p>Frontend --- czyli jeden duży problem.</p> <h5>Look &amp; feel</h5> <p>Dobra aplikacja musi dobrze wyglądać i działać.</p> <p>Workdone z zeszłego tygodnia działał, ale miało się wrażenie, że interfejs jest strasznie zagmatwany. Tryb edycji? Pomysł rodem z Vima.</p> <p>Zrobiłem jak każda wielka korporacja --- spojrzałem na konkurencje, mianowicie na Google Keep. Zauważyłem, że większość pól edycji jest dostępna zaraz po najechaniu na notatkę. Reszta po kliknięciu w nią.</p> <p>Ja poszedłem o krok dalej. Moje notatki można edytować w miejscu. Po prostu wszystkie pola są <code>input</code>ami. Wykorzystałem też motyw ukrywania przycisków i pokazywania ich dopiero na najechaniu.</p> <p><figure><img src="/media/old/devlog6-ss1.png" alt="" /><div>Przy najechaniu każdy element listy ma swój przycisk do usuwania a na dole znajduje się pole do wpisywania nowych elementów i edycji samej karty.</div></figure></p> <h5>Vue.js i Single File Component</h5> <p>Jak wspomniałem w poście <a href="/post/oh-web-development">Oh web development</a> próba użycia <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a> się nie udała. Szkoda, bo zalet ich użycia jest wiele, ale konieczność budowania projektu (który na dodatek musi być pod Springiem aby OAuth działał) jest strasznie niewygodna a same komponenty w nowej formie są po prostu nie intuicyjne. Wolę jednak prosty, zacofany plain-JS. Git-revert i jedyne co zrobiłem to rozdzieliłem komponenty na osobne pliki.</p> <h5>Pomysł na komponenty</h5> <p>Myślałeś, że poddałbym się tak łatwo? Moim głównym celem użycia komponentów w plikach <code>.vue</code> jest fakt, że szablony są łatwe do edycji i CSS jest w ograniczonym zakresie.</p> <p><figure><img src="/media/old/devlog6-ss2.png" alt="" /><div>Widok HTML</div></figure> <figure><img src="/media/old/devlog6-ss3.png" alt="" /><div>Widok JavaScript</div></figure></p> <p>Zamiast komplikować proces budowania, wystarczy zrobić sobie skrót klawiszowy do swojego edytora. Pierwsza rzecz załatwiona, yay!</p> <h5>SASS</h5> <p>W rzeczywistości w mojej aplikacji nie ma problemu z nachodzącymi się arkuszami stylów. Po prostu chce mieć większy porządek w swoich stylach. Rozwiązanie jest proste: użyć mądrzejszego CSSa.</p> <p>SASS (Syntactically Awesome StyleSheet) pozwala na taką składnie:</p> <pre><code>#main { color: black; a { font-weight: bold; &amp;:hover { color: red; } } } </code></pre> <p>I to chciałem mieć! Teraz będę mógł użyć nazwy komponentu jako swoistego zakresu.</p> <pre><code>.task { color: #FF0000; &amp;.card { margin-bottom: 0; } &amp;-list { margin: 5px 0; } } </code></pre> <p>SASS potrafi obserwować zmiany i wyrzucać nowy plik na bieżąco, czego mieszanka Vue i webpacka nie potrafiła. Spring przeładowuje plik i wszystko gra.</p> <p><strong>Tak oto żyję w swojej bańce prostoty, powściągliwości web developmentu.</strong></p> Sun, 16 Apr 2017 18:11:16 +0000http://pr0gramista.pl/post/workdone-log-6/Oh web developmenthttp://pr0gramista.pl/post/oh-web-development/<p>Od zawsze uważałem, że aktualny stan web developmentu jest zły. Połączenie HTML, CSS i JavaScriptu jest złe. To orkiestra złożona z Skrillexa, Metallicy i Jana Sebastiana Bacha.</p> <p>Ostatnio spróbowałem użyć <a href="https://vuejs.org/v2/guide/single-file-components.html">Single File Components</a> w Vue.js. Niestety wiąże się to z dodaniem etapu budowania aplikacji i narzędziami, które według mnie są okrutne. Oczywiście wszystko na końcu się popsuło i nawet wtyczka Vue nie potrafiła ogarnąć się w swoim własnych bałaganie. Zatem w tym poście postaram się przedstawić błędy JavaScriptu i reszty technologii wokół stron internetowych. My Polacy umiemy narzekać.</p> <h5>O najnowszym JS</h5> <p>Sam najnowszy JavaScript jako język jest śliczny. Weźmy sobie na przykład <a href="https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array#Metody">metody tablic</a>. Metoda some() jest naprawdę prosta w swoim działaniu, ale jest przez to super. Taka komenda Linuxa, tylko że bez jakiś niewiadomych parametrów.</p> <p>Miałem tutaj napisać listę fajnych rzeczy w JS, ale jest ich po prostu za dużo.</p> <h5>Kompatybilność</h5> <p>A raczej jej brak.</p> <p>Czasem nawet kiedy mówią, że jest to jej nie ma. Dla przykładu Google z swoim Polymerem. <code>When released, Polymer 2.0 should support the same set of browsers as Polymer 1.x—IE 11, Edge, Safari (9+), Chrome, Opera and Firefox.</code> Dziwne, że apka, którą napisałem sobie (oczywiście na Chromie) okazała się zupełnie nieużywalny dla Edge i wyglądała nie tak powinna na Firefoxie.</p> <h5>Narzędzia</h5> <p>Większość projektów Javy korzysta z Mavena albo z Gradle, który korzysta z repozytoriów Mavena, więc w sumie nie ma różnicy.</p> <p>Projekty JavaScriptu nie znają granic. Tak tylko rzucę: <a href="https://babeljs.io/">Babel</a>, <a href="http://gulpjs.com/">Gulp</a>, <a href="https://gruntjs.com/">Grunt</a>, <a href="http://browserify.org/">Browserify</a>, <a href="https://webpack.github.io/">webpack</a>, <a href="https://www.npmjs.com/">npm</a>, <a href="https://bower.io/">bower</a>, <a href="http://requirejs.org/">requirejs</a> no i nie zapominajmy, że każdy <em>szanujący</em> się framework powinnien mieć swoje CLI: <a href="https://www.polymer-project.org/1.0/docs/tools/polymer-cli">Polymer</a>, <a href="https://ember-cli.com/">Ember</a>, <a href="https://github.com/vuejs/vue-cli">Vue</a>, <a href="https://github.com/angular/angular-cli">Angular</a>... ale nie zapominajmy o lintach, uglify, <a href="http://sass-lang.com/">SASS</a> i wielu innych.</p> <p>Ilość i jakość tych narzędzi to problem, szczególnie, że nie są one zazwyczaj proste w konfiguracji. Spring Boot jest łatwiejszy, co chcesz używać to dodajesz jako zależność w Gradle i już możesz tego używać. Jakim cudem Java robi to lepiej?</p> <p><img src="https://github.com/shama/dontkry.com/blob/master/app/images/comics/roommates.png?raw=true" alt="Śmieszny obrazek 1"></p> <h5>Próg wejścia</h5> <p>Każda technologia ma próg wejścia, czyli punkt w którym umiemy już z niej korzystać. Ten nowoczesny web development ma ten próg zawieszony bardzo wysoko. Ilość narzędzi, standardów, problemów z kompatybilnością i koncepcji --- jest źle.</p> <h5>Ciążąca przeszłość</h5> <p>Nawet głupi HTML jest dziwny. Raz używamy <code>href</code> raz <code>src</code>. CSS mimo swojego wieku dalej nie ma jakiejś hierarchii, powiadomień o błędach a jego działanie jest często nie do przewidzenia.</p> <p>Chyba każdy się złapał na animacjach przy zmianie pola <code>display</code> z <code>none</code>. Dlaczego?</p> <p>Jeśli wszyscy korzystamy z SASSa to czemu go nie dodamy do przeglądarek?</p> <h5>Monopol</h5> <p>JavaScript ma monopol jeśli chodzi o frontend i chyba nie muszę nikogo przekonywać, że nie jest to korzystne dla kogokolwiek.</p> <h5>Jestem odkrywczy?</h5> <p>No nie. Już <a href="https://www.reddit.com/r/programming/comments/arrva/does_anyone_actually_like_web_development/c0j2jxu/">7 lat temu</a> wszyscy wiedzieli, że frontend jest zły ze względu na swoją koncepcje.</p> <p>Nie jestem sam! Oto moi współplemienncy: <a href="https://www.google.pl/webhp?sourceid=chrome-instant&amp;ion=1&amp;espv=2&amp;ie=UTF-8#q=web+development+is+a+mess">to tylko wyniki wyszukania</a>.</p> <h4>EOF</h4> <p>Jesteśmy skazani na to cierpienie. Pomoc szybko nie nadejdzie, choć nadzieja nie jest jeszcze martwa. Ciągle powstają projekty, które mają zastąpić JavaScript kompilując się do niego: Dart, TypeScript, Go przez <a href="https://github.com/gopherjs/gopherjs">GopherJS</a>, <a href="http://spiderlang.org/">Spider</a>.</p> <p>Niektórzy lubią ten świat, ale ja bym powiedział, że jest to po prostu syndrom sztokholmski. Ludzie tak się do tego przyzwyczaili, że już nie zauważają błędów.</p> Sat, 15 Apr 2017 16:10:30 +0000http://pr0gramista.pl/post/oh-web-development/DevLog #5http://pr0gramista.pl/post/workdone-log-5/<p>Ten tydzień był ciekawy. Spring miał buga, rozwiązałem pierwszy <em>issue</em> Workdone na GitHubie, wykonałem raport Code Coverage i napisałem kolejny element frontendu.</p> <h5>JavaScriptu więcej niż Javy</h5> <p>Workdone miał być projektem w języku Java, ale według GitHuba to ponad 70% kodu to JavaScript. <img src="https://i.gyazo.com/3b173037e63e6d3f18f2b3d87135f28b.png" alt="GitHubowy rozkład projektu na języki"> Nawet licząc to, że część HTMLa jest jako String w JavaScriptcie to i tak jestem zdziwiony tą dysproporcją. Vue.js spodobał mi się, więc nie powiem, że jest źle, ale widząc to ile jeszcze mam pracy przy frontendzie to prognozuje, że JS będzie stanowił 90% mojego projektu. Coś niespotykanego...</p> <h5>Spring, ty...</h5> <p>Północ, pełen energii siadam do nocnego kodzenia. Dźwięk klawiszy roznosi się po pokoju. Już tylko odpale testy i robię commita a tutaj w konsoli Gradle pojawia się coś czerwonego.</p> <p>Zawał, bół, smutek, cierpienie.</p> <p>Oto przyczyna:</p> <pre><code>FAILURE: Build failed with an exception. * Where: Build file '/home/travis/build/PoprostuRonin/workdone/build.gradle' line: 17 * What went wrong: A problem occurred evaluating root project 'workdone'. &gt; org.gradle.api.invocation.Gradle.buildFinished(Lorg/gradle/api/Action;)V </code></pre> <p>Czyli w sumie to kij wie co. No to zaczynamy szukać przyczyny...</p> <h6>Spring Initializr</h6> <p>Najpierw trzeba było sprawdzić czy problem dotyczy mojego projektu czy jest to problem związany z moją maszyną lub ewentualnie z jakimś pluginem, może nawet IDE.</p> <p>Niestety, odpalenie świeżego projektu daje podobny efekt.</p> <h6>Travis CI</h6> <p>Jak pisałem w poście o <a href="/post/continuous-integration/">continuous integration</a> wspomniałem o jednej z zalet CI, czyli odporność na różnorodność sprzętu. Skorzystałem z tej zalety i ręcznie kazałem Travisowi jeszcze raz zbudować wersję, która wcześniej się zbudowała i efekt był ciekawy --- dokładnie ten sam błąd.</p> <h6><code>build.gradle</code></h6> <p>Postanowiłem pobawić się tym plikiem. Trochę usunąłem, gdzieś tam dodałem dokładną wersję, zaktualizowałem Gradle. Nic nie rozwiązało problemu, ale dało mi głównego podejrzanego: plugin Springa dla Gradle.</p> <h6>Analiza pluginu</h6> <p><a href="https://github.com/spring-gradle-plugins/dependency-management-plugin">Repozytorium pluginu</a> sprawiło, że wszystko było już dla mnie jasne. Sam plik README pokazał mi o innym sposobie użycia pluginu</p> <pre><code>plugins { id "io.spring.dependency-management" version "1.0.1.RELEASE" } </code></pre> <p>Zrobiłem tak i wszystko zaczęło działać!</p> <h6>Spring Initializr ma błąd?</h6> <p>Tak, wygenerował mi projekt z złym <code>build.gradle</code>. Chciałem nawet naprawić ten błąd, ale zauważyłem, że już ktoś dopisał kod aby pod wersją Spring Boota <code>2.0.0-SNAPSHOT</code> pojawiało się dobre użycie pluginu. Najwidoczniej problem był z czymś innym, może po prostu na produkcji była stara wersja czy co. {{&lt; tweet 849593672266133504 &gt;}}</p> <h5>Code coverage</h5> <p>Pomyślałem sobie, że wykonam sobie raport pokrycia kodu. Szukam opcji w IntelliJ i jestem lekko zdziwiony, bo ta opcja nie obsługuje Gradle? Ok. Proste zapytanie do Google i odkryłem, że istnieje taka biblioteka jak <a href="http://www.eclemma.org/jacoco/">JaCoCo</a> i jest do niej plugin dla Gradle.</p> <p>Wygenerowałem raport i na pierwszy rzut oka byłem zawiedziony.</p> <p><img src="https://i.gyazo.com/e08c828841b8591c334ae0c72fca8a60.png" alt="Główna strona raportu"></p> <p>Tylko 70%? To trochę mało... ale znalazłem przyczynę tego stanu.</p> <p><img src="https://i.gyazo.com/dd5261e5896487c64384f7050668b546.png" alt="Strona raportu klasy Todo"></p> <p>Testowanie generowanych metod jest raczej zbędne, więc w rzeczywistości to code coverage wynosi znacznie więcej niż 70%, nice :)</p> <h5>Frontend</h5> <p>Dodałem frontend dla list zadań. Nic wielkiego, gdy się umie korzystać z Vue. Byłem bardzo zadowolony z tego jak szybko udało mi się to zrobić. Plus w końcu naprawiłem <a href="https://github.com/PoprostuRonin/workdone/issues/1">problem</a> z przeładowywaniem się komponentów.</p> <p>To był dobry tydzień!</p> Sun, 09 Apr 2017 19:56:39 +0000http://pr0gramista.pl/post/workdone-log-5/Typowanie [WIDEO]http://pr0gramista.pl/post/typowanie-video/<p>Jak wspominałem w poście <a href="/post/workdone-log-4">DevLog #4</a> zaczynam tworzyć filmy zamiast streamować i oto pierwszy efekt!</p> <p>Pierwszy film miał być o tym jaki język programowania wybrać na początku, ale uznałem, że lepiej najpierw wyjaśnić czym jest typowanie i podlinkować film niż podawać takie suche informacje.</p> <p>Wiem, że nie jest idealny, ale od czegoś trzeba zacząć a tworzenie filmów odwlekałem już od bardzo długiego czasu.</p> <iframe width="560" height="400" src="https://www.youtube.com/embed/9PiYk8Mr-W4?rel=0" frameborder="0" allowfullscreen></iframe>Sun, 09 Apr 2017 18:02:14 +0000http://pr0gramista.pl/post/typowanie-video/Top 5 programówhttp://pr0gramista.pl/post/top-programow/<p>Oto moja osobista lista 5 programów, które naprawdę cenię. Wszystkie są całkowicie darmowe i działają na aktualnym sprzęcie. Pomijam aplikacje Androida i gry. Lista będzie aktualizowania, stąd też brak cyferki w adresie posta.</p> <h5><img src="https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300" width="64px" height="64px"/> Google Chrome</h5> <p>Nie pamiętam czego używałem przed Chrome. Chrome zawsze był mi bliski pod względem designu, funkcjonalności, tego jak przeglądarka powinna wyglądać. Omnibar (czyli zespolenie pola na adres strony i wyszukiwarki) to dla mnie naturalna rzecz. Nie potrafię powiedzieć czemu ktoś by chciał używać wyszukiwarki i pola adresu osobno, tak jak jest w Firefoxie.</p> <p><figure><img src="https://i.gyazo.com/ec94819e773d3b1e71996b85e7e84a37.png" alt="" /><div>Niezrozumiały podział dwóch kluczowych funkcjonalności i design wzorowany na Chrome. Dla mnie Firefox był zawsze w tyle.</div></figure></p> <p>Instalacja rozszerzeń jest prosta a ich wybór i ilość tych rzeczywiście przydatnych --- wspaniały. Rozszerzenia mogą też funkcjonować jako osobne okienka, tak robi np. <a href="https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?utm_source=chrome-app-launcher-info-dialog">Postman</a>. Kolejną ważną dla mnie rzeczą jest to, że Chrome jest niezawodny. Jeśli się zawiesi (a robi to niezwykle rzadko) to przywrócenie kart to kwestia jednego kliknięcia. Nigdy nie miałem problemu z obsługą jakiejś technologii. Narzędzia deweloperskie są świetne a na przykład taki plugin <a href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd">Vue.js devTools</a> potrafi je dodatkowo zbogacić.</p> <p>Po prostu król.</p> <h5><img src="http://sevenzip.sourceforge.net/logos/7z_rm01.jpg" width="107px" height="64px"/> 7zip</h5> <p>Kiedyś wszyscy używali poczciwego WinRARa, wokół którego krąży legenda o licencji. Pewnego dnia znalazłem w sieci 7zipa, pobrałem, odpaliłem i już nigdy WinRARa na swoim komputerze nie widziałem. Prosty, pozbawiony niepotrzebnych <em>funkcjonalności</em> i niezawodny. Plusem jest sprawdzanie zgodności i dodatkowa pozycja w eksplorerze. Czego tu więcej chcieć?</p> <h5><img src="http://icons.iconarchive.com/icons/ncrow/mega-pack-2/256/IrfanView-icon.png" width="64px" height="64px"/> IrfanView</h5> <p>IrfanView to ... przeglądarka zdjęć i jeszcze więcej. Masa ustawień, obsługiwanych formatów, pluginów (np. OCR) i rzeczywiście przydatnych funkcjonalności takich jak skalowanie, wycinanie, malowanie jak w paintcie i moja ulubiona --- przetwarzanie wielu plików naraz.</p> <p>To co kiedyś wymagało ode mnie włączenia GIMPA (a kto kiedyś używał to wie, że może to potrwać chwilę) i w przypadku wielu plików musiałem każdy plik ręcznie edytować. Teraz, kilka kliknięć i gotowe. Bez tracenia flow.</p> <video id="vid" autoplay loop style="width: 80%;"> <source src="https://i.gyazo.com/2c8770f26436f687468e745813b57e87.mp4" type="video/mp4"> </video><p><em>Szybka prezentacja</em></p> <h5><img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Notepad_plus_plus.png" width="64px" height="64px"/> Notepad++</h5> <p>Notepad to mój edytor na szybko. Żaden Atom, Visual Code nie był w stanie dorównać szybkością uruchamiania Notepadowi++. Tylko <code>vim</code> jest na tyle szybki aby mu dorównać, ale porównanie tych dwóch edytorów to jak porównanie touchpada i myszki.</p> <p>Notepad++ może służyć jako główne narzędzia do programowania. Obsługuje wiele składni, formatów i daje się go świetnie spersonalizować. Ja jednak wolę Atoma do programowania, głównie we względu na pluginy i przystępniejszy wygląd.</p> <p><figure><img src="https://i.gyazo.com/416f101db6f61c2ef6cf23e51799a265.png" alt="" /><div>U mnie Notepad++ zawsze trzyma jakieś pliki</div></figure></p> <h5><img src="https://upload.wikimedia.org/wikipedia/commons/1/19/KeePass_icon.png" width="64px" height="64px"/> KeePass 2</h5> <p>Jeśli dbasz o bezpieczeństwo a nie masz pamięci do haseł to wykorzystaj KeePassa. Sprawdzony menadżer haseł. Format plików KeePassa obsługuje wiele aplikacji mobilnych. Pozwala na porządną organizacje haseł. Logowanie nawet po kilku miesiącach nie będzie sprawiać problemu (co u mnie się często zdarza). Przed chwilą sprawdziłem i okazuje się, że mam ponad 50 różnych wpisów.</p> <p>Zawsze się śmieje ze znajomego co hasło trzyma na pulpicie w pliku <code>hasła.txt</code>, choć sam kiedyś trzymałem hasła na kartce, dopóki jej nie zgubiłem.</p> <script> function omg() { document.getElementById('vid').play(); } setTimeout(omg, 500) </script><h6>EOF</h6> <p>Pamiętajcie, to jest tylko śmietanka z programów, których używam. Na codzień korzystam z znacznie większej ilości różnego softu np. Atom czy GIMP ale czuję, że te programy nie są jedynymi słusznymi opcjami w swoich sekcjach. Dla przykładu: GIMP nie potrafi poradzić sobie z zdjęciami w RAWie a Atom ma problem polskich znaków... to nie jest cecha topowego softu.</p> Sun, 02 Apr 2017 20:31:47 +0000http://pr0gramista.pl/post/top-programow/DevLog #4http://pr0gramista.pl/post/workdone-log-4/<p>Piąty tydzień. Plan zrealizowany, ale uprzedzam to nie będzie najciekawszy post. Ten tydzień to liczne małe kroki w dobrym kierunku.</p> <h5>Po refactoringu</h5> <p>Życie po refactoringu jest piękne.</p> <p>Teraz wszystko logicznie pasuje do siebie. Wykonanie jest wykonaniem, generowanie odbywa się w generatorze. Teraz tylko jechać dalej i budować!</p> <p><figure><img src="http://tclhost.com/PSIPVji.gif" alt="" /><div>thecodinglove jest świetnym źródłem gifów :)</div></figure></p> <h5>Streamowanie</h5> <p>Miały być streamy i próbowałem, ale znów problemy natury technicznej mnie próbują w tym powstrzymać. Prawdopodobnie problemem jest obciążenie mojej słabiutkiej maszyny. W końcu 2 rdzenie to nie kosmos, ale powiedziałem sobie: nie poddam się.</p> <p>Zacznę po prostu nagrywać filmy. Są one nieco mniej wymagające sprzętowo, ale wymagają większego przygotowania się, bo nie wystarczy rozmawiać i pokazywać co się aktualnie robi, czas uwagi widza jest mocno ograniczony i godzinne tutoriale nie są tyle warte.</p> <h5>Nawyki są prawie funkcjonalne</h5> <p>Frontend dalej wygląda jak na budowie, przydałby się magik od CSS. Za to w kwestii funkcjonalności jest znacznie lepiej. Można tworzyć, edytować (choć nie do końca) i otrzymywać punkty za wykonywanie nawyków. <figure><img src="https://i.gyazo.com/423d3e372c5b588ea492d799d49bf9ac.png" alt="" /><div>Materialize ma piękne powiadomienia</div></figure> Obecna jest też sekcja profilu. Wymagało to stworzenia punktu użytkownika, małej zabawy z wartościami od OAuth i co ciekawe --- pierwszej rzeczywistej styczności z race condition. Rozwiązałem też problem z ustawieniem bocznego panelu pod <code>div</code>em, aby Vue.js mógł się do niego odnieść. <figure><img src="https://i.gyazo.com/15dac97d6a2ed04387ba90d52d6072dd.png" alt="" /><div>Spokojnie, te ikonki tu nie zostaną!</div></figure></p> <h5>Chyba nadszedł czas na Spocka</h5> <p><em>FixedBaseCoinGeneratorTests</em></p> <p><pre> <code class="java">@Test public void amountsAreGood() throws Exception { assertEquals(1500, coinGenerator.generate(CoinAmount.HIGH)); assertEquals(1000, coinGenerator.generate(CoinAmount.MEDIUM)); assertEquals(500, coinGenerator.generate(CoinAmount.SMALL)); } </code></pre> Więcej...</p> <p><em>MillionLevelGeneratorTests</em></p> <pre><code>@Test public void experienceAmountsAreGood() throws Exception { assertThat(levelGenerator.generate(100), is(1000000)); assertThat(levelGenerator.generate(1), is(100)); assertThat(levelGenerator.generate(27), is(72900)); assertThat(levelGenerator.generate(84), is(705600)); assertThat(levelGenerator.generate(58), is(336400)); } @Test public void levelsAreGood() throws Exception { assertThat(levelGenerator.getLevel(110), is(1)); assertThat(levelGenerator.getLevel(800000), is(89)); assertThat(levelGenerator.getLevel(476100), is(69)); assertThat(levelGenerator.getLevel(220950), is(47)); assertThat(levelGenerator.getLevel(3600), is(6)); assertThat(levelGenerator.getLevel(67599), is(25)); } </code></pre> <p>Tabelki by się przydały.</p> <p>Mogę też powiedzieć, że w ciągu ostatnich dwóch tygodni udało mi się dojść do nawyku robienia testów. JUnit, Mockito, Hamcrest, integracyjne żaden problem!</p> Sun, 02 Apr 2017 20:11:19 +0000http://pr0gramista.pl/post/workdone-log-4/Google Code-Inhttp://pr0gramista.pl/post/google-code-in/<p>Google Code-In to coroczny międzynarodowy konkurs dla osób w wieku 13-17 lat mający za zadanie zachęcić do programowania i świata open-source. Uczniowie wybierają sobie zadania, które są tworzone przez <a href="https://codein.withgoogle.com/organizations/">współpracujące organizacje</a>, realizują je i poddają ocenie. Na końcu organizacje wybierają swoich finalistów i zwycięzców, którzy otrzymają główną nagrodę --- wycieczkę do kampusu Google.</p> <h3>Moja historia</h3> <h5>2014</h5> <p>Moją pierwszą stycznością z GCI była edycja z 2014 roku. Zarejestrowałem się, zrobiłem jedno zadanie i odpuściłem sobie. Z tego co pamiętam to przytłoczyła mnie (pozorna, jak się później okazało) trudność tych zadań a na dodatek brak pewności siebie i jakiegoś wsparcia.</p> <p><figure><img src="/media/old/gci2014.jpg" alt="" /><div>Oto co otrzymałem po Google Code-In 2014, dalej nie wiem gdzie mam sobie to nakleić</div></figure></p> <h5>2015</h5> <h6>Postanowienie</h6> <p>Rok 2015 był dla mnie rokiem rozwojowym jeśli chodzi o programowanie i postanowiłem w edycji 2015 naprawdę się postarać, szczególnie, że była to moja ostatnia szanse na wzięcie udziału. Wybrałem sobie organizacje FOSSASIA, głównie ze względu na różnorodność zadań. Zadań zrobiłem dużo, bo aż 41 i gdyby spojrzeć na listę uczestników i ilość zadań wykonanych to byłbym na 8 miejscu, wszystko to bez pomocy, przy starcie opóźnionym o 10 dni, głównie ze względu na szkołę...</p> <h6>Zadania</h6> <p>Były one różnorodne.</p> <p>Często celem było napisanie statycznej strony z jakimś skryptem w JS np. <a href="https://codein.withgoogle.com/archive/2015/task/5226804742717440/">Game: Hangman Game in Javascript</a> --- <a href="https://pr0gramista.pl/HangmanGame">GitHub</a>). Ciekawsze były te gdzie trzeba było zrobić aplikacje np. w Javie <a href="https://codein.withgoogle.com/archive/2015/task/5655424225247232/">Game/FOSSASIA quiz: Create a multi-choice quiz/game in JAVA with UI</a> --- <a href="https://github.com/PoprostuRonin/FOSSQuiz">GitHub</a> czy apka Androidowa <a href="https://codein.withgoogle.com/archive/2015/task/6264450050949120/">Android: Capture and store an Image in an android app</a> --- <a href="https://github.com/PoprostuRonin/CameraApp">GitHub</a>. GCI również poznało mnie z Pythonem (z frameworkiem Kivy) i językiem Go. Takim unikatowym doświadczeniem były zadania przy <a href="http://loklak.org/">loklak'u</a> gdzie zajmowałem się stawianiem instancji na różnych serwisach, również przy wykorzystaniu Dockera i tworzeniem poradników.</p> <p>Tylko jedno zadanie porzuciłem a dotyczyło ono aplikacji na Androida. Moim celem było napisanie testów UI. Ich napisanie było całkiem łatwe, ale Travis CI nie dawał rady ich przeprowadzić (?), chyba uznawał, że aplikacja się zacięła i przerywał testy. Pewnie wystarczyłaby jedna linijka w konfiguracji i byłoby po problemie, ale CI było wtedy dla mnie jeszcze nie znane. Szkoda, że nikt mi wtedy nie pomógł.</p> <p><iframe src="/media/old/gci.html" height="500"></iframe> <em>Mail podsumowujący mój udział</em></p> <h6>Wygrana?</h6> <p>Nie zostałem nawet finalistą, choć pod względem ilości powinienem, ale pamiętajmy, że ilość nie jest czynnikiem decydującym. Zapewne gdyby finalistów miało być sześciu to ja byłbym tym szóstym. Byłem trochę zawiedziony wynikami. W końcu przez ponad miesiąc kodziłem w zastraszającym tempie i to co mnie często powstrzymywało to różnica pomiędzy wysłaniem rozwiązania a jego sprawdzeniem. Zgaduje, że trwało to u mnie dłużej niż u innych, głównie ze względu na różnice czasu, choć czekanie przez 2 dni było trochę deprymujące. Nierzadko zdarzała się sytuacja, gdzie robiłem zadania na zapas i czasem one zdążyły zniknąć zanim je wysłałem.</p> <h6>Co zyskałem?</h6> <p>Mase wiedzy i obeznania w technologii. Przyzwyczaiłem się do korzystania z gita, pisania po angielsku i szukania informacji, czyli pracy z dokumentacją (czasem języka, czasem serwisu takiego jak IBM Bluemix) i kochanym Stack Overflow. Ten konkurs to była też okazja do wyjścia z jaskini i sprawdzenie swoich umiejętności.</p> <p>No i nagrody rzeczowe:</p> <p><figure><img src="/media/old/gci2015.jpg" alt="" /><div>Nagroda z edycji 2015. Koszulka z dobrego materiału, więc często używana, ale też i sprana. Na ten zestaw wystarczyło zrobić 3 zadania.</div></figure></p> <h5>EOF</h5> <p>Jeśli macie mniej niż 18 lat to spróbujcie swoich sił w Google Code-In, bo naprawdę warto. Moja rada: wybierzcie organizacje z którą współpracuje mniej ludzi. FOSSASIA to gigant jeśli chodzi o GCI i można się na tym przejechać. Pamiętajcie aby pytać, jeśli czegoś nie wiecie, ja osobiście chętnie pomogę wam.</p> <p>Kiedyś napisałem skrypt (o ironio w Pythonie) aby policzyć ilość zadań jaką wykonali poszczególni uczestnicy. Strona z tabelą dostępna tutaj: <a href="http://poprosturonin.com/gci/">Google Code-In 2015 Unofficial leaderboard</a>.</p> Sun, 26 Mar 2017 19:55:08 +0000http://pr0gramista.pl/post/google-code-in/DevLog #3http://pr0gramista.pl/post/workdone-log-3/<p>Minął już czwarty tydzień pracy nad Workdone.</p> <h5>Stop. Coś jest nie tak</h5> <p>Gdy na początku tygodnia po krótkiej przerwie powróciłem do projektu poczułem, że coś jest nie tak. Wydało mi się, że projekt jest trudny do ruszenia. Przejrzałem projekt i zauważyłem dwa problemy.</p> <p>Pierwszy to moje encje, które stworzyłem stanowczo za mało myśląc o rzeczywistej implementacji np. pole <code>expReward</code> w <code>Habit</code> było typu <code>float</code> ale to by oznaczało, że użytkownik może sobie ustalać ile dokładnie będzie otrzymywał doświadczenia co absolutnie nie ma sensu w kontekście zdobywania poziomów. Lepszym rozwiązaniem było użyć typów wyliczeniowych (enum) i później w backendzie zrobić odpowiednie przeliczniki. Użytkownik dalej może wybrać jak bardzo chce być nagrodzony, ale teraz łatwiej będzie mu to ustalić, bo liczby nic nie mówią, słowa, ikony tak.</p> <p>Drugi problem to niezrozumienie przykładowej budowy aplikacji w Vue.js. Próbowałem zrobić coś przeciwko frameworkowi, co oczywiście rzadko kiedy wychodzi na dobre.</p> <h5>Refactoring</h5> <p>Zanim przystąpiłem do naprawy, zrobiłem sobie krótką specyfikację encji w mojej aplikacji. Prosty plik .txt, wymienione pola i typy tych pól z różnymi opisami. Przydatne aby nie stracić tej wizji.</p> <p>Wprowadzenie walidacji przez dodatkowy <code>Validator</code>, wprowadzenie enumów, zmiany w strukturze encji, kolorki! Wszystko to w <a href="https://github.com/PoprostuRonin/workdone/commit/12619d998b2a2471f8facdb1a392243437f56857">commitcie 12619d</a>.</p> <h5>Vue.js</h5> <p>Jak już wspomniałem na początku miałem spore problemy z strukturą w Vue.js, ale <a href="https://vuejs.org/v2/examples/todomvc.html">ten przykład TodoMVC</a> mnie oświecił. Pokazał mi jak wykorzystując wszystkie zdolności frameworka można łatwo uporządkować działanie apki.</p> <p><a href="https://github.com/PoprostuRonin/workdone/commit/965008d726d757afbed7fff4d4413cbc245b9d14">Commit 965008d</a> to początek mojej małej rewolucji JavaScriptowej. Po pierwsze, przeniosłem kod do osobnego pliku. Po drugie, usunąłem naprawdę brzydkie funkcje. Po trzecie, zepsułem <a href="https://github.com/PoprostuRonin/workdone/blob/965008d726d757afbed7fff4d4413cbc245b9d14/src/main/resources/templates/test-login.html">szablony thymeleaf</a>. Serio? <code>&lt;text&gt;</code> w <code>&lt;head&gt;</code>, opcje automatycznego refactoringu jak zawsze pomocne :)</p> <h5>Stream</h5> <p>Na końcu wisienka na torcie.</p> <p>Zacząłem streamować to jak koduje i prawdopodobnie w tym miejscu byłaby ramka YouTube gdyby nie to, że pierwsza próba streamowania nie wychodzi najlepiej.</p> <p><blockquote class="twitter-tweet" data-lang="pl"><p lang="pl" dir="ltr">Po pierwszej próbie streamowania. W roli statywu: Harry Potter i Zrozumieć programowanie <a href="https://twitter.com/gynvael">@gynvael</a> <a href="https://t.co/R6FlDt1xWs">pic.twitter.com/R6FlDt1xWs</a></p>&mdash; Bartosz Wiśniewski (@pr0gramista) <a href="https://twitter.com/pr0gramista/status/845391862894596096">24 marca 2017</a></blockquote></p> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><p>Od streamowania uciekałem bardzo długi czas, ale miałem też logiczne powody do tego.</p> <ul> <li>Kiedyś miałem drugi monitor, który jest prawie must-have jeśli chodzi o streamowanie, ale monitor się zepsuł</li> <li>Aby pokazać twarz chciałem użyć kamerki, ale mimo szukania po sklepach nie mogłem jej kupić, nawet jak byłem na chwile we Wrocławiu to wielki sklep z elektroniką, klawiatury mechaniczne, dwadzieścia tosterów, a jednej kamerki nie było</li> <li>Używanie telefonu jako kamery nie jest najlepsze, bateria się wyczerpuje (mimo ładowania) a jakość jest taka sobie (a przez brak wersji Pro DroidCam'a ekspozycja wariuje i dlatego przez część nagrania jestem prześwietlony)</li> </ul> <p>W końcu powiedziałem sobie: jeśli nie spróbujesz zrobić tego nawet w najgorszych warunkach, to zapewne nigdy tego nie zrobię. Ustawiłem piękną konstrukcje widoczną na tweetcie, pożyczyłem laptopa, użyłem telefonu jako kamerki i muszę powiedzieć: nie było tak źle.</p> <p><figure><img src="/media/old/stream-1.jpg" alt="" /><div>Przydatny był tryb prezentacji w IntelliJ</div></figure></p> <p>Zaskakujące jest to jak bardzo taki stream sprawił, że nie dałem się zdekoncentrować. Świadomość tego, że ktoś może Cię obserwować może trochę przeszkadza, ale za to niesamowicie motywuje do działania. Dodatkowo opowiadanie o tym co się teraz robi pomaga unikać błędów.</p> <h5>EOF</h5> <p>Nagrania nie opublikuje, bo po prostu jest niezbyt ciekawe a wiem, że mogę zrobić to lepiej. Nie mogę się doczekać aż będę miał wolny czas aby sobie postreamować :) W końcu jakoś trzeba się zabrać za <code>Todo</code>.</p> Sat, 25 Mar 2017 21:10:25 +0000http://pr0gramista.pl/post/workdone-log-3/DevLog #2http://pr0gramista.pl/post/workdone-log-2/<p>Ten tydzień minął zdecydowanie za szybko.</p> <h5>Todo</h5> <p>Zrobiłem endpointy dla list do zrobienia. Są bardzo podobne jak te dla nawyków, ale zapewne jeszcze to nie koniec ich tworzenia. Prawdopodobnie będę zmuszony stworzyć jeszcze dodatkowe endpointy dla obsługi samej listy zadań a nie całego obiektu <code>Todo</code>.</p> <h5>Testy!</h5> <p>Ten tydzień rozpocząłem tworzeniem testów.</p> <p>Nie jestem z nich do końca zadowolony, ale spełniają swoją rolę i nie odpalają się jako testy integracyjne a jako zmockowane testy jednostkowe. Dzięki temu zabiegowi odpalają się znacznie szybciej, ale za to nie testują repozytoriów pod Hibernate.</p> <pre> <code class="java">@Test public void create() throws Exception { //This is used as a request body Habit modifiedHabit = new Habit.HabitBuilder("6") .description("xxwxw") .expReward(400.23F) .coinReward(1.0F) .build(); when(habitRepository.save(any(Habit.class))).thenReturn(neHabit.HabitBuilder(modifiedHabit).id(1).build()); mockMvc.perform(post("/habit/") .content(mapper.writeValueAsString(modifiedHabit)) .contentType(MediaType.APPLICATION_JSON_UTF8)) .andExpect(status().isOk()); ArgumentCaptor<Habit> captor = ArgumentCaptor.forClass(Habit.class); verify(habitRepository, atMost(1)).save(captor.capture()); assertThat(captor.getValue(), allOf( hasProperty("id", is(nullValue())), hasProperty("expReward", is(400.23F)), hasProperty("coinReward", is(1.0F)), hasProperty("title", is("6")), hasProperty("description", is("xxwxw")), hasProperty("owner", is(notNullValue())) )); } </code> </pre><p>Wykorzystanie wzorca Builder, frameworka Mockito, matcherów Hamcrest i jeszcze Springowego mockMvc. Piękne połączenie. W moim arsenale brakuje mi jeszcze Spocka, ale jeszcze przyjdzie na niego czas.</p> <p><figure><img src="/media/old/workdone-index.png" alt="" /><div>Tak wygląda strona główna. Stock z pexels.com, przycisk do logowania (OAuth), logo i jakże błyskotliwe motto.</div></figure></p> <h5>Szablony i style CSS</h5> <p>Chciałem aby Workdone byl wykonany w stylistyce Material. Oczywiście implementowanie samemu tych wszystkich pól, animacji etc. jest po prostu bez sensu. W sieci mamy dostępnych kilka frameworków, które mają to zrobić za nas.</p> <p>Ja spotkałem z takimi jak:</p> <ul> <li><a href="https://getmdl.io/">Material Design Lite</a> --- framework od Google, dobrze wygląda, ale często ingeruje w niego JavaScript, jeszcze gorzej jest gdy próbujemy w nim coś zrobić inaczej niż twórcy przewidywali.</li> <li><a href="http://materializecss.com/">Materialize</a> --- nie wygląda tak dobrze jak MDL, ale za to jest o wiele czystszy, uniezależniony od JS. To właśnie ten framework wykorzystuje przy Workdone.</li> <li>Bootstrap z motywem <a href="https://bootswatch.com/paper/">Paper</a> --- Bootstrap to solidny wybór, ale motyw Paper nie tworzy z niego idealnego Material Design. Idealny, kiedy nie potrzebujemy fajerwerków a wystarczą nam podstawowe kontrolki. <a href="http://poprosturonin.com/gci/">Moje małe demo</a>.</li> <li><a href="https://www.material-ui.com/#/">Material-UI</a> --- dla Reacta, tyle o nim wiem.</li> <li><a href="https://www.polymer-project.org/">Polymerowe Paper Elements</a> --- Polymer to wciąż eksperyment, wiele rzeczy robi wspaniale, ale czasem można dostać szału od dziwnych, nieprzewidywalnych zachowań.</li> </ul> <p>Na początku chciałem użyć MDL, ale chciałem uniknąć implementowania wymarzonego bocznego panelu. Materialize zrobił to za mnie (+ nie miał problemu z checkboxami).</p> <p><figure><img src="/media/old/workdone-dashboard.png" alt="" /><div>Dashboard wygląda nieźle a edytowanie i tworzenie nawyków już działa. Wciąż jednak jest masa roboty.</div></figure></p> <h5>Vue.js</h5> <p>Ahh te frameworki JavaScriptu. W sumie to jest cała istota HellScriptu. Kilku frontendowców się spotyka i zaczynają: <em>O nie! Przydałoby nam się X. O wiem! Zróbmy kolejny framework, lepszy od innych...</em></p> <p>Zacząłem tak negatywnie, ale tak naprawdę to <a href="https://vuejs.org/">Vue.js</a> jest całkiem niezły. Oprócz sposobu działania komponentów w osobnych plikach to nie mam narazie do czego przyczepić.</p> <p>Lubię prostotę Angulara 1 i Vue robi to jeszcze lepiej. Wszystko jest stosunkowo logiczne i nie ma takich dziwnych barier między klasycznym JS a frameworkiem. Ba! Vue.js praktycznie zmusza do użycia innych frameworków, bo sam w sobie nie ma np. klienta HTTP a proponuje użycie np. <a href="https://github.com/mzabriskie/axios">axios</a>.</p> <p>Vue ma również swoje devTools w postaci <a href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd">rozszerzenia dla Chrome</a>. Jak to skomentował nasz rodak: <img src="https://i.gyazo.com/9b85c3aa24647d1802527b058f65b9a4.png" alt="Urywa dupsko"></p> <p>O Vue.js jeszcze pewnie się kiedyś wypowiem, bo jak narazie to widzę tylko wierzchołek góry frameworkowej.</p> <h5>EOF</h5> <p>Czeka mnie łączenie backendu z frontendem. Trochę już zacząłem to robić i już teraz wiem, że będę musiał przemyśleć na spokojnie jak to zrobić by wszystko się nie wykrzaczyło. Pewnie czeka mnie też kolejna walka z stylami. Nie życzę tego nikomu.</p> <p>Dziwi mnie, że ludzie zaakceptowali CSSa i JavaScript.</p> <p>Ten tydzień: 40% Testy, 40% styl, 20% Vue.js</p> Sun, 19 Mar 2017 21:43:10 +0000http://pr0gramista.pl/post/workdone-log-2/Moja pierwsza konferencjahttp://pr0gramista.pl/post/moja-pierwsza-konferencja/<p>Czytając <a href="http://codingtime.pl/2017/03/16/inzynierskie-targi-pracy-w-oczach-studenciaka/">Inżynierskie Targi Pracy w oczach studenciaka</a> przypomniała mi się moja przygoda związana z moim pierwszym zetknięciem się z konferencją, a była to confitura 2016 na którą pojechałem z ciekawości i chęci podszkolenia się z Javy.</p> <p><a href="confitura.pl">confitura</a> to coroczna polska konferencja dla społeczności związanej z językiem Java. O confiturze dowiedziałem się z ich <a href="https://www.youtube.com/user/confiturapl">kanału YouTube</a> na którym możecie znaleźć wiele ciekawych nagrań prezentacji. Nagrania są nawet z 2012 więc można sobie porównać trendy, technologie z różnych lat (np. <a href="https://youtu.be/zvVkD7huKAE">technologie z 2012</a>). Nawet nie wiecie ile sałatek zjadłem przy tych filmach.</p> <h3>Cel confitura 2016</h3> <p><iframe height="500" src="https://www.youtube.com/embed/NLD0btOtFbg" frameborder="0" allowfullscreen></iframe></p> <h4>Przed</h4> <p>Confitura odbywa się w Warszawie do której mam ponad 500 kilometrów a jazda samochodem nie była możliwa (może nawet i lepiej). Dodatkowym problemem był oczywiście nocleg. Kupno biletów (w wypadku confitury pieniądze idą na cel charytatywny) wymagało czekania i odświeżania karty co 3 sekundy, ale z tym sobie łatwo poradziłem.</p> <p>Podobno programiści mają rozwiązywać problemy. Podróż sprytnie zaplanowałem i z pomocą znajomego spod Warszawy, u którego też nocowałem, udało mi dotrzeć na miejsce. Łącznie podczas całej wyprawy jechałem dwa razy pociągiem, autobusem, samolotem Wrocław-Warszawa, metrem i autobusem warszawskim. To była długa podróż, ale warto było.</p> <h4>W trakcie</h4> <h5>Ludzie i organizacja</h5> <p>Pierwsze co rzuciło mi się w oczy to atmosfera. Ludzie ze sobą rozmawiają, wszyscy są mili i kulturalni. Mimo dużej liczby uczestników i gorąca dało się oddychać, nie było też problemu z nawodnieniem się. Lunch był przepyszny :)</p> <h5>Firmy</h5> <p>Firmy oczywiście przyciągały różnymi gadżetami, konkursami czy jedzeniem. Można było sobie pogadać, ale ktoś taki jak ja nie miał za bardzo z nimi o czym rozmawiać. Nie znałem wtedy Springa czy jakiś innych technologii związanych z enterprise. Jedyne w czym byłem wtedy dobry to libGDX, ale to nie ta impreza. Mimo tego zawsze chętnie przyjmowano mnie do różnych stoisk.</p> <h5>Prezentacje</h5> <p>Prezentacji było sporo, bo aż 35, było więc w czym wybierać. Te, które ja szczególnie zapamiętałem to <a href="https://www.youtube.com/watch?v=skV4dac6zYw">Michał Kosmulski - Wdrażanie i monitoring aplikacji — jakie mamy opcje?</a> i <a href="https://www.youtube.com/watch?v=6G-3KzTjoGc">Bartek Zdanowski - Developerze, zdevelopuj się sam!</a>. Szczególnie ta ostatnia mnie zainspirowała a potęgował to fakt, że była na końcu programu.</p> <p>Śmieszna sytuacja. Miałem dylemat podczas prezentacji <a href="https://youtu.be/8gZCYg0VpKI?t=19m1s">Joanny Karczewskiej - Jak dotrwać w informatyce do emerytury ?</a>. W 19 minucie Pani zadaje pytanie czy jest ktoś tak młody, że ma 18-19 lat. Byłem trochę zdezorientowany, no bo przecież 17 to nie 18 lat. Teraz oczywiście wiem, że mogłem się zgłosić, ale o nieśmiałości kiedy indziej. Chyba byłem najmłodszym uczestnikiem.</p> <p><figure><img src="/media/old/confitura-2016-press.jpg" alt="" /><div>Taki zestaw gadżetów confitury + koszulkę otrzymywał każdy, w środku torby były też naklejki i ulotki różnych pracodawców. PS to co wygląda jak przypinka to magnes z otwieraczem do piwa.</div></figure></p> <h4>Po</h4> <p>Mega motywacja do działania i nauki.</p> <p>Wiedziałem, że świat programistów to nie tylko zarobki a również fajni ludzie, firmy i wydarzenia. Jeśli będziecie kiedyś potrzebowali dawki motywacji to odpuście sobie Mateusza Grzesiaka i odwiedźcie jakąś konferencje czy nawet spotkanie jakiś grup dyskusyjnych programistów.</p> <p>Po powrocie do domu, a miałem wtedy wakacje, zacząłem poznawać Springa i inne technologie wokół świata wielkich korporacji. Lipiec spędziłem bardzo produktywnie.</p> <p>A dziś? Planuje znów odwiedzić confiture, ale tym razem będę znacznie odważniejszy i będę miał cel --- znaleźć firmę w której będę chciał pracować. Jeśli ktoś to czyta i też zamierza się udać na wspomniany event to odezwij się do mnie na Twitterze będę zaszczycony spotkać się z Tobą :)</p> <p><figure><img src="/media/old/confitura-2016-naklejki.jpg" alt="" /><div>Wspomniane naklejki + pluszak od Luxoft</div></figure></p> <p>Zdjęcie koszulki kiedyś tu wrzucę.</p> Thu, 16 Mar 2017 02:24:21 +0000http://pr0gramista.pl/post/moja-pierwsza-konferencja/DevLog #1http://pr0gramista.pl/post/workdone-log-1/<p>Ale to był pracowity tydzień! Podsumujmy go.</p> <h5>Workdone dostał logo</h5> <p>Własnoręcznie wykonane. Połączenie litery W i znaków wykonania (takie przedłużone w jedną stronę V). Do tego dodałem cień i powstało coś podobnego do loga TensorFlow a przynajmniej tak mi się skojarzyło.</p> <p><img src="/media/old/workdone-logo-256.png" alt="Workdone logo"></p> <h5>OAuth</h5> <p>Postanowiłem zrobić OAuth jako główny mechanizm autoryzacji. Implementacja OAuth to męczarnia. Konfiguracja Spring OAuth jest jeszcze gorsza. Jakieś wartości znikąd, tutorial nic nie tłumaczy, dokumentacja mówi o tym jak projekt działa, ale nie wspomina jak go używać. Masakra.</p> <p>Jedyne źródło informacji to pytania na stackoverflow i jakieś dziwne przykłady, które podają różne konfiguracje. W końcu znalazłem działającą, ale dalej nie wiem skąd te wartości się wzięły. Oficjalna dokumentacja Google nic nie mówi, oprócz <em>Użyj naszej biblioteki</em>.</p> <p>To był poziom łatwy, teraz jak zrobić aby dane użytkownika były przypisywane i dostępne później tzn. zrobić własne UserDetails tylko, że dla OAuth. Próbowałem za pomocą ClientDetails i etc. ale później wyczytałem z <em>poradnika</em>.</p> <blockquote><p>How to Add a Local User Database</p> <p>Many applications need to hold data about their users locally, even if authentication is delegated to an external &gt; provider. We don’t show the code here, but it is easy to do in two steps.</p> <p>Choose a backend for your database, and set up some repositories (e.g. using Spring Data) for a custom User object that &gt; suits your needs and can be populated, fully or partially, from the external authentication.</p> <p>Provision a User object for each unique user that logs in by inspecting the repository in your /user endpoint. If there &gt; is already a user with the identity of the current Principal, it can be updated, otherwise created.</p> <p>Hint: add a field in the User object to link to a unique identifier in the external provider (not the user’s name, but &gt; something that is unique to the account in the external provider).</p> </blockquote> <p>Ręcznie? To nie pasuje do Springa, ale ok. Zrobiłem encje, repozytorium i zdałem sobie sprawę, że przy każdym użyciu użytkownika (czyli praktycznie zawsze) muszę pisać kod związany z wyciągnięciem użytkownika.</p> <p>Ten problem rozwiązałem za pomocą implementacji <code>HandlerMethodArgumentResolver</code>.</p> <pre><code>@Component public class UserMethodArgumentResolver implements HandlerMethodArgumentResolver { @Autowired private UserService userService; @Override public boolean supportsParameter(MethodParameter parameter) { return parameter.getParameterType().equals(User.class); } @Override public Object resolveArgument(MethodParameter parameter, ModelAndViewContainer mavContainer, NativeWebRequest webRequest, WebDataBinderFactory binderFactory) throws Exception { if (this.supportsParameter(parameter)) { if (webRequest.getUserPrincipal() instanceof OAuth2Authentication) { OAuth2Authentication auth2Authentication = (OAuth2Authentication) webRequest.getUserPrincipal(); User user = userService.getUserForOAuthentication(auth2Authentication); return user; } } return WebArgumentResolver.UNRESOLVED; } } </code></pre> <p><em><code>User</code> to encja, <code>UserService#getUserForOAuthentication</code> zwraca użytkownika z bazy danych (może być nowo utworzony)</em></p> <p>Teraz jedyne co muszę zrobić to w kontrolerze dodać do parametrów moją encje i gotowe! Wszystko fajnie? Mam nadzieje.</p> <h5>RESTpointy dla nawyków (habits)</h5> <p>CRUD --- create, read, update, delete. Podstawowe czynności, które wykonuje się na jakimś zbiorze danych.</p> <p>Z tworzeniem i odczytem zazwyczaj nie ma żadnych problemów. Gorzej jest z aktualizowaniem, które można implementować zarówno za pomocą POST jak i PUT a samo repozytorium w Spring Data nie ma przydatnej do tego metody. To co ja ostatecznie stworzyłem jest niewydajne, ale działa.</p> <pre><code>@RequestMapping(value = "/{id}", method = RequestMethod.PUT) public void editHabit(@PathVariable long id, @RequestBody Habit habit, User user) { Optional&lt;Habit&gt; habitOptional = habitRepository.findOneByIdAndOwner(id, user); if (habitOptional.isPresent()) { habit.setId(id); habit.setOwner(user); habitRepository.save(habit); } } </code></pre> <p>Mimo tego, że kontroler powstał przed klasą <code>User</code> to nie było problemów z jego zabezpieczeniem, szczególnie po tym jak zrobiłem <code>UserMethodArgumentResolver</code>. Całość wygląda dość schludnie co mnie cieszy :)</p> <h5>EOF</h5> <p>Teraz czas na część list do zrobienia i dodawania punktów. Konieczne będą jakieś szablony i później frontend w Vue.js.</p> <p>Ten tydzień: 60% OAuth, 40% dane użytkowników OAuth, 2% logo, 8% HabitXXX</p> Sun, 12 Mar 2017 17:23:50 +0000http://pr0gramista.pl/post/workdone-log-1/Po co testowaćhttp://pr0gramista.pl/post/po-co-testowac/<p>A no mi te testy? To pytanie zadał sobie każdy, a przynajmniej powinien. Początkujący uciekają od tego zagadnienia jak od ognia. <em>Coś tam ktoś kiedyś mówił</em> kiedy rekruter zada pytanie o tą ważną część w procesie tworzenia softu.</p> <h3>Po co?</h3> <p><strong>Aby oszczędzać czas.</strong></p> <p>Wydaje się to ironiczne. Pisanie kodu to nasza praca, zatem czemu pisanie dodatkowej części ma niby oszczędzić czas. Sytuacja jest podobna do tej, którą opisywałem w <a href="/post/continuous-integration/">poście o CI</a>. Tam była konfiguracja, tutaj jest kodzenie.</p> <h3>Cele</h3> <ul> <li><p>Oszczędność czasu --- jeśli tworzymy coś więcej niż typowy skrypt w Pythonie to szybko zauważymy, że aby ręcznie zbadać, że cała aplikacja działa, trzeba spędzić sporo czasu a wraz z rozwojem projektu czas ten będzie się zwiększał. Efekt ten jest jeszcze bardziej problematyczny, jeśli mamy testować część, której nie pisaliśmy i nie wiemy co tak naprawdę trzeba zbadać.</p> <pre><code>//Memes-API @Test public void parsesOk() throws Exception { Page page = mistrzowieScrapper.parse(testDocument); assertNotNull(page); assertFalse(page.isEmpty()); assertTrue(page.getMemes().size() &gt; 0); assertTrue(page.getNextPage() != null); } </code></pre> <p><em>Memes-API zależy od zewnętrznych serwisów, może się popsuć tak po prostu, bez testowania ten projekt byłby katorgą</em></p> </li> <li><p>Testy to etykiety. Jeśli nie wiesz co dana klasa ma robić a są do niej testy to polecam zajrzeć do nich. Zazwyczaj szybko jest się w stanie zrozumieć co to ma robić.</p> <pre><code>@Test public void newButton() throws Exception { clickOn("File"); verifyThat("File", (Node input) -&gt; { return (input instanceof MenuButton) &amp;&amp; ((MenuButton) input).isShowing(); }); clickOn("New"); NodeQuery query = lookup("#newProjectDialog"); verifyThat(query, Node::isVisible); Node node = query.query(); interact(() -&gt; node.getScene().getWindow().hide()); //Hide dialog sleep(100); } </code></pre> <p><em>Możesz nie wiedzieć skąd ten kod jest, ale wiesz, że przycisk File-&gt;New powinien otworzyć dialog.</em></p> </li> <li><p>Ułatwia pracę po przerwie. Testy sprawiają, że o wiele łatwiej jest wrócić do starego projektu. Nie musisz się zastanawiać. Potrzebny na szybko jakiś prosty feature? Po prostu wchodzisz piszesz coś nowego i jeśli testy przestały przechodzić w jakimś miejscu to idziesz i to badasz. Ewentualnie usuwasz test i nazywasz ten bug funkcjonalnością.</p> </li> <li>Odkrywanie błędów o których nie wiesz.</li> </ul> <h3>EOF</h3> <p>Na początku swojej przygody z programowaniem miałem wrażenie, że testy są zbędne i do dziś podchodzę z ostrożnością do ich pisania. Łatwo jest się w tym zgubić i testować coś czego się nie powinno. Ten post to tylko odpowiedź na pytanie po co. Jak testować i o zagrożeniach związanych z tym zagadnieniem napiszę w następnych postach. Wkrótce.</p> Fri, 10 Mar 2017 23:16:44 +0000http://pr0gramista.pl/post/po-co-testowac/Continuous integrationhttp://pr0gramista.pl/post/continuous-integration/<p>Continuous integration (pl. "Ciągła integracja") to praktyka gdzie każdy członek zespołu/kontrybutor staje wysyła zmiany do repozytorium a narzędzia CI mają sprawdzić czy aktualny kod dalej działa. Często te narzędzia po sprawdzeniu czy kod działa wysyłają najnowszą wersję softu na produkcję, mówimy wtedy o "deployment pipeline".</p> <p>Dla programistów ciągła integracja to niewielka zmiana po prostu nie wrzucaj tony kodu co tydzień tylko codziennie czy nawet co kilka godzin. Twórzmy program równomiernie, liniowo.</p> <h2>Po co?</h2> <h4>Naprawiajmy błędy jak najszybciej</h4> <p>Bugi się pojawiają i raczej nikt temu nie zaprzeczy. Pracując w zespole zdarza się, że ktoś wprowadza błąd, który u niego nie jest jeszcze widoczny ale u innych może się pojawić później. Dzięki CI bug zostanie złapany na etapie w którym jeszcze kodu jest mało i jest on świeży, więc ktoś pamięta co tam popsuł.</p> <h4>Automatyzacja</h4> <p>Człowiek jest leniwy a szczególnie kiedy powtarza jakąś czynność np. odpalenie testów przed commitem, wysłanie gotowego programu na serwer i tym podobne. Zatem zadaniem narzędzi CI jest zrobienie tego za ciebie. Możesz się męczyć z konfiguracją godzinę, ale za każdym razem jak robisz <strong>git push</strong> to oszczędzasz te 3 minuty. Do takiego projektu łatwiej się wraca a satysfakcja z perfekcyjnej konfiguracji --- bezcenna.</p> <h4>"A u mnie działa"</h4> <p>Nawet pisząc kod Javy, która ma być dosyć odporna od rodzaju sprzętu, systemu zdarza się, że u jednej osoby nie działa a u drugiej tak. W takich sytuacjach trudno powiedzieć kto jest tym złym. Dajmy narzędziu zdecydować, jak u niego działa to u was też musi.</p> <h4>Dbanie o jakość kodu</h4> <p>Jenkins ma wiele pluginów do statycznej analizy kodu, code review i lintów.</p> <p>Można by tak wymieniać...</p> <h3>Jak?</h3> <p>Jeśli chodzi o projekt open-source to możemy skorzystać z <a href="travis-ci.org">Travis CI</a>. Darmowy, łatwy do skonfigurowania i genialna integracja z GitHubem. Jedynymi problemami może być prędkość z jaką będą się wykonywały zadania. Zdarzyło mi się, że build failował, bo myślał, że testy UI na Androidzie się zawieszają.</p> <p><img src="https://i.gyazo.com/340c925fec92da315b94f7170ed435c7.png" alt="FOSSASIA"></p> <p><em>FOSSASIA stale buduje swoje projekty właśnie przez Travisa</em></p> <p>Jeśli chcemy mieć więcej możliwości (wysyłanie na produkcję etc.) to dobrym i sprawdzonym rozwiązaniem jest <a href="https://jenkins.io/">Jenkins</a>. Na początku można być lekko zdezorientowanym jeśli chodzi o konfiguracje, ale później staje się to dziecinnie proste. Jenkins oferuje tonę pluginów i można go wykorzystać praktycznie wszędzie (nawet w Pythonie, który się nie kompiluje).</p> <p><img src="https://i.gyazo.com/07fe0d4a7ab6a8b80f2329f07e63ed05.png" alt="Memes API Jenkins"></p> <p><em>Jenkins wysyła moje Memes API na serwer, ja tylko robię pushe do GitHuba</em></p> <h3>Przyszłość</h3> <p>Narzędzia CI to aktualnie nie odrębna część workflow zespołu. Po prostu ciężko jest bez tego żyć i pewnie ta sytuacja szybko się nie zmieni.</p> <h5>Coś o Jenkinsie</h5> <p>Według <a href="https://www.thoughtworks.com/radar/tools">ThoughtWorks</a> i ich <em>Technology radar</em> należy być ostrożnym z używaniem Jenkinsa jako deployment pipeline. Podobnie jest z AngularJS a ten może nie jest na topie, ale działa i jest łatwy w użyciu.</p> <p>Mamy porzucić Jenkinsa? Nie, nie traktujmy ThoughtWorks jak wyroczni. Co nie oznacza, że nie możemy spojrzeć na inne rozwiązania jak np. <a href="https://www.gocd.io/">GoCD</a>.</p> <h3>EOF</h3> <p>Jeśli masz swoje doświadczenia z CI podziel się z nimi w komentarzu a jeśli nie tknąłeś jeszcze tego tematu to bardzo gorąco Cię do tego zachęcam. A teraz niech się stanie <strong>kompletna automatyzacja!</strong></p> Sat, 04 Mar 2017 21:56:55 +0000http://pr0gramista.pl/post/continuous-integration/Mój projekt - Workdonehttp://pr0gramista.pl/post/moj-projekt-workdone/<p>Wybór projektu na konkurs dajsiępoznać nie był łatwy. Miałem różne pomysły: analitykę, program do montażu filmów, framework dla serwerów gier czy różnego typu gry. <!-- more --></p> <h3>Odrzucenie pomysłów</h3> <p>Analitykę zrobiłem w mniej niż tydzień. Program do montażu filmów okazał się po prostu zestawem komend do ffmpega. Framework dla serwerów gier byłby niezbyt praktyczny. Gry - lubię część logiki, ale tworzenie/szukanie grafik, muzyki jest uciążliwe, a przecież ja chcę kodować a nie bawić się w artystę malarza.</p> <p>Uznałem, że coś związanego z webem będzie na tyle wymagające bym miał co programować (tylko programować).</p> <h3>Produktywność</h3> <p>Już od dawna podobał mi się pomysł na grywalizację, głównie dlatego, że wiele razy typowe programy do organizacji, zdobywania celów czy tworzenia nawyków zawodziły.</p> <p>Testowałem:</p> <ul> <li><a href="https://play.google.com/store/apps/details?id=com.rstudioz.habits">HabitHub</a> forma appki na telefon to dla mnie za mało</li> <li>Google Keep --- przyjemne notatki, ale często po prostu o nich zapominałem</li> <li><a href="https://habitica.com/">Habitica</a> --- jest grywalizacja, ale interfejs, niektóre <em>funkcjonalności</em> i przedmioty premium mnie odrzucają</li> </ul> <p>Tak powstał pomysł na:</p> <h3>Workdone</h3> <p>Potrzebujesz trenera osobistego? Workdone to nachalny, przemawiający niczym Mateusz Grzesiak program do motywacji i realizacji celów.</p> <h4>Technologia</h4> <p>W polu na formularzu zgłoszeniowym wpisałem Jave, ale obawiam się, że tak naprawdę to więcej będzie w tym Java...Scriptu</p> <p><img src="http://cdn.pophangover.com/wp-content/uploads/2012/07/disgusted-oh-god-why-text.png" alt="ohh god why"></p> <p>Z tej całej sterty frameworków JS na ten projekt spróbuje skorzystać z <a href="https://vuejs.org/">Vue.js</a>. Świeży i na pierwszy rzut oka wydaje się oczywisty (dlaczego to ważne opowiem w innym poście). Na backend pójdzie Java (Spring) lub Python (django). Na aplikacje na Androida pójdzie React Native (JS) lub zwykły Android SDK. Wtyczka do Chrome nie daje dużego wyboru (JS...).</p> <p>Java i JavaScript, wszystko co potrzebne do stworzenia pełnej aplikacji.</p> <h4>Funkcjonalność</h4> <ul> <li>Tworzenie list rzeczy do zrobienia</li> <li>Śledzenie nawyków</li> <li>Budowanie swojego avatara</li> <li>Grupowe pokonywanie listy do zrobienia (potencjalnie związanej z jakimś projektem)</li> <li>Przypominanie o sobie, gratulowanie wyników</li> </ul> <h4>Cele osobiste</h4> <p>Nauczyć się Dockera, operowania w chmurze i zrobić taki klasyczny backend webowy z jakimś frontendem w roli drugorzędnej. Wszystko oprawić w użyteczne testy i część aplikacji pisać podczas transmisji na żywo (inspiracja - <a href="https://twitter.com/gynvael">Gynveal</a>)</p> <p>To tyle i aż tyle, żebym się nie nudził. Zapowiada się przyjemnie :)</p> Thu, 02 Mar 2017 00:10:41 +0000http://pr0gramista.pl/post/moj-projekt-workdone/Jaki projekthttp://pr0gramista.pl/post/projekt-jeden/<p>Nie będę oszukiwał, <a href="dajsiepoznac.pl">dajsiepoznac.pl</a> trochę zachęcił mnie do blogowania. Idealny termin (właśnie mam ferie) i moja ostatnia duża chęć na przekazywanie czegoś od siebie dla innych sprawiła, że może w końcu będę systematycznie coś pisał.</p> <h4>GitHub wynagradza</h4> <p>Mówiąc o zachęcaniu do blogowania, prowadzenie bloga przez GitHub Pages ma jedną ciekawą zalete --- twój profil ma dużo zielonych kwadracików, zawsze jakoś lepiej to wygląda :)</p> <p><img src="https://i.gyazo.com/96a5c81e2d24fc1ead2e719058071601.png" alt="Moja historia"> <em>Pierwszy wysyp to mój Spritor, drugi to Memes API i jego reader a te ostatnie to poprawki do memów i blog.</em></p> <h4>Dam się poznać</h4> <p>Skoro i tak mam prowadzić bloga to i mogę też wziąć udział w konkursie. Problemem jest wymagania konkursu a dokładnie tworzenie jednego projektu przez minimum 10 tygodni, to sporo czasu. Memes API i jego czytnik zajął mi 5 tygodni, a nie miałem wtedy sporo czasu i wiedzy na temat Springa i Jsoupa. 10 tygodni to okres na coś ambitnego, coś co wymaga zastanowienia i umiejętności, żebym się nie znudził po tygodniu.</p> <h4>Co ja mam robić?</h4> <p>Podczas Google Code-in 2015 pracowałem przy takim projekcie jak <a href="loklak.org">loklak</a>, <em>Distributed Social Media Message Search Server</em> czyli zbiera tweety i je ładnie układa co byś mógł wyszukać jak w Googlu. Projekt ciekawy --- BigData, Docker, ElasticSearch --- interesujące technologie.</p> <p>A co gdybym stworzył taki "search server" dla memów? Zbieranie memów, układanie ich pod względem treści, wizualizacja (Kibana) i tworzenie obrazów Dockera. Do tego bym dołożył OCR czy też jakieś rozpoznawanie postaci.</p> <p>Brzmi nieźle, tylko czy nie będzie zbyt niepraktyczne.</p> <h4>Jutro</h4> <p>Mam jeszcze jakieś dwa tygodnie do końca rejestracji. Może przyjdzie mi coś lepszego do głowy. W tzw. międzyczasie idę pisać kurs Javy.</p> <p>A może by tak język Go lub Python...</p> Wed, 15 Feb 2017 02:51:31 +0000http://pr0gramista.pl/post/projekt-jeden/Start z blogowaniemhttp://pr0gramista.pl/post/oto-moj-blog/<p>Założenie bloga wiąże się z wybraniem platformy na której będziemy publikować nasze urocze posty. Do wyboru mamy wiele opcji, takie rozsądniejsze to Wordpress, blogger lub tumblr.</p> <p><h4>Problem</h4> Uwielbiam szybkie strony, ale takie naprawdę szybkie, więc gdy myślałem o rozwiązaniu kwestii technicznej bloga to Wordpress, niby oczywisty wybór, wcale nie był najlepszym kandydatem.</p> <p>Dlaczego?</p> <ul> <li>Jest wolny, serio, nawet z super pluginami</li> <li>Wymaga bazy danych, a to jest głupie i zbędne (mamy 2017)</li> <li>Aktualizuje się, żeby tylko czasem coś popsuć</li> <li>Tworzenie szablonów to jakieś piekło</li> <li>Edytor jest spoko, ale do momentu w którym chcesz zrobić coś więcej niż wklejenie obrazka</li> </ul> <h4>Rozwiązanie</h4> <p>Statyczne generatory stron. Zamiast generować strony na żądanie przeglądarki wygenerujmy je tylko wtedy gdy jest taka potrzeba czyli kiedy wprowadzamy jakieś zmiany. Takie rozwiązanie drastycznie przyśpiesza ładowanie się strony, a koszty utrzymania są praktycznie zerowe. W praktyce to wygląda tak, że nasza strona to ładny zbiór plików HTML.</p> <p>Najpopularniejszym (?) generatorem stron statycznych jest <a href="https://jekyllrb.com">Jekyll</a>, ale gdy ja widzę wymagania takiego cuda:</p> <ul> <li>GNU/Linux, Unix, or macOS</li> <li>Ruby version 2.0 or above, including all development headers</li> <li>RubyGems</li> <li>GCC and Make</li> </ul> <p>To ja wolę jednak skorzystać z <a href="http://gohugo.io">Hugo.io</a>, generatora opartego na języku Go, którego wymagania są znikome. Moje pierwsze zetknięcie z Hugo, jak i z językiem Go, miałem podczas <a href="https://developers.google.com/open-source/gci/">Google Code-in 2015</a> i bardzo spodobało mi się podejście jednego, natywnego pliku .exe.</p> <h4>Niektóre rzeczy trzeba robić inaczej</h4> <p>Statyczne strony nie potrafią zapisywać czy nawet odczytywać danych po stronie serwerowej. Zatem jak implementować np. komentarze? Z ratunkiem przychodzi nam <strong>JavaScript</strong> i różne zewnętrzne usługi jak np. <a href="https://disqus.com/">disqus</a>, którego możecie zobaczyć na tym blogu.</p> <p>Disqus to tylko komentarze, ale <a href="https://firebase.google.com/">Firebase</a> pozwala na stworzenie całej aplikacji na statycznych stronach.</p> <h4>Getting work done</h4> <p>Problemem Hugo czy Jekylla to fakt, że to są narzędzia głównie dla programistów. No niby tutoriale, no niby takie wszystko proste, ale przysłowiowy Kowalski nie rozumie co to jest HTML, zmienna czy dlaczego IE8 to nie najlepsza przeglądarka. Nie wie, że to co widzi na swoim podglądzie nie jest widoczne dla innych.</p> <p>To jest po prostu za trudne, ale taka jest cena wolności w tworzeniu i jakości końcowego produktu.</p> Tue, 07 Feb 2017 01:08:51 +0000http://pr0gramista.pl/post/oto-moj-blog/