Send large emails in php

I’ve encountered this problem once a long time ago, and used a lot of time finding a solution back then. Probably because no one really directly issued this problem.

When you send large text in your mail, specially HTML, you have to remember to encode the message right and chunk it. Why? The email standard RFC2822 only accepts line lengths of 998 chars, and if you send longer lines you probably encounter a lot of problems in different email clients. This may be line breaks or spaces after every chunk of 998 chars, that could be in the middle of an HTML tag or link, making the email body a mess.

To avoid this, you have to use base64 encoding on the email body header:

“Content-Transfer-Encoding: base64\r\n”

The second thing you have to do is to encode your content string with base64 and chunk it into chunks before appending to the email.

chunk_split(base64_encode($content))

base64 encoding is something email clients can read and because the sting of HTML is encoded into this format you don’t get the spaces between every chunk of content when the client displays the content.

These two lines is the only thing you probably need to append when you ha long text or large emails with data longer than 998 chars. Today I encountered this problem again, and I knew about the solution so I knew what to google to find the right answer. But I did not find it right away, because there was not any really good, and short, explanation anywhere that said exactly what I needed to do.

Readonly dropdowns

As a developer you probably meet this problem at one point – how to make the dropdown select a readonly element. This works just find with other inputs where you can say readonly=”readonly”, but a <select> does not have this option – it has only the disabled=”disabled”, but this will not post the element.

My solution is a little bit of jQuery (this can be done in plain javascript too, but it’s a bit longer code), that disables all off the <option> tags that are not selected – then the <select> still is available for post with the current selected <option> tags and with the rest disabled so that the <select> can be viewed but not changed (Read Only).

The code for readonly:
$("#selectid option").not(":selected").attr("disabled", "disabled");
The code for resetting:
$("#selectid option").not(":selected").attr("disabled", "");

Hope this helped.
Do you have a better/easier solution? Please share.

Sticky Note with CSS and JavaScript

I wanted to se how easy it was to make one of those yellow sticky notes with CSS and a little bit of bonus javasrcipt. Current version is a bit flawed – but works, is easily modded, and shows the idea.

To see the demo, click here

This can be made more simple by removing some JavaScript functionality. For instance, It’s really an overload to include jQuery and jQueryUI for the small stuff it adds, when it can be done in some simple lines of good old JavaScript – but if you have included the libraries already, then use them. This should work cross browser as well.

Features:
– Hidden by default, opens by click
– Different styles to different points
– Lines made in CSS
– Linetrough points by click
– Gap at top and bottom + close button at top
– Draggable

Lacks:
– Toggle on/off by click not implemented
– Some smaller bugs
– No real modifying functionality (like adding/removing/editing)

Fix to the “Corrupt JPEG data” error

Sometimes images get corrupted, and can not be uploaded correctly using php. Where I work this happened once in a while, and I did not know how to fix it. When a user sent me an image by email, I could at least recognize the error – It was “Corrupt JPEG data: XXXX extraneous bytes before marker XxXX”.

Having known this I could google it, but the solution was not easy to find because the problem was not in PHP, but in the image. Anyway, the fix was simple. Just ignore the error by adding this to the code:

ini_set(“gd.jpeg_ignore_warning”, true);

An other solution is to save the file again with a program like Photoshop(that can open these rare corrupted jpegs) – then it is saved correctly as an uncorrupted jpeg file and can be uploaded.

A DOM Experience

I’m currently writing a website, and trying out different things to learn what the best solution is. This time around I was playing around with how to easiest create the HTML elements and attributes, and ended up with creating a simple HTML class. When I looked at it, it reminded me of DOM – and I asked myself – why didn’t I use that in the first place?

I use mainly DOM to create XML, and since XHTML has a XML structure and can be validated with a DTD – It should work well to build it with DOM elements and attributes.

In the beginning it seemed harmless and went pretty well, but when I then wanted to test my code it went bad. The problem was the same thing that I struggled some years back when I first was introduced to DOM, and I think it may be the one reason that it makes hard to program DOM in an object-oriented fashion. DOM is not a very flexible way to create a whole advanced web page in anyways, but maybe especially if you have chunks of HTML returned by objects.

The problem of DOM in my opinion is simply that you cannot just create an element and add it to a tree. No, you need a DOMDocument object, to create the element belonging to the tree, and then you have to add the element to an element already on that tree. Why is this so bad then? Because you cannot make chunks of XML and add it in to the document without having access to the parent and the root element. It can become pretty messy to pass them along the whole time.

DOM is great for modifying HTML and XML, getting stuff out and adding content to the tree – not creating them. That is my current opinion. Maybe there is some good ways to do it, but I didn’t want to waste my time anymore experimenting on it.

Back to my HTML class: This one can do it just as I created it to, generating HTML – not modifying, not adding content to a file nor getting stuff out.

Title is important to rank

One of the main keywords to my site did a bad ranking on google, so I tried to fix it.

It ranked on page 12-15 on a search – tested on a weekly basis. First off I tried to add the keyword into more noticeable places on the site, both inside the h1 tag, but also in text. That did not make any improvement at all.

Then I noticed that almost every result above had the keyword searched for in the title tag, so I put the word up there, and guess what? Now my site is at page 7 on that keyword… So, I conclude, title tag is very important for SEO.

How to set that title tag?

I’m in that place in developing my new site that I have to decide how I will manage the inclusion of pages, and there is a problem what I’ve really never bother about before. How to change the title tag in HTML the best possible way. This is a must for several reasons. First off, it makes the SEO(Search Engine Optimisation) better by giving a descriptive title to the page that show up in results. Secondly, most browsers now use tabbed browsing and to se on the tab what page it is you are on is a good thing.

Now, I have to tell that I do not use frameworks – mainly because I want to learn stuff myself first – so even thou they probably have implemented a good solution, I still need to fine one myself that will satisfy my needs and make the programming part good.

The problem might not be a big problem, but it is really a good example on why a good design should be implemented. The way I have done it before is simply to have one title for each page – because the title is in the header, and the header was an HTML file I included at the top of the php. Easy fix is to add some php that gets the page attribute from the url, and then does an if else on every page to give the right title. The problem is, this is an if else, or switch, that you then probably have to implement a lot of times in the code – for example to find out which menu item you are currently on – and makes the code unneccessary hard to read. The rule of making most of the logic in a underlaying architectural layer should apply.

So, the solution then? Well, I tell you my simple plan that is under developement.

I’m going to make the page a PHP Object, (pseudocode) like this:

$page = new Page($_GET['page']);

The “?page=user” is set in as an attribute to the page object. The same is done with the id=1, and other attributes if they exists. Then when the page is printed the header is put together.

$page->printHTML();

printHTML() is using the self::getHeader and self::getBody to build the complete HTML wrapped in Should Body and Header be Objects too?
Should Footer, mainBody, navBar, Logo, sideBar be objects as well?

To be honest, I really don’t know how far I will make it – but I do se a pattern that every changeable part of the design should be objects – so that they can be built on they own. Especially Header, Body and sideBar(that is a part of the body). This is a bit out of scope right now, but the point is to make a design that is object-oriented right to the core, making the attributes on the object decide what HTML to include, and then present it the right way.

Back to the title, lets imagine we have a simple Page object with a simple all in one getHTML() function. This then contain the following simplified code:

return ''.self::getTitle().''.self::getBody().'';

The getTitle() function should do something like this:

$title = 'Sitename - '.$this->page; //User
if($this->id){
$user = new User($this->id);
$user->get(); //Get the user from database
$title .= ' - '.$user->getName();
}
return $title;

This is not the code I’m going to use, it’s just to show the logic. I think this approach gives good practise in programming an OO(Object Oriented) way, and hopefully makes the site flexible too.

Does this make any sense at all?