I recently wrote a tutorial for DigitalOcean titled How to Manage Front-End JavaScript and CSS Dependencies with Bower on Ubuntu 14.04. You can view the tutorial published on their site, but since their rules allow it, I am posting it in full here also.

Introduction

Long gone are the days when we had to manually search for, download, unpack, and figure out installation directories for our front-end frameworks, libraries, and assets.

Bower is a package manager for front-end modules that are usually comprised of JavaScript and/or CSS. It lets us easily search for, install, update, or remove these front-end dependencies.

The advantage to using Bower is that you do not have to bundle external dependencies with your project when you distribute it. Bower will take care of the third-party code when you run bower install and get those dependencies to the right locations. It also makes the final project package smaller for distribution.

In this tutorial you’ll learn how to install and use Bower on an Ubuntu 14.04 server. We’ll use to Bower to install Bootstrap and AngularJS and illustrate them running a simple application on an Nginx web server.

Prerequisites

Before we begin, there are some important steps that you need to complete:

• Droplet with a clean Ubuntu 14.04 installation. For this purpose the size of the Droplet really doesn’t matter, so you can safely go with the smallest version. If you haven’t yet created your Droplet, you can do so by following the steps in the How To Create Your First DigitalOcean Droplet Virtual Server tutorial
• Connect to your server with SSH
• Create a user with sudo privileges by following our Ubuntu 14.04 Initial Server Setup tutorial. In our example, this user is called sammy
• For the web server, we will use Nginx, a powerful and efficient web server that has seen wide adoption due to its performance capabilities. Follow the How To Install Nginx on Ubuntu 14.04 LTS tutorial to install Nginx

Also, Bower needs Git, Node.js and npm.

• Install Git on your server with the following command:

sudo apt-get install git

If you want a more in-depth tutorial about setting up Git, you can take a look at How To Install Git on Ubuntu 14.04.

• Install Node.js on your server with the following command:

sudo apt-get install nodejs

If you want a more in-depth tutorial about setting up Node.js, you can take a look at How To Install Node.js on an Ubuntu 14.04 server.

• Install npm on your server with the following command:

sudo apt-get install npm

If you want a more in-depth tutorial about setting up npm, you can take a look at How To Use npm to Manage Node.js Packages on a Linux Server.

• Since we installed Node.js from a package manager your binary may be called nodejs instead of node. Since Git relies on the fact that your Node.js binary will be called node, you just need to symlink it like so:

sudo ln -s /usr/bin/nodejs /usr/bin/node

You can read more about this issue on Github, and you can learn more about the symlinking from this StackExchange question.

When you are finished with these steps, you can continue with this guide.

Step 1 — Installing Bower

Install Bower using npm:

sudo npm install bower -g

The -g switch is used to install Bower globally on your system.

Now that we have Bower installed we will continue with a practical example. In the next steps, we’ll

• Make a new Bower project
• Install Bootstrap with Bower
• Install AngularJS with Bower
• Serve the website via Nginx

At the end of this tutorial, in the Bower Reference section, you can read more about each of the Bower options.

Step 2 — Preparing Project Directory

We’ll create our Bower project in the /usr/share/nginx/html directory so we can easily access our application as a website. This is Nginx’s default document root directory.

So, we need to change to this directory with the cd command:

cd /usr/share/nginx/html

By default, Nginx on Ubuntu 14.04 has one server block enabled by default. It is configured to serve documents out of the aforementioned /usr/share/nginx/html directory.

In our quick example we’ll use the default site.

For a production application, though, you should probably set up a server block for your specific domain.

Before we can do any work in the /usr/share/nginx/html directory, we have to give our sudo user rights to it.

Change the ownership of the directory with the following command:

sudo chown -R sammy:sammy /usr/share/nginx/html/

Instead of sammy you would use your own sudo user which you created in the prerequisite Ubuntu 14.04 Initial Server Setup tutorial.

Step 3 — Initializing Bower Project

Now, inside the directory /usr/share/nginx/html, execute the following command to make a new Bower project:

bower init

You will be asked a series of questions. For this quick example project you can just press ENTER to select all the defaults.

See a detailed breakdown of the answers below, marked in red:

? May bower anonymously report usage statistics to improve the tool over time? Yes
? name: BowerTest
? version: 0.0.0
? description: Testing Bower
? main file: index.html
? what types of modules does this package expose? Just press ENTER
? keywords: bower angular bootstrap
? authors: Nikola Brežnjak
? license: MIT
? homepage: http://bower.example.com
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'BowerTest',
  version: '0.0.0',
  description: 'Testing Bower',
  main: 'index.html',
  keywords: [
    'bower',
    'angular',
    'bootstrap'
  ],
  authors: [
    'Nikola Brežnjak'
  ],
  license: 'MIT',
  homepage: 'http://bower.example.com',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

A few notes about these options:

• Just to revisit the note from before, you don’t need to enter any of the options when running the bower init command for this example project
• In the What types of modules does this package expose? question, you can select or deselect the options by pressing SPACEBAR. Pressing ENTER confirms the selection. By default none are selected, and for this simple example we don’t need any of them. You can read more about them from the official GitHub issue
• For a production project, you would want to fill out the authors field and other settings so that other people know more about the project
• The homepage setting is used only to show your own website, and has nothing to do with the settings of the actual server where you’re running this application

