Tydzień 42

Jak skomplikować sobie życie? Wystarczy zrobić coś więcej niż proponuje wykładowca w trakcie kursu. W trakcie kursu Modern Java Script miałem zrobić prosty quiz w consoli, ale stwierdziłem, że jak mam robić quiz, to musi się on normalnie wyświetlać w przeglądarce. Finalnie to co miało mi zająć pół godziny, zajęło niemal 18 godzin.

Oczywiście nauczyłem się przy tym kilku nowych rzeczy, głównie związanych z logiką w Java Script. Dopóki skrypt wykonuje się raz na stronie, to nie napotykamy problemów związanych z obróbką i przechowywaniem danych pomiędzy przeładowaniami strony. Przy tej okazji pierwszy raz zatęskniłem za React.JS. Tam wszystkie elementy odświeżają się wielokrotnie na stronie i nie martwisz się o aktualność danych na których pracuje kod. W Vanilia JS komponenty nie aktualizują się dopóki nie przeładujesz strony. W związku z tym konieczne było wykorzystanie sessionStorage do trzymania gdzieś informacji na temat bieżącego wyniku i ilości zadanych pytań.

Kolejnym wyzwaniem w projekcie było zapewnienie, aby pytania w trakcie quizu nie powtarzały się. Niby prosta pętla sprawdzającą czy w obiekcie znajdują się już numer pytania, który chcemy zadać, ale finalnie trochę się namęczyłem z tym tematem. Kod trzeba było ustawić w pętli, żeby wykonywał się zawsze wtedy, kiedy pytanie się dubluje. Z drugiej strony potrzeba było zabezpieczyć kod przed wykonywaniem się bez końca. Ostatecznie wyszło to tak:

do{
    randomNumber = Math.round(Math.random() * 19);
    testValue = 0;
    for (i=0; i<questionStorageNbr.length; i++){
      if(randomNumber === questionStorageNbr[i]){
        testValue = -1;
      }
    }
    i += 1;
  } while (testValue < 0 && i < 10);
  questionStorageNbr.push(randomNumber);
  sessionStorage.setItem(“QuestionHistory”, questionStorageNbr);
}

Sporym wyzwaniem okazało się również przekazanie wartości z formularza do Java Script. Wcale nie dlatego, że to jakaś skomplikowana funkcja, ale głównie dlatego, że w internecie pełno jest sprzecznych ze sobą informacji na ten temat i musiałem kilka sposobów przetestować, żeby wyłonić ten, który działa:


let answerValue = document.querySelector(‘input[name=”answerX”]:checked’).value;
  if (answerValue == correctAnswerNumber){
    totalScore += 1;
    sessionStorage.setItem(‘SessionTotalScore’, totalScore);
    sessionStorage.setItem(‘TemporaryAnswer’, 1);
  }else{
    sessionStorage.setItem(‘TemporaryAnswer’, 0);
  }
});

Pod względem graficznym projekt nie jest skomplikowany i jedynym know-how jest użycie dodatkowej klasy w CSS ustawiającej właściwość display: none; w powiązaniu z kodem JS dodającym i usuwającym ta klasę z pliku css.

W tym tygodniu na programowaniu spędziłem w sumie 20 godzin, z czego 18 godzin zajęło mi przygotowanie quizu, który jest dostępny pod adresem: FrontendQuiz

No comments
Krzysztof NyrekTydzień 42
read more

Tydzień 41

Pierwsza „duża” strona www za mną. Projekt zrealizowany kompleksowo od koncepcji, przez realizację do oczekiwania na ostatnie materiały od klienta. Nigdy bym się nie domyślił, że przygotowanie materiałów na stronę może zajmować tyle samo, albo i więcej czasu od pisania kodu. Też tak masz?

Ogólnie z projektu jestem zadowolony. Jest to fajne podsumowanie tego, co do tej pory nauczyłem się o HTML i CSS. Java Script wykorzystałem tylko do galerii zdjęć i nie pisałem kodu sam, tylko ściągnąłem gotowca. Dwa razy podchodziłem do zoptymalizowania kodu JS na swoje potrzeby, ale za każdym razem okazywało się, że drobne modyfikacje w CSS załatwiają problem i JS nie trzeba zmieniać. Może to i dobrze, bo jak coś działa to po co przy tym grzebać? Najciekawsze jest to, że w projekcie było sporo fotek do wstawienia. Niby nic, ale każda fotka w innym rozmiarze, a kontener na fotki w jeszcze innym rozmiarze. To spowodowało, że musiałem się zaprzyjaźnić z GIMPem. Nadal nie umiem idealnie poskładać jednej fotki z pięciu, ale za to kadrowanie, skalowanie i lekki retusz mam w małym paluszku.

W tym tygodniu oprócz kodowania znalazło się też trochę miejsca na podsumowanie zdobytej do tej pory wiedzy. Trochę z przyzwyczajenia, a trochę z braku przemyślenia tematu na początku swoje notatki prowadziłem w zeszytach. Klasycznie, jak w szkole czy na studiach. W zasadzie to żaden problem, a niektórzy nawet pochwalą, że to pamięć mięśniowa, więc super świetnie. Niby tak, ale…

  • zauważyłem, że niektóre elementy zapisane mam kilka razy w różnych miejscach;
  • brak porządku w tych notatkach (elementy związane z JS mieszają się z HTML i CSS) to utrudnia szukanie odpowiedzi na pytania;
  • w zeszycie nie działa ctrl + F;
  • często używane zeszyty niszczą się szybko.

Wobec narastających problemów z zarządzaniem wiedzą postanowiłem przenieść notatki do świata cyfrowego. Nad narzędziem nie zastanawiałem się długo. W zasadzie znam dwa dobre narzędzia do przechowywania wiedzy: Evernote i Microsoft OneNote. Narzędzie od Microsoftu, według mnie, jest zdecydowanie lepszym wyborem. Posiada wszystkie zalety Evernota, ale do tego pozwala wrzucać linki wewnątrz sekcji, dzięki czemu wyszukiwanie informacji jest niezwykle proste. Co więcej aplikacja desktopowa jest dużo bardziej przyjemna w obsłudze.

Porządkując wiedzę znalazłem kilka stron z opisem znaczników html. Pomyślałem, ze fajnie będzie je tu wrzucić, bo okazują się być dość przydatne, a jakoś tak mniej popularne niż <div>, <p> czy <section>.

HTML5 oferuje możliwość umieszczenia na stronie multimediów w trzech znacznikach:

<iframe src=” “></iframe> bardzo często wykorzystywany do umieszczania video z serwisu YouTube;

<video controls width=””> <source src=” ” type=” “></video> pozwalający umieścić materiał video na stronie.

<audio controls><source src=””></audio> pozwalający umieścić na stronie materiał audio.

Prawo autorskie i swobodny dostęp do informacji był przedmiotem gorącej debaty w 2019 roku, ale w zasadzie sam nie wiem na czym stanęło. Można cytować inne strony na swojej stronie, czy nie można? W każdym razie, gdybyś potrzebował skorzystać z eleganckiego znacznika HTML do cytowania, to przyda Ci się na pewno <blockquote cite=””></blockquote> który właśnie do tego służy.

Strona www musi być responsywna. Co do tego nikt już nie ma wątpliwości. Wyzwaniem pozostaje ładowanie odpowiedniej wielkości zdjęć w zależności od wielkości ekranu użytkownika. Oczywistym wydaje się, że serwowanie zdjęć w wysokiej rozdzielczości na małe ekrany niepotrzebnie spowalnia ładowanie się strony. Na szczęście HTML oferuje znacznik <picture> w którym możemy określić, które pliki mają się załadować w zależności od wielkości ekranu np.:

<picture>
<source media=”(min-width: 1024px)” srcset=”wysoka_rozdzielczosc.jpg”>
<source media=”(min-width: 650px)” srcset=”srednia_rozdzielczosc.jpg”>
</picture>

Wspominając o zdjęciach warto też zaznaczyć, że poza popularnym formatem jpg czy png dostępny jest obecnie format wepb. Jest to format dużo lżejszy, a przy tym utrata jakości zdjęć jest akceptowalna.

To tylko kilka znaczników, których wykorzystanie na co dzień może pomóc. Samych znaczników jest oczywiście o wiele więcej. Tak naprawdę, to łatwo przekonać się na własnej skórze jak dużo jest znaczników html, z których nie korzystamy próbując zdać egzamin ewaluacyjny na LinkedIn 😉

W tym tygodniu pisanie kodu zajęło mi 17 godzin. W całości przeznaczone na tworzenie strony www. Czasu związanego z porządkowaniem notatek nie wliczam. W przyszłym tygodniu wracam do nauki JS.

