<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>web programming &#8211; stoimen&#039;s web log</title>
	<atom:link href="/tag/web-programming/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>on web development</description>
	<lastBuildDate>Tue, 13 Feb 2018 08:18:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.0.3</generator>
	<item>
		<title>Computer Algorithms: Stack and Queue</title>
		<link>/2012/06/05/computer-algorithms-stack-and-queue-data-structure/</link>
		<comments>/2012/06/05/computer-algorithms-stack-and-queue-data-structure/#comments</comments>
		<pubDate>Tue, 05 Jun 2012 09:54:13 +0000</pubDate>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
				<category><![CDATA[algorithms]]></category>
		<category><![CDATA[data structures]]></category>
		<category><![CDATA[$_head]]></category>
		<category><![CDATA[Abstract data type]]></category>
		<category><![CDATA[computer algorithms]]></category>
		<category><![CDATA[Data structures]]></category>
		<category><![CDATA[Extinction]]></category>
		<category><![CDATA[FALSE]]></category>
		<category><![CDATA[heapsort algorithm]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[LIFO]]></category>
		<category><![CDATA[Linked list]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Pointer]]></category>
		<category><![CDATA[Queue]]></category>
		<category><![CDATA[Shunting-yard algorithm]]></category>
		<category><![CDATA[Stack]]></category>
		<category><![CDATA[Subroutine]]></category>
		<category><![CDATA[Technology/Internet]]></category>
		<category><![CDATA[Web browser]]></category>
		<category><![CDATA[web programming]]></category>

		<guid isPermaLink="false">/?p=3173</guid>
		<description><![CDATA[Introduction Every developer knows that computer algorithms are tightly related to data structures. Indeed many of the algorithms depend on a data structures and can be very effective for some data structures and ineffective for others. A typical example of this is the heapsort algorithm, which depends on a data structure called “heap”. In this &#8230; <a href="/2012/06/05/computer-algorithms-stack-and-queue-data-structure/" class="more-link">Continue reading <span class="screen-reader-text">Computer Algorithms: Stack and Queue</span> <span class="meta-nav">&#8594;</span></a><div class='yarpp-related-rss'>

Related posts:<ol>
<li><a href="/2010/07/16/friday-algorithms-a-data-structure-javascript-stack/" rel="bookmark" title="Friday Algorithms: A Data Structure: JavaScript Stack">Friday Algorithms: A Data Structure: JavaScript Stack </a></li>
<li><a href="/2012/06/14/computer-algorithms-linked-list-data-structure/" rel="bookmark" title="Computer Algorithms: Linked List">Computer Algorithms: Linked List </a></li>
<li><a href="/2012/07/24/php-arrays-or-linked-lists/" rel="bookmark" title="PHP: Arrays or Linked Lists?">PHP: Arrays or Linked Lists? </a></li>
<li><a href="/2017/09/14/data-structures-infographic-stack-queue/" rel="bookmark" title="Data Structures Infographic: Stack &#038; Queue">Data Structures Infographic: Stack &#038; Queue </a></li>
</ol>
</div>
]]></description>
				<content:encoded><![CDATA[<h2>Introduction</h2>
<p>Every developer knows that <a href="/category/algorithms/" title="Algorithms on stoimen.com">computer algorithms</a> are tightly related to data structures. Indeed many of the algorithms depend on a data structures and can be very effective for some data structures and ineffective for others. A typical example of this is the heapsort algorithm, which depends on a data structure called “heap”. In this case although the stack and the queue are data structures instead of pure algorithms it&#8217;s imporant to understand their structure and the way they operate over data. </p>
<p>However, before we continue with the concrete realization of the stack and the queue, let’s first take a look on the definition of this term. A data structure is a logical abstraction that “models” the real world and presents (stores) our data in a specific format. The access to this data structure is often predefined thus we can access directly every item containing data. This help us to perform a different kind of tasks and operations over different kind of data structures &#8211; insert, delete, search, etc.. A typical data structures are the stack, the queue, the linked list and the tree.</p>
<p>All these structures help us perform specific operations effectively. For instance searching in a balanced tree is faster than searching in a linked list.</p>
<p>It is also very important to note that data structures can be represented in many different ways. We can model them using arrays or pointers, as shown in this post. In fact the most important thing is to represent the logical structure of the data structure you’re modeling. Thus the stack is a structure that follows the LIFO (Last In First Out) principle and it doesn’t matter how it is represented in our program (whether it will be coded with an array or with pointers). The important thing into a stack representation is to follow the LIFO principle correctly. In this case if the stack is an array only its top should be accessible and the only operation must be inserting new top of the stack.<br />
<span id="more-3173"></span></p>
<h2>Overview</h2>
<p>The stack and the queue are somehow related data structures as they represent two parts of somehow identical logics. Thus they are commonly described in pair.</p>
<h3>Stack</h3>
<p>The stack data structure models the real-world stack. You can think of it as stack of boxes one above the other. Thus the only way to put another item into the stack is to put it above all other items (on its top). This operation is often called “push”. In the other hand taking an item from the stack is called pop, and also only the highest item can be “poped”. The following image describes better the structure of the stack and its operations &#8211; push and pop.</p>
<figure id="attachment_3178" style="width: 620px" class="wp-caption alignnone"><a href="/wp-content/uploads/2012/06/1.-Stack-Operations.png"><img src="/wp-content/uploads/2012/06/1.-Stack-Operations.png" alt="Stack Operations" title="Stack Operations" width="620" height="444" class="size-full wp-image-3178" srcset="/wp-content/uploads/2012/06/1.-Stack-Operations.png 620w, /wp-content/uploads/2012/06/1.-Stack-Operations-300x214.png 300w" sizes="(max-width: 620px) 100vw, 620px" /></a><figcaption class="wp-caption-text">The operations of insert and delete an item from the stack are commonly called push and pop!</figcaption></figure>
<p>We see here how computer data structures model the real world. The stack data structure indeed makes no exception and models the real-world stacks.</p>
<h3>Stack Implementation</h3>
<p>As I said a stack can be implemented in some different ways. The first approach is to use an array (using the specific language syntax of the programming language of your choice). Here’s the implementation of a stack using an array in <a href="/category/php/" title="PHP on stoimen.com">PHP</a>.</p>
<pre lang="PHP">
$stack = array();

function push($data, &$stack) {
	$stack[] = $data;
}

function pop(&$stack)
{
	$len = count($stack);
	$top = $stack[$len-1];
	
	unset($stack[$len-1]);
	
	return $top;
}

// array()
print_r($stack);

push(1, $stack);
push(2, $stack);
push('some test', $stack);
push(array(25,12,1999), $stack);

// [1, 2, 'some test', [25, 12, 1999]]
print_r($stack);

// [25, 12, 1999]
echo pop($stack);
// 'some test'
echo pop($stack);

// [1, 2]
print_r($stack);
</pre>
<p>However there are much easier ways to do the same thing with PHP since there are lots of predefined functions that work with stacks.</p>
<pre lang="PHP">
$stack = array();

function push($data, &$stack) {
	$stack[] = $data;
}

function pop(&$stack)
{
	return array_pop($stack);
}

// array()
print_r($stack);

push(1, $stack);
push(2, $stack);
push('some test', $stack);
push(array(25,12,1999), $stack);

// [1, 2, 'some test', [25, 12, 1999]]
print_r($stack);

// [25, 12, 1999]
echo pop($stack);
// 'some test'
echo pop($stack);

// [1, 2]
print_r($ret);
</pre>
<p>As in many programming languages here the example makes use of integers but it can be modified to work with more complex data types as objects, mutli dimensional arrays, etc. However we can use a higher level abstraction in order to represent a stack. Here&#8217;s a short example of a stack using pointers. The stack class only holds a pointer to the top of the stack. Thus only the top can be &#8220;poped&#8221;. Also each elements points to its predecessor. Using this abstraction we&#8217;re sure that the programmer can perform only these two operations &#8211; &#8220;pop&#8221; and &#8220;push&#8221;.</p>
<pre lang="PHP">
class Struct
{
	protected $_data = null;
	protected $_next = null;
	
	public function __construct($data, $next)
	{
		$this->_data = $data;
		$this->_next = $next;
	}
	
	public function getData()
	{
		return $this->_data;
	}
	
	public function setData(&$data)
	{
		$this->_data = $data;
	}
	
	public function getNext()
	{
		return $this->_next;
	}
	
	public function setNext(&$next)
	{
		$this->_next = $next;
	}
}

class Stack
{
	protected $_top = null;
	
	public function push($data)
	{
		$item = new Struct($data, null);
		
		if ($this->_top == null) {
			$this->_top = $item;
		} else {
			$item->setNext($this->_top);
			$this->_top = $item;
		}
	}

	public function pop()
	{
		if ($this->_top) {
			$t = $this->_top;
			$data = $t->getData();
			
			$this->_top = $this->_top->getNext();
			
			$t = null;
			
			return $data;
		}
	}
	
	public function __toString()
	{
		$output = '';
		$t = $this->_top;
		while ($t) {
			$output .= $t->getData() . ' ';
			$t = $t->getNext();
		}
		
		return $output;
	}
}

$s = new Stack();
$s->push(1);
$s->push(2);
$s->push(3);

// 3 2 1
echo $s;

$s->pop();
$s->pop();

// 1
echo $s;
</pre>
<h3>Queue</h3>
<p>As mentioned above the queue is somehow related to the stack data structure. However it follows a different principle &#8211; FIFO (First In First Out), which means that the item that has been in the queue for the longest time is retrieved first.</p>
<figure id="attachment_3177" style="width: 618px" class="wp-caption alignnone"><a href="/wp-content/uploads/2012/06/2.-Queue-Operations.png"><img src="/wp-content/uploads/2012/06/2.-Queue-Operations.png" alt="Queue Operations" title="Queue Operations" width="618" height="232" class="size-full wp-image-3177" srcset="/wp-content/uploads/2012/06/2.-Queue-Operations.png 618w, /wp-content/uploads/2012/06/2.-Queue-Operations-300x112.png 300w" sizes="(max-width: 618px) 100vw, 618px" /></a><figcaption class="wp-caption-text">Inserting and deleting from a queue happen in the opposite sites of the queue!</figcaption></figure>
<p>This comes again from the real world, where we can think of a queue of people waiting in front of a movie theater. In this case the person that has waited the most takes its ticket first.</p>
<h3>Queue Implementation</h3>
<p>An array representation of a queue isn’t a difficult task. However the only example of a queue here is using pointers. Indeed the following code syntax is very tightly related to PHP so only the main principles of supporting a queue functionality is important.</p>
<pre lang="PHP">
class Item
{
	public $data = null;
	public $next = null;
	public $prev = null;
	
	public function __construct($data)
	{
		$this->data = $data;
	}
}

class Queue
{
	protected $_head = null;
	protected $_tail = null;
	
	public function insert($data)
	{
		$item = new Item($data);
		
		if ($this->_head == NULL) {
			$this->_head = $item;
		} else if ($this->_tail == NULL) {
			$this->_tail = $item;
			$this->_head->next = $this->_tail;
			$this->_tail->prev = $this->_head;
		} else {
			$this->_tail->next = $item;
			$item->prev = $this->_tail;
			$this->_tail = $item;
		}
	}
	
	public function delete()
	{
		if (isset($this->_head->data)) {
			
			$temp = $this->_tail;
			$data = $temp->data;
			
			$this->_tail = $this->_tail->prev;
			
			if (isset($this->_tail->next))
				$this->_tail->next = null;
			else 
				$this->_tail = $this->_head = null;
			
			return $data;
		}
		
		return FALSE;
	}
	
	public function __toString()
	{
		$output = '';
		$t = $this->_head;
		while ($t) {
			$output .= $t->data . ' | ';
			$t = $t->next;
		}
		
		return $output;
	}
}


$q = new Queue();

$q->insert(1);
$q->insert(2);
$q->insert(3);

// 1 2 3
echo $q;

$q->delete();
$q->delete();

// 1
echo $q;

$q->insert(15);
$q->insert('hello');
$q->insert('world');
$q->delete();

// 1 15 "hello"
echo $q;
</pre>
<h2>Application</h2>
<p>Stacks and queues are widely used in programming. By defining stacks and queues we somehow predefine the way our data structure is accessed, thus we&#8217;re sure that our program will access the data in a specific manner. For instance if we code a queue for a list or upcomming commands, we&#8217;re sure that the most waited command will be executed first. In this case we predefine the order the commands are processed. In the web programming, especially in JavaScript, every developer knows what&#8217;s an event fired in a web browser environemtn. In case of many events, they&#8217;re putted into a queue and they are executed consecutively in the order they were fired by the user.</p>
<p>Another example is the execution stack of most of the programming compilers and interpreters. We know that in a OOP languages, such as PHP for instance, there&#8217;s a stack of function calls. In case of failure we can easily see the &#8220;stack trace&#8221;.</p>
<p>You see how many examples of queues and stacks there are in the real-world programming. These two structures are easy to implement yet very important in order to understand other more complex data structures as linked lists and trees.</p>
<div class='yarpp-related-rss'>
<p>Related posts:<ol>
<li><a href="/2010/07/16/friday-algorithms-a-data-structure-javascript-stack/" rel="bookmark" title="Friday Algorithms: A Data Structure: JavaScript Stack">Friday Algorithms: A Data Structure: JavaScript Stack </a></li>
<li><a href="/2012/06/14/computer-algorithms-linked-list-data-structure/" rel="bookmark" title="Computer Algorithms: Linked List">Computer Algorithms: Linked List </a></li>
<li><a href="/2012/07/24/php-arrays-or-linked-lists/" rel="bookmark" title="PHP: Arrays or Linked Lists?">PHP: Arrays or Linked Lists? </a></li>
<li><a href="/2017/09/14/data-structures-infographic-stack-queue/" rel="bookmark" title="Data Structures Infographic: Stack &#038; Queue">Data Structures Infographic: Stack &#038; Queue </a></li>
</ol></p>
</div>
]]></content:encoded>
			<wfw:commentRss>/2012/06/05/computer-algorithms-stack-and-queue-data-structure/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>More on CSS Optimization</title>
		<link>/2011/01/07/more-on-css-optimization/</link>
		<comments>/2011/01/07/more-on-css-optimization/#comments</comments>
		<pubDate>Fri, 07 Jan 2011 14:40:14 +0000</pubDate>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[micro tutorial]]></category>
		<category><![CDATA[Cascading Style Sheets]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[Minification]]></category>
		<category><![CDATA[possible solution]]></category>
		<category><![CDATA[Software engineering]]></category>
		<category><![CDATA[Style sheet]]></category>
		<category><![CDATA[Technology/Internet]]></category>
		<category><![CDATA[Web application]]></category>
		<category><![CDATA[web applications]]></category>
		<category><![CDATA[Web design]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[web programming]]></category>

		<guid isPermaLink="false">/?p=2101</guid>
		<description><![CDATA[As CSS files are first downloaded to the client and then executed, the main optimization is to make those files smaller. But that doesn&#8217;t mean only minifing! The Minification Process While with minification you can strip all the symbols that only take space, but are useless when the browser parses the file, there are some &#8230; <a href="/2011/01/07/more-on-css-optimization/" class="more-link">Continue reading <span class="screen-reader-text">More on CSS Optimization</span> <span class="meta-nav">&#8594;</span></a><div class='yarpp-related-rss'>

Related posts:<ol>
<li><a href="/2010/01/30/optimizing-css-five-simple-steps/" rel="bookmark" title="Optimizing CSS. Five simple steps!">Optimizing CSS. Five simple steps! </a></li>
<li><a href="/2010/02/05/css-sprites-go-beyond-the-limits-with-base64/" rel="bookmark" title="CSS sprites. Go beyond the limits with base64!">CSS sprites. Go beyond the limits with base64! </a></li>
<li><a href="/2010/02/10/manage-javascript-and-css-includes-within-zend-framework-application/" rel="bookmark" title="Manage JavaScript and CSS includes within Zend Framework application">Manage JavaScript and CSS includes within Zend Framework application </a></li>
<li><a href="/2010/01/18/what-if-your-site-doesnt-use-all-of-the-css-selectors/" rel="bookmark" title="What if your site doesn&#8217;t use all of the CSS selectors?">What if your site doesn&#8217;t use all of the CSS selectors? </a></li>
</ol>
</div>
]]></description>
				<content:encoded><![CDATA[<p>As CSS files are first downloaded to the client and then executed, the main optimization is to make those files smaller. But that doesn&#8217;t mean only minifing!</p>
<p><a href="/wp-content/uploads/2011/01/css.jpg"><img class="alignleft size-full wp-image-2122" title="css" src="/wp-content/uploads/2011/01/css.jpg" alt="CSS" width="400" height="300" srcset="/wp-content/uploads/2011/01/css.jpg 400w, /wp-content/uploads/2011/01/css-300x225.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /></a><br />
<br clear="all" /></p>
<h2>The Minification Process</h2>
<p>While with minification you can strip all the symbols that only take space, but are useless when the browser parses the file, there are some other techniques, which in fact aren&#8217;t so simple, to speed up the loading process. By minification you get rid of the white spaces, tabs, new lines, etc., but the file may remain too large.</p>
<h2>Useless Rules</h2>
<p>Yes, sadly the browser doesn&#8217;t need all those white spaces, actually web developers need them. Just because this makes the file more readable, or readable at all. However most of the web applications have one large CSS file, typically named layout.css, main.css or whatever, that contains all the rules for the entire application. In many of the cases one page of a site doesn&#8217;t need all the rules for the site, so a possible solution is to remove all of the rules that aren&#8217;t used.</p>
<p>There are tools that may help you do the job. Such a tool, that I&#8217;m using is the Firefox add-on &#8211; <a title="Dust-Me Selectors" href="https://addons.mozilla.org/en-US/firefox/addon/5392/" target="_blank">Dust-Me Selectors</a>. Of course there are a lot other tools doing the same job, so it&#8217;s up to you to pick up one.</p>
<p>After removing all those useless rules you&#8217;ll see that the size of the file can be something like 20% of the size of the source file. This is interesting to note, because most of the time the minification cannot give you such performance benefit. In fact this comes with some issues.</p>
<h2>One Request or What?</h2>
<p>This is the dilemma of the web programming, isn&#8217;t it? However thus you can split the main CSS file to few smaller files, but they are named differently so you cannot expect the browser to cache them when the user visits the site for the first time.</p>
<p>The case must be, of course, tested against various situations, so you can decide what suits you. However the typical scenario is to optimize only few of the pages, as they might be the most visited &#8211; as for example the homepage. If two of the pages are mainly visited, than you can make custom, small, CSS files for them with only the necessary rules, and let the other pages with the main CSS file. If you&#8217;ve a lot of returning visitors, you can be sure the custom files will be cached (if the client cache is turned on) and the second time somebody visits the &#8220;homepage&#8221; for example the page will load faster.</p>
<div class='yarpp-related-rss'>
<p>Related posts:<ol>
<li><a href="/2010/01/30/optimizing-css-five-simple-steps/" rel="bookmark" title="Optimizing CSS. Five simple steps!">Optimizing CSS. Five simple steps! </a></li>
<li><a href="/2010/02/05/css-sprites-go-beyond-the-limits-with-base64/" rel="bookmark" title="CSS sprites. Go beyond the limits with base64!">CSS sprites. Go beyond the limits with base64! </a></li>
<li><a href="/2010/02/10/manage-javascript-and-css-includes-within-zend-framework-application/" rel="bookmark" title="Manage JavaScript and CSS includes within Zend Framework application">Manage JavaScript and CSS includes within Zend Framework application </a></li>
<li><a href="/2010/01/18/what-if-your-site-doesnt-use-all-of-the-css-selectors/" rel="bookmark" title="What if your site doesn&#8217;t use all of the CSS selectors?">What if your site doesn&#8217;t use all of the CSS selectors? </a></li>
</ol></p>
</div>
]]></content:encoded>
			<wfw:commentRss>/2011/01/07/more-on-css-optimization/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
