Wydusiłeś kiedyś wszystkie informacje z CSS, na tyle, że zabrakło kolejnej ramki do elementu na stronie? Chciałoby się rzec: The border is not enough. Jeśli tak się stało, to dziś mam dla Ciebie tajną misję polegającą na znalezieniu dwóch nowych agentów udających border. Border już poznałeś. Współpracuje blisko z naszym elementem.
A jacy są pozostali dwaj?
Chyba zetknąłeś się Czytelniku z problemem uwzględniania dni świątecznych w systemach zależnych od czasu/daty. Jeśli nie, to się zetkniesz, a dziś zapraszam Cię na skosztowanie tego co może Ci się przydać.
Zaczniemy od wygenerowania danych dotyczących stałych świąt. Użyjemy do tego następującego zapytania (numer 1):
SELECT CONCAT(rok,dm) AS data
FROM
(SELECT '-01-01' AS dm UNION ALL SELECT '-01-06' UNION ALL SELECT '-05-01' UNION ALL SELECT '-05-03' UNION ALL SELECT '-08-15' UNION ALL SELECT '-11-01' UNION ALL SELECT '-11-11' UNION ALL SELECT '-12-25' UNION ALL SELECT '-12-26') AS dni,
(SELECT 2018 AS rok) AS lata
Utworzyliśmy tu zapytanie korzystające z wyniku iloczynu karezjańskiego (każdy z każdym) dwóch podzapytań. Jednym zapytaniem generujemy dni i miesiące Świąt, drugim rok. W tym przypadku rok ustaliliśmy na stałe, choć można użyć wyrażenia: YEAR(CURDATE()). Jeśli zapytanie będzie wybierać kilka lat (poprzez UNION ALL), wtedy wynik zapytania wygeneruje dni świąteczne dla tych kilku lat.
Od zarania dziejów programiści mierzyli się z problemem wyrównywania wysokości kolumn. Jedni stosowali prastare metody związane ze znacznikiem TABLE, inni po wynalezieniu koła zaczęli stosować JavaScript.
My jednak dziś przyspieszymy ewolucję i poznamy: Pseudotabelusa, Flexiteka oraz Homo-Gridiensa.
Pracując z elementem CANVAS spotykam się często z dwoma zagadnieniami: pobrania koloru piksela i kreślenia piksela. Jeśli chodzi stawianie punktu, to zazwyczaj spotykamy się z następującą metodą:
var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
ctx.fillRect(100, 100, 1, 1);
Z zmiennej ctx mamy obiekt RenderingContext pozwalający na dostęp przez dwie współrzędne (stąd parametr '2d'). Punkt stawiamy poprzez nakreślenie wypełnionego prostokąta o wymiarach 1x1 (parametr 3 i 4) na współrzędnych 100,100 (parametr 1 i 2). Wcześniej ustawiliśmy kolor czerwony dla wypełnienia. Domyślny kolor wypełnienia to czarny, a domyślny kolor tła CANVAS to biały. I ta metoda oczywiście się sprawdza, ale niekoniecznie przy dynamicznych efektach na CANVAS, kiedy potrzebujemy postawić tych punktów tysiące lub dziesiątki tysięcy.
Jak być szybszym?
Jeśli jako dziecko nie poznałeś smaku (a właściwie wyglądu) nowego kolorowego telewizora w Twoim domu, to spróbuję Ci go dziś przybliżyć. Przyblizyć teoretycznie i jeszcze bardziej wizualnie.
Jak zapewne wiesz, kolor na ekranie urządzenia, które teraz używasz powstaje z połączenia trzech barw: czerwonej, zielonej i niebieskiej (RGB). W zależności od natężenia każdej ze składowej ich połączenie tworzy inny kolor. Tyle, że ten kolor jest złudny, bo tworzą go trzy elementy (plamki) reprezentujące każdą ze składowych. Plamki są na tyle blisko, że ich nie zauważasz. Kiedy świecą mocno wszystkie trzy, Ty widzisz jeden punkt w kolorze białym. Skoro trzy plamki tworzą piksel, to każdy piksel zmieńmy w plamkę, a ich potrójna grupa utworzy nasz nowy, duży piksel. Każdy z dotychczasowych pikseli będzie reprezentował inną składową. Pozostaje tylko wybrać w jakim układzie będą reprezentować duży piksel.
Przychodzą mi do głowy trzy układy.
Arcus tangens, to nie straszliwy władca Gór Wschodnioserbskich. Jest to jedna z funkcji cyklometrycznych, które stanowią grupę funkcji odwrotnych do funkcji trygonometrycznych. Skoro istnieje tangens, to arcus tangens jest jego "złym" bliźniakiem. "Zły", bo właśnie nie jest taki straszny jak go malują, a przy jego pomocy można malować fajniejsze rzeczy niż z pomocą tangensa.
Tangens przyjmując za argument kąt zwraca nam pewną wartość, a arcus tangens jako, że jest "odwrotny", zwraca kąt (w radianach) dla pewnej wartości. I tu się zaczyna jego urok.