Celebrating and summarizing my 30 something’s

I dedicate this post to my wonderful wife Katrin and our fantastic boys William and Maximilian. I love you very much.

The Beginning of the End

It was a perfect, wonderful and sunny spring day the 16th of April 2004 and I´d invited a big bunch of family, close friends and colleagues from work to attend my transform into middle age.

The invitations for this feast where my first video invitations and my biggest challenge back then was where to store this rather large files 4-5 Mb! Remember this was 1 year before YouTube and people had size limits on their email accounts. I ended up creating my first web site just to store them on there so I could pass email links to everyone. What I didn’t know was that I had taken my first steps to my own company.

The party was a great success and I remember it still. Some of you made it right through to early morning the 17th of April 2004. Thank you it was awesome!

Khaboom Design my very own company

The seemingly small step to create my own website for my video invitations led to the question, what else I can put here? And so Khaboom Design (http://web.archive.org/web/20100813013631/http://www.khaboom.se/) was born, a small visualization company that made 3D visualizations for customers and homepages.

khaboom

During the small time period I actually had time to run my own company I made one homepage http://www.elcars.se/ and a couple of 3D visualizations like a golf course, apartment remake and an indoor menage (ridhus in Swedish). Lots of personal joy looking back at those naïve visualizations here http://web.archive.org/web/20100813013703/http://www.khaboom.se/portfolio.html

A career

Katrin and I started our family early, I was in fact 25 when we had William and 27 when Maximilian appeared. I was determined to spend as much time as I could with my kids as they grew up and I did. Our careers would have to hold on because of course you need a career don’t you? More on that later perhaps.

So in 2007 with William at school and Max in preschool I decided that the time had come for my career.

I’d always had this dream of joining Microsoft so I hunted down my dream and found that Microsoft Consulting Services were looking for senior architects to join their team. This was late December 2006.

I still remember doubting my own abilities and asking Katrin several times if I should go for it. Katrin had more confidence (as always) in me then myself and she cheered me on and I finally sent my application to Microsoft in early January 2007. After 2 interviews and 1 personality/intelligence test I finally made it past the recruitment firm! Then after 3 more interviews with the several people at Microsoft in Kista I finally signed the contract. This was in late April early May 2007.

microsoft

I remember that Katrin threw me a surprise party when the contract was signed, thank you so much for that and all the support during the whole process. I love you so much.

This was also the start of a new career choice for me; working as a Consultant. I had previously only worked as regular staff at software companies so I was about to get my life turned upside down. But the funny thing is that I didn’t even reflect upon what working as a Consultant meant until a couple of months after my start at Microsoft and until today it’s what I do and I love the freedom that comes with it.

consultant

About 3 years after joining Microsoft I realized that a career isn’t worth much if you can’t enjoy your family life as well so I decided to move on. This time I used a new method when looking for a new job, social media.

Entering the Social Media world

I used social media a lot for a period during my 30’s and I got reeeeaaaally hooked. I was watching the notifications every minute waiting for some news. Looking back I must confess that it was like a drug or a compulsion that was really hard to get rid of. Typically me I throw myself into new technologies, can be a good characteristic at sometimes but sometimes not so good.

social-media-logos

And then came Instagram, a social way of sharing pictures. Being a person that likes to think/talk in pictures this seemed to be the perfect fit for me. The old “a picture is worth a thousand words” worked perfectly for me and today I rather use Instagram over other Medias.

But in the end Facebook and Twitter both gave me a starting point to my last two jobs so lots of good have come in my life from Social Medias too.

Here’s a list ranking my Social Medias:

Favorites
  • Instagram
  • Hangout
Occasional
  • Twitter
  • Facebook
Rarely
  • LinkedIn
  • Pinterest
  • Vine
  • Yammer
  • GoodReads

The travelling Häggmark’s

Don’t know if it’s my Portuguese heritage or the fact that my parents took us kids travelling abroad every year when we grew up but travelling was a very important part of this past decade. Thank you mom and dad for teaching me the joy and importance of travelling together as a family. I love you very much.

For the Häggmark’s it all started with a fantastic 2 week vacation to Fig Tree Bay, Cyprus in 2005 and ever since our family has made it our top priority to travel at least once a year.

By the way Fig Tree Bay or Protaras as it’s called is our absolute favorite place outside of our own home and I think we’ve been there 14-15 times the last 10 years. We’ve made some great friends there and we always look forward going there again.

travel

I feel very blessed to have had the possibility to make Protaras our second home and I thank our friends in Protaras very much for taking such good care of us all these years. Thank you very much, you know who you are.

By the way when this post gets published we’re in Protaras celebrating my 40th birthday with our friends.

Although we love Protaras, it isn’t the only place we’ve been to:

  • Hurghada, Egypt
  • Sal, Cabo Verde
  • Barcelona Spain
  • Alicante, Spain
  • Rome, Italy
  • Athens, Greece
  • Gran Canaria, Spain

These are all the places we’ve visited during this decade aside from Protaras. Hurghada has a special place (at least for me) in my heart after Protaras and I wrote a post about that vacation here.

Pets and passion for animals

Katrin and I have always had a strong passion for biology and animals in particular so this past decade was no exception from that. We have own 3 rabbits, 2 Phodopus (dvärghamster) and since 2½ years back our lovely dog Tinto. Besides from those pets we still own a horse but he is in the south of Sweden on loan.

tinto

Tinto has been a fantastic addition to our family and he brings lots of happiness and excitement. For the boys he has been a great responsibility and friend to come home to. Thank you so much Tinto for all that you give and do.

10 year anniversary!

Last year me and Katrin had a couple of wonderful days during our 10 year anniversary in Nerja, Spain.

Let me tell you 10 years go by real fast when you’re together with your best friend and soul mate. Of course we’ve had our share of ups and downs but whatever happens in the future I feel very lucky to have shared so many good and happy memories with the girl of my dreams. She is fantastic with the kids and me, she is brave, intelligent and so kind to everyone especially my mom.

katrin

Thank you for everything you’ve done for me, for every encouraging word you’ve given me and for letting me be myself for good and for worse. I love you.

Knock, knock. Who’s there? Alzheimer’s…

Even though this post is about summarizing my decade I’m not the only one who has gotten older ;-)

I’ve watched how our kids have grown into kind, intelligent, happy and humorous young men with big hearts and if I had to give one advice to the 30-year-old Hugo it would be to savor every day with the kids even more because time really flies away when the kids start school. I love you very much William and Maximilian.

killarna

My mom and dad have of course also grown older and last year my mom was diagnosed with Alzheimer’s. This was a tough period for everyone and especially for my dad who only just recently seems to have found his way back to life.

Moms diagnose was a real life changing moment for me too, I read a lot about the disease and folks my future has a high risk of having a real sad ending with Alzheimer’s.

So I’ve picked up even more brain activities like all sorts of quiz games like QuizUp, WordFeud and so on. I’ve dedicated almost all commuting from and to home from work doing lots of programming and I’ve learnt NodeJs during this time. Activating my brain has been great fun but at sometimes exhausting.

Next thing to work on is my balance (thank god I’m a Snowboarder) and being even kinder to people as this great TED talk says.

Uncle Hugo

We’re blessed with two great young men but during this decade my sister also had two kids of her own. I remember I got very emotional upon meeting them for the first time, brought back a lot of great memories from my time with our kids.

It was a proud moment the first time I was called uncle and I love my sister’s kids, thank you for letting me be the “funny trampoline uncle”.

Whom have I become

I guess you don’t change very much in your core self but I believe that some traits of the 30 years old Hugo have enhanced and others have even disappeared. For instance I’ve become much more relaxed and more comfortable in letting go whereas the 30-year old Hugo looked for control and was stressed about the future, career and kids. (Naturally perhaps?)

I’m still very much curious about the world, technology and people and I still love it when I dive head first into some new technology or gadget without hesitation. That’s me I think, I don’t wait around for someone to show me stuff I Just go ahead and Do It! I hope a never lose this ability to always learn new stuff.

My patience has grown as much as my curiosity and anyone that has kids on the verge of becoming teenagers know why.

But one thing still boggles me, I still don’t know what to do when I grow up. Maybe that’s what this next decade will show if I ever grow up.

Note to self,

Hugo

Stop doing TDD and start doing BDD with SharePoint!

I’m certainly one of those guys that like to do TDD and If you ask people what differentiates me from other developers you will almost certainly get the answer that I’m really serious about quality.  

But after my last project I’ve been become “wiser” or more careful with what kind of tests to use when and where. So why the unusually provoking title?

Last week I got a tweet from my friend Johan about tips on how to do TDD in SharePoint with assemblies that reside in the GAC.Stop doing TDD and start doing BDD with SharePoint

For a brief second I thought that I would just give him a list with the different methods/hacks/workarounds I’ve seen and then I thought:

“you’re only fighting the symptoms, we deserve better”

SharePoint lacks good mockable Interfaces and serves you with lots of sealed classes and static classes. That’s not a great foundation for TDD.

Furthermore we have the whole GAC thingy, also not a great foundation for TDD. If only I would have received a euro for every time someone in my last project asked me why the tests were not passing and whereby I asked “do you have an older assembly in the GAC?”

I can’t see how trying to do TDD in SharePoint will lead to anything but workarounds or hacks to get it working.

Another aspect of truly doing TDD is that you really need a vast knowledge of the domain and IMHO very few developers doing SharePoint development have the necessary knowledge.

In fact I did a test with two groups in my last SharePoint project. Both groups were told to TDD a small Document Set feature. Both groups were given 1½ hour. I coached the second team and 5 min into the exercise I told my group that let’s skip TDD and just do the feature.

The result was spectacular as you might have guessed. The first group almost didn’t make any progress at all and the second group didn’t come very far either. Why? Not enough knowledge of the domain and no mockable interface makes it almost impossible to do TDD in my opinion.

Still not convinced? Well it’s a free world go ahead, try it, fail and become wiser yourself.

I’ll even give you some methods I’ve used/seen/hacked/worked around the last couple of years (without any specific order of importance):

  1. Set Assembly version to 1.0.0.*, this way you won’t have any issues with the GAC thingy. But you’ll have lots of other side effects that you need to mitigate/automate.
  2. Retract dll’s in test setup/teardown.
  3. Write you class under test in the test project and then move it. Johan wrote about a great spin-off on this method here.
  4. Wrap SharePoint artifacts with your own Interfaces.
  5. Separate your domain from the infrastructure, and TDD the domain object only leave the infrastructure alone!
  6. Use a mocking technology like Fakes/Shims/Moles/TypeMock. This demands a really deep knowledge and understanding of SharePoint so if you think this is something you’d like to try, I say beware you’re treading in deep dark waters.

What you should do instead is to treat SharePoint as the framework it is much like the way you would treat the .Net Framework.

BDD is a nice way to do this, you invest more time in designing behaviors or capabilities of your application using SharePoint as one of those capabilities.

But that’s just my very personal 2  cents,

Hugo

My very own Taskmanager in HTML 5, SignalR, Nancy and AngularJS

image

This is part 2 of this blog post here and I really encourage you to read it before continuing reading this blog post.

Anyway the last thing to add to my small Taskmanager was AngularJS. I started to think about how to get SignalR and AngularJS working together and I got some real good pointers from the post “A Better Way of Using ASP.NET SignalR With Angular JS”.

I had another challenge with my existing code like the following statement in the JavaScript:

var chart = new Chart(document.getElementById(“canvas”).getContext(“2d”)).Line(lineChartData, options);

I could just move this code into my AngularJS controller but that seemed very ugly. So I found someone that already wrapped ChartJS in AngularJS directives into a small JavaScript library called Angles. So now when I was done reading others blog posts I felt ready to move on.

The AngularJS magic

Firstly I just pulled down AngularJS.Core and bootstrap NuGet packages.

  • Install-Package AngularJS.Core
  • Install-Package bootstrap

Then I added my own app.js JavaScript file that would contain my small application.

image

So far everything is pretty straightforward don’t you think?

Creating the SignalR connection in AngularJS

From the the post mentioned earlier I concluded that I needed to create a AngularJS service to hook up all my SignalR magic. The reason for this is that AngularJS services are singletons and that sounds perfect for this implementation.

var taskManagerApp = angular.module('taskManagerApp', ["angles"])
    .service('signalRSvc', function ($rootScope) {
        var initialize = function () {
            var cpuHub = $.connection.cpuHub;

            cpuHub.client.cpuInfo = function (machineName, cpu) {
                $rootScope.$emit("cpuInfo", machineName, cpu);
            }

            $.connection.hub.start();
        };

        return {
            initialize: initialize
        };
    })

