teleren/devto huggingface dataset:
How To Fix - CORS Error while uploading files on Cloudflare R2 using presigned URLs.
Tags: node, cors, cloudflare, r2
Published: 2022-11-14 13:55:50

This post was originally posted [here](https://ehtesham.dev/blog/how-to-fix-cors-error-while-uploading-files-on-cloudflare-r2-using-presigned-urls) at my blog.

_[Cloudflare R2](https://www.cloudflare.com/en-gb/products/r2/) Storage allows developers to store large amounts of unstructured data without the costly egress bandwidth fees associated with typical cloud storage services._

While using R2 to upload files with presigned URLs, I started getting the following CORS issue in my browser console:
_"Access to fetch at '<r2-url>' from origin http://localhost:3000 has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."_

## Here is how I solved it using aws-sdk for js V3:
Create an empty node project and install aws-sdk for js v3.

```
mkdir r2-cors && cd r2-cors
pnpm init
pnpm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
touch cors.js
```

Add `type: "module"` into your `package.json` file.

Next, copy and paste this snippet into cors.js and replace the credentials from your Cloudflare R2 dashboard. Refer [here](https://developers.cloudflare.com/r2/data-access/s3-api/tokens) to create the tokens.

```
import { PutBucketCorsCommand, S3Client } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: "auto",
  endpoint: `https://${CF-ACCOUNT-ID}.r2.cloudflarestorage.com`, //TODO: replace
  credentials: {
    accessKeyId: `${ACCESS-KEY}`, //TODO: replace
    secretAccessKey: `${ACCESS-SECRET}`, //TODO: replace
  },
});

async function main() {
  const response = await s3Client.send(
    new PutBucketCorsCommand({
      Bucket: "your-bucket-name", //TODO: replace
      CORSConfiguration: {
        CORSRules: new Array({
          AllowedHeaders: ["content-type"], //this is important, do not use "*"
          AllowedMethods: ["GET", "PUT", "HEAD"],
          AllowedOrigins: ["*"],
          ExposeHeaders: [],
          MaxAgeSeconds: 3000,
        }),
      },
    })
  );
  console.dir(repsonse)
}

main();
```


Then run the script with node:

```
node cors.js
```

If everything works well, you should see the following logged in the console:

```
{
  '$metadata': {
    httpStatusCode: 200,
    requestId: undefined,
    extendedRequestId: undefined,
    cfId: undefined,
    attempts: 1,
    totalRetryDelay: 0
  }
}
```

And that's it, your CORS issue should be resolved now.

If you have any questions or just want to connect, follow me on [Twitter](https://twitter.com/ehteshamdev).
Automate One Time Password (OTP) using Cypress
Tags: testing, webdev, javascript, tutorial
Published: 2022-11-14 13:52:27

Automating One Time Password (OTP) is always a bit challenging as you need to work with a third-party service to send/receive messages. Let's take a look at how we can do that using Cypress ...

### ⚙️ Dependencies

- [Cypress](https://cypress.io/): browser automation framework (can be replaced with any other JS browser automation framework)
- [Receive SMS](https://receive-smss.com/): to generate a temporary phone number and receive SMS. Note: this can easily be replaced with a paid service such as Twilio, SMSArc, etc..
- [GitHub](https://github.com/): example site to test OTP on

---

### In this video, we will cover step-by-step how to automate OTP using Cypress:

{% youtube iiGy69gMeAw %}

**👩🏻‍💻 Access the source code [here](https://subscribepage.io/otp-cypress).**

---

**To learn more about Cypress, check out my free Cypress tutorial series here -**

https://www.youtube.com/watch?v=krpKuSqQ0XM&list=PL6AdzyjjD5HAr_Jq1hwpFUIO49uyBZ9ma

---

👩🏻‍💻 It's time to advance your career by joining the SDET-U Academy today 👇🏻
[Join Academy](https://bit.ly/3Vcqv69)

📧 Subscribe to my [mailing list] (https://automationbro.com/mailing-list) to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well - 
- [Twitter](https://twitter.com/automationbro)
- [LinkedIn](https://www.linkedin.com/company/automation-bro)

...

Thanks for reading!
Create a random color toast notification
Tags: html, css, javascript, webdev
Published: 2022-11-14 13:46:12

Nowadays, Pop-up or Toast notifications are used in almost all apps. A toast notification shows information that appears on some action performed and disappears after some time.

Let's start with a button to show a toast message
```javascript
 <div id="container"></div>
 <button id="btn">Show Notification</button>
```
and put the style for the button
```javascript
button {
  background-color: lightblue;
  padding: 1rem;
  border-radius: 5px;
  color: darkblue;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
```
Now get the button element and attach the click function to it
```javascript
const btn = document.getElementById("btn");
const container = document.getElementById("container");

btn.addEventListener("click", () => {
  generateToast();
});
```
let's write the actual toast code now
```javascript
function generateToast() {
  //creating toast element and adding styling class
  const toast = document.createElement("div");
  toast.classList.add("toast");

  //assigning random background color to each toast
  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
  toast.style.backgroundColor = "#" + randomColor;

  //assigning text to toast
  toast.innerText = "Hello there 👋🏼";
  container.appendChild(toast);

  //making toast disappear after 2s
  setTimeout(() => {
    toast.remove();
  }, 2000);
}
```
Also, add some nice styling to toast with animation
```javascript
#container {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.toast {
  padding: 1rem;
  border-radius: 5px;
  margin: 10px;
  color: rgb(0, 0, 58);
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
```
###Conclusion
{% codesandbox toast-notification-rrmi4e %}

Thank you for reading!
Feel free to connect on [Twitter](https://twitter.com/Aneeqa_Khan25)
How to update all npm package.json dependencies to the latest version
Tags: webdev, javascript, beginners, codenewbie
Published: 2022-11-14 13:30:00


It's essential to keep all the node modules of your project up to date as the security patches go out.

In this short tutorial I'll teach you how to update all the `node_modules` to the latest version with a single command.


By default, once you type `npm install <package_name>`, node package manager installs the latest version of
the desired package. This version is then added automatically to the file `package.json`.

The issue is that over time new versions of the packages are being released, and you need to somehow update them.

To check which packages are outdated, you can run the command `npm outdated`, however 
Node Package Manager (npm), doesn't update dependencies from `package.json` by default.

So, if you're looking to update all the npm modules with a single command, you can use the module `npm-check-updates`.
It's best to install this module globally with the `-g` flag.

```bash
npm install -g npm-check-updates
```

After successful installation, you'll be able to use the command `ncu` from the command line.

```bash
ncu -u
```

Make sure that you navigate to your project directory before using the `ncu -u` command. Once you execute it,
`npm-check-updates` will update all the dependencies from `package.json` to the fresh versions.

The last step is to run the command `npm install` to download and install updated packages based on the information
in `package.json`.
WxSAPIntegration - Accelerate integration into SAP ECC
Tags: webmethods, microservices, opensource, tutorial
Published: 2022-11-29 09:55:07

---
title: WxSAPIntegration - Accelerate integration into SAP ECC
published: true
date: 2022-11-14 13:19:10 UTC
tags: webmethods, microservices, opensource, tutorial
canonical_url: https://tech.forums.softwareag.com/t/wxsapintegration-accelerate-integration-into-sap-ecc/265992
---

 

## Introduction

Integrating with SAP ECC can be daunting, especially when you haven’t worked on SAP ECC before. The **WxSAPIntegration** has been developed by Global Presales team, Software AG to run on a webMethods Integration Server/ Microservices Runtime. It is designed to accelerate your project that requires integration into SAP ECC.

[![dashboard](https://aws1.discourse-cdn.com/techcommunity/optimized/3X/1/f/1f95fbab10698127a3ba0acc8b27c5375b2f3e88_2_690x409.png)](https://aws1.discourse-cdn.com/techcommunity/original/3X/1/f/1f95fbab10698127a3ba0acc8b27c5375b2f3e88.png "dashboard")

## How can WxSAPIntegation help you?

Once you have got webMethods Integration Server or Microservices Runtime running, you will just need to install the SAP Adapter and the WxSAPIntegration package.

- It provides out-of-the-box REST APIs like Get all customers, Get all equipment, Create sales order, etc. based on standard SAP BAPIs like BAPI\_CUSTOMER\_GETDETAIL2, BAPI\_CUSTOMER\_GETLIST, BAPI\_EQUI\_GETDETAIL, BAPI\_EQUI\_GETLIST, BAPI\_SALESORDER\_GETLIST and BAPI\_SALESORDER\_CREATEFORMDAT2.
- It is an open-source package to allow you to extend the package capabilities based on your customer’s requirements and ideally feed the changes back into the developer community.
- It provides a user-friendly user interface specifically to configure and manage the SAP connection without the need to manage it through Admin Console.

## Where can I find WxSAPIntegration?

You can find WxSAPIntegration package at [WxSAPIntegration - GitHub project](https://github.com/SoftwareAG/WxSAPIntegration) with detailed documentation. You can download the latest release under the Releases section of the GitHub project.

[Read full topic](https://tech.forums.softwareag.com/t/wxsapintegration-accelerate-integration-into-sap-ecc/265992)
Max-width ,Min-width vs width
Published: 2022-11-14 13:04:55


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhaiufz4zab2t1q6ctey.PNG)The maximum width specifies the maximum screen width to the specific device
 The Min-width specifies the minimum screen width to also the specific devices whereas
width  set an element to the fixed width
percentage of width : set apercentage based on a specific width

Better to use width for a fixed element and use max-width for  thing that can change to any breakpoint.
Alternative Data, what is it about?
Published: 2022-11-14 13:00:49

Alternative data is a form of non-traditional data that has come to stay. This form of data can provide information about how well a company or an individual or an asset can perform in the future. This form of data is getting popular as the day goes by, it's a form of data that is gotten from non-traditional means. A typical traditional way of getting data is by press releases, financial statements, etc.

This form of data is mostly used in the investment sector by investment analysts, quant traders, fund managers, etc to guide them on the strategy to invest so as to reduce risks and improve their profits. Proxycurl provides this alternative form of data by setting up technologies that make the collection of data from different sources (social media, email receipts, mobile applications, etc) simple and fast. Using Procycurl's [Employee Listing](https://nubela.co/proxycurl/docs#company-api-employee-listing-endpoint) and [Person Profile](https://nubela.co/proxycurl/docs#people-api-person-profile-endpoint) API [endpoints](https://nubela.co/proxycurl/docs#overview), companies can identify existing employees of FAANG companies, then track their change of jobs history all in one place.

You can find out more about alternative data from [Proxycurl's alternative data article](https://nubela.co/blog/the-ultimate-guide-to-alternative-data-what-is-it-really/)
Top Best Drivers for Windows 11, 10
Tags: driverpack, solution, 2022, 2023
Published: 2022-11-14 07:06:53

Hello! My name is Sara. I am the author and founder of [DriverPack](https://fc-portables.blogspot.com/2018/10/microsoft-office-2019-preview-build-160.html
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ny48d17xdwqfnzae7j2.jpg))
From a small piece of software written with pure enthusiasm 8 years ago, we have transformed into a company that has helped more than 40 million people worldwide to configure their computers!

During this time, our software has become incredibly faster and smarter. Today, [DriverPack](https://getpczone.com/software/driverpack-solution-2021-v17-11-download-32-64-bit) is the largest database of unique drivers in the world, located on ultra high-speed servers all over the world. In order to perform the process of driver installation always quickly and with the highest possible quality, we use machine learning technologies that make our selection algorithm even better and more accurate. 

We have managed to achieve all this in such a way that the software remains absolutely free of charge, and everyone can use it.

**[Driverpack Solution 2023](https://www.postghali.com/2022/02/driverpack-solution-123-offline-zip.html)**

My team and I are proud of our product, and we hope it will become your reliable assistant in configuring any computer in the shortest possible time frame. We spend all our time in order to save yours!
What you need to extra setup before start to working with Angular ?
Tags: webdev, javascript, typescript, angular
Published: 2022-11-14 12:20:59

Hi I'm @sefatanam,

I'm planning to do a open-source project where I will build a Angular template where prettier, eslint, cypress, husky & also translation service will be in pre-configured. So that, Every time I start a fresh (professional)project I don't need to set up this type of config every time.

Here is the repo that I currently working on : https://github.com/nixgram/nixng

So, you can help by commenting, What you need to do for the extra setup before starting an angular project. Please.

Waiting for your feedback.
Thanks
C++ da amallar bilan ishlash
Published: 2022-11-14 12:10:11

Arifmetik operatorlar;
/ - bu belgi bo'lish amalini bajaradi. Asosan sonlarni bo'lganda faqat butun sonni oladi va qoldiqni tashlab yuboradi.

% - Modulus yani A ni B ga bo'lganida butun sonni tashlab faqat qoldiqni oladi.

Increment/Decrement operatorlar;
++x - bu o'zgaruvchini bitta qiymat oshiradi va keyingi amalni bajaradi.
x++ - bu avval barcha amallarni bajarib oladi va oxirida o'zgaruvchini bitta qiymatga oshirib qo'yadi.

--x - bu o'zgaruvchini bitta qiymat kamaytiradi va keyingi amalni bajaradi.
x-- - bu avval barcha amallarni bajarib oladi va oxirida o'zgaruvchini bitta qiymatga kamaytirib qo'yadi.

Relational operator;

< - chap tarafdegi qiymat o'ng tomondegi qiymatdan kichkina bo'ladi. A<B;
<= chap tarafdegi qiymat o'ng tomondegi qiymatdan kichkina yoki teng bo'ladi. A<=B;
== - chap taraf o'ng tarafga tengmi degan belgi;
> o'ng tomondagi qiymat chap tarafdegi qiymatdan kichkina;
>= o'ng tomondagi qiymat chap tarafdegi qiymatdan kichkina yoki teng;
!= bu amal chap taraf o'ng tarafga teng emas;
buu amallar asosan true(1) yoki folse(0) da ishlatiladi.

logical operator;
Birdan ortiq amal uchun va bular ham true yoki folse qaytaradi.

! - Not bu trueni folsega va folseni truega aylantiradi.

&& - AND bu operatorda bitta folse va bitta true bo'lsa natijani folsega aylantiradi. True bo'lishi uchun bir vaqtda chap va o'ng tarafdegilar ham true bo'loshi kerak;

|| - OR bu operator o'ng yoki chap tarafdegidan bittasi true bo'lsa true qaytaradi.


@dawroun
¿Cómo puedo cambiar la fecha de un vuelo de Volaris?
Published: 2022-11-14 12:09:50

¿Estaba planeando viajar al extranjero en la aerolínea Volaris para su viaje de negocios pero la fecha para ir al evento cambió? Y ahora quiere cambiar la fecha de su vuelo.

- Vaya a la página de la aerolínea Volaris.
- En la página de inicio, haz clic en Mis Viajes.
- Llena tu Código de Reservación y Apellido.
- Haz clic en Ir a Mis Viajes.
- Encontrará la opción de Cambiar la Fecha del Vuelo. Haga clic en ella.
- Elija su fecha flexible y haga clic en Confirmar.
- Recibirá un correo de confirmación.

**¿Cuánto cuesta cambiar un vuelo en Volaris?**
Si quiere cambiar el vuelo de Volaris, tendrá que pagar alguna tasa o cargo por cambiar tu vuelo. La aerolínea Volaris cubrirá la diferencia de la tarifa y el cargo correspondiente. Los clientes podrían tener que pagar entre 50 y 70 dólares.
**¿Qué sucede si se cancela un vuelo en Volaris?**
Si el vuelo de Volaris se cancela, se retrasa o los pasajeros pierden una conexión debido a un retraso o cancelación, entonces se les volverá a reservar en el siguiente vuelo disponible tan pronto como sea posible.
**Conclusión**
Si va a cambiar el itinerario de su vuelo, no puede cambiar el país de origen.
Si usted está cambiando su itinerario en el sitio web de Volaris, entonces se aplicará a todos los clientes incluidos en la reserva.
En cuanto a la política de reembolso, la reserva de los clientes debe estar a siete días de la salida para los vuelos internacionales.
Esta es la [Política de Cambios de Aerolíneas Volaris](https://www.faresflex.com/es/articulos/como-puedo-cambiar-un-vuelo-volaris) en línea.
C++ intro for starter 6
Published: 2022-11-14 12:06:56

##Assalomu alaykum!
Bugun biz siz bilan bugungi darsizmizda `operatorlar` haqida gaplashamiz.
Qani boshladik,

Bugunda dasrda Arifmetik,Qiymat berish,Taqqoslash,Mantiqiy va Bitwise  operetorlari haqida bilib olamiz.

> 1) Arifmetik operatori

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plsdz8y8kald84ekzen2.jpg)
Bu operatorlarimiz xuddi matematika amallariga o'xshab bajariladi.

> 2)Qiymat berish operatori

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6es40f9d8vy0r5ag2kaf.jpg)
Bu operatorimizni yuqoridagi suratda ko'rishingiz mumkin.

> 3) Taqqoslash operatori

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1kvxaoz2vuof5saxpbb.jpg)
Bu ma'lumotla0 sizga tushunish uchun oson deb o'ylayman,aslini olganda ham shunaqa sanaladi.

> 4)Mantiqiy operatori

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km49b0pyo9drvk5px3io.jpg)
Bu operatorni biz yuqori sinf matematika darsida ham ko'rganmiz masalan uning jadvali quyidagicha;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ph22d7tx0yimynebm1d.png) 
Shunaqa shaklda ishlanadi va buni biz keyingi dasturlarimizda qo'llashimiz mumkin.

> 5) Bitwise operatori

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efaos6bh112e1yiqg3yj.jpg)
Bu operator haqida keyinchalik  yana qaytib gaplashamiz albatta.

Bundan tashqari bizga kerak bo'ladigan operator bu increment va decrement sanaladi.
Bunda 

```cpp
++a  // Bu avval a=a+1 ya'ni a soniga 1 ni qoshib keyin qolgan amallarni bajaradi.
a++  // Bunda esa avval amallar bajarilib keyin 1 qo'shiladi.
//Bularni farqi juda katta ahamiyatga ega sanaladiotl
/*Shuningdek,*/ --a va a-- // operatorlari ham xuddi shu zaylda amalga oshib boradi.
```
 
 
Bugun shu mavzular haqida gaplashdik.@dawroun 

> _E'tiboringiz uchun rahmat!___
CSS transition ...
Tags: css
Published: 2022-11-14 11:46:48

When animating your CSS elements, you can prevent the effects from occurring immediately by delaying or slowing down by controlling the animation speed. That is **transition**

Transition has up to 6 properties which are:

> transition

> transition-delay

> transition-duration

> transition-property

> transition-timing-function


**N.B:** If you don't specify the transition duration, no effect will occur since the default value is 0

**transition-timing-function** specifies  the speed curve of the transition effect

it has the following values that :

1. ease: slow start, goes fast then ends slowly

2. linear: same speed from start to end

3. ease-in: a slow start

4. ease-out: a slow end

5. ease-in-out: a slow start and end

6. cubic-bezier(n,n,n,n): lets you define your own values in a cubic-bezier function N.B: n value must be between 0 and 1


Adding delay in transition

transition-delay specifies a delay in seconds for the transition effect

```
<div class="box">

</div>

```


```
.box{
  width: 10rem;
  height: 10rem;
  background: red;
  transition-duration: 1000ms;
  transition-property: background, width;
  transition-timing-function: ease-in;
  transition-delay: 200ms;
}



.box:hover{
  background:blue;
  width: 20rem;
  
}
```

for transition-property, when you have a lot of properties to transition its possible to write **transition-property: all**, However it is not recommended, it's better to specify them as its shown in the code snippet above.

Codepen link: https://codepen.io/delyc/pen/poKwWmx
Guide to Shopify Mobile App Builder and How It Can Help You Build a Better Business
Tags: shopifymobileappbuilder, mobileappforshopify, convertshopifystoretomobileapp
Published: 2022-11-14 11:28:14

**Introduction: What is a Shopify Mobile App Builder?**

A Shopify Mobile App Builder is a software application that allows users to build mobile apps for their Shopify stores. This software allows users to create an app from scratch or to customize an existing one.

Shopify offers a mobile app builder that allows users to build and manage their own apps in just minutes. The tool has been designed with Shopify retailers in mind, so it includes features such as push notifications, custom themes, and more.

The Shopify mobile app builder is a powerful and easy-to-use software that helps you create the perfect shop for your customers on any device.

**Why Your eCommerce Business Needs a Mobile App?**

Mobile apps are quickly becoming the go-to platform for eCommerce businesses. This is due to their convenience and the fact that they allow users to shop from anywhere.

A mobile app for Shopify not only makes it easier for customers to find your business, but when you convert Shopify store to mobile app it also helps you increase your sales by offering a better shopping experience. Read on if you're wondering why your eCommerce business needs a mobile app!

Your eCommerce store needs a mobile app if you want to be able to reach new customers in different ways and offer them an enhanced shopping experience.

**How to Choose the Best Shopify Mobile App Builder for Your Business**

The best Shopify mobile app builders are the ones that allow you to build an app that will be useful for your business and make it easier for you to deliver a great customer experience.

There are a lot of Shopify mobile app builders available on the market, but not all of them are created equal. There are some tools that allow you to build apps faster than others and some tools have more features than others. So how do you know which Shopify mobile app builder is best for your business?

When choosing the best Shopify mobile app builder, there are a few things you should consider:

- What kind of apps do you want to build?
- How much time is it going to take you to develop your apps?
- What kind of features does your selected tool offer?
- How much does it cost?

The best part is you don’t have to hire mobile app developers to covert Shopify store into mobile app using these ready-made mobile app builders. With the simple drag-and-drop feature that it offers, you can build a [mobile app for Shopify](https://appokart.com/) on your own.