DEV Community: Ahsan Mangal 👨🏻‍💻

Don't Touch React JS Until You Know These JavaScript Things!

Ahsan Mangal 👨🏻‍💻 — Fri, 15 Dec 2023 21:48:55 +0000

Hold on, aspiring React JS devs! It's important to comprehend a few basic JavaScript ideas before delving into the world of virtual components and state management. Consider it as creating a solid base upon which to build your masterpiece in React. Ignoring these fundamentals might cause confusion, irritation, and eventually a subpar development experience. So saddle up and get ready to learn these fundamentals of JavaScript before starting your React trip!

1. JavaScript Fundamentals: The Bedrock of Your Code

- Variables & Data Types:
Discover how to use appropriate variable declarations and data types to store and manipulate data, including strings, integers, and objects. Gain an understanding of the scope and the behaviour of variables in various blocks and functions.

- Control Flow & Functions:
Learn how to create reusable functions that take parameters, carry out specified actions, and return values. To manage program flow, comprehend control flow statements like if-else, switch statements, and loops (for, while, etc.).

- Operators & Expressions:
Math is not a scary thing! Discover how to use both simple and complex operators, such as assignment, logical, comparison, and arithmetic operators. Recognize how expressions operate by putting operands and operators together to create values.

// Get the canvas element
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);

// Draw a circle
ctx.beginPath();
ctx.arc(150, 50, 20, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();

// Draw a line
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(200, 150);
ctx.stroke();

2. Object-Oriented Programming: Building Blocks of Complex Apps

- Classes & Objects:
Learn how to construct and utilize classes and objects to get started with object-oriented programming (OOP). Acquire knowledge of constructors, methods, properties, and inheritance to develop modular and reusable programs.

- Prototypal Inheritance:
Discover JavaScript's special inheritance paradigm, known as prototypal inheritance, in which objects inherit attributes and functions from their prototype objects. Recognize how this varies from conventional class-based inheritance and learn how to take use of it.

class Ball {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.dx = 2;
    this.dy = 3;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
    ctx.fillStyle = this.color;
    ctx.fill();
  }

  update() {
    this.x += this.dx;
    this.y += this.dy;

    if (this.x + this.radius >= canvas.width || this.x - this.radius <= 0) {
      this.dx *= -1;
    }
    if (this.y + this.radius >= canvas.height || this.y - this.radius <= 0) {
      this.dy *= -1;
    }
  }
}

const ball = new Ball(50, 50, 10, 'red');

function animate() {
  ball.update();
  ball.draw(ctx);
  requestAnimationFrame(animate);
}

animate();

3. Asynchronous Programming: Handling the Flow of Time

*- Callbacks & Promises: *
Master the art of handling asynchronous operations in JavaScript using callbacks and promises. Understand how callbacks work and how promises provide a cleaner and more predictable way to manage asynchronous code flow.

*- Async/Await: *
Embrace the power of async and await keywords to write cleaner and more readable code for asynchronous operations. Learn how to handle multiple asynchronous operations concurrently and avoid callback spaghetti!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wowh4t022qakkybk9277.png)async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

fetchData().then(data => {
  // Update the UI with the fetched data
  const element = document.getElementById('data-container');
  element.innerHTML = data.map(item => `<li>${item.name}</li>`).join('');
});

4. DOM Manipulation: Bringing Your UI to Life

- DOM Fundamentals:
Recognize how your website's HTML elements are represented by the Document Object Model (DOM). Discover how to use JavaScript to access and edit DOM elements, changing their content, styles, and attributes.

- Events & Event Listeners:
Learn how to utilize events and event listeners to record user interactions with your website. Discover how to manage key presses, scrolls, clicks, and other user events by adding event listeners to DOM elements.

5. Debugging & Error Handling: Your Superpowers for Troubleshooting

*- Console & Debugging Tools: *
Learn how to use the browser console and debugging tools to identify and fix errors in your JavaScript code. Understand how to use breakpoints, step through code, and inspect variables to diagnose issues.

*- Error Handling: *
Don't let errors stop you! Learn how to write proper error handling code to gracefully handle runtime errors, log them effectively, and provide helpful feedback to users.

Keep in mind that these are only the fundamental components. After you've grasped these fundamentals, you'll be ready to take on the fascinating world of React JS with assurance and create incredible online applications. So pay attention to these fundamental ideas, put them into practice, try new things, and don't be embarrassed to ask for assistance!

Bonus SEO Tips:

Use relevant keywords throughout the article, including "JavaScript," "React JS," "beginners," and "fundamentals."
Include internal links to other relevant articles on your website.
Optimize your article for mobile devices.
Promote your article on social media and other online communities.

Variables and Data Types in Programming: A Beginner's Guide

Ahsan Mangal 👨🏻‍💻 — Tue, 17 Oct 2023 09:25:21 +0000

Variables and data types are important programming principles that any newcomer should learn. In this article, we will look at the fundamentals of variables and data types, including their definition, purpose, and use in various programming languages.

Variables

A variable is a designated storage space where a value or data is stored. Variables are used in programming to store information that might change throughout the execution of a program. The name of a variable is known as its identifier, and it is used in code to refer to the variable.

The primary goal of using variables is to improve the readability and reliability of your code. By giving a variable a meaningful name, you may avoid utilizing magic numbers or hard-coded values throughout your code. This makes your code easier to understand and adjust later on.

Here's an example of a variable declaration in Python:

x = 5

In this example, x is the variable, and 5 is the initial value assigned to it.

Data Types

A data type specifies the type of information that may be stored in a variable. Data types vary by computer language, but some typical ones include integers, floats, texts, and booleans.

Here are a few ways of explaining variables in Python with various data types:

# Integer
x = 5

# Float
y = 3.14

# String
name = "John Doe"

# Boolean
is_true = True

It is important to note that each data type has its own set of valid operations and procedures. A string variable, for example, cannot be used for arithmetic operations, nor can two integer variables be concatenated.

String Operations

Strings are character sequences that can be modified with operations such as concatenation, slicing, and formatting.

Here are some examples of string operations in Python:

# Concatenation
full_name = "John " + "Doe"
print(full_name) # Output: John Doe

# Slicing
name = "John Doe"
first_name = name[:5]
last_name = name[5:]
print(first_name) # Output: John
print(last_name) # Output: Doe

# Formatting
name = "John Doe"
age = 30
print("My name is {} and I am {} years old.".format(name, age)) # Output: My name is John Doe and I am 30 years old.

Arrays and Lists

Collecting data types such as arrays and lists allows you to store numerous values in a single variable. There are, still some significant distinctions between arrays and lists.

Arrays have a set size, which means you can't add or delete elements from them once they've been created. They also demand that all items be of the same data type.

Lists, on the other hand, have a dynamic size, which means you may add or delete entries at any moment. They also support components of various data kinds.

Here's how to make an array and a list with JavaScript:

// Array
const scores = [80, 70, 90];

// List
const students = ["John", "Jane", "Bob"];

Object Oriented Programming

Object-oriented programming (OOP) is a framework for programming that allows you to build objects that reflect actual items in the real world. The attributes and methods of objects explain their behavior and activities.

Here's an example of creating a simple object in JavaScript:
javascript const person = { name: "John Doe", age: 30, sayHello() { console.log(Hello! My name is ${this.name} and I am ${this.age} years old.); } };

Functions

Functions are code blocks that carry out certain duties. They take parameters as input and return values as output. You may reuse functions throughout your code, making it more modular and efficient.

Here's an example of creating a function in JavaScript:

function greet(name) {
  console.log(`Hello, my friend! My name is ${name}.`);
}

greet("John"); // Output: Hello, my friend! My name is John.

Conclusion:

All programmers must be familiar with variables and data types. Variables are used to store and modify data, whereas data types guarantee that code is dependable, effective, and clear. Understanding them leads to more effective problem-solving and communication. Begin learning now to swiftly improve your coding abilities!

How to become a coder without a degree

Ahsan Mangal 👨🏻‍💻 — Sat, 07 Oct 2023 00:16:35 +0000

The demand for skilled programmers and coders is higher in today's digital age. Many people assume that a computer science degree is a prerequisite for a career in coding, but the reality is quite different.

You can become a proficient coder without a formal degree thanks to the wealth of resources available online, a strong work ethic, and determination. In this article, we will guide you through becoming a coder without a degree, offering examples, subheadings, and code snippets to help you along the way.

Section 1: Setting Your Goals

Before diving into coding, having clear goals and a plan is essential. Here are the steps to get started:

1.1 Define Your Coding Goals

Start by defining what you want to achieve with coding. Do you aim to become a web developer, data scientist, or mobile app developer? Knowing your goals will help you choose the right path and focus your efforts.

1.2 Select a Programming Language

Choose a programming language that aligns with your goals. For web development, consider HTML, CSS, and JavaScript. For data science, Python is an excellent choice. Learning a language relevant to your desired field is crucial.

Section 2: Learning Resources

Numerous online resources are available to learn coding, often for free or at a low cost. Here are some examples:

2.1 Online Courses

Platforms like Coursera, edX, and Udacity offer courses on various programming topics. For example, Coursera's "Python for Everybody" course is an excellent starting point for beginners.

# Example code snippet (Python)
print("Hello, world!")

2.2 Interactive Coding Platforms

Websites like Codecademy and FreeCodeCamp provide hands-on coding experience through interactive exercises. You can practice coding directly in your web browser.

// Example code snippet (JavaScript)
console.log("Hello, world!");

Section 3: Building Projects

Practical experience is vital for becoming a proficient coder. Start building projects that showcase your skills.

3.1 Personal Portfolio Website

Create a personal website to display your coding projects. Use HTML, CSS, and JavaScript to build a portfolio demonstrating your abilities.

<!-- Example HTML snippet -->
<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
</head>
<body>
    <h1>Welcome to my portfolio!</h1>
</body>
</html>

3.2 Open Source Contributions

Contribute to open-source projects on platforms like GitHub. Collaborating with others and working on real-world projects will enhance your coding skills and provide a valuable learning experience.

Section 4: Networking and Community

Building a network within the coding community can open up opportunities and offer support.

4.1 Attend Meetups and Conferences

Participate in local coding meetups and conferences. These events are excellent for networking, learning from experts, and staying updated on industry trends.

4.2 Join Online Coding Communities

Engage in online forums like Stack Overflow and Reddit's programming subreddits. Ask questions, share your knowledge, and connect with fellow coders.

Section 5: Staying Consistent and Adapting

5.1 Consistency is Key

Coding is a skill that improves with practice. Dedicate regular time to learning and coding to maintain your progress.

5.2 Adapt to Industry Changes

The tech industry evolves rapidly. Stay informed about the latest technologies and trends in your chosen field. Adaptability is crucial for long-term success.

Conclusion:

Becoming a coder without a degree is entirely achievable with dedication and the right resources. Define your goals, choose your learning path, build projects, network, and stay committed to lifelong learning. With these steps and a passion for coding, you can embark on a successful career, degree or not.

Creating Your AI-Powered Meme Generator: A Guide to Using OpenAI's Function Calls

Ahsan Mangal 👨🏻‍💻 — Wed, 04 Oct 2023 12:13:37 +0000

In the age of social media and digital content sharing, memes have become a ubiquitous form of communication and humour. But have you ever wondered how you can create your AI-powered meme generator?

In this article, we'll guide you through building your own AI meme generator using OpenAI's function calls. You'll learn how to harness the power of artificial intelligence to generate memes effortlessly.

What You'll Need

Before we dive into the code and the technical details, let's make sure you have everything you need to get started:

OpenAI GPT-3 API Key:
You'll need an API key to access OpenAI's powerful language model for generating text.

*Python: *
You'll be writing Python code to interact with the OpenAI API, so make sure you have Python installed on your system.

*Image Manipulation Library: *
You can use a PIL (Python Imaging Library) or Pillow to handle image manipulation tasks.

Getting Started

Step 1: Acquire Your OpenAI API Key

To use OpenAI's function calls, you must sign up for an API key. Once you have your key, keep it secure and never share it publicly.

Step 2: Install Necessary Libraries

You'll need to install the OpenAI Python library. You can do this using pip:

pip install openai

Step 3: Writing the Code

Let's write the Python code that will interact with OpenAI's GPT-3 to generate meme captions and descriptions. Here's a simplified example:

import openai

# Replace 'YOUR_API_KEY' with your actual OpenAI API key
api_key = 'YOUR_API_KEY'

# Initialize the OpenAI API client
openai.api_key = api_key

# Your prompt for generating a meme caption
prompt = "Create a funny meme caption for an image of a cat riding a skateboard."

# Generate a meme caption using OpenAI's GPT-3
response = openai.Completion.create(
    engine="text-davinci-002",
    prompt=prompt,
    max_tokens=30
)

# Extract and print the generated caption
caption = response.choices[0].text.strip()
print("Generated Meme Caption:", caption)

This code sends a prompt to the OpenAI API, and GPT-3 generates a meme caption in response. To control the output length, you can customize the prompt and adjust parameters like max_tokens.

Step 4: Adding Image Manipulation

You'll also need to combine the generated text with an image to complete your meme generator. You can use libraries like Pillow to overlay the text onto an image.

from PIL import Image, ImageDraw, ImageFont

# Load your image
image = Image.open('cat_skateboard.jpg')

# Create a drawing context
draw = ImageDraw.Draw(image)

# Define font and size
font = ImageFont.truetype("arial.ttf", 36)

# Define text position
text_position = (20, 20)

# Define the generated caption
caption = "Generated Meme Caption: " + caption

# Add the caption to the image
draw.text(text_position, caption, fill="white", font=font)

# Save or display the meme
image.show()

Step 5: Test Your Meme Generator

Run your code, and you'll have a meme generator powered by AI! You can customize the images and prompts to generate memes on various topics.

Conclusion

Building your AI meme generator using OpenAI's function calls is fun and educational. It demonstrates how AI and natural language processing can be applied to creative tasks like meme generation. With this foundation, you can explore further enhancements and share your memes with the world.

Remember to experiment with different prompts, images, and text styles to create memes that reflect your unique sense of humor. Happy meme-generating!

Following these steps, you can create your own AI meme generator using OpenAI's function calls. This article has provided the necessary guidance and code examples to start your meme-making journey. Have fun experimenting and creating hilarious memes!

Thank you for sticking with me till the end. You’re a fantastic reader

Ahsan Mangal

I hope you found it informative and engaging. If you enjoyed this content, please consider following me for more articles like this in the future. Stay curious and keep learning!

Step-by-step guide: Launching a website with October CMS on Linode using PHP and Laravel

Ahsan Mangal 👨🏻‍💻 — Wed, 23 Aug 2023 08:10:54 +0000

Introduction

October CMS offers robust tools for creating contemporary websites, built upon the widely used Laravel framework in PHP. This guide demonstrates deploying an October CMS website on a Linode server.

Prerequisites

A Linode account and server running Ubuntu 18.04 or higher.
PHP version 7.2 or higher, MySQL, and Apache/Nginx installed on your server.
Composer installed globally.
October CMS downloaded on your local machine.

Step 1: Configure the Server

SSH into your server:

 ssh user@your-server-ip

Update the system:

sudo apt-get update && sudo apt-get upgrade

Install necessary dependencies:

sudo apt-get install apache2 libapache2-mod-php mysql-server php-xml php-gd php-mysql

Step 2: Install October CMS

Navigate to the web root:

cd /var/www/html

Clone the October CMS repository:

git clone https://github.com/octobercms/october.git your-website

Navigate to the project directory:

cd your-website

Install dependencies with Composer:

composer install

Set the appropriate permissions:

sudo chown -R www-data:www-data /var/www/html/your-website

Step 3: Configure October CMS

Rename the environment file:

mv .env.example .env

Edit the .env file with your database information:

DB_CONNECTION=mysql
 DB_HOST=localhost
 DB_PORT=3306
 DB_DATABASE=your_database
 DB_USERNAME=your_username
 DB_PASSWORD=your_password

Run the October CMS installation:

php artisan october:install

Step 4: Configure Apache or Nginx

For Apache, edit the VirtualHost configuration.
For Nginx, edit the server block configuration.

Ensure the document root points to /var/www/html/your-website and restart the web server.

Step 5: Access the Website

At this point, you should be able to visit your October CMS website using either your Linode's IP address or its domain name.

Conclusion:

Opting for Linode to deploy October CMS proves to be a streamlined method for website creation and management. Utilizing the strengths of Laravel and PHP, October CMS delivers flexibility and resilience, catering to developers of varying expertise. Following this guide, you'll be on track to hosting a fully operational site on Linode.

Alternate Install:

When utilizing Linode's provided LAMP stack, the procedure becomes more seamless. Here's a revised manual that concentrates on remotely accessing the Linode server to install October CMS via Artisan

Introduction

October CMS, constructed on the foundation of the Laravel framework, presents a versatile platform for web development. This guide walks you through the process of deploying an October CMS site using Linode's LAMP stack, utilizing Laravel's Artisan command-line tool.

Prerequisites

A Linode account with a running instance of the Linode-supplied LAMP stack.
SSH access to your Linode server.

Step 1: SSH into Your Linode Server

ssh user@your-server-ip

Step 2: Download and Install October CMS

Navigate to your preferred directory:

cd /var/www/html

Clone the October CMS repository:

git clone https://github.com/octobercms/october.git your-website

Navigate to your project directory:

cd your-website

Install dependencies with Composer:

composer install

Step 3: Configure October CMS

Rename the environment file:

mv .env.example .env

Edit the .env file with your database information:

DB_CONNECTION=mysql
 DB_HOST=localhost
 DB_PORT=3306
 DB_DATABASE=your_database
 DB_USERNAME=your_username
 DB_PASSWORD=your_password

Run the October CMS installation command:

php artisan october:install

Step 4: Set Appropriate Permissions

sudo chown -R www-data:www-data /var/www/html/your-website

Step 5: Configure Apache

Create a new Apache configuration file for your site:

sudo nano /etc/apache2/sites-available/your-website.conf

Add the following VirtualHost configuration:

<VirtualHost *:80>
     ServerName your-domain.com
     DocumentRoot /var/www/html/your-website
     <Directory /var/www/html/your-website>
         AllowOverride All
     </Directory>
 </VirtualHost>

Enable the site and restart Apache:

sudo a2ensite your-website
 sudo systemctl restart apache2

Step 6: Access the Website

Your October CMS site should be reachable now via your domain or Linode's IP address.

Conclusion

With Linode's LAMP stack, the deployment of October CMS becomes notably smoother. Harnessing Laravel's Artisan further simplifies the installation, ensuring a complete and operational October CMS site on your Linode server. This approach saves time and resources, empowering you to concentrate on the core task – developing your website.

Unraveling JavaScript: Spread, Rest, Set, and Map Operators

Ahsan Mangal 👨🏻‍💻 — Mon, 19 Jun 2023 07:59:54 +0000

JavaScript, a dynamic, interpreted programming language, is renowned for its versatility and flexibility. Among its many features, four operators stand out for their unique capabilities: Spread, Rest, Set, and Map. This article delves into the intricacies of these operators, providing a comprehensive understanding of their functionalities.

JavaScript Arrays: The Foundation

Before we delve into the operators, it's crucial to understand the concept of arrays in JavaScript. An array is a data structure that stores multiple values in a single variable. It's like a bag with different elements, each accessible through its index.

The Spread Operator: Spreading Elements

The Spread operator, denoted by three dots (...), is used to spread out elements of an iterable, such as an array or object. It allows us to quickly copy all or part of an existing array or object into another array or object.

Consider the following example where we want to combine two different arrays without using the .concat() method:

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let combinedArray = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]

In this example, the Spread operator is used to spread out the elements of array1 and array2 into combinedArray.

The Rest Operator: Packing Elements

The Rest operator, also denoted by three dots (...), serves the opposite purpose of the Spread operator. It is used to pack individual elements into an array. This operator is particularly useful when we need to pass an indefinite number of arguments to a function.

Consider the following example where we want to add an unknown number of numbers:

function addNumbers(...args) {
  return args.reduce((a, b) => a + b, 0);
}

console.log(addNumbers(1, 2, 3, 4, 5)); // 15

In this example, the Rest operator is used to pack all arguments passed to the addNumbers function into an array args.

The Set Operator: Unique Collections

A JavaScript Set is a collection of unique values. Each value can only occur once in a Set. A Set can hold any value of any data type, and it is always unique.

Consider the following example where we want to remove duplicate elements from an array:

let array = [1, 2, 2, 3, 3, 3];
let uniqueArray = [...new Set(array)]; // [1, 2, 3]

In this example, the Set operator is used to create a new Set from array, effectively removing duplicate elements. The Spread operator is then used to convert the Set back into an array.

The Map Operator: Key-Value Pairs

The Map object in JavaScript holds key-value pairs and remembers the original insertion order of the keys. A Map can be created using the new keyword.

Consider the following example where we want to map letters to words:

let map = new Map();
map.set('a', 'apple');
map.set('b', 'ball');
map.set('c', 'cat');

console.log(map.get('a')); // 'apple'

In this example, the Map operator is used to create a new Map. The .set() method is used to add key-value pairs to the Map, and the .get() method is used to retrieve the value associated with a specific key.

Visualizing JavaScript Operators with a Diagram

To better understand the functionalities of these operators, let's visualize them with a diagram.

The diagram illustrates how the Spread operator spreads out elements, the Rest operator packs elements into an array, the Set operator creates a collection of unique values, and the Map operator holds key-value pairs.

Conclusion

JavaScript's Spread, Rest, Set, and Map operators offer powerful capabilities for handling arrays, objects, and collections. Understanding these operators can significantly enhance your JavaScript programming skills. Whether you're spreading elements, packing them, creating unique collections, or mapping key-value pairs, these operators are indispensable tools in your JavaScript toolbox.

Thank you for sticking with me till the end. You’re a fantastic reader!

Ahsan Mangal

I hope you found it informative and engaging. If you enjoyed this content, please consider following me for more articles like this in the future. Stay curious and keep learning!

Unveiling 10 TypeScript Techniques Employed by Professionals

Ahsan Mangal 👨🏻‍💻 — Sat, 20 May 2023 21:58:58 +0000

TypeScript, a statically typed superset of JavaScript, has become a go-to language for many developers. Its ability to catch errors during development rather than at runtime is a game-changer. Professionals use ten secret TypeScript techniques to enhance their coding efficiency.

Type Assertion: Type assertion is a way To assure the compiler that one is knowledgeable and capable; one may say, "Have faith in me; I know what I am doing." It's a way of specifying the specific type of value.

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// or
let strLength: number = (someValue as string).length;

Nullish Coalescing: The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined and otherwise returns its left-hand side operand.

let input = undefined;
let storedValue = input ?? 'Default Value';

Optional Chaining: Optional chaining allows you to write code where TypeScript can immediately stop running some expressions if it runs into a null or undefined.

let x = foo?.bar.baz();

Mapped Types: With mapped types, it is possible to generate fresh types using existing ones. Ones by transforming properties.

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

Conditional Types: Conditional types can create a type resulting from a condition. It selects one of two possible types based on a condition expressed as a type relationship test.

type TypeName<T> =
    T extends string ? "string" :
    T extends number ? "number" :
    T extends boolean ? "boolean" :
    T extends undefined ? "undefined" :
    T extends Function ? "function" :
    "object";

Utility Types:
Globally available in TypeScript are
utility types that make common type transformations easier to
handle.
Type Guards:
Type guards are a way to narrow down the
type of object within a conditional block.

if (typeof someVariable === "string") {
    // In this block, someVariable is of type string
    console.log(someVariable.length); // OK
}

Enums: Enums or enumerations are a new data type supported in TypeScript. They are used to store a collection of related values.

enum Direction {
    Up = 1,
    Down,
    Left,
    Right,
}

Generics: Generics provide a way to make components work with any data type and are not restricted to one data type.

function identity<T>(arg: T): T {
    return arg;
}

Decorators: Decorators are a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

function sealed(target) {
    // do something with 'target' ...
}

These are just a few of the many powerful features and tricks that TypeScript offers. As you continue to explore and use TypeScript, you'll undoubtedly discover even more ways to improve your code and make it more robust and maintainable. Happy coding!

Thank you for sticking with me till the end. You’re a fantastic reader!

Ahsan Mangal

I hope you found it informative and engaging. If you enjoyed this content, please consider following me for more articles like this in the future. Stay curious and keep learning!

Generative AI at Google: The Future of Artificial Intelligence

Ahsan Mangal 👨🏻‍💻 — Thu, 18 May 2023 13:43:59 +0000

Generative AI is a rapidly growing field of artificial intelligence that is revolutionizing the way we create and interact with information. Google is at the forefront of this research, and its generative AI capabilities are already being used to create new and innovative products and services.

Introduction to Generative AI
Google's Generative AI Research
Applications of Generative AI at Google
The Future of Generative AI

Introduction to Generative AI

Generative AI is a type of artificial intelligence that can create new content, such as text, images, or music. It does this by learning from existing data and then using that data to generate new examples. For example, a generative AI model could be trained on a dataset of text and then used to generate new text, such as poems, stories, or code.

Generative AI is a powerful tool that has the potential to revolutionize the way we create and interact with information. It can be used to create new products and services, improve existing products and services, and even help us to better understand the world around us.

Google's Generative AI Research

Google is at the forefront of generative AI research. The company has a number of research teams working on developing new generative AI technologies. These teams are working on a variety of projects, including:

Developing new generative AI models that can generate more
realistic and creative content
Improving the efficiency of generative AI models so that they
can be used to generate more content in less time
Making generative AI models more accessible to developers so
that they can be used to create new products and services

Applications of Generative AI at Google

Google is already using generative AI in a number of its products and services. For example, the company uses generative AI to:

Generate text for its search results
Create new images for its advertising campaigns
Generate music for its YouTube videos
Translate languages

Google is also exploring new ways to use generative AI in its products and services. For example, the company is working on using generative AI to:

Create personalized experiences for its users
Help its users to learn new things
Make its products and services more accessible to people with disabilities

The Future of Generative AI

Generative AI is a rapidly growing field, and its potential is vast. It is likely that generative AI will be used to create new products and services in a wide range of industries. For example, generative AI could be used to:

Create new medical treatments
Design new buildings
Develop new educational materials
Write new books and movies

The future of generative AI is bright, and it is likely to have a profound impact on the way we live and work.

Thank you for sticking with me till the end. You’re a fantastic reader!

Ahsan Mangal

I hope you found it informative and engaging. If you enjoyed this content, please consider following me for more articles like this in the future. Stay curious and keep learning!

Google I/O 2023: Google's Vision for the Future of Technology

Ahsan Mangal 👨🏻‍💻 — Thu, 11 May 2023 22:47:20 +0000

Google I/O 2023 was a major event for the tech giant, with a focus on the future of technology. The event featured a number of announcements, including new products and features for Google Search, Maps, and Assistant. Google also announced a number of initiatives aimed at making technology more accessible and inclusive.

One of the most significant announcements from Google I/O was the launch of LaMDA, a new language model that is capable of generating human-quality text. LaMDA is still under development, but it has the potential to revolutionize the way we interact with computers. Google also announced a number of new features for Google Search, including the ability to search for images and videos in 3D. Google Maps also received a number of updates, including the ability to see live traffic conditions and to plan trips with public transportation.

In addition to new products and features, Google also announced a number of initiatives aimed at making technology more accessible and inclusive. Google announced that it is working on a new accessibility feature for Android that will allow users to control their devices with their eyes. Google also announced that it is investing $1 billion in Black-owned businesses and communities.

Overall, Google I/O 2023 was a major event that showcased Google's commitment to innovation and its vision for the future of technology. The event featured a number of exciting announcements, and it is clear that Google is committed to making technology more accessible and inclusive.

Here are some additional details about the announcements made at Google I/O 2023:

LaMDA: LaMDA is a new language model from Google AI that is capable of generating human-quality text. LaMDA is still under development, but it has the potential to revolutionize the way we interact with computers. For example, LaMDA could be used to create chatbots that are indistinguishable from humans, or to generate realistic news articles and blog posts.
Google Search: Google Search received a number of updates at Google I/O 2023, including the ability to search for images and videos in 3D. Google Search also added a new feature called "Multisearch," which allows users to search for multiple things at once. For example, you could use Multisearch to find a recipe for a cake that uses chocolate and strawberries.
Google Maps: Google Maps also received a number of updates at Google I/O 2023, including the ability to see live traffic conditions and to plan trips with public transportation. Google Maps also added a new feature called "Live View," which allows users to see augmented reality directions on their phones.
Accessibility: Google announced a number of initiatives aimed at making technology more accessible and inclusive at Google I/O 2023. One of the most significant announcements was the launch of a new accessibility feature for Android that will allow users to control their devices with their eyes. Google also announced that it is investing $1 billion in Black-owned businesses and communities.

Original Article: https://medium.com/@mrahsanmangal/google-i-o-2023-the-future-of-technology-1df4dfcb2851

Extracting PDF Data and Generating JSON with GPTs, Langchain, and Node.js: A Comprehensive Guide

Ahsan Mangal 👨🏻‍💻 — Tue, 09 May 2023 04:29:28 +0000

In this detailed guide, we will lead you through the process of extracting PDF data and creating JSON output using GPTs, Langchain, and Node.js.

We will look at strategies for extracting text from PDF files, leveraging GPTs and Langchain to perform sophisticated natural language processing, and generating structured JSON data.

This robust set of tools will allow you to unblock the full potential of your data and provide highly valued outputs for various applications.

Prerequisites

Before we begin, please check that the necessary tools and libraries are installed:

Node.js
pdf-parse for pdf extraction
axios for HTTP requests
GPT-3 API key for access to the GPT-3 service

Once you have these tools in place, you are ready to proceed with the tutorial.

Extracting Text from PDFs using Node.js

To extract text from a PDF file, we will use the pdf-parse library. Start by installing it using the following command:

npm install pdf-parse

Next, create a function to read the PDF file and extract its text:

const fs = require('fs');
const pdfParse = require('pdf-parse');

async function extractTextFromPdf(filePath) {
  const dataBuffer = fs.readFileSync(filePath);
  const pdfData = await pdfParse(dataBuffer);
  return pdfData.text;
}

This function reads the PDF file into a data buffer and then uses pdf-parse to extract the text content.

Transforming Text with Langchain and GPTs

To process the extracted text using GPTs and Langchain, we will use the GPT-3 API. Start by installing the axios library:

npm install axios

Next, create a function to send the text data to the GPT-3 API:

const axios = require('axios');

async function processTextWithGpt(text, apiKey) {
  const gptUrl = 'https://api.openai.com/v1/engines/davinci-codex/completions';
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`,
  };

  const payload = {
    prompt: text,
    max_tokens: 100,
    n: 1,
    stop: null,
    temperature: 1,
  };

  const response = await axios.post(gptUrl, payload, { headers });
  return response.data.choices[0].text;
}

This function sends the text data to the GPT-3 API, which processes it using Langchain and returns the transformed text. Make sure to replace the apiKey parameter with your actual GPT-3 API key.

Generating JSON Data

After we've analyzed the text with GPTs and Langchain, we'll create structured JSON data. We'll write a function that accepts altered text as input and returns JSON data:

function generateJsonData(transformedText) {
  const lines = transformedText.split('\n');
  const jsonData = [];

  lines.forEach((line) => {
    const [key, value] = line.split(': ');
    if (key && value) {
      jsonData.push({ [key]: value });
    }
  });

  return jsonData;
}

This function splits the transformed text into lines, extracts key-value pairs, and generates a JSON object for each pair.

Optimizing for Performance

To optimize the performance of our text extraction and processing pipeline, consider the following recommendations:

Batch processing: Process many PDF files at the same time to benefit from parallel processing and minimize total processing time.
Caching: To minimize repetitive processing and save API charges, cache the results of GPT-3 API queries.
Fine-tuning GPTs: To increase the quality and relevance of the converted text, fine-tune the GPT models with domain-specific data.

Implementing these optimizations will help you create a more efficient and cost-effective solution.

Conclusion

We demonstrated how to extract PDF data and create JSON output using GPTs, Langchain, and Node.js in this complete guide. You may build a highly effective text-processing pipeline for various applications using these vital tools.

Remember to optimize for efficiency by adopting batch processing, caching, and fine-tuning the GPT models for the best results.

Mermaid Diagram

Here's a suggested Mermaid diagram to visualize the process we've covered in this guide:

graph LR
A[PDF Files] --> B[Extract Text using pdf-parse]
B --> C[Process Text with GPTs and Langchain]
C --> D[Generate JSON Data]
D --> E[Optimize for Performance]
E --> F[Final JSON Output]

This diagram provides a clear overview of the steps involved in extracting PDF data and generating JSON output with GPTs, Langchain, and Node.js.

Thank you for sticking with me till the end. You’re a fantastic reader!

Ahsan Mangal
I hope you found it informative and engaging. If you enjoyed this content, please consider following me for more articles like this in the future. Stay curious and keep learning!

Constructing a Personalized ChatGPT Assistant: Optimize Your Documentation with SEO Techniques

Ahsan Mangal 👨🏻‍💻 — Sat, 06 May 2023 22:39:11 +0000

Using vector embeddings for context

ChatGPT is a beautiful resource for growth and learning when it is educated about the technology you are using.

Initially, I wanted ChatGPT to help me create Hilla applications. However, since it was trained on data up to 2021, it gave manufactured replies that did not correspond to reality.

Another area I could have improved was that Hilla supports React and Lit for the front end. I needed to ensure that the replies took the relevant framework into account as context.

Here's my approach to building an assistant that uses the most recent documentation to provide relevant replies to ChatGPT.

Crucial Principle: Embeddings

ChatGPT, like other big language models, has a limited context size that must fit your question, relevant background facts, and the response. For example, get-3.5-turbo has a token maximum of 4096, roughly equivalent to 3000 words. Combining the most helpful documentation pieces within the prompt is critical to elicit meaningful replies.

Embeddings are a practical approach for identifying these critical documentation sections. Embeddings are a technique for encoding the meaning of a text into a vector representing a location in a multidimensional space. Texts with similar meanings are placed close together, while those with distinct meanings are further apart.

The idea is similar to that of a color picker. A three-element vector containing red, green, and blue values can be used to represent each color. Colors with comparable values have similar values, whereas colors with different values have distinct values.

It's enough to know that an OpenAI API converts text into embeddings for this article. If you want to understand how embeddings function, this article is a beautiful place to start.

Once you've generated embeddings for your content, you can quickly discover the most relevant bits to include in the prompt by locating the parts that are most closely related to the query.

Overview: Supplying Documentation as Context for ChatGPT

The following are the high-level procedures required to have ChatGPT use your documentation as context while answering questions:

Creating Embeddings for Your Documentation

Divide your documentation into smaller chunks, such as by heading, then generate an embedding (vector) for each one.
Save the embedding, source text, and other metadata in a vector database.

Providing Responses with Documentation as Context

Make an embedding for the user query.
Using the embedding, search the vector database for the N portions of the documentation most relevant to the inquiry.
Create a prompt telling ChatGPT only to use the available documentation to answer the given query.
To produce a completion for the prompt, use the OpenAI API.

In the parts that follow, I will go into further detail about how I carried out these processes.

Tools for used

Source code

I'll simply mention the most important parts of the code below. You can locate the source code on GitHube

Documentation Processing

The Hilla documentation is written in Asciidoc. The following are the processes required to convert them into embeddings:

Asciidoctor should be used to process the Asciidoc files to include code snippets and other inclusions.
Based on the HTML document structure, divide the generated document into sections.
To save tokens, convert the material to plain text.
If necessary, divide parts into smaller pieces.
Make embedding vectors for each chunk of text.
Pinecone should be used to save the embedding vectors and the source text.

Processing of ASCIIdoc

async function processAdoc(file, path) {
  console.log(`Processing ${path}`);

  const frontMatterRegex = /^---[\s\S]+?---\n*/;


  const namespace = path.includes('articles/react') ? 'react' : path.includes('articles/lit') ? 'lit' : '';
  if (!namespace) return;

  // Remove front matter. The JS version of asciidoctor doesn't support removing it.
  const noFrontMatter = file.replace(frontMatterRegex, '');

  // Run through asciidoctor to get includes
  const html = asciidoctor.convert(noFrontMatter, {
    attributes: {
      root: process.env.DOCS_ROOT,
      articles: process.env.DOCS_ARTICLES,
      react: namespace === 'react',
      lit: namespace === 'lit'
    },
    safe: 'unsafe',
    base_dir: process.env.DOCS_ARTICLES
  });

  // Extract sections
  const dom = new JSDOM(html);
  const sections = dom.window.document.querySelectorAll('.sect1');

  // Convert section html to plain text to save on tokens
  const plainText = Array.from(sections).map(section => convert(section.innerHTML));

  // Split section content further if needed, filter out short blocks
  const docs = await splitter.createDocuments(plainText);
  const blocks = docs.map(doc => doc.pageContent)
    .filter(block => block.length > 200);

  await createAndSaveEmbeddings(blocks, path, namespace);
}

Create embeddings and save them

async function createAndSaveEmbeddings(blocks, path, namespace) {

  // OpenAI suggests removing newlines for better performance when creating embeddings. 
  // Don't remove them from the source.
  const withoutNewlines = blocks.map(block => block.replace(/\n/g, ' '));
  const embeddings = await getEmbeddings(withoutNewlines);
  const vectors = embeddings.map((embedding, i) => ({
    id: nanoid(),
    values: embedding,
    metadata: {
      path: path,
      text: blocks[i]
    }
  }));

  await pinecone.upsert({
    upsertRequest: {
      vectors,
      namespace
    }
  });
}

Get embeddings from OpenAI

export async function getEmbeddings(texts) {
  const response = await openai.createEmbedding({
    model: 'text-embedding-ada-002',
    input: texts
  });
  return response.data.data.map((item) => item.embedding);
}

Searching with context

So far, we've divided the documentation into manageable chunks and put it in a vector database. When a user asks a question, we must do the following:

Create an embedding depending on the query asked.
Search the vector database for the ten most relevant documentation sections.
Create a question with as many documentation sections packed into 1536 tokens, leaving 2560 for the response.

async function getMessagesWithContext(messages: ChatCompletionRequestMessage[], frontend: string) {

  // Ensure that there are only messages from the user and assistant, trim input
  const historyMessages = sanitizeMessages(messages);

  // Send all messages to OpenAI for moderation.
  // Throws exception if flagged -> should be handled properly in a real app.
  await moderate(historyMessages);

  // Extract the last user message to get the question
  const [userMessage] = historyMessages.filter(({role}) => role === ChatCompletionRequestMessageRoleEnum.User).slice(-1)

  // Create an embedding for the user's question
  const embedding = await createEmbedding(userMessage.content);

  // Find the most similar documents to the user's question
  const docSections = await findSimilarDocuments(embedding, 10, frontend);

  // Get at most 1536 tokens of documentation as context
  const contextString = await getContextString(docSections, 1536);

  // The messages that set up the context for the question
  const initMessages: ChatCompletionRequestMessage[] = [
    {
      role: ChatCompletionRequestMessageRoleEnum.System,
      content: codeBlock`
          ${oneLine`
            You are Hilla AI. You love to help developers! 
            Answer the user's question given the following
            information from the Hilla documentation.
          `}
        `
    },
    {
      role: ChatCompletionRequestMessageRoleEnum.User,
      content: codeBlock`
          Here is the Hilla documentation:
          """
          ${contextString}
          """
        `
    },
    {
      role: ChatCompletionRequestMessageRoleEnum.User,
      content: codeBlock`
          ${oneLine`
            Answer all future questions using only the above        
            documentation and your knowledge of the 
            ${frontend === 'react' ? 'React' : 'Lit'} library
          `}
          ${oneLine`
            You must also follow the below rules when answering:
          `}
          ${oneLine`
            - Do not make up answers that are not provided 
              in the documentation 
          `}
          ${oneLine`
            - If you are unsure and the answer is not explicitly 
              written in the documentation context, say 
              "Sorry, I don't know how to help with that"
          `}
          ${oneLine`
            - Prefer splitting your response into 
              multiple paragraphs
          `}
          ${oneLine`
            - Output as markdown
          `}
          ${oneLine`
            - Always include code snippets if available
          `}
        `
    }
  ];

  // Cap the messages to fit the max token count, removing earlier messages if necessary
  return capMessages(
    initMessages,
    historyMessages
  );
}

When a user asks a question, we utilize getMessagesWithContext() to retrieve the messages that must be sent to ChatGPT. The OpenAI API is then used to obtain the complete and feed the response to the client.

export default async function handler(req: NextRequest) {
  // All the non-system messages up until now along with 
  // the framework we should use for the context.
  const {messages, frontend} = (await req.json()) as {
    messages: ChatCompletionRequestMessage[],
    frontend: string
  };
  const completionMessages = await getMessagesWithContext(messages, frontend);
  const stream = await streamChatCompletion(completionMessages, MAX_RESPONSE_TOKENS);
  return new Response(stream);
}

Source code

Thank you for sticking with me till the end. You’re a fantastic reader!

Ahsan Mangal
I hope you found it informative and engaging. If you enjoyed this content, please consider following me for more articles like this in the future. Stay curious and keep learning!

Implementing CI/CD with GitHub Actions: An In-Depth Guide for Beginners

Ahsan Mangal 👨🏻‍💻 — Fri, 05 May 2023 12:48:28 +0000

Continuous Integration (CI) & Continuous Deployment (CD) are critical methods in today's software development. They assist teams in maintaining high-quality code and delivering new features quickly. This detailed article will help you through deploying CI/CD using GitHub Actions, from setting up a simple workflow to adding more complex approaches.

Introduction to CI/CD

Continuous Integration and Continuous Deployment are abbreviated as CI/CD. These procedures guarantee that code changes are often incorporated into a common repository, automatically tested, and deployed to production systems with little human interaction.

Benefits of CI/CD

Faster release cycles: Teams can deliver new features & bug fixes more rapidly by automating the integration, testing, and deployment processes.
Improved code quality: Automated testing detects defects before they reach production, lowering the likelihood of downtime or customer-facing issues.
Enhanced collaboration: Teams may collaborate more successfully by regularly merging code changes, reducing disputes, and fostering shared ownership for the codebase.

Getting Started with GitHub Actions

GitHub Actions is an advanced automation tool that allows you to design bespoke workflows for your software development operations. You may easily construct CI/CD pipelines suited to your project's needs with a wide range of built-in actions and a rich ecosystem of community-contributed activities.

Key Concepts

Workflows: A set of activities taken in reaction to a certain event, such as publishing code to a repository or submitting a pull request.
Actions: Tasks carried out within a workflow, such as code checkouts, test runs, and hosting provider deployments, are called individual tasks.
Events: Workflow triggers, such as a push, pull request, or scheduled event.
Runners: Workflow execution virtual machines, accessible as GitHub-hosted or self-hosted solutions.

Setting Up a Basic CI Workflow

To get started with GitHub Actions, you'll need to create a new workflow file in your repository. This file should be located in the .github/workflows directory and have a .yml or .yaml extension.

Advanced CI Techniques

As your project expands, more complex CI approaches may be required to guarantee that your workflow stays efficient and productive.

Caching Dependencies

Caching dependencies can significantly speed up your workflow by reusing previously installed packages.

Implementing Continuous Deployment

After your CI process validates your code changes, you can use GitHub Actions to deploy your application automatically. Here's an example of a Node.js application deployment method to an AWS S3 bucket:

# ...
jobs:
  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
    - name: Check out code
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: 14

    - name: Install dependencies
      run: npm ci

    - name: Build application
      run: npm run build

    - name: Deploy to AWS S3
      uses: jakejarvis/s3-sync-action@v0.5.1
      with:
        args: --acl public-read --follow-symlinks --delete
        bucket: ${{ secrets.AWS_S3_BUCKET }}
        access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

Securing Your CI/CD Pipeline

Securing your CI/CD pipeline is critical for protecting sensitive data & ensuring the integrity of your codebase. To protect your pipeline, use the best practices listed below:

Use GitHub's Secrets: Store sensitive information in GitHub Secrets, such as API keys and credentials. These encrypted values are only visible to activities executing in the same repository and not in logs.
Limit Access: Grant collaborators only the rights they need to access your repository and CI/CD settings.
Review Third-Party Actions: To reduce the risk of unexpected changes, always utilize trustworthy third-party actions in your workflows and bind them to a specified version or commit hash.

Monitoring and Optimizing Your Workflow

Monitor your CI/CD pipeline for bottlenecks and to improve performance. To obtain insights on your workflow, use GitHub's built-in features and third-party integrations:

View Workflow Runs: To see the history of your process runs, as well as comprehensive logs and performance metrics, navigate to the "Actions" tab in your repository.
Analyze Performance: GitHub Actions Analyzer can help you identify areas for improvement in your workflow, such as slow steps or inefficient use of resources.

Conclusion

Using GitHub Actions to implement CI/CD can help optimize your software development process, enhance code quality, and speed feature delivery.

You can create a powerful and flexible CI/CD pipeline tailored to the needs of your project by following the steps outlined in this guide.

Monitor and adjust your pipeline regularly to ensure it remains efficient and effective as your project progresses.

Thank you for sticking with me till the end. You’re a fantastic reader!

Ahsan Mangal
I hope you found it informative and engaging. If you enjoyed this content, please consider following me for more articles like this in the future. Stay curious and keep learning!