Useful Docker commands

Start services listed in docker-compose.yml file for the first time

docker-compose up -d

Stop services listed in docker-compose.yml

docker-compose stop

Subsequently start services listed in docker-compose.yml file

docker-compose start

Clean up services listed in docker-compose.yml file

docker system prune

Bring up all services listed in docker-compose.yml file

docker-compose up

Bring up "node" service listed in docker-compose.yml file

docker-compose up node

Clean up all services listed in docker-compose.yml file

docker-compose rm -f

Rebuild your services on restart

docker-compose up -d --force-recreate --build

Log into a container named webserver

docker exec -it webserver /bin/bash

Provide information about the running container "ubuntu".

docker inspect ubuntu

Look for containers

docker container ls
This will give you a list of CONTAINER ID's.

Remove containers

docker container rm -f <CONTAINER ID>

Look for images

docker images
This will give you a list of IMAGE ID's.

Remove containers

docker rmi -f <IMAGE ID>

Look for volumes

docker volume ls
This will give you a list of VOLUME NAME's.

Remove volumes

docker volume rm -f <VOLUME NAME>

Why use PhpStorm over Atom

I'm just about to do a lot more work with PHP and I will be using PhpStorm. What's so good about PhpStorm. Below are a few examples.

Working with scratch files

New->New scratch file : Creates a file without yet including it in your project.

Refactoring

Select the variable you want to refactor.
Right-click->Refactor->Rename.
All occurrences of the variable will be renamed.

Search everything in your project

Tap the Shift button twice.

Version control

If you already have a repository, one of the options on the PhpStorm welcome screen is 'Check out from version control'. Here you can select your repository type. You will then be asked for the repository location and PhpStorm will load with your repository.
Let's assume your project uses git or Bitbucket.
When you add code to your project a new tab appears at the bottom-left of PhpStorm titled 'Version Control'. This allows you to track, stage, and commit changes.

Databases

When you open up a project which contains a database connection you can work with the database.
A tab appears at the top-right of PhpStorm titled 'Databases'. From here you can click on the '+' button and add a new connection, if the connection has not already been made.
Once the connection has been established, the 'Databases' window shows the database structue, but you also have a console window into which you can add queries such as SELECT * FROM country.
When the query results are displayed in the console, it's possible to edit the data returned.

Vagrant

First set Vagrant up in your project
Tools->Vagrant->Init in Project Root
If Vagrant is not set up on your computer a dialogue box appears asking you for configuration details of Vagrant.
If Vagrant is set up on your computer a dialogue box appears asking you for your chose Vagrant instance.
Once Vagrant has been set up you can move 'Remote Host', find a file, right-click and select 'Edit remote file'.

REST

In your project you can test RESTful web API's for your project before you add the code.
Tools->HTTP Client->Test RESTful Web Service

Emmet built in

Type a tag name followed by TAB
e.g. html:5
e.g. html>head+body

Using Windoze for the first time in years

I'm having to use Microsoft Windows 10 for some work. I haven't touched Windows since XP. Here are some things which I thought would be useful.

The 'Start menu' is that ugly stuff at the bottom left which appears when you click on the Windows icon. It may look bad now, but when Microsoft brought out Vista etc, things looked so much worse.

Pin an application to the start menu

Left click on the Windows icon at the bottom left of the desktop. This shows the Windows 10 primary start menu ('Start menu').
Find your application shortcut by going through the alphabetically ordered list in the 'Start menu'.
Right click on your chosen shortcut.
Choose 'Pin to start menu'.

Remove an application from the start menu

Left click on the windows icon at the bottom left of the desktop. This shows the 'Start menu'.
Find your application shortcut icon within the 'Start menu' on the right.
Right click the icon and choose 'Unpin from start'.

Pin an application to the taskbar

Left click on the windows icon at the bottom left of the desktop. This shows the 'Start menu'.
Find your application shortcut by going through the alphabetically ordered list in the 'Start menu'.
Right click on your chosen shortcut.
Choose 'More' -> 'Pin to taskbar'.

Settings

Left click on the primary 'Start menu'.
To the far left are a small number of small icons.
Choose 'Settings'.

Notifications

Left click on the primary 'Start menu'.
To the far left are a small number of small icons.
Choose 'Settings'.
Choose 'Notifications & actions'.
Turn off some of those pesky apps which send you notifications when you're trying to work.

Keyboard shortcuts

Alt + Tab : Switch between open apps
Alt + F4 : Close the active item, or exit the active app
Windows logo key  + L : Lock your PC
F10 : Activate the Menu bar in the active app
Ctrl + Esc : Open Start
Ctrl + Shift + Esc : Open Task Manager
Esc : Stop or leave the current task
Windows logo key  + E : Open File Explorer
Windows logo key  + I : Open Settings

Vanilla JavaScript Grid navigation

I have created a Vanilla JavaScript Grid navigation. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/vanilla-js-grid-navigation
It employs ES6, BEM and SASS.

logotext

This module offers 2 options:

• A logo with text to the right.
• A logo with text underneath

The module was created to make logo based header elements more SEO friendly. The logo is itself a background and the text resides in a H1 tag.

The SCSS uses the BEM approach and resides at https://github.com/guitarbeerchocolate/logotext

Forked from https://github.com/guitarbeerchocolate/vanilla-js-component

Yii use and namespace

use

Standard Yii

This is a keyword which is used to make functionality available to the current class.
E.g. If you add line below
use yii\db\ActiveRecord;
You will be able to create a new ActiveRecord such as
$ar = new ActiveRecord();
Or to create a class which is an extension of an ActiveRecord such as
class Customer extends ActiveRecord
{
}

Your Yii custom components

E.g. If you add line below
use app\models\Customer;
You will be able to add functionality which has been created for this application. In this case a model was created called 'Customer'. From here you can such functionality to your current class as
$query = Customer::find();

namespace

The namespace allows you to create a structured naming convention to retrieve the class you are currently working on.
E.g. If you add lines below
namespace app\models;
use yii\db\ActiveRecord;
class Customer extends ActiveRecord
{
}
This will allow you at a later date to 'use' this class thus
use app\models\Customer;

Yii database model

This is partly based on the documentation found at https://www.yiiframework.com/doc/guide/2.0/en/start-databases

ActiveRecord

If you're going to work with records using Yii, it's helpful to make use of the ActiveRecord class. In this example, we're working with a database of country data.  Thankfully, this is a simple scenario which requires the creation of a simple class. Just add this as models/Country.php
<?php
namespace app\models;
use yii\db\ActiveRecord;
class Country extends ActiveRecord
{
}

Controller

Next we need to create a controller which we can use to pass data from the Country ActiveRecord model to a view. In this case, we're also going to add some pagination functionality, which we'll also pass to the view.

1. First we create a $query object which will be used to retrieve the data.
2. Next we create a $pagination object which will be used to control the display of that data.
3. Next we get all the data we want.
4. Finally we pass the data and pagination objects to the view.

We save this class as controllers/CountryController.php

<?php
namespace app\controllers;
use yii\web\Controller;
use yii\data\Pagination;
use app\models\Country;
class CountryController extends Controller
{
    public function actionIndex()
    {
        $query = Country::find();
        $pagination = new Pagination([
            'defaultPageSize' => 5,
            'totalCount' => $query->count(),
        ]);

        $countries = $query->orderBy('name')
            ->offset($pagination->offset)
            ->limit($pagination->limit)
            ->all();

        return $this->render('index', [
            'countries' => $countries,
            'pagination' => $pagination,
        ]);
    }
}

View

The view performs 3 tasks in this process:
Loops through the data, adding it to the page.
Adding the pagination object to that the data can be paged through.
Adding the LinkPager widget object to the pagination object to automatically create all those links, saving us a bunch of coding.
We'll put the view in the directory views/country/index.php

<?php
use yii\helpers\Html;
use yii\widgets\LinkPager;
?>
<h1>Countries</h1>
<ul>
<?php foreach ($countries as $country): ?>
    <li>
        <?php echo Html::encode("{$country->code} ({$country->name})"); ?>:
        <?php echo $country->population; ?>
    </li>
<?php endforeach; ?>
</ul>
<?php echo LinkPager::widget(['pagination' => $pagination]); ?>