All

|

Essays

|

Notes

Session and token authentication methods are used by the server to verify the client request is authenticated or not.

Session Authentication

Session-based authentication is an example of stateful authentication, which involves storing user authentication data on the server. With this method, when a user logs into a website, the server creates a small file that stores user information such as a unique session ID, login time, expiration time, and other relevant data. This file is stored in the database or in-memory cache. This session ID is then sent back to the client and stored in the client’s browser as a cookie. For subsequent requests, this cookie is passed back to the server. This allows the server to verify the session ID and provide a response based on the current state.

This method is easy to use, as cookies are natively supported by browsers, so no additional JavaScript is needed. But when the application grows decoupling the frontend from the backend becomes essential. Session-based authentication can be limiting in this regard.

Token Authentication

Instead of relying on server-side sessions, token-based authentication uses tokens and it is an example of stateless authentication. When user log in, the server create a token (usually a JSON Web Token, or JWT) using a secret key and sent to the user. For subsequent requests, user will send this token along with request and server will verify if the token is valid or not.

This method gives more scalability and stateless for the apps, but the server does not authenticate the user, so linking a token to its user can be more difficult. Also in any chance an attacker got acess to the token, they will get access to the server.

References

LogRocket, Authfear, criipto.

In software development, a canary release (or canary deployment) refers to the practice of rolling out a new version of software to a small, select group of users before deploying it to the entire user base. The term “canary” comes from the old practice of using canaries in coal mines to detect dangerous gases; if the canary showed signs of distress, miners knew to evacuate. Similarly, in software, the canary release acts as an early warning system to detect issues with new code before it reaches a wider audience.

Benefits of Canary Releases: Reduced Risk: Limits the impact of potential issues by exposing the new version to only a small group first. Real-World Testing: Provides the opportunity to observe how the new version performs in a live environment. Faster Rollback: Easier to revert changes if problems are detected, reducing downtime or negative user impact.

Here is the step by step guide to create a React project with Vite.

• Run the command npm create vite in the command prompt.
• Afer the script you will be prompted to enter a project name.
• After entering the project name, Vite will prompt you to select a framework. Select the framework as React.
• After selecting framework, Vite will prompt you to select language type.
• After selecting the language type, Vite will show the message as Scaffolding the project in the location.
• After that you can go to the folder and instruct to install the dependencies with the command npm install.

And here is the step to install Tailwind CSS as a Vite plugin.

• Run the command npm install tailwindcss @tailwindcss/vite to Install tailwindcss and @tailwindcss/vite via npm.

• Add the @tailwindcss/vite plugin to your Vite configuration.

  import { defineConfig } from 'vite'
  import tailwindcss from '@tailwindcss/vite'
  export default defineConfig({
  plugins: [
      tailwindcss(),
  ],
  })
  

• Add an @import "tailwindcss"; to your CSS file that imports Tailwind CSS.

• After that you can run the project with command npm run dev or whatever command is configured in your package.json file..

References

DigitalOcean, TailwindCSS

I noticed every design is incorpating rounded edges in their rectangle shapes (yes, my website cards also). Today I Googled it and after reading some articles, I stumbled upon Skeuomorphism.

So, here I am noting down what is Skeuomorphism?

Skeuomorphism is a term most often used in graphical user interface design to describe interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. A well-known example is the recycle bin icon used for discarding files. Skeuomorphism makes interface objects familiar to users by using concepts they recognize.

In UI design, skeuomorphism had its boom with the advent of the first iPhone. Steve Jobs believed that UI elements should resemble real-life objects to increase ease of use. For example, the Notes app looked like a notepad. However, as users became more familiar with the iOS interface, Apple transitioned to flat design with fewer shadows and textures. Flat design stripped back skeuomorphic elements to essentials for faster loading and decluttered touchpoints.

References

Interaction Design