DEV Community: Jeeva Ramanathan

Effortless Full Stack Development: Set Up Django-React Application with One Command Using Daytona

Jeeva Ramanathan — Fri, 10 Jan 2025 11:48:36 +0000

Don't be stuck at dev environment setup

Setting up both the frontend and backend for a Django-React full stack project can be a daunting and time-consuming task. You'll need to install the frontend dependencies, set up the backend separately, and manage migrations. But what if you could configure everything with just one command?

This is where Daytona comes into play. Daytona simplifies the development environment setup, allowing you to focus on building your application rather than wrestling with configurations.

In this blog, we’ll take a step-by-step approach:

Setting up a Django - React with Vite full stack project
- Use a sample Django-React full stack repository to get started.
- Create a devcontainer.json and test it locally
What is Daytona, and why to use it?
- Explore Daytona’s purpose and key benefits.
- Learn how to setup and integrate Daytona into your project.
- Managing environment variables

Setting Up a Django - React with Vite Full Stack Project

We’ll use the Django-React Full Stack App from this repository as an example.

Prerequisites

Docker
VS Code (or any IDE based on your project tech stack)
Git

1️⃣ Clone the Sample Repository
Fork the repository and run the following commands to clone the repository in your system and navigate into the project folder.

git clone https://github.com/<user_name>/Django-React-Full-Stack-App.git
cd Django-React-Full-Stack-App

This is the project folder structure:

root/
│
├── frontend/
│   └── (Your React + Vite frontend code)
│
├── backend/
│   └── (Your Django backend code)
│
└── .devcontainer/
    └── devcontainer.json

2️⃣ Creating devcontainer
Create a .devcontainer folder in the project root and add the devcontainer.json. (.devcontainer/devcontainer.json)

A devcontainer.json file is essential for defining the environment in your VS Code Remote Development setup, specifying everything from the required programming languages to runtime tools and dependencies.

Using a devcontainer.json ensures a uniform development environment across all systems, streamlining the processes of development, testing, and debugging.

With Daytona's built-in support for Dev Containers, setting up a complete development environment with all the tools and libraries you need becomes quick and effortless.

Let's add devcontainer.json for our project as below. You can also use devcontainer.ai to quickly generate this file by providing the repository URL, with the help of AI. This will automatically create a devcontainer.json tailored to your project needs.

{
  "name": "Django-React Full Stack App", 
  "image": "mcr.microsoft.com/devcontainers/python:3.12-bookworm",
  "forwardPorts": [8000, 5173],
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "18"
    }
  },
  "postCreateCommand": "npm install --prefix frontend && pip install -r backend/requirements.txt && python backend/manage.py makemigrations && python backend/manage.py migrate",
  "remoteUser": "vscode"
}

Let's break down the devcontainer.json

name: Specifies the name of the dev container. You can set it to any value that describes the project.
image: Defines the Docker image to be used for the container. In this case, it's mcr.microsoft.com/devcontainers/python:3.12-bookworm, which includes Python 3.12 and is based on the Debian Bookworm distribution for the backend part of the project.
forwardPorts: Forwards the specified ports (8000 for Django and 5173 for React with Vite) from the container to your local machine, allowing you to access the app in your browser.
features: Installs additional features. Here, it's setting up Node.js version 18 for the frontend part of the project.
postCreateCommand: Runs commands automatically after the container is created. It installs dependencies for both the frontend (React) and backend (Django), followed by applying Django migrations to set up the database.
remoteUser: Defines the user inside the container. In this case, it's set to vscode, which is typically used for Visual Studio Code's remote development environments.
customizations:

"customizations": {
    "vscode": {
      "settings": {
        "python.defaultInterpreterPath": "/usr/local/bin/python",
        "python.linting.enabled": true,
        "python.linting.pylintEnabled": true
   }
 }
}

You can also configure tool-specific properties and add any additional settings specific to your development environment.
More details can be found at Dev Containers

3️⃣ Testing it locally
Install the Dev Containers extension in VS Code, then rebuild the container:
(If you have the Dev Containers extension installed, VS Code will prompt you to reopen the folder in the container. Accept the prompt)

Ctrl+Shift+P > Dev Containers: Rebuild Container and Reopen in Container

Once the container rebuilds without errors, you’re ready to proceed😎.

4️⃣ Pushing to GitHub
Once everything is configured and tested locally, add the changes, commit and push your code to GitHub.

git push origin main

What is Daytona, and Why to Use It?

Daytona is a self-hosted, secure open source development environment manager. Daytona's support for Dev Containers standard enables developers to tailor their environments to exact specifications and share configurations for efficient collaboration. It also supports multiple tech stacks and environments.

Scalable: Create multiple environments(workspaces) simultaneously, ideal for collaboration or switching between projects.
Flexible: Customize environments with dev container files, and automation for tailored setups.
Integration with Popular Tools: Seamlessly integrates with IDEs like VS Code, JetBrains and more for a smooth workflow.
Eliminates Setup Hassles: Automatically creates clean, isolated environments, removing the need to manually install dependencies or manage permissions.
Anywhere Accessibility: Operate from localhost or cloud providers like AWS, Azure, GCP, and Digital Ocean.
Compatibility with Any Git Platform: Daytona works with all major Git platforms, including GitHub, GitLab, and Bitbucket, ensuring a versatile development experience.

In short, Daytona streamlines your development setup, making it scalable, secure, and hassle-free, so you can focus on coding with just one step to start.

First, let's install Daytona on your local machine. Follow the instructions based on your operating system: Daytona Installation Documentation

Platform	Installation Command
Windows	$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq "AMD64") { "amd64" } else { "arm64" } md -Force "$Env:APPDATA\bin\daytona";[System.Net.ServicePointManager]::SecurityProtocol =[System.Net.SecurityProtocolType]'Tls,Tls11,Tls12'; Invoke-WebRequest -URI "https://download.daytona.io/daytona/v0.50/daytona windows-$architecture.exe" -OutFile "$Env:APPDATA\bin\daytona\daytona.exe"; $env:Path += ";" + $Env:APPDATA + "\bin\daytona"; [Environment]::SetEnvironmentVariable("Path", $env:Path,[System.EnvironmentVariableTarget]::User); daytona serve;
Linux	`(curl -sf -L https://download.daytona.io/daytona/install.sh) && daytona server -y && daytona`
macOS	`(curl -sf -L https://download.daytona.io/daytona/install.sh) && daytona server -y && daytona`
Homebrew	`brew tap daytonaio/tap`and `brew install daytona`
Nix	`nix-shell -p daytona-bin`

View Daytona on GitHub

Configure Daytona for Your Project

Now, let's configure Daytona for your Django-React project. This setup is a one-time effort (from 1-4) but super crucial for seamless integration.

Once you've installed Daytona, run daytona serve, which will start the Daytona server.

