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$

Ekobit DevArena 2014

Here are my notes (on Croatian) from the DevArena 2014 hosted by Ekobit. The bolded bullet points were, you guessed it, topics. All in all, a very well organised developers conference.

  • Otvoreno o softerskom inženjerstvu i profesionalizmu
    • Leveli
      • level 0: continuous integration, unit testing
      • level 1: TDD, refactoring
      • level 2: coding standards
    • Testing stuff
      • https://github.com/Moq/moq4 – mocking library for .NET
      • Unit testing FTW!
      • http://sandcastle.codeplex.com/ – doxi iz unit testova; New => Help Project
      • Ne diraj ako nema testova, osim Right click => Extract to Method in VS
      • CodeRush & ReSharper
      • Code Contracts
  • Application insights
    • za sad jos samo u preview modu i samo za web http://stackoverflow.com/questions/26099664/vs2013-application-insight-for-desktop-applications/26544013#26544013
    • ALM – application lifecycle management
    • omogucava provjeru dostupnosti, performansi, koristenja
    • cilj: smanjiti MTTD (mean time to detect) errora
    • servis se obavezno vrti na Azureu
    • Add New project => Web performance and load Test project
    • log4net nugget + insights appender
    • Visual studio online
    • Azure is the way to go!
  • PRISM
    • instalacija preko NuGet-a
    • poznat još https://cinch.codeplex.com/, ali je kao jednostavniji, dok Prism (kompleksniji) im je jako se dobro uklopio u to dok su morali napraviti samo neki dio aplikacije da bude naplatni
    • napravljen po TDD i postoji source code
    • https://unity.codeplex.com/ i http://msdn.microsoft.com/en-us/library/dd460648(v=vs.110).aspx => bootstraping
    • prism inace ima sljedece patterne
      • addapter
      • app controller
      • command
      • composite and composite view
      • DI
      • IOC
      • Event aggregator
      • Facade
      • Observer
      • MVVM
      • Registry
      • Repository
  • Razvoj web i mobilnih multimedijskih aplikacija na HTML 5 platformi
    • http://middle-earth.the-hobbit.com, https://github.com/mbostock/d3/wiki/gallery
    • web browser će postati OS
    • video, audio tag
    • Grafika na webu:
      • Canvas
        • samo elementarno, requestTimeFrame
        • problem skaliranja slike
      • SVG
        • skaliranje slika
        • svaki element moze imati neki filter, npr. blur
        • ima animacije (<set>, <animate>)
        • IE 10 ima probleme s animacijama
      • ChartJS, CanvasJS, EASEJS, Fabric, Paper, Processing, Kinetic, JustGauge, $.plot chart
      • WebGL
        • grana OpenGL-a
        • direktan pristup GPU – high performance, but compli freakin cated
        • https://github.com/begedin/DiceAndRoll – PHASER!
  • Što je novo u XAML-u i XAML alatima za Visual Studio
    • NIŠTA
    • CPU usage tool with support for WPF (update 2 u VS2013)
    • .NET Managed Memory Analyzer
  • IoC i DI
    • Inversion of Control
    • Dependency Injection
    • Unity IOC, Windsor, Structure Map, nInject
    • AOP – aspect oriented programming
Miscellaneou$

Love you Apple but hasn’t this gone too far?

Love you Apple, I really do, but this video is just too true! Since you’ve allowed that I install iOS8 on my beloved 4S (unfortunately the best and last normal sized phone you’ve made [I know it’s not your fault, it’s what market demands, but still it “feels” wrong]) I have all but good words for it. Slow this, slow that, apps crash which never before crashed, the list goes on… Sure, I understand, my phone is 3 years old so what you’re (subtly) saying is that I should update. But why should I, if I’m perfectly fine with this one (and Androids just don’t resonate with me) go and buy a new one? That being said I think you should really allow us (and yes, there is more of us) to downgrade to iOS7.

There, my 0.02$.

IDIOTS from BLR_VFX on Vimeo.

Miscellaneou$

ALS Ice bucket challenge

[vcfb id=10203881466450662]

Fala Philip Taylor na nominaciji. Ja nominiram Miljenko Bistrovic, Luka Mesarić i Denis Jelenčić.
Ko nezna za kaj se ide, nek pročita: http://www.vecernji.hr/hrvatska/i-u-hrvatskoj-pocelo-skupljanje-novca-za-oboljele-od-als-a-957366 (tu imate i broj žiro računa). Inače, slažem se i s Seth Godin koji ima ovo za reći po tom pitanju: http://sethgodin.typepad.com/seths_blog/2014/08/slacktivism.html; ali ako drugo niš, podigla se barem svijest o tome… There, my $.2, well actually 100, but who cares as long as it’s for a good cause, right? – I won’t miss it and it just might help someone…

