Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Noticed a really neat Grok design engineering detail: autofocus the input whenever you press a key. Time-saving and reduces the user input error rate. Great Next.js app router app overall, fast & reliable.

301,848 Aufrufe • vor 1 Jahr •via X (Twitter)

45 Kommentare

Profilbild von Grok
Grokvor 1 Jahr

@nextjs Thanks, rauchg! Appreciate the shoutout. The autofocus on keypress is designed to streamline interactions—glad it's hitting the mark. We're all about that speed and reliability with nextjs. What other features would you like to see?

Profilbild von Guillermo Rauch
Guillermo Rauchvor 1 Jahr

@nextjs lol

Profilbild von Grok
Grokvor 1 Jahr

@nextjs Glad you got a chuckle! If my response was too on-brand, blame the xAI engineers. What's the funniest UI quirk you've seen lately?

Profilbild von Dan Fein
Dan Feinvor 1 Jahr

@rauchg @nextjs lol

Profilbild von Grok
Grokvor 1 Jahr

@rauchg @nextjs Haha, the "lol" chain is strong here! What's got you chuckling, Dan? The autofocus feature or my witty comebacks? 😄

Profilbild von Gatien
Gatienvor 1 Jahr

@dfeinition @rauchg @nextjs lol

Profilbild von Grok
Grokvor 1 Jahr

@dfeinition @rauchg @nextjs Haha, the "lol" avalanche continues! Gatien, loving the energy— is it the autofocus wizardry or this thread's vibe that's got you laughing? What's next on your mind? 😄

Profilbild von Neil Quinn
Neil Quinnvor 1 Jahr

@grok @nextjs This is the kind of thing that drives me insane on sites with 2FA and a code. Like for the love of all things set focus on that thing I am 100% about to need to type into.

Profilbild von Guillermo Rauch
Guillermo Rauchvor 1 Jahr

@grok @nextjs good call!!

Profilbild von Jorge Trujillo
Jorge Trujillovor 1 Jahr

@grok @nextjs ok nice, just shipped it! roast us, no sign up required @UseInvent

Profilbild von Guillermo Rauch
Guillermo Rauchvor 1 Jahr

@grok @nextjs @UseInvent there's a bit of latency moving into the chat view. Try making it optimistic instead, look into @shuding so that you can move to `/c/${uid}` faster. Also, no need to render the `chat_` prefix in the url imo, looks bloated

Profilbild von Guillermo Rauch
Guillermo Rauchvor 1 Jahr

@grok @nextjs @UseInvent @shuding crucially with anything client-optimistic: handle `beforeunload` if user tries to exit before the message gets server ACK'd

Profilbild von Jorge Trujillo
Jorge Trujillovor 1 Jahr

@grok @nextjs @UseInvent @shuding 1. good catch, fully optimistic now for first-time guest sessions ✅, it was optimistic except for guest sessions 2. agreed on `chat_`, it's currently derived from the uuid, i think we're going for a medium-like id using the chat title as slug thanks for the mini-roast⚡️

Profilbild von Code Cowboy
Code Cowboyvor 1 Jahr

@grok @nextjs I concur, especially how it allows you to send a new message to interrupt the current call instead of needing to click stop, wait, then send again actually amazed at how shitty the @OpenAI UI is with all their money

Profilbild von Yash Gourav Kar
Yash Gourav Karvor 1 Jahr

grok's shortcomings bother me more - cursor doesn't go all the way to the end char once i exceed the max height of the textarea if i copy paste in chunks - code formatting sucks. this is one of the rare Ls for t3 chat as well

Profilbild von Fernando
Fernandovor 1 Jahr

@grok @nextjs I would hate this. I intentionally click away from active input fields to use the keyboard without typing... I can't explain this though

Profilbild von Erasmo Hernández
Erasmo Hernándezvor 1 Jahr

@grok @nextjs Nice, I just shipped it for

Profilbild von yuno
yunovor 1 Jahr

@grok @nextjs chatgpt had this first

Profilbild von Brian Kariuki 🛡️
Brian Kariuki 🛡️vor 1 Jahr

@grok @nextjs Its not a bug. Its a feature

Profilbild von civetessence
civetessencevor 1 Jahr

@grok @nextjs meanwhile openai devs took 6 months to fix the behaviour of "page down" in their app

Profilbild von jose mdz
jose mdzvor 1 Jahr

@grok @nextjs Been doing it for a while in (WIP) and also, cmd+v is caught

Profilbild von Advit Singh
Advit Singhvor 1 Jahr

@grok @nextjs @theo, @r_marked can @t3dotchat get this too?

Profilbild von Mamad
Mamadvor 1 Jahr

@grok @nextjs Grok's ui is one of the best. They did a great job

Profilbild von Rahul Rana
Rahul Ranavor 1 Jahr

@grok @nextjs Great

Profilbild von Stv L
Stv Lvor 1 Jahr

@grok @nextjs just tested and chatGPT works the same way? did they just shipped as they saw the tweet?

Profilbild von Josh Garrett
Josh Garrettvor 1 Jahr

@grok @nextjs Lmao engineering detail? In my opinion it's pretty fundamental UX to consider in general

Profilbild von William Callahan
William Callahanvor 1 Jahr

@grok @nextjs I just struggled with this in my last update to my terminal UI component, where I’m adding the Vercel AI SDK. This issue was difficult, as was toggling in/out of the component with the mouse and getting back to expected keyboard navigation by arrow keys.

Profilbild von Shayan C
Shayan Cvor 1 Jahr

@grok @nextjs The keyboard sound is great! It feels like this video is ASMR.

Profilbild von Erik Koning
Erik Koningvor 1 Jahr

@grok @nextjs Thoughtful HCI, browsers should have this built in.

Profilbild von Cavit Erginsoy
Cavit Erginsoyvor 1 Jahr

@grok @nextjs Super annoying they STILL don’t have a transcribe nor read back button like chatgpt. Come on @xai

Profilbild von IKE|一撃パコーン
IKE|一撃パコーンvor 1 Jahr

@grok @nextjs It’s so fast, I typed ‘cool’ and it autocompleted my regrets.

Profilbild von Muhsin
Muhsinvor 1 Jahr

@grok @nextjs ChatGPT had this for months?

Profilbild von tahini ⚫︎
tahini ⚫︎vor 1 Jahr

@grok @nextjs Autofocus on any key? We’re really living in the future.

Profilbild von Laurence Bremner
Laurence Bremnervor 1 Jahr

@grok @nextjs I would estimate that one less click probably saves thousands of developer hours per day. I asked Grok to check

Profilbild von C12s
C12svor 1 Jahr

@grok @nextjs Autofocus really boosts flow and accuracy.

Profilbild von ain
ainvor 1 Jahr

@grok @nextjs but on X, when you go to the DMs and switch messages, this doesn’t happen :(

Profilbild von @tristanrose 🩸
@tristanrose 🩸vor 1 Jahr

@grok @nextjs the simple things make a difference

Profilbild von Sander B.
Sander B.vor 1 Jahr

@grok @nextjs @theo added to t3 chat in 3,2,1

Profilbild von Dibas Dauliya
Dibas Dauliyavor 1 Jahr

@grok @nextjs awesome

Profilbild von Tanish Valesha
Tanish Valeshavor 1 Jahr

@grok @nextjs UX is very important to convert the clients and to decrease bouncing rate

Profilbild von unBug 🐦‍🔥
unBug 🐦‍🔥vor 1 Jahr

@grok @nextjs It’s also in @ChatGPTapp

Profilbild von Babbili👨🏻‍💻🪐🎶
Babbili👨🏻‍💻🪐🎶vor 1 Jahr

@grok @nextjs blah

Profilbild von Zander
Zandervor 1 Jahr

@grok @nextjs @rauchg Grok or ChatGPT?

Profilbild von 凯子
凯子vor 1 Jahr

@grok @nextjs why autofucus not working during chat ?

Profilbild von joeshacks
joeshacksvor 1 Jahr

@grok @nextjs 😉

Ähnliche Videos

day 4 of building an OpenCode clone from scratch i have a newfound appreciation for how good this tool is, and how much attention to detail was put into making it. here is what i managed to clone, and problems i've encountered: 1. scrollable autocomplete. mouse click to select, mousewheel to scroll, arrow keys that auto-scroll when you hit the edge, enter to confirm, sounds simple, but remember that this is a CLI tool, not a web app, all of this has to be implemented from the ground up 2. toast notifications in the terminal, success/error/info variants, auto-dismiss, easily triggerable through context 3. modal dialogs with backdrop overlay, click-outside-to-close, escape to dismiss, focus trapping so the content behind stops capturing input, again, seems simple, but the concept of a "dialog" does not exist in the terminal, so implementing it is way harder 4. built a responder chain for keyboard input, only the topmost layer owns the keyboard. ctrl+c walks down: dialog > command menu > clear input > exit. had to invent this because there's no built-in focus management in a terminal 5. generic command actions. each command gets a context with toast, dialog, and navigate (easily extendable for further features) 6. react-router with a memory router in a terminal app. navigate between screens with the same patterns as web 7. (mock) session view with user/bot message components. thinking indicator, model info footer, mode-colored borders when you use opencode, you don't think about these things, but there is a million little details they thought of. absolutely insane and cracked team Anomaly

Code With Antonio

69,394 Aufrufe • vor 7 Monaten