category: Javascript

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 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). ...

In this post let us see how we can easily build a task management app (which is totally & completely different from a todo app) using ReactJS. We will be using React Hooks, Chota CSS for styling and a lot of ES6+. We will not look at any centralised state management, or deal with a backend to store the tasks in this post. Get Started Use create-react-app to structure your project like any sane person would do - ...

Welcome to 2021. For me this will be an exciting year when I embrace ReactJS and Svelte as friends. And, what better way to start with React than NextJS..? In this post, we will see why and how we can get started on NextJS, and a few good learning resources. But, why? React continues to be a leader with ~50% market share. It enjoys a lot of developer confidence, community contribution and widespread adoption More users have meant more support for the smallest of issues React and associated frameworks have been at the forefront of new developments - that may be in the way pages interact with data (Hooks, Suspense), in how front-end gets/updates data (React Server Components), or how the latest technologies can speed up development and enable you to use hybrid frameworks to get things done (Next) Vue will not be completely replaced in my toolbox - not unless I find a shiny new thing that can completely replace it. In today’s world everyone learns from each other and adapts rather quickly - so that scenario is not likely to play out. ...

I have this nagging problem of determining an end user’s country/region in my web apps. The reasons for doing that are many - Automatic conversion of an event date/time Display regional news Show prices in user’s currency .. and so on We could do two things to determine a user’s region - Use geo location Use external services to look up the IP Option (1) is ideal. It is quite easy - thanks to HTML5. ...

We have looked at functions quite a bit on this blog over the last two years. We have seen many avatars of a function including a function object, a function’s method, function of functions, and so on. But, what we have not done is to document all the ways in which we can define functions.. so here it is. :) Functions in Javascript Function is a reusable body of code. Let’s say we have to add two numbers. You can write some simple code like so.. ...

ES2020 introduced nullish coalescing operator. We will see just how and where can you find use for it? What it is? Nullish coalescing operator (??) is introduced in the newest Javascript specification. It’s primary design goal is quite simple - provide a way to check for nulls to return true or false values from an expression. The operator follows in the footsteps of shorcircuitinng operators && and || to provide developers with a reliable way of checking for - ...