<![CDATA[Annshiv]]>https://annshiv.inRSS for NodeFri, 08 May 2026 10:51:45 GMT60<![CDATA[Essential Techniques for Drawing with Code on HTML Canvas]]>https://annshiv.in/essential-techniques-for-drawing-with-code-on-html-canvashttps://annshiv.in/essential-techniques-for-drawing-with-code-on-html-canvasMon, 14 Oct 2024 01:22:13 GMTThe HTML Canvas element is a powerful tool that enables developers to draw graphics, manipulate images, and create dynamic visual content directly on web pages. Whether it's basic shapes, complex paths, or intricate effects, canvas opens up a world of creative possibilities for both simple illustrations and advanced interactive applications. In this blog, I’ll walk you through the essential concepts I learned from my recent LinkedIn Learning course on HTML Canvas, covering everything from drawing techniques to transformations and compositing methods. Whether you’re just getting started or looking to enhance your canvas skills.

Draw rectangle

  • Rectangles are the basic shape: On the Canvas, rectangles are the simplest shape you can draw. Other shapes like circles are built from rectangles.

  • Three main functions:

    1. clearRect: This erases a rectangle area, making it transparent.

    2. strokeRect: This draws the outline of a rectangle with a specific color.

    3. fillRect: This fills the inside of a rectangle with a specific color.

  • How it works :

    • Starting Point: You start drawing from the top-left corner of the rectangle.

    • Dimensions: You define the width (how wide) and height (how tall) of the rectangle.

  • Combining both: You can also draw a rectangle that is both outlined and filled by using both strokeRect and fillRect with the same dimensions.

Example:

https://codepen.io/Annamalai-Palani/pen/mdNrewV

Draw Line

  1. Moving the Pen:

    • Think of an invisible pen that moves around the canvas.

    • moveTo(x, y): Moves the pen to a specific spot but doesn't draw anything.

    • lineTo(x, y): Draws a line from the current pen position to the new spot.

  2. Line Properties:

    • lineWidth: Sets how thick the line should be.

    • lineCap: Decides how the ends of the line look (flat, rounded, or square).

    • lineJoin: Determines how corners are drawn when lines meet (rounded, beveled, or sharp).

  3. Drawing the Line:

    • beginPath(): Starts a new drawing path.

    • stroke(): Actually draws the line based on the current path.

  4. Dashed Lines:

    • setLineDash([dash, gap]): Creates dashed lines with specified lengths for dashes and gaps.

    • getLineDash(): Retrieves the current dash settings.

    • lineDashOffset: Adjusts where the dashes start.

Example :

https://codepen.io/Annamalai-Palani/pen/mdNreMV

Canvas State Overview

  • Canvas State: Think of it as a snapshot of all the current settings for drawing on the canvas. This includes properties like line width, stroke style, fill style, and more.

Key Points

  1. Drawing State:

    • The canvas keeps track of various properties such as lineWidth, strokeStyle, fillStyle, etc.

    • It also tracks advanced properties like the transformation matrix and clipping region.

  2. Saving and Restoring State:

    • Why Save State?: Imagine you have a complex drawing with many settings. You might want to temporarily change a setting without losing the original ones. Saving the state helps you revert back easily.

    • How to Save State?: Use context.save(). This pushes the current state onto a stack.

    • How to Restore State?: Use context.restore(). This pops the top state from the stack and makes it the current state.

Analogy

  • Stack of Papers: Think of the canvas state as a stack of papers. Each paper represents a different set of drawing settings. When you save the state, you add a new paper to the stack. When you restore the state, you remove the top paper and go back to the previous one.

Example :

https://codepen.io/Annamalai-Palani/pen/XWvjmEo

Drawing Arcs

  • The arc() function requires parameters like center point (x, y), radius, start angle, end angle, and direction (clockwise or counterclockwise).

  • Angles are measured in radians, not degrees.

Example :

https://codepen.io/Annamalai-Palani/pen/qBeaOMW

Paths Overview

  • Path: A path is a series of connected points on the canvas. It can be open (not connected back to the starting point) or closed (connected back to the starting point).

Key Functions

  1. Begin a Path:

    • ctx.beginPath(): This function starts a new path. Think of it as picking up a pen and getting ready to draw.

  2. Move the Pen:

    • ctx.moveTo(x, y): Moves the pen to a specific point (x, y) on the canvas without drawing anything.

  3. Draw Lines:

    • ctx.lineTo(x, y): Draws a line from the current pen position to the new point (x, y).

  4. Stroke the Path:

    • ctx.stroke(): Actually draws the lines you've defined in the path.

  5. Close the Path:

    • ctx.closePath(): Closes the path by drawing a line back to the starting point.

  6. Fill the Path:

    • ctx.fill(): Fills the area enclosed by the path with the current fill style.

Example :

https://codepen.io/Annamalai-Palani/pen/MWNjazP

Bezier Curves

  • Definition: A Bezier curve is a smooth curve defined by four points: a starting point, an ending point, and two control points.

  • How It Works:

    • The control points determine the shape of the curve.

    • Imagine pulling a string from the start to the end point, with the control points acting like hands that pull the string to shape it.

Quadratic Curves

  • Definition: A quadratic curve is similar to a Bezier curve but simpler. It has a starting point, an ending point, and only one control point.

  • How It Works:

    • The single control point shapes the curve.

    • Think of it as a string pulled from the start to the end point, with one hand (control point) shaping the curve.

Drawing These Curves

  1. Bezier Curve:

    • Use moveTo(x, y) to move the pen to the starting point.

    • Use bezierCurveTo(cp1x, cp1y, cp2x, cp2y, endX, endY) to draw the curve with two control points.

  2. Quadratic Curve:

    • Use moveTo(x, y) to move the pen to the starting point.

    • Use quadraticCurveTo(cpx, cpy, endX, endY) to draw the curve with one control point.

Example :

https://codepen.io/Annamalai-Palani/pen/ExqgPKa

Drawing Text

  1. Basics of Drawing Text:

    • Text Functions:

      • fillText(text, x, y, [maxWidth]): Draws filled text at the specified (x, y) position.

      • strokeText(text, x, y, [maxWidth]): Draws text with an outline (stroke) at the specified (x, y) position.

    • Text Measurement:

      • measureText(text): Returns the width of the specified text using the current font settings.

  2. Text Properties

    • Font:

      • Set using ctx.font = "25px Georgia". This is similar to setting font properties in CSS.

    • Text Alignment:

      • ctx.textAlign: Aligns text relative to the (x, y) position. Options include start, end, left, right, and center.

    • Text Baseline:

      • ctx.textBaseline: Sets the baseline alignment of the text. Options include top, hanging, middle, alphabetic, ideographic, and bottom.

  3. Drawing and Styling Text

    • Fill and Stroke Styles:

      • Use ctx.fillStyle to set the color for filled text.

      • Use ctx.strokeStyle to set the color for stroked text.

  4. Accessibility Considerations

    • Screen Readers: Text drawn on the canvas is not accessible to screen readers. Avoid using canvas text as a replacement for regular HTML text elements like <h1> or <p>.

Example :

https://codepen.io/Annamalai-Palani/pen/wvVzMoX

Drawing Shadows

  • Shadow Properties: The canvas drawing context has four properties for shadows: shadowColor, shadowOffsetX, shadowOffsetY, and shadowBlur.

  • Drawing Shadows: Shadows can be applied to various drawing operations like paths, images, text, and lines. You can control the color, offset, and blur of the shadows.

  • Practical Examples: The video demonstrates how to draw shadows for rectangles, text, and lines, showing how different shadow settings affect the appearance.

Example :

https://codepen.io/Annamalai-Palani/pen/OJKpLZo

Drawing patterns

  • Creating Patterns: Patterns can be created from images, video frames, or even another canvas element using the createPattern function.

  • Pattern Repetition: Patterns can be set to repeat in the x-axis, y-axis, or both.

  • Practical Examples: The video demonstrates creating patterns from an image, a video frame, and another canvas, showing how to apply these patterns to fill or stroke shapes on the canvas.

https://codepen.io/Annamalai-Palani/pen/YzmZKjY

Drawing gradients

Types of Gradients

  1. Linear Gradients:

    • Defined along a straight path between two points.

    • You specify the starting and ending points (e.g., from (x0, y0) to (x1, y1)).

    • Colors transition smoothly along this line.

  2. Radial Gradients:

    • Defined by two circles: a starting circle and an ending circle.

    • The gradient transitions from the edge of the inner circle to the edge of the outer circle.

    • You specify the center and radius for both circles.

Steps to Create a Gradient

  1. Create the Gradient:

    • Use createLinearGradient(x0, y0, x1, y1) for linear gradients.

    • Use createRadialGradient(x0, y0, r0, x1, y1, r1) for radial gradients.

  2. Add Color Stops:

    • Use addColorStop(position, color) to define colors at specific points.

    • The position is a floating-point number between 0 and 1, representing the percentage along the gradient line or circle.

Example :

https://codepen.io/Annamalai-Palani/pen/XWvMrxd

Drawing Images and Videos on Canvas

  1. Source of Images and Videos:

    • You can draw content from an image element, a video element, or another canvas.

  2. Using drawImage Function:

    • Basic Usage:javascriptctx.drawImage(source, x, y);

      • Draws the source image/video at the specified (x, y) position on the canvas.

    • Scaling the Image:javascriptctx.drawImage(source, x, y, width, height);

      • Draws and scales the source to fit within the specified width and height.

    • Cropping the Image:javascriptctx.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

      • Draws a portion of the source image defined by (sx, sy, sWidth, sHeight) onto the destination canvas at (dx, dy) with the size (dWidth, dHeight).

Clipping Paths

  • What is a Clipping Path?

    • Think of a clipping path like a mask. It defines an area where drawing can happen. Anything drawn outside this area won't be visible.

  • Default Behavior:

    • By default, the entire canvas is the clipping path, meaning you can draw anywhere on it.

  • Creating a Clipping Path:

    1. Draw a Path: First, you draw a shape (like a circle or a trapezoid).

    2. Apply the Clip: Use the clip function to make this shape the new clipping path.

Using translate

  • What is Translate?

    • Translate is like moving a piece of paper around on your desk. It shifts the starting point (origin) of where you draw on the canvas.

  • How It Works:

    • Imagine your canvas has a starting point at the top-left corner (0, 0).

    • Using the translate function, you can move this starting point to a new location.

    • For example, if you translate by (50, 50), the new starting point becomes 50 pixels right and 50 pixels down from the original.

  • Why Use It?

    • It helps when you have multiple objects to draw, especially if they need to be rotated or scaled. Moving the origin to each object's location can make drawing easier.

Example :

https://codepen.io/Annamalai-Palani/pen/xxvqKBd

Scaling Transformation

What is Scaling?

  • Scaling changes the size of your drawings on the canvas. It multiplies the dimensions of shapes by a scale factor.

  • For example, if you scale by a factor of 2, a shape will be twice as large. If you scale by 0.5, it will be half the size.

Example :

https://codepen.io/Annamalai-Palani/pen/NWQpKJV

Using Rotation

  1. Rotation in Radians:

    • The canvas uses radians, not degrees, for rotation.

    • Conversion: To convert degrees to radians, use the formula: radians = degrees * (Math.PI / 180).

  2. Rotation Around the Origin:

    • By default, rotation happens around the canvas's origin (top-left corner).

    • If you rotate a shape, it will rotate around this point unless you change the origin.

  3. Using rotate Function:

    • The rotate function takes one argument: the angle in radians.

Example :

https://codepen.io/Annamalai-Palani/pen/dyxvbEJ

Custom transformations

  • Custom Transformation Matrices:

    • Custom transforms are defined using a matrix of six values.

    • These matrices allow you to create transformations not built into the canvas, like skewing.

  • Transform vs. SetTransform:

    • transform(): Adds the custom transform to the current canvas transform.

    • setTransform(): Resets the canvas to the identity transform before applying the custom transform.

  • Practical Examples:

    • Translate: Recreate the built-in translate function using a custom matrix.

    • Skew: Create a skew (shear) transform to skew objects along the x or y axis.

Example:

https://codepen.io/Annamalai-Palani/pen/VwopZJX

