Adobe

decor

Web Platform Team Blog

Making the web awesome

Web Platform team passes 1,000 commits to WebKit

Earlier this month, the Web Platform team at Adobe reached a significant milestone: 1,000 commits to the WebKit open source project.  This only accounts for commits made by members of the team while they were employed by Adobe, and the majority of this work took place over the last 2 years.  We now have 11 WebKit committers, 3 WebKit reviewers, and many more contributors on the team. It has been a great pleasure to work with the WebKit community to bring new and engaging features to the web.  We are excited about the future of WebKit and look forward to continued participation in the project.

To learn more about what features the team has been working on in WebKit, please visit our team site at html.adobe.com/webplatform.

Introducing the New Adobe Web Platform Showcase

Before Adobe’s Web Platform team begins work on a new web standard — whether it’s contributing to a specification or actually implementing a feature — we take some time to really understand the specific problems we’re trying to solve. Additionally, after a feature has been prototyped, we spend more time validating that it works the way developers and designers expect and want it to. The primary way we do both these things is by:

  1. Building cutting-edge experiences that intentionally push the edges of the web.
  2. Work with some of the best digital agencies and media partners in the business to make sure we’re solving real-world problems in powerful and intuitive ways.

The new Adobe Web Platform Showcase lists some of these experiments. You can learn more about which features and concepts each project focuses on by watching the embedded videos, or — if you don’t mind enabling cutting-edge graphical and layout features in your browser — you can even check them out for yourself. Feel free to use the video or blog post comments to let us know what you think.

CSS Shapes in Last Call

The CSS Working Group published a Last Call Working Draft of CSS Shapes Module Level 1 yesterday. This specification describes how to assign an arbitrary shape such as a circle or polygon to a float and to have inline content wrap around the shape’s contour, rather than the boring old float rectangle.

A Last Call draft is the signal that the working group thinks the specification is nearly done and ready for wider review. If the review (which has a deadline of January 7th, 2014) goes well, then the spec goes on to the next step. At that point, the W3C invites implementations in order to further validate the specification. We at Adobe have been implementing CSS Shapes in WebKit and Blink for a while, but this milestone opens the door for more browsers to take up the feature.

This means that 2014 will be the year you’ll see CSS Shapes show up in cutting-edge browsers. The effort then moves to making sure these implementations all match, and that we have a good set of tests available to show interoperability. My hope is that by the end of next year, you’ll be able to use shapes on floats in many browsers (with a fallback to the normal rectangle when needed).

We <3 Blue Beanies!

By Arno Gourdol

Today we celebrate web standards by donning a blue beanie. The tradition started a decade ago, inspired by the cover of Jeffrey Zeldman’s Designing with Web Standards.  While the technologies at the core of the web platform – HTML, CSS, SVG and  Javascript – evolve and keep improving, embracing web standards remain more important than ever.  We believe that an open web built on standards can empower creators everywhere to share their most important stories with the world. This is something we are passionate about, and that that is deeply embedded in our DNA.

Looking back, this has been a great year for web standards and we’re proud of our contributions. We saw several features that we championed finally reach a broad audience. CSS Shapes is making progress and we’ve built a great demo of the more engaging storytelling you can use it for. Blend modes are broadly supported in canvas, for stunning graphical effects (check out the demo). CSS Regions is now available in Apple’s iOS 7 and Mac OS X Mavericks, and we expect to see more beautiful page layouts on the web because of it. We’ve also added support for CSS Regions authoring in Edge Reflow and Edge Code. We like to support shiny web features in our tools!

Speaking of tools, we’re also making improvements in the SVG output from Adobe Illustrator, the CSS and web assets extracted from Photoshop with Photoshop Generator and we have added a brand new CSS Designer panel in Dreamweaver to give your more control than ever to create beautiful, standard-based, web content.

We’re contributing to many open source projects, such as WebKit, Blink and Gecko. This year we introduced two new open source projects, TopCoat  a CSS library for fast, beautiful web apps and Snap.SVG, the Javascript SVG library for modern web graphics. And of course, our more established projects are doing well, with Brackets the code editor for the web, regularly trending amongst Javascript projects on GitHub, and PhoneGap, the framework for mobile apps built with the web platform, winners of the InfoWorld BOSSie awards.

We invite you to participate in those projects or in others that support web standards. By developing in the open with the involvement of many of you, we collectively strengthen the foundation on which web standards can flourish.

