Junior Frotnend Developer – pierwszy dzień i pierwszy miesiąc w pracy

pierwszy dzien i miesiac w pracy

pierwszy dzien i miesiac w pracy

Moja droga do zostania Frontend Developerem była dość kręta. Swoją historię opisuję w tym poście. Minął już ponad rok od odkąd zaczęłam się uczyć od podstaw HTML-a, CSS-a i JS-a. Przed podjęciem tej stacjonarnej pracy miałam okazję pracować zdalnie nad dwoma zleceniami. A jak wyglądał mój pierwszy dzień i pierwszy miesiąc pracy w agencji tworzącej sklepy i aplikacje internetowe?

Pierwszy dzień

Pierwszy dzień pracy jako Junior Frontend Developer był głównie przeznaczony na kwestie organizacyjne: firmowy mail, system do monitorowania nieobecności i czasu pracy, kilka kanałów na Slacku. Największą trudnością było dla mnie korzystanie z MacBook-a. Wcześniej pracowałam na Windowsie i Ubuntu, dlatego musiałam się zmierzyć z nieco odmiennym systemem operacyjnym. Było to utrudnienie, ale z perspektywy czasu muszę powiedzieć, że dobrze mi się pracuje na tym sprzęcie.

Szef był bardzo sympatyczny, usiadł ze mną i pomógł skonfigurować środowisko pracy. Zaciągnęłam z firmowego repozytorium boilerplate na podstawie którego miałam budować stronę internetową. Boilerplate okazał się nieocenioną pomocą, ponieważ struktura plików była już uporządkowana, a Webpack skonfigurowany. Sama utworzyłam nowe repozytorium mojego projektu i dzień uwieńczyłam pierwszym commitem. Hura! 🙂

Pierwszy miesiąc

Pierwszy miesiąc w pracy był bardzo intensywny. Pracowałam na wysokich obrotach, uczyłam się mnóstwa nowych rzeczy i wracałam do domu wyczerpana. Nie miałam siły odpalić swojego komputera w domu. W zasadzie to na nic nie miałam siły. Potrzebowałam dużo snu. Dopiero po miesiącu odzyskałam energię i mogłam sobie pozwolić na wyjście na rozpoczęcie treningów oraz innych aktywności.

Co ciekawe zawsze budziłam się jakieś 5 – 10 minut przed budzikiem. Nigdy wcześniej mi się to nie zdarzało. Każdy dzień niósł ze sobą coś nowego i ekscytującego. Projekt nad którym pracowałam bardzo mi się podobał. W razie wątpliwości i pytań mogłam zwracać się z pytaniem do bardziej doświadczonych developerów.

Podsumowując, przez ten miesiąc zmierzyłam się z wieloma problemami i bardzo dużo się nauczyłam. W moim projekcie korzystałam z czystego JS-a, z czego ogromnie się cieszę, ponieważ miałam okazję szlifować swoje umiejętności. Bardzo się cieszę, że udało mi się znaleźć pracę, w której mogę się rozwijać. Jest to najfajniejsza praca jaką dotąd miałam. 🙂

Przydatne rzeczy

GIT – istotne narzędzie w pracy, które ułatwia współpracę z innymi developerami. Warto znać podstawowe komendy. Dla osób, które chcą się nauczyć korzystać z GIT-a polecam ten krótki i darmowy kurs.

ES6 – w pracy usłyszałam: „teraz to już standard” i bez gadania musiałam zacząć korzystać z ES6. Jeśli starasz się o pierwszą pracę / praktyki zapoznaj się z ES6, zdecydowanie ułatwi Ci to pracę.

Flexbox – daje duże możliwości i na prawdę warto go poznać. W pierwszej pracy zdecydowanie się przydaje. W pracy miałam również okazję korzystać z CSS Grid, więc to również rzecz, o której warto wiedzieć co nie co. Tutaj znajdziesz mój artykuł na temat Flexboxa oraz CSS Grid.

Masz pytania? Daj znać w komentarzu!

Menu nie musi być nudne – 10 inspirujących efektów

10 pomysłów na ciekawe menu

10 pomysłów na ciekawe menu

Zaskocz użytkownika ciekawą animacją menu na Twojej stronie lub aplikacji!

Nawigacja jest bardzo ważnym elementem każdej strony internetowej. Poniżej znajdziesz 10 inspiracji – zarówno na wersję desktop-ową jak i na urządzenia mobilne.

1. Toggle Burger Menu Animation

Autor:  Marian Breitmeyer

See the Pen Toggle Burger Menu Animation by Marian Breitmeyer (@marianbreitmeyer) on CodePen.

2. Page Tilt Effect

Autor: Marco Fugaro

See the Pen Page Tilt Effect by Marco Fugaro (@marco_fugaro) on CodePen.

3. CSS-only menu hover effects

Autor: sathish

See the Pen xdmgA by sathish (@sathish) on CodePen.

4. CSS3 Responsive menu effect

Autor: Bogdan Blinnikov

See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.

5. Gooey hamburger menu

Autor: huyle

See the Pen Gooey hamburger menu by huyle (@huyle2607) on CodePen.

6. Vertical Layout with Navigation

Autor: Ettrics

See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.

7. Fullscreen flexbox overlay navigation

Autor: Mirko Zorić

See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.

A tutaj kilka przykładów nawigacji na urządzeniach mobilnych! Bardzo pomysłowe! Który efekt wykorzystasz w swoim kolejnym projekcie?

8. Responsive Navigation Ideas

Autor: Andrzej Dubiel

Aż osiem przykładów! Koniecznie zobacz wszystkie!

See the Pen Responsive Navigation Ideas by Andrzej Dubiel (@itsfame) on CodePen.

9. Triangular Mobile Menu

Autor:  Jo Dahl

See the Pen Triangular Mobile Menu by Jo Dahl (@ehrenglaube) on CodePen.

10. Mobile Menu Style

Autor: Raiden Kaneda

See the Pen Mobile Menu Style by Raiden Kaneda (@Kaneda9) on CodePen.

 

Chcesz, żebym któreś z tych menu zakodowała i krok po kroku omówiła w osobnym poście? Daj znać w komentarzu, które najbardziej Ci się podoba!  😉

Jak zostać dobrym mentorem programowania?

Jak zostać dobrym mentorem programowania? Wskazówki od Junior Developera

Co jakiś czas przychodzi moment kiedy do firmy/zespołu trafia Junior Developer. Jak postępować z taką osobą aby nie była ciężarem, za to szybko wdrożyła się do projektu i zaczęła wnosić wartość? Jak stać się mentorem z prawdziwego zdarzenia? Na te pytania postaram się odpowiedzieć w tym poście.

Osobiście programowania uczyłam się od mojego mentora, a także z kursów internetowych przez niego poleconych (tutaj możesz przeczytać jaką drogę przeszłam zanim zostałam programistką). To z moim mentorem programowania przeszłam ścieżkę od napisania pierwszej linii JavaScript-u, przez pierwsze zlecenie, po rozpoczęcie pracy jako Junior Developer, za co jestem ogromnie mu wdzięczna.

Moja definicja mentora:

Mentor to osoba, która przekazuje wiedzę, pokazuje ścieżki i wspiera swojego ucznia w kolejnych krokach. Jest to również ktoś, komu bez obawy i wstydu możemy zadać pytanie dotyczące dziedziny w której się specjalizuje oraz podyskutować na dany temat. Jest to osoba, która bardzo dobrze umie słuchać oraz tłumaczyć. Im bardziej rozwijamy swoje umiejętności, tym rzadziej potrzebujemy korzystać z pomocy mentora, ale jest on dla nas dalej osiągalny i w razie potrzeby przekazuje najlepsze praktyki. Mentor wie na jakim jesteśmy poziomie zaawansowania, śledzi nasze postępy i stąd może nam dać mocno spersonalizowaną radę.

Na początek – dobre nastawienie

Ważne jest to, żeby pomaganie i nadzorowanie Junior Developera nie było dla Ciebie przykrym obowiązkiem. Jeśli uważasz, że nie będziesz się w tej roli spełniać, wręcz przeciwnie będzie Cię to tylko denerwować i odrywać od Twojego ulubionego zajęcia koniecznie to zakomunikuj swojemu przełożonemu.

Dowiedz się na jakim poziomie jest junior

Nie zawsze jest tak, że Junior trafia do zespołu w którym jest osoba, która zadawała pytania techniczne na rozmowie kwalifikacyjnej. Jeśli do Twojego team-u dołączy Junior Developer koniecznie dowiedz się na jakim poziomie jest ta osoba. Szybko to zweryfikujesz to zadając pytania:

  • Jakie projekty wcześniej realizowałeś/łaś?
  • Z jakich narzędzi korzystałeś/łaś?
  • Co Cię najbardziej fascynuje w programowaniu, w jakim kierunku chciałbyś/chciałabyś się rozwijać?
  • Z czym ma największe trudności?

To pozwoli na większe zrozumienie oraz pomoże uniknąć niepotrzebnych problemów i nieporozumień.

Pamiętaj, że niekoniecznie najlepszy senior będzie najlepszym mentorem

To co ceniłam w swoim mentorze najbardziej to jego umiejętność postawienia się w sytuacji osoby, która czegoś nie wie. Często osoby, które są na zaawansowanym poziomie uważają pewne rzeczy za oczywiste i bardzo się dziwią, że ktoś inny tego nie rozumie. Staraj się tłumaczyć na prostych przykładach, a potem na tych podstawach buduj trudniejsze.  Nie traktuj drugiej osoby jak kogoś głupiego, Ty też kiedyś byłeś/byłaś na tym etapie. Stwórz bezpieczną przestrzeń, gdzie będzie miejsce na pytania i czas na dyskusje. Wiadomo, że czas Seniorów i Middle Developerow jest cenny nie zawsze mają oni tyle czasu ile by chcieli dlatego…

Gromadź i dziel się ciekawymi materiałami.

Jeśli znajdziesz ciekawy i wartościowy artykuł, kurs, książkę, wtyczkę – koniecznie zapisz je. Gromadź przydatne materiały w notatniku / zakładkach. Zrób bazę wartościowych materiałów. Dziel się sprawdzonymi rozwiązaniami, dzięki temu umiejętności Juniora szybko poszybują w górę.

Nie uprzedzaj się do osób, które przekwalifikowały się z innej branży.

Obecnie istnieje zauważalny trend na uczenie się programowania. Pojawia się coraz więcej osób, które wcześniej wykonywały inny zawód i przekwalifikowały się na programistów. Moim zdaniem takie osoby często mają ciekawe spojrzenie na pewne kwestie. Ich punkt widzenia może się różnić od punktu widzenia osób które od początku interesowały się szeroko pojętą informatyką i ukończyły studia techniczne. Często cały zespół może zyskać na ich spostrzeżeniach i sugestiach. Jeśli taki Junior Developer naprawdę pasjonuje się programowaniem, bardzo często ma ogromny zapał i chłonie wiedzę jak gąbka.

Nie dawaj gotowych rozwiązań tylko dawaj wskazówki

Często wystarczy naprowadzić Juniora, zamiast podawać gotowe rozwiązanie. W końcu Junior powinien się usamodzielnić i nauczyć się rozwiązywać problemy. A szukanie rozwiązań w otchłaniach internetu jest sztuką i wymaga praktyki.

Jeśli Junior napotka na duży bloker i Ty przejmiesz stery, to koniecznie mów na głos jaki jest Twój tok rozumowania, jeśli od razu nie znasz rozwiązania to mów gdzie szukasz odpowiedzi na swoje pytania oraz w jaki sposób rozwiązałeś dany problem. Będzie to bardziej wartościowe niż podanie rozwiązania na talerzu. 

Code review jest ważną częścią nauki

Pamiętam swój pierwszy projekt, głównie zajmowałam się w nim kodowaniem, a nie samym programowanie. Mój mentor robił code review bardzo dokładnie. Pamiętam te setki poprawek, które musiałam nanosić, a największy problem miałam problem z nazewnictwem elementów. Było to bardzo wymagające i trochę zniechęcające. Ku mojemu zaskoczeniu podczas kolejnego projektu ilość poprawek drastycznie zmalała. Okazało się, że nie mam już tak dużych problemów i coraz lepiej sobie sama radzę. Bardzo się z tego cieszyłam. Pokazuje to, że lepiej na samym początku zainwestować więcej czasu na dokładny code review.

Na koniec

Jeśli zdecydujesz się zostać mentorem to mam nadzieję, że przyniesie Ci to wiele satysfakcji i nauczysz się wiele o innych ludziach, a także o sobie samym. Należy pamiętać, że w branżę IT tworzą przede wszystkim ludzie.  Dbajmy o to środowisko, pomagajmy sobie nawzajem i wspólnie twórzmy zgrane zespoły.

SowaProgramuje – pół roku blogowania

pol roku blogowania

pol roku blogowania

Blog SowaProgramuje został założony pół roku temu! Ogromnie się cieszę, że dotrwałam do tego momentu. Czas na małe podsumowanie tego okresu.

Pół roku blogowania – podsumowanie

  • Od połowy kwietnia (wtedy zaczęłam prowadzić statystyki) bloga odwiedziło ponad 12 tys. użytkowników! Niesamowite! Dziękuję wszystkim osobom, które czytają moje artykuły. Bardzo się cieszę, że mogę pomagać i motywować kolejne osoby do działania. Dziękuję wszystkim, którzy zgłaszają poprawki i pomagają mi udoskonalać treści, które publikuję.
  • Przez te pół roku dużo się nauczyłam. Mam tutaj na myśli umiejętności zarówno twarde jak i miękkie. Udało mi się wygłosić pierwsze krótkie przemówienie na temat związany z branżą IT (i to nie byle gdzie, bo w siedzibie Microsoft w Warszawie) oraz udzieliłam 2 wywiadów. Z każdym napisanym postem rosną moje umiejętności pisania artykułów.
  • Przełamałam bariery. Na początku wstydziłam się mówić o moim blogu. Okazało się jednak, że moi znajomi zaciekawieniem i pozytywnym nastawieniem pytają o bloga, a także, że jest to dodatkowy atut i temat na rozmowach kwalifikacyjnych.
  • Dzięki prowadzeniu bloga i udzielaniu się na różnych grupach poznałam wielu świetnych i pozytywnych ludzi! Bardzo się z tego powodu cieszę 🙂
  • Prowadzenie bloga wymaga systematyczności – moim celem było i jest publikowanie jednego posta tygodniowo. Nie jest to proste, szczególne jak się ma inne rzeczy na głowie. Nie udawało mi się publikować w ten sam dzień tygodnia, ale mam nadzieję, że uda mi się to osiągnąć.
  • Prowadzenie bloga daje mi satysfakcję. Zawsze staram się aby treści były wartościowe i poprawne.  Cieszę się, jak do mnie piszecie i w miarę swoich możliwości i umiejętności staram się pomóc, doradzić i zmotywować.

Najpopularniejsze wpisy

10 błędów początkujących Frontend Developerów część 1

Jak zostałam Junior Frontend Developerem?

Umiesz trochę JavaScript? Co dalej?

Specjalne podziękowania dla:

Maciej Aniserwoicz z bloga Devstyle, organizatora konkursu Daj się Poznać – podziękowania za tą świetną inicjatywę  i inspirowania ludzi do działania.

Weronika Tobor z bloga Programmer-Girl – która pomogła mi uwierzyć w to, że moje treści są przydatne dla innych i że warto dzielić się swoimi postami w social media.

Paweł – mój chłopak, który czyta moje posty przed publikacją, pomaga wychwytywać błędy, służy konstruktywną krytyką oraz wspiera moje działania.

Dziękuję Tobie – motywujesz mnie do tworzenia kolejnych postów oraz dzielenia się moimi spostrzeżeniami. Cieszę się, że tu jesteś 🙂

Umiesz trochę JavaScript? Co dalej?

Umiesz Java Script co dalej

Umiesz Java Script co dalej

Znasz już podstawy JavaScript tj. zmienne, funkcje, pętle, tablice, obiekty? Chcesz się dalej rozwijać w tym kierunku, ale nie wiesz czego się dalej uczyć? Chcesz dostać staż/pracę jako Junior Frontend Developer, ale na rozmowach kwalifikacyjnych mówią Ci, że jeszcze umiesz za mało z JSa? A może jesteś już Junior Frontend Developerem i chcesz podnieść swoje umiejętności?

