teleren/devto huggingface dataset:
Selenium:Tool for Web Automation
Tags: selenium, automation, webtesting, automationtool
Published: 2024-03-18 17:44:19

**Introduction**

When it comes to topic of automation , particularly web based automation / testing, selenium is most heard word.

Here, In this post we try to provide simpler explanation of what selenium is, why it is used for web automation and how it interacts with browsers.

**What is Selenium?**
Selenium is open-source automation tool mainly used for automating web applications.

![OPEN_SOURCE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88py1cb9il4ykv4pt2in.gif)

Selenium provides tools/libraries which helps testers to automate browser interactions, user actions and validation of web element.

**Some Popular Selenium Libraries:**

- Webdriver --> acts as interface between script and browser

- Grid --> for parallel execution

- Actions API --> Methods for mouse movements, keyboard actions, drag and drop

- Wait API --> offers wait

**Why we use Selenium for Automation**

Listing down key features of selenium which explains selenium is a go to tool for automation,

- Cross Browser Testing: we can test across different browsers.

![cross-browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yt61f9whhtpvabk6nhc0.gif)

- Platform Independence: Supports different OS

![OS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idzg2h6lpar6h29klf2j.png)

- Language: As selenium accepts programming languages such as Java, Python, JS, Ruby and C# so , based on our need we can use required programming language.

![Language](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nd19frjq8wjwv6xwvhc.png)

- Easy Integration: It is easy integrate with frameworks such as TestNG and JUnit which helps in organizing and reporting.

![Frameworks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x274ta0bttv0xdy2m528.jpeg)

- Parallel Execution: Using selenium grid we can perform parallel execution across different browsers in different OS, which is time and cost effective in terms of testing.

**How Selenium works with browser?**


![FlowChart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkjt0ifjnlnk71r7o69h.png)



1. We create script / program using webdriver commands which gets executed when required.

2. When executed it reaches required browser drivers which starts translating to browser readable.

3. Actions will be performed on browser as mentioned in webdriver commands.

```
Note: Current version of Selenium is Selenium 4
```
**Conclusion**
Selenium is an essential tool for any automation testing project based on web and it has an added advantage to perform testing across different browsers and platforms, greater compatibility with frameworks.
With all these features in open-source is highly valuable.
#Help_Access Control for Master Reseller Model Biz
Published: 2024-03-18 17:15:13

Greetings Everyone,

It's Harshwardhan, I have a non-technical background but currently, I am working on a subscription-based web application with a master reseller model, and I'm seeking advice on how to implement access control effectively. Here is the brief about it:

Subscription-Based Model: Customers subscribe to our web application on a monthly basis, gaining access to various features and resources.
Master Reseller Opportunity: In addition to using the web app for their own business, they can customize the UI, brand name, and logo and even add some features if they want (White Label model) but at the same time customers have the option to become master resellers, that is, they can sell their customized platform to their customers down the line for white labeling. So, basically, I want my customers to do white-label SaaS business among their customer base.

Now, here are my specific questions:



1.) How can I give them access and freedom to customize the app and even add some features without giving them access to the source code or core scripts so that they will remain my subscribers but at the same time run their own business where they can offer a white label features to their customers?

2.) How can I implement access control to ensure that only paying subscribers and authorized master resellers have access to the web application and its features?

3.) Are there any recommended frameworks or libraries for implementing access control and license management in a subscription-based web application?

I would greatly appreciate any insights, recommendations, or resources you can provide on these topics.

Thanks in advance for your help!
Learning AWS Day by Day — Day 9 — Instance Tenancy and Pricing
Published: 2024-03-18 17:14:10

Exploring AWS !!

Day 9:

Instance Tenancy and Pricing:

Shared/Default Instance — can launch anywhere in data center. Public IP address changes.
Dedicated Instance — cannot be shared, we get dedicated instances.

Reserved Instances — Az and instance size flexibility (default tenancy only)
Resource and capacity is reserved until contract period ends, 1–3 years, 75% discount.

Spot Instances — Unused EC2 instances available for lesser price than on-demand price, up to 90% discount. Instances are terminated if spot price increases bid price. Significant price reduction.

EC2 Savings Plan — one or three years saving plan, save up to 72% pricing compared to on-demand. Switch between instances and operating systems during your contract period.

Dedicated Hosts Pricing — dedicated hosts are physical server that provide instance capacity for you. When using savings plan, we can save up to 72% on dedicated hosts.

Pricing:

EC2 — pay as you go
Free Tier — 750 hrs/month (t2.micro single instance)
m5.large — US$0.096/hr
c5.large — US$0.085/hr
r4.large — US$0.133/hr

Data transfer from EC2 to:
S3, glacier, DynamoDB, SES, SQS in same region — FREE
S3, glacier, DynamoDB, SES, SQS in different region — US$0.020/GB
EC2, RDS, RedShift, ElastiCache, ELB, ENI in same AZ — FREE with private IP and US$0.010/GB with public IP
EC2, RDS, RedShift, ElastiCache, ELB, ENI in different AZ — US$0.010/GB

Reserved Instances: 1 to 3 years term
Pricing on-demand us-east-1 region
Reserved instance family — m4, c5 and i3, size — L, XL, 2XL, platform — Windows, Linux.
Standard Reserved Instance — most restrictive, highest discount
Convertible Reserved Instance — most controlled but requires efforts

EBS Pricing:
gp2: US$0.1 per GB/month
snapshot: US$0.05
30 GB is FREE, 1 GB snapshot is FREE.

EFS: 5 GB is FREE


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7dksk3i98ff6t1iftks.png)
JAK'd Carts LLC
Tags: golf, golfcart
Published: 2024-03-18 17:10:28

Name: JAK'd Carts LLC
Address: 405 Parkside Pl Dr, Bridge City, TX 77611
Phone: (409) 670-8110
Email: info@jakdcartsllc.com
Website: https://jakdcartsllc.com
GMB: https://www.google.com/maps?cid=8530154770808490665

JAK'd Carts LLC is a family-owned and operated business located at 405 Parkside Pl Dr, Bridge City, TX 77611. They sell a wide variety of new and used EV golf carts, as well as gas-powered golf carts. They also offer a variety of services, including golf cart repair and maintenance, as well as custom golf cart builds.

JAK'd Carts is committed to providing their customers with the highest quality products and services at the most competitive prices. They are known for their friendly and knowledgeable staff, who are always happy to help customers find the perfect golf cart for their needs.
Simpson's Paradox
Tags: news, data, datascience, career
Published: 2024-03-18 17:00:00

## Simpson's Paradox

In 1973, UC Berkeley faced potential legal action due to perceived gender bias in its graduate school admissions. While the overall admission rates showed a discrepancy, with 44% of male applicants admitted compared to 35% of women, a deeper examination by a hired statistician revealed unexpected findings.

Contrary to initial assumptions, the analysis unveiled that the admissions process actually favoured women over men. This revelation stemmed from a closer look at departmental admission rates, where it was discovered that women had higher acceptance rates than men in 4 out of 6 departments.

Further investigation revealed that women tended to apply to more competitive departments (C, D, E, and F), while fewer applied to departments A and B. This disparity in departmental preferences contributed significantly to the observed gender-based differences in overall admission rates.

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

This case underscores the importance of caution in interpreting data and highlights the phenomenon known as Simpson's Paradox. It serves as a reminder that without careful analysis and consideration of all relevant factors, data can easily be misinterpreted or manipulated to support misleading conclusions.

**[More on Simpson's Paradox here.](https://plato.stanford.edu/entries/paradox-simpson/)**
Understanding Declarative vs. Imperative Programming for Frontend Developers
Tags: webdev, javascript, frontend, react
Published: 2024-03-18 16:52:28

In frontend development, knowing the difference between declarative and imperative programming is key. These two ways of coding influence how we build websites and apps. Let's break them down simply and see how they affect what we create.

--- 

## Imperative Programming

#### What it is
- It tells the computer how to do something step by step.

#### Example
- Think of it like giving direct instructions, like
> "put this element here, change its color to red, then make it bigger."

#### Common use
- Traditional DOM manipulation in JavaScript, where we tell the browser exactly what to do with each element.

#### Pros and Cons
- **Pros:** Fine control over every detail, good for specific optimizations.
- **Cons:** Can get messy and hard to follow as projects grow.

---

## Declarative Programming

#### What it is
- It describes what we want to achieve without worrying about the nitty-gritty of how it's done.

#### Example
- Imagine saying, 
> "I want a list of items displayed like this, and if something changes, update it automatically."

#### Common use
- Modern frameworks like React or Vue.js, where we describe the UI and let the framework handle the details.

#### Pros and Cons
- **Pros:** Cleaner, more readable code, easier to maintain and scale.
- **Cons:** Might not offer as much fine-tuning control in certain situations.

---

### Choosing the Right Approach

#### Considerations
- Think about your project's needs, team preferences, and performance requirements.
- Imperative for fine control, declarative for cleaner, more maintainable code.
JavaScript's Finest: Exploring the Top Libraries of 2024"
Tags: javascript, webdev, react, vue
Published: 2024-03-18 16:49:44


**1. React:**
![react_img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzfykh2fm0mg1g7fkkke.png)
Link: [React](https://react.dev/)
Description: React is a JavaScript library for building user interfaces, maintained by Facebook. It's known for its component-based architecture and virtual DOM, which enables efficient rendering of UI components.

**2. Vue.js:**
![vue_img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u1ng1uxtcqdbyavawhr.png)
Link: [Vue.js](https://vuejs.org/)
Description: Vue.js is a progressive JavaScript framework for building UIs. It's known for its simplicity and ease of integration into existing projects. Vue.js provides reactive data binding and component-based architecture.

**3. Angular:**
![angular_img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoy4ut6le4d12a28dzce.png)
Link: [Angular](https://angular.io/)
Description: Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Developed and maintained by Google, Angular provides a comprehensive solution for building large-scale applications with features like dependency injection, routing, and more.

**4. Express.js:**
![express_img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr6jzpm0buyg89q5n9b0.png)
Link: [Express.js](https://expressjs.com/)
Description: Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It's known for its simplicity and ability to create powerful APIs and web servers quickly.


**5. Redux:**
![redux_img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ronpwp5wz5v6sxcbu5dk.jpg)
Link: [Redux](https://redux.js.org/)
Description: Redux is a predictable state container for JavaScript apps. It's commonly used with React but can be integrated into any JavaScript framework or library. Redux helps manage application state in a predictable way, making it easier to develop and maintain complex applications.

**6. D3.js:**
![d3_img](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79t2ay8jczdfp1dxskhv.png)
Link: [D3.js](https://d3js.org/)
Description: D3.js is a JavaScript library for manipulating documents based on data. It's commonly used for creating interactive data visualizations in web browsers. D3.js provides powerful tools for data-driven document manipulation and is highly extensible.
Those early dev days.
Tags: webdev, beginners, learning, stories
Published: 2024-03-18 16:30:19

Hello everyone. I think we'd all agree, someone's first time learning software development can be a little strange. And certainly, peoples software development learning journeys are as varied as their thumbprints.

Often, there are interesting stories connected to our early dev days. These stories can be helpful to new developers.

For me, the way I got started was a little crazy and spontaneous. One day, on a whim, I just decided to see how hard is was to make a website. I got into WIX and had a very bad experience, but I still wanted to make a website. I wondered how hard it would really be to learn to hard code one, so I started the freeCodeCamp HTML and CSS curriculum. After three days, I decided that I liked this very much, and it was what I wanted to do for a living, and it went from there.

Now I like programming better than frontend, but frontend was where it all started.

How about the rest of you? Would any of you oblige us by posting any of your own "learning to code" stories below as comments?
Attach jwt with fetch for next js 14 server action
Published: 2024-03-18 16:21:06

We're all aware of how crucial JWT is in preventing cross-site API actions. However, dealing with attaching and handling the token every time can become quite cumbersome. That's why I've taken the initiative to enhance the fetch function within Next.js 14. Let's delve into this modification and see how it streamlines our workflow!

Let's create a new file for this updated fetch function and export it as follows:

```
import { cookies } from "next/headers";

const baseURL = process.env.NEXT_PUBLIC_BACKEND_URL;

export async function fetchWithAuth(
  url: string,
  options: RequestInit = {}
): Promise<any> {
  try {
    const token = getTokenFromCookie();

    const headers = new Headers(options.headers);

    if (token) {
      headers.set("Authorization", `Bearer ${token}`);
    }
    const response = await fetch(baseURL + url, { ...options, headers });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const data = await response.json();

    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
}

function getTokenFromCookie(): string | undefined {
  const cookieStore = cookies();
  const tokenAll = cookieStore.get("token");
  return tokenAll?.value;
}

```
When it comes to setting the JWT token from the backend, assuming I'm using Laravel for the API, and setting the cookie for the login route:

```
import { unstable_noStore as noStore } from "next/cache";
export async function Login(data: { email: string; password: string }) {
  try {
    noStore();
    const res = await fetch(`${baseURL}/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        cache: "no-store",
      },
      body: JSON.stringify(data),
    });
    const responseData = await res.json();

    if (responseData.token) {
      cookies().set("token", responseData.token, {
        httpOnly: true,
        expires: new Date("2030-01-01"),
      });
    }

    return responseData;
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}

// HttpOnly ensures security against cross-attack

```
TypeScript Journey: A Beginner's Journey into Typed JavaScript
Tags: typescript, beginners, webdev, javascript
Published: 2024-03-18 16:12:41

**TypeScript: An Overview**
TypeScript is a programming language built on top of JavaScript. Every JavaScript file is a valid TypeScript file, but TypeScript adds some powerful features that enhance the robustness and maintainability of applications.

**What is TypeScript?**
TypeScript addresses the shortcomings of JavaScript by introducing features like static typing. In static typing, variables can be declared with a specific type, such as a number or string. Unlike dynamic typing found in languages like JavaScript, TypeScript provides type checking at compile time.


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

**Benefits of TypeScript**

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

- Static Typing: Enables catching type-related errors early in the development process.
- Code Compilation: TypeScript code is compiled into JavaScript, making it compatible with all browsers.
- Refactoring: Easier code refactoring due to the availability of type information.
- Short-hand Notation: Provides concise syntax for common patterns, improving code readability and maintainability.

**Drawbacks of TypeScript**

- Compilation Step: Requires a compilation step before running the code, adding an extra layer of complexity to the development process.
- Discipline in Coding: Developers need to adhere to TypeScript's typing rules and guidelines, which may require additional effort and discipline.

**Compilation Process**

 To use TypeScript in a web application, the TypeScript code must be transpiled into JavaScript using a TypeScript compiler. This transpilation process ensures that the resulting JavaScript code is compatible with all browsers.
Lunes de música... ¿Qué estás escuchando? 🎵 (18-03-2024)
Tags: music, spanish, discuss, lunes
Published: 2024-03-18 16:09:27

> **"El arte de la música es el que más cercano se halla a las lágrimas y los recuerdos"**
_Oscar Wilde_

La música es parte importante de la vida de la mayoría de las personas y una vida no basta para poder escuchar todas las canciones que quisiéramos o conocer a todos los artistas, solistas o bandas.

Últimamente mis gustos musicales han sido muy estáticos y siento que necesito abrir mis horizontes y poder conocer nueva música interesante. 

Este post es la sexta entrega de una serie semanal que lanzaré todos los lunes para que como comunidad podamos compartir y por qué no conocer nuevas melodías. 🎶

Puedes compartir tus sugerencias usando los *liquid tags* de Dev.to, por ejemplo:

* Para compartir un video desde youtube:
```js
{% youtube dQw4w9WgXcQ %} // dQw4w9WgXcQ es el id del video
```

* Para compartir una canción desde spotify:
```js
{% spotify https://open.spotify.com/track/7GBwTrOpTtsLdJN3Dc0U1C?si=ea737b51f47043b6 %} 
```

Mi sugerencia para esta semana es de la banda estadounidense de indie pop **TV Girl** y su tema **Lovers Rock**.
 
{% youtube j_sG_Juncn8 %}

---

La versión original de este post esta escrito por mi amigo 
@michaeltharrington ve y salúdalo de mi parte con una canción 🎵

{% link https://dev.to/michaeltharrington/music-monday-what-are-you-listening-to-may-23-104p %}

Los respectivos créditos a él por ser tan buena onda. 

{% user michaeltharrington %}

Y dime, ¿qué estás escuchando ahora? Te leo en los comentarios.
"Cachec - no store" Bug Next Js 14
Tags: nextjs, react
Published: 2024-03-18 16:04:29

Recently, I attempted to log in using JWT authentication. However, I encountered an issue where, upon logging in and storing the JWT in a cookie, sometimes the system would return an outdated token. This proved to be problematic as I had already deleted the previous token.

Despite employing techniques such as using a fetch request with no cache, I still encountered unsatisfactory results. Subsequently, I delved into their documentation further and explored potential solutions.

```
`export async function Login(data: { email: string; password: string }) {
  try {
    noStore();//this work as force dynamic and no store
    const res = await fetch(`${baseURL}/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        cache: "no-store",
      },
      body: JSON.stringify(data),
    });
    const responseData = await res.json();

    console.log(responseData);

    if (responseData.token) {
      cookies().set("token", responseData.token, {
        httpOnly: true,
        expires: new Date("2030-01-01"),
      });
    }

    return responseData;
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}`
```



next js doc [here](https://nextjs.org/docs/app/api-reference/functions/unstable_noStore)
Build your own little AWS Console in CDK with Buttonize
Tags: aws, cdk, typescript, javascript
Published: 2024-03-18 16:00:00

We are proud to announce the launch of Buttonize.io, the easiest way to hook up UI components directly to AWS Lambda functions.

Buttonize is a **fully managed** SaaS platform **connected directly to your AWS environment**, providing you with an Infrastructure-as-Code abstraction, such as an **AWS CDK** library with a rich set of **UI components** and actions for building **internal tools** on top of the cloud.

## How Buttonize can help you

Buttonize helps developers and companies using AWS solve the painful problem of internal tooling.

![Buttonize illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfjdo2ufu3kr4qn5ce3s.png)

### Problems with internal tooling

Internal tooling is a perennial problem. We all have these "temporary" tools in our companies that have been around forever with so much tech debt that everybody is afraid to touch the code.

When deciding on internal tooling, companies usually have three options

1. Build the app from scratch - API + auth + frontend + indefinite maintenance
2. Use a drag-and-drop platform, such as Retool - all developers hate no-code tools
3. Create Slack bots - a text interface is sufficient for only a small number of use-cases


![Buttonize meme protect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qdpzekxkqkk8cugbjf9.png)



### Buttonize comes to the rescue

We think these three principles are important when solving business problem via internal tools.

- Minimize future maintenance
- Build it quickly
- Don't reinvent the wheel

Buttonize gives you a way to build and deploy internal apps with tools you already use. We provide you with [CDK Constructs](https://github.com/buttonize/buttonize) that have simple interfaces which allow you to define UI components and connect them to AWS. No need to worry about anything else. Just run `cdk deploy`. That's it.


![Buttonize meme code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08j3zitevn25111n49up.png)



## Demo video

{% embed https://www.youtube.com/watch?v=ureVu5yW3uo %}

---

Join our [Discord](https://discord.buttonize.io) community and let us know how you like Buttonize.

Learn more at [buttonize.io](https://buttonize.io).

---