Język:
EN
PL
IT

WEB3 - Co to jest? Najważniejsze informacje!

Lastest posts

All
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
IT

WEB3 - Co to jest? Najważniejsze informacje!

arrow icon
February 7, 2023
15 min read

WEB3 - Co to jest? Wprowadzenie

Aby bliżej przybliżyć temat web3 musimy najpierw poznać web1 oraz web2. 


Web 1.0, web 2.0, web 3.0 - różnice


WEB1 (World Wide Web 1.0) 

WEB1 to pierwsza implementacja sieci, która umożliwiała userom otrzymywanie informacji bez wchodzenia w interakcje, czyli krótko mówiąc możemy czytać treści publikowane na strone internetowej z minimalna a praktycznie zerową interakcja ze stroną - taka zdalna biblioteka



WEB2 (World Wide Web 2.0) 

WEB2 - czyli ulepszona generacja web 1.0 którą można nazwac rewolucja wśród internetu. Druga wersja  umożliwia już całkowitą interakcje, internauci mogą się dzielić informacjami, uczestniczyć, edytować etc.. web2 ma kierunek nastawiony na tworzenie treści przez użytkowników dla innych użytkowników.



WEB3 (World Wide Web 3.0) 

WEB3 - to trzecia generacja usług internetowych dla stron i aplikacji która jest oparta na decentralizacji danych. Internet w tej wersji ma poprawić niedociągnięcia web1,web2 oraz w dużej mierze opiera się na AI, uczeniu maszynowym i technologii blokchain.

Web 3 da nam użytkownikom większą kontrolę nad naszymi danymi online, można powiedzieć że web3 nie będzie uzależnione od kontroli nad danymi przez wielkie korporacje przez swoją zdecentralizowaną strukturę opartą na technologii blockchain , Web3 jest powszechnie uważany za bezpieczniejszy. Zdecentralizowana sieć jest oparta na społeczności peer-to-peer zbudowanej na sieci użytkowników. Osobiste rzeczy tej grupy połączone z Internetem mogą hostować strony internetowe lub aplikacje zamiast zestawu serwerów o dużej mocy. 

Cechy oraz koncepcje które są wymieniane jako najważniejsze dla web3:

  • Blockchain i kryptowaluty - ekonomia online i decentralizacja, własność danych
  • sztuczna inteligencja - jest kluczowa w przekształcaniu treści które umieszcza człowiek, bardziej rozwinięte boty AI które będą się samodzielnie uczyć i wspomagać i redukować pracę człowieka. 
  • wizualizacja danych 3D i prezentacja ich interakcji (metaverse)   
  • brak głównego punktu kontroli danych
  • ulepszony marketing internetowy 

Ethereum - definicja

Kolejnym terminem na którym warto się skupić jest Ethereum, zapewne słyszeliście o takiej kryptowalucie cóż, okazuje się, że Ethereum tak naprawdę nie jest kryptowalutą – to platforma programistyczna, która pozwala programistom budować aplikacje w oparciu o technologię blockchain. Na platformie Ethereum znajduje się kryptowaluta o nazwie Ether, która służy do zasilania aplikacji zbudowanych na blockchainie Ethereum. 

Ether działa bardziej jak coś co zasila aplikacje i kontrakty można powiedzieć że to taka benzyna. Tak jak potrzebujesz benzyny do napędzania pojazdów, tak potrzebujesz Etheru do uruchamiania aplikacji na blockchainie Ethereum.

Token - definicja

Token - reprezentuje pewnego rodzaju wirtualny zasób, czyli można powiedzieć, że mamy jakiś żeton który może reprezentować jakąś wartość również wyrażoną w walutach FIAT  

Inteligentne kontrakty - definicja

Inteligentne kontrakty to umowy cyfrowe, które są wykonywane automatycznie na podstawie rzeczywistych danych, jedna z ważnych możliwości jakie daje smart contract to stworzenie tokenu.Aktualnie tokeny Ethereum posiadają standard implementacji nazywany ERC-20 czyli Ethereum Request for Comments, czyli innymi słowy mówiąc mają one właściwość która sprawia że każdy token jest dokładnie taki sam pod względem wartości i typu jak inny token.

Zdecentralizowane aplikacje - definicja

Zdecentralizowane aplikacje to aplikacje obsługujące inteligentne kontrakty na blockchainie Ethereum nazywane są dApps lub apkami zdecentralizowanymi. Tak jak każdy twórca aplikacji może tworzyć aplikacje na danym systemie operacyjnym, programiści mogą budować na infrastrukturze blockchain Ethereum.

Metamask - definicja

Metamask - metamask jest rozszerzeniem w przeglądarce które jest portfelem kryptowalut na blockchainie Ethereum, mozemy mieć tam swoje tokeny które możemy przechowywać, płacić i wchodzić w interakcje z zdecentralizowanym światem web3 oraz integrować metamask z aplikacjami (dApps). Można powiedzieć że metamask to takie jakby konto bankowe z większymi możliwościami.Jedną rzeczą która trzeba podkreślic to metamask może przechowywać tylko ETH i tokeny oparte na Ethereum więc trzeba zwrócić na to uwagę, ponieważ Bitcoina oraz kryptowalut opartych o inna sieć niż Ethereum tam nie będziemy mogli przechowywać. 

