#webdev

15
179
Z 5 lat mi się nie chciało szukać jak to się robi, ale jakby co w #firefox jak macie kolor i chcecie hex albo rgb, to trzeba przytrzymać shitf i kliknąć.

#firefox #webdev
e5789707-2032-42ad-9d6f-8d3f054ba401
zomers

@Deykun pełno jest czasem takich magicznych tricków w programach, a weź je znajdź. Ja pewnie bym użył colorpickera, którego mam streamdeckcu wyciągniętego

Zaloguj się aby komentować

Zostań Patronem Hejto i odblokuj dodatkowe korzyści tylko dla Patronów

  • Włączona możliwość zarabiania na swoich treściach
  • Całkowity brak reklam na każdym urządzeniu
  • Oznaczenie w postaci rogala , który świadczy o Twoim wsparciu
  • Wcześniejszy dostęp, do wybranych funkcji na Hejto
Zostań Patronem
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.
e9181fbd-d0e0-4741-b735-eda425da0eb9
24dc7a57-1f36-45ae-8b5f-7b7bc126a79d
wombatDaiquiri

@Deykun a myślałeś o użyciu "spritesheeta" i przycięciu do odpowiedniego herbu w HTMLu?

Deykun

Rozwiązanie z canvasem wykorzystuję dla mapki Europy gdzie wszystkie kraję będę renderować (obecnie z 3 mam 4.2k herbów).

https://deykun.github.io/maps/heraldry


Ale ta strona ma jeszcze swoje własne bolączki jeszcze (niezwiązane z ładowaniem).

Zaloguj się aby komentować

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

#japonia #webdev #ux #psychologia
Rozpierpapierduchacz

@Deykun taktyczny komentarz, może nie zapomnę wrócić XD

ColonelWalterKurtz

W związku z tym, że miałem okazję w tym roku podróżować po Japonii naoglądałem się też trochę ich stron internetowych - też byłem zdziwiony, że ich stronki wyglądają jak coś co pamiętam z początków internetu. Ofc nie znam języka i pomagałem sobie translatorem ale wydawało mi się, że są one bardziej przejrzyste i czytelne. Plus jak knajpa ma stronę to jest to normalna strona w necie a nie profil na zjebanym fb.

Catharsis

Też miałem ten filmik w polecanych na YT. Czasem wydaje mi się, że ten algorytm jest prostszy niż się wydaje, i danej grupie odbiorców poleca to samo zamiast podchodzić bardziej personalnie xd.

Zaloguj się aby komentować

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
56823841-8303-4037-9d83-0ff4cceebc8f
5tgbnhy6

jeden gigabajt to rowny miliard bajtow, masz na mysli gibibajta

Zaloguj się aby komentować

#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
ffb4be1f-52f5-4042-ad7c-fb627e15a6cf

Zaloguj się aby komentować

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
1d72d5bc-9c5b-4a09-9cc6-f7da38a84ad0
zuchtomek

@sohost Brakuje tagu #reklama

swansu

Ta audycja zawierała lokowanie produktu.

Zaloguj się aby komentować

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
AdelbertVonBimberstein

@sayda Ustawienia-> Wygląd -> Motyw

?

d9c9eec8-8226-423a-869a-4fbb5a88c5ef

Zaloguj się aby komentować

czy?

11 Głosów
Odczuwam_Dysonans

@wombatDaiquiri

czy?

tak

nie

ogarnij

sie

eee

wombatDaiquiri

@Odczuwam_Dysonans sorki kolego, ale potrzebuję sprawdzić jak komentarze do komentarzy wyglądają

Zaloguj się aby komentować

#webdev #chwalesie ( ͡° ͜ʖ ͡°)
458d90a5-7b5a-4243-b9d3-ac91933ff6a0
tmg

@ufonapowaznie_pl a co to niby, statyczna strona HTML ?

tmg

@ufonapowaznie_pl hmm... gratulejszyn, nie sądziłem że da się taki wynik na wordpresie wykręcić. Widzę LiteSpeed cache. I pewnie bez dzikich węży czyli setek pluginów.

Zaloguj się aby komentować

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
Acrivec

@sohost usuń konto spamerze

Zielczan

Nie mówcie, że typ dał kod wykop xD

Acrivec

@Zielczan panie, on ma tyle serwisów do ogarnięcia że mu się już miesza, daj mu spokój ( ͡° ͜ʖ ͡°)

zuchtomek

Panie, ale reklamy to się chyba oznacza teraz w internetach

VonTrupka

@zuchtomek ta jest szeptana

Zaloguj się aby komentować

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
zboinek userbar
512aa0c9-742c-4894-8a6f-58c4475f8113
GODPL

Wrzuć opis zlecenia na fivera i ktoś zrobi to za frytki.

zboinek

@GODPL Taki plan, mam dość "enterprisowych" grafików z naszego podwórka. Pytanie czy opis jest spoko

GODPL

@zboinek Graficy z naszego podwórka są spoko, ale nie są warci pieniędzy, bo można to mieć taniej i zwykle szybciej.

20 lat w branży robi swoje.


A co do opisu to jest spoko, choć ja bym to rozpisał jak dla debila, bo później pół dnia będziesz komuś tłumaczył.

Zaloguj się aby komentować

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
zgrzyt

skoro css to ogarnia to po co Ci to w JS?

fewtoast

@zgrzyt Żeby przerobiło dłuższy tekst, na taki podzielony na sylaby.

zgrzyt

@fewtoast a CSS nie ogarnia dłuższego tekstu czy nie łamie tak jak byś chciał?

Zaloguj się aby komentować

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
3f83916b-9578-4b7d-b725-d13da6fed274
Yossarian

Panie, chcesz Pan serwery zabić?

koszotorobur

@Yossarian - Panie - a oby to się jeden w życiu serwer zabiło... ale to wszystko dla Was drodzy Hejtowicze

VonTrupka

@Yossarian czy ta forma strajku nie wywrze wystarczającego nacisku? (¬‿¬)

koszotorobur

@Lvter - żaden wpis nie ma szukanego przez Ciebie słowa

Wyczyść pole z lupką by zobaczyć wszystkie wpisy bez filtrowania po słowie "dupa".

Lvter

To dlaczego "zwrócono 50 wpisów"?

I nie ma żadnego że słowem dupa? Niemożliwe.

Zaloguj się aby komentować

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
3b79d2e3-8799-4caa-ac40-fec9fe32f411

Zaloguj się aby komentować

Następna