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 will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

My question was:

I am wondering how to rewrite this code to work with qq:

  $containerRight = <<<qq
    <div class="container_right">
        {echoLikeBox()}

        <div class="join_us"><a href="#"><img src="images/join_us.png" width="304" height="44" alt=""></a></div>

        <div class="box2"><a href="#"><img src="images/twitter_big.gif" width="304" height="292" alt=""></a></div>

        <div class="box3"><a href="#"><img src="images/facebook.jpg" width="304" height="257" alt=""></a></div>

        <div class="box4"><a href="#"><img src="images/google_ads.gif" width="304" height="164" alt=""></a></div>
    <!-- container_right end --></div>;
    qq;
    echo $containerRight;

The problem is that I don’t know how to echo function inside the <<<. The code for the echoLikBox() is this:

function echoLikeBox()
{
    $likeBox = <<<qq
    <div class="box1">
            <div class="box1_lft"><a href="#"><img src="images/tweet.jpg" width="108" height="20" alt=""></a></div>
            <div class="box1_rht"><a href="#"><img src="images/like.jpg" width="82" height="20" alt=""></a></div>
            <div class="clear"></div>
    </div><!-- box1 end -->
    qq;
    echo $likeBox;
}

edit: found the solution here: Calling PHP functions within HEREDOC strings

The answer, by user Gavin Anderegg, was:

You may want to change the “echoLikeBox()” function to, instead of echoing its contents, store them as a string. You can’t make a call to a function inside of heredoc strings, but you can output variables. So, for example, you could have:

function echoLikeBox()
{
    $likeBox = <<<qq
    <div class="box1">
            <div class="box1_lft"><a href="#"><img src="images/tweet.jpg" width="108" height="20" alt=""></a></div>
            <div class="box1_rht"><a href="#"><img src="images/like.jpg" width="82" height="20" alt=""></a></div>
            <div class="clear"></div>
    </div><!-- box1 end -->
qq;
    return $likeBox;
}

and then just

$likeBox = echoLikeBox();

$containerRight = <<<qq
    <div class="container_right">
        $likeBox

        ...

inside of the main body.

I was just accepted to the Webfestival 2015 competition, so fingers crossed!

C/P from the official site (since, well, this is for Croatian users – so, fellow citizens, do join in!):

Tema ovogodišnjeg Webfestivala su osobne web stranice koje se u kontekstu natjecanja promatraju kao zbirka digitalnih sadržaja koje prikazuju napredak, razvoj i postignuća nekog pojedinca.

Cilj natjecanje je ukazati na potencijal i važnost osobnih web stranica u vremenu cjeloživotnog učenja i kontinuiranog stručnog usavršavanja te potaknuti CARNetove korisnike, ali i sve ostale, na izradu osobnih web stranica. Također, tijekom trajanja natjecanja ćemo kroz radionice i webinare upoznati korisnike s pojedinim alatima i mogućnostima za izradu osobnih web stranica te ćemo naposljetku autore najboljih osobnih web stranica i nagraditi vrijednim nagradama.

Svi zainteresirani autori mogu se prijaviti u dvije kategorije – Osobne stranice u obrazovanju ili Profesionalne osobne web stranice putem prijavnice dostupne nahttp://webfestival.carnet.hr/2015_prijava . Prijava na natjecanje će biti moguća do 30. rujna 2015. kada će Ocjenjivački sud započeti s ocjenjivanjem pristiglih prijava.

Autorima osobnih web stranica koje stručni Ocjenjivački sud ocijeni najboljima u svakoj kategoriji bit će dodijeljena nagrada u okviru CARNetove korisničke konferencije CUC 2015 koja se ove godine održava u Dubrovniku od 18. –  20. 11. 2015.

Pozivamo sve zainteresirane da se s detaljima natjecanja, pravilima sudjelovanja te kriterijima ocjenjivanja upoznaju na webu natjecanja  te da se prijave na natjecanje.

My notes (on Croatian [did you notice I added the translate functionality?]) from the book Zločin u židovskoj četvrti by Ernesto Mallo:

Smrt je jedino što ne dopušta repliku.

Bol ima vrlinu da osobe načini dubljima.

