aip solutions developer's blog

footer stick on bottom

mili — Mon, 28 Sep 2009 10:27:14 +0000

DOCTYPE:

CSS:

html,body    {min-height:100%;height:100%;}
.siteContent {position:relative;min-height:100%;_height:100%;}/*IE hack*/
.pageContent {padding:0 0 25px;}
.footer      {position:absolute;bottom:0;width:100%;height:25px;}

HTML:

BROWSERS:
IE6, IE7, IE8, FF2, FF3

FLOATS:
yes

Round corners with css … only!

mili — Thu, 27 Aug 2009 08:51:10 +0000

One post inspired me to experiment with font-size and line-height. Here is the result of a few hours tests in IE6 and FF.

My result

Here is the CSS:

* 	{font-family:Arial,sans-serif;}

html,body{text-align:center;}

div	{position:relative;
         width:300px;
         margin:130px auto 0;padding:15px 0;
         background:black;
        }

div p	{position:relative;
         min-height:22px;height:auto!important;height:22px;
         margin:0 -14px;padding:22px;
         border:solid 15px black;border-width:0 15px;
         background:white;
        }

em.absTL,
em.absTR,
em.absBL,
em.absBR {position:absolute;
          width:30px;height:30px;line-height:32px;
          padding:0;
          font-size:120px;
          text-indent:-6px;
          color:black;
          overflow:hidden;
         }
 em.absTL{top:0;left:-14px;}
 em.absTR{top:0;right:-14px;}
 em.absBL{bottom:0;left:-14px;}
 em.absBR{bottom:0;right:-14px;}

And the HTML:


	•
	•
	•
	•
 	
 		Some dynamic content here 

 		Some dynamic content here

Preview:

Specific notes

1. div {vertical-align:top;} - IE6 don’t like it. The Internet Explorer 6 loses the em’s content;
2. bold em-s - IE6 again don’t like it. The line-height is quite different from FF;
3. other browsers - it works fine at least on IE6/7/8, FF3, Chrome, Opera, Safari.

The post

Thanks to Stu Nicholls and his post Curved Corners

List of products - no tables, no floats

mili — Mon, 20 Jul 2009 10:38:48 +0000

Check this post for a nice solution with unordered list - http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Useful add-ons

mili — Thu, 11 Jun 2009 06:56:47 +0000

This is a quick list of Add-ons in FF that I use:

Firebug - http://getfirebug.com/
IE Tab - https://addons.mozilla.org/en-US/firefox/addon/1419
MeasureIt -http://www.kevinfreitas.net/extensions/measureit/
ColorZilla - http://www.colorzilla.com/firefox/
Resizeable textarea - https://addons.mozilla.org/en-US/firefox/addon/3818
Web Developer - http://chrispederick.com/work/web-developer/
HTML Validator - http://users.skynet.be/mgueury/mozilla/
CSS Validator - http://www.nu22.com/firefox/cssvalidator/
Operator - http://www.kaply.com/weblog/operator/
Tails Export - https://addons.mozilla.org/en-US/firefox/addon/2240?id=2240
ShowIP - http://code.google.com/p/firefox-showip/
YSlow - http://developer.yahoo.com/yslow/

Footer stick on bottom with css

mili — Wed, 25 Feb 2009 09:47:58 +0000

A few weeks ago I found in Internet two beautiful posts to footer stick - lucky accident considering the huge information in the web. And lucky me, if you can imagine how long I’ve been trying to find out how to avoid using tables for layout. Even if it is only to stick the footer on bottom of the page.

Stop using tables!

Except for table-data of course

In the web you can find several ways to stick the footer without table (with height 100%). Some of them are based on JavaScript and often they are quite complicate. Others used long and messy hacks or a lot of extra HTML markup and the solution is confusing.

Now I want to say ‘Thank you for the really simple and working methods!’ to Bobby van der Sluis and to Ryan Fait.

At first I thought that these methods work only in XHTML, but today I tested both solutions in different doctypes and they …

Work fine in (X)HTML and IE6, IE7, FF, Opera, Safari & Chrome

Here is the list of doctypes tested in Internet Explorer 6, Internet Explorer 7, Mozilla Firefox 3.0.6, Opera, Safari for Mac and Google Chrome:

HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
XHTML 1.1

Resource 1: A List Apart

Bobby van der Sluis has described the problem with the footer since 2004. In his article Exploring Footers he represents the JavaScript solution because of IE5 bug.
Although, his simple CSS method works in IE and FF, so here is the code:

