Issue #164 (A Visual Editor for Astro, React & Tailwind)06/11/25
Build with Precision. Live with Intention.
Code & Character offers thoughtful reflections on engineering, focus, and the philosophy behind great work.
Each piece helps you slow down, recalibrate, and return with sharpened intent like a mental pull request.
|
No filler. No urgency. Just timeless insight for those who treat code as craft, feedback as growth, and discipline as the quiet force behind great systems.
|
|
An exciting new feature that was added to VS Code in the April update is outlined in one of this week's articles by the Chrome team, linked below in the Articles & Videos section. You can check that out for full details, but below are a few examples of this feature in action.
In your CSS file, you can hover over any CSS feature and VS Code will show some info in a tooltip, including if the feature is 'widely available':
As shown above, I'm hovering over the CSS justify-content property. We know that CSS feature is now widely available across all modern browsers, so this is displayed in the tooltip.
For an example of a feature not widely available, let's try the little-known field-sizing property:
This time the message warns me that this feature has "limited availability" and it's also a bonus that it informs me which browsers are not supported (in this case Firefox and Safari).
This feature also works for HTML elements:
The example above is the <fencedframe> element, which I had not even heard of until I looked for a newly supported HTML element while putting this intro together. From what I can see, this feature doesn't work in JavaScript files, though you still get an info popup with a link to MDN's reference.
Now on to this week's hand-picked links!
|
|
|
VS Code Tools
|
Piny — A Visual editor for Astro, React, Next.js, and Tailwind that runs in your IDE, available for VS Code, Cursor, and Windsurf.
Nonicons — An icon set for VS Code that's similar to the icons used on GitHub and GitHub's VS Code themes, with an easy to read design even at small sizes.
Build with Precision. Live with Intention. — Code & Character blends Stoic clarity with principled engineering. It is designed for devs who build like it matters because it does. Quiet. Tactical. Sponsor
Amp — An agentic coding tool built that runs in VS Code (and compatible forks like Cursor, Windsurf, and VSCodium) and as a command-line tool and is also multiplayer, allowing you to share threads and collaborate with your team.
|
VS Code Theme of the Week
|
Everforest — A port of an older Vim theme that includes a tasteful use of greens, "designed to be warm and soft in order to protect developers' eyes."
In addition to the dark theme shown above, there's also a very nice light theme that has a light beige background, rather than a white background, which seems to be easier on the eyes.
|
|
|
| |
|
|
VS Code Articles & Videos
|
|
|
|
|
Best of the Rest
|
Zed: The Fastest AI Code Editor — From the Zed blog, a look at how this editor is becoming a serious contender for the top IDE in the world.
CodeNest — A real-time collaborative code editor enabling seamless teamwork with features like live editing, syntax highlighting, code execution, and group chat.
Web Tools Weekly — A weekly newsletter featuring tools, plugins, scripts and other useful stuff for front-end developers, full-stack developers, app developers, mobile developers, and more. Sponsor
render-markdown.nvim — A plugin to improve viewing Markdown files in Neovim, with no external windows, fully configurable, and can render Markdown injected into any file type.
If you have any link suggestions, including a tool, article, or other resource related to VS Code or another IDE, you can hit reply, send it via DM on X, or via chat on Bluesky.
That's it for this issue.
Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris
|
|
|
