Hack Heroes to hackathon z okazji Code Weeka, czyli długiego tygodnia od 15. do 23. października. Więcej możecie o nim poczytać tutaj: http://apki.org/news/hack-heroes-wez-udzial-w-codeweekowym-hackathonie .

Pierwsza doba

23:53

Już od początku doby, tj. od północy do jakiejś czwartej zabrałem się za rozpoczynanie projektu. Odpalenie phpStorma, załadowanie wszystkich zależności na composerze i npm-ie. Rozrysowanie na kartce czegoś, na czym będę mógł się opierać podczas pisania i kodowania frontendu i backendu. Obmyślałem podstawowe funkcjonalności aplikacji i zabrałem się za pisanie najprostszego szkieletu backendu, żeby móc się skupić na frontendzie. Dlaczego tak? Lubię widzieć do czego piszę backend, a taki gotowy frontend motywowałby mnie do dalszego pisania. Z racji czasu na backend wybrałem Slim-a , a na frontend nic, prócz frameworka Materialize.css (który swoją drogą jest dużo słabszy niż wygląda, przez jedną dobę zdążył mi już sprawić nie jedną bolączkę).

Sama aplikacja nazywa się Wakadog . Inspirowane lekko Wakatime. Czytane łakadog , wymową podobnie do walk a dog . Do tego właśnie służyć będzie moja aplikacja, do wyprowadzania psów. Mamy na mapie obszar z markerami, które oznaczają psy, których właściciele nie mają czasu lub nie mogą z nimi wyjść i potrzebują z tym pomocy. Porównałbym to do bazy ogłoszeń, jak OLX, z ogłoszeniami psów do wzięcia na spacer. Odpłatnie czy nie, to już kwestia leżąca poza odpowiedzialnością aplikacji. Potencjalny wyprowadzacz dostaje całkiem kompletny zbiór informacji o psie oraz numer telefonu do kontaktu. Po spacerze wyprowadzacz może wystawić psu ocenę, do pięciu gwiazdek. Na dzień dzisiejszy wygląda to tak:

Mój cel na nadchodzącą noc to dokończyć podstawowe widoki we froncie, żeby móc się skupić na backendzie.

Druga doba

01:53

Formularz dodawania psiaka ukończony, jednak nie jestem specjalnie zadowolony z jego aspektów wizualnych. Cóż, jak będzie czas to się coś wymyśli.

Naciśnięcie na mapę w dowolnym miejscu tworzy marker i wpisuje kordynaty do pola poniżej. UX tego rozwiązania jest zdecydowanie do poprawy. Nie podoba mi się rozkład poszczególnych pól. Te dwie sekcje można by jakoś sensownie pod względem wizualnym zgrupować.

Narazie zostawiam frontend i zaczynam klepać pehapa. Jakieś podstawowe encje i repozytoria, jednak najpierw, biorę kartkę i długopis i rozpiszę sobie bazę danych co by później nie mieć z zaprojektowaniem relacji problemów, w końcu jest coraz późniejsza godzina w nocy.

Czwarta doba

20:02

Oj ciężko w dni szkolne; zdecydowanie mniej czasu na to przeznaczam, co widać na WakaTime (screen obok).

Wczoraj siedziałem nad Wakadog tylko jakieś półtorej godziny. Trochę czasu zajęło mi za to przygotowywanie obrazu wirtualnej maszyny z linuksem skonfigurowanym do moich potrzeb, aby jutro móc w szkole kontynuować moją pracę. Nic prócz drobnej optymalizacji, dodaniu kontrolera od landing page oraz napisaniu dwóch widoków, formularza logowania i rejestracji nie zrobiłem. Obmyślałem za to sposób, w jaki będe w Wakadog uwierzytelniał i autoryzował użytkownika. Wszystko rozpisałem na kartce, trochę pogumkowałem, popoprawiałem i ostatecznie wyszło mi to, co widać na zdjęciu w tym issue na GitLabie .

Dzisiaj natomiast wcielam w kod (hmm, ciekawy zwrot) to, co rozpisałem na kartce. Planuję skontaktować się z jednym z mentorów w celu porozmawiania na temat bezpieczeństwa pewnego rozwiązania nad którym się zastanawiam. Tyle na teraz, lecę dalej pisać.

Szósta doba

