6 posts tagged with "open source software"

A view of the Miami Downtown Canals

This post explains how Windows High Contrast mode is exposed through CSS forced colors, the gaps we found in Material UI’s component support, the implementation approaches we evaluated, and why we ultimately chose an opt-in theme enhancer.

The problem​

Before Material UI v9.1.0, components generally behaved well with forced colors, but our audit identified several missing states.

The fixes fall into a few groups:

• Form states: FilledInput, Input, OutlinedInput, FormLabel, FormHelperText, FormControlLabel, placeholders, and disabled native select icons.
• Selection and navigation states: Autocomplete, MenuItem, ListItemButton, and ListItemIcon.
• Disabled controls: Checkbox, Radio, Slider, and Switch.
• Feedback, focus, and overlays: LinearProgress, ButtonBase, Tooltip, AccordionSummary, and ToggleButton.

If these cases are not visible in forced colors mode, users can lose access to state information: disabled, selected, focused, invalid, or in progress. The tricky part was not finding a way to style them.

Material UI has many styling entry points. The real challenge was choosing the right level of the system. The options we considered are documented in this post, as well as the solution we chose to fix the issues with minimal adoption effort and upgrade risk.

The following demo shows these affected states side by side.

Open the Material UI forced-colors demo in CodeSandbox.

A collection of limestone-karst islands at Maya Bay, Thailand.

Sweet! But things are going to become more complex in a bit.

The Roving Tabindex pattern has been around for some time. It's a very useful pattern when it comes to collections of items that are actionable. Without it, each item in the collection is a tab stop, and if the collection is quite large, maybe more than 5 item large, keyboard users might experience frustration moving pass it. Also, it might be easier for keyboard users to just use arrow keys to move between items instead of using Tab or Shift Tab. For me, at least, it's faster and way more intuitive.

The Praetorian Fountain in Palermo.

All stages in the software development lifecycle are important, but some stages are more important than others.

There are many important parts of the software development lifecycle. It's important to understand a business need, otherwise your feature won't be useful. It's important is to devise its requirements, create the designs, split the work and estimate it. Then comes the implementation, testing, delivering it to production and measuring its performance and usage through telemetry.

All stages in the software development lifecycle are important, but some some stages are more important than others. Is it true? Hard to say, maybe it depenends case by case. Are you a startup? A big tech company? Is there a similar product already on the market? There are many aspects to consider when you're prioritising.

We're not going to debate that here. Instead, I would like to advocate the importance of delivering the feature. If it's not being used by costumers, nothing else matters.

Hilly Landscape in the Village of Şimon.

...there's a lot going on with the attributes and the handlers and the ref and the other properties...

Let's assume that we have the following scenario. We have a custom hook that returns getter props, and we want to make sure that those getter props are called correctly. But, first things first:

Praia da Arrifana, Portugal.

I don't always do TDD, but when I do, I write about it.

From the GitHub issue to the next library update on npm, we are going to push a feature request via the magic of Test Driven Development. It's easier than you think, and next time when the interviewer asks if you've heard about TDD, you will smile, say yes, then test drive their Leetcode puzzle and bring home the biggest offer they could make. TDD is also great in day-to-day work when adding features for your products, fixing issues and solving open source tickets, which is what we're going to do here.

The Morgan Library Museum in New York. Photo by Silviu Alexandru Avram

TypeScript is a great alternative to JavaScript if you feel the need for that extra safety net of strong typing. Most of the tyme, TS is pretty straightforward, as we are familiar with strong type languages like Java. However, when we do require a tiny bit of dynamic type magic, things can stop being straightforward, and we can end up being very creative. But when we actually get the job done and even improve on the result, we realise how strong TS can be, and we are super thankful for its existence.

In this article, we are going to touch concepts like TypeScript as a language in general, but also Generics and some TS utilities that are available globally. Solving the problem below helped me understand TS better, and I hope it helps you as well. Let's begin.