Jak zainstalować Metamask ? 

Instalacja metamaska jest bardzo prosta, musimy znaleźć aplikacje MetaMask w rozszerzeniach przeglądarki i po prostu ją instalujemy 😀

metamask wtyczka chrome

następnie ściągnie nam się aplikacja która odpali widok tworzenia portfela, klikamy utwórz portfel.

metamask utwórz konto

ustawiamy nasze hasło które będzie nam potrzebne w przyszłości gdy będziemy chcieli skorzystać z portfela, ponieważ będziemy o nie proszeni za każdym razem. Hasło powinno być bardzo unikalne i najlepiej gdyby nie było wykorzystywane w innych serwisach ponieważ ma ono chronić nasz portfel i nasz zaszyfrowany klucz prywatny. 


metamask utwórz hasło

Następnie zapoznajemy się z warunkami korzystania z portfela i je akceptujemy i teraz bardzo ważna rzecz, ponieważ jesteśmy teraz na kluczowym z punktu bezpieczeństwa ekranie, możemy na nim wyświetlić seed phrase czyli listę dwunastu słów, które są ustawione w odpowiedniej kolejności czyli pozwalają nam na wygenerowanie naszego klucza prywatnego i uzyskanie dostępu do naszych tokenów( środków).

Nasze seed phrase będziemy potrzebować gdy: 

  • zapomnimy hasła do naszego portfela
  • Chcemy uzyskać dostęp do naszych środków z innego portfela
  • Odinstalowaliśmy portfel wraz ze wszystkimi ustawieniami i chcemy go przywrócić

Jest to bardzo ważny punkt ponieważ gdy nie zapamiętamy seed phrase, to dostęp do naszych środków zostanie bezpowrotnie utracony 

metamasksecret recovery phrase

Na kolejny ekranie jesteśmy proszeni o zweryfikowanie, że lista dwunastu słówek została przez nas zapamiętana.

metamask otwierdź swoją tajną frazę zapasową

jeżeli potwierdziliśmy swoje 12 słow dostajemy ekran z gratulacjami

metamask gratulacje

Nasz portfel powinien być widoczny we wtyczkach przeglądarki i jest gotowy do korzystania ! 

metamask dashboard

IT
Offtop

Dlaczego przeprowadziliśmy rebranding? Poznaj cały proces!

arrow icon
February 7, 2023
15 min read

Dlaczego przeprowadziliśmy rebranding?  Poznaj cały proces!

 

Przyjęło się, że Nowy Rok to najlepszy czas na zmiany. Robimy podsumowania, myślimy co można poprawić, zrobić lepiej. Jako Qarbon IT też dokonaliśmy takiej analizy i wraz z nowym rokiem wprowadziliśmy spore zmiany - te związane z wizerunkiem i naszym brandingiem.

Działamy na rynku już od ponad 3 lat. W tym czasie mocno się rozwinęliśmy. Powiększał się zespół, nawiązaliśmy nowe, cenne relacje biznesowe. Kształtowały się nasze główne wartości. Wyszliśmy poza rynek Polski i rozpoczęliśmy mocną eskapncję na rynki zagraniczne. Zaczęliśmy budować cele na przyszłość. Jako firma z doświadczeniem i widoczną pozycją na rynku,  wiedzieliśmy, że potrzebujemy rebrandingu, aby dopasować wizerunek do tego, kim jesteśmy dzisiaj, ale też aby lepiej okreslić, jak firma ma być postrzegana w przyszłości.

Dlatego przedstawiamy rebranding Qarbon IT - poznajcie cały proces, od A do Z! 

Dlaczego zdecydowaliśmy się na rebranding?

Kiedy rozpoczynaliśmy rozmowy o rebrandingu, wszyscy wiedzieliśmy, że jest na to doskonały czas. Widzieliśmy silną potrzebę zmian, jednak musieliśmy upewnić się, że jest to również rzecz, której potrzebują nasi klienci - ponieważ wizerunek marki oddziałuje przede wszystkim na nich. Marka ma wzbudzać zaufanie i podobać się odbiorcom. Przeprowadziliśmy zatem wnikliwe badania odnośnie tego, jak jesteśmy postrzegani przez naszych odbiorców - obecnych klientów, potencjalnych klientów, obecnych pracowników i potencjalnych pracowników. Wyniki tych badań dały nam mnóstwo cennych wniosków, dzięki którym mogliśmy zacząć pracę nad rebrandingiem. 

brand refreshment

1. Nasz dotychczasowy wizerunek nie był spójny

Z badań i obserwacji wynikało, że nasz dotychczasowy wizerunek może być dezorientujący. Szata graficzna materiałów, które pojawiały się w sieci, nie zawsze była spójna. Występowało dużo kolorów, odcieni niebieskiego, różne elementy i style.  Odbiorcy, natykając się na nasze treści w sieci, nie zawsze od razu kojarzyli je z naszym brandem. Wiedzieliśmy, że musimy to uporządkować. Spójna marka wzbudza więcej zaufania i jest postrzegana jako profesjonalna, a tego chcieliśmy jako firma.

qarbon it stary branding

2. Nieczytelne logo

Najważniejszym składnikiem wizerunku firmy jest logo. Musi być proste, ale kojarzące się z marką. Kiedy zaczęliśmy analizować nasze stare logo, postanowiliśmy, że potrzebuje ono zmiany.Chcieliśmy je uprościć, sprawić, żeby było bardziej czytelne. 

qarbon it stare vs nowe logo

3. Lepsza komunikacja 

Chcieliśmy lepiej niż dotychczas komunikować naszą rozbudowaną ofertę i jej znaczenie dla naszych klientów. Nasze główne wartości kształtowały się przez te 3 lata. Wiedzieliśmy, że musimy lepiej określić naszą narrację, tak, by była jasna dla odbiorców. Zarówno na stronie internetowej, jak i poza nią. Chcieliśmy być postrzegani jako nowoczesna firma. W branży IT, ze stale zmieniającymi się technologiami i trendami to bardzo ważne. 

qarbon it stara strona www

4. Nasza marka musi się wyróżniać

IT to najszybciej i najmocniej rozwijająca się branża w dzisiejszym świecie. Musimy przebić się przez morze konkurencji i podkreślić, dlaczego to właśnie nasza marka powinna być najlepszym wyborem dla Klienta. Chcieliśmy być zauważalni i oferować ludziom coś wyjątkowego. Musieliśmy na nowo przedstawić odważną markę, któa  przebije się w tej branży. 

Poznajcie efekt końcowy

Nowe logo

qarbon it sygnet

qarbon it nowe logo

Postawiliśmy na mocniejszy kontrast, wyraźniejsze i zarazem prostsze kształty. Sygnet to odświeżenie Q ze starego logotypu. Nowa wersja nawiązuje do startu, symbolu procesu i wyznaczania nowego kierunku. I właśnie z tym chcemy się kojarzyć - ponieważ usprawniamy procesy biznesowe i wyznaczamy nowy kierunek  rozwoju poprzez dostarczanie dedykowanych rozwiązań programistycznych. 

Zarówno sam sygnet, jak i całe logo jest bardziej widoczne i czytelniejsze. Kojarzy się z nowoczesnością, a tacy właśnie jesteśmy.

Nowe kolory

Nie zmienialiśmy całej palety barw, a tylko ją odświeżyliśmy i lekko poszerzyliśmy. Kiedyś naszym głównym kolorem był niebieski - kolor kojarzący się z zaufaniem.  Oprócz zaufania, chcieliśmy dodać również świeżości. Stąd zieleń, czyli niezaprzeczalnie kolor kojarzący się właśnie ze świeżością, czymś nowym. Powstały gradient wyróżnia nas z tłumu i ożywia wizualnie.Daje również świetny kontrast do mocnej czerni. Takie zestawienie definitywnie przywodzi na myśl tematykę IT. 

qarbon it kolory brandowe
qarbon it nowe kolory i typografia

Nowa strona

Wraz z rebrandingiem przyszedł czas na odświeżenie strony. Uspójniliśmy ją z resztą identyfikacji, unowocześniliśmy, a oprócz tego ulepszyliśmy treść oraz doświadczenie użytkownika (UX). Teraz nasz przekaz jest łatwiejszy w odbiorze, a użytkownik w łatwy sposób może zapoznać się z całą ofertą naszych usług. Rozszerzyliśmy informacje o firmie i sprawiliśmy, że jest ona chętniej i częściej odwiedzana. Oprócz treści biznesowej, pokazaliśmy również bardziej ludzką twarz - ponieważ firma to przede wszystkim ludzie. To oni zajmują się potrzebami klienta i sprawiają, że współpraca przebiega w najlepszych warunkach. Dlatego jest nas na stronie o wiele więcej - abyście mogli zobaczyć to kim jesteśmy i jakie wartości reprezentujemy jako firma i jako ludzie. 

qarbon it nowa strona mobile i desktop

Nowa tożsamość wizualna

Naszą misją jest tworzenie produktów cyfrowych z wykorzystaniem pasji, kreatywności i najnowszych technologii.

Główne wartości Qarbon IT to:

  • Nadzwyczajność  - dajemy z siebie wszystko i czujemy odpowiedzialność za wyniki
  • Niezaspokojona Ciekawość - chętnie się uczymy
  • Koncentracja na Pracownikach - jesteśmy skupieni na budowaniu przyjaznego środowiska pracy
  • Wspólne Zaufanie  - jesteśmy ludźmi godnymi zaufania

Naszą wizją jest przeprowadzić klientów przez cyfrową transformację oraz tworzyć dla nich produkty, które rewolucjonizują ich biznes . Jednocześnie chcemy być najlepszą firmą w jakiej tylko można pracować, bo to pracownicy stanowią naszą największą wartość.

Chcemy przedstawić to Wam poprzez nową identyfikację wizualną. Nasz przekaz i ton musiał być bardziej bezpośredni i wyrazisty - taka właśnie jest identyfikacja wizualna Qarbon IT. 

qarbon it gadżety brandowe
qarbon it tshirt

Nasi mistrzowie brandingu 

Nad rebrandingiem Qarbon IT pracował nasz utalentowany i niezastąpiony zespół graphic designerów. To oni zajęli się procesem od A do Z i osiągnęli tak niesamowity efekt końcowy. Sebastian Biela, Dominik Gola i Klaudia Kuchno - świetna robota! 

design team

Offtop
Startup

Prawo dla start-upu? - Czyli podstawy prawne, które musisz znać!

arrow icon
February 7, 2023
15 min read

Nieznajomość prawa szkodzi - czyli podstawowe prawo dla start-upu i przyszłych przedsiębiorców

Tworzenie i kreowanie swojej marki własnej budzi sporo emocji. Wpadając w wir nowych pomysłów oraz szukając przeróżnych rozwiązań często nie zdajemy sobie sprawy, że nieświadomie łamiemy prawo. Niestety, nasza niewiedza nie zwalnia nas od ponoszenia odpowiedzialności prawnej za swoje czyny i wybory. W tym wpisie dowiesz się jak skutecznie wystrzegać się bezprawia i nie dać się wpaść na przysłowiową minę. Oto wybrane podstawowe prawa:

1. Zdecyduj się jaką formę prawną chcesz, aby twoje przedsiębiorstwo przybrało

Pierwszym krokiem, jaki musisz poczynić jako przyszły biznesmen jest podjęcie decyzji dotyczącej wyboru formy prawnej działalności. Do wyboru posiadasz między innymi:

Jednoosobowa działalność gospodarcza - Rejestracji tej formy działalności można dokonać przez internet albo w urzędzie gminy lub miasta. Zachęcającym aspektem tej formy jest brak ponoszenia kosztów związanych z samym założeniem oraz brak wymogu tworzenia kapitału początkowego przedsiębiorstwa. Przedsiębiorcy posiadający tę formę cenią sobie również niskie koszty obsługi księgowej, jak i możliwość optymalizowania podatków oraz ograniczone obowiązki sprawozdawcze. Niestety nie jest ona często polecana nowym start-upowcom ze względu na stuprocentową odpowiedzialność całym swoim majątkiem i obowiązek odprowadzania składek ZUS.

Spółka cywilna - Ta forma to nic innego jak umowa zawarta pomiędzy wspólnikami obrotu gospodarczego. Podmiotami praw i obowiązków nie jest spółka, a jej wspólnicy, nie więcej niż 2-3 wspólników. Wspólnicy spółki cywilnej wnoszą wkład w dowolnej postaci np. Środki pieniężne, wiedza czy usługi. Jako że spółka cywilna nie jest przedsiębiorcą, podatek dochodowy musi być opłacony bezpośrednio przez jej wspólników. Odpowiedzialność prawna podzielona jest po równo. Spółka nie posiada również własnego majątku - jest nim majątek wspólników w niej będących.

Spółki osobowe - Tego rodzaju działalność tworzą wspólnicy. Spółka osobowa nie posiada osobowości prawnej, jednakże może nabywać prawa i zaciągać zobowiązania. Dużą zaletą tej działalności jest niskie ryzyko finansowe. W naszym obecnym prawie wyróżniamy 4 rodzaje spółek osobowych:

  • Spółka jawna - wspólnikami tej spółki mogą być osoby fizyczne, prawne oraz jednostki organizacyjne. Każdy wspólnik odpowiada całym swoim majątkiem.
  • Spółka partnerska - wspólnikami mogą być tylko i wyłącznie przedstawiciele wolnych zawodów tj. Adwokaci, architekci, maklerzy, lekarze lub księgowi. Odpowiedzialność w tym przypadku nie jest całkowita, za długi spółki odpowiada tylko wspólnik których się ich dopuścił.
  • Spółka komandytowa - wspólnicy dzielą się na komplementariuszy i komandytariuszy. Komplementariusze ponoszą pełną odpowiedzialność za zobowiązania spółki, natomiast ci drudzy odpowiadając co do wysokości sumy komandytowej ustalonej w umowie spółki.
  • Spółka komandytowo-akcyjna - Z kolei tutaj wyróżniamy akcjonariuszy zamiast komandytariuszy, którzy nie ponoszą odpowiedzialności za zaciągnięte zobowiązania spółki. Jest to zdecydowanie najmniej popularna forma prowadzenia działalności. To jedyna ze spółek osobowych, która posiada podwójne opodatkowanie.

Spółka z ograniczoną odpowiedzialnością - Do rejestracji może przyczynić się jedna lub więcej osób fizycznych. Minimalna kwota kapitału zakładowego wynosi 5000 zł. Umowa spółki w tym przypadku jest zawierana za pomocą aktu notarialnego. Po procesie rejestracyjnym i wpisie do KRS uzyskuje ona osobowość prawną i jest bezpośrednim podmiotem praw i obowiązków. Do najbardziej przyciągającej zalety tej formy działalności możemy przypisać prowadzenie pełnej księgowości, co prawda wiąże się to z wysokimi kosztami jednakże daje skrupulatny przekrój naszych finansów firmowych oraz usprawnia podejmowania decyzji biznesowych.

