Feed posts tagged “Planet”Rego’s Everyday Life - A blog about my work at Igalia.2024-02-23T00:00:00Zhttps://blogs.igalia.com/Manuel Rego Casasnovasrego@igalia.comServo at FOSDEM 20242024-02-23T00:00:00Zhttps://blogs.igalia.com/mrego/servo-at-fosdem-2024/<p>Following the trend started on <a href="https://blogs.igalia.com/mrego/servo-at-linux-foundation-events-in-bilbao/">my last blog post</a> this is a blog post about <a href="https://servo.org/"><strong>Servo</strong></a> presence in a new event, this time <a href="https://fosdem.org/2024/"><strong>FOSDEM 2024</strong></a>. This was my first time at FOSDEM, which is a special and different conference with lots of people and talks; it was quite an experience!</p>
<figure>
<img src="https://blogs.igalia.com/mrego/files/2024/02/servo-talk-rakhi-sharma-fosdem-2024.jpg" alt="Picture of Rakhi during her Servo talk at FOSDEM with Tauri experiment slide in the background.">
<figcaption>Servo talk by Rakhi Sharma at FOSDEM 2024</figcaption>
</figure>
<h2 id="embedding-servo-in-rust-projects" tabindex="-1">Embedding Servo in Rust projects <a class="header-anchor" href="https://blogs.igalia.com/mrego/servo-at-fosdem-2024/">#</a></h2>
<p>My colleague <a href="https://www.igalia.com/team/atbrakhi">Rakhi Sharma</a> gave a <a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2321-embedding-servo-in-rust-projects/">great talk about Servo</a> in the <a href="https://fosdem.org/2024/schedule/track/rust/">Rust devroom</a>. The talk went deep into how Servo can be embedded by other Rust projects, showing the work on the <a href="https://github.com/servo/servo/issues/30049">Servo’s Minibrowser</a>, and the latest experiments related to the integration with <a href="https://tauri.app/">Tauri</a> through their cross-platform WebView library called <a href="https://github.com/tauri-apps/wry/tree/servo-wry-demo">wry</a>. It’s worth to highlight that the latter has been sponsored by <a href="https://nlnet.nl/project/Tauri-Servo/">NLnet Foundation</a>, big thanks for your support! Attending FOSDEM was nice as we also met Daniel Thompson-Yvetot from Tauri, which we have been working with as part of this collaboration, and discussed about improvements and plans for the future.</p>
<p><a href="https://servo.org/slides/2024-02-fosdem/">Slides</a> and <a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2321-embedding-servo-in-rust-projects/">video</a> of the talk are already available online. Don’t miss it if you’re interested in the more recent news around Servo development and how to embedded it in other projects.</p>
<video style="width: 80%; display: block; margin: auto; aspect-ratio: 560/315;" controls="controls" title="Embedding Servo in Rust projects by Rakhi Sharma at FOSDEM 2024">
<source src="https://video.fosdem.org/2024/h1308/fosdem-2024-2321-embedding-servo-in-rust-projects.av1.webm" type="video/webm; codecs="av01.0.08M.08.0.110.01.01.01.0"">
<source src="https://video.fosdem.org/2024/h1308/fosdem-2024-2321-embedding-servo-in-rust-projects.mp4" type="video/mp4">
<p><a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2321-embedding-servo-in-rust-projects/">Embedding Servo in Rust projects</a> by Rakhi Sharma at FOSDEM 2024</p>
</video>
<h2 id="servo-at-linux-foundation-europe-stand" tabindex="-1">Servo at Linux Foundation Europe stand <a class="header-anchor" href="https://blogs.igalia.com/mrego/servo-at-fosdem-2024/">#</a></h2>
<p><a href="https://linuxfoundation.eu/en/projects">Servo is a Linux Foundation Europe project</a>, and they have a stand at FOSDEM. This allowed us to show Servo to people passing by there and explain the ongoing development efforts on the project. There were also some nice Servo swag that people really liked. The stand gave us the chance to talk to different people about Servo. Most of them were very interested in the project revival and are hopeful about a promising future for the project.</p>
<figure>
<img src="https://blogs.igalia.com/mrego/files/2024/02/servo-stand-fosdem-2024.jpg" alt="Picture of Linux Foundation Europe stand at FOSDEM 2024 with different Servo swag (stickers, flyers, buttons, cups, caps, teddy bears). Also in the picture there is a screen showing a video of Servo rendering WebGPU content.">
<figcaption>Servo swag at Linux Foundation Europe stand at FOSDEM 2024</figcaption>
</figure>
<p>As part of our attendance to FOSDEM we had the chance to meet some people we have been working with recently. We met <a href="https://github.com/Taym95">Taym Haddadi</a> one active Servo contributor, it was nice to talk to people contributing to the project and meet them in real life. In addition, we were also talking briefly with <a href="https://nlnet.nl/">NLnet</a> folks, they have one of the most popular stands with stickers of all the projects they fund. Furthermore, we also have the chance to talk to <a href="https://www.outreachy.org/">Outreachy</a> folks, as we’re working into getting Servo back into Outreachy internship program this year.</p>
<h2 id="other-igalia-talks-at-fosdem-2024" tabindex="-1">Other Igalia talks at FOSDEM 2024 <a class="header-anchor" href="https://blogs.igalia.com/mrego/servo-at-fosdem-2024/">#</a></h2>
<p>Finally, I’d like to highlight that <a href="https://www.igalia.com/"><strong>Igalia</strong></a> presence at FOSDEM was much bigger than only Servo related stuff. There were a large groups of igalians participating in the event, and we have a bunch of talks there:</p>
<ul>
<li><a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2524-2023-in-chimera-linux/"><strong>2023 in Chimera Linux</strong></a> by <a href="https://www.igalia.com/team/dkolesa">Daniel Kolesa</a></li>
<li><a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2555-building-a-linux-distro-with-llvm/"><strong>Building a Linux distro with LLVM</strong></a> by <a href="https://www.igalia.com/team/dkolesa">Daniel Kolesa</a></li>
<li><a href="https://fosdem.org/2024/schedule/event/fosdem-2024-3177-delegated-compositing-utilizing-wayland-protocols-for-chromium-on-chromeos/"><strong>Delegated compositing utilizing Wayland protocols for Chromium on ChromeOS</strong></a> by <a href="https://www.igalia.com/team/msisov">Maksim Sisov</a></li>
<li><a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2321-embedding-servo-in-rust-projects/"><strong>Embedding Servo in Rust projects</strong></a> by <a href="https://www.igalia.com/team/atbrakhi">Rakhi Sharma</a></li>
<li><a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2841-graphics-stack-updates-for-raspberry-pi-devices/"><strong>Graphics stack updates for Raspberry Pi devices</strong></a> by <a href="https://www.igalia.com/team/chema">Chema Casanova</a> and <a href="https://www.igalia.com/team/jasuarez">Juan A. Suárez</a></li>
<li><a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2832-messageformat-the-future-of-i18n-on-the-web/"><strong>MessageFormat: The future of i18n on the web</strong></a> by <a href="https://www.igalia.com/team/usharma">Ujjwal Sharma</a></li>
<li><a href="https://fosdem.org/2024/schedule/event/fosdem-2024-2033-turnip-update-on-open-source-vulkan-driver-for-adreno-gpus/"><strong>turnip: Update on Open Source Vulkan Driver for Adreno GPUs</strong></a> by <a href="https://www.igalia.com/team/dpiliaiev">Danylo Piliaiev</a></li>
</ul>
Servo at Linux Foundation events in Bilbao2023-10-11T00:00:00Zhttps://blogs.igalia.com/mrego/servo-at-linux-foundation-events-in-bilbao/<p>A few weeks ago I was at <a href="https://en.wikipedia.org/wiki/Bilbao">Bilbao</a> for a couple of Linux Foundation events. My presence there was related to a new role I’ve been playing this year, as I’m currently the chair of <a href="https://github.com/servo/project/blob/master/governance/tsc/README.md">Servo Technical Steering Committee (TSC)</a>.</p>
<h2 id="about-servo" tabindex="-1">About Servo <a class="header-anchor" href="https://blogs.igalia.com/mrego/servo-at-linux-foundation-events-in-bilbao/">#</a></h2>
<p>So first things first, <strong><a href="https://servo.org">Servo</a> is a web rendering engine written in <a href="https://www.rust-lang.org/">Rust</a></strong>. Mozilla started the project more than 10 years ago, but in 2020 they stopped working on the project and <a href="https://www.linuxfoundation.org/press/press-release/open-source-web-engine-servo-to-be-hosted-at-linux-foundation">Servo joined Linux Foundation</a>. After a couple of quiet years, in January 2023 <strong><a href="https://igalia.com">Igalia</a> took over the project maintenance</strong> and we have been working on it since then. As part of Igalia’s team working on Servo, I’ve been helping here and there trying to coordinate efforts and make things happen; <a href="https://github.com/servo/project/blob/master/governance/tsc/tsc-2022-12-12.md">that’s why I was elected chair of the TSC</a>. You can find more information about the Servo project at <a href="https://servo.org">https://servo.org</a> or in the talks linked in this post.</p>
<h2 id="linux-foundation-events" tabindex="-1">Linux Foundation Events <a class="header-anchor" href="https://blogs.igalia.com/mrego/servo-at-linux-foundation-events-in-bilbao/">#</a></h2>
<p>On Monday 18th September, Igalia participated in the <strong><a href="https://events.linuxfoundation.org/lf-europe-member-summit/">Linux Foundation Europe Member Summit</a></strong> with my colleague <a href="https://www.igalia.com/team/siglesias">Samuel Iglesias</a>, as part of the <a href="https://linuxfoundation.eu/en/about/advisory-board">Advisory Board</a>, and myself, as project representative for Servo. We had there a <strong>Servo booth</strong> where people could see Servo running on the Raspberry Pi 400 and browse the examples at <a href="https://demo.servo.org">https://demo.servo.org</a>. As part of this event I gave a brief update on the status of the project, that you can <a href="https://youtu.be/J4qedc-0pjs?si=_LKCgZrrUTpM4mn7&t=2356">watch live in YouTube</a>.</p>
<figure>
<img src="https://blogs.igalia.com/mrego/files/2023/10/servo-booth.jpg" alt="Picture of the Servo booth at Linux Foundation Europe 2023. There's a banner with Servo logo and some brief explanation, then two screens and two Raspberry Pi 400 running some Servo videos. In the booth there are also stickers and brochures about Servo. Manuel Rego is behind the booth.">
<figcaption>Servo booth at Linux Foundation Europe 2023</figcaption>
</figure>
<p>Next three days (from Tuesday 19th to Thursday 21st September) we participated on the <strong><a href="https://events.linuxfoundation.org/open-source-summit-europe/">Open Source Summit Europe</a></strong>. Where Igalia had three talks:</p>
<ul>
<li><a href="https://osseu2023.sched.com/event/1OGfd/reliable-userspace-spinlock-andre-almeida-igalia">Reliable Userspace Spinlock</a> by <a href="https://www.igalia.com/team/tonyk">André Almeida</a></li>
<li><a href="https://osseu2023.sched.com/event/1Qv8y/how-steamos-is-contributing-to-the-linux-ecosystem-alberto-garcia-igalia">How SteamOS is Contributing to the Linux Ecosystem</a> by <a href="https://www.igalia.com/team/berto">Alberto García</a></li>
<li><a href="https://osseu2023.sched.com/event/1OGkc/servo-web-rendering-engine-reboot-manuel-rego-igalia">Servo Web Rendering Engine Reboot</a> by myself</li>
</ul>
<div style="text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9lkIX5ryZZ4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<p>This time my talk was longer and included a detailed update on the Servo project, what has happened during this year, and our plans for the future.</p>
<p>As <a href="https://linuxfoundation.eu/newsroom/servo-web-rendering-engine-joins-linux-foundation-europe"><strong>Servo is a Linux Foundation Europe project</strong></a>, we had also the chance showcase Servo on their booth during the three days of the event. There we let people know that the project is still alive, our plans for the future and we allow them to test Servo live.</p>
<p>It was a nice experience overall, and visiting Bilbao is always a pleasure. If you want to follow updates about Servo don’t miss the <a href="https://servo.org/blog/"><strong>project blog</strong></a> or the <a href="https://floss.social/@servo"><strong>Mastodon</strong></a> and <a href="https://twitter.com/ServoDev"><strong>Twitter</strong></a> accounts.</p>
Web Engines Hackfest 2023 is coming2023-06-02T00:00:00Zhttps://blogs.igalia.com/mrego/2023/06/02/web-engines-hackfest-2023-is-coming/<p>Next week <a href="https://www.igalia.com">Igalia</a> is hosting a new edition of the <a href="https://webengineshackfest.org/2023/">Web Engines Hackfset</a> in A Coruña.</p>
<p>As last year we’ll be back at <a href="https://www.palexco.com/">Palexco</a> an amazing venue and we have around 100 people registered to participate onsite. You can check the full schedule of the event at the <a href="https://github.com/Igalia/webengineshackfest/wiki#scheduling">wiki page</a>.</p>
<p>We hope it’s going to be a great week for everyone, and we’re looking forward to the event!</p>
<h2 id="talks" tabindex="-1">Talks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2023/06/02/web-engines-hackfest-2023-is-coming/">#</a></h2>
<p>On Monday 5th there will be five talks:</p>
<ul>
<li><strong>JavaScript Modules: Past, Present, and Future</strong> by <em>Nicolò Ribaudo</em></li>
<li><strong>Inside Kotlin/Wasm (or how your language could benefit from new proposals, like GC, EH, TFR)</strong> by <em>Zalim Bashorov</em></li>
<li><strong>Status of the WPE & GTK WebKit ports</strong> by <em>Žan Doberšek</em></li>
<li><strong>Servo 2023</strong> by <em>Delan Azabani</em></li>
<li><strong>Ladybird: Building a new browser from scratch</strong> by <em>Andreas Kling</em></li>
</ul>
<p>I’m really happy about the set of talks, and particularly excited about the possibility to see the presentations about some less known web rendering engines like <a href="https://wpewebkit.org/">WPE</a>, <a href="https://servo.org/">Servo</a> and <a href="https://github.com/SerenityOS/serenity/tree/master/Userland/Libraries/LibWeb">LibWeb</a>. BTW, the talks will be live streamed in the <a href="https://www.youtube.com/@webhackfest">Web Engines Hackfest YouTube channel</a>.</p>
<h2 id="breakout-sessions" tabindex="-1">Breakout Sessions <a class="header-anchor" href="https://blogs.igalia.com/mrego/2023/06/02/web-engines-hackfest-2023-is-coming/">#</a></h2>
<p>Apart from that we’ll have breakout sessions as usual. But this year, remote participation will be allowed on these sessions; you don’t need to register or anything like that, just join the room on the GitHub issues of each breakout session at the planned time.</p>
<table>
<thead>
<tr>
<th>Breakout Session</th>
<th>Facilitator</th>
<th>Issue</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Cross-Shadow Root IDREF associations</strong></td>
<td>Alice Boxhall</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/10">#10</a></td>
</tr>
<tr>
<td><strong>Getting into web engine contributing</strong></td>
<td>CanadaHonk</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/20">#20</a></td>
</tr>
<tr>
<td><strong>Maintenace of Chromium downstream</strong></td>
<td>José Dapena Paz</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/9">#9</a></td>
</tr>
<tr>
<td><strong>Servo</strong></td>
<td>Martin Robinson</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/16">#16</a></td>
</tr>
<tr>
<td><strong>Standards and Web Performance</strong></td>
<td>Daniel Ehrenberg</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/8">#8</a></td>
</tr>
<tr>
<td><strong>Test262, Testing JavaScript Conformance</strong></td>
<td>Philip Chimento</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/19">#19</a></td>
</tr>
<tr>
<td><strong>Updates on accelerated compositing in WebKitGTK</strong></td>
<td>Carlos García Campos</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/18">#18</a></td>
</tr>
<tr>
<td><strong>Wasm GC in JavaScriptCore</strong></td>
<td>Zalim Bashorov</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/12">#12</a></td>
</tr>
<tr>
<td><strong>Wayland</strong></td>
<td>Antonio Gomes</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/13">#13</a></td>
</tr>
<tr>
<td><strong>WebKit and Linux graphics</strong></td>
<td>Žan Doberšek</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/15">#15</a></td>
</tr>
<tr>
<td><strong>WebViews and Apps</strong></td>
<td>Jonas Kruckenberg</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/11">#11</a></td>
</tr>
<tr>
<td><strong>WinterCG</strong></td>
<td>Andreu Botella</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/14">#14</a></td>
</tr>
<tr>
<td><strong>Wolvic: An open source XR browser</strong></td>
<td>Javier Fernández García-Boente</td>
<td><a href="https://github.com/Igalia/webengineshackfest/issues/17">#17</a></td>
</tr>
</tbody>
</table>
<p>More sessions might be scheduled during the event so keep an eye to the hackfest wiki page and issues.</p>
<h2 id="sponsors" tabindex="-1">Sponsors <a class="header-anchor" href="https://blogs.igalia.com/mrego/2023/06/02/web-engines-hackfest-2023-is-coming/">#</a></h2>
<p>Last, but not least. Thanks to the <a href="https://webengineshackfest.org/2023/#sponsors">Web Engines Hackfest sponsors</a> <a href="https://www.arm.com/">Arm</a>, <a href="https://www.google.com/">Google</a> and <a href="https://www.igalia.com/">Igalia</a>; without your support this event won’t be possible.</p>
<p><img src="https://webengineshackfest.org/2023/img/sponsors.png" alt="Web Engines Hackfest 2023 Sponsors"></p>
10 years ago2023-01-18T00:00:00Zhttps://blogs.igalia.com/mrego/2023/01/18/10-years-ago/<p><em>Once upon a time…</em></p>
<p>10 years ago I landed <a href="https://commits.webkit.org/125507@main"><strong>my first WebKit patch</strong></a> 🎂:</p>
<blockquote>
<p><a href="https://bugs.webkit.org/show_bug.cgi?id=107275">Bug 107275</a> - [GTK] Implement <code>LayoutTestController::addUserScript</code></p>
</blockquote>
<p>That was my first patch to a web engine related project, and also my first professional C++ patch. My previous work at Igalia was around web applications development with PHP and Java. At that time, 2013, Igalia had been already involved on web rendering engines for several years, and the work around web applications was fading out inside the company, so moving to the other side of the platform looked like a good idea. 10 years have passed and lots of great things have happened.</p>
<p>Since that first patch many more have come mostly in <a href="https://chromium.googlesource.com/chromium/src.git">Chromium/Blink</a> and <a href="https://github.com/WebKit/WebKit">WebKit</a>; but also in <a href="https://github.com/web-platform-tests/wpt">WPT</a>, <a href="https://github.com/w3c/csswg-drafts">CSS</a>, <a href="https://github.com/whatwg/html">HTML</a> and other specs; and just a few, sadly, in <a href="https://hg.mozilla.org/mozilla-central/">Gecko</a> (I’d love to find the opportunity to contribute there more at some point). I’ve became committer and reviewer in both Chromium and WebKit projects. I’m also member of the CSS Working Group (though not very active lately) and <a href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/API_OWNERS">Blink API owner</a>.</p>
<p>During these years I have had the chance to attend <a href="https://blogs.igalia.com/mrego/resources/#talks">several events, spoke at a few conferences, got some interviews</a>. I’ve been also helping to organize the <a href="https://webengineshackfest.org/">Web Engines Hackfest</a> since 2014 and a <a href="https://wiki.csswg.org/planning/galicia-2020">CSSWG face-to-face meeting</a> at Igalia headquarters in A Coruña in January 2020 (I have so great memories of the last dinner).</p>
<p>These years have allowed me to meet lots of wonderful people from which I’ve learnt, and still learn every day, many things. I have the pleasure to work with amazing folks on a daily basis in the open. Every new feature or project in which I have to work, it’s again a new learning experience, and that’s something I really like about this kind of work.</p>
<p>In this period I’ve seen <a href="https://www.igalia.com/"><strong>Igalia</strong></a> grow a lot in the web platform community, to the point that these days we’re the <a href="https://thenewstack.io/igalia-the-open-source-powerhouse-youve-never-heard-of/">top world consultancy on the web platform</a>, with an important position in several projects and standards bodies. We’re getting fairly well know in this ecosystem, and we’re very proud about having achieved that.</p>
<p>Looking back, I’m so grateful for the opportunity given by Igalia. Thanks to the amazing colleagues and the community and how they have helped me to contribute work on the different projects. Also thanks to the different customers that have allowed me to work upstream and develop my career around web browsers. 🙏 These days the source code I write (together with many others) is being used daily by millions of people, that’s totally unbelievable if you stop for a minute to think about it.</p>
<p>Looking forward to the next decade of involvement in the web platform. See you all on the web! 🚀</p>
Igalia Web Platform team is hiring2022-10-03T00:00:00Zhttps://blogs.igalia.com/mrego/2022/10/03/igalia-web-platform-team-is-hiring/<p>Igalia’s Web Platform team is looking for new members. In this blog post, I’ll explore the kinds of work our team does, plus a little about what working at Igalia is like.</p>
<p>If you’re interested in the position, please apply using the following form: <strong><a href="https://www.igalia.com/jobs/web_platform_engineer">https://www.igalia.com/jobs/web_platform_engineer</a></strong></p>
<h2 id="working-at-igalia" tabindex="-1">Working at Igalia <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/10/03/igalia-web-platform-team-is-hiring/">#</a></h2>
<p><a href="https://www.igalia.com/"><strong>Igalia</strong></a> has more than two decades of experience working on free software, actively participating in open source communities, and contributing code to many upstream projects. We are now in a position that allows us to commit and own new features in many of those communities, while becoming a trusted partner that people know they can rely on.</p>
<p>That’s cool and all, but the best part is how we organize ourselves in a <strong>cooperative with a flat structure</strong>, where we all take part in the decisions that affect us, and (eventually) we all become co-owners of the company. Our model is based on <a href="https://www.igalia.com/about/values">strong values</a>, and focused on building a new way to understand the IT industry and run a company. At Igalia, everyone gets paid the same, we all share responsibility for the company’s success and the rewards for our work.</p>
<p>At Igalia, we provide a remote-friendly, collaborative, and supportive environment, driven by principles of <a href="https://www.igalia.com/about/inclusion-and-diversity">diversity and inclusion</a>. There are currently <a href="https://www.igalia.com/team/">over 120 Igalians</a> from <a href="https://www.igalia.com/contact/">all over the world</a>, and we have been a remote-friendly company for more than a decade.</p>
<a href="https://www.igalia.com/team/">
<img src="https://blogs.igalia.com/mrego/files/2022/10/igalians.jpg" alt="Picture of a group of Igalians attending Igalia Summit in June 2022" class="center-block">
</a>
<span class="caption text-muted">Picture of a group of Igalians attending Igalia Summit in June 2022</span>
<h2 id="about-the-web-platform-team" tabindex="-1">About the Web Platform team <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/10/03/igalia-web-platform-team-is-hiring/">#</a></h2>
<p>If I had to describe the work we do in the Web Platform team in one sentence, I’d say something like: <strong>implementing web platform features in the different open source browser engines</strong>. That’s quite a high level definition, so let’s go into some more specific examples of what we’ve done this year (though this is not an exhaustive list):</p>
<ul>
<li>Shipped some features: <code>:has()</code> and <code>inert</code> in Chromium, CSS Containment and <code>:focus-visible</code> in WebKit.</li>
<li>Got <strong>MathML</strong> ready to ship in Chromium (hopefully shipping by the end of the year), and improved its interoperability in other rendering engines.</li>
<li>Worked on <strong>Interop 2022</strong> in WebKit and Gecko: Cascade Layers, CSS Containment, Forms, etc.</li>
<li>Landed a variety of <strong>accessibility</strong> features and improvements: accessible name calculation, AOM (accessible actions and attribute reflection), Orca screen reader maintenance, etc.</li>
<li>Helped ship the Custom Highlight API in Chromium and implement the <code>::spelling-error</code> and <code>::grammar-error</code> pseudos.</li>
<li>Added support for Custom Protocol Handlers in Chromium.</li>
<li>Took over Firefox Reality development and released <strong>Wolvic</strong>, the open source WebXR browser.</li>
</ul>
<p><em>“Implementing”</em> the features is not the whole story though, as they usually involve a bunch of other work like proposals, specs, and tests. It’s really important to be able to navigate those situations, and seek consensus and agreement from the parties involved, so our team has a great deal of experience working on specs and participating in the relevant standards bodies.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2022/10/web-platform-team.jpg" alt="Picture of some members of the Web Platform team during Igalia Summit in June 2022. From left to right: Brenna Brown, Rob Buis, Cathie Chen, Frédéric Wang, Valerie Young, Manuel Rego, Javier Fernández, Andreu Botella, Sergio Villar, Ziran Sun" class="center-block">
<span class="caption text-muted">Picture of some members of the Web Platform team during Igalia Summit in June 2022. From left to right: Brenna Brown, Rob Buis, Cathie Chen, Frédéric Wang, Valerie Young, Manuel Rego, Javier Fernández, Andreu Botella, Sergio Villar, Ziran Sun</span></p>
<p>We meet twice a year at Igalia Summit. Not everyone can always make it to A Coruña (Galicia, Spain) in person, but we look forward to everyone visiting HQ eventually.</p>
<p>We have around 20 team members with a variety of backgrounds and locations, from Australia to Brazil to San Francisco and beyond. We collaborate with many others in the company, including some well known folks like Brian Kardell and Eric Meyer, who are always spreading the word about the great work we do.</p>
<h2 id="send-your-application" tabindex="-1">Send your application <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/10/03/igalia-web-platform-team-is-hiring/">#</a></h2>
<p>So if you’re interested in joining the Web Platform team at Igalia, please <a href="https://www.igalia.com/jobs/web_platform_engineer"><strong>fill the form</strong></a> on our website.</p>
<p>Just in case you’re wondering about the interview process, you won’t be asked to do a live coding exercise or anything like that. The interviews are intended to allow both you and Igalia to get to know each other better.</p>
<p>If the Web Platform team doesn’t sound right for you, it might be worth checking out some of our other <a href="https://www.igalia.com/jobs/">open positions</a>.</p>
<p>Feel free to <a href="https://www.igalia.com/team/mrego">contact me</a> if you have any questions about the position or Igalia as a whole.</p>
TPAC 20222022-09-28T00:00:00Zhttps://blogs.igalia.com/mrego/2022/09/28/tpac-2022/<p>A few weeks ago the W3C arranged a new edition of <a href="https://www.w3.org/2022/09/TPAC/"><strong>TPAC</strong></a>, this time it was an hybrid event. I had the chance to attend onsite in Vancouver (Canada).</p>
<p>This is the second conference for me this year after the <a href="https://blogs.igalia.com/mrego/2022/07/20/some-highlights-of-the-web-engines-hackfest-2022/">Web Engines Hackfest</a>, and the first one travelling away. It was awesome to meet so many people in real life again, some of them for the first time face to face. Also it was great spending some days with the other igalians attending (Andreu Botella, Brian Kardell and Valerie Young).</p>
<p>This is my third TPAC and I’ve experienced an evolution since <a href="https://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/">my first one back in 2016 in Lisbon</a>. At that time <a href="https://www.igalia.com/"><strong>Igalia</strong></a> started to be known in some specific groups, mostly ARIA and CSS Working Groups, but many people didn’t know us at all. However nowadays lots of people know us, Igalia is mentioned every now and then in conversations, in presentations, etc. When someone asks where you work and you reply Igalia, they only have good words about the work we do. “<em>You should hire Igalia to implement that</em>” is a sentence that we heard several times during the whole week. It’s clear how we’ve grown into the ecosystem and how we can have an important impact on the web platform evolution. These days many companies understand the benefits of contributing to the web platform bringing new priorities to the table. And Igalia is ready to help pushing some features forward on the different standard bodies and browser engines.</p>
<p>Igalia <a href="https://www.w3.org/2022/09/TPAC/#sponsors">sponsored TPAC in bronze level</a> and also the <a href="https://www.w3.org/2022/09/TPAC/registration.html#inclusion-fund">inclusion fund</a>.</p>
<p>The rest of this blog post is about some brief highlights related to my participation on the event.</p>
<h2 id="web-developers-meetup" tabindex="-1">Web Developers Meetup <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/09/28/tpac-2022/">#</a></h2>
<p>On Tuesday evening there was the developer meetup with 4 talks and some demos. The talks were very nice, recordings will be published soon but meanwhile you can check <a href="https://www.w3.org/2022/09/meetup/speakers.html">slides at the meetup website</a>. It’s worth to highlight that Igalia is somehow involved in topics related to the four presentations, some of them are probably better known than others. But some examples so you can connect the dots:</p>
<ul>
<li>Brian Kardell is part of <a href="https://open-ui.org/">Open UI</a> effort.</li>
<li>Igalia plays an important role in <a href="https://web.dev/interop-2022/">Interop 2022 project</a> by fixing things on different browser engines.</li>
<li>We did an <a href="https://bkardell.com/blog/AllThemSwitches.html">initial experiment around Container Queries</a> back in the day and we’re now working on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment">CSS Containment</a> support in Gecko as foundation for them.</li>
<li>Even on the privacy & advertisings field Igalia is working on the implementation of <a href="https://developer.chrome.com/en/docs/privacy-sandbox/fenced-frame/">Fenced Frames</a> in Chromium.</li>
</ul>
<p><img src="https://blogs.igalia.com/mrego/files/2022/09/wolvic-logo.jpg" alt="Wolvic logo" class="center-block">
<span class="caption text-muted">Wolvic logo</span></p>
<p>On top of the talks, Igalia was showing a <a href="https://www.youtube.com/watch?v=A56dmlQx2Zs">demo</a> of <a href="https://wolvic.com/"><strong>Wolvic</strong></a>, the open source browser for WebXR devices. A bunch of people asked questions and got interested on it, and everyone liked the stickers with the Wolvic logo.</p>
<p>Igalia also <a href="https://www.w3.org/2022/09/meetup/sponsors.html">sponsored this meetup</a>.</p>
<h2 id="css" tabindex="-1">CSS <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/09/28/tpac-2022/">#</a></h2>
<p>Lots of amazing things have been happening to CSS recently like <a href="https://www.youtube.com/watch?v=axkefJvfS9U"><strong><code>:has()</code></strong></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries"><strong>Container Queries</strong></a>. But these folks are always thinking in the next steps and during the CSSWG meeting there were discussions about some new proposals:</p>
<ul>
<li><a href="https://jhey-presents.netlify.app/tpac-2022/">CSS Anchoring</a>: This is about positioning things like pop-ups relative to other elements. The goal is to simplify current situation so it can be done with some CSS lines instead of having to deal manually with some JavaScript code.</li>
<li><a href="https://css.oddbird.net/toggles/explainer/">CSS Toggles</a>: This is a proposal to properly add the <em>toggle</em> concept in CSS, similar to what people have been doing with the <a href="https://css-tricks.com/the-checkbox-hack/">“Checkbox Hack”</a>.</li>
</ul>
<a href="https://twitter.com/cssrossen/status/1570543408900608001">
<img src="https://blogs.igalia.com/mrego/files/2022/09/csswg.jpg" alt="Picture of the CSSWG meeting by Rossen Atanassov" class="center-block">
</a>
<span class="caption text-muted">Picture of the CSSWG meeting by Rossen Atanassov</span>
<p>On the breaks there were lots of informal discussions about the <a href="https://css-tricks.com/almanac/properties/l/line-clamp/"><code>line-clamp</code> property</a> and how to unprefix it. There different proposals about how to address this issue, let’s hope there’s some sort of agreement and this can be implemented soon.</p>
<h2 id="accessibility-and-shadow-dom" tabindex="-1">Accessibility and Shadow DOM <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/09/28/tpac-2022/">#</a></h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> is cool but also quite complex, and right now the accessibility story with Shadow DOM is mostly broken. The <a href="https://wicg.github.io/aom/explainer.html"><strong>Accessibility Object Model (AOM)</strong> proposals</a> aim to solve some of these issues.</p>
<p>At TPAC a bunch of folks interested on AOM arranged an informal meeting followed by a number of conversations around some of these topics. On one side, there’s the <a href="https://wicg.github.io/aom/aria-reflection-explainer.html">ARIA reflection proposal</a> that is being worked on in different browsers, which will allow setting ARIA attributes via JavaScript. In addition, there were lots of discussions around <a href="https://github.com/leobalter/cross-root-aria-delegation/">Cross-root ARIA Delegation</a> proposal, and its counterpart <a href="https://github.com/Westbrook/cross-root-aria-reflection/">Cross-root ARIA Reflection</a>, thinking about the best way to solve these kind of issues. We now have some kind of agreement on an initial proposal design that would need to be discussed with the different groups involved. Let’s hope we’re on the right path to find a proper solution to help making Shadow DOM more accessible.</p>
<h2 id="maps-on-the-web" tabindex="-1">Maps on the Web <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/09/28/tpac-2022/">#</a></h2>
<p>This is one of those problems that don’t have a proper solution on the web platform. Igalia has been in conversations around this for a while, for example you can check this <a href="https://www.youtube.com/watch?v=HgcLYIj05DI">talk by Brian Kardell at a W3C workshop</a>. This year Bocoup together with the Natural Resources Canada did a <a href="https://bocoup.com/blog/no-neutral-map">research</a> on the topic, defining a long term roadmap to add support for maps on the Web.</p>
<p>There were a few sessions at TPAC about maps where Igalia participated. Things are still in a kind of early stage, but some of the features described on the roadmap are very interesting and have a broader scope than only maps (for example pan and zoom would be very useful for other more generic use cases too). Let’s see how all this evolves in the future.</p>
<h2 id="wrap-up" tabindex="-1">Wrap-up <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/09/28/tpac-2022/">#</a></h2>
<p>And that’s all from my side after a really great week in the nice city of Vancouver. As usual in this kind of event, the most valuable part was meeting people and having lots of informal conversations all over the place. The hybrid setup was really nice, but still those face-to-face conversations are something different to what you can do attending remotely.</p>
<p>See you all in the next editions!</p>
Some highlights of the Web Engines Hackfest 20222022-07-20T00:00:00Zhttps://blogs.igalia.com/mrego/2022/07/20/some-highlights-of-the-web-engines-hackfest-2022/<p>Last month <a href="https://www.igalia.com">Igalia</a> arranged a new edition of the <a href="https://webengineshackfest.org/2022/"><strong>Web Engines Hackfest</strong></a> in A Coruña (Galicia, Spain), where brought together more than 70 people working on the web platform during 2 days, with lots of discussions and conversations around different features.</p>
<p>This was my first onsite event since “before times”, it was amazing seeing people for real after such a long time, meeting again some old colleagues and also a bunch of people for the first time. Being an organizer of the event meant that they were very busy days for me, but it looks like people were happy with the result and enjoyed the event quite a lot.</p>
<p>This is a brief post about my personal highlights during the event.</p>
<h2 id="talks" tabindex="-1">Talks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/07/20/some-highlights-of-the-web-engines-hackfest-2022/">#</a></h2>
<p>During the hackfest we had an afternoon with 5 talks, the talks were <a href="https://www.youtube.com/watch?v=Bl4lkam3Snw">live streamed on YouTube</a> and people could follow them remotely and also ask questions through the event matrix channel.</p>
<a href="https://www.flickr.com/photos/webhackfest/52194355717/">
<img src="https://blogs.igalia.com/mrego/files/2022/07/leo-talk.jpg" alt="Leo Balter's Talk" class="center-block">
</a>
<p><span class="caption text-muted">Leo Balter’s Talk</span></p>
<ul>
<li><a href="https://youtu.be/cKw7bmX8OUY?list=PL4sEzdAGvRgDug7316CkvPRbCtdRCAfHN"><strong>Leo Balter</strong> talked about how Salesforce participates on the web platform as partner</a>, working with browsers and web standards.<br>
I really liked this talk, because it explains how companies that use the web platform, can collaborate and have a direct impact on the evolution of the web. And there are many ways to do that: reporting bugs that affect your company, explaining use cases that are important for you and the things you miss from the platform, providing feedback about different features, looking for partners to fix outstanding issues or add support for new stuff, etc.<br>
Igalia has been showing during the last decade that there’s a way to have an impact on the web platform outside of the big companies and browser vendors. Thanks to our position on the different communities, we can help companies to push features they’re interested in and that would benefit the entire web platform in the future.</li>
<li><a href="https://youtu.be/uaihftkZc68?list=PL4sEzdAGvRgDug7316CkvPRbCtdRCAfHN"><strong>Dominik Röttsches</strong> gave a talk about COLRv1 fonts</a> giving details on Chromium implementation and the different open-source software components involved.<br>
This new font format allows to do really amazing things and Dominik showed how to create a Galician emoji font with popular things like <a href="https://en.wikipedia.org/wiki/Tower_of_Hercules">Tower of Hercules</a> or <a href="https://en.wikipedia.org/wiki/Polbo_%C3%A1_feira">Polbo á feira</a>.
With some early demos on variable COLRv1 and the beginnings of the first Galician emoji font…</li>
<li><a href="https://youtu.be/PF7axXvT7ko?list=PL4sEzdAGvRgDug7316CkvPRbCtdRCAfHN"><strong>Daniel Minor</strong> explained the work done in Gecko and SpiderMonkey to refactor the internationalization system</a>.<br>
Very interesting talk with lots of information and details about internationalization, going deep on text segmentation and how it works on different languages, and also introducing the <a href="https://github.com/unicode-org/icu4x">ICU4X project</a>.</li>
<li><a href="https://youtu.be/vJ4s9mdqQbw?list=PL4sEzdAGvRgDug7316CkvPRbCtdRCAfHN"><strong>Ada Rose Cannon</strong> did a great introduction to WebXR and Augmented Reality</a>.<br>
Despite not being onsite, this was an awesome talk and the video was actually a very immersive experience. Ada explained many concepts and features around WebXR and Augmented Reality with a bunch of cool examples and demos.</li>
<li><a href="https://youtu.be/ZPLElmxWbu4?list=PL4sEzdAGvRgDug7316CkvPRbCtdRCAfHN"><strong>Thomas Steiner</strong> talked about Project Fugu APIs</a> that have been implemented in Chromium.<br>
Using the Web Engines Hackfest logo as example, he explained different new capabilities that Project Fugu is adding to the web through a real application called <a href="https://svgco.de/">SVGcode</a>.</li>
</ul>
<p>It was a great set of talks, and you can now <a href="https://www.youtube.com/playlist?list=PL4sEzdAGvRgDug7316CkvPRbCtdRCAfHN">watch them all on YouTube</a>. We hope you enjoy them if you haven’t the chance to watch them yet.</p>
<h2 id="css-and-interop-2022" tabindex="-1">CSS & Interop 2022 <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/07/20/some-highlights-of-the-web-engines-hackfest-2022/">#</a></h2>
<p>On the CSS breakout session we talked about all the new big features that are arriving to browsers these days. Container Queries and <code>:has</code> being probably the most notable examples, features that people have been requesting since the early days and that are shipping into browsers this year.</p>
<p>Apart from that, we talked about the <a href="https://web.dev/interop-2022/">Interop 2022</a> effort. How the target areas to improve interoperability are defined, and how much it implies the work in some of them.</p>
<h2 id="mathml-and-fonts" tabindex="-1">MathML & Fonts <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/07/20/some-highlights-of-the-web-engines-hackfest-2022/">#</a></h2>
<p><a href="https://www.igalia.com/team/fwang">Frédéric Wang</a> did a nice presentation about MathML and all the work that has been done in the recent years. The feature is close to shipping in Chromium (modulo finding some solution regarding printing or waiting for LayoutNG to be ready to print), that will be a huge step forward for MathML becoming it a feature supported in the major browser engines.</p>
<p>Related to the MathML work there were some discussion around fonts, particularly OpenType MATH fonts, you can read <a href="https://frederic-wang.fr/update-on-open-type-math-fonts.html">Fred’s post for more details</a>. There are some good news regarding this topic, new macOS version includes STIX Two Math installed by default, and there are ongoing conversations to get some OpenType MATH font by default in Android too.</p>
<a href="https://www.flickr.com/photos/webhackfest/52195377583/">
<img src="https://blogs.igalia.com/mrego/files/2022/07/mathml-session.jpg" alt="MathML Breakout Session" class="center-block">
</a>
<span class="caption text-muted">MathML Breakout Session</span>
<h2 id="accessibility-and-aom" tabindex="-1">Accessibility & AOM <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/07/20/some-highlights-of-the-web-engines-hackfest-2022/">#</a></h2>
<p><a href="https://www.igalia.com/team/spectranaut">Valerie Young</a>, who has recently started acting as co-chair of the ARIA Working Group, was leading a session around accessibility where we talked about ARIA and related things like AOM.</p>
<p>The <a href="https://github.com/wicg/aom">Accessibility Object Model (AOM)</a> is an effort that involves a lot of different things. In this session we talked about <a href="https://github.com/WICG/aom/blob/gh-pages/aria-reflection-explainer.md">ARIA Attribute Reflection</a> and the issues making accessible custom elements that use Shadow DOM, and that proposals like <a href="https://github.com/leobalter/cross-root-aria-delegation">Cross-root ARIA Delegation</a> are trying to solve.</p>
<a href="https://www.flickr.com/photos/webhackfest/52195848545/">
<img src="https://blogs.igalia.com/mrego/files/2022/07/a11y-session.jpg" alt="Accessibility Breakout Session" class="center-block">
</a>
<span class="caption text-muted">Accessibility Breakout Session</span>
<h2 id="acknowledgements" tabindex="-1">Acknowledgements <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/07/20/some-highlights-of-the-web-engines-hackfest-2022/">#</a></h2>
<p>To close this post I’d like to say thank you to everyone that participated in the Web Engines Hackfest, without your presence this event wouldn’t make any sense. Also I’d like to thank the speakers for the great talks and the time devoted to work on them for this event. As usual big thanks to the sponsors <a href="https://www.arm.com/">Arm</a>, <a href="https://www.google.com/">Google</a> and <a href="https://www.igalia.com">Igalia</a> to make this event possible once more. And thanks again to Igalia for letting me be part of the event organization.</p>
<a href="http://www.webengineshackfest.org/2022/#sponsors">
<img src="https://blogs.igalia.com/mrego/files/2022/07/sponsors.png" alt="Web Engines Hackfest 2022 Sponsors - Host & Organizer: Igalia. Gold Sponsors: Arm, Google and Igalia. Other Sponsors: Arm (Lunch sponsor)" class="center-block">
</a>
<span class="caption text-muted">Web Engines Hackfest 2022 Sponsors</span>
Web Engines Hackfest 20222022-04-20T00:00:00Zhttps://blogs.igalia.com/mrego/2022/04/20/web-engines-hackfest-2022/<p>Once again <a href="https://www.igalia.com">Igalia</a> is organizing the <strong>Web Engines Hackfest</strong>. This year the event is going to be <strong>hybrid</strong>. Though most things will happen on-site, online participation in some part of the event is going to be possible too.</p>
<p>Regarding dates, the hackfest will take place on <strong>June 13 & 14 in A Coruña</strong>. If you’re interested in participating, you can find more the information and the registration form at the event website: <strong><a href="https://webengineshackfest.org/2022/">https://webengineshackfest.org/2022/</a></strong>.</p>
<h2 id="what-s-the-web-engines-hackfest" tabindex="-1">What’s the Web Engines Hackfest? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/04/20/web-engines-hackfest-2022/">#</a></h2>
<p>This event started a long way back. The first edition happened in <a href="https://wiki.gnome.org/Projects/WebKitGtk/Hackfest2009">2009</a> when 12 folks visited the Igalia offices in A Coruña and spent there a whole week working on <a href="https://webkitgtk.org/">WebKitGTK port</a>. At that time, it was kind of early stages on the project and lots of work was needed, so those joint weeks were very productive to move things forward, discuss plans and implement features.</p>
<p>As the event grew and more people got interested, in <a href="https://webengineshackfest.org/2014/">2014</a> it was renamed to <strong>Web Engines Hackfest</strong> and started to welcome people working on different web engines. This brought the opportunity for engineers of the different browsers to come together for a few days and discuss different features.</p>
<p>The hackfest has continued to grow and these days we welcome anyone that is somehow involved on the web platform. In this year’s event there will be people from different parts of the web platform community, from implementors and spec editors, to people interested in some particular feature.</p>
<p>This event has an unconference format. People attending are the ones defining the topics, and work together in breakout sessions to discuss them. They could be issues on a particular browser, generic purpose features, new ideas, even sometimes tooling demos. In addition, we always arrange a few talks as part of the hackfest. But the most important part of the event is being together with very different folks and having the chance to discuss a variety of topics with them. There are not lots of places where people from different companies and browsers join together to discuss topics. The idea of the hackfest is to provide a venue for that to happen.</p>
<h2 id="2022-edition" tabindex="-1">2022 edition <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/04/20/web-engines-hackfest-2022/">#</a></h2>
<p>This year we’re hosting the event in a new place, as Igalia’s office is no longer big enough to host all the people that will be attending the event. The venue is called <strong><a href="https://www.palexco.com/">Palexco</a></strong> and it’s close to the city center and just by the seaside (with views of the port). It’s a great place with lots of spaces and big rooms, so we’ll be very comfortable there. Note that we’ll have childcare service for the ones that might need it.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2019/12/palexco.jpg" alt="New venue: Palexco (picture by Jose Luis Cernadas Iglesias)" class="center-block">
<span class="caption text-muted">New venue: Palexco
(picture by <a href="https://www.flickr.com/photos/jlcernadas/">Jose Luis Cernadas Iglesias</a>)</span></p>
<p>The event is going to be 2 days this time, <strong>13th and 14 June</strong>. Hopefully the weather will be great at that time of the year, and the folks visiting A Coruña should be able to really enjoy the trip. There are going to be lots of light hours too, sunrise is going to be around 7am and sunset past 10pm.</p>
<p>The <strong><a href="https://forms.gle/ppkLv8wZPpL4qrid7">registration form</a> is still open</strong>. So far we’ve got a good amount of people registered from different companies like: Arm, Deno Land, Fission, Google, Igalia, KaiOS, Mozilla, Protocol Labs, Red Hat and Salesforce.</p>
<p><a href="https://www.arm.com/"><strong>Arm</strong></a>, <a href="https://www.google.com/"><strong>Google</strong></a> and <a href="https://www.igalia.com"><strong>Igalia</strong></a> will be <a href="https://webengineshackfest.org/2020/#sponsors">sponsoring 2022 edition</a>, and we’re really thankful for your support! If your company is also interested in sponsoring the hackfest, please contact us at <a href="mailto:hackfest@webengineshackfest.org">hackfest@webengineshackfest.org</a>.</p>
<p>Apart from that there are going to be some talks that will be live streamed during the event. We have a <strong><a href="https://webengineshackfest.org/2022/#cfp">Call For Papers</a> with a deadline by the end of this month</strong>. Talks can be on-site or remote, so if you’re interested on giving one, please <a href="https://forms.gle/52Uw5EGBYU5d57BT8">fill the form</a>.</p>
<p>We know we’re in complex times and not everyone can attend onsite this year. We’re sorry about that, and we hope you all can make it in future editions.</p>
<p>Looking forward to the Web Engines Hackfest 2022!</p>
:focus-visible is shipping in Safari/WebKit2022-04-08T00:00:00Zhttps://blogs.igalia.com/mrego/2022/04/08/focus-visible-is-shipping-in-safari-webkit/<p>This is the final report about the work Igalia has been doing to add support for <code>:focus-visible</code> in WebKit. As you probably already know this work is part of the <strong><a href="https://opencollective.com/focus-visible-in-webkit/">Open Prioritization campaign</a> by <a href="https://www.igalia.com">Igalia</a></strong> that has been funded by different people and organizations. <strong>Big thanks to all of you!</strong>
If you’re curious and want to know all the details you can find the <a href="https://blogs.igalia.com/mrego/tag/focus-visible/">previous reports on this blog</a>.</p>
<p>The main highlight for this blog post is that <strong><code>:focus-visible</code> has been enabled by default in WebKit</strong> (<a href="https://trac.webkit.org/changeset/286783/webkit/">r286783</a>). 🚀
This change was included in <a href="https://webkit.org/blog/12176/release-notes-for-safari-technology-preview-138/">Safari Technology Preview 138</a>, with its own <a href="https://webkit.org/blog/12179/the-focus-indicated-pseudo-class-focus-visible/">post on the official WebKit blog</a>. And finally reached a stable release in <a href="https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/">Safari 15.4</a>. It’s also included in <a href="https://webkitgtk.org/">WebKitGTK 2.36</a> and <a href="https://wpewebkit.org/">WPE WebKit 2.36</a>.</p>
<h2 id="open-prioritization" tabindex="-1">Open Prioritization <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/04/08/focus-visible-is-shipping-in-safari-webkit/">#</a></h2>
<p>Let’s start from the beginning, my colleague <a href="https://bkardell.com/">Brian Kardell</a> had an idea to find more diverse ways to sponsor the development of the web platform, after some internal discussion that idea materialized into what we call <a href="https://www.igalia.com/open-prioritization/"><strong>Open Prioritization</strong></a>. In summer 2020 <a href="https://www.igalia.com/2020/07/13/Introducing-Open-Prioritization.html">Igalia announced Open Prioritization</a> that intially had six different features on the list:</p>
<ul>
<li>CSS <code>lab()</code> colors in Firefox</li>
<li><code>:focus-visible</code> in WebKit/Safari</li>
<li>HTML <code>inert</code> in WebKit/Safari</li>
<li>Selector list arguments for <code>:not()</code> in Chrome</li>
<li>CSS Containment support in WebKit/Safari</li>
<li>CSS <code>d</code> (SVG path) support in Firefox</li>
</ul>
<p>By that time I wrote a <a href="https://blogs.igalia.com/mrego/2020/07/13/open-prioritization-and-css-contain/">blog post about this effort and CSS Containment in WebKit proposal</a> and my colleagues did the same for the rest of the contenders:</p>
<ul>
<li><a href="https://bkardell.com/blog/OpenPrioritization.html">Brian Kardell on <code>inert</code> and <code>:focus-visible</code></a>.</li>
<li><a href="https://frederic-wang.fr/igalia-contribution-to-mozilla-and-open-prioritization.html">Frédéric Wang about CSS <code>lab()</code> colors and SVG <code>d</code> path</a>.</li>
<li><a href="https://blogs.igalia.com/obrufau/2020/07/13/open-prioritization-for-not-selector.html">Oriol Brufau about CSS <code>not()</code> selector</a>.</li>
</ul>
<p>After some months <a href="https://www.igalia.com/2020/11/20/Open-Prioritization-Results.html"><strong><code>:focus-visible</code> was the winner</strong></a>. By the end of 2020 we <a href="https://www.igalia.com/2020/12/14/The-Open-Prioritization-Collective.html">launched the Open Prioritization Collective</a> to collect funds and we <a href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">started our work on the implementation side</a>.</p>
<p>Last year at TPAC, <strong>Eric Meyer gave an awesome talk called <a href="https://www.youtube.com/watch?v=zhlw7_BoG9U"><em>Adventures in Collective Implementation</em></a></strong>, explaining the Open Prioritization effort and the ideas behind it. This presentation also explains why there’s room for external investments (like this one) in the web platform, and that all open source projects (in particular the web browser engines) always have to make decisions regarding priorities. Investing on them will help to influence those priorities and speed up the development of features you’re interested in.</p>
<p>It’s been quite a while since we started all this, but now <code>:focus-visible</code> is supported in WebKit/Safari, so we can consider that <strong>the first Open Prioritization experiment has been successful</strong>.
When <code>:focus-visible</code> was first enabled by default in Safari Technology Preview early this year, there were lots of misunderstandings about how the development of this feature was funded. Happily <a href="https://meyerweb.com/eric/thoughts/2022/01/24/no-apple-did-not-crowdfund-focus-visible-in-safari/">Eric wrote a great blog post on the matter</a>, explaining all the details and going over some of the ideas from his TPAC talk.</p>
<h2 id="focus-visble-is-shipping-in-in-webkit-how-that-happened" tabindex="-1"><code>:focus-visble</code> is shipping in in WebKit, how that happened? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/04/08/focus-visible-is-shipping-in-safari-webkit/">#</a></h2>
<p>In November last year, I gave a <a href="https://www.youtube.com/watch?v=70_p3WmdZv8"><strong>talk at CSS Conf Armenia</strong></a> about the status of things regarding <code>:focus-visible</code> implementation in WebKit. In that presentation I explained some of the open issues and why <code>:focus-visible</code> was not enabled by default yet in WebKit.</p>
<p>The main issue was that Apple was not convinced about not showing a focus indicator (focus ring) when clicking on a focusable element (like a <code><div tabindex="0"></code>). However this is one of the main goals of <code>:focus-visible</code> itself, avoiding to get a focus indicator in such situations. As Chromium and Firefox were already doing it, and aiming to have a better interoperability between the different implementations, Apple finally accepted this behavioral change on WebKit.</p>
<p>Then <a href="https://twitter.com/anttikoivisto">Antti Koivisto</a> reviewed the implementation, suggesting a few changes and spotting some issues (thanks about that). Those things were fixed and the feature was <strong>enabled by default in the codebase last December</strong>. As usual once a feature is enabled some more issues appear and they were fixed too. Including even a generic issue regarding <a href="https://developer.mozilla.org/docs/Web/HTML/Global_attributes/accesskey"><code>accesskey</code></a> on focusable elements, which required to add support to test <code>accesskey</code> on WebKit Web Platform Tests (WPT).</p>
<p>As part of all this work since my <a href="https://blogs.igalia.com/mrego/2021/11/18/the-path-of-bringing-focus-visible-to-webkit/">previous blog post</a> we landed 9 more patches on WebKit, making a total of 36 patches for the whole feature, together with a few new WPT tests.</p>
<h2 id="buttons-and-focus-visible-on-safari" tabindex="-1">Buttons and <code>:focus-visible</code> on Safari <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/04/08/focus-visible-is-shipping-in-safari-webkit/">#</a></h2>
<p>This topic has been mentioned in my previous posts and also in my talk. <strong>Buttons (and other form controls) are not mouse focusable in Safari</strong> (both in macOS and iOS), this means that when you click a button on Safari, the button is not focused. This behavior has the goal to match Apple platform conventions, where the focus doesn’t move when you click a button. However Safari implementation differs from the platform one, as the focus gets actually lost when you click on such elements. There are some very old issues in WebKit bugtracker about the topic (see <a href="https://bugs.webkit.org/show_bug.cgi?id=22261">#22261</a> from 2008 or <a href="https://bugs.webkit.org/show_bug.cgi?id=112968">#112968</a> from 2013 for example).</p>
<p>There’s a kind of coincidence related to this. Before <code>:focus-visible</code> existed, buttons were never showing a focus indicator in Safari after mouse click, as they are not mouse focusable. This was different in other browsers where a focus ring was showed when clicking on buttons. So while <code>:focus-visible</code> fixed this issue for other browsers, it didn’t change the default behavior for buttons in Safari.</p>
<p>However with <code>:focus-visible</code> implementation we introduced a problem somehow related to this. Imagine a page that has an element and when you click it, the page moves the focus via script (using <a href="https://developer.mozilla.org/docs/Web/API/HTMLElement/focus"><code>HTMLElement.focus()</code></a>) to a different element. Should the new focused element show a focus indicator? Or in other words, should it match <code>:focus-visible</code>?</p>
<style>
ol > li::marker {
content: counter(list-item) ") ";
}
</style>
<p>The answer varies depending on whether the element clicked is or not mouse focusable:</p>
<ol>
<li>If you <strong>click on a focusable element</strong> and the <strong>focus gets moved via script</strong> to a different element, the <strong>newly focused element does NOT show a focus indicator</strong> and thus it <strong>does NOT match <code>:focus-visible</code></strong>.</li>
<li>If you <strong>click on a NON focusable element</strong> and the <strong>focus gets moved via script</strong> to a different element, the <strong>newly focused element shows a focus indicator</strong> and thus it <strong>matches <code>:focus-visible</code></strong>.</li>
</ol>
<p>All implementations agree on this, and Chromium and Firefox have been shipping this behavior for more than a year without known issues so far. But a problem appeared on Safari, because unlike the rest of browsers, buttons are not mouse focusable there. So when you click a button in Safari, you go to point 2) above, and <strong>end up showing a focus indicator in the newly focused element</strong>. Web authors don’t want to show a focus indicator on that situations, and that’s something that <code>:focus-visible</code> is fixing through point 1) in the rest of browsers, but not in Safari (see <a href="https://bugs.webkit.org/show_bug.cgi?id=236782">bug #236782</a> for details).</p>
<p>We <strong>landed a workaround</strong> to fix this problem in Safari, that somehow adds an exception for buttons to follow point 1) even if they are not mouse focusable. Anyway this doesn’t look like the solution for the long term, and looking into making buttons mouse focusable on Safari might be the way to go in the future. That will also help to solve other interop issues.</p>
<h2 id="and-now-what" tabindex="-1">And now what? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/04/08/focus-visible-is-shipping-in-safari-webkit/">#</a></h2>
<p>The feature is complete and shipped, but as usual there are some other things that could be done as next steps:</p>
<ul>
<li>The <a href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo"><strong><code>:focus-visible</code> specification</strong></a> is kind of vague and has no normative text related to when or not show a focus indicator. This was done on purpose to advance on this area and have flexibility to adapt to user needs. Anyway now that all 3 major web engines agree on the implementation, maybe there could be the chance to define this in some spec. We tried to write a <a href="https://github.com/whatwg/html/pull/6523">PR for HTML spec</a> when we started the work on this feature, at that time it was closed, probably it was not the right time anyway. But maybe something like that could be retaken at some point in the future.</li>
<li><strong>WebKit Web Inspector</strong> (Dev Tools) don’t allow you to <a href="https://bugs.webkit.org/show_bug.cgi?id=222645">force <code>:focus-visible</code></a> yet. We sent a patch for <a href="https://bugs.webkit.org/show_bug.cgi?id=222644">forcing <code>:focus-within</code></a> first but some UI refactoring is needed, once that’s done adding support for <code>:focus-visible</code> too should be straight forward.</li>
<li>Coming back to the topic on buttons not being mouse focusable in Safari. The web platform provides a way to make elements not keyboard focusable via <a href="https://developer.mozilla.org/docs/Web/HTML/Global_attributes/tabindex"><code>tabindex="-1"</code></a>. Why not providing a way to <strong>mark an element as not mouse focusable</strong>? Maybe there could be a <strong>proposal for a new HTML attribute</strong> that allows making elements not mouse focusable, that way websites could mimic Apple platform conventions. There are nice use cases for this, for example when you’re editing an input and then you click on some button to show some contextual information, with something like this you could avoid losing the focus from the input to carry on with your editing.</li>
</ul>
<h2 id="wrap-up" tabindex="-1">Wrap-up <a class="header-anchor" href="https://blogs.igalia.com/mrego/2022/04/08/focus-visible-is-shipping-in-safari-webkit/">#</a></h2>
<p>So yeah after more than a year since Igalia started working on <code>:focus-visible</code> in WebKit, we can now consider that this <strong>work has been complete</strong>. We can call the <strong>first Open Prioritization experiment a success</strong>, and we can celebrate together with all the people that have supported us during this achievement. 🎉</p>
<p><strong>Thank you very much</strong> to all the people that sponsored this work. And also to all the people that helped reviewing patches, reporting bugs, discussing things, etc. during all this time. Without all your support we won’t be able to have made this happen. 🙏</p>
<p>Last but not least, we’d like to highlight how <strong>this work has helped the web platform as a whole</strong>. Now the major web browser engines have shipped <code>:focus-visible</code> and are using it in the default UA stylesheet. This makes tweaking the focus indicator on websites easier than ever.</p>
A story on web engines interoperability related to wavy text decorations2021-12-29T00:00:00Zhttps://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/<p>Some weeks ago I wrote <a href="https://twitter.com/regocas/status/1451501063933136902">a twitter thread</a> explaining the process of fixing a Chromium bug related to wavy text decorations. At first it was just a patch in Chromium, but we also fixed the same issue in WebKit, which unveiled a mistake on the initial fix in Chromium (a win-win situation).</p>
<p>This blog post is somehow a story around web platform features implementation, which highlights the importance of <strong>interoperability</strong> and how investigating and fixing bugs on different web engines usually leads to gains for the whole ecosystem.</p>
<h2 id="some-background" tabindex="-1">Some background <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/">#</a></h2>
<p>Let’s start from the beginning. <a href="https://www.igalia.com"><strong>Igalia</strong></a> (as part of our collaboration with <a href="https://www.bloomberg.com/company/">Bloomberg</a>) is working on adding support for <strong><a href="https://drafts.csswg.org/css-pseudo/#highlight-selectors"><code>::spelling-error</code> & <code>::grammar-error</code> highlight pseudo-elements</a> in Chromium</strong>.</p>
<p>My colleague <a href="https://twitter.com/dazabani">Delan Azabani</a> has been leading this effort. If you want more details about this work you can read her <a href="https://www.azabani.com/2021/05/17/spelling-grammar.html">two</a> <a href="https://www.azabani.com/2021/12/16/spelling-grammar-2.html">blog posts</a>. Also don’t miss the chance to enjoy her <a href="https://www.youtube.com/watch?v=Vh2niGIqtOc"><strong>amazing talk from last BlinkOn 15</strong></a>, this talk gives lots of details about how highlight pseudos work, and includes some cool animations that help to understand this complex topic.</p>
<p>Lately I’ve been also helping with some related tasks here and there. Next I’m going to talk about one of them.</p>
<h2 id="spelling-and-grammar-error-markers" tabindex="-1">Spelling and grammar error markers <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/">#</a></h2>
<p>As you probably know <strong>spelling and grammar error markers use wavy underlines</strong> in some platforms like Linux or Windows, though not in all of them as they use dotted underlines on Mac. In Chromium they’re painted on a separated codepath, totally independent of how CSS text decorations are painted. You can easily spot the difference between a “native” spelling errors (left) and elements with <code>text-decoration: wavy red underline</code> (right) in the next picture.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2021/12/spelling.png" alt="Spelling errors on the left vs wavy red underlines on the right" class="center-block">
<span class="caption text-muted">Spelling errors Chromium Linux (left) vs wavy red underlines (right)</span></p>
<p>As part of our work around <code>::spelling|grammar-error</code> highlight pseudos, we plan to merge both codepaths and use the CSS one for painting the default spelling and grammar error markers in the future. This doesn’t mean that they’ll look the same, actually they will still have a different rendering so the user can differentiate between a spelling marker and a wavy text decoration (like it happens now). But they’ll share the same code, so any improvement we do will apply to both of them.</p>
<p>There have been some bugs on each of them in the past, related to invalidation and overflow issues, and they had to be fixed in two places instead of just one. That’s why we’re looking into sharing the code, as its main job is to produce very similar things.</p>
<p>The issue we’re describing in the next section doesn’t happen on native spelling error markers, but as we plan to follow the CSS codepath, we had to fix it as a preliminary task getting things ready to move the spelling markers to use that codepath.</p>
<h2 id="the-issue" tabindex="-1">The issue <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/">#</a></h2>
<p>One problem with wavy text decorations in Chromium was that <strong>they sometimes don’t cover the full length of the text</strong>. This is because it only paints whole cycles and thus fall short in some situations.</p>
<p>A simple example is a wavy underline (<code>text-decoration: wavy green underline</code>) on a “m” letter using big fonts (see the picture below and how it doesn’t cover the full length of the letter).</p>
<pre class="language-html" tabindex="0"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 5em<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> wavy green underline<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>m<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2021/12/m-issue.png" alt="Green wavy underline doesn't cover the full length of the letter m (Chromium)" class="center-block">
<span class="caption text-muted">Green wavy underline doesn’t cover the full length of the letter “m” (Chromium)</span></p>
<h2 id="fixing-the-problem" tabindex="-1">Fixing the problem <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/">#</a></h2>
<p>This section goes into some implementation details about how this works on Chromium and how we fixed it.</p>
<p>To draw wavy text decorations Chromium defines a vector path for a Bezier curve, that path is generated at <a href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/paint/text_decoration_info.cc;l=358;drc=253d7c7b54ba8ed1b45cd91e314fb95962d134be"><code>TextDecorationInfo::PrepareWavyStrokePath()</code></a>. The comment in that method is quite self explanatory:
<a href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/paint/text_decoration_info.cc;l=331;drc=253d7c7b54ba8ed1b45cd91e314fb95962d134be">
<img src="https://blogs.igalia.com/mrego/files/2021/12/comment.png" alt="Comment from TextDecorationInfo::PrepareWavyStrokePath() explaining how the path for the Bezier curve is defined" class="center-block">
</a>
<span class="caption text-muted">Comment from <code>TextDecorationInfo::PrepareWavyStrokePath()</code> explaining how the Bezier curve is defined</span></p>
<p>This method generates the path for wavy text decorations using the next loop:</p>
<pre class="language-cpp" tabindex="0"><code class="language-cpp"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">float</span> x <span class="token operator">=</span> x1<span class="token punctuation">;</span> x <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">*</span> step <span class="token operator"><=</span> x2<span class="token punctuation">;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> control_point1<span class="token punctuation">.</span><span class="token function">set_x</span><span class="token punctuation">(</span>x <span class="token operator">+</span> step<span class="token punctuation">)</span><span class="token punctuation">;</span><br> control_point2<span class="token punctuation">.</span><span class="token function">set_x</span><span class="token punctuation">(</span>x <span class="token operator">+</span> step<span class="token punctuation">)</span><span class="token punctuation">;</span><br> x <span class="token operator">+=</span> <span class="token number">2</span> <span class="token operator">*</span> step<span class="token punctuation">;</span><br> path<span class="token punctuation">.</span><span class="token function">AddBezierCurveTo</span><span class="token punctuation">(</span>control_point1<span class="token punctuation">,</span> control_point2<span class="token punctuation">,</span><br> gfx<span class="token double-colon punctuation">::</span><span class="token function">PointF</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y_axis<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token punctuation">}</span></code></pre>
<p>As you can see, it only uses <strong>whole cycles of the wave</strong> (<code>2 * step</code>), and it never splits that in smaller chunks. If we’re going to end up further away than the text size, we don’t add that wave to the path (<code>x + 2 * step <= x2</code>). Which leads to the wrong behavior we saw in the example of the “m” letter above, where the text decoration falls short.</p>
<p>To prevent this problem, the code was using the method <a href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/paint/text_decoration_info.cc;l=90;drc=253d7c7b54ba8ed1b45cd91e314fb95962d134be"><code>AdjustStepToDecorationLength()</code></a>, <strong>that was expected to adjust the length of a whole wave</strong>. If that method was working properly, we would always cover the full text width adjusting the size of the waves. However there were two different problems on that method:</p>
<ul>
<li>On one side, that method adjusted the <code>step</code>, but we were always generating whole waves (<code>2 * step</code>), so we might need to adjust the whole length of the wave instead.</li>
<li>On the other side, the method had some bug, as it was changing the <code>step</code> when it was not actually needed. For example if you pass a total length of <code>40px</code> and a step of <code>10px</code>, this method was adjusting the step to <code>10.75px</code>, which makes no sense.</li>
</ul>
<p>Digging a little bit on the repository’s history, we found out that <a href="https://trac.webkit.org/changeset/147170/webkit">this method has been around since 2013</a> thus it was present in both Blink and WebKit.
As it has a bunch of issues and our proposed fix was cutting the waves at any point, we decided it was not needed to try to adjust their size anymore, so we <strong>get rid of this method</strong>.</p>
<p>The solution we used to the length issue requires two main changes:</p>
<ul>
<li>First we <strong>generate two extra waves before and after</strong> the text width:<pre class="language-cpp" tabindex="0"><code class="language-cpp"><span class="token comment">// We paint the wave before and after the text line (to cover the whole length</span><br><span class="token comment">// of the line) and then we clip it at</span><br><span class="token comment">// AppliedDecorationPainter::StrokeWavyTextDecoration().</span><br><span class="token comment">// Offset the start point, so the beizer curve starts before the current line,</span><br><span class="token comment">// that way we can clip it exactly the same way in both ends.</span><br>FloatPoint <span class="token function">p1</span><span class="token punctuation">(</span>start_point <span class="token operator">+</span> <span class="token function">FloatPoint</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">2</span> <span class="token operator">*</span> step<span class="token punctuation">,</span> wave_offset<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token comment">// Increase the width including the previous offset, plus an extra wave to be</span><br><span class="token comment">// painted after the line.</span><br>FloatPoint <span class="token function">p2</span><span class="token punctuation">(</span>start_point <span class="token operator">+</span> <span class="token function">FloatPoint</span><span class="token punctuation">(</span>width_ <span class="token operator">+</span> <span class="token number">4</span> <span class="token operator">*</span> step<span class="token punctuation">,</span> wave_offset<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
</li>
<li>Then <strong>clip the path</strong> so it’s no longer than the text width. For which <code>GraphicsContextStateSaver</code> was really useful to just clip things related to the line that is currently being painted (for example in cases where you have both underline and overline text decorations).</li>
</ul>
<p><video src="https://blogs.igalia.com/mrego/files/2021/12/m.webm" alt="Video showing the solution described above" class="center-block" controls="" loop="">
</video>
<span class="caption text-muted">Video showing the solution described above</span></p>
<p>The reviewers liked the idea and the <a href="https://chromiumdash.appspot.com/commit/ce1344c2f2427032846a4512d353764fff11f510"><strong>patch landed in Chromium 97.0.4692</strong></a> with some internal tests (not using WPT tests as how wavy lines are painted is not defined per spec and varies between implementations).</p>
<p>To finish this section, below there is a screenshot of the “m” with wavy green underline after this patch.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2021/12/m-fix1.png" alt="Green wavy underline covering the full length of the letter m (Chromium)" class="center-block">
<span class="caption text-muted">Green wavy underline covering the full length of the letter “m” (Chromium)</span></p>
<h2 id="webkit-and-wpt-test" tabindex="-1">WebKit & WPT test <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/">#</a></h2>
<p>While looking into the history of <code>AdjustStepToDecorationLength()</code> method we ended up looking into some old WebKit patches, we realized that the code for the wavy text decoration in WebKit is still very similar to Chromium, and that this very same issue was also present in WebKit. For that reason we decided to <strong>fix this problem also in WebKit too</strong>, with the same approach than the patch in Chromium.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2021/12/m-issue-webkit.png" alt="Green wavy underline doesn't cover the full length of the letter m (WebKit)" class="center-block">
<span class="caption text-muted">Green wavy underline doesn’t cover the full length of the letter “m” (WebKit)</span></p>
<p>The cool thing is that during the <a href="https://bugs.webkit.org/show_bug.cgi?id=232663#c8">patch review Myles Maxfield suggested to create a mismatch reference test</a>.</p>
<blockquote>
<p>Just an aside quick explanation, <a href="https://web-platform-tests.org/writing-tests/reftests.html"><strong>reference tests (reftests)</strong></a> usually compare a screenshot of the test with a screenshot of the reference file, to see if the rendered output matches exactly or not between both files. But sometimes browsers do a different thing that is called <strong>mismatch reftests</strong>, which compares a test with a reference and checks that they’re actually different.</p>
</blockquote>
<p>The idea here was to do a test that has a wavy text decoration but we hide most of the content with some element on top of that, and just show the bottom right corner of the decoration. We mismatch against a blank page, because there should be something painted there, if the wavy text decoration cover the whole line.</p>
<p>So we wrote <a href="https://github.com/web-platform-tests/wpt/pull/31540"><strong>WPT tests</strong></a>, that we can share between implementations, to check that this was working as expected. And while working on that test we discovered an issue on the initial Chromium fix, as the wavy underline was kind of misplaced to the left. More about that later.</p>
<p>On top of that there was another issue, <strong>WPT mismatch tests were not supported by WebKit tests importer</strong>, so <a href="https://commits.webkit.org/243971@main">we also added support for that</a> in order to be able to use these new tests on the <a href="https://commits.webkit.org/244075@main"><strong>final WebKit patch fixing the wavy text decorations length</strong></a> which is included in Safari Technology Preview 136.</p>
<p>Again let’s finish the section with a screenshot of the “m” with wavy green underline after the WebKit patch.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2021/12/m-fix-webkit.png" alt="Green wavy underline covering the full length of the letter m (WebKit)" class="center-block">
<span class="caption text-muted">Green wavy underline covering the full length of the letter “m” (WebKit)</span></p>
<h2 id="round-trip" tabindex="-1">Round trip <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/">#</a></h2>
<p>As mentioned in the previous section, thanks to porting the patch to WebKit and working on a WPT test we found out a <strong>mistake on the first Chromium fix</strong>.</p>
<p>So we’re back in Chromium where we were <strong>clipping the wavy text decoration with the wrong offset</strong>, so it looks like it was a little bit shifted to the left (specially when using big fonts). I’m repeating here the image for the initial Chromium fix, adding a grey background so it’s easier to notice the problem and compare with the final fix. There you can see that the wavy underline starts more on the left than expected, and ends earlier than the “m” letter.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2021/12/m-fix1-background.png" alt="Green wavy underline covering the full length of the letter m (Chromium). Initial fix." class="center-block">
<span class="caption text-muted">Green wavy underline covering the full length of the letter “m” (Chromium). Initial fix</span></p>
<p>The patch to fix that was pretty simple, so we <a href="https://chromiumdash.appspot.com/commit/a7f07a3a50983667aa20972d54ce6cc82d1d195b"><strong>landed it in Chromium 98.0.4697</strong></a>. And this is the final output with the text decoration positioned in the proper place.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2021/12/m-fix2-background.png" alt="Green wavy underline covering the full length of the letter m (Chromium). Final fix." class="center-block">
<span class="caption text-muted">Green wavy underline covering the full length of the letter “m” (Chromium). Final fix</span></p>
<h2 id="other-issues" tabindex="-1">Other issues <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/">#</a></h2>
<p>In addition to an improved rendering on static wavy text decorations, these fixes have some <strong>nice effects when animations are involved</strong>. See the following video showing an example with animations (stealing a <code>letter-spacing</code> example from <a href="https://www.azabani.com/2021/12/16/spelling-grammar-2.html#precise-wavy-decorations">Delan’s latest blog post</a>), on the left you can see Chromium (buggy version on top, fixed one on bottom) and on the right WebKit (again buggy on top and fixed on bottom).</p>
<p><video src="https://blogs.igalia.com/mrego/files/2021/12/wavy-fix.webm" alt="Video showing the fix using a letter-spacing animation. The video shows old and new behavior in Chromium and WebKit." class="center-block" style="width: 100%;" controls="" loop="">
</video>
<span class="caption text-muted">Video showing the fix (top left: Chromium buggy, bottom left: Chromium fixed, top right: WebKit buggy, bottom right: WebKit fixed)</span></p>
<p>But as usual there’s still something else, in this case very related to this topic. There’s the concept of <a href="https://drafts.csswg.org/css-text-decor-4/#decorating-box"><strong>decorating box</strong></a> in CSS Text Decoration spec, and that hasn’t been implemented in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=668042">Chromium</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=167331">WebKit</a> yet (though Firefox seems to be doing that right in most cases, except for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1747690">dotted text decorations</a>).</p>
<p>This issue is quite noticeable when you have different elements in the same line (like a <code><strong></code> element), or different font sizes in the same line. See the next video that shows this problem in Chromium (on the left) and Firefox (on the right, where only dotted text decorations have problems).</p>
<p><video src="https://blogs.igalia.com/mrego/files/2021/12/decorating-box.webm" alt="Video showing the an animation of dotted, dashed and wavy text decorations for a text with <strong> element. The video shows the behavior in Chromium (buggy) and Firefox (working fine except for dotted)." class="center-block" style="width: 100%;" controls="" loop="">
</video>
<span class="caption text-muted">Video showing the problem related to decorating box (left: Chromium, right: Firefox)</span></p>
<p>This has been a problem in Chromium and WebKit forever, even native spelling and grammar error markers have the same issue (thought it’s less noticeable as they’re painted always in a small size). Though even when this isn’t a strictly a blocker for all this work, this is something we’re looking forward to get fixed too.</p>
<h2 id="conclusion" tabindex="-1">Conclusion <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/12/29/a-story-on-web-engines-interoperability-related-to-wavy-text-decorations/">#</a></h2>
<p>The main takeaway from this blog post is how <strong>browser interoperability plays a key important role in the implementation of web platform features</strong>. Which is something we’re very concerned of at Igalia.</p>
<p>The fact that we fixed this issue in Chromium and WebKit at the same time helped to get more eyes looking into the same code, which is usually very beneficial.</p>
<p>We ended up not just <strong>fixing the issue in both implementations</strong> (Chromium and WebKit), but also <strong>adding new WPT tests</strong> that would be useful for any other implementation and to prevent regressions in the future. Even as a positive side effect, <strong>WebKit added support for mismatch reference tests</strong> as part of this work.</p>
<p>Finally, thanks to all the people that helped to make this happen by providing ideas, feedback and reviewing the patches; particularly Delan Azabani (Igalia), Myles Maxfield (Apple) and Stephen Chenney (Google).</p>
The path of bringing :focus-visible to WebKit2021-11-18T00:00:00Zhttps://blogs.igalia.com/mrego/2021/11/18/the-path-of-bringing-focus-visible-to-webkit/<p>Last weekend I was speaking at <a href="https://cssconf.am/">CSS Conf Armenia 2021</a>
about the work <a href="https://www.igalia.com/">Igalia</a> has been doing
adding support for <strong><code>:focus-visible</code> in WebKit</strong>.</p>
<p>The <a href="https://people.igalia.com/mrego/talks/css-conf-aremnia-2021-focus-visible/">slides of my talk are available on this blog</a>
and the <a href="https://www.youtube.com/watch?v=70_p3WmdZv8">video is on Igalia’s YouTube channel</a>.</p>
<div style="text-align: center;">
<iframe style="max-width: 100%" width="560" height="315" src="https://www.youtube.com/embed/70_p3WmdZv8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<p>The presentation is divided in 4 parts:</p>
<ol>
<li>An introduction about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><code>:focus-visible</code> feature</a>,
paying attention to some special details.</li>
<li>An explanation of the <a href="https://www.igalia.com/open-prioritization/">Open Prioritization effort from Igalia</a>
that lead to the implementation of <code>:focus-visible</code> in WebKit.</li>
<li>A summary of the work done during this year.</li>
<li>Some discussion about the next steps looking forward
to ship <code>:focus-visbile</code> in Safari/WebKit.</li>
</ol>
<p>Last but not least, <strong>thanks</strong> again to all the people and organizations
that have sponsored the implementation of <code>:focus-visible</code> in WebKit.
We’re closer than ever to see it shipping there. We’ll keep you posted!</p>
Igalia 20th Anniversary2021-09-21T00:00:00Zhttps://blogs.igalia.com/mrego/2021/09/21/igalia-20th-anniversary/<p>This is a brief post about an important event that is happening today.</p>
<p>Back in 2001 a group of 10 engineers from the University of A Coruña in Galicia (Spain) founded <a href="https://www.igalia.com"><strong>Igalia</strong></a> to run a cooperative business around the free software world. Today it’s its <a href="https://www.igalia.com/2021/09/21/2020-in-2021.html"><strong>20th anniversary</strong></a> so it’s time to celebrate! 🎂</p>
<a href="https://www.igalia.com/assets/i/20-logo-horizontal-hires.png">
<img src="https://blogs.igalia.com/mrego/files/2021/09/igalia-20-logo.png" alt="Igalia 20th anniversary logo" class="center-block">
</a>
<span class="caption text-muted">Igalia 20th anniversary logo</span>
<p>In my particular case I joined the company in 2007, just after graduating from the University. During these years I have had the chance to be involved in many interesting projects and communities. On top of that, I’ve learnt a ton of thigs about how a company is managed. I’ve also seen Igalia grow in size and move from local projects and customers to work with the biggest fishes in the IT industry.</p>
<p>I’m very grateful to the founders and all the people that have been involved in making Igalia a successful project during all this years. I’m also very proud of all what we have achieved so far, and how we have done it without sacrificing any of our principles.</p>
<p>We’re now more than 100 people, from all over the world. Awesome colleagues, partners and friends which share <a href="https://www.igalia.com/about/">amazing values</a> that define the direction of the company. Igalia is today the reference consultancy in some of the most important open source communities out there, which is an outstanding achievement for such a small company.</p>
<p>This time the celebration has to be at home, but for sure we’ll do a big party when we all can meet again together in the future. Meanwhile we have a new brand <a href="https://www.igalia.com/assets/i/20-logo-horizontal-hires.png">20th anniversary logo</a>, together with a <a href="https://www.igalia.com/20anniversary/">small website</a> in case you want to know more about Igalia’s history.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2021/09/igalia-20-tshirt-rego.jpg" alt="Myself with the Igalia 20th anniversary t-shirt" class="center-block">
<span class="caption text-muted">Myself with the Igalia 20th anniversary t-shirt</span></p>
<p>Sometimes happens that the company you work for turns 20 years old. But it’s way less common that the company you co-own turns 20 years old. Let’s enjoy this moment. Looking forward to many more great years to come! 🎉</p>
:focus-visible in WebKit - May 20212021-06-07T00:00:00Zhttps://blogs.igalia.com/mrego/2021/06/07/focus-visible-in-webkit-may-2021/<p>And again this is a new report about the work around <strong><code>:focus-visible</code> in WebKit</strong>, you can check the previous ones at:</p>
<ul>
<li><a href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">January</a></li>
<li><a href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">February</a></li>
<li><a href="https://blogs.igalia.com/mrego/2021/04/05/focus-viisble-in-webkit-march-2021/">March</a></li>
<li><a href="https://blogs.igalia.com/mrego/2021/05/05/focus-visible-in-webkit-april-2021/">April</a></li>
</ul>
<p>As you might already know this work is part of the <strong><a href="https://opencollective.com/focus-visible-in-webkit/">Open Prioriziatation campaign</a> by <a href="https://www.igalia.com">Igalia</a></strong> that has been funded by a lot of people. <strong>Thank you all for your support!</strong></p>
<p>The high level summary is that the implementation in WebKit can be considered to be complete and all the <code>:focus-visible</code> patches have been included on the last <a href="https://webkit.org/blog/11680/release-notes-for-safari-technology-preview-125/"><strong>Safari Technology Preview 125</strong></a> as an experimental feature. Moreover, Igalia has been in conversations with Apple trying to find a way to enable the feature by default at some point.</p>
<h2 id="implementation-details" tabindex="-1">Implementation details <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/06/07/focus-visible-in-webkit-may-2021/">#</a></h2>
<p>As I’ve just mentioned, the implementation finished by the end of April, and no more patches have landed since then. It passes most of the WPT tests, there are still some minor differences here and there (like some input types matching or not <code>:focus-visible</code>) but those issues have been considered to be fine as they depend on the different browsers specific behavior.</p>
<p>You can test this feature in <a href="https://developer.apple.com/safari/technology-preview/"><strong>Safari Technology Preview (since release 125)</strong></a> by enabling the runtime flag in the menu (<em>Develop > Experimental Features > :focus-visible pseudo-class</em>). Please play with it and <a href="https://bugs.webkit.org/">report</a> any issue you might find.</p>
<h2 id="debate-time" tabindex="-1">Debate time <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/06/07/focus-visible-in-webkit-may-2021/">#</a></h2>
<p>During the last patch reviews more Apple engineers got interested on the feature, and there were a bunch of discussions about whether it would (or should) change the default behavior in WebKit, and how.</p>
<p>So let’s start from the beginning, what is <code>focus-visible</code>? A broad description of <strong><code>:focus-visible</code></strong> is that it <strong>will match based on when the browser would natively show a focus ring</strong>. The typical example for this are buttons, in general when people click a button they don’t expect to see a focus ring, for that reason most browsers haven’t been showing it for years. When an element is focused browsers use some internal heuristics to decide when to show or not a focus ring.</p>
<p>However buttons in Safari are different to other browsers, and that’s because Safari follows the Mac platform conventions. <strong>Buttons are not click focusable in Safari</strong> (though you can still focus them via keyboard with <em>Option + Tab</em>), as they don’t receive focus on click they don’t even match <code>:focus</code>, so they never show a focus ring on mouse interactions. This behavior tries to mimic what happens on the Mac platform, but there are still some differences. The Mac platform standard, for example, allows that you can be editing an input, click on a button and keep editing the input as the focus is still there. However that’s not exactly what happens in Safari either, when you click the button, even if it doesn’t get the focus, the focus is gone from the input, so you cannot just continue editing it like in the platform. On top of that, an <em>invisible navigation caret</em> moves to that button on click, and further keyboard navigations start from there. So it’s kind of similar to the platform, but with some nuances.</p>
<p>This is only part of the problem, the web is full of things that are focusable, like <code><div tabindex="0"></code> elements. These elements have always matched (and still match) <code>:focus</code> by default, and have usually showed a focus ring when focused via mouse click. Web authors generally want to <strong>hide the focus ring when clicking on <code><div tabindex="0"></code> elements</strong>, and that’s why the current <code>:focus-visible</code> implementations don’t match in this case. Chrome and Firefox are using <code>:focus-visible</code> in the User Agent (UA) style sheet, so they don’t show a focus ring when clicking on such elements. However, <a href="https://bugs.webkit.org/show_bug.cgi?id=225148">Apple has expressed some concerns here</a> that it might change the default focus indicator behavior in a way that might differ from their platform philosophy, and thus needs more review.</p>
<p>During these conversations an idea showed up as potential solution. What if we show a focus ring when users click on a generic <code><div tabindex="0"></code>, but we don’t if that <strong>element has some specific role, e.g. <code><div tabindex="0" role="button"></code></strong>. This would give web authors the possibility to get their desired behavior by just adding a role to those elements.</p>
<p>This would make <code><div tabindex="0" role="button"></code> work similar to regular buttons on Mac, but there’s still one difference, those elements will still get the focus so some use cases might get broken. <a href="https://github.com/WICG/focus-visible/issues/257">James Craig came out with a scenario</a> in which an user is scrolling the page with the spacebar, then they click on a <code><div tabindex="0" role="button"></code>, and if they enter spacebar again, that wouldn’t keep scrolling the page anymore. And the user won’t know exactly why, as they haven’t seen any focus ring after click (note that with the current <code>:focus-visible</code> implementation, they user will start to see a focus ring on that <code><div tabindex="0" role="button"></code> after entering the spacebar).</p>
<p>On that discussion <a href="https://github.com/WICG/focus-visible/issues/257#issuecomment-843594831">James has shared an idea</a> to add a <strong>new CSS property</strong> (or it could be a HTML attribute) that marks an element so it <strong>cannot receive focus via mouse click</strong>. That would make possible to make buttons work like in Safari in other browsers, or make a <code><div tabindex="0"></code> to work like a Mac button too. However this would be something new that would need to get implemented in all browsers, not just WebKit and that would need to get discussed and agreed with the web community.</p>
<p>On the same issue <a href="https://github.com/WICG/focus-visible/issues/257#issuecomment-844418370">Brian Kardell is proposing some alternatives</a>, for example having some <strong>special parameter like <code>:focus-visible(platform)</code></strong> (syntax to be defined) that could behave differently in Safari than other browsers, so Safari can use it in the UA style sheet, while <code>:focus-visible</code> alone would work the same in all browsers.</p>
<p>As you see there’s not a clear solution to all this discussion yet, but we’re following it closely and providing our feedback to try to reach some final proposal that makes everyone happy.</p>
<h2 id="some-numbers" tabindex="-1">Some numbers <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/06/07/focus-visible-in-webkit-may-2021/">#</a></h2>
<p>Let’s do a final review of the total numbers (as nothing has changed in May):</p>
<ul>
<li>26 PRs merged in WPT.</li>
<li>27 patches landed in WebKit.</li>
<li>9 patches landed in Chromium.</li>
<li>2 PRs merged in CSS spcs.</li>
<li>1 PR merged in HTML spec.</li>
</ul>
<h2 id="wrapping-up" tabindex="-1">Wrapping up <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/06/07/focus-visible-in-webkit-may-2021/">#</a></h2>
<p><code>:focus-visible</code> has been added to WebKit <strong>thanks to the support from many individual people and organizations</strong> that make it happen through the <a href="https://www.igalia.com/open-prioritization/">Open Prioritization</a> experiment by Igalia. Once more big thanks to you all! 🙏</p>
<p>In addition, the WPT test suite has been improved counting now ~40 tests for this feature. Also in January neither Firefox or Chrome were using <code>:focus-visible</code> on the UA style sheet, however they both use it there nowadays. Thus, doing the implementation on WebKit has helped to move forward this feature on different places.</p>
<p>There is still the ongoing discussion about when or how this could be enabled by default in WebKit and eventually shipped in Safari. That conversation is moving and we hope there’ll be some kind of positive resolution so this feature can be enjoyed by web authors in all the browser engines. Igalia will keep being on top of the topic and pushing things forward to make it happen.</p>
<p>Finally, thanks to everyone who has helped in the different conversations, reviews, etc. during these months.</p>
:focus-visible in WebKit - April 20212021-05-05T00:00:00Zhttps://blogs.igalia.com/mrego/2021/05/05/focus-visible-in-webkit-april-2021/<p>A new report after a new month is gone, you can see the previous ones at:</p>
<ul>
<li><a href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">January</a></li>
<li><a href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">February</a></li>
<li><a href="https://blogs.igalia.com/mrego/2021/04/05/focus-viisble-in-webkit-march-2021/">March</a></li>
</ul>
<p>Again this is a status report about the work <a href="https://www.igalia.com">Igalia</a> is doing on the <strong>implementation of <code>:focus-visible</code> in WebKit</strong>, which is part of the <a href="https://opencollective.com/focus-visible-in-webkit/">Open Prioriziatation campaign</a>. Thanks everyone supporting this!</p>
<p>There has been some nice progress in April, though some things are still under ongoing discussion.</p>
<h2 id="script-focus-and-focus-visible" tabindex="-1">Script focus and <code>:focus-visible</code> <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/05/05/focus-visible-in-webkit-april-2021/">#</a></h2>
<p>Finally we decided to reflect the reality in the script focus tests that I created, and <a href="https://github.com/web-platform-tests/wpt/pull/27806">merge them on WPT</a>. The ones where the implementations Chromium and Firefox don’t match the agreed expectations (the ones when you click a non-focusable element, and that click moves focus elsewhere), where marked as <code>.tentative</code>.</p>
<p>So we opened a <a href="https://github.com/web-platform-tests/wpt/issues/28505">separated issue</a> to explain the situation and gather more feedback about what to do here.</p>
<p>Once we had the tests I implemented the same behavior as other browsers, the current one reflected on the tests, in WebKit. The <a href="https://bugs.webkit.org/show_bug.cgi?id=224598">patch got reviewed and merged</a>, so <strong>script focus and <code>:focus-visible</code> work the same in all browsers</strong> right now.</p>
<h2 id="focus-visible-and-shadow-dom" tabindex="-1"><code>:focus-visible</code> and Shadow DOM <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/05/05/focus-visible-in-webkit-april-2021/">#</a></h2>
<p>The test that checks that <code>:focus-visible</code> doesn’t match on <code>ShadowRoot</code> was also <a href="https://github.com/web-platform-tests/wpt/pull/28131">merged in WPT</a>. That’s the current behavior on WebKit implementation too. More about this in <a href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/#-webkit-direct-focus">January’s post</a>.</p>
<h2 id="implementation-details" tabindex="-1">Implementation details <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/05/05/focus-visible-in-webkit-april-2021/">#</a></h2>
<p>There was <a href="https://bugs.webkit.org/show_bug.cgi?id=224957">a crash in WebKit</a> due to my initial implementation of script focus, that problem has been already fixed. Also an <a href="https://bugs.webkit.org/show_bug.cgi?id=225075">extra bug was found and fixed too</a>.</p>
<p>On the review of those patches, some new discussion started about different things related to <code>:focus-visible</code> feature, like <a href="https://bugs.webkit.org/show_bug.cgi?id=225148">why a keyboard input triggers <code>:focus-visible</code> matching</a>. The discussion with Apple engineers is ongoing on the bug and let’s see how it ends.</p>
<h2 id="some-numbers" tabindex="-1">Some numbers <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/05/05/focus-visible-in-webkit-april-2021/">#</a></h2>
<p>Let’s take a look to the numbers again:</p>
<ul>
<li>26 PRs merged in WPT (5 in April).</li>
<li>27 patches landed in WebKit (10 in April).</li>
<li>9 patches landed in Chromium (2 in April).</li>
<li>2 PRs merged in CSS spcs.</li>
<li>1 PR merged in HTML spec.</li>
</ul>
<h2 id="next-steps" tabindex="-1">Next steps <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/05/05/focus-visible-in-webkit-april-2021/">#</a></h2>
<p>Implementation is mostly over, now the goal is to close the discussions with the different parties and check the possibilities of shipping this in WebKit.</p>
<p>Thanks everyone that has provided input in the different discussions and jumped on the patches review. Your feedback has been really useful to keep moving this forward.</p>
<p>Stay tuned!</p>
:focus-visible in WebKit - March 20212021-04-05T00:00:00Zhttps://blogs.igalia.com/mrego/2021/04/05/focus-visible-in-webkit-march-2021/<p>Another month is gone, and we are back with another status update (see <a href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">January</a> and <a href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">February</a> ones).</p>
<p>This is about the work <a href="https://www.igalia.com">Igalia</a> is doing on the <strong>implementation of <code>:focus-visible</code> in WebKit</strong>. This is a part of the <a href="https://opencollective.com/focus-visible-in-webkit/">Open Prioriziatation campaign</a> and being sponsored by many people. Thank you!</p>
<p>The work on March has slowed down, so this status update is smaller than previous ones. Main focus has been around spec discussions trying to reach agreement.</p>
<h2 id="implementation-details" tabindex="-1">Implementation details <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/04/05/focus-visible-in-webkit-march-2021/">#</a></h2>
<p>The initial patch is available in the last <strong><a href="https://developer.apple.com/safari/technology-preview/">Safari Technology Preview (STP)</a> releases behind a runtime flag</strong>, but it has <a href="https://bugs.webkit.org/show_bug.cgi?id=223113">an annoying bug</a> that was causing the body element to match <code>:focus-visible</code> when you used the keyboard to move focus. The issue was fixed past month but it hasn’t been included on a STP release yet (hopefully it’ll made it in release 124). Apart from that some minor patches related to implementation details have landed too. But this was just a small part of the work during March.</p>
<p>In addition I realized that <code>:focus-visible</code> appears in the Chromium and Firefox DevTools, so I took a look about how to make that happen on WebKit too. At that point I realized that <code>:focus-within</code>, which has been shipping for a long time, isn’t available in <strong>WebKit Web Inspector</strong> yet, so I cooked <a href="https://bugs.webkit.org/show_bug.cgi?id=222644">a simple patch</a> to add it there. However that hasn’t landed yet, because it needs some UI rework, otherwise the list of pseudo-classes is going to be too long and not looking nice on the inspector. So the patch is waiting for some changes on the UI before it can be merged. Once that’s solved, adding <code>:focus-within</code> and <code>:focus-visible</code> to the Web Inspector is going to be pretty straight forward.</p>
<h2 id="spec-discussions" tabindex="-1">Spec discussions <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/04/05/focus-visible-in-webkit-march-2021/">#</a></h2>
<p>This was the main part of the work during March, and the goal was to reach some agreement before finishing the implementation bits.</p>
<p>The main issue was <strong>how <code>:focus-visible</code> should work when a script moves focus</strong>. The behavior from the current implementations was not interoperable, the spec was not totally clear and, as explained on the previous report, in order to clarify this I created a <a href="https://github.com/web-platform-tests/wpt/pull/27806">set of new tests</a>. These tests demonstrated some interesting incompatibilities. Based on this, we compared the results with the widely used <a href="https://wicg.github.io/focus-visible/">polyfill</a> as well. We found that there were various misalignments on tricky cases which generated significant discussions on which was correct, and why. After considerable discussion with people from Google and Mozilla, it looks like we have finally reached an agreement on the expectations.</p>
<p>Next was to see if we could clarify the text so that these cases couldn’t be interpreted in importantly incompatible ways, and following the advice from the CSS Working Group, I worked on a <a href="https://github.com/whatwg/html/pull/6523">PR for the HTML spec</a> trying to define when a browser should draw a focus indicator, and thus match <code>:focus-visible</code>. There some discussion about which elements should always match <code>:focus-visible</code> and how to define that in a normative text was raised (as some elements like <code><select></code> draw a focus ring in some browsers and not other when clicked, and some elements like <code><input type="date"></code> allow keyboard input or not depending on the platform). The discussion is still ongoing, and we’re still trying to find the proper way to define this in the HTML spec. Anyway if we manage to do that, that would be a great step forward regarding interoperability of <code>:focus-visible</code> implementations, and a big win for the final people using this feature.</p>
<p>Apart from that I’ve also <a href="https://github.com/web-platform-tests/wpt/pull/28131">created a test</a> for my proposal about how <code>:focus-visible</code> should work in combination with Shadow DOM, but I don’t think I want to open that can of worms until the other part is done.</p>
<h2 id="some-numbers" tabindex="-1">Some numbers <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/04/05/focus-visible-in-webkit-march-2021/">#</a></h2>
<p>Let’s take a look to the numbers again, though things have moved slowly this time.</p>
<ul>
<li>21 PRs merged in WPT (1 in March).</li>
<li>17 patches landed in WebKit (3 in March).</li>
<li>7 patches landed in Chromium.</li>
<li>2 PRs merged in CSS spcs (1 in March).</li>
<li>1 PR merged in HTML spec.</li>
</ul>
<h2 id="next-steps" tabindex="-1">Next steps <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/04/05/focus-visible-in-webkit-march-2021/">#</a></h2>
<p>The main goal for April would be to <strong>close the spec discussions</strong> and land the PRs in HTML spec, so we can focus again in <strong>finishing the implementation in WebKit</strong>.</p>
<p>However if reaching an agreement to make these changes on HTML spec is not possible, probably we can still land some patches on the implementation side, to add some support for script focus on the WebKit side.</p>
<p>Stay tuned for more updates!</p>
:focus-visible in WebKit - February 20212021-03-01T00:00:00Zhttps://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/<p>One month has passed since the previous <a href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/"><em>report</em></a> so it’s time for a status update.</p>
<p>As you probably already know, <a href="https://www.igalia.com">Igalia</a> is working on the <strong>implementation of <code>:focus-visible</code> in WebKit</strong>, a project that is being sponsored by many people and organizations through the <a href="https://opencollective.com/focus-visible-in-webkit/">Open Prioriziatation campaing</a>. We’ve reached <strong>84% of the goal</strong>, thanks you all! 🎉 And if you haven’t contributed yet, you’re still in time to do it if you believe this work is important for you.</p>
<p>The main highlight for February is that <strong>initial work has started to land in WebKit</strong>, though some important bits are still under review.</p>
<h2 id="spec-issues" tabindex="-1">Spec issues <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">#</a></h2>
<p>There were some open discussions on the spec side regarding different topics, let’s review here the status of them:</p>
<ul>
<li>
<p><strong><code>:focus-visible</code> on <code><select></code> element</strong>: After some discussion on the <a href="https://github.com/w3c/csswg-drafts/issues/5822">CSS Working Group (CSSWG) issue</a> it was agreed to remove the <code><select></code> element from the tests and each browser could decide whether to match <code>:focus-visible</code> when it’s clicked, as there was not a clear agreement regarding how to interpret if it allows or not keybaord input.</p>
<p>In any case <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1148007">Chromium has still a bug</a> on elements that have a popup (like a <code><select></code>). When you click them they match <code>:focus-visible</code>, but they don’t show the focus indicator (because they want to avoid showing two focus indicators, one on the <code><select></code> and another one on the <code><option></code>). As it’s not showing a focus indicator, it shouldn’t match <code>:focus-visible</code> in that situation actually.</p>
</li>
<li>
<p><strong><code>:focus-visible</code> on script focus</strong>: The spec is not totally clear about when an element should match (or not) <code>:focus-visible</code> after script focus. There has been a nice proposal from Alice Boxhall and Brian Kardell on the <a href="https://github.com/w3c/csswg-drafts/issues/5885">CSSWG issue</a>, but when we discussed this in the CSSWG it was decided that was not the proper forum for these discussions. This was because the CSSWG has defined that <code>:focus-visible</code> should match when the browser shows a focus indicator to the user, but it doesn’t care when it’s actually showed or not. That definition is very clear, and despite that each browser shows the focus indicator (or not) in different situations, the definition is still correct.</p>
<p>Currently the <a href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo">list of heuristics on the spec</a> are not normative, they’re just hints to the browsers about when to match <code>:focus-visible</code> (when to show a focus indicator). But I believe it’d be really nice to have interoperability here, so the people using this feature won’t find weird problems here and there. So the suggestion from the CSSWG was to discuss this in the HTML spec directly, proposing there a set of rules about when a browser should show a focus indicator to the user, those rules would be the current heuristics on the <code>:focus-visible</code> spec with some slight modifications to cover the corner cases that have been discussed. Hopefully we can reach an agreement between the different parties, and manage to define this properly on the HTML spec, so all the implementations can be interoperable on this regard.</p>
<p>I believe we need to dig deeper in the specific case of script focus, as I’m not totally sure how some scenarios (e.g. <code>blur()</code> before <code>focus()</code> and things like that) should work. For that reason I worked on <a href="https://github.com/web-platform-tests/wpt/pull/27806">a set of tests</a> trying to clarify the different situations when the browser should show or not a focus indicator. These need to be discussed with more people to see if we can reach an agreement and prepare some spec text for HTML.</p>
</li>
<li>
<p><strong><code>:focus-visible</code> and Shadow DOM</strong>: Another topic already explained in the previous report. My <a href="https://github.com/w3c/csswg-drafts/issues/5893">proposal to the CSSWG</a> was to avoid matching <code>:focus-visible</code> on the <code>ShadowRoot</code> when some element in the Shadow Tree has the focus, in order to avoid having two focus indicators.</p>
<p>There has been raised a concern, as this would allow to guess if an element is or not a <code>ShadowRoot</code> by focusing it via script and then checking if it matches or not <code>:focus-visible</code> (but <code>ShadowRoot</code> elements shouldn’t be observable). However that’s already possible in WebKit that currently uses <code>:-webkit-direct-focus</code> in the default User Agent style sheet, to avoid the double focus indicator in this case. In WebKit you can focus via script an element and check if it has or not an <code>outline</code> to determine if it’s a <code>ShadowRoot</code>.</p>
<p>Anyway like in the previous case, this would be part of the heuristics so according to CSSWG’s suggestion, this should be discussed on the HTML spec directly.</p>
</li>
</ul>
<h2 id="default-user-agent-style-sheet" tabindex="-1">Default User Agent style sheet <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">#</a></h2>
<p>Early this month I landed a patch to start using <a href="https://chromium-review.googlesource.com/c/chromium/src/+/2602429"><strong><code>:focus-visible</code> in Chromium User Agent style sheet</strong></a>, this is included in version 90. 🚀 This means that from that version on you won’t see an outline when you click on a <code><div tabindex="0"></code>, only when you focus it with the keyboard. Also the <em>hack</em> <code>:focus:not(:focus-visible)</code> won’t be needed anymore (actually <a href="https://github.com/w3c/csswg-drafts/issues/4278">it has been removed from the spec too</a>).</p>
<p>In addition, Firefox is also using <code>:focus-visible</code> on their User Agent style sheet <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1690225">since version 87</a>.</p>
<h2 id="more-about-tests" tabindex="-1">More about tests <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">#</a></h2>
<p>During this month there has been still some extra work on the tests. While I was implementing things on WebKit I realized about some minor issues in the tests that have been fixed along the way.</p>
<p>I also found out some limitations of WebKit with regard to <a href="https://web-platform-tests.org/writing-tests/testdriver.html"><strong><code>testdriver.js</code></strong></a> support for simulating keyboard inputs. Some of the <code>:focus-visible</code> tests use the method <code>test_driver.send_keys()</code> to send keys like <code>Control</code> or <code>Enter</code>. I added <a href="https://trac.webkit.org/changeset/272572">support</a> <a href="https://trac.webkit.org/changeset/272651">for</a> <a href="https://trac.webkit.org/changeset/272726">them</a> on WebKit. Apart from that, I fixed how modifier keys are identified in <a href="https://trac.webkit.org/changeset/272489">WebKitGTK</a> and <a href="https://trac.webkit.org/changeset/272771">WPE</a>, as they were not following other browsers exactly (e.g. <code>event.ctrlKey</code> was not set on <code>keydown</code> event, only on <code>keyup</code>).</p>
<h2 id="webkit-implementation" tabindex="-1">WebKit implementation <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">#</a></h2>
<p>And the most important part, the actual WebKit implementation has been moving forward during this month. I managed to have a patch that passed all the tests, and split it a little bit in order to merge things upstream.</p>
<p>The <a href="https://trac.webkit.org/changeset/272983">first patch</a> that just do the parsing of the new pseudo-class and adds a experimental flag <strong>has already landed</strong>.</p>
<p>Now a <a href="https://bugs.webkit.org/show_bug.cgi?id=222028"><strong>second patch is under review</strong></a>. It originally contained the whole implementation that passes all the tests, but due to some discussion on the script focus issues, that part has been removed. Anyway the review is ongoing and hopefully it’ll land soon and you could start testing it in the <a href="https://webkit.org/downloads">WebKit nightlies</a>.</p>
<h2 id="some-numbers" tabindex="-1">Some numbers <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">#</a></h2>
<p>Like in the previous post, let’s again review the numbers of what has been done during in this project:</p>
<ul>
<li>20 PRs merged in WPT (7 in February).</li>
<li>14 patches landed in WebKit (9 in February).</li>
<li>7 patches landed in Chromium (3 in February).</li>
<li>1 PR merged in Selectors spec (1 in February).</li>
<li>1 PR merged in HTML spec (1 in February).</li>
</ul>
<h2 id="next-steps" tabindex="-1">Next steps <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/03/01/focus-visible-in-webkit-february-2021/">#</a></h2>
<p>First thing is to get the main patch landed in WebKit and verify that things are working as expected on the different platforms.</p>
<p>Another issue we need to solve is to reach an agreement on how script focus should work regarding <code>:focus-visible</code>, and then get that implemented in WebKit covering all the cases.</p>
<p>After that we could request to enable the feature by default in WebKit. Once that’s done, we could discuss the possibility to change the default User Agent style sheet to use <code>:focus-visible</code> too.</p>
<p>There are some interop work pending to do. A few things are failing on Firefox and we could try to help to fix them. Also some weird issues with <code><select></code> elements in Chromium that might need some love too. And depending on the ongoing spec discussions there might be some changes needed or not in the different browsers. Anyway, we might find the time or not to do this, let’s see how things evolve in the next weeks.</p>
<p>Big thanks to everyone that has contributed to this project, you’re all wonderful for letting us work on this. 🙏 Stay tuned for more updates in the future!</p>
:focus-visible in WebKit - January 20212021-01-28T00:00:00Zhttps://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/<p>Let’s do a small introduction as this is a kind of special post.</p>
<p>As you might already know, last summer Igalia launched the <a href="https://www.igalia.com/open-prioritization/">Open Prioritization</a> experiment, and <strong><code>:focus-visible</code> in WebKit was the winner</strong> according to the pledges that the different projects got. Now it has moved into collecting funds stage, so far we’ve reached 80% of the goal and Igalia has already started to work on this. If you are interested and want to help sponsoring this work, please <strong>visit the <a href="https://opencollective.com/open-prioritization/projects/focus-visible-in-webkit">project page at Open Collective</a></strong>.</p>
<p>In our regular client projects in Igalia, we provide periodic progress reports about the status of tasks and next plans. This blog post is a kind of monthly report, but this time the project has <a href="https://opencollective.com/focus-visible-in-webkit/transactions?type=CREDIT">many customers</a>, so it looks like this is a better format to share information about the status of things. <strong>Thank you all for supporting us in this development!</strong> 🙏</p>
<h2 id="understanding-focus-visible" tabindex="-1">Understanding <code>:focus-visible</code> <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">#</a></h2>
<p><em>Disclaimer: This is not a blog post explaining how <code>:focus-visible</code> works or the implications it has, you can read <a href="https://web.dev/style-focus/">other</a> <a href="https://blog.chromium.org/2020/09/giving-users-and-developers-more.html">articles</a> if you’re looking for that.</em></p>
<p>First things first, my initial thoughts were that <code>:focus-visible</code> was a pseduo-class which would match an element <strong>when the browser natively shows a focus indicator</strong> (focus ring, outline) when an element of a page is focused. And that’s more or less what the <a href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo">spec says on the first sentence</a>:</p>
<blockquote>
<p>The <code>:focus-visible</code> pseudo-class applies while an element matches the <code>:focus</code> pseudo-class <em>and</em> the user agent determines via heuristics that the focus should be made evident on the element.</p>
</blockquote>
<p>They key part here is that native behavior doesn’t show the focus indicator on purpose in some situations when the <code>:focus</code> pseudo-class matches, mainly because usability studies indicate that showing it in all the cases is not what the user expects and wants. Before having <code>:focus-visible</code> the web authors have not way to access the same criteria to style the focus indicator only when it’s going to be shown natively, and still keep the website being accessible.</p>
<p>Apart from that the spec has a set of heuristics that despite being non-normative, it looks like all implementations are following them. Summarizing them briefly they’d be something like:</p>
<ul>
<li>If you use the mouse to focus an element it won’t match <code>:focus-visible</code>.</li>
<li>If you use the keyboard it’ll match <code>:focus-visible</code>.</li>
<li>Elements that support keyboard input (like <code><input></code> or <code>contenteditable</code>) always match <code>:focus-visible</code>.</li>
<li>When a script focuses a new element it’ll match or not <code>:focus-visible</code> depending on the previous active element.</li>
</ul>
<p>This is just a quick & dirty summary, please <a href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo">read the spec for all the details</a>. There have been years of research around these topics (how focus should work or not on the different use cases, what are the users and accessibility needs, how websites are managing focus, etc.) and these heuristics are somehow the result of all that work.</p>
<h2 id="focus-visible-in-the-default-ua-style-sheet" tabindex="-1"><code>:focus-visible</code> in the default UA style sheet <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">#</a></h2>
<p>At this point it looks like we can more or less understand what <code>:focus-visible</code> is about. So let’s start playing with it. The definition seems very clear, but testing things in the current implementations (Chromium and Firefox) you might find some unexpected situations.</p>
<p>Let’s use a very basic example:</p>
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; place-items: center;">
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token selector">:focus-visible</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Focus me.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<div>
<style>
#example1:focus-visible { background: lime; }
#warning1 { display: none; color: red; font-size: 75%; font-style: italic; }
@supports not (selector(:focus-visible)) { #warning1 { display: block; } }
</style>
<div id="warning1">WARNING: <code>:focus-visible</code> is not supported on your browser.</div>
<div tabindex="0" id="example1">Focus me.</div>
</div>
</div>
<p>If you focus the <code><div></code> with a mouse click, <code>:focus-visible</code> doesn’t match per spec, so in this case the background doesn’t become green (if you use the keyboard to focus it will match <code>:focus-visible</code> and the background would be green). This works the same in Chromium and Firefox, but Chromium (despite the element doesn’t match <code>:focus-visible</code>) shows a focus indicator. Somehow the first spec definition is already not working as expected on Chromium… The issue here is that <strong>Chromium still uses <code>:focus { outline: auto; }</code> in the default UA style sheet</strong>, and the element matches <code>:focus</code> after the mouse click, that’s why it’s showing a focus indicator while not matching <code>:focus-visible</code>.</p>
<p>Actually this was already on the spec, but Chromium is not following that yet:</p>
<blockquote>
<p>User agents should also use <code>:focus-visible</code> to specify the default focus style, so that authors using <code>:focus-visible</code> will not also need to disable the default <code>:focus</code> style.</p>
</blockquote>
<p>There was already a related <a href="https://github.com/w3c/csswg-drafts/issues/4278">CSSWG issue on the topic</a>, as the spec currently suggests the following code:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">:focus:not(:focus-visible)</span> <span class="token punctuation">{</span><br> <span class="token property">outline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>This works as a kind of workaround for this issue, but if the default UA style sheet uses <code>:focus-visible</code> that won’t be needed.</p>
<p>Anyway, I’ve reported the <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1162070">Chromium bug</a> and created <a href="https://github.com/web-platform-tests/wpt/pull/27015">WPT tests</a>, during the tests review <a href="https://twitter.com/ecbos_">Emilio Cobos</a> realized that this needed a change on the HTML spec and <a href="https://github.com/whatwg/html/pull/6256">he wrote a PR to update it</a>. After some discussion with <a href="https://twitter.com/sundress">Alice Boxhall</a> the <strong>HTML change and the tests were approved and merged</strong>. I even was brave enough to write a <a href="https://chromium-review.googlesource.com/c/chromium/src/+/2602429">patch to change this in Chromium</a> which is still under review and needs some extra work.</p>
<h2 id="the-tests" tabindex="-1">The tests <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">#</a></h2>
<p>WebKit is the third browser engine adding support for <code>:focus-visible</code> so the first natural step was to import the WPT tests related to the feature. This looked like something simple but it ended up needing some work to improve the tests.</p>
<p>There was a bunch of <code>:focus-visible</code> tests already in the WPT suite, but they need some love:</p>
<ul>
<li>Some parts of the spec were not covered by tests, so I added some new tests.</li>
<li>Some tests were passing in WebKit, even when there was not an implementation yet, so I modified them to fail if there’s no <code>:focus-visible</code> support.</li>
</ul>
<p>Then I imported the tests in WebKit and I discovered a bug related to <code>focus</code> event and <code>:focus</code> pseudo-class. <strong><code>:focus</code> pseudo-class was not matching inside the <code>focus</code> event handler</strong>. This is probably not important for web authors, but <code>:focus-visbile</code> tests were relying on that. Actually this had been <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=523126">fixed in Chromium more than 5 years ago</a>, so first I moved to <a href="https://chromium-review.googlesource.com/c/chromium/src/+/2610084">WPT the Chromium internal test</a> and used it to <a href="https://bugs.webkit.org/show_bug.cgi?id=220243">fix the problem in WebKit</a>.</p>
<p>Once the tests were imported in WebKit, the problem was that a bunch of them were timing out in Mac platforms. After investigating the issue I realized that it’s because <strong><code>focus</code> event is not dispatched when you click on a button in Mac</strong>. Digging deeper I found this <a href="https://bugs.webkit.org/show_bug.cgi?id=22261">old bug with lots of discussions on the topic</a>, it looks like this is done to keep alignment with the native platform behavior, and also in order to avoid showing a focus indicator. Even Firefox has the same behavior on Mac. However, Chromium always dispatch the event independently of the platform. This makes that some of the tests don’t work automatically on Mac, as they wait for a <code>focus</code> event that is never dispatched. Anyway maybe once <code>:focus-visible</code> is implemented, it could be rediscussed the possibility of modifying this behavior, thought it might be not possible anyway. In any case, <a href="https://webkitgtk.org/">WebKitGTK port</a>, the one I’m using for the development, does trigger the <code>focus</code> event in this case; and I’ve also <a href="https://bugs.webkit.org/show_bug.cgi?id=220578">changed</a> <a href="https://wpewebkit.org/">WPE port</a> to do the same (maybe <a href="https://bugs.webkit.org/show_bug.cgi?id=221036">Windows port will follow too</a>).</p>
<p>One more thing about the tests, lots of these <code>:focus-visible</code> tests use <a href="https://web-platform-tests.org/writing-tests/testdriver.html"><code>testdriver.js</code></a> to simulate user actions. For example for clicking an element they use <code>test_driver.click(element)</code>, however that simple instruction is causing some kind of <strong>memory leak on Chromium when running the tests</strong>. The actual <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1164600">Chromium bug</a> hasn’t been fixed yet, but I landed some workarounds that prevent the issue in these tests (waiting for the promise to be resolved before marking the test as done).</p>
<a href="https://wpt.fyi/results/css/selectors?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=focus-visible">
<img src="https://blogs.igalia.com/mrego/files/2021/01/focus-visbile-wpt-january-2021.png" alt="Status of WPT :focus-visible tests in the different browsers" class="center-block">
</a>
<span class="caption text-muted">Status of WPT <code>:focus-visible</code> tests in the different browsers</span>
<p>To close the tests part, you can <a href="https://wpt.fyi/results/css/selectors?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=focus-visible">check the status in wpt.fyi</a>, most of them are passing in all implementations which is great, but there are some interoperability issues that we’ll review next.</p>
<h2 id="interop-issues" tabindex="-1">Interop issues <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">#</a></h2>
<p>As I mentioned the <a href="https://wpt.fyi">wpt.fyi website</a> helps to easily identify the interop issues between the different implementations.</p>
<ul>
<li>
<p><strong><code>:focus-visible</code> on the default UA style sheet</strong>: This has been already commented before, but this is the reason why Chromium fails <a href="http://wpt.live/css/selectors/focus-visible-018.html"><code>focus-visible-018.html</code></a> test. Firefox fails <a href="http://wpt.live/css/selectors/focus-visible-017.html"><code>focus-visible-017.html</code></a> because the <a href="https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3">default UA style sheet mentions <code>outline: auto</code></a>, but Firefox uses a <code>dotted</code> outline.</p>
</li>
<li>
<p><strong><code>:focus-visible</code> on <code><select></code> element</strong>: There’s a Firefox failure on <a href="http://wpt.live/css/selectors/focus-visible-002.html"><code>focus-visible-002.html</code></a> because it doesn’t match <code>:focus-visible</code> when you click a <code><select></code> element. I opened a <a href="https://github.com/w3c/csswg-drafts/issues/5885">CSSWG issue</a> to discuss this, and I initially thought that the agreement was that Firefox behavior is the right one. So I did <a href="https://chromium-review.googlesource.com/c/chromium/src/+/2644906">a patch to change Chromium’s behavior and update the tests</a>, but during the review I was pointed to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1148007">Chromium bug</a> about this topic that was closed as <em>WONTFIX</em>, the reason is that when you click a <code><select></code> element you can type letters to select the option from the keyboard. Right now the discussion has been reopened and we’ll need to wait for the final resolution on the topic, to see which is the right implementation.</p>
</li>
<li>
<p><strong>Keyboard interaction once an element is focused</strong>: This is tested by <a href="http://wpt.live/css/selectors/focus-visible-007.html"><code>focus-visible-007.html</code></a>. The example here is that you click an element to focus it, initially the element doesn’t match <code>:focus-visible</code> but then you use the keyboard (for example you type a letter), in that situation Chromium will start matching <code>:focus-visible</code> while Firefox won’t. The spec is quite explicit on the topic so it looks like a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1688539">Firefox bug</a>:</p>
<blockquote>
<p>If the user interacts with the page via the keyboard, the currently focused element should match <code>:focus-visible</code> (i.e. keyboard usage may change whether this pseudo-class matches even if it doesn’t affect <code>:focus</code>).</p>
</blockquote>
</li>
<li>
<p><strong>Programmatic focus and <code>:focus-visible</code></strong>: What should happen with <code>:focus-visible</code> when the website uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus"><code>element.focus()</code></a> from a script to move the focus? The spec has some heuristics that depend on if the active element before <code>focus()</code> is called was matching (or not) <code>:focus-visible</code>. But I’ve opened a <a href="https://github.com/w3c/csswg-drafts/issues/5885">CSSWG issue</a> to discuss what should happen when there’s no active element. The discussion is still ongoing and depending on that there might be changes in the current implementations. Right now there are some subtle differences between Chromium and Firefox here.</p>
</li>
</ul>
<h2 id="webkit-direct-focus" tabindex="-1"><code>:-webkit-direct-focus</code>? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">#</a></h2>
<p>Probably you don’t know what’s that, but it’s somehow related to <code>:focus-visible</code> so I believe it’s worth to mention it here.</p>
<p>WebKit is the browser that supports better <code>:focus</code> pseudo-class behavior on <a href="https://developer.mozilla.org/en-us/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> (see the <a href="https://wpt.fyi/shadow-dom/focus/">WPT tests results</a>). The issue here is that the <strong><code>ShadowRoot</code> should match <code>:focus</code> if some of the descendants are focused</strong>, so if you have an <code><input></code> element in the Shadow Tree, and you focus it, you’ll have 2 elements matching <code>:focus</code> the <code>ShadowRoot</code> and the <code><input></code>.</p>
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; place-items: center;">
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token selector">#host</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> lightgrey<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">#host:focus</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>host<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br> shadowRoot <span class="token operator">=</span> host<span class="token punctuation">.</span><span class="token function">attachShadow</span><span class="token punctuation">(</span><br> <span class="token punctuation">{</span><span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'open'</span><span class="token punctuation">,</span> <span class="token literal-property property">delegatesFocus</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br> shadowRoot<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span><br> <span class="token string">'<input value="Focus me">'</span><span class="token punctuation">;</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<div>
<style>
#example2host { padding: 1em; background: lightgrey; }
#example2host:focus { background: lime; }
</style>
<div id="example2host"></div>
<script>
shadowRoot = example2host.attachShadow({mode: 'open', delegatesFocus: true});
shadowRoot.innerHTML = '<input value="Focus me">';
</script>
</div>
</div>
<p>In Chromium if you use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow"><code>delegatesFocus=true</code> in <code>element.attachShadow()</code></a>, and you have an example like the one described above, you’ll get two focus indicators, one in the <code>ShadowRoot</code> and one in the <code><input></code>. Firefox doesn’t match <code>:focus</code> in the <code>ShadowRoot</code> so the issue is not present there.</p>
<p>WebKit matches <code>:focus</code> independently of <code>delegatesFocus</code> value (<a href="https://github.com/whatwg/html/pull/4731">which is the right behavior per spec</a>), so it’d be even more common to have a situation of getting two focus indicators. To avoid that <a href="https://bugs.webkit.org/show_bug.cgi?id=202432">WebKit introduced <code>:-webkit-direct-focus</code> pseudo-class</a>, that is not web exposed, but it’s used in the default UA style sheet to avoid this bad effect of having a focus indicator on the <code>ShadowRoot</code>.</p>
<p>I believe <code>:focus-visible</code> spec should describe that behavior regarding how it works on <code>ShadowRoot</code> so it doesn’t match on those situations. That way WebKit could get rid of <code>:-webkit-direct-focus</code> and use <code>:focus-visible</code> once it’s implemented. I’ve <a href="https://github.com/w3c/csswg-drafts/issues/5893">reported a CSSWG issue</a> to discuss this topic.</p>
<h2 id="wip-implementation" tabindex="-1">WIP implementation <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">#</a></h2>
<p>So far I haven’t talked about the implementation at all, but the reason is that all the previous work is required in order to be able to do a proper implementation, with good quality and that is interoperable between the different browsers. <code>:focus-visbile</code> is a new feature, and despite all the interop mess regarding how focus works in the different browsers and platforms, we should aim to have a <code>:focus-visible</code> implementation as much interoperable as possible.</p>
<p>Despite all this related work, I’ve also found some time to work on a patch. It’s still not ready to be sent upstream but it’s already doing some things and passing some of the WPT tests. Of course several things are still missing, but next you can see quick screen recording with <code>:focus-visible</code> working on WebKit.</p>
<p><video src="https://blogs.igalia.com/mrego/files/2021/01/focus-visible.webm" alt=":focus-visible example running on WebKitGTK MiniBrowser" style="width: 100%;" autoplay="" controls="" loop="">
</video>
<span class="caption text-muted"><code>:focus-visible</code> example running on WebKitGTK MiniBrowser</span></p>
<h2 id="some-numbers" tabindex="-1">Some numbers <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">#</a></h2>
<p>I know this is not really relevant, but it helps to get a grasp on what has been happening during this month:</p>
<ul>
<li>3 CSSWG issues reported.</li>
<li>13 PRs merged in WPT.</li>
<li>5 patches landed in WebKit.</li>
<li>4 patches landed in Chromium.</li>
<li>And many discussions with different people, special thanks to Alice and Emilio that have been really helpful.</li>
</ul>
<h2 id="next-steps" tabindex="-1">Next steps <a class="header-anchor" href="https://blogs.igalia.com/mrego/2021/01/28/focus-visible-in-webkit-january-2021/">#</a></h2>
<p>The plan for February is to try to find an agreement on the CSSWG issues, close them, and update the WPT tests accordingly. Maybe this work could include even landing some patches on the current implementations. And of course, <em>focus</em> (pun intended) the effort on implementation of <code>:focus-visible</code> in WebKit.</p>
<p>I hope this blog post helps you to understand better the work that goes behind the scenes when a web platform feature is implemented, especially if you want to do it on a way that ensures browser interoperability and reduces web authors’ pain.</p>
<p>If you enjoyed this project update, stay tuned as there will more in the future.</p>
2020 Recap2020-12-23T00:00:00Zhttps://blogs.igalia.com/mrego/2020/12/23/2020-recap/<p>2020 is not a great year to do any kind of recap, but there have been some positive things happening in <a href="https://www.igalia.com"><strong>Igalia</strong></a> during this year. Next you can find a highlight of some of these things in no particular order.</p>
<h2 id="css-working-group-a-coruna-f2f" tabindex="-1">CSS Working Group A Coruña F2F <a class="header-anchor" href="https://blogs.igalia.com/mrego/2020/12/23/2020-recap/">#</a></h2>
<p>The year couldn’t start better, on January <a href="https://wiki.csswg.org/planning/galicia-2020">Igalia hosted a CSS Working Group face-to-face meeting in our office in A Coruña (Galicia, Spain)</a>. Igalia has experience arranging other events in our office, but this was the first time that the CSSWG came here. It was an amazing week and I believe everyone enjoined the visit to this corner of the world. 🌍</p>
<blockquote class="twitter-tweet tw-align-center"><p lang="en" dir="ltr">Fantastic <a href="https://twitter.com/csswg?ref_src=twsrc%5Etfw">@CSSWG</a> meeting hosting by <a href="https://twitter.com/igalia?ref_src=twsrc%5Etfw">@igalia</a>.<a href="https://twitter.com/svgeesus?ref_src=twsrc%5Etfw">@svgeesus</a> and I are so incredibly grateful that they are providing childcare for us, for all three days of the meeting, on the same floor. ❤️<br>Setting the bar high!</p>— Lea Verou (@LeaVerou) <a href="https://twitter.com/LeaVerou/status/1219914378067292164?ref_src=twsrc%5Etfw">January 22, 2020</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p><a href="https://twitter.com/briankardell">Brian Kardell</a> from Igalia was talking to everybody about <a href="https://alistapart.com/article/container-queries-once-more-unto-the-breach/"><strong>Container Queries</strong></a>. This is one of the features that web authors have been asking for since ever, and Brian was trying to push the topic forward and find some kind of solution (even if not 100% feature complete) for this topic. In that week there were discussions about the relationship with other topics like <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">Resize Observer</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment">CSS Containment</a>, and new ideas appeared too. <a href="https://bkardell.com/blog/TowardResponsive.html">Brian posted a blog post after the event</a>, explaining some of those ideas. Later my colleague <a href="https://twitter.com/lajava77">Javi Fernández</a> worked on an experiment that Brian mentioned on <a href="https://bkardell.com/blog/AllThemSwitches.html">a recent post</a>. The good news is that all these conversations managed to bring this topic back to life, and past November Google announced that they have started working on a <a href="https://groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI/m/wrJb-unhAgAJ">Container Queries prototype in Chromium</a>.</p>
<p>During the meeting <a href="https://twitter.com/jensimmons">Jen Simmons</a> (in Mozilla at that time, now in Apple) <a href="https://talks.jensimmons.com/QOEOYT/three-topics-for-jan-2020-csswg-meeting">presented some topics from Mozilla</a>, including a detailed proposal for <a href="https://drafts.csswg.org/css-grid-3/#masonry-layout"><strong>Masonry Layout</strong> based on Grid</a>, this has been something authors have also showed interest, and Firefox has already a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout">prototype implementation behind a runtime flag</a>.</p>
<p>Apart from the three days full of meetings and interesting discussions, some of the CSSWG members participated in a <a href="https://www.meetup.com/GPUL-Labs/events/267002801/">local meetup</a> giving 4 nice talks:</p>
<ul>
<li><a href="https://noti.st/rachelandrew/2hxCQs/who-designed-this-where-web-platform-features-come-from-and-how-to-get-involved"><em>Who Designed This? Where Web Platform features come from, and how to get involved</em></a> by <a href="https://twitter.com/rachelandrew">Rachel Andrew</a>.</li>
<li><a href="https://docs.google.com/presentation/d/1rYZD7bv-sH8dbjWCuM1yloRDQLSYnqkYZ6N_ynEfhKU/"><em>Getting Browser Bugs Fixed</em></a> by <a href="https://twitter.com/alanstearns">Alan Stearns</a>.</li>
<li><a href="https://florian.rivoal.net/talks/line-breaking/short"><em>Line Breaking. Controlling Line Breaking with CSS</em></a> by <a href="https://twitter.com/frivoal">Florian Rivoal</a>.</li>
<li><a href="https://www.w3.org/2019/09/Meetup/MelanieRichards-Finessing-forced-colors.pdf"><em>Finessing Forced-Colors: Tailoring the High Contrast Experience</em></a> by <a href="https://twitter.com/cssrossen">Rossen</a>.</li>
</ul>
<p>Finally, I remember some corridor conversations about the <a href="https://techcrunch.com/2020/01/15/mozilla-lays-off-70-as-it-waits-for-subscription-products-to-generate-revenue/">Mozilla layoffs that had just happened just a few days before the event</a>, but nobody could expect what was going to <a href="https://techcrunch.com/2020/08/11/mozilla-lays-off-250/">happen during the summer</a>. It looks like 2020 has been a bad year for Mozilla in general and Servo in particular. 😢</p>
<h2 id="open-prioritization" tabindex="-1">Open Prioritization <a class="header-anchor" href="https://blogs.igalia.com/mrego/2020/12/23/2020-recap/">#</a></h2>
<p>This summer Igalia launched the <a href="https://www.igalia.com/open-prioritization/"><strong>Open Prioritization</strong> campaign</a>, where we proposed a list of topics to be implemented on the different browser engines, and people supported them with different pledges; <a href="https://blogs.igalia.com/mrego/2020/07/13/open-prioritization-and-css-contain/">I wrote a blog post about it by that time</a>.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2020/12/focus-visible.png" alt="Open Prioritization: :focus-visible in Safari/WebKit: $30.8K pledged out of $35K." class="center-block">
<span class="caption text-muted">Open Prioritization: <code>:focus-visible</code> in Safari/WebKit</span></p>
<p>This was a cool experiment, and it looks like a successful one, <a href="https://bkardell.com/blog/FirstOPFinished.html">as <em><code>:focus-visible</code> in WebKit/Safari</em> has been the winner</a>. Igalia is currently <a href="https://opencollective.com/open-prioritization/projects/focus-visible-in-webkit">collecting funds through Open Collective</a> in order to start the implementation of <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><code>:focus-visible</code></a> in WebKit</strong>, you still have time to support it if you’re interested. If everything goes fine this should happen during the first quarter of 2021. 🚀</p>
<h2 id="igalia-chats" tabindex="-1">Igalia Chats <a class="header-anchor" href="https://blogs.igalia.com/mrego/2020/12/23/2020-recap/">#</a></h2>
<p>This actually started in later 2019, but it has been ongoing during the whole 2020. Brian Kardell has been recording <strong>a podcast series</strong> about the web platform and some of its features with different people from the industry. They have been getting more and popular, and Brian was even asked to record <a href="https://www.igalia.com/chats/blinkon-13-history">one of these for the last BlinkOn edition</a>.</p>
<p>So far 8 episodes of around 1 hour length have been published, with 13 different guests. More to come in 2021! If you are curious and want to know more, you can find them <a href="https://www.igalia.com/24-7/chats">at Igalia website</a> or in your favourite podcasting platform.</p>
<h2 id="igalia-contributions" tabindex="-1">Igalia contributions <a class="header-anchor" href="https://blogs.igalia.com/mrego/2020/12/23/2020-recap/">#</a></h2>
<p>This is not a comprehensive list but just some highlights of what Igalia has been doing in 2020 around CSS:</p>
<ul>
<li><code>list-style-type: <string></code> in Chromium and WebKit.</li>
<li><a href="https://web.dev/css-marker-pseudo-element/"><code>::marker</code> pseudo-element in Chromium</a>.</li>
<li><a href="https://web.dev/logical-property-shorthands/">CSS Logical Properties shorthands in Chromium and WebKit</a>.</li>
<li><a href="https://blogs.igalia.com/svillar/2020/10/01/closing-the-gap-in-flexbox/">Flexbox gutters (and many other fixes) in WebKit</a>.</li>
<li><code>line-break: anywhere</code> in Chromium and WebKit.</li>
<li><code>overflow-wrap: anywhere</code> in Chromium.</li>
<li>Trailing ideographic spaces support in Chromium.</li>
</ul>
<p>We’re working on a demo about these features, that we’ll be publishing next year.</p>
<h2 id="blink-api-owner" tabindex="-1">Blink API OWNER <a class="header-anchor" href="https://blogs.igalia.com/mrego/2020/12/23/2020-recap/">#</a></h2>
<p>In February <a href="https://www.chromium.org/blink/blink-api-owners-requirements">Chromium published the requirements to become API owner</a>.
Due to my involvement on the Blink project since the fork from WebKit back in 2013, I was nominated and <a href="https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOMQ%2Bw-%2BBj9azfgVQ1LKgSTMN2%3DQjjXcH8TysReQChDJRL%2BN8w%40mail.gmail.com?utm_medium=email&utm_source=footer">became <strong>Blink API Owner</strong> past March</a>. 🥳</p>
<p><img src="https://blogs.igalia.com/mrego/files/2020/12/api-owner.png" alt="Yoav Weiss on the BlinkOn 13 Keynote announcing me as API owner" class="center-block">
<span class="caption text-muted"><a href="https://twitter.com/yoavweiss">Yoav Weiss</a> on the <a href="https://www.youtube.com/watch?v=FBqc5zuWio0">BlinkOn 13 Keynote</a> announcing me as API owner</span></p>
<p>The API owners met on a weekly basis to review the intent threads and discuss about them, it’s an amazing learning experience to be part of this group. In my case when reviewing intents I usually pay attention to things related to interoperability, like the status of the spec, test suites and other implementations. In addition, I have the support from all my awesome colleagues at Igalia that help me to play this role, thank you all!</p>
<h2 id="2021-and-beyond" tabindex="-1">2021 and beyond… <a class="header-anchor" href="https://blogs.igalia.com/mrego/2020/12/23/2020-recap/">#</a></h2>
<p>Igalia keeps growing and a bunch of amazing folks will join us soon, particularly <a href="https://twitter.com/dazabani">Delan Azabani</a> and <a href="https://twitter.com/felipeerias">Felipe Erias</a> are already starting these days as part of the Web Platform team.</p>
<p>Open Prioritization should have the first successful project, as <code>:focus-visible</code> is advancing funding and it gets implemented in WebKit. We hope this can lead to new similar experiments in the future.</p>
<p>And I’m sure many other cool things will happen at Igalia next year, stay tuned!</p>
Open Prioritization and CSS Containment2020-07-13T00:00:00Zhttps://blogs.igalia.com/mrego/2020/07/13/open-prioritization-and-css-contain/<p><a href="https://www.igalia.com/technology/browsers"><strong>Igalia</strong></a> is a major contributor to all the open source web rendering engines (Blink, Gecko, Servo and WebKit). We have been doing different kind of contributions for years, which has led us to have an important position on the different communities. This allows us to help our customers to solve their problems through upstream contributions that also benefit the whole web community.</p>
<p>Implementing a feature in a rendering engine (or in several) might look very simple at first sight, but contributing them upstream can take a while depending on the standarization status, the related bugs, the browser architecture, and many other factors. You can find examples of things implemented by Igalia in the past on my previous blog posts, and you will realize about all the work behind some of those features.</p>
<p>There’s a common thing everywhere, people usually get really angry because that bug they reported years ago is still not fixed in a given browser. That can be for a variety of reasons, and not simply because the developers of that browser are very lazy and not paying attention to that particular bug. In many cases the answer to why that hasn’t been solved yet is pretty simple: <strong>priorities</strong>. Different companies and individuals contributing to the projects have their own interests and priorities, they prioritize the different issues and tasks and put the focus and effort on the ones that have a higher priority for them. A possible solution for that, now that major browsers are all open source, would be to look for a consulting company like Igalia that can fix that bug for you; but you as an individual, or even as a company, maybe you don’t have the budget to make that happen.</p>
<p>What would happen if we allow several parties to contribute together to the development of some features? That would make possible that both individuals and organizations that don’t have the power to implement them alone, could contribute their piece of the cake in order to add support for those features on the web platform.</p>
<h2 id="open-prioritization" tabindex="-1">Open Prioritization <a class="header-anchor" href="https://blogs.igalia.com/mrego/2020/07/13/open-prioritization-and-css-contain/">#</a></h2>
<p>Igalia is launching <a href="https://www.igalia.com/open-prioritization/"><strong>Open Prioritization</strong></a>, a crowd-founding campaign for the web platform. We believe this can open the door to many different people and organizations to prioritize the development of some features on the different web engines. Initially we have defined 6 tasks that can be found on the website, together with a FAQ explaining all the details of the campaign. 🚀</p>
<p>Let’s hope we can make this happen. If this is a success and some of these items get funded and implemented, probably there’ll be more in the future, including new things or ideas that you can <a href="https://www.igalia.com/contact/">share with us</a>.</p>
<a href="https://www.igalia.com/open-prioritization/">
<img src="https://blogs.igalia.com/mrego/files/2020/07/open-prioritization.png" alt="Open Prioritization by Igalia. An experiment in crowd-funding prioritization." class="center-block">
</a>
<span class="caption text-muted">Open Prioritization by Igalia</span>
<p>One of the tasks of the Open Prioritization campaign we’re starting this week is about <a href="https://www.igalia.com/open-prioritization/#containmentwebkit">adding CSS Containment support in WebKit</a>, and we have experience working on that in Chromium.</p>
<h2 id="why-css-containment-in-webkit" tabindex="-1">Why CSS Containment in WebKit? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2020/07/13/open-prioritization-and-css-contain/">#</a></h2>
<p>Briefly speaking <a href="https://drafts.csswg.org/css-contain/">CSS Containment</a> is a standard focused in improving the rendering performance of web pages, it allows author to isolate DOM subtrees from the rest of the document, so any change that happens on the “contained” subtree doesn’t affect anything outside that element.</p>
<p>This is the spec behind the <a href="https://drafts.csswg.org/css-contain/#contain-property"><code>contain</code> property</a>, that can have a few values defining the “<a href="https://drafts.csswg.org/css-contain/#containment-types">type of containment</a>”: <code>layout</code>, <code>paint</code>, <code>size</code> and <code>style</code>. I’m not going to go deeper into this and I’ll refer to my <a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">introductory post</a> or <a href="https://blogs.igalia.com/mrego/2019/07/31/talking-about-css-containment-at-cssconf-eu-2019/">my CSSconf EU talk</a> if you’re interested in getting more details about this specification.</p>
<p>So why we think this is important? Currently we have an issue with CSS Containment, it’s supported in Chromium and Firefox (except style containment) but not in WebKit. This might be not a big deal as it’s a performance oriented feature, so if you don’t have support you’ll simply have a worse performance and that’s all. But that’s not completely true as the different type of containments have some restrictions that apply to the contained element (e.g. layout containment makes the element become the containing block of positioned descendants), which might cause interoperability issues if you start to use the <code>contain</code> property in your websites.</p>
<p>The main goal of this task would be add <strong>CSS Containment support in WebKit</strong>, at least to the level that it’s spec compliant with the other implementations, and if time permits to implement some optimizations based on it. Once we have interoperability you can start using it wihtout any concern in your web pages, as the behavior won’t change between the different browsers and you might get some perf improvements (that will vary depending on each browser implementation).</p>
<p>In addition this will allow WebKit to implement further optimizations thanks to the information that the web authors provide through the <code>contain</code> property. On top of that, this initial support is a requirement in order to implement new features that are based on it; like the new CSS properties <a href="https://drafts.csswg.org/css-contain-2/#content-visibility"><code>content-visibility</code></a> and <a href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"><code>contain-intrinsic-size</code></a> which are part of <a href="https://github.com/WICG/display-locking">Display Locking</a> feature.</p>
<p>If you think this is an important feature for you, please go ahead and <a href="https://opencollective.com/css-containment-in-webkit-safari">do your pledge</a> so it can get prioritized and implemented in WebKit upstream.</p>
<p>Really looking forward to seeing how this <strong>Open Prioritization</strong> campaign goes in the coming weeks. 🤞</p>
Web Engines Hackfest 2020: New dates, new venue!2019-12-05T00:00:00Zhttps://blogs.igalia.com/mrego/2019/12/05/web-engines-hackfest-2020-new-dates-new-venue/<p><a href="https://www.igalia.com">Igalia</a> is pleased to announce
the 12th annual <strong>Web Engines Hackfest</strong>.
It will take place on May 18-20 in A Coruña,
and in a new venue: <strong><a href="https://www.palexco.com/">Palexco</a></strong>.
You can find all the information, together with the registration form,
on the hackfest website: <a href="https://webengineshackfest.org/2020/">https://webengineshackfest.org/2020/</a>.</p>
<h2 id="mission-and-vision" tabindex="-1">Mission and vision <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/12/05/web-engines-hackfest-2020-new-dates-new-venue/">#</a></h2>
<p>The main goal behind this event is to have a place
for <strong>people from different parts of the web platform community</strong>
to meet together for a few days
and <strong>talk, discuss, draft, prototype, implement, etc.</strong>
on different topics of interest for the whole group.</p>
<p>There are not many events where <strong>browser implementors</strong>
from different engines can sit together and talk about
their last developments, their plans for the future,
or the controversial topics they have been discussing online.</p>
<p>However this is an event <strong>not only for developers</strong>,
other roles that are part of the community,
like people working on standards,
are welcomed to the event.</p>
<p>It’s really nice to have people from <strong>different backgrounds</strong>
and working on a variety of things around the web,
to reach better solutions, enlighten the conversations
and draft higher quality conclusions during the discussions.</p>
<p>We believe the combination of all these factors
make the Web Engines Hackfest an unique opportunity
to <strong>push forward the evolution of the web</strong>.</p>
<h2 id="2020-edition" tabindex="-1">2020 edition <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/12/05/web-engines-hackfest-2020-new-dates-new-venue/">#</a></h2>
<p>We realized that autumn is usually full of browser events
(TPAC, BlinkOn, WebKit Contributors Meeting, … just to name a few),
and most of the people coming to the hackfest
are also attending some of them.
For that reason we thought it would be a good idea to move the event
from fall to spring, in order to better accommodate everyone’s schedules
and avoid unfortunate conflicts or unnecessary hard choices.
So next year the hackfest will happen on May
from <strong>Monday 18th to Wednesday 20th</strong> (both days included).</p>
<p>At this stage the event is becoming popular
and during the past three years we have been around 60-70 people.
Igalia office has been a great venue for the hackfest
during all this time, but on the last occasions we were using it
as its full capacity.
So this time we decided to move the hackfest to a new venue,
which will allow us to grow to 100 or more participants,
let’s see how things go.
The venue would be <strong>Palexco</strong>,
a lovely conferences building in A Coruña port,
which is very close to the city center.
We really hope you like the new place and enjoy it.</p>
<a href="https://www.flickr.com/photos/jlcernadas/28117923649/">
<img src="https://blogs.igalia.com/mrego/files/2019/12/palexco.jpg" alt="New venue: Palexco (picture by Jose Luis Cernadas Iglesias)" class="center-block">
</a>
<span class="caption text-muted">New venue: Palexco
(picture by <a href="https://www.flickr.com/photos/jlcernadas/28117923649/">Jose Luis Cernadas Iglesias</a>)</span>
<p>Having more people and the new venue
bring us lots of challenges but also new possibilities.
So we’re changing a little bit the format of the event,
we’ll have a first day in a more regular conference fashion
(with some talks and lighting talks) but also including
some space for discussions and hacking.
And then the last 2 days will be more the usual unconference format
with a bunch of breakout sessions, informal discussions, etc.
We believe the conversations and discussions that happen
during the hackfest are one of the best things of the event,
and we hope this new format will work well.</p>
<h2 id="join-us" tabindex="-1">Join us <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/12/05/web-engines-hackfest-2020-new-dates-new-venue/">#</a></h2>
<p>Thanks to the changes on the venue,
the event is no longer invitation-only (as it used to be).
We’ll be still sending the invitations to the people usually interested
on the hackfest, but you can already register by yourself
just filling the <a href="https://forms.gle/uLM1KajTd9vBz3Hf9"><strong>registration form</strong></a>.</p>
<p>Soon we will open a call for papers for the talks, stay tuned!
We’ll also have room for ligthing talks,
so people attending can take advantage of them
to explain their work and plans on the event.</p>
<p>Last but not least,
<a href="https://www.arm.com/"><strong>Arm</strong></a>,
<a href="https://www.google.com/"><strong>Google</strong></a> and
<a href="https://www.igalia.com"><strong>Igalia</strong></a>
will be <a href="https://webengineshackfest.org/2020/#sponsors">sponsoring 2020 edition</a>,
thank you very much!
We hope more companies join the trend
and help us to arrange the event with their support.
If your company is willing to sponsor the hackfest,
please don’t hesitate to contact us
at <a href="mailto:hackfest@webengineshackfest.org">hackfest@webengineshackfest.org</a>.</p>
<h2 id="some-historical-information" tabindex="-1">Some historical information <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/12/05/web-engines-hackfest-2020-new-dates-new-venue/">#</a></h2>
<p>Igalia has been organizing and hosting <a href="https://wiki.gnome.org/Projects/WebKitGtk/Hackfest2009"><em>this</em> event since 2009</a>.
Back then, the event was called the “WebKitGTK+ Hackfest”.
The <a href="https://webkitgtk.org/">WebKitGTK+ project</a> was,
on those days, in early stages.
There was lots of work to do around the project,
and a few people (11 to be specific) decided to work together
for a whole week to move the project forward.
The event was really successful
and it was happening on a similar fashion for 5 years.</p>
<p>On 2014 we decided to make broader the scope of the event
and not restrict it to people working only on WebKitGTK+ (or WebKit),
but open it to members from all parts of the web platform community
(including folks working on other engines like Blink, Servo, Gecko).
We changed the name to “<a href="ahttps://blogs.igalia.com/mrego/2014/10/28/presenting-the-web-engines-hackfest/">Web Engines Hackfest</a>”,
we got a very positive response
and the event has been running on yearly since then,
growing more and more every year.</p>
<p>And now we’re looking forward to 2020 edition,
in a new venue and with more people than ever.
Let’s hope everything goes great.</p>
Web Engines Hackfest 20192019-11-14T00:00:00Zhttps://blogs.igalia.com/mrego/2019/11/14/web-engines-hackfest-2019/<p>A month ago <a href="https://www.igalia.com">Igalia</a> hosted another edition of the <a href="https://webengineshackfest.org/2019/"><strong>Web Engines Hackfest</strong></a> in our office in A Coruña. This is my personal summary of the event, obviously biased as I’m part of the organization.</p>
<h3 id="talks" tabindex="-1">Talks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/11/14/web-engines-hackfest-2019/">#</a></h3>
<p>During the event we arranged six talks about a variety range of topics:</p>
<ul>
<li>
<p><a href="https://youtu.be/Q8Z1D2i61j8?list=PL4sEzdAGvRgDCN6qACHWs04mQQTWBkdGq"><strong>MathML in Browsers</strong></a> by <em>Frédéric Wang</em>:
During this talk Fred explained the current status of MathML in the different browser engines, and also the work Igalia has been doing during the this year to <a href="https://mathml.igalia.com/">bring back MathML support into Chromium</a>.</p>
</li>
<li>
<p><a href="https://youtu.be/AqzztIpGCD8?list=PL4sEzdAGvRgDCN6qACHWs04mQQTWBkdGq"><strong>Implementing Accessibility for the Web Platform</strong></a> by <em><a href="https://twitter.com/__mrobinson__">Martin Robinson</a></em>:
In this presentation Martin talked about why accessibility is important, how is it implemented in the web platform and some specific details about how it’s done in Chromium.</p>
</li>
<li>
<p><a href="https://youtu.be/EaGzIzmkCyQ?list=PL4sEzdAGvRgDCN6qACHWs04mQQTWBkdGq"><strong>Chromium updates from Arm: higher, faster, stronger</strong></a> by <em><a href="https://twitter.com/adenilsonc">Adenilson Cavalcanti</a></em> & <em>Dave Rodgman</em>: During their talk Adenilson and Dave explained the work Arm has been doing around Chromium highlighting their improvements on performance and security.</p>
</li>
<li>
<p><a href="https://youtu.be/V1Q9iqxhfgU?list=PL4sEzdAGvRgDCN6qACHWs04mQQTWBkdGq"><strong>Implementing one feature set in two JavaScript engines</strong></a> by <em><a href="https://twitter.com/caio_nepo">Caio Lima</a></em> & <em><a href="https://twitter.com/JoyeeCheung">Joyee Cheung</a></em>: This talk was about explaining what it takes to implement a new JavaScript features like <a href="https://tc39.es/proposal-class-fields/">Class Fields</a> in V8 and JSC.
If you are curious about JavaScript implementations on the different engines, Caio and Joyee provided lots of interesting details during the talk.</p>
</li>
<li>
<p><a href="https://youtu.be/rdSSvyXkeK0?list=PL4sEzdAGvRgDCN6qACHWs04mQQTWBkdGq"><strong>about:standardization</strong></a> by <em><a href="https://twitter.com/fantasai">Elika J. Etemad</a></em>: In her talk fantasai shared lots of information about how the standardization process works, and encouraged everybody to provide feedback and participate in the process.</p>
</li>
<li>
<p><a href="https://youtu.be/gNQhwf1UDbc?list=PL4sEzdAGvRgDCN6qACHWs04mQQTWBkdGq"><strong>Finding browser bugs the easy way</strong></a> by <em><a href="https://twitter.com/ecbos_">Emilio Cobos Álvarez</a></em>: Emilio talked about an experiment related to running crash tests from different web engines in each other.
Opening the door to maybe start putting crash tests on the shared Web Platform Tests repository so all browsers, which looks like a good idea.</p>
</li>
</ul>
<a href="https://flickr.com/photos/webhackfest/49012181692/">
<img src="https://blogs.igalia.com/mrego/files/2019/11/web-engines-hackfest-2019-emilio-talk.jpg" alt="Emilio Cobos during his talk at the Web Engines Hackfest 2019" class="center-block">
</a>
<span class="caption text-muted">Emilio Cobos during his talk at the Web Engines Hackfest 2019</span>
<h3 id="web-platform-tests-wpt" tabindex="-1">Web Platform Tests (WPT) <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/11/14/web-engines-hackfest-2019/">#</a></h3>
<p>Apart from the talks, the main and most important part of the hackfest (at least from my personal point of view) are the breakout sessions and discussions we organize about different interest topics.</p>
<p>During one of these sessions we talked about the status of things regarding <a href="https://github.com/web-platform-tests/wpt"><strong>WPT</strong></a>. WPT is working really fine for Chromium and Firefox, however WebKit is still lagging behind as synchronization is still manual there. Let’s hope things will improve in the future on the WebKit side.</p>
<p>We also highlighted that the number of <strong>dynamic tests</strong> on WPT are less than expected, we discarded issues with the infrastructure and think that the problems are more on the side of people writing the tests, that somehow forget to cover cases when things changes dynamically.</p>
<p>Apart from that James Graham put over the table the <a href="https://www.w3.org/2019/09/18-mdn-minutes.html">results from the last MDN survey</a>, which showed <strong>interoperability</strong> as one of the most important issues for web developers. WPT is helping with interop but despite of the improvements on that regard this is still a big problem for authors. We didn’t have any good answer about how to fix that, in my case I shared some ideas that could help to improve things at some point:</p>
<ul>
<li><strong>Mandatory tests</strong> for specs: This is already happening for some specs like HTML but not for all of them. If we manage to reach a point where every change on a spec comes with a test, probably interoperability on initial implementations will be much better. It’s easy to understand why this is not happening as people working on specs are usually very overloaded.</li>
<li><strong>Common forum</strong> to agree on shipping features: This is a kind of utopia, as each company has their own priorities, but if we had a place were the different browser vendors talk in order to reach an agreement about when to ship a feature, that would make web author’s lifes much easier.
We somehow managed to do that when <a href="https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is-here-to-stay/">we shipped CSS Grid Layout</a> almost simultaneously in the different browsers, if we could repeat that success story for more features in the future that would be awesome.</li>
</ul>
<h3 id="debugging-tools" tabindex="-1">Debugging tools <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/11/14/web-engines-hackfest-2019/">#</a></h3>
<p>One of the afternoons we did a breakout session related to debugging tools.</p>
<p>First Christian Biesinger showed us <a href="https://github.com/MicrosoftEdge/JsDbg"><strong>JdDbg</strong></a> which is an amazing tool to explore data structures in the web browser (like the DOM, layout or accessibility trees). All the information is updated live while you debug your code, and you can access all of them on a single view very comfortably.</p>
<p>Afterwards <a href="https://twitter.com/ecbos_">Emilio Cobos</a> explained how to use the reverse debugger <a href="https://rr-project.org/"><strong>rr</strong></a>. With this tool you can record a bug and then replay it as many times as you need going back and forward in time. Also Emilio showed how to annotate all the output so you can go directly to that moment in time, or how to randomize the execution to help caught race conditions. As a result of this explanation we got a <a href="https://bugs.webkit.org/show_bug.cgi?id=203043">bug fixed in WebKitGTK+</a>.</p>
<h3 id="other" tabindex="-1">Other <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/11/14/web-engines-hackfest-2019/">#</a></h3>
<p>About <strong>MathML</strong> Fred’s talk finished sending the <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/OOZIrtSPLeM/QsTCnouFDgAJ">intent-to-implement mail to blink-dev</a> officially announcing the beginning of the upstreaming process. Since then a bunch of patches have already landed behind a runtime flag, you can follow the progress on <a href="https://crbug.com/6606">Chromium issue #6606</a> if you’re interested.</p>
<p>On the last day a few of us even attended the <a href="https://twitter.com/regocas/status/1184503899488739328"><strong>CSS Working Group confcall</strong></a> during the hackfest, which worked as a test for Igalia office’s infrastructure thinking on the <a href="https://wiki.csswg.org/planning/galicia-2020">face-to-face meeting we’ll be hosting next January</a>.</p>
<a href="https://flickr.com/photos/webhackfest/48990164863/">
<img src="https://blogs.igalia.com/mrego/files/2019/11/web-engines-hackfest-2019-csswg-confcall.jpg" alt="People attending the CSSWG confcall (from left to right: Oriol, Emilio, fantasai, Christian and Brian)" class="center-block">
</a>
<span class="caption text-muted">People attending the CSSWG confcall (from left to right: Oriol, Emilio, fantasai, Christian and Brian)</span>
<p>As a side note, this time we arranged a guided city tour around A Coruña and, despite of the weather, people seemed to have enjoyed it.</p>
<h3 id="acknowledgements" tabindex="-1">Acknowledgements <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/11/14/web-engines-hackfest-2019/">#</a></h3>
<p>Thanks to everyone coming, we’re really happy for the lovely feedback you always share about the event, you’re so kind! ☺</p>
<p>Of course, kudos to the speakers for the effort working on such a nice set of interesting talks. 👏</p>
<p>Last, but not least, big thanks to the hackfest sponsors: <a href="https://www.arm.com/"><strong>Arm</strong></a>, <a href="https://www.google.com"><strong>Google</strong></a>, <a href="https://www.igalia.com"><strong>Igalia</strong></a> and <a href="https://www.mozilla.org/"><strong>Mozilla</strong></a>. Your support is critical to make this event possible, you rock. 🎸</p>
<a href="https://webengineshackfest.org/2019/#sponsors">
<img src="https://blogs.igalia.com/mrego/files/2019/11/web-engines-hackfest-2019-sponsors.png" alt="Web Engines Hackfest 2019 sponsors: Google and Igalia" class="center-block">
</a>
<span class="caption text-muted">Web Engines Hackfest 2019 sponsors: Arm, Google, Igalia and Mozilla</span>
<p>See you all next year. Some news about the next edition will be announced very soon, stay tuned!</p>
Talking about CSS Containment at CSSconf EU 20192019-07-31T00:00:00Zhttps://blogs.igalia.com/mrego/2019/07/31/talking-about-css-containment-at-cssconf-eu-2019/<p>Back in January I wrote a <a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">blog post introducing <strong>CSS Containment</strong></a>
where I tried to explain this specification and the main motivation and uses cases behind it.
I’ve been working on css-contain implementation in Chromium during the last months
as part of the ongoing collaboration between <a href="https://www.igalia.com"><strong>Igalia</strong></a> and <a href="https://www.bloomberg.com/company/"><strong>Bloomberg</strong></a>,
I believe this is not a very well known topic yet,
and I have the chance to speak about it in the impressive <a href="https://2019.cssconf.eu"><strong>CSSconf EU</strong></a>.</p>
<p>First of all it was a really great surprise to get my talk proposal accepted,
Igalia has been attending CSSconf EU regularly but we never spoke there before.
It’s one of the biggest CSS events and the setup they prepare (together with JSConf)
is overwhelming, I’m very grateful to be part of the speakers lineup.
Also the organization was very good and really paid attention to every detail.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2019/07/cssconf-eu-2019-stage.jpg"><img src="https://blogs.igalia.com/mrego/files/2019/07/cssconf-eu-2019-stage-750.jpg" alt="CSSconf EU 2019 stage"></a>
<span class="caption text-muted">CSSconf EU 2019 stage</span></p>
<p>My talk’s title was <a href="https://2019.cssconf.eu/speakers/manuel-rego/"><em>Improving Website Performance with CSS Containment</em></a>,
during the talk I did an introduction to the spec,
explained the <code>contain</code> property
and the implications of the different types of containment.
On top of that I showed a few examples about
how the performance of a website can be improved thanks to css-contain.
The <a href="https://youtu.be/iqcO-5_KkJ4">video of my talk</a> is published in YouTube
and you can also get <a href="https://people.igalia.com/mrego/talks/cssconf-eu-2019-css-containment/">the slides from this blog</a>.</p>
<div style="text-align: center;">
<iframe style="max-width: 100%" width="560" height="315" src="https://www.youtube.com/embed/iqcO-5_KkJ4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<p>After the presentation I got some positive feedback from the audience,
it seems that despite of being a somehow deep topic people liked it.
Thank you very much!</p>
<div class="row">
<div class="col-lg-6 col-md-6">
<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">“Improving Website Performance With CSS Containment” by <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a> <a href="https://twitter.com/hashtag/cssconfeu?src=hash&ref_src=twsrc%5Etfw">#cssconfeu</a> <a href="https://twitter.com/hashtag/CSSconfEU2019?src=hash&ref_src=twsrc%5Etfw">#CSSconfEU2019</a> <a href="https://twitter.com/hashtag/sketchnote?src=hash&ref_src=twsrc%5Etfw">#sketchnote</a> <a href="https://t.co/EC3KsYadlg">pic.twitter.com/EC3KsYadlg</a></p>— Clairikine @ commissions open (@clairikine) <a href="https://twitter.com/clairikine/status/1134457000690106369?ref_src=twsrc%5Etfw">May 31, 2019</a></blockquote>
<p></p><blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">‘CSS containment lets us improve rendering performance by isolating subtrees’ – <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a> <a href="https://twitter.com/hashtag/CSSConf?src=hash&ref_src=twsrc%5Etfw">#CSSConf</a></p>— Hidde (@hdv) <a href="https://twitter.com/hdv/status/1134443095767048193?ref_src=twsrc%5Etfw">May 31, 2019</a></blockquote><p></p>
<p></p><blockquote class="twitter-tweet"><p lang="en" dir="ltr">After <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a> <a href="https://twitter.com/hashtag/cssconfeu?src=hash&ref_src=twsrc%5Etfw">#cssconfeu</a> talk, one of the first things I'll be testing when I'm back at my computer is the contain property! <a href="https://t.co/soH5KdDabI">https://t.co/soH5KdDabI</a></p>— Morten @ Home (@mor10) <a href="https://twitter.com/mor10/status/1134448393755942912?ref_src=twsrc%5Etfw">May 31, 2019</a></blockquote><p></p>
</div>
<div class="col-lg-6 col-md-6">
<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">A CSS <a href="https://twitter.com/hashtag/webperf?src=hash&ref_src=twsrc%5Etfw">#webperf</a> talk. <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a> taking us through css containment <a href="https://t.co/a1APlK26dG">https://t.co/a1APlK26dG</a> <a href="https://twitter.com/hashtag/webperf?src=hash&ref_src=twsrc%5Etfw">#webperf</a><a href="https://twitter.com/hashtag/CSSConfEU?src=hash&ref_src=twsrc%5Etfw">#CSSConfEU</a> <a href="https://twitter.com/hashtag/Perfmatters?src=hash&ref_src=twsrc%5Etfw">#Perfmatters</a> <a href="https://twitter.com/igalia?ref_src=twsrc%5Etfw">@igalia</a> <a href="https://t.co/gRINT6eXUA">pic.twitter.com/gRINT6eXUA</a></p>— Henri Helvetica 👨🏾🚀 (@HenriHelvetica) <a href="https://twitter.com/HenriHelvetica/status/1134445421349285893?ref_src=twsrc%5Etfw">May 31, 2019</a></blockquote>
<p></p><blockquote class="twitter-tweet"><p lang="en" dir="ltr">This is how CSS Containment works with contain:strict. Very useful to optimize rendering. <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a> <a href="https://twitter.com/hashtag/cssconf?src=hash&ref_src=twsrc%5Etfw">#cssconf</a> <a href="https://twitter.com/hashtag/cssconfeu?src=hash&ref_src=twsrc%5Etfw">#cssconfeu</a> <a href="https://t.co/hSAfL9NIjr">pic.twitter.com/hSAfL9NIjr</a></p>— Jonathan Weiss (@jonathan_weiss) <a href="https://twitter.com/jonathan_weiss/status/1134447420895649792?ref_src=twsrc%5Etfw">May 31, 2019</a></blockquote><p></p>
</div>
</div>
<p>Last but not least, just to close this blog post I’d like to say thanks
one more time to <strong>Bloomberg</strong>.
They have been supporting Igalia’s work on CSS Containment implementation,
which is helping to improve performance of their applications.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Speaking at CSS Day 20192019-06-19T00:00:00Zhttps://blogs.igalia.com/mrego/2019/06/19/speaking-at-css-day-2019/<p>This year I got invited to speak at <a href="https://cssday.nl/2019"><strong>CSS Day</strong></a>, this is an amazing event that every year brings to Amsterdam great speakers from all around the globe to talk about cutting edge topics related to CSS.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2019/06/css-day-2019.jpg"><img src="https://blogs.igalia.com/mrego/files/2019/06/css-day-2019-750.jpg" alt="Pictures of speakers and MC at CSS Day 2019"></a>
<span class="caption text-muted">Speakers and MC at CSS Day 2019</span></p>
<p>The conference happened in the beautiful <a href="https://www.compagnietheater.nl"><em>Compagnietheater</em></a>. Kudos to the organization as they were really kind and supportive during the whole event. Thanks for giving me the opportunity to speak there.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2019/06/compagnietheater-amsterdam.jpg"><img src="https://blogs.igalia.com/mrego/files/2019/06/compagnietheater-amsterdam-750.jpg" alt="Compagnietheater in Amsterdam"></a>
<span class="caption text-muted">Compagnietheater in Amsterdam</span></p>
<p>For this event I prepared a totally new talk, focused on explaining what it takes to implement something like CSS Grid Layout in a browser engine. I took an <a href="https://speakerdeck.com/jensimmons/proposal-to-csswg-sept-2016?slide=51">idea from Jen Simmons</a> and implemented a new property <code>grid-skip-areas</code> during the presentation, this was useful to explain the different things that happen during the whole process. <a href="https://www.youtube.com/watch?v=C1JcKq3NzWU">Video of the talk is available on YouTube</a>, and the <a href="https://people.igalia.com/mrego/talks/css-day-2019-css-grid-layout/">slides are available</a> if you are interested too; however, note that some of them won’t work on your browser unless you built the linked patches.</p>
<div style="text-align: center;">
<iframe style="max-width: 100%" width="560" height="315" src="https://www.youtube.com/embed/C1JcKq3NzWU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<p>The feedback after the talk was really good, everyone seemed to like it (despite the fact that I showed lots of slides with C++ code) and find it useful to understand what’s going on behind the scenes. Thank you very much for your kind words! 😊</p>
<div class="row">
<div class="col-lg-6 col-md-6">
<blockquote class="twitter-tweet" data-lang="en-gb"><p lang="en" dir="ltr">My sketch notes for <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a> "CSS Grid Layout Implementation Details" talk <a href="https://twitter.com/cssdayconf?ref_src=twsrc%5Etfw">@cssdayconf</a> <a href="https://twitter.com/hashtag/CSSday?src=hash&ref_src=twsrc%5Etfw">#CSSday</a> <a href="https://t.co/NQBvSj3ZzR">pic.twitter.com/NQBvSj3ZzR</a></p>— Emily Painter (@paintingemily) <a href="https://twitter.com/paintingemily/status/1139510969145729026?ref_src=twsrc%5Etfw">14 June 2019</a></blockquote>
</div>
<div class="col-lg-6 col-md-6">
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en-gb"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/cssday?src=hash&ref_src=twsrc%5Etfw">#cssday</a> <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a> wrapping up an amazingly concrete talk on how to take a CSS property from idea to implementation <a href="https://t.co/u8afbm3r5J">pic.twitter.com/u8afbm3r5J</a></p>— fantasai (@fantasai) <a href="https://twitter.com/fantasai/status/1139511292350357506?ref_src=twsrc%5Etfw">14 June 2019</a></blockquote>
<br>
<blockquote class="twitter-tweet" data-lang="en-gb"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/CSSday?src=hash&ref_src=twsrc%5Etfw">#CSSday</a> if you want to understand how the CSS Grid specs where created, implemented and some of the issues, <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a>'s talk is quite interesting. It's really enlightening to have a sneak peek and see what is going on behind the scene.</p>— Stéphanie Walter (@WalterStephanie) <a href="https://twitter.com/WalterStephanie/status/1139506334620102656?ref_src=twsrc%5Etfw">14 June 2019</a></blockquote>
</div>
</div>
<p>Somehow with this talk I was explaining the kind of things we do at <a href="https://www.igalia.com"><strong>Igalia</strong></a> and how we can help to fill the gaps left by browser vendors in the evolution of the Web Platform. Igalia has now a solid position inside the Web community, which makes us an excellent partner in order to improve the platform aligned with your specific needs. If you want to know more don’t hesitate to <a href="https://www.igalia.com/technology/browsers">read our website</a> or <a href="https://www.igalia.com/contact/">contact us</a> directly.</p>
<p>I hope you enjoy it! 😀</p>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Summary of a week in Lyon for TPAC 20182019-02-11T00:00:00Zhttps://blogs.igalia.com/mrego/2019/02/11/summary-of-a-week-in-lyon-for-tpac-2018/<p>Past October <a href="https://www.igalia.com"><strong>Igalia</strong></a> participated on <strong><a href="https://www.w3.org/2018/10/TPAC/">TPAC 2018</a></strong> with 12 people, I believe it was the biggest presence of igalians in this event ever, probably because of proximity to many of us (as it happened in Lyon) but also reflecting our increasing presence on the web platform ecosystem.</p>
<p>Apart from TPAC itself, Igalia also participated on the <a href="https://www.w3.org/2018/10/Meetup/"><strong>W3C Developers Meetup</strong></a> that happened the very same week, where I gave a talk about how to contribute to CSS (more about that later).</p>
<h3 id="igalia-booth-at-tpac" tabindex="-1">Igalia booth at TPAC <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/02/11/summary-of-a-week-in-lyon-for-tpac-2018/">#</a></h3>
<p>In the Igalia booth we were showcasing some of our last developments with different demos running on embedded devices, in which you could find our more recent work around the web platform (WebRTC, MSE, CSS Grid Layout, CSS Box Alignment, MathML, etc.).
These demos were using <a href="https://webkit.org/wpe/">WPE</a> a WebKit port optimized for low-end platforms developed by Igalia.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2019/02/igalia-booth-tpac-2018.jpg" alt="Igalia booth at TPAC 2018" class="center-block">
<span class="caption text-muted">Igalia booth at TPAC 2018</span></p>
<h3 id="be-part-of-css-evolution" tabindex="-1">Be part of CSS evolution <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/02/11/summary-of-a-week-in-lyon-for-tpac-2018/">#</a></h3>
<p>As I mentioned in the introduction, I gave a talk in the W3C Developers Meetup. My talk was called “<strong>Be part of CSS evolution</strong>” and it tried to explain how the CSS Working Group works and also how anyone can have a direct impact on the development of CSS specifications by raising issues, providing feedback, explaining use cases, etc.</p>
<p>The <a href="https://people.igalia.com/mrego/talks/w3c-developer-meetup-2018-css/">slides of the talk can be found on this blog</a> and the <a href="https://vimeo.com/312474183">video has been recently published in Vimeo</a>.</p>
<iframe class="center-block" src="https://player.vimeo.com/video/312474183" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
<span class="caption text-muted">Video of my talk "*Be part of CSS evolution*"</span>
<h3 id="mathml" tabindex="-1">MathML <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/02/11/summary-of-a-week-in-lyon-for-tpac-2018/">#</a></h3>
<p>Most of the people that came to our booth asked about this topic, it’s clear there are a lot of people interested in MathML. As you might already know Igalia has been looking for funding to implement <a href="https://mathml.igalia.com/"><strong>MathML in Chromium</strong></a> and during TPAC we got the confirmation that <a href="https://mathml.igalia.com/news/2018/11/27/niso-sponsoring-implementation-mathml-in-chromium/#new">NISO will be sponsoring</a> an important part of this work.</p>
<p>At TPAC there were several concerns about the future of MathML, and a <a href="https://github.com/w3ctag/design-reviews/issues/313">TAG review</a> was requested just after the conference. Igalia has been in conversations with many people since TPAC: TAG members, Google engineers and folks interested on reviving MathML specification. Past month a new <a href="https://www.w3.org/community/mathml4/"><strong>MathML Refresh Community Group</strong></a> has been created and TAG review has been closed with a positive answer regarding the future of MathML.</p>
<p>On top of the specs work, Chromium implementation is in progress and more news will be released soon at <a href="https://mathml.igalia.com">mathml.igalia.com</a> about the status of things. If your company would like to support MathML please don’t hesitate to <a href="mailto:mathml@igalia.com">contact us</a>. Stay tuned!</p>
<h3 id="other" tabindex="-1">Other <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/02/11/summary-of-a-week-in-lyon-for-tpac-2018/">#</a></h3>
<p>In my case I was attending CSS Working Group and Houdini Task Force meetings, it’s always a pleasure to share a room with such amount of brilliant people working hard on defining the future of CSS.
Several people were quite interested about the work Igalia has been recently doing around CSS Containment specification (more info in <a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">my previous post</a>). It seems this spec has some potential to become relevant regarding web rendering performance.</p>
<p>Apart from that, there were a bunch of interesting <a href="https://www.w3.org/wiki/TPAC/2018#Session_Grid">breakout sessions</a> on the technical plenary day. I’d like to highlight the one given by <a href="https://twitter.com/fantasai">fantasai</a> and <a href="https://twitter.com/marcosc">Marcos Cáceres</a> about <a href="https://lists.w3.org/Archives/Public/spec-prod/2018OctDec/0011.html">“<em>Spec Editing Best Practices</em>”</a>, it was really interesting to understand how both write specs to make things easier for people reading them.</p>
<a href="https://blogs.igalia.com/mrego/files/2019/02/spec-editing-best-practices.jpg">
<img src="https://blogs.igalia.com/mrego/files/2019/02/spec-editing-best-practices-800x600.jpg" alt="Spec Editing Best Practices notes by fantasai" class="center-block">
</a>
<span class="caption text-muted">"*Spec Editing Best Practices*" notes by fantasai</span>
<p>Last but not least, despite being most of the day at TPAC we found some time to enjoy Lyon during dinners at night, it looks a nice city.</p>
An introduction to CSS Containment2019-01-11T00:00:00Zhttps://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/<p><a href="https://www.igalia.com">Igalia</a> has been recently working on the <strong>implementation of css-contain in Chromium</strong> by providing some fixes and optimizations based on this standard.
This is a brief blog post trying to give an introduction to the spec, explain the status of things, the work done during past year, and some plans for the future.</p>
<h3 id="what-s-css-contain" tabindex="-1">What’s css-contain? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">#</a></h3>
<p>The main goal of <a href="http://drafts.csswg.org/css-contain/"><strong>CSS Containment</strong></a> standard is to improve the rendering performance of web pages, allowing the <strong>isolation of a subtree</strong> from the rest of the document.
This specification only introduces one new CSS property called <strong><code>contain</code></strong> with different possible values.
Browser engines can use that information to implement optimizations and avoid doing extra work when they know which subtrees are independent of the rest of the page.</p>
<p>Let’s explain what is this about and why this can be can bring performance improvements in complex websites.
Imagine that you have a big HTML page which generates a complex <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM</a> tree, but you know that some parts of that page are totally independent of the rest of the page and the content in those parts is modified at some point.</p>
<p>Browser engines usually try to avoid doing more work than needed and use some heuristics to avoid spending more time than required. However there are lots of corner cases and complex situations in which the browser needs to actually recompute the whole webpage. To improve these scenarios the author has to identify which parts (subtrees) of their website are independent and isolate them from the rest of the page thanks to the <code>contain</code> property. Then when there are changes in some of those subrees the rendering engine will be able to avoid doing any work outside of the subtree boundaries.</p>
<p>Not everything is for free, when you use <code>contain</code> there are some restrictions that will affect those elements, so the browser is totally certain it can apply optimizations without causing any breakage (e.g. you need to manually set the size of the elment if you want to use <em>size containment</em>).</p>
<p>The CSS Containment specification defines four values for the <code>contain</code> property, one per each <a href="https://drafts.csswg.org/css-contain/#containment-types"><strong>type of containment</strong></a>:</p>
<ul>
<li><strong><code>layout</code></strong>: The internal layout of the element is totally isolated from the rest of the page, it’s not affected by anything outside and its contents cannot have any effect on the ancestors.</li>
<li><strong><code>paint</code></strong>: Descendants of the element cannot be displayed outside its bounds, nothing will overflow this element (or if it does it won’t be visible).</li>
<li><strong><code>size</code></strong>: The size of the element can be computed without checking its children, the element dimensions are independent of its contents.</li>
<li><strong><code>style</code></strong>: The effects of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">counters</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/quotes">quotes</a> cannot escape this element, so they are isolated from the rest of the page.<br>
Note that regarding <em>style containment</em> there is an <a href="https://github.com/w3c/csswg-drafts/issues/3280">ongoing discussion on the CSS Working Group</a> about how useful it is (due to the narrowed scope of counters and quotes).</li>
</ul>
<p>You can combine the different type of containments as you wish, but the spec also provides two extra values that are a kind of “shorthand” for the other four:</p>
<ul>
<li><strong><code>content</code></strong>: Which is equivalent to <code>contain: layout paint <strike>style</strike></code>.</li>
<li><strong><code>strict</code></strong>: This is the same than having <s>all four types</s> content containment plus size containment, so it’s equivalent to <code>contain: layout paint size <strike>style</strike></code>.</li>
</ul>
<blockquote>
<p><strong>Update</strong>: The <a href="https://github.com/w3c/csswg-drafts/issues/3280">CSS Working Group has resolved to remove <code>style</code> containment from <code>content</code> and <code>strict</code></a>, that’s why the previous lines have been updated. Thanks Robert Linder for reporting.</p>
</blockquote>
<h3 id="example" tabindex="-1">Example <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">#</a></h3>
<p>Let’s show <a href="https://blogs.igalia.com/mrego/files/2019/01/css-contain-example.html">an example</a> of how CSS Containment can help to improve the performance of a webpage.</p>
<p>Imagine a page with lots of elements, in this case 10,000 elements like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Lorem ipsum...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And that it modifies the content of one of the inner DIVs trough <code>textContent</code> attribute.</p>
<p>If you don’t use css-contain, even when the change is on a single element, Chromium spends a lot of time on layout because it traverses the whole DOM tree (which in this case is big as it has 10,000 elements).</p>
<p><img src="https://blogs.igalia.com/mrego/files/2019/01/css-contain-example-dom-tree.svg" alt="CSS Containment Example DOM Tree" class="center-block">
<span class="caption text-muted">CSS Containment Example DOM Tree</span></p>
<p>Here is when <code>contain</code> property comes to the rescue. In this example the DIV <code>item</code> has fixed size, and the contents we’re changing in the inner DIV will never overflow it. So we can apply <strong><code>contain: strict</code></strong> to the <code>item</code>, that way the browser won’t need to visit the rest of the nodes when something changes inside an <code>item</code>, it can stop checking things on that element and avoid going outside.</p>
<p>Notice that if the content overflows the <code>item</code> it would get clipped, also if we don’t set a fixed size for the <code>item</code> it’ll be rendered as an empty box so nothing would be visible (actually in this example the borders would be present but they would be the only visible thing).</p>
<a href="https://blogs.igalia.com/mrego/files/2019/01/css-contain-example.png">
<img src="https://blogs.igalia.com/mrego/files/2019/01/css-contain-example.png" alt="CSS Containment Example" class="center-block">
</a>
<span class="caption text-muted">CSS Containment Example</span>
<p>Despite how simple is each of the items in this example, we’re getting a big improvement by using CSS Containment in <strong>layout time going down from ~4ms to ~0.04ms</strong> which is a huge difference. Imagine what would happen if the DOM tree has very complex structures and contents but only a small part of the page gets modified, if you can isolate that from the rest of the page you could get similar benefits.</p>
<h3 id="state-of-the-art" tabindex="-1">State of the art <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">#</a></h3>
<p>This is not a new spec, <a href="https://developers.google.com/web/updates/2016/06/css-containment">Chrome 52 shipped the initial support by July 2016</a>, but during last year there has been some extra development related to it and that’s what I want to highlight in this blog post.</p>
<p>First of all <a href="https://github.com/w3c/csswg-drafts/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Acss-contain-1+">many specification issues have been fixed</a> and some of them imply changes on the implementations, most of this work has been carried on by <a href="https://twitter.com/frivoal">Florian Rivoal</a> in collaboration with the <a href="https://twitter.com/csswg">CSS Working Group</a>.</p>
<p>Not only that but on the tests side <a href="https://www.gtalbot.org/">Gérard Talbot</a> has completed the <a href="http://w3c-test.org/css/css-contain/">test suite in the web-platform-tests (WPT) repository</a>, which is really important to fix bugs on the implementations and ensure interoperability.</p>
<p>In my case <a href="https://chromium-review.googlesource.com/q/hashtag:%2522css-contain%2522+(status:merged)">I’ve been working on the Chromium implementation</a> fixing several bugs and interoperability issues and getting it up to date according to the last specification changes. I took advantage of the WPT test suite to do this work and also contributed back a bunch of tests there. I also <a href="http://w3c-test.org/css/vendor-imports/mozilla/mozilla-central-reftests/contain/">imported Firefox tests</a> into Chromium to improve interop (even did a small Firefox patch as part of this work).</p>
<p>Last, it’s worth to notice that <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1150081">Firefox has been actively working on the implementation of css-contain</a> during last year (you can test it by enabling the runtime flag <code>layout.css.contain.enabled</code>). Hopefully that would bring a second browser engine shipping the spec in the future.</p>
<h3 id="wrap-up" tabindex="-1">Wrap-up <a class="header-anchor" href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">#</a></h3>
<p>CSS Containment is a nice and simple specification that can be useful to improve web rendering performance in many different use cases. It’s true that currently it’s only supported by Chromium (remember that Firefox is working on it too) and that <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=793374">more improvements and optimizations</a> can be implemented based on it, still it seems to have a huge potential.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>One more time all the work from <a href="https://www.igalia.com/"><strong>Igalia</strong></a> related to css-contain has been sponsored by <a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a> as part of our ongoing collaboration.</p>
<p>Bloomberg has some complex UIs that are taking advantage of css-contain to improve the rendering performance, in future blog posts we’ll talk about some of these cases and the optimizations that have been implemented on the rendering engine to improve them.</p>
Igalia at TPAC 20182018-10-21T00:00:00Zhttps://blogs.igalia.com/mrego/2018/10/21/igalia-at-tpac-2018/<p>Just a quick update before boarding to Lyon for <a href="https://www.w3.org/2018/10/TPAC/"><strong>TPAC 2018</strong></a>.
This year <strong>12 igalians</strong> will be at TPAC,
10 employees (Álex García Castro, Daniel Ehrenberg, Javier Fernández, Joanmarie Diggs, Martin Robinson, Rob Buis, Sergio Villar, Thibault Saunier and myself)
and 2 coding experience students (Oriol Brufau and Sven Sauleau).
We will represent <a href="https://igalia.com">Igalia</a> in the different working groups and breakout sessions.</p>
<p>On top of that <strong>Igalia will have a booth</strong> in the solutions showcase
where we’ll have a few demos of our last developments like:
<a href="https://w3c.github.io/webrtc-pc/">WebRTC</a>, <a href="https://w3c.github.io/media-source/">MSE</a>, <a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout</a>, <a href="https://drafts.csswg.org/css-align/">CSS Box Alignment</a>, <a href="https://www.w3.org/Math/draft-spec/">MathML</a>, etc.
Showing them in some low-end boards like the Raspebrry Pi
using <a href="https://webkit.org/wpe/">WPE</a> an optimized WebKit port for embedded platforms.</p>
<div style="width: fit-content;" class="center-block">
<blockquote class="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">Want to know what it takes to contribute to the development of <a href="https://twitter.com/hashtag/CSS?src=hash&ref_src=twsrc%5Etfw">#CSS</a> specifications that style the <a href="https://twitter.com/hashtag/Web?src=hash&ref_src=twsrc%5Etfw">#Web</a>? Come hear <a href="https://twitter.com/regocas?ref_src=twsrc%5Etfw">@regocas</a> (<a href="https://twitter.com/igalia?ref_src=twsrc%5Etfw">@igalia</a>) at the <a href="https://twitter.com/hashtag/w3cdevs2018?src=hash&ref_src=twsrc%5Etfw">#w3cdevs2018</a> <a href="https://twitter.com/hashtag/Meetup?src=hash&ref_src=twsrc%5Etfw">#Meetup</a> on 22 Oct. in <a href="https://twitter.com/hashtag/Lyon?src=hash&ref_src=twsrc%5Etfw">#Lyon</a>. Register at <a href="https://t.co/ul3YTbAyFj">https://t.co/ul3YTbAyFj</a> <a href="https://t.co/rFqEawPAvo">pic.twitter.com/rFqEawPAvo</a></p>— W3C Developers (@w3cdevs) <a href="https://twitter.com/w3cdevs/status/1042690437398581248?ref_src=twsrc%5Etfw">20th September 2018</a></blockquote>
</div>
<span class="caption text-muted"><a href="https://twitter.com/w3cdevs/status/1042690437398581248">Thread by W3C Developers</a> announcing my talk.</span>
<p>In my personal case I’ll be attending the <strong>CSS Working Group (CSSWG)</strong>
and <strong>Houdini Task Force</strong> meetings to follow the work
Igalia has been doing on the implementation of different standards.
In addition, I’ll be giving a talk about how to contribute
to the evolution of CSS on the <a href="https://www.w3.org/2018/10/Meetup/">W3C Developer Meetup</a>
that happens on Monday.
I’ll try to explain how easy is nowadays to provide feedback
to the CSSWG and have some influence on the different specifications.</p>
<div style="width: fit-content;" class="center-block">
<blockquote class="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">Ever wanted to work on the design, specification and implementation of new web platform features? Does participating from anywhere in the world in a flat cooperative doing free software sound good? Igalia's hiring a web platform engineer! <a href="https://t.co/75A6I0zEfe">https://t.co/75A6I0zEfe</a></p>— Daniel Ehrenberg (@littledan) <a href="https://twitter.com/littledan/status/1051836150690840578?ref_src=twsrc%5Etfw">15th October 2018</a></blockquote>
</div>
<span class="caption text-muted"><a href="https://twitter.com/littledan/status/1051836150690840578">Tweet by Daniel Ehrenberg</a> about the Web Platform position.</span>
<p>Last but not least, <a href="https://www.igalia.com/nc/about-us/form/web-platform-engineer"><strong>Igalia Web Platform Team is hiring</strong></a>,
we’re looking for people willing to work on web standards
from the implementation on the different browser engines,
to the discussions with the standard bodies or the definition of test suites.
If you’re attending TPAC and you want to work on a flat company focused on free software development,
probably you are a good candidate to join us.
Read the position announcement and don’t hesitate to talk to any of us there about that.</p>
<p>See you at TPAC tomorrow!</p>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Web Engines Hackfest 20182018-10-10T00:00:00Zhttps://blogs.igalia.com/mrego/2018/10/10/web-engines-hackfest-2018/<p><a href="https://blogs.igalia.com/mrego/2017/12/28/web-engines-hackfest-2017/">One year more</a>
and a new edition of the <a href="https://webengineshackfest.org"><strong>Web Engines Hackfest</strong></a>
was arranged by <a href="https://www.igalia.com"><strong>Igalia</strong></a>.
This time it was the tenth edition,
the first five ones using the <em>WebKitGTK+ Hackfest</em> name
and another five editions with the new broader name <em>Web Engines Hackfest</em>.
A group of igalians, including myself, have been organizing this event.
It has been some busy days for us, but we hope everyone enjoyed it
and had a great time during the hackfest.</p>
<p>This was the biggest edition ever, we were <strong>70 people</strong>
from <strong>15 different companies</strong> including Apple, Google and Mozilla
(three of the main browser vendors).
It seems the hackfest is getting more popular,
several people attending are repeating in the next editions,
so that shows they enjoy it.
This is really awesome and we’re thrilled about the future of this event.</p>
<h3 id="talks" tabindex="-1">Talks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/10/10/web-engines-hackfest-2018/">#</a></h3>
<p>The presentations are not the main part of the event,
but I think it’s worth to do a quick recap about the ones we had this year:</p>
<ul>
<li>
<p>Behdad Esfahbod and Dominik Röttsches from Google
talked about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide"><strong>Variable Fonts</strong></a>
and the implementation in Chromium.
It’s always amazing to check the possibilities of this new technology.</p>
</li>
<li>
<p>Camille Lamy, Colin Blundell and Robert Kroeger from Google
presented the <a href="https://www.chromium.org/servicification"><strong>Servicification</strong></a> effort
in the Chromium project.
Which is trying to modularize Chromium in smaller parts.</p>
</li>
<li>
<p>Žan Doberšek from Igalia gave an update on <a href="https://wpewebkit.org/"><strong>WPE</strong> WebKit</a>.
The port is now <a href="https://webkit.org/wpe/">official</a>
and it’s used everyday in more and more low-end devices.</p>
</li>
<li>
<p>Thibault Saunier from Igalia complemented Žan’s presentation
talking about the GStreamer based <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API"><strong>WebRTC</strong></a>
implementation in WebKitGTK+ and WPE ports.
Really cool to see WebRTC arriving to more browsers and web engines.</p>
</li>
<li>
<p>Antonio Gomes and Jeongeun Kim from Igalia
explained the status of <strong>Chromium on Wayland</strong>
and it’s way to become fully supported upstream.
This work will help to use Chromium on embedded systems.</p>
</li>
<li>
<p>Youenn Fablet from Apple closed the event
talking about <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API"><strong>Service Workers</strong></a>
support on WebKit.
This is a key technology for Progressive Web Apps (PWA)
and is now available in all major browsers.</p>
</li>
</ul>
<p>The slides of the talks are available on the <a href="https://webengineshackfest.org/2018/#portfolio">website</a>
and <a href="https://github.com/Igalia/webengineshackfest/wiki#scheduling">wiki</a>.
The videos will be published soon in <a href="https://www.youtube.com/channel/UCPQ8NaRSfsGei1j1meO4pNg">our YouTube channel</a>.</p>
<a href="https://www.flickr.com/photos/webhackfest/albums/72157701825574674">
<img src="https://blogs.igalia.com/mrego/files/2018/10/web-engines-hackfest-2018-pictures.jpg" alt="Some pictures from Web Engines Hackfest 2018" class="center-block">
</a>
<span class="caption text-muted">Some pictures from Web Engines Hackfest 2018 (<a href="https://www.flickr.com/photos/webhackfest/albums/72157701825574674">Flickr album</a>)</span>
<h3 id="other-topics" tabindex="-1">Other topics <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/10/10/web-engines-hackfest-2018/">#</a></h3>
<p>During the event there were breakout sessions about many different topics.
In this section I’m going to talk about the ones I’m more interested on.</p>
<ul>
<li>
<p><strong>Web Platform Tests (WPT)</strong></p>
<p>This is a key topic to improve interoperability on the web platform.
Simon Pieters started the session with an introduction to <a href="https://web-platform-tests.org/">WPT</a>
just in case someone was not aware of the repository and how it works.
For the rest of the session we discussed
the status of WPT on the different browsers.</p>
<p>Chromium and Firefox are doing
an automatic two ways (import/export) synchronization process
so the tests can be easily shared between both implementations.
On the other side WebKit still has some kind of manual process over the table,
neither import or export is totally automatic,
there are some scripts that help with the process though.</p>
<p>Apart from that, WPT is a first-class citizen in Chromium,
and the encouraged way to do new developments.
In Firefox it’s still not there,
as the test suites are not run in all the possible configurations yet
(but they’re getting there).</p>
<p>Finally the <a href="https://wpt.fyi/">WPT dashboard</a> is showing results
for the most recent unstable releases of the different browsers,
which is really cool despite being somehow hidden on the UI:
<a href="https://wpt.fyi/results/?label=experimental">https://wpt.fyi/results/?label=experimental</a>.</p>
</li>
<li>
<p><strong>LayoutNG</strong></p>
<p>Christian Biesinger gave an introduction to <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=591099">LayoutNG project</a>
in Blink, where Google is rewriting Chromium’s layout engine.
He showed the main ideas and concepts behind this effort
and navigated the code showing some examples.
According to Christian things are getting ready
and LayoutNG could be shipping in the coming months
for inline and block layout.</p>
<p>On top of questions about LayoutNG, we briefly mentioned
how other browsers are also trying to improve the layout code:
Firefox with Servo layout
and WebKit with Layout Formatting Context (LFC) aka Layout Reloaded.
It seems quite clear that the current layout engines
are getting to their limits and people are looking for new solutions.</p>
</li>
<li>
<p><strong>Chromium downstream</strong></p>
<p>Several companies (Google included) have to maintain downstream forks
Chromium with their own customizations to fit their particular use cases
and hardware platforms.</p>
<p>Colin Blundell was explaining how it was the process of maintaining
the downstream version of Chrome for iOS.
After trying many different strategies
the best solution was rebasing their changes 2-3 times per day.
That way the conflicts they had to deal with were much simpler to resolve,
otherwise it was not possible for them to cope with all the upstream changes.
Note that he mentioned that one (rotatory) full-time resource
was required to perform this job in time.</p>
<p>It was good to share the experiences of different companies
that are facing very similar issues for this kind of work.</p>
</li>
</ul>
<h3 id="thank-you-very-much" tabindex="-1">Thank you very much <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/10/10/web-engines-hackfest-2018/">#</a></h3>
<p>Just to close this post, big thanks to all the <a href="https://webengineshackfest.org/2018/#attendees">people attending the event</a>,
without you the hackfest wouldn’t have any sense at all.
People are key for this event where discussions and conversations
are one of the main parts of it.</p>
<p>Of course special acknowledgments to the speakers
for the hard work they put on their lovely talks.</p>
<p>Finally I couldn’t forget to thank the Web Engines Hackfest 2018 sponsors:
<a href="https://www.google.com"><strong>Google</strong></a> and <a href="https://www.igalia.com"><strong>Igalia</strong></a>.
Without their support this event won’t be possible.</p>
<a href="https://webengineshackfest.org/2018/#sponsors">
<img src="https://blogs.igalia.com/mrego/files/2018/10/web-engines-hackfest-2018-sponsors.png" alt="Web Engines Hackfest 2018 sponsors: Google and Igalia" class="center-block">
</a>
<span class="caption text-muted">Web Engines Hackfest 2018 sponsors: Google and Igalia</span>
<p>Looking forward for a new edition!</p>
Changes on CSS Grid Layout in percentages and indefinite height2018-08-10T00:00:00Zhttps://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/<p>This is a blog post about a <a href="https://www.chromestatus.com/feature/6708326821789696">change of behavior</a>
on <a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout</a>
related to <strong>percentage row tracks and gutters</strong>
in grid containers with <strong>indefinite height</strong>.
<a href="https://www.igalia.com/"><strong>Igalia</strong></a> has just implemented the change
in <a href="https://chromium.googlesource.com/chromium/src/+/47bfc59ccdda82e2b28817a653c792d7a606ee8e"><strong>Chromium</strong></a>
and <a href="https://trac.webkit.org/changeset/234687/webkit"><strong>WebKit</strong></a>,
which can affect some websites out there.
So here I am going to explain several things about
how percentages work in CSS and all the issues around it,
of course I will also explain the change we are doing in Grid Layout
and how to keep your previous behavior in the new version
with very simple changes.</p>
<p>Sorry for the length but I have been dealing with these issues since 2015
(probably earlier but that is the date of the <a href="https://chromium.googlesource.com/chromium/src/+/b9aa078e4db5ed03841824a08ebb645ad62d292e">first commit</a>
I found about this topic),
and I went too deep explaining the concepts.
Probably the post has some mistakes, this topic is not simple at all,
but it represents a kind of brain dump of my knowledge about it.</p>
<h3 id="percentages-and-definite-sizes" tabindex="-1">Percentages and definite sizes <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/">#</a></h3>
<p>This is the easy part, if you have an element with fixed width and height
resolving percentages on children dimensions is really simple,
they are just <strong>computed against the width or height of the containing block</strong>.</p>
<p>A simple example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> dashed thick black<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/percent-definite-size.svg" alt="Example of percentage dimensions in a containing block with definite sizes" class="center-block">
<span class="caption text-muted">Example of percentage dimensions in a containing block with definite sizes</span></p>
<p>Things are a bit trickier for percentage margins and paddings.
In <strong>inline direction</strong> (width in horizontal writing mode)
they work as expected and are resolved <strong>against the inline size</strong>.
However in <strong>block direction</strong> (height) they are not resolved against
the block size (as one can initially expect)
but <strong>against the inline size (width) of the containing block</strong>.</p>
<p>Again a very simple example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> dashed thick black<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-left</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/percent-margins-definite-size.svg" alt="Example of percentage margins in a containing block with definite sizes" class="center-block">
<span class="caption text-muted">Example of percentage margins in a containing block with definite sizes</span></p>
<p>Note that there is something more here,
in both Flexbox and Grid Layout specifications it was stated in the past
that percentage margins and paddings resolve against
their corresponding dimension, for example inline margins
against inline axis and block margins against block axis.</p>
<p>This was implemented like that in Firefox and Edge,
but Chromium and WebKit kept the usual behavior
of resolving always against inline size.
So for a while the spec had the possibility to resolve them in either way.</p>
<p>This was a source of interoperability issues between the different browsers
but finally the CSS Working Group (CSSWG) <a href="https://github.com/w3c/csswg-drafts/issues/2085">resolved to
<strong>keep the behavior for regular blocks also for flex and grid items</strong></a>.
And both Firefox and Edge modified their behavior
and all browsers have the same output nowadays.</p>
<h3 id="percentages-and-indefinite-sizes" tabindex="-1">Percentages and indefinite sizes <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/">#</a></h3>
<p>First question is, what is an <a href="https://drafts.csswg.org/css-sizing/#indefinite">indefinite size</a>?
The simple answer is that a <strong>definite size</strong> is a size
that you can calculate without taking into account the contents of the element.
An <strong>indefinite size</strong> is the opposite, in order to compute it
you need to check the contents first.</p>
<p>But then, what happens when the containing block dimensions are indefinite?
For example, a floated element has indefinite width
(unless otherwise manually specified),
a regular block has indefinite height by default (<code>height: auto</code>).</p>
<p>For <strong>heights</strong> this is very simple, <strong>percentages are directly ignored</strong>
so they have no effect on the element, they are treated as <code>auto</code>.</p>
<p>For <strong>widths</strong> it starts to get funny.
Web rendering engines have two phases to compute the width of an element.
A first one to compute the minimum and maximum intrinsic width
(basically the minimum and maximum width of its contents),
and a second one to compute the final width for that box.</p>
<p>So let’s use an example to explain this properly.
Before getting into that, let me tell you that I am going to use <a href="https://www.w3.org/Style/CSS/Test/Fonts/Ahem/">Ahem font</a>
in some examples, as it makes very easy to know the size of the text
and resolve the percentages accordingly,
so if we use <code>font: 50px/1 Ahem;</code> we know that the size
of an <code>X</code> character is a square of 50x50 pixels.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> 50px/1 Ahem<span class="token punctuation">;</span><br> <span class="token property">border</span><span class="token punctuation">:</span> solid thick black<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> XX XXXXX<br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/intrinsic-width.svg" alt="Example of intrisic width without constraints" class="center-block">
<span class="caption text-muted">Example of intrisic width without constraints</span></p>
<p>The browser first calculates the <strong>intrinsic width</strong>,
as minimum it computes 250px
(the size of the longest word, <code>XXXXX</code> in this case),
as maximum size it would be 400px
(the size of the whole text without line breaking <code>XX XXXXX</code>).
So after this phase the browser knows that the element
should have a width between 250px and 400px.</p>
<p>Then during layout phase the browser will decide the final size,
if there are no constraints imposed by the containing block
it will use the maximum intrinsic width (400px in this case).
But if you have a wrapper with a 300px width,
the element will have to use 300px as width.
If you have a wrapper smaller than the minimium intrinsic width,
for example 100px,
the element will still use the minimum 250px as its size.
This is a quick and dirty explanation,
but I hope it is useful to get the general idea.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/intrinsic-width-constraints.svg" alt="Example of intrisic width width different constraints" class="center-block">
<span class="caption text-muted">Example of intrisic width with different constraints</span></p>
<p>In order to resolve percentage widths (in the indefinite width situations)
the browser does a different thing depending on the phase.
During <strong>intrinsic size computations the percentage width is ignored</strong>
(treated as <code>auto</code> like for the heights).
But in the <strong>layout phase the width is resolved against
the intrinsic size</strong> computed earlier.</p>
<p>Trying to summarize the above paragraphs,
we can say that somehow the width is only indefinite
while the browser is computing the intrinsic width of the element,
afterwards during the actual layout
the width is considered definite
and percentages are resolved against it.</p>
<p>So now let’s see an example of indefinite dimensions and percentages:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span><br> <span class="token property">border</span><span class="token punctuation">:</span> solid thick black<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Hello world!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/percent-indefinite-size.svg" alt="Example of percentage dimensions in a containing block with indefinite sizes" class="center-block">
<span class="caption text-muted">Example of percentage dimensions in a containing block with indefinite sizes</span></p>
<p>First the size of the magenta box is calculated based on its contents,
as it has not any constraint it uses the maximum intrinsic width
(the length of <code>Hello world!</code>).
Then as you can see the width of the cyan box is 50% of the text length,
but the height is the same than if we use <code>height: auto</code>
(the default value), so the 50% height is ignored.</p>
<h3 id="back-compute-percentages" tabindex="-1">Back-compute percentages <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/">#</a></h3>
<p>For margins and paddings things work more or less the same,
remember that all of them are resolved against the inline direction
(so they are ignored during intrinsic size computation
and resolved later during layout).</p>
<p>But there is something special about this too.
Nowadays all the browsers have the same behavior
but that was not always the case, not so long time ago
(before Firefox 61 which was released past June)
things worked different in Firefox than the rest of browsers</p>
<p>Again let’s go to an example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> 50px/1 Ahem<span class="token punctuation">;</span><br> <span class="token property">border</span><span class="token punctuation">:</span> solid thick black<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><br> <span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>XXXXX<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/percent-margins-indefinite-size.svg" alt="Example of percentage margins in a containing block with indefinite sizes" class="center-block">
<span class="caption text-muted">Example of percentage margins in a containing block with indefinite sizes</span></p>
<p>In this example the size of the magenta box (the floated <code>div</code>)
is the width of the text, 250px in this case.
Then the margin is 50% of that size (125px),
making that the size of the cyan box gets reduced to 125px too,
which causes overflow.</p>
<p>But for these cases (percentage width margins and paddings
and indefinite width container)
Firefox did something extra that was called <strong>back-compute percentages</strong>.
For that it something similar to the following formula:</p>
<blockquote>
<p>Intrinsic width / (1 - Sum of percentages)</p>
</blockquote>
<p>Which for this case would be <code>250px / (1 - 0.50) = 500px</code>.
So it takes as intrinsic size of the magenta box 500px,
and then it resolves the 50% margin against it (250px).
Thanks to this there is no overflow,
and the margin is 50% of the containing block size.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/back-compute-percent-margins.svg" alt="Example of old Firefox behavior back-computing percentage margins" class="center-block">
<span class="caption text-muted">Example of old Firefox behavior back-computing percentage margins</span></p>
<p>This Firefox behavior seems really smart and avoid overflows,
but the <a href="https://github.com/w3c/csswg-drafts/issues/347">CSSWG discussed about it</a>
and decided to use the other behavior.
The main reason is what happens when you are around 100% percentages,
or if you go over that value.
The size of the box starts to be quite big
(with 90% margin it would be 2500px),
and when you go to 100% or over it you cannot use that formula
so it considers the size as infinity
(basically the viewport size in this example)
and there is discontinuity in how percentages are resolved.</p>
<p>So after that resolution <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1434478">Firefox changed their implementation</a>
and removed the back-computing percentages logic,
thus we have now interoperability in
how percentage margins and paddings are resolved.</p>
<h3 id="css-grid-layout-and-percentages" tabindex="-1">CSS Grid Layout and percentages <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/">#</a></h3>
<p>And now we arrive to CSS Grid Layout and how to resolve percentages
in two places: grid tracks and grid gutters.</p>
<p>Of course when the grid container has definite dimensions
there are no problems in resolving percentages against them,
that is pretty simple.</p>
<p>As usual the problem starts with indefinite sizes.
Originally this was not a controversial topic,
percentages for tracks were behaving similar
to percentage for dimensions in regular blocks.
A percentage column was treated as <code>auto</code> for intrinsic size computation
and later resolved against that size during layout.
For percentage rows they were treated as <code>auto</code>.
It does not mean that this is very easy to understand
(actually it took me a while),
but once you get it, it is fine and not hard to implement.</p>
<p>But when percentage support was added to grid gutters
the big party started.
Firefox was the first browser implementing them
and they decided to use the back-compute technique
explained in the previous point.
Then when we add support in Chromium and WebKit
we did something different than Firefox,
we basically mimic the behavior of percentage tracks.
As browsers started to diverge different discussions appear.</p>
<p>One of the first agreements on the topic was that <strong>both
percentage tracks and gutters should behave the same</strong>.
That invalidated the back-computing approach,
as it was not going to work fine for percentage tracks as they have contents.
In addition it was finally discarded even for regular blocks,
as commented earlier,
so this was out of the discussion.</p>
<p>However the debate moved to how percentage row tracks and gutters
should be resolved, if similar to what we do for regular blocks
or if similar to what we do for columns.
The CSSWG decided they would like to keep CSS Grid Layout
as symmetric as possible, so making <strong>row percentages
resolve against the intrinsic height</strong> would achieve that goal</p>
<p>So finally the CSSWG resolved to modify how percentage row tracks and gutters
are resolved for grid containers with indefinite height.
The two GitHub issues with the last discussions are:
<a href="https://github.com/w3c/csswg-drafts/issues/509">#509</a> and
<a href="https://github.com/w3c/csswg-drafts/issues/1921">#1921</a>.</p>
<p>Let’s finish this point with a pair of examples to understand
the change better comparing the previous and new behavior.</p>
<p>Percentage tracks:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> inline-grid<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> solid thick<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 75%<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Testing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/percent-tracks.svg" alt="Example of percentage tracks in a grid container with indefinite sizes" class="center-block">
<span class="caption text-muted">Example of percentage tracks in a grid container with indefinite sizes</span></p>
<p>Here the intrinsic size of the grid container
is the width and height of the text <code>Testing</code>,
and then the percentages tracks are resolved against that size
for both columns and rows (before that was only done for columns).</p>
<p>Percentage gutters:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> inline-grid<span class="token punctuation">;</span> <span class="token property">grid-gap</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> solid thick<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px 200px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/percent-gutters.svg" alt="Example of percentage gutters in a grid container with indefinite sizes" class="center-block">
<span class="caption text-muted">Example of percentage gutters in a grid container with indefinite sizes</span></p>
<p>In this example we can see the same thing, with the new behavior
both the percentage column and row gaps are resolved
against the intrinsic size.</p>
<h3 id="change-behavior-for-indefinite-height-grid-containers" tabindex="-1">Change behavior for indefinite height grid containers <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/">#</a></h3>
<p>For a while all browsers were behaving the same
(after Firefox dropped the back-computing approach)
so changing this behavior would imply some kind of risks,
as some websites might be affected by that and get broken.</p>
<p>For that reason we added a <a href="https://www.chromestatus.com/metrics/feature/timeline/popularity/2248"><strong>use counter</strong></a>
to track how many websites where hitting this situation,
using percentage row tracks in a indefinite height grid container.
The number is not very high, but there is an increasing trend as
<a href="https://www.chromestatus.com/metrics/feature/timeline/popularity/1693">Grid Layout is being adopted</a>
(almost 1% of websites are using it today).</p>
<p>And then <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1458902">Firefox changed the behavior for percentage row gutters</a>
to follow the new text on the spec,
so they are resolved against the intrinsic height
(this happened in version 62).
However it did not change the behavior for percentage row tracks yet.</p>
<p>This was a trigger to retake the topic and go deeper on it,
after analyzing it carefully and crafting a prototype implementation
we sent an <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/CJgcT4hR7Rk/58WfZNbWBQAJ"><strong>intent to implement and ship</strong> to <code>blink-dev</code> mailing list</a>.</p>
<p>The intent was approved, but we were requested to analyze the sites
that were hitting the use counter.
<strong>After checking 178 websites only 8 got broken</strong> due to this change,
we contacted them to try to get them fixed
explaining how to keep the previous behavior (more about this in next point).
You can find <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/CJgcT4hR7Rk/_TBhjGLfAwAJ">more details about this research in this mail</a>.</p>
<p>Apart from that we added a <strong>deprecation message in Chromium 69</strong>,
so if you have a website that is affected by this
(it does not mean that it has to get broken but
that it uses percentage row tracks in a grid container with indefinite height)
you will get the following warning in the JavaScript console:</p>
<blockquote>
<p>[Deprecation] Percentages row tracks and gutters
for indefinite height grid containers
will be resolved against the intrinsic height
instead of being treated as auto and zero respectively.
This change will happen in M70, around October 2018.
See <a href="https://www.chromestatus.com/feature/6708326821789696" style="word-wrap: break-word;">https://www.chromestatus.com/feature/6708326821789696</a>
for more details.</p>
</blockquote>
<p>Finally this week <a href="https://chromium.googlesource.com/chromium/src/+/47bfc59ccdda82e2b28817a653c792d7a606ee8e">the patch has been accepted and merged in master</a>,
so since Chromium 70.0.3516 (current Canary) you will have the new behavior.
Apart from that we also <a href="https://trac.webkit.org/changeset/234687/webkit">make the fix in WebKit</a>
that will be hopefully part of the next Safari releases.</p>
<p>In addition Firefox and Edge developers have been notified
and we have shared the tests in <a href="https://github.com/web-platform-tests/wpt/">WPT</a>
as usual,
so hopefully those implementations will get updated soon too.</p>
<h3 id="update-your-website" tabindex="-1">Update your website <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/">#</a></h3>
<p>Yes this change might affect your website or not,
even if you get the deprecation warning it can be the case
that your website is still working perfectly fine,
but in some cases it can break quite badly.
The good news is that the solution is really straightforward.</p>
<p>If you find issues in your website and you want to <strong>keep the old behavior</strong>
you just need to do the following for grid containers with indefinite height:</p>
<ul>
<li>Change percentages in <code>grid-template-rows</code> or <code>grid-auto-rows</code>
to <code>auto</code>.</li>
<li>Modify percentages in <code>row-gap</code> or <code>grid-row-gap</code> to <code>0</code>.</li>
</ul>
<p>With those changes your website will keep behaving like before.
In most cases you will realize that the percentages were unneeded
and were not doing anything useful for you,
even you would be able to drop the declaration completely.</p>
<p>One of these cases would be websites that have grid containers
with just one single row of 100% height (<code>grid-template-rows: 100%</code>),
many of the sites hitting the use counter are like this.
All these are not affected by this change,
unless the have extra implicit rows,
but the 100% is not really useful at all there,
they can simply remove the declaration.</p>
<p>Another sites that have issues are the ones that have for example two rows
that sum up 100% in total (<code>grid-template-rows: 25% 75%</code>).
These percentages were ignored before,
so the contents always fit in each of the rows.
Now the contents might not fit in each row and the results
might not be the desired ones.
Example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 25% 75%<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> solid thick<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>two lines<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Second<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/overlapping-rows.svg" alt="Example of overlapping rows in the new behavior" class="center-block">
<span class="caption text-muted">Example of overlapping rows in the new behavior</span></p>
<p>The sites that were more broken usually have several rows
and used percentages only for a few of them or for all.
And now the rows overflow the height of the grid container
and they overlap other content on the website.
There were cases like this example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> solid thick<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>First<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Second<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Third<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/overflowing-rows.svg" alt="Example of overflowing rows in the new behavior" class="center-block">
<span class="caption text-muted">Example of overflowing rows in the new behavior</span></p>
<h3 id="closing" tabindex="-1">Closing <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/">#</a></h3>
<p>This topic has been a kind of neverending story for the CSSWG,
but finally it seems we are reaching to an end.
Let’s hope this does not get any further
and things get settle down after all this time.
We hope that this change is the best solution for web authors
and everyone will be happy with the final outcome.</p>
<p>As usual I could not forget to highlight that all this work
has been done by <a href="https://www.igalia.com/"><strong>Igalia</strong></a>
thanks to <a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a> sponsorship
as part of our ongoing collaboration.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Thanks for reading that long, this ended up being
much more verbose and covering more topics than originally planned.
But I hope it can be useful to understand the whole thing.
You can find all the examples from this blog post in <a href="https://codepen.io/mrego/pen/zLMmwW?editors=1000">this pen</a>
feel free to play with them.</p>
<p>And to finish this blog post I could only do it by <a href="https://github.com/w3c/csswg-drafts/issues/509#issuecomment-386477278">quoting fantasai</a>:</p>
<blockquote>
<p>this is why I hate percentages in CSS</p>
</blockquote>
<p>I cannot agree more with her. 😇</p>
CSS Logical Properties and Values in Chromium and WebKit2018-08-08T00:00:00Zhttps://blogs.igalia.com/mrego/2018/08/08/css-logical-properties-and-values-in-chromium/<p>Since the beginning of the web we have been used to deal with physical
CSS properties for different features,
for example we all know how to set a margin in an element using
<code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code> and/or <code>margin-bottom</code>.
But with the appearance of <a href="https://drafts.csswg.org/css-writing-modes/">CSS Writing Modes</a>
features, the concepts of <em>left</em>, <em>right</em>, <em>top</em> and <em>bottom</em>
have somehow lost their meaning.</p>
<p>Imagine that you have some right-to-left (RTL) content on your website
your <em>left</em> might be probably the physical <em>right</em>,
so if you are usually setting <code>margin-left: 100px</code> for some elements,
you might want to replace that with <code>margin-right: 100px</code>.
But what happens if you have mixed content left-to-right (LTR) and RTL
at the same time, then you will need different CSS properties
to set <em>left</em> or <em>right</em> depending on that.
Similar issues are present if you think about vertical writing modes,
maybe <em>left</em> for that content is the physical <em>top</em> or <em>bottom</em>.</p>
<p><a href="https://drafts.csswg.org/css-logical/"><strong>CSS Logical Properties and Values</strong></a>
is a CSS specification that defines a set of logical (instead of physical)
properties and values to prevent this kind of issues.
So when you want to set that <code>margin-left: 100px</code>
independently of the direction and writing mode of your content,
you can directly use <code>margin-inline-start: 100px</code> that will be smart enough.
Rachel Andrew has <a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">a nice blog post</a>
explaining deeply this specification and its relevance.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2018/08/css-logical.gif" alt="Example of 'margin-inline-start: 100px' in different combinations of directions and writing modes" class="center-block">
<span class="caption text-muted">Example of <code>margin-inline-start: 100px</code> in different combinations of directions and writing modes</span></p>
<p>Oriol Brufau, an active collaborator on the CSS Working Group (CSSWG),
has been doing a <a href="https://www.igalia.com/about-us/coding-experience">Igalia Coding Experience</a>
implementing <strong>support for CSS Logical Properties and Values
in Blink and WebKit</strong>.
Maybe you were already aware of this
as my colleague Frédéric Wang already talked about it
in his last blog post reviewing
the <a href="http://frederic-wang.fr/review-of-igalia-s-web-platform-activities-H1-2018.html">activities of Igalia Web Platform team in the past semester</a>.</p>
<h3 id="some-history" tabindex="-1">Some history <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/08/css-logical-properties-and-values-in-chromium/">#</a></h3>
<p>Chromium and WebKit have had support since a long time ago
for some of the CSS logical properties defined by the spec.
But they were not using the standard names defined in the specification
but some <strong><code>-webkit-</code> prefixed</strong> ones with different names.</p>
<p>For setting the dimensions of an element Chromium and WebKit
have properties like <code>-webkit-logical-width</code> and <code>-webkit-logical-height</code>.
However CSS Logical defines <code>inline-size</code> and <code>block-size</code> instead.
There are also the equivalent ones for minimum and maximum sizes too.
These ones have been already <a href="https://codereview.chromium.org/2577363002">unprefixed at the beginning of 2017</a>
and included in Chromium since version 57 (March 2017).
In WebKit they are still only supported using the prefixed version.</p>
<p>But there are more similar properties for margins, paddings and borders
in Chromium and WebKit that use <code>start</code> and <code>end</code> for inline direction
and <code>before</code> and <code>after</code> for block direction.
In CSS Logical we have <code>inline-start</code> and <code>inline-end</code> for inline direction
and <code>block-start</code> and <code>block-end</code> for block direction,
which are much less confusing.
There was an <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/T4HsGFfxbGw/_Ld_WgBjFgAJ">attempt in the past to unprefix these properties</a>
but the work was abandoned and never completed.
These ones were still using the <code>-webkit-</code> prefix
so we decided to tackle them as the first task.</p>
<p>The post has been only talking about properties so far,
but the same thing applies to some CSS values,
that is why the spec is called <em>CSS Logical Properties and Values</em>.
For example a very well-known property like <code>float</code>
has the physical values <code>left</code> and <code>right</code>.
The spec defines <code>inline-start</code> and <code>inline-end</code>
as the logical values for <code>float</code>.
However these were not supported yet in Chromium and WebKit,
not even using <code>-webkit-</code> prefixes.</p>
<p>Firefox used to have some <code>-moz-</code> prefixed properties,
but since <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/41#CSS">Firefox 41</a>
(September 2015) it is shipping many of the standard
logical properties and values.
Firefox has been using these properties extensively in its own tests,
thus having them supported in Chromium will make easier to share them.</p>
<p>At the beginning of this work, Oriol wrote a <a href="https://docs.google.com/document/d/111ol5b6BHHIiQyOzybs8PVjn0MqKvyFzP-fwGC5-fuA/edit?usp=sharing">document</a>
in which explaining the implementation plan
where you can check the status of all these properties
in Chromium and Firefox.</p>
<h3 id="unprefix-existent-properties" tabindex="-1">Unprefix existent properties <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/08/css-logical-properties-and-values-in-chromium/">#</a></h3>
<p>We originally send an <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/48OwfwZrbvI/yIElvmbkCQAJ">intent to implement and ship</a>
for the <em>whole</em> spec, actually not all the spec but the parts
that the <a href="https://drafts.csswg.org/css-logical/#issue-b84049ec">CSSWG considered ready to implement</a>.
But Chromium community decided it was better to split it in two parts:</p>
<ul>
<li><a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/tkN-r119eNc/s5R9F2YzAwAJ">Standardize already supported properties by removing the <code>-webkit-</code> prefix</a>.
This was accepted to be shipped directly,
keeping the non-standard prefixed properties like aliases.</li>
<li><a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/48OwfwZrbvI/A1XZFGkzAwAJ">Implement the rest of the spec behind a flag</a>.</li>
</ul>
<p>The work on the first part, making the old <code>-webkit-</code> prefixed properties
to use the new standard names, has been already completed by Oriol
and it is going to be <strong>included in the upcoming release of <a href="https://blog.chromium.org/2018/08/chrome-69-beta-av1-video-decoder-css.html">Chromium 69</a></strong>.</p>
<p>In addition to the Chromium work
<a href="https://bugs.webkit.org/show_bug.cgi?id=188386">Oriol has just started to do this on WebKit too</a>.
Work is on early stages here but hopefully
things will move forward in parallel to the Chromium stuff.</p>
<h3 id="adding-support-for-the-rest" tabindex="-1">Adding support for the rest <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/08/css-logical-properties-and-values-in-chromium/">#</a></h3>
<p>Next step was to add support for the new stuff behind an experimental flag.
This work is ongoing and you can check the current status in the latest Canary
enabling the <a href="chrome://flags/#enable-experimental-web-platform-features"><em>Experimental Web Platform features</em> flag</a>.</p>
<p>So far Oriol has added support for a bunch of shorthands
and the flow-relative offset properties.
You can follow the work in <strong><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=850004">issue #850004</a>
in Chromium bug tracker</strong>.</p>
<p>We will talk more about this in a future blog post
once this task is completed
and the new logical properties and values are shipped.</p>
<h3 id="tests" tabindex="-1">Tests! <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/08/css-logical-properties-and-values-in-chromium/">#</a></h3>
<p>Of course testing is a key part of all these tasks,
and <strong><a href="https://github.com/web-platform-tests/wpt/">web-platform-tests (WPT) repository</a></strong>
plays a fundamental role to ensure interoperability
between the different implementations.
Like we have been doing in Igalia lately in all our developments
we used WPT as the primary place to store all the tests
related to this work.</p>
<p>Oriol has been creating <a href="http://w3c-test.org/css/css-logical/">tests in WPT</a>
to cover all these features.
Initial tests were based in the ones already available in Firefox
and modified them to adapt to the rest of stuff that needs to be checked.</p>
<p>Note that in Chromium all the sideways writing modes test cases
are failing as there is <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=680331">no support for sideways in Chromium yet</a>.</p>
<h3 id="plans-for-the-future" tabindex="-1">Plans for the future <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/08/css-logical-properties-and-values-in-chromium/">#</a></h3>
<p>As explained before, this is an ongoing task
but we already have some extra plans for it.
These are some of the tasks (in no particular order)
that we would like to do in the coming months:</p>
<ul>
<li>Complete the implementation of
CSS Logical Properties and Values in Chromium.
This was explained in the previous point
and is moving forward at a good pace.</li>
<li>Get rid of usage of <code>-webkit-</code> prefixed properties
in Chromium source code.
Oriol has also started this task and is currently work in progress.</li>
<li>Deprecate and remove the <code>-webkit-</code> prefixed properties.
It still too early for that but we will keep an eye on the <a href="https://www.chromestatus.com/metrics/css/popularity">metrics</a>
and do it once usage has decreased.</li>
<li>Implement it in <a href="https://bugs.webkit.org/show_bug.cgi?id=185977">WebKit</a> too,
first by unprefixing the current properties (which has been already started)
and later continuing with the new things.
It would be really nice if WebKit follows Chromium on this.
<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/7438435-css-logical-properties">Edge also has plans to add support for this spec</a>,
so that would make logical properties and values available
in all the major browsers.</li>
</ul>
<h3 id="wrap-up" tabindex="-1">Wrap up <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/08/08/css-logical-properties-and-values-in-chromium/">#</a></h3>
<p><strong>Oriol</strong> has been doing a good job here
as part of his <strong>Igalia Coding Experience</strong>.
Apart from all the new stuff that is landing in Chromium,
he has also been fixing
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=849855">some</a>
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=859879">related</a>
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=860313">bugs</a>.</p>
<p>We have just started the WebKit tasks,
but we hope all this work can be part of future Chromium
and Safari releases in the short term.</p>
<p>And that is all for now, we will keep you posted! 😉</p>
CSSWG F2F Berlin 20182018-04-16T00:00:00Zhttps://blogs.igalia.com/mrego/2018/04/16/csswg-f2f-berlin-2018/<p>Last week I was in Berlin for the <a href="https://wiki.csswg.org/planning/berlin-2018"><strong>CSS Working Group (CSSWG)</strong> face-to-face meeting</a>
representing <a href="https://www.igalia.com"><strong>Igalia</strong></a>, member of the CSSWG since last year.
Igalia has been working on the open web platform for many years,
where we help our customers with the implementation of different standards
on the open source web engines.
Inside the CSSWG we play the implementors role, providing valuable feedback
around the specifications we’re working on.</p>
<p>It was really nice to meet all the folks from the CSSWG there,
it’s amazing to be together with such a brilliant group of people in the same room.
And it’s lovely to see how easy is to talk with any of them, you all rock!</p>
<p><a href="https://twitter.com/cssrossen/status/984422232607862784"><img src="https://blogs.igalia.com/mrego/files/2018/04/csswg-f2f-berlin-2018-by-rossen-atanassov.jpg" alt="CSSWG F2F Berlin 2018 by Rossen Atanassov"></a>
<span class="caption text-muted">CSSWG F2F Berlin 2018 by <a href="https://twitter.com/cssrossen/status/984422232607862784">Rossen Atanassov</a></span></p>
<p>This is a brief post about my highlights from there, of course totally subjective and focused
on the topics I’m more interested.</p>
<h3 id="css-grid-layout" tabindex="-1">CSS Grid Layout <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/16/csswg-f2f-berlin-2018/">#</a></h3>
<p>We were discussing <a href="https://github.com/w3c/csswg-drafts/issues/2356">two</a> <a href="https://github.com/w3c/csswg-drafts/issues/2177">issues</a>
of the <a href="https://drafts.csswg.org/css-grid-1/">current specification</a> related to
the <strong>track sizing algorithm</strong> and its behavior in particular cases.
Some changes will be added in the specification to try to improve them
and we’ll need to update the implementations accordingly.</p>
<p>On top of that, we discussed about the <a href="https://drafts.csswg.org/css-grid-2/"><strong>Level 2</strong> of the spec</a>.
It’s already defined that this next level will include the following features:</p>
<ul>
<li>
<p>The awaited <a href="https://github.com/w3c/csswg-drafts/issues/2280"><strong>subgrids</strong> feature</a>:
There was the possibility of allowing subgrids in both axis (<em>dual-axis</em>) or only in one of them (<em>per-axis</em>),
note that the <em>per-axis</em> approach covers the <em>dual-axis</em> if you define the subgrid in both axis.</p>
<p>There are clear uses cases for the <em>per-axis</em> approach but the main doubt was
about how hard it’d be to implement.
<a href="https://github.com/w3c/csswg-drafts/issues/2280#issuecomment-380546425">Mats Palmgren from Mozilla posted a comment on the issue</a>
explaining that he has just created a prototype for the feature following the <em>per-axis</em> idea,
so the CSSWG resolved to remove the <em>dual-axis</em> one from the spec.</p>
</li>
<li>
<p>And <a href="https://github.com/w3c/csswg-drafts/issues/1116"><strong>aspect-ratio controlled gutters</strong></a>:
Regarding this topic, the CSSWG decided to add a new <code>ar</code> unit.
We didn’t discuss anything more but we need to decide what we’ll do in the situations
where there’s no enough free space to fulfill the requested aspect-ratio,
should we ignore it or overflow in that case?</p>
<p>Talking to <a href="https://twitter.com/rachelandrew">Rachel Andrew</a> about the issue, she was not completely sure
of what would be the preferred option from the authors point of view.
<a href="https://github.com/w3c/csswg-drafts/issues/1116#issuecomment-381517688">I’ve just added some examples to the issue so we can discuss about them there and gather more feedback</a>,
please share your thoughts.</p>
</li>
</ul>
<h3 id="tests" tabindex="-1">Tests <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/16/csswg-f2f-berlin-2018/">#</a></h3>
<p>This was a <a href="https://github.com/w3c/web-platform-tests/issues/10053">discussion I wanted to have with the CSSWG people</a>
in order to understand better the current situation and possible next steps for the CSSWG test suites.</p>
<p>Just to add some context, the CSSWG test suites are now part of the <a href="https://github.com/w3c/web-platform-tests/">web-platform-tests (WPT) repository</a>.
This repository is being used by most browser vendors to share tests, including tests for new CSS features.
For example, at Igalia we’re currently using WPT test suites in all our developments.</p>
<p>The CSSWG uses the <a href="http://test.csswg.org/harness/"><strong>CSS Test Harness</strong></a> tool which has a build system
that adds some special requirements for the test suites.
One of them causes that we need to duplicate some files in the repository, which is not nice at all.</p>
<p>Several people in the CSSWG still rely on this tool mainly for two things:</p>
<ul>
<li>Run manual tests and store their results:
Some CSS features like media queries or scrolling are hard to automate when writing tests,
so several specs have manual tests.
Probably <a href="http://test.csswg.org/harness/">WebDriver</a> can help to automate this kind of tests, maybe not all though.</li>
<li>Extract status reports:
To verify that a spec fulfills the CR exit criteria, the current tooling has some nice reports,
it also provides info about the test coverage of the spec.</li>
</ul>
<p>So we cannot get rid of the CSS Test Harness system at this point. We discussed about possible solutions
but none of them were really clear, also note that the lack of funding for this kind of work
makes it harder to move things forward.</p>
<p>I still believe the way to go would be to improve the <a href="https://wpt.fyi/">WPT Dashboard (wpt.fyi)</a>
so it can support the 2 features listed above.
If that’s the case maybe the specific CSS Test Harness stuff won’t be needed anymore,
thus the weird requirements for people working on the test suites will be gone,
and there would be a single tool for all the tests from the different working groups.</p>
<p>As a side note wpt.fyi needs some infrastructure improvements,
for example Microfost was not happy as <a href="https://www.w3.org/Style/CSS/Test/Fonts/Ahem/"><code>Ahem</code> font</a>
(which is used a lot in CSS tests suites) is still <a href="https://github.com/web-platform-tests/results-collection/issues/218">not installed on the Windows virtual machines</a>
that extract test results for wpt.fyi.</p>
<h3 id="floats-floats-floats" tabindex="-1">Floats, floats, floats <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/16/csswg-f2f-berlin-2018/">#</a></h3>
<p>People are using floats to simulate <a href="https://drafts.csswg.org/css-shapes/">CSS Shapes</a> on browsers
that don’t have support yet.
That is causing that some special cases related to floats happen more frecuently,
and it’s hard to decide what’s the best thing to do on them.</p>
<p>The <a href="https://github.com/w3c/csswg-drafts/issues/2452">CSSWG was discussing what would be the best solution</a>
when the non-floated content doesn’t fit in the space left by the floated elements.
The problem is quite complex to explain, but imagine the following picture where you have several floated elements.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2018/04/floats-issue.svg" alt="An example of float layout" class="center-block">
<span class="caption text-muted">An example of float layout</span></p>
<p>In this example there are a few floated elements restricting the area where the content can be painted,
if the browser needs to find the place to add a <a href="https://drafts.csswg.org/css-display/#bfc">BFC</a> (like a table)
it needs to decide where to place it avoiding overlapping any other floats.</p>
<p>There was a long discussion, and it seems the best choice would be that the browser tests all the options
and if there’s no overlapping then puts the table there (basically <em>Option 1</em> in the <a href="https://lists.w3.org/Archives/Public/www-archive/2018Apr/0001.html">linked illustration</a>).
Still there are concerns about performance, so there’s still more work to be done here.
As a result of this discussion a new CSS Floats specification will be created
to describe the expected behavior in this kind of scenarios.</p>
<p><a href="https://twitter.com/notwaldorf">Monica Dinculescu</a> created a <a href="https://float-layout.glitch.me/">really cool demo</a>
to explain how float layout works,
with the help of <a href="https://twitter.com/bfgeek">Ian Kilpatrick</a> who knows it pretty well as he has been dealing with lots of corner cases
while working in <a href="https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/core/layout/ng/README.md">LayoutNG</a>.</p>
<h3 id="typo-labs" tabindex="-1">TYPO Labs <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/16/csswg-f2f-berlin-2018/">#</a></h3>
<p>The members of the CSSWG were invited to the co-located <a href="https://www.typotalks.com/labs/">TYPO Labs event</a>.
I attended on Friday when <a href="https://twitter.com/fantasai">Elika (fantasai)</a>, <a href="https://twitter.com/Litherum">Myles</a> and <a href="https://twitter.com/cssrossen">Rossen</a>
gave a <a href="https://www.youtube.com/watch?v=zUIMdIF694Q">talk</a>.
It was nice to see that CSS Grid Layout was mentioned in the first talk of the day, as an useful tool for typographers.
Variable fonts and Virtual Reality were clearly hot topics in several talks.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2018/04/csswg-at-typo-labs.jpg" alt="Elika (fantasai), Myles and Rossen in the CSSWG talk at TYPO Labs">
<span class="caption text-muted">Elika (fantasai), Rossen and Myles in the CSSWG talk at TYPO Labs</span></p>
<p>It’s funny that the last time I was in Berlin was 10 years ago for a <a href="https://t3con08.typo3.org/">conference related to TYPO3</a>,
totally unrelated but with a similar name. 😄</p>
<h3 id="other" tabindex="-1">Other <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/16/csswg-f2f-berlin-2018/">#</a></h3>
<ul>
<li><a href="https://twitter.com/jihyerish">Jihye Hong</a> and <a href="https://twitter.com/frivoal">Florian Rivoal</a> were presenting the <a href="https://wicg.github.io/spatial-navigation/"><strong>Spatial Navigation</strong> spec</a>.
It seems LGE is quite interested in moving this forward,
but the feeling from the CSSWG discussion is that the spec still needs more work to get consolidated.</li>
<li><a href="https://drafts.csswg.org/cssom/"><strong>CSS Object Model (CSSOM)</strong> spec</a> has a new and shiny editor,
<a href="https://twitter.com/ecbos_">Emilio Cobos</a> is taking over it.
I’m sure this will help to unblock some of the <a href="https://github.com/w3c/csswg-drafts/issues/1033">old</a> <a href="https://github.com/w3c/csswg-drafts/issues/1041">issues</a>
we’re waiting for before fixing some Grid Layout related stuff in Blink and WebKit.</li>
</ul>
<p><img src="https://blogs.igalia.com/mrego/files/2018/04/berlin-2018.png" alt="Some pictures of Berlin">
<span class="caption text-muted">Some pictures of Berlin</span></p>
<p>And that’s mostly all that I can remember now, I’m sure I’m missing many other important things.
It was a fantastic week and I even find some time for walking around Berlin as the weather was really pleasant.</p>
Getting rid of "grid-" prefix on CSS Grid Layout gutter properties2018-04-04T00:00:00Zhttps://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/<p>Early this year I was working on <a href="https://github.com/w3c/csswg-drafts/issues/1696">unprefixing the CSS Grid Layout gutter properties</a>.
The properties were originally named <code>grid-column-gap</code> and <code>grid-row-gap</code>,
together with the <code>grid-gap</code> shorthand.
The CSS Working Group (CSSWG) decided to remove the <code>grid-</code> prefix
from these properties last summer, so they could be extended to be used
in other layout models like Flexbox.</p>
<p>I was not planning to write a blog post about this, but the task ended up
becoming something more than just renaming the properties,
so this post describes what it took to implement this.
Also people got quite excited about the possibility of animating grid gutters
when I announced that <a href="https://twitter.com/regocas/status/960631270140203008">this was ready on Twitter</a>.</p>
<blockquote class="twitter-tweet tw-align-center" data-lang="es"><p lang="en" dir="ltr">CSS Grid Layout gutter properties are now unprefixed in <a href="https://twitter.com/ChromiumDev?ref_src=twsrc%5Etfw">@ChromiumDev</a> & <a href="https://twitter.com/webkit?ref_src=twsrc%5Etfw">@WebKit</a> joining <a href="https://twitter.com/MSEdgeDev?ref_src=twsrc%5Etfw">@MSEdgeDev</a>. Only <a href="https://twitter.com/firefox?ref_src=twsrc%5Etfw">@Firefox</a> is missing.<br>We also make them animatable as that was missing before by mistake.<br>Patches by <a href="https://twitter.com/igalia?ref_src=twsrc%5Etfw">@Igalia</a> have just landed today thanks to <a href="https://twitter.com/TechAtBloomberg?ref_src=twsrc%5Etfw">@TechAtBloomberg</a> support. Enjoy!😀 <a href="https://t.co/hLb7uXsunj">pic.twitter.com/hLb7uXsunj</a></p>— Manuel Rego (@regocas) <a href="https://twitter.com/regocas/status/960631270140203008?ref_src=twsrc%5Etfw">5 de febrero de 2018</a></blockquote>
<h3 id="the-task" tabindex="-1">The task <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/">#</a></h3>
<p>So the theory seems pretty simply, we currently have 3 properties
with the <code>grid-</code> prefix and we want to remove it:</p>
<ul>
<li><code>grid-column-gap</code> becomes <code>column-gap</code>,</li>
<li><code>grid-row-gap</code> becomes <code>row-gap</code> and</li>
<li><code>grid-gap</code> becomes <code>gap</code>.</li>
</ul>
<p>But <code>column-gap</code> is already an existent property,
defined by the <a href="https://drafts.csswg.org/css-multicol/#column-gap">Multicolumn spec</a>,
which has been around for a long time.
So we cannot just create a new property, but we have to make it work
also for Grid Layout, and be sure that the syntax is equivalent.</p>
<h3 id="animatable-properties" tabindex="-1">Animatable properties <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/">#</a></h3>
<p>When I started to test Multicol <code>column-gap</code> I realized it was animatable,
however our implementations (Blink and WebKit)
of the Grid Layout gutter properties were not.
We’d need to make our properties animatable if we want to remove the prefixes.</p>
<p>More on that, I found <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=798338">a bug on Multicol <code>column-gap</code> animation</a>,
as its default computed value is <code>normal</code>, and it shouldn’t be possible
to animate it.
This was fixed quickly by <a href="https://twitter.com/mstensho">Morten Stenshorne</a> from Google.</p>
<p>Making the properties animatable is not complex at all, both Blink and WebKit
have everything ready to make this task easy for properties like the gutter ones
that represent lengths.
So I decided to do this as part of the unprefixing patch,
instead of something separated.</p>
<p><video src="https://blogs.igalia.com/mrego/files/2018/04/css-grid-gutters-animation.webm" alt="CSS Grid Layout gutters animation example" style="width: 100%;" autoplay="" controls="" loop="">
</video>
<span class="caption text-muted">CSS Grid Layout gutters animation example (<a href="https://blogs.igalia.com/mrego/files/2018/04/css-grid-gutters-animation.html">check it live</a>)</span></p>
<h3 id="percentages" tabindex="-1">Percentages <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/">#</a></h3>
<p>But there was something else, the Grid gutter properties
accept percentage values, however <code>column-gap</code> hadn’t that support yet.
So I <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=799413">added percentage support to <code>column-gap</code> for multicolumn</a>,
as a preliminary patch for the unprefixing one.</p>
<p>There has been <a href="https://github.com/w3c/csswg-drafts/issues/509">long discussions in the CSSWG about how to resolve percentages
on gutter properties</a>.
The spec has recently changed so these properties
should be resolved to zero for <em>content-based</em> containers.
However my patch is not implementing that, as we don’t believe
there’s an easy way to support something like that in most of the web engines,
and Blink and WebKit are not exceptions.
Our patch follows what Microsoft Edge does in these cases,
and resolves the percentage gaps like it does for percentage widths or heights.
And the Firefox implementation that has just landed this week does the same.</p>
<p><video src="https://blogs.igalia.com/mrego/files/2018/04/css-multicol-percent-column-gap.webm" alt="CSS Multi-column percentage column-gap example" style="width: 100%;" autoplay="" controls="" loop="">
</video>
<span class="caption text-muted">CSS Multi-column percentage <code>column-gap</code> example (<a href="https://blogs.igalia.com/mrego/files/2018/04/css-multicol-percent-column-gap.html">check it live</a>)</span></p>
<p>I guess we’ll still have some extra discussions about this topic in the CSSWG,
but percentages themselves deserve their own blog post.</p>
<h3 id="implementation" tabindex="-1">Implementation <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/">#</a></h3>
<p>Once all the previous problems got solved, I landed the patches
related to unprefixing the gutter properties in both <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=761904">Blink</a>
and <a href="https://bugs.webkit.org/show_bug.cgi?id=180290">WebKit</a>.
So you can use the unprefixed version since Chrome 66.0.3341.0
and Safari Technology Preview 50.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid</span><span class="token punctuation">:</span> 100px 50px / 300px 200px<span class="token punctuation">;</span><br> <span class="token property">column-gap</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span> <span class="token property">row-gap</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Item 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/04/grid-unprefixed-gutter-properties.svg" alt="A simple Grid Layout example using the unprefixed gutter properties" class="center-block">
<span class="caption text-muted">A simple Grid Layout example using the unprefixed gutter properties</span></p>
<p>Note that as specified in the spec, the previous prefixed properties
are still valid and will be kept as an alias to avoid breaking existent content.</p>
<p>Also it’s important to notice that now the <code>gap</code> shorthand applies
to Multicol containers too, as it sets the value of <code>column-gap</code> longhand
(together with <code>row-gap</code> which would be ignored by Multicol).</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">column-count</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>First column<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Second column<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/04/multicol-gap-prpoperty.svg" alt="Multicolumn example using gap property" class="center-block">
<span class="caption text-muted">Multicolumn example using <code>gap</code> property</span></p>
<h3 id="web-platform-tests" tabindex="-1">Web Platform Tests <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/">#</a></h3>
<p>As usual in our last developments, we have been using
<a href="https://github.com/w3c/web-platform-tests/"><code>web-platform-tests</code> repository</a>
for all the tests related to this work.
As a result of this work we have now <a href="http://w3c-test.org/css/css-align/gaps/">16 new tests</a>
that verify the support of these properties,
including tests for animations stuff too.</p>
<p>Running those tests on the different browsers, I realized there was
an inconsistency between css-align and css-multicol specifications.
Both specs define the <code>column-gap</code> property, but the computed value
was different.
I raised <a href="https://github.com/w3c/csswg-drafts/issues/2294">a CSSWG issue</a>
that has been recently solved,
so that the computed value for <code>column-gap: normal</code> should still be <code>normal</code>.
This causes that the property won’t be animatable from <code>normal</code> to other values
as explained before.</p>
<p>This is the summary of the status of these tests in the main browser engines:</p>
<ul>
<li><strong>Blink and WebKit</strong>: They pass all the tests and follow last CSSWG resolution.</li>
<li><strong>Edge</strong>: Unprefixed properties are available since version 41.
Percentage support is interoperable with Blink and WebKit.
The computed value of <code>column-gap: normal</code> is not <code>normal</code> there,
so this needs to get updated.</li>
<li><strong>Firefox</strong>: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1398482">It doesn’t have support for the unprefixed properties yet</a>,
however the default computed value is <code>normal</code> like in Blink and WebKit.
But <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1398537">Multicol <code>column-gap</code> percentage support has just been added</a>.
Note that there are already patches on review for this issue,
so hopefully they’ll be merged in the coming days.</li>
</ul>
<h3 id="conclusions" tabindex="-1">Conclusions <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/">#</a></h3>
<p>The task is completed and everything should be settled down at this point,
you can start using these unprefixed properties, and it seems that Firefox
will join the rest of browser by adding this support very soon.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Last, but not least, this is again part of the ongoing collaboration between
<a href="https://www.igalia.com/"><strong>Igalia</strong></a> and
<a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a>.
I don’t mind to repeat myself over and over, but it’s really worth
to highlight the support from Bloomberg in the CSS Grid Layout development,
they have been showing to the world that an external company can directly influence
in the new specifications from the standard bodies
and implementations by the browser vendors.
Thank you very much!</p>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>Finally and just as a heads-up, I’ll be in Berlin next week
for the <a href="https://wiki.csswg.org/planning/berlin-2018">CSSWG F2F meeting</a>.
I’m sure we’ll have interesting conversations about CSS Grid Layout
and many other topics there.</p>
"display: contents" is coming2018-01-11T00:00:00Zhttps://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/<p>Yes, <strong><code>display: contents</code></strong> is enabled by default in <a href="https://chromium.googlesource.com/chromium/src/+/27c0ee55811678e4896cf0a07f8c4728bd7a58f2">Blink</a>
and <a href="https://trac.webkit.org/changeset/224822/webkit">WebKit</a>
and it will be probably shipped in Chrome 65 and Safari 11.1.
These browsers will join <a href="https://developer.mozilla.org/en-US/Firefox/Releases/37">Firefox that is shipping it since version 37</a>,
which makes Edge the only one missing the feature (<a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10938981-implement-the-box-generation-keywords-from-css-dis">you can vote for it!</a>).</p>
<p>Regarding this I’d like to highlight that the work to support it in Chromium
was started by <a href="https://twitter.com/ecbos_">Emilio Cobos</a> during his
<a href="https://www.igalia.com/about-us/coding-experience"><strong>Igalia Coding Experience</strong></a>
that took place from fall 2016 to summer 2017.</p>
<p>You might (or not) remember <a href="https://blogs.igalia.com/mrego/2016/02/25/igalia-coding-experience-on-web-engines/">a blog post from early 2016</a>
where I was talking about the Igalia Coding Experience program and some ideas
of tasks to be done as part of the Web Platform team.
One of the them was <code>display: contents</code> which is finally happening.</p>
<h3 id="what-is-display-contents" tabindex="-1">What is <code>display: contents</code>? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/">#</a></h3>
<p>This new value for the <code>display</code> property allows you to somehow remove
an element from the <em>box tree</em> but still keep its contents.
The proper definition from the <a href="https://drafts.csswg.org/css-display/#valdef-display-contents">spec</a>:</p>
<blockquote>
<p>The element itself does not generate any boxes,
but its children and pseudo-elements still generate boxes
and text runs as normal.
For the purposes of box generation and layout, the element must be treated
as if it had been replaced in the element tree by its contents
(including both its source-document children and its pseudo-elements,
such as <code>::before</code> and <code>::after</code> pseudo-elements, which are generated
before/after the element’s children as normal).</p>
</blockquote>
<p>A simple example will help to understand it properly:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> contents<span class="token punctuation">;</span><br> <span class="token property">background</span><span class="token punctuation">:</span> magenta<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> solid thick black<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><br> <span class="token property">color</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> 30px/1 Monospace<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>foobar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><code>display: contents</code> makes that the <code>div</code> doesn’t generate any box,
so its background, border and padding are not renderer.
However the inherited properties like <code>color</code> and <code>font</code> have effect
on the child (<code>span</code> element) as expected.</p>
<p>For this example, the final result would be something like:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> cyan<span class="token punctuation">;</span> <span class="token property">font</span><span class="token punctuation">:</span> 30px/1 Monospace<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>foobar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></code></pre>
<div style="display: flex; justify-content: space-around;">
<div style="margin: 0px 20px;">
<h4 style="text-align: center;">Unsupported</h4>
<div style="background: magenta; border: solid thick black; padding: 20px;
color: cyan; font: 30px/1 Monospace;">
<span style="background: black;">foobar</span>
</div>
</div>
<div style="margin: 0px 20px;">
<h4 style="text-align: center;">Actual</h4>
<div style="display: contents;
background: magenta; border: solid thick black; padding: 20px;
color: cyan; font: 30px/1 Monospace;">
<span style="background: black;">foobar</span>
</div>
</div>
<div style="margin: 0px 20px;">
<h4 style="text-align: center;">Supported</h4>
<span style="background: black; color: cyan; font: 30px/1 Monospace;">foobar</span>
</div>
</div>
<span class="caption text-muted">Unsupported vs actual (in your browser) vs supported output for the previous example</span>
<p>If you want more details <a href="https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/">Rachel Andrew has a nice blog post about this topic</a>.</p>
<h3 id="css-grid-layout-and-display-contents" tabindex="-1">CSS Grid Layout & <code>display: contents</code> <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/">#</a></h3>
<p>As you could expect from a post from myself this is somehow related
to CSS Grid Layout. 😎
<code>display: contents</code> can be used as a replacement of <a href="https://drafts.csswg.org/css-grid-2/#valdef-display-subgrid"><em>subgrids</em></a>
(which are not supported by any browser at this point) in some use cases.
However <a href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/#use-cases"><em>subgrids</em> are still needed for other scenarios</a>.</p>
<p>The canonical example for <a href="https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">Grid Layout
auto-placement</a>
is a simple form like:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token selector">form</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">label</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">input</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span><br> <span class="token selector">button</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Send<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p><img src="https://blogs.igalia.com/mrego/files/2018/01/grid-form-list-display-contents.svg" alt="A simple form formatted with CSS Grid Layout" class="center-block">
<span class="caption text-muted">A simple form formatted with CSS Grid Layout</span></p>
<p>However this is not the typical HTML of a form, as you usually want to use
a list inside, so people using screen readers will know how many fields
they have to fill in your form beforehand.
So the HTML looks more like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Send<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>With <code>display: contents</code> you’ll be able to have the same layout
than in the first case with a similar CSS:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> contents<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">label</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">input</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">button</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
<p>So this is really nice, now when you convert your website
to start using CSS Grid Layout, you would need less changes on your HTML
and you won’t need to remove some HTML that is really useful,
like the list in the previous example.</p>
<h3 id="chromium-implementation" tabindex="-1">Chromium implementation <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/">#</a></h3>
<p>As I said in the introduction, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1105369">Firefox shipped <code>display: contents</code>
three years ago</a>,
however Chromium didn’t have any implementation for it.
Igalia as CSS Grid Layout implementor was interested in having support
for the feature as it’s a handy solution for several Grid Layout use cases.</p>
<p>The proposal for the Igalia Coding Experience was
the <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/nAUxrvJeNLQ/-e1zF6YkBAAJ">implementation of <code>display: contents</code> on Blink</a>
as the main task.
Emilio did an awesome job and managed to implement most of it,
reporting issues to CSS Working Group and other browsers as needed,
and writing tests for the <code>web-platform-tests</code> repository
to ensure interoperability between the implementations.</p>
<p>Once the Coding Experience was over there were still
a few missing things to be able to enable <code>display: contents</code>
by default.
<a href="https://twitter.com/runeLi">Rune Lillesveen</a> (Google and previously Opera)
who was helping during the whole process with the reviews,
finished the work and shipped it past week.</p>
<h3 id="webkit-implementation" tabindex="-1">WebKit implementation <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/">#</a></h3>
<p>WebKit already had an <a href="https://bugs.webkit.org/show_bug.cgi?id=157477">initial support for <code>display: contents</code></a>
that was only used internally by Shadow DOM implementation
and not exposed to the end users, neither supported by the rest of the code.</p>
<p>We reactivated the work there too, he didn’t have time to finish
the whole thing but later <a href="https://twitter.com/anttikoivisto">Antti Koivisto</a> (Apple)
completed the work and enabled it by default on trunk by November 2017.</p>
<h3 id="conclusions" tabindex="-1">Conclusions <a class="header-anchor" href="https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/">#</a></h3>
<p><a href="https://www.igalia.com"><strong>Igalia</strong></a> is one of the top external contributors
on the open web platform projects.
This put us on a position that allows us to implement new features
in the different open source projects, thanks to our community involvement
and internal knowledge after several years of experience on the field.
Regarding <code>display: contents</code> implementation,
this feature probably wouldn’t be available today in Chromium and WebKit
without Igalia’s support, in this particular case through a <strong>Coding Experience</strong>.</p>
<p>We’re really happy about the results of the Coding Experience
and we’re looking forward to repeat the success story in the future.</p>
<p>Of course, all the merit goes to <strong>Emilio</strong>, who is an impressive engineer
and did a great job during the Coding Experience.
As part of this process he got committer privileges in both
Chromium and WebKit projects. Kudos!</p>
<p>Last, but not least, thanks to Antti and Rune for finishing the work
and making <code>display: contents</code> available to WebKit and Chromium users.</p>
Web Engines Hackfest 20172017-12-28T00:00:00Zhttps://blogs.igalia.com/mrego/2017/12/28/web-engines-hackfest-2017/<p>One year more Igalia organized, hosted and sponsored a new edition of
the <a href="https://webengineshackfest.org/"><strong>Web Engines Hackfest</strong></a>.
This is my usual post about the event focusing on the things
I was working on during those days.</p>
<h3 id="organization" tabindex="-1">Organization <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/12/28/web-engines-hackfest-2017/">#</a></h3>
<p>This year I wanted to talk about this because being part of the organization
in an event with <a href="https://webengineshackfest.org/#attendees"><strong>60 people</strong></a>
is not that simple and take some time.
I’m one of the members of the organization which ended up meaning that
I was really busy during the 3 days of the event trying to make the life
of all the attendees as easy as possible.</p>
<p>Yeah, this year we were 60 people, the biggest number ever!
Note that last year we were 40 people, so it’s clear the interest in the event
is growing after each edition, which is really nice.</p>
<p>For the first time we had <strong>conference badges</strong>, with so many faces
it was going to be really hard to put names to all of them.
In addition we had pronouns stickers and different lanyard color
for the people that don’t want to appear in the multimedia material
published during and after the event.
I believe all these things worked very well and we’ll be repeating
for sure in future editions.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2017/12/web-engines-hackfest-badge.jpg" alt="My Web Engines Hackfest 2017 conference badge" class="center-block">
<span class="caption text-muted">My Web Engines Hackfest 2017 conference badge</span></p>
<p>The survey after the event showed an awesome <strong>positive feedback</strong>,
so we’re really glad that you have enjoined the hackfest.
I was specially happy seeing how many parallel discussions
were taking place all around the office in small groups of people.</p>
<h3 id="talks" tabindex="-1">Talks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/12/28/web-engines-hackfest-2017/">#</a></h3>
<p>The main focus of the event is the different discussions that happen
between people about many different topics. This together with the possibility
to hack with some people from other browser engines and/or other companies
make the hackfest an special event.</p>
<p>On top of that, we arrange a few talks that are usually quite interesting.
The talks from this year can be found on a <a href="https://www.youtube.com/playlist?list=PL4sEzdAGvRgDWjpudPPN38xjUpbXfOiW4"><strong>YouTube playlist</strong></a>
(thanks <a href="https://twitter.com/jsuarezr">Juan</a> for helping with
the video editing).
This year the talks covered the following topics:
<a href="https://youtu.be/mlLycN8LqD8?list=PL4sEzdAGvRgDWjpudPPN38xjUpbXfOiW4">Web Platform Tests</a>,
<a href="https://youtu.be/lGo7nOx4A24?list=PL4sEzdAGvRgDWjpudPPN38xjUpbXfOiW4">zlib optimizations</a>,
<a href="https://youtu.be/efmYPFHnaSM?list=PL4sEzdAGvRgDWjpudPPN38xjUpbXfOiW4">Chromium on Wayland</a>,
<a href="https://youtu.be/58qyMBl9e28?list=PL4sEzdAGvRgDWjpudPPN38xjUpbXfOiW4">BigInt</a>,
<a href="https://youtu.be/8AbO9NrLtbQ?list=PL4sEzdAGvRgDWjpudPPN38xjUpbXfOiW4">WebRTC</a> and
<a href="https://youtu.be/HSDKBS1BR1k?list=PL4sEzdAGvRgDWjpudPPN38xjUpbXfOiW4">WebVR</a>.</p>
<a href="https://www.flickr.com/photos/webhackfest/albums/72157661175155978">
<img src="https://blogs.igalia.com/mrego/files/2017/12/web-engines-hackfest-2017.jpg" alt="Some pictures of the Web Engines Hackfest 2017" class="center-block">
</a>
<span class="caption text-muted">Some pictures of the Web Engines Hackfest 2017</span>
<h3 id="css-grid-layout" tabindex="-1">CSS Grid Layout <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/12/28/web-engines-hackfest-2017/">#</a></h3>
<p>During the hackfest I participated in several breakout sessions,
like for example one about <a href="https://github.com/w3c/web-platform-tests">Web Platform Tests</a>
or another one about <a href="https://www.w3.org/TR/MathML/">MathML</a>.
However as usual on the last years my main was related to <a href="https://drafts.csswg.org/css-grid/"><strong>CSS Grid Layout</strong></a>.
In this case we took advantage to discuss several topics from which
I’m going to highlight two:</p>
<h4 id="chromium-bug-on-input-elements-which-only-happens-on-mac" tabindex="-1">Chromium bug on input elements which only happens on Mac <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/12/28/web-engines-hackfest-2017/">#</a></h4>
<p>This is about <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=727076">Chromium bug #727076</a>,
where the input elements that are grid items get collapsed/shrunk when
the user starts to enter some text.
This was a tricky issue only reproducible on Mac platform that was hitting us
for a while, so we needed to find a solution.</p>
<p>We had some long discussions about this and finally my colleague <a href="https://twitter.com/lajava77">Javi</a>
found the root cause of the problem and finally fixed it, kudos!</p>
<p>This bug is a quite complex and tight to some Chromium specific implementation bits.
The summary is that in Mac platform you can get requests about
the intrinsic (preferred) width of the grid container at random times,
which means that you’re not sure a full layout will be performed afterwards.
Our code was not ready for that, as we were always expecting a full layout
after asking for the intrinsic width.</p>
<h4 id="percentage-tracks-and-gutters" tabindex="-1">Percentage tracks and gutters <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/12/28/web-engines-hackfest-2017/">#</a></h4>
<p>This is a neverending topic that has been discussed in the CSS WG for a long
time. There are 2 different things so let’s go one by one.</p>
<p>First, how percentage tracks are resolved when the width/height of
a grid container is indefinite.
So far, this was not symmetric but was working like in regular blocks:</p>
<ul>
<li>Percentage columns work like percentage widths: This means that
they are treated as <code>auto</code> during intrinsic size computation
and later resolved during layout.</li>
<li>Percentage rows work like percentage heights: In this case they are treated
as <code>auto</code> and never resolved.</li>
</ul>
<p>However the CSS WG decided to change this and make both symmetric,
so percentage rows will work like percentage columns.
This hasn’t been implemented by any browser yet, and all of them
have interoperability with the previous status.
We’re not 100% sure about the complexity this could bring and
before changing current behavior we’re going to <a href="https://www.chromestatus.com/metrics/feature/timeline/popularity/2248">gather some usage statistics</a>
to verify this won’t break a lot o content out there.
We’d also love to <a href="https://github.com/w3c/csswg-drafts/issues/1921#issuecomment-347993853">get feedback from other implementors about this</a>.
More information about this topic can be found on <a href="https://github.com/w3c/csswg-drafts/issues/1921">CSS WG issue #1921</a>.</p>
<p>Now let’s talk about the second issue, how percentage gaps work.
The whole discussion can be checked on <a href="https://github.com/w3c/csswg-drafts/issues/509">CSS WG issue #509</a>
that I started back in TPAC 2016.
For this case there are no interoperability between browsers
as Firefox has its own solution of back-computing percentage gaps,
the rest of browsers have the same behavior in line with
the percentage tracks resolution, but again it is not symmetric:</p>
<ul>
<li>Percentage column gaps contribute zero to intrinsic width computation
and are resolved as percent during layout.</li>
<li>Percentage row gaps are treated always as zero.</li>
</ul>
<p>The CSS WG resolved to modify this behavior to make them both symmetric,
in this case choosing the row gaps behavior as reference. So browsers
will need to change how column gaps work to avoid resolving the percentages
during layout.
We don’t know if we could detect this situation in Blink/WebKit
without quite complex changes on the engine, and we’re waiting for <a href="https://github.com/w3c/csswg-drafts/issues/509#issuecomment-349294980">feedback
from other implementors on that regard</a>.</p>
<p>So I won’t say any of those topics are definitely closed yet,
and it won’t be unexpected if some other changes happen in the future
when the implementations try to catch up with the spec changes.</p>
<h3 id="thanks" tabindex="-1">Thanks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/12/28/web-engines-hackfest-2017/">#</a></h3>
<p>To close this blog post let’s say thanks to everyone that come
to our office and participated in the event, the <strong>Web Engines Hackfest</strong>
won’t be possible without such a great bunch of people that decided
to spend a few days working together on improving the status of the Web.</p>
<a href="http://www.webengineshackfest.org/#sponsors">
<img src="https://blogs.igalia.com/mrego/files/2017/12/web-engines-hackfest-2017-sponsors.png" alt="Web Engines Hackfest 2017 sponsors: Collabora, Google, Igalia and Mozilla" class="center-block">
</a>
<span class="caption text-muted">Web Engines Hackfest 2017 sponsors: Collabora,
Google, Igalia and Mozilla</span>
<p>Of course we cannot forget about the sponsors either:
<a href="https://www.collabora.com"><strong>Collabora</strong></a>,
<a href="https://www.google.com"><strong>Google</strong></a>,
<a href="https://www.igalia.com"><strong>Igalia</strong></a>
and <a href="https://www.mozilla.org"><strong>Mozilla</strong></a>.
Thank you all very much!</p>
<p>And last, but not least, thanks to <strong>Igalia</strong> for organizing and hosting
one year more this event.
Looking forward to the new year and the 2018 edition!</p>
Adding :focus-within selector to Chromium2017-05-03T00:00:00Zhttps://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/<p>Similar to <a href="https://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/">what I wrote for <code>caret-color</code> in January</a>,
this is a blog post about the process to implement a new feature on <a href="https://www.chromium.org/blink">Chromium/Blink</a>.
This time it’s the turn for <a href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"><strong><code>:focus-within</code></strong> pseudo-class from the Selectors 4 spec</a>,
I’ll talk about the different things that happened during the development.</p>
<h3 id="focus-within-pseudo-class" tabindex="-1"><code>:focus-within</code> pseudo-class <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>This is a new selector that allows to modify the style of an element
when this element or any of its descendants are focused.
It’s similar to the <a href="https://drafts.csswg.org/selectors-4/#focus-pseudo"><code>:focus</code></a>
selector but applying also to ancestors,
so somehow working like <a href="https://drafts.csswg.org/selectors-4/#active-pseudo"><code>:active</code></a>
and <a href="https://drafts.csswg.org/selectors-4/#hover-pseudo"><code>:hover</code></a>.</p>
<p>If you see an example it’s pretty simple to understand:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token selector">form:focus-within</span> <span class="token punctuation">{</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>In this example, when the input is focused
the form background will switch to green.</p>
<h3 id="intent-to-ship" tabindex="-1">Intent to ship <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>Although the specification is still in the <em>Editor’s Draft (ED)</em> state,
it has already been implemented in Firefox 52 and Safari 10.1,
so it seems like a good candidate to be added to Chromium too.</p>
<p>For that you need to send <a href="https://www.chromium.org/blink/launching-features">an <em>intent</em> mail</a>
to <a href="https://groups.google.com/a/chromium.org/forum/#!forum/blink-dev"><code>blink-dev</code></a>.
This seemed like something small and simple enough and,
after investigating a little bit about the feature, I decided to send the mail:
<a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/V3RNBhQelSg"><em>Intent to Implement and Ship: CSS Selectors Level 4: :focus-within pseudo-class</em></a>.</p>
<p>But here the first problems arose…</p>
<h3 id="issues-on-the-spec" tabindex="-1">Issues on the spec <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>On a first sight you can think that this is a very simple feature,
but the Web Platform is complex and has many things
interacting between each other.</p>
<p>In this case <a href="https://twitter.com/runeLi">Rune Lillesveen</a> promptly detected
an issue on the spec text, related to the usage of this selector
(and also <code>:active</code> and <code>:hover</code>) with <a href="https://dom.spec.whatwg.org/#shadow-trees">Shadow DOM</a>.
The old text from the spec said:</p>
<blockquote>
<p>An element also matches <code>:focus-within</code> if one of
its shadow-including descendants matches <code>:focus</code>.</p>
</blockquote>
<p>It seems the spec was ready regarding Shadow DOM, but it was not right.
This can be quite tricky to understand but if you’re interested
take a look to the following example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shadowHost<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br> shadowHost<span class="token punctuation">.</span><span class="token function">attachShadow</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"open"</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span><br> <span class="token string">"<style>"</span> <span class="token operator">+</span><br> <span class="token string">" #shadowDiv:focus-within { border: thick solid green; }"</span> <span class="token operator">+</span><br> <span class="token string">"</style>"</span> <span class="token operator">+</span><br> <span class="token string">"<div id='shadowDiv'>"</span> <span class="token operator">+</span><br> <span class="token string">" <slot></slot>"</span> <span class="token operator">+</span><br> <span class="token string">"</div>"</span><span class="token punctuation">;</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<p>Just in case you don’t understand this example, the final result is that
the input element gets inserted into the <code><slot></code> tag (this is just a quick
and dirty explanation about this particular Shadow DOM example).</p>
<p>The <a href="https://drafts.csswg.org/css-scoping/#flat-tree"><em>flat tree</em></a>
for this example would be something like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shadowHost<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> #shadow-root<br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shadowDiv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>slot</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>slot</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>The issue here is that when you focus the input, as it’s now inside
the <code><slot></code> tag, you’d expect that the <code>shadowDiv</code> has a green border.
However, the input is not a <a href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant"><em>shadow-including descendant</em></a>
of the <code>shadowDiv</code>. The spec should talk about the descendants
in the <em>flat tree</em> instead.</p>
<p>The issue was reported to the <a href="https://github.com/w3c/csswg-drafts/issues/1135">CSS WG GitHub repository</a>
and fixed using the following prose:</p>
<blockquote>
<p>An element also matches <code>:focus-within</code> if one of its descendants
in the flat tree (including non-element nodes, such as text nodes)
matches the conditions for matching <code>:focus</code>.</p>
</blockquote>
<h3 id="implementing-focus-within" tabindex="-1">Implementing <code>:focus-within</code> <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>Once the spec issue got resolved, the <em>intent</em> was approved.
So I had green light to move forward on the implementation.</p>
<p><a href="https://codereview.chromium.org/2795143004/">The patch to support it</a>
was mostly boilerplate code required to add a new selector on Blink.
Most of it was doing something very similar to what <code>:focus</code> already does,
but then we have the interesting part, a loop through the ancestors
of the element using the <em>flat tree</em>:</p>
<pre class="language-cpp" tabindex="0"><code class="language-cpp"><span class="token keyword">for</span> <span class="token punctuation">(</span>ContainerNode<span class="token operator">*</span> node <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span> node<span class="token punctuation">;</span><br> node <span class="token operator">=</span> <span class="token class-name">FlatTreeTraversal</span><span class="token double-colon punctuation">::</span><span class="token function">Parent</span><span class="token punctuation">(</span><span class="token operator">*</span>node<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><br> node<span class="token operator">-></span><span class="token function">SetHasFocusWithin</span><span class="token punctuation">(</span>received<span class="token punctuation">)</span><span class="token punctuation">;</span><br> node<span class="token operator">-></span><span class="token function">FocusWithinStateChanged</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<h3 id="what-about-tests" tabindex="-1">What about tests? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>Of course you need tests for any change on Blink, in this case I was lucky
enough as the <a href="https://github.com/w3c/web-platform-tests/tree/master/css/selectors4">W3C Web Platform Tests (WPT) repository</a>
already have a few tests for this new selector.</p>
<p>I imported these tests (<a href="https://github.com/w3c/web-platform-tests/pull/5370">not without some unrelated issues</a>)
into Blink and verified that my patch passed them (including Mozilla tests
that were already upstreamed).
On top of that, I checked the tests in WebKit repository,
as they have already implemented the feature
and <a href="https://github.com/w3c/web-platform-tests/pull/5261">upstreamed one of them</a>
that was checking some nice combinations.
And finally, I also <a href="https://github.com/w3c/web-platform-tests/pulls?q=is%3Apr%20author%3Amrego%20label%3Aselectors4%20">wrote a few more tests</a>
to cover more situations (like the spec issue described above).</p>
<h3 id="focus-and-display-none" tabindex="-1">Focus and <code>display:none</code> <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>During the review Rune found another controversial topic.
The question is what happens to a focused element when it’s marked
as <code>display: none</code>. At first glance, you would think that the element
should lose focus, and you’ll be right (<a href="https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule-one">HTML spec has a rule specifically
covering this case</a>).</p>
<p>But here we have to deal with an interoperability issue, because the only engine
currently following this rule is Blink.
There are bug reports in the rest of the browsers, and they seem
to acknowledge the issue but there is no activity to fix this at this point.
If you are interested in more details, all of them are linked
from <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=491828">Chromium bug #491828</a>.</p>
<p>If you’re using <code>:focus</code> selector to change, for example, the background
of an input, it’s not very important what happens when that input gets
<code>display: none</code> and dissapears. You don’t care about the background
of something that you’re not seing anymore.
However, with <code>focus-within</code> this issue is more noticeable. Imagine that
you’re changing the background of a form when any of its inputs is focused.
If the focused input is marked with <code>display: none</code>, you won’t have anything
focused in the form so its background should change, but that only happens
in Chromium right now.</p>
<h3 id="common-ancestor-strategy" tabindex="-1">Common ancestor strategy <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>The <a href="https://codereview.chromium.org/2795143004/">initial patch supporting <code>:focus-within</code></a>
landed in time for Chrome 59, but it was implemented behind a experimental flag.
The main reason was that it still needed some extra work before being ready
to be enabled by default.</p>
<p>One of those things was related to style recalculations,
the initial implementation was causing more recalculations than required.</p>
<p>Let’s use a new example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br> <span class="token selector">*:focus-within</span> <span class="token punctuation">{</span><br> <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>li1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>li2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>input2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>What happens when you move the focus from <code>input1</code> to <code>input2</code>?</p>
<p>Let’s see this step by step with the initial patch:</p>
<ol>
<li>Initially <code>input1</code> is focused, so this element and all its ancestors
have the <code>:focus-within</code> flag (all of them will have a green border),
that includes <code>input1</code>, <code>li1</code>, <code><ul></code> and <code><form></code> (actually even <code><body></code>
and <code><html></code> but let’s ignore that for this explanation).</li>
<li>Then when we move to <code>input2</code>, the first thing is that
the previous focused element, in this case <code>input1</code>, loses the focus.
And at that point we go through the ancestors chain removing
the <code>:focus-within</code> flag from <code>input1</code>, <code>li1</code>, <code><ul></code> and <code><form></code>.</li>
<li>Now <code>input2</code> is actually focused, and we go again through
the ancestors chain adding the flag to <code>input2</code>, <code>li2</code>, <code><ul></code> and
<code><form></code>.</li>
</ol>
<p>As you see we’re removing and adding the flag from <code><form></code> and <code><ul></code>
elements when it’s not actually needed as they end up in the same status.</p>
<p>What <a href="https://codereview.chromium.org/2821303005/">the new version</a>
changes is that in point (2) it looks for the common ancestor
between the element losing the focus and the one gaining it.
In this case the common ancestor between <code>input1</code> to <code>input2</code>
would be the <code><ul></code>. So when walking the ancestor chain to add/remove the
<code>:focus-within</code> flag, it stops in the common ancestor and let it
(and all its ancestors) unmodified. This way we’re saving style recalculations.</p>
<p>Now in point (2) only <code>input1</code> and <code>li1</code> get the flag removed,
and in point (3) only <code>input2</code> and <code>li2</code> get it added. The other elements
<code><ul></code> and <code><form></code> remain untouched.</p>
<h3 id="and-even-more-things" tabindex="-1">And even more things… <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>Taking advantage of this work on Chromium, I realized that WebKit
was not following the spec in the <em>flat tree</em> case.
So I imported the WPT tests into WebKit and make <a href="https://trac.webkit.org/changeset/215719/webkit">a one liner patch
to use the <em>flat tree</em> in WebKit too</a>.</p>
<p>Adding a new selector might seem a simple task, but let me show you
some numbers about the commits on the different repos related
to all this work:</p>
<ul>
<li><a href="https://codereview.chromium.org/2795143004">7</a>
<a href="https://codereview.chromium.org/2820063002">commits</a>
<a href="https://codereview.chromium.org/2821303005">in</a>
<a href="https://codereview.chromium.org/2840183002">Chromium</a>
(<a href="https://codereview.chromium.org/2776693002">some</a>
<a href="https://codereview.chromium.org/2783663002">related to</a>
<a href="https://codereview.chromium.org/2803213002">the tests</a>).</li>
<li><a href="https://trac.webkit.org/changeset/215457/webkit">2</a>
<a href="https://trac.webkit.org/changeset/215719/webkit">in WebKit</a>.</li>
<li><a href="https://hg.mozilla.org/mozilla-central/rev/83eeccc86bab">1 in Firefox</a>.</li>
<li>And <a href="https://github.com/w3c/web-platform-tests/commits/master?author=mrego">14 in WPT repo</a>.</li>
</ul>
<p>And a few more might come as I’m still doing a few modifications on the tests
so we can use them in both Blink and WebKit without issues.</p>
<h3 id="use-cases" tabindex="-1">Use cases <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>Now everything has landed and <strong><code>:focus-within</code> will be available
by default starting in Chrome 60</strong>. So it’s time to start using it.</p>
<p>I’ve created a <a href="https://blogs.igalia.com/mrego/files/2017/05/focus-within-demo.html">simple demo</a>
about what you can do with it, but probably you can think of much cooler stuff.</p>
<p><video src="https://blogs.igalia.com/mrego/files/2017/05/focus-within.webm" alt=":focus-within demo" class="center-block" style="max-width: 100%;" autoplay="" controls="" loop="">
</video>
<span class="caption text-muted"><code>:focus-within</code> demo</span></p>
<p>This new selector has an important impact on making the Web more accessible,
especially to keyboard users. For example, if you only use <code>:hover</code> you’re
leaving out a chunk of your user base, the ones using keyboard navigation,
but now you could easily combine that with <code>:focus-within</code>
avoiding this kind of problems.</p>
<p>Again I’ve crafted <a href="https://blogs.igalia.com/mrego/files/2017/05/focus-within-menu.html">a typical menu using <code>:hover</code> and <code>:focus-within</code></a>,
take a look to how keyboard navigation works.</p>
<p><video src="https://blogs.igalia.com/mrego/files/2017/05/focus-within-menu.webm" alt="Use keyboard navigation on a :focus-within menu" class="center-block" style="max-width: 100%;" autoplay="" controls="" loop="">
</video>
<span class="caption text-muted">Use keyboard navigation on a <code>:focus-within</code> menu</span></p>
<p>Note that there’s a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1361301">Firefox bug</a>
preventing this last example to work there.</p>
<h3 id="thanks" tabindex="-1">Thanks! <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/05/03/adding-focus-within-selector-to-chromium/">#</a></h3>
<p>As usual I’ll finish the post with the acknowledgements section.
The development of this new pseudo-class has been done by
<a href="https://www.igalia.com/"><strong>Igalia</strong></a> sponsored by <a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a>
as part of our ongoing collaboration.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>On top of that I have to thank <a href="https://twitter.com/frivoal">Florian Rioval</a>
for helping with the tests reviews on WPT. And especially to <strong>Rune Lillesveen</strong>
for all his work and help during the whole process.</p>
10 years at Igalia2017-04-27T00:00:00Zhttps://blogs.igalia.com/mrego/2017/04/27/10-years-at-igalia/<p><em>Monday 9th April 2007</em>… that was my first day working at <strong><a href="https://www.igalia.com">Igalia</a></strong>,
a really important day in my life. 😊</p>
<h3 id="how-i-met-igalia" tabindex="-1">How I met Igalia <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/04/27/10-years-at-igalia/">#</a></h3>
<p>Just after finishing my Computer Science degree in <a href="http://www.esei.uvigo.es/">Ourense</a>,
I had the chance to start a 6-months internship at <a href="http://www.psa-peugeot-citroen.com/">PSA Peugeot Citroën</a>
in Vigo.
There was the first time I heard about Igalia, and it was like a dream.
First it was a free software company based in Galicia,
I was a free software lover, and had been using it extensively
since my first years in the University (despite being a rare exception there
where most teachers still used proprietary software,
hopefully things have improved now).
Another unbelievable point was that it had a flat structure
and you could become co-owner of the company in a few years after you entered.
During that internship Igalia posted some job offers,
so I decided to apply and I was happily selected to join the company. 😆</p>
<p>Joining Igalia was an awesome experience, apart from the technical work
(where Igalia has contributions to lots of free software projects
that you use every day) the people in the company were really kind and helpful.
From the first day my mentor <a href="https://twitter.com/ltilve">Loren</a>,
which has eventually become one of my best friends,
was explaining me everything I needed about the company.
As time passed I was evolving trough the 3 stages: employee, assembly member
and partner/co-owner of the company.
It’s amazing how you can start to contribute to the company decisions so soon,
and how you feel like the company is yours since the first days.
I’m extremely grateful to the people who let me join the company at that time
and give the opportunity to become part this wonderful family. 😍</p>
<h3 id="some-highlights-about-my-work-in-igalia" tabindex="-1">Some highlights about my work in Igalia <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/04/27/10-years-at-igalia/">#</a></h3>
<p>During the first times I was working with <a href="https://typo3.org/">TYPO3 CMS</a>
contributing to some extensions and also some patches to the main project itself.
I even had the opportunity to attend my first international conference <a href="http://t3con08.typo3.org/">T3CON08</a>
in Berlin.
The next step was a project called <a href="http://www.libreplan.org/">LibrelPlan</a>
an open source web planning tool, again working on the Web as main technology.</p>
<p>By the end of 2012 <a href="https://blog.bitergia.com/2013/02/06/report-on-the-activity-of-companies-in-the-webkit-project/">Igalia had gained a relevant position
within the WebKit community</a>.
Trying to take advantage of all my previous experience around the Web,
I joined the Igalia Web Platform team, where I started to contribute
to <a href="https://webkit.org/">WebKit</a> initially and
<a href="https://www.chromium.org/blink">Chromium/Blink</a> later.
As any newcomer I started my contributions with some small patches
here and there, but as time passed I got more and more involved
on the implementation of CSS standards
which allowed me to be granted reviewer/owner position in these projects.</p>
<p>Due to my work around CSS, and particularly <a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout</a>,
I started to participate on the W3C discussions
specially inside the <a href="https://www.w3.org/Style/CSS/">CSS WG</a>,
where I didn’t miss the chance to join, as external observer,
their <a href="https://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/">face-to-face meeting on the last TPAC</a>.
On top of that I’ve attended more and more conferences and
I’ve been luckily selected to speak in some of them like <a href="https://blogs.igalia.com/mrego/2014/05/19/css-grid-layout-at-blinkon-2/">BlinkOn 2</a>,
<a href="https://blogs.igalia.com/mrego/2015/06/30/css-grid-layout-is-just-around-the-corner-cssconf-us-2015/">CSSConf US 2015</a>,
<a href="https://blogs.igalia.com/mrego/2016/02/18/css-grid-layout-from-the-inside-out-html5devconf-2015/">HTML5DevConf 2015</a>,
<a href="https://blogs.igalia.com/mrego/2016/06/21/my-blinkon6-summary-grid-layout-houdini-and-mathml/">BlinkOn 6</a>.
Also lately I’m part of the organization of the <a href="https://blogs.igalia.com/mrego/2017/04/05/announcing-a-new-edition-of-the-web-engines-hackfest/">Web Engines Hackfest</a>.
All this stuff has been really exiting, I’m loving it!</p>
<h3 id="closing-note" tabindex="-1">Closing note <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/04/27/10-years-at-igalia/">#</a></h3>
<p>Igalia is an incredible company, I cannot think in a better place to work.
Igalia will be celebrating its 16th anniversary this year,
my first 10 years here have been wonderful and in the years to come
I just hope for the best.
I’ve met lots of nice people in both Igalia and the projects I’ve been involved,
thank you all!</p>
<p>Taking a look to the past it’s clear that the Web has had a huge impact
on my career, as I’ve been working for 10 years on different things
but all very closely related to the Web.
And I don’t have plans to move away from it any time soon.</p>
<p>Let’s keep rocking in the free world. 😎</p>
Announcing a New Edition of the Web Engines Hackfest2017-04-05T00:00:00Zhttps://blogs.igalia.com/mrego/2017/04/05/announcing-a-new-edition-of-the-web-engines-hackfest/<p>Another year, another Web Engines Hackfest.
Following the tradition that started back in 2009,
<a href="https://www.igalia.com">Igalia</a> is arranging a new edition
of the <a href="http://www.webengineshackfest.org/"><strong>Web Engines Hackfest</strong></a>
that will happen in A Coruña from Monday, 2nd October,
to Wednesday, 4th October.</p>
<p>The hackfest is a gathering of participants
from the different parts of the open web platform community,
working on projects like Chromium/Blink, WebKit, Gecko, Servo, V8, JSC,
SpiderMonkey, Chakra, etc.
The main focus of the event is to increase collaboration between
the different browsers implementors by working together for a few days.
On top of that, we arrange <a href="https://www.youtube.com/channel/UCPQ8NaRSfsGei1j1meO4pNg">a few talks</a>
about some interesting topics which the hackfest attendees are working on,
and also arrange breakout sessions for in-depth discussions.</p>
<a href="https://www.flickr.com/photos/webhackfest/30032838322/">
<img src="https://blogs.igalia.com/mrego/files/2017/04/web-engines-hackfest-2016.jpg" alt="Web Engines Hackfest 2016 Main Room" class="center-block">
</a>
<span class="caption text-muted">Web Engines Hackfest 2016 Main Room</span>
<p>Last year almost 40 hackers joined the event,
the biggest number of attendees ever. Previous attendees
might have already received an invitation, but if not,
<a href="mailto:hackfest@webengineshackfest.org">just send us a request</a>
if you want to attend this year.</p>
<p>If you don’t want to miss any update, remember to follow <a href="https://twitter.com/webhackfest"><code>@webhackfest</code></a>
on Twitter. See you in October!</p>
CSS Grid Layout is Here to Stay2017-03-16T00:00:00Zhttps://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is-here-to-stay/<p>It’s been a long journey but finally <strong><a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout</a>
is here</strong>! 🚀
In the past week, <a href="https://developers.google.com/web/updates/2017/03/nic57">Chrome 57</a>
and <a href="https://developer.mozilla.org/en-US/Firefox/Releases/52">Firefox 52</a>
were released, becoming the first browsers
to ship CSS Grid Layout unprefixed (Explorer/Edge has been shipping
an older, prefixed version of the spec since 2012).
Not only that, but <a href="https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/">Safari will hopefully be shipping it
very soon too</a>.</p>
<p>I’m probably biased after having worked on it for a few years,
but I believe CSS Grid Layout is going to be a big step in the history of the Web.
Web authors have been waiting for a solution like this since the early days of the Web,
and now they can use a very powerful and flexible layout module
supported natively by the browser, without the need of any external frameworks.</p>
<p><a href="https://www.igalia.com"><strong>Igalia</strong></a> has been playing a major role
in the implementation of CSS Grid Layout in <a href="https://www.chromium.org/blink">Chromium/Blink</a>
and <a href="https://webkit.org/">Safari/WebKit</a> since 2013 sponsored by <a href="http://www.bloomberg.com/company/">Bloomberg</a>.
This is a blog post about that successful collaboration.</p>
<h3 id="a-blast-from-the-past" tabindex="-1">A blast from the past <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is-here-to-stay/">#</a></h3>
<p>Grids are not something new at all, since we can even find references
to them in some of the initial discussions of the CSS creators.
Next is an excerpt from <a href="https://lists.w3.org/Archives/Public/www-style/1995Jun/0000.html">a mail by Håkon Wium Lie in <strong>June 1995</strong> to <code>www-style</code></a>:</p>
<blockquote>
<p>Grids! Let the style sheet carve up the canvas into golden rectangles,
and use an expert system to lay out the elements!! Ok, drop the expert
system and define a set of simple rules that we hardcode… whoops! But
grids do look nice!</p>
<p>-h&kon</p>
</blockquote>
<p>Since that time the Web hasn’t stopped moving and there have been different
solutions and approaches to try to solve the problem of having
grid-based designs in HTML/CSS.</p>
<p>At the beginning of the decade Microsoft started to work
on what eventually become the <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">CSS Grid Layout initial specification</a>.
This spec was based on the Internet Explorer 10 implementation and the
experience gathered by Microsoft during its development.
IE10 was released in 2012, shipping a prefixed version of that initial spec.</p>
<p>Then Google <a href="https://lists.webkit.org/pipermail/webkit-dev/2011-November/018570.html">started to add support to WebKit at the end of 2011</a>.
At that time, WebKit was the engine used by both Chromium and Safari;
later in 2012 it would be <a href="https://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html">forked to create Blink</a>.</p>
<p>Meanwhile, Mozilla had not started the Grid implementation in Firefox
as they had some conflicts with their <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/grid">XUL grid layout type</a>.</p>
<h3 id="igalia-and-bloomberg-collaboration" tabindex="-1">Igalia and Bloomberg collaboration <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is-here-to-stay/">#</a></h3>
<p>Bloomberg uses Chromium and they were looking forward
to having a proper solution for their layout requirements.
They detected performance issues due to the limitations
of the current layout modules available on the Web.
They see CSS Grid Layout as the right way to fix those problems
and cover their needs.</p>
<p>Bloomberg decided to push CSS Grid Layout implementation
as part of the collaboration with Igalia.
My colleagues, <a href="https://twitter.com/svillarsenin">Sergio Villar</a>
and <a href="https://www.igalia.com/nc/igalia-247/igalian/item/xlopez/">Xan López</a>,
started to work on CSS Grid Layout around the summer of 2013.
In 2014, <a href="https://twitter.com/lajava77">Javi Fernández</a> and I replaced Xan,
joining the effort as well. We’ve been working on this for more than 3 years
and counting.</p>
<p>At the beginning, we were working together with some Google folks
but later Igalia took the lead role in the development of the specification.
The spec has evolved and changed quite a lot since 2013,
so we’ve had to deal with all these changes always trying to keep
our implementations up to date, and at the same time continue to add new features.
As the codebase in Blink and WebKit was still sharing quite a lot of things
after the fork, we were working on both implementations at the same time.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>The results of this collaboration have been really satisfactory,
as now <strong>CSS Grid Layout has shipped in Chromium and enabled
by default in WebKit too</strong> (which will <s>hopefully</s> mean that <a href="https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html#//apple_ref/doc/uid/TP40014305-CH12-DontLinkElementID_55">it’ll be shipped
in the upcoming Safari 10.1 release too</a>).</p>
<blockquote>
<p>Thanks <a href="https://twitter.com/jensimmons/status/842348791265153024"><code>@jensimmons</code></a>
for the feedback regarding Safari 10.1.</p>
</blockquote>
<h3 id="and-now-what" tabindex="-1">And now what? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is-here-to-stay/">#</a></h3>
<p>Update your browsers, be sure you grab a version with Grid Layout support
and <strong>start to use CSS Grid Layout</strong>, play with it, experiment and so on.
We’d love to get bug reports and feedback about it.
It’s too late to change the current version of the spec, but <a href="https://github.com/w3c/csswg-drafts/issues?utf8=%E2%9C%93&q=is%3Aissue%20label%3Acss-grid-2%20">ideas for a future version
are already being recorded in the CSS Working Group GitHub repository</a>.</p>
<p>If you want to start with Grid Layout, there are plenty of resources available
on the Internet:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout"><strong>MDN</strong> has wonderful documentation about CSS Grid Layout</a>.</li>
<li><a href="http://gridbyexample.com/"><strong>gridbyexample.com</strong></a> is an excellent website
with a tons of resources (examples, videos, etc.) by <a href="https://twitter.com/rachelandrew">Rachel Andrew</a>.</li>
<li><a href="http://labs.jensimmons.com/"><strong>labs.jensimmons.com</strong></a> has awesome
Grid Layout examples by <a href="https://twitter.com/jensimmons">Jen Simmons</a>.</li>
<li>And many more… With a simple search, you will find talks
in many conferences, different blog posts containing basic introductions
advanced details, and thorough references.
For example I gave a <a href="https://www.youtube.com/watch?v=3M_rbUYtWzk">talk at HTML5DevConf 2015</a>,
it was a while ago but it can still serve as introduction to CSS Grid Layout.</li>
</ul>
<p>It’s possible to think that now that CSS Grid Layout has shipped, it’s all over.
Nothing is further from the truth as there is still a lot of work to do:</p>
<ul>
<li>An important step would be to complete the <a href="https://github.com/w3c/csswg-test/tree/master/css-grid-1">W3C Test Suite</a>.
Igalia has been contributing to it and it’s currently imported
into Blink and WebKit, but it doesn’t cover the whole spec yet.</li>
<li>There are some missing features in the current implementations.
For example, nobody supports <em>subgrids</em> yet, web authors
tell us that they would love to have them available.
Another example, in Blink and WebKit is that we are still finishing the support
for <em>baseline alignment</em>.</li>
<li>When bugs and issues appear they will need to be fixed and
some might even imply some minor modifications to the spec.</li>
<li>Performance optimizations should be done. CSS Grid Layout is a huge spec
so the biggest part effort so far has been done in the implementation.
Now it’s time to improve performance of different use cases.</li>
<li>And as I explained earlier, people are starting to think about new features
for a future version of the spec. Progress won’t stop now.</li>
</ul>
<h3 id="acknowledgements" tabindex="-1">Acknowledgements <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is-here-to-stay/">#</a></h3>
<p>First of all, it’s important to highlight once again <strong>Bloomberg</strong>’s role
in the development of CSS Grid Layout. Without their vision and support it
probably would not be have shipped so soon.</p>
<p>But this is not an individual effort, but something much bigger.
I’ll mention several people next, but I’m sure I’ll forget a lot of them,
so please forgive me in advance.</p>
<p>So big thanks to:</p>
<ul>
<li>The <strong>Microsoft folks</strong> who started the spec.</li>
<li>The current spec editors: <strong>Elika J. Etemad (fantasai)</strong>,
<strong>Rossen Atanassov</strong>, and <strong>Tab Atkins Jr</strong>.
Especially fantasai & Tab, who have been dealing with most of the issues
we have reported.</li>
<li>The whole <strong>CSS Working Group</strong> for their work on this spec.</li>
<li>Our reviewers in both Blink and WebKit:
<strong>Christian Biesinger</strong>, <strong>Darin Adler</strong>, <strong>Julien Chaffraix</strong>, and many other.</li>
<li>Other implementors: <strong>Daniel Holbert</strong>, <strong>Mats Palmgren</strong>, etc.</li>
<li>People spreading the word about CSS Grid Layout:
<strong>Jen Simmons</strong>, <strong>Rachel Andrew</strong>, etc.</li>
<li>The many <strong>other people</strong> I’m missing in this list who helped
to make CSS Grid Layout the newest layout module for the Web.</li>
</ul>
<p><strong>Thanks to you all! 😻</strong>
And particularly to Bloomberg for letting Igalia be part of this amazing
experience. We’re really happy to have walked this path together and we really
hope to do more cool stuff in the future.</p>
<h2 id="translations" tabindex="-1"><i class="fa fa-globe"></i> Translations <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/03/16/css-grid-layout-is-here-to-stay/">#</a></h2>
<ul>
<li>Russian (March 20, 2017):
<a href="http://css-live.ru/articles/css-gridy-prishli-nasovsem.html">CSS-гриды пришли насовсем</a></li>
</ul>
Coloring the insertion caret2017-01-09T00:00:00Zhttps://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/<p>On the last weeks <a href="https://www.igalia.com/">Igalia</a> has been working
in adding support for <code>caret-color</code> property on <a href="https://www.chromium.org/blink">Blink</a>.
This post is a summary of the different tasks done to achieve it.</p>
<h3 id="first-steps" tabindex="-1">First steps <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/">#</a></h3>
<p>Basically I started investigating a little bit the state of art.
<code>caret-color</code> is defined in the spec called <a href="https://www.w3.org/TR/css-ui-3/#caret-color"><em>CSS Basic User Interface Module Level 3</em></a>,
it’s a Candidate Recommendation so browsers should be happy to implement it.
However the property is marked as <em>at-risk</em> due to the lack of implementations
(I talked to the spec editor, <a href="https://twitter.com/frivoal">Florian Rioval</a>,
to confirm it).</p>
<blockquote>
<p><strong>Update</strong>: <a href="https://logs.csswg.org/irc.w3.org/css/2017-01-12/#e760951"><code>caret-color</code> is no longer <em>at-risk</em> thanks to Chromium and Firefox implementations</a>.</p>
</blockquote>
<p>Then the first thing was to send the
<a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/6jK81erL87E/i6t4G9AaAwAJ"><em>Intent to Implement and Ship: CSS UI: caret-color property</em> mail to <code>blink-dev</code></a>.
The feedback was possitive as it’s a small change without a big impact,
and the intent was approved.</p>
<h3 id="initial-support" tabindex="-1">Initial support <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/">#</a></h3>
<p>My colleague <a href="https://twitter.com/csaavedra">Claudio Saavedra</a>
had already implemented <code>caret-color</code> support for <a href="http://www.bloomberg.com/company/">Bloomberg</a>
in their downstream port a few years ago.
And they have been using it successfully on the terminals.
In addition, as you can see in <a href="https://lists.w3.org/Archives/Public/www-style/2011Nov/0772.html">this mail by Lea Verou on the CSS Working Group (CSS WG) mailing list</a>,
there’s a clear author demand for more control over the caret color.</p>
<p>Basically the task was adding a new CSS property to the Blink parser and
change the color of the insertion caret to use it.
The latter was basically changing a line and using <code>caret-color</code>
instead of <code>color</code> to determine it.</p>
<p>Adding the CSS property was not hard, but there’s something special
regarding <code>caret-color</code> as it’s the first color property that accepts
<code>auto</code> as value.
So far <code>auto</code> is going to be implemented as <code>currentColor</code>,
but in the future it can be tweaked to
“ensure good visibility and contrast with the surrounding content”.
For that reason the <a href="https://codereview.chromium.org/2520873002/">patch</a>
needed some extra work on top of a regular color.</p>
<a href="https://blogs.igalia.com/mrego/files/2017/01/caret-color-example.png">
<img src="https://blogs.igalia.com/mrego/files/2017/01/caret-color-example.png" alt="caret-color example" class="center-block">
</a>
<span class="caption text-muted">`caret-color` example</span>
<h3 id="making-caret-color-animatable" tabindex="-1">Making <code>caret-color</code> animatable <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/">#</a></h3>
<p>The next step was making <code>caret-color</code> animatable.
Again this would be fairly easy if it was a regular color,
but due to the <code>auto</code> value it needed some special changes.</p>
<p>The important thing here is that <code>auto</code> is not interpolable,
so if you do something like this:</p>
<pre class="language-css" tabindex="0"><code class="language-css"> <span class="token selector">.foo</span> <span class="token punctuation">{</span><br> <span class="token property">color</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span><br> <span class="token property">caret-color</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span><br> <span class="token property">transition</span><span class="token punctuation">:</span> all 1s<span class="token punctuation">;</span><br> <span class="token punctuation">}</span><br> <span class="token selector">.foo:hover</span> <span class="token punctuation">{</span><br> <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><br> <span class="token property">caret-color</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span><br> <span class="token punctuation">}</span></code></pre>
<p>The color of the text will interpolate from black to green,
but the color of the insertion caret will do a discrete jump from black to lime.
This might be seen as a weird behavior,
but <a href="https://github.com/w3c/csswg-drafts/issues/781">it was discussed and verified with the CSS WG</a>.</p>
<p>Anyway the <a href="https://codereview.chromium.org/2537373005/">patch has landed</a>
and you can now enjoy your rainbow caret! 🌈</p>
<p><video src="https://blogs.igalia.com/mrego/files/2017/01/caret-color-rainbow.webm" alt="caret-color animation example" class="center-block" autoplay="" controls="" loop="">
</video>
<span class="caption text-muted"><code>caret-color</code> animation example</span></p>
<h3 id="the-resolved-value" tabindex="-1">The resolved value <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/">#</a></h3>
<p>Another thing that <a href="https://github.com/w3c/csswg-drafts/issues/566">was clarified with the CSS WG</a>
is related to the resolved value of <code>caret-color</code> property.</p>
<p>In CSS you can have <a href="https://drafts.csswg.org/css-cascade-4/#value-stages">specified value, computed value, used value</a>
and <a href="https://drafts.csswg.org/cssom/#resolved-value">resolved value</a>.
This is not the post to explain on this, so I’ll jump directly into the details
of what was related to <code>caret-color</code> implementation.</p>
<p>For color properties we’re used to have as resolved value
(the one returned by <code>getComputedStyle()</code>) the used value,
a numeric color with a format like <code>rgb(X, X, X)</code>.
For example, in the following snippet you would get as resolved value
<code>rgb(0, 255, 0)</code> in the console log:</p>
<pre class="language-html" tabindex="0"><code class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> currentColor<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><br> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span><span class="token function">getComputedStyle</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>backgroundColor<span class="token punctuation">)</span><span class="token punctuation">;</span><br> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
<p>However, that was not in the specs, and initially <code>caret-color</code> tests
were checking that the resolved value was <code>auto</code> or <code>currentColor</code>.
<a href="https://codereview.chromium.org/2577633002/">This has been modified</a> and
now it’ll behave like the rest of the color properties.</p>
<h3 id="w3c-test-suite" tabindex="-1">W3C Test Suite <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/">#</a></h3>
<p>Of course we need tests for all this stuff,
but Florian had already created a few tests related to <code>caret-color</code>
on <a href="https://github.com/w3c/csswg-test/tree/master/css-ui-3">the <code>csswg-test</code> repository</a>.
So I used them as base and contributed a few more to check
all the stuff needed regarding the implementation.</p>
<p>The good news is that now there are 21 tests checking <code>caret-color</code>
that are upstream on the W3C repository and can be used
by the rest of browsers to verify the interoperability.</p>
<p>This test suite is being used in Blink to verify that the current implementation
is spec compatible. Right now only 1 test is failing due
to <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=676295">a known bug regarding animations</a>.</p>
<h3 id="conclusions" tabindex="-1">Conclusions <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/">#</a></h3>
<p><strong><code>caret-color</code> support is already available on <a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary</a></strong>,
and it’ll be hitting stable in Chrome 57.
Please start playing with it and let me know if you find any issue.</p>
<p>The good news is that thanks to all the discussions inside the CSS WG,
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1063162">Firefox implementation</a>
got reactivated and <code>caret-color</code> is supported there now too!
It’ll be included in Firefox 53.
Also Mozilla folks have wrote <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color">the documentation at MDN</a>.</p>
<p>Regarding other browsers, in WebKit <a href="https://bugs.webkit.org/show_bug.cgi?id=166572">the bug has been reported</a>
and Blink patches could be somehow ported;
in Edge I added <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/17595823-implement-caret-color-support">a new feature request</a>
vote for it if you’re interested.</p>
<h3 id="acknowledgements" tabindex="-1">Acknowledgements <a class="header-anchor" href="https://blogs.igalia.com/mrego/2017/01/09/coloring-the-insertion-caret/">#</a></h3>
<p>First I’d like to thank <strong>Bloomberg</strong> for sponsoring, once again,
<strong><a href="https://www.igalia.com/">Igalia</a></strong> to do this work.
It’s really nice to keep adding valuable features to the web.</p>
<p>This is the kind of things where Igalia can be the perfect partner
for your company.
Some features that might be interesting for your organization
but are not in the roadmap or priorities of the browser vendors.
We can help to discuss the feature with the standards body
and push to get it implemented on the open source browsers.
Of course, not everything will be accepted upstream,
but in some situations (like the <code>caret-color</code> property),
it’s possible to make it for real.</p>
<p>If you’d like to do this kind of work in Igalia, don’t miss the opportunity
to join us. <a href="https://www.igalia.com/nc/about-us/form/chromium-developer/">We’ve recently opened a position for a Chromium developer</a>,
take a look to it and send us your application if you’re interested.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Also thanks to Florian Rioval for replying so fast to all my questions
and doubts regarding <code>caret-color</code> and the spec.
He was very kind quickly reviewing all my tests
for the W3C <code>csswg-test</code> repo.</p>
<p>Finally thanks to the reviewers (specially Alan Cutter and Timothy Loh) and
other people commenting on the different issues for all your patience with me. 😄</p>
Recap of the Web Engines Hackfest 20162016-11-15T00:00:00Zhttps://blogs.igalia.com/mrego/2016/11/15/recap-of-the-web-engines-hackfest-2016/<p>This is my personal summary of the <a href="http://www.webengineshackfest.org/"><strong>Web Engines Hackfest 2016</strong></a>
that happened at <a href="https://www.igalia.com">Igalia</a> headquarters (in A Coruña)
during the last week of September.</p>
<p>The hackfest is a special event, because the target audience are
implementors of the different web browser engines.
The idea is to join browser hackers for a few days
to discuss different topics and work together in some of them.
This year we almost reached <a href="http://www.webengineshackfest.org/#attendees">40 participants</a>,
which is the largest number of people attending the hackfest since
we started it 8 years ago.
Also it was really nice to have people from the different communities
around the open web platform.</p>
<a href="https://www.flickr.com/photos/webhackfest/29851562800/">
<img src="https://blogs.igalia.com/mrego/files/2016/11/web-engines-hackfest-2016-breakout-session.jpg" alt="One of the breakout sessions of the Web Engines Hackfest 2016" class="center-block">
</a>
<span class="caption text-muted">One of the breakout sessions of the Web Engines Hackfest 2016</span>
<h3 id="talks" tabindex="-1">Talks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/15/recap-of-the-web-engines-hackfest-2016/">#</a></h3>
<p>Despite the main focus of the event is the <strong>hacking time</strong>
and the <strong>breakout sessions</strong> to discuss the different topics,
we took advantage of having great developers around
to arrange <a href="http://www.webengineshackfest.org/#portfolio">a few short talks</a>.
I’ll do a brief review of the talks from this year,
which have been already published on <a href="https://www.youtube.com/playlist?list=PL4sEzdAGvRgCYXot-o5cVKOobIXZI5iLF">a YouTube playlist</a>
(thanks to <a href="https://twitter.com/txenoo">Chema</a> and <a href="https://twitter.com/jsuarezr">Juan</a>
for the amazing recording and video edition).</p>
<ul>
<li>
<p><a href="https://youtu.be/UGl9VVIOo3E?list=PL4sEzdAGvRgCYXot-o5cVKOobIXZI5iLF"><strong>“Servo: Today & Tomorrow” by Jack Moffitt</strong></a></p>
<p><a href="https://twitter.com/metajack">Jack</a> explained
the current status of <a href="https://servo.org/"><strong>Servo</strong></a> and its evolution.
He highlighted the importance of being on <a href="https://github.com/servo">GitHub</a>
from the beginning for a project like Servo,
helping them to have a lot of external contributions.
It’s cool to see that some Servo components are getting ready for real life
and are getting imported into Firefox.
And it seems clear that <a href="https://medium.com/mozilla-tech/a-quantum-leap-for-the-web-a3b7174b3c129">the plan from Mozilla is doing this more and more
as they’ve just recently announced</a>.</p>
</li>
<li>
<p><a href="https://youtu.be/T79LMEXkf9w?list=PL4sEzdAGvRgCYXot-o5cVKOobIXZI5iLF"><strong>“Ten Years of HarfBuzz” by Behdad Esfahbod</strong></a></p>
<p>Really nice talk summarizing the history of <a href="https://www.freedesktop.org/wiki/Software/HarfBuzz/"><strong>HarfBuzz</strong></a>
from its initial years to nowadays.
It’s cool to remember that <a href="https://twitter.com/behdadesfahbod">Behdad</a>
was already <a href="https://wiki.gnome.org/Projects/WebKitGtk/Hackfest2009">here in 2009 working on HarfBuzz too</a>
(when this event was still called <em>WebKitGTK+ Hackfest</em>).</p>
</li>
<li>
<p><a href="https://youtu.be/hJoxO4_fwWY?list=PL4sEzdAGvRgCYXot-o5cVKOobIXZI5iLF"><strong>“Fetching Bytes and Words on the Web” by Youenn Fablet</strong></a></p>
<p>Youenn was here past year talking about
<a href="https://youtu.be/O94an4pZfb4?list=PL4sEzdAGvRgAMfxwUK2sAQcq5EdmDV3eW"><em>Streams API</em> with my colleague Calvaris</a>.
This time he came to explain <a href="https://fetch.spec.whatwg.org/"><strong>Fetch standard</strong></a>
and the status of the implementation on <a href="https://webkit.org">WebKit</a>.</p>
</li>
<li>
<p><a href="https://youtu.be/LI8jQEcFsbk?list=PL4sEzdAGvRgCYXot-o5cVKOobIXZI5iLF"><strong>“From ‘WebKit for Wayland’ to WPE” by Žan Doberšek</strong></a></p>
<p><a href="https://twitter.com/falconsigh">Žan</a> was talking about the WebKit port
that Igalia has been optimizing for low-end devices and
that is becoming very relevant on the set-top boxes market.
Hopefully <a href="https://www.igalia.com/wpe"><strong>WPE</strong></a> will
become an official WebKit port sooner than later.</p>
</li>
<li>
<p><a href="https://youtu.be/PKVFwxbtAOk?list=PL4sEzdAGvRgCYXot-o5cVKOobIXZI5iLF"><strong>“Cluttering WebKitGTK+” by Gustavo Noronha</strong></a></p>
<p>In the last talk of the hackfest <a href="https://twitter.com/gnomekov">Gustavo</a>
was explaining the work they’ve done moving from <strong><a href="https://trac.webkit.org/wiki/clutter">WebKit Clutter</a></strong>
to <strong><a href="https://webkitgtk.org/">WebKitGTK+</a></strong> still keeping some clutter stuff.
This was somehow an update about <a href="https://youtu.be/zn-FWJF8A5Y?list=PL4sEzdAGvRgAMfxwUK2sAQcq5EdmDV3eW">the talk he gave past year</a>.</p>
</li>
</ul>
<h3 id="css-grid-layout" tabindex="-1">CSS Grid Layout <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/15/recap-of-the-web-engines-hackfest-2016/">#</a></h3>
<p>In my case, as usual lately,
my focus was <a href="https://drafts.csswg.org/css-grid/"><strong>CSS Grid Layout</strong></a>
implementation on <a href="https://www.chromium.org/blink">Blink</a> and WebKit,
that Igalia is doing as part of our collaboration with <a href="http://www.bloomberg.com/company/">Bloomberg</a>.
The good thing was that <a href="https://twitter.com/cbiesinger"><strong>Christian Biesinger</strong></a>
from Google was present in the hackfest,
he’s usually the Blink developer reviewing our patches,
so it was really nice to have him around to discuss and clarify some topics.</p>
<p>My colleague <a href="https://blogs.igalia.com/jfernandez/2016/10/09/web-engines-hackfest-2016/">Javi already wrote a blog post about the hackfest</a>
with lots of details about the Grid Layout work we did.
Probably the most important bit is that we’re getting really close
to ship the feature.
The spec is now Candidate Recommendation
(despite a few issues that still need to be clarified)
and we’ve been focusing lately on finishing the last features
and fixing interoperability issues with Gecko implementation.
And we’ve just sent the <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/hBx1ffTS9CQ/TMTigaDIAgAJ">“<em>Intent to ship</em>” mail to <code>blink-dev</code></a>,
if everything goes fine Grid Layout might be enabled by default
on Chromium 57 that will be released around March 2017.</p>
<h3 id="mathml" tabindex="-1">MathML <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/15/recap-of-the-web-engines-hackfest-2016/">#</a></h3>
<p>It’s worth to mention the work performed by <a href="http://twitter.com/behdadesfahbod">Behdad</a>,
<a href="http://frederic-wang.fr/">Fred</a> and <a href="http://twitter.com/KhaledGhetas">Khaled</a>
adding support on <strong>HarfBuzz</strong> for the OpenType MATH table.
Again <a href="http://frederic-wang.fr/fonts-at-the-web-engines-hackfest-2016.html">Fred wrote a detailed blog post about all this work</a>
some weeks ago.</p>
<p>Also we had the chance to discuss with more googlers
about the possibilities to bring <a href="https://www.w3.org/TR/MathML3/"><strong>MathML</strong></a>
back into Chromium.
We showed the status of <a href="https://github.com/fred-wang/chromium.src/tree/mathml">the experimental branch created by Fred</a>
and explained <a href="https://webkit.org/blog/6803/improvements-in-mathml-rendering/">the improvements we’ve been doing on the WebKit implementation</a>.
Now Gecko and WebKit both follow the <a href="http://www.mathml-association.org/MathMLinHTML5/">implementation note</a>
and the tests have been upstreamed into the <a href="https://github.com/w3c/web-platform-tests/tree/master/mathml">W3C Web platform Tests repository</a>.
Let’s see how all this will evolve in the future.</p>
<h3 id="acknowledges" tabindex="-1">Acknowledges <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/15/recap-of-the-web-engines-hackfest-2016/">#</a></h3>
<p>Last, but not least, as one of the event organizers, I’ve to say thanks to
<a href="http://www.webengineshackfest.org/#sponsors">everyone attending</a> the hackfest,
without all of you the event won’t make any sense.
Also I want to acknowledge the support from the hackfest sponsors
<a href="https://www.collabora.com"><strong>Collabora</strong></a>, <a href="https://www.igalia.com"><strong>Igalia</strong></a>
and <a href="https://www.mozilla.org"><strong>Mozilla</strong></a>.
And I’d also like to give kudos to Igalia for hosting and organizing the event
one year more.
Looking forward for 2017 edition!</p>
<a href="http://www.webengineshackfest.org/#sponsors">
<img src="https://blogs.igalia.com/mrego/files/2016/11/web-engines-hackfest-2016-sponsors.jpg" alt="Web Engines Hackfest 2016 sponsors: Collabora, Igalia and Mozilla" class="center-block">
</a>
<span class="caption text-muted">Web Engines Hackfest 2016 sponsors: Collabora, Igalia and Mozilla</span>
<h3 id="igalia-15th-anniversary-and-summit" tabindex="-1">Igalia 15th Anniversary & Summit <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/15/recap-of-the-web-engines-hackfest-2016/">#</a></h3>
<p>Just to close this blog post let me talk about some extra events
that happened on the last week of September just after the Web Engines Hackfest.</p>
<p><a href="https://www.igalia.com/igalia-247/news/item/igalia-celebrates-our-15th-anniversary/">Igalia was celebrating its <strong>15th anniversary</strong></a>
with several parties during the week,
one of them was in the last day of the hackfest at night
with a cool live concert included.
Of course hackfest attendees were invited to join us.</p>
<a href="https://twitter.com/txenoo/status/781245322085408768">
<img src="https://blogs.igalia.com/mrego/files/2016/11/igalia-15th-anniversary-party.jpg" alt="Igalia 15th Anniversary Party" class="center-block">
</a>
<span class="caption text-muted">Igalia 15th Anniversary Party
(picture by Chema Casanova)</span>
<p>Then, on the weekend, <a href="https://www.igalia.com/about-us/great-place-to-work/">Igalia arranged a new <strong>summit</strong></a>.
We usually do two per year and, in my humble opinion,
they’re really important for Igalia as a whole.
The flat structure is based on trust in our peers,
so spending a few days per year all together is wonderful.
It allows us to know each other better,
while having a good time with our colleagues.
And I’m sure they’re very useful for newcomers too,
in order to help them to understand our company culture.</p>
<a href="https://www.flickr.com/photos/bertogg/29962370082/">
<img src="https://blogs.igalia.com/mrego/files/2016/11/igalia-fall-summit-2016.jpg" alt="Igalia Fall Summit 2016" class="center-block">
</a>
<span class="caption text-muted">Igalia Fall Summit 2016
(picture by Alberto Garcia)</span>
<p>And that’s all for this post, let’s hope you didn’t get bored.
Thanks for reading this far. 😊</p>
My experience at W3C TPAC 2016 in Lisbon2016-11-01T00:00:00Zhttps://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/<p>At the end of September I attended <a href="https://www.w3.org/2016/09/TPAC/"><strong>W3C TPAC 2016</strong></a>
in Lisbon together with my igalian fellows
<a href="https://twitter.com/Joanmarie">Joanie</a> and
<a href="https://twitter.com/juanjosanchez">Juanjo</a>.
TPAC is where all the people working on the different W3C groups
meet for a week to discuss tons of topics around the Web.
It was my first time on a W3C event so I had the chance to meet there
a lot of amazing people, that I’ve been following on the internet
for a long time.</p>
<h3 id="igalia-booth" tabindex="-1">Igalia booth <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/">#</a></h3>
<p>Like past year <a href="https://www.igalia.com"><strong>Igalia</strong></a> was present in
the conference, and we had a nice exhibitor booth
just in front the registration desk.
Most of the time my colleague Juanjo was there explaining Igalia
and the work we do to the people that came to the booth.</p>
<a href="https://twitter.com/juanjosanchez/status/777790330750009344">
<img src="https://blogs.igalia.com/mrego/files/2016/11/igalia-booth-tpac-2016.jpg" alt="Igalia Booth at W3C TPAC 2016" class="center-block">
</a>
<span class="caption text-muted">Igalia Booth at W3C TPAC 2016
(picture by Juan José Sánchez)</span>
<p>In the booth we were showcasing some videos of the last <strong>standards
implementations</strong> we’ve been doing upstream (like CSS Grid Layout, WebRTC, MathML,
etc.). In addition, we were also showing a few demos of
<a href="https://www.igalia.com/wpe">our WebKit port called <strong>WPE</strong></a>,
which has been optimized to run on low-end devices like
the <a href="https://www.raspberrypi.org/">Raspberry Pi</a>.</p>
<p>It’s really great to have the chance to explain the work we do around browsers,
and check that there are quite a lot of people interested on that.
On this regard, Igalia is a particular consultancy that can help companies
to develop standards upstream, contributing to both the implementations
and the specification evolution and discussions inside the different
standard bodies. Of course, don’t hesitate
to <a href="https://www.igalia.com/contact/">contact us</a> if you think we can help
you to achieve similar goals on this field.</p>
<h3 id="css-working-group" tabindex="-1">CSS Working Group <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/">#</a></h3>
<p>During TPAC I was attending the <a href="https://www.w3.org/Style/CSS/"><strong>CSS WG</strong></a>
meetings as an observer. It’s been really nice to check that a lot of people
there appreciate the work we do around <a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout</a>,
as part of our collaboration with <a href="http://www.bloomberg.com/company/">Bloomberg</a>.
Not only the implementation effort we’re leading on Blink and WebKit,
but also the contributions we make to the spec itself.</p>
<h4 id="new-ideas-for-css-grid-layout" tabindex="-1">New ideas for CSS Grid Layout <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/">#</a></h4>
<p>There were not a lot of discussion about Grid Layout during the meetings,
just a few issues that I’ll explain later. However,
<a href="https://twitter.com/jensimmons">Jen Simmons</a> did <a href="https://speakerdeck.com/jensimmons/proposal-to-csswg-sept-2016">a very cool presentation
with a proposal for a <strong>new regions specification</strong></a>.</p>
<p>As you probably remember one of the main concerns regarding <a href="https://drafts.csswg.org/css-regions/">CSS Regions spec</a>
is the need of dummy <code>divs</code>, that are used to flow the text into them.
Jen was suggesting that we could use CSS Grids to solve that.
Grids create boxes from CSS where you place elements from the DOM,
the idea would be that if you can reference those boxes from CSS
then the contents could flow there without the need of dummy nodes.
This was linked with some other new ideas to improve CSS Grid Layout:</p>
<ul>
<li>Apply backgrounds and borders to grid cells.</li>
<li>Skip cells during auto-placement.</li>
</ul>
<p>All this is already possible nowadays using dummy <code>div</code> elements
(of course if you use a browser with regions and grid support
like <a href="https://developer.apple.com/safari/technology-preview/">Safari Technology Preview</a>).
However, the idea would be to be able to achieve the same thing
without any empty item, directly referring them from CSS.</p>
<p>This of course needs further discussion and won’t be part of the level 1
of CSS Grid Layout spec, but it’d be really nice to get some of those things
included in the future versions. I was discussing with Jen and some of them
(like skipping cells for auto-placement) shouldn’t be hard to implement.
Last, this reminded me about a discussion we had two years ago
at the <a href="https://blogs.igalia.com/mrego/2014/12/10/web-engines-hackfest-2014/">Web Engines Hackfest 2014 with Mihnea Ovidenie</a>.</p>
<h4 id="last-issues-on-css-grid-layout" tabindex="-1">Last issues on CSS Grid Layout <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/">#</a></h4>
<p>After the meetings I had the chance to discuss hand by hand some issues
with <a href="https://twitter.com/fantasai">fantasai</a>
(one of the Grid Layout spec editors).</p>
<p>One of the topics was discussed during the CSS WG meeting,
it was related to how to handle percentages inside Grid Layout
when they need to be resolved in an intrinsic size situation.
The question here was if both percentage tracks and percentage gaps
should resolve the same or differently, the group agreed that they should work
exactly the same.
However there is something else, as Firefox computes percentage for margins
different to what’s done in the other browsers.
I tried to explain all this in <a href="https://github.com/w3c/csswg-drafts/issues/509">a detailed issue for the CSS WG</a>,
I really think we only have option to do this,
but it’ll take a while until we’ve a final resolution on this.</p>
<p>Another issue I think we’ve still open is about the <a href="https://github.com/w3c/csswg-drafts/issues/283">minimum size of grid items</a>.
I believe the text on the spec still needs some tweaks, but, thanks to fantasai,
we managed to clarify what should be the expected behavior in the common case.
However, there’re still some open questions and <a href="https://github.com/w3c/csswg-drafts/issues/523">an ongoing discussion regarding images</a>.</p>
<p>Finally, it’s worth to mention that just after TPAC,
the Grid Layout spec has transitioned to <strong>Candidate Recommendation (CR)</strong>,
which means that it’s getting stable enough to finish the implementations
and release it to the wild. Hopefully this open issues will be fixed pretty soon.</p>
<h3 id="houdini" tabindex="-1">Houdini <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/">#</a></h3>
<p>I also attended the first day of Houdini meetings, I was lucky as they started
with the <a href="https://drafts.css-houdini.org/css-layout-api/"><strong>Layout API</strong></a>
(the one I was more interested on). It’s clear that Google
is pushing a lot for this to happen, all the new <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=591099">Layout NG project</a>
inside Blink seems quite related to the new Houdini APIs.
It looks like a nice thing to have, but, on a first sight, it seems quite hard
to get it right. Mainly due to the big complexity of the layout on the web.</p>
<p>On the bright side the <a href="https://drafts.css-houdini.org/css-paint-api/"><strong>Painting API</strong></a>
transitioned to CR. Blink has some prototype implementations already
that can be used to create <a href="https://www.youtube.com/watch?v=AfiaReDetZE">cool
demos</a>.
It’s really amazing to see that the Houdini effort
is already starting to produce some real results.</p>
<h3 id="other" tabindex="-1">Other <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/11/01/my-experience-at-w3c-tpac-2016-in-lisbon/">#</a></h3>
<p>It’s always a pleasure to visit Portugal and Lisbon,
both a wonderful country and city.
One of the conference afternoons I had the chance to go for a walk
from the congress center to the lovely Belém Tower.
It was clear I couldn’t miss the chance to go there for such a big conference,
you don’t always have TPAC so close from home.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/11/lisbon-wall-painting.jpg">
<img src="https://blogs.igalia.com/mrego/files/2016/11/lisbon-wall-painting.jpg" alt="Lisbon wall painting" class="center-block">
</a>
<span class="caption text-muted">Lisbon wall painting</span>
<p>Overall it was a really nice experience, everyone was very kind
and supportive about Igalia and our work on the web platform.
Let’s keep working hard to push the web forward!</p>
Grid Layout Summertime2016-10-13T00:00:00Zhttps://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/<p>Summer season is over and despite of some nice holidays to rest,
the <a href="https://www.igalia.com"><strong>Igalia</strong></a> team kept doing progress
on the <a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout</a> implementation
in <a href="https://www.chromium.org/">Chromium/Blink</a>
and <a href="https://webkit.org/">Safari/WebKit</a> as part of our ongoing collaboration
with <a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a>.</p>
<p>By the end of September the spec has transitioned to
Candidate Recommendation (CR),
<a href="https://rachelandrew.co.uk/archives/2016/09/29/css-grid-layout-module-level-1-at-candidate-recommendation/">Rachel Andrew wrote a blog post explaining what does it mean</a>.
However in the previous months there were a few changes here and there
that require the implementations to get updated.</p>
<p>If you remember <a href="https://blogs.igalia.com/mrego/2016/06/21/my-blinkon6-summary-grid-layout-houdini-and-mathml/">my presentation on the last BlinkOn</a>
we were reviewing the status of the implementation.
By that time there were a bunch things marked as <em>WIP</em> or <em>TODO</em>,
but now most of them have been already implemented as I’ll explain in this post.</p>
<h3 id="auto-repeat" tabindex="-1">Auto repeat <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h3>
<p>My mate <a href="https://blogs.igalia.com/svillar/2016/05/10/automatizing-the-grid/">Sergio Villar already explained this feature thoroughly in a blog post</a>
so I won’t repeat it.</p>
<p>The new thing is that <strong><code>auto-fit</code> keyword</strong> implementation has already landed,
so you can use it too.
<code>auto-fit</code> allows you to collapse the tracks that doesn’t contain any item.</p>
<p>So now you can do something like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 700px<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>auto-fit<span class="token punctuation">,</span> 150px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>grid-column: 1 / span 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>grid-column: 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/10/example-auto-fit.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/10/example-auto-fit.svg" alt="auto-fit example" class="center-block">
</a>
<span class="caption text-muted">`auto-fit` example</span>
<p>In the example, there’s room for 4 columns of 150px
however as the third column doesn’t have any item, so it’s collapsed to 0px,
and you end up like having only 3 columns on your grid container.
If you were using <code>auto-fill</code> keyword,
the 3rd column won’t be collapsed and it will remain empty.</p>
<h3 id="multiple-tracks" tabindex="-1">Multiple tracks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h3>
<p>One of the changes on the spec was adding the possibility
to <strong>specify more than one track</strong> in some of the properties:
<code>grid-auto-columns</code> & <code>grid-auto-rows</code> and <code>repeat()</code> notation.</p>
<p>So for example you can now pass a track list
to the <code>grid-auto-columns</code> property like:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 200px 50px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>D<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/10/example-multiple-tracks-auto-columns.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/10/example-multiple-tracks-auto-columns.svg" alt="Multiple tracks on grid-auto-columns example" class="center-block">
</a>
<span class="caption text-muted">Multiple tracks on `grid-auto-columns` example</span>
<p>As you see the first and third columns will have a 200px width,
and the second and fourth ones will have a 50px width.</p>
<p>On top of that, you can also use a track list on the <code>repeat()</code> notation:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span> 200px 50px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>D<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>E<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>F<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/10/example-multiple-tracks-repeat.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/10/example-multiple-tracks-repeat.svg" alt="Multiple tracks on repeat() notation example" class="center-block">
</a>
<span class="caption text-muted">Multiple tracks on `repeat()` notation example</span>
<p>This seems a small change, and it was not very hard to implement.
However, this combined with the auto repeat feature required
a few more changes than expected to make everything work properly.</p>
<h3 id="fit-content-cap" tabindex="-1"><code>fit-content()</code> cap <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h3>
<p><a href="https://drafts.csswg.org/css-sizing/#valdef-width-fit-content"><code>fit-content</code> keyword</a>
has been updated and now you can pass an argument to it
that is used as a maximum size.
As an argument for the <code>fit-content()</code> function you can specify either
a length or a percentage (that will be resolved like for percentage tracks).</p>
<p>So in Grid Layout now you can use <strong><code>fit-content(argument)</code></strong>
and the track size will be clamped at the <em>argument</em>:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> inline-grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>2<span class="token punctuation">,</span> <span class="token function">fit-content</span><span class="token punctuation">(</span>200px<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>an item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>a very long grid item<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/10/example-fit-content.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/10/example-fit-content.svg" alt="fit-content() function example" class="center-block">
</a>
<span class="caption text-muted">`fit-content()` function example</span>
<p>As you can see the first column uses <code>fit-content</code> so its size is adapted
to the item inside.
However the second column would need more than 200px
in order that the whole item fits, so its size is clamped to 200px.</p>
<h3 id="percentage-support-for-grid-gutters" tabindex="-1">Percentage support for grid gutters <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h3>
<p>Grid gutters have been added a while ago into the different implementations,
but we were lacking support for percentage gaps.</p>
<p>We’ve been updating the implementation so now you can use <strong>percentages</strong> too
(again they’re resolved like percentage tracks):</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span><br> <span class="token property">grid-column-gap</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span><br> <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 1fr<span class="token punctuation">;</span> <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>D<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/10/example-percentage-gaps.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/10/example-percentage-gaps.svg" alt="Percentage gaps example" class="center-block">
</a>
<span class="caption text-muted">Percentage gaps example</span>
<p>The 10% column gap is resolved against the width of the grid container to 40px.
Then the <code>1fr</code> tracks take the available space,
which in this case means 70px for each column.</p>
<p>The percentage support for grid gaps is marked as <em>at-risk</em> in the spec,
however it has been already implemented in Gecko and Blink,
so probably it won’t be removed from this level.</p>
<h3 id="new-syntax-for-grid-shorthand" tabindex="-1">New syntax for <code>grid</code> shorthand <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h3>
<p>The <strong><code>grid</code> shorthand syntax</strong> has been modified
so now you can specify in just one property,
the explicit grid in one axis and the implicit grid
and the auto-placement algorithm mode in the other one.</p>
<p>For example, if you want a grid that has 2 columns of a given size
and the rows will be created on demand, you could use the following syntax:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid</span><span class="token punctuation">:</span> auto-flow 100px / 200px 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>D<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>E<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/10/example-grid-shorthand.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/10/example-grid-shorthand.svg" alt="grid shorthand example" class="center-block">
</a>
<span class="caption text-muted">`grid` shorthand example</span>
<h3 id="orthogonal-flows" tabindex="-1">Orthogonal flows <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h3>
<p>Orthogonal flows refers to situations when the writing mode
of the grid container uses a different direction than some of its items.
For example, if you have a horizontal grid container
and some vertical items inside it.</p>
<p>This has been a long task but right now you can use <strong>orthogonal flows
on grid layout</strong> already.
The basic support has been implemented including alignment of orthogonal items.</p>
<p>So now you can use vertical items inside a horizontal grid layout:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> inline-grid<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Test<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">writing-mode</span><span class="token punctuation">:</span> vertical-lr<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Chrome<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">writing-mode</span><span class="token punctuation">:</span> vertical-lr<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Firefox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">writing-mode</span><span class="token punctuation">:</span> vertical-lr<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Safari<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>test-1.html<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>✖<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>✔<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>✔<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>test-2.html<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>✔<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>✖<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>✖<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/10/example-orthogonal-flows.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/10/example-orthogonal-flows.svg" alt="Orthogonal flows example" class="center-block">
</a>
<span class="caption text-muted">Orthogonal flows example</span>
<h3 id="new-normal-value-for-alignment-properties" tabindex="-1">New <code>normal</code> value for alignment properties <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h3>
<p>This is a pretty complex issue from the specs and implementations point of view
(as you can see in the <a href="https://codereview.chromium.org/1709963002/">epic review for this patch</a>),
but probably not very important for the end users
because the default behavior on Grid Layout won’t be altered.
Now there’s a <strong>new value <code>normal</code></strong> for the alignment properties:
<code>justify-content</code>, <code>align-content</code>, <code>justify-items</code>, <code>align-items</code>,
<code>justify-self</code> and <code>align-self</code>.</p>
<p>The interesting thing regarding this new <code>normal</code> value is that
it behaves differently depending on the layout model.
In general, the behavior in the Grid Layout case
is the same than when you use the <code>stretch</code> keyword.</p>
<h3 id="conclusion" tabindex="-1">Conclusion <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h3>
<p>This is just a high level overview of the main things that happened during
the summer on the Blink and WebKit implementations leaded by <strong>Igalia</strong>.
Of course, I’m missing some much more stuff like lots of bug fixes
and even performance optimizations
(e.g. <a href="https://chromium.googlesource.com/chromium/src/+/7eeda9249ff7a744d713417830e4b71319879b87">nested grids are now 350% faster than before</a>).</p>
<p>Maybe for some of you some of these changes are really great,
maybe for other they’re not very relevant.
Anyway the good news are that things keep moving forward,
and the implementations are getting closer and closer to the specification.
This means that we’re on the right path to have CSS Grid Layout enabled
on most of the main browsers soon.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Last, but not least, as usual we’d like to thank our friends at <strong>Bloomberg</strong>
for all their amazing support which allows us to keep pushing Grid Layout.</p>
<h2 id="translations" tabindex="-1"><i class="fa fa-globe"></i> Translations <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/10/13/grid-layout-summertime/">#</a></h2>
<ul>
<li>Russian (March 17, 2017):
<a href="http://css-live.ru/articles/kak-grid-raskladka-grid-layout-provela-leto.html">Как грид-раскладка (Grid Layout) провела лето</a></li>
</ul>
TPAC, Web Engines Hackfest & Igalia 15th anniversary on the horizon2016-09-15T00:00:00Zhttps://blogs.igalia.com/mrego/2016/09/15/tpac-web-engines-hackfest-and-igalia-15th-anniversary-on-the-horizon/<h3 id="w3c-s-tpac" tabindex="-1">W3C’s TPAC <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/09/15/tpac-web-engines-hackfest-and-igalia-15th-anniversary-on-the-horizon/">#</a></h3>
<p>Next week I’ll be in Lisbon attending <a href="https://www.w3.org/2016/09/TPAC/"><strong>TPAC</strong></a>.
This is the annual conference organized by the <a href="https://www.w3.org/">W3C</a>
where all the different groups meet face to face during one week.
It seems a huge event where you can meet lots of important people
working on the web. Looking forward to being there. 😃</p>
<p>Due to our involvement on the implementation of <a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout</a>
specification in <a href="https://www.chromium.org/">Chromium/Blink and</a> and
<a href="https://webkit.org/">Safari/WebKit</a>, we’ve been interacting quite a lot
with the <a href="https://www.w3.org/Style/CSS/"><strong>CSS Working Group</strong> (CSS WG)</a>.
Thus, I’ll be participating on their meetings during the event
and also following the work around <a href="https://github.com/w3c/css-houdini-drafts/wiki">Houdini</a>,
with a close eye on the <a href="https://drafts.css-houdini.org/css-layout-api/">Layout API</a>.
BTW, thanks to the CSS WG chairs for letting me join them.</p>
<p>Like past year, <a href="http://www.igalia.com"><strong>Igalia</strong></a> will have a booth
in the conference where you can chat with us about our involvement on the W3C,
from the specs edition to the implementation of web standards
on the different browsers.
My colleagues <a href="https://twitter.com/Joanmarie">Joanie</a> and
<a href="https://twitter.com/juanjosanchez">Juanjo</a> will be attending the event too,
so don’t hesitate to ping any of us to talk about Igalia
and our contributions to the open web platform.</p>
<h3 id="web-engines-hackfest" tabindex="-1">Web Engines Hackfest <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/09/15/tpac-web-engines-hackfest-and-igalia-15th-anniversary-on-the-horizon/">#</a></h3>
<p>This year Igalia is organizing and hosting again a new edition
of the <a href="http://www.webengineshackfest.org/"><strong>Web Engines Hackfest</strong></a>.
The event will take place during the last week of the month (26-28th September),
it used to be on December but we looked for a better date this year and
it seems we’ve been successful as we’ll be around 40 people (more than ever).
Thanks everyone attending, we just hope you really enjoy the event.</p>
<p>As usual my main goal for the hackfest is related to
<strong>CSS Grid Layout</strong> implementation. Probably it’d be a good moment
to draft a plan for shipping it on Chromium
as we’ll have <a href="https://twitter.com/cbiesinger">Christian Biesinger</a> around,
who is usually reviewing most of our Grid Layout patches.</p>
<p>On top of that and due to my involvement
on the <a href="https://webkit.org/blog/6803/improvements-in-mathml-rendering/">MathML refactoring we did on WebKit</a>,
I’ll be very interested on keep discussing about <a href="https://www.w3.org/TR/MathML3/"><strong>MathML</strong></a>
and the next steps to make it a reality on the different web engines.
Some fonts experts will be around, so we won’t miss the opportunity
to try to improve OpenType MATH table support in <a href="https://www.freedesktop.org/wiki/Software/HarfBuzz/">HarfBuzz</a>.</p>
<p>Apart from this, it’s worth highlighting the big number of <a href="https://servo.org/"><strong>Servo</strong></a>
contributors we’ll have in the event, from Mozilla employees
to external collaborators (like my colleague <a href="https://twitter.com/abandonedwig">Martin</a>).
I’m eager to check firsthand the status of this engine and their future plans.</p>
<p>Last, but not least, hopefully during the hackfest we’ll find some time
to discuss about the upstreaming process of <a href="https://www.igalia.com/webkitforwayland/"><strong>WebKit for Wayland</strong></a>,
trying to convert it in an official WebKit port like <a href="https://webkitgtk.org/">WebKitGTK+</a>.</p>
<p>And there’ll be more topics that will be discussed there like:
accessibility, multimedia, V8, WebRTC, etc. We’re quite a lot of people,
so surely we’ll have productive meetings on most of these things.</p>
<h3 id="igalia-15th-anniversary" tabindex="-1">Igalia 15th Anniversary <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/09/15/tpac-web-engines-hackfest-and-igalia-15th-anniversary-on-the-horizon/">#</a></h3>
<p>This month <strong>Igalia is becoming 15 years old</strong>!
It’s amazing that a company with a <a href="https://www.igalia.com/nc/about-us/">completely different model</a>
(focused on free software and with a flat cooperative-like structure)
has survived during all these years.
I’m very grateful to the people who founded a company with such wonderful values,
and all the people that have made possible to reach this point in our history.
Thanks for letting me be part of it! 😊</p>
<p><img src="https://blogs.igalia.com/mrego/files/2016/09/igalia-15th-anniversary-logo.png" alt="Igalia 15th Anniversary Logo" class="center-block">
<span class="caption text-muted">Igalia 15th Anniversary Logo</span></p>
<p>We’ll be celebrating the anniversary on the last week of September,
we’ll have several parties during that week
and we’ll have one of our summits at the weekend.</p>
<p>It’s awesome to see back in time and realize how many contributions
we’ve been doing to a lot of different free software projects,
from our first days inside the <a href="https://www.gnome.org/">GNOME project</a>,
to our current work on the different browsers or graphics drivers,
among others.
Lots of programs you’re using every day have some code contributed by Igalia;
from your computer to your phones, TVs, watches, etc.</p>
<p>Happy birthday Igalia, I wish we’ll have many more years of success
on the free world! 🎂</p>
My BlinkOn 6 Summary: Grid Layout, Houdini & MathML2016-06-21T00:00:00Zhttps://blogs.igalia.com/mrego/2016/06/21/my-blinkon6-summary-grid-layout-houdini-and-mathml/<p><a href="http://www.igalia.com"><strong>Igalia</strong></a> could not miss the chance to participate
in a new European edition of BlinkOn.
So past week my colleague <a href="https://blogs.igalia.com/dape/">Dape</a> and I
were attending <a href="http://bit.ly/blinkon6-schedule"><strong>BlinkOn 6</strong></a> in Munich.
In this post I’d do a personal summary about the main conference highlights.</p>
<h3 id="status-of-css-grid-layout-implementation" tabindex="-1">Status of CSS Grid Layout implementation <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/06/21/my-blinkon6-summary-grid-layout-houdini-and-mathml/">#</a></h3>
<p>During the conference I gave a talk about
the <strong>status of <a href="https://drafts.csswg.org/css-grid/">Grid Layout</a> on Blink</strong>.
I went over the whole spec checking the things that are <em>DONE</em>, <em>WIP</em> or <em>TODO</em>.
The summary is that on top of the things we’re already working on,
and that will be landing very soon (<code>auto-fit</code> repeat, orthogonal flows,
<code>normal</code> value in <code>align|justify-items</code> properties, etc.),
we’ve just a few tasks pending (most of them changes on the spec
in the last 2 months).</p>
<p>The main features pending are:</p>
<ul>
<li><strong>Fragmentation</strong>: This is an issue on the whole project and not only related
to Grid Layout. For example, Blink doesn’t have proper fragmentation support
on <a href="https://drafts.csswg.org/css-flexbox">Flexbox</a> either, so probably
it’s not a blocker in order to ship Grid Layout.
This will affect you when you try to print a grid and the rows are cut
in the middle, actually they should have been moved completely
to the next page.
Of course, it’d be really nice to have it fixed and working as expected.</li>
<li><strong>Subgrids</strong>: This is a hot topic and the opinions vary a lot depending on
whom you’re asking. For some people, we should ship without subgrids support
and add it later (as the change won’t be breaking any content);
other believe that we shouldn’t ship until subgrids are implemented.
I think it’s still needed more discussion between the CSS Working Group
and the different browser vendors to reach an agreement on this issue.</li>
</ul>
<p>You can find the <a href="https://blogs.igalia.com/mrego/resources/">slides of my talk on this blog</a>
already (notice that you’d need Chrome Canary with the experimental flag enabled
to see them properly).
Sadly the talks outside the main room were not recorded,
so there won’t be any video of mine.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>From the different conversations I had, everyone seems really happy
about the work we’re doing on Grid Layout,
so thank you very much for the kind words. 😉
As you probably already know <strong><a href="http://www.igalia.com">Igalia</a> work
on this feature has been sponsored
by <a href="http://www.bloomberg.com/company/">Bloomgerg</a></strong>, big kudos to them!</p>
<h3 id="css-houdini" tabindex="-1">CSS Houdini <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/06/21/my-blinkon6-summary-grid-layout-houdini-and-mathml/">#</a></h3>
<p><strong><a href="http://css-houdini.org">Houdini</a></strong> had a big presence on the conference,
it seems clear that Google is really pushing for this to happen.
It was nice to see the current status of some APIs that are already working
in an experimental way like
<a href="https://drafts.css-houdini.org/css-typed-om/">Typed OM</a> and
<a href="https://drafts.css-houdini.org/css-paint-api/">Painting API</a>.
Also, it’s great to check that other browsers are already taking
some initial steps too, like Firefox with the
<a href="https://drafts.css-houdini.org/css-properties-values-api/">Properties and Values API</a>.</p>
<a href="https://www.flickr.com/photos/regocasasnovas/27136993173/">
<img src="https://blogs.igalia.com/mrego/files/2016/06/houdini-paint-session.jpg" alt="Userspace vector graphics using Houdini & Custom Elements by Shane Stephens" class="center-block">
</a>
<span class="caption text-muted">
<em>Userspace vector graphics using Houdini & Custom Elements</em> by Shane Stephens
</span>
<p>Apart from <a href="http://bit.ly/blinkon-6-houdini">the introductory talk on the main room</a> there were 2 more sessions:</p>
<ul>
<li>The <a href="https://github.com/shans/covert">experiment</a> developed
by <a href="https://twitter.com/komradshaneski">Shane Stephens</a>
using <a href="https://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a> and
the <a href="https://drafts.css-houdini.org/css-paint-api/">Houdini Painting API</a>
shows how powerful this can be.
He created a <em>kind of SVG replacement</em> with just 500 lines of code.</li>
<li>Then <a href="https://twitter.com/bfgeek">Ian Kilpatrick</a> did a cool presentation
explaining with detail the
<a href="https://drafts.css-houdini.org/css-layout-api/">Houdini CSS Layout API</a>
which is right now being specified.
In this case it seems a pretty complex and powerful API that probably
would be only suitable for big players and frameworks.</li>
</ul>
<h3 id="mathml-in-chromium" tabindex="-1">MathML in Chromium? <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/06/21/my-blinkon6-summary-grid-layout-houdini-and-mathml/">#</a></h3>
<p>Just in case you don’t know, Igalia has been lately working on
the <a href="https://lists.webkit.org/pipermail/webkit-dev/2016-June/028277.html">refactoring of the MathML implementation in WebKit</a>.
The rationale was that the previous code was a pain to maintain and improve
(e.g. it depended a lot on Flexbox making it really hard to implement
new features), actually this was one of the reasons why it was removed
from Blink after the fork.
The refactoring is still ongoing but
<a href="http://trac.webkit.org/wiki/MathML/Early_2016_Refactoring">several patches have already landed</a>.</p>
<p>As the new code (after the refactoring) was looking much better in WebKit
my colleague <strong><a href="http://frederic-wang.fr/">Fred Wang</a> started to port it to Blink</strong>
<a href="https://github.com/fred-wang/chromium.src/tree/mathml">on a GitHub repository</a>.
The <a href="https://blogs.igalia.com/mrego/files/2016/06/mac-chromiummathmlbranch-latinmodernmath.png">initial results are looking pretty good</a>,
but <a href="https://blogs.igalia.com/mrego/files/2016/06/mac-webkitrefactored-latinmodernmath.png">all the code from WebKit hasn’t been ported yet</a>.</p>
<a href="https://www.flickr.com/photos/regocasasnovas/27136993173/">
<img src="https://blogs.igalia.com/mrego/files/2016/06/mathml-houdini.jpg" alt="MathML mentioned on the Houdini session" class="center-block">
</a>
<span class="caption text-muted">
MathML mentioned on the Houdini session
</span>
<p>Thus, I took advantage of the conference to talk about this work
with several people in order to check the feasibility of bringing MathML
back to Chromium.
After some discussions it seems clear that Google would be interested
in having MathML support, however at this moment they seem more inclined
to do it through the new Houdini APIs like CSS Layout and Fonts Metrics
that are still being worked on.
MathML seems to be a nice use case to verify that they work as expected.</p>
<p>If they follow this approach, it probably means that
we won’t see MathML supported on Blink in the short-term,
as we’d need to wait for those APIs to be ready.
In any case, Igalia will keep an eye on all this stuff
looking for a good opportunity to make it a reality.</p>
<h3 id="summary" tabindex="-1">Summary <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/06/21/my-blinkon6-summary-grid-layout-houdini-and-mathml/">#</a></h3>
<p>As usual for me the most important part of these conferences is having
the chance to meet some new faces and old friends too.
It’s really nice to have the chance to spend a while talking face to face
with people that have been interacting with you on the Internet for a long time.</p>
<p>Regarding Grid Layout I hope that the different parties can find a good way
to bring it to the web authors in the 3 major browser
(Chrome, Safari and Firefox) almost synchronously.
I cannot say if it’s going to happen this year or the next one,
but I’m sure it’s going to be something really big for the Web!</p>
<p>All the CSS Houdini stuff sounds really cool but a long-term thing at this moment.
Let’s see how long we need to wait until we can use these new APIs for real.</p>
<a href="https://www.flickr.com/photos/regocasasnovas/27691523002/">
<img src="https://blogs.igalia.com/mrego/files/2016/06/munich-town-hall.jpg" alt="Munich's Town Hall from from the Tower of St. Peter's Church" class="center-block">
</a>
<span class="caption text-muted">
Munich's Town Hall from from the Tower of St. Peter's Church
</span>
<p>Finally, it was nice to visit Munich and to have some time for
a walk around the city.
We couldn’t find any single hill around the city center,
next time it might be a good idea to rent a bike.</p>
CSS Grid Layout and positioned items2016-05-27T00:00:00Zhttps://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/<p>As part of the work done by <a href="http://www.igalia.com">Igalia</a>
in the CSS Grid Layout implementation
on <a href="https://www.chromium.org/">Chromium/Blink</a>
and <a href="https://webkit.org/">Safari/WebKit</a>,
we’ve been implementing the
<a href="https://drafts.csswg.org/css-grid/#abspos"><strong>support for positioned items</strong></a>.
Yeah, absolute positioning inside a grid. 😅</p>
<p>Probably the first idea is that come to your mind is that
you don’t want to use positioned grid items,
but maybe in some use cases it can be needed.
The idea of this post is to explain how they work inside a grid container
as they have some particularities.</p>
<p>Actually there’s not such a big difference compared to regular grid items.
When the grid container is the <a href="https://www.w3.org/TR/CSS22/visudet.html#containing-block-details">containing block</a>
of the positioned items
(e.g. using <code>position: relative;</code> on the grid container)
they’re placed almost the same than regular grid items.
But, there’re a few differences:</p>
<ul>
<li>Positioned items don't stretch by default.</li>
<li><strike>They don't use the implicit grid.</strike>
They don't create implicit tracks.</li>
<li>They don't occupy cells regarding auto-placement feature.</li>
<li><code>auto</code>has a special meaning when referring lines.</li>
</ul>
<p>Let’s explain with more detail each of these features.</p>
<h3 id="positioned-items-shrink-to-fit" tabindex="-1">Positioned items shrink to fit <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/">#</a></h3>
<p>We’re used to regular items that stretch by default to fill their area.
However, that’s not the case for positioned items,
similar to what a positioned regular block does, they <strong>shrink to fit</strong>.</p>
<p>This is pretty easy to get, but a simple example will make it crystal clear:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 300px 200px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 200px 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>In this example we’ve a simple 2x2 grid.
Both the regular item and the positioned one are placed with the same rules
taking the whole grid.
This defines the <em>area</em> for those items,
which takes the 1st & 2nd rows and 1st & 2nd columns.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-shrink.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-shrink.svg" alt="Positioned items shrink to fit" class="center-block">
</a>
<span class="caption text-muted">Positioned items shrink to fit</span>
<p>The regular item stretches by default both horizontally and vertically,
so it takes the whole size of the grid area.
However, the positioned item shrink to fit and adapts its size to the contents.</p>
<p>For the examples in the next points I’m ignoring this difference,
as I want to show the area that each positioned item takes.
To get the same result than in the pictures,
you’d need to set <code>100%</code> width and height on the positioned items.</p>
<h3 id="positioned-items-and-implicit-grid" tabindex="-1">Positioned items and implicit grid <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/">#</a></h3>
<p>Positioned items don’t participate in the layout of the grid,
neither they affect how items are placed.</p>
<p>You can place a regular item outside the explicit grid,
and the grid will create the required tracks to accommodate the item.
However, in the case of positioned items,
<strike>you cannot even refer to lines in the implicit grid,
they'll be treated as <code>auto</code>.
Which means that you
<strong>cannot place a positioned item in the implicit grid</strong>.</strike>
they <strong>cannot create implicit tracks</strong> as they don't participate
in the layout of the grid.</p>
<p>Let’s use an example to understand this better:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px 100px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px<span class="token punctuation">;</span><br> <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> 4 / 4<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>The example defines a 2x2 grid,
but the positioned item is using <code>grid-area: 4 / 4;</code>
so it tries to goes to the 4th row and 4th column.
However the positioned items cannot create those implicit tracks.
So it’s positioned like if it has <code>auto</code>,
which in this case will take the whole explicit grid.
<code>auto</code> has a special meaning in positioned items,
it’ll be properly explained later.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-implicit-tracks.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-implicit-tracks.svg" alt="Positioned items do not create implicit tracks" class="center-block">
</a>
<span class="caption text-muted">Positioned items do not create implicit tracks</span>
<p>Imagine another example where regular items create implicit tracks:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px 100px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px<span class="token punctuation">;</span><br> <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-area</span><span class="token punctuation">:</span> 1 / 4<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-area</span><span class="token punctuation">:</span> 4 / 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> 4 / 4<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>In this case, the regular items will be creating the implicit tracks,
making a 4x4 grid in total.
Now the positioned item can be placed on the 4th row and 4th column,
even if those columns are on the implicit grid.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-implicit-grid.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-implicit-grid.svg" alt="Positioned items can be placed on the implicit grid" class="center-block">
</a>
<span class="caption text-muted">Positioned items can be placed on the implicit grid</span>
<blockquote>
<p>As you can see this part of the post has been modified,
thanks to <a href="https://twitter.com/fantasai/status/736179137560358918"><code>@fantasai</code></a>
for notifying me about the mistake.</p>
</blockquote>
<h3 id="positioned-items-and-placement-algorithm" tabindex="-1">Positioned items and placement algorithm <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/">#</a></h3>
<p>Again the positioned items do not affect the position of other items,
as they don’t participate in the placement algorithm.</p>
<p>So, if you’ve a positioned item and you’re using auto-placement
for some regular items,
it’s expected that the positioned one overlaps the other.
The positioned items are <strong>completely ignored during auto-placement</strong>.</p>
<p>Just showing a simple example to show this behavior:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 300px 300px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 200px 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2 / 3<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Here we’ve again a 2x2 grid, with 3 auto-placed regular items,
and 1 absolutely positioned item.
As you can see the positioned item is placed on the 1st row and 2nd column,
but there’s an auto-placed item in that cell too,
which is below the positioned one.
This shows that the grid container doesn’t care about positioned items and
it just ignores them when it has to place regular items.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-placement-algorithm.gif">
<img src="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-placement-algorithm.gif" alt="Positioned items and placement algorithm" class="center-block">
</a>
<span class="caption text-muted">Positioned items and placement algorithm</span>
<p>If all the children were not positioned,
the last one would be placed in the given position (1st row and 2nd column),
and the rest of them (auto-placed) will take the other cells,
without overlapping.</p>
<h3 id="positioned-items-and-auto-lines" tabindex="-1">Positioned items and <code>auto</code> lines <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/">#</a></h3>
<p>This is probably the biggest difference compared to regular grid items.
If you don’t specify a line, it’s considered that you’re using <code>auto</code>,
but <code>auto</code> is not resolved as <code>span 1</code> like in regular items.
For positioned items <strong><code>auto</code> is resolved to the padding edge</strong>.</p>
<p>The specification introduces the concepts of the lines <code>0</code> and <code>-0</code>,
despite how weird it can sound, it actually makes sense.
The <code>auto</code> lines would be referencing to those <code>0</code> and <code>-0</code> lines,
that represent the padding edges of the grid container.</p>
<p>Again let’s use a few examples to explain this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 300px 200px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 200px 200px<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 50px 100px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / auto<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / auto<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Here we have a 2x2 grid container, which has some padding.
The positioned item will be placed in the 2nd row and 1st column,
but its area will take up to the padding edges
(as the end line is <code>auto</code> in both axis).</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-auto-lines.svg"><img src="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-auto-lines.svg" alt="Positioned items and auto lines"></a>
<span class="caption text-muted">Positioned items and <code>auto</code> lines</span></p>
<p>We could even place positioned grid items on the padding itself.
For example using “<code>grid-column: auto / 1;</code>”
the item would be on the left padding.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-auto-lines-left-padding.svg"><img src="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-auto-lines-left-padding.svg" alt="Positioned items using auto lines to be placed on the left padding"></a>
<span class="caption text-muted">Positioned items using <code>auto</code> lines to be placed on the left padding</span></p>
<p>Of course if the grid is wider and we’ve some free space on the content box,
the items will take that space too. For example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 300px 200px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 200px 200px<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 50px 100px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br> <span class="token property">grid-column</span><span class="token punctuation">:</span> 3 / auto<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Here the grid columns are <code>500px</code>, but the grid container has <code>600px</code> width.
This means that we’ve <code>100px</code> of free space in the grid content box.
As you can see in the example, that space will be also used when
the positioned items extend up to the padding edges.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-auto-lines-padding-free-space.svg"><img src="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-auto-lines-padding-free-space.svg" alt="Positioned items taking free space and right padding"></a>
<span class="caption text-muted">Positioned items taking free space and right padding</span></p>
<h3 id="offsets" tabindex="-1">Offsets <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/">#</a></h3>
<p>Of course you can use offsets to place your positioned items
(<code>left</code>, <code>right</code>, <code>top</code> and <code>bottom</code> properties).</p>
<p>These offsets will apply inside the grid area defined for the positioned items,
following the rules explained above.</p>
<p>Let’s use another example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 300px 200px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 200px 200px<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 50px 100px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / auto<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / auto<span class="token punctuation">;</span><br> <span class="token property">left</span><span class="token punctuation">:</span> 90px<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Again a 2x2 grid container with some padding.
The positioned item have some offsets which are applied inside its grid area.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-offsets.svg"><img src="https://blogs.igalia.com/mrego/files/2016/05/positioned-items-offsets.svg" alt="Positioned items and offets"></a>
<span class="caption text-muted">Positioned items and offets</span></p>
<h3 id="wrap-up" tabindex="-1">Wrap-up <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/05/27/css-grid-layout-and-positioned-items/">#</a></h3>
<p>I’m not completely sure about how important is
the support of positioned elements for web authors using Grid Layout.
You’ll be the ones that have to tell if you really find
use cases that need this.
I hope this post helps to understand it better and
make your minds about real-life scenarios where this might be useful.</p>
<p>The good news is that <strong>you can test this already</strong> in
the most recent versions of some major browsers:
Chrome Canary, Safari Technology Preview and Firefox.
We hope that the 3 implementations are interoperable,
but please let us know if you find any issue.</p>
<p>There’s one last thing missing: <strong>alignment support for positioned items</strong>.
This hasn’t been implemented yet in any of the browsers,
but the behavior will be pretty similar to
the one you can already use with regular grid items.
Hopefully, we’ll have time to add support for this in the coming months.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Last but not least, thanks to <strong><a href="http://www.bloomberg.com/company/">Bloomberg</a>
for supporting <a href="http://www.igalia.com">Igalia</a></strong>
in the CSS Grid Layout implementation on Blink and WebKit.</p>
Igalia Coding Experience on Web Engines2016-02-25T00:00:00Zhttps://blogs.igalia.com/mrego/2016/02/25/igalia-coding-experience-on-web-engines/<p>In <a href="http://www.igalia.com">Igalia</a> we’re looking for people to
join the <a href="http://www.igalia.com/nc/igalia-247/news/item/join-the-igalia-coding-experience-program/"><strong>Igalia Coding Experience program</strong></a>.
Basically we’re opening positions for internships in different fields
related to some of our teams like
multimedia, compilers, networking or web platform.
The main purpose is to give students and recent graduates
an initial taste of coding in industry.
Where you could work together with several Igalia hackers
on different free software projects.</p>
<p>I’m part of the <a href="http://www.igalia.com/webkit/">web platform team</a>
where we work on different tasks
related to the core of several web engines.
Apart from our work on <a href="http://blogs.igalia.com/mrego/tag/css-grid-layout/">CSS Grid Layout in Blink and WebKit</a>,
that you probably know if you follow my blog,
Igalia has been working on other topics like:</p>
<ul>
<li><a href="http://blogs.igalia.com/xrcalvar/2016/02/01/web-engines-hackfest-according-to-me/">Streams API implementation on WebKit</a>.</li>
<li><a href="https://lists.webkit.org/pipermail/webkit-dev/2015-December/027840.html">MathML refactoring on WebKit</a>.</li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">Contributions to ARIA specification</a> and its support on WebKit.</li>
<li><a href="https://github.com/servo/servo/commits?author=mrobinson">Work on Servo</a>, the new browser engine by Mozilla.</li>
</ul>
<p>In our team we’re looking for a student willing to help on some of this topics.
Probably, the final work might be somehow related to <a href="https://drafts.csswg.org/css-grid/"><strong>CSS Grid Layout</strong></a>
where we’ve a bunch of peripheral tasks that would be really useful.
Some ideas off the top of my head:</p>
<ul>
<li><a href="https://developer.chrome.com/devtools">Dev Tools</a>/<a href="https://webkit.org/blog/5718/10-years-of-web-inspector/">Web Inspector</a> support.
For example, web authors would really love to have a way to show
the lines of a grid.</li>
<li>Complete <a href="https://github.com/w3c/csswg-test/tree/master/css-grid-1">CSS Grid Layout W3C Test Suite</a>.
This would be really useful to be sure that the implementations
from the different engines are interoperable.</li>
<li>Implement <a href="https://drafts.csswg.org/css-display/#valdef-display-contents"><code>display: contents;</code></a> in Blink and WebKit.
<a href="https://rachelandrew.co.uk/archives/2016/01/29/vanishing-boxes-with-display-contents/">This feature</a> might be required
to ship CSS Grid Layout without <a href="http://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">subgrids</a>.</li>
</ul>
<p>This is not meant to be an exhaustive list,
but just some examples so you can realize the type of tasks you’ll be doing.
Of course, depending on the profile of the selected person
we’ll choose the task that fits better.</p>
<p>If you’re interested in this internship or any other from the rest of the teams,
you can <a href="http://www.igalia.com/about-us/coding-experience">find all the details and conditions in our website</a>.
We’re a company spread all around the globe,
with igalians in different countries and timezones (from Seoul to San Francisco).
And, of course, these internships are remote friendly.</p>
<p>On top of that, <a href="http://www.igalia.com/nc/igalia-247/news/item/join-us-we-are-hiring/"><strong>Igalia is hiring</strong></a> too,
just in case you already have some experience and are looking
for a job.
Again <a href="http://www.igalia.com/nc/about-us/">you can find all the information at igalia.com</a>.</p>
<p>Last but not least, Igalia welcomes everyone and encourages applications
from members of underrepresented groups in the free software community.
We’re aiming to keep a diverse environment in our company.</p>
CSS Grid Layout from the inside out (HTML5DevConf 2015)2016-02-18T00:00:00Zhttps://blogs.igalia.com/mrego/2016/02/18/css-grid-layout-from-the-inside-out-html5devconf-2015/<p>As I announced in a <a href="http://blogs.igalia.com/mrego/2015/10/07/grid-layout-coast-to-coast/">previous blog post</a>
I was attending HTML5DevConf past October,
where I gave a talk about CSS Grid Layout.
The video of my talk is now online, so I thought it would be a good moment
to remember the days in sunny San Francisco.</p>
<h3 id="my-talk" tabindex="-1">My Talk <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/18/css-grid-layout-from-the-inside-out-html5devconf-2015/">#</a></h3>
<p>First of all, thanks to the organization for giving me the chance to speak
about <a href="https://drafts.csswg.org/css-grid/"><strong>CSS Grid Layout</strong></a> during the conference.</p>
<p>My talk was in one of the rooms of the <a href="http://www.thecjm.org/">Contemporary Jewish Museum</a>.
The room was full and people got really excited about CSS Grid Layout.
This is not a big surprise as I have the same feeling
every time someone speaks about it in any event.
Thanks for attending my talk and for the nice feedback. 😊</p>
<p>During the talk we reviewed the main features provided by Grid Layout spec
with live coding examples.
Then I also explained the work that the browser has to do to render a grid.
And finally we checked the current status on the different browser engines.</p>
<p>The <a href="http://people.igalia.com/mrego/talks/html5devconf-2015-css-grid-layout/">slides have been available on my blog</a> since the conference’s date,
but now the <a href="https://www.youtube.com/watch?v=3M_rbUYtWzk"><strong>video has been published in YouTube</strong></a>.
If you missed it, you’ve the opportunity to watch it now. I hope you enjoy it!</p>
<iframe class="center-block" width="640" height="360" src="https://www.youtube.com/embed/3M_rbUYtWzk" frameborder="0" allowfullscreen=""></iframe>
<span class="caption text-muted">Video of my talk: *CSS Grid Layout from the inside out*</span>
<h3 id="conference-highlights" tabindex="-1">Conference Highlights <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/18/css-grid-layout-from-the-inside-out-html5devconf-2015/">#</a></h3>
<p><a href="http://html5devconf.com/"><strong>HTML5DevConf</strong></a> is a huge conference,
lots of people around, several talks at the same time in different venues, etc.</p>
<p>The <strong>JavaScript language</strong>, as expected, was one of the hot topics.
There were some nice talks explaining the new stuff
from <a href="http://www.ecmascript.org/">ECMAScript 6 (ES6)</a>,
and even talking about some stuff from ES7.
For example, they were explaining things like <a href="http://tc39wiki.calculist.org/es6/arrow-functions/"><strong>arrow functions</strong></a>
that were implemented in <a href="https://developers.google.com/v8/">Chromium/V8</a>
by <a href="http://wingolog.org/archives/2015/06/18/arrow-functions-coming-to-chrome-45">some of my colleagues at Igalia</a>.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/02/arrow-functions.jpg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/arrow-functions.jpg" alt="Jamund Ferguson talking about arrow functions during his talk" class="center-block">
</a>
<span class="caption text-muted">Jamund Ferguson talking about arrow functions during his talk</span>
<p>However, I’d like to highlight the talk by <a href="https://twitter.com/@nparashuram">Parashuram Narasimhan</a>
called <a href="http://html5devconf.com/slides/Parashuram_Narasimhan_Measuring_web_Perf.pdf"><em>Measuring web Perf ? Lets write an app for that !!</em></a>.
During the talk he explained a tool called <a href="https://github.com/axemclion/browser-perf"><strong><code>browser-perf</code></strong></a>
which automates performance measurements in web pages.
For example, you can test scrolling on a page and get the FPS
and other performance parameters from DevOps tools.
The cool thing is that you can very easily create a bot to monitor this
and check if you’re suffering any regression.
If you’re interested you can <a href="https://www.youtube.com/watch?v=bnLOK85Di5g">watch the video too</a>.</p>
<h3 id="san-francisco" tabindex="-1">San Francisco <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/18/css-grid-layout-from-the-inside-out-html5devconf-2015/">#</a></h3>
<p>Traveling to California is a long trip, but it really paid off.
The weather was perfect and I had time for some sightseeing
(as you can see in <a href="https://www.flickr.com/photos/regocasasnovas/sets/72157662911166066/">my flickr album</a>).
San Francisco is a lovely city and, despite of the hills,
is a neat place for biking and walking.
On top of that, my fellow igalian <a href="https://twitter.com/abandonedwig">Martin Robinson</a>
was really kind and showed me some nice spots in the city.
Big thanks Martin!</p>
<a href="https://www.flickr.com/photos/regocasasnovas/24040548096/in/album-72157662911166066/">
<img src="https://blogs.igalia.com/mrego/files/2016/02/ocean-beach.jpg" alt="Sun and waves at Ocean Beach" class="center-block">
</a>
<span class="caption text-muted">Sun and waves at Ocean Beach</span>
<p>After spending my whole life <a href="https://en.wikipedia.org/wiki/Galicia_(Spain)">in front of the Atlantic Ocean</a>,
I couldn’t resist it so I went to <a href="https://en.wikipedia.org/wiki/Ocean_Beach,_San_Francisco">Ocean Beach</a>
in order to try (and taste) the Pacific Ocean for the first time.</p>
<h3 id="conclusion" tabindex="-1">Conclusion <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/18/css-grid-layout-from-the-inside-out-html5devconf-2015/">#</a></h3>
<p>Overall, it was an incredible experience in a wonderful city,
I fell in love with San Francisco. 😍</p>
<p>Regarding the conference itself,
it was nice to make an update
of my <a href="http://blogs.igalia.com/mrego/2015/06/30/css-grid-layout-is-just-around-the-corner-cssconf-us-2015/">presentation at CSS Conf 2015</a>.
In addition it was useful to follow the cutting edge stuff
around the web platform.</p>
<p>Hopefully I’ll have the possibility to keep showing you
all the awesome features provided by Grid Layout
in some other conferences during 2016. Fingers crossed!</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Lastly, as you probably know all the work around CSS Grid Layout
in <a href="https://www.chromium.org/blink">Blink</a> and <a href="https://webkit.org/">WebKit</a>
is the result of a collaboration between
<a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a> and <a href="http://www.igalia.com"><strong>Igalia</strong></a>.
Thanks folks for your support.</p>
Subgrids thinking out loud2016-02-12T00:00:00Zhttps://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/<p><strong>Subgrids</strong> has become a hot topic on the past weeks,
mostly due to an article by <a href="https://twitter.com/meyerweb">Eric Meyer</a> called
“<a href="http://meyerweb.com/eric/thoughts/2016/01/15/subgrids-considered-essential/"><em>Subgrids Considered Essential</em></a>”,
that shows some examples where subgrids can be really useful.
Which is somehow based on a <a href="http://fantasai.inkedblade.net/style/discuss/subgrid-markup/">previous post</a>
by <a href="https://twitter.com/fantasai">fantasai</a> on the same topic.
Also <a href="https://twitter.com/rachelandrew">Rachel Andrew</a>
has talked about subgrids on <a href="https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/">her blog</a>
and <a href="https://abookapart.com/products/get-ready-for-css-grid-layout">her last ebook about Grid Layout</a>
(which is quite handy to get an introduction to grid syntax
and main features).</p>
<p>As you probably know, <a href="http://www.igalia.com"><strong>Igalia</strong></a> has been working
on the <a href="http://drafts.csswg.org/css-grid/">CSS Grid Layout</a> implementation
on <a href="https://www.chromium.org/">Chromium/Blink</a>
and <a href="https://webkit.org/">Safari/WebKit</a> for a while.
As implementors we thought it would be nice to share our feedback on this topic,
so this week the team working on Grid Layout (<a href="https://twitter.com/svillarsenin">Sergio</a>,
<a href="https://twitter.com/lajava77">Javi</a> and myself)
arranged a meeting to review subgrids feature.
These are our initial thoughts about it
and a first draft proposal about a possible implementation.</p>
<h3 id="state-of-art" tabindex="-1">State of art <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h3>
<p><a href="https://drafts.csswg.org/css-grid/#subgrids">Subgrids feature</a>
allows us to create <strong>nested grids that share lines with the grid container</strong>.
We just define the size of the tracks on the main grid container,
and the subgrid use those sizes to layout its items.</p>
<p>In a grid, only direct children are grid items
and can be positioned on the grid. We can mark one of those items as subgrid,
and then the subgrid’s children will be like regular items
for the main grid.
This is pretty hard to explain with words so we’ll follow up with some examples
in the next section.</p>
<p>The feature has been marked as “<em>at-risk</em>” in the specification
since <a href="https://www.w3.org/TR/2014/WD-css-grid-1-20140123/#status">January 2014</a>
Which means that it could be moved to the next level (or version)
of the spec.</p>
<p>Current situation is that none of the grid implementations
(nor any web engine, neither any polyfill) support subgrids yet.
Mostly because it’s a pretty complex feature and
implementors have been focused on other parts of the spec.</p>
<h3 id="use-cases" tabindex="-1">Use cases <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h3>
<p>In order to understand what subgrids are, let’s explain a few use cases.
The canonical example for subgrids feature is a regular form
defined using a list:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Surname<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Location<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>Ideally we’d like to define a grid with the labels on the first column
and the inputs on the second one.
If we define the <code><ul></code> element as a grid container,
we’ll need to define the <code><li></code> as subgrids to be able to place
the labels and inputs as desired.
Without subgrids we’d need to remove the list
(probably replacing <code><ul></code> by <code><div></code> and removing <code><li></code> tags)
flattening our HTML and losing the semantic structure,
which is really bad from the accessibility point of view.</p>
<p>With subgrids support we could use the following CSS:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">ul</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> auto 1fr<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">li</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid</span><span class="token punctuation">:</span> subgrid<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">label</span> <span class="token punctuation">{</span><br> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">input</span> <span class="token punctuation">{</span><br> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/02/subgrid-form.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/subgrid-form.svg" alt="Example of form using subgrid" class="center-block">
</a>
<span class="caption text-muted">Example of form using subgrid</span>
<p>For this particular purpose, we could be using <a href="https://drafts.csswg.org/css-display/#box-generation"><code>display: contents;</code></a>
(which is only supported in Firefox so far) instead of subgrids.
Just applying <code>display: contents;</code> to the <code><li></code> elements
we’ll have the very same result.</p>
<p>On the other hand, another of the subgrids examples
that we can find out there is a catalog of shop items.
Imagine that those products are composed by
title, picture and description.</p>
<p>The HTML of each item would be something like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>product<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>product.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Long description...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And imagine that we use the following CSS:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 1fr 1fr<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">.product</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid</span><span class="token punctuation">:</span> subgrid<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">h1</span> <span class="token punctuation">{</span><br> <span class="token property">grid-row</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">img</span> <span class="token punctuation">{</span><br> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">p</span> <span class="token punctuation">{</span><br> <span class="token property">grid-row</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>The goal is that each product appears in a subgrid of 3 rows,
that way the titles and descriptions are horizontally aligned.
For that purpose we’re defining a main grid of 3 columns,
and a subgrid for each product with the 3 rows.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/02/subgrid-catalog.png">
<img src="https://blogs.igalia.com/mrego/files/2016/02/subgrid-catalog.png" alt="Example of catalog using subgrid" class="center-block">
</a>
<span class="caption text-muted">Example of catalog using subgrid</span>
<p>As we can see even if the title has 2 lines,
or independently of the lines in the description,
the items are properly aligned.</p>
<p>This cannot be achieved with <code>display: contents;</code>,
because of it’ll add all the products in a single row
(actually 3 rows in the grid).
Because we’re setting the row explicitly to
the <code><h1></code> (row 2), <code><img></code> (row 1) and <code><p></code> (row 3) elements.
Without subgrids, those rows cannot be automatically translated
to rows 5, 4 and 6,
when the products have filled the 3 columns defined on the main grid.</p>
<h3 id="main-issues" tabindex="-1">Main issues <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h3>
<p>This and next section are very technical
and should be discussed with the <a href="https://www.w3.org/Style/CSS/">CSS Working Group (CSS WG)</a>,
but we thought a blog post would be better to show examples than a simple mail
to <a href="https://lists.w3.org/Archives/Public/www-style/"><code>www-style</code></a>.</p>
<p>We’ve been reading the spec and found
some potential issues thinking about how to implement subgrids.
These are some of them in no specific order.</p>
<h4 id="margin-border-and-padding" tabindex="-1">Margin, border and padding <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h4>
<p>Probably the most important issue is the problem with
margin, border and padding on the subgrid.
And how they affect to the grid track sizing algorithm.</p>
<p>Let’s try to use a simple example to explain it,
imagine a 3x2 grid where we’ve a subgrid
taking the first row completely.</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> auto auto auto<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> auto auto<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid</span><span class="token punctuation">:</span> subgrid<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 4<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Imagine that each item’s width is 100px,
so the columns will be 100px width each one.</p>
<p>However, if we set for example the padding on the subgrid (e.g. <code>padding: 0px 50px;</code>),
we’ll have to do some extra operations to calculate the size of the tracks:</p>
<ul>
<li>First column, as it’s on the left edge of the subgrid
we’ll be adding 50px to the size computation. Resulting on a 150px track.</li>
<li>Second column is not affected by the padding, so it keeps being 100px.</li>
<li>Third column, is in a similar situation than the first one
because it’s on the right edge of the subgrid. So the final size is 150px.</li>
</ul>
<a href="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-padding.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-padding.svg" alt="Example of subgrid with padding" class="center-block">
</a>
<span class="caption text-muted">Example of subgrid with padding</span>
<p>The problem here is that the grid track sizing algorithm
works directly with the grid items.
So it’d need to know if the item is in one of the edges of the subgrid
in order to use the margin, border and/or padding to compute
the size of the track.</p>
<p>On a first sight this might seem doable,
but if we think on items spanning several tracks and nested subgrids
things become really complex.
For example, imagine that we’ve a nested subgrid that takes 2nd and 3rd columns
on the first row with <code>padding: 0px 25px;</code>.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-padding-nested.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-padding-nested.svg" alt="Example of nested subgrids with padding" class="center-block">
</a>
<span class="caption text-muted">Example of nested subgrids with padding</span>
<p>For each column of the main grid container, we’d need to take into account
the different paddings of the subgrids. So for each item we’d need to know
not only if it’s on the edge of the subgrid but also check the ancestors.</p>
<p>On a related note, having scrollbars on the subgrids
have similar issues related to track sizing.</p>
<h4 id="implicit-tracks-on-the-subgrid" tabindex="-1">Implicit tracks on the subgrid <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h4>
<p>The issue here is what happens when we get rid of explicit tracks
on the subgrid. According to the spec, the items in this situation
should use implicit tracks of the subgrid,
and not take tracks from the main grid.
Which means that they’re not aligned with the main grid
(they don’t share lines with it).</p>
<p>Let’s use an example to illustrate this issue:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>i1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>i2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>i3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid</span><span class="token punctuation">:</span> subgrid<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-implicit-tracks.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-implicit-tracks.svg" alt="Example of subgrid with implicit tracks" class="center-block">
</a>
<span class="caption text-muted">Example of subgrid with implicit tracks</span>
<p>As we can see the subgrid items <code>si3</code> and <code>si4</code> are placed in implicit tracks
of the subgrid. Those tracks has no relation with the main grid container,
literally from the spec: “<em>they effectively extend in a third dimension</em>”.
We cannot think in a use case for this particular topic,
and it seems really weird as the main goal of the subgrid is to share the lines
with the main grid container.</p>
<p>Besides, imagine a different example of an auto-sized column,
and some items from a subgrid in that column
that span in and out the explicit subgrid.
It’d be really complex from the grid track sizing algorithm point of view,
to determine the size of that auto-sized column of the main grid container.</p>
<h4 id="automatic-grid-span" tabindex="-1">Automatic grid span <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h4>
<p>In the previous examples we were defining subgrids explicitly setting both
the <em>grid position</em> (the initial column and row for the subgrid)
and the <em>grid span</em> (how many cells the subgrid takes in each direction).</p>
<p>However, we can define a subgrid just setting the <em>grid position</em>
with an automatic <em>grid span</em>. According to the spec,
the implicit tracks on the subgrid will determine the span.</p>
<p>Again hopefully one example can help to get the idea:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid</span><span class="token punctuation">:</span> subgrid<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>The subgrid’s <em>grid position</em> is set to the 2nd column and the 1st row.
Then the first 2 items (<code>si1</code> and <code>si2</code>) are placed in the tracks
from the main grid (2nd and 3rd column respectively).
But the last item (<code>si3</code>) get rid of tracks,
so it’s added on an extra implicit track on the subgrid
unrelated to the main grid container.
Because the subgrid doesn’t create implicit tracks on the main grid,</p>
<a href="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-automatic-grid-span.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-automatic-grid-span.svg" alt="Example of subgrid with automatic grid span" class="center-block">
</a>
<span class="caption text-muted">Example of subgrid with automatic grid span</span>
<p>This seems quite complex to manage, specially if the subgrid
cannot create implicit tracks on the main grid container.
Also, if we combine it with auto-placement
(so we don’t set the <em>grid position</em>),
finding the right position and span might be tricky.</p>
<p>On top of that, imagine that one of the items in the subgrid
is positioned using <code>grid-column: -1;</code>.
As the subgrid doesn’t have a <em>grid span</em> yet,
probably it’d be placed on the first column of the subgrid,
when we’d be expecting it to be on the last one.</p>
<h4 id="subgrid-only-in-one-axis" tabindex="-1">Subgrid only in one axis <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h4>
<p>The <code>subgrid</code> keyword can be set in both properties defining the grid
(<code>grid-template-columns</code> and <code>grid-template-rows</code>) or only in one of them.
If we set it only in one of them, we’re creating a subgrid only in one direction.</p>
<p>Let’s see one example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 150px 150px<span class="token punctuation">;</span> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 150px 150px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> subgrid<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / 3<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>si4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>In this case we’re defining a subgrid only for the columns direction,
so in order to calculate the size of the items in the 1st and 2nd columns
it use the track sizes defined in the main grid container.</p>
<p>However, for the rows we’re not setting anything, so it uses auto-sized rows.
This means that the rows will behave like in a regular nested grid,
completely independent of the parent grid container.</p>
<a href="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-only-one-axis.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/subgrids-issue-only-one-axis.svg" alt="Example of subgrid only in one axis" class="center-block">
</a>
<span class="caption text-muted">Example of subgrid only in one axis</span>
<p>Probably this is feasible to implement, but again it seems a weird feature,
we might need some good use cases to decide about it.</p>
<h4 id="descendants-navigation" tabindex="-1">Descendants navigation <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h4>
<p>Another issue with subgrids is that we can nest them as much as we want.
So, in order to determine the size of a track in the grid container,
we need to traverse not only the direct children, but also all the descendants.
This can have a huge performance impact if nested subgrids are abused.</p>
<p>Regarding this point, probably we’ve to simply live with it
and navigate all the descendants being aware of the performance penalty.</p>
<h4 id="grid-gaps" tabindex="-1">Grid gaps <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h4>
<p>Probably grid gaps properties should be ignored in the subgrids.
We want the items to be aligned with the main grid container,
so having different gaps seems really strange.</p>
<p>This is not in the spec, but we guess that the reason is that
grid gaps were added after subgrids, so that part of the spec was not updated.</p>
<h4 id="other" tabindex="-1">Other <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h4>
<p>There are other things that we didn’t explore in detail. For example:</p>
<ul>
<li>Named grid lines from the main grid container used in the subgrids.</li>
<li>Positioned items in the subgrids.</li>
<li>Subgrids with orthogonal flows.</li>
</ul>
<p>And we’re sure there are more things that we’re missing at this moment.</p>
<h3 id="draft-proposal" tabindex="-1">Draft proposal <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h3>
<p>As we can see there are a bunch of potential issues,
of course they need a deeper analysis and further discussions,
but the complexity of the whole feature seems not small at all.</p>
<p>For this reason, we might want to think in a simpler proposal.
<a href="https://twitter.com/fremycompany">François Remy</a> has already sent
<a href="https://lists.w3.org/Archives/Public/www-style/2016Jan/0159.html">one to the CSS WG mailing list</a>.</p>
<p>We’ve been thinking in another idea, trying to fulfill
the use cases described previously in this post,
and avoid the issues as much as possible.
This is a pre-alpha proposal, so take it with a grain of salt.</p>
<p>The ideas would be to have a limited support of subgrids:</p>
<ul>
<li>
<p>Make the subgrid pretty similar to <code>display: contents;</code>,
so we cannot set margin, border or padding on it.
That will simplify the calculations needed to determine
the size of the tracks and the items.</p>
<p>Main difference with <code>display: contents;</code> is that the subgrid
will allow to translate positions depending on the final placement
on the main grid container.
Like in the use case of the shop catalog.</p>
</li>
<li>
<p>Remove implicit tracks on the subgrid,
so we need to always set a <em>grid span</em>
(how many columns and rows the subgrid takes) beforehand.</p>
<p>Items trying to be placed on the implicit grid of the subgrid,
would end up on the first cell of the subgrid.
For items spanning outside the explicit grid,
the span would be truncated at the end edge of the subgrid.</p>
</li>
<li>
<p>It seems clear that items in the subgrids need to be positioned
before the items in the main grid container.
And once all the positions are resolved,
we could try to run the grid track sizing algorithm as usual.</p>
</li>
<li>
<p>Probably on an initial approach only allowing subgrids
in both axis might be enough.</p>
</li>
</ul>
<p>With this proposal the use cases explained in the first section
would be covered, we’d need to be more specific on the CSS,
but they’ll work.</p>
<p>We’d lack the chance to set CSS properties on the subgrid itself,
but we could add an extra item on the subgrid that spans the whole subrid
and paint a border, background or whatever is needed.
Not an ideal solution anyway.</p>
<h3 id="wrap-up" tabindex="-1">Wrap-up <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h3>
<p>This post is mostly a braindump from the Igalia team working on CSS Grid Layout,
after one day discussing about this part of the spec.
We just want to share it with the rest of the web community,
the CSS WG and anyone interested on the topic.
In order to help to move forward the decision regarding
what do to with subgrids in the CSS Grid Layout specification.</p>
<p>Lots of questions about subgrids are still hanging in the air:</p>
<ul>
<li>Defer them to level 2?</li>
<li>Simplify them and keep them on level 1?</li>
<li>Keep them as they are and wait for subgrids before shipping CSS Grid Layout?</li>
</ul>
<p>We think there aren’t good answers to these questions right now,
hopefully we all together will find the right solution
and find a final solution that makes happy all the involved parties. 😄</p>
<p>Last but not least, there’s going to be a <a href="http://fantasai.inkedblade.net/style/events/grid-workshop">CSS Grid Layout Workshop
in New York City</a>
by the end of the month organized by one of the spec editors
(<a href="https://twitter.com/fantasai">fantasai</a>).
My colleague <a href="https://twitter.com/svillarsenin">Sergio</a>,
who is the maintainer of Grid Layout code in Blink and WebKit
will be participating in this event.
Hopefully this and other topics will be clarified there,
and the specification could move to Last Call Working Draft (LCWD)
towards Candidate Recommendation (CR)!</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Finally, we’d like to thank again <strong><a href="http://www.bloomberg.com/company/">Bloomberg</a>
for supporting <a href="http://www.igalia.com">Igalia</a> in the development
of CSS Grid Layout</strong>.</p>
<h2 id="translations" tabindex="-1"><i class="fa fa-globe"></i> Translations <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/">#</a></h2>
<ul>
<li>Russian (February 18, 2016):
<a href="http://css-live.ru/articles/mysli-vslux-o-podsetkax-v-css-grid-layout.html">Мысли вслух о подсетках в CSS Grid Layout</a></li>
</ul>
Deep Dive into Grid Layout Placement2016-02-01T00:00:00Zhttps://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/<p>During the last months as part of my work in <a href="http://www.igalia.com">Igalia</a>
I’ve been focused on finishing the new/missing bits of
the <strong>CSS Grid Layout Blink’s implementation related to items placement</strong>.
In summary the task was mostly related to 2 things:</p>
<ul>
<li>
<p>Support <em>implicit grid before explicit</em>.
So the grid can add tracks on demand not only on the growing direction
(usually right/bottom) but also on the opposite one.</p>
</li>
<li>
<p>Fix <em>unknown named grid lines resolution</em>.
This is the case when an item is placed in a line called “<code>foo</code>”,
but no lines with that name exist in the grid.</p>
</li>
</ul>
<p>These might seem quite simple tasks,
but they implied quite a lot of changes in the underlying implementation.
I ended up refactoring all the code to resolve grid positions
in order to complete them.
I even wrote <a href="https://docs.google.com/document/d/1D9x8IUZxirhc3RUma16L6p0yJGv8h199GMnmBA6zLAI/edit">a document explaining the whole plan</a>
and all the technical details,
where you can find links to all the related patches.</p>
<p>Now that we’ve finished this, it’s time to explain how you can use it.
Although my colleague <a href="http://blogs.igalia.com/svillar/2014/03/31/adventures-in-the-grid/">Sergio already wrote about this in 2014</a>,
the specification has changed since that time,
so I think it’s better to try to explain the whole thing from scratch.
This post is a kind of summary with examples of
<a href="https://drafts.csswg.org/css-grid/#placement">“<em>Placing Grid Items</em>” section of the CSS Grid Layout spec</a>.</p>
<h3 id="grid-lines" tabindex="-1">Grid lines <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>This is probably one of the most important concepts of the grid layout spec.
The <strong>grid lines</strong> are the ones dividing horizontally and vertically a grid.
And they’re actually <strong>numbered</strong>, starting at <code>1</code>.</p>
<p>Let’s use a 3x2 grid as example to explain how this works:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 300px 200px 100px<span class="token punctuation">;</span><br> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 50px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines.svg" alt="Numbered grid lines example"></a>
<span class="caption text-muted">Numbered grid lines example</span></p>
<h3 id="grid-placement-properties" tabindex="-1">Grid placement properties <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>In order to position the items inside the grid container,
you need to use the <a href="https://drafts.csswg.org/css-grid/#line-placement">grid placement properties</a>.
These properties are:</p>
<ul>
<li><strong><code>grid-column-start</code></strong>: Set the first vertical line for the item.</li>
<li><strong><code>grid-column-end</code></strong>: Set the last vertical line for the item.</li>
<li><strong><code>grid-row-start</code></strong>: Set the first horizontal line for the item.</li>
<li><strong><code>grid-row-end</code></strong>: Set the last horizontal line for the item.</li>
</ul>
<p>With these properties you define the area where the grid item will be placed.
In order to do that, you use the line numbers.</p>
<p>The initial value for these properties is <code>auto</code>, which makes possible
that items are automatically placed looking for empty cells inside the grid.
For more information about this, please <a href="http://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">review a previous post on the matter</a>.</p>
<p>On top of that, there’re some handy <a href="https://drafts.csswg.org/css-grid/#placement-shorthands">shorthands</a>:</p>
<ul>
<li><strong><code>grid-column</code></strong>: Shorthand for <code>grid-column-start</code> and
<code>grid-column-end</code> properties.</li>
<li><strong><code>grid-row</code></strong>: Shorthand for <code>grid-row-start</code> and <code>grid-row-end</code>
properties.</li>
<li><strong><code>grid-area</code></strong>: Shorthand to set the 4 placement properties in
just one declaration.</li>
</ul>
<p>So, imagine that you add the following item in the previous grid:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">grid-column-end</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span><br> <span class="token property">grid-row-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> grid-row-end 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Probably easier to read if you use some shorthands:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2 / 4<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>This means that the grid item will be placed taking the 2nd and 3rd columns
in the first row.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines-item.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines-item.svg" alt="Place item using line numbers example"></a>
<span class="caption text-muted">Place item using line numbers example</span></p>
<h3 id="cell-spanning" tabindex="-1">Cell spanning <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>Previous item was spanning 2 columns (2nd and 3rd ones) referencing the lines.
You could do the same using the <strong><code>span</code></strong> keyword,
together with the number of cells you want to span.</p>
<p>So, you could place the item in the very same position using:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2 / span 2<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines-item-span.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines-item-span.svg" alt="Place item using span example"></a>
<span class="caption text-muted">Place item using <code>span</code> example</span></p>
<p>Note that here you’re not setting the end line for the row.
This means that <code>grid-row-end</code> takes a value of <code>auto</code>.
In this case <code>auto</code> defaults to a span of one.</p>
<h3 id="negative-line-numbers" tabindex="-1">Negative line numbers <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>So far we’ve only seen positive numbers,
but lines have also <strong>negative</strong> indexes.
Negative numbers allow you to reference the lines
starting from the end of the grid.</p>
<p>Following with the same example, you could place the item
again in the same position using the negative indexes:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> -3 / -1<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> -3 / -2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines-item-negative.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines-item-negative.svg" alt="Place item using negative line numbers example"></a>
<span class="caption text-muted">Place item using negative line numbers example</span></p>
<p>This might be really useful in some situations.
For example, if you want to be sure that the item is in the last column,
independently of the number of tracks,
you’ll just need to set: <code>grid-column-end: -1;</code>.</p>
<h3 id="named-grid-lines" tabindex="-1">Named grid lines <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>Not only that, but you can also <strong>name the grid lines</strong>,
so you don’t need to remember the specific number to reference to them.</p>
<p>Let’s modify the definition of the grid,
keeping the size of tracks but adding names to the lines:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [start] 300px [main] 200px [aside] 100px [end]<span class="token punctuation">;</span><br> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [top] 100px [middle] 50px [bottom]<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And again if we want to place the item in the same position,
we just need to reference the name of the lines:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> main / end<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> top / middle<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines-item-named.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-lines-item-named.svg" alt="Place item using line names example"></a>
<span class="caption text-muted">Place item using line names example</span></p>
<p>One line can have several names, you just need to set them in the definition:
<code>grid-template-rows: [top start] 100px [middle center] 50px [bottom end];</code>.</p>
<p>Also the names of the lines can be repeated.
To reference them you’ve to use a number that can be again positive or negative.
Let’s use a different example to showcase this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [col] 200px [gap] 50px [col] 200px [gap] 50px [col] 200px [gap]<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And imagine that you place some items like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> col 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> col 1 / gap 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> col -1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-named-grid-lines-items.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-named-grid-lines-items.svg" alt="Place items with repeated named grid lines example"></a>
<span class="caption text-muted">Place items with repeated named grid lines example</span></p>
<p>And of course, you can span to a named grid line:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> col 2 / span 2 gap<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-named-grid-lines-item-span.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-named-grid-lines-item-span.svg" alt="Place item spanning to named grid line example"></a>
<span class="caption text-muted">Place item spanning to named grid line example</span></p>
<h3 id="grid-areas" tabindex="-1">Grid areas <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>Better still, you can define <strong>grid areas</strong> and place items directly on them.
You have to use the <a href="https://drafts.csswg.org/css-grid/#grid-template-areas-property"><code>grid-template-areas</code> property</a>
to put names to the different areas in your grid.
And you could use the <code>grid-area</code> shorthand directly to place the items.</p>
<p>Let’s use a bigger grid (5x4) to show an example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 100px 100px 100px 100px<span class="token punctuation">;</span><br> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 100px 100px 100px<span class="token punctuation">;</span><br> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span><br> <span class="token string">'title title title title aside'</span><br> <span class="token string">'nav main main main aside'</span><br> <span class="token string">'nav main main main aside'</span><br> <span class="token string">'footer footer footer footer footer'</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And position one item in each of the areas:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-area</span><span class="token punctuation">:</span> title<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-area</span><span class="token punctuation">:</span> nav<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-area</span><span class="token punctuation">:</span> main<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-area</span><span class="token punctuation">:</span> aside<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-area</span><span class="token punctuation">:</span> footer<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-areas.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-areas.svg" alt="Place items inside grid areas example" class="center-block">
</a>
<span class="caption text-muted">Place items inside grid areas example</span>
<h3 id="grid-areas-and-named-grid-lines" tabindex="-1">Grid areas & Named grid lines <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>One interesting thing about areas and placement is that grid areas
create implicit names for the grid lines surrounding them.
These implicit names use the “<code>-start</code>” and “<code>-end</code>” suffixes.
And you can reference those lines when placing an item,
instead of using the whole area.</p>
<p>E.g. the “<code>title</code>” area from previous example
creates 4 implicit names for the lines (2 in each axis):</p>
<ul>
<li>Left line: “<code>title-start</code>”</li>
<li>Right line: “<code>title-end</code>”</li>
<li>Top line: “<code>title-start</code>”</li>
<li>Bottom line: “<code>title-end</code>”</li>
</ul>
<p>Following with that example you could place an item
using the implicit names:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> main-start / aside-end<span class="token punctuation">;</span><br> <span class="token property">grid-row</span><span class="token punctuation">:</span> title-start / nav-end<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-areas-lines.svg">
<img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-areas-lines.svg" alt="Place item using implicit names from grid areas example" class="center-block">
</a>
<span class="caption text-muted">Place item using implicit names from grid area</span>
<p>And the same can happen the other way around.
If you name lines using those suffixes, you’re actually creating implicit areas.
So, we could just create the very same grid using named grid lines:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [title-start nav-start footer-start] 100px [main-start nav-end] 100px 100px 100px [aside-start title-end main-end] 100px [aside-end footer-end]<span class="token punctuation">;</span><br> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [title-start aside-start] 100px [nav-start main-start title-end] 100px 100px [footer-start nav-end main-end aside-end] 100px [footer-end]<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>All the examples of items positioned in this section
will be exactly in the same place with this new grid.</p>
<h3 id="implicit-grid" tabindex="-1">Implicit grid <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>With the <a href="https://drafts.csswg.org/css-grid/#grid-definition">grid definition properties</a>
(<code>grid-template-columns</code>, <code>grid-template-rows</code> and <code>grid-template-areas</code>)
you determine the explicit number of tracks (columns and rows) in your grid.
However, grid spec allows you to place items outside of the explicit grid.
In order to support that, <strong>implicit tracks</strong> are created automatically,
the size of these tracks is controlled
by <a href="https://drafts.csswg.org/css-grid/#auto-tracks"><code>grid-auto-columns</code> and <code>grid-auto-rows</code> properties</a>.
In the following examples I’ll use <span style="color: red;">red color</span>
to highlight the implicit lines.</p>
<p>This time let’s use a simple 2x1 grid:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px 200px<span class="token punctuation">;</span><br> <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And imagine that you place an item in the 5th column (<code>grid-column: 5;</code>).
As the grid only has 2 columns, 3 implicit columns
will be added in order to position the item.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid.svg" alt="Implicit grid example"></a>
<span class="caption text-muted">Implicit grid example</span></p>
<p>Again you can also create implicit tracks with items that span several cells.
For example, if an item takes 3 columns starting on the 2nd one
(<code>grid-column: 2 / span 3</code>);</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid-span.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid-span.svg" alt="Implicit grid with span example"></a>
<span class="caption text-muted">Implicit grid with span example</span></p>
<p>Originally, the implicit tracks could only be added at the end.
But now it’s possible to add implicit tracks before the explicit grid.
For example, if you place an item using <code>grid-column: -5;</code>
it’ll add 2 columns on the left and it’ll be placed in the <em>-2nd</em> column.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid-before.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid-before.svg" alt="Implicit grid before explicit example"></a>
<span class="caption text-muted">Implicit grid before explicit example</span></p>
<h3 id="implicit-grid-and-named-grid-lines" tabindex="-1">Implicit grid & Named grid lines <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>But this is not the only way to create implicit tracks,
you can also create them if you use undefined named grid lines.
This is more a way to show mistakes on the user CSS than a feature itself,
but maybe someone finds it useful.
The idea is that all the lines in the implicit grid
will take any random name you might need to position an item.</p>
<p>The basic example is placing items referencing
a nonexistent line called “<code>foo</code>”.
For example you will create 3 implicit columns
(1 before and 2 after the explicit grid)
with the following items:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> foo<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2 / span 2 foo<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> -1 foo<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid-undefined-named-lines.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid-undefined-named-lines.svg" alt="Implicit grid using undefined named grid lines example"></a>
<span class="caption text-muted">Implicit grid using undefined named grid lines example</span></p>
<p>Note that the simplest example <code>grid-column: foo</code>
is being placed in the 4th column
(adding an extra empty column just after the explicit grid).
This is because first line that is considered to be called “<code>foo</code>”
is the first implicit line (line 4),
so last line of the grid (line 3) is not included.</p>
<p>Also, the last item <code>grid-column: -1 foo</code> is placed on the <em>-1th</em> column
(maybe you was not expecting that).
This is because of you start looking for a line named “<code>foo</code>”
from the edge of the explicit grid.
So, you ignore lines -1, -2 and -3 (as they’re not called “<code>foo</code>”)
and consider line -4 (first line on the implicit grid) to have that name.</p>
<p>This is a bit trickier if the line actually exists,
as you’ve to count it too in order to place the item.
Specially it’s complex if you’re using span to a named grid line,
but there’re not enough lines.
In that case only implicit lines in the search direction
are considered to have that name.</p>
<p>Again, hopefully an example can help to understand this.
Let’s add a name to the middle line in the previous example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px [middle] 200px<span class="token punctuation">;</span><br> <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And now, let’s use place a few items referencing that “<code>middle</code>” line:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 3 middle<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> span 2 middle / 5<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> -4 / span middle<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid-named-lines.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-implicit-grid-named-lines.svg" alt="Implicit grid using more named grid lines than available example"></a>
<span class="caption text-muted">Implicit grid using more named grid lines than available example</span></p>
<p>The strange case here is <code>grid-column: span 2 middle / 5;</code>,
as you can see it takes from <em>-1th</em> column to 4th column (both included).
The item ends at line 5,
and it has to span 2 lines called “<code>middle</code>” to find the start.
You could think that it should count line 4 and line 2,
but, as explained before,
you have to start counting lines from the edge of the explicit grid.
So you actually count line 2
and then you’ve to consider the implicit lines on the left
to find the start position (line -4).</p>
<h3 id="special-cases" tabindex="-1">Special cases <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>Grid placement properties have a few special situations
that are resolved by the <a href="https://drafts.csswg.org/css-grid/#grid-placement-errors">conflict handling section of the spec</a>.</p>
<p>For example, if you place an item where
the end line is before than the start line, both lines are swapped.
Thus, something like <code>grid-column: 5 / 2;</code> would become <code>grid-column: 2 / 5;</code>.</p>
<p>Another situation is the one in which you have <code>span</code>
in both the start and end positions.
The <code>span</code> for the end position is discarded.
So, <code>grid-column: span 2 / span 3;</code> would become <code>grid-column: span 2;</code>.
Which will use the grid placement algorithm to find an empty area
(of 2 columns in this particular example) to position itself.</p>
<p>Last one is the case when you only have a <code>span</code> to named grid line.
In that case, it’s replaced by <code>span 1</code>.
E.g. <code>grid-column: span foo;</code> will become <code>grid-column: span 1;</code>.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-special-cases.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-special-cases.svg" alt="Placement special cases example"></a>
<span class="caption text-muted">Placement special cases example</span></p>
<h3 id="recap" tabindex="-1">Recap <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>If you have read that far it seems you’re really interested on CSS Grid Layout.
The main conclusion is that the specification is really flexible
regarding how to place items on the grid.
As you can see there’re quite a lot of different ways
to position an item in the very same place.
Probably each person will get used to a few of them
and just forget about the rest.</p>
<p>IMHO the basic stuff (line indexes, spans, line names and areas)
is quite straightforward.
And the implicit grid is not that hard either.
Then negative indexes bring some fun.
However undefined named grid lines behavior is really tricky
(hopefully not something you should care about anyway).
But it’s true that I’m biased as I’ve been dealing with this for a long time.</p>
<p>Last, I thought it would be nice to finish this with a <strong>big example</strong>
which uses most of the things described in this post.
If you got it right and don’t get confused at all
you’re mastering grid layout placement. Congrats! 😄</p>
<p>This is the definition of the grid container used in this example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [left] 200px [main-start] 100px [center] 100px 100px [main-end] 50px 50px [right]<span class="token punctuation">;</span><br> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> [top title-start] 50px [title-end main-start] 200px [main-end center] 150px 100px [bottom]<span class="token punctuation">;</span><br> <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><br> <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>And in the next picture you can see how different items will be placed.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2016/02/example-grid-big.svg"><img src="https://blogs.igalia.com/mrego/files/2016/02/example-grid-big.svg" alt="Placement big example"></a>
<span class="caption text-muted">Placement big example</span></p>
<p>You can try it live in our examples repository:
<a href="http://igalia.github.io/css-grid-layout/grid-placement.html"><strong>http://igalia.github.io/css-grid-layout/grid-placement.html</strong></a></p>
<h3 id="status" tabindex="-1">Status <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h3>
<p>As commented on the introduction <a href="https://code.google.com/p/chromium/issues/detail?id=444011"><strong>Blink’s implementation</strong></a>
should support now (Chrome 50+) all these different placement possibilities.
Igalia has been working on this implementation
and we’re porting it now to <a href="https://bugs.webkit.org/show_bug.cgi?id=153488"><strong>WebKit</strong></a> too.</p>
<p>On the other side, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1009776"><strong>Gecko</strong></a>
has already support for it too, in this case developed by Mozilla.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Finally, as usual I’d like to highlight one more time
that all this work has been done as part of
a <strong>collaboration between <a href="http://www.igalia.com">Igalia</a> and
<a href="http://www.bloomberg.com/company/">Bloomberg</a></strong>.
Big thanks for your support!</p>
<h2 id="translations" tabindex="-1"><i class="fa fa-globe"></i> Translations <a class="header-anchor" href="https://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/">#</a></h2>
<ul>
<li>Russian (February 3, 2016):
<a href="http://css-live.ru/articles/podrobno-o-razmeshhenii-elementov-v-grid-raskladke-css-grid-layout.html">Подробно о размещении элементов в грид-раскладке (CSS Grid Layout)</a></li>
<li>Spanish (February 7, 2016): <a href="https://escss.blogspot.com/2016/02/colocacion-items-css-grid-layout.html">Guía exhaustiva de colocación de elementos en el Grid Layout</a></li>
<li>French (February 23, 2016): <a href="https://medium.com/@patrickbrosset/le-positionnement-dans-les-grilles-css-c46a2740c33a#.5umvl8r6x">Le positionnement dans les Grilles CSS</a></li>
</ul>
Layout Topics on the Web Engines Hackfest 20152015-12-21T00:00:00Zhttps://blogs.igalia.com/mrego/2015/12/21/layout-topics-on-the-web-engines-hackfest-2015/<p>As usual <a href="http://www.igalia.com">Igalia</a> hosted the <a href="http://www.webengineshackfest.org"><strong>Web Engines Hackfest
2015</strong></a> in A Coruña two weeks ago. This is a
special event where the main focus is hacking on the different engines of the
open web platform. The developers discuss their plans and define tasks during
the breakout sessions.</p>
<p>Despite of the unconference format, as people liked them past year, we arranged
a few talks during the hackfest from a wide range of topics. You can find the
slides on <a href="https://github.com/Igalia/webengineshackfest/wiki#scheduling">the hackfest
wiki</a> and the
recordings will be published online soon (stay tuned following
<a href="https://twitter.com/webhackfest"><strong><code>@webhackfest</code></strong></a> on twitter).</p>
<p>Regarding my participation I was mostly interested on layout topics. Of course
you can think on <a href="https://drafts.csswg.org/css-grid/"><strong>CSS Grid Layout</strong></a>, but
I also approached the work around
<a href="http://www.mathml-association.org/MathMLinHTML5/"><strong>MathML</strong></a> implementation
on <a href="http://webkit.org">WebKit</a> that my mate
<a href="https://twitter.com/alexgcastro">Álex</a> has been leading lately.</p>
<h3 id="css-grid-layout" tabindex="-1">CSS Grid Layout <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/12/21/layout-topics-on-the-web-engines-hackfest-2015/">#</a></h3>
<p>It’s been a while since I don’t write a post about grid layout. We’ve been
working on lots of things but lately I’ve been focused on supporting a new
feature on <a href="http://www.chromium.org/blink">Blink</a>, that I usually call
“<strong>implicit grid before explicit</strong>”.</p>
<p>Trying to explain it briefly, the <a href="https://drafts.csswg.org/css-grid/#implicit-grids">implicit grid
feature</a> basically means that
the grid can add tracks (columns or rows) on demand. So, if you place items
outside of the grid, the implicit tracks will be created. Initially you could
only add those implicit tracks after the explicit grid (on the right/bottom),
but now the spec allows you to add them before (on the left/right).</p>
<p><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/12/example-implicit-grid-before-explicit-grid.png" alt="Example of a 2x2 grid with implicit columns before and after the explicit grid">
<span class="caption text-muted">Example of a 2x2 grid with implicit columns
before and after the explicit grid</span></p>
<p>In order to support this, I’ve ended up refactoring all the placement code. I
wrote a <a href="https://docs.google.com/document/d/1D9x8IUZxirhc3RUma16L6p0yJGv8h199GMnmBA6zLAI/edit">small document with the
plan</a>
where you can get a more detailed explanation about this feature. During the
hackfest I worked on the <a href="https://codereview.chromium.org/1529083006/">patch that adds initial support for
this</a>, which is right now in the
review process and will hopefully land before the end of the year.</p>
<p>On the other hand, taking advantage of being together with
<a href="https://twitter.com/lajava77">Javi</a> and
<a href="https://twitter.com/svillarsenin">Sergio</a> for a few days, we discussed about
some of the hot topics in the current grid layout implementation: intrinsic
sizes (<code>min-content</code> and <code>max-content</code> constraints are not
fully supported on <a href="https://codereview.chromium.org/1504403002/">Blink</a> and
<a href="https://bugs.webkit.org/show_bug.cgi?id=152004">WebKit</a> yet) and <a href="https://codereview.chromium.org/815833005/">orthogonal
flows</a>.</p>
<p><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/12/grid-orthogonal-flows-whiteboard.jpg" alt="Whiteboard discussion about grid track sizing algorithm and orthogonal flows">
<span class="caption text-muted">Whiteboard discussion about grid track sizing
algorithm and orthogonal flows</span></p>
<p>Last thing related to grid layout, <a href="https://twitter.com/jxs01">João Oliveira</a>
was talking to me about how he can start contributing to it. My two ideas were:
adding some support for grid layout on the <a href="https://developer.chrome.com/devtools">Chrome
DevTools</a> or helping on the <a href="http://test.csswg.org/shepherd/search/testcase/spec/css-grid-1/"><strong>W3C tests
suite</strong></a>.</p>
<p>He created his <a href="https://github.com/w3c/csswg-test/pull/976">first W3C test</a> and
it’s been already <a href="http://test.csswg.org/shepherd/testcase/::781637eb6880/grid-support-grid-auto-columns-rows-001/spec/css-grid-1/">integrated in the
suite</a>
(forgive me for the picky review 😇 ). Maybe he keeps contributing with more
tests (or someone else does it), I’ll be more than happy to help with reviews
and trying to solve any doubt regarding grid layout spec. If you’re interested
don’t hesitate to contact me. Having a good test suite would be really nice to
check the interoperability of the different implementations.</p>
<h3 id="mathml" tabindex="-1">MathML <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/12/21/layout-topics-on-the-web-engines-hackfest-2015/">#</a></h3>
<p>During the hackfest <a href="https://twitter.com/alexgcastro">Álex</a> and
<a href="http://www.maths-informatique-jeux.com/blog/frederic/">Fred</a> explained the
current status of <strong>MathML implementation in WebKit</strong> and the refactoring plans
they have.</p>
<p>Main issue is that the MathML implementation in WebKit is unmaintained since
some time ago. In addition, trying to add new features on top of current
implementation is really complex, as it’s inhering flexbox logic which,
ironically, removes a lot of flexibility to do the math layouts.</p>
<p><a href="https://www.flickr.com/photos/webhackfest/23144428143/"><img src="https://blogs.igalia.com/mrego/files/2015/12/mathml-breakout-session-alex-fred.jpg" alt="Álex and Fred during the MathML breakout session"></a>
<span class="caption text-muted">Álex and Fred during the MathML breakout
session</span></p>
<p>The plan is to remove the dependency with flexbox, and there’re <a href="https://github.com/alexgcastro/webkit/tree/MathMLLayout">some
patches</a> already doing
it. This code will start to be upstreamed in the short term.
The <a href="https://lists.webkit.org/pipermail/webkit-dev/2015-December/027840.html"><strong>proposal</strong> has been shared with the rest of the WebKit
community</a>
and people seem to agree with the plan.</p>
<p>This code simplification will make that MathML has its own renderers in charge
of the different MathML layouts. This hopefully might be a step in the right
direction considering getting MathML back in Blink.</p>
<p><a href="https://twitter.com/alexgcastro">Álex</a>,
<a href="http://www.maths-informatique-jeux.com/blog/frederic/">Fred</a> and
<a href="https://twitter.com/lajava77">Javi</a> have been working really hard on this
refactoring, and I was contributing with my tiny bit during the hackfest. I hope
to find time next year and try to help to move this forward.</p>
<h3 id="thanks" tabindex="-1">Thanks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/12/21/layout-topics-on-the-web-engines-hackfest-2015/">#</a></h3>
<p>Last but not least, <strong>big thanks</strong> to each person involved on the hackfest, from
people attending to everyone giving us a hand on the different topics. We really
hope you enjoyed this edition. See you all in the next one! 😉</p>
<a href="http://www.webengineshackfest.org/#sponsors">
<img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/12/web-engines-hackfest-2015-sponsors.png" alt="Web Engines Hackfest 2015 sponsors: Collabora and Igalia">
<span class="caption text-muted">Web Engines Hackfest 2015 sponsors: Collabora
and Igalia</span>
</a>
<p>Thanks again to the sponsors <a href="http://www.collabora.com"><strong>Collabora</strong></a> and
<a href="http://www.igalia.com"><strong>Igalia</strong></a> for making possible such a great event.</p>
Grid Layout Coast to Coast2015-10-07T00:00:00Zhttps://blogs.igalia.com/mrego/2015/10/07/grid-layout-coast-to-coast/<p>So <a href="https://blogs.igalia.com/mrego/2015/06/03/grid-and-the-city/">here we’re again</a>,
this time to announce that I’ll be presenting my talk
<a href="http://html5devconf.com/speakers/manuel_rego.html">“<em>CSS Grid Layout from the inside out</em>”</a>
at <a href="http://html5devconf.com/"><strong>HTML5DevConf Autumn 2015</strong></a> (19-20 October).
I’m really excited about this new opportunity to show the world
the wonders of <a href="https://drafts.csswg.org/css-grid/">CSS Grid Layout specification</a>,
together with the “dark” stuff that happens behind the scenes.
Thanks to the organization for counting me in. 😃</p>
<p><a href="http://html5devconf.com/speakers/manuel_rego.html"><img src="https://blogs.igalia.com/mrego/files/2015/10/html5devconf-manuel-rego-css-grid-layout.png" alt="My talk announced at the HTML5DevConf website"></a>
<span class="caption text-muted">My talk announced at the <strong>HTML5DevConf</strong>
website</span></p>
<p>During the talk I’ll give a short introduction to the grid layout syntax and
features, including some of the most recent developments, like the much awaited
<a href="https://drafts.csswg.org/css-grid/#gutters">grid gutters</a> (which will hopefully
<a href="https://codereview.chromium.org/1309513008/">land very soon</a>).
<a href="http://www.igalia.com"><strong>Igalia</strong></a> has been working on the CSS Grid Layout
implementation on <a href="http://www.chromium.org/blink">Blink</a> and
<a href="http://www.webkit.org/">WebKit</a> since 2013 as part of a collaboration with
<a href="http://www.bloomberg.com/"><strong>Bloomberg</strong></a>.
Right now we’re closer than ever to ship the feature in
<a href="http://www.chromium.org/">Chromium</a>!</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>This’ll be my second grid layout talk this year
after <a href="https://blogs.igalia.com/mrego/2015/06/30/css-grid-layout-is-just-around-the-corner-cssconf-us-2015/">the one at <strong>CSSConf</strong> in New York</a>.
It’ll be my first time at <strong>HTML5DevConf</strong> and
my first time in San Francisco too.
It seems a huge conference full of <a href="http://html5devconf.com/speakers.html">great speakers and interesting
talks</a>.
I really hope that people like my talk,
anyway I’m sure I’ll enjoy the conference and learn a lot
about the latest cool stuff that is moving around the web platform.
Please, feel free to ping me if you want to talk about
grid, new layout models, the web and/or <strong>Igalia</strong>.</p>
<p>Last but not least,
my igalian mate <a href="http://abandonedwig.info/"><strong>Martin Robinson</strong></a>
who is currently hacking on <a href="https://github.com/servo/servo">Servo</a>
will be attending the conference too.
Don’t hesitate to ask him any question about web browser engines,
he knows them very well. 😉</p>
CSS Grid Layout is just around the corner (CSSConf US 2015)2015-06-30T00:00:00Zhttps://blogs.igalia.com/mrego/2015/06/30/css-grid-layout-is-just-around-the-corner-cssconf-us-2015/<p>Coming back to real life after a wonderful week in New York City is not that easy, but here we’re on the other side of the pond writing about CSS Grid Layout again.</p>
<p>First kudos to <a href="http://bocoup.com/">Bocoup</a> for the <a href="https://2015.cssconf.com/"><strong>CSSConf US 2015</strong></a> organization. Specially to <a href="https://twitter.com/ajpiano">Adam Sontag</a> and the rest of the conference staff. You were really supportive during the whole week. And the <a href="https://2015.cssconf.com/#videos">videos with live transcripts</a> were available just a few days after the conference, awesome job! The only issue was the internet connection which was really flaky.</p>
<p>So, yeah I attended CSSConf this year, but not only that, I was also <strong>speaking about <a href="http://dev.w3.org/csswg/css-grid/">CSS Grid Layout</a></strong> and <a href="https://www.youtube.com/watch?v=9js_5MjiGFo">the video of my talk</a> is already online together with the <a href="http://people.igalia.com/mrego/talks/cssconf-us-2015-css-grid-layout/">slides</a>.</p>
<iframe class="center-block" width="640" height="360" src="https://www.youtube.com/embed/9js_5MjiGFo" frameborder="0" allowfullscreen=""></iframe>
<p>During the talk I described the basic concepts, syntax and features of CSS Grid with different live coding examples. Then I tried to explain the main tasks that the browser has to do in order to render a grid and gave some tips about grid performance. Finally, we reviewed the browsers adoption and the status of <a href="http://www.chromium.org/blink">Chromium/Blink</a> and <a href="http://www.webkit.org">Safari/WebKit</a> implementations that <a href="http://www.igalia.com">Igalia</a> is doing.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2015/06/css-grid-layout-sketchnotes.jpg"><img src="https://blogs.igalia.com/mrego/files/2015/06/css-grid-layout-sketchnotes.jpg" alt="CSS Grid Layout is just around the corner talk sketchnotes by Susan"></a>
<span class="caption text-muted"><em>CSS Grid Layout is just around the corner</em> talk sketchnotes by <a href="http://sketch.bysusanlin.com/post/122179986223/day-2-of-cssconf-2015-many-css-quirks-mastering">Susan</a></span></p>
<p>The feedback about my talk was incredibly positive and everybody seemed really excited about what CSS Grid Layout can bring to the web platform. <strong>Big thanks to you all!</strong></p>
<div style="width: 350px; float: left; margin-right: 20px;">
<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">The CSS grid spec is blowing my mind. Why haven’t I looked at this before?! <a href="https://twitter.com/regocas">@regocas</a> <a href="https://twitter.com/hashtag/cssconf?src=hash">#cssconf</a></p>— Dave Newton (@newtron) <a href="https://twitter.com/newtron/status/611923026305650689">June 19, 2015</a></blockquote>
<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Love hearing about what the rendering engine is doing when it encounters CSS grids. <a href="https://twitter.com/regocas">@regocas</a> made it visual 💛💛check out his slides! <a href="https://twitter.com/CSSConf">@CSSConf</a></p>— Nicole Sullivan (@stubbornella) <a href="https://twitter.com/stubbornella/status/611926549395341312">June 19, 2015</a></blockquote>
</div>
<div style="width: 350px; float: left;">
<blockquote style="width: 200px;" class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Mind blown by new CSS Grid properties from <a href="https://twitter.com/hashtag/cssconf?src=hash">#cssconf</a> speaker and Blink/WebKit Grid implementer <a href="https://twitter.com/regocas">@regocas</a> !!! <a href="http://t.co/ocHJeeYvJt">pic.twitter.com/ocHJeeYvJt</a></p>— Matt Swensen (@mjswensen) <a href="https://twitter.com/mjswensen/status/611925394892156928">June 19, 2015</a></blockquote>
<script async="" src="https://platform.twitter.com/mrego/widgets.js" charset="utf-8"></script>
</div>
<div style="clear: both;"></div>
<p>Of course, there were other great talks at CSSConf as you can check in the videos. From the top of my head, I loved the <a href="https://youtu.be/s4HdeJctq-A">one by <strong>Lea Verou</strong></a>, impressive talk as usual where she even released a <a href="http://leaverou.github.io/conic-gradient/">polyfill for conic gradients</a> on the stage. SVG and animations have two nice talks by <a href="https://youtu.be/tsGa-gcckwY">Chris Coyier</a> and <a href="https://youtu.be/09_8edPAsR8">Sarah Drasner</a>. <a href="https://youtu.be/1yUFTrAxTzg">PostCSS</a> and <a href="https://youtu.be/NoaxsCi13yQ">inline styles</a> were also hot topics. <a href="https://youtu.be/jYGAjAee0dU">Responsive (and responsible!) images</a>, <a href="https://youtu.be/lvxLb2zy5Hs">Fun.css</a> and <a href="https://youtu.be/vTbV0ZBfxR8">CSS? WTF!</a> were also great (and probably I’m forgetting some other).</p>
<p>Last, on Thursday’s night we attended <a href="http://brooklynjs.com/">BrooklynJS</a> which had a great panel discussing about CSS. The <strong>inline styles vs stylesheets</strong> topic became hot, as projects like <a href="http://facebook.github.io/react/">React</a> are moving people away from stylesheets. <a href="https://twitter.com/chriscoyier">Chris Coyier</a> (one of the panelists and also speaker at CSSConf) wrote a <a href="https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/">nice post</a> past week giving a good overview of this topic. Also <a href="https://youtu.be/wEJ0rxz4W0U">The Four Fives</a> were amazing!</p>
<p>On top of that, as part of the collaboration between <a href="http://www.igalia.com"><strong>Igalia</strong></a> and <a href="http://www.bloomberg.com/"><strong>Bloomberg</strong></a>, I was visiting their <a href="https://en.wikipedia.org/wiki/731_Lexington_Avenue">fancy office in Manhattan</a>. I spent a great time there talking about grids with several people from the team. They really believe that CSS Grid Layout will change the future of the web benefiting lots of people in different use cases, and hopefully helping to alleviate performance issues in complex scenarios.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>Looking forward for the next opportunity to talk about CSS Grid Layout. Keeping the hard work to make it a reality as soon as possible!</p>
Grid and the City2015-06-03T00:00:00Zhttps://blogs.igalia.com/mrego/2015/06/03/grid-and-the-city/<p>I’m really glad to announce that my talk “<em>CSS Grid Layout is just around the
corner</em>” has been accepted at <a href="https://2015.cssconf.com/"><strong>CSSConf US 2015</strong></a>
(18-19 June).
Thanks to the organizers for selecting my proposal, it’s a pleasure to be among
all these great speakers.
BTW, If you haven’t grabbed your ticket yet, you could use the following promo
code when checking out to save some money:
<a href="http://ti.to/bocoup/cssconf-2015/discount/MR200"><strong><code>MR200</code></strong></a></p>
<p>I’m part of the <a href="http://www.igalia.com/browsers"><strong>Igalia Web Platform team</strong></a>,
and I’m currently working on the implementation of the <a href="http://dev.w3.org/csswg/css-grid/">CSS Grid Layout W3C
spec</a> on
<a href="http://www.chromium.org/blink">Blink</a> and <a href="http://www.webkit.org">WebKit</a>.
So, I’m kind of an “exotic” profile in a conference like <strong>CSSConf</strong>, as I’m not
working on frontend.
However, I’ll try to bring the implementor perspective to the table, explaining
some internals about how grid works. I’ll also introduce the basic syntax to be
able to start playing with it.</p>
<p><a href="https://2015.cssconf.com/#speakers"><img src="https://blogs.igalia.com/mrego/files/2015/06/cssconf-rego-grid.png" alt="My talk abstract from CSSConf website"></a>
<span class="caption text-muted">My talk abstract from <strong>CSSConf</strong> website</span></p>
<p><strong>CSSConf</strong> this year is happening in New York City and the venue, <a href="http://www.carolines.com/">Caroline’s
on Broadway</a>, is in the heart of Manhattan.
So, I’ll take advantage to pay a visit to our friends at
<a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a>, whom we collaborate with in
the development of CSS Grid Layout.
In addition, <a href="http://brooklynjs.com/"><strong>BrooklynJS</strong></a> is organized on the
evening of June 18th, and as part of the ticket for CSSConf, we’ll have the
chance to attend this event too.</p>
<p>From the personal side, this will be my first time in NYC, exciting times
ahead! Feel free to ping me if you want to talk about grid, the web,
<a href="http://www.igalia.com"><strong>Igalia</strong></a> or simply do some sightseeing; as I’ll be
arriving on 15th June’s night.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>As you might guess, I’m very excited about this crazy week, full of events and
new experiences.
I’m sure I’ll meet lots of great people and I’ll do my best to convince the
world about the goodness of grid and make them feel how awesome it is.
Exciting times ahead!</p>
Web Engines Hackfest 2015: Save the dates!2015-03-31T00:00:00Zhttps://blogs.igalia.com/mrego/2015/03/31/web-engines-hackfest-2015-save-the-dates/<p>This is a short note to announce the dates of the <strong>Web Engines Hackfest 2015</strong>, that will happen next winter at <a href="http://www.igalia.com">Igalia</a> Headquearters in A Coruña (Spain), from Monday, 7th December, to Wednesday, 9th December.</p>
<p>After all the <a href="https://github.com/Igalia/webengineshackfest/wiki/2014">great work and collaboration</a> that happened during the past year edition, with hackers from all parts of the Web Platform community (Chromium/Blink, WebKit, Gecko, Servo, JSC, V8, SpiderMonkey, etc.), Igalia is really excited to host this great event again.</p>
<p><a href="https://www.flickr.com/photos/aperezdc/15974309345/"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/03/web-engines-hackfest-2014.jpg" alt="Web Engines Hackfest 2014 (picture by Adrián Pérez)"></a>
<span class="caption text-muted">Web Engines Hackfest 2014 (picture by <a href="https://www.flickr.com/photos/aperezdc/15974309345/">Adrián Pérez</a>)</span></p>
<p>We’re still closing the last details and will be sending the invitations in the coming weeks. However, do not hesitate to <a href="mailto:hackfest@webengineshackfest.org">send us an invitation request</a> if you are willing to come by the end of the year.</p>
<p>Do not miss any update following <a href="https://twitter.com/webhackfest"><strong><code>@webhackfest</code></strong></a> on twitter. For more details, visit the official webpage <a href="http://www.webengineshackfest.org/"><strong><code>http://www.webengineshackfest.org/</code></strong></a>.</p>
Grid Auto-Placement Is Ready2015-02-25T00:00:00Zhttps://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/<p>Back in June I wrote <a href="http://blogs.igalia.com/mrego/2014/06/19/css-grid-layout-automatic-placement/">my first post about CSS Grid Layout <strong>automatic
placement</strong>
feature</a>,
where I was talking about finishing the support for this feature “<em>soon</em>”.
At the end it took a bit longer, but finally this month
<a href="http://www.igalia.com">Igalia</a> has completed the implementation and you can
already start to test it in both <a href="http://www.chromium.org/blink">Blink</a> and
<a href="http://www.webkit.org">WebKit</a>.</p>
<h3 id="a-little-bit-of-history" tabindex="-1">A little bit of history <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">#</a></h3>
<p>Basic support for auto-placement feature was already working since 2013. The
past summer I added support for spanning auto-positioned items. However, the
different <em>packing modes</em> of the <a href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo"><strong>grid item placement algorithm</strong> (aka
<strong>auto-placement
algorithm</strong>)</a> were not
implemented yet.</p>
<p>These packing modes were <em>sparse</em>, <em><code>dense</code></em> and
<em><code>stack</code></em>. Initial behavior was implementing <em><code>dense</code></em>. I
implemented <em>sparse</em> without too much trouble, however when implementing
<em><code>stack</code></em> I had <a href="http://lists.w3.org/Archives/Public/www-style/2014Jul/0233.html">some
doubts</a> that I
shared with the CSS Working Group. This ended up with <a href="http://lists.w3.org/Archives/Public/www-style/2014Sep/0214.html">some
discussions</a>
and, finally, the <a href="http://lists.w3.org/Archives/Public/www-style/2015Jan/0269.html">removal of the <em><code>stack</code></em>
mode</a>. So you
can forget about what I explained about it in my previous post.</p>
<h3 id="final-syntax" tabindex="-1">Final syntax <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">#</a></h3>
<p>After some back and forth it seems that now we’ve a definitive syntax for the
<a href="http://dev.w3.org/csswg/css-grid/#grid-auto-flow-property"><strong><code>grid-auto-flow</code></strong>
property</a>.</p>
<p>This property allows to determine two different things:</p>
<ul>
<li><strong>Direction</strong>: <strong><code>row</code></strong> (by default) or <strong><code>column</code></strong>.<br>
Defines the direction in which the grid is going to grow if needed to insert
the auto-placed items.</li>
<li><strong>Mode</strong>: <em>sparse</em> (if omitted) or <strong><code>dense</code></strong>.<br>
Depending on the packing mode the algorithm will try to fill
(<strong><code>dense</code></strong>) or not (<em>sparse</em>) all the holes in the grid while
inserting the auto-placed items.</li>
</ul>
<p>So, you can use different combinations of these keywords (<code>row</code>,
<code>column</code> and <code>dense</code>) to determine the desired behavior.
Examples of some valid declarations:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span><br><span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> dense<span class="token punctuation">;</span><br><span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> row dense<span class="token punctuation">;</span><br><span class="token property">grid-auto-flow</span><span class="token punctuation">:</span> dense column<span class="token punctuation">;</span></code></pre>
<p>Let’s use an example to explain this better. Imagine the following 3x3 grid:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 50px 50px 50px<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 100px 100px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>item 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Depending on the value of <code>grid-auto-flow</code> property, the grid items
will be placed in different positions as you can see in the next picture.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/grid-auto-flow.gif"><img src="https://blogs.igalia.com/mrego/files/2015/02/grid-auto-flow.gif" alt="grid-auto-flow values example"></a>
<span class="caption text-muted"><code>grid-auto-flow</code> values example</span></p>
<h3 id="grid-item-placement-algorithm" tabindex="-1">Grid item placement algorithm <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">#</a></h3>
<p>I’ve been talking about this
<a href="http://dev.w3.org/csswg/css-grid/#grid-item-placement-algorithm">algorithm</a> for
a while already. It describes how the items should be placed into the grid.
Let’s use a new example that will help to understand better how the algorithm
works:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-template-rows</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>4<span class="token punctuation">,</span> 50px<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>5<span class="token punctuation">,</span> 50px<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>i1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>i2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>i3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>i4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>i5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>i6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>i7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>i8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>i9<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>For items with definite positions (<em>i1</em> and <em>i2</em>), you don’t need to calculate
anything, simply place them in the positions defined by the <a href="http://dev.w3.org/csswg/css-grid/#grid-placement-property">grid placement
properties</a> and
that’s all. However, for auto-placed items this is the algorithm explaining how
to convert the automatic positions into actual ones.</p>
<p>Grid items location is determined by the row and column coordinates and the
number of tracks it spans in each position. So you might have 3 types of
auto-placed items:</p>
<ul>
<li>Both coordinates are auto: <em>i7</em> and <em>i9</em>.</li>
<li>Major axis position is auto: <em>i6</em> and <em>i8</em>.</li>
<li>Minor axis position is auto: <em>i3</em>, <em>i4</em> and <em>i5</em>.</li>
</ul>
<blockquote>
<p><em>Note</em>: Major axis refers to the direction determined by
<code>grid-auto-flow</code> property, and minor axis to the opposite one. For
example in “<code>grid-auto-flow: column;</code>” the major axis is <em>column</em>
and the minor axis is <em>row</em>.</p>
</blockquote>
<p>Let’s describe briefly the main steps of the algorithm (considering that the
direction determined by <code>grid-auto-flow</code> is <code>row</code>):</p>
<ol>
<li>
<p>First all the non auto-positioned items (the ones with definite position)
should be placed in the grid.</p>
<p>Example:</p>
<ul>
<li><em>i1</em> <span style="font-size: 75%;">(<code>grid-row: 1; grid-column: 2;</code>)</span>:
1st row and 2nd column.</li>
<li><em>i2</em> <span style="font-size: 75%;">(<code>grid-row: 2; grid-column: 1;</code>)</span>:
2nd row and 1st column.</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-1.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-1.png" alt="Grid item placement algorithm: Step 1"></a>
<span class="caption text-muted">Grid item placement algorithm: Step 1</span></p>
</li>
<li>
<p>Next step is to place the auto-positioned items where the major axis
direction is not auto, so they’re locked to a given row.</p>
<p>Here we have different behaviors depending on the packing mode.</p>
<ul>
<li>
<p><em>sparse</em>: Look for the first empty grid area in this row where the item
fits and it’s past any item previously placed by this step in the same row.</p>
<p>Example:</p>
<ul>
<li><em>i3</em> <span style="font-size: 75%;">(<code>grid-row: 1; grid-column: span 2;</code>)</span>:
1st row and 3rd-4th columns.</li>
<li><em>i4</em> <span style="font-size: 75%;">(<code>grid-row: 1;</code>)</span>:
1st row and <strong>5th column</strong>.</li>
<li><em>i5</em> <span style="font-size: 75%;">(<code>grid-row: 2;</code>)</span>:
2nd row and 2nd column.</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-2.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-2.png" alt="Grid item placement algorithm: Step 2 (sparse)"></a>
<span class="caption text-muted">Grid item placement algorithm: Step 2 (<em>sparse</em>)</span></p>
</li>
<li>
<p><em><code>dense</code></em>: Look for the first empty grid area in this row where
the item fits (without caring about the previous items).</p>
<p>Example:</p>
<ul>
<li><em>i3</em> <span style="font-size: 75%;">(<code>grid-row: 1; grid-column: span 2;</code>)</span>:
1st row and 3rd-4th columns.</li>
<li><em>i4</em> <span style="font-size: 75%;">(<code>grid-row: 1;</code>)</span>:
1st row and <strong>1st column</strong>.</li>
<li><em>i5</em> <span style="font-size: 75%;">(<code>grid-row: 2;</code>)</span>:
2nd row and 2nd column.</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-2-dense.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-2-dense.png" alt="Grid item placement algorithm: Step 2 (dense)"></a>
<span class="caption text-muted">Grid item placement algorithm: Step 2 (<em><code>dense</code></em>)</span></p>
</li>
</ul>
</li>
<li>
<p>Finally the rest of auto-placed items are positioned.</p>
<p>Again the behavior depends on the packing mode. And the description is pretty
similar to the one in the previous step, but without having the row
constraint.</p>
<ul>
<li>
<p><em>sparse</em>: Look for the first empty area where the item fits and it’s past
any item previously placed by this step. This means that we start looking
for the empty area from the position of the last item placed.</p>
<p>Example:</p>
<ul>
<li><em>i6</em> <span style="font-size: 75%;">(<code>grid-column: 2;</code>)</span>:
3rd row and 2nd column.</li>
<li><em>i7</em>: <strong>3rd row</strong> and <strong>3rd column</strong>.</li>
<li><em>i8</em> <span style="font-size: 75%;">(<code>grid-column: 3;</code>)</span>:
<strong>4th row</strong> and 3rd column.</li>
<li><em>i9</em>: <strong>4th row</strong> and 4th column.</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-3.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-3.png" alt="Grid item placement algorithm: Step 3 (sparse)"></a>
<span class="caption text-muted">Grid item placement algorithm: Step 3 (<em>sparse</em>)</span></p>
</li>
<li>
<p><em><code>dense</code></em>: Look for the first empty area where the item fits.
Starting always to look from the beginning of the grid.</p>
<p>Example:</p>
<ul>
<li><em>i6</em> <span style="font-size: 75%;">(<code>grid-column: 2;</code>)</span>:
3rd row and 2nd column.</li>
<li><em>i7</em>: <strong>1st row</strong> and <strong>5th column</strong>.</li>
<li><em>i8</em> <span style="font-size: 75%;">(<code>grid-column: 3;</code>)</span>:
<strong>2nd row</strong> and 3rd column.</li>
<li><em>i9</em>: <strong>2nd row</strong> and 4th column.</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-3-dense.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/02/grid-item-placement-algorithm-step-3-dense.png" alt="Grid item placement algorithm: Step 3 (dense)"></a>
<span class="caption text-muted">Grid item placement algorithm: Step 3 (<em><code>dense</code></em>)</span></p>
</li>
</ul>
</li>
</ol>
<h3 id="implementation-details" tabindex="-1">Implementation details <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">#</a></h3>
<p>Probably most of you won’t be interested in the details related to the
implementation of this feature in Blink and WebKit. So, feel free to skip this
point and move to the next one.</p>
<p>You can check the meta-bugs in
<a href="http://code.google.com/p/chromium/issues/detail?id=384099">Blink</a> and
<a href="https://bugs.webkit.org/show_bug.cgi?id=103316">WebKit</a> to see all the patches
involved in this feature. The code is almost the same in both projects and the
main methods involved in the grid auto-placement are:</p>
<ul>
<li>
<p><code>RenderGrid::placeItemsOnGrid()</code>
(<a href="https://chromium.googlesource.com/chromium/blink/+/739b3bb994bc313a18ab268d8828aa2a58ba3d2d/Source/core/rendering/RenderGrid.cpp#888">Blink</a>
& <a href="http://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderGrid.cpp?rev=180567#L801">WebKit</a>):
Which is in charge of placing the non auto-positioned items, covering step 1
explained before. And then it calls the next 2 methods with the
auto-positioned items depending on its type.</p>
</li>
<li>
<p><code>RenderGrid::placeSpecifiedMajorAxisItemsOnGrid()</code>
(<a href="https://chromium.googlesource.com/chromium/blink/+/739b3bb994bc313a18ab268d8828aa2a58ba3d2d/Source/core/rendering/RenderGrid.cpp#977">Blink</a>
& <a href="http://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderGrid.cpp?rev=180567#L875">WebKit</a>):
This method will process the auto-placed items where only minor axis position
is auto. So, they’re locked to a given row/column, which corresponds to step
2.</p>
<p>Note that in the <em>sparse</em> packing mode we need to keep a cursor for each
row/column to fulfill the condition related to have items placed after
previous ones.</p>
</li>
<li>
<p><code>RenderGrid::placeAutoMajorAxisItemsOnGrid()</code>
(<a href="https://chromium.googlesource.com/chromium/blink/+/739b3bb994bc313a18ab268d8828aa2a58ba3d2d/Source/core/rendering/RenderGrid.cpp#1003">Blink</a>
& <a href="http://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderGrid.cpp?rev=180567#L901">WebKit</a>):
And this last method is the one placing the auto-positioned items where the
major axis position or both coordinates are auto.</p>
<p>In this case, it uses the auto-placement cursor in order to implement the
<em>sparse</em> behavior.</p>
</li>
</ul>
<p>It’s also important to mention the class <code>RenderGrid::GridIterator</code>
(<a href="https://chromium.googlesource.com/chromium/blink/+/739b3bb994bc313a18ab268d8828aa2a58ba3d2d/Source/core/rendering/RenderGrid.cpp#156">Blink</a>
& <a href="http://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderGrid.cpp?rev=180567#L126">WebKit</a>)
which has the responsibility to find the empty grid areas that are big enough to
fit the auto-placed grid items.</p>
<blockquote>
<p><em>Note</em>: <a href="https://chromium.googlesource.com/chromium/blink/+/8ae47fe4fd0b585096c8495905c187de6c72f4bb"><code>RenderGrid</code> has just been renamed to
<code>LayoutGrid</code></a>
in Blink.</p>
</blockquote>
<h3 id="peculiarities" tabindex="-1">Peculiarities <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">#</a></h3>
<p>On one side, the <em>sparse</em> packing mode is intended to preserve the DOM order
of the grid items. However, this is only true if for all the items the major
axis coordinate or both are auto. Otherwise, the DOM order cannot be
guaranteed.</p>
<p>This is very easy to understand, as if you have some fixed elements, they’re
going to be placed in their given positions, and the algorithm cannot
maintain the ordering.</p>
<p>Let’s use a very simple example to show it:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>Where the elements will be positioned in:</p>
<ul>
<li><em>item 1</em>: 1st row and 3rd-4th columns.</li>
<li><em>item 2</em>: 1st row and 1st column.</li>
<li><em>item 3</em>: 1st row and 2nd column.</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/grid-auto-placement-dom-ordering.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/02/grid-auto-placement-dom-ordering.png" alt="Grid item placement algorithm ordering"></a>
<span class="caption text-muted">Grid item placement algorithm ordering</span></p>
<p>On the other hand, there is another issue regarding <em>sparse</em> again, but this
time in the second step of the algorithm (the one related to items locked to a
given row/column). Where the items are placed after any other item previously
positioned in that step in the same row/column.</p>
<p>Let’s take a look to the following example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 2</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>According to the algorithm these items will be placed at:</p>
<ul>
<li><em>item 1</em>: 1st row and 1st column.</li>
<li><em>item 2</em>: 1st-2nd row and 2nd column.</li>
<li><em>item 3</em>: 2nd row and 1st column.</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/grid-auto-placement-sparse-fixed-row.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/02/grid-auto-placement-sparse-fixed-row.png" alt="Grid item placement algorithm sparse fixed row/column"></a>
<span class="caption text-muted">Grid item placement algorithm <em>sparse</em> fixed row/column</span></p>
<p>However, for the case of <em>item 3</em> we could think that it should be placed in
the 2nd row and the 3rd column. Because of <em>item 2</em> is actually placed in the
1st and 2nd rows. But, <a href="https://lists.w3.org/Archives/Public/www-style/2015Feb/0320.html">for the sake of
simplicity</a>,
this isn’t the behavior described in the spec.</p>
<h3 id="use-cases" tabindex="-1">Use cases <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">#</a></h3>
<p>So far this has been too abstract, so let’s try to think in some real cases
where the auto-placement feature might be handy.</p>
<p>The canonical example is the one about how to format a form. You can check <a href="http://blogs.igalia.com/mrego/2014/06/19/css-grid-layout-automatic-placement/#possibilities">the
example in my previous
post</a>
which puts labels in the first column and inputs in the second one. Or, <a href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">the
example in the spec</a> with
a little bit more complex form.</p>
<p>Another example could be how to format a definition list. Imagine that we’ve the
following list:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Cat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>A carnivorous mammal (Felis catus) long domesticated as a pet and for catching rats and mice.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Crocodile<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>Any of several large carnivorous thick-skinned long-bodied aquatic reptiles (family Crocodylidae) of tropical and subtropical waters; broadly: crocodilian.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>Donkey<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>The domestic ass (Equus asinus).<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span></code></pre>
<p>In order to show it using a grid layout you would just need the next CSS lines:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">dl</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 10px auto 10px 1fr 10px<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">dt</span> <span class="token punctuation">{</span><br> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span><br> <span class="token property">width</span><span class="token punctuation">:</span> max-content<span class="token punctuation">;</span><br> <span class="token property">align-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span><br> <span class="token property">justify-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><br><span class="token selector">dd</span> <span class="token punctuation">{</span><br> <span class="token property">grid-column</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span><br> <span class="token property">margin</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>
<p>The result will be a 2-columns layout, where the terms go in the first column
right aligned and vertically centered; and the definitions in the second column.
With a 10px gutter wrapping the columns.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2015/02/definition-list.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/02/definition-list.png" alt="Definition list formatted using grid auto-placement feature"></a>
<span class="caption text-muted">Definition list formatted using grid auto-placement feature</span></p>
<h3 id="conclusion" tabindex="-1">Conclusion <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/">#</a></h3>
<p>Grid automatic placement has just been finished and you can start to play with
it already in <a href="https://www.google.es/chrome/browser/canary.html">Chrome Canary</a>
(enabling the flag “<em>Enable experimental Web Platform features</em>”) or <a href="http://nightly.webkit.org/">WebKit
Nightly Builds</a>. We think that it’s a nice and
pretty powerful feature, and we encourage front-end web developers to test it
(like the rest of <a href="http://dev.w3.org/csswg/css-grid/">CSS Grid Layout</a>). The
best part is that the spec is still having its last changes, and you’ll have the
chance to provide feedback to the <a href="http://www.w3.org/Style/CSS/">CSS Working
Group</a> if you miss something.</p>
<p>In order to make things easier to test I’ve adapted the demo to test the grid
item placement algorithm, adding the option to specify the
<code>grid-auto-flow</code> property too:
<a href="http://igalia.github.io/css-grid-layout/autoplacement.html"><strong>http://igalia.github.io/css-grid-layout/autoplacement.html</strong></a></p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>All this work has been done as part of the collaboration between
<a href="http://www.igalia.com">Igalia</a> and
<a href="http://www.bloomberg.com/company/">Bloomberg</a>.
We’ll be happy to receive your feedback about this feature.
Stay tuned to get the latest news regarding CSS Grid Layout development!</p>
New Year, New Blog!2015-01-20T00:00:00Zhttps://blogs.igalia.com/mrego/2015/01/20/new-year-new-blog/<p>As you might noticed, I’m starting the new year changing my blog design and
software.</p>
<p>The idea has often come to my mind since I discovered the <strong>static site
generators</strong> like <a href="http://jekyllrb.com/"><em>Jekyll</em></a>. And finally this year I
decided to get rid of <a href="https://wordpress.org/">WordPress</a> and, definitely, move
my blog to Jekyll.
Like the previous blog theme was really old fashioned and completely
unresponsive, I took advantage of the software migration to improve the design
of my blog too.</p>
<p>Basically, I found this nice <a href="http://startbootstrap.com/template-overviews/clean-blog/"><strong>Clean
Blog</strong></a> theme by
<a href="http://startbootstrap.com/"><em>Start Bootstrap</em></a> and decided to give it a chance.
On top of that, they provide not only the theme but also a <a href="https://github.com/IronSummitMedia/startbootstrap-clean-blog-jekyll">version already
integrated with
Jekyll</a>.
So, most of the work was already in place.</p>
<p>In order to migrate the blog posts I used a <a href="https://github.com/benbalter/wordpress-to-jekyll-exporter">WordPress
plugin</a> which,
together with a few <a href="http://www.gnu.org/software/sed/"><code>sed</code></a>
commands, was enough to move the old posts to Jekyll.
In addition, I’m using Jekyll tags to categorize the posts like before. With a
tag view page that shows all the posts and provide its own feed (required for
planets subscriptions). E.g. <a href="http://blogs.igalia.com/mrego/tag/css/"><code>CSS</code> tag
page</a>.</p>
<p>Regarding comments, I decided to go for a static solution too. Basically, I got
very few comments during the last year, so I think that looking for a more
complex solution doesn’t worth it.
This means, that if you want to comment something in my posts from now on, you
should send me a mail (or a tweet) and that’s all.
You can check a
<a href="http://blogs.igalia.com/mrego/2014/03/13/welcome-css-grid-layout/#comments">previous
post</a>
with comments to see how they look like.</p>
<p>This was just a short notice about this change, I hope you enjoy the new site.
At least I like it a lot. :-)</p>
CSS Grid Layout 2014 Recap: Implementation Status2015-01-08T00:00:00Zhttps://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/<p>After the review of the <a href="http://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">changes in the <strong>CSS Grid Layout</strong> spec in my previous post</a>, let’s focus now in the status of the implementation in <a href="http://www.chromium.org/blink">Blink</a> and <a href="http://www.webkit.org">WebKit</a>. This post will try to cover what we’ve been doing in <a href="http://www.igalia.com">Igalia</a> during 2014 around grid layout, and it’ll talk about our plans for 2015.</p>
<h3 id="work-done-in-2014" tabindex="-1">Work done in 2014 <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h3>
<h4 id="spec-syntax" tabindex="-1">Spec syntax <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>During the first part of the year we were updating the CSS Grid Layout syntax in order to match the last modifications introduced in the spec during 2013.<br>
As part of this work, the <a href="http://dev.w3.org/csswg/css-grid/#propdef-grid"><strong><code>grid</code></strong></a> and <a href="http://dev.w3.org/csswg/css-grid/#propdef-grid-template"><strong><code>grid-template</code></strong></a> shorthands were introduced, which are deeply explained by my colleague <a href="http://blogs.igalia.com/jfernandez/2014/04/11/new-shorthand-properties-for-css-grid-layout/">Javi Fernández in a post</a>.<br>
Right now the implementation both in Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=337626">#337626</a>) and WebKit (<a href="https://bugs.webkit.org/show_bug.cgi?id=127987">#127987</a>) is complete and matching the spec regarding to the syntax.</p>
<h4 id="painting-optimizations" tabindex="-1">Painting optimizations <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>Back in 2013, Julien Chaffraix did some optimizations in the grid painting code (<a href="http://code.google.com/p/chromium/issues/detail?id=248151">#248151</a>). However, those changes introduced some issues that were being fixed during 2014. Finally the painting code seems to have been stable for a while.<br>
This optimization is not present in WebKit, so this work was only done in Blink.</p>
<h4 id="code-refactoring" tabindex="-1">Code refactoring <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>Another task that was done in the first half of this year was the refactoring of the code related to positions resolution. It’s been moved to its own class (<a href="https://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/style/GridResolvedPosition.h"><code>GridResolvedPosition</code></a>), so <a href="https://src.chromium.org/viewvc/blink/trunk/Source/core/rendering/RenderGrid.h"><code>RenderGrid</code></a> only has to deal with resolved positions now.<br>
This change was done in both Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=258258">#258258</a>) and WebKit (<a href="https://bugs.webkit.org/show_bug.cgi?id=131732">#131732</a>).</p>
<h4 id="named-grid-lines" tabindex="-1">Named grid lines <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>At the beginning of the year we implemented the support for <a href="http://dev.w3.org/csswg/css-grid/#named-lines">named grid lines</a>. This completes the implementation of the different placement options availabe in a grid (numeric indexes, named areas, named lines and span). Once more, this is supported in Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=337779">#337779</a>) and WebKit (<a href="https://bugs.webkit.org/show_bug.cgi?id=129372">#129372</a>).<br>
In this case, my fellow <a href="http://blogs.igalia.com/svillar/2014/03/31/adventures-in-the-grid/">Sergio Villar talked about this work in another post</a>.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/12/named-grid-lines.png"><img src="https://blogs.igalia.com/mrego/files/2014/12/named-grid-lines.png" alt="Named grid lines example"></a>
<span class="caption text-muted"> Named grid lines example</span></p>
<h4 id="track-sizing-algorithm" tabindex="-1">Track sizing algorithm <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>The <a href="http://dev.w3.org/csswg/css-grid/#algo-track-sizing">track sizing algorithm</a> has been rewritten in the spec during 2014. Despite of keeping the same behaviour, the implementation was modified to follow the new algorithm closely.<br>
During this work some missing features were detected and solved, making the current implementation more complete and robust.<br>
Several patches have been done in both Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=392200">#392200</a>) and WebKit (<a href="https://bugs.webkit.org/show_bug.cgi?id=137253">#137253</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=136453">#136453</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=137019">#137019</a> & <a href="https://bugs.webkit.org/show_bug.cgi?id=136575">#136575</a>).</p>
<h4 id="automatic-placement-algorithm" tabindex="-1">Automatic placement algorithm <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>The <a href="http://dev.w3.org/csswg/css-grid/#grid-auto-flow-property">auto-placement feature</a> has been completed adding support for items spanning several tracks and implementing the “<em>sparse</em>” and “<em>dense</em>” packaging modes.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/12/auto-placement-span.png"><img src="https://blogs.igalia.com/mrego/files/2014/12/auto-placement-span.png" alt="Auto-placement example with spanning item"></a>
<span class="caption text-muted">Auto-placement example with spanning item</span></p>
<p>In this case you can read <a href="http://blogs.igalia.com/mrego/2014/06/19/css-grid-layout-automatic-placement/">my post about how all this works</a>.<br>
This was done in both Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=353789">#353789</a> & <a href="http://code.google.com/p/chromium/issues/detail?id=384099">#384099</a>) and WebKit (<a href="https://bugs.webkit.org/show_bug.cgi?id=103316">#103316</a>).</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/12/auto-placement-sparse-dense.png"><img src="https://blogs.igalia.com/mrego/files/2014/12/auto-placement-sparse-dense.png" alt="Auto-placement "sparse" and "dense" packing modes example"></a>
<span class="caption text-muted">Auto-placement “sparse” and “dense” packing modes example</span></p>
<h4 id="fuzzinator-bugfixing" tabindex="-1">Fuzzinator bugfixing <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>Apart from generic bugfixing during this year we’ve fixed some issues detected by a tool called <strong>Fuzzinator</strong> in both Blink and WebKit. <a href="http://webkit.sed.hu/blog/20141023/fuzzinator-reloaded">Renata Hodovan wrote a nice post explaining all the details regarding this</a> (thanks for great your work).<br>
The good news is that now the grid code is much more stable thanks to all the reports and patches done during 2014.</p>
<h4 id="alignment-and-justification" tabindex="-1">Alignment and justification <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>This work is still ongoing, but the main <a href="http://dev.w3.org/csswg/css-grid/#alignment">alignment</a> properties (<code>justify-self</code>, <code>align-self</code>, <code>justify-items</code>, <code>align-items</code>, <code>justify-content</code> and <code>align-content</code>) are already supported, or on the way (with patches pending review), in Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=234199">#234199</a>). For this feature the patches in WebKit (<a href="https://bugs.webkit.org/show_bug.cgi?id=133222">#133222</a> & <a href="https://bugs.webkit.org/show_bug.cgi?id=133224">#133224</a>) are moving slowly.<br>
You can check all the possibilities provided by these properties in <a href="http://blogs.igalia.com/jfernandez/2014/09/08/box-alignment-and-grid-layout/">a blog post by Javi</a>.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/12/grid-alignment.gif"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/12/grid-alignment.gif" alt="Different options to align an item inside a grid cell"></a>
<span class="caption text-muted">Different options to align an item inside a grid cell</span></p>
<h4 id="absolutely-positioned-grid-children" tabindex="-1">Absolutely positioned grid children <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>During the last part of 2014 it’s been implemented the special <a href="http://dev.w3.org/csswg/css-grid/#alignment">support for positioned grid children</a>, because of they’ve some particularities in grids.<br>
The initial patch is available on Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=273898">#273898</a>), but still some stuff needs to be fixed to complete it. Then, it’ll be ported to WebKit as usual.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2015/01/grid-absolute-positions.png"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2015/01/grid-absolute-positions.png" alt="Absolutely positioned grid children example"></a>
<span class="caption text-muted">Absolutely positioned grid children example</span></p>
<h4 id="writing-modes" tabindex="-1">Writing modes <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>We’ve been working on <a href="http://dev.w3.org/csswg/css-writing-modes-3/">writing modes support</a> fixing issues with margins, borders and paddings. Now, the columns/rows are painted in the right order depending on the <a href="http://dev.w3.org/csswg/css-writing-modes-3/#direction"><code>direction</code></a> property.<br>
Orthogonal flows were clarified in the last update of the spec, current issues are already being addressed in order to fix them.<br>
Again, all this work was done in Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=437354">#437354</a>) and will be ported to WebKit later on.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2015/01/grid-writing-modes-direction.gif"><img src="https://blogs.igalia.com/mrego/files/2015/01/grid-writing-modes-direction.gif" alt="Example of direction support in grid"></a>
<span class="caption text-muted">Example of <code>direction</code> support in grid</span></p>
<h4 id="testing" tabindex="-1">Testing <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h4>
<p>You can always increase the test coverage, specially for a big spec like CSS Grid Layout. We’ve been adding some missing tests here and there, and finally decided to start the road to create a <a href="http://test.csswg.org/shepherd/search/spec/css-grid-1/"><strong>W3C test suite</strong> for grid</a>.<br>
We’re still on the early stages, and getting used to all the W3C testing infrastucture and processes. <a href="http://www.gtalbot.org/">Gérard Talbot</a> is helping us to take the first steps, big thanks!<br>
We’ve already drafted a <a href="http://rawgit.com/w3c/csswg-test/master/css-grid-1/test-plan/index.html">test plan</a> where you can follow our progress. We hope to complete the test suite during 2015.<br>
As expeceted, the nice part when you’re focused on writing tests in general (not only tests for the patch you’re developing) is that you do much better tests and you end up finding small issues in different places.</p>
<h3 id="plans-for-2015" tabindex="-1">Plans for 2015 <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h3>
<p>The main goal is to <strong>ship CSS Grid Layout in <a href="http://www.google.com/chrome/">Chrome</a> (Blink)</strong> and see if <a href="https://www.apple.com/safari/">Safari</a> (WebKit) follows the trend. In that hypothetical scenario 3 major browsers: Chrome, Safari and <a href="http://microsoft.com/ie">Internet Explorer</a> (despite implementing an old version of the spec) will have CSS Grid Layout support; which would be really great news.<br>
Thinking about the next step in the short-term, our intention is to send the “<em>Intent to Ship</em>” to <a href="https://groups.google.com/a/chromium.org/forum/#!forum/blink-dev">Blink mailing list</a> during the first quarter of 2015.<br>
WebKit is lagging a bit behind, but we’ve plans to update the implementation and reduce the gap between Blink and WebKit grid’s codebases.</p>
<p>Of course, apart from completing all the ongoing tasks and other minor fixes, we’ll have to keep doing more work to fully implement the spec:</p>
<ul>
<li>Add support for “<code>auto</code>” keyword for <code>repeat()</code> (recently added to the spec).</li>
<li>Allow to grow the implicit grid before the explicit grid (supporting properly negative indexes for grid line numbers).</li>
<li>Implement fragmentation support once the spec is definitive regarding this topic.</li>
</ul>
<p>Apart from that during 2015 we’ll review the performance and will try to make faster the grid with some optimizations.<br>
Furthermore, it’d be really nice to add some support for grid in <a href="https://developer.chrome.com/devtools">Chrome DevTools</a> and <a href="https://developer.apple.com/safari/tools/">Safari Web Inspector</a>. That would make life of end users much easier.</p>
<h3 id="wrap-up" tabindex="-1">Wrap-up <a class="header-anchor" href="https://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">#</a></h3>
<p><strong>2015 will be the year of CSS Grid Layout in the browser</strong>. Hopefully, you’ll be able to use it natively in all the major browsers but <a href="https://mozilla.org/firefox">Firefox</a> (where you could use the <a href="http://fremycompany.com/BG/2014/CSS-Grid-Polyfill-Level-1-346/">polyfill</a>).
Anyway you can start to play with it already, enabling the <em>experimental Web Platform features</em> flag in Chrome (unprefixed) or using the <a href="http://nightly.webkit.org/">WebKit nightly builds</a> (with “<code>-webkit</code>” prefix).<br>
If you want to follow closely the implementation track the meta-bugs in Blink (<a href="http://code.google.com/p/chromium/issues/detail?id=79180">#79180</a>) and WebKit (<a href="https://bugs.webkit.org/show_bug.cgi?id=60731">#60731</a>).</p>
<p><a href="http://www.igalia.com">Igalia</a> is doing all this work as part of our collaboration with <a href="http://www.bloomberg.com/company/">Bloomberg</a>.<br>
We’re waiting for you to start testing grid layout, report feedback and bugs. We’ll do our best in order that you enjoy it. Exciting times ahead!</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
CSS Grid Layout 2014 Recap: Specification Evolution2014-12-30T00:00:00Zhttps://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/<p>Year 2014 is coming to an end, so it’s the perfect timing to review what has happened regarding the <strong><a href="http://dev.w3.org/csswg/css-grid/">CSS Grid Layout</a></strong> spec, which <a href="http://www.igalia.com">Igalia</a> has been implementing in both <a href="http://www.chromium.org/blink">Blink</a> and <a href="http://www.webkit.org">WebKit</a> engines, as part of our collaboration with <a href="http://www.bloomberg.com/company/">Bloomberg</a>.
I was wondering what would be the best approach to write this post, and finally I’m going to split it in 2 different posts. This one covering the changes in the spec during the whole year and another one talking about the implementation details.</p>
<p>Two <a href="http://www.w3.org/2014/Process-20140801/#working-draft">Working Drafts (WD)</a> of the CSS Grid Layout Module have been published during 2014. In addition, during the last month of the year, somehow related with the work previously done at <a href="http://lists.w3.org/Archives/Public/www-style/2014Dec/0302.html">TPAC in the CSS Working Group (WG) face to face (F2F) meeting</a>, several changes have been done in the spec (I guess that they’ll end up in a new WD in early 2015).
So, let’s review the most important changes introduced in each version.</p>
<h3 id="working-draft-23-jan-2014" tabindex="-1"><a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/">Working Draft: 23 Jan 2014</a> <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h3>
<h4 id="subgrids" tabindex="-1">Subgrids <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>This is the first WD where <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/#subgrids"><strong>subgrids</strong></a> feature appears marked as <em>at-risk</em>. This means that it might end up out of <em>Level 1</em> of the specification.<br>
A <strong>subgrid</strong> is a grid inside another grid, but keeping a relationship between the rows/columns of the subgrid and the parent grid container. It shares the track sizing definitions with the parent. Just for the record, current implementations haven’t support for this feature yet.<br>
However, <strong>nested grids</strong> are already available and will be part of <em>Level 1</em>. Basically nested grids have their own track sizing definitions completely independent of their parents. Of course, they’re not the same than subgrids.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/12/subgrid-vs-nested-grid.png"><img src="https://blogs.igalia.com/mrego/files/2014/12/subgrid-vs-nested-grid.png" alt="Subgrid vs nested grid example" class="size-medium wp-image-1846"></a>
<span class="caption text-muted"><strong>Subgrid</strong> vs <strong>nested grid</strong> example</span></p>
<h4 id="implicit-named-areas" tabindex="-1">Implicit named areas <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>This is related with the concept of the <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/#grid-template-areas-property"><strong>named grid areas</strong></a>. Briefly, in a grid you can name the different areas (group of adjacent cells), for example: <code>menu</code>, <code>main</code>, <code>aside</code> and/or <code>footer</code>, using the <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/#propdef-grid-template-areas"><code>grid-template-areas</code></a> property.<br>
Each area will define 4 <strong>implicit named lines</strong>: 2 called <code>foo-start</code> (marking the row and column start) and 2 called <code>foo-end</code> (row and column end), where <code>foo</code> would be the name of the area.<br>
This WD introduces the possibility to create <strong>implicit named areas</strong>, by defining named grid lines using the previous pattern. That way if you explicitly create lines called <code>foo-start</code> and <code>foo-end</code>, you’ll be defining an implicit area called <code>foo</code> that could be used to place items in the grid.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/12/implicit-grid-lines-areas.png"><img src="https://blogs.igalia.com/mrego/files/2014/12/implicit-grid-lines-areas.png" alt="Example of implicit named grid areas" class="size-medium wp-image-1851"></a>
<span class="caption text-muted">Example of <strong>implicit named grid areas</strong></span></p>
<h4 id="aligning-the-grid" tabindex="-1">Aligning the grid <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>In this version the <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/#grid-align"><strong><code>justify-content</code></strong> and <strong><code>align-content</code></strong> properties</a> are added, which allow to align the whole grid within the grid container.</p>
<h4 id="other" tabindex="-1">Other <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>In this WD appears a <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/#common-uses">new informative section explaining the basic examples for the grid placement</a> options. It’s an informative section but very useful to get an overview of the different possibilities.<br>
In addition, it includes an <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140123/#abspos-items">explanatory example for the absolutely-positioned grid items</a> behavior.</p>
<h3 id="working-draft-13-may-2014" tabindex="-1"><a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/">Working Draft: 13 May 2014</a> <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h3>
<h4 id="track-sizing-algorithm" tabindex="-1">Track sizing algorithm <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>Probably the most important change in this version is the complete rewrite of the <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/#layout-algorithm"><strong>track sizing algorithm</strong></a>. Anyway, despite of the new wording, the algorithm keeps the very same behavior.<br>
This is the main algorithm for grids, it defines how the track breaths should be calculated taking into account all the <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/#track-sizing">multiple available options that define the track sizes</a>.<br>
An appendix with a <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/#translated-algo">“translation” between the old algorithm and the new one</a> is included too, mostly to serve as reference and help to detect possible mistakes.</p>
<h4 id="auto-placement-changes" tabindex="-1">Auto-placement changes <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>The <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/#propdef-grid-auto-flow"><strong><code>grid-auto-flow</code></strong> property</a> is modified in this WD:</p>
<ul>
<li><strong><code>none</code></strong> is substituted by a new <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/#valuedef-stack"><strong><code>stack</code></strong></a> packing mode.</li>
<li>As a consequence, property <strong><code>grid-auto-position</code></strong> (tied to <code>none</code>) is dropped.</li>
</ul>
<p>Before this change, the default value for <code>grid-auto-flow</code> was <code>none</code> and, in that case, all the auto-placed items were positioned using the value determined by <code>grid-auto-position</code> (by default in 1×1).<br>
With this change, the default value is <code>row</code>. But, you can specify <code>stack</code> and the grid’ll look for the first empty cell and use it to place there all the auto-positioned items.</p>
<h4 id="other-1" tabindex="-1">Other <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>Implementations have now the possibility to <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/#repeat-notation">clamp the maximum number of repetitions in a grid</a>.<br>
Besides, it brings up a new section related to <a href="http://www.w3.org/TR/2014/WD-css-grid-1-20140513/#intrinsic-sizes">sizing grid containers</a> where it’s defined how they behave under max-content and min-content constraints.</p>
<h3 id="editor-s-draft-last-changes" tabindex="-1"><a href="http://dev.w3.org/csswg/css-grid/">Editor’s Draft: Last changes</a> <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h3>
<blockquote>
<p>Note: These changes are not yet in a WD version and might suffer some modifications before a new WD is published.</p>
</blockquote>
<h4 id="automatic-number-of-tracks" tabindex="-1">Automatic number of tracks <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>A new <a href="http://dev.w3.org/csswg/css-grid/#valdef-repeat-auto"><strong><code>auto</code></strong> keyword</a> has been added to <code>repeat()</code> function.<br>
This will allow to repeat the track list specified as many times as needed, depending on the grid container size. Which used together with the auto-placement feature might be really nice combo.<br>
For example, if the grid container is <code>350px</code> width and it uses <code>repeat(auto, 100px);</code> to define the columns, you’ll end up having 3 columns.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/12/repeat-auto.gif"><img src="https://blogs.igalia.com/mrego/files/2014/12/repeat-auto.gif" alt="Example of new auto keyword for repeat() function" class="size-medium wp-image-1870"></a>
<span class="caption text-muted">Example of new <strong><code>auto</code></strong> keyword for <code>repeat()</code> function</span></p>
<h4 id="auto-placement-stack-removed" tabindex="-1">Auto-placement <code>stack</code> removed <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>Finally, after some issues with the <code>stack</code> mode, it’s been decided to remove it from the spec. This means that <a href="http://dev.w3.org/csswg/css-grid/#grid-auto-flow-property"><strong><code>grid-auto-flow</code></strong> property</a> gets simplified, allowing you to determine the direction: <code>row</code> (by default) or <code>column</code>; and the packing algorithm: <code>dense</code> or “sparse” (if omitted).<br>
On top of that, the <a href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">grid item placement algorithm</a> has now a more explicit wording regarding the different packing modes.</p>
<h4 id="fragmentation" tabindex="-1">Fragmentation <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p><a href="http://dev.w3.org/csswg/css-grid/#pagination">This section</a> has been missing since a lot of time ago, and it finally has got some content.<br>
Anyway, this is still an initial proposal and more work is needed to settle it down.</p>
<h4 id="other-2" tabindex="-1">Other <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h4>
<p>Reviewed the scope of <a href="http://dev.w3.org/csswg/css-grid/#grid-align"><code>align-content</code> and <code>justify-content</code></a>, now they apply to the grid tracks rather than to the grid as a single unit.</p>
<p>As a side note, there’s an ongoing discussion regarding the <a href="http://dev.w3.org/csswg/css-grid/#named-lines">symbol used to determine the named grid lines</a>. Currently it’s a parenthesis, e.g.:</p>
<pre class="language-css" tabindex="0"><code class="language-css"> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>first<span class="token punctuation">)</span> 100px <span class="token punctuation">(</span>mid central<span class="token punctuation">)</span> 200px <span class="token punctuation">(</span>last<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
<p>However these parenthesis have some issues for <a href="http://sass-lang.com/">Sass</a> preprocessor. The proposal of using square brackets was not accepted in the last CSS WG F2F meeting, though it’ll be revisited again in the future.</p>
<h3 id="conclusion" tabindex="-1">Conclusion <a class="header-anchor" href="https://blogs.igalia.com/mrego/2014/12/30/css-grid-layout-2014-recap-specification-evolution/">#</a></h3>
<p>Of course this list is not complete, and I can be missing some changes. At least, these’re the most important ones from the implementor perspective.<br>
As you can see, despite of not having big behavioral changes during this year, the spec has been evolving and becoming more and more mature. A bunch of glitches have been fixed, and some features have been adapted thanks to the feedback from users and implementors.<br>
Thanks to the spec editors: <a href="https://twitter.com/tabatkins">Tab</a>, <a href="https://twitter.com/fantasai">fantasai</a> and <a href="https://twitter.com/ie_dev">Rossen</a> (and the rest of the CSS WG), for all their work and patience in the <a href="http://lists.w3.org/Archives/Public/www-style/">mailing list</a> answering lots of doubts and questions.</p>
<p>Next year CSS Grid Layout will be hitting your browsers, but you’re still on time to provide feedback and propose changes in the spec. The editors will be more than happy to listen your suggestions for improvements and know what things are you missing.<br>
If you want to have first-hand information regarding the evolution of the spec, you should follow the <a href="http://www.w3.org/blog/CSS/">CSS WG blog</a> and check the minutes of the meetings where they discuss about grid. On top of that, if you want all the information, you should subscribe yourself to the <a href="http://lists.w3.org/Archives/Public/www-style/">CSS WG mailing list</a> and read the mails with “<code>[css-grid]</code>” in the subject.</p>
<p>Last, in the <a href="http://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/">next post</a> I’ll talk about the work we’ve been doing during 2014 regarding the implementation in Blink and WebKit and our plans for 2015. Stay tuned!</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
Web Engines Hackfest 20142014-12-10T00:00:00Zhttps://blogs.igalia.com/mrego/2014/12/10/web-engines-hackfest-2014/<p><big><strong>The Hackfest</strong></big>
<a href="https://www.flickr.com/photos/aperezdc/15973626102/in/set-72157649251422270"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/12/15973626102_97310ee912_z.jpg" alt="Web Engines Hackfest 2014 (picture by Adrián Pérez)"></a>
<span class="caption text-muted">Web Engines Hackfest 2014 (picture by <a href="https://www.flickr.com/photos/aperezdc/15973626102/in/set-72157649251422270">Adrián Pérez</a>)</span></p>
<p>Today we’re finishing the <em>first</em> edition of the <strong><a href="http://www.webengineshackfest.org/">Web Engines Hackfest</a></strong>. This is like the continuation of the “<em>WebKitGTK+ Hackfest</em>” that has been organized by <a href="http://www.igalia.com">Igalia</a> since 2009.</p>
<p>Checking some numbers, we’ve been <a href="http://www.webengineshackfest.org/#attendees"><strong>30 people</strong></a> working together for <strong>4 full-days</strong> (even nights in some cases). On top of that, there’ve been 6 nice talks and several interesting discussions around the <strong>open web platform</strong>.</p>
<p>As usual the hackfest started with an initial brainstorming where everybody introduced themselves and their plans for the following days. <a href="https://twitter.com/abandonedwig">Martin Robinson</a> led the discussion and identified the main topics, that were later debated in detail on the <a href="https://github.com/Igalia/webengineshackfest/wiki#breakout-sessions">breakout sessions</a>.</p>
<p><big><strong>The Talks</strong></big></p>
<p>Despite of being an un-conference format event, this year we’ve arranged a few nice talks about different topics (you can find the <a href="https://github.com/Igalia/webengineshackfest/wiki#scheduling">slides in the hackfest wiki page</a>):</p>
<ul>
<li><strong>Raspberry Pi Browser</strong> by <a href="https://twitter.com/gustavokov">Gustavo Noronha</a> & <a href="https://twitter.com/shivamidow">ChangSeok Oh</a>: They talked about the work done to have a full-browser working in a low specs device like the RPi. They used <a href="http://webkitgtk.org/">WebKitGTK+</a>, but not WebKit2 yet, and they need to do some cool tricks to avoid the hardware limitations.</li>
<li><strong>CSS Grid Layout</strong> by <a href="http://blogs.igalia.com/svillar/">Sergio Villar</a>: Sergio explained the work we’ve been doing around <a href="http://www.w3.org/TR/css3-grid-layout/">CSS Grid Layout</a> on <a href="http://www.chromium.org/blink">Blink</a> and <a href="http://www.webkit.org">WebKit</a>. Apart from explaining some of the nice things of the feature, he revealed our plans to ship it on Chrome during the first quarter of 2015.</li>
<li><strong>State of JS Implementations</strong> by <a href="https://twitter.com/andywingo">Andy Wingo</a>: As usual a great talk by Wingo summarizing the evolution of JavaScript during the last years in the open source engines (<a href="https://www.webkit.org/projects/javascript/">JSC</a>, <a href="http://developer.mozilla.org/en/SpiderMonkey">SpiderMonkey</a> and <a href="https://code.google.com/p/v8/">V8</a>) and what we can expect in the future. Next year we’ll bring us further optimizations and a faster web for the users.</li>
</ul>
<p><a href="https://www.flickr.com/photos/aperezdc/15796242429/in/set-72157649251422270/"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/12/15796242429_30374a5d70_z.jpg" alt="TyGL presentation by Zoltán Herczeg (picture by Adrián Pérez)"></a>
<span class="caption text-muted">TyGL presentation by Zoltán Herczeg (picture by <a href="https://www.flickr.com/photos/aperezdc/15796242429/in/set-72157649251422270/">Adrián Pérez</a>)</span></p>
<ul>
<li><strong>GPU Based 2D Rendering With TyGL</strong> by <a href="http://www.sed.inf.u-szeged.hu/member/zoltan-herczeg">Zoltán Herczeg</a>: Good introduction to <a href="https://github.com/szeged/TyGL">TyGL port</a> explaining all the internals and architecture. The different technical challenges and the solutions provided by TyGL to face them.</li>
<li><strong>WebKit for Wayland</strong> by <a href="https://twitter.com/falconsigh">Žan Doberšek</a>: Žan presented a new <a href="http://webkitforwayland.org/">WebKit port for Wayland</a> platform. The main use case for this port is to have a just one web view full-screen (like in a set top box). He explained the internal details and how it’s done the integration with <a href="http://wayland.freedesktop.org/">Wayland</a>.</li>
<li><strong>A Short Introduction to Servo</strong> by <a href="https://twitter.com/abandonedwig">Martin Robinson</a>: Martin explained the new parallel browser engine <a href="https://github.com/servo/servo">Servo</a> and the <a href="http://www.rust-lang.org/">Rust programming language</a> behind the scenes. He talked about the current status and the next steps, it should be soon in <em>dog-foodable</em> state.</li>
</ul>
<p><a href="https://www.flickr.com/photos/aperezdc/15789146369/in/set-72157649251422270/"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/12/15789146369_b390b71cf8_z.jpg" alt="CSS Features breakout session (picture by Adrián Pérez)"></a>
<span class="caption text-muted">CSS Features breakout session (picture by <a href="https://www.flickr.com/photos/aperezdc/15789146369/in/set-72157649251422270/">Adrián Pérez</a>)</span></p>
<p><big><strong>My personal experience</strong></big></p>
<p>From the personal point of view, I’ve been mostly focused on CSS stuff. We’ve a nice discussing regarding the new layout models (from <a href="http://www.w3.org/TR/css3-multicol/">multi-column</a>, <a href="http://www.w3.org/TR/css3-flexbox/">flexbox</a> and <a href="http://www.w3.org/TR/css3-grid/">grid</a> to <a href="http://www.w3.org/TR/css3-regions/">regions</a> and <a href="http://www.w3.org/TR/css-shapes/">shapes</a>) and how long they take to be a major feature widely used on the web.</p>
<p>On the one hand, I’ve been carrying on with the regular work I’m lately doing related to CSS Grid Layout. I <a href="https://codereview.chromium.org/769683004/">found and fixed a crash</a> in the <a href="https://codereview.chromium.org/637033003/">absolutely positioned grid children support</a> that landed past week. In addition I managed to get few more tests landed on the <a href="http://test.csswg.org/shepherd/search/spec/css-grid-1/">grid W3C test suite</a> that we’re starting to create (thanks to <a href="http://www.gtalbot.org/">Gérard Talbot</a> for the reviews).</p>
<p><a href="https://www.flickr.com/photos/aperezdc/15983473971/in/set-72157649251422270/"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/12/15983473971_b5babf2c46_z.jpg" alt="A Coruña from San Pedro (picture by Adrián Pérez)"></a>
<span class="caption text-muted">A Coruña from San Pedro (picture by <a href="https://www.flickr.com/photos/aperezdc/15983473971/in/set-72157649251422270/">Adrián Pérez</a>)</span></p>
<p>On the other hand, I’ve been talking with Mihnea Ovidenie about CSS Regions and how CSS Grid Layout could help to avoid the criticism regarding empty HTML elements required to create regions.<br>
Grid allows you to divide the webpage in areas directly from CSS, each area is not associated with an HTML element (a DOM node). So if regions are defined using those areas, it won’t be needed to create empty elements on the DOM tree.<br>
Basically, this seems to match with what is defined in the <a href="http://dev.w3.org/csswg/css-page-template/">CSS Pagination Templates</a> module that is being drafted by <a href="https://twitter.com/alanstearns">Alan Stearns</a>.</p>
<p><big><strong>Thanks</strong></big></p>
<p>Finally I’d like to <strong>thanks to all the people attending</strong> (this event wouldn’t be possible without all of you). We hope you enjoined the hackfest and also your stay in A Coruña. See you next year!</p>
<p><a href="http://www.webengineshackfest.org/#sponsors"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/12/web-engines-hackfest-2014-sponsors.png" alt="Web Engines Hackfest 2014 sponsors: Adobe, Collabora and Igalia"></a>
<span class="caption text-muted">Web Engines Hackfest 2014 sponsors: Adobe, Collabora and Igalia</span></p>
<p>Also big thanks the sponsors <a href="http://webplatform.adobe.com/"><strong>Adobe</strong></a>, <a href="http://www.collabora.com/"><strong>Collabora</strong></a> and <a href="http://www.igalia.com"><strong>Igalia</strong></a> for making possible such a great event.</p>
Presenting the Web Engines Hackfest2014-10-28T00:00:00Zhttps://blogs.igalia.com/mrego/2014/10/28/presenting-the-web-engines-hackfest/<p>After the <a href="http://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html">Google’s fork back in April 2013</a>, <a href="http://www.webkit.org">WebKit</a> and <a href="http://www.chromium.org/blink">Blink</a> communities have been working independently, however patches often move from one project to another. In addition, a fair amount of the source code continues to be similar. Thus, it seems interesting to have a common place to discuss topics of shared interest and make plans for the future.
For that reason, <a href="http://www.igalia.com/nc/igalia-247/news/item/igalia-is-hosting-web-engines-hackfest-dec-7-10-2014/">Igalia is announcing</a> the <strong><a href="http://webengineshackfest.org/">Web Engines Hackfest</a></strong> that would happen in December 7-10 in our <a href="http://webengineshackfest.org/#getting-there">main office in A Coruña (Spain)</a>. This is like a new edition of the <em>WebKitGTK+ Hackfest</em> that we’ve been organizing since 2009, but this year changing the focus in order to make a more inclusive event.</p>
<p><big><strong>The Hackfest</strong></big></p>
<p>The new event will include members from all parts of the Web Platform community, not restricted to <a href="http://www.webkit.org">WebKit</a> and <a href="http://www.chromium.org/blink">Blink</a>, but open to the different Web (<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Gecko">Gecko</a> and <a href="https://github.com/servo/servo">Servo</a>) and JavaScript (<a href="http://code.google.com/p/v8/">V8</a>, <a href="http://trac.webkit.org/wiki/JavaScriptCore">JavaScriptCore</a> and <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMoney</a>) free software engines.</p>
<p><a href="https://www.flickr.com/photos/csaavedra/11403300276"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/10/hackfest-picture.jpg" alt="Past year hackfest picture by Claudio Saavedra"></a>
<span class="caption text-muted">Past year hackfest picture by <a href="https://www.flickr.com/photos/csaavedra/11403300276">Claudio Saavedra</a></span></p>
<p>The idea is to bring together implementors from the <strong>Open Web Platform</strong> community in a <strong>4-day hacking/discussion/unconference event</strong> with the goal of moving forward different topics, discuss common issues, make plans for the future, etc.</p>
<p>And that’s what makes this event something different. It’s a completely hacking oriented event, where developers sit together in small groups to work for a few days pursuing some specific goals. These groups of interest are defined at the beginning of the hackfest and they agree the different tasks to be done on during the event.<br>
Thereby, don’t expect a full scheduling in advance with a list of talks and speakers like in a regular conference, this is something totally different focused on real hacking.</p>
<p><big><strong>Join us</strong></big></p>
<p>After the first round of invitations we’ve already a nice <a href="http://webengineshackfest.org/#attendees">list of people from different companies that will be attending the hackfest this year</a>.<br>
The good news is that we still have room for a few more people, so <strong>if you’re interested in coming to the event please <a href="mailto:hackfest@webengineshackfest.org">contact us</a></strong>.</p>
<p><a href="http://webengineshackfest.org/#sponsors"><img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/10/web-engines-hackfest-sponsors-2014-adobe-igalia.png" alt="Adobe and Igalia are sponsoring the Web Engines Hackfest 2014"></a>
<span class="caption text-muted"><strong>Adobe</strong> and <strong>Igalia</strong> are sponsoring the <strong>Web Engines Hackfest 2014</strong></span></p>
<p>Thanks to <strong><a href="http://webplatform.adobe.com/">Adobe</a></strong> and <strong><a href="http://www.igalia.com">Igalia</a></strong> for <a href="http://webengineshackfest.org/#sponsors">sponsoring the <strong>Web Engines Hackfest</strong></a> and make possible such an exciting event.</p>
<p>Looking forward to meet you there!</p>
CSS Grid Layout Automatic Placement2014-06-19T00:00:00Zhttps://blogs.igalia.com/mrego/2014/06/19/css-grid-layout-automatic-placement/<p>In his <a href="http://blogs.igalia.com/svillar/2014/03/31/adventures-in-the-grid/">last post</a> my mate Sergio explained the different syntax to position elements inside a grid. Now is time to talk about the <strong>automatic placement</strong> feature, how it works and show some examples of its potential.
<big><strong>Auto-placement</strong></big></p>
<p>The concept is defined in the <a href="http://www.w3.org/TR/css-grid/#grid-auto-flow-property">specification</a>:</p>
<blockquote>
<p>Grid items that aren’t explicitly placed are <strong>automatically</strong> placed <strong>into an unoccupied space</strong> in the grid container.</p>
</blockquote>
<p>So, let’s start with a simple example to show how it works. Imagine that you have the following 2×2 grid:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>first<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>second<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>auto<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><em>first</em> item is using the 2 columns on the 1<sup>st</sup> row, <em>second</em> item is placed on the 2<sup>nd</sup> row 2<sup>nd</sup> column. That leaves an empty space on the 2<sup>nd</sup> row 1<sup>st</sup> column, where the <em>auto</em> item is placed.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/06/auto-placement-simple.png"><img src="https://blogs.igalia.com/mrego/files/2014/06/auto-placement-simple.png" alt="Simple example where the auto-positioned item is placed into the 2nd row 1st column"></a>
<span class="caption text-muted">Simple example where the auto-positioned item is placed into the 2<sup>nd</sup> row 1<sup>st</sup> column</span></p>
<p>Of course you can do more complex things, like setting a specific position in one dimension (row or column) and left the other as auto, request more than one cell for the item, etc. as you can see in the following example of a 3×3 grid:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2014/06/auto-placement-more.gif"><img src="https://blogs.igalia.com/mrego/files/2014/06/auto-placement-more.gif" alt="Example animation of how different auto-positioned items are placed in the grid" class="size-medium wp-image-1643"></a>
<span class="caption text-muted">Example animation of how different auto-positioned items are placed in the grid</span></p>
<p>Let’s analyze why elements are positioned as you can see in the animation above:</p>
<ul>
<li><em>item 1</em>: This is the first element placed, this item need 2 columns and it’s placed in the 1<sup>st</sup> row 1<sup>st</sup>-2<sup>nd</sup> columns, as they’re empty.</li>
<li><em>item 2</em>: This item is only specifying the column, so it’s placed in the 1<sup>st</sup> row 3<sup>rd</sup> column, as it’s the first empty cell in the 3<sup>rd</sup> column.</li>
<li><em>item 3</em>: In this case the items needs 2 rows and it’s placed in the 2<sup>nd</sup>-3<sup>rd</sup> rows and 1<sup>st</sup> column.</li>
<li><em>item 4</em>: Here the example needs 2 rows and 2 columns, we’re lucky as there’re some empty cells so it’s placed in the 2<sup>nd</sup>-3<sup>rd</sup> rows and 2<sup>nd</sup>-3<sup>rd</sup> columns.</li>
<li><em>item 5</em>: This item needs to be placed in the 2<sup>nd</sup> row, as there’s no empty cells in that row, it’ll be placed in a new column outside current grid, 2<sup>nd</sup> row 4<sup>th</sup> column. Imagine that this item is completely auto (we remove the “<tt>grid-row: 2;</tt>” style), then it’d be placed in a new row outside current grid, 4<sup>th</sup> row 1<sup>st</sup> column.
Why in a new row and not in a new column? That’s managed by <strong><tt>grid-auto-flow</tt></strong> property that’ll be explained below.</li>
</ul>
<p><big><strong><tt>grid-auto-flow</tt> property</strong></big></p>
<p>Again from the <a href="http://www.w3.org/TR/css-grid/#grid-auto-flow-property">spec</a>:</p>
<blockquote>
<p>The <strong>grid-auto-flow</strong> property controls the <strong>direction</strong> in which the search for unoccupied space takes place, and whether rows or columns are added as needed to accommodate the content.</p>
</blockquote>
<p>The simpler (and easier to understand) values for this property are <strong><tt>row</tt></strong> (by default) and <strong><tt>column</tt></strong>. These values define the direction that the auto-placement algorithm should follow to place the auto-positioned items. For example if the value is <tt>row</tt> the algorithm will try to fill each row before jumping to the next one, adding new rows as necessary.</p>
<p>Also, this property allows to combine these values (<strong><tt>row</tt></strong> and <strong><tt>column</tt></strong>) with other keywords (that cannot not be used together):</p>
<ul>
<li><strong><tt>dense</tt></strong>: By default auto-placement algorithm is <strong>sparse</strong>, that means that if placing an auto item has leave some empty cells in the grid (because of the item doesn’t fit) they won’t be used anymore. If <strong><tt>dense</tt></strong> is used, these holes will be used if smaller items come up later.</li>
<li><strong><tt>stack</tt></strong>: In this case the auto-placement algorithm looks for the first empty cell (like if it was adding a 1×1 item). Then it places all the auto-positioned items in that cell (independently of their size), stacked atop one another.</li>
</ul>
<p>As usual it’s easier to understand with a HTML example:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p><a href="https://blogs.igalia.com/mrego/files/2014/06/auto-placement-grid-auto-flow.png"><img src="https://blogs.igalia.com/mrego/files/2014/06/auto-placement-grid-auto-flow-1024x385.png" alt="Example grid with different values for grid-auto-flow property" class="size-large wp-image-1665"></a>
<span class="caption text-muted">Example grid with different values for <strong><tt>grid-auto-flow</tt></strong> property</span></p>
<p>In the image you can check how the auto-positioned elements (<em>item 2</em> and <em>item 3</em>) are placed depending on the different values of <strong><tt>grid-auto-flow</tt></strong>:</p>
<ul>
<li><strong>sparse (<tt>grid-auto-flow: row;</tt>)</strong>:
<ul>
<li><em>item 2</em>: It looks for an empty area of 2 columns, so it skips cell in 1<sup>st</sup> row 1<sup>st</sup> column levaing it as an empty space. The item is placed in the 2<sup>nd</sup> row 1<sup>st</sup>-2<sup>nd</sup> columns.</li>
<li><em>item 3</em>: It looks for the next empty space, and it adds the item in the 3<sup>rd</sup> row 1<sup>st</sup> column. This will leave a hole in the 1<sup>st</sup> row 1<sup>st</sup> column.</li>
</ul>
</li>
<li><strong><tt>dense</tt> (<tt>grid-auto-flow: row dense;</tt>)</strong>:
<ul>
<li><em>item 2</em>: This is placed exactly the same than in the <strong>sparse</strong> case. The item is placed in the 2<sup>nd</sup> row 1<sup>st</sup>-2<sup>nd</sup> columns.</li>
<li><em>item 3</em>: It looks for an empty cell and it adds the item in the 1<sup>st</sup> row and 1<sup>st</sup> column as it’s still empty (<em>item 2</em> didn’t use it before, because of it doesn’t fit there).</li>
</ul>
</li>
<li><strong><tt>stack</tt> (<tt>grid-auto-flow: stack row;</tt>)</strong>:
<ul>
<li><em>item 2</em>: It looks for the first empty cell, and it finds the 1<sup>st</sup> row and 1<sup>st</sup> column. Then all the auto-positioned items will be placed there. So <em>item 2</em> is placed in 1<sup>st</sup> row 1<sup>st</sup>-2<sup>nd</sup> column (even if it takes more than one cell, it’ll keep using as reference the first empty cell).</li>
<li><em>item 3</em>: Again this is added in the 1<sup>st</sup> row 1<sup>st</sup> column over <em>item 2</em>.</li>
</ul>
</li>
</ul>
<p><a name="possibilities"></a>
<big><strong>Possibilities</strong></big></p>
<p>As you can imagine this brings a lot of power to the <strong>CSS Grid Layout</strong> spec. You won’t need to always place your items explicitly in a grid, you can simply pass the responsibility to find the best position to the grid itself.</p>
<p>The typical example is to think in a regular form:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Comments<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Accept policy<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Accept<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Cancel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span></code></pre>
<p>You could just apply the following CSS and you’d have a formatted form “for free”:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">form</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">label</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">input</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">#buttons</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span 2<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
<p>The result will be something like the following picture:</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/06/auto-placement-form.png"><img src="https://blogs.igalia.com/mrego/files/2014/06/auto-placement-form.png" alt="Formatting regular form using grid auto-placement feature"></a>
<span class="caption text-muted">Formatting regular form using grid auto-placement feature</span></p>
<p><big><strong>Wrap-up</strong></big></p>
<p>We’ve created a <strong>small demo</strong> (as part of our <a href="http://igalia.github.io/css-grid-layout/">grid examples repository</a>) that will allow you to play with the auto-placement feature and understand it better:</p>
<p style="text-align: center;">
<a href="http://igalia.github.io/css-grid-layout/autoplacement.html">http://igalia.github.io/css-grid-layout/autoplacement.html</a>
</p>
<p>As you could read during the post, the <strong>auto-placement algorithm</strong> has been mentioned several times. This algorithm and the implementations details will be explained in a subsequent post.</p>
<p>If you’re wondering about current support in <a href="http://www.chromium.org/blink">Blink</a> and <a href="http://www.webkit.org">WebKit</a>, the basis of auto-placement feature is already working on both engines. In Blink <a href="http://code.google.com/p/chromium/issues/detail?id=353789">span support in auto-positioned items</a> has recently landed and in WebKit <a href="https://bugs.webkit.org/show_bug.cgi?id=110633">the patch is ready</a> to be integrated.
However, the new <strong><tt>grid-auto-flow</tt></strong> syntax (sparse, <tt>dense</tt> and <tt>stack</tt>) is still on the way (follow the <a href="http://code.google.com/p/chromium/issues/detail?id=384099">Blink</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=103316">WebKit</a> bugs if you’re interested).
As you can see, we’ve been working hard on implementing the missing bits of this feature and we hope it would be fully supported soon in both Blink and WebKit. :-)</p>
<p>Finally, we’d like to thank again <a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a> for sponsoring <a href="http://www.igalia.com">our work</a> around <strong>CSS Grid Layout</strong>.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
CSS Grid Layout at BlinkOn 22014-05-19T00:00:00Zhttps://blogs.igalia.com/mrego/2014/05/19/css-grid-layout-at-blinkon-2/<p><a href="https://blogs.igalia.com/mrego/files/2014/05/50-IMG_20140512_205719.jpg"><img src="https://blogs.igalia.com/mrego/files/2014/05/50-IMG_20140512_205719.jpg" alt="Zurich Google Office"></a>
<span class="caption text-muted">Zurich Google Office</span></p>
<p>Past week I’d been attending <a href="http://bit.ly/blinkon2"><strong>BlinkOn 2</strong></a> at <a href="https://goo.gl/maps/ES5Ka">Google office in Zurich</a>. I think that the best part of this kind of events is to have the chance to meet many well known people that you only see usually in the bug tracker and IRC.</p>
<p>It was nice to see other companies around too like <a href="http://www.opera.com">Opera</a>, <a href="http://www.samsung.com/">Samsung</a>, <a href="http://www.intel.com/">Intel</a>, etc. We were <strong>four igalians</strong> there talking about the work we’re lately doing on <a href="http://www.chromium.org/blink">Blink</a> (check <a href="http://blog.samuelig.es/2014/05/20/blinkon-2-zurich/">Sam’s post for more information</a>).</p>
<div style="clear: both">
</div>
<p><big><strong>CSS Grid Layout</strong></big></p>
<p>As you might expect, this was my primary focus in the conference, as that’s what I’ve been working on during the last months.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/05/rego-talking-at-blinkon.jpg"><img src="https://blogs.igalia.com/mrego/files/2014/05/rego-talking-at-blinkon.jpg" alt="Me during the CSS Grid Layout talk (photo by Calvaris)"></a>
<span class="caption text-muted">Me during the CSS Grid Layout talk (photo by <a href="http://blogs.igalia.com/xrcalvar/">Calvaris</a>)</span></p>
<p>On Tuesday, I was giving a talk about the work we’re doing on <strong>CSS Grid Layout</strong> sponsored by <a href="http://www.bloomberg.com/company/">Bloomberg</a>. It seems that people are interested in this feature and they liked the presentation, you can <a href="http://people.igalia.com/mrego/talks/blinkon2-css-grid-layout/">check the slides</a>.</p>
<p>Julien Chaffraix (grid’s reviewer) was there and later we discussed about the approach to fix some issues that have been hanging around in the bugzilla for a while.</p>
<div style="clear: both">
</div>
<p><big><strong>Selection</strong></big></p>
<p>On Wednesday, I attended the <a href="https://docs.google.com/presentation/d/19Y6iLC7haWVHUDC1JOLfMj_AmT94rncEXxlUGWSQeFI/edit"><strong>selection talk</strong></a> given by <a href="https://plus.google.com/109894212993574641070/">Yoshifumi Inoue</a> and <a href="http://hayato.io/">Hayato Ito</a>. They’re now focused on fixing the issues in Shadow DOM with selection.</p>
<p>Actually, they have some interesting ideas regarding how to avoid the problems with DOM ranges. Basically, they’ll try to use a start and end points for the selection instead of range itself, and then they’ll iterate over the composed tree in the right order.</p>
<p>On top of that, we talked about the <a href="http://igalia.github.io/web-selection-examples/">issues that are present with other layout models</a>, but we just concluded that selection is very complex and we should try to solve things step by step.</p>
<p>Thanks to the editing team for arranging the session. :-)</p>
<div id="attachment_1587" class="wp-caption alignleft">
<a href="https://blogs.igalia.com/mrego/files/2014/05/50-IMG_20140514_133910.jpg"><img src="https://blogs.igalia.com/mrego/files/2014/05/50-IMG_20140514_133910.jpg" alt="Panel discussion in the main room (Tech Talk)"></a>
<p class="caption text-muted">
Panel discussion in the main room (Tech Talk)
</p>
</div>
<p><big><strong>Other</strong></big></p>
<p>Many other interesting talks were given during the event, like the <a href="https://docs.google.com/presentation/d/15Hb0Hn6bMh9Q0cd54KVb8yss-DvIQmDcoyk9grchn5Q/edit">60fps talk by Nat Duca</a>, the <a href="http://www.wiumlie.no/2014/talks/05-13-zurich-blinkon.pdf">multi-column</a> <a href="http://people.opera.com/mstensho/blinkon2/">sessions</a> by Opera guys, the <a href="https://docs.google.com/presentation/d/1J-XX6JaFgeqNI64EnYKrF19PmFKwwn6VX6xuvPs9BSU/edit">Oilpan presentation by Mads Ager</a> and many more. If you missed any of them you can check the slides in the <a href="http://bit.ly/blinkon2">BlinkOn 2 web page</a> and see the videos of the talks in the main room whenever they’re available online.</p>
<div style="clear: both">
</div>
<p>Finally, I’d like to thank <a href="http://www.igalia.com"><strong>Igalia</strong></a> for sponsoring my trip and, of course, Google for the event (specially <a href="https://plus.google.com/+MaxHeinritzAtGoogle/">Max</a> for the great organization and also <a href="https://plus.google.com/+PhilipRogers/">Philip</a> for arranging the hiking on Thursday which, despite of the foggy weather, was pretty nice).</p>
<div id="attachment_1588" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2014/05/50-IMG_20140515_113548.jpg"><img src="https://blogs.igalia.com/mrego/files/2014/05/50-IMG_20140515_113548.jpg" alt="Zurich view from Felsenegg"></a>
<p class="caption text-muted">
Zurich view from Felsenegg
</p>
</div>
Selection interaction in CSS Regions is now spec compliant2014-05-05T00:00:00Zhttps://blogs.igalia.com/mrego/2014/05/05/selection-interaction-in-css-regions-is-now-spec-compliant/<p>This post is a recap to summarize all the work we’ve been doing in <a href="http://www.igalia.com">Igalia</a> during the last months related to <strong>selection in <a href="http://www.w3.org/TR/css3-regions">CSS Regions</a></strong>.
<big><strong>Wrap-up</strong></big></p>
<p>Back in <a href="http://blogs.igalia.com/jfernandez/2013/10/15/css-regions-and-selection/">October 2013 my mate Javi explained the different problems we detected on how selection worked in pages using CSS Regions</a>. As part of this initial work, we were <a href="http://blogs.igalia.com/mrego/2013/11/06/improving-tests-coverage-for-selection-with-css-regions-in-webkit-and-blink/">improving test coverage as it was explained in a previous post</a>. Originally we were working both in <a href="http://www.webkit.org/">WebKit</a> and <a href="http://www.chromium.org/blink">Blink</a>, but as you probably know CSS Regions has been removed from Blink code during this year.</p>
<p>In parallel, we’ve been also working in <strong>optimizations over CSS Regions</strong> code. First <a href="http://blogs.igalia.com/mrego/2013/12/10/performance-of-selection-with-css-regions-in-webkit-and-blink-part-i-perftests/">providing some new selection <strong>performance tests</strong></a> and later <a href="http://blogs.igalia.com/mrego/2014/01/29/performance-of-selection-with-css-regions-in-webkit-and-blink-part-ii-perf-profiler/"><strong>implementing some performance patches</strong> in the part related with re-paint phase</a>, which is very important during the selection process.</p>
<p><big><strong>Making selection spec compliant</strong></big></p>
<p>Our <a href="http://blogs.igalia.com/jfernandez/2014/01/22/improving-selection-in-css-regions/">first solution</a> was put aside as it had some rough edges and it was probably too ambitious as initial step.</p>
<p>Nonetheless in <a href="http://blogs.igalia.com/mrego/2014/01/23/approach-to-fix-selection-with-css-regions-webkitgtk-hackfest-late-wrap-up/">my last post we introduced a new idea</a> to make selection in CSS Regions spec compliant. We called it the “<strong>Subtrees approach</strong>“. We’ve finally <a href="https://bugs.webkit.org/show_bug.cgi?id=131511">implemented it</a> and the <a href="http://trac.webkit.org/changeset/167652">patch is already <strong>integrated upstream</strong></a>.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/04/selection-css-regions-before-after.png"><img src="https://blogs.igalia.com/mrego/files/2014/04/selection-css-regions-before-after.png" alt="Example of selection in CSS Regions before and after the Subtrees approach patch"></a>
<span class="caption text-muted">Example of selection in CSS Regions before and after the Subtrees approach patch</span></p>
<p>You can check the new behaviour using our <a href="http://igalia.github.io/css-regions-selection/">test suite</a>. As you could see now selection content always matches with the highlighted text in the web page.</p>
<p><big><strong>Future</strong></big></p>
<p>Somehow this is just the tip of the iceberg, a small step to make selection in CSS Regions work better. However, selection is still not completely natural from the user point of view in several cases. On top of that, selection in other layout models (flexbox, grid, multi-column, etc.) has very similar issues.</p>
<p>Our plan is to start a discussion inside WebKit and Blink communities about how selection works in the different layout models and what kind of changes can be done there to create a <strong>better user experience around selection interaction on the web</strong> (as <a href="http://blogs.igalia.com/jfernandez/2014/04/30/2014-webkit-contributors-meeting/">Javi has introduced in his last post</a>).</p>
<p>Finally, we’d like to publicly thank <a href="https://blogs.adobe.com/webplatform/">Adobe Web Platform team</a> for giving us the chance to collaborate with them, specially <a href="https://blogs.adobe.com/webplatform/author/mihnea/">Mihnea</a> for all his support. Also, thanks to all the reviewers for their insightful feedback and precious time.</p>
Welcome CSS Grid Layout2014-03-13T00:00:00Zhttps://blogs.igalia.com/mrego/2014/03/13/welcome-css-grid-layout/<p><strong><a href="http://www.igalia.com">Igalia</a></strong> has been working in the implementation of <a href="http://www.w3.org/TR/css-grid/"><strong>CSS Grid Layout</strong></a> since past year (more below). This year I’ve had the chance to join the team and help to move forward this great spec.
<big><strong>State of the Art</strong></big></p>
<p>Maybe, you’ve never heard before about <strong>CSS Grid Layout</strong>, but for sure you know part of the history of design in the web platform.</p>
<ul>
<li>In the beginning people tried to make <em>cool</em> designs using <strong><tt><table></table></tt> tag</strong>. Which completely breaks the separation between content (HTML) and presentation (CSS), apart from the ugly code and poor results achieved with this approach.</li>
<li>Then people started to <strong>use <tt><div></div></tt> for everything</strong>, floating blocks here and there. This might cause a terrible mess when trying to do flexible layouts that will adapt themselves to the screen size.</li>
<li>Now lots of <strong>CSS frameworks</strong> are emerging (<a href="http://960.gs/">960 Grid</a>, <a href="http://www.blueprintcss.org/">Blueprint</a>, <a href="http://getbootstrap.com/">Bootstrap</a>, <a href="http://foundation.zurb.com/">Foundation</a>, <a href="http://www.getskeleton.com/">Skeleton</a>, …). They allow to create responsive designs (very useful in the mobile era) most of them based on the grid concept. The problem is that each framework has its own syntax and lots of CSS code in order to provide the expected behavior.</li>
</ul>
<p>To solve all these issues <strong><a href="http://www.w3.org/">W3C</a></strong> has defined a new powerful and flexible spec that will make web designer’s life happier.</p>
<p><big><strong>CSS Grid Layout</strong></big></p>
<blockquote>
<p>“allows authors to easily define complex, responsive 2-dimensional layouts”</p>
</blockquote>
<p>By <a href="http://www.w3.org/blog/CSS/2014/01/23/css-grid-draft-updated/">Tab Atkins Jr. (Google) at CSS WG Blog</a>.</p>
<p><strong>CSS Grid Layout</strong> provides a mechanism to divide the available space in <strong>rows and columns</strong> with a set of predictable sizing behaviors. It defines a set of <strong>grid areas</strong> where designers can precisely place the elements of a web page.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/03/grid-example.png"><img class="size-medium wp-image-1479" alt="CSS Grid Layout example" src="https://blogs.igalia.com/mrego/files/2014/03/grid-example.png"></a>
<span class="caption text-muted">CSS Grid Layout example</span></p>
<p>The Grid Layout spec can be used to intelligently reflow elements within a web page optimizing locations and sizes, depending on the device where the page is rendered in, creating <strong>responsive designs</strong>.</p>
<p><big><strong>Example</strong></big></p>
<p>So, let’s imagine that you have the following HTML and you want to layout it like in the picture above:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Main<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>This will be the <strong>CSS syntax</strong> required to do the magic:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector">.grid</span> <span class="token punctuation">{</span><br> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span><br> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 200px 1fr<span class="token punctuation">;</span><br> <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 100px 1fr auto<span class="token punctuation">;</span><br><span class="token punctuation">}</span><br><span class="token selector">.title</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">.menu</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 2 / span 2<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">.main</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 1 / span 2<span class="token punctuation">;</span> <span class="token punctuation">}</span><br><span class="token selector">.footer</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span> <span class="token property">grid-row</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre>
<p>Where:</p>
<ul>
<li><tt>display: grid</tt>: Defines a grid container.</li>
<li><tt>grid-template-columns</tt> and <tt>grid-template-rows</tt>: Specify the track breadths.</li>
<li><tt>grid-column</tt> and <tt>grid-row</tt>: Determine a grid item’s size and location within the grid.</li>
</ul>
<p>Flexible tracks (the ones defined with <tt>1fr</tt> in the previous example) will <strong>grow or shrink and automatically</strong> adapt themselves to the viewport size. This allows to create very customized grids, defining flexible breadths depending on the contents or the available space.</p>
<p>We’ve created a <strong>repository with some examples and demos</strong>, feel free to play with them to get a better understanding of the spec capabilities:</p>
<p style="text-align: center;">
<a href="http://igalia.github.io/css-grid-layout/"><strong>http://igalia.github.io/css-grid-layout/</strong></a>
</p>
<p><big><strong>Implementation status</strong></big></p>
<p>Despite of being a Working Draft (WD) spec, implementations are appearing in the main web engines:</p>
<ul>
<li><strong><a href="http://msdn.microsoft.com/en-us/library/aa741317.aspx">IE/Trident</a></strong> first shipped an implementation in <a href="http://blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx">IE10</a>.</li>
<li><a href="https://lists.webkit.org/pipermail/webkit-dev/2011-November/018570.html">Google</a> started an implementation in <strong>WebKit</strong> by the end of 2011. <strong>Igalia</strong> has been working on this implementation since mid-2013, collaborating with Google in <strong><a href="http://www.chromium.org/blink">Chromium/Blink</a></strong> and maintaining an up-to-date implementation in <strong><a href="http://www.webkit.org">Safari/WebKit</a></strong>.</li>
<li>Mozilla started working on an implementation in <strong>Firefox/Gecko</strong> this year.</li>
</ul>
<p><big><strong>Acknowledgements </strong></big></p>
<p>Finally, we’d like to thank <a href="http://www.bloomberg.com/company/"><strong>Bloomberg</strong></a> for sponsoring our work around <strong>CSS Grid Layout</strong> on Blink and Webkit, together with the implementation of <a href="http://www.ecmascript.org/"><strong>ECMAScript 6</strong> (ES6)</a> features in <a href="https://code.google.com/p/v8/">V8</a> and <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engines.</p>
<p>
</p><div style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;" title="Igalia and Bloomberg working together to build a better web">
<img alt="Igalia logo" src="https://blogs.igalia.com/mrego/files/2014/03/igalia-logo.png">
<img alt="Bloomberg logo" src="https://blogs.igalia.com/mrego/files/2014/03/bloomberg-logo.png">
</div>
<span class="caption text-muted"><strong>Igalia</strong> and <strong>Bloomberg</strong> working together to build a better web</span>
<p></p>
<p>As a related note, my mates <a href="http://www.igalia.com/nc/igalia-247/igalian/item/juanjo/">Juanjo</a> and <a href="http://www.igalia.com/nc/igalia-247/igalian/item/xavi/">Xavi</a> were talking about <strong>CSS Grid Layout</strong> and <strong>CSS Regions</strong> in the last <a href="http://www.w3.org/2014/MWC/">Mobile World Congress at Barcelona as part of the W3C booth</a>. Check <a href="http://people.igalia.com/juanjo/CSS-MWC2014/">the slides</a> in case you missed it (demos and videos of this post are extracted from them).</p>
<p><strong>Igalia</strong> will keep working hard to evolve the implementation of <strong>CSS Grid Layout</strong> spec both in Blink and WebKit. We’ll try to keep you informed about our progress, stay tuned!</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 14/03/13 18:37, **[Tanty](http://www.andresgomez.org/)** wrote:
<blockquote>
<p>Awesome work!</p>
</blockquote>
</div>
Performance of selection with CSS Regions in WebKit and Blink (Part II – perf profiler)2014-01-29T00:00:00Zhttps://blogs.igalia.com/mrego/2014/01/29/performance-of-selection-with-css-regions-in-webkit-and-blink-part-ii-perf-profiler/<p>After the <a href="http://blogs.igalia.com/mrego/2013/12/10/performance-of-selection-with-css-regions-in-webkit-and-blink-part-i-perftests/">initial post introducing this topic and describing the Performance Tests (perftests)</a>, now is time to explain how to <strong>analyze the performance issues with a profiler</strong> in order to improve the code.
<big><strong><em>“Manual”</em> measurements</strong></big></p>
<p>First of all, you can think of doing some measurements in the source code trying to find the possible bottle necks in an application. For example you could use the following lines inside WebKit/Blink in order to measure the time required to execute a given function:</p>
<div class="wp_syntax">
<table>
<tr>
<td class="code">
<pre class="cpp" style="font-family:monospace;">timespec ts<span style="color: #008080;">;</span>
clock_gettime<span style="color: #008000;">(</span>CLOCK_REALTIME, <span style="color: #000040;">&</span>ts<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
<span style="color: #0000dd;">printf</span><span style="color: #008000;">(</span><span style="color: #FF0000;">"%lld.%.9ld<span style="color: #000099; font-weight: bold;">\n</span>"</span>, <span style="color: #008000;">(</span><span style="color: #0000ff;">long</span> <span style="color: #0000ff;">long</span><span style="color: #008000;">)</span>ts.<span style="color: #007788;">tv_sec</span>, ts.<span style="color: #007788;">tv_nsec</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
<span style="color: #666666;">// Call to the function you want to measure.</span>
timespec ts2<span style="color: #008080;">;</span>
clock_gettime<span style="color: #008000;">(</span>CLOCK_REALTIME, <span style="color: #000040;">&</span>ts2<span style="color: #008000;">)</span><span style="color: #008080;">;</span>
<span style="color: #0000dd;">printf</span><span style="color: #008000;">(</span><span style="color: #FF0000;">"%lld.%.9ld<span style="color: #000099; font-weight: bold;">\n</span>"</span>, <span style="color: #008000;">(</span><span style="color: #0000ff;">long</span> <span style="color: #0000ff;">long</span><span style="color: #008000;">)</span>ts2.<span style="color: #007788;">tv_sec</span>, ts2.<span style="color: #007788;">tv_nsec</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span>
<span style="color: #0000dd;">printf</span><span style="color: #008000;">(</span><span style="color: #FF0000;">"Diff: %lld.%.9ld<span style="color: #000099; font-weight: bold;">\n</span>"</span>, <span style="color: #008000;">(</span><span style="color: #0000ff;">long</span> <span style="color: #0000ff;">long</span><span style="color: #008000;">)</span>ts2.<span style="color: #007788;">tv_sec</span> <span style="color: #000040;">-</span> ts.<span style="color: #007788;">tv_sec</span>, ts2.<span style="color: #007788;">tv_nsec</span> <span style="color: #000040;">-</span> ts.<span style="color: #007788;">tv_nsec</span><span style="color: #008000;">)</span><span style="color: #008080;">;</span></pre>
</td>
</tr>
</table>
</div>
<p>Actually <strong>this is a pretty bad idea</strong> for a number of reasons:</p>
<ul>
<li>Checking directly times with <tt>printf()</tt> is wrong as you are adding I/O that will spoil the measurements.</li>
<li>You have to modify the source code for every statement you want to measure, this can be really hard in large projects like WebKit/Blink.</li>
<li>There are better tools out there, called profilers, explicitly designed for this very same purpose, let’s use them.</li>
</ul>
<p><big><strong>Using <tt>perf</tt> profiler</strong></big></p>
<p>In this case we are going to talk about <strong>how to use <a href="https://perf.wiki.kernel.org/index.php/Main_Page">perf</a></strong> in a GNU/Linux environment to analyze the performance of the <a href="http://webkitgtk.org/">WebKitGTK+ port</a>. You could follow the next steps:</p>
<ul>
<li>Install it. It depends on your distro, but it should be simple. For example in Debian: <code>apt-get install linux-tools</code></li>
<li>Run <tt>perf record</tt> to get the data. This will create a file called <tt>perf.data</tt>. Here you have different options:
<ul>
<li>Call directly the application, it will follow the children processes, so it works properly in WebKit2 architecture with multiple processes: <code>perf record -g <app></code></li>
<li>Connect <tt>perf</tt> to an already existing process, for example to the WebProcess: <code>perf record -p <process-pid> -g</code></li>
</ul>
</li>
<li>Use <tt>perf report</tt> to analyze the data gathered by <tt>perf record</tt>. Simply use the following command (where <tt>-i <file-name></tt> is optional as by default it reads <tt>perf.data</tt> file): <code>perf report -i <file-name></code></li>
</ul>
<p>About how to collect the data, in WebKitGTK+ you have the alternative to <strong>generate the <tt>perf</tt> data files while running the perftests</strong>. Just adding some arguments to <tt>run-perf-tests</tt> script: <code>Tools/Scripts/run-perf-tests --platform=gtk --debug --profile</code></p>
<p>Which will create a file called <tt>test.data</tt> under <tt>WebKitBuild/Debug/layout-test-results/</tt> folder.</p>
<p><big><strong>Analyze profile session</strong></big></p>
<p><tt><strong>perf report</strong></tt> provides you the list of methods that have been running for more time, with the percentage of how many time was spent in each of them. Then you can get the full backtraces from the different places the method is called and know how many times it was invoked from each trace.</p>
<p>Let’s use a concrete example to illustrate it. This is a <tt>perf report</tt> output got from the WebProcess doing a big selection in a page with <em>CSS Regions</em>:</p>
<pre>
- 6.26% lt-WebKitWebPro libwebkit2gtk-3.0.so.25.5.0 [.] WebCore::LayoutUnit::rawValue() const
- WebCore::LayoutUnit::rawValue() const
- 33.10% WebCore::operator+(WebCore::LayoutUnit const&, WebCore::LayoutUnit const&)
- 39.54% WebCore::LayoutRect::maxX() const
- 83.75% WebCore::LayoutRect::intersect(WebCore::LayoutRect const&)
- 98.69% WebCore::RenderRegion::repaintFlowThreadContentRectangle(WebCore::LayoutRect const&, bool, WebCore::LayoutRect const&, WebCore::LayoutRect const&, WebCore::LayoutPoint const&) const
WebCore::RenderRegion::repaintFlowThreadContent(WebCore::LayoutRect const&, bool) const
WebCore::RenderFlowThread::repaintRectangleInRegions(WebCore::LayoutRect const&, bool) const
- WebCore::RenderObject::repaintUsingContainer(WebCore::RenderLayerModelObject const*, WebCore::IntRect const&, bool) const
- 75.49% WebCore::RenderSelectionInfo::repaint()
WebCore::RenderView::setSelection(WebCore::RenderObject*, int, WebCore::RenderObject*, int, WebCore::RenderView::SelectionRepaintMode)
</pre>
<p>As you can see, 6.26% of the time is spent in <tt>LayoutUnit::rawValue()</tt> method, this is used in lots of places. 33.10% of the time it’s called from <tt>WebCore::operator+()</tt> which is also quite generic. We should keep going deeper in the call-graph till we reach some methods that are interesting in our particular case.</p>
<p>In this case, the selection starts in <tt>RenderView::setSelection()</tt>, so we should investigate further the methods called from there. Of course, in order to do that you need to have some understanding of the code where you’re moving or you’ll end up completely lost.</p>
<p><big><strong>Improve source code</strong></big></p>
<p>Thanks to this data I realized that in each <tt>RenderSelectionInfo::repaint()</tt> it’s used the <tt>RenderObject::containerForRepaint()</tt>. Which most times returns the parent <tt>RenderNamedFlowThread</tt> for all its children in the render tree.</p>
<p>This causes that for every element under <tt>RenderNamedFlowThread</tt> the method <tt>RenderFlowThread::repaintRectangleInRegions()</tt> is called. Taking a look to this method it has a loop over all the regions forcing a repaint. This means that if you have 1000 regions, even if you’re just selecting in one of them, a repaint in the rest of regions is executed.</p>
<p>So, I’ve provided <a href="https://bugs.webkit.org/show_bug.cgi?id=126460">a patch</a> that repaints only the affected regions, it means around <strong>12%, 18% and 73% improvement</strong> in <tt>Layout/RegionsSelection.html</tt>, <tt>Layout/RegionsSelectAllMixedContent.html</tt> and <tt>Layout/RegionsExtendingSelectionMixedContent.html</tt> perftest respectively.</p>
<p>Doing tests with more regions using <a href="https://rawgithub.com/Igalia/css-regions-selection/master/perf-regions.html">this example</a> we got the following results:</p>
<table style="width: 100%; border-collapse: collapse;" border="1">
<tr>
<th>
Regions
</th>
<p><th>
Without patch (ms)
</th></p>
<p><th>
With patch (ms)
</th></p>
<p><th>
Improvement
</th></p>
</tr>
<tr>
<th>
100
</th>
<p><td>
923
</td></p>
<p><td>
338
</td></p>
<p><td>
63%
</td></p>
</tr>
<tr>
<th>
150
</th>
<p><td>
2712
</td></p>
<p><td>
727
</td></p>
<p><td>
73%
</td></p>
</tr>
<tr>
<th>
200
</th>
<p><td>
5952
</td></p>
<p><td>
1285
</td></p>
<p><td>
78%
</td></p>
</tr>
<tr>
<th>
500
</th>
<p><td>
81731
</td></p>
<p><td>
7868
</td></p>
<p><td>
90%
</td></p>
</tr>
</table>
<p>As expected, results are better as we increase the number of regions.</p>
<p><big><strong>Conclusions</strong></big></p>
<p>This was just one specific example in order to explain how to use the available tools, trying to provide the required context to understand them properly.</p>
<p>For sure, there’s still plenty of work to be done in order to improve the performance of selection with <em>CSS Regions</em>. Nonetheless, we still have to settle a final implementation for the selection in <em>CSS Regions</em> before going on with the optimization efforts, as it was explained in <a href="http://blogs.igalia.com/mrego/2014/01/23/approach-to-fix-selection-with-css-regions-webkitgtk-hackfest-late-wrap-up/">my previous post</a> we’re on the way to fix it.</p>
<p>This work has been done inside the <a href="http://www.igalia.com/nc/igalia-247/news/item/igalia-partners-with-adobe-to-move-the-web-forward/">collaboration between <strong>Adobe</strong> and <strong>Igalia</strong> around <em>CSS Regions</em></a>.</p>
<p>In <strong><a href="http://www.igalia.com">Igalia</a></strong> we have a great experience in <strong>performance optimization for CSS standards</strong> like <a href="http://www.w3.org/TR/css3-flexbox/"><em>CSS Flexible Box Layout</em></a>, <a href="http://www.w3.org/TR/css3-grid-layout/"><em>CSS Grid Layout</em></a> and <a href="http://www.w3.org/TR/css3-regions/"><em>CSS Regions</em></a>. Please don’t hesitate to <a href="http://www.igalia.com/contact/">contact us</a> if you need some help around these topics.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 14/02/02 18:58, **J.A.** wrote:
<blockquote>
<p>Very interesting post, specially because it explains with a real example how to use a tool to improve the performance of an application.</p>
<p>Eager to see other examples using other tools :)</p>
</blockquote>
</div>
Approach to fix selection with CSS Regions (WebKitGTK+ hackfest late wrap-up)2014-01-23T00:00:00Zhttps://blogs.igalia.com/mrego/2014/01/23/approach-to-fix-selection-with-css-regions-webkitgtk-hackfest-late-wrap-up/<p>As you probably know if you have been following this blog, we’ve been working for a while in <strong>selection interaction with <em>CSS Regions</em></strong> inside a <a href="http://www.igalia.com/nc/igalia-247/news/item/igalia-partners-with-adobe-to-move-the-web-forward/">collaboration between <strong>Adobe</strong> and <strong>Igalia</strong></a>.
First of all, let’s contextualize this post.</p>
<p><big><strong>WebKitGTK+ Hackfest 2013</strong></big></p>
<p>Back in December it was organized the <a href="https://wiki.gnome.org/Hackfests/WebKitGTK2013"><strong>5th WebKitGTK+ Hackfest</strong> at Igalia offices in A Coruña (Spain)</a>. During that week <a href="https://blogs.adobe.com/webplatform/author/mihnea/">Mihnea</a>, <a href="http://blogs.igalia.com/jfernandez/">Javi</a> and myself were working together trying to find a good solution for selection in <em>CSS Regions</em>.</p>
<p>As <a href="http://blogs.igalia.com/jfernandez/2014/01/22/improving-selection-in-css-regions/">Javi has already explained in his last post</a>, our initial implementation to fix the issues of selection in documents with <em>CSS Regions</em> was discarded due to several problems.</p>
<p>At that point, the main goal was to find an approach that will <strong>make selection in <em>CSS Regions</em> spec compliant</strong> and might be validated by the editing experts in order to get it integrated upstream.</p>
<p><big><strong>Current problem</strong></big></p>
<p>According to <a href="https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html">editing spec</a> <strong>selection is DOM based</strong>. If you select some stuff in a page with <em>CSS Regions</em>, the <strong>content is retrieved properly from the DOM tree</strong>. In a selection <strong>retrieved content and highlighted content should match</strong>. However, this is not happening with <em>CSS Regions</em>.</p>
<p><em>CSS Regions</em> introduces a <strong>divergence between DOM and render trees</strong>. In <em>CSS Regions</em> some nodes of the <strong>DOM tree</strong> (called <em>content nodes</em>, the ones that have <tt>-flow-into</tt> property) are moved from the “regular” render tree (under <tt>RenderHTML</tt>) to the <tt>RenderFlowThread</tt> (a sibling of <tt>RenderHTML</tt>).</p>
<p>During the selection we have a <em>start</em> and <em>end</em> positions in the <strong>DOM tree</strong> that are mapped into positions in the <strong>render tree</strong>. Selection algorithms traverse the render tree from <em>start</em> to <em>end</em>, which has some issues with <em>CSS Regions</em> in several situations. Let’s use the following diagram to explain some of them.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2014/01/selection-css-regions-dom-tree-render-tree-example.jpg"><img src="https://blogs.igalia.com/mrego/files/2014/01/selection-css-regions-dom-tree-render-tree-example.jpg" alt="Diagram showing DOM and render trees together with visual display of a CSS Regions example"></a>
<span class="caption text-muted">Diagram showing DOM and render trees together with visual display of a <em>CSS Regions</em> example</span></p>
<p>Let’s imagine we perform a selection from <tt>content-1</tt> to <tt>content-2</tt>.</p>
<ul>
<li><strong>DOM selection</strong>: Returns the following nodes: <tt>content-1</tt>, <tt>source-1</tt> and <tt>content-2</tt>.</li>
<li><strong>Render tree selection</strong>: We start and end the selection outside the flow thread. However, <tt>source-1</tt> which is selected in the <strong>DOM tree</strong> is under the <tt>RenderFlowThread</tt> and it’s not processed by the algorithm while traversing the render tree from <em>start</em> to <em>end</em>. Thus, it’s not highlighted.</li>
<li><strong>Issue</strong>: <tt>source-1</tt> is not highlighted.</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2014/01/selection-css-regions-dom-tree-render-tree-example-a.jpg"><img src="https://blogs.igalia.com/mrego/files/2014/01/selection-css-regions-dom-tree-render-tree-example-a.jpg" alt="Example of current and expected behaviors for selection in CSS Regions"></a>
<span class="caption text-muted">Example of current and expected behaviors for selection in <em>CSS Regions</em></span></p>
<p><big><strong>Ideas</strong></big></p>
<p>After some discussion and lots of diagrams representing the DOM and render trees on paper, we came up with 2 ideas:</p>
<ul>
<li><strong>Subtrees approach</strong>: The idea is to <strong>split the render tree in subtrees</strong> calculating the <em>start</em> and <em>end</em> positions of the selection for each of them. Then it will use current selection methods to perform the selection inside each subtree.</li>
<li><strong>DOM order approach</strong>: In this case we would <strong>use DOM order to traverse the render tree</strong>. Also when looking for the container of a node, we will follow the <strong>DOM tree</strong> too if it’s a <em>content node</em>.</li>
</ul>
<img class="center-block" src="https://blogs.igalia.com/mrego/files/2014/01/handwritten-diagrams.png" alt="Handwritten diagrams representing DOM and render trees">
<span class="caption text-muted">Handwritten diagrams representing DOM and render trees</span>
<p>During the hackfest we implemented 2 <a href="https://github.com/Igalia/blink/tree/css-regions-selection-sub-trees">quick</a> <a href="https://github.com/Igalia/blink/tree/css-regions-selection-dom-based-traverse">prototypes</a> to check if previous ideas would solve the problems. In both cases results were satisfactory.</p>
<p>However, <strong>DOM order idea seems more complicated</strong> as some elements in the DOM tree might not be present in the render tree. On top of that, we should review carefully the different methods involved in the selection and modify how they traverse the tree (or look for their container) in some cases. This would imply several changes in the more complex parts of the selection code.</p>
<p>On a first sight the <strong>subtrees approach is more promising</strong> as it looks simpler and cleaner. After talking with <a href="https://rniwa.com/">Ryosuke Niwa</a> and <a href="https://twitter.com/hyatt_dave">David Hyatt</a> on <a href="https://www.webkit.org/contact.html">IRC</a> it was confirmed as the preferred approach and likely valid to be integrated into <a href="http://www.webkit.org/">WebKit</a>. In addition, it seems that more performance optimizations could be done with this approach. So, let’s explain deeply how this solution would work.</p>
<p><big><strong>Subtrees approach</strong></big></p>
<p>All selection algorithms are thought to work in a single render tree under <tt>RenderView</tt>. Actually, <tt>RenderHTML</tt> is the top element of the render tree where selection state is set (see <tt>RenderBoxModelObject::setSelectionState()</tt>).</p>
<p>Inside this render tree the <strong><em>start</em> object is always before than the <em>end</em> object</strong>. But that’s not always true in the case of <em>CSS Regions</em>, as you can see in the diagram above. For example, if you start selection inside the <tt>source-1</tt> element (depending on its position inside the <tt>DOM tree</tt>) <em>start</em> position could be under the <tt>RenderFlowThread</tt> and <em>end</em> under the <tt>RenderHTML</tt>.</p>
<p>So, this solution will <strong>split the render tree in subtrees</strong> where the root objects would be:</p>
<ul>
<li>On one hand, the <tt>RenderHTML</tt> (for the “regular” render tree).</li>
<li>On the other hand, all the <tt>RenderFlowThreads</tt> (there will be 1 per flow thread in the page).</li>
</ul>
<p>Then the total number of subtrees we’ll be <strong>1 (the <tt>RenderHTML</tt> subtree) + number of flow threads</strong>.</p>
<p><strong>For each subtree we’ll calculate the <em>start</em> and <em>end</em> positions (<em>start</em> will be always before <em>end</em>)</strong>. And then we’ll call selection algorithms for each subtree using that positions.</p>
<p>In the previous example we’ll have 2 subtrees:</p>
<ul>
<li><tt>RenderHTML</tt> subtree.</li>
<li><tt>RenderFlowThread</tt> (<tt>flow-1</tt>) subtree.</li>
</ul>
<p>Let’s calculate <em>start</em> and <em>end</em> positions for each subtree taking into account the example above:</p>
<ul>
<li><tt>RenderHTML</tt> subtree:
<ul>
<li><em>start</em>: <tt>content-1</tt>, <em>offset</em>: start offset set by user’s selection.</li>
<li><em>end</em>: <tt>content-2</tt>, <em>offset</em>: end offset set by user’s selection.</li>
</ul>
</li>
<li><tt>RenderFlowThread</tt> (<tt>flow-1</tt>) subtree:
<ul>
<li><em>start</em>: <tt>source-1</tt>, <em>offset</em>: start of <tt>source-1</tt> object.</li>
<li><em>end</em>: <tt>source-1</tt>, <em>offset</em>: end of <tt>source-1</tt> object.</li>
</ul>
</li>
</ul>
<p><a href="https://blogs.igalia.com/mrego/files/2014/01/selection-css-regions-dom-tree-render-tree-subtrees.jpg"><img src="https://blogs.igalia.com/mrego/files/2014/01/selection-css-regions-dom-tree-render-tree-subtrees.jpg" alt="Subtrees approach DOM and render trees selection example"></a>
<span class="caption text-muted"><strong>Subtrees approach</strong> DOM and render trees selection example</span></p>
<p>Using these subtrees <tt>RenderView::setSelection()</tt> method will be called for each of them. Subtree’s root object will need to store information about <em>start</em> and <em>end</em> positions (together with their offsets).</p>
<p><big><strong>Conclusion</strong></big></p>
<p>This is an <strong>important milestone</strong> for the work we have been doing lately, and it allows us to have a clear path to make progress on this field and eventually fixing the selection in <em>CSS Regions</em>.</p>
<p>Of course, there’s still quite a lot of work to do. We’ll improve current prototype to convert it in a real patch to be uploaded at <a href="https://bugs.webkit.org/">WebKit’s bugzilla</a> and got it integrated after the review iterations. Then, as usual, we’ll try to get integrated into <a href="http://www.chromium.org/blink">Blink</a> too.</p>
<p>Finally, thanks to <a href="http://www.gnome.org/foundation/">The GNOME Foundation</a> and <a href="http://www.igalia.com">Igalia</a> for sponsoring the WebKitGTK+ Hackfest, and also to Mihnea for attending and helping us to move this topic forward sharing his experience on the <em>CSS Regions</em> standard.</p>
<p>Exciting times ahead, stay tuned! Happy hacking. :-)</p>
<p><a href="http://www.gnome.org/foundation/"><img src="https://blogs.igalia.com/mrego/files/2014/01/gnome-foundation-logo.png" alt="Sponsored by GNOME Foundation logo"></a></p>
<p><a href="http://www.igalia.com/"><img src="https://blogs.igalia.com/mrego/files/2014/01/igalia-logo.png" alt="Igalia logo"></a></p>
<div style="clear: both;">
</div>
Performance of selection with CSS Regions in WebKit and Blink (Part I – Perftests)2013-12-10T00:00:00Zhttps://blogs.igalia.com/mrego/2013/12/10/performance-of-selection-with-css-regions-in-webkit-and-blink-part-i-perftests/<p>In a nutshell, <a href="http://dev.w3.org/csswg/css-regions/"><em>CSS Regions</em></a> are a new <a href="http://w3.org">W3C</a> specification that allows next generation responsive design in the web platform (you can read <a href="https://www.webkit.org/blog/3078/advanced-layout-made-easy-with-css-regions/">this article</a> for a nice introduction). <a href="http://blogs.adobe.com/webplatform/"><strong>Adobe WebPlatform team</strong></a> is doing a great job leading the implementation of this standard and we at <a href="http://www.igalia.com/webkit/"><strong>Igalia</strong></a> are joining efforts to contribute to the challenge.
<strong>Selection’s performance</strong> plays an important role in the collaboration between <a href="http://www.igalia.com/nc/igalia-247/news/item/igalia-partners-with-adobe-to-move-the-web-forward/"><strong>Adobe</strong> and <strong>Igalia</strong></a> around <em>CSS Regions</em>. This is the first of a series of articles on how to fix performance issues in <em>WebKit/Blink</em> using the selection in regions use case as example.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2013/12/selection-performance-no-regions-vs-regions1.png"><img src="https://blogs.igalia.com/mrego/files/2013/12/selection-performance-no-regions-vs-regions1.png" alt="Example of selection performance in a document with and without CSS Regions in WebKitGTK+"></a>
<span class="caption text-muted">Example of selection performance in a document with and without <em>CSS Regions</em> in <em>WebKitGTK+</em></span></p>
<p>We’ve been checking the performance of selection in regular pages compared to pages using <em>CSS Regions</em>. We created <a href="http://igalia.github.io/css-regions-selection/index.html#perf-tests">some examples (that you can try by yourselves)</a> and they clearly show that the selection with regions is pretty slower as you can see in the picture. On the one hand this was expected due to complexity of <em>CSS Regions</em>, on the other hand we wanted to take a deeper look and see how it can be improved.</p>
<p>First of all we need objective numbers in order to show that the new patches improve (or not) the performance. For this purpose <em>WebKit</em> and <em>Blink</em> provide a mechanism called <a href="http://trac.webkit.org/wiki/Performance%20Tests"><strong>Performance Tests</strong> (perftests)</a>. Perftests measure the time required to run them and also the memory they consume. The idea is to create a baseline with these values and spot performance regressions in new revisions (see <a href="https://perf.webkit.org/">some nice charts</a> generated from them).</p>
<p>On a low level note, <strong>perftests</strong> are simply HTML files which generally use a JavaScript object called <tt>PerfTestRunner</tt> which provides different utility functions, you can find them under <tt>PerformanceTests/</tt> folder (both in <a href="http://trac.webkit.org/browser/trunk/PerformanceTests/"><em>WebKit</em></a> and <a href="https://src.chromium.org/viewvc/blink/trunk/PerformanceTests/"><em>Blink</em></a>). In addition you can run them using <tt> Tools/Scripts/run-perf-tests</tt> script.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2013/12/performance-tests-layout-regions-selection.png"><img src="https://blogs.igalia.com/mrego/files/2013/12/performance-tests-layout-regions-selection.png" alt="Running Layout/RegionsSelection.html perftest directly in WebKitGTK+ MiniBrowser"></a>
<span class="caption text-muted">Running <tt>Layout/RegionsSelection.html</tt> perftest directly in <em>WebKitGTK+</em> MiniBrowser</span></p>
<p>There were already some <em>CSS Regions</em> perftests (see <tt>PerfTestRunner/Layout/</tt> directory) but none of them about selection. So we decided to create a <strong>new perftest for selection in <em>CSS Regions</em></strong>. The new test has 100 regions and it selects text from the first region to the last one passing through the rest of regions. That way we’re somehow simulating the interaction of a selection done by a real user. The test is called <tt>RegionsSelection.html</tt> and it’s available in <a href="http://trac.webkit.org/browser/trunk/PerformanceTests/Layout/RegionsSelection.html"><em>WebKit</em></a> and <a href="https://src.chromium.org/viewvc/blink/trunk/PerformanceTests/Layout/RegionsSelection.html"><em>Blink</em></a>.</p>
<blockquote>
<p>Note: <em>CSS Regions</em> perftests are still skipped by default because of the fact that regions performance is an ongoing development. They’ll be enabled in the future once it’s possible to create a baseline.</p>
</blockquote>
<p>Just to let you know how it looks like when you use the script, below you can see the <strong>results</strong> of running the perftest in <a href="http://webkitgtk.org/"><em>WebKitGTK+</em></a> (using <a href="http://trac.webkit.org/changeset/160082">r160082</a>):</p>
<pre>
$ Tools/Scripts/run-perf-tests --platform=gtk -2 Layout/RegionsSelection.html
Running 1 tests
Running Layout/RegionsSelection.html (1 of 1)
DESCRIPTION: Testing selection with 100 regions. Select text from first region to last one passing through all the regions.
RESULT Layout: RegionsSelection: Time= 987.760100001 ms
median= 990.745000017 ms, stdev= 8.95593764346 ms, min= 978.406000009 ms, max= 1013.26800004 ms
RESULT Layout: RegionsSelection: JSHeap= 173468.6 bytes
median= 173957.0 bytes, stdev= 1973.74275506 bytes, min= 169707.0 bytes, max= 174869.0 bytes
RESULT Layout: RegionsSelection: Malloc= 1593350.4 bytes
median= 1591104.0 bytes, stdev= 15450.5740939 bytes, min= 1567544.0 bytes, max= 1622624.0 bytes
Finished: 31.423325 s
</pre>
<p>Finally, once we have a perftest that provides objective numbers, we can start using a profiler and extract some data that helps us modify the code in order to improve the performance. We’ll talk about that in the next post. Stay tuned if you don’t want to miss what <a href="http://www.igalia.com"><strong>Igalia</strong></a> is doing related to <em>CSS Regions</em>.</p>
Improving tests coverage for selection with CSS Regions in WebKit and Blink2013-11-06T00:00:00Zhttps://blogs.igalia.com/mrego/2013/11/06/improving-tests-coverage-for-selection-with-css-regions-in-webkit-and-blink/<p>It’s been almost a year since my previous post in this blog, I think this deserves an explanation. This year I’ve been working intensively in web internals as part of <a href="http://www.igalia.com/webkit/"><strong>Igalia’s browsers team</strong></a>. Besides other stuff, I’ve been working in <a href="http://www.webkitgtk.org"><strong>WebKitGTK+</strong></a> port and its new <strong><a href="http://webkitgtk.org/reference/webkit2gtk/stable/">WebKit2 API</a></strong>, contributing some patches into <a href="https://projects.gnome.org/epiphany/"><strong>Epiphany</strong> (GNOME Web Browser)</a> and lately working in the <a href="http://dev.w3.org/csswg/css-regions/"><strong>CSS Regions</strong></a> implementation in <a href="http://www.webkit.org"><strong>WebKit</strong></a> (where <a href="http://www.webkit.org/team.html">I’m already a <em>committer</em></a> :-D) and <a href="http://www.chromium.org/blink"><strong>Blink</strong></a> as part of the collaboration between <a href="http://www.igalia.com/nc/igalia-247/news/item/igalia-partners-with-adobe-to-move-the-web-forward/"><strong>Adobe</strong> and <strong>Igalia</strong></a>.
Inside this collaboration, our main goal is to fix the <strong>selection</strong> issues in documents using <strong>CSS Regions</strong>. You can read more information about it on <a href="http://blogs.igalia.com/jfernandez/2013/10/15/css-regions-and-selection/">Javi Fernández’s post</a>. As explained there we have <a href="http://igalia.github.io/css-regions-selection/">cooked some examples</a> highlighting different issues with selection in CSS Regions.</p>
<p>Despite of having more than 35,000 tests in WebKit, there were almost no tests checking the selection in CSS Regions. Thus, we’ve been creating different <a href="http://trac.webkit.org/wiki/WikiStart#LayoutTests"><strong>layout tests</strong></a> that you can find under <tt>LayoutTests/fast/regions/selection/</tt> folder in <a href="http://trac.webkit.org/browser/trunk/LayoutTests/fast/regions/selection/">WebKit</a>‘s and <a href="https://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/regions/selection/">Blink</a>‘s source trees.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2013/10/selection-css-regions-layout-test.png"><img src="https://blogs.igalia.com/mrego/files/2013/10/selection-css-regions-layout-test.png" alt="Example of layout test for selection in CSS Regions using vertical-rl writing mode"></a>
<span class="caption text-muted">Example of layout test for selection in CSS Regions using <tt>vertical-rl</tt> writing mode</span></p>
<p>Most of them are <a href="http://trac.webkit.org/wiki/Writing%20Reftests"><strong>reftests</strong></a>, which means that we have two HTML files that should render the very same result. Specifically in this case we usually compare the result of the selection content and highlighted text in CSS Regions with the result of a crafted HTML page using absolute positions. Moreover, we try to do the tests in a way that you can check them manually directly opening the HTML file a browser. Besides, we’ve created tests for different <a href="http://www.w3.org/TR/2013/WD-css-writing-modes-3-20131024/">writing modes</a> like <tt>horizontal-bt</tt>, <tt>vertical-lr</tt> and <tt>vertical-rl</tt>.</p>
<p>At this point we have a good tests coverage that should be enough as base to prevent breakages in the selection with CSS Regions. Anyway, it’s clear that more tests will come in the future as soon as implementation advances and some issues get fixed. You can follow the work we’ve been doing on <a href="https://bugs.webkit.org/show_bug.cgi?id=118668">this meta-bug</a>.</p>
<p>Just for the record, here you have the full list of WebKit bugs and Blink issues related to this task:</p>
<ul>
<li><strong>WebKit</strong>:
<ul>
<li><a href="https://blogs.igalia.com/mrego/2013/11/06/improving-tests-coverage-for-selection-with-css-regions-in-webkit-and-blink/%E2%80%8Bhttps:/bugs.webkit.org/show_bug.cgi">Bug 121501 – [CSS Regions] Layout Test for selection direction</a></li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=121841">Bug 121841 – [CSS Regions] Layout Test for selecting text in 2 regions</a></li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=122099">Bug 122099 – [CSS Regions] Selection layout tests moved to specific folder</a></li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=122128">Bug 122128 – [CSS Regions] Helper functions for selection layout tests</a></li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=122327">Bug 122327 – [CSS Regions] Layout Tests for selecting text in 2 regions for other writing modes</a></li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=122353">Bug 122353 – [CSS Regions] Layout Test for selecting text ignoring region content</a></li>
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=123327">Bug 123327 – [CSS Regions] Rename CSS classes and JS methods in vertical layout tests about selection</a></li>
</ul>
</li>
<li><strong>Blink</strong>:
<ul>
<li><a href="https://codereview.chromium.org/25220002/">Issue 25220002 – [CSS Regions] Layout Test for selection direction</a></li>
<li><a href="https://codereview.chromium.org/25761004/">Issue 25761004 – [CSS Regions] Helper functions for selection layout tests</a></li>
<li><a href="https://codereview.chromium.org/25868002/">Issue 25868002 – [CSS Regions] Selection layout tests moved to specific folder</a></li>
<li><a href="https://codereview.chromium.org/25890007/">Issue 25890007 – [CSS Regions] Layout Test for selecting text in 2 regions</a></li>
<li><a href="https://codereview.chromium.org/34863002/">Issue 34863002 – [CSS Regions] Layout Test for selecting text ignoring region content</a></li>
</ul>
</li>
</ul>
<p>Finally, I’d like to thank <a href="http://www.igalia.com">Igalia</a> for giving me the chance to get involved in browsers development, working in the implementation of last specifications is a challenging but very heartwarming task. Let’s keep working hard to improve the web experience!</p>
LibrePlan: Adapt planning according to timesheets2012-11-28T00:00:00Zhttps://blogs.igalia.com/mrego/2012/11/28/libreplan-adapt-planning-according-to-timesheets/<p>During the last weeks I’ve been working in a new feature for <a href="http://www.libreplan.com"><strong>LibrePlan</strong></a> that allows to update the project plan using the data from the timesheets.
Let’s use an example in order to explain the new functionality better.</p>
<blockquote>
<p>Imagine that you have scheduled a task to be done during <strong>week 45</strong>, however the timesheets reporting hours to that task are in <strong>week 47</strong>. This means that you’re not fulfilling the plan and you have a delay of <strong>2 weeks</strong> in that task. Besides, maybe that task has dependencies with other tasks, so this delay also means that other tasks are going to be delayed.</p>
<p>Some questions:</p>
<ul>
<li>
<p><em>How could you check that information in LibrePlan?</em></p>
</li>
<li>
<p><em>How could you update the current plan?</em></p>
</li>
</ul>
</blockquote>
<p>In order to solve these problems a new feature has been developed. The final implementation includes different things which will be explained below.</p>
<ul>
<li>
<p><strong>Mark a task as finished from the timesheets</strong>
In the timesheets UI (both in standard and personal timesheets) you’ll have the option to mark if a task is finished or not. You can only mark a task as finished once, but the task end date will be taken from the last timesheet reporting hours over that task. Then, when you use the new button to adapt the planning, a new 100% progress of type <em>timesheets</em> will be set for the task, which means that the task has been finished.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2012/11/libreplan-popup-finished-task.png"><img src="https://blogs.igalia.com/mrego/files/2012/11/libreplan-popup-finished-task.png" alt="Pop-up to mark task as finished in personal timesheets" title="Pop-up to mark task as finished in personal timesheets"></a></p>
<p class="caption text-muted">
Pop-up to mark task as finished in personal timesheets
</p>
</li>
<li>
<p><strong>New marks in reported hours bar</strong>
If you use the button <em>Show/Hide reported hours</em>, you’ll see the pink bars in the Gantt representing the hours reported in the timesheets compared with the planned (or estimated) hours. Now, together with that information you’ll also see two square brackets, that represent the first and last date in which there’re reported hours in the timesheets.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2012/11/libreplan-timesheets-marks.png"><img src="https://blogs.igalia.com/mrego/files/2012/11/libreplan-timesheets-marks.png" alt="Gantt showing marks with information from timesheets" title="Gantt showing marks with information from timesheets"></a></p>
<p class="caption text-muted">
Gantt showing marks with information from timesheets
</p>
<blockquote>
<p>As you can see in the picture most of the tasks started more or less when it was planned. However, we can detect some issues:</p>
<ul>
<li><em>Draft</em> task is delayed 2 weeks, which makes <em>Template</em> task to be delayed too.</li>
<li><em>Shopping cart</em> task was started in the planned date, however it’s taking more time than expected.</li>
</ul>
</blockquote>
</li>
<li>
<p><strong>Adapt planning button</strong>
There is a new button (close to <em>Reassign</em>) in the project Gantt view that will allow you to adapt your current planning with the information extracted from the timesheets. This will allow you to modify your planning as people report hours in the timesheets.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2012/11/libreplan-adapt-planning-according-timesheets.png"><img src="https://blogs.igalia.com/mrego/files/2012/11/libreplan-adapt-planning-according-timesheets.png" alt="Planning adapted according timesheets data" title="Planning adapted according timesheets data"></a></p>
<p class="caption text-muted">
Planning adapted according timesheets data
</p>
<blockquote>
<p>Once the planning has been adapted according to timesheets data, you’ll see the actual status of your project. Moreover, you’ll have the possibility to know which tasks are finished. In the example the finished tasks are only: <em>Draft</em>, <em>Product management</em> and <em>Shopping cart</em>.</p>
<p>With all this information you’ll be able to modify the future planning in order to finish the project in the expected date (maybe allocating more resources, reducing some tasks, …). </p></blockquote></li></ul><p></p>
<p>Summarizing, we think that this is a nice addition that could be helpful to our users in order to manage better their projects. It’ll be available in the upcoming <strong>version 1.3.2</strong> (you can already test it in the <a href="http://unstable.libreplan.org/libreplan-unstable/">unstable environment</a>) and, as usual, we’ll be really glad to <a href="http://ask.libreplan.org/">receive your feedback</a> about it. If you want to know more, you can review the <a href="http://wiki.libreplan.org/twiki/bin/view/LibrePlan/AnA07S10AdaptPlanningAccordingTimesheets">analysis</a> and <a href="http://wiki.libreplan.org/twiki/bin/view/LibrePlan/ItEr77S12AdaptPlanningAccordingTimesheets">implementation notes</a> at LibrePlan wiki.</p>
<p>Finally, we’d like to publicly thanks to <a href="http://www.somabe.com/"><strong>SOMABE</strong></a> for sponsoring this development. As you probably know <a href="http://www.igalia.com"><strong>Igalia</strong></a> offers this kind of <a href="http://www.libreplan.com/services/cloud-services/">customizations and other services around <strong>LibrePLan</strong></a>, don’t hesitate to <a href="http://www.libreplan.com/nc/contact/">contact us</a>.</p>
First LibrePlan Hackfest2012-11-09T00:00:00Zhttps://blogs.igalia.com/mrego/2012/11/09/first-libreplan-hackfest/<p>Yesterday, we arranged the <a href="http://wiki.libreplan.org/twiki/bin/view/LibrePlan/LibrePlanHackfestNovember2012"><strong>first LibrePlan hackfest</strong></a> at <a href="http://www.igalia.com">Igalia</a> headquarters in <a href="http://en.wikipedia.org/wiki/A_Coru%C3%B1a">A Coruña</a>.</p>
<div id="attachment_1023" class="wp-caption alignright">
<a href="https://blogs.igalia.com/mrego/files/2012/11/IMG_20121108_201404.jpg"><img src="https://blogs.igalia.com/mrego/files/2012/11/IMG_20121108_201404.jpg" alt="Blackboard with the brainstorming" title="Blackboard with the brainstorming of LibrePlan hackfest"></a>
<p class="caption text-muted">
Blackboard with the brainstorming of LibrePlan hackfest
</p>
</div>
<p>First of all, we started with a <strong>brainstorming</strong> where each of us provided his own ideas about how to improve the project. We ended up with a plan for the day defined by a quite big list of topics:</p>
<ul>
<li>Right-click in the left menu of the project planning perspective.</li>
<li>Make projects list sortable in the main Gantt view.</li>
<li>Filter by name in projects and tasks view.</li>
<li>Implement dependencies with lag.</li>
<li>Avoid to leave the project perspectives without being warned if you have not saved the project.</li>
<li>Review some bugs that were pending from some time ago and need some discussion.</li>
<li>Give some love to help.</li>
<li>Create a new project status called “pre-sales”.</li>
<li>Add a milestone from WBS view.</li>
<li>Add dependencies from WBS view.</li>
<li>Copy/move tasks.</li>
<li>Copy projects.</li>
<li>Allow to modify LDAP/DB property in users edition.</li>
<li>Review and update Fedora hacking instructions.</li>
<li>Review some usability improvements.</li>
<li>Mobile application for bound resources.</li>
</ul>
<p>And as you can read below the outcome was pretty good.</p>
<div id="attachment_1057" class="wp-caption alignleft">
<a href="https://blogs.igalia.com/mrego/files/2012/11/IMG_20121108_200452.jpg"><img src="https://blogs.igalia.com/mrego/files/2012/11/IMG_20121108_200452.jpg" alt="Jacobo and Óscar at LibrePlan hackfest" title="Jacobo and Óscar at LibrePlan hackfest"></a>
<p class="caption text-muted">
Jacobo and Óscar at LibrePlan hackfest
</p>
</div>
<p><a href="http://www.igalia.com/igalian/jaragunde">Jacobo</a> was the first one finishing a task, he updates <strong>Fedora hacking instructions</strong> and also fix some issues preventing to compile LibrePlan with <strong>OpenJDK 7</strong>.</p>
<p><a href="http://www.igalia.com/igalian/jmoran">Javi</a> and <a href="http://www.jeroenbaten.nl/">Jeroen</a> were talking about different issues around LibrePlan, from the new <a href="http://www.libreplan.com/audiovisual">LibrePlan customization for the <strong>audiovisual</strong> sector</a>, to the last events where we’ve had some talks about LibrePlan (like <a href="http://www.libresoftwareworldconference.com/en/schedule/programa-jueves-18.html">Libre Software World Conference</a> and <a href="http://www.t-dose.org/2012/talks/introducing-libreplan-open-source-projectplanner">T-Dose</a>). They also discussed about the community, the future of the project and many other things.</p>
<p><a href="http://twitter.com/_ogf_">Óscar</a> and me started to <strong>review some bugs</strong> that have some special complexity and discussed the possible solutions. Óscar worked out a patch for <a href="http://bugs.libreplan.org/show_bug.cgi?id=1413">bug #1413</a> and we also took a look to <a href="http://bugs.libreplan.org/show_bug.cgi?id=1320">#1320</a>, <a href="http://bugs.libreplan.org/show_bug.cgi?id=1265">#1265</a> and <a href="http://bugs.libreplan.org/show_bug.cgi?id=1553">#1553</a>.</p>
<p><a href="http://www.igalia.com/igalian/ltilve">Loren</a> began with the <strong>protect upper menu task</strong>, in order to prevent users to lose changes when they forget to use the save button. We really think that our users will appreciate this as you won’t have to worry about it anymore as Loren and Óscar finally managed to fix it. :-D</p>
<div id="attachment_1044" class="wp-caption alignright">
<a href="https://blogs.igalia.com/mrego/files/2012/11/LibrePlan-App-screenshots.png"><img src="https://blogs.igalia.com/mrego/files/2012/11/LibrePlan-App-screenshots.png" alt="LibrePlan mobile app screenshots" title="LibrePlan mobile app screenshots"></a>
<p class="caption text-muted">
LibrePlan mobile app screenshots
</p>
</div>
<p>During the afternoon, after a nice lunch, we carried on with the hackfest.</p>
<p>I kept working in a small <strong>mobile application for bound users</strong>. The purpose of the app is to allow bound users query their assigned and report worked hours via the personal timesheets. The first part is almost ready and you can already see the list of assigned tasks to a bound resource in your phone.</p>
<p>Jeroen was working a little bit in the <strong>help</strong> in order to give it a new refreshing look.</p>
<p>Jacobo also did the task regarding to edit if a user is a <strong>LDAP or database</strong> user. And at the end of the day he was working in some usability improvements regarding how to set properly the focus while working in the WBS.</p>
<p>Loren began an approach to include the <strong>right-click on the project/task name</strong> avoiding the need to use the box in the Gantt to enter a project or allocate a task.</p>
<div id="attachment_1028" class="wp-caption alignleft">
<a href="https://blogs.igalia.com/mrego/files/2012/11/IMG_20121108_200506.jpg"><img src="https://blogs.igalia.com/mrego/files/2012/11/IMG_20121108_200506.jpg" alt="Javi, Jeroen and Loren at LibrePlan hackfest" title="Javi, Jeroen and Loren at LibrePlan hackfest"></a>
<p class="caption text-muted">
Javi, Jeroen and Loren at LibrePlan hackfest
</p>
</div>
<p>Javi was working in his patches to <strong>show the load of the resources</strong> to be assigned in the allocation pop-up. He also discussed some stuff with Óscar in order to improve the current implementation.</p>
<p>Jeroen, Loren and me were debating the possible <strong>project status</strong> in LibrePlan. Finally we included two new status “pre-sales” and “on hold” and also renamed the one related with subcontracted projects to “outsourced”. So the final list of project status is: pre-sales, offered, outsourced, accepted, started, on hold, finished, canceled and stored.</p>
<p>Finally, I’d like to specially thank <strong>Jeroen</strong> and <strong>Óscar</strong> for coming to the hackfest and contributing with their ideas and experience. And also to <strong>Igalia</strong> for sponsoring it. On the other hand, it was a pity that some people couldn’t attend in the last minute.</p>
<p>It was a really nice day, and we hope to repeat this experience in the future, you’ll enjoy the result of this day in the <strong>next LibrePlan versions</strong>!</p>
<div id="attachment_1033" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/11/IMG_20121108_201707.jpg"><img src="https://blogs.igalia.com/mrego/files/2012/11/IMG_20121108_201707.jpg" alt="Group picture of LibrePlan hackfest" title="Group picture of LibrePlan hackfest"></a>
<p class="caption text-muted">
Group picture of LibrePlan hackfest
</p>
</div>
<p>You guys rock! Happy hacking :-)</p>
LibrePlan: New Project Status Report2012-10-31T00:00:00Zhttps://blogs.igalia.com/mrego/2012/10/31/libreplan-new-project-status-report/<p>Lately <a href="http://www.igalia.com">we</a>‘ve been working in a new report in <a href="http://www.libreplan.com"><strong>LibrePlan</strong></a>. The report is called <strong>Project Status Report</strong> and the first part of the report (related to hours) is already available in <a href="http://www.libreplan.com/nc/news/detail/article/time-for-a-minor-release-libreplan-131-is-out/">LibrePlan 1.3.1</a>, however in the next version some additions over this report will be included.
The main goal of this report is to have a printable version of the project task tree (WBS) summarizing some important information regarding 2 aspects:</p>
<ul>
<li><strong>Hours</strong>: For each task in a project it will show the 3 type of hours we have in LibrePlan:
<ul>
<li><em>Estimated</em>: The ones filled in the WBS tree.</li>
<li><em>Planned</em>: The allocated hours, they are configured in the task allocation. They can be the same or not than <em>Estimated</em> hours as you can change it while doing the planning.</li>
<li><em>Imputed</em>: The hours devoted to a task by the workers. Introduced in the timesheets (work reports). If the number of <em>Imputed</em> hours is bigger than <em>Planned</em> hours, then it’ll be shown an exclamation mark and the number will appear in red.</li>
</ul>
</li>
<li><strong>Money cost</strong>: Apart from the hours information in the new version will be included information about the money cost:
<ul>
<li><em>Budget</em>: Estimated budget in the WBS.</li>
<li><em>Hours cost</em>: Cost calculated depending on resources cost categories and the <em>Imputed</em> hours.</li>
<li><em>Expenses cost</em>: Cost imputed via expenses sheets.</li>
<li><em>Total cost</em>: Addition of 2 previous costs (<em>Hours</em> + <em>Expenses</em>). It’ll also show a mark if it’s bigger than <em>Budget</em>.</li>
</ul>
</li>
</ul>
<div id="attachment_1003" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/10/project-status-report.png"><img src="https://blogs.igalia.com/mrego/files/2012/10/project-status-report.png" alt="Project Status Report example" title="Project Status Report example"></a>
<p class="caption text-muted">
Project Status Report example
</p>
</div>
<p>Apart from the new columns, the new version will also allow to <strong>filter the report by labels and/or criteria</strong> and the <strong>project filter will be optional</strong>. This will return the information of all the tasks related with the labels and/or criteria in all your projects. We think that this is a nice addition in order that you analyze where are you having troubles, for example, comparing <em>Project managers</em> with <em>Developers</em>.</p>
<div id="attachment_1006" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/10/project-status-report-project-manager.png"><img src="https://blogs.igalia.com/mrego/files/2012/10/project-status-report-project-manager.png" alt="Project Status Report filter by criterion "Project Manager"" title="Project Status Report filter by criterion "Project Manager""></a>
<p class="caption text-muted">
Project Status Report filter by criterion "Project Manager"
</p>
</div>
<div id="attachment_1007" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/10/project-status-report-developer.png"><img src="https://blogs.igalia.com/mrego/files/2012/10/project-status-report-developer.png" alt="Project Status Report filter by criterion "Developer"" title="Project Status Report filter by criterion "Developer""></a>
<p class="caption text-muted">
Project Status Report filter by criterion "Developer"
</p>
</div>
<p>We hope you enjoy the new report and the latest changes, we’ll be really glad to receive your feedback about it ;-)</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 12/12/13 19:21, **Tony** wrote:
<blockquote>
<p>An effective project manager spends 95% of their time communicating. Status reports are a great vehicle to help with communication to large teams and more importantly in keeping the teams aligned. ProficientPM is a good source of information</p>
</blockquote>
</div>
PhoneGap at Master on Free Software2012-08-04T00:00:00Zhttps://blogs.igalia.com/mrego/2012/08/04/phonegap-at-master-on-free-software/<p>Like in the past 3 years, this year I’ve been teaching some lessons of the <a href="http://www.mastersoftwarelibre.com/2012/05/09/abierta-la-inscripcion-al-modulo-de-desarrollo-en-entornos-web-2012/">web module</a> inside the <a href="http://www.mastersoftwarelibre.com/"><strong>Master on Free Software</strong></a> organized organized by <a href="http://www.igalia.com">Igalia</a> and <a href="http://www.urjc.es/">URJC</a>.
Apart from some classes about Java, this time I’ve given a workshop about <strong><a href="http://phonegap.com">PhoneGap</a></strong> (now renamed to <a href="http://incubator.apache.org/cordova/">Apache Cordova</a>). If you don’t know it yet, maybe you want to take a look if you’re interested in web development (HTML + CSS + JavaScript) for mobile platforms.</p>
<p>The workshop tried to give an overview of this framework and during the class we developed a simple feed reader as example app. The main technologies used (apart from PhoneGap) were: <a href="http://jquery.com/">jQuery</a> (to manipulate the DOM), <a href="http://jquerymobile.com/">jQuery Mobile</a> (for the UI) and <a href="https://github.com/jfhovinne/jFeed">jFeed</a> (to read the RSS/Atom feed). You can find the slides of <a href="https://speakerdeck.com/u/rego/p/introduction-to-phonegap">my presentation</a> below and if you follow them you should be able to develop the example too ;-)</p>
<p>Finally, maybe you don’t know it yet, but some months ago I developed a small mobile application using PhoneGap. The app is called <a href="http://mrego.github.com/sergasapp/">SergasApp</a> and it allows request medical appointments for the <a href="http://en.wikipedia.org/wiki/Galician_Healthcare_Service">Galician Healthcare Service</a>. As usual, it’s free software and you can find the source code in <a href="https://github.com/mrego/sergasapp">GitHub</a> if you’re interested in review another example app developed with PhoneGap.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 14/07/13 10:12, **Joel** wrote:
<blockquote>
<p>I would like to get a complete workable source code for the RSS feed project. Tell me where it is hosted.</p>
<p>On 14/07/14 09:38, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>I’m sorry but we didn’t publish the source code anywhere, but it should be possible to somehow extract it from the slides.</p>
<p>Anyway, take into account that the presentation is from 2012 so it can be outdated.</p>
</blockquote>
</blockquote>
</div>
Resources binding and monthly timesheets in LibrePlan2012-07-24T00:00:00Zhttps://blogs.igalia.com/mrego/2012/07/24/resources-binding-and-monthly-timesheets-in-libreplan/<p><a href="http://www.igalia.com">Igalia</a> is about to release <strong><a href="http://www.libreplan.com">LibrePlan 1.3</a></strong> and maybe the most important feature included in this new version will be the <strong>resources binding</strong>.
Summarizing, it consists of allowing the binding between LibrePlan resources and users. <em>Resources</em> are used in the planning and are allocated to the different tasks of the project. <em>Users</em>, like in any other web project, have a username and password to login and use the application. So far, there were <strong>no relationship between resources and users</strong> in LibrePlan and several people have requested this feature since a lot of time ago.</p>
<p>Why didn’t we have this relationship yet? The main reason is that LibrePlan was started as a project for manufacturing industries where they manage the resources, but the resources are not expected to interact with the application directly. However, the project has evolved into a more generic planning tool suitable for other companies where resources have access to a computer and should be LibrePlan users to input some data to the planning (like worked hours, expenses, etc.).</p>
<p><big><strong>Resource binding windows</strong></big></p>
<p>Thanks to the new feature you’ll have the possibility to bind resources to users, this will allow to assign users (through the bound resource) to the different tasks of your planning. In order to do that you’ll have 3 options in the resources editing window:</p>
<ul>
<li>
<p><strong>Not bound</strong>: The resource is not bound to any user.
<a href="https://blogs.igalia.com/mrego/files/2012/07/bound-user-not-bound.png"><img src="https://blogs.igalia.com/mrego/files/2012/07/bound-user-not-bound.png" alt="Not bound option in resources editing window"></a></p>
<p class="caption text-muted">
Not bound option in resources editing window
</p>
</li>
<li>
<p><strong>Existing user</strong>: Select one of the current users and bind it to the resource. Moreover, you’ll have a link to the user editing window.
<a href="https://blogs.igalia.com/mrego/files/2012/07/bound-user-existing-user.png"><img src="https://blogs.igalia.com/mrego/files/2012/07/bound-user-existing-user.png" alt="Existing user option in resources editing window"></a></p>
<p class="caption text-muted">
Existing user option in resources editing window
</p>
</li>
<li>
<p><strong>Create new user</strong>: You could create a new user directly from resource editing window providing the basic data (username, password and, optionally, e-mail). The new user will be automatically bound to the resource.
<a href="https://blogs.igalia.com/mrego/files/2012/07/bound-user-create-new-user.png"><img src="https://blogs.igalia.com/mrego/files/2012/07/bound-user-create-new-user.png" alt="Create new user option in resources editing window"></a></p>
<p class="caption text-muted">
Create new user option in resources editing window
</p>
</li>
</ul>
<p>Correspondingly in the user editing window you’ll have a new section about the bound resource with a button to disable the binding.</p>
<div id="attachment_910" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/07/bound-resource.png"><img src="https://blogs.igalia.com/mrego/files/2012/07/bound-resource.png" alt="Bound resource information in user editing window"></a>
<p class="caption text-muted">
Bound resource information in user editing window
</p>
</div>
<p><big><strong>New home page for bound users</strong></big></p>
<p>Notice that the bound users will be associated with a new role called <strong>Bound user</strong>. By default this kind of users will only have access to the menu entry called <strong>Personal area</strong> where they’ll have a new page <strong>Home</strong> with the following areas:</p>
<ul>
<li><strong>My tasks</strong>: Where the user could find the list of assigned tasks. Each task will have a link to report hours using a monthly timesshet.</li>
<li><strong>Monthly timesheets</strong>: In the home page the user will have the list of monthly timesheets with a link to edit them. More about monthly timesheets later.</li>
<li><strong>Expenses</strong>: Apart from reporting hours with the monthly timesheets it’ll be also possible to report expenses. The resource will be able to report the expenses associated with the tasks in which he/she is participating.</li>
</ul>
<div id="attachment_918" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/07/home.png"><img src="https://blogs.igalia.com/mrego/files/2012/07/home.png" alt="New home for bound users"></a>
<p class="caption text-muted">
New home page for bound users
</p>
</div>
<p><big><strong>Monthly timesheets</strong></big></p>
<p>In LibrePlan worked hours are reported via the timesheets, that are quite flexible thanks to the timsheet templates. However, for the new bound resources it’ll be a new special type of timesheets called <strong>monthly timesheets</strong> with a specific editing window. The monthly timesheets will be composed by a grid where the bound users could introduce the hours they have devoted to the different tasks during a month.</p>
<div id="attachment_924" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/07/monthly-timesheet.png"><img src="https://blogs.igalia.com/mrego/files/2012/07/monthly-timesheet.png" alt="Monthly timesheet editing window"></a>
<p class="caption text-muted">
Monthly timesheet editing window
</p>
</div>
<p>As you can see in the image above, the monthly timeshet will allow the user to enter hours for each of his/her assigned tasks and also for any other tasks if needed using the <em>Add task</em> button.</p>
<p>BTW, it’s important to highlight the meaning of the <strong>Other</strong> row and column. It’ll show the hours reported with the standard timesheets during the month. Maybe, you’ll forget about standard timeseehts if you’re using monthly timesheets but in some cases it could be useful to have both ways to report hours. For example, imagine that overtime needs to be reviewed and reported by a manager, the manager could use standard timesheets to report that kind of hours and the resources will use the monthly timesheets to report regular hours.</p>
<p><big><strong>Future</strong></big></p>
<p>As you can see in LibrePlan 1.3 you’ll be able to report hours and expenses using the new home page, however you still can’t provide more info that could be useful for the project managers like: progress, comments, … In the future some of these features could be included too.</p>
<p>Igalia has worked hard to keep improving LibrePlan, we hope you enjoy this feature and the rest of new sutff in LibrePlan 1.3. We’re waiting for your feedback about it as soon as LibrePlan 1.3 is released (hopefully during this week), in the meanwhile you can test it in the <a href="http://unstable.libreplan.com" title="LibrePlan unstable demo">unstable demo</a>.</p>
Building Liferay Social Office2012-07-03T00:00:00Zhttps://blogs.igalia.com/mrego/2012/07/03/building-liferay-social-office/<p><a href="http://www.liferay.com/products/liferay-portal/overview">Liferay Portal</a> is an enterprise portal which includes a suite of applications. Among other stuff, it provides a collaboration suite called <a href="http://www.liferay.com/products/liferay-social-office"><strong>Liferay Social Office</strong></a>.
Summarizing, Liferay Social Office provides a collaborative Liferay site for a company with several functionalities: calendar, documents, forums, blog, wiki, etc.</p>
<p>A new version of Liferay Social Office 2.0.0 will be available soon (the release date was planned for past 29th of June). But if you don’t want to wait, this post will explain how to launch Social Office from Liferay source code.</p>
<p><strong><big>Liferay</big></strong></p>
<p>First of all you need to have installed a JDK and Ant in your system. You can use the next line to install it in a Debian based distro:</p>
<pre>
~# apt-get install openjdk-6-jdk ant
</pre>
<p>Let’s create a new folder called <strong><tt>liferay</tt></strong> where you’re going to download the sources, compile them and so on:</p>
<pre>
~$ mkdir liferay
~/liferay$ cd liferay
</pre>
<p>Download the latest sources (it didn’t work for me using <em>Liferay 6.1.0 GA1</em>) from <a href="https://github.com/liferay">GitHub repository</a>, uncompress and rename them (alternatively you can clone the Git repository, but it’ll be much slower):</p>
<pre>
~/liferay$ wget -O liferay-portal.zip https://github.com/liferay/liferay-portal/zipball/master
~/liferay$ unzip liferay-portal.zip
~/liferay$ mv liferay-liferay-portal-36e8468 liferay-portal
~/liferay$ wget -O liferay-plugins.zip https://github.com/liferay/liferay-plugins/zipball/master
~/liferay$ unzip liferay-plugins.zip
~/liferay$ mv liferay-liferay-plugins-cfb1925 liferay-plugins
</pre>
<p>Then you’ll need to create a folder called <strong><tt>bundles</tt></strong>:</p>
<pre>
~/liferay$ mkdir bundles
</pre>
<p>And as root you’ll have to copy one <tt>.jar</tt> file to Ant libraries folder:</p>
<pre>
~/liferay# cp liferay-portal/lib/development/ecj.jar /usr/share/ant/lib/
</pre>
<p>You’re just pending to configure <tt>ANT_OPTS</tt>, download Tomcat (automatically with Ant) and <strong>compile Liferay</strong>. Use the following commands:</p>
<pre>
~/liferay$ cd liferay-portal
~/liferay/liferay-portal$ export ANT_OPTS="-Xmx1024m -XX:MaxPermSize=512m"
~/liferay/liferay-portal$ ant -buildfile build-dist.xml unzip-tomcat
~/liferay/liferay-portal$ ant all
</pre>
<p>Then you’re ready to <strong>launch Liferay</strong>:</p>
<pre>
~/liferay/liferay-portal$ cd ../bundles/tomcat-7.0.27/bin/
~/liferay/bundles/tomcat-7.0.27/bin$ ./startup.sh
</pre>
<p>Maybe it takes some time (around 1 minute) but you should be able to <strong>access Liferay at <a href="http://localhost:8080/">http://localhost:8080/</a></strong>.</p>
<p>Then you enter the administrator user data, accept the privacy policy and configure the default password for the new adminstrator. Finally, you’ll get the next screenshot:</p>
<div id="attachment_839" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/06/liferay.png"><img src="https://blogs.igalia.com/mrego/files/2012/06/liferay.png" alt="Liferay home page"></a>
<p class="caption text-muted">
Liferay home page
</p>
</div>
<p><strong><big>Social Office</big></strong></p>
<p>Now, you’re going to <strong>compile and deploy</strong> the portlets, theme and hook required for Liferay Social Office:</p>
<ul>
<li>Portlets: <tt>contacts-portlet</tt>, <tt>events-display-portlet</tt>, <tt>microblogs-portlet</tt>, <tt>private-messaging-portlet</tt>, <tt>so-portlet</tt>, <tt>tasks-portlet</tt>, <tt>wysiwyg-portlet</tt></li>
<li>Themes: <tt>so-theme</tt></li>
<li>Hooks: <tt>so-hook</tt></li>
</ul>
<p>For each of them you have to go to the proper folder inside <strong><tt>liferay-plugins</tt></strong> and run “<tt>ant all</tt>” (note that this step is done without stopping Tomcat). An example for <tt>contacts-portlet</tt>:</p>
<pre>
~/liferay/liferay-plugins$ cd portlets/contacts-portlet/
~/liferay/liferay-plugins/portlets/contacts-portlet$ ant all
</pre>
<p>As a side note, in order to get the list of dependencies you can compile and deploy first the <tt>so-hook</tt> (using the previous commands). Then, you could read the next line in the log file (<tt>~/liferay/bundles/tomcat-7.0.23/logs/catalina.out</tt>):</p>
<pre>
18:19:58,351 INFO [HotDeployEvent:109] Plugin so-hook requires contacts-portlet, events-display-portlet, microblogs-portlet, private-messaging-portlet, so-portlet, so-theme, tasks-portlet, wysiwyg-portlet
</pre>
<p>Then you can go to <em>Control Panel</em> (<a href="http://localhost:8080/group/control_panel/">http://localhost:8080/group/control_panel/</a>) navigate to <em>Portal > Sites</em> and add a new site using the option “<em>Add Default Social Office Site</em>“.</p>
<p>Finally, you can <strong>browse your Liferay Social Office</strong> site in a URL similar to the next one (it will vary depending on the name you enter for the new site, in the example I used “<em>My Social Office</em>“): <a href="http://localhost:8080//web/my-social-office/home">http://localhost:8080//web/my-social-office/home</a>.<br>
<a href="https://blogs.igalia.com/mrego/files/2012/06/liferay-social-office.png"><img src="https://blogs.igalia.com/mrego/files/2012/06/liferay-social-office.png" alt="Liferay Social Office home page"></a></p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 12/12/18 19:32, **[gordon daniels](http://baboo@inbox.com/)** wrote:
<blockquote>
<p>thanks for publishing this. I have a couple of questions.</p>
<ol>
<li>Any problems using openjdk with liferay?</li>
<li>Does libreplan work with liferay?</li>
</ol>
<p>thanks again</p>
<p>On 12/12/19 11:44, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<ol>
<li>I didn’t detect any problem using OpenJDK.</li>
<li>LibrePlan is not currently integrated with Liferay, but this is a possible option that could be developed at some point in the future.</li>
</ol>
</blockquote>
</blockquote>
<p>On 14/02/06 19:19, <strong>Jonathan Lee</strong> wrote:</p>
<blockquote>
<p>I want to add something about creating a Social Office Site. There are two ways to create a Social Office Site.</p>
<p>One is from the sites porlter in the dashboard. If you create a site through the sites portlet, all the site configuration will be configured for you.</p>
<p>Second is from control panel > sites. If you create the site based on the Social Office template. there is still one more thing to do. You need to change the application adaptor to so-hook in order to the Site to function correctly as a Social Office.</p>
<p>The screenshot you posted in the end looks like the site is not running with so-hook adaptor.</p>
<p>I hope this help</p>
</blockquote>
</div>
Currency support in LibrePlan2012-06-01T00:00:00Zhttps://blogs.igalia.com/mrego/2012/06/01/currency-support-in-libreplan/<p>We’re getting close to the release of <strong><a href="http://www.libreplan.com">LibrePlan 1.3</a></strong>, and as you can see in the <a href="http://wiki.libreplan.org/twiki/bin/view/LibrePlan/RoadMap">rodamap to LibrePlan 1.3</a> and also in the <a href="http://www.libreplan.com/news/detail/article/some-updates-about-libreplan-13/">last revision</a>, one of the features to be included in this new major version will be:</p>
<blockquote>
<p><strong>Include the management and support of a currency to apply to the project</strong>: Now all the reports are in euros. Internationalization must be included to allow to configure the currency used and the symbols to use.</p>
</blockquote>
<p>Some weeks ago, we in <a href="http://www.igalia.com">Igalia</a> have been working in develop this new feature, that you can already test in <a href="http://unstable.libreplan.com">LibrePlan unstable demo</a>.</p>
<p>From the user point of view, these are the new bits:</p>
<ul>
<li>
<p><strong>New option in configuration screen</strong> to choose the currency symbol to be used into LibrePlan.<br>
<a href="https://blogs.igalia.com/mrego/files/2012/06/configuration-window-currency-option.png"><img src="https://blogs.igalia.com/mrego/files/2012/06/configuration-window-currency-option.png" alt="New currency option in configuration window"></a></p>
<p class="caption text-muted">
New currency option in configuration window
</p>
</li>
<li>
<p>In the different places where money is managed, you’ll always <strong>see the currency symbol together with the value</strong>. For example, in the budget column of the WBS.<br>
<a href="https://blogs.igalia.com/mrego/files/2012/06/wbs-currency-symbol.png"><img src="https://blogs.igalia.com/mrego/files/2012/06/wbs-currency-symbol.png" alt="WBS view using configured currency symbol"></a></p>
<p class="caption text-muted">
WBS view using configured currency symbol
</p>
</li>
</ul>
<p>From the developer point of view, now there’re some new methods in class <tt>org.libreplan.web.common.Util</tt> that should be used to manage money values:</p>
<ul>
<li><strong><tt>getCurrencySymbol()</tt></strong>: Returns the currency symbol from LibrePlan configuration.</li>
<li><strong><tt>addCurrencySymbol(BigDecimal)</tt></strong>: Returns a <tt>String</tt> with the currency symbol attached to the value.</li>
<li><strong><tt>getMoneyFormat()</tt></strong>: Returns the format with the currency symbol to be used in a <tt><a href="http://www.zkoss.org/javadoc/5.0.0/zk/org/zkoss/zul/Decimalbox.html">Decimalbox</a></tt> when it manages money.</li>
</ul>
<p>As usual, if you’re interested you can find more information about the <a href="http://wiki.libreplan.org/twiki/bin/view/LibrePlan/AnA09S19CurrencyManagement">analysis</a> and <a href="http://wiki.libreplan.org/twiki/bin/view/LibrePlan/ItEr76S25CurrencyManagement">development</a> of this task in the <a href="http://wiki.libreplan.org">project wiki</a>.</p>
<p>In Igalia we keep pushing for LibrePlan and we’re already working in one important feature that will be included in LibrePlan 1.3. I’m talking about the feature to <strong>bind users with resources</strong>, requested by lot of people, that will improve the way how worked hours are reported (but it deserves its own blog post ;-)).</p>
<hr>
<p>As a side note, I’d like to talk about the last <a href="http://www.libreplan.com/news/detail/article/libreplan-124-has-been-published/">LibrePlan release</a>. In <a href="http://libreplan.org/NEWS.html#version-1-2-4-23-may-2012">LibrePlan 1.2.4</a> again we added support for a new language, this time it was <strong>Czech</strong> thanks to the work done by Zbyněk Schwarz: “<em>Vítejte Češi!</em>” :-)</p>
<p><strong><a href="https://www.transifex.net/projects/p/libreplan/">Transifex</a></strong> is working really fine to manage all these translations and also to receive new translations. For example, <em>Slovak</em> and <em>German</em> translations has already been started and should eventually join the list of supported languages, currently: <em>Czech</em>, <em>Dutch</em>, <em>English</em>, <em>French</em>, <em>Galician</em>, <em>Italian</em>, <em>Spanish</em>, <em>Polish</em>, <em>Portuguese</em> and <em>Russian</em>.</p>
<p>Thanks to all our translators for their work!</p>
LibrePlan is learning new languages: Salut, hoi, cześć!2012-04-20T00:00:00Zhttps://blogs.igalia.com/mrego/2012/04/20/libreplan-is-learning-new-languages-salut-hoi-czesc/<p>We’re really happy to see that with every new release <a href="http://www.libreplan.com">LibrePlan</a> project is translated into new languages.
In LibrePlan 1.2.2 two new languages appeared:</p>
<ul>
<li>
<p><strong>French</strong>: In the past some people had already asked about French translation and finally this language was available for them. The work was initially started by <em>Stephane Ayache</em> and <em>Guillaume Postaire</em>, but finally <a href="http://philippe.poumaroux.free.fr/"><em>Philippe Poumaroux</em></a> did the final effort to complete the translation in order to have French supported 100%.
<a href="https://blogs.igalia.com/mrego/files/2012/04/libreplan-french.png"><img src="https://blogs.igalia.com/mrego/files/2012/04/libreplan-french.png" alt="LibrePlan screenshot in French"></a></p>
<p class="caption text-muted">
LibrePlan screenshot in French
</p>
</li>
<li>
<p><strong>Dutch</strong>: This translation was done by <a href="http://www.jeroenbaten.nl/"><em>Jeroen Baten</em></a>, who is also participating in the LibrePlan community (for example he sent <a href="http://sourceforge.net/mailarchive/forum.php?thread_name=4F60C7DA.2080905%40igalia.com&forum_name=libreplan-devel">an script to connect JIRA with LibrePlan</a>).
<a href="https://blogs.igalia.com/mrego/files/2012/04/libreplan-dutch.png"><img src="https://blogs.igalia.com/mrego/files/2012/04/libreplan-dutch.png" alt="LibrePlan screenshot in Dutch"></a></p>
<p class="caption text-muted">
LibrePlan screenshot in Dutch
</p>
</li>
</ul>
<p>In the <a href="http://www.libreplan.com/news/detail/article/libreplan-123-is-published/">last version published yesterday, LibrePlan 1.2.3</a>, again a new language has been included:</p>
<ul>
<li>
<p><strong>Polish</strong>: This time it was the Polish language provided by <em>Krzysztof Kamecki</em>.
<a href="https://blogs.igalia.com/mrego/files/2012/04/libreplan-polish.png"><img src="https://blogs.igalia.com/mrego/files/2012/04/libreplan-polish.png" alt="LibrePlan screenshot in Polish"></a></p>
<p class="caption text-muted">
LibrePlan screenshot in Polish
</p>
</li>
</ul>
<p>For the future releases it seems that <strong>Czech</strong> language will be available too as you can check in <a href="https://www.transifex.net/projects/p/libreplan/">Transifex</a>.</p>
<p>We’d like to publicity thank the work done by our translators, that is allowing more and more people use LibrePlan without any language barrier. You guys rock! :-)</p>
<p>Finally, if you miss your language or want to improve, help or contribute in any of the current ones, the process is as easy as <strong>join <a href="https://www.transifex.net/projects/p/libreplan/">Transifex</a> and start to translate there</strong>.</p>
<p>PS: Transifex guys accepted my <a href="https://github.com/transifex/transifex/commit/a6cbf9a9672b45798e896b292b986574de6e7db3">mini patch</a> to improve the <a href="https://www.transifex.net/projects/p/libreplan/feed/">projects timeline RSS feed</a>. Now you can be subscribed to it and it won’t be updated until there is any new translation or change in the project.</p>
Money based cost monitoring system in LibrePlan2012-03-28T00:00:00Zhttps://blogs.igalia.com/mrego/2012/03/28/money-cost-monitoring-system-in-libreplan/<p>Last weeks in <a href="http://www.igalia.com">Igalia</a> I’ve been working in a new feature that will be included in the next <a href="http://www.libreplan.com/">LibrePlan</a> releases.
Summing up, the new feature consists of providing a method to monitor the cost of the different projects inside LibrePlan based on the money spent regarding to the original budget. Before in LibrePlan you could monitor the cost based in hours reported regarding to assigned hours, but it was not possible to do it checking the money spent.</p>
<p><big><strong>Feature description</strong></big></p>
<p>The result of this new feature from the users point of view has two main parts:</p>
<ul>
<li>
<p><strong>A new field called budget</strong> has been added together with the hours input for any task in the WBS view. Now, the user can specify the budget for every task.
BTW, this field is also available in projects and tasks templates.</p></li><p></p>
<ul>
<li><strong>A new bar over the tasks in the Gantt view</strong>. This bar represents the money consumed at this moment comparing to the task budget. Then, you can check the progress of your tasks regarding the money you have reserved for it and the real amount spent.</li></ul>
</ul>
<p>In order to calculate the money spent in a task, the application uses the information in the work reports related to the cost categories of the different resources and the type of hours devoted to each task. Using all that entities, LibrePlan is able to calculate the how much money you have already spent to perform a concrete task.</p>
<p><big><strong>Some screenshots</strong></big></p>
<p>The <strong>new budget field</strong> can be edited from two places:</p>
<ul>
<li>
<p>WBS view:<br>
<a href="https://blogs.igalia.com/mrego/files/2012/03/wbs.png"><img src="https://blogs.igalia.com/mrego/files/2012/03/wbs.png" alt=""></a></p>
<p class="caption text-muted">
New budget field in the WBS view
</p>
</li>
<li>
<p>Details tab in task edition pop-up:<br>
<a href="https://blogs.igalia.com/mrego/files/2012/03/task-properties.png"><img src="https://blogs.igalia.com/mrego/files/2012/03/task-properties.png" alt="New budget field on task edition pop-up"></a></p>
<p class="caption text-muted">
New budget field on task edition pop-up
</p>
</li>
</ul>
<p>The <strong>new money cost bar</strong> can be enabled/disabled with a new button in the Gantt view:</p>
<div id="attachment_687" class="wp-caption aligncenter">
<a href="https://blogs.igalia.com/mrego/files/2012/03/gantt.png"><img src="https://blogs.igalia.com/mrego/files/2012/03/gantt.png" alt=""></a>
<p class="caption text-muted">
Money Cost Bar in Gantt view
</p>
</div>
<p>The information about the exact <strong>money spent</strong> can be read in two places:</p>
<ul>
<li>
<p>Task tooltip in Gantt view:<br>
<a href="https://blogs.igalia.com/mrego/files/2012/03/gantt-tooltip.png"><img src="https://blogs.igalia.com/mrego/files/2012/03/gantt-tooltip.png" alt=""></a></p>
<p class="caption text-muted">
Information about budget and money spent on task tooltip in Gantt view
</p>
</li>
<li>
<p>Imputed hours tab in task edition pop-up:<br>
<a href="https://blogs.igalia.com/mrego/files/2012/03/task-imputed-hours.png"><img src="https://blogs.igalia.com/mrego/files/2012/03/task-imputed-hours.png" alt=""></a></p>
<p class="caption text-muted">
Information about budget and money spent on imputed hours tab in task edition pop-up
</p>
</li>
</ul>
<p><big><strong>About the implementation</strong></big></p>
<p>As you know LibrePlan is entirely a free software project. Not only its source code is released under <a href="http://www.libreplan.com/info/license/">AGPL</a>, but because of we <strong>do all the development in an open and public environment</strong>. Like for any other feature developed in the project you can read the <a href="http://wiki.libreplan.org/twiki/bin/view/LibrePlan/AnA19S01MoneyCostMonitoringSystem">analysis</a> and <a href="http://wiki.libreplan.org/twiki/bin/view/LibrePlan/ItEr76S17MoneyCostMonitoringSystem">implementation notes</a> in the <a href="http://wiki.libreplan.org/">project wiki</a>.</p>
<p>About the implementation issues, I’d like to highlight the new class <tt>MoneyCostCalculator</tt> which is in charge to calculate the cost of any task in terms of money. This class is only used for the new feature explained above, however in the future it could be useful to create some new reports, add money cost information to earned value chart or use in other parts of the application.</p>
<p>We hope you enjoy this new feature! Please don’t hesitate to <a href="http://www.libreplan.com/contact/">contact us</a> if you have any question about LibrePlan. And remember that <a href="http://www.igalia.com/nc/work/project/item/libreplan/">Igalia offers a wide range of services around LibrePlan</a>, just in case you need our help ;-)</p>
L’italiano arriva a LibrePlan2012-01-18T00:00:00Zhttps://blogs.igalia.com/mrego/2012/01/18/litaliano-arriva-a-libreplan/<p>First of all, I’d like to announce that in a few days <strong><a href="http://www.libreplan.com">LibrePlan</a> 1.2.1</strong> will be released. This is a minor release including lots of bufixes done since 1.2.0. Thanks to all the users for reporting the different problems you have found in the tool, with the new version you’ll have an improved experience using LibrePlan. For those who still don’t know, you can <a href="http://bugs.libreplan.org">report us any issue in project bugzilla</a> or directly <a href="http://webchat.freenode.net/?channels=#libreplan">talk to us in #libreplan IRC channel on Freenode.net</a>, we’ll try to fix it ASAP to be included in the next releases.
But as you can guess from the post title, the main topic I wanted to talk today is about the Italian translation of LibrePlan. <strong>Giuseppe Zizza</strong> has done a great work during the past weeks and <strong>LibrePlan 1.2.1 will be 100% translated into Italian language</strong>. He has used <a href="https://www.transifex.net/projects/p/libreplan/">Transifex</a> to do the translation and he has translated both UI files and reports files, so Italian is completely supported. I’d like to thank him again for the effort and his collaboration with the project. <em>Grazie Mille!</em> :-)</p>
<p><a href="https://blogs.igalia.com/mrego/files/2012/01/libreplan-1.2.1-italian-screenshot.png"><img src="https://blogs.igalia.com/mrego/files/2012/01/libreplan-1.2.1-italian-screenshot.png" alt="LibrePlan in Italian"></a></p>
<p>Finally, we’re really glad to see that LibrePlan is available in more and more languages as time passes. So, if you still miss your language in LibrePlan, feel free to go to <a href="https://www.transifex.net/projects/p/libreplan/">Transifex</a> and add it by yourself or collaborate with other people in the translation. As you can see it will be included in future versions of the project.</p>
New LibrePlan website and other bits2011-12-30T00:00:00Zhttps://blogs.igalia.com/mrego/2011/12/30/new-libreplan-website-and-other-bits/<p><a href="https://blogs.igalia.com/mrego/files/2011/12/libreplan-website-frontpage.png"><img src="https://blogs.igalia.com/mrego/files/2011/12/libreplan-website-frontpage.png" alt="LibrePlan website frontpage"></a>I’m sure that you have already notice it, but last <a href="http://www.libreplan.com">LibrePlan</a> version comes with a new website that you can visit at <a href="http://www.libreplan.com"><strong>www.libreplan.com</strong></a>. The new website has been designed by <a href="http://www.opsou.com">Opsou</a> (<a href="http://blogs.igalia.com/mrego/2011/09/01/libreplan-summertime/">authors of the new logo</a>) and sponsored by <a href="http://www.igalia.com">Igalia</a> (the main company behind LibrePlan project).</p>
<p>About the website I’d like to explain the different sections:</p>
<ul>
<li><a href="http://www.libreplan.com"><strong>Frontpage</strong></a>: Where you can find a few short texts explaining the most important features of the project. Together with a list of news (mixed with imported tweets from <a href="http://www.twitter.com/libreplan">@libreplan</a>) around the project and several links to other website sections.</li>
<li><a href="http://www.libreplan.com/info/"><strong>Info</strong></a>: Is divided in 4 subsections where you can find different information about LibrePlan. From the special features that make it different of other planning tools to project history, documentation and license data.</li>
<li><a href="http://www.libreplan.com/features/"><strong>Features</strong></a>: Consists of a comprehensive description of all project features. Features are grouped in different subsections and provide screenshots to understand them better.</li>
<li><a href="http://www.libreplan.com/services/"><strong>Services</strong></a>: That section contains the main services provided around LibrePlan and the companies involved. As you can see different services are explained in each subsection: consultancy & training, customization & development, deployment & SaaS and, also, how to join us and get involved in the project. If you are interested in any of them you can <a href="http://www.libreplan.com/contact/">contact us</a> in the last section of the website.</li>
<li><a href="http://www.libreplan.com/contact/"><strong>Contact</strong></a>: A section with information about the different ways to contact us in order to request help, support or whatever you need around LibrePlan.</li>
</ul>
<p>Apart from the main website there are also other services around the project:</p>
<ul>
<li><a href="http://planet.libreplan.org/"><strong>LibrePlan Planet</strong></a>: A blog aggregator where you can find all the posts done by the development team about the project.</li>
<li><a href="http://demo.libreplan.org"><strong>LibrePlan Demo</strong></a>: On-line demo to play with last LibrePlan stable version in order to test it and check its main features.</li>
<li><a href="http://wiki.libreplan.org"><strong>LibrePlan Development Wiki</strong></a>: Wiki with information useful for project developers and contributors. All the development around LibrePlan is coordinated and documented with this wiki.</li>
<li><a href="http://sourceforge.net/projects/libreplan/"><strong>SorceForge.net Page</strong></a>: LibrePlan uses <a href="http://SorceForge.net">SorceForge.net</a> infrastructure. In this page you can find the different resources around the project: published files, mailing lists, user forums and source code repository.</li>
<li><a href="http://bugs.libreplan.org/"><strong>LibrePlan Bugzilla</strong></a>: Bug tracking tool to report and manage issues in the project. Anybody could report any problem, error, bug, issue there and the development team would take care to fix it as soon as possible depending on the different priorities of the moment.</li>
<li><a href="http://jenkins.libreplan.org/"><strong>LibrePlan Jenkins</strong></a>: We use Jenkins for <a href="http://en.wikipedia.org/wiki/Continuous_integration">Continuous Integration (CI)</a>. Every night LibrePlan project is built and tests are passing for both PostgreSQL and MySQL databases. If any problem happens, developers are automatically notified in order to fix it.</li>
<li><a href="http://unstable.libreplan.org/"><strong>LibrePlan Nightly Builds</strong></a>: Taking advantage of project being built every night, we have an unstable deployment with the last developments done. This is a comfortable way to check the last features implemented in LibrePlan, however it’s not valid for a production environment as it’s not so tested like a stable release.</li>
<li><a href="http://sonar.libreplan.org/"><strong>LibrePlan Sonar</strong></a>: Sonar is a tool to check software quality. LibrePlan code is checked in order to detect and fix the most important issues.</li>
<li><a href="http://nexus.libreplan.org/"><strong>LibrePlan Maven Repository</strong></a>: LibrePlan depends on some specific packages modified by the development team that are not available in Maven central repositories. For that reason we have our own Maven repository in order to ease users and developers to download modified packages used in the project.</li>
</ul>
<p>After reading it twice the list is quite bigger and we’re already thinking in other stuff (we’ll keep you informed).</p>
<p>Finally, I’d like to wish you all a <strong>happy new <em>leap</em> year</strong>!</p>
LibrePlan in Transifex.net2011-12-15T00:00:00Zhttps://blogs.igalia.com/mrego/2011/12/15/libreplan-in-transifex-net/<p><a target="_blank" href="http://www.transifex.net/"><img border="0" src="https://sw.transifex.net/11/static/charts/images/tx-logo-micro.png" class="alignright"></a>Maybe you don’t know <a href="http://www.transifex.net/"><em>Transifex</em></a>, an open source platform for software projects localization. It supports a great variety of files including the two kind of translation formats that we use in <a href="http://www.libreplan.com"><strong>LibrePlan</strong></a>:</p>
<ul>
<li><strong>.po</strong>: <a href="http://www.gnu.org/s/gettext/"><em>GNU gettext</em></a> localization system. The whole LibrePlan application but reports is translated with this kind of files.</li>
<li><strong>.properties</strong>: Standard Java localization files. We use this kind of files in LibrePlan reports generated with <a href="http://jasperforge.org/projects/jasperreports"><em>JasperReports</em></a>.</li>
</ul>
<p>From now on, LibrePlan translators wouldn’t have to deal with these files if they don’t want to. They can use directly <a href="http://www.transifex.net/projects/p/libreplan/"><strong>Transifex.net</strong></a> to translate LibrePlan to different languages. The main advantage, is that you just need a browser to translate all these files. We think that this is going to make translators’ life easier.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2011/12/libreplan-translation-status.png"><img src="https://blogs.igalia.com/mrego/files/2011/12/libreplan-translation-status.png" alt="LibrePlan translation status (main localization file)"></a>As you can see in the image, LibrePlan is fully translated into: <strong>English</strong>, <strong>Spanish</strong> and <strong>Galician</strong>. Moreover, it’s almost 100% in <strong>Portuguese</strong>, and around 80% in <strong>Russian</strong>.</p>
<p>Finally, I’d like to thank our translators for their hard work, we’re really happy to count with their contributions. And, I’d also like to encourage any other people to <strong>help us to have LibrePlan available in more languages</strong> (some new languages are already ongoing). Now, it’s going to be easier than ever.</p>
LibrePlan Summertime2011-09-01T00:00:00Zhttps://blogs.igalia.com/mrego/2011/09/01/libreplan-summertime/<p>We’re starting September and the first release using <strong>LibrePlan</strong> name should happen during this month. We’ve a small delay regarding our initial plans but we think that we should be able to have something ready more or less by the end of the month and release <strong><a href="http://www.libreplan.org">LibrePlan 1.2</a></strong>.
<a href="https://blogs.igalia.com/mrego/files/2011/09/libreplan-logo.jpg"><img src="https://blogs.igalia.com/mrego/files/2011/09/libreplan-logo.jpg" alt="LibrePlan logo"></a><br>
The <strong>new logo</strong> has been designed by <a href="http://www.opsou.com/">Opsou</a> and we’re really happy with the final result, you can <a href="http://www.opsou.com/blog/creacion-de-la-nueva-identidad-visual-de-libreplan-open-web-planning/">read more information in their blog (in Spanish)</a>. Now <a href="http://www.Igalia.com">Igalia</a> is collaborating with them in order to create a nice <strong>new website</strong> that should have a draft version soon ;-)</p>
<p> </p>
<p>During the summer the team has enjoyed some holidays, but we’ve been working hard in the <strong><a href="http://wiki.navalplan.org/twiki/bin/view/NavalPlan/RoadMap#Version_1_2_2011w36">future LibrePlan release</a></strong>. You will find a lot of interesting changes in this new version:</p>
<ul>
<li><strong>Migration to ZK 5</strong>: This required a great effort that was started by <a href="http://blog.tenako.com/">Farruco Sanjurjo</a> in summer 2010 during an <a href="http://www.igalia.com/nc/igalia-247/news/item/summer-internship-in-2011-at-igalia/">Igalia internship</a>, and we’re currently closing latest minor issues regarding this task. Thanks to this change LibrePlan performance has been improved with simultaneous users.</li>
<li><strong>Prevent lose changes</strong>: Several users have reported that sometimes they lose some changes because they forget to save before moving between perspectives in a project. We call perspective to each different view LibrePlan provides over the same data: Gantt view, WBS, resource load, advanced allocation. We’re doing some changes in order to mitigate these issues, in LibrePlan 1.2 the different perspectives are going to share the same state, so users will be able to change between them without losing any change (<a href="https://sourceforge.net/mailarchive/forum.php?thread_name=1309279402.3406.9.camel%40orion&forum_name=navalplan-devel">more information in the mailing list thread</a>).</li>
<li><strong>LDAP support</strong>: <a href="http://www.comtecsf.es/">ComtecSF</a> guys have been working in this task that is ready in development branch since some time ago. So, from now on you don’t need to register all the users in LibrePlan if you already have a LDAP available; moreover you can configure the matching between LibrePlan roles and LDAP groups.</li>
<li><strong>Functional tests</strong>: Like we think that stability is a really important feature for a project like LibrePlan, we have started to use <a href="http://sahi.co.in/w/">Sahi</a> to create some functional tests (<a href="http://blogs.igalia.com/javimoran/2011/08/13/bringing-functional-tests-to-navalplan-libreplan/">more information in Javi’s blog</a>). This work is been done by <a href="http://twitter.com/Pablofcn">Pablo Fernández</a> during his <a href="http://www.mastersoftwarelibre.com/">master practicum in Igalia (in Spanish)</a>.</li>
<li><a href="https://blogs.igalia.com/mrego/files/2011/09/libreplan-russian.png"><img src="https://blogs.igalia.com/mrego/files/2011/09/libreplan-russian.png" alt="LibrePlan screenshot in Russian language"></a><strong>New translations</strong>: This week we’ve received the Russian translation by <a href="http://twitter.com/Cynic_one">Pavel Rudensky</a> that you can already test in the <a href="http://demo.navalplan.org">LibrePlan on-line demo</a>, <em>thanks Pavel for your great work :-)</em>. Besides, other people is working in some translations too, so if you want to have LibrePlan in your language you can help us <a href="http://wiki.navalplan.org/twiki/bin/view/NavalPlan/I18nDocumentation">following the instructions at wiki</a>. If you have any doubt you can contact us on <a href="http://webchat.freenode.net/?channels=#navalplan">#navalplan IRC channel at Freenode</a>.</li>
<li><strong>Other</strong>: As usual we’ve fixed lots of issues and done some other minor tasks that you will enjoy in the new version. And also released two minor versions with bugfixes: <a href="http://wiki.navalplan.org/twiki/bin/view/NavalPlan/NavalPlan_1_1#NavalPlan_1_1_2">1.1.2</a> and <a href="http://wiki.navalplan.org/twiki/bin/view/NavalPlan/NavalPlan_1_1#NavalPlan_1_1_3">1.1.3</a>.</li>
</ul>
<p>This is just a small update about the upcoming LibrePlan 1.2 release; in the official announcement you’ll find a more detailed description. Now let’s move to code again, happy hacking!</p>
NavalPlan Web Services2011-06-29T00:00:00Zhttps://blogs.igalia.com/mrego/2011/06/29/navalplan-web-services/<p>One of the important features of <a href="http://www.navalplan.org/en/">NavalPlan</a> is the <strong>integration with other software</strong> like, for example, ERPs. This integration is done with different web services provided by the application.
When we talk about NavalPlan integration we usually explain two different ways:</p>
<ul>
<li>
<p><strong>With 3rd party applications</strong>: Allowing connect your ERP with NavalPlan to send your project data, resources and even the hours worked by them.</p>
<p>In order to send data to NavalPlan or extract data from it you will need to use the implemented web services. I’ve been writing a small document explaining <a href="http://navalplan.sourceforge.net/user-documentation/en/navaplan-web-services.html"><strong>how to use and test NavalPlan web services</strong></a>, as some users where lately asking the same questions about this topic. There’re web servicies for a lot of entities and it’s not hard to <a href="http://navalplan.sourceforge.net/dev-documentation/howto-develop-a-use-case-in-navalplan.html#web-services"><em>develop a new one if needed</em></a>.</p>
</li>
<li>
<p><strong>With other NavalPlan instances</strong>: Sending parts of your project to subcontractors allowing to report project progress. This is done in the main interface of NavalPlan with different visual options.</p>
</li>
</ul>
<p>I hope you find this new document useful and now you can understand better how NavalPlan web services work.</p>
Some updates about me in Igalia2011-06-13T00:00:00Zhttps://blogs.igalia.com/mrego/2011/06/13/some-updates-about-me-in-igalia/<p>It’s been over 4 years since I joined <a href="http://www.iglaia.com">Igalia</a> back in April 2007. This has been a really nice period in my personal and professional life, I haven’t stopped to learn from the beginning and enjoyed the time with the rest of Igalia crew. Following the expected path, past month I’ve become <a href="http://www.igalia.com/about-us/internal-responsibility"><strong>parter</strong> and co-owner of the company</a>, which makes me feel really happy and proud. It’s really great share this experience with all you guys ;-).
<a href="https://blogs.igalia.com/mrego/files/2011/06/igalia-summit-spring-summer-2011.jpg"><img src="https://blogs.igalia.com/mrego/files/2011/06/igalia-summit-spring-summer-2011.jpg" alt="Igalia Summit Spring/Summer 2011 group photo by Quiue"></a>On the other hand, last weekend of May, we arranged a new <strong>Igalia Summit</strong>, this time in <a href="http://en.wikipedia.org/wiki/Palas_de_Rei">Palas de Rei (Lugo)</a>. As usual I didn’t miss the chance to attend and I took advantage to meet the last igalians joining the team and enjoy the weekend there. Even being a poor guitarist, I dared to join the <em>Igalia Blues Band</em> (the band that doesn’t play blues) :D.</p>
<p>Like my last times in Igalia are fully attached to <a href="http://www.navalplan.org/en/">NavalPlan</a>, I’d like to give a update in project as I haven’t written any posts during May (this could mean that we’ve been working really hard in <a href="http://wiki.navalplan.org/twiki/bin/view/NavalPlan/NavalPlan_1_1"><strong>NavalPlan 1.1 release</strong></a>):</p>
<ul>
<li>
<p>Back in May <a href="http://blogs.igalia.com/dpino/">Diego Pino</a> presented <a href="http://www.linuxtag.org/2011/en/program/free-conference/popup/details.html?no_cache=1&talkid=244"><strong>NavalPlan at LinuxTag 2011</strong></a> in Berlin (see the <a href="http://www.slideshare.net/libreplan/navalplan">slides with some demo videos</a>).</p>
</li>
<li>
<p>A new company, <a href="http://www.comtecsf.es/"><strong>ComtecSF</strong></a>, is joining the development team together with <a href="http://www.iglaia.com">Igalia</a> and <a href="https://blogs.igalia.com/mrego/2011/06/13/some-updates-about-me-in-igalia/www.wirelessgalicia.com">Wireless Galicia</a>. They are currently working in LDAP integration, I’d like to thank <a href="http://twitter.com/idiazt">Ignacio Díaz</a> and Cristina Alvariño for their work and collaboration.</p>
<p>More companies are showing interest in the project too and, as time passes, more users appear.</p>
</li>
<li>
<p>Version 1.2 is planned for September and <a href="http://wiki.navalplan.org/twiki/bin/view/NavalPlan/RoadMap#Version_1_2_2011w36">roadmap is already defined</a>. This will be the first version using the new name <strong>LibrePlan 1.2</strong>, we’ll try to have the new website ready on time.</p>
</li>
<li>
<p>Finally past Tuesday, the 7th, we published <a href="http://www.navalplan.org/nc/en/news/piece-of-news/article/publicado-navalplan-111-149.html">NavalPlan 1.1.1</a>, the last stable release, with several performance improvements.</p>
</li>
</ul>
<p>PS: If you haven’t tried NavalPlan yet, you should <a href="http://demo.navalplan.org">give it a try</a>. It’s going to make your life easier in your daily project management tasks and it’ll help you to manage and plan your projects and resources.</p>
Improving error messages in NavalPlan2011-04-14T00:00:00Zhttps://blogs.igalia.com/mrego/2011/04/14/improving-error-messages-in-navalplan/<p>Lately <a href="http://www.igalia.com">we</a> have been teaching <strong>training courses</strong> for <a href="http://www.navalplan.org/en/">NavalPlan</a> users and developers. These courses are a great opportunity to see how people uses the application, which allows us to detect different usability problems in some windows.
As time passes, project is gaining some relevance, for example <a href="http://www.linuxtag.org/2011/en/program/business-and-administration-congress/details.html?talkid=244">NavalPlan will be present at <strong>LinuxTag 2011</strong></a>. This implies that more people are starting to use the application and, accordingly, starting to <a href="http://bugs.navalplan.org">report more bugs</a>.</p>
<p>We’ve detected a problem in the error messages in NavalPlan, as currently they’re not informative and just show a basic message when some runtime error appears. Moreover, in some cases users don’t have access to server logs, therefore they can’t send us more information that a <strong>screenshot</strong> with the error message shown.</p>
<p>We’ve modified the way errors are reported to users and now NavalPlan shows more comprehensive information about the exception including <strong>stacktrace</strong>. This will make user’s life easier when detecting some issue in order to <a href="http://bugs.navalplan.org">report them using the <strong>bugzilla</strong></a>, without needing to dig into the logs.</p>
<div id="attachment_458" class="wp-caption alignleft">
<a href="https://blogs.igalia.com/mrego/files/2011/04/navalplan-error-message1.png"><img src="https://blogs.igalia.com/mrego/files/2011/04/navalplan-error-message1.png" alt="NavalPlan example error message"></a>
<p class="caption text-muted">
NavalPlan example error message
</p>
</div>
<p>As you can see in the picture, apart from error message, exception type, status code and stacktrace are shown. Stacktrace appears into a textbox in order to make easier copy&paste the information.</p>
<p>For the future, we should study the possibility to add some button to allow users send the information directly to the development team via e-mail, web service, …</p>
NavalPlan in Valencia2011-03-18T00:00:00Zhttps://blogs.igalia.com/mrego/2011/03/18/navalplan-in-valencia/<p><a href="http://www.flickr.com/photos/41099823@N00/2240225680/in/photostream/"><img alt=""VALENCIA 2008" by "ho visto nina volare"" src="https://blogs.igalia.com/mrego/files/2011/03/valencia_2008-by-ho_visto_nina_volare.jpg" class="alignleft"></a>Next week, <a href="http://www.igalia.com/igalian/jmoran/">Javi Morán</a> and <a href="http://www.igalia.com/igalian/mrego/">me</a>, will be in Valencia giving a <strong><a href="http://www.navalplan.org/en/">NavalPlan</a> user course</strong> to some people from <a href="http://www.gva.es/">Generalitat Valenciana</a>. They already had a successfully experience working with free software in public administration with <a href="http://www.gvsig.org/">gvSIG</a> project, and we hope that the history could be repeated again with NavalPlan in the short term.
So, if you are around Valencia (between Sunday 20th and Wednesday 23rd) and want to meet us to talk about <a href="http://navalplan.igalia.com">NavalPlan</a>, <a href="http://www.igalia.com">Igalia</a>, or free software in general; just leave a comment in this post or contact us.</p>
<p><strong>Valencia here we go!</strong></p>
How to create reports in NavalPlan (JasperReports integration)2011-03-01T00:00:00Zhttps://blogs.igalia.com/mrego/2011/03/01/how-to-create-reports-in-navalplan-jasperreports-integration/<p>This post has the intention to announce a small tutorial I’ve just written called <a href="http://navalplan.sourceforge.net/dev-documentation/howto-create-a-new-report-in-navalplan.html"><strong>How To Create A New Report In NavalPlan</strong></a>. From tutorial abstract:</p>
<blockquote>
<p><a href="http://www.navalplan.org/en/">NavalPlan</a> uses <a href="http://jasperforge.org/projects/jasperreports"><strong>JasperReports</strong></a> to create reports in the application. This document tries to explain how to create a new report in <a href="http://www.navalplan.org/en/">NavalPlan</a>.<br>
During this tutorial you are going to create a report that will show the list of resources in <a href="http://www.navalplan.org/en/">NavalPlan</a>.</p>
</blockquote>
<p>This manual was created with the goal of helping developers to create new reports in <a href="http://www.navalplan.org/en/">NavalPlan</a>. Following the steps described in the document, you will create a simple report which will generate the list of resources stored in NavalPlan.</p>
<p>However, it’s not a tutorial about how to use <a href="http://jasperforge.org/projects/jasperreports">JasperReports</a> or <a href="http://jasperforge.org/projects/ireport">iReport</a>, it’s just about how to integrate those tools in <a href="http://www.navalplan.org/en/">NavalPlan</a> following project architecture and conventions.</p>
<p>Finally, please don’t hesitate to contact <a href="http://navalplan.igalia.com">us</a> on <a href="http://sourceforge.net/mail/?group_id=302765">mailing lists</a> or <a href="http://webchat.freenode.net/?channels=#navalplan">IRC channel</a> if you find any issue. I hope you find it useful ;-)</p>
NavalPlan – First public IRC meeting2011-01-14T00:00:00Zhttps://blogs.igalia.com/mrego/2011/01/14/navalplan-first-public-irc-meeting/<p>Yesterday, <a href="http://www.navalplan.org">NavalPlan</a> community met at <a href="http://webchat.freenode.net/?channels=#navalplan">#navalplan</a> channel on IRC. Even when most of us are <a href="http://www.igalia.com/igalia-247/">igalians</a>, also some other external people attended and participated in the meeting. We’re really glad to see that project community is growing bit by bit. ;-)
In the meeting we defined the <strong>roadmap for next release</strong>, <a href="http://www.navalplan.org/nc/en/news/piece-of-news/article/folla-de-ruta-para-a-versia3n-navalplan-11-41.html">more info in the official piece of news</a>. This was the first public meeting of NavalPlan and, IMHO, it worked quite well, so we’ll repeat the experience in the future.</p>
<p>BTW, <a href="http://www.igalia.com/nc/igalia-247/news/item/igalia-web-group-is-hiring/">Igalia web group is looking for a new hacker</a> to help us keep rocking on the web free software world. <a href="http://www.igalia.com/nc/join-us/form/">Send us your resume</a> if you’re interested.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 11/01/30 11:32, **[Webdesign Oberschwaben](http://www.unsere-agentur.de/)** wrote:
<blockquote>
<p>What Typo3 Version did you use? The new Typo3 Version 4.5 LTS?</p>
<p>On 11/01/31 11:45, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>Sorry, but I don’t understand your question in this post. If you’re asking about <a href="http://www.navalplan.org/en/">navalplan.org</a> website we’re currently using TYPO3 4.4.6.</p>
</blockquote>
</blockquote>
</div>
NavalPlan 1.0 – Some random numbers2011-01-11T00:00:00Zhttps://blogs.igalia.com/mrego/2011/01/11/navalplan-1-0-some-random-numbers/<p>Past week <a href="http://www.igalia.com">we</a> published the first stable version of NavalPlan, you can <a href="http://www.navalplan.org/nc/en/news/piece-of-news/article/navalplan-10-xa-esta-listo-35.html">read the announcement for more information about version 1.0</a>.
In this post I’d like to highlight some numbers around NavalPlan development. You can easily check the amount of work done with a quick review to the following numbers:</p>
<ul>
<li><em>Time</em>: We have been working in the project for <strong>21 months</strong> (from April 2009 to January 2011).</li>
<li><em>Developers</em>: 14 people have committed code in the repository, being the core team composed by <strong>11 developers</strong>:
<ul>
<li><a href="http://www.igalia.com/igalian/jaragunde/">Jacobo Aragunde Pérez</a></li>
<li><a href="http://www.tic.udc.es/~fbellas/">Fernando Bellas Permuy</a></li>
<li><a href="http://www.igalia.com/igalian/chema/">José María Casanova Crespo</a></li>
<li><a href="http://www.igalia.com/igalian/xavi/">Xavier Castaño García</a></li>
<li><a href="http://www.igalia.com/igalian/ogonzalez/">Óscar González Fernández</a></li>
<li>Susana Montes Pedreira</li>
<li><a href="http://www.igalia.com/igalian/jmoran/">Francisco Javier Morán Rúa</a></li>
<li><a href="http://www.igalia.com/igalian/dpino/">Diego Pino García</a></li>
<li><a href="http://www.igalia.com/igalian/mrego/">Manuel Rego Casasnovas</a></li>
<li>Farruco Sanjurjo Arcay</li>
<li><a href="http://www.igalia.com/igalian/ltilve/">Lorenzo Tilve Álvaro</a></li>
</ul>
</li>
<li><em>Lines</em>: We have written <strong>152677 lines</strong> (according to <a href="http://www.dwheeler.com/sloccount/">SLOCCount</a>) most of them in Java (144095 lines).</li>
<li><em>Commits</em>: <strong>5315 commits</strong> have been pushed in master branch till 1.0 release, being Óscar the <em>top committer</em> with almost half of them (2449 commits).</li>
<li><em>Bugs</em>: <strong>796 bugs</strong> have been reported in the <a href="http://bugs.navalplan.org">bugtracker</a>, where 628 bugs have been fixed for version 1.0.</li>
</ul>
<p>Finally, I would like to publicly thank the whole team for their effort during this time. Thank you all, we have reached an important step where we have a stable release of the product available for end users. <strong>NavalPlan 1.0 is here!</strong> We should be really proud ;-)</p>
<p>PS: You can find these numbers and more information related with development in <a href="https://www.ohloh.net/p/navalplan">NavalPlan page at Ohloh</a>. <a href="https://www.ohloh.net/">Ohloh</a> is a nice website about free software projects, which extracts information directly from source code repositories.</p>
NavalPlan Ubuntu PPAs2011-01-07T00:00:00Zhttps://blogs.igalia.com/mrego/2011/01/07/navalplan-ubuntu-ppas/<p>During this week and as part of the work packing NavalPlan for 1.0 release, I’ve been working in create <strong><a href="http://en.wikipedia.org/wiki/Personal_Package_Archive">Ubuntu PPAs</a> for <a href="https://launchpad.net/~mrego/+archive/navalplan">NavalPlan project</a></strong>. I’ve decided to use PPAs because is a really nice way to publish your last development and make it easily available for end users.
Now if you want to <strong>install NavalPlan in Ubuntu</strong> you will just need to run the following commands:</p>
<pre>
sudo add-apt-repository ppa:mrego/navalplan
sudo apt-get update
sudo apt-get install navalplan
</pre>
<p>And you will have automatically installed last version of NavalPlan in your computer. Even more, when <strong>a new version is released</strong> you will be automatically notified by Ubuntu package manager and you could easily upgrade to the newer version.</p>
<p>PS: As you can <a href="http://www.navalplan.org/nc/en/news/piece-of-news/article/navalplan-10-xa-esta-listo-35.html">read</a> we have released <strong>NavalPlan 1.0 version today</strong>. I’ll write a post next week talking about this important release. But, for the moment, you could take advantage of <a href="https://launchpad.net/~mrego/+archive/navalplan">PPAs</a>, any other <a href="http://www.navalplan.org/en/download.html">built packages</a> or the <a href="http://www.navalplan.org/navalplan-demo/">on-line demo</a> to test the project and <a href="http://www.navalplan.org/en/information/contact.html">provide us feedback</a>.</p>
NavalPlan – Small features that will make your life easy2010-12-23T00:00:00Zhttps://blogs.igalia.com/mrego/2010/12/23/navalplan-small-features-that-will-make-your-life-easy/<p>Last week we add the latest features for first <a href="http://www.navalplan.org/en/">NavalPlan</a> stable version. <a href="http://wiki.navalplan.org/twiki/bin/view/NavalPlan/RoadMap">This week and the next one</a> <a href="http://www.igalia.com/">we</a> are going to work hard in order to test the application and fix a lot of <a href="http://bugs.navalplan.org/">bugs</a>. After this phase we should be doing <strong>1.0 release</strong> during first week of January.
Talking about past week, we added 2 small features that, in my humble opinion, are really important for end-users:</p>
<ul>
<li>
<p><strong>New project wizard</strong> (<em>by Susana</em>)</p>
<p><a href="https://blogs.igalia.com/mrego/files/2010/12/create-project-wizard.png"><img src="https://blogs.igalia.com/mrego/files/2010/12/create-project-wizard.png" alt="Create project wizard" class="alignright size-medium wp-image-279"></a></p>
<p>When you create a project you will need to fill a <strong>small popup</strong> with general data about the project. After that you will be redirected to <a href="http://en.wikipedia.org/wiki/Work_breakdown_structure">WBS</a> tab where you could easily add the tasks that compose your project.</p>
</li>
<li>
<p><strong>New tasks are scheduled by default</strong> (<em>by <a href="http://twitter.com/_ogf_">Óscar</a></em>)</p>
<p><a href="https://blogs.igalia.com/mrego/files/2010/12/tasks-scheduled-by-default.png"><img src="https://blogs.igalia.com/mrego/files/2010/12/tasks-scheduled-by-default.png" alt="Tasks scheduled by default"></a></p>
<p>People usually have problems to create Gantt charts in <a href="http://www.igalia.com/project/navalplan/">NavalPlan</a>, this was because you need to explicitly mark as scheduled the tasks added in the WBS tab. From now on, tasks are <strong>scheduled by default</strong>, so you wouldn’t need to worry about this issue. Just remember that if you don’t want to schedule all the tasks in your WBS, you still have the chance to unschedule some tasks using the proper <a href="http://demo.navalplan.org/navalplan-demo/common/img/ico_unschedule.png">icon <img src="https://blogs.igalia.com/mrego/files/2010/12/ico_unschedule.png" alt="Unschedule icon"></a>.</p>
<p><a href="https://blogs.igalia.com/mrego/files/2010/12/gantt.png"><img src="https://blogs.igalia.com/mrego/files/2010/12/gantt.png" alt="Gantt chart"></a></p>
<p>Then if you go to <em>Project Scheduling</em> view, don’t forget to save the current project before, you will get a <strong>Gantt chart</strong> like the one in the image, where you could start to add dependencies and allocate resources.</p>
</li>
</ul>
<p>You can enjoy this new features in the <a href="http://www.navalplan.org/navalplan-demo/"><strong>on-line demo</strong></a> and also in the <strong><a href="http://sourceforge.net/projects/navalplan/files/NavalPlan/navalplan_0.9.1_all.deb/download">last</a> <a href="http://www.navalplan.org/en/download.html">Debian package</a></strong>. We hope you find them useful ;-)</p>
Web Grilo Player – Playing with WebKitGTK+ and Grilo2010-12-20T00:00:00Zhttps://blogs.igalia.com/mrego/2010/12/20/web-grilo-player-playing-with-webkitgtk-and-grilo/<p>Lately I’ve been spending my <a href="http://www.igalia.com/about-us/internal-responsibility">hackfest</a> time in a new idea that seems to me like a nice test. The idea basically was to create a desktop application with a web interface for <a href="http://live.gnome.org/Grilo">Grilo</a> using <a href="http://www.webkitgtk.org/">WebKitGTK+</a>. That would let me to play with <a href="http://www.igalia.com/nc/work/project/item/grilo">some</a> <a href="http://www.igalia.com/project/webkitgtk+">projects</a> in which my mates are working, taking advantage to test the new features of HTML5 and JavaScript interfaces.
Then I started to code a small GNOME application called <strong>Web Grilo Player</strong> (it looks like a suitable and <em>very imaginative</em> name ;-)). The application is written in C and use WebKitGTK+ DOM bindings to manage the interface. For the moment it’s just able to navigate media sources provided by Grilo and it already shows images and reproduce audio and video using specific HTML5 tags. You can find the source code at <a href="http://gitorious.org/web-grilo-player/">Git repository</a>.</p>
<p>As I said, it’s just a test and right now the interface looks really horrible but, at least, it works as I can show you in the <a href="http://www.youtube.com/watch?v=Wz6C34enJwg">following video</a>.</p>
<p>Finally, I hope to find time to keep working on it and start to play with more HTML5 and JavaScript features in order to improve current interface.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 10/12/20 12:03, **J.A.** wrote:
<blockquote>
<p>That’s a cool try.</p>
<p>Just out of curiosity. As grilo’s developer, I’d like to know what was the grilo feature you most missed, or the one that was most difficult to work with (if any).</p>
<p>On 10/08/25 10:50, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>@J.A. nothing special, it’s just a test and I’ve just followed Grilo Test UI using more or less the same functions.</p>
<p>I’ll tell you if I find any issue in the future ;-)</p>
</blockquote>
</blockquote>
</div>
NavalPlan: Road to 1.02010-12-03T00:00:00Zhttps://blogs.igalia.com/mrego/2010/12/03/navalplan-road-to-1-0/<p><a href="http://www.igalia.com">We</a> continue taking steps to open <a href="http://www.navalplan.org/en/">NavalPlan</a> development. <a href="http://www.navalplan.org/nc/en/news/piece-of-news/article/wiki-de-desenvolvemento-de-navalplan-25.html">This week</a> we’ve made public <a href="http://wiki.navalplan.org">the project wiki</a> where you can find information about the development, like for example which tasks we’re currently working on.
One important point is that we’ve already defined <a href="https://wiki.navalplan.org/twiki/bin/view/NavalPlan/RoadMap">a roadmap</a> for the project and, if everything goes right, we’ll have a first stable release at the beginning of 2011. This would mean that <strong>version 1.0</strong> will be released. Moreover we’ve agreed to publish new stable versions of the product each <strong><a href="https://wiki.navalplan.org/twiki/bin/view/NavalPlan/ReleaseProcess">3 months</a></strong>, in order to make easier end-users life, you can check the plan in the wiki.</p>
<p>We’re doing our bests in order to achieve our goals and reach version 1.0 on time. More news coming soon, stay tuned ;-)</p>
JAX-RS example with Jersey, Jetty and Maven2010-08-02T00:00:00Zhttps://blogs.igalia.com/mrego/2010/08/02/jax-rs-example-with-jersey-jetty-and-maven/<p>Last weekend I’ve been giving the last lesson of the Web module at <a href="http://www.mastersoftwarelibre.com/">Master on Software Libre</a>. In this lesson we’ve tried to advance as much as possible in the practice that the students are developing for this module, a web application using <a href="http://www.java.com/">Java</a> technologies: <a href="http://maven.apache.org/">Maven</a>, <a href="http://www.hibernate.org/">Hibernate</a>, <a href="http://jetty.codehaus.org/jetty/">Jetty</a> and <a href="http://www.zkoss.org/">ZK</a>.
The last part of this practice has the aim to create web services around this web application based on <a href="http://en.wikipedia.org/wiki/Restful"><strong>REST</strong></a> standard. In order to properly explain how this goal could be achieved I’ve created a small example that could be useful for more people.</p>
<p>The Java API for RESTful Web Services is called <a href="http://en.wikipedia.org/wiki/JAX-RS"><strong>JAX-RS</strong></a> (and it’s defined at <a href="http://jcp.org/aboutJava/communityprocess/final/jsr311/index.html">JSR-311</a>) and the reference implementation is <a href="http://jersey.dev.java.net/">Jersey</a>. I’ve tried to find an example using Jersey, Jetty and Maven about how to add REST web services to a Java application, after failing in my search I decided to start my own example based in a <a href="http://blog.reardonsoftware.com/2009/03/jersey-jetty-and-maven-helloworld.html">post by Tim Reardon</a>.</p>
<p>These kind of services are intended to import/export data from/to a web application, the most common formats are <a href="http://en.wikipedia.org/wiki/Xml">XML</a> and <a href="http://en.wikipedia.org/wiki/Json">JSON</a>. For this example I decided to use XML, using <a href="http://en.wikipedia.org/wiki/JAXB"><strong>JAXB</strong></a> standard to map Java classes to XML files.</p>
<p>The final result is a simple application implementing the different HTTP methods (GET, POST, PUT and DELETE) that could help to other developers as example. Along with several bash scripts to to test the web service, I’ve also added a basic client written in Java. You can find the example application uploaded to <a href="http://gitorious.org/java-rest-example"><strong>Gitorious</strong></a> and you can download the source code from there.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 10/08/25 00:28, **Greg Wilkins** wrote:
<blockquote>
<p>Your readme should say “mvn jetty:run” instead of “mvn jetty-run”.</p>
<p>cheers</p>
<p>On 10/08/25 10:50, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>You’re right, I’ve just changed it. Thanks for the feedback.</p>
</blockquote>
</blockquote>
<p>On 12/01/03 20:42, <strong><a href="http://www.matthewcornell.org/">Matthew Cornell</a></strong> wrote:</p>
<blockquote>
<p>The link [post by Tim Reardon] is broken – <a href="http://blog.reardonsoftware.com/2009/03/jersey-jetty-and-maven-helloworld.html">http://blog.reardonsoftware.com/2009/03/jersey-jetty-and-maven-helloworld.html</a> . I found this one: <a href="http://codebeneath.blogspot.com/2008/03/jersey-jetty-and-maven-style.html">http://codebeneath.blogspot.com/2008/03/jersey-jetty-and-maven-style.html</a> , which is older.</p>
</blockquote>
<p>On 12/11/17 01:40, <strong>Mike</strong> wrote:</p>
<blockquote>
<p>Was disappointed that the attached code has nothing to do with Jetty as the title states.</p>
<p>On 10/08/25 10:50, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>Mike I don’t understand your comment.</p>
<p>This is just an example of a JAX-RS application running in Jetty with Maven. Maybe, it’s not very related to Jetty, but in the README the instructions explain how to run the example in Jetty and not with any other servlet container.</p>
</blockquote>
</blockquote>
</div>
igalia.com development2010-07-27T00:00:00Zhttps://blogs.igalia.com/mrego/2010/07/27/igalia-com-development/<p><a href="https://blogs.igalia.com/mrego/files/2010/07/igalia-com.png"><img src="https://blogs.igalia.com/mrego/files/2010/07/igalia-com.png" alt="igalia.com"></a>
During the last months we’ve been working on the <a href="http://www.igalia.com">new Igalia website</a>, maybe you have already <a href="http://www.igalia.com/nc/igalia-247/news/item/new-igalia-website-released/">heard something about it</a> ;-). In this post I’d try to gather some useful information about the development of this project. We’re really glad with the fact that people seems happy with the final result and we promise to keep this new webpage more updated that the last one.</p>
<p>First of all, as you can expect the website has been developed using <a href="http://typo3.org">TYPO3</a> as content management system (one of our expertise areas inside the web group). I’d like to highlight some extensions used:</p>
<ul>
<li><a href="http://typo3.org/extensions/repository/view/templavoila/current/">TemplaVoila! (templavoila)</a>: That makes really easy to adapt the design to our needs.</li>
<li><a href="http://typo3.org/extensions/repository/view/tt_news/current/">News (tt_news)</a>: Specially the database structure provided by this extension, that has been adapted to support areas, projects, igalians and even commits in the new webpage.</li>
<li><a href="http://typo3.org/extensions/repository/view/ameos_formidable/current/">Ameos Formidable (ameos_formidable)</a>: Even when we don’t have a lot forms, Formidable is heavily used in the whole website, all the listers and detail views are provided by this great extension.</li>
<li><a href="http://typo3.org/extensions/repository/view/yafi/current/">Yet Another Feed Importer (yafi)</a>: A nice extension that allows us to import all kind of data via RSS feeds (posts, commits, …).</li>
<li><a href="http://typo3.org/extensions/repository/view/mnogosearch/current/">mnoGoSearch (mnogosearch)</a>: The search engine selected for the web.</li>
</ul>
<p>Moreover, we haven’t just used these extensions, we have also contributed to some of them reporting <a href="http://bugs.typo3.org/view.php?id=5574">some</a> <a href="http://forge.typo3.org/issues/6714">bugs</a> and providing <a href="http://bugs.typo3.org/view.php?id=14651">some</a> <a href="http://forge.typo3.org/issues/6716">patches</a> to add new behavior.</p>
<p>Finally, we’d like that everybody enjoys the new website so any comment, suggestion, bug report, whatever is welcomed.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 10/07/27 12:52, **[Simón](http://simonpena.com/)** wrote:
<blockquote>
<p>It looks really nice, specially the integration achieved with so many different news sources. Good work!</p>
</blockquote>
</div>
NavalPlan moved to SourceForge.net2010-07-16T00:00:00Zhttps://blogs.igalia.com/mrego/2010/07/16/navalplan-moved-to-sourceforge-net/<p>Since May 2009 a group of igalians have been working in a web application called <strong><a href="http://www.navalplan.org/en/">NavalPlan</a></strong>. Maybe, you already know this project because of it was already presented by <a href="http://blogs.igalia.com/xavi/2010/03/18/navalplan-website/">my mate Xavi in his blog some time ago</a>. We’ve been very busy with this project (you can check it in <a href="https://www.ohloh.net/p/navalplan">the ohloh page</a>) but now we can devote some time to the free software side of the project.
On the one hand, NavalPlan is licensed under <strong><a href="http://www.gnu.org/licenses/agpl-3.0.html">AGPL</a></strong>. This license is really interesting for web apps because, if you simply use <a href="http://www.gnu.org/licenses/agpl-3.0.html">GPL</a>, someone could modify your application and run it in a server without publish the changes (this doesn’t mean redistribute, it’s just serve). However, using AGPL it’s necessary that all the modified source code becomes available to the community if it’s used in a network server.</p>
<p>On the other hand, we used a public Git repository at <a href="http://git.igalia.com/">git.igalia.com</a> from the very beginning. But, this week we’ve moved the repository to <strong><a href="http://sourceforge.net/">SourceForge.net</a></strong> together with other resources like: mailing lists, forums, … (see the <a href="http://www.navalplan.org/nc/en/news/piece-of-news/article/navalplan-en-sourceforgenet-19.html">piece of news about that</a> for more info).</p>
<p>To sum up, from now on we’re going to use these public resources available at <strong><a href="http://sourceforge.net/projects/navalplan/">NavalPlan page at SourceForge.net</a></strong>. We would be very grateful if we get some feedback from new users, developers and contributors trough them.</p>
Import RSS feeds related with categories in TYPO32010-03-05T00:00:00Zhttps://blogs.igalia.com/mrego/2010/03/05/import-rss-feeds-related-with-categories-in-typo3/<p>This week I’ve been taking a look to a TYPO3 extension to import RSS feeds called <a href="http://typo3.org/extensions/repository/view/yafi/current/"><em>Yet Another Feed Importer</em> (<code>yafi</code>)</a>.
This extension works really nice, but I miss one feature. I’m going to import blog posts to a TYPO3 website and I’d like to keep the categories already associated with the original post also related with the news imported in the website.</p>
<p>An example:</p>
<ul>
<li>Import one post that has the categories TYPO3 and PHP in the RSS</li>
<li>If you have defined in your website the category TYPO3</li>
<li>Then the tt_news record imported will be related with TYPO3 category</li>
</ul>
<p>Finally, I’ve implemented it, you can find <strong><a href="http://forge.typo3.org/issues/show/6716">a patch</a></strong> at <a href="http://forge.typo3.org/">TYPO3 Forge</a>. Also some <a href="http://forge.typo3.org/issues/show/6714">little</a> <a href="http://forge.typo3.org/issues/show/6715">bugfixes</a> for <code>yafi</code> extension.</p>
<p>This together with <a href="http://typo3.org/extensions/repository/view/gl_pages_cat/current/"><code>gl_pages_cat</code></a> could help to feed your website automatically showing only related news on every categorized page.</p>
<p>PD: An <a href="http://people.gnome.org/~federico/news-2010-03.html#05">inspirational post by Federico Mena today</a>:</p>
<blockquote>
<p>[…] If you don’t “git push” today, your day was a waste of time.</p>
</blockquote>
CASify Redmine2009-07-22T00:00:00Zhttps://blogs.igalia.com/mrego/2009/07/22/casify-redmine/<p><a href="http://www.redmine.org">Redmine</a> is a project management web application. It’s written in <a href="http://www.ruby-lang.org/">Ruby</a> using the <a href="http://www.rubyonrails.org.es/">Rails</a> framework.
There is a <a href="http://en.wikipedia.org/wiki/Central_Authentication_Service">CAS</a> client available written in Ruby: <a href="http://rubycas-client.rubyforge.org/">RubyCAS-Client</a>.</p>
<p>So, I’ve made some modifications on Redmine code in order to use the CAS service to authenticate Redmine users. Moreover, user information is updated from a <a href="http://en.wikipedia.org/wiki/LDAP">LDAP</a> every time the user login in the Redmine website (using <a href="http://net-ldap.rubyforge.org/rdoc/">Net::LDAP</a>). And the fields to modify this data will be disabled on <em>My account</em> page.</p>
<p>Summarizing, I’ve uploaded a <strong><a href="https://blogs.igalia.com/mrego/files/2009/07/casify_redmine.patch">patch</a></strong> which provides this specific behaviour (this patch is done against the revision 2824 of Redmine). I know that it’s hardcoded, but it could be a base for further steps and I hope that it could be useful for someone else (or even for me in the future ;-) ). In the next paragraphs I’ll go into more technical details.</p>
<!--more-->
<p><strong>Instructions</strong></p>
<p>Once you’ve installed the last version of Redmine (I’m using trunk revision 2824), you’ll need to install RubyCAS-Client (again from trunk because of some functions are not available at last stable 2.0.1):</p>
<pre>
./script/plugin install http://rubycas-client.googlecode.com/svn/trunk/rubycas-client
</pre>
<p>First of all, you should add the basic configuration for CAS at <code>config/environment.rb</code>:</p>
<pre><span style="color: #0057ae">CASClient</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Frameworks</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Rails</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Filter</span><span style="color: #4000a7">.configure</span><span style="color: #141312">(</span>
<span style="color: #141312"> </span><span style="color: #d40000">:cas_base_url</span><span style="color: #141312"> </span><span style="color: #ff9fec">=></span><span style="color: #141312"> </span><span style="color: #dd4a4a">'https://localhost/cas/'</span>
<span style="color: #141312">)</span></pre>
<p>Moreover, it’s needed to add the next line to the class <code>AccountController</code> at <code>app/controllers/account_controller.rb</code>:</p>
<pre><span style="color: #141312"> before_filter </span><span style="color: #0057ae">CASClient</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Frameworks</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Rails</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Filter</span></pre>
<p>Then, in order to change the login behaviour you should modify the <code>login</code> action of the <code>account</code> controller. Change the method <code>login</code> at <code>app/controllers/account_controller.rb</code>:</p>
<pre><span style="color: #000080">require</span><span style="color: #141312"> </span><span style="color: #dd4a4a">'casclient'</span>
<span style="color: #000080">require</span><span style="color: #141312"> </span><span style="color: #dd4a4a">'casclient/frameworks/rails/filter'</span>
<span style="color: #141312"> <b>def</b> login</span>
<span style="color: #141312"> <b>if</b> session</span><span style="color: #ff9fec">[</span><span style="color: #d40000">:cas_user</span><span style="color: #ff9fec">]</span><span style="color: #4000a7">.empty?</span>
<span style="color: #141312"> </span><span style="color: #888786"><i># Logout user</i></span>
<span style="color: #141312"> </span><span style="color: #b08000">self</span><span style="color: #4000a7">.logged_user</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #b08000">nil</span>
<span style="color: #141312"> </span><span style="color: #0057ae">CASClient</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Frameworks</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Rails</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Filter</span><span style="color: #ff9fec">::</span><span style="color: #4000a7">redirect_to_cas_for_authentication</span><span style="color: #141312">(</span><span style="color: #b08000">self</span><span style="color: #141312">)</span>
<span style="color: #141312"> <b>else</b></span>
<span style="color: #141312"> cas_authentication(session</span><span style="color: #ff9fec">[</span><span style="color: #d40000">:cas_user</span><span style="color: #ff9fec">]</span><span style="color: #141312">)</span>
<span style="color: #141312"> <b>end</b></span>
<span style="color: #141312"> <b>end</b></span>
</pre>
<p>Now, it’s necessary to add the new method <code>cas_authentication</code>, which register an user if it’s the first time that makes login on the Redmine website:</p>
<pre><span style="color: #141312"> <b>def</b> cas_authentication(cas_user)</span>
<span style="color: #141312"> user </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #0057ae">User</span><span style="color: #4000a7">.find_or_initialize_by_login</span><span style="color: #141312">(cas_user)</span>
<span style="color: #141312"> <b>if</b> user</span><span style="color: #4000a7">.new_record?</span>
<span style="color: #141312"> </span><span style="color: #888786"><i># Create on the fly</i></span>
<span style="color: #141312"> user</span><span style="color: #4000a7">.login</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> cas_user</span>
<span style="color: #141312"> user </span><span style="color: #ff9fec">=</span><span style="color: #141312"> update_user_data_from_ldap(user)</span>
<span style="color: #141312"> user</span><span style="color: #4000a7">.status</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #0057ae">User</span><span style="color: #ff9fec">::</span><span style="color: #bb1188">STATUS_REGISTERED</span>
<span style="color: #141312"> register_automatically(user) <b>do</b></span>
<span style="color: #141312"> onthefly_creation_failed(user)</span>
<span style="color: #141312"> <b>end</b></span>
<span style="color: #141312"> <b>else</b></span>
<span style="color: #141312"> <b>if</b> user</span><span style="color: #4000a7">.active?</span>
<span style="color: #141312"> user </span><span style="color: #ff9fec">=</span><span style="color: #141312"> update_user_data_from_ldap(user, </span><span style="color: #b08000">true</span><span style="color: #141312">)</span>
<span style="color: #141312"> successful_authentication(user)</span>
<span style="color: #141312"> <b>else</b></span>
<span style="color: #141312"> account_pending</span>
<span style="color: #141312"> <b>end</b></span>
<span style="color: #141312"> <b>end</b></span>
<span style="color: #141312"> <b>end</b></span></pre>
<p>The method <code>update_user_data_from_ldap</code> gets the user data from LDAP, and update user data on database if needed:</p>
<pre><span style="color: #141312"> <b>def</b> update_user_data_from_ldap (user, save </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #b08000">false</span><span style="color: #141312">)</span>
<span style="color: #141312"> ldap </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #0057ae">Net</span><span style="color: #ff9fec">::</span><span style="color: #bb1188">LDAP</span><span style="color: #ff9fec">::</span><span style="color: #4000a7">new</span>
<span style="color: #141312"> ldap</span><span style="color: #4000a7">.host</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #dd4a4a">'localhost'</span>
<span style="color: #141312"> ldap</span><span style="color: #4000a7">.port</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #dd4a4a">'389'</span>
<span style="color: #141312"> treebase </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #dd4a4a">'dc=example,dc=com'</span>
<span style="color: #141312"> filter </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #0057ae">Net</span><span style="color: #ff9fec">::</span><span style="color: #bb1188">LDAP</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Filter</span><span style="color: #4000a7">.eq</span><span style="color: #141312">(</span><span style="color: #dd4a4a">'uid'</span><span style="color: #141312">, user</span><span style="color: #4000a7">.login</span><span style="color: #141312">)</span>
<span style="color: #141312"> entry </span><span style="color: #ff9fec">=</span><span style="color: #141312"> ldap</span><span style="color: #4000a7">.search</span><span style="color: #141312">( </span><span style="color: #d40000">:base</span><span style="color: #141312"> </span><span style="color: #ff9fec">=></span><span style="color: #141312"> treebase, </span><span style="color: #d40000">:filter</span><span style="color: #141312"> </span><span style="color: #ff9fec">=></span><span style="color: #141312"> filter, </span><span style="color: #d40000">:attributes</span><span style="color: #141312"> </span><span style="color: #ff9fec">=></span><span style="color: #141312"> </span><span style="color: #ff9fec">[</span><span style="color: #dd4a4a">'cn'</span><span style="color: #141312">, </span><span style="color: #dd4a4a">'sn'</span><span style="color: #141312">, </span><span style="color: #dd4a4a">'mail'</span><span style="color: #ff9fec">]</span><span style="color: #141312"> )</span><span style="color: #4000a7">.first</span>
<span style="color: #141312"> user</span><span style="color: #4000a7">.firstname</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> entry</span><span style="color: #4000a7">.cn.first</span>
<span style="color: #141312"> user</span><span style="color: #4000a7">.lastname</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> entry</span><span style="color: #4000a7">.sn.first</span>
<span style="color: #141312"> user</span><span style="color: #4000a7">.mail</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> entry</span><span style="color: #4000a7">.mail.first</span>
<span style="color: #141312"> user</span><span style="color: #4000a7">.save</span><span style="color: #141312"> <b>if</b> save</span>
<span style="color: #141312"> <b>return</b> user</span>
<span style="color: #141312"> <b>end</b></span></pre>
<p>Following, you should modify the logout behaviour, changing the method <code>logout</code> of the same controller:</p>
<pre><span style="color: #141312"> <b>def</b> logout</span>
<span style="color: #141312"> cookies</span><span style="color: #4000a7">.delete</span><span style="color: #141312"> </span><span style="color: #d40000">:autologin</span>
<span style="color: #141312"> </span><span style="color: #0057ae">Token</span><span style="color: #4000a7">.delete_all</span><span style="color: #141312">(</span><span style="color: #ff9fec">[</span><span style="color: #bf0303">"user_id = ? AND action = ?"</span><span style="color: #141312">, </span><span style="color: #0057ae">User</span><span style="color: #4000a7">.current.id</span><span style="color: #141312">, </span><span style="color: #dd4a4a">'autologin'</span><span style="color: #ff9fec">]</span><span style="color: #141312">) <b>if</b> </span><span style="color: #0057ae">User</span><span style="color: #4000a7">.current.logged?</span>
<span style="color: #141312"> </span><span style="color: #b08000">self</span><span style="color: #4000a7">.logged_user</span><span style="color: #141312"> </span><span style="color: #ff9fec">=</span><span style="color: #141312"> </span><span style="color: #b08000">nil</span>
<span style="color: #141312"> </span><span style="color: #0057ae">CASClient</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Frameworks</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Rails</span><span style="color: #ff9fec">::</span><span style="color: #0057ae">Filter</span><span style="color: #ff9fec">::</span><span style="color: #4000a7">logout</span><span style="color: #141312">(</span><span style="color: #b08000">self</span><span style="color: #141312">)</span>
<span style="color: #141312"> <b>end</b></span></pre>
<p>The last step is to disable the fields gotten from LDAP at <em>My account</em> page. Modify the <code>app/views/my/account.rhtml</code> file adding <code>:disabled => true</code> option:</p>
<pre><span style="color: #141312"><b><p><%=</b> f</span><span style="color: #4000a7">.text_field</span><span style="color: #141312"> </span><span style="color: #d40000">:firstname</span><span style="color: #141312">, </span><span style="color: #d40000">:required</span><span style="color: #141312"> </span><span style="color: #ff80e0">=></span><span style="color: #141312"> </span><span style="color: #b08000">true</span><span style="color: #141312">, </span><span style="color: #d40000">:disabled</span><span style="color: #141312"> </span><span style="color: #ff80e0">=></span><span style="color: #141312"> </span><span style="color: #b08000">true</span><span style="color: #141312"> <b>%></p></b></span>
<span style="color: #141312"><b><p><%=</b> f</span><span style="color: #4000a7">.text_field</span><span style="color: #141312"> </span><span style="color: #d40000">:lastname</span><span style="color: #141312">, </span><span style="color: #d40000">:required</span><span style="color: #141312"> </span><span style="color: #ff80e0">=></span><span style="color: #141312"> </span><span style="color: #b08000">true</span><span style="color: #141312">, </span><span style="color: #d40000">:disabled</span><span style="color: #141312"> </span><span style="color: #ff80e0">=></span><span style="color: #141312"> </span><span style="color: #b08000">true</span><span style="color: #141312"> <b>%></p></b></span>
<span style="color: #141312"><b><p><%=</b> f</span><span style="color: #4000a7">.text_field</span><span style="color: #141312"> </span><span style="color: #d40000">:mail</span><span style="color: #141312">, </span><span style="color: #d40000">:required</span><span style="color: #141312"> </span><span style="color: #ff80e0">=></span><span style="color: #141312"> </span><span style="color: #b08000">true</span><span style="color: #141312">, </span><span style="color: #d40000">:disabled</span><span style="color: #141312"> </span><span style="color: #ff80e0">=></span><span style="color: #141312"> </span><span style="color: #b08000">true</span><span style="color: #141312"> <b>%></p></b></span></pre>
<p>Finally, you can get all this stuff from a single <a href="https://blogs.igalia.com/mrego/files/2009/07/casify_redmine.patch">patch</a>. Any comment or suggestion are, as usual, welcomed.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 09/08/14 10:54, **Neoh59** wrote:
<blockquote>
<p>Hello,</p>
<p>I use Redmine 0.8.4 (latest stable release)</p>
<p>CASifying Redmine will be great. But why do you write a function to connect to LDAP although LDAP configuration can be made in the Redmine interface ?</p>
<p>I’m dreaming of a SSO plugin for Redmine. But I’m not be able to do it. :-(<br>
Do you ? ;-)</p>
<p>Regards,
Neoh</p>
<p>PS: Sorry for my poor english, I’m french.</p>
<p>On 09/08/14 07:22, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>I’m just using LDAP for a specific requirement. I need that the first time the user login Redmine, the information from LDAP about this use was stored on the database (morover every time the user login again I should update the data if that has changed on LDAP). Anyway, I could have a look at LDAP plugin, maybe it fulfils my requirements ;-)</p>
<p>About the SSO plugin, maybe this patch could be useful as example for that plugin. But for the moment it’s enough for my needs.</p>
</blockquote>
</blockquote>
<p>On 09/11/25 12:15, <strong><a href="http://rubiojr.netcorex.org/">rubiojr</a></strong> wrote:</p>
<blockquote>
<p>Awesome mate. Your patch saved us hours of work!!!</p>
</blockquote>
<p>On 10/04/15 16:44, <strong>lnomine</strong> wrote:</p>
<blockquote>
<p>Hi,</p>
<p>Do you plan to use the 0.9.x version of Redmine? I’d love to see your patch working for the current version.</p>
<p>On 10/04/15 16:52, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>Maybe in the future we could update to this version, but not in the short term. Sorry.</p>
<p>I’ll keep you informed if we update the patch.</p>
</blockquote>
</blockquote>
</div>
GCDS Day 6 – Last day2009-07-10T00:00:00Zhttps://blogs.igalia.com/mrego/2009/07/10/gcds-day-6-last-day/<p>I spent the whole day attended to the <a href="http://www.grancanariadesktopsummit.org/node/331">GUADEC-ES talks</a>. And I liked specially two of them:</p>
<ul>
<li><em><a href="http://www.grancanariadesktopsummit.org/node/337">GTK+ 3.0, paso a paso</a></em> where <a href="http://blogs.gnome.org/carlosg/">Carlos Garnacho</a> showed us some interesting things that will be the future of <a href="http://www.gtk.org">GTK+</a></li>
<li><em><a href="http://www.grancanariadesktopsummit.org/node/340">Tracker. ¿Qué he hecho yo para indexar esto?</a></em> interesting talk about the new <a href="http://projects.gnome.org/tracker/">Tracker 0.7</a> by <a href="http://blog.ifrade.es/">Iván Frade</a>.</li>
</ul>
<p>Moreover, <a href="http://www.mastersoftwarelibre.com/">we</a> present our talk about <a href="http://www.grancanariadesktopsummit.org/node/342">Tarefas at GUADEC-ES</a>, it seems that people like the idea and how it was developed as part of the Master on Free Software. BTW, you can get <a href="http://people.igalia.com/mrego/mswl/guadec/guadec-es-2009-tarefas.pdf">the slides (in Spanish)</a>.</p>
<p>Finally, <a href="http://blogs.igalia.com/berto">Berto</a> and me went for a walk around the old city, this part is really nice.</p>
<p>Summarizing, it was a great week in Gran Canaria, where I could meet a lot of great hackers. A lot of interesting stuff: <a href="http://moblin.org/projects/mojito">Mojito</a>, <a href="http://projects.gnome.org/tracker/">Tracker</a>, <a href="http://live.gnome.org/GnomeZeitgeist">Zeitgeist</a>, <a href="http://www.midgard-project.org/midgard2/">Midgard2</a>, <a href="http://couchdb.apache.org/">CouchDB</a>, <a href="http://live.gnome.org/GnomeShell">GNOME Shell</a>, … I should take a look at some of them in the future, I hope to find some time ;-)</p>
GCDS Day 5 – Mobile Day & GUADEC-ES2009-07-09T00:00:00Zhttps://blogs.igalia.com/mrego/2009/07/09/gcds-day-5-mobile-day-guadec-es/<p>I started the day at GUADEC-ES with a great talk <em><a href="http://www.grancanariadesktopsummit.org/node/329">Enanos con Gorrito – GNOME para novatos</a></em> by <a href="http://www.gnome.org/~federico/">Federico Mena</a>.
Then I moved to the GUADEC Mobile Day in order to attend the following talks:</p>
<ul>
<li><a>Multimedia in your pocket</a></li>
<li><a>Designing Moblin-Netbook. A free desktop on a 7-10″ Screen</a></li>
<li><a>Hildon desktop in Maemo 5</a></li>
<li><a>MAFW: the Media Application Framework for Maemo</a></li>
</ul>
<p>Afer that, I moved again to GUADEC-ES where <a href="http://blogs.igalia.com/vjaquez/">Víctor</a> explained how to generate <code>.vapi</code> files in his talk <em><a href="http://www.grancanariadesktopsummit.org/node/335">Un vistazo a Vala</a></em>.</p>
<p>And I finished the conferences day in the next talks:</p>
<ul>
<li><a href="http://www.grancanariadesktopsummit.org/node/410">Couch DB: Cross Desktop Data and Demos</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/208">Pitivi Video Editor</a></li>
</ul>
<p>Finally, I went to the <a href="http://www.es.gnome.org/">GNOME Hispano</a> dinner and also attended to the party sponsored by <a href="http://www.collabora.co.uk/">Collabora</a>.</p>
GCDS Day 4 – Talks, beach and dinner2009-07-08T00:00:00Zhttps://blogs.igalia.com/mrego/2009/07/08/gcds-day-4-talks-beach-and-dinner/<p>I attended some talks during the day, during the morning <a href="http://www.clutter-project.org/">Clutter</a> was a main character. The <a href="http://www.midgard-project.org/midgard2/">Midgard2</a> project seems interesting, a content repository with just a library, it should be reviewed with <a href="http://couchdb.apache.org/">CouchDB</a> if you need something like a content repository for your project.
After the conference some of <a href="http://www.igalia.com">us</a> went to the beach and other hackers join us there. BTW, my second swim in Gran Canaria ;-)</p>
<p>Finally, some igalians and <a href="http://www.gnome.org/~federico/">Federico Mena</a> went to dinner to the city centre. I had the chance to ask him about <a href="http://live.gnome.org/GnomeZeitgeist">Zeitgeist</a> internals, how they detect the events and so on. It was a nice night with a great guy.</p>
GCDS Day 3 – GNOME party2009-07-06T00:00:00Zhttps://blogs.igalia.com/mrego/2009/07/06/gcds-day-3-gnome-party/<p>Today I attended the next talks:</p>
<ul>
<li><a href="http://www.grancanariadesktopsummit.org/node/187">WebKitGTK+</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/189">I can has aliens too? Client side windows in Gtk+</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/192">Modest: Creating a modern mobile email client with gnome technologies</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/197">GNOME 3.0 – A Live Circus^WStatus Update</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/193">Vala: Compiler for the GObject type system</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/195">GSettings: Next Gen of Config Management</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/198">GNOME 1,2,3</a></li>
</ul>
<p>Quite interesting talks today, and a very funny talk (<em>GNOME 1,2,3</em>) by <a href="http://www.gnome.org/~fherrera/">Fer</a> and <a href="http://blogs.gnome.org/xan/">Xan</a>. Furthermore, it’s good to see how Igalians have started to appear as speakers ;-)</p>
<p>Today is the GNOME party sponsored by Igalia, now it’s time to go there!</p>
<p>BTW, master students (Manuel, Javi and me) have started to prepare <a href="http://www.grancanariadesktopsummit.org/node/342">our talk</a> for the GUADEC-ES. Moreover <a href="http://blogs.igalia.com/svillar/">Sergio</a> has found some time, after the Modest talk, to help us with the Maemo port. Thank you very much!</p>
GCDS Day 2 – GUADEC starts2009-07-05T00:00:00Zhttps://blogs.igalia.com/mrego/2009/07/05/gcds-day-2-guadec-starts/<p>During the morning I attended the following talks of the <em>Cross-desktop</em> track:</p>
<ul>
<li><a href="http://www.grancanariadesktopsummit.org/node/152">Desktop search: Extracting semantic meta data</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/170">Tracker: Metadata central storage for the Desktop</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/129">Animated UI technologies in maemo 5 (Fremantle)</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/143">WebKit combined GTK+/Qt talk</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/168">Profiling and Optimizing D-Bus APIs</a></li>
</ul>
<p>I liked the <em>Desktop search</em> and <em>Tracker</em> talks, that allowed me to understand better the problems and ideas of these projects. From the <em>D-Bus</em> talk I should extract a basic concept:</p>
<blockquote>
<p>D-Bus API shouldn’t be just a mapping of your library</p>
</blockquote>
<p>You should use some time to think the proper D-Bus methods that you need. Another interesting thing was <a href="http://willthompson.co.uk/bustle/">Bustle</a>, a kind of D-Bus monitor that seems very interesting.</p>
<p>At the afternoon the GUADEC starts, and I’ve attended:</p>
<ul>
<li><a href="http://www.grancanariadesktopsummit.org/node/177">Introduction to the GNOME Shell</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/178">GNOME Zeitgeist</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/184">Sipping Mojitos and thinking RESTful thoughts</a></li>
<li><a href="http://www.grancanariadesktopsummit.org/node/185">State of Clutter</a></li>
</ul>
<p>It was interesting see the current status of <a href="http://live.gnome.org/GnomeShell">GNOME Shell</a>. The <a href="http://live.gnome.org/GnomeZeitgeist">GNOME Zeitgeist</a> talk reminded me some ideas of <a href="http://mytime.igalia.com">MyTime</a>. Finally, I had the chance to talk a bit with <a href="http://www.robster.org.uk/blog/">Rob Bradford</a> about <a href="http://moblin.org/projects/mojito">Mojito</a> project, a very interesting way to access social networks from the desktop.</p>
<p>BTW, Nokia’s party is waiting, see you there tonight ;-)</p>
GCDS Day 1 – Keynotes & Lighting Talks2009-07-04T00:00:00Zhttps://blogs.igalia.com/mrego/2009/07/04/gcds-day-1-keynotes-lighting-talks/<p>First day at <a href="http://www.grancanariadesktopsummit.org/">GCDS</a>. Briefly, four keynotes and a lot of lighting talks.
Among the keynotes, I liked the talk about <a href="http://wiki.sugarlabs.org/">Sugar</a> with some interesting concepts and examples, I should give it a try. On the other hand, Stallman remembered to the whole audience <a href="http://www.fsf.org/news/dont-depend-on-mono">his opinion about C#</a>. Finally, Quim Gil revealed the future of <a href="http://maemo.org/">Maemo</a> linked to <a href="http://www.qtsoftware.com/">Qt</a>.</p>
<p>BTW, first swim on the <a href="http://en.wikipedia.org/wiki/Las_Palmas_de_Gran_Canaria">Las Canteras</a> beach, now is time to go out to dinner ;-)</p>
GCDS Day 0 – Ready to learn2009-07-03T00:00:00Zhttps://blogs.igalia.com/mrego/2009/07/03/gcds-day-0-ready-to-learn/<p>Tonight, <a href="http://www.igalia.com">we</a> should be arriving to Las Palmas in order to attend <a href="http://www.grancanariadesktopsummit.org/">Gran Canaria Desktop Summit (GCDS)</a>.
This will be my GUADEC, and this is the first time that GUADEC and Akademy are organized together (a great idea in my opinion).</p>
<p>I hope to learn a lot during this fantastic event and meet a lot of interesting people. See you in Gran Canaria ;-)</p>
<p>BTW, I’ll be part of a talk given in the GUADEC-ES by all the <a href="http://www.mastersoftwarelibre.com/">Master on Libre Software</a> students. In this talk we’ll talk about our experience developing a GNOME application as a practice for the <a href="http://gsyc.escet.urjc.es/moodle/course/view.php?id=41">Development of Libre Software</a> subject.</p>
Forums in TYPO32009-01-20T00:00:00Zhttps://blogs.igalia.com/mrego/2009/01/20/forums-in-typo3/<p>As part of the <a href="https://forxa.mancomun.org/projects/mancomun/">Mancomún project</a> we need to use a forum with the next features:</p>
<ul>
<li>Anonymous users</li>
<li>Captcha prevention</li>
<li>RSS</li>
<li><a href="http://en.wikipedia.org/wiki/Bbcode">BBCode</a></li>
</ul>
<p>So I’ve been testing different <a href="http://typo3.org/extensions/repository/?tx_terfe_pi1%5Bview%5D=search&no_cache=1&tx_terfe_pi1%5Bsword%5D=forum">TYPO3 extensions</a>:</p>
<ul>
<li><a href="http://typo3.org/extensions/repository/view/mm_forum/current/"><code>mm_forum</code></a>: The most used and with <a href="http://forge.typo3.org/projects/show/extension-mm_forum">community</a> and recent activity. Only one problem <strong>not logged users can’t write posts</strong>.</li>
<li><a href="http://typo3.org/extensions/repository/view/chc_forum/current/"><code>chc_forum</code></a>: Not updated since 2006. <strong>Without Captcha prevention</strong>. RSS feed is added with <a href="http://typo3.org/extensions/repository/view/chc_forum_feed/current/">another extension</a>.</li>
<li><a href="http://typo3.org/extensions/repository/view/wec_discussion/current/"><code>wec_discussion</code></a>: An active extension, but with a forum system quite simple and <strong>without BBCode support</strong>.</li>
</ul>
<p>All of them miss some of the required features. After some tests I decided to use <code>chc_forum</code>, mainly because we’ve already used it in a <a href="http://www.bygalicia.eu">previous project</a> and <a href="http://typo3.org/extensions/repository/view/chc_forum_popup/current/">another extension</a> already provides Captcha prevention, but it’s not working properly.</p>
<p>I’d prefer to use <a href="http://typo3.org/extensions/repository/view/mm_forum/current/"><code>mm_forum</code></a> but it was more difficult to add the missed feature. I’ve added <a href="http://forge.typo3.org/issues/show/2459">a new issue</a> and I hope that this feature will be implemented in order to improve this great extension.</p>
<p>Finally, the result is:</p>
<ul>
<li><strong>A new TYPO3 extension <a href="http://typo3.org/extensions/repository/view/chc_forum_captcha/current/"><code>chc_forum_captcha</code></a></strong>, based on <a href="http://typo3.org/extensions/repository/view/chc_forum_popup/current/"><code>chc_forum_popup</code></a> source code, that adds Captcha prevention to <a href="http://typo3.org/extensions/repository/view/chc_forum/current/"><code>chc_forum</code></a>.</li>
<li>A <a href="http://pastebin.com/f303747b0">little patch</a> for <a href="http://typo3.org/extensions/repository/view/chc_forum_feed/current/"><code>chc_forum_feed</code></a>, because it was not detecting the website protocol (HTTP or HTTPS).</li>
</ul>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 09/01/21 04:26, **[Michael Cannon](http://www.acqal.com/typo3-support.html)** wrote:
<blockquote>
<p>Thank you for your TYPO3 contribution of captcha for chc_forum.</p>
<p>Have you other extensions?</p>
<p>On 09/01/21 09:44, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>Hello Michael,</p>
<p>yes we have more extensions published.</p>
<p>For example:</p>
<ul>
<li>gl_transstat: If you have a multilanguage website, I strongly recommend you to install this extension. It makes very easy create translations for pages and records. This extension is very useful.</li>
<li>gl_pages_cat: Allows to relate pages with tt_news categories and filter tt_news plugins depending on page categories.</li>
<li>tipafriend_captcha: Like chc_forum_captcha but for Tip-A-Friend extension.</li>
<li>accessible_ratings: It’s based on ratings extension, but this works without JavaScript.</li>
</ul>
<p>Thanks for your comment,<br>
Rego</p>
<p>On 09/01/29 08:54, <strong><a href="http://www.acqal.com/typo3-support.html">Michael Cannon</a></strong> wrote:</p>
<blockquote>
<p>I use accessible_ratings for Acqal Blogging. It works like a charm.</p>
<p>Is there documentation or lives samples f gl_pages_cat that you can share?</p>
<p>On 09/01/29 09:13, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>You can check the <a href="http://typo3.org/documentation/document-library/extension-manuals/gl_pages_cat/0.1.4/view/">extension manual</a> or the <a href="http://forge.typo3.org/wiki/extension-gl_pages_cat">wiki at TYPO3 Forge</a> (now they have the same contents).</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</div>
gl_pages_cat: Pages categorization in TYPO32009-01-13T00:00:00Zhttps://blogs.igalia.com/mrego/2009/01/13/gl_pages_cat-pages-categorization-in-typo3/<p><a href="http://typo3.org/extensions/repository/view/gl_pages_cat/current/"><code>gl_pages_cat</code></a> is a <a href="http://typo3.org/">TYPO3</a> extension that allows to relate TYPO3 pages with categories from <code>tt_news_cat</code> table. In that way, you’ll only have <strong>a category tree common for the whole website</strong>, pages and news are going to share the same categories.
At the beginning this extension just provided a method that returns the news related with the categories of the current page. It was enough for me, because of I was doing news lists from <a href="http://formidable.typo3.ug/">Formidable</a>.</p>
<p>But now, it also provides <a href="http://typo3.org/documentation/document-library/extension-manuals/gl_pages_cat/0.1.4/view/1/4/#id4149553">a new method</a> that returns the categories of the current page. With this method, for example, you can assign some categories to a page and, then, configure properly <code>tt_news</code> plugins to show only news related with the categories of that page. You could do something like that with <a href="http://typo3.org/documentation/document-library/extension-manuals/gl_pages_cat/0.1.4/view/1/2/#id2490985">the next TypoScript code</a>:</p>
<pre>
includeLibs.user_pages_cat = EXT:gl_pages_cat/class.tx_glpagescat_div.php
lib.page.category = USER
lib.page.category.preUserFunc = tx_glpagescat_div->getPageCategories
plugin.tt_news.categorySelection < lib.page.category
plugin.tt_news.categoryMode = 1
</pre>
<p>I’m very grateful to Daniel Huf for having tested my extension and having given me his feedback (this TypoScript configuration). Thanks to this, the extension has improved and, from my point of view, now it’s very useful combined with <code>tt_news</code> plugins.</p>
<p>For example, if you have a categorized TYPO3 website, once you have everything configured properly, you could change the news displayed on a page simply by changing the categories of the page.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 09/02/11 13:27, **[Daniel](http://www.cross-agency.ch/)** wrote:
<blockquote>
<p>Thanks a lot for your work and help.</p>
</blockquote>
<p>On 10/03/27 23:29, <strong><a href="http://www.netdip.com/">Jacob Seiner</a></strong> wrote:</p>
<blockquote>
<p>Hi, I installed gl_pages_cat and noticed that the category tree was not showing in the flexform.</p>
<p>I am using tt_news version 3.0.1 and to make the category tree show up when editing page properties, I changed one line in the ext_tables.php file of the gl_pages_cat extension.</p>
<p>I changed the following line:</p>
<p>‘userFunc’ => ‘tx_ttnews_treeview->displayCategoryTree’,</p>
<p>to:</p>
<p>‘userFunc’ => ‘tx_ttnews_TCAform_selectTree->renderCategoryFields’,</p>
<p>After doing that, the category tree showed up in the page flexforms and I was able to associate tt_news categories to my regular pages.</p>
<p>I’m looking forward to playing around more with your gl_pages_cat extension.</p>
<p>On 10/07/28 09:44, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>I’ve just fixed the issue with tt_news 3.0.1. And released a new version 0.1.5 that will be available soon at TER.</p>
<p>Thanks for reporting.</p>
</blockquote>
</blockquote>
</div>
Latest TYPO3 stuff2008-12-31T00:00:00Zhttps://blogs.igalia.com/mrego/2008/12/31/latest-typo3-stuff/<p>Lately I’ve been quite busy (I’m doing a <a href="http://mastersoftwarelibre.com/">Master on Free Software</a>) and I didn’t have time to write any post, actually I missed the chance to do it sometimes. So, before the year ends, I should write my last post and here it goes.
This month I’ve published 2 new TYPO3 extensions:</p>
<ul>
<li><a href="http://typo3.org/extensions/repository/view/gl_pages_cat/current/">Pages categorization</a>: It adds the possibility to relate pages with <a href="http://typo3.org/extensions/repository/view/tt_news/current/">tt_news</a> categories. This is very useful in some cases, because of you can have a plugin that shows news in pages with different categories, and the list of news will be different on each page. This extension also provides a function to get the news with the same categories than the current page.</li>
<li><a href="http://typo3.org/extensions/repository/view/accessible_ratings/current/">Accessible Ratings</a>: This extension provides a plugin, which makes that <a href="http://typo3.org/extensions/repository/view/ratings/current/">Ratings</a> extension works without JavaScript.</li>
</ul>
<p>On the other hand, I found a page with the <a href="http://wiki.typo3.org/index.php/Formidable_reference">Formidable reference</a>, it’s not complete but it’s updated to the last version. Furthermore, I’ve done some contributions to <a href="http://formidable.typo3.ug/">Formidable</a> extension between November and December:</p>
<ul>
<li>Improved the <code>datasource:DB</code>: Now it has new properties <code>fields</code>, <code>table</code> and <code>wheres</code>. Whit this change is very easy to define queries from the XML.</li>
<li>Added a new property <code>meta/formwrap</code>: It removes the HTML <code>form</code> tag when you use Formidable just to show information (lists, detail, …)</li>
<li>New wizard icons for Formidable plugins.</li>
</ul>
<p>All of this things come from my work in the <a href="https://forxa.mancomun.org/projects/mancomun/">Mancomún project</a>, a TYPO3 project that we’re doing right now. You can check the current status of the project at <a href="https://forxa.mancomun.org/plugins/scmsvn/viewcvs.php/trunk/?root=mancomun">SVN repository</a>.</p>
<p>By the way, <a href="http://blogs.igalia.com/mrego/2008/12/31/how-to-write-a-manual-for-a-gnome-application-with-docbook/">I’ve been testing DocBook</a> and I like it to make slides, I should play more with it in the future.</p>
MyTime Demo2008-11-12T00:00:00Zhttps://blogs.igalia.com/mrego/2008/11/12/mytime-demo/<p>We’ve launched a <strong><a href="http://sourceforge.net/project/showfiles.php?group_id=229352&package_id=277852&release_id=639948">new release of MyTime</a></strong>.
The main mew features are:</p>
<ul>
<li><strong>Idle time is caught</strong>: In this version if you’re inactive during more than 5 minutes this inactivity time isn’t assigned to any and it’s stored as <code>IDLE</code>.</li>
<li><strong>GTK-Doc reference</strong>: Now source code it’s properly commented to generate the reference using <a href="http://www.gtk.org/gtk-doc/">GKT-Doc</a>.</li>
</ul>
<p>Furthermore we’ve recorded a <strong>demonstration video</strong> that you can download at <a href="http://community.igalia.com/twiki/bin/view/MyTime/WebDemo">MyTime homepage</a>.</p>
T3CON08: Last Day2008-10-12T22:00:00Zhttps://blogs.igalia.com/mrego/2008/10/12/t3con08-last-day/<p>Yesterday was the last day of the conference and after the party the day before people were quite tired.
I decided to go to the next talks:</p>
<ul>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=43&cHash=624d57138d">Hitchhiker’s Guide to TYPO3 v5</a>: This was a talk to <strong>summarize the work done during the last year on FLOW3 and TYPO3 v5 projects</strong>. There were some things repeated from the tutorial and he mainly talked about persistence and REST services, every operation that could be done in TYPO3 backend will use web services. A good presentation with videos and so on, I liked it.</li>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=20&cHash=1d78a135c2">Continuous Integration for FLOW3</a>: A good talk about <a href="http://en.wikipedia.org/wiki/Continuous_integration">Continuous Integration</a> in <a href="http://typo3.org">TYPO3</a>, it works really nice perfectly <strong>integrated on <a href="http://forge.typo3.org">TYPO3 forge</a> running all tests in 3 platforms (Mac, Linux and Windows)</strong>. It uses <a href="http://www.hudson.com/">Hudson</a>, and he explained about how to use it for particular projects.</li>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=6&cHash=02067a232f">Intelligent web forms</a>: As a <a href="http://formidable.typo3.ug/">Formidable</a> collaborator I can miss the only talk about forms in the conference. They talked about the <a href="http://typo3.org/extensions/repository/view/dre_formmaker/current/">extension FormMaker</a> that allows to manage forms from backend. Something interesting is that it allows to define some steps in a form, dividing it in several pages defining a <strong>workflow</strong>; they manage it with sessions and it has a drawback because you couldn’t have two forms with different data in two browser tabs. It seems a very powerful extension, maybe quite complex in the beginning but I should test it to give my opinion about it.</li>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=24&cHash=6a68faba17">Transparent Object Persistence with FLOW3</a>: <a href="http://www.k-fish.de/">Karsten</a> started talking about <a href="http://en.wikipedia.org/wiki/Domain-driven_design">DDD (Domain Driven Design)</a> and explain the different concepts of that approach: <strong>repository, aggregate, entity and value</strong>. This is the base of FLOW3 persistence framework that defines a <a href="http://forge.typo3.org/projects/show/package-typo3cr">Content Repository</a> in which objects are stored automatically. A good point of this repository is that you <strong>can mount a relation data base and use it as an object</strong> with the API of the repository. There is a tool called TYPO3 CR Admin quite useful to see the stored date.</li>
</ul>
<p>Finally I didn’t attend to the Best paper award event because the “Spanish” people (<a href="http://www.nivel7.net/">Nivel Siete</a>, <a href="http://www.icti.es/">ICTI</a> and <a href="http://www.igalia.com/">Igalia</a> people) went for a walk to get an overview of <a href="http://en.wikipedia.org/wiki/Berlin">Berlin</a>. We took the underground till <a href="http://en.wikipedia.org/wiki/Alexanderplatz">Alexander Platz</a> and we returned walking to the hotel seeing a lot of monuments.</p>
<p>In this <a href="http://t3con08.typo3.org">TYPO3 conference</a> I tried to catch as much information as possible about FLOW3 and TYPO3 v5 and these talks refreshing my concepts about <a href="http://en.wikipedia.org/wiki/Software_Engineering">Software Engineering</a> (AOP, DDD, TDD, …). Furthermore they recommend a lot of books about Software Engineering you can see the <a href="http://flow3.typo3.org/about/principles/further-reading/">further reading section at FLOW3 website</a>. My conclusion about these projects could be that there’re a lot of things to do and one of them is improve the performance, if they get it FLOW3 will be a great framework and TYPO3 will have a great source code.</p>
<p>Congratulations to the organization of this great conference and also to Igalia for let me live that great experience.</p>
T3CON08: Second Day2008-10-12T08:00:00Zhttps://blogs.igalia.com/mrego/2008/10/12/t3con08-second-day/<p>This are my feelings the second day of the <a href="http://t3con08.typo3.org">T3CON08</a> (<a href="http://t3con08.typo3.org/presentations/schedule_70.html#c154">October 10th Friday</a>), actually it was the first conference day, because the previous day there were only tutorials.
The day started with the <a href="http://typo3.org/community/people/kaspers-korner/">Keynote by Kasper</a>, it was shorter than I expected but quite amusing. The next year will be a TYPO3 Conference in Dallas (USA) but it should not replace to the conference in Europe, it means that TYPO3 community is growing and it’s good.</p>
<p>After the Keynote I went to the next talks:</p>
<ul>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=23&cHash=bb737f8131">DEV3 – TYPO3 Enterprise Development</a>: <a href="http://www.dev3.org/">DEV3</a> is an <a href="http://www.eclipse.org/">Eclipse</a> plugin to work with <a href="http://typo3.org/">TYPO3 4</a>, <a href="http://flow3.org/">FLOW3</a> and <a href="http://typo3.org/">TYPO3 5</a>. It has a <strong>TeplateView</strong> that allows to users to <strong>modify TypoScript from Eclipse</strong>, users can edit constants and setup sections, moreover it has syntax highlighting, syntax checking, auto-completion, … for TYPO3, FLOW3 and TypoScript (<em>mental note: “I have to test this plugin”</em>).</li>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=19&cHash=fc4ccfb1e5">CSC2: Bringing CSS Styled Content to the next level</a>: This was a talk about <a href="http://www.w3.org/Style/CSS/">CSS</a>, but it was very general and I don’t like it so much, maybe because I don’t usually have to fight with CSS or because I already knew the most of the things that she said.</li>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=30&cHash=73a9252f89">OpenEMM – Sending out Newsletters with TYPO3</a>: An extension to send newsletters that integrates <a href="http://www.openemm.org/">OpenEMM</a> into TYPO3 backend. For that extension you need OpenEMM, an open source Java application, and it doesn’t provide anything special compared with <a href="http://typo3.org/extensions/repository/view/tcdirectmail/current/">TC Directmail (<code>tc_directmail</code>)</a>, so if <code>tc_directmail</code> doesn’t fits your requirements maybe this new extension could do it.</li>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=4&cHash=b3603128a1">Business Case – Marketing Open Source Software</a>: Another quite general talk about marketing in open source companies, he recommended a book “<em><a href="http://www.amazon.com/Cluetrain-Manifesto-End-Business-Usual/dp/0738204315/ref=sr_1_1?ie=UTF8&s=books&qid=1223842853&sr=8-1">The Cluetrain Manifesto</a></em>” and talk about that in open source companies there’re 4 C’s, the common 3 C’s of marketing (Corporation, Customers and Competitors) and <strong>Community</strong>.</li>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=7&cHash=e60db5cf6c">Touchless Security with FLOW3</a>: An explanation about how the security framework works in <a href="http://www.flow3.org">FLOW3</a>. It uses <a href="http://en.wikipedia.org/wiki/Aspect-oriented_programming">AOP (Aspect Oriented Programming)</a> to can intercept every method that is going to be executed and through <a href="http://en.wikipedia.org/wiki/Access_control_list">ACLs (Access Control Lists)</a> the framework allows or denies the execution of any method. The most important here is that you don’t have to take care about security in your code, only have to define a concrete ACL and <strong>never modify your code</strong>.</li>
<li><a href="http://t3con08.typo3.org/presentations/accepted_talks.html?tx_ptconference_pi4%5BshowUid%5D=25&cHash=0a54e410f6">Test Driven Development using FLOW3</a>: He explained the concept of <a href="http://en.wikipedia.org/wiki/Test_Driven_Development">Test Driven Development</a> in which you have to <strong>write tests for all your code and before write your code</strong>, in that way you define the APIs before write it. FLOW3 has a <a href="http://forge.typo3.org/projects/show/package-testing">Testing package</a> based on <a href="http://www.phpunit.de/">PHPUnit</a> that make easy write unit tests. I think that it’s a very interesting idea about how to develop an application. <a href="http://www.k-fish.de/">Karsten</a> also talked about <a href="http://www.agiledata.org/essays/tdd.html">Test Driven Design</a>, because some time you are doing design while you write your tests.</li>
</ul>
<p>That day was a long day because of the conference dinner and the party after that. Not a very good day talking about the talks but a good social day.</p>
T3CON08: First Day2008-10-09T00:00:00Zhttps://blogs.igalia.com/mrego/2008/10/09/t3con08-first-day/<p>Hello from Berlin ;-).
I’m in the <a href="http://t3con08.typo3.org/">TYPO3 Conference</a>, today I’ve attended two tutorials: <a href="http://t3con08.typo3.org/presentations/accepted_tutorials.html?tx_ptconference_pi4%5BshowUid%5D=44&cHash=9942134bf7">development with FLOW3</a> and a <a href="http://t3con08.typo3.org/presentations/accepted_tutorials.html?tx_ptconference_pi4%5BshowUid%5D=14&cHash=d885657a77">workshop for creating TYPO3 websites</a>.</p>
<p><a href="http://www.robertlemke.de/">Robert Lemke</a> was the author of the first tutorial, it showed a mixing of <a href="http://typo3.org/podcasts/robert/">his podcasts about FLOW3</a>. The great new was that <strong>there is already implemented a complete blog system like <a href="http://buzz.typo3.org/">buzz.typo3.org</a> with FLOW3 using the content repository</strong> as persistence mechanism (quite interesting see that actually some stuff works). However the main problem is still performance (Robert said that it shouldn’t be difficult to fix) but the development context is currently very slow. Some brief comments about this tutorial:</p>
<ul>
<li>Classes define actions, methods that are going to be called from outside.</li>
<li>All objects are single instantiations (<a href="http://en.wikipedia.org/wiki/Singleton_pattern">Singleton Pattern</a>) if you don’t mark them as prototype.</li>
<li>If you depends on another class you should use <a href="http://en.wikipedia.org/wiki/Dependency_injection">Dependency Injection</a> defining a method that is going to be called automatically when the class is instantiated.</li>
<li>He gave an overview about <a href="http://en.wikipedia.org/wiki/Domain-driven_design">Domain Driven Design</a>, in a roughly way we can talk about 3 concepts: entities (objects), values (immutable objects) and aggregates (entities that are going to be searched).</li>
<li>Talking about persistence we need a repository for each aggregate, if we extend the basic repository we’ll have common methods to add, remove, find, … (other entities will be stored transparently). The content repository need that the type of class attributes is specified through comments.</li>
<li>Finally he talked about <a href="http://en.wikipedia.org/wiki/REST">REST</a> services, and all repositories are going to be services that will be called automatically to the concrete method depending if there is or not some GET parameter or if there is some POST parameter.</li>
</ul>
<p>The second tutorial was a workshop from <a href="http://jweiland.net/">jweiland.net</a>, they gave some useful receipts that can be applied in any TYPO3 projects. They talked about a <strong>tool to clean TYPO3 installations</strong>, it seems very useful because in big projects usually you don’t know how file you need or not in your filesystem, they don’t say the name of the tool but I can guess that it’s the <code>cli_dispatch.phpsh</code> script (<a href="http://typofree.org/article/archive/2008/june/title/typo3-housekeeping/">more info</a>) I have to test it!. Other comments:</p>
<ul>
<li>Use <a href="http://en.wikipedia.org/wiki/Utf-8">UTF-8</a> for the database from the beginning (it’s always good to remember).</li>
<li>For TypoScript they recommend to create a library in a system folder that could be used in other projects (exporting/importing), these TypoScript templates will be used with Basic Templates and defining constants.</li>
<li>Moreover it’s possible to detect syntax errors in TypoScript using the Object Browser and the Template Analyzer.</li>
</ul>
<p>I’ve enjoyed this first day so I’m going to rest to be prepared for tomorrow.</p>
<p>PS: I’ve met some people from Colombia (<a href="http://www.nivel7.net/">Nivel Siete</a>) and we’ve been talking Spanish in Berlin :-).</p>
MyTime 0.2 – Remote storage2008-10-03T00:00:00Zhttps://blogs.igalia.com/mrego/2008/10/03/mytime-02-remote-storage/<p>We’ve just released the <a href="https://sourceforge.net/project/showfiles.php?group_id=229352&package_id=277852&release_id=630381">new version of MyTime</a> the main new feature is that now the information about applications use registered by MyTime is stored remotely, so you can use MyTime in different computers and share the same data.
If you want to use this new feature you’ll need an account at <a href="http://www.box.net">Box.net</a>, a web service that allows users to store files online, and set this account at MyTime preferences.</p>
<p>Moreover MyTime 0.2 is integrated with <a href="http://live.gnome.org/OnlineDesktop">Online Desktop</a> because it’s using the Online Desktop account system to store the <a href="http://Box.net">Box.net</a> account. We’ve developed a library (<a href="http://mytime.svn.sourceforge.net/viewvc/mytime/trunk/libmytime-common/"><code>libmytime-common</code></a>) that has the responsibility to manage the account data depending on if there’s an Online Desktop session, when it uses the Online Desktop account system, or not, then it uses the <a href="http://live.gnome.org/GnomeKeyring">GNOME Keyring</a>.</p>
<p>Feel free to test this new release, we’ll be glad if you give us your feedback.</p>
<p>PS: <a href="http://linux.softpedia.com/get/Desktop-Environment/Tools/MyTime-41357.shtml">MyTime is on Softpedia</a>.</p>
MyTime 0.12008-09-17T00:00:00Zhttps://blogs.igalia.com/mrego/2008/09/17/mytime-01/<p>Today we’ve published the first release of this project <strong>MyTime 0.1</strong>. <a href="http://blogs.igalia.com/mrego/2008/05/30/mytime-free-software-to-improve-time-management/">As you already know</a> MyTime shows information about which applications you have been used on your computer.
You can <a href="http://community.igalia.com/twiki/bin/view/MyTime/ProjectDownloadStable"><strong>download</strong> the Debian packages</a> to test it, any comment or suggestion will be welcomed.</p>
<p>In future releases we’re going to add support to store information recorded by MyTime on a Web Service, in order to can query this information from any computer. Moreover we’ll try to use <a href="http://live.gnome.org/OnlineDesktop">Online Desktop</a> to store the data needed to login at Web Service.</p>
<p>You can read more information about this project at <a href="http://mytime.igalia.com">MyTime home page</a> and return your feedback using different resources (<a href="http://sourceforge.net/mail/?group_id=229352">mailing lists</a>, <a href="http://sourceforge.net/forum/?group_id=229352">forums</a>, <a href="http://sourceforge.net/tracker/?group_id=229352">tracker</a>, …) at <a href="http://sourceforge.net/projects/mytime/">SourceForge.net page</a>.</p>
<p>We hope you enjoy this application and find it useful ;-).</p>
<p>PS: MyTime is now translated to Spanish and Galician.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 08/09/17 18:13, **[txenoo](http://blogs.igalia.com/chema/)** wrote:
<blockquote>
<p>Nice work guys :)</p>
</blockquote>
</div>
gl_transstat: translate pages and records in an easy way on TYPO32008-06-20T00:00:00Zhttps://blogs.igalia.com/mrego/2008/06/20/gl_transstat-translate-pages-and-records-in-an-easy-way-on-typo3/<p><a href="http://typo3.org/extensions/repository/view/gl_transstat/current/" title="Translation Status (gl_transstat)">gl_transstat</a> is a great <a href="http://typo3.org/extensions/" title="TYPO3 Extensions Repository">TYPO3 extension</a> developed by my workmate <a href="http://blogs.igalia.com/dpino/" title="Diego's blog">Diego</a> that allows create translations of pages and records on <a href="http://typo3.org">TYPO3</a> very easily and keep track of translation status of them.
This extension is very useful for multilanguage websites improving work efficiency in tasks related with internationalization and localization.</p>
<p>Last days I’ve been working on this extension, and I’ve done some changes to add new features that make this extension more powerful. The main modifications are:</p>
<ul>
<li>Added the possibility to create translations for more than one page or record at the same time.</li>
<li>Support to translate records of any table.</li>
<li>Use generic configuration variables.</li>
</ul>
<p><img src="https://blogs.igalia.com/mrego/files/2008/06/gl_transstat_screenshot.png" alt="gl_transstat screenshot on TYPO3 4.2"></p>
<p>You can download the last release 1.2.2 directly from <a href="http://typo3.org/extensions/repository/view/gl_transstat/current/" title="Translation Status (gl_transstat)">TER</a> or if you like you can download the source code from the <a href="https://forxa.mancomun.org/scm/?group_id=65" title="gl_transstat's SVN">SVN repository</a>:<br>
<code>svn checkout https://forxa.mancomun.org/svn/gltransstat</code></p>
MyTime: free software to improve time management2008-05-30T00:00:00Zhttps://blogs.igalia.com/mrego/2008/05/30/mytime-free-software-to-improve-time-management/<p>This week we’ve released <a href="http://community.igalia.com/twiki/bin/view/MyTime/" title="MyTime home page">MyTime project</a>, this project try to be a system to monitoring your time while you’re using a computer, providing a graphical user interface that generates different kind of charts with information about what applications you use in your computer.
Moreover in the following phases we’re going to try to integrate this project with <a href="http://live.gnome.org/OnlineDesktop" title="Online Desktop home page">Online Desktop</a> trying to store information about application use remotely so that you can query information about your time everywhere.</p>
<p>The project is been developed by some people from <a href="http://www.igalia.com/engineering/" title="title">Igalia engineering group</a>: <a href="http://blogs.igalia.com/aalvarez/" title="Antonio's blog">Antonio</a>, <a href="http://blogs.igalia.com/dpino/" title="Diego's blog">Diego</a>, <a href="http://blogs.igalia.com/eocanha/" title="Quique's blog">Quique</a>, Iván, <a href="http://blogs.igalia.com/chema/" title="Chema's blog">Chema</a>, <a href="http://blogs.igalia.com/ltilve/" title="Loren's blog">Loren</a>, <a href="http://blogs.igalia.com/xavi/" title="Xavi's blog">Xavi</a> and me.</p>
<p>Among other technologies MyTime uses:</p>
<ul>
<li><a href="https://blogs.igalia.com/mrego/2008/05/30/mytime-free-software-to-improve-time-management/www.gtk.org" title="GTK+ home page">GTK+</a> and <a href="http://glade.gnome.org/" title="Glade home page">Glade</a> for the graphical interface.</li>
<li><a href="http://library.gnome.org/devel/gobject/stable/" title="GObject Reference Manual">GObject</a> for data server and model logic implementation.</li>
<li><a href="http://www.freedesktop.org/wiki/Software/dbus" title="D-Bus home page">D-Bus</a> usage for communication between components.</li>
<li><a href="http://www.sqlite.org/" title="SQLite home page">SQLite</a> database system for local data management.</li>
</ul>
<p>You can read more information about the project in <a href="http://community.igalia.com/twiki/bin/view/MyTime/" title="MyTime home page">its home page</a> at <a href="http://community.igalia.com/twiki/bin/view" title="community.igalia.com">Igalia community</a>. Furthermore the project has its own <a href="http://sourceforge.net/projects/mytime/" title="MyTime page at SourceForge.net">page at SourceForge.net</a> where you can find mailing lists, forums, and SVN repository of the project.</p>
<p>There’re a lot of things todo, however feel free to test <a href="http://community.igalia.com/twiki/bin/view/MyTime/" title="MyTime home page">MyTime</a> and give us your feedback, we’ll be very happy. :-)</p>
<p>We’ll keep you informed of news in this project.</p>
<p><img src="https://blogs.igalia.com/mrego/files/2008/05/screenshot-mytime-split-pie.png" alt="MyTime Screenshot"></p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 08/05/30 17:59, **Sergio** wrote:
<blockquote>
<p>Amazing!</p>
</blockquote>
<p>On 08/07/23 07:45, <strong><a href="http://www.allcontent.com/">Jan</a></strong> wrote:</p>
<blockquote>
<p>Cool! This is what I need in monitoring my time spent and very appropriate in my business since I’m into online. And look at that it’s for free.</p>
<p>Thanks for sharing mate.</p>
</blockquote>
<p>On 09/02/25 02:48, <strong><a href="http://www.wowgold.net/">wow_gold</a></strong> wrote:</p>
<blockquote>
<p>Nice Post – adding this to RSS now ^^ About your design, which theme is being used at the moment? I know someone who would to know if it’s a free one.</p>
<p>On 09/02/25 17:27, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>The theme that I’m currently using is <a href="http://www.lamateporunyogur.net/pool/#english">Pool</a> and it’s GPL.</p>
</blockquote>
</blockquote>
<p>On 09/09/15 10:36, <strong><a href="http://colorhat.com/">Tobi</a></strong> wrote:</p>
<blockquote>
<p>Can you guys give me a feedback about <a href="http://colorhat.com">http://colorhat.com</a> ?</p>
<p>On 09/09/18 09:17, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>It’s more similar to PHPReport than MyTime. You can test it: <a href="http://community.igalia.com/twiki/bin/view/PhpReport/ProjectDownloadStable">http://community.igalia.com/twiki/bin/view/PhpReport/ProjectDownloadStable</a></p>
</blockquote>
</blockquote>
</div>
FORMidable: Starting Collaboration2008-04-30T00:00:00Zhttps://blogs.igalia.com/mrego/2008/04/30/formidable-starting-collaboration/<p>This week I’ve started my collaboration with <a href="http://formidable.typo3.ug/" title="TYPO3 FORMidable - Rapid Application Development Framework for TYPO3">FORMidable</a>, a <a href="http://typo3.org" title="TYPO3">TYPO3</a> extension.
If you develop TYPO3 extensions, specially frontend forms, you should test the extension called <strong><a href="http://typo3.org/extensions/repository/view/ameos_formidable/current/">Ameos FORMidable (<code>ameos_formidable</code>)</a></strong>, with this extension you can develop TYPO3 extensions very fast. After more than one year developing TYPO3 applications, I think that FORMidable is an essential TYPO3 extension; I’ve fallen in love with it. ;-)</p>
<p>Furthermore FORMidable actually is a free software project, at <a href="http://formidable.typo3.ug/" title="TYPO3 Formidable - Rapid Application Development Framework for TYPO3">project’s homepage</a> there’re links to <a href="http://wiki.typo3.org/index.php/Formidable_documentation" title="FORMidable Documentation">documentation</a>, <a href="http://sourceforge.net/projects/formidable/" title="FORMidable SVN">SVN</a>, a lot of examples, and <a href="http://lists.netfielders.de/pipermail/typo3-project-formidable/" title="FORMIdable Mailing List">mailing list</a>. In this list you can ask, suggest, send patches, etc. and somebody from FORMidable community is going to try to help you, besides <a href="http://www.ameos.com/" title="FORMIdable authors">FORMidable authors</a> accept patches to improve FORMidable or fix some bugs; I’ve sent several patches and they’ve added my modifications to project.</p>
<p>This post has only the purpose to announce that I’ve published <a href="http://formidable.typo3.ug/typo3-form-news/news/0026-forms-inside-a-renderlet-lister/start/1209564124/back/2.html" title="Forms inside a Renderlet Lister">my first article</a> at <a href="http://formidable.typo3.ug/" title="FORMidable web page">FORMidable web page</a>.</p>
<p>Finally I’d like to thank to FORMidable development team, specially to Jerome Schneider, for give me the opportunity to collaborate in this great project and for accept my ideas and patches trying to improve FORMidable.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 08/04/30 16:40, **[Luc](http://lucmuller.free.fr/blog/)** wrote:
<blockquote>
<p>Well, thank you to you, for having spent time to learn formidable, and giving back to us.</p>
<p>We’re glad to see that formidable is interesting people…</p>
<p>by the way it’s logical to implement the patches that are well made into the core.</p>
<p>I think your last patch that enable the possibility to edit data in the lister is going to be one of the keystone of formidable.</p>
<p>It’s a real big improvement to act on data in FE plugins.</p>
<p>thanks a lot :)</p>
</blockquote>
</div>
Testing Online Desktop on Hardy Heron: Quick Guide2008-04-28T00:00:00Zhttps://blogs.igalia.com/mrego/2008/04/28/compile-online-desktop-on-hardy-heron-quick-guide/<p>I’ve been testing <a href="http://live.gnome.org/OnlineDesktop" title="GNOME Online Desktop project homepage">Online Desktop</a> the last days on an Ubuntu distribution.
I’ve followed the instructions from <a href="http://live.gnome.org/OnlineDesktop/Jhbuild" title="OnlineDesktop/Jhbuild instructions">OnlineDesktop/Jhbuild</a>, but with these instructions you need to compile 101 modules, it’s quite slow, moreover you can find some problems in different modules that aren’t stables. I need to upgrade to Hardy Heron 8.04 to can finish my compilation.</p>
<p>However, thanks to <a href="http://blogs.igalia.com/dape/" title="Dape's blog">Dape</a>, I’ve found another solution to test Online Desktop faster only compiling 6 modules: <tt>hippo-canvas</tt>, <tt>local-export-daemon</tt>, <tt>desktop-data-model</tt>, <tt>online-desktop</tt>, <tt>bigboard</tt> and <tt>mugshot-client</tt>.
Maybe this isn’t the best way to test Online Desktop, but it’s very quickly for a simple test.</p>
<p>Next I’m going to relate instructions needed to test Online Desktop on an Ubuntu Hardy Heron distribution.</p>
<!--more-->
<p>First at all I have to say you that you should use a new user to compile Online Desktop. I usually use <tt>sux</tt> when I’m compiling:</p>
<pre>
sux - newuser
</pre>
<p>Furthermore we should install dependencies before start to compile to avoid future problems. Dependencies from <a href="http://live.gnome.org/JhbuildDependencies/Ubuntu" title="Ubuntu Jhbuild dependencies">Ubuntu Jhbuild dependencies</a>:</p>
<pre>
sudo apt-get install gnome-common build-essential doxygen subversion automake1.4 automake1.7 automake1.8 cvs git-core docbook docbook-utils docbook-xsl flex bison texinfo python2.5-dev lynx mono-gmcs libtiff4-dev libxtst-dev libgdbm-dev libxml-simple-perl libelfg0-dev libcupsys2-dev libldap2-dev libexchange-storage1.2-dev libxmu-dev libpam0g-dev libgpgme11-dev libfreetype6-dev libpng12-dev libxrender-dev libxi-dev libexpat1-dev libbz2-dev firefox-dev libxcursor-dev guile-1.8-dev libxdamage-dev libxcomposite-dev libmono-cairo2.0-cil xnest libxft-dev libloudmouth1-0 libloudmouth1-dev libxss-dev libxkbfile-dev libjasper-dev libnl-dev ppp-dev libdv4-dev uuid-dev libpcre3-dev libsqlite3-dev libpurple-dev libcurl4-gnutls-dev xulrunner-1.9-dev gtk-doc-tools libgnome-desktop-dev automake
</pre>
<p>And some new packages, because we’re going to compile a few modules and need some packages:</p>
<pre>
sudo apt-get install python-cairo-dev python-gtk2-dev libhippocanvas-dev python-hippocanvas libgtk2.0-dev python-gtk2-dev libpanelappletmm-2.6-dev libpanel-applet2-dev libsoup2.4-dev python-gnome2-dev libcroco3-dev
</pre>
<p>Firstly you need to install <a href="http://live.gnome.org/OnlineDesktop/Jhbuild">Jhbuild</a>, I paste here instructions from <a href="http://live.gnome.org/OnlineDesktop/Jhbuild" title="OnlineDesktop/Jhbuild instructions">OnlineDesktop/Jhbuild</a>. First create a folder <tt>od</tt> and the structure needed:</p>
<pre>
mkdir ~/od
cd ~/od
mkdir checkout
mkdir install
mkdir -p install/var/lib/dbus
ln -s /var/lib/dbus/machine-id install/var/lib/dbus
</pre>
<p>Now get and install <a href="http://live.gnome.org/OnlineDesktop/Jhbuild">Jhbuild</a>:</p>
<pre>
cd ~/od
svn co http://svn.gnome.org/svn/jhbuild/trunk jhbuild
cd jhbuild
./autogen.sh ; make ; make install
</pre>
<p>At this moment we need a file <tt>~/.jhbuildrc</tt> with the next content:</p>
<pre># -*- mode: python -*-
# if you have a GNOME svn account, uncomment this line
#repos['svn.gnome.org'] = 'svn+ssh://user@svn.gnome.org/svn/'
moduleset = 'online-desktop'
modules = [ 'meta-online-desktop' ]
# This will take a long time, and conflicts with the jhbuild cairo
skip = ['mozilla']
# what directory should the source be checked out to?
checkoutroot = os.path.expanduser('~/od/checkout')
# the prefix to configure/install modules to (must have write access)
prefix = os.path.expanduser('~/od/install')
# Use system libraries for the builds
addpath('PKG_CONFIG_PATH', os.path.join(os.sep, 'usr', 'lib', 'pkgconfig'))
addpath('PKG_CONFIG_PATH', os.path.join(os.sep, 'usr', 'share', 'pkgconfig'))
# Look in /usr/share for icons, D-BUS service files, etc
addpath('XDG_DATA_DIRS', '/usr/share')
# Look in /etc/xdg for system-global autostart files
addpath('XDG_CONFIG_DIRS', '/etc/xdg')
# We need to add the gtk-2.0 directory explicitly to the Python path since '.pth'
# files (here pygtk.pth) only work properly in system directories
import re, sys
python_version = sys.version.split()[0]
python_version = re.sub(r"^(d+.d+).d+$", r"1", python_version)
lib_packages = os.path.join(prefix, 'lib', 'python' + python_version, 'site-packages')
lib64_packages = os.path.join(prefix, 'lib64', 'python' + python_version, 'site-packages')
if lib64_packages in sys.path:
addpath('PYTHONPATH', os.path.join(lib64_packages, 'gtk-2.0'))
else:
addpath('PYTHONPATH', os.path.join(lib_packages, 'gtk-2.0'))
# Rebuild faster
os.environ['INSTALL'] = os.path.expanduser('~/bin/install-check')
# Use the standard system bus
os.environ['DBUS_SYSTEM_BUS_ADDRESS'] = 'unix:path=/var/run/dbus/system_bus_socket'
os.environ['UNDER_JHBUILD'] = 'true'
# Flags needed to 'pyorbit'
os.environ['CFLAGS'] = '-lz'
# Params for mugshot-client
module_autogenargs['mugshot-client'] = autogenargs + ' --with-gecko-sdk=/usr/lib/xulrunner/sdk/ --with-gecko-idl=/usr/lib/xulrunner/sdk/idl/'
</pre>
<p>You have to check which <tt>jhbuild</tt> you’re going to execute, you have to use <tt>~/bin/jhbuild</tt>.</p>
<p>Before to compile the modules we need to do:</p>
<pre>
jhbuild -m bootstrap buildone waf
</pre>
<p>Then we are going to compile these few modules:</p>
<pre>
jhbuild buildone -a hippo-canvas local-export-daemon desktop-data-model online-desktop bigboard mugshot-client
</pre>
<p>To test an Online Desktop session we have to create a file <tt>/usr/local/bin/run-online-desktop</tt> with the next content:</p>
<pre>if [ -x $HOME/bin/jhbuild ] ; then
exec $HOME/bin/jhbuild run dbus-launch --exit-with-session od-session
else
zenity --error --text="No JHBuild session found for user $USER"
exit 1
fi
</pre>
<p>And make it executable:</p>
<pre>
chmod a+x /usr/local/bin/run-online-desktop
</pre>
<p>Now we have to create another file <tt>/usr/share/gdm/BuiltInSessions/online-desktop-jhbuild.desktop</tt>:</p>
<pre>[Desktop Entry]
Encoding=UTF-8
Name=Online Desktop (JHBuild)
Comment=JHBuild of Online Desktop
Exec=/usr/local/bin/run-online-desktop
Icon=
Type=Application
</pre>
<p>Finally we can start a new session with the user that we’ve compiled Online Desktop and test it (maybe when you start an Online Desktop session at first time you have to close and restart the GNOME session to see that Big Board knows that you are logged in Online Desktop).</p>
<a href="https://blogs.igalia.com/mrego/files/2008/04/screenshot-online-desktop.png">
<img src="https://blogs.igalia.com/mrego/files/2008/04/screenshot-online-desktop.png" alt="Screenshot Online Desktop">
</a>
<span class="caption text-muted">Screenshot Online Desktop</span>
<p>I hope these instructions are complete, but if you find any problem or error please tell me and I’ll update this post. Moreover you can find some solutions for your problems at <a href="http://live.gnome.org/JhbuildIssues/" title="Jhbuild Issues">Jhbuild Issues</a>.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 08/05/22 18:30, **[Simon](http://sionide.net/)** wrote:
<blockquote>
<p>I had to install the following packages before the modules would compile correctly…</p>
<p>gtk-doc-tools libempathy-dev libgnomedesktop2.20-cil libgnome-desktop-dev automake pidgin-dev</p>
<p>Had troubles with mugshot-client which according to owen in the #online-desktop IRC channel, doesn’t work nicely with Ubuntu’s Xulrunner just yet.</p>
<p>On 08/05/23 08:42, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>Thanks for your feedback Simon ;-)</p>
<p>I’ve updated the package list, however I don’t have installed some package that you say: libempathy-dev libgnomedesktop2.20-cil pidgin-dev</p>
<p>At this moment I don’t have any problem with mugshot-client, but I remember some problems some time ago.</p>
</blockquote>
</blockquote>
</div>
O Galego en TYPO3 III2008-04-24T00:00:00Zhttps://blogs.igalia.com/mrego/2008/04/24/o-galego-en-typo3-iii/<p><a href="http://typo3.org/news-single-view/?tx_newsimporter_pi1%5BshowItem%5D=0&tx_newsimporter_pi1%5Bfeed%5D=10&cHash=c5554a06e2" title="TYPO3 4.2">TYPO3 4.2 foi lanzado onte</a>, o que implica que o galego xa está soportado no core de <a href="http://typo3.org/" title="TYPO3">TYPO3</a>.
Dende este momento calquera que se descargue a versión actual de TYPO3 poderá ter un sitio web funcionando en galego coma un idioma máis.</p>
<p>Se queremos ter o backend de TYPO3 en galego tan só temos que seguir os seguintes pasos:</p>
<ul>
<li>Acceder ó módulo <em>Ext Manager (Adm. de Extensións)</em></li>
<li>Seleccionar a opción <em>Translation handling</em></li>
<li>Seleccionar o idioma <em>Galician – [Galician]</em></li>
<li>Premer en <em>Save selection</em></li>
<li>Premer en <em>Update from repository</em></li>
</ul>
<a href="https://blogs.igalia.com/mrego/files/2008/04/screenshot-ext-manager1.png">
<img src="https://blogs.igalia.com/mrego/files/2008/04/screenshot-ext-manager1.png" alt="Como descargar a tradución do galego para o backend de TYPO3">
</a>
<span class="caption text-muted">Como descargar a tradución do galego para o backend de TYPO3</span>
<p>Unha vez feito isto poderíamos escoller o galego como idioma de backend:</p>
<ul>
<li>Ir ó módulo <em>User settings (Configuración)</em></li>
<li>Seleccionar <em>Galcian – [Galician]</em> no campo <em>Language (Lingua)</em></li>
<li>Premer en <em>Save configuration (Gardar configuración)</em></li>
</ul>
<a href="https://blogs.igalia.com/mrego/files/2008/04/screenshot-user-settings.png">
<img src="https://blogs.igalia.com/mrego/files/2008/04/screenshot-user-settings.png" alt="Como establecer o galego como idioma de backend en TYPO3">
</a>
<span class="caption text-muted">Como establecer o galego como idioma de backend en TYPO3</span>
<p>Ademáis está dispoñible a extensión <a href="http://typo3.org/extensions/repository/view/static_info_tables_gl/current/" title="Static Info Tables (gl) - static_info_tables_gl">Static Info Tables (gl) – <code>static_info_tables_gl</code></a>, que proporciona a tradución ó galego das táboas estáticas de TYPO3.</p>
<p>Para rematar quero lembrar que, <a href="http://blogs.igalia.com/mrego/2007/11/20/o-galego-en-typo3-ii/" title="O Galego en TYPO3 II">como xa sabedes</a>, o galego ten unha conta no <a href="http://translation.typo3.org/" title="Servidor de traducións de TYPO3">servidor de traducións de TYPO3</a>, polo que calquera <a href="http://wiki.typo3.org/index.php/Galician-Translation-Team" title="Equipo de tradución do galego">colaboración</a> para seguir coa tradución de TYPO3 ó galego será benvida.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 08/04/25 13:13, **carlos** wrote:
<blockquote>
<p>Pois é unha boa nova. Bo traballo!</p>
</blockquote>
</div>
Galician in TYPO3 III2008-04-24T00:00:00Zhttps://blogs.igalia.com/mrego/2008/04/24/galician-in-typo3-iii/<p><a href="http://typo3.org/news-single-view/?tx_newsimporter_pi1%5BshowItem%5D=0&tx_newsimporter_pi1%5Bfeed%5D=10&cHash=c5554a06e2" title="TYPO3 4.2">TYPO3 4.2 was released yesterday</a>, it means that Galician is already supported inside <a href="http://typo3.org/" title="TYPO3">TYPO3</a> core.
Since this moment everyone that download TYPO3 current version may have a website working in Galician as a language more.</p>
<p>If we want to have TYPO3 backend in Galician just have to follow next steps:</p>
<ul>
<li>Access to <em>Ext Manager</em> module</li>
<li>Select option <em>Translation handling</em></li>
<li>Select language <em>Galician – [Galician]</em></li>
<li>Click on <em>Save selection</em></li>
<li>Click on <em>Update from repository</em></li>
</ul>
<a href="https://blogs.igalia.com/mrego/files/2008/04/screenshot-ext-manager1.png">
<img src="https://blogs.igalia.com/mrego/files/2008/04/screenshot-ext-manager1.png" alt="How to download Galician translation for TYPO3 backend">
</a>
<span class="caption text-muted">How to download Galician translation for TYPO3 backend</span>
<p>Then we may choose select Galician as backend language:</p>
<ul>
<li>Go to <em>User settings</em> module</li>
<li>Select <em>Galcian – [Galician]</em> on field <em>Language</em></li>
<li>Click on <em>Save configuration</em></li>
</ul>
<a href="https://blogs.igalia.com/mrego/files/2008/04/screenshot-user-settings.png">
<img src="https://blogs.igalia.com/mrego/files/2008/04/screenshot-user-settings.png" alt="How to set Galician as TYPO3 backend language">
</a>
<span class="caption text-muted">How to set Galician as TYPO3 backend language</span>
<p>Moreover it’s available the extension <a href="http://typo3.org/extensions/repository/view/static_info_tables_gl/current/" title="Static Info Tables (gl) - static_info_tables_gl">Static Info Tables (gl) – <code>static_info_tables_gl</code></a>, that provides Galician translation for TYPO3 static tables.</p>
<p>Finally I’d like to remerber that, <a href="http://blogs.igalia.com/mrego/2007/11/20/galician-in-typo3-ii/" title="Galician in TYPO3 II">as you know</a>, Galician language has an account at <a href="http://translation.typo3.org/" title="TYPO3 translation server">TYPO3 translation server</a>, so that any <a href="http://wiki.typo3.org/index.php/Galician-Translation-Team" title="Galician Translation Team">collaboration</a> to follow with TYPO3 translation to Galician will be welcome.</p>
TYPO3 Extensions Configuration2008-04-01T00:00:00Zhttps://blogs.igalia.com/mrego/2008/04/01/typo3-extensions-configuration/<p>This post try to explain how to develop TYPO3 extensions as flexible as possible, TYPO3 provides us with several mechanism to do it. Furthermore I’m going to show a very useful function to read every possible configuration variable on a TYPO3 extension.
There is different ways to configure a TYPO3 extension (from more general to more concrete), and I’m going to explain how to use them:</p>
<ul>
<li>
<ol>
<li>Generic Variables (<tt>ext_conf_template.txt</tt>)</li>
</ol>
</li>
<li>
<ol start="2">
<li><tt>TYPO3_CONF_VARS</tt></li>
</ol>
</li>
<li>
<ol start="3">
<li>Plugin Configuration<p></p></li>
</ol>
<ul>
<li>a) TypoScript</li>
<li>b) FlexForms</li>
</ul>
</li>
</ul>
<!--more-->
<p><strong>1. Generic Variables (<tt>ext_conf_template.txt</tt>)</strong></p>
<p>For extension configuration variables we can use the file <strong><tt>ext_conf_template.txt</tt></strong> file, variables stored here are common to whole extension. Plugins, modules and classes can read these configuration variables.</p>
<p>For example, if in one extension you have a database table we usually use an extension configuration variable to save PID for the records of this table. The file <strong><tt>ext_conf_template.txt</tt></strong> would be (<a href="http://typo3.org/documentation/document-library/core-documentation/doc_core_tstemplates/0.0.1/view/2/5/" title="ext_conf_template.txt syntax">see more</a>):</p>
<pre># cat=basic/int; type=int; label=Parent page uid (PID) for records of <tt>myTable</tt>
myTablePID = 0
</pre>
<p>And you can read this information in your source code with:</p>
<pre><span style="color: #5555ff">$confArray</span><span style="color: #000000"> = </span><span style="color: #000080">unserialize</span><span style="color: #000000">(</span><span style="color: #5555ff">$GLOBALS</span><span style="color: #000000">[</span><span style="color: #dd0000">'TYPO3_CONF_VARS'</span><span style="color: #000000">][</span><span style="color: #dd0000">'EXT'</span><span style="color: #000000">][</span><span style="color: #dd0000">'extConf'</span><span style="color: #000000">][your-extension-</span><span style="color: #000080">key</span><span style="color: #000000">]);</span>
<span style="color: #000080">echo</span><span style="color: #000000"> </span><span style="color: #5555ff">$confArray</span><span style="color: #000000">[</span><span style="color: #dd0000">'myTablePID'</span><span style="color: #000000">];</span>
</pre>
<p><strong>2. <tt>TYPO3_CONF_VARS</tt></strong></p>
<p>We can use <strong><tt>TYPO3_CONF_VARS</tt></strong> array to store extension configuration variables too. We set these variables directly at file <tt>ext_localconf.php</tt>:</p>
<pre><span style="color: #5555ff">$TYPO3_CONF_VARS</span><span style="color: #000000">[</span><span style="color: #dd0000">'EXTCONF'</span><span style="color: #000000">][</span><span style="color: #5555ff">$_EXTKEY</span><span style="color: #000000">][</span><span style="color: #dd0000">'myVariable'</span><span style="color: #000000">] = </span><span style="color: #dd0000">'myValue'</span><span style="color: #000000">;</span>
</pre>
<p>And we’d can read these variables where we want. Moreover these variables could be modified from <tt>ext_localconf.php</tt> files of other extensions loaded later than our extension.</p>
<p><strong>3. Plugins Configuration</strong></p>
<p>TYPO3 has two more ways to configure plugins (frontend applications developed in a extension):</p>
<p><strong>a) TypoScript</strong></p>
<p>We can use directly <strong>TypoScript</strong> inside a template <em>Setup</em> on module <em>Template</em>. With a simple <strong>TypoScript</strong> code:</p>
<pre>plugin.tx_myextension_pi1.myVar = value
</pre>
<p>We can set a value for the variable <tt>myVar</tt> that we are going to receive in our plugin as the second parameter of <tt>main</tt> method.</p>
<p><strong>b) FlexForms</strong></p>
<p>In addition we use <strong>FlexForms</strong> in order to add specific configuration to frontend plugins. And we usually defines a sheet to override extension configuration. The basic <strong>FlexForm</strong> for our plugins are something like this (<a href="http://typo3.org/documentation/document-library/core-documentation/doc_core_api/4.1.0/view/7/1/" title="FlexForms syntax">see more</a>):</p>
<pre><span style="font-weight: bold;color: #000000"><T3DataStructure></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><meta></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><langDisable></span><span style="color: #000000">1</span><span style="font-weight: bold;color: #000000"></langDisable></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></meta></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><sheets></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><sOverride></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><ROOT></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><TCEforms></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><sheetTitle></span><span style="color: #000000">Override Extension Configuration</span><span style="font-weight: bold;color: #000000"></sheetTitle></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></TCEforms></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><type></span><span style="color: #000000">array</span><span style="font-weight: bold;color: #000000"></type></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><el></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><myTablePID></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><TCEforms></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><label></span><span style="color: #000000">PID for myTable records</span><span style="font-weight: bold;color: #000000"></label></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><config></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><type></span><span style="color: #000000">group</span><span style="font-weight: bold;color: #000000"></type></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><internal_type></span><span style="color: #000000">db</span><span style="font-weight: bold;color: #000000"></internal_type></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><allowed></span><span style="color: #000000">pages</span><span style="font-weight: bold;color: #000000"></allowed></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><size></span><span style="color: #000000">1</span><span style="font-weight: bold;color: #000000"></size></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><maxitems></span><span style="color: #000000">1</span><span style="font-weight: bold;color: #000000"></maxitems></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><minitems></span><span style="color: #000000"></span><span style="font-weight: bold;color: #000000"></minitems></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"><show_thumbs></span><span style="color: #000000">1</span><span style="font-weight: bold;color: #000000"></show_thumbs></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></config></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></TCEforms></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></myTablePID></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></el></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></ROOT></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></sOverride></span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000"></sheets></span>
<span style="font-weight: bold;color: #000000"></T3DataStructure></span>
</pre>
<p>And to read this variables we use:</p>
<pre><span style="color: #5555ff">$this</span><span style="color: #000000">->pi_initPIflexForm();</span>
<span style="color: #5555ff">$this</span><span style="color: #000000">->pi_getFFvalue(</span><span style="color: #5555ff">$this</span><span style="color: #000000">->cObj->data[</span><span style="color: #dd0000">'pi_flexform'</span><span style="color: #000000">], </span><span style="color: #dd0000">'myTablePID'</span><span style="color: #000000">);</span>
</pre>
<p><strong>Init function</strong></p>
<p>Finally we’ve developed a function <strong><tt>init</tt></strong> to use in every plugin that we develop, this function reads all configuration variables and stores its in an array <tt>$this->conf</tt>. Next the source code of this function:</p>
<pre><span style="color: #000000"> </span><span style="font-style: italic;color: #0000ff">/**</span>
<span style="font-style: italic;color: #0000ff"> * Init Function: here all the needed configuration values are stored in class variables</span>
<span style="font-style: italic;color: #0000ff"> *</span>
<span style="font-style: italic;color: #0000ff"> * </span><span style="font-weight: bold;color: #ca60ca">@param</span><span style="font-style: italic;color: #0000ff"> </span><span style="font-weight: bold;color: #0095ff">array </span><span style="font-style: italic;color: #0000ff"> $conf: configuration array from TS</span>
<span style="font-style: italic;color: #0000ff"> * </span><span style="font-weight: bold;color: #ca60ca">@return</span><span style="font-style: italic;color: #0000ff"> void</span>
<span style="font-style: italic;color: #0000ff"> */</span>
<span style="color: #000000"> </span><span style="font-weight: bold;color: #000000">function</span><span style="color: #000000"> init(</span><span style="color: #5555ff">$conf</span><span style="color: #000000">) {</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$this</span><span style="color: #000000">->conf = </span><span style="color: #5555ff">$conf</span><span style="color: #000000">; </span><span style="font-style: italic;color: #808080">// Store configuration</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$this</span><span style="color: #000000">->pi_setPiVarDefaults(); </span><span style="font-style: italic;color: #808080">// Set default piVars from TS</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$this</span><span style="color: #000000">->pi_initPIflexForm(); </span><span style="font-style: italic;color: #808080">// Init FlexForm configuration for plugin</span>
<span style="color: #000000"> </span><span style="font-style: italic;color: #808080">// Read extension configuration</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$extConf</span><span style="color: #000000"> = </span><span style="color: #000080">unserialize</span><span style="color: #000000">(</span><span style="color: #5555ff">$GLOBALS</span><span style="color: #000000">[</span><span style="color: #dd0000">'TYPO3_CONF_VARS'</span><span style="color: #000000">][</span><span style="color: #dd0000">'EXT'</span><span style="color: #000000">][</span><span style="color: #dd0000">'extConf'</span><span style="color: #000000">][</span><span style="color: #5555ff">$this</span><span style="color: #000000">->extKey]);</span>
<span style="color: #000000"> </span><span style="color: #a1a100">if</span><span style="color: #000000"> (</span><span style="color: #000080">is_array</span><span style="color: #000000">(</span><span style="color: #5555ff">$extConf</span><span style="color: #000000">)) {</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$conf</span><span style="color: #000000"> = t3lib_div::</span><span style="color: #000080">array_merge</span><span style="color: #000000">(</span><span style="color: #5555ff">$extConf</span><span style="color: #000000">, </span><span style="color: #5555ff">$conf</span><span style="color: #000000">);</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> </span><span style="font-style: italic;color: #808080">// Read TYPO3_CONF_VARS configuration</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$varsConf</span><span style="color: #000000"> = </span><span style="color: #5555ff">$GLOBALS</span><span style="color: #000000">[</span><span style="color: #dd0000">'TYPO3_CONF_VARS'</span><span style="color: #000000">][</span><span style="color: #dd0000">'EXTCONF'</span><span style="color: #000000">][</span><span style="color: #5555ff">$this</span><span style="color: #000000">->extKey];</span>
<span style="color: #000000"> </span><span style="color: #a1a100">if</span><span style="color: #000000"> (</span><span style="color: #000080">is_array</span><span style="color: #000000">(</span><span style="color: #5555ff">$varsConf</span><span style="color: #000000">)) {</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$conf</span><span style="color: #000000"> = t3lib_div::</span><span style="color: #000080">array_merge</span><span style="color: #000000">(</span><span style="color: #5555ff">$varsConf</span><span style="color: #000000">, </span><span style="color: #5555ff">$conf</span><span style="color: #000000">);</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> </span><span style="font-style: italic;color: #808080">// Read FlexForm configuration</span>
<span style="color: #000000"> </span><span style="color: #a1a100">if</span><span style="color: #000000"> (</span><span style="color: #5555ff">$this</span><span style="color: #000000">->cObj->data[</span><span style="color: #dd0000">'pi_flexform'</span><span style="color: #000000">][</span><span style="color: #dd0000">'data'</span><span style="color: #000000">]) {</span>
<span style="color: #000000"> </span><span style="color: #a1a100">foreach</span><span style="color: #000000"> (</span><span style="color: #5555ff">$this</span><span style="color: #000000">->cObj->data[</span><span style="color: #dd0000">'pi_flexform'</span><span style="color: #000000">][</span><span style="color: #dd0000">'data'</span><span style="color: #000000">] </span><span style="color: #a1a100">as</span><span style="color: #000000"> </span><span style="color: #5555ff">$sheetName</span><span style="color: #000000"> => </span><span style="color: #5555ff">$sheet</span><span style="color: #000000">) {</span>
<span style="color: #000000"> </span><span style="color: #a1a100">foreach</span><span style="color: #000000"> (</span><span style="color: #5555ff">$sheet</span><span style="color: #000000"> </span><span style="color: #a1a100">as</span><span style="color: #000000"> </span><span style="color: #5555ff">$langName</span><span style="color: #000000"> => </span><span style="color: #5555ff">$lang</span><span style="color: #000000">) {</span>
<span style="color: #000000"> </span><span style="color: #a1a100">foreach</span><span style="color: #000000">(</span><span style="color: #000080">array_keys</span><span style="color: #000000">(</span><span style="color: #5555ff">$lang</span><span style="color: #000000">) </span><span style="color: #a1a100">as</span><span style="color: #000000"> </span><span style="color: #5555ff">$key</span><span style="color: #000000">) {</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$flexFormConf</span><span style="color: #000000">[</span><span style="color: #5555ff">$key</span><span style="color: #000000">] = </span><span style="color: #5555ff">$this</span><span style="color: #000000">->pi_getFFvalue(</span><span style="color: #5555ff">$this</span><span style="color: #000000">->cObj->data[</span><span style="color: #dd0000">'pi_flexform'</span><span style="color: #000000">], </span>
<span style="color: #000000"> </span><span style="color: #5555ff">$key</span><span style="color: #000000">, </span><span style="color: #5555ff">$sheetName</span><span style="color: #000000">, </span><span style="color: #5555ff">$langName</span><span style="color: #000000">);</span>
<span style="color: #000000"> </span><span style="color: #a1a100">if</span><span style="color: #000000"> (!</span><span style="color: #5555ff">$flexFormConf</span><span style="color: #000000">[</span><span style="color: #5555ff">$key</span><span style="color: #000000">]) {</span>
<span style="color: #000000"> </span><span style="color: #000080">unset</span><span style="color: #000000">(</span><span style="color: #5555ff">$flexFormConf</span><span style="color: #000000">[</span><span style="color: #5555ff">$key</span><span style="color: #000000">]);</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> </span><span style="color: #a1a100">if</span><span style="color: #000000"> (</span><span style="color: #000080">is_array</span><span style="color: #000000">(</span><span style="color: #5555ff">$flexFormConf</span><span style="color: #000000">)) {</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$conf</span><span style="color: #000000"> = t3lib_div::</span><span style="color: #000080">array_merge</span><span style="color: #000000">(</span><span style="color: #5555ff">$conf</span><span style="color: #000000">, </span><span style="color: #5555ff">$flexFormConf</span><span style="color: #000000">);</span>
<span style="color: #000000"> }</span>
<span style="color: #000000"> </span><span style="color: #5555ff">$this</span><span style="color: #000000">->conf = </span><span style="color: #5555ff">$conf</span><span style="color: #000000">;</span>
<span style="color: #000000"> }</span>
</pre>
<p>I think that this function can be very useful when you develop a TYPO3 extension.</p>
<hr>
<p><a name="comments"></a></p>
<h3><i class="fa fa-comments"></i> Comments</h3>
<div class="small" markdown="1">
On 09/02/04 20:35, **[Thomas Boley](http://www.wildbits.de/)** wrote:
<blockquote>
<p>Thanks for this post! Theres ist only one question left: Using Typoscript an flexforms at the same time for one value, what happens? Does the value form flexforms override the Typoscript value?</p>
<p>On 09/02/05 07:38, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>Yes, the value from FlexForms overrides the TypoScript value.<br>
But you can modify the preference easily changing the parameter order in functions “array_merge”.</p>
<p>Thanks for your comment ;-)</p>
</blockquote>
</blockquote>
<p>On 09/06/02 15:96, <strong><a href="http://www2.ulaval.ca/">Eric</a></strong> wrote:</p>
<blockquote>
<p>How is it possible to extend the flexform of an existing extension to add my own fields?</p>
<p>Thanks a million times!</p>
</blockquote>
<p>On 09/08/21 19:28, <strong>Nick</strong> wrote:</p>
<blockquote>
<p>Awesome Rego! This is the best, most concise explanation I’ve seen anywhere for all the ways a Typo3 extension can get configurations. Was struggling to get any kind of configs in to the first plugin I’ve ever written, and this was just what I needed. Thanks very much!</p>
<p>On 09/08/21 21:24, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>Hi Nick, thanks for your comments.
It’s great to see that this is useful for someone else ;-)</p>
</blockquote>
</blockquote>
<p>On 10/02/21 10:46, <strong>Shery</strong> wrote:</p>
<blockquote>
<p>Hi there, I want to install an extension in name PMK Shadowbox and it’s require a set up <a href="http://typo3.org/documentation/document-library/extension-manuals/and_shadowbox/1.0.2/view/1/2/">http://typo3.org/documentation/document-library/extension-manuals/and_shadowbox/1.0.2/view/1/2/</a><br>
I am a bit confused. should I make a flex form first or it should be one file that I should configure.<br>
I am absolutely lost :( HELPPPPP</p>
<p>I appreciate your help,</p>
<p>On 10/03/08 08:09, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>Sorry, I’ve never used this extension. But it seems that when you install the extension and add a plugin you will have a flexform to configure it.</p>
</blockquote>
</blockquote>
<p>On 11/03/22 10:08, <strong>serengeti</strong> wrote:</p>
<blockquote>
<p>Hey, great explanation!</p>
<p>Do you know how to read the configuration that is in the pageTSconfig ?</p>
<p>On 11/03/25 10:52, <strong><a href="http://blogs.igalia.com/mrego/">Manuel Rego Casasnovas</a></strong> wrote:</p>
<blockquote>
<p>@serengeti sorry but right now I don’t know how to do that, I should need to review it.</p>
</blockquote>
</blockquote>
</div>
O Galego en TYPO3 II2007-11-20T00:00:00Zhttps://blogs.igalia.com/mrego/2007/11/20/o-galego-en-typo3-ii/<p>Xa temos unha conta no <a href="http://translation.typo3.org/">servidor de traducións de TYPO3</a> para a lingua galega, e xa están subidas as traducións que fixeramos con anterioridade. Ademais creamos <strong><a href="http://wiki.typo3.org/index.php/Galician-Translation-Team">unha páxina</a></strong> no <a href="http://wiki.typo3.org">wiki de TYPO3</a> para a coordinación do equipo de tradución.
A partir de agora (<strike><em>cando se arranxe a conexión entre o servidor de traducións e <a href="http://typo3.org">typo3.org</a></em></strike>), calquera podería baixarse a tradución do galego dende a opción “Translation handling” da ferramenta “Extension Manager” en <a href="http://typo3.org">TYPO3</a>.</p>
<p>Con isto conseguimos o obxectivo inicial do proxecto “<a href="https://forxa.mancomun.org/projects/typo3-l10n-gl/">Tradución ó galego do backend de TYPO3</a>“, este proxecto quedaría reemplazado polo traballo do <a href="http://wiki.typo3.org/index.php/Galician-Translation-Team">equipo de tradución ó galego</a> en <a href="http://typo3.org">TYPO3</a>.</p>
<p>Estamos abertos a recibir axuda para continuar, mellorar, manter, correxir, … a tradución de <a href="http://typo3.org">TYPO3</a> ó galego.</p>
Galician in TYPO3 II2007-11-20T00:00:00Zhttps://blogs.igalia.com/mrego/2007/11/20/galician-in-typo3-ii/<p>We already have an account into <a href="http://translation.typo3.org/">TYPO3 Translation Server</a> for Galician language, and we’ve already uploaded translations that we’ve done previously. Moreover we’ve created <strong><a href="http://wiki.typo3.org/index.php/Galician-Translation-Team">a page</a></strong> into <a href="http://wiki.typo3.org">TYPO3 Wiki</a> to translation team coordination.
From now (<strike>*when synchronization between <a href="http://translation.typo3.org/">Translation Server</a> and *<em><a href="http://typo3.org">typo3.org</a> works</em></strike>) anyone could download Galician translation from “Translation handling” option on “Extension Manager” tool into <a href="http://typo3.org">TYPO3</a>.</p>
<p>With this we’ve <span style="cursor: pointer">achieved</span> the main goal of project “<a href="https://forxa.mancomun.org/projects/typo3-l10n-gl/">TYPO3 Backend G</a><a href="https://forxa.mancomun.org/projects/typo3-l10n-gl/">alician Translation</a>“, this project would be replaced for <a href="http://wiki.typo3.org/index.php/Galician-Translation-Team">Galician Translation Team</a> work in <a href="http://typo3.org">TYPO3</a>.</p>
<p>We’re ready to get help to continue, improve, support, correct, … <a href="http://typo3.org">TYPO3</a> Galician translation.</p>
Developing TYPO3 Extensions (sg_showdoku)2007-11-14T00:00:00Zhttps://blogs.igalia.com/mrego/2007/11/14/developing-typo3-extensions-sg_showdoku/<p>Reading <a href="http://wiki.typo3.org/index.php/Main_Page" title="TYPO3 Wiki">TYPO3 Wiki</a> I’ve found the page <a href="http://wiki.typo3.org/index.php/What_is_an_extension%3F_%28XDG%29" title="What is an extension?"><em>What is an extension?</em></a>, it talks about 3 useful extensions when you are developing:</p>
<ul>
<li><a href="http://typo3.org/extensions/repository/view/kickstarter/0.3.8/" title="kickstarter">Extension Kickstarter</a> (kickstarter)</li>
<li><a href="http://typo3.org/extensions/repository/view/extdeveval/3.0.0/" title="extdeveval">Extension Developement Evaluation</a> (extdeveval)</li>
<li><a href="http://typo3.org/extensions/repository/view/sg_showdoku/0.3.1/" title="sg_showdoku">Show Typo3 Info</a> (sg_showdoku)</li>
</ul>
<p>I didn’t know <strong>sg_showdoku</strong> yet, this is a great extension that provide a plugin to insert in a page and it shows all the content of variable <strong>$GLOBALS</strong>, moreover you can browse through the content in a very handy way.</p>
<p>A screenshot:</p>
<p><img src="https://blogs.igalia.com/mrego/files/2007/11/sg_showdoku_screenshot.png" alt="sg_showdoku screenshot"></p>
O Galego en TYPO32007-11-06T16:00:00Zhttps://blogs.igalia.com/mrego/2007/11/06/o-galego-en-typo3/<p>A partir da versión 4.2 de <a href="http://typo3.org/" title="TYPO3 Content Mangement System">TYPO3</a> o <a href="http://gl.wikipedia.org/wiki/Lingua_galega" title="Lingua Galega">galego</a> será un idioma máis dentro deste <a href="http://en.wikipedia.org/wiki/Content_management_system" title="Sistema Xestor de Contidos">CMS</a>. Despois duns cantos correos na <a href="http://lists.netfielders.de/pipermail/typo3-translators/" title="Lista de tradutores de TYPO3">lista de tradutores de TYPO3</a> (que comezaron cun correo de <a href="http://blogs.igalia.com/xavi/" title="Blog de Xavi">Xavi</a> en xaneiro deste ano) conseguimos que o galego fose incluído no núcleo de TYPO3.
Polo de agora estamos a espera dunha conta no <a href="http://translation.typo3.org/" title="Sevidor de traducións de TYPO3">servidor de traducións de TYPO3</a> para poder subir as traducións que temos feitas ata o momento (o backend e algunhas das extensións máis utilizadas). Pero xa publicamos a extensión <a href="http://typo3.org/extensions/repository/view/static_info_tables_gl/0.9.0/" title="Static Info Tables (gl)">static_info_tables_gl</a> para a tradución das táboas estáticas ó galego.</p>
<p>Gracias os meus compañeiros de <a href="http://www.igalia.com" title="Igalia - Free Software Engineering">Igalia</a> polo traballo de tradución e tamén á xente de TYPO3 (en especial a <a href="http://typo3bloke.net/" title="Blog de Dmitry Dulepov">Dmitry Dulepov</a>) por dar os pasos para engadir a nosa lingua en TYPO3.</p>
Galician in TYPO32007-11-06T16:00:00Zhttps://blogs.igalia.com/mrego/2007/11/06/galician-in-typo3/<p>From the next <a href="http://typo3.org/" title="TYPO3 Content Mangement System">TYPO3</a> release 4.2 <a href="http://en.wikipedia.org/wiki/Galician_language" title="Galician Language">galician</a> will be a language more inside this <a href="http://en.wikipedia.org/wiki/Content_management_system" title="Content Management System">CMS</a>. After few mails to the <a href="http://lists.netfielders.de/pipermail/typo3-translators/" title="TYPO3 Translation List">TYPO3 translation list</a> (which began with a <a href="http://blogs.igalia.com/xavi/" title="Xavi's Blog">Xavi</a> mail on January this year) we get that galician was added into TYPO3 core.
So now we are waiting for an account into <a href="http://translation.typo3.org/" title="TYPO3 Translation Server">TYPO3 translation server</a> to upload translations that we have done (backend and some of the most commonly used extensions). However we’ve already published <a href="http://typo3.org/extensions/repository/view/static_info_tables_gl/0.9.0/" title="Static Info Tables (gl)">static_info_tables_gl</a> to translate static tables to galician.</p>
<p>Thanks to my mates from <a href="http://www.igalia.com" title="Igalia - Free Software Engineering">Igalia</a> for the translation work and TYPO3 folk as well (especially <a href="http://typo3bloke.net/" title="Dmitry Dulepov's Blog">Dmitry Dulepov</a>) to add our language to TYPO3.</p>