JavaScript und Physik

Gerade kürzlich ist mir die Formelsammlung der Physik in die Hände gefallen und ich hatte irgendwie Lust, ein Pendel zu programmieren. Ich habe früher bereits einen Artikel geschrieben, wie man mit JavaScript physikalische „Experimente“ durchführen kann und bin nach wie vor der Überzeugung, dass dies eine ideale Tätigkeit ist, um das Programmieren zu erlernen. Man braucht nicht viel (ein Browser genügt) und man kommt auch sehr schnell zu einem visuellen Ergebnis. In meiner Tätigkeit als Ausbilder habe ich bemerkt, dass viele angehende Programmierer Freude daran haben, etwas zu programmieren, was auch visuell ansprechend ist.

Freier Fall

Für den Anfang gefällt mir eine Formel besonders gut: der freie Fall.

h=\frac{(g \cdot t^2)}{2}
  • h = die Fallstrecke nach der Zeit t
  • = Fallbeschleunigung (auf der Erde etwa \frac{9.81 m}{s^2}
  • t = Zeit in Sekunden

Umsetzung

  • Programmieren werde ich das Beispiel auf plnkr.co, das ist sehr einfach zugänglich und der Funktionsumfang genügt vollkommen.
  • die graphische Umsetzung werde ich mit SVG programmieren. Raphaël eignet sich hierzu sehr gut
  • Am unteren Bildrand soll noch der Boden gezeichnet werden, der Boden soll den Fall abrupt stoppen.

Das Ergebnis

…findet sich hier.

Wie weiter

Es ist schon erstaunlich, was man mit dem Browser heute in sehr kurzer Zeit machen kann und irgendwie macht das direkt Laune ein kleines Spiel zu programmieren.

AngularJS allow invalid values to be set on the model

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.

<input type="email" ng-model="model" ng-model-options="{allowInvalid: true}" />

I plunked something that demonstrates both the default behavior and the option enabled:

http://plnkr.co/edit/OlkS5U?p=info

Have fun
Christian

 

Run EasyTax2014 with Docker

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.

FROM ubuntu:14.04
MAINTAINER Christian Menz <christianmenz@gmail.com>

RUN apt-get update
RUN apt-get -y install python-software-properties
RUN apt-get -y install software-properties-common
RUN apt-get -y install unzip

#
# Install Oracle JDK
#
RUN add-apt-repository -y ppa:webupd8team/java
RUN apt-get update
RUN echo debconf shared/accepted-oracle-license-v1-1 select true | debconf-set-selections
RUN echo debconf shared/accepted-oracle-license-v1-1 seen true | debconf-set-selections
RUN apt-get -y install oracle-java7-installer
RUN apt-get -y install oracle-java7-set-default
RUN apt-get clean

# Install some X libs & stuff (not sure what is actually needed)
RUN apt-get -y install libxtst6 libgtk2.0-0 libgdk-pixbuf2.0-0 libfontconfig1 libxrender1 libx11-6 libglib2.0-0 libxft2 libfreetype6 libc6 zlib1g libpng12-0 libstdc++6-4.8-dbg-arm64-cross libgcc1

# Download and extract EasyTax2014
RUN mkdir /EasyTax
WORKDIR /EasyTax
RUN wget http://www.hwis.ch/Downloads/EasyTax2014AG_unix_1_1.tar.gz
RUN tar -zxvf EasyTax2014AG_unix_1_1.tar.gz

RUN mkdir /root/TaxData

# Run the app
CMD ./EasyTax2014AG/EasyTax2014_AG

Here are the instructions to build and run the container

docker build -t christianmenz/easytax2014ag .

xhost +

docker run -it --rm -v /tmp/.X11-unix:/tmp/.X11-unix -v /home/<yourusername>/EasyTax2014/:/root/TaxData -e DISPLAY=unix$DISPLAY christianmenz/easytax2014ag

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.

OK, maybe I should do my taxes now.. :/

Java 8 default methods

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).

Simple example

public class SimpleExample {
    
    interface Interface1 {
        
        default void test() {
            System.out.println("-- default test");
        }     
        
        default void test2() {
            System.out.println("-- default test2");
        }
    }
    
    static class Implementation1 implements Interface1 {
        
        public void test2() {
            System.out.println("my own implementation");
        }                      
    }
    
    public static void main(String[] args) {
        Interface1 if1 = new Implementation1();
        
        if1.test();
        if1.test2();
    }   
}

Guess what the program will output.

-- default test
my own implementation

Spring Boot Health Checks

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.

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-actuator</artifactId>
</dependency>

This will add several useful endpoints to your application. One of them is /health. When you start your application and navigate to the /health endpoint you will see it returns already some data.

{"status":"UP","diskSpace":{"status":"UP","free":7537176576,"threshold":10485760}}

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.

@Component
public class SomeServiceHealthCheck extends AbstractHealthIndicator {