Czas na materiały i porady, które pomogą Ci wskoczyć na wyższy poziom!

Kursy video

https://javascript30.com/ —> 30 dni, 30 zadań! Wszystko wytłumaczone krok po kroku. Podczas tego darmowego kursu poznasz elementy ES6 i wzbogacisz swoją wiedzę z JSa. 

https://www.codeschool.com/courses/javascript-best-practices —> kurs bardzo przyjemny, przydatne wskazówki oraz dobre praktyki. Platforma CodeSchool jest płatna, jest tam wiele innych kursów.

https://teamtreehouse.com/library/ajax-basics – AJAX to kolejna rzecz, którą powinieneś / powinnaś znać i umieć korzystać. TeamTreeHouse też jest płatną platformą, ja z niej korzystałam przez kilka miesięcy i byłam zadowolona.

Jeśli rozważasz naukę Angulara, koniecznie najpierw zapoznaj się z TypeScript. Będzie Ci dużo prościej wtedy ogarnąć ten framework.

Książki i artykuły

http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/ —> obiektowe programowanie (OOP) w JS, warto zapoznać się z tym tematem.

http://kursjs.pl/kurs/regular.php —> wyrażenia regularne też się przydają co jakiś czas w pracy, warto wiedzieć z czym to się je.

„You Don’t Know JS” —> klasyk, można za darmo przeczytać w wersji elektronicznej lub kupić wersje papierowe.

Własny projekt

Koniecznie zrób swój projekt, jeden duży albo kilka mniejszych. Tutaj spotkasz się z realnymi wyzwaniami. Ważne jest to abyś, nie chował/a projektów do szuflady. Koniecznie załóż konto na GitHub, umieść swój projekt w sieci, a linki do projektów obowiązkowo umieść w CV!

Co jest ważne podczas wyboru projektu?

Projekt powinien Cię ekscytować. Jeżeli nie ekscytuje Cię robienie kolejnego kalkulatora i kolejnej aplikacja TO DO, to jej nie rób. Zacznij projekt, który Cię wciągnie (wtedy więcej się nauczysz, będziesz szukał/a rozwiązań z zainteresowaniem). Zacznij od mniej skomplikowanych projektów, jak to mówią, nie od razu Kraków zbudowano. Stopniowo buduj swoje doświadczenie, zobaczysz, że zrobisz ogromny postęp. Ja stworzyłam dwa mini projekciki, gdzie znalazłam problem i bardzo chciałam go rozwiązać. To mnie bardzo motywowało.

Inspiracje i źródła

CodePen —> znajdziesz tu mnóstwo ciekawych projektów, poszukaj czegoś co Cię zainspiruje

https://googlecreativelab.github.io/coder-projects/ —> kilka ciekawych pomysłów na projekty, może akurat coś Cię zainspiruje.

http://www.w3resource.com/javascript-exercises/ —> tutaj znajdziesz multum zadań z JSa.

Rozwiązywanie problemów

Co jak nie będę wiedzieć jak zacząć taki projekt? Albo jak utkniesz nad jakimś problemem? Koniecznie zerknij na ten artykuł:

https://codeburst.io/10-steps-to-solving-a-programming-problem-8a32d1e96d74

Jak już zrobisz swój projekcik (albo jego część) poproś kogoś o code review. Traktuj błędy jako okazję do nauczenia się czegoś nowego.

Aplikowanie do pracy i rozmowa kwalifikacyjna

Przykładowe pytania które pojawiły się na moich rozmowach można znaleźć w moim artykule pod tym linkiem.

Bardziej zaawansowane pytania z samego JSa znajdziesz tutaj:

https://www.toptal.com/javascript/interview-questions

oraz tutaj:

https://nafrontendzie.pl/rozmowa-kwalifikacyjna-przygotowania/

Jak zapiszesz się na newsletter NaFrontendzie to otrzymasz darmowego ebooka z bardzo przydatnymi materiałami.

Pamiętaj, nie musisz tego wszystkiego umieć i wiedzieć, żeby dostać pracę, ale warto żebyś stopniowo rozwijał/a się i dowiadywał/a się nowych rzeczy i nabywał/a doświadczenia przez robienie własnych projektów.

Nie czekaj w nieskończoność z wysyłaniem CV. Każda rozmowa powinna Cię czegoś nauczyć. Jak nie uda Ci się dostać stażu / pracy nie traktuj tego jako porażki, poproś o feedback, to pomoże Ci szybciej osiągnąć wyższy poziom. Wiem, że może być czasami ciężko i może to być frustrujące, szczególnie jak ktoś już sporo czasu poświęcił na naukę.

Wysyłaj CV nawet jak firma nie ma otwartej rekrutacji! Znajdź firmy, które potencjalnie Cię interesują i zrób sobie listę z adresami email. No i wysyłaj CV! Nie czekaj na „odpowiedni moment”, bo on nigdy nie nadejdzie. Nie przejmuj się jak raz ta firma Ci już nie odpisała na maila. Wyślij po jakimś czasie ponownie. A jak Ci ktoś odmówi, to za jakiś czas zapytaj czy sytuacja w firmie się zmieniła i czy może teraz jest szansa na miejsce dla takiej osoby jak Ty.

Tutaj pisałam o tym jak poprowadzić rozmowę rekrutacyjną jako starający się o pracę programista, koniecznie przeczytaj ten artykuł.

Spotykaj się z ludźmi

Bierz udział w konferencjach, targach pracy, hackathonach, meetup-ach. Bądź ciekawy innych ludzi i nawiązuj kontakty. Na konferencjach i targach pracy często można w jednym miejscu poznać i porozmawiać z przedstawicielami kilku firm. Weź ze sobą swoje aktualne wydrukowane CV, a nóż uda Ci się w ten sposób znaleźć pracę.

Na koniec

Mam nadzieję, że te materiały będą dla Ciebie przydatne. Mocno trzymam za Ciebie kciuki! Wiem, że dasz radę!

Znasz jeszcze jakieś ciekawe źródła? Podziel się linkiem w komentarzu pod postem! 🙂

CSS Grid kontra Flexbox

css gird & flexbox

css gird & flexbox

Inspiracja

Po obejrzeniu poniższego wystąpienia Morten Rand-Hendriksen na temat CSS Grid postanowiłam przetestować ten sposób pozycjonowania elementów. Zdecydowanie polecam obejrzenie tej prelekcji.

W tym artykule chciałabym porównać na prostym przykładzie dwie metody: Flexbox oraz CSS Grid.

Wsparcie przeglądarek

Zanim przejdziemy do rzeczy, mała notka na temat wsparcia przeglądarek. Na ten moment (13.08.2017) wsparcie CSS Grid jest częściowe. Istnieją problemy z Internet Explorer, Edge, Opera Mini oraz na starszych wersjach iOS Safari. Z powyższego wideo wynika że już niebawem CSS Grid będzie w pełni wspierany przez Edge, stąd warto się zainteresować tematem CSS Grid.

Wsparcie Flexbox:

flexbox wsparcie przeglądarek
Źródło caniuse.com

Wsparcie CSS Grid:

grid wsparcie przeglądarek
Źródło caniuse.com

 

A jak to wygląda w praktyce i czym się różni CSS Grid od Flexboxa? Przekonajmy się na przykładzie.

Cel

Moim celem jest uzyskanie takiego samego efektu za pomocą dwóch różnych metod. Tutaj jest grafika prezentująca jaki efekt chcę osiągnąć.

css grid i flexbox

Wspólny HTML

Zacznijmy od kodu HTML, który jest wspólny dla obu przykładów. Mamy tutaj div o klasie „container”, który ma czwórkę dzieci, które na potrzeby tego przykładu mają klasy „red”, „blue”, „yellow”, „green”*. W środku każdego dziecka znajduje się paragraf.

*w rzeczywistości starajmy się nadawać nazwy klas opisujące czym dany element jest, a nie jak wygląda

 

