Blog-Artikel von FragSalat

    In my last article "Control Sonos with Google Assistant - Node server - Part 1" I explained how to create a service to consume webhooks from Google to control your Sonos with your voice. Because this server has to be reachable for Google from outside of your home network, you have to create a domain which is pointing to your server. This is called dynamic dns and is a pretty simple priciple but requires some effort to setup. I'll explain how to create a DynDNS domain based on Cloudflare or the service noip.com which is only limited free.


    The priciple

    You might or not know what a domain is and how this works. I try to eplain it in a very simplified way. Think about it like your contacts in your mobile phone. Instead of saving all the plain phone numbers you're saving them with the name of the people owning this number. A domain is almost the same. It's just the alias for a specific ip which is like a phone number in the web. The problem is, that like with your contacts, the alias is

    Weiterlesen

    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

    Weiterlesen

    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

    Weiterlesen

    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:


    Weiterlesen

    Recently I wanted to watch a series hosted on different platforms like streamcloud or vivo. So I searched for this series and opened the first video on streamcloud and was abused by tons of porn advertisements. Ok I could install a Adblocker, which I don't like because it steals smaller websites like mine the money, but there are sites out there where you can't start the video with enabled adblocker. After I passed the 10 seconds delay I clicked the button to proceed to the video. Again I was bombed with advertisement. Even though this is already absolutely annoying, I was super pissed off after four times a popup opened when I clicked the start button. Incredibly the video finally started after the 5th click. To watch one episode which has around 20 minutes play time I had to see 8 advertisement blocks and 4 popups. Holy shit was I annoyed when I thought about that one series like fairy tail has over 250 episodes and I have to do this every 20 - 40 minutes!!!

    The idea was born

    So i

    Weiterlesen

    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>

    Weiterlesen

    As stated in my last article, Web Components are a relative new way to build modern and reusable components. Even if the Web Components specifications are not implemented in some browsers like Firefox and Edge, there are ways to support them by using a polyfill. Aurelia itself is a single page application framework (SPA) which is based on the idea of Web Components. Some of you might ask: "Why do I need native Web Components when Aurelia provides the ability to use some of the main benefits out of the box?". The answer for this is pretty simple... Reusability :)

    Since Web Components are native browser standards you can use them in general with any framework or library like Aurelia, Angular or even with React. This makes it easy for companies with multiple applications and frameworks to build components only once.

    So how can we use Web Components in Aurelia?


    In our example we will use one of the prepared aurelia skeletons ESNext + JSPM which you just can copy to have a ready to use

    Weiterlesen

    Web components are a relative new set of specifications which appeared at 2011 and aim for a better encapsulation and reusability of written components. These specifications consists of the Shadow DOM, Custom Elements, HTML Templates and Imports. Shadow DOM provides an API to work with an to the user hidden DOM tree, which enables the programmer to render his own elements like a native one. The Custom Elements specification defines the lifecycle a HTML element has, which is required to handle the element attributes and render the DOM of the custom element. There are two other specifications which describes how to import components into a document and how to define the component template. All of those play together to create super awesome web components :)


    Here is a small example of a simple web component:

    Weiterlesen