Blog

What’s Next in Performant Design: CSS Containment 2

By Evan Ross

The World Wide Web Consortium (W3C) is finalizing some major upgrades to the CSS Containment specification which are poised to help frontend developers build even more performant webpages. One key upgrade is now available as part of Chrome’s latest Stable Channel milestone.


CSS Containment


CSS Containment is already a powerful tool for improving web rendering performance. It lets developers tell the browser which parts of the DOM subtree are isolated from one another. The browser can then use that information to render content optimally.

For example, if the browser cannot determine on its own whether changes in one subtree would affect the appearance of another subtree, it has no choice but to re-render both. CSS Containment is a way of informing the browser that there is surely no need to re-render anything but the changed subtree itself. This effect may be minimal if there are few subtrees in question but can be significant in pages with highly complex DOM structures.

The new specification version gives developers even more control over how the browser uses the provided Containment information. Although the first public working draft of CSS Containment Module Level 2 was published nearly a year ago, its relevance to the average front-end developer will skyrocket now that Chrome 85 has moved from Beta to the Stable Channel. That is because Chrome 85 – released to the Stable Channel on August 25, 2020 – finally includes the new flagship feature of CSS Containment 2: the content-visibility property.


Content-Visibility


The content-visibility property provides new means of suppressing the rendering of an element’s contents to reduce load time and boost performance.

As the W3C specification describes, there are three possible values for the content-visibility property.

  1. Visible (default): Exhibits the same behavior that browsers currently have.
  2. Hidden: Skips rendering the element’s contents entirely, but retains the state of previously-computed layouts. Skipped contents are inaccessible to the user-agent.
  3. Auto: Skips rendering the element’s contents if it is “not relevant” (i.e., not on-screen, focused, or selected), but retains the state of previously-computed layouts. Skipped contents are accessible to the user-agent.

All front-end developers should be very familiar with the ubiquitous display:none and visibility:hidden properties. At first glance, content-visibility:hidden appears similar enough; they are all ways of hiding content. Upon closer examination, however, you’ll find that content-visibility:hidden fills a niche nicely between these two options.

One downside of display:none is that, for elements that are shown and hidden regularly, the layout state is completely forgotten by the user-agent when the property is set. This means that the time it takes to re-render something once visible but then hidden is the same as the time it takes to render it in the first place. Elements hidden by the content-visibility property instead preserve their layout state, so the re-render can be performed much quicker than the initial render.

A quirk of visibility:hidden mentioned by the CSS Containment 2 specification is that children of a hidden element can override the visibility property. This means that a container that is marked hidden is not guaranteed to be hidden in its entirety. Because nested elements need to be checked, not much is gained performance-wise by using this property. The content-visibility property does not have this issue, as its purpose is to inform the browser whether any rendering should be done at all. The children of an element hidden via its content-visibility are thus also guaranteed to be hidden.

The content-visibility:auto setting is, according to the specification, best understood as an upgrade to the existing features of CSS Containment. That is to say, it helps the browser to optimize rendering performance even more thoroughly than the use of the existing contain property alone.


Moving Forward


At Sulzer US, we aim to stay on the cutting-edge of all technologies we work with, and CSS is no exception. Considering that the majority of the front-end development we do is for Single Page Applications (SPAs), we see a lot of great use cases for content-visibility as the feature gains more widespread adoption by modern browsers.

As the CSS Containment 2 specification describes, SPAs in particular stand to benefit greatly from content-visibility:hidden. SPAs often feature elements that are not completely removed from the DOM and need to be hidden and shown again. With content-visibility: hidden, the layout states of hidden elements are retained so they can come back into the view smoothly, but not at the computational expense of keeping them styled and rendered even while off-screen.

For all elements that we currently hide with either of the other CSS properties, we should evaluate whether it makes sense to switch over to content-visibility. Furthermore, with this new tool at our disposal, we will need to rethink whether elements that are removed from the DOM entirely should be switched over to take advantage of content-visibility:hidden, as well.

