feed.xml

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <channel>
        <title>Arka Roy</title>
        <description>Provides professional services on web design, development, web application, digital marketing, social marketing.</description>
        <link>http://www.arkaroy.net/</link>
        <atom:link href="http://www.arkaroy.net/feed.xml" rel="self" type="application/rss+xml" />
        <pubDate>Wed, 20 May 2015 15:35:56 +0530</pubDate>
        <lastBuildDate>Wed, 20 May 2015 15:35:56 +0530</lastBuildDate>
        
            <item>
                <title>Social Popularity Analyzer</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;A simple tool to analyze social popularity of any given url or link in different social media.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;/social-popularity-analyzer/&quot;&gt;&lt;img src=&quot;/assets/image/social-popularity-analyzer-01.jpg&quot; alt=&quot;Social Popularity Analyzer&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
</description>
                <pubDate>Sun, 12 Apr 2015 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/social-popularity-analyzer/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/social-popularity-analyzer/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>How to use Zaq: Codeigniter Template Parser Engine</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Zaq is a PHP based template parser engine developed to work with Codeigniter. This library has been developed for developers to integrate php codes in views easily. Using this library will also allow the view file to be more readable. View files in Codeigniter (or in any other framework following MVC) always contains both html and php codes which make them a bit harder to read. This problem can be eradicated by using a parser engine which makes the view files a lot more easier to work with.&lt;/p&gt;

&lt;p&gt;Codeigniter, by default, comes with an optional template parser. But, unfortunately, that one does not provide sufficient pseudo markup to work with. Zaq, without doubt, is able to provide much more flexibility while building view files with pseudo markup to replace php codes.&lt;/p&gt;

&lt;p&gt;Let’s take a look at Zaq’s insight and usage.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;installation&quot;&gt;Installation&lt;/h2&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;a href=&quot;https://github.com/iarkaroy/Zaq-Codeigniter-Template-Parser/archive/master.zip&quot;&gt;&lt;strong&gt;Download Zaq&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Copy &lt;code&gt;libraries/Zaq.php&lt;/code&gt; to your &lt;code&gt;application/libraries/&lt;/code&gt; folder&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Copy &lt;code&gt;config/zaq.php&lt;/code&gt; to your &lt;code&gt;application/config/&lt;/code&gt; folder.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Create the folder if not exists: &lt;code&gt;application/cache&lt;/code&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Set &lt;code&gt;application/cache&lt;/code&gt; writable.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;initialization&quot;&gt;Initialization&lt;/h2&gt;

