Hejto.pl

#javascript

16
104

#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

@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.

@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!

Zaloguj się aby komentować

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

14ea6c5f-6866-4df8-85de-7cb7cdaeb711

Zaloguj się aby komentować

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

Zaloguj się aby komentować

Ejejejejej. Pochwalcie się co ciekawego ostatnio znaleźliście na temat #programowanie - jakąś bibliotekę?


Może jakiś fajny AI model co można uruchomić lokalnie?


Może jakiś zajeb%@#% serwis?


Albo coś fajnego self hosted?


Mam wolny wieczór, chętnie o czymś ciekawym poczytam.


#sztucznainteligencja #js #javascript #react #aws #google #python #php #golang #rust #react

Aby zrozumieć dlaczego virtio jest fajnym rozwiązaniam trzeba się najpierw zagłębić w to jak w ogóle wygląda postawienie systemu np. Androida na urządzeniu. Każdy telefon jest trochę inny. W inne miejsce może być podpięta pamięć, serial itd. Dlatego zawsze kilka tygodni zajmuje pokonfigurowanie kernela. Potem trzeba napisać HAL, który tłumaczy androidowi jak np. używać GPS. To znów wymaga czasu. Każda aktualizacja androida wymaga dopasowania tego co już jest. Często więc dużo czasu i pieniędzy wymaga takie coś - jest też Treble, ale mniejsza z tym teraz.


Konkluzja jest taka:

Różne systemy operacyjne odpalane na czymś w stylu telefonu. Jest system linux host, który przez virtio przekazuje wszystko do guesta (usb, bt, wifi itd) np. Androida i dzięki temu działa od razu bez zabawy w drivery po stronie androida.


To jest o tyle fajne, że jeśli się przyjmie na szeroką skalę to aktualizacja systemu będzie możliwa na dowolnym urządzeniu. Wymiana systemu na dowony inny używający virtio też nie będzie problemem. Może rynek telefonów zacznoe przypominać rynek PC, gdzie możesz sobie podmoenić system i wszystko śmiga.

Zaloguj się aby komentować

Spokojnie, za 3 lata się przepisze na TS, wszędzie się wstawi as any i kolejny hajsik za modernizacje zostanie skonsumowany

Zaloguj się aby komentować

@lebki Faktycznie XD nawet nie zauważyłbym, na co dzień piszę w javie i javascripcie naprzemiennie.

Pierwsze co mi się rzuciło w oczy, to że:

  • "=== true" jest zbędę;

  • obiekt jest z wielkiej litery;

  • brak spacji między if, a nawiasem otwierającym;

  • brak spacji po warunku między nawiasem zamykającym, a klamerką otwierającą blok kodu XD Mam na myśli, że

"if (warunk) {" vs "if(warunek){" - takie coś strasznie mnie rozsierdza, a w robocie mam chłopa co tak robi cały czas i potem jak mi intellij autoformatuje, to mam zmiany na całym pliku (╯ ͠° ͟ʖ ͡°)╯┻━┻;

  • '

i jeszcze to gówno' XD.

Zaloguj się aby komentować

React jest w zasadzie tylko biblioteką do renderowania elementów i JavaScript jest w nim kluczowym językiem programowania. W wielu firmach używa się już TypeScriptu, ale myślę, że warto skupić się teraz na czystym JS, żebyś później docenił TS i nie błaźnił się na przyszłych interview.


Co do sensu używania JS to chodzi tu przede wszystkim o automatyzację. Jak wyobrażasz sobie stworzenie takiego portalu jak chociażby Hejto tylko w HTML i CSS? Użytkownicy będą pisać do ciebie maila z komentarzami, a ty będziesz to skrzętnie osądzał pod każdym postem? No chyba nie bardzo. JavaScript obsługuje interakcje z użytkownikiem i komunikuje się z serwerem na którym przechowywanie są wszystkie dane. Te dane później są pobierane przez front-end i renderowane (np. z pomocą Reacta) w przeglądarce. React pozwala na upakowanie treści/logiki w niezależne komponenty np. komentarz pod wpisem. Dużo by się rozwodzić.


Do JavaScriptu polecam stronę MDN (angielski zalecany):

https://developer.mozilla.org/en-US/docs/Learn


Do Reacta oficjalna dokumentacja daje radę na start:

https://reactjs.org/tutorial/tutorial.html

@Jayes spoko tylko srednio zrozumiales o co pytam, bo te zdanie o hejto w html/css jest zdeczka smieszne a ja wprost pytalem np o to jak pozycjonujesz pozniej te elementy/komponenty stworzone w reakcie na stronie - jakims csssem linkowanym do danego htmla (?) itd. z tego co rzucilem okiem na podstawy reacta to przy bardziej statycznych stronach typowo firmowych (bez bazy userow) w zasadzie niekoniecznie jest sens tego uzywac.


anyway rozumiem ze pracujesz jako frontendowiec - nie wydaje ci sie obecnie ten tech rozjebany jeszcze bardziej niz zwykle? pure html/css, do niego x frameworkow, ale jednoczesnie w calosci mozna pisac wszystko w reakcie do ktorego jest jeszcze x bzdur, oprocz reacta vue/angular i inne pierdoly

@blablator Jeszcze jest Svelte i SvelteKit. Polecam sprawdzić, bo to najbliższe czystego html + css + js.

Dodatek od Svelte to pewna reaktywność, binding, store i składnia list generowanych z tablicy. Tak z grubsza. Reszta to czysty html+css+js.


A React i ten jego virtual dom, i cuda typu CSS-in-JS, to nieco przekombinowane. No ale popularne...

Zaloguj się aby komentować

Podstawowe logowanie błędów do małej aplikacji w #javascript nie za miliony monet? Ma wyświetlić ładną stronę błędu po stronie serwera lub klienta, wysłać mi error ze stack trace, idealnie prawdziwym. Słucham propozycji.


Miałem sentry, ale do małego projektu to overkill, a w wersji darmowej resursów wystarczyło na tydzień.


Stack: #react #prisma #node #nextjs #pm2, trochę #testowanieoprogramowania

Zaloguj się aby komentować

Zaloguj się aby komentować

Zaloguj się aby komentować

pytałem na diskordzie ale tam idą dyskusje na głębokie tematy, także spróbujemy tutaj.


#javascript #html #react


Jeszcze na łykopie przed ostatnią aktualizacją napisałem sobie prosty userscript do czarnolistowania. Działał na tej zasadzie że po załadowaniu strony brał predefiniowaną tablicę na przyklad tagów


var tagi=['przegryw','kononowicz'];


function schowaj_taga(item,index) {


let tag=$('div.d⁎⁎a p a[href="łykop/' + item +'"]' );


tag.remove() }


oczywiście upraszczam, ale efekt tego był taki że usuwane były całe gałęzie drzewa DOM no i było fajnie, dobry przekaz leciał.


W przypadku hejto jak próbuję zrobić to samo z elementem article to jest spoko póki nie dotknę paginacji. Frontent nie "reloaduje" dokumentu tylko usuwa kontekt zmiędzy obecnych <article> i wstawia nowy. Jeśli FE oczekuje 20 elementów article a ja zdążę usunąć 4 z nich to kolejny request o uzupełnienie treści wywali błąd 500.


Zastanawiam sie jak do tego podejść.

Zawsze możesz zrobić na pałę i ustawić sobie, żeby skrypt się odpalał np. co sekundę, przy pomocy setInterval - nie jest to za bardzo po bożemu, ale powinno działać A to na tyle drobny skrypt, że nie powinno to jakoś wpłynąć na prędkość działania strony.

@kocurio wiem wiem, ale nie cierpię takiej guwnorzeźby. to jeden z moich OCD -jak coś robię to ma to być zrobione dobrze, bo parafrazując mema już wpiszę do eksela i tak zostawię.

Zaloguj się aby komentować

Skrypt do wołania wszystkich pulsujących dany wpis:


Wszystko dzięki użytkownikowi @vor7 - ja go tylko poprawiłem by działał gdy w URL pojawi się ? oraz by działał z zakładek i kopiował się automatycznie do schowka.


Instrukcja na chrome:


1. Kopiujecie kod: https://pastebin.com/xKRyAvnD


2. Wybieracie "Dodaj zakładkę"


3. Piszecie nazwę jaką chcecie


4. Wklejacie tutaj gdzie pokazuje w załączonym obrazku.


5. Teraz w dowolnym wpisie klikacie zakładkę i pyk pojawia się alert z listą użytkowników, ta sama lista pojawi się też w zakładce Console po wciśnięciu F12 oraz BĘDZIE AUTOMATYCZNIE SKOPIOWANA DO WASZEGO SCHOWKA!


6. Ctrl + V i wołacie ludzi.


7. ???


8. PROFIT!


Wołam dla testu plusujących poprzedni wpis: https://www.hejto.pl/wpis/zanim-ktos-zrobi-bardziej-porzadne-narzedzie-napisalem-prosty-skrypt-ktory-wyplu


@i_am_not_a_robot @MrStealYourGirl @Satch @janlaguna @0nc0l @Sakta @Fajrantboy @Chilled_Marrow @muarz7 @Odpad_selektywny @acetone @Zielczan @Rastablasta @sorek @evilonep @PanGargamel @_hdvn @LM7812 @ioskarpl 


#programowanie #javascript #hejto #programowanie

ee46e479-4abf-4031-88c0-653d6ab88777

@Miedzyzdroje2005 póki wszyscy będą tagować polityka a admini pilnować tagowania polityka (a nie jak na wykopie że tylko prawicy się je dodaje na siłę) to wszystko będzie ok.


Aczkolwiek sam nie planuje tego do tego wykorzystywać, hejto to nie miejsce do tego.

Zaloguj się aby komentować

Zaloguj się aby komentować

@beerman też pisałem w Reactcie i w Vue - i muszę przyznać że Vue 2.x było dosyć nieprzyjemne, ale z wprowadzeniem composition API (w sumie trochę zrzynka z reacts) nawet daje rade

@Nimaskalisto @def kiedyś muszę zajrzeć do Vue 3, ale sami wiecie jak to jest, chętniej się tam zagląda, gdzie masz więcej expa, bo za to w końcu płacą

Zaloguj się aby komentować

ktos tu niedawno postowal ze uzywanie na mobilku przysparza o gotowanie sie wody w kolanie.


Potwierdzam, przegladarka bezchromowa, zmiana trybu z gorace na najnowsze trwa dobre 5 sekund. Reakcja na input typu piorun rowniez ma wyczuwalnego laga.


Osobiscie na ile znam jsowe frameworki to problematyczny (ciezki po prostu) jest React, na desktopie i facebook chodzi jakby kopal krypto przy ruchu myszka :d

Zaloguj się aby komentować

Zaloguj się aby komentować