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

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