html, body { height:100%; }
#container { position:relative; min-height:100%; }
#footer    { position:absolute; bottom:0; }


    ...
    ...

Resource 2: Las Vegas Web Design

The second nice post on this topic is Make the Footer Stick to the Bottom of a Page by Ryan Fait. It is really short and understandable resource. Here I have to mention that some times in Internet Explorer there is a little bug - it is possible to appear vertical scrollbar when you resize the browser’s window.
Here is the code:

* 	        { margin:0; }
html,body { height:100%; }
.wrapper  { min-height:100%; height:auto!important; height:100%; margin:0 auto -4em; }
.footer,
.push     { height: 4em; }

class="wrapper">
    Your website content here.
   class="push">

class="footer">
    Copyright (c) 2008

Floating content problem

Maybe it will be a problem using floating elements in the main content (before footer). So you can check for more information the site www.cssstickyfooter.com and the post with many comments A CSS Sticky Footer that Works in 2009 (Chrome too) - both by Steve Hatcher.

In my next web project I’ll test that and post here.

Updates

2009-09-28: I just added new post with my own solution for XHTML http://blog.aip-solutions.com/311/footer-stick-on-bottom-2/

First Law of Internet Communications

Peter Mihailov — Tue, 17 Feb 2009 12:57:46 +0000

Be liberal in what you accept,
and conservative in what you send.
Jon Postel

inside dl.swf

Peter Assenov — Wed, 11 Feb 2009 09:56:13 +0000

I’ll try to describe the creation process of dl.swf- a small class for publishing flash in html page.

A great overview for the concepts and common solutions of this problem can be found at: Embed Flash or Die Trying
Btw, nice title too… I will start from there, so reading the above is a good idea. Also my previos post on this topic can help /Include flash content in html page/.

So the task was: make simple, flexible, easy to use, easy to maintain and browser/platform compatible class for including flash into html page. Not bad… Did I mention 2 days time-frame /1 research and 1 implementation/? Will be fun for sure…

Everything begins with the usability. We have 2 scenarios:
1. Should be possible to include Flash at a certain point in the body. The code should be something like:

2. Sometimes is better to replace the content of an element, so for example if there is no flash player alternate content will be present:

Alternate Content

Looks simple enough but in case we need multiple instances we should register them. If the instances are created by a Factory method, then the Id will be generated automatically, but when there is communication between JS and AS is better to set it up manually. So no escape- Id parameter is necessary- will be the first argument passed to the constructor.

The other thing that bothers me is that all the logic is executed in the constructor- not much object oriented, eh… Frankly I don’t care /OOP was not part of the requirements :)/, the problem is that this approach, although simple, somehow shuts the door for future extension and in-between processing, so decided- the final replace will be done by a separate method- write(); Let see what we have:

Alternate Content

In case the constructor returns the object/little nasty js trick/ will be much shorter:

Alternate Content

or flexibility when there are no multiple instances and you don’t replace content in another element, then the Id will be auto-generated and the writing method will not need a parameter.

Still simple enough, yet much more flexible.

Then probably we need to adjust some parameters of the html object or pass variables to the .swf itself. Since it is not possible to predict the number of these parameters we can pass them as associate arrays. Unfortunately in Javascript there is no easy way to create associate arrays/they support Alpha calculus though ;)/- something like [key1=>val1,key2=>val2] would have been great, but we have to use objects {key1:val1,key2:val2} - at the end its the same. Our example code should be like:

Alternate Content

Most of the times there is no need for passing parameters to the .swf and I can preset the most common paratemeters of the html object, so the array parameters should not be required. Again we’re back to:

Not complex at all, but at the end of the day the class should be used primarily by designers. They seem to be scared of all these dots and brackets/not to mention anonymous objects as parameters/- so a simple function will be perfect for them. Let it be! Also they are used to pass certain parameters to it. No problem- I will take them from swfObject …

Enough for the usage. Next is the implementation…

peter.

Table abstraction with DList - part 1

Peter Mihailov — Tue, 10 Feb 2009 17:21:52 +0000

It is well-known that programmers are lazy people. Thanks to this fact a lot of good stuff are written. The same is the story with DList. It starts on one sunny day near the old office of AIP Solutions. The server-side team of the company, represented by Me and Mr. Marin Todorov, decided to have a lunch in the restaurant near the office. We was outside and the weather was so pleasant so we decided that it will be one very very long lunch. But we needed an excuse. Our idea was to say our colleagues that we had done some work. So we took a couple of napkins and started our software design work.

