If you are building a fairly complex web application, there is a high probability that you will have a lot of JavaScript code, and you would want to organize your code in some modular way that will be easier to maintain. Also at the same time you would also want to use some sort of a framework to simplify the process for you. But before getting there, let’s talk about how we got here at first place. In this video Robin Ward, co-founder of Discourse, talks about browser applications.

Building a fairly complex web application needs a very careful planning. Not just at the application level, but also at maintainability and efficiency level. Even if you are going to be the only person that’s going to work and maintain the code for a foreseeable future. Here are 9 things I thought you should know after creating your Hello World application and before creating your next application using Ember, especially if you are going to use Ember Data as your persistence library. Due to readers request, here is the code.

DemoDownload Source

Continue Reading 9 Things you should know before starting your next Ember.js and Ember Data application

Big MailChimp is a powerful plugin that provides an abstraction level and handles many tasks in the background. Hence, we are able to provide an easy to use interface with only a few options to modify. In most cases the default settings will suffice. However, some of us like to have a 100% control over the code and performance of our sites. Some of the options have already been explained in the plugins page and Adding MailChimp Forms to your WordPress Site. Continue Reading Big MailChimp Options

Email marketing is an effective way of reminding people to visit your site and keep them updated through your newsletters. It is a great tool to reach to thousands of people who have voluntarily signed up to your mailing list to receive updates from you. However, before any email marketing efforts can be done, you will need to collect an email list. Collecting an email list is not an easy task. Many email newsletter companies will provide you a link to a page that contains an email capture form that is hosted by them. This means every time a visitor tries to sign up to your mailing list they will have to exit your site. Not cool! Continue Reading Adding MailChimp Forms to your WordPress Site

We occasionally receive emails from our visitors with a specific question that we can refer to an article or section of a page on our website. However, with our lengthy articles, often times we find it frustrating to direct the user to a page with few lines of instructions. This is where anchor tags come in for the help. We decided to manipulate the content and add anchor tags to all our H2 tags.

Here is a feature that we thought is missing in WordPress

Add this code in your functions.php file and all your H2 tags will get an id attributes. Here we use WordPress’s built in sanitize_title_with_dashes function that’s used for creating permalinks when you type in your new post title.

// This function adds nice anchor with id attribute to our h2 tags for reference
// @link: http://www.w3.org/TR/html4/struct/links.html#h-12.2.3

function anchor_content_h2($content) {

    // Pattern that we want to match
    $pattern = '/<h2>(.*?)</h2>/';

    // now run the pattern and callback function on content
    // and process it through a function that replaces the title with an id 
    $content = preg_replace_callback($pattern, function ($matches) {
                $title = $matches[1];
                $slug = sanitize_title_with_dashes($title);
                return '<h2 id="' . $slug . '">' . $title . '</h2>';
            }, $content);
    return $content;

add_filter('the_content', 'anchor_content_h2');

And there we have our anchor tags. Now we can link to specific sections of our website like How to overwrite a CSS rule. Add some smooth scrolling if you desire, and you will have an impressive and user friendly website.

Why this feature is not a default in WordPress you ask?

Well, according to W3C Recommentatin for anchor tags, you can not have id attributes declare the same name twice in the same document. And since these elements are coming from the content editor generated by the user, there is no way to produce a valid markup if users use the same sub headings in the same post.

In this tutorial, we will explore business analysis and the essentials to write our first software requirements document. Taking an idea to the next level requires a little bit of planning. This is the planning phase of our web application development, also known as Requirements Engineering phase. If you are an entrepreneur, and would like to bridge the gap to development and software engineering world, this is that bridge. In this and next tutorial we will create a requirements document based on IEEE Recommended Practice for Software Requirements Specifications. We will start a basic requirements document for an online education and training app to be used as an employee training application for our imaginary client or prospects that we might be interested to sell this application to later on. We will build more on these requirements as we proceed with later versions of our application.

We started these web application tutorial series with an introduction to web apps and a very basic AJAX CRUD tutorial based on Zend Framework 2. However, our goal is to start developing complex web applications that could do more than just a simple create, read, update, and delete functions. Therefore, let’s start exploring what our application should do, and let’s start developing our initial requirements document. Continue Reading Start with an Idea and do the Business Analysis – Web Application Tutorial Series

As a contributor to the open-source community I often get email from users about errors they get from their server. Most often, a close scrutiny of their server’s configuration leads to finding out they are using PHP 5.2 or earlier. Which would have been fine if we lived in a time period between November 2, 2006 to January 6, 2011. I can give you exact dates because the company that creates and maintains the language gives you guidelines on when to update and migrate to a new release. Continue Reading Stop Using PHP 5.2!

The purpose of this tutorial is to demonstrate pagination features of the Zend Framework . As an added bonus I will show you how to combine pagination and data sorting to display sorted tables in your ZF2 web projects. For the purpose of this tutorial we will extend Rob Allen’s famous Album Inventory Tutorial. You can download the complete source code from Github.

Download Source

Continue Reading Zend Framework 2 Pagination & Sorting Tutorial

In this tutorial we will create a complete Zend Framework 2 application and explore some of the features it provides. We will create a sticky note application based on the styling provide by Codepen. This tutorial is similar to the brilliant inventory tutorial provided by Rob Allen. The major difference is that we will spend more time on styling and we will handle the Create, Read, Update, and Delete (CRUD) operations dynamically using jQuery Ajax. You can download the complete source code from Github.

Download Source

Continue Reading Zend Framework 2 – Simple Web Application – CRUD using Ajax Tutorial

So you want to start developing your very first web application? You want to know how you can start quickly and develop your first web application? Well here is the good news, you are at the right place. With these web app development tutorial series we are here to guide you through the development of your first web application and more. But, there are few points before we start. First, we have to mention that these tutorial series are meant for more technical audience with prior web design and development experience. Second, there are different approaches to even developing a simple application. You can copy and paste some code together and call it a success, or take a stricter engineering approach and build a code base that would have test cases, easily extendable, or even scalable for future versions, should you decide to build more features on your existing architecture. In this tutorial series we are going to develop a very simple web application, and build more and more on the same code. Because in real life that’s how software evolves. We will also cover some methodologies and software engineering concepts such as Rapid Application Development (RAD), and Continuous Integration (CI), and many more techniques and best practices that would help you with developing more complex systems. We tried to keep these methodologies separate from the coding tutorial sections, so people familiar with the methodologies could jump straight to the code.
So let’s get started with the concept first, and what you should know before starting your very first and simple web application.
Continue Reading How to build your first web application – Tutorial series

Food Web Application

You have designed the perfect layout for your new and upcoming website. But now converting all that beautiful Photoshop PSD layered file into a pixel perfect code is the challenging part. It is not challenging because you don’t know how to code, but more challenging because different browsers render your code differently, even when you are using a completely valid CSS code to display that awesome semantic HTML5 code you have written. This is even more frustrating when fixing a bug in one browser now becomes a new bug in another browser. Even if that’s not challenging, now imagine you are assigned to fix someone else’s code that’s all over the place. Often time this last case is the one that makes you pull your hair and say numerous WTFs before you completely understand what is going on in their code, because you probably know your entire style sheet by heart and this new code is no where close to any coding convention. However, moment of getting down and dirty with debugging that CSS code is much simpler and less frustrating than before, thanks to these very simple tools and techniques.

Continue Reading 4 simple techniques to quickly debug and fix your CSS code in almost any browser