DEV Community: Yathish Acharya

JavaScript Methods /Functions

Yathish Acharya — Wed, 18 Sep 2024 08:47:35 +0000

1. Array Methods:

array.length: Returns the number of elements in the array.
array.push(element): Adds one or more elements to the end of an array and returns the new length of the array.
array.pop(): Removes the last element from an array and returns that element.
array.shift(): Removes the first element from an array and returns it.
array.unshift(element): Adds one or more elements to the beginning of an array and returns the new length of the array.
array.slice(start, end): Returns a shallow copy of a portion of an array into a new array.
array.splice(start, deleteCount, item1, item2, ...): Adds/removes items to/from an array, starting at the given index.
array.indexOf(element): Returns the first index at which a given element can be found in the array, or -1 if it is not present.
array.includes(element): Determines whether an array contains a certain element, returning true or false.
array.sort(): Sorts the elements of an array in place and returns the sorted array.
array.reverse(): Reverses the order of the elements in an array.
array.forEach(callback): Executes a provided function once for each array element.
array.map(callback): Creates a new array populated with the results of calling a function for every array element.
array.filter(callback): Creates a new array with all elements that pass the test implemented by the provided function.
array.reduce(callback, initialValue): Applies a function against an accumulator and each element in the array to reduce it to a single value.
array.find(callback): Returns the first element in the array that satisfies the provided testing function.
array.findIndex(callback): Returns the index of the first element in the array that satisfies the provided testing function.
array.every(callback): Tests whether all elements in the array pass the provided function test.
array.some(callback): Tests whether at least one element in the array passes the provided function test.
array.concat(array2): Merges two or more arrays and returns a new array.
array.join(separator): Joins all elements of an array into a string.

2. String Methods:

string.length: Returns the length of a string.
string.toUpperCase(): Converts the string to uppercase.
string.toLowerCase(): Converts the string to lowercase.
string.charAt(index): Returns the character at the specified index.
string.indexOf(substring): Returns the index of the first occurrence of the specified substring, or -1 if not found.
string.lastIndexOf(substring): Returns the index of the last occurrence of the specified substring.
string.includes(substring): Determines whether a string contains another string, returning true or false.
string.slice(start, end): Extracts a section of a string and returns it as a new string.
string.split(separator): Splits a string into an array of substrings based on a specified separator.
string.trim(): Removes whitespace from both ends of a string.
string.replace(searchValue, newValue): Replaces a substring or pattern in the string with a new value.
string.startsWith(substring): Checks if the string starts with the specified substring.
string.endsWith(substring): Checks if the string ends with the specified substring.
string.repeat(count): Returns a new string with the original string repeated count times.

3. Object Methods:

Object.keys(obj): Returns an array of a given object's own property names.
Object.values(obj): Returns an array of a given object's own enumerable property values.
Object.entries(obj): Returns an array of a given object's own enumerable key-value pairs.
Object.assign(target, source): Copies all enumerable properties from one or more source objects to a target object.
Object.freeze(obj): Freezes an object, making it immutable.
Object.seal(obj): Seals an object, preventing new properties from being added but allowing modification of existing properties.
Object.hasOwnProperty(property): Returns true if the object has the specified property as its own property.

4. Number Methods:

Number.isNaN(value): Determines whether the value is NaN (Not-a-Number).
Number.isInteger(value): Determines whether the value is an integer.
Number.parseFloat(string): Converts a string to a floating-point number.
Number.parseInt(string): Converts a string to an integer.
number.toFixed(digits): Formats a number using fixed-point notation.
number.toString(base): Converts a number to a string, optionally using a specified base (radix).

5. Math Methods:

Math.round(value): Rounds a number to the nearest integer.
Math.floor(value): Rounds a number down to the nearest integer.
Math.ceil(value): Rounds a number up to the nearest integer.
Math.max(...values): Returns the largest of zero or more numbers.
Math.min(...values): Returns the smallest of zero or more numbers.
Math.random(): Returns a pseudo-random number between 0 and 1.
Math.abs(value): Returns the absolute value of a number.
Math.sqrt(value): Returns the square root of a number.
Math.pow(base, exponent): Returns the base to the exponent power (base^exponent).

6. Date Methods:

new Date(): Creates a new date object with the current date and time.
Date.now(): Returns the number of milliseconds since January 1, 1970.
date.getFullYear(): Returns the year of the specified date.
date.getMonth(): Returns the month (0-11) of the specified date.
date.getDate(): Returns the day of the month (1-31).
date.getDay(): Returns the day of the week (0-6).
date.getHours(): Returns the hour (0-23).
date.getMinutes(): Returns the minutes (0-59).
date.getSeconds(): Returns the seconds (0-59).
date.getMilliseconds(): Returns the milliseconds (0-999).

7. Control Flow Functions:

setTimeout(callback, delay): Executes the callback function after the specified delay (in milliseconds).
setInterval(callback, delay): Repeatedly executes the callback function after the specified delay (in milliseconds).
clearTimeout(id): Cancels a timeout previously established by setTimeout().
clearInterval(id): Cancels a repeated action set by setInterval().

8. Promise Methods:

Promise.all(iterable): Waits for all promises in the iterable to resolve or for any to reject.
Promise.race(iterable): Waits for the first promise to resolve or reject.
Promise.resolve(value): Returns a promise that is resolved with the given value.
Promise.reject(reason): Returns a promise that is rejected with the given reason.

9. JSON Methods:

JSON.stringify(object): Converts a JavaScript object to a JSON string.
JSON.parse(string): Parses a JSON string and returns a JavaScript object.

Next JS Blog App

Yathish Acharya — Thu, 05 Sep 2024 06:37:04 +0000

To build a blog app using Next.js with both backend and frontend, where users can add and delete blogs, and store the data in a database, follow these steps:

1. Set Up Next.js Project

First, create a new Next.js project if you haven't already:

npx create-next-app@latest blog-app
cd blog-app
npm install

2. Set Up Database

For this project, let's use MongoDB via Mongoose as the database.

Install Mongoose:

npm install mongoose

Create a MongoDB database using services like MongoDB Atlas or use a local MongoDB setup.
Connect to MongoDB by creating a lib/mongodb.js file:

// lib/mongodb.js
import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('Please define the MONGODB_URI environment variable');
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI).then((mongoose) => {
      return mongoose;
    });
  }
  cached.conn = await cached.promise;
  return cached.conn;
}

export default dbConnect;

Add the MONGODB_URI to your .env.local file:

MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/blog-app?retryWrites=true&w=majority

3. Define Blog Schema

Create a model for blogs in models/Blog.js:

// models/Blog.js
import mongoose from 'mongoose';

const BlogSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  content: {
    type: String,
    required: true,
  },
}, { timestamps: true });

export default mongoose.models.Blog || mongoose.model('Blog', BlogSchema);

4. Create API Routes for Blog

In Next.js, you can create API routes in the pages/api directory.

Create pages/api/blog/index.js for handling GET and POST requests (adding blogs):

// pages/api/blog/index.js
import dbConnect from '../../../lib/mongodb';
import Blog from '../../../models/Blog';

export default async function handler(req, res) {
  const { method } = req;

  await dbConnect();

  switch (method) {
    case 'GET':
      try {
        const blogs = await Blog.find({});
        res.status(200).json({ success: true, data: blogs });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    case 'POST':
      try {
        const blog = await Blog.create(req.body);
        res.status(201).json({ success: true, data: blog });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    default:
      res.status(400).json({ success: false });
      break;
  }
}

Create pages/api/blog/[id].js for handling DELETE requests:

// pages/api/blog/[id].js
import dbConnect from '../../../lib/mongodb';
import Blog from '../../../models/Blog';

export default async function handler(req, res) {
  const { method } = req;
  const { id } = req.query;

  await dbConnect();

  switch (method) {
    case 'DELETE':
      try {
        const blog = await Blog.findByIdAndDelete(id);
        if (!blog) {
          return res.status(400).json({ success: false });
        }
        res.status(200).json({ success: true, data: {} });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    default:
      res.status(400).json({ success: false });
      break;
  }
}

5. Create Frontend for Adding and Displaying Blogs

Create a page pages/index.js for listing all blogs and a form for adding new blogs:

// pages/index.js
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function Home() {
  const [blogs, setBlogs] = useState([]);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  useEffect(() => {
    async function fetchBlogs() {
      const response = await axios.get('/api/blog');
      setBlogs(response.data.data);
    }
    fetchBlogs();
  }, []);

  const addBlog = async () => {
    const response = await axios.post('/api/blog', { title, content });
    setBlogs([...blogs, response.data.data]);
    setTitle('');
    setContent('');
  };

  const deleteBlog = async (id) => {
    await axios.delete(`/api/blog/${id}`);
    setBlogs(blogs.filter(blog => blog._id !== id));
  };

  return (
    <div>
      <h1>Blog App</h1>
      <form onSubmit={(e) => { e.preventDefault(); addBlog(); }}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Blog Title"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Blog Content"
        />
        <button type="submit">Add Blog</button>
      </form>
      <h2>Blogs</h2>
      <ul>
        {blogs.map(blog => (
          <li key={blog._id}>
            <h3>{blog.title}</h3>
            <p>{blog.content}</p>
            <button onClick={() => deleteBlog(blog._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

6. Start the Server

Run your application:

npm run dev

7. Testing the App

You can now add and delete blogs, and all data will be stored in your MongoDB database.

Let me know if you need further details!

Sound Wave alike

Yathish Acharya — Thu, 05 Sep 2024 04:52:59 +0000

Check out this Pen I made!
This was the Daily Challenge of the CSS Battles

React Logo

Yathish Acharya — Tue, 03 Sep 2024 06:32:32 +0000

Check out this Pen I made!

Indian Flag

Yathish Acharya — Tue, 03 Sep 2024 06:00:33 +0000

Check out this Pen I made!

Key Topics While Learning Django

Yathish Acharya — Tue, 03 Sep 2024 04:48:30 +0000

1. Django Fundamentals

Project Structure: Understanding the basic structure of a Django project (e.g., settings.py, urls.py, wsgi.py).
Apps: Understanding how Django apps work within a project and how to create and manage them.
URLs and Routing: Defining URL patterns and linking them to views.
Views: Writing function-based views (FBVs) and class-based views (CBVs).
Templates: Using Django's template language to create dynamic HTML pages.

2. Models and ORM (Object-Relational Mapping)

Defining Models: Creating and managing database models in Django.
Migrations: Understanding how Django migrations work to propagate model changes to the database.
QuerySet API: Retrieving, filtering, and manipulating data using Django’s ORM.

3. Forms

Django Forms: Creating and processing forms using Django's built-in form handling.
Model Forms: Automatically creating forms based on Django models.
Form Validation: Implementing custom validation logic.

4. Authentication and Authorization

User Model: Working with Django's built-in User model.
Authentication: Implementing login, logout, and password management features.
Authorization: Managing user permissions and groups.
Custom User Models: Extending or replacing the default User model.

5. Django Admin Interface

Admin Customization: Customizing the Django admin panel to manage data.
Admin Models: Registering models and customizing how they appear in the admin interface.

6. Static Files and Media Files

Static Files: Serving CSS, JavaScript, and images in a Django application.
Media Files: Handling user-uploaded files, including image and file uploads.

7. Middleware

Understanding Middleware: Learning how middleware works and how to create custom middleware.
Common Middleware: Using Django's built-in middleware for tasks like authentication, sessions, and security.

8. Django REST Framework (DRF)

APIs with Django: Building RESTful APIs using Django REST Framework.
Serializers: Converting Django models to JSON and vice versa.
Viewsets and Routers: Simplifying views with DRF's viewsets and routers.
Authentication in DRF: Implementing token-based or session-based authentication in APIs.

9. Security

Cross-Site Scripting (XSS): Protecting your application from XSS attacks.
Cross-Site Request Forgery (CSRF): Understanding and preventing CSRF attacks.
SQL Injection: Preventing SQL injection through Django’s ORM.
Authentication Best Practices: Ensuring secure login and password storage.

10. Deployment

Deploying Django: Deploying a Django application to production environments (e.g., using platforms like Heroku, AWS, or DigitalOcean).
WSGI and ASGI: Understanding the role of WSGI/ASGI in deploying Django applications.
Static and Media Files in Production: Serving static and media files in a production environment.

11. Testing

Unit Testing: Writing unit tests for your Django views, models, and forms.
Integration Testing: Testing the interaction between different parts of your Django application.
Test Coverage: Ensuring your tests cover all important code paths.

12. Performance Optimization

Database Optimization: Using Django's ORM efficiently, optimizing queries, and using database indexing.
Caching: Implementing caching strategies to improve performance.
Scalability: Strategies to scale Django applications, including load balancing and database replication.

13. Internationalization (i18n) and Localization (l10n)

Translating Applications: Making your application available in multiple languages.
Timezone Support: Managing timezones within your Django application.

14. Django Signals

Using Signals: Understanding and implementing Django signals to decouple components of your application.

15. Asynchronous Support

Async Views: Writing asynchronous views in Django.
Channels: Using Django Channels for WebSocket support and handling background tasks.

16. File Uploads and Management

Handling File Uploads: Managing file uploads in Django and processing uploaded files.
Storage Options: Using different storage backends (e.g., AWS S3) for media files.

Mastering these topics will provide a solid foundation in Django, enabling you to build complex and scalable web applications.

Mastering JavaScript: Essential Tips for Beginners

Yathish Acharya — Mon, 02 Sep 2024 19:53:54 +0000

JavaScript is a versatile and powerful programming language that forms the backbone of modern web development. If you're new to JavaScript, here are some essential tips to help you grasp its concepts and start building interactive web applications:

1. Understand the Basics:

Variables and data types: Learn about variables, their types (numbers, strings, booleans, objects, arrays, etc.), and how to manipulate them.
Operators: Familiarize yourself with arithmetic, comparison, logical, and assignment operators.
Control flow: Understand how to use if statements, for loops, while loops, and switch statements to control the execution of your code.
Functions: Learn how to define and call functions to organize your code and reuse logic.

2. Embrace Asynchronous Programming:

Callbacks: Understand how to use callbacks to handle asynchronous operations like fetching data from APIs or performing time-consuming tasks.
Promises: Learn about Promises, a more modern approach to handling asynchronous operations.
async/await: Use async/await syntax to make asynchronous code look more synchronous, improving readability.

3. Master the DOM:

Document Object Model (DOM): Learn how to interact with HTML elements using the DOM API.
Event handling: Understand how to attach event listeners to elements and respond to user interactions.
Manipulating the DOM: Learn how to create, modify, and remove elements from the DOM.

4. Practice Regularly:

Build projects: The best way to learn JavaScript is by building real-world projects. Start with small projects and gradually increase complexity.
Online tutorials and courses: Utilize online resources to learn from experienced developers and follow structured learning paths.
Coding challenges: Practice coding challenges on platforms like Codewars or HackerRank to improve your problem-solving skills.

5. Leverage Developer Tools:

Browser developer tools: Use the built-in developer tools in your browser to inspect the DOM, debug JavaScript code, and analyze network requests.
Debugging tools: Explore debugging tools like Node Inspector or Chrome DevTools to identify and fix errors in your code.

6. Learn from the Community:

Online forums and communities: Join online forums and communities like Stack Overflow, Reddit, and Discord to ask questions, share knowledge, and learn from others.
Open-source projects: Contribute to open-source projects to learn from experienced developers and gain practical experience.

By following these tips and consistently practicing, you can develop a strong foundation in JavaScript and become a proficient web developer.

Airbnb Clone

Yathish Acharya — Mon, 02 Sep 2024 07:59:31 +0000

This was the CSS practice clone of the Airbnb website made for the assignment PS: This is not responsive this i was my learning phase project

Google Box Property

Yathish Acharya — Mon, 02 Sep 2024 07:56:44 +0000

Check out this Pen I made!

Hola

Yathish Acharya — Mon, 02 Sep 2024 07:45:50 +0000

Im a newbie here dont know what things here are need to hang around a little and get know if this reaches you or any please comment or ping