Nikola Brežnjak blog - Tackling software development with a dose of humor
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Home
Daily Thoughts
Ionic
Stack Overflow
Books
About me
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Nikola Brežnjak blog - Tackling software development with a dose of humor
Miscellaneou$

What have I learned from writing 200 posts?

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!

Books

The Martian – Andy Weir

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:

CodeProject, Ionic

Check network information change with Ionic framework

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 ;)):

networkInfoIonic

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:

Screen Shot 2015-08-15 at 11.52.18

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:

XcodeRun

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.

Miscellaneou$

Grammarly is my best investment in a while

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 1415131129_smiley-evil):

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 smileySad.

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:

grammarlyInstall

 

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

 

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

grammarlyInstall_3

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:

grammarlyInstall_4

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…

grammarlyInstall_5

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

grammarlyInstall_6

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…

grammarlyInstall_7

 

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!

Breaking News, Ionic

Ionic announces Ionic Lab – a GUI tool replacement for Ionic CLI

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:

ionicLabInstall

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:

ionicLabRunError

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.

ionicLabApplicationsFolder

Now a similar popup will appear, but this time  with the Open option:Screen Shot 2015-08-12 at 23.37.06

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

Screen Shot 2015-08-12 at 23.44.55

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

Screen Shot 2015-08-12 at 23.48.06

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:

Screen Shot 2015-08-12 at 23.49.49

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…

Ionic, Stack Overflow

How to redirect users if there is no Internet connection in Ionic framework?

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
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. In the last 30 days, I’m the top answerer in the ionic tag, and am currently #6 All time answerer:

soIonic

I answered this question by userFlorin Simion:

I want to redirect users to a different page when they’re not connected to the Internet.

My only question is why this is working:

if (window.Connection) {
    if(navigator.connection.type == Connection.NONE) {
        alert("Please connect to internet");
    }
}

and this is not

if (window.Connection) {
    if(navigator.connection.type == Connection.NONE) {
        $scope.state.go('offline');  
    }
}

My answer was:

Because you’re using $state the wrong way. Instead of this:

$scope.state.go('offline');

You should do it like this:

$state.go('offline');

Remember to inject $state in your controller. More information about $state from official docs.

By “Remember to inject $state in your controller” I’m referring, for example, to this:

app.controller('ctrl', function ($scope, $state) {
    $scope.changeState = function () {
        $state.go('someplaceNice');
    };
});

If you would want a more in-depth tutorial about network information gathering in Ionic make sure you check the Check network information change with Ionic framework tutorial.

Books

Ghost in the Wires – Kevin Mitnick

My notes from an awesome book Ghost in the Wires by Kevin Mitnick, which I rated 5/5 on my Shelfari account:

If you ask for a piece of sensitive information people naturally grow immediatelly suspicious. If you pretend you already have the information and give them something that’s wrong they’ll frequently correct you. Rewarding you with the piece of information you were looking for.

Freedom downtime documentary

Free Kevin movement

Movie Takedown – Kevin says it’s full of crap

Kevin Mitnick Voice Mail and Fax Exploit

Guest on the TV show Alias with Jennifer Garner

The Art of Deception book

Ionic, Stack Overflow

Use Ionic or Cordova?

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
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 be aware of, lately I’m really into Ionic framework and am helping out on StackOverflow with the knowledge I gained so far with the framework. In the last 30 days, I’m the top answerer in the ionic tag, and am currently #6 All time answerer:

soIonic

I answered this question by user user1365697:

We want to build a simple application that use a lot of videos and images. The application should run on different mobile devices running Andriod and iPhone operating systems. Does Ionic also convert each application to all mobiles options? What do you suggest to use Cordova or Ionic?

My answer was:

 

Disclamer: This will sound like advertisement, so I have to say I’m in no way affiliated with Ionic, I just happen to like it so much that I’m sharing the love for it.

Ionic is so much more than “just” an UI framework. Ionic allows you to:

  • generate icons and splash screens for all devices and device sizes with a single command: ionic resources. This alone saves you at least a day of image preparing for various sizes.
  • instantly update your apps with code changes, even when running directly on your device with ionic run --livereload
  • build and test iOS and Android versions side-by-side and see changes instantly with ionic serve --lab
  • share your Ionic apps with clients, customers, and testers all around the world without ever going through the App Store with ionic share
  • easily accessing the full native functionality of the device using ngCordova (here you get to use any Cordova plugin – so Ionic is indeed much more than Cordova per se)

Also, they’re building a full-stack backend services and tools for your Ionic app like Deploy (for deploying a new version without going through Apple review process!), Analytics, Push notifications.

Ionic CLI (command line interface) uses Cordova in the backend and allows you to build (directly using Ionic CLI) apps for iOS and Android (you by doing ionic build ios or ionic build androidand woila).

Ionic uses Angular as a frontend framework so if you’re familiar with it it will come as a bonus. They’reworking closely with the Angular 2.0 team too.

All in all, I personally think Ionic has a bright future, so if nothing else – give it a try I bet you’ll like the ease of making an app with it.

NodeJS

npm ERR! peerinvalid The package node-inspector does not satisfy its siblings’ peerDependencies requirements

Recently I was reinstalling ionic and cordova with:

npm install -g cordova ionic

