Jakie strony internetowe Wam się najbardziej podobają? Jakie uważacie za kawał dobrze wykonanej roboty?

#webdev #pytanie

Jeśli ktoś śledzi tag to sorry, z poprzednim sobie poradziłem i nie mogę usunąć, ale mam kolejny problem z menu w Elementorze pro.

Oto moje menu - czy ja nie mogę sprawić, żeby było ono węższe? Wszytsko mam wyzerowane. Najszersza wartość to logo na 100 px, no w innych przypadkach mi się deformuje. Nie ogarniam, jak mogę dać mu mniej wolnej przestrzeni dookoła...

#webdev #pytaniedoeksperta

Menu zrobione Elementorze Pro - o c⁎⁎j chodzi? Skąd się bierze ta przestrzeń pod? Nie ma żadnych marginesów, wartości w wysokości, nic. Ani w konkretnych elementach, ani w kontenerze...

#webdev #pytaniedoeksperta

Czy są aktualnie jakieś promo kody na elementora pro?

#webdev

#programowanie #webdev

Zrobiłem pierwszą prawie kompletną stronę internetową, która nie ma poważniejszych bugów. Pisałem od zera, bez żadnych frameworków mając w głowie https://thebestmotherfucking.website/ Cała strona ma 116 KB i udało się w niej zmieśnić trochę interaktywności z ts (automatycznie liczy ile mam lat, ile mam lat doświadczenia, oraz obsługuje całą logikę za przyciskami do wyświetlania jednej z 4 sekcji naraz).

Najpoważniejszy o jakim póki co wiem, to rozjechane napisy na przyciskach na iphonie (i tylko na iphonie).

Muszę się dowiedzieć co je wywołuje, żebym mógł powiedzieć iphoniarzom że nie mam zamiaru naprawiać dla nich strony chociaż wiem jak ( ͡° ͜ʖ ͡°)

#heheszki #humorinformatykow

#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