@timarney

Senior Lead Software Developer @CDS_GC 🇨🇦 Canadian Digital Service

 Canada
github.com/timarney
Joined November 2008
  • Tweets4.3K
  • Following1.6K
  • Followers1.1K
1KMedia
CSS Trick 📏 Auto resizing textarea and input with one line 🔥 textarea, input { field-sizing: content; } Read all about it in Steph's article 👇 It's landing soon! xitter.cf/jh3yy/status/173…
Stephanie 🔮 Web Witch ( 🦋 @seaotta.dev)@seaotta23 Jan 2024
📚New on the blog: Better form UX with the CSS property `field-sizing` blog.stephaniestimac.com/pos…

Better form UX with the CSS property `field-sizing`

A look at the `field-sizing` CSS property and how it could improve web form user experience.

blog.stephaniestimac.com
11
133
8
1,032
96,669
Thanks to `flushSync`, you can finally manage focus in React again 🙌 (but I will always love this.setState)
82
166
47
1,783
599,082
tim arney retweeted
Wes Bos
@wesbos25 Aug 2023
🔥 JavaScript Sets are about to become a lot more useful with these 7 new methods: .difference() .intersection() .symmetricDifference() .union() .isSubsetOf() .isSupersetOf() .isDisjointFrom()
81
794
63
5,202
558,526
I'm compiling a list of "recipes" for block developers for a new workshop I'm calling The Block Developers Cookbook. I have a number already but am always looking for more. Please share them as issues on my repo - kdta.io/ieQF3
2
10
1
39
2,591
Tip: @ChromeDevTools can now override the content of Fetch/XHR requests! Great for mocking APIs without waiting on backend changes! This and lots more in Chrome 117: bit.ly/wnd117
53
654
57
2,889
306,271
Did you know that React considers APIs like cloneElement, React.Children, and createElement to be legacy? They aren’t recommended for newly written code, and the docs have some alternative suggestions. Be careful using patterns that rely on these. react.dev/reference/react/le…

Legacy React APIs – React

The library for web and native user interfaces

react.dev
7
19
1
241
57,824
> 'FuzzyHighlighter' cannot be used as a JSX component. @mattpocockuk curious if you could explain what's going on with this React component type error. codesandbox.io/p/sandbox/mud…
1
202
Thinking it's the FuzzyHighlighter type for render render(): {} | null | undefined; should be ? render(): ReactNode; With TS can I override on my end?
88
Most sandboxes in CodeSandbox are stored in a Postgres database. 40M+ sandboxes and 400M+ files stored in Postgres, and we still have performant load times. When going with Postgres, I thought "this is the first thing we'll have to replace". Still didn't happen after 6 years 🤷
Lawrence Jones
@lawrjones8 Jun 2023
In 2020 Figma started hitting growing pains with their single managed Postgres database. That means they managed to grow to a $2B company on a single mged instance. I bet at they hired engineers around this time who grumbled about not picking a more ‘scalable’ tech.
12
141
10
1,433
368,394
tim arney retweeted
Andrew Clark
@acdlite4 May 2023
A 🤯 feature of Server Actions is they support progressive enhancement: a server function passed to a <form>'s action prop is interactive before any JS has loaded. No hydration required. But you did you know you can define actions on the client, too? nextjs.org/blog/next-13-4#se…

Next.js 13.4

Next.js 13.4 moves App Router to stable, Turbopack to beta, and introduces experimental support for Server Actions.

nextjs.org
4
37
3
173
37,028
React.ComponentProps is such a lifesaver, and more folks need to know about it.
15
194
7
1,339
106,611
DX in @liveblocks is absolutely mad. See this React hook? It grabs a real-time object named `person`. Every time the object changes, this hook automatically updates with the new value. No back end, no setting up WebSockets 🤯 it just works.
// { name: "Rachel", age: 30 } const person = useStorage((root) => root.person);

ALT // { name: "Rachel", age: 30 } const person = useStorage((root) => root.person);

12
32
7
552
188,075
> Three JavaScript Operators You Should, But Maybe Don't, Know 👀 ??= ||= &&= youtube.com/shorts/gmkdMTFg_…
130
If you ever run into which type do I use... ReactNode, ReactElement, JSX.Element etc... Found this - which helps uncover the mystery Understanding React's types youtube.com/watch?v=u_zoRJh9… xitter.cf/mattpocockuk/status/16…
Matt Pocock
@mattpocockuk16 Mar 2023
React's JSX typings are a little bit broken. TypeScript lets you render all the right stuff _inside_ components. But it's much more restrictive on what you can return from your components. Here's a handy diagram.
Diagram showing the different React types that can be rendered inside/returned from components.

ALT Diagram showing the different React types that can be rendered inside/returned from components.

4
32
4,418
Damn, we just found a solution to a really hard accessibility problem, I don't think this has been done before: How do you make this component fully keyboard accessible if both icon and px are buttons and this component is part of a list, so I don't want to tab through each 3x?
23
1
112
54,088
useRef is pretty weird in TypeScript. Here's a couple of gotchas that I always run into:
30
107
6
1,154
247,727
tim arney retweeted
Iva Kop@iva_kop23 Oct 2022
New article! 🚀 Do you want to prevent empty re-renders in React child components without sacrificing the readability or maintainability of your codebase? Forget about `memo` and `PureComponent`! Do this instead 👇 whereisthemouse.com/react-co…
3
18
1
68
Load more