but I got the following error:

    E:\IonicTesting>npm install -g cordova ionic
    npm WARN engine [email protected]: wanted: {"node":"~0.10.x"} (current: {"node":"0.12.7","npm":"2.11.3"})
    npm WARN engine [email protected]: wanted: {"node":">=0.6","npm":"1"} (current: {"node":"0.12.7","npm":"2.11.3"})
    npm WARN engine [email protected]: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"0.12.7","npm":"2.11.3"})
    npm WARN engine [email protected]: wanted: {"node":"~0.10.x"} (current: {"node":"0.12.7","npm":"2.11.3"})
    npm WARN engine [email protected]: wanted: {"node":">=0.6","npm":"1"} (current: {"node":"0.12.7","npm":"2.11.3"})
    npm WARN installMany normalize-package-data was bundled with [email protected], but bundled package wasn't found in unpacked tre
    e
    C:\Users\Nikola\AppData\Roaming\npm\cordova -> C:\Users\Nikola\AppData\Roaming\npm\node_modules\cordova\bin\cordova
    npm WARN engine [email protected]: wanted: {"node":"0.8.x || 0.10.x"} (current: {"node":"0.12.7","npm":"2.11.3"})
    npm WARN installMany normalize-package-data was bundled with [email protected], but bundled package wasn't found in unpacked tre
    e
    C:\Users\Nikola\AppData\Roaming\npm\ionic -> C:\Users\Nikola\AppData\Roaming\npm\node_modules\ionic\bin\ionic
    npm WARN unmet dependency C:\Users\Nikola\AppData\Roaming\npm\node_modules\generator-ionic requires cordova@'^4.2.0' but
     will load
    npm WARN unmet dependency C:\Users\Nikola\AppData\Roaming\npm\node_modules\cordova,
    npm WARN unmet dependency which is version 5.1.1
    npm ERR! Windows_NT 6.1.7601
    npm ERR! argv "C:\\NodeJS\\\\node.exe" "C:\\NodeJS\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "cordova" "ionic"
    
    npm ERR! node v0.12.7
    npm ERR! npm  v2.11.3
    npm ERR! code EPEERINVALID
    
    npm ERR! peerinvalid The package node-inspector does not satisfy its siblings' peerDependencies requirements!
    npm ERR! peerinvalid Peer [email protected] wants node-inspector@~0.7.0
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     E:\IonicTesting\npm-debug.log

At first I thought the reason is that I may have had an older version of node or npm but wasn’t the case because my versions were up to date (date of this post: 03.08.2015):

E:\IonicTesting>node -v
v0.12.7
E:\IonicTesting>npm -v
2.11.3

Also, I did try:

npm update -g

and

npm cache clean

as noted in the few StackOverflow answers, but it didn’t help. After a bit of googling and messing around I realized (an idea came from this StackOverflow answer) that I could try uninstalling the dependencies which were messing with me:

npm uninstall -g node-inspector
npm uninstall -g strong-cli
npm install -g generator-karma

After this I ran

npm update -g

and then, to finally install Ionic and Cordova, I ran:

npm install -g cordova ionic

And, what do you know – it worked. Hope this helps someone!

CodeProject, Quick tips, Wordpress

How to add excerpts to your WordPress blog homepage in a TwentyThirteen theme and not break the Codeproject importer

As you may know, CodeProject has a thing called Technical blogs which lets you publish your post on their site too, and thus widening the range of potential readers.

Thanks to a great plugin by hjgode you can automatically import your posts.

However, recently I wanted just to show excerpts of the posts on my blog homepage and in the archives. The problem was that that stopped the importer from collecting the posts that are marked with the codeproject category because the posts were too short according to their rules (1000 words minimum).

I solved this in my  TwentyThirteen theme by doing slight changes in content.php (around line 33), which by default looks like this:

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

This line displays excerpts only on a search page, and to show excerpts on homepage I did:

<?php if ( is_search() || is_home() ) :  ?>

You just have to make sure that you don’t include the

is_category()

and you’re all set.

True, you could further optimize this in a way that you would show excerpts for all other categories except “codeproject”.

Page 32 of 51« First...102030«31323334»4050...Last »

Recent posts

  • When espanso Breaks on Long Replacement Strings (and How to Fix It)
  • 2024 Top Author on dev.to
  • Hara hachi bun me
  • Discipline is also a talent
  • Play for the fun of it

Categories

  • Android (3)
  • Books (114)
    • Programming (22)
  • CodeProject (36)
  • Daily Thoughts (78)
  • Go (3)
  • iOS (5)
  • JavaScript (128)
    • Angular (4)
    • Angular 2 (3)
    • Ionic (61)
    • Ionic2 (2)
    • Ionic3 (8)
    • MEAN (3)
    • NodeJS (27)
    • Phaser (1)
    • React (1)
    • Three.js (1)
    • Vue.js (3)
  • Leadership (1)
  • Meetups (8)
  • Miscellaneou$ (78)
    • Breaking News (8)
    • CodeSchool (2)
    • Hacker Games (3)
    • Pluralsight (7)
    • Projects (2)
    • Sublime Text (2)
  • PHP (6)
  • Quick tips (41)
  • Servers (8)
    • Heroku (1)
    • Linux (3)
  • Stack Overflow (81)
  • Unity3D (9)
  • Windows (8)
    • C# (2)
    • WPF (3)
  • Wordpress (2)

"There's no short-term solution for a long-term result." ~ Greg Plitt

"Everything around you that you call life was made up by people that were no smarter than you." ~ S. Jobs

"Hard work beats talent when talent doesn't work hard." ~ Tim Notke

© since 2016 - Nikola Brežnjak