Category: Programming

So we are finally at the most important component. The first PoC technically worked, but no one would be happy to use the tool as is. So we have to apply the same styles and create a more interactive experience. Keyboard Events The key functionality is to type the word you see, letter by letter.… Continue reading Typolino – Training

I like LESS. It is simple and has some cool features. I usually try to follow BEM when it comes to define classes and styles – but mixins are great. To extend the responsive functionality I created a set of media query helpers that can be added to any class: The widths match the PrimeNG… Continue reading Typolino – LESS / Responsive Helper

Same pattern also on the lesson selection screen. Here I used the card component to render each individual lesson. We can still improve this page a lot I think – but for a first release it should do the job. The upper case text, the huge font and the spacing make it a bit difficult… Continue reading Typolino – Lesson selection

Let’s apply the same pattern to style the registration form. I don’t really like to have so many options at once – the UI feels overloaded. But also being a technical demonstration of what we built so far I’d like to keep all the options. Why not have a default one and let the user… Continue reading Typolino – Registration

So far the app really looks crappy. But to be honest I follow the very same pattern in my job. Sometimes it’s hard to convince people that it will look better later on. One can waste so much time in making the stuff nice and shiny (and if you only focus on a small piece… Continue reading Typolino – Add Style

What should happen when you complete a lesson? It would be nice to track the completeness of a session. We can later extend this by tracking the time it took to complete a lesson – but first we need a strategy. Data Model We can’t add the progress to the actual lesson. We need to… Continue reading Typolino – Store progress

Okay, maybe I should have added that before. But if it should ever be possible to use the tool online we need a possibility to register new users. I think typolino should support 3 ways: email / password email link anonymous Enable Anonymous This needs to be enabled in the Firebase console. Registration Page Now… Continue reading Typolino – User Registration

Now that we have the authentciation part covered we can focus on the authorization. Protect Routes To protect the routes we can use Angular Fire built in guards. They are easy to use (CanActivate guards). Basically you could write your own with ease as well. The code below does two things: Note: at the time… Continue reading Typolino – Authorization

In order to track the progress of the individual lessons and to keep some statistics we need a user to attach them to. It is really easy to add authentication to a Firebase app. You can choose among the most popular proviers like Facebook, Google and Twitter. I’ll use the email / password option as… Continue reading Typolino – Authentication

Now let’s finalize the PoC! There are so many approaches to write software. What worked best for me so far is to start with the basics and make sure everything works. Name it evolutionary prototyping with the main focus on integrating most of the stuff horizontally. PrimeNg I’ don’t want to focus on styling the… Continue reading Typolino – PoC