<div class="container">
    <div class="red">
        <p>red</p>
    </div>
    <div class="blue">
        <p>blue</p>
    </div>
    <div class="yellow">
        <p>yellow</p>
    </div>
    <div class="green">
        <p>green</p>
    </div>
</div>

Wspólny CSS

W tych przykładach będę używać SCSSa. Na początek dodajemy ogólne style, dla rozróżnienia nadajemy różne kolory poszczególnym dzieciom elementu „container”.

$red: #ed4040;
$yellow: #ffef68;
$blue: #4286f4;
$green: #99e265;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 500px;
    height: 300px;
    margin: 150px auto 0 auto;
    border: 2px solid black;

    .red, .blue, .yellow, .green {
        heigth: 100%;
        width: 100%;
        font-size: 25px;
        text-align: center;
    }
}

.red {
    background-color: $red;
}

.blue {
    background-color: $blue;
}

.yellow {
    background-color: $yellow;
}

.green {
    background-color: $green;
}

Po dodaniu tych stylów otrzymujemy bazę dla obu przykładów.

markup

Flexbox

Krok 1

Na sam początek w CSSie nadajemy elementowi o klasie „container” display: flex. W ten sposób cztery divy, które są bezpośrednimi dziećmi elementu „container” zostały uporządkowane jeden obok drugiego, a nie jak było wcześniej jeden pod drugim.

.container {
    display: flex;
    // tu są jeszcze pozostałe, wspólne style
}

display: flex

Jest to spowodowane zaaplikowanie domyślnej właściwości jaką jest „flex-direction: row”. Stąd elementu układają się jeden koło drugiego w jednym rzędzie (inne właściwości „flex-direction” to  row-reverse, column i column-reverse).

flex-direction: row

Krok 2

Aby uzyskać zamierzony efekt używając flexboxa musimy nieco zmienić strukturę HTML. Zmierzamy do stworzenia trzech divów, które będą w jednym rzędzie, jak na grafice powyżej. Dodajemy div o klasie „column-wrapper”, w którym znajdą się dwa elementy: „blue” i „yellow”. Teraz div o klasie „container” ma trójkę dzieci: „red”, „column-wrapper” oraz „green”.

<div class="container">
    <div class="red">
        <p>red</p>
    </div>
    <div class="column-wrapper">
        <div class="blue">
            <p>blue</p>
        </div>
        <div class="yellow">
            <p>yellow</p>
        </div>
    </div>
    <div class="green">
        <p>green</p>
    </div>
</div>

Po zmianie HTML-a otrzymujemy trzy kolumny.

flexbox

Krok 3

Teraz musimy jeszcze dodać style na elemencie „column-wrapper”. Skorzystamy z właściwości jaką jest „flex”. Dzięki temu będziemy mogli rozdysponować przestrzeń rodzica za pomocą procentowych wartości. Chcemy, żeby div o klasie „column-wrapper” zajmował połowę szerokości swojego rodzica, a pozostałe elementy zajmowały po 25% szerokości.

.column-wrapper {
    flex: 0 1 50%
}

.red {
    background-color: $red;
    flex: 0 1 25%;
}

.green {
    background-color: $green;
    flex: 0 1 25%;
}

Dostajemy następujący efekt:

Krok 4

Stylujemy dzieci elementu „column-wrapper”. Chemy żeby każde dziecko zajmowało połowę wysokości rodzica.

.blue, .yellow {
    height: 50%;
}

Końcowy efekt z użyciem Flexboxa

Tutaj na CodePen zaprezentowany jest ostateczny kod oraz efekt.

See the Pen Flexbox example by SowaProgramuje (@sowaProgramuje) on CodePen.

CSS Grid

Teraz zobaczmy jak uzyskać ten sam efekt, ale z użyciem CSS Grid. Wracamy do naszego podstawowego markupu. Mamy rodzica o klasie „container” oraz czwórkę dzieci: div-y o klasach „red”, „blue”, „yellow” i „green”. W przypadku CSS Grid nie będziemy towrzyć dodatkowych elementów w HTML, jak było w przypadku Flexboxa (div o klasie „column-wrapper”). CSS Grid pozwala na opisanie struktury dokumentu, bez potrzeby dodatkowych div-ów, które mają na celu jedynie wspomóc jego stylowanie.

Krok 1

Podstawowe style już mamy, czas przejść do definiowania CSS Grid. Nadajemy elementowi o klasie „container” display: grid. W efekcie elementy zostały ułożone jeden nad drugim oraz wypełniły całą wysokość rodzica.

.container {
    display: grid;
    // tu są jeszcze pozostałe, wspólne style
}

grid

Firefox udostępnia w swoim inspektorze możliwość podglądu linii CSS Grid-u. Po najechaniu kursorem na kratkę koło display:  # grid pojawiają się linie oddzielające poszczególne „komórki” tzw. „Grid highlighter”.

mozilla grid dev tools

I jeszcze zbliżenie:

Krok 2

CSS Grid można porównać do tabeli. Możemy definiować kolumny oraz wiersze. Tutaj na poniższej grafice demontuję jak musimy podzielić nasz „container”, żeby uzyskać zamierzony efekt. Należy zdefiniować trzy kolumny oraz dwa wiersze. Element „red” będzie zajmować dwie komórki (całą pierwszą kolumnę), element „green”  również będzie zajmować dwie komórki (całą ostatnią kolumnę). W CSS Grid mamy możliwość definiowania położenia elementów w dwóch osiach: pionowej i poziomej.  W przeciwieństwie do Flexboxa, gdzie definiujemy „flex-direction” i jest on tylko jednowymiarowy (row, row-reverse, column lub column-reverse).

css grid example

Trzy kolumny oraz dwa wiersze:

css grid example1

Skoro wiemy ile wierszy i kolumn jest potrzebne czas na zdefiniowanie ich wielkości. CSS Grid wprowadza nową jednostkę jaką jest fr czyli „fraction of available space”. Tutaj można przeczytać więcej na temat jednostek jakie możemy używać z CSS Grid.

css grid example2

Do diva „container” dodajemy następujące style:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; 
    // to będą trzy kolumny, ich szerokość będzie do siebie w stosunku 1:2:1
    grid-template-rows: 1fr 1fr; 
    // to będą dwa wiersze, ich wysokość będzie do siebie w stosunku 1:1
}

Po dodaniu tego kodu każdy element zajął tylko jedną komórkę w Grid. Zostały dwie puste komórki. Aby to zmienić musimy zdefiniować grid-areas oraz grid-template-area.

grid-template

Krok 3

Grid-area nadawany jest na dzieciach elementu, który ma display grid. Zdefiniowanie nazw konkretnych elementów w CSS Grid pozwoli na prostszą orientację.

.red {
    background-color: $red;
    grid-area: red;
}

.blue {
    background-color: $blue;
    grid-area: blue;
}

.yellow {
    background-color: $yellow;
    grid-area: yellow;
}

.green {
    background-color: $green;
    grid-area: green;
}

Po dodaniu tych stylów wizualnie wygląda to niezbyt dobrze, wręcz jakbyśmy się oddalili od naszego celu, ale jeszcze musimy zdefiniować grid-template-area.

grid area

Krok 4

Czas na zdefiniowanie grid-template-area. Musimy zdefiniować, które elementy będą zajmować które i ile komórek. Będziemy korzystać z grid-area, które zdefiniowaliśmy w poprzednim kroku.

Na elemencie „container” dodajemy

grid-template-areas:
"red blue green"
//w cudzysłowie definiujemy co będzie w poszczególnych komórkach w pierwszym wierszu
"red yellow green"; 
//w drugim cudzysłowie definiujemy kolejny wiersz w naszej "tabeli"

Ostatecznie do elementu „container” zostały dodane takie style:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "red blue green"
    "red yellow green"; 
}

Na poniższej grafice zilustrowane jest definiowanie grid-template-areas.

css grid example

Komórki w których zdefiniowane są takie same grid-areas zostają scalone do jednego obszaru. Element „red” oraz element „green” zajmują po dwie komórki, natomiast element „blue” oraz „yellow” zajmują każdy po jednej komórce.

grid-template-area

Końcowy efekt z użyciem CSS Grid

Tutaj można zobaczyć i przeanalizować samodzielnie ostateczny kod.

