Hey so for a while now we have been using the Zend Framework (1.5) to develop out newest product or at least internal project and since I have to do some work with E-Mails I wanted to share some stuff with you.

We have built an alternative to imap_rfc822_parse_adrlist since we did not want to relay on any php modules the Zend Framework doesn’t depend on. Read more

Erstmal vorne weg, ich habe einen iPod Touch mit 8 GB vor einer geraumen Zeit gebraucht erworben und bin relativ zufrieden. Bis heute hatte ich ein geJailbreakedes Gerät, welches ermöglicht, dass man Anwendungen installieren kann und das ganze Dateisystem offengelegt wird, so kann man z.B. ein Programm namens Instinct installieren und bekommt so ein besseres Musik gefühl aber darum soll es sich hier nicht handeln.

Erstmal finde ich es dreißt, dass, wenn ich für 19,99€ das Upgrade bezahlt habe erneut 7,99€ rausrücken soll um die neuste Software zu installieren. Aus diesem Grund habe ich einmal gegoogled und herausgefunden, dass die Datei “iPod1,1_2.0_5A347_Restore.ipsw” im Internet herumschwirrt und gleich heruntergeladen und durch klicken auf Wiederherstellen(während ich Shift halte) die Datei ausgewählt und erfolgreich installiert. Da dann mein Mail.app nicht mehr funktioniert hatte musste ich den iPod im Recovery Modus starten und habe das gleiche Prozedere noch einmal durch geführt und tada”Softwareversion: 2.0″ umsonst ;)

Was mich allerdings immer noch stört ist, dass ich keine E-Mails im Querformat schreiben kann :( aber mich freut es, dass jetzt ein Screenshottool eingebaut ist, welches man aktiviert indem man “Home” und gleichzeitig “Lock” kurz drückt.

Da der iPod gerade in den Nachrichten sehr vertreten ist, sind selbst die Preise für einen iPod Touch mit 8GB mehr als doppelt so hoch wie in der Woche(war 60€ oder gar 1€ ist ~120€) davor, daher empfehle ich zwei bis drei Wochen zu warten und einfach eBay oder so etwas zu beobachten.

First no I don’t mean crackers or “black-hat hackers”! I am talking about people who go thru code and finde security issues. You could compare them with the people who do the crash test with cars. They look for errors which could be fatal and get paid for it. Whats the difference between a white-hat and a black-hat? Its simple the first “kind” want to secure your websites and either tell you where the error is or want money for it. Crackers want to do bad stuff they want you to be frustrated don’t give you a clue and tend to do illigal things with your server once its been “cracked”. So if you can’t get a white-hat to hack and secure your code, then you should learn yourself ;)  I can’t advise you any english books since I mostly have tought myself but some things you should always keep in mind: “never trust the users input”, “every input which is going thru JS has to be checked” and “get all the updates you can get!”.