21:39

Minął dzień odkąd pisałem. Postaram się opisać co przez te dni robiłem.

Przedwczoraj udało mi się wcielić moje rozpiski w kod, z którego jestem na moment obecny zadowolony, a może i nawet dumny. Po hackathonie dopracuję go pod względem elastyczności, napiszę testy i opublikuję w oddzielnym repozytorium, żeby móc w przyszłości z niego korzystać.

Wczoraj z rana, w szkole, przez dwie lekcje implementowałem funkcjonalności formularza do logowania się. Swoją drogą pierwszy raz używałem linuksa jako systemu gościa do faktycznego developmentu i pracowało mi się całkiem przyjemnie. Postawiłem 64bitowego Debiana na Cinnamonie, jeżeli ktoś byłby ciekaw. Na iMacu 2015 27″ z przydzielonymi 4GB RAM działał bardzo dobrze.

Wieczorem zabrałem się za obackendowywanie formularza rejestracji, razem z tym doszedł też wybór walidatora. Wybór padł na symfony/validator jak niektórzy mogli się domyśleć. To, co popełniłem tamtego wieczoru było syfem i nie chcę o tym pamiętać. Cóż, teraz nie jest wspaniale, ale to za chwilę. Skończyłem wczoraj dosyć wcześnie, bo koło 22:00.

Przechodząc do dnia dzisiejszego, poprawiłem wczorajszy kod rejestracji na coś bardziej znośnego. Winę zwaliłem na slim/flash , który rozszerzyłem i zmodyfikowałem tak, aby akceptował coś innego niż tylko stringi. Możesz dowiedzieć się o co mi chodzi przeglądając commity z tego dnia. Dowiedziałem się telefonicznie, że termin oddawania prac został przesunięty o jedną dobę, a więc oddać projekt trzeba przed poniedziałkową północą.

Na ten moment udało mi się dodać dodawanie, usuwanie i moderację ocen. Lekko zmieniłem wygląd mapy, który będzie punktem wyjściowym nawigacji po stronie. Przede mną stoi obackendowanie dodawania psa. Gdy to zrobię, będę już na prostej do finiszu głównych funkcjonalności aplikacji i będę mógł się zabrać za drobne refaktoryzacje, optymalizacje czy poprawki wizualne.

Ósma doba

12:17

Dzisiaj już nie wieczorem tylko z rana.

Wczoraj dodałem edycję oraz usuwanie psiaków. Walidacja tego wszystkiego to jest jeden wielki syf , na który nie mam pomysłu jak go ogarnąć. Jednak działa dobrze. Poprawiłem też pole date w psiakach, które nie ma teraz jakiejś dziwnej wartości, gdy wyborem jest Kiedykolwiek , a wynosi po prostu null . Dodałem ustawienia konta, w których można zmienić pola konta (aktualnie tylko widoczna nazwa), zmienić hasło lub bezpowrotnie usunąć konto.

Na mojej liście todo pozostał widok psów, których jesteśmy właścicielami oraz strona landing. Biorę się za pracę. A, i swoją drogą, podrzucam tydzień z WakaTime, ponieważ mam darmowe konto i statystyki mi zaczną już znikać.

Po wysłaniu projektu

01.11.2016 00:19

Projekt ukończyłem na przeddzień terminu, nie jestem specjalnie dumny z kodu w poszczególnych kontrolerach, mówiąc ściślej chodzi mi o ten, związany z walidacją. To jest porażka. Jednak cała aplikacja działa. Ma sporo dziur bardzo banalnych do odkrycia, o których pomyślałem już po terminie oddawania projektów. Na GitLabie pozostało parę issues otwartych i nieukończonych. Jednak jestem zadowolony z tego, że skończyłem ten projekt w terminie. Gdyby przysiąść do tego już na spokojnie, można by poprawić wszystkie niedociągnięcia i stworzyć całkiem udany produkt.

Na planowanie, programowanie oraz przeglądanie dokumentacji przeznaczyłem w 10 dni około 50 godzin, czyli średnio 5h dziennie, co jest przy takim okresie czasu moim osobistym rekordem. Na WakaTime załapałem się nawet do top100. Dzięki temu projektowi dowiedziałem się co to znaczy pracować z deadlinem .

