Super Mario 64 w przeglądarce!

Można sterować klawiaturą lub użyć kontrolera oraz robić zapis postępów!

Wszystko dzięki technologi WebAssembly (Wasm)!

#ciekawostki #technologia #gry #retrogaming #retrogry #webdev #webassembly #wasm

Astro - Framework do tworzenia super szybkich stron internetowych, aplikacji internetowych po stronie klienta, dynamicznych endpointów API i wszystkiego pomiędzy!

Framework Astro spopularyzował architekturę frontendową o nazwie"Wyspy" (Islands), która pomaga uniknąć monolitycznych wzorców JavaScript automatycznie usuwając ze strony wszystkie niepotrzebne skrypty.

Astro umożliwia programistom korzystanie ze swoich ulubionych komponentów interfejsu użytkownika i frameworków takich jaki React, Svelte czy Vue co umożliwia bezbolesną migrację.

Dodatkowo, w związku z wydaniem ostatnio wersji 4.0, która wprowadziła szereg usprawnień, jeszcze bardziej polecam zapoznać się z tym bardzo wygodnym i elastycznym fameworkiem!

Jeśli jednak potrzebujesz więcej szczegółów dlaczego warto wybrać Astro to zapraszam na stronę: https://docs.astro.build/en/concepts/why-astro/.

#technologia #webdev #astro

Dlaczego ten biedacki portal przy pisaniu komentarzy zawiesza się na sekundę po każdym wprowadzonym znaku?

#hejto #webdev #moderacja

1. Miej telefon w #orange
   
2. Zaloguj się aby zmienić swój adres zamieszkania
   
3. Orange pozwala na adresy tylko ze swojej bazy danych
   
4. Baza danych Orange nie jest zbyt aktualna
   
5. Na końcu formularza jest checkbox "potwierdzam, że dane są poprawne"
   
6. Co tu zrobić.
   
7. Debugger, breakpoint, "valid=true", kontynuuj wykonanie
   
8. Adres zmodyfikowany
   

Uwielbiam walidację tylko po stronie przeglądarki.

#gownowpis #webdev

Wkurza was jak kopiujcie tekst ze strony, a po wklejeniu np. tu na hejto okazuje się że wstrzyknęli do schowka jeszcze "czytaj dalej na (tu link do artykułu)". Bo mnie to wkurza.

Brave mobile here, ale to powszechne. Jest na to jakiś sposób?

#przegladarki zaryzykuję #programowanie #webdev nie bijcie.

Hejo
Pytanie do orłów #webdev #programowanie #stronywww #adsense

Od jakiegoś czasu Google na wersji mobilnej mojej strony wyświetla baner reklamowy w miejscu paska z reklamą na samym dole. Nie da się go zamknąć, przez co utrudnia korzystanie ze strony. Nie mogę namierzyć skąd to się wzięło. Na kompie normalnie wyświetla pasek. Wystarczy zmniejszyć szerokość strony i od razu z małej reklamy robi się taka na 1/2 strony. Widziałem, że ktoś żalił się na coś podobnego na Hejto. Wiecie może, jak się tego pozbyć? Muszę wyłączyć całą jednostkę reklamową? (mam w jej ustawieniach wyłączone auto dopasowanie rozmiaru). Czy to bierze się z reklam automatycznych?

Z góry dzięki za pomoc

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

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