Kiedy przymierzałam się do rozpoczęcia poszukiwań mojej pierwszej pracy jako junior front-end developer było dla mnie jasne, że nie powalę na kolana ewentualnego pracodawcy doświadczeniem zawodowym jako dziennikarka, tak samo wykształceniem wyższym krzyżówkowym. Postanowiłam skupić się na tym, aby zaprezentować swoje kompetencje w postaci projektów, które będę mogła umieścić w swoim ubogim programistycznym CV. Z perspektywy czasu i doświadczenia widzę, że własne projekty realizowane poza pracą mogą być kluczem do zdobycia pracy nie tylko na stanowisku juniorskim.
Dzisiaj bez wodolejstwa, same konkrety. Poniżej zamieszczam listę projektów, które zrealizowałam przed podjęciem pierwszej pracy:
- Memory
Demo: Memory
Kod: GitHub
To zdecydowanie największe przedsięwzięcie ze wszystkich moich samodzielnych projektów. Aplikację realizowałam w ramach programu mentoringowego „Learn IT, Girl„. Przed przystąpieniem do programu zdecydowałam, że chcę napisać dla siebie stronę portfolio, która będzie zawierała informacje o moim zawodowym „dorobku” oraz sama w sobie będzie świadczyła o moich umiejętnościach.
Proces powstawania aplikacji rozpisany był na 12 tygodni, obejmował też czas niezbędny na naukę nieznanych technologii, takich jak np. Vue. W zarysie plan prezentował się następująco:
1. Projektowanie wyglądu i funkcjonalności dostępnych w aplikacji.
Na tym etapie dokonałam najbardziej kluczowych wyborów. Zdecydowałam, że stroną główną aplikacji ma być gra memory, która będzie również pełniła rolę nawigacji. Jednocześnie zdecydowałam, że pasek nawigacji będzie dostępny niezależnie od gry. Zaprojektowałam wygląd paska nawigacji (inspirując się mocno jedną ze stron, którą znalazłam w Awwwards.com). Zdecydowałam jakie zakładki będą dostępne w aplikacji oraz jakie będą oferowały funkcjonalności, np. odrzuciłam pomysł z wykonaniem formularza kontaktowego, ponieważ musiałabym samodzielnie wgryzać się w zagadnienia backendowe. Swoje mockupy miałam rozrysowane na kartkach oraz w paincie 😉
2. Implementacja zaprojektowanych widoków.
Na samym początku zdecydowałam, że Vue będzie jedynie dodatkiem do aplikacji (zainteresowanych odsyłam: Net Ninja Kurs Vue – Instancja). Jednak po krótkim czasie zmieniłam koncepcję i zaczęłam wykorzystywać Vue jako bazę do napisania całości. Wymagało to przepisania istniejącego kodu, co nie było problemem jeszcze na tym początkowym etapie rozwoju projektu.
Zdecydowałam się również na wykorzystanie składni SCSS oraz odrzucenie frameworków CSS. Dzisiaj zapewne skorzystałabym z jakiegoś narzędzia, choćby w celu łatwiejszego implementowania widoków responsywnych, wtedy jednak napisałam wszystko samodzielnie. Mocno pilnowałam się, żeby korzystać w całym projekcie metodyki BEM do nazywania klas CSS (choć później okazało się, że korzystam z wariacji na temat BEM – jednak spójnie i konsekwentnie, a to jest najważniejsze).
3. Implementacja logiki gry.
Gdyby moja strona portfolio nie zawierałam nawigacji w formie gry to cała strona mogłaby się z grubsza obejść bez JavaScript. Oczywiście „Memory” jest SPA (Single Page Application), ale wcale nie musiałoby tak być. Ze wszystkimi (chyba z wyjątkiem „pożyczonego” preloadera) animacjami świetnie radzi sobie CSS, a ja nie zdążyłam zaimplementować routingu.
Jednak pisanie gry okazało się dla mnie wyzwaniem i świetnym sprawdzeniem mojej znajomości JavaScript. Nie raz, nie dwa miałam ochotę wyrzucić komputer za okno, ponieważ coś nie działało tak jak powinno. Jednak debugowanie to zdecydowanie must have w skrzynce narzędziowej programisty 🙂
4. Testy.
Z migotaniem przedsionków podzieliłam się swoim roboczo ukończonym projektem z ludźmi z kilku grup fejsbukowych przeznaczonych dla początkujących programistów. Ku mojemu wielkiemu zdziwieniu odbiór był pozytywny, zaś błędy wytykane mi były w sposób kulturalny i rzeczowy, za co jestem bardzo wdzięczna. Miałam nawet to szczęście, że znalazło się kilka testerek, które z własnej woli „przeklikały” apkę i wyłapały grubsze niedociągnięcia.
5. Poprawki i deploy.
Główną uwagą zgłaszaną do „Memory” była kolorystyka – na początku tło było granatowe, detale fioletowe – ogólnie było dość mrocznie. Wiele osób czuło się przytłoczonych takim doborem kolorów, więc zdecydowałam się na zmianę. Do samego końca łatałam też każdy zauważony błąd. Nawiasem mówiąc ostatnie znalazłam wczoraj, okazało się, że konsola wypluwa booleana wskazującego jakąś wartość z gry 😉 Dodatkowo po zmianie nazwy mojego konta na GH nie zaktualizowałam linków prowadzących do demek moich projektów.
Trochę czasu zajęły też tłumaczenia i konsultacje językowe, ponieważ od początku założeniem moim było, że „Memory” ma być anglojęzyczne. Potem finalna wersja aplikacji została wydana na GitHub Pages. - Business & Creative
Demo: Business&Creative
Kod: GitHub
To projekt, w którym chciałam pokazać, że potrafię posługiwać się Bootstrapem. Nie ma tam ani grama mojego kodu JS, w zasadzie mojego kodu jest po prostu niewiele, ale efekt – dzięki użyciu frameworka CSS jakim jest Bootstrap – jest w mojej ocenie całkiem niezły. - To Do (Before You Die)
Demo: ToDo
Kod: GitHub
Aplikacja To Do to dla osoby aspirującej do stanowiska juniora takie samo must have, jakim jest Hello World dla kogoś, kto dopiero zaczyna naukę jakiegoś języka. Moja wersja jest swobodną interpretacją listy rzeczy do zrobienia przed odejściem z tego świata, a przy okazji obsługuje front-end dla wszystkich akcji CRUD (odsyłam do Wikipedii). W apce korzystam z CSS i czytego JS + jQuery (do obsługi preloadera). - Pixel Art Maker
Demo: Pixel
Kod: GitHub
Projekt napisany w ramach programu „Google Developer Challenge Scholarship„. Pixel to proste narzędzie, które generuje prostokąt o wybranych wymiarach, a potem pozwala tworzyć w nim dziełka z gatunku pixel art.
Skąd wzięłam takie pomysły?
Proces wymyślania tematów projektów w przypadku 3 ostatnich punktów był dość prosty. Temat Pixel Art Maker był narzucony z góry w programie Google, aplikacja To Do to – jak pisałam wcześniej – standard w portfolio programisty, a Business & Creative jest prostym landing pagem w biznesowym stylu, jakich pełno w internecie.
Praca koncepcyjna nad „Memory” była o wiele bardziej rozbudowana: obejmowała przeglądanie innych stron w poszukiwaniu ciekawych rozwiązań, wybór kolorystyki, ikon, dobór kroju pisma czy analizę działania nawigacji w formie gry. Dla przykładu: zastanawiałam się długo co ma się stać jeżeli gracz dobierze parę odpowiadającą za nawigację poza aplikację, czyli do LinkedIn czy GitHuba. Mogłam przenieść gracza z krótką informacją, że zostanie przekierowany do zewnętrznego serwisu. Zamiast tego jednak zdecydowałam się wyświetlić przycisk z możliwością samodzielnego nawigowania.
Podsumowując
W swojej dotychczasowej karierze trzykrotnie szukałam pracy w charakterze programistki i za każdym razem moje projekty miały kluczowe znaczenie dla rekruterów. Jednak niebagatelna była ich wartość właśnie na samym początku, kiedy jako aspirujący junior bez doświadczenia wysyłałam CV, którego 1/3 objętości zajmowała sekcja: Projekty. Rozmowy rekrutacyjne dotyczyły właśnie moich projektów, padały pytania na temat moich wyborów i realizacji, były niejako obroną tego, co stworzyłam. Śmiało mogę powiedzieć, że moja decyzja o rozpoczęciu poszukiwań pierwszej pracy po wykonaniu kilku własnych projektów była strzałem w dziesiątkę.