Pojutrze (tj. 03.11.2016) rozpoczyna się głosowanie internetowe na najlepszy projekt. Na moment obecny pozostaje mi czekać na otwarcie głosowania oraz na oficjalne wyniki. Małe statystyki odnośnie hackathonu: udział wzięły 62 drużyny reprezentowane przez 193 zawodników, projekty końcowe złożyło finalnie 38 drużyn, czyli 61% drużyn złożyło ukończone projekty.

Na dole posta zdjęcie, które zrobiłem sobie podczas pisania. Bardzo mi się podoba.

Podsumowanie

Cały kod znajduje się na GitLabie pod tym linkiem . Wersja online będzie pod tym linkiem (jeżeli prowadzi do 404, już ją zdjąłem, jednak dodałem parę stron na https://archive.org/ ).

Wręczenie nagród

Cały hackathon został oficjalnie zakończony wręczeniem nagród w budynku Taurus w Warszawie na Mokotowie. Filmik (niestety ze słabym audio) możecie obejrzeć:

Zaprezentowany sposób nada się także do podobnych zastosowań, jak chociażby znany z for internetowych [spoiler] .

Zasada działania

Cała filozofia działania opiera się na input[type="checkbox"] wraz z label ‚em. Checkbox chowamy, label stylujemy na przycisk lub odnośnik, a w CSSie pokazujemy i chowamy zawartość menu przy użyciu pseudoklasy :checked oraz selektora rodzeństwa ~ .

Dla checkboxa warto profilaktycznie dodać atrybut autocomplete z wartością off , aby zapobiec przeglądarce wczytywaniu mu zaznaczenia z historii wypełnianych formularzy. Gwoli dostępności, nadamy checkboxowi aria-hidden="true" , aby czytniki ekranowe go ignorowały.

Podrasuję graficznie nasze menu, aby na potrzeby poradnika rzeczywiście przypominało menu, a nie było paroma szeryfowymi linijkami tekstu:

Coś milszego dla oka

Menu działa, jednak pojawia się od razu , bez żadnej animacji. Animację można oczywiście zrobić w JSie. Prawda? Oczywiście, że można, ale my to zrobimy w CSSie. Bo można i to od dawna.

Załóżmy, aby animacja była taka sama jak na stronie na której to teraz czytasz w momencie pisania tego posta. Czyli obok tekstu „Rozwiń menu” dwa trójkąty wskazujące kierunek w który podąży menu przy kliknięciu. W dół gdy jest zwinięte i w górę gdy rozwinięte. Do tego niech rozsuwa się nie w jednej klatce, a interpoluje w, załóżmy, pół sekundy.

Na początek dodam pseudoelementami :before i :after oraz atrybutem content te trójkąciki. Jest to zwykły znak Unicode, możesz go skopiować: ▼.

Gdy checkbox jest zaznaczony (a więc menu rozsunięte) trójkącik powinien mieć wierzchołek zwrócony ku górze. Możemy po prostu zmienić content na inny trójkącik, albo, co jest IMO milsze dla oka, obrócić go ku górze, również interpolując rotacją przez pół sekundy. Zrobimy to przez nadanie transform: rotate(180deg) oraz -180deg odpowiednio dla :before oraz :after . Aby transformacja ta była animowana, dodajmy transition: transform .5s linear .

Animowanie rozsuwania się menu jest natomiast w czystym CSSie rzeczą ciut trudniejszą do osiągnięcia. Aby interpolować między dwiema wartościami, obie muszą być ustalone. A więc height gdy checkbox nie jest zaznaczony powinien mieć wartość 0 , natomiast gdy zaznaczony – no właśnie, jaką powinien mieć wartość? Do wartości auto , inherit czy initial nie można interpolować, a z poziomu CSSa nie znamy wysokości tego elementu. Ja widzę w tym przypadku jedno wyjście. Animować nie height a max-height , gdzie tą drugą wartość należy ustawić na taką, która będzie realną górną granicą wysokości tego elementu. Im większa będzie różnica między wartością max-height a realną wysokością elementu nawigacji, tym większy będzie odstęp czasu między końcem animacji a osiągnięciem przez nawigacji pełnej długości.

To wszystko opakowane w kod prezentuje się następująco:

Jeżeli macie jakieś pytania zadajcie je w komentarzu, postaram się odpowiedzieć na każde