#frontend

5
95

#hejto #hejtocontent #programowanie #makingofhejto


Dzień dobry!

Ostatnio w pracy debatowaliśmy nad pewnym problemem z formularzami - zdarzało się, że zaczynały mocno lagować, szczególnie wtedy, kiedy

a) w formularzu występowało wiele inputów,

b) zmiany na jednym inpucie wpływały na wartość w innym (np. zmiany w polu "Title" wpływały na wartości w polu "Id").


Stack jaki tam aktualnie mamy to Formik + Yup. Z uwagi na fakt, że problem ten był już wcześniej łatany z różnym skutkiem to teraz padła decyzja na zmianę biblioteki obsługującej formularze - nowy stack to react-hook-form + zod.


Ta sytuacja przypomniała mi, że na hejto również korzystamy z Formik + Yup – może więc i u nas przydałaby się zmiana?


Chciałbym zapytać się:
1. Programistów #webdev #frontend #react - czy macie jakieś doświadczenia/przemyślenia w tym temacie?
2. Wszystkich Użytkowników - czy zdarzyło się Wam zauważyć, że formularze na hejto czasem potrafią się przycinać albo działać wolniej? (o problemie w działaniu formularza dodawania komentarza, kiedy jest sporo komentarzy już wiem i jak to ogarnę to będzie o tym osobny wpis )

89db76cb-b196-482d-b48c-2cdde11fd419
renkeri

@kris Z formik i react-hook-form nie korzystałem bardzo długo, ale z zod'a korzystam regularnie i jest super. Z takich swoich doświadczeń, to mi przy dużych formularzach pomagało wywalanie state skąd tylko się da. Kiedy każdy input ma swój state, to zaczyna to trochę mulić, a wszystko na dobrą sprawę w submit można wyciągnąć z FormData. Jeżeli chodzi o czyszczenie formularza, to przydaje się zmiana `key`, wtedy każdy input wraca do `defaultValue`. No ale wiem, że nie zawsze się tak da.

kris

@renkeri ja właśnie o zod też wiele dobrego słyszałem, na pewno lepiej waliduje url bo yup przy poprawnym (trochę dziwnym ale jednak poprawnym) linku wywalał błąd a zod go przepuszczał. Rzeczywiście modyfikacja stanu może wpływać negatywnie na performance, szczególnie jak stan jest zadeklarowany w parencie z wieloma childrenami (co może występować u nas właśnie przy dużej ilości komentarzy) - na pewno sprawdzę ten trop

lurker_z_internetu

Rozwalającą się składnie posta przy edycji byście naprawili. Cytat przeskakuje zawsze na kolejny akapit.

kris

@lurker_z_internetu podrzucisz jakieś screeny z przykładem niepoprawnego działania?

Catharsis

@kris No generalnie najprościej jest nie przechowywać niczego z formularza w React state, wtedy formularz nie laguje bo nie rerenderuje go całego przy każdym inpucie. Mantine w swoich formularzach ma np. opcje "uncontrolled mode" i dosłownie maja napisane: "Controlled mode is not recommended for large forms". Nie wiem jak to u was wygląda w tej bibliotece bo nigdy z niej nie korzystałem. Ogólnie nie jestem też jakimś expertem Reacta żeby nie było xD. https://mantine.dev/form/uncontrolled/

kris

@Catharsis co do formularzy z inputami w trybie uncontrolled - raczej ich do tej pory nie używałem a to głównie dlatego, że poniekąd wymuszały to biblioteki, z których korzystałem. react-hook-form jest pod tym względem trochę inny bo wewnętrznie właśnie obsługuje inputy jako "uncontrolled" przez co automatycznie ogranicza liczbę renderów ale przy tym ma metody na dobranie się do aktualnej wartości wypełnionego pola - chyba dlatego w moim osobistym rankingu wygrywwa z formikiem

Zaloguj się aby komentować

Zaloguj się aby komentować

Zaloguj się aby komentować

Ej wy tam od front endu, UI czy cokolwiek. Czy was tez razi to YOU ARE HERE poza mapa i druga kropka bez opisu? Czy to tylko moje ocd?


#barteknamorzu #frontend #ui #it

2dbaa95c-fdf2-4a84-803e-7a04578178e5
Felonious_Gru

@bartek555 no jesteś obok 602, jest czytelnie.

bori

@bartek555 Szóstki oznaczają 6. poziom?

bartek555

@bori tak, 6 podklad liczac od glownego.


  1. Main deck

  2. mezzanine deck (taki posredni, w kilku miejscach)

  3. A-deck

  4. B-deck

  5. C-deck

  6. D-deck

kitty95

Jest ok, często tak się na planach oznacza. Ale numeracja pomieszczeń parzyste prawa, nieparzyste lewa i jeszcze odwrotnie pokazane to arcydzieło sztuki planistycznej.

Zaloguj się aby komentować

renkeri

@fewtoast To jest picture-in-picture, w obydwu przypadkach, ale przez to, że Chrome wspiera API picture-in-picture, to mogli dodać customowy przycisk, który zmienia stan. Na Firefox przycisk do zmiany stanu picture-in-picture zobaczysz na każdym elemencie video (niekoniecznie tylko na TikTok), jeżeli source jest dłuższy niż 45s (można zmienić to w ustawieniach) i jeżeli nie ma ustawionego atrybutu disablePictureInPicture .


Link do API: https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API

fewtoast

@renkeri Ale to nie jest samo wideo. No już mam info że jest PiP dla HTML, nie tylko dla wideo.


Mi się PiP dla wideo w stylu Firefoksa w ogóle nie podoba, to jest bardzo zawodne. Takie pełne, pod kontrolą strony, jest lepsze, stabilniejsze.

Mi YouTube czy inne wideo wywala jak coś net przytnie na przykład i to jest męczące wtedy.


A gdyby cały HTML w to wczedł, własny player, tak jak tu na TikTok, to już w ogóle super by było. A nie taki niedorobiony player wideo PiP, gdzie wszystko Firefox musi ręcznie obsługiwać, dublować. A i tak nie działa za dobrze. A to wszystko niby żeby było bezpieczniej chyba.


Kompletnie pusta zmarnowana robota.

Zaloguj się aby komentować

jestem #programista15k i pracuje w #frontend . obecnie pracuje na #windows i tam projekty, nad ktorymi dzialam sie odpalaja bez problemu - czy to pod czystym windowsem, czy pod WSL2. jednak ostatnio sie zastanawiam czy mialoby sens przechodzic na #ubuntu #linux . dla kontekstu dodam, ze pracowalem na windowsie, macbooku i ubuntu dlugi czas, wiec zaden z systemow nie jest mi obcy i przejscie na ubuntu nie bedzie dla mnie trudne pod katem nauki obslugi, terminala, itd.


co myslicie? warto, jesli pod winda wszystko jest ok? myslalem o dual boot'cie na poczatek. jest warto sie meczyc? nie wiem czy to nie "fanaberia", bo windows mi sie znudzil i ubuntu byloby odmiana.

VonTrupka

Tak jak Koszorobury wspomina, 1 system = 1 dysk, więc jak nie masz co w życiu robić, tylko zwiększać ilość problemów do rozwiązania, to podpinaj drugi dysk i instaluj pingwina ( ͡~ ͜ʖ ͡°)

Catharsis

@VonTrupka Niekoniecznie, dualbootuje od jakiś 2 lat, najpierw win10 a teraz win11 i o ile wiesz co robisz to nie musisz podpinać drugiego dysku. Jednak ostrzegam, że wymaga to trochę grzebania i trzeba żyć, że świadomością, że może ci kiedyś któryś system zniknąć z GRUBa xD.

Mi się osobiście zdarzyło to 2 razy, raz zniknął Windows i bez problemu naprawiłem to jedną komendą pod Linuxiem. A raz o dziwo, zniknął Linux i udało mi się to naprawić komendą pod Windowsem xD, to dopiero opcja.

VonTrupka

>i trzeba żyć, że świadomością, że może ci kiedyś któryś system zniknąć z GRUBa xD.


@Catharsis sam podałeś główny powód, występujący u każdego użytkownika co najmniej raz w życiu

