#programowanie #pracbaza #webdev W jaki sposób na takiej stronie pokazalibyście swoje projekty?

Chciałem dodać jakieś 2-3 zdania opisu, linijke o tym czego sie na tym nauczyłem, i może jakąś grafike poglądową, ale nie wiem w jakiej formie to sie estetycznie wpasuje.

Myślałem o obrazkach z nazwą projektu, które po kliknięciu sie odwracają z opisem w bullet pointach, ale nie wiem czy to sie wpasuje.

Grafika w tle to placeholder żeby nie było ( ͡° ͜ʖ ͡°)

Dobra mordko daj porade bo zawsze mi dobrze poradzisz,

Muszę postawić prostą stronę, menu gorne, 4 zakladki, 4 podstrony, jakis kontakt logo na gorze i chce tam wyswietlac zdjecia przedmiotow do sprzedania, żaden sklep tylko prezentowanie zdjęć i namiary na kontakt telefoniczny.

Co robisz w mojej sytuacji ? Chciałbym żeby to wyglądało jakoś przyzwoicie

Mam juz domene zaklepana, mam jakis hosting na hosting house ale ten quick cms to sobie mogę wsadzić

Jakis generator konkretny polecicie ?

#hosting #webdev #webdesign

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

Z kategorii ciekawostek: Zapraszam Cię do wehikułu czasu - jedziemy do lat 90. Takiego CSSika na pewno dawno nie widziałeś.

Swoją drogą, jeżeli macie jeszcze jakieś przykłady stron w takim stylu, śmiało wrzucajcie, z chęcią bym obejrzał

http://www.abc-med.info/index.htm

#webdesign #webdev #grafika #internet #ciekawostki

Jutro prezentacja Svelte 5.

Ma być magicznie.

Nie mogę się doczekać. :))

https://svelte.dev/blog/runes

#programowanie #svelte #sveltekit #frontend #backend #fullstack #webdev

Ktoś mi powie proszę jak zrobić logowanie przez facebooka na stronie? Trzeba ich skrypt dodać w index i co potem? Dostaję ten accessToken i muszę go zweryfikować i nim wyciągnąć dane o użytkowniku? Ma ktoś fajny artykuł o tym?

#facebook #webdev #programowanie

Macie może jakieś strony gdzie można dać darmowy wpis gościnny? Mój page authority wynosi 0 xD #seo #webdev

Rok szkolny dla dzieciaków się zaczął. Pomyślałem, że może udałoby mi się zrobić jaką automatykę w NodeRed aby wysyłał informację o zastępstwach i wiadomościach. Rozpoczynam poszukiwania czy jest jakieś API do mobidziennika. Lipa. Jest jeden projekt, który coś ogarnia - apka szkolny.eu. Patrzę w źródła. Jest link. Pohakane trochę bo trzeba wysyłać przez CURL jakieś jsony typu "device" udające że dane chce pobrać ich apka na androida. Wyspawałem cURL i jest. Udało się bez błędu. Patrzę co jest w środku, a tam cały HTML wraz ze skryptami i całym głównem. Myślałem, że to będzie szybka sprawa. A tu takie coś. Takie coś może by przeszło 10 lat temu na studiach, a tu niby poważna firma, która chwali się specjalistami...

#webdev #backend #witkiopadaja iiiu

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

#siecikomputerowe #webdev #komputery #pytanie

Wiecie może dlaczego po transferze domeny z aftermarket.pl do mojego hostingu (minęło już 3 dni) i ustwieniu dns dla domeny nie wyświetla mi się nawet prosty index html? Trzeba dłużej poczekać?

https://mxtoolbox.com/SuperTool.aspx?action=a%3atoledoclubpolska.pl&run=toolpage pokazuje ok

Wiecie, że można już odmówić dostępu do swojej strony botowi od Chata gpt?

Jeżeli nie chcesz żeby Twoje treści służyły do szkolenia następnych wersji gpt można poprosić robota o wyjście.

Co ciekawe można im odmówić dostępu do nowych danych na stronie, ale nie można odmówić dostępu do tych które sobie wcześniej pobrali.

Przykładowy kod robots.txt

User-agent: GPTBot

Allow: /directory-1/

Disallow: /directory-2/

Robot przedstawia się jako

User agent token: GPTBot

Full user-agent string: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; GPTBot/1.0; +https://openai.com/gptbot))

Dokumentacja:

https://platform.openai.com/docs/gptbot

#webdev #webdesign #hosting #chatgpt

Kochane Hejtośki,

wyskoczyło mi coś takiego, co to jest? Oczywiście nie jestem robotem i świadomie nie stosuje żadnego robota. Wyskoczyło mi na stronie z ubraniami.

#internet #technologie #programowanie #webdev

Wyobraź sobie projekt na Github, który jest prowadzony przez pięć grup, i każda chce zaszkodzić pozostałym grupom, i ma własne sprzeczne pomysły.

Jak prowadzić sensownie taki projekt?

Tak, mówię o sejmie.

A pytanie na serio. Da się coś z tym fantem zrobić?

#github #git #webdev #programowanie

Dawno nie bawiłem się w #webdev, a że miałem troszeczkę więcej czasu ostatnio, to zacząłem "odświeżać" starą prostą stronkę (W centrum zmieniający się co jakiś czas obrazek + player muzyki w rogu).

Głównie to chciałem dorobić panel do zarządzania tą stronką (zarządzanie obrazkami i muzyką) i wypróbować coś takiego jak #blazor.

Zrobiłem w panelu własny system autoryzacji, bo ten domyślny z .Net nie chciał za bardzo współpracować.

Zrobiłem cały prawie w całości w blazorze player do muzyki, tak żeby było jak najmniej jsa.

Mam już prawie gotowe zarządzanie obrazkami i muzyką.

Blazor to w sumie fajny framework, a z MudBlazor (to coś takiego jak Vuetify dla Vue) fajnie się z tym pracuje.

Robię to głównie dla siebie, no ale mam potwierdzone, że co najmniej 2 inne żywe osoby na moją starą stronkę wchodziły co jakiś czas :V

#hobby #notasecretarchive

Potrzebuję materiały na temat testów jednostkowych do #angular

Polecacie jakieś konkretne materiały i/lub podręczniki?

#programowanie #frontend #programista15k #webdev

Teraz chciałbym abyś się leciutko skupił.

Powiedz mi, czy rozumiesz taką koncepcję.

Ja nadal jestem za koncepcją: jedno okno, wiele kart przeglądarki internetowej.

Jako opcjonalne API do wykorzystania.

Że w ramach jednej domeny(?), zamiast tworzyć kolejnych okien w kolejnych kartach (na zasadzie jedno okno, jedna karta), otwierać tylko "wydmuszkę", pusty element GUI w przeglądarce, którego kliknięcie wywołuje callback w jednym jedynym oknie.

To by działało jak History API, tylko dla kart, że przełączanie między kartami tylko uruchamia callback, zamiast przeładowywać okna do viewport.

Analogia do History API: Z History API, nie ładuje się poprzedniego okna po kliknięciu wstecz, tylko odpala callback który przeładowuje samą treść, w tym samym oknie.

Z koncepcją Jedno Okno, Wiele Kart Przeglądarki Internetowej:

* Można tworzyć efekty przejścia, animacje, podczas przełączania się między kartami tej samej domeny - nawet View Transitions API tego nie potrafi sam z siebie.

* Masz mniej okien otwartych na raz, bo podmienia się tylko kontent w jednym jedynym oknie, a nie całe okno. Zajmuje mniej miejsca.

* Nie potrzeba specjalnej komunikacji między oknami (tej samej domeny), bo komunikacja i synchronizacja jest bezpośrednia i doskonała.

* Idealne pod Single Page Aplication - przełączanie kartami przeglądarki przełącza tylko stan aplikacji, zamiast przełączać między wieloma kopiami aplikacji

* Nowa karta szybciej się otworzy i załaduje, bo doładowuje się tylko niewielki kawałek treści, a nie cała strona.

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

Potrzebuję takiego rozwiązania chmurowego:

• tworzę strony internetowe na jednym komputerze (PC)
  

• ale czasami, gdy wyjeżdżam, pracuję na laptopie
  

• posiadam serwerek postawiony na Raspberry Pi z wyjściem na świat
  

Chciałbym takie rozwiązanie, które zgrywałoby pliki stron (czyli dużo małych plików) na Raspberry Pi, tak abym mógł odpalić projekt na jednym bądź drugim komputerze, bez przerzucania plików na pendrajwy.

Na razie spróbówałem Nextclouda, ale z tego co widzę to pomysł był średni. Synchronizacja trwa bardzo długo, zawiesza się klient Nextclouda, wali błędami gdy w międzyczasie jakiś plik zostanie usunięty i w ogóle to rozwiązanie chyba nie pasuje pod duże pliki - bardziej by pewnie pasowało pod backup paczek z zipami.

Jest coś fajniejszego pod takie małe pliki, na których działa się live?

#nextcloud #webdev #programowanie