Kad se čovjek rodi kao bogataš, doživljava siromaštvo kao nepravdu.

Strah je kruh vojnika.

Svako biće, samom činjenicom što živi, odašilje zračenje koje se projicira u prostoru. Kao u slučaju zvijezda, to zračenje dalje putuje, možda vječno, čak i kad je onak koji ga je odašiljao nestao.

Ne voljeti iz straha od patnje je kao ne živjeti zbog straha od umiranja.

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 will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

My question was:

Let’s say you have two arrays of arrays with the same structure but different count of arrays in them:

$arr1 = array(array(1,"b"), array(2,"a"), array(5,"c"));  
$arr2 = array(array(3,"e"));

Now, the data in the $arr1 and $arr2 is sorted, and now what I would like it to merge these two arrays, so I did this:

$res = array_merge($arr1, $arr2);

And then I get an output like this:

1-b  
2-a
5-c  
3-e

But, I would like to have a sorted $res also like this:

1-b  
2-a
3-e  
5-c

I wonder if there’s a function in PHP to do this automatically, without me having to write my own function? Or, please advise me on which is the best approach for this if I want to (later on) add sorting by the next parameter so the output would be like this

2-a  
1-b
5-c  
3-e

The answer, by user fieg, was:

You can first merge the arrays and then sort the final array.

You are probably looking for a multi-sort function. I usually use this function (I found this functions somewhere on the internet years ago, credits go to the original author):

/*
 * sort a multi demensional array on a column
 *
 * @param array $array array with hash array
 * @param mixed $column key that you want to sort on
 * @param enum $order asc or desc
 */
function array_qsort2 (&$array, $column=0, $order="ASC") {
    $oper = ($order == "ASC")?">":"<";
    if(!is_array($array)) return;
    usort($array, create_function('$a,$b',"return (\$a['$column'] $oper \$b['$column']);")); 
    reset($array);
}

You can use it like this:

array_qsort2($res, 0, "ASC");

This is indeed awesome, as it hopefully means that Ionic is here to stay, so that all of us who use it won’t have to fear for it’s future – since it’s all awesome and stuff :). True, this seems more inclined towards business people, but the sole fact that with this more people will know about Ionic and won’t look you strangely when you say you’re developing iOS/Android apps with it by using one codebase.

Some news coverage about this:

• IBM and Ionic Empower Business Users to Accelerate Mobile App Development
• Make everyone a hacker: IBM MobileFirst & Ionic empower business users to prototype their own apps

My quotes from the book Start with why by Simon Sinek:

There are leaders and there are those who lead. Leaders hold a position of power or influence. Those who lead inspire us.

…quicker, cheaper option over the better long-term solution. Just like the habitual dieter. They never had the time or money to do it right the first time, but they always seem to have enough time and money to do it again.

Companies try to sell us what they do, but we buy why they do it.

Creative advertised their MP3 player as a 5GB MP3 player. It is exactly the same message as Apple’s ‘a thousand songs in your pocket’. Creative told us what their product was and Apple told us why we need it.

People with Apple laptop computers believe that they convey a message when opening them up on the airports, and that’s why the love to do it.

To be a good salesman you have to believe in that what you are selling.

When you compete against someone else, no one wants to help you. But when you compete against your self everyone wants to help.

What if we show up to work every day, just to be better than our selves? Be better than you were yesterday, and not than someone else.

I just came home from Weblica, the very first ever developers conference in my Međimurje county. All in all, a very good conference and I hope this is just the first one in the years to come! The entrance was free and every attendee got a T-Shirt. Since I was active with questions I got a nice tiblica with an USB instead of meat inside 🙂 as you can see on the featured image above. Below are my notes and some pictures, and a friend of mine uploaded few videos (including me using Oculus Rift) on youtube playlist.

ECMA Script 6 – the future is JavaScript

