Fontjoy

Aaaaby szybko dopasować fonty na nową stronę, bez żmudnego, wielogodzinnego wyszukiwania i spasowywania, a potem zmieniania, po coś tam nie pasuje.

Wchodzę na fontjoy i klikam Generate. Klikam, klikam, potem ustawiam parametry (między innymi różnorodność czcionek dla tytułu, podtytułu i tekstu) i klikam jeszcze kilka razy. Po chwili mam – idealną parę (lub trójcę) czcionek dla nowej strony. Wszystko oczywiście z nieocenionego Google Fonts. I jest git? Jest git. :)

Automatyczne kolorowanie zdjęć dzięki AI

Kiedyś już pisałem o kolorowaniu zdjęć specjalnym algorytmem (o tutaj), jednak tym razem to co innego. Tym razem wszystko dzieje się automagicznie, automatycznie, w oparciu o sztuczną inteligencję (a raczej o uczenie maszynowe, bo prawdziwa AI jeszcze nie istnieje).

Chodzi o colorize-it.com – stronę na której można automatycznie pokolorować zdjęcie. Na przykład takie jak zdjęcie wyróżniające tego posta. Efekty może i są niezłe, ale niezadowalające dla odbiorcy, szczególnie przy zdjęciach które zawierają obszary o nieoczywistych kolorach, a do tego te obszary przenikają się między sobą:

Jednak po kilku drobnych korektach w Photoshopie – algorytm może być bardzo pomocny. Aczkolwiek – jak dla mnie jest to nadal raczej ciekawostka.

BTW. ostatnio obiło mi się o uszy że Google Photos ma mieć za niedługo opcję automatycznego kolorowania. Ciekawe jak się sprawdzi – w końcu GP ma potężną próbkę zdjęć do uczenia maszynowego…

Nietypowa inspiracja

Deadline się zbliża. Trzeba zacząć coś robić, coś projektować. Klient jest fajny, chcesz mu zrobić coś z efektem wow (a przynajmniej żeby to on powiedział ‚wow’). Przeglądasz strony konkurencji i templatki z templatemonstera. Wszystkie są ładne, wszystkie ugłaskane, każdy piksel na swoim miejscu, mniam. Tylko że wszystkie… nudne.

A Ty potrzebujesz czegoś nietypowego, czegoś nowego, świeżego powiewu.

Co wtedy?

Wtedy wchodzisz na theuselessweb.com, klikasz różowy przycisk i patrzysz na te dziwadła, i resetujesz mózg. I znowu klikasz, i klikasz, i klikasz. Aż po 37 kliknięciu w różowy przycisk – mówisz „wow”.

Masz pomysł, robisz Klientowi genialną wow-ową stronę, kosisz hajs, profity i szacun na dzielni, dostajesz następne zlecenia. I następne, i następne, coraz większe.

I klikasz, klikasz ten różowy przycisk.

Tak to działa.

Clippy – narzędzie do tworzenia kształtów

Clippy to wdzięczna nazwa dla bardzo przydatnego narzędzia, które jest kreatorem wizualnym kształtów/masek generującym za pomocą polecenia css clip-path (i odpowiednich prefixów) kod kształtu. Potrzebne, używane, zapisane w ulubionych.

Wycinanie tła

Jakiś czas temu opisywałem już webappkę Clippingmagic, która wycina tło.
Ta opisywana teraz webappka – Remove.bg – jest jednak o trochę lepsza, choć nie idealna (gdy tło jest różnorodne i kolorystycznie zbliżone do obiektu wycinanego – raczej nie działa).

Nic nie zastąpi ręcznego szparowania w fotoszkopie, ale zawsze warto adres remove.bg znać. Może kiedyś się do czegoś przyda…

Fancybox pozamiatał wszystkie lightboxy

To zdarzyło się już dawno temu, ale pomyślałem że warto to mieć na blogu. Otóż jakiś (długi) czas temu porównałem kilka óczesnych rozwiązań overlayerowych dla stron www.

Dzisiaj król jest tylko jeden, a jego nazwa to Fancybox. Ten magiczny skrypcik potrafi w zasadzie wszystko co mógłby potrafić. Jest świetny.

Jak najszybciej znaleźć ikonę? Nabazgrać!

Gugiel wybuścił dziś nową apkę webową – autodraw. Pomysł jest prosty – algorytm bada co bazgrzesz, zgaduje ostateczny kształt i czasie rzeczywistym proponuje gotowe ikony – ładne i równe szkice zamiast Twojego bazgroła. Działa to bardzo dobrze.

Ale ja widzę genialne zastosowanie dla grafików/projektantów. Ile razy traciłeś cenne godziny minuty żeby odnaleźć ikonkę? Wpisujesz w wyszukiwarkę ikon (tą czy inną) tagi, synonimy szukanego słowa itp. To trwa. A tak – Google Autodraw, maz-maz – i odnalezione!
Googlu, kolejny raz przedłużasz mi życie! ;)

Sposób na testowanie mobilnych www

browserstackTechnologie i techniki tworzenia mobilnych stron, mimo że są i działają, charakteryzują się jeszcze niedojrzałością i siermiężnością. No bo jak napisać złożoną stronę która będzie wyświetlała w 100% (i ani o 1% mniej) szerokości absolutnie na każdym urządzeniu mobilnym? Rzeź, przynajmniej na razie. Przeliczanie rozdzielczości natywnych, symulowanych, faktycznych i bóg wie jakich jeszcze, na niemal każdym urządzeniu działa inaczej. A do tego ta przeglądarka obsługuje viewport, a tamta nie, a jeszcze ina – częściowo i nie zawsze. Temat jest do ogarnięcia, ale pochłania mnóstwo czasu i pracy.

Najgorzej jest z testowaniem na różnych urządzeniach. Byłoby dobrze mieć pod ręką wszystkie typowe fizyczne sprzęty, ale to ze względów głównie finansowych – niemożliwe. Z pomocą przychodzą nam więc aplikacje/emulatory i symulatory. Nie dość dokładne -prawie wszystkie. Prawie – bo jest wyjątek. BrowserStack oferuje testowanie działania i wygladu stron na wielu popularnych sprzętach z iOSem i Androidem. Usługa jest płatna, ale (na ten moment) można za darmo testować działanie (na dokładnym, natywnym emulatorze) przez kilkadziesiąt minut oraz wykonać kilkadziesiąt screenshotów.

Każdy mobilny webdeveloper powinien znać to narzędzie. ;) A może są jakieś inne, podobne, o których nie wiem?

Isotope

isotopeŚwietny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).