Tadit Dash's Blog

Design is a process!

Design is a process, not a work of a genius with deep natural talents.

Today I started the Coursera course “UX Design: From Concept to Prototype” from my specialization “User Experience Research and Design” from the University of Michigan.

I always thought that design is something which can be done by creative and genius people with natural talent and thinking process.

However, the instructor Predrag Klasnja has clarified my doubt and showed me new light to learn the skills. He says that design is actually a process comprising of different steps, if taken in sequence then anyone can do.

He has a very well compiled course structure and I hope I will complete everything with good grades.

That’s it for today. Have a nice day. Read my other blogs here.

Do let me know your thoughts around this topic.

Vuetify Clear Fields on Dialog Open

Introduction

In this blog, we will look into a simple technique to clear out fields when dialog or modal is opened in an application using Vue and Vuetify.

Background

This is very common to open a dialog or modal from a page. Often is the case where we load data on the controls inside modal based on values passed from the parent page. That is where it also comes with a requirement to clear out fields whenever the modal is opened from the parent page. We will tackle this problem in this blog.

Solution

First thing first, let’s write the HTML for the popup and property to manage the show/hide of the modal.

A Form








Close

Notice the highlighted lines and keep reading the following points.

The first highlighted line is the dialog component accepting a boolean property named showDialog, that controls the visibility of the popup. That means if showDialog = true, then popup shows, else, it is hidden.I have added three text fields for First Name, Last Name, and Email. One select box is there for the Profession. All these have their respective model properties mentioned in the v-model directive.Then there is one button inside the popup to close it when clicked. Obviously, it is going to set false to the showDialog property as I said in point number 1.

The last important piece to add a button to this code base in order to open the popup. The following v-btn can do the task for us by doing showDialog = true on click event.

Open Modal

So, let’s click on this button, that will bring up the popup, that looks something like this.

v-dialog opened on button click

I have entered my details in the controls. Now, I will click on the button “Close”, that will just close the dialog by setting false in showDialog property.

Now, if you open this modal again by clicking on the button “Open Modal”, you will see all the values as entered by you. However, my requirement was to clear out all these fields and it would depend upon your situation and project. So, let’s see how we can do that.

This problem can be easily solved if you just clear out all these fields, just before the popup is opened, isn’t it? The popup show/hide is managed by the property showDialog. That means, when showDialog is set to true (for opening the popup), we have to clear out the fields.

Logic: showDialog = true -> Clear out the fields

Here comes a watcher. We need to watch the showDialog property. Inside the watcher, if the value is true, meaning if the user is trying to open the modal by clicking the “Open Modal” button, let’s remove the field values. The watcher would look something like below.

watch: {
showDialog: function(val) {
if(val) {
this.firstName = '';
this.lastName = '';
this.email = '';
this.profession = '';
}
}
}

Notice how we are making all the properties blank so it would automatically reflect on the controls associated with them through v-model.

Full Source Code with Demo on CodePen



CodePen Embed Fallback



Feedback

Sharing is caring! If you loved this blog, feel free to share in your circle, you can do by clicking the social icons below.

Comments are appreciated as always.

Do you know that null is an object in JavaScript?

Introduction

Interesting, isn’t it? In JavaScript, null is an object. Here is the screenshot from Chrome Developer Tool.

JavaScript null is an object



Why?

The built-in types available in JavaScript are as follows.

stringnumberbooleannull and undefinedobjectsymbol

To know the type of data, we can use one operator called typeof. This operator when used with data yields the type of that data. Let’s try to find out if we get types correctly for different types of data.

CodePen Embed Fallback