The tutorial I found at howtoforge (http://howtoforge.com/proftpd_mysql_virtual_hosting) is a great tutorial on how to install Proftpd, but it has an error in it which almost killed me today.

After you did as it says you might not be able to connect via ftp localhost.  This could be because the /etc/proftpd/proftpd.conf misses a little argument before “SQLConnectInfo ftp@localhost proftpd password”.

Try to add the line “SQLBackend mysql”. And restart proftpd. If its still not working you, you might have forgotten to install libmysqlclient*-dev.

In the modern web era XHTML and CSS based webdesigns are getting more and more popular. The advantages are obvious:

  • Cleaner HTML sourcecode
  • faster webpages
  • higher accessibility

The problem is, that there is a whole bunch of directives that you have to learn first, and once you have learned them, you realize that CSS does not always behave the way you expect it to or browsers interpret it different - you have to write workarounds.

But often people encounter these problems because they just don’t understand what the CSS code they are writing is actually doing.

image1.jpgOne scenario, that is not necessarily self-explanatory for CSS beginners is how to put two div boxes next to each other - a simple two column layout. They want to create a structure like shown in this image.

One of the problems is, that they don’t think in CSS containers yet. What you usually want to do, is having a wrapper, or mother container, around the structure elements (I call them like that. This would be the navigation and content container).
So the structure you are planning should look like this:

image2.jpg

image3.jpgThe advantage of this wrapping container is, that the navigation and content area always have the same height. This way, if we added a footer underneath it, it would be pushed further down automatically, the more the content expands.

We can also center the design very easily etc., but that would be beyond the scope of this introduction to floats. For now just believe me, that it makes more sense to have a wrapper around the structure elements.

Finally we start to write HTML

So what people now do is to begin and write the markup for that website, which might look like this:

<!-- ... header and other markup -->
<div id="wrapper">
<div id="navigation">
<!-- links here -->
</div>

<div id="content">
<!-- content here -->
</div>
</div>
<!-- ... footer and other markup -->

CSS comes into the game

The CSS they create for this, looks like this:

#navigation
{
float:left;
}

image4.jpgWhat does this float mean? It basically tells the browser, on which side of the mother element (in this case the #wrapper div) the navigation should be positioned. This is exactly what we want. The content is nicely moved towards the center of the design and you can see the content area. But when we have more content and the height of the content container exceeds the navigations height, it moves back to the left side, which looks like this.

We do not want this to happen, so we need to assign the navigation container a fixed with, and give the content some space on its left side (we “push” it to the right by adding the margin-left):

#navigation
{
float:left;
width:200px;
}

#content
{
margin-left:210px;
}

The problem of not talking to the mother

image5.jpgYet another problem that most CSS beginners don’t know about is the fatal behavior of floated elements in relation to the mother elements height. We would expect, when the navigation grows in height that the mother element stretches with it, but it doesn’t.
As long as the content container is longer than the navigation container, this effect does not occur, because the content stretches the mother container. But once the navigation is longer than the content, it runs out of the container (see picture).

This is definately not, what we expected and at this point many beginners decide that CSS is stupid and stick with their HTML table designs. But wait, didn’t I say that there is a whole bunch of possibilities out there to overcome weird CSS behavior? Yes!

CSS-Magic to the rescue!

We have two possibilities to make the #wrapper container stretch with the navigation. We could either:

Make it a floating element too

#wrapper
{
float:left;
}

or We could change our markup a little bit

<!-- ... header and other markup -->
<div id="wrapper">
<div id="navigation">
<!-- links here -->
</div>

<div id="content">
<!-- content here -->
</div>
<br class="clear" />
</div>
<!-- ... footer and other markup -->

You may have noticed, that we added the <br /> after both, the navigation and content. Just adding the break does not change a whole lot in our design. But by adding some CSS  (therefore the class “clear”) we can achieve a big effect:

br.clear
{
clear:both;
}

image6.jpgWe can make the #wrapper element stretch, too. Why does this happen?

The clear attribute places all elements underneath the floating elements on both sides of it.
Since #navigation is floated to the left side, and the break with clear:both moves when there are floating elements either to the left or the right, it moves down and stretches the mother element #wrapper. The image on the right side illustrates this.

Which version should you use?

This depends on the scenario. Both versions have advantages over the other. In the first version, you have to add a float to the #wrapper element, which could destroy its centered position, if it was centered. It would just appear on the left side.

For the second scenario you have to add additional markup, which would contradict the basic idea of xHTML and CSS designs, just having the content structured and do the design with CSS. However in some cases it might be the most elegant way to achieve the desired effect.

Finally more and more (beta versions of) browsers don’t only pass the ACID2 test but Opera and the Webkit have started to pass even the ACID3 test. The browser creators are fighting to be the first the best and as of 2007 and 2008 the most standard-conform (FINALLY!).

Why is this interesting for Webdevelopers?

Its simple most developers spend almost one quarter of the time fixing bugs, which are caused by the non-standard conform rendering by the browsers like Internet Explorer. If every browser rendered everything the same way, the Webdeveloper wouldn’t have to use hacks to get it working and looking the same way in every browser.

What are the problems caused by having the standard mode of the rendering engine be standard conform? 

 There is only one real problem pages which have not been written standard conform look awful and users will not be able to use websites anymore, we have described this scenario in our first german post. Joel on Software has written a very nice post about exactly this. But having the non-standard conform websites look awful is great because the authors will be forced to renew their design and get it to be more easily accessible by search engines and even users themselves for example if they use their phone to view the website.

Are we excited? 

  YES, we are! With IE 6 getting older and older new projects will not have to be optimized for it in 1 year or so. Which will finally stop making us work late (and very frustrating) nights to get random problems to just disappear.