Browse Tag

tutorial

RedminPortal Developer Guide: How to use Coupon?

In this tutorial, I’ll show you how to apply coupon to your products and calculate the discounted price.

Note: This tutorial refers to the latest develop branch which features may not be in the master branch yet. These features will eventually be ported to develop-v0.2 branch, which supports PHP 5.4.

Overview of RedminPortal

redminportal_logo_v2_sm

RedminPortal is a content management system for developers. It only offers backend system for end users and leave the front end solely to the developer. Hence, in many cases, it is up to the developers to design their business logic for their front end.

Let’s Begin

In this tutorial, I’ll be showing you one way of using the coupon. However, it is up to your imagination and creativity to come up with many other ways. Treat this as a guiding ground but keeping in mind that this is not the only way.

Product creation

From the portal, create as many products as you see fit.Redminportal products created

Coupon Creation

Next, create coupons that are “restricted to” these products. You can either restrict the coupons to Categories, Products, Module/Membership or Bundles.Redminportal coupons created

How to create a new order?

Let’s assume we want to have a Cart class that creates a new order and add products into it. Here’s the code:

use Auth;
use Redooor\Redminportal\App\Models\Order;

class Cart
{
  public $order;

  function __construct()
  {
    $user = Auth::user();

    $this->order = new Order;
    $this->order->user_id = $user->id;
    $this->order->paid = 0;
    $this->order->transaction_id = date('Ymd') . '_order_' . $user->id;
    $this->order->payment_status = 'Pending';
    $this->order->options = ''; //Optional
    $this->order->save();
  }
}

Now, to create a new cart in your code, simply do:

$cart = new Cart;

How to add products to an order?

Most (if not all) of the models in Redminportal use Eloquent relationships. To add any product into an order, you just need to save the Product object into Order object. I’ll create a new function in Cart class for adding product.

class Cart
{
  public $order;
  
  function __construct()
  {
    /* omitted */
  }

  public function addProduct($product_id)
  {
    $product = Product::find($product_id);
    
    if ($product) {
      $this->order->products()->save($product);
    }
    
    return $product; // return null if no product found
  }
}

Notice in line 15 we’re using relationship insertion to add product into order.

How to get the total price of an order?

There’s a method in Order class for you to get the total sum of all the product prices. It’s located at <redminportal>/src/App/Models/Order.php.

In our example, if you want to get the total sum of all the prices in a cart, do this:

$totalprice = $cart->order->getTotalprice();

NOTE: This total price does not include discounted value from coupon. It is purely the summation of the prices of all products/pricelists/bundles.

How to apply a coupon to an order?

Using the same relationship insertion, you can add any coupon into an order like this:

$coupon = Coupon::find($coupon_id);

if ($coupon) {
  $cart->order->coupons()->save($coupon);
}

 

This insertion doesn’t check if the coupon is applicable to any product within the order. It merely adds the coupon to the order.

To add a coupon and making sure that it checks the “multiple_coupons” flag, you can use this method addCoupon():

$coupon = Coupon::find($coupon_id);

if ($coupon) {
  $cart->order->addCoupon($coupon);
}

All other checks are up to you, the developers.

How to get the total discounts in an order?

You can use the method getDiscounts() to get a list of all the products with applicable coupons. And then calculate the discount from there.

Note: the value of each discount is stored in the record key “value”.

I will add this function to the Cart class.

public function getTotaldiscount()
{
  $all_discounts = $this->order->getDiscounts();

  $totalDiscount = 0;

  foreach ($all_discounts as $discount) {
    $totalDiscount += $discount['value'];
  }

  return $totalDiscount;
}

// Alternative, shorter code with Laravel's collection
public function getTotaldiscount()
{
  return collect($order->getDiscounts())->sum('value');
}

You can then calculate the total payable amount like this:

$totalpayable = $cart->order->getTotalprice() - $cart->getTotaldiscount();
Update 14 Dec 2015:

Using the latest develop branch, you can now retrieve the total discount from an order like this:

