girls.js – darmowe warsztaty z JavaScript dla kobiet

Warsztaty girls.js

Warsztaty girls.js

Girls.js – darmowe warsztaty z JavaScript dla kobiet

Jak już pisałam w poprzednim poście jestem główną koordynatorką darmowych warsztatów z JavaScript w Krakowie. Inicjatywa nosi nazwę girls.js i została zapoczątkowana w Warszawie.

Podczas pierwszej krakowskiej edycji zapewniamy miejsca dla 9 uczestniczek. Rekrutacja dobiegła już końca, ogłosiliśmy już listę szczęśliwych warsztatowiczek. Warto nadmienić, że został pobity w liczbie osób na jedno miejsce na warsztatach – aż 15,44 kandydatek! Pokazuje to jak bardzo potrzebne są takie eventy i jak dużo kobiet jest zainteresowanych wzięciem udziału w warsztatach. Mają one mnóstwo energii i chęci do nauki, co widać po przesłanych do nas wioskach. Wiem, bo wszystkie je czytałam, a było ich sporo bo aż 139, z czego większość pytań była opisowa.

Materiały szkoleniowe

Podczas jednodniowych warsztatów mentorzy pomajagą stowrzyć dziewczynom interaktywną galerię – materiały są ogólno dostępne i każdy może się z nich uczyć. Na każdego mentora przypadają 3 dziewczyny, a warsztaty trwają 8h. Wspólnie będziemy poznawać podstawy JavaScriptu i mamy zamiar się bardzo dobrze przy tym bawić!

Dlaczego nie zdecydowałam się być mentorką?

Na codzień pracuję jako Junior Frontend Developer, jednak nie zdecydowałam się na bycie mentorką podczas pierwszej edycji girls.js. Może odzywa się trochę syndrom oszusta, który mówi mi, że wciąż za mało umiem. Uznałam, że podczas tej edycji zajmę się głównie koordynacją (rekrutacja, szukanie sponsorów, organizacja sali, mentorów, kateringu itd.). Sprawia mi ogromną radość. Czasami warto wytknąć nos poza edytor kodu ;). Myślę, że podczas tej edycji nasza krakowsta ekipa nabierze doświadczenia i podczas kolejnej edycji będziemy mogli przygotować się na większą ilość uczestniczek. Wówczas i ja odważę się zostać mentorką. 🙂

Kilka cytatów z wniosków <3

Programowanie jest dla mnie bardzo satysfakcjonujące. Próbuję się uczyć go samodzielnie, ale nie jestem pewna czy idę w dobra stronę tzn. czy uczę się na pewno tego co mi się przyda. Niezmiernie podoba mi się również inicjatywa zachęcania kobiet do rozpoczęcia programowania. Uważam że mają one wielki potencjał! Chciałabym poznać inne kobiety, które pasjonuje programowanie i może nawet nawiązać nowe przyjaźnie

Zdaję sobie sprawę, że będąc w moim wieku(37 lat) może być mi trudno zacząć pracę od nowa w branży, gdzie dominują młodzi ludzie i na dodatek jest mało kobiet. Ale właściwie dlaczego nie spróbować?  Mam nadzieję, że ten kurs będzie dużym krokiem w stronę realizacji tego marzenia, planu.

Od jakiegoś czasu chodziła mi po głowie myśl o przebranżowieniu. Myślałam, że to pod wpływem mody, ale raz po raz powracała coraz silniejsza. W końcu postanowiłam zrobić kilka kursów na udemy i codecademy… i się zachwyciłam! Wtedy postanowiłam zmienić branżę. Tak na dobrą sprawę jestem na samym początku drogi, a przede mną lata nauki… Ale hej, dla mnie to jest fantastyczna wiadomość! Warsztaty to dla mnie kopniak i niesamowita bomba motywacyjna, żeby ruszyć mocno do przodu i się nie poddawać. I poznać fajnych ludzi.

Fajnie, że w końcu będziecie działać w Krakowie, czekałam na Was!

girls.js Łódź

Z rekrutacją ruszamy 7 maja (o północy w nocy z niedzieli na poniedziałek). Potrwa ona do 20 maja. Same warsztaty odbędą się w sobotę, 16 czerwca i mamy na nich minimum 9 miejsc.

girls.js w Twoim mieście?

Co ciekawe zgłaszały się do nas dziewczyny, nie tylko z Krakowa, ale i z innych miast. I ciągle dostajemy pytania: kiedy warsztaty we Wrocławiu, Białymstoku i innych miastach. Jako koordynatorka serdecznie zachęcam do zgłaszania się do naszej organizacji, chętnie wesprzemy inicjatywę w kolejnych miejscach.

Co dajemy na start? Materiały szkoleniowe, które stworzyliśmy. Pełne know-how, wsparcie naszych trenerów i trenerek, nasze kontakty i doświadczenie, informacje i promocję na naszej stronie i Facebooku. Kolejne miasta stają się częścią kaczuszkowej rodziny. Nie mając jednak dobrej znajomości specyfiki danego miasta, nie skoordynujemy logistyki i organizacji całego wydarzenia – to należy do inicjatorek lub inicjatorów tamtejszej edycji. Nie kontrolujemy, staramy się jak najmniej narzucać, wszystkie wątpliwości omawiamy w atmosferze zaufania. Serdecznie was zachęcamy do działania. Na początku może się to wydawać trudne, ale…

…z własnego doświadczenia mogę powiedzieć, że uznaję maksymę „better done, than perfect”. Chodzi głównie o dobrą zabawę, poznawanie nowych osób i dzielenie się swoją pasją.

girls.js Kraków odbędzie się 11 – 12maja. 11 maja czeka nas wieczór integracyjny, a 12 maja odbędzie się oficjalna część warsztatów. Jedna z organizatorek jest fotografem, więc możecie liczyć na relację z wydarzenia.

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

10 pomysłów na ciekawe menu

10 pomysłów na ciekawe menu

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

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

1. Toggle Burger Menu Animation

Autor:  Marian Breitmeyer

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

2. Page Tilt Effect

Autor: Marco Fugaro

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

3. CSS-only menu hover effects

Autor: sathish

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

4. CSS3 Responsive menu effect

Autor: Bogdan Blinnikov

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

5. Gooey hamburger menu

Autor: huyle

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

6. Vertical Layout with Navigation

Autor: Ettrics

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

7. Fullscreen flexbox overlay navigation

Autor: Mirko Zorić

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

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

8. Responsive Navigation Ideas

Autor: Andrzej Dubiel

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

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

9. Triangular Mobile Menu

Autor:  Jo Dahl

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

10. Mobile Menu Style

Autor: Raiden Kaneda

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

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

Podczas procesu przebranżawiania korzystałam z portalu Team Tree House, którego obecnie jestem partnerem. Rejestrując się przez kliknięcie na ten banner otrzymasz 4 miesiące zniżki na tej platformie. Znajdziesz tam sporo zaawansowanych kursów, nie tylko z Frontendu.

Jeśli umiesz już trochę JavaScript to  szczególności teraz polecam Ci kurs AJAXa:

https://teamtreehouse.com/library/ajax-basics

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.

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.

Jeśli rozważasz naukę Angulara koniecznie najpierw zapoznaj się z TypeScript. Będzie Ci dużo prościej wtedy ogarnąć ten framework. Inną popularną biblioteką jest React. Ja osobiście najbardziej lubię i na codzień w pracy piszę we frameworku, który nazywa się Vue.js.

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

 

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 😉

 

 

 

Projekt A/B testing – update

Po urlopowej przerwie czas na powrót do projektu. Teraz skupiam się głównie na udoskonalaniu kodu, który dotychczas napisałam.

Udało mi się z naprawić funkcję detectUserAgent(), która zwraca string z nazwą przeglądarki z której korzysta użytkownik. Sprawdzam czy jest to Chrome, Firefox, Opera, Edge czy Safari, a w pozostałych przypadkach zwracam string ‚unknown’. Wynik zapisuję w obiekcie z informacjami o użytkowniku.

W mojej bibliotece jest możliwość przeprowadzania testów AB na określonej przeglądarce. Wystarczy wpisać jako argument funkcji testOnParticularUserAgent() nazwę przeglądarki na której chcemy przeprowadzić test oraz nazwę funkcji, która ma zostać wykonana. Czyli np. testOnParticularUserAgent(chrome, testColor) – funkcja ta testuje tylko i wyłącznie na Chromie background color danego elementu.  Natomiast funkcja testColor() przymuje trzy argumenty: colorA, colorB i id elementó który chcemy testować.

Dodatkowo stworzyłam funkcję umożliwiającą wykonywanie testów na określonych rozdzielczościach ekranu.  testOnScreensBetweenWidths() przyjmuje trzy argumenty:  minimalną szerokość na której chcemy testować, maksymalną szerokość oraz jako trzeci argument wskazujemy funkcję, która ma zostać wykonana w razie spełnienia warunków.  W przypadku, gdy warunek nie jest spełniony, w local storage zapisuję informację w postaci stringa.

I jeszcze jedna ważna rzecz, czyli funckja eventLister(). Na każdym elemencie który jest testowany dodawany jest event listener, który informuje o tym czy ten element został kliknięty, a informacja o tym zapisywana jest w local storage.

W przyszłym tygodniu nadal namierzam udoskonalać mój kod. To jest mój 19. konkursowy wpis na moim blogu (w ramach konkursu DajSięPozać 2017). Jestem bardzo zadowolona, że wzięłam w nim udział i już prawie udało mi się spełnić wszystkie wymagania – czyli blogowanie i rozwijanie projektu przez min. 10 tygodni. Bardzo dużo się nauczyłam i dzięki temu zrobiłam postęp w nauce JSa i nie tylko. Była i jest to dla mnie spora motywacja. Wielkie dzięki dla organizatora konkursu Macieja Aniserowicza z bloga Devstyle. Na prawdę świetna inicjatywa! 

Projekt AB Testing – ciąg dlaszy

W tym tygodniu, udało mi się dodać kawałki kodu, które zapisują wynik jednego testu w localStorage. Zapisuję czy test został wykonany, który element na stronie jest testowany oraz która z opcji została wylosowana. Dodatkowo, mam uniwersalną funkcję, która nasłuchuje na kliknięcia na elemencie o danym ID. Gdy dany element zostaje kliknięty, dodaję o tym informację w localStorage. Na poniższym screen shotcie, możemy zobaczyć wynik jednego z testów.

local-storage-ABtesting

Docelowo, funkcja testująca będzie egzekwowana tylko raz w jednej sesji. Dlatego, będę też musiała pobierać informacje z localStorage, gdy np. użytkownik zamknie kartę. W tym tygodniu zaczęłam pisać funkcję, która wykrywa przeglądarkę z której korzysta użytkownik strony. Wymaga ona jeszcze dopracowania. Dodatkow chcę napisać fukcję wykrywającą system operacyjny i zapisywać te wyniki w obiekcie z informacjami o użtykowniu. Będę to wykorzysywać do egzekwowania testów warunkowych.

 

Pytania techniczne na rozmowie na stanowisko Junior Frontend Developer

Pytania techniczne junior frontend developer

Pytania techniczne junior frontend developer

Pytania techniczne, które pojawiły się na moich rozmowach kwalifikacyjnych na stanowisko Junior Frontend Developer:

  • Rozwiń skrót HTML i CSS
  • Co to jest box model?
  • Jakie korzyści daje Sass?
  • Jaka jest różnica pomiędzy mixin a funkcją w Sass?
  • Czy w CSS są funkcje?
  • Do czego służy tag data w HTML?
  • Czym różni się null od undefined?
  • Czym się różni “==” i “===”?
  • Czy korzystałaś/korzystałeś z repozytorium?
  • Jak dostaniesz plik .psd to co robisz żeby zacząć pracę? Jak wygląda proces?
  • Co robimy z kodem przed wrzuceniem na produkcję?
  • Co to są pseudo selektory? Jakie znasz? Jakie dają możliwości
  • Z jakiego edytora korzystasz?
  • Czy korzystałaś/korzystałeś z task runnera?
  • Jakie znacz rodzaje display? Omów różnice
  • Czym różni się id od classy?
  • Czym różni się position relative od absolute?
  • Co to jest position fixed?
  • Czy miałaś/miałeś do czynienia z Wodrpressem?
  • Czy korzystałaś/korzystałeś z flexbox?
  • Jakie są różnice między Bootsrap 3 a 4?
  • Czy miałaś do czynienia z walidacją formularza?
  • Z jakich systemów operacyjnych korzystasz?
  • Jak wybrać jakiś element w jQuery?
  • Ile elementów może mieć taką samą klasę?
  • Jakich narzędzi używasz do debugowania kodu?
  • Jak wybrać w jQuery elementy input typu text?
  • Jak rozwiążesz konflikt powstały podczas mergowania branchów?
  • Czy znasz jakiś preprocesor HTMLa?
  • Co to są media
  • Co to jest W3C?
  • Co to jest branch?
  • Co to jest GIT?
  • Co to jest Gulp? Do czego służy?
  • Co to jest npm?  Do czego służy?
  • Co to jest JSON? Gdzie się z tego korzysta?
  • Co to jest API?
  • Co to jest AJAX?
  • Co to jest RWD?

Pytania z rozmowy ogólnej:

  • Nad jakimi projektami procowałaś? Jak to wyglądało?
  • W którą stronę chciałabyś się rozwijać jeśli chodzi o frontend dewelopment?
  • Czy pracowałaś/pracowałeś w zespole podczas projektu programistycznego?
  • Jak się uczyłaś/uczyłeś  programowania?
  • Czy byłaś/byłeś na jakiś kursach programistycznych?
  • Z jakich źródeł korzystasz?
  • Czy możesz się pochwalić swoimi projektami?
  • Wymień swoje trzy zalety
  • Jesteś ołówkiem, zostałaś/zostałeś wrzucony do wiadra z wodą, jak się wydostaniesz?

Uzyskiwanie infomracji o użytkowniku JS

W moim projekcie AB Testing udało mi się wprowadzić  funkcjonalność pozwalającą na zaciąganie danych o użytkowniku i jego przeglądarce. Nigdy wcześniej tego nie robiłam, dlatego wymagało to początkowego researchu. Wynik na razie loguję w konsoli w postaci obiektu. Dzięki temu możemy sprawdzić kiedy użytkownik otworzył naszą stronę, jaki jest jego język w przeglądarce oraz jakie wymiary ma jego okno przeglądarki. Możemy też sprawdzić z jakiej przeglądarki korzysta. Na razie sprawdzam czy jest to Chrome, Firefox czy Safari.

infomration about user

Dodatkowo mam już wstępną wersję funkcji, która pozwoli na losowanie testowanych elementów tylko raz w podczas jednej sesji, a nie na odświeżeniu karty. Z kolei informacje o kliknięciach będę musiała zapisywać w local storage, ponieważ te dane nie są usuwane po zamknięciu sesji. Pomyślałam, że fajna byłaby możliwość testowania pewnych elementów na stronie, jeśli zostanie spełniony określony warunek np. tylko na użytkownikach Androida, albo na użytkownikach, których ekran ma większą rozdzielczość niż X pixeli. Do tych celów będę korzystać z danych, które zaciągam o użytkowniku. Będzie to kolejna rzecz, którą chciałabym zrealizować w tym projekcie.

 

 

Środowisko deweloperskie – czego potrzebuje developer do pracy?

