Website Design & Development Secrets by Savitra Denusson http://www.savitra.org web site design :: web site development Tue, 27 Dec 2011 14:51:43 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Security Basics: Choosing the Right Password http://www.savitra.org/security-basics-choosing-the-right-password/ http://www.savitra.org/security-basics-choosing-the-right-password/#comments Tue, 08 Nov 2011 14:31:47 +0000 aliax http://www.savitra.org/?p=54 Analytics say in 65% cases hackers don’t need to use bruteforce attacks, because users use too simple passwords that are easy to guess. Never, never ever use any of the passwords in this list:

Alpha

Weak Passwords

A

 a, A.M.I, A52896nG93096a, aaa, aammii, abc, abcd, academia, academic, accept, access, ACCESS, account, accounting, action, adam, ADAMS, adfexc, adm, admin, ADMIN, Admin, admin2, administrator, Administrator, adminttd, ADMN, admn, adrian, adrianna, adtran, adult, Advance, ADVMAIL, aerobics, alfarome, ALFAROME, ALLIN1, ALLIN1MAIL, ALLINONE, aLLy, ALLy, alpha, AM, AMI, AMI!SW, AMI.KEY, AMI.KEZ, AMI?SW, AMI_SW, AMI~, AMIAMI, AMIDECOD, amipswd, AMIPSWD, AMISETUP, anicust, anon, anonymous, any@, ANYCOM, AP2SVP, aPAf, APL2PP, APPLSYS, APPS, AQDEMO, AQUSER, ARCHIVIST, Asante, ascend, Ascend, asdf, asdfgh, at4400, attack, AURORA$ORB$UNAUTHENTICATED, AURORA@ORB@UNAUTHENTICATED, autocad, AUTOLOG1, Award, award, AWARD?SW, AWARD_SW, awkward

B

 BACKUP, BATCH, BATCH1, BATCH2, bbs, bciim, bciimpw, bcms, bcmspw, bcnas, bcnaspw, bell9, BIGO, bin, bintec, BIOS, BIOSPASS, biosstar, biostar, Biostar, BIOSTAR, BLAKE, blue, bluepw, boss, BRIDGE, browse, browsepw

C

 c, cablecom, cable-docsis, CAROLIAN, cascade, CATALOG, cc, CCC, ccrusr, CDEMO82, CDEMOCOR, CDEMORID, CDEMOUCB, central, CHANGE_ON_INSTALL, changeme, checkfs, checkfsys, checksys, CHEY_ARCHSVR, circ, cisco, Cisco router, CLARK, client, CLOTH, cmaker, CMSBATCH, CMSUSER, CNAS, COGNOS, Col2ogro2, comcomcom, COMPANY, Compaq, Compleri, computer, CONCAT, condo, CONDO, Congress, CONV, CPNUC, CPRM, cr0wmt 911, craft, craftpw, Crystal, CSPUSER, CTX_123, CTXDEMO, CTXSYS, cust, custpw, CVIEW

D

 d.e.b.u.g, d8on, daemon, Daewuu, Database, databse, DATAMOVE, Daytec, DBSNMP, DCL, DDIC, death, debug, DECMAIL, DECNET, default, DEFAULT, Dell, DEMO, demo, DEMO1, DEMO8, DEMO8, demos, deskalt, deskman, desknorm, deskres, DESQUETOP, dhs3mt, dhs3pms, diag, diamond, DIGITAL, DISC, disttech, D-Link, dn_04rjc, dni, DS, DSA

E

 EARLYWATCH, echo, EMP, enable, eng, engineer, enquiry, enquirypw, enter, ESSEX, EVENT, Ezsetup

F

 fal, FAX, fax, FAXUSER, FAXWORKS, FIELD, field, FIELD.SUPPORT, FINANCE, FND, foobar, friend, ftp

G

 g6PJ, games, ganteng, GATEWAY, GEN1, gen1, GEN2, gen2, glftpd, gnumpf, god, godblessyou, gonzo, gopher, GPLD, gropher, guessme, guest, GUEST, Guest, guest1, GUESTGUE, guestgue, GUESTGUEST

H

 h6BB, hacker, halt, HARRIS, hax0r, HELGA-S, HELLO, hello, HELP, help, HELPDESK, HEWITT RAND, hewlpack, HLT, home, Home, HOST, HP, hp, HPDESK, HPLASER, HPOFFICE, HPOFFICE DATA, HPONLY, HPP187, HPP187 SYS, HPP189, HPP196, HPWORD PUB, hydrasna

I

 I5rDv2b2JjA8Mm, ibm, IBM, ibmcel, ihavenopass, ILMI, inads, indspw, INFO, informix, INGRES, init, initpw, install, Internet, IntraStack, IntraSwitch, INTX3, INVALID, IPC, IS_$hostname, ITF3000, iwill

J

 j09F, j256, j262, j322, j64, JDE, Jetform, JONES

K

 kermit, kiddie, komprie, ksdjfg934t

L

 l2, l3, laflaf, lantronix, LASER, LASERWRITER, last, lesarotl, letacla, letmein, LIBRARY, lineprin, LINK, lkw peter, lkwpeter, LKWPETER, Lkwpeter, llatsni, locate, locatepw, login, looker, LOTUS, love, lp, lpadm, lpadmin, lucenttech1, lucenttech2, lynx

M

 MAIL, mail, MAILER, maint, maintain, maintpw, man, manager, Manager, MANAGER, MANAGER.SYS, Master, MASTER, masterkey, MBIU0, MBMANAGER, MBWATCH, mcp, MDSYS, me, merlin, mfd, MFG, MGR, MGR.SYS, MICRO, MILLER, mirc, mlusr, mMmM, MMO2, MODTEST, monitor, MOREAU, mountfs, mountfsys, mountsys, MPE, mtch, mtcl, MTYSYS, my_DEMARC, mypass, mypc

N

 n/a, naadmin, NAMES, ncrm, NETBASE, NETCON, NETFRAME, NetICs, netlink, netman, NETMGR, NETNONPRIV, NETOP, netopia, NETPRIV, netrangr, netscreen, NETSERVER, NETWORK, NEWINGRES, NEWS, news, NeXT, NF, NFI, NICONEX, nms, nmspw, nobody, noway, NONPRIV, ntacdmax, nuucp

O

 OCITEST, oem_temp,op, OP.OPERATOR, operator, OPERATOR, OPERVAX, oracle, ORDPLUGINS, ORDSYS, OUTLN, OutOfBox, owner

P

 PAPER, pass, PASS, Pass, passwd, Passwd, PASSWORD, password, Password, pat, patrick, PBX, pc, PCUSER, PDP11, PDP8, PFCUser, PHANTOM, phoenix, piranha, pmd, PO, PO8, poll, Polrty, POST, Posterie, postmast, POSTMASTER, postmaster, POWERCARTUSER, powerdown, PRIMARY, prime, primenet, primeos, primos, primos_cs, PRINT, PRINTER, PRIV, private, prost, PSEAdmin, public, PUBSUB, pw, pwd, pwp

Q

 q, Q54arwms, QDI, qpgmr, qsecofr, qserv, qsrvbas, qsvr, qsysopr, quser, qwer

R

 raidzone, rcust, rcustpw, RE, read, readonly, readwrite, REGO, REMOTE, replicator, REPORT, RJE, rje, RM, RMAIL, rmnetlm, RMUser1, ro, ROBELLE, ROOT, root, Root, ROOT500, ROUTER, router, RSBCMON, RSX, rw, rwa, rwmaint

S

 sa, SABRE, SAMPLE, san fran 8, SAP*, satan, SCOTT, script, scriptkiddie, SECDEMO, secoff, secofr, secret, secure, security, SECURITY, SER, sertafu, server, service, SERVICE, servlet, SETUP, setup, sex, shutdown, signa, SKY_FOX, sldkj754, smile, snake, SnuFG5, software, sp99dd, Spacve, spcl, speedxess, SPOOLMAN, spooml, star, STEEL, STUDENT, su, Super, super, SUPERVISOR, support, SUPPORT, supportpw, switch, SWITCHES_SW, Sxyz, SY_MB, sybase, sync, synnet, SYS, sys, sysadm, SYSADM, sysadmin, sysbin, SYSDBA, SYSLIB, syslib, SYSMAINT, SYSMAN, Sysop, system, SYSTEM, system_admin, SYSTEST, SYSTEST_CLIG, syxz, SZYX

T

 t0ch20x, t0ch88, TCH, teacher, tech, technolgi, tele, TELEDEMO, TELESUP, temp, temp1, TEST, test, testing, teX1, tiara, TIGER, tini, Tiny, tlah, topicalt, topicnorm, topicres, Toshiba, toshy99, tour, TRACE, TRACESRV, trancell, trouble, TSDEV, TSEUG, TSUSER, TTPTHA, tutor, TzqF

U

 uClinux, UETP, umountfs, umountfsys, umountsys, unix, User, user, USER, USER_TEMPLATE, USER0, USER1, USER2, USER3, USER4, USER5, USER6, USER7, USER8, USER9, USERP, uucp, uucpadm, uwontguessme

V

 VAX, VESOFT, Vextrex, VMS, VNC, VRR1

W

 WANGTEK, web, WebAdmin, WebBoard, webdb, weblogic, webmaster, win, WINDOWS_PASSTHRU, WINSABRE, winterm, wodj, WOOD, WORD, WP, wradmin, write, www

X

 xljlbj, XLSERVER, xo11nE, xp, xxx, xxxx, xxxxx, xxxxxx, xxxxxxx, xxxxxxxx, xxxxxxxxx, xyzall

Y

 YES, youwontguessme, yxcv

Z

 zbaaaca, Zenith, zeosx, zxcv

Numeric

 0, 1, 1.1, 2, 5, 7, 12, 30, 110, 111, 123, 1111, 1234, 2002, 2003, 2222, 2600, 8429, 12345, 54321, 111111, 121212, 123123, 123456, 166816, 256256, 654321, 1234567, 1322222, 7061992, 11111111, 12345678, 19920706, 22222222, 88888888, 123456789, 1. 1, 1234qwer, 123abc, 123asd, 123qwe, 1RRWTTOOI, 240653C9467E45, 24Banc81, 3098z, 3ep5w2u, 4Dgifts, 4getme2, 4tas, 57gbzb

Other

 !@#$, !@#$%, !@#$%^, !@#$%^&, !@#$%^&*, !root, $ALOC$, $secure$, $system, %username%12, %username%123, %username%1234, (none), ?award, }

If you noticed that your password is in this list, immediately change it, as this list has been famous since 2005!

]]> http://www.savitra.org/security-basics-choosing-the-right-password/feed/ 0 Creating Tetris Game in Browser Using JS, CSS, and HTML. Part 2 http://www.savitra.org/creating-tetris-game-in-browser-using-js-css-and-html-part-2/ http://www.savitra.org/creating-tetris-game-in-browser-using-js-css-and-html-part-2/#comments Sat, 09 Jul 2011 12:04:57 +0000 aliax http://www.savitra.org/?p=49 Okay, now let’s proceed with our Tetris game. In the first step we have created a JavaScript file. Now let’s make it look properly. Create an HTML file, call it whatever you like. Use the UTF-8 charset to avoid charset problems. The file will contain the following BODY content:

<table cellspacing=”0″ cellpadding=”0″ width=”100%” height=”100%”><tr><td valign=”middle”>
<div id=”tetris”>
<div>
<h1>JsTetris 1.1.0</h1>
<div>
<div><input type=”button” value=”New Game” id=”tetris-menu-start” /></div>
<div><input type=”button” value=”Reset” id=”tetris-menu-reset” /></div>
<div><input type=”button” value=”Help” id=”tetris-menu-help” /></div>
<div><input type=”button” value=”Highscores” id=”tetris-menu-highscores” /></div>
</div>
<div>
<div><input type=”button” value=”^” id=”tetris-keyboard-up” /></div>
<div><input type=”button” value=”v” id=”tetris-keyboard-down” /></div>
<div><input type=”button” value=”<” id=”tetris-keyboard-left” /></div>
<div><input type=”button” value=”>” id=”tetris-keyboard-right” /></div>
</div>
<div id=”tetris-nextpuzzle”></div>
<div id=”tetris-gameover”>Game Over</div>
<div>
<table cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Level:</td>
<td><span id=”tetris-stats-level”>1</span></td>
</tr>
<tr>
<td>Score:</td>
<td><span id=”tetris-stats-score”>0</span></td>
</tr>
<tr>
<td>Lines:</td>
<td><span id=”tetris-stats-lines”>0</span></td>
</tr>
<tr>
<td>APM:</td>
<td><span id=”tetris-stats-apm”>0</span></td>
</tr>
<tr>
<td>Time:</td>
<td><span id=”tetris-stats-time”>0</span></td>
</tr>
</table>
</div>
</div>
<div id=”tetris-area”></div>
<div id=”tetris-help”>
<div>
Help <span id=”tetris-help-close”>x</span>
</div>
<div>
<b>Controllers:</b> <br />
up – rotate <br />
down – move down <br />
left – move left <br />
right – move right <br />
space – fall to the bottom <br />
n – new game <br />
r – reset <br />
<br />
<b>Rules:</b> <br />
1) Puzzle speed = 80+700/level miliseconds, the smaller value the faster puzzle falls <br />
2) If puzzles created in current level >= 10+level*2 then increase level <br />
3) After puzzle falling score is increased by 1000*level*linesRemoved <br />
4) Each “down” action increases score by 5+level (pressing space counts as multiple down actions)
</div>
</div>
<div id=”tetris-highscores”>
<div>
Highscores <span id=”tetris-highscores-close”>x</span>
</div>
<div>
<div id=”tetris-highscores-content”></div>
<br />
Note: these scores are kept in cookies, they are only visible to your computer, other players that visit this page see their own scores.
</div>
</div>
</div>

</td></tr></table>

<script type=”text/javascript”>
var tetris = new Tetris();
tetris.unit = 14;
tetris.areaX = 12;
tetris.areaY = 22;
</script>

Now, add the following lines to the <HEAD> section of your HTML file:

<script type=”text/javascript” src=”JsTetris.js”></script>
<link rel=”stylesheet” href=”JsTetris.css” type=”text/css” media=”screen” />

The last step, create a CSS file, JsTetris.css, and fill it with the following lines:

 html,body{height:100%;margin:0;padding:0}
body{background:#E1D4C0}
body,table{color:#826C55;font:11px tahoma}
#tetris{background:#fff;border:1px solid #BAA68E;height:310px;margin:0 auto;position:relative;width:300px}
#tetris .left{background:#F5EDE3;height:100%;left:0;position:absolute;top:0;width:130px}
#tetris .left h1{font-size:11px;margin-bottom:10px;margin-top:10px;text-align:center}
#tetris .left h1 a{color:#36C;text-decoration:none}
#tetris .left h1 a:hover{color:#F60;text-decoration:none}
#tetris .left .menu{text-align:center}
#tetris .left input{background:#EAE0D1;color:#333;font:10px tahoma;text-transform:uppercase}
#tetris .left .menu input{width:90px}
#tetris .left .keyboard{display:none;height:55px;left:32px;overflow:visible;position:absolute;top:163px;width:85px}
#tetris .left .keyboard input{font:11px tahoma;height:25px;padding-bottom:2px;text-transform:none;width:25px}
* html #tetris .left .keyboard input{padding-left:1px}
#tetris .left .keyboard .up{height:30px;left:30px;position:absolute;top:0;width:30px}
#tetris .left .keyboard .up input{font:15px tahoma;padding-top:3px}
#tetris .left .keyboard .down{height:30px;left:30px;position:absolute;top:30px;width:30px}
#tetris .left .keyboard .down input{font:14px tahoma}
#tetris .left .keyboard .left{height:30px;left:0;position:absolute;top:30px;width:30px}
#tetris .left .keyboard .right{height:30px;left:60px;position:absolute;top:30px;width:30px}
#tetris-gameover{display:none;font-weight:700;position:absolute;text-align:center;top:50%;width:100%}
#tetris-nextpuzzle{background:#fff;display:none;left:35%;overflow:visible;position:absolute;top:49%}
#tetris .left .stats{bottom:10px;left:35px;position:absolute}
#tetris .stats td{padding-bottom:1px}
#tetris-area{background:#FFF;height:308px;left:131px;overflow:hidden;position:absolute;top:1px;width:168px}
#tetris .block0,#tetris .block1,#tetris .block2,#tetris .block3,#tetris .block4,#tetris .block5,#tetris .block6{border:.5px solid #fff;height:13px;position:absolute;width:13px}
#tetris .block0,#tetris .block1{background:#69F}
#tetris .block2,#tetris .block3{background:#F60}
#tetris .block4{background:#FFAC1C}
#tetris .block5{background:#BAA68E}
#tetris .block6{background:red}
#tetris .window{background:#EFE8DE;display:none;height:308px;left:131px;position:absolute;top:1px;width:168px;z-index:5}
#tetris .window .top{background:#EAE0D1;border-bottom:1px solid #fff;color:#666;font:10px tahoma;height:20px;letter-spacing:1px;line-height:20px;position:relative;text-indent:10px;vertical-align:middle}
#tetris .window .top .close{background:#EAE0D1;border-left:1px solid #fff;cursor:pointer;font:11px verdana;font-weight:700;height:20px;line-height:19px;position:absolute;right:0;text-indent:7px;top:0;width:21px}
#tetris .window .top .close:hover{background:#EFE8DE}
#tetris .window .content{font:10px tahoma;margin:10px}
#tetris .window .content table{font:10px tahoma}
#tetris .stats .level,#tetris .stats .time,#tetris .stats .apm,#tetris .stats .lines,#tetris .stats .score{padding-right:10px;text-align:right}
#tetris-stats-level,#tetris-stats-time,#tetris-stats-apm,#tetris-stats-lines,#tetris-stats-score{font-weight:700}

 

Almost ready. Now save all the 3 files to one folder and open the HTML file in your browser. You can now the legendary Tetris. Enjoy!

]]> http://www.savitra.org/creating-tetris-game-in-browser-using-js-css-and-html-part-2/feed/ 1 Creating Tetris Game in Browser Using JS, CSS, and HTML. Part 1 http://www.savitra.org/creating-tetris-game-in-browser-using-js-css-and-html-part-1/ http://www.savitra.org/creating-tetris-game-in-browser-using-js-css-and-html-part-1/#comments Thu, 07 Jul 2011 16:44:11 +0000 aliax http://www.savitra.org/?p=45 Today I’m going to tell you how your can relatively easily make your website more attractive, using JavaScript, CSS and usual HTML. Just add this classic game, tetris, and let your visitors enjoy it!

The game was developed by a talented Polish web developer C. Tomczak.
First, you need to create the ‘main’ file. Call it JsTetris.js

/* Created by: C. Tomczak | http://gosu.pl/Licensed under: BSD */

function Tetris(){var l=this;this.stats=new Stats();this.puzzle=null;this.area=null;this.unit=20;this.areaX=20;this.areaY=20;this.highscores=new Highscores(10);this.start=function(){l.reset();l.stats.start();document.getElementById(“tetris-nextpuzzle”).style.display=“block”;l.area=new Area(l.unit,l.areaX,l.areaY,“tetris-area”);l.puzzle=new Puzzle(l,l.area);if(l.puzzle.mayPlace()){l.puzzle.place()}else{l.gameOver()}}this.reset=function(){if(l.puzzle){l.puzzle.destroy();l.puzzle=null}if(l.area){l.area.destroy();l.area=null}document.getElementById(“tetris-gameover”).style.display=“none”;document.getElementById(“tetris-nextpuzzle”).style.display=“none”;l.stats.reset()}this.gameOver=function(){l.stats.stop();l.puzzle.stop();document.getElementById(“tetris-nextpuzzle”).style.display=“none”;document.getElementById(“tetris-gameover”).style.display=“block”;if(this.highscores.mayAdd(this.stats.getScore())){var a=prompt(“Game Over!\nEnter your a:”,“”);if(a&&a.trim().length){this.highscores.add(a,this.stats.getScore())}}}this.up=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){if(l.puzzle.mayRotate()){l.puzzle.rotate();l.stats.setActions(l.stats.getActions()+1)}}}this.down=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){if(l.puzzle.mayMoveDown()){l.stats.setScore(l.stats.getScore()+5+l.stats.getLevel());l.puzzle.moveDown();l.stats.setActions(l.stats.getActions()+1)}}}this.left=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){if(l.puzzle.mayMoveLeft()){l.puzzle.moveLeft();l.stats.setActions(l.stats.getActions()+1)}}}this.right=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){if(l.puzzle.mayMoveRight()){l.puzzle.moveRight();l.stats.setActions(l.stats.getActions()+1)}}}this.space=function(){if(l.puzzle&&l.puzzle.isRunning()&&!l.puzzle.isStopped()){l.puzzle.stop();l.puzzle.forceMoveDown()}}var m=new Window(“tetris-help”);var n=new Window(“tetris-n”);document.getElementById(“tetris-menu-start”).onclick=function(){m.close();n.close();l.start();this.blur()}document.getElementById(“tetris-menu-reset”).onclick=function(){m.close();n.close();l.reset();this.blur()}document.getElementById(“tetris-menu-help”).onclick=function(){n.close();m.activate();this.blur()}document.getElementById(“tetris-help-close”).onclick=m.close;document.getElementById(“tetris-menu-n”).onclick=function(){m.close();document.getElementById(“tetris-n-content”).innerHTML=l.highscores.toHtml();n.activate();this.blur()}document.getElementById(“tetris-n-close”).onclick=n.close;document.getElementById(“tetris-o-up”).onclick=function(){l.up();this.blur()}document.getElementById(“tetris-o-down”).onclick=function(){l.down();this.blur()}document.getElementById(“tetris-o-left”).onclick=function(){l.left();this.blur()}document.getElementById(“tetris-o-right”).onclick=function(){l.right();this.blur()}var o=new Keyboard();o.set(o.n,this.start);o.set(o.r,this.reset);o.set(o.up,this.up);o.set(o.down,this.down);o.set(o.left,this.left);o.set(o.right,this.right);o.set(o.space,this.space);document.onkeydown=o.event;function Window(a){this.id=a;this.el=document.getElementById(this.id);var b=this;this.activate=function(){b.el.style.display=(b.el.style.display==“block”?“none”:“block”)}this.close=function(){b.el.style.display=“none”}this.isActive=function(){return(b.el.style.display==“block”)}}function Keyboard(){this.up=38;this.down=40;this.left=37;this.right=39;this.n=78;this.r=82;this.space=32;this.f12=123;this.escape=27;this.keys=[];this.funcs=[];var c=this;this.set=function(a,b){this.keys.push(a);this.funcs.push(b)}this.event=function(e){if(!e){e=window.event}for(var i=0;i<c.keys.length;i++){if(e.keyCode==c.keys[i]){c.funcs[i]()}}}}function Stats(){this.level;this.time;this.apm;this.lines;this.score;this.puzzles;this.actions;this.el={“level”:document.getElementById(“tetris-stats-level”),“time”:document.getElementById(“tetris-stats-time”),“apm”:document.getElementById(“tetris-stats-apm”),“lines”:document.getElementById(“tetris-stats-lines”),“score”:document.getElementById(“tetris-stats-score”)}this.timerId=null;var a=this;this.start=function(){this.reset();this.timerId=setInterval(this.incTime,1000)}this.stop=function(){if(this.timerId){clearInterval(this.timerId)}}this.reset=function(){this.stop();this.level=1;this.time=0;this.apm=0;this.lines=0;this.score=0;this.puzzles=0;this.actions=0;this.el.level.innerHTML=this.level;this.el.time.innerHTML=this.time;this.el.apm.innerHTML=this.apm;this.el.lines.innerHTML=this.lines;this.el.score.innerHTML=this.score}this.incTime=function(){a.time++;a.el.time.innerHTML=a.time;a.apm=parseInt((a.actions/a.time)*60);a.el.apm.innerHTML=a.apm}this.setScore=function(i){this.score=i;this.el.score.innerHTML=this.score}this.setLevel=function(i){this.level=i;this.el.level.innerHTML=this.level}this.setLines=function(i){this.lines=i;this.el.lines.innerHTML=this.lines}this.setPuzzles=function(i){this.puzzles=i}this.setActions=function(i){this.actions=i}this.getScore=function(){return this.score}this.getLevel=function(){return this.level}this.getLines=function(){return this.lines}this.getPuzzles=function(){return this.puzzles}this.getActions=function(){return this.actions}}function Area(b,x,y,c){this.unit=b;this.x=x;this.y=y;this.el=document.getElementById(c);this.board=[];for(var y=0;y<this.y;y++){this.board.push(new Array());for(var x=0;x<this.x;x++){this.board[y].push(0)}}this.destroy=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){this.el.removeChild(this.board[y][x]);this.board[y][x]=0}}}}this.removeFullLines=function(){var a=0;for(var y=this.y–1;y>0;y–){if(this.isLineFull(y)){this.removeLine(y);a++;y++}}return a}this.isLineFull=function(y){for(var x=0;x<this.x;x++){if(!this.board[y][x]){return false}}return true}this.removeLine=function(y){for(var x=0;x<this.x;x++){this.el.removeChild(this.board[y][x]);this.board[y][x]=0}y–;for(;y>0;y–){for(var x=0;x<this.x;x++){if(this.board[y][x]){var a=this.board[y][x];a.style.top=a.offsetTop+this.unit+“px”;this.board[y+1][x]=a;this.board[y][x]=0}}}}this.getBlock=function(y,x){if(y<0){return 0}if(y<this.y&&x<this.x){return this.board[y][x]}else{throw“Area.getBlock(“+y+”,“+x+”)failed”;}}this.addElement=function(a){var x=parseInt(a.offsetLeft/this.unit);var y=parseInt(a.offsetTop/this.unit);if(y>=0&&y<this.y&&x>=0&&x<this.x){this.board[y][x]=a}else{}}}function Puzzle(h,j){var k=this;this.tetris=h;this.area=j;this.fallDownID=null;this.forceMoveDownID=null;this.type=null;this.nextType=null;this.position=null;this.speed=null;this.running=null;this.stopped=null;this.board=[];this.elements=[];this.nextElements=[];this.x=null;this.y=null;this.puzzles=[[[0,0,1],[1,1,1],[0,0,0]],[[1,0,0],[1,1,1],[0,0,0]],[[0,1,1],[1,1,0],[0,0,0]],[[1,1,0],[0,1,1],[0,0,0]],[[0,1,0],[1,1,1],[0,0,0]],[[1,1],[1,1]],[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]]];this.reset=function(){if(this.fallDownID){clearTimeout(this.fallDownID)}if(this.forceMoveDownID){clearTimeout(this.forceMoveDownID)}this.type=this.nextType;this.nextType=random(this.puzzles.length);this.position=0;this.speed=80+(700/this.tetris.stats.getLevel());this.running=false;this.stopped=false;this.board=[];this.elements=[];for(var i=0;i<this.nextElements.length;i++){document.getElementById(“h-nextpuzzle”).removeChild(this.nextElements[i])}this.nextElements=[];this.x=null;this.y=null}this.nextType=random(this.puzzles.length);this.reset();this.isRunning=function(){return this.running}this.isStopped=function(){return this.stopped}this.getX=function(){return this.x}this.getY=function(){return this.y}this.mayPlace=function(){var a=this.puzzles[this.type];var b=parseInt((this.area.x–a[0].length)/2);var c=1;var d=false;var e=0;for(var y=a.length–1;y>=0;y–){for(var x=0;x<a[y].length;x++){if(a[y][x]){d=true;if(this.area.getBlock(c,b+x)){return false}}}if(d){e++}if(c–e<0){break}}return true}this.place=function(){this.tetris.stats.setPuzzles(this.tetris.stats.getPuzzles()+1);if(this.tetris.stats.getPuzzles()>=(10+this.tetris.stats.getLevel()*2)){this.tetris.stats.setLevel(this.tetris.stats.getLevel()+1);this.tetris.stats.setPuzzles(0)}var a=this.puzzles[this.type];var b=parseInt((this.area.x–a[0].length)/2);var c=1;var d=false;var e=0;this.x=b;this.y=1;this.board=this.createEmptyPuzzle(a.length,a[0].length);for(var y=a.length–1;y>=0;y–){for(var x=0;x<a[y].length;x++){if(a[y][x]){d=true;var f=document.createElement(“div”);f.className=“block”+this.type;f.style.left=(b+x)*this.area.unit+“px”;f.style.top=(c–e)*this.area.unit+“px”;this.area.el.appendChild(f);this.board[y][x]=f;this.elements.push(f)}}if(e){this.y–}if(d){e++}}this.running=true;this.fallDownID=setTimeout(this.fallDown,this.speed);var g=this.puzzles[this.nextType];for(var y=0;y<g.length;y++){for(var x=0;x<g[y].length;x++){if(g[y][x]){var f=document.createElement(“div”);f.className=“block”+this.nextType;f.style.left=(x*this.area.unit)+“px”;f.style.top=(y*this.area.unit)+“px”;document.getElementById(“h-nextpuzzle”).appendChild(f);this.nextElements.push(f)}}}}this.destroy=function(){for(var i=0;i<this.elements.length;i++){this.area.el.removeChild(this.elements[i])}this.elements=[];this.board=[];this.reset()}this.createEmptyPuzzle=function(y,x){var a=[];for(var b=0;b<y;b++){a.push(new Array());for(var c=0;c<x;c++){a[b].push(0)}}return a}this.fallDown=function(){if(k.isRunning()){if(k.mayMoveDown()){k.moveDown();k.fallDownID=setTimeout(k.fallDown,k.speed)}else{for(var i=0;i<k.elements.length;i++){k.area.addElement(k.elements[i])}var a=k.area.removeFullLines();if(a){k.tetris.stats.setLines(k.tetris.stats.getLines()+a);k.tetris.stats.setScore(k.tetris.stats.getScore()+(1000*k.tetris.stats.getLevel()*a))}k.reset();if(k.mayPlace()){k.place()}else{k.tetris.gameOver()}}}}this.forceMoveDown=function(){if(!k.isRunning()&&!k.isStopped()){if(k.mayMoveDown()){k.tetris.stats.setScore(k.tetris.stats.getScore()+5+k.tetris.stats.getLevel());k.tetris.stats.setActions(k.tetris.stats.getActions()+1);k.moveDown();k.forceMoveDownID=setTimeout(k.forceMoveDown,30)}else{for(var i=0;i<k.elements.length;i++){k.area.addElement(k.elements[i])}var a=k.area.removeFullLines();if(a){k.tetris.stats.setLines(k.tetris.stats.getLines()+a);k.tetris.stats.setScore(k.tetris.stats.getScore()+(1000*k.tetris.stats.getLevel()*a))}k.reset();if(k.mayPlace()){k.place()}else{k.tetris.gameOver()}}}}this.stop=function(){this.running=false}this.mayRotate=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){var a=this.getY()+this.board.length–1–x;var b=this.getX()+y;if(a>=this.area.y){return false}if(b<0){return false}if(b>=this.area.x){return false}if(this.area.getBlock(a,b)){return false}}}}return true}this.rotate=function(){var a=this.createEmptyPuzzle(this.board.length,this.board[0].length);for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){var b=a.length–1–x;var c=y;var d=this.board[y][x];var e=b–y;var f=c–x;d.style.left=d.offsetLeft+(f*this.area.unit)+“px”;d.style.top=d.offsetTop+(e*this.area.unit)+“px”;a[b][c]=d}}}this.board=a}this.mayMoveDown=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){if(this.getY()+y+1>=this.area.y){this.stopped=true;return false}if(this.area.getBlock(this.getY()+y+1,this.getX()+x)){this.stopped=true;return false}}}}return true}this.moveDown=function(){for(var i=0;i<this.elements.length;i++){this.elements[i].style.top=this.elements[i].offsetTop+this.area.unit+“px”}this.y++}this.mayMoveLeft=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){if(this.getX()+x–1<0){return false}if(this.area.getBlock(this.getY()+y,this.getX()+x–1)){return false}}}}return true}this.moveLeft=function(){for(var i=0;i<this.elements.length;i++){this.elements[i].style.left=this.elements[i].offsetLeft–this.area.unit+“px”}this.x–}this.mayMoveRight=function(){for(var y=0;y<this.board.length;y++){for(var x=0;x<this.board[y].length;x++){if(this.board[y][x]){if(this.getX()+x+1>=this.area.x){return false}if(this.area.getBlock(this.getY()+y,this.getX()+x+1)){return false}}}}return true}this.moveRight=function(){for(var i=0;i<this.elements.length;i++){this.elements[i].style.left=this.elements[i].offsetLeft+this.area.unit+“px”}this.x++}}function random(i){return Math.floor(Math.random()*i)}function Highscores(d){this.maxscores=d;this.scores=[];this.load=function(){var b=new Cookie();var s=b.get(“tetris-n”);this.scores=[];if(s.length){var c=s.split(“|”);for(var i=0;i<c.length;++i){var a=c[i].split(“:”);this.scores.push(new Score(a[0],Number(a[1])))}}}this.save=function(){var b=new Cookie();var a=[];for(var i=0;i<this.scores.length;++i){a.push(this.scores[i].name+”:”+this.scores[i].score)}var s=a.join(“|”);b.set(“tetris-n”,s,3600*24*1000)}this.mayAdd=function(a){if(this.scores.length<this.maxscores){return true}for(var i=this.scores.length–1;i>=0;–i){if(this.scores[i].score<a){return true}}return false}this.add=function(a,b){a=a.replace(/[;=:|]/g,“?”);a=a.replace(/</g,“<”).replace(/>/g,“>”);if(this.scores.length<this.maxscores){this.scores.push(new Score(a,b))}else{for(var i=this.scores.length–1;i>=0;–i){if(this.scores[i].score<b){this.scores.removeByIndex(i);this.scores.push(new Score(a,b));break}}}this.sort();this.save()}this.getScores=function(){return this.scores}this.toHtml=function(){var s=‘<table cellspacing=”0″cellpadding=”2″><tr><th></th><th>Name</th><th>Score</th></tr>’;for(var i=0;i<this.scores.length;++i){s+=‘<tr><td>?.</td><td>?</td><td>?</td></tr>’.format(i+1,this.scores[i].name,this.scores[i].score)}s+=‘</table>’;return s}this.sort=function(){var a=this.scores;var b=a.length;this.scores=[];for(var i=0;i<b;++i){var c=null,index=null;for(var j=0;j<a.length;++j){if(!c||(a[j].score>c.score)){c=a[j];index=j}}a.removeByIndex(index);this.scores.push(c)}}function Score(a,b){this.name=a;this.score=b}this.load()}function Cookie(){this.get=function(b){var c=document.cookie.split(“;”);for(var i=0;i<c.length;++i){var a=c[i].split(“=”);if(a.length==2){a[0]=a[0].trim();a[1]=a[1].trim();if(a[0]==b){return unescape(a[1])}}}return“”};this.set=function(a,b,c,d,e,f){var g=(a+“=”+escape(b));if(c){var h=new Date(new Date().getTime()+c*1000);g+=(“;expires=”+h.toGMTString())}g+=(d?“;d=”+d:“”);g+=(e?“;e=”+e:“”);g+=(f?“;f”:“”);document.cookie=g};this.del=function(a){document.cookie=a+“=;expires=Thu,01-Jan-70 00:00:01 GMT”}}}if(!String.prototype.trim){String.prototype.trim=function(){return this.replace(/^\s*|\s*$/g,“”)}}if(!Array.prototype.removeByIndex){Array.prototype.removeByIndex=function(a){this.splice(a,1)}}if(!String.prototype.format){String.prototype.format=function(){if(!arguments.length){throw“String.format()failed,no arguments passed,this=“+this;}var a=this.split(“?”);if(arguments.length!=(a.length–1)){throw“String.format()failed,a!=arguments,this=“+this;}var s=a[0];for(var i=0;i<arguments.length;++i){s+=(arguments[i]+a[i+1])}return s}}

