staż FED

Czego nauczyłam się na stażu FED?

Mimo tego, że na co dzień nie programuję zawodowo, to w minionym tygodniu miałam okazję pracować u boku frontendowca z krwi i kości. Niestety nie mogę Wam zdradzić, nad czym dokładnie pracowaliśmy, ale chciałabym Wam przybliżyć kilka poznanych technologii. Zainteresowani? Zapraszam do lektury. 🙂

Podczas kilkudniowego stażu zapoznałam się z poniższymi pojęciami. Być może dla części z Was nie ma w tym nic odkrywczego. Ja jednak o tych technologiach słyszałam, ale nigdy nie miałam okazji sprawdzić ich w praktyce. Dla tych, którym poniższe pojęcia nic nie mówią, przygotowałam krótki opis. 🙂

React / React.js / ReactJS

React to javascriptowa biblioteka, za której rozwój odpowiedzialni są deweloperzy z Facebooka. React pozwala nam tworzyć interaktywne strony internetowe w dużo prostszy i bardziej przejrzysty sposób. Od marca 2015 roku można z niego korzystać bezpłatnie, dzięki udostępnieniu projektu na Githubie.

Co ważne, React nie czyni założeń co do organizacji kodu, a wszystkie zmiany wprowadzane w modelu danych są automatycznie odzwierciedlane w interfejsie użytkownika.

Przykładowy kod zapisany z użyciem Reacta:

react.js

Źródło: http://zoldar.net/react/#7

GIT

Git, czyli system kontroli wersji. Git pozwala nam śledzić wszystkie zmiany wprowadzone do pliku czy też kodu. Jest to bardzo przydatne narzędzie w sytuacji, gdy chcemy:

  • przywrócić pliki do wcześniejszej wersji
  • odtworzyć stan całego projektu
  • porównać wprowadzone zmiany
  • odzyskać część utraconych danych

Git przechowuje dane jako migawki projektu w danym okresie czasu, co wyróżnia go spośród innych systemów. Co ważne, możemy przeprowadzać różne operacje na projekcie, mając dostęp tylko do lokalnych plików. Wszystkie zmiany możemy wprowadzić później, przy połączeniu z siecią. Git posiada 3 ważne stany: zatwierdzony, zmodyfikowany i śledzony, co generuje nam 3 specjalne sekcje – katalog roboczy, przechowalnię i katalog git, jak na rysunku poniżej.

GIT

Źródło: https://git-scm.com/book/pl/v1/Pierwsze-kroki-Podstawy-Git

I na koniec – git posiada wsparcie dla gałęzi, czyli możliwość wprowadzania zmian na pobocznych projektach, a niekoniecznie na głównej linii rozwoju. Dzięki temu nie wprowadza się bałaganu do głównego projektu.

LESS

Less, czyli dynamiczny język arkuszy stylów (CSS). Dzięki niemu:

  • możemy tworzyć zmienne, które można potem wykorzystywać w obrębie całego arkusza stylów
  • możemy dziedziczyć pewne style dla całych klas – są to tzw. domieszki (mixins)
  • możemy zagnieżdżać jedne selektory wewnątrz innych

Przykład zastosowania LESS’a:

LESS

Źródło: http://ciembor.github.io/lesscss.org/

Flexbox

Flexbox, czyli technologia, która pozwala budować elastyczne szkielety stron internetowych, przy jednoczesnej rezygnacji z właściwości float, która często generowała sporo problemów. W założeniu tym wyróżnia się dwa elementy: flex container i flex item. Dzięki ustawieniu odpowiednich wartości możemy bezboleśnie bawić się układem poszczególnych elementów na stronie. Dokładny opis zastosowania flexboxa znajdziecie tutaj.

flexbox

Źródło: https://webroad.pl/html5-css3/2466-css3-flexbox-podstawowe-zalozenia

Moje pozostałe obserwacje z pracy FED’owca:

  1. praca nad wyglądem nawet najmniejszego elementu w aplikacji to nieustanne dłubanie w kodzie, googlowanie i zmóżdżanie
  2. nie musisz wszystkiego od razu wiedzieć – od czego jest StackOverflow 😉
  3. projektowanie pod wszystkie przeglądarki jest pracochłonne – pomocna może okazać się strona caniuse.com
  4. jeżeli nie wiesz, jak coś powinno docelowo wyglądać, zawsze możesz liczyć na wsparcie UX Designera
  5. ustaw sobie przypominajki, żeby robić przerwę na kawę / jedzenie / toaletę – praca nad kodem potrafi mocno pochłonąć
  6. nie bój się prosić o pomoc osób z zespołu – wszyscy kiedyś zaczynali

Myślę, że jak na 4 dni nauki, to udało mi się przyswoić całkiem sporo przydatnej wiedzy. O większości opisanych technologii słyszałam już wcześniej, ale dopiero poznanie ich w praktyce pozwoliło mi lepiej zagłębić się w temat. A dla Was to zupełnie nowe pojęcia czy mieliście już okazję korzystać z wymienionych technologii? Dajcie znać. 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.