Tag: rozwiązania

Ł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ć.

Darmowy generator wykresów

Quickchart.io to rewelacyjny system łatwego generowania wykresów w czasie rzeczywistym, poprzez zmianę parametrów w nazwie obrazka wykresu.

Rewelacyjnie to działa. Podajesz tytuły, wartości, typ wykresu, kolory, skale – po prostu wszystko. I aby przyspieszyć cały proces – możesz edytować kod wprost pod powyższym linkiem, a potem wkleić na swoją stronę.

Proste, użyteczne, wygodne. Takich narzędzi szukamy. :)

Postarzanie zdjęć przez Javascript

W dzisiejszych czasach możliwości CSS, js, samych przeglądarek i związanych z nimi dodatków – są niemal nieograniczone. Można wykonać wszystko. Kwestia poświęcenia czasu i zaprogramowania rozwiązania… albo: Odnalezienia gotowego rozwiązania w necie. Bowiem większość rzeczy, które chcesz zrobić – zostało już zrobione i wystarczy dotrzeć do takiego rozwiązania.

Tak też było ze zdjęciami, które Klient chciał mieć postarzone, i to w jednym i tym samym stylu. Mogłem zrobić makro w Photoshopie, ale po co, skoro znalazłem VintageJS – skrypt do modyfikacji zdjęć w locie.

Dostępny dla jQ, Angulara i standalone. Mnóstwo fajnych opcji, można się wtopić w zabawę na długie godziny. Możemy edytować jaskrawość, kontrast, winietę, oświetlenie, kolory (nasycenie, nakładanie, parametry rgb), szum, sepię, ramkę (różnego rodzaju). To dużo opcji. Ale są też fajne gotowce, żeby na szybko coś ogarnąć. Polecam, działa świetnie.

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.