Now you should have a bower.json file in your working directory (/usr/share/nginx/html/) with the JSON content shown in the output above.

Step 4 — Installing AngularJS

AngularJS is a JavaScript framework for web applications. To install AngularJS with Bower, run the following command:

bower install angularjs --save

You can see the output of the command below:

bower angularjs#*               cached git://github.com/angular/bower-angular.git#1.3.14
bower angularjs#*             validate 1.3.14 against git://github.com/angular/bower-angular.git#*
bower angularjs#*                  new version for git://github.com/angular/bower-angular.git#*
bower angularjs#*              resolve git://github.com/angular/bower-angular.git#*
bower angularjs#*             download https://github.com/angular/bower-angular/archive/v1.4.3.tar.gz
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 20%
bower angularjs#*             progress received 0.1MB of 0.5MB downloaded, 24%
bower angularjs#*             progress received 0.5MB of 0.5MB downloaded, 98%
bower angularjs#*              extract archive.tar.gz
bower angularjs#*             resolved git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3         install angularjs#1.4.3

angularjs#1.4.3 bower_components/angularjs

If you get slightly different output than the one shown above, that can be due to the fact that Bower caches packages for faster download and your package was installed from cache.

We now have AngularJS installed in the bower_components/angular directory (or possibly the bower_components/angularjs) directory, with the path to the minified version (which we will be using) being: bower_components/angular/angular.min.js.

Step 5 — Installing Bootstrap

Bootstrap is a CSS framework. To install Bootstrap with Bower, run the following command:

bower install bootstrap --save

You can see the output of the command below:

bower angularjs#~1.4.3          cached git://github.com/angular/bower-angular.git#1.4.3
bower angularjs#~1.4.3        validate 1.4.3 against git://github.com/angular/bower-angular.git#~1.4.3
bower bootstrap#*               cached git://github.com/twbs/bootstrap.git#3.3.5
bower bootstrap#*             validate 3.3.5 against git://github.com/twbs/bootstrap.git#*
bower jquery#>= 1.9.1           cached git://github.com/jquery/jquery.git#2.1.4
bower jquery#>= 1.9.1         validate 2.1.4 against git://github.com/jquery/jquery.git#>= 1.9.1
bower angularjs#~1.4.3         install angularjs#1.4.3
bower bootstrap#~3.3.5         install bootstrap#3.3.5
bower jquery#>= 1.9.1          install jquery#2.1.4

angularjs#1.4.3 js/angularjs

bootstrap#3.3.5 js/bootstrap
└── jquery#2.1.4

jquery#2.1.4 js/jquery

We now have Bootstrap installed in the bower_components/bootstrap directory with the path to the minified version (which we will be using) being: bower_components/bootstrap/dist/js/bootstrap.min.js for the JavaScript file and bower_components/bootstrap/dist/css/bootstrap.min.css for the CSS file.

Notice how jQuery was installed too, as it’s a dependency required by Bootstrap.

Step 6 — Creating a Hello World Application

Inside the /usr/share/nginx/html/ folder edit, let’s replace the default index.html file with our own content:

mv /usr/share/nginx/html/index.html /usr/share/nginx/html/index.html.orig

Open the file for editing:

vim /usr/share/nginx/html/index.html

You can enter this content exactly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container" ng-app>
        <form class="form-signin">
            <h2 class="form-signin-heading">What you type here:</h2>

            <input ng-model="data.input" type="text" class="form-control" autofocus>

            <h2 class="form-signin-heading">It will also be shown below:</h2>
            <input type="text" class="sr-only">{{data.input}}</label>
        </form>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <script src="bower_components/angular/angular.min.js"></script>
</body>
</html>

Depending on how Bower installs AngularJS on your system, the path to the script might be bower_components/angularjs/angular.min.js rather than bower_components/angular/angular.min.js.

Now we have a simple Hello World type example application using Boostrap with AngularJS, running on Nginx.

(This is basically the example Signin Template from Bootstrap where the content inside the <body> tag has a simple form with two input fields.)

To view this example app, you should navigate in your browser to the IP of your Droplet; something like http://your_server_ip/. You should see something like the image below:

If you type something in the text box field, the exact same content will appear below, using the AngularJS two-way data binding.

If you don’t get any output, try restarting Nginx with the following command:

sudo service nginx restart

If you want to learn more about AngularJS, visit the official documentation at https://docs.angularjs.org/tutorial. If you wish to learn more about Bootstrap, visit the official documentation at http://getbootstrap.com/getting-started/.

If you want to be able to access your web server via a domain name, instead of its public IP address, purchase a domain name then follow these tutorials:

• How To Set Up a Host Name with DigitalOcean
• How to Point to DigitalOcean Nameservers From Common Domain Registrars

Bower Reference

Now that we’ve gone through a practical example with Bower, let’s look at some of its general capabilities.

Installing Packages

To install a package (for example, AngularJS or Bootstrap) we would need to run the following command:

bower install package

Instead of package, enter the exact name of the package you want to install. The package can be a GitHub shorthand, a Git endpoint, a URL, and a lot more.

You can also install a specific version of a certain package.

Find out more about all the available options for installing via Bower’s official documentation on installing.

Searching Packages

You can search for packages via this online tool or by using the Bower CLI. To search for packages using the Bower CLI, use the following command:

bower search package

For example, if we would like to install AngularJS, but we’re unsure about the correct package name, or we would like to see all the available packages for AngularJS, we can execute the following command:

bower search angularjs

We would get an output similar to this:

Search results:
    angularjs-nvd3-directives git://github.com/cmaurer/angularjs-nvd3-directives.git
    AngularJS-Toaster git://github.com/jirikavi/AngularJS-Toaster.git
    angularjs git://github.com/angular/bower-angular.git
    angular-facebook git://github.com/Ciul/Angularjs-Facebook.git
    angularjs-file-upload git://github.com/danialfarid/angular-file-upload-bower.git
    angularjs-rails-resource git://github.com/FineLinePrototyping/dist-angularjs-rails-resource
    angularjs-geolocation git://github.com/arunisrael/angularjs-geolocation.git

In order to install AngularJS you would then simply execute the following command:

bower install angularjs

Saving Packages

When starting a project with Bower, it’s standard to start with running the init command:

bower init

This will guide you through creating a bower.json file, which Bower uses for project configuration. The process might look like this:

? name: howto-bower
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Nikola Breznjak <[email protected]>
? license: MIT
? homepage: https://github.com/Hitman666/jsRockstar
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No

{
  name: 'howto-bower',
  version: '0.0.0',
  homepage: 'https://github.com/Hitman666/jsRockstar',
  authors: [
    'Nikola Breznjak <[email protected]>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes

Now, if you install any of the packages using the --save switch, they will be saved to the bower.json file, in the dependencies object. For example, if we installed AngularJS with the following command:

bower install angularjs --save

Then our bower.json file would look something like this (note the dependencies object):

{
  "name": "howto-bower",
  "version": "0.0.0",
  "homepage": "https://github.com/Hitman666/jsRockstar",
  "authors": [
    "Nikola Breznjak <[email protected]>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angularjs": "~1.4.3"
  }
}

Uninstalling Packages

To uninstall a Bower package, simply run the following command:

bower uninstall package

This will uninstall a package from your bower_component directory (or any other directory you’ve defined in the .bowerrc file (more about configuration in the next section).

Configuring Bower with .bowerrc

To configure Bower, you have to create a file called .bowerrc. (Notice the dot – it means it’s a hidden file in a Linux environment.)

Create the .bowerrc file in the root directory of your project (alongside the bower.json file). You can have one .bowerrc file per project, with different settings.

Bower lets you configure many options using this file, which you can read more about in the configuration options from the official documentation.

One useful option is the directory option, which lets you to customize the folder in which Bower saves all its packages.

To set this simple option, create a .bowerrc file that looks like this:

{
  "directory": "js/"  
}

Conclusion

After completing this tutorial, you should know how to use Bower to install the dependencies for a simple AngularJS application.

You should also have an idea of how to use Bower for your own custom applications.

If you have any questions or you ran into problems with following the steps in this tutorial, please share them in the comments, I’ll make sure I reply promptly to them.

How to Manage Front-End #JavaScript and #CSS #Dependencies with #Bower on Ubuntu 14.04 http://t.co/x1FVUEVenD

— Nikola Brežnjak (@HitmanHR) August 27, 2015

I stumbled across this rather touching poem Father Forgets by W. Livingston Larned when I was reading the book How to win friends and influence people by Dale Carnegie (you can see my favorite quotes from that book here), and indeed it’s something one should sit down and think about from time to time, if one has kids of his own…

Here’s the full poem Father Forgets by W. Livingston Larned:

Listen, son; I am saying this as you lie asleep, one little paw crumpled under your cheek and the blond curls stickily wet on your damp forehead. I have stolen into your room alone. Just a few minutes ago, as I sat reading my paper in the library, a stifling wave of remorse swept over me. Guiltily I came to your bedside.

There are things I was thinking, son: I had been cross to you. I scolded you as you were dressing for school because you gave your face merely a dab with a twoel. I took you to task for not cleaning your shoes. I called out angrily when you threw some of your things on the floor.

At breakfast I found fault, too. You spilled things. You gulped down your food. You put your elbows on the table. You spread butter too thick on your bread. And as you started off to play and I made for my train, you turned and waved a hand and called, “Goodbye, Daddy!” and I frowned, and said in reply, “Hold your shoulders back!”

Then it began all over again in the late afternoon. As I came up the road, I spied you, down on your knees, playing marbles. There were holes in your stockings. I humiliated you before you boyfriends by marching you ahead of me to the house. Stockings were expensive – and if you had to buy them you would be more careful! Imagine that, son, form a father!

Do you remember, later, when I was reading in the library, how you came in timidly, with a sort of hurt look in your eyes? When I glanced up over my paper, impatient at the interruption, you hesitated at the door. “What is it you want?” I snapped.

You said nothing, but ran across in one tempestuous plunge, and threw your arms around my neck and kissed me, and your small arms tightened with an affection that God had set blooming in your heart and which even neglect could not wither. And then you were gone, pattering up the stairs.

Well, son, it was shortly afterwards that my paper slipped from my hands and a terrible sickening fear came over me. What has habit been doing to me? The habit of finding fault, of reprimanding – this was my reward to your for being a boy. It was not that I did not love you; it was that I expected too much of youth. I was measuring you by the yardstick of my own years.

And there was so much that was good and fine and true in your character. The little heart of you was as big as the dawn itself over the wide hills. This was shown by your spontaneous impulse to rush in and kiss me good night. Nothing else matters tonight, son. I have come to your bedside in the darkness, and I have knelt there, ashamed!

It is a feeble atonement; I know you would not understand these things if I told them to you during your waking hours. But tomorrow I will be a real daddy! I will chum with you, and suffer when you suffer, and laugh when you laugh. I will bite my tongue when impatient words come. I will keep saying as if it were a ritual: “He is nothing buy a boy – a little boy!”

I am afraid I have visualized you as a man. Yet as I see you now, son, crumpled and weary in your cot, I see that you are still a baby. Yesterday you were in your mother’s arms, your head on her shoulder. I have asked too much, too much.

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m currently #5 All time answerer.

I answered this question by user Qweick:

I’ve been fiddling with ionic, but I’ve ran into an issue. If I make a new project with a sidebar, upon navigation to a child state sidebar button disappears and is replaced with a back button. How can I retain sidebar button on every state./page?

My answer was:

On every state/page you should add the following <ion-nav-buttons>, just inside the <ion-view>and before the <ion-content>:

<ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>

So, a full simple example would look something like this:

<ion-view view-title="Some title">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
    </ion-nav-buttons>

    <ion-content>
        Some content
    </ion-content>
</ion-view>

This would add the “hamburger” icon to your navigation, along with the back button.

My notes from a classic How To Win Friends and Influence People by Dale Carnegie, which I rated 5/5 on my Shelfari account and put to my all time Favorites list. What’s so great about this book is that it gives the real word examples so that you can try and implement them in your day to day life.

Here are my favorite quotes from this book, and hope you get a tip or two on how to win friends and influence people 🙂

The highest paid personel in engineering are frequently not those who know the most about engineering. The person who has technical knowledge plus the ability to express ideas, assume leadership and to arouse enthusiasm among people – that person is headed for higher earning power.

The ability to deal with people is as purchasable commodity as coffee.

Health is the prime interest of adults. Next interest is people; how to understand and to get along with people, how to make people like you and how to win others to your way of thinking.

Judge Not Lest Ye Be Judged!

Don’t complain about the snow under your neighbors roof, while your own doorstep is unclean.

I will speak ill of no man, and speak all the good I know of everybody.

Any fool can criticize, condemn and complain, and most fools do; it takes character, and self-control to be understanding and forgiving.

A great man shows his greatness by the way he treats little men.

To show you I’m sure you’ll never do this again I want you to service my F 51 tomorrow.

I consider my ability to arose enthusiasm among my people, said Charles Schwab, the greatest asset that I possess.

The way to develop the best in the person is by appreciation and encouragement.

Father forgets – W. Livingston Larned

Criticism from superiors kills ambition.

We often take our spouses so much for granted that we never let them know that we appreciate them.

I can’t think of six things I would like to change about you – I love you the way you are.

If there is any one secret of success, it lies in the ability to get the other persons point of view, and see things from that person’s angle, as well as from your own.

Arouse in the other person an eager want. He who can do this has the whole world with him, he who does not walks a lonely way.

You can make more friends in two months by becoming genuinely interested in other people then you can into years trying to get other people interested in you.

Most folks are happy as they make their minds to be.

There is nothing either good or bad, but thinking makes it so.

Listening intently and be genuinely interested in another people stories and they will love you for it, because they just want to tell their story and you can actually learn a thing or two from we won.

Always make the other person feel important.

What was I trying to get out of him? If we are so contemptively selfish that we can’t radiate a little happiness and pass on a bit of honest appreciation without trying to get something out of it in return, if our souls are no bigger than sour crab apples, we should meet with the failure we so richly deserve.

I wanted something priceless. I got the feeling that I’ve done something for him being done anything whatever in return for me.

Do onto others, as you would have others do onto you.

6 ways to make people like you:

• become genuinely interested in other people
• smile
• person’s name is the most important sound to that person in any language
• be a good listener – encourage others to talk about them selves
• talk in terms of the other person’s interest
• make the other person feel important

If you’re wrong admit it quickly and emphatically.

…the sun then told the wind that gentlenessand friendliness were always stronger than fury and force.

He who treads softly goes far.

If te work is exciting and interesting the worker looks forward to do it and it’s motivated to do a good job.

Win people to your way of thinking:

• the only way to get the best of an argument is to avoid it
• show respect for other people’s opinions, never say “you’re wrong”
• if you’re wrong admit it quickly and emphatically
• begin in a friendly way
• get the other person saying YES YES immediatelly
• let the other person do a great deal of talking
• let the other person feel the ideas is his or hers
• try honestly to see things from other person’s point of view
• be symphatetic with other person’s ideas and desires
• appeal to the nobler motives
• dramatise your ideas
• throw down a challenge

Praise is like sunlight to the warm human spirit. We can not flower and grow without it, and yet while most of us are too ready to apply to others the cold wind of criticism, we are somehow reluctant to give our fellow warm sunshine of praise.

Effective leader keeps this in mind:

• be sincere, don’t promise anything that you can’t deliver
• forget about your benefits and concentrate on the benefits of other person
• know exactly what you want the other person to do
• be emphatetic – ask yourself what it is the other person really wants
• consider the benefits that person will receive from doing what you suggest
• match those benefits to the other person’s wants
• when you make your request put it in a form that will convey to the other person that he personally will benefit

Be a leader who often changes people’s attitudes and behavior. Some suggestions to accomplish this:

• begin with praise and honest appreciation
• call attention to peoples mistakes indirectly
• talk about your own mistakes before criticising the other person
• ask questions instead of giving direct orders
• let the other person save face
• praise the slightest improvement and praise every improvement
• be harthy in your approbation and lavish in your praise
• give the other person a fine reputation to live up to
• use encouragement, make the fault easy to correct
• make the other person happy doing the thing you suggest

Ionic publically announced Ionic Market on their blog.

On the market (http://market.ionic.io/) you can buy (and even sell):

• project starters (Firebase, Parse, Heroku, etc…)
• plugins (swipable cards, timepickers, maps, etc…)
• themes (material design, tumblr alike, etc…)

There are even some free ones available at the moment, so you may want to check that out.

Since other markets emerged and you could have found similar items on sites like themeforrest, it comes as a nice and warm surprise that the Ionic team basically said they approve that:

We also want to help the markets that have popped up naturally, rather than compete with them.

Additionally, a statement that reimburses that is:

In addition to being able to sell your wares directly on the Ionic Market site, you can also link externally to your existing marketplace, where users can purchase your add-on on the site where you’re already selling it. This effectively makes the Ionic Market just another way to help developers find your add-on.

I bet this announcement made the authors very happy. Even more so, when they realize that Ionic Market takes no commission:

Because we wanted to encourage the creation of a vibrant ecosystem of Ionic add-ons that will mature over time, we’re not taking a cut on any sales. You can sell your add-ons directly on the Ionic Market through Stripe, so the only fees are the taxes and fees Stripe collects. Connect your Stripe account to the Market, and all funds after taxes and credit card processing fees go directly to you!

This, my dear friends, is just getting better and better with every new announcement they make!

TL; DR

This is my 200th post on this blog. I wrote some additional ones for other “high roller” sites, which you can see below along with my other most popular posts. Consistency is the sole driving force that lead to this point.

The beginnings

As I noted in my 100th post overview, it all started with the post Carcassonne scoring board application which I decided to post after reading James Clear’s post on why we should be makers instead of just consumers.

My approach

I just want to help people by bridging this seemingly invisible gap between the awesome programmers and not-so-awesome programmers how would use a bit of step by step help, by making my tutorials straight to the point with each step, without skipping the ever so slightly “obvious” parts.

This “obvious” part, as our math professor used to joke, usually tends to “take just a bit of additional calculations” – and before you know it, just after 45 minutes of additional 2-3 pages of derivations, you’re done…

I too tend to go over the tutorials when I’m learning something  new, and I feel frustrated when the steps they outline are not complete, and then I have to spend a day figuring it out (sorry, no mister Sherlock Holmes here). I don’t do this in my tutorials, instead I try to give you the exact step by step that I myself used when solving a particular issue. Also, I tend to welcome you to share your problems, you may have encountered, in the comments.

As someone smart said (paraphrased, as I couldn’t find the exact author – if you happen to know, ping me in the comments):

You learn the best when you have to teach someone something.

And this has been my guide idea. Because, I realized that if I can’t put my explanation on the paper/screen in order to explain my train of thought, then I probably don’t understand the core basics behind it at all. Albert Einstein said it best:

If you can’t explain it simply, you don’t understand it well enough.

Homerun posts

The posts for which I’m most proud are the MEAN stack series posts, which I wrote for HackHands (and which had almost 500000 [yes, that’s half a million] views combined):

• How to get started on the MEAN stack
• Delving into Node.js and Express web framework
• MongoDB CRUD the MVC way with Passport Authentication
• Finishing Angular TODO application and deploying to production
• MEAN.io VS MEAN.js and deploying the latter on DigitalOcean

And, the blog2book that I’ve self-published from these posts: Getting MEAN with MEMEs – Deploying MEAN TODO application to production.

I posted the 100th post on December 28, 2014. That means it took me 8 moths to write the additional 100 posts (12 posts per month on average (not including the HackHands post which are large, mildly said (last one is 8k+ words))). Anyways, not bragging or anything (this is sort of my reference point), just hope I’ll manage to keep up with this pace in the future too and that I’ll be able to check back to this reference point with a yet even better “score” give the number/quality ratio.

Of the other high roller sites, I wrote a post for DigitalOcean (which I recommend wholeheartedly) titled “How to manage front-end dependencies with Bower on Ubuntu 14.04“, which is also currently in review phase and will post the link once it goes live.

How did I do it?

Above all, as James Clear says (he’s cool btw, make sure you check him out if you want to build better habits), the most important thing is consistency. And, the key point about making consistency “easy” is doing something that doesn’t exert too much effort from you in order to start it in the first place.

Start small, increase gradually, but stay consistent with a minimum number. So, to be concise, I write 300 words every day minimally. Every day. Some days it may be more, but I just need to make sure it’s not less.

This tends to be a small number, but consider you write consistently for 33 days? You’ll have roughly 10k words, which is easily 10 posts with 1k words. Extrapolate this to a year and you’ll have over 100 posts with 1k words each, which in itself is pretty great if you ask me. Ok, true, not high roller pro style, but hey, we’re in it for the fun and education, right? – all the extras are welcome but not mandatory.

What’s next for me?

Well, lately, as you may know, I’m really into Ionic framework, and I’m writing tutorials about it, along as I learn the ins and out of the framework. Also, just recently I became a technical reviewer for PacktPub for the book Learning Ionic and I was a technical reviewer for the video Rapid Ionic from PacktPub. I’ll update the links to both books once they’ll be published.

Some of my most viewed Ionic framework posts:

• Adding AdMob to Ionic framework application step by step
• Check network information change with Ionic framework
• Posting data from Ionic app to PHP server
• Handling Ionic CORS issue
• How to redirect users if there is no Internet connection in Ionic framework?
• Ionic announces Ionic Lab – a GUI tool replacement for Ionic CLI
• Use Ionic or Cordova?
• Create icons and splash screen automatically with ionic resources

Also, I’m writing tutorials on the subject of Ionic for HackHands. The first one in the series is titled: How to get started with Ionic framework on Mac and Windows (I’ll update the link once the post gets published, since it’s currently in the review phase). Since these arranges prevent me from posting them on my site too, I’ll make excerpts and just link to them from my blog on a monthly basis (same as with my newsletter; since I don’t want to be bothering you guys too much with too much email – we all hate email ;)).

If you happen to like my style of presenting the “tough” subjects, please share with me in the comments what topics would you like to see covered next?

Cool, but your theme sucks

I kind of agree on this one. Since I’m not a designer and I don’t quite know what I want exactly (shocking, I know; yeah, I bet designers get this line a lot from their employers). So, I’m looking into making a better theme for my blog – do you happen to have a favorite one, or do you want to feature the one you made – share it in the comments. I actually may give it a try on Freelancer to find my new theme, the same way I got my new logo designed:

I’ll blog about how this process was refreshingly positive (and not expensive) in my experience, and will link it here – so, stay tuned because more awesome content is coming!

See you at 300

That’s all folks, see ya at 300!

My notes from a best seller book The Martian by Andy Weir, which I rated 4.4/5 on my Shelfari account. The book was made into a movie, starring Matt Damon (you can see the trailer I linked at the bottom of the post), and it’s expected to come out in October this year. I think Matt Damon is an awesome choice for the main character!

Here are my favorite quotes from this book:

Are you sure about this?
Absolutely.
Have you told anyone else?
Who would I tell?
I don’t know, friends?
I don’t have any of those.
OK, keep it under your hat.
I don’t wear a hat.
It’s just an expression.
Really? It’s a stupid expression.
You’re being difficult.
Ah, thanks.

Being your backup has back-fired. I guess NASA figured botany and chemistry are similar because they both end in Y.

You started my training by buying me a beer. For breakfast.

Why is my daughter in space? You were always scientifically minded. It was great. Straight A student. Hanging out with nerdy guys, too scared to try out anything. No wild side at all. You’re every father’s dream daughter.

If I get back to Earth, I’ll be famous, right? A fearless astronaout that beat all the odds, right? I bet women like that. More motivation to stay alive.

Official video trailer for The Martian:

TL;DR

In this tutorial, I’m going to quickly show you how to get network information change with Ionic framework. What do I mean by network information change? Well, if you need to detect when your phone gets on the Internet, or loses connection, you can do so with this example code. Additionally, you can get the type of the network your phone is connected to (WIFI for example).

Finished project

You can clone the finished project from Github: https://github.com/Hitman666/IonicNetworkInfo, and you can see how it actually looks like on the image below (nothing fancy, this is a test project after all ;)):

Step by step on how to make this yourself

Here are the quick steps in recreating the exact same app:

1. Start a new Ionic project by doing:

   ionic start IonicNetworkInfo blank
   

2. Then, change the directory to the newly created IonicNetworkInfo:

   cd IonicNetworkInfo

3. Install ngCordova with Bower:

   bower install ngCordova

   If by some chance you don’t have bower installed, you can install it with npm:

   npm install bower -g

4. Open up the www/index.html file in your favorite editor, and add the reference to ngCordova (just above the cordova.js script):

   <!-- This is what you should add, the cordova below you'll already have -->
   <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
   
   <!-- cordova script (this will be a 404 during development) -->
   <script src="cordova.js"></script>

5. Install the ngCordova network plugin by executing the following command in your Terminal/Command prompt (you should do this from the root directory of your app; so, in our case the IonicNetworkInfo directory):

   cordova plugin add org.apache.cordova.network-information

   To check if you have successfully installed the plugin, you can run the following command (from the root directory – I won’t be repeating this anymore; when I say you should run some command from the Terminal/Command prompt that, in this case, means from the root directory of the application):

   cordova plugin list

   You should see the following output:

   > cordova plugin list                                                                                                                           
   com.ionic.keyboard 1.0.4 "Keyboard"
   org.apache.cordova.network-information 0.2.15 "Network Information"

6. Open up the www/js/app.js file and add ngCordova to the dependencies list, so that basically the first line looks like this:

   angular.module('starter', ['ionic', 'ngCordova'])

7. Create a new controller in the www/js/app.js file called MyCtrl, with the following content:

   .controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
       document.addEventListener("deviceready", function () {
   
           $scope.network = $cordovaNetwork.getNetwork();
           $scope.isOnline = $cordovaNetwork.isOnline();
           $scope.$apply();
           
           // listen for Online event
           $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
               $scope.isOnline = true;
               $scope.network = $cordovaNetwork.getNetwork();
               
               $scope.$apply();
           })
   
           // listen for Offline event
           $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
               console.log("got offline");
               $scope.isOnline = false;
               $scope.network = $cordovaNetwork.getNetwork();
               
               $scope.$apply();
           })
   
     }, false);
   })

   In this controller you attach an event listener on the deviceready event (because it could be that the device would not have been yet initialized when this code runs) and you get the network information with:

   $cordovaNetwork.getNetwork();

   The information, about weather you’re connected to the internet is obtained with the following line:

   $scope.isOnline = $cordovaNetwork.isOnline();

   Then, you register two events $cordovaNetwork:online and $cordovaNetwork:online which trigger when the device gets online/offline. In them you then just update the $scope variables ().

   Just for reference, the whole content of the www/js/app.js file should be:

   // Ionic Starter App
   
   // angular.module is a global place for creating, registering and retrieving Angular modules
   // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
   // the 2nd parameter is an array of 'requires'
   angular.module('starter', ['ionic', 'ngCordova'])
   
   .run(function($ionicPlatform, $cordovaNetwork, $rootScope) {
     $ionicPlatform.ready(function() {
       // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
       // for form inputs)
       if(window.cordova && window.cordova.plugins.Keyboard) {
         cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
       }
       if(window.StatusBar) {
         StatusBar.styleDefault();
       }
   
     });
   })
   
   .controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope) {
       document.addEventListener("deviceready", function () {
   
           $scope.network = $cordovaNetwork.getNetwork();
           $scope.isOnline = $cordovaNetwork.isOnline();
           $scope.$apply();
           
           // listen for Online event
           $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
               $scope.isOnline = true;
               $scope.network = $cordovaNetwork.getNetwork();
               
               $scope.$apply();
           })
   
           // listen for Offline event
           $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
               console.log("got offline");
               $scope.isOnline = false;
               $scope.network = $cordovaNetwork.getNetwork();
               
               $scope.$apply();
           })
   
     }, false);
   });

8. In the index.html file, inside the ion-content tag paste the following content:

   <div class="card">
                   <div class="item item-text-wrap">
                       <h1>Network: {{network}}</h1>
                   </div>
               </div>
   
   
               <div class="card">
                   <div class="item item-text-wrap">
                       <ion-toggle ng-model="isOnline" ng-checked="item.checked">
                           <h1 ng-show="isOnline">I'm online</h1>
                           <h1 ng-show="! isOnline">I'm offline</h1>
                       </ion-toggle>
                   </div>
               </div>

   Basically what we do here is we show the contents of the network variable (which is attached to the $scope via the controller). Also, by using the ion-toggle component we show the “I’m online” / “I’m offline” notifications.

   Just for reference, the content of the whole index.html file should look like this:

   <!DOCTYPE html>
   <html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
       <title></title>
   
       <link href="lib/ionic/css/ionic.css" rel="stylesheet">
       <link href="css/style.css" rel="stylesheet">
   
       <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
       <link href="css/ionic.app.css" rel="stylesheet">
       -->
   
       <!-- ionic/angularjs js -->
       <script src="lib/ionic/js/ionic.bundle.js"></script>
   
       <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
       <!-- cordova script (this will be a 404 during development) -->
       <script src="cordova.js"></script>
   
       <!-- your app's js -->
       <script src="js/app.js"></script>
   </head>
   <body ng-app="starter" ng-controller="MyCtrl">
   
       <ion-pane>
           <ion-header-bar class="bar-stable">
               <h1 class="title">Ionic Blank Starter</h1>
           </ion-header-bar>
         
           <ion-content padding="true">
               <div class="card">
                   <div class="item item-text-wrap">
                       <h1>Network: {{network}}</h1>
                   </div>
               </div>
   
   
               <div class="card">
                   <div class="item item-text-wrap">
                       <ion-toggle ng-model="isOnline" ng-checked="item.checked">
                           <h1 ng-show="isOnline">I'm online</h1>
                           <h1 ng-show="! isOnline">I'm offline</h1>
                       </ion-toggle>
                   </div>
               </div>
   
           </ion-content>
       </ion-pane>
   </body>
   </html>

Testing time

In order to test this application you should run it on your device (because you can’t disable network in iOS simulator).

First, in case you haven’t, add the desired platform (execute this command from the root of the directory). For iOs execute:

ionic platform add ios

Or, for Android execute:

ionic platform add android

Just a quick note – in order to build the app for iOs, you need to be running this on Mac machine (sure, there are ways around it, but TBH, I’m not a fan of them). As for Android, you can normally run it on your Windows machine (if, of course you have all the SDKs in place. I’ll write about setting these up in another tutorial, so will update the link here when the post will be published, for those who want to see this kind of information).

If you have an Android device plugged to your computer (and all the SDKs in place) you can run the following to commands to get your application running on your Android device:

ionic build android && ionic run android

To get this application running on your iOS device, you first have to build the application, and you can do this by executing the following command:

ionic build ios

Now, open up the IonicNetworkInfo/platforms/ios folder and you should see the following content:

Next, open up IonicNetworkInfo.xcodeproj file with Xcode:

Make sure that your iOS device is connected to your Mac computer, select it from the dropdown menu and click run:

Now, experiment with the application by turning your WIFI on/of, turning your Cellular network (if you have it) on/off, and basically enjoy seing the information chage automatically :). Surely, you can do way more advanced stuff based on this simple example, but I hope this will get you started…

