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

tiistai 8. joulukuuta 2015

Node version manager and usefull NPM commands

Install Node version manager with command:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

(https://github.com/creationix/nvm/blob/master/README.markdown)

Then install Node version nvm install 5.0

Change Node version with nvm use 5.0

See what packages you have previously install globally: npm list --depth 0 -g

Node versions can be found here http://nodejs.org/dist/

To see versions of single package use command: npm view appname versions

To install specific version use command: npm install -g appname@4.3.1

torstai 29. lokakuuta 2015

Advanced git. Cherry-pick, rebase and reset.

Today I encountered the following problem: I had put code in another branch that I would need in my master branch, BUT I could not take all code, just few commits. So I first found command called cherry-pick.

With cherry-pick you can merge one (1) commit from another branch and is quite easy to do, but eventually I found out that it is not a right tool for my job. Anyway, checkout your branch where you want to pick the commit.

git checkout mysecondbranch

then do git log with oneline option to show prettier log.

git log --oneline

Then just select the commit you want and checkout back to the master branch. Do

git cherry-pick 62ecb3

And you will merge that commit to your master.

Now if you need to merge multiple commits but not the whole branch cherry-picking is not the right tool for this job. We can rebase. First create a new temporary branch from the branch you want to do the changes. Then do rebase.

git rebase --onto mythirdbranch 76cada^

This means that from our "mythirdbranch" from commit number to the last one are applied to the temporary branch.

Here this all is explained very well! https://ariejan.net/2010/06/10/cherry-picking-specific-commits-from-another-branch/

OK so if you mess up with the rebase thing, you can do

git rebase --abort

or if you already did the rebase, revert it with the following:

git reflog

git reset --hard HEAD@{5}

and the number inside head is the commit where you started the rebase.

Finally merge the temporary branch your master branch.

PRO TIP

ssh-add id_rsa will add your ssh key to keyring or something. Then you don't need to enter password every single time when you connect to git.

perjantai 14. elokuuta 2015

Potatoman adventures - Mobile game

Long time no articles for my blog. I attended to Haaga-Helias mobile programming couse last year so this post is about my experience about mobile programming.

We had to use PhoneGap for compiling our apps, but in the end we decided to use CocoonJS for building our game. The final task of the course was to create our own mobile application of course. I haven't created any mobile games yet, so I decided with my friend we will make a mobile game for Android. I also had two Android phones to test the application.

First we decided the game should be Super Mario like 2D runner game with very easy controllers. Maximum of 4 buttons. Then we decided to use only 3 buttons. Left, right and jump. The game is easy enough to be played on the mobile. The challenging part was which game engine we should use or use our own? We found many different engines, but we wanted HTML5 based game engine, because then the game would be easy to port to any operating system. Then we found Quintus which was what we were looking for. It had mobile controllers implemented already. We decided to do at least three levels for the game, create some sound effects, background music and a little starting intro like in Max Payne which is black and white comic.

It actually took us very long to do the game. If we had created the whole engine it would have taken over a year from the team of two guys.

I was in charge of the game graphics. All graphics are done with Adobe Photoshop and Illustrator. Our game engine needed Tiled map editor for the level design. I created also the levels. Then I used microphone and Audacity to create sound effects. My partner focused on game logic and programming. When all the material were ready we also created teaser video for our application and compiled it in the CocoonJS. We had some trouble converting the game but in the end we managed to do it. It was a nice little project. To keep our code nice and clean we put it to GitHub.

Till this day 14.8.2015 our game has got over 200 downloads from the Play Store.

https://play.google.com/store/apps/details?id=com.potatoman.adventures

We got 5/5 grade for creating and publishing this game.

keskiviikko 27. toukokuuta 2015

Robots.txt file for Wordpress

For Wordpress its good idea to put wp-admin in disallow. This means Google bots don't visit wp-admin page and rank it on search.

User-agent: *
Disallow: /wp/wp-admin/

sunnuntai 23. marraskuuta 2014

Android application - pixel check

I just published my second Android application to Google PlayStore. It goes by the name "Pixel check". You can change the screen color by tapping screen. If there are dead pixels they show as black/grey and if the pixel has color errors it should stand out. Try it out here: https://play.google.com/store/apps/details?id=com.shnigi.pixelcheck

perjantai 7. marraskuuta 2014

Alphabets game

When I was a kid I played game where I had to enter all the alphabets as fast as I can. Two days ago I remembered that game and wanted to create my own version. This game is written with Javascript + HTML + CSS + PHP + MySQL. Game is created with Javascript and then PHP saves results to database. Top 10 players are queried from the database. Try it out here: http://84.251.124.101/~shnigi/aakkoset/index.php

tiistai 14. lokakuuta 2014

Javascript applications

So I have been learning Javascript for a while now and I'm getting it slowly. But still it feels so hard. I completed codeacademy.com Javascript course and had some other things to read. So far I have quickly developed three little things.

First one is rock, scissors, paper game. Simple game. Try the demoversion here: http://84.251.124.101/~shnigi/kivisaksipaperi/pewi.html

Next one is coinflipper. Select your side and flip it here: http://84.251.124.101/~shnigi/kolikonheitto/

Last one is Lotto-machine where you enter 4 different things and the machine tells you which one is best. Try it here: http://84.251.124.101/~shnigi/lottokone/

I'm planning to do a mobile app (Android) later from one of these.

perjantai 3. lokakuuta 2014

What is XML and how to use

XML was designed to describe data. With XML one can for example change data between two systems running on different platform and code. XML does not do anything. XML needs to be manipulated that it can be used. Here is an example of XML file from W3 schools:

<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

XSD is somekind of file that defines how XML file should be formatted. For example elements are defined as string and should be manipulated as string.

<xs:element name="note">
<xs:complexType>
    <xs:sequence>
      <xs:element name="to" type="xs:string"/>
      <xs:element name="from" type="xs:string"/>
      <xs:element name="heading" type="xs:string"/>
      <xs:element name="body" type="xs:string"/>
    </xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

XML and XSD files can be easily generated from online converters. Next is XSLT file which is used to select data and define how it is generated in HTML file. To define the XSLT file which will be used to convert the XML file to HTML use this tag

<?xml-stylesheet href="filename.xslt" type="text/xsl" ?>

To select values from XML file with XSLT one can put HTML tags inside XSLT and then use for example for each loop to select all items. In the select tag is the "path" to the thing that should be selected. If the XML file path has "properties" use @ to select the property. Example of XSLT file:

<xsl:value-of select="tournament-round-metadata/site/site-metadata/home-location/@city"/>
<xsl:value-of select="tournament-round-metadata/site/site-metadata/home-location/@country"/>
</h3>

</div>

Then open the XML file with web browser and if it is correctly set up it will show up as HTML. Tada!

As IDE I use Eclipse. For more information check W3 Schools. I find XML hard to understand. But for example data could be changed from PHP program to Java program with XML.

maanantai 15. syyskuuta 2014

Java Exception has occurred Eclipse

Make sure you have you have the latest version of JRE installed in your system.

If the problem still persists then ,the reason being the JRE’s of your system might not be added to the project under consideration. Please follow the steps below .
1) Eclipse Tool Bar>Window>Preferences> Java>Installed Jre’s.
2) You should be seeing the path of the JRE installed.Now copy the location of installed JREs
3) Close the window.
4) Select your Project>Rt ck >Properties>Java Build Path
5) In Libraries tab > clk Add library button
6) In Add Library Window>Select JRE System Library option>next
7) In JRE System Library window >clk on Installed JREs > (you should be able to see the path of the insatlled JREs) Select the JRE path
8) Finish

OR

Other Things done if the above did not solve the problem : - A ) Eclipse Tool bar > Project >Clean

perjantai 4. heinäkuuta 2014

Gmail account stealer

Today I read an article from local news that a mysterious web bank link has been sent to a bank customers. That site of course was a scam. The email / site was written in poor Finnish. Of course there are always people who go in to these kind of tricks. First the user had to log in with their bank account and then enter credit card number. So then I decided to do my own scam. This is just for educational purposes. My site looks like Gmail log in, but actually steals your account to mysql table.

Check it here: http://gmailstealer.tk/

Link to the original article (written in Finnish: http://www.iltasanomat.fi/digi/art-1288710145714.html?pos=ksk-trm-digi-etmin)

torstai 3. heinäkuuta 2014

Windows bat script

I needed a windows script which makes backup copy of a folder with different name and then deletes all files in the original folder. This is because Filesite has some problems with Microsoft office and is complaining about echo files that are not synchronized. Cleaning the echo folder solves this problem. Users complain about this and I needed a script which clears it automatically and makes sure it can be backed up if something goes wrong. My bat file code is this:

Robocopy C:\NRTEcho C:\NRTEchocopy /E
cd C:\NRTEcho
FOR /D %%p IN ("C:\NRTEcho\*.*") DO rmdir "%%p" /s /q
del C:\NRTEcho\*.* /Q

maanantai 5. toukokuuta 2014

Simple javascript yes/no prompt and html forward

I needed a simple confirmation YES/NO on my web page which would then redirect to a different page depending on the answer. I couldn't use any other languages but javascript so this is how I acquired it.

First I created a simple button

<button type="button" class="button" onclick="myFunction()">Press me please</button>

and the javascript

function myFunction()

{

var answer = confirm ("Yes")

if (answer)

window.location.assign("page1.html")

else

window.location.assign("page2.html")

}

</script>

tiistai 26. marraskuuta 2013

HTML 5 Short Page Example

<!doctype html>
<html>
<head>
<title>Niki's HTML 5 Short Page</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Niki's HTML 5 Short Page</h1>
<p>Welcome!</p>
</body>
</html>

Test your valid HTML 5 page with validator.w3.org. Start coding from this "Hello World" template.