teleren/devto huggingface dataset:
Docker Ubuntu LAMP Setup on Windows
Tags: docker, ubuntu, lamp
Published: 2021-12-09 08:49:00

**MY LAMP SETUP** 


1. **Pull Ubuntu** 

     ```
     docker pull ubuntu:latest
     ```

2. **Pull Mariadb** 

     ```
     docker pull mariadb:latest
     ```

3. **Create the shared network** 

     ```
     docker network create --driver=bridge lampstack
     ```
     
4. **Create MariaDB Container** 

     ```
     docker run -itd -p 33063:3306 --name=lampmysql \
     --network=lampstack \
     --env MARIADB_USER=root \
     --env MARIADB_PASSWORD=google \
     --env MARIADB_ROOT_PASSWORD=google \
     mariadb:latest
     ```

5. **Create Ubuntu Container** 
    
    Replace **"./htdocs"** with your working directory path.
    
    ```
    docker run -itd -p 8080:80 \
    --user root \
    --name=lampstack \
    --network=lampstack \
    -v ./htdocs:/var/www/html/ \
    ubuntu:22.04 /bin/bash
   ```
   
6. **Get in to the Ubuntu Container** 

    ``` 
    docker attach lampstack
    ``` 

7. **Install all necessary Apache/PHP packages** 
      
    Refer 1: [Ubuntu - Install LAMP Stack](https://www.tecmint.com/install-wordpress-in-ubuntu-lamp-stack/)
	
    Execute the following commands one by one.
 
    *Update Ubuntu*

    ```     
    apt-get update
    apt-get upgrade
    ```

    *Install necessary tools along with apache*

    ```
    apt-get install iputils-ping \
    vim \
    systemctl \
    apache2 \ 
    apache2-utils \
    ```

    *Enable apache server*

    ```
    systemctl enable apache2
    systemctl start apache2 
    systemctl status apache2
    ```
    
    *Install mariadb client and PHP*

    ```
    apt-get install mariadb-client \
    php \
    libapache2-mod-php \
    php-mysql \
    php-curl \
    php-gd \
    php-mbstring \
    php-xml \
    php-soap \
    php-intl \
    php-zip
    ```
    
    *Enable rewrite and Restart apache server*

    ```
    a2enmod rewrite
    systemctl restart apache2
    ```
   
8. **Rewrite Mode**

    If you want seo like links, You need to do some additional work
      
    Refer 1: [Ubuntu - Enable Mod Rewrite](https://www.digitalocean.com/community/tutorials/how-to-rewrite-urls-with-mod_rewrite-for-apache-on-ubuntu-20-04)

    Refer 2: [Ubuntu - Enable Mod Rewrite](https://www.digitalocean.com/community/tutorials/how-to-configure-the-apache-web-server-on-an-ubuntu-or-debian-vps)

    ```
    cd /etc/apache2/sites-available/
    vi default.conf or vi 000-default.conf
    ```
      
    Add following section to the one of the above mentioned file after CustomLog.
	
    ```
    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride all
        Require all granted
    </Directory>
    ```
      
    Enable mod rewrite and restart apache

    ```
    a2enmod rewrite 
    systemctl apache2 restart
    ```
      
**Additional configuration** 

1. **Install phpMyAdmin** 
    
    ```
    docker pull phpmyadmin/phpmyadmin
    ```

2. **Create container for phpMyAdmin** 

    ```
    docker run -itd -p 2599:80 --name=lampphpmyadmin \
    -e PMA_ARBITRARY=1 \
    --network=lampstack \
    phpmyadmin/phpmyadmin
    ```
Practice Asynchronous JavaScript with Quiz
Tags: javascript, codenewbie, webdev, programming
Published: 2021-12-09 09:35:44

## 01. [Asynchronous JavaScript quiz](https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous/what-is-asynchronous-in-javascript)

## 02. [Asynchronous JavaScript quiz](https://dev.to/ditdot/quiz-how-well-do-you-understand-asynchronous-javascript-5e4j)
Advent of PBT 2021 - Day 9 - Solution
Tags: challenge, testing, webdev, javascript
Published: 2021-12-09 09:28:53

---
title: Advent of PBT 2021 - Day 9 - Solution
published: true
description: Advent of Property Based Testing 2021 - Day 9 - Solution
tags: challenge,testing,webdev,javascript
//cover_image: https://direct_url_to_image.jpg
---

Our algorithm was: **sorted**.
[Go to the subject itself for more details](https://dev.to/dubzzz/advent-of-pbt-2021-day-9-55na)

CodeSandbox with a possible set of properties you may have come with: https://codesandbox.io/s/advent-of-pbt-day-9-solution-e7tfb?file=/src/index.spec.ts&previewwindow=tests

---

## Property 1: should have the same length as source

> for any array of values
> the sorted array should have the same length as the inputted one

Written with fast-check:

```ts
it("should have the same length as source", () => {
  fc.assert(
    fc.property(fc.array(fc.integer()), (data) => {
      expect(sorted(data)).toHaveLength(data.length);
    })
  );
});
```

## Property 2: should have exactly the same number of occurrences as source for each item

In addition to length, we can also check that the values have not changed. In other words, we want to make sure that if there was 5 times the number 8 in the array, then we will also see it 5 times in the sorted array.

> for any array of values
> the number of occurrences for each value in sorted version should be the same as the number of occurrences in the inputted array

Written with fast-check:

```ts
it("should have exactly the same number of occurrences as source for each item", () => {
  fc.assert(
    fc.property(fc.array(fc.integer()), (data) => {
      const sortedData = sorted(data);
      expect(countEach(sortedData)).toEqual(countEach(data));
    })
  );
});
```

## Property 3: should produce an ordered array

Up to now, we have not checked the key characteristics and requirement of a sort: being able to sort things. So let's do that with the following property:

> for any array of values
> the sorted version of the array should verify `sorted[index] <= sorted[index+1]` for any valid index

Written with fast-check:

```ts
it("should produce an ordered array", () => {
  fc.assert(
    fc.property(fc.array(fc.integer()), (data) => {
      const sortedData = sorted(data);
      for (let idx = 1; idx < sortedData.length; ++idx) {
        expect(sortedData[idx - 1]).toBeLessThanOrEqual(sortedData[idx]);
      }
    })
  );
});
```

---

[Back to "Advent of PBT 2021"](https://dev.to/dubzzz/advent-of-pbt-2021-13ee) to see topics covered during the other days and their solutions.

More about this serie on [@ndubien](https://twitter.com/ndubien) or with the hashtag [#AdventOfPBT](https://twitter.com/search?q=%23AdventOfPBT).
Advent of PBT 2021 - Day 9
Tags: challenge, testing, webdev, javascript
Published: 2021-12-09 09:28:22

---
title: Advent of PBT 2021 - Day 9
published: true
description: Advent of Property Based Testing - Day 9
tags: challenge,testing,webdev,javascript
//cover_image: https://direct_url_to_image.jpg
---

> _Advent of PBT 2021 — Learn how to use property based testing and [fast-check](https://github.com/dubzzz/fast-check) through examples_

Our algorithm today is: **sorted**.
It comes with the following documentation and prototype:
```ts
/**
 * Build a sorted version of the passed array by relying
 * on "<" comparison.
 *
 * @param tab - Original array to be sorted
 *
 * @returns
 * Sorted copy of the original array.
 */
declare function sorted<T>(tab: T[]): T[];
```

We already wrote some examples based tests for it:
```ts
it("should keep sorted array sorted", () => {
  expect(sorted([1, 2, 3])).toEqual([1, 2, 3]);
});

it("should sort reverse-sorted array", () => {
  expect(sorted([3, 2, 1])).toEqual([1, 2, 3]);
});

it("should sort any array", () => {
  expect(sorted([5, 2, 3, 1, 8])).toEqual([1, 2, 3, 5, 8]);
});
```

How would you cover it with Property Based Tests?

In order to ease your task we provide you with an already setup CodeSandbox, with examples based tests already written and a possible implementation of the algorithm: https://codesandbox.io/s/advent-of-pbt-day-9-mxzok?file=/src/index.spec.ts&previewwindow=tests

You wanna see the solution? Here is the set of properties I came with to cover today's algorithm: https://dev.to/dubzzz/advent-of-pbt-2021-day-9-solution-58dp

---

[Back to "Advent of PBT 2021"](https://dev.to/dubzzz/advent-of-pbt-2021-13ee) to see topics covered during the other days and their solutions.

More about this serie on [@ndubien](https://twitter.com/ndubien) or with the hashtag [#AdventOfPBT](https://twitter.com/search?q=%23AdventOfPBT).
Use factory to simplify prisma seed.
Tags: prisma, seed, typescript, devrel
Published: 2021-12-09 09:28:03

Prisma provides the ability to seed data. Once configured, it is convenient to create a seed with the script `npx prisma db seed`.
However, when you register data with the seed script, you need to enter all the parameters, which is a tedious aspect of preparation.

Let's consider the following table as an example
```prisma
model User {
  id        Int       @id @default(autoincrement())
  email     String    @unique
  userName  String    @unique
  lastName  String
  firstName String
  school    String

  @@map(name: "users")
}
```
In this case, the seed script looks like this
```typescript
// create bob
const bob = await prisma.user.create({
  create: {
    email: "bob@prisma.io",
    username: "bob",
    lastName: "curry",
    firstName: "bob",
    school: "demo",
  },
});

// create Chance
const chance = await prisma.user.create({
  create: {
    email: "chance@prisma.io",
    username: "chance",
    lastName: "weber",
    firstName: "chance",
    school: "demo",
  },
});
:
:
:
```
It may be enough, but it seemed a bit redundant to me. It is tedious to enter the parameters every time.

As a solution, I implemented the factory function using a library such as faker.js, but it's hard to maintain the factory function every time the number of tables or items increases.

So I thought that one of the ideal development flows would be to have a factory function created using `npx prisma migrate dev` or `npx prisma generate`, which is executed when a table is added or an item is added in Prisma.

Prisma has a good mechanism called generator, so I used it to create a generator called `prisma-factory-generator` that creates a factory from Prisma's Scheme.

https://github.com/toyamarinyon/prisma-factory-generator

Using this, we can rewrite the previous seed script to look like this.

```typescript
// For the sake of clarity, I have omitted imports
// and grammatical descriptions.
const bob = await createUser({ userName: 'bob' })
const chance = await createUser({ userName: 'chance' })
```

I think `Prisma-factory-generator` is useful not only for seeding but also for test code, so please try it if you like.
If you have a case where it doesn't work, please send an issue to

https://github.com/toyamarinyon/prisma-factory-generator/issues

## Special Thanks
The idea of creating a factory with Prisma generator is based on Chris Ball’s presentation at Prisma Day 2021.
discussion: https://github.com/echobind/prisma-factory/discussions/1
presentation: https://www.youtube.com/watch?v=a5S5thDd7Xg
How to Build a Successful DevOps Testing Strategy for Agile Teams
Tags: agile, devops, testing, strategy
Published: 2021-12-09 09:17:28

As the definition suggests, speed and reliability are the two main objectives in a DevOps testing strategy.

The traditional independent-working mindset would be removed by tightening the Dev (development) and Ops (operations) functions together. The process, in turn, makes tight delivery schedules for processes at scale less of a nightmare.
[How to Build a Successful DevOps Testing Strategy for Agile Teams](https://www.katalon.com/resources-center/blog/devops-testing-strategy/)
Game javascript: clone BEWITCHED - Commodore VIC-20 Game 1983 
Tags: canvas, javascript, game, videogame
Published: 2021-12-09 09:04:22

---
title: Game javascript: clone BEWITCHED - Commodore VIC-20 Game 1983 
published: true
description: clone BEWITCHED - Commodore VIC-20 Game 1983
tags: canvas, js, game, videogame
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrhp50ob7f5hk87u7pdg.png
---


Find the right colour to open the doors to reach the end of the labyrinth without getting caught by the guardians.

{% codepen https://codepen.io/camizzilla/pen/ZEyVVdY default-tab=result %}
Using Flex like a Pro
Tags: reactnative, react, javascript, webdev
Published: 2021-12-09 09:01:16

###Flex defines how much that view would fill the screen.

###Space would be divided according to the flex property of each element.

In the following example, the container view has flex: 1. 

The red view has flex: 1, the yellow view has flex: 2, and the green view has flex: 3. 

1+2+3 = 6, which means that the red view will get 1/6 of the space, the yellow 2/6 of the space, and the green 3/6 of the space.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l50svdkr2xcdhtywamkv.png)
 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zljxfy2i3f2483rii7jo.png)
 

---

---

###FlexDirection

It is the property which defines the direction in which the child components are laid out. 

---

####FlexDirection -"Row"

Align children from left to right.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rslipmcpbcpsrcq61ue.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jffvkj8zua1wqrhq0235.png)
  

---


####FlexDirection - Column(default)

Align children from top to bottom.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmezglyz9i0ns4yw2rj1.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqk6wtvkeq2prfhv9asr.png)

---

---


>Web development has tons of different layout techniques and >tricks available. While in React Native your best tool for >building layouts be will be Flexbox.

**DISCLAIMER**
Flexbox in React Native is a bit different from *CSS Flexbox*. Differences are subtle but they are still there.
How to use package-lock.json
Tags: node, npm, cicd, pipeline
Published: 2021-12-09 08:29:05

What is package-lock.json usage after all?? 😒

The answer is simple!

We want all developers to develop code with the same package versions!
Another use case is we want exactly the same package versions to be installed in the pipeline of course!!

But why when run `npm i` it will update package-lock.json and sometimes it will update package.json?? 😮

This is its job!!!
It will make sure the latest stable package be installed!

So how do we make use of `package-lock.json`? 🙄
It's simple!
We need a clean install! 😎

But how? 😐
with `npm ci` 🤗
Unit Testing : Make Others Adopt it
Tags: testing, tdd, unittesting, cleancode
Published: 2021-12-09 08:28:16

Hello :smile:

Today it is just a small article , to say that i will not go in depth about the part 4 in the book [The Art Of Unit Testing](https://www.amazon.fr/Art-Unit-Testing-Roy-Osherove/dp/1617290890). Just give few words.


## Last Words
I will simply says that the advices in the part 4 are about making organization adopt unit testing and test driven development , and Roy Osherove give us a bunch of advices . I highly recommend you to read this but just after mastering unit testing and see the benefits in your daily life in the I.T.

## Why master Unit Testing before ?

Because sometimes to make others adopt it you are going to be alone , it is like a phone you should better be sure that it is great before saying to people around you to buy it . Unit Testing is same you better be convince about it before go against everybody in your organization . We do not tell this sometimes but we are going to say to everybody that what the organization is currently doping can be done a better way.


## You should know how to handle Legacy Code 

It is reallyyyyyyyyyyyyy Important . Big Organization do not create new software every months , sometimes they ad features to existing software and you better know how to add unit tests to it and handle it with test driven development.
Read the [Working Effectively with Legacy Code](https://www.amazon.fr/FEATHERS-WORK-EFFECT-LEG-CODE/dp/0131177052)


## You should Know Object Oriented Principles
Saying that writing unit tests can be done everywhere is true but in a system write with OOP it is better to introduce tdd and unit testing . So learn in deeply well . Do not forget unit testing is about creating a small world for a small unit of your software ; but this small unit has dependencies ; how to replace or handle these dependencies ? with abstraction and in OOP there is many ways to do that.
Read the [Clean Code Book](https://www.amazon.fr/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882) 


Thanks for Reading  :blush:
Installing git on Mac
Tags: beginners, git, github, productivity
Published: 2021-12-09 08:24:23

Unlike Windows operating systems, a considerable number of packages are installed via [CLI](https://www.w3schools.com/whatis/whatis_cli.asp) on [UNIX](https://en.m.wikipedia.org/wiki/Unix) based operating systems.

 Thus, we'll go through installation on git Mac, which happens to be a prominent member of the UNIX related OS.

Shall we get to it 🏂.

1. Open terminal (CLI) on your Mac
On your Mac, do one of the following:
 Click the Launchpad icon in the Dock, type Terminal in the search field, then click Terminal.

2. Check if git exist on your machine 💻 already. To do this type the following in your terminal then press enter. If git does not exist, it will prompt for installation. ````bash
git --version
````


3. Next install ***brew***, the [package manager for mac](https://www.debian.org/doc/manuals/aptitude/pr01s02.en.html), I'll leave a guide to installing brew in the additional resource section of this post 😚.

4. Once you have brew up and running, enter the following command in your terminal. ````bash
brew install git
```` This will download and install git on your machine.
While the process is on, it might be a good time to grab a cup of coffee ☕, we're just getting started 🙂.

5. The terminal will inform you once the installation is completed. To verify the installation, type the following in your terminal and press enter.````bash
git --version
````
This should give an output similar to one in the image below;

![verify git installatio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa41k1n6uhf9hytcmorp.png)

Very well then, we just installed git on you machine.
Should you encounter any error, be sure to add them to the comment section, dev.to community got your back so do I

## Additional resource 
- [CLI vs GUI](https://pediaa.com/difference-between-gui-and-cli/amp/)
- [Using terminal on Mac](https://support.apple.com/en-ng/guide/terminal/apd5265185d-f365-44cb-8b09-71a064a42125/mac)
- [Installing Git on Mac](https://git-scm.com/download/mac)
-[Installing brew on mac](https://brew.sh/)
Activity OverYou
Tags: actionshackathon21
Published: 2021-12-09 07:58:38

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhpujz0y36hntacf0q36.png)
### My Workflow
Activity OverYou displays your Github Activity Graph right in front of you, in your palm, anytime, anywhere. We use our own custom-made Github action to calculate the User events and send the normalised ratio to the NodeMCU via the MQTT server via Adafruit.


### Submission Category: 
Interesting IoT
Wacky Wildcards


### Yaml File or Link to Code
{% github shubhampalriwala/activityoveryou %}


### Additional Resources / Info
[Figma Link](https://www.figma.com/file/KkNuGikbT1tsMk4xH7pUKc/ActivityOverYou?node-id=0%3A1)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18mq02rggnzz9cwhat91.png)
Scraping a Web Page in Browser using XPath and Javascript
Tags: beginners, webscraping, javascript, tutorial
Published: 2021-12-09 07:53:52

As a programmer we should think to automate anything related to our daily task every single time if possible. For instance when you gathering amount of data on a web page, rather than copying the text one-by-one you could do a simple web scraping.

## The Case

I will demonstrate how to scrap the youtube playlist of PyCon ID 2020 Talks in this youtube page [https://www.youtube.com/playlist?list=PLIv0V1YCmEi3A6H6mdsoxh4RDpzvnJpMq](https://www.youtube.com/playlist?list=PLIv0V1YCmEi3A6H6mdsoxh4RDpzvnJpMq). As the result, I will have a list of video titles.

![pycon id 2020 playlist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7dz4ac060oborpzi0sj.png)

## The XPath

XPath is the query languange to get the nodes/elements on the XML or HTML, you could learn it more on other resources like W3school [https://www.w3schools.com/xml/xpath_intro.asp](https://www.w3schools.com/xml/xpath_intro.asp). The simple query example for getting nodes containing the video titles is this:

```
//a[@class="yt-simple-endpoint style-scope ytd-playlist-video-renderer"]
```

> The above xpath syntax may not work if the web page structure is changed in the future.

You could also try this yourself in the Chrome/Edge Browser developer tools, on the `Elements` tab and `Ctrl + F` to start using Xpath. The result indicates that it has 39 items and it seems to be right.

![xpath for the playlist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8309zb3zgjkhytqkdaqt.png)


## The XPath Utility Function in Javascript

After found the right xpath for the element, now open `Console` tab in the browser developer tools to begin typing some javascript. Javascript has a built-in XPath utility function that has syntax like this `$x()`. We could pass the xpath string  to the function and check the length:

```js
$x('//a[@class="yt-simple-endpoint style-scope ytd-playlist-video-renderer"]').length
```

![xpath result count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udk9i7dilifod22n2ndk.png)

If the output length matches the numbers of items we want to scrap, then the function will works. Now we just need to get the list of titles and return it to the console screen:

```js
$x('//a[@class="yt-simple-endpoint style-scope ytd-playlist-video-renderer"]').map(function(el){return el.text.trim()}).join("\n")
```

![xpath result list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypn04ix9r120uls718gx.png)

The output in the console may look weird because of the `\n`. But when you copy the string contents and paste it on the editor like Visual Studio Code, you will get a clean result:


![result strings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6acjoc16kqgyhawkx8a9.png)

Hope this will be useful for you.
Hello GitHub Actions 2021
Tags: actionshackathon21
Published: 2021-12-09 07:35:37

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)

This is my first attempt of GitHub Actions in 2021. Thanks DEV for giving me such a great motivations (I love stickers!) to learn GitHub Actions as a potential alternative of CI/CD. 



### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

- Goal : this action just says Hi to the user when a commit is made

- My workflow to complete this project:
  - keep track of the development process via Git & GitHub
  - create a npm package
  - install @actions/core and @actions/github packages
  - add a index.js as the entry file with proper details included
  - add a action.yml to define the steps on GitHub Actions
  - create a new GitHub repo & commit the project to the repo
  - add ./github/workflows/main.yml with proper details included to test whether the action works

- NOTE: we need to upload node_modules to the GitHub repo


### Submission Category: 
Wacky Wildcards


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

{% github https://github.com/peterhychan/hey-github-actions/ %}


### Additional Resources / Info

[GitHub Actions Docs](https://docs.github.com/en/actions)
Facing issue in PWA app
Tags: pwa, javascript, help
Published: 2021-12-09 07:30:42

Hi , i am creating a PWA game app using HTML5 Games, one game have index.php file and when i am trying to play it then insteap of play screen index.php file downloading -here is demo link of PWA - [](https://jolly-yalow-63f659.netlify.app/ )( Facing issue in " stack & earn " game and other games have index.html so they are working perfectly )  how can i resolve this issue