You have coded a beautiful page that has a few buttons, some text, a toolbar, a footer with the mandatory copyright statements, and so on. And now your users want to take the print out of the web page and ask you to include that feature. The first thing that comes to your mind is to just use the browser feature to print any web page (or to save as PDF). Well, it gets the job done but along with your beautiful, print-worthy content will be the buttons, footer, and what not. So, you get to wonder “is it possible to get rid of things only for prints but not on the web page UI”? The answer is “yes”, of course - I am writing a whole post about it. ...

We have previously seen how a div element can be saved to a file. In this post we will see how we can save div tag contents as an image in Vue. How do we print the div? Here are the steps at a high level - Draw contents of div to canvas. We use a library called html2canvas to create canvas from a specified div. Generate image from canvas Download canvas as an image The print here is equivalent to “taking the screenshot” of a particular section of your 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 started with Golang not too long ago, and I loved the fact that I can create a web application with a couple of lines of code. But, as always frameworks help to take that web application to places. Being a practical person who develops apps for side projects and for a living, I cannot simply overstate this fact. A production application is not simply a matter of responding to a hello world JSON and frameworks take care of the routine tasks of providing structure, connecting to database, enforcing security and so on. ...

If you had enough of single threaded behaviour of Node and are ready for the next level (/s) - I strongly recommend you evaluate Go for your next project. Javascript is the most used language in the world and that status will not change in a hurry - thanks to its frontend nature. NodeJS is super useful since we can use the same language for server and stand up a production grade server using frameworks like ExpressJS or Fastify in a matter of hours. I absolutely am in love with NodeJS - ...

Dialogs are those thingies that popup on your UI and are handy to allow users to perform actions without navigating away from the screen. For example, here’s one that enables users to create new request.. .. and here’s an example from Vuetify site that shows a short message. The v-dialog component is the recommended way to show confirmation dialogs too. While confirmation dialogs are great, they could get annoying if used in three hundred different places. For e.g. what do you do if you need a yes/no confirmation dialog? ...

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

Redirection can be easy enough on Nginx. Let’s see how we can utilise that for our single page applications coded in Vue, React, etc. Nginx and Redirection Nginx configuration is simple but powerful. All we need is a couple of lines to setup our server. Add the below lines to the Nginx configuration files (e.g. in /etc/nginx/sites-enabled/domain.com.conf in Ubuntu). server { listen 80; server_name domain.com; } Start the Nginx server, and lo and behold - our web server is ready to serve magic at port 80. Go to domain.com in browser and see your beautiful app. ...