Tak się akurat złożyło, że na laptopie mam świeżo zainstalowany nowy system operacyjny – Ubuntu 16.04, dlatego muszę od początku skonfigurować środowisko deweloperskie, stąd powstał pomysł napisania o tym posta.

Czego potrzebuje frontend developer do pracy?

  1. Ruby – np. do pisania w Sass
  2. Edytor – do pisania kodu
  3. Node.js – a dokładniej potrzebny jest Node Package Manager
  4. Git – system kontroli wersji
  5. Przeglądarka – najlepiej Google Chrome

Zaczynamy od znalezienia konsoli, inaczej terminala. Alternatywnie można użyć skrótu Ctrl + Alt + T.

terminal-ubuntu

Ruby 

Otworzyliśmy terminal i możemy zająć się instalacją. Tutaj wpisujemy polecenia tekstowe. Dokładny opis oraz komendy dla Ubuntu i innych systemów operacyjnych znajdują się w dokumentacji Ruby. Korzystamy tutaj z sudo oraz apt-get

i przytoczę definicje z Wikipedii:

sudo (z ang. substitute user do) – program stosowany w systemach operacyjnych GNU/Linux, Unix i podobnych, w celu umożliwienia użytkownikom uruchomienia aplikacji, jako inny użytkownik systemu. Najczęściej służy ono do uruchamiania aplikacji zarezerwowanych dla administratora zwanego rootem.”

apt-get– prosty interfejs linii poleceń służący do pobierania i instalacji pakietów.”

Wpisujemy komendę „sudo apt-get install ruby-full” i wciskamy Enter.

Następnie musimy wpisać nasze hasło użytkownika. Tutaj mała uwaga: przy wpisywaniu hasła nie pokazują się znaki ani kropki, w celu zachowania bezpieczeństwa. Nie przejmujemy się tym, wpisujemy nasze hasło i wciskamy Enter.

W konsoli pojawia się sporo informacji oraz na samym dole pytanie czy chcemy kontynuować. Aby zatwierdzić  wpisujemy „T” i wciskamy Enter.

Instalują nam się wszystkie pakiety Ruby.

Super, możemy przejść do następnej potrzebnej rzeczy, czyli edytora.

VS Code – edytor

Jest wiele edytorów kodu, a wybór zależy od osobistych preferencji. Przykładowe edytory to Atom, UltraEdit, Brackets i Visual Studio Code. Ja wcześniej korzystałam z Atom, teraz chcę wypróbować VS Code.

Aby zainstalować VS Code klikamy na ten link.

i w zależności od naszego systemu operacyjnego wybieramy odpowiednią opcję. Ja wybrałam opcję na Ubuntu.

Następnie pojawia nam się okno instalacji. Możemy zobaczyć tutaj krótki opis oraz numer wersji.

Jeśli instalacja przebiegnie prawidłowo możemy się cieszyć z takiego widoku.

Node.js

Podaję linka do dokumentacji. A tutaj jest artykuł dokładnie na temat instalacji Node.js na Ubuntu 16.04.

Na samym początku wpisujemy komendę „sudo apt-get update”.

Pojawia się sporo tekstu, a na samym końcu „Gotowe”, czyli możemy przejść do następnego kroku.

Wpisujemy komendę „sudo apt-get install nodejs”, a następnie potwierdzamy literą „T”, że chcemy kontynuować.

Super, mamy Node.js. Teraz potrzebujemy node package manager. Wpisujemy „sudo apt-get istnall npm”.

Ponownie potwierdzamy literą „T” i gotowe.

Git

Aby zainstalować Gita na Ubuntu wpisujemy komendę „apt-get install git”. Gdyby ktoś miał problemy odsyłam do dokumentacji, tutaj są również instrukcje instalacji na inne systemy operacyjne.

W moim przypadku Git się już zainstalował wcześniej, w sumie sama nie wiem kiedy. Proces instalacji nie powinien się różnić od tych wcześniejszych.

Przeglądarka – Chrome

Oprócz tego potrzebujemy przeglądarki, tutaj zapomniałam zrobić screenów podczas instalacji, ale proces jest podobny do instalacji edytora. Nie potrzebujemy wpisywać żadnych komend w terminalu. Tu jest link skąd możemy pobrać potrzebne pliki:

Podsumowanie

To jest podstawowy set up, ale to nie jest koniec. Każdy projekt ma indywidualne potrzeby i będziemy musieli zainstalować dodatkowe dependencje. W zależności od wymagań projektowych dependencje będą się różnić dlatego instalujemy je nie globalnie, ale w konkretnym projekcie. O tym postaram się napisać kolejny post.

Daj znać czy post był przydatny, a razie pytań zostaw komentarz.

Praca developera – najważniejsze pojęcia

praca developera

praca developera

Asana – uniwersalna aplikacja do zarządzania projektami.

branch – gałąź projektu. Wyróżniamy gałąź główną, deweloperską i gałęzie boczne. Gałąź deweloperska to tzw. develop w której znajduje się najbardziej aktualna wersja kodu. Gałąź boczna to taka na której rozwijana jest konkretna funkcjonalność. Gałęzi bocznych może być kilka. Tworzenie gałęzi pozwala na kontrolowanie wersji projektu, przykładowym narzędziem do tego jest GIT.

bug – błąd w kodzie

call – rozmowa z klientem odbywająca się przez komunikator tj. Skype, Google Hangouts

CLI – command-line interface – sposób komunikowania się użytkownika z programem za pomogą tekstowych poleceń wpisywanych do konsoli

code review – proces sprawdzania kodu przez innego programistę/programistkę,  zazwyczaj przed połączeniem kodu z głównym branchem deweloperskim

develop – gałąź deweloperska, w której znajduje się najbardziej aktualna wersja kodu

commit – zapis aktualnego stanu kodu w danym momencie

critical – najważniejszy task w danym momencie

feature – funkcjonalność w aplikacji / na stronie internetowej

GUI – Graphical User Interface – sposób komunikowania się użytkownika z programem za pomogą interfejsu graficznego.

JIRA – aplikacja do zarządzania projektami dedykowana dla software developmentu. Pomaga w organizacji pracy zespołu, usprawnia proces naprawiania bugów

JSON – JavaScript Object Notation – uniwersalny format przesyłania danych

master – główna gałąź projektu

merge – połączenie jednej gałęzi z drugą

repozytorium – miejsce w którym trzymane są wszystkie pliki związane z projektem oraz przetrzymywane są informacje na temat historii rozwoju projektu.  Pozwala to w łatwy sposób na śledzenie zmian w kodzie.

standup – spotkanie członków zespołu dotyczące danego projektu. Stundupy odbywają się codziennie, każdy członek zespołu określa co udało mu się zrobić dnia poprzedniego, jakie napotkał trudności oraz co zamierza zrobić danego dnia. Mogą się obywać w biurze bądź przez komunikator tj. Skype, Google Hangouts. Project Manager określa priorytety oraz przekazuje dodatkowe informacje ze strony klienta.

taski – pojedyncze zadania wyznaczone przez np. Project Managera, Tech Leada, Testera. Powinny one znaleźć się w aplikacji do zarządania projektem tj. Trello, Asana, Jira. Mogą polegać na stworzeniu konkretnej funkcjonalności, naprawieniu konkretnego buga. Idealnie taski powinny być małe, najlepiej aby czas przeznaczony na ich sfinalizowanie nie przekraczał kilku godzin. W Scrumie maksymalny czas jaki może być przypisany do jednego taska to 2 dni. Jeśli na etapie planningu okazuje się, że dana rzecz ma zając więcej niż dwa dni, to koniecznie trzeba ją podzielić na więcej niż jeden task.

Trello – uniwersalna aplikacja do zarządzania projektami.

Jeśli masz jakieś uwagi lub propozycje pojęć – proszę napisz w komentarzu, postaram się uzupełnić posta.