teleren/devto huggingface dataset:
react 5分钟写一个乐透开奖
Tags: javascript, react
Published: 2021-10-28 13:08:33

先放个效果图
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw1wzdlrebffw6vhw6vm.png)
```

import { useState } from 'react';
const Lottery = () => {
  const [pool,setPool]=useState([]) // 设置奖池初始值
  // 生成一个随机数字
  const randomNumber = (min, max) =>{
    const range = max - min + 1;
    const rand = Math.random() ;
    const num = Math.floor(rand * range + min);
    return num;
  }
  // 奖池生成器 
  const generator = (n，min，max)=>{
    const arr = [];
    while(arr.length<n){
      const num = randomNumber(min,max)
      if (arr.indexOf(num)===-1){
        arr.push(num)
      }
    }
    return arr;
  }
  
  return (
    <div>
      <button onClick={()=>setPool(generator(6，1,45))}>一键开奖</button>
      <button onClick={()=>setPool([])}>清空奖池</button>
     
      <div className="lottery">
        <ul>
          {pool.map((num,i)=>(<li key={i}><div>{num}</div></li>))}
        </ul>
      </div>
    </div>
  );
};

export default Lottery;
```
RxJS in Angular: from beginner to advanced beginner
Tags: angular, programming, youtube, twf
Published: 2021-10-28 12:58:16

[![RxJS in Angular: from beginner to advanced beginner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrn239wkhquk2z0hg2gq.png)](https://www.youtube.com/watch?v=YesyFEyj3UE "RxJS in Angular: from beginner to advanced beginner")
View it on YouTube: [RxJS in Angular: from beginner to advanced beginner](https://www.youtube.com/watch?v=YesyFEyj3UE)
Hello World!
Published: 2021-10-28 12:54:51

Hi There,

My name is **Muhammad Ahsan**. I'm **Student** of **Computer Engineering**. I'm very passionate about Programming(It's been about 2 years for me in Programming Field- I started from scratch). Currently I'm into **Python and Machine Learning**. I'm also an active member of multiple developer communities. I'm **HackClub Leader** and also the **Founder** of society named **Zakariyan Coding Society**.

I love Coding, Debugging and reading other code...

Regards,
I built my first Cloudflare worker
Tags: javascript, geolocation, cloudflare, node
Published: 2021-10-28 12:21:53

In the past two years, I have written a few blog posts that explored how to figure out where the user physically is.  Most of these experiments involved [navigator.geolocation](https://blog.jws.app/2020/how-to-get-the-users-street-address-using-navigator-geolocation-and-mapquest/) but last week's [iOS 15, Private Relay, and Geolocation]() post brought in the concept of figuring out the person's location based upon their IP address.  After finishing that post, I started to wonder what it would take to simplify things.  Can I reduce the number of API calls to things and make the result more reliable?  In the process, I decided that I would also wrap things up into a central Cloudflare worker.

So, let's see what the guts of the worker look like.

{% gist https://gist.github.com/steinbring/ee58c825ab64e618e039c82245aa84b1 %}

As you can see above, a lot of the returned data is just [things that cloudflare knows about you, out of the gate](https://dev.to/steinbring/get-a-user-s-ip-address-using-just-javascript-and-an-api-call-24n5) but in order to get your likely street address, [an API call to Mapquest](https://blog.jws.app/2020/how-to-get-the-users-street-address-using-navigator-geolocation-and-mapquest/) is still needed.  I also set it up so that you can pass latitude and longitude values in as get variables.  If the user is on an LTE or 5g connection, their location is likely to show up as being in a completely different place.

So, how do we implement this new API?

{% codepen https://codepen.io/steinbring/pen/zYdrLJP %}

Using the "Use GPS to update position" and "Use IP to update position" buttons, you can toggle between the two modes of detection.  Basically, one passes lat/long coordinates into the API and the other leaves it up to the node script to figure it out.

In a real-world setting, I would execute the IP-based detection by default and give the user the option to use the more accurate option if they wished to do so.  This is definitely getting integrated into my [Wisconsin State Parks](https://blog.jws.app/tag/state-parks-app/) project.

Have any questions, comments, etc?  Feel free to drop a comment, below.
Creating EPC Barcodes with Report Generator List & Label
Tags: tutorial, learning, programming, productivity
Published: 2021-10-28 12:20:47

##What is an EPC Barcode?

An EPC QR code is a data format standardized by the European Payments Council that contains all the data for a SEPA credit transfer and is machine-readable via QR coding. A brief description of the format can be found here:

{% wikipedia https://en.wikipedia.org/wiki/EPC_QR_code %}

##Procedure - How to Create Barcodes With List & Label

With List & Label you can easily create such a barcode by encoding the content according to the standard. A formula for such a barcode would be:
```
Barcode(
/* Service tag */
"BCD"+chr$(13)+
/* Version */
"002"+chr$(13)+
/* Character set */
"2" +chr$(13)+
/* SEPA Credit Transfer */
"SCT" +chr$(13)+
/* Recipient's BIC */
"GENODE61RAD"+chr$(13)+
/* Recipient's name */
"combit GmbH"+chr$(13)+
/* Recipient's IBAN */
"DE36692910000214809206"+chr$(13)+
/* Amount */
"EUR0.01"+chr$(13)+
/* Purpose, optional */
"CHAR" +chr$(13)+
/* Reference */
"" +chr$(13)+
/* Reason */
"Charity for combit"+chr$(13)+
/* Hint */
"Hint", 
"QRCode"
)
```

The resulting barcode can then be scanned in all common applications:

![Example EPC Barcode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71opy1qh69i18mpeekky.png)

If you have any questions, please leave a comment. 
Want to test it yourself? Get a [free trial of List & Label](https://www.combit.com/trial/).
Add Event to the google calender
Published: 2021-10-28 12:20:36

```
import makeUrl from "add-event-to-calendar";

export default function App() {
  const sendEventToCalender = () => {
    const event = makeUrl({
      name: `Event name`,
      location: "Event location",
      details: `Event details`,
      startsAt: new Date().toString(),
      endsAt: new Date().toString()
    });
    console.log(event);
    window.open(event.google, "_blank");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={sendEventToCalender}>Make urls</button>
    </div>
  );
}

```
:point_right: [codesandbox](https://codesandbox.io/s/xenodochial-cookies-putz2?file=/src/App.js:0-596)
How to Run Bitcoin Full Node on Linux Ubuntu Virtual Machine with Umbrel
Tags: umbrel, ubuntu, linux
Published: 2021-10-28 12:13:19

Download Ubuntu 
https://ubuntu.com/download

Download VM VirtualBox 
https://www.virtualbox.org/

VirtualBox
Machine > New...
Name: Umbrel
Type: Linux
Version: Ubuntu (64-bit)
Memory size: 4096 MB

Virtual Hard Disk
Minimum for Bitcoin Blockchain is 600 GB
VDI, Dynamically allocated
Create

Setting > System
Processor(s): 4 CPU
Setting > Storage
Optical Drive: choose a disk file...
select ubuntu .iso file
OK

Start
...
After installed Ubuntu
go to getumbrel.com

#Install Docker Engine
https://docs.docker.com/engine/install/
https://docs.docker.com/engine/install/ubuntu/
```
 sudo apt-get update
 sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
```
```
 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
```
```
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
```
```
sudo apt-get update
 sudo apt-get install docker-ce docker-ce-cli containerd.io
```

#Install Docker Compose
https://docs.docker.com/compose/install/
```
 sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
```
```
 sudo chmod +x /usr/local/bin/docker-compose
```

#Install fswatch, jq, rsync, curl
```
sudo apt-get install fswatch jq rsync curl
```
How to host your website on Azure?
Tags: azure, tutorial, github, webdev
Published: 2021-10-28 12:11:15

Hosting your website on [Azure](https://azure.microsoft.com) is very simple. Just a few clicks 👀.
##Final result
![Final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbaui4bf9npm679rq69j.png)
##Prerequisites
1. Signup for an [Azure](https://azure.microsoft.com/en-in/free) account for free if you don't have already. (_Note: If you are a student you can get free credits_)
2. Basic git knowledge and a [GitHub](https://github.com) account.
3. Your website.

#Let's get started
1. After creating Azure account, login into [portal.azure.com](https://portal.azure.com/).
2. Click on **Create a resource**.
3. Search for **Static Web App** and select static web app.
4. Click on **Create**.
![Azure Static Web App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rtdf0u9iyppdce2zao1.png)
 
Here we need to fill in a few details.
1. In the **project details**, choose your subscription.
2. For **Resource Group** click on **create new** and name it anything you like. 
3. Next, give your app a **Name**.
4. Hosting plan: **Free: For hobby or personal projects**
5. Next, select a region.
6. After that, in deployment details select **GitHub** as source and sign in with your GitHub account.
 - For **Organization**, choose your GitHub account from the dropdown.
 - Next, select **Repository** and **Branch**.
7. Now **Build details**
 - For **Build Presets**, if your website is built with a framework or a static site generator then choose accordingly otherwise choose **Custom**.
 - For **App location**, choose where your app files are there or if it is a simple website with only HTML and CSS files leave it as `/`.
8. Click on **Review + Create**.
![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zybxig4iovzi9703t1od.png)

9. Verify all the provided details and click **Create**.
10. Wait for a few seconds, after deployment is complete click on **Go to resource**.
11. Copy the **URL**, paste in a new tab and see.
![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebjqh13e02sjmcilz0in.png)

Congrats 🎉🎉🎉! Your website is now live on internet.
![Congrats gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erem0c7vh74yzp1z4ffd.gif)
If you have any doubts ask in the comments below 👇.

---

Also read,
- [How to host your website using GitHub pages](https://dev.to/rakeshpotnuru/how-to-put-website-online-under-10-minutes-3m2g)

---

Hope this helps you!
Save for reference.
Connect with me on [Twitter](https://twitter.com/rakesh_at_tweet) and [GitHub](https://github.com/RakeshPotnuru). Follow me for more 😃.
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes
Published: 2021-10-28 12:00:24

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e3bbae5.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why don't bachelors like Git?

___A:___ Because they are afraid to commit.
 -->
Top 10 dev.to articles of the month🏁.
Tags: webdev, javascript, beginners, programming
Published: 2021-10-28 11:37:57

---
title: Top 10 dev.to articles of the month🏁.
published: true
description: Most popular articles published on the dev.to in this month.
cover_image: https://source.unsplash.com/featured/?coding
tags: webdev,javascript,beginners,programming
series: Monthly dev.to top 10
---

DEV is a community of software developers getting together to help one another out. The software industry relies on collaboration and networked learning. They provide a place for that to happen.
Here is the most popular articles published on this platform.
{% post /jburroughs/bookmark-these-8-front-end-websites-now-gl0 %}

{% post /tyaga001/if-i-were-to-restart-javascript-again-from-scratch-then-i-will-follow-this-roadmap-5c02 %}

{% post /olanetsoft/12-github-repositories-to-help-you-ace-your-job-interview-2a08 %}

{% post /sourcegraph/15-developer-tools-to-make-you-super-productive-2g0a %}

{% post /muthuannamalai12/10-github-repository-every-web-developer-should-know-10pm %}

{% post /j471n/10-css-resources-that-you-should-bookmark-46l6 %}

{% post /0shuvo0/lets-create-a-screen-recorder-with-js-3leb %}

{% post /ali6nx404/cheat-sheets-that-always-save-my-time-during-web-development-2ga4 %}

{% post /madza/12-simple-html-snippets-to-avoid-complex-libraries-3na8 %}

{% post /aviyel/node-js-from-beginners-to-advance-31id %}
Enjoy these articles.
Follow me for more articles.
Thanks 💖💖💖
Mindset and Resource Management (while learning coding) 
Tags: beginners, programming, learners, allofus
Published: 2021-10-28 11:32:17

> Mindset

 Mindset is a much important resource to any human out there other than anything. It is more valuable than Gold, Diamonds, etc. Let's talk about myself I didn't have a PC or a Laptop when I started my Diploma(Computer-Engg.), me and my friend used to code on our college's computers. After a year it was pandemic and due to that, I was not able to code regularly due to which my coding skills downgraded.

Mindset while learning code should be even tougher because when you are coding it means you have enough sources assuming that I will tell you that even I face many problems sometimes because of the academics I have to focus on more than 1 language(technology) which is much time-consuming. Later I found a solution for it too.

> Resource-Management

 Again this is a much-underrated topic while learning. I think some tips can help you with issues you face.

// Always start with what you have.
// Never doubt yourself.
// At the beginning never learn by time (e.g.- giving 1 hour to 
   PHP and 1 hour to JAVA while learning both parallels).
// Learn by Goals (e.g.- I will clear the main class topic in JAVA
   by today).
// Beginners should learn one thing at a time.
// Understanding time. (I'll cover this topic briefly)
// Don't push yourself too hard.
// Stay positive.


> Understanding time

 It's a smart concept on its own. It means to map the time according to the learner's needs because every learner has different sources for learning. When I start learning a new language or anything new, I first decide the period in which I want to learn that particular thing. You can relate with following example.

> Scenario - I want to learn JAVA

--> Case-1 Have enough time
e.g.- If I have enough time I will go with javatpoint.com it 
      has detailed explanations of every concept.

--> Case-2 Shortage of time
e.g.- If I do not have much time and want to master skills than 
      I would go with W3Schools.com because it saves my time by 
      making concepts short. 

 I post content for online learning resources in the near 
 future.
PHP Namespaces
Tags: php, tutorial
Published: 2021-10-28 11:23:19

###Namespaces
PHP Namespaces provide a way in which to group related classes, interfaces, functions and constants.

Namespaces:
- Provide a way to better organize and group together classes according to functionality
- They allow the same name to be used for more than one class

For example let say you have multiple folders in the root folder. Each of this folder has an index.php file that contains a certain login.  As a concrete example, the file index.php can exist in both directory `/home/bazeng` and in `/home/other`, but two copies of index.php cannot co-exist in the same directory. In addition, to access the index.php file outside of the `/home/bazeng` directory, we must prepend the directory name to the file name using the directory separator to get `/home/bazeng/index.php`. 

In the PHP world, namespaces are designed to solve two problems:

- Name collisions between code you create, and internal PHP classes/functions/constants or third-party classes/functions/constants.
- Ability to alias (or shorten) Extra_Long_Names designed to alleviate the first problem, improving readability of source code.

Namespaces are declared at the top most section of a class. Namespace names are case-insensitive. For practical purpose create a folder called namespaces, inside create a `folder` called `Car` and create an `index.php` and copy the code below: 

```
<?php
namespace Car;

class Sedan{
   public model;
   public function __construct($model){
     $this->model = $model
   }
   public function getModel(){
     echo $this-> model
   }
}
class Lorry{
   public model;
   public function __construct($model){
     $this->model = $model
   }
   public function getModel(){
     echo $this-> model
   }
}


```
Go Back to the root folder namespaces and create an `index.php` file and copy this code:
```
<?php
namespace Car;
require "Car/index.php";
$sedan = new Sedan("Premio");
$lorry = new Lorry("Fuso");

$sedan->getModel();
echo "\n";
$lorry->getModel();

```
Host in your local server and in your browser navigate to the namespaces folder i.e `localhost/namespaces`. You can also clone this [repository](https://gitlab.com/samk3/phpnamespaces).

It can be useful to give a namespace or class an alias to make it easier to write. This is done with the `use` keyword:

```
use Car as C;
$car = new C();
```
PHP Static Methods & Properties
Published: 2021-10-28 11:21:38

######Static Methods
Static methods can be called directly - without creating an instance of the class first.
Static methods are declared with the `static` keyword:
```
<?php
class greeting {
  public static function welcome() {
    echo "Hello World!";
  }
}
// Call static method
greeting::welcome();
?>
```
A static method can be accessed from a method in the same class using the self keyword and double colon (::):

```
<?php
class greeting {
  public static function welcome() {
    echo "Hello World!";
  }

  public function __construct() {
    self::welcome();
  }
}

new greeting();
?>
```
Static methods can also be called from methods in other classes. To do this, the static method should be public:
```
<?php
class greeting {
  public static function welcome() {
    echo "Hello World!";
  }
}

class SomeOtherClass {
  public function message() {
    greeting::welcome();
  }
}
?>
```
To call a static method from a child class, use the `parent` keyword inside the child class. Here, the static method can be public or protected.

```
<?php
class Name{
  protected static function getName() {
    return "Bazeng";
  }
}

class SayName extends Name {
  public $name;
  public function __construct() {
    $this->name= parent::getName();
  }
}

$name= new SayName;
echo $name ->name;
?>
```
######Static properties 
Static properties are declared with the static `keyword` they can be called directly - without creating an instance of a class.Example:
```
<?php
class Person{
   public static $name = "Bazeng";
 }
echo Person::$name;
```
To access a static property in a method in same class use `self`
```
<?php
class Person{
   public static $name = "Bazeng";
   public function sayName(){
     echo self::$name;
   }
 }
 
 $person = new Person();
 $person->sayName();

```
To access a static property in a method in a parent class use `parent`
```
<?php
class Person{
   public static $name = "Bazeng";

 }
class SayName extends Person{
   public function __construct(){
    echo parent::$name;
   }
} 
 
$person = new SayName();
```
TDD Conference 2021 - Python - A Language Made For Test-Driven Development - Jan Giacomelli
Tags: tdd, oop, python, refactoring
Published: 2021-10-28 11:20:10

First International Test Driven Development took place on July 10th. 

In this series, I will include every talk together with my notes and further reading.

Hopefully, a lot of readers will watch and rewatch the talks, as they are worth several reviews.

Let's continue... 

## Bio 

Test-driven development is all about small steps and short feedback loops. The faster you know whether the system works or not the easier the development. Python is not the first language that pops into someone's mind when talking about TDD. Nevertheless, when you work with it you start realizing that it's perfect language. There's no overhead to have a working unit - you can write a simple function. There's no compilation - test suite starts immediately. You need zero dependencies to start with TDD - *unit test* library is built-in in standard library.

This talk is a roadmap through TDD philosophy in Python world.

## Talk

{% youtube MuRrxVF8CL0 %}

# My Personal notes

- In this talk, Jan show us how to use Python for Machine Learning TDD.
- TDD seems untestable with machine learning because of the indeterminism.
- Python comes with xUnit and Mock libraries.
- We can also install [pytest](https://docs.pytest.org/) that has a better functional syntax and fixture management.
- Pytest also warns on slow tests and can them in paralell
- Tests are created with the Given/Then/When notation
- Test starts without type hinting, and after we discover the domain, we type them.
- First tests are always fakes
- Repository is transient until we need to make it.
- We inject the repository instead of using mocks.
- TDD is similar to scientific method with hypothesis validation.
- In Machine Learning, you need to compare results against a threshold.
- You shouldn't measure accuracy because it can lead to overfitting scenarios.

# Speaker Links

- Twitter [@jangiacomelli](https://twitter.com/jangiacomelli) 
- LinkedIn [@jan-giacomelli-4a7066128](https://www.linkedin.com/in/jan-giacomelli-4a7066128/) 
- Site [https://typeless.com](https://typeless.com) 

* * *

Please follow TDD Conference on:

- [YouTube](https://www.youtube.com/channel/UCKn-DadPoyYssfAOMk1LSew)
- [Twitter](https://twitter.com/tddconf)
PHP Traits
Tags: php, tutorial, programming
Published: 2021-10-28 11:19:34

###Traits
PHP allows single inheritance only, A Trait is intended to reduce some limitations of single inheritance by enabling a developer to reuse sets of methods freely in several independent classes living in different class hierarchies.A Trait is similar to a class, but only intended to group functionality in a fine-grained and consistent way.It can have all access modifiers.

**You may ask yourself why would we need `traits` while we have `Interfaces` ?**
The difference is interfaces only have abstract methods. A trait has methods that are abstract and also defined.

To declare a trait use the `trait` keyword.

```
<?php
trait Person{
  public function talk(){
    echo "Hello,call later ";
  }
  public function walk(){
    echo "I am driving";
  }

}

class Driver{
   use Person;
}

$driver = new Driver();
$driver->talk();
$driver->walk();
```
**Using Multiple Traits**
```
<?php
trait Model {
    public function carModel() {
        echo 'Volvo ';
    }
}

trait Year {
    public function manufactureYear() {
        echo '2014';
    }
}

class DefineVehicle {
    use Model, Year;
    public function DescribeVehicle() {
        echo 'The Vehicle type is:';
    }
}

$car = new DefineVehicle();
$car->DescribeVehicle();
$car->carModel();
$car->manufactureYear();

?>
?>
```