Install the latest version of Composer on Ubuntu

If you have previously installed composer with command...

sudo apt-get install composer

...it is recommended to uninstall it first. Run the command:

sudo apt-get purge --auto-remove composer

 

Let's install the latest version now. Go to whatever directory you like and follow the instructions for Command-line installation on the official Composer website: https://getcomposer.org/download/

After you run the four commands (copy, verify, install, remove), you should end up with a single file named composer.phar.

All you have to do now is move this file to the appropriate directory with a command:

sudo mv composer.phar /usr/local/bin/composer

Try running this command anywhere...

composer -V

...and you should see the latest version of your freshly installed Composer.

 

Running composer might display this error message (where [user] is your username):

Cannot create cache directory /home/[user]/.composer/cache/repo/https---packagist.org/, or directory is not writable.
Proceeding without cache
Cannot create cache directory /home/[user]/.composer/cache/files/, or directory is not writable.
Proceeding without cache

Set the permissions with these commands (where [user] is your username):

cd ~
 sudo chown [user]:[user] .composer -R

How to remove old kernel versions on Ubuntu Server

It is recommended to remove old kernel version to clean up the boot menu and to get some extra disk space.

1. Check which kernel version you're using:

uname -r

2. List all installed kernels and headers on your system:

dpkg -l | grep linux-image
dpkg -l | grep linux-headers

3. If you're not using the latest kernel version, try rebooting your system first.

4. You can remove old kernel versions automatically:

sudo apt-get autoremove

5.a. Or you can remove them manually one by one:

sudo apt-get purge linux-image-x.x.x.x-generic

Be sure, NOT to remove the version you're using! 

It is also recommended to leave the previous version on your system.

5.b. When you're done, update your Grub:

sudo update-grub2 

6. Reboot your system.

Awesome Laravel packages

Disk Space and Partitions on Linux and UNIX-like systems

Disk Space

We can check out free disk space on a Linux system with the command:

df -h

or

df -k

These commands are great for checking overall disk space usage, but since we usually want to check which folder (or file) occupies the most disk space, we can run the command:

du -sh * | sort -hr

The first part of the command (left side of the pipe) will return the list of files and folders with corresponding disk usage values.

The second part (right side of the pipe) will sort the results by size (disk space usage) and will put the largest sizes on the top of the list. If you want the largest sizes on the bottom, just remove the 'r' parameter (r - reverse).

This command will list only the files and folders in the path where you are located, when running this command.

A suggestion:

Run the command, then 'cd' into the largest directory and run the command again. By doing that a few times, you will most likely find the source of your largest files and directories.

 

Disk Partitions

List all partitions and check their size:

sudo fdisk -l /dev/sda

Open Linux partition editor in terminal:

sudo cfdisk

Javascript: Revealing Module Pattern

An example of how to use the Revealing Module Pattern:

var RevealingModuleExample = (function () {
 
        var privateVar = "Jane Doe",
            publicVar = "Hello World!";
 
        function privateFunction() {
            console.log("Name:" + privateVar);
        }
 
        function publicSetName(strName) {
            privateVar = strName;
        }
 
        function publicGetName() {
            privateFunction();
        }
 
        // Reveal public pointers to private functions and properties
        return {
            setName: publicSetName,
            greeting: publicVar,
            getName: publicGetName
        };
 
})();
 
RevealingModuleExample.setName( "John Doe" );

The pattern can also be used to reveal private functions and properties with a more specific naming scheme:

var RevealingModuleExample = (function () {
 
        var privateCounter = 0;
 
        function privateFunction() {
            privateCounter++;
        }
 
        function publicFunction() {
            publicIncrement();
        }
 
        function publicIncrement() {
            privateFunction();
        }
 
        function publicGetCount(){
          return privateCounter;
        }
 
        // Reveal public pointers to private functions and properties
       return {
            start: publicFunction,
            increment: publicIncrement,
            count: publicGetCount
        };
 
})();
 
RevealingModuleExample.start();

Source: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript (Author: Addy Osmani)

Rsync - copy multiple files from one server to another

Rsync is a file transfer program capable of efficient remote update via a fast differencing algorithm.

Rsync utility is commonly found on Unix-like systems and is used to minimize network usage while copying (or synchronizing) files from one server to another.

If you have SSH access to your server you can use rsync instead of traditional FTP method.

How to use rsync?