That’s all folks, I hope this will prove to be useful to someone. If you have any questions, or you’ve noticed some blatant blunder that I may have made, please don’t hesitate to share it in the comments, I’ll make sure to reply promptly.

edit: The prize draw is over and the winner was announced here.

TL;DR

• Grammarly is awesome, you should check it out
• It has a free version you can try with no credit card (or similar mumbo jumbo) needed
• Subscribe to my blog to enter the prize draw

Prize time

I’ve partnered with Grammarly and I will be giving a free one month of Grammarly Premium (worth $29.95) to a random subscriber of my blog.

To enter the draw:

• subscribe to my blog (if you don’t see where – mail me) if you still haven’t (I promise that I don’t spam or any crazy mumbo jumbo like that – I only send a monthly roundup of the best posts I wrote).
• subscribe to Grammarly

I’ll be running this promotion for the next week (ending on 21.08.2015), so chop chop.

Story time – I love stories

So, yeah, you’ve seen the nice little advertisement I have showing on the right-hand side of the blog (first up, straight into your face ):

Along with a “catchy” heading of Best $$$ I spent in a while. And it even has a free version!

I’m a developer, and we all know how we tend to hate advertisements and how they just feel wrong. Some of us, more technically inclined people, may even tend to use AdBlocker$™ and therefore not even see this advertisement .

