DEV Community: moalmit

RESTful vs. Custom Routes

moalmit — Sat, 07 Oct 2023 10:25:33 +0000

In web development, rotes are used to define how different URLs (Uniform Resource Locators) map to specific actions or resources withing a web application. There are two common approaches to defining routes: RESTful routes and custom routes.

What are routes?
In the context of URLs, routes typically refer to a way of specifying a particular resource or action within a web application or website. Routes are used to define the structure of URLs and determine how a web server or we application should respond to incoming requests.
Routes are a fundamental part of web development and are often used in combination with web frameworks and content management systems (CMS) to build dynamic and organized websites.

How routes work in URLs?

Base URL: Every website or web application has a base URL, which is the starting point for all its routes.
For example, in the URL https://www.example.com/
https://example.com/ is the base URL
Route Path: The route path is the part of the URL that comes after the base URL and specifies a particular resource or action. It is often used to represent different pages or functionality within a website.
For example, in the URL https://www.example.com/products
/products/ is the route path indicating that the user is accessing the products page.
Route Parameters: Routes can also include parameters, which are dynamic values passed in the URL to provide additional information.
For example, in the URL https://example.com/products/123
123 could be a route parameter representing a specific product ID. Web applications can use these parameters to fetch data or perform actions to that parameter.
Route Handling: On the server side, wed frameworks and applications are configured to handle specific route paths. When a user makes a request to a URL, the server uses the route path to determine which code or controller should be executed to generate the appropriate response. This is often referred to as routing or route handling
HTTP Methods: Routes can also be associated with specific HTTP methods (e.g., GET, POST, PUT, DELETE) to determine what action should be taken when a request is made. For example, a GET request to /products/ might retrieve a list of products, while a POST request to the same path might add a new product to the database.
Route Variables: Some web frameworks allow for route variables or placeholders within route paths. These placeholders can match various values and provide flexibility in routing.
For example /products/{category} could match URLs like /products/electronics and /products/clothing with 'electronics' and 'clothing' being route variables that can be used in the server-side code.

Routes in URLs help organize and structure web applications by specifying how URLs should map to specific actions or resources. They are a key component of modern web development, enabling the creation of dynamic and interactive websites. Different web frameworks and CMSs have their own ways of defining and handling routes, but the basic concept remains consistent.

RESTful Routes
REST (Representational State Transfer) is an architectural style that encourages a standardized way of designing web services and APIs.
RESTful routes are based on the principles of REST and adhere to a set of conventions for mapping HTTP methods (GET, POST, POST, PUT, DELETE) to CRUD (Create, Read, Update, Delete) operations on resources.
RESTful routes typically follow a structured pattern, such as:

GET /resource (retrieve a list of resources)
GET /resource/:id (retrieve a specific resource by its unique identifier)
POST /resource (Create a new resource)
PUT /resource/:id (update a specific resource)
DELETE /resource/:id (Delete a specific resource)

RESTful routes provide a clear and predictable way of interacting with resources, making it easier for developers to understand and work with APIs.

Custom Routes
As the name suggests, allow developers to define routes that don't necessarily adhere to RESTful conventions. They provide more flexibility in how URLs map to actions or resources within an application.

Custom routes can be used when we have specific requirements that don't fit neatly into the standard RESTful CRUD operations. For example:

Implementing complex search functionality
Creating actions that don't directly map to CRUD operations
Handling legacy APIs or integrating with external services that have their own URL structures

Custom routes are often used when we need to design an API or web application that doesn't align perfectly with the RESTful model.

When to choose RESTful Routes vs. Custom Routes?

RESTful Routes: Use RESTful routes when we want to adhere to REST principles and have a straightforward way of defining CRUD operations on resources. This approach is suitable for most applications, especially when we want a clear and standardized API design.
Custom Routes: Choose custom routes when our application's requirements are more complex or when we need to deviate from RESTful conventions. Custom routes provide the flexibility to define routes that meet our specific needs.

It's important to note that these approaches are not mutually exclusive, and we can often mix RESTful and custom routes within the same application, using each where it makes the most sense. The choice between RESTful and custom routes depends on the specific goals and requirements of our project.

SQL database vs. Excel

moalmit — Sun, 27 Aug 2023 12:33:16 +0000

With very large and complex datasets, Excel solution is not very convenient for an organization with that size of datasets. Excel files support a maximum size of: 1,048,576 rows by 16,384 columns: https://support.microsoft.com/en-us/office/excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3

and in practice the limit is such smaller than that because many personal computers can't handle that amount of data along with Excel's user interface at the same time.

Furthermore, while having a single very large table may not be so bad, the situation becomes more complicated when we have to look up the data in that table in another very large table, which in turn references another table, etc. After a bunch of VLOOKUP s across several large tables, not only our Excel will crash, but we will also risk losing our data.

On top of that, collaboration is difficult in Excel, how would we allow our colleagues to work together on the same spreadsheet? One option could be to use Excel Online or Google Spreadsheets, but although these tools are excellent for collaboration on small datasets, they are not optimized for tasks like the one we are describing.

