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.

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!

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.

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

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

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.

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.