<![CDATA[Tushar's blog]]>https://lonecoder.hashnode.devhttps://cdn.hashnode.com/res/hashnode/image/upload/v1680726443565/oRMxURU-4.pngTushar's bloghttps://lonecoder.hashnode.devRSS for NodeTue, 15 Sep 2026 05:56:33 GMT60<![CDATA[My First Project in Next js: Lumina AI]]>https://lonecoder.hashnode.dev/my-first-project-in-next-js-lumina-aihttps://lonecoder.hashnode.dev/my-first-project-in-next-js-lumina-aiSun, 24 Sep 2023 02:01:11 GMTHey everyone,

I've just completed my first Next js web app AI project: Lumina.AI. It is a SaaS-based AI platform built with Next.js, Shadcn, Tailwind CSS, Clerk, and the OpenAI API. I built it by following a YT tutorial( Code With Antonio ). While building this project I faced many challenges like the OpenAI release new version "4.6.0". The v4 is a complete rewrite of the SDK, in which many method names were changed, and some were deleted. But in the end, I was able to overcome these problems.

Source Code: GitHub repo.

Features:

  • Clerk Authentication

  • Chatbot: An AI chatbot that can answer user queries.

  • Image Generation: Generate stunning images using AI.

  • Code Generation: Automatically generate code snippets based on user requirements.

  • Video: Generate a video clip based on user input.

  • Music Generation: Generate music beat based on user input.

I built it using Next.js.

I'd genuinely appreciate feedback on:

  • The user experience

  • Site responsiveness

  • Bugs or areas of improvement

]]><![CDATA[Day 4 - Learn HTML with Me]]> Tag Images are an essential element of any web page, adding visual interest and enhancing the user experience. ...]]>https://lonecoder.hashnode.dev/day-4-learn-html-with-mehttps://lonecoder.hashnode.dev/day-4-learn-html-with-meSat, 08 Apr 2023 22:31:57 GMTWelcome to Day 4 of Learn HTML with Me! Today, we'll be focusing on adding images to your webpage using HTML.

Adding Images with the <img> Tag

Images are an essential element of any web page, adding visual interest and enhancing the user experience. In this beginner's guide, we'll learn how to add images with HTML using the <img> tag and its attributes. We'll also cover how to resize and align images, as well as the importance of adding alternative text for accessibility.

To add an image to an HTML document, we use the <img> tag. Here's an example of how it's used:

<img src="image.jpg" alt="A beautiful landscape">

In this example, the "src" attribute specifies the path to the image file, and the "alt" attribute provides a text description of the image for users who are visually impaired or have slow internet speeds.

Resizing and Aligning Images

To resize an image, we can use the "width" and "height" attributes. For example:

<img src="image.jpg" width="500" height="300">

We can also align images to the left or right and center of the page using the "align" attribute. Here's an example:

<img src="image.jpg" align="left">
<img src="image.jpg" align="center">
<img src="image.jpg" align="right">

It's important to note that resizing and aligning images can affect the layout of your page, so use them sparingly and with consideration.

Adding Alternative Text for Accessibility

Finally, let's talk about accessibility. Alternative text (or "alt text") is crucial for users who rely on screen readers to navigate the web. To add alt text to an image, simply include it as the value of the "alt" attribute, like this:

<img src="image.jpg" alt="A beautiful landscape">

To practice these techniques and improve your understanding of adding images to your webpage using HTML, try experimenting with different images and attributes in your code editor.

I hope this post was helpful in learning how to add images to your webpage with HTML. Don't forget to include alt text and resize and align your images to make your webpage more visually appealing. Stay tuned for Day 5 of "Learn HTML with Me!".

]]><![CDATA[Day 3 - Learn HTML with Me]]>, , ...]]>https://lonecoder.hashnode.dev/day-3-learn-html-with-mehttps://lonecoder.hashnode.dev/day-3-learn-html-with-meFri, 07 Apr 2023 19:53:41 GMTFormatting text is an essential aspect of web design, allowing designers to emphasize important information, organize content, and create a visually appealing user experience. HTML provides several tags for formatting text, including <em>, <strong>, <ul>, <ol>, and <a>. In today's post, we'll explore these tags in more detail and provide examples of how to use them effectively.

Adding Emphasis with <em> and <strong>

The <em> tag is used to emphasize text, which usually appears italicized. This tag is often used to highlight important phrases or words in a sentence, making it easier for users to quickly identify key points.

Here's an example of using the <em> tag:

<p>Please <em>remember</em> to bring your passport and visa when traveling internationally.</p>

In contrast, the <strong> tag is used to highlight important text, which typically appears bold. This tag is often used to emphasize critical information or warnings. Here's an example of using the <strong> tag:

<p><strong>WARNING:</strong> Do not attempt to repair your computer's hardware unless you are a trained professional.</p>

HTML provides several tags like <em> and <strong> that can be used to format text in various ways. Some commonly used text formatting tags are:

  • <b> - Bold text: This tag is used to make text bold.

  • <i> - Italic text: This tag is used to make text italic.

  • <mark> - Marked text: This tag is used to highlight or mark a section of text.

  • <small> - Smaller text: This tag is used to make text smaller.

  • <del> - Deleted text: This tag is used to indicate that the enclosed text has been deleted.

  • <ins> - Inserted text: This tag is used to indicate that the enclosed text has been inserted.

  • <sub> - Subscript text: This tag is used to make text appear as a subscript.

  • <sup> - Superscript text: This tag is used to make text appear as a superscript.

Creating Lists with <ul> and <ol>

Lists are an essential aspect of web design, allowing designers to organize content and present information in a visually appealing way. HTML provides two types of lists:

  1. unordered lists <ul>

  2. ordered lists <ol>

Unordered lists are typically used to create bullet-pointed lists, while ordered lists are used to create numbered lists.

Here's an example of using the <ul> and <li> tags to create an unordered list:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

And here's an example of using the <ol> and <li> tags to create an ordered list:

<ol>
  <li>Preheat the oven to 350°F.</li>
  <li>Mix the flour, sugar, and baking powder in a large bowl.</li>
  <li>Add the eggs, milk, and vanilla extract, and mix until combined.</li>
  <li>Pour the batter into a greased baking dish and bake for 30 minutes.</li>
</ol>

The <li> tag used to create a list item in an ordered <ol> or unordered <ul> list.

Links are an essential aspect of web design, allowing users to navigate between pages and websites. The <a> tag is used to create links and is one of the most commonly used tags in HTML. When you click on a link, it takes you to another page or location, allowing you to access more information. href attribute used in the <a> tag to specify the URL or destination of a hyperlink.

Here's an example of using the <a> tag to create a link to another webpage:

<p>Visit the <a href="https://www.example.com">Example</a> website for more information.</p>

In conclusion, formatting text is an essential aspect of web design, and HTML provides several tags to achieve this. By using <em>, <strong>, <ul>, <ol>, and <a>, you can create visually appealing web pages that are easy to read and navigate. So go ahead and practice these HTML tags and attributes in Visual Studio Code to become more comfortable. Stay tuned for Day 4 of "Learn HTML with Me!" where we'll explore more HTML tags and techniques for web design. Happy coding!

]]><![CDATA[Day 2 - Learn HTML with Me]]>https://lonecoder.hashnode.dev/day-2-learn-html-with-mehttps://lonecoder.hashnode.dev/day-2-learn-html-with-meThu, 06 Apr 2023 23:43:45 GMTWelcome to Day 2 of Learn HTML with Me! Today, we'll be covering basic HTML tags and how to create a basic HTML document and the HTML page structure.

Basic HTML Tags

HTML tags are used to define the structure and content of a web page. An HTML tag is enclosed in angle brackets, like this: <tagname>. The structure of an HTML tag includes an opening tag, content, and a closing tag. For example, the <h1> tag is used to define a heading, and the opening and closing tags would look like this:

<h1>Heading</h1>

Some of the basic HTML tags that you'll need to know include:

  • The <!DOCTYPE html> declaration defines that this document is an HTML5 document and helps web browsers to render the page correctly.

  • <html>: The <html> tag is used to define the beginning and end of an HTML document.

  • <head>: The <head> tag is used to define the head section of an HTML document, which includes meta data, title, and links to external resources.

  • <title>: The <title> tag in HTML is used to define the title of the web page that appears in the browser tab.

  • <body>: The <body> tag is used to define the body section of an HTML document, which includes the visible content of the web page.

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: The heading tags are used to define headings of different levels, with <h1> being the most important and <h6> being the least important.

  • <p>: The <p> tag is used to define a paragraph.

Creating a Basic HTML Document

To create a basic HTML document, follow these steps:

  1. Open Visual Code and create a new file.

  2. Type the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
    <p>This is a paragraph of text.</p>
  </body>
</html>

  1. Save the file with a .html extension.

  2. Open the file in a web browser to see the web page by clicking on "Go Live" to run the server.

  3. By following these steps, you can easily create a basic HTML document using basic HTML tags.

HTML Page Structure

In our next lesson, we'll be covering more advanced HTML tags, including links, images, and lists. Stay tuned!

]]><![CDATA[Day 1 - Learn HTML with Me]]>https://lonecoder.hashnode.dev/day-1-learn-html-with-mehttps://lonecoder.hashnode.dev/day-1-learn-html-with-meWed, 05 Apr 2023 20:55:47 GMTWelcome to Day 1 of Learn HTML with Me! Today, we'll be introducing HTML and covering how to set up Visual Code for HTML and CSS development.

Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard language used for creating web pages and web applications. HTML is a markup language, which means it uses tags to define the structure and content of a web page.

HTML allows you to create text, images, videos, links, forms, and other elements that make up a web page. You can use HTML to create static websites, dynamic web applications, and even mobile apps.

HTML works together with other web technologies, such as CSS and JavaScript, to create visually appealing and interactive web pages. CSS is used to style HTML elements and make them look more attractive, while JavaScript is used to add interactivity and functionality to web pages.

Setting Up Visual Code for HTML and CSS Development

Visual Code is a popular code editor that's free, open-source, and available for Windows, Mac, and Linux. It's an excellent choice for developing HTML and CSS, as it offers many useful features, including syntax highlighting, code completion, and debugging tools.

To set up Visual Code for HTML and CSS development, follow these simple steps:

  1. Download and install Visual Code from the official website. Head to code.visualstudio.com

  2. Install the "HTML CSS Support" extension, which provides advanced HTML and CSS language features, including code completion, syntax highlighting, and validation.

  3. Install the "Live Server" extension, which allows you to preview your HTML and CSS files in a web browser.

  4. Screenshot-2021-01-20-at-17.56.38

    Create a new file in Visual Code and save it with the ".html" extension.

  5. Start writing HTML code using Visual Code's syntax highlighting and code completion features.

By following these steps, you can easily set up Visual Code for HTML and CSS development and start creating web pages and web applications.

In our next lesson, we'll be covering the basics of HTML, including tags, elements, and attributes.

]]><![CDATA[MySQL Cheat Sheet]]> -p;To show all available databases: SHOW DATABASES;To use a specific database: USE ;To exit MySQL: exit; Example: mysql -u root -p SHOW DATABASES; USE mydatabase; exit; ...]]>https://lonecoder.hashnode.dev/mysql-cheat-sheethttps://lonecoder.hashnode.dev/mysql-cheat-sheetSun, 02 Apr 2023 15:23:08 GMTBasic Commands:

To connect to a MySQL server: mysql -u <username> -p;
To show all available databases: SHOW DATABASES;
To use a specific database: USE <database name>;
To exit MySQL: exit;

Example:

mysql -u root -p
SHOW DATABASES;
USE mydatabase;
exit;

Database Manipulation:

To create a new database: CREATE DATABASE <database name>;
To delete a database: DROP DATABASE <database name>;
To rename a database: ALTER DATABASE <old database name> RENAME TO <new database name>;

Example:

CREATE DATABASE mydatabase;
DROP DATABASE mydatabase;
ALTER DATABASE old_db_name RENAME TO new_db_name;

Table Manipulation:

To create a new table: CREATE TABLE <table name> (column1 datatype constraints, column2 datatype constraints, ...);
To add a new column to a table: ALTER TABLE <table name> ADD COLUMN <column name> <datatype constraints>;
To delete a table: DROP TABLE <table name>;
To rename a table: RENAME TABLE <old table name> TO <new table name>;

Example:

CREATE TABLE users (
  id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  firstname VARCHAR(30) NOT NULL,
  lastname VARCHAR(30) NOT NULL,
  email VARCHAR(50),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

ALTER TABLE users ADD COLUMN phone_number VARCHAR(20);
DROP TABLE users;
RENAME TABLE old_table_name TO new_table_name;

Data Manipulation:

To insert data into a table: INSERT INTO <table name> (column1, column2, ...) VALUES (value1, value2, ...);
To update existing data in a table: UPDATE <table name> SET column1 = value1, column2 = value2, ... WHERE condition;
To delete data from a table: DELETE FROM <table name> WHERE condition;
To select data from a table: SELECT column1, column2, ... FROM <table name> WHERE condition;

Example:

INSERT INTO users (firstname, lastname, email) VALUES ('John', 'Doe', 'johndoe@example.com');
UPDATE users SET email = 'newemail@example.com' WHERE id = 1;
DELETE FROM users WHERE id = 1;
SELECT * FROM users WHERE firstname = 'John';

Conditional Operators:

<> or !=: not equal to</br>
<: less than</br>
>: greater than</br>
<=: less than or equal to</br>
>=: greater than or equal to</br>
BETWEEN: between a range of values</br>
IN: within a set of values</br>
LIKE: matching a pattern</br>
IS NULL: null value

Example:

SELECT * FROM users WHERE email = 'johndoe@example.com';
SELECT * FROM users WHERE id BETWEEN 1 AND 10;
SELECT * FROM users WHERE firstname IN ('John', 'Jane', 'Joe');
SELECT * FROM users WHERE email LIKE '%example.com';
SELECT * FROM users WHERE phone_number IS NULL;

Sorting and Filtering:

To sort data in ascending order: ORDER BY column1 ASC;
To sort data in descending order: ORDER BY column1 DESC;
To limit the number of rows returned: LIMIT <number>;
To skip a certain number of rows: OFFSET <number>;
To filter data by multiple conditions: WHERE condition1 AND condition2;

Example:

SELECT * FROM users ORDER BY created_at DESC;
SELECT * FROM users WHERE firstname = 'John' AND lastname = 'Doe' LIMIT 10 OFFSET 20;

Aggregate Functions:

COUNT(): count the number of rows
SUM(): calculate the sum of a column
AVG(): calculate the average of a column
MAX(): get the maximum value of a column
MIN(): get the minimum value of a column

Example:

SELECT COUNT(*) FROM users;
SELECT SUM(price) FROM orders;
SELECT AVG(age) FROM users;
SELECT MAX(price) FROM products;
SELECT MIN(price) FROM products;

Joins:

INNER JOIN: returns only the rows where there is a match in both tables
LEFT JOIN: returns all the rows from the left table and the matched rows from the right table
RIGHT JOIN: returns all the rows from the right table and the matched rows from the left table
FULL OUTER JOIN: returns all the rows from both tables

Example:

SELECT users.firstname, orders.price FROM users INNER JOIN orders ON users.id = orders.user_id;
SELECT users.firstname, orders.price FROM users LEFT JOIN orders ON users.id = orders.user_id;
SELECT users.firstname, orders.price FROM users RIGHT JOIN orders ON users.id = orders.user_id;
SELECT users.firstname, orders.price FROM users FULL OUTER JOIN orders ON users.id = orders.user_id;

Aliases:

To give a table an alias: <table name> AS <alias>;
To give a column an alias: <column name> AS <alias>;

Example:

SELECT u.firstname, o.price FROM users AS u INNER JOIN orders AS o ON u.id = o.user_id;
SELECT firstname AS name, age AS years FROM users;

Subqueries:

To use a subquery in a SELECT statement: (SELECT column FROM table WHERE condition);
To use a subquery in a WHERE clause: WHERE column IN (SELECT column FROM table WHERE condition);

Example:

SELECT firstname, lastname, (SELECT COUNT(*) FROM orders WHERE user_id = users.id) AS order_count FROM users;
SELECT * FROM users WHERE age IN (SELECT age FROM users WHERE firstname = 'John');

Views:

To create a view: CREATE VIEW <view name> AS SELECT <columns> FROM <table> WHERE <condition>;
To delete a view: DROP VIEW <view name>;
To update a view: CREATE OR REPLACE VIEW <view name> AS SELECT <columns> FROM <table> WHERE <condition>;
To show all views: SHOW FULL TABLES IN <database name> WHERE table_type = 'VIEW';

Example:

CREATE VIEW customer_orders AS SELECT users.firstname, users.lastname, orders.price FROM users INNER JOIN orders ON users.id = orders.user_id;
DROP VIEW customer_orders;
CREATE OR REPLACE VIEW customer_orders AS SELECT users.firstname, users.lastname, orders.price FROM users INNER JOIN orders ON users.id = orders.user_id WHERE orders.price > 100;
SHOW FULL TABLES IN mydatabase WHERE table_type = 'VIEW';

These are some of the most commonly used MySQL commands and functions.

Gists link: https://gist.github.com/Tusharknwl/f1e9d4bb04b33408eb2e06b3d93d3acb

]]><![CDATA[10 Tips for Optimal MySQL Database Performance]]>https://lonecoder.hashnode.dev/10-tips-for-optimal-mysql-database-performancehttps://lonecoder.hashnode.dev/10-tips-for-optimal-mysql-database-performanceSun, 06 Nov 2022 19:29:44 GMTWith the explosion of user-generated content, more and more data is being consumed as social media sites, blogs, and video platforms continue to grow. But it's not just about how much data you have — it's about how you’re using that data. To provide a great user experience for all your end users, your site needs to be fast. This blog post will give you tips on how to get the best performance from your MySQL database so your site runs at peak efficiency.

