<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anas Dew</title>
    <description>The latest articles on DEV Community by Anas Dew (@anasdew).</description>
    <link>https://dev.to/anasdew</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F910132%2F0d425227-3b6d-4384-8bb1-c05f46653f03.png</url>
      <title>DEV Community: Anas Dew</title>
      <link>https://dev.to/anasdew</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/anasdew"/>
    <language>en</language>
    <item>
      <title>MySQL Tutorial for Beginners: A Step-by-Step Guide to Getting Started. Quick SQL connector</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Wed, 23 Aug 2023 06:21:46 +0000</pubDate>
      <link>https://dev.to/anasdew/mysql-tutorial-for-beginners-a-step-by-step-guide-to-getting-started-quick-sql-connector-2ge</link>
      <guid>https://dev.to/anasdew/mysql-tutorial-for-beginners-a-step-by-step-guide-to-getting-started-quick-sql-connector-2ge</guid>
      <description>&lt;h1&gt;
  
  
  MySQL Tutorial for Beginners: A Step-by-Step Guide to Getting Started. Quick SQL connector
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Hey Dev! You got to the right place to learn about MySQL. It's an easy yet detailed guide, you will learn about MySQL and it's benefits, a python library which is so easy to perform queries and at the end, some cool projects to do. So without any further do. Let's writes some quieres.&lt;/p&gt;

&lt;h2&gt;
  
  
  Introduction to MySQL and Python
&lt;/h2&gt;

&lt;h3&gt;
  
  
  What is MySQL?
&lt;/h3&gt;

&lt;p&gt;MySQL is a popular open-source relational database management system (RDBMS). It is a widely used tool for managing and organizing data in a structured way, particularly for use in web applications. MySQL is known for its reliability, simplicity, and performance, which makes it a good choice for many developers and organizations. It is developed, distributed, and supported by Oracle Corporation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why use MySQL with Python?
&lt;/h3&gt;

&lt;p&gt;There are several reasons why you might want to use MySQL with Python:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Integration: MySQL is a widely used database and integrating it with Python can help you take your application to the next level.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Speed: MySQL is known for its speed, which makes it a good choice for high-performance applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ease of use: Python is a very easy-to-use language, which makes it easy for developers to write and maintain code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scalability: Both MySQL and Python are highly scalable, which makes them a good choice for applications that are expected to grow over time.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Popularity: MySQL and Python are both widely used, which means there is a large community of developers who can provide support and guidance.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Overall, using MySQL with Python can be a powerful combination for building robust, high-performance applications.&lt;/p&gt;

&lt;h3&gt;
  
  
  Setting up a MySQL database and installing Quick SQL connector
&lt;/h3&gt;

&lt;p&gt;To set up a MySQL database and install the Python MySQL libraries, you can follow these steps:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Install MySQL: You can &lt;a href="https://dev.mysql.com/downloads/mysql/" rel="noopener noreferrer"&gt;download&lt;/a&gt; MySQL from the official website and install it on your system.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Create a database: After installing MySQL, you can create a new database using the MySQL command-line client or MySQL Workbench.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;To create a database, simply use command &lt;code&gt;CREATE DATABASE [database_name];&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Install the Python MySQL libraries&lt;/strong&gt;: There are several Python libraries that you can use to connect to a MySQL database, such as PyMySQL, MySQL Connector, MySQLdb and a newly born library which is &lt;strong&gt;Quick SQL connector&lt;/strong&gt;, which we will be using in this tutorial. You can install these libraries using pip, the Python package manager. For example, to install Quick SQL connector, you can use the following command: &lt;code&gt;pip install quicksqlconnector&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Connect to the database: Once you have installed the Python MySQL libraries and created a database, you can use Python to connect to the database and execute SQL queries.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Here is an example of how you can use Quick SQL connector to connect to a MySQL database in Python:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from quicksqlconnector import quicksqlconnector

# Syntax
# DB = quicksqlconnector('database','host', port, 'username', 'password')

DB = quicksqlconnector('mysql','localhost', 6606,'root', 'anas9916')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://github.com/Anas-Dew/QuickSQLConnector" rel="noopener noreferrer"&gt;Learn more&lt;/a&gt; about Quick SQL connector.&lt;/p&gt;

&lt;h3&gt;
  
  
  NOTE
&lt;/h3&gt;

&lt;p&gt;Quick SQL has abilty to work with MySQL, PostgreSQL and SQLite as well. If you're working with SQlite you don't need connection arguments. You'll only need to provide database and database_name as parameters.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB = quicksqlconnector('sqlite', database_name='my_example_database')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Basic MySQL operations with Python
&lt;/h2&gt;

&lt;p&gt;To execute any query for MySQL with Quick SQL Connector. It only has one method. Which is query and you can just put your raw SQL commands into it, And it will be executed.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Syntax
DB.query('query','parameters':optional)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Creating and deleting a table
&lt;/h3&gt;

&lt;p&gt;To create a table in a database, you can use the following SQL command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;CREATE TABLE table_name (
   column1 datatype,
   column2 datatype,
   column3 datatype,
   ...
);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example, to create a table called "customers" with columns "id", "name", and "email", you could use the following code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB.query("CREATE TABLE customers (id INTEGER PRIMARY KEY, name TEXT, email TEXT );")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To delete a table, you can use the following code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB.query("DROP table customers");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Inserting data into table.
&lt;/h3&gt;