Ok I finished the introduction. So I’ll try to explain something about DList.

After we analysed our server-side programming work. We found that all the time we do the same. We add, edit and remove some items in database tables. Then we retrieve the content of those tables. So we decided to create a generic class which will implement all the stuff we need. It’s called DList (DataList). DList is an abstraction for list with items. The constructor of the class takes an object as an argument. The type of this object is “DListConf” (DList Configuration) or also known as DLC. The DLC object contains all the information DList needs to know about the table in database, which DList have to manage. After DList class is instantiated we have an object which implements so called DList interface. That means the object has this list of methods:

DList|array static DList::Make('DLC Name [,DLC name1 ...]')
void  DList::setOrderMethod($orderString);
void  DList::setFilter($filterString);
void  DList::setPaging($pagingObject);
array DList::add($info)
void  DList::edit($Id, $info)
bool  DList::remove($Id)
array DList::getInfo($Id, $langId)
array DList::getList($langId)
array DList::getFullList($langId)
int   DList::getCount()

When we have this methods we can do most ot our work without writing SQL queries. So this class provide some kind of database abstraction layer. It increases the level of predictability of the code written from any member of our team. And one very important thing, it saves time, a lot of time. Of course I’m not saying that everyting could be done with DList, but it does very good work in most of the cases.

DList usage

There are two ways for creating instance of DList. The classic approach with new keyword in PHP.

$products = new DList($productsDLC);

In this case $productsDLC is our DList Configuration object and $products is the DList object.

If we need more DList objects, we can use the Make static method.

list($products, $categories, $news) = DList::Make('productsDLC, categoriesDLC, newsDLC');

In this example I use the Make method to create three DList objects at once. This method returns an array with DList objects inside. Make method has an other very useful feature, it automatically includes the files with DLC definitions. This files should be in aip.conf folder and its names should be like in this example: productsDLC.php, categoriesDLC.php, newsDLC.php.

Before I continue with DList features I’d like to write something more about DListConf or DLC. It is very important, because withour properly configured DLC you won’t have an operational DList object. DListConf is configuration container. Our convention is make DLC objects in files with the same name. For example:

$productsDLC = DListConf('productsList');

We create object called $productsDLC in a file called productsDLC.php. This is not required, but it makes things easy and clear and for the staff of AIP Solutions it is obligatory. Also this convention is required for static method Make(). The constructor of DListConf takes only one argument and it should be the name of the table in database, which Dlist should manage. This is an example of a real DLC file - productsDLC.php:

$productsDLC = new DListConf('productsList'); 	/* name of the table */
$productsDLC->setLangCount(2);		 	/* default:1 */
$productsDLC->setTextKey('name'); 	  		/* default:name */
$productsDLC->setLangKey('langId');  	  	/* default:langId, false for none */
$productsDLC->setParentKey('parentId');  		/* default:parentId, false for none */
$productsDLC->setOrderMethod('orderId ASC'); 	/* default:Id ASC */

$productsDLC->addField('parentId', 'int');
$productsDLC->addField('imageId', 'int');
$productsDLC->addField('price', 'price');		/* in DList we have standard datatype 'price' */
$productsDLC->addField('descr', 'rtf');
$productsDLC->addField('abstract', 'rtf');
$productsDLC->addField('orderId', 'int');

The first method in this example is setLangCount(int $languageCount);. We use this method to tell to DList that the data it will manage will be translated in 2 languages. In this case DList knows that for each item added to the table it has to make 2 records - one record for each language. In other words if you add 1 product into the database and you have setLangCount(2); in you $productsDLC, DList will insert 2 rows in productsList table.

The next method is setTextKey(string $fieldName). This tells which field in the table can be defined as a “name” of the items saved in this table. In our case with productsList table we use the filed name, which is the name of the product. This parameter is used in DList::getList() method, which will be discussed later.

The other main method is setLangKey(string fieldName). It shows which field in DB table should be used for storing the language ID of each record. So in our example this is langId field. Which means that if we add 1 product to the database DList will make 1 record with langId = 1 and 1 record with langId = 2.

The method setParentKey(string fieldName) also takes the name of a field in DB table as an argument. This field should be used when we need parent-child relation between two tables managed by DList. An example for this case is when we have products, which are grouped in different categories. So in products we make DB table field called parentId and use setParentKey('parentId').Then when we have to add product we have to write its parent category ID in this field.