No comments
Krzysztof NyrekTydzień 41
read more

Tydzień 40

Zgodnie z zapowiedzią, w tym tygodniu w całości skupiłem się na Grid. Najpierw teoria, potem praktyka. Znając Flex i Grid poważnie zastanawiam się po co komu Bootstrap, albo Bulma? Zastanawiam się tak bardzo, że chyba wrzucę jedno z tych środowisk to planu nauki na 2020 rok.

Wracając do Grida, to podobnie jak w przypadku Flexa w podsumowaniu tego tygodnia skupię się, na przedstawieniu najważniejszych zagadnień związanych z tym narzędziem i krótkim podsumowaniu możliwości jakie daje.

Grid, podobnie jak Flex oddziałuje na bezpośrednie dzieci elementu w którym ustawimy właściwość CSS display: grid. Jednak samo ustawienie parametru display: grid to za mało, żeby zauważyć jakieś zmiany w wyglądzie strony. W wersji minimalnej potrzebujemy jeszcze podać na ile kolumn Grid ma podzielić nasz kontener. Jednak same kolumny, to nie wszystko. Największą zaletą Grida jest to, że pozwala nam podzielić wybrany kontener na dowolną ilość kolumn i wierszy. Dzięki temu uzyskujemy „siatkę” w której dowolnie możemy lokować kontent. Czy może być lepiej? Oczywiście tak.

Oprócz możliwości utworzenia dowolnej siatki w wybranym elemencie strony, Grid pozwala również dopasowywać ilość kolumn/wierszy do zawartości kontentu. Jak się domyślasz, ta właściwość kapitalnie pomaga w tworzeniu responsywnych stron. W praktyce, zaprojektowanie dobrze wyglądającej strony na różnej wielkości ekranach może w ogóle nie wymagać od Ciebie użycia media queries. Cudownie prawda?

Wróćmy na moment do budowania layoutu elementu, któremu nadaliśmy właściwość display: grid. Za pomocą grid-template-rows i grid template-columns możemy utworzyć dowolną ilość kolumn i wierszy. Np.:

display: grid;
grid-template-columns: 1fr 1fr 2fr 200px;
grid-template-rows: 100px 200px 400px 100px;

Kod zapisany powyżej spowoduje utworzenie 4 kolumn o szerokościach: 1fr, 1fr, 2fr, 200px, oraz czterech wierszy o wysokościach 100px, 200px, 400px i 100px.

Wielkości kolumn i wierszy mogą być podawane we wszystkich jednostkach obsługiwanych przez CSS łącznie z wykorzystaniem funkcji calc. Co więcej, przy tworzeniu layoutu bardzo pomocna jest funkcja repeat. Pozwala nam tworzyć wielokrotnie kolumny lub wiersze bez pisania długich linijek kodu np.:

grid-template-columns: 1fr 1fr 1fr  1fr 1fr;
można zapisać prościej:
grid-template-columns: repeat(5, 1fr);

Magię dotyczącą responsywności strony można uzyskać poprzez korzystanie z automatycznych generatorów oferowanych przez Grid:

Auto-fill – liczy samemu ile kolumn, lub wierszy ma wygenerować, żeby pomieścić wszystkie elementy, lub zapełnić cały kontener np.: grid-template-columns: repeat(auto-fill);

Auto-fit – również utworzy automatycznie liczbę kolumn lub wierszy, ale puste kolumny będą miały szerokość/wysokość 0px;

Tworzenie automatycznie kolumn i wierszy to nie wszystko, Grid dysponuje również właściwościami pozwalającymi na automatyczne dopasowanie wielkości kolumny/wiersza do zawartości:

Max content to jednostka wirtualna, która zajmuje dokładnie tyle miejsca, ile potrzeba na to, żeby zawartość największego boxa w danej kolumnie lub wierszu wyświetliła się poprawnie.

Min content to jednostka wirtualna, która zajmuje dokładnie tyle miejsca, żeby upakować content bez efektu overflow.

Min-max function –  pozwala ustawić wartość minimalną i maksymalną kolumny wiersza np..: grid-template-rows: repeat(2, minmax(150px, min-content));

Jeżeli chodzi o umiejscowienie w siatce kolejnych elementów, to układane są one od lewa do prawa, z góry na dół zgodnie z kolejnością w jakiej występują w kodzie html. Jeżeli chcemy, aby któryś element lub elementy były wyświetlane w innej kolejności można im nadać właściwość order i podać liczbę, która będzie interpretowana przez Grid jako priorytet danego elementu.

Wiedząc już, że Grid pozwala stworzyć siatkę na stronie możesz się zastanawiać co z elementami, które są większe i nie mieszczą się w jednej kolumnie/wierszu? To świetne pytanie. Rozwiązania są dwa, w zależności od tego co chcemy osiągnąć. Jeżeli potrzebujemy, żeby jeden element wysunął się poza kontener to wystarczy ustawić wielkość takiego elementu i o ile nie ustawiliśmy właściwości min-content to taki element będzie „wystawał” poza kontener.

Drugi sposób jest taki, żeby określić obszar zajmujący kilka kolumn/wierszy. Zdefiniować go można jako grid-area. Sposobów definiowania jest kilka. Można określić numery kolumn i wierszy które grid-area ma zajmować, podać startowy box i określić ile kolejnych ma zajmować grid-area, lub określić początek obszaru i wskazać, że obszar powinien się kończyć na krawędzi kontenera.

Do tej pory omówiliśmy sposób umieszczania elementów w siatce. Pora na pozycjonowanie elementów względem boxu w którym się znajdują. Pozycjonowanie elementów w kontenerze można zdefiniować za pomocą właściwości:

  • Justify-items;
  • Aling-items;
  • Justify-content;
  • Align-content;

Dodatkowo można wypozycjonować pojedynczy element za pomocą właściwości nadanych temu elementowi:

  • Justify-self;
  • Align-self.

Grid jest świetnym narzędziem do tworzenia layoutów na stronie, a w połączeniu z flexem tworzą narzędzie, które znacząco ułatwia pracę nad stroną. Osobiście zakochałem się w tych dwóch narzędziach.

W tym tygodniu na pracy ze stronami spędziłem szesnaście godzin, z czego większość na projekcie strony www dla córki. Ten projekt będzie niezłym podsumowaniem tego, czego się nauczyłem do tej pory. Na pewno pochwalę się efektami pracy na blogu.

No comments
Krzysztof NyrekTydzień 40
read more

Tydzień 39

Flex ostatecznie przekonał mnie do siebie. Nie wiem czemu, po pierwszym spotkaniu z narzędziem CSS o nazwie Flex-box miałem negatywne odczucia. Nie wiem z czego to wynikało. Może nie zrozumiałem jak flexa można wykorzystać, może nie zrozumiałem jak flexa używać. Narzędzie poznałem, ale wykorzystywać nie chciałem. W tym tygodniu to się zmieniło.

Zaczęło się od rozdziału poświęconego Flex-Box w kursie Advanced CSS, który aktualnie przerabiam. Początkowo chciałem ten rozdział przeskoczyć, ale potem przyszła myśl, że nie jest ważne to czy jakieś narzędzie lubię, czy nie muszę wiedzieć jak z niego korzystać. Okazało się, że Jonas Schmedtmann potrafi do mnie świetnie trafić. Pięć godzin materiału wideo i zrozumiałem jak to działa i jak można wykorzystać możliwości flexa bez szarpania się z kodem.

Na początku tygodnia zakodowałem przykładowy projekt z kursu, a w drugiej połowie tygodnia zasiadłem do projektu strony www mojej córki. Pomijając etap projektowania strony, który okazał się długi i żmudny (dobrze, że na świecie żyjąc ludzie chcący zajmować się UI/UX) do budowy layoutu strony wykorzystałem głównie flex-boxa. Dzięki temu dodanie responsywności zajęło pół godziny i to tylko dlatego, że na desktopie poszalałem z układem zdjęć w jednej sekcji i koniecznie chciałem przenieść ten układ na mobile. Ostatecznie stwierdziłem, że zajmie to zbyt dużo czasu i poniżej granicznej wielkości ekranu po prostu ładuje się jedno zdjęcie, zamiast kilku.

Korzystając z długiego obcowania z flex-boxem w tym tygodniu postanowiłem wrzucić tu małe podsumowanie tego jak korzystać z tej własności.

