Anyway, it represents the current inherited color, so you can use it to create borders and backgrounds and things like that, matching the color of the element, but without actually writing it again! This can help in avoiding repetition and keeping the CSS more manageable, or in Glen’s use case, in writing more responsive components.
the color for the box-shadow in the #thing span will be blue, because it uses currentColor, which at that point has inherited blue from #thing. If we change the color of #thing to something else, we do not need to update the code for #thing span. Beautiful!
You could even use CSS variables to set a global colour variable that is used in the document, and currentColor will inherit values set with var. For example:
… renders the text red, and the box shadow is red as well.
Unfortunately it seems like calc() doesn’t accept color units yet, which means we cannot do maths on the color values. Otherwise, we could do things such as what CSS pre-processors do, generating new colours using hsla functions, etc.
I thought that since I was going to the Web Audio Hack Day here in Singapore, it would be great to have a more Web Audio focused Media Recorder demo, so I built a little demo that essentially asks for audio permission, then records a short clip of audio, decodes it as an audio buffer and uses it to loop a BufferSourceNode in Web Audio.
You wouldn’t believe what happened next… or would you?
Two Things That Happened When Sole Ran This Demo
1. Chrome Canary Just Totally Gave Up
I filed a bug, since there wasn’t really much I could do…
2. Nightly Sometimes Insisted In Returning Some Mysterious 596 Samples Length Which Was Totally Not What I Expected, And Did So Without Following Any Meaningful Reproducible Pattern
I tried to dump the contents of the returned blob once read as a buffer, using String.fromCharCode–perhaps looking at binary data while having my breakfast coffee would enlighten me?
The demo is here: instalooper (sources) … just in case you want to play with the code–maybe it will be fixed next month, who knows!!? Or maybe it is just a bug in my machine and it works in everyone else’s!
Disclaimer: I have not tested this anywhere else than Nightly and Canary. So I’ve no idea of how it works (or not) in mobile.
I have a more complicated version that not only loops the sample but also randomly changes its playback frequency. Sometimes the generated sounds are strangely fascinating. It still needs a bit of interface work, but hey… watch out, Steve Reich! 😎
And now… time to prepare to go to the airport and fly to Melbourne for JSConf.AU! More jetlag, YAY!
For the project I’m working on I’m building web components that sometimes require other components to build their UI. For example, the theremin-ui uses the slider. So they will try to load and register the component before creating instances of it. It worked fine when there was only one level of dependencies, but then I put all of the components on the same document, to let the user choose an instrument from the collection of Web Audio instruments, and I got an error from the browser complaining about… something:
NotSupportedError: Operation is not supported
I traced it down to the register() call, and I figured that I was registering an element twice. So I made safeRegisterElement, a one-function module I’m using now instead of directly calling document.registerElement:
var safeRegisterElement = require('safe-register-element');