[PatternFly] PatternFly Newsletter: Jan – Mar 2021

[Alana Fialkoff]

January – March 2021PatternFly Newsletter

New quarter, new newsletter! As we launch into the second quarter of this
year, we’re giving our typical newsletter a storytelling spin.

We’ll still focus on all things PatternFly, but with a twist: We’re digging
deeper into story highlights that started this year.
*A look back at PatternFly's first quarter*

Since January, we’ve sent four releases into the wild. From PatternFly
2021.01 to PatternFly 2021.04, our release notes, release highlights, and
Medium articles share this quarter’s slice of the PatternFly story.

   - View the latest release notes on PatternFly.org
   <https://www.patternfly.org/v4/developer-resources/release-notes>
   - Check out the latest release highlights on GitHub
   <https://github.com/patternfly/patternfly-org/tree/master/release-highlights>
   - Read the latest PatternFly stories on Medium
   <https://medium.com/patternfly/tagged/patternfly>

Cross-team collaboration: Log viewer
To monitor cluster service activity, Red Hat OpenShift’s users rely on
cluster logs — but without an intuitive way to access them, critical
information can get lost in translation. When the OpenShift team approached
PatternFly looking for a log viewer solution, we leaned on teamwork to get
the job done. Cloud platform had already created a simple log viewer for
their own needs, and saw this as a great opportunity to contribute their
code back into PatternFly. Our ongoing work on log viewer is a tale of
three teams and a dream: To create a common log viewer solution to use
across OpenShift, Cloud platform, and PatternFly experiences.

The process began with meetings between designers and developers on all
three teams to discuss and agree on a common set of minimum viable product
(MVP) requirements. Alexander Rivera from the Cloud team continues to
participate in our PatternFly scrum and work with full-time Flyer Katie
McFaul to deliver this log viewer capability.

The PatternFly log viewer component consists of three main elements: A
customizable multi-feature toolbar, line numbers, and timestamps that
display in bold at the start of each log entry.

As our collaboration with the OpenShift and Cloud teams continues, we're
looking forward to growing this component's functionality together!

To learn more about this component's developing design and behavior, explore
our current mockups on Marvel
<https://marvelapp.com/prototype/bia3j2d/screen/75984271>.

Evolution of the PatternFly code editor
Before PatternFly's code editor component, Red Hat OpenShift used the Monaco
code editor <https://microsoft.github.io/monaco-editor/>: But the need
arose for a PatternFly specific component to provide a consistent editing
solution across Red Hat products. The PatternFly team created a design that
wrapped the Monaco code editor in PatternFly styled controls, delivering a
component which would require very little refactoring for use in OpenShift.

After we created the initial code editor design, we built a proof of
concept (POC) to demonstrate that the Monaco code editor could be
incorporated into the PatternFly library with its new third party
dependency. But this third party dependency was very large: How could we
provide the Monaco code editor's complex syntax highlighting and
IntelliSense capabilities in the PatternFly version without requiring every
PatternFly user to load the entire dependency?

The solution became clear: Our PatternFly code editor component would need
to live in its own package within React so that only Flyers who intended to
use it in their designs would need to load the entire dependency.

With our packaging solution for code editor sorted, we next needed to
figure out how to configure it. Our original POC was configured using
Webpack, an additional configuration tool that was not previously required
for PatternFly consumers. Our first attempt to deliver our code editor
component used a workaround to avoid imposing a new Webpack requirement on
PatternFly consumers: A content delivery network (CDN). This original
workaround sparked a larger discussion about configuring the code editor:
What kind of trade-offs existed between requiring Webpack or using a CDN?
Which would be more beneficial to the PatternFly community?

We weighed the implications of each:

   - A public CDN wouldn’t be usable for products that run offline, and
   would carry considerable security risks.
   - A Webpack requirement would be large enough to require products that
   don't use Webpack to rewire their application's entire build configuration
   to use the code editor. This rewiring process could be complicated and
   lengthy, possibly not a trade-off worthwhile.

In the end, we chose Webpack over a CDN. OpenShift configured their
original Monaco code editor using Webpack, and enough PatternFly consumers
were already using it to make a Webpack dependency the smoothest option.

Next, came conversation and iteration: We met with the OpenShift team to
ensure the in-progress PatternFly code editor would meet their product
requirements, provide an easy API to work with, and satisfy their design
needs. They provided great feedback, including a request to be able to
build customizable controls and expose the Monaco instance so that they
could attach some keyboard controls of their own.

The delivered beta code editor
<https://www.patternfly.org/v4/components/code-editor> has only had a few
bug fixes since its initial release. Most code editors could cause products
to have keyboard traps
<https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html>
so
that once a user is inside the editor, there's no way to escape —
PatternFly's doesn't. To consider all users' needs, we added functionality
that allows keyboard users to easily navigate and use the code editor in a
way that doesn't require them to know about complex key combinations. This
functionality is an impressive accessibility feature compared to other
existing code editors. The PatternFly code editor has been tested for
screen reader functionality, too.

The beta code editor component stands as a testament to the power of
collaboration and accessibility work, and we're excited to see where its
future leads.

Expanding PatternFly's UX writing resources
We're always looking to grow our UX content resources based on research and
community feedback. This quarter, PatternFly's content team hosted a course
collaboration with Red Hatters across Red Hat Customer Content Services and
User Experience Design. During biweekly sessions, we used lessons learned
from our UX Writers Collective course to workshop PatternFly guidelines and
think critically about how we can leverage content to support more
intuitive and impactful user experiences.

Based on course workshops and discussions, we updated PatternFly
recommendations and created new ones, including:

   - HTTP 404 pages
   <https://www.patternfly.org/v4/ux-writing/http-404-pages>
   - Alert design guidelines
   <https://www.patternfly.org/v4/components/alert/design-guidelines/>
   - Form design guidelines
   <https://www.patternfly.org/v4/components/form/design-guidelines>

Going forward, we're exploring microcopy A/B testing so that we can write
UX content and UX writing guidelines that best support you.

Fill out our microcopy survey
<https://redhatdg.co1.qualtrics.com/jfe/form/SV_5aSa9Zy1lEwE1am> to share
your thoughts and help shape the future of PatternFly UX content guidance.

We can't wait to keep growing our content resources with you.

Join us at our next community meeting!
PatternFly community meetings are always a highlight of our month (we're
proudly biased). From pulling back the hood on the latest enhancements to
brainstorming and collaborating on future projects, these meetings provide
the perfect opportunity to connect with fellow Flyers and stay in the loop
on all things PatternFly.

We look forward to connecting again at our next meeting on *Tuesday, May 4
at 11:00AM EST*.

Not on the invite yet? Get in touch with Nicole Thoen to join in
<nthoen at redhat.com>.

Discover more

   - PatternFly website <https://www.patternfly.org/v4/>
   - PatternFly Twitter <https://twitter.com/patternfly>
   - PatternFly Medium <https://medium.com/patternfly>
   - Get in touch <https://www.patternfly.org/v4/get-in-touch/>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20210421/df70a83e/attachment.htm>