Jeden fuckup w projekcie zmusił mnie do wygenerowania checklisty przed commitem... Zostawiam tutaj pierwsze kilka punktów, reszta do zerknięcia pod linkiem!
Jestem frontendowcem, więc najpierw zaczynam od mini listy związanej z wyglądem nowej funkcjonalności. Na ten wygląd w tym momencie...
Końcówka 2025 roku to świetna okazja, by podsumować książki, które w tym roku zdążyłem przeczytać. W najnowszym wpisie zebrałem tytuły, które szczególnie mnie zainteresowały, a którym nie poświęciłem osobnych recenzji. W artykule znajdziesz książki poruszające takie tematy jak:
Często o wartości dokumentacji przekonujemy się dopiero wtedy, gdy jej brakuje. W najnowszym artykule opisuję dwa lekkie, ale bardzo przydatne typy dokumentów, które pomagają utrwalić wiedzę i usprawnić komunikację w zespole:
#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
@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.
@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
Rozwalającą się składnie posta przy edycji byście naprawili. Cytat przeskakuje zawsze na kolejny akapit.
@lurker_z_internetu podrzucisz jakieś screeny z przykładem niepoprawnego działania?
@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/
@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ć
Jakiś czas temu, analizując dokumentację Gita, natknąłem się na polecenie git notes. Myślałem, że znam Gita całkiem dobrze, ale to było dla mnie coś nowego.
W najnowszym artykule wyjaśniam, czym są git notes i analizuję możliwości, jakie daje ta funkcja. Dowiesz się również jakie problemy widzę w...
Od jakiegoś czasu w swojej pracy wspomagam się code review wykonywanym przez asystentów AI. W najnowszym artykule opisałem kilka rozwiązań, z którymi miałem okazję pracować. Z artykułu dowiesz się, które z nich moim zdaniem mogą pomóc w dostarczaniu rozwiązań, a które...
Po instalacji Gita zwykle konfigurujemy adres e-mail, nazwę użytkownika czy wykorzystywany edytor. Często po pierwszej konfiguracji Gita rzadko w niej coś zmieniam — a szkoda. Git daje całkiem sporo możliwości, które mogą usprawnić codzienną pracę. W artykule pokazuję kilka mniej oczywistych...
Duże pull requesty to problem, który łatwo rozwiązać dzieląc je na mniejsze. Pojawia się wtedy inny problem. Jeśli zmiany z jednego pull requesta są wymagane w kolejnym, potrzebujemy poczekać na code review... lub skorzystać z podejścia opisanego w podlinkowanym artykule.
Założeniem...
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
@bartek555 no jesteś obok 602, jest czytelnie.
@bartek555 Szóstki oznaczają 6. poziom?
@bori tak, 6 podklad liczac od glownego.
Main deck
mezzanine deck (taki posredni, w kilku miejscach)
A-deck
B-deck
C-deck
D-deck
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ć
Wzorzec projektowy Pamiątka (Memento) to jeden z behawioralnych wzorców projektowych. Pozwala zapisywać i przywracać stan obiektu bez naruszania jego hermetyzacji. W artykule tłumaczę, jak działa Memento i kiedy warto go stosować. Całość ilustruję praktycznym przykładem w TypeScripcie. Zachęcam do...
Wzorzec projektowy Iterator to jeden z behawioralnych wzorców. Wykorzystanie Iteratora pozwala odseparować szczegóły związane z iteracją po strukturach danych od logiki biznesowej aplikacji. Więcej o korzyściach wynikających z wykorzystania Iteratora dowiesz się z najnowszego artykułu na moim...
Wiedza jak robić dobre code review to dopiero połowa sukcesu we wdrażaniu kodu.
Druga połowa to umiejętność tworzenia dobrych pull requestów. W najnowszym artykule na moim blogu skupiłem się na pokazaniu moich rekomendacji dot. przygotowania i skutecznego dowożenia PR-ów. Z artykułu dowiesz...
Code review, moim zdaniem powinien robić każdy członek zespołu. Oprócz aspektów związanych z rozwojem projektu jest to świetna okazja, by nie tylko pomóc innym stać się lepszymi, ale też, by samemu dowiedzieć się czegoś nowego. W najnowszym artykule na blogu przygotowałem zestaw rekomendacji i...
Jak to jest zrobione?
To specjalny popup, w trybie zawsze na wierzchu.
Na Firefox ta funkcja nie jest dostępna.
Działa na wzór Picture in Picture, ale z pełnym HTMLem.
#html #javascript #webdev #frontend
@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
@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ć
Wzorzec projektowy Null Object znajdzie zastosowanie w miejscach, gdzie oczekujemy, że dany fragment kodu zwróci oczekiwany obiekt lub null. Null Object pozwala tworzyć kod bez konieczności obsługi nulli, co często może istotnie zwiększyć przejrzystość kodu. Jednak jego zastosowanie wiąże się z...
W najnowszym artykule na blogu przygotowałem analizę praktycznego zadania programistycznego. Zadanie polega na pobraniu z systemu A zestawu danych i na ich podstawie wykonanie akcji w systemie np. dodanie ich do systemu B. Zadanie wydaje się proste jednak wraz z pojawianiem się kolejnych wymagań i...
W aplikacjach, gdzie tworzone są kosztowne obiekty lub chcemy ograniczyć ich tworzenie, przydać się może wzorzec projektowy Object Pool. Omówienie wzorca znajdziesz w najnowszym artykule na moim blogu. W artykule dowiesz się, jak działa ten wzorzec, poznasz jego charakterystykę, przykładowe...
Wzorzec projektowy Flyweight pozwala na współdzielenie danych między obiektami, redukując ilość zużytej pamięci przez aplikację. Z najnowszego artykułu na moim blogu dowiesz się, jakie są założenia wzorca Flyweight oraz kiedy warto z niego skorzystać. Przygotowałem również przykładową aplikację...
