Client Side Vs. Server Side Code

Posted on by
Reply

In my experience, one of the most common pitfalls for beginning programmers is not understanding the relationships between objects in their environment. This is especially the case in web development where there is in almost every case a blend between multiple client side and server side scripts. Failure to understand the the way browsers and servers communicate or the relationships between (X)HTML (or JavaScript or CSS etc) and PHP (insert alternative language here) will certainly lead to a poor or incorrect implementation. If you are an experienced programmer you probably won’t gain much from reading this, but if you are a beginner, hopefully I can provide some insight that will save you a lot of trouble.

The difference between client side and server side code is fairly simple. Client side code is processed by the client (the browser to be more specific) while server side code is processed by the server. HTML for example is parsed by the browser; the browser is responsible for taking that code and turning it into what you see in your window. For the purposes of parsing web pages, there is a short list of the types of code the browser can deal with. A typical web page, as far as the client is concerned, consists of some flavor of HTML often supplemented by CSS, or JavaScript (an exhaustive list of the types of client side code is beyond the scope of this entry).

Server side code, on the other hand, is never seen by the browser. The browser is not and should never need to be aware of server side scripts such as PHP. While a web page consists of client side code, this code is often either partially or entirely generated by a server side script. For example:

$title = 'Client Side Vs. Server Side Code';
if($title == '')
	echo '<title>Tinsology</title>';
else
	echo "<title>$title</title>";

When you navigate to a page containing the code above the browser will see “<title>Client Side Vs. Server Side Code</title>”. That’s it. The browser does not see any of the PHP code that generated the title. When you request a page containing PHP code from the server, the server first processes that page and then sends the resulting output to the client.

Server side code is browser independent (unless explicitly coded otherwise). This means that if the page you create looks different in Internet Explorer than it does in Opera it has nothing to do with your PHP code, but rather the resulting client side code.

Bubble Sort is Never the Answer

Posted on by
1

It is not too often in the real world that you have to implement your own sort. Generally, whatever language you are using has a library with this functionality built in. If the occasion does arise, however, it is important to understand which algorithms are applicable in which situations. As with most choices, there is no absolute correct answer; there are many trade offs to consider. When choosing an algorithm there are three things you should consider: performance, overhead, and ease of implementation.

You should give equal consideration to each of these factors, disregarding any one of them can lead to poor choices. It is common, for instance, for people to ignore the ease of implementation and focus on the performance of the algorithm. The problem with this is that not every operation is critical. No one is going to die if they songs on their play list do not get sorted quickly enough. Programmer time is more expensive than run time as a professor of mine often said. In addition to this, some high performance algorithms can slower than simpler algorithms due to overhead. If you are sorting 100 items, you can probably insertion sort them just as fast or faster than you can heap sort them. The same would not be true with one million items; heap sort would be faster.

Once we consider all of the factors, you should find that no one algorithm is ideal in every case. There are some algorithms, however, that are not ideal in any case. Unfortunately one of these algorithms is among the most popular: bubble sort. Bubble sort is a very simple algorithm to implement and it has little overhead. The problem lies in its performance. You might think that this conflicts with my earlier point that even simple, low performance algorithms can be faster than others in the right situation. You also might think that bubble sort, being easy to implement, makes up for its performance short comings. This would be true, if it were not the case that there are algorithms that are equally simple to implement, require just as little overhead, and perform better in practice.

Insertion sort is one such algorithm. Like bubble sort it is an in place sort, and is just as easy to implement. Both algorithms have the same time complexity (O notation), but in practice insertion sort performs better in most cases. This being the case you may wonder why bubble sort is even around. Certainly if it is obsolete pages regarding its implementation should be torn out of books and mentioning it should be punishable by a swift slap with a keyboard. Maybe not. When I learned bubble sort it was as an example of how not to sort. In my non-expert opinion, it is equally important to understand how NOT to do things as it is important to understand how TO do them. My point? Learn bubble sort, but never use it.

CSS Drop Cap Effect

Posted on by
7

If you’ve ever read a magazine you’ve probably noticed that often the first character on a page stands out. Usually its larger, a different color, or stylized in some way. This effect is called an initial or a drop cap. Using CSS it is fairly simple to achieve this effect. CSS supports the pseudo element “first-letter” which allows you to modify the appearance on the first letter of a paragraph:

p:first-letter {
//style here
}

Notice that the code above will effect the first letter of every paragraph. For the purpose of creating a drop cap effect, we only want the first paragraph to be affected, so we must also use the first-child pseudo class:

p:first-child:first-letter {
//style here
}

Using this method you can now implement a drop cap effect. To do this you first need to decide between two common styles. In some cases the initial falls below the first line, in others the base of the initial is consistent with the base of the rest of the line. With respect to CSS, the difference between the two will be a float.

