{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/16","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Many developers overlook imagery on the websites they develop. The website design starts with image placeholders instead of images. They…","fields":{"slug":"/engineering/image-colorizer-tool-kolorizer/"},"html":"

Many developers overlook imagery on the websites they develop. The website design starts with image placeholders instead of images. They spend weeks creating it's structure and features. Then they spend some time on the content, and after that, the images come as the last step right before launching the website with the words \"Let's just put a random image of whatever, as long as it makes sense.\"\n

\n

When this approach works for many websites since imagery is secondary content, in many cases, you need to involve the work of a designer or a photographer to get something unique to use free of copyright. When custom work is always encouraged, there is a space for the first approach. Whether you do not have a designer to rely on, or you want to ease the load off your design team, you can find copyright-free images on the web and use them in your projects.\n

\n

The problem

\n

All seems fair until you realize that your website is starting to look like a circus. With every image and photo having different colors, the website is like an intersection without any traffic lights - everybody is doing whatever they want. There is no uniformity or harmony between all of the imagery. This might seem like a small problem initially, but it hurts your business in the long run.

\n

As your business struggles to create a consistent unified brand, people do not sense the authority and quality of your product and in the end, they go to someone else that seems to know what they are doing. And if you think, \"Not everybody is a designer, and most people would not notice this\", while it is true, some people would not care, but in most cases, people would start noticing this. All this will be happening subconsciously. They will not tell you precisely what is wrong, but they would feel less connection with your brand, which could make them leave in the long run if they find something that feels more right.\n

\n

If your product is selling car insurance, you want people to identify you as the leader, the main place to get everything you need for car insurance. To accomplish that, you need to build a strong brand around your product.

\n

You might be thinking right now: \"Sounds like I need an expensive designer to figure all of that out!\". When a great designer could take your brand to the next level, you can do something that will not cost you a dime. A great start to building a brand is making all the colors on the website as consistent as possible. I am sure you know how to make that in CSS with the headings, paragraphs, link colors, etc., it is a little more complicated for the images.\n

\n

The solution

\n

\"Kolorizer

\n

This is where our little tool comes in - Kolorizer. This incredibly simple online tool will have a huge impact on your brand, whether you are kicking it off or simplifying and growing an existing one.\n

\n

The task is simple - to make colors in all the imagery on your website match your brand's colors. There are mostly two different ways of doing this in the design world: \"The overlay\" method and \"The changing of the base color\" method.

\n

In the \"The overlay\" method, the color overlay is simply applied on top of the image. While it is the easiest and quickest way of adding some brand colors to the images, it comes with some downsides. The image becomes darker and some other colors might still peek through, which is not great.

\n

![](01.webp \"Image created using \"The overlay\" method\")\nImage created using \"The overlay\" method\n

\n

The second, \"The changing of the base color\" method, is less common because it requires a few more steps. First, the image is converted to black and white, making every pixel in the image based on black color. So every single pixel is a percentage of black color. Now we can replace that black color with any of the dark colors you have in your brand, like dark blue or dark orange. And voila! Every pixel in our image is now based on that color, without any overlay that darkens the image and without any other colors peeking through the overlay. This does create a little problem: since we are basing our image on a dark color that is not black, the image is lighter and we have to adjust the brightness of the image a little bit to compensate for this. The amount depends on the image itself - some would be good right after the conversion, some would need to be darkened or lightened.

\n

![](02.webp \"Image created using \"The changing of the base color\" method\")\nImage created using \"The changing of the base color\" method

\n

Kolorizer is built using the second method, and most of the steps are done automatically.

\n

\n

After you upload the image, it is converted to your selected brand color right away. Adjust the color if you need to. Maybe try a different dark color out of your brand colors. Then adjust the brightness of the image if needed and download the finished colorized image. That is it!

\n

Now in just seconds, you can have a stock image that matches your brand color and helps you build a brand vs hurting it in the long run.

\n

A Tip

\n

Use this tool for all of the imagery in your brand materials: slideshows, handouts, posters, documents, etc., to have a consistent and recognizable brand across the board.

\n","frontmatter":{"date":"February 09, 2021","updated_date":null,"description":"Kolorizer is a free photo coloring tool to help you align the images on a website with your brand.","title":"Image Colorizer Tool - Kolorizer","tags":["Design","Photos","Brand"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7094017094017093,"src":"/static/caf32b1ff5bb357db79f2d0c25e7daeb/58556/cover.webp","srcSet":"/static/caf32b1ff5bb357db79f2d0c25e7daeb/61e93/cover.webp 200w,\n/static/caf32b1ff5bb357db79f2d0c25e7daeb/1f5c5/cover.webp 400w,\n/static/caf32b1ff5bb357db79f2d0c25e7daeb/58556/cover.webp 800w,\n/static/caf32b1ff5bb357db79f2d0c25e7daeb/cc834/cover.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Max Sergeyenko","github":"maxsergeyenko","avatar":null}}}},{"node":{"excerpt":"At the dawn of \"smartphones\" in late 2007, when Apple released the iPhone, there were native apps. Apple's app framework included a native…","fields":{"slug":"/engineering/progressive-app-vs-native-app/"},"html":"

At the dawn of \"smartphones\" in late 2007, when Apple released the iPhone, there were native apps. Apple's app framework included a native app SDK that allows developers to take advantage of all the physical device features and topped it off with an app store that allows for distribution and monetization of the finished applications. When Google released Android in competition, they also embraced this approach with their app store and SDK, which also leveraged the entire Google platform and its services.

\n

Developers could tap into Google's search and maps services, as well as email, etc. Native applications served their purpose superbly and became the primo factor that propelled Android and iOS as the big two phone operating systems at the time, until the present day.

\n

Native smartphone applications were so common that Apple coined the tagline \"There is an app for that\" and copyrighted it in 2009.

\n

However, come the 2010s. Web technologies saw increasingly rapid growth. Server-side rendered web pages allow for the creation of full-fledged web applications that could offer business values beyond static information. The responsive design movement also enhances accessibility for these web apps across all platforms. It was also during this time that mobile applications became stagnant. Your phone started to have too many applications, and not all of them were equally useful. Some are thin clients to web services, which you could access using your mobile web browser instead.

\n

Recognizing this, Progressive Web Applications, or PWA, came in to bridge the gap between native and web applications.

\n

What are Progressive Web Apps (PWAs)?

\n

First and foremost, PWAs are web applications. They run in web browsers, but also usually in webviews on smartphones. Compared to traditional websites that you would visit with a conventional web browser, progressive apps tend to be a little more low key.

\n

You may see one through a direct URL, but more commonly through a desktop/home screen icon on your phone, which takes you to a webview hosting the application. By extension, PWAs are now also distributed through app stores, standing alongside native apps.

\n

The webview itself may also be without or with minimal menu bars to provide an impression close to navigating a native application. Furthermore, progressive applications usually come with some offline viewing capabilities, allowing you to interact with the app even when you are offline or in limited network availability. This is implemented using service workers that stand in between network requests and the user and handle caching as well as push notifications, providing a user experience similar to native app caching.

\n

With that in mind, the idea behind PWA is to create applications that would be most accessible, through the web, that also offers an experience as close to native applications as possible.

\n

Why Progressive App?

\n

Ease of development and distribution

\n

Suppose you are a new company looking to create a mobile application for your product. If you would like to distribute your app on all major mobile platforms - namely both iOS and Android - you would then have to go through the development and distribution process for both. First off, you will need to learn the language to develop Android applications (Java, Kotlin) and then iOS (Objective-C, Swift), have the correct hardware to test and develop.

\n

This process will have you relearn everything about one platform on the other. Once you finish the initial product, you will have to maintain both codebases moving forward to complete this.

\n

With a progressive app, the process becomes a lot simpler. Your application lives within a browser, and hence only needs to be supported by the browser standards. As of now, support for PWAs is available across major browsers: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Firefox (for Android).

\n

Your language is the language of the web: JavaScript. The choice is also yours to leverage the JavaScript platform you are most familiar with, be it React, Angular, or something completely different. The JavaScript codebase will then become the only codebase you need to maintain for the app.

\n

Alongside this, you also gain the advantage in the availability of the application. With PWA, your app will be available on the web, accessible by users across many platforms, including all mobile devices that have browser support.

\n

Portability

\n

PWAs live on the web; this means you do not need to download and store many executables and assets on your device, saving you precious storage space if you are using the app on your phone. This is especially useful when the native version of the application is simply a portal to a web service, which serves to make API calls and present data based on the user data on the server only, without performing any device-specific actions. The functionality of these applications is not inhibited by the browser's sandbox and thus make for perfect PWA candidates.

\n

User Experience

\n

PWAs are designed to be responsive. Even though this depends largely on the individual developer of the application, a well designed and developed PWA should, in theory, provide a consistent experience across devices. With native apps, a lot of effort will be required to ensure that the user experience is uniform across multiple platforms. And even then, certain platforms will impose their own set of requirements on the UI look-and-feel, as well as the functionality of the app.

\n

So, why not Progressive App?

\n

Progressive apps are a creative solution to smooth out the differences between a native app and the web, but not necessarily replace native apps. While it inherits all the advantages and features of the web, there are still certain disadvantages that need to be considered when deciding between a progressive app or a traditional native app.

\n

Leveraging device-specific features

\n

For one thing, progressive apps are designed to be uniform across devices. This means it is not the technology's focus to make use of specialized features that are available only on select devices. Its feature set will be the lowest common denominator of the range of devices that it supports. With how diverse the feature sets are on modern devices like smartphones and tablets, with high-resolution cameras or fingerprint sensors, to name a few, it would be amiss for applications not to take advantage of these features. It follows that progressive apps are not ideal for specialized workflows, while their strength is in general purpose applications.

\n

Browser compatibility

\n

Compatibility is another big-ticket item. At a baseline level, PWA should be supported by all major browsers. However, platform differences still exist, where specific features are supported by one browser but not another, which will cause inconsistencies in behavior when the user switches from one device/platform to another. A prominent example of this being push notification support on iOS, which requires jumping through some hoops to make it work, as Apple does not support this directly. With that in mind, the subtle differences between browser support become a limitation similar to the difference between native app platforms itself.

\n

Distribution

\n

For applications to reach the hands of the users, it needs a distribution platform. For native applications, the answer to this is straightforward: Apps are distributed through the native app store, be it Google Play Store or iOS App Store. However, for PWAs, it is more complicated. Distribution can be as simplistic as passing around the application's URL, and anyone who knows the link can access the app. This method has the added advantage due to Google and other search engines/web crawlers naturally picking up the app URL and returning it as a search result.

\n

However, this method is passive and requires the user to know the application beforehand. Developers might prefer the more traditional way of having the app listed in an app store, which is possible but requires them to jump through the same hoops as native applications, following all of the distributor guidelines, which removes its advantage compared to traditional apps.

\n

To PWA, or not to PWA

\n

So with everything considered, should you go the route of the progressive app? We do not aim to give a concrete answer, but instead a suggestion: If your application can be made a PWA, it is a good idea to do so. At the current moment, progressive apps are an evolution of web apps. Compared to the feature set that users are already familiar with in native apps, progressive apps still trail behind.

\n

This means that if the scope of the application is complex enough, PWA may not provide you with enough tools to do the job. With that said, if your application can be fully implemented with the set of tools that PWA provides, then going this route may net you added benefits that are unique to progressive apps. Are progressive apps the future? It definitely has the potential, but a large part of that answer depends on whether we can leverage its platform to build productive solutions with it today.

\n","frontmatter":{"date":"February 04, 2021","updated_date":null,"description":"How do Native Apps compare to Progressive Web Apps, and which platform does your company use to communicate with your clients? read on!","title":"PWA vs Native App: Which one is Better for you?","tags":["Progressive App","PWA","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/fd52b7dab79665e5aa8e0074faec8e6c/58556/index.webp","srcSet":"/static/fd52b7dab79665e5aa8e0074faec8e6c/61e93/index.webp 200w,\n/static/fd52b7dab79665e5aa8e0074faec8e6c/1f5c5/index.webp 400w,\n/static/fd52b7dab79665e5aa8e0074faec8e6c/58556/index.webp 800w,\n/static/fd52b7dab79665e5aa8e0074faec8e6c/99238/index.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nathan Nguyen","github":"nathannguyenn","avatar":null}}}},{"node":{"excerpt":"This blog will help you get started on deploying your REST API in Kubernetes. First, we'll set up a local Kubernetes cluster, then create a…","fields":{"slug":"/engineering/rest-api-kubernetes/"},"html":"

This blog will help you get started on deploying your REST API in Kubernetes. First, we'll set up a local Kubernetes cluster, then create a simple API to deploy.

\n

There are already a lot of free resources available explaining basic Kubernetes concepts, so go check those out first if you haven't already. This blog is intended for beginners but assumes you already have a basic understanding of Kubernetes and Docker concepts.

\n

1. Set Up Local Kubernetes

\n

There's a couple options for running Kubernetes locally, with the most popular ones including minikube, k3s, kind, microk8s. In this guide, any of these will work, but we will be using k3s because of the lightweight installation.

\n

Install k3d, which is a utility for running k3s. k3s will be running in Docker, so make sure you have that installed as well. We used k3d v4.0 in this blog.

\n
curl -s https://raw.githubusercontent.com/rancher/k3d/main/install.sh | bash
\n

Set up a cluster named test:

\n\n
k3d cluster create test -p "80:80@loadbalancer"
\n

Optionally, check that your kubeconfig got updated and the current context is correct:

\n
kubectl config view\nkubectl config current-context
\n

Optionally, confirm that k3s is running in Docker. There should be two containers up, one for k3s and the other for load balancing:

\n
docker ps
\n

Make sure that all the pods are running. If they are stuck in pending status, it may be that there is not enough disk space on your machine. You can get more information by using the describe command:

\n
kubectl get pods -A\nkubectl describe pods -A
\n

There's a lot of kubectl commands you can try, so I recommend checking out the list of resources and being aware of their short names:

\n
kubectl api-resources
\n

2. Create a Simple API

\n

We will create a simple API using Express.js.

\n

Set up the project:

\n
mkdir my-backend-api && cd my-backend-api\ntouch server.js\nnpm init\nnpm i express --save
\n
// server.js\nconst express = require("express");\nconst app = express();\n\napp.get("/user/:id", (req, res) => {\n  const id = req.params.id;\n  res.json({\n    id,\n    name: `John Doe #${id}`\n  });\n});\n\napp.listen(80, () => {\n  console.log("Server running on port 80");\n});
\n

Optionally, you can try running it if you have Node.js installed and test the endpoint /user/{id} with curl:

\n
node server.js\n\n// request:\ncurl http://localhost:80/user/123\n\n// response: {"id":"123","name":"John Doe #123"}
\n

Next, add a Dockerfile and .dockerignore:

\n
// Dockerfile\nFROM node:12\n\nWORKDIR /usr/src/app\nCOPY package*.json ./\nRUN npm i\nCOPY . .\n\nEXPOSE 80\nCMD ["node", "server.js"]
\n
// .dockerignore\nnode_modules
\n

Then, build the image and push it to the Docker Hub registry:

\n\n
docker build -t <YOUR_DOCKER_ID>/my-backend-api .\ndocker push <YOUR_DOCKER_ID>/my-backend-api
\n

3. Deploy

\n

Now, we deploy the image to our local Kubernetes cluster. We use the default namespace.

\n

Create a deployment:

\n
kubectl create deploy my-backend-api --image=andyy5/my-backend-api
\n\n
kubectl create -f deployment.yaml
\n
// deployment.yaml\napiVersion: apps/v1\nkind: Deployment\nmetadata:\n  name: my-backend-api\n  labels:\n    app: my-backend-api\nspec:\n  replicas: 1\n  selector:\n    matchLabels:\n      app: my-backend-api\n  template:\n    metadata:\n      labels:\n        app: my-backend-api\n    spec:\n      containers:\n      - name: my-backend-api\n        image: andyy5/my-backend-api
\n

Create a service:

\n
kubectl expose deploy my-backend-api --type=ClusterIP --port=80
\n\n
kubectl create -f service.yaml
\n
// service.yaml\napiVersion: v1\nkind: Service\nmetadata:\n  name: my-backend-api\n  labels:\n    app: my-backend-api\nspec:\n  type: ClusterIP\n  ports:\n  - port: 80\n    protocol: TCP\n    targetPort: 80\n  selector:\n    app: my-backend-api
\n

Check that everything was created and the pod is running:

\n
kubectl get deploy -A\nkubectl get svc -A\nkubectl get pods -A
\n

Once the pod is running, the API is accessible within the cluster only. One quick way to verify the deployment from our localhost is by doing port forwarding:

\n\n
kubectl port-forward my-backend-api-84bb9d79fc-m9ddn 3000:80
\n\n
curl http://localhost:3000/user/123
\n

To correctly manage external access to the services in a cluster, we need to use ingress. Close the port-forwarding and let's expose our API by creating an ingress resource.

\n\n

Create an Ingress resource with the following YAML file:

\n
kubectl create -f ingress.yaml\nkubectl get ing -A
\n
// ingress.yaml\napiVersion: networking.k8s.io/v1\nkind: Ingress\nmetadata:\n  name: my-backend-api\n  annotations:\n    ingress.kubernetes.io/ssl-redirect: "false"\nspec:\n  rules:\n  - http:\n      paths:\n      - path: /user/\n        pathType: Prefix\n        backend:\n          service:\n            name: my-backend-api\n            port:\n              number: 80
\n\n
curl http://localhost:80/user/123
\n

If you want to learn more on how to deploy using a managed Kubernetes service in the cloud, such as Google Kubernetes Engine, then check out the excellent guides on the official Kubernetes docs.

\n","frontmatter":{"date":"February 03, 2021","updated_date":null,"description":"Beginner guide on how to create and deploy a REST API in local Kubernetes.","title":"How to Deploy a REST API in Kubernetes","tags":["Kubernetes"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.492537313432836,"src":"/static/3e013df11f99b320029a3e4aadafc0ea/58556/cover.webp","srcSet":"/static/3e013df11f99b320029a3e4aadafc0ea/61e93/cover.webp 200w,\n/static/3e013df11f99b320029a3e4aadafc0ea/1f5c5/cover.webp 400w,\n/static/3e013df11f99b320029a3e4aadafc0ea/58556/cover.webp 800w,\n/static/3e013df11f99b320029a3e4aadafc0ea/99238/cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Andy Yeung","github":null,"avatar":null}}}},{"node":{"excerpt":"E-commerce business is growing day by day as it saves time and cost for people traveling to meet or perform businesses in person. More…","fields":{"slug":"/engineering/electronic-identity-integration/"},"html":"

E-commerce business is growing day by day as it saves time and cost for people traveling to meet or perform businesses in person. More people are conducting business online by creating accounts using email or phone verification. This has posed a challenge for everyone to identify the persons who we are claiming online. Online hackers have used false Identity to deceive or defraud someone else. Hence, Electronic Identity ( eID) provides a way for businesses to verify a person's identity online and reduce the chances of Identity Fraud.

\n

What is an electronic identity?

\n

Electronic identity is an electronic card or device with a unique identity number issued by either a government agency or some banks. A consumer needs to go to the government agency or some banks and show valid identity documents. After the document verification, an Electronic Identity is issued to the consumer. Examples of e-IDs are Danish NemID, Swedish BankID, and Dutch DigiD.

\n

Most service providers such as financial institutions and insurance firms provide services online and are recognizing an opportunity in implementing eID due to strict Know Your Customer (KYC) and Anti-Money Laundering (AML) requirements.

\n

eIDs are used to authenticate consumers online across multiple platforms and services. eIDs also allow the consumers to sign documents online, and the companies can trust the signature as the electronic identity is issued by the government or banks based on physical identity documents. This is fast, convenient, and secure for the consumers as they are saved from completing registration forms for multiple services. Hence, this increases the conversion for the businesses.

\n

Integrating eID authentication with LoginRadius

\n

LoginRadius supports all the major industry federated SSO methods. Hence, you can integrate eID authentication with LoginRadius using some third application like Criipto, which supports the industry-standard SSO methods. Criipto allows the integration of an eID with the LoginRadius application using JWT SSO Login flow. Jason Web Token ( JWT) is a signed token that transfers the information from one service to another securely.

\n

Prerequisite

\n\n

Register your LoginRadius app in your Criipto account

\n
\n

Please see the following steps to register your LoginRadius app in your Criipto account.

\n
    \n
  1. Login in to your Criipto account.
    2. \n
  2. Click + sign to add an application under the Applications tab.
    3. \n
  3. \n

    Add the following information:\n\"criipto

    \n\n
    4. \n
  4. Click the save button.
    5. \n
\n

Configure the Criipto settings in the LoginRadius

\n
    \n
  1. Login into the Admin Console
    2. \n
  2. Navigate to Platform Configuration>Authentication Configuration>Custom IDPs>JWT Provider\n\"JWT
    3. \n
  3. Click + Add A New Provider button highlighted on the above screen, and the following JWT configuration form fields will appear:\n\"JWT
    4. \n
  4. \n

    Complete the following details in the JWT provider

    \n\n
    5. \n
  5. Click the Add button
    6. \n
\n","frontmatter":{"date":"January 29, 2021","updated_date":null,"description":"An electronic identity is an electronic card or device with a unique identity number issued by either a government agency or some banks.LoginRadius supports all the major industry federated SSO methods. Hence, you can integrate eID authentication with LoginRadius using some third application like Criipto, which supports the industry-standard SSO methods.","title":"Integration with electronic identity (eID) ","tags":["Electronic Identity","Bank ID","Criipto","LoginRadius"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b916d567b9e41b342cccd7613d625bf6/8829b/Integration_with_eID.webp","srcSet":"/static/b916d567b9e41b342cccd7613d625bf6/61e93/Integration_with_eID.webp 200w,\n/static/b916d567b9e41b342cccd7613d625bf6/1f5c5/Integration_with_eID.webp 400w,\n/static/b916d567b9e41b342cccd7613d625bf6/8829b/Integration_with_eID.webp 680w","sizes":"(max-width: 680px) 100vw, 680px"}}},"author":{"id":"Jitender Agarwal","github":null,"avatar":null}}}},{"node":{"excerpt":"In C#, We have majorly two types of data types Value and Reference type. We can not assign a null value directly to the Value data type. In…","fields":{"slug":"/engineering/nullable-csharp/"},"html":"

\nIn C#, We have majorly two types of data types Value and Reference type. We can not assign a null value directly to the Value data type. In this case, C# 2.0 provides us the Nullable types to assign a value data type to null.

\n

What is Nullable types?

\n

As described above, The Nullable types used to assign the null value to the value data type. That means we can assign a null value directly to a variable of the value data type. We can declare null value using Nullable<T> where T is a type like an int, float, bool, etc.

\n

Nullable types represent the Null value as well the actual range of that data type. Like the int data type can hold the value from -2147483648 to 2147483647 but a Nullable int can hold the value null and range from -2147483648 to 2147483647

\n

How to declare Nullable types

\n

There are two ways to declare Nullable types.

\n
Nullable<int> example;
\n

OR

\n
int? Example;
\n

Properties of Nullable types

\n

Nullable types have two properties.

\n
    \n
  1. HasValue
    2. \n
  2. Value
    3. \n
\n

HasValue: This property returns a bool value based on that if the Nullable variable has some value or not. If the variable has some value, then it will return true; otherwise, it will return false if it doesn’t have value or it’s null.

\n
Nullable<int> a = null;\nConsole.WriteLine(a.HasValue); // Print False\nNullable<int> b = 9;\nConsole.WriteLine(b.HasValue); // Print True
\n

Value: This property gives the value of the Nullable type variable. If the variable has some value, it will return the value; else, it will give the runtime InvalidOperationException exception when the variable value is null.

\n
Nullable<int> a = null;\nConsole.WriteLine(a.Value); // Gives run time exception of type 'InvalidOperationException'
\n
Nullable<int> b = 9;\nConsole.WriteLine(b.Value); // Print 9
\n

Method of Nullable types

\n

GetValueOrDefault(): This method returns the actually assigned value of the Nullable type variable if the value is not null, and if the variable value is null, then it will give the default value of that data type. Here is the example code

\n
Nullable<int> a = 9;\nConsole.WriteLine(a.GetValueOrDefault()); // Returns 9
\n
Nullable<int> a = null;\nConsole.WriteLine(a.GetValueOrDefault()); // Returns 0
\n

Rules of using Nullable types:

\n

To use the Nullable type as a local variable, it should be declared first; it will give a compile-time error. This rule is similar to the value data type.

\n
int? b;\nConsole.WriteLine(b.Value); //Compile time error 'use of unassigned local variable b'
\n

If the Nullable variable is a property in a class and after that, if we are accessing that Nullable variable, then it will not give any error because, in the class variable, it is declared as null automatically.

\n
class Test\n{\n     public int? B;\n}\nclass Program\n{\n    static void Main(string[] args)\n    {\n        Console.WriteLine(new Test().B); // No compile time error\n    }\n}
\n

null coalescing operator (??)

\n

We can not assign the Nullable type variable value to the non-nullable type variable directly. As in the example below, if we try to assign the value, it will give the compile-time error.

\n
int? a = 10;\nint b = a;//Compile time error `Cannot implicitly convert type 'int?' to 'int'. An explicit conversion exists (are you missing a cast?)`
\n

Note: We can use compare operators == and != operator with Nullable type variables and non Nullable type variables.

\n

For the Nullable variable, we can use the null coalescing operator (??) to check if the variable value is null or not. Then we can assign the non-nullable type variable value according to that. This operator can be used when we are unsure that at run time if that Nullable variable's value is changed according to our logic or not. Here is an example of that

\n
int? a=null;\nint b=a?? 10;\nConsole.WriteLine(b);  // Prints 10
\n

In the above example, if the variable a value is null,, it will assign the value 10 to b variable. In that case, b is assigned with value 10, and the printed value will be 10.

\n

Conclusion

\n

In this article, We have discussed the Nullable types, and it's properties and methods. The main advantage of using the Nullable types is that we can store the Null value in a column of a database using this type. If you want to learn more about C# here is an article written by me on How to Use Enum in C#

\n","frontmatter":{"date":"January 29, 2021","updated_date":null,"description":"Nullable is a term in C# that allows an extra value null to be owned by a form. We will learn in this article how to work with Nullable types in C#.","title":"How to Work with Nullable Types in C#","tags":["C#","Nullable"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/41c1ba90d916c8835ab6561b428a152d/58556/coverimage.webp","srcSet":"/static/41c1ba90d916c8835ab6561b428a152d/61e93/coverimage.webp 200w,\n/static/41c1ba90d916c8835ab6561b428a152d/1f5c5/coverimage.webp 400w,\n/static/41c1ba90d916c8835ab6561b428a152d/58556/coverimage.webp 800w,\n/static/41c1ba90d916c8835ab6561b428a152d/210c1/coverimage.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hemant Manwani","github":"hemant404","avatar":null}}}},{"node":{"excerpt":"Many of us have to choose between Merge and Rebase as a Developer. Here I'll explain what merge and rebase are, why you should use them, and…","fields":{"slug":"/engineering/git-rebase-vs-git-merge/"},"html":"

Many of us have to choose between Merge and Rebase as a Developer. Here I'll explain what merge and rebase are, why you should use them, and how to do so.

\n

The same function is fulfilled by Git Merge and Git Rebase. They are built to incorporate adjustments into one from different divisions. Although the end objective is the same, it is done in various ways by those two approaches, and it is useful to know the difference as you become a better developer of software.

\n

What are Git Merge and Git Rebase?

\n

Git Merge and Git Rebase are both used to combine the changes of branches but in a distinct way.

\n

Git Merge - For developers using version control systems, merging is a prevalent method. Merging takes the contents of a source branch and combines them with a target branch, to be more precise. Only the target branch is updated in this process. The history of the source branch remains similar.

\n

Git Rebase - Another way to integrate modifications from one branch to another is by Rebase. Rebase compresses all the modifications into a single patch. The patch is then inserted into the target branch.

\n

Git Merge

\n

Combine multiple branch histories together.

\n
  A---B---C feature\n /\nD---E---F---G master
\n

if we are merging feature and master branch, then it would be

\n
  A---B---C feature\n /               \\\nD---E---F---G---H master
\n

Commands for merging feature and master branch

\n

git checkout feature\ngit merge master

\n

Note:

\n\n

Git Rebase

\n

Reapply commits on top of the base branch

\n
   A---B---C feature\n /\nD---E---F---G master
\n

if we are rebasing the feature branch onto the master branch, then it would be

\n
\t   A'--B'--C' feature\n\t /\n\tD---E---F---G master
\n

Commands for merging feature and master branch

\n

git checkout feature\ngit rebase master

\n

Note:

\n\n

When to use Git Rebase or Git Merge

\n

Choose Merge

\n\n

Choose Rebase

\n\n

Conclusion

\n

I hope some perspectives on Git merge and Git rebase have been provided by this description. The strategy of merge vs rebase is still debatable. But maybe this article will help to dispel your doubts and encourage you to take an approach that works for your team. Here are few articles posted by me that will help you in learning few more things in Git:

\n
    \n
  1. How to use Git Cherry Pick
    2. \n
  2. How to Perform a Git Force Pull
    3. \n
\n

Do comment on the subjects that you would like me to write about in the coming weeks :)

\n","frontmatter":{"date":"January 27, 2021","updated_date":null,"description":"In this post, I will give you a walkthrough on merge and rebase, comparing Git rebase vs. Git merge to find out the similarities and differences.","title":"Git merge vs. Git Rebase: What's the difference?","tags":["GIT"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/23c891d4a8760d428bfc6f05aa86f387/58556/merge.webp","srcSet":"/static/23c891d4a8760d428bfc6f05aa86f387/61e93/merge.webp 200w,\n/static/23c891d4a8760d428bfc6f05aa86f387/1f5c5/merge.webp 400w,\n/static/23c891d4a8760d428bfc6f05aa86f387/58556/merge.webp 800w,\n/static/23c891d4a8760d428bfc6f05aa86f387/99238/merge.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":90,"currentPage":16,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}