1️⃣ Connect Your Git Provider
You’ll want Daytona to communicate with your Git repositories (like GitHub, GitLab, BitBucket and others.

daytona git-providers add

Follow the prompts to authenticate with your Git provider. This will let Daytona access your repositories without needing to reauthenticate every time. 🎉

2️⃣ Install a Cloud Provider & Set a Target Environment (Optional)

Next, you’ll need a cloud provider if you're planning to deploy your application on platforms like AWS, Azure, or GCP. Run the following command to install your cloud provider:

daytona provider install

Then, set where you want your environment to run (e.g., Docker, AWS, GCP, Azure):

daytona target set

Daytona will remember your choice for next time.

3️⃣ Choose Your IDE
Finally, Daytona integrates with popular IDEs like VS Code, IntelliJ, and more. To set your default IDE:

daytona ide

This will configure your IDE to work seamlessly with Daytona, giving you all the comfort and tools you’re used to while working in a containerized environment. Additionally, running daytona code will open the code in the selected IDE.🎨

4️⃣ Create Your Workspace 🛠️

Your environment is all set up! Now it’s time to create the project workspace. Run the following command to create the workspace for Django-React app:

daytona create <REPO_URL>

In this case it's https://github.com/<user_name>/Django-React-Full-Stack-App

Once you run that single command, it will create a workspace and install all the dependencies for both frontend and backend. 🚀

You’ll now have a fully configured development environment that’s ready to go. To run your project locally, run:

cd frontend && npm run dev and cd backend cd backend && python manage.py runserver

This will spin up your React frontend and Django backend for local development. 💻

Ready to Code! 🎉

With your Git provider, cloud platform, target, and IDE set up, you’re ready to start developing! Daytona simplifies container management, version control, and cloud deployments, allowing you to focus on what matters most—coding your Django-React app. 😎

No more repetitive configurations—just get in and start building. 🚀

Resume Work on Your Project

If you want to work on your project again, simply run the following commands to start where you left off:

daytona serve #starts your daytona server
daytona start <your_workspace_name>
daytona code #Select the project, and Daytona will open it for you to continue coding.

Managing environment variables

There are multiple ways to manage the env variables and few are below.

1️⃣ Create a .env File
A simple and clean approach is to create a .env file manually in your project root directory and add your environment variables to it. This ensures that the variables are loaded whenever your project runs. Here's an example:

VITE_API_URL=http://localhost:8000

This method is straightforward and helps you keep control over your environment variables, especially for existing workspaces.

2️⃣ Set Environment Variables Using Daytona
You can also set environment variables directly through Daytona before creating a workspace by using the following command:

daytona set env KEY=VALUE

Note: It’s not recommended to use this method as you lose control over the process. The environment variables set this way will only be applied to new workspaces. Existing workspaces will not receive these variables while they are running, which could lead to inconsistency across your environment.

3️⃣ Automatically Create .env Inside the frontend Folder (Using Post-Create Command)

To ensure the .env file is created automatically in the frontend folder, you can add the following postCreateCommand to your configuration:

"postCreateCommand": "bash -c 'test -f frontend/.env || touch frontend/.env'"

This command checks if the .env file exists in the frontend folder, and if not, it creates it.

Conclusion

With Daytona, you can forget about the manual setup of development environments across various tech stacks and start coding immediately. The daytona create command ensures your environment is set up in no time, saving you effort and eliminating manual configurations. Daytona’s flexibility and scalability make it an invaluable tool for efficient, hassle-free development workflows, regardless of the tech stack.

Thank you for reading! Feel free to share your thoughts and opinions in the comments 😊. I hope you found this helpful! You can connect with me on LinkedIn, X, GitHub.
Republished at https://medium.com

Few other posts to check here

AI-Powered GitHub Pull Request Tracker for Your Hacktoberfest (and More!)

Jeeva Ramanathan — Wed, 09 Oct 2024 03:44:52 +0000

Track the status of your GitHub Pull Requests for Hacktoberfest, Devfest.ai, Taipy Hacktoberfest and various Open Source Contributions with AI Assistance

Why This App?

As a contributor to open source, I recently came across CopilotKit. Being involved in React development for a while, I found CopilotKit (the simplest way to integrate production-ready Copilots into any product) interesting.

There are several open-source events happening during Hacktoberfest, including Hacktoberfest, Devfest.ai, Taipy Hacktoberfest and more, each with different rules. It became quite challenging to keep track of pull request statuses and identify which contribution repositories were associated with each event. This challenge inspired me to leverage CopilotKit to create a solution that simplifies tracking and managing contributions across these events.

Try the PR Tracker app here

user prompt: Hi, I want to see the pull requests created by jeevaramanathan for the Hacktoberfest 2024 event.
assistant: I've fetched the pull requests created by jeevaramanathan for the Hacktoberfest 2024 event. Is there anything else you need help with?

It retrieves all the pull requests that come under hacktoberfest 2024 and displays on the table using copilotkit action.

Key Features

AI-Powered Assistance: Get help from AI to easily track the status of pull requests for different open-source events.
Event-Specific Filtering: Filter pull requests by open-source events like Hacktoberfest, Devfest.
Customizable Date Range: Allows you to set specific date ranges to focus on contributions made during certain periods regardless of any event.
Responsive Design: Built with Tailwind CSS and shadcn-ui for a seamless user experience across all devices.
Theme and Color Change: Switch between different themes and customize colors for a personalized user experience.
Sharable Links: Easily generate links to highlight your pull requests or share your progress with others, making collaboration seamless.

Tech Stacks

Built with Next.js (React), Tailwind CSS, ShadCN UI, Apollo Client, and CopilotKit for AI functionalities.

How It's Built

I leveraged the GitHub API to retrieve details and analyzed REST endpoints and GraphQL. In this case, GraphQL was more efficient, as it allowed me to retrieve data in the structure I wanted instead of its default format.

To integrate with Next.js, I used Apollo Client with the useLazyQuery. A lazy query allows you to execute a query only when needed, helping to optimize performance.

After fetching the data, I filtered it based on event-specific rules. For Devfest, I parsed the devfest to get whitelisted repositories dynamically.

Next comes CopilotKit

CopilotKit provides an easy way to integrate AI capabilities into your web application. I utilized the free version of Groq model, alongside the back-end component CopilotKit runtime.

Here's a glimpse of some of the prompts I used:

useCopilotAction({
  name: "setUsername",
  description: "Sets the username of the GitHub user.",
  parameters: [
    {
      name: "username",
      type: "string",
      description: "GitHub username to search for",
      required: true,
    },
  ],
  handler: ({ username }) => {
    setUserName(username);
  },
});

useCopilotAction({
  name: "setEvent",
  description:
    "Set the selected event to hacktoberfest, devfest, taipy event or none based on user's input",
    parameters: [
      {
        name: "event",
        type: "string",
        description:
          "Event name to switch to (hacktoberfest, devfest, taipy, none)",
        enum: ["hacktoberfest", "devfest", "taipy", "none"],
        required: true,
      },
    ],
    handler: ({ event }) => {
      setSelectedEvent(event);
    },
  });

In the frontend, I utilized the CopilotPopup component, providing a popup interface for interacting with the copilot by setting the initial instructions to guide copilot in retrieving details of GitHub pull requests for various events.

import { CopilotPopup } from "@copilotkit/react-ui";
import { CopilotKit } from "@copilotkit/react-core";
<CopilotKit runtimeUrl="runtimeUrl">
  <CopilotPopup
    instructions={
      "Help the user to fetch the details of github pull requests for various" +
      "events like hacktoberfest, devfest."
    }
  />
</CopilotKit>

Sample prompt

Conclusion

If this application helps you track your pull requests, there are plans to refine it further by adding additional functionalities.

If you like this project, don't forget to check out the app and the repository, and leave a star⭐. Contributions and feedback are always welcome if you're interested in enhancing the app! This is my first Next.js application, so it might be a bit clumsy.

Feel free to try it out and share your feedback!

App Link: https://github-ai-pr-tracker.vercel.app/
Repository Link: https://github.com/JeevaRamanathan/github-ai-pr-tracker/

Please note that the copilot uses the free version of the model, which may occasionally lead to unexpected behaviors or slower responses. Copilot actions are being improved.

Happy Contributing 🎉

While engaging in open-source events like Hacktoberfest, exploring projects on Taipy and AI-based projects on Devfest.ai, and contributing to them and giving them a star could lead to valuable learning experiences and opportunities to win swags!

Thank you for reading! Feel free to share your thoughts and opinions in the comments 😊. I hope you found this helpful! You can connect with me on LinkedIn, X, GitHub. Few other posts to check here.

Social Resizer: Generate Perfectly-Sized Images for Every Social Platform

Jeeva Ramanathan — Sun, 12 May 2024 18:23:52 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

Application Link: https://social-resizer.netlify.app/

What I Built

I built a dynamic image resizer that caters to every major social media platform. The application allows users to upload images, apply custom resizing, and even adjust image colors. The highlight of this application is its ability to automatically resize images to fit the ideal dimensions for various social media platforms using netlify image CDN, ensuring your posts always look their best.

Demo

Experience the Social Resizer application here and begin resizing your images effortlessly.

Explore the Features:

Upload Your Images : Start by effortlessly dragging or uploading your images to our platform.
Customize Resizing Options & Color Tone: Adjust your image dimensions with precision to meet your specific needs. Enhance your images with a variety of color filters to match your brand or mood. Color filters are done using CSS (ImageCDN doesn't support color filters by now).

Optimized for All Platforms: Choose the social media platform that meets your requirements, edit and enhance your image by resizing and applying color tones, then effortlessly download the optimized image for easy sharing. Enhance your image and download it. 🎨✨ You're all set for your post! Enhanced cover photo

Platform Primitives

This application leverages the power of Netlify's Image CDN. When a user uploads an image, it is stored in imagekit and processed using Image CDN. Users can then select their preferred social media platform and post type, prompting the application to generate a URL with the necessary parameters for the Netlify Image CDN to resize the image. This process happens dynamically, ensuring that the image is always perfectly sized for the chosen platform and post type. By utilizing Netlify's Image CDN, the application ensures optimal performance and efficient delivery of images, tailored to various platform sizes.

Code snippet that generates url leveraging Netlify Image CDN

const generateImageUrl = () => {
  let url = `/.netlify/images?url=${imageUrl}`;

  url += `&fit=${fit}`;
  url += `&w=${imageSize.width}`;
  url += `&h=${imageSize.height}`;
  url += `&q=${quality}`;
  url += `&position=${position}`;
  url += `&fm=${format}`;

 return url;
}

Challenges faced

During the initial development of the application, handling images directly and converting them to base64 format resulted in inefficiencies due to the large size of high-resolution images. This approach led to performance issues and slow load times.
I planned to use ImageKit for storing and managing the images uploaded by users. However, I encountered several issues with this approach, particularly with server-side operations.

To overcome these challenges, I switched to using Netlify Functions for handling image uploads and storage. This significantly improved the application's performance, resulting in faster load times and a smoother user experience. The switch also simplified server-side operations, making the development process more efficient and allowing a focus on improving the application's core functionality.

Reference for Social Media Sizes - https://blog.hootsuite.com/social-media-image-sizes-guide/

Thanks for reading. Feel free to comment your opinion😊. You can hit me up on Linked In | Github | Twitter
Few other posts to check here.

Decoding Why 0.6 + 0.3 = 0.8999999999999999 in JS and How to Solve?

Jeeva Ramanathan — Thu, 16 Nov 2023 19:05:08 +0000

Understanding IEEE 754 Floating-Point Numbers and also exploring how 0.1+0.2 is 0.30000000000000004 step-by-step

While working on an open-source calculator repository during Hacktoberfest, I noticed that certain decimal calculations were not producing the expected results, like 0.6+0.3 will not result in 0.9 and was wondering if there was an issue with the code. However, upon further analysis discovered that it was the actual behavior of JavaScript. And delved deep into that to understand its internal workings.

In this blog post, I will share my insights and discuss a few approaches to solve this.

In everyday math, we know adding 0.6 + 0.3 equals 0.9, right? But when we turn to computers it results in 0.8999999999999999. Surprisingly, this doesn’t just happen only in JavaScript; it’s the same in many programming languages like Python, Java, C too. Also, it’s not just about this specific calculation. There are many more decimal calculations showing similar not-quite-right answers.

Why does this happen?

It’s all about how computers handle floating-point numbers. Decimal numbers are stored in the computer’s memory using a format called IEEE 754 standard. IEEE Standard 754 floating point is the most common representation today for real numbers on computers. This standard includes different types of representation, mainly Single precision(32 bits) and Double precision(64 bits). JavaScript follows IEEE 754 Double Precision Floating Point Standard.

IEEE 754 Double Precision Floating Point Format

Double precision is composed of 64bits including 1 sign bit, 11 exponent bits , and 52 mantissa (fractional part) bits.
Any decimal number given is stored in this double precision IEEE 754 binary floating point format only. Finite 64-bit representations in computer systems can’t accurately express all decimal values, especially those with infinite decimal expansions, leading to minor discrepancies in results when working with certain numbers in binary.

Let’s understand with an example how decimal numbers are stored and unveil why 0.6+0.3 equals 0.8999999999999999

Represent 0.6 in IEEE 754 Double Precision Floating Point Format.

# Step 1 : Converting the decimal (0.6)₁₀ to its binary representation base 2

Integer Part: 0/2 = 0

Fractional Part:

Repeatedly multiply by 2, noting each integer part of the results, until the fractional part reaches zero.

0.1 cannot be exactly represented as a binary fraction. The highlighted part recurs endlessly, forming an infinite sequence. Also, we didn’t get any fractional part that is zero.

# Step 2: Normalization
A number x, written in scientific notation is normalized if it has a single non-zero digit to the left of the decimal point. i.e. Force the integer part of its mantissa to be exactly 1.

we adjust our sequence based on the IEEE standard requirements, including a finite number of 52-bit mantissa and rounding. That’s why round-off error occurs.

mantissa of 0.6

#Step 3: Adjust the Exponent:
For double-precision, exponents in the range -1022 to +1023 are biased by adding 1023 to get a value.

exponent => -1 + 1023 => 1022 Represent the value in 11 bit binary.

(1022)₁₀ => (010111111110)₂

Sign bit is 0 as 0.6 is a positive number. (-1)⁰=> 1

Now we have all the values to represent in IEEE 754 Floating point format.

In the process of normalizing the mantissa, the leading (the leftmost) bit 1 is removed it’s always 1 and adjust its length to 52 bits, only if necessary (not the case here).

Representing 0.6 in 64bit IEEE format.

Similarly, using the same process, 0.3 is represented as:

0.3 in 64bit IEEE format

# Adding the two values
1. Equalizing the exponent
As we have the value of 0.6 and 0.3 we have to add them. But before doing, ensure that the exponents are same. In this case, they are not equal. Therefore, we need to adjust them by matching the smaller exponent with the larger value.

Exponent of 0.6=> -1 Exponent of 0.3 => -2 , we have to match the 0.3 with 0.6 as exponent of 0.6 is greater than 0.3 .

Here the difference is 1, so the mantissa of 0.3 needs to be shifted to the right by 1 bit, and the exponent code is increased by 1 to match 0.6

Shifting the mantissa by 1 bit will cause the least significant bit to be lost to maintain the 64-bit standard, which may introduce precision errors.

Value of 0.3 after equalizing the exponent

2. Add the mantissa
As the exponents are equal now, we need to perform binary addition on the mantissas.

Now the value will be, 0; 01111111110; 1.1100110011001100110011001100110011001100110011001100

3. Normalizing the resulting mantissa and rounding
In this case, the mantissa it already normalized [has 1 as leading bit], so this step is skipped.

And finally, the result of 0.6+0.3 is represented as

Sum of 0.6+0.3 in 64bit IEEE Floating Point Representation

So, now we have the result of 0.6 + 0.3 which is represented in 64bit IEEE format, and is machine-readable. We have to convert this back to decimal for human readability.

#Converting IEEE 754 Floating Point Representation to its Decimal Equivalent

Determining Sign Bit: 0 => (-1)⁰ => +1

Calculate unbiased exponent:
(01111111110)₂ => (1022)₁₀
2^(e-1023) => 2^(1022-1023) => 2^-1

Fraction Part:
Summation the values of each bit position, starting from the leftmost bit of mantissa, and multiplying them by powers of 2. 1×2^-1 + 1×2⁻^-2 + 0×2^-3 + ....... + 0×2^-52

By substituting the values, and solving the equation we get the result as 0.8999999999999999, which is displayed on the console. [Rounding]

=> +1 (1+ 1×2^-1 + 1×2⁻^-2 + 0×2^-3 + ....... + 0×2^-52) x 2^-1
=> +1 (1 + 0.79999999999999982236431605997495353221893310546875) x 2^-1
=> 0.899999999999999911182158029987476766109466552734375      
≈ 0.8999999999999999 //numbers are rounded

//Because floating-point numbers have a limited number of digits,
//they cannot represent all real numbers accurately: when there 
//are more digits, the leftover ones are omitted,i.e. the number is rounded

Let’s explore one more example to gain a deeper understanding of the well-known expression 0.1 + 0.2 = 0.30000000000000004.

Adding the 64bit IEEE 754 binary floating point value of 0.1 & 0.2

Converting the result back to decimal

How to Solve That?

Let’s see how to achieve accurate results when working with applications that handle currency or financial calculations, where precision is crucial.

i) Inbuilt Function: toFixed() and toPrecision()

toFixed() converts a number into a string and rounds the string to the specified number of decimals.
toPrecision() format a number to a specific precision or length and will add trailing zeros to fulfill the specified precision if required. parseFloat() is to remove trailing zeros from a number.

const num1 = 0.6;
const num2 = 0.3;
const result = num1 + num2;

const toFixed = result.toFixed(1); 
const toPrecision = parseFloat(result.toPrecision(12));

console.log("Using toFixed(): " + toFixed); // Output: 0.9
console.log("Using toPrecision(): " + toPrecision); // Output: 0.9

Limitation
toFixed() always rounds the number to the given decimal place, which might not align the same in all cases. toPrecision() is also similar, and it may not produce accurate results for very small or very large numbers, as its arguments should be between 1–100.

//1. Adding 0.03 and 0.255 => expected 0.283
console.log((0.03 + 0.253).toFixed(1)) // returns 0.3

//2. Values are added as a string
(0.1).toPrecision()+(0.2).toPrecision() // returns 0.10.2

ii) Third-Party Libraries