$cart->order->getTotaldiscount();
Caution:

Take note that getDiscounts() saves all the discount information in the $order->options[‘discounts’] array. This is to reduce recalculation whenever you call this method.

However, when you add or remove any coupon or product from the order, you need to call setDiscounts() method to recalculate the new value. Like this:

/* after adding some products */
/* and then add/remove some coupons */

$cart->order->setDiscounts();

$new_totalpayable = $cart->order->getTotalprice() - $cart->getTotaldiscount();

 

That’s it. Do leave a comment if there’s any mistake and I’ll update the post.

Setting up Laravel 5 on shared hosting server

UPDATE (7 Jan 2016): Added a final step for pointing domain to subfolder.

UPDATE (4 Apr 2016): I’ve received a number of enquiries with this setup. Please test it on your local environment first. Use homestead to create a domain with the same folder structure. If it’s working on homestead, it’ll most likely work on your shared server.

UPDATE (15 Jun 2016): Added some common problems found from the lovely comments. Scroll to the bottom to see

In this tutorial, I’ll show you some guide to deploy your Laravel 5 application onto a shared hosting server.

By default, the Laravel folder structure assumed that the public folder is within the application itself. This is the high level folder structure:

your_app_name
|--app
|--bootstrap
|--config
|--database
|--public
  |--assets
  |--index.php  <--we need to point here
|--resources
|--storage
|--tests
|--vendor

In an ideal scenario, you can simply point the web domain to the public folder so that the URL loads public\index.php.

However, in a shared hosting server, you are limited to putting your web serving files in a folder probably named public_html or www which is publicly accessible via web domain. You may be tempted to do this (NOT recommended):

shared_hosting_root_NOT_recommended
|--other_folders (not accessible via web domain)
|--public_html
  |--your_app_name
    |--app
    |--bootstrap
    |--config
    |--database
    |--public
      |--assets
      |--index.php  <--we need to point here
    |--resources
    |--storage
    |--tests
    |--vendor

You can then point your web domain to the public folder.

The problem with this is that your application is now publicly accessible and that may expose vulnerability. You cannot be sure if someone somewhere is able to access your config folder and look at all your sensitive information such as database credentials.

Instead, put your application root into a folder outside of public_html, and place only the public folder within public_html.

This is the recommended folder structure:

shared_hosting_root_recommended
|--other_folders (not accessible via web domain)
|--applications  (not accessible via web domain)
  |--your_app_name
    |--app
      |--GoPublic.php <--we'll create this
    |--bootstrap
    |--config
    |--database
    |--public <--copy content to public_html
      |--assets
      |--index.php
    |--resources
    |--storage
    |--tests
    |--vendor
    |--deploy.sh <--we'll create this
|--public_html
  |--your_app_name
    |--assets
    |--index.php <-- we need to point here

In Laravel 4, you can easily tell your application that the public folder is now in another location by simply changing the file bootstrap/path.php. See point 9 of my Laravel 4 tutorial.

However, in Laravel 5, this file no longer exists. I’ll show you how.

1. Create a class to point to new location

Create a new file shared_hosting_root\applications\your_app_root\app\GoPublic.php

<?php namespace App;

class GoPublic extends \Illuminate\Foundation\Application
{
 /**
 * Get the path to the public / web directory.
 *
 * @return string
 */
 public function publicPath()
 {
 return $this->basePath.DIRECTORY_SEPARATOR.'../../public_html/your_app_name';
 }
}

We’re using relative path here so you don’t have to know the absolute path. But it is extremely crucial to follow the same recommended folder structure I’ve mentioned earlier.

Updated:

You may need to run the following command in your root folder to autoload the new class. Otherwise you will get an error saying the class cannot be found.

composer dump-autoload

2. Edit bootstrap\app.php

Now we need to tell our application the location of the new public folder. Open and edit your_app_name\bootstrap\app.php:

<?php

/* -- remove/comment this original code
$app = new Illuminate\Foundation\Application(
 realpath(__DIR__.'/../')
);
-- until here */

/* -- add this new code -- */
$app = new App\GoPublic(
 realpath(__DIR__.'/../')
);

As you can see above, we’re using the new class that we’ve created in step 1.

3. Edit public\index.php

You need to edit these 2 lines.

From line 21:

require __DIR__.'/../bootstrap/autoload.php';

to

require __DIR__.'/../../applications/your_app_name/bootstrap/autoload.php';

And from line 35:

$app = require_once __DIR__.'/../bootstrap/app.php';

to

$app = require_once __DIR__.'/../../applications/your_app_name/bootstrap/app.php';

4. Copy public to public_html

Now, copy the content inside applications\your_app_name\public into public_html\your_app_name.

To simplify the process, I would create a bash file to automatically copy the files to the new location.

Create a new file shared_hosting_root\applications\your_app_name\deploy.sh

#!/bin/bash
echo "Copy public folder to public_html/your_app_name"
rsync -rv ./public/ ../../public_html/your_app_name

Using rsync ensures that if you ever run this deploy.sh several times, only those that are newer will be copied to the new location.

When you’re ready to run it, in the terminal run:

?> cd applications\your_app_name
?> sh deploy.sh

Caution: You have to run deploy.sh within applications\your_app_name, otherwise it will fail.

5. Accessing your app

There are 2 ways of accessing your application from the hosting server. You need to follow either one of the following step depending on your setup.

5a) Using subdomain

The easier way of accessing your application is to set up a subdomain (e.g. your_app_name.example.com) and point it to your application folder (i.e. public_html/your_app_name). This should automagically work without much hassle.

5b) Using primary domain

The other (slightly more complex) way is to point your primary domain (e.g. example.com) to your application folder (i.e. public_html/your_app_name).

By default, the primary domain points to the folder public_html in most of the shared hosting environment.

To do that, you need to create (or edit if it’s already there) a .htaccess file inside the public_html folder.

# Do not change this line. 
RewriteEngine on 

# Change example.com to your domain name
RewriteCond %{HTTP_HOST} ^(www.)?example.com$ 

# Change your_app_name to the subfolder name
RewriteCond %{REQUEST_URI} !^/your_app_name/ 

# Don't change the following two lines. 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 

# Change your_app_name to the subfolder name
# Change example.com to your domain name
RewriteRule ^(.*)$ /your_app_name/$1 
RewriteCond %{HTTP_HOST} ^(www.)?example.com$ 
RewriteRule ^(/)?$ your_app_name/index.php [L]

6. Em…

And that’s it.

I would also recommend using the same folder structure during your development so that you can experience the whole process of deployment before you upload to your hosting server.

Hope this helps!

7. Common Problems

There were a few cases of the following that may cause your Laravel 5 to not work on your live server:

  1. Your PHP version is lower than 5.5.9. Laravel 5 requires PHP 5.5.9 and above.
  2. Your folder structure is different. Make sure your local test environment is exactly the same as your live server. Starting from your server’s root folder.
  3. Re-read the whole tutorial. I find that some of my codes were truncated, so make sure you copy and paste correctly. Try scrolling left and right to see the full code line. Sorry about that.

Getting Laravel to return a View as RSS or XML

I was having problem getting Chrome to recognize a page as RSS or XML feed. Although Firefox has no problem recognizing it, I’m quite sure I’m missing something here.

After some searches, it became clear that the page was returned as a text document. So Chrome simply display the page as HTML. Firefox is smart enough to check the content first before deciding what type of document it is.

In normal PHP circumstances, we would insert header(‘Content-Type’,’text/xml’) before displaying the view. But with Laravel’s blade, that doesn’t work.

The solution was written in Laravel’s documentation, though not obvious.

To return a page as XML, use

return Response::make($content, '200')->header('Content-Type', 'text/xml');

But how to return a view with the header?

Just set the $content to your view. Full code like this:

$content = View::make('home')->with('somevar', $somevar);

return Response::make($content, '200')->header('Content-Type', 'text/xml');

Updated (8 Dec 2015):

I’m still getting an error on some server saying that:

syntax error, unexpected 'version' (T_STRING)

Blade will throw an error on line #1 because of the XML opening tag, so use PHP print instead.

<?php print '<?xml version="1.0" encoding="UTF-8" ?>'; ?>

jQuery using $.on to call newly added elements

More than a year ago, I had written a blog about how to bind events to newly added elements using jQuery.

The scenario can be found here: http://blog.kongnir.com/2012/02/08/jquery-function-not-binding-to-newly-added-dom-elements/

In my previous solution, I had used $.live() in place of $.change(). However, as noted by a commenter in that blog, as of time of writing, $.live() is deprecated.

Instead, we should now use $.on() if you need to capture events of newly added elements.

For example, in normal circumstance, we would do this:

$(".existing-button").click(function() {
    alert("This will work if button already exist on load");
});

However, if you add new elements to the document using AJAX, then the above will not work. That button doesn’t exist.

In both circumstances, this will work:

$(document).on("click",".new-button", function() {
    alert("This will work even if element is newly added");
});

If you notice, the syntax is quite different. The element to call on is the containing element, not the element that the event is called. So let’s say “.new-button” is contained within “#main”, then the following should work too.

$("#main").on("click",".new-button", function() {
    alert("This will work even if element is newly added"); 
});

Reference: http://api.jquery.com/on/

Tricky WebDev: Fix missing list’s text in Mobile browsers

I had this very strange bug that didn’t show up in Desktop browsers (Chrome and Firefox) but in Mobile browsers, specifically iOS Safari and Chrome.

On Desktop:
tags_on_desktop

On Mobile:
tags_on_mobile

Since I couldn’t find a way to debug on the Mobile browsers, I had spent quite a while trying to figure out what went wrong. It’s also very strange to actually see the texts that have more than 1 word to appear, but yet it only shows the first word.

So I checked the HTML code from Chrome and saw this:

<li>
    "                             Face                             "
</li>

That’s because in my PHP code, I had actually echoed the text on a new line like this:

<li>
    <?php echo $tag; ?>
</li>

Out of curiosity and pure trial-and-error, I had decided to try this:

<li><?php echo $tag; ?></li>

To produce this:

<li>Face</li>

Guess what?
That solved the bloody issue I had been investigating for many hours.
I think I really need to re-learn the basics of HTML.

References to good BYO PHP MVC Framework tutorials

When I first came across the term MVC (Model-View-Controller) few years back, the whole concept sounded so complex, especially for people with (old) ASP and PHP background. In those days, we were so used to mixing business logics inside the presentation layer. It was so logical and convenient, until the code got big and things got out of hand. We forgot where the codes were, and we risked stability even for small changes to the UI, because they were all intertwined with business logics.

Typical PHP-HTML mixed code:

<?php
  include "someFileContainsFunction.php";
  public function someLocalFunction( $param )
  {
    return "Business logic in <b>$param</b>!";
  }
?>
<html> 
  <title>HTML with PHP</title>
  <body>
    <h1>My Example</h1>
    <?php
      print someLocalFunction( "Inside body" );
    ?>
    <b>Here is some more HTML</b>
    <?php
      print functionFromExternalPHP();
    ?>
  </body>
 </html>

Then I was introduced to MVC during a Microsoft .NET bootcamp in Singapore. I was quite fascinated with the idea. Separating the 3 components enable us to distribute the work to programmers and designers, allowable them to do their work without touching the fields they’re not familiar with. It is also an ideal solution to multinational collaboration.

Although the .NET MVC framework was great as a development tool, I couldn’t understand the fundamentals of building an MVC. We merely followed the coding style requirements by the framework, and work our way through to make the application work.

So I went in search of other languages, and found many other frameworks such as Ruby on Rails (for Ruby) and CakePHP (for PHP). They are also great MVC frameworks, but then again, they’re very established with quite stringent coding style requirements that I always got lost halfway down the development.

http://www.netmagazine.com/features/choose-right-php-framework

I thought the best way to learn about something is to start from the beginning, and keep on testing and failing until I understand it. The following 2 tutorials are great starting points. I managed to write my own MVC framework within a day (or maybe a few hours) by following the tutorial from Domagoj Salopek. I would recommend going through this tutorial first before going to the next one, which is slightly more complex but covers a little more for MVC.

http://www.domagojsalopek.com/Details/Create-a-simple-PHP-MVC-Framework/28

http://johnsquibb.com/tutorials

Of course, there’re people who think that using MVC on a small project is an overkill. Trust me, it’ll help you in the long run. By writing a core MVC framework, you’ll be able to use it in all other projects in the future, regardless how big or small it is. Unless the client only wanted a “simple” website. I know clients always think their requirements are simple because they don’t understand the simpler it seems, the more work it takes. I’m referring to those instances where the project can be done just with HTML and JavaScript. In those cases, MVC is really too much.

Now, going back to fiddling the simple MVC framework that I have written.

Edited: After writing my own simple MVC framework, I went on to study other major PHP framework such as Symfony, CakePHP and CodeIgniter. I noticed that CodeIgniter uses a very similar approach to the simple framework introduced by Domagoj. So if you’re advancing to a more complex framework, take a look at CodeIgniter. You’ll be glad he had written something so fundamental to get us started.

Setting Aptana to read another file type as PHP

So recently I’ve been following this simple tutorial to learn about creating a simple MVC PHP framework: http://www.domagojsalopek.com/Details/Create-a-simple-PHP-MVC-Framework/28

It’s so simple that I got a MVC template in less than an hour. But it definitely took me some time to fully understand the code. Luckily I have some experience with WordPress and CakePHP so somehow it wasn’t too long for me. *Trigger proud-mode* 😛

As usual I was using my favorite IDE Aptana but something struck me: I don’t see the PHP color code for the *.tpl files that I have created for the MVC framework. It’s quite annoying and inconvenient.

Turns out it’s actually quite simple to “fix” it.

  1. Just go to Preference (Mac users check the “Aptana Studio 3” menu at the top panel, WIndows and Linux users should check the File or Tool menu)
  2.  Under General -> Editors -> File Associations
  3. Under File Types -> Choose Add, and enter: *.tpl
  4. After added, click on that file type
  5. At the bottom, click Add and choose “PHP Source Editor”.

Done!

Now when you reopen all the *.tpl files in Aptana, it will be recognized as PHP files.

Hope this is useful to you. 🙂

Free Web development tools for Mac users

This is an on-going post which will be updated when I find or learn something better. Please leave a comment if you have any suggestion or if you find any error. Help me to help others! Thanks. 🙂 (I found many spams coming in, so please leave out the website if you don’t have any to share.)

Free Web development tools for Mac, especially for PHP developers. Of course, there’re many other free tools available out there. These are the tools that I have been using personally and I find them very useful. I hope you’ll find them useful too.

1. Local web server for testing

  • MAMP to manage local website (http://www.mamp.info/). This is only essential if you’re working with server side language PHP. Updated: If you’re too lazy to set up the Mac with its included Apache server like me, this is a very good app to start with. Just install, run the app and you’re good to go.
  • This tutorial shows how easy it is to set things up in Mac with MAMP for WordPress. I followed this to install a testing development for my work.
  • If you can’t get Aptana (mentioned below) to read the files from MAMP’s default Document root, scroll to the bottom to read more.
  • Mac’s Web Sharing for developers who are only developing using HTML, CSS and Javascript, Mac comes with a web server installed by default. You may want to google “How to enable web sharing on Mac Lion”. Updated: Thanks Glenn for pointing out. If you’re a little command line savvy, you may do away with MAMP and set up your Mac with PHP and MySQL. Just follow the tutorial here. I haven’t tested it though.
  • OS Mountain Lion: Unfortunately, Apple has removed the web sharing option in the sharing preference panel (see here). You can bing it back using command line by following this tutorial. But then again, they really look too much work. I prefer to use MAMP. And because the configuration is self-contained within MAMP, if I messed up the settings, I can simply delete the app and reinstall to reset to default.
  • AMPPS (http://www.ampps.com/): I was preparing for a web design class and was looking for a tool for Windows users similar to MAMP. And then I found this AMPPS. It supports both Windows and Mac, and is said to be portable. I’ve yet to give it a try, I probably will in the near future although MAMP is enough for me at the moment. Read this article about AMPPS vs MAMP: http://bit51.com/bye-bye-mamp-pro-hello-ampps/

2. Text Editor

Both tools provide syntax-highlighting, but Aptana provides auto-complete and syntax error alert features which are slightly more useful for me.

  • Aptana as web development IDE http://aptana.com/
  • I had been using TextWrangler before I finally found this tool. The syntax error alert feature really saves me a lot of trouble trying to debug. And the auto-complete saves me some typing too.
  • One thing I don’t really like is the default white text on black background theme. To change the white text on black background to black text on white background, click the color wheel icon on the top of the Aptana window and select “Aptana Studio 2.x”, “Eclipse” or “Dreamweaver” theme.
  • I didn’t spend time trying to set up Aptana for debugging web environment because I could use MAMP to run the web and see my development while I’m doing my work.
  • Aptana works even better if you have Git installed. It can track branches and changes by indicating them on the left panel. This is a simple yet extremely useful feature. Apple’s Xcode comes with Git. My iMac (with Xcode and SourceTree installed) worked pretty well for Aptana, but my MacBook (no Xcode, only SourceTree installed) didn’t work. So it’s probably advisable to install Xcode along with Git so you don’t have to figure out how to configure Git to work with Aptana.
  • TextWrangler as text editor http://www.barebones.com/products/textwrangler/
  • TextWrangler doesn’t support auto-complete and doesn’t prompt you if there’s any syntax error. You need to know exactly what you’re doing. I have had hard time debugging when I was using this tool. It is still a very good free tool though.

3. Source repository and management

Source control and management is crucial in a development work. Because it is the core of the business. It is important for us to find a good storage and to keep track of all changes done to the source.

  • BitBucket https://bitbucket.org/
  • You can create unlimited private repositories.
  • Each repository is limited to 5 users for free account.
  • I have been using this for several months. It is very easy to use and configure. The SourceTree client works out of the box with BitBucket. And recently they had refreshed and improved their web UI. Very impressed. Not to mention they provide unlimited private repositories.
  • GitHub https://github.com/
  • You can create unlimited public repositories.
  • Private repositories come with a price.

4. Source repository client

You can always use the web page to upload changes. This is just a convenient way to commit the changes to the repository from the Mac.

  • SourceTree app http://www.sourcetreeapp.com/
  • Any Git or Mercurial repositories.
  • I’ve been using this tool and find it very easy to use.
  • The client allows us to add any git repository, not limited to BitBucket. I had tried adding GitHub and “it just works”.
  • For Git beginners the concept of Fetch, Pull, Push, Commit and Checkout may seem overwhelming… but they are the fundamentals of Git that I think it’s good to know. It becomes very useful if you ever want to use Git with command line.
  • GitHub for Machttp://mac.github.com/
  • Limited to GitHub account.
  • I have not personally tried this but the UI looks very intuitive.
  • The UI is so simple that some concepts of Git have been hidden from users. It may be difficult for you to switch to other clients or command line if you don’t have the concept of Fetch, Pull, Push, etc. Nevertheless, it is a simple client for newbie to start using Git within minutes.

While the 2 clients are extremely useful for synchronizing your work on the cloud (their servers), you can always choose to leave the work in your local machine. Simply use commit and not use the Pull and Push commands. But repositories are best for collaboration, so usually developers will sync them to a server for sharing (and backup too).

Using Git from the Terminal

Sometimes you may need Git from the Terminal. In my case, I wanted to use Composer.org to install some dependencies in my Laravel project. So I need Git in my Terminal. It’s not that difficult to install, just go to this link, download the latest package and install it.

https://code.google.com/p/git-osx-installer/downloads/list

5. Aptana & MAMP troubleshoot (Document Root issue)

I didn’t use the default root in MAMP because it didn’t work for me. Aptana doesn’t seem to be able to see the files in the htdocs folder. It’s better to put your work outside the MAMP app, in case it got corrupted and you have to delete it.

Open MAMP, go to “Preferences”, under “Apache” tab, change the Document Root to somewhere else. I like to put it under

/Users/your_username/Sites

This folder is automatically created prior to Mountain Lion. If you purchased the MacBook with Mountain Lion then most probably this folder doesn’t exist. You can always create it or choose another folder. 🙂

When you launch http://localhost:8888 the next time, it will read directly from this folder.

Additional info:
If you have subdirectories inside this folder, simply use http://localhost:8888/subfolder

6. Managing MySQL database

The best tool to manage MySQL database is the tool made by Oracle themselves. They have clients for many platforms, including Windows, Mac and some Linux.

MySQL Workbench: a very nice tool to manage MySQL databases. http://dev.mysql.com/downloads/tools/workbench/

7. FTP Client

There’re many free FTP clients available in the market but these are the few that I have been using and I find them easy to use.

  1. Cyberduck (http://cyberduck.ch/)
  2. Filezilla (https://filezilla-project.org/)

Warning: Be aware that by default Filezilla stores and transmit your password in plain text. I’m not sure if this has been resolved but it has certainly compromised some of my sites before. There’s a way to “fix” it but it sounds too troublesome.

Cyberduck on the other hand stores your password using Mac OS’ keychain. One slight inconvenience in Cyberduck is that it doesn’t have the feature to only upload files that have changed. Filezilla is better in that sense.

More FTP clients here: http://mac.appstorm.net/roundups/internet-roundup/top-7-free-ftp-clients-for-mac/

8. LESS CSS compiler

LESS is a dynamic stylesheet language which extends CSS with dynamic behavior such as variables, mixins, operations and functions. If you want to learn more about LESS, visit www.lesscss.org.

LESS makes CSS logically easy to write and reusable. The only troublesome part, in my opinion, is that you need to compile LESS script into CSS format. The team that came up with LESS has provided a command-line tool to do that. Command-line?! Sounds complicated? Fortunately, there’re many GUI tools that can help us with that. The 2 that I have been using are simple and free of charge.

  1. SimpLESS (http://wearekiss.com/simpless) – SimpLESS was a very easy-to-use and straight-forward GUI compiler. However, I was having a lot of trouble trying to compile Twitter Bootstrap v3. So I switched to…
  2. Koala (http://koala-app.com/) – Koala is not just a LESS compiler, it also supports Sass, Compass and CoffeeScript. It can run on Windows, Mac and Linux. The GUI is also very straight-forward. The only thing that’s currently quite annoying is that it doesn’t allow user to add a single file to compile. You have a add the whole folder, then delete all the files that you don’t want to compile. Other than that, the functionality is comparable to SimpLESS.

For more GUI compilers, you may want to read up here: https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js

9. Configure AMPPS

  1. Download the latest version from http://www.ampps.com/downloads (as of writing it was version 2.0)
  2. Launch the app and Start both Apache and MySQL.
  3. Launch a browser and go to address http://localhost/
  4. You will be asked if you would like to make AMPPS secure. Go ahead and enter a password.
  5. The root folder is by default at /Applications/AMPPS/www/
  6. If you create a subfolder under the root folder, you can access your subfolder site using the URL http://localhost/subfolder

I’m trying out AMPPS now and considering if I should migrate all my projects from MAMP to AMPPS. The main advantage for me is that AMPPS supports both Windows and Mac, while MAMP is only for Mac. Other than that, I don’t feel much difference between the 2, as of now.