Browse Category

Tutorial

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.

Missing notes for Laravel 4

Tutorial: Missing notes for Laravel 4

Note: This is an on-going blog. I’ll be updating it whenever I have new findings for Laravel 4.

I had been learning CodeIgniter and CakePHP for some time now when I chanced upon this new(er) framework called Laravel (http://laravel.com) via Twitter.

I’m not going to tell you how wonderful it is, but here’re some references:

There’s an official documentation and another one which is almost recommended everywhere I googled.

The thing is, the official documentation isn’t very complete. It covers most of the basics, but when you want to dig deeper, you’ll get lost. The other recommended tutorial site is almost outdated. I couldn’t find some of the things when I’m comparing it to the official documentation.

So I’m taking notes on the things that I’ve found out (either through googling or the official API documentation). Here we go:

1. Form::open_for_files() is outdated

If you’re trying to create a form for uploading files, the old way was to open the form with Form::open_for_files().

It isn’t clear in the official documentation or the API that we should now use the same Form::open() but now with an additional argument ‘file’ => true.

{{ Form::open(array('action' => 'UploadController@postImage','files'=>true)) }}

2. Using Input::file()

You must always set ‘files’ => true in the Form::open() otherwise Input::file() will never work.

3. Getting filename from Input::file()

There were many tutorials saying that the following will return the filename of the upload file. But it didn’t work for me.

$filename_neverwork_forme = Input::file('image.name');

Instead, use this to get the filename of the upload file.

$filename_worked = Input::file('image')->getClientOriginalName();

Of course, using the filename directly without verification is dangerous. But that’s up to you to decide.

4. Redirect with validation error message and inputs

I realize most methods with underscores are outdated.

So this is wrong:

return Redirect::to('form/create')->with_errors($validation)->with_input();

This is the correct method:

return Redirect::to('form/create')->withErrors($validation)->withInput();

5. Getting URL of a location using URL::to()

To get the full URL of any location or route, simply use URL::to().

For example, if you need the URL of the route ‘about’

{{ URL::to('about') }}

Note: Remember to set your route.php correctly. This function depends on that.

6. Checking current location with Request::is()

I needed to track the current location so that I can mark the corresponding navigation button as active. In this case, you can use Request::is().

Example

@if ( Request::is('about') )
    <li class='active'>
@else
    <li>
@endif
        <a href='{{ URL::to("about") }}'>About</a>
    </li>

 7. Get distinct values from a table column

I had a list of string from a table column that can be repeated. So I needed to query the database to give me an array of string which are distinct.

This is how you can do it:

DB::table('tableName')->select('columnName')->distinct()->get()

 8. Using Mail::send()

This is quite frustrating because the official documentation didn’t describe how to use the $data parameter which is required when using Mail::send().

Found this very good tutorial:

http://maxoffsky.com/code-blog/sending-e-mail-with-laravel-4-using-mail/

 9. Deploying your Laravel project to a shared hosting

Reference: http://stackoverflow.com/questions/16683046/how-to-install-laravel-4-to-a-web-host-subfolder-without-publicly-exposing-app

9.1 Look for your root or home directory

If you’re not sure where is your root or home directory, login to your shared hosting’s cpanel (control panel) and look for the Home Directory. It’s usually something like “/home/domainname”.

9.2 Create a new folder to host the protected Laravel files

We need to create a new folder in the root directory so that they’re not accessible to public. Under the root directory (e.g. /home/domainname/ or example.com), create a folder “applications”.

Under “applications”, create a folder with your project name (e.g. project_name) and place all your Laravel files (except the “public” folder) into this folder.

9.3 Public folder

Put all your files inside Laravel’s public folder into /home/domainname/public_html/project_name.

9.4 Final folder structure

The end result of the folder structure will look like this:

- /home/domainname
    - applications
        - project_name
            - app
            - bootstrap
            - vendor
            - artisan
            - composer.json
            - phpunit.xml
            - server.php
    - public_html
        - project_name

9.5 Edit Laravel’s /bootstrap/paths.php

I was very lost how many “../” I need to add in order to get to the correct path. So we won’t use __DIR__ at all. We’re going to define the full path base on the root directory so that there’s no confusion.

So change from this:

return array(
    'app'     => __DIR__.'/../app', 
    'public'  => __DIR__.'/../public',
    'base'    => __DIR__.'/..',
    'storage' => __DIR__.'/../app/storage',
);

To this:

return array(
    'app'     => '/home/domainname/applications/project_name/app', 
    'public'  => '/home/domainname/public_html/project_name',
    'base'    => '/home/domainname/applications/project_name',
    'storage' => '/home/domainname/applications/project_name/app/storage',
);

9.6 Edit Laravel’s /public/index.php

Same as the point above, we’re not going to use __DIR__. Let’s change all the path to full path.

From this:

require __DIR__.'/../bootstrap/autoload.php';
$app = require_once __DIR__.'/../bootstrap/start.php';

To this:

require '/home/domainname/applications/project_name/bootstrap/autoload.php'; 
$app = require_once '/home/domainname/applications/project_name/bootstrap/start.php';

9.7 Edit .htaccess

If your shared hosting’s default PHP version is < 5.3.7 but they support higher versions, you can edit the .htaccess file inside the “public” folder.

For Mac users, you can access it via the Terminal.

Use this command to go to the folder

cd your/laravel/path/public

Then list hidden files with this command

ls -a

You should see .htaccess there. By default, this file is protected. In order to change it, you need to open it using super user like this:

sudo open -e .htaccess

Note: -e means open with text editor.

Then append this line to the bottom and save it.

AddHandler application/x-httpd-php53 .php

Or if you want version 5.4

AddHandler application/x-httpd-php54 .php

Upload the updated .htaccess to the public_html/project_name folder and you’re done!

10. Returning view with Error message

When you need to return to a page with error messages (especially if you use validation), you can pass the error messages back to a view with this:

return Redirect::to('form')->withErrors($validation)->withInput();

However, if you need to return an error that is not captured in Laravel’s validation, for example, I needed to check if the reCAPTCHA returns a matching input, you can create a new MessageBag and return that error messages instead.

$errors = new IlluminateSupportMessageBag;
$errors->add('customError', "The reCAPTCHA wasn't entered correctly.");
return Redirect::to('form')->withErrors($errors)->withInput();

But what if you have both validation and custom message? This is how I’ll do it: first, check that validation has passed, if not, return with validation error messages. Then, check that, in my case, reCAPTCHA is matching, if not return that error message.

Example:

if( !$validation->passes() )
{
    return Redirect::to('form')->withErrors($validation)->withInput();
}

// CAPTCHA was entered incorrectly
if (!$reCaptcha->is_valid) {
    $errors = new IlluminateSupportMessageBag;
    $errors->add('reCaptcha', "The reCAPTCHA wasn't entered correctly.");
    return Redirect::to('form')->withErrors($errors)->withInput();
}

11.Creating a Package

Reference:

Important commands:

  1. To generate the class map of package:
    composer dump-autoload
  2. To move package’s assets into public/packages:
    php artisan asset:publish --bench="vendor/package"

12. Laravel requires Mcrypt PHP extension

If you’re using Mac like me, the default PHP installed on the Mac doesn’t insclude Mcrypt extension. I’m using MAMP for development and testing, so I followed this method and it worked for me.

Reference: http://stackoverflow.com/questions/16830405/laravel-requires-the-mcrypt-php-extension

Enter “which php” in terminal to see which PHP you are using.

which php

By default, Mac uses PHP from this path:

/usr/bin/php

If it’s not the PHP version from MAMP, you should edit or add .bash_profile under user root document (cd ~).

In .bash_profile, add following line (your MAMP version may be different, so does your PHP version. Check it up on the folder /Applications/MAMP/bin/php/):

export PATH=/Applications/MAMP/bin/php/php5.4.4/bin:$PATH

And restart Terminal to see which PHP you are using now. And it’ll be working by now.

13. Using lists for Form::select()

The shorter way to populate an array to be used in Form::select() is using query builder ‘lists’ to retrieve just the id column and a value column.

For example:

$select_array = Classname::lists('name', 'id');

Read the link below for more tips about this trick.

Laravel 4: Using query builder lists for Form::select

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.

MD5 Hashing password or text using Perl

Just a small tip I learned from work.

Obtain the MD5 hash of the password using Perl:

$ perl -MDigest::MD5=md5_hex -e"print uc(md5_hex(@ARGV[0]))" hellother3

Result:

BB4505B8BC6051AF4A6FEB31A2ECE1E7

The uc() means returning the upper case of the result.

print uc(md5_hex(@ARGV[0]))

To return the lower case of the result, use lc() instead:

print lc(md5_hex(@ARGV[0]))

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. 🙂

C# .NET Entity Framework: How to insert record into database table with auto-increment primary ID?

Updated: 9 Sep 2016

Just got a comment asking me to take this post down because it’s outdated. Well, this was written in 2012 so it’s really VERY old. And I no longer use C# .NET Entity Framework. I’m leaving this post here for people who’re still using the old framework. All comments are closed now. I’ll no longer answer question relating to this topic. Please read it with caution.

——

I want to insert some records into the database table but it is giving an error which says “INDENTITY_INSERT is set to OFF”, something like that.

To resolve this, there’re 3 steps:

First, in Visual Studio 2010 and click on the .edmx file.
Look for the relevant and right click on the identity column (ID in most cases) and choose Properties.
In the properties window, look for StoreGeneratedPattern and change the value to “None”.
Save the changes.

In some cases (in my case), changing the value in step one is not enough. We still need to manually edit the .edmx file.
In Visual Studio 2010, right click the .edmx file -> “Open With…” -> Choose “XML (Text) Editor” to open the .edmx file
Look for the relevant table and change StoreGeneratedPattern=”Identity” to StoreGeneratedPattern=”None” for the identity column.
Save the changes.

Once the EF settings are done, we can set the primary key at the EF side.
However, SQL Server does not allow the Identity column to be set unless IDENTITY_INSERT is ON. (http://msdn.microsoft.com/en-us/library/ms188059.aspx).
So we need to manually execute SQL command to turn on the IDENTITY_INSERT first before we insert new records.

using (TestDBEntities1 context = new TestDBEntities1())
{
	using (TransactionScope scope = new TransactionScope(TransactionScopeOption.RequiresNew))
	{
		context.Connection.Open();
		int i = context.ExecuteStoreCommand("SET IDENTITY_INSERT TestDB.dbo.Person ON");
		Person p = new Person();
		p.PersonID = 4;
		p.Name = "Michael";
		context.People.AddObject(p);
		context.SaveChanges();
		i = context.ExecuteStoreCommand("SET IDENTITY_INSERT dbo.Person OFF");
		scope.Complete();
	}
}

This is a workaround to let us manually set the identity column.
Warning: when IDENTITY_INSERT is set to ON, we need to manually assign the identity key (ID in most cases). You must ensure that it is unique and not null or empty. If you want to get the next available ID, you may add this:

Person p = context.Person.OrderByDescending( c => c.PersonID).FirstOrDefault();
int newId = (null == p ? 0 : p.Id) + 1;

Resource:
http://social.msdn.microsoft.com/Forums/eu/adodotnetentityframework/thread/48cfa132-8612-4353-b916-b29f32b4070e

http://social.msdn.microsoft.com/Forums/en-US/adonetefx/thread/84867836-2a52-4c8d-aa3d-e2d5f1845e66

Retrieve Linux and Darwin version

There’re many ways to retrieve the linux version or distro information. Sadly, they are not standardized across all distros.

Below are some of what I have found working for myself. Feel free to suggest more.

Retrieve Linux version

You can use either of the followings:
# uname -a
# cat /etc/issue

Getting Kernel version on Mac and Unix/Linux machine

To get the full kernel information using command line

terminal?> uname -a

On Fedora 16, you’ll see

Linux computer-fedora-linux 3.1.0-7.fc16.i686 #1 SMP Tue Nov 1 21:00:16 UTC 2011 i686 i686 i386 GNU/Linux

On Ubuntu 12, you’ll see

Linux computer-VirtualBox 3.2.0-21-generic-pae #34-Ubuntu SMP Thu Mar 29 22:33:16 UTC 2012 i686 i686 i386 GNU/Linux

On Mac OSX Lion, you’ll see

Darwin iMac.local 11.3.0 Darwin Kernel Version 11.3.0: Thu Jan 12 18:47:41 PST 2012; root:xnu-1699.24.23~1/RELEASE_X86_64 x86_64

To just get the kernel name using command line

terminal?> uname -s

On Linux machines, you should see

Linux

On Mac machines, you should see

Darwin

Raphael.js IE7 issue with innerHTML on elements other than div

I kept having this unknown error on IE7 (IE9 compatibility mode) when I use Raphaël JavaScript Library. On deeper research, this error points me to line 5178’s “span.innerHTML”.

I found this very interesting article http://domscripting.com/blog/display/99 about usage of .innerHTML in IE7:

…innerHTML can cause some problems, particularly in Internet Explorer. If you use innerHTML to add or update form elements, all sorts of screwiness can occur. Sometimes the data from the newly added elements won’t be included when the form is submitted to the server.

and it provided a useful fix:

First of all, use the DOM to create a block level element—such as a div—using createElement. Then update the innerHTML property of this newly-created element. Finally, insert the updated element into the document using a DOM method like appendChild or insertBefore…

I thought it was a perfect fix, so I searched for the .innerHTML implementation in raphael.js (line 5178):

res.textpath.string && (span.innerHTML = Str(res.textpath.string).replace(/"));

and changed it to:

/*Resolve IE7 issue with innerHTML*/	
var newdiv = document.createElement("div");
res.textpath.string && (newdiv.innerHTML = Str(res.textpath.string).replace(/"));
span.appendChild(newdiv);
/*end of resolution*/

Somehow it worked very well. I had forked and submitted a fix but still waiting for the main master to commit this change. You can find the fix at my fork:
https://github.com/kongnir/raphael/compare/master…patch-1

ASP.NET passing data between pages

Today I was working on a senario where I wanted to pass an ID to another page after a postback had occurred. Usually I would do this using a redirect with the ID appended behind the URL as query string, like this.

// In page2.aspx
protected void Button1_Click(object sender, EventArgs e)
{
    // Did something here
    string passinId = txtId.Text;
    Response.Redirect("/Page1.aspx?id=" + passinId);
}

And then in Page1.aspx, I do this to get the ID.

// In Page1.aspx
protected void Page_Load(object sender, EventArgs e)
{
    String s_id = Request.QueryString["id"];
    if(null != s_id)
    {
        // do something
    }
}

However, in this special case, I’m actually loading Page2.aspx using AJAX within a modal window in Page1.aspx. Page1.aspx has many links to load Page2.aspx (I’ll skip the long story), so having the ID in the address bar as a query string will make it look very confusing to the user.
I find Session quite useful here: it allows me to pass the ID between pages yet not showing it in the address bar. Of course, security is not of concern here since I’ve been showing it in the address bar anyway.
So in Page2.aspx, instead of appending the ID behind the URL, I do this.

// In Page2.aspx
protected void Button1_Click(object sender, EventArgs e)
{
    // Did something here
    string passinId = txtId.Text;
    Session["SpecialKeyName"] = passinId
    Response.Redirect("/Page1.aspx");
}

Then in Page1.aspx, I get the ID like this.

// In Page1.aspx
protected void Page_Load(object sender, EventArgs e)
{
    if (Session["SpecialKeyName"] != null)
    {
        //get the Session value
        string s_id = (string)(Session["SpecialKeyName"]);
        Session.Remove("SpecialKeyName");
        // Do something
    }
}

I make it a point to delete the session after use since I only want to use it whenever it’s available. If it’s not available, I will show some default data.

This is not the only way, but it definitely helps me solve my problem.

Read up here on MSDN for more information on Session, different types of approaches as well as some tips and warnings of each approach.

Another good read about ASP.NET Session State on MSDN here.

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.