Add the need to input data from online forms and use it in online dashboards that can be accessed by many people at once, we need a database engine instead. This is a piece of software which is purpose-built to do all the things just mentioned in a very efficient and secure way.

The database is the classic location where modern organizations have chosen to store their data for professional use. An informal way to understand database is as "spreadsheets of spreadsheets", that is, spreadsheets that link other (potentially many) spreadsheets. Their advantage over Excel is that databases have very strict rules on what is allowed and what not, thus preventing chaos and data loss, and have extremely good performance. Some popular database engines are:

1) Microsoft SQL Server
2) Oracle Database
3) MySQL (open-source)
4) PostgreSQL (open-source)
5) SQLite (open-source)

We might have noticed that the letters "SQL" appear in several of the names of these products. That is because just as in Excel we have formulas, we can have formulas in databases, and the language we use to write them is called SQL (Structured Query Language). SQL syntax and functions are standardized across database engines for the most part.

SQLite stores tables by compressing them into a single file of extension .db . Primary and foreign keys are very important concepts.

Primary keys:
1) Uniquely identify a record in the table. Their name usually includes the word "ID". For example, CustomerID is the primary key of the Customer table, AgentID is the primary key of the Agent table, and CallID is the primary key of the call table
2) Do not accept null values (they shouldn't, because the are being used to identify the record)
3) Are limited to one per table.

On the other hand, foreign keys:
1) Are a field in the table that is the primary key in another table
2) Can accept null values
3) Are not limited in any way per table. For example, the a Call table has 2 foreign keys: AgentID and CustomerID pointing to the Agent and Customer tables, respectively.

The (key) prop in React

moalmit — Sun, 02 Jul 2023 02:05:17 +0000

Working with arrays in React may lead to React internal warning message that can be viewed in the browser console:

Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Array name`.

Using a special key prop allows React internally to keep track of each element in the array of JSX, so that in case any of the elements are added, updated or deleted, React can optimize performance and keep track internally of those changes.

function Numbers(){
   const numbers = [1, 2, 3, 4, 5]

   const newNumbers = numbers.map(number=> { 
     return <li>{number}</li>
    }
return (
   <div>
      <li>
         {newNumbers}
      </li>
   </div
  )
}

in the example above, the error message:

Warning: Each child in a list should have a unique "key" prop.
  Check the render method of `newNumbers`.

will be shown on the browser console and to fix this error we must give each (li) element a special key prop, like so:

   const newNumbers = numbers.map(number=> { 
     return (
      <li> key={number}
        {number}
      </li>
      )
    }

This special key prop allows React internally to keep track of each element in the array of JSX, so that in case any of the elements are added, updated, or deleted, React can optimize performance and keep track internally of those changes.

The key should be a unique value associated with each element from the array. Since each element in the array is unique, we can just use each element for the key prop.

Any time we are creating an array of JSX elements, we must use the key prop.

Let's see a couple more examples of how this key prop can be used.

With Objects
It is often best to use the objects's id as the key:

const users = [
  { id: 1, firstName: "Duane", lastname: "Watson" },
  { id: 2, firstName: "Duane", lastname: "Johnson" },
]

const userHeadings = users.map(user => {
   return <h1 key={user.id}>{user.firstaName}</h1>
  })

With Non-Unique Arrays
If the array elements are not unique, and can't use the id, the element index position might be used:

const numbers = [0, 1, 2, 3, 4, 5]

const newNumbers = numbers.map((number, index)=> {
  return <div key={index}</div>
});

While this will make the error message go away, it's not necessarily the best approach and React recommend only using the index as a last resort.

Using .map() Method To Copy An Array

moalmit — Sun, 14 May 2023 15:01:52 +0000

I started this journey on 2023-02-27 with a basic knowledge of computer programming.
When I see a web page and look at the "source code", I am wondering how the web page works. Now, after 11 weeks of study, I found that the JavaScript coding is the "source" that does most things to the web page behind the scenes.

Moving forward with JavaScript, I learned essential skills on creating documents with HTML, styling/positioning the documents' content with CSS, and using JavaScript to respond to events.

Breaking down the JavaScript part of web programming into three "pillars" that constitute the heart of web programming:

1) Recognizing events.
2) Manipulate DOM.
3) Communicate with server.

One interesting thing I learned about copying an array nondestructively (leaving the original array intact) is using the map method to copy an array, as in this example:

The way that JavaScript works to manipulate HTML and CSS in real-time allows for the creation of dynamic and interactive web pages, enhances the user experience, and makes web pages more engaging.
In conclusion, JavaScript is a versatile and powerful language that is essential for building modern web applications. Its ease of use, support for OOP and functional programming, and vast ecosystem of libraries and frameworks make it a popular choice for developers worldwide. Whether you are a beginner or an experienced developer, learning JavaScript is a must if you want to build dynamic and interactive web applications.