• Presenter Ratko Ćosić, MCSD, MCSE, MCITP, …
• JavaScript was the language of 2014
• ES6 (Harmony) features:
  • array functions (var sq = x => x*x)
  • block level scope (by using keyword let)
  • classes

    class Shape {
        id; x; y;
    
        constructor (id, x, y){
            this.id = id;
            this.name (x,y);
        }
    }

  • inheritance (extends keyword)
  • modules (kind of a merge between CommonJS and AMD, support for import, export)
  • promisses – similar to jQuery Deffered object
  • constants
  • new regular expression functions
  • new Math functions
  • symbols
  • typed arrays
  • default parameters
  • generators
  • map objects
  • collections (let s = new Set();)
  • better support for strings with for example backticks (`), includes(), startsWith(), endsWith() functions
• Transpilers => conversion of JS from one version to another (Traceur, 6to5, Babel, TypeScript?
• TypeScript – superset of JS, compiles to JS (ES5)
  • Angular2 uses TypeScript!
  • short types, interfaces, generics
• Open question: will SPA frameworks (Angular, Ember, Aurelia) be needed when we’ll have ES7???
• Browsers will be the new OS-es!
• picture time!:
  

node.js (sa sirom i vrhnjem)

• Presenter Davor Tarandek, Tria d.o.o.
• io.js uses the newer V8 engine than does node.js
• asynchronity is hard to grasp
• pm2 is awesome and it overpassed forever module
• I actually wrote three rather extensive posts on the topic of the MEAN stack, that’s why I have so little notes from this lecture
• picture time!:
  

Ember.js in practice

• Presenter Nikola Begedin, Coder.ly
• convention over configuration
• ember-cli is the thing
• allows ES6 syntax (Babel transpiler mentioned earlier)
• uses npm and bower
• ember is not ember-cli (is what the Ember team recommends)
• Some cool tools they use
  • Error reporting – Sentry
  • Task tracking – Asana
  • For chat – Slack
  • Heroku, Mandrill, Stripe, Amazon S3, Cloudfront, KissMetrics, Segment, NewRelic, CodeClimate, …
• Recommended books to start Ember – Ember CLI 101 (google for it, it’s suppose to be free ;), if not, don’t mind spending a buck or two)
• Talking Code podcast on iTunes
• picture time!:
  

Modern web using Microsoft tools

• Presenter Miroslav Popović
• Microsoft Studio vOld = .NET, 2003, 2005, 2008, 2010
• Change started with ASP.NET MVC
• 2012/2013 – Interface design, new web editor, GIT
• HTML support – full HTML5 IntelliSense, code snippets, data-* attributes
• JS – ECMA Script 5 support, strict mode support
• CSS – IntelliSense CSS3 validation, color selection, vendor prefixes, CSS drag/rop
• Browser Link
• Other stuff: CoffeeScript coloring, Mustache, Handlebars, Knockout bindings, Angular Directives, LESS and SASS preprocessors, TypeScript
• Community Edition FREE for up to 5 devs?!
• WebEssentials
  • open source extension for VS
• 2012/13 VS added Node.js based tools
  • static bundling & minification, image optimization & sprite generating, JS Hint, Source maps, LESS/SASS and CSS preview, CoffeScript preview
• Visual Studio 2015
  • new web structure
  • package managers – NuGet, npm, bower, jspm
  • client side build tools – MSBuild, Grunt, Gulp, TaskRunner Explorer
• Visual Studio Code – doesn’t (yet) support plugins like Sublime Text for example, but that’s a TODO
• Other cool tools: Resharper, SideWaffle, Github for VS, Chutzpah (Jasmine, Qunit, Mocha)
• picture time!:
  

Effective software team collaboration

• Presenter Zvonimir Juranko, Colombio
• Colombio app
• dare to disagree
• 85% of people fear the conflict with their boss
• The Marshmallow Challenge
• LEAN canvas
• be prepared to fail!
• genchi genbutsu – try it out yourself!
• make a MVP (minimum viable product) and build upon that
• picture time:
  

Oculus Rift – virtual reality for everyone

• Presenter Tibor Kozjak, Infenso d.o.o.
• there are some issues to be solved still
• price around 500$ with shipping to Croatia
• I tested the device after the talk and I guess in my case the verdict is “it’s really not for everyone, since I’m probably feeling sick and dizzy still :O”
• picture time!:
  

Hope to see you next year!

edit: A cool video made by the organisers after the conference:

Weblica 2015 from TICM on Vimeo.

Touch Pianist is an awesome free app which

is a musical toy / instrument that allows the user to perform hard-to-play classical piano music favorites (from composers like Beethoven, Mozart, Bach, Satie, Debussy to name a few) just by tapping the rhythm of the piece’s par

From developers point of view, the app was made using Pixi.js. Since this raised quite a buzz, I’m expecting to see Attack of the Clones 😉

Recently I bought a years worth subscription over at Pluralsight (here’s my portfolio of passed courses), and here I’ll be posting my notes from the courses that I attended. Please note that this is not meant to be as a sort of tutorial, just as the name says – notes for myself :). However, one could get some useful content from these posts as I’m noting things that catch my attention.

Here are my notes from the WebGL and Three.js fundamentals course. I rated the course 4/5 and all in all it’s a good introduction to WebGL with Three.js.

//rant: I passed the exam with the whopping 100%, and actually I feel that since Pluralsight is very famous and all that, that they could improve on the quality (it’s just too easy and does not go into detail) of these certification tests.

var scene = new THREE.Scene(); //acts like a container of all items

var renderer = new THREE.WebGLRenderer(); //how our content will be displayed on the page (WebGL, Canvas or SVG renderers)

It uses a Cartesian cordinate system (x,y,z). If you don’t specify the position- it will be positioned at (0,0,0).

It has a perspective and ortographic camera:

camera = new THREE.PerspectiveCamera(
35, =>fov
window.innerWidth / window.innerHeight,
1, => near
1000 => far planes
);

You can use your dev tools console (Chrome) or Firebug (Firefox) and access items if you properly export the objects in the code (return {scene: scene}); code snippet in the listing below):

//app.js file
var example = (function(){

    "use strict";
    
    var scene=new THREE.Scene(),
    renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer(),
    light= new THREE.AmbientLight(0xffffff),            
    camera,        
    box;

    function initScene(){
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.getElementById("webgl-container").appendChild(renderer.domElement);

        scene.add(light);
                          
        camera = new THREE.PerspectiveCamera(
        35,
        window.innerWidth / window.innerHeight,
        1,
        1000
        );
                            
        camera.position.z= 100;            
        scene.add( camera ); 

        box = new THREE.Mesh(
        new THREE.BoxGeometry(20,20,20),
        new THREE.MeshBasicMaterial({color: 0x00FF00})
        );

        box.name="box";   

        scene.add(box);

        render();
    }

    function render(){
        box.rotation.y +=0.01;
        
        renderer.render(scene, camera); 
        requestAnimationFrame(render);        
    }

    window.onload = initScene;
    
    return {
        scene: scene
    }

})();

//HTML file
<!DOCTYPE html>

<html>
    <head>
        <title>WebGL with three.js Fundamentals</title>       
    </head>

    <body>
    	<div id="webgl-container"></div>
    	
    	<script src="scripts/three.js"></script><!--DL this from official site-->
    	<script src="scripts/app.js"></script>
    </body>
</html>

Accessing it from Chrome Console as mentioned above:

var a = example.scene.getObjectByName('box');
a.position.x = 10;
a.position.set(0,2,2);

• Degrees to radians formula: radians = degrees *pi/180
• Meshes – geometry + material
• use stats.js
• different existing controls: FlyControls.js, OrbitControls.js
• Collision detection
• Raycasting – returns objects that are on some other objects “ray” and Box3.
• Physics: PhysiJS is a wrapper for Ammo.js which is a port of C++ Bullet
• Supports gravity, mass property, friction, restitution (bounciness)

Cool 3D frogger game made by the author: https://github.com/alexmackey/threeJsFrogger

I was testing Jenkins and as it doesn’t support localhost addresses I found Localtunnel, which, and I qote,

allows you to easily share a web service on your local development machine without messing with DNS and firewall settings.

Localtunnel will assign you a unique publicly accessible url that will proxy all requests to your locally running webserver.

You can  install it via npm:

npm install -g localtunnel

Then, start your project on some local port (for example 1337), and make sure all works well locally. Now, request a tunnel to your local server:

lt --port 1337

And you should get an output like:

your url is: https://awesome.localtunnel.me

You can use this link now and any requests to that url will be routed to your service on port 1337.