FragSalat's Blog

Blog Articles Tagged with “javascript”

    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.

    Read More

    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

    Read More

    In my last articles "How to connect Sonos to Google Assistant - Part 1" and "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 super fancy and a great technology.

    Create the Dialogflow agent

    In the first step you have to go to Dialogflow and create a new agent. As far as I know it, the name doesn't really matter

    Read More

    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

    Read More

    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:

    Read More

    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.

    HTML: filter-list.html
    1. <template>
    2. <div class="filter-list">
    3. <div class="filter" repeat.for="filter on filterGroups">
    4. <span class="text">${filter.value & lookup:filter.type}
    5. <span class="icon icon-close" click.delegate="removeFilter($index)"></span>
    6. </div>
    7. </div>
    8. </template>

    Read More