FragSalat's Blog

Hey folks :) Today at work we made some changes in our Aurelia application which lead to some unforseen changes. The model setup is a parent class which holds a list of child classes. The parent class have a getter which returns true or false based on all children having a certain property or not. (Quelltext, 21 Zeilen) This worked previously because the children array was itself modified and therefore the getter re-evaluated. Now the code changed so that only the specific property of the children change and the getter isn't called in this case. After wasting some time with Google and even ask the community in discourse I've found NO acceptable solution. So I checked how the computedFrom decorator works and wanted to create my own. How it works First of all I want to say that I might miss something here as I only had a shorter look. As far as I can see it tThe original computedFrom decorator just takes your string parameter list and puts it into the property dependencies on the…

Everyone of us is using some kind of logging in our applications. I actually didn't thought that logging can be evil to me... Recently I recognized that my lovely Aurelia app was getting slower and slower and that it struggled with big data tables in some cases. Once I got some time and analyzed the problem and found quite fast some things to improve. The Performance tab in Chrome gave me nice insights about load times, memory consumption and performance of single functions and their call stack. After some navigation through my Aurelia application I found a quite interesting memory leak. There were actually quite many places where I sadly kept references to some view models and custom elements which lead to a huge dom tree and other objects not being garbage collected. Luckily all of those were easy to fix by adjusting my self written annotations and subscription management to use the bind and unbind lifecycle of the view models and custom elements. After I ensured that all…

In my last articles "How to connect Sonos to Google Assistant - Part 1 [URL:https://www.stagetwo.eu/blog/entry/7-how-to-control-sonos-with-google-assistant-part-1/]" and "Control Sonos with Google Assistant - DynDNS - Part 2 [URL:https://www.stagetwo.eu/blog/entry/9-control-sonos-with-google-assistant-dyndns-part-2/]" I explained how to create a service to consume webhooks from Google to control your Sonos with your voice and how to setup a DynDNS domain. This part will focus on the configuration of an application in Googles Dialogflow. These platform gives us the ability to design flexible dialogs we can have with the Google Assistant by defining phrases the user has to say and the assistant responds. The cool thing here is that the Google Assistant in comparison to Alexa is capable of handling variations to the phrases you specify. If you for instance define the sentence "play a song from $artist", the Assistant will recognize "play a track from $artist" as well. In my eyes this is…

Quite a time ago I bought a Sonos Play:1 because I was super sure I can control this with my new Google Home Mini and this would be super fancy. Sadly I was negatively suprised :(. There wasn't and still isn't native support and even on google there were not that many options to work around this. I checked out if IFTTT is able to connect to my Sonos but no luck here. I read that Logitech Harmony products are able to control the Sonos players but this wasn't working as I expected and I keept searching. I found an option with the service Yonomi which seem to be similar to IFTTT but i didn't want to register for another not fitting service. Yesterday I was thinking about the way I searched and that I might find solutions which requires development skills and I found something. Actually Sonos players got an HTTP API and there is a NodeJS project out there which wraps this API in a simple to use gateway. I'll explain in the next articles how to setup the Sonos HTTP gateway, a Google…

Today I struggled with a weird behavior of CSS transitions. In some cases they worked and in some not. So I investigated a bit and could find a solution and even kind of an explanation :D My use case was a overlay element whose height should be animated via CSS transitions when opening and closing based on the content it has. The content itself was absolute positioned for several reasons and I had to get the height of all children every time they change. In a previous version the code kind of looked like this: (Quelltext, 31 Zeilen) When the overlay opens, it get's the height of it's children and the children notifies the container when their height changes in meanwhile. This worked very well so far but I wanted to decouple the opening logic from the special overlay to have a more generic overlay with dynamic content. This generic overlay should not know anything about the children it renders but it's height. So I introduced a `setHeight(int)` function to the Overlay, which can…

Today I recognized an, at least in my eyes, weird behavior of the BindingBehavior in Aurelia. My use case was a group of badges showing the current filter criteria sent to the backend. Instead of showing a list of unreadable codes the API expected, I wanted to lookup the name in my master data dynamically. So I created a BindingBehavior which expects as value the filtered code and as additional parameter the type of master data where to look at. (Quelltext, 8 Zeilen) This seem to work or doesn't it? When the order of the filter types in the list remains the same this works quite well but when the order can change during user interaction the results become wrong. The problem here is that Aurelia reuses already rendered elements and just binds a listener to it's value to re-render the text node. This leads to the problem that the value for the lookup BindingBehavior will change but the additional parameter won't. In my use case this happens all the time because the user can remove…