See the Pen CSS Grid by SowaProgramuje (@sowaProgramuje) on CodePen.

Podsumowując

CSS Grid jest nowszym sposobem pozycjonowania elementów. Działa on trochę jak tabela, gdzie możemy definiować ilość kolumn, wierszy oraz „scalać” poszczególne komórki. Zarówno CSS Grid jak i Flexbox mają jeszcze wiele innych, bardziej zaawansowanych właściwości, których w tym artykule nie omówiłam, a które są bardzo pomocne w pozycjonowaniu elementów.

Ostatecznie używając CSS Grid kod HTML zajął 2 linie mniej, natomiast SCSS 1 linię mniej.

Dodatkowe materiały

Oto linki do stron, na których można dowiedzieć się więcej na temat CSS Grid:

oraz o Flexbox:

 

Masz jakieś pytania, uwagi do kodu? Daj znać w komentarzu!

Czy programowanie jest fajne?

Czy programowanie jest fajne

Czy programowanie jest fajne

Czy programowanie jest fajne?

W zeszłym tygodniu ukazał się artykuł, w którym wraz z innymi programistami próbowaliśmy odpowiedzieć na pytanie „Czy programowanie jest trudne?„. Pojawiło się tam sporo argumentów i ciekawych punktów widzenia. Teraz przyszedł czas, żeby się zastanowić czy programowanie jest fajne.

Czy programowanie jest fajne?

„Jak zawsze „to zależy” – głównie od projektu i zespołu. Dużo frajdy sprawia stworzenie czegoś z niczego i realizowanie swoich pomysłów. Często jest to rollercoaster satysfakcji i frustracji.”

Mateusz Kupilas; blog: javadevmatt.pl

Czy programowanie jest fajne?

„Zdecydowanie tak, i to z wielu powodów. Przede wszystkim, przynajmniej w oczach pragmatyków, umiejętność programowania jest przydatna w życiu. Pozwala np. na zautomatyzowania pewnych zadań wykonywanych na komputerze prowadząc do oszczędności czasu, wysiłku i zapewnienia lepszych, bardziej powtarzalnych efektów. Raz napisany program będzie wykonywał te same rutynowe czynności bezbłędnie, a człowiekowi prędzej, czy później zdarzy się pomyłka. Nie należy jednak zapominać, że jest to równocześnie proces twórczy. Programista – lub programistka – tworząc przydatny program może czerpać z tego satysfakcję taką samą jak rzemieślnik z utworzenia przydatnego lub pięknego przedmiotu. Dodatkowo, jest to czynność, którą można wykonywać praktycznie z dowolnego miejsca, co pozwala na pracę z domu, zabranie ze sobą hobby na wakacje, zabranie wakacji do pracy (poprzez zdalną pracę np. z tropikalnej plaży) oraz szukanie klientów w krajach z mocniejszą walutą.”

KrzaQ, blog: dsp.krzaq.cc

Czy programowanie jest fajne?

„Nie, to najgorsza fucha, jaką mogłem sobie w życiu wybrać. Serio się sobie dziwię, że nie zostałem awangardowym poetą i nie piszę obecnie wierszy na skórze wypasanych w Alpach kóz. Codzienna mordęga z bugami i innymi dziwnymi rzeczami, połączona z pędem do implementowania nowych ficzerów, zarzyna umysł. I ci userzy: NO JAK MOŻNA W TAKI SPOSÓB UŻYWAĆ EDYTORA TEKSTU?!!!

Naprawdę, czasami nie rozumiem swoich fatalnych decyzji życiowych… Ech, wypasanie kóz w Alpach – trzeba było w to iść, gdy jeszcze była szansa. A teraz to już za późno! Programowanie tak przeżarło mi mózg, że nawet w wolnej chwili klepię kod w JS-ie. Takim jestem wrakiem…”

Comandeer, blog: comandeer.github.io/blog/

Czy programowanie jest fajne?

„To zależy. Dla niektórych może być bardzo fajne, dla innych może być katorgą. Dla niektórych fajne może być ciągłe rozwijanie swoich umiejętności i dokształcanie się. A dla innych to może nie być fajne – będą woleli bazować na posiadanej wiedzy i niekoniecznie ciągle ją poszerzać. Jedna osoba po całym dniu zmagań z pewnym problemem będzie miała determinację, by kolejnego dnia znowu do niego usiąść. Inna natomiast zrezygnuje już po godzinie. Wydaje mi się, że teksty typu „Zacznij programować, bo programowanie jest fajne” nie są odpowiednie. Może prędzej „Spróbuj, jak to jest programować, bo programowanie jest ciekawe i rozwijające”.”

Programmer Girl, blog: programmer-girl.com

Czy programowanie jest fajne?

„Jak najbardziej. Dla mnie każdy problem jest swego rodzaju zagadką do rozwiązania. Lubię rozwiązywać zagadki i stawać przed problemami. Serio, jak coś od razu działa, to znaczy, że nie było wyzwania. A poza tym, wszyscy wiedzą, że koty są królami internetu, a programujące koty kiedyś przejmą władzę nad światem.”

Kot Źrodłowy, blog: kot-zrodlowy.pl

Czy programowanie jest fajne?

„Jak najbardziej! Nie zajmowałabym się tym już przeszło 10 lat, gdyby nie było wciągające. A tak, moja pierwsza styczność z programowaniem miała miejsce już przeszło dekadę temu. I nadal mi się nie nudzi 😉 Polecam każdemu taką pasję!”

Żaneta Jażdżyk, blog: nettecode.com; grupa edukacyjno-motywacyjna: Programowanie – wsparcie na starcie

Czy programowanie jest fajne?

„Tak. Jest to sztuka tworzenia czegoś nowego z linijek tekstu. Nie musimy tworzyć szarej aplikacji biurowej, którą wykorzystują smutni ludzie w garniturach. Programowanie pomaga np. w tworzeniu gier, stron (a kysz PHP).
Programowanie pomaga nam skonwertować Kofeinę w Kod.

* Warto jednak pamiętać, że bywają też dni w których wyrywamy sobie włosy z głowy, szukając rozwiązania dla niektórych problemów, które na pozór wydają się być błahe.”

Szymon Motyka, blog: szymonmotyka.pl

Czy programowanie jest fajne?

„Dla mnie tak, ponieważ potrafiąc programować, posiadam możliwość tworzenia różnych rzeczy, stron, gier, aplikacji. Ponadto nigdy nie wiadomo, czy to co napiszę, nie przyczyni się do poprawy życia, czy choćby rozrywki dla tysięcy osób. W pewien sposób pozwala mi to też przez pisanie skryptów na automatyzację wielu rzeczy, dzięki czemu ja mogę skupić się na innych i rezygnować w swoim życiu z tego, czego robić nie chcę. Chciałbym, ale niestety nie mogę Ci zagwarantować, że programowanie będzie fajne również dla Ciebie.”

Michał Gellert, blog: michalgellert.pl

Czy programowanie jest fajne?

„Fajne to mało powiedziane. Na każdym kroku podkreślam jak wiele możliwości daje i jak na wielu polach można się wykazać. Dzisiaj większość otaczających nas rzeczy posiada w sobie jakiś kawałek kodu. To nie są tylko aplikacje na telefonach czy komputerach. Nie ma chyba dziedziny, która nie potrzebowała by oprogramowania. Czujesz potrzebę ratowania świata? Znajdź firmę produkujące urządzenia medyczne. A jeśli czujesz w sobie moc destrukcji czemu nie spróbować pracy dla wojska przy projektowaniu super nowoczesnej broni ;). Interesują Cię sporty motorowe? Tam także potrzebują programistów. To co chcę powiedzieć to to, że programowanie daje nieograniczone możliwości pracy przy różnych projektach, w różnych dziedzinach, jest kreatywne oraz innowacyjne.”

Grzegorz Kotfis, blog: gkotfis.blogspot.com

Na koniec

  • Programowanie pozwala na odczuwanie satysfakcji z rozwiązywania problemów i jednocześnie z tworzenia czegoś co może być użyteczne
  • Zawód programisty ma też swoje wady i może być frustrujące
  • Dla jednej osoby programowanie może być pasją, dla innej programowanie może być czymś zupełnie nieatrakcyjnym
  • Jeśli interesuje Cię ten temat warto spróbować swoich sił i przekonać się czy jest to dla Ciebie ciekawe i fajne zajęcie