Prosta Spółka Akcyjna - Forma ta cechuje się przede wszystkim niskimi wymaganiami kapitału akcyjnego przy zakładaniu spółki, kwota minimalna to 1 złotych. Dodatkowym atutem jest ogromna elastyczność co do kwestii podejścia do organów spółki, daje bezpośrednią możliwość powoływania rady dyrekcyjnej. Co ważne PSA dopuszcza podejmowanie uchwał zdalnie za pomocą poczty elektronicznej bądź innych komunikatorów internetowych. Korzystanie ze środków spółki nie wymaga podjęcia uchwały o obniżeniu kapitału.

Prowadzenie działalności gospodarczej bez obowiązku rejestracji w CEIDG/ US i GUS-ie - Wybierając “działalność na próbę” nie posiadasz obowiązku rejestracji, w momencie, kiedy przychody z prowadzonej działalności nie przekraczają 50% kwoty minimalnego aktualnie obowiązującego wynagrodzenia oraz w ciągu 60 miesięcy nie zakładałeś działalności gospodarczej. Ta możliwość dopuszcza brak konieczności prowadzenia ksiąg rachunkowych, a uproszczonej ewidencji sprzedaż oraz brak przymusu opłacania składek na ZUS.

2. Zadbaj o szczegóły w tworzeniu swoich umów

Podczas tworzenia umów dla swojej działalności gospodarczej zadbaj o zawarcie wszystkich istotnych kwestii, które są dla ciebie ważne. W momencie, kiedy konsultujesz warunki umowy z potencjalnym klientem już sama oferta (np. składana za pośrednictwem kontaktu mailowego) jest integralną częścią waszej umowy - ważne aby uwzględnić wszystko. Dla zabezpieczenia swojej firmy zdecyduj się na zastosowanie kar umownych. Dzięki nim możesz zmniejszyć częstotliwość windykowania klientów, jak i zapobiec niedotrzymaniem niektórych warunków umowy. Pamiętajmy, że kara umowna może być zastrzeżona tylko i wyłącznie na wypadek niewykonania zobowiązania niepieniężnego.

3. Chroń swój pomysł

Co prawda nie jest to taka prosta sprawa jak mogłoby się wydawać - często trudno jest udowodnić kto był prekursorem danego biznesplanu czy projektu. Jednak gdy jesteśmy pewni swojego unikatowego pomysłu możemy sporządzić jego projekt bezpośrednio na papierze poświadczony podpisem notarialnym. Posiadając taki dokument mamy mocną argumentację w sytuacji, kiedy nasza wizja zostanie skradziona.

4. Kwestie związane z zatrudnianiem pracowników

W tym przypadku warto uwzględnić w umowach pracowniczych wzmianki o zakazie konkurencji, tajemnicy poufności etc. Pamiętaj przyszły pracodawco również o swoich obowiązkach takich jak: prowadzeniu akt osobowych pracownika, zgłoszenie pracownika do ZUS, opłacanie zaliczki na podatek dochodowy, prowadzeniu ewidencji czasu pracy, skierowaniu na badania lekarskie oraz przeprowadzenie podstawowego szkolenia z zakresu bezpieczeństwa i higieny pracy. Przy podpisywaniu umowy z nowym pracownikiem należy również poinformować o przetwarzaniu danych osobowych (RODO).

Kiedy znasz już podstawy…

Przedstawiony zbiór to tak naprawdę kropla w morzu wszystkich obowiązujący praw i istotnych rzeczy, które musisz wiedzieć zakładając firmę. Wszystko za sprawą różnorodności branż, w jakich mogą działać start-upy. Najważniejszą radą, jaką można zasugerować jest sprawdzanie wszystkich regulacji prawnych, w tym przypadku czas i precyzja działa na naszą korzyść, nawet jeśli miałoby to trwać dwa razy dłużej. Natomiast kiedy już dopuściliśmy się złamania prawa należy jak najszybciej skontaktować się ze specjalistą w tej dziedzinie. Dzięki temu szybciej uzyskamy wsparcie w sprostowaniu danego stanu faktycznego, niż argumentując przed sądem swoją niewiedzę.

Przeczytaj poprzedni artykuł o start-upie: Zatrudnianie programistów do Twojego start-upu | 4 proste porady!

kliknij tutaj aby przejść do formularza kontaktowego
Startup
UX/UI

Figma vs. Programiści - Wszystko co musicie wiedzieć o Figmie

arrow icon
February 7, 2023
15 min read

Figma vs. Programiści

UX/UI Designerzy projektują, a programiści na podstawie projektu - programują. I chociaż część graficzna jest po stronie designerów, to programista, chcąc nie chcąc, również powinien mieć podstawową wiedzę na temat obsługi programów graficznych, tak, aby współpraca nad projektem przebiegała płynnie, bez zbędnych pytań i komplikacji. Wachlarz programów jest duży, jednak dzisiaj zajmiemy się jednym z popularniejszych ostatnimi czasy narzędzi jakim jest Figma.

Czym jest Figma? - Wprowadzenie

Figma to narzędzie, które szybko “podgryza” gigantów w dziedzinie edytorów graficznych i staje się coraz powszechniejsze. W przeciwieństwie do Adobe XD czy Sketcha, Figma dostępna jest w wersji przeglądarkowej, dzięki czemu programiści nie muszą przejmować się instalowaniem programu. Mają też swobodny podgląd z każdego urządzenia. Zasoby programu potrzebne do swobodnej pracy developera nie wymagają kupna licencji. Jeśli jesteś programistą, ten artykuł jest dla Ciebie! Pomoże Ci w uzyskaniu podstawowej (wystarczającej) wiedzy, aby pracować z Figmą.

Ctrl + C to nie wszystko - Krótka uwaga na temat skrótów

Figma w temacie skrótów klawiaturowych jest dość trywialna. Zapożycza ona wiele rozwiązań znanych między innnymi z programów Adobe. Większość skrótów jest napisana zarówno dla systemu Windows, jak i Mac, gdzie [Ctrl] w Windowsie odpowiada [Cmd] na Mac’u. Przykładowo Zoom In i Zoom Out będzie mieć skrót Ctrl/Cmd + Scroll, a kopiowane Ctrl/Cmd + C. Jeśli nie znamy jakiegoś skrótu wystarczy kliknąć w logo Figmy -> Help and account -> Keyboard shortcuts i dostajemy pełen spis.

figma skróty

Dark theme - jedyny słuszny wybór

Nie lubisz męczyć swoich oczu? Nie chcesz, żeby twoja matryca przedwcześnie się wypaliła? Nic prostszego - zmień motyw Figmy (i wszystkich innych programów) na Dark Theme! A już odchodząc od żartów, jeśli preferujesz ciemny tryb layoutu wystarczy że klikniesz w logo Figmy -> Preferences->Theme->Dark i już możesz cieszyć się przyjemnym dla oka ciemnym layoutem!

figma tryb jasny i ciemny

Przedszkole - Czyli podstawy w Figmie

Gdy zostaniesz dodany jako współpracownik lub “widz” projektu w Figmie, możesz go otworzyć w przeglądarce lub pobrać aplikacje na komputer. Niech cię nie zmyli wersja desktopowa - nie jest natywna! Obie wersje działają i wyglądają niemal identycznie. Jedyne co je różni to aspekt interfejsu przeglądarki w wersji webowej. Jeśli nie wyświetlają ci się fonty w projekcie, a masz je zainstalowane, to pobierz wersję desktopową - wersja webowa nie wspiera systemowych czcionek.

Interfejs Figmy podzielony jest na 3 grupy główne. Pasek górny zawierający kursor, komentarze i rączkę (do przemieszczania się po canvie). W panelu po lewej, znajdziesz strony i warstwy. Każda osobna strona to nowy canvas z innymi elementami pliku. Panel z prawej storny to zbiór narzędzi zawierający wszystkie informacje, które potrzebujemy w pliku.

figma aplikacja webowa

Style Projektu

Style w prawej belce będa wyświetlane w momencie braku zaznaczonego elementu - jeśli ich nie widzisz wystarczy kliknąć w pusty canvas. Możesz użyć tych informacji aby sprawdzić czcionki, kolory, cienie etc. w CSS. Wystarczy kliknąć w ikone ustawień obok stylu, aby wyświetlić wszystkie informacje.

figma style

Informacje o elementach

Podczas zagłębiania się w projekt na pewno przyjdzie czas, w którym będziesz miał potrzebę sprawdzić wymiary lub style np. Przycisku lub FlexBoxie’a (AutoLayout w Figmie). Wybór odpowiedniej warstwy w dobrze uporządkowanym projekcie to czasem nie łatwa sprawa, nie mówiąc o projektach, w których panuje “nieład”. W namierzeniu interesującego nas elementu pomaga funkcja Select Layer [PPM] lub warstwy w menu po prawej stronie. Jest też opcja przebicia się do konkretnego elementu 2-klikiem LPM w daną warstwę.

figma select layer

Kiedy uda nam się dotrzeć do interesującego nas elementu możemy “wyjąć” informacje o nim w menu po prawej stronie.

figma css code

Należy również dodać, że CSS jest generowany automatycznie i często ma swoje mankamenty. Zalecałbym traktować to jako fajną formę podpowiedzi a nie gotowy kod do skopiowania.

Gdzie ja schowałem tą linijkę? - Wymiary i pomiary w Figmie

Nie musisz już bawić się w pomiary prostokątami i gniewać się na swojego designera “Bo piksele są nierówne”. Figma prowadzi nas (designerów) za rękę i mało kiedy pozwala nam tworzyć odległości lub komponenty, które mają coś po przecinku (np. 34.,76px).

Kiedy chcesz zmierzyć odstępy miedzy elementami, wystarczy wybrać element, do którego chcesz mierzyć odległość, a następnie najechać kursorem na drugi element z wciśniętym [ALT]/[Cmd]. Częstym problemem są elementy wektorowe lub grupy - wtedy pojawia się problem niespójnych odległości. Jeśli Figma nie pozwala ci kliknąć np. całej ikony, wystarczy że klikniesz element z [Alt] lub [Cmd].

