teleren/devto huggingface dataset:
How keyshade employs the use of sockets in distributed environment
Tags: webdev, systemdesign, javascript, programming
Published: 2024-05-06 17:30:21

Any web application that wants to integrate real-time responsiveness into their operations, will surely use web sockets in some way or the other. Socket programming is, nonetheless, difficult to implement, hence a library of softwares exist to ease our life a little bit.

But there are scenarios when you can't use these tools due to the lack of flexibility, and you need to manually write your socket code. 

We were challenged with a similar problem at keyshade!

## The problem

At the very core of our project, we have real-time notifications to client applications. This means, if your application is configured with keyshade, it will receive live updates regarding changes that happen in your configurations. This implies that your application will need to maintain a socket connection to our servers, which, by no means, is feasible (even if possible) to externalize our sockets. And so, our sockets are home baked.

But, the plot thickens further!

## Adding to the problem

But before we could implement this, we were met by yet another (major) blocker. Consider this scenario:

![websocket-flow-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1429maa08jgr2k3debz.png)

We are having an API cluster that has 3 instances. This cluster sits behind a load balancer, through which all connections are multiplexed (which I have dropped deliberately to reduce complexity). 

In this case, your client application (where you want to get live configuration updates) has connected to `Server A`. But, when you are making changes, they are sent to `Server C`. 

This raises the concern about the scalability of web sockets in a distributed environment. As you can infer, sockets that are connected to `Server A` won't receive any updates from `Server C`. 

This brings us to our next section: the solution.

## The solution

After spending an entire day searching for the correct solution, I found none. There was not a single way on that I could "share" socket connections among various servers. So, we brought **Redis' PubSub** into the picture.

![redis pubsub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iha7ev973yfjt5bvnefs.png)

The very fundamental of this approach was this: whenever a server started up, we would make it register to the `change-notifier` topic of Redis.
```typescript
async afterInit() {
  this.logger.log('Initialized change notifier socket gateway')
  await this.redisSubscriber.subscribe(
    'change-notifier',
    this.notifyConfigurationUpdate.bind(this)
  )
}
```

Next up, whenever a configuration's (secret or variable) value was changed, we would push an even to this channel:
```typescript
await this.redis.publish(
  'change-notifier',
  JSON.stringify({
    environmentId: variable.environmentId,
    name: variable.name,
    value: dto.value,
    isSecret: false
  })
)
```

This flow allowed us to achieve an architecture that is both scalable and ensures high availability!
User permission angular
Published: 2024-05-06 17:30:07

when we have user permissions state management written on  "subject in a service" 
pattern,and we want  to set permisions on our application

1.creating guard and return true or false according permision state

2.in routing activating 'canActivate' guard, 

3.what if i want to hide particular page name in routing the user has not permit
on it and i do not want to use TPL line NgxPermissionsGuard? 

whould it be possable to define permitions page view like that? 


 path: 'clients',
        data: {
            mode: 'clients',
            permitions: {
                only: [permitionGuard],
            }
        },
        loadChildren: () => {
            return import('./features/clients/feature/clients.routes').then((m) => m.routes);
        },
        canActivate: [permitionGuard],
Learning AWS Day by Day — Day 57 — Amazon Simple Email Service
Tags: aws, cloud, cloudcomputing, beginners
Published: 2024-05-06 17:25:03

Exploring AWS !!

Day 57

Amazon Simple Email Service

Cloud based email provider that can integrate into applications for high volume email automations. No matter for what use case are you sending the mails, like business mails, marketing emails or newsletter emails, you only have to pay for what you use. It is a tool that also supports various deployments like dedicated, share or owned IP addresses.

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

Deliver high volume email campaigns and manage incoming mails at scale.
Reach more customers’ inboxes as a trusted sender.
Stay compliant with HIPAA and FedRAMP.

Automate transactional emails
Keeping customers updated by sending automated emails, such as purchase or shipping notifications, order summary or pricing details.

Deliver marketing emails globally
Tell your customers about your latest deals, discounts, newsletters all around the world.

Send timely notifications to customers
Send daily reminders or your deals which start at particular timings, like Prime sale at 12 pm, to engage your customers with your products or services.

Send bulk email communications
Track results using configuration sets to deliver emails or announcements to large set of users or customers.

How it works?

lets you reach your customers without on-prem SMTP (Simple Mail Transfer Protocol) email server using SES API or SMTP interface.

Customers using SES:
Amazon — sends billions of emails to users per year, related to products and services they offer
Netflix — increases email deliverability and sender scores
Duolingo — sends daily practice emails and notifications to over 300 million users
Reddit — drives engagement with users by sending emails globally
AWS Well-Architected Framework: A Guide to Cloud Excellence
Tags: wellarchitected, aws
Published: 2024-05-06 17:12:16

****What is AWS Well-Architected Framework?
AWS Well-Architected Framework is a set of best practices and guidelines for building and maintaining high-quality cloud applications. It helps cloud architects and developers to evaluate their architectures against five key pillars: operational excellence, security, reliability, performance efficiency, and cost optimization. By following the principles and recommendations of the framework, you can ensure that your cloud solutions are well-designed, well-implemented, and well-managed.

****What are the six pillars of AWS Well-Architected Framework?
The six pillars of AWS Well-Architected Framework are:

**1. Operational excellence**: This pillar focuses on how to run and monitor systems to deliver business value and continuously improve processes and procedures. It covers topics such as operational readiness, change management, incident response, and feedback loops.
**2. Security**: This pillar focuses on how to protect information, systems, and assets while delivering business value. It covers topics such as identity and access management, data protection, infrastructure protection, detective controls, and incident response.
**3. Reliability**: This pillar focuses on how to ensure that a system can recover from failures and meet its availability requirements. It covers topics such as fault tolerance, scalability, resilience, and backup and restore.
**4. Performance efficiency**: This pillar focuses on how to use computing resources efficiently to meet system requirements and maintain that efficiency as demand changes and technologies evolve. It covers topics such as resource selection, resource optimization, caching, and scaling.
**5. Cost optimization**: This pillar focuses on how to avoid unnecessary costs and get the most value out of your cloud spending. It covers topics such as cost-effective resource selection, cost-aware design, cost monitoring and control, and cost optimization over time.
**6. Sustainability**: This pillar focuses on how to reduce the environmental impact of your cloud solutions and contribute to social good. It covers topics such as energy efficiency, carbon footprint, waste reduction, and social responsibility.

****How to use AWS Well-Architected Framework?
You can use AWS Well-Architected Framework to assess your current or planned cloud architectures, identify areas of improvement, and implement best practices. You can also use AWS Well-Architected Tool, a free service that helps you review your architectures and provides guidance and resources to improve them. Additionally, you can leverage AWS Well-Architected Partner Program, a network of qualified partners (Teleperformance) who can help you apply the framework and optimize your cloud solutions.

Please comment if you think its worth mentioning and share with the community.

Thanks for reading!
CSS tabla con filas y columnas fijas
Published: 2024-05-06 17:05:56

```html
<div class="table-sticky">
  <table>
  </table>
</div>
```

```css
.table-sticky {
    overflow-y: auto;
    max-height: 95vh;
}

.table-sticky table {
    table-layout: fixed;
    position: relative;
}

.table-sticky th {
    position: sticky;
    top: 0;
}

.table-sticky th:nth-child(1) {
    z-index: 1;
}

.table-sticky th:nth-child(1),
.table-sticky td:nth-child(1) {
    position: sticky;
    left: 0;
    background-color: white;
}

.table-sticky th,
.table-sticky td {
    background-color: white;
}
```
3. Features and Functionality of Omegle Alternative Sites
Tags: onlin
Published: 2024-05-06 17:05:27

Text Chatting Options
 

Most Omegle alternatives offer text-based chat options, allowing you to engage in conversations through messages. Whether you're a fan of quick-fire banter or prefer to take your time crafting literary masterpieces, text chatting provides a versatile platform for your communication [chathun ](https://talkwithstranger.com/free-chat-rooms/omegle-alternative-stranger-chat-site).

 

3.2 Video Chatting Capabilities
 

For those who prefer a more face-to-face experience, many Omegle alternatives also offer video chatting capabilities. Now you can see the expressions, reactions, and occasional weird background decor of the strangers you chat with. It's like having your own personal talk show, except you're both the host and the guest.
Arc Browser is a game changer!
Tags: arcbrowser, webdev, productivity, recommendation
Published: 2024-05-06 17:01:32

## Why Arc?
After using Chrome for around 8 years I switched to [Arc](https://arc.net/) browser & I love it! Arc browser is based on [Chromium](https://www.chromium.org/Home/) which means you can use Chrome's extensions in Arc without a problem. Currently, it's available for Mac & Windows 11 (hot released).
It's faster, more beautiful, and user-friendly & also if you're new to Arc it's easy to migrate to Arc from other browsers such as Chrome with just one click.

![Arc browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79y3dof8pnet1719dxr8.png)

I love vertical tabs 'cause it's so comfortable compared to horizontal tabs. Also, it's highly customizable, you can customize your own Arc. If you have multiple devices Arc has a sync feature & you can have Arc profiles.

![Arc sync screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6air4jpfytkvvl3xe4yp.png)

As a full-stack web developer, I really hate Apple's Safari browser, probably [every web developer hates it](https://www.reddit.com/r/webdev/comments/fyo5zj/safari_sucks_and_i_hope_it_dies_out_soon/) :P, so we have Chrome which is famous for "eating" RAM

![Chrome ram eater](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/miy75g6v54im9xin0ple.png)

and Internet explorer of course (R.I.P).

![Internet explorer rip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwq4xjgynhh5efd4io1o.png)

Firefox? Are you Linux user? You can say "I use Arc btw" after using Arc (browser)...

Arc has many features & it's completely free. 
[Just download Arc now & try it yourself
](https://arc.net/gift/7032756c)
Unraveling the Power of Lists in Python: A Comprehensive Guide for Developers
Tags: webdev, python, beginners
Published: 2024-05-06 16:59:07

Python's list data structure is a versatile and fundamental tool that lies at the heart of many programming tasks. Its simplicity and flexibility make it an indispensable asset for developers across various domains. In this article, we'll embark on a journey to explore the ins and outs of lists in Python. Whether you're a novice programmer or an experienced developer, this guide will provide you with a comprehensive understanding of lists and how to harness their power effectively.

1. Understanding Lists: The Building Blocks of Python

Lists in Python are ordered collections of items, allowing for dynamic storage and manipulation of data. They can hold elements of different data types and are declared using square brackets []. Let's start by exploring how to create and manipulate lists:

# Creating a list

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39vue559fqvgnjuu8su7.png)
# Accessing elements

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b2akwgkjya6w8ps4mt7.png)
# Modifying elements

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




2. Essential List Operations and Methods

Python provides a plethora of built-in operations and methods to work with lists efficiently. Let's explore some of the most commonly used ones:

- Appending Elements: **append()** method adds an element to the end of the list.
- Extending Lists:** extend()** method adds elements from another list to the end of the current list.
- Inserting Elements:** insert()** method inserts an element at a specified position.
- Removing Elements: **remove()** method removes the first occurrence of a specified value.
- Popping Elements:** pop()** method removes and returns an element at a specified index.
- Indexing and Searching: **index()** method returns the index of the first occurrence of a specified value.
- Sorting:** sort()** method sorts the elements of the list in ascending order.
- Reversing: **reverse()** method reverses the order of the elements in the list.
Here's a practical example demonstrating some of these operations:


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


