Forem: Aniket

Demystifying Frontend and Backend Development: A Beginner's Guide

Aniket — Sat, 30 Sep 2023 11:46:16 +0000

In the vast and dynamic world of web development, two key terms you'll often hear are "frontend" and "backend." These terms are foundational to understanding how websites and web applications are built. If you're new to web development, they might seem a bit confusing at first. But fear not! In this beginner's guide, we'll break down the concepts of frontend and backend development to help you grasp their roles and differences

Frontend Development

Imagine you're browsing your favorite website, clicking buttons, filling out forms, and scrolling through pages. Everything you see and interact with on the website is the result of frontend development. Frontend developers, also known as client-side developers, are responsible for creating the user interface (UI) and ensuring a seamless and visually appealing user experience.

Key Responsibilities of Frontend Developers

Design and Layout: Frontend developers work with web designers to transform visual designs (usually created using tools like Adobe XD or Sketch) into actual web pages. They determine how elements such as text, images, buttons, and forms are arranged on the screen.
User Interface (UI): They create the interactive elements you see on a website, like dropdown menus, sliders, and modals. This involves using technologies such as HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript.
Responsiveness: Ensuring that websites look and function well on various devices and screen sizes, from smartphones to desktop computers, is a crucial part of frontend development. This practice is known as responsive web design.
Cross-Browser Compatibility: Frontend developers need to make sure that websites work consistently across different web browsers like Chrome, Firefox, and Safari.
Performance Optimization: Optimizing the website's performance to reduce loading times and improve user experience is another key responsibility. This may involve compressing images, minifying code, and using Content Delivery Networks (CDNs).

Backend Development

Now, let's dive into the backend of web development. The backend, often referred to as the server-side, is the part of a web application that users don't see directly. It consists of the server, databases, and server-side application logic. Backend developers are responsible for making sure that everything on the frontend works smoothly by handling data, logic, and server operations.

Key Responsibilities of Backend Developers

Server Management: Backend developers manage the web server, which stores and serves the web application's files, including HTML, CSS, JavaScript, and media files. They ensure the server is secure, reliable, and responsive.
Database Management: Data is crucial for web applications. Backend developers design, create, and maintain databases to store and manage data efficiently. They use database management systems like MySQL, PostgreSQL, or MongoDB.
Application Logic: The backend code contains the application's core logic. It processes requests from the frontend, interacts with the database, and sends back the necessary data. Popular backend programming languages include Python, Ruby, Node.js, and PHP.
Security: Backend developers are responsible for implementing security measures to protect user data and prevent unauthorized access or data breaches. They use techniques like encryption and authentication.
API Development: Often, web applications need to interact with external services or allow third-party developers to build on top of them. Backend developers create APIs (Application Programming Interfaces) to facilitate such interactions.

Frontend and Backend Collaboration

Frontend and backend development are not isolated processes. They work hand in hand to create a functional and visually appealing web application. Here's how they collaborate:

Frontend-Backend Communication: The frontend sends requests to the backend, and the backend responds with data or actions. This communication happens through APIs and typically uses technologies like JSON (JavaScript Object Notation) for data exchange.
Data Rendering: The frontend takes the data provided by the backend and displays it in a user-friendly manner. For example, a frontend developer might use JavaScript to render a list of products retrieved from the backend.
User Interactivity: Frontend developers create features that allow users to interact with the web application. When users submit forms, click buttons, or perform any action, the frontend communicates with the backend to process those actions.

Conclusion

In summary, frontend development focuses on what users see and interact with on a website, while backend development deals with the behind-the-scenes operations, data storage, and application logic. Both are essential components of web development, and understanding their roles and how they collaborate is a fundamental step for anyone looking to embark on a web development journey.

As you continue to explore web development, you'll find that there's much more to learn within each of these domains. So, whether you choose to specialize in frontend or backend development, or even become a full-stack developer proficient in both, this foundational knowledge will serve as your compass on your coding adventure. Happy coding!

Follow and like for more such blogs.

Connect me on LinkedIn

Thanks for reading until the end.

Building Your First Rock Paper Scissors Game: A Beginner's Guide

Aniket — Fri, 29 Sep 2023 14:18:11 +0000

Are you a budding web enthusiast looking to dip your toes into the world of web development? If you've just started your journey and want to create something fun and interactive, you're in the right place. In this beginner-friendly blog post, we'll walk you through the process of building your very own Rock Paper Scissors game using HTML, CSS, and JavaScript.

What is Rock Paper Scissors?

Ofc you're familiar with this game but if you aren't here's a quick summary :

Rock Paper Scissors is a classic hand game played between two people. The game has three possible outcomes other than a tie: Rock crushes Scissors, Scissors cuts Paper, and Paper covers Rock. It's a simple yet entertaining game that we'll bring to life on your web page.

Prerequisites

Before we dive into coding, make sure you have the following:

A basic understanding of HTML, CSS, and JavaScript.
A code editor like Visual Studio Code, Sublime Text, or any other of your choice.
A passion for learning and a desire to have fun while coding!

Let's Get Started!

Setting Up Your HTML

We'll begin by creating the structure of our web page using HTML. Open your code editor and follow these steps:

As we need to have all the other files connected we need to link them to our HTML file.

Furthermore we can add PRESS START 2P which is a cool font for a game which gives it a retro and gamifying feel.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css"> <!-- Link to your CSS file -->
    <script src="src/index.js" async></script> <!-- Link to your JavaScript file -->
    <link href='https://fonts.googleapis.com/css?family=Press Start 2P' rel='stylesheet'> <!-- A cool retro font -->
    <title>RPS</title>
</head>

Now we need basic buttons that when we click the JS knows what exactly we have clicked

To do so we will have two sets of buttons, one for the Computer and other for the user, but only make the user one's clickable
Computer side has given buttons because buttons can transform their positions unlike images which can't. We will be using transform to show more interactivity.

Be sure add images to Rock Paper and Scissors in your code. I have rotated them to make the orientation of those pictures correct.

        <button  id="c1" >
            <img src="assets/paper.png" alt="paper" style="transform: rotate(90deg);" >
        </button>
        <button  id="c2" >
            <img src="assets/rock.png" alt="rock" style="transform: rotate(90deg);" >
        </button>
        <button  id="c3" >
            <img src="assets/sissors.png" alt="scissors" style="transform: rotate(90deg);" >
        </button>


        <button id="b1" >
            <img src="assets/paper.png" alt="paper" style="transform: rotate(-90deg);">
        </button>
        <button id="b2" >
            <img src="assets/rock.png" alt="rock" style="transform: rotate(-90deg);">
        </button>
        <button id="b3" >
            <img src="assets/sissors.png" alt="scissors" style="transform: rotate(-90deg);">
        </button>

We also too need a scoreboard, other stats and a reset button.

    <div class="infocon">
        <h1>Rock Paper Scissors</h1>
        <h1 id="wl"></h1>
    </div>

    <div class="details">
        <h3 >Tries:<span id="try">0</span>/5</h3>
        <h3 >Wins :<span id="wins">0</span></h3>
        <h3 >Lose :<span id="lose">0</span></h3>
        <h3 >Ties :<span id="ties">0</span></h3>
        <h3>__________</h3>
        <h2 >WINNER:<br><br><span id="total"></span></h2><br>
        <h3>__________</h3>
        <button id="reset" onclick="reset()">RESET</button><br>
    </div>

Adding CSS to your Html

Now, let's style our game using CSS. Create a new CSS file (e.g., index.css) and add the following styles:
CSS depends on your own taste, feel free to make it in your own style.

/* Set the font and background color */
body {
    font-family: 'Press Start 2P';
    background-color: #C8F1F3;
}

/* Style buttons */
button {
    border: 0px;
    background-color: #C8F1F3;
}

/* Add animation to selected buttons */
.selected {
    transform: translateX(0%) translateY(-175%);
    transition: transform 1.5s ease-in-out;
}

You can take reference for CSS if you want from here

In this CSS code, we've set the font, background color, and styles for buttons. The .selected class adds a cool animation to the selected buttons.

Adding JavaScript for Interactivity

With your HTML and CSS in place, it's time to add JavaScript to make your game interactive and functional. Below, we'll break down the key JavaScript functions and their roles in your Rock Paper Scissors game.

Initializing Variables

let computerChoice = 0;
let a= 0;
const wl=document.getElementById("wl");
let wlt=[0,0,0];
let tries=0;
const W= document.getElementById("wins");
const L= document.getElementById("lose");
const T= document.getElementById("ties");
const Tr= document.getElementById("try");
const Total= document.getElementById("total");

In this section, you declare and initialize various variables that will be used to keep track of game statistics and elements on your web page. These variables will store information like the user's and computer's choices, win/loss/tie counts, and references to HTML elements where you'll display game outcomes.

getComputerChoice() Function

function getComputerChoice() {
    return Math.floor(Math.random() * 3) + 1;
}

This function generates a random number (1, 2, or 3) to simulate the computer's choice in the game. Each number corresponds to Rock, Paper, or Scissors, respectively.

AnimateComp() Function

function AnimateComp(objc) {
    console.log("anim")
    document.getElementById(objc).classList.add("selectedC");
    setTimeout(function () {
        document.getElementById(objc).classList.remove("selectedC");
    }, 3000);
}

AnimateComp() is responsible for adding and removing a class called "selectedC" from the computer's choice button, creating an animation effect when the computer makes a selection. This function adds a class to the button and removes it after 3 seconds to reset the animation.

determineWinner() Function

function determineWinner(userChoice, computerChoice) {
    computerChoice= a;

    if (userChoice === computerChoice) {
        wl.innerHTML="ITS A TIE";
        wlt[2]+=1;
    } else if ((userChoice===3 && computerChoice===1)||(userChoice===2 && computerChoice===3)||(userChoice===1 && computerChoice===2)){
        wl.innerHTML="YOU WONN!";
        wlt[0]+=1;
    } else {
        wl.innerHTML="YOU LOSEE!";
        wlt[1]+=1;
    }
    // ...Above code is available on GitHub
}

determineWinner() takes two arguments: userChoice and computerChoice. It calculates the game result and updates the display accordingly. If it's a tie, a message is shown, and the tie count is incremented. If the user wins or loses, the respective message is displayed, and the win or loss count is updated. The function also keeps track of the number of tries and calculates the overall winner after 5 tries.

userChoiceHandler() Function

function userChoiceHandler(userChoice) {
    setTimeout(function () {
       determineWinner(userChoice, computerChoice);
    }, 4000);
}

userChoiceHandler() is called when the user makes a choice by clicking a button. It sets a timeout of 4 seconds (4000 milliseconds) before calling determineWinner(). This delay simulates the computer making its choice before revealing the result.

Event Listeners for User Choices

document.getElementById("b1").addEventListener("click", function () {
    animateSelection("b1");
    setTimeout(function () {
        userChoiceHandler(1);
    }, 1000);
});
//Same for other buttons too

animateSelection() Function

function animateSelection(obj) {
    computerChoice = getComputerChoice();
    if(computerChoice===1){a= computerChoice;AnimateComp("c1")}
    else if(computerChoice===2){a=computerChoice;AnimateComp("c2")}
    else{a=computerChoice;AnimateComp("c3")} 
    document.getElementById(obj).classList.add("selected");
    setTimeout(function () {
        document.getElementById(obj).classList.remove("selected");
    }, 3000);
}

animateSelection() is responsible for simulating the computer's choice, animating the user's choice button, and adding/removing the "selected" class to create a visual effect. The computer's choice is determined, the animation is applied to the user's choice button, and the class is removed after 3 seconds.

reset() Function

function reset(){
    wlt=[0,0,0];
    tries=0;
    wl.innerHTML="";
    W.innerHTML=wlt[0];
    L.innerHTML=wlt[1];
    T.innerHTML=wlt[2];
    Tr.innerHTML=tries;
    Total.innerHTML=""
}

reset() is a function to reset the game statistics when the "RESET" button is clicked. It clears the win, loss, tie, and try counts, as well as any displayed messages.

For the above code visit my GitHub

END RESULT

Conclusion

With these JavaScript functions, your Rock Paper Scissors game is now fully functional and interactive. These code snippets handle everything from generating computer choices to determining winners and providing visual feedback to the user. You can further customize and enhance your game as you continue to explore the world of web development. Happy coding!

GITHUB for the above game

Follow and like for more such blogs.
Connect me on LinkedIn

Thanks for reading until the end.

Command-Line Planner in C (with Saving and Loading)

Aniket — Mon, 25 Sep 2023 17:20:21 +0000

Introduction

A calendar or planner is a great tool to help keep track of appointments, events, and tasks. In this tutorial, I'll guide you through the process of creating a simple command-line calendar and planner using the C programming language. Not only will you be able to add and view events, but we'll also implement the ability to save your events to a file and load them back when you start the program again. Let's get started!

Prerequisite

Basic knowledge of the C programming language.
A C compiler installed on your system (e.g., GCC) or a Repl.
A text editor or an Integrated Development Environment (IDE) for writing C code.

Overview

Our event calender will following features:

Add Event: We can add events by specifying a date (in the format YYYY-MM-DD) and a description for the event.
View Events for a Date: We can view all events scheduled for a specific date.
View All Events: We can see a list of all the events in the calendar.
Save Events to File: Events can be saved to a text file for persistence.
Load Events from File: When the program starts, it will attempt to load previously saved events from the file.
Exit: We can exit the program, and it will save the events before exiting.

Step 1: Define the Event Structure

We will start by defining a structure to represent an event. Open your text editor and create a new C source file (e.g., 'calendar.c'). Add the following code:

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

typedef struct Event {
    char date[12];   // Date in format YYYY-MM-DD
    char description[100];
} Event;

Step 2: Implement Functions

// Function to add an event to the calendar
void addEvent(Event *calendar, int *eventCount) {
    if (*eventCount >= 100) {
        printf("Calendar is full. Cannot add more events.\n");
        return;
    }

    Event newEvent;
    printf("Enter event date (YYYY-MM-DD): ");
    scanf("%s", newEvent.date);
    printf("Enter event description: ");
    getchar();  // Consume newline left in the buffer
    fgets(newEvent.description, sizeof(newEvent.description), stdin);

    calendar[*eventCount] = newEvent;
    (*eventCount)++;
    printf("Event added successfully!\n");
}

// Function to view events for a specific date
void viewEvents(Event *calendar, int eventCount, char *date) {
    printf("Events for %s:\n", date);
    for (int i = 0; i < eventCount; i++) {
        if (strcmp(calendar[i].date, date) == 0) {
            printf("- %s", calendar[i].description);
        }
    }
    printf("\n");
}

// Function to view all events
void viewAllEvents(Event *calendar, int eventCount) {
    printf("All Events:\n");
    for (int i = 0; i < eventCount; i++) {
        printf("Date: %s\n", calendar[i].date);
        printf("Description: %s", calendar[i].description);
    }
    printf("\n");
}

// Function to save events to a text file
void saveEventsToFile(Event *calendar, int eventCount, const char *filename) {
    FILE *file = fopen(filename, "w");
    if (file == NULL) {
        printf("Error opening file for saving.\n");
        return;
    }

    for (int i = 0; i < eventCount; i++) {
        fprintf(file, "%s\n", calendar[i].date);
        fprintf(file, "%s", calendar[i].description);
    }

    fclose(file);
}

// Function to load events from a text file
int loadEventsFromFile(Event *calendar, int *eventCount, const char *filename) {
    FILE *file = fopen(filename, "r");
    if (file == NULL) {
        return 0;  // File doesn't exist or cannot be opened
    }

    while (fscanf(file, "%s", calendar[*eventCount].date) != EOF) {
        fgetc(file);  // Consume newline
        fgets(calendar[*eventCount].description, sizeof(calendar[*eventCount].description), file);
        (*eventCount)++;
    }

    fclose(file);
    return 1;  // File successfully loaded
}

Step 3: Implement the Main Function

In the main function, the program to load events from a file (creating a new file if not found), and it will also save events before exiting:

int main() {
    Event calendar[100];  // Array to store events
    int eventCount = 0;   // Number of events in the calendar

    // Try loading events from a file, create a new file if not found
    if (!loadEventsFromFile(calendar, &eventCount, "events.txt")) {
        printf("No saved events found. Creating a new calendar.\n");
    }

    while (1) {
        printf("\nOptions:\n");
        printf("1. Add Event\n");
        printf("2. View Events for a Date\n");
        printf("3. View All Events\n");
        printf("4. Save Events to File\n");
        printf("5. Exit\n");
        printf("Enter your choice: ");

        int choice;
        scanf("%d", &choice);

        switch (choice) {
            case 1:
                addEvent(calendar, &eventCount);
                break;
            case 2: {
                char date[12];
                printf("Enter date (YYYY-MM-DD): ");
                scanf("%s", date);
                viewEvents(calendar, eventCount, date);
                break;
            }
            case 3:
                viewAllEvents(calendar, eventCount);
                break;
            case 4:
                saveEventsToFile(calendar, eventCount, "events.txt");
                printf("Events saved to file.\n");
                break;
            case 5:
                printf("Exiting...\n");
                // Save events before exiting
                saveEventsToFile(calendar, eventCount, "events.txt");
                exit(0);
            default:
                printf("Invalid choice. Try again.\n");
        }
    }
    return 0;
}

Step 4: Compile and Run

You can run the following program through GCC compiler or online coding IDE.

You can run the following program here :

Thank you so much for reading.
Follow and Like for more.

You can also follow me on LinkedIn, I think building connections is better

React-i-Py

Aniket — Sun, 24 Sep 2023 12:30:31 +0000

Welcome to the Second Article of the series "ReactPy"

ReactJS

As ReactJS takes a approach of JSX to display HTML elements by Javascript.

Similar Approach is taken by Python

In the world of web development, the creation of a web application often involves a division of responsibilities between the client and server. The client handles the presentation and user interface, while the server manages data and logic. However, ReactPy, a Python library, takes a different approach by centralizing both the view and its associated data and logic within a single Python codebase. This innovative approach allows developers to construct HTML interfaces in Python itself, simplifying the development process. In this blog post, we'll explore how ReactPy empowers developers to create web interfaces using familiar Python syntax.

Let's see the key differences between HTML and ReactPy

Let's start by comparing traditional HTML with ReactPy. Suppose we want to create a simple web page with a title and a to-do list. In standard HTML, it would look like this:

HTML

<h1>My Todo List</h1>
<ul>
    <li>Build a cool new app</li>
    <li>Share it with the world!</li>
</ul>

With ReactPy, we can achieve the same result using Python code:

>>>ReactPy

from reactpy import html

layout = html.div(
    html.h1("My Todo List"),
    html.ul(
        html.li("Build a cool new app"),
        html.li("Share it with the world!"),
    ),
)

The ReactPy code closely resembles the HTML structure, with Python functions like h1, ul, and li corresponding to their HTML tag counterparts. However, to capture the layout, we wrap it in a div and assign it to a variable.

Attributes of HTML in ReactPy

Web pages often contain elements with various attributes, such as images with source URLs, classes for styling, styles for positioning, and more. In standard HTML, you would use attributes like this:

HTML

<img
    src="https://picsum.photos/id/237/500/300"
    class="img-fluid"
    style="width: 50%; margin-left: 25%;"
    alt="Billie Holiday"
    tabindex="0"
/>

In ReactPy, you can add these attributes using a Python dictionary:

>>>ReactPy

html.img(
    {
        "src": "https://picsum.photos/id/237/500/300",
        "class_name": "img-fluid",
        "style": {"width": "50%", "margin_left": "25%"},
        "alt": "Billie Holiday",
        "tab_index": "0",
    }
)

Key Differences

There are some key differences to note. First, ReactPy uses snake_case for attribute names, unlike the dash-separated words in HTML. For instance, tab-index becomes tab_index, and margin-left becomes margin_left. Second, instead of using a string for the style attribute, ReactPy employs a dictionary to define CSS properties. This approach simplifies code readability and avoids the need to escape characters within strings. Lastly, to prevent conflicts with the Python keyword class, ReactPy uses class_name for the class attribute.

Conclusion

In conclusion, ReactPy offers web developers a Pythonic way to create web interfaces by centralizing HTML layout and attributes within Python code. This approach not only simplifies the development process but also makes the code more readable and maintainable. Whether you're building a simple web page or a complex web application, ReactPy can streamline your development workflow and empower you to leverage Python's strengths in the world of web development. Give it a try and experience the benefits of Python-powered web development with ReactPy.

For more information visit

HTML With ReactPy - ReactPy

In a typical Python-based web application the responsibility of defining the view along with its backing data and logic are distributed between a client and server respectively. With ReactPy, both ...

reactpy.dev

Connect me on LinkedIn

Follow and like for more .

ReactPy = React + Python ?

Aniket — Sun, 24 Sep 2023 08:53:28 +0000

Ever heard of writing a React App in Python, this is what ReactPy is all about.

ReactPy is a library for building user interfaces in Python without Javascript. ReactPy interfaces are made from components that look and behave similar to those found in ReactJS. Designed with simplicity in mind, ReactPy can be used by those without web development experience while also being powerful enough to grow with your ambitions.

Let's start by installing ReactPy :-

To start using ReactPy, you'll first need to install it. Depending on your choice of backend, you can install ReactPy along with the corresponding backend implementation. Here's how you can do it:

Installing with Starlette Backend

pip install "reactpy[starlette]"

You can substitute starlette with any other backend as you want, example: FastAPI , Flask , Django , etc

Installing a Pure Version of ReactPy

If you prefer a "pure" version of ReactPy without a specific backend, you can install it without any extras :

pip install reactpy

This option is useful if you plan to use a custom backend or if you want to manually manage dependencies for your chosen backend.

"Hello, World!"

Let's get started by creating the first App using ReactPy

To get started, setup your coding environment as you want such as an IDE, preferrably use VScode or Replit's ReactPy.

Configuring Your ReactPy Application

To run ReactPy in production, you'll need to configure your chosen backend with a ReactPy view. The following steps demonstrate how to set up and run ReactPy with a sample backend. Remember that the process may vary depending on your chosen backend, but the basic structure remains consistent.

Import Necessary Modules: Import the required modules from your chosen backend and ReactPy.

from reactpy import component, html
from reactpy.backend.my_chosen_backend import configure

Define Your React Component: Create a React component using ReactPy. This component will be the core of your web application. In this example, we create a simple "Hello, world!" component.

@component
def HelloWorld():
    return html.h1("Hello, world!")

run(HelloWorld)

Suppose you're using Flask Framework

from reactpy import component, html
from reactpy.backend.flask import configure
from flask import Flask

@component
def HelloWorld():
    return html.h1("Hello, World!")

app = Flask(__name__)
configure(app, HelloWorld)

You can run the program here :

Connect me on LinkedIn

Follow and like for more .

Simple Regex in C

Aniket — Thu, 21 Sep 2023 11:28:32 +0000

Why? Why not to learn something we implement in software but didn't knew how it works under the hood.

Yesterday, while I was searching for ideas, I came across an article on the internet about a Regex matcher in the C language. Why did I decide to implement a Regex in C? Because I was curious about how regular expressions work under the hood in any language. And what better language to implement it in than C?

C is faster than most other languages and more understandable than higher-level languages. It offers the best of both worlds: performance and maintainability through readability.

Credits:

I would like to share the credits with : Rob Pike of Princeton University

The original code for this was written by Rob Pike whose article I did came across.

If you are new to Regex just visit this Github Repo.

To make a Regex Matcher we need to understand what we really need to implement.

  c    matches any literal character c
  .    matches any single character
  ^    matches the beginning of the input string
  $    matches the end of the input string
  *    matches zero or more occurrences of the previous character
  \0   terminating condition

Let's Dive into code:

Let's say we have two strings one is the Regex expression and other is the text we need to match:

We can declare them by:
char *regexp = "[your regex here]";
char *text = "[text here]";

We will pass these values through the main function and result will be obtained in result variable which can be either 1 or 0 representing true or false

int result = match(regexp, text);
if (result)
   printf("Pattern found in the text.\n");
else
   printf("Pattern not found in the text.\n");

Match Function:

int match(char *regexp, char *text) {
    if (regexp[0] == '^')
        return matchhere(regexp+1, text);
    do {
        if (matchhere(regexp, text))
            return 1;
    } while (*text++ != '\0');
    return 0;
}
int matchhere(char *regexp, char *text) {
    if (regexp[0] == '\0')
        return 1;
    if (regexp[1] == '*')
        return matchstar(regexp[0], regexp+2, text);
    if (regexp[0] == '$' && regexp[1] == '\0')
        return *text == '\0';
    if (*text!='\0' && (regexp[0]=='.' || regexp[0]==*text))
        return matchhere(regexp+1, text+1);
    return 0;
}

