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.

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

błędy frontend deweloperów

W programowaniu od samego początku warto dbać o dobre praktyki. Jednak czasami w trakcie nauki można przeoczyć lub zbagatelizować pewne kwestie. Stąd u początkujących Frontend Developerów pojawiają się błędy w kodzie. Razem z Mariuszem Bugajskim, autorem bloga blog.bugajsky.pl i zwycięzcą konkursu Daj się Poznać 2017, zdecydowaliśmy się napisać serię postów o tej tematyce, aby pomóc w eliminacji takich błędów.

Pamiętaj:

  1. Unikaj nadużywania id
  2. Unikaj nadawania stylów elementom w HTML
  3. Nie ładuj wszystkich skryptów w sekcji head dokumentu
  4. Nadawaj nazwy w języku angielskim
  5. Zmieniaj nazwy klasy/id/funkcji we wszystkich miejscach gdzie są używane
  6. Uważaj na ścieżki do plików
  7. Pamiętaj o semantyce
  8. Strzeż się literówek
  9. Pamiętaj o initial-scale=1 w meta tagu viewport
  10. Unikaj niepotrzebnego zagnieżdżania i nadużywania tagów div
  11. Bonus 😉

Poniżej znajdziesz wyjaśnienie do każdego z tych podpunktów.

1. Unikaj nadużywania id

Nie wszystkie elementy w Twoim kodzie HTML muszą mieć id. Nadanie id powinno być przemyślane i mieć swój konkretny cel. Jeśli nie zamierzasz stylować danego elementu używając id, bądź manipulować nim poprzez użycie JavaScript, nie jest ono potrzebne. Pamiętaj również, że id jest unikatowe – tylko jeden element na stronie może mieć dane id.

Można np. używać pseudoselektorów (tj. first-child), które umożliwiają wybieranie elementów bez nadawania im klasy czy id.

See the Pen Good example of naming by SowaProgramuje (@sowaProgramuje) on CodePen.

Tutaj stylujemy bezpośrednie dzieci elementu o klasie .menu oraz korzystamy z pseudoselektora, dzięki któremu nie musimy stylować elementu przez id.

2. Unikaj nadawania stylów elementom w HTML

Pamiętaj, że HTML jest językiem do opisywania struktury, dlatego unikaj dodawania stylów na poszczególnych elementach za pomocą atrybutu <style> (style inline). Najlepiej zapisywać style w jednej regule w CSS.

Dlaczego należy tak robić?

Ponieważ jest to antypattern, czyli łamanie podstawowych założeń. W razie jakiś problemów z kodem będzie Ci dużo łatwiej go debugować, jeśli style będą tylko w CSSie. Nie będziesz musieć przeszukiwać dwóch różnych plików lub co gorsza nadpisywać kodu. To prowadzi do bałaganu, a tego każdy Frotend Developer powinien unikać jak ognia.

Czasami bywa tak, że manipulujemy kodem używając do tego JavaScript. Na przykład po kliknięciu na button zmieni on kolor z czerwonego na niebieski. W tym przypadku najlepiej jest nadać elementowi klasę, która będzie nadawała mu dane styl.

Używając jQuery i metody .css() nadajemy atrybut w HTML

See the Pen Change button color jQuery by SowaProgramuje (@sowaProgramuje) on CodePen.

Używając metody .addClass() nie dodajemy stylów inline tylko klasę

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

3. Nie ładuj wszystkich skryptów w sekcji head dokumentu

Jeśli nie potrzebujesz, aby kod JavaScript był ładowany w sekcji head, należy umieścić go przed tagiem zamykającym body. Wynika to z tego, że skrypty ładują się synchronicznie, czyli jeśli masz przykładowo 5 różnych skryptów które ładujesz w sekcji head to muszą się one w całości pobrać zanim w ogóle dojdzie do budowania DOM, co znacznie opóźni ładowanie strony internetowej. Dlatego jeśli nie potrzebujesz, aby skrypt odpalił się przed załadowaniem DOM umieszczaj go przed </body>.

4. Nadawaj nazwy w języku angielskim

W programowaniu bardzo duży nacisk stawia się na uniwersalność kodu. Stąd nadawanie nazw klas, funkcji itd. w innym języku niż angielski może przysporzyć problemy. Wyobraź sobie co by było, gdybyś trafił / trafiła do projektu, w którym nazwy pisane są w języku Swahili. Mogłoby być dość ciężko ze zrozumieniem co w danym kodzie się dzieje. Dlatego pamiętaj, używaj języka angielskiego, obecnie jest to standard w tej branży i tego się trzymajmy. 😉 Więcej o nadawaniu nazw pisałam tutaj.

5. Zmieniaj nazwy klasy/id/funkcji we wszystkich miejscach gdzie są używane

Twój kod nie działa, a chwilę wcześniej zmieniłeś / zmieniłaś klasę bądź id jakiegoś elementu lub nazwę funkcji? Istnieje spore prawdopodobieństwo, że nazwa nie została uaktualniona wszystkich miejscach, w których jest używana. Jeśli chcesz zmienić nazwę – użyj wyszukiwania we wszystkich plikach i zastąp konkretną nazwę.

6. Uważaj na ścieżki do plików

Nie wyświetla się jakaś grafika w Twoim projekcie? A może nie ładują Ci się style? Pierwsza rzecz jaką należy sprawdzić w takiej sytuacji to ścieżka do pliku, którą podałeś/podałaś. Sprawdź też czy nie zrobiłeś literówki w nazwie pliku lub folderu, oraz czy rozszerzenie pliku się zgadza np.: pułapką jest .jpg oraz .jpeg.

<img src=”heroimage.jpg”> – w przypadku, gdy plik heroimage.jpg znajduje się w tym samym folderze co dany plik HTML

<img src=”folderName/heroimage.jpg”> – w przypadku, gdy heroimage.jpg w podfolderze folderu, w którym jest plik HTML

<img src=”/folderName/heroimage.jpg”> – w przypadku, gdy heroimage.jpg jest w rootcie

<img src=”../heroimage.jpg”>w przypadku, gdy heroimage.jpg poziom wyżej (gdy musisz się cofnąć)

7. Pamiętaj o semantyce

Semantyka to dostosowanie tagów w htmlu do tego czym są dane elementy na stronie tj. jeśli chcesz zrobić listę używaj tagu <ul> bądź <ol> a nie <p>.

To nie jest semantyczny kod:

See the Pen Non semantic code by SowaProgramuje (@sowaProgramuje) on CodePen.

To jest semantyczny kod:

See the Pen Example of semantic code by SowaProgramuje (@sowaProgramuje) on CodePen.

To nie zawsze jest takie oczywiste np.: jeśli tworzymy menu to również używajmy listy, a nie divów i paragrafów. Tak samo jeśli chcemy opisać input to używaj tagu <label> a nie <p>, ponieważ <label> jest stworzony właśnie do tego.

Nie nadużywaj tagu <h1>, jest zarezerwowany dla najważniejszych treści na stronie np. : tytuł artykułu.

8. Strzeż się literówek

Literówki to kolejny powód dla którego Twój kod może nie działać. Zanim poprosisz o pomoc starszego programistę upewnij się, że dobrze przepisałeś nazwę klasy, funkcji czy jakiegoś atrybutu. Mi osobiście kilka razy zdarzyło się zamiast src=” ” napisać scr=” ” i potem się bardzo dziwiłam, że zdjęcie się nie ładowało.

Jak uniknąć literówek?

  • Korzystaj z wtyczek do edytorów, które automatycznie podpowiadają konkretne własności, wartości, nazwy metod i funkcji.
  • Kopiuj nazwy klas, id – w ten sposób unikniesz niepożądanych problemów

9. Pamiętaj o initial-scale=1 w meta tagu viewport

Twoja strona nie jest responsywna pomimo, że dodałeś media queries? Upewnij się, że w sekcji head dokumentu masz meta tag:

<meta name=”viewport”, content=”initial-scale=1.0”, content=”width=device-width” >

Dlaczego jest to potrzebne?

To powoduje, że strona skaluję się do takiej szerokości jakiej jest dane urządzenie, na którym wyświetlana jest strona.

Na portalu CSS-tricks jest artykuł na ten temat.