3. Practical Applications of Lists

Lists find applications in various programming scenarios, such as data processing, algorithm implementation, and user interface development. Whether you're building a simple to-do list application or implementing complex data structures, lists serve as a versatile tool to accomplish your programming tasks efficiently.
Algorithmic Detection of TVEC Content
Tags: web3, ai, tvec, machinelearning
Published: 2024-05-06 16:52:12

Much of my research is currently focussed on detecting terrorist and extremism content at scale and within a robust human rights framework. In particular, I am interested in the use of TVEC evasion tactics which bypass exists safeguards on major platforms and encrypted messaging apps. You can read more about this work here:

https://gnet-research.org/2022/10/31/extremists-are-seeping-back-into-the-mainstream-algorithmic-detection-and-evasion-tactics-on-social-media-platforms/
How the web works
Tags: webdev, javascript, beginners, programming
Published: 2024-05-06 16:49:52

---
title: How the web works
published: true
description: How the Web Works is my attempt to codify my knowledge about the web in easy-to-digest installments.
tags: webdev,javascript,beginners,programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afeuwue7cuj1vx8100i2.png
canonical_url: https://howthewebworks.substack.com/p/how-the-web-works
# Use a ratio of 100:42 for best results.
# published_at: 2024-05-06 16:41 +0000
---

If you like what I'm doing with How the Web Works, please give this post a ❤️ and 🔖 to help others find it! Thank you!

---


After my first couple installments of How the Web Works, I received a great suggestion to structure my articles to build off of each other. Based on that feedback, I created the following outline showing topics and their dependencies:

![How the web works flowchart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afeuwue7cuj1vx8100i2.png)

The way this diagram works is the lines represent dependencies: I generally don’t want to introduce a topic until I have covered any topic(s) pointing to it. For example, I wouldn’t write about client-side programming until I write about the web client.

Whether or not you feel like you know all of these topics, none of them, or somewhere in between, I think we’re going to learn quite a bit by going through this structured approach!

Also, I’m sure the list and structure isn’t perfect—but I think it’s a good start! Please let me know any suggestions you might have in the comments.

---

Note that this is cross-posted from my Substack! I would love if you wanted to subscribe there to receive updates over email:

[Subscribe to the newsletter](https://howthewebworks.substack.com/)
Exploring Spring Framework, Spring MVC, and Reinforcing Core Java Concepts
Tags: java
Published: 2024-05-06 16:36:24

Hey Dev.to community! Today, I delved into the world of Spring Framework, Spring MVC, and revisited some core Java concepts, and I'm eager to share my insights with you all:

Spring Framework: Explored the foundational concepts of the Spring Framework, including Dependency Injection, Aspect-Oriented Programming, and Inversion of Control. Discussed how Spring simplifies Java enterprise development and improves modularity and testability.
Spring MVC: Dived into Spring MVC, a robust web framework within the Spring ecosystem. Explored its architecture and key components, such as controllers, models, and views, and how it streamlines the development of web applications.
Reinforcing Core Java Concepts: Brushed up on core Java concepts to strengthen the foundation, including object-oriented programming principles, exception handling, multithreading, and collections framework. Revisited Java fundamentals to better understand advanced concepts in Spring.
Overall, today's deep dive into Spring Framework, Spring MVC, and Core Java has equipped me with valuable knowledge and skills for building enterprise-grade applications. Excited to continue exploring and mastering these technologies! #SpringFramework #SpringMVC #Java #LearningJourney
Understanding CSS Cascade, Specificity, and Selectors
Published: 2024-05-06 16:48:10

Cascading Style Sheets (CSS) plays a vital role when it comes to improving the visual aspect of a website. To have an understanding of CSS, one needs to grasp the following concepts: Cascade, Selector and specificity.

## 1. Cascade

CSS cascade has to do with determining the final styles that will be applied to an element. This style can be affected by:
​The styles applied by the author to the document.

​The default style applied by the browser. The styles applied by the users themselves.

Understanding CSS cascade will help a web developer know about what style will affect which and it is a first step to understanding specificity and selector.


## 2. Selectors

CSS selector are used to select elements you want to style. CSS has are different means of selecting specific element such as:

- Element selectors
Target all instances of a particular HTML element.

```CSS
p {
   font-size: 16px;
}
```

- Class selectors: Target elements with a specific class attribute.

```CSS
.blueText {
   color: blue;
}
```

- ID selectors:Target a single element with a specific ID attribute.

```CSS
#uniqueID {
   font-weight: bold;
}
```

- Attribute selectors: Targets elements with specific attributes.

```CSS
input[type="text"] {
   border: 1px solid #ccc;
}
```

- Pseudo-classes and pseudo-elements: Target elements based on their state or position.

```CSS
a:hover {
   text-decoration: underline;
}

p::first-letter {
   font-size: 150%;
}
```

## 3. Specificity
CSS specificity has to deal to what particular style is applied and if there are more than one style targeting a particular element, what style takes precedence. Specificity on CSS has its hierarchy which is used to calculate which style should be applied. 

These hierarchy are:

- Inline styles 
```CSS
/* Inline style */
<p style="color: red;">This text is red.</p>
```

- ID selector styles 
```CSS
/* ID selector */
#uniqueID {
   color: blue;
}
```

- Classes and pseudo-classes selector styles 
```CSS
/* Class selector */
.blueText {
   color: blue;
}
```

- Element selector 
```CSS
/* Element selector */
p {
   color: green;
}
```

What this means is that if the inline styles is present, it will be applied. If it is not, the ID selector styles will be applied and if it is not present then the browser will look out if there is a class selector style is applied. And on and on.

## Conclusion 

Understanding cascade, selector and specificity as a web developer is the key to proficient in the world of CSS. It helps make your code clean, resolve conflict in styles and makes your code maintainable and understandable. To master these concepts is to making your CSS life less a struggle.


Enjoyed what you read and would like to connect? How about we take the conversation on social. You can connect with me on [X(formerly Twitter](https://twitter.com/obika_viola)), [LinkedIn](https://www.linkedin.com/in/onyinyechi-obika) and [Facebook](https://web.facebook.com/viola.obika.1/)

Likes and comments are highly appreciated 😊
Unleash Your Inner Strategist: Build & Play Connect Four in Python!
Tags: python, computerscience, gamedev, git
Published: 2024-05-06 16:42:18

**Introduction:**

Do you crave a classic strategy game experience without the need for fancy hardware? Look no further! In this post, I'll introduce you to my Python program that lets you play the beloved Connect Four against a friend. This project stemmed from a desire to create a simple yet engaging game using Python's versatility. Whether you're a seasoned programmer or just starting your coding journey, this project is a perfect way to practice logic, decision-making, and core Python functionalities.

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

**Description of the Code:**

The core functionality of this program relies on Python's built-in libraries like random and keyboard.  We use random to determine who goes first and keyboard allows players to interact with the game by entering their desired column for their move. The game board itself is represented as a 2D list, where each element represents a cell and can be empty or hold a player's symbol ('X' or 'O'). The program employs functions to handle various aspects of the game, including displaying the board, validating player moves, checking for a winner or a draw, and switching between players.

[Connect_Four_Game-Terminal_Version - GitHub repository
](https://github.com/Medo-ID/Connect_Four_Game-Terminal_Version)
**Conclusion:**

This Connect Four program in Python is a fun and educational project for anyone interested in exploring game development and strategic thinking.  Feel free to customize the code by adding features like difficulty levels, AI opponents, or visual enhancements.  Share your creations and challenge your friends to see who reigns supreme in the world of Connect Four!