Safari Technology Preview Release 128 is now available for download for macOS Big Sur and betas of macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
Safari Technology Preview Release 127 is now available for download for macOS Big Sur and betas of macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
In case you’re not familiar with WebKit‘s multiprocess model, allow me to explain some basics: In WebKitGTK and WPE we currently have three main processes which collaborate in order to ultimately render the web pages (this is subject to change, probably with the addition of new processes):
The UI process: this is the process of the application that instantiates the web view. For example, Cog when using WPE or Epiphany when using WebKitGTK. This process is usually in charge of interacting with the user/application and send events and requests to the other processes.
The network process: the goal of this process is to perform network requests for the different web processes and make the results available to them.
The web process: this is the process that really performs the heavy lifting. It’s in charge of requesting the resources required by the page (through the network process), create the DOM tree, execute the JS code, render the content, respond to user events, etc.
In a simple case, we would have a UI process, a web process and a network process working together to render a page. There are situations where (due to security reasons, performance, build options, etc.) the same UI process can be using more than a single web process at the same time, while these share the network process. I won’t go into details about all the possibilities here because that’s beyond the goal of this post (but it’s a good idea for a future post!). If you want more information related to this you can search for topics like process prewarm, process swap on navigation or service workers running on a dedicated processes. In any case, at any given moment, one of those web processes is always the main one performing all the tasks mentioned before, and the others are helpers for concrete tasks, so the situation is equivalent to the simpler case of a single UI process, a web process and an network process.
Developers know that processes have the bad habit of getting hung sometimes, and that can happen here as well to any of the processes. Unfortunately, in many cases that’s probably due to some kind of bug in the code executed by the processes and we can’t do much more about that than fixing the bug. But there’s a special kind of block that affects the web process only, and it’s related to the execution of JS code. Consider this simple JS script for example:
setTimeout(function() {
while(true) { }
}, 1000);
This will create an infinite loop during the JS execution after one second, blocking the main thread of the web process, and taking 100% of the execution time. The main thread, besides executing the JS code, is also in charge of processing incoming events or messages from the UI process, perform the layout, initiate redraws of the page, etc. But as it’s locked in the JS loop, it won’t be able to perform any of those tasks, causing the web process to become unresponsive to user input or API calls that come through the UI process. There are other situations that could make the process unresponsive, but the execution of faulty JS is probably the most common one.
WebKit has some internal tools to detect these situations, that mainly consist on timeouts that mark the process as unresponsive when some expected reply is not received in time from the web process. But on WebKitGTK and WPE there wasn’t a way to notify the application that’s using the web view that the web process had become unresponsive, or a way to recover from this situation (other than closing the application or the tab). This is fixed in trunk for both ports by adding two components to the WebKitWebView class:
A new property named is-web-process-responsive: this property will signal responsiveness changes of the web process. The application using the web view can connect to the notifications of the object property as with any other GObject class, and can also get the its value using the new webkit_web_view_get_is_web_process_responsive() API method.
A new API method webkit_web_view_terminate_web_process() that can be used kill the web process when it becomes unresponsive (but will also work with responsive ones). Any load performed after this call will spawn a new and shiny web process. When this method is used to kill a web process, the web view will emit the signal web-process-terminated with WEBKIT_WEB_PROCESS_TERMINATED_BY_API as the termination reason.
With these changes, the browser can now connect to the is-web-process-responsive signal changes. If the web process becomes unresponsive, the browser can launch a dialog informing the user of the problem, and ask whether to wait or kill the process. If the user chooses to kill the process, the browser can use webkit_web_view_terminate_web_process() to kill the problematic process and then reload (or load a new page) to go back to functional state.
These changes, among other wonderful features we’re developing at Igalia, will be available on the upcoming 2.34 release of WebKitGTK and WPE. I hope they are useful for you
Safari Technology Preview Release 126 is now available for download for macOS Big Sur and betas of macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
Many of the new Safari 15 features are now available in Safari Technology Preview 126:
Streamlined tab bar. Use Tab Groups to save and organize your tabs. Experience the new design. Test your site. Experiment with theme-color.
Live Text. Select and interact with text in images on the web in macOS Monterey betas on M1 Macs.
Improved Safari Web Extensions. Try out the support for declarativeNetRequest, which expanded to 150K content blocking rules and non-persistent background pages for improved performance.
Quick Notes. Add links and Safari highlights to remember important information or ideas on the web in macOS Monterey betas.
WebGL 2. Try out the improved 3D graphics performance of WebGL running on top of Metal via ANGLE.
If you see bugs or unexpected behavior with the interface of Safari Technology Preview, please file Feedback in Apple’s Feedback Assistant. If you come across an implementation bug in web technology, or have a request, please file a ticket at bugs.webkit.org.
UPDATE: If you downloaded an earlier version of Safari Technology Preview 126, you may need to reboot.
There’s a lot of news coming out of WWDC21 about WebKit and the web technology that’s shipping in Safari 15 on Apple’s platforms. Many of the new features were announced on Monday, at this year’s WWDC21 Keynote, and listed in the Safari 15 Beta Release Notes. But that’s not all, and we’re excited to share it with you.
Ten sessions at WWDC21 will go into greater detail and announce even more. New videos are released each day this week. You can watch them on the WWDC21 website, or in the Apple Developer app for macOS, iOS, iPadOS, and tvOS.
You can be part of the conversations around WWDC on the Apple Developer Forums, share your thoughts with @WebKit team on Twitter, or use other ways of staying in touch with folks involved in the WebKit project.
Safari Web Extensions use HTML, CSS, and JavaScript to offer people powerful browser customizations — and you can now create them for every device that supports Safari. Learn how to build a Safari Web Extension that works for all devices, and discover how you can convert an existing extension to Safari through Xcode and the Safari Web Extension Converter.
Learn how you can extend Safari’s functionality with Safari Web Extensions. We’ll introduce you to the latest WebExtension APIs, explore non-persistent background page support — a particularly relevant topic if you’re developing for iOS — and discover how you can use the Declarative Net Request WebExtensions API to block content on the web. Lastly, we’ll show you how to customize tabs in Safari 15.
Explore the latest updates to WKWebView. We’ll show you how to use APIs to manipulate web content without JavaScript, explore delegates that can help with WebRTC and Downloads, and share how you can easily create a richer web experience within your app.
Despite their prevalence, passwords inherently come with challenges that make them poorly suited to securing someone’s online accounts. Learn more about the challenges passwords pose to modern security and how to move beyond them. Explore the next frontier in account security with secure-by-design, public-key-based credentials that use the Web Authentication standard. Discover in this technology preview how Apple is approaching this standard in iOS 15 and macOS Monterey.
Learn how you can support on-device verification codes in your app or website for a more secure sign-in experience. We’ll explore the latest updates to the iCloud Keychain password manager and discover how verification codes, AutoFill, iCloud Keychain sync, and two-tap setup simplify the multi-step sign-in process. We’ll show you how to support this process in your apps and websites.
Develop in JavaScript, WebGL, or WebAssembly? Learn how the latest updates to Safari and WebKit — including language changes to class syntax — can help simplify your development process, enhance performance, and improve security. We’ll explore several web APIs that can help provide better interoperability and bring new capabilities to your web content.
Web Inspector provides the tools for you to understand and debug your web pages on macOS, iOS, and iPadOS. We’ll take you through the latest features and improvements to Web Inspector, including a new overlay for inspecting CSS Grid containers on your pages, even more configurable breakpoints to make debugging simpler, and the ability to create and edit Audits.
Discover how you can measure your ad campaigns in apps and on the web without compromising privacy. We’ll introduce you to Private Click Measurement and explore SKAdNetwork, which provides you with a more secure, private, and useful way to measure your app installs.
Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for Safari, and learn how to incorporate the tab bar in your designs. We’ll also take you through features like Live Text and accessibility best practices, explore the latest updates to CSS and Form Controls, and learn how to use the aspect-ratio property in CSS to create incredible websites.
Create SharePlay experiences that people can enjoy on the web and in your companion app. Learn how you can use the GroupActivities framework in combination with a companion website to bring SharePlay to Safari, letting people connect with each other for enjoyable group interactions — even if they haven’t yet downloaded your app from the App Store.
Today we are announcing an update to the MotionMark benchmark. This is a relatively small update, aimed at increasing test reliability and reproducibility. The largest change is the removal of the Focus subtest, which was causing significant variance in test results, and wasn’t measuring what it was intending to measure.
Benchmark Harness
Most of the changes in MotionMark 1.2 aim to reduce variance between multiple runs of the benchmark. We increased the warm-up time between each test by 1900ms and required at least 30 frames to be rendered in between tests to reduce interference between adjacent tests. Different tests stress different parts of the graphics pipeline, and their processing can overlap if they aren’t more strongly segmented.
We also implemented a few different strategies to decrease the benchmark’s sensitivity to individual frame times. The first is to make sure that the benchmark never makes any ramping decisions based on the time of a single frame, but instead requires at least 9 frames before adjusting complexity. In addition, the benchmark now discards outlier frame times.
Focus Subtest
Modern browsers use a compositing architecture, where part of the graphics work is responsible for drawing individual elements into layers, and other graphics work is responsible for compositing layers together into a final image. The interface between these two parts behaves differently in different browsers, and may indeed be entirely asynchronous, possibly providing almost no backpressure if the compositor is running more slowly than element painting.
In browser engines which run the compositor asynchronously (like WebKit), the Focus subtest measured how fast descriptions of work can be delivered to the compositor, rather than how fast the compositor can actually execute that work, which is what the subtest was trying to measure. In addition, the backpressure in the Focus subtest is indirect, passes through the scheduler, and is therefore noisy. It was causing a huge variance in subtest score on machines which have relatively high element painting performance compared to their compositor performance.
Conclusion
MotionMark 1.2 produces significantly less score variance than previous versions of MotionMark on a wide variety of machines of varying relative performance. Because of the removal of the Focus subtest, MotionMark 1.2 is also more reflective of real-world graphics performance across browsers.
ChangeLog
Here is a list of all the changes that have gone into MotionMark 1.2:
As you might already know this work is part of the Open Prioriziatation campaign by Igalia that has been funded by a lot of people. Thank you all for your support!
The high level summary is that the implementation in WebKit can be considered to be complete and all the :focus-visible patches have been included on the last Safari Technology Preview 125 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.
Implementation details
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 :focus-visible) but those issues have been considered to be fine as they depend on the different browsers specific behavior.
You can test this feature in Safari Technology Preview (since release 125) by enabling the runtime flag in the menu (Develop > Experimental Features > :focus-visible pseudo-class). Please play with it and report any issue you might find.
Debate time
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.
So let’s start from the beginning, what is focus-visible? A broad description of :focus-visible is that it will match based on when the browser would natively show a focus ring. 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.
However buttons in Safari are different to other browsers, and that’s because Safari follows the Mac platform conventions. Buttons are not click focusable in Safari (though you can still focus them via keyboard with Option + Tab), as they don’t receive focus on click they don’t even match :focus, 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 invisible navigation caret 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.
This is only part of the problem, the web is full of things that are focusable, like <div tabindex="0"> elements. These elements have always matched (and still match) :focus by default, and have usually showed a focus ring when focused via mouse click. Web authors generally want to hide the focus ring when clicking on <div tabindex="0"> elements, and that’s why the current :focus-visible implementations don’t match in this case. Chrome and Firefox are using :focus-visible in the User Agent (UA) style sheet, so they don’t show a focus ring when clicking on such elements. However, Apple has expressed some concerns here that it might change the default focus indicator behavior in a way that might differ from their platform philosophy, and thus needs more review.
During these conversations an idea showed up as potential solution. What if we show a focus ring when users click on a generic <div tabindex="0">, but we don’t if that element has some specific role, e.g. <div tabindex="0" role="button">. This would give web authors the possibility to get their desired behavior by just adding a role to those elements.
This would make <div tabindex="0" role="button"> 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. James Craig came out with a scenario in which an user is scrolling the page with the spacebar, then they click on a <div tabindex="0" role="button">, 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 :focus-visible implementation, they user will start to see a focus ring on that <div tabindex="0" role="button"> after entering the spacebar).
On that discussion James has shared an idea to add a new CSS property (or it could be a HTML attribute) that marks an element so it cannot receive focus via mouse click. That would make possible to make buttons work like in Safari in other browsers, or make a <div tabindex="0"> 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.
On the same issue Brian Kardell is proposing some alternatives, for example having some special parameter like :focus-visible(platform) (syntax to be defined) that could behave differently in Safari than other browsers, so Safari can use it in the UA style sheet, while :focus-visible alone would work the same in all browsers.
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.
Some numbers
Let’s do a final review of the total numbers (as nothing has changed in May):
26 PRs merged in WPT.
27 patches landed in WebKit.
9 patches landed in Chromium.
2 PRs merged in CSS spcs.
1 PR merged in HTML spec.
Wrapping up
:focus-visible has been added to WebKit thanks to the support from many individual people and organizations that make it happen through the Open Prioritization experiment by Igalia. Once more big thanks to you all! 🙏
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 :focus-visible 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.
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.
Finally, thanks to everyone who has helped in the different conversations, reviews, etc. during these months.
Safari Technology Preview Release 125 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
This is the last post of the series showing interesting debugging tools, I hope you have found it useful. Don’t miss the custom scripts at the bottom to process GStreamer logs, help you highlight the interesting parts and find the root cause of difficult bugs. Here are also the previous posts of the series:
This is useful to know why a particular package isn’t found and what are the default values for PKG_CONFIG_PATH when it’s not defined. For example:
Adding directory '/usr/local/lib/x86_64-linux-gnu/pkgconfig' from PKG_CONFIG_PATH
Adding directory '/usr/local/lib/pkgconfig' from PKG_CONFIG_PATH
Adding directory '/usr/local/share/pkgconfig' from PKG_CONFIG_PATH
Adding directory '/usr/lib/x86_64-linux-gnu/pkgconfig' from PKG_CONFIG_PATH
Adding directory '/usr/lib/pkgconfig' from PKG_CONFIG_PATH
Adding directory '/usr/share/pkgconfig' from PKG_CONFIG_PATH
If we have tuned PKG_CONFIG_PATH, maybe we also want to add the default paths. For example:
SYSROOT=~/sysroot-x86-64
export PKG_CONFIG_PATH=${SYSROOT}/usr/local/lib/pkgconfig:${SYSROOT}/usr/lib/pkgconfig
# Add also the standard pkg-config paths to find libraries in the system
export PKG_CONFIG_PATH=${PKG_CONFIG_PATH}:/usr/local/lib/x86_64-linux-gnu/pkgconfig:\
/usr/local/lib/pkgconfig:/usr/local/share/pkgconfig:/usr/lib/x86_64-linux-gnu/pkgconfig:\
/usr/lib/pkgconfig:/usr/share/pkgconfig
# This tells pkg-config where the "system" pkg-config dir is. This is useful when cross-compiling for other
# architecture, to avoid pkg-config using the system .pc files and mixing host and target libraries
export PKG_CONFIG_LIBDIR=${SYSROOT}/usr/lib
# This could have been used for cross compiling:
#export PKG_CONFIG_SYSROOT_DIR=${SYSROOT}
Man in the middle proxy for WebKit
Sometimes it’s useful to use our own modified/unminified files with a 3rd party service we don’t control. Mitmproxy can be used as a man-in-the-middle proxy, but I haven’t tried it personally yet. What I have tried (with WPE) is this:
Add an /etc/hosts entry to point the host serving the files we want to change to an IP address controlled by us.
Configure a web server to provide the files in the expected path.
:bulb: Pro tip: If you have to debug minified/obfuscated JavaScript code and don’t have a deobfuscated version to use in a man-in-the-middle fashion, use http://www.jsnice.org/ to deobfuscate it and get meaningful variable names.
Bandwidth control for a dependent device
If your computer has a “shared internet connection” enabled in Network Manager and provides access to a dependent device , you can control the bandwidth offered to that device. This is useful to trigger quality changes on adaptive streaming videos from services out of your control.
This can be done using tc, the Traffic Control tool from the Linux kernel. You can use this script to automate the process (edit it to suit to your needs).
Useful scripts to process GStreamer logs
I use these scripts in my daily job to look for strange patterns in GStreamer logs that help me to find the cause of the bugs I’m debugging:
h: Highlights each expression in the command line in a different color.
mgrep: Greps (only) for the lines with the expressions in the command line and highlights each expression in a different color.
filter-time: Gets a subset of the log lines between a start and (optionally) an end GStreamer log timestamp.
highlight-threads: Highlights each thread in a GStreamer log with a different color. That way it’s easier to follow a thread with the naked eye.
remove-ansi-colors: Removes the color codes from a colored GStreamer log.
aha: ANSI-HTML-Adapter converts plain text with color codes to HTML, so you can share your GStreamer logs from a web server (eg: for bug discussion). Available in most distros.
gstbuffer-leak-analyzer: Analyzes a GStreamer log and shows unbalances in the creation/destruction of GstBuffer and GstMemory objects.
In this new post series, I’ll show you how both existing and ad-hoc tools can be helpful to find the root cause of some problems. Here are also the older posts of this series in case you find them useful:
Use strace to know which config/library files are used by a program
If you’re becoming crazy supposing that the program should use some config and it seems to ignore it, just use strace to check what config files, libraries or other kind of files is the program actually using. Use the grep rules you need to refine the search:
First, try to strace -e trace=signal -p 1234 the killed process.
If that doesn’t work (eg: because it’s being killed with the uncatchable SIGKILL signal), then you can resort to modifying the kernel source code (signal.c) to log the calls to kill():
If you ever find yourself with little time in front of a stubborn build system and, no matter what you try, you can’t get the right flags to the compiler, think about putting something (a wrapper) between the build system and the compiler. Example for g++:
#!/bin/bash
main() {
# Build up arg[] array with all options to be passed
# to subcommand.
i=0
for opt in "$@"; do
case "$opt" in
-O2) ;; # Removes this option
*)
arg[i]="$opt" # Keeps the others
i=$((i+1))
;;
esac
done
EXTRA_FLAGS="-O0" # Adds extra option
echo "g++ ${EXTRA_FLAGS} ${arg[@]}" # >> /tmp/build.log # Logs the command
/usr/bin/ccache g++ ${EXTRA_FLAGS} "${arg[@]}" # Runs the command
}
main "$@"
Make sure that the wrappers appear earlier than the real commands in your PATH.
The make wrapper can also call remake instead. Remake is fully compatible with make but has features to help debugging compilation and makefile errors.
The source code shown below must be placed in the .h where the class to be debugged is defined. It’s written in a way that doesn’t need to rebuild RefCounted.h, so it saves a lot of build time. It logs all refs, unrefs and adoptPtrs, so that any anomaly in the refcounting can be traced and investigated later. To use it, just make your class inherit from LoggedRefCounted instead of RefCounted.
Example output:
void WTF::adopted(WTF::LoggedRefCounted<T>*) [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount 1
void WTF::adopted(WTF::LoggedRefCounted<T>*) [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount 1
^^^ Two adopts, this is not good.
void WTF::LoggedRefCounted<T>::ref() [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount 1 --> ...
void WTF::LoggedRefCounted<T>::ref() [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount ... --> 2
void WTF::LoggedRefCounted<T>::deref() [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount 2 --> ...
void WTF::LoggedRefCounted<T>::deref() [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount ... --> 1
void WTF::adopted(WTF::LoggedRefCounted<T>*) [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount 1
void WTF::LoggedRefCounted<T>::deref() [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount 1 --> ...
void WTF::LoggedRefCounted<T>::deref() [with T = WebCore::MediaSourceClientGStreamerMSE]: this=0x673c07a4, refCount 1 --> ...
^^^ Two recursive derefs, not good either.
It only works #if ENABLE(DEVELOPER_MODE), so you might want to remove those ifdefs if you’re building in Release mode.
Log tracers
In big pipelines (e.g. playbin) it can be very hard to find what element is replying to a query or handling an event. Even using gdb can be extremely tedious due to the very high level of recursion. My coworker Alicia commented that using log tracers is more helpful in this case.
GST_TRACERS=log enables additional GST_TRACE() calls all accross GStreamer. The following example logs entries and exits into the query function.
GST_TRACERS=log GST_DEBUG='query:TRACE'
The names of the logging categories are somewhat inconsistent:
log (the log tracer itself)
GST_BUFFER
GST_BUFFER_LIST
GST_EVENT
GST_MESSAGE
GST_STATES
GST_PADS
GST_ELEMENT_PADS
GST_ELEMENT_FACTORY
query
bin
The log tracer code is in subprojects/gstreamer/plugins/tracers/gstlog.c.
Safari Technology Preview Release 124 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
Again this is a status report about the work Igalia is doing on the implementation of :focus-visible in WebKit, which is part of the Open Prioriziatation campaign. Thanks everyone supporting this!
There has been some nice progress in April, though some things are still under ongoing discussion.
Script focus and :focus-visible
Finally we decided to reflect the reality in the script focus tests that I created, and merge them on WPT. 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 .tentative.
So we opened a separated issue to explain the situation and gather more feedback about what to do here.
Once we had the tests I implemented the same behavior as other browsers, the current one reflected on the tests, in WebKit. The patch got reviewed and merged, so script focus and :focus-visible work the same in all browsers right now.
:focus-visible and Shadow DOM
The test that checks that :focus-visible doesn’t match on ShadowRoot was also merged in WPT. That’s the current behavior on WebKit implementation too. More about this in January’s post.
On the review of those patches, some new discussion started about different things related to :focus-visible feature, like why a keyboard input triggers :focus-visible matching. The discussion with Apple engineers is ongoing on the bug and let’s see how it ends.
Some numbers
Let’s take a look to the numbers again:
26 PRs merged in WPT (5 in April).
27 patches landed in WebKit (10 in April).
9 patches landed in Chromium (2 in April).
2 PRs merged in CSS spcs.
1 PR merged in HTML spec.
Next steps
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.
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.
The thread id is generated by Linux and can take values higher than 1-9, just like PIDs. This thread number is useful to know which function calls are issued by the same thread, avoiding confusion between threads.
And use it like this in all the functions you want to trace:
void somefunction() {
MYTRACER();
// Some other code...
}
The constructor will log when the execution flow enters into the function and the destructor will log when the flow exits.
Setting breakpoints from C
In the C code, just call raise(SIGINT) (simulate CTRL+C, normally the program would finish).
And then, in a previously attached gdb, after breaking and having debugging all you needed, just continue the execution by ignoring the signal or just plainly continuing:
(gdb) signal 0
(gdb) continue
There’s a way to do the same but attaching gdb after the raise. Use raise(SIGSTOP) instead (simulate CTRL+Z). Then attach gdb, locate the thread calling raise and switch to it:
(gdb) thread apply all bt
[now search for "raise" in the terminal log]
Thread 36 (Thread 1977.2033): #1 0x74f5b3f2 in raise () from /home/enrique/buildroot/output2/staging/lib/libpthread.so.0
(gdb) thread 36
Now, from a terminal, send a continuation signal: kill -SIGCONT 1977. Finally instruct gdb to single-step only the current thread (IMPORTANT!) and run some steps until all the raises have been processed:
(gdb) set scheduler-locking on
(gdb) next // Repeat several times...
Know the name of a GStreamer function stored in a pointer at runtime
Just use this macro:
GST_DEBUG_FUNCPTR_NAME(func)
Detecting memory leaks in WebKit
RefCountedLeakCounter is a tool class that can help to debug reference leaks by printing this kind of messages when WebKit exits:
Safari 14.1 for macOS Big Sur, iPadOS 14.5, and iOS 14.5 brings new WebKit features, APIs, performance improvements, and improved compatibility for web developers. Take a look.
Flexbox Gap Support
Safari 14.1 now supports the gap property inside Flexbox containers, along with row-gap and column-gap. Gaps in Flexbox make it possible for web developers to create space between Flex items without resorting to annoying margin hacks.
The gap property, of course, has worked inside Grid containers since Safari 12. Because gap is supported for Grid, testing support for the property in a Flexbox formatting context wasn’t possible by using feature queries (@supports). By adding support for gap in Flexbox, Safari brings the web closer to widespread compatibility.
For more information, see the “flex containers” definition in the “Row and Column Gutters” section of the CSS Box Alignment specification.
Date & Time Inputs on macOS
In HTML, the date, time, datetime-local attributes for the input element prompt the browser to create date and/or time controls — an interface that’s designed to let the user easily enter a time or a date, usually with a calendar. Safari has supported these input fields on iOS since 2012. Now with Safari 14.1, these fields are supported on macOS as well.
CSS Individual Transform Properties
With WebKit support of Individual Transform Properties, web developers can write CSS rules and keyframe animations in a more straightforward way.
For years, the transform property has provided the ability to scale, rotate, and translate. You could access this power through code like this:
This is a syntactical and conceptual difference — the result is the same. You might find it easier to understand and remember.
This syntax also avoids unintentional overrides of other transform-related properties and eliminates pre-computing intermediate values when using keyframe animations.
A valuable metric to improving the performance of web content is the time it takes for the user-agent to show something to the user. WebKit added the Paint Timing API to its suite of performance APIs to provide this measurement. Developers can measure:
first-paint for the time it takes to show pixels of anything that is not the user-agent’s default background
first-contentful-paint to get the time for the user to see content such as text or an image
The Web Speech API in WebKit has supported speech synthesis for some time. Now, Safari supports speech recognition powered by the same speech engine as Siri. That means web developers can enjoy the benefits of high-quality transcription for over 50 languages and dialects. Note that users will need Siri enabled in System Preferences on macOS or Settings in iOS or iPadOS for the API to be available to be used.
For more information on speech recognition and speech synthesis on the web, see the Web Speech API specification.
Web Audio API
As a continuing area of focus, Safari compatibility improvements are ongoing. Updates to the Web Audio API bring it to standards compliance. It is now available unprefixed with support for advanced audio processing via Audio Worklets.
There are several new interoperability improvements in WebKit:
Web Animations now work on 122 more properties
Animation of pseudo-elements beyond ::before and ::after.
Improved mouse support on iPadOS and in Catalyst apps, including wheel events and hover/pointer media queries
Updated wheel Event handling improves performance and interoperability with other browsers. Wheel handlers registered on root objects (window/document/body) with default arguments will be treated as passive. Pages that want to prevent the default handling of Wheel Events which result from gestures like trackpad swipes on macOS, must now call preventDefault() on the first Wheel Event in the sequence.
MediaRecorder API
WebKit added support for MediaStream Recording, also known as the MediaRecorder API. It allows websites to record audio and video, then encode them using the platform’s available set of default encodings.
WebKit added improved support for WebM media. With Safari 14, WebKit added support for WebM via MSE on iPadOS and macOS. Now, WebKit on macOS supports WebM files containing VP8 or VP9 video tracks and Vorbis audio tracks. Developers can now offer WebM content to users, though users will enjoy the best quality and power efficiency with h.264 or HEVC.
Updates to the JavaScript engine in WebKit adds new support for private class fields to enforce restrictions for static and instance fields in ES6 classes. Developers that used conventions before can switch to built-in support to manage access to properties. Public static class fields are also available, adding to the previously supported public instance class fields.
New Internationalization API features include Intl.DisplayNames, Intl.ListFormat, and Intl.Segmenter. Intl.DateTimeFormat was updated to support dateStyle and timeStyle options. The Intl.NumberFormat method was updated with support to display measurement units, notation formats, sign display, and narrow symbol currency formatting.
WeakRef supports holding an object that can be garbage collected when there are no strong references to it. The FinalizationRegistry object compliments WeakRef to manage cleanup tasks when a target object is garbage collected.
WebAssembly support, introduced with Safari 11, is a low-level binary format used as a compilation target for existing languages.
Threading
WebAssembly support for the atomic instructions in the Threading specification, are enabled in Safari 14.1. Note, that until Safari supports the COEP/COOP headers, shared memory is not enabled as it could expose users to cross-origin Specter data leaks.
For more information, see the WebAssembly Specification for WASM Threads.
WebAssembly Sign Extension Operator
New sign-extension operator support preserves the number’s sign while extending the number of bits of an integer.
This release features Private Click Measurement – a proposed web standard that enables advertisers to measure the effectiveness of click-through ad campaigns in a privacy-preserving way. This new technology is part of a larger effort to remove cross-site tracking from the web and provide privacy-preserving alternatives where needed.
WebKit has improved the Storage Access API to allow per-page storage access and allow nested iframes to request storage access. These interoperability changes are from the ongoing standardization of the Storage Access API together with Mozilla, Microsoft, and the web community. This API has shipped in Safari since 2018 and is part of a larger effort to remove cross-site tracking from the web and provide privacy-preserving alternatives where needed.
The updates to Web Inspector available in these releases include:
A new three-panel layout in the Elements Tab brings the Styles sidebar into an independent panel alongside the existing details sidebar.
The new Font panel gives content authors visibility into details of the fonts used on the page.
Breakpoints in the Sources Tab can now be configured with conditions or actions, reducing the need for stray console.log statements left in production code.
These improvements are available to users running Safari on iPadOS 14.5, iOS 14.5, or Safari 14.1 on macOS Big Sur (11.3), macOS Catalina, or macOS Mojave. These features were also available to web developers in Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122.
If you run into any issues, we welcome your bug reports for Safari or WebKit bugs for web content issues. Send us a tweet @webkit to share your thoughts on this release.
Note that an earlier version of this blog post described updates to Web Share API that are not enabled by default. Additional clarification of WebM support and WebAssembly Threading has also been added.
This is the continuation of the GStreamer WebKit debugging tricks post series. In the next three posts, I’ll focus on what we can get by doing some little changes to the source code for debugging purposes (known as “instrumenting”), but before, you might want to check the previous posts of the series:
Know all the env vars read by a program by using LD_PRELOAD to intercept libc calls
// File getenv.c
// To compile: gcc -shared -Wall -fPIC -o getenv.so getenv.c -ldl
// To use: export LD_PRELOAD="./getenv.so", then run any program you want
// See http://www.catonmat.net/blog/simple-ld-preload-tutorial-part-2/
#define _GNU_SOURCE
#include <stdio.h>
#include <dlfcn.h>
// This function will take the place of the original getenv() in libc
char *getenv(const char *name) {
printf("Calling getenv(\"%s\")\n", name);
char *(*original_getenv)(const char*);
original_getenv = dlsym(RTLD_NEXT, "getenv");
return (*original_getenv)(name);
}
See the breakpoints with command example to know how to get the same using gdb. Check also Zan’s libpine for more features.
Track lifetime of GObjects by LD_PRELOADing gobject-list
The gobject-list project, written by Thibault Saunier, is a simple LD_PRELOAD library for tracking the lifetime of GObjects. When loaded into an application, it prints a list of living GObjects on exiting the application (unless the application crashes), and also prints reference count data when it changes. SIGUSR1 or SIGUSR2 can be sent to the application to trigger printing of more information.
Overriding the behaviour of a debugging macro
The usual debugging macros aren’t printing messages? Redefine them to make what you want:
First arguments (channel, msg) are captured intependently
The remaining args are captured in __VA_ARGS__
do while(false) is a trick to avoid {braces} and make the code block work when used in if/then/else one-liners
#channel expands LOG(MyChannel,....) as printf("%s: ", "MyChannel"). It’s called “stringification”.
## __VA_ARGS__ expands the variable argument list as a comma-separated list of items, but if the list is empty, it eats the comma after “msg”, preventing syntax errors
Print the compile-time type of an expression
Use typeid(<expression>).name(). Filter the ouput through c++filt -t:
Abusing the compiler to know all the places where a function is called
If you want to know all the places from where the GstClockTime toGstClockTime(float time) function is called, you can convert it to a template function and use static_assert on a wrong datatype like this (in the .h):
Note that T=float is different to integer (is_integral). It has nothing to do with the float time parameter declaration.
You will get compile-time errors like this on every place the function is used:
WebKitMediaSourceGStreamer.cpp:474:87: required from here
GStreamerUtilities.h:84:43: error: static assertion failed: Don't call toGstClockTime(float)!
Use pragma message to print values at compile time
Sometimes is useful to know if a particular define is enabled:
#include <limits.h>
#define _STR(x) #x
#define STR(x) _STR(x)
#pragma message "Int max is " STR(INT_MAX)
#ifdef WHATEVER
#pragma message "Compilation goes by here"
#else
#pragma message "Compilation goes by there"
#endif
...
The code above would generate this output:
test.c:6:9: note: #pragma message: Int max is 0x7fffffff
#pragma message "Int max is " STR(INT_MAX)
^~~~~~~
test.c:11:9: note: #pragma message: Compilation goes by there
#pragma message "Compilation goes by there"
^~~~~~~
As the first quarter of 2021 has aready come to a close, we reckon it’s time to recap our achievements from the second half of 2020, and update you on the improvements we have been making to the multimedia experience on the Web and Linux in general.
We have closed ~100 issues related with multimedia in WebKitGTK/WPE, such as fixed seek issues while playback, plugged memory leaks, gardening tests, improved Flatpak-based developing work-flow, enabled new codecs, etc.. Overall, we improved a bit the multimedia’s user experience on these Webkit engine ports.
To highlight a couple tasks, we did some maintenance work on WebAudio backends, and we upstreamed an internal audio mixer, keeping only one connection to the audio server, such as PulseAudio, instead of multiple connections, one for every audio resource. The mixer combines all streams into a single audio server connection.
We have been working on a new MSE backend for a while, but along the way many related bugs have appeared and they were squashed. Also many code cleanups has been carried out. Though it has been like yak shaving, we are confident that we will reach the end of this long and winding road soonish.
Regarding digital protected media playback, we worked to upstream OpenCDM, support with Widevine, through RDK’s Thunder framework, while continued with the usual maintenance of the others key systems, such as Clear Key, Widevine and PlayReady.
Just as EME, WebRTC is not currently enabled by default in browsers such as Epiphany because license problems, but they are available for custom adopters, and we are maintaining it. For example, we collaborated to upgrade LibWebRTC to M87 and fixed the expected regressions and gardening.
Along the way we experimented a bit with the new GPUProcess for capture devices, but we decided to stop the experimentation while waiting for a broader adoption of the process, for example in graphics rendering, in WPE/WebKitGTK.
GPUProcess work will be retaken at some point, because it’s not, currently, a hard requirement, since we already have moved capture devices handling from the UIProcess to the WebProcess, isolating all GStreamer operations in the latter.
GStreamer is one of our core multimedia technologies, and we contribute on it on a daily basis. We pushed ~400 commits, with similar number of code reviews, along the second half of 2020. Among of those contributions let us highlight the following list:
A lot of bug fixing aiming for release 1.18.
Reworked and enhanced decodebin3, the GstTranscoder
API and encodebin.
Merged av1parse in video parsers plugin.
Merged qroverlay plugin.
Iterated on the mono-repo
proposal, which requires consensus and coordination among the whole community.
gstwpe element has been greatly improved from new user requests.
Contributed on the new libgstcodecs library, which enables stateless video decoders through different platforms (for example, v4l2, d3d11, va, etc.).
Developed a new plugin for VA-API using this library, exposing H.264, H.265, VP9, VP8, MPEG2 decoders and a full featured postprocessor, with better performance, according our measurements, than GStreamer-VAAPI.
Conferences
Despite 2020 was not a year for conferences, many of them went virtual. We attended one, the Mile high video conference, and participated in the Slack workspace.
Thank you for reading this report and stay tuned with our work.
This post is a continuation of a series of blog posts about the most interesting debugging tricks I’ve found while working on GStreamer WebKit on embedded devices. These are the other posts of the series published so far:
Sometimes the symbol names aren’t printed in the stack memdump. You can do this trick to iterate the stack and print the symbols found there (take with a grain of salt!):
(gdb) set $i = 0
(gdb) p/a *((void**)($sp + 4*$i++))
[Press ENTER multiple times to repeat the command]
$46 = 0xb6f9fb17 <_dl_lookup_symbol_x+250>
$58 = 0xb40a9001 <g_log_writer_standard_streams+128>
$142 = 0xb40a877b <g_return_if_fail_warning+22>
$154 = 0xb65a93d5 <WebCore::MediaPlayerPrivateGStreamer::changePipelineState(GstState)+180>
$164 = 0xb65ab4e5 <WebCore::MediaPlayerPrivateGStreamer::playbackPosition() const+420>
...
Many times it’s just a matter of gdb not having loaded the unstripped version of the library. /proc/<PID>/smaps and info proc mappings can help to locate the library providing the missing symbol. Then we can load it by hand.
For instance, for this backtrace:
#0 0x740ad3fc in syscall () from /home/enrique/buildroot-wpe/output/staging/lib/libc.so.6
#1 0x74375c44 in g_cond_wait () from /home/enrique/buildroot-wpe/output/staging/usr/lib/libglib-2.0.so.0
#2 0x6cfd0d60 in ?? ()
In a shell, we examine smaps and find out that the unknown piece of code comes from libgstomx:
Now we load the unstripped .so in gdb and we’re able to see the new symbol afterwards:
(gdb) add-symbol-file /home/enrique/buildroot-wpe/output/build/gst-omx-custom/omx/.libs/libgstomx.so 0x6cfc1000
(gdb) bt
#0 0x740ad3fc in syscall () from /home/enrique/buildroot-wpe/output/staging/lib/libc.so.6
#1 0x74375c44 in g_cond_wait () from /home/enrique/buildroot-wpe/output/staging/usr/lib/libglib-2.0.so.0
#2 0x6cfd0d60 in gst_omx_video_dec_loop (self=0x6e0c8130) at gstomxvideodec.c:1311
#3 0x6e0c8130 in ?? ()
Useful script to prepare the add-symbol-file:
cat /proc/715/smaps | grep '[.]so' | sed -e 's/-[0-9a-f]*//' | { while read ADDR _ _ _ _ LIB; do echo "add-symbol-file $LIB 0x$ADDR"; done; }
The “figuring out corrupt ARM stacktraces” post has some additional info about how to use addr2line to translate memory addresses to function names on systems with a hostile debugging environment.
Debugging a binary without debug symbols
There are times when there’s just no way to get debug symbols working, or where we’re simply debugging on a release version of the software. In those cases, we must directly debug the assembly code. The gdb text user interface (TUI) can be used to examine the disassebled code and the CPU registers. It can be enabled with these commands:
layout asm
layout regs
set print asm-demangle
Some useful keybindings in this mode:
Arrows: scroll the disassemble window
CTRL+p/n: Navigate history (previously done with up/down arrows)
CTRL+b/f: Go backward/forward one character (previously left/right arrows)
CTRL+d: Delete character (previously “Del” key)
CTRL+a/e: Go to the start/end of the line
This screenshot shows how we can infer that an empty RefPtr is causing a crash in some WebKit code.
Wake up an unresponsive gdb on ARM
Sometimes, when you continue (‘c’) execution on ARM there’s no way to stop it again unless a breakpoint is hit. But there’s a trick to retake the control: just send a harmless signal to the process.
kill -SIGCONT 1234
Know which GStreamer thread id matches with each gdb thread
Sometimes you need to match threads in the GStreamer logs with threads in a running gdb session. The simplest way is to ask it to GThread for each gdb thread:
(gdb) set output-radix 16
(gdb) thread apply all call g_thread_self()
This will print a list of gdb threads and GThread*. We only need to find the one we’re looking for.
Generate a pipeline dump from gdb
If we have a pointer to the pipeline object, we can call the function that dumps the pipeline:
CSS Grid Layout is a web-standard layout system used to define a grid structure of rows and columns in CSS. HTML elements can then be distributed to the resulting grid cells to achieve a flexible and predictable layout.
This layout system is highly capable, but using it requires a shift away from the mental models of the past. When the grid definition itself is not visible (only its effects on the placement of items are visible), you can easily get lost and confused, not understanding why the layout doesn’t work as intended.
When you can see both the structure of the grid and its effects in context on the page, it makes working with CSS Grid Layout more approachable and easier to reason about.
Overlay showing grid structure of concert poster demo
CSS Grid Inspector is a new tool in Web Inspector which helps you visualize grids defined using CSS Grid Layout notation and verify that elements are positioned as expected. It was introduced in Safari Technology Preview 123.
Visualizing grids
CSS Grid Inspector shows a page overlay on top of HTML elements which are CSS Grid containers. An element is a CSS Grid container when its display CSS property has a value of either grid or inline-grid.
You can turn on the overlay for a CSS Grid container in one of two ways:
Click the “grid“ badge shown next to the element in the DOM Tree outline of the Elements Tab.
Open the new Layout panel in the details sidebar of the Elements Tab, then click the checkbox next to the corresponding element in the Grid Overlays list.
A “grid” badge shown next to <div id=”css-grid-demo”> in the DOM Tree outline.
Layout sidebar panel with the overlay enabled for the “div#css-grid-demo” CSS Grid container
The overlay can show:
Lines which define the grid rows, and columns (a.k.a. grid tracks)
Spacing between grid tracks (a.k.a. grid gaps)
Labels for line numbers and grid track sizes
Labels for grid line names, and grid area names
Elements positioned on a grid defined with CSS Grid Layout
CSS Grid Inspector overlay showing labels for grid line numbers and grid track sizes
Configuring the CSS Grid Inspector overlay
The CSS Grid Inspector overlay can show many properties of a grid’s components according to the CSS properties used. Showing everything all at once can be overwhelming. Depending on your workflow, you may prefer to see all or just a subset.
Use the settings in the Page Overlay Options section of the Layout panel in the details sidebar to configure the level of detail presented with the overlay. Changes are applied immediately and saved across Web Inspector sessions.
You can toggle the following options:
Track Sizes: shows a label with the user-authored value for the track size or auto if the value is not explicitly set. This helps visual inspection by matching the user-authored value set in CSS with the corresponding grid track on the page.
Line Numbers: shows a label with the ordinal and the reverse ordinal of explicit grid lines. The reverse ordinal is useful when referencing lines backward from the end. For example, 1 -4 means “the first and the fourth last”.
Line Names: shows a label with the user-defined name for a grid line or the implicit grid line name derived from a grid area name. When undefined, this does nothing. Learn more about implicit grid line names on MDN.
Area Names: shows a label with the user-defined name for a group of cells. When undefined, this does nothing.
Extended Grid Lines: extends grid lines infinitely in their respective directions. This is useful for checking alignment with other elements on the page.
To change the overlay color, use the color swatch next to the corresponding element in the Grid Overlays list found in the Layout sidebar panel. The new color will be saved for that element on that page and is remembered across Web Inspector sessions. When you return later to inspect the same element, the overlay will use the color you picked.
Try it out
If you’re using Safari Technology Preview 123 or a later release, you can inspect the example below to try out the CSS Grid Inspector on this page. Open Web Inspector, go to the Elements Tab, switch to the Layout sidebar panel, then toggle the grid overlay for the element marked div#css-grid-demo.
A
B
C
D
If you encounter any issues, please file a report at webkit.org/new-inspector-bug.
If you want to share feedback or ideas, please send them to us on Twitter: @webkit.
I’ve been developing and debugging desktop and mobile applications on embedded devices over the last decade or so. The main part of this period I’ve been focused on the multimedia side of the WebKit ports using GStreamer, an area that is a mix of C (glib, GObject and GStreamer) and C++ (WebKit).
Over these years I’ve had to work on ARM embedded devices (mobile phones, set-top-boxes, Raspberry Pi using buildroot) where most of the environment aids and tools we take for granted on a regular x86 Linux desktop just aren’t available. In these situations you have to be imaginative and find your own way to get the work done and debug the issues you find in along the way.
I’ve been writing down the most interesting tricks I’ve found in this journey and I’m sharing them with you in a series of 7 blog posts, one per week. Most of them aren’t mine, and the ones I learnt in the begining of my career can even seem a bit naive, but I find them worth to share anyway. I hope you find them as useful as I do.
Breakpoints with command
You can break on a place, run some command and continue execution. Useful to get logs:
break getenv
command
# This disables scroll continue messages
# and supresses output
silent
set pagination off
p (char*)$r0
continue
end
break grl-xml-factory.c:2720 if (data != 0)
command
call grl_source_get_id(data->source)
# $ is the last value in the history, the result of
# the previous call
call grl_media_set_source (send_item->media, $)
call grl_media_serialize_extended (send_item->media,
GRL_MEDIA_SERIALIZE_FULL)
continue
end
Another month is gone, and we are back with another status update (see January and February ones).
This is about the work Igalia is doing on the implementation of :focus-visible in WebKit. This is a part of the Open Prioriziatation campaign and being sponsored by many people. Thank you!
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.
Implementation details
The initial patch is available in the last Safari Technology Preview (STP) releases behind a runtime flag, but it has an annoying bug that was causing the body element to match :focus-visible 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.
In addition I realized that :focus-visible 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 :focus-within, which has been shipping for a long time, isn’t available in WebKit Web Inspector yet, so I cooked a simple patch 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 :focus-within and :focus-visible to the Web Inspector is going to be pretty straight forward.
Spec discussions
This was the main part of the work during March, and the goal was to reach some agreement before finishing the implementation bits.
The main issue was how :focus-visible should work when a script moves focus. 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 set of new tests. These tests demonstrated some interesting incompatibilities. Based on this, we compared the results with the widely used polyfill 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.
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 PR for the HTML spec trying to define when a browser should draw a focus indicator, and thus match :focus-visible. There some discussion about which elements should always match :focus-visible and how to define that in a normative text was raised (as some elements like <select> draw a focus ring in some browsers and not other when clicked, and some elements like <input type="date"> 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 :focus-visible implementations, and a big win for the final people using this feature.
Apart from that I’ve also created a test for my proposal about how :focus-visible 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.
Some numbers
Let’s take a look to the numbers again, though things have moved slowly this time.
21 PRs merged in WPT (1 in March).
17 patches landed in WebKit (3 in March).
7 patches landed in Chromium.
2 PRs merged in CSS spcs (1 in March).
1 PR merged in HTML spec.
Next steps
The main goal for April would be to close the spec discussions and land the PRs in HTML spec, so we can focus again in finishing the implementation in WebKit.
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.
Note: The original end revision for this release was incorrect. These release notes have been updated for the set of changes included in the corrected revision range.
Safari Technology Preview Release 123 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
Safari Technology Preview Release 122 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
<div class="embed embed-internal embed-internal-embracingtheinevitableitstimeforb2bfinancialservicestotakeondigital embed-internal-03">
<div>
<h1 id="embracing-the-inevitable-its-time-for-b2b-financial-services-to-take-on-digital">Embracing the inevitable: It’s time for B2B financial services to take on digital</h1>
<p>B2B brands must drive the same level of personal engagement that was once had with clients and customers across the boardroom table, but in digital.</p>
</div>
<div>
<img src="/hlx_52caa66088d7c12096570745d799e1a84ba741ab.jpeg" alt="Woman at desk with laptop in video meeting">
</div>
<div>
<p>By Christopher Young</p>
<p>Posted on 03-03-2021</p>
</div>
<div>
<p>For years, the B2B side of financial services succeeded without needing to make a focused investment in digital capabilities, until 2020 arrived and pandemic changed everything. While face-to-face business interactions essentially shut down, other trends emerged that depended on digital, such as buyers doing more research online and embracing mobile more than ever. Marketers were forced to adapt to a digital way of doing business.</p>
<p>There is a new sense of urgency to drive the same level of personal engagement you once had with clients and customers across the boardroom table, only in a digital format. B2B brands can seize this newfound digital opportunity to redefine client experiences and grow relationships and business in unexpected ways.</p>
<p>We asked experts from Adobe’s Digital Strategy Group, product marketing, and one of our strategic partners why it’s vital for financial services to embrace digital now — and how it can position you for success in 2021.</p>
<p>“There’s a lot more that we can do digitally than we ever thought possible,” said Alarice Cesareo Lonergan, IBM, partner, NA financial services, enterprise strategy & iX market leader. “By providing content and sharing perspectives more broadly, you might attract a whole new segment of potential clients.</p>
<h3 id="switch-your-focus">Switch your focus</h3>
<p>Direct-to-consumer businesses already see experience as the primary means of competitive differentiation. They’re well-versed in using physical <em>and</em> digital channels to attract customers. To differentiate in a sustainable way, B2B brands need to look towards what the most successful B2C brands are doing, and change their focus from products and services to experiences.</p>
<p><img src="/hlx_423b425e11fcc6c97dd957a5591428808a4a7c1b.png" alt="Infographic: differences in CX approach between B2B and B2C"></p>
<p>“Customer expectations have changed,” said Adrienne Whitten, director of product and segment marketing at Adobe. “Even the consumer side of the same financial services businesses have set the bar.”</p>
<p>“We see more examples of banks consolidating the martech stack across B2B and B2C,” said Adobe’s Karen Cha, senior analyst, digital strategy group. “They’ll take advanced processes that the B2C side is using and leverage for stronger processes on the B2B side.”</p>
<p>Some firms are already forging ahead. They’re investing in all-digital ways to engage customers, including developing content like blogs, case studies, webinars, and podcasts. But reaching clients regularly with content that exactly fits their journey stage requires technology.</p>
<p><img src="/hlx_447ca80626378dd15c6041f8afc9d120c9c9c9a4.png" alt="Infographic: plans businesses have to address customer engagement challenges"></p>
<p><em>Reshaping the Customer Experience: July 2020 COVID-19 Pulse Survey, Celent</em></p>
<p>“You need to take a look at the processes where you can interject automation and amp up the digital capabilities for more useful and engaging interactions,” said Lonergan.</p>
<h3 id="digitals-time-is-now">Digital’s time is now</h3>
<p>Enterprise sales have already embraced digital channels with strategies that financial services can adopt to accelerate growth — and it’s not too late.</p>
<p>“Those who didn’t establish a digital foundation yet aren’t that far behind, because there are lots of tools and technologies they can invest in now to help them overcome that hurdle,” Lonergan said.</p>
<p>Customer demographics are also compelling a switch to digital. Millennials and Gen Z are moving up — they comprise 55 percent of directors, senior directors, and the C/VP level, according to the “Tech Buyers Generational Insights Research” by Adobe and PK Global (2020). The new generation was brought up in a different environment and depends on technology. They prefer digital as a way to interact, without the need for humans or phones. And they prioritize thought leadership and other online content over product-specific information like features, benefits, and roadmaps.</p>
<h3 id="aim-for-the-north-star">Aim for the North Star</h3>
<p>Many businesses now use account-based marketing (ABM) to identify and pursue qualified opportunities and high-value accounts, and to provide relevant experiences that generate more revenue, more quickly.</p>
<p>“Sales and business leaders may not understand how digital can play a role in driving conversions, sales, and revenues,” said Lisa Sheth, head of digital strategy, Adobe. “By establishing organizational buy-in, you can work toward a digital mindset and foundation.”</p>
<p>The digital capabilities your business needs start with personalization across channels, purposeful content, measurement and attribution, and journey management.</p>
<ol>
<li><strong>Personalize across channels</strong></li>
</ol>
<p>“Start with personalization to simulate the connection you’ve had in person,” Lonergan said. “Target and create that experience so it feels tailored for your customer. You’ll attract the customer with the experiences you’re going to deliver to them.”</p>
<p>You need to coordinate touches across digital and in-person channels — when we have them again. Great experiences keep customers loyal, happy, and coming back.</p>
<p>“We see a need to drive the empathy and deep connection between humans in a digital way,” said Lonergan. “That should be top of mind in 2021 across financial institutions.”</p>
<ol start="2">
<li><strong>Deliver content that resonates</strong></li>
</ol>
<p>Ask yourself what content you need to develop to attract a particular persona or buying group. Determine what’s resonated well in the past and since the pandemic. Then engage the right people within each business account at complementary touchpoints throughout their journey</p>
<p>“One of the largest banks went from a handful of webinars to hundreds,” said Sheth. “That’s how they’ve been able to continue their conversations and stay top of mind.</p>
<ol start="3">
<li><strong>Track your marketing impact</strong></li>
</ol>
<p>You can’t improve what you can’t measure. Analyze marketing impact by tracking the progress of activities that are part of your digital initiative. Prove the impact of digital marketing by attributing revenue to the points where’s it’s generated — and then fine-tune to improve the results.</p>
<ol start="4">
<li><strong>Design the complete experience</strong></li>
</ol>
<p>Technology, manufacturing, and other B2B verticals are emulating B2C by creating digital journeys that personalize the end-to-end experience. Financial services companies need to follow their lead.</p>
<p>“You can architect an end-to-end experience and determine where you can use automation to personally engage the customer,” Lonergan said. You also need to evaluate which points could benefit from human interaction, either virtual or in person</p>
<div class="embed embed-internal embed-internal-experiencecloud embed-internal-experiencecloud">
<div><p><img src="/hlx_34720ecd0ad7c3510509b6fa3a9337f0696639ab.png" alt=""></p>
<h3 id="adobe-experience-cloud">Adobe Experience Cloud</h3>
<p>AI-driven customer experience applications for marketing, analytics, advertising, and commerce.</p>
<p><a href="https://www.adobe.com/experience-cloud.html">Learn more</a></p></div>
</div>
<h3 id="taking-the-inevitable-leap">Taking the inevitable leap</h3>
<p>Responding to the pandemic has given financial services a push into the digital future more quickly than you might have imagined. But if you’re like many B2B marketers, you may discover you actually prefer a mix of physical and digital channels. Sixty-five percent of B2B decision makers believe the new sales model is at least as effective as it was before COVID-19, according to McKinsey, May 2020.</p>
<p>To learn more about the steps you need to take, how to proceed, and the success other B2B financial services marketers are having, read our article <a href="https://blog.adobe.com/en/publish/2021/02/19/why-commercial-banks-and-asset-managers-need-adopt-account-based-experience-mindset.html">on implementing the account-based experience mindset in commercial banking.</a></p>
</div>
<div>
<h2 id="featured-posts">Featured posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/2020/07/28/in-complex-times-panasonic-made-its-b2b-marketing-simple.html#gs.t969is">https://blog.adobe.com/en/2020/07/28/in-complex-times-panasonic-made-its-b2b-marketing-simple.html#gs.t969is</a></li>
<li><a href="https://blog.adobe.com/en/2020/08/03/tapping-into-the-power-of-ai-to-drive-better-b2b-event-marketing.html#gs.t96cp5">https://blog.adobe.com/en/2020/08/03/tapping-into-the-power-of-ai-to-drive-better-b2b-event-marketing.html#gs.t96cp5</a></li>
<li><a href="https://blog.adobe.com/en/2020/05/19/adobe-named-a-leader-in-the-forrester-wave-b2c-and-b2b-commerce-suites.html#gs.t96fyi">https://blog.adobe.com/en/2020/05/19/adobe-named-a-leader-in-the-forrester-wave-b2c-and-b2b-commerce-suites.html#gs.t96fyi</a></li>
</ul>
</div>
<div>
<p>Topics: Insights & Inspiration, Digital Transformation, Personalization, Financial Services, Experience Cloud,</p>
<p>Products: Experience Cloud, Marketo Engage,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-gopaperlessintheworkplacewithacrobatonlinepdftools embed-internal-03">
<div>
<h1 id="go-paperless-in-the-workplace-with-acrobat-online-pdf-tools">Go paperless in the workplace with Acrobat online PDF tools</h1>
<p>Work is stressful enough without unsightly clutter on your desk. Adobe Acrobat can help you go paperless.</p>
</div>
<div>
<img src="/hlx_c1f3633366b4126ec86a24c8b1479c2513e47651.jpeg" alt="Go paperless with online PDF tools">
</div>
<div>
<p>By Adobe Document Cloud Team</p>
<p>Posted on 03-03-2021</p>
</div>
<div>
<p>Most offices wrestle with an all-too-common problem: What to do with all the paper? It piles up on desks and gets crammed into folders, creating unsightly clutter and organizational chaos. Even with a good file management system, the clutter and sheer volume of paper files make it much too easy for important documents to be misplaced, lost, or even stolen. Your workday is stressful enough without having to wrangle reams of paper around the office. If you’re ready to save the planet and your sanity, Adobe Acrobat is here to help.</p>
<div class="embed embed-internal embed-internal-acrobat embed-internal-documentcloud">
<div><p><img src="/hlx_3e0e58654cbc37f0005f6ba2a61edb9314c3feaf.png" alt=""></p>
<h3 id="adobe-acrobat">Adobe Acrobat</h3>
<p>Stay connected to your team with simple workflows across desktop, mobile, and web — no matter where you’re working.</p>
<p><a href="https://acrobat.adobe.com/us/en/acrobat.html">Learn more</a></p></div>
</div>
<p>Adobe Document Cloud offerings can help make going paperless as smooth as possible. <a href="https://acrobat.adobe.com/us/en/mobile/scanner-app.html">Adobe Scan</a> is a simple yet powerful mobile application for digitizing paper documents and reducing waste. Once you’ve started the digitization process, Acrobat <a href="https://www.adobe.com/acrobat/online.html">online PDF tools</a> can help you manage your new digital documents. You can give these tools a try in any browser to reduce paper use and increase your workplace efficiency:</p>
<ul>
<li>Combine similar or related documents, like monthly reports, into a single file using the <a href="https://www.adobe.com/acrobat/online/merge-pdf.html">Merge PDFs</a> tool to create a comprehensive year-end document.</li>
<li>The <a href="https://www.adobe.com/acrobat/online/rearrange-pdf.html">Reorder PDF Pages</a> tool allows users to organize scanned documents, like a presentation deck, by moving pages around within the document to present content in your preferred order.</li>
<li>The <a href="https://www.adobe.com/acrobat/online/delete-pdf-pages.html">Delete PDF Pages</a> tool lets users remove pages from a document that are outdated or unnecessary while keeping the relevant pages intact.</li>
</ul>
<h3 id="the-benefits-of-going-paperless">The benefits of going paperless</h3>
<p>With simple and affordable digitization tools available, there’s no good reason to put off going paperless. On the contrary, there are many good reasons to make the transition as soon as possible.</p>
<ul>
<li><strong>Cost reduction</strong>: Paper costs a lot of money. Some studies have estimated that businesses spend as much as $80 per employee on paper every year. Add in the costs of ink and toner, printing and copying machines, machine maintenance, and storage space, and your bottom line can take quite a hit.</li>
<li><strong>Environmental sustainability:</strong> Paper production is the third-largest industrial polluter in the United States, and it contributes to deforestation around the world. Going digital eliminates massive amounts of material, energy, and pollution costs associated with paper production and consumption.</li>
<li><strong>Efficiency and accessibility:</strong> Paper systems also cost time. Employees spend hours every day looking for paper documents, resulting in tremendous efficiency and productivity losses. In a paperless office, they can locate documents with a simple keyword search from their desktop, phone, or any other connected device.</li>
<li><strong>Collaboration:</strong> PDFs and digital documents enable easy communication and collaboration. Teammates can share files online and work together from a single digital copy rather than printing as many copies as there are collaborators.</li>
<li><strong>Durability:</strong> Damage to paper records from fire, flood, or decay can devastate an organization. When you go paperless, you never have to worry that an unforeseen event could wipe out all of your important records and information as long as you’re maintaining digital backups of your documents.</li>
</ul>
<h3 id="tips-for-transitioning-to-a-paperless-office">Tips for transitioning to a paperless office</h3>
<p>Making the transition to a paperless office is more complicated than digitizing all of your existing documents, however. In order to become a truly paperless organization, you need to put in place tools and systems to ensure that paperless work and collaboration is simple, effective, and enjoyable.</p>
<ul>
<li><strong>Create a plan:</strong> Creating a paperless office is a complex task. In order to make sure you’re setting the right goals and sticking to them, appoint an individual or a group of people to map your paper use and create a set of priorities and action items to reduce paper consumption throughout the organization.</li>
<li><strong>Use a project management system:</strong> Instead of communicating and keeping track of ongoing projects with memos, sticky notes, and project binders, adopt a digital project management system. Such systems allow you to create timelines for deliverables, assign tasks to teams or individuals, and keep track of updates and progress across platforms.</li>
<li><strong>Paperless meetings:</strong> Instead of providing all attendees with their own copy of meeting materials, share a digital version they can access during and after the meeting. Simply appoint one person in each meeting to keep digital minutes, which attendees can refer back to later.</li>
<li><strong>Start using e-signatures:</strong> Cut down the amount of paper you use externally by switching to digital agreements for all of your client and vendor contracts. You can try sending a document to others for e-signing with the <a href="https://www.adobe.com/acrobat/online/request-signature.html">Acrobat Request Signatures tool</a>.</li>
</ul>
<p>Are you ready to take your workplace completely into the digital realm? If so, sign up for a <a href="https://acrobat.adobe.com/us/en/free-trial-download.html">free seven-day trial of Adobe Acrobat Pro DC</a> (then US$14.99/mo) for unlimited access to PDF and e-signing tools that can make the transition to paperless as easy and painless as possible.</p>
</div>
<div>
<h2 id="featured-posts">Featured posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/02/02/adobe-adds-new-acrobat-tools-to-tackle-pdf-tasks-in-the-browser.html#gs.ugxeo4">https://blog.adobe.com/en/publish/2021/02/02/adobe-adds-new-acrobat-tools-to-tackle-pdf-tasks-in-the-browser.html#gs.ugxeo4</a></li>
<li><a href="https://blog.adobe.com/en/publish/2020/12/16/maximize-your-productivity-on-the-go-with-adobe-acrobat.html#gs.ugxft5">https://blog.adobe.com/en/publish/2020/12/16/maximize-your-productivity-on-the-go-with-adobe-acrobat.html#gs.ugxft5</a></li>
<li><a href="https://blog.adobe.com/en/publish/2020/11/02/recycle-your-pdf-content-with-acrobat-online-tools.html#gs.ugxj0a">https://blog.adobe.com/en/publish/2020/11/02/recycle-your-pdf-content-with-acrobat-online-tools.html#gs.ugxj0a</a></li>
</ul>
</div>
<div>
<p>Topics: Responsibility, Future of Work, Productivity, Sustainability, Document Cloud,</p>
<p>Products: Document Cloud, Scan, Acrobat</p>
</div>
</div>
<div class="embed embed-internal embed-internal-discoverthefutureofworkmanagementatadobesummit embed-internal-03">
<div>
<h1 id="discover-the-future-of-work-management-at-adobe-summit">Discover the future of work management at Adobe Summit</h1>
<p>The Collaborative Work Management Track at Adobe Summit will introduce attendees to the collective power of Workfront and Adobe enterprise solutions.</p>
</div>
<div>
<img src="/hlx_076f3ba302e7ba437a3fe5be94a0c54264a3a769.png" alt="Work Front an Adobe Company with abstract art in the background. ">
</div>
<div>
<p>By Adobe Communications Team</p>
<p>Posted on 03-03-2021</p>
</div>
<div>
<p>Today, every business is a digital business — whether it is B2B or B2C, brick or click, or local or global. Over the last 12 months, accelerated digital transformation has pushed us all to rethink and refine the way we do business, including every aspect of how we power the people and processes behind digital work.</p>
<p>That is why our recent acquisition of Workfront is so exciting. With Workfront coming under the Adobe umbrella, our customers will now have an agile enterprise work management solution that seamlessly connects <a href="https://www.adobe.com/creativecloud.html">Adobe Creative Cloud</a>, <a href="https://www.adobe.com/experience-cloud.html">Adobe Experience Cloud</a>, and other applications and platforms. Now, customers will have a single system that supports the entire marketing lifecycle, from planning and collaboration to governance, maximizing productivity and creativity, and helping deliver even better real-time customer experiences. And during Adobe Summit, attendees will have a chance to preview it all.</p>
<div class="embed embed-internal embed-internal-summitregistration embed-internal-summit">
<div><p><img src="/hlx_87e087ba6e238de864812fc9d69832a821c85f64.jpeg" alt=""></p>
<h3 id="expand-your-genius-at-adobe-summit">Expand your genius at Adobe Summit</h3>
<p>A free virtual event April 27-29</p>
<p>Every great event requires a great maker. Stay ahead of the latest CXM trends, learn industry best practices, and virtually connect with peers.</p>
<p><a href="http://apps.enterprise.adobe.com/go/7015Y000002e4q9QAA">Register for free</a></p></div>
</div>
<p>“Even before the acquisition, customers were leveraging integrations between Workfront and Adobe to work faster and smarter,” said Alex Shootman, VP and GM of Workfront, an Adobe company. “Summit gives us the chance to showcase the work of some of these innovative leaders, as well as the opportunity to preview our vision for a fully integrated marketing system of record that powers the people and work behind great customer experiences.”</p>
<h3 id="the-workfront-experience-at-adobe-summit">The Workfront experience at Adobe Summit</h3>
<p>Adobe Summit content will also pick up where Leap — Workfront’s annual conference — left off in 2020.</p>
<p>“There are a few ways we’re folding our Leap content into Summit,” says Gary Clinger, head of marketing programs for Adobe. “The most significant is our Innovation Super Session featuring Alex Shootman. He will highlight Workfront’s unique perspective on work transformation and why the marriage of Workfront technology with Adobe solutions is so powerful for our customers.”</p>
<p>Attendees can also expect to hear from current Workfront customers and joint Workfront/Adobe customers, including Monique Evans, Workfront systems analyst for Stanley Black & Decker, Nick Zappas, senior manager of project management at The Walt Disney Company, and presenters from VaynerMedia and Informatica.</p>
<p>“We also have over 25 breakout sessions within the Collaborative Work Management track,” Clinger says. “Sessions will range from work visibility, to agile work management, to adoption challenges surrounding new technology. About half of those sessions will include Workfront customers, so attendees can understand diverse use cases that, ideally, they can apply to their own businesses.”</p>
<p>“Learning through customer examples and use cases is central to the Adobe Summit experience,” adds Wade Sherman, VP and head of the Adobe + Workfront Integration. These peer-led sessions, he explains, tend to drive deeper understanding and relevance for the broad audience of attendees.</p>
<p>“We want to present meaningful examples, best practices, and use cases that are going to resonate the most with our customers,” Sherman says. “We know, in this case, that means showing real-world examples of customers utilizing Workfront as their marketing system of record — as the work management platform that ties together their use of Adobe Creative Cloud and Adobe Experience Cloud. Seeing that on the big screen or hearing a customer talk about that is so compelling because it grounds everyone in the message and helps to align it with their own business and work.”</p>
<h3 id="building-on-a-solid-partnership-and-shared-customer-base">Building on a solid partnership and shared customer base</h3>
<p>For many attendees, much of this will feel familiar — the two companies share more than 1,000 enterprise clients.</p>
<p>“Workfront has been a premier Adobe partner since April 2020,” says Sherman. “We’ve been building on that synergy for some time.”</p>
<p>Now, he adds, shared and individual customers will be able to do and manage even more, with integrated workflows and optimized work management solutions.</p>
<p>“Bringing in a marketing system of record that serves to connect Adobe Creative Cloud Enterprise with Adobe Experience Cloud apps like AEM and Marketo helps manage the cradle-to-grave content ROI,” Sherman says. “Now teams can create beautiful, compelling content assets using our world-class creative products — and then manage, launch, and measure the effectiveness of those assets once they are out in the world. Workfront sits right in the middle of that. It’s the platform that enables it all — and increases content velocity by connecting the creative tools with marketing tools.”</p>
<p>For other attendees, Summit will be a first look at Workfront and other Adobe enterprise solutions.</p>
<p>“We’re anticipating a diverse audience, in terms of product knowledge and insights,” Clinger says. “Many attendees are already using Workfront and want to learn how to optimize or accelerate their workflows. Others are still learning the difference between project management and workflow management. Some are familiar with the combined power of Adobe and Workfront — people who are integrating the APIs already.”</p>
<p>Sessions will offer universal takeaways, ensuring everyone walks away with a clear-cut sense of what Workfront could do for their organizations. “Our sessions and workshops are designed to create the right type of curiosity for our existing customers and Adobe customers who aren’t Workfront users — yet,” says Clinger “Our goal is that Summit attendees will want to continue the conversation post-Summit. We want them to experience how much potential exists in this acquisition, and see how our combined technology can really make a difference.”</p>
<p>Shootman agrees. “There is a better way to manage marketing work,” he says. “Adobe understands that — and that’s where the Workfront integration comes in. We’re eager for people to come to Summit and learn about Workfront. Adobe is an expert at understanding the needs of the marketer, and during our sessions and training workshops, you’ll see how bringing in Workfront helps us support our customers even more.”</p>
<p><em><a href="http://apps.enterprise.adobe.com/go/7015Y000001zEANQA2">Register for Adobe Summit for free</a>, then browse and register for targeted sessions and training workshops in the <a href="https://portal.adobe.com/widget/adobe/as21/catalogsum2021?search.track=1610747845177001lC4i&search=">Collaborative Work Management Track</a>.</em></p>
</div>
<div>
<h2 id="featured-posts">Featured Posts:</h2>
<ul>
<li>
<p><a href="https://blog.adobe.com/en/publish/2020/12/07/adobe-completes-workfront-acquisition.html#gs.tzo42i">https://blog.adobe.com/en/publish/2020/12/07/adobe-completes-workfront-acquisition.html#gs.tzo42i</a></p>
</li>
<li>
<p><a href="https://blog.adobe.com/en/publish/2020/03/24/cc-integrations-work-from-home.html#gs.tzo5he">https://blog.adobe.com/en/publish/2020/03/24/cc-integrations-work-from-home.html#gs.tzo5he</a></p>
</li>
<li>
<p><a href="https://blog.adobe.com/en/publish/2021/02/09/photoshop-illustrator-and-fresco-introduce-document-collaboration.html#gs.tzo8tl">https://blog.adobe.com/en/publish/2021/02/09/photoshop-illustrator-and-fresco-introduce-document-collaboration.html#gs.tzo8tl</a></p>
</li>
</ul>
</div>
<div>
<p>Topics: Future of Work, Events, Adobe Summit, B2B, Experience Cloud,</p>
<p>Products: Creative Cloud, Experience Cloud, Workfront</p>
</div>
</div>
<div class="embed embed-internal embed-internal-howyoutuberamytangerineinspirescreativitythroughcraft embed-internal-02">
<div>
<h1 id="how-youtuber-amy-tangerine-inspires-creativity-through-craft">How YouTuber Amy Tangerine inspires creativity through craft</h1>
<p>Amy Tangerine has cultivated a loyal community of creatives with her YouTube channel, with DIY videos edited with Adobe Premiere Pro.</p>
</div>
<div>
<p><img src="/hlx_46231b66a9aee9cce6dba6d3abd387e812ca4a08.jpeg" alt="Colorful items strewn across turquoise background. "></p>
<p><em>Image Source: Amy Tangerine.</em></p>
</div>
<div>
<p>By Meagan Keane</p>
<p>Posted on 03-02-2021</p>
</div>
<div>
<p>Amy Tan is crafting a life she loves — and loves to look back on.</p>
<p>After turning her passion for scrapbooking into a successful business, the creative entrepreneur and author is inspiring people around the world to take time for reflection through art. “I’m a very sentimental person, so I love memory-keeping and looking back on the most random things,” she says. “Crafting isn’t just a hobby. It’s a way of being that inspires people to live their best lives.”</p>
<p>Tan has grown her business under the moniker Amy Tangerine — so as not to be confused with the similarly named author. In addition to taking on art and fashion design work for private clients, Tan has cultivated a loyal community of creatives with her YouTube channel, branded online workshops, podcast, and products. They flock to her not only for inspiration, but for permission.</p>
<p>“People often put the brakes on their own creativity because they feel they should have a purpose, but that’s simply not the case,” says Tan. “Allow yourself permission to just play and see where it takes you, because it could trigger something else that makes you have a breakthrough. And if it doesn’t, it’s okay because you still spent time doing something that you enjoyed.”</p>
<h2 id="helping-people-make-things--and-make-things-happen">Helping people make things — and make things happen</h2>
<p>With more than 57,000 YouTube subscribers, video has become yet another creative outlet for Tan to share tips on everything from stickers and watercolors to traveler’s notebooks and craft room makeovers — with some family trip vlogs thrown in for good measure.</p>
<p>Tan was inspired to create her YouTube channel in 2015. With minimal scrapbooking content available on the platform, she dove into the experience headfirst.</p>
<p>“Being a YouTuber means you really just have to take the time to figure it out,” she says. “People who might have budget to hire a team can spend more time honing their craft, but then they don’t understand the little things that you might do to make it easier on yourself if you had to do this all on your own. I think that’s an important experience to have.”</p>
<p>That’s why these days, Tan is the one who plans which shots she needs and shoots them herself using her Canon G7X Mark ii or her iPhone. And when she’s done, she’ll take <a href="https://www.adobe.com/creativecloud/video/discover/b-roll.html">B-roll shots</a> of certain tools or materials in case she needs to splice them in during the editing process. Tan usually leaves the audio voiceover to the end so that she has the creative freedom she needs to craft in real-time.</p>
<p>“While you’re doing something, sometimes you don’t really think about why you’re doing it. You just do it,” says Tan. “Afterwards I realize that it might be helpful for me to explain the reasoning behind certain things that I’ve done, and that’s when I’ll do the voiceover. People like to both see the process and hear my thoughts.”</p>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/tDaIBw2u3es?rel=0&v=tDaIBw2u3es&feature=youtu.be&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<h3 id="sharing-the-editing-responsibilities">Sharing the editing responsibilities</h3>
<p>Although Tan is a big do-it-yourselfer, she does split the editing work with an editor, Amanda Benson, who uses <a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a> to pull everything together. It’s a trade-off Tan can live with — Benson can get the job done in half the time, which frees Tan to focus more attention on content creation.</p>
<p>“I’m getting better and faster at editing, but my editor is so familiar with my style that it just makes sense for us to split the work,” says Tan.</p>
<div class="embed embed-internal embed-internal-premierepro embed-internal-creativecloud">
<div><p><img src="/hlx_6437eac3f9725128f1febd131fffb983cdd30b0b.png" alt="Inserting image..."></p>
<h3 id="premiere-pro">Premiere Pro</h3>
<p>Video editing that’s always a cut above.</p>
<p><a href="https://www.adobe.com/products/premiere.html">Learn more</a></p></div>
</div>
<p>Benson describes Tan’s style as “run-n-gun”, so she tries not to make the videos too cinematic because that wouldn’t feel genuine to Tan’s style. Instead, she lets the experiences Tan shoots speak for themselves. In Premiere Pro, Benson keeps clips in chronological order, so the adventure translates through the vlog. She also uses the Lumetri Color panel in Premiere Pro to make the videos bright and fun, just like Tan’s brand.</p>
<p>“I use the Lumetri Color panel and the color scopes in Premiere Pro as my first step in color correcting and grading,” says Benson. “I love how you can do very basic corrections, but if you want to go above and beyond, you can create really cool and unique color looks. Lumetri is a great place to start.”</p>
<p>The reason their collaboration works so well is twofold. First, Benson’s familiarity with Tan’s content and style means she just gets it, and she isn’t afraid to experiment. But none of it looks like an experiment — it’s all very seamless. And second, Tan shares what inspires her, so that Benson can draw direction and inspiration directly from the source. But the end goal is the same.</p>
<p>“I want to consistently create content that resonates with people,” says Tan. “Everyone should realize that they can make things — and make things happen.”</p>
<p><em>Watch the <a href="https://www.youtube.com/watch?v=peheahLIY7Y&list=PLHRegP5ZOj7CIVBmsN__kyOqdYewqRhwe&index=29">Tips & Tricks Tuesday session on IRL editing</a> and get access to host Valentina Vee’s <a href="https://premiere.adobelanding.com/yts-livestream/">tutorial guide</a>.</em></p>
</div>
<div>
<h2 id="featured-posts">Featured Posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2020/12/17/how-amber-torrealba-making-splash-in-and-out-of-the-water.html">https://blog.adobe.com/en/publish/2020/12/17/how-amber-torrealba-making-splash-in-and-out-of-the-water.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2020/11/18/how-kevin-parry-creates-stop-motion-animation-that-will-stop-you-in-your-tracks.html">https://blog.adobe.com/en/publish/2020/11/18/how-kevin-parry-creates-stop-motion-animation-that-will-stop-you-in-your-tracks.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/01/05/five-editing-tips-adam-epstein-learned-from-his-time-at-snl.html">https://blog.adobe.com/en/publish/2021/01/05/five-editing-tips-adam-epstein-learned-from-his-time-at-snl.html</a></li>
</ul>
</div>
<div>
<p>Topics: Customer Stories, Creativity, Media & Entertainment, Creative Cloud</p>
<p>Products: Premiere Pro, Creative Cloud</p>
</div>
</div>
<div class="embed embed-internal embed-internal-austincommunitycollegepreparesstudentsforsuccessinadigitalfuture embed-internal-02">
<div>
<h1 id="austin-community-college-prepares-students-for-success-in-a-digital-future">Austin Community College prepares students for success in a digital future</h1>
<p>Adobe Creative Campus, Austin Community College, is dedicated to preparing students for success in a digital world.</p>
</div>
<div>
<p><img src="/hlx_e3464be10ca920a264893b51d7eb2f93e6b14c99.jpeg" alt="The Paseo at ACC Highland campus"></p>
<p><em>The Paseo at ACC Highland Campus, Building 2000 — January, Friday 22, 2021.</em></p>
</div>
<div>
<h2 id="by-karen-mccavitt">By Karen McCavitt</h2>
<p>Posted on 03-02-2021</p>
</div>
<div>
<p>With 11 campuses and more than 70,000 students annually, Austin Community College District (ACC) is one of the largest community college systems in the nation. It’s also the top school in Texas for transferring into public universities, providing an affordable start for students pursuing a four-year degree. As part of the dynamic ecosystem of technology and art that thrives in the Austin area, the institution is dedicated to preparing students for success in a digital world. And, ACC is an Adobe Creative Campus — the country’s first community college to have that distinction.</p>
<p>“Many companies look for digitally fluent employees well-versed in <a href="https://www.adobe.com/education/digital-literacy.html">Adobe Creative Cloud</a>,” says Thomas Nevill, Dean of Arts and Digital Media at Austin Community College. “As an Adobe Creative Campus, ACC gives students an advantage and helps them build digital portfolios in an increasingly online world.”</p>
<p>Digital fluency is an important part of ACC’s 2025 Academic Master Plan, with Adobe Creative Cloud at the center of its Digital Literacy Equity and Inclusion for All (DLEI) initiative. As co-chair of the planning process, Nevill recognizes the need to integrate digital skills into every discipline — not only Arts and Digital Media but in Health Sciences, Education, Liberal Arts, and beyond. Today, Adobe Creative Cloud is available at no cost to employees and at a deep discount to students, and his goal is to make Adobe Creative Cloud free for both students and employees in the future. With Adobe Creative Cloud tools such as <a href="https://blog.adobe.com/en/topics/xd.html">Adobe XD</a>, ACC is bringing digital fluency to the community college curriculum, exposing people to digital skills who might not otherwise develop them. He wants people to explore the possibilities, and he’s not afraid to lead by example.</p>
<p>“To create the final proposals for the Academic Master Plan, I decided to try something new and taught myself how to use <a href="https://blog.adobe.com/en/topics/premiere-rush.html">Adobe Premiere Rush</a>, complete with still shots, video, and voice-over,” Nevill says. “It was important for me to take that step and show people that if I can do it, anyone can.”</p>
<p>Indeed, Adobe Creative Cloud tools such as Adobe XD and <a href="https://blog.adobe.com/en/topics/spark.html">Adobe Spark</a> are catching on across departments, from User Experience Design to Speech Communication, and ACC makes sure students and faculty have the training they need.</p>
<div class="embed embed-internal embed-internal-digitalliteracycc embed-internal-bigrockassets">
<div><p><img src="/hlx_f07df7196230fa129c7946bb099aafe35a8e2e2e.png" alt=""></p>
<h3 id="adobe--digital-literacy">Adobe & Digital Literacy</h3>
<p>Become an Adobe Creative Campus to build digital literacy at your school.</p>
<p><a href="https://www.adobe.com/education/digital-literacy.html">Learn more</a>.</p></div>
</div>
<h3 id="how-acc-is-planting-the-seeds-of-digital-fluency">How ACC is planting the seeds of digital fluency</h3>
<p>As Associate Vice President of Academic Programs at ACC, Dr. Gaye Lynn Scott is eager to drive adoption of Adobe Creative Cloud. She oversees programs that reach up to 75 percent of students, including transfer programs in liberal arts, science, engineering, and math — and for her, digital fluency is critical across the board.</p>
<p>“Students should all have the same opportunities to learn and succeed,” says Dr. Scott. “Becoming an Adobe Creative Campus exposes students to digital tools that will serve them in the world after graduation.”</p>
<p>Dr. Scott is a firm believer in the power of “informal but intentional efforts” to drive adoption. That includes recruiting early adopters and seeding cross-talk among faculty, as well as practicing what she preaches. “I intend to be vocal whenever I can, encouraging faculty to replace their slide decks with Adobe Spark,” she says. “Spark is easy yet sophisticated, and it can be a great way to engage students.”</p>
<p>Meanwhile, ACC invests in formal training to support both faculty and students. They rely heavily on Adobe tutorials and LinkedIn Learning tutorials, but the community college is finding creative ways to establish resident experts and get ideas flowing.</p>
<p>“We’re developing a one-year faculty fellowship program around Adobe Creative Cloud, where fellows receive advanced training and get a stipend to redesign a course,” says Matthew Evins, Director of Academic Technology in the Teaching and Learning Excellence Division. “It’s a way to support faculty members who are serious about integrating digital tools into their courses — and a great way to show what’s possible.”</p>
<p>Evins and his team not only train faculty to use technology in the classroom, they also set up audio/visual equipment and support websites. They even produce videos to supplement course materials, using <a href="https://blog.adobe.com/en/topics/premiere-pro.html">Adobe Premiere Pro</a> and <a href="https://blog.adobe.com/en/topics/after-effects.html">Adobe After Effects</a> to create polished, professional work. During the pandemic, the video production team was busy producing dozens of videos as faculty members looked for ways to replace in-person, hands-on instruction. And the team is increasingly focused on students — providing support for Adobe tools as well as wi-fi, laptops, tablets, and software to make sure students can succeed in their online courses.</p>
<p><img src="/hlx_972658915537daa8b1bf8d7dc33ce4d86e596add.png" alt="Photo of a studio with a green-screen and chairs"></p>
<p><em>The larger of the two multicam Radio, Television & Film studios at ACC Highland Campus, Building 2000 — Wednesday, November 11, 2020.</em></p>
<h3 id="students-bring-designs-to-life-with-adobe-xd">Students bring designs to life with Adobe XD</h3>
<p>It’s no surprise that the User Experience (UX) Design program at ACC is already immersed in digital tools and technologies. “Many of our students are professional designers looking to transition into a UX career, so they already have extensive experience with Adobe Creative Cloud,” says Molly McClurg, Associate Professor of User Experience Design at ACC. “Instead of spending time on learning new tools, students get to focus on creativity and putting new ideas into the world.”</p>
<p>Most of McClurg’s students are well-versed in <a href="https://blog.adobe.com/en/topics/photoshop.html">Adobe Photoshop</a>, <a href="https://blog.adobe.com/en/topics/illustrator.html">Adobe Illustrator</a>, and <a href="https://blog.adobe.com/en/topics/indesign.html">Adobe InDesign</a>. But she has recently introduced a new tool into the mix — Adobe XD. It’s a fun, refreshing way to engage students in her Survey of User Experience Design course, where she teaches them how to research, ideate, prototype, and test solutions. Near the end of the semester, students conduct the entire design process, working in small teams to create a prototype they can show off.</p>
<p>“Many students decided to address the affordable housing challenge in Austin,” says McClurg. “Because they’re just starting to explore UX design, we don’t put any constraints on them — so they really go big and experiment with fun ideas.”</p>
<p>One of those ideas came from student Carson Stanch, who explored the idea of creating a tiny home for people with chronic medical conditions or mobility limitations, along with a smart home interface for easier control of door locks, lights, heaters, and appliances. Her team used Adobe XD to design <a href="http://carsonstanch.com/tiny-smart-home">wireframes and a working prototype</a>.</p>
<p>Another student, Amy Frazier, decided to tackle the need for safe restaurant takeout orders during the pandemic. Noticing that many local businesses lacked an online ordering process, she used Adobe XD to <a href="https://www.amyfrazierdesign.com/portfolio/flories">mockup wireframes</a> that would make it easy for restaurants to take orders on mobile and desktop.</p>
<p>Seeing their ideas solidified in wireframes and prototypes helps McClurg provide useful feedback. “Using Adobe XD, I can assess the details of the individual screens as well as the vision of how everything will work together,” she says. “Plus, students see their ideas come to life, and their faces light up. It’s exciting to see them discover that UX design could be their future.”</p>
<h3 id="ready-for-the-job-market-with-communication-and-digital-skills">Ready for the job market with communication and digital skills</h3>
<p>Digital fluency has also become essential in the liberal arts department, thanks to the dedication of faculty members like Theresa Glenn, Chair of Communication Studies. Glenn is on a mission to equip students with strong digital skills, an online portfolio, and a modern, tech-savvy resume as they enter the workforce.</p>
<p>Glenn has found that Adobe Spark is an easy entry point to digital literacy. In her Introduction to Human Communication course, students have been using Adobe Spark to demonstrate their mastery of concepts they learn in her class. That includes conflict management skills such as active listening, perception checking, and assertive messaging — and students do a great job of modeling those techniques on camera.</p>
<p>At the end of the semester, students pull everything together into an Adobe Spark website that serves two purposes, as Glenn points out. “Not only does this project serve as a final exam, students can link to it on their resumes to show employers their competencies in both communication and digital literacy,” she says.</p>
<p>Students have taken the assignments and run with them, producing webpages that would impress potential employers. Check out <a href="https://spark.adobe.com/page/jC9ZQncf7YeBG/">a Spark page created by student Amurri Davis</a> and <a href="https://spark.adobe.com/page/Q1rpntIXpSmhY/">another from fellow student Tyler Langlais</a>.</p>
<h3 id="the-college-experience-goes-paperless">The college experience goes paperless</h3>
<p>ACC takes its commitment to digital literacy seriously, and that means using new tools and technologies beyond the classroom. A few years ago, the community college adopted <a href="https://blog.adobe.com/en/topics/sign.html">Adobe Sign</a> and <a href="https://blog.adobe.com/en/topics/acrobat-dc.html">Adobe Acrobat DC</a> to go paperless and use e-signatures to make administrative processes more efficient. Today, ACC processes a few thousand electronic documents every month through Adobe Sign — and that number only continues to grow.</p>
<p>“Our primary value as a community college is providing a good education for students, not processing documents — so the more streamlined we can get, the better,” says John Wilsonmay, Product Owner at ACC. “By increasing efficiency, Adobe Sign helps us keep tuition affordable while making the college experience easier and more enjoyable for students.”</p>
<p>The community college uses Adobe Sign for many processes, including faculty onboarding forms, faculty performance evaluations, study abroad applications, and articulation agreements with other universities, which define transfer policies. During the pandemic, faculty members started using Adobe Sign to have students review and sign class rules agreements and syllabi.</p>
<p>By moving to digital workflows and e-signatures, Wilsonmay estimates that ACC has reduced document processing time by as much as two weeks. With Adobe Acrobat DC, administrators create clearer, more effective forms — for example, using required fields to avoid missing information and pop-up boxes to minimize confusion. Instead of mailing or walking paper documents across campus, people rely on automated approval routing and an audit trail of signatures in Adobe Sign to keep things moving no matter how many people have to sign a document.</p>
<p>ACC uses Box as its document storage solution, and integration with Adobe Sign makes it easy to send documents for signature while keeping them in a central repository, with the ability to set deadlines and track workflows. That’s good for everyone in the ACC community, who can focus on what really matters — student success.</p>
<h3 id="helping-students-navigate-their-own-path-to-a-digital-future">Helping students navigate their own path to a digital future</h3>
<p>Students at ACC are diverse and non-traditional — they might be finishing their high school diploma, earning a degree in nursing or computer science, or simply enriching their lives with a ceramics class. But they all have one thing in common: they are forging their own paths to success. With its commitment to digital fluency as an Adobe Creative Campus, ACC is ready to help them on their journeys.</p>
<p>“No matter where students come from, we meet them where they are,” says Nevill. “That’s one of the most rewarding aspects of working at Austin Community College. We have so many unique and exciting ways to help them reach their goals.”</p>
</div>
<div>
<h2 id="featured-posts">Featured posts</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/01/22/duke-university-undergrads-spend-an-epic-summer-with-code-and-adobe.html#gs.sj5w5x">https://blog.adobe.com/en/publish/2021/01/22/duke-university-undergrads-spend-an-epic-summer-with-code-and-adobe.html#gs.sj5w5x</a></li>
<li><a href="https://blog.adobe.com/en/2020/11/12/university-of-new-mexico-builds-a-bridge-to-the-future.html#gs.sj5woy">https://blog.adobe.com/en/2020/11/12/university-of-new-mexico-builds-a-bridge-to-the-future.html#gs.sj5woy</a></li>
<li><a href="https://blog.adobe.com/en/2020/09/17/swinburne-university-learning-adapting-changing-world.html#gs.sj5ws7">https://blog.adobe.com/en/2020/09/17/swinburne-university-learning-adapting-changing-world.html#gs.sj5ws7</a></li>
</ul>
</div>
<div>
<p>Topics: Insights & Inspiration, Customer Stories, Education, Digital Literacy, Creative Cloud, Document Cloud</p>
<p>Products: Creative Cloud, XD, Premiere Pro, After Effects, Acrobat, Sign</p>
</div>
</div>
<div class="embed embed-internal embed-internal-2020digitaleconomyindexacloserlookatconsumerelectronics embed-internal-02">
<div>
<h1 id="2020-digital-economy-index--a-closer-look-at-consumer-electronics">2020 digital economy index | a closer look at consumer electronics</h1>
<p>After analyzing the digital economic landscape, we’ve found that electronics is one of three categories that has a heavy influence on the online economy trends.</p>
</div>
<div>
<img src="/hlx_ce2d598a82b2636d9ca1908a3a20d52f78b936f2.jpeg" alt="Black and white photo of electronics">
</div>
<div>
<p>By Jill Steinhour</p>
<p>Posted on 03-02-2021</p>
</div>
<div>
<p>After analyzing the <a href="https://www.adobe.com/experience-cloud/digital-insights/digital-economy-index.html">digital economic landscape</a>, we have found that electronics is one of three categories (along with grocery and apparel) that has a heavy influence on the online economy trends. We are excited to share powerful data insights to help you understand and act on digital trends in consumer electronics. Let us take a closer look at this segment — the online shopping trends, price changes, and consumer technologies adoption.</p>
<h3 id="online-shopping-trends">Online shopping trends</h3>
<p>There has been steady growth in the consumer electronics segment since the beginning of the COVID-19 pandemic due to consumers’ shift to online shopping, but the growth was not as strong, compared to the rest of B2C ecommerce. Things changed around Black Friday and Cyber Monday — holiday shopping events drove an increased demand for electronics. During the holiday season CE retailers outpaced the overall growth in the first part of the season — check out the graph below for the details.</p>
<p>While one in five consumers upgraded their home office in 2020, and one in three upgraded their distance learning environment, privacy remains to be a significant concern. Baby Boomers tend to be the most concerned, and Gen Z — the least concerned.</p>
<p><img src="/hlx_45413a6db3499288360205e56cb592c1c3ef0221.png" alt=""></p>
<h3 id="price-change-for-electronics">Price change for electronics</h3>
<p>Electronics prices are now beginning to plateau, after years of innovation-fueled price reduction. The absorption of offline purchasing into the online electronics category and COVID associated demand have been key culprits. There has been a 44 percent drop in online prices for electronics between the years 2014 and 2020.</p>
<p>Price (74 percent) is one of top three buying criteria of electronic devices, preceded by quality (82 percent) and ease of use (77 percent). Learn about the consumer decision-making process by examining the rank of each buying criteria in the <a href="https://www.adobe.com/offer/consumer-electronics-report.html">full report</a>.</p>
<h3 id="penetration-of-consumer-technologies">Penetration of consumer technologies</h3>
<p>Consumers picked up more electronic devices in 2020. When we asked consumers what devices they own, almost every trending product saw an increase. To illustrate, 31 percent of participants owned a smart speaker in 2020 (26 percent in 2019), 66 percent owned a laptop (62 percent in 2019), and 16 percent owned a car with voice assistant (12 percent in 2019).</p>
<p>Virtual Reality (VR) technology still is not reaching the masses, with only 1 out of 4 consumers having tried VR. 1 out of 3 consumers have purchased a voice-controlled device in the past year, with Millennials and Gen Z leading the charge.</p>
<p>These insights come from analyzing more than 1 trillion visits to U.S. based retail websites, as well as sales of more than 100 million unique products and a survey of 1,000 US consumers. If you would like to learn more insights about consumer electronics that will empower you to leverage the latest trends, read the full <a href="https://www.adobe.com/offer/consumer-electronics-report.html">2020 Digital Economy Index</a> report.</p>
<div class="embed embed-internal embed-internal-consumerelectronicsreport embed-internal-promotions">
<div><p><img src="/hlx_70a17ac6bcdf2c8ef40555b187eeeb0d0a309258.png" alt=""></p>
<h3 id="consumer-electronics-report">Consumer Electronics Report</h3>
<p>Breaking down shopper data to build insight-driven strategies.</p>
<p><a href="https://www.adobe.com/offer/consumer-electronics-report.html">Read the report</a></p></div>
</div>
</div>
<div>
<h2 id="featured-posts">Featured posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/2021/01/26/how-adobe-experience-cloud-helped-powersports-company-brp-take-adventure-to-the-next-level.html">https://blog.adobe.com/en/2021/01/26/how-adobe-experience-cloud-helped-powersports-company-brp-take-adventure-to-the-next-level.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/02/23/the-digital-economy-trends-challenges-and-opportunities-for-the-year-ahead.html">https://blog.adobe.com/en/publish/2021/02/23/the-digital-economy-trends-challenges-and-opportunities-for-the-year-ahead.html</a></li>
<li><a href="https://blog.adobe.com/en/2021/01/21/adobe-experience-manager-content-commerce-innovations-delivering-exceptional-shoppable-experiences.html">https://blog.adobe.com/en/2021/01/21/adobe-experience-manager-content-commerce-innovations-delivering-exceptional-shoppable-experiences.html</a></li>
</ul>
</div>
<div>
<p>Topics: Trends & Research, Insights & Inspiration, Manufacturing, Retail, Experience Cloud,</p>
<p>Products: Experience Platform,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-creativityforalladobeandsundancenurturenextgenerationfilmmakers embed-internal-02">
<div>
<h1 id="creativity-for-all-adobe-and-sundance-nurture-next-generation-filmmakers">Creativity for All: Adobe and Sundance nurture next-generation filmmakers</h1>
</div>
<div>
<img src="/hlx_9503d2a4d8a0ec487a14923b40b17991966828fd.png" alt="Sundance Ignite short film challenge: young filmmakers at work">
</div>
<div>
<p>By Adobe Corporate Communications</p>
<p>Posted on 03-02-2021</p>
</div>
<div>
<p>Everyone has a story to tell, but for aspiring filmmakers who want to share their stories with the world, having mentors, a platform to showcase their work, and the resources to invest in creative exploration can make all the difference.</p>
<p>To give everyone an opportunity to tell their story, we’re once again collaborating with the Sundance Institute on the <a href="https://collab.sundance.org/ignitelanding2021">Sundance Ignite x Adobe Short Film Challenge</a>. Both Sundance and Adobe, a founding partner in the program, share a mission to inspire creativity and bring diverse stories to life. Through the challenge, we’ll identify 10 new Sundance Ignite x Adobe Fellows, who will have yearlong access to powerful mentorships and professional development opportunities.</p>
<p>The challenge is open now through April 6. To enter the challenge, documentary and narrative filmmakers between the ages of 18 and 25 must submit a 1- to 15-minute short film that demonstrates their creative vision and unique voice.</p>
<h3 id="designed-to-ignite-your-film-career">Designed to ignite your film career</h3>
<p>Since 2015, Adobe has partnered with Sundance Ignite to create a path for 80 young filmmakers to become better at their craft, giving them the opportunity to be mentored by experienced filmmakers, receive feedback and direction on their work, collaborate with peers, and gain more exposure to the industry.</p>
<p>The 10 challenge winners selected as fellows will begin their fellowship with a weeklong virtual lab and orientation. Throughout the year, they’ll work with a Sundance Institute alumni mentor, be eligible for internships and program opportunities, receive an artist grant to produce future work, and receive a complimentary one-year Adobe Creative Cloud membership.</p>
<p>Along with these opportunities, one of the program highlights is that fellows have the opportunity to join the 2022 <a href="https://www.sundance.org/festivals/sundance-film-festival/">Sundance Film Festival</a>, one of the premier industry events for independent filmmakers.</p>
<h3 id="dont-just-take-our-word-for-it">Don’t just take our word for it…</h3>
<p>The Sundance Ignite program has laid the groundwork for emerging creators to grow their careers. 10 fellows have premiered their films at Sundance, 9 fellows have interned at labs in the film industry, and 5 fellows have participated in other fellowships, intensives, or summits.</p>
<p>“For a lot of young people, Sundance has been an alternative film festival to celebrate independent film and independent filmmakers. So, to me as a young person, the Ignite program and Sundance represent everything that I want in the film industry, which is inclusivity. It represents diverse voices. It represents democratizing creativity, filmmaking, and just storytelling in general,” says Carol Nguyen, a 2018 Sundance Ignite x Adobe Fellow who debuted her latest film, “No Crying at the Dinner Table,” at the Toronto International Film Festival in 2019.</p>
<p>Lance Oppenheim, a 2019 fellow, produced a feature documentary, “Some Kind of Heaven,” that was named an official selection for the 2020 Sundance Film Festival. He says one of the best parts of the Ignite program is the mentorship element. Lance’s mentor was Jeff Orlowski, a filmmaker he’s long admired. Jeff and Lance would talk several times a month and he eventually became a producer on Lance’s film.</p>
<p>“With Jeff, we really bonded. Being in a very specific situation where I was dealing with so many different kinds of creative and business worlds while we’re trying to get this feature off the ground, our relationship really deepened,” Lance says.</p>
<p><a href="https://theblog.adobe.com/whats-really-like-sundance-ignite-fellow/">2017 fellow Charlotte Regan</a>, whose film “Fry Up” premiered at the 2018 Sundance Film Festival, adds that the support from peers is invaluable.</p>
<p>“<a href="https://project1324.com/challenge/sundance2018">Sundance Ignite</a> really showed me how much your work can improve with collaboration. I’ve never had a group of peers to pass work back and forth between each other, give each other notes and help out on each other’s shoots,” she says. “I come from a background of self-shooting music videos, and they’re a pretty lonely place creatively — it’s you, your camera, and, at most, a camera assistant. So having this group of friends who actually gives you the time you need to chat about and improve your work is incredible.”</p>
<p>Lance says that aspiring filmmakers who are interested in applying to the challenge should “submit stuff that you believe in and that you are very passionate about.”</p>
<p>“You don’t need to have made 10 short films to be an Ignite Fellow,” he says. “Some filmmakers who were in my class, it was their first film, so don’t be intimidated by the idea of being an experienced filmmaker. Just make the things you believe in and put your best foot forward.”</p>
<p><em>Learn more about</em> <em>the</em> <em><a href="https://www.sundance.org/initiatives/ignite">Sundance Ignite program</a> and get ready to</em> <em><a href="https://collab.sundance.org/catalog/ignite">submit your short film</a>.</em></p>
</div>
<div>
<h2 id="featured-posts">Featured posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/01/27/celebrating-creativity-at-2021-sundance-film-festival.html">https://blog.adobe.com/en/publish/2021/01/27/celebrating-creativity-at-2021-sundance-film-festival.html</a></li>
<li><a href="https://blog.adobe.com/en/2020/03/11/celebrating-and-empowering-women-today-and-everyday.html">https://blog.adobe.com/en/2020/03/11/celebrating-and-empowering-women-today-and-everyday.html</a></li>
<li><a href="https://blog.adobe.com/en/2020/08/10/elevating-the-voices-of-women-in-film.html#gs.uzh9ts">https://blog.adobe.com/en/2020/08/10/elevating-the-voices-of-women-in-film.html#gs.uzh9ts</a></li>
</ul>
</div>
<div>
<p>Topics: Creativity, Video & Audio, Insights & Inspiration, Media & Entertainment, Creative Cloud, Brand</p>
<p>Products: Creative Cloud,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-capgeminixdrdvdesignsystemfinancialux embed-internal-02">
<div>
<h1 id="capgeminis-rdv-design-system-for-financial-ux-with-adobe-xd">Capgemini’s RDV design system for financial UX with Adobe XD</h1>
<p>Learn how Capgemini combined Rapid Design & Visualization with Adobe XD to create a customized design system for their fintech clients.</p>
</div>
<div>
<img src="/hlx_850743689b665aaa682ba8e5d8590d4856f44867.jpeg" alt="Title slide: A comprehensive design system for Fintech using Adobe XD">
</div>
<div>
<p>By Kapil Joshi</p>
<p>Posted on 03-02-2021</p>
</div>
<div>
<p>In today’s fast-paced world, people are accessing (and indeed relying on) their digital devices more than ever before. At Capgemini, we keep this top of mind in all of our work — our constant endeavor is to provide seamless user experience and design solutions, always considering market trends, industry standards, and the scope of technology.</p>
<p>When it comes to the work of designers, there is one fundamental challenge that the whole community faces these days — tighter deadlines with faster turnaround times. Add to that the constant challenge of preferences and personalized workflows — every business or organization we work with has their choice of tools.</p>
<p>At Capgemini, we have chosen <a href="https://www.adobe.com/products/xd.html">Adobe XD</a> as our solution for meeting the growing demands facing designers, due to its diverse features and the way it caters to all our requirements. In fact, we’ve been using XD ever since its launch in 2016 (enjoying the advanced <a href="https://www.adobe.com/ca/products/xd/features/whats-new.html">features the team has been regularly adding</a> with every release). XD is a tool that caters to all parts of works — designing, prototyping, exporting visual assets, and UI specs — and this has given us a serious edge against the competition.</p>
<div class="embed embed-internal embed-internal-xd embed-internal-creativecloud">
<div><p><img src="/hlx_14c20520abab7f5a26508a03e5607d6f48395803.png" alt=""></p>
<h3 id="adobe-xd">Adobe XD</h3>
<p>Create and share designs for websites, mobile apps, voice interfaces, games, and more.</p>
<p><a href="https://www.adobe.com/products/xd.html">Learn more</a></p></div>
</div>
<p>Nowhere has this been clearer than a recent project we completed in the notoriously tough-to-design-for financial services sector.</p>
<h3 id="rapid-design-and-visualization-a-new-process-to-meet-fintech-client-requirements-faster">Rapid Design and Visualization: A new process to meet fintech client requirements faster</h3>
<p>We were recently asked to help a global fintech leader increase its revenues. To do this, we created a <a href="https://xd.adobe.com/ideas/principles/design-systems/">design system</a> in Adobe XD, and this coupled with our use of Rapid Design and Visualization (RDV) methodology allowed us to find success in a big way.</p>
<p>Rapid Design and Visualization is a scientific requirement gathering and experience design methodology, which is based on <a href="https://xd.adobe.com/ideas/principles/human-computer-interaction/user-centered-design/">user-centered design principles</a>. It helps us capture and define user requirements in an agile fashion through collaborative design thinking workshops conducted with business stakeholders and our domain experts and technical architects.</p>
<p><img src="/hlx_e4484f49db99f6160bfcf8421e2725794ab1b711.jpeg" alt="RDV methodology infographic"></p>
<p><em>The RDV methodology enhances requirement gathering and experience design.</em></p>
<p>We also create visual simulations without writing a single line of code, which helps save a lot of development effort as the usability can be assessed beforehand. In this financial services project, and other design projects we’ve worked on, RDV has enabled us to deliver multiple benefits for our clients:</p>
<ul>
<li><strong>Save time and cost:</strong> We help business users and technical teams capture requirements by creating visual simulations.</li>
<li><strong>Re-define experiences:</strong> Our RDV experts help customers boost the user experience by improving journeys and usability.</li>
<li><strong>Understand users:</strong> We conduct usability and A/B testing with RDV simulations to validate the requirements and journeys without a single line of code.</li>
<li><strong>Facilitate consistency and iterate faster:</strong> We use a large and structured repository built to banking and insurance-industry standards.</li>
</ul>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/bS6QpHT7PyI?rel=0&v=bS6QpHT7PyI&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<p>In terms of business goals, we have an advantage as we can provide robust solutions and save time and effort that go into coding during the delivery of the project. Here’s how we did it for this specific financial services client.</p>
<h3 id="a-robust-design-system-for-financial-services-clients">A robust design system for financial services clients</h3>
<p>For this fintech giant, we built a one-stop white-label solution for their banking and wealth management clients. The design system, which took our team and Adobe XD working in collaboration, four months to create, includes a huge collection of reusable interaction patterns and UI elements. It’s robust, cohesive, and customizable, which saves a lot of development effort, and the solution is far more realistic and effective.</p>
<p>The main motive was to ensure a quick turnaround time for creating low-fidelity prototypes. We wanted to build a foundational ecosystem that could help our designers meet their stringent deadlines and reduce the number of iterations, boosting their productivity. We also wanted the design system to be more in line with our changing customer needs and technical feasibility. Finally, we wanted to ensure our design system was not only relevant to our domain. We didn’t want it to have an isolated view but a holistic perspective.</p>
<table>
<thead>
<tr>
<th>Block Embed</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://video.tv.adobe.com/v/331913">https://video.tv.adobe.com/v/331913</a></td>
</tr>
</tbody>
</table>
<p>Designed for end users, the design system improves the user experience by reducing cognitive and motor load, which leads to faster decision making. We rapidly created visual simulations of multiple investor portfolios, including customized branding of all their banking and wealth management clients, for hundreds of screens in record time. These high-fidelity interactive simulations, or prototypes, not only gave a precise understanding of how actions will be performed on the digital platforms but also what the end product is going to look like. It ensured our customers could visualise the product or solution faster during the requirement gathering phase.</p>
<p>An enhanced digital exercise of this kind helps our clients take their users through a visual experience of the end results and helps build confidence and a true partnership to achieve their common goal of delighting their customers.</p>
<p>This is just one of the many success stories which the RDV methodology is driving to boost revenues across financial services organizations. It’s crucial to understand the client’s requirements to make this happen. Every customer wants a wow factor — and for us, working in Adobe XD has allowed us to create effective solutions that save time and promote faster output while meeting the requirements for our financial services clientele.</p>
</div>
<div>
<h2 id="featured-posts">Featured Posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2017/07/12/building-a-new-service-in-six-weeks-with-adobe-xd.html">https://blog.adobe.com/en/publish/2017/07/12/building-a-new-service-in-six-weeks-with-adobe-xd.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/02/09/zoom-plugin-xd-virtual-meeting-integrations.html">https://blog.adobe.com/en/publish/2021/02/09/zoom-plugin-xd-virtual-meeting-integrations.html</a></li>
<li><a href="https://blog.adobe.com/en/2021/01/14/user-testing-feedback-plugins.html">https://blog.adobe.com/en/2021/01/14/user-testing-feedback-plugins.html</a></li>
</ul>
</div>
<div>
<p>Topics: Insights & Inspiration, Customer Stories, Financial Services, Creative Cloud,</p>
<p>Products: XD,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-introducingthe2021sundanceignitexadobefellows embed-internal-02">
<div>
<h1 id="introducing-the-2020-sundance-ignite-x-adobe-fellows">Introducing the 2020 Sundance Ignite x Adobe Fellows</h1>
</div>
<div>
<img src="/hlx_62bbe79d98cee36bf976e0eb99b46e1932dd27a8.jpeg" alt="Collage of 10 different filmmakers selected for Sundance Ignite x Adobe Fellowship.">
</div>
<div>
<p>By Adobe Communications Team</p>
<p>Posted on 03-02-2021</p>
</div>
<div>
<p>Creativity plays a crucial role in how we tell our stories, and it’s never been more important to elevate new voices, particularly in a medium like film. For the past six years, we’ve partnered with Sundance Institute with the common vision of inspiring creativity and bringing stories from the next generation of filmmakers to life. We are proud to be a founding partner of the Sundance Ignite x Adobe Fellowship program, empowering a new wave of emerging, diverse voices with the tools, mentorship and resources needed to tell their stories. Today we are thrilled to announce the 2020 Sundance Ignite x Adobe Fellows. Meet the 10 emerging filmmakers, selected from over 1,600 submissions around the world, who represent the next generation of storytellers.</p>
<div class="embed embed-oembed embed-slideshare"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%; padding-top: 38px;"><iframe src="https://www.slideshare.net/slideshow/embed_code/key/6hJo2bA9XJRk5K?ref=https%3A%2F%2Fblog.adobe.com%2F&kind=embed-slideshare&provider=slideshare" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media" title="content from slideshare" loading="lazy"></iframe></div></div>
<p>With support from Adobe, the Fellowship fosters the filmmakers both professionally and artistically. Each Fellow is matched with a Sundance Institute alumni mentor, is eligible for internships and program opportunities, and receives an artist grant to produce future work in addition to a complimentary subscription to Adobe Creative Cloud. Later in the summer, several of the Fellows’ winning short films were screened as part of <a href="https://london.sundance.org/">Celebration of Sundance Film Festival: London</a>.</p>
<p>The future is bright for this new class of fellows. Fellows from previous cohorts – represented across 15 countries – have gone on to <a href="https://theblog.adobe.com/adobe-at-sundance-2020/">produce more work</a> (98%), had their work commissioned, and have earned prestigious awards and <a href="https://www.sundance.org/blogs/sundance-ignite--meet-the-next-generation-of-independent-filmmakers">recognition</a> (60%). Beyond recognition, these filmmakers are bringing important topics to light and sharing diverse points of view. “We are so proud to partner with Sundance in the Sundance Ignite x Adobe program and look forward to working with the 2020 Fellows to help bring their stories, creativity and perspectives to the world,” said John Travis, Adobe’s VP Brand Marketing.</p>
<p>Learn more about the <a href="https://www.sundance.org/initiatives/ignite">Sundance Ignite program</a> and get ready to <a href="https://collab.sundance.org/catalog/ignite">submit your short film</a> to the 2021 Sundance Ignite x Adobe Short Film Challenge. Through the challenge, we’ll identify 10 new Sundance Ignite x Adobe Fellows, who will have yearlong access to powerful mentorships and professional development opportunities. The challenge is open now through April 6.</p>
<p>At Adobe, we believe creativity doesn’t just open doors—it opens worlds. Given the overwhelming number of submissions from young filmmakers around the globe, we’re expanding our support for those looking to hone their skills and explore filmmaking opportunities with 500 full-access scholarships to <a href="https://collab.sundance.org/">Sundance Co//ab</a>—a platform providing emerging creators with online resources to create and share their stories.</p>
<p>“Our mission is to enable creativity for all. We believe that everyone has a story to tell and that those stories deserve to be heard. When we elevate a broader and more diverse set of voices, we can create change within ourselves, our communities and the world,” said Travis.</p>
<p>For more resources and opportunities to foster into your creativity, check out <a href="https://www.adobe.com/corporate-responsibility/creativity/scholarship-programs.html">other scholarships, grants and career development programs</a> from Adobe.</p>
</div>
<div>
<h2 id="featured-posts">Featured posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/03/01/time-to-shine-announcing-the-2021-adobe-experience-maker-awards.html">https://blog.adobe.com/en/publish/2021/03/01/time-to-shine-announcing-the-2021-adobe-experience-maker-awards.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/01/28/how-je-delve-turns-young-creators-into-music-video-pros.html">https://blog.adobe.com/en/publish/2021/01/28/how-je-delve-turns-young-creators-into-music-video-pros.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/01/27/celebrating-creativity-at-2021-sundance-film-festival.html">https://blog.adobe.com/en/publish/2021/01/27/celebrating-creativity-at-2021-sundance-film-festival.html</a></li>
</ul>
</div>
<div>
<p>Topics: Creativity, Responsibility, Diversity & Inclusion,</p>
<p>Products:</p>
</div>
</div>
<div class="embed embed-internal embed-internal-celebratingblacklifeloveandlegacy embed-internal-02">
<div>
<h1 id="celebrating-black-life-love-and-legacy-at-adobe">Celebrating Black Life, Love, and Legacy at Adobe</h1>
</div>
<div>
<img src="/hlx_a29180d9b7a661eebc91a9babc0242f7e66d4536.png" alt="Black History Month 2021, a celebration of Black life, love and legacy.">
</div>
<div>
<p>By Karen Robinson</p>
<p>Posted on 03-02-2021</p>
</div>
<div>
<p>Black History Month (BHM) is a time for me to reflect, celebrate, and honor my ancestry, but this year BHM took on a greater significance as I’ve yearned for connections and community amidst the pandemic and on-going racial injustice incidents. My Adobe family has helped lift me up during this challenging time through the strong ties I have developed with my fellow members in Adobe’s Black Employee Network (BEN), and through engagement with leaders and colleagues to address how we can support the success of our Black community.</p>
<p>This year, as the Executive Sponsor of BEN, I was proud to be a part of Adobe’s BHM events centered around the theme: <em>Celebrating Black Life, Love, and Legacy</em>. Our goal was to bring members of BEN and our many allies together to celebrate the talent, leadership, creativity, and stories from the Black community. We helped unite the global Adobe community through these programming highlights:</p>
<ul>
<li>An energizing kick-off event, with more than 1,000 employees across 11 countries, showcasing talented artists and musicians including virtual performances by artist <a href="https://www.kwamebrathwaite.com/">Kwame S. Brathwaite</a>, musical guests <a href="http://brandeeyounger.com/">Brandee Younger</a>, <a href="https://youtu.be/U33YkWySr4w">Marcus Gilmore</a>, <a href="https://youtu.be/f_dSlxgD2Fo">Nicholas Payton</a>, and hip-hop performance group <a href="https://www.1520arts.org/about-1520arts/">1520 Arts</a><u>.</u></li>
<li>A series of employee story spotlights with <a href="https://www.youtube.com/watch?v=7Kzlk7RmQ_s">Ronell Hugh</a>, <a href="https://youtu.be/buTHXtCwlfE">Bria Alexander</a>, and <a href="https://youtu.be/pQAv_tXFbiI">TJ Rhodes</a><u>,</u> sharing their legacy at Adobe and beyond, and <a href="https://blog.adobe.com/en/publish/2021/02/04/create-the-miracle.html#gs.uglf27">Markeia Brox-Chester</a> and <a href="https://blog.adobe.com/en/publish/2021/02/18/afa-earnest-mack-the-talk.html#gs.ugldl6">Earnest Mack</a> sharing their personal journeys and triumphs.</li>
<li>A fireside chat with Major General William J. Walker, the leader of the Washington, DC National Guard, who shared his experiences as a Black leader in both the military and law enforcement.</li>
<li>A Black Women Creatives Panel, a food and cultural showcase, and a virtual marketplace to support Black-owned businesses.</li>
<li>A celebration of <a href="https://blog.adobe.com/en/publish/2021/02/01/adobe-celebrates-black-history-month.html#gs.ugn7ju">Black creativity</a> across the industry by elevating and amplifying diverse voices through multi-media content, grants and scholarships, and media partnerships.</li>
<li>Donations to help the larger Black community through corporate and individual contributions to: <a href="https://100blackmen.org/">100 Black Men</a>, <a href="https://evc.org/">Educational Video Center</a>, and <a href="https://www.greenescholars.org/what-we-do">Greene Scholars Program</a>.</li>
</ul>
<p>Throughout the month I was humbled by the courage and vulnerability of my Black colleagues in telling their unique personal experiences. And as the daughter and granddaughter of servicemen, hearing from Major General William J. Walker not only brought nostalgia for my beloved father and grandfather, but also underscored the sincere appreciation I have to all those who serve.</p>
<p>Our impactful BHM events and programs helped set the stage for ongoing investments and progress throughout the year. A key driver for this is Adobe’s Taking Action Initiative (TAI), which was established in 2020, in <a href="https://blog.adobe.com/en/2020/06/10/listening-learning-and-taking-action.html#gs.jqbxlh">response</a> to the death of George Floyd and other incidents of racial injustice. I am honored to be a co-leader of the initiative with the mission to accelerate the representation, development, and success of Adobe’s Black employees through five task forces: Community, Hiring & Recruitment, Growth & Advancement, Responsibility & Advocacy, and Transparency & Governance. I collaborate with task force participants – encompassing BEN members and organizational subject matter owners – to strengthen our commitment and initiate new programs. Given the level of focus and engagement from senior leadership, including our CEO and Chief People Officer, I am encouraged that TAI will make an impact on the success of our Black community and overall representation at the company.</p>
<p>And while I know this is a marathon, where meaningful progress will take time, I’m motivated by recent TAI milestones including <a href="https://theblog--adobe.hlx.page/en/publish/2020/12/23/five-diversity-and-inclusion-lessons.html#gs.ugjwz5">establishing aspirational goals</a> relative to employee representation, increasing investments in Historically Black Colleges and Universities (HBCUs), and investing in growth and development through programs such as the McKinsey Black Leadership Academy.</p>
<p>As BHM concludes I am invigorated by the commitment of BEN members and allies who united employees at a whole new level throughout BHM 2021 and by the ongoing efforts at Adobe to accelerate the success of Adobe’s Black employees while creating a change in the broader landscape of social justice.</p>
<div class="embed embed-internal embed-internal-adobeforall embed-internal-adobelife">
<div><p><img src="/hlx_c8c81ea35423b0511a921017439ef0a520f84d33.png" alt=""></p>
<h3 id="adobe-for-all">Adobe For All</h3>
<p>We believe that when people feel respected and included they can be more creative, innovative, and successful, which is why we are committed to investing in building a diverse and inclusive environment for our employees, customers, partners, and the tech industry as a whole.</p>
<p><a href="https://www.adobe.com/diversity.html">Learn more</a></p></div>
</div>
</div>
<div>
<h2 id="featured-posts">Featured posts</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/02/01/adobe-celebrates-black-history-month.html#gs.uzo3u7">https://blog.adobe.com/en/publish/2021/02/01/adobe-celebrates-black-history-month.html#gs.uzo3u7</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/02/19/amplifying-black-creatives-ben.html#gs.uzo3io">https://blog.adobe.com/en/publish/2021/02/19/amplifying-black-creatives-ben.html#gs.uzo3io</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/02/04/create-the-miracle.html#gs.uzo4zk">https://blog.adobe.com/en/publish/2021/02/04/create-the-miracle.html#gs.uzo4zk</a></li>
</ul>
</div>
<div>
<p>Topics: #AdobeForAll, Brand, Adobe Life, Adobe Culture, Diversity & Inclusion, Celebrating the Black Community</p>
<p>Products:</p>
</div>
</div>
One month has passed since the previous report so it’s time for a status update.
As you probably already know, Igalia is working on the implementation of :focus-visible in WebKit, a project that is being sponsored by many people and organizations through the Open Prioriziatation campaing. We’ve reached 84% of the goal, 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.
The main highlight for February is that initial work has started to land in WebKit, though some important bits are still under review.
Spec issues
There were some open discussions on the spec side regarding different topics, let’s review here the status of them:
:focus-visible on <select> element: After some discussion on the CSS Working Group (CSSWG) issue it was agreed to remove the <select> element from the tests and each browser could decide whether to match :focus-visible when it’s clicked, as there was not a clear agreement regarding how to interpret if it allows or not keybaord input.
In any case Chromium has still a bug on elements that have a popup (like a <select>). When you click them they match :focus-visible, but they don’t show the focus indicator (because they want to avoid showing two focus indicators, one on the <select> and another one on the <option>). As it’s not showing a focus indicator, it shouldn’t match :focus-visible in that situation actually.
:focus-visible on script focus: The spec is not totally clear about when an element should match (or not) :focus-visible after script focus. There has been a nice proposal from Alice Boxhall and Brian Kardell on the CSSWG issue, 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 :focus-visible 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.
Currently the list of heuristics on the spec are not normative, they’re just hints to the browsers about when to match :focus-visible (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 :focus-visible 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.
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. blur() before focus() and things like that) should work. For that reason I worked on a set of tests 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.
:focus-visible and Shadow DOM: Another topic already explained in the previous report. My proposal to the CSSWG was to avoid matching :focus-visible on the ShadowRoot when some element in the Shadow Tree has the focus, in order to avoid having two focus indicators.
There has been raised a concern, as this would allow to guess if an element is or not a ShadowRoot by focusing it via script and then checking if it matches or not :focus-visible (but ShadowRoot elements shouldn’t be observable). However that’s already possible in WebKit that currently uses :-webkit-direct-focus 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 outline to determine if it’s a ShadowRoot.
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.
Default User Agent style sheet
Early this month I landed a patch to start using :focus-visible in Chromium User Agent style sheet, this is included in version 90. 🚀 This means that from that version on you won’t see an outline when you click on a <div tabindex="0">, only when you focus it with the keyboard. Also the hack:focus:not(:focus-visible) won’t be needed anymore (actually it has been removed from the spec too).
In addition, Firefox is also using :focus-visible on their User Agent style sheet since version 87.
More about tests
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.
I also found out some limitations of WebKit with regard to testdriver.js support for simulating keyboard inputs. Some of the :focus-visible tests use the method test_driver.send_keys() to send keys like Control or Enter. I added supportforthem on WebKit. Apart from that, I fixed how modifier keys are identified in WebKitGTK and WPE, as they were not following other browsers exactly (e.g. event.ctrlKey was not set on keydown event, only on keyup).
WebKit implementation
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.
The first patch that just do the parsing of the new pseudo-class and adds a experimental flag has already landed.
Now a second patch is under review. 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 WebKit nightlies.
Some numbers
Like in the previous post, let’s again review the numbers of what has been done during in this project:
20 PRs merged in WPT (7 in February).
14 patches landed in WebKit (9 in February).
7 patches landed in Chromium (3 in February).
1 PR merged in Selectors spec (1 in February).
1 PR merged in HTML spec (1 in February).
Next steps
First thing is to get the main patch landed in WebKit and verify that things are working as expected on the different platforms.
Another issue we need to solve is to reach an agreement on how script focus should work regarding :focus-visible, and then get that implemented in WebKit covering all the cases.
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 :focus-visible too.
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 <select> 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.
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!
Safari Technology Preview Release 121 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
Collapsed blackboxed call frames in the Call Stack section (r272371)
CSS
Added support for aspect-ratio on grid items (r272307)
Added support for logical variants of scroll-padding and scroll-margin (r272035)
Added support for color(a98-rgb ...), color(prophoto-rgb ...), color(rec2020 ...), color(xyz ...), hwb() as part of CSS Color 4 (r271992, r272125, r272123, r272311, r272344)
Added support for percentages when parsing color(srgb ...) and color(display-p3 ...) per-spec (r271866)
Changed sRGB to XYZ conversion matrix values to match values in the latest spec (r272498)
Fixed max-height percentages that are wrongly resolved for replaced grid items (r272309)
Fixed grid item to fill the grid area for stretch or normal self alignment (r272308)
Fixed animation of rotate or scale property to correctly account for static translate property (r272201)
Fixed font-stretch to apply to system-ui (r272073)
Fixed the nested grid container which has a replaced item with max-height incorrectly getting width(0px) (r272338, r272711)
Implemented scroll-snap-stop for scroll snapping (r272610)
Handled aspect-ratio: auto m/n for replaced elements (r272360)
Handled min-width: auto or min-height: auto for aspect-ratio (r272718)
Handled zero aspect-ratio width or height (r271948)
Made auto && <ratio> use content box-sizing (r272569)
GPU Process
Enabled audio capture in GPUProcess by default (r272735)
Enabled audio capture for speech recognition in GPUProcess (r272434)
Enabled GPU WebRTC codecs in GPUProcess by default on macOS (r272496)
Enabled video capture in GPUProcess by default on macOS (r272810)
Fixed <audio> not loading when the URL ends with .php causing some tests to time out (r272750)
Fixed implementation of WebGL power preference and discrete/internal GPU selection with ANGLE (r271880)
Media
Added intermediate volume icon states between “mute” and “max” (r272375)
Changed media controls to show the total duration, only switching to time remaining when clicked (r272373)
Changed MediaStream-backed video elements to not compute the mediaType based on track muted states (r272583)
Connected MediaSession with MediaRemote and NowPlaying (r272445, r272589)
Fixed sound on YouTube after switching back to foreground (r272829)
Fixed playback of WebM/Opus generated from Chrome MediaRecorder (r272822)
Fixed Picture-in-Picture video pauses when scrolling on Twitter (r271870)
Updated media controls time scrubber styles (r272352, r272438)
Updated media controls to use new SF Symbols (r272339)
Web API
Fixed the return key binding for date inputs conflicting with pressing return to submit a form (r272495
Fixed selecting a date on datetime-local inputs unexpectedly adding second and millisecond fields (r272368)
Fixed rendering a pattern with an SVG image (r272549)
<div class="embed embed-internal embed-internal-combinepdffileswitheaseusingacrobatonlinetools embed-internal-16">
<div>
<h1 id="combine-pdf-files-with-ease-using-acrobat-online-tools">Combine PDF files with ease using Acrobat online tools</h1>
<p>Take the hassle out of merging PDF files. With the Adobe Acrobat online Merge PDFs tool, it’s easy to combine PDFs with great results.</p>
</div>
<div>
<img src="/hlx_c22612eb4acc0b72286baef2ef683b403c0441ef.jpeg" alt="Merge files into one PDF">
</div>
<div>
<p>By Adobe Document Cloud Team</p>
<p>Posted on 02-16-2021</p>
</div>
<div>
<p>Combining multiple PDFs into a single document can streamline your work in so many ways. But if you have ever tried it, you know that many methods commonly used to merge PDFs can be time consuming or produce less-than-ideal results. With Adobe Acrobat <a href="https://www.adobe.com/acrobat/online.html">online PDF tools</a>, combining PDFs into a single document is quick, easy and effective.</p>
<div class="embed embed-internal embed-internal-acrobat embed-internal-documentcloud">
<div><p><img src="/hlx_3e0e58654cbc37f0005f6ba2a61edb9314c3feaf.png" alt=""></p>
<h3 id="adobe-acrobat">Adobe Acrobat</h3>
<p>Stay connected to your team with simple workflows across desktop, mobile, and web — no matter where you’re working.</p>
<p><a href="https://acrobat.adobe.com/us/en/acrobat.html">Learn more</a></p></div>
</div>
<h3 id="take-the-hassle-out-of-merging-pdfs">Take the hassle out of merging PDFs</h3>
<p>There are plenty of reasons to combine PDF files. Maybe you need to create an end-of-year report for your business by merging monthly reports, or maybe you need to combine various forms and sheets into a single cohesive package for your next meeting. If you are an educator, perhaps you would like to create a single set of reading materials for your students from multiple sources. Or maybe you would like an easy way to compile your favorite home recipes into a digital cookbook.</p>
<p>With the new Acrobat <a href="http://www.adobe.com/acrobat/online/merge-pdf.html">Merge PDFs</a> tool, you can complete any of these tasks in just a few moments. Simply open the tool in any browser, select the PDFs you want to combine, and Acrobat takes care of the rest. The Merge PDFs tool is just one of 19 powerful online PDF tools that Acrobat lets you try for free. And if you need to make your workday even more efficient, consider an Acrobat DC subscription. You can start a seven-day <a href="https://acrobat.adobe.com/us/en/free-trial-download.html">free trial</a><a href="https://acrobat.adobe.com/us/en/free-trial-download.html"> of Acrobat Pro DC</a> (then US$14.99/mo) to get unlimited access to all tools today.</p>
<h3 id="easy-document-organizing-with-acrobat">Easy document organizing with Acrobat</h3>
<p>Once you combine your PDFs, you will likely want to reorganize or edit the pages in the merged PDF. If you are already a subscriber or have started your free trial, you will have access to these Acrobat organization tools to finalize and polish your documents:</p>
<ul>
<li>The <a href="https://www.adobe.com/acrobat/online/rearrange-pdf.html">Reorder PDF Pages</a> tool to move pages around within a PDF.</li>
<li>The <a href="https://www.adobe.com/acrobat/online/delete-pdf-pages.html">Delete PDF Pages</a> tool to delete pages from a PDF.</li>
<li>The <a href="https://www.adobe.com/acrobat/online/rotate-pdf.html">Rotate PDF Pages</a> tool to rotate individual pages right or left within a PDF</li>
<li>The <a href="https://www.adobe.com/acrobat/online/pdf-editor.html">Edit PDF</a> tool to add comments and annotations to a PDF.</li>
</ul>
<p>With help from Acrobat, you can make sure your documents present content just the way you want with quality you can trust. Discover all you can do with PDFs with a free trial of Acrobat DC and Acrobat’s online PDF tools today.</p>
</div>
<div>
<h2 id="featured-posts">Featured Posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/02/02/adobe-adds-new-acrobat-tools-to-tackle-pdf-tasks-in-the-browser.html#gs.sqtpfv">https://blog.adobe.com/en/publish/2021/02/02/adobe-adds-new-acrobat-tools-to-tackle-pdf-tasks-in-the-browser.html#gs.sqtpfv<br>
</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/01/19/get-ahead-of-tax-planning-for-2021-with-adobe-acrobat-tools.html#gs.sqp1ad">https://blog.adobe.com/en/publish/2021/01/19/get-ahead-of-tax-planning-for-2021-with-adobe-acrobat-tools.html#gs.sqp1ad<br>
</a></li>
<li><a href="https://blog.adobe.com/en/publish/2020/08/13/sign-here-there-and-everywhere.html#gs.sqtrol">https://blog.adobe.com/en/publish/2020/08/13/sign-here-there-and-everywhere.html#gs.sqtrol</a></li>
</ul>
</div>
<div>
<p>Topics: Future of Work, Productivity, Document Cloud,</p>
<p>Products: Document Cloud, Acrobat,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-5reasonswhyyoushouldntmissadobesummitthisyear embed-internal-16">
<div>
<h1 id="5-reasons-why-you-shouldnt-miss-adobe-summit-this-year">5 reasons why you shouldn’t miss Adobe Summit this year</h1>
<p>Why you shouldn’t miss Adobe Summit 2021, the world’s premiere conference for Experience Makers.</p>
</div>
<div>
<img src="/hlx_a20b34305718bb4a8f4029ec50d8a0849a144426.jpeg" alt="Abstract art that is colorful on a white background. ">
</div>
<div>
<p>By Adobe Communications Team</p>
<p>Posted on 02-16-2021</p>
</div>
<div>
<p>Adobe Summit 2021 registration is off to a great start. Set for April 27 — 29, the virtual event will bring together Experience Makers from some of the world’s most-recognized brands. No matter where you are in your career, you’ll be able to attend sessions that will leave you and your company future-proof. This is true regardless of your area of expertise — from content creation and personalization, to data and analytics.</p>
<p><a href="https://portal.adobe.com/pages/adobe/as21/signin">Register for free</a> to build the skills to create client experiences that inspire loyalty and drive growth.</p>
<h3 id="explore-the-latest-customer-experience-trends">Explore the latest customer experience trends</h3>
<p>This year’s Adobe Summit comes at a time of seismic shifts in the customer experience landscape. That’s why we’ve planned more than 250 sessions and training workshops that will highlight game-changing innovation in how brands deliver experiences at every stage of the customer journey.</p>
<p>“Driving demand during COVID is top-of-mind for a lot of businesses,” says Alexandra Quick, a product marketing manager at Adobe. “That’s a subject we’re attacking head-on with a dedicated session.” Overall, participants can expect a “huge emphasis on digital marketing,” she adds. Included within this emphasis will be a deep dive into all the ways companies are using new technologies to advance their mobile commerce capabilities.</p>
<p>“In the case of digital commerce, 2020 has been an incredible year for growth,” says Shannon Hane, senior product marketing manager for commerce at Adobe. This has been true on both the B2C and the B2B sides of industries. Adobe Summit 2021, she says, represents a unique opportunity to learn “how people are managing that growth and adapting their commerce capabilities and experiences to this new environment.”</p>
<h3 id="get-inspired-by-top-brands-from-around-the-world">Get inspired by top brands from around the world</h3>
<p>This year’s conference will represent one of the most industry-diverse entries in the Summit series to date, with speakers from every corner of the tech sector, as well as education, financial services, sports, retail, and more. Leaders from each industry will share the field notes they’ve amassed during the unprecedented upheaval of the last year. Among the subjects you can expect them to cover are the following:</p>
<ul>
<li><a href="https://www.adobe.com/experience-platform.html">Adobe Experience Platform</a></li>
<li>Analytics, Insights, and Activation</li>
<li>B2B Marketing and ABM</li>
<li>Campaign Management</li>
<li>Collaborative Work Management</li>
<li>Content Creation</li>
<li>Developer Ecosystem</li>
<li>Digital Commerce</li>
<li>Digital Document Productivity</li>
<li>Personalization</li>
<li>Trends and Inspiration</li>
</ul>
<h3 id="discover-best-practices-and-new-techniques-and-products">Discover best practices and new techniques and products</h3>
<p>Maybe you’re a B2B company looking to sell directly to consumers, or a retailer looking to recreate the physical showroom experience online. Whatever your challenge, you’re likely to find a case study at this year’s Adobe Summit that offers you a shortcut to success in building customer experience, from IT to creative — and everything in between.</p>
<p>Finding and delighting customers takes more than the right strategy, however. It also requires the right tools, not to mention knowing how to use them. This April, you can expect to learn all about the latest in task-automation software, progressive web applications, 3D visualization, and more.</p>
<p>Customers will also get a sneak peek at the exciting new features coming to Adobe products, including <a href="https://www.adobe.com/marketing/experience-manager.html">Adobe Experience Manager</a> and <a href="https://www.adobe.com/marketing/marketo.html">Marketo Engage</a>.</p>
<p>“We’re going to showcase the innovations that we’re launching this year that give customers and brands the ability to make those experiences happen in a more agile, personalized way on every channel,” says product marketing manager Vebeka Guess.</p>
<h3 id="connect-with-adobe-experts-and-your-peers-worldwide">Connect with Adobe experts and your peers worldwide</h3>
<p>Opportunities for connecting with other Experience Makers can be hard to come by these days. That’s why networking activities are included with your Summit registration. Just because this year’s Summit is virtual, doesn’t mean it can’t be interactive.</p>
<p>“It’s not just the content that draws people to Summit, but the ability to network and interact with experts at Adobe, and also your peers,” Vebeka says. “People come to Summit to learn from each other as well as from Adobe.”</p>
<p>To this end, we’ll be launching Braindate, an interactive networking platform that will enable you to engage and interact with Summit attendees, expanding your learning and your network.</p>
<h3 id="its-free-and-its-virtual">It’s free and it’s virtual</h3>
<p>Adobe Summit 2021 is the most accessible conference ever for Experience Makers around the globe, and represents a unique opportunity for those who haven’t always been able to join in person. Reserve your spot now for the world’s premier conference on customer experience, where you’ll learn how to drive demand in a rapidly shifting marketplace, explore the latest technological and strategic trends, and draw inspiration from experts who are changing the world — one customer experience at a time.</p>
<p><em>Have questions? Visit our official Adobe Summit 2021 <a href="http://apps.enterprise.adobe.com/go/7015Y000002e5NKQAY">website</a>. You can also connect with us on social media using the hashtags #AdobeSummit, #MagentoImagine, or #MktgNation.</em></p>
<div class="embed embed-internal embed-internal-summitregistration embed-internal-summit">
<div><p><img src="/hlx_87e087ba6e238de864812fc9d69832a821c85f64.jpeg" alt=""></p>
<h3 id="expand-your-genius-at-adobe-summit">Expand your genius at Adobe Summit</h3>
<p>A free virtual event April 27-29, 2021</p>
<p>Join us to expand your skills, engage with other Experience Makers, and be inspired to create exceptional experiences that drive business growth and customer loyalty.</p>
<p><a href="http://apps.enterprise.adobe.com/go/7015Y000002e4q9QAA">Register for free</a></p></div>
</div>
</div>
<div>
<h2 id="featured-posts">Featured Posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/02/01/registration-is-open-adobe-summit-2021-is-free-virtual-and-global.html">https://blog.adobe.com/en/publish/2021/02/01/registration-is-open-adobe-summit-2021-is-free-virtual-and-global.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2020/04/29/10-brands-that-shifted-their-advertising-strategy-amid-covid-19.html#gs.t9pzk4">https://blog.adobe.com/en/publish/2020/04/29/10-brands-that-shifted-their-advertising-strategy-amid-covid-19.html#gs.t9pzk4</a></li>
<li><a href="https://blog.adobe.com/en/publish/2020/09/03/adobe-events-go-virtual-through-june-2021.html#gs.t9pzpj">https://blog.adobe.com/en/publish/2020/09/03/adobe-events-go-virtual-through-june-2021.html#gs.t9pzpj</a></li>
</ul>
</div>
<div>
<p>Topics: Adobe Summit, News, B2B, Experience Cloud,</p>
<p>Products: Experience Manager, Marketo Engage,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-applytobea202122creativeresident embed-internal-16">
<div>
<h1 id="apply-to-be-a-2021-22-creative-resident">Apply to be a 2021-22 Creative Resident</h1>
</div>
<div>
<img src="/hlx_24468c73e708a3ce0b899b5ada4ca2c80d3d7af9.png" alt="Adobe Creative Residency on colorful background. ">
</div>
<div>
<p>By Julia Tian</p>
<p>Posted on 02-16-2021</p>
</div>
<div>
<p>The Adobe Creative Residency is a year-long program that allows artists in the early stages of their creative careers to focus on building up their local creative communities and their own dream portfolios. Each Resident is supported with a full salary, health benefits, mentorship, access to Adobe software, speaking opportunities, and other project-specific support to make their vision a reality. The ideal candidate is passionate about building their community, skilled in their field, in the beginning stages of their creative career, and has the desire to make the Creative Residency their professional focus for one year.</p>
<p>We are excited to announce that applications for the 2021 Adobe Creative Residency will be open February 16 9a.m. PST — March 14 11:59 p.m. PST. If you’re interested in growing your creative career, read on for application information, tips, and other resources to help you with your submission.</p>
<p><img src="/hlx_5b2cda6c0bbcd804359c2df7cae93320eb3156cf.png" alt=""></p>
<h3 id="application-information">Application information</h3>
<p>Every year we look for a variety of ideas, people, and cultures representative of the diversity of Adobe’s creative community. This year, applications will be accepted from candidates living the United States.</p>
<p>We are looking for future Residents who have a strong area of focus in one of these categories:</p>
<ul>
<li>Short-form online video</li>
<li>Photography</li>
<li>Illustration: <a href="https://www.adobe.com/creativecloud/tools/drawing-software.html">digital drawing</a> and painting</li>
<li>Multi-disciplinary design: print and/or digital</li>
<li>Experience/Interaction design using Adobe XD</li>
</ul>
<p>If your area of expertise isn’t listed above, we still welcome your application. See our <a href="https://www.adobe.com/about-adobe/creative-residency/alumni.html">alumni page</a> to get a sense of the diversity of fields and styles we have supported in the past.</p>
<p><img src="/hlx_92fe789c844c645667e8c8fd4a8e6bc975a0191a.png" alt=""></p>
<h3 id="application-tips">Application tips</h3>
<p><strong>Get started</strong></p>
<ul>
<li>Begin by reading through the Creative Residency <a href="https://www.adobe.com/about-adobe/creative-residency.html">site</a>. Visit the How to Apply and FAQ pages for all the answers to your questions. Make sure you learn what the Residency is about and whether you are an eligible candidate.</li>
<li>Bookmark this article and the links in it that you find helpful, and refer to them as you build your application.</li>
<li>Review what previous residents submitted for their applications. Watch resident Anna Daviscourt’s <a href="https://youtu.be/DKpEX9VUgmw?t=512">video of five tips for applying</a>.</li>
</ul>
<p><strong>Form your project vision</strong></p>
<ul>
<li>Take time to think through your project. What is your motivation? What will your project accomplish? What materials or support will you need? How much time will each portion of your project take? Give yourself time to prepare thoughtful answers to the application questions.</li>
</ul>
<p><strong>Complete the application form</strong></p>
<ul>
<li>Make a copy or download the application <a href="https://docs.google.com/presentation/d/1DhIgHFAFXwing80_ymgg1G_Pw5PRZQuIf_SOu1AjtlY/edit?usp=sharing">template deck</a> as a PPT file and use it as a starting place for building out your project proposal. Make sure that you address all items and questions outlined in the template.</li>
<li>Upload your proposal as a PDF into the application online.</li>
</ul>
<p><img src="/hlx_8ba459e9af97f383249346546a69228744413fe9.png" alt=""></p>
<h3 id="application-resources">Application resources</h3>
<p>This is your opportunity to use your creative strengths to communicate your style, voice, and process. Craft a project proposal layout, storyline, and design that exemplify your creative strengths.</p>
<p>Refer to the past residents’ applications on our website. Notice how they used their artistic and organizational strengths to build a strong proposal. Remember that every submission is unique, so make sure yours reflects your style, brand, and voice.</p>
<p>In addition to the project proposal, we also consider your previous creative work, flexibility in trying new things, past work experiences, and willingness to take on new challenges. You can <a href="https://vimeo.com/256816569">watch 2018 resident Aaron Bernstein’s application video here</a> to see how he uses stop motion animation, audio, and photography to communicate his project concept. This gave us a good feel for his level of skill, what style to expect from his project, and his ability to pitch his design concepts visually and succinctly.</p>
<p><em>Good luck! We look forward to reviewing your application and hope to meet you soon.</em></p>
<div class="embed embed-internal embed-internal-creativeresidency embed-internal-creativecloud">
<div><p><img src="/hlx_020e0eec1e5c8b6ed4488341e9641abd6d547991.png" alt=""></p>
<h3 id="adobe-creative-residency">Adobe Creative Residency</h3>
<p>Create. Share. Activate. Empower. The Adobe Creative Residence and Community Fund supports the creative community with grants, tools, resources and guidance, giving creatives the opportunity to focus on building their dream portfolios.</p>
<p><a href="https://www.adobe.com/about-adobe/creative-residency/community-fund.html">Learn more</a></p></div>
</div>
</div>
<div>
<h2 id="featured-posts">Featured Posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/2020/05/01/creative-resident-aiko-fukuda-teams-up-with-pantone-for-mermay.html#gs.tcfutn">https://blog.adobe.com/en/2020/05/01/creative-resident-aiko-fukuda-teams-up-with-pantone-for-mermay.html#gs.tcfutn</a></li>
<li><a href="https://blog.adobe.com/en/2020/08/28/100-pencils-project-a-love-letter-to-drawing.html">https://blog.adobe.com/en/2020/08/28/100-pencils-project-a-love-letter-to-drawing.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/01/13/amazon-creative-jam-gives-future-designers-a-lift-through-mentorship.html#gs.tcgn93">https://blog.adobe.com/en/publish/2021/01/13/amazon-creative-jam-gives-future-designers-a-lift-through-mentorship.html#gs.tcgn93</a></li>
</ul>
</div>
<div>
<p><em>Topics: Creativity, Art,</em></p>
<p><em>Products:</em></p>
</div>
</div>
<div class="embed embed-internal embed-internal-spring2021adobestockcallforcontent embed-internal-16">
<div>
<h1 id="spring-call-for-content-signs-of-renewal">Spring call for content: Signs of renewal</h1>
<p>Now is the time for Adobe Stock, when clients are looking at new beginnings and looking for designs that capture the season of rebirth.</p>
</div>
<div>
<p><img src="/hlx_38bda93ad67d54b32ab92f46080a7f1512dcf9d1.jpeg" alt=""></p>
<p><em>Image source: Adobe Stock / <a href="https://stock.adobe.com/images/pensive-black-woman-in-flowery-land/380733334">JimenaRoquero/Stocksy</a></em> <em>.</em></p>
</div>
<div>
<p>By Brenda Milis</p>
<p>Posted on 02-16-2021</p>
</div>
<div>
<p>With subzero temperatures chilling much of the northern hemisphere, spring can seem ages away. But now’s the time at <a href="https://stock.adobe.com/">Adobe Stock</a> when everyone is looking at new beginnings, planning their campaigns, and looking for images, designs, illustrations, and videos that capture the sparkling excitement of the season of rebirth.</p>
<div class="embed embed-internal embed-internal-stockspring2021 embed-internal-creativecloud">
<div><p><img src="/hlx_2278364dc79d9438b4563396fab411af0b9cd079.png" alt=""></p>
<h3 id="spring-2021">Spring 2021</h3>
<p>Highlights from Adobe Stock.</p>
<p><a href="https://stock.adobe.com/collections/bLKnfC8p8gn3tyuCLjp7rrwaSMH02aEU">Learn more</a></p></div>
</div>
<p>While you will find a need for classics like colorful eggs, gingham blankets, and bundles upon bundles of flowers (after an especially isolated and static winter), visual trends are urging us towards a spring that is richer, more colorful, and more dreamlike than before. Here are some of the key topics and themes for spring 2021 at Adobe Stock.</p>
<p><img src="/hlx_8317b7a1d2d78214349889b027c226030a9553bb.jpeg" alt=""></p>
<p><em>Image source: Adobe Stock / <a href="https://stock.adobe.com/images/a-grandparent-waters-the-garden-flowers-with-his-grandchildren-older-person-and-child-doing-everyday-things-together/369646942">Antonio Rodriguez</a>.</em></p>
<h3 id="spring-2021s-exuberant-colors">Spring 2021’s exuberant colors</h3>
<p>Traditionally, the arrival of spring brings cheerful pastels. The soft and creamy roses, lavenders, buttercups, and blue bells we see sprouting each year find a home in everything from Easter eggs and linen dresses to macaroons.</p>
<p>This year there is a thirst for the most saturated and rich possibilities of these vernal mainstays. Perhaps it is a response to our dull, monochrome days behind a screen, but people are gravitating towards images, designs, and creations that convey vibrance and brightness. These rich colors play alongside the more muted pastel members of the same family, seen in the luscious Soft Start color palette.</p>
<p><img src="/hlx_1a29b36241b9f52948c6a06f0c8842178aa74551.jpeg" alt=""></p>
<p><em>Image source: Right: Adobe Stock/ <a href="https://stock.adobe.com/images/cheerful-woman-in-floral-hijab-against-black-wall-during-covid-19/398532442">Jose Luis CARRASCOSA/Westend61</a> Left: Adobe Stock / <a href="https://stock.adobe.com/images/man-wint-flowers-covering-his-eyes-behind-a-foral-bakground/187417312">Thais Ramos Varela/Stocksy</a>.</em></p>
<p><img src="/hlx_fe74885b5e51a2950e5db93bd7f30f3e758a1687.jpeg" alt=""></p>
<p><em>Image source: Adobe Stock /</em> <a href="https://stock.adobe.com/images/close-up-of-colorful-rose/379904296">Hayden Williams/Stocksy</a>.</p>
<p><img src="/hlx_c73e9e473527a6861c9d94f8486bf2e36c764cb5.jpeg" alt=""></p>
<p><em>Image source: Adobe Stock / <a href="https://color.adobe.com/Soft%20Start-color-theme-16559542">Soft Start color palette for spring on Adobe Color</a>.</em></p>
<p>Desire for energetic and flashy colors this spring can be seen as part of the 2021 <a href="https://blog.adobe.com/en/publish/2021/01/26/positively-colorful-adobe-stocks-2021-visual-trend-mood-boosting-color.html#gs.rfbvcm">Mood Boosting Color</a> trend. After a stressful and challenging 2020, artists and clients are letting a sense of optimism, pride, and exuberance glow through their color choices.</p>
<p><img src="/hlx_842b85d2bbcded5ef7b638a8d079d2e3a5e0fc8f.jpeg" alt=""></p>
<p><em>Image source: Adobe Stock / <a href="https://stock.adobe.com/images/kid-hiding-behind-colorful-clothes/380739343">JimenaRoquero/Stocksy</a></em> <em>.</em></p>
<h3 id="expanding-the-family-bubble">Expanding the family bubble</h3>
<p>One upside to our lifestyles in a time of quarantining, restricted travel, and social distancing, has been a renewed appreciation for the communities we live with every day. Roommates shared our birthdays, holidays, griefs, and joys with us.</p>
<p>Building a bubble together helped us appreciate the sense of connection we get from shared spaces and activities. Stock images, videos, and designs will reflect our expanded and enriched sense of communal life.</p>
<p><img src="/hlx_ad95255197dd87ae1f1782222825c5a4c4aaa461.jpeg" alt=""></p>
<p><em>Image source: Left: Adobe Stock / <a href="https://stock.adobe.com/images/badminton-rackets-on-pink-and-blue-background/194518654">AudreyShtecinjo/Stocksy</a></em> <em>Right: Adobe Stock / <a href="https://stock.adobe.com/images/skate-park-with-men-riding-bicycles/224201519">ADDICTIVE STOCK</a>.</em></p>
<p>As we head into the warmer months, we expect a transition from solitary exercise to group activities and play. Creatives can turn to the nostalgic appeal of sports like roller-skating, badminton, cycling, and jump rope to offer us new ways to explore the same backyards and local parks. Meanwhile more adventurous outings like paddle boarding or surfing give people more opportunities to play together in a socially distant setting. The <a href="https://stock.adobe.com/collections/CZopNySbTpKmoXOLaShZx9EvZuuHxVk0">Back in Action</a> stock collection showcases these shared ways of getting fresh air into our lungs.</p>
<p>Families have also adapted to our new reality. By July 2020, 52 percent of young adults resided with a parent, up from 47 percent just four months earlier. Even before a global pandemic, a record 64 million Americans lived in multi-generational housing (a kind of family life that has been popular outside the West for centuries). The <a href="https://stock.adobe.com/collections/WYswEM4UocKbGFa2JquhWxFy6qjRtg3F">Family Circle</a> collection at Adobe captures these larger, more diverse, and multigenerational families in a world of images and designs that celebrate the junctures between children and grandparents as they emerge into a new season.</p>
<p><img src="/hlx_39d42d69d151828762ab74ead945d820985bfd19.jpeg" alt=""></p>
<p><em>Image source: Adobe Stock / <a href="https://stock.adobe.com/images/young-mixed-race-girls-playing-on-tablet-wearing-masks-on-brownstone-stoop/354781980">Granger Wootz</a>.</em></p>
<h3 id="the-delights-of-small-things">The delights of small things</h3>
<p>In our screen-focused lifestyles and work environments, our day-to-day stimulation takes on a kind of visual monotony. Netflix following Zoom following social media. But the blooming of flowers, chirping of birds, and thawing of soil reminds us of the inexhaustible simple pleasures that surround us. As we emerge from our comfortable winter havens, spring offers a whole new dimension of experiences.</p>
<p>There is a new kind of intensity to all kinds of sensory pleasures and delights this spring, engaging not only the eyes but the senses of sound, taste, smell, and touch as well. The artwork in the <a href="https://stock.adobe.com/collections/f0twSN7GhH2nzU226sDazNIT292vDLpj">Spring Awakening</a> collection evoke the scent of freshly picked herbs and lettuces and brewed tea, the tarty sweetness of young berries, and the bracing flutter of wind blowing through fields of grass.</p>
<p>There is a focus on ways to experience nature closer to home and in simpler ways: planting a new patch of oregano in your garden or windowsill, or picking local wildflowers as opposed to flying across the world to a foreign land. And as we bring this embodied approach inside on the cool nights and blustery days, we bring with us a desire to nourish our senses with playful luxuries like baking, fort-building, and drawing.</p>
<p><img src="/hlx_b594409ce775849a95259f76538435ee84fba53d.jpeg" alt=""></p>
<p><em>Image source: Adobe Stock / <a href="https://stock.adobe.com/images/farmers-hands-hold-organic-green-salad-vegetables-in-the-plot-concept-of-healthy-eating-non-toxic-food-growing-vegetables-to-eat-at-home/327299516">SUPERMAO</a>.</em></p>
<h3 id="reveries-of-spring">Reveries of spring</h3>
<p>We often describe spring as the season of rebirth and new life. This year, it is also the host to our most sumptuous dreams and fantasies. If our bodies are stuck in place, our minds are wandering to worlds that are sun-drenched, saturated, soft, and luxurious.</p>
<p>The <a href="https://stock.adobe.com/collections/vcEFDEldJZDnXA7UHIqThHU1USm3y2Lj">Dreaming of Spring</a> Adobe Stock collection communicates a cottagecore-inflected fantasy — a sense of being in places unstuck from time and technology. People wander in endless fields of daisies, poppies, and dandelions wearing simple rustic fabrics. Chickens and sheep remind us of our connection to the rest of nature’s creatures. Friends and lovers picnic in lush and picturesque settings where time seems to have stopped. There is a freedom and creativity that these dreamlike themes allow, with images that employ double exposure, abstraction, and playfully surreal compositions.</p>
<p><img src="/hlx_a996078543798100626f817f8f14b1a6d5b040c8.jpeg" alt=""></p>
<p><em>Image source: Adobe Stock / <a href="https://stock.adobe.com/images/young-woman-and-alpaca-in-field/375016607">JovanaRikalo/Stocksy</a></em> <em>.</em></p>
<p><em>Get inspired with our <a href="https://stock.adobe.com/collections/bLKnfC8p8gn3tyuCLjp7rrwaSMH02aEU">Spring 2021 Collection gallery on Adobe Stock</a>. You can also<a href="https://discord.gg/tZbBPRe"></a></em> <em><a href="https://discord.gg/tZbBPRe">join our Discord channel</a> for stock artists and follow the #call-for-content channel. When you are ready,<a href="https://contributor.stock.adobe.com/"></a></em> <em><a href="https://contributor.stock.adobe.com/">submit your latest content to Adobe Stock</a>.</em></p>
</div>
<div>
<h2 id="featured-posts">Featured Posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/02/09/austere-romanticism-2021-design-trend-of-cottagecore-dreams.html#gs.shpwhw">https://blog.adobe.com/en/publish/2021/02/09/austere-romanticism-2021-design-trend-of-cottagecore-dreams.html#gs.shpwhw</a></li>
<li><a href="https://blog.adobe.com/en/2021/01/26/positively-colorful-adobe-stocks-2021-visual-trend-mood-boosting-color.html">https://blog.adobe.com/en/2021/01/26/positively-colorful-adobe-stocks-2021-visual-trend-mood-boosting-color.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/01/14/adobe-stock-motion-audio-creative-trends-2021.html">https://blog.adobe.com/en/publish/2021/01/14/adobe-stock-motion-audio-creative-trends-2021.html</a></li>
</ul>
</div>
<div>
<p>Topics: Creativity, Creative Inspiration & Trends, Design, Illustration, Photography, Creative Cloud,</p>
<p>Products: Creative Cloud, Stock,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-adobejapanbestcompanytoworkfor embed-internal-16">
<div>
<h1 id="adobe-japan-celebrates-being-named-a-best-company-to-work-for">Adobe Japan celebrates being named a Best Company to Work For</h1>
</div>
<div>
<img src="/hlx_80432212e698eb38c9a8c9687d95eed1594c8875.png" alt="For the fifth year in a row Adobe Japan is named a Best Company to Work For.">
</div>
<div>
<p>By Adobe Life Team</p>
<p>Posted on 02-16-2021</p>
</div>
<div>
<p>For the fifth year in a row, Adobe Japan has been selected as one of the “Best Companies to Work For” by the Great Place to Work Institute, <a href="https://hatarakigai.info/ranking/japan/2021.html?utm_source=twitter&amp;utm_medium=social&amp;utm_campaign=tw200305?utm_source=twitter&amp;utm_medium=social&amp;utm_campaign=tw200515#main">coming in at no. 17 in the medium-size category</a> (100-999 employees), skyrocketing 23 spots from last year!</p>
<p>The Best Companies to Work For ranking is held annually by the Great Place to Work Institute Japan (GPTW Japan), which scores an organization’s level of job satisfaction. In this year’s ranking, the focus of the list was around newly established and expanded benefit programs and the effectiveness of internal communications, especially in response to the coronavirus.</p>
<p>Adobe has made the safety and health of its employees, as well as the health of their families and the people around them, its top priority. Since instructing employees to work from home since March 2020, the Adobe Japan team has introduced several new benefit programs. Here is a snapshot of what has made a big impact in the lives of our employees.</p>
<h3 id="global-days-off">Global days-off</h3>
<p>While many employees feel that working from home has been productive, there is no doubt that it is still a challenge, especially with trying to maintain their work life with their personal life. To address this issue, we have set up monthly global days-off for all our employees around the world. These global days-off allow <em>all</em> our employees to take a break together and focus on maintaining their wellbeing.</p>
<h3 id="wellness-reimbursement">Wellness reimbursement</h3>
<p>We know that having a healthy lifestyle is a top priority for our employees. To that end, we expanded our Wellness Reimbursement program, which covers the cost of wellbeing resources that help employees, and their families live healthy lives. Resources that we cover include gym equipment, virtual fitness classes, running shoes, and more.</p>
<h3 id="work-from-home-reimbursement">Work from home reimbursement</h3>
<p>In order to create a comfortable office setup at home, we have given employees a work from home reimbursement fund. This covers computer equipment, desks, chairs, and everything an employee needs to be successful at home. We even provide a separate internet reimbursement!</p>
<h3 id="transparent-communication">Transparent communication</h3>
<p>Outside of new benefits, we also know that employees want transparent communication. To that end, our leadership team gives frequent updates around the future of work, business goals, and more. Not only that, but monthly newsletters have also helped employees with wellbeing tips, and career development resources. For our Adobe Japan team, they regularly look forward to monthly virtual happy hours hosted by the Adobe Japan president, Jim McCready!</p>
<h3 id="supporting-our-customers">Supporting our customers</h3>
<p>Our Adobe Japan team is also especially dedicated to our customers. Which is why they’ve gone above and beyond to help them succeed. As the effects of the coronavirus continue, Adobe has introduced <a href="https://www.adobe.com/covid-19-response.html">several support programs</a> to ensure that our customers keep their businesses moving forward. This includes implementing new capabilities in our products to improve collaboration, hosting monthly virtual events that teach customers new ways to use our products, and more. We also established the <a href="https://www.adobe.com/about-adobe/creative-residency/community-fund.html">Adobe Creative Residency Community Fund</a> to help visual creators stay on track and achieve their dreams.</p>
<p>Even in the wake of the coronavirus, Adobe Japan has made it an absolute priority to create a comfortable work from home environment for its employees. We are honored to receive this recognition and we couldn’t be prouder of our Adobe Japan team, who have been incredibly resilient during these challenging times. As business development manager Hiroto Ryuzaki sums it up, “I feel we have a culture that encourages people to think creatively and generate new ideas. We are then empowered to put those ideas into action to overcome challenges together.”</p>
<div class="embed embed-internal embed-internal-adobecareers embed-internal-adobelife">
<div><p><img src="/hlx_517674f7ac3435de41eb5f1470e52828fa149895.png" alt=""></p>
<h3 id="adobe-careers">Adobe Careers</h3>
<p>We believe in hiring the very best and are committed to creating exceptional work experiences for all. Great ideas can come from everywhere in the organization, and we know the next big idea could be yours. Let’s create experiences that matter.</p>
<p><a href="https://www.adobe.com/careers.html">Explore opportunities</a></p></div>
</div>
</div>
<div>
<h2 id="featured-posts">Featured posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/02/09/forbes-award-americas-best-employers.html">https://blog.adobe.com/en/publish/2021/02/09/forbes-award-americas-best-employers.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/02/09/founders-award-proudest-career-moments.html">https://blog.adobe.com/en/publish/2021/02/09/founders-award-proudest-career-moments.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/02/01/fortune-worlds-most-admired-companies-adobe.html#gs.toxu8g">https://blog.adobe.com/en/publish/2021/02/01/fortune-worlds-most-admired-companies-adobe.html#gs.toxu8g</a></li>
</ul>
</div>
<div>
<p>Topics: Adobe Life, Brand, Adobe Culture, Adobe Life - Asia</p>
<p>Products:</p>
</div>
</div>
Safari Technology Preview Release 120 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
<div class="embed embed-internal embed-internal-howdelltransformedcustomerexperienceswithadobeexperiencecloud embed-internal-11">
<div>
<h1 id="how-dell-transformed-customer-experiences-with-adobe-experience-cloud">How Dell transformed customer experiences with Adobe Experience Cloud</h1>
</div>
<div>
<img src="/hlx_3e6d4bba8d596d47c2af04a9887d8af1f2277a02.jpeg" alt="Woman using a laptop">
</div>
<div>
<p>By Sunil Menon</p>
<p>Posted on 02-11-2021</p>
</div>
<div>
<p>For over 35 years, Dell technology has powered work, play and school for people all over the world. The company was founded in 1984 when Michael Dell was just a young college student customizing computer upgrades for classmates, and today is one of the leading technology providers in the world. Since early inception, Dell has been laser-focused on empowering their customers to achieve their goals, and that mission continues today.</p>
<h3 id="customer-convenience-as-the-north-star">Customer convenience as the north star</h3>
<p>At the heart of Dell’s marketing efforts is customer convenience. This focus is evident across multiple touchpoints with the customer. Take, for example, Dell.com, the company’s site. The site has multiple sections tailored to simplify the search for the right technology. A new gamer who wants to play Fortnite may not know which computer or accessories they may need to meet the minimal requirements for gameplay. By navigating to the site’s gaming section, the customer can click on Fortnite as the game they want to play and be presented with options for the computers built for optimal performance.</p>
<div class="embed embed-internal embed-internal-experiencecloud embed-internal-experiencecloud">
<div><p><img src="/hlx_34720ecd0ad7c3510509b6fa3a9337f0696639ab.png" alt=""></p>
<h3 id="adobe-experience-cloud">Adobe Experience Cloud</h3>
<p>AI-driven customer experience applications for marketing, analytics, advertising, and commerce.</p>
<p><a href="https://www.adobe.com/experience-cloud.html">Learn more</a></p></div>
</div>
<p>Additionally, Dell recently made updates to its site to make shopping from home a little easier for their customers. The site was enhanced with <a href="https://www.dell.com/en-us/member/shop/laptops/new-13/spd/xps-13-9310-laptop">interactive 360-degree 3D demos</a> of products and <a href="https://content.hmxmedia.com/xps-15-9500-laptop-AR/index.html">augmented reality shopping widgets</a> (fueled by <a href="https://www.adobe.com/marketing/experience-manager-assets/dynamic-media.html">Adobe Dynamic Media</a>) to give customers a better feel for the products they are purchasing from the convenience of their own homes.</p>
<p>Understanding that the customer experience extends beyond just Dell’s web properties, the company turned to Adobe applications to create custom and engaging experiences across email, mobile, and even their direct mail campaigns.</p>
<h3 id="a-tailored-approach-to-customer-experience">A tailored approach to customer experience</h3>
<p>And to better tailor the emails customers receive, the company took their email marketing in-house with the help of <a href="https://www.adobe.com/marketing/campaign.html">Adobe Campaign</a>, part of <a href="https://www.adobe.com/experience-cloud.html">Adobe Experience Cloud</a>. Through Adobe Campaign, Dell sends 1.6 billion emails to customers every year. The global transition to Adobe Campaign has enabled Dell to better understand how customers engage with their email and marketing campaigns. For example, the marketing team can now see how content promoting new product innovations is performing and make any necessary adjustments quickly to provide a better experience for their customers.</p>
<p>Dell is also using <a href="http://www.adobe.com/marketing/target.html">Adobe Target</a> to personalize the customer experience, as well as <a href="https://www.adobe.com/analytics/adobe-analytics.html">Adobe Analytics</a> to measure the performance of their marketing campaigns.</p>
<p>Customer-centricity truly is core to Dell’s DNA. Teams across the company are constantly testing new technologies and ways to improve the customer experience. After the successful rollout of Adobe Campaign for email marketing, Dell tested a new Adobe Campaign capability, SMS communications, just in time for the 2020 holiday season. Customers who opted into the pilot received text messages with offers on the hottest tech of the holiday season, making it easier for consumers to check off their gift lists.</p>
<p>During the short pilot, Dell successfully delivered approximately 70,000 text messages to American customers and saw some great results. The pilot saw return on ad spend increase significantly and click rates for text message promotions performed 20 — 40 times higher than email. Dell also discovered that pilot participants were purchasing higher-value products. 48 percent of customers in the pilot who made a purchase bought premium products.</p>
<table>
<thead>
<tr>
<th>Pull Quote</th>
</tr>
</thead>
<tbody>
<tr>
<td><h2>“Adobe Campaign has given us the ability to getter a deeper understanding of how our marketing campaigns perform. The scalability and flexibility to make campaign changes quickly have paved the way for us to expand our marketing channels and test more cutting-edge technology like artificial intelligence to give our customers even more personalized experiences in real-time.”</h2><p><strong>Nishanth Yata,</strong> head of digital transformation, applications development at Dell</p></td>
</tr>
</tbody>
</table>
<p>Dell is looking forward to testing and implementing new technologies to deliver engaging, personalized experiences to power the lives of its customers. And the lessons learned from this past holiday season and future innovation will pave the way for many years of leadership in delivering exceptional digital experiences.</p>
</div>
<div>
<h2 id="featured-posts">Featured posts</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/01/26/how-adobe-experience-cloud-helped-powersports-company-brp-take-adventure-to-the-next-level.html">https://blog.adobe.com/en/publish/2021/01/26/how-adobe-experience-cloud-helped-powersports-company-brp-take-adventure-to-the-next-level.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2020/12/23/fighting-covid-19-how-cdc-delivering-critical-information.html">https://blog.adobe.com/en/publish/2020/12/23/fighting-covid-19-how-cdc-delivering-critical-information.html</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/01/26/how-discount-tire-became-a-market-leader-by-focusing-on-cx.html">https://blog.adobe.com/en/publish/2021/01/26/how-discount-tire-became-a-market-leader-by-focusing-on-cx.html</a></li>
</ul>
</div>
<div>
<p>Topics: Digital Transformation, Customer Stories, High Tech, Experience Cloud,</p>
<p>Products: Experience Cloud,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-ramybringsafreshperspectivethroughthelensofafirstgenerationmuslimamerican embed-internal-11">
<div>
<h1 id="ramy-brings-a-fresh-perspective-through-the-lens-of-a-first-generation-muslim-american">Ramy brings a fresh perspective through the lens of a first-generation Muslim-American</h1>
<p>Ramy (award-nominated TV show) editor Joanna Naugle shares editing tips and tricks and walks through one of her favorite scenes on the hit show</p>
</div>
<div>
<p><img src="/hlx_0904ef9380dde4a540a57ca54116bf78ef842fc9.jpeg" alt=""></p>
<p><em>Photo from Hulu</em></p>
</div>
<div>
<h2 id="by-adobe-communications-team">By Adobe Communications Team</h2>
<p>Posted on 02-11-2021</p>
</div>
<div>
<p>Nominated for multiple Emmy and Critics Choice Awards, the acclaimed series <em>Ramy</em> follows a first generation Egyptian-American man as he tackles heavy themes of self-discovery, faith, commitment, and compassion within and outside of his community. The show combines comedy and drama to take the audience on Ramy’s spiritual journey while he struggles between the values of his Muslim community and life as a millennial living in the moment.</p>
<p><a href="http://www.senior-post.com/">Senior Post</a> lead editor and co-owner Joanna Naugle breaks down a key scene for us in the behind-the-scenes video below, and discusses her work on <em>Ramy</em>, the transition to a remote workflow halfway through post-production, and balancing the unique tones to achieve the overall creative vision for the show’s second season.</p>
<div class="embed embed-internal embed-internal-premierepro embed-internal-creativecloud">
<div><p><img src="/hlx_6437eac3f9725128f1febd131fffb983cdd30b0b.png" alt="Inserting image..."></p>
<h3 id="premiere-pro">Premiere Pro</h3>
<p>Video editing that’s always a cut above.</p>
<p><a href="https://www.adobe.com/products/premiere.html">Learn more</a></p></div>
</div>
<table>
<thead>
<tr>
<th>Block Embed</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://www.youtube.com/watch?v=wFiA4zOauHU&feature=youtu.be">https://www.youtube.com/watch?v=wFiA4zOauHU&feature=youtu.be</a></td>
</tr>
</tbody>
</table>
<h3 id="how-and-where-did-you-first-learn-to-edit">How and where did you first learn to edit?</h3>
<p>I first experimented with editing by using in-camera techniques on my home video camera growing up and then using iMovie for school projects in high school. However, I really fell in love with editing while attending Tisch School of the Arts and taking a class where we shot on film and then cut it together on a Steenbeck. This was an incredibly formative experience for me, and literally cutting and taping together pieces of film made me realize how crucial editing was to the storytelling experience and made me want to specialize in this part of the filmmaking process. In 2012, I met Josh Senior and later became a co-owner of Senior Post. Everything I’ve cut at our post house, whether it be a feature film, television show, comedy special, music video, commercial or documentary, has been using <a href="https://blog.adobe.com/en/topics/premiere-pro.html">Adobe Premiere Pro</a>.</p>
<h3 id="how-do-you-begin-a-projectset-up-your-workspace">How do you begin a project/set up your workspace?</h3>
<p>I’m lucky that we had really talented and organized assistant editors on <em>Ramy</em>, and so by the time the projects came to me, all the footage was synced and organized by scene. There were always two cameras shooting (sometimes three) so the multi-cam function was crucial for keeping things organized. I also had the assistant editors create line by lines for each scene, putting each take for each line in a sequence so I could easily watch them all back-to-back and choose the best option for the scene. Those line by lines proved to be supremely helpful in the long run, especially when Ramy wanted to see line readings when we were working remotely. I could just export those sequences and send to him to review quickly.</p>
<h3 id="tell-us-about-a-favorite-scene-or-moment-from-this-project-and-why-it-stands-out-to-you">Tell us about a favorite scene or moment from this project and why it stands out to you.</h3>
<p>I have a couple of favorite moments from this season, but I had the most fun cutting episode #4, where Ramy and Zainab go to Prince Bin Khaled’s estate to ask for money. There were so many absurd moments (the breast milk, Mia Khalifa, the parrot) and we really tried to create a foreboding and bizarre atmosphere while they were at this strange location. The archery scene was especially fun to build out. I really wanted to emphasize the twist halfway through the scene, where we think Ramy has succeeded but then Bin Khaled turns the tables on him. We had to find that right balance between making sure the stakes felt real while still finding moments of humor throughout that scene. And then of course the episode ends with a surprising proposition from Sheikh Ali, and making that moment feel sincere and vulnerable was important for sticking the landing.</p>
<h3 id="what-were-some-specific-post-production-challenges-you-faced-that-were-unique-to-your-project-how-did-you-go-about-solving-them">What were some specific post-production challenges you faced that were unique to your project? How did you go about solving them?</h3>
<p>Going into quarantine halfway through editing the season was definitely challenging to say the least! But luckily our post producer, Josh Senior, and our post supervisor, Andrew Rowley, figured out a contingency plan quickly — we copied all the transcoded media onto hard drives and sent one home with each of our editors, assistant editors, and online editors. Then we were easily able to share projects remotely by simply reconnecting to the media on each of our drives. Anytime someone added a new asset, we had to all be sure we labeled it the same way and downloaded it to our respective hard drives. Another challenge was editing a show that has a huge component in a language I do not speak. Salah Anwar, our wonderful assistant editor, was hugely helpful with that. In Arabic-heavy scenes, he would go through in advance and create subtitles to give me and the other editor, Matthew Booras, context. He would also use markers to call out takes in Arabic that were especially funny, which allowed us to create the best possible versions of the scenes.</p>
<h3 id="what-adobe-tools-did-you-use-on-this-project-and-why-did-you-choose-them">What Adobe tools did you use on this project and why did you choose them?</h3>
<p>I used Premiere Pro to edit <em>Ramy</em>. The multi-cam function is incredibly helpful for our show since we’re shooting with multiple cameras. I was hesitant to use it at first on Season 1 because I was worried it would be too complicated, but it was really easy to set up. Without it, it would have made watching dailies two or three times as long. I also used markers way more often on this project than before, since we didn’t have the luxury of being in the same room as our assistant editors during project handoffs. These markers served as a shorthand for reminders or details about the project that we didn’t want to get lost in the shuffle. When sending projects back and forth, we also frequently used the command that allows you to export a sequence as its own Premiere Pro Project. This made the files much smaller and more streamlined, and required less relinking and uploading time between different users.</p>
<p><img src="/hlx_6ff71fbbfae9beabcad080340d05107a58eca9c1.png" alt=""></p>
<h3 id="what-do-you-like-about-premiere-pro-andor-any-of-the-other-tools-you-used">What do you like about Premiere Pro, and/or any of the other tools you used?</h3>
<p>My favorite thing about Premiere Pro is that it’s so easy to get started. You can just add media and go, which is what makes it great for editing so many different types and sizes of projects. It’s also great to be able to integrate the other Adobe programs so easily, like <a href="https://www.adobe.com/products/aftereffects.html?sdid=KKQOW&mv=search&kw=test&ef_id=Cj0KCQiA3smABhCjARIsAKtrg6KA37YhfcUHhxL8dFi4xXYsaWtiyrItbHFVjLRkLGg9LDo8FEuBFr4aAhmCEALw_wcB:G:s&s_kwcid=AL!3085!3!469198201844!e!!g!!adobe%20after%20effects&gclid=Cj0KCQiA3smABhCjARIsAKtrg6KA37YhfcUHhxL8dFi4xXYsaWtiyrItbHFVjLRkLGg9LDo8FEuBFr4aAhmCEALw_wcB">After Effects</a> and <a href="https://blog.adobe.com/en/topics/photoshop.html">Photoshop</a>. Having files auto-update across the programs saves a lot of time and energy. I’m also a huge fan of the new title tool; it keeps the project so much cleaner to not have individual files in bins for each corresponding piece of text.</p>
<h3 id="whats-your-favorite-hidden-gem-workflow-hack-in-adobe-creative-cloud">What’s your favorite hidden gem/ workflow hack in Adobe Creative Cloud?</h3>
<p>One of my favorite features of Premiere Pro is the ability to customize label colors. I’m an incredibly visual person and so while working on episodes, I label each scene a different color. This makes it super easy to know exactly where one scene starts and the next finishes, and I can easily zoom out and see how much of the run time each scene takes up proportionally. If my sequence doesn’t look clean and organized, I can’t concentrate on making creative choices so keeping things color coded and simplified is key for my productivity. Also changing the “Nudge Selection Up” and “Nudge Selection Down” commands to one of my key shortcuts totally changed my workflow. I use that command constantly and only needing one keystroke makes me much more efficient as an editor.</p>
<h3 id="who-is-your-creative-inspiration-and-why">Who is your creative inspiration and why?</h3>
<p>Thelma Schoonmaker is definitely an editing hero of mine. I remember seeing her win the Oscar for editing “The Departed” and it was just as I was getting ready to attend film school and I thought, “maybe I could be her one day.” She made my wildest dreams seem possible and I really admire the longtime collaboration between her and Martin Scorsese. The Coen Brothers are also a huge creative inspiration for me; they are so skilled at seamlessly shifting between genres within their films to create a totally unique experience. “Fargo” is my all-time favorite film, and I’m definitely drawn to similar projects that blur the line between comedy and drama, just like “Ramy” does.</p>
<h3 id="whats-the-toughest-thing-youve-had-to-face-in-your-career-and-how-did-you-overcome-it-what-advice-do-you-have-for-aspiring-filmmakers-or-content-creators">What’s the toughest thing you’ve had to face in your career and how did you overcome it? What advice do you have for aspiring filmmakers or content creators?</h3>
<p>I’ve had some amazing creative collaborations in my career and some that didn’t pan out the way I had hoped, and when that happens it can be easy to beat yourself up or obsess over what you did wrong during the process. It took some time, but I’ve learned not to take these things personally — there will be people who you communicate really well with and you’ll feel like equal creative partners working and creating together. And there will be other people who are incredibly talented and creative, but they just don’t know how to convey their ideas or engage with you as an editor in order to accomplish their vision. There has to be a level of trust between the director and editor in order for that collaboration to be most effective and fruitful. So, the most important thing you can do starting out as an editor is to work with as many different directors and collaborators as possible, so you can find the people who are the best creative match for you and build that trust with them while working together. I’m lucky to count Ramy as one of those successful collaborators for me, and he strikes a great balance between having a singular and focused creative vision while still leaving room for input and suggestions from me and the rest of the team.</p>
<h3 id="share-a-photo-of-where-you-work">Share a photo of where you work.</h3>
<p><img src="/hlx_80a91b238c9fc0fb73066349e440c2c8326b1c4c.jpeg" alt=""></p>
<h3 id="whats-your-favorite-thing-about-your-workspace-and-why">What’s your favorite thing about your workspace and why?</h3>
<p>It’s been an adjustment working from home the past few months but the best part is sharing the space with my fiancé, Michael Litwak. He is a writer/director and so it’s really great to be able to bounce ideas off each other whenever we’re at a creative roadblock. I’ve also gotten very used to working in sweatpants and slippers… it’s going to be tough going back to wearing jeans and real shoes every day.</p>
<p><em>Ramy</em> is available to stream on Hulu.</p>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/mPDQ5bUsZxM?rel=0&v=mPDQ5bUsZxM&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
</div>
<div>
<h2 id="featured-posts">Featured posts</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/01/22/exploring-a-new-side-of-an-icons-fight-for-justice-and-equality.html#gs.rghis7">https://blog.adobe.com/en/publish/2021/01/22/exploring-a-new-side-of-an-icons-fight-for-justice-and-equality.html#gs.rghis7</a></li>
<li><a href="https://blog.adobe.com/en/2021/01/21/disability-civil-rights-at-the-forefront-of-netflix-crip-camp.html#gs.rciw19">https://blog.adobe.com/en/2021/01/21/disability-civil-rights-at-the-forefront-of-netflix-crip-camp.html#gs.rciw19</a></li>
<li><a href="https://blog.adobe.com/en/2020/11/30/scare-me-pushes-the-boundaries-of-horror-anthology.html#gs.rghk2u">https://blog.adobe.com/en/2020/11/30/scare-me-pushes-the-boundaries-of-horror-anthology.html#gs.rghk2u</a></li>
</ul>
</div>
<div>
<p>Topics: Media & Entertainment, News, Creative Cloud,</p>
<p>Products: Creative Cloud, Premiere Pro,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-scalingfantasticuserexperiencesoverdrinks embed-internal-11">
<div>
<h1 id="scaling-fantastic-user-experiences-over-drinks">Scaling fantastic user experiences, over drinks</h1>
<p>Omnichannel at ZX Venture’s design system utilizes Adobe XD and Adobe Creative Cloud to maintain quality of user experience across brands, continents, languages, and cultures.</p>
</div>
<div>
<img src="/hlx_c585f1f8e349b4f7032f584a3146dfb4b99ee813.png" alt="">
</div>
<div>
<p>By Courtney Spencer</p>
<p>Posted on 02-11-2021</p>
</div>
<div>
<p>There’s always been a universal, enjoyable aspect to getting together with your friends and family over beverages. People talk, build relationships, and enjoy the company of others. It’s one of the most time-honored ways of bringing people together.</p>
<p>As the global head of design, omnichannel at ZX Ventures, DTC Group inside AB-InBev, I rely on design and user experiences to translate this camaraderie to our digital experiences. Our venture consists of startups that sell beer straight to customers — for example subscription websites, traditional e-commerce websites, or courier apps. It’s an exciting world to be a part of.</p>
<p>As part of the omnichannel team, my role encompasses product and marketing design, product and marketing, overseeing the numerous ventures and their design teams. I support and advise our portfolio companies from design operations as well as personally designing for them. Supporting our businesses and bringing designs to life would be impossible without a great framework and toolset in place.</p>
<p>For us, the framework is a design system and templated approach to using it, and the toolset is <a href="https://www.adobe.com/products/xd.html">Adobe XD</a> and <a href="https://www.adobe.com/creativecloud.html">Adobe Creative Cloud</a>. With this approach, we’ve been able to effectively scale our work and maintain quality and consistency of experience across dozens of different brands — working across continents, languages, and cultures.</p>
<div class="embed embed-internal embed-internal-xd embed-internal-creativecloud">
<div><p><img src="/hlx_14c20520abab7f5a26508a03e5607d6f48395803.png" alt=""></p>
<h3 id="adobe-xd">Adobe XD</h3>
<p>Create and share designs for websites, mobile apps, voice interfaces, games, and more.</p>
<p><a href="https://www.adobe.com/products/xd.html">Learn more</a></p></div>
</div>
<h3 id="using-design-systems-to-manage-dozens-of-brands">Using design systems to manage dozens of brands</h3>
<p>When overseeing a portfolio of early stage businesses, it is important to prioritize more than 20 brands — we’re essentially popping in and out of our various businesses at any given time and solving problems and helping however we can. Our job is to ensure that each brand stays true to its vision and what makes it special, while also staying consistent with the overall branding and quality standards of ZX Ventures and Anheuser-Busch.</p>
<p>We have a master ZX Ventures design system, which we use as a template for each brand we invest in — this template provides us with a brand foundation when building digital experiences, a way to avoid any redundancies (why build a new button when you have a great one already?). Additionally, having this template and sharing it with each brand gives them and us a chance to build on top of our central vision to create something truly unique. We achieve this personalization in two key ways.</p>
<p>First, we use data from existing ventures to inform how our design system visually communicates the value proposition of a specific brand; this will then be constant in each single application for that brand, going forward. We then identify any variables — like colors, logos, and copy — that we curate for a specific culture market or business type. For instance, while copy changes from language to language, the tone and general layout remains the same; while the logo template is constant across different businesses, the brand name will differ.</p>
<p>Second, we rely on iterative testing to make sure we get it right. Every time we bring a product or design system to market, we rely on A/B testing to determine what’s working and what’s not. We map out our certainties, doubts, and assumptions — then, we establish which design decisions we made on data and which ones we made on assumptions. For example, we recently tested lifestyle or product imagery to see what content performs better and how that can inform other design decisions made on assumptions. You could say we are slightly obsessed with testing.</p>
<p>We’re also addressing the inevitable challenges in language created by working with so many diverse teams. At the moment, we design in English and then get either a product manager or local designer to translate into the local language, which takes time and requires a lot of testing after the fact. Since having more designers who speak Spanish or Portuguese is vital, we’re hiring more designers in Mexico and other Latin American countries.</p>
<p>Simultaneously, we’re establishing standards for linguistics. For instance, we want to enshrine our tone of voice for UX and the consistency of copy for calls to action.</p>
<h3 id="a-ux-designer-for-other-ux-designers">A UX designer, for other UX designers</h3>
<p>Our work with our various ventures and their individual designers takes a very bottom-up approach — we are here to be the problem solvers and support. Designers and founders come to us with their biggest challenges, and we solve them collaboratively. Together, we identify patterns in their problems and then find a solution for those problems.</p>
<p>To do this, we follow a three-step process:</p>
<ul>
<li>Evaluate the symptoms</li>
<li>Identify the root cause of the problem</li>
<li>Build out a program to address the design problem</li>
</ul>
<p>For example, in one case, we determined that one of our brand’s designers was spending too much time manually choosing their primary colors and fonts since nothing was standardized. This is a case where the solution was to use our templated design system, creating a custom design system for this brand, to maximize efficiency. For another brand, however, we created simple UI kits for already existing experiences, allowing us to update some of the user interfaces on their websites.</p>
<p>Overall, our design systems have led to massive time savings and increased productivity for our individual designers. For example, one designer was able to reduce her design time by 50 percent and onboard her intern in just one hour.</p>
<h3 id="leaning-on-adobe-xd-to-do-the-heavy-lifting">Leaning on Adobe XD to do the heavy lifting</h3>
<p>Working with many different designers, scattered in teams across different countries (many of whom are now working from home), we need a solid tool we can count on that would help us realize our vision of a central design team, ensuring brand consistency while also empowering individual brands to be unique. For us, that is <a href="https://www.adobe.com/ca/products/xd.html">Adobe XD</a>.</p>
<p>For our team, the biggest benefit is the many collaboration capabilities in XD. Since we’re dealing with different time zones and different parts of teams, it’s crucial for us to clearly and quickly see what we’re all working on. To that end, using <a href="https://www.adobe.com/ca/creativecloud/libraries.html">Creative Cloud Libraries</a> has been a huge help, too — we’re always going from <a href="https://www.adobe.com/products/illustrator.html">Illustrator</a> to <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> to XD in our workflows.</p>
<p>For example, on the Creative Cloud library panel, when I need to copy our master design system and create a new one, I can do that in just one click. In my new design system, I can then change things like colors for the links. By changing these colors in the assets panel, XD applies the change to each instance of it in the design document, saving us massive amounts of time.</p>
<h3 id="uniting-people-through-great-digital-experiences">Uniting people through great digital experiences</h3>
<p>With our work at ZX Ventures, I believe we are bringing people together and helping our designers do great work, wherever in the world they are or whichever ventures they’re working at. The cool thing about my role is I get to support other designers — as they improve their skill set, it helps our businesses grow as well. I find this super empowering.</p>
<p>Ultimately, I believe this results in better digital experiences for our customers, too — like great drinks at a party, great digital experiences go a long way in connecting people, especially when we can’t all be together in person.</p>
<p><img src="/hlx_6af4bb7ea720be92ece3d92523496a725829fd04.jpeg" alt="Photograph of 4 deisgners at a table. "></p>
<p><em>ZX Ventures & Zé Delivery Designers in São Paulo, Brazil. Left to Right: Diego Carrion, Fernanda Magalhaes, and Otávio Sueitt.</em></p>
</div>
<div>
<h2 id="featured-posts">Featured Posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/2021/01/13/amazon-creative-jam-gives-future-designers-a-lift-through-mentorship.html#gs.sn6zm0">https://blog.adobe.com/en/2021/01/13/amazon-creative-jam-gives-future-designers-a-lift-through-mentorship.html#gs.sn6zm0<br>
</a></li>
<li><a href="https://blog.adobe.com/en/2021/01/11/baronfig-new-website-a-thinkers-journey.html#gs.sn71t7">https://blog.adobe.com/en/2021/01/11/baronfig-new-website-a-thinkers-journey.html#gs.sn71t7<br>
</a></li>
<li><a href="https://blog.adobe.com/en/2020/05/18/penske-ux-design-pre-post-covid.html?sdid=7N826B8Q&mv=social#gs.sn73sv">https://blog.adobe.com/en/2020/05/18/penske-ux-design-pre-post-covid.html?sdid=7N826B8Q&mv=social#gs.sn73sv</a></li>
</ul>
</div>
<div>
<p>Topics: Digital Transformation, Insights & Inspiration, Customer Stories, Content Management, Creative Cloud, no-interlinks</p>
<p>Products: Creative Cloud, Illustrator, Photoshop, XD,</p>
</div>
</div>
<div class="embed embed-internal embed-internal-employeeswelcomeyearoftheox embed-internal-11">
<div>
<h1 id="adobe-employees-from-around-the-world-welcome-the-year-of-the-ox">Adobe employees from around the world welcome the Year of the Ox</h1>
</div>
<div>
<img src="/hlx_ce7ae3791229a7a19c82682466b9bc075843f10b.png" alt="Lunar New Year decorations in Singapore.">
</div>
<div>
<p>By Celest Lim</p>
<p>Posted on 02-11-2021</p>
</div>
<div>
<p>The <a href="https://spark.adobe.com/page/ww4crunNvCPwQ/">Lunar New Year</a> (LNY) — also known as Chinese New Year or Spring Festival — marks the first new moon of the lunisolar calendars that are traditionally used in many east Asian countries, including China, Singapore, Korea, and Vietnam. It is one of the most significant and vibrant celebrations around the world.</p>
<p>With Adobe’s upcoming Global Day Off falling on the first day of LNY, employees around the world shared their own traditions and how they’ll be celebrating this year.</p>
<h3 id="year-of-the-ox-and-festive-decorations">Year of the Ox and Festive Decorations</h3>
<p>February 12 marks the beginning of the Year of the Ox, the second animal on the Chinese zodiac, bringing a renewed source of strength and resilience to the year ahead.</p>
<table>
<thead>
<tr>
<th>Image 50</th>
<th>Image 50</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="/hlx_d778a2f75176993af3274e2437868bf444af4fb3.png" alt="Lunar New Year decorations in Singapore, showing the Year of the Ox."></td>
<td><img src="/hlx_03f8f7ab479b9d8a98cc01a75c66b66772b65c88.png" alt="Food stand in Singapore." title="Inserting image..."></td>
</tr>
</tbody>
</table>
<p>“Every LNY, I would stroll down Chinatown to enjoy the massive lantern displays. This year even with the beautiful Ox displays, the streets were quieter and stalls empty. I’m missing the Adobe Lion Dance and big loud cheering during Yusheng — a uniquely Singaporean tossing of fresh vegetables and raw fish for good luck.”</p>
<p><em><strong>— Vincent Chia, DME enterprise account executive, Singapore</strong></em></p>
<p><img src="/hlx_61a6cd38e499eb7f16bad601c06b37ad53af9a11.png" alt="The ‘Chun Lian’ (Spring Couplet), also known as 'a pair of antithetical phrases,' is a special form of literature in China."></p>
<p>“The ‘Chun Lian’ (Spring Couplet), also known as ‘a pair of antithetical phrases,’ is a special form of literature in China. Often written with black or gold ink on red paper, these couplets are traditionally pasted on the sides of the front door and above the door frame as LNY decorations and wishes for happiness and a good year ahead.”</p>
<p><em><strong>— Enno Zhong, senior solutions consultant, Guangzhou, China</strong></em></p>
<h3 id="auspicious-tunes-red-envelopes-and-family-gatherings">Auspicious Tunes, Red Envelopes, and Family Gatherings</h3>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/34nU-CZvz7c?rel=0&v=34nU-CZvz7c&feature=emb_title&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<p>“Nothing quite like the blasting of festive tunes at the malls and supermarkets to remind us that LNY is ‘round the corner! Here’s us singing one of our favorites called “He Xin Nian (贺新年)” — a song wishing all a happy new year.”</p>
<p><em><strong>— Angela Lee, JAPAC lifecycle marketing specialist & Joyce Neo, APAC marketing manager, Singapore</strong></em></p>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/owCUzmyFo_s?rel=0&v=owCUzmyFo_s&feature=emb_title&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<p>“I always looked forward to receiving Hongbao from my parents. It’s a red envelope with money inside for good luck. Now my dog, Burger, gets Hongbao treats too.”</p>
<p><em><strong>— Zihan Miao, customer insights manager, San Francisco, U.S.</strong></em></p>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/p0PBtwb6UOw?rel=0&v=p0PBtwb6UOw&feature=emb_title&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<p>“My family would spend hours together, baking trays of pineapple tarts for friends and relatives. Mom’s recipe is the best!”</p>
<p><em><strong>— Clarissa Nah, marketing manager, Singapore</strong></em></p>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/RbAo6GSveTM?rel=0&v=RbAo6GSveTM&feature=emb_title&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<p>“Lunar New Year is a really special time for me, as my family gets together to celebrate my Grandmother and treat her with new clothes, flowers and her favorite food!”</p>
<p><em><strong>— Zara Un, EMEA e-commerce manager, London, UK</strong></em></p>
<h3 id="food-glorious-food">Food, Glorious Food</h3>
<p>Food is the heart of LNY. While the family reunion dinner on LNY eve is the most significant meal of the celebrations, holiday feasting often starts weeks before and lasts through the first 15 days of LNY. For our employees, we’ll be hosting a Lunar New Year Celebration and Cooking Demonstration on February 18! We can’t wait to celebrate with everyone virtually!</p>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/ZkIn7w4YS2I?rel=0&v=ZkIn7w4YS2I&feature=emb_title&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<p>“My wife’s family typically mixes the Asian must-haves (roast pig) with the Australian (sashimi and oysters) — it becomes a very fusion plate.”</p>
<p><em><strong>— William Leung, Japan & APAC, head of acquisitions and search marketing, Sydney, Australia</strong></em></p>
<p><img src="/hlx_4f9c704941a089d677c99396ca6ac9e9041672b8.png" alt="Franklin celebrating Lunar New Year with his family."></p>
<p>“LNY for me means a big family gathering with each household bringing dishes; wearing red and new clothes signifying a new year and a fresh start; and handing out red envelopes to the kids.”</p>
<p><em><strong>— Franklin Tjhin, APAC search marketing manager, Sydney, Australia</strong></em></p>
<p><img src="/hlx_b9eda85217a4b7f5cb927697f5b924413531fda3.png" alt="Dan Jiao’ — egg wrap with seasoned pork, which symbolizes "treasures of gold," and ‘Jiu Niang Tang’ — sweet wine-rice soup with small rice balls symbolizing "family reunion and perfection." "></p>
<p>“For LNY, we would prepare ‘Dan Jiao’ — egg wrap with seasoned pork, which symbolizes “treasures of gold,” and ‘Jiu Niang Tang’ — sweet wine-rice soup with small rice balls symbolizing “family reunion and perfection.” This year, to commemorate the Year of the Ox, we will have a beef dish too.”</p>
<p><em><strong>— Chloe Wang, executive assistant, Shanghai, China</strong></em></p>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/JSg81DmzfmU?rel=0&v=JSg81DmzfmU&feature=emb_title&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;"><iframe src="https://www.youtube.com/embed/HanLdv_0Qxc?rel=0&v=HanLdv_0Qxc&feature=emb_title&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<h3 id="cross-culture-celebration">Cross-culture Celebration</h3>
<div class="embed embed-oembed embed-youtube"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/chR_XZebpR8?rel=0&v=chR_XZebpR8&feature=emb_title&kind=embed-youtube&provider=youtube" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen="" scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" title="content from youtube" loading="lazy"></iframe></div></div>
<p>“Special greetings in Korean, French, and English!”</p>
<p><em><strong>— Hyojin Shin, marketing manager, Seoul, South Korea</strong></em></p>
<p><img src="/hlx_fd0cf5d4f2ba67d63d02436d8d75388fa591f322.png" alt=""></p>
<p>“We are celebrating LNY in a special way this year. Our 10-year-old daughter was selected as a young ambassador to represent the U.S at the Silk Road Children’s Emissary in China, which is being broadcast to over 82 countries. Makenna was chosen because of her singing ability and her relationship as the great great niece of Helen Foster Snow, a journalist from Utah who was nominated twice for the Nobel Peace Prize for her contributions to modern Chinese history in the 1930s.”</p>
<p><em><strong>— Adam Foster, talent management and development, Workfront, Utah, U.S.</strong></em></p>
<div class="embed embed-internal embed-internal-adobeforall embed-internal-adobelife">
<div><p><img src="/hlx_c8c81ea35423b0511a921017439ef0a520f84d33.png" alt=""></p>
<h3 id="adobe-for-all">Adobe For All</h3>
<p>We believe that when people feel respected and included they can be more creative, innovative, and successful, which is why we are committed to investing in building a diverse and inclusive environment for our employees, customers, partners, and the tech industry as a whole.</p>
<p><a href="https://www.adobe.com/diversity.html">Learn more</a></p></div>
</div>
</div>
<div>
<h2 id="featured-posts">Featured posts:</h2>
<ul>
<li><a href="https://blog.adobe.com/en/publish/2021/02/11/adobe-celebrates-lunar-new-year.html#gs.t8wzd5">https://blog.adobe.com/en/publish/2021/02/11/adobe-celebrates-lunar-new-year.html#gs.t8wzd5</a></li>
<li><a href="https://blog.adobe.com/en/publish/2020/05/04/inyong-kim.html#gs.t6i2kb">https://blog.adobe.com/en/publish/2020/05/04/inyong-kim.html#gs.t6i2kb</a></li>
<li><a href="https://blog.adobe.com/en/publish/2021/02/09/forbes-award-americas-best-employers.html">https://blog.adobe.com/en/publish/2021/02/09/forbes-award-americas-best-employers.html</a></li>
</ul>
</div>
<div>
<p>Topics: #AdobeForAll, Brand, Adobe Life, Adobe Culture, Adobe Life - Asia</p>
<p>Products:</p>
</div>
</div>
The Storage Access API allows third-party web content to ask for permission to get access to its unpartitioned storage, typically in order to authenticate the user. In the case of Safari and WebKit, using the Storage Access API enables cookie access under Intelligent Tracking Prevention.
This blog post covers two changes to the Storage Access API in Safari and WebKit as well as a how-to guide on adoption based on questions we’ve been asked the last two years.
Changes to API Functionality
iOS and iPadOS 14.5, and macOS Big Sur 11.3 betas feature two sought after changes to the Storage Access API in Safari and WebKit – per-page storage access and support for nested iframes. Both of these changes were driven by the standards process in W3C Privacy CG.
Per-Page Storage Access
If a request for storage access is granted to embedee.example, access is now granted to all embedee.example resource loads under the current first party webpage. This includes sibling embedee.example iframes but also other, non-document resources.
Nested Iframes Can Request Storage Access
Imagine a webpage embedding a cross-site iframe from embedeeOne.example which in turn embeds a cross-site iframe from embedeeTwo.example which makes the latter a so called nested iframe. As of this release, nested iframes such as embedeeTwo.example are also allowed to request storage access. Note that we may require first parties to explicitly delegate this capability through Permissions Policy at a later stage. Mozilla has expressed an interest in such control.
How To Use the Storage Access API
For the purposes of this guide we will use the domains social.example for the embedded content in need of cookie access and news.example as the first party website embedding social.example.
First, Cross-Site Iframes Call the API
The Storage Access API is called from inside cross-site, or third-party, iframes. You don’t have to call the API if your website is first party and first party websites cannot call the API on behalf of third-parties.
How-To #1: Meet and Greet the User as First Party
If you want to make use of the Storage Access API as a third-party, you first need to take these steps as a first party:
Make sure you are using regular browsing mode, i.e. not Private Browsing. We will cover Private Browsing at the end of this guide.
Take the user to your domain as first party. This is your website showing itself and giving the user a chance to recognize your brand and domain name. Recognition is important since the prompt for storage access features your embedded iframe’s domain. In our example, this is taking the user to a webpage with social.example in the URL bar, either though a navigation or a popup.
Have the user interact (tap, click, or use the keyboard) with your website as first party. This tells the browser that the user has actually seen and used the site. Note: Navigating to and from your website in a redirect without user interaction does not count. Formally, WebKit’s requirement is user interaction as first party the last 30 days of browser use. Being granted storage access through the Storage Access API counts as such user interaction. In our example, this is having the user tap/click on the webpage with social.example in the URL bar.
Set cookies when you are first-party. This establishes the website as “visited” for the purposes of the underlying cookie policy. Third parties without cookies cannot set cookies in Safari and never have since Safari 1.0 in 2003. This means you cannot use the Storage Access API as third-party until you have set at least one cookie as first party. In our example, this is setting cookies for social.example with social.example in the URL bar.
The above requirements are there to make sure the sometimes 50-100 embedded third-parties on a single webpage cannot all prompt the user for storage access, only the ones the user has visited and interacted with can.
How-To #2: Use the Storage Access API as Third Party
Once you have had the user interact with your website as first party and have set cookies as first party, you are ready to make use of the Storage Access API.
In shipping Safari, your cross-site iframe that is about to request storage access must be a direct child frame of the top frame. Nested iframes can request storage access as of iOS 14.5 and macOS 11.3 (currently in beta).
Make your cross-site iframe call document.hasStorageAccess() as soon as it’s rendered to check your status. Note: Don’t call this function upon a user gesture since it’s asynchronous and will consume the gesture. Once the user gesture is consumed, making a subsequent call to document.requestStorageAccess() will fail because it’s not called when processing a user gesture. In our example this is social.example‘s iframe.
If document.hasStorageAccess() returns false, your iframe doesn’t have storage access. Now set an event handler on elements that represent UI which requires storage access and make the event handler call document.requestStorageAccess() on a tap or click. This is the API that requires a user gesture. In our example this is social.example‘s iframe calling the API.
Render the page with your cross-site iframe. Tap or click on an element with an event handler in the iframe. In our example this is rendering a page from news.example with thesocial.example‘s iframe and clicking on an element in the social.example iframe’s document.
If the user has not yet opted in to storage access for social.example under news.example there will now be a prompt. Choose “Don’t Allow” in the prompt. Tip: Don’t choose “Allow” yet because it’ll be remembered and you’ll have to delete browser history to reset it. If you are not getting the prompt, you either have not gotten user interaction as first party and set cookies for social.example yet (see How-To #1) or you have already chosen “Allow” earlier which is remembered.
Test the behavior for the “Don’t Allow” case. You can do it repeatedly. Do it until you’re happy with how your code handles it. Note that when the user chooses “Don’t Allow” in the prompt, their user gesture is consumed and any further API calls in your iframe that require a user gesture will have to get the user to tap or click again. We’ve deliberately designed it this way to make sure that an explicit deny from the user doesn’t trigger further privileged API calls from the iframe. The user should at this point be able to continue with other things.
Now tap or click the iframe again and this time choose “Allow” in the prompt. This should open up cookie access on resolution of the promise.
Test the behavior for the “Allow” case. Note that when the user chooses “Allow” in the prompt, their user gesture is preserved and any further API calls in your iframe that require a user gesture can go right ahead. We’ve deliberately designed it this way so that when you get access to cookies and note that the user is not in the desired state, such as not logged in, you can open a popup or navigate them to your website without further user gestures. In our example this would be a popup or navigation to social.example.
Now reload the webpage. This will reset your per-page storage access. Tap or click the iframe to trigger the call to document.requestStorageAccess(). This should open up cookie access without a prompt since the user has already opted in and that choice is remembered.
Finally test the flow in Private Browsing Mode. In that mode, the user must interact with your website as first party (see How-To #1) in the same tab as where you later request storage access as third-party. This is because Private Browsing Mode uses a separate ephemeral session for each new tab the user opens, i.e. the state of those tabs are separate. The rest should work the same as in regular mode.
This blog post covers a new feature called Private Click Measurement, or PCM, for measuring ad clicks across websites and from iOS apps to websites. It is part of iOS and iPadOS 14.5 betas.
Motivation and Goals
Classic ad attribution on the web is done with cookies carrying user or device IDs. Such attribution constitutes cross-site tracking which WebKit is committed to preventing. Websites should not be able to attribute data of an ad click and a conversion to a single user as part of large scale tracking.
At the same time, we want to support measurement of online advertising. PCM achieves this tradeoff by sending attribution reports with limited data in a dedicated Private Browsing mode without any cookies, delaying reports randomly between 24 and 48 hours to disassociate events in time, and handling data on-device.
The Feature in a Nutshell
A new, on-by-default feature called Private Click Measurement, or PCM, for privacy-preserving measurement of ad clicks across websites and from iOS apps to websites in iOS and iPadOS 14.5 betas.
An 8-bit identifier on the click source side, which means 256 parallel ad campaigns can be measured per website or app.
A 4-bit identifier on the conversion side, which means 16 different conversion events can be distinguished.
Fraud prevention via unlinkable tokens will be coming.
A Proposed Standard
We first proposed privacy-preserving measurement of ad clicks in May 2019. Since then the proposal has changed name to Private Click Measurement and been discussed extensively in the W3C Privacy Community group, both through meetings and on GitHub.
A proposal needs two independent implementations to be on track to become a web standard. This means another browser such as Firefox, Brave, Chrome, or Edge needs to independently implement PCM before it can move further along the standards track. We are working with them to get there.
Nevertheless, we are happy to be the first browser to enable a proposed web standard for measuring advertising!
On By Default
You may ask why we are enabling PCM by default before there is a second independent implementation and before we’ve added the fraud prevention mechanism discussed in W3C Privacy CG. The reasons are:
Early access. We recognize the need for early access so that advertisers, websites, and apps can adopt the technology, analyze real data, tune their measurement, and report any issues to us.
Equal access. We want to provide everyone with the opportunity to test and use this technology from the get-go. An alternative would be to only run it with selected partners but we have opted for an open approach.
Attribution data is stable. Fraud prevention tokens will be added and naming of data labels might change, but the functionality and attribution data is stable, namely 8 bits on the click source side and 4 bits on the attribute-on side. Thus, full scale tests of PCM are meaningful and useful at this point.
Web-to-Web Click Measurement
PCM web-to-web is the case covered by the proposed standard, i.e. a user clicks a link on a webpage, is navigated cross-site, and up to seven days later, there’s a signal on the destination website saying it would like attribution for any previous clicks that took the user here.
For the purposes of the examples below, we assume the click happens on a website called social.example and the click navigates the user to shop.example.
The Click Side
Links that want to store click measurement data should look like this:
<!-- Link on social.example --><ahref="https://shop.example/product.html"attributionsourceid="[8-bit source ID]"attributeon="https://shop.example">
Markup
</a>
The two mandatory attributes are:
attributionsourceid: The 8-bit attribution source ID, allowed to be between 0 and 255. This was earlier referred to as the ad campaign ID but since PCM is not technically tied to advertising, it was decided in the standards discussion that its attributes and key names should not use advertising terms.
attributeon. The click destination website which wants to attribute incoming navigations to clicks. Note that PCM only uses the registrable domain or eTLD+1, i.e. there is no separation based on subdomains. This is so that the destination cannot be set up as https://janeDoeTracking.shop.example to track user Jane Doe.
If the click indeed navigated the user to the attributeon website, the attributionsourceid is stored as a click from social.example to shop.example for 7 days.
Note that this data is not accessible to websites. It’s silently stored in the browser.
The Triggering Event
To trigger click attribution, the “attribute on” website has to make an HTTP GET request to the website(s) where it is running click-through ads. This way of doing it is intended to support existing “tracking pixels” and make adoption easy. In our example this would be the shop.example site making an HTTP GET request to social.example. For a more modern way of triggering attribution, see the Future Enhancements section.
Trigger data. This is a 4-bit value between 00 and 15 that encodes the triggering event (note the mandatory two digits). This was earlier referred to as the conversion value but again, PCM is not technically tied to advertising so it doesn’t use advertising terms.
Optional priority. This is a 6-bit value between 00 and 63 which allows multiple triggering events to result in a single attribution report for the event with the highest priority (again, note the two digits). For instance, there might be multiple steps in a sales funnel where each step triggers attribution but steps further down the funnel have higher priority. This value only controls which trigger data goes into the attribution report and is not part of the attribution report itself. You may ask why this isn’t a 4-bit value like the trigger data. The reason is to support easy changes to what’s being measured without having to remap several trigger-data-to-priority pairs. Triggering events 00-15 may start out as mapped to priority 00-15 but then the shop owner wants to drill into events 5-7. With the extra bits, it’s easy to assign triggering events 05-07 to priority 20-22 so as to focus attribution reports to those.
Once a triggering event matches a stored click, a single attribution report is scheduled by the browser to be sent out randomly between 24 and 48 hours later, or the earliest time thereafter when the browser is running. As long as an attribution report has not yet been sent, it can be rescheduled based on a triggering event with higher priority.
The Attribution Report
PCM attribution reports are sent as HTTP POST requests to /.well-known/private-click-measurement/report-attribution/ on the website where the click happened, in our example https://social.example/.well-known/private-click-measurement/report-attribution/. Note: The first beta lacks the /report-attribution path component since this was a very recent decision in the standards group.
source_engagement_type is always “click” for PCM. This field allows for future use of this report mechanism for other types of attribution such as view-through.
version signals to the receiving end which version of the attribution feature this is. You should expect this number to be increased when fraud prevention tokens are added or something else about the mechanism is changed. This allows concurrent versions to work in parallel and provides a signal to developers that there may be things they need to change or adopt on their side.
App-to-Web Click Measurement
This is exciting – we’re adding the capability to measure ad clicks from iOS and iPadOS apps to Safari!
Many advertisers in apps want to take the user to their website where the user can buy a product or sign up for a service. This is exactly the kind of ad PCM app-to-web allows them to measure.
The Click Side
The only thing that differs from PCM web-to-web is on the click side which is in an iOS app. To adopt this technology you need to do this:
Add a URL to where you want PCM’s ad attribution reports to be sent when ads are clicked in your app. You do this under the key NSAdvertisingAttributionReportEndpoint in your Info.plist. The naming of this endpoint is deliberately not tied to PCM. Potential future ad measurement reports associated with apps may use this URL with a differing well-known location if appropriate. Note that the subsequent HTTP redirect to trigger attribution needs to go to this website.
Populate and add the new UIEventAttribution to the options of your call to openURL:. See below for what fields you need to enter in UIEventAttribution.
Overlay the parts of the click-through ad that will trigger navigations to websites with the new UIEventAttributionView. This view only serves as a checkpoint for Apple’s code on-device to check that a user gesture happened before the navigation. The view does not consume the gesture and you are free to decide whether or not to navigate to a website even if the gesture happened on one of these views. A user gesture is required for your UIEventAttribution object to be forwarded to the browser as part of the call to openURL:. Note that PCM app-to-web is so far only supported in Safari and only on iOS and iPadOS. We intend to add WebKit API to enable other default browsers to be the destination of PCM app-to-web too.
UIEventAttribution
This is the optional data structure you submit in your call to openURL: when you want to measure clicks:
open class UIEventAttribution : NSObject, NSCopying {
open var sourceIdentifier: UInt8 { get }
open var destinationURL: URL { get }
open var reportEndpoint: String? { get }
open var sourceDescription: String { get }
open var purchaser: String { get }
public init(sourceIdentifier: UInt8,
destinationURL: URL,
sourceDescription: String,
purchaser: String)
}
sourceIdentifier is the same as PCM’s attributionsourceid attribute for links. Allowed values are 0-255.
destinationURL is the same as PCM’s attributeon attribute for links but it should be a full URL with protocol. The report will be sent to the URL’s registrable domain (eTLD+1) and over HTTPS.
reportEndpoint will be picked up by Apple code from your info.plist’s NSAdvertisingAttributionReportEndpoint. As you can see, the init function does not take this parameter. This is where PCM will send any subsequent ad attribution reports. The reason why it need to be stated in the static Info.plist is so that it cannot be used as a tracking vector by dynamically submitting user-specific reporting URLs such as janeDoeTracking.example.
sourceDescription is a human-readable description of the content that was tapped. This string should be no longer than roughly 100 characters and can be localized according to the context. It will not be seen by Apple or the destination website. Instead it’s intended to be able to show to users what ad click data they have stored.
purchaser is a human-readable name or description of the purchaser of the content that was tapped, typically the ad buyer. This string should be no longer than roughly 100 characters and can be localized according to the context. It will not be seen by Apple or the destination website. Instead it’s intended to be able to show to users what ad click data they have stored.
UIEventAttribution Sample Code
func openAdLink() {
let adURL = URL(string: "https://shop.example/tabletStandDeluxe.html")!
let eventAttribution =
UIEventAttribution(sourceIdentifier: 4,
destinationURL: adURL,
sourceDescription: "Banner ad for Tablet Stand Deluxe.",
purchaser: "Shop Example, Inc.")
// If using scene lifecycle.
let sceneOpenURLOptions = UIScene.OpenExternalURLOptions()
sceneOpenURLOptions.eventAttribution = eventAttribution
self.view.window?.windowScene?.open(adURL,
options: sceneOpenURLOptions,
completionHandler: nil)
// If using application lifecycle.
let appOpenURLOptions: [UIApplication.OpenExternalURLOptionsKey : Any] = [
.eventAttribution: eventAttribution
]
UIApplication.shared.open(adURL,
options: appOpenURLOptions,
completionHandler: nil)
}
UIEventAttributionView
UIEventAttributionView is the view that is placed over the tappable content, typically an ad. It’s used by the system to verify that a user gesture has occurred.
open class UIEventAttributionView : UIView {
}
The view is invisible and very lightweight. The simplest use case is to create one of these views and stretch it over your entire tappable content. You can also place multiple over a single piece of content if you for instance want to create specific tappable areas.
To ensure your UIEventAttributionView works correctly:
Ensure isUserInteractionEnabled is false. This is the default value for this view and ensures the view doesn’t consume events which would otherwise go to the content beneath it.
Ensure there are no views placed on top of the event attribution view. The user should be tapping this view for it to count as a user gesture for the purposes of PCM app-to-web.
Ensure your tap handling occurs on a touch up event. This automatically occurs if your content is tapped in response to a UITapGestureRecognizer firing or at the .ended state of a UILongPressGestureRecognizer.
UIEventAttributionView Sample Code
func addEventAttributionView() {
// Create an event attribution view.
let eventAttributionView = UIEventAttributionView()
// Place it over your ad however you'd like.
eventAttributionView.translatesAutoresizingMaskIntoConstraints = false
adView.addSubview(eventAttributionView)
NSLayoutConstraint.activate([
adView.topAnchor.constraint(equalTo: eventAttributionView.topAnchor),
adView.leadingAnchor.constraint(equalTo: eventAttributionView.leadingAnchor),
adView.trailingAnchor.constraint(equalTo: eventAttributionView.trailingAnchor),
adView.bottomAnchor.constraint(equalTo: eventAttributionView.bottomAnchor)
])
}
Testing and Debugging
WebKit has an experimental feature called Private Click Measurement Debug Mode. You’ll find it under Develop–>Experimental Features on macOS and under Settings–>Safari–>Advanced–>Experimental Features on iOS and iPadOS. When you enable this mode and restart Safari, reports go out a mere 10 seconds after the triggering event instead of 24-48 hours later. This allows quick turnaround in testing and debugging.
The debug mode also enables debug output in Web Inspector’s console. This output will show up by default in a later beta.
Remember to disable debug mode once you’re done testing.
Future Enhancements
As is always the case with web standards, proposed or established, there are enhancement requests, corner cases, and a need to evolve the specification as the platform progresses. Below is a list of prominent and relevant issues that may show up as changes to our implementation of PCM in upcoming releases. Please take part on GitHub if you have input.
Fraud prevention with unlinkable tokens, GitHub issue #27. A proposed solution was presented to W3C Privacy CG in May 2020. It will use what is traditionally called blinded signatures (we call them unlinkable tokens). The intention is to offer websites to cryptographically sign tokens which will be included in attribution reports in a format that makes it impossible to link them back to the event when they were signed. These tokens serve as proof to the report recipient that they trusted the events involved (link click and attribution trigger) without telling them which events.
Modern JavaScript API for triggering event instead of legacy tracking pixels, GitHub issue #31. The intent here is to let a JavaScript call serve as the triggering event instead of redirected tracking pixels. This will remove the requirement for making third-party requests all together.
Attribution reports to advertisers too, GitHub issue #53. We have expressed that we’d like the attribution report to be sent to both the click source and the advertiser site. However, this sparked a conversation on sending reports to designated third-parties and you can read and join that conversation in GitHub issue #57.
Support PCM links in nested iframes, GitHub issue #7. This is about measuring click-through ads served in cross-site iframes. Since subsequent attribution reports will be sent to the first-party click source site, it’s not clear how that first party should control click measurement requested on its behalf. Part of this conversation covers not just serving of ads by third parties but also reporting to such third-parties. The privacy risk of such a scheme is explored in GitHub issue #57.
Misuse or Use Together With Tracking May Lead To Blocking
PCM is intended to support privacy-preserving measurement of clicks across websites or from apps to websites. It is not intended to be used to track users, events, or devices across those contexts.
If PCM is being misused for tracking purposes or being used in conjunction with unrelated means of tracking users, events, or devices, we may block the offending party from using PCM and potential future measurement features.
FAQ
What about PCM web-to-app? We are interested in this but don’t have a solution yet.
What about view-through ad attribution? We are interested in this but don’t have a privacy-preserving solution yet.
Is there a reason why the click has to take the user to the device’s browser? Yes. Stored clicks are valid for 7 days. Let’s assume that the user doesn’t trigger attribution right after they click but want to think about it first. When they choose to re-engage a few hours or days later they will most likely go to their browser and either look up the tab where they left off, use a bookmark they might have saved, use their search provider to find the right webpage, or enter the website’s address directly in the URL bar. For the stored click data to be readily available when the user re-engages in this fashion, the initial click needs to take the user to their browser since PCM data just like other website data is not shared between browsers and WebViews. In short: The user’s browser is the most likely place where delayed click-through attribution will happen.
Does use of PCM app-to-web require the app to be granted permission to track according to AppTrackingTransparency? No.
How do users delete stored clicks? Stored clicks are deleted when they delete website data.
Can users opt out of PCM? Yes. There is a new Safari privacy setting for privacy-preserving ad measurement. If the user has opted out, no click metadata will be stored and no attribution reports will be sent out.
Is PCM enabled in Private Browsing Mode? No.
What is the maximum number of parallel ad campaigns per source website or source app? 256, with the actual value being between 0 and 255.
What is the maximum number of triggering events I can distinguish? 16, with the actual value being between 0 and 15.
What is the maximum time between a click and a triggering event to still get attribution? 7 days.
Can I use PCM app-to-web with WebViews? No. Apps have too much control over WebViews for a feature like PCM to be able to protect the data.
Can I use PCM app-to-web with SFSafariViewController? We are interested in this but don’t have a solution yet.
Can other default browsers on iOS and iPadOS participate in PCM app-to-web? It is our intention to add such an API at a later point. Please let us know if you are interested.
Where can I provide feedback? Please file any web-facing issues or issues with the attribution report mechanism directly to WebKit: https://bugs.webkit.org. Please use Feedback Assistant for any issues with UIKit APIs or the Info.plist integration: https://developer.apple.com/bug-reporting/.
Thank You
We’d like to thank the W3C Privacy Community Group for all the work filing issues, suggesting changes, and engaging with us on this work. Please continue to do so as we move forward. Also, a big thank you to the engineers who’ve helped implement this feature – Anant, Kate, Jon, Chris, Jonathan, Chris, and Glen.
Let’s do a small introduction as this is a kind of special post.
As you might already know, last summer Igalia launched the Open Prioritization experiment, and :focus-visible in WebKit was the winner 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 visit the project page at Open Collective.
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 many customers, so it looks like this is a better format to share information about the status of things. Thank you all for supporting us in this development! 🙏
Understanding :focus-visible
Disclaimer: This is not a blog post explaining how :focus-visible works or the implications it has, you can read otherarticles if you’re looking for that.
First things first, my initial thoughts were that :focus-visible was a pseduo-class which would match an element when the browser natively shows a focus indicator (focus ring, outline) when an element of a page is focused. And that’s more or less what the spec says on the first sentence:
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element.
They key part here is that native behavior doesn’t show the focus indicator on purpose in some situations when the :focus 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 :focus-visible 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.
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:
If you use the mouse to focus an element it won’t match :focus-visible.
If you use the keyboard it’ll match :focus-visible.
Elements that support keyboard input (like <input> or contenteditable) always match :focus-visible.
When a script focuses a new element it’ll match or not :focus-visible depending on the previous active element.
This is just a quick & dirty summary, please read the spec for all the details. 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.
:focus-visible in the default UA style sheet
At this point it looks like we can more or less understand what :focus-visible 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.
WARNING: :focus-visible is not supported on your browser.
Focus me.
If you focus the <div> with a mouse click, :focus-visible 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 :focus-visible and the background would be green). This works the same in Chromium and Firefox, but Chromium (despite the element doesn’t match :focus-visible) shows a focus indicator. Somehow the first spec definition is already not working as expected on Chromium… The issue here is that Chromium still uses :focus { outline: auto; } in the default UA style sheet, and the element matches :focus after the mouse click, that’s why it’s showing a focus indicator while not matching :focus-visible.
Actually this was already on the spec, but Chromium is not following that yet:
User agents should also use :focus-visible to specify the default focus style, so that authors using :focus-visible will not also need to disable the default :focus style.
There was already a related CSSWG issue on the topic, as the spec currently suggests the following code:
:focus:not(:focus-visible){outline:0;}
This works as a kind of workaround for this issue, but if the default UA style sheet uses :focus-visible that won’t be needed.
WebKit is the third browser engine adding support for :focus-visible 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.
There was a bunch of :focus-visible tests already in the WPT suite, but they need some love:
Some parts of the spec were not covered by tests, so I added some new tests.
Some tests were passing in WebKit, even when there was not an implementation yet, so I modified them to fail if there’s no :focus-visible support.
Then I imported the tests in WebKit and I discovered a bug related to focus event and :focus pseudo-class. :focus pseudo-class was not matching inside the focus event handler. This is probably not important for web authors, but :focus-visbile tests were relying on that. Actually this had been fixed in Chromium more than 5 years ago, so first I moved to WPT the Chromium internal test and used it to fix the problem in WebKit.
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 focus event is not dispatched when you click on a button in Mac. Digging deeper I found this old bug with lots of discussions on the topic, 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 focus event that is never dispatched. Anyway maybe once :focus-visible is implemented, it could be rediscussed the possibility of modifying this behavior, thought it might be not possible anyway. In any case, WebKitGTK port, the one I’m using for the development, does trigger the focus event in this case; and I’ve also changedWPE port to do the same (maybe Windows port will follow too).
One more thing about the tests, lots of these :focus-visible tests use testdriver.js to simulate user actions. For example for clicking an element they use test_driver.click(element), however that simple instruction is causing some kind of memory leak on Chromium when running the tests. The actual Chromium bug 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).
Status of WPT :focus-visible tests in the different browsers
To close the tests part, you can check the status in wpt.fyi, most of them are passing in all implementations which is great, but there are some interoperability issues that we’ll review next.
Interop issues
As I mentioned the wpt.fyi website helps to easily identify the interop issues between the different implementations.
:focus-visible on <select> element: There’s a Firefox failure on focus-visible-002.html because it doesn’t match :focus-visible when you click a <select> element. I opened a CSSWG issue to discuss this, and I initially thought that the agreement was that Firefox behavior is the right one. So I did a patch to change Chromium’s behavior and update the tests, but during the review I was pointed to a Chromium bug about this topic that was closed as WONTFIX, the reason is that when you click a <select> 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.
Keyboard interaction once an element is focused: This is tested by focus-visible-007.html. The example here is that you click an element to focus it, initially the element doesn’t match :focus-visible but then you use the keyboard (for example you type a letter), in that situation Chromium will start matching :focus-visible while Firefox won’t. The spec is quite explicit on the topic so it looks like a Firefox bug:
If the user interacts with the page via the keyboard, the currently focused element should match :focus-visible (i.e. keyboard usage may change whether this pseudo-class matches even if it doesn’t affect :focus).
Programmatic focus and :focus-visible: What should happen with :focus-visible when the website uses element.focus() from a script to move the focus? The spec has some heuristics that depend on if the active element before focus() is called was matching (or not) :focus-visible. But I’ve opened a CSSWG issue 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.
:-webkit-direct-focus?
Probably you don’t know what’s that, but it’s somehow related to :focus-visible so I believe it’s worth to mention it here.
WebKit is the browser that supports better :focus pseudo-class behavior on Shadow DOM (see the WPT tests results). The issue here is that the ShadowRoot should match :focus if some of the descendants are focused, so if you have an <input> element in the Shadow Tree, and you focus it, you’ll have 2 elements matching :focus the ShadowRoot and the <input>.
In Chromium if you use delegatesFocus=true in element.attachShadow(), and you have an example like the one described above, you’ll get two focus indicators, one in the ShadowRoot and one in the <input>. Firefox doesn’t match :focus in the ShadowRoot so the issue is not present there.
WebKit matches :focus independently of delegatesFocus value (which is the right behavior per spec), so it’d be even more common to have a situation of getting two focus indicators. To avoid that WebKit introduced :-webkit-direct-focus pseudo-class, 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 ShadowRoot.
I believe :focus-visible spec should describe that behavior regarding how it works on ShadowRoot so it doesn’t match on those situations. That way WebKit could get rid of :-webkit-direct-focus and use :focus-visible once it’s implemented. I’ve reported a CSSWG issue to discuss this topic.
WIP implementation
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. :focus-visbile 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 :focus-visible implementation as much interoperable as possible.
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 :focus-visible working on WebKit.
:focus-visible example running on WebKitGTK MiniBrowser
Some numbers
I know this is not really relevant, but it helps to get a grasp on what has been happening during this month:
3 CSSWG issues reported.
13 PRs merged in WPT.
5 patches landed in WebKit.
4 patches landed in Chromium.
And many discussions with different people, special thanks to Alice and Emilio that have been really helpful.
Next steps
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, focus (pun intended) the effort on implementation of :focus-visible in WebKit.
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.
If you enjoyed this project update, stay tuned as there will more in the future.
Safari Technology Preview Release 119 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
Prevented layout overflow from being computed incorrectly inside Flexbox and breaking sticky positioning (r271053)
Scrolling
Fixed scrolling issues when scrolling on only one axis is enabled (r271090)
Sibling element wheel event regions can be wrong (r271054)
JavaScript
Fixed non-enumerable property to shadow inherited enumerable property from for-in (r270874)
Fixed Intl.DateTimeFormat#formatRange to generate the same output to Intl.DateTimeFormat#format if startDate and endDate are “practically-equal” (r271224)
In my previous post I discussed my most recent contributions to flexbox code in WebKit mainly targeted at reducing the number of interoperability issues among the most popular browsers. The ultimate goal was of course to make the life of web developers easier. It got quite some attention (I loved Alan Stearns' description of the post) so I decided to write another one, this time focused in the changes I recently landed in WebKit (Safari’s engine) to improve the handling of elements with aspect ratio inside flexbox, a.
Safari Technology Preview Release 118 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
2020 is not a great year to do any kind of recap, but there have been some positive things happening in Igalia during this year. Next you can find a highlight of some of these things in no particular order.
Fantastic @CSSWG meeting hosting by @igalia.@svgeesus and I are so incredibly grateful that they are providing childcare for us, for all three days of the meeting, on the same floor. ❤️ Setting the bar high!
Brian Kardell from Igalia was talking to everybody about Container Queries. 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 Resize Observer or CSS Containment, and new ideas appeared too. Brian posted a blog post after the event, explaining some of those ideas. Later my colleague Javi Fernández worked on an experiment that Brian mentioned on a recent post. 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 Container Queries prototype in Chromium.
This actually started in later 2019, but it has been ongoing during the whole 2020. Brian Kardell has been recording a podcast series 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 one of these for the last BlinkOn edition.
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 at Igalia website or in your favourite podcasting platform.
Igalia contributions
This is not a comprehensive list but just some highlights of what Igalia has been doing in 2020 around CSS:
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!
2021 and beyond…
Igalia keeps growing and a bunch of amazing folks will join us soon, particularly Delan Azabani and Felipe Erias are already starting these days as part of the Web Platform team.
Open Prioritization should have the first successful project, as :focus-visible is advancing funding and it gets implemented in WebKit. We hope this can lead to new similar experiments in the future.
And I’m sure many other cool things will happen at Igalia next year, stay tuned!
CSS Transforms appeared on the Web along with CSS Animations and CSS Transitions to add visual effects and motion on the Web. Those technologies have been a staple of the Web platform and Web developers’ toolkit for well over a decade. In fact, the CSS transform property first shipped in Safari all the way back in July 2008 when iPhone OS 2.0 shipped. You can find some historical posts about initial support in WebKit from October 2007, and another post from July 2009 focusing on 3D transforms when CSS Transforms shipped in Mac OS X Leopard.
And now, there is some news in the world of CSS Transforms: individual transform properties are enabled by default in Safari Technology Preview 117. This means that, as in Firefox and Chrome Canary, you can now use the new translate, rotate and scale CSS properties to specify what have so far been functions of the transform property, including 3D operations.
Using these properties is simple and should make Web developers feel right at home. Consider these two equivalent examples:
But why would you use these new properties over the transform property? One reason is convenience, as you might deem it simpler to write scale: 2 rather than transform: scale(2) when all you intend to do is scale an element.
But I think the main draw here is that you are now free to compose those various transform properties any way you see fit. For instance, you can easily write a CSS class to flip an element using the scale property without worrying that you might override other transform-related properties:
.flipped {
scale: -1;
}
Your flipped class will work just fine even if a rotate or transform property applies a rotation to the element.
This feature also comes in handy when animating transforms. Let’s say you’re writing an animation that scales an element up over its entire duration but also applies a rotation for the second half of that animation. With the transform, property you would have had to pre-compute what the intermediate values for the scale should have been when the rotation would start and end:
While this may not look like such a big deal when you look at it, making any further changes to those keyframes would require recomputing those values. Now, consider this same animation written with the individual transform properties:
You can easily change the keyframes and add other properties as you like, leaving the browser to work out how to correctly apply those individual transform properties.
But that’s not all; there is also the case where you want separate animations to apply to an element at the same time. You could split out this single set of keyframes into two different sets and tweak the timing instead:
.animated {
/* Apply the scale keyframes for 1s and the rotate
keyframes for 500ms with a 500ms delay. */animation: scale1s, rotate500ms500ms;
}
@keyframesscale {
from { scale: 0 }
to { scale: 1 }
}
@keyframesrotate {
from { rotate: 0deg }
to { rotate: 180deg }
}
Now keyframes applying to transforms are not only easier to author, but you can better separate the timing and the keyframes by composing multiple transform animations. And if you are a seasoned CSS Animations developer, you’ll know how important this can be when you factor in timing functions.
Additionally, animating the new individual transform properties retains the same great performance as animating the transform property since these properties support hardware acceleration.
But what about the transform property? How does it relate to those new individual transform properties?
First, remember that the transform property supports transform functions that are not represented as individual transform properties. There are no equivalent CSS properties for the skew(), skewX() and skewY() functions and no property equivalent to the matrix() function.
But what happens when you specify some of the individual transform properties as well as the transform property? The CSS Transform Level 2 specification explains how individual transform properties and the transform-origin and transform properties are composed to form the current transformation matrix. To summarize, first the individual transform properties are applied – translate, rotate, and then scale – and then the functions in the transform property are applied.
This means that there’s a clear model to use those individual transform properties and the transform property together to enhance your ability to transform content on the Web platform.
And before you start using these new properties, it is important that you know how to detect their availability and use transform as a fallback. Here, the @supports rule will allow you to do what you need:
We encourage you to start exploring how to use those three new properties in Safari Technology Preview in your projects and file bug reports on bugs.webkit.org should you encounter unexpected issues. You can also send a tweet to @webkit or @jonathandavis to share your thoughts on individual transform properties.
Safari Technology Preview Release 117 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
Over the past few months the WebKit development team has been working on
modernizing support for the WebAudio specification. This post highlights some
of the changes that were recently merged, focusing on the GStreamer ports.
My fellow WebKit colleague, Chris Dumez, has been very active lately, updating
the WebAudio implementation …
I used to regard myself as an austere programmer in terms of tooling: Emacs —with a plain configuration— and grep. This approach forces you to understand all the elements involved in a project.
Some time ago I have to code in Rust, so I needed to learn the language as fast as possible. I looked for packages in MELPA that could help me to be productive quickly. Obviously, I installed rust-mode, but I also found racer for auto-completion. I tried it out. It was messy to setup and unstable, but it helped me to code while learning. When I felt comfortable with the base code, I uninstalled it.
This year I returned to work on WebKit. The last time I contributed to it was around five years ago, but now in a different area (still in the multimedia stack). WebKit is huge, and because of C++, I found gtags rather limited. Out of curiosity I looked for something similar to racer but for C++. And I spent a while digging on it.
The solution consists in the integration of three MELPA packages:
lsp-mode: a client for Language Server Protocol for Emacs.
ccls: A C/C++ language server. Besides emacs-ccls adds more functionality to lsp-mode.
(I known, there’s a simpler alternative to lsp-mode, but I haven’t tried it yet).
First we might explain what’s LSP. It stands for Language Server Protocol, defined with JSON-RPC messages, between the editor and the language server. It was orginally developed by Microsoft for Visual Studio, which purpose is to support auto-completion, finding symbol’s definition, to show early error markers, etc., inside the editor. Therefore, lsp-mode is an Emacs mode that communicates with different language servers in LSP and operates in Emacs accordingly.
In order to support the auto-completion use-case lsp-mode uses the company-mode. This Emacs mode is capable to create a floating context menu where the editing cursor is placed.
The third part of the puzzle is, of course, the language server. There’s a language servers for different programming languages. For C & C++ there are two servers: clangd and ccls. The former uses Clang compiler, the last can use either Clang, GCC or MSVC. Along this text ccls will be used for reasons exposed later. In between, emacs-ccls leverages and extends the support of ccls in lsp-mode, though it’s not mandatory.
In short, the basic .emacs configuration, using use-package, would have these lines:
The snippet first configures company-mode. It is enabled globally because, normally, it is a nice feature to have, even in non-coding buffers, such as this very one, for writing a blog post in markdown format. Diminish mode hides or abbreviates the mode description in the Emacs’ mode line.
Later comes lsp-mode. It’s big and aims to do a lot of things, basically we have to tell it to disable certain features, such as file watcher, something not viable in massive projects as WebKit; as I don’t use snippet (generic text templates), I also disable it; and finally, lsp-mode tries to format the code at typing, I don’t know how the code style is figured out, but in my experience, it’s always detected wrong, so I disabled it too. Finally, lsp-mode is launched when a text uses the c-mode-common, shared by c++-mode too. lsp-mode is launched deferred, meaning it’ll startup until the buffer is visible; this is important since we might want to delay ccls session creation until the buffer’s .dir-locals.el file is processed, where it is configured for the specific project.
And lastly, ccls-mode configuration, hooked until c-mode or c++-mode are loaded up in a deferred fashion (already explained).
It’s important to understand how ccls works in order to integrate it in our workflow of a specific project, since it might need to be configured using Emacs’ per-directory local variales.
We are living in a post-Makefile world (almost), proof of that is ccls, which instead of a makefile, it uses a compilation database, a record of the compile options used to build the files in a project. It’s commonly described in JSON and it’s generated automatically by build systems such as meson or cmake, and later consumed by ninja or ccls to execute the compilation. Bear in mind that ccls uses a cache, which can eat a couple gigabytes of disk.
Now, let’s review the concrete details of using these features with WebKit. Let me assume that WebKit local repository is cloned in ~/WebKit.
As you may know, the cool way to compile WebKit is with flatpak. Flatpak adds an indirection in the compilation process, since it’s done in an isolated environment, above the native system. As a consequence, ccls has to be the one inside the Flatpak environment. In ~/.local/bin/webkit-ccls:
#!/bin/sh
set -eu
cd $HOME/WebKit/
exec Tools/Scripts/webkit-flatpak -c ccls "$@"
Basically the scripts calls ccls inside flatpak, which is available in the SDK. And this is why ccls instead of clang, since clang is not provided.
By default ccls assumes the compilation database is in the project’s root directory, but in our case, it’s not, thus it is required to configure the database directory for our WebKit setup. For it, as we already said, a .dir-locals.el file is used.
As you can notice, ccls-execute is defined here, though it’s not a safe local variable. Also the ccls-initialization-options, which is a safe local variable. It is important to notice that the compilation database directory is a path inside flatpak, and always use the Release path. I don’t understand why, but Debug path didn’t work for me. This mean that WebKit should be compiled as Release frequently, even if we only use Debug type for coding (as you may see in my compile-command).
Update: Now we can explain why it’s important to configure lsp-mode as deferred: to avoid connections to ccls before processing the .dir-locals.el file.
And that’s all. Now I have early programming errors detection, auto-completion, and so on. I hope you find these notes helpful.
Update: Sadly, because of flatpak indirection, symbols’ definition finding won’t work because the file paths stored in ccls cache are relative to flatpak’s file system. For that I still rely on global and its Emacs mode.
Safari Technology Preview 105 and Safari in the latest iOS 14.3 beta enabled support for the MediaRecorder API by default. This API takes as input live audio/video content to produce compressed media. While the immediate use case is to record from the camera and/or microphone, this API can take any MediaStreamTrack as input, be it a capture track, coming from the network using WebRTC, or generated from HTML (Canvas, WebAudio), as illustrated in the chart below.
The generated output, exposed as blobs, can be readily rendered in a video element to preview the content, edit it, and/or upload to servers for sharing with others.
This API can be feature-detected, as can the set of supported file/container formats and audio/video codecs. Safari currently supports the MP4 file format with H.264 as video codec and AAC as audio codec. MediaRecorder support can be checked as follows:
functionsupportsRecording(mimeType)
{
if (!window.MediaRecorder)
returnfalse;
if (!MediaRecorder.isTypeSupported)
returnmimeType.startsWith("audio/mp4") ||mimeType.startsWith("video/mp4");
returnMediaRecorder.isTypeSupported(mimeType);
}
The following example shows how camera and microphone can be recorded as mp4 content and locally previewed on the same page.
<html><body><buttononclick="startRecording()">start</button><br><buttononclick="endRecording()">end</button><videoid="video"autoplayplaysInlinemuted></video><script>
let blobs = [];
let stream;
let mediaRecorder;
async function startRecording()
{
stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
// Let's append blobs for now, we could also upload them to the network.
if (event.data)
blobs.push(event.data);
}
mediaRecorder.onstop = doPreview;
// Let's receive 1 second blobs
mediaRecorder.start(1000);
}
function endRecording()
{
// Let's stop capture and recording
mediaRecorder.stop();
stream.getTracks().forEach(track => track.stop());
}
function doPreview()
{
if (!blobs.length)
return;
// Let's concatenate blobs to preview the recorded content
video.src = URL.createObjectURL(new Blob(blobs, { type: mediaRecorder.mimeType }));
}
</script></body></html>
Future work may extend the support to additional codecs as well as supporting options like video/audio bitrates.
getUserMedia in WKWebView
Speaking of Safari in latest iOS 14.3 beta and local capture, navigator.mediaDevices.getUserMedia can now be exposed to WKWebView applications. navigator.mediaDevices.getUserMedia is automatically exposed if the embedding application is able to natively capture either audio or video. Please refer to Apple documentation to meet these requirements. Access to camera and microphone is gated by a user prompt similar to Safari and SafariViewController prompts. We hope to extend WKWebView APIs to allow applications to further control their camera and microphone management in future releases.
We hope you will like these new features. As always, please let us know if you encounter any bugs (or if you have ideas for future enhancements) by filing bugs on bugs.webkit.org.
Safari Technology Preview Release 116 is now available for download for macOS Big Sur and macOS Catalina. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.
Fixed background-clip: var(--a) invalidating -webkit-background-clip: text when --a: text (r268158)
Rendering
Respect the font size when presenting the <select> dropdown when custom fonts are used (r268126)
JavaScript
Changed arguments.callee to become ThrowTypeError if the function has a complex-parameter-list (spec-term) (r268323)
Changed BigInt constructor to be constructible while it always throws an error (r268322)
Fixed Array.prototype.sort‘s sortBucketSort which accessed an array in an invalid way leading to incorrect results with indexed properties on the prototype chain (r268375)
Improved the essential internal methods for %TypedArray% to adhere to spec (r268640)
WebAuthn
Removed the alg field from the attestation statement (r268602)
Media
Fixed AirPlay menu not showing up when the AirPlay button is clicked (r268308)
Improved computation of default audio input and output devices (r268396)
Web API
Allowed passive mouse wheel event listeners to not force synchronous scrolling (r268476)
Overlay showing grid structure of concert poster demo
A “grid” badge shown next to 
Layout sidebar panel with the overlay enabled for the “div#css-grid-demo” CSS Grid container
Elements positioned on a grid defined with CSS Grid Layout
CSS Grid Inspector overlay showing labels for grid line numbers and grid track sizes
