teleren/devto huggingface dataset:
Exciting News 😮!
Tags: webdev, programming, coding, w3s
Published: 2023-09-13 22:54:11

🚀 I absolutely thrilled to introduce you to kAI, our very own AI coding tutor, now available in W3Schools Spaces. ✨

If you haven't heard of Spaces yet, allow us to paint a picture for you: it's a phenomenal service on W3Schools that empowers you to craft websites and apps right within your web browser. 🌐💻

But what makes this announcement truly remarkable is kAI. Imagine having a knowledgeable coding companion at your fingertips 24/7! kAI is here to

🤖 kAI can assist you with:
Code explanations
Error debugging
Auto completion
Unit testing
Code refactoring
And that's not all! You can also ask kAI any questions you have.
Get ready to elevate your coding experience! 😃


Thanks To W3Schools.com

#kAI #AItutor #webdevelopment #coding #W3Schools #CodeInYourBrowser #AIassistance #ErrorFixing #CodeRefactoring #UnitTesting #CodeExploration #CodingMadeEasy #ai #news #tech #technews #developers #developercommunity #developpeur #programming #programmer #programación #w3schools


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edyssw58r8swwn70n6n2.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1h0nhvkm193dctil1y2.png)
Types of Indexes in Postgresql
Tags: postgres, apacheage
Published: 2023-09-13 22:47:40

A PostgreSQL database supports the following index types:
- single-column index
- multicolumn index
- partial index
- unique index
- expression index
- implicit index and 
- concurrent index.

## The single-column index
The single-column index is utilized when a table represents mostly a single category of data, or queries span around only a single category in the table. Normally, in a database design, tables represent a single category of data, so generally a single-column (category) index is utilized. 
Its syntax is as follows:

```
CREATE INDEX index_name ON table_name (column);
```
Let's consider the following example:

```
warehouse_db=# SELECT COUNT(*) FROM item WHERE item_id = 100;
```


In this example, the rows are required where item_id is 100. If there is no index defined, then the whole table will be scanned to find the rows where item_id is 100, which is an expensive operation. If you look closely, only a single column is utilized in the WHERE clause, thereby creating an index on a single column, which is item_id in the case of the preceding query. This optimizes that query.
Now, consider the following example:

```
warehouse_db=# CREATE INDEX item_index ON item (item_id);
```


The result can be seen using the following statement:


```
warehouse_db=# \d item;
```

                Table "item"

   Column   |        Type        | Modifiers
------------+--------------------+-----------
 item_id    | integer
 item_name  | text
 item_price | numeric
 item_data  | text


### Indexes: 
### "item_index" btree (item_id)


Now, we have created a B-tree index, item_index, on a table item’s item_id column, so now we try the same SELECT query again and see how much time it takes after index creation.
Creating an index on a table reduces the SELECT query time drastically, as shown in the following output:

```
warehouse_db=# SELECT COUNT(*) FROM item WHERE item_id = 100;
```

There is an obvious timing difference with and without the index. The same query without the index took significantly longer time to execute.
Assignment 1
Tags: blog, java
Published: 2023-09-13 22:41:57

I encountered some difficulties while working on Assignment 1 for SE 371. Since this assignment is short and easy, I didn't struggle significantly but I will discuss notable troubles I had completing this assignment.

The most notable struggle I had was creating a new project in java. I have created a new directory for two classes I've taken previously, but I was still having trouble for some reason. I remembered my previous data structures professor had posted a tutorial on how to create a new java project. So I followed the step-by-step video and was able to solve this problem with ease. 