10. Unikaj niepotrzebnego zagnieżdżania, a także nadużywania tagów div

Struktura w HTML powinna być wykonana jak najmniejszą ilością elementów. Jeśli potrzeby dwie kolumny i w każdej paragraf to nie zagnieżdżaj ich w divy tylko nadaj im szerokość po 50%.  Tak samo jeśli chcesz aby np. span zajmował całą szerokość rodzica, to nie wrappuj go w diva tylko nadaj mu display block.

Przykład zbyt dużego i niepotrzebnego zagnieżdżenia:

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

Poprawny sposób:

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

Rezultat jest ten sam, ale w przykładzie drugim mamy bardziej przejrzystą strukturę.  Trzymajmy się zasady KISS (Keep it simple Stupid)

Bonus! 🙂

11. Usuwaj martwy kod

Martwy kod (ang. dead code) to fragment kodu, który nic nie wnosi do naszego projektu: tj. kod który jest zakomentowany bądź np. funkcja, która nigdzie nie jest i nigdy nie zostanie wykorzystana. Jeśli jakiś fragment kodu nie jest potrzebny należy go usunąć. Najlepiej jest to zrobić podczas refactoringu.

Podsumowanie

Postaraj się aby dbanie o dobrą jakość kodu stało się Twoim nawykiem. To naprawdę nie kosztuje wiele, a robi ogromną różnicę.

Spodobał Ci się ten artykuł i chcesz dowiedzieć się więcej? Koniecznie odwiedź bloga Mariusza Bugajskiego, tam niebawem znajdziesz nasz kolejny wartościowy post z tej serii.

Masz jakieś pytania? Daj znać w komentarzu

12 przydatnych narzędzi Frontend Developera

frontend developer narzędzia

frontend developer narzędzia

Oto 12 darmowych narzędzi online, które są przydatne w pracy Frontend Developera.

1. Generator cieni

Problem z tworzeniem cieni na elementach w CSSie? Korzystaj z tego generatora, zdecydowanie ułatwia sprawę 😉

generator box-shadow
źródło: http://www.cssmatic.com/box-shadow

2. Generator gradientów

Potrzebujesz na swojej stronie użyć gradientu? Nie ma sprawy, oto proste narzędzie do mieszania kolorów i generowania kodu.

generator gradientów
źródło: http://www.colinkeany.com/blend/

3. Cubic Bézier generator

Dla fanów CSSa i animacji polecam ten generator krzywych Béziera. Dzięki nim twoje animacje będą ciekawsze i bardziej efektowne.

krzywa beziera
źródło: http://cubic-bezier.com/

4. Lorem impsum

Znajdziesz tu przykładowe teksty: paragrafy krótkie i długie, a także elementy list. Wystarczy tylko skopiować i wkleić do swojego projektu.

lorem ipsum generator
źródło: http://lorem2.com/

5. Font awesome

Szukasz darmowych ikon? Font awesome to miejsce, które ci się bardzo spodoba. Zostało stworzone z myślą o frontend developerach. Ikony dostępne jako czcionka. Wersja premium jest płatna.

font awesome
źródło: http://fontawesome.io/

6. Google fonts

Szeroki wybór darmowych czcionek – prosto do Twojego projektu.

google fonts
źródło: https://fonts.google.com/

7. Walidator

Chcesz mieć pewność, że Twój kod jest poprawny? Skorzystaj z walidatora W3C (World Wide Web Consortium). Wklej swój HTML i sprawdź czy nie masz żadnych błędów. Pliki CSS możesz sprawdzać pod tym adresem: https://jigsaw.w3.org/css-validator/

walidator
źródło: https://validator.w3.org/

8. Can I use… ?

Zastanawiasz się czy to co chcesz użyć w swoim kodzie jest wspierane przez wszystkie przeglądarki? Wejdź na Can I use, tam znajdziesz potrzebne informacje.

can i use
źródło: https://caniuse.com/

9. Compress jpg

Kompresja plików jest istotna pod kątem optymalizacji stron internetowych. Warto o to zadbać z wielu powodów m.in. prędkość ładowania stron będzie dużo szybsza.

compress jpg
źródło: http://compressjpeg.com/

10. Pexels

Portal z darmowymi stockowymi zdjęciami. Bez obawy możesz je wykorzystywać do celów prywatnych jak i komercyjnych. Zdjęcia mają licencję Creative Commons Zero (CC0), co oznacza, że nie musisz podawać autora zdjęcia.

pexels
źródło: https://www.pexels.com/

11. HTTP status dogs

Co łączy protokół HTTP i psa? Kod odpowiedzi! Jeśli masz problem z zapamiętaniem znaczenia kodu odpowiedzi koniecznie odwieź tą stronę 😉

Wolisz koty? Zerknij tutaj 😉

http status dogs
źródło: https://httpstatusdogs.com/

12. Stack Overflow

Nie jest to do końca narzędzie, ale prawie każdy developer z tego korzysta. Masz problemu z kodem? Poszukaj odpowiedzi na StackOverflow. Jak nie znajdziesz rozwiązania zawsze możesz zadać pytanie, deweloperzy z całego świata gromadzą się tam aby pomagać sobie nawzajem. 

stack overflow
źródło: https://stackoverflow.com/

Dodatkowo:

13. Avocode

Aplikacja do dzielenia się plikami graficznymi, kooperacji, generowania snippetów kodu, eksportowania grafik, mierzenia paddingów, marginesów. W przeciwieństwie do poprzednich narzędzi ta aplikacja płatna, ale ma darmowy okres próbny. Więcej o Avocode pisałam w tym artykule.

Avocode
źródło: https://avocode.com/

 

A jakie jest Twoje ulubione narzędzie, które pomaga ci w pracy? Podziel się  w komentarzu! 

Przewodnik początkującego freelancera – Upwork

freelancer developer

freelancer developer

Masz dość siedzenia w biurze i chcesz zostać freelancerem? Przed podjęciem ostatecznej decyzji należy dobrze się zastanowić.

Gdzie się zarejestrować?

Jest wiele portali freelancerskich np.:

Upwork, Guru i Freelancer – tutaj może zarejestrować się każdy. Toptal jest portalem dla zaawansowanych profesjonalistów – aby się tam dostać trzeba przejść szereg rozmów i trudnych testów. Gwarantuje to wysoki poziom usług świadczonych przez freelancerów oraz lepsze i większe zlecenia.

Ja osobiście korzystałam z Upworka. Mam konta również na Guru i Freelancer, ale swoje pierwsze zlecenie złapałam na Upworku i tu już zostałam.  Chciałam podzielić się swoim doświadczeniem.

Dlaczego warto skupić się na jednym portalu?

Dzięki skupieniu się na pracy na jednym portalu, zbudujesz sobie „markę”, masz dłuższą historię zleceń, masz więcej opinii na jednym portalu, twój profil się lepiej pozycjonuje, a w rezultacie możesz podnosić stawkę godzinową. Na Upworku są dodatkowo „wyróżnienia” po kilku pozytywnych zleceniach dostajesz status „rising talent”, a jeśli masz jeszcze więcej zleceń i pozytywne opinie możesz zyskać tytuł „top rated freelancer”. Klienci podczas wyszukiwania freelnacerów mają np. opcję pokaż tylko „top rated”.

Jak wybierać zlecenia?

Korzystaj z filtrów przy wyszukiwaniu zleceń
upwork freelancing
Widok filtrów, aplikowanie na zlecenia; źródło: upwork.com

Historia klienta

To ważny filtr, który często pomaga zwiększyć skuteczność wysyłanych proposali. Czasami zupełnie nowi zleceniodawcy dodają ogłoszenia, ale nikogo nie zatrudniają. Stąd warto odfiltrowywać osoby, które nigdy wcześniej nikogo nie zatrudniły i nie mają żadnej historii ani opinii.
Historia klienta Upwork
źródło: upwork.com

 

Budżet

Możemy filtrować ogłoszenia po kwocie jaką klient jest gotowy zapłacić za zlecenie. Czasami się zdarza, że wynagrodzenie nie jest współmierne do ilości pracy, stąd też nie zawsze to jest najlepsze kryterium do filtrowania.

Budżet klienta Upwork
źródło: upwork.com

