Post 60: MacBook Pro as single DIV with pure CSS

MacBook Pro as single DIV with pure CSS. Looks best in Google Chrome:

See the Pen MacBook Pro with one div and pure CSS by Thadeusz (@thadeuszlay) on CodePen.

Post 59: iPhone drawing with one DIV only.

I drew an iPhone with only one HTML element only. The rest is pure CSS. Chrome displays the picture the best:

See the Pen iPhone one div with pure CSS by Thadeusz (@thadeuszlay) on CodePen.

Post 58: Minion with only one div and pure CSS

I'm not really content with the feet. If you've got a better suggesiton, please feel free. I'd be grateful for any comments.

See the Pen Minion by Thadeusz (@thadeuszlay) on CodePen.

Post 57: Browsers I'm currently using

Firefox
Vivaldi
Opera
Cliqz
Chromium
Chrome
Chrome Canaary
Brave

Do you know more?

Post 56: How to set up Grunt build system

Setup
In your terminal type in this

npm install -g grunt-cli

create a project
mkdir myproject

go to you project
cd myproject

type in
npm init

to save grunt into my package
npm install -S grunt

Create a grunt file:
touch Gruntfile.js


Usage
grunt has now created a grunt file. You can now go in there an register task:

module.exports = function (grunt) {
grunt.registerTask('speak', function() {
console.log('speaking');
});

grunt.registerTask('yell', function () {
console.log('yelling');
});

grunt.registerTask('both', ['speak', 'yell']);
grunt.registerTask('default', ['speak', 'yell']);

}


To execute these task go to your terminal:
grunt speak

You'll see that it logs out the speak task we defined earlier. The same for
grunt yell

If you typed in 'grunt both', then the tasks in the array in will be executed. If you only type grunt, then the task in the array of our default task will be executed.


Plugins
You can now go to http://gruntjs.com/plugins

For example we want to install the plugin 'contrib-concat' https://www.npmjs.com/package/grunt-contrib-concat

In your module exports function type in this:

module.exports = function (grunt) {

// Project configuration.
grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js',
    },
  },
});

grunt.loadNpmTasks('grunt-contrib-concat'); // npm loads some preconfigured tasks in the initConfig; in this case it looks in the initConfig and sees the concat key
}
In your grunt project folder create a folder called 'src'. In that folder create the files intro.js, project.js and outro.js

In these files you can write - for testing purposes - anything you want. We will later see that the content in the 3 mentioned files will be concatened into one - the built.js in the dist-folder.

You can see this effect by running in your terminal:
grunt concat


Another intersting plugin is 'contrib-watch': https://www.npmjs.com/package/grunt-contrib-watch

Whenever a pattern in your file structure changes, it will update it automatically in the grunt build folder, so you don't have to run the grunt command everytime.

First install it:
npm install grunt-contrib-watch --save-dev

Update your grunt file so it looks like this:
module.exports = function (grunt) {
grunt.registerTask('speak', function() {
console.log('speaking');
});

grunt.registerTask('yell', function () {
console.log('yelling');
});

grunt.registerTask('default', ['speak', 'yell']);

// Project configuration.
grunt.initConfig({
  concat: {
    jsPortion: {
                  src: ['js/1.js', 'js/2.js'],
                  dest: 'dist/built.js',
    },
     cssPortion: {
                   src: ['css/1.css', 'js/2.css'],
                   dest: 'dist/built.js',
     },
  },
 
  watch: {
  js: {
          files: ['js/**/*.js'],
      tasks: ['concat:jsPortion'],
  },
   css: {
          files: ['css/**/*.css'],
       tasks: ['concat:cssPortion'],
   },
},

});

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.loadNpmTasks('grunt-contrib-watch');
}


If you type in your terminal
grunt watch

..and then change one of your js files in your js folder, then you'll see grunt watch executes concat and concatenates the updates into one file.

Feel free to play around with grunt.

Post 55: Sound Motion - Android App uses device motion to generate sounds

I wrote and published a new app that uses the device's accelerometer:

https://play.google.com/store/apps/details?id=com.ionicframework.shockwave349163

It's a small and fun app. With this app you can imitate different items, like a whip, a hand granade, a machine gun, etc.

Post 54: Open Link in Ionic app

In order to open a link in your app you need to install this plugin

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Post 53: Add AdMob to your ionic project

Add this plugin:

cordova plugin add cordova-plugin-admobpro

create another JS file with this content and put it into the JS folder (replace the key with your keys):

