惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Microsoft Security Blog
Microsoft Security Blog
WordPress大学
WordPress大学
Stack Overflow Blog
Stack Overflow Blog
D
DataBreaches.Net
罗磊的独立博客
博客园 - 司徒正美
Last Week in AI
Last Week in AI
The Cloudflare Blog
大猫的无限游戏
大猫的无限游戏
Microsoft Azure Blog
Microsoft Azure Blog
B
Blog RSS Feed
The GitHub Blog
The GitHub Blog
宝玉的分享
宝玉的分享
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
小众软件
小众软件
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Hugging Face - Blog
Hugging Face - Blog
B
Blog
博客园 - 【当耐特】
V
V2EX
Apple Machine Learning Research
Apple Machine Learning Research
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
酷 壳 – CoolShell
酷 壳 – CoolShell

Ben Frain

Well done AI, that’s the end of the honest boxes The Beginnings, by Rudyard Kipling So, you want a React modal that uses the <dialog> element and transitions in AND out? Scroll indicators on tables with background colours using animation-timeline Review: SoundPEATS Clip1 Open ear clip-on headphones VS Code – highlight just the active indent guide Review: MoErgo Go60, a split ergonomic and fully programmable keyboard Review: Kinesis mWave mechanical ergonomic and programmable keyboard iOS26 Safari theme-color/tab-tinting with fixed position elements is a mess New Book: Responsive Web Design with HTML5 and CSS, 5th Edition Use @supports with a proxy feature/value for features you can’t test for (@starting-style) First adventures in View Transitions Review: Benq Screenbar Pro and Halo lightbars. The kit you never knew you needed! Center items in a container, and make then left aligned when they overflow A single element CSS donut timer/countdown timer, that can sit on any background Review: Open Ear Headphones – Bose Open Ultra v Huawei FreeClip Managing multiple versions of node, without NVM or additional tools Review: Keychron Q14 Max Alice 96 Key mechanical keyboard NEW VIDEO COURSE: Responsive Web Design with HTML5 and CSS Is CSS Grid really slower than Flexbox? Review: Advantage360 Pro Signature Edition 2024 mechanical ergonomic keyboard More Keys or Fewer Keys for mechanical keyboards Yes! You can use position: sticky and overflow together Neovim – how to do project-wide find and replace? Review: Keyboardio Model 100, split, wooden, mechanical keyboard Struggling to learn SwiftUI How to create rounded gradient borders with any background in CSS How to get equal size icons in the cmp completion menu of Neovim with Kitty terminal Review: Dygma Defy, split, mechanical, programmable ergonomic keyboard What’s the best way to reset WAAPI chained animations?
In search of the perfect autocomplete for CSS
Ben Frain · 2024-11-05 · via Ben Frain

Forget about any of your AI nonsense, I’m talking good ol’ autocomplete.

CSS differs than most other frontend languages/dialects I write in that its declarative nature lends itself to strumming out a bunch of property/value pairs that an autocomplete can often do the heavy lifting for. 3-4 keystrokes gets you the equivalent of 20-30 characters. Ben, what are you talking about? Let me show you with the editor most people these days are likely familiar with, VSCode:

This mv4 shows me typing out a basic rule. Notice how ‘width’ gets quickly completed, and pressing enter jumps me to the property, if that is easily ‘completable’ I can just hit enter again, or I can type out what I want, and it adds the semi-colon at the end to complete the property value pair (a declaration).

Right hold that thought. This is also the model for CSS autocompletion used in two Neovim autocompletion plugins I want to show you. First, cmp.nvim, the current de facto autocomplete plugin.

Notice the same pattern? Property quickly autocompletes, enter takes you to the value, which you then enter or chose from the list, and enter adds the semi-colon.

And its the same with the new (beta as I write), blink.cmp autocomplete plugin, here I am doing the same kind of operation using that.

This is fine and its no hardship to use, but there is something a little better.

Sublime is, well sublime

Consider what Sublime Text does differently. Here is the same kind of operation, but notice the subtle difference…

Can you see what happens there? After selecting or entering the value, with the caret just before the semi-colon, a press of enter gives you the new line, but crucially keeps the semi-colon where it should be at the end of the line, without you needing to move past it before pressing enter.

That’s so much nicer, as 99% of the time (genuine statistic, honest) that is what I want, and it saves that extra movement to the right of the semi-colon before pressing enter.

Sublime I feel has the best experience here, and it is admittedly a small thing, but I really notice it when it is there. It’s the kind of consideration that Sublime displays throughout. It remains a phenomenally well made piece of software.

While it is unlikely I can make any dent in what the behemoth VSCode chooses to do, I can at least ask the question at those other two Neovim plugin repos: