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

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.

Słownik początkującego Frontend Developera

słownik frontend developera

słownik frontend developera

Tu powstaje słowniczek początkującego Frontend Developera. Podzielony jest on na kilka sekcji: pojęcia, technologie oraz narzędzia developerskie.

Pojęcia

BEM – Block Element Modifier – konwencja, która określa sposób nazywania CSS-owych klas, który pomaga w wprowadzeniu jednolitości w kodzie.

DRY – Don’t repeat yourself – konwencja, która zakłada, że w programowaniu powinniśmy unikać powtarzania kodu, który wykonuje takie samo zadanie. Najlepszym przykładem jest tworzenie re-używalnych funkcji. Pozwala to na optymalizację, zredukowanie ilości kodu oraz zwiększenie jego czytelności.

RWD – Responsive Web Design – konwencja, która zakłada, że układ strony powinien dostosowywać się do wielkości oraz orientacji ekranu użytkownika. Znaną biblioteką ułatwiającą kodowanie RWD jest Bootstrap.

Technologie

AJAX – Asynchronous JavaScript And XML – sposób komunikacji przeglądarki z serwerem, gdzie wysyłane zapytania są asynchroniczne, czyli nie musimy czekać aż przyjdzie odpowiedź z jednego zapytania, żeby wykonało się drugie. Przykładem użycia AJAXa jest dynamicznie ładujący się kontent na stronie.

ECMAScript 6, ES6 – jest najnowszą ustandaryzowaną wersją JavaScript z 2015 roku. Wprowadza ona dodatkowe funkcjonalności, skróty, słowa kluczowe oraz inne ulepszenia. Obecnie jeszcze nie wszystkie przeglądarki wspierają ES6, dlatego aby używać ES6 należy użyć kompilatora (np. Babel), który skompiluje nasz kod do ES5.

Sass – Syntactically Awesome Style Sheets – prepocesor języka CSS. Wprowadza większe możliwości niż CSS tj. zmienne, zagdzieżdżanie selekorów, mixiny.

Narzędzia developerskie

Babel – kompilator, który pozwala na używanie ECMAScript 6 i kompilowanie kodu do ECMAScript 5.

Webpack – module bundler, który dzięki szeregowi dodatkowych pluginów i loaderów może służyć do wielu do podstawowych tasków np. do kompilacji ES6 do ES5 (przy pomocy Babel loader), czy Sass do CSS. Dzięki dodatkowemu pluginowi Webpack DevServer dostajemy w prosty konfiguracji serwer deweloperski.

To nie jest ostateczna wersja posta, będzie on dalej aktualizowany. Jeśli masz jakieś propozycje pojęć, które powinny się znaleźć w słowniczku proszę napisz w komentarzu, postaram się uzupełnić.

Nazewnictwo w programowaniu – 20 cennych wskazówek

nazewnictwo w programowaniu

nazewnictwo w programowaniu

Czas na lekcję dobrych praktyk w programowaniu, dzisiaj będzie konkretnie o nazewnictwie. Post ten powstał na podstawie 2 rozdziału książki Roberta C. Martina “Czysty Kod” oraz moich własnych przemyśleń.

Nazewnictwo klas, funkcji, metod, zmiennych plików jest NIEZWYKLE ważne. To tak jak pisanie instrukcji obsługi, ale bez obrazków. Musimy dokładnie wyrazić o co nam chodzi. Warto poświęcić trochę więcej czasu na przemyślenie nazwy, to naprawdę pozwoli nam i innym programistom zaoszczędzić sporo czasu i nerwów.

  1. Nie bagatelizuj nazewnictwa.
  2. Postaw się w sytuacji programisty który będzie utrzymywał Twój kod. Wykrzesaj z siebie chociaż odrobinę empatii.
  3. Spójność to podstawa – warto przyjąć jedną konwencję i być konsekwentnym np. BEM
  4. KISS – Zasada Keep it Simple Stupid – czyli najprościej jak się da, bez zbędnych słów.
  5. Jeśli nazwa wymaga komentarza jest to zła nazwa.
  6. Nie używaj skrótów. Mogą one powodować nieporozumienia, ponieważ skróty często mają więcej niż jedno rozwinięcie.
  7. Uważaj na dwuznaczności słów, one też mają często więcej niż jedno znaczenie.
  8. Liczby też można nazywać! Nie każdy będzie wiedział skąd się wzięła i co robi cyfra “4” w Twoim kodzie. Będzie też łatwiej ją zlokalizować.
  9. Żarty, kolokwializmy, metafory – daruj sobie, jak wrócisz do kodu za dwa miesiące nie będziesz wiedział/a o co chodzi.
  10. Nie używaj jednoliterowych nazw. Są one trudne do wyszukania oraz nie wskazują na żaden kontekst. Wyjątek: jako zmienne lokalne w małych kawałkach kodu np. w liczniku pętli zmienna “i”.
  11. Nie mieszaj różnych języków! Polecam angielski, jest uniwersalny.
  12. Pamiętaj, że w niektórych czcionkach litery małe L i O łatwo pomylić z 1 i 0.
  13. Jeśli masz pomysł na lepszą nazwę, nie zastanawiaj się tylko ją zmień (ale nie w jednym miejscu – we wszystkich!).
  14. Unikaj nazw ze słowami jak “data”, “info”, “message” – sprecyzuj!
  15. Nazwy metod, funkcji to zwykle czasowniki (w stronie czynnej) lub wyrażenia czasownikowe. Czyli zwykle odpowiada na pytanie “co to robi”? Pomocne słowa: getSomething, setSomething, isSomething.
  16. Nazwy klas to zwykle rzeczowniki lub wyrażenia rzeczownikowe. Czyli zwykle odpowiada na pytanie “co to jest”?
  17. Jedno słowo na jedno abstrakcyjne pojęcie. Skąd będziesz wiedzieć jaka jest różnica pomiędzy: get, fetch albo retrieve?
  18. Jedno słowo na jedno zagadnienie. “Należy unikać używania tego samego słowa do dwóch celów”.
  19. Podczas code review zwracaj uwagę na nazewnictwo.
  20. Nie każdy element potrzebuje nazwy, jeśli jej nigdzie nie używasz nie zaśmiecaj nią kodu.
  21. Bonus: LITERÓWKI – bardzo na nie uważaj!

Zwracaj uwagę na nazewnictwo np. w popularnych bibliotekach. Zerknij na API jQuery i zobacz jakich oni nazw używają.  Po za tym ćwicz, ćwicz, ćwicz i proś innych o code review 

i pamiętaj:  

“Profesjonaliści piszą kod zrozumiały dla innych” Robert C. Martin