Teleport is a new feature introduced in Vue 3. Teleport provides better control to developers on where exactly an element is rendered. Get Teleporting Let us create a new Vue 3 app to start playing around with teleport. We will use Vite, because it is 2021. npm init @vitejs/app Provide a project name (teleport) and select vue as the template. Install dependencies and start the app. cd teleport npm i npm run dev Navigate to http://localhost:3000 to see your new app. ...
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. ...
Svelte makes working with apps really simple. It brings the clarity of Vue but adds even more simplicity in the way components are created and used. For one of the demos I just wanted to showcase what the simplicity translates into for a simple website that shows “quote of the day” but also needs to provide a “SPA experience” - completely off the script. All I did was to start the app - ...
In this post we will see how to create a simple timesheet app using Vue and Vuetify. This is not quite a comprehensive tutorial on Vue or Vuetify, rather a demo of front-end features, see how easy it is to build an usable app, and in general, how modern app development makes the whole process enjoyable. What are we building? A simple timesheet app that will - enable to enter time on a day enable export of time data We will store everything in browser storage and there will be no standard persistence layer. This app may or may not plugin to backend (Firebase? ExpressJS / Fastify? Hasura? Other?) in the future - comment and let me know if you’re interested in seeing that! ...
Tooltips are omnipresent, or rather have to be. While there have been excellent standardisation of user experience since we saw what Bootstrap was capable of, there are days and applications that can throw off users with strange icons, buttons and navigation. Ergo, tooltips. The humble tooltip can provide helpful hints, short messages and guide user on what a particular button, text box or any other element will do before clicking the thingy and causing destruction of a planet. ...
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 - ...
Here’s a good guide to get you started on Javascript in a practical way. Why another guide? Practical - don’t learn for the sake of learning, learn for the sake of doing! Tactical - learn what matters, fast (yes, that’s what everyone says) Strategic - see the big picture This guide will get you started from the beginning, graduate you to using industry standard tools, and point you towards the right direction for learning even more than what can be offered in one guide or course. ...