p:first-child:first-letter {
	/* The float causes the top of the intial to
	be consistent with the rest of the line, while
	the base is allowed to extend below. Removing
	this line will cause the base to line up with
	the rest of the line */
	float: left;
	//style here
}

You can add any of the following properties to your first-letter element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

If you decide to use the float, I recommend using the after pseudo element to clear the float following the paragraph. Failing to do so may cause the drop cap the interfere with the following paragraph, if the first paragraph is short.

p:first-child:first-letter {
	float: left;
	//style here
}
p:first-child:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

If you are using this in your WordPress theme, you should specify the class of the div your post is wrapped with. In my case it is the “post” class:

.post p:first-child:first-letter {
	float: left;
	//style here
}
.post p:first-child:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

In addition to this you may also want to use the first-line pseudo element the modify the style of the first line, which is also common in publications. Here is the current drop cap code I’m using:

.post p:first-child:first-letter {
	float:left;
	background-color: #eeeeee;
	line-height:30px;
	padding: 5px;
	color: #237ab2;
	font-weight: bold;
	font-size:40px;
}
.post p:first-child:first-line{
	font-variant: small-caps;
}
.post p:first-child:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

Know What to Expect from your Programming Language

Posted on by
Reply

I often see people asking how to do things with a given programming language that it was not intended to do. Recently I read a post from someone who wanted to know how to take a java program and compile it to a .exe. For anyone who is not aware, Java programs are not compiled in the same way a C++ program is compiled. The java source code is first compiled to bytecode. That bytecode is then interpreted by the java virtual machine. The writer was intending to get a performance boost by having the code compiled rather than interpreted.

While it is true that a compiled language can be faster than a interpreted language, it is not the case that every compiler can out perform every interpreter. This is especially true if you are compiling code that was intended to be interpreted. There are Java compilers out there, but the Java interpreter is much more mature than any of them. In addition to the non-existent performance increase, by compiling this code you eliminate one of Java’s key features: portability. If you bypass the JVM then you will have to worry about which systems your code will run on and which they will not.

Ultimately, if you need code that is very fast the answer is not to take code in one language and tweak it into something it was never meant to be. This echos another problem: language dependence. Too often I see people who learn everything there is to know about one programming language, and never bother to learn another. Being a programmer does not mean being a C++ programming, or a Java programmer, or a PHP programmer, it means understanding the concepts of programming and having that understanding transcend multiple languages. This will remain to be true until someone comes up with a catch-all language that is ideal in every case. Until then if you need really fast code think about C++, if you want safe portable code think about Java. You should also be aware that these trade-offs are not absolute. Not every Java program is slower than an equivalent C++ program, and a poorly written C++ program is certainly slower than a well written Java program.

The example I mentioned above is only one of many. I’ve seen people that want to write desktop applications in PHP, write .NET apps that work without the .NET framework, and use javascript in an offline application. Though someone might have hacked something together that facilitates this, be aware that in most cases these implementations are not ideal. If you need to do something that the language you are using was not intended to do then that is a sign you need to branch out and become a programmer.

PHP: Complex Variables in Strings

Posted on by
2

If you are at all familiar with PHP you are probably aware that you can put variables inside double quotes. For example:

$x = 5;
echo "x is equal to $x";

The above code will output “x is equal to 5″. This method works fine with simple variables, but will fail with references to member variables of objects or arrays:

//will not work
echo "x is equal to $myObject->x";
//also won't work
echo "x is equal to $myArra['x']";

To avoid this problem, PHP allows you to use curly braces to seperate variables that need to be parsed:

//will work
echo "x is equal to {$myObject->x}";

This is also useful in situations where you want to output a variable in the middle of a word:

//will not work
$birthday = 16;
echo "My birthday is on the $birthdayth";
//will work
echo "My birthday is on the {$birthday}th";

