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!

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: