Code Blog by Niki Ahlskog

tiistai 2. elokuuta 2016

AngularJS tips and tricks.

I struggled with few things in AngularJS so here are the solutions I managed to do everything.

NG-repeat in select way 1. different value and text

<select class="styled-select" ng-model="group.id">
<option disabled selected value> -- select group -- </option>
<option ng-repeat="group in groups" value="{{group.id}}">{{group.name}}</option>
</select>

NG-repeat in select way 2. different value and text

NG-repeat if condition

<span ng-if="group.group.name === 'admins'">Admin</span>

<span ng-if="group.group.name === 'readers'">Viewer</span>

</span>

</li>

Class based on condition

<td ng-class="{'label label-danger' : alarm.severity === 'CRITICAL',

'label label-warning' : alarm.severity === 'MAJOR',

'label label-info' : alarm.severity === 'MINOR',

'label label-default' : alarm.severity === 'WARNING'}">{{alarm.severity}}</td>

perjantai 4. maaliskuuta 2016

How to create fancy looking triangles with CSS

I wanted to learn how to create those fancy looking triangles with css so here is my result.

<!DOCTYPE html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
.arrow-up {
margin-top:10px;
background: transparent;
height: 0;
border-left: 100vw solid transparent;
border-bottom: 100px solid #ff0;
}
.tausta {
background:#ff0;
height:200px;
padding:20px;
}
</style>
</head>
<body>
<div class="arrow-up"></div>
<div class="tausta">Sample text</div>
</body>
</html>

MongoDB server learnings

Today I just needed to learn what is MongoDB. First I watched these four episodes what is MongoDB and got the idea. https://www.youtube.com/watch?v=liQzIsFnCr0 I really recommend watching these if you have no idea what mongo is.

MongoDB is "file based" database. MongoDB has collections and inside colletions we have documents which represents our relational database model.

So this is how mongoDB looks like. Compared to MySQL relational database, we have rows:

Student_id, score, first_name, last_name and so on. MongoDB format is called BSON, its almost like JSON format: http://bsonspec.org/

To install mongodb on linux platform:

sudo apt-get install mongodb-server

And php driver for mongo

Install MongoDB PHP Driver

sudo apt-get install php5-dev php5-cli php5-mongo php-pear -y
sudo pecl install mongoOpen your php.ini file and add to it:

extension=mongo.so

Restart apache.
by default mongodb server will be installed on port 27017. Mongodb commands are pretty similar to mysql, here I found good examples: http://www.tutorialspoint.com/mongodb/mongodb_create_database.htm

Create new index.php file and insert following:

<?php
// connect to mongodb
$m = new MongoClient();

echo "Connection to database successfully";
// select a database
$db = $m->mydb;

echo "Database mydb selected";
?>

MongoDB will create database automatically if it doesnt exist. You should be creeted with message:

Connection to database successfully
Database mydb selected

Mongo Shell

MongoDB is javascript like preprocessor or something like that. To login to MongoDB server, say mongo

Then you can try to type: for(i=0; i<5; i++) print("hello"); in the shell and Mongo should print hello five times.

show dbs shows current databases.

db shows the current selected database

use databasename selects database

db.first.insert({"name": "test"}) creates new collection to database.

db.first.find() prints the collection
db.first.find().forEach(printjson) prints in json format

torstai 28. tammikuuta 2016

CSS Tricks - Text overflow fixed with Css

So probably everyone has seen a problem where floating items or text overflows the current div. The usual solution is to create empty div after the element and clear both, but it can be solved with pure CSS. Here is how:

.classname::after{
content:"";
clear:both;
display: block;
}

Use pseudo element after to add an empty item. This fixes the overflowing problem without using: overflow: hidden.

keskiviikko 27. tammikuuta 2016

jQuery tricks Toggle HTML Element Change

I struggled so much about changing element with jQuery and I finally after few hours of searching found a little hack to do this so I wanted to share it with everyone.

First create two html elements with same classname, but add display:none to other element like this:

<span class="trick">Open</span>
<span class="trick" style="display:none;">Closed</span>

Then with jQuery just do

$('.trick').toggle();

And super, the element is toggling!

torstai 14. tammikuuta 2016

Storing cordova project to Git

I have had this question in my mind for a while. What should I store to git when creating Cordova project? Here is the answer:

hooks (can be empty)
res
www (not mandatory)
config.xml
splash.png

So the minimum requirements are there. Even www folder is not mandatory if project is generated from other files. After you have cloned the project, create folders: plugins, www, platforms and use command: cordova platform add android

With empty folders cordova recognizes the project. So platform folder should always be generated on development computer.

maanantai 14. joulukuuta 2015

Learning Herokuapp

Heroku is a cloud application platform designed for developers. You can focus on developing and heroku does the rest. Publishing is through best practises; GIT. Software developers prefer using command line tools so Heroku is built that way. Heroku lets app developers spend their time on developing, not managing servers. Deployment, ongoing operations or scaling are easy to do in heroku.

To get started register your account at https://www.heroku.com/ next install heroku toolbelt which is command line tool to use heroku. First make sure you have Ruby installed in your system, if not then

sudo apt-get install ruby-full

After that install heroku toolbelt

wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh

After installation do:

heroku login and login with your credentials. After that you are logged in. Next create a project in some folder.

heroku create creates a new "server" for you. You can name it how you want as long as its not already taken. Like heroku create lollero

Then create a new folder for your project, add files and commit then normally. After that add your heroku remote with command:

heroku git:remote -a lollero

Now you can deploy your app just by typing git push heroku master

If you have multiple heroku remotes, just check them with:

git remote -v

and then push to another heroku app:

git push herokuappname master

IF heroku complains about public key, just simply add it before pushing:
heroku keys:add ~/.ssh/id_rsa.pub

and ta-da, your application is about to be deployed. In herokuapp you can also set custom domain names for your project, rollback versions etc.

heroku releases shows all your releases.

heroku rollback v5 rolls back to version you wanted.

Buildback defines your application language. To add buildbacks:

heroku buildpacks:set heroku/nodejs
heroku buildpacks:add https://github.com/username/package.git

https://devcenter.heroku.com/articles/buildpacks#detection-failure

Read heroku log with heroku logs --tail

Set heroku configuration variables with command: heroku config:set IS_HEROKU=TRUE

To read more about heroku:

Heroku devcenter has very good documentation: https://devcenter.heroku.com/start