Typolino ‚Äď Adding Features (one year later)

Coming back to a side project after a year can be pretty painful. I actually wanted to see how it goes with Typolino. Is the CI/CD pipeline still working? Can I easily upgrade my dependencies and add new features?

A product should grow with your clients and Typolino is no different. My kids get older and they want some new challenges. ūüôā

CI/CD

Besides allowing teams to focus on writing code adding business value, having a CI/CD pipeline is also great to come back to an abandoned project. I didn’t have to do anything, it still works fine. I recently tend to tell my colleagues that we should think CI/CD first (like mobile first, API first, …) and I believe this pays off very quickly. I’m aware this can also go wrong, but I was lucky enough. Having a regular run to prove your build still works fine may be a good idea, so that you an fix issues right away.

Upgrade

Upgrading npm dependencies is always a bit cumbersome, especially if you want to use the latest major versions. There is still a lot of movement in the web area. I thought it would be cool to see how I can upgrade a pretty old Angular version to Angular 12. It worked quite well, but it was not painless. To be honest I think this should be easier, it is not something you want to think about too much about, specifically if it affects the build system itself. I didn’t have any breaking API changes, but the build system was updated. It took me more than an hour of absolutely not-fun work. ūüôā

As a side note: the Angular team decided to go “prod build by default”. Which now kind of killed the faster development builds, I need to do some more research on how to get this back, but waiting like 20 seconds to see the changes during development is a no go. I’m sure I can fix it, just a question how many extra config in angular.json it will require.

Features

Having the CI/CD still working and the upgrade done I got enough time to add some features.

  • Better styling, I added an Angular component that can render words as keyboard keys. Looks a bit fancier now
  • Updated the colors to be a bit sharper
  • Added a hard mode, that will blank a letter in the word. This is great for my older one as he now needs to know how to properly write the word

Conclusion

Having a proper CI/CD pipeline frees me up from manual activities that would probably hold be back from additional changes in “legacy” code and lets me focus on adding actual value. The hurdles are so much lower in my view.

If you want to test the new features, visit Typolino (still German, sorry).

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 Nerv.¬†Aber¬†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.

Equal height divs made simple

I can’t remember how often I had to create a column based layout using HTML and always struggled when it came down to placing two divs next to each other having the same size. Usually the problems pops up¬†when the columns have a different background or some kind of other visual attribute¬†such as a border. Because when¬†everything has the same color who can tell you if the elements have the same size? ūüėČ

columns-2
This is what usually happens when you try to place a div next to another

There are different approaches to solve this issue and none of them I really liked until I learned about display:table-row and display-table-cell. Both display values are fully supported by all modern browsers (starting from IE9).

columns-1
The result using the CSS display property. Its easy to understand and no hack anymore.

With those display values you can arrange your divs like a table without having to use the old school <table> for laying out your page.

The usage of this CSS properties is pretty simple and straight forward. Imagine we want to create a row with two columns. Back in the old days one would have coded something like:

<table>
  <tr>
    <td>column1</td>
    <td>column2</td>
  </tr>
</table>

The CSS property display allows you to style a visual element to behave like table elements. Instead of using <table>, <tr> and <td> elements we just use simple divs. See the example in the jsFiddle below: