$ npm install -save d3
                    d3-scale
                    d3-array
                    d3-shape
                    d3-interpolate
                    d3-color
                    d3-time-format
                    d3-ease
                    d3-transition
                    d3-selection
                    d3-time
                    d3-path
                    d3-dispatch
                    d3-format
                    d3-timer
                    d3-drag
                    d3-geo
                    d3-brush
                    d3-dsv
                    d3-random

3Feb

Ionic | Working with moments.js

by Ralph Ionic, Ionic 3

Introduction

With moment.js, you can

Parse, validate, manipulate, and display dates and times in JavaScript.

With a npm-Module, you can integrate this functionality into your Ionic App

Preparation

Create your empty app

$ ionic start working-with-moments blank --no-git --no-link

Install npm Module

$ cd  working-with-moments
$ npm install moment
+ moment@2.20.1
added 1 package in 3.001s

Start Editor and serve your app

$ vscode .
$ ionic serve

Add moments.js functionality

Change pages/home/home.ts

Add the moments.js reference to pages/home/home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular';
import * as moment from 'moment';

Create a var for the current date/time

export class HomePage {
  public date: any;

  constructor(public navCtrl: NavController) {
    this.date = moment();
  }
}

Change pages/home/home.html

<ion-content padding>
  The current date/time is {{ date }}
</ion-content>

Summary

A lot more examples could be found in my repository. Just create a starter app with this template and begin to play

$ ionic start app https://github.com/ionic4-toolbox/Working-with-moment.js

26Jan

Build separated development environments with direnv

by Ralph Generell

TL;DR

Working with Ionic sometimes means to handle different versions of Ionic/Cordova and Ionic/Cordova Plugins. My goal was, to setup an Ionic environment specify for each project. And I want do activate the environments automatically.

I started with autoenv, but unfortunately there is no unload/deactivate mechanism. So, finally, i switched to direnv. But i also tried different solutions with Vagrant or Docker.

Requirements

You will need a package manager to install the different software packages. There are a variety of package manager for the different platforms.

For macOS, i will use Homebrew.

Things about my directory structure

Mostly, i try to group files in different directories, depending on their functionality.

Environment files goes to a directory .env. But, wait: there could be more environments (node.js, ruby, python), which all could be used in my project.

So, i decide to use subfolders for each possible environment. Here it looks like:

$ tree myproject
myproject
└── .env
    ├── nvm
    ├── pyenv
    └── ruby

Some small example

Suppose, you have this directory structure

.
├── home
│   ├── .envrc
│   └── bath
│       └── .envrc
└── office
    └── .envrc

If you walk between this different rooms, you will see how direnv follow you

~/tmp$ cd home
direnv: loading .envrc
You are at home
~/tmp/home$ cd bath
direnv: loading .envrc
You are in the bath
~/tmp/home/bath$ cd ..
direnv: loading .envrc
You are at home
~/tmp/home$ cd ..
direnv: unloading
~/tmp$ cd office
direnv: loading .envrc
You are at work
~/tmp/office$ cd ../home/bath
direnv: loading .envrc
You are in the bath
~/tmp/home/bath$

Installation

There is a detailed installation instruction here, but for macOS, here is the simple step

$ brew install direnv
==> Downloading https://homebrew.bintray.com/bottles/direnv-2.14.0.high_sierra.bottle.tar.gz
Already downloaded: /home/user/Library/Caches/Homebrew/direnv-2.14.0.high_sierra.bottle.tar.gz
==> Pouring direnv-2.14.0.high_sierra.bottle.tar.gz
  /usr/local/Cellar/direnv/2.14.0: 8 files, 3.7MB

Finally, check if installation has succeed

$ direnv version
2.14.0

Configuration

Directory specific configuration is made through the file .envrc. It’s like a normal Shell profile script, so mostly all commands are allowed and possible.

Entering the directory triggers this configuration file, so a normal cd into the directory does the environment setup.. pretty cool!

In my simple example, i used this configuration files

~/tmp$ find . -name .envrc
./home/.envrc
./home/bath/.envrc
./office/.envrc
~/tmp$ find . -name .envrc -exec cat {} \;
echo "You are at home"
echo "You are in the bath"
echo "You are at work"

Setting up a sample project

Ionic heavily depends on node.js So, the challenge is to setup different node.js environments. Luckily, there is already a solution for that: Node Version Manager nvm.

Install nvm

For macOS, this is quit simple (details could be found here)

$ brew install nvm

Or, manually

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

Setup directory structure

Create the desired directory structure

$ cd $HOME/tmp
$ mkdir -p myproject2/.env/nvm

Configure direnv

Add the following lines (with some additional lines) into your direnv configuration file .envrc

#!/bin/bash

export NVM_DIR=$HOME/tmp/.env/nvm

echo setup nvm with NVM_DIR=$NVM_DIR
. /usr/local/opt/nvm/nvm.sh

nvm --version

Hint: When you created the file (for example with vi), you get the error message, that the .envrc file is blocked

$ vi .envrc
direnv: error .envrc is blocked. Run `direnv allow` to approve its content.

Follow the suggested solution: run direnv allow

$ direnv allow
direnv: loading .envrc
setup nvm with NVM_DIR=/home/user/tmp/myproject/.env/nvm
0.33.8
direnv: export +NVM_CD_FLAGS +NVM_DIR +NVM_RC_VERSION

Now, test the configuration: Leave the directory and enter it again

$ cd ..
direnv: unloading
$ cd myproject
direnv: loading .envrc
setup nvm with NVM_DIR=/home/user/tmp/myproject/.env/nvm
0.33.8
direnv: export +NVM_CD_FLAGS +NVM_DIR +NVM_RC_VERSION

Hint: If this does not work, try to start the configuration file manually for the first time,

$ cd $HOME/tmp/myproject
$ . .envrc
setup nvm with NVM_DIR=/home/user/tmp/myproject/.env/nvm
0.33.8

Fix possibile warnings and errors

If you get this error message

nvm is not compatible with the npm config "prefix" option: currently set to ...

Then, issue this command

$ npm config delete prefix

Install node

Now, the real task: install node.js

$ cd $HOME/tmp/myproject
$ nvm --version
0.33.8
$ node --version
-bash: node: command not found
$ nvm install 9.4.0
Downloading and installing node v9.4.0...
Downloading https://nodejs.org/dist/v9.4.0/node-v9.4.0-darwin-x64.tar.xz...
######################################################################## 100,0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v9.4.0 (npm v5.6.0)
Creating default alias: default -> 9.4.0 (-> v9.4.0)

Test the installation

$ which node
/home/user/tmp/myproject/.env/nvm/versions/node/v9.4.0/bin/node
$ node --version
v9.4.0

If you want to use an additional node version (maybe the latest LTS version), just install it

$ nvm install lts/carbon
Downloading and installing node v8.9.4...
Downloading https://nodejs.org/dist/v8.9.4/node-v8.9.4-darwin-x64.tar.xz...
######################################################################## 100,0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v8.9.4 (npm v5.6.0)

You can switch between the different versions with nvm use

$ nvm use lts/carbon
Now using node v8.9.4 (npm v5.6.0)
$ node --version; npm --version
v8.9.4
5.6.0
$ nvm use default
Now using node v9.4.0 (npm v5.6.0)
$ node --version; npm --version
v9.4.0
5.6.0

Setting up Ionic Environment

After this required preparation, we can start setting up our Ionic Environment

For this example, I choose the following start path: ~/Workspace/Ionic3

Setup directory structure

$ mkdir -p $HOME/Workspace/Ionic3/.env/nvm
$ cd $HOME/Workspace/Ionic3
$ vi .envrc

Create the direnv configuration file

Configuration file

#!/bin/bash
#-------------------------------------------------------------------------------
#
#-------------------------------------------------------------------------------
  HERE="$PWD"

#-------------------------------------------------------------------------------
#
#-------------------------------------------------------------------------------
  _USE_NODE_VERSION=9.4.0

#-------------------------------------------------------------------------------
#
#-------------------------------------------------------------------------------
  export NVM_DIR="$HERE/.env/nvm"

  echo "setup nvm: $NVM_DIR"
  . /usr/local/opt/nvm/nvm.sh

  nvm use $_USE_NODE_VERSION --silent

  echo "enabled nvm :  $(nvm  --version) $(which nvm  | sed 's#'$NVM_DIR'/##')"
  echo "enabled node:  $(node --version) $(which node | sed 's#'$NVM_DIR'/##')"
  echo "enabled npm :  $(npm  --version) $(which npm  | sed 's#'$NVM_DIR'/##')"

Allow the configuration file for use

$ direnv allow
direnv: loading .envrc
setup nvm: /home/user/Workspace/Ionic3/.env/nvm
enabled nvm : 0.33.8
enabled node: v9.4.0 versions/node/v9.4.0/bin/node
enabled npm : 5.6.0 versions/node/v9.4.0/bin/npm
direnv: export +NVM_CD_FLAGS +NVM_DIR

Test the configuration

~$ cd
~$ cd Workspace/Ionic3
direnv: loading .envrc
setup nvm: /home/user/Workspace/Ionic3/.env/nvm
enabled nvm :  0.33.8
enabled node:  v9.4.0 versions/node/v9.4.0/bin/node
enabled npm :  5.6.0 versions/node/v9.4.0/bin/npm
direnv: export +NVM_CD_FLAGS +NVM_DIR

Well done!

Setup Ionic

Install required parts

$ npm -g install ionic@latest cordova@latest

Test your installation

~/Workspace/Ionic3$ ionic --version
3.19.1
~/Workspace/Ionic3$ cordova --version
8.0.0
~/Workspace/Ionic3$ $ which ionic
/home/user/Workspace/Ionic3/.env/nvm/versions/node/v9.4.0/bin/ionic

And, finally, work with Ionic

$ ionic start super super --cordova --no-link
$ cd super
$ ionic serve

Next steps

Happy with this, maybe you want to try other things.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Developer Blog

Introduction

pipenv

Introduction

Installation

Prepare environment

venv module

Installation

Prepare environment

virtualenv

Prepare environment

Awesome

Websites

Examples

Reading

Learning

Blog

Plugins

Samples and Code

Installation

Introduction

Preparation

Create your empty app

Install npm Module

Start Editor and serve your app

Add moments.js functionality

Change pages/home/home.ts

Change pages/home/home.html

Summary

TL;DR

Requirements

Things about my directory structure

Some small example

Installation

Configuration

Setting up a sample project

Install nvm

Setup directory structure

Configure direnv

Fix possibile warnings and errors

Install node

Setting up Ionic Environment

Setup directory structure

Setup Ionic

Next steps