G-Design Blog : Web Design & Development

UPDATE : Laravel Homestead now provides the possibility to use older versions of the vagrant box by changing the configuration file : see the documentation

Since I maintain some older Laravel applications that are not compatible with the latest PHP version, I need a way to use a different Laravel Homestead installations for different projects.

Here is a solution to install different Homestead Composer packages and Homestead Vagrant boxes on Mac Os X. I will be using an older Homestead installation with PHP 5.6 for an old project and the latest Homestead installation that comes with PHP 7 for a new project.

This article uses information from the laravel Homestead documentation and from a great article by Julián Gutiérrez.

Install the vagrant boxes

I assume you have VirtualBox and Vagrant installed on a Mac Os X system.

We have to install multiple Homestead vagrant boxes to be able to use a different installation for different laravel projects.

As an example, we will be using an older Homestead box (version 0.2.7) that uses PHP 5.6 and the most recent Homestead box. (version 0.5.0 at the time of this writing)

Run the following commands to install the two vagrant boxes :

vagrant box add laravel/homestead vagrant box add laravel/homestead --box-version 0.2.7

We can check the different vagrant boxes that are installed by running the following command :

vagrant box list

If, at a later date, we wish to remove the older Homestead box we can do so by running this command :

vagrant box remove laravel/homestead --box-version=0.2.7

Install the Homestead package per project

Follow the steps on the laravel documentation page to install the Homestead package locally for every project.

For the new project this means executing these commands in the project directory :

composer require laravel/homestead --dev php vendor/bin/homestead make

For the older project, where we want to use an older Homestead Vagrant box, we have to execute the following commands in the project directory to install an older version of the Homestead composer package :

composer require laravel/homestead:^2.0 --dev --no-scripts php vendor/bin/homestead make

Configure the Homestead installation

The Homestead make command will automatically configure the sites and folders directives in the Homestead.yaml file. Check this configuration to make sure it meets your needs and remember to update the /etc/hosts file entry for Homestead.app or the domain of your choice. See the laravel Homestead documentation for more information.

To make sure the older project uses the older Homestead vagrant box, we will use the technique described by Julián Gutiérrez.

We have to change the VagrantFile generated by the Homestead make command in the directory of the older project.

Replace this code block :

if File.exists? homesteadYamlPath then Homestead.configure(config, YAML::load(File.read(homesteadYamlPath))) elsif File.exists? homesteadJsonPath then Homestead.configure(config, JSON.parse(File.read(homesteadJsonPath))) end

with the following code :

settings = nil if File.exists? homesteadYamlPath then Homestead.configure(config, YAML::load(File.read(homesteadYamlPath))) elsif File.exists? homesteadJsonPath then Homestead.configure(config, JSON.parse(File.read(homesteadJsonPath))) end if settings != nil then config.vm.box_version = settings["version"] ||= ">= 0" Homestead.configure(config, settings) end

This will allow us to define the Homestead Vagrant box version in our Homestead.yaml file for the older project so that this project uses the 0.2.7 version.

Add the following line to the Homestead.yaml file of the older project to instruct Vagrant to use the older Homestead Vagrant box :

version: "~> 0.2.0"

Use Homestead

You can now use the Homestead installation in every project by running the following command from the project directory :

vagrant up

If you wish to connect to the virtual machine, you can run this command :

vagrant ssh

And when you wish to power down the virtual machine, execute this command :

vagrant halt

I use the local Apache and PHP web development environment of Mac Os X for several of my projects. After upgrading my OS to the latest version, OS X 10.11 El Capitan, I had to take multiple steps to get everything back up and running.

Permissions, developer tools and Homebrew

One of the important El Capitan changes is the introduction of something called System Integrity Protection or “SIP”.

SIP prevents everyone (even root) from writing to many system directories such as /usr, /System and /bin (but not /usr/local).

To disable SIP take the following steps :

Reboot into recovery mode by holding down Command+R on reboot

Access the Terminal from the dropdown menu

Run the command : csrutil disable

Reboot

To re-enable SIP again boot into recovery mode and run the command csrutil enable.

Updating OS X can also cause other errors when you use certain command line tools. To fix this, you have to re-install the Xcode developper tools by running the following command :

xcode-select --install

If you already have Homebrew installed and if you are seeing permission issues, you can run the following command to change the owner of the files in the /usr/localdirectory and fix those issues.

sudo chown -R $(whoami):admin /usr/local

After fixing this, I recommend you run brew doctor and follow the instructions to fix any remaining issues. Finally, update your existing Homebrew applications by running the brew upgrade command.

Watch out : changing the permissions of the /usr/local directory can prevent MySQL from starting up. If you get the error message “Warning the user/local/mysql/data directory is not owned by the mysql user”, run the following commands to fix this :

sudo chown -RL root:mysql /usr/local/mysql sudo chown -RL mysql:mysql /usr/local/mysql/data sudo /usr/local/mysql/support-files/mysql.server start

Configuring Apache

Mac OS X El Capitan comes with a local web server, Apache. To start or restart Apache web sharing, run the following commands from the command line :

sudo apachectl start sudo apachectl restart

To see if the web server is working check http://localhost in the browser. If you don’t see the “It Works !” text, you can troubleshoot your environment by running :

apachectl configtest

The default document root for the http://localhost website is located at /Library/WebServer/Documents/. In previous versions of the OS there was also a website for every user of the computer. The URL had the form http://localhost/~username and the document root was located at the ~/Sites directory. If you want to enable this feature again, follow the instructions on this page.

You will probably have to change the main Apache configuration file to make sure that everything works as before. Edit the /etc/apache2/httpd.conf file and make sure the following modules are uncommented :

LoadModule include_module libexec/apache2/mod_include.so LoadModule rewrite_module libexec/apache2/mod_rewrite.so LoadModule php5_module libexec/apache2/libphp5.so

This last module allows PHP to run. Save the changes and restart Apache so that the changes are taken into account :

sudo apachectl restart

Configuring PHP

Mac OS X El Capitan comes with version 5.5 of PHP. In the previous section we activated PHP by changing the Apache httpd.conf file.

You can test PHP by creating the file phpinfo.php in your document root with the contents <?php phpinfo(); ?> and by viewing it in your browser : http://localhost/phpinfo.php.

It is recommended to configure your PHP installation : copy the /etc/php.ini.default file and save it as /etc/php.ini.

Make the necessary changes to this configuration file (i.e. memory_limit, post_max_size, upload_max_filesize, display_errors, etc.) At the very least, you should define your timezone in this configuration file :

date.timezone = 'Europe/Paris'

Do not forget to restart Apache after changing your PHP configuration file :

sudo apachectl restart

Installing a PHP extension

For one of my projects I need the APCu PHP extension. To install this extension on OS X El Capitan, take the following steps :

disable SIP (see above)

run xcode-select --install to install the Xcode Command Line Tools (see above)

Install PEAR and PECL by downloading the go-pear.phar file and running the php -d detect_unicode=0 go-pear.pharcommand. During installation choose /usr/local/php/pear as the base directory. After installation add /usr/local/php/pear/bin to your shell include path and /usr/local/php/pear/share/pear to your PHP include path by adding the following line to the php.ini file :

include_path = ".:/usr/local/php/pear/share/pear"

Install Autoconf and PCRE, using Homebrew :

brew install autoconf brew install pcre

Install APCu for PHP 5.5 with PECL :

sudo pecl install apcu-4.0.10

OR install APCu for PHP 5.6 with PECL :

sudo pecl install apcu-4.0.11

Update the php.ini file to instruct PHP to use the APCu extension :

extension="apcu.so"

Restart Apache :

sudo apachectl restart

enable SIP again (see above)

G-Design has launched Australia2day.