Miscellaneou$

Look up

Especially today, when you’re reading this post on your computer/laptop/mobile phone/tablet, this message may be one of the last wake up calls for us. I myself sit at the desk for way too much hours a day, and even though I try to compensate by using a standing desk at home, I still somehow feel that we should try to go (at least few times a week) back to the old days when we were kids and we played in the playground, or built bows in the forest… Meh, I’ll stop writing here and go out for the rest of the day…

Quick tips, Sublime Text, Windows

How to use JSHint in Sublime Text on Windows machine

Since this is in the “quick tips” category I won’t go into what Sublime Text is, or why using JSHint is recommended, and that for it’s installation you need Node.js, I will just state the shortest possible path in how to install it, as I had some problems in doing this in a timely fashion:

//install jshint via npm
npm install jshint -g

In Sublime Text install JSHint Gutter via package manager.

And now, finally, since I’m on a windows machine, the problem was that once I got all this installed I had to set the Node.js path in JSHint Gutter plugin but with setting the absolute path to node.exe by using forward slashes:

{
  // Simply using `node` without specifying a path sometimes doesn't work :(
  // https://github.com/victorporof/Sublime-JSHint#oh-noez-command-not-found
  // http://nodejs.org/#download
  "node_path": "C:/Program Files/nodejs/",

  // Automatically lint on edit (Sublime Text 3 only).
  "lint_on_edit": false,

  // Automatically lint when a file is saved.
  "lint_on_save": true,

  // Highlight problematic regions when selected.
  "highlight_selected_regions": false
}
CodeSchool, NodeJS

How to get started with Node.js

Recently I started using CodeSchool to explore new languages/technologies in the web world, and I will post every Tuesday something new that I learn. So far, all I have for them is pure praise, so if you fancy learning something new go check them out. I like them because of one thing in how they do their presentations: first you watch a video in which they explain the concept and then, more importantly (at least in my case), you get the set of challenges where you yourself have to write the code in order to pass on to the next level – awesome! So I would say that their slogan “Learn by doing” is right on the spot.

This is by no means meant as a tutorial, but merely as my notebook where I write down things which I’ve learned. Ok, without further to do, lets check out what’s all this mumbo jumbo buzzword about Node.js.

Node.js (by Ryan Dahl) is in fact a wrapper, written in C, around V8 JavaScript runtime of Google Chrome engine which can be executed on the server.

Blocking vs non-blocking code: Node.js makes non-blocking possible by providing us with a callback function when the process (for example: file reading) is done.

var http = require("http");
var fs = require("fs");

http.createServer(function(request, response){
    response.writeHead(200);
    fs.readFile("file.txt", function(err, contents){
        response.write(contents);
        response.end();
    });
    response.write("This will most likely be printed before the file contents");
}).listen(8080);

To view this, visit http://localhost:8080  in your browser or do a curl request. Interesting thing to note though is that you will not get the same effect if you run it via curl in terminal and in browser, and here is my question on StackOverflow which helps answer why. Long story short (with more info about it later in the post):

…this is simply due to the behavior of the browser rendering engine which cashes the contents until response.end(); arrives, and then renders whole response. Socket.IO and this article should be of help

As explained in the StackOverflow post, I solved this by using Socket.IO (explained in more detail below in the post) and here is the simple example:

//timeoutTest.js
var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server);

server.listen(8080);

app.use(express.static(__dirname + '/'));

app.get('/', function (req, res) {
   res.sendfile(__dirname + '/timeoutTest.html');
});

io.sockets.on('connection', function (client) {
   client.emit('msg', "This prints right now on connection.");

   setTimeout(function(){
      client.emit('msg', "This prints out after 3 secs.");      
   }, 3000);
});

//timeoutTest.html
<!DOCTYPE html>
<html>
<head>
    <script src="/socket.io/socket.io.js"></script>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
        var server = io.connect('http://localhost');
        server.on('msg', function(data){
            $('body').append(data + "<br/>");
        });
    });
    </script>
</head>
<body>
</body>
</html>

Upon first execution of the code Node registers events and then it goes into the so called “event loop”.

Instead of response.write(string)  as the last command, you can put it in end() function like this response.end (string);

How to use event emmiters:

var EventEmitter = require('events').EventEmitter;

var logger = new EventEmitter();

logger.on('error', function (msg){
    console.log('error: ' + msg);
});

logger.emit('error', 'sth went wrong');

Same “#$! different packaging:

http.createServer(function(req, resp){}); 

//is the same as:

var server = http.createServer();
server.on("request", function(req, resp){};

Pip | ing:

var fs = require('fs');
var http = require('http');

http.createServer(function(request, response){
    var newFile = fs.createWriteStream('newFile.md');
    request.pipe(newFile);

    request.on('end', function(){
        response.end('uploaded');
    });
}).listen(8080);

//test like this:
curl --upload-file someFile.txt http://localhost:8080

File uploader:

var fs = require('fs');
var http = require('http');

http.createServer(function(request, response) {
	var newFile = fs.createWriteStream("readme_copy.md");
	var fileBytes = request.headers['content-length'];
	var uploadedBytes = 0;

	request.pipe(newFile);

	request.on('data', function(chunk) {
		uploadedBytes += chunk.length;
		var progress = (uploadedBytes / fileBytes) * 100;
		response.write("progress: " + parseInt(progress, 10) + "%\n");
	});

	request.on('end', function(){
        response.end('uploaded');
    });
}).listen(8080);

A side-note; console.log()  does in fact call process.stdout.write.

While calling your own modules, you require them without the “.js”

//custom_hello.js file
var hello = function() {
    console.log("hello!");
}
exports = hello;

//custom_goodbye.js file
exports.goodbye = function(){
    console.log("whot!?");
}

//--usage:
var hello = require('./custom_hello');
var gb = require('./custom_goodbye');

hello();
gb.goodbye();

When you’re requiring with “./” it searches in the current file directory. When, however, you search without it and just write the name of the module it first searches in the file directory for a folder named node_modules, then it goes folder up if it doesn’t find it in recursive.

npm install request  installs it locally and you can (only then!) require it in your code, whilst you should do a global installation  npm install coffee-script -g  if the module has an executable.

//package.json
{
  "name": "My Awesome Node App",
  "version": "1",
  "dependencies": {
    "connect" : "2.2.1",
      "underscore" : "1.3.3"
  }
}

package.json  file is cool as you can distribute the “barebones” app, which once downloaded can be fully installed by doing npm install  (it also installs sub-dependencies if needed).

Express – web application framework for Node.js: npm install express

var express = require('express');

var app = express(); //prior versions: express.createServer();
app.get('/:param', function(request, response){
    var param = request.params.param;
    response.send(param);

    //or, templates are also supported!
    response.render('tweet.ejs', {tweets: tweets, name: username});
});

app.listen(8080);

//tweet.ejs
<h1>Tweets for <%= name %></h1>
<ul>
    <% tweets.forEach(function(tweet)){ %>
        <li><%= tweet.text %></li>
   <% }; %>
</ul>

//but, also you need layout.ejs
<!DOCTYPE html>
<html>
    <head>
        <title>Some cool title</tile>
    </head>
    <body>
        <%- body %>
    </body>
</html>


Socket.IO
 – aims to make realtime apps possible in every browser and mobile device.
npm install socket.io

Simple chat application

var express = require('express'),
	app = express(),
   	server = require('http').createServer(app),
   	io = require('socket.io').listen(server);

server.listen(8080);

app.use(express.static(__dirname + '/'));

app.get('/', function (req, res) {
   	res.sendfile(__dirname + '/chat.html');
});

io.sockets.on('connection', function (client) {
   	client.on('join', function(name){
   		client.set("nickname", name);
   	});

   	client.on("msg", function(data){
      	client.get("nickname", function(err, name){
      		client.broadcast.emit('msg', name + ":" + data);
      	});
   	});
});

Very important thing to note here is that in order to make use of jQuery library you have to set the correct path to your js files in the app.use()  function.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
        var server = io.connect('http://localhost');

        server.on("connect", function(data){
            nickname = prompt("Your nickname:");

            server.emit("join", nickname);
        });

        server.on('msg', function(data){

           $('#recv').append(data + "<br/>");
	    });

	    $("#send").on("click", function(event){
            event.preventDefault();

            $('#recv').append($('#msg').val() + "<br/>");
    	    server.emit('msg', $('#msg').val());
    	});
    });
    </script>
</head>
<body>
    <input type="text" id="msg" name="msg" value="testets"/>
    <input type="submit" id="send" name="send"/>

    <div id="recv" name="recv"></div>
</body>
</html>

mongoDB –  open-source document database, and the leading NoSQL database written in C++. mongojs – A Node.js module for mongodb, that emulates the official mongodb API as much as possible. Installation via npm: npm install mongojs .

//db.js
var databaseURI = "mydb";
var collections = ["users"];
var db = require("mongojs").connect(databaseURI, collections);

module.exports = db;

//dbtest.js
var db = require("./db");

db.users.save({email: "[email protected]", group: "A"}, function(err, saved) {
  if( err || !saved ) console.log("User not saved");
  else console.log("User saved");
});

db.users.find({group: "A"}, function(err, users) {
  if( err || !users) console.log("No A group users found");
  else users.forEach( function(user) {
    console.log(user);
  });
});

In order for this to work mongoDB has to be installed on your system and it has to be running.  Installation instructions are clear and concise on their website, but a tl;dr is: download the zip package, unzip in c:\mongodb , make c:\data\db  folder, run c:\mongodb\bin\mongod.exe.

CodeProject, Projects

Carcassonne scoring board application

tl;dr:

The link to the application and the link to source code on GitHub.

Welcome

First of all – hi all!, this is my first post so go easy on me 🙂

I would like to give my thanks to James Clear, whose post pushed me to finally put this blog idea up and running. He has some great posts on his blog, which you may want to check out.

The story (rather short one)

Since I’m a big fan of Carcassonne board game and I happen to come accross this unique project on the web, I just had to make one for myself… It proved to be great for Carcassonne scoring, and just recently we started using it to track scores in Qwirkle board game.

Here are some pictures of how my version of the electronic carcassonne scoring board looks like:

Web application

The idea for a web app came naturally since the electronic counter was too cumbersome to carry around. I wanted to see what “the cool kids use” these days in web development so I went to try Yeoman with Angular generator.

Below is the image of the application on iPhone and you you can see how it looks like on your device by visitng the link: http://carcassonne-scoring-board.com

How to use this project?

First you have to clone it with git, and then run npm install and bower install in the cloned folder for all the dependencies to install themselves:

git clone https://github.com/Hitman666/carcassonne-scoring-board.git
cd carcassonne-scoring-board
npm install
bower install

To test my application run

grunt server

and you should see the application open up in your browser.

What I liked

  • because of this whole Yeoman development process I liked the thing that with only few commands you have the application scaffolded out for you and you don’t have to go and install all the scripts by downloading to your computer first
  • pushing to git only takes the crucial parts of your code and not the whole dependency folders (bower_components and node_modules) which are rarely small in size – imagine, you only need to push to the repository stuff that are crucial to the application, other stuff you keep locally, and it of course is way more convenient to clone (or later push for that matter) a 1MB project than say 20MB – everyone who wants to run your project clones it and installs the needed dependencies with two simple commands (npm install and bower install)
  • while writing the application you can have grunt server “turned on” and every change you make to your files it automatically reloads the page (also its running sass to css translation so you’re covered there also)
  • developing with the Yeoman workflow is just a bliss once you get a hang of it (and it actually doesn’t have a steep learning curve) – you’ll appreciate the fact that with one command you can make your code ready for deploying (minimize, concat, optimize images, etc…)
  • since I only scratched Angulars surface, I can say I liked the data binding, the ng-repeat directive and basically the general speed-up in dev process because of this. Anyways, you can take a look at this post for more info on why Angular rocks

Conclusion

Since this project was done while I was learning (still am) Angular.js, there is a lot space for improvement (especially code structure and logic), that’s why I encourage you to give suggestions on best (better) Angular practices, or even help out on GitHub. Btw, the code on GitHub is free to use, I didn’t put any restrictions on it so feel free to fork it, improve it, alter it to suit your needs. 

The icons are from The IconFactory, and the font is Lindsay Becker in case you’re wondering.

Oh and, I would love to hear what do you think about this and for which game you used it to track scores?

Link to this article on CodeProject

Page 8 of 8« First...«5678

Recent posts

  • Discipline is also a talent
  • Play for the fun of it
  • The importance of failing
  • A fresh start
  • Perseverance

Categories

  • Android (3)
  • Books (114)
    • Programming (22)
  • CodeProject (35)
  • Daily Thoughts (77)
  • Go (3)
  • iOS (5)
  • JavaScript (127)
    • Angular (4)
    • Angular 2 (3)
    • Ionic (61)
    • Ionic2 (2)
    • Ionic3 (8)
    • MEAN (3)
    • NodeJS (27)
    • Phaser (1)
    • React (1)
    • Three.js (1)
    • Vue.js (2)
  • Leadership (1)
  • Meetups (8)
  • Miscellaneou$ (77)
    • Breaking News (8)
    • CodeSchool (2)
    • Hacker Games (3)
    • Pluralsight (7)
    • Projects (2)
    • Sublime Text (2)
  • PHP (6)
  • Quick tips (40)
  • 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