Anyways, part of the reason why I made this post is to indeed truly express my deepest joy with using Grammarly. Indeed, they have a freaking free version you can try indefinitely without a credit card or any other mumbo jumbo that you may come to on the Internetz these days. The best thing in my opinion is that in addition to normal grammar checking, they also check for context and alert you if they think you have some contextual error. Also, in a paid version they offer plagiarism checks, which is awesome for hunting down those bloody suckers that copy your content…

To try it out for yourself, go to their landing page, and click on the Get Grammarly button:

Thankfully, NO credit card is needed to set up an account:

On the next step you can choose the free version with which you would get the following features:

• 100 points of grammar checking
• Contextual Spellchecker
• Punctuation checks
• Works anywhere on the web

At any later stage, if you wish, you can opt in to try the Premium version that has the following features:

• advanced error checking for complete confidence in your writing
• 250+ points of grammar
• Style checks
• Vocabulary enhancement
• Plagiarism detection
• Document type checker (business, academic, etc.)
• Microsoft® Office™ add-in

Anyways, when you open up the free version you’ll be greeted with the Tutorial on how to use the Editor:

What’s especially awesome is that you can install a Chrome browser extension (they also have one for Safari, and the one for Firefox is coming soon) and with this you would get the Grammar checker and all the other awesome free features directly in programs like Gmail, Facebook, WordPress, LinkedIn, etc…

