teleren/devto huggingface dataset:
Intercepting network requests in Playwright
Tags: playwright, testing, automation, selenium
Published: 2023-07-20 01:30:25

I recall some time ago that the folks behind WebDriver made their intentions very clear: If an action can be taken in the browser viewport with a mouse and keyboard, they would provide an API for it. Anything else beyond that was merely an afterthought. As testing evolved into a more complex, technically challenging discipline in its own right, the tooling had to meet that demand.

Fast forward to the present day and we now have tools like [WebDriver's BiDi API](https://dev.to/philipfong/using-selenium-webdriver-40-bidirectional-api-fp7), as well as Playwright's support for [network events](https://playwright.dev/docs/network#network-events).

I had described previously that intercepting network requests added to an effective waiting strategy for the DOM, and it still does. Slow network responses combined with very fast interactions in the UI can result in some fairly nasty, difficult-to-troubleshoot race conditions.

But one thing I had failed to mention was this: Ultimately, is that button that you're clicking actually sending the proper request? Playwright allows us to check on that with ease, and adds a nice wrinkle of defensiveness to our tests.

Playwright's documentation is pretty straightforward about this. Set up some promises, go about your [Playwright Actions](https://playwright.dev/docs/input), and then retrieve the result of those promises. Here, we've written a higher order function that can be used throughout our test suite:

```
export const expectRequest = async (page: Page, requests: {url: string, method: string}[], action: () => Promise<void>) => {
  const promises = requests.map(({url, method}) => {
    const predicate = (response: Response) =>
      response.url().includes(url) &&
      response.request().method() === method &&
      response.status() === 200
    return page.waitForResponse(predicate)
  })

  await action()

  return await Promise.all(promises)
}
```
And here's an example of how we would use this helper:

```
const loginRequest = {url: '/auth', method: 'POST'}
const profileRequest = {url: '/profile', method: 'GET}
await expectRequest(page, [loginRequest, profileRequest], async () => {
  await page.getByRole('button', { name: 'Log In' }).click()
})
```

So there we have a pretty simple example of a button click to 'Log In', and we are expecting multiple requests to succeed. A POST request to `/auth`, and a GET request to `/profile`. This is a fairly arbitrary example, but I have come across some areas in our app where this has made a nice positive impact in our tests, and increases our confidence that the frontend and backend are in complete lockstep.

Happy testing!
How to Deploy a Laravel Project to Namecheap Shared Hosting 🚀
Tags: laravel, devops, tutorial, builtbybuilder
Published: 2023-07-20 01:04:46

Hey developers! Ready to take your Laravel project live on Namecheap Shared Hosting? Follow these steps:

1. Prepare your Laravel project by removing unnecessary dependencies and setting file permissions.

2. Compress your project into a zip archive.

3. Access Namecheap cPanel and upload the zip file to the public_html directory.

4. Create a new MySQL database and update the .env file with the database details.

5. Run composer install to install dependencies.

6. Generate a new application key and clear the cache using artisan commands.

7. Update the url key in config/app.php to match your domain name.

8. Test your deployment by visiting your domain.

For the full guide, check out [builtbybuilder.com/blog/laravel-deployment-on-namecheap](https://www.builtbybuilder.com/blog/laravel-deployment-on-namecheap).


Happy coding! 🚀
Prompteer - AI Prompts & Engaging comments
Tags: refinehackathon, ai, prompts, refine
Published: 2023-07-20 00:13:02

## 🧪 What I built

I built a prompt sharing platform where users can share their AI prompts and receive comments

## 🥗  My recipe

- **nextjs**, because a great SaaS needs server side rendering
- **typescript**, to stay safe from the javascript horrors
- **next-auth**, to make authentication with nextjs nice and easy
- **prisma**, to make databases best friends with frontend devs
- **supabase**, to store all the data consumed by the app
- **refine**, to easily handle and manage the app's CRUD operations
- **material-ui**, for a streamlined look and feel


### 🏆 Category Submission:

- Best Overall Project
- Most Visually Pleasing
- Most Technical Impressive
- Best Project built using Supabase as the main data provider for the refine app.
- Best Project built using Material UI as the main UI framework for the refine app.

### 🔗 App Link

https://prompteer.netlify.app/

### 🖼 Video demonstration

{% embed https://drive.google.com/file/d/1kDMl_BBfjXtUEfMrl51pdZE1r6nOyuKv/view?usp=sharing %}

### 🖼 Screenshots

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

View prompt page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3l22grydaaef7ye09spi.png)

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

### 📋 Description 

**Prompteer** is a web app that allows you to share your creative AI prompts and receive feedback through comments, you can also comment on other peoples prompts.

In the Free plan you're allowed to publish prompts containing a title, the prompt itself, choose the AI Model and language written. Upgrading your account the Pro plan unlocks additional fields to write your prompts, such as Parameters and Details.

The app uses OAuth (GitHub or Discord) to sign in new users, and when it's their first sign in, the app automatically creates a stripe customer based on the email from OAuth. After a successful login, the user is presented with a dashboard-like experience provided by the refine framework. Most of the content are built upon the framework so the development went way faster than starting from scratch.

### 🔗 Link to Source Code 

https://github.com/mateusabelli/prompteer

### 📜 Permissive License 

- MIT

## 💭 Background

I watched a tutorial from Javascript Mastery where it showed how to make a similar web app so I wanted to do it on my own, when I started doing the design in Figma I saw the Hackathon and decided to hop try to make this a fully fledged SaaS. Looking back at it, it kind of holds up to my expectations, even though I had to cut a few features due to time constraints.

### 📚 How I built it

refine was great to provide the dashboard-like experience, and I learned a lot of things, I documented most of my progress in my previous post. The tech stack that I used can be seen at the top. Most of my choices didn't had planned reasons, some of them were to just "work" when something else didn't.
The importance of user research in website design
Tags: webdev, codenewbie, learning
Published: 2023-07-20 00:00:58

I cannot overemphasize the importance of user research in website or apps UI design. Not only is it beneficial to the users but it also has a profound impact on the whole design team (Including DevTeam Also), as well as the business as a whole. In this article, I will drive a soft touch into the world of user research and explore why it should be a top priority in UI design in general, while also highlighting the significance of primary and secondary research and the importance of validating resources for trust (Especially now with the AI technology growing).

here the Article Link - https://medium.com/design-bootcamp/the-importance-of-user-research-in-web-design-7a28a412d56
More similarities than differences
Tags: todayilearned
Published: 2023-07-19 23:37:33

July 19, 2023

I already knew that we shared 98% of our DNA with chimpanzees and even a good chunk with a banana.

But **today I learned** that Twitter and Airbnb also share 98% of the same code! It's really interesting how that 2% can make them so different.
Test your skills with AI assistance
Tags: refinehackathon
Published: 2023-07-19 22:55:55

## What I built 

👨‍💻 Dev-Gym is a basic testing platform with a hacker-inspired design, created to help programmers hone their skills with AI-Powered hints. 

### Category Submission: 

Best Project built using Supabase as the main data provider for the refine app.

### App Link

https://dev-gym.vercel.app

### Screenshots 


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


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


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


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

### Description 

🕵️‍♂️ Hacker-Inspired Design: Dev-Gym sports a cool, hacker-inspired design to engage tech enthusiasts.

🤖 GPT-4 Assisted Tests: The coding tests in this prototype are pre-generated manually with the help of the advanced GPT-4 model.

💡 AI-Powered Hints: Dev-Gym integrates AI-driven hints during tests, offering real-time assistance

🔗 Supabase Integration: Dev-Gym is integrated with Supabase, where the data is stored.

📝 Admin Panel: The platform includes a panel where users can add new tests.

### Link to Source Code 

https://github.com/pavelee/dev-gym

### Permissive License 

MIT

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

- Fascinated by AI's transformative power in programmer education. 
- Looking for a positive site of AI

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

The most important, I gained knowledge how to use refine in practice.

Additionally I tried supabase and I like it!

Tech stack: Next.js, Antd UI, Supabase

What else:

- Using Refine built-in integration with Supabase. Really cool!
   - instant integration! wow!
   - Utilizing Refine's hooks for data fetching. In my opinion it's the best part of the framework.
- Admin panel built with generated code
   - Firstly I was a little bit confused, but after tutorial it become clear.
   - it really speed up CRUD job
   - I love idea to copy and adjust code, a lot of flexibility 
- OpenAI integration for AI hints

### Additional Resources/Info

Admin panel is located at path /admin
Scanning and Displaying LiDAR in SwiftUI
Tags: ios, tutorial, opensource
Published: 2023-07-19 22:41:59

I recently started a fun project where I used Apple's LiDAR scanning in my app. Although, it's not meant to fulfill a specific purpose, it was a fun experience, which taught me a lot about ARKit and SceneKit. With VisionOS coming soon, I thought it might be a nice transition, though I'm still using the current available modules. Thought it'd be nice to document my learnings, and put it out there to see if anyone could think of any niche use cases!
https://youtu.be/At6zjsxh9AY 
https://youtu.be/6NP3sHAxMz8

You can find the Github repo here: 
https://github.com/kelvinjou/VirtualShowrooms

Cheers,
Kelvin
Expense Tracker App
Tags: refinehackathon
Published: 2023-07-19 22:36:42

## What I built 
Expense and Income tracker using Supabase and Material UI.

### App Link
[App](https://sample-azure-gamma.vercel.app/)

### Screenshots 
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5gyg5hm6gdxb8g43fc0.png)

### Description 
As a first time user of refine.dev, trying refine was fun and it was maintainable as I go. It was actually reducing the development time compared to vanilla next app.

### Link to Source Code 
[GitHub](https://github.com/lizardkingLK/sample)

### Permissive License 
Apache-2.0 license

## Background
Expense tracker is an app we can save our costs and incomes to not miss anything and spend with caution. This application's goal is to simplify it.

### How I built it
MaterialUI components were refined using scaffolding, custom data provider, and inferencer for understanding components. Database connections and filters were utilized. 

Thank you!
The Art of the Silent Pass: A Fun Look at Fart Movement Patterns
Published: 2023-07-19 22:27:23



Hello Dev Community! Today, we're going to take a whimsical detour from our usual programming topics and explore a humorous, everyday phenomenon: discreetly passing gas while moving through a crowd, often referred to as "crop dusting". We'll use Mermaid.js, a powerful diagramming tool, to illustrate some imaginative "fart movement patterns".

Disclaimer: This is all in good fun and not the usual use case for Mermaid.js or sequence diagrams. Let's dive in!

## 1. The Zig-Zag Zephyr

```mermaid
sequenceDiagram
    participant P as Person
    participant F as Fart
    participant G1 as Group1
    participant G2 as Group2
    participant G3 as Group3

    P->>F: Feel Need to Fart
    Note right of P: Decides to move
    P->>G1: Enter Group1
    F-->>G1: Fart Released (Part 1)
    P->>G2: Move to Group2
    F-->>G2: Fart Released (Part 2)
    P->>G3: Move to Group3
    F-->>G3: Fart Released (Part 3)
    P->>F: Stops Farting
    P->>G3: Exits Group3
```
The Zig-Zag Zephyr involves a person discretely moving through multiple groups in a zig-zag pattern, releasing parts of a fart as they move along.

## 2. The Breezy Boomerang

```mermaid
sequenceDiagram
    participant P as Person
    participant F as Fart
    participant G as Group

    P->>F: Feel Need to Fart
    Note right of P: Decides to move
    P->>G: Walks past Group
    F-->>G: Fart Released (Part 1)
    Note right of P: Makes a U-turn
    P->>G: Walks back through Group
    F-->>G: Fart Released (Part 2)
    P->>F: Stops Farting
    P->>G: Exits Group
```
The Breezy Boomerang entails passing by a group, releasing part of a fart, making a U-turn, walking back through the group, and releasing the rest of the fart.

## 3. The Whirlwind Waltz

```mermaid
sequenceDiagram
    participant P as Person
    participant F as Fart
    participant G as Group

    P->>F: Feel Need to Fart
    Note right of P: Decides to move
    P->>G: Starts circling Group
    F-->>G: Fart Released
    Note right of F: Fart is dispersed in a circular pattern
    P->>F: Stops Farting
    P->>G: Exits Group
```
The Whirlwind Waltz depicts a person discretely circling a group while releasing a fart, creating a circular dispersion pattern.

---

Remember, these are comical and non-traditional uses for sequence diagrams, created for a light-hearted spin on human behavior. If you can think of other fun "movement patterns", feel free to share in the comments!

---
Deploying Code Safely: Protecting Sensitive Data in Your Projects
Tags: security, webdev, beginners, programming
Published: 2023-07-19 22:22:21

Generally, it's not a good idea to deploy code with sensitive information, such as application programming interface (API) keys or personal access token's (PAT's) to GitHub or any other public code repository. By doing so, anyone with access to your GitHub repository can see and potentially misuse that information. This could lead to unauthorized access to your accounts, data breaches, or other malicious activities.

To mitigate these risks, it's important to follow security best practices, including:

- Remove or replace sensitive information: Remove any sensitive information from your code or replace it with placeholders or environment variables.

- Deploy to cloud platforms: Deploying your code on cloud platforms like Amazon Web Services (AWS), Microsoft Azure, Heroku, or Google Cloud Platform (GCP) gives you control over the hosting environment. These platforms often provide secure deployment options and support environment variables to store sensitive information.

For simple projects that don't have sensitive information, it's best to use GitHub for deployment. It's safer to deploy projects with just the front-end (what users see) rather than more complex ones that include both the front-end, back-end, and a database (where data is stored). 

What are your thoughts on this? Do you have any additional tips to reduce security risks? If you have a different viewpoint, feel free to share your thoughts in the comments section.
Helping people from other worlds (places)
Tags: webdev, react
Published: 2023-07-19 22:18:02

> _Silvia The Hedgehog (@silviathehedgehog ) from the future to create this post_

**How can we help people from other worlds?**
There are many ways we can help people from other worlds, depending on their needs and circumstances. One way is to extend a welcoming hand and offer support as they navigate life in a new and unfamiliar environment. This could mean providing language assistance, helping them find housing or employment, or simply being a friendly face they can turn to for guidance and advice. Additionally, we can work to promote understanding and acceptance of different cultures and backgrounds, and advocate for policies that protect the rights and well-being of all individuals, regardless of where they come from.

**What an advice for who want to volunteer to help people from other worlds?**

If you want to volunteer to help people from other worlds, my advice would be to start by doing some research and finding organizations or groups in your community that are actively working to support immigrants, refugees, or other individuals from different cultures. Reach out to these organizations and ask how you can get involved. They may have specific volunteer opportunities available, or they may be able to connect you with individuals who could benefit from your assistance. It's also important to approach this work with an open mind and a willingness to learn about different cultures and experiences. Remember that building relationships and trust takes time, so be patient and persistent in your efforts. Finally, always prioritize safety and respect for the individuals you are working with, and be mindful of any cultural differences or communication barriers that may arise.
The 39th Day of the 100 Days of Code Challenge
Published: 2023-07-19 22:12:27

Hey everyone! As I'm still on vacation, I couldn't do as much as I wanted to. I worked on a project for a client and spent some time debugging a problem related to the concurreny in the real-time transcription app. When the server works on transcribing the audio data, it stops receiving new audio chunks, and then once the transcription is done, the socket is overloaded, the client disconnects and the application doesn't work for longer than 10 seconds. Has to do with the paradigm the transcription process is using (reactive programming) but nothing too serious, already have a few solutions in mind from the debugging session although a separate thread didn't work (which understanding why is beyond me).

Super excited to get back and start constantly working on all this! So many ideas in mind and so excited to work on my existing projects and create new ones!

Happy coding everyone!
Shopify Fulfillment API 404 errors
Published: 2023-07-19 21:37:05

## The Issue
Scripts using old Shopify fulfilling endpoints might encounter 404 errors due to recent API updates. 

---

## The Solution
&nbsp;

### Fetching New IDs
Instead of "**order_id**".
Use "**fulfillment_order_id**" and "**fulfillment_order_line_item_id**". 

Obtain these by sending a request to:
https://myshop.myshopify.com/admin/api/2023-07/orders/{order_id}/fulfillment_orders.json 

#### Response
```json
{
  "fulfillment_orders": [
    {
      "supported_actions": [
        "create_fulfillment",
        "hold"
      ],
      "line_items": [
        {
          "id": "XXXXXXXXXXXX",
          "fulfillment_order_id": "XXXXXXXXXXXX",
          "quantity": X,
          "line_item_id": "XXXXXXXXXXXX",
          "variant_id": "XXXXXXXXXXXX",
          ...
        }
      ],
      ...
    }
  ]
}

```

`fulfillment_order_line_item_id` is the `id` field
`fulfillment_order_id` is `actual_fulfillment_order_id`

Check **supported_actions** to determine if it's fulfillable, look for the key: "**create_fulfillment**".

&nbsp;
### Create Fulfillment Endpoint

```bash
curl -X POST https://myshop.myshopify.com/admin/api/2023-07/fulfillments.json \
-H "Content-Type: application/json" \
-H "X-Shopify-Access-Token: Your-API-key" \
-d '{
  "fulfillment": {
    "message": "Fulfilled!",
    "notify_customer": false,
    "line_items_by_fulfillment_order": [
      {
        "fulfillment_order_id": fulfillment_order_id,
        "fulfillment_order_line_items": [
          {
            "id": fulfillment_order_line_item_id,
            "quantity": fulfillment_order_line_item_quantity
          }
        ]
      }
    ]
  }
}'
```
Transluna.net: A Powerful Tool for Translating JSON Files into Multiple Languages
Published: 2023-07-19 21:19:36

## Introduction
In today's digital age, language translation plays a crucial role in reaching a global audience and creating inclusive user experiences. One powerful tool that facilitates the translation of JSON files into multiple languages is Transluna.net. This blog post will provide a brief overview of the importance of language translation and introduce the features of Transluna.net.

## Understanding JSON Files

JSON (JavaScript Object Notation) files are widely used in web development to store and transmit data. These files have become an integral part of modern websites and applications due to their simplicity and flexibility. In this section, we will delve into what JSON files are and their significance in web development. Additionally, we will provide an overview of the structure and syntax of JSON files.

## The Benefits of Translating JSON Files

Making websites and applications multilingual offers numerous advantages, such as expanding the global reach of businesses and improving user experiences. In this section, we will explore the benefits of translating JSON files. From increased accessibility to enhanced user engagement, the advantages of multilingual web development are vast. We will discuss how translating JSON files can lead to improved user experiences and increased global reach.

## Using Transluna.net
Transluna.net provides an intuitive interface for translating JSON files into multiple languages. In this section, we will provide a step-by-step guide on how to utilize Transluna.net for translating JSON files. We will cover the process of uploading JSON files and selecting target languages. Additionally, we will explore the customization options available on Transluna.net and discuss the translation quality assurance measures implemented by the platform.

To begin the translation process on Transluna.net, follow these steps:

1. Upload your JSON file.
2. Select the source language of the JSON file.
3. Choose the target language(s) you want to translate the JSON file into.
4. Select the desired translation type, such as Google Translate, Bing Translate, AI Translate, or Human Translate.

## Conclusion
Transluna.net offers a powerful solution for translating JSON files into multiple languages, enabling businesses and developers to create inclusive and globally accessible websites and applications. In this blog post, we discussed the importance of language translation in the digital age and introduced the features of Transluna.net. We also explored the benefits of translating JSON files and provided a step-by-step guide on how to use Transluna.net. By following best practices for translating JSON files and integrating them into web development projects, developers can unlock the full potential of multilingual web development.