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. 🙂

Gala Finałowa konkursu Daj się Poznać

sowa programuje

sowa programuje

Czas na małe podsumowanie konkursu i sobotniej Gali Finałowej!

Konkurs Daj się Poznać to świetna inicjatywa. Nie tylko daje ogromne korzyści każdemu kto zdecyduje się w niego zaangażować, ale również wszystkim osobom, które potem korzystają z powstałych wartościowych treści. Nie dość, że podczas rozwijania projektu uczysz się programowania, piszesz bloga, poznajesz ciekawych ludzi, to jeszcze przełamujesz swoje bariery. Gala Finałowa była mega pozytywnym i inspirującym wydarzeniem! Bardzo się cieszę, że mogłam poznać część z uczestników osobiście i mam wielką nadzieję, że kiedyś jeszcze się spotkamy.

Moja prezentacja podczas konferencji

Czy się stresowałam? Tak, i to bardzo! Wyjście na scenę przed grono programistów w siedzibie Microsoftu w Warszawie było dla mnie sporym wyzwaniem. Szczególnie, że poziom wypowiedzi pozostałych prelegentów był na prawdę wysoki. Ku mojemu zaskoczeniu po kilku pierwszych wypowiedzianych zdaniach poczułam się całkiem swobodnie. Nawet udało mi się raz trochę rozśmieszyć publiczność, co udało mi się po raz pierwszy w życiu 🙂

3 miejsce… SowaProgramuje!

3 miejsce w głosowaniu publicznym było dla mnie ogromnym zaskoczeniem. Cieszę się bardzo i dziękuję wszystkim, którzy głosowali na mojego bloga. Myślałam, że nikt nie będzie czytać tych moich postów. Na początku wręcz wstydziłam się mówić innym, że zaczęłam pisać bloga o tematyce programistycznej. Okazało się, że „done is better than perfect” i mimo, że jest się początkującym w jakiejś dziedzinie to można się z innymi czymś ciekawym podzielić. Tutaj zacytuje jedno z haseł konkursu „Przełamuj bariery, zadziwiaj siebie i innych”, które podsumowuje mój udział w konkursie.

Co dalej?

Nie spodziewałam się, że blogowanie tak bardzo mi się spodoba. Zdecydowanie będę konstytuować pisanie. Jeśli masz jakieś propozycje postów daj znać w komentarzu, postaram się rozwinąć podane zagadnienie.

 dsp2017-przelamuj-bariery

Aplikujesz o pracę? Poprowadź rozmowę rekrutacyjną!

rozmowa rekrutacyjna

rozmowa rekrutacyjna

Rozmowy rekrutacyjne to nie najprostsze rozmowy.  Ale jest sposób, żeby sprawić, że będą łatwiejsze.

Można taką rozmowę poprowadzić! W tym poście zdradzę Ci jak możesz, jako starający się o pracę programista / programistka możesz poprowadzić rozmowę rekrutacyjną.

Jak się przygotować?

Są dwie istotne rzeczy które należy zrobić przed rozmową kwalifikacyjną (oprócz przygotowania odpowiedniego ubioru, zebrania informacji o firmie do aplikujemy o pracę itd.) powinieneś/powinnaś:

  1. Przygotuj pytania, które będziesz mógł/mogła zadać podczas rozmowy (pod tym linkiem pobierz PDFa z najczęstszymi pytaniami)
  2. Przygotuj swoje mocne strony oraz osiągnięcia

Jak z tego skorzystać?

Po pierwsze, pamiętaj że rozmowa kwalifikacyjna to nie jest wywiad ani prezentacja. Rozmowa to interakcja dwóch stron. A co za tym idzie możemy zadawać pytania w trakcie, nie zostawiaj ich na sam koniec. W ten sposób nie dość że dowiemy się więcej o firmie do której aplikujemy o pracę, to dodatkowo będziemy mogli skierować rozmowę na tematy które nas interesują.

Pamiętaj – pytania należy zadawać z wyczuciem. Postaraj się wychwycić momenty w trakcie rozmowy, w których możesz zadać adekwatne pytanie. Nawiązuj do tego co mówi osoba rekrutująca. W ten sposób sprawisz pozytywne wrażenie osoby zainteresowanej danym stanowiskiem i firmą. Pokażesz również, że uważnie słuchasz osoby, która prowadzi rekrutację.

O co możesz zapytać podczas takiej rozmowy?

Na ten temat pisałam już wcześniej – listę najczęstszych pytań znajdziesz tutaj. Wybierz te pytania, które są dla Ciebie najistotniejsze.

Osoba rekrutująca podczas prezentacji firmy może na cześć z tych pytań już odpowiedzieć. Istnieje taka tendencja, że im lepiej firma się zaprezentuje tym mniej będziesz musiał zadać pytań.

Rozmowa techniczna, jak sobie z nią poradzić?

Podczas rozmowy rekrutacyjnej w pewnym momencie dochodzi do sytuacji, w której programista z firmy będzie starał się dowiedzieć czy Twoje umiejętności i wiedza są zgodne z tym co masz wpisane w CV. Jak się najlepiej zaprezentować?

Staraj się kierować rozmowę na tematy,  w których czujesz się pewnie. Tutaj się przydają nasze mocne strony i osiągnięcia, które przygotowaliśmy sobie jeszcze przed rozmową. Mów o tym co Cię pasjonuje, o swoich prywatnych projektach, o konferencjach, o Twoim blogu, o konkursie w którym brałeś / brałaś udział. Dygresje są tu jak najbardziej wskazane. I wiesz co? Istnieje bardzo duża szansa, że osoba która nas rekrutuje pociągnie Twój temat. 

Chwalenie się i kierowanie rozmowy na wygodne dla Ciebie tematy pomoże Ci się wyróżnić spośród innych kandydatów. Dzięki temu zostaniesz pozytywnie zapamiętany i zwiększy to Twoje szanse na sukces. 

Jeśli zostaniesz zapytany o coś o czym nie masz pojęcia – nie bój się tego otwarcie powiedzieć. Bądź konkretny i wykaż zainteresowanie oraz chęć dowiedzenia się więcej na ten temat.

Zadawaj pytania również podczas rozmowy technicznej. Pozwoli Ci to nie tylko poznać odpowiedź na dane pytanie, ale dostarczy Ci multum informacji o firmie, do której aplikujesz

Zapamiętaj:

  • Rozmowa kwalifikacyjną można poprowadzić
  • Przygotuj pytania i swoje mocne strony
  • Podczas rozmowy zadawaj pytania (z wyczuciem)
  • Kieruj rozmowę na tematy w których czujesz się pewnie

Mam nadzieję, że moje rady i przemyślenia są dla Ciebie pomocne.  Ja jakiś czas temu pracowałam jako rekruterka w firmie IT, zajmowałam się też marketingiem, ale zdecydowałam się przekwalifikować i obecnie jestem junior forntend developerem. Stąd mam ciekawe przemyślenia ta temat rozmów rekrutacyjnych w branży IT.

Post ten powstał na podstawie mojej prezentacji, którą wygłosiłam na Gali Finałowej konkursu Daj się Poznać w Microsofcie w Warszawie, z czego jestem niezwykle dumna 😀 Jeśli masz jakieś pytania to zapraszam do dodawania komentarzy. Zapraszam również do udostępniania mojego posta 🙂

Update: można już oglądać na nagranie z mojej prezentacji

 

Konkurs na animację grafiki SVG – Kodu.je

konkurs animacja svg css

konkurs animacja svg css

Konkurs Daj się Poznać dobiegł już prawie do końca. Czas zabrać się za inne ciekawe rzeczy. Dzisiaj znalazłam konkurs na stronie Kodu.jePolega on na zanimowaniu pliku SVG za pomocą CSSa i/lub JSa. 

  • do 3 lipca 2017
  • kod zamieszczamy na CodePenie
  • pracę wysyłamy na adres email:  kontakt@kodu.je, z tytułem „Konkurs Animacja SVG” oraz odnośnikiem do CodePena
  • do pracy nie używamy żadnych bibliotek / frameworków
  • „do pliku z animacją można dodać własne elementy svg”
  • „uczestnik który chce, aby jego praca została opublikowana na jednej z podstron kodu.je bądź w filmie na YouTube do zgłoszenia konkursowego musi załączyć zgodę. Możne zrobić to w treści e-maila”

Link do regulaminu oraz link do grafiki konkursowej

A tutaj jest tutorial stowrzony przez kodu.je dotyczący animacji plików SVG.

Ja osobiście wcześniej robiłam kurs animowania SVG za pomocą CSS na stronie TeamTreeHouse. Jest tam darmowy 7 dniowy trial, więc spokojnie można zrobić ten 85 minutowy kurs, a nawet więcej. Moim zdaniem materiały są bardzo przydatne, dlatego podczas nauki kodowania i programowania korzystałam z płatnej subskrypcji.

 

Kliknij w ten link a dostaniesz 50% zniżki na pierwszy miesiąc subskrypcji w TeamTreeHouse.

Jeśli zdecydujesz się wziąć udział w konkursie to zostaw linka do swojego projektu w komentarzu! Ja na pewno będę brać udział i pochwalę się efektem swojej pracy 😉