figma pomiary i odstępy

Eksport, eksport, eksport!

Prawdopodobnie podczas developmentu produktu nie raz będziesz musiał/a wyeksportować zasoby z Figmy. Najczęściej eksportujemy ikony, wszelkie zdjęcia lub ilustracje. Przed wytłumaczeniem “jak to zrobić” warto wspomnieć o formatach. W przypadku ikon czy ilustracji które są grafikami vectorowymi (stworzonych na krzywych), najlepszym wyborem będzie format SVG. W przypadku zdjęć wybór padnie na JPG lub PNG (przy grafikach pozbawionych tła).

Aby wyeksportować poszczególny element lub grupę elementów musimy najpierw je zaznaczyć. Wystarczy kliknąć interesujący nas element lub grupę i przejść do zakładki eksportu w prawej belce. W przypadku wiekszej ilości elementów wystarczy zaznaczać je z wciśniętym [Shift].

figma export pliku

Komunikacja to podstawa - o komentarzach w Figmie

Czasy robienia dziesiątek screenów i wysyłania na chat z designerem minęły. Czasy udawania, że nie widziało się wiadomości też! Komentarze w Figmie to rewolucyjny system feedbacku o produkcie. Komentarze można dodać w dowolnym miejscu na projekcie. Icona w złym miejscu? - komentarz. A może brak jednego ekranu? - komentarz. Twój designer jak i cały team dostanie powiadomienie, a komentarz będzie widoczny w waszym pliku Figmy. Możesz też oznaczyć osobę do której kierujesz swój apel, wystarczy użyć “@”.

Ale jak dodać ten komentarz? Wystarczy, że wybierzesz z górnej belki ikonę dymku chatu lub naciśniesz [C] i klikniesz w odpowiednie miejsce w canvie - nic trudnego! W belce bocznej możesz zobaczyć listę komentarzy. Jeśli zadanie zostało wykonane, możesz usunąć komentarz lub odznaczyć (w przypadku wykonania go).

Przypominam że każdy komentarz jest widoczny dla osób, które mają dostęp do pliku, więc nie pisz głupot bo klient zobaczy!

figma dodawanie komentarzy

Nie taka Figma straszna jak z nią pracują!

Od tej pory powinieneś być w stanie bezproblemowo eksportować elementy, dodawać komentarze i nawigować po interfejsie Figmy. Jeśli miałbyś potrzebę dowiedzieć się więcej o narzędziu wejdź na Dokumentacje Figmy/Figma Community lub wyszukaj dowolne treści na YouTube. Sprawdź również nasz ostatni artykuł UX Design - przewodnik dla programistów.

Powodzenia!

UX/UI
Code

Czy MobX to dobra alternatywa dla Redux?

arrow icon
February 7, 2023
15 min read

Czy MobX to dobra alternatywa dla Redux?

Coraz częściej w nowych projektach w miejscu króla state managementu jakim jest niewątpliwie Redux pojawia się MobX. Zdaniem wielu oferuje on bardziej czytelny oraz korzystniejszy pod względem wydajności sposób na zarządzanie stanem aplikacji.

redux

Czym jest Redux?

Redux jest to biblioteka do zarządzania stanem aplikacji. Jest implementacją architektury Flux stworzoną przez Meta (wcześniej Facebook). Głównym założeniem jest stworzenie “Single Source Of Truth” w postaci jednego store. Store zbudowany jest z reducera, czyli funkcji która pod wpływem akcji pochodzących z dispatchera - zwraca zmieniony stan. Reducer powinien spełniać założenia “pure function” czyli przy określonym stanie wejścia otrzymujemy zawsze ten sam rezultat na wyjściu. Wcześniej wspomniane akcje są najczęściej obiektami zawierającymi w sobie informacje potrzebne by wywołać określoną zmianę. Dispatcher jest funkcją która przekazuje akcję do reducera. Jeśli chcemy korzystać ze store w aplikacji React, potrzebujemy dodatkowej biblioteki react-redux pełniącą rolę konektora który pozwala nam na komunikowanie się z Redux. Na ogół opakowuje się aplikację providerem do którego przekazywany jest store, natomiast komponenty komunikują się za pośrednictwem hooków jak useSelector i useDispatch, bądź za pomocą HOC (higher-order component) connect.

mobx

Czym jest MobX?

MobX jest to biblioteka do zarządzania stanem aplikacji. Oparta jest na dekoratorach które dodają obiektom dodatkowe funkcjonalności przekształcając je w obserwowalny stan. Budowa store nie jest nad wyraz skomplikowana. Składa się z JS-owej klasy (ale niekoniecznie) w której określamy pola oraz metody które dekorujemy w konstruktorze za pomocą makeObservable bądź makeAutoObservable. Do powszechnie używanych dekoratorów należą observable, computed oraz action. Observable przekształca pole obiektu w wartość która pozwala bibliotece informować o zmianach stanu. Computed w odróżnieniu od observable używa się dla wartości które są wyliczane na podstawie aktualnego stanu. Action jest dekoratorem który informuje bibliotekę że dana metoda służy do zmiany stanu. Komunikacja w aplikacjach React odbywa się za pomocą wywoływania metod oraz wyciągania wartości pól. Store przekazuje się do komponentów za pomocą contextu. Aby komponenty wykrywały zmiany stanu należy je opakować funkcją observer pochodzącą z dodatkowej biblioteki mobx-react-lite.