Compositing and Global Alpha

  • Global Alpha:

    • Controls the opacity of all drawing operations on the canvas.

    • Ranges from 0 (fully transparent) to 1 (fully opaque).

  • Compositing Methods:

    • There are 12 different methods that determine how new content interacts with existing content on the canvas.

    • Source-over: Default method where new content is drawn over existing content.

    • Source-in, Source-out, Source-atop: Control drawing based on intersections with existing content.

    • Destination-over, Destination-in, Destination-out, Destination-atop: Similar to source methods but affect existing content differently.

    • Lighter, Darker, Copy, XOR: Apply various effects like lightening, darkening, or exclusive OR operations.

From the basics of drawing shapes and paths to exploring the more advanced concepts of transformations and compositing, this course has given me the confidence to incorporate more dynamic and visually appealing content into my projects. Whether you're building games, interactive graphics, or data visualizations, HTML Canvas is an essential tool to have in your developer toolkit. I’m excited to continue experimenting with these techniques and to see how far I can push the limits of what’s possible with canvas. Stay tuned for more projects and insights!

]]><![CDATA[Building a Simple Form with Express.js]]>https://annshiv.in/building-a-simple-form-with-expressjshttps://annshiv.in/building-a-simple-form-with-expressjsThu, 29 Feb 2024 02:30:29 GMTExpress.js is a popular Node.js framework used for building web applications and APIs. Our form will allow users to input their first name and submit it to the server.

Setting Up the Project

Let's start by creating a new directory for our project and initializing a new Node.js project. Open your terminal and run the following commands:

mkdir express-form-example
cd express-form-example
npm init -y

Next, install Express.js and EJS (Embedded JavaScript) as dependencies:

npm install express ejs

Creating the Server

First, let's set up our Express server in server.js:

// server.js
const express = require("express");
const app = express();

// Middleware and configuration
app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.set("view engine", "ejs");

// Define routes
const userRouter = require("./routes/users");
app.use("/users", userRouter);

// Start the server
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Setting Up the User Routes

Now, let's define the user routes in routes/users.js:

// routes/users.js
const express = require("express");
const router = express.Router();

// Middleware function for logging
function logger(req, res, next) {
  console.log(req.originalUrl);
  next();
}

// Dummy data for users
const users = [{ name: "Kyle" }, { name: "Sally" }];

// Route to render the user creation form
router.get("/new", (req, res) => {
  res.render("users/new");
});

// Route to handle form submission
router.post("/", (req, res) => {
  const isValid = false;
  if (isValid) {
    // Logic for valid submission (not implemented)
    res.redirect(`/users/${users.length - 1}`);
  } else {
    // Logic for invalid submission
    console.log("Error");
    res.render("users/new", { firstName: req.body.firstName });
  }
});

// Route parameters for user ID
router
  .route("/:id")
  .get((req, res) => {
    console.log(req.user);
    res.send(`Get User With ID ${req.params.id}`);
  })
  .put((req, res) => {
    res.send(`Update User With ID ${req.params.id}`);
  })
  .delete((req, res) => {
    res.send(`Delete User With ID ${req.params.id}`);
  });

// Middleware function to handle user ID parameter
router.param("id", (req, res, next, id) => {
  req.user = users[id];
  next();
});

// Apply logger middleware to all routes
router.use(logger);

module.exports = router;

Creating the User Interface

In the views/users/new.ejs file, let's create a form for user input:

<!-- views/users/new.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Form</title>
</head>
<body>
  <form action="/users" method="POST">
    <label>First Name
      <input type="text" name="firstName" />
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

We can expand upon this example by adding validation, storing user data, or integrating additional features. Express.js provides a powerful and flexible framework for building web applications and APIs, making it an excellent choice for a wide range of projects.

Special thanks to the "Web Dev Simplified" YouTube channel for their insightful tutorials.

If you'd like to dive deeper into the code or contribute to its improvement, you can find the complete code repository on GitHub at annshiv/expressJs.

]]><![CDATA[Creating Reusable Modal Components in React]]>https://annshiv.in/creating-reusable-modal-components-in-reacthttps://annshiv.in/creating-reusable-modal-components-in-reactWed, 28 Feb 2024 02:30:24 GMTModal components are pop-up windows that overlay the current page, allowing users to interact with content or controls without leaving the context of the application. They are commonly used for tasks such as displaying alerts, confirming actions, or presenting additional information.

Creating the Modal Component

We'll start by creating a new file named Modal.jsx inside the src/components directory. This file will contain the logic and styles for our modal component. Here's the code for Modal.jsx

import { useState } from "react";
import styled from "styled-components";

const ModalBackground = styled.div`
  position: fixed;
  left: 0;
  top: 0;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const ModalContent = styled.div`
  background-color: white;
  padding: 20px;
  border-radius: 5px;
`;

export const Modal = ({ children }) => {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(true)}>Open Modal</button>
      {show && (
        <ModalBackground onClick={() => setShow(false)}>
          <ModalContent onClick={(e) => e.stopPropagation()}>
            <button onClick={() => setShow(false)}>Close Modal</button>
            {children}
          </ModalContent>
        </ModalBackground>
      )}
    </>
  );
};

Using the Modal Component

Now that we've created our modal component, let's use it in our main application. Open the App.js file in the src directory and replace its content with the following code:

import React from "react";
import { Modal } from "./components/Modal";

function App() {
  return (
    <div className="App">
      <Modal>
        <h2>Hello, Modal!</h2>
        <p>This is a simple modal component created in React.</p>
      </Modal>
    </div>
  );
}

export default App;

Modals are versatile elements that can enhance the user experience by providing contextually relevant information or actions. You can further customize the modal component by adding animations, additional styling, or functionality to suit your application's needs. Feel free to experiment and expand upon the concepts covered in this tutorial to create unique and engaging modal experiences for your applications.

]]><![CDATA[Building Reusable List Components in React]]>https://annshiv.in/building-reusable-list-components-in-reacthttps://annshiv.in/building-reusable-list-components-in-reactTue, 27 Feb 2024 02:30:26 GMTIn React development, it's common to encounter scenarios where you need to display lists of similar components with varying styles or content. For instance, you might have a list of authors, each with different information like name, age, country, and books authored. To efficiently handle such cases, we can leverage React's component composition and props passing.

Let's consider a scenario where we have an array of authors, each represented by an object containing their details like name, age, country, and books they've written. We want to create two distinct styles for displaying these authors: a large card displaying all details including their books, and a smaller card with just the name and age.

Firstly, we define our array of authors:

export const authors = [
  {
    name: "Sarah Waters",
    age: 55,
    country: "United Kingdom",
    books: ["Fingersmith", "The Night Watch"],
  },
  {
    name: "Haruki Murakami",
    age: 71,
    country: "Japan",
    books: ["Norwegian Wood", "Kafka on the Shore"],
  },
  {
    name: "Chimamanda Ngozi Adichie",
    age: 43,
    country: "Nigeria",
    books: ["Half of a Yellow Sun", "Americanah"],
  },
];

Next, we create our two different styles of author list items: LargeAuthorListItem and SmallAuthorListItem. The former displays all details including books, while the latter only shows name and age.

export const LargeAuthorListItem = ({ author }) => {
  const { name, age, country, books } = author;
  return (
    <>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Country: {country}</p>
      <p>
        Books:{" "}
        {books.map((book, index) => (
          <span key={index}>{book}</span>
        ))}
      </p>
    </>
  );
};

export const SmallAuthorListItem = ({ author }) => {
  const { name, age } = author;
  return (
    <>
      <h2>{name}</h2>
      <p>Age: {age}</p>
    </>
  );
};

Now, to make these components reusable and versatile, we create a RegularList component. This component takes in an array of items, a prop specifying the source of data (in our case, "author"), and the type of item component to render.

export const RegularList = ({ items, sourceName, ItemComponent }) => {
  return (
    <>
      {items.map((item, index) => (
        <ItemComponent key={index} {...{ [sourceName]: item }} />
      ))}
    </>
  );
};

With RegularList, we can easily render lists of authors in different styles by passing in the appropriate item component and data source name. For example:

import { authors, RegularList, LargeAuthorListItem, SmallAuthorListItem } from './components';

const App = () => {
  return (
    <div>
      <h1>Authors</h1>
      <h2>Large Cards</h2>
      <RegularList items={authors} sourceName="author" ItemComponent={LargeAuthorListItem} />
      <h2>Small Cards</h2>
      <RegularList items={authors} sourceName="author" ItemComponent={SmallAuthorListItem} />
    </div>
  );
};

export default App;

By utilizing these components, we can easily create and maintain lists of objects with different styles across our application. This approach promotes code reusability and maintainability, making our React application more efficient and scalable.

]]><![CDATA[Building Reusable Split Screen Layouts in React]]>https://annshiv.in/building-reusable-split-screen-layouts-in-reacthttps://annshiv.in/building-reusable-split-screen-layouts-in-reactMon, 26 Feb 2024 02:30:31 GMTSplit screen layouts are commonly used in web applications to display content side by side. Whether it's comparing two pieces of information or simply organizing content more efficiently, split screen layouts can improve the user experience.

Basic Split Screen Component

Let's begin by creating a basic version of the SplitScreen component:

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
`;

const Panel = styled.div`
  flex: ${props => props.flex};
`;

const SplitScreen = ({ Left, Right }) => {
  return (
    <Container>
      <Panel flex={1}>
        {Left}
      </Panel>
      <Panel flex={1}>
        {Right}
      </Panel>
    </Container>
  );
};

export default SplitScreen;

In this component:

  • We define a Container styled component to hold our split screen layout.

  • Two Panel styled components are used to represent the left and right sections of the split screen.

  • The SplitScreen component takes Left and Right props, which are components to be displayed in the left and right sections respectively.

Enhanced Split Screen Component

Now, let's enhance our SplitScreen component to make it more flexible by allowing custom widths for the left and right sections:

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
`;

const Panel = styled.div`
  flex: ${props => props.flex};
`;

const SplitScreen = ({ children, leftWidth, rightWidth }) => {
  const [left, right] = children;

  return (
    <Container>
      <Panel flex={leftWidth}>
        {left}
      </Panel>
      <Panel flex={rightWidth}>
        {right}
      </Panel>
    </Container>
  );
};

export default SplitScreen;

In this enhanced version:

  • We modify the SplitScreen component to accept children, leftWidth, and rightWidth props.

  • The children prop allows us to pass components directly as children to the SplitScreen component.

  • leftWidth and rightWidth props determine the widths of the left and right sections respectively.

Example Usage

Now, let's see how we can use our SplitScreen component in a React application:

import React from 'react';
import SplitScreen from './SplitScreen';

const LeftComponent = ({ title }) => {
  return <h2>{title}</h2>;
};

const RightComponent = ({ title }) => {
  return <h2>{title}</h2>;
};

function App() {
  return (
    <SplitScreen leftWidth={1} rightWidth={3}>
      <LeftComponent title={"Left"} />
      <RightComponent title={"Right"} />
    </SplitScreen>
  );
}

export default App;

In this example:

  • We import the SplitScreen component.

  • We define LeftComponent and RightComponent as functional components to be displayed in the left and right sections respectively.

  • Inside the App component, we use the SplitScreen component and pass LeftComponent and RightComponent as children. We also specify custom widths for the left and right sections.

By following this approach, you can easily incorporate split screen layouts into your React applications, making them more structured and user-friendly. Feel free to customize the component further to suit your specific needs and styling preferences. Always expecting your support and suggestions ! Thanks in advance

]]><![CDATA[My coding journey from 100 days of coding challenge]]>https://annshiv.in/my-coding-journey-from-100-days-of-coding-challengehttps://annshiv.in/my-coding-journey-from-100-days-of-coding-challengeSun, 25 Feb 2024 02:30:45 GMTHi. I am Annshiv. First of all, I need to say apologies for my English mistakes. Welcome to my first blog post. This post will cover my coding journey from the #100daysofcode challenge to my job.

Annshiv

Why I took this challenge ?

I did my 100 days coding challenge on mid of 2020. Before this challenge also, I am able to write code and solve coding problems. I am not a computer science student. I chose electronics engineering. Because I thought electronics engineers are whose writing programming to electronic devices. After a one-year completion of my college. I felt that that was wrong. Then I started to learn programming by myself.

I started to learn with YouTube and hacker Rank. At the start of 2020 literally, I am good at solving problems. In March 2020, amid pandemic lockdown implemented all over India, during this time, I need to move to my hometown. I felt I am good at programming. Then I thought "Ok now, we are good at programming so we will create projects using those learned programming languages". Then I started to make a tic tac toe game using python. During that project, I struggled a lot. Then I realized this knowledge is not enough to make the project. we need to revise all those things that I learned and need to learn more as well. At that time I saw one person's #100daysCodingChallenge post on LinkedIn. That was really inspired me. I started to think about "why I can't do that". Then I started #100DaysOfCode.

Things that I got from this challenge

I started with basic python to revise my knowledge. I planned to learn and practice python. Daily I learned python and practice those topics on hackerrank and CodeChef. Then I will share those things with my LinkedIn family. Each day I started to spend more than 10+ hours learning to program.

You just imagine how it would be if a man have spent his entire time infront of a computer for this one year journey with minimal social interaction,with high mental pressure to keep up with the schedule. Inspite of I have managed to preserve, there would be many difficulties I faced. The combined of my exhaustive routine of learning programming and doing projects outside of my college campus did not provide me leisure time enough to do other activities in my life because I was fully tied up with it. I got few followers. They are motivated me to complete this challenge. Some of them directly messaged me to give their appreciation. During this challenge, I learned data structures and algorithms, completed 20+ python projects and some web-related projects. Day by day my confidence level and programming skill were improved gradually. I attended hackathons(I won nothing).

#100daysofcode

Successfully I completed 100daysofcode challenge. This consistentcy made me to become smarter as well as more self confident person. This made a huge positive impact in my life. It really enhanced my social life. I am sure, this challenge helped me a lot in my interview rounds. end of this challenge, My confidence level was high. After that challenge, I took the #50daysCoding challenge (web development projects). Then I learned Django, react, javascript SQL and etc...!

At the start of 2021, Still colleges are closed. I was full busy with the learning program. In February, I and my friend signed a freelancing project. That time was also a learning period for me. Because that project is based on angular which I didn't learn yet. simultaneously I was Learning and working on that project. Successfully we completed that project. This is my first earning as a software developer. In June 2022, I joined LUMEL technologies as a software developer. LUMEL makes me feel more satisfied with my position and more confident in my programming-related skills.

It seemed quite trivial at the beginning of the day I started to learn.The challenge of learning within a hundred days has gone beyond that and this went on for 365 days.Even though this journey was electrified and exhilarated throughout the learning, it was definitely no easy feat.

365daysofcode

My journey was never ended to this date. At least daily I learned or wrote one concept is related to programming. My journey will continue and I hope it will never end. This challenge gave me everything that I want and need.

At last, below picture speaks about me lot

LinkedIN : https://www.linkedin.com/in/annamalai923/
GitHub : https://github.com/annshiv

Please give your support and suggestions. Thank you for reading this.

]]><![CDATA[Move Your Node.js App to Bun: A Beginner's Guide]]>https://annshiv.in/move-your-nodejs-app-to-bun-a-beginners-guidehttps://annshiv.in/move-your-nodejs-app-to-bun-a-beginners-guideSat, 24 Feb 2024 07:45:25 GMTNode.js has been a popular choice for beginners and startups in web development. But since September 2023, Bun has been gaining attention for its lightning-fast performance.

What's Node.js?

Node.js lets you run JavaScript outside of web browsers, making server-side programming easy. It's fast and has a wide range of tools (like NPM packages) for developers.

What's Bun?

Bun is a toolkit for JavaScript and TypeScript apps, boasting incredible speed. It's built using the JavaScript Core Engine, making it faster than Node.js. Plus, Bun serves as a package manager, bundler, test runner, and runtime environment.

Why Switch to Bun?

  1. Adaptability: Bun works seamlessly with existing Node.js apps and packages.

  2. Bun APIs: Bun offers faster and easier alternatives to Node.js APIs.

  3. TypeScript Support: Setting up TypeScript is simpler with Bun.

  4. Path Mapping: Bun's unique approach makes imports cleaner.

  5. Hot Reloading: Bun comes with built-in hot reloading for faster development.

  6. Package Management: Bun installs dependencies much faster than other package managers.

  7. Test Case Execution: Bun includes Jest for easy testing.

  8. Application Bundling: Bun's bundler is significantly faster than others like Webpack.

Sounds convincing doesn’t it? Let’s migrate an app from Node.js to Bun

First things first, you’ll want to install Bun on your PC. To do so, run the command:

curl -fsSL https://bun.sh/install | bash

If you’ve successfully installed Bun, you should get the output:

######################################################################## 100.0%
bun was installed successfully to ~/.bun/bin/bun
Run 'bun --help' to get started

Next, launch a terminal in your project directory and install Bun using the command:

bun install

This command installs the BUN, but it gives the below error.

bun install v1.0.14 (d8be3e51)
error: Please upgrade package-lock.json to lockfileVersion 3

This error occurs when there’s a mismatch between the version specified in your package-lock.json file (lockfileVersion) and the expected version.

So the given command will upgrade the lockfile to version 3 without altering the existing dependencies.

Next, go ahead and remove all TypeScript related libraries from your package.json as Bun comes with pre-built support for TypeScript. This can be done using the command:

bun remove ts-node
bun remove typescript
bun remove @types/node

You should see the output:

bun remove v1.0.14 (d8be3e51)
 - ts-node
 1 package removed [204.00ms]
bun remove v1.0.14 (d8be3e51)
 - typescript
 1 package removed [23.00ms]
bun remove v1.0.14 (d8be3e51)
 - @types/node
 1 package removed [23.00ms]

Next, go ahead and add the types offered by Bun itself for better TypeScript performance, using the command:

bun add bun-types

This should display the output:

bun add v1.0.14 (d8be3e51)
 installed bun-types@1.0.14
[620.00ms] done

Next, open your tsconfig.json and ensure that you’re using the bun-types.

{
  "compilerOptions": {
    "lib": ["ESNext"],
    "module": "esnext",
    "target": "esnext",
    // "bun-types" is the important part
    "types": ["bun-types"]
  }
}

Next, alter your NPM Start command to use Bun, as shown below:

"start": "bun app.tsx"

And, that’s it! You’ve successfully migrated your app from Node.js to Bun. To launch your app with Bun, use the command:

bun start

This will launch your app you normally do!

Conclusion

Bun is taking the world by storm with its immense features and performance. If you’re one of the developers that love building high performing apps with minimal effort, you’re better off working with Bun!

I hope you found this article helpful.

]]><![CDATA[Reflecting on 2023: A Year of Missed Opportunities]]>https://annshiv.in/reflecting-on-2023-a-year-of-missed-opportunitieshttps://annshiv.in/reflecting-on-2023-a-year-of-missed-opportunitiesSat, 24 Feb 2024 02:30:10 GMTIt’s 2 AM on December 10, 2023, and I just ordered chicken rice on Swiggy. I realise that I’ve wasted the entire year. I’ve been drained and procrastinated. At the start of every year, I plan my goals for finance, career, and personal development. But unfortunately, this year I couldn’t focus on those things. I made so many wrong decisions this year. Usually, I’m the kind of person who takes every step with clear and cautious moves. I research everything extensively before trying anything new. I think about the best way to do it, how it will affect me, and what to do if my decision goes wrong. But this year, I made mistakes. Here are my mistakes of 2023 and how I plan to correct them in 2024.

Failed to read books

Photo by Aaron Burden on Unsplash

The first mistake was not reading enough books. From my childhood to this day, I’ve read lots of books. In my school days, I lived in the library. There was no television at home, no neighbors nearby, and my family lived in the garden, far from my village. Books were my only entertainment and I read lots of comics, history books, and even tried to learn computer basics there. I tried as much as I could and did many mini-inventions with those learnings. Books helped me improve my creativity and knowledge. At some point, I even tried to write books myself, but I didn’t get a chance to improve that. After college, I didn’t focus on reading that much, which made me think negatively about myself. Books provide a visual representation of the things we’re reading, giving us a different perspective on the author’s creativity and ideas. With books, I was able to gain knowledge about finance, personal development, and leadership quality, and learned from the experiences of different people. With these learnings, I helped many people make correct decisions. Although I have many books to read, I failed to do so. Instead, I gained content from videos and podcasts, but books are far better than these sources. This mistake made me doubt myself, which is the worst feeling. In 2024, I plan to start reading new comics related to books to gain a little bit of confidence about myself. I need to give more time to reading books and gaining knowledge.

Procrastinating on completing courses

Unfortunately, I failed to complete the courses related to my career this year. Do courses or certifications showcase your knowledge? Not necessarily, but courses provide a structured way to learn important topics about a subject. They often tell where we can learn more about a topic. In my case, courses helped me in various areas. As a software developer who primarily codes in Javascript, I was able to find my previous coding mistakes during a course. Next year, I plan to allocate a few hours a day to improving my knowledge in development.

Poor Time allocation

Being a software developer in a product-based company, I have to allocate tasks to my team members, work on architecture, code quality, logic improvements, code reviews, and collaborate with the product UI and management teams for requirements. Alongside all these responsibilities, I still have my own work to do. It’s my responsibility to manage everything, but due to poor time management, I failed to effectively prioritize my tasks. This led to inefficiency and stress. I acknowledge this mistake and am determined to correct it. Currently, I’m exploring time management tools to help me resolve this issue, and I plan to read “Productivity” by Ali Abdaal. I believe that by implementing better time management strategies in 2024, I can avoid repeating this mistake.

Photo by Luis Villasmil on Unsplash

Failed to Create Content

My biggest goal currently is content creation. At the start of 2023, I set a goal to publish at least one blog every two weeks and create a single YouTube video per month. In 2022, I experimented with YouTube videos and now I want to revamp my approach. However, despite my intentions, I only managed to publish 2 or 3 blogs and didn’t create a single video. Nevertheless, I am determined to create at least one video before the end of this year. Additionally, I will make sure to provide reviews of courses and books that I’ll be learning in 2024. I guarantee that I will follow through on this commitment. Similarly, I will focus on improving my video creation skills. I’m determined to get back on track.

I understand that this may seem boring, but it truly upsets me. While I acknowledge that there have been some significant achievements this year, I still feel disappointed about the unfinished tasks. It’s crucial for me to focus on completing them. If you have any suggestions or advice, I would greatly appreciate your input and support. Learning is key for me to get back on track. I am determined to correct my mistakes in 2024. Please feel free to share any suggestions you may have. Your help and encouragement mean a lot to me. Lastly, I wish you all the best in overcoming your own mistakes from 2023. Cheers!

]]><![CDATA[How I learned to code]]>https://annshiv.in/how-i-learned-to-codehttps://annshiv.in/how-i-learned-to-codeFri, 23 Feb 2024 03:30:34 GMTI vividly recall the day when I hit an all-time low in terms of self-confidence. My academic performance had been slipping, and I had accumulated several backlogs. I felt like I was losing control of everything. From the very first day of college, I had been eager to learn coding, but by the end of the fourth semester, I still hadn’t made any progress. I realized that I knew very little about the subject, and this realization hit me hard. At that time I know only,

print("hello world")

Back in March 2019, I began exploring ways to boost my productivity and manage my time better. Thanks to the inspiring videos by Ali Abdaal and Matt D’Avella, I gained a new perspective on how to pursue my dreams. Their videos guided me to strike a balance between my academic studies and my passion for programming. Initially, I started learning Python in my native language, but soon I realized that I needed to switch to English channels to expand my knowledge. That’s when I discovered some fantastic resources, such as Clever Programmer, Tech with Tim, and Dennis Ivy. With their help, I learned the programming basics and honed my skills to a whole new level.

Photo by John Schnobrich on Unsplash

At first, I dedicated only two hours a day to learning programming, which involved watching tutorials and practicing coding exercises. My daily routine involved attending college, returning to the hostel, spending a few hours playing games, and then coding. I followed this routine for about a month or two, during which I worked on creating a Tic Tac Toe game with Python. However, as I delved deeper into the project, I realized how challenging it was to make it work. This realization led to a sense of fear and frustration, as I struggled to put the pieces together. Despite feeling disheartened, I realized that I needed to continue learning and practicing to improve my skills. I knew that with more effort and dedication, I could overcome the challenges and achieve my goals.

To improve my programming skills, I turned to online resources like HackerRank and Codechef for practice. Gradually, I increased the amount of time I spent on programming and eventually completed the Tic Tac Toe game project in Python. I also took a data structures and algorithms course in Python to further enhance my knowledge. As days went by, I continued practicing and working on various Python projects. When the Covid-19 lockdown was imposed, I returned to my hometown and used this opportunity to focus more on improving my programming skills. I dedicated 14–16 hours per day to programming, and this commitment is reflected in my GitHub streak, which spans from September 2020 to September 2021.

During that time, it was recommended by many to complete NPTEL certification courses. Personally, I completed the Programming, Data-Structures, and Algorithms using Python as well as the Joy of Computing using Python courses. These courses have helped me tremendously in developing numerous Python projects that involve database and front-end technologies. However, I faced some difficulties with front-end development, which prompted me to start learning more about it with the help of Brad Traversy and Programming with Mosh. I completed several CSS and HTML courses on Udemy and have successfully completed various projects using only HTML and CSS.

JavaScript is a highly popular programming language, known for its versatility and user-friendly nature. Its significance is further highlighted by its crucial role in improving front-end projects. Having completed a JavaScript certification on Udemy, I undertook a challenging project where I completed over 50 projects (#50days50Projects) using JavaScript, HTML, and CSS, which were recorded and posted on my YouTube channel, “Freaky Programmer” — don’t forget to subscribe! As my knowledge and experience grew, I took on a freelance project with a friend, which required me to learn Angular 😁. Overcoming any challenges faced during the project with my newfound learnings, we completed the Angular project successfully. In June 2021, I joined Lumel Technologies ❤️ as a product developer, which required me to learn React 😁. Thanks to my past experiences and learnings, I overcame obstacles and achieved my goal of becoming a software developer.

Don’t let problems intimidate you, let them motivate you

I welcome any comments or feedback on my paragraph and am always looking for ways to improve my writing skills. If you have any suggestions, please feel free to share them with me here or on my personal portfolio. I appreciate any constructive criticism and am eager to learn and grow. Thank you for taking the time to provide feedback.

]]><![CDATA[The most important 100 days of this year]]>https://annshiv.in/the-most-important-100-days-of-this-yearhttps://annshiv.in/the-most-important-100-days-of-this-yearThu, 22 Feb 2024 03:00:13 GMTOn this year beginning I set some boundaries(goal) for myself. Almost nearly 9 months completed now. Till now I fulfilled only few of my goals. In this blog, I am going to explain my plan for next 100 days to achieve my remaining goals with my daily routine.

Here is my goals,

Goals to complete

Here is my completed goals,

Completed goals

Goal 1 : For this goal, I am going to record my whole day from my wake up to sleep for next 100 days. Seems like 100 days coding challenge. I will have to discontinue this society and social media for next 100 days. On this challenge I need to focus my other goals as well (note : some goals are related my profession).

Goal 2 : why I chose React and JavaScript ? I am currently working react with typescript. Typescript(syntactical superset of JavaScript) is totally new for myself and before this I know python. That python knowledge helped me to speed up my JS learning journey. I partially completed that course and react course as well. But I lose my consistency during this course completion. I need to keep my consistency to complete these courses.

Goal 3 : From my learnings, I always believe in practical knowledge. Usually, If learned something new I have to practice that and get output for that. Obviously I will done this goal during my learning goal.

Goal 4 : Talking Yak is an Android-based English teaching system. Always I want to improve my communication and my language. This application helped me in many ways to improve Grammar, Phonics, Vocabulary and Speech. I completed 67 percentage on this. Need to complete remaining.

Goal 5 : Planning to end my day with reading books, Currently reading “Psychology of Money”. This is my second book of this year

Goal 6 : ”Try to fit myself” I didn’t have any source to complete this goal. I am going to fit myself without any equipments. we will see how it’s going.

You can track all my activity on this platform and as well my Youtube channel.

Show your support and Sent your sugegstions.

]]><![CDATA[TypeScript Narrowing: Powerful Techniques for Precise Type Checking]]>https://annshiv.in/typescript-narrowing-powerful-techniques-for-precise-type-checkinghttps://annshiv.in/typescript-narrowing-powerful-techniques-for-precise-type-checkingWed, 21 Feb 2024 13:59:49 GMTTypeScript is a powerful and popular programming language that brings static typing to JavaScript. One of its key features is its strong type inference and type checking capabilities, which help catch bugs and improve code quality. One powerful technique in TypeScript is “narrowing,” which allows developers to precisely narrow down the types of variables or expressions based on certain conditions, leading to more accurate and reliable type checking. In this blog post, we will explore different techniques for mastering TypeScript narrowing and leverage its benefits to write robust and error-free code.

Photo by Cookie the Pom on Unsplash

  1. Type Guards:

Type guards are functions or conditions that allow TypeScript to narrow down the type of a variable based on a runtime check. For example, using the typeof operator, we can create a type guard to differentiate between different types of variables, such as strings, numbers, or booleans. We can also use instance-of to narrow down the type of an object based on its constructor.

Example:

function printLength(value: string | number): void {
  if (typeof value === 'string') {
    console.log(value.length); // TypeScript knows that value is a string, so length is valid
  } else {
    console.log(value); // TypeScript knows that value is a number
  }
}

2. Discriminated Unions:

Discriminated Unions, also known as tagged unions or algebraic data types, are a powerful pattern in TypeScript for narrowing down types based on a common discriminator property. By using a shared property with a unique value across all variants of a union, we can create a type guard that narrows down the type based on that property.

Example:

interface Circle {
  kind: 'circle';
  radius: number;
}

interface Square {
  kind: 'square';
  sideLength: number;
}

type Shape = Circle | Square;

function printArea(shape: Shape): void {
  if (shape.kind === 'circle') {
    console.log(Math.PI * shape.radius * shape.radius); // TypeScript knows that shape is a circle
  } else {
    console.log(shape.sideLength * shape.sideLength); // TypeScript knows that shape is a square
  }
}

3. Nullish Coalescing Operator:

The nullish coalescing operator (??) is a handy tool for narrowing down types when dealing with potentially nullable or undefined values. It allows us to provide a default value when the variable is null or undefined, and TypeScript can accurately narrow down the type based on the result.

Example:

function printUsername(username: string | null): void {
  const name = username ?? 'Guest'; // TypeScript knows that name is a string, even if username is null
  console.log(`Hello, ${name}!`);
}

4. Custom Type Predicates:

TypeScript also allows developers to create their own custom type predicates, which are functions that return a boolean value and can be used as type guards. Custom type predicates can be helpful when dealing with complex data structures or custom validation logic.

Example:

function isPerson(obj: any): obj is Person {
  return obj && typeof obj === 'object' && 'name' in obj && 'age' in obj;
}

function printPersonDetails(person: Person | string): void {
  if (isPerson(person)) {
    console.log(`Name: ${person.name}, Age: ${person.age}`); // TypeScript knows that person is a Person object
  } else {
    console.log(person); // TypeScript knows that person is a string
  }
}

In conclusion, TypeScript narrowing is a powerful technique that allows developers to write more precise and reliable type checking in their code.

]]><![CDATA[My journey as a self-taught developer]]>https://annshiv.in/my-journey-as-a-self-taught-developerhttps://annshiv.in/my-journey-as-a-self-taught-developerWed, 21 Feb 2024 13:35:40 GMTHello my name is Annamalai and I am working as software developer at lumel

I am writing this article with hopes that self-taught developers like myself might be employed as the rate of unemployment is pretty high. I graduated in electronics engineering. Then you may think like this “why did he choose to program as a career ?”. I have some basic C programming knowledge from my 10th standard. I thought, “programming languages are working with help of electronics. So electronics were doing a major role in software development”. So I chose electronics engineering for my graduation. after one year only I realized my thought was totally wrong.

Photo by Damir Samatkulov on Unsplash

I started my programming journey in my second year, I started with python. Literally, I spend all my time with python (programming language). Each and every day I returned to the hostel after my college hours, I start to learn python. Initially, I learned programming language from my native language(Tamil) and YouTubers(Tamil Hacks 2.0). Then I started with english youtubers (Tech with tim, Clever Programmer, Programming with Mosh). These days I can code a little bit still I am not able to solve problematic questions.

Then I solved 3 problematic questions for each day. During those times my daily goal was to learn some concepts and need to solve some problems from those concepts. I solved problems from (HackerRank, Quvi). Days passed, and the pandemic came. then I started my 100 days coding challenge. I have written a specific blog for that. I completed almost nearly 25+ projects. At that time I could able to write code for some intermediate-level problems.

Photo by Edward Howell on Unsplash

Python is a general purpose language and all general purpose languages can be used at both the front end and back end. But it doesn’t have a popular framework like react or angular. so I need to learn to react or angular to continue my developer journey. I started HTML and CSS with the help of one course. I completed more than 5 projects only with these. Here is another crucial situation for me, I need JavaScript because most of the frontend frameworks work with JavaScript. I started Javascript from one udemy course. I completed some projects with these. Then I learned angular along with one freelancing project. meanwhile, I landed a software developer job which I expected.

Research shows that you begin learning in the womb and go right on learning until the moment you pass on. Your brain has a capacity for learning that is virtually limitless, which makes every human a potential genius

I can proudly say that I can do software developer work as I have learned JavaScript, React, Angular, Python, Node.js, Git, Collaboration, Pair Programming, Team work as well as HTML/CSS.

]]><![CDATA[My learnings from my one-year software developer experience]]>https://annshiv.in/my-learnings-from-my-one-year-software-developer-experiencehttps://annshiv.in/my-learnings-from-my-one-year-software-developer-experienceTue, 20 Feb 2024 17:02:45 GMTI am 22 years old. I have been working for LUMEL technologies as a full-time Software Developer for 1 year now.

Photo by Carl Jorgensen on Unsplash

Communication is important

Clear communication is important when you work with a team. Usually, you need to speak or discuss with your teammates any new requirements, or bug fixes. Most of the time you are working under the plans, When you cannot keep up with the plan, report it to your supervisor or managers so they can adjust their plan. It is very important to be transparent about what you do. After all, better communication leads to better results.

No one knows what you need except for you so don’t wait for your managers to read your mind. Need more support? Ask for it. Have some ideas? Discuss.

I am not good at language. But I always try to tell my opinion or my ideas to my colleagues or managers. It helped me in many cases.

Organize your day

Photo by Glenn Carstens-Peters on Unsplash

By keeping organized, you will save time looking for things and will have more time to work on important tasks. Organizing your tasks help you track your work and pending tasks. Part of that stress relief comes in the form of more flexibility and organization of your time. Where there are so many deadlines to follow, knowing what’s coming up in advance can help you plan better.

Be open

Listen to other words and suggestions. If your colleagues give feedback or suggestions on your work, Kindly listen to their words. For example, A code review from your teammate can teach you something new to improve your code.

Ask help

Asking for help to speed up your completion speed because you may be struck by unknown things. Also, while it is good to ask, sometimes it might be better to try finding the answer on your own first. but it took some time to complete that. As I said we are working under the plan and deadlines, So we need to complete tasks before the given time. You are not working alone. your teammates are there to help. It is no one’s sole responsibility to work alone. When you are stuck, it is totally OK to ask for help.

Learn new things every day

Photo by Windows on Unsplash

I’m improving my technical skill from my job because, In every day, I am creating something new, so I learn something new for my technical knowledge from my work.

Every new day will teach you new things. A bug teaches you an interesting concept. A newsletter can teach you something new. A video or movie will give some new ideas. From my experience, I usually follow social media and youtube influencers. They really teach me a lot of new things like investment, productivity, and coding. Each blog post improves my vocabulary and design of the blog post. Literally, I am learning new things every day from new people and new content.

]]>