teleren/devto huggingface dataset:
Web stack Monitoring Made Easy: Why you need to set up web stack monitoring
Published: 2023-09-05 12:10:56

---
title: Web stack Monitoring Made Easy: Why you need to set up web stack monitoring
published: true
date: 2023-03-15 20:30:45 UTC
tags: 
canonical_url: https://codenego.tech/web-stack-monitoring-for-beginners
---

### What is web stack monitoring?

When most people hear the word "monitoring", they know this to be when you are being watched or you are watching over something.

But in software engineering, web stack monitoring is simply when you pay constant attention or monitoring to a different component of your web stack such as web server, application server, database, and other services..

And the type of monitoring can range from collecting data from various performance metrics such as CPU usage, memory usage, network traffic, and disk space utilization, to monitoring the availability and response time of web services, applications, and databases. Depending on the needs and requirements of the organization, monitoring can be performed at various levels, including server-level, application-level, and user-level.

### Why do we need to monitor?

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678911828308/39641c76-9f9d-43d5-85c5-402d87a6f23f.png)

Webstack monitoring is an important aspect of maintaining the health and performance of your system, application, or network. Always remember your application isn't perfect and there are times when you will experience failure may be due to high traffic or something else.

Here are 3 reasons why you should consider setting up web monitoring:

1. Preventing Security Breaches: Not only will you be able to detect some security issues, and you will also be able to detect flaws, potential security threats, and vulnerabilities before hackers have the chance to take advantage of them.

2. Performance Optimization: Monitoring can help identify bottlenecks, slow response times, and other performance issues that can impact user experience. By analyzing metrics such as response time, throughput, and resource utilization, you can optimize system performance and improve the user experience. For example, if a web page is taking too long to load, monitoring can help identify the cause of the issue and allow you to take corrective action to improve load times.

3. Improve Decision-Making: Monitoring provides you with valuable data and insights that can help you make informed decisions about resource allocation, capacity planning, and infrastructure investments. By tracking KPIs and analyzing trends, you can identify patterns and make data-driven decisions.

so when next you are thinking of building your next project or you already have an existing one, then you should always consider adding a monitoring tool such as datadog, this way, when your application is about to fail be it from the server, load balancer, database, etc you will be able to detect it early then fix it.

In my next post, I will be sharing with you how to set up a web monitoring tool like (datadog) into your web stack.
Desativando o comando `php artisan migrate:fresh` em modo produção.
Tags: laravel
Published: 2023-03-15 20:25:16

---
title: Desativando o comando `php artisan migrate:fresh` em modo produção.
published: true
description: 
tags: #laravel
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-15 20:12 +0000
---

Dica simples de como proteger os dados de nosso banco de dados em produção da execução do comando `php artisan migrate:fresh`. 

apenas lembrando... o comando `migrate:fresh` apaga todas as nossas tabelas e seus dados, e na sequencia recria as tabelas zeradas. 

```php
// /routes/console.php

...
use Illuminate\Support\Facades\App;

...
if (App::environment() === 'production') {
    Artisan::command('migrate:fresh', function () {
        $this->comment('comando desativado em modo produção.');
    })->describe('Comando desativado em modo produção.');
}
```
*Retorno na tentativa de execução:*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prv2m9zks7qyp19fllby.png)
*Retorno na execução do comando `php artisan`, mostrando a alteração da descrição original do comando.*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb4ayiqs1urjo74wxenf.png)

é isso. 😎
Display Your Website or Application in a Realistic Device Layout Using the device-layouts NPM Package
Tags: javascript, npm, webdev, react
Published: 2023-03-15 20:15:00

Hello Devs 😊

