Odnajdź swoją twarz

Ostatnio modne są wszelkie serwisy analizujące/generujące dane graficzne z użyciem AI/uczenia maszynowego. Modne być może dlatego że w ogóle stały się możliwe. Doszliśmy już do takiego poziomu rozwoju możliwości obliczeniowych, że potrafimy w bardzo różnorodny i warygodny jednocześnie sposób, modyfikować grafiki. Następnym krokiem są mateiały video (już się to zaczyna). A co dalej?

Jedną z takich appek jest PimEyes. Ogólnie jest to silnik skanujący Internet (w przede wszystkim serwisy społecznościowe i składnice zdjęć) w poszukiwaniu danej twarzy. Działa nieźle. Zastosowanie: głównie odnajdywanie nieautoryzowanych użyć zdjęć. Ale być może niedługo będzie można zaprząc genetykę i np. odnaleźć zaginioną rodzinę? W każdym razie ciekawa rzecz, na pewno zasługująca na tą wzmiankę.

Klikalne mapy w CSSie

(no, js też jest potrzebny)
Jakiś czas temu znalazłem bardzo przydatną rzecz – plugin/skrypt z mapami (w różnych rozmiarach i kolorystykach) z wybieralnymi województwami (dla Polski) lub innymi regionami (dla innych krajów Europy). Fajna rzecz, a po podaniu imienia, nazwiska i e-maila – darmowa. I można stosować w projektach komercyjnych!
cssmapsplugin.com

Kolorowanie zdjęć po rosyjsku

Już kiedyś pisałem o automatycznym kolorowaniu zdjęć.

Od jakiegoś czasu serwis mail.ru oferuje usługę on-line szybkiego kolorowania. Przy okazji poprawia najbardziej widoczne usterki na zdjęciach. Działa to całkiem dobrze, ale kolory nadal się trochę „rozmywają”. Jednak jest to świetna baza do dokładnego, ręcznego kolorowania.
Usługa jest tutaj: https://9may.mail.ru/restoration/?lang=en

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 :)