Method called setOrderMethod(string $orderSqlString) is used to set the default order of items recorded in the table. The parameter which method takes is the ORDER BY clause in SQL. But without ORDER BY at the begging. For example: name ASC. In this case when we retrieve a list of items from the table using DList::getList() or DList::getFullList() methods, the result will be ordered by product name in ascending sort.

The last method in our example is addField(string $fieldName, string $dataType). We use this method for describing the fields in the table. Every field (well,there are some exceptions) in the DB table should be defined with this method. The first argument is the name of the field and the second argument is its data type. In fact we don’t use the standard data types in SQL. Dlist uses the following data types:
int, string, rtf, file, date, price, enum.

int type is for integer data - numbers

string is used for strings. it is important that DList perform some operations on data defined as a string. It replaces the quotes and slashes with its HTML codes.

rtf is like a string but DList doesn’t make any changes on the strings. It should be used for textareas with rich text formatted texts.

file - this data type should be used when the information is file name.

date - data type for storing dates.

price - store decimal prices with this data type.

price - it should be used for enum MySQL fields.

The fields that should not be defined with addField(string $fieldName, string $dataType) method are fields defined as an Text Key and Language Key with setTextKey() and setLangKey() methods. In our example this are name and langId fields. In fact if some field is not defined in the DLC, Dlist will work well, but this field will stay “invisible” for the object. You will not be able to add, edit or even read the information in this field.

coding- what’s that?

Peter Assenov — Mon, 09 Feb 2009 12:25:42 +0000

I’ve been coding for a while… scared to say it- a decade!

It’s not I’m too old, I just started early

Anyway 20 years is a lot of time, especially in programming. Everything changes so fast, new technologies are coming, programming languages are born and the code quality concepts are totally different from what they were. I’m trying to find my place in all this- everything I’ve bee taught about the real values in coding seems to be not important now and some bad practices I’ve studied are cutting edge programing- am I an ancient thinking freak that needs to change his attitude to survive, or the current situation is just “a fashion” that will pass away. Lets try to find out…

I’m starting with some background…

I had the unique chance grow up with the PC. We’re on the same age and as it was changing, I was evolving as a programmer too- we’re like old friends.

The first PC I’ve coded on/and played games of course/ was Bulgarian analog of Apple II with 48kB of RAM and 255 KB of storage/on a 5.25″ FDD/.

It has built-in BASIC compiler and a possibility to make vector graphics! I was having fun composing music /by adjusting the frequency and duration of the bell/ or drawing figures on the screen- was amazing!.

Then in the high school I was coding in PASCAL - we had fun with off-school meetings and participating in programing tournaments, but we were actually getting valuable knowledge of the coding and programming algorithms. We’re talking about Binary Trees, Linked Queues, Graphs, etc… I was helping the school teacher during my vacation to set-up the school network or clean-up viruses. At that time my old folk was also growing up. It was in average 80286 with 256KB RAM and 10MB HDD. For some time I was supporting the computers in my mother’s company and once I had the unique experience to see an ancient Mainframe system /IBM System 360/ in action. In the early 90’s I would not be surprised it to be the last working mainframe of this type in the world. It was so great that deserves another post. Just for the records my supporting career suddenly ended when my macro “a virus” slipped away from the testing environment and infected all documents in the company… /the name comes from the fact that it replaces all “e”, “i” and “o” characters in a word document with “a”, so you end up a beautiful document with strangely large number of “a”s and nothing wrong until you try to read something… As you can suppose no automatic recovery possible- it does the replace on save :)/

Then came the Internet, BBS connection /later super fast modems/, Navigator 2.0, newsgroups, IRC channels, underground online magazines… Meantime I had my own $1200 costing 486DX5-133 with SVGA display! I was making a 3D animations with 3D Max 1.0 on it. This was amazing period in my life but “the net” put the coding “on hold”…

Until I went to the University. There a reached a whole new level in my programming career. I was using all my knowledge and upgrading it theoretically. I was lucky to learn from great people. If I could says I grow together with the PC- they grew with the computers in general. Many of them started coding in 60’s and in 80’s they develop a software for the Russian space station “MIR” or software that guided “cold war” nuclear missiles. Fighting with the bugs in nowadays software/windows crashed while I was writing this/ I remember one story- actually a true one. Bulgarian engineers had developed a module for examining the effect of space environment on the human body called/Плевен-87/. The system software for it had to be carried in 3 disks. Unfortunately one of them was not taken to the space… and still they were able to conduct 83% of the planned tests! So imagine- you remove 1/3 of the installation files of Windows and it is not only operational but almost all features are there! It’s just unbelievable what they have done!

