Travis CI: Continuous Integration for PHP Project


Introduction:


While the last article was “Get Started With Test Driven Development: Unit Testing With PHPUnit?. ”, this article will help to beginning with Travis, which make joint effort with your group. 

Travis CI is a computerisation tool which permits group to submit and construct venture without any problem. When you have arranged your GITHUB project, at whatever point there is new commit, Travis CI will synchronise code from GITHUB repository and start the build process. This way developer don't need to worry about running PHPUnit every time. Travis builds & deploy your software rapidly. Personally like Travis CI as a automatic build tool as it is easy to integrate with GITHUB, it has a clean UI, a lot of highlights while beginning with other automation tool is tricky.

Travis CI supports multiple programming languages, you just need to define in your .travis.yml file (in root directory of the project) that which language project written and remaining Travis will take care. I will not be able to explain all language and environment they support, you can find from their documentation. Today we gonna write about “How to integrate Travis CI (continuous integration) automation tool for a PHP project on GITHUB repository.”

Get Started With Travis CI:

Below are neat steps for Integrating Travis CI in your GITHUB projects.

Step1: Travis UI- Sign in:

Sign in into Travis CI Tool using your GITHUB account.


Step2: Travis Setup- Activating for the repository:

Setting up Travis is very simple and straight forward. Once you logged into Travis, go to profile page and you can see your entire GITHUB repositories already synchronised and displaying into the page. Choose which repository you want to build, activate/deactivate it using simple “on”/“off” button as below screenshot.


If you have created a new repository into GITHUB under the same account and it is not displaying into Travis profile page, then simply click on “Sync” button as highlighted in above screenshot. Once you activate Travis for your repository every time you commit into the repository Travis will trigger build process.

Step3: Travis Aware- Add a .travis.yml file into your Repository

Different project will different environment setup. To inform Travis CI under what environment you require to build and test your project, you need to add a configuration file named .travis.yml in root directory of your GITHUB project. Below sample example,


Above .travis.yml configuration file informs Travis that it is PHP based project, Travis should run tests against 4 different versions of PHP as well as in HVVM. It also tells that project will accept failure in PHP v7.0, before build it should update the composer version. It will run all our tests suits located into tests directory.

By default on every Build Failure Travis will notify you via email. However you can stop notification by changing the notification flag as "false" as above screenshot.

To verify yml config file use http://lint.travis-ci.org/.

A great way to learn about .travis.yml is browse through various open source projects in GITHUB repositories that are uses Travis CI for build process. Here some example below,

Step4: Adding Travis CI Service into GITHUB:

Goto your Travis profile page by clicking Account, find token left hand side. This token will be used to identify your github project by Travis CI. See screenshot below,


Copy the token and while adding a service paste into the box, goto your repository settings, under “Webhooks & Services”. sample screenshot below to find location.


Step5: Travis Build- Triggering Build Process:

Now Travis is ready to build our awesome project, every time we push into GITHUB repository Travis will start building the project. You can see the build process or status in your travis page, under your githubu-username/repository-name. For example below.

https://travis-ci.org/cygnite/framework

See the build status on same page. You can see below screenshot as all tests passes for Cygnite it shows green, else it will display as red.


You can manually restart the build by clicking a button as above screenshot.

Build History:

Click on Build history tab to see history of builds it processed. Sample screenshot below.


Learn More:

You can find more information about Travis configuration in their official documentation. Some useful links below,

Wrapping Up:

I believe I gave you very good introduction of Travis CI Integration with GITHUB projects. It is really very easy to use. As popular dependency manager composer for PHP, Travis CI is also becoming favorite Continuous Integration tool for developers. So now it’s your turn, give it a try. You will be up and running fast.

You have anything to share? Please let us know by posting your comments below. Please don't forget to share this article with your friends. Thanks for reading.

Get Started With Test Driven Development: Unit Testing With PHPUnit?



Introduction

While last article was "10 Best PHP Tools For Developers", choosing better tools for web development, this article is for those who want to write better testable code.

You might have come across such situations where you write bunch of code as library or component, where one library is depend on another, and when you fix one bug another comes up. This is frustrating when you need to go for production deployment and at the last moment you are identifying an bug which is related to your earlier fix or may be new one. You may need to sit back and debug entire application to find out where exactly going wrong. It happens for most of the developers, when we are most confident about our code, don't do unit testing or miss small piece of code which break down the application at end.

Well!! Is there any better way of delivering quality code? Yes!! Unit testing is the right approach. In this tutorial we will see how to make use of PHPUnit to develop error free application. This article is absolutely for beginner, as it will show you how to setup environment, write basic test cases using PHPUnit. You can start from here, do unit test in your future work.

Unit Testing & Why?

Before getting started with PHPunit to write some tests, let us find out "What is unit testing?", Why it required? How to get started with?

Unit testing is practice of testing unit of code or functions. By this way we can verify our code returns expected output.

From my personal experience, I would say if unit testing is in your mind, it helps you to write better testable code, refactoring existing code, helps you to build decoupled application. Consider you have been writing huge libraries for your project, due to time constraints you have skipped unit testing on the code, later on when you want to write some unit tests you couldn't, because code is not easy to test. And you will end up refactoring to write testable code. By this way unit testing helps to write testable code. It's always better to go for test driven approach, write code and keep unit testing in mind, do run tests after every changes in code, it will save you at end.

You may be wondering, If Unit Testing is de-facto standard then “Why People don't write Unit Tests?”. May be there are several reason,

• Most of the developers are confident about their code, they feel unit testing not required. But in real time some scenarios, it fails.

• It really takes lot time to test each class.

• Some people feel boring to write test assertions on every functions.

But believe me unit testing will save your ass at end and help you to deliver quality code.

Installing PHPUnit:

I will not go in detail as it is already explained in PHPUnit’s beautiful documentation. If you are using linux you can install PHPUnit using simple commands as below,


$ wget https://phar.phpunit.de/phpunit.phar
$ chmod +x phpunit.phar
$ sudo mv phpunit.phar /usr/local/bin/phpunit
$ phpunit --version

Above command will install PHPUnit globally.

PHPUnit - Composer Installation:

You can also install PHPUnit using composer, which is handy too. Just specify requirement into your composer.json as below,