&lt;p&gt;To insert data into a table, you can use the following SQL command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;INSERT INTO table_name (column1, column2, column3, ...)
VALUES (value1, value2, value3, ...);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With Quick SQL connctor, the code will go like this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB.query("INSERT INTO customers (id, name, email) VALUES (1, 'John Smith', 'john@example.com');")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The code above is correct but to be more secure and prevent our database from &lt;a href="https://en.wikipedia.org/wiki/SQL_injection" rel="noopener noreferrer"&gt;SQL injection&lt;/a&gt;, we will do the same with query parameters. &lt;em&gt;See below&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB.query("INSERT INTO customers (id, name, email) VALUES (%s, %s, %s);", (1, "John Smith", "john@example.com"))
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;That is perfect!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;To update data in a table, you can use the following SQL command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;UPDATE table_name
SET column1 = value1, column2 = value2, ...
WHERE condition;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With Quick SQL connector. the code will go like this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB.query("UPDATE customers SET email= %s WHERE id= %s;", ("john.smith@example.com", 1))
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Recommendation
&lt;/h2&gt;

&lt;p&gt;Now you got the basic idea of how to work with Quick SQL connector library. As a beginner, I would suggest you to learn this way as it is much more easier and stratforward and less complex as compared to other libraries out there (I tested).&lt;/p&gt;

&lt;h2&gt;
  
  
  Retrieving data from a table using SELECT statements
&lt;/h2&gt;

&lt;p&gt;The SELECT statement is used to retrieve data from a database. Here is the basic syntax for a SELECT statement:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT column1, column2, ...
FROM table_name
WHERE condition;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves all rows from the &lt;code&gt;table_name&lt;/code&gt; table where the &lt;code&gt;condition&lt;/code&gt; is true. The &lt;code&gt;WHERE&lt;/code&gt; clause is optional, so if you omit it, the statement will return all rows from the table.&lt;/p&gt;

&lt;p&gt;Here's an example to the same with Quick SQL connector&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB.query("SELECT id FROM customers WHERE name = 'anas dew';")

# This statement retrieves `id` column from the `Customers` table where the `name` column is 'anas dew'.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can also use the &lt;code&gt;*&lt;/code&gt; wildcard to select all columns from the table:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT *
FROM table_name
WHERE condition;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;output_data = DB.query("SELECT * FROM customers WHERE name = 'anas dew';")

print(output_data)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;NOTE : Since you're in a programming language, you'll need to store it in a variable to access it further.&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Output
[(2, 'Anas Dew', 'anas@example.com')]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs63t5pyjiz0v4ndqnctj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs63t5pyjiz0v4ndqnctj.png" alt="select statement in quicksqlconnector" width="634" height="212"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can also use various clauses such as GROUP BY, HAVING, and ORDER BY to further refine your query. &lt;/p&gt;

&lt;h4&gt;
  
  
  GROUP BY: The GROUP BY clause is used in a SELECT statement to group the results by a specific column or columns. This allows you to perform aggregations (such as COUNT, SUM, AVG, etc.) on groups of data within the result set.
&lt;/h4&gt;

&lt;h4&gt;
  
  
  HAVING: The HAVING clause is similar to the WHERE clause, but is used in conjunction with the GROUP BY clause to filter the results of the grouped data. It is used to apply a condition to the grouped data, similar to how the WHERE clause is used to filter the entire result set.
&lt;/h4&gt;

&lt;h4&gt;
  
  
  ORDER BY: The ORDER BY clause is used in a SELECT statement to sort the results by a specific column or columns in ascending or descending order. It is usually used after the WHERE and GROUP BY clauses, if they are present in the query.
&lt;/h4&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT
  Country,
  COUNT(Country)
FROM
  Customers
GROUP BY
  Country
HAVING
  COUNT(Country) &amp;gt; 10
ORDER BY
  Country ASC;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves the Country column and counts the number of rows in the Customers table for each country. It then groups the results by country and filters the results to only include countries with more than 10 customers. Finally, it sorts the results by country in ascending order.&lt;/p&gt;

&lt;h2&gt;
  
  
  Using WHERE clauses and operators to filter data
&lt;/h2&gt;

&lt;p&gt;The WHERE clause is used in a SELECT statement to filter the results based on specific criteria. It is used to specify a condition that must be met for a row to be included in the result set.&lt;/p&gt;

&lt;p&gt;There are several operators that can be used in the WHERE clause to filter data.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;= : equal to&lt;/li&gt;
&lt;li&gt;: greater than&lt;/li&gt;
&lt;li&gt;&amp;lt; : less than&lt;/li&gt;
&lt;li&gt;= : greater than or equal to&lt;/li&gt;
&lt;li&gt;&amp;lt;= : less than or equal to&lt;/li&gt;
&lt;li&gt;&amp;lt;&amp;gt; or != : not equal to&lt;/li&gt;
&lt;li&gt;BETWEEN : between a specific range&lt;/li&gt;
&lt;li&gt;IN : within a set of values&lt;/li&gt;
&lt;li&gt;LIKE : matching a specific pattern&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM Products WHERE Price &amp;gt; 50;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves all columns (*) from the Products table where the Price column is greater than 50.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM Customers WHERE Country IN ('USA', 'Canada', 'Mexico');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves all columns (*) from the Customers table where the Country column is either 'USA', 'Canada', or 'Mexico'.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM Employees WHERE FirstName LIKE '%a%';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves all columns (*) from the Employees table where the FirstName column contains the letter 'a'.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM Orders WHERE OrderDate BETWEEN '2022-01-01' AND '2022-12-31';
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves all columns (*) from the Orders table where the OrderDate column is between the dates of January 1st, 2022 and December 31st, 2022.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sorting data using ORDER BY
&lt;/h2&gt;

&lt;p&gt;The ORDER BY clause is used in a SELECT statement to sort the results by a specific column or columns in ascending or descending order. It is usually used after the WHERE and GROUP BY clauses, if they are present in the query.&lt;/p&gt;

&lt;p&gt;To sort the results in ascending order, use the ASC keyword. To sort the results in descending order, use the DESC keyword. If no keyword is specified, the default is ASC.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM Customers ORDER BY LastName ASC;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves all columns (*) from the Customers table and sorts the results by the LastName column in ascending order.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM Products ORDER BY Price DESC;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves all columns (*) from the Products table and sorts the results by the Price column in descending order.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;SELECT * FROM Employees ORDER BY Department ASC, LastName DESC;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This statement retrieves all columns (*) from the Employees table and sorts the results first by the Department column in ascending order, and then by the LastName column in descending order.&lt;/p&gt;




&lt;h2&gt;
  
  
  Next Steps
&lt;/h2&gt;

&lt;p&gt;This was all that you need to get started with MySQL. Now your next step is to practice yourself and make some projects. &lt;em&gt;Below&lt;/em&gt; are few MySQL projects to build right now.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Here are a few ideas for projects using Python and MySQL&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;A simple program that connects to a MySQL database and performs a SELECT query to retrieve data. The program could then display the results in a text-based user interface.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A program that allows a user to insert new rows into a MySQL database table via a simple user interface.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A program that generates reports based on data stored in a MySQL database. For example, you could create a program that generates reports on the most popular products or customers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A program that imports data from a CSV file into a MySQL database.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A program that performs a full-text search on a MySQL database.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>discuss</category>
      <category>ai</category>
      <category>laravel</category>
    </item>
    <item>
      <title>This is The Fastest and Simplest Chrome Extension on the Chrome Web Store!</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Fri, 07 Apr 2023 11:06:52 +0000</pubDate>
      <link>https://dev.to/anasdew/this-is-the-fastest-and-simplest-chrome-extension-on-the-chrome-web-store-211c</link>
      <guid>https://dev.to/anasdew/this-is-the-fastest-and-simplest-chrome-extension-on-the-chrome-web-store-211c</guid>
      <description>&lt;p&gt;Building a Chrome extension for the first time is an exciting experience. &lt;/p&gt;

&lt;p&gt;It's a feeling of accomplishment to see your idea come to life and be available to the public. That's what happened to me when I built my first-ever chrome extension, and &lt;/p&gt;

&lt;p&gt;I'm proud to say it's now &lt;a href="//share.anasdew.tech/0w76Yo"&gt;live on the Chrome Web Store&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The extension I built is a productivity tool that can help anyone who wants to get more done in less time. It's fast, simple, and easy to use. The reason for its simplicity is that it follows the principle of the VIM text editor. It means that the extension is entirely keyboard-based, so you can do everything using your keyboard.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JoAgUqIj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4ax8syqg14o7hiwztj8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JoAgUqIj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4ax8syqg14o7hiwztj8.png" alt="chrome extention" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The best part is that the extension doesn't require any personal data from the user.&lt;/strong&gt; It's completely offline and secure, so you don't have to worry about any data breaches. The extension is built to help people get things done, not to steal their information.&lt;/p&gt;

&lt;p&gt;One of the most significant features of the extension is its ability to send notifications for pending tasks. If you have a to-do list, this feature will help you stay on track and make sure that you're completing your tasks on time.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2fptWmOv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9zcw9v6vz2prfs6sx1p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2fptWmOv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9zcw9v6vz2prfs6sx1p.png" alt="chrome extension" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The extension is called TodoStack, and it's available for free on the Chrome Web Store. It's the perfect tool for anyone who wants to be more productive and get things done quickly. TodoStack is my brainchild, and I'm happy to see it help others in their daily lives.&lt;/p&gt;

&lt;p&gt;If you're interested in trying out TodoStack, head over to &lt;a href="//todostack.vercel.app"&gt;todostack.vercel.app&lt;/a&gt; to get started. It's a great way to start your day on the right foot and be more productive. &lt;/p&gt;

&lt;p&gt;With TodoStack, you'll be able to accomplish more in less time and make the most out of your day.&lt;/p&gt;

&lt;h2&gt;
  
  
  In conclusion,
&lt;/h2&gt;

&lt;p&gt;building a chrome extension is a great way to share your ideas with the world. My experience building TodoStack has been fantastic, and I'm proud to see it finally live on the Chrome Web Store. &lt;/p&gt;

&lt;p&gt;If you're looking for a productivity chrome extension or a todo app, give TodoStack a try. It's fast, simple, and keyboard-based, making it the perfect tool for anyone looking to get things done.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>productivity</category>
    </item>
    <item>
      <title>I made this AI tool in 69 lines of code in single HTML file.</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Wed, 01 Feb 2023 12:52:53 +0000</pubDate>
      <link>https://dev.to/anasdew/i-made-this-ai-tool-in-69-lines-of-code-in-single-html-file-545b</link>
      <guid>https://dev.to/anasdew/i-made-this-ai-tool-in-69-lines-of-code-in-single-html-file-545b</guid>
      <description>&lt;p&gt;Hi Geeks!&lt;/p&gt;

&lt;p&gt;In this blog, I am going to share with you my latest project - a simple AI tool that I built in just 69 lines of code within a single HTML file. With the growing popularity of Artificial Intelligence and its applications, I wanted to demonstrate how easy it is to create a basic AI tool with minimal effort and code. Whether you are a beginner in the field of AI or an experienced developer, I believe this blog will provide some useful insights and inspiration for your future AI projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Idea
&lt;/h2&gt;

&lt;p&gt;The idea is simple, Find a closest suitable word meaning for a phrase given as input.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tech
&lt;/h2&gt;

&lt;p&gt;You gussed it right, I'm going to use OpenAI's model to find that word. And for the frontend, Bootstrap will be fine.&lt;/p&gt;

&lt;h2&gt;
  
  
  Let's CODE...
&lt;/h2&gt;

&lt;p&gt;I will breakdown this coding part into 2 parts as javascript, frontend. So let's dive in.&lt;/p&gt;

&lt;h3&gt;
  
  
  Writing the fetch() API
&lt;/h3&gt;

&lt;p&gt;First of all we're going to code an API that will take our prompt and return us a reponse. &lt;em&gt;See code Below&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer $your-openai-api-key'
                },
                body: JSON.stringify({
                    "model": "text-davinci-003",
                    "prompt": `find one word for this phrase : ${that_phrase}`,
                    "temperature": 0.7,
                    "max_tokens": 256,
                    "top_p": 1,
                    "frequency_penalty": 0,
                    "presence_penalty": 0
            })
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now in prompt, You see that i've just sent a phrase and said that "find one word for this phrase" and OpenAI' model will do it's work and as a reponse we will get json.&lt;/p&gt;

&lt;p&gt;That json will filled with lots of data that we don't need for this project so i've made it simple for you.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.then(response =&amp;gt; response.json()).then(
                data =&amp;gt; { 
                    let response = data['choices'][0]['text'];
                    console.log(response);
                    document.getElementById('reponse-display').innerText = "That word is : " + response
                 }
            )
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now it will extract that text reponse came from OpenAI and store it in reponse variable. And there's an element in the frontend that will show the text as well. that is why i wrote the line.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;document.getElementById('reponse-display').innerText = "That word is : " + response
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Also at the bottom i put a code to trigger this API as shown below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;script&amp;gt;
    let button = document.getElementById('find-button');
        button.addEventListener('click', (() =&amp;gt; {
            let user_input = document.getElementById('phraseInput').value
            generateWord('https://api.openai.com/v1/completions', user_input)
        }))
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And that is all. Javascript part is done.&lt;/p&gt;

&lt;h2&gt;
  
  
  Frontend
&lt;/h2&gt;

&lt;p&gt;As i said earlier, I will be using Bootstrap. And I'm not going to install it. Because it's a very small project, I will be using cdn links to get job done.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"&amp;gt;
    &amp;lt;script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"&amp;gt;&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;By pasting this code into the head tag of the HTML file, I can use the a power of Bootstrap. So let's goto bootstrap and get forms to make UI better.&lt;/p&gt;

&lt;p&gt;I will copy form from Bootstap and edit according to the need. That is all. &lt;em&gt;Below&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div&amp;gt;
        &amp;lt;div class="mb-3"&amp;gt;
            &amp;lt;label for="phraseInput" class="form-label"&amp;gt;Write your phrase below&amp;lt;/label&amp;gt;
            &amp;lt;textarea type="text" class="form-control" id="phraseInput" aria-describedby="emailHelp" placeholder="For Eg. Walking in sunrise while listening to beautiful music."&amp;gt;&amp;lt;/textarea&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;button type="button" id="find-button" class="btn btn-primary"&amp;gt;Find&amp;lt;/button&amp;gt;
    &amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Below this form I will place the h2 tag to display that response word.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;h2 style="margin-top: 2rem;" id="reponse-display"&amp;gt;Click "Find" to find a word for your phrase&amp;lt;/h2&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;That's it. The Tool is ready to deploy and for the i see netlify is the easiest.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Altough, this tool is complete but i've got more ideas to implement into this so i will keep updating the app.&lt;/p&gt;

&lt;p&gt;Also this project is open to all &lt;a href="https://github.com/Anas-Dew/phrase2word" rel="noopener noreferrer"&gt;to contribute&lt;/a&gt;. So fork the repo and make changes, and i will push it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://phrase2word.netlify.app/" rel="noopener noreferrer"&gt;Here's the app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank you!&lt;/p&gt;

&lt;p&gt;Yo! i keep building exciting and interesting things around so don't forget to follow!. &lt;/p&gt;

</description>
      <category>web3</category>
      <category>crypto</category>
      <category>blockchain</category>
    </item>
    <item>
      <title>45 Days of Leetcode - Majority Element - Day 4.1</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Tue, 20 Dec 2022 04:02:36 +0000</pubDate>
      <link>https://dev.to/anasdew/45-days-of-leetcode-majority-element-day-41-36f4</link>
      <guid>https://dev.to/anasdew/45-days-of-leetcode-majority-element-day-41-36f4</guid>
      <description>&lt;p&gt;Hey dev! In case you don't know, I've started #45daysofleetcode and in these 45 days i'll be writing about two problems every day.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The problem, how I solved it and a bit of detailed explanation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I'm sharing this progress with you so that you too can learn a bit of different perspective and have new solutions so hit like to join this journey.&lt;/p&gt;

&lt;p&gt;I've chosen the best list of problems from medium to hard. That made lots of developers crack the interview.&lt;/p&gt;

&lt;p&gt;Are you excited?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Today's Problem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;br&gt;
Majority Element&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Description&lt;/strong&gt;&lt;br&gt;
Given an array nums of size n, return the majority element.&lt;/p&gt;

&lt;p&gt;The majority element is the element that appears more than ⌊n / 2⌋ times. You may assume that the majority element always exists in the array.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input: nums = [3,2,3]
Output: 3

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  My Approach
&lt;/h2&gt;

&lt;p&gt;We create a dictionary. And add each element to it but with how many times it occured in the list like {value:occurence}. For that we iterate through the list and check if the value is in dictionary: if it is, increase occurence of value by 1; else add that value to the dictionary with the value = 1. and then return the key of the maximum value in the dictionary.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Solution:
    def majorityElement(self, nums: List[int]) -&amp;gt; int:
        maj = {}
        for i in nums:
            if i in maj:
                maj[i] += 1
            else :
                maj[i] = 1
        return max(zip(maj.values(), maj.keys()))[1] 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let me know if you've any questions or suggestions!.&lt;/p&gt;

&lt;p&gt;If you want full list of solutions, &lt;a href="https://github.com/Anas-Dew/dsa-coding-solutions"&gt;here's the list.&lt;/a&gt; Make sure you star the repository.&lt;/p&gt;

&lt;p&gt;Follow to join this #45daysofleetcode&lt;br&gt;
Bye!&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>career</category>
      <category>python</category>
    </item>
    <item>
      <title>45 Days of Leetcode - Find Pivot Index - Day 3.1</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Mon, 19 Dec 2022 05:05:55 +0000</pubDate>
      <link>https://dev.to/anasdew/45-days-of-leetcode-find-pivot-index-day-31-5b2o</link>
      <guid>https://dev.to/anasdew/45-days-of-leetcode-find-pivot-index-day-31-5b2o</guid>
      <description>&lt;p&gt;Hey dev! In case you don't know, I've started #45daysofleetcode and in these 45 days i'll be writing about two problems every day.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The problem, how I solved it and a bit of detailed explanation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I'm sharing this progress with you so that you too can learn a bit of different perspective and have new solutions so hit like to join this journey.&lt;/p&gt;

&lt;p&gt;I've chosen the best list of problems from medium to hard. That made lots of developers crack the interview.&lt;/p&gt;

&lt;p&gt;Are you excited?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Today's Problem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;br&gt;
Find Pivot Index&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Description&lt;/strong&gt;&lt;br&gt;
Given an array of integers nums, calculate the pivot index of this array.&lt;/p&gt;

&lt;p&gt;The pivot index is the index where the sum of all the numbers strictly to the left of the index is equal to the sum of all the numbers strictly to the index's right.&lt;/p&gt;

&lt;p&gt;If the index is on the left edge of the array, then the left sum is 0 because there are no elements to the left. This also applies to the right edge of the array.&lt;/p&gt;

&lt;p&gt;Return the leftmost pivot index. If no such index exists, return -1.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input: nums = [1,7,3,6,5,6]
Output: 3
Explanation:
The pivot index is 3.
Left sum = nums[0] + nums[1] + nums[2] = 1 + 7 + 3 = 11
Right sum = nums[4] + nums[5] = 5 + 6 = 11

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  My Approach
&lt;/h2&gt;

&lt;p&gt;We will iterate through the array, and at each index, we check if the sum of the left side of the index is equal to the sum of the right side of the index.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Solution:
    def pivotIndex(self, nums: List[int]) -&amp;gt; int:
        total_sum, right_sum, left_sum = sum(nums), 0, 0
        for i in range(len(nums)):
            right_sum = total_sum - nums[i] - left_sum
            if left_sum == right_sum:
                return i
            left_sum += nums[i]
        return -1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let me know if you've any questions or suggestions!.&lt;/p&gt;

&lt;p&gt;If you want full list of solutions, &lt;a href="https://github.com/Anas-Dew/dsa-coding-solutions" rel="noopener noreferrer"&gt;here's the list.&lt;/a&gt; Make sure you star the repository.&lt;/p&gt;

&lt;p&gt;Follow to join this #45daysofleetcode&lt;br&gt;
Bye!&lt;/p&gt;

</description>
      <category>react</category>
      <category>vue</category>
      <category>programming</category>
      <category>frontend</category>
    </item>
    <item>
      <title>#45Days of Leetcode - Running sum of 1d array - Day 2.2</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Sun, 18 Dec 2022 15:34:20 +0000</pubDate>
      <link>https://dev.to/anasdew/45days-of-leetcode-running-sum-of-1d-array-day-22-3hjb</link>
      <guid>https://dev.to/anasdew/45days-of-leetcode-running-sum-of-1d-array-day-22-3hjb</guid>
      <description>&lt;p&gt;Hey dev! In case you don't know, I've started #45daysofleetcode and in these 45 days i'll be writing about two problems every day.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The problem, how I solved it and a bit of detailed explanation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I'm sharing this progress with you so that you too can learn a bit of different perspective and have new solutions so hit like to join this journey.&lt;/p&gt;

&lt;p&gt;I've chosen the best list of problems from medium to hard. That made lots of developers crack the interview.&lt;/p&gt;

&lt;p&gt;Are you excited?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Today's Problem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Name&lt;/strong&gt;&lt;br&gt;
Running sum of 1d array&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Description&lt;/strong&gt;&lt;br&gt;
Given an array nums. We define a running sum of an array as runningSum[i] = sum(nums[0]…nums[i]).&lt;/p&gt;

&lt;p&gt;Return the running sum of nums.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input: nums = [1,2,3,4]
Output: [1,3,6,10]
Explanation: Running sum is obtained as follows: [1, 1+2, 1+2+3, 1+2+3+4].

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  My Approach
&lt;/h2&gt;

&lt;p&gt;Simply add first value of original array to running array, and then start a loop from 1.&lt;/p&gt;

&lt;p&gt;With each iteration, append (last element + current element) to the running array. then return it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Solution:
    def runningSum(self, nums: List[int]) -&amp;gt; List[int]:
        runningArray = [nums[0]]
        for i in range(1, len(nums)):
            runningArray.append(runningArray[i-1]+nums[i])
        return runningArray

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let me know if you've any questions or suggestions!.&lt;/p&gt;

&lt;p&gt;If you want full list of solutions, &lt;a href="https://github.com/Anas-Dew/dsa-coding-solutions"&gt;here's the list.&lt;/a&gt; Make sure you star the repository.&lt;/p&gt;

&lt;p&gt;Follow to join this #45daysofleetcode&lt;br&gt;
Bye!&lt;/p&gt;

</description>
      <category>tutorial</category>
      <category>python</category>
      <category>career</category>
    </item>
    <item>
      <title>#45Days of LeetCode - Best time to buy and sell stock II - Day 2</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Sun, 18 Dec 2022 05:00:15 +0000</pubDate>
      <link>https://dev.to/anasdew/45days-of-leetcode-best-time-to-buy-and-sell-stock-ii-day-2-hh3</link>
      <guid>https://dev.to/anasdew/45days-of-leetcode-best-time-to-buy-and-sell-stock-ii-day-2-hh3</guid>
      <description>&lt;p&gt;Hey dev! In case you don't know, I've started #45daysofleetcode and in these 45 days i'll be writing about two problems every day.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The problem, how I solved it and a bit of detailed explanation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I'm sharing this progress with you so that you too can learn a bit of different perspective and have new solutions so hit like to join this journey.&lt;/p&gt;

&lt;p&gt;I've chosen the best list of problems from medium to hard. That made lots of developers crack the interview.&lt;/p&gt;

&lt;p&gt;Are you excited?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Today's Problem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Name&lt;/strong&gt; - Best time to buy and sell stock - 2&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Description&lt;/strong&gt; - You are given an integer array prices where prices[i] is the price of a given stock on the ith day.&lt;/p&gt;

&lt;p&gt;On each day, you may decide to buy and/or sell the stock. You can only hold at most one share of the stock at any time. However, you can buy it then immediately sell it on the same day.&lt;/p&gt;

&lt;p&gt;Find and return the maximum profit you can achieve.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Input: prices = [7,1,5,3,6,4]

Output: 7
Explanation: Buy on day 2 (price = 1) and sell on day 3 (price = 5), profit = 5-1 = 4.
Then buy on day 4 (price = 3) and sell on day 5 (price = 6), profit = 6-3 = 3.
Total profit is 4 + 3 = 7. 

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  My Approach
&lt;/h2&gt;

&lt;p&gt;Initialize two values -&amp;gt; maxProfits and step.&lt;br&gt;
 Iterate through the array from 0 to list length-1 and step is for jumping because we cannot buy sell twice a day.&lt;/p&gt;

&lt;p&gt;If next day price is higher than today's price then -&amp;gt; next day price - today's price = today profit.&lt;br&gt;
 add it to maxProfits, and skip next day and goto another day and so on.&lt;/p&gt;

&lt;p&gt;But if next day price is not higher than today's price then do nothing and move on. ref: else condition. step = 1 will do nothing but step = 2 skips a day.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class Solution:

    def maxProfit(self, prices: List[int]) -&amp;gt; int:
        maxProfits = 0
        step = 1
        for i in range(0, len(prices)-1, step):
            if prices[i+1] &amp;gt; prices[i] :
                maxProfits += prices[i+1] - prices[i]
                step = 2
            else :
                step = 1
        return maxProfits
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let me know if you've any questions or suggestions!.&lt;/p&gt;

&lt;p&gt;If you want full list of solutions, &lt;a href="https://github.com/Anas-Dew/dsa-coding-solutions"&gt;here's the list.&lt;/a&gt; Make sure you star the repository.&lt;/p&gt;

&lt;p&gt;Follow to join this #45daysofleetcode&lt;br&gt;
Bye!&lt;/p&gt;

</description>
      <category>leetcode</category>
      <category>tutorial</category>
      <category>python</category>
      <category>career</category>
    </item>
    <item>
      <title>#45Days of LeetCode - Move Zeros - Day 1</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Sat, 17 Dec 2022 14:50:27 +0000</pubDate>
      <link>https://dev.to/anasdew/45days-of-leetcode-move-zeros-day-1-l4o</link>
      <guid>https://dev.to/anasdew/45days-of-leetcode-move-zeros-day-1-l4o</guid>
      <description>&lt;p&gt;Hey dev! In case you don't know, I've started #45daysofleetcode and in these 45 days i'll be writing about two problems every day.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The problem, how I solved it and a bit of detailed explanation.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I'm sharing this progress with you so that you too can learn a bit of different perspective and have new solutions so hit like to join this journey.&lt;/p&gt;

&lt;p&gt;I've chosen the best list of problems from medium to hard. That made lots of developers crack the interview.&lt;/p&gt;

&lt;p&gt;Are you excited?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Today's Problem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Name - Move Zeros&lt;br&gt;
Description - Given an integer array nums, move all 0's to the end of it while maintaining the relative order of the non-zero elements.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note that you must do this in-place without making a copy of the array.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Example -&lt;br&gt;
&lt;code&gt;Input: nums = [0,1,0,3,12]&lt;br&gt;
Output: [1,3,12,0,0]&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;My Approach - I will iterate through the list and when found a zero in the path take it and append it to the list and remove it.&lt;/p&gt;

&lt;p&gt;When you find a zero in the path, you append it to the list and then remove it from the path. Simple.&lt;/p&gt;

&lt;p&gt;Code - &lt;br&gt;
&lt;code&gt;class Solution:&lt;br&gt;
    def moveZeroes(self, nums: List[int]) -&amp;gt; None:&lt;br&gt;
        """&lt;br&gt;
        Do not return anything, modify nums in-place instead.&lt;br&gt;
        """&lt;br&gt;
        for i in range(len(nums)):&lt;br&gt;
            if nums[i] == 0:&lt;br&gt;
                nums.append(nums[i])&lt;br&gt;
                nums.remove(nums[i])&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Let me know if you've any questions or suggestions!.&lt;/p&gt;

&lt;p&gt;Follow to join this #45daysofleetcode&lt;br&gt;
Full list of solutions are found in &lt;a href="https://github.com/Anas-Dew/dsa-coding-solutions"&gt;this&lt;/a&gt; repo. make sure you star it.&lt;/p&gt;

&lt;p&gt;Bye!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>You need to know about Neubrutalism Style</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Mon, 12 Dec 2022 13:19:03 +0000</pubDate>
      <link>https://dev.to/anasdew/you-need-to-know-about-neubrutalism-style-1po5</link>
      <guid>https://dev.to/anasdew/you-need-to-know-about-neubrutalism-style-1po5</guid>
      <description>&lt;p&gt;I recently came to know about Neubrutalism. Well bear with me for a minute. I'll let you know the thing I'm talking about.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Neubrutalism ?
&lt;/h2&gt;

&lt;p&gt;For short, Neubrutalism is an architectural style that emerged in the 1950s, characterized by its use of raw, unadorned concrete construction. Buildings in this style often have a blocky, geometric appearance, with a focus on functionality and simplicity.&lt;/p&gt;

&lt;h2&gt;
  
  
  How did it come to web design?
&lt;/h2&gt;

&lt;p&gt;A few popular websites, like Gumroad and Figma, popularized it in some way. And lots of websites are using it. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;See Below&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--amu2ejeD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnifvpbxzhw0loxmfp9y.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--amu2ejeD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnifvpbxzhw0loxmfp9y.jpg" alt="Gumroad" width="800" height="371"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--v63bmgcg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbuubu0bzct0bt4xqscu.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--v63bmgcg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbuubu0bzct0bt4xqscu.jpg" alt="Mozilla" width="800" height="362"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I Got Excited to Tell You About this?
&lt;/h2&gt;

&lt;p&gt;Because I've done it with my website too! And I transformed it from a normal design to a neubrutalism style in just 4-5 hours.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--prSuzvXW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu5bn8tfq6i9yda7igbr.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--prSuzvXW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu5bn8tfq6i9yda7igbr.jpg" alt="anas dew website" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  This is what I did.
&lt;/h2&gt;

&lt;p&gt;Here are a few things that I did to make it look neubrutalism style.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Used Headings in CAPITAL LETTER&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Bold fonts&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;High Contrast Colors&lt;/li&gt;
&lt;li&gt;High Contrast Shadows&lt;/li&gt;
&lt;li&gt;Sharp Edges (In some elements)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And the result that came out was BEAUTIFUL. Although I'll make some changes in a few days and make it more BRUTAL. And I'm planning to add some animations too.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🍕 Check Out&lt;/strong&gt; -&amp;gt; &lt;a href="http://anasdew.tech/"&gt;http://anasdew.tech/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thanks for reading this post! I'll see you in the next one!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Your Next Read -&amp;gt; &lt;a href="https://dev.to/anasdew/i-built-a-reddit-bot-which-downloads-top-videos-in-seconds-3eko"&gt;I Built a REDDIT BOT&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>css</category>
    </item>
    <item>
      <title>I created my own custom blog, Does it cool?</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Sat, 10 Dec 2022 14:13:19 +0000</pubDate>
      <link>https://dev.to/anasdew/i-created-my-own-custom-blog-does-it-cool-2eep</link>
      <guid>https://dev.to/anasdew/i-created-my-own-custom-blog-does-it-cool-2eep</guid>
      <description>&lt;p&gt;About a week ago, I was fascinated by the thought that why not create my custom own blog and share about tech news and stuff, So i did. Here's how I did it.&lt;/p&gt;

&lt;h2&gt;
  
  
  First things first.
&lt;/h2&gt;

&lt;p&gt;I've built this whole custom blog on HTML, CSS and Javascript. And used a free template for frontend.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Design
&lt;/h2&gt;

&lt;p&gt;I followed a design similar to a wordpress blog named TechCrunch and it goes like this.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Blog/index.html -&amp;gt; main page&lt;/code&gt;&lt;br&gt;
&lt;code&gt;Blog/2022/12/ -&amp;gt; all blogs which published in Dec 2022.&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CnTCQTOu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq80wvk6hwgh4b805kl7.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CnTCQTOu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq80wvk6hwgh4b805kl7.jpg" alt="Tech Crunch URL Structirt" width="363" height="27"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;For doing something like this, I've created a master folder in the root to store css and javascript files. And all HTML files will be blogs and I will have to be replicated.&lt;/p&gt;

&lt;p&gt;I know this may sound a little tricky so see the screenshot below.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FW6BEQeA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncbnpnthtnbdhadj9o3x.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FW6BEQeA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncbnpnthtnbdhadj9o3x.jpg" alt="Blog Structure" width="287" height="227"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So each blog HTML will get it's css and js files from assets folder. That's it how it's done. And the custom blog is ready.&lt;/p&gt;




&lt;p&gt;Each time I do have to publish a blog I'll duplicate the old one and then edit the Title, Meta Description, Image, And Content Inside it. It takes a few minutes to do it.&lt;/p&gt;

&lt;p&gt;And then push it to github and it is published. And the next step is to goto google search console and request indexing of my new blog's URL.&lt;/p&gt;

&lt;h2&gt;
  
  
  How Do I Write A Blog?
&lt;/h2&gt;

&lt;p&gt;First I get the idea (Of course) and then I write my blog in  Markdown using any online tool (Not decided which to use for permanent) and then I convert that Markdown into HTML using &lt;a href="https://markdowntohtml.com/"&gt;this &lt;/a&gt;tool.&lt;/p&gt;