Wtedy się każdy uczy zasady, której wspomniałem, aby gorąco nie rozlewało się w sercu i wzdłuż pręgieża po raz kolejny z tego samego powodu (´・ᴗ・ ` )


ale życie na krawędzi nadaje mu smak ( ͡~ ͜ʖ ͡°)

Catharsis

@Component2094 Mimo, że sam korzystam z Linuxa, to jeżeli wszystko ci działa i pracuje ci się dobrze to po co zmieniać? xD O ile ci się nie nudzi czy lubisz wyzwania i zmiany to nie polecam. Ja przesiadłem się na Linuxa bo zwyczajnie irytował mnie Windows i wiedziałem, że na Linuxie mogę zrobić te same rzeczy wygodniej. Jednak jeśli wszystko ci pasuje na Windowsie to od razu mogę ci powiedzieć, że po przejściu na Linuxa pojawią się przeszkody, inne mniejsze inne większe. Na pewno nie będzie ci wszystko śmigać od razu tak jak to będziesz chciał i będziesz musiał spędzić trochę czasu na naprawianiu bądź dostosowywaniu do siebie pewnych rzeczy.


A co do kompatybilności i działania rzeczy z #frontend, to robię full-stack (głównie Next.js) i nie mam żadnych problemów, tak jak wyżej pisali. We wszystkich tutorialach zawsze masz podane komendy na Linuxa. Instalowanie czegokolwiek np na takim Archu to bajka bo wszystko co sobie tylko wymyślisz będzie w repo albo AUR. No i będziesz też pracować w natywnym środowisku w jakim aplikacja najprawdopodobniej będzie hostowana bo wiadomo większość serwerowego świata stoi na Linuxie.

baklazan

@Component2094

Pros:


  • Linux może działać o wiele szybciej, nie potrzebujesz żadnego WSLa itp, po prostu odpalasz wszystko tak jak na maszynie na którą trafia Twój kod. Do tego brak telemetrii nie zmula wsyzstkiego co robisz (ostatnio na Windowsie kolega pokazywał mi jak długo odpala się Windows Media Player... To jest jakaś masakra... mpv FTW)

  • No właśnie - pracuj, jeśli możesz, na tym na co programujesz. Szybciej wyłapiesz potencjalne problemy, a nie będziesz miał problemów które nie występują na produkcji. Jeśli kodzisz frontend, to pytanie na ile robisz w backendzie..

  • Linux Cię nie śledzi

  • Jest elastyczny - możesz go dopasować do Twojego workflow jak tylko chcesz: chcesz więcej wodotrysków, idziesz w KDE czy co tam ładnego jest, pracujesz dużo z konsolą: tiling window managery to złoto w takim wypadku, do tego są bardzo lekkie np.

  • Nie zmusza Cię do robienia update'ów (to w ogóle jakaś maskara jest z tą Windą, ot, przerwa w pracy bo OS sam z Siebie się aktualizuje...)

  • Nienawidzę NTFS'a. Jest wolny i przestarzały, nie wiem jak można na tym pracować. System plików Linuksa jest o niebo lepszy.


Cons:


  • OS nie dla noobów, którym z tego co piszesz nie jesteś, ale czasami lubi czymś zaskoczyć. Dobra dystrybucja załatwia wiele problemów z reguły, ale jakieś problemy są nieuniknione

  • Zwłaszcza na początku, wymaga od Ciebie więcej czasu: na rozwiązanie potencjalnych problemów ze sprzętem/konfiguracją, dostosowanie środowiska pracy itp. Potem po prostu działa, no chyba że lubisz coś psuć - tutaj nie będzie nikt nad tobą stał i wyciągał do Ciebie rękę, popsułeś i nie zrobiłeś backupu - do widzienia!

  • większość gier albo nie działa, albo nie działa tak jakbyś chciał, bo wielu deweloperów ignoruje Linuksa jako platformę (z dobrych powodów akurat). Ostatnimi laty Valve zrobił w tym temacie bardzo dużo dobrego, więc jest o wiele lepiej, ale wciąż trzeba się gimnastykować.


To chyba tyle. Od bodaj 5ciu lat nie używam Windy prawie wcale albo wcale. W pracy miałem wymóg Windy więc odpalałem na niej VM z linuchem i na niej pracowałem - bardzo fajne rozwiązanie wbrew pozorom! Przy przenoszeniu na nowego kompa kopiowałem wirtualny dysk, instalowałem VM i mogłem z miejsca pracować dalej.


Odkryłem jakiś czas temu coś takiego jak LVM. Na windzie swego czasu, jak brakowało miejsca to były dwie opcje:


  • kupić nowy dysk, dołożyć do kompa, ale pieprzyć się z tym że część plików masz na jednym dysku, część na drugim, więc co chwila któryś się zapycha, albo jakiś program domyślną ścieżkę ma nie na ten dysk itp. Było to dla mnie zawsze "normalne", ale trzeba przyznać że upierdliwe i strata czasu

  • kupić nowy dysk i przenieść wszystko ze starego - czasochłonne, cała winda do przeinstalowania, do tego poprzenosić pliki - znowu, strata czasu, stąd to rzadziej wybierana opcja. Do tego: po co wyrzucać stary dysk (jeśli to nie laptop z jednym slotem)


Otóż LVM wprowadza abstrakcję na nośniki. Tworzysz grupę nośników i to na niej tworzysz partycje. Jak kończy Ci się miejsce, dokupujesz nowy dysk podłączas, dodajesz go do grupy nośników i rozszerzasz partycje (ext3 pozwala to zrobić w locie, więc nie ma problemów z rebootowaniem, utratą danych itp). I tyle, 2 komendy.

Kolega polecił mi robić partycje ale nie zajmować od razu całej grupy - zostawiając wolne miejsce. Jak będzie Ci się kończyć miejsce na partycji to ją po prostu rozszerzasz jednym poleceniem.


Do tego wspiera softwareowego RAIDa - co tu dużo mówić.


Byłem zaskoczony że o tym wcześniej nie słyszałem, okazuje się że LVM jest w kernelu od 20 lat .. : > (więc jest stabilny w ciul i bardzo dobrze zoptymalizowany).

koszotorobur

@baklazan - fajnie się kolego rozpisałeś i podzieliłeś swoimi opiniami i doświadczeniami - jak masz zamiar takie fajne komenty pisać to mnie zawsze proszę taguj - bo coś ostatnio mało to technicznych porządnych komentarzy.

baklazan

@koszotorobur Żeby było jasne - opis LVMa uprościłem, trzeba się trochę wczytać w tutoriale i dokumentacje jeśli chce się z tego korzystać z linii komend. Z drugiej strony są też narzędzia GUI, ale sam nie korzystałem.


A za piorunka dziękuję, postaram się zawołać jak już wymyślę taga i będę miał pomysł żeby coś wrzucić ; )

Zaloguj się aby komentować

Następna