Another use case would benefit nearly all of our front-end applications. Our data-driven applications often need to create a DOM element per data point in a long list. Depending on the application, we may opt to use pagination, but nowadays we tend to use more dynamic lists, sometimes in virtual scrollers. In such cases, content-visibility:auto is even better than traditional CSS Containment or older JavaScript and CSS “life-hacks” for ensuring that the browser does not waste resources rendering list items outside of the view.

Although no other browsers except Chrome have announced plans to introduce this feature, it is likely that Firefox will follow suit, and movements have already begun to enter a prototype phase. Now that Edge runs on Chromium, it should see the change, as well. However, given that Safari has not implemented CSS Containment 1 in the several years since it was introduced, it is likely that Safari will continue to lag behind in this feature set.

Regardless, we will keep aiming for the absolute best user experience for all of our applications. Even though it may have to coexist with current solutions to ensure compatibility with legacy browsers for some time, we are confident that the latest in CSS Containment will play a big role in Sulzer US continuing to push the envelope on front-end performance.


TL;DR


Want to take advantage of the latest Chrome update and pump up your web page’s performance on Chrome? Use content-visibility:hidden instead of display:none or visibility:hidden and use content-visibility:auto instead of contain:content.

 

Sources:
https://www.w3.org/TR/css-contain-2/
https://www.chromestatus.com/feature/4613920211861504
https://web.dev/content-visibility/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment

 

To learn more about innovation at Sulzer US, please visit our website.

About the author:  Evan Ross is a Technical Team Lead at Sulzer US. Sulzer US is a technology company delivering innovative cloud, big data, and AI solutions to industry-leading clients. We build and run our solutions and serve as strategic partners to our clients. We achieve success by investing in our people and products with focus on innovation and solving complex business challenges.

Transforming Mobility

By Julian Offermann

In the words of Harvey J. Miller, “If civilization is to survive the 21st century, we must figure out how to design, build, and manage sustainable and resilient urban mobility systems.” The current COVID-19 pandemic has further exposed the need for continued development of sustainable mobility to handle the ever-growing demand due to population growth.

As with all big challenges, it starts with the right mindset. At Sulzer US, we ask ourselves “How can we support the transformation of mobility into a more sustainable and reduced emission service?” Many of our sustainability initiatives over the past 8 years have taught us that this transformation requires leaders across industries, including energy, automotive and IT, as well as policymakers to work hand-in-hand. Our clients and partners within the EV space demonstrate a commitment to the vision of making mobility sustainable without focusing only on immediate return on investment. This mindset is what brings change.

Major challenges for evolving this transformation remain, including the integration of services, mostly legacy, across systems, infrastructure and companies. This is especially true for connected devices, which generate valuable data and often need to be integrated with legacy backend systems in order to allow for proper optimization, as well as detection of patterns and inefficiencies. Another big challenge is ensuring data privacy and security. With the positive developments regarding customers’ rights to consciously opt for sharing of data, it is fundamental for companies to think how data sharing works for each particular business case. Especially when partnering with other companies to create richer sets of data, this is a fundamental consideration. Differential privacy is a great approach to continue to leverage statistical power of datasets while withholding information about individual devices or users.

Long term competitive advantage will be realized by players who understand the technological efforts needed to integrate systems efficiently and can quickly and efficiently iterate on use cases. Our broad technology skillset and deep understanding of cloud technologies helps overcome challenges to drive our clients’ transformational efforts needed to adapt to new software development and operating paradigms.

If you’re interested in partnering on a sustainable mobility project or learning more about what we do at Sulzer, we look forward to hearing from you.

 

Sources
Miller, H. J. (2020). Movement analytics for sustainable mobility. Journal of Spatial Information Science, (20). doi:10.5311/josis.2020.20.663

What’s Next in iOS Development? SwiftUI

By Oniel Rosario

At Sulzer US, we develop both native and hybrid iOS and Android applications. Our focus lies on maximizing device capabilities and ensuring high performance for the challenges we are tackling. As mobile development technologies are constantly evolving, we often explore new methods and tech products when creating bespoke solutions for enterprise clients. SwiftUI is a notable product worth sharing and one we are looking to employ in a number of current engagements.