Avoid unnecessary indexes

Indexing is a very useful technique for speeding up SQL queries. Having an index on a specific column can greatly speed up the retrieval of data from that column. For example, if you have an index on the user_id column, then when you do a search on that column, MySQL will use the index to look up the data in less time than it would if it had to search the whole table. The problem is that indexes are expensive. They don’t just add weight to your tables, but they take up space as well. So not only are they slowing down your system, but they are taking up disk space as well. If you find that you’re indexing more than you would like to, there are several things you can do to avoid increasing your indexing overhead. The easiest way is to look at your query log. You can see which queries are fast or slow. By taking a closer look at which queries are slow, you’re more likely to find the ones indexing excessively.

Keep your data types consistent

Consistent data types are important for two reasons. First, when searching for data, MySQL can retrieve more data in fewer reads (lookups) if you have consistent data types. The other reason is that when you choose to index your data, MySQL can retrieve exactly the data you ask for as opposed to finding whatever data it can and then adding the index weight on top of it. If you choose to store different data types, then you are forcing MySQL to do more work to retrieve the data. How can you keep your data types consistent? The simplest way is to ensure your table’s columns are as similar as possible. This can be done with the following two commands:

Always use cache

When you cache your data, you are storing the data in a separate place so that when the end user goes to retrieve the data, it isn’t actually retrieving the data from the disk. Instead, it just looks up the data from the cache. This speeds up the retrieval process since MySQL doesn’t have to look up the data from the disk. The cache is written to disk, but the data isn’t read from the disk. This means if the end-user then requests the data again, MySQL doesn’t have to read it from the disk again. This can only happen if the cached data isn’t changed by any other process or if it isn’t read by any other process. The cache can be located in many places, including RAM, disk, or a database. The cache itself can be written to disk, or it can be placed in RAM.

For SQL queries, prefer using indexes over joins

An index is the fastest way to retrieve data from a specific column in your database. It is better than joining the tables together, which is why you should keep your data types consistent. But joining tables together can be useful when you want to join two tables together to get data from multiple places. For example, you want to join your users table to your posts table to get the data from both tables. Joining tables together does take longer than retrieving data through an index, but it is still much faster than retrieving everything from the database.

Avoid cursors if you don’t need them

A cursor is a tool that allows you to retrieve data until you’re done with it. This is great if you need to process large amounts of data in small batches. But if you already have a database designed to handle large amounts of data, you don’t need a cursor to handle the data. In this case, the use of a cursor is slowing down your system. Cursors can be useful in specific cases. If a page on your site needs to retrieve data from the database in chunks, a cursor is a great way to speed up the process. But if the data is small enough that it doesn’t need to be processed in chunks, then using a cursor is slowing things down.

Lastly, use Memcached or NGINX to eliminate spikes

For small tables, MySQL’s normal table scan can be very fast. But for larger tables, this method can take a long time to complete. One way to reduce the impact of large tables is to use a caching solution. These solutions are designed to store the data that is being read from the database and then allow the data to be served from the cache. If you have a small number of data changes and you don’t need to lookup the data from the disk, you can use a caching solution such as Memcached. You can also use Memcached if you need to store the data that is being read from the database.

Conclusion

In this article, you learned why you should keep your data types consistent, always use the cache, and prefer using indexes over joins. You also learned how to avoid unnecessary indexes, keep your data consistent, and always use cache. Finally, you learned how to eliminate spikes by using a caching solution, such as Memcached or NGINX, and how to reduce the impact of large tables by using a caching solution.

]]>