Some tips for checking and unchecking a list of multiple check boxes in a form during your Laravel 5.1 integration testing.

<input name="multi_cb[]" type="checkbox" value="1"> <input name="multi_cb[]" type="checkbox" value="2"> <input name="multi_cb[]" type="checkbox" value="3">

If you have multiple check boxes in your HTML using an array-style name, you can interact with them in 2 different ways.

If you only have to check certain checkboxes, you can submit the form with an array of the post values.

use the submitForm method with the name of the submit button as the first argument and the post values of the form as the second argument.

make sure to define the key and value of the selected check boxes in your post array.

$this->submitForm('SUBMIT', [ 'title' => 'My Title', 'multi_cb' => [0 => 1, 2 => 3] ]);

If you have to check and uncheck certain checkboxes, you can make use of the underlying Symfony Dom Crawler and follow these steps :

reference the form by the text on the submit button

tick or untick the different check boxes

submit the form

Laravel 5.1 includes powerful tools to do simple integration testing. This new implementation is based upon Jeffrey Way’s Integrated package.

Laravel provides a very fluent API for making HTTP requests to your application, examining the output, and even filling out forms.

Every PHPUnit test file you write that extends the included TestCase can use simple instructions like visit(), click() and see() to make sure everything works as intended.

There is just one simple test missing that I use regularly when writing integration tests. I would like to be able to count certain elements on a webpage.

I want to make sure that the right number of articles are displayed on the page.

I want to check if the correct number of links are displayed in the sidebar.

If you would like to have a method during integration testing for counting certain elements on a webpage, follow these steps.

Add this method to your /tests/TestCase.php file :

/** * Verify the number of dom elements * @param string $selector the dom selector (jquery style) * @param int $number how many elements should be present in the dom * @return $this */ public function countElements($selector, $number) { $this->assertCount($number, $this->crawler->filter($selector)); return $this; }

Now you can count elements in your test files by using the countElements method. This method takes two parameters. The first one is a jQuery-style selector of the DOM elements you wish to find. The second one is the number of elements the page should contain.

Example :

/** @test */ public function it_shows_all_elements_of_the_blog() { $this->visit('/blog') ->see('Welcome to my blog') ->countElements('article', 5) ->countElements('.sidebar .blogroll a', 7); }

The latest version of Kirby Project Hub allows you to publish an RSS feed for every project in your client area.

In the admin panel you can choose for every project if you wish to enable the RSS feed. If you choose yes, a button for the RSS feed will display below the timeline. Every RSS feed is public, even when a project is password-protected.

This will allow you and your clients to be kept automatically up to date with an ongoing project and it opens the door for developers who wish to integrate Kirby Project Hub with other tools.

Integrating Kirby Project Hub with other tools

By publishing an RSS feed for a project, you can re-use the content of your project timelines in different ways. Here are some examples of possible integrations :

Display the latest project updates on a Wordpress site by using an RSS widget or plugin. The RSS widget displays posts from any RSS feed. You might find this handy if you want to show off one of your project timelines in the sidebar of your Wordpress website.

Display the latest project news on the Wordpress administration dashboard. The dashboard widgets WordPress Blog and Other WordPress News can be configured to show your selected feeds. Click on configure and fill out the Title, the RSS feed URL and the other options to show the latest information from your Kirby Project Hub in the Wordpress Administration.

Send an email every time an item gets added to a project hub. You can use online tools like IFTTT and Zapier to execute several interesting actions every time a new item appears in your RSS feed. You can send an email, post to Twitter or Facebook, post to Campfire or Slack, etc.

I am honored to be the first european guest on The Grumpy Developer Podcast

Check out this great podcast for all web professionals, whether you’re a developer, designer, UX or product manager.

I store all important tasks and information regarding my professional projects and personal duties in Trello boards.

Trello allows you to search across all boards and you can save a search for later on their website, but I would like a quick an native way to retrieve my important tasks on my Mac.

So I created an Alfred workflow to get direct access to my urgent Trello cards. This workflow allows you to retrieve cards by list name or by due date across all Trello boards.

click here to download the workflow

Configuration

First you have to give the Alfred workflow access to your Trello boards. To do this you have to copy your personal Trello token by following these steps :

bring up Alfred

use the getkey command to open a Trello webpage

click on the “Allow” button

copy the token that is displayed on screen

use the savekey command followed by the token you copied to save this key to a configuration file

You can now use the workflow to display your important Trello tasks.

Usage

The Trello Next workflow has three commands you can use to display your important Trello cards in Alfred.

list

If you save all your upcoming tasks across your Trello boards in a list with the same name, you can retrieve the cards on these lists with the list command.

Bring up Alfred, type the list command followed by the name of the list. i.e. list next

This command will retrieve all cards in lists with this name and if you select a Trello card, the card will display in your browser.

due

If you give due dates to all your important tasks, you can retrieve your cards by due date with the due command.

Bring up Alfred, type the due command followed by the due date search term. You can choose between day, week, month and overdue. i.e. due week

This command will retrieve all cards across all boards filtered by your due date search term and if you select a Trello card, the card will display in your browser.

next

The next command quickly retrieves your most important Trello cards according to your preferences.

You can specify what Trello cards are important to you, by changing the Alfred workflow. By default the next command shows all cards in “next” lists.

Open the Alfred preferences window, go to the “Workflows” tab and select the “Trello Next” workflow. Click on the “next” Script Filter and change the script according to you wishes.

Specify the name of the list (across all boards) that you want to load or leave the configuration option blank if you do not wish to filter by list.

specify a due date search term for the cards you wish to load (the options are ‘day’, ‘week’, ‘month’ or ‘overdue’) or leave the configuration option blank if you do not wish to filter by due date.

click here to download the workflow

update 1.1 : sort by board name

When designing or developing I regularly need some fake data : a name, an email address, a credit card number, some dummy text, etc.

Laravel development has introduced me to the wonderful Faker package by Francois Zaninotto. I used this PHP package to create an Alfred workflow for those moments when I quickly need some fake data.

click here to download the workflow

Usage

Once you have installed the workflow, you can generate fake data by bringing up Alfred and typing the faker command followed by the type of fake data you wish to generate. i.e. faker name

The generated data displays in a notification and is copied to the clipboard.

The Faker package allows you to generate many types of different data. Here are some examples :

word, sentence, paragraph, text, …

name, firstname, firstNameMale, firstNameFemale, lastName, …

address, postcode, city, latitude, longitude, …

phonenumber

date, month, year, …

email, safeEmail, username, password, url, …

creditCardType, creditCardNumber, …

You can find the full list on the Faker github page.

Configuration

You can change the locale used by Faker for generating localized data. If no localized provider is found, the factory fallbacks to the default locale (en_EN).

To change the locale, bring up Alfred and type the fakerlocale command followed by the locale of your choice. i.e. fakerlocale fr_FR

You can check available Faker locales on the github page, under the Provider directory.

Although Kirby Project Hub is built with smaller freelance projects in mind, it is flexible enough to be used as a project management solution for bigger projects.

Let’s take a look at a concrete example.

First, you have to create a user account for your client. He will be able to access the client area using the username and password you choose.

If you have to manage a big project, you can split it up in multiple stages and you can create a different project for each stage. i.e. a project for the design of the visual identity and a project for the development of the website.

When the client connects to the client area, he will see a list of the projects (or project stages) you created for him.

When creating different projects for every project stage, make sure to give them the same description so that the client can see that they all belong to the same overall project.

Now it is time to add the content to every project. Every project displays a timeline and can also link to stand-alone pages with general information.

You can add as much items to the timeline as you want. You can add items for every deliverable, for every major discussion or decision that takes place, etc.

When adding a timeline item, you can add a link to more information. You can add a link to a content page, a link to an external webpage or a link to a downloadable file.

In addition to the timeline, you can also add stand-alone pages to a project. Buttons will show up above the timeline that link to these pages. These stand-alone pages are especially handy for todo-lists and general administrative information.

Every content page you link to from the timeline and every standalone page you create can contain text, github style task lists, images, videos and files. Learn more about formatting text, adding images, etc.

Wanting to offer a trial version of my simple project management solution for freelancers, but not wanting to handle the requests and follow up manually, I used some great online solutions to set up an automatic workflow.

It is rather stunning how much can be done with the existing online tools. Let me walk you through the process.

The first step is creating a webpage and adding a Google Form to this page so that visitors can request a trial version by submitting the form.

The second step is creating a Mailchimp list for the trial users. If you already have a list, you can also add a special group for the trial users to an existing Mailchimp list. (this is the recommended method)

The next step is using Zapier to automatically add every user who submits the Google form to the Mailchimp list or group.

At this stage every person who requests a trial version of the software gets added to the right Mailchimp list. Now we are going to use Mailchimp automation to send an email with a link to the trial version of the software.

When you create a new automation workflow, you have to select the relevant list and the workflow that suits your situation. If you created a new Mailchimp list, select “welcome message”. If you are using an existing list and created a new group for your trial user, select “Joins list group”.

The final steps are configuring the workflow and building the email that will be send to every subscriber.

Make sure to check the “Trigger workflow when subscribers are imported” checkbox on the “Configure Trigger” page.

On the “Add email to workflow” page you can design the email you will send to the subscribers and you can define the delay between the subscription and sending the email. (i.e. 1 day, 1 hour, …)

When designing your email, you can include a button that links to a file, hosted by Mailchimp.

Je suis un designer et développeur web et, comme tous les freelance, une partie importante de mon travail consiste à tenir mes clients informés du progrès des projets en cours les concernant.

J’ai testé un certain nombre d’outils de gestion de projets en ligne, par exemple Basecamp et Asana, mais j’ai remarqué que ces solutions, parfaites pour le travail d’équipe, ne convenaient pas pour présenter l’évolution d’un projet à mes clients.

J’ai donc développé un outil web intuitif permettant de montrer les étapes clés d’un projet de manière chronologique à mes clients.

Cet espace client simple, appelé Kirby Project Hub, peut être utilisé en tant que site web autonome ou comme espace client d’un site web existant.

Un site web pour vos clients

Vous pouvez mettre en place un site dédié à vos clients de deux manières différentes.

Vous pouvez réserver un nom de domaine auprès de votre fournisseur d’hébergement favori. Choisissez un nom de domaine adapté, par exemple i-love-my-clients.com, et téléchargez les fichiers du Kirby Project Hub vers votre espace d’hébergement.

Si vous disposez déjà d’un nom de domaine, vous pouvez également héberger votre espace client en utilisant un sous-domaine. Les sous-domaines permettent de séparer différentes sections de votre site. Par exemple, je suis propriétaire du nom de domaine g-design.net, je peux donc configurer le sous-domaine clients.g-design.net et héberger mon espace client à cette adresse web. Si l’espace d’administration de votre fournisseur d’hébergement ne permet pas la création d’un sous-domaine, contactez-le pour demander comment mettre en place un sous-domaine de votre site internet.

Après avoir transféré les fichiers et dossiers du Kirby Project Hub sur votre serveur, vous pouvez visiter la page yourdomain.com/panel pour commencer l’installation de Kirby et créer votre premier compte utilisateur.

Consultez la page de documentation pour plus de détails sur l’utilisation de l’outil.

Ajouter un espace client à un site Wordpress

Si vous avez déjà un site web Wordpress, vous pouvez facilement ajouter un espace client à votre site.

Créez un nouveau dossier dans le site Wordpress, par exemple clients et téléchargez tous les fichiers du Kirby Project Hub dans ce nouveau dossier. N’oubliez pas de copier le fichier invisible .htaccess !

Vos clients peuvent maintenant consulter l’espace client de votre site en allant à yourdomain.com/clients et vous pouvez administrer cet espace en visitant yourdomain.com/clients/panel.

Vous pouvez ajouter un lien vers l’espace client à partir du site Wordpress. Créez un menu avec un lien personnalisé et ajoutez ce menu en tant que widget à vos pages.

I believe that one of the most important parts of a web developer’s job is keeping their clients informed of a project’s progress.

I have tried several online project management solutions, like Basecamp and Asana, but I found that my clients don’t want a project management solution built for teamwork.

So I developed a Kirby 2 theme that will show my clients a simple timeline of the key events during the life of a project.

Add a client area to an existing website

If you already have a website, for example a Kirby powered website using one of the great Kirby Themes provided by getkirby-themes.com, you can add Kirby Project Hub as a client area to this existing website.

If you are a brave developer, you can try to integrate 2 Kirby themes by copying all the files and folders from the assets, content and site folders from the new theme to the same folders in your main website. However, it is very likely that there will be a conflict because the two themes use the same filename for a template file or a content folder.

The easiest solution is to create a new folder in your Kirby site, i.e. clients, and upload all the files and folders of Kirby Project Hub to this folder. (Do not forget to copy the invisible .htaccess file !)

This way, you will host 2 independent Kirby projects on your server.

Your clients can now visit the client area of your website by going to yourdomain.com/clients and you can administer Kirby Project Hub by visiting yourdomain.com/clients/panel.

You can now add a link to the client area from your existing website.

If the Kirby theme you are using displays by default all the visible pages in the main navigation of your website, you can add a link to your client area by taking the following steps :

create a new page

give it the name of your subfolder as URL-appendix (i.e. clients)

save the page and make it visible

Alternatively, you can change the template of your main Kirby Theme and add a link to the client area manually. Usually you can find the code for the main navigation of your Kirby theme in a file called “header” or “menu” in the site/snippets folder.

I have been working for more than 10 years on my clients’ web projects. I believe that one of the most important parts of my job is keeping my clients informed of a project’s progress. I have tried several online project management solutions, but they didn’t fit the needs of my clients.

I came to the conclusion that my clients required a more intuitive solution. So I built a simple online tool that shows my clients a simple timeline of the key events during the life of a project.

This simple client area, Kirby Project Hub, can be used in different ways. You can use it as a stand-alone website or as the client area of an existing website.

A stand-alone website for your clients

You can set up a special website for your clients.

There are 2 ways to go about this.

You can visit your favorite domain name registrar and reserve a new domain name for this purpose. Register a domain name that makes sense, i.e. i-love-my-clients.com, and upload the Kirby Project Hub files to your hosting account.

If you already own a domain name, you can also host your client area at a subdomain. Subdomains can be used to separate different areas of your site, for example, I own the g-design.net domain name so I can set up the clients.g-design.net subdomain and host my client area as an independent website at this web address. If the control panel of your website does not allow the creation of subdomains, ask your hosting service provider how you can set up a subdomain for your website.

After uploading all files and folder to your server, visit yourdomain.com/panel to start Kirby’s installer and create the first user account.

Visit the documentation page to learn how to use Kirby Project Hub.

Add a client area to a Wordpress site

If you already have a website, for example a Wordpress site, you can add a client area to this existing website.

Create a new folder in your Wordpress site, i.e. clients, and upload all the files and folders of Kirby Project Hub to this folder. (Do not forget to copy the invisible .htaccess file !)

Your clients can now visit the client area of your website by going to yourdomain.com/clients and you can administer Kirby Project Hub by visiting yourdomain.com/clients/panel and create the first admin user account.

You can add a link to the client area to your Wordpress site from the administration section by creating a menu with a custom link and adding this menu as a widget to your pages.

A similar approach should work with most existing websites.