What is SwiftUI?

SwiftUI is an innovative and simple way to build user interfaces across Apple devices. SwiftUI is native on all Apple platforms and available on devices that support iOS 13+, Xcode 11, and Catalina. 

SwiftUI uses declarative syntaxes to state what the user interface should do. For example, it is possible to write a list of items consisting of text fields, then describe alignment, font, and color for each field in a single line text editing. For example: “ List(model.items, action: model selectItem) { item in Image(item.image) }


Some of the more compelling design tools include:

  •  Arranging components within the user interface by simply dragging controls on the canvas. Drag controls from the library and drop them on the design canvas or directly on the code.
  • The Swift compiler and runtime are fully embedded throughout Xcode, so the app is constantly being built and run. The design canvas shows the live app. Xcode can swap edited code directly in the live app with “dynamic replacement”.
  • Create one or many previews of any SwiftUI views to get sample data and configure almost anything users might see, such as fonts, localization, or Dark Mode. Previews can also display UI in any device and any orientation.


Benefits of SwiftUI over UIKit:

  • It’s easy to get started with the basics. Apple has a great set of tutorials for getting used to building UIs with SwiftUI
    and interacting with UIKit components from SwitfUI.
  • It offers Live Preview. This is a convenient and progressive way to see the results of code execution in real-time without having to build.
  • Refactoring UI is a simpler process. It’s easy to see when view code is getting long.
  • It can be mixed with UIKit using UIHostingController.
  • Developers can easily add dark mode to their apps and set it as the default theme, and users can easily enable dark mode. It just looks awesome.
  • An application will no longer crash if the @IBOutlet association with the variable isn’t updated.


Like any framework, SwiftUI also comes with some limitations:

  • Complex tasks don’t have a good example code yet. Digging into the Apple docs to figure out how to solve problems that haven’t been done can be time consuming.
  • Error messages can be misleading. Error messages from using Combine and SwiftUI are not always the most readable or the most accurate messages.

We still use UIKit or AppKit for some parts to avoid user experience loss. Swift UI can still be used in UIKit via UIViewRepresentable and UIViewControllerRepresentable. The APIs of UIHostingController is quite constricted. Updating values for and receiving events from SwiftUI in UIKit can be somewhat complex. Luckily, this can be made simpler through using Combine, and optionally, EnvironmentValues.

SwiftUI is Apple’s attempt to create declarative programming. The method is creative by leveraging the declarative programing with existing Swift features, such as generics. Although it is not mature yet, learning SwiftUI is a valuable tool because it is a solution that can better serve both users and developers.

 

Sources:
Official Apple Documentation
Swift UI vs UIKit
SwiftUI vs Interface Builder and storyboards

To learn more about innovation at Sulzer US, please visit our website.

About the Author: Oniel Rosario is an iOS Developer at Sulzer US. Sulzer US is a technology company delivering innovative cloud, big data, and AI solutions to industry-leading clients. We build and run our solutions and serve as strategic partners to our clients. We achieve success by investing in our people and products with focus on innovation and solving complex business challenges.

 

Automation Testing as Critical Tool in Software Development Life Cycle

By Vidhya Dharmalingam

 

During the software development life cycle (SDLC), quality assurance testing is critically important and impacts a seamless user experience and utilization of the product.

Beautiful design, concise code, and clear UX are only effective if QA measures are implemented prior to launch, and consistently maintained afterwards. Testing ensures that business requirements and user expectations are met with seamless and bug-free functionalities. Many tech companies are leveraging a multitude of testing methodologies and tools to achieve this.

At Sulzer US, we are passionate about agile custom software development and conduct functional and non-functional testing of our solutions. Automation Testing has become a useful and reliable method which simulates desired user actions and analyzes the application to ensure that it matches the expected behavior.


What is Automation Testing?

Automation testing is a process that involves an automation tool which simulates a user action and analyzes the application to make sure they match the expected behavior.


A Few Types of Tests That Can Be Automated Are:

  • User Interface Testing – Testing the User Interface of applications
  • Mobile Testing – Testing native, web and hybrid apps
  • API Testing – Testing SOAP and REST APIs
  • Load Testing – Testing applications under heavy load


