treść już pobrana, pora nauczyć się wyświetlać
#lajko #programowanie #tworczoscwlasna #hejto
#lajko
4
obserwujących
20
wpisów
@wombatDaiquiri Idea Ultimate?
@wombatDaiquiri Rumun z Hejto: The Beginning
co to za apka?@wombatDaiquiri
Zaloguj się aby komentować
myślę że to pewien krok milowy w ramach #lajko - mam wygodny workflow do dodawania nowych źródeł i zakończyłem scraper contentu z #hejto (posty + komentarze)
-
IDE, w którym edytuję kod. Ja używam Goland, bo jak zaczynałem pracować to darmowe narzędzia do go były ciągłą walką.
-
test który odpalam, żeby stworzył plik out.html
-
hot-reloadowane out.html (hot reload zapewnia IDE, ale pewnie da się to zrobić jakimś standardowym narzędziem w linuxie xD
-
treść nad parsowaniem której pracuję
teraz muszę jeszcze wymyślić jak dodać referencje między contentem oraz jak zrobić dociąganie danych o autorach. A potem to już masówka - wp, onet, rp, wykop, hejto, wszystko może być źródłem treści
#programowanie #tworczoscwlasna
@wombatDaiquiri - jako, że mam zrobienie takiego scrapera za sobą to możesz wrzucać wszystko w bazę SQL (ja używałem SQLite a później PostgeSQL) i mieć różne tabele gdzie indeksem jest ID posta (to co wygląda jak UUID). Ja mam osobne tabele do wpisów, tagów, komentarzy i potem robię JOIN w zapytaniu SQL po właśnie tym ID.
Zaloguj się aby komentować
jak Boga kocham dwie godziny ostatnie siedziałem i programowałem #lajko słuchając muzyczki
w sumie może jeszcze trochę posiedzę, tylko trzeba jutro rano wstać
na tym polega odpowiedzialność
#programowanie #hejto #tworczoscwlasna
Zaloguj się aby komentować
najbardziej z porannego wstawania to mnie denerwuję że jak obejrzę sobie #hejto i #wykop to do popołudnia nic się tam ani tu nowego nie dzieje a ja odświeżam jak pie⁎⁎⁎⁎⁎ięty z nadzieją że się jednak wydarzy #gownowpis #zalesie #lajko
@wombatDaiquiri i kończy się na tym, że bierzesz się w końcu za uczciwą robotę? ( ͡° ͜ʖ ͡°)
to nie oglądaj wykop
Próbowałeś sam dołożyć coś od siebie do tagów? ( ͠° ͟ʖ ͡°)
Zaloguj się aby komentować
no w sumie parsowanie to nauka HTML, CSS i
JS tylko odwrotnie
-
próba
-
mikrofonu
-
gdybym był człowiekiem wyższej kultury
-
to użyłbym wpisu który już kiedyś wrzucałem
-
#webdev #programowanie #lajko
czy?
@wombatDaiquiri
czy?
tak
nie
ogarnij
sie
eee
Zaloguj się aby komentować
może ktoś z #programowanie #devops ma jakieś doświadczenia z postgres-operatorem od Zalando https://github.com/zalando/postgres-operator/tree/master i mógłby się podzielić wrażeniami?
Use-case: chcę mieć platformę do taniego i szybkiego publikowania swoich aplikacji w internecie. W tym celu tworzę sobie mini-datacenter w domu oparte na kubernetesie, chwilowo składające się z jednego komputera. Dostęp do niego z publicznego internetu robię przez Cloudflare Tunnel https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/
Chcę żeby setup był rozszerzalny i chcę zachować jak najmniejszy stack technologiczny, bo nie lubię się uczyć rzeczy "od zera". Obecnie zastanawiam się jak załatwić temat relacyjnej bazy danych. Myślałem nad postawieniem postgresa bezpośrednio na baremetalu, ale wydaje mi się że networking żeby potencjalnie dopuścić do niego ruch z kolejnych nodów w przyszłości to będzie tragedia.
#technologia #komputery #siecikomputerowe #programista15k #naukaprogramowania #lajko
@wombatDaiquiri - ja Kubernetesa mam po dziurki w pracy, żeby się z nim jeszcze w domu pierdzielić
Oczywiście z tym Postgres Operatorem od Zalando nie miałem do czynienia - ale patrząc po README.md z GitHuba to wygląda dobrze - możesz opisać co dokładnie Cię w tym urzekło do Twoich zastosowań jak masz tylko jedną maszynę?
Ja jako, że jestem minimalistą to używam Podmana i uruchamiam bardziej skomplikowane rzeczy w podach.
Na Malince 5 z 8GB ramu mam teraz właśnie Postgresa bo postawiłem kilka rzeczy i codzienny backup robię na mojego Bieda-NASa rsynciem (który później też rsynciem jest backupowany na większy serwer tak na wszelki wypadek - już kiedyś opisywałem mój setup i dlaczego tak akurat robię) - mi starcza
Generalnie bardziej staram się zrozumieć co Ty tam próbujesz osiągnąć z tym swoim setupem bo cały wysiłek, który w to wkładasz oceniam bardzo pozytywnie - nie każdemu się chce i nie każdy potrafi - zwłaszcza jeśli to co robisz ma Ci się przydać w pracy i by zarabiać lepszą kasę
@koszotorobur próbuję się wyzbyć metody szukania "poprawnego rozwiązania" więc bardzo dziękuję Ci za Twojego posta.
Generalnie chciałem postawić jakoś instancję bazy danych żebym mógł z niej korzystać w kontenerkach. A dzięki Twojej sugestii zmieniłem trochę zapytanie do google i dostałem tutorial na prostszych komponentach które już z nam więc plan właśnie uległ zmianie https://www.digitalocean.com/community/tutorials/how-to-deploy-postgres-to-kubernetes-cluster
Wysokopoziomowo - jestem programistą. Jestem nieskromnie mówiąc niezły w pisanie programów. Ale całe środowisko w którym te programy były uruchamiane były własnością firmy w której pracowałem. W ten sposób zawsze uczyłem się procedur które ktoś mi przygotował, ale na własne potrzeby nadal korzystałem z `./binarka &` bo w sumie działa.
No i z wiekiem odczuwam potrzebę podzielenia się wiedzą jak tworzyć cyfrowe produkty, ale do tego potrzebuję środowiska uruchomieniowego które uczeń będzie mógł zreplikować i rozszerzać według własnych potrzeb. A i mi się przyda wyrobić opinię i usystematyzować stack bo często ciekawe pomysły upadają jak staję przed wizją pierdół do wykonania zanim się zaczną ciekawe zadania.
Zaloguj się aby komentować
najnowszy post o Chain of Responsibility od @elszczepano zainspirował mnie do napisania recenzji;
TL;DR: chain of responsibility masz jak wykonujesz po sobie rzeczy, np.
1. Zapisz do logów
2. Wyślij metryki
3. Zwróć HTML ze zdjęciem papieża
Bardzo chciałem, żeby moja krytyka była merytoryczna, więc wpisałem dokładnie ten prompt w Chat GPT z prośbą o napisanie przykładu w express.js (ryc. 1)
const express = require('express');
const app = express();
// Middleware 1: Zapisz do logów
app.use((req, res, next) => {
console.log(`Received a request at ${req.url}`);
next(); // Przejście do następnego middleware
});
// Middleware 2: Wyślij metryki
app.use((req, res, next) => {
// Kod wysyłający metryki (przykładowo)
console.log(`Sending metrics for ${req.url}`);
next(); // Przejście do następnego middleware
});
// Middleware 3: Zwróć HTML ze zdjęciem papieża
app.use((req, res) => {
res.send('<html><body><h1>Strona z zdjęciem papieża</h1><img src="url\_do\_zdjecia\_papieża.jpg" alt="Papież"></body></html>');
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
na koniec chatGPT wyjaśnia nam co zrobił:
W tym kodzie każda funkcja middleware wywołuje next() po wykonaniu swojego zadania, co pozwala na przekazanie kontroli do następnego middleware w łańcuchu. Ostatni middleware nie wywołuje next(), ponieważ kończy proces obsługi żądania, wysyłając odpowiedź HTML.
pytanie: jaki jest sens pisać ten artykuł, zamiast napisać samo tl;dr? Mam nadzieję, że autor nie odbierze mojej recenzji osobiście. Ja nie mam motywacji napisać czegoś "od zera" dlatego póki co komentuję odważniejszych. pozdrawiam
#programowanie #pytanie #naukaprogramowania #lajko <- mój tag o programowaniu
Rozumiem Twój punkt widzenia. Pisząc artykuły na bloga nigdy nie zakładałem, że muszą być unikalne i oryginalne (ale mogą, co niekiedy mi się udaje). Zdaję sobie sprawę że sporo contentu z bloga opisane w wielu innych miejscach (w tym w książce, na której się wzorowałem w recenzowanym wpisie) oraz że mogę uzyskać podobny efekt korzystając z Chatu GPT. Patrząc na możliwości LLM-ów, to równie dobrze bloga mógłbym nie prowadzić wcale.
Pisząc ten konkretny artykuł spełniam swój cel opisania wszystkich znanych mi wzorców projektowych na łamach bloga. Co do samej formy, to czy dało się to napisać krócej to się nie wypowiem. Artykuły staram się pisać bez zbędnego wodolejstwa i w prosty sposób jednak z kompletnym wyczerpaniem tematu. To czy mi to wychodzi czy nie pozostawiam do oceny czytelnikom.
Kończąc ten przydługi wywód, dzięki za feedback
@elszczepano oki, trzymam kciuki, mam nadzieję że się nie obrazisz za formę osobnego wpisu zamiast komentarza, ale miałem nadzieję więcej osób sprowokować do rozmowy, pozdrawiam xd
@wombatDaiquiri nie obrażę, spokojna głowa. Merytoryczny, fajny thread więc nie ma się o co obrażać
Zaloguj się aby komentować
najgorsze co możecie dla siebie zrobić to być przekonanym że istnieje "poprawne cokolwiek". poprawny stack, poprawny kod, poprawne testy, poprawne CI.
zrób minimum które zalicza kryteria akceptacyjne (być może ustalone przez Ciebie na podstawie widzimisię). gratulacje, właśnie zostałeś najlepszym programistą w swojej firmie.
zdobyłeś informacje które chciałeś przy pomocy skryptu w pythonie który chodził na Twoim domowym kompie przez co dostałeś opierdol od matki/żony jak przyszedł rachunek? trudno, taka jest cena rozwoju.
team lead wyśmiał cię na standupie że zadajesz głupie pytanie? prawdopodobnie prześcigniesz go w rozwoju kariery w 3 lata.
random w internecie się przyjebał że mogłeś coś zrobić "lepiej"?
xD
#programowanie #lajko #patoprogramowanie
@wombatDaiquiri Zawsze mam jedno wielkie xD w sercu gdy grono nerdów całymi dniami spuszcza się nad jakąś pierdołą która nic nie znaczy.
Musimy napisać serwis który przyjmie jsona, wykona proste obliczenia i przepchnie je dalej? Zaplanujmy tygodnie spotkań żeby obgadać technologie i pokłócimy się tysiąc razy o zastosowane frameworki i clean code! Tymczasem robotę może załatwić w dwa dni team złożony z ogarniętego deva, architekta i testera. Cóż - korpo generuje mnóstwo zbędnej pracy i nam jako najniżej położonym mróweczkom w tej drabinie pozostaje jedynie cieszyć się, że jest co robić xD Nie ma co przejmować się zbytnio tą całą otoczką wokół wytwarzania oprogramowania.
@lipa13 Nie zapomnij o 15 spotkaniach dotyczących flow na jirze i tysiącach wiadomości od PMa że nie wypisałeś ile zajął Ci task w rubryke
@wombatDaiquiri nawet jak kod robi co ma robić, to miejmy jakieś minimalne standardy. Kod tak ch⁎⁎⁎wy że nie da sie w nim zrobić zmian, może być utrapieniem nawet jak robi co ma robić.
@redve
miejmy jakieś minimalne standardy
A jak mam stwierdzić, czy mój kod spełnia "minimalne standardy" czy nie? Masz jakąś listę minimalnych wymagań?
Na 99% gdybym robił Ci code review Twojego najładniejszego kodu to średnio zostawiałbym komentarz co 10 linijek. Ale to nie powinno Cię powstrzymać przed wysłaniem mi kodu do review ani przed wrzuceniem go na produkcję jeśli pracujesz sam.
@wombatDaiquiri
Na 99% gdybym robił Ci code review Twojego najładniejszego kodu to średnio zostawiałbym komentarz co 10 linijek.
Zesrałbyś się, już bez przesady... Miałem raz leada który przypierdalał się dosłownie do wszystkiego a i tak w przypadku dobrego kodu ciężko było mu wysupłać choćby 2-3 komentarze
Oczywiście że są minimalne standardy, typu niepisanie spaghetti code, odpowiednie nazewnictwo, rozpisywanie kobył na mniejsze elementy funkcyjne i tak dalej
Ty chyba w ogole nie programujesz co?xd
> zrób minimum które zalicza kryteria akceptacyjne
Właśnie dlatego dzisiejsze oprogramowanie zjada tak dużo ramu i cpu. Po prostu wydajność była wystarczająca i nikt nie zgłosi problemu jeśli nowa wersja będzie zużywała 10% więcej zasobów. A jak użytkownikowi soft się przycina to zawsze może kupić nowy komputer.
#przemysleniazdupy
@Ilirian totalnie tak. Jak potrzebujesz lepszej wydajności, to zmień kryteria akceptacji. A jak nie potrzebujesz, to po co poświęcać na to czas?
@wombatDaiquiri Nie lubię takiego podejścia przy tworzeniu oprogramowania. Niestety nawet wielkie korpa jak microsoft stosują podejście "ma działać, nieważne jak". Traci na tym końcowy użytkownik. No ale ciężko przekroczyć próg bólu gdy oprogramowanie staje się niemożliwe do użytkowania.
Zaloguj się aby komentować
I cyk 1.5h wyjebane do kosza, jutro zabawa z konfigurowaniem serwera od nowa. Jak ja nienawidzę #ops z #devops. Ale tak to już jest, że moja pasja #programowanie i projekt #lajko stanęły na długo przez właśnie perspektywę kilku dni kręcenia się w kółko xD
Żeby wpis miał wartość merytoryczną, to tutaj link do tutoriala za którym podążam: https://github.com/ehlesp/smallab-k8s-pve-guide/blob/main/G000%20-%20Table%20Of%20Contents.md
@wombatDaiquiri Ciekawa ścieżka zdrowia, może się pobawię.
@wombatDaiquiri Fajne repo
@potato_fairy ano, miałem pisać swój tutorial, ale po co skoro znalazłem lepszy xD
wygląda na wypasiony tutorial
@tmg jeśli mi się uda, to zrecenzuję. Jeśli mi się nie uda, to zrecenzuję szybciej xD
Zaloguj się aby komentować
Znacie kurs pisania technicznego (tzn. Opisywania kodu, tworzenia dokumentacji, robienie design doców i generalnie "pisanie dla ludzi a nie kompilatora) od #google ? https://developers.google.com/tech-writing
Polecacie/polecilibyście juniorom, czy jest to zbyt "efemeryczne" i "miękkie" i wymaga kontekstu bycia starym? #programowanie #lajko
Zaloguj się aby komentować
Something is no yes sometimes
@wombatDaiquiri ty mi poka <stroke> albo <underline> bo z obecnym mikroedytorkiem to jest chói większy jak trąba słonia
żeby tu chociaż markdown działał w minimalnym zakresie <_<
@VonTrupka w requeście leci markdown normalnie, więc poeksperymentuję i dam znać na tagu
@wombatDaiquiri wołaj koniecznie!
mi się już nie chce testować na produkcji
Zaloguj się aby komentować
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
>
>
>
>
>
>
>
>
>
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
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
3.2. `nodejs process.js --cmd=comment_likes_sum --source=data-snapshots/2023-09-21T23
4. wskazać w pliku ./gianni/src/App.vue skąd pobrać posty ( `import posts from '../../data-processed/cls/2023-09-21T23
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
Zaloguj się aby komentować
#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
@wombatDaiquiri - dzięki za wpis!
Ja w Pythonie polecam Beautiful Soup.
A do robienia stron SvelteKit.
@koszotorobur
A do robienia stron SvelteKit.
Cały czas się zastanawiam - co by mi dało korzystanie z innego frameworka/silnika czy co to jest? Na potrzeby lajko wystarczyłoby jQuery ale to myślę że jest za stare.
@wombatDaiquiri - spróbować nie zaszkodzi raczej?
Ja myślałem, że to jakaś kupa jest jak pojawiło się po raz pierwszy w Stack Overflow survey - ale po sprawdzeniu dla mnie okazało się strzałem w dziesiątkę
@wombatDaiquiri
- 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
Ale z Ciebie optymista. Na wielu uczelniach do dzisiaj na kolokwiach masz pisać kod na kartce xDDD
@moderacja_sie_nie_myje no rozumiem ale jakieś swoje stronki chyba prowadzący generalnie mają? Czy to tylko warszawka?
ok przepraszam , że przeszkadzam czcigodnym twórcom ale ten obrazek ma jakieś znaczenie ?
@bimberman obrazki pokazują jak znaleźć selektor css na prawdziwej stronie takiej jak hejto, o to pytasz?
@wombatDaiquiri nie bardzo zrozumiełam 404 do tego kontextu
Zaloguj się aby komentować
kurde miałem robić #lajko jako silnik rekomendacji dla #hejto a tu widzę że bardziej by się przydał stabilny mirror #programowanie #networking #siecikomputerowe
@wombatDaiquiri znakomity pomysł, już trzymam kciuki żeby się udało (☞ ﾟ ∀ ﾟ)☞
Zaloguj się aby komentować
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 twoj_stary = '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
@wombatDaiquiri panie, praktyka tak, ale w parze z rownolegla nauka. Inaczej bedziesz uskutecznial cargo cult programming czyli nigdy nie zrozumiesz jak dziala kod i czego sie spodziewac.
w wypadku `nodejs` nie można zrobić `await` w głównym wątku, jak początkowo chciałem
oczywiscie ze mozna. Od node v15+ jest to mozliwe LINK
Kolejna rzecz to jednowatkowosc node.js. Wszyscy tak pisza a prawda jest taka ze node.js od samego poczatku jest wielowatkowy out of the box. wszelkie operacje i/o (operacje sieciowe, czytanie dysku, itp) przetwarzane sa w osobnym watku (czy tam procesie).
Przykladowo:
console log('xxxxx');
const data = axios.get(....); <- node.js wlasnie tworzy nowy watek i kiedy zakonczy pobieranie danych zwroci wartosc. Wykonywanie kodu leci dalej i nie czeka na axios
const xx = 'ala ma kota' <- kod wykonywany w glownym watku rownoczesniej z pracujacym axiosem w innym watku
logger('wiadomosc'');
console.log( await data); <--- glowny watek wroci tutaj do wykonywania kodu w momencie kiedy watek obslugujacy polaczenie sieciowe zwroci dane
Do ksiazek a nie "zobaczymy co sie stanie"!
@666 node działa na jednym wątku.
```const xx = 'ala ma kota' <- kod wykonywany w glownym watku rownoczesniej z pracujacym axiosem w innym watku```
nie wykonuje się równocześnie, a później (tylko że, wbrew temu co myśli dużo ludzi, obecne wersje node są bardzo szybkie) , a raczej wtedy, kiedy nadejdzie jego kolej wyznaczona przez event loop. Synchroniczny kod ma pierwszenstwo, po wykonaniu całego zakolejkowanego synchronicznego kodu, watek jest zwalniany i asynchroniczne funkcje mogą się wykonać.
Jeśli chcesz "prawdziwą" wielowątkowość, to masz od tego Worker Threads.
@666
Inaczej bedziesz uskutecznial cargo cult programming
No i zajebiście ( ͡o ͜ʖ ͡o) możesz mnie przepytać ze specyfikacji Golanga na wyrywki xD to jest projekt po godzinach, bez napinki, żeby pokazać ludziom że programowanie jest w sumie proste jak chcesz tylko "coś uzyskać". Nie zamierzam się kreować na eksperta jsa, to mój pierwszy projekt od czasów jQuery xD
Do tematu: "change file extension to mjs" sorry, ale podziękuję za takie odczarowanie. Z artykułu brzmi jak syntactic sugar.
No w końcu coś o JavaScript, jedynym słusznym (i potrzebnym ludzkości) języku programowania.
Panowie, proszę wincyj takich dyskusji.
@rakokuc xd wypierdolę to tak szybko jak tylko będę mógł. język dla leniwych ludzi super.
@rakokuc @wombatDaiquiri ja przyjmę po stufce od obydwu stron i możecie rzucać w siebie ciętymi ripostami [̲̅$̲̅(̲̅ ͡° ͜ʖ ͡°̲̅)̲̅$̲̅]
ja tylko będę wystawiał noty końcowe za styl i polot (⌒ ͜ʖ⌒)
@wombatDaiquiri należałoby jeszcze dorzucić do tego, że część się wykonuje na wątkach react, część jest oddelegowana do przeglądarki.
@Flaaj, @666, poprawcie mnie, proszę.
```
console.log(0);
const defferred = async function timeouted2() { await new Promise(resolve => setTimeout(() => { console.log(1); resolve(); }, 5)); };
setTimeout(() => {console.log(2);}, 5);
new Promise(resolve => setTimeout(() => { console.log(3); resolve(); }, 5)).then(() => console.log(4));
defferred().then(() => {setTimeout(() => {console.log(6); }, 5);});
setTimeout(function timeouted() { console.log(7) }, 5);
console.log(8);
```
@Meverth
należałoby
Nie przesadzajmy ( ͡° ͜ʖ ͡°)
część jest oddelegowana do przeglądarki
Ale w jaki sposób to się dzieje jak ja to odpalam przez nodejs z terminala? AFAIK to nie odpala headless chrome w tle? Coś tu chyba zmyślasz.
@wombatDaiquiri idzie przez API przeglądarki. Nie wiem, czy wiesz, ale JS jest wykonywany w przeglądarce
Nie wiem, czy zmyślam, takie tłumaczenie dostałem na rekrutacji. Bezmyślnie powtarzam, szukam potwierdzenia u mądrzejszych, którzy mają z JS do czynienia na co dzień.
Zaloguj się aby komentować
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
Zaloguj się aby komentować
zanim powstało lajko - WebStorm ratuje mi życie, a copilot mnie wkurwia, czyli jak wytwarzać oprogramowanie w skończonym czasie
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
jeśli wyobrażacie sobie, że odpaliłem notatnik i piszę sobie różne magiczne komendy z pamięci, no to grubo się mylicie. Oczywiście, pamiętam że istnieje kilka podstawowych "klocków" - moduły, funkcje, zmienne, `if`, `for`, `let` i `const` do zmiennych i kilka innych jak nawiasy klamrowe.
Ale co do zasady, ani ja ani żaden inny programista którego znam nie pamięta "wszystkiego". Po ponad pięciu latach pewnie pamiętam dużo z biblioteki standardowej Go w którym przez ten czas pisałem, ale w innych językach - nie.
Z drugiej strony - przerywanie pisania żeby googlować, bo nie pamiętam jaka jest sygnatura każdej metody też jest bez sensu. Zajmuje to bardzo dużo czasu, i wybija mnie z twórczego rytmu.
Ponieważ najwyraźniej nie tylko ja mam słabą pamięć i nie tylko mnie to irytowało, powstały programy które nazywają się IDE. To taki notatnik, tylko oprócz "zapisz" i "wczytaj" mają dużo więcej opcji;
- informacja czy funkcja istnieje czy nie istnieje
- podpowiedzi jakie argumenty ma funkcja którą wywołuję
- podpowiedzi w którym miejscu zapomniałem nawiasu zamykającego albo otwierającego
- przeglądanie plików
- podłączanie debugera (o tym kiedy indziej)
- odpalanie programu
- zmiana nazwy obiektu w wielu plikach
- UI (interfejs graficzny zamiast terminala) do przeglądania bazy danych
i pizdylion innych. Każde IDE wspiera też tak zwane "pluginy" - czyli rozszerzenia, pisane przez indywidualnych twórców albo firmy. A jak firma chce zarabiać, to musi mieć klientów. A jak klient używa IDE, to łatwiej mu sprzedać produkt jak można go wpiąć w środowisko w którym już pracuje.
Przykładem takiego pluginu jest copilot. Ale za nim o copilocie, to linki do dwóch IDE;
- WebStorm - https://www.jetbrains.com/webstorm/ IDE z którego ja korzystam. Płatne. Ciężko mi powiedzieć w sumie, dlaczego za nie płacę. Prawdopodobnie dlatego, że korzystałem z niego w pierwszej firmie i nigdy nie chciało mi się uczyć gdzie co jest w darmowych.
- Visual Studio Code - https://code.visualstudio.com/ IDE które jest darmowe i z tego co mi wiadomo posiada takie same funkcje jak WebStorm (tzn. IDE od JetBrains) - polecam jeśli dopiero się uczysz. Jeśli zaczniesz z vscode, to potem oszczędzisz pieniądze na subskrypcjach, a jeśli nie widać różnicy - to po co przepłacać?
I teraz temat który w tym roku eksplodował - GitHub Copilot. Copilot to narzędzie, które podpowiada "co prawdopodobnie chcesz napisać dalej". No i w zależności od tego jak go używacie - może być błogosławieństwem lub przekleństwem.
Na przykładzie - jeśli napisałem już funkcję `savePosts`, ale z jakiegoś powodu chciałbym zapisywać posty pojedynczo, to wystarczy że zacznę pisać `function saveSinglePost` - copilot zasgeruje właściwie dokładnie to co sam bym zrobił (obrazek pierwszy).
Dzięki temu mogę znacząco skrócić swój czas pracy nad kodem, bo zamiast zastanawiać się nad pierdołami, korzystam z "domyślania się copilota". W tym momencie wystarczy, że "zatwierdzę sugestię" klikając "tab" i nie muszę się męczyć w myślenie gdzie subtelnie zmienić kod żeby uzyskać efekt.
Istnieje jednak druga, dużo bardziej mroczna strona copilota. I poza oczywistym (czyli sugerowaniem totalnych głupot w kodzie) chciałbym zwrócić uwagę na dwa mniej oczywiste problemy;
Problem pierwszy - w przypadku pisania tekstu (np. takiego jak ten) copilot generuje bardzo rozpraszające podpowiedzi, które nie mają sensu. Przykład - w następnym zdaniu napiszę tylko pierwsze słowo, a reszta zdania będzie dokończona przez copilota. Dowód na drugim obrazku. W tym przypadku copilot sugeruje mi, że "nie ma sensu" pisać o tym, że copilot sugeruje mi co mam napisać. No i ma rację, ale to nie jest to o czym chciałem napisać.
Problem drugi - komentarze funkcji. Copilot pisze totalne oczywistości, ponieważ nie jest w stanie zrozumieć czym są "informacje które mogą ciekawić potencjalnego odbiorcę". Ponieważ nie ma świadomości - nie wie, że istnieje jakikolwiek "odbiorca".
Jeśli chcecie natomiast zaimponować swoim kolegom programistom, to możecie dorzucić informację że copilot nie sugeruje usuwania tekstu, oraz nie sugeruje zmiany tekstu - a jak wszyscy wiemy ( ͡° ͜ʖ ͡°) w programowaniu nie chodzi tylko o to kto napisze więcej tekstu, ale też o zrozumienie kodu który zastaniemy i wprowadzanie zmian w kodzie w przyszłości, w sposób który nie ro⁎⁎⁎⁎⁎doli całego systemu.
Lennyface został zaproponowany prez copilot. Także może bywa wkurwiający, ale przynajmniej memiczny.
#programowanie #ai #tworczoscwlasna #gruparatowaniapoziomu #lajko <--- mój tag
Zaloguj się aby komentować
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
ok i co to ostatecznie robi ? jak to ulepsza stronę ?
@bimberman nijak. Jak przeczytasz pierwszy post, to tam wyjaśniam że chcę sobie stworzyć nowe "gorące" i poprawić kilka innych rzeczy które mi się na tym portalu nie podobają. No i opisuję to w formie takich artykułów "nauka programowania". Kod z mojego repozytorium ( https://github.com/wombatDaiquiri/lajko ) możesz sobie pobrać i odpalić na kompie. Z czasem mam nadzieję dodawać ciekawsze funkcje.
@wombatDaiquiri dzięki za odpowiedź, chodziło mi raczej o wypunktowaną listę co byś chciał poprawić /zmienić ? a co uważasz za zbędne ? w obecnej wersji ?
Zaloguj się aby komentować
#programowanie #javascript #tworczoscwlasna #gruparatowaniapoziomu #lajko <--- mój tag
no siema.
lubię społeczność @hejto , ale strasznie mnie irytuje brak różnych funkcji albo działanie inne niż to którego bym chciał. Narzekałem, tagowałem, nic z tego nie wyszło. Tak więc przedstawiam Wam alternatywę-WIP-chyba-że-mi-się-znudzi-#opensource i pierwszy merytoryczny wpis w serii.
Repozytorium: https://github.com/wombatDaiquiri/lajko
Permalink do commita o którym piszę: https://github.com/wombatDaiquiri/lajko/tree/v0.0.2
Nie ma nawet README, ale nie od razu Rzym zbudowano. Ma za to dwa pliki które napisałem ja i cztery których nie napisałem (kto ma wiedzieć ten wie #pdk kto nie wie ten widocznie jeszcze nie potrzebuje).
Kod jest napisany w JavaScript. To taki język którego kiedyś się używało żeby robić fajne przejścia między obrazkami w przeglądarce. Teraz dostępny też w formie języka programowania z silnikiem który po prostu wykonuje kod na kompie jak np. Pythona albo C++ (nie do końca, ale to nie praca naukowa tylko edutainment)
Żeby sobie odpalić te programy, to musicie np. zainstalować NodeJS: https://nodejs.org/en/download następnie ściągnąć repozytorium z linka (można kliknąć przycisk <> Code i wybrać Download ZIP a potem rozpakować, jak nie macie gita)
no i teraz możecie poczuć się jak hacker - odpalić terminal. Może być windowsowy (wpiszcie `cmd` w wyszukaj i uruchom czy coś takiego). Poniżej szybki tutorial "chodzenia po systemie plików". W sensie klikania w foldery w formie tekstowej.
-
`ls` pokazuje pliki w folderze w którym jesteś
-
`cd <nazwa_folderu>` przechodzi do folderu o nazwie `<nazwa_folderu>` który MUSI się znajdować w folderze w którym jesteś (czyli pokazywać się w komendzie `ls`) - ten krok będziemy nazywać KROKIEM W DÓŁ
-
, `cd ../` przechodzi do "folderu który zawiera folder w którym jesteś" - taki "KROK DO GÓRY" - czyli przeciwieństwo kroku w dół
-
a jak się zamotasz albo sprawdzasz jak działają komendy to `pwd` pokaże tak zwaną "ścieżkę" - trudniej mi będzie wyjaśnić niż Tobie sprawdzić i skumać eksperymentując
no i jak będziecie w folderze z kodem, to najpierw musicie napisać `npm install` żeby pobrać tak zwane ZALEŻNOŚCI, a potem to możecie sobie np. odpalić zaciągnięcie pierwszej strony "najnowszych" i zapisanie jej jako JSON (jak nie wiesz co to to wygoogluj) kopiując, wklejając do terminala i wciskając enter;
nodejs scrape.js
stworzy Wam się wtedy plik `data-snapshots/{czas_w_ktorym_odpaliliscie_scrapejs}.json` a w środku będzie TABLICA zawierająca OBIEKTY - jak sprawdzicie co to JSON i otworzycie taki plik to myślę że intuicyjnie skumacie co to tablice i obiekty.
no ale taki plik to jest w sumie do d⁎⁎y, bo to to samo co hejto.
tutaj wkracza drugi plik - `process.js`. Odpalić go można następująco;
opcja pierwsza - sortowanie po sumie lajków komentarzy (nie patrząc na lajki samego wpisu)
nodejs process.js --cmd=comment_likes_sum --source=data-snapshots/{czas_w_ktorym_odpaliliscie_scrapejs}.json
opcja druga - tak samo, tylko z komendą `likes_total` zamiast `comment_likes_sum` da Wam wpisy posortowane po sumie lajków posta i komentarzy.
liczę, że foldery znajdziecie sami.
UWAGA! z łaski swojej nie napierdalajcie za często `scrape.js` - po to zapisuje wpisy, żeby nie zepsuć hejto. nie spierdolcie tego. do adminów @hejto - myślę że filtrowanie useragent wystarczy żeby największy plankton zablokować.
A na jutro postaram się przygotować wpis jak sobie napisać taki scraper samemu, chociaż starałem się żeby kod był łatwy do czytania. Sam praktycznie nie znam JavaScriptu, więc nie będę używał żadnych mega magicznych narzędzi i skomplikowanych konstrukcji językowych.
jeśli coś Wam nie działa, to zapraszam do komentowania też. z fartem wariaty.
kurde zapomniałem zapisywać linka do posta xD grupa obniżania poziomu.
nie mniej gratuluję @adam_photolive @Cris80 i @smierdakow za posty pod którymi komentarze były najbardziej plusowane, oraz @adam_photolive @Cris80 i @smierdakow za posty które razem z komentarzami zgromadziły najwięcej lajków do spółki z komentarzami.
a sobie gratuluję dobrania fantastycznych metryk na start. mam nadzieję że w przyszłości efekty będą bardziej spektakularne
@wombatDaiquiri
Jak można Ci postawić kawę?
@Yossarian absolutnie nie trzeba, w przyszłości jeśli mi starczy cierpliwości to zrobię swoją bramkę płatności w ramach tej serii. Ale bardzo dziękuję za wyrazy uznania.
@wombatDaiquiri ale żeby nodejs? (☉__☉”)
@VonTrupka ostatnio kupiłem NAS i 2x1TB dysk. Potrzebuję motywacji żeby go skonfigurować.
A tak serio, w pythonie nie rozumiem envów i nie chce mi się ich chwilowo poznawać. W go będziemy pisać trochę później, bo na tym etapie nie ma sensu się bawić w statyczne typowanie. No i będę chciał zrobić UI, to gdyby ktoś chciał się uczyć programowania na podstawie moich postów, to nie będzie musiał się uczyć ośmiu języków na raz.
Dorzucam do listy "tematów do poruszenia". A obrazek klasyk
>ostatnio kupiłem NAS i 2x1TB dysk. Potrzebuję motywacji żeby go skonfigurować.
@wombatDaiquiri na mocy danej mi słowem honoru motywuję cię do konfiguracji NASa ku lepszemu życiu, łatwiejszym taskom i bezpieczeństwu danych.
Idźcie zatem i ... jedzcie vontrupke s cebulko ( ͡~ ͜ʖ ͡°)
Ja to cokolwiek opartego na nodejs mógłbym dopiero od niedawna odpalić, czego nie zrobiłbym na talerzowcu 5400.
Niemniej jednak idea całego nodejs jest dla mnie tak samo niepojęta, jak prawa fizyki zachodzące w czarnych dziurach (´･‸･ ` )
@wombatDaiquiri z czystej ciekawosci zajrzalem w kod, bo sam temat scrapowania mnie nie interesuje. Robisz .catch na main
main().
then(() => console.log('posts length in main promise:' + posts.length)).
catch(err => console.log(err));
ale to nic ci nie da jak wysypie sie w funkcji savePosts bo ona uzywa callbackow - nie zlapiesz bledu.
@666 ok, a co powinienem zrobić zamiast tego? Ten catch to jest głównie na 500 z hejto. A tematyka z czasem będzie się zmieniała - ale gdzieś trzeba zacząć. Dzięki a komentarz!
@wombatDaiquiri Wiadomka ze jakos trzeba zaczac a potem iteracyjnie rozwijac i ulepszac. Kip goin
Fix: jesli to jakas w miare nowa wersja node.js, tak 14+ to uzyj https://nodejs.org/docs/latest-v14.x/api/fs.html#fs_promises_api
Czyli troche inaczej robisz require/import ("fs" -> "fs/promises"), a potem zamiast callbacka dajesz
await fs.jakasfunkcja()
Dodaj testy w Jest to takie problemy mozna latwo wykryc
Zaloguj się aby komentować
ciekawostka - hejto ma tylko 50 stron "najnowszych" - https://www.hejto.pl/najnowsze/strona/50 jak zwiększycie numerek, to będzie wyświetlało stronę 50. To oznacza, że aby zescrapować posty i zrobić z nich customowy feed, muszę je zbierać na żywo co ~2 dni. Inne opcje brzmią dużo bardziej skomplikowanie.
wiadomość najgorsza - nie widzę opcji na zbieranie danych historycznych (szczęśliwie mogę zbierać 'od dzisiaj do nieskończoności' - czyli te dane za jakiś czas mogę mieć i mogę obrabiać)
wiadomość zła - nie mam pojęcia co się dzieje w requestach, zakładam że jakaś frameworkowa magia. tak czy siak, dostęp do api nie wygląda friendly
wiadomość dobra - mogę pobrać po prostu https://www.hejto.pl/najnowsze/strona/50 i zparsować xD
kolejna wiadomość dobra - strona 50 była dwa dni temu, więc nie muszę za bardzo bombardować api xD
#lajko <--- moje próby stworzenia sobie newsfeedu, który nie będzie mnie wkurwiał. postaram się tagować.
#programowanie #starozytniprogramisci #hejto
@wombatDaiquiri co jest głównym założeniem?
własne "gorące"?
@VonTrupka własne gorące to plan na PoC. Zobaczymy czy uda mi się je dowieźć i czy którąś z bardziej przyszłościowych myśli będę chciał realizować
Zaloguj się aby komentować