UseReducer jest alternatywą dla useState. Działa lepiej, gdy mamy złożoną logikę stanu, która obejmuje wiele podwartości (np. jeśli stan jest obiektem zagnieżdżonym) lub gdy następny stan zależy od poprzedniego. Hook UseReducer przyjmuje reduktor będący funkcją o sygnaturze (stan, akcja) => nowyStan i zwraca aktualny stan w parze z metodą dispatch:
Read More Hooki React – useReducer tutorialHooki React – useState tutorial
Hooki to nowa funkcjonalność React, dzięki której możemy „zahaczyć” o jego wewnętrzne mechanizmy, co ułatwia pisanie aplikacji. Pierwszy z hook-ów, który chcę przedstawić nazywa się useState i jest to hook, który pozwala korzystać ze stanu w komponencie funkcyjnym (przed wprowadzeniem hook-ów w komponentach funkcyjnych nie można było korzystać ze stanów, dlatego nazywały się one komponentami bezstanowymi. Teraz nazwa została zmieniona na komponenty funkcyjne).
Read More Hooki React – useState tutorialDekoracja tekstu – nowe style css 2019
Nowe style, znaczniki, funkcjonalności – to jest to, co tygryski lubią najbardziej 🙂 W tym wpisie pokażę, jak stylować tekst za pomocą znacznika text-decoration oraz jakie nowe style dla linii (podkreśleń, przekreśleń) dostępne są od 2019 roku
Read More Dekoracja tekstu – nowe style css 2019Stylowanie wybranych linków w css – jak zmienić wygląd niektórych rodzajów linków
W poprzednim wpisie: stylowanie linków za pomocą pseudoklas opisałam, jak można zmienić kolor linków aktywnych, klikniętych lub hoverowanych. Teraz pokażę, jak można zmienić styl wybranych odsyłaczy, np. tylko tych, które prowadzą do plików PDF.
Read More Stylowanie wybranych linków w css – jak zmienić wygląd niektórych rodzajów linkówStylowanie linków za pomocą pseudoklas :hover :active :focus :visited
Standardowy wygląd linków na stronie internetowej zależny jest od przeglądarki. Każdy browser może wyświetlać linki i ich warianty (z różnymi pseudoklasami) w odmienny sposób.
Zazwyczaj jednak chcemy ustawić własne style, po to, by linki wyglądały tak samo niezależnie od tego, z jakiej przeglądarki korzystamy.
Do tego służą pseudoklasy:
Read More Stylowanie linków za pomocą pseudoklas :hover :active :focus :visitedPodstawowe komendy git
Komendy git możesz wykonać między innymi:
– w konsoli cmd (widnows start -> cmd. Otworzy się aplikacja Command Prompt. Aby przejść do katalogu głównego wpisz cd \ . Następnie wpisz cd + ścieżka do katalogu z twoim projektem, np: cd Users\Joanna\Desktop\moj-projekt
– w konsoli git bash, którą możesz pobrać ze strony https://git-scm.com/downloads . Po zainstalowaniu konsoli wejdź do folderu ze swoim projektem, kliknij prawy przycisk myszki i wybierz: Git Bash Here (otworzy się wtedy konsola).
Jeśli masz już konsolę z zaznaczoną ścieżką do katalogu, w którym chcesz umieścić swój projekt, możesz wpisać do niej pierwszą komendę (punkt pierwszy).
Read More Podstawowe komendy gitRem, em – jednostki miary w css
Przyznam, że rzadko korzystam z takich jednostek miary jak rem i em. Zazwyczaj używam pikseli (px), bo jakoś łatwiej mi skojarzyć, jaki rozmiar będzie posiadać dany element.
Jednostki rem i em, w przypadku czcionek, mają jednak jedną przewagę nad pikselami – mogą być ustawione w korelacji do wielkości czcionki rodzica (em) lub roota (najczęściej jest nim element <html> – rem). Daje to możliwość manimulowania rozmiarami dla wielu elementów na raz. Domyślna wartość rozmiaru czcionki dla roota to zazwyczaj 16px (ale to zależy od przeglądarki).
Read More Rem, em – jednostki miary w cssResponsywne obrazki dla różnych ekranów w HTML5
Często spotykanym problemem przy projektowaniu stron internetowych są zdjęcia. Wyświetlenie większego zdjęcia na większym ekranie to lepsze wrażenia dla użytkownika, ale już wyświetlanie dużego zdjęcia na małym ekranie, np. na telefonie, może niepotrzebnie opóźnić ładowanie strony.
Dlatego dobrym rozwiązaniem jest „serwowanie” zdjęć o odpowiedniej wielkości i wadze dla różnych ekranów.
Read More Responsywne obrazki dla różnych ekranów w HTML5Skalowanie obrazka do diva
Czasem chcemy, aby zdjęcie na stronie zmniejszało się wraz ze zmniejszającą się wielkością ekranu. Można to łatwo osiągnąć stosując krótki zapis w css.
Read More Skalowanie obrazka do divaCo to jest hoisting w javascript?
Każdy junior front-end developer powinien wiedzieć, czym jest hoisting. Zagadnienie to można dosyć łatwo zrozumieć, więc jeśli ktoś jeszcze o nim nie słyszał, może szybko nadrobić zaległości:
Read More Co to jest hoisting w javascript?