Chciałam podziękować wymienionym blogerom, którzy wzięli udział w tworzeniu tego tekstu. Dobrze jest poznać punkty widzenia innych osób i zobaczyć jak uzasadniają swoje zdanie.

A Ty co myślisz na ten temat? Czy programowanie jest fajne? Co lubisz w programowaniu? A co Cię denerwuje? Koniecznie daj znać w komentarzu!

Czy programowanie jest trudne?

czy programowanie jest trudne

czy programowanie jest trudne

Czy programowanie jest trudne?

Jak to jest z tym programowaniem? Czy jest proste czy trudne? Przekonaj się co doświadczeni programiści, blogerzy sądzą na ten temat.

Czy programowanie jest trudne?

„Powiedziałbym, że jest to „easy to learn, hard to master”. By stworzyć pierwszy prosty program, wystarczy parę godzin nauki. Później im dalej w las, tym więcej drzew. 😉 Szczególnie gdy pisany program to komercyjny produkt i pracuje nad nim więcej osób. Wtedy kończy się wesoła twórczość i zaczyna się praca.”

Mateusz Kupilas; blog: javadevmatt.pl

Czy programowanie jest trudne?

„To zależy – między innymi od osoby, która wykonuje tę czynność. Wygląda to podobnie jak np. nauka gry na gitarze – niektórym zajmie więcej czasu poznanie podstawowych chwytów, innym mniej. W obydwu przypadkach trzeba jednak ćwiczyć, żeby osiągnąć cel. Nic nie przychodzi samo i od razu – niektórzy potrzebują 2 dni, a inni 2 miesięcy. Problemem może być to, że ciągle coś się zmienia, powstają nowe frameworki, które warto znać. Trudnością może być wybranie swojej ścieżki i podążanie nią.

Ale z drugiej strony też wydaje mi się, że istnieje pewna idealizacja programowania. Niektórzy z góry zakładają, że jest trudne. Bo tu trzeba trochę logiki, umysłu ścisłego, znajomości komputerów i nie wiadomo czego jeszcze. A tak na prawdę można powiedzieć że coś jest trudne dopiero po tym, jak się tego spróbuje 🙂

Pomijam sam fakt, że termin programowanie jest bardzo ogólny – jeden język może być łatwiejszy do opanowania (na poziomie podstawowym) w krótkim czasie, a drugi trudniejszy. Poznanie podstaw może być proste. Może być łatwo tworzyć mało skomplikowane algorytmy lub aplikacje. Ale wraz z czasem okazuje się, że trzeba umieć coraz więcej, trzeba poświęcić wiele czasu i napisać wiele linijek kodu, żeby być naprawdę dobrym. Wiąże się to również z odpowiedzialnością za własny kod.”

Programmer Girl, blog: programmer-girl.com

Czy programowanie jest trudne?

„I tak i nie, z przewagą na tak – przynajmniej na razie. Z jednej strony jest łatwe ponieważ – właściwie niezależnie od technologii – program robi dokładnie to, co rozkazał programista (bądź programistka). Z drugiej strony jest trudne, ponieważ program robi dokładnie to, co rozkazał rzeczony programista. Inaczej mówiąc: programowanie wymaga innego trybu myślenia, ponieważ komputer bezmyślnie wykona nawet najgłupszy rozkaz i nie domyśli się, że twórcy chodziło o coś innego. Być może właśnie z tego powodu programowanie jest postrzegane jako dziedzina wymagająca szczególnych umiejętności, jednak w mojej opinii najtrudniejszą częścią pisania programu jest zapewnienie skuteczności działania zbliżonej do 100% – w celu uniknięcia ingerencji ludzkiej w jego późniejsze działanie – oraz odszyfrowywanie tego, co klient miał na myśli w specyfikacji :)”

KrzaQ, blog: dsp.krzaq.cc

Czy programowanie jest trudne?

„To zależy. Z mojej perspektywy – ścisłowca – było to naturalne. Najpierw bawiłem się Flashem, potem w technikum Turbo Pascal i Java. Na studiach głównie csharp, okazjonalnie C++ i Java, gdzie skupiłem się na mobilkach, którymi wtedy byłem zafascynowany. Była to najpierw nauka na zasadzie prób i błędów z tutoriali, a potem szkoła dobrego kodu. Jak już się zrozumie podstawy oraz o co w tym wszystkim chodzi, dalsza nauka idzie naturalnie. Obecnie zajmuję się nauką w technologii Unity3d , ASP.Net Core oraz Xamarin. Wszystkie wymienione technologie wykorzystują język c# od Microsoftu, który proponuję do nauki jako jeden z pierwszych języków.”

Szymon Motyka, blog: szymonmotyka.pl

Czy programowanie jest trudne?

„Początki bywają trudne. W moim przypadku musiałem się przyłożyć.
Programowanie na pewno jest pełne wyzwań! Tych lżejszych, łatwiejszych oraz takich gdzie wysilasz przez kilka dni szare komórki na maksa aby znaleźć jakieś rozwiązanie problemu. Wszystko zależy od charakteru projektu nad którym pracujesz. Popularne dzisiaj aplikacje webowe mogą być łatwe do napisania i szybko możemy uzyskać tzw. mvp (minimum valuable product) – tam próg wejścia nie jest wysoki i może dać wiele satysfakcji w krótkim okresie czasu. Ale jeśli marzysz o napisaniu własnej biblioteki przetwarzającej dźwięk czy obraz video to może okazać się to nie lada wyzwaniem na dłużysz okres. I trudność nie sprawi ci brak znajomości danego języka, algorytmów tylko to czy będziesz wytrwale dążył do celu. I dla niektórych to będzie największa trudność w programowaniu!”

Grzegorz Kotfis, blog: gkotfis.blogspot.com

Czy programowanie jest trudne?

„Tak. Ale jak każda dziedzina ma swoje łatwiejsze i trudniejsze obszary. Przy czym programowanie jest baaardzo rozległą dziedziną. Pytanie to przywodzi mi na myśl pewną analogię. Czy języki obce są trudne? Czy ich nauka jest trudna? Ja powiedziałabym, że to zależy. Zależy o jakim języku mówimy. Zależy jak danej osobie idzie przyswajanie języków obcych. Zależy, który to język z kolei 😉 W programowaniu jest tak samo. Najtrudniejsze są początki. Pierwszy język, pierwsza aplikacja, pierwszy problem. Wraz z wiedzą i doświadczeniem staje się coraz łatwiejsze. Języki i technologie stają się tylko narzędziami w drodze do celu.”

Żaneta Jażdżyk, blog: nettecode.com; grupa edukacyjno-motywacyjna: Programowanie – wsparcie na starcie

Czy programowanie jest trudne?

„To tak po prawdzie trudne pytanie! Zależy, jaką działką programowania się zajmujemy. Ja od dawna siedzę w webdevie, początkowo w backendzie, obecnie niemal wyłącznie we frontendzie. To ten dział programowania, w którym nikt nie będzie się z Ciebie śmiał, że nie ogarniasz matematyki czy innych rzeczy, które nieodłącznie kojarzą się ludziom z „prawdziwym” programowaniem. Ba, śmiem powiedzieć, że do JS-a nie dotarły nawet w pełni wszystkie „dobre praktyki” z jego starszych braci (na was patrzę, Java i PHP) – co ma zarówno swoje minusy, jak i plusy.

Jak na razie dość ponury roztaczam widok frontendu: ani wzorców projektowych nie ma za bardzo, ani matematyka niepotrzebna… Niemniej nie jest to świat pozbawiony wyzwań. Wciąż, mimo nieustannych starań ze strony W3C i WHATWG, istnieją spore różnice pomiędzy poszczególnymi przeglądarkami i wciąż frontend sprowadza się w głównej mierze do pisania takiego kodu, by działał znośnie w jak największej liczbie przeglądarek. Mimo to narzędzia, jakie mamy obecnie, są o wiele, wiele bardziej złożone niż choćby 5 lat temu. W czasach jQuery wystarczyło siąść i napisać kod. Dzisiaj potrzebujemy Node.js, npm, Babela, Rollupa, ESlinta, Mochę, Karmę, Chai, Sinona, Istanbula, żeby… móc zacząć pisać kod. Sama kompleksowość obecnego ekosystemu wskazuje na to, że frontend się dynamicznie rozwija. Liczba frameworków, która powstaje _codziennie_ jest po prostu zatrważająca. Wystarczy wyjechać na dzień do puszczy i jesteśmy w lesie…

