Hello, world.
This is a blog about application development web, desktop & mobile across a range of programming languages incl. JavaScript, C# and more.
These are interesting times for the web. Tag along as I get amazed on what the web can do, how AI is taking over the world, and sympathize my spectacular failures and stupidity.
Explore
- 📝 Posts — In-depth articles on web development, JavaScript, TypeScript, Vue.js, ASP.NET, and more
- 🗂️ Categories — Browse topics: JavaScript, Vue.js, TypeScript, ASP.NET, and more
- 🚀 Apps — Simple, powerful tools built for real-world use
Stay in touch!: 🐤Twitter | 🛜RSS | 🚀GitHub
With Astro 4 released recently, I wanted to check out what is going on in that part of the world. What better way to do that than to create a blog using Astro.. or so I thought.
I had not been quite sold on Astro for the stuff that I typically do.
I tend to focus more on SPA-like apps. Am a fan of Vue, of course Hugo is more than enough as SSG. While I absolutely have no clue what I do there 90% of the time (or is it more like 99%?), it just works and works blazingly fast Being a stickler to “try everything that is recommended on Twitter”, I could not continue the state of not jumpin on the Astro train for long. So, here we are.
...
I have a full-time job that does not involve active web development. I am, however, on the constant look-out for the next big thing that will solve all my life’s problems.., by quickly creating apps that is.
Vue has always been a tool that I depend on. Vue is quite easy to understand, use and build apps with. Nuxt just makes it even easier.
I found React to be too verbose, generally more complicated, and not fun to work with. With NextJS 14, React Server Components, and the ** huge ** number of NextJS templates out there (not to mention v0.dev), I could kinda see how my workflow could be so much more easier.
...
Let us create a simple Todo app using Nuxt -
PrimeVue for styling Store todos in a database Setup Ensure NodeJS is installed. Download and follow instructions here if you don’t have Node installed on your computer. I use pnpm as my package manager. You can use npm or yarn if you prefer. Install pnpm globally using the following command.
npm install -g pnpm Create a new Nuxt project.
pnpx nuxi@latest init nuxt-primevue-todo This command should initiate a project, install dependencies and also prompt you to initiate a git repository.
...
Applications in Electron are great, but they are also heavy and slow. I have been looking for a way to build an app that can be -
universal (kinda - I will start with desktop experience for the masses but will eventually gravitate towards everything, everywhere, all at once) light weight - space and memory fast Just to set the frame of reference - what I want from UI development is ease of development - html, css, and js and other such delightful technologies make things easy, GTK / Xamarin / Qt / WinForms / WPF / etc. are not so much fun.
...
I have not been a fan of server-driven frontend experiences, but HTMX renaissance has piqued my interest. And yes, that only gets amplified with BunJS claims of astronomical speed for server and what it means for my choice of technologies moving forward. That is for a future post, but here we explore how Golang and HTMX can work together to create a “SPA-like” experience.
Features that are of interest here -
...
I continue to be amazed by the depth of tools created by Sysinternals even after all the tools I have used over years. Zoomit is certainly one of them.
Now, how many times have you wondered about making things a weebit exciting by drawing something on the screen while you are presenting stuff. Not taking screenshots and pasting in other programs, not using Powerpoint tools and not using video tools - just plain old do things live and switch context, quickly.
...
I am quite excited with all the developments in the database world. While hosted database is not a new concept, we now have services that are -
far more focused on usability - support intuitive data types, have spreadsheet-like experience have schema editors :) support simple migrations support more advanced functions like caching without need for black magic .. probably include more predictable pricing Xata is one such database service that ticks a few boxes and is fairly new. In this post, let us look at how easy it is to create a simple contact application with Express and Xata.
...
In this post let us create a simple blog using Sveltekit.
Why Sveltekit if you ask -
Because it’s cool Make your pages interactive without a big JS payload for the client Fast Get started with the following command in your favorite terminal -
pnpm create svelte@latest avix-blog-sveltekit This should initiate the folder with basic sveltekit structure and initiate a few files.
Choose Skeleteon project as an option and select/de-select Javascript, Prettier and ESLint options based on your preferences.
...
I am quite excited about the possibilities offered by NextJS 13. Announced in Oct ‘22, the most popular JavaScript framework has set fantastic standards for rest of the world.
I particularly liked the below features -
React Server Components that makes life simpler, but the coding process is much more efficient The new directory structure that simplifies routes. Layouts are intuitive and simple Love the new links (yes, I had to say this) What lays hidden in the first statement is all the power hidden in React Server Component itself and that of streaming SSR. Combined with the new way of writing pages, I think this came closest for me to reconsider coding in React.
...
Coming from the Vue world, Reactivity in Svelte for anything more than simple strings feels.. a bit different.
Vue has made me lazy when handling reactive arrays or objects.
All I have to do with the older Object API is -
// nums: [1, 2] addToNum() { this.nums.push(this.nums.length + 1); } Directly modifying an element (e.g. this.nums[1] = 'a') would not work though, and that was perfectly fine.
It is more tricky for objects - this.planets["jupiter"] = 5 will not trigger reactivity. We could work around this by this.planets = { ...this.planets, jupiter: 5 }. (Or, use $add if you are weird).
...