Poziom zaawansowania

  • Entry level – najmniejsze stawki i najmniejsze doświadczenie. Wybierz ten poziom jeśli masz niewielkie doświadczenie (dopiero zaczynasz pracować w jakiejś branży), nie masz zbyt dużego portfolio i szukasz pierwszej pracy jako freelancer.
  • Intermediate – średnie stawki i średnie doświadczenie. Poziom dla osób, które zrealizowały już kilka projektów, którymi mogą się pochwalić (możesz np. dodać zewnętrzne projekty do swojego portfolio na Upworku).
  • Expert level – najwyższe stawki i zaawansowane zlecenia. Ten poziom jest dla osób, które mają kilkuletnie doświadczenie w branży, mają duże portfolio i doświadczenie jako freelancer.
poziom zaawansopwania Upwork
źródło: upwork.com

Długość projektu

Jeśli zależy ci na znalezieniu dodatkowej pracy na dłuższy okres (np. 5h w tygodniu) możesz szukać zleceń filtrując po długości projektu np. projekt dłuższy niż 3 miesiące. Z kolei jak zależy ci na krótkim zleceniu możesz zaznaczyć np. projekt krótszy niż tydzień.
długość projektu Upwork
źródło: upwork.com

Ilość proposali

Jeśli wyszukasz ogłoszenia, które mają np. mniej niż 5 proposali i zostały dodane niedawno do systemu to teoretycznie mamy większe szanse na dostanie zlecenia, gdy zleceniodawcy zależy na czasie.  Nie jest to jednak regułą, inni zleceniodawcy będą czekać np. kilka dni i dopiero wtedy będą prowadzić rozmowy, żeby wybrać najodpowiedniejszą osobę.

Ilość proposali Upwork
źródło: upwork.com

Sortowanie zleceń

Istnieje również możliwość sortowania zleceń wg. kryteriów: najnowsze zlecenia, najbardziej trafne zlecenia (najbardziej odpowiednie do zastosowanych filtrów), klienci o najlepszych opiniach, klienci z największymi wydatkami na portalu.

Sortowanie Upwork
źródło: upwork.com
Najlepiej utworzyć najbardziej odpowiadającą dla ciebie kombinację filtrów. Po wpisaniu frazy kluczowej powinny pojawić się zlecenia z nią związane. Jak otworzysz dokładny opis zlecenia koniecznie popatrz boczny panel z historią zleceniodawcy. Tutaj będziesz mógł/mogła zobaczyć np. kiedy klient dołączył do portalu, ile średnio płaci freelancerom za godzinę, ile w sumie wydał pieniędzy na Upworku oraz jakie są o nim opinie.
Upwork freelancer
Potencjalny dobry klient; źródło: upwork.com
Upwork freelancer
Klient, który szuka freelancerów za niską stawkę godzinową; źródło upwork.com
Upwork freelancer
Klient zupełnie nowy, bez historii zleceń; źródło upwork.com

Jak pisać proposale?

Proposal to wiadomość do osoby ogłaszającej zlecenie na portalu freelancerskim. To sposób w jaki można przekonać zleceniodawcę aby zdecydował się na współpracę właśnie z Tobą. Co zrobić aby zwiększyć swoje szanse dostania zlecenia? Przede wszystkim pisz spersonalizowane wiadomości:

 

  • Po pierwsze, dokładnie przeczytaj treść ogłoszenia.
  • Zwracaj się do klienta po imieniu – nie jest to zawsze możliwe, ponieważ dane personalne klienta są ukryte, ale poniżej opisu ogłoszenia znajduje się sekcja „Client’s Work History and Feedback” – tam czasami można dowiedzieć się jak klient ma na imię. Czasami zdarza się, że klient sam podpisze się imieniem i nazwiskiem w treści ogłoszenia.
  • Używaj zwrotów i wyrażeń, które używa zleceniodawca, pokażesz w ten sposób, że wiesz czego dokładnie potrzebuje.
  • Zadaj kilka pytań dotyczących projektu, wykaż zainteresowanie i chęć pomocy.
  • Zapewnij zleceniodawcę, że zadbasz o profesjonalne wykonanie.
  • Testuj które zwroty najlepiej działają.
