W sumie ciekawe case study z #webdev #programowanie

Zwykle się nie zdarza w 2024. Ale musiałem zaimplementować obrazki na spritach jak 20 lat temu.

Problem
Mapka z polskimi herbami https://deykun.github.io/maps/heraldyka

Herbów było 2k, każdy na absolucie każdy był w osobnym src, jak się wchodziło (o dziwo na chromie o wiele gorzej niż na firefoxie) to była zawiecha na ileś sekund (potem jak się ogarnęło to już raczej działało), raport z lighthouse 3/4 się psuł przy odpaleniu i renderował się dobre 3 minuty+ (zawierał uwagi o przesunięciach w tych setkach elementów).

Dostałem nawet 2 razy bana na IP na githubie, bo 3 otwarte karty potrafiły pobrać 8k obrazków. Wspomniane tutaj.

Raport z lighthouse jest we wpisie.
18.8 sekund blokowania wątku!

Ale w sumie ciekawy kejs, bo chcemy mieć elementy w x i y i chcemy mieć to 2k obrazków.

Oczywiste nieoczywiste rozwiązania to:

• przenieść mapkę do canvasa pozbędziemy się wtedy 2k nodów html
  
• stworzyć sprite obrazków i kadrować
  

Co zrobiłem:

1. Zmieniłem obrazki na webp, dodałem srcset, co poprawiło wynik delikatnie
   
2. Stworzyłem canvasa (ostatecznie go nie używam na tej stronie)
   
3. Do canvasa stworzyłem sprite 180 herbów na obrazek -> zamiast 2000 obrazków, pobiera ~11
   
4. Wykorzystałem spritery na tej stronie bez canvasa (jako background-image)
   

Rezultat:
Strona się ładuje normalnie, skok z 52/100 punktów wydajności przy 2.1k herbów do 81/100 z 2.6k herbów.

Issue na githubie: https://github.com/Deykun/maps/issues/16

W sumie spoko przypadek, pierwszy raz używałem spritów i canvasa dla zwykłej i koniecznej optymalizacji.

Japanese web design: weird, but it works. Here's why
https://youtu.be/vi8pyS076a8

#japonia #webdev #ux #psychologia

1073741824 B, to 1 GB.
Ale co mają sekundy do bajtów?

1073741824 sekund to 298261 godzin 37 minut i 4 sekundy.

29826104 - taka liczba, jest widoczna w odtwarzaczu Picture in Picture w Firefox, na streamie.

Skąd taka liczba w streamie, filmie, który teoretycznie nie ma określonego czasu trwania?

Tak nie jest na każdym streamie, ale gdy jest, to z taką liczbą.
To jest z kick.com na Firefox, Chrome w ogóle nie wyświetla czasu w Picture in Picture.
Twitch i YouTube tak nie ma.

PS To jest jednocześnie ponad 34 lata streama.
#kick #twitch #youtube #live #stream #firefox #programowanie #frontend #webdev #przegladarki #internet

Jak ja nienawidzę stron na których nie da się po ludzku zrobić wstecz tylko trzeba spamić albo rozwinąć listę wstecz ręcznie żeby wyjść ze strony...
#webdev

#wykop to jest nadal jakiś fenomen programistyczny. informują mnie np. że coś zostało usunięte, odczytuję, powiadomienie nadal wisi, ale najlepsze jest to, że nie wiem co usunęli bo przecież link jest nieaktywny xD
jakieś tęgie mózgi pracowały nad tą wersją:
"przez niemal 3 lata i miala byc odpowiedzia na problemy poprzedniej wersji. Niestety - wyszło słabo."
dosłowny cytat z Michaua.
3 lata pracowali nad zdegradowaniem wykopu do wersji alfa żeby potem przez kolejne 2 lata naprawiać niekończące się problemy.
finalnie strona po pewnym czasie używania muli nawet na najnowszych procesorach z najwyższej półki zarówno na komputerze jak i smartfonie.
#webdev

Cześć!

Pierwsze dni lata już za nami, a więc nadszedł czas na cieszenie się wspaniałym okresem urlopowym!
Aby uczcić tę wyjątkową porę roku, przygotowaliśmy ofertę promocyjną!
Zmień hosting przed urlopem i ciesz się zasłużonym wypoczynkiem bez obaw!

Z kodem LATO24 hosting aż 50% taniej!

Sprawdź naszą ofertę na sohost:registered:

W każdym pakiecie hostingu www:
• LiteSpeed + LS Cache
• Powierzchnia SSD NVMe
• Rejestracja domeny .pl w cenie hostingu
• Nielimitowany transfer
• DirectAdmin PL
• PHP 5.3-8.2
• Certyfikat SSL (Let's Encrypt)
• Autoinstalator popularnych CMS'ów
• Pełna kopia co 24 godziny aż do 7 dni wstecz!
• Darmowa migracja

W każdym pakiecie hostingu e-mail:
• Powierzchnia SSD NVMe
• Przekierowania bez limitu
• Klient Roundcube
• Filtry spamu
• Zarządzanie DKIM
• Antywirus
• Pełna kopia co 24 godziny aż do 7 dni wstecz!
• Darmowa Migracja
• Darmowa konfiguracja

#hosting #domeny #wordpress #webdev #php #mysql #nodejs #promocje #sohost #litespeed #email #stronywww

Zacząłem używać #brave jako przeglądarki internetowej na telefonie z #android

Używam trybu dynamicznego,nczyli za dnia mam telefon w trybie jasnym a po zachodzie słońca w ciemnym. Czy da się ustawić brave, żeby robiło dark mode stron zgodnie z trybem telefonu? Czyli żeby dynamicznie ogarniał kiedy ma być jasno a kiedy ciemno?

#pytanie #webdev #internet

no w sumie parsowanie to nauka HTML, CSS i

JS tylko odwrotnie

1. próba
   
2. mikrofonu
   

• gdybym był człowiekiem wyższej kultury
  
• to użyłbym wpisu który już kiedyś wrzucałem
  
• #webdev #programowanie #lajko

Hej, szukam kogoś, kto pomógłby mi ustawić dobrze stronkę na wordpressie pod kątem szybkości - bardzo długo trwa render, potem jest fajnie. Jeśli się na tym znacie, dajcie proszę znaka. Dzięki
#webdev

#webdev #chwalesie ( ͡° ͜ʖ ͡°)

Cześć!
Szukasz hostingu www lub hostingu e-mail?

Sprawdź naszą ofertę na sohost:registered:

Z kodem HEJTO hosting aż 30% taniej!

Do 20.06.2024 z kodem HEJTO50 hosting 50% taniej.

W każdym pakiecie hostingu www:
• Darmowa migracja
• Rejestracja domeny .pl w cenie hostingu
• LiteSpeed + LSCache
• Powierzchnia SSD NVMe
• Nielimitowany transfer
• DirectAdmin PL
• PHP 5.3-8.3
• Certyfikat SSL (Let's Encrypt)
• Autoinstalator popularnych CMS'ów
• Pełna kopia co 24 godziny aż do 7 dni wstecz!

W każdym pakiecie hostingu e-mail:
• Powierzchnia SSD NVMe
• Przekierowania bez limitu
• Klient Roundcube
• Filtry spamu
• Parking DNS
• Zarządzanie rekordami DNS
• Zarządzanie DKIM
• Antywirus
• Kopia co 24 godziny (7dni wstecz)
• Darmowa Migracja
• Darmowa konfiguracja

#hosting #domeny #wordpress #webdev #php #mysql #nodejs #promocje #sohost #litespeed #email#serwery #informatyka

Zacznę tutaj, na Hejto, żeby rozgrzewkowo sformułować sobie problem. Chociaż mam nadzieję, że pomożecie mi rozwiązać temat

Mam taki produkt Comtegra GPU Cloud, Comtegra GPU Core https://cgc.comtegra.cloud i ostatnio udało nam się wykonać 2 on-premowe wdrożenia, przez co urodziła mi się w głowie piękna idea "CGC Universe" - jeśli kupisz infre z naszym stackiem, możesz dołączyć do naszego wszechświata dzięki czemu ty będziesz miał dostęp do wszystkich otwartych klastrów jak również jeśli będziesz chciał my możemy oferować naszym klientom cloudowym twój klaster jeśli masz jakieś wolne zasoby. Sprzedajemy GPU, w sensie ich moc obliczeniową.

Na stronie mamy taką sekcje early adopters, która jest już brzydka i przestarzała dlatego chciał bym tam wstawić coś na kształt pic rel.

I tu pytanie do was #programowanie #webdev #grafika

Nie chce rysunku, chce kod, jest tu ktoś kto zna się na rysowaniu w JS? Strona jest na #nextjs więc implementacja czegokolwiek dodatkowego nie jest problemem.
Chce stworzyć jasne wytyczne dla kogoś kto narysuje mi bloki takie jak Core (pomarańczowy, energia buzuje, wyskakują jakieś cząsteczki), chmurkę (jako połączenie do neta), łańcuchy (jako klaster za VPNem), sprytne strzałeczki żeby to wszystko połączyć. Jak na razie wszystko widzę w jakimś 8-bit.
Chce żeby to było zrobione tak, że potem z łatwością będę dodawał sobie kolejne rzeczy (w kodzie oczywiście, nie oczekuje UI żeby tym zarządzać).
Ofc hover i click po to żeby podejrzeć detale Core-a (nazwa, ip, dostępne zasoby) - jeśli klient wyraża zgodę.

A w tajemnicy powiem wam, że jeden klient wyraził zgodę. Nie byle jaki klient bo Polibuda Wrocławska. Tak więc projekt nabrał szybszego tempa. Zaraz w ofercie będziemy mieli dostępne NVIDIA H100

Ktoś coś? Oczywiście jeśli znacie kogoś kto może coś takiego wykonać to czym prędzej dajcie znać Robota od zaraz

CSS ma `hyphens: auto`, do auto łamania w punktach dzielenia wyrazu (na sylaby).
Jaki to algorytm? Czy jest dostępny w JavaScript?

Znalazłem to: https://github.com/ytiurin/hyphen
Wygląda ok. Używa się łatwo z polskim językiem `import { hyphenate } from "hyphen/pl";`.
Ale jaki algorytm używa konkretnie Firefox czy Chrome? Bo może są po prostu lepsze od tej biblioteki z GitHub.
#javascript #css #firefox #chrome #webdev #frontend

Hejto Szukaczka

Napisałem stronę do tekstowego wyszukiwania treści wpisów na Hejto - dałem z siebie jakieś 33.33% - czyli jak na mnie to całkiem sporo

Zrobiłem to w oczekiwaniu na oficjalną wyszukiwarkę, która będzie wspierała wyszukiwanie po treści wpisu

Szukacza bazuje na ogólnodostępnym Hejto API - co oznacza, że ma takie same ograniczenia jak Hejto API

Stronę napisałem przy pomocy frameworka SvelteKit oraz biblioteki komponentów interfejsu użytkownika Flowbite Svelte .

Zapraszam do spróbowania, samodzielnego odkrycia zaimplementowanych funkcjonalności, piorunowania oraz komentowania!

#hejto #technologia #wyszukiwarka #webdev #sveltekit #hejtoszukaczka

Majowa promocja w sohost:registered:
Z kodem MAJ24 hosting aż 50% taniej!

Zapraszamy do zapoznania się z naszą ofertą!

#hosting #domeny #wordpress #webdev #php #mysql #nodejs #promocje #sohost #litespeed #email #serwery #informatyka
#reklama

Jakiej przegladarki uzywacie i dlaczego?

#pytanie #pytaniedoeksperta #pcmasterrace #internet #webdev

Cześć,
W celu nauki zagadnień sieciowych chce na Raspberry pi 4 postawić serwer Next cloud, chce go też wystawić na zewnątrz aby był dostępny poza siecią lokalną.

Postawienie serwera lokalnego jest bardzo proste. Podpiąłem do RPI dysk SSD SanDisk 1TB QVO(znam opinie o tym dysku) i zrobiłem instalacje Next cloud, działa w sieci lokalnej bez problemu.

Teraz chciałbym wypłynąć na nieznane wody i wystawić go na zewnątrz.

Mam serwer na mikrusie, własną domeny i
Hosting. Czytałem już, że przez cloud flare można to jakoś podłączyć ale nie mam pojęcia jak to zrobić, z czym co się je. Jak to zrobić bezpiecznie etc.

"Szybko się uczę" ale na początek chętnie posiłkowałbym się jakimiś gotowymi poradnikami bo nie wiem od czego zacząć. Mogą być po angielsku.

Kolejnym zadaniem jakie sobie zaplanowałem w tej tematyce jest postawienie API raczej w spring boot bo kotlina trochę znam.

Z jakich stron czerpać podstawową wiedzę na ten temat? Od czego zacząć?

#webdev #siecikomputerowe #sieci #komputery #programowanie #mikrus

Edit: chciałbym to zrobić mając zmienne IP.

Witamy społeczność hejto!

Jesteśmy zespołem Sohost, i z ogromną radością dołączamy do waszej społeczności!
Nasza firma specjalizuje się w dostarczaniu hostingu www oraz hostingu e-mail oraz rejestracji domen.

Zapraszamy do zapoznania się z naszą ofertą na sohost.com
Z kodem HEJTO hosting aż 30% taniej!

#hosting #domeny #wordpress #webdev #php #mysql #nodejs #promocje #sohost #litespeed #email #serwery #informatyka

Hej, mam wrażenie, że logowanie poprzez mObywatel nie działa- co najmniej od piątku. W skrócie na stronie https://login.mobywatel.gov.pl powinien wygenerować się kod QR, który następnie skanujecie w aplikacji mObywatel. Czy możecie mi potwierdzić, że kod QR graficzny na tej stronie się Wam wyświetla poprawnie- czyli pokazuje się prostokąt z kropkami (nie jak w załączniku), lub w wersji mobilnej możecie skopiować kod, następnie go wkleić gdzieś i kod nie ma wartości NULL? Niestety prawdopodobnie jak widzicie to się nie dzieje, przeglądarka dostaje kod http 401 zanim się jeszcze zalogujemy. ( ͡° ͜ʖ ͡°) Pytałem paru innych znajomych, mają ten sam problem, sam również to testowałem z łącza mobilnego i stałego na wielu przeglądarkach, z trybu incognito. Nadal nie działa.
Dzwoniłem na helpdesk dwa razy- za każdym razem po drugiej stronie telefonu ktoś z helpa mówi, że mu działa XD jak poprosiłem chłopaka, by sprawdził na łączu mobilnym z telefonu to raz, że nie potrafił wymusić pełnej wersji, to mi powiedział, że ma ajfona i mu po wymuszeniu wersji pełnej wyświetla się Whitelabel error page i to wina telefonu. XD 
Założyłem ticket, obecnie dostałem odpowiedź, bym wyczyścił cookiesy- więc znowu podejrzewają, że problem jest u mnie lokalnie mimo dodania, że problem pojawia się u większej ilości osób. Cookiesy wyczyszczone, problem jest nadal.
inb4 w stopce jest link odnośnie deklaracji dostępności i gdzie ją zgłaszać- KPMR, niestety przekierowują mnie dalej na wspomniany helpdesk XD
inb4 oficjalnie ticket założyłem w ich systemie w piątek, dzwoniłem od rana, bo chciałem się zalogować do epodatków- tutaj jest wymieniony ten link https://www.podatki.gov.pl/e-urzad-skarbowy/logowanie-do-e-us/#profil-zaufany jako aplikacja mObywatel. 

#kiciochpyta #pytanie #informatyka #webdev #urzadskarbowy #podatki #mobywatel #komputery #ciekawostki

Dzisiaj wam przypomnę.

#hejto #2023 #webdev