Tag Archives: firefox

What have I been working on? (2014/02)

Looking at my todo.txt file, February has pretty much been my speaking-to-everyone month. I spoke to a lot of people from many different teams in Mozilla, and to a lot of people outside of Mozilla for interviews and conferences. Thankfully I also managed to sneak some coding time in it, and even some documenting time!
Continue reading

Firefox now implementing the latest Custom Element spec

This week we saw bug 856140 Update document.register to adhere to the latest Custom Element spec fixed. So you can now do things such as declaring and instancing <fancy-button>s, which you couldn’t do with the previous implementation, because it would require your custom element’s name to start with an x-, following the old spec. Also, UI libraries such as Brick and other X-Tag based libraries won’t break because the callbacks are never called when web components are enabled. Those are all old bad nightmares from the past!

However the spec isn’t finalised yet–hence you can’t be done implementing something which hasn’t been written yet. And we need people to experiment with web components in Firefox and report bugs if they find them (you can file them under Product = Core, Component = DOM).

If you want to try this out, you can download a Nightly copy and follow the instructions in my Shadow DOM post to enable web components support (it’s disabled by default to prevent “breaking the world”, as Potch would put it).

What have I been working on? (2014/01)

January is over, what have I done with it?

Well, to start with I’ve been working with the fantastic people from Firefox DevTools. We’re preparing a new feature for the App Manager and I’m really thrilled to be a part of this. I’m not going to disclose what it is yet until I have something to show (it’s my way to make you all download a Nightly build, tee hee), but I believe it’s going to be GREAT.

Then I’ve also been lending my brain to other projects. First, localForage, our library for storing data using the same interface from localStorage, but asynchronously and with better performance (by using IndexedDB or WebSQL if available). Or just falling back to localStorage otherwise (sad face, sad face).

The other project I’m involved with is chatspaces, “a snazzy chat app”. I’ve done some (yet unfinished) work with implementing push notifications using Simple Push, and I’m also working on outputting better GIFs (i.e. smaller but with same perceived quality). If you’re up for a slightly bumpy ride, you can try out chatspaces today.

“Generating better GIFs” means that I’m spending quite a bit of time in Animated_GIF, a library for creating animated GIFs in the browser. I implemented a couple of features like dithering and custom palettes past week and I’m pretty happy with the results you can get. I still have some more work to do before it’s a totally awesome library from README to code to examples, but it’s already used in somewhat popular places like chat.meatspac.es which you might have heard about ;-)

And I’ve also written an article for Mozilla Hacks. If you liked my previous article on unprefixed Web Audio code, I think you might like this one too. It should be published some time soon (fingers crossed).

There are more things that I’ve been doing this month like attending LNUG’s meetup, helping people with their Firefox OS apps, improving documentation for X-Tag, and finding+filing a bunch of bugs… all of which make me terribly happy as I feel like I’m making an impact. Yay! :-)

Shadow DOM in Firefox!

Wow, this has been a nice surprise to start the year :-)

If you want to start creating shadow roots like there’s no tomorrow, you’ll need two things:

  1. An updated version of Firefox Nightly. Get one from the Nightlies website.
  2. Manually enabling web components, because they’re disabled by default. Go to about:config, look for dom.webcomponents.enabled and double click the property to toggle it to true.

No restart was required (at least on my case), and BAM! I could start doing things such as…

var container = document.createElement('div');
container.createShadowRoot();

But all the examples in the world use webkitCreateShadowRoot()!!!

Worry not. Following established monkey patching traditions, I’ve created an small shim that monkey patches browsers that only implement webkitCreateShadowRoot so they can use createShadowRoot instead. Here’s WebComponentsMonkeyPatch in all its glory. Once you include it in your projects, you can start writing future-proof code today (and updating older webkit- based code to use unprefixed methods).

I have also written this simple example demonstrating how to create unprefixed Shadow Roots like there’s no tomorrow.

The umbrella bug for tracking Web Components work in Firefox is still not resolved, which means that this might not work totally as you’d expect when you get excited and start playing with this. In which case, please file bugs and help us make Firefox better ^_^

“Mozilla’s new technologies” (for Mozilla Power’13)

I was going to “manifest” myself in Cairo via the powers of videoconferencing for Mozilla Power’13, but connectivity issues happened, so I recorded a screencast with my talk:

Slides

Here’s hoping the Mozilla Egypt community is having a great event :-)

Do send me any questions you might have about the topics I discussed, and I’ll do my best to answer them!