Cathal Mac Donnacha

Cathal Mac Donnacha

@cathalmacdonnacha.com

Principal Frontend Engineer @wpengine. Follow along for frontend tips on React โš›๏ธ Testing ๐Ÿงช UI/UX ๐Ÿ–ฅ. My blog โœ๏ธ http://cathalmacdonnacha.com

81 followers168 following125 posts

I tend to use pagination when users need shareable links or to give a sense of how much data is left (e.g. โ€œpage 3 of 10 in blue t-shirtsโ€). Use virtual scroll for endless browsing (e.g. social feeds). ๐Ÿ“‘ Pagination = easy to share & measure. ๐Ÿ“œ Virtual scroll = easy to scroll. #frontend #ux #webdev

Before I begin any refactoring, I always have a look at the tests first to make sure they're up to scratch. This way I can be fairly confident that I won't break anything in the process. Emphasis on "fairly". ๐Ÿ˜‚ #software #programming #frontend

It's important to have a healthy mindset towards feedback or setbacks. View them as opportunities to improve yourself. Focus on being constructive and solutions-focused rather than emotions-driven. #software #programming

View full thread

2. Loss of institutional memory: If an engineer responsible for a flag leaves the company, they take the institutional memory of the flag and its feature with them. As time passes, no one knows what the flag does, why it was created, or whether the flag could be retired.

1. Code readability: With hundreds of if-else statements throughout the code, many that were added months or even years ago, the code gets less readable and testable, which slows down the engineering teamโ€™s development cadence.

Why I don't like Snapshot Testing ๐Ÿ‘‡ - Takes a lot of effort to understand if the failure is expected. - Hard to evaluate if you're even testing your component correctly (compared to specific assertions). - Often blindly updated without checking if it was a legitimate failure.

Introducing new tools or patterns? โœ… Focus on persuading a few key advocates rather than convincing absolutely everyone. A few believers can spark wider adoption far more effectively. #software #webdev #frontend

๐Ÿ”ฅ For actions that require sign in, avoid having a user perform the same action twice. 1. User clicks the like button on a comment. 2. User is asked to sign in. 3. User signs in successfully. โœ… Result: Comment should be displayed again and liked. #ux #webdev #frontend

Cathal Mac Donnacha reposted

Iโ€™ve found the fewer environments a software team has the better. Every additional environment adds cost, management overhead, out of sync risk, and delays deployment. My ideal? Just two environments - Dev and prod. Merge to main auto deploys. Feature flag as needed. ๐Ÿ”ฅ

๐ŸŽ„Have some fun with your mock/test data. Instead of "TestUser1", "TestUser2", pick some characters from your favourite TV shows. Omar Little and Saul Goodman often make an appearance in my tests. ๐Ÿ˜ #frontend #software #webdev

Cathal Mac Donnacha reposted

Next.js and Remix's focus on SSR has added cruft and complexity to the core React use case of building interactive apps. @tanstack.com is the antidote to this: an opinionated framework that actually helps you get stuff done rather than forcing you to optimise for someone else's e-commerce use case.

Tanner Linsley@tannerlinsley.com

For a long time I slightly resented Gatsby for the added pressure it gave me to stop building React Static, but I miss it now. The React ecosystem is overflowing with homogenous thinking lately and Gatsbyโ€™s decline didnโ€™t help that. ๐Ÿซก Gatsby and @kyle.bricolage.io

Using TanStack Query's 'Optimistic Updates' pattern is one of the best ways to improve the UX. ๐Ÿš€ Just make sure it's the right fit: โœ… Great for scenarios with high success likelihood (e.g. likes, toggles). โŒ Avoid for critical, high-risk actions or long flows (e.g. payments, irreversible changes).

Ever wondered when you should adopt a new CSS feature? Read this ๐Ÿ‘‡

Josh W. Comeau@joshwcomeau.com

๐ŸŒ  So letโ€™s say you want to use a modern CSS feature like container queries. According to caniuse, the feature is at 93% support. Is that good enough? How do we evaluate this number? I dig into this question in my brand-new just-published blog post, โ€œA Framework for Evaluating Browser Supportโ€. ๐ŸŽ‰

I'm surprised to see how often "data-testid" is still used. I find it much more beneficial to avoid implementation details like that, and to focus on testing user interactions and elements users can actually see on screen. #frontend #webdev #testing

One thing I hear often is "how do we test our app in all languages/ translations?" โœ… Recommendation: Just test with the default language. It's a good idea to test that changing a language does actually apply translations, but outside of that I don't think it's worth the time investment. #webdev

Want to improve the UX on your frontend? Don't make users think. Keep interfaces simple, intuitive, and free of unnecessary complexity. Great UX is about making the user's journey effortless and enjoyable. #frontend #userexperience #uxdesign #webdev

Before I begin any refactoring in a new area, I always have a look at the tests first to make sure they're up to scratch. This way I can be fairly confident that I won't break anything in the process. Emphasis on "fairly". ๐Ÿ˜‚ #software #programming #frontend #webdev