Depikselowanie awatarów

Algorytmy potrafią robić niesamowite rzeczy.
Narzędzie Face Depixelizer (offlineowe) zgaduje, jaka twarz została zapikselowana. Robi to w bardzo prosty sposób – generuje twarz, zapikselowuje ją i sprawdza czy kolory pikseli pasują do obrazka wejściowego. Jeśli nie – generuje poprawione zdjęcie tak żeby lepiej pasowało. I tak aż nie „zgadnie” twarzy zapikselowanej. Oczywiście jest ona tylko podobna do oryginalnej (btw fajna metoda na tworzenie podobnych osób). Ale działa. Ciekawostka, być może użyteczna.

Łatwy kreator animacji CSS

Wreszcie. Doczekałem się.

Jest dostępny on-line’owy program do animowania. Prawie jak flash, ongiś. Prawie. No dobra, do flasha ongiś brakuje naprawdę dużo, ale zapowiada się bardzo dobrze. Teraz wszystkie moje strony będą się ruszały. :)

Spróbuj: https://keyframes.app/animate/

Ładne kolory, szybko!

Pod adresem materialui.co/colors jest bardzo ładna paleta kolorów z Material Design. Są tam też inne palety i elementy (klikaj w pozycje menu), ale ta paleta ma tą właściwość, że wszystkie kolory wyglądają mniej więcej ładnie w zasadzie w każdym projekcie. Po kliknięciu kod koloru jest od razu kopiowany do schowka, gotowy do użycia.

Google Fonts (i nie tylko) – dlaczego lepiej hotlinkować niż trzymać u siebie?

W niemal każdym poradniku o optymalizacji stron www można odnaleźć wskazówkę, że wszystkie zawartości wczytywane z zewnątrz powinno się umieścić lokalnie na stronie, i wczytywać razem z innymi elementami strony z jednego serwera. Koronnym przykładem jest tu Google Fonts – popularna usługa serwowania darmowych do użycia krojów czcionek.

Mówi się że hotlnikowanie (czyli linkowanie zdalne) spowalnia ładowanie strony i uzależnia ją od zewnętrznych usług.
W zasadzie prawda, ale:

Jeśli dana usługa jest bardzo popularna (na przykład jest to bardzo popularny font Open Sans) to istnieje bardzi duże prawdopowobieństwo, że użytkownik strony był już na innej stronie która używa tego kroju czcionek. Zatem – ten krój jest już zapisany u niego w przeglądarce, a ta widząc hotlink do tego samego miejsca, nie będzie ładowała czcionek z serwera Googla, tylko pociągnie z własnego cache’a, co jest około trzy biliony razy szybsze.

Ma to zastosowanie dla wszystkich popularnych treści hotlinkowanych.

A pod adresem
https://fonts.google.com/analytics są pełne statystyki użycia krojów z Google Fonts. Rządzą: Roboto, Open Sans, Lato (polska produkcja!), Oswald. Myślę że te kroje można spokojnie hotlinkować do woli. :)



Ciekawostki z krainy HTML i CSS

Czy wiedziałeś że CSS może pobrać atrybut znacznika HTML?
<span data-cokolwiek=’tresc’>costam</span>
span::after {
content: attr(data-cokolwiek);
}

https://www.w3schools.com/cssref/func_attr.asp

Czy wiedziałeś że obrazem w <img> można maniulować niemal tak samo jak w background css’a?
<img src=”cos.jpg” style=”object-fit: cover;” alt=””>
img {
object-fit: fill | cover | contain | none | scale-down
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
(a backgroundy nie są indeksowane przez Google?)

Czy wiedziałeś, że samym CSSem możesz robić wykresy tortowe, za pomocą gradientu stożkowego?
.pie-chart {
width: 340px; height: 340px;

border-radius: 50%;
background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);
}

https://codepen.io/ananyaneogi/pen/mYmrMJ


Więcej być może wkrótce :)

Deep Image – inteligentne zwiększanie rozdzielczości zdjęć

Deep Image Beta to webaplikacja, umożliwiająca powiększanie rozdzielczości zdjęć z użyciem uczenia maszynowego (które jest nazywane sztuczną inteligencją). Dodatkowo usuwa artefakty JPEG. Usuwania artefaktów nie testowałem, ale powiększanie rozdzielczości naprawdę nieźle działa. Warto znać.

The Bézier Game – bądź mistrzem graficznego pióra!

Kolejna gra dla grafików: Tym razem musimy prowadzić linię po ścieżce, używając narzędzia „pióro” które prowadzi krzywe Beziera. Mamy do dyspozycji ograniczoną ilość punktów kotwiczących. Liczy się precyzja i też myślenie. Gra jest momentami niełatwa. Ale bardzo wciąga. :)

bezier.method.ac