Samo programowanie jako tako nie stało się trudniejsze: to wciąż tylko pisanie kodu. Niemniej mnogość przeglądarek, szybki rozwój ekosystemu i standardy sieciowe pojawiające się i zmieniane dosłownie codziennie sprawiają, że ogarnięcie tego wszystkiego wymaga sporej wprawy. Zwłaszcza, że przeszliśmy od padających płatków śniegu do skomplikowanych aplikacji do edytowania treści multimedialnych czy wręcz do tworzenia silników gier. Większość czasu obecnie spędza się nad projektowaniem rozwiązań poszczególnych problemów niż nad faktycznym rozwiązywaniem problemu. I to sprawia, że programowanie jako proces stało się bardziej złożone – ale czy trudniejsze? Raczej po prostu bardziej dojrzałe.”

Comandeer, blog: comandeer.github.io/blog/

Czy programowanie jest trudne?

„Cóż, pytanie o to, czy coś jest trudne nigdy nie miało zbyt wiele sensu. Bo czy pływanie, taniec, matematyka i historia jest trudna? To zależy od podejścia do problemu. Na pewno jest wymagające, kiedy zaczynasz się go uczyć. I jeśli chcesz, to będzie wymagające przez całe życie, jeśli za każdym razem będziesz uczył się nowych dziedzin. Ale po zrozumieniu którejś z nich, można już w niej w miarę swobodnie pracować, zwracając tylko uwagę na nowości w niej. Ale najistotniejsze, żeby sytuacja w której ciągle pojawia się coś nowego była dla Ciebie komfortowa.”

Michał Gellert, blog: michalgellert.pl

Czy programowanie jest trudne?

„Odpowiedź nie jest taka prosta. Bo to zależy. Równie dobrze można spytać, czy rozwiązywanie sudoku jest trudne, albo czy Tetris to trudna gra. No na początku to banał, ale z czasem staje się coraz trudniejsze. Podobnie jest z programowaniem. Na początku się wszystkiego boisz (zaznajamiasz z klockami Tetrisa, albo poznajesz ogólne zasady sudoku), po pewnym czasie już znasz podstawową składnię danego języka i wydaje ci się, że możesz wszystko. Dopiero mija pewien czas i zauważasz, że ty tak naprawdę dalej nic nie umiesz. To jest ten moment, kiedy wkraczasz na ścieżkę mistrza programowania i zaczynasz się uczyć. Ja osobiście lubię wyzwania i nudzi mnie, gdy jest zbyt łatwo.”

Kot Źrodłowy, blog: kot-zrodlowy.pl

Na koniec

  • Programowanie to umiejętność, która pozwala na tworzenie ciekawych i praktycznych rzeczy.
  • Nauka programowania (tak jak nauka języków obcych, gry na gitarze) wymaga czasu, praktyki oraz determinacji.
  • Szybkość nauki programowania zależy od predyspozycji, wcześniejszego doświadczenia i czasu jaki poświęcimy na rozwijanie się w tym kierunku.
  • Praca programisty wymaga nieustannego kształcenia.
  • Nigdy nie jest za późno na naukę programowania.
  • Programowanie wymaga rozwiązywania problemów, co może być fajne i angażujące, ale również frustrujące.

Chciałam podziękować wymienionym blogerom, którzy wzięli udział w tworzeniu tego tekstu. Cieszę się, że wspólnie mogliśmy zastanowić się nad tą kwestią.

Mam nadzieję, że artykuł ten jest dla Ciebie pomocny. Powiedz, co Ty sądzisz na ten temat? Czy programowanie jest trudne? Koniecznie daj znać w komentarzu!

Jak zostałam Junior Frontend Developerem?

jak zostalam forntend developerem

jak zostalam forntend developerem

Chcesz wiedzieć skąd ja się wzięłam i jak to się stało, że zaczęłam się interesować Frontend Developmentem?

Gdyby ktoś 5 lat temu powiedział, że będę programistką, to odpowiedziałabym mu, że ma bardzo ciekawe poczucie humoru.

Programowanie? To na pewno dla mnie za trudne

Moja wiedza o programowaniu była bardzo ograniczona. W gimnazjum na informatyce dowiedziałam się, że jest coś takiego jak HTML, tam jest head i body i z tego powstaje strona internetowa. Z programowaniem kojarzyła mi się konsola, gdzie programista wpisuje jakieś dziwne niezrozumiałe dla mnie komendy, w wyniku czego na ekranie pojawia się długi ciąg znaków. Czarna magia!

Komputery mnie nie pociągały. Wolałam nie kombinować, bo bałam się, że coś zepsuję. Z resztą, nie miałam w otoczeniu osoby, która mogłaby mnie do tego zachęcić i powiedzieć więcej na ten temat.

Sprawnie posługiwałam się pakietem Microsoft Office, korzystałam z programów graficznych i potrafiłam skonfigurować drukarkę.

Z branżą IT zaczęłam mieć większą styczność w pracy, w telewizji internetowej, w agencji reklamowej i firmie programistycznej gdzie zajmowałam się marketingiem i rekrutacją. Czasami zdarzało mi się nawet testować manualnie aplikacje mobilne bądź strony internetowe.

Jak zaczęła się moja przygoda z Frontend Developmentem?

Mój partner jest Frontend Developerem. Czasami wspominał mi co robi, nad czym obecnie pracuje, a ja słuchałam i powoli oswajałam się ze światem IT. Często wracał do domu po pracy i dalej siadał do kodu robiąc swoje projekty. Pewnego wieczoru ja usiadłam koło niego i powiedziałam „Pokaż mi co Ty tam robisz. Na czym to polega?”. Paweł odpalił CodePena i wytłumaczył mi podstawy. Tego wieczoru napisałam swoje pierwsze linie kodu i co więcej, spodobało mi się to. Przez następne kilka dni poznawałam tajniki HTMLa i CSSa. Jak czegoś nie rozumiałam to pytałam, a Paweł cierpliwie i interesująco odpowiadał. I tak to się zaczęło. Po miesiącu ciekawych konwersacji i poznawania podstaw podjęłam decyzję. Chcę zostać programistką i będę do tego konsekwentnie dążyć. Nie wiedziałam jeszcze wtedy za dużo na ten temat, ale ciekawił mnie ten dla mnie nowy, pełen możliwości świat.

Studia? Rzuciłam na pierwszym roku

Od gimnazjum interesowałam się geografią. Miałam spore osiągnięcia w tej dziedzinie. Wiedziałam, że nie chcę zostać nauczycielem geografii. Rozważałam rozwój w kierunku geoinformatyki lub geologii. Nie pamiętam już kto mi to powiedział, ale mocno wpłynęło to na moje życie: „Łatwiej z informatyka niż z geografa stać się geoinformatykiem”. Co możliwe, że jest prawdą. Moja wiedza z informatyki była mocno ograniczona, a sama utożsamiałam się z byciem geografem. Myślałam, że sobie nie poradzę. Kilka dodatkowych czynników spowodowało, że zdecydowałam się pójść w kierunku geologii.

Ze studiów geologicznych zrezygnowałam na pierwszym roku. Nie była to do końca przemyślana decyzja. Jednak po 6 latach interesowania się geografią i geologią przyszedł czas na zmiany. Studia zaczęły mnie denerwować: koszmarny plan zajęć, brak przemyślanej organizacji, wredni wykładowcy. Zajęć z geologii było tyle co kot napłakał. Z resztą, co ja będę robić tych studiach? Potrzebowałam zmiany, ale nie wiedziałam co chcę ze sobą zrobić.

Mam 22 lata i pracowałam w wielu branżach