From them I understood the difference between a program and a WORKING program. I got the background for planning, coding and deploying a software system. Meantime I was coding the term’s assignments of my class-mates for fun/sometimes for money/. Apart for exercise this was a real-life lesson for working under pressure with strict deadlines. Since it was Assembler, C, C++ the code planning, structure, consistency, speed, resources, reusement rate, etc. were utterly important and they all have to be done manually- there was no language or compiler aids you can rely on. In the night at the campus we were stretching to its limit the Ethernet network architecture. Completely by ourselves we have designed, made the infrastructure and maintained a network of more than 150 PCs and of course with the least possible investments. The community was everything- we shared resources, thoughts, projects, played games and all this to happen we actually invented the moral principles and personal responsibility for being part of a group. A group that worth more that just a sum of all individuals in it. The feeling was so great- same as the early years of Internet, but far more real- because its all done by you. I remember when I go out- I always leave a key from my room to a neighbor- because the router is here and if it stops you block the access to others- a thing far more important than someone may steal something from the room while you’re away…

I almost forgot my teenage partner- the PC. At that time Pentium rules. Either PII under NT or PIII on 2K there was no match for it.

After the University I started by professional career as a programmer. I’ve gone thought almost everything: software for embedded devices /.Net CF/, desktop applications / .Net C#, Java/, web applications /HTML, CSS, JavaScript, VB Script, ASP, ASP .Net, PHP/, planning, design, deployment and maintenance of different softwares - from small websites to mid-size ERP systems. Here I faced the other side of the coin. The most important thing was how easy-to-maintain and modify the code is, what is the cost of development, the cost of maintenance. I have to make tough decisions about the quality vs budget, features vs development time… The expectations of my work changed, so was my attitude toward coding. Nevertheless I really believe that the real values in programming are intransitive- they are not affected by technology or platform or fashion…

Unfortunately this introduction became much larger than I originally planed, so I will continue in the next post.

take care,

peter

Include flash content in html page

Peter Assenov — Fri, 06 Feb 2009 09:12:38 +0000

Recently I’ve made a small research and found many JavaScript classes that include dynamically flash in HTML pages. Most of them were easy to use and offered reasonable compatibility with different user agents and platforms. That’s great, but as a javascript developer I need to know also what’s behind the scene. How they work and how easy for modification and upgrade they are. When a client comes and say “I need this feature” or “can you support also this browser…”- he does not care what great-open-source-class I use- he just needs the thing done and I need to be able to make it.

Here comes the tricky part…

I took the uncompressed version of one popular class- swfobject 2.1 and I was surprised- it was 23KB! Well I know that these days 23K are nothing for the web bandwidth but if you gonna maintain the code- they are a lot. Isn’t it all about checking if there is Flash Player present and if yes just replace the innerHTML of some DIV- sounds not so complex to require 700+ lines of code. I said- that’s ok the volume is not important if the code is simple and understandable. I scrolled down the code and I saw the file is ending with:

Well, this simple complexity test just adds more concerns… what is this complex logic that requires such nesting? Besides what is the point you declare a function just to execute it on creation- can’t you just write the code, or if you want to be more structured- use static class for example.

And the final blow was the conditional parsing/line 88/ for detecting the OS in Internet explorer. Come on we’re not here to show how great programmers we are we just need to replace the innerHTML of a DIV.

Its not that I don’t appreciate the work done by the guys- they are great and I’d like to thank them for sharing it with others, but it’s just not my vision how it should be done.

So I thought to myself- there must be a simpler way… I don’t need complex event management, onDomContentLoaded handling or dynamic DOM elements manipulations- they are all out of scope of flash inclusion class and besides I already have them in the API’s core/I will introduce it in another post/.

I created my own class nearly 9 times smaller and doing exactly what is needed- include flash content into html page.

When I have time I will write some documentation but it is so simple that I think the usage examples should be enough. If not, one can always take a look at the code . Here they are:

Usage: http://blog.aip-solutions.com/wp-content/uploads/2009/02/dl.swf.htm Actually this was my class test page used in its creation, so don’t take into account the visual.

Source: http://blog.aip-solutions.com/wp-content/uploads/2009/02/dl.swf.js

Hope will be useful to you…

Cheers,

Peter