Demos

Demostractions for projects I am working on from Tweets

⚓️ Just landed in the Nuxt DevTools! Now we are able to inspect the Open Graph tags on each route, preview it and copy the snippet to improve them directly!

💚 Great thanks to @arash_sheyda again for cooking so many awesome integrations, and Vercel for the nice design reference!

May 8

Took some time to refine antfu.me a bit.

Thanks to @pacocoursey’s animation, it looks a lot more vibrant now 😆

May 7

🔍 Now in the latest Nuxt DevTools, you are able to inspect the elements, open the corresponding source right inside the embedded VS Code, and edit them with HMR!

FULL FEEDBACK LOOP - make changes without the need to learn project structure - or even leave the browser! 🤯

Apr 30

Introducing the Nuxt Devtools ✨

Mar 27

🚀 Quality of Life updates to Icônes!

🌵 Variants filter 🕦 Recently used icons 💡 Smart search alias (e.g. person/user/account etc.) 🔍 Search all icons from the home page

icones.js.org

Mar 18

🕰️ Bringing Zeitreise to Nuxt DevTools, the time travel machine!

🕥 Scroll the time bar, and you can see how old browsers render your app, or how your app looks without flexbox, right in the DevTools!

Feb 27

🛹 Slidev finally got built-in slide transitions in v0.39.0! - something I wanted so much since the beginning!

Jan 29

🌈 UnoCSS finally got the docs! - unlike the traditional static docs, I’d like to make it as dynamic and interactive as possible.

✨ Introducing you the first preview of http://unocss.dev/interactive!

Apr 28, 2022

🛰 Quite some polishment made to Vue Starport since the release!

Now it no longer deps on Vue Router, meaning you can do components transition even on the same page (statefully!)

vue-starport

Apr 13, 2022

🚀 Introducing Smart Clicks for VS Code!

🖱 Double-click the bracket, and select the content inside them. Or double-click on the HTML tag name and make changes with the end tag!

vscode-smart-clicks

Mar 23, 2022

🎥 Live coding is hard to be perfect (I’m so good at typo), so why don’t we automate it?

⌨️ Take the snapshots for the changes(clicks), and then play it! Saves as plain text so you can edit it afterward and even commit to git

Mar 19, 2022

When seeing the screenshots of my apps, I sometimes find they render differently on others’ devices.

So I made the experiment Zeitreise to do the time-traveling and see what your apps would look like, without the new features from the browsers 🕝

Mar 18, 2022

The inline snapshot in Vitest is soo fast that you can even play with it like a REPL 🟥 🟩

Merry Christmas!🎄

Dec 26, 2021

So pleasant to watch tests running with the dot reporter on Vitest 😆

Dec 24, 2021

Just like how Vite works in the browser, Vitest also knows the graph of your modules, which makes it able to do smart detection and only rerun the related tests. Feels almost like HMR but for tests 😍

Dec 7, 2021

This could be a good way to learn how Vite works and debug your apps and plugins.

This plugin lets you see the intermediate states of plugins transform and the changes they applied. Now also with a cool module graph built with vis.js 🕸

vite-plugin-inspect

Sep 11, 2021

🌈 Working on some cool stuff for Slidev

On the right it’s the presenter mode, which can work remotely on your phone or iPad 😳, even with pen pressure support! ✍️

Aug 17, 2021

An experimental of Windi CSS running on the client-side and works for any websites with only one line of code, WITHOUT any dev servers! 🧪🍃

May 23, 2021

Working on the homepage of Slidev docs 😍

May 1, 2021

Spoiler of the new piece of Wind CSS playground - interactive selector.

I always find myself trouble picking the directions of rounded corners and looking up for a huge table of all the possible combinations could be inefficient. So yeah :)

rounded-1/2 is new in Windi CSS btw 😉

Mar 16, 2021

VS Code extension for Vite. Fire up your Vite server along with your project, and play it without even leaving your editor. Another way of being faster 🚀

Mar 1, 2021

🚏 Auto navigate to the page you are working on!

Jan 12, 2021