Lead frontend eng, https://nitter.cf/t.co/exGDNqmh9Y @coopuk @coopdigital. Interested in the web (FE, #a11y, perf), environment, bikes (everyday/utility) and science.
Manchester, UK
Joined May 2009
- Tweets6.5K
- Following2.5K
- Followers1.1K
- Likes16.8K
Phil Wolstenholme retweeted
We instituted an official AI Writing Policy at @Clay.
Massive thanks to @sophiebits on our engineering team who wrote this.
Originally this was just for eng, but other teams found it so helpful we expanded it company-wide.
Here are the four guiding principles:
1. You must stand behind every idea and sentence
It is your responsibility to make sure that the entire document is representative of your own thoughts before you share it.
2. Writing is thinking
Spending time on the writing process teaches you more about your topic. If you circumvent this process, you will walk away with a poorer understanding of the subject matter.
3. More time should be spent writing a document than consuming it
If you generate a document from a short prompt then ask your readers to go through the longer output, you are disrespecting their time. They can talk to ChatGPT themselves if they want to.
4. Longer is not better
AI makes it easy to generate long docs, and it loves padding them with sentences that say nothing. If you're producing docs from a short prompt, consider just sharing the prompt.
You can read (and borrow) the full policy below. Hopefully we all communicate a bit more clearly now :)
The design is very LLM and the writing has tinges of it too, but this is a cool idea. Scroll through a web request, from a laptop trackpad sensing a change in conductivity to the laptop's browser painting a UI change once React has handled the response: 200ms.thenodebook.com
Phil Wolstenholme retweeted
I absolutely hate how I'm getting to be suspicious of ANY reply to my posts here, especially ones that pose a question, as they are so often from bot accounts
If you're running a bot like this please stop, you're making the internet a worse place for everyone
Phil Wolstenholme retweeted
A short story about deferring tech choices to thought leaders:
Early days at Disqus (~2010-2012), we made several frontend choices based largely on what thought leaders were promoting at the time.
One example: there was a big movement toward "micro-frameworks." Instead of larger, well-tested libraries like jQuery, you'd stitch together tiny interoperable micro libraries (Ender.js was one). Disqus was an embeddable JavaScript app, so file size mattered. It fit our use case, so we went with it.
Then it went live, and we were serving millions of users. The reality of those choices became clear. Micro libraries meant that instead of one good semi-bloated library, you ran 6-7 smaller, less-tested, crappier ones. We burned a ton of cycles fixing bugs and covering corner cases when we could've been shipping product.
We made a few choices like this.
At conferences, I'd track down those same thought leaders and ask for advice. "I'm hitting problem X, Y, Z. How did you solve this?"
That's when I learned my lesson: they rarely had answers, because they'd never reached our scale. Their energy went into promoting new stuff, not running it.
You should know this has never stopped. It's happening right now with AI. It'll happen again with whatever comes next.
Do your own homework. Test a lot. Don't just go with what somebody tells you.
Phil Wolstenholme retweeted
📣 Prop For That
An a-la-carte #JS library for #CSS that writes meaningful realtime CSS variables to an element:
- value of an input
- pointer position
- size of scrollbar(s)
- colors in an image/video
- element's visibility
- tons more…
now there's a prop for that 🙂
nerdy.dev/prop-for-that
Phil Wolstenholme retweeted
the web has been quiet for a while.
for the past few months i've been building something to fix that. declarative audio for the web. describe a sound as plain data, play it with one call.
→ audio.raphaelsalaja.com/
Phil Wolstenholme retweeted
Did you know that the .png format was created out of spite? Or that .jpeg just discards like half of the colours in your image because you won't notice?
To celebrate last week's launch, I published a chapter on image compression.
makingsoftware.com/chapters/…
Phil Wolstenholme retweeted
Design is full of codewords. Knowing them changes what you can ask for, and what you can get back, whether you're working with devs, or an AI.
“tint this neutral color”, “fix this widow”, “nudge it to the optical center”
I wrote them down: index.how/to/articulate
Phil Wolstenholme retweeted
Wrote a post on building a reusable NavLink in Next.js, taking inspiration from React Router.
Covers:
• Render props for 𝚒𝚜𝙰𝚌𝚝𝚒𝚟𝚎 and 𝚒𝚜𝙿𝚎𝚗𝚍𝚒𝚗𝚐
• 𝚞𝚜𝚎𝙿𝚊𝚝𝚑𝚗𝚊𝚖𝚎() vs 𝚞𝚜𝚎𝚂𝚎𝚕𝚎𝚌𝚝𝚎𝚍𝙻𝚊𝚢𝚘𝚞𝚝𝚂𝚎𝚐𝚖𝚎𝚗𝚝𝚜()
• Flicker-free first paint
• Built-in Suspense for Cache Components
aurorascharff.no/posts/build…
Phil Wolstenholme retweeted
I'm excited to announce v1.0.0 of my ESLint plugin to catch unnecessary React effects! Check out the r/reactjs post for details: reddit.com/r/reactjs/comment…
#reactjs #devtools #webdev
@DavidKPiano hi 👋 I'm thinking of potentially introducing xstate to our codebase at work for an upcoming bit of work. Other than the docs, are there any (free) resources that you'd recommend for newcomers to xstate v5?
I've seen had a look at egghead.io/courses/introduct… and also Kyle's blog posts, but I think they're a version or two behind v5 and I was wondering if you knew of anything more recent?
Phil Wolstenholme retweeted
ummm you can create some obnoxiously cool focus rings with the new HTML-in-Canvas API
Gave this (Impeccable) a test run on a vibe coded app I'm working on (syntax-quiz.netlify.app) and it's great! It caught some CSS inconsistency issues and added some nice, subtle animations and also managed to polish the UI text a bit and add consistency there too.
Impeccable v1.1 is out. Design fluency for every AI harness.
New:
- all commands are now agent skills
- support for Antigravity, VS Code
- simplify -> distill (to not conflict w/ CC's new built-ins)
- universal install
impeccable.style gives you the language to make AI-generated frontends suck less.
Really nice write-up from @emilkowalski on building Sonner (a React toast component): emilkowal.ski/ui/building-a-…
Phil Wolstenholme retweeted
You've spent more hours than you'd admit getting a row of logos to look right?
Same width? Square logos tower. Same height? Wide ones dominate. Manual tweaking? And then marketing sends one more to put in there.
Our colleague Rosti fixed it. Not with AI, but with grade-school math: (width / height) ** 0.5 * baseSize
New open-source React library:
npm install react-logo-soup
And here's the science behind it (and even more maths) 🧪
sanity.io/blog/the-logo-soup…
![<LogoSoup logos={["/logo1.svg", "/logo2.svg"]} baseSize={48} gap={16} scaleFactor={0.5} densityAware={true} densityFactor={0.5} alignBy="bounds" | "visual-center" | "visual-center-x" | "visual-center-y" cropToContent={false} // Custom image renderer (e.g. Next.js Image) renderImage={(props) => (<CustomImageComponent ...props /> />](https://pbs.twimg.com/media/HAaj2staIAAquuP.jpg?name=orig)
ALT <LogoSoup logos={["/logo1.svg", "/logo2.svg"]} baseSize={48} gap={16} scaleFactor={0.5} densityAware={true} densityFactor={0.5} alignBy="bounds" | "visual-center" | "visual-center-x" | "visual-center-y" cropToContent={false} // Custom image renderer (e.g. Next.js Image) renderImage={(props) => (<CustomImageComponent ...props /> />
