teleren/devto huggingface dataset:
Extending PHP - why not a library instead?
Tags: php, webdev
Published: 2021-12-12 09:51:06

>**Just the Gist**  
>Extensions are *global* "libraries" that provide a specific functionality to PHP, such as MySQL-support or image manipulation.

## Extensions are almost not libraries
Extensions are plugins for the PHP language that provides a specific feature or functionality. There are many different extensions, some are bundled-extensions that are included with the PHP-language package and some are third-party extensions you can download from either [PECL](https://pecl.php.net/) or their specific vendors. Example of what these extensions can bring are:
* Connect to MySQL, PostgreSQL, SQLite (and more) databases.
* [Multibyte String](https://www.php.net/manual/en/intro.mbstring.php) support.
* [Internationalization (intl)](https://www.php.net/manual/en/intro.intl.php) for locale aware operations.
* [Graphics Draw (gd)](https://www.php.net/manual/en/intro.image.php) for creating and manipulating images.
* ...and so much more.

If you are using any PHP frameworks, you are probably already using one of these extensions. But if you are not, you can download them from [PECL](https://pecl.php.net/) or their specific vendors - but most likely you have some in your `php/ext` folder and have to activate them in the `php.ini`-file. Active extensions are not limited to just the current project you are working on. They will be available for all projects where you are using the same PHP environment. This may seem like a lot of extra-resources brought in where they might not be needed. So why are these extensions not libraries instead, that can be brought in on project-basis?

## The rationale
Something that distinguishes extensions from libraries are how they are implemented. Extensions are written in C (or C++) while libraries are written in PHP. An extension may be using C functions that are not available in PHP, but primarily it will  communicate directly with the driving force behind the PHP-language: the Zend Engine. This means that aside from having access directly to C functions, it gets a speed boost.

## What about you?
Is extensions confusing, or do they make a lot of sense? What benefits do you see of using extensions and not libraries? Would you rather see some extensions being libraries instead? Comment below and let us know what you think ✍

## Further Reading
* StackOverflow on when to use extensions: https://stackoverflow.com/questions/1567605/php-extension-vs-library-vs-class-when-and-why
* StackOverflow on converting between library and extensions: https://stackoverflow.com/questions/4960450/php-extension-vs-library-and-can-it-be-converted
* A list of bundled extensions: https://www.php.net/manual/en/extensions.membership.php#extensions.membership.bundled
Advent of PBT 2021 - Day 12
Tags: challenge, testing, webdev, javascript
Published: 2021-12-12 09:33:16

---
title: Advent of PBT 2021 - Day 12
published: true
description: Advent of Property Based Testing - Day 12
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: **validParentheses**.
It comes with the following documentation and prototype:
```ts
/**
 * Given a string s containing just the characters '(', ')', '{',
 * '}', '[' and ']', determine if the input string is valid.
 *
 * @param expression -
 *
 * @returns
 * An input string is valid if:
 * Open brackets must be closed by the same type of brackets.
 * Open brackets must be closed in the correct order.
 */
declare function validParentheses(expression: string): boolean;
```

We already wrote some examples based tests for it:
```ts
it("should accept simple expressions", () => {
  expect(validParentheses("[]")).toBe(true);
});

it("should accept nested expressions", () => {
  expect(validParentheses("[({})]")).toBe(true);
});

it("should accept expressions with multiple groups", () => {
  expect(validParentheses("[({})][]([])")).toBe(true);
});

it("should reject wrong matching bracket", () => {
  expect(validParentheses("[)")).toBe(false);
});

it("should reject unbalanced brackets with more closing", () => {
  expect(validParentheses("[]()}")).toBe(false);
});

it("should reject unbalanced brackets with more opening", () => {
  expect(validParentheses("[](){")).toBe(false);
});

it("should reject bad nesting", () => {
  expect(validParentheses("[(])")).toBe(false);
});
```

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-12-fjifg?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-12-solution-3oic

---

[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).
Monster 1.28 released
Tags: javascript, dom, node
Published: 2021-12-12 09:30:14

---
title: Monster 1.28 released
published: true
description: Monsterjs Release  
tags: javascript, dom, nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv6l2dcha8h7f4cgp1qu.png
series: Monster-Release
---

Today we released the latest edition of our Monster project. Monster is a collection of javascript classes that we need for daily work in [our](https://www.schukai.com/en/) web projects.

Besides small helper functions and classes, it also provides useful functions to enable reactive programming.

Monster is available via jsdelivr and npm.

Only the highlights are described here. The full functionality can be found in the [documentation](https://monsterjs.org/en/doc/1.28.0/).

## Node.toString()

The new `toString` implementation builds a text output from a tree structure. 

First we build a node structure.

```javascript
const n0 = new Node('abc');

const n1 = new Node('def');
n0.appendChild(n1)

const n11 = new Node('ghi');
n0.appendChild(n11)

const n2 = new Node('jkl');
n1.appendChild(n2);

const n3 = new Node('mno');
n1.appendChild(n3);

const n4 = new Node('pqr');
n2.appendChild(n4);
```

Now we call `toString` of the first node.

```javascript
n0.toString()
```

The expected output:

```
abc
 ├def
 | ├jkl
 | | └pqr
 | └mno
 └ghi
```




_hope you enjoy it!_



## References

- [npm](https://www.npmjs.com/package/@schukai/monster) 
- [jsdelivr](https://www.jsdelivr.com/package/npm/@schukai/monster)
- [we are hiring](https://about.schukai.com/de/jobs/)
Protecting your files on GitHub
Tags: node, github, javascript, tutorial
Published: 2021-12-12 08:39:32

I made a tutorial on how to create a <a href="https://dev.to/callmefarad/simple-nodejs-server-1ee6">**Simple Node.js Server**</a> which will serve as a basis for this tutorial as this tutorial will focus mainly on how to protect our files on GitHub.

Let's get started. 
Adding protection to our files makes it safe from hackers on the web whose intentions are in a negative direction. To get rid of such people, there is need to protect our files on the local repository before pushing them to GitHub using Git.

To do this, we would need to add a file to the previous application whose GitHub link is provided above.

## Adding .gitignore file
Create a file and name it ".gitignore" without the quote.
Open the file.
Enter the name of the file you want to save.

See sample code and image below:

```
node_modules
```


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


.gitignore is a directory that hides whatever file that is placed in it. Here we will hide the node_modules file from the viewers so as to reduce the size of our app when pushed to GitHub. By doing so, the file(node_modules) will no longer be visible to viewers who try to access the public repository on GitHub.

When all is done you can now push your local repository to GitHub.


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

From the sample image above you will notice that the node_modules directory on your local repository is no longer on remote repository.

Get the sample code on <a href="https://dev.to/callmefarad/simple-nodejs-server-1ee6">**GitHub**</a>.

I look forward to hearing from you by leaving a message on the comment tag.
Drop a like if this tutorial was helpful and follow me to get all my tutorials.

Thanks for reading.
Docker Compose - Ubuntu LAMP Setup on Windows
Tags: docker, ubuntu, apache, php
Published: 2021-12-12 08:33:03

**This setup is only for local development, so I didn't add any security-related layers to it.**

My Directory Structure for this setup was like this.


**lamp/**
      ├─ [Dockerfile](#docker-file)
      ├─ [docker-compose.yml](#docker-compose)
      ├─ [000-default.conf](#default-conf)

After setting up (copy the given files below) or download it from [here](https://github.com/vkuberan/ubuntu-lamp-setup). Then switch to the lamp directory and issue the following command.

```
docker-compose up
```

## Docker File
**File Name:** _[Dockerfile](https://gist.github.com/vkuberan/832fbeb5799f07a35e05473b47c843af)_
{% gist https://gist.github.com/vkuberan/832fbeb5799f07a35e05473b47c843af  %}

## Docker Compose
**File Name:** _[docker-compose.yml](https://gist.github.com/vkuberan/761f041cd09edfde956eef64971b7a20)_
{% gist 
https://gist.github.com/vkuberan/761f041cd09edfde956eef64971b7a20
%}

## Default Conf
**File Name:** [000-default.conf](https://gist.github.com/vkuberan/5af37d8f50287cfc3c45cb2863aefde9)
This file is used to enable rewriteurl feature in _/var/www/html/_
{% gist 
https://gist.github.com/vkuberan/5af37d8f50287cfc3c45cb2863aefde9
%}
Outreachy Blog #1: Introduce Yourself.
Published: 2021-12-12 08:29:03

I’m a Computer Science graduate from Aligarh Muslim University, India. I have been profoundly influenced by technology and the various ways it can be used to express art. I love to do coding and creating projects and have the curiosity to learn and contribute to projects. Almost every field of Computer Science piques my interest, more specifically development (Web development) and research. I have proficiency in languages such as Python, Java, JavaScript, and C programming language.

My core values are I'm always up for learning new things which helps me grow and makes me a better person than yesterday. I'm an honest person, I love honesty. Integrity is always been an eye-catcher for me. I'm a very integrated person. A person's values and integrity is what makes them different from others and valuable nothing can change that. My interests are painting and reading. I paint to view the world and read to visualize it.  I want to mention one of my favorite quotes from my favorite book "The Last Lecture": The Brick walls are there for a reason, they are not there to keep us out. The brick walls are there to give us a chance to show how badly we want something.

I always wanted to participate in some open source program and I love to contribute to free and open-source projects. And Outreachy is the best platform for it. Outreachy is an incredible initiative for promoting open source and diversity all over the world.  I’m always excited to get onto new projects and am motivated to learn new stacks. With my contributions at Moja global, I found it very comfortable working with a talented team. I found the idea or purpose of Moja Global very insightful. The mission of Moja Global is to support ambitious climate action by developing open-source software. My interest in Moja Global grew as I interacted with the team and got to know more about its projects and future goals. I’m very excited to work on the project of this community by improving it and making it more efficient. Along the way, I will also learn new skills. That's what motivated me to apply to Outreachy.
Advent of code day 12
Tags: adventofcode, adventofcode2021, programming, 42
Published: 2021-12-12 08:27:51

Here we are again.
Doing this every day is staring to get tiresome, we do not even get a weekend break! :-P

Anyway, today code is fully relying on immutable data structures.
If there is something I've learnt in those years of programming, is that recursive searches + mutability = bugs.

The key idea for part 2 is to define a 'Forbidden' type,
that is a structured datatype keeping track of the more complex condition to keep visiting.
If I tried to encode the new condition on a simple list of visited, I would still be coding.

The idea is that you can 'push' the new visited node on the forbidden instance, and check if we have got in a 'wrong' state.
Alternatively, I could have thrown an error.

For the fine details, yes, the code after 'next=' should probably go in a separate function to be more elegant.

```
reuse [L42.is/AdamsTowel]
Fs = Load:{reuse[L42.is/FileSystem]}
Big ={class method Bool(S that) = that.toStartUp()==that}
Edges = Collection.map(key=S,val=S.List)
Paths = Data.AddList:Data:{S name, This.List next List={}}
Forbidden = Data:{
  S.List visited=\[S"start"]
  Bool bonus=\.false()
  Bool wrong=\.false()
  method This push(S that) = 
    if Big(that) this 
    else \pushSmall(that)
  method This pushSmall(S that) = {
    X[!this.wrong()]
    limit = that==S"start" || that==S"end"
    visited = that in \visited
    if limit && visited return \with(wrong=Bool.true()) 
    if visited && \bonus return \with(wrong=Bool.true())
    if visited return \with(bonus=Bool.true())
    return \with(visited=\visited.withAlso(right=that))
    }
  }
Count = {class method I (Paths that)={
    if that.name()==S"end" && that.next().isEmpty() return 1I
    return 0I.acc()(for p in that.next() \add(This(p)))
    }}
Visit = {
  class method Paths(S that, Edges e, Forbidden forbidden) =   
    Paths(name=that,
      next= if that==S"end" \() else Paths.List()(
        for ni in e.val(key=that).val() {
          f = forbidden.push(ni)
          if f.wrong() return void
          return \add(This(ni,e=e,forbidden=f))
          }
        )
  )}
Main=(
  input = Fs.Real.#$of().read(\"input")
  imm edges = Edges()(
    for line in input.split(S.nl()) (
      s = line.split(S"-")
      s1 = s()
      s2 = s()
      on1 =\val(key=s1)
      on2 =\val(key=s2)
      v1 = ( if on1 on1.val() else S.List[] ).withAlso(right=s2)
      v2 = ( if on2 on2.val() else S.List[] ).withAlso(right=s1)
      \put(key=s1 val=v1)
      \put(key=s2 val=v2)
    ))
  res=Visit(S"start",e=edges,forbidden=\())
  Debug(Count(res))//3497 and 93686
  )
```

Finally, not that the problem can only be well posed if there are never two large caves in direct contact, otherwise we could loop forever.
Add Husky 🐶 to Angular
Tags: javascript, codequality, angular, typescript
Published: 2021-12-12 08:23:50

Code Quality Practice

It is really usual for developers to forget to run `lint` or `test` commands before committing their codes.

Husky is a library that provides us easy access to Git Hooks, we can easily manage to run some commands before committing the code.

Using it is really easy, if you are using NPM the command is

`npx husky-init && npm install`

It will add `npm test` as pre-commit by default, and here we need to add `lint` too, so we are going to add new pre-commit command using the following command

`npx husky add ./husky/lint 'npm run lint:fix`

For those who use Windows (like me), if a help message appeared, we need to use

`node node_modules/.bin/husky add` instead of `npx`

This one did not worked for me too, so what to do? 🧐

When run the command `npx husky init` it will add default test command for pre-commit, the configs exist under `.husky` directory when we open the file, it is simply fetching some bash file and then there is `npm test` command.

```bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm test
```

So all we need to do next to add our command and even update the existing command.

That's it!
From now on we can be sure that code quality will be kept at every developer commit.

```bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run test:ci
npm run lint:fix
```
The confusion between git and GitHub
Tags: javascript, git, webdev, github
Published: 2021-12-12 08:07:38

Hi everyone, I am back with a new article of this git and GitHub series, in these series I will discuss about the world's most popular version control system i.e. git, and about the tools and technologies that are associated with it.

## `git`
git is basically a version control software for tracking changes in any set of files, mainly used for source code management in open source and agile software development where a team of people coordinating for developing a particular project, to track every single workflow to it. Let's understand it more clearly with an example Suppose there is a team of 3 people A, B,C respectively coordinating to build a webapp. Now while working in a team every team member should know about every single change in the codebase of the project, they are working on. Like A changes a particular file name or B has implemented a new algorithm to a particular function in which C depends, now every single change or workflow will be tracked by git. So, nobody needs to ask each other about a changes and implementation. That's why git is used. 

## `GitHub`
 GitHub is a provider of internet hosting for software development and provides version controlling using git, Other than that GitHub also provides some additional feature for collaboration, bug tracking, issue management, etc. Like use have hosted your code to GitHub and no you can server it anywhere in the world. Other than that GitHub is the world most popular as it is used by almost every software developer in the world. GitHub also provides some other tools like and features like, code spaces, GitHub Desktop (a wonderful Gui for git), making organizations and teams, actions for automating workflow, issue tracking and many more.

##`Conclusion `
people often think that git and GitHub are same, but I think after reading this blog everyone's confusion is going to be disappeared. 
Feel free to comment out if you have any queries. 
Stay tuned for next , Happy Coding :)

##Connect
 <a href="https://linktr.ee/kumarkalyan">
  <img align="left" width="100px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" />
</a>
Windows Calculator
Tags: html, css, javascript, codepen
Published: 2021-12-12 07:14:32

<h5>This calculator looking and functions like windows 10 calculator.</h5>
Looking and function like windows 10 💻 calculate. <br>
<a href="https://ibb.co/SJ8kYMk">

Live Demo <a href="https://windowscalculator.netlify.app/" target="_blank"> #WindowsCalculator </a>
<ul>
<h3>Technologies used:</h3>
<li>HTML(Structure Building)</li>
<li>CSS(Designing/Presentation)</li>
<li>JavaScript(Logic Implemetation)</li>
</ul>


<h3>Let's Design Calulator Using HTML and CSS</h3>
<ul>
<li>HTML(hypertext Markup Language) is the standard markup language used to create basic structure of the website.</li>
<li>CSS (Cascading Style Sheets) describes how HTML elements are to be displayed on screen. It can control the layout of multiple web pages all at once.</li>

<li> JavaScript - We can do this by putting some classes in the HTML file. However, since we do not want to mix CSS classes with JavaScript classes, we can use data attributes to select them instead.

data-operation to represent your operation buttons, data-numbers to represent the number buttons, data-all-clear to represent the All-Clear button and data-delete to represent the Delete button. We can add these classes to the previous-operand and current-operand</li>

</ul>


{% codepen https://codepen.io/okrahul/pen/jOGWyKz %}
Simple Loader Animation with CSS
Tags: beginners, css, webdev, tutorial
Published: 2021-12-12 07:00:14

Hello everyone, In this article we are going to create **Loading Animation** with the use of simple CSS. 

Take a look of what we are designing 
{%youtube BCJbCkIb7GQ %}
##HTML
It's the simplest part of this project.
```html
<body>
    <div class="loader"></div>
</body>
```
That's it for HTML.

#CSS
To align the loader in center
```css
 body{
            display: grid;
            place-items: center;
            height: 90vh;
        }
```
Now styling the Loader
```css
        .loader {
  border: 10px solid #f3f3f3; 
  border-top: 10px solid #3498db; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
}
```
Now adding `keyframes` to animate the loader
```css

@keyframes spin {
  0% { transform: rotate(0deg);
       border-top: 10px solid blue;
}
    25%{transform: rotate(90deg);
        border-top: 10px solid green;
        
    }
    50%{transform: rotate(180deg);
        border-top: 10px solid yellow;
    }
    75%{transform: rotate(270deg);
        border-top: 10px solid red;
    }

  100% { transform: rotate(360deg);
        border-top: 10px solid blue;    
}
}
```

Our desired Loader Animation is ready.

If you love it♥ then show some love.
<a href="https://www.buymeacoffee.com/devrohit" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-blue.png" alt="Buy Me A Coffee" height="41" width="174"></a>
CSS Practices to avoid as a developer
Tags: css, webdev, beginners, tutorial
Published: 2021-12-12 06:45:39

## Set Margins or Padding and then RESET them
We often see developers coding their CSS margin/padding styles and then resetting them manually. Such as:
```css
.item{
     margin-right: 1.6rem;
}

.item:last-child{
     margin-right: 0;
}
```
Instead of using this extremely unhealthy practice, developers can simply use something like this:
```css
.item:not(:last-child) {
     margin-right: 1.6rem;
}
```

## Set Display:Block for flex items
When using Flexbox, it is important to remember that when you create a flex container (Add Display:Flex), all children (Flex Items) become BLOCKiFIED
Hence, instead of using code like:
```css
.parent {
     display: flex;
}

.child {
     display: block;
}
```
Developers can simply use
```css
.parent {
     display: flex;
}
```

## Use Width:100% for Block Elements
Since we, the developers already term the element with Display property, we don't need to add an additional width: 100% to it's children. For example, have a look at an example of the practice we need to avoid:
```html
<div class="parent">
     <div class="child">Item 1</div>
     <div class="child">Item 2</div>
     <div class="child">Item 3</div>
     <div class="child">Item 4</div>
     <div class="child">Item 5</div>
</div>
```
```css
.parent {
     display: flex;
     flex-wrap: wrap;
}

.child {
     width: 100%;
}

@media (min-width: 1024px) {
     .child {
          width: 25%;
     }
}
```
Instead, developers can switch to the following approach:
```html
<div class="parent">
     <div class="child">Item 1</div>
     <div class="child">Item 2</div>
     <div class="child">Item 3</div>
     <div class="child">Item 4</div>
     <div class="child">Item 5</div>
</div>
```
```css
@media (min-width: 1024px) {
     .parent {
          display: flex;
          flex-wrap: wrap;
     }

     .child {
          width: 25%;
     }
}
```

More bad practices in next article :wink: