Anthony Fu' Blog
When building a project, it's very likely that we will install third-party packages from npm to offload some tasks. On that topic, we know there are two major types of dependencies: dependencies (prod) and devDependencies (dev). In our package.json , it might look something like this: { "name": "my-cool-vue-components", "dependencies": { "vue": "^3.5.15" }, "devDependencies": { "eslint": "^9.15.0"…
日本語 Seven years ago, my first visit to Japan - a trip to 大阪 ( Osaka ) , 京都 ( Kyoto ) , and 北海道 ( Hokkaido ) - planted the seed of wanting to live in Japan one day. It was an unforgettable experience that changed the way I see the world. The meticulous attention to detail, the dedication to craftsmanship, and the seamless blend of tradition and modernity continue to inspire me. Here are some photos…
As you might have noticed, I added a photos page on this site recently. It's something I wanted to do for a very long time but always procrastinated on. During certain periods of my life, photography was my greatest passion, just as much as I do today with Open Source and programming. Instagram was once a delightful, minimalist platform for photo sharing that I frequently used - until Meta's…
The coloring problem in modern programming, and a proposal of a new approach
Let's move on to ESM-only
Proposal for an extended Semantic Versioning called Epoch SemVer to provide more granular versioning information to users.
If you want to debug the bundling performance of your Nuxt app to generate CPU profiles. Node.js provides a built-in --cpu-prof flag that allows you to generate CPU profiles. However you can't directly pass it in your nuxi command, you have to use it with node directly. Instead of running nuxi dev , you can run node with the direct path to the CLI in node_modules : # nuxi dev node --cpu-prof…
Go to nuxt.com and read the full post .
An initiative to support open-source ecosystem by Anthony Fu.
Go to nuxt.com and read the full article .
Go to eslint.org and read the full announcement .
Anthony's Roads to Open Source - The Set Theory - React Paris 2024
Some of my thoughts on my mental health during my journey in Open Source
Go to nuxt.com and read the full article .
The methodology behind Shiki Magic Move.
Anthony's Roads to Open Source - The Progressive Path - Vue Amsterdam
Here is an example of using TwoSlash with Shiki : // @errors: 2540 console.log((1 + 2 + 3 + 4).toFixed(2)) // ^| interface Todo { title: string } const todo: Readonly<Todo> = { title: 'Delete inactive users', // ^? } todo.title = 'Hello' Try hovering on each token to see the type information. Shiki runs oniguruma to give syntax highlighting, and TwoSlash runs typescript to give type information.…
[!TIP] Just a quick tip, that you can use > [!TIP] to create a GitHub-style alert in your README.md like this. > [!TIP] > Just a quick tip, that you can use `> [!TIP]` to create > a GitHub-style alert in your README.md like this. The original GitHub proposal is here . It's rolled out basically everywhere on GitHub now. Use it in your website And in case you like it, and wanted to use it in your…
Go to nuxt.com and read the full announcement .
Anthony's Roads to Open Source - The Set Theory - Vue Fes Japan 2023
Now, and the Future of Nuxt Devtools - Nuxt Nation 2023
Anthony's Roads to Open Source - The Set Theory - ViteConf 2023
I recently replaced the logo on the top left corner with an animated SVG: Inspiration The first time I saw such stroke animations in SVG is the Material Line Icons by Vjacheslav Trushkin . It was cool, but I never thought about making one my own until I saw Mu-An Chiou 's banner on her website. I suddenly feel like I want to be the cool guy too! Breakdown I downloaded Mu-An's SVG to read the code,…
If you tried to use pnpm to install a project on an external disk, it may not work right away because pnpm is heavily relying on symlinks, which doesn't work cross mount points. To workaround this, you can add the following config to your .npmrc : package-import-method=copy prefer-symlinked-executables=false This will make pnpm copy the files instead of symlinking them. And expose the executables…
[[toc]] Co-authored by Anthony Fu , 赛博迪克朗 , wangcai and 代々木 This is a live document , will be updated as we learn more. Check back occasionally. A summary of discussions made in QRBTF's Discord server and Anthony's Discord server . Thanks to everyone who participated in those servers. What's a Stable Diffusion QR Code? Images that are generated with Stable Diffusion with QR Codes as ControlNet 's…
[[toc]] Update : New blog posts - Stable Diffusion QR Code 101 Last week, I wrote a blog post about how I learned to generate scannable QR Codes. When doing so, I consider my goal is to find an image that looks like a QR Code as little as possible to humans, but still be recognizable by the machine. We need to find a balance, tweaking the weights to try and error. It's still quite hard to find a…
[[toc]] Update : New blog posts 👉 Refining AI Generated QR Code 📚 Stable Diffusion QR Code 101 Yesterday, I created this image using Stable Diffusion and ControlNet , and shared on Twitter -- an illustration that also functions as a scannable QR code. The process of creating it was super fun, and I'm quite satisfied with the outcome. In this post, I would like to share some insights into my…
Development Experience with DevTools - StrasbourgJS 2023
Manage GitHub Notifications - GitHub Maintainer Summit 2023
Adding an elegant sliding enter animation to your blog.
Go to nuxt.com and read the full announcement .
You probably don't need it usually, but in case you want to break lines programmatically in JavaScript, here is my lazy man's solution: // break lines at space with maximum 25 characters per line text.split(/(.{0,25})(?:\s|$)/g).filter(Boolean) A quick example: const text = 'A quick brown fox jumps over the lazy dog.' const lines = text.split(/(.{0,16})(?:\s|$)/).filter(Boolean) console.log(lines)…
Development Experience with Nuxt - Vue Amsterdam 2023
Bonjour Paris! I am so excited to share with you that I have moved to Paris ! Paris is always my dream city, it's still a bit unreal to see that I am actually here! Here I am going to share with you some of my life updates and what would they mean to me. Thanks At the very first, I need to give a HUGE thanks to my company NuxtLabs and my colleagues. They made all this possible and helped us a lot…
Patterns of VueUse - Vue Fes Japan 2022
Vite, the on-demand DX - ViteConf 2022
The journey of how we made development time SSR working on Nuxt with Vite
The reason why I don't use Prettier in my projects.
My thoughts on why reproductions are important in open source.
Introduction to Vitest - Vue.js Nation 2022
A short tutorial of shipping both ESM and CJS dual formats in a single NPM package.
The icon solution in pure CSS.
Let's take a step back and reimagine what's atomic CSS could be in the best.
New Ways to Vue - Vue.js Live London 2021
Credit to GitHub Copilot . I didn't know you could provide a map function to Array.from as a second argument until today. Array.from({ length: 10 }, (_, i) => i) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
My journey with icons and the solutions I made along the way
In ESM, you might found your old friends __dirname and __filename are no longer available. When you search for solutions , you will find that you will need to parse import.meta.url to get the equivalents. While most of the solutions only show you the way to get them in ESM only, If you like me, who write modules in TypeScript and transpile to both CJS and ESM at the same time using tools like tsup…
You might found GitHub sometimes shows you a commit with multiple authors. This is commonly happening in squashed pull requests when multiple people are involved with the reviewing and made suggestions or changes. In that situation, GitHub will automatically inject the Co-authored-by: to the commit message. This is a great way to give contributors credits while keeping the commit history clean.…
Notes about the caveat when using async functions in Vue Composition API.
When you want to get the real file path of a certain package, you could use require.resolve to fetch their main entry path. > require.resolve('vite') '/Users/.../node_modules/vite/dist/node/index.js' > require.resolve('windicss') '/Users/.../node_modules/windicss/index.js' However, when you want to get the root directory of the package, you will find the result of require.resolve could vary based…