Some important points in the code snippet above:

  • [“angles”], tells my AngularJS app to use the Angles library
  • .service, tells my AngularJS app that the next thing is a service named ‘signalRSvc’
  • the $rootScope.$emit, tells my AngularJS app to broadcast the current machineName and cpu to my controller.

The AngularJS Controller

Lets move on to the Controller code, this is where we control our view which is my index.html.

.controller('ChartController', function ($scope, signalRSvc, $rootScope) {
        $scope.machineName = "localhost";
        $scope.cpuChartLabel = "Total % Processor Time";
        $scope.lineChartData = {
            labels: [""],
            datasets: [
                {
                    fillColor: "rgba(241,246,250,0.5)",
                    strokeColor: "rgba(17,125,187,1)",
                    pointColor: "rgba(17,125,187,1)",
                    pointStrokeColor: "#fff",
                    data: [0]
                }
            ]
        };

        $scope.options = {

            //Boolean - If we show the scale above the chart data			
            scaleOverlay: false,

            //Boolean - If we want to override with a hard coded scale
            scaleOverride: true,

            //** Required if scaleOverride is true **
            //Number - The number of steps in a hard coded scale
            scaleSteps: 10,
            //Number - The value jump in the hard coded scale
            scaleStepWidth: 10,
            //Number - The scale starting value
            scaleStartValue: 0,

            //String - Colour of the scale line	
            scaleLineColor: "rgba(0,0,0,.1)",

            //Number - Pixel width of the scale line	
            scaleLineWidth: 1,

            //Boolean - Whether to show labels on the scale	
            scaleShowLabels: true,

            //Interpolated JS string - can access value
            scaleLabel: "<%=value%>",

            //String - Scale label font declaration for the scale label
            scaleFontFamily: "'Arial'",

            //Number - Scale label font size in pixels	
            scaleFontSize: 12,

            //String - Scale label font weight style	
            scaleFontStyle: "normal",

            //String - Scale label font colour	
            scaleFontColor: "#666",

            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: true,

            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",

            //Boolean - Whether the line is curved between points
            bezierCurve: false,

            //Boolean - Whether to show a dot for each point
            pointDot: false,

            //Boolean - Whether to animate the chart
            animation: false,
        };

        signalRSvc.initialize();

        var updateChartData = function (machineName, cpu) {
            if ($scope.lineChartData.labels.length &gt; 20) {
                $scope.lineChartData.labels.shift();
            }

            $scope.lineChartData.labels.push("");

            if ($scope.lineChartData.datasets[0].data.length &gt; 20) {
                $scope.lineChartData.datasets[0].data.shift();
            }

            $scope.lineChartData.datasets[0].data.push(cpu);
        }

        $scope.$parent.$on("cpuInfo", function (e, machineName, cpu) {
            $scope.$apply(function () {                
                $scope.machineName = machineName;
                updateChartData(machineName, cpu)
            });
        });
    });

Some important points in the code snippet above:

  • .controller, tells my AngularJS app that the next thing is a controller named ‘ChartController’ and it uses a function that takes our service signalRSvc as a parameter.
  • signalRSvc.initialize();, tells my AngularJS app to initiate the SignalR connection.
  • $scope.$parent.$on(“cpuInfo”, function (e, machineName, cpu), tells my AngularJS to listen to calls from “cpuInfo” and this will then call into the updateChartData

The view binding it all together

Having done all the hard lifting from index.html to app.js file we end up with a very simple index.html like so

    <div class="container">
        <div ng-app="taskManagerApp">
            <div class="jumbotron" ng-controller="ChartController">
                <h1>{{machineName}}</h1>
                <div class="span" %>
                    <h3>{{cpuChartLabel}}</h3>
                    <canvas id="lineChart" data="lineChartData" options="options" linechart></canvas>
                </div>
            </div>
        </div>

        <!-- Placed at the end of the document so the pages load faster -->
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
        <script src="Scripts/angular.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <script src="Scripts/chart.min.js"></script>
        <script src="Scripts/angles.js"></script>
        <script src="Scripts/app/app.js"></script>
        <script src="/signalr/hubs"></script>
    </div>


I sure learned a lot from this very small SPA and I hope that some of you have too.

Cheers,

Hugo