NOTE: This post was published while Rspack’s latest version was v1.0.0-beta.4. Some details are likely to change as Rspack approaches its 1.0 release. Rspack is a Rust-based alternative to Webpack that promises to be faster and includes a few common conveniences too. After a year of trying, I’ve finally finished converting my two largest Webpack...
I wrote most of this post sometime in 2022 but I think it holds up alright in 2024 so I decided to publish it for posterity. I don’t really like doing posts like this—I’d much rather share some innocuous learnings or tips but it turns out I have opinions too 😓 Sorry! 2024-02-21: I’ve added a few reflections at the end of the post. 2024-04-27:...
2024-01-22: I’ve updated this to work with Playwright 1.41. Last week started like every other week, meaning half a dozen projects were broken by half a dozen incompatible dependency updates. There were the usual suspects like Lexical but most noticeable was Playwright.
After over a year of fighting with Eleventy and then Astro to set up a this blog just right I find myself needing to set up yet another blog, this time for work. I could just build on what I’ve got with Astro but I can’t help but wonder if I would have been better off sticking with WordPress after all.
2023-12-14: I’ve heavily updated this to work with Astro 4.0 but for posterity I’ve saved the old version in the Internet Archive. There’s something depressing about a blog about blogging. I never wanted this to be one of those blogs. But I’ve struggled so much with Astro’s image feature these past few weeks that I really hope it will benefit...
Six years since my last post, I thought I’d get back into blogging. I plan to write about Web apps and things but I’d also like to talk a bit about running a company in Japan since there’s not a lot of good information on that in English. Today, I want to share some notes about sponsoring Open Source through GitHub as a Japanese company.
Happy new year! As promised I thought I’d share a few of the Web animation things I’m looking forward to in 2017. I’m terrible at predicting the future (I used to be a believer in BeOS and VRML) so this is mostly based on what is already in motion.
MozAnime is the informal name we use to cover all the work on animation-related features at Mozilla. We’re based in Tokyo, Tochigi, Taipei, Toronto, and… somewhere in France that probably, hopefully, starts with a ‘t’ as well. I can’t wait to tell you all the things I’m looking forward to next year, but in this post I want to share some of the...
At Mozilla Japan, we’ve been doing a series of monthly events called “Gecko inside” where we discuss details of hacking on Gecko in the hope of helping each other learn and helping new contributors to get started. Last weekend we held a special “write a patch” day where we gathered a group of long-time contributors to mentor first-time...
Fortunately Taipei’s shaved ice extravaganza Ice Monster has popped-up just around the corner from our office in Tokyo! Now that I’ve sufficiently buried the lede, I’d like to introduce you to what our platform engineers have been up to in the land of the rising (and scorching) sun. Since April we’ve been trying to focus our efforts around two...
Earlier this week, Blink announced their intention to deprecate SMIL. I thought they were going to replace their native implementation with a Javascript one so this was a surprise to me. Prompted by this, the SVG WG decided it would be better to split the animation features in SVG2 out into a separate spec. (This was something I started doing a...
Yesterday marks 10 days to the day since I posted my first patch to Bugzilla. It was a small patch to composite SVG images with their background (and not just have a white background). Since then I’ve contributed to Firefox as a volunteer, an intern, a contractor, and, as of 3 years ago tomorrow, a Mozilla Japan employee. It’s still a thrill and...
Just recently I had the chance to talk about authoring animations of CSS/SVG for better performance at The Graphical Web 2014\. I thought I’d put up the slides here in case they’re useful to others.
Over the weekend I had the chance to speak about Web Animations at the HTML5 conference 2013 in Tokyo. I put a fair bit of work into the presentation so I thought I’d put up an English version of the slides (including videos of the demos) in case they’re useful to someone else looking for a gentle introduction to Web Animations.
Last time I introduced timing groups in Web Animations as a simple yet powerful tool for synchronising animations. Great as they are, they open up a few interesting questions. For example, what happens when you pause an animation that’s in a timing group?
Once you start animating anything more than simple fade and slide effects, pretty soon you start wanting to synchronize things. The penguins should start dancing together, the watermelon should explode the moment the blind-folded person hits it, the credits should roll after the movie finishes and so on.
Today we finally shipped the First Public Working Draft of Web Animations!
UPDATE: I originally prepared this post before others working on the Web Animations spec assured me they would find a solution. I posted it password-protected for their sake not realising it would show up on planet! Sorry! Anyway, here is the original post for those who were curious. There are already some folks working on this, but other input...
It must be time for my biannual blog post and this time I’d like to introduce a new development in animation for the Web, called, creatively enough, Web Animations.
About a week ago Mozilla Japan put on a two-day event in Tokyo called Mozilla Vision 2012. It was a great weekend with several hundred people coming to talk about what it means to be Open, and, in very Japanese-style, see some cool robots (courtesy of Takahashi Tomotaka-san).
Firefox 4 is going four dimensional! Time dimensional! (Ok, for those who know physics, just pretend 🙂) There’s CSS transitions for all sorts of animated eye-candy, major JS speed-ups to give scripted animations a boost and mozRequestAnimationFrame to get keep them smooth and in sync, and a whole host of other graphics and video improvements....
Our SMIL implementation passed another little milestone yesterday when we landed syncbase timing. We’ve still got a long way to go but this was always going to be the hardest feature for the timing model.
One last post as I race out the door. It appears my attempt to quash the enthusiasm surrounding SMIL doesn’t seem to have worked. It seems like some people are genuinely interested in SMIL and not just for Acid3!
Well, SMIL has finally landed on mozilla-central! It’s been a long road since I first started out on this project nearly 5 years ago but we’ve finally reached the first milestone! Thank you very much to many who have helped or even just offered encouraging comments but thank you particularly to Daniel Holbert, Robert O’Callahan, Chris Double, and...
Yay, back to SMIL! This is just a brief update to let you know about the state of SMIL in Mozilla! Here’s the low-context summary:
You’ve probably worked it out, but I’m no longer working on SMIL at the moment. tor has very kindly helped out and has been doing some work on this but it will not make it for Firefox 3. From now on, if you want to track the progress of SMIL in Mozilla I recommend: \#216462 Implement SVG (SMIL) Animation tor’s weblog
Wow, what a heading! Some would call it lack of imagination, I like to think of it as artistic restraint — it’s just too easy to make puns with “SMILe”! Progress on SMIL continues, albeit in slow motion. Just a really quick note for those one or two people who want to know what’s going on:
Today is the Queen’s birthday public holiday in Australia. In Sydney the weather is freezing and the surf is huge. All this means I’ve finally got my SMIL work to compile against the trunk again. Now to get it working again!
I’ve published the report I wrote for regarding my project implementing SMIL Animation in Mozilla. At 147 pages and ~700kb it’s fairly detailed but I hope it will be of interest to some. Thanks to all who helped. Here it is: https://birtles.blog/smil/report/report.pdf
G’day! I’ve produced a new patch to provide SMIL Animation for SVG. Since last time I’ve added: keySplines keyTimes accumulate restart min, max ElementTimeControl DOM interface
Here’s an updated patch with my latest changes including: Optimised performance—a lot of unnecessary rendering has been filtered out and the profiling I was able to perform suggests this has made a significant difference, especially when the animation is frozen. Animation now pauses and resets when the page is cached in the bfcache. Better thread...
Aided by flat surf but hampered by perfect weather I’ve spent most of the last week tidying up my code and updating the documentation on the wiki. The latest patch is hopefully much better, or at least not quite as hideous as it was in some parts.
Additive animation appears to be working. The test case I mentioned in the last post works even the nasty tree re-ordering cases. I’ve also extended the additive test case a little to test a bit more of the dynamic behaviour.
I’ve done most of the work required for additive animation. The remaining part is to correctly order animations in the animation sandwich after changes to the document structure.
I’ve begun work on implementing compositing. This will take some time. Also I’m no longer sure I’ll be able to deliver syncbase timing this year as instead I may need to focus on integration issues, performance, documentation, thread-safety and so on. Hopefully all this will mean it has a better chance of getting checked in sooner though.
I’ve added a basic implementation of repeating. This doesn’t include accumulating or repeat-based timing but this test and a whole lot of other tests seem to work. Also, I’ve added a couple more tests.
I’ve implemented handling for multiple begin and end values including calculating the active duration, selecting the correct interval etc.
I thought I’d post this patch which contains my work so far. This patch contains most of the classes I outlined in my design. It will do very simple animation of lengths using a very limited subset of timing specifiers.
Just a quick update in case anyone someone actually reads this page. I’ve implemented most of what I intended to cover in the first iteration and now some very basic animations work.
I’ve put together a very basic prototype with some of the ideas discussed so far.