teleren/devto huggingface dataset:
How to Create a video player with video.js
Tags: javascript, videojs, webdev, react
Published: 2023-04-06 17:57:43

- Add the Video.js library to your HTML file. You can download the library from the Video.js website or use a content delivery network (CDN) link.


```
<head>
  <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
</head>
```

- Add a video element to your HTML file and give it an ID. You can also specify the video file to play, along with any other options you want to set.

```

<body>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
    <source src="my-video.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
</body>
```


 

- Initialize the video player with JavaScript by passing the ID of the video element to the videojs function. You can also specify any additional options you want to set, such as autoplay or custom controls.

```
var player = videojs('my-video', {
  autoplay: true,
  controls: true,
  fluid: true
});
```

- You can now use the player variable to control the video playback, change the video source, add event listeners, and more.


```
// Play the video
player.play();

// Pause the video
player.pause();

// Change the video source
player.src('new-video.mp4');

// Listen for when the video has finished playing
player.on('ended', function() {
  console.log('The video has ended');
});
```

These are the basic steps to create a video player with Video.js. You can customize the player's appearance and behavior using CSS and JavaScript, and add additional features like captions, ads, and plugins. The Video.js documentation provides more detailed information on how to use and customize the player.
Best tech for large Woo product import
Tags: node, php, beginners, wordpress
Published: 2023-04-06 17:55:59

Hi all,

I'm new to the community, this is my first post!

I run a WordPress/Woocommerce shop and we have an import script that I built using PHP, this is triggered twice daily by a CRON and generally speaking works well. The import script is built as a WordPress plugin and has it's own section in WP Admin, it also allows Admin users to manually trigger an import from it's Admin page. It processes a fairly large XML file that is created and uploaded to our site by our stock inventory system containing over 11,000 products and basically loops through them updating the SKU's in Woo as it goes... it hides items that are no longer present in the XML and creates new Woocommerce products for anything that's new as well as bunch of other stuff. Normally this takes around 30 minutes, but if it has to process new images into the media library it can be a lot longer.

The script is all written in PHP and basically runs as one process from start to finish. We have on occassion had timeout issues and at times we run out of resources to complete the process which can frustrate.

Now however, we are looking to drastically increase the number of items in the XML by 2 or 3 times and I no longer think that a single PHP script is the best way of doing this. One of the main problems I have with running as a single PHP script is that there is no feedback such as a progress bar or any kind of indication what the script is doing until it is finished. There is a log, but this is not created until the end of the process and therefore if the script falls over then it is never produced.

So we are thinking about re-writing this import in something else that may be a little more suited to the task.

The key things I need to do are:

- Parse a large XML file that will probably be longer than 1 million lines long

- Be able to run via a CRON as well as be able to be triggered manually from within the WordPress Admin

- Be able to provide a status of an import to the WordPress Admin which updates dynamically rather than needing a page refresh

- Be more reliable that my current PHP script which sufferes from timeout and resource issues

My current thinking is a node.js script which would parse the XML file and then I would have a endpoint to which I could pass the xml for an individual product and process it via PHP. Because the PHP is just running for 1 product at a time there should be no timeout or resource issues and this way I could leverage some of my existing code without a full re-write. I'm thinking that the node.js script would hit other endpoints to update the status of the complete import as it goes so that this can then be updated in the WordPress Admin page.

So I'm really just looking for thoughts or ideas, whether you think node.js is more suited to this than PHP like I do or whether you have any other suggestions to consider?

Thanks in advance
Kevin
Apple Car (Or Project Titan, if you will)
Tags: apple, automation, projectitan, cars
Published: 2023-04-06 17:55:44

## Intro
I was watching a YouTube short ([View here for more understanding on the following article](https://www.youtube.com/shorts/erKkysnf1T8)) when a question arose in the short: "If Apple made a car, would it have windows???"

## How do I know?
Eagle-eyed developers have found signals promoting the theory of "Project Titan" -- the Apple Car. The previous release date was set between 2019-2020, but the idea was failing and Covid -19 ruined it completely.

## Rumors
Not many rumors seam valid, though one is cringe-worthy (and therefore worth mentioning). Someone reported that Apple had assembled a top-notch team of 20-30 German car designers to create the Apple Car.

## Anything else?
Not much! Nothing real is known about the Apple car right now!

_DarkOutcast out! I'll report back later!_
Use bash instead of crontab?
Tags: help, php, docker
Published: 2023-04-06 14:48:50

As I ask apon laracasts [forum](https://laracasts.com/discuss/channels/devops/is-a-good-idea-to-use-shell-instead-of-cron-in-order-to-run-laravel-scheduler-in-a-containirized-laravel-application) I try to containirize a laravel cron scheduler:

This is my `Dockerfile`:
```
FROM php:8.1-alpine

# Install nessesary php module here

COPY . /var/www/html

RUN echo "Installing composer \n" &&\
    php -r "copy('https://getcomposer.org/installer', '/tmp/composer-setup.php');" &&\
    php /tmp/composer-setup.php --install-dir=/bin --filename=composer &&\
    rm -rf /tmp/cpmposer-setup.php &&\
    chmod +x /bin/composer &&\
   cd /var/www/html &&\
   composer install &&\
   rm -rf composer

COPY ./entrypoint/entrypoint_cron.sh /usr/local/bin/entrypoint.sh

RUN echo "Fixing Permissions on Entrypoint Script \n" &&\
    chown root:root /usr/local/bin/entrypoint.sh &&\
    chmod +x /usr/local/bin/entrypoint.sh &&\
    usermod --shell /bin/bash www-data

ENTRYPOINT ["/usr/local/bin/entrypoint.sh"]
CMD ["php","artisan","schedule:run"]

```

And this is the entrypoint script `/usr/local/bin/entrypoint.sh`:

```
#!/bin/sh
while true
do
    "$@"
    sleep 60
done
```

But I do not know if my approach will have ant complications and whether in the long term will cause me more trouble that using the crontab.

The idea behind this is because I need only a single command to run every minute seems like a waste to install and run `crontab` (unless is pre-installed) in my containers.

Do you know if my train of though makes sense and will not cause me trouble in the long term?
Usando de Stripe API no React Native
Tags: reactnative, programming
Published: 2023-04-06 17:14:40

O Stripe API é uma das opções mais populares para processamento de pagamentos online. A API permite que os desenvolvedores aceitem pagamentos com cartão de crédito e débito em seus aplicativos e sites. Se você está desenvolvendo um aplicativo móvel em React Native, pode usar a Stripe API para facilitar a realização de pagamentos dentro do aplicativo. Neste artigo, vamos discutir como usar o Stripe API no React Native.

Antes de começar, é importante que você crie uma conta no Stripe e tenha uma compreensão básica de como a API funciona. Uma vez que você tenha criado uma conta no Stripe, você pode começar a usar a API para processar pagamentos. A Stripe oferece bibliotecas de clientes para várias linguagens de programação, incluindo React Native.

Para começar a usar a Stripe API no React Native, você precisa instalar a biblioteca de cliente do Stripe. Você pode instalar a biblioteca usando o gerenciador de pacotes npm, executando o seguinte comando no terminal:

```
npm install stripe-react-native
```

Depois de instalar a biblioteca, você precisa configurá-la com suas credenciais do Stripe. Você pode encontrar suas credenciais do Stripe no painel do desenvolvedor do Stripe. Para configurar a biblioteca, você pode usar o seguinte código:

```
import stripe from 'stripe-react-native';

stripe.setOptions({
  publishableKey: 'sua_chave_publicavel',
  merchantId: 'seu_id_de_comerciante',
});
```

Com a biblioteca configurada, você pode começar a usar a Stripe API para processar pagamentos no seu aplicativo React Native. Para criar um pagamento, você pode usar o seguinte código:

```
import stripe from 'stripe-react-native';

const token = await stripe.paymentRequestWithCardForm({
  smsAutofillDisabled: true,
  requiredBillingAddressFields: ['name'],
  prefilledInformation: {
    billingAddress: {
      name: 'Nome do cliente',
    },
  },
});

// Enviar o token para o seu servidor para processamento
```

Este código irá exibir um formulário de pagamento que permitirá que o usuário insira seus detalhes de pagamento. Quando o formulário for enviado, a Stripe API criará um token de pagamento que você pode enviar para o seu servidor para processamento.

Além disso, você pode usar outras funcionalidades da API para personalizar o processo de pagamento, como permitir que os usuários salvem seus cartões de crédito para pagamentos futuros, definir um valor padrão para o pagamento e assim por diante.

O Stripe API é uma das opções mais populares para processamento de pagamentos online e pode ser facilmente integrado em aplicativos React Native usando a biblioteca de cliente stripe-react-native. Com a API do Stripe, você pode criar um processo de pagamento personalizado que atenda às necessidades do seu aplicativo.
How to get payment Link From SumUp using sumup-ecom-php-sdk?
Published: 2023-04-06 17:14:39

I am looking to get a payment link for our invoice using sumup-ecom-php-sdk. How can I implement my idea?

```
$sumup = new \SumUp\SumUp([
    'app_id' => '...',
    'app_secret' => '...',
    'grant_type' => 'client_credentials',
]);

$checkoutService = $sumup->getCheckoutService();
$amount =$invoice->amount;
$currency = $invoice->currency;
$checkoutRef = $invoice->number;
$payToEmail = $invoice->recipient;
$description = $invoice->description;

$checkoutResponse = $checkoutService->create($amount, $currency, $checkoutRef, $payToEmail, $description);
$checkoutId = $checkoutResponse->getBody()->id;
```
How can I get a payment link using $checkoutService? There's no payment link in the response of $checkoutResponse->getBody();

So I created payment link myself using $checkoutId like the following.

```
$redirectUrl = 'http://127.0.0.1:8000/sumup/checkout?ref='.$checkoutRef.'&token='.$checkoutId
```
web.php

```
Route::get('/sumup/checkout', [SumupPayController::class, 'index']);
```
SumUpController.php

```
public function index(Request $request)
{
    $invoiceNumber = $request->query('ref');
    $checkoutId = $request->query('token');
    return view('sumup_checkout', compact('invoiceNumber','checkoutId'));
}
```
sumup_checkout.blade.php

```
<script src="https://gateway.sumup.com/gateway/ecom/card/v2/sdk.js"></script>
```

```
@extends('layout.app_layout_client')
@section('body')
    <div id="sumup-card"></div>
@endsection
@push('post-body-script')
    <script>
        const checkoutId = @json($checkoutId);
        const invoiceNumber = @json($invoiceNumber);
        console.log(checkoutId, invoiceNumber);

        var sumupCard = SumUpCard.mount({
            checkoutId: checkoutId,
            showFooter: true,
            currency: "EUR",
            locale: "de-DE",
            onResponse: function (type, body) {
                switch(type) {
                    case "sent":
                        break;
                    case "invalid":
                        break;
                    case "auth-screen":
                        break;
                    case "error":
                        break;
                    case "success":
                        break;
                    default:
                        break;
                }
            },
        });
    </script>
@endpush
```
As you can see, I developed front-end page using sumup-card-sdk. But I don't know where the request including card information that I input is sent when I click submit button of sumup-card. So I can't connect to backend. And I want to know how I can get input data including card information from sumup-card.

How can I get payment link using sumup-ecom-php-sdk and payment widget provided by SumUp?

Thanks in advice
Project 2 Week 13 Blog
Published: 2023-04-06 17:05:03

# Final blog post wrapping up the project and pointing to your code / running demo for others to enjoy
- Github link:
https://github.com/hblaxton/badges-list-1

- Vercel link:
https://badges-list-1-nej1.vercel.app/

# How many elements did you end up going with? Why did you break it up that way?
- We have the search bar and the badge as elements in our project. We broke it up this way because we needed to implement them and be able to manipulate them separately and needed a cohesive design. 

# What was the hardest aspect of this?
- The hardest part of this project was implementing the search bar. We struggled to set it to render results once it was set up to take input. 

# What part of this project was easier than you expected?
- The badge was much easier than expected. We tried to copy it directly from the website but that was more challenging than just creating it from scratch.
BEAT TO FIT
Tags: beginners
Published: 2023-04-06 17:01:34

Fitness is important for overall health and well-being and can be achieved through regular exercise and a healthy lifestyle, including proper nutrition and adequate sleep. There are many different types of fitness activities, including strength training, cardiovascular exercise, flexibility exercises, and sports. Fitness can improve not only physical health but also mental health, as it can reduce stress and improve mood.

Fitness can be improved through AI and machine learning. With AI, fitness tracking devices like smartwatches or fitness trackers give you data-driven insights on your physical activity level by analyzing the ways that you move throughout the day. By detecting patterns such as steps taken, calories burned, heart rate spikes in response to certain activities, and other metrics typically used to measure health levels they can draw conclusions about how fit you are. Machine Learning (ML) works similarly but utilizes more comprehensive algorithms to provide tailored recommendations for achieving specific health goals based on usage of those same devices. It's advanced enough to even learn from past behavior and tell which activities specifically lead towards better results than others and takes feedback into consideration with each exercise session tracked over time so it gets smarter as it goes along helping users stay motivated toward their goal because of its predictive accuracy thus reflecting real progress made rather than random probability .

AI is like a personal trainer who can provide guidance and advice on an individual's fitness journey, while ML is like a regular gym-goer who gradually builds up their skills through practice. The coach offers the initial direction and motivation to get started, but then it's up to the athlete follow that path and make progress.

AI is like having a personal trainer who can provide you with tailored guidance on which exercises to do, how often and at what intensity; while ML would be like learning from your experiences in fitness classes or training sessions over time - continually adapting to help improve technique and results.

This might help too-- [Cialis Pills](url=https://www.ultrapharmrx.com/)   :   ;  [Contently ](url=https://sylvaincarrie.contently.com/)-- to consistently enhance your performance.

“The body achieves what the mind believes.”
JavaScript for Beginners: Kick-starting Your Web Development Journey
Tags: javascript, webdev, programming, beginners
Published: 2023-04-06 15:58:07


![First Step](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjklrkjyxn45rqe1s2ib.jpg)

**Introduction:**

JavaScript is an essential programming language for web development, bringing life to static web pages with interactivity, animations, and dynamic content. If you’re a beginner looking to learn JavaScript, you may find the process challenging at first, but with the right resources and a systematic approach, you can easily master the language’s basics. In this article, we’ll guide you through the initial steps to start learning JavaScript.

**1. Set up your environment:**

Before diving into JavaScript, you’ll need to set up your development environment. All you need is a modern web browser like Chrome or Firefox and a text editor like Visual Studio Code or Sublime Text. You can write JavaScript directly in the HTML file, between `<script>` tags, or create a separate JavaScript file with a .js extension and link it to your HTML.

**2. Learn the basics:**

Understanding JavaScript’s basics is crucial before delving into coding. This includes familiarizing yourself with the syntax, data types, operators, and control structures used in the language. Online tutorials, such as Mozilla Developer Network’s JavaScript Guide, FreeCodeCamp’s JavaScript curriculum, and W3Schools’ JavaScript tutorials, are excellent resources for beginners.

**3. Practice coding**:

Once you’ve grasped JavaScript’s fundamentals, it’s time to put your skills into practice. Begin with straightforward programs like displaying an alert with “Hello, World!” and gradually progress to more complex tasks. Numerous programming exercises can be found online, or you can refer to beginner-friendly books for hands-on practice. It’s vital to understand the logic behind the code you write and how different components of the program interact with one another.

```
`alert("Hello, World!");`
```

**4. Join a community:**

Connecting with a community of JavaScript developers is a fantastic way to learn from others and get feedback on your code. Numerous online forums, discussion boards, and social media groups are dedicated to JavaScript programming. You can also participate in local meetups, attend workshops, or enroll in a JavaScript course. This will help you stay motivated and continuously learn.

**5. Build your own projects:**

As you become more confident in your JavaScript skills, it’s crucial to start building your projects. Consider a project that interests you and start working on it. It could be a simple quiz, a weather app, or a web-based calculator. The more you practice writing code and creating projects, the more you’ll learn and develop as a programmer.

**Conclusion:**

Learning JavaScript may take time and effort, but it is an incredibly rewarding experience that can elevate your web development skills. By following these initial steps, you can embark on your journey toward becoming a skilled JavaScript developer. Remember to be patient, stay motivated, and keep practicing. Good luck!
Creating QR codes in seconds - for free??
Published: 2023-04-06 15:55:40

[Using MacOS with Homebrew]

1. Open a console window and install [Zint](https://zint.org.uk/) with:

`brew install zint`

2. Use the following format in your console window to generate your QR code:
`zint -b BARCODE_QRCODE -o myfirstqrcode.png -d "https://www.liberale-demokraten.de/"`

3. Open the file, hold your camera over it, and bingo...

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


Obviously if you ever want the URL to change, that's when you might want to use one of the middleware services that handles that (although they may charge). Or of course you can write your own!
What is hoisting in Javascript?
Tags: webdev, javascript, beginners, programming
Published: 2023-04-06 15:50:34

_In the upcoming three weeks, I’ll publish a small blog series called “Questions from the past”. I’ll be going through my old notebooks from my first year as a developer and answer the questions I think are most important. For this first blog in the series, let’s discuss the concept of hoisting in Javascript._

Despite its name, hoisting in Javascript has nothing to do with lifting something up or moving something around. All it means is that JS sets up memory space for variables and functions that you create in your code. This way, when your code starts running and gets executed line by line, JS can access these variables and functions.

However, when Javascript sets aside that memory space, it doesn’t know what the value of the variables and functions will be. Therefore, it sets a placeholder called undefined.

What’s interesting about hoisting is that the Javascript engine may execute your code in a different order than the way it’s written. That’s because it can access variables and functions that were hoisted before they were even declared in the code. But since the value of hoisted variables and functions is undefined, relying too heavily on hoisting can lead to unexpected results.

Let’s take a look at this code:

```
console.log(a)
console.log(b)

var a = "I am a variable!"

function b() {
  console.log("I am a function!")
}
```

In most programming languages, you might expect an error as soon as you try to run this code, but with Javascript, it’s different. Because the memory space is already set aside for the variable and the function before the code is executed, it will not throw an error. What it will do is return undefined. So, while you can technically call functions and variables that are declared later, it’s generally not a good idea to rely too much on hoisting.

So, in summary:

- Hoisting in Javascript simply means JS sets up memory space for variables and functions that you create in your code. This way, when your code starts running and gets executed line by line, JS can access these variables and functions.

- Variables and function declarations can be hoisted.

- It’s best to declare variables and functions before accessing them. This way you’ll avoid weird bugs and undefined warnings in your console.