The default behavior of AngularJS when you have a validator on an input field is to set the model to undefined if the validation failed. This might be convenient for most cases, but sometimes you want to have the invalid value in your model.

It is really easy to tell Angular to allow invalid values on your model by specifying the option allowInvalid on the ng-model-options.

I just created a Docker image that runs the EasyTax2014AG application. It was pretty straight forward to write the Dockerfile. I have based it on the official Ubuntu image because I wanted the Dockerfile to be transparent so that you can actually trust there was nothing installed that tries to steal your data in some way.

Note: the important thing for you to change is the location where you will actually want to store your data. When using the application please make sure you save the data in the mounted directory (/root/TaxData). If you miss that point you could end up having lost all your changes.

Why

OK, so interfaces can now provide a default implementation. This makes sense if you want to be able to add new methods to your interface without breaking existing implementations. Oracle uses default methods quiet extensively (see java.util.Collection).

Lately I had a short presentation about Docker for which I created some slides. The idea was to run the presentation (AngularJS, HTML, CSS) inside a container. You can find the presentation here. Maybe you find it useful.

Spring Boot brings along some cool „production ready“ features. Among them is the so called health checks. They are a great way to give you a quick overview about the system state. Is the database up and running, is my disk running out of space?

Getting started

Having a Spring Boot application already setup you just have to add the dependency for the Spring Boot Actuator.

Add a custom health check

Adding a custom health check is pretty easy. Just create a new Java class, extend it from the AbstractHealthIndicator and implement the doHealthCheck method. The method gets a builder passed with some useful methods. Call builder.up() if your health is OK or builder.down() if it is not. What you do to check the health is completely up to you. Maybe you want to ping some server or check some files.

This is enough to activate the new health check (make sure @ComponentScan is on your application). Restart your application and locate your browser to the /health endpoint and you will see the newly added health check.

Add a better view

For a quick overview the health checks are great, but no one from your operating team will love reading through the JSON result of the /health endpoint. Better create some view and present the data in a much more human readable way. I personally like the apporach jHipster has implemented for their health checks.

Conclusion

Personally speaking Spring Boot is the right step forward for the Spring framework. The production ready features offered, especially the health checks, are great to quickly locate connectivity issues and can give you an overall better feeling in production environments where you might not be able to analyze issues quickly due to access restrictions.

Full height multi column layout using CSS3 vh,vw,vmin and vmax unit

I had to create multi column layouts that span the entire height of the visible space pretty often. And it was very frustrating every single time.

How can I make the two columns use the whole visible space?

Since CSS 3 there is a new unit you can use that defines a relative value of the viewport’s dimension. You can use this unit for width, height, min-height, max-height etc.

Its very easy to understand the new unit:

1vh -> 1% of the viewport’s height

1vw -> 1% of the viewport’s width

1vmin -> 1% of the viewport’s smaller dimension

1vmax -> 1% of the viewport’s larger dimension

So defining an elements height to 100vh, that div would have the exact same height as the viewport. Note this doesn’t mean it is placed on top left corner and stretches the whole viewport. It just means the height of the div is equal to the viewport’s height. To make a div fill the whole viewport without scrollbars you would have to get rid of all all margins and paddings and place the div top left corner. Like so

Note this will fail when you start to add margins, paddings and borders. Thank you classic box model (content-box), I kinda hate you. You should use the new border-box model to get full control of your element’s dimensions. But that is a different story.

Basic idea

Although I’m not sure how useful 3D transformations are in modern web design and how extensively you should use them, there is no doubt that they are just cool. Therefore I want to show you how to create a simple 3D cube using some simple HTML divs and CSS3 3D transforms.

The basic idea is to create all the sides of our cube in the well known 2D space using divs (each having a different color) and then transform each side of the cube into the 3D space. Meaning changing the position and rotating the div so that it will be in the right place for a cube. We will start off with a single div and then continue to add the other sides of the cube.

This is what we want to achieve:

First 3D tranfrom

First of all we need some place to draw our cube. Imagine this as a canvas supporting 3D content. We can use a simple div as our canvas and add it some CSS properties to achieve this. Look at the example below as our starting point.

You can easily enhance the example by adding some image to the background of the rotated plane and experiment with different degrees.

So what did we just do?

-webkit-perspective: 500px;
perspective: 500px;

The perspective property kind of activates our 3D space. The value defines the distance from the viewer. In our case 500px is a pretty good value. If the value is low, the 3D effect looks weird, if the value is much higher the 3D effect is not notable anymore. Here are some examples to get a feeling about the perspective:

Click on the image to see more details

transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;

The transform style property can take either flat or preserve-3d. preserve-3d allows the child elements to be in the 3D space. I found this example to be helpful.

-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);

The transform property does the actual transformation of the div. In the example it is rotated by 45 degrees along the x-axis.

The 3D coordinate system

We need some basic understanding about the 3D coordinate system to be able to position and transform each side of the cube. See below examples of some basic tranforms.

rotateX

rotateY

rotateZ

translateZ

Back to the cube

If we combine the rotate and translate transforms, we can easily build up a cube. Let’s start with the 6 faces of the cube. Our goal ist to create a cube with a dimension 100px*100px*100px.

Now we just need to rotate and translate the different faces and we have a 3D cube. At first, all our faces are in the center of the cube. From the center:

The back side needs to be rotated by 180° around the X axis and then moved by 50px

The front side doesn’t need any rotation but needs to be moved by 50px

The top side needs to be rotated by 90° around the X axis and moved by 50px

The bottom side needs to be rotated by -90° around the X axis and moved by 50px

The left side needs to be rotated by -90° around the Y axis and moved by 50px

The right side needs to be rotated by 90° around the Y axis and moved by 50px

Note: to stack all sides of the cube I needed to add position:absolute. Without that we would also transform our sides, but not from the same center. You can try to remove position:absolute to see what happens.

Add some animation

Now lets add some keyframe animation to rotate the cube along its Y axis. For this first we need to add another div between the canvas and the 6 sides of the cube. Lets call this div cube. Having this element, we can rotate the whole cube at once.