There are various libraries like math.js, decimal.js, big.js that solve the problem. Each library functions according to its documentation. This approach is comparatively better.

//Example using big.js
const Big = require('big.js');

Big.PE = 1e6; // Set positive exponent for maximum precision in Big.js

console.log(new Big(0.1).plus(new Big(0.2)).toString()); //0.3
console.log(new Big(0.6).plus(new Big(0.3)).toString()); //0.9
console.log(new Big(0.03).plus(new Big(0.253)).toString()); //0.283
console.log(new Big(0.1).times(new Big(0.4)).toString()); //0.04

Conclusion

The IEEE 754 standard for storing decimal numbers can lead to minor discrepancies. Various libraries can be used to achieve more precise results. Choose the appropriate approach based on application requirements. Equivalent packages exist in other languages like BigDecimal for Java and Decimal for python.

References:

What is Double-precision floating-point format
Convert decimal to IEEE 64 Bit Double Precision
Convert IEEE 64 Bit Double Precision to Decimal
Full Precision Calculator
https://zhuanlan.zhihu.com/
https://0.30000000000000004.com/

Thanks for reading. Feel free to comment your opinion😊. Hope this post was helpful. You can hit me up on Linked In . Few other posts to check here.

First Attempt at Open Source Contribution: Hacktoberfest'23 Journey🚀💻

Jeeva Ramanathan — Tue, 14 Nov 2023 07:43:53 +0000

This was the first time participating in Hacktoberfest, marking not only an initial attempt at the event but also my introduction to the world of Open Source contribution. This blog post will explore the path through the Hacktoberfest event 🛣️.

What is Hacktoberfest and Open Source Contribution?
Hacktoberfest is an annual worldwide event held during the month of October. The event encourages open-source developers to contribute to repositories through pull requests (PR).
Open source contribution is participating in the development or improvement of open-source software. This can involve anything from reporting bugs and fixing code to writing documentation

Discovery🔍

Unknowing where to begin, I planned to contribute to the projects that aligned with my tech stack and interests and started exploring repositories. There are various approaches to refine the search to find a suitable repository for contribution. GitHub's search function allows to filter results using hacktoberfest tags, programming languages, and recently updated etc. And some websites like goodfirstissue.dev, finder.usmans.me also helped to find a suitable repository to start with. Identifying an active repo might be particularly helpful.

Understanding the Repository and Contribution Guidelines📋

Once found a repository to contribute to, the next steps was what and how should I contribute.

Started by looking into the contributing.md, code_of_conduct.md, Readme.md files to understand the procedures. Additionally traversed the issue section and pull request section to understand how the issues are reported and addressed, which gave some better idea about it.

Each repository had different guidelines. Some allowed work to be started on existing or newly reported issues only after they had been assigned to us, while others allowed solutions to be provided to any open issues, which would be accepted if they met requirements. Additionally, there were repositories where all issues were not open, only with specific tags like ready to take, ready for dev indicates for open source contribution. So, checking the repository's guidelines is important as they provide all information from setup to how to create pull requests with proper titles. Starting with issues tagged good first issue, hacktoberfest is also suitable for making the first contribution towards open source.

Making Changes and Creating Pull Requests 🛠️

Initially forked the repository and created a working branch, then understood the code base and identified an issue to work on. After making the required changes and testing them, committed the changes to the working branch of forked repository and raised a pull request with base repository as original repository and head repository as forked repository-working branch according to the guidelines. The project maintainers reviewed the changes and provided some feedback or suggestions in some cases. After addressing that, the PR was merged.

Here are some of the pull requests (PRs)

My contributions include identifying and resolving issues, as well as implementing new features and updating documentation.

For more of my contributions, check out the GitHub repository

Further Explorations and Challenges🤔

So, while contributing to the beginner repositories, opted to explore a few larger and real-time repositories during last week.

As this kind of large repository includes both frontend and backend, understanding the codebase and setting it up locally was quite hard, and for some, I did not had the necessary infrastructure or software in the system by the time. But gitpod.io was really helpful here in setting up the few projects that are integrated with it. Gitpod is a cloud-based development platform. It provided a seamless and ready-to-code environment, ease the complexities of local setup. In this process, I made contributions to the Biodrop and freecodecamp.

Fortunately, identified an minor alignment issue in FreeCodeCamp and reported the issue with a workable solution. Following a while, the solution was also accepted as a temporary fix; However within the same issue, spotted another issue by proposing a fix. But after a loong back-and-forth discussion with the moderator involving testing on various browsers with different approaches, we came to a conclusion and the fix was also finally merged after the event. Pull Request: Button Alignment

✍️Writing insightful comments, creating descriptive issues, and submitting explained pull requests was really tricky.

Progress

By exploring various repositories, had the opportunity to observe different coding standards, structures and approaches to problem-solving.
It helped to have a better understanding of good coding structures, provided valuable insights into industry-standard coding practices. Also, it helped to improve collaboration and communication skills.

Conclusion✅

Hacktoberfest makes a nice platform to start with open source, more than making contributions, it's also a great opportunity to learn from the open source community.

Although I may not made significant contributions, it was still a good experience for me and a great opportunity to learn something new in the initial attempt towards opensource. Contributing to open source also allows you to understand how collaborative software development works.

And if your interest is towards open-source, I would endorse you to start the same, it does not necessarily need to be code contributions, there can be non-code contributions as well.

Happy Contributing✨!

You can hit me up on Github | Linkedin

Few other posts to check here.
Decoding Why 0.6 + 0.3 = 0.8999999999999999 🤯 in JS and How to Solve?

Hide the Source Code in React from Dev Tools [3 different ways]

Jeeva Ramanathan — Sun, 02 Oct 2022 18:24:24 +0000

On moving the code to production, it was identified that the whole source code of the React app, including the project structure is visible in the dev tools (inspect) source tab. It may be an security issue of exposing your whole code in production or its not appreciated.
After exploring, I identified why this happens and a solution for it to hide them.

Why is the source code visible?

Build files are created to deploy the app to production. While generating the build, by default React app will create the source “.map” files because react-script source map is enabled. These map files will have a reference to our source code.

That is the mapping between the generated JavaScript file and the original source file. In development time, it will be easy to identify the error in your original file.

Your browser will use the “.map” files to reconstruct the original source code visible in your browser. So to avoid this, the “.map” files should be removed. Removing those map files will also reduce the build size.

We can remove or avoid the creation of those map files either way.

Through .env file
Through package.json
Using postbuild script

1. Through .env file

Create a .env file in the project root folder.
Add GENERATE_SOURCEMAP=FALSE in the created env file.

After that, build your project through npm run build and deploy your app. It will avoid creating the map files during your build. Now you will not find the whole source code in the browser.

2. Through package.json

Edit your package.json build script like the below:

You have to modify your build script in your package.json by adding generate source map to false.

#windows
build: set \"GENERATE_SOURCEMAP=false\" && react-scripts build
#linux
build: GENERATE_SOURCEMAP=false react-scripts build

It is also another way of mentioning the build to avoid creating the map files by setting the source map to false.

3. Using postbuild

In this approach, it will first create the build files and then post the build, the “.map” files inside the build/static/js and build/static/css will be removed.

rimraf is used to remove the folders and files recursively. It’s like the rm -rf command in Linux.

Add the postbuild script "postbuild":"rimraf build/static/**/*.map" to the script and run npm build . It will initially create the build “.map” files in the build folder and will remove those files post build. On deploying the app to production, you will not find the complete source code.

Conclusion

So there are many ways to achieve the same. In the first two approaches, we avoid creating those map files initially, and in the last approach, we remove the “.map” files inside build/static/js and build/static/css after creation post the build.
It will hide the source code from inspect> sources tab in browser and also this will make your build faster and also reduce a lot of space in the build folder.

Feel free to comment your opinion or provide your suggestions😊.Hope this post was helpful, thanks for reading.

This post was originally published here

Linked In