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).
I don’t know much about convex optimization problems, but being a hands on person I like to have everything ready to experiment. My final goal is to run some scripts on Azure Databricks. So I’m still ony my journey to become Azure Solutions Architect. 😉
Installation
First things first: to get started I had to install Python and all required libraries. This was not super straight forward on Windows and it took me longer than expected. The main problem was, that I needed to install some additional software (some Visual Studio stuff).
Python
I used to use Anaconda to manage my Python environments. But I didn’t have it ready on this machine. So when typing python in the commandline of Windows 10, it basically directed me to the the Microsoft Store.
So, the installation of Python was pretty straight forward and I was able to verify the installation in a new command line window.
CVXPY
The manual says: pip install cvxpy.
But of course it didn’t work. 😉 But reading the error message carefully revealed that I had to install some additional software: error: Microsoft Visual C++ 14.0 or greater is required. Get it with “Microsoft C++ Build Tools”: https://visualstudio.microsoft.com/visual-cpp-build-tools/
It took me two attempts as I was not reading it carefully enough and I missed to install the correct pieces. But following the link in the error and firing up the installer is actually simple and didn’t confront me with any issues. After a restart of my machine I was finally able to install CVXPY without errors.
Verification
Having all dependencies installed I used one of the samples to verify my installation. I used least-squares problem.
And it worked just fine!
Conclusion
It was not a big deal, but it took me some time. Specifically setting Python up and installing the missing Visual Studio dependencies. I’m by no Python expert, I don’t use it everyday and getting back to this beautiful programming language with its rich set of powerful, yet simple to use libraries is always nice.
Unfortunately, my hosting provider doesn’t allow adding the required DNS records, but they offered me an alternative: add a forward rule. I have implemented this and it works good enough for my purpose.
I can now access https://youcode.ch as expected. 🙂
The CNAME record for the subdomain www.youcode.ch works like a charm. I was able to add the domain and the site is reachable.
The validation via TXT record worked as well, but I don’t know how I can configure the DNS record. I had to contact the support team. Worst case I have to switch to another DNS server (e.g. Azure DNS).
Since a few years I have this idea of youcode.ch. I never invested a lot into this side project after buying some WordPress theme and paying for the domain. I like WordPress for simple websites, but I never got warm with it for more complex stuff.
Anyhow the website stopped working and appearantly WordPress is pretty resource hungry and the company where I host my stuff suggested to go for another offering, which of course is more expensive. 🙂
Therefore, I decided to give it another try and move youcode.ch over to Azure.
In essence I want to host a static web app (Angular, custom domain) and add some magic using Azure functions (which may connect to other services like storage to read/write some data).
So the first thing to do is: setup a static web app and configure the custom domain.
Create Static Web App
Best watch my YouTube video on this topic. I followed the same steps for youcode.ch.
Create a new ng app
Setup Azure Static Webapp in VSC
I amable to access my brand new web app, but the domain isnot yet what I want. So let’s configure a custom domain.
Custom Domain
I already own youcode.ch – or at least I pay for it. So let’s see how simple we can get this configured! To do this, we first need to go to the Azure portal and open the static web app resource. Clicking on the custom domains will show us all registered domains.
Hitting the “add” button will open up a sidebar. Where we are guided through the necessairy steps.
Let’s go for the TXT record type, as this will allow me to add the root domain youcode.ch (and not the subdomain www.youcode.ch). On my hosting provider it is pretty simple to add this record.
Personally I don’t limit myself to a specific topic. I just pick whatever looks interesting. The reason is that although I may not have a problem that I need to solve today, the gained knowledge may serve me very well later.
What I particularly like about dev.to is that you get a continuous feed of articles – and they are usually pretty short.
I was playing around with Azure App Services and Visual Studio Code recently and I think this is a great service to get something up and running quickly – basically diving into the code right away. Let’s see if we can do everything just from within Visual Studio Code!
I never considered to become a Youtuber – but why not give it a shot, therefore this will be my first personal Youtube video. 🙂
What I used to record:
My laptop with all the development software installed
Visual Studio Code with some Plugins
Java Extension Pack
Spring Boot Extension Pack
JDK 14
Maven
OBS Studio for screen recording
Blender for video editing
Don’t expect anything professional, but somehow you have to get started, right?
Conclusion
It is pretty simple to deploy a Spring Boot application to Azure. But you need to follow some steps to be successful. I think the process could be simplified a bit: why can’t I just upload a jar file and Azure applies some meaningful defaults? What I tried first is to create the app service upfront using the VSC plugin and then just deploy the Jar – but this was not successful – I guess I would need to provide the web.config manually.
The YouTube video took much more time. It is not easy and actually a lot of work. But I learned a new things and I’m sure I can be much more productive by practicing more.
The software I used is pretty overloaded for a beginner, I had no idea where to look at or which buttons I had to click. Specifically Blender is very feature rich. The most important feature was to cut the video into smaller peaces so that I could remove unwanted content.
I think I recorded the video about 5 times. At the beginning I started over again when I made a mistake, but I soon realized that it is impossible to do a perfect run at least for me. Therefore I just repeated some steps again during the same recording.
Talking to myself felt a bit awkward. This is definitely an area I plan to improve.
I had quite a lot to do the last couple of weeks and I barely found time to continue my journey to become an Azure Solutions Architect. My free subscription ended and Microsoft asks me kindly to do an upgrade.
Understanding the Costs
I want to understand costs better! I guess this is something everyone wants to know who uses their own credit card. So the first thing I did was to delete all my resources without thinking too much, I had nothing worth keeping.
As the costs for me at the moment are a bit unpredictible I wanted to be sure not to spend too much money. In the costs management of the subscription I stumbled upon cost alerts. Sounds like a good start!
Cost Alerts
Here is a step by step guide on how I created my firt budget with a cost alert.
First we open the subscription. On the left side navigation we will see “Cost alerts”. The view wil be empty, as there are no cost alerts yet, but from there we can create a new budget.
The is empty, as there are no cost alerts yet, but from there we can create a new budget.
This will open the creation form and I think it is quite obvious what we can configure here.
If we scroll down a little bit, we will see a summary of the costs so far. This may help to define a meaningful budget.
On the next page we can now define the actual alerts. I decided to alert me once I spend a small amount of money. The alert should be sent to my email address.
Conclusion
Creating a budget and cost alerts is quite simple. I miss an option to send a test email to see if it passes all spam filters and to get a feeling what information I would get. If Microsoft would take this up, would be a useful extension I believe.
I’ve already learned quite some stuff about Azure networking on my way to become Azure Solution Architect. Reading is great, but hands on experience is really helpful to strengthen the knowledge. But how to start?
Luckily there is an Azure Free Account. Subscribing to it is very easy and you get a bit of play money. Starting on a fresh subscription makes sense in my view as you can play around with the most basic building blocks easily and it’s not yet polluted with a lot of mysterious stuff that someone else has created.
Altough I already knew about some of the basic concepts it is still great to play around with them to understand better how things relate. So here are a bunch of things I learned after playing around on my fresh subscription for a few hours.
The below may not be 100% accurate. It’s just how I personally understand the concepts after a few hours of usage. So apologies for any misinformaiton.
Portal
The Azure portal is the web application that you can use to administrate your Azure resources. Not sure if you can find every option for every little detail, but the most common tasks can be done here (creating VMs, networks, etc.). To get started I think the portal is really good. In practice you would rather use another option (PowerShell, Azure CLI, ARM templates).
Subscription
Everything starts with a subscription. The subscription is the root building block for which you can have access. If you create the free Azure account they create a subscription for you and add your user as the administrator thereof. Your Azure (or Microsoft AD?) identity lives separately from the subscription, you can get access to one or many subscriptions.
Microsoft bills you based on the subscription, so you could use subscriptions to organize your organization along this dimension (e.g. one subscription per team, per solution, environment, ..). This really depends on your organization.
I’m not sure how flexible you can move resources between subscriptions (or if it is possible at all). I need to try that out later.
Resource Group
Inside a subscription you can manage resource groups. Resource groups are acting as containers for your resources (e.g. they contain your VMs). When you create a resource group you have to specify the location. For me this was not clear at first, but after reading a bit about it: the meta data about the managed resources are stored within the resource group – so you basically decide where this information is stored.
VM
Creating a virtual machine is really simple. You just click through the wizard and you have your VM up and running. A VM is a resource like everything else. I started off creating two Linux virtual machines using the Ubuntu image. Ultimately I want to play around with the networking. But it is quite an experience to create a VM without any hurdles. After a few minutes you can SSH into your VM and do whatever you like.
Step by Step
I guess this article is more like a diary and writing stuff down helps me to describe the concepts in my own words. But I assume the value for the readers is rather limited. So to have something useful here is the step by step instructions.
1. Create a Resource Group
You can create a RG alongside creating a VM. But I decided to create it separately, starting with the subscription.first click on the subscriptions tile to get to your subscription.
List subscriptions
If you are on the home screen of the portal, click on the “subscriptions” title in the top section.
This will lead you to an overview screen where you see all your subscriptions. Here you could also add additional subscriptions. But for now just click on the subscription that was generated for you for the free account.
Which leads you to the details of the subscription. Here you can find a lot of useful information, but for now we want to create two new resource groups inside the subscription. You find the resource groups on the left hand navigation.
This brings you to the overview page for all RG in the selected subscription. Here you can create new RG.
You bascially need to pass a name. The region is relevant for storing the meta-data about the resources managed inside the resource group. So you can still create VMs wherever you like, it is not limiting you later.
2. Create a VM
Now that we have a resource group, we can create resources belonging to the group. Let’s create a Linux VM. Let’s start from the home screen.
Next hit the add button to start the VM creation wizard.
I created a Linux VM with the Ubuntu image and decided to start with a username/password login. To reach the VM from the machine I allow inbound ports via SSH and HTTP .
After hitting the review and create button, everything is validated and if your selections are OK you can hit the create button and your VM is provisioned and after a few minutes ready to use.
Summary
you can have access to one or many subscriptions
subscriptions are the level on which you are billed
organization of subscriptions is depending on the organizational structure (e.g. per team, per environment, etc.)
resource groups organize resources logically, whatever that means for you (depends on the organization in your company)
VMs and other resources are bound to a resource group
Creating a VM can be done in a few simple steps going through the wizard
Whenever I wanted to know a bit more about an option it was really simple to find the documentation. The documentation is really good!