Automation Testing Best Practices:

Come up with the test scenarios. Picking the right scenarios to automate is the key. Repetitive, critical, extensive, and complex scenarios are the ones that should be automated.

Choose the best-suited automation tool. We should use an automation tool where it is easy to create, maintain, and execute test scripts while creating good test reports, offering adequate technical support and reasonable pricing. For example, Selenium is the one of the best tools for Web UI automation and Appium for mobile automation.

Define the framework. For automation testing, a framework is the technical implementation guideline. Frameworks standardize the format and allow us to reuse the code in various scenarios.

Creating test scripts which are resistant to changes. It is highly recommended to have unique names for your element controls. It makes the automated tests resistant to change and ensures that automated test scripts work without having to make time consuming changes to the test to insure usability on a regular basis.

Don’t automate functionalities, until they are stable. If you are trying to automate the scenarios during the process of development, you will be spending more time fixing the scripts (based on the new changes) than testing the functionality and finding bugs.

Don’t automate the look and feel of the application. You should not write scripts to verify the look and feel of the application, such as layout, position, and size of the web elements, as they are likely to change quite often.


Benefits of Automation Testing:


Stability of the application. 
With Automation Testing the application can be tested more frequently, which helps us to detect and fix bugs as early as possible.

Reusability of the test scripts. Test scripts can be reused for different environments or for cross browser and cross device testing.

Increases your test coverage. With Automation Testing we can increase the depth and scope of tests.

Load testing. Automation testing allows us to execute the same test on multiple devices at the same time, which cannot be done manually with limited resources.

Improves accuracy. Automation testing is more accurate  when running the exact same tests repetitively. Manual testing is always prone to errors.

Saves time. Even though the initial implementation of test scripts takes time, in the long run, Test Scripts help to save time in executing the same test cases again & again.

 

When rolling out new features for Virtual Show Room (VSR)an application we developed and operate for a leading luxury automaker, we conduct a full regression on the application to ensure the quality of the new release. By implementing automation testing, it saves time and allows us to redeploy budgets to other critical tasks. The deployment pipeline executes Automation test scripts on all builds of the test environment. This helps us identify and address issues sooner, further ensuring quality of a release.

To maintain the stability of this product, we run automation tests every night. The testing produces a detailed test report indicating passed/failed items and identifying bugs to resolve early. The automated test scripts run outside of business hours, which speeds up the process and saves manual testing resources for other engagements.

 

Sources:

Automation Testing Tutorial
Automation Best Practices
Automation Testing Overview

To learn more about innovation at Sulzer US, please visit our website.

About the Author: Vidhya Dharmalingam is a Software Quality Engineer at Sulzer US. Sulzer US is technology company delivering innovative cloud, big data, and AI solutions to industry-leading clients. We build and run our solutions and serve as strategic partners to our clients. We achieve success by investing in our people and products with focus on innovation and solving complex business challenges.

Sulzer US welcomes Olga Zimonjic Haygood as Managing Director

Sulzer US expands its territory to the DC Metro area with Olga Zimonjic Haygood as Managing Director

Sulzer US, LLC is pleased to announce its recent hire of Olga Zimonjic Haygood, who has joined the team as Managing Director of its new, Washington D.C. Metro area office. As Managing Director, Olga will lead the organization’s expansion into new territory as it continues to focus on delivering custom software solutions.

Olga brings abundant energy and enthusiasm to Sulzer US, as well as a wealth of experience managing and growing client relationships and teams. Most recently, Olga was the Head of Client Services for Wunderman Thompson Employ (formerly J Walter Thompson INSIDE), where she led global client engagements for notable brands and managed a national cross-functional team in delivering bespoke brand and recruitment marketing solutions. Throughout her career, Olga has built purpose-driven teams and partnered with clients in developing measurable programs that moved their organizations forward. Notably, Olga led a rebrand for General Motors to attract tech talent in support of expanded mobility services. Most recently, she worked with Northrop Grumman and agency partners, on research, strategy and launch of a new brand. Previous experiences include roles in public affairs and public relations.

“We’re very happy that we can now provide better service in the D.C. area and have a great new partner on our journey,” said Julian Offermann, President at Sulzer US. “Olga is going to play a big part in shaping the company’s future.”

Sulzer US places a great emphasis on creating a strong company culture as it empowers employees to deliver great work. Upon meeting Olga, the team knew it was an unequivocal match.

“At J Walter Thompson INSIDE, we believed that people join cultures and not companies and conducted research to prove it,” Olga noted. “I have always been passionate about fostering a culture where people are excited to work, feel supported daily, and are given opportunities to learn and collaborate. So, having learned that this is in the very fabric of Sulzer US, I thought that this opportunity would be a great match and that, together we could achieve great things in the future.”

OIga will drive not only Sulzer’s expansion to a new region, but she will also facilitate the organization’s growth into new industries beyond automotive and mobility. Olga continued: “Technology solutions are industry-agnostic and in demand for any customer-facing business.  My client experience has taught me that most companies rely on technology to improve customer experience and drive growth.  Sulzer’s innovative technology solutions do just that, and are relevant to any company grappling with big data, seeking insights, and looking to develop cloud-based solutions.”  

Farewell 2019

We’ve celebrated holidays, birthdays, weddings, new babies, new homes, and much more!
We made our own tie-dyed clothes for Pride Month and raised money at an event for the Human Rights Campaign. Custom planters and flowers started sprouting in the middle of spring, and by the end of the summer, it was time to host our annual Sulzer Summer Picnic. It’s always great fun with the team to eat, drink, and play games! You can never forget the games in the office, as well. Foosball is a Sulzer classic!
This year, we also accepted the Sulzer GmbH Hans Sulzer Award for “We Are Open to New Ideas,” which is given to employees who exemplify qualities in the workplace that are reflective of the Sulzer company values. Thank you to our international colleagues for this recognition.

And where would we be without all the treats!! Donuts for no reason? Yes, please. Birthday cakes made of ice cream sandwiches?! Count me in for leftovers, too.

We wish everyone a safe and happy New Year! See you in 2020!

Escape Room

We saved the world, and we escaped!!

Our last team outing was to an Escape Room, where we split into teams and raced to escape! Everyone demonstrated great communication and team work, and both teams made it out in under an hour!

Summerfest 2019

Last week, we celebrated the end of the summer with our annual Summerfest!
We had a great time with our colleagues, friends, and family as we grilled food and played volleyball, cornhole, giant Jenga, and more! We also had our first Sulzies, the awards inspired by the Dundies from the show “The Office.” Thank you to all those who helped make Summerfest 2019 a great success and for continuing to be *stars* of the Sulzer Squad!

 

 

Hans Sulzer Award

We are honored to accept a Sulzer GmbH Hans Sulzer Award!

 

Sulzer GmbH, our headquarters in Germany, presents awards each year in six categories to employees who exemplify qualities in the workplace that are reflective of the Sulzer company values. One of these categories is “We are Always Open to New Ideas.” On Thursday, August 8th, Sulzer GmbH announced that Sulzer US as an entire team was nominated for and won this category! We gathered in our common area to live stream the ceremony with our German colleagues.

 

 

“Dear Sulzer US,
You have embodied our common core value of being open to new things. You are setting great examples with your collaborative approach to delivering best-in-class solutions alongside your German colleagues. Aside from the fact that you have expanded the Sulzer services to a new continent, you have never stopped bringing innovations back to the organization, while communicating mobile app solutions in iOS and Android, as well as 3D configurators. You always have an open hand to the German colleagues, even if it is showing your expertise at 4:00 AM for meetings, presentations, or pitches. Despite the distance to the headquarters in Germany, you still manage to live with the Sulzer spirit every day. Thank you very much for the courage and the urge to explore new ideas and innovations.”

 

Previously named “Sommerfest Awards,” the ceremony this year was renamed and dedicated to the late President of Sulzer GmbH, Hans Sulzer. We accept this reward in his honor and will continue to live up to the highest standards that all of the Sulzer company represents.