Końce i początki

Uwaga celem ustrzeżenia przed czytelniczym rozczarowaniem: w tym poście nie ma słowa o programowaniu. Wzięło mnie na refleksje. ;)

Czerwiec minął niepostrzeżenie. Bez jednego słowa na blogu. A miało być o tym, tamtym i owym... I będzie! Choć nieco później niż zakładałam.

W tym krótkim czasie, od zakończenia konkursu do teraz, parę innych spraw znalazło swój finał i parę innych się rozpoczęło. Przede wszystkim - 28 czerwca zdeployowałam się w nowym (dla mnie, nie dosłownie) mieszkaniu. :) Przeprowadzka z czwartego piętra bez

Wersja demo i co dalej?

Dziś formalnie ostatni dzień konkursu Daj się poznać 2017. Piszę "formalnie", bo dla mnie (i pewnie nie jestem w tym odosobniona :)) konkurs się nie kończy. Zamierzam dalej rozwijać mój projekt i udowadniać sobie - w mniejszych i większych krokach - że się da. Że wiele róóóóżnych rzeczy się da. :) Co jakiś czas, choć pewnie z mniejszą częstotliwością, będę też pisać tutaj, co nowego w BUCE i u mnie.

Filtrowanie client side

źródło: x3.cdn03.imgwykop.pl

Zmiany, zmiany. BUKA wychodzi z piwniczki (czy też - z aresztu ;) siedziała tam długo, więc krok ma trochę niepewny...) i rusza w świat. To znaczy: od dziś jest dostępna na github pages i prezentuje prawdziwe książki, a nie randomowe publikacje o tytułach w rodzaju Ergonomic Cotton Cheese, serwowane przez mock REST API. A wszystko za sprawą Firebase. Ale po kolei...

Do tej pory korzystałam z mock REST API, które uruchamiałam wyłącznie na localhost (żeby serwować je poza localhost, potrzebny byłby hosting node.js, którego nie mam). W związku z tym niemożliwe było hostowanie aplikacji, choćby na github pages właśnie, bo zasoby z API dostępne były tylko lokalnie. Potrzebowałam więc bazy książek na serwerze. Ponieważ zajmuję się front-endem, chciałam użyć jako API czegoś gotowego - wybór padł na Firebase (a dokładnie - moduł / produkt Realtime Database; Firebase to

Kiedy zachodziło właśnie gorące wiosenne słońce...

... na Patriarszych Prudach zjawiło się dwóch obywateli.

Słońce wprawdzie nie zachodzi, wiosna wyjątkowo zimna i kapryśna, jestem w Warszawie, a nie w Moskwie, i nikt się dziś u mnie nie zjawił, ale bardzo chciałam zacząć tym zdaniem ;) (autorstwa Michaiła Bułhakowa, przecudnym, arcypięknym, doskonałym!), bo plącze mi się ostatnio po głowie i nie mogę się od niego uwolnić. Może teraz, wyrzucone, pójdzie sobie gdzie indziej?

Po tym wstępie "od czapy" i zachwycie nad talentem autora Mistrza i Małgorzaty, przechodzę płynnie do tematów, które bardziej przystoją temu blogowi.

Typy danych w JavaScripcie

Szybka ściągawka z typów danych w JS. W pigułce. :)

Najkrócej rzecz ujmując, w JavaScripcie typy danych dzielimy na proste i złożone.

TYPY PROSTE

Prostych typów jest pięć (uwaga dla fanów mnemotechniki: podwójne "P" - pięć prostych ;)):

1. string, czyli napis

var string = "Jestem napisem!"

Walidacja formularza (client side)

Od pewnego czasu chodziło mi to po głowie i bardzo, bardzo chciałam to zrobić. Wiem, właściwa walidacja jest oczywiście po stronie servera - bezwarunkowo. Ale dobrze by było podpowiedzieć to i owo użytkownikowi BUKI, choćby po to, by nie próbował dodawać książek bez autora...

Tak więc myślałam o tym i nosiłam się z zamiarem. Ostatni tydzień był dość szalony (życie wzięło górę nad programowaniem ;)), ale potrzeba zmierzenia się z tematem walidacji formularza rosła i rosła. Wiedziałam (tak mi się przynajmniej wydawało), że będę

Automatyzacja widoku z Gulpem

Oficjalnie cofam to, co napisałam tutaj. Nie wszystko oczywiście ;), a tylko kawałek o tym, że nie mam palącej potrzeby używania narzędzia do automatyzacji, bo apka mała i piszę ją sama, w pojedynkę. Otóż - po zainstalowaniu Handlebarsowego pluginu do Gulpa dobitnie przekonałam się, o ile szybciej i wygodniej jest z Gulpem niż bez niego. Tak więc - potrzebuję go. To więcej niż pewne.

Gulp - pierwsze kroki

Ostatnio nie wiem, w co ręce włożyć. Chcąc złapać kilka srok za ogon, rozgrzebałam parę różnych tematów, luźno powiązanych ze sobą. W efekcie: dużo jest zaczęte, mało jest skończone. Wszystkiemu winna... pogoda! ;)

Wśród wspomnianych "rozgrzebek" znalazł się też Gulp, z którym próbuję zawrzeć bliższą znajomość.

Menu w nowej odsłonie

Przebudowa zakończona. Było to całkiem spore zadanie, wymagające rozbicia na mniejsze kawałki - i to właśnie okazało się w nim najbardziej wartościowe. Prosta zasada małych kroków po raz kolejny objawiła swą wielkość. ;) Krok po kroku, krok po kroczku, przytuptałam więc do momentu, w którym listy forms i genres (rodzajów i gatunków literackich) wyświetlają się w submenu, a co więcej - wyświetlają się nie wpisane "na sztywno" w widoku, tylko dynamicznie, pobierane AJAXem z API.

Tworzenie obiektów w JS

W przerwie między nauką AngularJS (wreszcie zaczęłam, powolutku; ale już widzę, że różnica względem jQuery jest wprost miażdżąca; szok i niedowierzanie ;)), ćwiczeniami w czytaniu cudzego kodu i dokumentacji (trudna sztuka dla początkujących), rozwijaniem BUKI oraz oglądaniem filmów - krótka powtórka z tworzenia obiektów w JavaScripcie. Na tym etapie nigdy dość "wałkowania" podstaw.

Zatem (podaję sposób, przykład oraz informację, co jest prototypem dla nowo

Gdy ci się wszystko znudzi...

Gdy ci się wszystko znudzi
spraw sobie aniołka i staruszka
gra się tak:
(...)¹

To zaskakujące i dość zabawne, że w trakcie nauki programowania co jakiś czas, ni stąd, ni zowąd, otwiera mi się literacka szuflada, z której wyskakuje coś albo/i ktoś.

Mieć wybór

W tym tygodniu wzięłam na tapet¹ filtry typu multi select. Zadanie okazało się dość angażujące i tym trudniejsze, że jestem przeziębiona. :( Więc lotność oraz ostrość umysłu obniżona i przytępiona zdeczka. ;) Ale udało się. I mam z tego powodu sporą satysfakcję.

By udokumentować to wiekopomne dzieło ;), opiszę pokrótce i z grubsza kroki, które przywiodły mnie do celu:

Git - wprowadzenie i podstawowe komendy

Tu się wchodzi, naciska, ogląda się z bliska
Dalej, po lewej ręce, cudów więcej (...)

Nucę sobie ten kawałek Kalibra 44, myśląc o Gicie. ;) Tak mi się te dwa osobne byty kojarzą i łączą ze sobą (!?).

Teraz, nawet obudzona w nocy o północy, wyrecytuję bez zająknięcia: git status, git add ., git commit -m "komentarz", git push. Czyli podstawowe komendy w Gicie związane z commitowaniem zmian.

A potem usłyszałam: "Widok ma być głupi"

Nie długa, nie krótka, lecz w sam raz, historia o tym, jak przestałam pożyczać e-booki i audiobooki.

Kilka dni temu olśniło mnie, że w BUCE jest ux'owy bug. Mianowicie: możliwe było zaznaczenie, że książka typu e-book i audiobook jest wypożyczona (tak samo jak książka papierowa). Co w rzeczywistości nie zachodzi z wiadomych powodów (udostępnione

/*nutki*/ Ca-ła je-e-stem w skowronkach... /*nutki*/

Któregoś razu tuż przed zaśnięciem wymyślił mi się pomysł na ten post. Kontekstem i bezpośrednią przyczyną są darmowe warsztaty z HTML i CSS organizowane przez The Awwwesomes, na które się zgłosiłam. I na które żywię nadzieję się dostać. :) Tenże post (w wersji roboczej, pisany 2 kwietnia) antycypuje moją radość z tegoż właśnie.

Finisz jest na półmetku, półmetek jest na finiszu

A my tu dalej piszu-piszu...

Częstochowskie rymy zawsze pod ręką. Czym by bez nich był ten świat? ;) No dobrze, krótka krotochwilka, a teraz – do rzeczy.

Jaki jest status projektu po upływie 5 tygodni?

Spinner na branchu ze stashem

Tytuł tego posta wiąże się z pewnym wspomnieniem, jak to dobrych parę lat temu w dziale marketingu robiliśmy sobie śmieszki-heheszki z działu IT, a dokładniej - z komunikatów programistów w rodzaju: "no, wiesz, tutaj dodamy hinty na inputach".

Od tego czasu sporo się zmieniło. I nie mam tu na myśli tego, że teraz sama przechodzę na "ciemną stronę mocy". ;) To, o co mi chodzi, to niewątpliwe zbliżenie obu tych

Kręci się, kręci, bardzo ładnie

Dodawanie spinnera zrodziło (co najmniej) dwa pytania. (Konia z rzędem temu, kto podsunie jakieś rozwiązanie!) Ale o tym za chwilę.

Udał mi się ten kręcioł (albo, jak kto woli, loader). Rada bym go pokazać każdemu. Taki jest ładny! ;) Ale ponieważ moja aplikacja póki co działa jedynie lokalnie na moim komputerze, pokażę nie jego samego, a kod css. Posiłkowałam się rozwiązaniami stąd:

Czuję na plecach oddech Sokratesa

Ten pan (ponoć) zwykł mawiać: "Wiem, że nic nie wiem". Ja mam podobnie, choć określiłabym to mniej radykalnie: Nawet nie wiem, ile jeszcze nie wiem.

Piję z oceanu i wypiłam ledwie szklaneczkę. No, może dwie. A chciałabym chociaż wiaderko... :) Eh...

W ostatnim czasie chyba i tak przekroczyłam jakąś magiczną granicę i zdecydowanie

IIFE, scope, closures - prosto (choć w metaforach)

Pierwsze zetknięcie z IIFE zaowocowało... głupawką. ;) Instytut Idyllicznej Fascynacji Entropią? A może: Impulsywna Idiosynkrazja Fantomowych Eskimosów. Albo: Immanentny Infantylizm Filuternych Ekscentryków. Lub...

No dobrze, wystarczy już tych propozycji w spontanicznym wyzwaniu pt. "Rozwiń skrót IIFE w idiotyczny sposób, używając mądrze brzmiących słów". ;) Teraz do rzeczy.

IIFE, czyli Immediately-Invoked Function Expression. Cóż to takiego i do czego to?

W domu Obłońskich zapanował całkowity zamęt

Tak samo jak wczoraj w mojej głowie. Wprawdzie nie dowiedziałam się, że "mąż ma romans z Francuzką, byłą guwernantką"¹, za to odkryłam, że znów sprzeniewierzam się zasadzie DRY. "O nie! To straszne... Tak nie może być!"

A wszystko dlatego, że tworzyłam oddzielne szablony Handlebars dla każdego kawałka UI aplikacji. Konkretnie: zamiast obsługiwać wyświetlanie listy książek jednym szablonem,

To nie przelewki

Pora ogarnąć strukturę modelu, żeby wraz z rozwojem funkcjonalności w aplikacji (już za chwileczkę, już za momencik), nie zapanował CHAOS. Mądrzy ludzie prawią, że lepiej to zrobić wcześniej niż później, dlatego zabieram się za to już teraz, gdy wspomnianych funkcjonalności mam zaledwie cztery - a raczej jedną, w czterech wariantach, polegających na wyświetlaniu listy:

• wszystkich książek
• książek papierowych

Schadzka z Ajaxem (albo make life harder)

Przymiarki do ajaxa. Dzieje się! ;)

Zaczynam od - ba! - pobrania z API danych jednej książki i wyświetlenia ich. Cel jasny i prosty, ale droga okazała się kręta.

Wiedziona jakimś podświadomym pragnieniem "make life harder", zamiast prostego url do API, czyli: http://localhost:3000/books/2, użyłam takiego: http://localhost:3000/books?id=2. Różnica niewielka, ale zasadnicza, bo pierwszy

Are you sure you want to exist?

Czyli rzecz o literówkach.

Dziś zgubienie # (ok, może bardziej to podpada pod błąd składniowy niż literówkę, ale istota problemu pozostaje ta sama: uważność przy pisaniu kodu) w each block helper biblioteki Handlebars kosztowało mnie... no, nie będę mówić ile (czasu oczywiście). ;) Na pocieszenie usłyszałam od doświadczonego JS developera, że nad literówką i seniorzy potrafią siedzieć ze 2 dni, jak jest dobrze ukryta. (Ciekawa jestem, jakie mogą być rekordy

Wydrajowałam kod ;) Hurrra!

Ostatnie dni wypełniły mi mentalne zmagania z samą sobą, sprowadzające się do roztrząsania fundamentalnych kwestii egzystencji i szukania odpowiedzi na pytanie: czy to wszystko ma sens? (Pół żartem pół serio.) Oraz boksowanie się z biblioteką Handlebars.js.

Zrobiłam sobie kilkudniowy reset i przerwę w nauce, żeby się zdystansować i sprawdzić swoją motywację (na zasadzie: jak kocham, to zatęsknię ;)). No i wczoraj może nie aż

Zrozumieć Handlebars.js

Nie jest łatwo. :( Szczerze mówiąc, to mam ochotę szpetnie zakląć. Ale potrzebuję jakiejś biblioteki do zbudowania szablonów HTML w mojej aplikacji. Więc - spróbujmy przełamać te lody. ;)

Docelowo za pomocą Handlebars.js chcę odpowiednio sformatować ("ubrać") i wyświetlać po stronie klienta dane pobierane z API. Brzmi jak daleka droga. Dlatego na początek, w ramach rozgrzewki, robię zaślepki poszczególnych stron apki.

Halo, czy mnie widać?

Na ten tydzień zaplanowałam sobie zmontowanie widoku aplikacji - w wersji minimum. Taki podstawowy UX w oparciu o Bootstrapa plus stworzenie zaślepek stron.

Jako że moja aplikacja aspiruje do miana małej i skromnej :), wybrałam absolutnie podstawowy szablon Bootstrapa, mianowicie ten tutaj. Poleceniem npm install --save bootstrap zainstalowałam Bootstrapa

Nie od razu Rzym zbudowano

Czyli kamyczek do kamyczka, cierpliwości. W nauce programowania największą trudnością (przynajmniej dla mnie) jest to, że na początku wszystko, ale to dosłownie wszystko, jest nowe. Słownictwo, pojęcia, narzędzia, zależności, co z czym, co do czego i dlaczego. Próg wejścia jest naprawdę wysoki - podobnie jak poziom abstrakcji, z którym człowiek zderza się na dzień dobry.

Słowo się rzekło, kobyłka u płotu...

Urlop się skończył, nie ma odwrotu. STOP Ten blog nie będzie rymowany. ;)

Tytułem wprowadzenia:

Skąd pomysł na udział w konkursie programistycznym "Daj się poznać"?
Pomysł nie mój, przyznaję. Zostałam skutecznie zachęcona przez człowieka z tej branży. Ja sama nie mam doświadczenia w programowaniu, dopiero się uczę, a udział w konkursie ma w tej nauce pomóc, uporządkować ją i usystematyzować.

Dzień dobry :)

Hm, nic tu jeszcze nie ma... Ale to się wkrótce zmieni. Jak tylko wrócę z urlopu.

Blog ten powstaje na okoliczność konkursu programistycznego Daj się poznać 2017.