&lt;p&gt;Like other libraries in CodeIgniter, the Zaq library class is initialized in your controller using the &lt;code&gt;$this-&amp;gt;load-&amp;gt;library()&lt;/code&gt; method:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$this-&amp;gt;load-&amp;gt;library(&#39;zaq&#39;);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Or you can autoload the library in &lt;code&gt;autoload.php&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Once loaded, the Zaq library object will be available using: &lt;code&gt;$this-&amp;gt;zaq&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;parsing-viewstemplates&quot;&gt;Parsing Views/Templates&lt;/h2&gt;

&lt;p&gt;You can use the &lt;code&gt;parse()&lt;/code&gt; method to parse (or render) your views or templates. The syntax is:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$this-&amp;gt;zaq-&amp;gt;parse( $view, $data = array(), $return = FALSE );
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The first parameter contains the name of the view file, the second parameter contains an associative array of data to be made available in the template, and the third parameter specify whether to return the parsed string.&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$data = array(
    &#39;products&#39; =&amp;gt; array(
        array( &#39;title&#39; =&amp;gt; &#39;Shirts&#39;, &#39;link&#39; =&amp;gt; &#39;/shirts&#39; ),
        array( &#39;title&#39; =&amp;gt; &#39;Trousers&#39;, &#39;link&#39; =&amp;gt; &#39;/trousers&#39; ),
        array( &#39;title&#39; =&amp;gt; &#39;Shoes&#39;, &#39;link&#39; =&amp;gt; &#39;/shoes&#39; ),
        array( &#39;title&#39; =&amp;gt; &#39;Belts&#39;, &#39;link&#39; =&amp;gt; &#39;/belts&#39; ),
    ),
);

$this-&amp;gt;zaq-&amp;gt;parse( &#39;products/list&#39;, $data );
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;There is no need to “echo” or do something with the data returned by &lt;code&gt;$this-&amp;gt;zaq-&amp;gt;parse()&lt;/code&gt;. It is automatically passed to the output class to be sent to the browser. However, if you do want the data returned instead of sent to the output class you can pass TRUE (boolean) as the third parameter:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$string = $this-&amp;gt;zaq-&amp;gt;parse(&#39;products/list&#39;, $data, TRUE);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;pseudo-markup&quot;&gt;Pseudo Markup&lt;/h2&gt;

&lt;p&gt;The pseudo markup of Zaq is much more cleaner than its equivalent php code. It enhance the readability and maintainability of the code. Designer will also be cheerful to work with a cleaner file.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h4 id=&quot;foreach&quot;&gt;&lt;strong&gt;foreach:&lt;/strong&gt;&lt;/h4&gt;

&lt;p&gt;From the above example, we are creating a template file at &lt;code&gt;products/list.php&lt;/code&gt;:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;ul&amp;gt;
{foreach products as product}
    &amp;lt;li&amp;gt;&amp;lt;a href=&quot;{product[link]}&quot;&amp;gt;{product[title]}&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
{/foreach}
&amp;lt;/ul&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The html output will be:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;ul&amp;gt;
    &amp;lt;li&amp;gt;&amp;lt;a href=&quot;/shirts&quot;&amp;gt;Shirts&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;&amp;lt;a href=&quot;/trousers&quot;&amp;gt;Trousers&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;&amp;lt;a href=&quot;/shoes&quot;&amp;gt;Shoes&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
    &amp;lt;li&amp;gt;&amp;lt;a href=&quot;/belts&quot;&amp;gt;Belts&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;To achieve the same output by php code:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;ul&amp;gt;
&amp;lt;?php foreach ( $products as $product ) : ?&amp;gt;
    &amp;lt;li&amp;gt;&amp;lt;a href=&quot;&amp;lt;?php echo $product[&#39;link&#39;] ; ?&amp;gt;&quot;&amp;gt;&amp;lt;?php echo $product[&#39;title&#39;] ; ?&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;?php endforeach ; ?&amp;gt;
&amp;lt;/ul&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Use foreach for associative array&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;ul&amp;gt;
{foreach options as item = value}
    &amp;lt;li&amp;gt;{item} =&amp;gt; {value}&amp;lt;/li&amp;gt;
{/foreach}
&amp;lt;/ul&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h4 id=&quot;ifelseifelse&quot;&gt;&lt;strong&gt;if/elseif/else:&lt;/strong&gt;&lt;/h4&gt;

&lt;pre&gt;&lt;code&gt;{if product[active]}
    ... do something ...
{elif product[published]}
    ... some other thing ...
{/if}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h4 id=&quot;echo&quot;&gt;&lt;strong&gt;echo:&lt;/strong&gt;&lt;/h4&gt;

&lt;p&gt;All variables and methods will be automatically preceded by &lt;code&gt;echo&lt;/code&gt;:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;{somevar}
&amp;lt;?php echo $somevar ; ?&amp;gt;

{some_array[assoc_key]}
&amp;lt;?php echo $some_array[&#39;assoc_key&#39;] ; ?&amp;gt;

{another_array[$key]}
&amp;lt;?php echo $another_array[$key] ; ?&amp;gt;

{date(&#39;Y-m-d H:i:s&#39;, now)}
&amp;lt;?php echo date ( &#39;Y-m-d H:i:s&#39; , $now ) ; ?&amp;gt;

{time()}
&amp;lt;?php echo time ( ) ; ?&amp;gt;

{fname . lname}
&amp;lt;?php echo $fname . $lname ; ?&amp;gt;

{books-&amp;gt;get_by_author(author)-&amp;gt;first()-&amp;gt;title}
&amp;lt;?php echo $books -&amp;gt; get_by_author( $author ) -&amp;gt; first() -&amp;gt; title ; ?&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h4 id=&quot;constants&quot;&gt;&lt;strong&gt;constants:&lt;/strong&gt;&lt;/h4&gt;

&lt;p&gt;To use constants, precede the constant with &lt;code&gt;#&lt;/code&gt;:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;{if defined(&#39;APP_VERSION&#39;) &amp;amp;&amp;amp; #APP_VERSION &amp;gt; 2.0}
    ... do something ...
{/if}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;how-zaq-works&quot;&gt;How Zaq Works&lt;/h2&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;Parse template and convert pseudo-markup to valid php code.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Store the code in a temporary file in its cache folder (configurable).&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Load view from the temporary folder.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Delete the temporary file (configurable).&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;configuration&quot;&gt;Configuration&lt;/h2&gt;

&lt;p&gt;The configuration file, &lt;code&gt;zaq.php&lt;/code&gt;, should be located in &lt;code&gt;application/config/&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;There are two configuration settings.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$config[&#39;cache_dir&#39;] = APPPATH . &#39;cache/zaq&#39;;

$config[&#39;enable_cache&#39;] = TRUE;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The &lt;code&gt;cache_dir&lt;/code&gt; setting tells Zaq where to store the temporary files.&lt;/p&gt;

&lt;p&gt;If &lt;code&gt;enable_cache&lt;/code&gt; setting is set to &lt;code&gt;TRUE&lt;/code&gt;, Zaq will keep the temporary files and will skip the parsing process next time if the parsed file is newer than the view file.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;helper-methods&quot;&gt;Helper Methods&lt;/h2&gt;

&lt;p&gt;There are several helper methods to ease the application development a bit more.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;set_delimiter ( [ $left_delimiter = &#39;{&#39; [ , $right_delimiter = &#39;}&#39; ] ] )&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;Sets the delimiters (opening and closing) for a pseudo-markup “tag” in a template.&lt;/p&gt;

&lt;p&gt;Parameters:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;code&gt;$left_delimiter&lt;/code&gt; (String) - Left delimiter&lt;/li&gt;
  &lt;li&gt;&lt;code&gt;$right_delimiter&lt;/code&gt; (String) - Right delimiter&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Return: void&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;add_exception ( $val )&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;Add exception to list of pseudo-markups.&lt;/p&gt;

&lt;p&gt;Parameters:&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;&lt;code&gt;$val&lt;/code&gt; (String) - The string to skip parsing (without delimiters)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Return: void&lt;/p&gt;

&lt;p&gt;By default, &lt;code&gt;elapsed_time&lt;/code&gt; and &lt;code&gt;memory_usage&lt;/code&gt; have been added to the list of exceptions as these are Codeigniter’s default pseudo-markup tag.&lt;/p&gt;
</description>
                <pubDate>Wed, 08 Apr 2015 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/how-to-use-zaq-codeigniter-template-parser/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/how-to-use-zaq-codeigniter-template-parser/</guid>
                
                    <category>php</category>
                
                    <category>template-parser</category>
                
                    <category>codeigniter</category>
                
                    <category>library</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Zaq: Codeigniter Template Parser Engine</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Zaq is a PHP based template parser engine developed to work with Codeigniter. This library has been developed for developers to integrate php codes in views easily. Using this library will also allow the view file to be more readable. View files in Codeigniter (or in any other framework following MVC) always contains both html and php codes which make them a bit harder to read. This problem can be eradicated by using a parser engine which makes the view files a lot more easier to work with.&lt;/p&gt;

&lt;p&gt;Codeigniter, by default, comes with an optional template parser. But, unfortunately, that one does not provide sufficient pseudo markup to work with. Zaq, without doubt, is able to provide much more flexibility while building view files with pseudo markup to replace php codes.&lt;/p&gt;

&lt;p&gt;Let’s take a look at Zaq’s insight and usage.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;installation&quot;&gt;Installation&lt;/h2&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;&lt;a href=&quot;https://github.com/iarkaroy/Zaq-Codeigniter-Template-Parser/archive/master.zip&quot;&gt;&lt;strong&gt;Download Zaq&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Copy &lt;code&gt;libraries/Zaq.php&lt;/code&gt; to your &lt;code&gt;application/libraries/&lt;/code&gt; folder&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Copy &lt;code&gt;config/zaq.php&lt;/code&gt; to your &lt;code&gt;application/config/&lt;/code&gt; folder.&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Create the folder if not exists: &lt;code&gt;application/cache&lt;/code&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Set &lt;code&gt;application/cache&lt;/code&gt; writable.&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;initialization&quot;&gt;Initialization&lt;/h2&gt;

&lt;p&gt;Like other libraries in CodeIgniter, the Zaq library class is initialized in your controller using the &lt;code&gt;$this-&amp;gt;load-&amp;gt;library()&lt;/code&gt; method:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$this-&amp;gt;load-&amp;gt;library(&#39;zaq&#39;);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Or you can autoload the library in &lt;code&gt;autoload.php&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Once loaded, the Zaq library object will be available using: &lt;code&gt;$this-&amp;gt;zaq&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;For usage instructions and more, visit &lt;a href=&quot;http://www.arkaroy.net/blog/how-to-use-zaq-codeigniter-template-parser/&quot;&gt;How to use Zaq: Codeigniter Template Parser Engine&lt;/a&gt;&lt;/p&gt;
</description>
                <pubDate>Sun, 05 Apr 2015 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/zaq-codeigniter-template-parser/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/zaq-codeigniter-template-parser/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>Category Pagination in Jekyll</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;This site is built on Jekyll - a blog aware static site generator. When I was building this, I wanted to separate my blog from my portfolio. Of course I would be using custom post type for my portfolio if I was developing on Wordpress. Here I thought to stay straight and simple and I just created two site categories: portfolio and blog and I am using custom permalink which makes it difficult to use the default pagination setup. And I also want to paginate only the blog category.&lt;/p&gt;

&lt;p&gt;Here, in this tutorial, we will discuss on how to paginate a specific category in Jekyll with custom plugin built from scratch.&lt;/p&gt;

&lt;p&gt;Let’s get started.&lt;/p&gt;

&lt;h2 id=&quot;site-structure&quot;&gt;Site Structure&lt;/h2&gt;

&lt;p&gt;In order for the plugin to work, I have removed the &lt;code&gt;index.html&lt;/code&gt; from &lt;code&gt;blog&lt;/code&gt; category (i.e. directory). Now my site structure looks like this:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;+ index.html
+ about.html
+ blog &amp;lt;- no index page for blog
    + _posts
        + 2012-01-02-blog-post-01.markdown
        + 2012-01-03-blog-post-02.markdown
+ portfolio
    + index.html &amp;lt;- index page for portfolio
    + _posts 
        + 2012-02-01-project-01.markdown
        + 2012-02-02-project-02.markdown
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;I want the &lt;code&gt;index.html&lt;/code&gt; in the &lt;code&gt;blog&lt;/code&gt; category to be generated by the plugin. Here is the site structure I wish to have:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;+ index.html
+ about.html
+ blog
    + index.html
    + pages
        + 2
            + index.html
        + 3
            + index.html
        ...
            ...
    + blog-post-01
        + index.html
    + blog-post-02
        + index.html
+ portfolio
    + project-01
        + index.html
    + project-02
        + index.html
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;As you can see, &lt;code&gt;index.html&lt;/code&gt; in the &lt;code&gt;blog&lt;/code&gt; category will be generated by the plugin as the very first page of the pagination. And from second page onward, it will live in respective directories under &lt;code&gt;pages&lt;/code&gt; directory.&lt;/p&gt;

&lt;h2 id=&quot;liquid-template&quot;&gt;Liquid Template&lt;/h2&gt;

&lt;p&gt;The template for iterating over the current set of posts and showing them look like this:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;h1&amp;gt;Blog&amp;lt;/h1&amp;gt;

{% for post in page.current_posts %}
&amp;lt;article class=&quot;entry&quot;&amp;gt;
    &amp;lt;h3 class=&quot;entry-title&quot;&amp;gt;
        &amp;lt;a href=&quot;{{ post.url | prepend: site.baseurl | prepend: site.url }}&quot; title=&quot;Read more on {{ post.title }}&quot; rel=&quot;bookmark&quot;&amp;gt;{{ post.title }}&amp;lt;/a&amp;gt;
    &amp;lt;/h3&amp;gt;
    &amp;lt;div class=&quot;entry-excerpt&quot;&amp;gt;
        {{ post.excerpt }}
    &amp;lt;/div&amp;gt;
    &amp;lt;div class=&quot;entry-meta&quot;&amp;gt;
        &amp;lt;em&amp;gt;{{ post.date | date: &quot;%b %-d, %Y&quot; }} by {{ site.author.name }}&amp;lt;/em&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/article&amp;gt;
{% endfor %}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;There should also be navigation links for previous and next pages. Here goes the template for that:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;{% if page.total_pages &amp;gt; 1 %}
    &amp;lt;div class=&quot;posts-nav-links clearfix&quot;&amp;gt;        
        {% if page.prev_page %}
            {% if page.prev_page == 1 %}
                &amp;lt;a class=&quot;pull-left&quot; href=&quot;/blog/&quot;&amp;gt;&amp;amp;lt;&amp;lt;/a&amp;gt;
            {% else %}
                &amp;lt;a class=&quot;pull-left&quot; href=&quot;/blog/pages/{{ page.prev_page }}&quot;&amp;gt;&amp;amp;lt;&amp;lt;/a&amp;gt;
            {% endif %}
        {% endif %}
        {% if page.next_page %}
            &amp;lt;a class=&quot;pull-right&quot; href=&quot;/blog/pages/{{ page.next_page }}&quot;&amp;gt;&amp;amp;gt;&amp;lt;/a&amp;gt;
        {% endif %}
    &amp;lt;/div&amp;gt;
{% endif %}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;I include these templates in a heredoc inside my plugin.&lt;/p&gt;

&lt;h2 id=&quot;the-configuration&quot;&gt;The Configuration&lt;/h2&gt;

&lt;p&gt;Before diving into writing the plugin, we need to set some config options in the &lt;code&gt;_config.yml&lt;/code&gt; file to make the plugin a bit more maintainable.&lt;/p&gt;

&lt;p&gt;We need to provide an option to later modify number of posts in a page without touching the plugin. For this reason, we are going to include &lt;code&gt;posts_per_page&lt;/code&gt; in our &lt;code&gt;_config.yml&lt;/code&gt;.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;paginated_category: &quot;blog&quot;
posts_per_page: 20
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The setting &lt;code&gt;paginated_category&lt;/code&gt; will tell the plugin which category to use for pagination. We may hardcode this in our plugin, but it is a bit more professional to provide an option to change the setting later without looking at the plugin.&lt;/p&gt;

&lt;h2 id=&quot;the-code&quot;&gt;The Code&lt;/h2&gt;

&lt;p&gt;First, create a file &lt;code&gt;CategoryPostPaginator.rb&lt;/code&gt; inside your &lt;code&gt;_plugins&lt;/code&gt; directory.&lt;/p&gt;

&lt;p&gt;The first class to create is the “Generator.” All generators are called by Jekyll at site build, so if you want code that’s going to create new pages or content, you want to sub-class this class.&lt;/p&gt;

&lt;p&gt;When Jekyll calls a generator, it calls the &lt;code&gt;generate&lt;/code&gt; method, so that’s the first method to implement. In our class, it loops through all the posts in the site and group the posts according to their position (or index). Then it crates a page for each group.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;class CategoryPostPaginator &amp;lt; Generator

    def generate(site)
        all_posts = site.categories[site.config[&#39;paginated_category&#39;]]
        site.data[&#39;all_posts&#39;] = all_posts
        posts_per_page = Float(site.config[&#39;posts_per_page&#39;])
        total_posts = Float(all_posts.size)
        total_pages = Float(total_posts / posts_per_page)
        total_pages = total_pages.ceil
        site.data[&#39;paginated_pages&#39;] = Hash.new
        (1..total_pages).each do |page_num|
            site.pages &amp;lt;&amp;lt; PostListingPage.new(site, total_pages, page_num, all_posts.slice!(0, posts_per_page.to_i))
        end
    end

end
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Next, we need to subclass the &lt;code&gt;Page&lt;/code&gt; class for our specific needs. This code is very specific to my site, you may want to change the logic here to meet your needs. Basically, I am creating a series of pages to show category indexes. This code customizes the layout that’s used and adds some information to the generated page. I have included my liquid template in heredoc statement.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;class PostListingPage &amp;lt; Page

    def initialize(site, total_pages, current_page, current_posts)
        @site = site
        @total_pages = total_pages
        @current_page = current_page
        self.ext = &#39;.html&#39;
        self.basename = &#39;index&#39;
        prev_page = nil
        next_page = current_page + 1
        if current_page &amp;gt; 1
            prev_page = current_page - 1
        end
        if next_page &amp;gt; total_pages
            next_page = nil
        end
        self.data = {
            &#39;layout&#39; =&amp;gt; &#39;default&#39;,
            &#39;title&#39; =&amp;gt; &quot;Blog&quot;,
            &#39;current_posts&#39; =&amp;gt; current_posts,
            &#39;total_pages&#39; =&amp;gt; total_pages,
            &#39;current_page&#39; =&amp;gt; current_page,
            &#39;prev_page&#39; =&amp;gt; prev_page,
            &#39;next_page&#39; =&amp;gt; next_page
        }
        self.content = &amp;lt;&amp;lt;-EOS

&amp;lt;h1&amp;gt;Blog&amp;lt;/h1&amp;gt;

{% for post in page.current_posts %}
    &amp;lt;article class=&quot;entry&quot;&amp;gt;
        &amp;lt;h3 class=&quot;entry-title&quot;&amp;gt;
            &amp;lt;a href=&quot;{{ post.url | prepend: site.baseurl | prepend: site.url }}&quot; title=&quot;Read more on {{ post.title }}&quot; rel=&quot;bookmark&quot;&amp;gt;{{ post.title }}&amp;lt;/a&amp;gt;
        &amp;lt;/h3&amp;gt;
        &amp;lt;div class=&quot;entry-excerpt&quot;&amp;gt;
            {{ post.excerpt }}
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;entry-meta&quot;&amp;gt;
            &amp;lt;em&amp;gt;{{ post.date | date: &quot;%b %-d, %Y&quot; }} by {{ site.author.name }}&amp;lt;/em&amp;gt;
        &amp;lt;/div&amp;gt;
    &amp;lt;/article&amp;gt;
{% endfor %}

{% if page.total_pages &amp;gt; 1 %}
    &amp;lt;div class=&quot;posts-nav-links clearfix&quot;&amp;gt;        
        {% if page.prev_page %}
            {% if page.prev_page == 1 %}
                &amp;lt;a class=&quot;pull-left&quot; href=&quot;/blog/&quot;&amp;gt;&amp;amp;lt;&amp;lt;/a&amp;gt;
            {% else %}
                &amp;lt;a class=&quot;pull-left&quot; href=&quot;/blog/pages/{{ page.prev_page }}&quot;&amp;gt;&amp;amp;lt;&amp;lt;/a&amp;gt;
            {% endif %}
        {% endif %}
        {% if page.next_page %}
            &amp;lt;a class=&quot;pull-right&quot; href=&quot;/blog/pages/{{ page.next_page }}&quot;&amp;gt;&amp;amp;gt;&amp;lt;/a&amp;gt;
        {% endif %}
    &amp;lt;/div&amp;gt;
{% endif %}

EOS
        
    end

    def url
        if @current_page == 1
            File.join(&quot;/&quot;, &quot;blog&quot;, &#39;index.html&#39;)
        else
            File.join(&quot;/&quot;, &quot;blog&quot;, &quot;pages&quot;, &quot;#{@current_page}&quot;, &#39;index.html&#39;)
        end
    end

    def to_liquid
        Utils.deep_merge_hashes(self.data, {
            &quot;url&quot; =&amp;gt; self.url,
            &quot;content&quot; =&amp;gt; self.content
        })
    end

    def html?
        true
    end

end
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;That is the end of our discussion. Hope you enjoyed it. Just give it a try.&lt;/p&gt;
</description>
                <pubDate>Sat, 28 Mar 2015 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/category-pagination-in-jekyll/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/category-pagination-in-jekyll/</guid>
                
                    <category>jekyll</category>
                
                    <category>ruby</category>
                
                    <category>pagination</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>DesignStudio: Flat Website Layout</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;This is a personal project of creating a simple flat layout which can be presented with grid system for responsive design.
&lt;br /&gt;&lt;br /&gt;
&lt;img src=&quot;/assets/image/designstudio-flat-website-layout-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Fri, 23 Jan 2015 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/design-studio-flat-website-layout/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/design-studio-flat-website-layout/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>Pixi: Website Layout</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;This is a personal project of creating a simple flat layout which can be presented with grid system for responsive design.
&lt;br /&gt;&lt;br /&gt;
&lt;img src=&quot;/assets/image/pixi-website-layout-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Mon, 05 Jan 2015 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/pixi-website-layout-design/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/pixi-website-layout-design/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>15 Best Bootstrap Alternatives for Web Developers</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;You have probably heard a lot about Bootstrap (aka Twiter Bootstrap). With this framework you can build a well structured, maintainable and up-gradable website. It also helps you save much on your time because there are plenty of readily available elements that you can use.&lt;/p&gt;

&lt;p&gt;Choosing the right framework that is the perfect fit for your projects could be a little bit overwhelming - there are a lot to choose from. Perhaps, you want to go with popular choices like &lt;a href=&quot;http://getbootstrap.com/&quot;&gt;Bootstrap&lt;/a&gt; or &lt;a href=&quot;http://foundation.zurb.com/&quot;&gt;Foundation&lt;/a&gt;, but if your website is going to be a fairly simple one, you won’t be needing most of the building blocks and materials included in the default package.&lt;/p&gt;

&lt;p&gt;The good news is that there are a handful of alternatives that are much leaner than Bootstrap or Foundation. Most of these frameworks ship with just the right amount of styles and components to help you get started, while allowing you to be able to extend them in the direction you want for your project.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;skeletonhttpgetskeletoncom&quot;&gt;&lt;a href=&quot;http://getskeleton.com/&quot;&gt;Skeleton&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-skeleton.jpg&quot; alt=&quot;Skeleton&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Skeleton provides eventually obtained a face lift. It’s an overall renovation from the ground up, and yet it is still as light as it used to be. The new Skeleton grid system now adopts mobile-first philosophy, which ensures that the layout takes center stage regardless of how small the device screen is.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;zimithttpfirezenkgithubiozimit&quot;&gt;&lt;a href=&quot;http://firezenk.github.io/zimit/&quot;&gt;Zimit&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-zimit.jpg&quot; alt=&quot;Zimit&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Zimit is a very lightweight HTML5 framework for prototyping responsive web site designs for web developers. It’s based on the LESS CSS pre-processor and provides a framework designed for scalability and code that’s easy to read and understand. It supports all modern web browsers and compiled it’s only 88kb in total file size.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;inkhttpinksapopt&quot;&gt;&lt;a href=&quot;http://ink.sapo.pt/&quot;&gt;Ink&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-ink.jpg&quot; alt=&quot;Ink&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Ink is an interface kit for the rapid development of web interfaces that aims to be easy to use and expand upon. It’s also based on LESS and offers a fluid grid and other responsive development features for creating both large and small website projects. InK’s primary differentiator is how it handles layout, allowing flexibility in how blocks fall within the grid.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;cardinalcsshttpcardinalcsscom&quot;&gt;&lt;a href=&quot;http://cardinalcss.com/&quot;&gt;CardinalCSS&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-cardinalcss.jpg&quot; alt=&quot;CardinalCSS&quot; /&gt;&lt;/p&gt;

&lt;p&gt;CardinalCSS is often a CSS composition designed with the target effectiveness, readability and many significantly maintainability. CardinalCSS explores some current approaches including mobile-first pertaining to framing up the grid; along with CSS Field Product of which lets you very easily establish element wider along with top.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;concisecsshttpconcisecsscom&quot;&gt;&lt;a href=&quot;http://concisecss.com/&quot;&gt;ConciseCSS&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-concisecss.jpg&quot; alt=&quot;ConciseCSS&quot; /&gt;&lt;/p&gt;

&lt;p&gt;ConciseCSS is usually a CSS platform – devoid of the bloat. This can be a slender platform built together with Sass, MUCH LESS, and Stylus which often paves the golden path to CSS maintainability. But, if you desire simple straightforward vanilla CSS, you can have that will likewise.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;purehttppurecssio&quot;&gt;&lt;a href=&quot;http://purecss.io/&quot;&gt;Pure&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-purecss.jpg&quot; alt=&quot;Pure&quot; /&gt;&lt;/p&gt;

&lt;p&gt;If you are planning to build a web app that works both on desktop and mobile, then you should consider of using Pure from Yahoo. Pure has much better performance when it comes to mobile devices than Bootstrap. As its name suggests, Pure comes as a pure CSS framework only.  Build on top of Normalize.css, Pure has an extremely small file size with just 4.5KB (minified and gzip).&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;powertocsshttppowertowebcompowertocss&quot;&gt;&lt;a href=&quot;http://powertoweb.com/powertocss/&quot;&gt;PowertoCSS&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-powertocss.jpg&quot; alt=&quot;PowertoCSS&quot; /&gt;&lt;/p&gt;

&lt;p&gt;PowertoCSS is usually light in weight as well as a reliable frontend framework. Course bands which can be utilized to construct the particular grid along with use styles are usually quick and easy to not forget button. It’s also possible to create your personal design. Brain to the site their StarterKit to get going.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;furtivehttpfurtiveco&quot;&gt;&lt;a href=&quot;http://furtive.co/&quot;&gt;Furtive&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-furtive.jpg&quot; alt=&quot;Furtive&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Furtive can be a mobile-first CSS structure built throughout the cutting-edge web specifications including the employment of Flexbox to the grid and also rem model intended for dimensions factors (including font size). Furtive holds a little CSS footprint by means of not supporting elderly browsers (World Wide Web Explorer) simply because they involve a few CSS hacking. For this reason Furtive can be a great structure should you be creating an internet site in the future.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;uikithttpgetuikitcom&quot;&gt;&lt;a href=&quot;http://getuikit.com/&quot;&gt;UiKit&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-uikit.jpg&quot; alt=&quot;UiKit&quot; /&gt;&lt;/p&gt;

&lt;p&gt;UIkit is a free, lightweight and modular front-end framework. Developed with LESS, UIkit has a well-structured, expandable and maintainable code. It also offers a grid system which is responsive, fluid and nestable. With UIkit you can build navigation, buttons, modals, dropdown and more responsively. Its comprehensive documentation will make you easier to get started with UIkit.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;basscsshttpwwwbasscsscom&quot;&gt;&lt;a href=&quot;http://www.basscss.com/&quot;&gt;BassCSS&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-basscss.jpg&quot; alt=&quot;BassCSS&quot; /&gt;&lt;/p&gt;

&lt;p&gt;BassCSS provides a lightweight group of starting factor designs, utilities, along with design along with shade designs, inside modular variety for developing a responsive world-wide-web request. Your SCSS files are generally integrated to be able to customize the type simply. You possibly can play together with typography, whitened space, breakpoints.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;muellerhttpmuellergridsystemcom&quot;&gt;&lt;a href=&quot;http://muellergridsystem.com/&quot;&gt;Mueller&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-mueller.jpg&quot; alt=&quot;Mueller&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Mueller is a modular sensitive grid technique built over Sass and also Compass. Using Mueller, you are able to assemble the actual grid sometimes by building courses right to the actual HTML aspects, or perhaps in case you like your current HTML aspects for being well put together and also clean, when using the grid() perform. Mueller grid may be used in tandem using the Masonry JavaScript selection to manufacture a Pinterest-like design.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;html5-boilerplatehttphtml5boilerplatecom&quot;&gt;&lt;a href=&quot;http://html5boilerplate.com/&quot;&gt;HTML5 Boilerplate&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-html5boilerplate.jpg&quot; alt=&quot;HTML5 Boilerplate&quot; /&gt;&lt;/p&gt;

&lt;p&gt;HTML5 Boilerplate isn’t really a framework but rather it is a professional front-end template to give you a head start building a robust and adaptable web app. Boilerplate comes baked with Modernizr, Normalize.css and jQuery to help you create pages that work across browsers and can adapt to browsers that don’t offer support for certain features.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;tuktukhttptuktuktapquocom&quot;&gt;&lt;a href=&quot;http://tuktuk.tapquo.com/&quot;&gt;Tuktuk&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-tuktuk.jpg&quot; alt=&quot;Tuktuk&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Tuktuk is usually a really exclusive identify for a platform. When compared with Bootstrap or Groundwork, Tuktuk is significantly light since it only comes with simply the correct amount of elements to construct a presentable web site as well as to the grid system, fundamental design pertaining to typography, dining tables, and also some USER INTERFACE such as navbar and also modals.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;basehttpmatthewhartmangithubiobase&quot;&gt;&lt;a href=&quot;http://matthewhartman.github.io/base/&quot;&gt;Base&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-base.jpg&quot; alt=&quot;Base&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Base was made together with MUCH LESS and Sass, and it also includes merely essentially the most important associated with factors to construct websites: the particular grid and also the standard doing your hair associated with HTML factors. Base doesn’t include JavaScript factors, however an excellent great internet browser compatibility much in order that it works in spite of IE7.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;toasthttpdanedengithubiotoast&quot;&gt;&lt;a href=&quot;http://daneden.github.io/Toast/&quot;&gt;Toast&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141221-toast.jpg&quot; alt=&quot;Toast&quot; /&gt;&lt;/p&gt;

&lt;p&gt;Through the SCSS stylesheet is included in the package, Toast allows you to easily configure the grid class names, the gutter, and even the column-base. For example, if you want the grid to be a 9-base column instead of 12, you can do that. Toast is a minimal CSS framework with very flexible configurations catered to meet your requirements.&lt;/p&gt;
</description>
                <pubDate>Sun, 21 Dec 2014 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/15-best-bootstrap-alternatives-web-developers/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/15-best-bootstrap-alternatives-web-developers/</guid>
                
                    <category>bootstrap</category>
                
                    <category>foundation</category>
                
                    <category>css-framework</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Simpi: Website Layout</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;This is a personal project of creating a simple flat layout which can be presented with grid system for responsive design.
&lt;br /&gt;&lt;br /&gt;
&lt;a href=&quot;http://bit.ly/1DZKREH&quot; class=&quot;button js-force-center&quot; target=&quot;_blank&quot;&gt;Download PSD&lt;/a&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;img src=&quot;/assets/image/simpi-minimal-flat-website-layout-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Tue, 09 Dec 2014 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/simpi-website-layout/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/simpi-website-layout/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>8 Icon Fonts to speed up Website Design Process</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Icon Fonts are nothing but fonts. But, instead of containing letters or numbers, they contain symbols and shapes. You can style them with CSS in the same way you style regular text which has made them a popular choice on the web in the process designing and developing websites and web applications.&lt;/p&gt;

&lt;p&gt;They’re ideal for small, frequently used shapes such as email, envelopes, telephones, widget controls and social media logos. They also work in all modern browser.&lt;/p&gt;

&lt;p&gt;Here is a list of most popular and easy-to-use icon font sets.&lt;/p&gt;

&lt;h2 id=&quot;font-awesomehttpfortawesomegithubiofont-awesome&quot;&gt;&lt;a href=&quot;http://fortawesome.github.io/Font-Awesome/&quot;&gt;Font Awesome&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141012-fontawesome.jpg&quot; alt=&quot;Font Awesome&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;icomoonhttpsicomoonio&quot;&gt;&lt;a href=&quot;https://icomoon.io/&quot;&gt;IcoMoon&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141012-icomoon.jpg&quot; alt=&quot;IcoMoon&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;foundation-icon-fonts-3httpzurbcomplaygroundfoundation-icon-fonts-3&quot;&gt;&lt;a href=&quot;http://zurb.com/playground/foundation-icon-fonts-3&quot;&gt;Foundation Icon Fonts 3&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141012-foundation3.jpg&quot; alt=&quot;Foundation Icon Fonts 3&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;typiconshttptypiconscom&quot;&gt;&lt;a href=&quot;http://typicons.com/&quot;&gt;Typicons&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141012-typicons.jpg&quot; alt=&quot;Typicons&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;iconichttpsuseiconiccom&quot;&gt;&lt;a href=&quot;https://useiconic.com/&quot;&gt;Iconic&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141012-iconic.jpg&quot; alt=&quot;Iconic&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;we-love-icon-fontshttpweloveiconfontscom&quot;&gt;&lt;a href=&quot;http://weloveiconfonts.com/&quot;&gt;We Love Icon Fonts&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141012-weloveiconfonts.jpg&quot; alt=&quot;We Love Icon Fonts&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;foundation-icon-fonts-2httpzurbcomplaygroundfoundation-icons&quot;&gt;&lt;a href=&quot;http://zurb.com/playground/foundation-icons&quot;&gt;Foundation Icon Fonts 2&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141012-foundation2.jpg&quot; alt=&quot;Foundation Icon Fonts 2&quot; /&gt;&lt;/p&gt;

&lt;h2 id=&quot;fontellohttpfontellocom&quot;&gt;&lt;a href=&quot;http://fontello.com/&quot;&gt;Fontello&lt;/a&gt;&lt;/h2&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/20141012-fontello.jpg&quot; alt=&quot;Fontello&quot; /&gt;&lt;/p&gt;

&lt;p&gt;If you want to create your own set of custom icon fonts, you can use online tools such as &lt;a href=&quot;http://fontello.com/&quot;&gt;Fontello&lt;/a&gt; or &lt;a href=&quot;https://icomoon.io/&quot;&gt;IcoMoon&lt;/a&gt;.&lt;/p&gt;
</description>
                <pubDate>Sun, 12 Oct 2014 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/8-icon-fonts-to-speed-up-website-design-process/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/8-icon-fonts-to-speed-up-website-design-process/</guid>
                
                    <category>icon</category>
                
                    <category>font</category>
                
                    <category>css</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Media Manager</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Build a web application for Creocraft Ventures – a leading event-management company having multiple offices around India. Creocraft needed a simple but efficient web application for managing and showcasing their project albums. The application, Media Manager, is able to create and manage various type of album according to the need of Creocraft. Media Manager is also able to help users to crop and re-size the images before uploading. Youtube link can also be embedded. The main website of Creocraft communicate with the application through a special channel, technically API, to showcase the albums on the website.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/media-manager-web-app-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/media-manager-web-app-02.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/media-manager-web-app-03.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/media-manager-web-app-04.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/media-manager-web-app-05.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/media-manager-web-app-06.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/media-manager-web-app-07.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Sat, 13 Sep 2014 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/media-manager-web-application/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/media-manager-web-application/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>Arka Roy</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Build the website of Arka Roy (yes, that’s me).&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arka-roy-website-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arka-roy-website-02.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Sat, 23 Aug 2014 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/arka-roy-website/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/arka-roy-website/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>Creocraft Ventures Website</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Build the website for Creocraft Ventures – a leading event-management company having multiple offices around India. Creocraft needed a easy-to-use but innovative online presence to stand with dignity before their clients. The website is built with HTML5 and styled with the latest CSS3 technology. The website is made fully responsive keeping in mind the ease of use and readability.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/creocraft-ventures-website-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/creocraft-ventures-website-02.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/creocraft-ventures-website-03.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/creocraft-ventures-website-04.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/creocraft-ventures-website-05.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Wed, 06 Aug 2014 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/creocraft-ventures-website/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/creocraft-ventures-website/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>Download ZIP File Dynamically with PHP</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;ZIP is a very popular archive file format that supports lossless data compression. A .ZIP file may contain one or more files or folders that may have been compressed. ZIP files are used in almost every downloadable content as it is widely supported by almost all operating systems.&lt;/p&gt;

&lt;p&gt;ZIP files generally use the file extensions “.zip” or “.ZIP” and the MIME media type &lt;code&gt;application/zip&lt;/code&gt;. ZIP is used as a base file format by many applications and tools. Most popular among them is WordPress. They use zip file format for themes, plugins and the application itself. And everything is done dynamically.&lt;/p&gt;

&lt;p&gt;Here we will see how we can make a webpage act as an initializer to download a zip file. We will just provide the location of the file and PHP will download it to the user. In the back-end, the HTTP headers are responsible for the download. We will set the headers with PHP.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$filename = &quot;My Awesome Zip File.zip&quot;;
$filepath = &quot;/var/www/downloads/file.zip&quot;;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The &lt;code&gt;$filename&lt;/code&gt; contains the name that will appear to the user and &lt;code&gt;$filepath&lt;/code&gt; contains the full absolute path where the file is physically located.&lt;/p&gt;

&lt;p&gt;Now we will set the headers with PHP &lt;a href=&quot;http://php.net/manual/en/function.header.php&quot;&gt;header()&lt;/a&gt;. And whenever any request comes to this page, browser will read the header response and start the download immediately.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;header(&quot;Pragma: public&quot;);
header(&quot;Expires: 0&quot;);
header(&quot;Cache-Control: must-revalidate&quot;);
header(&quot;Cache-Control: public&quot;);
header(&quot;Content-Description: File Transfer&quot;);
header(&quot;Content-type: application/octet-stream&quot;);
header(&#39;Content-Disposition: attachment; filename=&quot;&#39; . $filename . &#39;&quot;&#39;);
header(&quot;Content-Transfer-Encoding: binary&quot;);
header(&quot;Content-Length: &quot; . filesize($filepath));
ob_end_flush();
@readfile($filepath);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Of course, the name of the downloaded file will be &lt;em&gt;My Awesome Zip File.zip&lt;/em&gt;.&lt;/p&gt;
</description>
                <pubDate>Wed, 23 Oct 2013 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/download-zip-file-dynamically-with-php/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/download-zip-file-dynamically-with-php/</guid>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>How to Add Scalable Vector Graphics (SVG) to Web Page</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.&lt;/p&gt;

&lt;p&gt;If you want to embed your hand-crafted SVG in your web page, you can use any of the methods discussed below.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;using-object-tag&quot;&gt;Using &lt;code&gt;&amp;lt;object&amp;gt;&lt;/code&gt; Tag&lt;/h2&gt;

&lt;p&gt;If you intend using any advanced SVG features such as CSS and scripting, the HTML5 &lt;object&gt; tag is your best option:&lt;/object&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;object type=&quot;image/svg+xml&quot; data=&quot;the-image.svg&quot;&amp;gt;Your browser does not support SVG.&amp;lt;/object&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You can provide fallback text or images within the &lt;code&gt;object&lt;/code&gt; block.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;using-embed-tag&quot;&gt;Using &lt;code&gt;&amp;lt;embed&amp;gt;&lt;/code&gt; Tag&lt;/h2&gt;

&lt;p&gt;Although it’s similar to &lt;code&gt;&amp;lt;object&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;embed&amp;gt;&lt;/code&gt; never has been and probably never will be part of any HTML or XHTML specification. However, it’s supported by most browsers and is often used to implement Flash plugins.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;embed type=&quot;image/svg+xml&quot; src=&quot;the-image.svg&quot; /&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;using-iframe&quot;&gt;Using &lt;code&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt;&lt;/h2&gt;

&lt;p&gt;Since browsers can render SVG documents in their own right, it’s possible to load images within an &lt;code&gt;iframe&lt;/code&gt;:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;iframe src=&quot;the-image.svg&quot;&amp;gt;Your browser does not support iframes.&amp;lt;/iframe&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;You can provide fallback text or images within the &lt;code&gt;iframe&lt;/code&gt; block.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;embedding-inline-svg-xml&quot;&gt;Embedding Inline SVG XML&lt;/h2&gt;

&lt;p&gt;An SVG image can be added as a code island directly within your HTML5 page using outer &lt;code&gt;&amp;lt;svg&amp;gt;&lt;/code&gt; tags:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
    &amp;lt;head&amp;gt;
        &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
        &amp;lt;title&amp;gt;Embedded SVG&amp;lt;/title&amp;gt;
    &amp;lt;/head&amp;gt;
    &amp;lt;body&amp;gt;
        &amp;lt;h1&amp;gt;Embedded SVG&amp;lt;/h1&amp;gt;

        &amp;lt;!-- SVG code --&amp;gt;
        &amp;lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 54 51.3&quot; enable-background=&quot;new 0 0 54 51.3&quot; xml:space=&quot;preserve&quot;&amp;gt;
            &amp;lt;path fill=&quot;#FFFFFF&quot; d=&quot;M48.8,37.8L32.2,9l2.6-4.5L27,0l-7.8,4.5L21.8,9L5.2,37.8H0v9l7.8,4.5l2.6-4.5h33.2l2.6,4.5l7.8-4.5v-9H48.8z M15.6,37.8L27,18l11.4,19.8H15.6z&quot;/&amp;gt;
        &amp;lt;/svg&amp;gt;

    &amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;using-img-tag&quot;&gt;Using &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; Tag&lt;/h2&gt;

&lt;p&gt;SVGs can be added to your web page like any other image:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;img src=&quot;the-image.svg&quot; /&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The usual width, height, alt and other attributes can be added should you require them.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;using-a-css-background-image&quot;&gt;Using a CSS Background Image&lt;/h2&gt;

&lt;p&gt;SVGs can be used as a CSS background for any element:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;#bg-svg {
    background-image: url(the-image.svg);
}
&lt;/code&gt;&lt;/pre&gt;
</description>
                <pubDate>Sat, 19 Oct 2013 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/how-to-add-scalable-vector-graphics-svg-to-web-page/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/how-to-add-scalable-vector-graphics-svg-to-web-page/</guid>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Create a File Upload Class in PHP</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;The basic process of providing a HTML form for uploading user submitted files to the server with PHP is fairly easy and simple. But there are some security implications that many of us are unaware of. We will be building a custom PHP class for secure file upload. This class will check the type and size of the file and rename the file in case of duplication.&lt;/p&gt;

&lt;p&gt;Those who are absolutely beginner in handling file upload, are requested to take a look at &lt;a href=&quot;http://www.arkaroy.net/blog/enhance-file-upload-security-with-php/&quot;&gt;Enhance File Upload Security with PHP&lt;/a&gt;. That article will help you to better understand file uploading from scratch.&lt;/p&gt;

&lt;h2 id=&quot;the-class&quot;&gt;The Class&lt;/h2&gt;

&lt;p&gt;We will start our &lt;code&gt;Upload&lt;/code&gt; class with a blank constructor&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;class Upload {
    function __construct() {

    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now we will add some properties to our class to store some data.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;protected $config = array();
protected $current;
protected $errors = array();
protected $new_name;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The &lt;code&gt;$config&lt;/code&gt; property holds the configurations like target directory, size limit etc. &lt;code&gt;$current&lt;/code&gt; refers to the current key of &lt;code&gt;$_FILES&lt;/code&gt; array. &lt;code&gt;$errors&lt;/code&gt; contains the errors encountered during process. &lt;code&gt;$new_name&lt;/code&gt; stores the name of the uploaded file to be set.&lt;/p&gt;

&lt;h2 id=&quot;public-methods&quot;&gt;Public Methods&lt;/h2&gt;

&lt;p&gt;Now we are going to define some public methods to set up some configuration settings.&lt;/p&gt;

&lt;p&gt;But first, we need to implement a method for handling errors.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;public function error($msg = null) {
    if ($msg) {
        $this-&amp;gt;errors[] = $msg;
        return $this;
    } else {
        return $this-&amp;gt;errors;
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;This method will store error messages in the &lt;code&gt;$errors&lt;/code&gt;. This method will work as both a getter and setter.&lt;/p&gt;

&lt;h3 id=&quot;extensions&quot;&gt;Extensions&lt;/h3&gt;

&lt;p&gt;Of course you want to prevent the users from uploading specified types of files. Here is the method for allowing or disallowing file types.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;public function setAllowedExtensions($extensions) {
    if (is_array($extensions)) {
        $this-&amp;gt;config[&#39;allowed_extensions&#39;] = $extensions;
    } else {
        $extensions = explode(&#39;,&#39;, $extensions);
        $this-&amp;gt;config[&#39;allowed_extensions&#39;] = array();
        foreach ($extensions as $ext) {
            $this-&amp;gt;config[&#39;allowed_extensions&#39;][] = trim($ext);
        }
    }
    return $this;
}

public function setDisallowedExtensions($extensions) {
    if (is_array($extensions)) {
        $this-&amp;gt;config[&#39;disallowed_extensions&#39;] = $extensions;
    } else {
        $extensions = explode(&#39;,&#39;, $extensions);
        $this-&amp;gt;config[&#39;disallowed_extensions&#39;] = array();
        foreach ($extensions as $ext) {
            $this-&amp;gt;config[&#39;disallowed_extensions&#39;][] = trim($ext);
        }
    }
    return $this;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;The allowed extensions will be stored in &lt;code&gt;$config[&#39;allowed_extensions&#39;]&lt;/code&gt; and the disallowed extensions in &lt;code&gt;$config[&#39;disallowed_extensions&#39;]&lt;/code&gt;. You can either specify allowed file types or disallowed file types.&lt;/p&gt;

&lt;h3 id=&quot;target-directory&quot;&gt;Target Directory&lt;/h3&gt;

&lt;p&gt;Now its time to specify where our uploaded images will live. We should add a method to setup this setting.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;public function setDirectory($dir) {
    $dir = str_replace(&#39;\\&#39;, &#39;/&#39;, $dir);
    $dir = rtrim($dir, &#39;/&#39;);
    $this-&amp;gt;config[&#39;directory&#39;] = $dir;
    return $this;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;h3 id=&quot;max-size&quot;&gt;Max Size&lt;/h3&gt;

&lt;p&gt;Obviously we want to limit the size of the files to be uploaded. But our specified limit cannot be greater than that specified in PHP config.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;public function setMaxSize($size) {
    $max_size = $this-&amp;gt;convertSizeToBytes($size);
    $upload_max_filesize = $this-&amp;gt;convertSizeToBytes(ini_get(&#39;upload_max_filesize&#39;));
    $this-&amp;gt;config[&#39;max_size&#39;] = ($max_size &amp;lt;= $upload_max_filesize) ? $max_size : $upload_max_filesize;
    return $this;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;This will check the size limit from PHP configuration. If the specified limit is larger, it will automatically set the size from PHP config. For this method to work properly, we need to implement a helper method.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;protected function convertSizeToBytes($size) {
    $size = trim($size);
    $unit = strtoupper($size[strlen($size) - 1]);
    if (in_array($unit, array(&#39;T&#39;, &#39;G&#39;, &#39;M&#39;, &#39;K&#39;, &#39;B&#39;))) {
        switch ($unit) {
            case &#39;T&#39;:
                $size *= 1024;
            case &#39;G&#39;:
                $size *= 1024;
            case &#39;M&#39;:
                $size *= 1024;
            case &#39;K&#39;:
                $size *= 1024;
            case &#39;B&#39;:
                $size *= 1;
        }
    }
    return $size;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;h3 id=&quot;overwrite&quot;&gt;Overwrite&lt;/h3&gt;

&lt;p&gt;We need provide a way to specify whether we want to overwrite files or not.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;public function setOverwrite($overwrite = TRUE) {
    $this-&amp;gt;config[&#39;overwrite&#39;] = $overwrite;
    return $this;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&quot;methods-for-the-magic&quot;&gt;Methods for the Magic&lt;/h2&gt;

&lt;p&gt;The methods mentioned till now are going to be used to set the configuration settings. For the actual file uploading process, we need to add a few more internal methods to check the settings or generate a new name for the file or upload the file etc.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;// Check whether the file is of allowed type
protected function allowedExtension() {
    $allowed = TRUE;
    if (!isset($this-&amp;gt;config[&#39;allowed_extensions&#39;]) || !$this-&amp;gt;config[&#39;allowed_extensions&#39;]) {
        $allowed = TRUE;
    }
    if (!isset($this-&amp;gt;config[&#39;disallowed_extensions&#39;]) || !$this-&amp;gt;config[&#39;disallowed_extensions&#39;]) {
        $allowed = TRUE;
    }
    $ext = pathinfo($this-&amp;gt;current[&#39;name&#39;], PATHINFO_EXTENSION);
    $ext = strtolower($ext);
    if (isset($this-&amp;gt;config[&#39;allowed_extensions&#39;]) &amp;amp;&amp;amp; $this-&amp;gt;config[&#39;allowed_extensions&#39;]) {
        $allowed = in_array($ext, $this-&amp;gt;config[&#39;allowed_extensions&#39;]);
    }
    if (isset($this-&amp;gt;config[&#39;disallowed_extensions&#39;]) &amp;amp;&amp;amp; $this-&amp;gt;config[&#39;disallowed_extensions&#39;]) {
        $allowed = !in_array($ext, $this-&amp;gt;config[&#39;disallowed_extensions&#39;]);
    }
    return $allowed;
}

// Check whether the file is within size limit
protected function allowedSize() {
    $size = $this-&amp;gt;current[&#39;size&#39;];
    return $size &amp;lt;= $this-&amp;gt;config[&#39;max_size&#39;];
}

// Validate the target directory
protected function checkDirectory() {
    if (!isset($this-&amp;gt;config[&#39;directory&#39;]) || empty($this-&amp;gt;config[&#39;directory&#39;])) {
        return FALSE;
    }
    if (!is_dir($this-&amp;gt;config[&#39;directory&#39;])) {
        mkdir($this-&amp;gt;config[&#39;directory&#39;]);
    }
    return is_writable($this-&amp;gt;config[&#39;directory&#39;]);
}

// Generate new name for the file to be saved
// it will replace spaces with dashes
// name will be lowercase
// generate new name if file exists
protected function setNewName() {
    $filename = $this-&amp;gt;current[&#39;name&#39;];
    $name = pathinfo($filename, PATHINFO_FILENAME);
    $ext = pathinfo($filename, PATHINFO_EXTENSION);
    $name = str_replace(&#39; &#39;, &#39;-&#39;, $name);
    $name = strtolower($name);
    $this-&amp;gt;new_name = $name . &#39;.&#39; . $ext;
    if (isset($this-&amp;gt;config[&#39;overwrite&#39;]) &amp;amp;&amp;amp; $this-&amp;gt;config[&#39;overwrite&#39;]) {
        return $this;
    }
    $count = 0;
    while (file_exists($this-&amp;gt;config[&#39;directory&#39;] . &#39;/&#39; . $this-&amp;gt;new_name)) {
        $count++;
        $this-&amp;gt;new_name = $name . &#39;_&#39; . $count . &#39;.&#39; . $ext;
    }
    return $this;
}

// Move uploaded file with new name
protected function moveFile() {
    $this-&amp;gt;setNewName();
    return move_uploaded_file($this-&amp;gt;current[&#39;tmp_name&#39;], $this-&amp;gt;config[&#39;directory&#39;] . &#39;/&#39; . $this-&amp;gt;new_name);
}

// Sets error messages according to upload error
protected function uploadError() {
    switch ($this-&amp;gt;current[&#39;error&#39;]) {
        case 1:
        case 2:
            $this-&amp;gt;error(&#39;The file is bigger than specified limit.&#39;);
            break;
        case 3:
            $this-&amp;gt;error(&#39;The file is uploaded partially. Please try again.&#39;);
            break;
        case 4:
            $this-&amp;gt;error(&#39;No file selected to upload.&#39;);
            break;
        case 6:
            $this-&amp;gt;error(&#39;No upload directory has been specified.&#39;);
            break;
        default :
            $this-&amp;gt;error(&#39;Failed to upload the file.&#39;);
            break;
    }
}

// Public method to execute the upload process
public function run() {
    $this-&amp;gt;current = current($_FILES);
    if ($this-&amp;gt;current[&#39;error&#39;] != 0) {
        $this-&amp;gt;uploadError();
        return FALSE;
    }
    if (!$this-&amp;gt;allowedExtension()) {
        $this-&amp;gt;error(&#39;The type of the file is not supported.&#39;);
        return FALSE;
    }
    if (!$this-&amp;gt;allowedSize()) {
        $this-&amp;gt;error(&#39;The size of the file is bigger than limit.&#39;);
        return FALSE;
    }
    if (!$this-&amp;gt;checkDirectory()) {
        $this-&amp;gt;error(&#39;Unable to access upload directory&#39;);
        return FALSE;
    }
    if ($this-&amp;gt;moveFile()) {
        return $this-&amp;gt;new_name;
    }
    return FALSE;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&quot;adding-power-to-the-constructor&quot;&gt;Adding power to the Constructor&lt;/h2&gt;

&lt;p&gt;While we are able set configuration settings by calling respective methods, it will be more comprehensive if we can provide an option to set the configuration in the constructor.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;function __construct($config = array()) {
    if ($config &amp;amp;&amp;amp; !is_array($config)) {
        return FALSE;
    }
    foreach ($config as $option =&amp;gt; $value) {
        $parts = explode(&#39;_&#39;, $option);
        $cap = array_map(&#39;ucfirst&#39;, $parts);
        $method = &#39;set&#39; . implode(&quot;&quot;, $cap);
        if (method_exists($this, $method)) {
            call_user_func_array(array($this, $method), (array) $value);
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&quot;usage&quot;&gt;Usage&lt;/h2&gt;

&lt;p&gt;To use this class, lets have a form first.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;form action=&quot;&amp;lt;?php echo $_SERVER[&#39;PHP_SELF&#39;]; ?&amp;gt;&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&amp;gt;
    &amp;lt;label for=&quot;file&quot;&amp;gt;Select File:&amp;lt;/label&amp;gt;
    &amp;lt;input type=&quot;file&quot; name=&quot;file&quot; id=&quot;file&quot;&amp;gt;
    &amp;lt;input type=&quot;submit&quot; name=&quot;upload&quot; value=&quot;Upload File&quot;&amp;gt;
&amp;lt;/form&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Add following lines of code at the top of the document.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;if(isset($_POST[&#39;upload&#39;])) {
    require &#39;upload.php&#39;;
    $upload = new Upload([
        &#39;overwrite&#39; =&amp;gt; FALSE,
        &#39;max_size&#39; =&amp;gt; &#39;5M&#39;,
        &#39;directory&#39; =&amp;gt; __DIR__ . &#39;/uploads/&#39;,
        &#39;disallowed_extensions&#39; =&amp;gt; &#39;exe, bin, sh, py&#39;,
    ]);
    $response = $upload-&amp;gt;run();
    if(!$response) {
        $errors = $upload-&amp;gt;error();
    }
}
&lt;/code&gt;&lt;/pre&gt;
</description>
                <pubDate>Sun, 29 Sep 2013 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/create-file-upload-class-in-php/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/create-file-upload-class-in-php/</guid>
                
                    <category>php</category>
                
                    <category>security</category>
                
                    <category>upload</category>
                
                    <category>class</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Enhance File Upload Security with PHP</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;We often face a situation where we need to provide our users a way to upload image, pdf, document etc. The basic html form for file upload is able to handle this with the help of PHP. The basic process of uploading user submitted files to the server with PHP is fairly easy and simple. But there should be some security measures. What will happen if a bad user uploads a malicious file to our server?&lt;/p&gt;

&lt;p&gt;Here we will discuss some of this security measures to block the holes.&lt;/p&gt;

&lt;h2 id=&quot;the-form&quot;&gt;The Form&lt;/h2&gt;

&lt;p&gt;Before anything else, lets assume we have a form for the users to upload a file.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;form action=&quot;&amp;lt;?php echo $_SERVER[&#39;PHP_SELF&#39;]; ?&amp;gt;&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&amp;gt;
    &amp;lt;label for=&quot;file&quot;&amp;gt;Select File:&amp;lt;/label&amp;gt;
    &amp;lt;input type=&quot;file&quot; name=&quot;file&quot; id=&quot;file&quot;&amp;gt;
    &amp;lt;input type=&quot;submit&quot; name=&quot;upload&quot; value=&quot;Upload File&quot;&amp;gt;
&amp;lt;/form&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Remember to use &lt;code&gt;method=&quot;post&quot;&lt;/code&gt; whenever using a form for file upload. As you are already aware of, &lt;code&gt;enctype=&quot;multipart/form-data&quot;&lt;/code&gt; is necessary because it tells the browser how to handle the data submitted as a file.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;files-array&quot;&gt;&lt;code&gt;$_FILES&lt;/code&gt; Array&lt;/h2&gt;

&lt;p&gt;As soon as the file uploads, its details become available in the PHP’s &lt;code&gt;$_FILES&lt;/code&gt; superglobal array.&lt;/p&gt;

&lt;p&gt;If you add the following lines at the top of your page,&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;?php
    if(isset($_POST[&#39;upload&#39;])) { // Checking whether the form has been submitted
        echo &#39;&amp;lt;pre&amp;gt;&#39;;   
        print_r($_FILES);
        echo &#39;&amp;lt;/pre&amp;gt;&#39;;
    }
?&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;and then you upload a file named flower.jpg. After you click ‘Upload File’ button, the details would be shown like this:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;Array
(
    [file] =&amp;gt; Array
        (
            [name] =&amp;gt; flower.jpg
            [type] =&amp;gt; image/jpeg
            [tmp_name] =&amp;gt; C:\xampp\tmp\php9F19.tmp
            [error] =&amp;gt; 0
            [size] =&amp;gt; 780831
        )

)
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;the-errors&quot;&gt;The Errors&lt;/h2&gt;

&lt;p&gt;Before we continue, lets take a look at the errors we can have. In the previous example, the &lt;code&gt;error&lt;/code&gt; is &lt;code&gt;0&lt;/code&gt; which means that there is no error and the file has been successfully uploaded.&lt;/p&gt;

&lt;p&gt;Lets take a look at the various error codes and what they mean.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;0 =&amp;gt; No Error
1 =&amp;gt; Exceeds upload_max_filesize in PHP configuration
2 =&amp;gt; Exceeds MAX_FILE_SIZE in hidden form field
3 =&amp;gt; File partially uploaded
4 =&amp;gt; No file to upload
6 =&amp;gt; No temporary upload folder defined
7 =&amp;gt; PHP failed to write to disk
8 =&amp;gt; A PHP extension prevent the file to be uploaded
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;maxfilesize&quot;&gt;MAX_FILE_SIZE&lt;/h2&gt;

&lt;p&gt;In some cases, you might want to limit the size of the file to be uploaded. The &lt;code&gt;MAX_FILE_SIZE&lt;/code&gt; field tells the browser to prevent the upload if it exceeds certain size. To use this feature, add the following code before the file input field.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;?php
    $max_size = 100 * 1024; // 100KB
?&amp;gt;
&amp;lt;input type=&quot;hidden&quot; name=&quot;MAX_FILE_SIZE&quot; value=&quot;&amp;lt;?php echo $max_size; ?&amp;gt;&quot;&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;If a file larger than the size set, the error will be set to &lt;code&gt;2&lt;/code&gt; and it will not be attempted to upload.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;upload-directory&quot;&gt;Upload Directory&lt;/h2&gt;

&lt;p&gt;When setting or specifying a directory to store the uploaded files, it is much professional to consider some points before doing so.&lt;/p&gt;

&lt;p&gt;The directory where the uploaded file will live, must be set writable. In Linux, permission to the folder must be set to at least 755 or 775.&lt;/p&gt;

&lt;p&gt;If the files are going to be accessible by public, the directory can be under the root of the server. But if the files are protected or contains sensitive data, then it is much wiser to put the directory outside the scope of the server root so that it cannot be accessible via public url.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;move-uploaded-file&quot;&gt;Move Uploaded File&lt;/h2&gt;

&lt;p&gt;It is necessary to move the uploaded file to the directory specified for the files. Otherwise, the uploaded file will be lost as it is just saved as a temporary file at first.&lt;/p&gt;

&lt;p&gt;To move the uploaded file, we will use &lt;code&gt;move_uploaded_file()&lt;/code&gt; method:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;?php
    if(isset($_POST[&#39;upload&#39;])) { // Checking whether the form has been submitted
        ...
        $directory = __DIR__ . &#39;/uploads/&#39;;
        if($_FILES[&#39;file&#39;][&#39;error&#39;] == 0) { // No error
            $result = move_uploaded_file($_FILES[&#39;file&#39;][&#39;tmp_name&#39;], $directory . $_FILES[&#39;file&#39;][&#39;name&#39;]);
            if($result) {
                echo $_FILES[&#39;file&#39;][&#39;name&#39;] . &#39; has been successfully uploaded.&#39;;
            } else {
                echo &#39;There was a problem uploading &#39; . $_FILES[&#39;file&#39;][&#39;name&#39;];
            }
        }
        ...
    }
?&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now the uploaded files will the saved in the ‘uploads’ directory.&lt;/p&gt;

&lt;p&gt;We have improved to some extent but there is a long path to go. We have not implemented any check on file types, file names and we have not provided any support for uploading multiple files. Also, if the uploaded files have same filename, the older one will be overwritten.&lt;/p&gt;

&lt;p&gt;To avoid these situations and implement more validation, we will handle the upload a bit differently. We will &lt;a href=&quot;http://www.arkaroy.net/blog/create-file-upload-class-in-php/&quot;&gt;Create a File Upload Class in PHP&lt;/a&gt; to handle the file upload more efficiently.&lt;/p&gt;
</description>
                <pubDate>Tue, 17 Sep 2013 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/enhance-file-upload-security-with-php/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/enhance-file-upload-security-with-php/</guid>
                
                    <category>php</category>
                
                    <category>security</category>
                
                    <category>upload</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Convert Relative Path to Absolute URL with PHP</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;I was developing a Web Crawler with PHP. But whenever I was crawling a url to get the links from that url, I found that most of the websites use relative path to link to their internal pages. The browser is smart enough to convert those relative paths to absolute url and request the correct page whenever those relative paths are clicked. But, as it seems, PHP does not have any inbuilt support to convert those relative paths to absolute urls.&lt;/p&gt;

&lt;p&gt;Therefore, I decided to define a method to do the job. Here I am sharing my method of converting relative path to absolute url.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;the-base&quot;&gt;The Base&lt;/h2&gt;

&lt;p&gt;The first thing to mention is the base url. The relative paths are, actually, relative to the base url. If the page contains any &lt;code&gt;&amp;lt;base&amp;gt;&lt;/code&gt; tag with its &lt;code&gt;href&lt;/code&gt; attribute set, the browser will treat that url as base url. Otherwise, the browser will treat the url of the current page as the base url.&lt;/p&gt;

&lt;p&gt;Now first define a base url:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$baseUrl = &#39;http://example.com/some/fake/path/page.html&#39;;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;So we are assuming that we are currently on this page and this url is our base url as defined with &lt;code&gt;$baseUrl&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;the-method&quot;&gt;The Method&lt;/h2&gt;

&lt;p&gt;As the base url is set, its time to start defining the method:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;function absoluteUrl($relativeUrl, $baseUrl) {
    // some codes to execute
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Here we will pass the relative path as the &lt;code&gt;$relativeUrl&lt;/code&gt; and the base url as the &lt;code&gt;$baseUrl&lt;/code&gt;. I decided to pass each and every path I encounter while crawling. Therefore the path may be an absolute one. So we have to keep that in mind.&lt;/p&gt;

&lt;p&gt;Now here is the body of the method:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;// Skip converting if the relative url like http://... or android-app://... etc.
if (preg_match(&#39;/[a-z0-9-]{1,}(:\/\/)/i&#39;, $relativeUrl)) {
    return $relativeUrl;
}

// Treat path as invalid if it is like javascript:... etc.
if (preg_match(&#39;/^[a-zA-Z]{0,}:[^\/]{0,1}/i&#39;, $relativeUrl)) {
    return NULL;
}

// Convert //www.google.com to http://www.google.com
if(substr($relativeUrl, 0, 2) == &#39;//&#39;) {
    return &#39;http:&#39; . $relativeUrl;
}

// If the path is a fragment or query string,
// it will be appended to the base url
if(substr($relativeUrl, 0, 1) == &#39;#&#39; || substr($relativeUrl, 0, 1) == &#39;?&#39;) {
    return $baseUrl . $relativeUrl;
}

// Treat paths with doc root, i.e, /about
if(substr($relativeUrl, 0, 1) == &#39;/&#39;) {
    return onlySitePath($baseUrl) . $relativeUrl;
}

// For paths like ./foo, it will be appended to the furthest directory
if(substr($relativeUrl, 0, 2) == &#39;./&#39;) {
    return uptoLastDir($baseUrl) . substr($relativeUrl, 2);
}

// Convert paths like ../foo or ../../bar
if(substr($relativeUrl, 0, 3) == &#39;../&#39;) {
    $rel = $relativeUrl;
    $base = uptoLastDir($baseUrl);
    while(substr($rel, 0, 3) == &#39;../&#39;) {
        $base = preg_replace(&#39;/\/([^\/]+\/)$/i&#39;, &#39;/&#39;, $base);
        $rel = substr($rel, 3);
    }
    return $base . $rel;
}

// else
return uptoLastDir($baseUrl) . $relativeUrl;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now in the method you have found two another method &lt;code&gt;uptoLastDir()&lt;/code&gt; and &lt;code&gt;onlySitePath()&lt;/code&gt;. Here is those methods:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;// Get the root path from url
// http://example.com/some/fake/path/page.html =&amp;gt; http://example.com/
function onlySitePath($url) {
    $url = preg_replace(&#39;/(^https?:\/\/.+?\/)(.*)$/i&#39;, &#39;$1&#39;, $url);
    return rtrim($url, &#39;/&#39;);
}

// Get the path with last directory
// http://example.com/some/fake/path/page.html =&amp;gt; http://example.com/some/fake/path/
function uptoLastDir($url) {
    $url = preg_replace(&#39;/\/([^\/]+\.[^\/]+)$/i&#39;, &#39;&#39;, $url);
    return rtrim($url, &#39;/&#39;) . &#39;/&#39;;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;usage&quot;&gt;Usage&lt;/h2&gt;

&lt;pre&gt;&lt;code&gt;echo absoluteUrl(&#39;/about&#39;, &#39;http://example.com/dir/&#39;);
// Output: http://example.com/about

echo absoluteUrl(&#39;dir.html&#39;, &#39;http://example.com/dir/page.html&#39;);
// Output: http://example.com/dir/dir.html

echo absoluteUrl(&#39;../../foo.html&#39;, &#39;http://example.com/dir/foo/bar/index.html&#39;)
// Output: http://example.com/dir/foo.html
&lt;/code&gt;&lt;/pre&gt;
</description>
                <pubDate>Tue, 03 Sep 2013 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/convert-relative-path-to-absolute-url-with-php/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/convert-relative-path-to-absolute-url-with-php/</guid>
                
                    <category>php</category>
                
                    <category>url</category>
                
                    <category>absolute-url</category>
                
                    <category>relative-path</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Advantages of HTML5</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;HTML5 is the new definition of web designing. It has been designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. HTML5 is specially designed to deliver rich content without the need for additional plugins. The current version delivers everything from animation to graphics, music to movies, and can also be used to build complicated web applications. HTML5 is also cross-platform. It is designed to work whether you are using a PC, or a Tablet, a Smartphone, or a Smart TV.&lt;/p&gt;

&lt;p&gt;Lets discuss some advantages or beneficial features of HTML5.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;mutuality&quot;&gt;Mutuality&lt;/h2&gt;

&lt;p&gt;The developers make websites highly interactive nowadays, to keep up with the demands of the user. For this purpose, they need to incorporate fluid animations, stream video, music and Social Network site links, like those of Facebook and Twitter, into the websites. Now, with the help of HTML5, it is possible to embed video &amp;amp; audio, high quality drawings, charts &amp;amp; animation and much more rich content, without using any plug-ins or any other computer programs.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;improved-codes&quot;&gt;Improved Codes&lt;/h2&gt;

&lt;p&gt;HTML5 enables web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML5 elements.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;improved-semantics&quot;&gt;Improved Semantics&lt;/h2&gt;

&lt;p&gt;It is now easy to see which parts of the page are headers, navigators, footers, aside functions, etc and most importantly, know what their meaning and purpose is in the whole format, as the tags for these functions are more specific. By using HTML5 elements, we can increase the semantic value of the web page, as the codes are very standardized.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;elegant-forms&quot;&gt;Elegant Forms&lt;/h2&gt;

&lt;p&gt;HTML5 enables designer to use fancier forms. It even makes form validation native to HTML, enables user interface enhancements and reduces need for JavaScript (but you need modern browser).&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;consistency&quot;&gt;Consistency&lt;/h2&gt;

&lt;p&gt;As websites adopt the new HTML5 elements, we will see greater consistency in terms of the HTML used to code a web page. This will make it easier for designers and developers to immediately understand how a web page is structured.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;improved-accessibility&quot;&gt;Improved Accessibility&lt;/h2&gt;

&lt;p&gt;HTML5 and its elements enable more detailed understanding of the structure of a page and make the technologies and features of web design more accessible.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;web-application-development&quot;&gt;Web Application Development&lt;/h2&gt;

&lt;p&gt;Many new features and standards have emerged, as part of HTML5. Once you understand the available features in the browsers today, you can utilize them in your application and keep up with the changing trends. The main objective of HTML5 is to make web application easier with easy front-ends, drag and drop tools, discussion boards, wikis and other useful elements.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;offline-application-cache&quot;&gt;Offline Application Cache&lt;/h2&gt;

&lt;p&gt;While building the site, a developer can now specify the files that he would want the browser to cache. This way, if you refresh the page when you are offline, the page will still load correctly. This has several advantages like offline browsing, files loading much faster and reduced load on the server.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;user-database&quot;&gt;User Database&lt;/h2&gt;

&lt;p&gt;HTML5 has two storage devices – Session Storage and Local Storage, instead of the cookies, used to track user data, which could cause disadvantages with tedious repair procedures. It is not a permanent database, but enables you to store structured data, temporarily.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;geo-location&quot;&gt;Geo-location&lt;/h2&gt;

&lt;p&gt;Geo-location is used to track your location and share it with others. Your IP address, wireless network connection, the cell tower your phone is connected to, or the recent GPS hardware can all help in tracking your location. The new HTML5 Geo-location APIs make information, about your location, generated via GPS or other methods, directly available to any application with an HTML5-compatible browser.&lt;/p&gt;
</description>
                <pubDate>Fri, 16 Aug 2013 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/advantages-html5/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/advantages-html5/</guid>
                
                    <category>html5</category>
                
                    <category>semantic</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Drop Cap Letters in CSS</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Drop Cap is a traditional newspaper technique of making the first letter of a paragraph capital and take the height of three or four lines. In that way, it is easier to grab the attention of the reader and specify the start of a section.&lt;/p&gt;

&lt;p&gt;In this tutorial we are going to implement that style in our css using a new CSS3 technique.&lt;/p&gt;

&lt;h2 id=&quot;css-first-letter&quot;&gt;CSS First Letter&lt;/h2&gt;

&lt;p&gt;CSS allows you to add a property &lt;code&gt;:first-letter&lt;/code&gt; which as you can guess allows you to style the first letter of the element.&lt;/p&gt;

&lt;p&gt;Consider this paragraph:&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in metus nec mauris egestas laoreet. Integer vehicula velit non massa suscipit at porta sem commodo. Donec nibh lectus, vulputate a aliquet quis, sollicitudin eget metus. Nullam quis tellus nibh. Praesent fermentum risus sit amet turpis eleifend dapibus. Duis tellus leo, tempor sit amet ultricies viverra, mollis at quam. Suspendisse hendrerit sagittis risus nec faucibus. Nam urna magna, porta vitae tincidunt sit amet, blandit eget diam. Vivamus a ornare augue. Vivamus sapien sem, facilisis vitae molestie eget, tempus ut augue. Sed suscipit facilisis mi, eu laoreet est gravida eu. Nulla et arcu quam, pellentesque adipiscing felis. Nam pretium augue sed sapien malesuada tempor. Nulla facilisi. Donec eu tempor mi.&amp;lt;/p&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;We can add the drop cap style to the paragraph using &lt;code&gt;:first-letter&lt;/code&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;p:first-letter {
    display:block;
    float:left;
    font-family:inherit;
    font-size: 360%;
    font-weight: bold;
    line-height: 85%;
    margin-right: 8px;
    margin-top: 5px;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;This css will stylize the first letter exactly how we want.&lt;/p&gt;
</description>
                <pubDate>Tue, 23 Jul 2013 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/how-to-create-drop-cap-letters-in-css/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/how-to-create-drop-cap-letters-in-css/</guid>
                
                    <category>css</category>
                
                    <category>typography</category>
                
                    <category>drop-cap</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Early Devices to Project Animation before Films</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Numerous devices which successfully displayed animated images were introduced well before the advent of the motion picture. These devices were used to entertain, amaze and sometimes even frighten people. The majority of these devices did not project their images and accordingly could only be viewed by a single person at any one time. For this reason, they were considered toys rather than being a large scale entertainment industry like later animation. Many of these devices are still built by and for film students being taught the basic principles of animation.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;the-magic-lantern-c-1650&quot;&gt;The Magic Lantern (c. 1650)&lt;/h2&gt;

&lt;p&gt;The Magic Lantern is an early predecessor of the modern day projector. It consists of a translucent oil painting, a simple lens and a candle or oil lamp. In a darkened room, the image would appear projected onto an adjacent flat surface. It was often used to project demonic, frightening images in order to convince people that they were witnessing the supernatural. Some slides for the lanterns contained moving parts which makes the Magic Lantern the earliest known example of projected animation. The origin of the Magic Lantern is debated, but in the 15th century the Venetian inventor Giovanni Fontana published an illustration of a device which projected the image of a demon in his Liber Instrumentorum. The earliest known actual magic lanterns are usually credited to Christiaan Huygens or Athanasius Kircher.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;thaumatrope-1824&quot;&gt;Thaumatrope (1824)&lt;/h2&gt;

&lt;p&gt;A thaumatrope was a simple toy used in the Victorian era. A thaumatrope is a small circular disk or card with two different pictures on each side that was attached to a piece of string or a pair of strings running through the centre. When the string is twirled quickly between the fingers, the two pictures appear to combine into a single image. The thaumatrope demonstrates the Phi phenomenon, the brain’s ability to persistently perceive an image. Its invention is often credited to Sir John Herschel. John A. Paris popularized the invention when he used one to illustrate the Phi phenomenon in 1824 to the Royal College of Physicians.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;phenakistoscope-1831&quot;&gt;Phenakistoscope (1831)&lt;/h2&gt;

&lt;p&gt;The phenakistoscope was an early animation device. It was invented in 1831 simultaneously by the Belgian Joseph Plateau and the Austrian Simon von Stampfer. It consists of a disk with a series of images, drawn on radii evenly spaced around the center of the disk. Slots are cut out of the disk on the same radii as the drawings, but at a different distance from the center. The device would be placed in front of a mirror and spun. As the phenakistoscope is spun, a viewer would look through the slots at the reflection of the drawings which would only become visible when a slot passes by the viewer’s eye. This created the illusion of animation.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;zoetrope-180-ad-1834&quot;&gt;Zoetrope (180 AD; 1834)&lt;/h2&gt;

&lt;p&gt;The zoetrope concept was suggested in 1834 by William George Horner, and from the 1860s marketed as the zoetrope. It operates on the same principle as the phenakistoscope. It was a cylindrical spinning device with several frames of animation printed on a paper strip placed around the interior circumference. There are vertical slits around the sides through which an observer can view the moving images on the opposite side when the cylinder spins. As it spins the material between the viewing slits moves in the opposite direction of the images on the other side and in doing so serves as a rudimentary shutter. The zoetrope had several advantages over the basic phenakistoscope. It didn’t require the use of a mirror to view the illusion, and because of its cylindrical shape it could be viewed by several people at once.&lt;/p&gt;

&lt;p&gt;In China around 180 AD the prolific inventor [Ting Huan] invented a device similar to the modern zoetrope. It was made of translucent paper or mica panels and was operated by being hung over a lamp so that vanes at the top would rotate as they came in contact with the warm air currents rising from the lamp. It has been stated that this rotation, if it reached the ideal speed triggered the same illusion of quick animation as the later zoetrope, but since there was no “shutter” (the slots in a zoetrope), the effect was in fact simply a series of horizontally drifting figures, with no true animation.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;flip-book-1868&quot;&gt;Flip book (1868)&lt;/h2&gt;

&lt;p&gt;The first flip book was patented in 1868 by John Barnes Linnett as the kineograph. A flip book is just a book with particularly springy pages that have an animated series of images printed near the unbound edge. A viewer bends the pages back and then rapidly releases them one at a time so that each image viewed springs out of view to momentarily reveal the next image just before it does the same. They operate on the same principle as the phenakistoscope and the zoetrope what with the rapid replacement of images with others, but they create the illusion without any thing serving as a flickering shutter as the slits had in the previous devices. They accomplish this because of the simple physiological fact that the eye can focus more easily on stationary objects than on moving ones. Flip books were more often cited as inspiration by early animated filmmakers than the previously discussed devices which didn’t reach quite as wide of an audience. In previous animation devices the images were drawn in circles which meant diameter of the circles physically limited just how many images could reasonably be displayed. While the book format still brings about something of a physical limit to the length of the animation, this limit is significantly longer than the round devices. Even this limit was able to be broken with the invention of themutoscope in 1894. It consisted of a long circularly bound flip book in a box with a crank handle to flip through the pages.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2 id=&quot;praxinoscope-1877&quot;&gt;Praxinoscope (1877)&lt;/h2&gt;

&lt;p&gt;The first animated projection (screening) was created in France, by Charles-Emile Reynaud, who was a French science teacher. Reynaud created the Praxinoscope in 1877 and the Theatre Optique in December 1888. On 28 October 1892, he projected the first animation in public, Pauvre Pierrot, at the Musee Grevin in Paris. This film is also notable as the first known instance of film perforations being used. His films were not photographed, but drawn directly onto the transparent strip. In 1900, more than 500,000 people had attended these screenings.&lt;/p&gt;
</description>
                <pubDate>Wed, 05 Jun 2013 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/blog/early-devices-to-project-animation-before-films/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/blog/early-devices-to-project-animation-before-films/</guid>
                
                    <category>animation</category>
                
                    <category>projection</category>
                
                
                    <category>blog</category>
                
            </item>
        
            <item>
                <title>Student Resource Manager</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Build a web application for Arena Animation to fulfill the need of a efficient but easy-to-use web-based platform for managing students and the resources allocated for them.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/student-resource-manager-web-app-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Wed, 23 May 2012 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/student-resource-manager-web-application/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/student-resource-manager-web-application/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>Arena Animation Landing Page</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Build the landing page for Arena Animation – a leading institute providing professional training on multimedia and animation – for lead generation. Call-to-Action has been integrated with sharp color contrast. Simple, smart and eye-catching design is for targeting a broader variety of users. The design is fully responsive which makes it compatible with various screen sizes.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-landing-page-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-landing-page-02.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-landing-page-03.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Tue, 10 Apr 2012 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/arena-animation-landing-page/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/arena-animation-landing-page/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
            <item>
                <title>Arena Animation Website</title>
                <dc:creator>Arka Roy</dc:creator>
                <description>&lt;p&gt;Build the website for Arena Animation - a leading institute providing professional training on multimedia and animation. The project incorporates delivering visual aids, easy-to-use and enhanced readability. The design is fully responsive which makes it compatible with various screen sizes.&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-website-01.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-website-02.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-website-03.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-website-04.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-website-05.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-website-06.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;/p&gt;

&lt;p&gt;&lt;img src=&quot;/assets/image/arena-animation-website-07.jpg&quot; alt=&quot;Project Screenshot&quot; /&gt;&lt;/p&gt;
</description>
                <pubDate>Wed, 21 Mar 2012 00:00:00 +0530</pubDate>
                <link>http://www.arkaroy.net/portfolio/arena-animation-website/</link>
                <guid isPermaLink="true">http://www.arkaroy.net/portfolio/arena-animation-website/</guid>
                
                
                    <category>portfolio</category>
                
            </item>
        
    </channel>
</rss>