Sprawdź, jak do walki z koronawirusem przekazać część mocy obliczeniowej swojego komputera

Zdjęcie autorstwa Binyamin Mellish z Pexels

Do tej pory, możliwość udzielenia mocy obliczeniowej swojego komputera kojarzyła mi się z badaniami kosmicznymi, poszukiwaniem nowych galaktyk itd. Generalnie, rzeczy abstrakcyjne i mało przydatne w codziennym życiu. Kilka dni temu natknąłem się na Facebooku na post z Reddita zachęcający, by udzielić mocy obliczeniowej na walkę z koronawirusem. Od kilku dni uczestniczę w projekcie i chciałbym zachęcić Was do tego samego.

Spis treści

  1. Projekt folding@home
    1. Start aplikacji
    2. GUI desktopowe
    3. GUI webowe
    4. Tożsamość w aplikacji
  2. Alternatywy dla Folding@home – Rosetta@home
  3. Dlaczego warto – i co dalej?
Czytaj dalej Sprawdź, jak do walki z koronawirusem przekazać część mocy obliczeniowej swojego komputera

Nie tylko Redux – poznaj 4 inne sposoby na zarządzanie stanem w React

Redux, jak i dedykowaną dla Reacta paczkę React Redux można uznać za najpopularniejsze w tym momencie rozwiązanie do kompleksowego zarządzania stanem w React.
Redux potrafi być pobrany ponad 900 tysięcy razy dziennie (za npm-stat), natomiast React Redux ponad 650 tysięcy razy. Nie jest jednak rozwiązaniem idealnym i ma pewne wady:

  1. Duża ilość powtarzalnego kodu, tzw boilerplate
  2. Stan jest globalny – można go modyfikować z wielu miejsc (z dowolnego miejsca można nadać akcję)
  3. Nieodpowiednio użyty może spowodować problemy wydajnościowe

Czy istnieją alternatywy? Tak. Nie tak popularne jak Redux, ale rozwiązujące niektóre problemy inaczej.


Alternatywy dla Reduxa

  1. React Context
  2. MobX
  3. MobX state tree
  4. Reusable
Czytaj dalej Nie tylko Redux – poznaj 4 inne sposoby na zarządzanie stanem w React

Sprawdź 1 + 4 Biblioteki CSS-in-JS dla Reacta do użycia w 2020

Komponenty w React renderują UI na podstawie albo stanu wewnętrznego, albo przekazanych propsów:

const button = ({onClick, primary}) => {
  const [clicked, setClicked] = useState(false);

  const classes = classNames({
    'button': true,
    'button--active': clicked,
    'button--primary': primary,
  });

  return (
   <button
     onClick={() => {setClicked(!clicked); onClick();}}
     className={classes}
    >
     Click
    </button> 
   );
}

Choć widzimy i rozumiemy w jaki sposób dodawane są klasy, czy możemy być pewni jak komponent będzie wyglądał? Nie, ponieważ:

  1. Niekoniecznie wiemy gdzie zdefiniowane są klasy dla przycisku
  2. Jeżeli wiemy, niekoniecznie wiemy czy przypadkowo gdzieś ich nie nadpiszemy
  3. Jeżeli sprawdziliśmy i wiemy, że nie są nadpisane – ktoś kto używa tego komponentu poza naszym projektem może te klasy nadpisać i zmienić zachowanie komponentu nawet nie mając takiego zamiaru

Dodatkowo – jeżeli chcemy sprawdzić co konkretnie kryje się pod każdą klasą, musimy szukać w pliku stylów – poza komponentem. Musimy też o pliku stylów pamiętać podczas przenoszenia np do innego projektu, co ogranicza przenaszalność kodu.

Jeżeli chcielibyśmy uniknąć tego typu problemów możemy napisać style inline:

 const button = ({onClick, primary}) => {
  const [clicked, setClicked] = useState(false);

  return (
   <button
     onClick={() => {setClicked(!clicked); onClick();}}
     style={{
       //jakieś style bazowe
       backgroundColor: primary? 'blue': 'white',
       borderWidth: clicked? '2px' : '1px,
     }}
    >
     Click
    </button> 
   );
} 

Ale zabiera nam to na przykład pseudoselektory czy media query.

Jednym z możliwych rozwiązań jest CSS-in-JS.


Spis treści

  1. CSS in JS
  2. Styled-components
  3. Inne biblioteki CSS-in-JS
    1. Emotion
    2. JSS
    3. Styled-jsx
    4. Aphrodite
  4. Porównanie popularności bibliotek CSS-in-JS
  5. Podsumowanie
Czytaj dalej Sprawdź 1 + 4 Biblioteki CSS-in-JS dla Reacta do użycia w 2020

Poznaj 5 Sposobów Stylowania Komponentów React w 2020

Zdjęcie autorstwa Markus Spiske temporausch.com z Pexels

Główną składową Reacta są komponenty – bardzo popularnym podejściem jest enkapsulacja stylów właśnie w ramach komponentów. Stylowanie to istotna część tworzenia interfejsu użytkownika, można do niego podejść na wiele sposobów – w tym poście przedstawię 5 które są najbardziej warte uwagi w 2020 roku.
Wybór oczywiście jest subiektywny – tak jak subiektywne odczucia zdecydują o tym, który z opisanych sposobów jest najlepszy w Twoim przypadku.


Sposoby

  1. Metodologia BEM
  2. Styled-components
  3. CSS Modules
  4. Shadow DOM
  5. Stylable
Czytaj dalej Poznaj 5 Sposobów Stylowania Komponentów React w 2020