Wkurza Cię nowy front vikop i postanowiłeś przejść na hejto? Nic nie działa tam jak trzeba? To dobrze się składa bo w ramach nauki #frontend przygotowuję serię streamów w których spróbujemy napisać własnego klienta i pokazać, że, w co trudno uwierzyć, może być jeszcze gorzej ( ͡° ͜ʖ ͡°) Pokażę Wam jak używać wykopAPI v3 i AntDesign oraz pogadamy o życiu.

https://www.youtube.com/watch?v=stEWW7UVD4Y

Zapraszam na stream o 21:37

Tag do czarnolistowania #programujzpasterzem 

#frontend #webdev #naukaprogramowania #programowanie #react #javascript #programista15k #programista20k #wykopapi

Hej, zapraszam na strima o 20:00. Piszemy w #react i gadamy o #it #pracait

Nie chcesz widzieć tego typu postów? Dodaj tag #programujzpasterzem na czarną listę.

https://www.youtube.com/watch?v=UaqDg_qlLPk

#programowanie #naukaprogramowania #javascript #webdev #programista15k #frontend #backend

Pisząc aplikację, przeskoczyłem do frontendu od sporej przerwy.

I tak sobie myśle, że dzisiaj pracować w frontendzie to spoko sprawa w stosunku do kiedyś.

Dzięki standaryzacji, powszechności modułów ESM w przeglądarkach, już wszystkie babele, transpilery, CSS prefixery i uje muje dzikie węże to historia.

Jesteśmy już w tym stanie, gdzie wszystkie przeglądarki są spoko. Nie ma obecnie żadnego IE czy netscape który tylko wk@#^@.

Jestem tylko ciekaw, czy dożyje momentu, gdy JS pójdzie do historii i pozostanie tylko typescript To by było dobre.

#przemyslenia #programowanie #nodejs #node #javascript #typescript #frontend

Czy na prawdę wklepanie myślnika musi przerabiać go na listę kropkowaną?
Bez sensu.
Po cholerę to w ogóle? Przez to muszę używać Alt-0151

#hejto #frontend #css

Pamięta ktoś adres tej stronki na której koleś zrobił parodię współczesnych stron www?
Mam na myśli wkurwianie userów tymi wszystkimi:
Zapisz się do newslettera!
Porozmawiaj z konsultantem!
Czy pozwalasz stronie wysyłać ci powiadomienia?
Akceptuj pliki kuki!
Poświęcisz krótką chwilę na wypełnienie ankiety?
Zobacz najnowsze promocje chuju!
Może jednak zapiszesz się do newslettera.
Załóż konto.

#frontend #webdesign #usability #wkurw

Cześć!

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

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"?
   

 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"

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?

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

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

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

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

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

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

Cześć Wam

Dzisiaj ciekawostka o ReactJs numer #3

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

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 tak, wiem, doskonały temat na zachętę dot. WAD

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

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

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

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

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

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

> npm create vue@latest

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

> Project name: … gianni
> Add TypeScript? … No
> Add JSX Support? … No
> Add Vue Router for Single Page Application development? … No
> Add Pinia for state management? … No
> Add Vitest for Unit Testing? … No
> Add an End-to-End Testing Solution? › No
> Add ESLint for code quality? Yes
> 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-21T2331.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-21T2331.109Z.json`
3.2. `nodejs process.js --cmd=comment_likes_sum --source=data-snapshots/2023-09-21T2331.109Z.json`
4. wskazać w pliku ./gianni/src/App.vue skąd pobrać posty ( `import posts from '../../data-processed/cls/2023-09-21T2331.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 dupy vel moja intuicja ( ͡° ͜ʖ ͡°) "wykładniczość" jest figurą retoryczną a purystom znowu chuj w dupę.

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

#programowanie #javascript #frontend #webdev #tworczoscwlasna

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

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

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

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

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

#programowanie #frontend

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

#frontend #react #programowanie #suchar

#nieprogramowanie #html #frontend

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

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

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

#hejto #frontend #css