Even if you don’t use Chrome, you can use their online editor (which works in any browser):

As you type in aforementioned applications (Facebook, Gmail, LinkedIn, etc.) Grammarly will check what you type in real-time and it will immediately notify you if you made some grammar or logical mistake, and you can apply the suggested changes simply by clicking on the suggestion.

Why did I buy a premium version?

Because in addition to normal grammar checking, they also check for context and alert you if they think you have some contextual error. Also, the plagiarism checker is awesome for hunting down those bloody suckers that copy your content…

All in all, it’s free, so check it out without commitment, and make you subscribe to the blog to enter the draw.

I will be announcing the winner in a new blog post (to which I’ll link from here once it’s up), one week (at the latest) after the end of the promotion.

Good luck!

Proper disclosure: This post contains affiliate links. If you click the link and make a purchase this I will receive a small commission. Thank you in advance!

From the official blog post, Ionic just announced a new shiny tool called Ionic Lab; which is a GUI tool that tends to be a replacement for the well know Ionic CLI for those who don’t quite like the CLIs.

Hmm, anyone like that reading this blog? I personally like using CLIs better, in general, but that’s just me I guess. <3 Terminal. However, I just might do an exception with this tool.

Currently, they only have a version for Mac (with a Windows version supposedly coming soon. Edit: windows version has been announced today (16.09.2015), and you can learn more about it on their blog) and you can download it from the official download page. Once you download the IonicLab.dmg file, just run it and drag the icon in the Applications folder, as instructed by the installer:

If you try to run the app via Spotlight, you may get an error “Ionic Lab can’t be opened because it is from an unidentified developer” like shown on the image below:

If you’re quite new to the Mac world (as I am), you can resolve this issue by opening up your Applications folder, locating Ionic Lab icon and right clicking the icon and selecting Open.

Now a similar popup will appear, but this time  with the Open option:

Select the Open option and you should get the initial Ionic Lab screen:

I tested this by dropping my IonicAdMob (link to Github project) application to it, and this is what happened:

At this point, even though I like CLIs more (as I noted in the introduction) I must say this is pretty awesome. Additionally, if you click on the PLUGINS tab you will see:

Here you can literally install the plugins by simply clicking on the checkboxes.

What’s even more exciting is that they announced that in the future they’re looking to improve it in terms of:

• including a one-click system setup
• adding Cordova plugin search
• adding Ionic resources generation for icons and splash screens
• adding Ionic Platform integration for push notifications
• adding Ionic Creator integration
• and quite some more things, which you can learn more from their blog post

All this, I must say, is pretty damn awesome and I’m really rooting for them so that they make all their plans into reality.

Bye bye, I’m going to play with my new shiny tool now for a while…