The next problem involved writing the Fibonacci sequence program. I had trouble figuring out the way to shift the index down on to the new number after retrieving the sum from the two numbers before. I resolved this by writing down the steps mathematically on a sheet of paper rather than keep trying to work it out in my head. Seeing the variables and numbers on paper made it easier to code the steps that are the heart of the problem (indexing the numbers and totaling them). Next, I created a global int variable to keep track of where the program was in the Fibonacci sequence. I initially set it at zero because that's the standard for many coding problems. My program kept printing out the incorrect number, so I wrote down the first few numbers in the Fibonacci sequence and the sequence index that corresponded to each number. After seeing it all on paper, I realized my program was printing out one higher than the nth sequence entered by the user. I soon saw my mistake lying in the placeholder variable. Setting the variable to zero makes the program do an extra sequence. I solved this obstacle by setting it to 1 since the sequence starts at F0 and F1 rather than just F0. 

My feelings towards SE 371 involves lots of nervousness but also some excitement. I have never really taken a course like this before so it will be a big learning experience for me. I expect to gain insight on working as a team and the professional environment when working as a software developer. I plan on applying for internships before my junior year ends so I'm excited to learn more about the workforce through this class!
JavaScript Objects
Tags: webdev, javascript, beginners, programming
Published: 2023-09-13 22:34:31

In JavaScript, an object is a **non-primitive**, structured data type used to store various keyed collections and more complex entities.

There is many ways of declaring objects, this one called:
The **Object Literal Syntax**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su2b45dwxj0bhzh2iv1n.png)

---

> There's two different ways of accessing to the properties of an **object**

Using: **dot notation**:
`console.log(zouhair.firstName);`

Using: **bracket notation**:
`console.log(zouhair['lastName']);`

---

## **Different**

The big **difference** between these two up here, in the "**bracket notation**" we can put an "**expression**" - (expression produce a value).
Any time we try access a property on an object does **NOT** exists we get **undefined**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otpm1mu94tx8sd7q2bnc.png)

---

## Adding properties
Adding new properties to the object using both: **dot notation** and **bracket notation**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uq5g62j3rulfgej79y4c.png)

---

## Operator precedence
In terms of "**operator precedence**"**:**
`.` and `[]` : they have the same precedence which is **17**,
and both from **left-to-right**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0fxbricrmad7qylq5r6.png)
Mastering State Management in React Router: Storing and Retrieving State in URLs
Tags: react, webdev, javascript, beginners
Published: 2023-09-13 22:30:40



Today, I explored the fascinating realm of storing state in URLs using React Router. It's a game-changing concept that can enhance the usability and shareability of your web applications.

**Why Store State in the URL? 🌐**

The URL isn't just a path to your web pages; it's a versatile tool for managing UI state. Consider scenarios like toggling panels, sorting lists, or applying filters. Storing this information in the URL has compelling advantages:

1. Global Accessibility: State stored in the URL becomes globally accessible to all components within your app.

2. Data Persistence: Seamlessly pass data from one page to another, preserving the context effortlessly.

3. Bookmark and Share: Users can bookmark or share a page with its exact UI state, fostering collaboration.

**Params and Query Strings in URLs 📊**

When it comes to storing state in URLs, we rely on two key components: params and query strings. Let's dissect a URL to understand their role:

`www.example.com/app/cities/lisbon?lat=38.2&lng=-9.4`

- **app/cities**: The path segment of the URL.

- **lisbon**: Params, allowing for targeted data transmission.

- **lat=38.2&lng=-9.4**: Query strings, perfect for global state management.

In React, we harness this power with the help of React Router's **useParams()**.

**Implementing State Storage with Dynamic Parameters 🛤️**

Let's dive into some code to illustrate the concept further:

```
import React from 'react';
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';

// Component for Page 1
function Page1() {
  // Access the "id" parameter from the URL
  const { id } = useParams();

  return (
    <div>
      <h2>Page 1</h2>
      <p>State stored in URL: {id}</p>
      <Link to="/page2">Go to Page 2</Link>
    </div>
  );
}

// Component for Page 2
function Page2() {
  return (
    <div>
      <h2>Page 2</h2>
      <Link to="/page1/123">Go to Page 1 with State</Link>
    </div>
  );
}

// App Component
function App() {
  return (
    <Router>
      <Route path="/page1/:id" component={Page1} />
      <Route path="/page2" component={Page2} />
    </Router>
  );
}

export default App;

```
In this example:

- We define a dynamic route using :id in the route path ("/page1/:id"), allowing for state changes.

- In the Page1 component, we access the id parameter from the URL using useParams().

- You can visit "/page1/123" to see the state stored in the URL.

- Links within the components navigate between pages and pass state in the URL.

By following these steps, you open a world of possibilities for your React applications.

Happy coding! 🚀🔗 #React #ReactRouter #WebDevelopment #StateManagement #Frontend #CodingJourney
Installing PostgreSQL & Apache AGE for debugging (Part 2)
Published: 2023-09-13 22:28:57

##Introduction
This is part 2 of a guide for setting up PostgreSQL and Apache AGE on a Linux (Ubuntu) machine for debugging. After following this blogpost, you'll be able to:

- Install Apache AGE from source for debugging.

##Installing Apache AGE from Source
Clone the Apache AGE GitHub repo from [here](https://github.com/apache/age/releases)

Before proceeding with installing, make a slight change to make debugging easier later.

Open the makefile, and go the line that starts with 'PG_CPPFLAGS'. At the end of this line, append the -O0 flag. This will tell compiler to keep the optimization level at 0, which will make it easier to step through the code with the debugger.

Now install AGE while telling it your `PG_CONFIG` path

`sudo make PG_CONFIG=/usr/local/pgsql/bin/pg_config install`

PostgreSQL and AGE installation with debugging enabled has been completed.

##Setting up a database with Apache AGE
(The rest of the section serves as a short tutorial for using AGE).
Once the installation has been completed, now we will move to running Apache AGE.

- Firstly, start the server using `pg_ctl` utility.
- Enter the `psql` command line.
- Create a database and connect to it using:
`CREATE DATABASE db_name
\c db_name`
- Run the following commands next
`CREATE EXTENSION age;
LOAD ‘age’;
SET search_path = ag_catalog, "$user", public;`
The `CREATE EXTENSION` only has to be run once, but remember that the `LOAD` and `SET` commands have to be re-entered every time you enter `psql`.
- Let's create a graph called 'test' using `create_graph` command in the `ag_catalog` namespace:
`SELECT * FROM ag_catalog.create_graph('test');`
- Now we can use cypher commands to manipulate the graph, for example
`SELECT * FROM cypher('test', $$ CREATE (x:test {name:'test node'}) RETURN x $$) AS (x agtype);`
The above query will create a vertex with label 'test', and name 'test node' in the 'test' graph.
Plates Native PHP Template
Tags: php, productivity
Published: 2023-09-13 22:26:35

Official website of the local reference [plates](https://platesphp.com/)

---

## About

Plates is a native PHP template system that’s fast, easy to use and easy to extend. It’s inspired by the excellent Twig template engine and strives to bring modern template language functionality to native PHP templates. Plates is designed for developers who prefer to use native PHP templates over compiled template languages, such as Twig or Smarty.

## Installation

Plates is available on [Packagist](https://packagist.org/packages/league/plates) and can be installed using [Composer](https://getcomposer.org/). This can be done by running the following command or by updating your **composer.json** file.

```composer
composer require league/plates
```

```json
{
    "require": {
        "league/plates": "3.*"
    }
}
```
Be sure to also include your Composer autoload file in your project:

```php
require 'vendor/autoload.php';
```

## Simple Example
Here is a simple example of how to use Plates. We will assume the following directory stucture:

```
📦Plates
 ┣ 📂templates
 ┃ ┣ 📜profile.php
 ┃ ┗ 📜template.php
 ┗ 📜index.php
```

**Define a layout**
The **layout()** function allows you to define a layout template that a template will implement. It’s like having separate header and footer templates in one file.

```php
<?php $this->layout('template') ?>
```
The **layout()** function can be called anywhere in a template, since the layout template is actually rendered second. Typically it’s placed at the top of the file.

**Assign data**
To assign data (variables) to a layout template, pass them as an array to the layout() function. This data will then be available as locally scoped variables within the layout template.

```php
<?php $this->layout('template', ['title' => 'Simple example']) ?>
```
**The page template**
```php
<?php $this->layout('template', ['title' => 'Simple example']) ?>

<h1>Fruit List</h1>
<ul>
	<?php foreach( $fruits as $fruit): ?>
		<li>
			<?=$this->e($fruit)?>
		</li>
	<?php endforeach ?>
</ul>
```

**Accessing the content**

To access the rendered template content within the layout, use the **section()** function, passing **'content'** as the section name. This will return all outputted content from the template that hasn’t been defined in a section.

**The layout template**

```php
<html>
	<head>
		<title><?=$this->e($title) ?></title>
	</head>
	<body>
		<?=$this->section('content')?>
	</body>
</html>
```
**Escaping**
Escaping is a form of data filtering which sanitizes unsafe, user supplied input prior to outputting it as HTML

```php
<h1>Hello, <?=$this->escape($name)?></h1>

<!-- Using the alternative, shorthand function -->
<h1>Hello, <?=$this->e($name)?></h1>
```
**Within your controller**

```php
<?php

	require 'vendor/autoload.php';

	// Create new Plates instance
	$templates = new League\Plates\Engine('templates');

	$fruits = ['Apple','Banana', 'Watermelon', 'Orange', 'Grape'];

	// Render a template
	echo $templates->render('profile', ['fruits' => $fruits]);
```
Binary and other number representations
Published: 2023-09-13 22:15:30

Binary numbers are the fundamental part of  computers.

So, unlike the familiar decimal system we use in our daily lives, binary numbers use only 2 digits, which are 0 and 1. 0 is for :"off", and is 1 for "on". So why exactly are binary numbers a fundamental part of computers? They are fundamental because they use tiny electronic switches, which are called transistors, which can be either off(0) or on(1). These switched are capable of performing complex operations by flipping on and off billions of times per second. So, everything in our computers is represented as either a 0 or 1, starting from simple data like text, to complex data like images and sounds.

Now another number representation often used, is hexadecimal system.

Hexadecimal uses 16 different digits to represent numbers: 0-9 for the first ten and A-F for the next six. Hexadecimal is specifically popular in web design because it simplifies the representation of color. For example, code #FFFFFF is white.

If binary is too compact and hexadecimal too long, there's octal. Octal uses eight different digits: 0-7. It's not as commonly used today, but it was popular in the early days of computing.
Binary Number System
Published: 2023-09-13 22:09:27

When early humans needed to count and keep track of objects, including animals and natural objects, they found that using ten fingers of their hands was the simplest way to count them.

To represent quantitative values, we use number systems. In everyday life, we are dealing with the decimal number system, which consists of ten digits. Consequently, the base of the decimal system is 10.

                    0 1 2 3 4 5 6 7 8 9 

In the binary number system, there are only two digits. Consequently, the base of the binary system is 2.

                           0 1 

The rules and principles for all number systems are the same. In every system, we do operations like addition, division, multiplication, or subtraction.  

In the decimal number system, when we have four numbers to add, we break down them into parts, calculate operations separately, and add them together. The same concept is proper and applicable to binary systems.
A binary system has only two digits ,0 and 1. Here are rules that will help to add numbers in the binary system.


0 + 0= 1
0 + 1= 1
1 + 0= 1
1 + 1= 10

Let’s take the example of 111 + 110

+  111
   110
  _____

 Step 1. We add 1 to 0 starting from the right side. 1 + 0 = 1
 Step 2. Add second column which is 1 + 1 = 10
 Step 3. In order to add the last column 1 + 1 we had to carry 1 
 from the second column result and put 0 under the second column.
 
                                                                                   
          1
      +   111
          110
        _____
           01

Step 4. Using the same method that we used in step 3 we add the last column’s numbers.

        11
     +   111
         110
        _____
        1101

So, the result of the addition operation is 1101.
Binary Addition and Multiplication
Published: 2023-09-13 21:51:02

**Binary Addition and Multiplication**

If you’ve already watched my video about binary numbers (link at the end of the text), you have enough knowledge to be introduced to 2 most basic mathematical operations with binary numbers: addition and multiplication.

**Addition**
Before starting, let’s keep in mind the rules written below:
0+0=0
1+0=1
0+1=1
1+1=10
Those 4 equations will help us to add binary numbers much easier.
Let’s try to add 45 to 12 step by step.
Firstly, we convert those decimal numbers into binary ones.
45 => 101101
12 => 1100
Now, let’s try to add one to another and see how it goes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zc49rassqu3fvfwduvv6.PNG)

Just like in the decimal number system, we start adding the digits starting from the right. In the first 2 columns, we use the first 2 rules mentioned above.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30fwuo5kejce0dbk5me9.PNG)
 
In the third column, we use rule number 4. We keep 0 in the 3rd column and carry over 1 in the 4th column, just like decimal numbers.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rppu1miu1tfsvur0m8zx.PNG)
 
In column 3, the sum of three 1s gives 11. Hence, we leave 1 in the 4th column and carry over the other 1 in the 5th column.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chq1nbxtuwq7w9rni89y.PNG)
 
Since there are 2 empty spaces in columns 5 and 6, we can imagine there are zeros and use rule number 2.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtaeykdm8vxw03c1r2w1.PNG)
 
The result is 111001, which is the same as 57 in the decimal number system.

**Multiplication**
Let’s use the same binary numbers: 101101 and 1100.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0bkoqrxxohbpflyo0fq.png)

The process stays the same: we multiply each digit of 1100 with the digits of 101101, just like in the decimal number system.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0b33738u4w9hgplgitf.png)


For our convenience, we put zeros on empty spaces.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxii8ta90s3cdumw5t82.png)

Then, we add all the digits. The first 5 columns will be counted with the first 3 rules mentioned above.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20bh9d60s43dgwuhvzs8.png)

In the rest, we use the carrying method, which was explained before.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mtk2ooiqidiyfcvwd07b.png)

The answer is 1000011100, which is the same as 540 in base 10.




The Video link: https://www.youtube.com/watch?v=3KZrXBJynHI
Discovering PostgreSQL: A Reliable Database System
Published: 2023-09-13 21:50:45



PostgreSQL, also known as Postgres, is a type of database software that is free to use and can handle complicated tasks, making it very reliable and adaptable. It is a powerful and popular system used to store and organize data.

PostgreSQL works well with a language called SQL, which is commonly used to manage databases. It can also work with many other programming languages, making it very flexible for developers to use. Unlike other database systems, PostgreSQL supports object-oriented programming, JSON and XML data types, and other useful features.

Internal structure of PostgreSQL
One of the best things about PostgreSQL is its ability to handle large amounts of data and perform well even under heavy use. It is also very dependable and can keep data safe and consistent. This makes it a great choice for important applications and big organizations.

Internally, PostgreSQL is made up of various processes that work together to manage client requests, handle data storage, and perform other important tasks. The system ensures data consistency using a method called Multi-Version Concurrency Control (MVCC), which allows multiple transactions to access data at the same time without causing problems. PostgreSQL also uses shared memory for efficient data access and write-ahead logging (WAL) to make sure changes to the database are safe.

Conclusion
PostgreSQL is a powerful and versatile database system that can handle complex tasks and is trusted by developers and organizations. Its internal architecture is well-designed, ensuring data integrity, performance, and reliability, making it a popular choice for managing data in various industries.