teleren/devto huggingface dataset:
#DEVDiscuss: What Happened to Web3?
Tags: devdiscuss, discuss, web3
Published: 2023-05-12 20:07:17

Hey Devs, happy Friday 🦥💚

As always, it's been an eventful week in the tech industry. We've got a lot to talk about! And today I want to discuss...**what happened to Web3?**

Today's discussion question comes from this anonymous message in [my inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform?usp=sf_link):

> **What happened to Web3? People seem to be talking about it less, but at the same time, more decentralized apps are appearing. Is that the same thing?**

I know the community is gonna have thoughts on this one! So let's talk about it—share your answer in the comments 👀

---

*Want to submit a question for discussion, or even ask for advice? Visit [Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform?usp=sf_link)! You can choose to remain anonymous.*
Scalability In System Design and Architecture
Tags: webdev, programming, softwareengineering, architecture
Published: 2023-05-12 19:45:11

Scalability is the ability of a system to handle an increasing workload without degrading performance. Software systems must be constructed to be scalable to meet the growing demands of users and the business.

The ability of a software system to manage an increase in workload or user demand without compromising performance or reliability is referred to as scalability in software architecture. It entails building the system in such a way that it can effectively manage increasing volumes of data, traffic, or users.

Scalability is crucial for software systems because as user bases grow or data volumes increase, the system needs to be able to accommodate the additional load without becoming slow or unstable. There are two main types of scalabilities:

Vertical scalability (scaling up): This involves increasing the resources of a single server or machine to handle greater loads. For example, upgrading the CPU, adding more memory, or increasing the storage capacity of a server. Vertical scalability typically has limitations and can become expensive as it requires powerful hardware.

Horizontal scalability (scaling out): This involves adding more machines or servers to distribute the workload across multiple instances. It can be achieved by using techniques such as load balancing, clustering, or distributed computing. Horizontal scalability is often more flexible and cost-effective, as it allows the system to handle the increased load by simply adding more hardware resources.

_**To achieve scalability in software architecture, several principles and techniques can be employed:**_

### Loose coupling: 
Design the system with loosely coupled components that can be independently scaled. This allows for adding or removing modules or services without affecting the entire system.
### Distributed architecture:
Distribute the workload across multiple servers or machines to handle increased demand. This can be done through techniques such as microservices, message queues, or distributed databases.
### Caching: 
Implement caching mechanisms to store frequently accessed data or computations, reducing the load on the system and improving performance.
### Asynchronous processing:
 Use asynchronous processing or event-driven architectures to handle requests or tasks in parallel, improving responsiveness and scalability.
### Auto-scaling: 
Implement auto-scaling mechanisms that automatically adjust the number of resources based on the current workload. This ensures that the system can handle fluctuations in demand without manual intervention.

Scalability is a critical consideration in software architecture, especially for systems that are expected to grow or handle variable workloads. By designing a scalable architecture, developers can ensure that the software system remains performant, reliable, and cost-effective as the demand increases.
SQL Recipe: Ranking Records
Tags: sql, analytics
Published: 2023-05-12 19:41:30

Suppose we want to create a ranking, where the position of each record is determined by the value of one or more columns.

The solution is to use the `rank()` function over an SQL window ordered by target columns.

## Example

Let's rank `employees` by salary:

```sql
select
  rank() over w as "rank",
  name, department, salary
from employees
window w as (order by salary desc)
order by "rank", id;
```

```
┌──────┬───────┬────────────┬────────┐
│ rank │ name  │ department │ salary │
├──────┼───────┼────────────┼────────┤
│ 1    │ Frank │ it         │ 120    │
│ 2    │ Henry │ it         │ 104    │
│ 2    │ Irene │ it         │ 104    │
│ 4    │ Alice │ sales      │ 100    │
│ 5    │ Cindy │ sales      │ 96     │
│ 5    │ Dave  │ sales      │ 96     │
│ 7    │ Grace │ it         │ 90     │
│ 8    │ Emma  │ it         │ 84     │
│ 9    │ Bob   │ hr         │ 78     │
│ 10   │ Diane │ hr         │ 70     │
└──────┴───────┴────────────┴────────┘
```

The `rank()` function assigns each employee a rank according to their salary (`order by salary desc`). Note that employees with the same salary receive the same rank (Henry and Irene, Cindy and Dave).

## Alternatives

We can use `dense_rank()` instead of `rank()` to avoid "gaps" in the ranking:

```sql
select
  dense_rank() over w as "rank",
  name, department, salary
from employees
window w as (order by salary desc)
order by "rank", id;
```

```
┌──────┬───────┬────────────┬────────┐
│ rank │ name  │ department │ salary │
├──────┼───────┼────────────┼────────┤
│ 1    │ Frank │ it         │ 120    │
│ 2    │ Henry │ it         │ 104    │
│ 2    │ Irene │ it         │ 104    │
│ 3    │ Alice │ sales      │ 100    │
│ 4    │ Cindy │ sales      │ 96     │
│ 4    │ Dave  │ sales      │ 96     │
│ 5    │ Grace │ it         │ 90     │
│ 6    │ Emma  │ it         │ 84     │
│ 7    │ Bob   │ hr         │ 78     │
│ 8    │ Diane │ hr         │ 70     │
└──────┴───────┴────────────┴────────┘
```

Note that Alice is ranked #3 and Grace is ranked #5, whereas previously they were ranked #4 and #7, respectively.

## Compatibility

All major vendors support the `rank()` and `dense_rank()` window functions. Some of them, such as MS SQL and Oracle, do not support the `window` clause. In these cases, we can inline the window definition:

```sql
select
  rank() over (
    order by salary desc
  ) as "rank",
  name, department, salary
from employees
order by "rank", id;
```

We can also rewrite the query without window functions:

```sql
select
  (
    select count(*)
    from employees as e2
    where e2.salary > e1.salary
  ) + 1 as "rank",
  e1.name, e1.department, e1.salary
from employees as e1
order by "rank", e1.id;
```

Want to learn more about window functions? Read my book — [**SQL Window Functions Explained**](https://antonz.org/sql-window-functions-book/)

_Follow [**@ohmypy**](https://twitter.com/ohmypy) on Twitter to keep up with new posts_
Modularity in system Design and Architecture
Tags: webdev, programming, softwareengineering, architecture
Published: 2023-05-12 19:31:53

Every software system needs a software architecture since it determines the structure, functionality, and behavior of the system. Given that its maintainability, scalability, stability, and performance are all directly impacted by the design, the software system's success depends on it. We will talk about 12 qualities that are crucial to consider when creating software architecture in this article.

In software architecture, the concept of modularity describes the process of disassembling a software system into smaller, independent components or modules. The system may be readily upgraded or replaced without affecting other components because each module is built to carry out a specific set of tasks.

_**Modularity offers several benefits for software development, including**_:
### Encapsulation: 
Each module can contain all its internal information, which makes updating and maintaining the module simpler. As a result, developers may concentrate on the module's specialized functionality without being concerned about how it interacts with other system components.
### Reusability: 
Modular components can be reused in different parts of the system or other systems. This reduces development time and improves the overall quality of the software.
### Scalability: 
As the size and complexity of a software system grow, modularity makes it easier to manage and maintain. Developers can add or remove modules as needed, without affecting the rest of the system.
### Testing: 
Modular components can be tested independently, which makes it easier to identify and fix bugs. This also reduces the risk of introducing new bugs when modifying or adding new functionality.

Modularity is an essential principle in software architecture that promotes flexibility, maintainability, and scalability. It helps software developers create complex systems that are easier to understand, modify, and maintain over time.
Revamp Your Web Development with Ruby on Rails Channels: Create Dynamic Real-Time Apps with Ease
Tags: rails, ruby, webdev, javascript
Published: 2023-05-12 19:26:01

Web applications have come a long way in recent years, and one of the most exciting developments has been the rise of real-time apps. With real-time apps, users can see changes as they happen, without needing to refresh the page. And when it comes to building real-time apps, Ruby on Rails Channels is the tool you need.

Rails Channels allow you to create real-time communication between the client and the server, using WebSockets. This means that you can create applications that are much more responsive and interactive, without having to resort to constant page refreshes.

One of the most powerful features of Rails Channels is the ability to create "rooms" for different groups of users. This means that you can create chat applications, games, and other interactive experiences where users can interact with each other in real-time.

Another great feature of Rails Channels is the ability to easily integrate with other Rails features, like ActiveRecord and ActionCable. This makes it easy to build complex real-time applications that incorporate a variety of different technologies.

Rails Channels are also highly customizable, allowing you to define your own message formats and data structures. This gives you a lot of flexibility when building real-time applications, and allows you to tailor the experience to your specific needs.

With Rails Channels, you can transform the way you build web applications. Whether you're building real-time chat apps, interactive games, or anything in between, Rails Channels provide the tools you need to create a seamless, responsive, and engaging user experience. So what are you waiting for? Harness the power of Rails Channels and take your web development to the next level!
Get Images with JWT Authorization Headers for <img /> src
Tags: javascript, webdev, tutorial, react
Published: 2023-05-12 19:00:00

When we load an image using the `img` element, we do it like this:

```html
<img src="http://example.com/someimages.png" alt="Example Images" />
```

What happens if the URL `http://example.com/someimage.png` requires authenticated users to access it using authorization headers (JWT Token)? The image will not load because when we load images using the above example, we only send a simple GET HTTP request to the server. This means that the server will respond with a 401 or similar status code to indicate that the resource is not accessible because we didn't send an authenticated request using JWT. Sometimes, not all static assets are public assets.

> I'm not talking about authentication with cookies here because cookies are always sent with every request. In contrast, a JWT token must be set in the Authorization header for every request.

**Then, how we do it??**

The solution is to use `fetch` with Authorization Headers to get the images, then transform it to `Base64` and display it using `img` tag. Let's take the example below, I am using vanilla JavaScript and HTML DOM.

```html
<!DOCTYPE html>
<html lang="en">
  <body>
    <img id="image-with-jwt" src="" alt="" />
    <script>
      const getBase64Image = async res => {
        const blob = await res.blob();

        const reader = new FileReader();

        await new Promise((resolve, reject) => {
          reader.onload = resolve;
          reader.onerror = reject;
          reader.readAsDataURL(blob);
        });
        return reader.result;
      };

      fetch("http://example.com/authenticatedimages", {
        headers: {
          Authorization: "Bearer yourtoken",
        },
      })
        .then(getBase64Image)
        .then(imgString => {
          document.getElementById("image-with-jwt").src = imgString;
        });
    </script>
  </body>
</html>
```

When you run that code, you can check if the `src` attributes in the `img` tags are `Base64` string instead of URL for the image. This solution also works in JavaScript framework, such as react. Here's the example code:

```jsx
const ImagesWithJWT = () => {
  const [imagesString, setImagesString] = useState("");

  const getBase64Image = async res => {
    const blob = await res.blob();

    const reader = new FileReader();

    await new Promise((resolve, reject) => {
      reader.onload = resolve;
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });
    return reader.result;
  };

  useEffect(() => {
    fetch("http://example.com/authenticatedimages", {
      headers: {
        Authorization: "Bearer yourtoken",
      },
    })
      .then(getBase64Image)
      .then(imgString => setImagesString(imgString));
  }, []);

  return <img src={imagesString} />;
};
```

Hope this helps
Nginx likes port 80 (a post-mortem)
Tags: webdev, programming, beginners, devops
Published: 2023-05-12 18:45:36

The following is the incident report for the Nginx connection failure that occurred on _April 3, 2023_. We understand this service issue has impacted our valued developers and users, and we apologize to everyone who was affected.

#### Issue Summary
From 6:30 PM to 7:00 PM WAT, curl requests to our local server on port 80 resulted in connection refused messages. At its peak, the issue affected 100% of traffic to this server. The incident caused a delay in processing critical business operations for some of our users.

#### Timeline (all West African Time)

- 6:25 PM: Configuration change is made by Engineer Daniel without peer review
- 6:29 PM: Nginx is reloaded
- 6:30 PM: Curl request fails, and issue begins
- 6:30 PM: Engineer Pelumi notices connection failure
- 6:50 PM: Engineer Pelumi investigates the issue and identifies the root cause
- 6:55 PM: Successful configuration change rollback by Engineer Pelumi
- 6:59 PM: Nginx restarts begin
- 7:00 PM: 100% of traffic back online

#### Root Cause and Resolution
At _6:25pm_, Engineer Daniel made a configuration change to the nginx configuration file that specifies the ports that the server listens to. The change specified that the default server only listens to requests made on port 8080. This change meant that requests made by our developers and users on port 80 would return connection failure. The configuration change was made without peer review, and this contributed to the issue.

At _6:29pm_, nginx was reloaded to apply the configuration changes, and a minute later, curl requests on port 80 returned connection failure. Engineer Pelumi who made the curl request and noticed the connection failure investigated the issue and identified the problem at _6:50pm_. Engineer Pelumi rolled back the configuration change and made changes to the configuration file to listen on port 80. The web server was reloaded to apply the changes, and upon another curl request, the connection was restored, and the expected output was returned by the server.

#### Corrective and Preventative Measures
We have taken the following corrective and preventative measures to ensure that similar incidents do not occur in the future:

- We have implemented a peer review process for all configuration changes made to production systems.
- We have added additional monitoring and alerting mechanisms to detect configuration issues and notify the appropriate team members in a timely manner.
- We have updated our incident response procedures to ensure that all team members are familiar with the steps to take in the event of a configuration issue.

We apologize once again for the inconvenience caused, and we remain committed to providing our users with the best possible service.
Serverless image optimization, the lazy way
Tags: performance, seo, serverless, typescript
Published: 2023-05-12 18:43:13

I built site-wide image optimization for our website syncwith.com because I realized our images were often pretty large (impacting page load times), and I'm lazy and hated optimizing images manually, sometimes forgetting, and worrying it wasn't a great solution.

After some trial and error, I landed on a solution using a Cloudflare worker in front of our website, that seamlessly on-the-fly optimizes every image on our site: scaling them down for tablet and mobile, serving them in modern (tiny) formats when supported, and more.

Write up: https://syncwith.com/blog/website-image-optimization-cloudflare-cloudinary

Code: https://github.com/syncwith/cf-worker-images
Writing API in Nim
Tags: webdev, beginners, api, nim
Published: 2023-05-12 18:19:51

## Why Nim 🤔
Nim is powerful programming language that compiles into C, Cpp, ObjC and JS.

You can install it [here](https://nim-lang.org/install.html)

## HappyX ✨
HappyX is an asynchronous web framework, written in Nim.
[Source code](https://github.com/HapticX/happyx)
We'll work with it.
```bash
nimble install happyx
```

## Getting Started 👔
You should create project. Choose project name and mark project type as `SSG`.
```bash
hpx create
```

You should move into project folder after this.
```bash
cd PROJECT_NAME/src
```

## Development 🛠
Let's launch project.
```bash
nim c -r main
```

Also you can use flags `-d:httpx` and `-d:micro` to use alternative HTTP servers.


Let's change `main.nim`. For it you should open `src/` folder and open `main.nim` file. You will see 👀
```nim
import happyx

serve("127.0.0.1", 5000):
  get "/":
    "Hello, world!"
```

Rewrite this 👨‍🔬
```nim
import happyx

# Go to http://127.0.0.1:5000/ 👨‍🔬
serve("127.0.0.1", 5000):
  # Assignment counter
  var counter = 0

  # You can open / in your browser and see result 🍍
  get "/":
    inc counter
    # Return string
    "counter = {counter}"

  # You can open /upd or /upd100 in your browser and see result 🍍
  get "/upd{i?:int}":
    counter += i
    "counter = {counter}"
```

And recompile 🛠

That's all! Good Luck! 🙂

Also you can read about [SPA in Nim](https://dev.to/ethosa/writing-single-page-application-with-nim-mg8)
How to compare dates in PostgreSQL
Tags: postgres, database, dbforgestudio, dbforge
Published: 2023-05-12 17:43:33

This article provides a brief overview of PostgreSQL date data types and discusses how to use the WHERE and BETWEEN clauses, DATE_TRUNC and data type formatting functions, and the RANGE type to compare dates in PostgreSQL - https://www.devart.com/dbforge/postgresql/studio/compare-dates.html

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfmm3m5h0crkcfaaj44q.png)
pyaction 4.19.0 Released
Tags: github, docker, python, showdev
Published: 2023-05-12 17:33:26

## TL;DR

I just released [pyaction](https://github.com/cicirello/pyaction) 4.19.0, a [Docker container with Python, git, and the GitHub CLI](https://dev.to/cicirello/pyaction-a-docker-container-with-python-git-and-the-github-cli-930).


## Changelog 4.19.0 - 2023-05-12

### Changed
* Bumped GitHub CLI to 2.29.0.


## Current Version List

This latest release of pyaction includes:
* Python 3.11.3
* [GitHub CLI 2.29.0](https://github.com/cli/cli/releases/tag/v2.29.0)
* git 2.30.2
* curl 7.74.0
* gpg 2.2.27



## More Information

For more information, see my earlier post about pyaction here on DEV, as well as pyaction's GitHub repository.

{% link https://dev.to/cicirello/pyaction-a-docker-container-with-python-git-and-the-github-cli-930 %}

{% github cicirello/pyaction %}



## Where You Can Find Me

Follow me [here on DEV](https://dev.to/cicirello) and on [GitHub](https://github.com/cicirello):

{% user cicirello %}

Or visit my website:

{% embed https://www.cicirello.org/ %}
Time Track Chrome Extension
Tags: githubhack23, chromeextension, javascript, html
Published: 2023-05-12 17:32:26

## What I built

I built a Time Tracker Chrome Extension that helps users track and manage the amount of time they spend on websites. The extension allows users view the time, website, the date they visited the website and they can delete those data.

### Category Submission:
Wacky Wildcards

### App Link
Not published.

### Screenshots 

![Time track](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ma8pv4l63h841t2mvys.png)

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

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


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


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


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

### Description

The Time Tracker Chrome Extension is a Chrome browser extension that tracks the time you spend on websites and helps you stay focused and productive. 

### Link to Source Code
[Link to source code](https://github.com/AliSinaYOusofi/TimeTrack) 

### Permissive License
The Time Tracker Chrome Extension is licensed under the MIT License.

## Background (What made you decide to build this particular app? What inspired you?)

I decided to build this extension because I noticed that I was spending a lot of time on unproductive websites and wanted a way to monitor my activity and stay accountable. I also wanted to develop my skills in building browser extensions and learn more about the Chrome extension ecosystem.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I built the Time Tracker Chrome Extension using HTML, CSS, and JavaScript. I utilized GitHub Actions to automate the build and deployment process, and GitHub Codespaces to develop and test my code in a cloud environment. Along the way, I learned about browser extension development, Chrome extension APIs, and best practices for publishing and promoting browser extensions.

### Additional Resources/Info

For more information about the Time Tracker Chrome Extension, please see the README.md file in the GitHub repository.
📝 Ansible for Blue Team - Use Cases💥
Published: 2023-05-12 17:06:04



🟢  FREE Resources
📌 FREE COURSE - Security Analyst Career - 90 days Blueprint
🔗 https://lnkd.in/de_ZVvQc
📌 Zero to CyberHero: Security Analyst Career Guide 
🔗 https://lnkd.in/dC-nkQfu

🟢 Pre-requisites
📌 Basics of Ansible in 10 points https://lnkd.in/diZv4cei
📌 Ansible Security Ecosystem https://lnkd.in/d9KBWJiB


🟢 Ansible Popular Use Cases(Playbooks)
📌 Ansible for Cisco ASA https://lnkd.in/dwGPVvtE
📌 Ansible for CyberArk https://lnkd.in/d84bnCyv
📌 Ansible for IBM QRadar https://lnkd.in/dRYK8gvQ
📌 Ansible for Palo Alto Networks https://lnkd.in/dHxsUDJ2
📌 Ansible for Splunk https://lnkd.in/dGTGu6vT
📌 Ansible for Snort IPS https://lnkd.in/dbzhPyww
📌 Ansible for Barracuda WAF https://lnkd.in/drUpNNpS