Michał Środek » Inne

Własna skórka dla Chrome

Michał Środek — Sun, 18 Jul 2010 12:10:25 +0000

Wczoraj przypadkowo trafiłem na stronę udostępniającą motywy dla przeglądarki ze stajni Google. Postanowiłem, że sprawdzę czym to się je i zostałem miło zaskoczony — cały proces jest bardzo, bardzo prosty. Wystarczy stworzyć kilka grafik oraz plik manifest.json zawierający ustawienia kolorów. Niestety ilość dostępnych opcji jest bardzo ograniczona i z niecierpliwością czekam na jakieś bogatsze możliwości w przyszłych wersjach chrome.

Paczkę wrzuciłem na serwer. Wystarczy kliknąć tutaj

Oto jak wygląda Chromium z moją skórką.

Jako główny kolor wybrałem zieleń ponieważ uspokaja on oczy. Całość urozmaiciłem ivadersami oraz kotem grającym na klawiszach. Ciężko było przygotować grafikę(np. invadersów musiałem ręcznie rysować), ale mam nadzieję, że efekt jest ciekawy .

openSUSE 11.3

Michał Środek — Sat, 17 Jul 2010 17:09:04 +0000

Dzisiaj spędziłem trochę czasu na porządkowanie dysku twardego. Usunąłem praktycznie wszystko, a backup nagrałem na płytę. Przeinstalowałem system ponieważ poprzednia wersja strasznie wolno działała. Co nowego w openSUSE 11.3? Przede wszystkim zwiększenie prędkości. Całe KDE pracuję troszkę szybciej i stabilniej(ale to może być spowodowane wcześniejszymi paczkami z repozytorium Factory). Przyspieszył m.in. Amarok oraz Firefox. Flash niestety wciąż działa niezadowalająco. Zmienił się oczywiście kernel na nowszy, a wraz z nim wolne sterowniki do kart graficznych. Zmienie uległa samba oraz kilka innych rzeczy, dodano również nowy system plików Btrfs. Dla użytkowników Wine ciekawą informacją jest nowy Xorg(1.8.0). Nie jestem pewien czy ten system idzie w dobrym kierunku(prędkość pozostawia wiele do życzenia) jednak konfiguracja wszystkiego to jedynie kilka kliknięć i właśnie za to go lubię .

Tuż po instalacji dointalowałem NetBeans 6.9 oraz skonfigurowałem Apache/MySQL, PHP. Pierwsze co mi później przyszło na myśl, to dopisanie obsługi PDO oraz Doctrine w moim Frameworku. Środowisko mam już przygotowane, więc czas się wziąć do pracy…

Prokrastynacja

Michał Środek — Wed, 07 Jul 2010 11:28:34 +0000

Prokrastynacja lub zwlekanie (z łac. procrastinatio – odroczenie, zwłoka) – w psychologii: patologiczna tendencja do nieustannego przekładania pewnych czynności na później, ujawniającą się w różnych dziedzinach życia. Bywa żartobliwie nazywana „syndromem studenta“.
Prokrastynator ma problemy z zabraniem się do pracy i odkłada jej wykonanie, zwłaszcza wtedy, gdy nie widzi natychmiastowych efektów.

Źródło: http://pl.wikipedia.org/wiki/Prokrastynacja

Tak, cierpię na to zaburzenie. I mój przypadek jest dosyć ciekawy. Pracuję intensywnie ale tuż przed ukończeniem porzucam projekt i rozpoczynam kolejny. Oczywiście staram się walczyć z moim lenistwem i dzisiaj chciałbym zaprezentować mój nowy sposób na zmuszanie się do pracy i zwiększanie motywacji.

Pierwszym krokiem jest stworzenie pliku index.html, który będzie zawierał tekst zachęcający nas do pracy.

 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pl-PL"> 
  <head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	<title> Pracuj, pracuj...</title> 
  </head>
  <body>
	<div style="font-family:helvetica; width:600px; margin:auto; background:#eee; padding:20px; border:1px solid #ccc;">
		<h1>WEŹ SIĘ DO ROBOTY!</h1>
		<p>Lista rzeczy do zrobienia</p>
		<ol>
		    <li>Dokumentacja</li>
		    <li>Kolejna część artykułu o tankach</li>
		    <li>Spisanie tabulatur</li>
		    <li>Pisanie książki</li>
		</ol>
		<p>Zarobisz dużo pieniędzy i będziesz bogaty.</p>
		<h2>JEŻELI NIE WYKONUJESZ PUNKTU 3. NIE IDŹ PO GITARĘ! ZOSTAŃ TAM GDZIE JESTEŚ!</h2>
	</div>
  </body>
</html>

Teraz przechodzimy do edycji pliku /etc/hosts

sudo mcedit /etc/hosts

Dopisujemy kilka adresów stron internetowych, na oglądanie których tracimy najwięcej czasu.

127.0.0.1        facebook.com
127.0.0.1        wykop.pl
127.0.0.1        youtube.com
127.0.0.1        demotywatory.pl
127.0.0.1        nk.pl

Przekierowanie gotowe. Możemy wziąć się do pracy.

Informacja dla użytkowników systemów z rodziny Windows. Jeżeli dobrze pamiętam, plik hosts znajduje się w C:\windows\system32, a przynajmniej tam się znajdował, gdy ja korzystałem z Microsoft Windows XP.

Aby rozwiać wszelkie wątpliwości — pisanie tego artykułu to również forma odwlekania mojej pracy .

Optymalizacja obiektu canvas

Michał Środek — Tue, 06 Jul 2010 18:32:03 +0000

Jak zapewne zauważyłeś podczas czytania mojego poprzedniego artykułu gra, którą tworzę działa troszkę wolno. Dzieje się tak dlatego, że mapa jest generowana od nowa w każdej klatce działania programu. Spróbujmy to zoptymalizować.

Zasada jest bardzo prosta. To co możemy generować raz, generujemy tylko raz. Następnie zapisujemy wynik do oddzielnego obiektu

Na potrzeby mojego przykładu stworzyłem dynamicznie dwa nowe obiekty canvas, jeden przechowujący wygenerowaną mapę, drugi czołg(obracanie obrazków jest bardzo czasochłonne).

Uporządkowałem troszkę kod umieszczając wszelkie dane czołgu do klasy GameTank

var GameTank = {
	x:0,
	y:480,
	canvas: null,
	ctx: null,
	direction: 1,  // 0= LEFT 1 =UP, 2 = RIGHT, 3=DOWN
 
	changeDirection: function(newDirection)
	{
		if(newDirection!=GameTank.direction)
		{
			GameTank.direction = newDirection;
 
			GameTank.ctx.clearRect(0,0,32,32);
			GameTank.ctx.save();
			switch(GameTank.direction)
			{
				case 2:
					GameTank.ctx.rotate(90 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,0,-32);
					break;
				case 3:
					GameTank.ctx.rotate(180 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,-32,-32);
					break;
				case 0:
					GameTank.ctx.rotate(270 * Math.PI / 180);
					GameTank.ctx.drawImage(GameMain.img.tank,-32,0);
					break;
				default:
					GameTank.ctx.drawImage(GameMain.img.tank,0,0);
			}
			GameTank.ctx.restore();
		}
	},
	init: function()
	{
		this.canvas = document.createElement('canvas');
 
		this.canvas.width = 32; 
		this.canvas.height = 32; 
 
		this.ctx = this.canvas.getContext('2d');
		this.ctx.drawImage(GameMain.img.tank,0,0);
	}
};

W analogiczny sposób tworzony jest obiekt dla mapy

var GameBoard = {
	canvas: null,
	ctx: null,
	TEXTURE_ID: {ICE: 1, BRICK: 2, WATER: 3}, 
	textures: [null, 'images/ice.png', 'images/brick.png', 'images/water.png'],
 
	board:[
		[1,1,1,1,1,1,2,2,2,2,1,1,1,1,1,1],
		[1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1],
		[1,1,2,2,2,2,2,2,2,2,2,2,2,2,1,1],
		[1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
		[1,2,2,1,1,2,2,2,2,2,2,1,1,2,2,1],
		[2,2,2,1,3,2,2,2,2,2,2,1,3,2,2,2],
		[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
		[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
		[2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,2],
		[0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0],
		[0,2,2,2,1,2,2,2,2,2,2,1,2,2,2,0],
		[0,2,2,2,2,1,1,1,1,1,1,2,2,2,2,0],
		[0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0],
		[0,0,0,2,2,2,2,2,2,2,2,2,2,0,0,0],
		[0,0,0,0,0,0,2,2,2,2,0,0,0,0,0,0],
		[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
		],
	drawBoard: function() {
 			this.ctx.clearRect(0,0,512,512);
 
			for(var y=0; y<16; y++)
			{
				for(var x=0; x<16; x++)
				{
					if(this.board[y][x]>0)
					{
						this.ctx.save();
						this.ctx.fillStyle = this.textures[this.board[y][x]];
						this.ctx.fillRect(x*32,y*32,32,32);
						this.ctx.restore();
					}
				}
			}
	},
	preloadTextures: function(i){
		var img = new Image();
		img.src = this.textures[i];
		img.onload = function() {
 
			GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
			if(GameBoard.textures[i+1])
				GameBoard.preloadTextures(i+1);
			else{
				GameBoard.drawBoard();
				GameTank.init();
				window.setInterval(GameMain.mainLoop,10);
			}
		}
	},
	init: function (){
		this.canvas = document.createElement('canvas');
		this.canvas.width = 512; 
		this.canvas.height = 512; 
 
		this.ctx = this.canvas.getContext('2d');
 
		this.preloadTextures(1);
	}
};

Główna klasa gry jedynie składa obraz ze wszystkich elementów

var GameMain = {
	canvas: null,
	ctx: null,
	img: {},
	mainLoop: function(){
 			GameMain.ctx.clearRect(0,0,512,512);
			GameMain.ctx.drawImage(GameBoard.canvas, 0, 0,512,512,0,0,512,512);
 
			if(keyHandler.isHolded(37)) // LEFT
			{
				GameTank.changeDirection(0);
				if(GameTank.x>0)
					GameTank.x-=1;
			}
			else if(keyHandler.isHolded(38)) // UP
			{
				GameTank.changeDirection(1);
				if(GameTank.y>0)
					GameTank.y-=1;
			}
			else if(keyHandler.isHolded(39)) // RIGHT
			{
				GameTank.changeDirection(2);
 
				if(GameTank.x<480)
					GameTank.x+=1;
			}
			else if(keyHandler.isHolded(40)) // DOWN
			{
				GameTank.changeDirection(3);
				if(GameTank.y<480)
					GameTank.y+=1;
			}
 
			GameMain.ctx.drawImage(GameTank.canvas, 0, 0,32,32,GameTank.x,GameTank.y,32,32);
 			FrameCounter.updateFPS();
	},
 
	init: function(){
		this.canvas = document.getElementById('game');
		if (this.canvas.getContext)
			this.ctx = this.canvas.getContext("2d");
 
		this.img.tank = new Image();
		this.img.tank.src = 'images/btank.png';
		this.img.tank.onload = function(){
			GameBoard.init();
		}
		document.addEventListener('keydown', keyHandler.keyDown, false);
		document.addEventListener('keyup', keyHandler.keyUp, false);
	}
}

Kolejną, obok generowania grafiki, czasochłonną operacją jest liczenie czasu. Spróbujmy ograniczyć wywoływanie pewnych funkcji w liczniku FPS. Czas liczył będę co 10 klatek.

var FrameCounter = {
	x: 0,
	lastFrameTime: new Date().getTime(),
	updateFPS: function(){
		if(this.x==10)
		{
			var currentTime = new Date().getTime();
 
			document.getElementById('fps').innerHTML = Math.floor(10000/(currentTime-this.lastFrameTime),2)+'fps';
			this.lastFrameTime = currentTime;
			this.x=0;
		}
		else
			this.x++
	}
};

Poza przyspieszeniem gry zauważymy również zmiany w działaniu samego licznika. Jego odświeżanie będzie rzadsze i jednocześnie przyjemniejsze dla ludzkiego oka.

Technika, którą tutaj pokazałem bardzo przypomina tą ze zwykłych gier DHTML budowanych w oparciu o odpowiednio pozycjonowane znaczniki

. Dlaczego nie robię tak samo w przypadku znaczników

Zmiany na blogu

Michał Środek — Sun, 21 Feb 2010 12:33:25 +0000

Dzisiaj w nocy postanowiłem poprawić kilka błędów, na które skarżyli się czytelnicy. Przede wszystkim zmieniłem krój na Helvetica. Stary dołączany do strony ważył 640kb, a tekst był podobno nieczytelny pod systemami z rodziny Windows. Zmieniłem też sposób działania menu na górze strony. Teraz obrazki widoczne po najechaniu są wczytywane razem z pozostałymi więc zniknął efekt znikania grafiki i oczekiwania na pobranie się nowej(szczególnie to było widoczne na maszynach ze słabym łączem internetowym). Poprawiłem rozmieszczanie komentarzy, porzuciłem miary w pikselach(teraz używam em) oraz odświeżyłem kod CSS. Usunąłem także kropki wokół linków w Firefoxie. Strona waży około 650kb mniej niż wcześniej. Również ilość wczytywanych plików zmalała o 5 więc całość powinna działać troszkę szybciej.

Ostatnio cierpię na brak pieniędzy, a chciałem uruchomić nowy projekt. Wiąże się to jednak z wynajęciem grafika więc dodałem przycisk „Wesprzyj blog“ widoczny po prawej stronie. Jeśli sądzisz, że moje biblioteki są przydatne, to co piszę ma sens a twoja wiedza się dzięki moim artykułom poszerza kliknij. Nie oczekuję dużych wpłat. 1zł to też sporo. Postaram się zrobić pasek postępu pokazujący ile pieniędzy zebrałem, a ile jeszcze potrzebuję do realizacji pewnych rzeczy. Dzisiaj przysiądę jeszcze do CSS3. Pomyślę w jaki sposób mógłbym urozmaicić stronę na przeglądarkach obsługujących animacje CSS(ewentualnie użyję jQuery).

I na koniec pytanie dotyczące treści blogu. Kontynuować temat bezpieczeństwa, czy napisać coś na temat CSS/SVG/JS? Pisać na temat nowych rzeczy dostępnych w CSS3 czy opisywać dobre zwyczaje tworzenia styli. Czekam na wasze opinie .

Nowy blog o CSS3

Michał Środek — Tue, 09 Feb 2010 22:33:53 +0000

Cieszy mnie fakt, iż coraz większa grupa twórców stron internetowych dostrzega piękno nowych techologii. Podczas mojej nieobecności(a wielu z was zapewne ją zauważyło) odnalazłem sporo interesującego materiału, przykładów i porad, którymi postaram się niebawem podzielić. Teraz jednak chciałbym przedstawić pewną stronę — http://hs2.pl. Uruchomił ją dzisiaj jeden z moich kolegów — Oskar Wójcicki. Planuje opisywać porady dotyczące CSS3 i PHP co bardzo mnie cieszy(chętnie sam się czegoś nowego nauczę). Serdecznie zapraszam.

Przy okazji chciałbym mu życzyć Wszystkiego najlepszego — dziś jego urodziny.

Gdy e-maili jest za dużo…

Michał Środek — Fri, 20 Nov 2009 12:06:46 +0000

Dzisiaj troszkę nietechniczne. Wpomnę conieco o netykiecie w adresach e-mail. Otrzymałem ostatnio informację od jednej z firm hostujących strony dotyczącą zmian w obsłudze portów pocztowych przez TP S.A. Wszystko było w porządku gdyby nie fakt, że nie jestem już klientem tej firmy.

Wysłałem więc krótką wiadomość:

Witam Państwa!

Nie wiem dlaczego otrzymuję e-maile związane z działaniem serwera(od
ponad 2 lat pracuję na własnym serwerze i nie jestem już Państwa
klientem), jednak cieszę się, że biznes jest wciąż opłacalny,
szczególnie, że wykazują się Państwo ogromnym szacunkiem do
użytkownika(w moim przypadku było to wysłanie backupa już po
zablokowaniu konta z powodu jego nieopłacenia).

W każdym razie proszę Państa o usunięcie mnie ze swojej bazy e-mailowej.

I jeszcze pytanie na koniec. Czy są w Państwa w ofercie serwery
dedykowane? Niedługo będę musiał skorzystać z takiej oferty i
chciałbym rozejrzeć się wśród rozsądnych firm. U Państwa na stronie
niestety nie widzę o nich żadnych informacji.

Pozdrawiam serdecznie

Michał Środek

Spodziewając się fajnego, oficjalnego e-maila otwieram dziś skrzynkę pocztową. Otrzymałem taki o to e-mail(adresy są zmienione):

konto usuniete
co do serwerow dedykowanych zapraszam np. na www.example.com

—

Pozdrawiam

Administracja example.com

Sądzę iż, natłok e-maili zdemotywował pracownika obsługującego BOK. No cóż, być może następnym razem ktoś napisze do mnie „proszę Pana“…

Witaj, świecie!

Michał Środek — Sat, 19 Sep 2009 07:40:48 +0000

To już drugi raz, gdy reaktywuję mój blog. Ostatnia zmiana charakteru artykułów(przejście z artykułów technicznych na notki osobiste) nie przyjęła się. Blog stracił czytelników. Teraz planuję to zmienić. Więcej uwagi poświęcę nowoczesnym technologiom takim jak CSS3, zastosowania Canvas oraz grafik SVG, standardom W3C. Poświęcę również kilka artykułów dla JQuery oraz ogólnie JavaScriptu. Oczywiście wspomnę od czasu do czasu o moich projektach, zaprezentuję również gotowe rozwiązania z ich użyciem. W ciagu kilku dni umieszczę paczkę z najnowszą wersją mojego frameworka. W wolnym czasie stworzę do niego, nową dokumentację, która będzie dostępna bezpośrednio na tej stronie. Podobnie postąpię z innymi projektami. Pytanie jednak do was: które z nich są najciekawsze i zasługują na większą uwagę?

Jak zapewne już zauwazyłeś nowa wersja blogu jest oparta o system WordPress. Nie wiem czy to dobry wybór — wydajność pozostawia wiele do życzenia(dla porównania, mój sklep internetowy generuje się 20x szybciej, a również zawiera widżety, skórki itp.). Czyżby wordpress nie posiadał cache’u? Powoli pewne elementy będę zamieniał na własne.

I na koniec trochę historii:

Blog uruchomiłem po raz pierwszy 5 października 2006 roku. Napisałem łącznie około 30–35 artykułów. Nie jest to zadawalający wynik — muszę to zmienić. Powinienem przerzucić artykuły ze starej wersji blogu jednak postanowiłem, że rozpocznę z czystym kontem. Życzcie mi szczęścia .

Stara wersja będzie dalej aktywna przez pewien okres czasu pod adresem http://michal.mohebo.pl