Czytelność

Redux z powodu bardziej skomplikowanej struktury, może sprawiać trudności związane z określeniem co właściwie się dzieje w kodzie - zwłaszcza osobom które mają pierwszy raz z nim styczność. Założenie Reduxa gdzie mamy pojedynczy store utrudnia także zadanie kiedy chcemy jasno rozdzielić jego poszczególne części na domeny. MobX pozwala na tworzenie wielu instancji które niekoniecznie muszą opakowywać całą aplikację. Komunikacja oraz budowa stora jest oparta o mechanizmy które wydają się naturalne dla osób znających JavaScript. Sytuacja wygląda jeszcze lepiej w przypadku użycia TypeScript ponieważ dużo kodu można uprościć do dekoratorów ze składni TS’a.

Wydajność

Według benchmarku który został zamieszczony na twitterze w większości przypadków MobX jest w stanie pochwalić się lepszymi wynikami od Redux. Sprawdź tutaj.

redux vs mobx

Co Redux ma na swoją obronę?

Wielkim atutem Reduxa w tym zestawieniu jest fakt, że jest wciąż dużo bardziej popularnym rozwiązaniem, a co z tym idzie - wsparcie community. Jest też rozwiązaniem “battle-tested” oraz jest rozwijany przez topowych deweloperów wspieranych przez jednego z gigantów technologicznych jakim jest Meta.

Czy MobX to w takim razie dobra alternatywa?

Czy warto wobec tego postawić na MobX? To oczywiście zależy. Decyzja zawsze powinna wynikać z potrzeb projektu i zespołu który go realizuje. Wybranie mniej popularnej biblioteki zawsze niesie za sobą większe ryzyko napotkania problemów których jeszcze nikt nie rozwiązał. Natomiast mniejsze skomplikowanie pozwala na uniknięcie większości problemów. Zdecydowanie trudniej jest niepoprawnie zaprojektować store oparty o MobX niż w przypadku Redux.


kliknij aby przejść do formularza
Code
Offtop

Jesteśmy najczęściej ocenianą firmą oferującą usługi Staff Augmentation w Nowym Jorku!

arrow icon
February 7, 2023
15 min read

Qarbon IT jako jedna z najczęściej ocenianych firm oferujących usługi Team Augmentation w Nowym Jorku

most reviewed staff augmentation companies in new our city nagroda

W Qarbon IT zapewnienie satysfakcji naszym klientom to dla nas priorytet. Robimy to, koncentrując się na wynikach i tym, jak możemy skutecznie pomagać naszym partnerom w dostosowaniu się do zmieniającego się rynku IT. Dziś z przyjemnością informujemy, że w 2022 roku zostaliśmy uznani za wiodącego dostawcę usługi Staff Augmentation!

The Manifest to platforma tworząca rankingi z najlepszymi firmami. Jesteśmy zaszczyceni, że zostaliśmy przez nich uznani za jedną z najczęściej ocenianych firm zajmujących się Staff Augmentation w Nowym Jorku!

Aby uczcić ten kamień milowy, poświęćmy chwilę na powrót do samego początku:

W 2019 roku

Jakub Jodłowski kieruje działalnością naszej firmy jako CEO. Jego podstawową filozofią jest bycie partnerem, któremu mogą zaufać firmy każdej wielkości, gdy napotykają na swojej drodze rosnące wyzwania. Od 2019 roku wspieramy organizacje w ich staraniach o dostosowanie się do wymagań współczesnego krajobrazu biznesowego.

W 2020 roku

Interactive AV-IT jest dostawcą usług zarządzanych, który dostarcza niestandardowe rozwiązania AV. Nawiązali z nami współpracę, aby zbudować szytą na miarę aplikację, która wyświetlałaby listę byłych weteranów wojskowych w placówkach edukacyjnych. Zajmowaliśmy się projektem od pomysłu, poprzez realizacje, kończąc na gotowym produkcie dostarczonym z sukcesem.

Ich kreatywność jest imponująca. Jeśli mieliśmy problem, oni mieli już rozwiązanie. Imponująca była również szybkość realizacji i dbałość o szczegóły.

— Mariusz Szatanga, właściciel, Interactive AV-IT

W 2022

The Manifest wymienia wiodących dostawców usług w Nowym Jorku i czujemy się zaszczyceni, że zostaliśmy uznani za jedną z najczęściej ocenianych w tym roku firm zajmujących się usługą Staff Augmentation!

Jeśli jesteś zainteresowany współpracą z nami, skontaktuj się z nami już dziś!

kliknij aby przejść do formulrzakontaktowego

Offtop

Got a project?
Let’s talk!

arrow
We use cookies. By continuing to browse the site you are agreeing to our privacy policy.