Zacząć należy od zrozumienia, na jakie elementy „oddziałuje” flex-box. Właściwość display: flex ustawiamy w elemencie nadrzędnym, a właściwość obejmie wszystkie bezpośrednie dzieci tego elementu. Flex nie będzie oddziaływał na elementy zawarte w komponentach podrzędnych dzieci w tym sensie, że ustawi na stronie układ dzieci, ale nie elementów wewnątrz dzieci. To specyficzność wywołała u mnie początkowo największą konsternację. Głównie dlatego, że w pierwszej chwili nie wiadomo jak ustawić elementy w komponentach wewnętrznych. W praktyce bez problemu można ustawić display: flex w elemencie nadrzędnym, a następnie ponownie display: flex w elemencie podrzędnym, jeżeli chcemy w nim również wykorzystać flexa.

W drugim kroku, żeby nie być zaskoczonym, jak flex ustawi elementy na stronie, trzeba zrozumieć czym jest flex-direction i jak działa. Flex-direction należy rozumieć, jak strzałkę wskazującą kierunek układania elementów podrzędnych. Domyślnie kierunek ustawiania elementów jest od lewej do prawej. Można go zmienić, na odwrotny kierunek za pomocą row-reverse. Inną możliwością jest ustawianie elementów w kolumnach. Jeżeli chcemy, żeby elementy układały się jeden pod drugim korzystamy z flex-direction: column. Na koniec mamy możliwość ustawienia elementów w kolumnach w odwróconej kolejności: column-reverse. Gdyby z jakichś powodów konieczne było ustawienie elementów w innej kolejności niż to wynika z umiejscowienia ich w kodzie html, zawsze możemy użyć właściwości order. Domyślna wartość to zero. Im wyższa wartość tym bliżej początku zostanie umieszczony taki element.

Elementy można ustawiać wzdłuż poszczególnych osi:

  • Justify-content – układa elementy wzdłuż osi flex-direction;
  • Align-content – układa wierszy lub kolumn wzdłuż osi przeciwnej do flex-direction;
  • Align-item – układa elementy wzdłuż osi przeciwnej do flex-direction;
  • Align-self – ułożenie pojedynczego elementu wzdłuż osi przeciwnej do flex-direction.

Właściwości wymienione powyżej, to prawdziwa magia flex-boxa. Pozwalają bardzo szybko w niemal dowolny sposób zorganizować treści w danym komponencie lub na całej stronie. Poza tym flex-box ma kilka ustawień, które pozwalają na uzyskanie efektu resposywności w pewnym zakresie rozdzielczości ekranu.

Flex-wrap – pozwala nam zdecydować, czy elementy w danym komponencie mają się zawijać. Właściwość ta zawsze uzupełni dany wiesz elementami w takiej ilości w jakiej te komponenty się zmieszczą, a kolejne umieści w następnym wierszu, jeżeli tylko ustawimy właściwość flex-wrap: wrap.

Kolejne dwie właściwości pozwalające uzyskać efekt responsywności to flex-grow i flex-shrink. Pierwsza określa, czy i z jakim priorytetem dany element może rosnąć w obrębie dostępnego miejsca, a druga właściwość określa czy i z jakim priorytetem dany element może maleć. Uzupełnieniem tych elementów jest właściwość flex-basis stanowiąca o tym, jaki rozmiar ma zająć dany element podstawowo. Można ustawić flex-basis w procentach, wtedy dany element będzie zajmował określony procent dostępnej przestrzeni.

Jak widzisz flex-box to potężne narzędzie znacznie ułatwiające układanie elementów na stronie. U mnie początkowa niechęć zamieniła się w fascynację i szczerze polecam korzystanie z możliwości jakie daje flex, zwłaszcza biorąc pod uwagę ile czasu można zaoszczędzić dzięki temu.

Jak już wspomniałem we wstępie w tym tygodniu królował u mnie Flex. Na oswojenie się z Flexem potrzebowałem sześć i pół godziny, kolejne dziewięć godzin zajęło mi budowanie strony dla córki, z czego trzy i pół godziny pochłonął projekt. W przyszłym tygodniu zaprzyjaźnię się bardziej z gridem i mam nadzieję, że dzięki tym dwóm narzędziom budowa każdego layoutu strony będzie dla mnie możliwa.

No comments
Krzysztof NyrekTydzień 39
read more

Tydzień 38

Zakończyłem szkolenie WTF Co ten frontend. To chyba najważniejsze wydarzenie tego tygodnia. Grubo po terminie, za to zainspirowany i naprowadzony na wiele ciekawych wątków. Dzięki tematom poruszanym w ramach szkolenia WTF zanurzyłem się bardziej w CSS i JS. Próbowałem nawet Reacta, ale po trzech tygodniach uznałem, że za mało jeszcze wiem o JS.

No comments
Krzysztof NyrekTydzień 38
read more

Tydzień 37

Strony WWW wyglądają ładnie, ale koszmarnie długo się ładują. Problem polega na tym, że ludzie są niecierpliwi, a do tego przyzwyczajeni, żeby dostawać wszystko tu i teraz. Jeżeli mają na coś czekać, to rezygnują. Wybierając między ładnym wyglądem, a szybkością wczytywania się strony, zawsze należy wybierać szybkość.

Jakiś czas temu stworzyłem stronę promującą Błędne Skały i generalnie strona jest bardzo ładna wizualnie, ale miała taki mankament, że ładowała się nieznośnie długo. Na szczęście narzędzia developerskie w Google Chrome pomagają w tym zadaniu. Pierwsze z nich to narzędzie „Network” w zakładce dla developerów, które pokazuje wagę każdego z ładowanych plików strony WWW i czas potrzebny do jego załadowania.

Drugie narzędzie to Audits, również dostępne w zakładce dla developerów. Narzędzie to bada nie tylko szybkość ładowania się strony, ale ocenia również SEO i pokazuje jak strona wyświetla się w trakcie ładowania. Te dwa narzędzia dają już bardzo dużą wiedzę na temat tego, jak szybko ładuje się strona i jakie oceny otrzyma w badaniu przez najbardziej popularną przeglądarkę w sieci. Warto mieć dobre oceny w tym rankingu.

Błędne Skały przeszły przede wszystkim kurację odchudzającą zdjęć. https://tinypng.com/ to świetne narzędzie do kompresji zdjęć bez znaczącej utraty ich jakości. Nie wiem na czym polega algorytm „odchudzania” zdjęć, ale ważne że działa. Poza tym zauważyłem, że część dodanych na stronę zdjęć miało wyższą rozdzielczość niż wyświetlana na stronie. Patrząc na to obiektywnie, to zupełnie niepotrzebne spowalnianie ładowania się strony. Co gorsza, jest to niepotrzebne marnowanie transferu klienta, który szczególnie w przypadku połączeń komórkowych jest ograniczona.

Drugim przedmiotem optymalizacji była aplikacja HydroApp. Docelowo zaprojektowana dla użytkowników urządzeń mobilnych. Najwięcej kodu w tej aplikacji jest po stronie Java Scriptu. Trudno zoptymalizować kod html, ale okazało się, że można wykonać optymalizację za pomocą funkcji oferowanych przez Serwice Worker. Serwice Worker, to skrypt który uruchamia się w sposób niezauważalny dla użytkownika, a web developerowi pozwala uruchomić kod w tle. Jedną z ciekawych opcji na jaką pozwala Serwice Worker, to możliwość ściągnięcia niezbędnych elementów strony do pamięci cache na urządzeniu. Dzięki temu witryna może ściągnąć ciężkie pliki tylko raz, bez konieczności ściągania tych samych plików za każdym razem, kiedy użytkownik zechce odwiedzić stronę. Można również ściągnąć do pamięci cache całą witrynę, dzięki czemu będzie ona działała offline w takim zakresie, jaki jest dostępny bez konieczności wykonania interakcji z serwerem. Hydro App nie jest dużą witryną, więc zdecydowałem się na ściągnięcie całości do pamięci cache przy pierwszym uruchomieniu, a następnie synchronizowanie z serwerem kiedy sieć jest dostępna. Praktycznie jednak, aplikacja nie komunikuje się z serwerem, bo ilość wypitych szklanek wody przechowywana jest w pamięci podręcznej przeglądarki. Dzięki takiemu zabiegowi użytkownik zyskuje możliwość korzystania z aplikacji nawet wtedy, kiedy nie ma dostępu do sieci.

Na koniec ciekawostka z tego tygodnia React View. Jeżeli chcesz pozwolić ludziom od designu pobawić się komponentami w React, to powstało do tego świetne narzędzie. Po polsku można by to nazwać generatorem kodu online. https://baseweb.design/blog/introducing-react-view/ narzędzie daje dużo swobody w modyfikowaniu zachowania się komponentów, co wpływa na interakcję aplikacji z użytkownikiem. W fazie projektowej takie narzędzie znacznie przyspiesza pracę.

W tym tygodniu na optymalizację stron poświęciłem dwanaście i pół godziny.

No comments
Krzysztof NyrekTydzień 37
read more