#javascript

W świecie grafiki komputerowej, szczególnie tej wektorowej, chcemy móc opisać jak najwięcej rzeczy językiem matematyki. Dzięki temu możemy wykonywać różne przekształcenia bez utraty jakości. Tylko o ile oczywiste jest rysowanie odcinków, a co za tym idzie typowych figur geometrycznych

Opowiadając na łamach bloga o reaktywności graficznych interfejsów użytkownika, wyjaśniłem, czym jest wzorzec obserwator i jak go implementujemy. Później do układanki dodałem, że implementacje obserwatora możemy centralizować i podobny mechanizm wykorzystuje się „pod maską” w

Parafrazując znany slogan reklamowy - "jeden obrazek może wyrazić więcej niż tysiąc słów". Dobrze zaprojektowany diagram często stanowi lepsze przedstawienie kodu lub architektury niż obszerny opis, interfejs czy komentarze w kodzie. Jednym z powodów, dla których porzucałem

Cześć!

Dzisiaj jeszcze garść krótkich ciekawostek o #react a później już zaczniemy może coś bardziej technicznego :smiley:

ReactJS: 7 Ciekawostek:

1. Początki w Facebook
2. Pierwsze publiczne przedstawienie
3. To nie jest framework!
4. Virtual DOM – bohater (bardzo) niewidzialny
5. Inspiracja wzięta z XHP
6. React Native - brat bliźniak
7. A w sumie, to dlaczego "React"?

:point_right: Pełny post na https://programystics.com/reactjs/reactjs-7-ciekawostek/

Zostaw piorun, komentarz albo ... cokolwiek 😉

#reactjs #programowanie #javascript #typescript #frontend

#programystic <- tag do obserwowania lub "czarnolisto-wania"

Korzystasz z plików .env w projektach Node.js? Istnieją co najmniej dwa powody, dla których nie warto tego robić!

Pierwszym problemem z plikiem .env jest to... że jest plikiem. Pliki .env często zawierają wrażliwe wartości np. hasła czy sekrety. Istnieje kilka sposobów na omyłkowe upublicznienie tego pliku, takie jak dołączenie go do obrazu dockerowego czy przypadkowy commit do repozytorium. Ponadto, osoba uprawniona do odczytu pliku ma dostęp do wszystkich zmiennych w nim zawartych!

Drugim problemem z plikami .env jest... wbudowane wsparcie dla nich od Node.js 20.6.0. Dotychczas, jednym ze sposobów na pracę z plikami .env była paczka dotenv. Mimo dodania wsparcia w Node prawdopodobnie w wielu projektach ta paczka pozostanie... a jest to błąd! Dalsze wsparcie dla tej paczki, w kontekście ostatnich zmian w Node.js mija się z celem, przez co szansa na naprawianie błędów (w tym błędów bezpieczeństwa) maleje.

#programowanie  #javascript  #nodejs  #bezpieczenstwo  #cybersecurity #cybersecurity #itsecurity

Sprawdź linki, by dowiedzieć się więcej:

- https://dev.to/gregorygaines/stop-using-env-files-now-kp0

- https://nodejs.org/en/blog/release/v20.6.0

W poprzednim artykule pokazałem, jak wygląda podstawowa implementacja wzorca obserwator, a także w jaki sposób z czasem modyfikowano podejście do niego. Jednak trzymaliśmy się schematu, że obserwowaliśmy zawsze jedną konkretną wartość. Popularne są także scentralizowane implementacje

Cześć Wam!

Wracamy do gry, po burzliwym okresie w PL 💪
Ostatnio pastwiliśmy się nad wadami Virutal DOM

Dziś przyszedł czas na jego zalety. Jedną z nich poznaliśmy 2 posty wcześniej, lecz to tylko "liźnięcie" tematu.

Wirtualny DOM, to Świety Graal Frontendu? :sparkles:

:point_right: Więcej na ten temat: https://programystics.com/bez-kategorii/wirtualny-dom-to-swiety-graal-frontendu/

ps jeśli chcesz się podzielić INNYMI doświadczeniami na w/w, to zapraszam do komentowania 🔥

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

Znajomość protokołu HTTP to jedna z najbardziej podstawowych umiejętności programisty. Zarówno na frontendzie, jak i na backendzie, ciężko byłoby obecnie znaleźć aplikację, która nie wykorzystuje protokołu HTTP. W jednym z pierwszych artykułów na swoim blogu uwagę poświeciłem

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

Cześć Wam 👋

Dzisiaj wrzucam ciekawostkę #2 o ReactJs!