Note that { cannot be escaped in a string. If { is followed by $ PHP will assume that you want to parse a variable. To get the literal {$ you must escape it like this:

echo "Curly brace followed by dollar sign: {\$";
//will output
//Curly brace followed by dollar sign: {$

The Programmer’s Cardinal Sin

Posted on by
1

If you are a programmer you should do yourself, and anyone else working with your code, a favor: stop using copy and paste. If there is a case where you need to use the exact same, or very similar, code in multiple places, that is a sign that you should be using a function, object, or other structure. I say this not for the sake of ‘proper coding practices’, but to save you and anyone else dealing with your code a massive headache.

I admit that there have been cases where I have copied code (I was young! I didn’t know what I was doing). From experience, I can tell you that I have almost always regretted it. For one, it is very annoying to have to make changes in multiple parts of your program. For another, when you copy code, you also copy any errors in that code. You might be inclined to think that you’ve been careful or you are certain that this code doesn’t contain any errors, but in retrospect, I think at least half of the time I’ve done this even when it is a fairly simple program, I’ve had to go back and fix bugs in multiple places.

This headache is even worse for someone who is working with your code. When making changes or updates that person may think that they’ve done what they intended when in fact they’ve only addressed half or less of the problem. The same goes for errors: it can be extremely frustrating to think that you’ve fixed a problem and then have it present itself again because you are unaware that the original coder used copy and paste.

If you have the means, I advize you to attach USB electrodes (you can buy them at target) to yourself and have yourself zapped everytime you press ctrl+c.

PR 0 to 4… By Accident

Posted on by
Reply

After hearing some noise about Google having updated page rank, I got curious and decided to check the PR of this site. I launched this site shortly before the last update, when it was assigned the rank of zero. This time around, to my surprise, I found that the index, as well as one other page was ranked 4. This was surprising because I have not made any deliberate effort to increase the rank of this site. I didn’t submit to directories, I haven’t purchased links, spammed blogs or forums, or consulted with an ‘SEO Expert’.

So, how then, did I accomplish this feat? Did I discover a secret SEO technique? Did I go down the street to my local Google building and hold them up at gun point? If I had a secret I’d tell you. The reality is that I have been focusing almost exclusively on my content. At times, actually, it seems to me that that IS the secret. Whenever I see people asking how to increase their page rank, I see responses like “get more backlinks” and “post your links on forums”. I never see someone respond “improve the quality of your content”.

I don’t claim to all of a sudden be an expert on the topic, nor do I intend to brag up this ‘accomplishment’. My point is that spending time dropping links, submitting to directories, and sending fruit baskets to Google should all be secondary to improving your content. It is important to understand that high page rank is a symptom of high traffic. If  I, for whatever reason, wanted to catch the flu would I focus on giving myself a headache and inducing vomiting? No. I would go to the hospital, get down on my hands and knees, and start licking some floors. The same thing is true of page rank and traffic (not the licking floors part). Artificially increasing PR by spamming links will not lead to increased traffic.

Opera: A developer’s browser

Posted on by
1

My previous entry will suggest to the reader (and by suggest I mean scream aloud) that I am not fond of IE. In addition to this I mention that I use Opera as my primary browser. Typically for windows users, if you are not using IE you are using Firefox. Opera is a less popular browser, but I think much more useful for developers.

Out of the box Opera has several features that have made my life easier many times. One of them is fairly simple: if you want to validate a page, all you have to do is right click and click validate.

Another feature allows you to dynamically update the source code of a site. All of the popular browser allow you to view a page’s source, but Opera allows you to view that source, edit it, and have the changes applied to the currently open page. This if very useful for making adjustments to a layout, or on occasion, making a broke page work. For example, I was trying to register on a site using a captcha. Normally this isn’t a problem, but in this case the text field only allowed 4 characters, while the image contained 5. All I had to do to work around this was view the source, and change the size attribute to 5. This is the only case I can think of off the top of my head, but there are others.

This is just the tip of the iceberg. Opera’s developer console lets you view the DOM structure of a site and view cookies. If a site is hard coded to only work in IE or firefox, Opera can identify itself as either of those. If you want to open a page in another browser all you need to do right click select open with and choose any installed browser. The list keeps going.

If you haven’t given Opera a try you should definetly do so.

Internet Explorer No Longer Essential

Posted on by
Reply

I haven’t used IE as my primary browser for a long time. I switched from IE to Opera several years ago. Until recently, however, I’ve always had Internet Explorer installed. This is because there always seemed to be some website that either insisted on users using IE, or was coded in such a way that it only worked in IE. It seems counter-intuitive to me that the browser that is the least standards complient should be the one that everyone codes there website to work with, even at the expense of all of the other browsers, but that was the reality of the industry for a long time. Only now do I believe that that era is almost over; it is now possible to uninstall IE permanently.

The actually came to this conclusion by accident. A few months ago, my cable provider forced me to reactivate my Internet connection. This was altogether a very clumsy and inconvenient process. It consisted of me entering some personal information along with an account number and then waiting for their system to recognize my modem. Not only did this take an incredibly large amount of time, but I also had to complete the entire process in IE6. When I say IE6 I really mean IE6… their software downgraded IE7 without asking. Around an hour an a half later when the process was complete I found that this extremely (really I can’t stress this enough… Cox Communications I hope you read this) poorly written software had crippled IE. It crashed the moment I opened it.

Not wanting to deal with the additional stress of fixing this problem, having just spent a considerable amount of time dealing with my cable company, I happily went about my business, using Opera as my primary browser as always. A few days ago I clicked the IE icon by mistake and was reminded that it was still crippled. After a few months I had not yet needed to open IE even once. This came as a surprise to me as in the past I had occasionally needed to use IE to do things like accessing my bank account and watching certain videos.

So what is the blame for this development. Part of it, I think, is that developers have been (finally) focusing more on cross-browser support. Another part is the browsers themselves; Opera has a feature to identify itself as other browsers, which i nice for circumventing sites that are hardcoded to only allow FireFox or IE. Regardless of what is responsible, I think this is a step in the right direction.