To może dla niektórych brzmieć dość dziwnie, ale taka jest prawda. Mam 22 lata i pracowałam w wielu branżach. Po tym jak rzuciłam studia podejmowałam się różnych prac. Nie zawsze było łatwo, ale pomogło mi to poznać samą siebie. Z ciekawszych rzeczy to sprzedawałam żywe choinki przez internet z dowozem do klienta (współzałożycielka startupu), robiłam notatki wizualne z webinarów dla klientów zagranicznych, rekrutowałam programistów, byłam kelnerką i pokojówką w ośrodku wypoczynkowym w Australii. A to nie wszystko, mogłabym jeszcze trochę wymienić ;). Względnie długo zajmowałam się też marketingiem, ale nudziło mnie to i nie dawało mi to satysfakcji. Stąd pojawiła się u mnie motywacja aby zdobyć zawód, który będzie dla mnie interesujący. W pracy chciałam się czuć zaangażowana, chciałam szybko widzieć efekty swojej pracy.

Postrzegałam błędy jako coś złego

Dlaczego wcześniej nie przyszło mi do głowy, żeby się zainteresować programowaniem?

Myślę, że nie chciałam się czuć głupia, że czegoś nie rozumiem. Myślałam, że to jest za trudne (mimo, że tego nigdy tego nie spróbowałam). Sądziłam, że programowaniu jest na pewno dużo matematyki, a ja za nią nie przepadałam, bo czasami popełniałam błędy, nie umiem biegle liczyć w pamięci i czasami mi coś nie wychodzi. Wtedy jeszcze postrzegałam błędy jako coś złego i myślałam, że mi one nie mogą się przytrafiać. Tak to jest właśnie jak się jest perfekcjonistą. Unikałam tego w czym potencjalnie mogło mi coś nie wyjść. Rozwijałam się w kierunku, w którym odnosiłam sukcesy.

Blog programistyczny? Założyłam go spontanicznie

Wcześniej mi nawet przez myśl nie przyszło, że mogłabym prowadzić bloga o tematyce związanej z IT. Wszystko wydarzyło się spontanicznie. W marcu zobaczyłam czyjegoś posta na Facebooku, szukał on partnera do projektu w ramach Daj się Poznać, napisał również, że każdy uczestnik w ramach konkursu musi prowadzić bloga. Weszłam z ciekawości na stronę konkursu i okazało się, że zapisy dobiegają końca i to jest ostatnia szansa, żeby się znaleźć się na liście uczestników. Podjęłam decyzję. Trzeba było na poczekaniu wymyślić nazwę bloga, kupić domenę, wymyślić temat projektu. Postanowiłam, że dotrwam do końca konkursu i udało mi się. Plan został zrealizowany w 200%, ponieważ nie dość, że spełniłam wymagania i zostałam finalistką, to zajęłam 3 miejsce w tym konkursie, przełamałam swoje bariery i poznałam wielu ciekawych ludzi.

Moje dalsze plany

Zamierzam dalej pogłębiać swoją  wiedzę z zakresu Frontend Developmentu. Interesuję mnie również UX. Na pewno będę rozwijać bloga, mam kilka ciekawych pomysłów, które chcę zrealizować. Wiem, że jestem na początku drogi związanej z programowaniem i że jeszcze sporo muszę się nauczyć. Nie jest łatwo (czasami się denerwuję, bo coś mi nie działa) ale każde rozwiązanie problemu daje mi ogromną satysfakcję i kolejną lekcję.

Wnioski

  • Działaj, ponieważ to działania kreują rzeczywistość
  • Nie mów, że coś jest dla Ciebie za trudne jeśli tego nie spróbowałeś / spróbowałaś
  • Bądź ciekawy / ciekawa, pytaj napotkanych przez siebie ludzi co robią, co ich pasjonuje i ucz się od nich
  • Zawsze będzie ktoś kto wie na dany temat więcej od Ciebie, nie pozwól żeby to Cię ograniczało i hamowało

 

Reaktywacja animacji SVG za pomocą JavaScript

Niedawno w ramach konkursu  organizowanego przez Kodu.je wykonałam projekt animacji grafiki SVG. Mogę się pochwalić, że jury konkursu przyznało mojej animacji wyróżnienie, z czego się bardzo cieszę. 🙂 Efekty mojej pracy można oglądać na CodePenie:

See the Pen SVG animation by SowaProgramuje (@sowaProgramuje) on CodePen.

Jak dodać klasę na elemencie SVG za pomocą JavaScript?

Podczas pracy nad tym projektem napotkałam na pewien problem. Chciałam żeby klasa ze zdefiniowaną animacją była nadawana, a następnie usuwana po konkretnym interwale czasowym. W ten sposób chciałam ponownie zainicjować animację, dlatego potrzebowałam nadać klasę elementowi SVG za pomocą JavaScript. Ku mojemu zaskoczeniu .className() nie zadział

Trochę mi zajęło czasu, żeby rozwiązać ten problem, z pomocą przyszedł StackOverflow. Dotarłam do informacji, że na elemencie SVG klasę w czystym JavaScript można nadać za pomocą .element.classList.add().

Pamiętaj, manipulacja SVG różni się od manipulacji HTML. Jest to dość obszerny i ciekawy temat warty zgłębienia.

Reaktywacja animacji SVG za pomocą JavaScript

Animacja w CSS może być nieskończona (animation-iteration-count: infinite;), bądź wykonana konkretną ilość razy (animation-iteration-count: 2;). Animację można również opóźnić (animation-delay: 200ms;), ale działa to jedynie raz, na początku animacji. Stąd pojawiła się potrzeba napisania funkcji, która pozwoli na zatrzymanie i ponowne wznowienie animacji, co umożliwi jej zapętlenie i jednocześnie dodanie interwałów, w których animacja nie jest wykonywana.

Przykładowo: animujemy symbol Yin yang i chcemy, żeby obrócił się o 360 stopni, zatrzymał się się na 2 sekundy i następnie ponownie wykonał obrót o 360 stopni oraz chcemy aby ten cykl się powtarzał w nieskończoność.

See the Pen SVG animation reactivate by SowaProgramuje (@sowaProgramuje) on CodePen.

Aby uzyskać taki efekt napisałam funkcję w JS. Przyjmuje ona 4 argumenty:

  • id elementu, który chcemy animować – w kodzie nadajemy id na danym elemencie
  • animationTime – czyli całkowity czas animacji; i tutaj uwaga – jeśli wykonują się np. 3 powtórzenia  (animation-iteration-count: 3;), musimy pomnożyć czas trwania jednej animacji (animation-duration: 500ms) przez ilość powtórzeń. W tym przypadku animationTime wyniesie 1500ms.
  • interval – czas pomiędzy zakończeniem jednego powtórzenia animacji a rozpoczęciem kolejnego
  • animationDelay – opóźnienie animacji; dlaczego się zdecydowałam na to rozwiązanie? Napotkałam na buga, wydaje mi się, że był związany z ładowaniem się stylów oraz funkcją .setTimeout(), ale niestety nie byłam sama w stanie zidentyfikować problemu (jak wiele muszę jeszcze się nauczyć!). Domyślam się, że nie jest to najpiękniejsze rozwiązanie, może ktoś będzie umiał jakoś inaczej to rozgryźć. Należy jednocześnie pamiętać, że animation-delay w CSS powinien wynosić zero.

W funkcji wzięłam pod uwagę to, że dany element może mieć już wcześniej nadaną klasę. Nie nadpisuję jej, tylko dodaję dodatkową klasę, która jest taka sama jak id. Tutaj niestety należy pamiętać, że przy takim rozwiązaniu klasa z animacją zadeklarowaną w CSS musi być taka sama jak id elementu. Nie jest to do końca optymalne rozwiązanie, dlatego zastanawiam się jak można to udoskonalić. Jak masz jakieś sugestie to napisz w komentarzu.

Myślę, że zagadnienie animacji plików SVG jest bardzo ciekawe i na pewno będę je jeszcze zgłębiać. Jeśli masz jakieś uwagi lub pytania, daj znać w komentarzu 🙂

Chciałam Ci podziękować za to, że jesteś na tym blogu 🙂

Update:

Kod refactoringu:

See the Pen SVG animation after refactoring by SowaProgramuje (@sowaProgramuje) on CodePen.