Tag: html

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

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

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

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?

Obrazek w kodzie strony

Base64 to sposób kodowania danych do ciągu znaków. Używany przez wiele portali do kompresowania/ukrywania danych lub części kodu, jednak jego najfajniejsze i najważniejsze zastosowanie jest inne. Można kodować pliki graficzne. Całe. I umieszczać bezpośrednio w html, jako kod strony. Zastosowane dla ikon i innych małych elementów strony, takie rozwiązanie znakomicie przyspiesza wczytywanie się całości (ładuje się z htmlem, jednocześnie nie blokując kanału przeglądarki). Warto używać, acz zważać trzeba na umiar – ładowanie wszystkich obrazków tym sposobem raczej stronkę zamuli, niż przyspieszy.

Czym to ugryźć? Na przykład tym: base64-image.de. Prosty enkoder, działa wyśmienicie. Takie pchełki fajnie przyspieszają pracę nad stroną.

Pokaz animacji CSS

Wiem że zaczynam być nudny w tym temacie, ale to trzeba zobaczyć, aby wyobrazić sobie możliwości. Google opracował prostą prezentację ukazującą wszystkie podstawowe możliwości animacji i ruchu realizowanego za pomocą HTML5, CSS3 (no i JS, SVG, WebGL). I (prawie) wszystko staje się możliwe… tylko czekać na jakiś profesjonalny edytor takich animacji…

Sprawdzacz headerów

Kolejna pchełka: web-sniffer.net do narzędzie do sprawdzania i testowania informacji nagłówkowych wysyłanych przez podstronę przed jej wyświetleniem. Serwis umożliwia również podgląd interpretacji takich headerów przez różne silniki/przeglądarki (i boty), i w zależności od używanej wersji protokołu HTTP i typu żądania (get, post, …).

Taki web-sniffer może się komuś przydać… :)

CSS Inline Styler

Kiedyś takiego narzędzia szukałem, ale odniosłem porażkę i straciłem godzinę na konwersję ręczną.

Dzisiaj McBarlo podrzucił mi linka: inlinestyler.torchboxapps.com . Jest to pchełka, konwertująca zewnętrzne/osobno zdefiniowane definicje stylów – do stylów opisanych w atrybucie style, czyli do stylów „inline”. Właściwie trudno napisać coś więcej, bo to taki przydaś. :)