Add HTML Elements to XUL Addons
I've been working on a new addon at Mozilla which isn't anywhere near finished so I wont bother telling you what it's meant to do...because it could change at any moment. Since this is my first real addon, it's been a struggle, but that's a good thing -- it means I'm learning a ton. One problem I ran into was trying to get a checkbox (INPUT) element within the addon via JavaScript -- nothing was displaying.
After a bit of research and guesswork, I figured out what I was doing wrong -- I was using the wrong document method to create the element:
var input = document.createElementNS("http://www.w3.org/1999/xhtml", "input");
Using document.createElementNS with the proper namespace resulted in my checkbox displaying in all of its glory. It's beautiful square, checked glory. Firefox addons can be created in a number of ways so if you're looking to create your own and you aren't seeing HTML elements correctly, keep this solution in mind!
![JavaScript Promise API]()
While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world...
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![jQuery Wookmark]()
The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should." Basic web users probably think nothing of it but as a developer, I can appreciate the...
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
Reminded me of my initial days with JavaScript David! I also made the same namespace errors and then wondered for hours, what went wrong!