Web standards wouldn’t be what they are if it wasn’t for a passionate community behind them. We’ve been thrilled to see the success of some of the efforts we helped initiate, including WebPlatform.org, the community-built website to document the standards of the web. The movement behind Test The Web Forward also gained momentum, with events in Sydney, Seattle, Tokyo, Shanghai and Shenzen. And to help establish a community of ongoing contributors we’ve been happy to pass the torch to the W3C.

So join us in celebrating web standards. Don a blue beanie (real or virtual!) and share your photo (hashtag #bbd13). Happy Blue Beanie Day!

Test the Web Forward Shenzhen Recap

On November 9, 2013, the eighth major Test the Web Forward event was held in Shenzhen, China. The primary goals of this event was to raise awareness of the crucial need for tests, to educate newcomers on the test creation and submission processes, and to cultivate a community of Open Web Platform contributors beyond the day of the event.

With the recent announcement of the W3C adopting the Test the Web Forward brand, for the first time this event was part of the W3C’s annual TPAC conference at the Shenzhen Wuzhou Guest House. With TPAC attendees traveling from all over the world, this TestTWF event drew over 40 experts and spec editors covering many W3C specs and areas, including HTML5, CSS, WebDriver, and Web Accessibility. It was an event that brought together a large group of enthusiastic web developers and an extraordinary number of people with deep knowledge of the Web.

Another first for Test the Web Forward was that this was a single day event. In the past, the education and hacking were split across two days but this event reduced the hacking time and focused more on the goals of education and raising awareness.

Early Saturday morning, over 250 attendees filled Huaxia Hall for a day full of learning, socializing, and hacking.

testtwf-shenzhen3

Speakers

Just as the event was full of an unprecedented number of experts, the lineup of speakers was equally impressive.

The Keynote
We were honored to have Angel Li, Site Manager of W3C Beihang, take the time out of her busy TPAC schedule to join us and deliver the opening message to attendees. Angel gave an inspiring talk and emphasized the importance of interoperability on the Web and the vital need for tests during the W3C spec lifecycle.

Educational Talks

The first two talks were given by Belem Zhang of Intel. Belem attended the Shanghai event and exhibited such proficiency there, he was invited to Shenzhen to help educate more newcomers. Belem began with How to Read W3C Specifications, emphasizing that specs are not intended to be user manuals and are written in a way that test author can extract assertions that require supporting tests. He then moved on to the detailed instructions for Using testharness.js, the W3C’s JavaScript testing framework. To test the audience’s knowledge gained from his presentation, he ended with a short quiz and quickly handed out a prize to the first correct response!

The next two talks were given by Zhiqiang Zhang, also of Intel. Zhiqiang is among just a small group of people who’ve attended four TestTWF events, including being a featured speaker at the past China events and attending the first TestTWF in San Francisco. Zhiqiang described How to Write W3C Reftests, which is the type of test preferred by the W3C for testing how browsers visually render. These types of tests are particularly common and useful for testing CSS. Following a logical order, Zhiqiang then covered the very important topic of How to Review W3C Tests (or How to Write Tests That Pass Review). One of the more challenging problems facing the W3C now is having qualified reviewers to approve the growing number of incoming tests. Recognizing this need early on, Zhiqiang nominated this topic and delivered an excellent talk on the subject. Last, and most importantly, Zhiqiang covered Where to Report Bugs - pointing the bugbases for specs, tests, and for each of the major browsers.

Lightning Talks

After the presentations came a series of lightning talks, where spec editors and experts gave a quick overview of a number of specs that need tests. Each person made a pitch to the crowd to write tests for their spec:

David Burns, Mozilla: WebDriver
Leif Arne Storset, Opera: CSS User Interface
Alan Stearns, Adobe: CSS Shapes
Dirk Schulze, Adobe: CSS Masking
David Baron, Mozilla: CSS Fonts
Rik Cabanier, Adobe: Compositing & Blending
Mark Sadecki, W3C + Kenny Zhang, W3C:  Web Accessibility
Daniel Davis, W3C: HTML5
James Graham, Mozilla: WPTServer (newly implemented test environment)

lightning talks

After the lightning talks, attendees were encouraged to meet and mingle with the experts. They had their questions answered and by lunchtime, everyone had signed up for a testing group.

Hacking

After lunch, attendees had several hours to hack. People carefully followed the GitHub setup instructions, got their test environments set up, and starting taking on test writing. The energy in the room was great and the experts and attendees were very engaged all day. As the pull requests began to come in, we started hearing the familiar TestTWF “gong” followed by ripples of applause as people got more excited with each new test submitted. Throughout the day, there were several raffles – from the random drawings emerged several lucky winners of prizes ranging from gift cards to iPad Minis to the Adobe Creative Suite Master Collection.

testtwf-shenzhen44

Closing Talk

Perhaps the biggest prize of all for attendees and experts alike was hearing the closing words from a very special speaker, Tim Berners-Lee, Director of the W3C and inventor of the World Wide Web. When he was introduced, the event emcee suggested that people close their laptops to give him their undivided attention, to which he replied, “Don’t close your laptops! Keep coding!” At that, the room erupted in laughter and applause. Tim thanked the crowd for showing up and making a difference. He encouraged everyone keep making a difference, to teach their friends and colleagues what they learned that day, and to host an event of their own.

Tim Berners-Lee

After the Event

In the days following event, we saw good evidence of achieving success in perhaps the most important goal of this event: cultivating a community of Open Web contributors beyond just this one day. For the week following the event, we saw unprecedented followup activity in GitHub. Experts continued reviewing and new test authors continued their work in progress. We were delighted that after some new test authors had their tests reviewed and merged that they asked to be assigned more tests to write! While there is still much more to do, we are once again pleased at the tremendous turnout and enthusiasm from the Shenzhen web community during and after this event.

Favorite Quotes

“Why don’t you ask the HTML Editor? He’s sitting right there.”
– Doug Schepers, W3C Developer Relations

“Writing tests is a lot of fun. I want work on more challenging tests later on!”
– Sherlock Zhong, Attendee

“It was so easy! I wrote my first test and found a bug!”

– Jonathan Dang, Attendee

“This was my first Test the Web Forward. I really learned a lot”
– Mark Sadecki, Accessibility Expert

Special Thanks

These events would not be possible without the help and support of so many great people in the Open Web community. A very special thanks to these people who arrived in China early and spent a long and very full Saturday to help Move the Web Forward:

Experts & Speakers
Denis Ah-Kang, Wilhelm Joys Andersen, David Baron, Robin Berjon, Bert Bos, Judy Brewer, David Burns, Rik Cabanier, Michael Cooper, Daniel Davis, fantasai, Sylvain Galineau, James Graham, Andrew Kirkpatrick, Tobie Langel, Philippe Le Hégaret, Angel Li, Peter Linss, Sangwhan Moon, Mary Jo Mueller, Simon Pieters, Mark Sadecki, Simon Sapin, Dirk Schulze, Michael [tm] Smith, Alan Stearns, Simon Stewart, Leif Arne Storset, Masataka Yakura, Belem Zhang, Kun Zhang, Zhiqiang Zhang, and of course, Tim Berners-Lee.

Translators

And to a wonderful group of people who volunteered their time to provide translation support. You all went above and beyond…

Wei Jiang, Aili Wang, Wei Wu, Xiaoqian (Cindy) Wu, Donald Zhao.

Photos

Many thanks to TestTWF attendee, Bob Zheng for taking these beautiful photos of this great event.

A chat about River Trail

If you are interested in parallel programming using JavaScript, check out a very cool project called “River Trail” from Intel and Mozilla.  River Trail is aimed at exposing the power of multicore programming to JavaScript developers.

This effort is part of a larger initiative at Intel to contribute innovation to the web platform.  It is great to see Intel working in this space.  I had the chance to interview the team a few weeks ago to ask them a few questions – I hope you guys like it!

Expect additional videos in the future addressing various topics – from JavaScript to more designer orientated content.  If you’d like to be notified when new videos are posted, follow @adobeweb.

Important links mentioned in the video:

Official River Trail github repo: https://github.com/RiverTrail/RiverTrail/wiki

Prototype: https://github.com/RiverTrail/RiverTrail
Final API: http://nightly.mozilla.org/
Sample workloads repo + tutorial: https://github.com/IntelLabs/ParallelJavaScript
Cool parallel JS articles: http://smallcultfollowing.com/babysteps/blog/categories/pjs/

Big thanks to Tatiana, Jaswanth and Stephan from Intel for their time and kindness.

A chat about River Trail

If you are interested in parallel programming using JavaScript, check out a very cool project called “River Trail” from Intel and Mozilla.  River Trail is aimed at exposing the power of multicore programming to JavaScript developers.

This effort is part of a larger initiative at Intel to contribute innovation to the web platform.  It is great to see Intel working in this space.  I had the chance to interview the team a few weeks ago to ask them a few questions – I hope you guys like it!

Expect additional videos in the future addressing various topics – from JavaScript to more designer orientated content.  If you’d like to be notified when new videos are posted, follow @adobeweb.

Important links mentioned in the video:

Official River Trail github repo: https://github.com/RiverTrail/RiverTrail/wiki

Prototype: https://github.com/RiverTrail/RiverTrail
Final API: http://nightly.mozilla.org/
Sample workloads repo + tutorial: https://github.com/IntelLabs/ParallelJavaScript
Cool parallel JS articles: http://smallcultfollowing.com/babysteps/blog/categories/pjs/

Big thanks to Tatiana, Jaswanth and Stephan from Intel for their time and kindness.

Improved testing for selection interaction with CSS Regions

As you may know, our fellow Webkit and Blink contributors from Igalia were busy lately trying to make selection work properly with CSS Regions. Besides dealing with the challenges inherent in a complex code base like WebKit’s and Blink’s, they were also busy updating the test suite for selection in regions. The amount of tests we have now in both engines provides a good starting base for further work on selection in regions, minimizing the chance of code regressions. Moreover, the newly added tests have support for vertical writing modes in addition to the usual horizontal writing modes.

For a more detailed description of their work, check out their blog post! I look forward to seeing more tests submitted, especially related to the performance of selection in regions. If you are interested in this topic, you should follow this WebKit bug.

Take CSS Regions out for a drive in Safari 6.1 & 7!

We mentioned in an earlier blog post that Regions was available in iOS 7 Safari. With the Mavericks release, CSS Regions are available in Safari 6.1 & 7 too! You can use them with -webkit- prefix and have them work in all the latest versions of Safari on mobile and desktop.

This marks Safari as the second browser to ship an implementation of Regions enabled by default! This is a momentous occasion for us to see a feature we have nurtured for just over 2 years be more widely available for designers to experiment with and give us feedback. We could not have done it without the support of browser vendors such as Apple, Microsoft, and Google.

Learn

If you want to know the basics of CSS Regions, Apple’s Beth Dakin and our Mihnea Ovidenie have written a great introduction on the WebKit blog.

Play

You can also take a look at Baby Elephants a demo created using National Geographic content on the latest Safari on Mobile and Desktop to see how regions can enable more control over your web design.

Also take a look at some of pens on codepen.io that demonstrate how regions can be used (if you create some of your own, please use the tag ‘CSS Regions’ so others can take a look!).

Apply

Did you know you can use tools in Chrome & Safari Developer Tools to help with regions? To learn about that and more, head over to Smashing Magazine where CJ has written in depth on how regions can be used.

To celebrate this occasion, we are donating to the National Geographic Society on your behalf.

If you can questions, please do leave comments below or tell us on twitter.

Making Long-form Journalism More Repeatable

Last spring, we experimented with combining some amazing content from National Geographic with emerging layout features like CSS Regions and Shapes. We believe that the result — a feature called Forest Giant — was a really elegant and unique experience. However, like so many other popular long-form articles we’re now seeing on the web, it was hand-crafted and custom-designed around very specific content which meant it wasn’t easily repeatable. So for our next experiment, we wanted to see if we could do something that would integrate better with templating and content management systems. In other words, we wanted to see if we could develop some techniques for making all content on the web look better rather than just content that was hand-produced.

Our latest demo uses another amazing story from National Geographic about orphan elephants in Africa. Our goals for this project were:

  1. Responsiveness. We wanted the site to work on all screen sizes.
  2. Expressiveness. It had to showcase National Geographic’s rich imagery and content.
  3. Repeatability. The content had to be structured in a way that could be easily templatized or integrated with content management systems.

The answer we came up with was to combine viewport units and CSS Regions. Viewport units enable us to create pages that are the exact size of the browser’s viewport, or viewable area. That means each page completely fills the view on any screen (and in either orientation) when scrolled into position. We then decided to alternate between text pages and photographs in order to break the content up and to make it more visually appealing. For images, we use background-size:cover to ensure that they take up the entire element and give us a professional, full-bleed look.

Since the height of each page is determined by the viewport size rather than by the text inside it, we’re using regions to flow text through each container. The entire article is actually inside a single element, but by creating a region chain with each element a full 100% of the viewport size interspersed with full-bleed image containers, it becomes really straightforward to create clean, readable, and responsive pages.

This approach can be easily integrated with a template or content management system, combining graphics and text in a responsive and visually interesting manner. When considering the investment required for custom-built articles, it’s clear that regions can be an integral component of a much faster and more cost-effective digital publishing solution.

While Adobe is extremely focused on making layout and graphical contributions to the web platform, our work with National Geographic has inspired us to make a contribution of a different sort. Adobe will donate $1 per tweet that includes the hashtag #ProtectTheElephants to the National Geographic society in order to help save endangered elephants. So go make Adobe donate some money!

If you want to see the Orphan Elephants project firsthand, go check it out on GitHub.