Posts on Piotr Kościelniak - passionate programmer

Free online text to mp3 converter

Tue, 06 Mar 2018 22:19:25 +0100

Once upon a time, I had a meeting and we intended to discuss a particular document during this meeting. Of course, the other participants expected me to be prepared by reading this document. The content of this document was so fascinating that I waiting until the very last moment to read it and finally I realized that I didn’t have any time to read it. In case you haven’t realized, that last sentence was a bit of sarcasm.

What ended up happening was that 30 minutes before the meeting, I still didn’t know what was it that bloody document but I knew I needed 20 minutes to commute to the meeting. Driving a car and reading is not a good idea even during rush hour. But necessity is the mother of invention. I thought “Maybe I can convert this document to audio and I listen to it during the ride?” I would be offline during the ride so I thought I could convert this text to mp3, download the file to my phone and listen to it during my journey. “Yeah…that should be easy”, I thought.

Not at all. The document was a bit lengthy, that’s why I was procrastinating until the final moment. I started looking for an online tool to change my text to an audio format, preferably mp3, but I failed. Every online tool had some drawback. Lack of support for Polish, a limited of number of characters, and of course some of them required payment and I was looking for something free. The truth is, I was lost during the meeting. I sat there awkwardly, pretending that I knew the contents of the document, nodding along with what the other speakers were saying.

I promised myself then and there: next time I would be prepared. I would create a tool to save my ass when this kind of situation happened again. This is how the text2mp3 app originated.

It is a very simple tool which allows you to paste some text, convert it to audio, listen to it online or download it to your device. Nothing remarkable but very useful. It is free and it allows you to convert text as long as 5000 characters. Additionally, it has unpretentious, succinct GUI designed by a programmer. That was also sarcasm in case you didn’t pick it up. Please feel free to use it. Please enjoy it. And if it saves your ass please buy me a coffee.

Self-signed certificate? All you need is go

Tue, 19 Dec 2017 22:13:28 +0100

Are you writing code in Go (Golang)? And do you sometimes need to create a self-signed test certificate? I have, and that’s why I am writing this post to remind myself (and you) how to do this. I’ll be happy if someone else will also benefit from this information. Do this to create a self-signed test certificate:

On Linux:

go run $GOROOT/src/crypto/tls/generate_cert.go --rsa-bits 1024 --host 127.0.0.1,::1,localhost --ca --start-date "Jan 1 00:00:00 1970" --duration=1000000h

On Windows:

go run %GOROOT%/src/crypto/tls/generate_cert.go --rsa-bits 1024 --host 127.0.0.1,::1,localhost --ca --start-date "Jan 1 00:00:00 1970" --duration=1000000h

After executing this command you get the files cert.pem and key.pem. And that’s it!

‘Mine’ field or minefield?

Thu, 16 Mar 2017 22:48:16 +0100

Sometimes you write a piece of code or feature, or even a whole application by yourself. In some cases, no one else knows what you’ve written. Sometimes you are glad for this freedom. Freedom is the right word because you’re glad to have your code the way you want it: everything in its place and in proper working order. I say proper working order instead of perfect for a reason. Inevitably, one day you’ll return to this piece of code or application and wonder: “who the hell wrote this code?” And of course, git is laughing at you and saying “you, bloody bastard”.

Wouldn’t it be nice if you were able to ask someone to look at your code the moment it was written, and then together, be able to write this code in a way where you wouldn’t be ashamed of it in the future? Yea, maybe, but many programmers feel a bit guilt about showing their code to someone else while asking for a review. They feel like showing their code is a private thing, for some programmers it can feel like pulling down their pants and asking someone “hey, does this mole look weird?”

It’s perfectly normal to feel like this, but you know what? Fuck it. Ask yourself what really matters. Isn’t it good for you to improve and become a better programmer? Even more, isn’t it an asset to your company if you can create valuable code that is the best quality possible? If you have said yes, then you too can remove your pants for a minute or two and bear the shame of asking for help. Not to mention, there’s always the chance of someone giving you a compliment about other things while checking if the mole is serious or not. I don’t know about you, but I’d appreciate a compliment like that.

Often, I hear the sentiment: “It was hard to write, it must be hard to read.” Fortunately, I have heard this joke, but unfortunately, there are people who think this approach can guarantee a long lasting job in their company, because nobody else can deal with the code they have written. They naively think writing complicated code makes them indispensable. I beg to differ, and I believe this way of thinking is not only wrong, but antiquated. Let’s debate who is more valuable for the company with two scenarios:

Person A structures projects that are not only scalable, but also allows programmers to be added as needed, in addition to writing code that is maintainable. Furthermore, when they are absent or leave the company, you don’t need to worry because they leave a readable, maintainable code that anyone can dive right into comfortably.
Person B writes code that resembles ancients ruins that only they can maintain. You think this person is valuable to the company, but when they are absent or quit, most of their projects unravel or come to a standstill. It’s only when this person leaves that you realise the extent of how unmaintainable their code is. In essence, everything needs to be rewritten after they’ve left.

Now, honestly ask yourself which person you’d prefer to have in a company you own. Whether you want to or not, your code leaves mines on the field where you work. If you ask someone frequently to review your work, or if you work with someone else as a team, you will be alerted about these mines, early. When you work alone, quite often you are aware of the landmines that you leave, but you have the home field advantage and know where to place your steps.

However, it’s important to remember that someone else may have to enter your zone…and then what? Would you like to have someone’s life on your conscience? I don’t think so. You know they might be able to survive the explosion, but do you want them to seek revenge? It’s better not to leave landmines or defuse them as quickly as possible, and in this field, it’s indispensable to have the helping hand of another sapper/programmer.

If you’re not comfortable asking someone else for help, sooner or later you’ll learn to because without this skill you’ll create minefields which will blow many programmers out of the water. That’s a lot of potential enemies in a small industry. Open your field for sappers and open your mind to code review. Before it’s too late.

Wroc# is coming

Thu, 26 Jan 2017 23:11:32 +0100

Wroc# is coming. You don’t know what that is? It’s the most amazing conference I’ve ever attended. If you’ve never been, I highly recommend you visit this year. If you miss this opportunity, you’ll never experience a more perfect conference in Poland. This year, one of my favourite idols, Steve Sanderson will be presenting. I proposed him after last year’s conference and big kudos to the planning team for fulfilling my wish.

Unfortunately, I cannot be there this year. I’ll be sad, and a bit regretful about it, but my absence means a free place for someone like you to attend! Don’t miss your chance, because next year I won’t be leaving this free space for you.

Don’t hesitate and be sure to register for this conference. Registration starts in February, but I can assure you that availability won’t last for long. Personally, I believe within 10 minutes or so the tickets will be sold out. Be sure to follow Wroc# on social media, and have a specially brewed Wroc# beer for me. Also be sure to tweet highlights so I can follow the event from my man cave. Have fun!

I made my first Chrome extension and lived to tell the tale

Tue, 01 Nov 2016 23:00:00 +0100

This story began this year during the summer. I bought myself a guitar in order to remind myself of a few guitar riffs. After a several weeks of looking at this guitar, I finally started to play it. I always wanted to learn a couple of Brian Setzer’s riffs, so I typed Brian Setzer riffs in the YouTube search bar and I found what I was looking for. But these guys played so fast that I couldn’t keep up with them. Luckily, the YouTube video player has an option to slow down a video but it is rather poor.

As you can see, you can only slow it down to 50%. (Slowing it down to 25% causes the sound to mute). So what did I do? I opened Chrome DevTools and I found the video element on the page.

When you click on this tag, you get access to it in the console under the $0. And then you can slow down the video to speed whatever you want. For example to 0.6.

After practicing for a short while, I was completely exhausted not by playing the guitar, but because I kept rewinding to the place in the video where I wanted to start practicing from. The player always rewound too far back. My first thought was: “I have access to the video tag. I can quickly write a function in the console to loop the fragment of the song which I want to practice”. After a while, I typed this in the browser console:

var video = $0
var start = 0
var stop = 3


video.addEventListener('timeupdate',() =>  {
   if (video.currentTime > stop ) {
       video.currentTime = start;
   }
});

Now I could simply manipulate start and stop variables to loop the exact fragment of the song that I wanted.

But, what came next? I thought for sure someone had written an extension for Chrome which did what I had just done. And of course I was right. I tried one and it turned out to be complete rubbish…it even didn’t start. I tried another one but it required too much mouse clicking to do what I wanted, so I decided to write my own.

I started on this page where I found resources for further exploration. After two hours, I had the first version of my Chrome extension with a keyboard interface. Different keys control different functions, for example: one key sets a point A and another sets a point B anywhere in the song, another key sets point A to the beginning of the song and point B to the end of the song, while other keys allow you to slow down and speed up a song. The next day I added the ability to turn this plugin on and off and some labels which appear on YouTube videos to show values for point A, B and also for the current playback rate.

It was a fun experience to playing around with Chrome extension. The most frustrating thing was discovering how to refresh and debug this extension because extensions have content scripts and background scripts and they are debugged in two separate DevTools windows. There is a shortcut to refreshing an extension CTRL+R but sometimes you can press it in the wrong window. The safe option is to refresh the extension on this page chrome://extensions/ and click Reload. In this place, you can also get some errors which may appear while your extension is loading. For example, unavailable file.

My extension adds this little icon at the top of the browser. Which turns the extension on and off.

When it is on, you can see some labels at the top of video which shows the current value for point A, B and the playback rate.

This extension only has a keyboard interface with specific keys which control the functions. The Q,W,E keys are used to control point A; the A,S,D keys are used to control point B; the playback rate is managed using the Z,X,C keys and finally the R key resets points A,B to the beginning and end respectively.

There is a lot of room for improvement with this extension but now I am happy with what I have and I can fully enjoy learning another Brian Setzer solo.

By the way, the source code of this extension is here. It hasn’t been published yet but you can download it from repo as a zip file then unpack it. On the page chrome://extensions/ select Developer mode and then load the extension by clicking the button “Load unpacked extension…” and selecting the folder where you unzipped the code from repo.

Have fun.

bbq4.it Recap

Tue, 20 Sep 2016 23:10:03 +0200

On June 24th, 2015, I was returning home from the Devvox PL conference in Cracow. During this journey, Arkadiusz Benedykt and I were discussing how nice it would be to organize a conference in our city, Bielsko-Biala. Then, at the beginning of June 2016 my company was thinking about organizing a small meetup for students from our area. It was then that Arek and I remembered our discussion and we suggested combining our idea with the company’s idea. After brainstorming, we formulated a plan to organize a small conference in the form of a BBQ to gather people related to the IT sector in our area. Another brainstorming session lead to the name: bbq4.it and after some time we had about 75% of the agenda laid out. However, if it wasn’t for Piotr Szymura, things would have died in the planning stages. He took the weight of preparing the conference, unto his shoulders and thanks to him and the other hardworking people at our company, we managed to organize bbq4.it. Our collective efforts paid off, as we attracted almost 300 people.

I want to recall the great time we had through this post. I will share official and behind-the-scenes photos of the inaugural bbq4.it conference which took place on the evening of September 9th, 2016.