What all this code does :

^ : When the ^ symbol is used at the beginning of a regular expression, it signifies that the pattern must match at the beginning of the text. If the first character of the regular expression does not match the first character of the text, the function returns 0, indicating that there is no match. In other words, the ^ character ensures that the pattern starts matching from the very beginning of the text. If it doesn't, the function returns false (0).

c: The c character in a regular expression represents any literal character 'c'. It matches exactly with the character 'c' in the text. If the character 'c' in the regular expression doesn't match the corresponding character in the text, the function returns 0, indicating that there is no match.

.: The . character in a regular expression is a wildcard that matches any single character in the text. It is a placeholder for any character. For example, if the regular expression contains a.b, it would match any character between 'a' and 'b' in the text. If there is no matching character in the text, the function returns 0.

* : The * character in a regular expression indicates zero or more occurrences of the previous character or expression. For instance, ab* would match 'a' followed by zero or more 'b' characters. The function checks for zero or more occurrences of the previous character in the regular expression and returns 1 if a match is found; otherwise, it returns 0.

$: The $ character in a regular expression represents the end of the input string (text). It ensures that the pattern must match at the very end of the text. If the regular expression consists of only $ and the text reaches its end as well, the function returns 1, indicating a successful match at the end of the text. If the text still has characters remaining, the function returns 0, indicating no match at the end of the text.

You can use above Regex Matcher here :

Code Available here : Github

You can get the whole Article

Follow and like for more such blogs.
Connect me on LinkedIn

Thanks for reading until the end.

Simple Code Interpreter In C

Aniket — Wed, 20 Sep 2023 06:49:20 +0000

Ever wondered how a interpreter works ? I wondered too.

The basic concept for a computer/how it translates basic human logic to machine level logic goes to Automata Theory of Computer Science by an well renowned English mathematician, computer scientist, logician, cryptanalyst, philosopher and theoretical biologist Alan Turing .

Learn more about Automata Theory here :

Automata theory is the study of abstract machines and automata, as well as the computational problems that can be solved using them. It is a theory in theoretical computer science with close connections to mathematical logic. The word automata comes from the Greek word αὐτόματος, which means "self-acting, self-willed, self-moving". An automaton is an abstract self-propelled computing device which follows a predetermined sequence of operations automatically. An automaton with a finite number of states is called a Finite Automaton (FA) or Finite-State Machine (FSM). The figure on the right illustrates a finite-state machine, which is a well-known type of automaton. This automaton consists of states and transitions. As the automaton sees a symbol of input, it makes a transition to another state, according to its transition function, which takes the previous state and current input symbol as its arguments.

View on Wikipedia

What we are implementing toady ?
A stack based simple interpreter for beginners in C

Prerequisite :

Well versed with C language.
Implementation and working of Stack .

Let's start with implementing simple Addition interpreter in C

let's start with implementing :

What we need ? A set of predefined words which are reserved for the program to follow instructions given by the user.

What are these instructions? If you've ever written assembly code, you're likely familiar with them. Instructions are commands provided to a computer at a high level. Essentially, an instruction is a directive given to a computer's processor by a computer program. In this context, even though we're not directly interfacing with the computer's processor, we're achieving a similar effect through an interpreter implemented in C.

An enum in the C language is a keyword used to define a data type that consists of a set of named integral constants. These constants are typically used to represent related values or options in a more readable and expressive manner within a program.

Why use enums? To simply reserve specific words or values for use as keywords.

These are the keywords we will be reserving :

typedef enum {
    LOAD_CONSTANT, //Tell machine to load value
    ADD,           //Instruct machine to add
    PRINT,         //Print the Stack-Top
    HALT,          //Exit the program
} OpCode;

And a stack too, we limited static stack to 100 but can dynamic using stack using linked list.

#define STACK_SIZE 100
double stack[STACK_SIZE];
int stackTop = 0;

We will be predefining the values to add to keep it simple:

// Constants for the bytecode program
double constants[] = {
    10.0,
    20.0,
};

PUSH AND POP for the Stack

// Function to push a value onto the stack
void push(double value) {
    if (stackTop < STACK_SIZE) {
        stack[stackTop++] = value;
    } else {
        printf("Stack overflow!\n");
    }
}

// Function to pop a value from the stack
double pop() {
    if (stackTop > 0) {
        return stack[--stackTop];
    } else {
        printf("Stack underflow!\n");
        return 0.0;
    }
}

Lets start with the logic of this program

int ip = 0;  // Instruction pointer

int main() {
    while (1) {
        OpCode instruction = bytecode[ip++];
        switch (instruction) {
            case LOAD_CONSTANT: {
                int constantIndex = bytecode[ip++];
                double constantValue = constants[constantIndex];
                push(constantValue);
                break;
            }
            case ADD: {
                double b = pop();
                double a = pop();
                double result = a + b;
                push(result);
                break;
            }
            case PRINT: {
                double value = pop();
                printf("Result: %lf\n", value);
                break;
            }
            case HALT: {
                return 0;  // Exit the program
            }
        }
    }
    return 0;
}