freelancing upwork
Poszukaj w opiniach o kliencie jego imienia; źródło: upwork.com

Stała stawka czy godzinowa?

Istnieje podział na projekty „fixed price” (z góry ustalona stawka końcowa) oraz „hourly” (praca na godziny). Co jest lepsze? Nie ma jednoznacznej odpowiedzi na to pytanie.

 

Początkującym developerom polecam stawkę stałą. Dlaczego? W przypadku, gdy podczas zlecenia pojawi się jakaś trudność i będziesz musiał/musiała sobie z tym problemem poradzić, nie będziesz musieć się zastanawiać czy logować czas potrzebny na znalezienie rozwiązania. Ile zejdzie ci czasu na projekt – twoja sprawa. Wiadomo im szybciej tym lepiej, ale na początek trudno jest szacować ile dany projekt zajmie ci czasu. Pamiętaj, przed podpisaniem takiego kontraktu należy dokładnie poznać oczekiwania klienta oraz jasno określić np. ile uwzględniasz poprawek (zdarza się, że klient zmienia zdanie w trakcie kontraktu – zabezpiecz się na takie sytuacje). Jeśli np. jesteś web developerem to upewnij się jakie wersje przeglądarek mają być wspierane (żeby potem nie było przykrych niespodzianek i dodatkowej pracy). Fixed price jest też dobrym rozwiązaniem również dla osób pracujących kreatywnie np. dla grafików. Ciężko jest pracować na godziny jeśli twoja praca jest wykonywana bez użycia komputera.

 

Pamiętaj, do korespondencji z klientem korzystaj koniecznie z Upwork chat (nie używaj Skype, Whatsapp, maila). W razie problemów miej wszystkie ustalenia z klientem właśnie zapisane na chacie. To ułatwi rozwiązanie wszelkich sporów.

 

Stawka godzinowa jest też dobrym rozwiązaniem. Nie musisz się martwić, jak okaże się że pracy jest więcej niż się spodziewałeś/spodziewałaś na początku projektu. Zwykle przed podpisaniem kontraktu klient wymaga oszacowanie ilości godzin. Przy tym rozwiązaniu możesz też liczyć czas na korespondencję z klientem – w końcu to też praca. Klient może ustalić maksymalną ilość godzin, które możemy przepracować w jednym tygodniu np. max 20h – w celu zabezpieczenia się przed zbyt dużą ilością zalogowanych godzin przez freelancera.

Time tracker – czyli jak logować czas pracy?

Time tracker to specjalna aplikacja desktopowa Upworka – instalujesz, logujesz się na swoje konto. Wybierasz projekt nad którym obecnie pracujesz, piszesz komentarz – co aktualnie robisz, klikasz button i aplikacja zaczyna liczyć ci czas pracy. Program robi jeden screenshot na każde 10 minut pracy (aplikacja zawsze informuje kiedy to robi). Osoba która cię zatrudnia ma potem do tego dostęp/podgląd i musi zatwierdzić, że faktycznie pracowałaś/pracowałeś w tym czasie. Program również liczy kliknięcia myszką i użycie klawiatury. Jeśli przez przypadek zapomnisz wyłączyć time tracker i aplikacja zrobi screenshota jak jesteś np. na Facebooku – spokojnie można usunąć te konkretne 10 min czasu pracy.
Upwork freelancing time tracker
Time tracker – aplikacja desktopowa – źródło Upwork

Kontrakt – co warto wiedzieć

Do kontraktu może dość w na dwa sposoby:  ty aplikujesz na zlecenie albo zleceniodawca zaprasza cię do współpracy. Jeśli uda Ci się przekonać klienta i dogadacie się na konkretne warunki, to klient wysyła ci ofertę (z dokładną stawką godzinową / fixed price). Jeśli zgadzasz się na warunki, musisz zaakceptować ofertę oraz cały regulamin portalu freelancerskiego. Wtedy rozpoczyna się kontrakt. Może być określony czas na wykonanie zlecenia, ale nie musi. W przypadku stawki godzinowej w trakcie kontraktu możesz ją obniżyć, nie możesz jej zwiększyć. W przypadku fixed price, gdy okaże się że klient ma jeszcze więcej pracy niż na początku było to ustalone, może dodać tzw. milestones (kolejne etapy projektu) i co jest fajne, to jeśli klient zaakceptuje pierwszy milestone – to dostaniesz wypłatę z tej części projektu szybciej. Jeśli nie ma milesnotes w projekcie całą kwotę dostajesz dopiero na koniec (to znaczy około tydzień po zakończeniu projektu – w tym czasie klient ma prawo do reklamacji – może zgłosić jakieś uwagi). Przy większych kwotach (powyżej kilkaset dolarów) zdecydowanie polecam poproszenie zleceniodawcy o stworzenie milestones. Możesz również dostać napiwek, jeśli klient będzie zadowolony. Na sam koniec ty wystawiasz opinię klientowi, a on Tobie. Ważne jest to aby pamiętać, że prawa autorskie przechodzą na klienta.

 

Profil płatny czy bezpłatny?

Istnieje coś takiego jak płatny i bezpłatny profil na Upworku. Konto bezpłatne umożliwia ci na zaaplikowanie na około 30 ogłoszeń (dokładniej mamy 60 puntów na wykorzystanie w ciągu miesiąca – zwykle zlecenia „kosztują” 2 punkty). Plan „Plus” pozwala nam na aplikowanie na około 37 zleceń (mamy 75 punktów). Dodatkowo jeśli zlecenie na które zaaplikujesz, a pracodawca w ciągu miesiąca nikogo nie zatrudni, twoje punkty zostaną zwrócone. Plan „Plus” pozwala na podgląd ofert innych freelancerów na konkretne ogłoszenie (minimalna, średnia i maksymalna stawka jaką podali inni freelancerzy). Koszt planu „Plus” to $10 miesięcznie. Osobiście korzystałam z niego przez miesiąc i stwierdziłam, że nie jest on mi potrzebny.

Opłaty

Na chwilę obecną (06.2017) Upwork pobiera opłaty za pośredniczenie o wysokości:
upwork freelancing opłaty
Opłaty; źródło: upwork.com
  • 20% od ustalonej kwoty za pierwsze zarobione $500 z jednym klientem
  • 10% od ustalonej kwoty w przypadku, gdy zarobimy u jednego klienta więcej niż $500,01, ale mniej niż $10 000
  • 5% od ustalonej kwoty, jeśli kontrakty z jednym klientem przekroczą kwotę $10 000

Czyli, należy pamiętać, że podana przez nas kwota (ustalona z klientem) zostanie odpowiednio pomniejszona o prowizję dla Upworka!

Niestety to nie jest koniec opłat. Każda wypłata środków z Upworka na PayPala, bądź na konto kosztuje $2. Możemy też trochę stracić na przewalutowaniu (to już zależy jakie masz konto). No i jeszcze należy zapłacić podatek dochodowy.

Na koniec

  • Warto robić dobrą robotę i dbać o komunikację, wtedy mamy szansę że klienci do nas wrócą lub polecą innym osobom.
  • (Uwaga dla początkujących deweloperów!) dobrze jest najpierw pójść do pracy stacjonarnej na jakiś czas – to daje mega dużo umiejętności do pracy jako freelancer.
  • Praca freelancera pozwala na dowolność, ale może być dość wymagająca pod względem kontaktu z klientem. Jeśli zdecydujesz się na takie rozwiązanie bardzo polecam zrealizować dwa / trzy zlecenia zanim jeszcze zdecydujesz się zrezygnować ze stałej pracy (szczególnie jeśli zamierzasz np. wyjechać za granicę na dłuższy okres i utrzymywać się z pracy jako freelancer). Pozwoli Ci to na przekonanie się czy takie rozwiązanie jest dla Ciebie odpowiednie oraz pozwoli Ci na stworzenie lepszego profilu.
  • Pierwsze zlecenie jest najtrudniej złapać (czeka cię naprawdę sporo pisania proposali), potem jest już coraz łatwiej. Po jakimś czasie klienci sami zaczną się do ciebie zgłaszać.

Jeśli masz jakieś pytania daj znać w komentarzu. Mam nadzieję, że ten artykuł jest dla ciebie pomocny. 🙂