Domain Driven Design, CQRS & Event Sourcing

On July 12th I'm going to give a talk at the annual IDF .NET conference which is the 3rd time that I'm one of it organizers.

This time I'm going to talk about three major patterns - Domain Driven Design, CQRS and Event Sourcing. 

I believe that the young software developers ought to know design patterns, best practices and the big things that are happening in the industry. All those patterns are becoming more and more popular for a reason. I think that most of the applications which are developed in the IDF could use some or all of them.

Here are the slides - http://slides.com/dennisnerush/cqrs#/

Wish me luck!

The video of the lecture can be found here.

Creating Nuget Packages using Visual Studio 2015

If you have ever created a nuget package you know how annoying it is. Using the nuget command line to pack the project and then create the .nuspec file and then build it for the desired frameworks.
Visual Studio 2015 (currently RC) lets you create nuget packages extremely easy!
First create a new Class Library project:

Notice that it is under ‘Web’ category.

Now we’ll enable the nugget package creation just as written in the comments above.

I just love their UX in this window.
Now we’ll need to fill the package details in the project.json file.

The project.json is almost the same as the .nuspec file. We can include the package dependencies and the target frameworks.
Now if we compile the project and navigate to the solution directory we’ll see the nuget package in the artifacts folder.


Good luck

Aligning Elements using CSS3 “Flex” options

CSS3 introduces the “Flex” options that makes aligning elements extremely easy! It is currently supported in all the major browsers (not supported in IE 11 and below);

Let’s say that I want to align four elements in a line:

The CSS:

.container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}

.item {
background: green;
padding: 5px;
width: 150px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
-ms-border-radius: 30%;
border-radius: 30%;
}

The only new property here is “display: flex”. Not only that flex aligns the elements in a single line it also makes them responsive when the container size changes (overriding the element’s explicit width property;

If you wish to keep the element’s original width you can add the flex-wrap:wrap property which will break the line if needed:

You can reverse the order of the elements that break the line using flex-wrap:wrap-reverse:

You can align the whole line to center or to the first/last item (flex-start/flex-end) using the justify-content property. By default it is set to flex-start:

.container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

There are two more options for justify-content: space-between and space-around which adds equal spaces between each element:

.container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

If you choose space-around then the first and the last elements will also have the same spaces from the borders.

Vertical Alignment

You can vertically align the elements using flex-direction:column.

Using align-items you can control the vertical starting point (the same like justify-content):

.container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column-reverse;
}

So far we’ve applied the flex properties only to the elements container. We can also apply some flex properties directly on the elements, like making some item be 3 times bigger than the rest:

.container > .grow {
flex-grow: 3;
}

I’m using the flex-grow property on the wanted item and setting it’s value to 3 as for 3 times bigger.

Flex has more properties that can help you easily align your elements . Go ahead and try!