#frontend

Właśnie zrobiłem upgrade bibliotek projektu w React, chociaż jestem backendowcem głównie, ale ogólnie orkiestrą.

1. Wyje@#% yarn'a i dałem NPM'a. Kiedyś yarn miał sens, ale npm rowniez jest szybki lub nawet szybszy
2. Jako to ze npm install && npm update jest czysty, to może bun'a zaciągne dla nich, by Ci/CD był szybszy.
3. Nie wiem jakim cudem wczesniej yarn install działał ale npm install nie. Były locki między bibliotekami, ale yarn ma to w d⁎⁎ie?! ni wiem. Po⁎⁎⁎⁎ne narzędzie, npm lepszy, bo prosty i ładniej pokazuje zależności i błędy. Yarn czasem działał jak wywalilem npm_modules
4. Upgrade nodeJS z 16lts na 18lts
5. Z 50 paczek co były updatetowane, tylko 6 nie jest najnowszych, z powodu że locki na reacie 17 są
6. Frontend team miał wyjebane na to od 3 lat
7. A to wszystko w 1 dniówkę.
8. TypeScript działa jak powinien. Dzięki TS upgrade dla mnie był możliwy i łatwy. Ale też ma swoje błędy (np react-google-recaptcha robiła mnie w konia przez zły import statement)
9. Odchudziłem projekt z wielu bibliotek, które nie były wykorzystywane
10. Poustawiałem rygorystyczne eslinty, depchecki itp by nie zostawiali po sobie syfu
11. Ustawiłem sbom by ich ganiać jak jest jakiś security bug w bibliotekach w przyszłości, że ponad 50 bilbiotek ma security bug xD

Zostaje jeszcze przeniesienie material-ui na wersję 5, ale tego na razie nie tykam.

Krzyczeli że nie możliwe, a wystarczyło usiąść po prostu do tego i na spokjnie ogarnąć bez złego nastawienia.

Czuje dobrze człowiek dzisiaj. #react #programowanie #nodejs #typescript #frontend #backend

Cześć Wam 👋

Dzisiaj ciekawostka o ReactJs numer #3

> Wirtualny DOM (Virtual DOM) w ReactJS przynosi wiele korzyści, lecz ma również wady! Jakie?

:point_right: Więcej na ten temat: https://programystics.com/reactjs/wirutualny-dom-nie-taki-bez-wad/

ps te ciekawostki nie omawiają tematów dogłębnie, mają jedynie zachęcić osoby do przyglądnięcia się reactjs :smiley: tak, wiem, doskonały temat na zachętę dot. WAD 😂

pss jeśli chcesz podzielić się doświadczeniami na w/w to śmiało, zapraszam 🔥 będzie mi bardzo miło!

#react #reactjs #programowanie #javascript #typescript #frontend

>Tomasz Nikodem Hajto, ps. „Gianni” [...] – Ja kupuję tylko firmy Gianni Versace – powiedział i w ten sposób został na długie lata „Giannim”

Lubię przekazywać nazwami funkcji / podprojektów jakieś skojarzenie w formie easter-egga. Mam nadzieję, że śmieszne. #lajko <---- tag z #hejto dad jokes

No więc dzisiaj - frontend z użyciem Vue (nazwany właśnie `gianni` - sprawdź repo, daj gwiazdkę https://github.com/wombatDaiquiri/lajko ). Znowu pojęcie o tym jak działa framework mam mgliste. Ale działa. Jak chcielibyście mnie poprawić, to zapraszam do komentarzy 😉

Jak po sznurku, z tutoriala https://vuejs.org/guide/quick-start.html#creating-a-vue-application

> npm create vue@latest

tutaj poklikałem co mi się wydawało sensowne na czuja xD

> :heavy_check_mark: Project name: … gianni
> :heavy_check_mark: Add TypeScript? … No
> :heavy_check_mark: Add JSX Support? … No
> :heavy_check_mark: Add Vue Router for Single Page Application development? … No
> :heavy_check_mark: Add Pinia for state management? … No
> :heavy_check_mark: Add Vitest for Unit Testing? … No
> :heavy_check_mark: Add an End-to-End Testing Solution? › No
> :heavy_check_mark: Add ESLint for code quality? Yes
> :heavy_check_mark: Add Prettier for code formatting? Yes

no więc mamy folder z przykładową apką vue.

> cd gianni
> npm run dev

wchodzimy z przeglądarki na http://localhost:5173/ - no coś tam się wyświetla.

ponieważ jestem totalnym beztalenciem graficznym, to po prostu odtworzę wygląd z hejto.

Efekt końcowy na screenie poniżej;

No więc jak teraz sobie użyć apki? (tutaj jak otworzyć terminal: ) Otóż musicie;

1. odpalić `nodejs scrape.js` żeby pobrać dane z hejto
2. skopiować nazwę pliku utworzonego w data-snapshots ( będzie wyglądała mniej-więcej tak: 2023-09-21T23:28:31.109Z.json )
2.1. (już w tym momencie możecie sobie przejść do kroku X ale wtedy dostaniecie normalne hejto tylko brzydsze)
3. odpalić skrypt do przesortowania postów (możecie odpalić oba)
3.1. `nodejs process.js --cmd=likes_total --source=data-snapshots/2023-09-21T23:28:31.109Z.json`
3.2. `nodejs process.js --cmd=comment_likes_sum --source=data-snapshots/2023-09-21T23:28:31.109Z.json`
4. wskazać w pliku ./gianni/src/App.vue skąd pobrać posty ( `import posts from '../../data-processed/cls/2023-09-21T23:28:31.109Z.json';` )
5. wejść do folderu gianni: `cd gianni`
6. odpalić serwer z frontendem xD kiedyś se o tym też pogadamy ( `npm run dev` )
7. wchodzicie na http://localhost:5173/ i widzicie brzydkie hejto, ale z postami być może w innej kolejności niż na hejto
8. zauważcie, że tylko raz kopiowaliśmy nazwę i wszędzie ją podmieniliśmy - to oczywiście super kandydat na automatyzację/flagę. Ale napisanie aplikacji w taki sposób to albo zdrowy rozsądek albo doświadczenie. Nie chcę na Was wywierać presji więc pozwolę sobie być nieskromny.

wszystkie te kroki można zautomatyzować - ale automatyzowanie czas. a moja doba ma jedynie 24 godziny, tak samo jak Wasze. Więc mam jeszcze dużo tematów na posty.

#programowanie #javascript #frontend #webdev

inb4 czemu nie czysty js: bo wymaga więcej tłumaczenia a tutaj można robić "cargo cult" i używać magicznych formułek do tworzenia interfejsów

permalink do repo: https://github.com/wombatDaiquiri/lajko/tree/v0.0.3

#lajko , html, parsowanie, pierwszy niedoszły cross w historii hejto xD

w tym odcinku opowiem czym odpowiada serwer na tak zwane "zapytanie HTTP" i jak z tego zrobić "czyste dane" w postaci wpisów i komentarzy.

jeśli irytują Was przekleństwa albo nieformalny styl pisania, a chcielibyście mieć taki efekt jak w moim repozytorium, to moglibyście np. zapłacić @letsscrape żeby zrobili to za Was. _chciałem również polecić stronkę i tutoriale tego użytkownika, ale stronka nie istnieje a tutoriale zwracają błąd xD_

Moje przeczucie i doświadczenie podpowiada sformułowanie następującego twierdzenia;

>prawdopodobieństwo odniesienia sukcesu w robieniu czegokolwiek rośnie wykładniczo względem czasu zajmowania się zagadnieniem.

źródło: instytut badań z d⁎⁎y vel moja intuicja ( ͡° ͜ʖ ͡°) "wykładniczość" jest figurą retoryczną a purystom znowu c⁎⁎j w d⁎⁎ę.

długi grafomański wstęp za nami, krótka treść przed nami.

Hejto w odpowiedzi na zapytanie HTTP odpowiada plikiem zapisanym w tak zwanym "HTML". Definicja jest taka, że "HTML" to język ZNACZNIKI które cośtam cośtam, ale c⁎⁎j Was to obchodzi. Zastąpimy to przykładami i chłopskim rozumem, bo obchodzi nas bardzo mały wycinek zagadnienia.

No więc w HTML istnieją wspomniane ZNACZNIKI. I te znaczniki mogą "zawierać" w sobie inne znaczniki. Jak foldery na Twoim komputerze.

Póki co zajmijmy się tekstem który widzimy - znajduje się on niejako "wewnątrz" znacznika który nie zawiera w sobie innych znaczników. Jeśli będziemy w stanie wskazać z którego znacznika chcemy wyciągnąć tekst - możemy zrobić takie rzeczy jak wyciągnięcie autora wpisu albo treści wpisu, a także jego lajków.

Więc brakuje nam jednej zasadniczej umiejętności - wskazywania znaczników. Na całe szczęście ktoś już wcześniej miał ten problem i stworzył "selektory" - tu macie pełną listę na stronce ZS7 w Wałbrzychu. Pozdrawiam Wałbrzych ( ͡° ͜ʖ ͡°) http://zs7.walbrzych.pl/HTML-CSS-JS/css_selektory.html a wyjaśnienie po angielsku na stronie W3Schools https://www.w3schools.com/cssref/css_selectors.php wraz z demem na żywo - https://www.w3schools.com/cssref/trysel.php

Jeśli chcieliście to wszystko zapamiętać, to w mojej ocenie jesteście pie⁎⁎⁎⁎⁎ięci xD

Jak sobie zobaczycie plik `scrape.js` to ja w nim używam tylko kilku tricków i one Wam wystarczą prawie wszędzie;
- wybranie znacznika (np. $('article') albo $('div'))
- użycie metody `each`, która wywołuje funkcję podaną jako argument kolejno na każdym elemencie który został wybrany (takim elementem będą na przykład kolejne znaczniki `article` w przypadku selektora `$('article')`).
- użycie metody `children` która wybiera wszystkie dzieci wybranego elementu
- sprawdzenie z którym elementem mam do czynienia za pomocą instrukcji `if` i pominięcie tych, które mnie nie interesują oraz pobranie zawartości z tych, które mnie interesują
- użycie metody `text` która zwraca tekst znajdujący się wewnątrz wybranego elementu
- użycie selektora `.` która wybiera wszystkie znaczniki mające daną klasę. Czasem w połączeniu z selektorem znacznika, np. `.find('div.parsed.text-sm')` - znalezienie znaczników `div` które mają co najmniej dwie klasy które wybrałem - `parsed` i `text-sm`
- użycie selektora ` ` która wybiera wszystkie które jest wewnątrz - na przykład `.find('div.w-full img')` wskaże wszystkie znaczniki `img` które są wewnątrz znaczników `div` które mają klasę `w-full`.

W tym momencie uważny czytelnik powinien ciągle mieć conajmniej dwa pytania (a przynajmniej te wydają mi się istotne i na nie odpowiem - jeśli masz inne, zapraszam do komentarzy);
- skąd mam wiedzieć jaki selektor wybrać?
- czym do ciężkiej k⁎⁎wy jest klasa?

Łatwe znalezienie selektora wymaga posiadania przeglądarki (w moim przypadku Google Chrome po angielsku - może jakaś dobra dusza napisze co kliknąć w Polskiej wersji - natomiast w każdej przeglądarce istnieje taka funkcja i działa podobnie). Klikamy prawym przyciskiem myszy na element który nas interesuje (np. treść wpisu - obrazek 1) a następnie wybieramy ostatnią opcję (u mnie "Inspect", po Polsku chyba "Zbadaj"?) i szukamy jakiegoś "charakterystycznego wzorca" w nowym okienku które nam się otworzy (obrazek 2 - klasy `.text-sm` i `parsed` - sprawdziłem i wyszło, że faktycznie trafiają tylkow treść wpisu). Zauważanie tych wzorców będzie Ci szło lepiej z czasem. W pliku scrape.js używam około 20 selektorów. Napiszesz takich parserów dziesięć i ciężko Ci będzie takich wzorców nie zauważać.

Na koniec używamy jakiejś biblioteki żeby wykonać akcję "pobierz zawartość selektora". W moim przypadku jest to `cheerio` bo wyskoczyła jako pierwsza jak wpisałem `javascript html parsing` xD (nie wiem czy nie powinienem o tym napisać na początku ale to jest właściwie istotny detal a nie "mięso" artykułu).

>comment.content = $(el).find('div.parsed.text-sm').text();

A wspomniana "klasa" to po prostu tak zwany "artybut" o nazwie "class" - widać to dobrze na obrazku 2. Istotnym jest na zakończenie dodać, że artybuty również możemy pobierać - w ten sposób na przykład zapisuję linki do avatarów pobierając atrybut `src` znacznika `img`;

>comment.avatar = $(el).find('img').first().attr('src');

Chciałbym niebawem pobawić się w sortowanie i wyświetlanie wpisów wymyślając różne algorytmy i sprawdzając czy któryś feed szczególnie mi się podoba. Jednak aby to zrobić potrzebuję sposobu na wyświetlenie wpisów w jakiejś formie graficznej, którą będzie mi wygodnie konsumować. Zajmiemy się więc tworzeniem "prawdziwego frontendu" i poznawaniem jakiejś "biblioteki do widoków".

Nadgorliwym proponuję poczytanie na przykład o vue.js ( https://vuejs.org/ ).

Ambitnym, kompetentnym i pie⁎⁎⁎⁎⁎⁎ętym proponuję poczytanie o innej technologii której nie znają albo która najbardziej do nich przemawia - do wyboru;
- react.js ( https://reactjs.org/ ) - z tego będzie korzystało kolejne pokolenie profesorów na uczelniach jeśli kiedyś wyewoluują poza ręczne pisanie HTMLa xD
- angular.js ( https://angular.io/ ) - ja nie korzystałem bo nie mam tego hasła w moim 'buzzword bingo' technologii o których się rozmawia przy piwie
- tailwind.css ( https://tailwindcss.com/ ) - reklamuje się sloganem “Best practices” don’t actually work. Więc brzmi conajmniej na rzecz wartą uwagi.
- bootstrap ( https://getbootstrap.com/ ) - nie wiem czy dalej się używa bootstrap, ale widziałem kiedyś gościa co używał i szybko robił widoczki, więc pewnie spoko.
- jquery ( https://jquery.com/ ) - kiedyś pisałem całkiem skomplikowaną stronkę używając jquery. Okazało się że wnioski do których doszedłem w bólu zostały już wysnute przez mądrzejszych ludzi i opakowane w `vue` i `react`. Mam nadzieję że pracownicy naukowi są już na tym etapie, ale szczerze mówiąc to nadzieja taka jak na zwycięstwo Polskich piłkarzy ( ͡° ͜ʖ ͡°)

#programowanie #javascript #frontend #webdev #tworczoscwlasna

Jutro prezentacja Svelte 5.
Ma być magicznie.
Nie mogę się doczekać. :))
https://svelte.dev/blog/runes
#programowanie #svelte #sveltekit #frontend #backend #fullstack #webdev

Marzy mi się [browser.storage.sync](Marzy mi się browser.storage.sync , ale dla webu.
Że można przechowywać i synchronizować dane ze strony internetowej, poprzez konto przeglądarki internetowej, które synchronizuje ustawienia i dodatki przeglądarki internetowej.
Można by to też przesunąć do poziomu synchronizacji poprzez konto systemu operacyjnego.

To ma się synchronizować przez usługę synchronizacji od Mozilli na Firefox i od Google na Chrome.
Bez zakładania konta przez usera, a od strony dewelopera, bez zarządzania tym storage, po prostu zapisujesz do asynchronicznego storage, i nie myślisz o tym więcej, backendu nie musisz mieć.

Dla WebExtensions działa. Z założenia byłby to niewielki storage.
#webextensions #webdev #frontend #backend #programowanie

Mirki dawno nie bylem na żadnej rozmowie, jak wygląda rekrutacja na mida react deva? Miał ktoś może ostatnio? Podzieliłby się wrażeniami/pytaniami?

#programowanie #frontend

kiedyś już mieliśmy htmx, nazywało się to wtedy jquery ui #programowanie #frontend

#frontend #react #programowanie #suchar

#nieprogramowanie #html #frontend

Ej, @hejto czemu dodanie > na początku wierszu już nie działa? :disappointed:

To właśnie było fajne w Hejto że Makdown dzłałał z palca.

https://www.markdownguide.org/cheat-sheet

#hejto #frontend #css

Potrzebuję materiały na temat testów jednostkowych do #angular
Polecacie jakieś konkretne materiały i/lub podręczniki?

#programowanie #frontend #programista15k #webdev

Teraz chciałbym abyś się leciutko skupił.
Powiedz mi, czy rozumiesz taką koncepcję.

Ja nadal jestem za koncepcją: jedno okno, wiele kart przeglądarki internetowej.
Jako opcjonalne API do wykorzystania.
Że w ramach jednej domeny(?), zamiast tworzyć kolejnych okien w kolejnych kartach (na zasadzie jedno okno, jedna karta), otwierać tylko "wydmuszkę", pusty element GUI w przeglądarce, którego kliknięcie wywołuje callback w jednym jedynym oknie.
To by działało jak History API, tylko dla kart, że przełączanie między kartami tylko uruchamia callback, zamiast przeładowywać okna do viewport.
Analogia do History API: Z History API, nie ładuje się poprzedniego okna po kliknięciu wstecz, tylko odpala callback który przeładowuje samą treść, w tym samym oknie.

Z koncepcją Jedno Okno, Wiele Kart Przeglądarki Internetowej:
* Można tworzyć efekty przejścia, animacje, podczas przełączania się między kartami tej samej domeny - nawet View Transitions API tego nie potrafi sam z siebie.
* Masz mniej okien otwartych na raz, bo podmienia się tylko kontent w jednym jedynym oknie, a nie całe okno. Zajmuje mniej miejsca.
* Nie potrzeba specjalnej komunikacji między oknami (tej samej domeny), bo komunikacja i synchronizacja jest bezpośrednia i doskonała.
* Idealne pod Single Page Aplication - przełączanie kartami przeglądarki przełącza tylko stan aplikacji, zamiast przełączać między wieloma kopiami aplikacji
* Nowa karta szybciej się otworzy i załaduje, bo doładowuje się tylko niewielki kawałek treści, a nie cała strona.

#webdev #frontend #programowanie #przegladarki #firefox #chrome #edge #opera #safari #w3c #api

Przesadziłem, cooo?

Założenie miało być że wszystko ładnie będzie poukładane.... natura zweryfikowała plany xD #pokazbiurko #frontend vs #backend

AI, zamieniający obrazek na schemat blokowy?

AI, który przetwarza taki obrazek na SVG a lepiej na coś bardziej semantycznego jak mermaid - jest taki?

Np. input taki z obrazka i output kod SVG lub kod mermaid.

I też do zwykłych wzorów jak ten, na jakiś LaTeX - http://autonom.edu.pl/publikacje/mazur_marian/cybernetyka_i_charakter/wzory/wzor5.4.png

#programowanie #frontend #backend #webdev #javascript #devtools

#sztucznainteligencja #ai #artificialintelligence #machinelearning #uczeniemaszynowe #si #chatgpt

#frontend #programowanie #heheszki #humorprogramistow

Powinno się pomyśleć nad rodzajem cookies/storage, które z założenia mogą być synchronizowane między urządzeniami, za pomocą Firefox Sync, konta Google do synchronizacji Chrome.

Bo wiadomo, że nie wszystkie dane z cookies/storage itd. warto synchronizować, ale niektóre by można, np. podstawowe preferencje, zalogowanie.

Tak jak w WebExtensions jest browser.storage.sync:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync

Zaleta, że robisz appke webową, i możesz olać kwestię synchronizacji pewnych danych, i masz to z automatu.

Taki odpowiednik tych usług z Google Play.

Tylko bardziej zdecentralizowane, bo oparte o przeglądarkę.

Może w ramach Project Fugu?

#firefox #chrome #w3c #webdev #frontend #javascript #programowanie

Czego najlepiej użyć do prostej stronki w TypeScript, która ma niemal pusty index.html. Więc vue.js, react itd odpadają.

Kiedyś miałem w npm zrobiony skrypt typu build, który odpalał tsc i jakieś minify. Ale to było pewnie 3 lata temu albo i więcej, więc pewnie można fajniej.

#typescript #frontend #programowanie

https://justjoin.it/offers/wykop-sp-z-o-o-frontend-developer-vue-js - jest dobra robota do wzięcia ; ) #wykop #frontend

Zaczynam pierwszą pracę w #programowanie i trochę się stresuje. Jakieś rady dla nowego w zawodzie?

#typescript #frontend