**[Device-Layouts NPM](https://www.npmjs.com/package/device-layouts)**

### Introduction:

The device-layouts npm package is a useful tool for web developers who want to showcase their website or application in a realistic device layout. It provides MacBook and iPhone device frames in SVG format that can be easily integrated into a web page. In addition to its default features, the package also allows you to customize the CSS styles of the device layouts. In this article, we will explore how to customize the CSS styles of the device-layouts package.

### Installation:

The first step in using the device-layouts package is to install it in your project. You can do this by running the following command in your terminal:

```bash
npm install device-layouts
```

Once the installation is complete, you can start using the package in your project.

### Usage:

To use the device-layouts package, you need to import it into your project and pass an element to be displayed in the device layout. Here's an example:

```javascript
import React from "react";
import Layouts from "device-layouts";

const App = () => {
  const element = (
    <div>
      <iframe
        src="https://www.example.com"
        width="100%"
        height="800"
      ></iframe>
    </div>
  );
  const { Laptop, Iphone } = Layouts({ element });
  return (
    <>
      <Laptop />
      <Iphone />
    </>
  );
};

export default App;
```

CSS Styles: The device-layouts package also allows you to customize the CSS styles of the device layouts. You can add new styles or override the pre-defined ones. The pre-defined CSS styles are located in `./src/assets/css/style.css` and include the following classes:

* `laptop_layout`
    
* `iphone_layout`
    
* `laptop_layout_child`
    
* `iphone_layout_child`
    
### Laptop Layout:

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


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

### iPhone Layout:


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

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

### Conclusion:

In this article, we have explored how to use the device-layouts npm package to display your website or application in a realistic device layout.

The **device-layouts** package is a useful tool for web developers who want to showcase their projects in a realistic and visually appealing way.

Happy Coding ☕
In React is setState is Synchronous or Asynchronous ?
Tags: javascript, webdev, react
Published: 2023-03-15 19:56:31

Is JavaScript execution thread blocked waiting for that state to be set or can it keep working on whatever it is doing?".

Setting the state is one time operation.

It sets the state and it is done.

There is nothing to wait for.

The state is setted.

If you go and look inside the Fiber tree, where the state is set (no, it is not set inside the component, inside the useState function or so), you'll see the state value there.

It is set inside the Fiber tree in an object tied to a node which is the representation of that component in the tree.

That marks the Fiber node as dirty.

The state is there but, there is a big but; it is not yer accessible into the component where setState function was called.

There is no getter running at the same time with that state setter.

Some sort of getter should run in order to see the new state value.

Someone or something must call that state inside the component.

The setter does not do it. It only sests the state, does not get it also.

Well, it gets it as an argument for the updater function, if the updater function is used.

But its value is not accessible outside that setState instance; it is not availble in the component!

At the time the state is set no getter is called from the component.

The getter will get call by React the next render cycle because the value of it will live in the DOM at that point.

Which brings us to this: React runs in cycles.
There is a recursion going on every 16 milliseconds top to bottom in the Fiber tree.

If some of the nodes are marked as dirty, the React runs the reconciliation algorithm and if the previous Fiber node is different than the current Fiber node React commits those changes to the DOM.

The state just setted will be available in the component after the cycle finishes, the commit phase is done and the new DOM tree is painted.

Because only then the new state getter will have been called so the new value state returns to the component where the state change has happened.

What about batching more setState calls?
It adds some complexity but is not asynchronous either.

Imagine a list of functions gathered together which wait to be executed.

That is what happens with batching.

"setState" calls are pushed in an "array like" data structure and not executed on the spot when they are invoked.

Later, at the end of the cycle recursion, the lists is looped through and all the setState present in that list are executed.

Conclusion:
Whenever the "setState" is called the state is setted, it is there on the corresponding Fiber node.

Only that, IT IS SETTED OUTSIDE the component, in the Fiber tree node.

It will be available in the component when a getter for that state runs.

And that will happen only the next render cycle, when the recursion starts again top to bottom, encounter the dirty node and commits the changes to the DOM.

Which will make that state available in the component.

If setState was asynchronous that would have mean the execution of setState is sent to the Event Loop and put in the tail of all the the synchronous code execution.
CSS Basics: Syntax, Selectors, Properties, and Values
Tags: css, web3, frontend, design
Published: 2023-03-15 19:30:17


In this example, `p` is the selector that targets all `p` elements, `color` is the property being set to the value `red`, and `font-size` is another property being set to the value `16px`.

### CSS Selectors

CSS selectors allow you to target specific HTML elements, based on a variety of criteria, such as element type, class, or ID. Here are some of the most commonly used CSS selectors:

- **Element selectors**: target all elements of a specific type, such as `p`, `h1`, or `ul`.
- **Class selectors**: target all elements with a specific class attribute, such as `.red-text`, `.nav-bar`, or `.btn`.
- **ID selectors**: target a specific element with a unique ID attribute, such as `#header`, `#main-content`, or `#footer`.
- **Attribute selectors**: target elements with specific attribute values, such as `[type="submit"]`, which targets all elements with a `type` attribute set to `submit`.

### CSS Properties and Values

CSS properties define the visual appearance of HTML elements, and values set specific values for those properties. There are a wide range of CSS properties available, including:

- **Color**: sets the color of text and other elements.
- **Font**: sets the font family, size, weight, and other properties of text.
- **Background**: sets the background color or image of elements.
- **Border**: sets the border style, color, and thickness of elements.
- **Margin**: sets the space outside an element's border.
- **Padding**: sets the space inside an element's border.

### Conclusion

In this chapter, we've covered the basics of CSS syntax, selectors, properties, and values. With these fundamental concepts in mind, you can begin to create your own styles and layouts for web pages. In the next chapter, we'll dive deeper into CSS layout techniques, including Flexbox and Grid.
CSS Fundamentals for Web Developers
Tags: css, webdev, frontend, design
Published: 2023-03-15 19:27:37

## Introduction to CSS

CSS (Cascading Style Sheets) is a language used to add style and formatting to HTML documents. It allows you to define the visual appearance of web pages, including colors, layout, typography, and more.

CSS works by applying styles to HTML elements. Each HTML element can have one or more CSS styles applied to it, and these styles can be defined in an external stylesheet or inline within the HTML document.

### Why is CSS important?

CSS is important because it allows web developers to separate the presentation of a web page from its content. This makes it easier to maintain and update a website's design and layout, as styles can be defined once and applied across multiple pages.

CSS also makes it possible to create responsive designs that adapt to different screen sizes and devices. This is critical for ensuring that websites are accessible and usable on a wide range of devices, from desktop computers to mobile phones and tablets.

### How does CSS work with HTML?

CSS works by selecting HTML elements and applying styles to them. This is done using selectors, which are patterns that match one or more HTML elements. Once a selector is matched, CSS styles can be applied to that element, as well as any child elements it contains.

CSS styles are defined using properties and values. Each property defines a specific aspect of an element's appearance, such as its color or font size, and each value sets a specific value for that property. For example, the `color` property can be set to a value like "red" or "blue", while the `font-size` property can be set to a value like "12px" or "2em".

CSS also supports a range of advanced features, such as layout techniques like Flexbox and Grid, animations and transitions, and more.

In the next chapter, we will explore the basics of CSS syntax, selectors, and properties, and how they work together to define the visual appearance of a web page.
FREE AWS Cloud Project Bootcamp Week 4 Part 2
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-03-15 19:21:59

[74/100] #100DaysOfCloud Today, I did a part of the Week 4 of the FREE AWS Cloud Project Bootcamp by Andrew Brown.

This week is about Relational Databases and involves more of RDS postgres database. Here's what I completed:
- Watched the Week 4 Live-Stream Video.
- Create RDS Postgres Instance using CLI.
    - Provision an RDS instance.
    - Temporarily stop an RDS instance.
    - Remotely connect to RDS instance.
- Bash scripting for common database actions.
    - Write several bash scripts for database operations.
- Operate common SQL commands.
- Create a schema SQL file by hand.
- Work with UUIDs and PSQL extensions.

[GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/074/Readme.md)

You can watch the Bootcamp through this YouTube playlist : [FREE AWS Cloud Project Bootcamp playlist](https://youtube.com/playlist?list=PLBfufR7vyJJ7k25byhRXJldB5AiwgNnWv)
C++ Ternary Operator
Tags: beginners, programming, tutorial, cpp
Published: 2023-03-15 19:17:06

Assalamu aleykum bugun sizlar bilan C++ dasturlash tilida ishlatiladigon `Ternary Operator` buni tarjimasi - `uchlik operatori` xaqida gaplashib o'tamiz.

`Uchlik operator sinov shartini baholaydi va shart natijasi asosida kod blokini bajaradi.`


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


```
#include <iostream>
using namespace std;

int main() {
  double marks;

  // take input from users
  cout << "Enter your marks: ";
  cin >> marks;

  // ternary operator checks if
  // marks is greater than 40
  string result = (marks >= 40) ? "passed" : "failed";

  cout << "You " << result << " the exam.";

  return 0;
}
```

**Natija:**

```
Enter your marks: 80
You passed the exam.
```

`Uchlik operatoridan qachon foydalanish kerak?`

C++ da uchlik operatori `if...else` ifodalarining ayrim turlarini almashtirish uchun ishlatilishi mumkin.

**Masalan, biz ushbu kodni almashtirishimiz mumkin**

```
#include <iostream>
using namespace std;

int main() {
  // Create a variable
  int number = -4;

  if (number > 0)
    cout << "Positive Number";
  else
    cout << "Negative Number!";

  return 0;
}
```

`Misol uchun shuni ternaryda qilingan variant:`

```
#include <iostream>
#include <string>
using namespace std;

int main() {
  int number = -4;
  string result;

  // Using ternary operator
  result = (number > 0) ? "Positive Number!" : "Negative Number!";

  cout << result << endl;

  return 0;
}
```
`Bu erda ikkala dastur ham bir xil natijani beradi. Biroq, uchlik operatoridan foydalanish bizning kodimizni yanada o'qilishi va toza qiladi.`

**Eslatma:** Agar natija qisqa bo'lsa, biz uchlik operatoridan foydalanishimiz kerak.
Не стой на месте 🤌
Published: 2023-03-15 19:06:26

Если мы не развиваемся, мы деградируем. Нет другого выхода. Оставаться на месте также считается деградацией, потому что мир и технологии продолжают двигаться вперед.

С каждым годом скорость перемен ускоряется, и новые вещи появляются все быстрее и быстрее. Если их не изучать и не применять на практике, то мы быстро станем обладателями устаревших или неэффективных знаний.

Наше развитие зависит от задач, которые мы решаем.

Если задачи слишком сложные и значительно превосходят наши способности, это может вызвать беспокойство и стресс. Такие задачи кажутся нам невыполнимыми, и мы рискуем потерять мотивацию из-за частых неудач.

Простые задачи не мотивируют нас развиваться и могут быть скучными. Они не требуют улучшения наших навыков или изучения чего-то нового. Несмотря на их легкость, они не ведут к прогрессу.

Чтобы развивать новые умения и улучшать имеющиеся, нам нужны задачи, немного сложнее, чем мы можем сделать сейчас. Они заставляют нас выйти из зоны комфорта, но не вызывают сильного дискомфорта.

Только так мы можем оставаться эффективными на долгий срок и постепенно, но регулярно повышать свои навыки.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlf1uei6c6cnmd2cdjq1.png)
What are some of the best ways to learn programming?
Tags: beginners, webdev, programming, tutorial
Published: 2023-03-15 18:58:06

1. **Online tutorials and coding challenges**: Websites like Codecademy, Coursera, and Udemy offer a wide variety of programming courses for beginners. Coding challenges on sites like HackerRank and LeetCode are also a great way to practice and improve your skills.

2. **Reading books**: Classic programming books such as "The Pragmatic Programmer" and "Introduction to the Theory of Computation" can provide a solid foundation in computer science concepts and best practices.

3. **Building projects**: Hands-on experience is key to becoming a proficient programmer. Try building small projects on your own or contributing to open-source projects to gain practical experience.

4. **Participating in online communities**: Join programming-related forums, discussion groups, or social media groups to connect with other programmers, learn from their experiences, and get feedback on your own projects.

5. **Pair programming**: Find a friend or colleague who is also interested in learning to code, and work together on a project. This can be a great way to stay motivated and learn from someone else's perspective.

6. **Practicing regularly**: Consistent practice is key to becoming proficient at any skill, including programming. Set aside dedicated time each day or week to work on coding exercises or projects.
A multi-row fetch cursor in COBOL
Published: 2023-03-15 18:32:40

In COBOL, a cursor is a programming construct that provides a way to retrieve and manipulate data stored in a database. A multi-row fetch cursor is a type of cursor that allows you to retrieve multiple rows of data from a database in a single fetch operation. This can be more efficient than retrieving one row at a time, especially when dealing with large data sets.

To use a multi-row fetch cursor in COBOL, you need to follow these steps:

Declare the cursor: The first step is to declare the cursor that you will use to retrieve the data. This involves specifying the SELECT statement that will be used to retrieve the data, as well as any other parameters that are required.

Open the cursor: Once you have declared the cursor, you need to open it to start retrieving data. This is done using the OPEN statement.

Fetch the data: The FETCH statement is used to retrieve the data from the database. With a multi-row fetch cursor, you can specify how many rows you want to retrieve at once by using the ROWS clause. For example, if you specify ROWS 10, the FETCH statement will retrieve the next 10 rows of data.

Process the data: After you have retrieved the data, you can process it in whatever way you need to. This may involve performing calculations, updating values, or displaying the data to the user.

Repeat: Once you have finished processing the current set of data, you can repeat steps 3-4 to retrieve and process the next set of data. This is done until all of the data has been retrieved.

Here is an example of how to use a multi-row fetch cursor in COBOL:

IDENTIFICATION DIVISION.
PROGRAM-ID. MULTIROWFETCH.
DATA DIVISION.
WORKING-STORAGE SECTION.
01 EMP-RECORD.
   05 EMP-ID          PIC X(6).
   05 EMP-NAME        PIC X(30).
   05 EMP-SALARY      PIC 9(7).
01 SQLCODE            PIC S9(9) VALUE 0.
01 EMP-CURSOR.
   05 EMP-CURSOR-NAME PIC X(10) VALUE "EMP-CURSOR".
   05 EMP-SELECT-STMNT.
      10 PIC X(200) VALUE "SELECT EMP-ID, EMP-NAME, EMP-SALARY FROM EMPLOYEE".
   05 EMP-FETCH-ROWS  PIC S9(4) VALUE 10.
PROCEDURE DIVISION.
MAIN-PROCEDURE.
   OPEN EMP-CURSOR.
   PERFORM UNTIL SQLCODE NOT = 0
      FETCH EMP-CURSOR ROWS EMP-FETCH-ROWS
         AT END SET SQLCODE TO +100
      END-FETCH
      PERFORM PROCESS-EMP-RECORD UNTIL SQLCODE NOT = 0
   END-PERFORM
   CLOSE EMP-CURSOR.
   STOP RUN.
PROCESS-EMP-RECORD.
   PERFORM UNTIL SQLCODE NOT = 0
      DISPLAY EMP-ID EMP-NAME EMP-SALARY
      FETCH EMP-CURSOR ROWS EMP-FETCH-ROWS
         AT END SET SQLCODE TO +100
      END-FETCH
   END-PERFORM.
.
In this example, a cursor named EMP-CURSOR is declared to retrieve data from a table called EMPLOYEE. The FETCH statement retrieves 10 rows of data at a time, which are then processed by the PROCESS-EMP-RECORD subroutine. This process continues until all of the data has been retrieved and processed.

Using a multi-row fetch cursor can significantly improve the performance of your COBOL programs that deal with large amounts of data.