Let's say, that you want to copy files from server Master to server Slave. You must have SSH access to both servers.

  1. SSH to your Master server (How-to guide here)

  2. Enter the command:
    rsync -a /path/to/your/files/ slave@192.168.1.100:/path/to/where/you/want/to/copy/the/files
    Be sure to use your own username and IP instead of slave@192.168.1.100.

  3. You're done, the files are copied now.

Parameter '-a' explained

Parameter -a (or --archive) is 'archive mode' and is equal to -rlptgoD

-r, --recursive recurse into directories
-l, --links copy symlinks as symlinks
-p keep partially transferred files & show progress during transfer
-t, --times preserve modification times
-g, --group preserve group
-o, --owner preserve owner (super-user only)
-D preserve device files (super-user only) & preserve special files

Upgrade Gulp to v4

1. First you need to install gulp 4 globally

npm rm -g gulp
npm install -g gulp-cli

Check gulp version

gulp -v

You should see this:

CLI version 1.2.1

2. Now you have to install gulp 4 locally in your project folder

cd /your_project_folder
npm uninstall gulp --save-dev
npm install 'gulpjs/gulp.git#4.0' --save-dev

Check gulp version again

gulp -v

And you should see

CLI version 1.2.1
Local version 4.0.0-alpha.2

Git - Part 9: Remote repository on GitHub

1. When logged in to GitHub, click green button "New repository"

2. Choose repository name, enter description and click "Create repository"

3. Now you have two options: create a new repository on the command line or push an existing repository on the command line

New repository on the command line

Use this option, if you doesn't have an existing local repository initialized.

echo "# Some text" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:username/repository.git
git push -u origin master

Push an existing repository from the command line

Use this option, if you already have an existing local repository initialized and you want to push it to GitHub.

git remote add origin git@github.com:username/repository.git
git push -u origin master

Cloning remote repositories

Clone remote repository to a specific folder

git clone git@github.com:username/repository.git someFolderPath

Clone remote repository to a folder with the same name as repository

git clone git@github.com:username/repository.git someDirectoryPath

Remote branching

Checkout (or create) some local branch

git checkout feature-branch

Push branch to a remote repository

git push origin feature-branch

Delete remote branch

git push origin :feature-branch

OR

git push origin --delete feature-branch

Git - Part 8: Connect to GitHub via SSH protocol

1. On your Windows machine I suggest installing Cmder console emulator, visit http://cmder.net/ and then download and install the Full package (with git-for-windows)

2. Open Cmder or other console software on your Windows machine, navigate to root directory, create .ssh directory and enter it

cd ~
mkdir .ssh
cd .ssh

3. Create SSH key pair id_rsa & id_rsa.pub (-t is type, -b is bytes, -f is filename)

ssh-keygen -t rsa -b 4096 -f id_rsa -C "email@domain.com"

When prompted for password, just hit Enter key - do not enter the password.

4. Display the public key on the screen, select the printed text and copy it to clipboard

cat id_rsa.pub

5. Open GitHub website (www.github.com) and login with your account

6. Navigate to Settings / SSH and GPG keys

7. Click "New SSH key" button on the top right corner

8. Enter title (can be anything you want), paste previously copied public key to the "Key" text area and click "Add SSH key"

9. Go back to Cmder (or any other console emulator) and enter

ssh -T git@github.com

10. Enter 'yes' when you get prompted with: Are you sure you want to continue connecting (yes/no)?

That's it. Now you do not have to enter your password every time when you push your code to GitHub.

Git - Part 7: Stash away changes

Stash away changes

git stash

Check stash list

git stash list

Apply the most recent stash and leave it on the list

git stash apply

Apply specific stash and leave it on the list

git stash apply stash@{0}

Apply the most recent stash and clear it from the list

git stash pop

Apply specific stash and clear it from the list

git stash pop stash@{0}

Delete the most recent stash from the list

git stash drop

Delete specific stash from the list

git stash drop stash@{0}

Apply stash to a new branch called feature

git stash branch feature

Exercise

  1. Create index.html file with content <h1>Hello World!</h1> and blank test.html file
    touch index.html
    vi index.html
    touch test.html
  2. Add all to staging area and commit to master branch
    git add .
    git commit -m "Initial commit"
  3. Create new branch named 'feature-branch'
    git checkout -b feature-branch
  4. Edit file test.html and add content <h2>This is a test</h2>
    vi test.html
  5. Stash the changes
    git stash
  6. Checkout master branch
    git checkout master
  7. Edit file index.html and change <h1> tags to <h3> tags
    vi index.html
  8. Add and commit changes
    git add .
    git commit -m "Change header tags"
  9. Checkout branch feature-branch
    git checkout feature-branch
  10. Check stash list
    git stash list
  11. Apply stash with 'pop' command
    git stash pop
  12. Add and commit changes to feature-branch
    git add .
    git commit -m "Changes applied"
  13. Checkout master branch and merge feature-branch
    git checkout master
    git merge feature-branch

Git - Part 6: Handling Merge Conflicts

Creating conflict and merging branches

git checkout master
git merge feature-branch

Notice on conflicts
Automatic merge failed; fix conflicts and then commit the result.

Show merge conflicts

git diff path/to/file.ext

Merge conflict example

<<<<<<< HEAD
Content on current branch (master)
=======
Content on merged branch (feature-branch)
>>>>>>> feature-branch

Exercise

  1. Create Git repository, add and commit file index.html with content <h1>Hello world!</h1>
    git init
    touch index.html
    vi index.html
    git add index.html
    git commit -m "Initial commit"
  2. Create a new branch called 'conflict-branch'
    git checkout -b conflict-branch
  3. Edit index.html file and change h1 tags to h2
    vi index.html
  4. Add and Commit to conflict-branch branch with a message "Change h1 to h2"
    git add .
    git commit -m "Change h1 to h2"
  5. Checkout master branch
    git checkout master
  6. Edit index.html file and change h2 tags to h3
    vi index.html
  7. Add and Commit to master branch with a message "Change h1 to h3"
    git add .
    git commit -m "Change h1 to h3"
  8. Merge conflict-branch (see: CONFLICT; Automatic merge failed;)
    git merge conflict-branch
  9. Check Git status (see: both modified: index.html)
    git status
  10. Edit index.html file and fix conflicts; change:
    <<<<<<< HEAD
    <h3>Hello World!</h3>
    =======
    <h2>Hello World!</h2>
    >>>>>>> conflict-branch
    To:
    <h2>Hello World!</h2>
  11. Add and Commit to master branch with a message "Fix conflicts"
    git add .
    git commit -m "Fix conflicts"
  12. Check Git log (see: all commits)
    git log --oneline

Git - Part 5: Branching

Create and checkout a new branch

git checkout -b feature-branch

Checkout existing branch (eg. master)

git checkout master

List all branches

git show-branch --list

Merge changes from feature branch

git merge feature-branch

Delete feature branch

git branch -d feature-branch

Exercise

  1. Create new file index.html and add some content
    touch index.html
  2. Add index.html to the staging area and commit to master branch
    git add index.html
    git commit -m "Initial commit"
  3. Create new Git branch called 'feature-branch'
    git checkout -b feature-branch
  4. Create file feature.html and add some content
    touch feature.html
  5. Add and Commit all to this branch with message "Work on branch"
    git add --all
    git commit -m "Work on branch"
  6. Checout master branch
    git checkout master
  7. Merge changes from feature-branch
    git merge feature-branch
  8. Delete feature-branch
    git branch -d feature-branch
  9. Check branch list (see: only master branch)
    git show-branch --list
  10. Check git log (see: both commits)
    git log

Git - Part 4: Fixing and Amending commits

Soft reset - resets to the previous state, but leaves your changes

git reset --soft UniqueHash

Hard reset - resets everything to the previous state, deletes your changes

git reset --hard UniqueHash

Amend commit - saves changes to the same previous commit

git commit --amend

Exercise: fixing commit

  1. Create new Git repository
    git init
  2. Create a new file index.html with content "Hello Wrold!"
    touch index.html
    vi index.html
  3. Add and Commit index.html file with message "Initial commit"
    git add index.html
    git commit -m "Initial commit"
  4. Check git status (see: On branch master nothing to commit, working directory clean)
    git status
  5. Check git log (see:Initial commit)
    git log --oneline
  6. Open index.html and change text to "Hello World!"
    vi index.html
  7. Add and Commit index.html file with message "Fix typo"
    git add index.html
    git commit -m "Fix typo"
  8. Check git log (see: both commits)
    git log --oneline

Exercise: amending commit

  1. Check git log and copy UniqueHash from Initial commit
    git log --oneline
  2. Hard reset repository to the initial commit
    git reset --hard UniqueHash
  3. Review index.html and check that the typo is there
    cat index.html
  4. Open index.html and change text to "Hello World!"
    vi index.html
  5. Add index.html to the staging area
    git add index.html
  6. Check git status (see: Changes to be committed: modified: index.html)
    git status
  7. Amend commit
    git commit --amend
  8. Check git log (see: only initial commit)
    git log --oneline
  9. Review index.html and check that the typo is fixed
    cat index.html

Git - Part 3: Status and Log

Check git status

git status

Check git log

git log

One-line git log

git log --pretty=oneline

One-line git log with short hash id's

git log --oneline

Show the latest commit for current branch

git branch -v

Git - Part 2: Repositories

Create a repository

Initialize a new Git repository

git init

Add and Commit to a repository

Stage Single file

git add index.html

Stage Multiple files

git add index.html index2.html

Stage All (new, modified, deleted) files

git add -A

Stage All (new, modified, deleted) files

git add --all

Stage All (new, modified, deleted) files

git add .

Stage Modified and Deleted files only

git add -u

Stage New and Modified files only

git add --ignore-removal .

Commit to repository

git commit -m "This is commit message"

Exercise

  1. Create a new file index.html and add some content
    touch index.html
  2. Add index.html to Git
    git add index.html
  3. Check git status (see: index.html is ready for commit)
    git status
  4. Open index.html and change some of the content
    vi index.html
  5. Check git status (see: previous index.html is still ready for commit; index.html is modified)
    git status
  6. Commit changes
    git commit -m "Initial commit"
  7. Check git status (see: index.html is still modified)
    git status
  8. Add index.html
    git add index.html
  9. Commit index.html
    git commit -m "Content is changed"
  10. Check git status (see: nothing to commit)
    git status
  11. Check git log (see: both commits)
    git log

Git - Part 1: Settings

Global configuration is stored in a file .gitconfig your root (cd ~) folder.

Set your name

git config --global user.name = 'John Doe'

Set your e-mail

git config --global user.email = 'info@yourdomain.com'

Set default editor, which will be used for commit messages, resolving conflicts, etc.

git config --global core.editor vi

OR

git config --global core.editor notepad

Turn off a warning about LF replacement

git config --global core.autocrlf true

Environment setup for Front-end development

What do we need to start modern front-end development? Here's my setup (on Windows machine):

  1. Git for windows
  2. GitHub profile
  3. Cmder - console emulator
  4. Bash setup (.bashrc, .bash_aliases)
  5. Node.js (for npm) - javascript runtime
  6. Gulp - automated task runner
  7. Brackets - coding editor

That's it. Let's see how to install and configure this awesome open-source software!


1. Git for Windows

  1. Visit website www.git-scm.com.
  2. Click the "Downloads for Windows" button on the green monitor image.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default, just be sure to select "Use Git from the Windows Command Prompt" and "Checkout Windows-style, commit Unix-style line endings" options when prompted.

2. GitHub profile

  1. Visit website www.github.com.
  2. Choose your username, email and password.
  3. Click "Sign up for GitHub".
  4. When welcome page is displayed, click "Finish sign up" button.
  5. Check your inbox and verify your email addres (click on the link).
  6. I suggest connecting to GitHub via SSH protocol, for which you can follow these instructions: http://www.numencode.com/post/connect-to-github-via-ssh-protocol/

3. Cmder

  1. Visit website cmder.net and navigate to the Download section.
  2. Download Mini version, because you already have Git for Windows installed.
  3. When you receive ZIP archive, extract it to a Cmder folder inside your "Program Files" on your system disk (eg. C:\Program Files (x86)\Cmder).
  4. Run cmder.exe file and click "Unblock and Continue" when "Warning!" prompt window appears.
  5. Cmder should be running now. Right click the Cmder's titlebar and choose "Settings..." (or press Win - Alt - P) and the settings panel should open.
  6. On the left navigation select "Startup / Tasks" and click "Add default tasks..." button.
  7. On the "Predefined tasks" menu select {Bash::Git bash} and add text '-new_console:d:C:\www' where 'C:\www' is your working projects root folder (can be any folder you want). The whole setting should look like this:
    "%ConEmuDrive%\Program Files\Git\git-cmd.exe" --no-cd
    --command=usr/bin/bash.exe -l -i -new_console:d:C:\www
  8. Now select "Startup" element on the left navigation and select {Bash::Git bash} option on the "Specified named task".
  9. Click "Save settings" on the bottom right corner and you're set to go.

4. Bash setup

  1. Visit https://gist.github.com/numencode/3ce8d0f9b386ab2342ec0a0c2c5ff728 
  2. Download files .bashrc and .bash_aliases to your computer (Click "Raw" button, press Ctrl - S).
  3. Move the two files to your Windows user folder (eg: C:\Users\JohnDoe).
  4. Open file .bash_aliases with text editor and change alias 'www' to your own projects path.
  5. Check other aliases in file .bash_aliases and customize them if you like.
  6. Start Cmder and type any alias to see if it's working. If you go to any Git project folder, you should be able to see Git branch name.

5. Node.js and npm

  1. Visit website www.nodejs.org.
  2. Choose the green "Download for Windows" button - you can choose between a "LTS" (long-term-support) version or the latest one, where I suggest the "Current" one.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default.
  5. Once the installation is completed, open Cmder and test the Node and npm by running commands:
     node -v
    npm -v

6. Gulp - automated task runner

  1. Gulp can be installed with npm.
  2. Open Cmder and run the command
    npm install gulp -g
    which will install gulp globally to your computer.
    You might have to run Cmder as an administrator to take this action!
  3. Test Gulp installation by running command:
     gulp -v
  4. At the moment, version 4.0.0-alpha.2 can be installed locally for your project. I strongly suggest using Gulp4, for which you can follow these instructions: http://www.numencode.com/post/upgrade-gulp-to-v4/

Brackets - coding editor

  1. Visit website www.brackets.io.
  2. Click the link "Download Brackets without Extract" under the big blue Download button.
  3. Run (execute) the installation file, once it downloads to your computer.
  4. During the installation leave everything to default.

Now it's time to install some great plugins for Brackets.

  1. Open Brackets editor and navigate to "File / Extension Manager..."
  2. You will see three tabs on the top (Available, Themes, Installed), choose "Themes" and search for "Coders Theme" which is really great.
  3. There's a lot of useful plugins to choose from on "Available" tab, from which I recommend these:
    • Bootstrap 3 Snippets
    • Bootstrap Skeleton
    • Brackets-Gulp
    • Color Highlighter
    • LESS StyleSheets Formatter (nm|tU)
    • LESSHints
    • Show Git Branch for project
    • Tabs - Custom Working

Cmder - console emulator for Windows

Download and installation

1. Open website cmder.net and navigate to the Download section.

2. You're left with two choices: if you already have Git installed on your Windows machine, download Mini version, otherwise I suggest downloading Full version.

3. When you receive ZIP archive, extract it to a Cmder folder inside your "Program Files" on your system disk (eg. C:\Program Files (x86)\Cmder).

4. Run cmder.exe file and click "Unblock and Continue" when "Warning!" prompt window appears.

5. Cmder should be running now. Let's get ready for some configuration!

Configuration (for Mini version)

1. Right click the Cmder's titlebar and choose "Settings..." (or press Win - Alt - P) and the settings panel should open.

2. On the left navigation select "Startup / Tasks" and click "Add default tasks..." button.

3. On the "Predefined tasks" menu select {Bash::Git bash} and add text '-new_console:d:C:\www' where 'C:\www' is your working projects root folder (can be any folder you want). The whole setting should look like this:

"%ConEmuDrive%\Program Files\Git\git-cmd.exe" --no-cd
--command=usr/bin/bash.exe -l -i -new_console:d:C:\www

4. Now select "Startup" element on the left navigation and select {Bash::Git bash} option on the "Specified named task"

5. Click "Save settings" on the bottom right corner.

Configuration (for Full version)

1. Right click the Cmder's titlebar and choose "Settings..." (or press Win - Alt - P) and the settings panel should open.

2. On the left navigation select "Startup / Tasks" and click "Add default tasks..." button.

3. On the "Predefined tasks" menu select {Git bash} and add text '-new_console:d:C:\www' where 'C:\www' is your working projects root folder (can be any folder you want). The whole setting should look like this:

"%ProgramFiles%\Git\bin\sh.exe" --login -i 
-new_console:d:C:\www

4. Now select "Startup" element on the left navigation and select {Git bash} option on the "Specified named task"

5. Click "Save settings" on the bottom right corner.

← Older posts