Check the network monitoring link and read the next chapter.

To be continued…

]]> http://www.savitra.org/creating-tetris-game-in-browser-using-js-css-and-html-part-1/feed/ 1 Some Useless JavaScript Stuff: Making Site Images Move Around http://www.savitra.org/some-useless-javascript-stuff-making-site-images-move-around/ http://www.savitra.org/some-useless-javascript-stuff-making-site-images-move-around/#comments Wed, 12 Jan 2011 14:08:20 +0000 aliax http://www.savitra.org/?p=34 A short that will help you waste your time watching all the images on your favorite website move. Just load a web page, and enter this script into the address field.

P.S. This won’t affect real web page, so don’t think that you are a hacker :)

The script:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300;
y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img");
DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;
DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px";
DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5);
void(0);

(remove the linebreaks and enter the script as one line.)
]]> http://www.savitra.org/some-useless-javascript-stuff-making-site-images-move-around/feed/ 1 Using CSS Shorthands to Minify CSS Filesize http://www.savitra.org/using-css-shorthands-to-minify-css-filesize/ http://www.savitra.org/using-css-shorthands-to-minify-css-filesize/#comments Mon, 25 Oct 2010 16:24:51 +0000 aliax http://www.savitra.org/?p=8 This article has been moved; sorry for the inconvenience.

]]> http://www.savitra.org/using-css-shorthands-to-minify-css-filesize/feed/ 3 Easiest CSS Tooltip Ever http://www.savitra.org/easiest-css-tooltip-ever/ http://www.savitra.org/easiest-css-tooltip-ever/#comments Sat, 14 Aug 2010 15:45:00 +0000 aliax http://www.savitra.org/?p=29 It doesn’t have a beatiful jQuery-style transition effect, however it’s nice, small and easy. Recommended if you worry about website performance, load speed and general impression if a very fast website.

