Kot Źródłowy Wpisy z kategorii Daj się poznać2021-04-28T21:37:19+02:00https://kot-zrodlowy.pl/dajsiepoznac2017Co się działo u karotek? - relacja z Geek Girls Carrots meet-up2017-04-20T11:20:00+02:002017-04-20T11:20:00+02:00https://kot-zrodlowy.pl/dajsiepoznac2017/programowanie/offtop/2017/04/20/co-sie-dzialo-u-karotek.htmlCześć! To znowu ja. Kto obserwuje mój fanpejdż (a naprawdę zachęcam) ten wie, że wczoraj byłam prelegentką na bydgoskim spotkaniu Geek Girls Carrots. Co to jes…<p>Cześć! To znowu ja. Kto obserwuje mój <a href="https://www.facebook.com/kotzrodlowy/">fanpejdż</a> (a naprawdę zachęcam) ten wie, że wczoraj byłam prelegentką na bydgoskim spotkaniu Geek Girls Carrots. Co to jest i z czym te marchewki się je? Myślę, że dziewczyny najlepiej same siebie przedstawiły, więc pozwolę sobie zacytować, co jest na ich stronie:</p>
<blockquote>
<p>Geek Girls Carrots is a global grassroots organisation focused on attracting women to tech. We create community by organising meeting, workshops, and other events which gather people to share their knowledge and experience. We bring together female admins, analysts, application architects, developers, graphic designers, IT managers, programmers, social media specialists, system architects, project managers, women with startup ideas, computer science students and many more. Nowadays Geek Girls Carrots is present in Poland, Germany, UK, Japan, Portugal, Switzerland, Holland, Israel, South Korea and Czech Republic. Since 2011, meetings have taken place in 33 cities, 15 countries. We’ve conducted about 415 regular community Carrots Meetups with 800 speakers, 36 special events, 182 workshops in Python, JavaScript, HTML, Scrum, UX. Over 1000 participants in our monthly meetings across all our cities.</p>
</blockquote>
<p>Źródło http://geekgirlscarrots.org/</p>
<p>Oddział tej wspaniałej organizacji jest również w Bydgoszczy i dziewczyny zaprosiły mnie, żeby trochę poopowiadać o programowaniu. Poszłam, powiedziałam, dałam radę. A potem przyszedł czas na mega pasjonujące rozmowy. Poznałam kilka osób, które już mnie czyta, zrobiłam sporo zdjęć. Dziewczyny, byłyście naprawdę wspaniałe i robicie wspaniałą robotę dla kobiet w IT. Wiem, że to nie jest mój ostatni kontakt z GGC, ale na chwilę obecną nie mogę powiedzieć nic więcej.</p>
<p>Niestety, oświetlenie i inne warunki nie pozwoliły steamować na żywo mojego wystąpienia (aczkolwiek był taki zamiar), może następnym razem się to uda. Na FB znajdziecie kilka zdjęć, a tu są slajdy z mojej prezentacji (<a href="https://docs.google.com/presentation/d/1Pr7K_LGQZHT9UdymVQBDVJZMUQU2L659Q1RACXvPJes/edit?usp=sharing">link do pliku</a>) Dopisałam notatki dla prelegenta, aby osoby, które nie uczestniczyły w wystąpieniu, też mogły coś z tego wyciągnąć.Myślę trochę o was. W mojej hierarchii wartości jesteście gdzieś pomiędzy tuńczykiem, a chęcią przejęcia władzy nad światem (czyli naprawdę wysoko). Jakbyście chcieli, to mogę napisać post na blogu nawiązujący do tematu z prezentacji.</p>
<p>Szkoda, że to tak szybko zleciało, ale mam nadzieję pojawić się na spotkaniach jeszcze nie raz. Z tego miejsca chciałabym podziękować organizatorkom, bo to jest naprawdę kawał dobrej roboty. Pod względem organizacji, kontaktu i uśmiechu to było po prostu mistrzostwo. Czuję się zaszczycona możliwością wystąpienia przed tak liczną, pozytywną i genialną publicznością. Życzę każdej z was z całego serca, żebyście dążyły do upragnionych celów i może zakodujemy coś kiedyś razem?
Miau!</p>
Garść pro-tipów dla początkujących- narzędzia dla deweloperów2017-04-17T11:20:00+02:002017-04-17T11:20:00+02:00https://kot-zrodlowy.pl/dajsiepoznac2017/programowanie/2017/04/17/garsc-pro-tipow-w-dev-toolsach.htmlCześć! Dzisiejszy post nie będzie kolejnym tutorialem, ale ma pomóc bardziej w codziennym zmaganiu się z kodem. W końcu piszemy go na codzień i oczywiście jest…<p>Cześć! Dzisiejszy post nie będzie kolejnym tutorialem, ale ma pomóc bardziej w codziennym zmaganiu się z kodem. W końcu piszemy go na codzień i oczywiście jest on cudowny i najpiękniejszy na świecie, chyba że akurat nie działa. Zdarza się najlepszym. Wtedy jest płacz i zgrzytanie zębów, a nawet płaczliwe posty na grupach i forach, jak ten poniżej.</p>
<blockquote>
<p>Ten JS mi nie działa, CSS się rozjechał - ratunku !!!! Jak to naprawić!!!!!</p>
</blockquote>
<p>Tego typu treści można spotkać niemal codziennie w różnych miejscach, gdzie koderzy szukają pomocy. A czasami samodzielne znalezienie rozwiązania jest o wiele szybsze, a nawet śmiem twierdzić, że kosztuje nas mniej straconego czasu i nerwów. Tak, udzielając się na codzień i pomagając innym, z przerażeniem stwierdzam, że niektórzy przeglądarkowych dev-toolsów na oczy nie widzieli. Albo boją się samodzielnie z nich korzystać. Albo jeszcze nie wiem co, ale samodzielne rozwiązywanie własnych daje niesamowicie wiele satysfakcji (potwierdzone info, testowane na kotach). Druga część osób zna to magiczne miejsce w przeglądarce, ale chyba nie do końca sobie zdaje sprawę, co można tam zrobić. Dla takich jak wy dzisiejszy post.</p>
<p>Zaczynamy zabawę. Wybierasz dowolną popularną przeglądarkę (u mnie to jak zwykle będzie Google Chrome, ale Firefox prezentuje się bliźniaczo podobnie). Wchodzisz na jakąś stronę www i wciskasz magiczny skrót: <code class="highlighter-rouge">Ctrl + Shift + i</code> (albo z menu wybierasz otwórz narzędzia dla developerów). Twoim oczom po prawej lub na dole powinna się pojawić sekcja z różnymi zakładkami i wydzielonymi blokami. Jeśli wygląda podobnie do tego poniżej, to dobry znak, właśnie je otworzyłeś.
<img src="/img/dev-tools.png" alt="dev-tools w przeglądarce Google Chrome" /></p>
<p>Jak to najłatwiej wytłumaczyć? Spróbuję znaleźć kilka najpowszechniejszych problemów i wytłumaczyć, jak je można rozwiązać. Tak chyba jest najsensowniej, bo to na tyle potężne narzędzie, że mało kto by wytrzymał suchą teorię.</p>
<h2 id="1-co-to-za-element-na-stronie-xyzmiaupl">1. Co to za element na stronie XYZ.miau.pl?</h2>
<p>Masz tak, że czasem coś zobaczysz na stronie w sieci i z czystej ciekawości, chcesz się dowiedzieć, co to właściwie jest i jak to zrobili? Do tego przydadzą się dev-toolsy. Otwierasz je i po lewej stronie masz coś takiego jak inspektor (to ta mała ikonka ze strzałką w lewym górnym rogu lub Ctrl + Shift + C). Z jej pomocą klikniesz na element i pojawi ci się kod HTML i CSS w sekcjach poniżej. Tam już możesz wypatrzyć inspiracje dla twojego super designu.</p>
<h2 id="2-dlaczego-te-divy-mi-się-przesunęły">2. Dlaczego te divy mi się przesunęły?</h2>
<p>Masz na stronie problem, na 99% z własnym lub nie-własnym arkuszem styli. Używasz już wspomnianego inspektora i klikasz na krnąbrnym elemencie. Zobaczysz co ten element zmajstrował. Tutaj najpewniej cię interesuje, co jest nie w porządku z CSS-em. Zakładka styles pokaże ci dokładnie jak jest ostylowany dany element. Jak dobrze wiesz (albo właśnie się dowiadujesz) przeglądarka sama z siebie nakłada css na elementy i czasami to jest przyczyną naszych niepowodzeń. Jeśli masz kilka dokumentów css, to widzisz w dokładnie którym jest jaka reguła, która działa na nasz div. Co więcej widzisz, która dokładnie linijka jakiego dokumentu za co odpowiada. A to jeszcze nie koniec zabawy. Klikając na poszczególne reguły możesz je włączyć lub wyłączyć i na żywo obserwować zachowanie strony. Co więcej, możesz dopisywać nowe własne - po prostu klikasz w odpowiednie miejsce i dopisujesz regułę. Dobry feature do testowania lub gdy uczysz się nowych funkcjonalności, np. flexa. W normalnym trybie, to wszystko znika po przeładowaniu okna przeglądarki, więc to taka zabawa bez większych konsekwencji.</p>
<h2 id="3-js-mi-nie-działa">3. JS mi nie działa.</h2>
<p>Nie wyświetla, co ma wyświetlać, a ty nawet nie wiesz dlaczego. Spoko, dla mnie to chleb powszedni (no dobra powszednie mleczko). Jeśli w tym momencie włączysz nasze narzędzia, to z pewnością konsola zapłonie na czerwono od błędów. No dobra, czasem wystarczy jeden błąd. Przeczytaj jego treść. To powinno pomóc. Jeśli nie działa, to na pewno z wiedzą, jaki błąd masz w konsoli, szybciej znajdziesz pomoc.</p>
<h2 id="4-jak-szybko-potestować-nowe-funkcjonalności">4. Jak szybko potestować nowe funkcjonalności?</h2>
<p>JavaScript ma ogromne możliwości. Tylu bibliotek nie ma chyba nigdzie indziej (słowo kluczowe chyba wskazuje na subiektywne odczucia pewnego kota), a samo WEB API jest ogromne. Czasem chcesz szybko zobaczyć i przekonać się na własnej skórze, jak działa jakaś nowo-poznana funkcja z WEB API. Albo piszesz własne funkcje i chcesz wylogować (consol.logiem), co tam one ci dają. Do tego też może służyć konsola. Oczywiście przy własnych projektach lepiej korzystać z testów jednostkowych, ale czasami też się przydaje ta opcja.</p>
<h2 id="5-moje-obrazki-się-nie-ładują">5. Moje obrazki się nie ładują.</h2>
<p>Ten problem ma zwykle dwie przyczyny. Albo masz za wolny internet i za duże obrazki, albo podałeś złe ścieżki do obrazków. Ten drugi przypadek jest chyba częstym błędem. Otwierasz dev-toolsy i już konsola ci pokaże, że plik pod taką ścieżką nie istnieje. A ty koniecznie musisz sprawdzić, co poszło nie tak. Zajmie ci to kilka chwil i z pewnością będziesz wiedział. Może to nazwa pliku i literówka, może nie ma rozszerzenia lub jest niepoprawnie wpisane, może gdzieś brakuje ukośnika? Będzie widać, a ty z pewnością sobie z tym poradzisz.</p>
<p>Na dzisiaj to tyle. Nie ma co bombardować informacjami w święta. Odpocznij jeśli możesz, a potem zjedz jeszcze serniczka. Wiem, jestem kochana. Masz może ochotę dowiedzieć się więcej na temat dev-tools? Znasz mnie, po prostu podam ci <a href="https://developer.chrome.com/devtools">link do dokumentacji</a>. Baw się dobrze, nie przejedz za bardzo, a potem wróć ze mną do wspólnego kodowania.
Miau!</p>
Serdeczne życzenia wielkanocne2017-04-15T11:21:27+02:002017-04-15T11:21:27+02:00https://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/04/15/zyczenia-wielkanocne.htmlCześć Kociaki, Czy jesteście już zmęczeni tymi przygotowaniami do świąt? Spokojnie, to już niedługo, bo jutro świętujemy wielkanoc. Ja spędzam ten szczególny c…<p>Cześć Kociaki,
Czy jesteście już zmęczeni tymi przygotowaniami do świąt? Spokojnie, to już niedługo, bo jutro świętujemy wielkanoc. Ja spędzam ten szczególny czas z rodziną, raczej daleko od komputera. Mam swoisty detoks. Wam też to zalecam - przez dwa dni świat się nie zawali, a po świętach razem wrócimy do kodowania i nowych wyzwań.</p>
<p>Skoro życzenia są do was, to pozwolicie, że skopiuję te z mojego fanpejdża.</p>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fkotzrodlowy%2Fposts%2F674266382759929&width=500" width="500" height="645" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
<p>Trzymajcie się.</p>
# 50 Twarzy JS: 3.Jak napisać dodatek do przeglądarki2017-04-08T12:21:27+02:002017-04-08T12:21:27+02:00https://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/04/08/50-twjs-dodaj-mnie-do-chrome.htmlCześć! To znowu ja. I zauważyłam, że dawno nie było waszej ulubionej serii. Skąd wiem, że ulubionej? Statystyki i wasze komentarze nie kłamią, więc wy też nie …<p>Cześć! To znowu ja. I zauważyłam, że dawno nie było waszej ulubionej serii. Skąd wiem, że ulubionej? Statystyki i wasze komentarze nie kłamią, więc wy też nie próbujcie. Dzięki wszystkim, którzy dopytywali i motywowali do pisania, sama bym się chyba teraz w sobie nie zebrała. Jesteście kochani. Za oknem wiosna, to koty szyją sukienki i spódnice, na spacery chodzą, biegają. A doba nie chce być z gumy i czasu na kodowanie i pisanie jakby mniej. Ale więcej grzechów nie pamiętam i proszę o wybaczenie. Obiecuję poprawę, tylko jeszcze nie wiem kiedy. Może od jutra. Ja tu piszę i piszę, a tymczasem mam ciekawy temat do pokazania.</p>
<p>Kolejne brawurowe i cudowne zastosowanie JS-a przed nami. Zetknął się z nimi każdy, no bo kto nigdy nie użył Adblocka, niech pierwszy rzuci kłębkiem wełny (pozbieram i zrobię szalik na zimę). Chodzi oczywiście o dodatki lub inaczej rozszerzenia do przeglądarki. Jak to w świecie Webowym bywa, przeglądarek jest cała masa i nigdy nie jest tak, żeby do wszystkich pisać tak samo. Dlatego musiałam zebrać się w sobie i podjąć <del>męską</del> kocią decyzję, a w związku z tym wybrać jedną przeglądarkę. Padło na Google Chrome, bo to z niej najczęściej korzystam i jakoś tak jest mi najbliższa (nie chodzi o to, że jej logo wygląda jak kłębek wełny). Całkiem dobrze napisana dokumentacja też pomaga wystartować.</p>
<h2 id="co-to-będzie">Co to będzie?</h2>
<p>Dodatki do przeglądarek są rozmaite. Jedne maleńkie, a inne to całkiem spore i rozbudowane aplikacje. Zazwyczaj jednak mają jakąś prostą i ograniczoną funkcjonalność. Ja na potrzeby tego przykładu wymyśliłam prosty generator haseł. Rejestrujemy się w całej masie serwisów, a wiadomo, że powinno się mieć osobne hasła do wszystkiego. Tak czy inaczej pomysł na prosty generator losowych haseł. Nie jest idealny, ale wiecie, to tylko próba pokazania jak wygląda robienie takiego rozszerzenia. Nasz dodatek będzie działał następująco:</p>
<ul>
<li>Po kliknięciu na ikonkę dodatku wyświetli się formularz</li>
<li>Możliwość wpisania długości hasła</li>
<li>Możliwość zaznaczenia, czy nasze hasło ma zawierać duże litery, liczby, czy znaki specjalne</li>
<li>Wygenerowane hasło pokazuje się poniżej</li>
</ul>
<p>W sumie żadna wielka filozofia, bo też nie o to tu chodzi. Widzę jednak potencjał do rozbudowy tej aplikacji w coś większego. Jak mnie natchnie, to czemu nie.</p>
<h2 id="szykujemy-środowisko-pracy">Szykujemy środowisko pracy</h2>
<p>Żeby w ogóle zacząć się bawić z testowaniem potrzebujemy przeglądarki. To było takie odkrywcze, jak fakt, że skarpetki nie łączą się w pary. Tą naszą przeglądarkę potrzebujemy jednak dostosować na potrzeby testowania dodatku. To nie będzie takie trudne, obiecuję. Otwieramy chrome i w pasku wpisujemy:</p>
<pre><code class="language-url">chrome://extensions/
</code></pre>
<p>Po krótkiej chwili powinny nam się wyświetlić wszystkie zainstalowane przez nas rozszerzenia. Zaznaczamy opcje “Tryb programisty” i możemy się zabrać za tworzenie projektu. Warto nie zamykać tej karty. Przyda się jeszcze. Mówiłam, że będzie prosto.</p>
<p>Teraz już czas na otwarcie naszego ulubionego edytora lub IDE i rozpoczęcie przygody z kodowaniem. Tworzymy nowy projekt, a w nim kilka plików. Oto i one:</p>
<ul>
<li>manifest.json</li>
<li>popup.html</li>
<li>style.css</li>
<li>main.js</li>
<li>icon.png</li>
</ul>
<p>Oczywiście każdy z plików poza pierwszym może się nazywać jak tylko chcesz. Co mi do tego, jak nazywasz własne pliki. Jeśli już przejmę władzę nad światem to może, ale teraz to jest mi obojętne. Ten pierwszy też byłby mi obojętny, ale to Chrome potrzebuje takiego, nie ja.</p>
<h2 id="deklarujemy-nasz-dodatek">Deklarujemy nasz dodatek</h2>
<p>Wszystkie ważne informacje naszej aplikacji są tam przetrzymywane. Może być bardzo prosty, ale uwierzcie, że bywa tak ogromny, że trudno się połapać. Tutaj masz możliwość poczytać <a href="https://developer.chrome.com/extensions/manifest">dokumentację</a>. Tak naprawdę absolutnie niezbędne są tylko trzy linijki.</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s2">"manifest_version"</span><span class="p">:</span><span class="w"> </span><span class="mi">2</span><span class="p">,</span><span class="w">
</span><span class="s2">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Pass Generator"</span><span class="p">,</span><span class="w">
</span><span class="s2">"version"</span><span class="p">:</span><span class="w"> </span><span class="s2">"1.0.0"</span><span class="p">,</span><span class="w">
</span></code></pre></div></div>
<p>Wydaje mi się, że to jest jasne. Wersja manifestu ma być 2, chyba że kiedyś dokumentacja postanowi inaczej i tu nie ma dyskusji. Potem zapisujemy nazwę, dzięki której nasz dodatek podbije świat i jego wersję. U nas jednak to będzie wyglądać odrobinę bardziej rozbudowanie. No bo przecież Chrome musi wiedzieć, co ma zrobić z naszymi plikami. Dlatego wpiszemy tzw. “browser action”.</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="s2">"browser_action"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="s2">"default_icon"</span><span class="p">:</span><span class="w"> </span><span class="s2">"resources/icon.png"</span><span class="p">,</span><span class="w">
</span><span class="s2">"default_popup"</span><span class="p">:</span><span class="w"> </span><span class="s2">"popup.html"</span><span class="p">,</span><span class="w">
</span><span class="s2">"default_title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Generuj hasło"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<p>Dzięki temu nasza aplikacja pokaże się z prawej strony i będzie dostępna na kliknięcie ikonki. Deklarujemy kolejno, jaka ma być ikona, zawartość pop-upu dostępna po kliknięciu i jaki tytuł ma się wyświetlać po najechaniu. Pełna zawartość jest dostępna <a href="https://github.com/korneliakobiela/pass-generator/blob/master/manifest.json">tutaj</a>.</p>
<h2 id="napiszmy-jakiś-kod">Napiszmy jakiś kod</h2>
<p>Przy tak prostej zawartości ten wpis mógłby się skończyć w tym momencie. No bo cała magia się już wykonała i teraz potrzebujemy po prostu zakodować logikę naszej aplikacji. W pliku html kodujemy formularz i element, w którym pokażemy nasze hasło. Css jak zwykle w demach, służy po prostu do poukładania elementów, żeby jako-tako się prezentowały. Możecie je obejrzeć w <a href="https://github.com/korneliakobiela/pass-generator">repozytorium</a>. Odnośnie kodu js, to po kolei działamy:</p>
<ul>
<li>Potrzebujemy obiektu, który nam przechowa zestawy znaków.
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">chars</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">letters</span><span class="p">:</span> <span class="s1">'qwertyuiopasdfghjklzxcvbn'</span><span class="p">,</span>
<span class="na">capitals</span><span class="p">:</span> <span class="s1">'QWERTYUIOPASDFGHJKLZXCVBNM'</span><span class="p">,</span>
<span class="na">digits</span><span class="p">:</span> <span class="s1">'1234567890'</span><span class="p">,</span>
<span class="na">special</span><span class="p">:</span> <span class="s1">'`~!@#$%^&*()-_=+[{]}</span><span class="err">\\</span><span class="s1">|;:</span><span class="se">\'</span><span class="err">\</span><span class="s1">",<.>/?'</span>
<span class="p">}</span>
</code></pre></div> </div>
</li>
<li>Losowe wybieranie liczby całkowitej z podanego zakresu.
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">getRandomInt</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">min</span><span class="p">,</span> <span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">min</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="nx">min</span><span class="p">);</span>
<span class="nx">max</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">max</span><span class="p">);</span>
<span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="p">(</span><span class="nx">max</span> <span class="o">-</span> <span class="nx">min</span><span class="p">))</span> <span class="o">+</span> <span class="nx">min</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div> </div>
</li>
<li>Funkcję, która wygeneruje nam losowe hasło o podanej długości na podstawie zestawu znaków.
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">generatePassword</span><span class="p">:(</span><span class="nx">length</span><span class="p">,</span> <span class="nx">charset</span><span class="p">)</span><span class="o">=></span><span class="p">{</span>
<span class="kd">let</span> <span class="nx">password</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
<span class="k">for</span><span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o"><</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">password</span> <span class="o">+=</span> <span class="nx">charset</span><span class="p">[</span><span class="nx">helper</span><span class="p">.</span><span class="nx">getRandomInt</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">charset</span><span class="p">.</span><span class="nx">length</span><span class="p">)]</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">password</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div> </div>
</li>
<li>Funkncję, która wygeneruje nam dany zestaw znaków.
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">generateCharSet</span><span class="p">:(</span><span class="nx">hasCaps</span><span class="p">,</span> <span class="nx">hasDigits</span><span class="p">,</span> <span class="nx">hasSpecial</span><span class="p">,</span> <span class="nx">chars</span><span class="p">)</span><span class="o">=></span><span class="p">{</span>
<span class="kd">let</span> <span class="kd">set</span> <span class="o">=</span> <span class="nx">chars</span><span class="p">.</span><span class="nx">letters</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">hasCaps</span><span class="p">)</span> <span class="kd">set</span> <span class="o">+=</span> <span class="nx">chars</span><span class="p">.</span><span class="nx">capitals</span><span class="p">;</span>
<span class="c1">//for similar propability</span>
<span class="k">if</span><span class="p">(</span><span class="nx">hasDigits</span><span class="p">)</span> <span class="kd">set</span> <span class="o">+=</span> <span class="nx">chars</span><span class="p">.</span><span class="nx">digits</span> <span class="o">+</span> <span class="nx">chars</span><span class="p">.</span><span class="nx">digits</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">hasSpecial</span><span class="p">)</span> <span class="kd">set</span> <span class="o">+=</span> <span class="nx">chars</span><span class="p">.</span><span class="nx">special</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">set</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div> </div>
</li>
</ul>
<p>Logika tego jest niezwykle prosta. Pobieramy z formularza informację, czy zestaw z danej grupy występuje. Jeśli nie jest zaznaczona żadna z opcji, to hasło będzie się składać tylko z małych liter. W innym wypadku sklejamy jednego długiego stringa z wszystkich zaznaczonych. Z tak utworzonego zestawu znaków losujemy sobie znaki do naszego hasła. Dla uproszczenia przykładu nie dodawałam funkcji sprawdzającej, czy wynikowe hasło posiada co najmniej jeden znak z każdego wymaganego zestawu.</p>
<h2 id="testowanie-i-uruchamianie-dodatku">Testowanie i uruchamianie dodatku</h2>
<p>W normalnej sytuacji dodatki do Chrome są dystrybuowane w pakietach i w takiej postaci możemy je sobie zainstalować. Jak zatem sobie poradzić z testowaniem, czy nasza aplikacja w ogóle się uruchamia. Włączyliśmy tryb programisty dla naszej przeglądarki. Teraz wystarczy wrócić na tą samą kartę i kliknąć “Wczytaj rozszerzenie bez pakietu” i znależć folder z naszym projektem. Jeśli wszystko pójdzie gładko, to nasz dodatek powinien się zainstalować i wyswietlić dumnie po prawej stronie (tam, gdzie wszystkie inne). Jeśli chcemy korzystać z narzędzi developerskich, to klikamy prawym przyciskiem myszy i “Zbadaj”. A tam już wiecie, co z tym zrobić.</p>
<p>Oczywiście, jak zwykle zachęcam do przejrzenia <a href="https://developer.chrome.com/extensions/">dokumentacji</a> i zabawy w utworzenie czegoś fajnego. Mam nadzieję, że pomogłam, a efekt pracy jest jak zwykle na <a href="https://github.com/korneliakobiela/pass-generator">GitHubie</a>. Dzięki za wasze komentarze i zaangażowanie. Nawet nie sądziłam, że tak szybko tylu z was się tym moim pisaniem zainteresuje. Trzymajcie się ciepło i nie dajcie alergii.</p>
<p>Miau!</p>
Po krótkiej przerwie.2017-03-30T12:21:27+02:002017-03-30T12:21:27+02:00https://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/03/30/po-krotkiej-przerwie.htmlCześć! W sumie dawno mnie nie było. Trochę odpoczywałam od wszystkiego i wszystkich, trochę grubszych spraw do pozałatwiania. A wiecie odpoczynek jest niezwykl…<p>Cześć!
W sumie dawno mnie nie było. Trochę odpoczywałam od wszystkiego i wszystkich, trochę grubszych spraw do pozałatwiania. A wiecie odpoczynek jest niezwykle ważnym aspektem kociego życia. Chociaż praktykowany zbyt często rozleniwia. Ale czasem potrzebuję nic nie musieć i w ten weekend udało się tak zrobić. Wróciłam do skomplikowanej rzeczywistości i jestem.</p>
<p>Aktualnie całkiem sporo się dzieje. Ogarniam bloga, uczelnię, powoli już inżynierkę. W pozytywnym tego słowa znaczeniu prowadzę bardzo intensywny tryb życia i wiecie co, to mi bardzo pasuje. Czasem jest ciężko, bo trzeba wybierać, w czym właściwie chce się brać udział. A teraz kilka ciekawych migawek - co się teraz dzieje i będzie działo.</p>
<h2 id="inżynierka">Inżynierka</h2>
<p>No za rok (oby) będę mogła sobie dopisać te trzy magiczne literki przed nazwiskiem. W sumie, to średnio mnie to jara. Bardziej mnie satysfakcjonuje bat nad głową, dzięki któremu trzeba będzie napisać projekt od początku do końca, a potem można udostępnić jako open-source. Sporo grzebania było przy tym, czy to jest właściwie moje, czy uczelni i na ile można to rozwijać, na otwartej licencji. Ale da się i to jest chyba najlepsze w tym wszystkim.</p>
<h2 id="sprawy-uczelniane">Sprawy uczelniane</h2>
<p>Moja uczelnia stawia na dużą ilość praktyki - więc zamiast siedzieć na dużej liczby wykładów i ćwiczeń - mamy dużo projektów. To jest fajne, tylko jak się ma takie pomysły jak ja i chce robić fajne rzeczy, to trzeba się nastarać i dogadać wiele rzeczy. W tym semestrze ogarniam 5 takich perełek plus konkurs. Że niby ja sobie nie dam rady. Przecież to jakiś nonsens - jutro realizuję plan przejęcia władzy nad światem, a mam sobie z czymś takim nie poradzić - no właśnie. Takie rzeczy to się nawet w mojej kociej głowie nie mieszczą ( a zapewniam cię, że mieści się dużo)</p>
<h2 id="ggc---niespodzianka">GGC - niespodzianka!</h2>
<p>Kto obserwuje mój <a href="https://www.facebook.com/kotzrodlowy/">Fanpejdż</a> ten wie, (a temu, kto jeszcze tego nie robi niech żałuje) że wystąpię na Bydgoskim spotkaniu Geek Girls Carrots. Spotkamy się już 19 kwietnia - fajnie prawda? Nie chcę wam zdradzać na razie tematu wystąpienia. Ale przychodźcie, to z chęcią pogadam i wymienię się doświadczeniami. Wpadaj do Bydgoszczy.</p>
<p>Oczywiście sezon Hackathonów dopiero się zaczął i nie zamierzam tego roku skończyć na jednym. Może przyjdzie nam się zmierzyć lub po prostu powalczyć razem w drużynie. Nigdy nie wiadomo. Na pewno o większości rzeczy napiszę tutaj, albo chociaż wspomnę na Facebooku lub Twitterze. Pamiętajcie, że nie tylko programowaniem żyją koty, więc można mnie też spotkać na wydarzeniach związanych z fantastyką. Pozdrawiam ciepło. Przyszła wiosna</p>
<p>Miau!!</p>
Czy warto chodzić na hackathony2017-03-21T10:21:27+01:002017-03-21T10:21:27+01:00https://kot-zrodlowy.pl/dajsiepoznac2017/offtop/2017/03/21/wrazenia-z-hackathonu.htmlCześć! Witam was dzisiaj w pierwszym poście po burzliwym weekendzie, bo oj działo się działo. Bez zbędnych ceregieli, odbył się pierwszy bydgoski Hackathon. Im…<p>Cześć!
Witam was dzisiaj w pierwszym poście po burzliwym weekendzie, bo oj działo się działo. Bez zbędnych ceregieli, odbył się pierwszy bydgoski Hackathon. Impreza dla wszelkiej maści programistów, możliwość spotkania się, wymiany doświadczeń i przede wszystkim wspaniałej zabawy przy wspólnym kodowaniu.</p>
<h2 id="co-to-jest-hackaton">Co to jest hackaton?</h2>
<p>Maraton programowania, gdzie mamy 24 godziny na napisanie aplikacji na zadany temat. A jeszcze bardziej niż aplikacji, to zrobienie prototypu i zademonstrowanie go jury i innym uczestnikom. Czyli wyścig z czasem, innymi drużynami, a także zmierzenie się z własnymi słabościami. Tu często rodzą się innowacyjne pomysły, a demo to poskładany z kawałków Frankenstein, gdzie połowa rzeczy nie działa - a o drugą połowę modlimy się, żeby jednak zadziałała. Czyli przygoda na całego</p>
<h2 id="co-myślę-o-tym-konkretnym-spotkaniu">Co myślę o tym konkretnym spotkaniu</h2>
<p>Ten hackathon dostaje 5 kocich łapek - było genialnie. Jako żądne przygód stworzenie - poszłam sama i postanowiłam się wkręcić w jakąś drużynę. To okazało się strzałem w dziesiątkę. Lepiej trafić nie mogłam. Krótko przed północą wyglądaliśmy tak:</p>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fkotzrodlowy%2Fposts%2F659563514230216%3A0&width=500" width="500" height="463" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
<p>Chyba jak na każdym takim wydarzeniu, zyskaliśmy tytuł CPCE, z resztą tak nazywała się nasza drużyna. Co ten magiczny skrót oznacza? Copy Paste Certificated Engineers (To dalej lepiej, niż mieć certyfikat od W3Schools). Zabawa była przednia mimo wyczerpania i chwil zwątpienia. Ostatecznie udało nam się zdobyć drugie miejsce - co jak na pierwszy raz jest bardzo obiecującym wynikiem.</p>
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fkotzrodlowy%2Fposts%2F660087270844507%3A0&width=500" width="500" height="588" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
<h2 id="co-w-samym-projekcie">Co w samym projekcie?</h2>
<p>Pewnie zamiast gadania chcielibyście kod, ale ten chyba póki co nie ujrzy światła dziennego. Tematem spotkania było zdanie:</p>
<blockquote>
<p>Coś w czym komputer jest lepszy od człowieka</p>
</blockquote>
<p>Po krótkiej burzy mózgów postanowiliśmy zrobić program który zczytywał dźwięk z mikrofonu, po czym porównywał go z bazą danych i wyszukiwał utwór podobny do tego, co usiłowaliśmy zaśpiewać lub wymruczeć. Zadanie wydaje się bardzo trudne, ale w znacznym stopniu poradziliśmy sobie. Język programowania - tym razem zaskoczenie - Python. Ja byłam odpowiedzialna już za końcową obróbkę i porównanie dwóch plików tekstowych wypełnionych liczbami. Tam po drodze się działa magia konwertowania pliku wav do mid, potem wyciągania pojedynczych wartości liczbowych z każdej próbki. Ja liczyłam różnicę pomiędzy kolejnymi liczbami - od pierwszej odejmowałam drugą, a potem od drugiej trzecią - takie różnice zapisywałam do pliku i mogłam porównywać ze wzorcem. Do porównywania dwóch takich plików użyliśmy algorytmu najdłuższego wspólnego podciągu. Póki co, działało to dość wolno i nieporadnie, ale można było coś porównać.</p>
<p>Jestem bardzo dumna z naszej drużyny. Spisaliśmy się na medal, pokazaliśmy, że można współpracować na różnych płaszczyznach. W sumie to nie chodziło o żadne nagrody, ani fejm - najważniejsza była dobra wspólna zabawa. Na pewno spotkamy się jeszcze na niejednym podobnym wydarzeniu. Ja się zastanawiam nad wyjazdem na Zdrowieton, ale spróbuję zebrać drużynę.</p>
<p>Co do tego wydarzenia - organizacyjnie super, dużo jedzenia - PIZZA. Brakowało mi trochę świeżych owoców - ale to może moje zboczenie, następnym razem sama się zaopatrzę. Mam nadzieję więcej takich inicjatyw w tym mieście. Bydgoszcz na to zasługuje. A wy, kiedy idziecie na jakiś hackathon?</p>
<p>Miau!</p>
Skąd uczyć się JS za darmo?2017-03-16T19:21:27+01:002017-03-16T19:21:27+01:00https://kot-zrodlowy.pl/javascript/dajsiepoznac2017/2017/03/16/skad-sie-uczyc-js-za-darmo.htmlCześć, To znowu ja!<p>Cześć,
To znowu ja!</p>
<p>Znowu mi przyszedł na myśl ciekawy post, a raczej zobaczyłam ciągle te same pytania w różnych frontendowych społecznościach. A mianowicie skąd czerpać wiedzę na temat JavaScriptu. Jak na najbardziej znany na świecie język powstało - Internet oferuje nam gros możliwości. Tylko, że najczęściej są to źródła doraźne - rozwiązujące jeden w miarę konkretny problem. Nawet popularne ostatnio kursy internetowe mają za zadanie nauczyć nas podstaw, lub po prostu przekazać umiejętności potrzebne do rozwiązania konkretnego problemu. W ten sposób bez większego zrozumienia całości mamy konkretną umiejętność. Czyli np. umiemy pisać stronki www przy użyciu m.in. JavaScriptu, ale to rzadko kiedy oznacza, że znamy sam JavaScript.</p>
<p>Przychodzi jednak taki moment w naszym życiu, że nasza wiedza zdobyta w ten sposób okazuje się niewystarczająca. Warto korzystać wtedy ze źródeł sprawdzonych i uczyć się od najlepszych. Co jednak zrobić, jeżeli nasze kieszenie nie są bez dna, a budżet z gumy i nijak nie stać nas na zakup drogich książek, które za kilka lat będą zupełnie nieaktualne? Okazuje się, że społeczność JS ofiaruje nam więcej, niż mogłoby się wydawać. Bowiem prawdziwe autorytety piszą książki i udostępniają je za darmo w sieci. Oczywiście wszystko jest w języku angielskim, inaczej nie da rady - tłumaczenie zajmuje czas, kosztuje pieniądze i ciężko na tym oszczędzać. Chyba, że chcemy więcej kwiatków w stylu chomików i szynki, czy jakoś tak.</p>
<p>Podam więc źródła aktualne (na tyle, na ile rzeczywistość frontendu pozwala), napisane przez ludzi dla JS-a ważnych, sprawdzone i legalne. Oczywiście, lista nie jest kompletna. Nie znam wszystkich fajnych książek, bo mam swoje kocie życie i kocie sprawy. Władza nad światem sama się nie przejmie. No dobra, ale produkowanie tutaj słów, też w tym nie pomoże, tak więc lista.</p>
<h2 id="dobre-książki-do-js">Dobre książki do JS:</h2>
<ul>
<li>Seria <a href="https://github.com/getify/You-Dont-Know-JS">You Don’t know JS</a> - Kyle Simpson to człowiek, którego nie trzeba nikomu przedstawiać. Jeśli tobie trzeba, to spójrz <a href="http://letmegooglethat.com/?q=Kyle+Simpson">tutaj</a>. Niemniej seria dość głośna, w poprzednim roku przetłumaczona i wydana po Polsku - dostępna za darmo w sieci. Cudowne, prawda? Moim zdaniem naprawdę solidna dawka wiedzy o tym języku i różnych jego dziwactwach.</li>
<li>Ten sam autor popełnił ostatnio książkę o programowaniu funcyjnym, także dostępną na <a href="https://github.com/getify/Functional-Light-JS">GitHubie</a>. Dla fanów tego paradygmatu z pewnością niezła gratka.</li>
<li>Jedna z pierwszych książek tego typu jakie mi wpadły w ręce. <a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/">Learning JavaScript Design Patterns</a>, uczy nas o wzorcach projektowych i dobrych praktykach w kodowaniu. Niestety nie obejmuje standardu ECMA6, ale myślę, że w dalszym ciągu całkiem sporo można wyciągnąć z lektury tego zasobu.</li>
<li><a href="http://eloquentjavascript.net/">Eloquent JavaScript</a> - Kolejna pozycja odnośnie JS-a wypełniona fajnymi informacjami. Wydaje mi się, że warto ją przeczytać przed YDKJS, żeby nie być przytłoczonym ilością informacji.</li>
<li>Książka, której nie mogło zabraknąć na tym blogu. <a href="http://jsforcats.com/">JavaScript for Cats</a> - Pięknie ilustronawy, dostępny online podręcznik dla początkujących kotów. Myślę, że fajna opcja dla bardzo początkujących.</li>
<li>A dla spragnionych nowinek książka kolejnej JS-owej gwiazdy, czyli Dr Axel Rauschmayer i jego <a href="http://exploringjs.com/es2016-es2017/index.html">Exploring ES2016 and ES2017</a>. Fajna opcja dla wszystkich patrzących w przyszłość.</li>
</ul>
<p>Ode mnie to tyle. Jeśli macie jakieś jeszcze propozycje, to śmiało zgłaszać je w komentarzach. Co jakiś czas być może uzupełnię listę. I pamiętaj o wypiciu mleczka. Miau!</p>
Jak dogadać się z pszczołami?2017-03-15T09:21:27+01:002017-03-15T09:21:27+01:00https://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/03/15/dogadajmy-sie-z-pszczolami.htmlCześć! Przychodzi taki czas w życiu każdego kota, że musi wziąć odpowiedzialność za swoje decyzje i raz wymyślony projekt zacząć realizować. Do tych co z nieci…<p>Cześć! Przychodzi taki czas w życiu każdego kota, że musi wziąć odpowiedzialność za swoje decyzje i raz wymyślony projekt zacząć realizować. Do tych co z niecierpliwośćią czekają na commity do mojego repo - zapowiadam, że nawet jakieś są, tylko na razie na drugiej gałęzi. Spokojnie wszystko i tak pięknie spłynie do mastera. W sumie, kto by pomyślał, że praca programisty sprowadza się do siedzenia na odpowiedniej gałęzi? Dobra, koniec suchych żartów i bierzemy się do pracy.</p>
<h2 id="co-tym-razem">Co tym razem?</h2>
<p>Moja wielka i cudowna gra (wcale nie), jak powszechnie wiadomo, będzie sterowana tekstowo. Tzn. nawet nie tekstowo, tylko za pomocą specjalnych poleceń. Wiesz, językiem programowania tego bym nie nazwała, ale skryptem - już bliżej. Żeby przybliżyć ci, w czym rzecz, to może kojarzysz ideę czegoś tak cudownego, jak Logo Komeniusz? U mnie w gimnazjum tak wyglądała nauka podstaw programowania i wiem, że w wielu innych miejscach podobnie. Tutaj idea będzie podobna, tylko pszczółki są fajniejsze od żółwi, język będzie mniej rozbudowany i zamiast wolnej amerykanki - trochę konkretnych zadań i przeszkód. Brzmi prosto i przyjemnie. W grę będzie można zagrać przez przeglądarkę, a także pobrać wersję na komputer - zarówno Linux jak i Windows ( yay, multiplatformowość ). Ze względu na wygodę sterowania gra mobilna chyba nie powstanie. Może kiedyś. To tyle tytułem wstępu, mam nadzieję, że robi się ciekawie!</p>
<h2 id="tajemny-język-pszczół">Tajemny język pszczół.</h2>
<p>W tym wypadku zakładam plan minimum i jakąś bardziej rozbudowaną wersję. To tak, jakby zadanie miało mnie przerosnąć. Składnia ma być maksymalnie prosta i zwięzła, a pewne konwencje zapożyczę z lubianych przeze mnie języków programowania. W grze dostaniemy okienko do wpisywania komend, a po zatwierdzeniu całości, uruchomi się animacja tego, co chcieliśmy zrobić naszej pszczółce. Korci mnie, żeby okienko maksymalnie upodobnić do terminala, ale to się zobaczy, czy pomysł nie schowa się za tysiącem innych.</p>
<h3 id="wersja-podstawowa">Wersja podstawowa</h3>
<ul>
<li><strong>go</strong> - przemieści pszczółkę jedną jednoskę do przodu</li>
<li><strong>left</strong> - obróci w lewo o 90 stopni</li>
<li><strong>right</strong> - obróci w prawo o 90 stopni</li>
<li><strong>*X</strong> - zwielokrotni nam akcję, gdzie X to jakaś liczba naturalna. Przykładowo: <code class="highlighter-rouge">left*2</code> obróci nam pszczółkę o 180 stopni (takie nazad), myślę, że jest to w miarę jasne</li>
<li><strong>is</strong> - przypisanie wartości do jakiejś nazwy - zmiennej np.: <code class="highlighter-rouge">n is 2</code></li>
<li>dodawanie i odejmowanie wartości liczbowej</li>
</ul>
<h3 id="a-co-jeśli-jakimś-cudem-się-to-uda">A co jeśli jakimś cudem się to uda?</h3>
<p>Wtedy rozszerzę o jeszcze kilk bardziej skomplikowanych poleceń i akcji. Mam w zamyśle jakąś instrukcję warunkową, możliwość jakiegoś prostego atakowania przeszkód i wrogów, na pewno to kiedyś rozwinę, niemniej jednak, nie wiem, czy ta wiekopomna chwila nastanie podczas trwania konkursu. Tak w ogóle, to kto jest za tym, żeby pszczoła strzelała laserami z oczu ^^? To wszystko czywiście będzie miało wpływ na samą rozgrywkę, ale raczej na wyższych poziomach.</p>
<h2 id="i-to-wszystko">I to wszystko?</h2>
<p>Przecież mówiłam, że będzie prosto. Ale spokojnie, będzie się trzeba przygotować na sporo ograniczeń. Mam już kilka wstępnych założeń, co nie jest tak całkiem bez sensu.</p>
<ul>
<li>Liczby będą wskazywały liczbę powtórzeń danego kroku, więc poruszamy się tylko w zbiorze liczb naturalnych. Więc nie zadziała jeśli wpiszemy go*-5 (nie, pszółki nie latają tyłem)</li>
<li>Trzeba wymyślić, jak punktować dane rozwiązanie. To znaczy, na początku nie będzie ich dużo, ale przecież razem z coraz większą komplikacją zagadek do rozwiązania, liczba możliwych rozwiązań zwiększa się. Tu muszę wymyślić, jakiś tajemny algorytm.</li>
<li>Zastanawiam się, czy konkretnych poleceń nie dodawać stopniowo po przejściu określonej liczby etapów. Wydaje mi się, że mniejszym problemem będzie wtedy składnia poleceń. Chodzi tu przecież o rozwiązanie problemów.</li>
</ul>
<p>To chyba na razie tyle. Jak już mówiłam projekt chodził mi po głowie już od jakiegoś czasu. Był próbą odpowiedzenia na pytanie, czym jest programowanie, czym zajmuje się programista, a także może się okazać próbą zachęcenia ludzi, którzy z programowniem nie mieli do czynienia i nie czują tego. Na takich abstrakcyjnych przykładach udawało mi się uczyć ludzi podstaw programowania. Ponoć zrozumieli! A nawet zaliczali przedmioty na studiach. A tobie jak się podoba taki pomysł? Wypowiesz się? Wiosna przyszła, słonko świeci, ale nie przezięb się!</p>
<p>Trzymaj się! Miau!</p>
Top 10 przydatnych wtyczek do AtomaKot Źródłowy2017-03-12T00:21:27+01:002017-03-12T00:21:27+01:00https://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/03/12/10-najbardziej-przydatnych-wtyczek-do-atoma.htmlCześć! To znowu ja. Ten tydzień trochę bardziej leniwy. Po prostu zajmuję się jeszcze uczelnią i tymi projektami, które są mi niezbędne, żeby te studia jakoś p…<p>Cześć! To znowu ja. Ten tydzień trochę bardziej leniwy. Po prostu zajmuję się jeszcze uczelnią i tymi projektami, które są mi niezbędne, żeby te studia jakoś przeżyć. Ciężkie jest życie kota. Ale to nie powód, żeby się poddawać. Kot staje przed lustrem, maluje barwy wojenne i staje do walki z chorobą niechcianych misiów. Dzisiaj napiszę wam jeszcze, co włożyłam do edytora Atom, że pracuję na nim z przyjemnością. Ogólnie jest to bardzo przyjemny edytor, ale do developmentu warto go przystosować. Oczywiście będzie to lista moja, całkowicie kocia - jeśli lubisz coś innego, to trudno. Nikt nie jest idealny. Kolejność też nie ma znaczenia. Ja nie jestem zbyt uporządkowana, więc ranking też nie musi być.</p>
<h2 id="emmet-atom">emmet-atom</h2>
<p>Na początek wtyczka bardzo znana i lubiana. Tak mi się przynajmniej wydaje. Znacznie przyspiesza pisanie dokumentów HTML i to nawet bardziej skomplikowanych konstrukcji. Nie będę mówiła, jak to się wszystko odbywa, tylko poprowadzę do repozytorium <a href="https://github.com/emmetio/emmet-atom">wtyczki</a>. Wszystkie kocie dema są w ten sposób pisane, żeby było szybciej. A resztę czasu przeznaczam na spanie i rozmowy z ciekawymi ludźmi.</p>
<h2 id="auto-save-on-idle">auto-save-on-idle</h2>
<p>Zupełnie mała wtyczka, która robi tylko jedną rzecz, ale za to jak fajnie. Małe, a cieszy - zupełnie jak cukierki czekoladowe. Ta prosta czynność, to zapisywanie naszego dokumentu w 1.5 sekundy po tym, kiedy przestaniemy go edytować. Proste, logiczne, kochane. Przy moim roztrzepaniu zmniejsza poziom irytacji, że coś nie zostało zapisane i nie widać zmian. Wtyczka dość nowa i jeszcze mało popularna, ale mnie ujęła za serduszko. Link do <a href="https://github.com/hdsc/atom-auto-save-on-idle">repo</a>.</p>
<h2 id="atom-live-server">atom-live-server</h2>
<p>Kolejne rozszerzenie, które przyda się typowo przy front-endzie. Zdarza mi się pisać projekt po kawałku i co chwilę sprawdzać postępy. Nie dość, że muszę pilnować, żeby zapisywać pliki, to jeszcze odświeżać okno przeglądarki. Już nie muszę! Piszę kod - przełączam się na okno z przeglądarką i obserwuję zmiany. Lubię jak rzeczy robią się same, a ja zajmę się czymś, do czego naprawdę jestem stworzona. Napiszę kiedyś najbardziej genialny kod na świecie. A tymczasem zapodam ci link do tej wspaniałej wtyczki na <a href="https://github.com/jas-chen/atom-live-server">GitHubie</a>.</p>
<h2 id="platformio-ide-terminal">platformio-ide-terminal</h2>
<p>Mówiłam już, że bez konsoli wbudowanej w IDE czuję się jak bez ręki. A bez kociej łapki źle się pisze kod. A skoro lubię pisać kod i to obiema łapkami, to potrzebne mi takie fajne narzędzie. To była pierwsza wtyczka, jaką doinstalowałam. To też chyba przesądziło pomiędzy Atomem a Bracketsem. Chyba nie muszę za dużo tłumaczyć - na dole okna wyświetla mi się terminal tekstowy ze ścieżką do aktualnego folderu. Niby takie proste, ale naprawdę mi bardzo ułatwia pracę. Nie przedłużając - <a href="https://github.com/platformio/platformio-atom-ide-terminal">link</a>.</p>
<h2 id="atom-beautify">atom-beautify</h2>
<p>Paczka, która pozwoli zwiększyć czytelność naszego kodu. Poustawia wcięcia i bardzo szybko jej podzękujemy - np. gdy za tydzień będziemy przeglądać własny kod, albo gdy ktoś będzie chciał zobaczyć nasz. Przydatne narzędzie, znane wszystkim i chyba nie trzeba go będzie przedstawiać szerzej. Ale <a href="https://github.com/Glavin001/atom-beautify">link</a> do repo zostawię.</p>
<h2 id="color-picker">color-picker</h2>
<p>Narzędzie przydatne szczególnie przypisaniu CSS - moja przygoda z nim jest krótka, bo zazwyczaj korzystam z jakiejś gotowej palety, ale potwierdzam - przydaje się, chociażby do podejrzenia danego koloru. Bardzo szeroko znane, więc po prostu link do <a href="https://github.com/thomaslindstrom/color-picker">repo</a>.</p>
<h2 id="javascript-snippets">javascript-snippets</h2>
<p>Wtyczka podobna do emmet, ale działająca typowo na kodzie js i WEB API. Pozwala na szybkie tworzenie kodu w JS. Jak każda teg typu, trzeba się oswoić ze składnią, ale potem produktywność wreszcie wchodzi na tryb powyżej zera. Niekoniecznie dla bardzo początkujących, ale ciekawa opcja. Chcesz wiedzieć więcej? Bądź grzecznym kotem i kliknij <a href="https://github.com/zenorocha/atom-javascript-snippets">tutaj</a>.</p>
<h2 id="linter-eslint">linter-eslint</h2>
<p>Fajna opcja dla tych, którzy korzystają z esLinta. O jakość kodu trzeba dbać, więc koty zazwyczaj korzystają. Jeśli potrzebujesz innego lintera, to ten sam autor ma mnóstwo wtyczek w swoich repozytoriach. Dodatek działa w momencie, gdy masz zainicjowany plik config dla esLinta. Innych nie sprawdzałam, bo ten jest dla mnie wystarczający. Ale tym razem link do wszystkich <a href="https://github.com/AtomLinter">repozytoriów</a> - żebyś znalazł coś dla siebie.</p>
<h2 id="markdown-writer">markdown-writer</h2>
<p>Wtyczka przydatna między innymi dlatego, że prowadzę bloga na Jekyllu i wszystkie posty są w formacie MD. Wtyczka pozwala na szybsze pisanie dokumentów, a do tego ma wbudowany podgląd twojego dokumentu. Dzięki temu widzę od razu, jak mniej więcej post będzie wyglądał po publikacji, co bardzo ułatwia np. wyłapanie błędów. Jeśli coś wrzucamy na GitHub to przydałoby się też pisać kawałek dokumentacji w README. Zastosowań jest wiele, tak czy inaczej - leci <a href="https://github.com/zhuochun/md-writer">link</a>.</p>
<h2 id="nyancat">nyancat</h2>
<p>Znacie już moją filozofię? Wszystko ma więcej sensu, jeśli wsadzimy tam kota. A już na pewno open-sourcowego kociego celebrytę. Co robi ten dodatek? Wstawia nam kota na dolnym pasku, wraz z paskiem postępu w formie tęczy. Jeśli przeglądamy plik z dużą ilością linii, to tęcza się wydłuża wraz z naszym postępem. Taki miły akcent, w sumie do niczego nikomu nie potrzebny. Leśne licho doniosło, że Emacs ma podobną funkcjonalność. Jeśli też tak chcesz, to zapraszam do <a href="https://github.com/dz/atom-nyancat">repozytorium</a>.</p>
<p>To jest moja lista. Korzystam z tego na codzień i całkiem dobrze mi się żyje. Jeśli używasz czegoś innego i dobrze ci z tym, to gratulacje! Jeśli dobrze ci się korzysta z atoma i dowiedziałeś się o jakimś nowym narzędziu, które poprawi jakość twojej pracy, to też się bardzo cieszę. Ogólnie to nie chcę brać udziału w przepychankach, który edytor jest najlepszy i dlaczego twój, bo na to szkoda czasu. Może zamiast się kłócić, ty schowasz topór wojenny, ja pazurki i pokodujemy coś razem?</p>
Tworzymy środowisko pracy.2017-03-09T00:21:27+01:002017-03-09T00:21:27+01:00https://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/03/09/set-up-environment.htmlDobrze, czas w końcu zakasać rękawy i zrobić coś w kierunku projektu, oprócz prostego udawania, że ma się o czymś pojęcie. Bo skoro jeszcze tryb Króla Juliana …<p>Dobrze, czas w końcu zakasać rękawy i zrobić coś w kierunku projektu, oprócz prostego udawania, że ma się o czymś pojęcie. Bo skoro jeszcze tryb Króla Juliana mi nie przeszedł, to musi być znak. (Dla niewtajemniczonych, tryb Króla Juliana objawia się robieniem rzeczy ze słowami: Prędko, zanim dotrze do nas, że to bez sensu). Żeby nie było jednak za kolorowo, dzisiaj jeszcze nie będzie kodu, ale wszystko, co trzeba zrobić, żeby pisało się lepiej i bardziej profesjonalnie.</p>
<p>Nad edytorem nie będę się długo rozwodzić. Dla mnie ważne, żeby miał podświetlanie składni, jakieś proste uzupełnianie, konsolę i prosty wbudowany serwer. Całą resztę gadżetów sobie zrobię z konsoli. Jako miłośnik open-source, staram się znajdować tego typu oprogramowanie do pracy. Po przetestowaniu kilku możliwości postawiłam na Atom z kilkoma wtyczkami usprawniającymi pracę. Przez jakiś czas używałam WebStorma, ale mimo wygody, próbował wpieprzać siœ w zbyt wiele rzeczy.</p>
<p>Przechodząc do rzeczy, edytor to tylko kropla w możu potrzeb. Nie bez powodu miałam na studiach taki przedmiot jak “Narzędnia Programistyczne”, gdzie przez cały semestr próbowali nam włożyć do głowy jak między innymi pisać testy jednostkowe, czy korzystać z Dev-Toolsów w przeglądarce. Ale żeby nie uprzedzać faktów - zaczynamy.</p>
<h2 id="mam-edytor-i-przeglądarkę-what-else">Mam edytor i przeglądarkę, what else?</h2>
<p>No właśnie, po co to wszystko, skoro naszym zadaniem jest pisanie kodu. Po prostu, pewne rzeczy robimy, by nasze życie jako programistów, stało się lepsze. Tylko żeby tak było, trzeba odrobiny starań i nauki nowych nawyków. Więc potrzeba trochę nowych narzędzi, by życie było piękniejsze.</p>
<p>Znasz może NodeJS? To jest środowisko uruchomieniowe dla JavaScriptu, pozwalające nam na przykład napisanie serwera www właśnie w tym języku. Okazuje się, że ma o wiele większe możliwości. Może być - wspólnie z npm - fajnym środowiskiem developerskim dla projektów w JS. Znajdziemy tam narzędzia do badania zgodności kodu ze standardami, testów jednostkowych, budowania projektu i kilku innych rzeczy. Jak zainstalować Node? Myślę, że odpowiedź znajdziesz na <a href="https://nodejs.org">stronie projektu</a>. Teraz już wiesz, dlaczego konsola w edytorze wydaje mi się rzeczą niezbędną. Poza tym nie wyobrażam sobie projektu bez kontroli wersji, w moim wypadku kochanego Gita i GitHub. Dzięki temu drugiemu w ogóle możesz czytać tego bloga, wszak GitHub Pages to najlepsze miejsce do hostowania stron opartych na Jekyllu. Mam i ja.</p>
<h2 id="zaczynamy-czyli-init">Zaczynamy, czyli init.</h2>
<p>Tworzymy sobie katalog na nasz cudowny projekt. Już widzisz oczami wyobraźni, moment w którym zmienisz świat i twoja wspaniała aplikacja, strona, czy gra podbija serca ludzkości, a twoja twarz zagości na okładce jakiegoś magazynu, jako człowieka roku. A teraz schodzimy na ziemię, bo nasz folder jest nadal pusty. Co robisz ty? Być może to samo, co ja. Ale gdy pierwszą czynność, którą wykonujesz, jest stworzenie pliku index.html i pisanie - z pewnością dowiesz się czegoś nowego.</p>
<p>Wiesz co robię ja?</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git init
git remote add origin adres_do_githuba
</code></pre></div></div>
<p>Zaczynamy od kontroli wersji. Jest niezwykle ważne z programistycznego punktu widzenia. Sam git jest projektem open-source, a jeśli chcesz wiedzieć więcej, to zapraszam do <a href="https://git-scm.com/book/en/v2">dokumentacji</a>.</p>
<p>Potem robię sobie strukturę katalogów, zazwyczaj dość prostą. Dla mnie ważne, żeby osobno były css, pliki js, testy, konfiguracja. Ogólnie chociaż w projekcie musi być jakiś porządek. Dodaję jeszcze plik o lakonicznej nazwie ‘.gitignore’. Chcesz wieszieć, po co? Chociażby IDE nam tworzy katalogi, których niekoniecznie chcielibyśmy na serwerze. Otwierasz ten plik i możesz wpisywać nazwy plików, które git ma ignorować. Teraz możemy skorzystać z magii npm. Zainicjujemy sobie projekt, a konsola zada nam kilka pytań. Spokojnie, będą proste i na część będzie już gotowa odpowiedź. Co do reszty, to warto na nie odpowiedzieć.</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm init
npm install
</code></pre></div></div>
<p>Pojawił nam się nowy katalog “node_modules”. Tutaj są wszystkie zależności naszego projektu. Widać, że można go wygenerować, w takim razie warto go dodać do .gitignore.</p>
<h2 id="instalacja-zależności">Instalacja zależności</h2>
<p>Wiele narzędzi developerskich udostępnianych jest jako paczki npm. Pełne repozytorium można przeszukać na stronie npm. Jeżeli chcesz zainstalować narzędzie do rozwijania oprogramowania, robisz to tak:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install nazwa-pakietu -save-dev
</code></pre></div></div>
<p>U mnie te pakiety to:</p>
<ul>
<li>eslint - do dbania o jakość kodu</li>
<li>browserify - do buildowania projektu - łączenia modułów w jeden</li>
<li>chai / mocha - testy jednostkowe</li>
<li>jsdoc - dokumentacja kodu</li>
</ul>
<p>To takie minimum. Zawsze można to rozbudowywać zależnie od potrzeb. I u mnie zależnie od projektu wygląda to różnie, ale wyżej opisane są prawie zawsze. Gdy zajrzysz do katalogu “node_modules”, zobaczysz tam mnóstwo podfolderów. Tam są zależności, które mają też swoje zależności, dlatego jest tego taka masa. Możesz też zajrzeć do pliku package.json. Tam jest cała konfiguracja projektu.</p>
<h2 id="automatyzacja-pracy">Automatyzacja pracy</h2>
<p>Każdy kot, a tym bardziej Kot Programista, jest zwierzęciem z natury leniwym. Przecież dla takich ludzi wymyślono komputery. One część pracy mają wykonywać za nas. Słowo klucz: automatyzacja. Napiszemy teraz kilka skryptów, żeby można było szybciej wykonywać czynności niekoniecznie ciekawe i twórcze. Otwórz plik package.json i na pewno masz tam sekcję scripts. Tam właśnie się je dopisuje. Oto lista najczęściej przeze mnie wypisywanych skryptów.</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"test": "mocha --reporter=nyan",
"lint": "eslint */**.js",
"build": "browserify js/index.js -o js/bundle.js"
</code></pre></div></div>
<p>Wydają się w miarę zrozumiałe, ale pewnie zastanawia cię ten pierwszy. Cóż to za dziwny parametr? Otóż wszystko ma więcej sensu jeśli są tam koty. Czemu testy miałyby być wyjątkiem od tej reguły. Wynik tych testów wygląda następująco:</p>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>17 -_-_-_-_-_-_-_-_-__,------,
0 -_-_-_-_-_-_-_-_-__| /\_/\
0 -_-_-_-_-_-_-_-_-_~|_( ^ .^)
-_-_-_-_-_-_-_-_-_ "" ""
17 passing (48ms)
</code></pre></div></div>
<p>Czy to nie jest urocze?</p>
<p>Jeśli chodzi o start to tyle. Nie było trudno, ani ciężko. Widzę tylko, że npm init mogłoby mieć w sobie taki jeden feature. Chciałabym móc skonfigurować sobie pattern, gdzie miałabym wpisane już zależności, skrypty, te rzeczy, z których korzystam najczęściej. No bo jeśli korzystam z eslinta, to robię to zawsze.</p>
# 50 twarzy JS: 2.Jak napisać grę w JS?2017-03-03T05:21:27+01:002017-03-03T05:21:27+01:00https://kot-zrodlowy.pl/javascript/dajsiepoznac2017/2017/03/03/50twjs-gramy-w-js.htmlCześć! Pewnie zastanawiacie się, jak napisać grę w JS. Czy to w ogóle jest możliwe? Okazuje się, że tak (w końcu to język od wszystkiego) i nawet ja sobie z ty…<p>Cześć! Pewnie zastanawiacie się, jak napisać grę w JS. Czy to w ogóle jest możliwe? Okazuje się, że tak (w końcu to język od wszystkiego) i nawet ja sobie z tym poradziłam. Jak wszyscy dobrze wiemy branża gier komputerowych ma się dobrze i rozwija się bardzo prężnie. Do mniejszych gier zazwyczaj wykorzystuje się gotowe silniki. Duże studia game developerskie zazwyczaj piszą swoje własne. Ja nie jestem aż taką masochistką, żeby pokazywać jak się pisze silnik od zera. A już na pewno nie w JS. Skoro to już ustaliliśmy, to przyszedł czas na wybranie czegoś. A wybór nie jest prosty, wystarczy spojrzeć <a href="https://github.com/bebraw/jswiki/wiki/Game-Engines">tutaj</a> lub <a href="https://html5gameengine.com/">tutaj</a>, żeby dowiedzieć się o najpopularniejszych z nich.</p>
<p>Trochę poszperałam w internetach i w oczy rzucił mi się <a href="http://phaser.io/">Phaser</a>. Wyglądał w miarę przyjeźnie i prosto, to pomyślałam “bierę”. W sumie z programowaniem gier miałam trochę wspólnego na zajęciach, ale nigdy nie robiłam tego w JS, więc można powiedzieć, że to takie pierwsze starcie. Mam nadzieję, że nie masz nic przeciwko temu, że pouczymy się trochę razem? Bo zdradzę ci taki sekret. Wiem sporo, ale nie wszystko i cały czas się uczę. Ale ale, dosyć gadania, siadajmy do kodowania! (Czy teraz można powiedzieć, że kot wielkim poetą był?)</p>
<h2 id="co-zrobimy">Co zrobimy?</h2>
<p>To ma być jak zwykle prosty przykład (tylko nieliczni wiedzą, jak dużo czasu zajmuje zakodowanie go od zera, napisanie samego postu, to przy tym pikuś). Takich gierek jest sporo, a że pong mi się już trochę znudził, to postanowiłam napisać kopię Arkanoida. Mamy paletkę, piłkę i musimy zniknąć wszystkie klocki. Podłoga to lawa, więc jak nam piłka spadnie trzy razy, to przegrywamy. Proste jak drut.</p>
<ul>
<li>Na początek będziemy potrzebować trochę grafik. Można je pobrać z internetu, ale ja postawiłam na własną radosną twórczość. Żeby gra jako tako wyglądała, to potrzebujemy tła, paletki, klocka, piłeczki. Jakie one będą - niech najdziksze zakamarki twojej wyobraźni ci podpowiedzą.</li>
<li>W programowaniu gier można się spotkać z terminem ‘sprite’. Oznacza on każdy obiekt, który wsadzamy do naszej gry. Przy tym przykładzie to jest oczywiście ograniczone do minimum - to samo, co grafiki i jeszcze kilka napisów, żeby było wiadomo, o co chodzi.</li>
<li>Podstawą interakcji w grach są kolizje - to jest ten moment, kiedy graficzne reprezentacje naszych obiektów na siebie nachodzą. Wtedy najczęściej w grach coś się dzieje. U nas - w naszym wspaniałym przykładzie - będzie to np. odbicie piłki od paletki.</li>
<li>Przykład będzie dość toporny, bo nie będzie animacji, ani dźwięku. Jeśli masz ciekawy pomysł na podkład dźwiękowy zawsze możesz dołożyć kawałek kodu do projektu. To w końcu Open Source.</li>
<li>Zastanawiam się po co mi ta kropka. Będzie na zapas.</li>
</ul>
<h2 id="co-ten-kod">Co ten kod?</h2>
<p>Niniejszym zaczynamy. Oczywiście najpierw potrzebujemy źródła naszego silnika. Można je pobrać z <a href="https://phaser.io/download/stable">tej strony</a> albo zainstalować przez npm i później buildować projekt. O tym, jak to zrobić, napisano <a href="https://github.com/photonstorm/phaser#building-phaser">tutaj</a>. Jeśli już masz z czego korzystać, to możemy zacząć się bawić. Potrzebujesz prosty szablon HTML. Zakładam, że wiesz, jak to zrobić, więc przechodzę od razu do JS-a.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">game</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Game</span><span class="p">(</span><span class="mi">800</span><span class="p">,</span> <span class="mi">600</span><span class="p">,</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">AUTO</span><span class="p">,</span> <span class="s1">'game'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">preload</span><span class="p">:</span> <span class="nx">preload</span><span class="p">,</span>
<span class="na">create</span><span class="p">:</span> <span class="nx">create</span><span class="p">,</span>
<span class="na">update</span><span class="p">:</span> <span class="nx">update</span>
<span class="p">});</span>
</code></pre></div></div>
<p>Te kilka linijek, to właściwie cała konfiguracja okna naszej gry. Ale teraz po kolei, co się dzieje z tymi parametrami:</p>
<ol>
<li>Szerokość okna gry - wyrażona w pikselach</li>
<li>Wysokość okna gry - wyrażona w pikselach</li>
<li>Sposób renderowania gry. Najkorzystniejszy jest właśnie AUTO - sam dostosowuje się do przeglądarki i wybiera najlepszy sposób renderowania.</li>
<li>Id rodzica - wartość atrybutu id elementu HTML, który ma przechowywać naszą grę. Jeśli zostawisz puste, element zostanie dodany pod koniec body.</li>
<li>Trzy główne funkcje, na których będzie się opierać nasza gra.</li>
</ol>
<ul>
<li>preload - wszystko, co ma się stać przed załadowaniem gry</li>
<li>create - początkowy stan wyrenderowanej aplikacji</li>
<li>reload - wszystkie zmiany jakie zachodzą w aplikacji</li>
</ul>
<p>Oczywiście dalej podstawowa struktura aplikacji wygląda następująco.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">preload</span><span class="p">()</span> <span class="p">{</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">create</span><span class="p">()</span> <span class="p">{</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">update</span><span class="p">()</span> <span class="p">{</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Wadą Phasera jest to, że przykładowe apki są napisane dość nieładnie. Pełno zmiennych w globalnym scope, a jak ktoś wydzieli sobie dodatkowe funkcje, zamiast robić spagetti - to już jest gość i magik programowania.</p>
<h2 id="aplikacja-musi-się-przygotować">Aplikacja musi się przygotować</h2>
<p>Czyli bierzemy na tapetę funkcję preload. Co się musi stać, zanim te wszystkie wspaniałe przygody zostaną ukazane naszemu graczowi? Podpowiem ci, przydałoby się załadować wszystkie grafiki.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">game</span><span class="p">.</span><span class="nx">load</span><span class="p">.</span><span class="nx">image</span><span class="p">(</span><span class="s1">'player'</span><span class="p">,</span> <span class="s1">'assets/player.png'</span><span class="p">);</span>
</code></pre></div></div>
<p>Tak wygląda przykładowa funkcja do załadowania grafiki. Pierwszy parametr to nazwa assetu, drugi to ścieżka do niego. Nie ma tu żadnej filozofii. W ten sposób trzeba dodać każdą grafikę. To byłoby na tyle, jeśli chodzi o preload.</p>
<h2 id="do-grania-gotowi-start">Do grania, gotowi, start!</h2>
<p>Funkcja create służy nam do stworzenia całej sceny. Tu już będzie trochę więcej pracy. To tutaj określamy co nam się pokaże na ekranie, jak będzie działać, itp.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">game</span><span class="p">.</span><span class="nx">physics</span><span class="p">.</span><span class="nx">startSystem</span><span class="p">(</span><span class="nx">Phaser</span><span class="p">.</span><span class="nx">Physics</span><span class="p">.</span><span class="nx">ARCADE</span><span class="p">);</span>
<span class="nx">game</span><span class="p">.</span><span class="nx">physics</span><span class="p">.</span><span class="nx">arcade</span><span class="p">.</span><span class="nx">checkCollision</span><span class="p">.</span><span class="nx">down</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">game</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">sprite</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="s1">'background'</span><span class="p">);</span>
</code></pre></div></div>
<p>To taka ogólna konfiguracja.</p>
<ol>
<li>Ustalenie rodzaju fizyki, jaki ma działać w grze. Są cztery możliwe i ten najprostszy do ogarnięcia. O reszcie możesz doczytać w dokumentacji.</li>
<li>Odblokowanie dolnej ściany okna gry. Gdybyśmy tego nie wpisali, to nasza piłka odijałaby się bez końca. A tak zacznie spadać w dół i można ją złapać.</li>
<li>Dodanie tła - dwa pierwsze argumenty to pozycja początku tła. Trzeci to nazwa assetu. Bez tego standardowo tło jest czarne.</li>
</ol>
<p>Teraz przyszedł czas na pojedynczy asset. Weźmy na przykład taką piłkę.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">ball</span> <span class="o">=</span> <span class="nx">game</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">sprite</span><span class="p">(</span><span class="nx">game</span><span class="p">.</span><span class="nx">world</span><span class="p">.</span><span class="nx">centerX</span><span class="p">,</span> <span class="nx">player</span><span class="p">.</span><span class="nx">y</span> <span class="o">-</span> <span class="mi">22</span><span class="p">,</span> <span class="s1">'ball'</span><span class="p">);</span>
<span class="nx">ball</span><span class="p">.</span><span class="nx">anchor</span><span class="p">.</span><span class="nx">setTo</span><span class="p">(</span><span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">);</span>
<span class="nx">game</span><span class="p">.</span><span class="nx">physics</span><span class="p">.</span><span class="nx">arcade</span><span class="p">.</span><span class="nx">enable</span><span class="p">(</span><span class="nx">ball</span><span class="p">);</span>
<span class="nx">ball</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">collideWorldBounds</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">ball</span><span class="p">.</span><span class="nx">checkWorldBounds</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">ball</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">bounce</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">ball</span><span class="p">.</span><span class="nx">events</span><span class="p">.</span><span class="nx">onOutOfBounds</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">death</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
</code></pre></div></div>
<p>To też nie wygląda zbyt skomplikowanie. Zauważ, że pierwsza linijka jest taka sama jak przy dodawaniu tła. Przypadek? Nie sądzę! Dalej przypisujemy punkt zakotwiczenia (moje własne tłumczenie), czyli to, od którego elementu ma liczyć pozycję. Udostępniamy naszej piłce prawa fizyki, po czym każemy jej mieścić się w ramach naszego świata. To tak, żeby nie wyleciała w kosmos. Przedostania linijka to, siła odbicia - jeśli damy jeden piłka odbija się z tą samą energią, mniej - piłka zwolni, więcej - przyspieszy. Ostatnim poleceniem obsługujemy zdarzenie ucieczki piłki w kosmos.</p>
<p>Paletkę robi się mniej więcej tak samo. Znacznie ciekawsze są cegiełki, które będziemy zbijać. Mianowicie dodaje się je jako całą grupę, a potem obsługuje wspólnie.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">bricks</span> <span class="o">=</span> <span class="nx">game</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">group</span><span class="p">();</span>
<span class="nx">bricks</span><span class="p">.</span><span class="nx">enableBody</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">11</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o"><</span> <span class="mi">5</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">brick</span> <span class="o">=</span> <span class="nx">bricks</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="nx">i</span> <span class="o">*</span> <span class="mi">70</span> <span class="o">+</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">40</span> <span class="o">+</span> <span class="nx">j</span> <span class="o">*</span> <span class="mi">40</span><span class="p">,</span> <span class="s1">'brick'</span><span class="p">);</span>
<span class="nx">brick</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">bounce</span><span class="p">.</span><span class="kd">set</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
<span class="nx">brick</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">immovable</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">game</span><span class="p">.</span><span class="nx">physics</span><span class="p">.</span><span class="nx">arcade</span><span class="p">.</span><span class="nx">enable</span><span class="p">(</span><span class="nx">bricks</span><span class="p">);</span>
</code></pre></div></div>
<p>Tak wygląda dodawanie grupy. Jak widać, fizyka jest dodana wspólnie. Zastanawiać może jednak druga linijka. Czym jest to ciało? To po prostu materialna strona naszych assetów. Jeżeli dodamy je jako grupę, to trzeba tak zrobić. Zostało nam jeszcze dodanie tekstów i obsługa kliknięcia myszką.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">startText</span> <span class="o">=</span> <span class="nx">game</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">game</span><span class="p">.</span><span class="nx">world</span><span class="p">.</span><span class="nx">centerX</span><span class="p">,</span> <span class="nx">game</span><span class="p">.</span><span class="nx">world</span><span class="p">.</span><span class="nx">centerY</span><span class="p">,</span> <span class="s1">'click To Start'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">fontSize</span><span class="p">:</span> <span class="s1">'50px'</span><span class="p">,</span>
<span class="na">fill</span><span class="p">:</span> <span class="s1">'#fff'</span>
<span class="p">});</span>
<span class="nx">startText</span><span class="p">.</span><span class="nx">anchor</span><span class="p">.</span><span class="nx">setTo</span><span class="p">(</span><span class="mf">0.5</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">);</span>
<span class="nx">game</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">onDown</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">release</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="ale-tu-się-nic-nie-dzieje">Ale tu się nic nie dzieje.</h2>
<p>Jeszcze nie, bo na razie ustaliliśmy, co mamy narysować. Dopiero funkcja update zakłada jakieś działania. Kod aplikacji ma w sumie zaimplementowane dwa sterowania:</p>
<ul>
<li>Paletka śledzi ruch myszki</li>
<li>Poruszanie paletki za pomocą strzałek.</li>
</ul>
<p>Odkomentowane jest to pierwsze, bo łatwiej wtedy zapanować nad prędkością. Ale jeśli chcesz możesz się pobawić też drugim przykładem. Jeśli weźmiemy na tapetę to pierwsze, to kod mógłby wyglądać tak:</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">player</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">game</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">x</span><span class="p">;</span>
</code></pre></div></div>
<p>Nie wolno nam jednak zapomnieć o jednym szczególe. Ustawiliśmy zakotwiczenie na środek naszej paletki. Może więc sie tak zdarzyć, że nasza paletka będzie nam trochę znikać za ścianą. Można sobie tak z tym poradzić.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">if</span> <span class="p">(</span><span class="nx">player</span><span class="p">.</span><span class="nx">x</span> <span class="o"><</span> <span class="mi">75</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">player</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="mi">75</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">player</span><span class="p">.</span><span class="nx">x</span> <span class="o">></span> <span class="nx">game</span><span class="p">.</span><span class="nx">width</span> <span class="o">-</span> <span class="mi">75</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">player</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">game</span><span class="p">.</span><span class="nx">width</span> <span class="o">-</span> <span class="mi">75</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>I teraz najważniejsze - kolizje. Musimy podać jakie dwa elementy chcemy ze sobą skolidować. Potem podajemy funkcję, która ma coś z takimi obiektami zrobić.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">game</span><span class="p">.</span><span class="nx">physics</span><span class="p">.</span><span class="nx">arcade</span><span class="p">.</span><span class="nx">collide</span><span class="p">(</span><span class="nx">ball</span><span class="p">,</span> <span class="nx">player</span><span class="p">,</span> <span class="nx">collidePlatform</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
</code></pre></div></div>
<p>Ważne jest, żeby paramtetry callbacku napisać w tej samej kolejności w jakiej podaliśmy pierwsze dwa do kolizji. Bo może się dziać coś dziwnego. Np. po uderzeniu piłki w klocek, piłka staje, a to klocek odlatuje. Potwierdzone info.</p>
<p>W sumie to tyle z ważnych rzeczy. Pełny kod znajdziecie, jak zawsze, na moim <a href="https://github.com/korneliakobiela/sample-arkanoid/tree/v1.0.0">GitHubie</a>. Można też ściągnąć i po prostu zagrać. Pochwalcie się potem wynikami. Tylko wtedy bez oszustw. Powodzenia.</p>
<p>Miau!</p>
Gra o pszczołach. Co to będzie za projekt?2017-03-02T00:21:27+01:002017-03-02T00:21:27+01:00https://kot-zrodlowy.pl/dajsiepoznac2017/javascript/2017/03/02/bee-programmer-gra-o-pszczolach.htmlNastał wreszcie ten czas. Konkurs “Daj się poznać 2017” oficjalnie został rozpoczęty. Jeszcze do 13 marca można się zapisać, więc młody kocie - zachęcam do udz…<p>Nastał wreszcie ten czas. Konkurs “Daj się poznać 2017” oficjalnie został rozpoczęty. Jeszcze do 13 marca można się zapisać, więc młody kocie - zachęcam do udziału, żebyś potem nie żałował. Czeka na ciebie wielka przygoda. To tak w ramach wstępu, ale ja dzisiaj o czym innym.</p>
<h2 id="co-ja-zrobię">Co ja zrobię?</h2>
<p>Być może was to ciekawi, jaki będzie temat mojego projektu. Tak zakładam, skoro już to czytasz. Chcę zrealizować projekt, który po mojej kociej głowie chodził już od jakiegoś czasu. Będzie to gra napisana w JS. Jeszcze nie wiem, jaka to dokładnie będzie forma: desktop, gra przeglądarkowa, czy mobilna. W końcu to JS - można napisać wszystko, więc portowanie tej gry to tylko kwestia zastosowania odpowiednich frameworków.</p>
<p>Tematem gry zostanie przedstawiciel bardzo sympatycznych i uroczych zwierzątek - mała pszczółka (Apis mellifica L.). Nasze zadanie też będzie dość proste, zaprowadzić pszczółkę od kwiatka do ula. Proste? Na pierwszych etapach tak, ale później już może nie być tak kolorowo. Z każdym poziomem ma być coraz trudniej, bo przecież o to chodzi w poziomach.</p>
<h2 id="no-ok-ale-jak-pomóc-tej-biednej-pszczółce">No ok, ale jak pomóc tej biednej pszczółce?</h2>
<p>Czyli słówko o sterowaniu grą, bo myślę, że ono jest tu jedną z mocniejszych stron. Pszczółka będzie się słuchać poleceń wpisywanych przez użytkownika i gracza. Polecenia z założenia mają składać się z jednego słowa i być dość proste do zapamiętania. W zamyśle mojej dziwnej główki ma to przypominać programowanie pszczółki. Pomysł wydaje mi się fajny, a co z tego wyjdzie, to zobaczymy. Z większej ilości szczegółów, to mogę pokazać grafikę koncepcyjną. Machnęłam kiedyś, czekając na autobus - rysowane telefonem, dlatego jakość nie powala.</p>
<p><img src="/img/bee.png" alt="Pszczoła - pixel art" /></p>
<p>Nie jestem zbyt zdolnym grafikiem, a tego typu pixel art jest do ogarnięcia. Poza tym jest od jakiegoś czasu z powrotem modny. Będzie zabawnie, ale jeszcze nie mówię, że w połowie nie zmienię koncepcji graficznej. W ogóle jeszcze sporo rzeczy jest niewiadomych.</p>
<h3 id="co-jest-do-zrobienia">Co jest do zrobienia?</h3>
<p>W tym miejscu mogłabym skorzystać wreszcie z jakiejś todo listy, ale z wami też się chyba podzielę. Będzie łatwiej mi się rozliczać z pracy. A tej jest co niemiara. Ale po kolei (używając nieuporządkowanej listy).</p>
<ul>
<li>Wymyślenie dokładnego języka poleceń</li>
<li>Napisanie interpretera tegowoż.</li>
<li>Napisanie ogólnego poruszania się pszczoły</li>
<li>Narysowanie grafik</li>
<li>Napisanie kolejnych poziomów</li>
<li>Napisanie interfejsu użytkownika.</li>
</ul>
<p>A to tylko robota czysto developerska. Nie zliczę pewnie ilości testów, zmian koncepcji. Chociaż obiecuję się pochwalić, kiedy postanowię zaorać cały kod po raz dziesiąty. W takiej formie, nie do końca widzę grę, jako projekt mobilny - wprowadzanie danych byłoby zbyt trudne. Ale jeszcze zobaczymy. Oczywiście, bierzący postęp będę raportować tutaj, a także można go podejrzeć w repozytorium <a href="https://github.com/korneliakobiela/bee-programmer">GitHub</a></p>
<p>Ja daję się poznać, a ty? Zrób mi konkurencję! Miau!</p>
Nie chcesz zainstalować Kali Linux na swoim komputerze.2017-02-04T19:01:27+01:002017-02-04T19:01:27+01:00https://kot-zrodlowy.pl/linux/dajsiepoznac2017/2017/02/04/nie-chcesz-instalowac-kali.htmlDzisiejszy post narodził się z pewnej potrzeby. Jestem osobą aktywną w sieci i społecznościach developerów. Niemal codziennie stykam się tam z osobami, które p…<p>Dzisiejszy post narodził się z pewnej potrzeby. Jestem osobą aktywną w sieci i społecznościach developerów. Niemal codziennie stykam się tam z osobami, które proszą o pomoc. Z chęcią udzielam tej pomocy i odpowiadam na pytania mniej doświadczonych kolegów. W końcu moje doświadczenie nie urosło jeszcze do rozmiarów potwora z szafy i pamiętam jak to jest być zielonym w jakiejś dziedzinie.</p>
<p>Od jakiegoś czasu dzieją się jednak niepokojące rzeczy. Rzesze młodych adeptów zaklęć linuksowych zanim jeszcze nauczą się wywoływać moc Superkrowy (kiedyś wam o tym napiszę, chyba że wyguglujecie) instalują na swoich maszynach Kali Linux. I to wprost na dysku! Ja spróbuję przekonać takie kocięta, które nie wiedzą, co czynią, do odwrotu z tej ścieżki. Mniej więcej rozumiem, co takimi jednostkami kieruje. Chcą zostać “hakerami”, nauczyć się testów penetracyjnych lub po prostu pochwalić się przed znajomymi. Żaden z tych powodów nie jest dobry, aby zainstalować tę dystrybucję bezpośrednio na dysku swojego komputera.</p>
<h3 id="każda-dystrybucja-ma-swoje-zastosowanie">Każda dystrybucja ma swoje zastosowanie</h3>
<p>Zacznę od przykładu. Masz sobie puszkę z kukurydzą lub inną zawartością. Obojętnie, chodzi o taką puszkę, do której potrzeba otwieracza. Czego użyjesz do jej otwarcia: otwieracza, wiertarki udarowej, psiej obroży czy encyklopedii. Zbyt abstrakcyjnie? Z Linuksem jest podobnie. Jest on wykorzystywany jako narzędzie w bardzo wielu różnych sytuacjach i urządzeniach. I każde zastosowanie ma swoją dedykowaną dystrybucję lub grupę dystrybucji. Inne distro będzie na serwerze www, inne w routerze, na twoim laptopie, a jeszcze inne jest narzędziem do audytów bezpieczeństwa. Kali jest dedykowanym systemem do tego ostatniego. Nie chcesz go zatem na swoim laptopie. Tak samo jak słoika nie otwierasz za pomocą dźwigu.</p>
<h3 id="linuks-to-linuks--i-po-co-drążyć-temat">Linuks to Linuks … i po co drążyć temat</h3>
<p>I tak i nie. No jasne z podstaw to konsola jest zasadniczo ta sama. Pamiętaj tylko, że aby wygodnie pracować z jakimkolwiek systemem potrzebujesz konfiguracji i pewnych udogodnień. Jeśli Kali ma być twoim pierwszym starciem z Linuksem, to nie wróżę długiej przyjaźni, a tylko szybki i burzliwy romans. Uważaj tylko, żeby komputer za okno nie wyleciał.</p>
<p>Na początku i tak masz się zająć konsolą i nauką jej obsługi. Bez tego ani rusz. I po prostu masz się nauczyć obsługi podstawowych narzędzi, a nie użerać z tym, że nie działa ci wi-fi, bo brak sterowników dla twojej dystrybucji. Kali ma zmienione jądro i ograniczony zestaw pakietów. I czasami pewne rzeczy po prostu nie będą z nim działać. Co jeszcze odróżnia tę mityczną dystrybucję? Używa ciągle konta z uprawnieniami roota. Wiem, że na InnymPopularnymSystemie robi się tak cały czas, ale to materiał na oddzielną historię.</p>
<h3 id="bezpieczeństwo-przede-wszystkim">Bezpieczeństwo przede wszystkim</h3>
<p>Standardowo w systemach rodziny Linux na co dzień posługujesz się ograniczonymi uprawnieniami na swoim koncie użytkownika. To dla bezpieczeństwa - taka filozofia, jeśli nie musisz z czegoś korzystać, to tego nie robisz. Hasło admina jest ci potrzebne tylko raz na jakiś czas, więc tylko wtedy z niego korzystasz. To teraz wyobraź sobie, że ktoś włamuje się na twoje konto. Nie mając hasła admina, to tak naprawdę nic nie zdziała. A na Kali jesteś adminem z automatu. To tylko krok od tego, żebu powykradać dane z komputera, z którego korzystasz. Po więcej mięska zapraszam do <a href="http://docs.kali.org/introduction/should-i-use-kali-linux">dokumentacji</a>.</p>
<h3 id="co-robić">Co robić?</h3>
<p>Jeśli mimo wszystko chcesz się nauczyć obsługi właśnie tej dystrybucji, to masz moim zdaniem dwa wyjścia. Albo tworzysz sobie bootowalnego pendrive i odpalasz Kali jako LiveCD. System znajduje się na twoim pen-drive, i wesoło sobie z niego korzystasz. Drugi sposób, to zainstalowanie wirtualnej maszyny na swoim komputerze. Na przykład Virtual Boxa, na którym możesz przetestować sobie możliwości niemal każdego systemu, jaki ci przyjdzie do głowy. Pamiętaj, że zainstalowanie Kali i tak nie zrobi z ciebie hackera, a bez wiedzy i doświadczenia nie włamiesz się do komputera kolegi. Na razie pozdrawiam, może mleczka? Miau!</p>
No to ruszamy w drogę!2017-02-02T16:21:27+01:002017-02-02T16:21:27+01:00https://kot-zrodlowy.pl/offtop/dajsiepoznac2017/2017/02/02/no-to-ruszamy-w-droge.htmlCześć! Witam Cię na moim blogu! Ludzie zazwyczaj się witają i piszą bardzo długie posty, o tym, jakie tematy poruszą na swoim blogu i dlaczego to właśnie ich m…<h2 id="cześć">Cześć!</h2>
<p>Witam Cię na moim blogu! Ludzie zazwyczaj się witają i piszą bardzo długie posty, o tym, jakie tematy poruszą na swoim blogu i dlaczego to właśnie ich masz czytać. Mnie nie musisz, obejdzie się. No przecież cię nie zmuszę, bo jestem zajęta knuciem mojego planu przejęcia władzy nad światem. Każdy kot tak robi.</p>
<p>Ale jeśli lubisz poczytać o IT, open source, kodzie i kotach, to zapraszam, ale kocimiętki nie obiecuję. Co najmniej raz w tygodniu dowiesz się, co piszczy w moim Wielkim i Genialnym <a href="https://github.com/korneliakobiela/bee-programmer">Projekcie</a> na konkurs <a href="http://devstyle.pl/daj-sie-poznac">Daj się Poznać</a> edycja 2017. A co z resztą czasu? Skrobnę coś o kodzie, narzędziach, nowinkach. Czasem się dowiesz, co mnie wkurza, a co zachwyca.</p>
<p>Na dzisiaj wystarczy. Wypij mleczko.
Miau</p>