var admobid = {};
	// TODO: replace the following ad units with your own
	if( /(android)/i.test(navigator.userAgent) ) {
	admobid = { // for Android
	banner: 'ca-app-pub-6869992474017983/9375997553',
	interstitial: 'ca-app-pub-6869992474017983/1657046752'
	};
	} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
	admobid = { // for iOS
	banner: 'ca-app-pub-6869992474017983/4806197152',
	interstitial: 'ca-app-pub-6869992474017983/7563979554'
	};
	} else {
	admobid = { // for Windows Phone
	banner: 'ca-app-pub-6869992474017983/8878394753',
	interstitial: 'ca-app-pub-6869992474017983/1355127956'
	};
	}
	function initApp() {
	if (! AdMob ) { alert( 'admob plugin not ready' ); return; }
	// this will create a banner on startup
	AdMob.createBanner( {
	adId: admobid.banner,
	position: AdMob.AD_POSITION.BOTTOM_CENTER,
	isTesting: true, // TODO: remove this line when release
	overlap: false,
	offsetTopBar: false,
	bgColor: 'black'
	} );
	// this will load a full screen ad on startup
	AdMob.prepareInterstitial({
	adId: admobid.interstitial,
	isTesting: true, // TODO: remove this line when release
	autoShow: false
	}); AdMob.showInterstitial(); // can be used to show later,e.g. after the end of the game
	}
	if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
	document.addEventListener('deviceready', initApp, false);
	} else {
	initApp();
	}

Now go to your index.html file and add a reference to that JS file above:

    <script type="text/javascript" src="js/myAdmobFile.js"></script>

Post 52: detect device motion with Ionic

In this post I'll show you how to detect the motion of your device with Ionic framework.

First create an Ionic project and then add a platform. How to do this with android is explained here.

I created a "tabs" ionic project. But you can choose whatever project type ("blank", "sidemenu") you want.
Download the ng-cordova zip file here. After downloading unzip and find the file "ng-cordova.min.js". The file is located at "ng-cordova-master\dist\". Put that file into the following folder of our project: "yourProject\www\js\".


Add this line in your index.html

 

1 2	<script src="js/ng-cordova.min.js"></script> <script src="cordova.js"></script>

Install the following two plugins:

1 2	cordova plugin add cordova-plugin-device-motion cordova plugin add cordova-plugin-whitelist

In your app.js add "ngCordova" to your service array:

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

Add this to your index.html:
    <ion-pane ng-controller="MotionController">
        <ion-header-bar class="bar-stable">
            <h1 class="title">Start Watching Device Motion</h1>
        </ion-header-bar>

        <ion-content>
            <div class="list">
                <label class="item item-input">
                    <span class="input-label">Frequency</span>
                    <input type="text" placeholder="0" ng-model="options.frequency">
                </label>
            </div>
            <button class="button button-full button-positive" ng-click="startWatching()">
                Start Measurement
            </button>
            <button class="button button-full button-positive" ng-click="stopWatching()">
                Stop Measurement
            </button>
            <h2>X: {{measurements.x}}</h2>
            <h2>Y: {{measurements.y}}</h2>
            <h2>Z: {{measurements.z}}</h2>
        </ion-content>
    </ion-pane>


And add this into the header of your index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

In your controller.js add the MotionController:

.controller('MotionController', function($scope, $cordovaDeviceMotion, $ionicPlatform) {

 

// watch Acceleration options $scope.options = { frequency: 100, // Measure every 100ms deviation : 25 // We'll use deviation to determine the shake event, best values in the range between 25 and 30 }; // Current measurements $scope.measurements = { x : null, y : null, z : null, timestamp : null } // Previous measurements $scope.previousMeasurements = { x : null, y : null, z : null, timestamp : null } // Watcher object $scope.watch = null; // Start measurements when Cordova device is ready $ionicPlatform.ready(function() { //Start Watching method $scope.startWatching = function() { // Device motion configuration $scope.watch = $cordovaDeviceMotion.watchAcceleration($scope.options); // Device motion initilaization $scope.watch.then(null, function(error) { console.log('Error'); },function(result) { // Set current data $scope.measurements.x = result.x; $scope.measurements.y = result.y; $scope.measurements.z = result.z; $scope.measurements.timestamp = result.timestamp; // Detecta shake $scope.detectShake(result); }); }; // Stop watching method $scope.stopWatching = function() { $scope.watch.clearWatch(); } // Detect shake method $scope.detectShake = function(result) { //Object to hold measurement difference between current and old data var measurementsChange = {}; // Calculate measurement change only if we have two sets of data, current and old if ($scope.previousMeasurements.x !== null) { measurementsChange.x = Math.abs($scope.previousMeasurements.x, result.x); measurementsChange.y = Math.abs($scope.previousMeasurements.y, result.y); measurementsChange.z = Math.abs($scope.previousMeasurements.z, result.z); } // If measurement change is bigger then predefined deviation if (measurementsChange.x + measurementsChange.y + measurementsChange.z > $scope.options.deviation) { $scope.stopWatching(); // Stop watching because it will start triggering like hell console.log('Shake detected'); // shake detected setTimeout($scope.startWatching(), 1000); // Again start watching after 1 sex // Clean previous measurements after succesfull shake detection, so we can do it next time $scope.previousMeasurements = { x: null, y: null, z: null } } else { // On first measurements set it as the previous one $scope.previousMeasurements = { x: result.x, y: result.y, z: result.z } } } }); $scope.$on('$ionicView.beforeLeave', function(){ $scope.watch.clearWatch(); // Turn off motion detection watcher });

});

Source:
http://www.gajotres.net/detecting-device-motion-with-ionic-framework-and-ngcordova/