{
"require": {
        "php": ">=5.4",
        "cygnite/framework": "dev-master",
   }, 
   "require-dev": {
       "mockery/mockery": "~0.9.1",
       "phpunit/phpunit": "4.8.*"
   },
}

See also: Cygnite composer.json

I hope you have composer installed already. Now go to terminal and enter "composer install" from the root directory of your project. Alternatively you can also install PHPunit globally using composer as below,


composer global require "phpunit/phpunit=4.8.*"

You can find vendor folder with PHPUnit libraries, and other packages.

Environment Setup:

In order to test the code we need some libraries. We have already installed Cygnite PHP Framework. For sample example we will test Cygnite's IoC Container class. You can define your configuration into the file phpunit.xml and the bootstrap file index.php or phpunit.php into your root directory.

Your phpunit.xml should look somewhat like below,

See also: Cygnite phpunit.xml

<?xml version="1.0" encoding="UTF-8"?>
<phpunit backupGlobals="false"
         backupStaticAttributes="false"
         bootstrap="phpunit.php"
         colors="true"
         convertErrorsToExceptions="true"
         convertNoticesToExceptions="true"
         convertWarningsToExceptions="true"
         processIsolation="false"
         stopOnFailure="false"
         syntaxCheck="false"
>
    <testsuites>
        <testsuite name="Cygnite Test Suite">
            <directory>./tests/</directory>
        </testsuite>
    </testsuites>

    <filter>
        <whitelist addUncoveredFilesFromWhitelist="false">
            <directory suffix=".php">src</directory>
            <exclude>
                <directory suffix=".php">vendor</directory>
            </exclude>
        </whitelist>
    </filter>
</phpunit>


And bootstrap file phpunit.php :

See also: Cygnite phpunit.php

define('CF_SYSTEM',1);
require __DIR__.'/vendor/autoload.php';

If you look at the xml configuration you can see we have defined the test directory also other configuration such as name of bootstrap file and colors=“true”. It helps to display success or failure in green or red respectively.

You can also specify configuration by passing argument from command line. You can read from here

Sample Application Structure:

It is sample directory structure; however it depends on your application. Now our environment ready to test something awesome.

Writing Our First Test Cases:

As a part of tutorial we will test Cygnite Framework's Container class. For sample, we will write some basic assertion to test Container class. All of our tests files are located inside tests directory.

Folder Structure:

Root Directory: phpunit/

Xml Configuration File: phpunit.xml

Bootstrap File: phpunit.php

Testable Class Path: phpunit/vendor/cygnite/framework/src/Cygnite/Container/Container.php

Test Class: phpunit/vendor/cygnite/framework/tests/Cygnite/Container/ContainerTest.php

We will also use Mockery to mock object with PHPunit. Make sure every class should be suffix with string "Test", for example below sample ContainerTest.php class.


use Mockery as m;

class ContainerTest extends PHPUnit_Framework_TestCase
{
    private $container;

    public function setUp()
    {
        $this->container = new \Cygnite\Container\Container();
    }

    public function testMakeClass()
    {
        $router = new \Cygnite\Base\Router\Router();
        $url = new \Cygnite\Common\UrlManager\Url($router);

        $madeUrl = $this->container->make('\Cygnite\Common\UrlManager\Url');
        $this->assertEquals($url, $madeUrl);
        $this->assertInstanceOf('\Cygnite\Container\Container', $this->container);
    }

    public function testClouserResolutionAsObject()
    {
        $this->container->name = function() {
             return 'Cygnite';
        };

        $this->assertEquals('Cygnite', $this->container->name);
    }

    public function testArrayAccess()
    {
        $this->container['greet'] = 'Hello World!!';
        $this->assertEquals("Hello World!!", $this->container['greet']);
    }

    /**
     * @expectedException     \Cygnite\Exception\Http\HttpException
     * @expectedExceptionMessage Not Found!
     */
    public function testException()
    {
        throw new \Cygnite\Exception\Http\HttpException(404, "Not Found!");
    }


    public function tearDown()
    {
        m::close();
    }
}


See also: ContainerTest.php

In the above example, you can see method “setUp” and “tearDown” similar as magic method __construct and __destruct, setUp is where you can do some configuration before executing test methods. For example you want to test database queries or you don’t want to create an object of class every time in all methods. In such cases, you can configure connection or create an instance of class one time into setUp() method and use it in any method of that test class. Similarly you can see, I have used tearDown() method to close Mockery object.

Few Basic Assetion Methods To Remember:

setUp() – setting up configurations etc.

tearDown() – Close connection or destroy mock objects

assertEquals – Check equality of output

assertTrue – Check method returning true or not.

assertEmpty – Check function or any argument value is empty

assetInstanceOf- Check given string is instance of specific class

assertNull – Check if value is null or not

Apart from that there are many assertion methods, you can make use of those based on the requirement. Find out those assertion functions from PHPUnit documentation. You can also use annotation for running assertion. For example you want to do some test to verify if method throws correct exceptions with exception message. Such case simply use annotation as below,


   /**
     * @expectedException  \Cygnite\Exception\Http\HttpException
     * @expectedExceptionMessage Not Found!
     */
    public function testException()
    {
        throw new \Cygnite\Exception\Http\HttpException(404, "Not Found!");
    }


In above testException method we are verifying if code throws “Cygnite\Exception\Http\HttpException” exception, and with the message “Not Found!”.

Likewise there are various "annotation" exists in PHPUnit to run assertions read from here.

Are you still wondering how to test code using PHPUnit ? Have a look at some sample tests, I executed on Cygnite PHP Framework core classes.

Running Tests:

Running tests is just simple using phpunit executable file, but you need to make sure you are pointing it to your test file. Here example:



phpunit\vendor\bin> phpunit –c ../../phpunit.xml --bootstrap ../../phpunit.php ../cygnite/framework/tests/Cygnite/Container/ContainerTest.php

// -c – Xml configuration file

// --bootstrap – Your bootstrap file to autoload all files or for some initial configurations etc.


Sample Output:

Assertion Failure:

Assertion Success:

PHPunit displays number of assertion, pass, failure, number of tests etc. If any of the tests fails it will display failed in red with method name, reason etc. And on success it will display green with number of assertion, tests etc.

Is it not easy?

Conclusion:

Though there are multiple things to cover, I believe I have given you good introduction of PHPUnit and How to write basic unit tests using PHPUnit.

So, why to be lazy? when you can deliver quality code. Start doing assertions tests on your code for current or future projects. Jump start from here with test driven development. Write code better, testable, modular. I hope this article is useful to you. Please don't forget to share with your friends and leave your comments below.

Keep Visiting.

10 Best PHP Tools For Developers


Introduction

You may like to read our last article "Backbone JS vs Angular JS- Uncovering key differences".

PHP (a recursive backronym which means PHP Hypertext Preprocessor) is one of the most popular scripting languages among web developers because it is open source and platform independent. Apart from that, the most important thing is that it is easier to learn than most other scripting languages. Still like any other coding languages, PHP takes a lot of concentration and practice to make use of its full functionality.

There are a lot of PHP tools that developers can use to make their workflow easier and faster. PHP documents also need proper error check which makes it difficult to do it manually. These tools help in providing error alerts and any potential error while writing the codes. The web is full of different tools for PHP. So to make it easier for you I have mentioned some of the most popular and useful PHP developer tools in this article.

1.TWIG

It is a fast, secure and flexible template engine for PHP developers. It is fully documented, with a dedicated online book and a full API documentation. It is fast compared to other regular PHP code as the overhead has been reduced to the very minimum. It has a open architecture which will help you to create your own DSL.

2. DebugBar

DebugBar has made debugging easier for PHP developers. You can easily integrate it in any projects without any other dependencies. It has a clean, fast and easy-to-use interface. Also, it is very well documented and includes generic data collectors.

3.Geocoder

Geocoder is a library that helps you to create geo-aware applications and supports a lot of third party services like Google Maps, Bing Maps, TomTom and OpenStreetMap. It provides the user with an abstraction layer for geocoding manipulations and a powerful API. It provides complete documentation.

4.PHP Image Workshop

Image Workshop is an open source tool using GD library that makes managing images in PHP easy. It is like a photo editing software where you can superimpose many layers or layer groups, with each layer having a background image. From simple to complex tasks, it is a highly flexible tool.

5. Sylius

Sylius is an open source PHP tool for e-commerce and is based on Symfony2. It has a component-based approach where you can build a custom platform on top of Sylius. It is highly customisable and you can customise its core model easily. It has a clean architecture and has an easily understandable code.

6.SlimStarter

Built on the top of a well established Slim Framework, SlimStarter is the perfect solution for bootstrapping small-to-middle web application and provide HMC environment in small footprint. It is powered by Eloquent ORM on database layer and TWIG template engine on presentation layer. It is also shipped with basic application features such as User and Group Manager.

7.SimpleTest

It is a unit test and web test framework for PHP applications. It has support for SSL, structures, casings, intermediaries and fundamental verification. 

 It is well documented and easy to use.

8.Scavenger

It is an open source real-time vulnerability management tool for PHP developers. It helps system administrators to track vulnerability findings and respond to it without “nagging” them with old vulnerabilities.

9.Hoa

It is a measured, extensible and organized arrangement of PHP libraries. You can form and stretch out libraries to make utilizations of your own libraries. It aims at bridging the gap between industrial and research worlds. Hoa is a an open source tool and is an retro-recursive acronym for Hoa, Open Accessibility.

10.phpDocumentor-

It empowers you to create documentation legitimately from your PHP source code. It does not aim to replace the conventional documentation but is more of a supplemental one. phpDocumentor has an incredibly flexible template system which enables you to alter the output in any way imaginable.

These are amazing tools to help you in your PHP development projects and if you are a fresh PHP developer, it will help you in getting your job done easily.

Author Bio:

Hasib is a professional writer working and writes articles related to jobs, education and guides for fresh graduates. This post has been written keeping in mind PHP enthusiasts and professionals applying to jobs in PHP as fresher or experienced .He is an avid reader and lives for two things – football and food. Follow him @ twitter, Google+, LinkedIn.

Backbone JS vs Angular JS- Uncovering key differences


Introduction

Our last article was about 8 Brilliant Tools That Empower Web Developers To Work With A Flair

Every since JavaScript development gained traction, the war of front-end JavaScript frameworks hasn't ceased to exist. As a JavaScript developer, I've tried hands on numerous JavaScript frameworks that have some of the finest features, helping in improving the overall productivity. Two of the best JavaScript frameworks that have proved utmost useful in building stunning web apps are BackboneJS and AngularJS. Today, in my post, I'd be taking up a simple and crisp comparison between these two JavaScript frameworks that have been embraced by JavaScript developers, both amateurs and experts.

BackboneJS vs AngularJS – Background

While BackboneJS is a 2010 product, AngularJS was released in the year 2009. Serving as a quick alternative to heavy frameworks, Backbone.js is a light weighted JavaScript framework that loads faster due to use of the Underscrore.js dependency framework. On the contrary, AngularJS is an open source framework that allows an easy extension of HTML in addition to two-way data binding via simple code testing. That means, with the two-way binding, you can use HTML for declaring the template, eliminating the need for writing any code.

BackboneJS vs AngularJS- Website Categories

While Backbone.js serves as an excellent choice for building eye-catchy websites for real estate, shopping, business & industry, arts & entertainment etc; AngularJS has been designed keeping in mind the need for building websites related to Career & Education, Internet & Telecom, Software, Computer & Electronics and many more.

BackboneJS vs AngularJS- Architecture

While the Backbone.js framework uses MVP(Model View Presenter) architecture, AngularJS uses the traditional MVC(Model View Controller) architecture. The main differences arising out of this variation in architecture include the following:

  • DOM -

    Unlike AngularJS which rebuilds the DOM in accordance to the specified rules, BackboneJS manipulates direct DOM for representing the changes made to the data.

  • Data Binding -

    Unlike AngularJS which comes with a two-way binding feature that allows it to run the applications, track and trigger data changes; BackboneJS lacks a data binding feature forcing the developer to create a custom binding mechanism or opt for a third-party data binding service.

BackboneJS vs AngularJS- Templating

Talking about templating, well it is in effective technique of reducing the amount of code that needs to be written for getting the single-page applications off the ground. While on one hand, we have BackboneJS which builds off the Underscore templates i.e. you're expected to write certain custom JavaScript for ensuring smooth functioning of the templates, on the other hand there is AngularJS which offers templating via dynamic HTML attributes that have already been incorporated into the document, ensuring the representation is concise and easy-to-grasp.

You may also like to read: AngularJS Is A Superior Javascript Framework

BackboneJS vs AngularJS- Validation

BackboneJS doesn't comprise of a function that can execute the validations part. That means, you're either supposed to write the logic by yourself or choose one from Backbone validations(9.5 unminified) or Backbone.validation(8.2HB minified) or Backbone.validator(8.2 non-minified) etc. In contrast to this, there is AngularJS which includes validation by default. That means, you can see some of the validations like min-length, max-length, email etc. implemented by default. Moreover, if you're interested in having a custom validation(s), then you can choose to create one.

BackboneJS vs AngularJS- Non-Restful Backend

While BackboneJS is purely meant for Restful backends, AngularJS comes with $http which allows you to go beyond the boundaries of a Restful backend. Well, when it's about Backbone.JS, for each end-point within the backend, there's a need for creating an associated model on the front-end. That means, if you aren't using a Restful backend, then there will be a need for performing a lot of tweaks that may lead to multiple overrides to Backbone.sync. On the contrary, AngularJS makes the concept of having a Restful backend easier. It comes with ngResource- an extra file that's required for adding 16KB min. Hence, you're free to either use this file or $http directly.

Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

BackboneJS vs AngularJS- Overall Performance

In simple words, BackboneJS is a lot more faster and better performing as compared to AngularJS. The basic reason for this is that as the page grows, AngularJS's two-way data binding feature tends to introduce negative performance effects into the framework. Unlike this, BackboneJS lacks a data binding feature, expecting you to write lengthy code. This allows you to focus on improving the performance, removing the need for hacking the framework from scratch. All in all, it is the compact data representation which makes AngularJS a low-performing JavaScript framework.

Final Thoughts

While each of the two JavaScript frameworks viz: BackboneJS and AgularJS have their own set of pros and cons, it is better to opt for the one which suits your project requirements fully. Remember, a framework that's been chosen after a lot of planning and analysis will fetch you the desired results instantly.

Author Bio:

My name is Andrey. I am a web developer in CMS Website Development Company. I am partial to discovering basic answers for complex issues. In the event that you cherished the theme, do share and remark. Additionally, you can tail me on Twitter for additional updates.

8 Brilliant Tools That Empower Web Developers To Work With A Flair


Introduction

Our last article was about "AngularJS Is A Superior Javascript Framework ­ Let's Explore Why". The Internet has inevitably become an integral part of the life for most of us. This has certainly raised the level of expectations from web developers while adding to their business. With a fierce competition in the market, web developers need to be on their toes and deliver superlative products to attain a sustainable success in the wobbly marketplace.

Today, almost every business embraces an online presence that is optimized for mobiles to ensure their reach to a wider audience base. This has substantially created a lot of work load for web professionals, as they need to expeditiously deliver outstanding results that can let businesses boast unique and impressive web presence.

Fortunately, with the advancement in web technology, there is a slew of excellent tools that can help web developers to stay productive in their work without compromising on the quality. This post will uncover some marvellous tools that every web developer must know, as these can help them boost their performance and have an edge over the competition.

Let's distil a few of the amazing tools for accomplishing web development task with a breeze.

Read: 5 Best Things You Should Know About PHP 7

1. Freepik

If you need any type of vector images, illustrations, or any other vector art piece, Freepik makes a fabulous choice. It offers a gigantic collection of amazing vector art that too for free. Since, everything is kept in a well organized and uncluttered way, you can easily find a desired option. However, the huge list of options available there might make it hard and time consuming to streamline your choice.

2. ExpressionEngine

The ExpressionEngine is a wonderful content management tool that beautifully separates the web content from the design. It, thus, facilitates one to showcase the content in a desired manner and on desired location. This tool is flexible enough to work efficiently with any kind of website from eCommerce to a personal blog; it is custom made to support any niche business. Moreover, it is absolutely simple to install and use, even individuals with no technical knowledge can also operate this extensible tool. The huge community support further adds to its credibility, so whenever you feel that you get stuck and don't know how to proceed, you can reach the community; there are several experienced professionals and individuals who can help resolve your web-related issues.

3. Play Framework

Play Framework is a prolific web framework that supports rapid web application development with Java and Scala. To work with this framework, only a text editor and browser is required. It includes resourceful testing tools, and also displays the outcomes corresponding to the amendments made by you by simply clicking on refresh button.

Built on Akka, this framework consumes minimal resources, and delivers highly scalable web applications. While supporting a plethora of useful Java libraries, and compiling and running apps on the JVM for quick performance, it ensures responsive web apps that can run seamlessly on any device.

4. Hotjar

Now, you can easily learn and understand how your website is perceived by your web as well as mobile users. All this is possible with this awesome web development tool. It comes complete with features like Heatmaps, and offers you the appropriate analytic result to help you proficiently improve the usability of your site. You can scour and analyse the elements that grab your viewers' interest, as it offers insights of your visitors' behaviour (including number of taps, click, scrolling and so forth) while interacting with the website.

5. HTML5 Maker

Today, adding captivating graphics in a website can enhance its look and feel, which has become quite essential nowadays to stay ahead of the competition. If you want to grab your viewers' attention, animations can definitely help you achieve your goal with ease. The HTML5 Maker is one of the most recommended online tool that facilitates one to efficiently generate animated multimedia content. Whether you like to have an impressive sliders or banners, this blissful tool can cater to your needs.

The best thing about this tool is that it doesn't even require design and development skills. It comprises several resourceful features, including Online Image Editor, Online Animation Editor, built-in templates that help generate innovative web solutions. The animations generated via this tool are compatible with Google Double-Click and Google AdWords. Moreover, these animations can be shared with others as templates.

6. Cygnite - A Modern Toolkit For Web Developers

Cygnite is a new toolkit designed to augment the development of full-featured web applications. This elegant and effective framework delivers ultimate performance and allows professionals to create exquisite and feature-rich web solutions with ease. It features clean and legible syntax, which makes it extremely convenient for one to proficiently develop the code. This PHP framework is power-packed with an array of useful features, including Code Generator, ActiveRecord, Container, Finders, RESTful routing, Schema Builder, and many more. The integrated Composer tool facilitates one to incorporate a desired third-party plugins into his web application. Cygnite 1.3.1 is the small footprint; however, its major update Cygnite Framework 2.0 version will be available soon with tons of awesome features.

Read: Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

7. Apache Couch DB

Apache Couch DB forms another highly useful web development tool. Yes! It is an open source database where you can stack all the requisite documents in the cloud with JSON documents. Once you have stored your data, it automatically indexes, combines and transforms your data by implementing JavaScript. With this tool, you can use HTTP to query your indexes with a web browser, and it offers real-time notifications for every change made on a website. This web database features an intuitive interface that facilitates the admin to make amendments with ease.

8. Google Fonts

I don't think Google Fonts needs any introduction, most of you might have been already using it. This list would have been incomplete without including this tool. It is basically Google's font library that offers a great list of web-compatible fonts. You can search any font that best suits the look and feel of your website.

Reflection

Today, it has become more than imperative to make your website stand out with an impressive appearance and valuable functions. This ultimately adds to the web developers' job. If you are a web professional and seeking cutting edge tools that can augment your performance and help deliver an invaluable web solution, go through the aforementioned list of tools. I hope this list will surely heighten your business success while making your life much easier.

Author Signature:

Victoria Brinsley is a skilled Android app developer for Appsted Ltd - a outsource Android app development company. You can explore more about the development tips and tricks by clearing your queries with her.

AngularJS Is A Superior Javascript Framework ­ Let's Explore Why


Introduction

Last article was about the Unerring Tips for High Performing WordPress Themes you may like to read out.

One of the probable reasons why JavaScript is extolled across the globe is the availability of prolific frameworks that support JavaScript development. However, it has been observed that most of the frameworks only wraps a slew of existing tools, and do nothing much in addition to it.

Fortunately, AngularJS is a brilliant framework that has an edge over its competitors. It embraces a set of resourceful tools that have been incorporated after ensuring their smooth and flawless performance. Although one needs to have proper insights into the framework and get the requisite expertise to reap its benefits, there are several outstanding advantages that make it a much sought after choice.

Read: Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

This post will unleash a few worthy benefits of AngularJS.

1. Has an ideal framework size that helps develop a variety of apps

The most common cause that add to the bounce rate of a product is its loading time. If your application consumes a lot of time to load, most of your users will certainly prefer abandoning your app. Thus, it is better to scour the impact of a framework on the loading time. This can be proficiently analyzed by taking the framework size and time taken by the framework for bootstrapping into account. AngularJS consumes ~50 KB, and allows professionals to develop beautiful, feature rich applications with a flair.

2. Helps generate an intuitive UI

You can create dynamic interfaces for your web apps, as AngularJS allows one to extend the definition of HTML. This certainly makes it easy to tweak the UI design in a suitable manner and create a desired look and feel. The framework offers a list of various UI elements and ensure that all of them work seamlessly when integrated in a design. This adds to the agile app development, and delivers fabulous apps with an impressive UI design that are sure to enhance the UX.

3. Delivers precise results while catering to your client's needs

Programming for AJAX and DOM is not a child's play, but it definitely an arduous task. However, while working with AngularJS, the code becomes much organized and uncluttered that helps you efficiently manage the development of CRUD apps. The framework offers a better conceptualization to deal with it in a precise way while creating applications.

4. Augments parallel development

AngularJS brilliantly manages dependencies, though the dependencies are not completely eradicated. The integrated massive grid facilitates one to streamline multitasking and testing while keeping the risk to crashing at bay.

5. Minimal coding is required

Loaded with a whopping number of useful functions, AngularJS offers valuable features without demanding lengthy codes. Here are a few of its incredible functions.

It completely handles the MVC pipeline.

You can support a required data model by writing only a few code chunks.

You can implement HTML to create a desired view.

By the virtue of filters, you can easily tweak the data in a desired fashion without affecting the controller.

You won't need to tinker the code in order to manage the directives, as they can be handled in another way.

All these blissful features of the framework make it absolutely convenient for one to generate a high end application with just a simple and precise code.

Read: Building a Simple Form Using Angular JS and Cygnite PHP Framework

6. Makes single page app development easier

Although developing a single page application (SPA) is a daunting task, it has incessantly garnered a great popularity. By implementing the AngularJS framework for the same, you can proficiently create a high quality single page application, while ensuring a responsive design. This further facilitates an app with smooth and consistent performance that amazingly adds to a better UX.

Moreover, as these kind of apps are rendered on the client side, it dramatically reduces the network traffic and further improves the loading time. The framework is jam­packed with resourceful templates, routing, and more features that facilitate one to develop highly functional apps.

7. Aids application testing

The significance of testing cannot be overseen. One must test his application before launching it in the market. This helps one to ensure its flawless performance and deliver an impressive app that can compete with the fierce competition out there. AngularJS framework has been developed while keeping the testing into account. Understanding the proliferation of mobiles and the fact that app testing requires a lot of precision, the framework is powered with powerful services to deliver an astonishing product.

Conclusion

AngularJS is an invaluable JavaScript framework that is consistently going through reinventions. This is certainly further enhancing the framework and making it a better companion for developing stunning, intuitive and highly engaging applications. The above are just a few of its utile features, you will get a lot more under its hood.

Author Biography:

I am Savy Nacion, working as a technology specialist in Markupcloud, HTML to Wordpress Service company, based in Rochester, New York. With more than 10 years of involvement with the innovation area, I target carrying new and creative innovation answers for the organization to assist it with continuing flourishing in the business.

Unerring Tips for High Performing WordPress Themes


Introduction:

In the last article we discussed about "Advantages and Disadvantages of Ecommerce Business".

“Doing The Same Thing Over And Over Again And Expecting Different Results”

This is what we call insanity. If you think that you are doing everything right but the desired result is still awaited, then you need to go back, test and then optimize your policies. We all have been ranting and raving about responsive themes, but we never dared to look beyond it. In this blog, we will discuss how to get high performance from your WordPress themes.

Gauging the performance of your Responsive theme

Choosing the size of a responsive web theme matters because it affects the end users as well as the web servers. Due to heavy weightage, server needs more time to get extra file and with each such file, extra milliseconds are added in the loading time. On the other hand the user have to wait till the total number of kilobytes are loaded. Apart from using Media Queries various WordPress themes now use several other techniques to respond to the browser's.

Being choosy pays off!

Designing a responsive website is more than just defining different number of columns in a website. This question was for all the websites designed for mobile users, without concerning the fact that these were CMS. Before choosing a theme you need to first go through the following set of questions:

Does your project needs a mobile development?

With the proliferation in the mobile devices it is highly unlikely for business owners with up to date market knowledge and trends to say no to mobile first technology. However, one cannot go on for adopting all kind of technological development. Though, earlier we had a choice for adopting mobile designs, but now with the advent of Google's algorithm it becomes crucial.

Read: Creating ​Mobile ​Responsive ​Design

How many steps do we need?

Performance of a responsive website depends highly on the screen it is viewed on. Responsive design does not mean that the screen should adjust on the mobile devices such as tablet, phablet or smartphones, wherein responsive means that your website must be fit to wide screen sizes. The best option is follow device-agnostic approach which focuses on web design instead of device functionalities.

Do you understand the layout and formatting of the responsive pages?

In order to craft a successful layout you need to display the elements one by one. Now, when it comes to wide screens we must make sure that the headings must be larger than the content, whereas when it comes to smaller screen the ratio drastically changes.

How to tailor your application for mobile devices?

Displaying content via multiple columns needs a particular hierarchical flow, as each page comprises of its own unique content and secondary content is the one which is displayed on more than one page. This content approach is difficult to follow while designing for mobile screen. You need to ensure that you need to remove the irrelevant content from the mobile screens. On contrary if you think that you need all those pages then draw out a proper methodology such as long scrolling to display you content. Further, as per thumb rule the elements which do not supports the title of the page is not the primary content.

Measure your Websites performance

Now after all the detailed analysis and study you have finally chosen a WordPress theme and have decided on the content placement and stuff, do not think that you have accomplished your goal. The next step is to know whether you did it right and is your website well accepted by users. There are numerous tools present in the market to gauge the performance of a website. However, you can count on Google Page Speed and for second choice keep Gtmetrix for analyzing the current performance of your website.

Read: 5 Best Things You Should Know About PHP 7

With 7 Google Page rank and Alexa rank 11, Gtmetix serves as an incredible tool for analyzing your website. Along with page speed results this tool uses YSlow ( a tool from Yahoo for measuring performance). Do not worry as you do not have to do much and all you need to do is to enter the url of your website to get a comprehensive performance report. Further, it allows comparative analysis for a healthy competition.

Poor performance!

Plugins can ameliorate the performance

One can certainly meter the performance of their website, however this leads to the crux: how to improve?

With a wholesome development of community existing for more than a decade have found solution of this unnerving questions. We have plugins namely auto optimize, WP Super Cache and several other which can work as a performance booster for your WordPress website. These plugins are easy to install and ready to use which have the potential to ameliorate the performance of a poor performing websites.

Present the cached version

Caching works as a performance booster!

As we know that every time a user enters a website, content is fetched from the server and then displayed on the browser. In case of static resources the data will fetched every single time a user visits the website. This is certainly not an optimal technique, as the server has to do a single task over and over again.

In order to optimize this functionality we have well engineered plugins such as WP Super Cache, which ensures that the users get to access the cached website which removes the unnecessary loading of content again and again.

I hope this might help you!

Conclusion:

The long and short of the complete article is that we need to pull up our socks in order to do reach another level of web development. There are a lot of optimization techniques for WordPress which one can harness to provide top notch solutions.

Author Biography:

I am Savy Nacion, working as a technology specialist in Markupcloud, PSD to Wordpress conversion company, based in Rochester, New York. He has over 10 years of experience in the technology industry.

Advantages and Disadvantages of Ecommerce Business


Introduction:

e-Commerce business is increasing day to day. It has created opportunity for everyone to start online business with little investment. Many people are not aware that starting eCommerce business require steps and decision to work together at right time. Like offline business, online business also have some advantages as well as disadvantages. Review the pros and cons of e-Commerce business.

You may also like to read "How to Guide to Create ​Mobile ​Responsive ​Design".

Advantage of eCommerce Business

1. Limitations –

Unlike e-Business, offline business have certain limitations to reach the customers. In e-Business owner can target the whole country at the same time and takes the lead on offline business because whole world is its playground.

2. New Customers –

There are limited customers for offline business. It cannot cross the limit. But on the other side Online business targeted area is too big. It receives new customers from Search Engine and other different methods.

3. Time Saving –

e-Commerce business is time saving for customers, they don't have to travel to purchase a products.

4. Physical Store –

Online business doesn't require a physical store and hence saves the cost of establishing a physical store. For users, it becomes easy to visit online website to purchase product instead of visiting physical store.

5. Low Startup Cost –

Offline business requires good amount to setup a business. But eCommerce business can be started with a little investment. If a person does not have any website, he can sell his products on various eCommerce portals available online as there are so many Ecommerce store development companies like shopify offering affordable and ready to use eCommerce portal.

Disadvantage of e-Commerce Business

1. Personal Touch -

Offline business builds the relationship with its customers personally. But on the other side e-Commerce business missed this important part. In offline business user visits again to the store because of personal touch, but not the same with online business.

2. Internet Connection –

Internet is the life of eCommerce business. Once the internet is down it will miss all the sales. It is like no internet no revenue online. But offline business never faces this types of issue.

3. Technical Issues –

Shopping carts and payment processing are very important parts of any eCommerce Business. But sometimes, a little technical bug can create issues in website and website stop working. Hence, it won't do any conversion until that issue get fixed.

4. Return Policy –

In online business business owner have to take the responsibility of products even after its delivery. If user is not satisfy with product he received, he will return it to the owner and owner have to refund the amount.

VERDICT :

Well with this article we may conclude that every business has advantage and disadvantage. Although we cannot avoid disadvantages but certainly, we can take measure to manage risks and get abundant advantages from eCommerce business. Advantages are undoubtedly teasing, and we will appreciate such simple exchange nowadays. It is suggested that always try to manage risks before it hinders your online business. Appreciate more your web searching and appreciate more your e-business exercises!

Author Biography:

James Anderson is an professional content writer. Email: ja9663019@gmail.com

How to Guide to Create ​Mobile ​Responsive ​Design


Introduction:

Hey Guys! Last article was about "How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)".

Unlike a conventional desktop oriented website, the one which has been created for the mobile screens is a lot more in demand. It is a responsive website which automatically adjusts itself to fit the screen of device that the site is being viewed on. All the content, whether it is the text, images or video get moderated to ensure best display on the screen under focus. Whether you're a publisher, a designer or a developer, taking care of your site's mobile responsive design is something that can render flawless experience to the targeted users. In this post, I'll be walking you through the vital steps that must be followed for building a fine quality mobile responsive design.

What kind of mobile responsive design are we going to create in this tutorial?

Here, I'll be creating a simple e-commerce product detail page for a t-shirt firm. So, while ensuring that the customers are able to make the purchases conveniently, we'll also be making the product review easy-to-access, followed by utilizing customer's location for enhancing the overall mobile shopping experience.

A look at the basic structure

It is essential to author a semantic HTML5 markup that will allow you to ensure completely manageable and fully accessible adaptive experiences. The reason for this being that semantic markup is fully portable and can be easily accessed on a variety of mobile devices, desktop browsers, tablets etc.

Coming to the individual steps for creating mobile responsive design

Step 1- Set the Viewport

While for a majority of non-mobile-optimized websites, most of the contemporary browsers set up a larger browser viewport, in case of designing a website using mobile responsive design, we'll be using viewport meta tag for setting the screen width to the device width as shown below:


<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2- Adding the flexibility to load the website content conditionally

Here, we'll be creating two new HTML documents for the auxiliary content viz: reviews.html and related.html. Unlike the default way in which the content is accessible via links available on the page, we can use a little bit of javascript for loading the content as and when user requests for the same or when the screen's resolution reaches a specific breakpoint.

Step 3- Use HTML special characters

As an attempt to decrease the need for background images, it is recommended to use HTML special characters. In this tutorial, I've used $#9733 for creating a solid star (★) and ☆ for creating empty stars (☆) for the product ratings.

Step 4- Include a clickable link within footer

Here, we'll use the tel URI scheme for including a clickable link to customer service number, within the footer. Here's a look at the tel URI scheme:


<a href="tel:1234567891">123 456 7891</a>

Step 5- Add style enhancements

With a strong semantic markup in place, it's time to add some style enhancements as explained below:

Create separate style sheet for screens with larger displays

Here, we'll be creating two CSS files viz: style.css and enhanced.css for delivering basic styles for screens with dimension less than 967px. We'll be using media queries for serving the new styles for screens with dimension greater than 967px as shown below:


<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style-967.css" type="text/css" media="screen  and (min-width: 967px)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->

Adding Mobile-first styles

Next, we can start off with adding shared styles and advanced layout rules as shown below:



/* Avoid this style */
.customer-list img {
  width: 30%;
  float: left;
}
@media screen and (max-width: 967px) {
  .customer-list img{
    width: auto;
    float: none;
  }
}


The mobile-first approach will now look like this:



@media screen and (min-width: 967px) {
.customer-list img {
    width: 30%;
    float: left;
  }
}


Next, we'll be applying media queries as shown in the below code snippet:


/*Display 2 per row for medium displays*/
@media screen and (min-width: 480px) {
  . customer-list li {
    width: 50%;
    float: left;
  }
}
/*Display 3 to a row for large displays*/
@media screen and min-width: 768px) {
  . customer-list li {
    width: 33.33%;
    float: left;
  }
}



Step 6- Use CSS for reducing HTTP requests

Have a look at the below CSS which will play a vital role in saving HTTP requests so as to improve the overall performance of your website. For instance, CSS gradients can replace background images for decreasing the count of image requests and rendering a greater control over the original design.



/*Using CSS gradients rather than background images*/
header {
  background: #333; 
  background: +linear-gradient (top, # 333 0%, #555 100%);
}


Step 7- Add Javascript enhancements

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:


<ul  id="top-menu" class="top-menu">
  <li><a href="#">Menu</a></li>
  <li><a href="#">Search</a></li>
</ul>
<nav id="main-menu" class=" main-menu">
  <ul role="main-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>


Additionally, we will include a resize listener which will find whether there's any possibility of displaying the search bar and navigation. Have a look at this:



var swidth, sheight ;
$(window).resize(function(){
  swidth = document.documentElement.clientWidth;
  sheight = document.documentElement.clientHeight;
  setElements();
});
  
//Set elements according to differ screen size
function setElements() {
  device = (swidth < breakpoint) ? true : false;
  if (!device) { 
    $('#top-menu').show(); 
  } else {
      $('#top-menu').hide();
  }
}


Adding functionality to the Image Gallery

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:

Have a look at the below code snippet which will allow us to build an image carousel using the available thumbnail images:



function intslide() {
  container.html('<div id="img-slider"><ul /></div>');
  imgSlider = $('#img-slider');
  $('nav a:first-child').addClass('active');
  
  $('nav a').each(function() {
    var href = $(this).attr('href');
    imglist += '<li data-src="'+href+'"></li>';
  });
  
  imgSlider.find('ul').append(imglist);
      
  $('nav a').on('click', function(e) {
    var slidepos = $(this).parent().index();
    e.preventDefault();
    loadImg(slidepos);
    if(swipeEnabled) {
      mySwipe.slide(index, 500);
    }
    updateNav(slidepos);
  });
}



Adding functionality for Related Content

A code snippet will allow us to pull in related content in case any one of the below two conditions are met:

 When a mobile user clicks on related t-shirts or the product reviews links

 When screen has enough space for loading the auxiliary content

The code snippet that I'm referring to is shown below:



function setElements() {
    device = (swidth < breakpoint) ? true : false;
  
  if (!device) {
    loadContent(); 
  }
}

//Set up content
function loadContent() {
  var $content = $('.content');
  $content.each(function(index) {
    var $this = $(this);
    var contentLink = $this.find('a');
    var contentFragment = contentLink.attr('href');
    var realContent = $this.find('.demo');
    if (realContent .size()===0 && $this.hasClass('loaded')===false) {
      getContent(contentFragment,$this);
    }
  });
}

function getContent(src,container) {
  container.addClass('showcontent');
  $('<div class=”demo” />').load(src +' #content > div',function() {
    $(this).appendTo(container);
  });
}


As an approach to keep the web pages lightweight, I recommend using Closure Compiler for chopping off all the unused bits of the jQuery library. Other impressive alternatives include popular micro-frameworks like Zepto.js etc. Finally, don't forget to pay special attention to ensuring seamless off line access to your website. This will serve as a brilliant surprise to mobile users who aren't connected to the Internet at times.

We're done!

Conclusion:

With that it's a wrap on this post which made you familiar with the basic steps of creating a mobile responsive design. Hope by having a responsive design, it will become convenient for you to adapt to all the future mobile devices and browsers quite conveniently and instantly.

Author Biography:

Samuel Dawson is a comprehensive expert in Designs2HTML Ltd involved in the process of to convert HTML to Wordpress in a top manner.

How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)


Introduction:

Hey Guys!

In my last article shown you How to install LAMP stack with easy steps. Today I would like to write about “How to install Ubuntu 15.04 along with Windows 8”. Recently I was trying to make my system dual boot (Ubuntu 15.04 alongside Windows 8), I have faced couple of issue before I am successful. It is not anymore that easy to install Ubuntu 14.10/ 15.04 alongside Windows 8, earlier we were able to install directly using WUBI installer. I thought I can post steps here, so that it will also help others. If you have Windows 8 pre-installed, you may find difficult to install Ubuntu or any other OS alongside. Microsoft has introduced several new features which made a mess for Linux based operating system. Windows 8 introduced UEFI and secure booting which is preventing any other operating system to install. UEFI is basically similar as BIOS booting.

You should know that until UEFI mode and secure booting is enabled you cannot directly boot/use Ubuntu. Installing Ubuntu inside Windows using WUBI is not supported in Windows 8.

Here I am posting some steps as I followed towards successful Ubuntu installation alongside Windows 8.

You might also be interested on reading “Installing LAMP stack on Ubuntu 15.04”

Step 1: Download Ubuntu ISO File

Download Ubuntu from the website. Make sure you are downloading 64 bit, 32 bit may not work. In my case I have downloaded 64 bit version.

Step 2: Use Universal Installer to Install Ubuntu

Make sure you have space least 10 GB in separate drive. In my case I have created a drive with 100GB for Ubuntu installation. Burn the Ubuntu into Live CD, DVD or USB in windows. I have used USB drive to boot Ubuntu. Download USB installer and install it. Browse downloaded Ubuntu ISO as below screenshot below.

Choose USB drive and click create to install Ubuntu into your USB drive.

Step 3: Disable Fast Startup (Windows 8 or 8+)

This technique introduced in Windows 8 to reduce booting time. When we shut down our Windows 8 system, it use hibernate concept to write some system data from RAM to disk. Doing this when next time windows boot it restore the data faster. By this way Windows 8 manage to boot in 10 seconds on SSD. This is creating a problem for Ubuntu or any other operating system installation process.

So it’s important to disable Fast Startup in Windows 8 / 8.1 before installing Ubuntu.

Go to Power option and click on the “Choose What Power buttons do” link from left menu. You will be landed on screenshot below.


Click on the highlighted link “Change settings that are currently unavailable” to change settings and uncheck “Turn on fast startup” screenshot below.



That’s it well good to go for installation process.

Step4: Disable Secure Boot

Next important thing is to disable secure boot. You can go to boot manager from BIOS (By Pressing ESC/Delete or F1-F12 keys) setup when system starts, In my case I pressed ESC to go to “BIOS settings” from there “boot manager” in that section you also will find “Secure Boot” make sure it is disabled. Windows 8 has UEFI design which is replacement of BIOS.

Save changes and we are ready to install Ubuntu now.

Step 5: How to Install Ubuntu 15.04

Install Using USB drive

Plug in USB drive into your system and restart. When you restart system you will find screen to “Try Ubuntu” and “Install Ubuntu”. Click on “Try Ubuntu” as this helps to check your hardware compatibility. You will login into Ubuntu and see screen below.


Click “Install Ubuntu 15.04” highlighted above. This is lead you to installation process.

Select Installation Type:

On the “Installation type” screen you need to select “Something else” as we are going to make “Duel Boot” with Windows, screenshot below.


Select appropriate drive to install. Before pressing next button remember to format drive using “change” button and it should be “Ext4” file system. Mounting point should be “/” as it will install Ubuntu into that primary drive. Screenshot below.


That’s all we are done with main job, now you need to do regional, language, account settings etc. for successful installation. Wait till process completes and it will ask to restart, do restart.

First Time Ubuntu Booting:

Remove USB and after system restart, you will see screen below where you need to select Ubuntu to boot.


Boot Repair

Some time you may not see the above screen and Ubuntu may legitimately boot.  I was facing the same issue. If you don't see screen prompting you to pick which Operating system to use “Windows 8” or “Ubuntu” you need to execute below command from Ubuntu Terminal to enable GRUB window on startup.



 sudo apt-get update
 sudo apt-get upgrade
 sudo add-apt-repository ppa:yannubuntu/boot-repair
 sudo apt-get update
 sudo apt-get install -y boot-repair && boot-repair
 

Above command will repair boot screen issue. Restart the system. You will have the option to see screen where you can pick "Windows" or "Ubuntu" for sure.

Step 6:

That's all we are done. Enjoy the Linux flavor alongside Windows.

Conclusion:

Setting up Ubuntu 15.04 alongside Windows 8 for open source development is little challenging but following above steps you can easily achieve it. I faced couple of issue before successfully installation. Don’t wonder if Ubuntu installed drive is missing in Windows 8 “This PC”, it won’t display since the drive is “ext4” formatted for Ubuntu installation.

I hope this tutorial will help you. If useful please share, leave comments below. I will continue writing and try to bring some tutorial of real time challenges.

Stay Tuned! Have a nice day.

Follow Us On Facebook Open Source Web Developers by Appsntech facebook group Twitter Open Source Web Developers by Appsntech twitter group Google+ Open Source Web Developers by Appsntech Google group Linkedin Open Source Web Developers by Appsntech, LinkedIn group
Copyright @2011-2015 appsntech.com. All rights reserved.