Explanation :

While Loop (while (1) { ... }):

Imagine this loop as a never-ending cycle, like a carousel that keeps spinning.

Inside this loop, our program will keep doing things repeatedly. Fetching Instructions (OpCode instruction = bytecode[ip++];):

Fetching Instructions (OpCode instruction = bytecode[ip++];):

OpCode instruction is like a note that tells us what to do next.

bytecode[ip++] is like turning the page in the recipe book to get the next step.

Switch Statement (switch (instruction) { ... }):

We look at the instruction and decide which action to take.

LOAD_CONSTANT:

This is like a step that tells us to remember a number, say, 10. int constantIndex is like remembering the page number where we found 10.

double constantValue is like writing down the number 10 on a piece of paper.

push(constantValue) is like putting that piece of paper in our pocket.

ADD:

It's like a step that says, "Take two numbers and add them." double b = pop(); is like taking two pieces of paper with numbers written on them.

double a = pop(); is like reading the numbers from those papers.

double result = a + b; is like adding those numbers together and getting a new number.

push(result) is like putting the new number on a new piece of paper and keeping it.

PRINT:

It's like a step that says, "Tell me what number you have." double value = pop(); is like taking out the piece of paper with a number.

printf("Result: %lf\n", value); is like showing that number to someone.

HALT:

It's like the last step in the book that says, "We're done reading."

return 0; is like leaving closing the book.

*Let's have a sample program : *

// The bytecode program
unsigned char bytecode[] = {
    LOAD_CONSTANT, 0,  // Load constant 10
    LOAD_CONSTANT, 1,  // Load constant 20
    ADD,               // Add the top two values on the stack
    PRINT,             // Print the result
    HALT,              // Halt the interpreter
};

// Constants for the bytecode program
double constants[] = {
    10.0,
    20.0,
};

Working of above code:

Start
---->
LOAD_CONSTANT (Load 10)
---->
LOAD_CONSTANT (Load 20)
---->
ADD (Add 10 and 20)
---->
PRINT (Print the result)
---->
HALT (Stop the interpreter)
---->
End

This is very simple interpreter, advanced ones use statements like jumps, loops, etc and advance concepts of Turing Machines ,which are different and can do even more than Stack based interpreters

As a beginner you can try to implement statements like :

Jump
Subtract
Other mathematical operations
Brainstorm more ideas ............

You can use this interpreter here, fork to experiment more :

Code is available here : Github

Thank you so much for reading.
Follow and Like for more .

You can also follow me on LinkedIn, I think building connections is better

Single Page Image Editor

Aniket — Tue, 19 Sep 2023 14:16:50 +0000

Why did I make it? As a beginner, I need to understand how exactly JavaScript works. This small project made me think about how would I implement these features using JavaScript.

This project is for beginners, so beginners follow up the guide and if you are experienced feel to add something you are free to do so.

Look at the end result, that's we gonna create today

Let's dive into coding :

As you can see the webpage we need basic set of five inputs of type = "range" which makes a slider on the HTML page which we can further use to manipulate properties of the image. Further on we need an input type = "file", an img tag to show the preview of the image and a download button to download the resulting image.

<label for="brightness">Brightness:<br></label>
<input type="range" id="brightness" min="0" max="2" step="0.1" value="1">

Next, we can make similar tags for Contrast, Saturation, Blur and Rotation. Now we need to take input, need a button to download and need an img tag to show the preview of the image.

<input type="file" id="image-input" accept="image/*">
<img id="image-preview" src="">

<button id="download-btn">Download Image</button>

Now we have an external frame, but now we need the working under the hood that is the JavaScript. Add event listener to every input and button.

const brightnessRange = document.getElementById('brightness');
//Other property codes go here

const imageInput = document.getElementById('image-input');
const imagePreview = document.getElementById('image-preview');

After adding these we need to show a preview of the image in our browser which can be done using the link we get from input to redirect it to the preview link.

imageInput.addEventListener('change', (e) => {
  const file = e.target.files[0]; // We need to traget the first link/file.
  const reader = new FileReader(); //make a FileReader class.
  reader.onload = () => {
    imagePreview.src = reader.result;
  }; //Load image in preview as soon as FileReader reads the image.
  if (file) {
    reader.readAsDataURL(file);
  }//If file holds a valid rendered image load it.
});

Now we need to manipulate the image preview section, adding EventListener to each element seems the way.

brightnessRange.addEventListener('input', applyFilters);
//.......make similar for other sections
rotateRange.addEventListener('input', applyFilters);

Take the input change and call the function applyFilters.

function applyFilters() {
  const brightnessValue = brightnessRange.value;
  const contrastValue = contrastRange.value;
  const saturationValue = saturationRange.value;
  const blurValue = blurRange.value;
  const rotateValue = rotateRange.value;
  //Manipulate the style to make changes in CSS of image. 
  //We can also use TweenLite to do so.  
  imagePreview.style.filter = `brightness(${brightnessValue}) contrast(${contrastValue}) saturate(${saturationValue}) blur(${blurValue}px)`;
  imagePreview.style.transform = `rotate(${rotateValue}deg)`;
}

Now we need to download this image. We can do this by adjusting a canvas onto the preview image and adding an EventListener to the download button. But we need to manipulate the image first and then give a trigger to download the image.

downloadButton.addEventListener('click', () => {
  //Initialise a canvas
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  // Set canvas dimensions
  canvas.width = imagePreview.width;
  canvas.height = imagePreview.height;

  // Apply filters and transformations to the canvas
  context.filter = `brightness(${brightnessRange.value}) contrast(${contrastRange.value}) saturate(${saturationRange.value})`;
  context.rotate((rotateRange.value * Math.PI) / 180); 
  // Convert degrees to radians
  context.drawImage(imagePreview, 0, 0, canvas.width, canvas.height); 
  // Draw image with matching dimensions

  // Convert canvas to data URL
  const editedImageURL = canvas.toDataURL('image/jpeg');

  // Create a download link
  const downloadLink = document.createElement('a');
  downloadLink.href = editedImageURL;
  downloadLink.download = 'edited_image.jpg';
  downloadLink.click();
});

Add CSS to make it look better as you want.

Disclaimer: The rotate image button is not working as intended.
Suggestion: Try to use a blank canvas and draw the image onto the canvas to rotate it.

You can use this editor here :

Thank You for following till the end and your lovely support !
Follow and Like for more......
That's it for the day 👋

Blood Group Survey WebApp

Aniket — Sat, 16 Sep 2023 13:34:22 +0000

Hello 👋 , this is my first Blog.

This Flask application allows users to input their name, age, blood group, and quantity of blood they are willing to donate. The data is stored in a SQLite database. A notification is displayed to the user after they submit their response.

Prerequisites :

Basic Knowledge of Python
Flask, SQLAlchemy and Plyer

Dive in :

Let's dive into how you could make a simple Python survey app with minimal coding as a beginner. Dependencies are Flask Framework which allows Python to interact with the Web world, SQLAlchemy to store all the data and Plyer to notify the user.

Let's start by creating some Python Code for storing data and then move onto Python and HTML :

Requirements are the Person's Name, Blood Group, Age and Quantity of blood donated, so firstly we will create a class that connects to SQLAlchemy to create a table for the same.

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///data.db'
db = SQLAlchemy()

#creation of database
db = SQLAlchemy(app)
with app.app_context():
    db.create_all()

class Response(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50))
    age = db.Column(db.Integer)
    blood_group = db.Column(db.String(5))
    quantity = db.Column(db.Integer)

Now we need to create a route such that an HTML file is loaded as soon as the webpage is loaded. We need to create a route using Flask Framework using GET and POST methods to retrieve information/data between the webpage, Python and our database. Blood groups are defined so that only valid entries are taken into consideration.

#Global Variable
blood_groups = ['A+', 'A-', 'B+', 'B-', 'O+', 'O-', 'AB+', 'AB-']
@app.route('/', methods=['GET', 'POST'])
def home():  
    db.create_all()
    if request.method == "POST" and 'submit' in request.form: 
        blood_group = request.form['blood_group']
        Name=request.form['Name']
        Age= int(request.form['Age'])
        Quantity= int(request.form['Quantity'])
        if Age<18:
            return redirect('/')     
        else:
            response = Response(blood_group=blood_group, name=Name, age=Age, quantity=Quantity)
            db.session.add(response)
            db.session.commit()
            #Notification Block goes here       
            return redirect('/')   
    return render_template('home.html', blood_groups=blood_groups)

As you can see we have just created a simple route that redirects us to the file name home.html we are using a POST method to retrieve the data, the same method should be used in the HTML file.

<form class="form" action="#" method="POST">
      <h1>Blood Group Survey</h1>
      <h3>Enter Name</h3>
      <input type="text" name ="Name" required>
      <h3>Age</h3>
      <input type="text" name ="Age" required>
      <h3>Quantity Of Blood</h3>
      <input type="text" name ="Quantity" required>
      <h3>Please select your blood group:</h3>
      <select id="blood_group" name="blood_group"><br>
        {% for group in blood_groups %}
        <option value="{{ group }}" >{{ group }}</option>
        {% endfor %}
      </select>
      <input class="button" type="submit" value="submit" name= "submit">
</form>

Now we just need to create a notification block using Python and Plyer which can be imported. This provides desktop notifications to the user for better interactiveness.

            #plyer notification
            notification.notify(
                title='Entry Added',
                message='Respond Successfully Addded',
                app_name='Blood Donation Survey',
            )

CSS can also be added to make it look better. The code uploaded on GitHub consists of CSS and all the integration required and a step-by-step guide in the Readme file to do so.

Result :

GitHub : https://github.com/Aniike-t/Simple-Py-Projects/tree/main/Blood%20Group%20App

Myself Aniket, Thank you for reading my first blog.
Also posted on : https://anii1ket.hashnode.dev/blood-donation-survey-webapp