We Keep Coding

Detect if beforeinput is supported

I made use of the https://github.com/jaridmargolin/formatter.js library in my project and discovered it is not working properly on mobile devices.
My research showed that this is due to it's use of keypress which is evil and should not be used. So I decided to modify it and use "beforeinput" whenever available. And here lies the problem, how do I detect whether it is available?
I tried this methode: https://stackoverflow.com/a/2877424/13987708
But it doesn't work.
My Internet search only showed me a bunch of different veriations of the same methode when checking for detecting supported events in a browser. And I can see that this method most of the times works. it even works for the "input" event, but unfortunatly not for the "beforeinput" event.
I would love to find a way that does not rely on the user agent, as that is, so I'm told, very unrelyable.
// EDIT
Well, I did research the issue, I even say so in my question :duh:...
The situation is that "keypress" is deprecated and should not be used anymore, in fact in Chrome for Android it doesn't even fire anymore.
The above mentioned plugin to format user input relies on the methode, though.
So I went ahead and replaced it with the "keyup" methode, which indeed fires in Chrome for Android, but only gives a keyCode of 229, so it doesn't work either.
I dug a bit deeper into this whole keyboard events and found that modern browsers support the "beforeinput" event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
Which is awesome, it gives you so much mor information about the interaction between the user and your input.
So I adapted the formatter to use the "beforeinput" event instead of "keypress", but my project has to support IE, which does not support "beforeinput".
That's why I need a way to detect if the browser supports this event, and use either the "keypress" or the "beforeinput" depending on the capabilities of the users browser.
And I am aware that a browser might support functionality which the user won't use, but it's not relevant for this use case, I just need to know if the browser will fire the "beforeinput" event or not.

What is the browser support for element.removeAttribute?

The summary/details HTML5 element has terrible browser support. Therefore I built a non-jQuery fallback to make it work in non-supported browsers (IE and Edge). This fallback uses element.removeAttribute, but I am in doubt about the browser support of this command. I cannot find a definitive answer online. I have tried caniuse.com and MDN web docs, but they have no clear answers.
I know it works in my (updated) version of Firefox. Anyone has more info?

This method does not work consistently across browsers. It is BROKEN on MS Edge at least, and its brokenness is not mentioned by MDN, W3schools or caniuse at time of writing.
Basically, the method will fail when removing boolean attributes such as selected or hidden. The following will fail on Edge:
someDiv.removeAttribute("hidden");
Workaround is to set the attribute to "false" immediately before removing it.
someDiv.setAttribute("hidden", "false"); // "thanks" for the nonsense, MS
someDiv.removeAttribute("hidden");
This is not how boolean attributes are supposed to work, but that's how Edge requires it. Given that Edge is about to be dropped by Microsoft in favour of a Chromium-based alternative, we can expect this bug to remain unfixed, and the workaround to clutter our code for years.

'deviceorientation' in Firefox?

I'm working with 'deviceorientation' on my laptop and an example jsfiddle seems to work fine in Chrome but is not responding in Firefox. I think that line 15 of JS is not working somehow...
window.addEventListener('deviceorientation', devOrientHandler, false);
The MozOrientation version on line 18 doesn't seem to be picking up the slack
window.addEventListener('MozOrientation', mozDevOrientHandler, false);
Just updated Firefox. And no change. I've tried to test on a desktop and (unsurprisingly) the machine doesn't seem to have the necessary accelerometers/sensors so the fiddle doesn't work on any browser on that machine. I've been scouring questions, reading the w3c specs, the MDN support and I still can't get it.
Does anybody know if this is a Firefox issue? Did I mess up settings or something? Any help is much appreciated. Any ideas as to why that example jsfiddle isn't working on Firefox?
note: the example "green ball" in the MDN link above isn't working on FF either. First time asking a question on SO.
Thanks!
Edit: I should clarify that the jsfiddle is the best example I could find, and is NOT my code. I believe it was from HTML5rocks.com but I can't find that source.

Firefox does not, at this time of writing, expose DeviceOrientation events on any Desktop platform. Your event handler is not triggered in Firefox simply for the reason that the API is not enabled in their Desktop browser builds.
On the other hand, Chromium-based browsers have enabled DeviceOrientation events with some important caveats. Chromium-based browsers generally only return DeviceOrientation events consistently on Mac OS X due to the general availability of gyro + accelerometer hardware sensors that are available in Apple computers. Additionally, Chromium-based browsers report the event.alpha value as undefined due to no compass or magnetic sensors being available to compute that correctly.
The situation on mobile browsers is much better and is arguably the main target for this API. All major mobile browsers (Safari on iOS, Chrome/Opera/Firefox on Android) do support this event in its un-prefixed form i.e. window.addEventListener('deviceorientation', function(event) { /* ... */ }, false).

Event Listeners - Equivalent for Firefox?

I noticed Chromium has an interesting feature in the inspector/debugger: Event Listeners.
I haven't found the equivalent feature in Firefox Firebug. I saw a question from a couple years ago that said Firefox does not have an equivalent feature, but I'm wondering if there has been any update on this... Is there an addon yet for Firebug that lists listeners? Or, is there something about Firefox's implementation that makes this not practical?

Now, this feature is natively in the firefox inspector, you not need firebug anymore :)
http://flailingmonkey.com/view-dom-events-in-firefox-developer-tools/

There's Eventbug which is Firebug extension.
Also, since Firebug 1.12 beta 1, you can type getEventListeners(element) in the command line. However this needs specifying the exact element from which you want to retrieve event listeners.

Find out which functions use CPU intensively

I'm using jQuery a lot, especially for animations like fading or sliding :)
so I'm attaching various functions that do this on elements like
$(".fade").each(function(....)
or
$('*[class*="slide-"]').each(function(...)...
On some elements I use livequery without specifying a event (so it detects new elements that are being added in the DOM).
$('*[class*="slide-"]').livequery(function(...
This uses a lot CPU.
Anyway, what I'm asking is if there is a application or something, like a code profiler, that can show me how much CPU use each of these functions that are hooked on selectors/events.

Use the Developer Tools in Chrome and Safari, or Firebug for Firefox, and check out the Profiles section. In IE8, press F12 to open its own developer tools and profiling. This question has also been asked, answered, and accepted already on stackoverflow.

Firebug in Firefox has a wonderful profile tab that will show you scripts running and execution time (if that's what you're looking for)

WebKit based browsers (like Chrome) have cpu profiling tab in developer tools, might be what you are looking for.

As already mentioned, many modern browsers include profilers. You might also want to check out the jQuery Profile plugin as a complement to those profilers...
http://plugins.jquery.com/project/profile

The new IE9 beta developer toolbar has a nice profiler also.