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 <[email protected]>. 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/>
_______________________________________________ PatternFly mailing list [email protected] https://listman.redhat.com/mailman/listinfo/patternfly
