teleren/devto huggingface dataset:
Spectacular prerelease v0.4 reintroduces the required pipeName option for pipe harnesses
Tags: opensource, angular, testing, spectacular
Published: 2022-08-10 18:50:29

---
title: Spectacular prerelease v0.4 reintroduces the required pipeName option for pipe harnesses
published: true
description: The required pipeName option is reintroduced by Spectacular prerelease version 0.4.0.
tags: opensource,angular,testing,spectacular
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th4he3wwhkal0r1f8573.png
# Use a ratio of 100:42 for best results.
---

*Cover art by DALL-E.*

In July 2022, we [published the version 0.4.0 prerelease of Spectacular](https://github.com/ngworker/ngworker/releases/tag/spectacular-v0.4.0), the integration testing library for Angular.

> Note that for prerelase versions, that is versions <1.0.0, minor version increases indicate breaking changes, for example releasing version 0.4.0 introduces at least one breaking change compared to version 0.3.0. Patch version increases for prerelease versions indicate bugfixes, refactors, performance improvements, and/or feature additions.

Let's discuss the breaking changes between prerelease versions 0.2.0-0.4.0.

## The pipeName option for pipe harnesses is reintroduced
Back in Spectacular prerelease version 0.3.0, released in May 2022, we removed the `pipeName` option from the `createPipeHarness` factory to make Angular pipe testing easier. This was a breaking change as the `pipeName` option was removed entirely in version 0.3.0.

Unfortunately, a function we used internally for determining the pipe name was removed from Angular as it was a leftover from Angular View Engine.

Because of this, Spectacular version 0.4.0 introduces the breaking change of adding back the required `pipeName` option for `createPipeHarness`.

Spectacular version 0.3.0:

```typescript
const harness = createPipeHarness({
  pipe: PowPipe,
  value: 2,
});
```

Spectacular versions <0.3.0 >=0.4.0:

```typescript
const harness = createPipeHarness({
  pipe: PowPipe,
  pipeName: 'pow',
  value: 2,
});
```

Read [the documentation for Spectacular's Pipe testing API](https://ngworker.github.io/ngworker/docs/pipe-testing) for full examples of Angular pipe integration tests.
Linked List Part-3
Tags: beginners, programming, tutorial, python
Published: 2022-08-10 18:09:42

find the middle element of a singly linked list without iterating the list more than once?

**Solution- ### Python**
```
Node* getMiddle(Node *head)
{
     struct Node *slow = head;
     struct Node *fast = head;
 
     if (head)
     {
         while (fast != NULL && fast->next != NULL)
         {
             fast = fast->next->next;
             slow = slow->next;
         }
     }
     return slow;
}
```
Finding unpaired number
Tags: dart, algorithms, programming, javascript
Published: 2022-08-10 17:46:00


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

The explanation lies in the binary representation of the number. It uses the same trick as the bitwise encryption. When we meet the same character twice, the XOR operation gives 0. So all that is left is a number without a pair.

Example
[1, 2, 1]
0 ^ 1 (000 ^ 001) = 1 (001)
1 ^ 2 (001 ^ 010) = 3 (011)
3 ^ 1 (011 ^ 001) = 2 (010)
Answer is 2
Marker not showing in Next/React App | @react-google-maps/api
Tags: react, javascript, googlemap, nextjs
Published: 2022-08-10 17:43:00

## Fixing Marker component

**Npm Package: @react-google-maps/api**

I was working with React Google Map Api today and I found myself figuring and scratching my head on why wasn't the Marker showing up on the app? I configured literally everything on the file that I was working on and that included: checking Google Map API, rechecking all the code, rechecking typos, rechecking imports. 

All that but it still doesn't work. And you know what's worse? When I try to **console.log(<Marker position={center}/>)**, the Marker component just randomly show up and it made me question myself and the code that I was writing. 

Anyway, if your React/NextJS project has **React version of 18**, it turns out you have to remove **StrictMode** from your project in order for the Marker component to show up.

## Removing StrictMode from ReactJS
```javascript
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
```
to 
```javascript
ReactDOM.render(
    <App />
  document.getElementById('root')
);
```

## Removing StrictMode from NextJS
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false
}
```

After that your code should work and the Marker component should appear!
Rubocop - Linting QuickStart for Ruby
Tags: ruby, inthirtyseconds
Published: 2022-08-10 17:42:00

> Knowledge Base: Lint, or a linter, is a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs.

Make sure you have your ruby environment(check [compatibility](https://docs.rubocop.org/rubocop/compatibility.html)) working before proceeding.

## Installation

Simply run

```zsh
% gem install rubocop
```

---

## Configuration

Create a `.rubocop.yml` file in your home(`% cd ~`) directory for all ruby projects. Alternatively, you can create it in your project directory.

### Default Configuration

[Default Configuration](https://github.com/rubocop/rubocop/blob/master/config/default.yml)

### Recommended Configuration

[Jayesh's rubocop configuration](https://gist.github.com/jayeshmann/ebdfb33aa27dabc3bc2f5ff1b5f694dc)

---

## Usage

### Check

In your project's directory,

```zsh
% rubocop
```

or you can specify a file or a directory of your choosing.

```zsh
% rubocop lib/file.rb spec/
```

> If you don't have rubocop on your terminal, try `bundle exec rubocop`

### Correct

```zsh
% rubocop -a
```

> Knowledge Base: Only safe offenses will be fixed with `-a`

---

## Official Links

[Official Website](https://rubocop.org/)

[Official Documentation](https://docs.rubocop.org/)

[Community Ruby Style Guide](https://rubystyle.guide/)

### All rules

Here is the list of rules with their categories:
<https://docs.rubocop.org/rubocop/cops.html>

---

#### More Guides

[RuboCop: How to install and configure](https://sourcelevel.io/blog/rubocop-how-to-install-and-configure)

[Installing and Running Rubocop](https://gist.github.com/stungeye/10423491)

---

License: [AGPL-3.0-or-later](https://spdx.org/licenses/AGPL-3.0-or-later.html)
Law Blocks to Revolutionize the Global Legal Community.
Published: 2022-08-10 17:13:53

The Law Blocks consists of a platform for creating and selling Smart Legal Contracts that are fully customizable. With Law Blocks' easy-to-use interface, the user can select and assemble contract elements that contain the necessary computer code and accompanying legal language.

The resulting technological product is a truly smart legal contract. The Law Blocks Editor allows users to create Smart Legal Contracts, starting from a blank document or using templates made available by legal experts.

Law Blocks Marketplace facilitates the sale of smart legal contract templates created by users on this platform.

Four innovative dispute resolution mechanisms graduated in complexity for dispute resolution.

a. Free legal aid (by law blocks team) Mediation and Arbitration: Law blocks provide free legal aid for small and medium values disputes,

b. Community voting democratically: An online dispute resolution mechanism where community members can participate in the decision-making process designed to resolve disputes.

c. Mediation and/or Arbitration for resolving disputes (Party choice): Online dispute resolution mechanism where experts who are members of the community selected by the parties can participate in the decision-making process and resolve disputes.

d. Arbitration courts and Arbitration and Resolution Center: Digitised commercial Arbitration renders arbitration awards that are binding, fully recognizable, and enforceable under the New York Convention, designed for high-value disputes.
Integração do NextJS com OneTrust
Tags: braziliandevs, tutorial, nextjs, javascript
Published: 2022-08-10 17:28:33

Quando foi implementado o [OneTrust](https://www.onetrust.com/br/) no site de um dos projetos que trabalhei, acreditei que seria algo fácil, coisa poucas linhas de código no layout **_document.js** da aplicação, mas não acreditava que o buraco seria um pouco mais em baixo. Com o tempo de uso, foi relatado um problema que passou despercebido. Quando se importa os dados da CDN do OneTrust, no **<Head>** da aplicação a mágica toda acontece. Vamos pro código:
```
<script
  src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
  type="text/javascript"
  charSet="UTF-8"
  data-domain-script={process.env.NEXT_PUBLIC_ONETRUST_KEY}
></script>
  
<script
  type="text/javascript"
  dangerouslySetInnerHTML={{
    __html: `function OptanonWrapper() { }`,
  }}
/>
```
Esse código é colocado no componente **<Head>** da página **_document.js**. Esse javascript é responsável responsável por mostrar no site os termos para aceitar os cookies, e gerenciar os cookies do site. O gerenciador de cookies é acessado por um botão na aplicação que deve conter um id e uma class que são lidas pelo JS da OneTrust.
```
<button id="ot-sdk-btn" className="ot-sdk-show-settings">
  Gerenciar cookies
</button>
```
## Erro reportado
Quando se navegava pelas páginas, foi reportado que não se conseguia acessar o gerenciador de cookies. Depois de muita busca cheguei a esse site [How to add Google Analytics 4 to Next.js](https://flaviocopes.com/nextjs-google-analytics/) (no qual me deu uma luz) com a seguinte implementação, usando o gtag.

### Segundo passo, resolvendo o problema
A solução desenvolvida para acabar com esse erro foi a seguinte:
```
const router = useRouter();

useEffect(() => {
  const handleRouteChange = () => {
    window.OneTrust.initializeCookiePolicyHtml();
  };

  router.events.on('routeChangeComplete', handleRouteChange);

  return () => {
    router.events.off('routeChangeComplete', handleRouteChange);
  };
}, [router.events]);
```
Na página **_app.js** da aplicação você deverá importar o **useRouter** do NextJS, e dentro do **useEffect** você deverá escutar os eventos do router. Quando a rota mudar completamente, ele escutará os eventos, e inicializará a biblioteca do OneTrust.

## Considerações finais
Esse problema poderá ocorrer com qualquer biblioteca externa servida via CDN. O aconselhável, caso ocorra, e verificar quais as bibliotecas existentes no objeto **window** no console do navegador.
How to Publish a Docker Image to GitHub's Container Registry
Tags: github, docker, tutorial, devops
Published: 2022-08-10 17:20:00

During my summer internship, I learned about  publishing a docker image to GitHub's Container Registry using GitHub Actions. I decided it would be a nice thing to share so i made a blog post .

### Step 1: Create a new repository
For this tutorial, I'll be naming my repository “publish-to-gcr”. After we're done naming our repository, we're gonna want to make sure that our repository is public.


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

### Step 2: Create a file

You can create any program with files of your choice, but for my example, I'll create an `app.js` file. Inside of the `app.js` file, I'll console.log the words, "Hello, world!"



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

### Step 3: Create a Docker file

At the root of the project, I created a Docker file with the following contents.

```docker
FROM node:alpine
COPY . /app
WORKDIR /app
CMD node app.js
```

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



### Step 4: Create an action

At the root of my project, I created a `.github/workflows` folder. Inside of it, I created a file called `publish.yml`. Inside of my `publish.yml`, I wrote the following code (please note that you will need to replace some values such as the user name:

```yml
name: publish
on: [push]
jobs:
publish-hello-docker-image:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Login to GitHub Container Registry
uses: docker/login-action@v1
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Build the hello-docker Docker image
run: |
       docker build . --tag ghcr.io/deselikem/hello-docker-gcr-demo:latest
       docker run ghcr.io/deselikem/hello-docker-gcr-demo:latest
       docker push ghcr.io/deselikem/hello-docker-gcr-demo:latest
```

### Step 5: Push and commit your changes to trigger the action

Head over to the Actions icon in your repository. You should see the action that we created using the text editor. If everything was done correctly, the actions should have been run and we can go check to see all the steps that the Action took to make sure that it's properly published.

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

### Step 6: Check out your package that's been published on GitHub's container registry!

In your repo, if you scroll down, you will see a section highlighting the packages associated with your repository. It should the one you just made!

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

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

_If you prefer video tutorials over blog tutorials, I created a video tutorial for you to follow. Check it out!_

{% youtube X2IFSIKBfhQ %}
Best UI/UX design studios currently hiring!
Tags: design, uxdesign, productivity, career
Published: 2022-08-10 17:00:50

[Tcules - A product design studio](https://tcules.com/)
[Divami Design Labs](https://divami.com/)
[Visualbest](https://www.visualbest.co/)
[Lucid](https://www.lucid.co.in/)
[Therefore Design](https://www.thereforedesign.co.in/careers)
Bookmarklet for YugabyteDB table's tablets
Tags: yugabytedb, css, distrtibuted, sql
Published: 2022-08-10 16:52:00


You may have seen in this blog that screenshots I take from the YugabyteDB console may have less columns. An example:
This:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rnrkwdjaua78c91671l.png) 
Rather than this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wa2wfk50xkbg73evgjk.png) 
 
I do it for clarity, removing the columns that are not meaningful for the blog post. This help with the very low [dev.to](dev.to/franckpachot) image resolution. I also use it for presentations where it is better to show only the relevant info in large fonts.

I do that simply with some CSS and I'll share in this post the bookmarklets I use. For example, for the above, just create a bookmark with this
```js
javascript:(function()%7Bdocument.querySelectorAll('.table-striped%3Anth-child(4)%20tr%3E*%3Anth-child(n%2B3)%3Anth-child(-n%2B6)').forEach(el%20%3D%3E%20el.style.display%20%3D%20'none')%3Bdocument.getElementsByClassName(%22yb-main%20container-fluid%22)%5B0%5D.style.marginLeft%3D%2288px%22%3Bdocument.getElementsByClassName(%22sidebar-wrapper%22)%5B0%5D.style.width%3D%2299px%22%7D)()
```
and it will remove columns `3` to `6` on the `4`th table, which is the list of tablets from the master webconsole.

It does this:
```javascript
document.querySelectorAll(
    '.table-striped:nth-child(4) tr>*:nth-child(n+3):nth-child(-n+6)'
    ).forEach(el => el.style
    .display = 'none');
document.getElementsByClassName("yb-main container-fluid")[0].style.marginLeft="88px";
document.getElementsByClassName("sidebar-wrapper")[0].style.width="99px";
```
In short:
- `.table-striped:nth-child(4)`: the 4th table of class `table-striped`
- `tr>*`:the first tag under `tr` (it is `th` or `td`)
- `nth-child(n+3)`:from the 3th one
- `:nth-child(-n+6)`: to the 6th one
- finally I resize the sidebar menu

I transformed it to a bookmarklet with https://mrcoles.com/bookmarklet/
📌 Spend $0 to learn HTML and CSS. 🧵 3 FREE resources to learn it 👇
Published: 2022-08-10 16:51:10

1. FreeCodeCamp:

I don't think you need me to tell you how awesome FreeCodeCamp is and this course proves that.

It is over 300 hours long and will set you up for a great front-end dev career.

🌍 Check it out here: 
(https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)

2.** Scrimba:**

Scrimba is one of my all-time favorite destinations for high-quality courses and once you take this one, you'll know why I love it so much.

This one also has 5 projects that you can do to cement your knowledge
🌍 Check it out here:
(https://scrimba.com/learn/htmlandcss)

3. Frontend Mentor:

After having learned the syntax, the time is now to practice.

And this resource is just for that.

You'll get to work on professional designs and hone your skills.

🌍 Link: (https://frontendmentor.io)
Rainfall prediction : ML project in Python
Tags: python, machinelearning, ai, programming
Published: 2022-08-10 16:46:05

Machine learning, deep learning, AI .. buzz words these days, but are they really ?

According to techtarget website, Machine learning was first conceived from the mathematical modeling of neural networks. A paper by logician Walter Pitts and neuroscientist Warren McCulloch, published in 1943, attempted to mathematically map out thought processes and decision making in human cognition.

This is a tutorial I created to show you how we can predict rainfall based on data from Austin weather center.
{% youtube nXdBGBLQjZY %}
The code and data can be found here => https://github.com/BekBrace/Machine.Learning.Rainfall.Prediction



In 1950, Alan Turning proposed the Turing Test, which became the litmus test for which machines were deemed "intelligent" or "unintelligent." The criteria for a machine to receive status as an "intelligent" machine, was for it to have the ability to convince a human being that it, the machine, was also a human being. Soon after, a summer research program at Dartmouth College became the official birthplace of AI.

From this point on, "intelligent" machine learning algorithms and computer programs started to appear, doing everything from planning travel routes for salespeople, to playing board games with humans such as checkers and tic-tac-toe.

The way I see it, Machine learning is like an ocean and we are still on the shore, I mean by time the progress will be big and the effect will be universal not only in the algorithms we write in Python or JavaScript to automate / to train / test / predict ..etc but actually machine learning will be very effective in medicine, education, engineering and other fields as well.
Do we really need Flux, Vuex, Pinia, MobX and all the other Statemanagement Frameworks?
Tags: javascript, react, vue, state
Published: 2022-08-10 16:43:00

Or is it sufficient to us the build in reactivity system of  Vue or the other frontend frameworks like in SolidJS.

I think it is the same question like using Axios or fetch?
You don't have to axios any more in times of the fetch API and it makes your source easier to understand.

The JavaScript World gets overwhelmed with frameworks and libraries, that soon gets replaced by the next one.

The argument to use them get killed with the next one coming up from nowhere. So why using them at all and how often do you really need them to share a state between to components.

Less is more.

What do you think?
New achivements of Mezon PHP Framework - August 2022
Tags: php, mezon, api, framework
Published: 2022-08-10 16:43:00

Hi! Today I'am going to continue posting news about [Mezon Framework](https://github.com/alexdodonov/mezon) improvements.

## Mezon Router bugfix

In [1.5.x](https://github.com/alexdodonov/mezon-router) version the bug was fixed for routers wich return `false`. In previous versions of router `false` value was traited like 'Route handler was not foud' what was obviously buggy behaviour.

```php
$router = $this->getRouter();
$router->addRoute('/catalog/[a:cat_id]/', function (): bool {
    return false;
});

// test body
$result = $router->callRoute('/catalog/foo/');
```

Earlier this code caused exception but now is working fine.

## Mezon Router refactoring

Lots of duplicate code was removed.

## Non-ASCII parameters were implemented in the Mezon Router

Non-ASCII parameters were implemented as was requested in [this issue](https://github.com/alexdodonov/mezon-router/issues/35). Now this code works fine:

```php
$router = $this->getRouter();
RouterUnitTestUtils::setRequestMethod('GET');

$router->addRoute(
     'кириллический-урл/[s:non-ascii-param]',
     function (string $route, array $params): string {
          return $params['non-ascii-param'];
     },
'GET');

var_dump($router->callRoute(urlencode('кириллический-урл/ни разу не ASCII - 日本語')));
```

## The bug in the Mezon Template Engine was fixed

1 bug in the [Mezon Template Engine](https://github.com/alexdodonov/mezon-template-engine) was fixed. I already don't remember what it was about. Just be sure - now it is less buggy )
Masked language modelling with multimodal transformers
Published: 2022-08-10 16:34:11

It may not be clear from the question, but how can we apply masked language modelling with text and image given using multimodal models such as VisualBERT or CLIP? For example, if some text is given (it's Masked) and we mask some word in it, how can we apply MML to predict the word as cat? Is it possible to give only the text to the model, without the image? How can we implement such a thing and get MLM estimates from it using the huggingface library API? A code snippet explaining this would be great. If anyone can help, it would help to have a better understanding.
Testing a easy method with Mocha and Javascript
Tags: javascript, testing, webdev, tutorial
Published: 2022-08-10 16:30:00



## 🔌 Installation
First init the repo and install mocha:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0o8wdwt81z00d0tmqv9q.png)
 

 Now let's try if mocha works, creating a folder called test in the root of the project and inside this folder creating a file:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw95ruabyhcxoiqdgkri.png)



## 🎮 Playing with mocha

That file will contains an easy assert that checks if a variable contains the string that we expect:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64vrf0a0yv6a4d3sgcrq.png)
 
Voilà, it works like a charm:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jinso4wljcm9pkkbvnyu.png)


If we try to put a test that is wrong:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hywe7d7qr72iexd5fcj8.png)


The test will fail:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnptveauiz97ja1wuj93.png)
    



## 🏆 The real example
 

We will create a file called strings.js that will contains only one function called stringMerge, super easy:

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

> _Special mention to Mintlify extension that writes all JSDocs for me 😃_

and finally the test:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4ijx2ojisyrvx0ek8rm.png)
 
Some considerations here:

- In the line 2 we're loading the file that contains our famous method.
- We're implementing the triple A pattern (Arrange, Act, Assert) you can find more info searching on Google.
- The magic happens in line 17 when we're checking the result of our method.


And the result:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw9i1ek4i2m50t7e171l.png)
 
That's it for today! I will try to create another easy post before Sunday with Jest.