  @Override
  protected void doHealthCheck(Health.Builder bldr) throws Exception {
    // TODO implement some check
    boolean running = true;

    if (running) {
      bldr.up();
    } else {
      bldr.down();
    }
  }
}

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.

{"status":"UP","someServiceHealthCheck":{"status":"UP"},"diskSpace":{"status":"UP","free":7536922624,"threshold":10485760}}

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.

healthcheck

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

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.

column-layout-wrong
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.

So here is how to make two divs next to each other:

 Links

http://www.w3.org/TR/css3-values/

CSS Grid System

Layout für deine Webseite

Um mit HTML und CSS ein hübsches Layout zu erstellen, gibt es ganz viele verschiedene Möglichkeiten. Vor langer, langer Zeit war es einmal üblich alles mit Tabellen (<table>) zu lösen. Damit war man allerdings nicht so ganz zufrieden (eine Tabelle ist für Daten und nicht für das Layout gedacht!) und ist später dazu übergegangen auf <div> zu setzen und das Styling über CSS zu lösen.

Moderne Layouts werden heute üblicherweise mittels CSS definiert. Das hat den Vorteil, dass HTML den Inhalt und CSS das Styling definiert, man hat also eine schöne Trennung. Im Prinzip..

Praktisch gesehen spielt es natürlich eine grosse Rolle, wie die HTML-Elemente aufgebaut sind, damit man diese auch so stylen kann, wie man das gerne möchte. Es ist also ein gutes Zusammenspiel von HTML-Markup und CSS Regeln.

grid-sample
Etwas andere Layouts ohne viel HTML-Blabla sind bald sehr einfach zu realisieren

Layout tut weh

Obwohl sich die HTML/CSS Kombination durchgesetzt hat, ist es dennoch oft mit viel Aufwand verbunden, ein schönes Layout zu erstellen. Und manchmal kommt man nicht darum herum, Elemente pixelgenau zu positionieren (siehe position:absolute), doch dieses Vorgehen raubt einem oft den letzten NervAber CSS und der Browser entwickeln sich stetig weiter und ich möchte in diesem Artikel auf ein neues Feature eingehen, das noch ganz frisch ist und komplexe wie auch einfache Layouts in Zukunft zu einem Klacks machen dürfte: CSS Grid Layout Module.

CSS Grid Layout Module

Die Spezifikation des CSS Grid Layouts befindet sich zur Zeit noch in Arbeit. Aktuell kann man das Feature lediglich mit dem IE10+ verwenden (mit -ms- Präfix). Im Chrome ist das Feature experimentell, kann jedoch sehr einfach eingeschaltet werden.

Im IE heissen die Properties etwas anders und nutzen benötigen das -ms-Präfix. Hier die Dokumentation für den IE.

Das Feature nutzen

Um CSS Grid Layouts im Chrome zu aktivieren öffnet man im Browser die URL chrome://flags und aktiviert das Feature #enable-experimental-web-platform-features.

chrome-flag
Dieses Feature muss aktiviert sein, um CSS Grids zu verwenden

Ein Beispiel

Als Beispiel möchte ich das folgende Layout entwickeln, etwas, was mit altbekannten Mitteln relativ mühsam zu programmieren wäre.layout

Um die einzelnen Bereiche lässt sich ein Grid denken.grid1

Und diese einzelnen Bereiche lassen sich dann wie folgt nummerieren.

grid2

Mit dem CSS Grid Layout kann man nun via CSS seine HTML-Elemente (üblicherweise Divs) in die einzelnen Rasterelemente einteilen.

  • Das Raster (irgendein HTML-Element) muss mit display:grid gestylt werden
  • Nun wird dem Raster über CSS mitgeteilt, wie sich die Rows und Columns aufteilen (    grid-template-columns, grid-template-rows)
  • Die einzelnen Kind-Elemente des Rasters können nun über das CSS-Property grid-column und grid-row im Raster platziert werden. Elemente können sich auch über mehrere Columns oder Rows spannen (span)

Weiteres

Mit dem neuen System lassen sich  auch noch weitere coole Sachen machen. Z.B. lassen sich die Layouts im CSS-Code auch „visuell“ anordnen. Das beste ist aber, dass sich die Elemente unabhängig der Position des HTML-Codes positionieren lassen. Stell dir vor du hast ein Layout, welches auf dem mobilen Gerät das Menü am unteren Bildrand anzeigen soll, auf dem Desktop jedoch irgendwo im oberen Bereich. Trotz Media-Queries ist das … war das ein Problem. Mit CSS Grid Layouts ist das ein Klacks!

Lets create a 3D cube with CSS

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.

Lets add some properties to the canvas.

.canvas {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 500px;
  perspective: 500px;
  width:250px;
  height:250px;
  background-color:black;
}

And now lets transform the blue box in the 3D space by rotating it along the x-axis.

.side {
  background-color:blue;
  width:150px;
  height:150px;
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

Here is the example:

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

3d-kirk

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:

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.