&lt;p&gt;And then I replace it with the content in HTML and then time to post.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I didn't create any panel like in Dev.to just edit and post it.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;How is it?&lt;br&gt;
Oh the link of &lt;a href="https://anasdew.tech/blog"&gt;blog is here&lt;/a&gt;, check out and comment here if you got any feedbacks.&lt;/p&gt;

&lt;h2&gt;
  
  
  🎈 Thanks for reading...
&lt;/h2&gt;

&lt;p&gt;Follow me if you're interested in web dev and about tech stuff and interesting projects. &lt;/p&gt;

&lt;p&gt;This weekend I'm going to build a google clone. And I'll share about this only on Devto. So follow me to not MISS OUT!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>news</category>
      <category>testing</category>
    </item>
    <item>
      <title>ChatGPT is taking over the world by this.</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Sat, 03 Dec 2022 17:05:39 +0000</pubDate>
      <link>https://dev.to/anasdew/chatgpt-is-taking-over-the-world-by-this-2koh</link>
      <guid>https://dev.to/anasdew/chatgpt-is-taking-over-the-world-by-this-2koh</guid>
      <description>&lt;p&gt;OpenAI is a research institute focused on developing artificial intelligence in a safe and responsible manner. It was founded by Elon Musk, Sam Altman, and other prominent figures in the tech industry with the goal of advancing the field of AI and ensuring that it is used for the benefit of all humanity. OpenAI is known for its work on developing advanced AI algorithms, including GPT-3, which is one of the largest and most powerful language processing models in the world.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Chat GPT
&lt;/h2&gt;

&lt;p&gt;It is a trained chatbot that has conversational interactions. According to OpenAI, the dialog format enables ChatGPT to respond to follow-up queries, acknowledge its errors, refute false premises, and reject inappropriate requests.&lt;/p&gt;

&lt;p&gt;It is claimed that it can respond to all types of writing, including theoretical essays, mathematical solutions, and stories.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I asked to Chat GPT
&lt;/h2&gt;

&lt;p&gt;Explain me machine learning in simple words.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8r9paodn4dbsex1q7vs5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8r9paodn4dbsex1q7vs5.png" alt="chat gpt"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Would it be possible for humans to stay on Mars?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe7o2u8dmxmdimhoei0eo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe7o2u8dmxmdimhoei0eo.png" alt="chat gpt"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;It was fun talking to the chat gpt about various topics.&lt;/p&gt;

&lt;p&gt;So it was a quick short blog about my experience with chat gpt.&lt;/p&gt;

&lt;p&gt;If you liked it, share it with a friend.&lt;br&gt;
See you.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>machinelearning</category>
      <category>api</category>
    </item>
    <item>
      <title>Introducing Notastic - Because notes have emotions too! | MongoDB Atlas Hackathon 2022 on DEV</title>
      <dc:creator>Anas Dew</dc:creator>
      <pubDate>Sat, 26 Nov 2022 03:46:15 +0000</pubDate>
      <link>https://dev.to/anasdew/introducing-notastic-because-notes-have-emotions-too-mongodb-atlas-hackathon-2022-on-dev-4ce7</link>
      <guid>https://dev.to/anasdew/introducing-notastic-because-notes-have-emotions-too-mongodb-atlas-hackathon-2022-on-dev-4ce7</guid>
      <description>&lt;h2&gt;
  
  
  What I built
&lt;/h2&gt;

&lt;p&gt;I've built an on the go notes web app that helps you keep track of your notes while you're on the go. It's easy to use and you can access your notes from anywhere.&lt;/p&gt;

&lt;h3&gt;
  
  
  Category Submission:
&lt;/h3&gt;

&lt;p&gt;Choose Your Own Adventure&lt;/p&gt;

&lt;h3&gt;
  
  
  App Link
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://notastic.web.app/"&gt;https://notastic.web.app/&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ILWXlj2X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60rhwl15nampxob7sgrr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ILWXlj2X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60rhwl15nampxob7sgrr.png" alt="home page" width="800" height="450"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--e8rS0yKk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6fs6fnqnav3d93ljl79.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--e8rS0yKk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6fs6fnqnav3d93ljl79.png" alt="login page" width="800" height="450"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ly0_R0vP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyu4a6n8k0hr25g8pqb9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ly0_R0vP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyu4a6n8k0hr25g8pqb9.png" alt="signup page" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Description
&lt;/h3&gt;

&lt;p&gt;Notes are secured with a JSON Web Token (JWT) authentication. User has unlimited notes per account.&lt;/p&gt;

&lt;p&gt;The notes are colored according to tags or what I call emotions. Such as red for love, blue for work, yellow for notes and so on.&lt;/p&gt;

&lt;h3&gt;
  
  
  Link to Source Code
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/Anas-Dew/Cloud-Notebook"&gt;Github&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Permissive License
&lt;/h3&gt;

&lt;p&gt;MIT&lt;/p&gt;

&lt;h2&gt;
  
  
  Background
&lt;/h2&gt;

&lt;p&gt;I was fascinated by the MERN stack's capabilities while learning about it, and I wanted to know more. So I had the inspiration to make a notes app, and as I was working on it, I considered adding an emotion function.&lt;/p&gt;

&lt;h3&gt;
  
  
  How I built it
&lt;/h3&gt;

&lt;p&gt;(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)&lt;/p&gt;

&lt;h3&gt;
  
  
  Additional Resources/Info
&lt;/h3&gt;

&lt;p&gt;Null&lt;/p&gt;

&lt;p&gt;Finally, i want to thank Devto and MongoDB who've organized this amazing hackathon.&lt;/p&gt;

</description>
      <category>atlashackathon22</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>react</category>
    </item>
  </channel>
</rss>