a:hover {
background:#fff;
text-decoration:none;
}

a.tooltips span {
display:none;
padding:3px;
margin-left:8px;
width:160px;
}

a.tooltips:hover span{
display:inline;
position:absolute;
background:#fff;
border:1px solid #bababa;
color:#5b5b5b;
}

Once the CSS part is ready, just use this HTML:

<a href=”http://www.savitra.org/”>Example<span>And this is a tooltip.</span></a>

I hope it won’t take you more than 15 minutes to study this technique and start using it on your websites. By the way, yes, it’s a cross-browser compatible technology. And basing on it you can develop it to make a tooltip look more sophisticated.

]]> http://www.savitra.org/easiest-css-tooltip-ever/feed/ 0 Understand CSS Specificity: How to Avoid CSS Conflicts http://www.savitra.org/understand-css-specificity-how-to-avoid-css-conflicts/ http://www.savitra.org/understand-css-specificity-how-to-avoid-css-conflicts/#comments Wed, 07 Apr 2010 10:26:57 +0000 aliax http://www.savitra.org/?p=21 This article has been moved.

]]> http://www.savitra.org/understand-css-specificity-how-to-avoid-css-conflicts/feed/ 0 Welcome to Website Development Blog http://www.savitra.org/welcome-to-website-development-blog/ http://www.savitra.org/welcome-to-website-development-blog/#comments Mon, 29 Mar 2010 11:28:34 +0000 aliax http://www.savitra.org/?p=26 Hello Dear Visitors,

I’m glad to see you here. Please leave me as many comments as you can – I love getting feedback from my readers. I hope you will enjoy staying here and will get back from time to time to get more useful web development tips.

]]> http://www.savitra.org/welcome-to-website-development-blog/feed/ 0