>TL;DR: ...zamiast przekształcać całą stronę za każdym razem, kiedy chcemy coś zmienić, dokonujemy tylko niezbędnych zmian.
>
:point_right: Więcej na ten temat https://programystics.com/reactjs/wirtualny-dom-co-to-jest-i-jak-dziala/

Jeśli macie jakieś doświadczenia z Virtual Dom, to podzielcie się. Najlepsze będą te negatywne😊

#react #reactjs #programowanie #javascript #typescript

Cześć! Tak jak obiecałem wrzucam ciekawostkę związaną z #ReactJs!

Jeszcze wspomnę, że posty będą się składać 1-3 zdań. Zdecydowałem się na taką formę, bo te max 3 zdania jest w stanie przeczytać każdy. Dłuższych postów, nie. Dlatego kogo dany temat zainteresuje, może kliknąć w linka po “więcej”. Zaczynamy! Na Pierwszy strzał idzie twórca Reacta.

TL;DR: React został stworzony przez Jordana Walke, programistę z Facebooka, jako narzędzie do ulepszania interfejsów użytkownika na stronach Facebooka i Instagrama.

:point_right: Więcej na ten temat https://programystics.com/reactjs/kto-stworzyl-reactjs/

ps czy taka forma "ciekawostek" się Wam podoba?

#react #programowanie #javascript

Jedną z najważniejszych cech interfejsów użytkownika (UI) jest reagowanie na zdarzenia i odpowiednie na ich podstawie odświeżanie widocznych na nim danych. Wielu młodych adeptów, szczególnie popularnego wśród początkujących front-endu, powie: „używam useState w React i to się dzieje

Cześć Wam! :rocket:
Od dziś chciałbym dzielić się z Wami informacjami o ReactJS - ale! nie tylko technicznymi.

Bardziej bym się skupił na tematach jak:
:heavy_check_mark: skąd się wzięła nazwa React?
:heavy_check_mark: jak wygląda obecny rynek pracy reaktowców?
:heavy_check_mark: ile można zarobić na starcie, a ile jako senior?
:heavy_check_mark: które firmy rozwijają swoje produkty w Reactcie?
:heavy_check_mark: co React ma wspólnego z mobilkami?
:heavy_check_mark: w ogóle dlaczego React?
...i wiele więcej!

Posty będą idealne dla tych, którzy są ciekawi Reacta, ale niekoniecznie są w nim ekspertami.
Czytelniku! Jeśli czujesz, że React przyciąga Cię, ale jeszcze nie podjąłeś decyzji, by się w nim zainteresować na poważnie – te treści są właśnie dla Ciebie.
Chciałbym dać Ci młotek :hammer: abyś stłukł szybę :window:, przez która patrzysz na Reacta i mogł po niego sięgnąć.
Dzięki za przeczytanie tego posta!

~~ programystic
ps komentarze, propozycje zmian, uwagi i wszystko co to jest feedbackiem (to chyba po polsku karmiące-plecy?😉), mile widziane.

#programowanie #react #javascript #reactjs

Wykorzystanie wzorca projektowego Dekorator to prosty sposób by w prosty i schludny sposób rozszerzyć możliwości Twojego kodu. Mnogość zastosowań Dekoratora sprawia, że jest to jeden z moich ulubionych wzorców. W najnowszym wpisie na blogu podzielę się z Tobą założeniami stojącymi za

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

Wzorzec projektowy Mediator, wbrew pozorom, z powodzeniem można zastosować nawet w prostej aplikacji. W najnowszym artykule na blogu przedstawiłem założenia wzorca Mediator, wady i zalety, a co najważniejsze praktyczne przykłady implementacji w TypeScript. #programowanie

async await - nie będę Wam jeszcze wyjaśniał co to jest, ale wyjaśnię jak sobie z tym radzić (chyba)

No więc ten post jest w pewien sposób eksperymentalny - nie mam mianowicie pojęcia, czy to co piszę jest prawdą i nie chce mi się szukać informacji i źródeł na ten temat.

Powód jest prozaiczny - chciałbym sprawdzić tolerancję odbiorców na drobne nieścisłości, oraz czy są wśród nas eksperci, którzy mogliby mnie poprawić. Jeśli będę zawsze chciał potwierdzać u źródeł czy dobrze mi się wydaje, to odcinki nie będą wychodziły codziennie, tylko co miesiąc. Pożyjemy, zobaczymy. Może mam dostatecznie dobrą intuicję, żeby nie wprowadzać Was za często w błąd.

W szczególności - pojęcia "wątków", "procesów", "korutyn", "przerwań", "rdzeni" zostanie w tym poście spłaszczone do abstrakcyjnej koncepcji "procesów wielowątkowych i jednowątkowych". Moje stosowanie zwrotu "wątek" nie ma na myśli pojęcia "thread", a abstrakcyjny "wątek który wykonuje się niezależnie na osi czasu". A purystom c⁎⁎j w d⁎⁎ę.

Zacznijmy od programów "jednowątkowych". Jak mogliście do tej pory zakładać czytając wpis o process.js: https://www.hejto.pl/wpis/tlumacze-jak-lajko-sortuje-posty-zeby-stworzyc-inaczej-posegregowana-liste-to-na_, wątek działa tak, że wykonuje kolejno komendy linijka po linijce. A to `console.log` coś wypisze, a to `let twojstary = 'na⁎⁎⁎⁎ny'` przypisze jakąś wartość do zmiennej. Dzień jak co dzień.

No i wszystko byłoby spoko, tylko w pewnym momencie się okazało, że właściwie to nie za bardzo się da zrobić tak żeby wątek (czyli lista instrukcji) wykonywał się szybciej.

No to wymyślono zamiast tego, że można zrobić kilka wątków i one będą się wykonywały w tym samym czasie. Pomyśl o tym tak - dziewięć kobiet nie urodzi dziecka w miesiąc, ale jeśli każda zajdzie w ciążę to urodzą dziewiątkę dzeci w dziewięć miesięcy. Średnio 1 dziecko/miesiąc. Pointa tego żartu to właśnie wyjaśnienie czym jest programowanie wielowątkowe i co może nam dać oraz jakie ma ograniczenia.

Zamieniając życie na programowanie, zamiast rodzenia dziecka przez kobiety porozmawiamy o wykonywaniu zapytań HTTP. Zapytanie HTTP to to co robi przeglądarka jak wpiszesz `hejto.pl/najnowsze/strona/1`. Ja będę to symulował pisząc `axios.get(...)` - axios to tak zwana biblioteka (ta służy do robienia zapytań HTTP), ale nie potrzebujesz jeszcze szczegółowej wiedzy w tym zakresie.

Z zapytaniami HTTP jest trochę jak z rodzeniem dziecka - czasem długo trwają. Myślę, że zauważył to każdy, kto odwiedza regularnie #hejto.

Więc programując w JavaScript używa się do tworzenia takiego "wątku" funkcji z napisem `async`. Z tego co rozumiem zwraca ona `Promise`. `Promise` będzie się wykonywał niezależnie od tego, co zrobimy w wątku który go stworzył (np. przez wywołanie funkcji). Jeśli w funkcji głównej wywołacie `sleep`, czyli nie robienie niczego na np. 20 sekund, to taki request (czyli ZAPYTANIE HTTP ale po angielsku i widzę że notorycznie wtrącam to słówko i jestem już zmęczony przepisywaniem) pewnie zdąży się wykonać i kolejne funkcje korzystające z odpowiedzi (response) na zapytanie (request) będą działały poprawnie.

Problem z JavaScriptem jest taki, że jeśli funkcja jest zadeklarowana jako `async` to po prostu będzie się wykonywała w tle (osobnym wątku - tzw. asynchronicznie) i trzeba robić specjalne sztuczki, żeby poczekać na jej wynik. No i `axios.get(...)` właśnie taką funkcją jest xD

Na przykładzie - załóżmy że przypiszemy `Promise` zwrócony przy wykonywaniu zapytania to zmiennej `p` (pewnie coś w stylu `let p = axios.get(...)`). Proces wysyłania zapytania i odbierania odpowiedzi odbywa się "w tle". `Promise` (czyli typ zmiennej `p`) pozwala nam na poczekanie na odpowiedź na dwa sposoby;
- napisanie `await p()`, żeby poczekać aż się wykona przed wykonaniem kolejnych instrukcji
- napisanie `p().then()`, żeby zrobić coś po tym jak się wykona

Oprócz `then` można zrobić też `catch`, żeby sobie np. wypisać błąd jak się wydarzy (w przypadku hejto - czasem jest to błąd z "klasy 500" czyli błędów serwera typu wszelakiego. O tym pogadamy za dość długi czas). W przypadku `await` wydaje mi się, że używa się bloków `try { ... } catch { ... }`, natomiast sugeruję po prostu robić tylko `.then(...).catch(...)` podczas "prototypowania".

No i tutaj kolega @VonTrupka słusznie przewidział w jednym z historycznych wpisów, że wybór nodejs był w pewien sposób pójściem na kompromis xD Otóż w wypadku `nodejs` nie można zrobić `await` w głównym wątku, jak początkowo chciałem. Wydawało mi się, że powinno się dać zrobić `let resp = await axios.get(...)`. No ale się nie da. Zajęło mi ze trzy godziny pogodzenie się z wrzuceniem tego co faktycznie chcę żeby się wykonało w ramach tego "skryptu" (czyli małego programu) do funkcji `main` i użycie `main().then(...).catch(...)` w głównym wątku.

Żeby zrozumieć czemu ten cały cyrk ma sens trzeba wiedzieć jak działa nodejs na dość specjalistycznym poziomie. Ja mam swoją teorię spiskową że jest jednowątkowe i tylko "udaje" wielowątkowość. Ale nie wiem czy to prawda, a Ty ani nie musisz tego wiedzieć ani tym bardziej rozumieć o czym mowa.

Moje eksperymenty doprowadziły mnie do przeczucia, że czekanie na to aż funkcja kryjąca się pod `p` typu `Promise` się wykona, to zastosowanie formatu - `p().then(...).catch(...)` - w ten sposób możemy w `then` po prostu przypisać zwracaną wartość do jakiejś zmiennej i udawać że cały program jest jednowątkowy.

Jeśli udało Wam się zrozumieć co się dzieje z mojego opisu - gratuluję. Trochę Wam, trochę sobie, bo wydaje mi się że koncept "rzeczy dziejących się jednocześnie" i czekania na nie żeby nie działy się jednocześnie tylko po kolei nie jest super intuicyjne.

W nagrodę kolejny wpis będzie łatwy - o tym co zwraca hejto i jak wyciągnąłem z tego treść Waszych wpisów.

#lajko <--- mój tag (przesunąłem na pierwsze miejsce i posortowałem resztę w takiej kolejności, w jakiej uważam że trafienie do ich odbiorców jest dla mnie istotne, sorki memorki jeśli kogoś uraziłem)

#programowanie #tworczoscwlasna #gruparatowaniapoziomu #javascript

przyznaję, że post o #lajko powinien być wczoraj, a będzie dzisiaj (w sensie, w czwartek, ale później)

no ale chociaż wrzucę zajawkę czym będziemy się zajmować w nieodległej przyszłości - robieniem "hejto które mamy w domu" czyli używania potężnego frameworka do prostego wyświetlania treści xD jutro o async/await z perspektywy człowieka który nie wie do końca jak działa async/await. ale jakoś tam dałem sobie radę #javascript

tłumaczę jak lajko sortuje posty żeby stworzyć inaczej posegregowaną listę

^ to na górze tak napisałem, bo tzw. slug (sprawdźcie jak wejdziecie w posta to jak wygląda adres w przeglądarce) generuje się na podstawie początku wpisu. Wydaje mi się, że to może być istotne dla SEO, a mnie nie boli. Może zadziała jako darmowy clickbait.

jeśli nie wiesz o co chodzi, albo nie wiesz co to terminal, to tutaj post wprowadzający: https://www.hejto.pl/wpis/programowanie-javascript-tworczoscwlasna-gruparatowaniapoziomu-lajko-lt-moj-tag-?commentId=13977332-7772-4f89-a067-d76784aa5c18

Ale dzisiaj nie o tym - dzisiaj o tym jak to się dzieje, że mamy tablicę postów posortowaną chronologicznie a potem robimy z niej topkę.

Wszystko dzieje się w pliku process.js i do wszystkiego doszedłem googlując, bo na początku prawie nie wiedziałem co się dzieje (poza typowymi koncepcjami z programowania jak `if` albo `for`).

Pierwsza ważna uwaga - to nie jest tak, że napisanie tego kodu to jest to samo co napisanie 62 linijek tekstu. Kod który widzicie, to efekt prawdopodobnie ~8 godzin pracy w sumie na dwa pliki (średnio 4h na plik) i parę miesięcy rozważania różnych projektów i rozwiązań. Ale o pracy z ADHD też innym razem xD

No więc jak już napisałem jak trudno było napisać, to mam nadzieję że było warto i będzie łatwo zrozumieć.

Kawałek po kawałku;
- te linijki z `require` są po to żeby móc używać funkcji które ktoś inny napisał. W moim przypadku potrzebuję jeszcze poza "standardem języka";
- czytania i zapisywania plików (moduł `fs`)
- procesowania argumentów z wiersza poleceń (terminala) (moduł `yargs`).
- Ten drugi moduł to wynika z mojego doświadczenia - teraz mogę sobie wpisać który plik chcę przesortować (`--source=data-snapshots/{czas_w_ktorym_odpaliliscie_scrapejs}.json`) i według jakiego "algorytmu" sortowania ()

Oba znalazłem po prostu googlując 'how to <tutaj to co chciałem zrobić np. parse command line arguments in nodejs>'.

Potem to już było metodą prób i błędów - sprawdzam czy istnieje folder na wyniki, jak nie to tworzę. Sprawdzam komendę, sortuję z pomocą wybranego KOMPARATORA (zaraz o tym) i zapisuję do podfolderu stworzonego dla wybranego algorytmu (funkcja `savePosts`).

No dobra, to teraz o tym czym jest KOMPARATOR. Może słyszeliście kiedyś, że naukę programowania powinno się zacząć od algorytmów sortowania. To prawda. Ale nie dlatego, że są często używane, tylko dlatego że pokazują że jest dużo metod na wykonanie nawet prostej czynności, a w dodatku można je porównywać. A to porównywanie można łatwo obrazować.

Ale to nie studia tylko portal ze śmiesznymi papieżami xD

Na portalach z papieżami oraz w życiu nie pisze się funkcji sortujących, a co najwyżej KOMPARATORY - czyli funkcje które przyjmują dwa argumenty i zwracają informację który z nich jest mniejszy lub większy - czyli w jakiej kolejności względem siebie powinny się znajdować w wynikowej tablicy.

W przypadku JavaScriptu (co też znalazłem w necie xD https://www.w3schools.com/js/js_array_sort.asp sekcja "Numeric Sort") powinniśmy zwrócić liczbę ujemną, zero albo liczbę dodatnią;
- ujemną jeśli obiekt który jest pierwszym argumentem (postA) powinien być w wynikowej tablicy PRZED drugim (postB)
- dodatnią jeśli obiekt który jest pierwszym argumentem (postA) powinien być w wynikowej tablicy ZA drugim (postB)
- zero, jeśli obiekty są równe

Jak mi nie wierzycie to możecie sprawdzić na kartce, ale jest nawet w przykładach na podanej stronie, że jak mamy dwie liczby A i B wynik operacji `A - B` da nam w wynikowej tablicy liczby posortowane rosnąco.

I teraz żeby to było użyteczne dla nas, to napisałem dwie funkcje. Najpierw zobaczmy prostszą - `compareByCommentLikes`. A właściwie `commentLikes`, bo to ta funkcja liczy "wartość posta". Otóż `commentLikes` przechodzi po wszystkich komentarzach i dodaje ich lajki do `likeSum` a gdy przetworzy już wszystkie komentarze, to zwaca `likeSum`.

Na tej podstawie napisałem kolejną funkcję - `compareByLikesTotal`. Co sprytniejsi mogli zauważyć, że rożni się ona jedynie dodaniem do sumy lajków z komentarzy lajków oryginalnego wpisu. Tak więc licząc wartość posta dla tego "filtra" dodam sobie lajki oryginalnego wpisu do wartości posta która jest liczona przez poprzednio opisaną "funkcję wartości" - `commentLikes`.

Z pozostałych sztuczek - jak się napisze `${cos} i reszta tekstu`, to zamiast `${cos}` zostanie wstawiona wartość zmiennej `cos`. Tak więc następujący kod;

let cos = "stary leży"
console.log(`${cos} na⁎⁎⁎⁎ny na wersalce`)

wypisze w konsoli `stary leży na⁎⁎⁎⁎ny na wersalce`. pdk (nie taguję bo ponoć tylko pięć pierwszych tagów działa) - zapraszam do postowania źródłowej piosenki w komentarzach

Co robi `split` to sobie możecie poeksperymentować sami, polecam wypisać (`console.log`) samo `source` i `source.split('/')` i zobaczyć co się dzieje.

O funkcji w której robię przy zapisywaniu `if (err)` porozmawiamy sobie w nieodległej przyszłości - omawiając plik `scrape.js`.

Następny wpis nie jutro, a pojutrze. Powód jest prozaiczny - wyjeżdżam na weekend i pisząc w czwartek piąty post zdałem sobie sprawę, że ważne jest by pisać regularnie (czemu? przekonacie się według nowego rozkładu jazdy już 21.09), a żeby pisać regularnie - to trzeba mieć dostatecznie dużo czasu na pisanie. A jeśli będzie mnie to stresowało, to c⁎⁎j będzie nie seria, bo się wypalę, a Wam się znudzi.

Tak więc pojutrze porozmawiamy sobie o tym jak pisać w języku którego się nie zna - czyli jak urządzić sobie środowisko pracy i dlaczego jeśli jesteś biedny to masz o wiele mniejsze szanse podczas nauki oraz na rynku pracy.

#programowanie #javascript #tworczoscwlasna #gruparatowaniapoziomu #lajko <--- mój tag