NPM not working after installing yarn – MacOS Sierra

I was getting the following error when trying to use NPM after installing yarn.

To fix this need to reinstate npm with yarn. Following command will do the trick.

yarn global add npm

Regular Expressions – validating the Email

How to validate an email address with following rules using regular expressions?

• There should one @ sign in the email address.
• The email should start with a letter and can include letters and numbers and underscore symbol  _ . This constitutes the left hand side of the email from the @ sign.
•  Right hand side of the @ sign should be the domain name. This should include the period . and left hand side of the period should be alpha numeric and right hand side should be letters.
• Lower case and upper case is supported.

Lets get started on how to validate for above rules using regular expressions.

/^

This means the reg expression has started.

/^[a-zA-Z]{1}

This part means the first letter should be a letter. Either lower case a-z or upper case A-Z.

/^[a-zA-Z]{1}[a-zA-Z0-9]_

After that We check for alpha numeric characters and underscore character.

/^[a-zA-Z]{1}[a-zA-Z0-9]_@

Then we check for the @ sign.

/^[a-zA-Z]{1}[a-zA-Z0-9]_@[a-zA-Z0-9]\-

Then we check for the domain name alpha numeric characters and – dash sign.

/^[a-zA-Z]{1}[a-zA-Z0-9]_@[a-zA-Z0-9]\-\.

Then we check for the period in the domain name.

/^[a-zA-Z]{1}[a-zA-Z0-9]_@[a-zA-Z0-9]\-\.[a-zA-Z]

Then we check for the domain extension letters.

/^[a-zA-Z]{1}[a-zA-Z0-9]_@[a-zA-Z0-9]\-\.[a-zA-Z]$/

Last part is to mark the end of the reg expression.

Hope this help you understand regular expressions a bit more. I have added the regular expression for javascript. But this will be similar for other languages as well. Please share how to validate email in other languages using regex below in the comments.

Resource: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Git Work Flow for Remote Teams

When your working with a remote team maintaining a good workflow is essential to ensure that projects are delivered properly and code base is managed without many conflicts. This is mostly from our own workflow where the team lead is based in one country and the team members are on a another country working remotely from home.

We use Bitbucket to manage our source code at the moment and have been using it for the past 3 years without any issues.

So our workflow for a project is like this. For each project I create a main repository which will be the production version. Then I create a fork of it as a staging version.

Then I give read access to that staging version to each remote developer who then create their own personal forks. Which they clone for their local working copy.

So in this approach the production version and staging version stays isolated from any developer changes. All the developer changes are consolidated at the staging level and tested before pushed out to the production repository.

Developer will do their changes and commit and push the changes their Dev repository on Bitbucket. Then from there the developer will send a pull request to the staging repository. This is when the team lead will do a code check and accept the changes into the staging version. If there are any discrepancies the team lead can reject the pull request at this point.

We are using Source Tree which is provided by Bitbucket for our local git management. I find it easy to get new developers to use Git using the GUI tool than the CLI commands.

Workflow process

Create Production Repository

 

 

 

 

 

 

 

 

 

 

Create a Fork of that Production Repository as a Staging Repository

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Give Read Access to each developer to the Staging Repository

 

 

 

 

 

 

 

 

 

 

 

 

 

Developer creates a fork of the Staging Repository to create their Dev Repository

Developer then creates a local clone of their developer repository to do changes and development

Hope this helps you to figure out how to structure your git workflow for your remote team. I have kept this process simple as possible.

Note: This might not work for a large remote team working on a single project. We used this mainly for a small team about 4 members working on the repository.

Why Bitbucket?

• Its free upto 5 users.
• It allows private repositories for free.
• Even the paid plan is so much cheaper than competition.
• Their desktop GUI tool is full featured.
• Reliablity – We have used Bitbucket for about 3+ years without any issues now.
• Easy integration with other Atlassian tools like JIRA.

How to be a Freelance WordPress Developer

Hi there! :), your here and I hope your interested in earning money by doing freelance work.

A little bit about me before we get started, I was a freelance developer for more than 3 years and I designed (some) and developed more than 40 websites. My customers were from different countries including Sri Lanka, United States and Singapore. It was hard work managing a regular day job and doing freelance website development as well, but it was worth it. That extra work is what helped me to save enough money to buy my car and also helped me finance my self to move to Singapore when I got my current job here.

So enough about my self, this post is to note down the things I learned the hard way when doing freelance development. Hopefully this will help you who is new to website development learn something and get started. I sincerely hope that you can be successful by following some of the information given here, but I hope you understand that it is actually hard work on your part which will ensure your success.

Ok So lets get to it,

Why WordPress?

Why WordPress? Why not develop websites using HTML and CSS or Drupal or Joomla. The main reason I picked WordPress was because it was very easy to learn. A huge community and lots of tutorials and materials are out there to help you to get started.

And the other reason is there are lots of jobs available for WordPress. Its easy enough for normal people(Non developers or Muggles 😛 ) to get started using it on their own but just complex enough to prevent them from building a fully customised website. So people are always looking for developers to help them customise their website built using WordPress which they already started on their own or people who want to upgrade and rebuild their old websites.

My speciality was catering to those clients, who wanted to convert their static websites into CMS based website, so that They can manage their website on their own.

There are other reasons, But for me above two were the main reasons.

Types of WordPress Work

Website Setup/ Installation / Maintenance / Bug Fixes

This is kind of the smallest job, and least rewarding. Most people can install WordPress on their own, but there are some people, specially older generation who might find it confusing to select servers or setup their domains etc. So you can easily do those to earn some quick cash. Bug fixes sometimes can be confusing as WordPress installations can get quite complex depending on the types of customisation done the on the website. So you might need to look at what your dealing with properly before accepting this kind of job.

Theme customisation

This is purchasing/downloading a commercially or freely available WordPress theme done by someone else and customising it to fit the customer needs. This can be easy or hard depending on the level of customisation the client requires and the way that theme is developed. Sometimes themes are developed using obscure frameworks which makes it very hard to customise.

My personal advice is to avoid these unless the required customisation is quite small. These kind of websites can be a very big headache in the long run. But if this is the kind of work you like its a good starting point. You can get jobs that only includes the task of installing and setting up the theme as that can be quite confusing. Make sure that there is good documentation accompanying the theme when you accept this kind of project.

The customisation could be both front end and backend. So you might need HTML/ CSS/ Javascript and also PHP knowledge to do this kind of job. Also the ability to understand and follow instructions and patience to ready other people’s code is also helpful.

Plugin development

This is more to do with PHP development than WordPress. Plugin development is kind of advance development work, but you can charge more for this kind of work. Plugins can be developed to do all kinds of work but most of the time people looking for freelance developers to do Plugin Development knows what they are talking about, so will be easier to work with. Plugin development can be learned on your own, as there are lots of tutorials available to get you started. You need to get a good understanding of the various APIs provided by WordPress if you want to be a good plugin developer.

Custom Theme development

This was what I used to do. This is building an entire WordPress theme from scratch based on a design. Functionality of the website can be achieved by integrating plugins and theme can be developed as a WordPress child theme or totally from scratch. I used to build any required functionality into the theme it self and avoid using plugins as much as possible as can be very difficult to maintain a plethora of plugins and keep them up to date.

To develop custom themes you need to have good understanding of front end technologies, HTML, CSS, Javascript, Front end frameworks like Bootstrap, Foundation and also PHP.

From this point onwards I am going to assume you want to become a custom theme developer and continue with my post. But any other type of work is also basically same, so depending on your preference, replace custom theme development with what you prefer.

What you need to learn or know

• Basic photoshop skills: How to open a PSD file, how to isolate layers, How to slice a PSD files. Tip: Only slice and take out images that your cant replicate with CSS. Dont use images for gradients or buttons if you can avoid it.
• Front end: HTML, CSS, Javascript, JQuery, Front end frameworks- Bootstrap and Foundation (One of these is enough, bootstrap is more popular but I find foundation is easier to understand.)
• WordPress: Understand how to install WordPress, how the database looks like, the file and folder structure, the dashboard, just install a test version and play around the dashboard. I suggest going to wordpress.com and creating a blog to get a feel of the dashboard first.
• PHP: Basic PHP knowledge is enough to get started, you can learn as you go along.
• MySQL: WordPress uses MySQL as the database engine, so it wil be helpful to get some understanding on how databases and tables are created, basic sql commands etc.

Portfolio?

Obviously you wont have a portfolio when your beginning. So the best thing to do is to start building your own website using WordPress. That’s how I got my start in 2012, I built a very crappy version of my website. Which I sent to a client as a sample. My theory is something is better than nothing, so Just build something it doesn’t have to be great.

But if you have already done WordPress development in your office or during your studies. Just build a portfolio website. This can help a lot when convincing your customer about your abilities.

Where to find customers

Best place for me to find WordPress customers is on http://jobs.wordpress.net/ Which is part of WordPress I think. Here its easier than on most freelance websites as you can directly talk to the customer and show off your skills. I personally find it difficult on other sites as those require complex profiles and doing tests to show your skills.

Some other places to find jobs are given below,

• http://jobs.wordpress.net/
• http://wpjobboard.net/
• https://www.freelancer.com
• https://www.odesk.com/
• http://www.fiverr.com
• and many others.

Do a google search for “WordPress Jobs” and you can find lots of places to find WordPress work.

How to communicate with customers

This I think is the most important part of this post. Its your communication style that will set you apart more than your work. From the initial email or message to the daily or weekly updates on the project, A client needs to be kept updated. Remember, An informed customer is a happy customer.

Follow these when your communicating with your client,

• Be polite – Be nice and patient when dealing with the customer. Remember they might not always be technical and you might have to explain things several times to convince them.
• Be descriptive but keep it simple – Keep the information in point form. This helps to understand and breakdown what your trying to say.
• Give examples – Giving examples or visual aids can go along way. Use a tool like Greenshot to provide very descriptive screenshots. If your on skype share your screen or ask your customer to share their screen when talking so that you both know what your looking at.
• Be prompt – Don’t go missing. Be quick to reply to client enquiries.

Always remember a face to face meeting is better than a call, A call is better than an email.

How to get paid

Have a contract. I know this can be tough to do, but discuss your rates with customer and download a sample contract from the net and just send it to your client to get signed. At least provide them with a quotation. This could be helpful when trying to get paid. (I used https://quotes.futuresimple.com/ for generating my quotations.)

And discuss how your getting paid in advance. If its overseas client, you can get paid by direct wire transfer to your bank. Which can be bit costly for the client but easier for you. To convince the client to do this, give them a discount depending on the cost they have to bare. Also you can use money transfer services like Western Union and Moneygram.

Give them an invoice, this makes you appear as a proper professional and they will take you more seriously. I use http://www.startinvoicing.com/ for invoicing. (You can also use http://invoicer.surendias.com if you want to quickly generate a pdf invoice. 🙂 )

And always remember to use a time tracking software to track the work that you do. This will help to make sure your charging appropriately and not overworking your self. Also this will help to keep your focus when doing work. I use Toggl to do my time tracking. https://www.toggl.com/

How to maintain the relationship with customers

Freelancers most of the time seems to go from project to project and client to client. But I think its important to keep a client for repeat business than trying to find new customers. Repeat business is the easiest way to earn a steady income and it will be helpful to maintain good customer relationships to do that. Here I have given some of the things I use when I deal with customers.

• Always give more than what your getting paid for.
• Be prompt
• Be transparent
• Keep them informed, at least explain what you did to them. or even better provide them with a user guide and train them on how to use the dashboard.
• Charge them fairly.

Conclusion

I have tried to put down as much as possible of what I have learned down in one post. I hope this will help at least one person in getting started as a freelancer and earning money. I am planning to do a YouTube video on WordPress theme development in the future, Let me know if you would be interested in that. Thank you. 🙂

PHP Tip : Access object properties dynamically

If you want to pass a string into a function and use that string as the property of an object to get the value of that property you can use the following syntax.

function getObjectValueDynamically ($property_to_access) {
$value = $object->{$property_to_access};
return $value;
}

The part that you need to note here is, the parameter is surrounded by two Curly brackets like,

$object->{$property_to_access}

Conflicts when syncing branch with master on bitbucket

If you get a conflict when syncing the branch with the master. First checkout the branch on your local machine and then run the following command to merge the changes from master.

$ git merge --no-ff -m 'Merged in master (pull request #40)' remotes/origin/master

Then manually resolve the conflicts before committing and pushing again.

Vagrant on Windows 10 error when you run Vagrant up

I got Vagrant and Virtual Box running on my laptop running WIndows 10 without an issue.

But when I tried to get a vagrant box up it started giving the following error,

$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'scotch/box'...
==> default: Matching MAC address for NAT networking...
==> default: Checking if box 'scotch/box' is up to date...
==> default: Setting the name of the VM: my-project_default_1443152333300_24531
==> default: Clearing any previously set network interfaces...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["hostonlyif", "create"]

Stderr: 0%...
Progress state: E_FAIL
VBoxManage.exe: error: Failed to create the host-only adapter
VBoxManage.exe: error: Operation canceled by the user
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component VirtualBoxWrap, interface IVirtualBox
VBoxManage.exe: error: Context: "enum RTEXITCODE __cdecl handleCreate(struct HandlerArg *)" at line 71 of file VBoxManageHostonly.cpp

To fix this I followed these steps,

Went to VirtualBox window and,

1. Open VirtuaBox
2. Go to File->Preferences->Network->Host-only Networks
3. Create Manually a new adapater like as follow:

IPv4: 192.168.2.1 (in my example my vm ip is 192.168.2.2 you must use the 3 first parts equal as your ip address and replace the last one by 1)

Mask: 255.255.255.0

BTW I was trying to up the LAMP box given by Scotch.io. You can get here, https://box.scotch.io/

My Presentation on On Page SEO at Singapore WordPress Meetup

Laravel enable foundation validation

If your using Laravel and also using foundation for your front end development there is an easy way to add Foundation’s built in form validation (Abide) to a form. When opening the form tag use the following code,

 

{{ Form::open(array(
         'action'     => 'AController@index', 
         'class'      => 'hello', 
         'data-abide' => true
     ))
}}

Google Cloud Storage – Set ACL for objects in a bucket

Hi I have been trying to upload files to Google Cloud Storage from my Google App Engine App (PHP) and got stuck when trying to set the ACL for those files. I tried to set the ACL manually in my code at the time of file upload and it was proving to be tricky as my app is using Laravel which is using a different way to handle file uploads.

For people using normal php scripts can use following method given in GCS docs.

 

<?php
use google\appengine\api\cloud_storage\CloudStorageTools;

$object_url = 'gs://my-bucket/'.time().rand(0,1000).'.txt';
$options = stream_context_create(['gs'=&gt;['acl'=&gt;'public-read']]);

$my_file = fopen($object_url, 'w', false, $options);
for($i=0;$i&lt;900;$i++) {
  fwrite($my_file, 'Number '.$i.' - '.rand(0,1000).'\n');
}
fclose($my_file);

$object_public_url = CloudStorageTools::getPublicUrl($object_url, false);

header('Location:' .$object_public_url);

But there is a different, much easier option using GSUTIL tool. With this tool we can give a command on a bucket to set the default ACL for that bucket. So in my case that was public access.

First before giving the command follow steps given in this url to install the gsutil tool.

After installing set up your credentials as per this link.

To setup the connection first run this command:

C:\Python27>python c:\gsutil\gsutil config

Then give the following command.

 

C:\Python27>python c:\gsutil\gsutil defacl set public-read gs://your-bucket-name

This will make all your future uploads public read enabled.

If you want to further learn about gsutil acl commmands you can read up here.