On the CodePen (https://codepen.io/taditdash/pen/GRoxxGK) embedded above, it clearly shows an appropriate type for different data types except for null. This is weird but true.

Actually, this is a bug and it is like this from the beginning. Now, this can’t be fixed as a lot of code is depending on it for a long time. If this is going to be fixed, it will definitely break in legacy apps.

Let me know!

What you think? Do you think it is a feature or bug? How have used this as an advantage?

Stay Updated

If you enjoyed reading the blog and you would like to see more of such blogs in the future, do “Subscribe to Blog via Email” that you see here on the page.

The post Do you know that null is an object in JavaScript? appeared first on Tadit Dash.

Vuetify Rounded Card Design

Introduction

The idea is to customize the corners of the v-card component in Vuetify so that it looks rounded. Let’s see what is the impediment and how to overcome that easily.

Background

While working on designing a Billing Subscription Box in a current project, the requirement was to design rounded corners instead of normal corners.

Let’s Code

Let’s first have a normal card which would look something like below.

The code is pretty simple, isn’t it!

Tadit Dash
Tadit Dash is an Indian by heart, a Software Engineer by profession, an Author and a Speaker by passion.


mdi-web


mdi-twitter


mdi-linkedin


mdi-facebook


mdi-instagram

Now let’s go to Vuetify Documentation and find out if there is any way to make the corners round. Here it is – https://vuetifyjs.com/en/components/cards/

I can see that there is a property named as shaped, which helps to add border-radius. That is what we needed. Let’s try that and see what happens.

Wow! We can see the corners are rounded now. However, only the left top and bottom right are having rounded corners. If this is what you need, then your work is done. Copy the code below and enjoy.

Tadit Dash

But I need something else. I wanted all the corners to be rounded which is not possible by default. Then the option here is to do it myself. For that, let’s analyze the rendered HTML first.

So, it’s quite clear how the corners are getting added under the hood. The following CSS is helping to add a radius at every corner.

.v-card--shaped {
border-radius: 24px 4px;
}

But it is not uniform. Top Left, Bottom Right is 24px and Top Right, Bottom Left is 4px. To make it the same across all the corners we need to add the same radius, of course. To so that, we can add a class to the v-card and write CSS rules accordingly.

.rounded-card {
border-radius: 24px;
}

After this change, the rendered HTML is modified with a radius to all the corners. Screenshot below.

The class rounded-card takes over the border-radius property and v-card--shaped is no more applied. The card looks rounded now as all the corners are having a uniform radius. You can increase the radius as per your needs.

Here is the CodePen



CodePen Embed Fallback



Help Someone

Share in your circle. Hit the social icons below. Keep coding folks.

Building RESTful Web services with .NET Core made it to the Best REST API Books of All Time

I’m happy to announce that my book, “Building RESTful Web services with .NET Core: Leveraging ASP.NET Core MVC and Visual Studio 17”, made it to BookAuthority’s Best REST API Books of All Time.
More details here: https://bookauthority.org/books/best-rest-api-books?t=139b3x&s=award&book=1788291573

What is this Award?

BookAuthority collects and ranks the best books in the world, and it is a great honor to get this kind of recognition. As featured on CNN, Forbes, and Inc – BookAuthority identifies and rates the best books in the world, based on public mentions, recommendations, ratings, and sentiment. Details here.

How to get the book?

The book is available for purchase on Amazon.com, Amazon.in and Flipkart.com.

BookAuthority Best REST API Books of All Time

The post Building RESTful Web services with .NET Core made it to the Best REST API Books of All Time appeared first on Tadit Dash.

Building RESTful Web services with .NET Core made it to the Best ASP.NET Books of All Time

I’m happy to announce that my book, “Building RESTful Web services with .NET Core”, made it to BookAuthority’s Best ASP.NET Books of All Time.

More details here: https://bookauthority.org/books/best-aspnet-books?t=coge0a&s=award&book=1788291573

What is this Award?

BookAuthority collects and ranks the best books in the world, and it is a great honor to get this kind of recognition. As featured on CNN, Forbes, and Inc – BookAuthority identifies and rates the best books in the world, based on public mentions, recommendations, ratings, and sentiment. Details here.

How to get the book?

The book is available for purchase on Amazon.com, Amazon.in and Flipkart.com.

BookAuthority Award: Best ASP.NET Books of all time

The post Building RESTful Web services with .NET Core made it to the Best ASP.NET Books of All Time appeared first on Tadit Dash.

Building RESTful Web services with .NET Core

After my first book on “Dependency Injection in .NET Core 2.0“, I got a proposal from my mentor and guru Mr. Gaurav Aroraa to co-author a book with him on RESTful Web Services with .NET Core.

Gaurav Aroraa

The experience of writing my first book helped me immensely and persuaded me to go for the second one without any confusion. Most importantly with the legend himself, who has written 100+ books! How can I just let this opportunity slip from my hand?

About the Book

First edition: May 2018

ISBN: 9781785887833

REST is an architectural style that tackles the challenges of building scalable web services. In today’s connected world, APIs have taken a central role on the web. APIs provide the fabric through which systems interact, and REST has become synonymous with APIs.

Building RESTful Web services with .NET Core Cover by Gaurav Aroraa and Tadit Dash

The depth, breadth, and ease of use of ASP.NET Core make it a breeze for developers to work with for building robust web APIs. This book takes you through the design of RESTful web services and leverages the ASP.NET Core framework to implement these services.

This book begins by introducing you to the basics of the philosophy behind REST. You’ll go through the steps of designing and implementing an enterprise-grade RESTful web service.

This book takes a practical approach, that you can apply to your own circumstances. This book brings forth the power of the latest .NET Core release, working with MVC.

Later, you will learn about the use of the framework to explore approaches to tackle resilience, security, and scalability concerns.

You will explore the steps to improve the performance of your applications. You’ll also learn techniques to deal with security in web APIs and discover how to implement unit and integration test strategies.

By the end of the book, you will have a complete understanding of Building a client for RESTful web services, along with some scaling techniques.

What You Will Learn?

Following are the key things you will learn in the book.

All about Web Service, HTTP Verbs, and their usage
Add basic authentication to your RESTful API
Create a Carts Controller and Orders Controller to manage and process Orders
Intercept HTTP requests and responses by building your own middleware
Test service calls using Postman and Advanced REST Client
Secure your data/application using annotations

How to get the book?

The book is available on Amazon (globally) with two formats on Kindle and Paperback. Also available on Publisher’s (Packt’s) site with Ebook and Paperback formats. Links are given below.

Amazon.com: https://www.amazon.com/Building-RESTful-services-NET-Core/dp/1788291573/ref=sr_1_2?s=books&ie=UTF8&qid=1516979682&sr=1-2&keywords=restful+.net+core

Amazon.in: https://www.amazon.in/Building-RESTful-services-NET-Core/dp/1788291573/ref=sr_1_1?s=books&ie=UTF8&qid=1516979640&sr=1-1&keywords=restful+services+.net+core

Packt: https://www.packtpub.com/application-development/building-restful-web-services-net-core

Feedback

I would be grateful to you if you feed in your comments about the book on Amazon.com. Don’t hesitate to ask me questions by adding comments below. Share with your friends and colleagues.