Preparations are in full swing

Speaker’s lunch and a mysterious and precious gift for Arek Benedykt given by Maciej Aniserowicz (It’s not a goldfish)

During registration (Photo Credit: Paweł Mazurczak)

Welcoming by Piotr Szymura and Arek Benedykt (Photo Credit: Paweł Mazurczak)

Opening talk by Janusz Szymura - chairman of Rekord Group (Photo Credit: Paweł Mazurczak)

First speaker - Maciej Aniserowicz immediately after his talk (Photo Credit: Paweł Mazurczak)

Thanks to Piotr Stapp for giving the second speech during bbq4.it (Photo Credit: Paweł Mazurczak)

During the break (Photo Credit: Paweł Mazurczak)

Krzysiek Szabelski and Marcin Drobik celebrating their victory (Photo Credit: Paweł Mazurczak)

Jarek Pałka debunking another myth (Photo Credit: Paweł Mazurczak)

Barbeque time! (Photo Credit: Paweł Mazurczak)

IT people and soccer, is it possible? Oh yes (Photo Credit: Paweł Mazurczak)

Handing first prize to the winner (Photo Credit: Paweł Mazurczak)

The party was starting to wind down

A lot of people are requesting a second edition because they really enjoyed the first. I sincerely hope we can have a repeat next year, and I’ll keep you posted. Anyway, please start praying for good weather for the beginning of September 2017, as it is an outdoor event.

P.S. Big thanks to my workmate Paweł Mazurczak for allowing me to use his wonderful pictures.

Quality Excites 2016

Tue, 28 Jun 2016 00:00:15 +0200

The Quality Excites conference organized by the passionate team recently had its 5th edition. For me, this conference was exceptional because there were a lot of workshops and lectures, many of which were dedicated to testing. The speakers practice what they preach and everything related to the conference was high quality, as this is what excites the organizers and the invitees.

That is why Quality Excites remains one of my most anticipated yearly events, and every year since 2014, I’ve had the simultaneous fear and thrill of securing tickets. Fortunately, I was invited for the third time in a row.

Grzegorz Gałęzowski was also invited as a speaker for the 3rd time in a row and this year his opening speech was titled GIMMEH TDD! - O RLY?.

He talked about his experiences with introducing TDD to teams but what he presented could easily be applied to many other new things which someone may introduce to their team. For me, talks given by Grzegorz are very interesting because they are concise and his presentation style is logical. I’m always impressed by his ability to weave words together, and each thought connects with the previous one and comes from his real life observations, eventually leading to a clear conclusion. You can see Grzegorz’s presentation from the previous Quality Excites conference here to see what I mean.

After the opening session, I attended the workshop given by Bartłomiej Michalski and Łukasz Januszek. Workshops are my style and I think the workshops are what make Quality Excites so exceptional among other conferences. They are given for free of charge and are hosted by very passionate people who have great practical knowledge in their field. Additionally, the workshops presenters I spoke with, were all employees of Future Processing. This year, I attended the workshop How to make work more profitable?. The workshop used an analogy that compared creating processes in a company to creating rules for board games and used this analogy to explain many different roles which people in a team can have and how they influence each other and the situation in the team.

This workshop was insightful and opened my mind to new ideas, it’s given me a lot to think about. It may be some time before I can use everything I’ve learned in real situations, but I may be able to use one takeaway from this workshop sooner rather than later: being able to discuss unpleasant things with my team as soon as possible.

After the workshop and lunch break, I watched three lectures Testing the Internet of things by Tomasz Janiszewski and Dawid Pacia and then Star Trek: BDD Enterprise by Tomasz Dubikowski. Both of these lectures were very well-prepared and well-presented but currently I don’t have opportunities to use what I learned.

The third lecturer which I attended in the afternoon block was given by Jarosław Pałk. I really like this speaker because of his sense of humor, profound knowledge and the way he talks about very serious and sometimes sad things.

The most important part of Jarosław’s speech were sentences like what I’m about to translate. I’m paraphrasing from Polish to English, but he said something along the lines of: Developers have benefits, and between these benefits, they create products/services for clients.
By benefits, he meant table football, billiards, ping pong, etc. In his speech, he had a couple of the whole truth about the word sentences and that’s why I like his talks. I can’t wait to see Jarek at bbq4.it in September.

After the last talk there was an after-party held in the Future Processing base where we were treated to a cake to celebrate the 5th staging of Quality Excites.

I think it was a well-deserved occasion to celebrate. Quality Excites provides a lot of opportunities to learn new things for free and I would like to thank the organizers for this and I would like to wish all the organisers and participations the best.

With the workshops and lectures held during this conference, they inspired a lot of people including myself. You can see what it means for quality to excite, while attending this conference. It was my third time at Quality Excites and my third time seeing that the organizers believe in quality and provide it in every lecture and workshop. I hope the Quality Excites team keeps going and I hope to see them for the 4th time next year.

Devoxx 2016

Mon, 27 Jun 2016 23:43:59 +0200

The conference beast living inside of me has awoken again but this time it was very hungry and I ended up having to feed it for 4 days. I spent the first 3 days at the Devoxx Poland conference which ran from June 22nd to 25th. It is one of the biggest conferences in Poland and this was the second staging. There were 2500 participants and 100 speakers at this edition, and among the speakers, was one of my work mates Arkadiusz Benedykt.

The event was held at the International Conferences and Entertainment Center in Cracow. I attended a lot of great talks and a couple which weren’t so great, but the most important thing for me was that this event gave me an opportunity to talk with many interesting people and I benefited from this opportunity.

The most fascinating for me was being able to have a quick chat with Misko Hevery. Can you guess what his presentation was about? Of course…it was Angular 2. For me, his presentation was one of the best during this conference. He explained how powerful Angular 2 is and why. I met Misko at the speaker’s dinner organized by Metrosoft®.

I started our conversation with the question: “when will Angular 3 come out?”. Misko smiled for a while and something to the effect of “it won’t”. I asked him “do you promise?”, and he said “yes I do”. So Dear Community, you can use Angular 2 and don’t worry about Angular 3 being released soon. Misko spoke during his speech about many different things related with Angular 2, which you can see in these slides. I asked him how many of them I can use today (23 June 2016) and he said everything. So Dear Community, it’s about time to jump into Angular 2 and take as much as you want from it has to offer.

Another interesting conversation I had was with Ray Tsang after the speaker’s dinner. We talked about Kubernetes, the cloud, Google, and many others. It was a very nice talk set against the pleasant scenery of the Vistula river and it encouraged me to attend Ray’s presentation the next day titled: Scaling with Kubernetes, Automatically! Learn Kubernetes API through writing a visualizer to an autoscaler. It was an amazing presentation with very few slides and a lot of real time action with Kubernetes. Honestly speaking, I got lost somewhere in the middle of his presentation but I was happy to attend and it was a pleasure watching how Ray executed one shell command after another and watching him act like a child with a brand new toy.

To sum up all the presentations: a lot of them were about microservices as many speakers at Devoxx Poland 2016 ended up focusing on this theme. There were presentations on how to: create microservices, monitor them, deploy them, configure a Continuous Delivery environment and other things more or less related to microservices.

I like Devoxx Poland because it gives me the opportunity to meet new people and talk with them about the things they couldn’t say on stage. Devoxx primarily focuses on dozens of lectures, but this year that wasn’t the most important part for me. I was focused on meeting new people and communicating with them and this goal was 100% fulfilled.

I want to thank Grzegorz Duda and his team for another amazing Devoxx Poland. I hope that he will organise the next edition and I’ll be there next year. I also want to thank Metrosoft® for organizing one of the best parties I’ve ever been to. My goal for next year is to be at this party again.

For dessert, my conference beast was fed another event and you can read about it in this post.

Using only the generator of Angular-CLI

Thu, 02 Jun 2016 22:30:00 +0200

In one of my previous posts, I wrote about Angular CLI. With this tool, you can simplify your work when dealing with Angular2 projects. This tool can create a template of a new Angular2 application where everything is set up and works perfectly. However, what if you want to have a build process of your application that is a bit different from what Angular CLI offers or you want to use this tool in an existing project which already has its own structure and build process? Can you still use some goodies from this CLI? Is this possible?

Yes it is. You can take as much as you want from this tool. All you need to do, is to install Angular-CLI with the command npm install -g angular-cli and then add a file angular-cli.json to the root folder of your project. Inside angular-cli.json, I put the content like this:

{
  "defaults": {
    "prefix": "",
    "sourceDir": "wwwroot",
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

You can specify more options here for this CLI but this is enough for me. This file can be added to .gitignore as it does not have any influence on your project.

You also need this tool as a part of the development dependencies in package.json of your project. A command like this does the job: npm install angular-cli --save-dev.

After this you can use almost every command of CLI, for example:

ng g service
ng g route
ng g component

Some commands are impossible to use because we don’t have a full Angular-CLI project, for example:

ng serve
ng build

When use them, you get errors.

As you can see, you can have happiness and receive a helping hand from Angular CLI with development workflow and the building process of your choice.

Epilogue: Daj się poznać series

Tue, 24 May 2016 22:00:00 +0200

The Daj się poznać contest has come to an end. Now it’s time to sum up what I did, what I didn’t do and what I learnt during this period of time.

First of all, I want to thank Maciej Aniserowicz for organizing this contest. Initiatives like this do a lot for the Polish programming community as a whole, but even more for the individual programmers who participated in the contest, and even those on the sidelines who merely observed. I consider Maciej Aniserowicz to be a life mentor and now I can brag to the Polish tech community that he is the patron saint of Polish programmers.

I think everyone who participated in this contest learnt something, whether they finished or not. I learnt a lot: of course, I learnt new technical stuff but more importantly I learnt a lot about my work style about how to organize my time. I thought about blogging for a long time but I always had an excuse: I don’t have time, my kids keep me busy, I need to sleep…I started my blog in January, but this contest helped provide content to motivate me to continue blogged. My initial goal for my blog was to write at least one post a month but the contest required two posts a week. Initially, it seemed unrealistic for me but turned out that I managed to cope. This is my biggest lesson learned from this contest: yes, you have time to write two posts a week if you organize your time wisely. Maciek - thank you for creating an opportunity for me to learn this lesson for myself.

In some cases, I was even able to write more than two posts per week. During the content I always had two posts in reserve in case something unexpected happened. I put aside 8 hours a week for this contest, and this was enough to write two posts and example code, but the contest itself also required me to create a project. This didn’t leave much time for writing the project and the project isn’t in the best condition. Despite focusing mainly on writing for this content, my goal has still been accomplished.

During the contest, I worked with new technologies. I had to create a sample project for almost every thing that I learnt. All these projects are on github, complete with posts.

The bleeding edge technologies that I used were a big obstacle in my development process. If bleeding edge technology were sharp enough to cut me in real life, then sometimes the blood would have been on the floor, the keyboard and dripping down my desk. Especially when I upgraded Angular2 and ASP.NET Core. But through this, I achieved another goal which was to learn a lot of new things.

This contest took me out of my comfort zone and I am glad for it. Now when the contest is finished, I must think about new content for my blog. For sure, I will slow down a bit because two posts a week is too much for me. I must also think about the content which I am going to present on my blog but these considerations are for another occasion. Now let’s be happy with the final post of the Daj się poznać series. Thanks once again Maciek, keep up the good work. Also, I’d like to thank my teammate Arkadiusz Benedykt who stood/sat next to me and sometimes gave me a lot of really helpful advice.

Migrating to ASP .NET Core RC2

Sun, 22 May 2016 22:00:00 +0200

After waiting for some time, I was happy when ASP.NET Core RC2 was recently released. This version should have debuted at the beginning of 2016, so imagine my anticipation and excitement to install it on my Linux machine and upgrade my project to this version.

To install this version of ASP.NET Core I started on this page and then I chose Linux -> Ubuntu 14.04. I followed the step-by-step instructions provided and after a while I could run the command dotnet -h in my terminal, and I saw this:

Now I could start to upgrade my project. There were pages where I could find instructions on how to adjust the project to the new version of ASP. On this page I found out how to migrate from dnx to new the .NET Core CLI and on this page I found out how to upgrade my project to the RC2 version.

The first steps of the upgrade were rather simple and mechanical. I had to change the dependencies in project.json. All packages with names that started with Microsoft.AspNet. now have names starting with: Microsoft.AspNetCore.. I also had to change the version of the packages. My dependencies section looked like this:

"dependencies": {
    "Microsoft.AspNetCore.Diagnostics": "1.0.0-rc2-final",
    "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0-rc2-final",
    "Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview1-final",
    "Microsoft.AspNetCore.Server.Kestrel": "1.0.0-rc2-final",
    "Microsoft.AspNetCore.Mvc": "1.0.0-rc2-final",
    "Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final",
    "Microsoft.Extensions.Configuration.Binder": "1.0.0-rc2-final",
    "Microsoft.Extensions.Configuration.Json": "1.0.0-rc2-final",
    "Microsoft.Extensions.Configuration.EnvironmentVariables": "1.0.0-rc2-final",
    "Microsoft.NETCore.App": {
        "type": "platform",
        "version": "1.0.0-*"
    }
},

Another change is that a new package Microsoft.NETCore.App appeared among the dependencies, and it was a runtime for the application.

I could remove the dependency Microsoft.AspNet.Mvc.TagHelpers because now it is included in the package Microsoft.AspNetCore.Mvc.

I also had to fix the namespaces. I had to change each namespace which started with Microsoft.AspNet. to Microsoft.AspNetCore..

The changes where required also in the structure of project.json. Some properties are no longer valid, for example: commands. I must also specify the frameworks section and it looked like this:

"frameworks": {
    "netcoreapp1.0": {
        "imports": [
            "dotnet5.6",
            "dnxcore50",
            "portable-net45+win8"
        ]
    }
},

I also added the section buildOptions with the following properties:

"buildOptions": {
    "emitEntryPoint": true,
    "preserveCompilationContext": true
},

After upgrading to RC2, the ASP application became like an ordinary console application. That’s why I had to create a class with the main method where I started my ASP app. This class looked like this:

public class Program
{  // Entry point for the application.
    public static void Main(string[] args) 
    {
        var host = new WebHostBuilder()
            .UseKestrel()
            .UseContentRoot(Directory.GetCurrentDirectory())       
            .UseIISIntegration()
            .UseStartup<Startup>()
            .Build();

        host.Run();   
    }         
}

And I removed this line of code from Startup.cs

// Entry point for the application.
public static void Main(string[] args) => WebApplication.Run<Startup>(args);

I also had to remove the line:

app.UseIISPlatformHandler();

from the Startup.Configure method because now IIS is configured in Program.Main method.

After these steps, I could finally run the command:

dotnet restore

And then I was able to build my app with the command dotnet build but I received two errors:

/home/piotr/Repositories/notifier/src/web/Startup.cs(26,46): error CS1061: 'IConfigurationRoot' does not contain a definition for 'Get' and no extension method 'Get' accepting a first argument of type 'IConfigurationRoot' could be found (are you missing a using directive or an assembly reference?)
/home/piotr/Repositories/notifier/src/web/Startup.cs(27,22): error CS1061: 'IServiceCollection' does not contain a definition for 'AddInstance' and no extension method 'AddInstance' accepting a first argument of type 'IServiceCollection' could be found (are you missing a using directive or an assembly reference?)

Compilation failed.
    4 Warning(s)
    2 Error(s)

It seems like the extension methods Get and AddInstance no longer exist. A bit of research led to a solution for how to fix the lack of AddInstance extension method. Now it is called AddSingleton, but I couldn’t find a replacement for Get<> extension method so I changed my code a bit and now it looks like this:

var authSettings = new AuthSettings(); 
var authSection = Configuration.GetSection("AuthSettings");
authSettings.ClientId = authSection["ClientId"];
authSettings.Authority = authSection["Authority"];
services.AddSingleton(authSettings);

After this, my code compiled and I could run it with the command:

env ASPNETCORE_ENVIRONMENT="Development" dotnet run

The result of this command was another error:

Unhandled Exception: System.IO.FileNotFoundException: The configuration file 'appsettings.json' was not found and is not optional.
   at Microsoft.Extensions.Configuration.FileConfigurationProvider.Load()
   at Microsoft.Extensions.Configuration.ConfigurationBuilder.Build()
   at Notifier.Web.Startup..ctor(IHostingEnvironment env)

It looked like my application didn’t have a setup base path so it didn’t know where to look for appsettings.json. In the new version of ASP, you specify the app basepath by setting it in the ConfigurationBuilder with a code like this:

var builder = new ConfigurationBuilder()
                .SetBasePath(hostingEnvironment.ContentRootPath);

As you may notice, the new version of ASP also changed the names of the environmental variables. To set the runtime environment of an application you now use the variable ASPNETCORE_ENVIRONMENT.

After setting up the base path, I ran the application again and it ran without errors. I navigated to the localhost:5000 and saw this screen:

I think that this is proof that I managed to upgrade my ASP.NET Core application to the RC2 version. I must honestly say that this process was very boring and took me longer than I expected. I had to change the way I got the settings from the configuration file. I don’t know why I couldn’t get access to the extension method Get<> on the IConfigurationRoot. I’m not sure if it was removed or renamed, but I didn’t manage to find a replacement for this method. When I wrote this post, the RC2 version was fresh out the oven (3 days to be exact) so I am sure that I’ll find more information about this missing method soon.

By the way, this is my last technical post in the Daj się poznać contest series. In the next post, I’ll write a summary of my work for this contest.

Experimenting with Angular2 CLI

Thu, 19 May 2016 22:00:00 +0200

During the keynote of ng-conf 2016, Brad Green presented a lot of cool stuff about Angular2 and one of them was a tool called Angular-CLI. Angular-CLI contains a bunch of simple commands to make your work easier with Angular2 projects. The tool essentially streamlines and simplifies your projects. I am always cautious about this kind of tool because often they create far more than you need and pollute your project but when used wisely, they can be helpful.

To start playing with Angular-CLI first I had to install it. This tool is built with Node.js and it requires the node version 4 or greater. You can install this tool with the command:

npm install -g angular-cli

To create a new application I used the command: ng new SampleApp. And the result I got was a working application with a folder structure like this:

As you can see, a lot is done after you run this command. You have not only your app ready to use but also ready to build. You can even run tests. After installation, I executed ng build and ng serve which allows us to see under the URI http://localhost:4200/ in the following screen:

Next, I wanted to create a new route. I did this with the command ng generate route dashboard and I got the following output in the terminal:

installing route
installing component
  create src/app/+dashboard/dashboard.component.css
  create src/app/+dashboard/dashboard.component.html
  create src/app/+dashboard/dashboard.component.spec.ts
  create src/app/+dashboard/dashboard.component.ts
  create src/app/+dashboard/index.ts
  create src/app/+dashboard/shared/index.ts

This tool is smart enough to create folders prefixed with a + sign. It is required in order to have lazy loading of components. You can watch a talk given by Misko Hevery at ng-conf 2016 to find out a bit more about it.

You can use this command line tool to create services, modules, components, etc.

Next, I tried this tool to see how it deals with nested routes. I executed the command:

ng generate route dashboard/event-list

And it turned out that Angular-CLI deals with it pretty well. I got this structure of folders:

And the routing was created like this in dashboard.component:

@Routes([
 {path: '/event-list', component: EventListComponent}
])

And it was also changed in the sample-app.component to this:

@Routes([
 {path: '/dashboard/...', component: DashboardComponent},
 {path: '/main-page', component: MainPageComponent}
])

As you can see, this tool creates all the files needed for the component. These files are: a template file, a style file, a component file. It also generates a spec file where you have the scaffolding for testing your component.

The only drawback of this generation was the “…” ellipses at the end of the dashboard route. It didn’t work with the new router and I had to change the configuration to this:

@Routes([
  {path: '/dashboard', component: DashboardComponent},
  {path: '/main-page', component: MainPageComponent}
])

You can see the final result of me playing with Angular-CLI in this repository. I am sure that this drawback with the ellipses will be fixed soon and by the time you read this it could have already happened.

You can do a lot of things with this tool if you try it by yourself, as I have only touched the tip of the iceberg in this post. If you work with Angular2, for sure you should spend some time with this tool and discover what it can do for you.

Upgrading to Angular2 RC1

Mon, 16 May 2016 22:00:00 +0200

The “Daj się poznać” contest is coming to an end and I have learned a lot and experimented with many things. I created a couple of sample projects but my main project was a bit neglected. It’s about time to speed up the development of my contest application.

Since I’ve started working on that app, a lot changed. The biggest change was the new version of Angular2 which at the time of writing this post, is called: RC1. I started my development with an upgrade to this version.

The process of upgrading went rather smoothly but only because I had very few components. The upgrade involved the renaming of namespaces so if you have a lot of components this renaming could be very cumbersome.

The second biggest change in Angular RC1 was router. The previous router became deprecated and was renamed to @angular/router-deprecated and the new router named @angular/router wasn’t documented on the official page of Angular2 at the time of writing this post.

Anyway, I decided to continue my development process and I created a couple of Angular2 components. First, what I did was to get rid of dependency @angular/router-deprecated from package.json and from node_modules. All decorators, directives and services related to new routing are inside the namespace @angular/router.

In Angular2 RC1, the configuration of routes is done by the decorator @Routes, previously it was the @RouteConfig decorator. Both decorators take array as their argument but now the type of array items are different. Previously, it was array of RouteDefinition with the definition being:

interface RouteDefinition {
   path?: string;
   aux?: string;
   component?: Type | ComponentDefinition;
   loader?: Function;
   redirectTo?: any[];
   as?: string;
   name?: string;
   data?: any;
   useAsDefault?: boolean;
}

Currently, it is an array of RouteMetadata with the definition being:

abstract class RouteMetadata {
   path: string;
   component: Type;
}

It means that now to create a route, you must only specify the path and the type of component. For example like this:

@Routes([
   {path: '/main-page', component: MainPageComponent},
   {path: '/dashboard/...', component: DashboardComponent}
])

Firstly, what hit me at this stage was how to now specify the default route. I searched for a bit how to do this, but everything I found then was simply calling this._router.navigate(['/main-page']) inside ngOnInit of your main component. Then, I found that to make a route default you must specify its path with alone slash (/) as you can see in this snippet of code:

@Component({
 moduleId: module.id,
 selector: 'sample-app-app',
 templateUrl: 'sample-app.component.html',
 styleUrls: ['sample-app.component.css'],
 directives: [ROUTER_DIRECTIVES],
 providers: [ROUTER_PROVIDERS]
})
@Routes([
 {path: '/dashboard', component: DashboardComponent},
 {path: '/', component: MainPageComponent}
])
export class SampleAppAppComponent implements OnInit {
 title = 'sample-app works!';

 constructor(private router:Router) {
 }

 ngOnInit() {
 }
}

In order to have this routing working, you must put <router-outlet></router-outlet> inside your template. This is the same as it used to be, but now this directive comes from a different module.

To configure nested routes you don’t use … as before, you simply specify part of your route and the component related to it. Then inside your component you must specify further route configurations. In my case, I used DashboardComponent and it looked like this:

@Component({
 moduleId: module.id,
 selector: 'app-dashboard',
 templateUrl: 'dashboard.component.html',
 styleUrls: ['dashboard.component.css'],
 directives: [ROUTER_DIRECTIVES]
})
@Routes([
 {path: '/event-list', component: EventListComponent},
 {path: '/event-details', component: EventDetailsComponent}
])
export class DashboardComponent implements OnInit {

 constructor() {}

 ngOnInit() {
 }
}

You can see the rest of files for my solution in this repository.

When you look at this repository, you may wonder why I prefixed the folder with a + sign. It is required in order to have lazy loading of components. You can watch a talk given by Misko Hevery at ng-conf 2016 to find out a bit more about it.

The final result of this example looked like this in the browser.

The interesting part of the new router is that you can specify links in templates relative to the component where they are placed. You can see an example of this here:

<a [routerLink]="['./event-list']">List</a>
<a [routerLink]="['./event-details']">Details</a>

This is a fragment of a dashboard.component.html file. You can see that the links are specified relative to the DashboardComponent. Everything I’ve written up to now the result of searching and experimenting after Angular2 RC1 one was released. I mentioned that when I wrote this post there wasn’t official documentation for the new router which was introduced in this version. It’s quite probable that what I have stated in this post may be wrong but until there is an official reference to deal with the new router, my solution is sufficient for me and fortunately it works quite well.

How to avoid global installs with NPM scripts

Sat, 14 May 2016 12:30:00 +0200

Recently, I heard from a friend that he doesn’t know how to use Gulp and TypeScript locally, he only knows how to install them globally. I thought it could be an issue for others, and that’s why I decided to write this post.

Using globally installed NPM packages can be very problematic, especially if you need these in different versions in a variety of projects. If you rely on global packages you don’t know what the dependencies of your project really are. It is better to have everything in one place without part of your dependencies in global and the other part of your dependencies in local space.

To use gulp and tsc (TypeScript compiler) without polluting your global, you simply install it locally with a command like this: npm install gulp typescript --save-dev and then you use the power of NPM scripts. As you can see, in that link there are a lot of predefined scripts but I will show you how to define custom ones.

All you have to do is simply to define the name of script in the scripts section in the package.json. This is an example from one of my projects:

"scripts": {
    "tsc": "tsc -w",
    "typings": "typings",
    "build-dev": "gulp build-dev",
    "build-prod": "gulp build-prod",
    "postinstall": "concurrently \"typings install\" \"npm run build-dev\"",
    "start": " http-server "
},

I have defined four custom scripts and two predefined here. You can run custom scripts with a command like this:

npm run tsc

You must execute this command in the root folder of your project (where your package.json is).

Running a predefined script is as simple as: npm start, you don’t have to put run. Some scripts are run automatically, for example postinstall. This script is run after the package is installed. In my case, after the package was installed, I installed typings and I rebuilt the libraries using the script defined above which is build-dev. As you can see, you can execute other scripts in NPM scripts and you also have access to the commands which are located in the node_modules/.bin of your project. In this location, you will find your commands gulp and tsc and other locally installed packages.

The scripts defined in package.json look for commands inside this location and if they didn’t find one they then check your global packages. You can also run locally installed packages with a command like this: node_modules/.bin/gulp but as you can see, this is a lot of typing and over time it can be very annoying. It is much better to use NPM scripts. I hope I have helped someone by writing this post.

Google Identity Provider with IdentityServer4

Wed, 11 May 2016 22:00:00 +0200

In this post, I am going to continue my series about IdenityServer4. I will write about forcing IdentityServer to use Google as an external identity token provider. Before I started, I had to register the application that will interact with Google which in my case is IdSrvHost. I am going to reuse the application that I registered in this post. However, I altered the configuration of this application a bit by enabling access to Google+ API. I did this by entering Google APIs and then inside Social APIs I clicked Google+ API. You can see this on this screen:

Then I simply clicked Enable. And that was it.

I then added clientId and clientSecret to my secret settings. I wrote about that in this post.

The next step was adding the Google external identity provider to my project with IdentityServer4. I wrote here and here about creating this project and now I have altered it to add an external provider.

The first thing which I did was to add a dependency to project.json and it was called Microsoft.AspNet.Authentication.Google. At the time this post was written, it was in version: 1.0.0-rc1-final.

Then inside Configure method of Startup class I added:

app.UseCookieAuthentication(options =>
    {
        options.AuthenticationScheme = "External";
    });

    app.UseGoogleAuthentication(options =>
    {
        options.AuthenticationScheme = "Google";
        options.SignInScheme = "External";

        options.ClientId = Configuration["GoogleIdentityProvider:ClientId"];
        options.ClientSecret = Configuration["GoogleIdentityProvider:ClientSecret"];
        options.CallbackPath = new PathString("/googlecallback");                
    });

I did this right after the line:

app.UseIdentityServer();

I will explain a bit about what I did here. First of all, I specified CallbackPath in the options for UseGoogleAuthentication but that is not necessary. If you don’t specify the redirect URI, the default will be http://url_of_app/signin-google which I learned when I got the following error:

I decided to add something different to see if it would work.

You may be asking: why did I need to add two middlewares? To answer to this question, I must explain that the flow follows the authentication to Google. Now when you login with my Identity Provider (IdSrvHost) you see a screen like this:

This Google button comes from the code in the Login/Index.cshtml view like this:

@if (Model.ExternalProviders.Any())
{
    <div class="col-md-6 col-sm-6 external-providers">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">External Login</h3>
            </div>
            <div class="panel-body">
                <ul class="list-inline">
                    @foreach (var externalProvider in Model.ExternalProviders)
                    {
                        <li>
                            <a class="btn btn-default"
                               href="@Url.Action("ExternalLogin", 
                                    new
                                    {
                                        provider = externalProvider.AuthenticationScheme,
                                        signInId = Model.SignInId
                                    })">
                                @externalProvider.Text
                            </a>
                        </li>
                    }
                </ul>
            </div>
        </div>
    </div>
}

And ExternalProviders in the model I added in the Login method in LoginController like this:

var vm = new LoginViewModel();
vm.ExternalProviders.Add(ExternalProvider.Google);

var loginProviders = HttpContext.Authentication.GetAuthenticationSchemes().ToList();

But then I would have to filter these schemes and choose only the external providers. I would rather be more explicit at this stage of my solution and that’s why I decided to create an explicit list of external providers.

So…what happens when the user clicks the Google button. They see a screen like this:

When they click Allow they see a screen like this:

Take a notice that this screen comes from my Identity Provider. Next, when the user clicks Yes, Allow they are redirected to the application they came from.

This is a flow from a GUI perspective. And now flow from the backend perspective.

After clicking Login Only in the JavaScript Oidc Client, there is a redirection to the method Index in the LoginController. Then the Index view is presented. After clicking the Google button, the action ExternalLogin is executed in the same controller and the parameter provider is set to Google. This method looks like this:

public IActionResult ExternalLogin(string provider, string signInId)
{
    var props = new AuthenticationProperties
    {
        RedirectUri = "/login/callback?signInId=" + signInId
    };

    return new ChallengeResult(provider, props);
}

I return ChallengeResult with Google as a provider which caused my Google middleware to be triggered and I also specified the callback URI to be called after the auth process.

The most important thing here is the property SignInScheme which I set in the UseGoogleAuthentication options, as this what completes the authentication process after it returns from Google, and then my callback is called.

In this callback, the current working version looks like this:

public async Task<IActionResult> Callback(string signInId)
{
    var external = await HttpContext.Authentication.AuthenticateAsync("External");
    //todo create or get local account match by email         
    //for now alice is hardcoded            
    var subject = "818727";//todo you get this after you create or get local user
    var name = "alice";
    var claims = new[] {
                new Claim(JwtClaimTypes.Subject, subject),
                new Claim(JwtClaimTypes.Name, name),
                new Claim(JwtClaimTypes.IdentityProvider, "idsvr"),
                new Claim(JwtClaimTypes.AuthenticationTime, DateTime.UtcNow.ToEpochTime().ToString())
            };

    var ci = new ClaimsIdentity(claims, "password", JwtClaimTypes.Name, JwtClaimTypes.Role);
    var cp = new ClaimsPrincipal(ci);

    await HttpContext.Authentication.SignInAsync(Constants.PrimaryAuthenticationType, cp);
    await HttpContext.Authentication.SignOutAsync("External");

    if (signInId != null)
    {                
        return new SignInResult(signInId);
    }

    return Redirect("~/");
}

I can get access to the claims received from Google with this line:

var external = await HttpContext.Authentication.AuthenticateAsync("External");

That’s why I needed this extra middleware to get these Google claims. I should do something meaningful with these claims but that is a theme for another post. For now, I will simply map everyone logged in with a Google account to my local user alice. Next, I signed out from the External authentication schema, then signed in alice with PrimaryAuthenticationType which is IdentityServer. After, I return the SignInResult. Here, I did here the same thing done in the post Login method in LoginController. Basically, IdentityServer is doing its job and I don’t need to micromanage what’s going on there. I provided everything it needs to authenticate and authorize a user.

And that’s it…this is how I setup Google as an external Identity Provider. You can find the whole source code for this sample project in this repository. Similarly, for example, you can use Facebook as an external Identity Provider. I am going to do this but I will write about it only if I run into problems and I’m forced to troubleshoot.

Posts on Piotr Kościelniak - passionate programmer

Free online text to mp3 converter

Self-signed certificate? All you need is go

‘Mine’ field or minefield?

Wroc# is coming

I made my first Chrome extension and lived to tell the tale

bbq4.it Recap

Quality Excites 2016

Devoxx 2016

Using only the generator of Angular-CLI

Epilogue: Daj się poznać series

Related posts:

Migrating to ASP .NET Core RC2

Related posts:

Experimenting with Angular2 CLI

Related posts:

Upgrading to Angular2 RC1

Related posts:

How to avoid global installs with NPM scripts

Google Identity Provider with IdentityServer4

Related posts: