teleren/devto huggingface dataset:
Ng-News: Issue 22/05
Tags: angular, webdev, pnpm
Published: 2022-02-07 16:12:00

This is a weekly posting, covering the latest updates from the Angular community.

{% youtube mRenafznsn0 %}

## Angular team plays game and answers your questions

Mark and Jeremy from the Angular team did their monthly video session where they answered questions. Probably the most interesting part was a discussion why Angular doesn't or can't just use jsx. Jsx comes from React, and is an extension to JavaScript that allows you to mix HTML directly into JavaScript code.

According to Jeremy, the way that directives work, prevents the usage of jsx. But if you want, you can use inline templating.

Next to that, they recommended extensive learning material on accessibility.

There were of course questions about the upcoming Angular 14. Mark and Jeremy didn't promise any features, but we already know that the Angular DevTools will be integrated into the main Angular repository.

{% youtube XsliS_ouE_M %}

## pnpm 6.29
Pnpm was released in version 6.29. Pnpm is an alternative package manager to npm. It uses caching and other tricks to significantly reduce the disk size and speeds up the creation of your node_modules directory.

You should definitely give it a try, but you also have to be aware of potential risks. For example, you could have issues with dependencies that mutate some parts in the node_modules directory. If you are not on Angular 13, then ngcc, which is the compatibility compiler, will do that.

[Pnpm](https://pnpm.io/)

[Angular GitHub Issue on support pnpm](https://github.com/angular/angular-cli/issues/16980#issuecomment-844967912)

## Miscellaneous

### Chome 98

Google released Chrome in version 98.

{% youtube YqkIS88VulM %}

[Chrome 98](https://developer.chrome.com/blog/new-in-chrome-98/)

### Cypress 9.4 & Jest 27.5

We had minor version updates with Cypress 9.4, and Jest 27.5

Speaking of Jest, it turned out that the complete project is maintained by a single person only which isn't even an employee of Facebook. This comes as a surprise because Jest is more or less the default testing framework in JavaScript. 

[Cypress 9.4 Release Notes](https://github.com/cypress-io/cypress/releases/tag/v9.4.0)

[Simen B. on maintaining Jest](https://github.com/facebook/jest/pull/11529#issuecomment-1027152470)
Low Cost Value-Adds for Any React Project
Published: 2022-02-07 15:03:56

Landed a new role? New to a React project? Just want to see if there's anything new here? 

Here are a few ways to hit the ground running with minimal cost to existing codebases. Free of any package installations.

## Default Props
It is not uncommon to discover legacy or current React codebases with components containing no default values for the props it consumes. Which implies the value `undefined` is part of expected behavior, which is risky business.

```jsx
// What should we see if the message prop isn't provided?
const Greeting = (props) => <h1>{props.message}</h1>;
```

[Leveraging React's defaultProps component property](https://reactjs.org/docs/react-component.html#defaultprops)
```jsx
const Greeting = (props) => <h1>{props.message}</h1>;

Greeting.defaultProps = {
  message: 'No message prop provided!'
}
```
[Using Object Destructuring Assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
```jsx
const Greeting = ({ message = 'No message prop provided!' }) => 
  <h1>{message}</h1>;
```

## Adding TypeScript Types via [JSDoc](https://jsdoc.app/)
It's safe to assume numerous React developers are using Visual Studio Code as their text editor. Why not enhance the development experience by leveraging VSCode's Intellisense?

Adding types via React Prop Types or TypeScript may face some resistance, but it doesn't mean we can't use types with comments.

```jsx
/**
 * @description defaults to "No message prop provided!"
 * @param {{ message: string }} { message }
 * @returns {JSX.Element} Greeting component
 */
const Greeting = ({ message = 'No message prop provided!' }) => (
  <h1>{message}</h1>
)
```
[Learn more Here](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html)

## Explanatory Comments
I admit, this is a piece of advice for myself as much as it is for anyone else. Also, this is a general good habit for any project.

Ideally, we want to write comments explaining why we're adding a component or a highly re-used module. 

If we can't explain it in a line, try to include a reference to the ticket. 

Received a hard-to-understand piece of code from the internet? Include a link to where it was found.

Your teammates and future-self will greatly appreciate this.

```js
// Wanted a concise way to compose the props for a hairy view
// See ticket #4207 for details
export const pipe = (input, ...fns) =>
  fns.reduce((output, fn) => fn(output), input);
```
Have any more tips? I'd love to know more!
Why SEO is important for your business
Tags: seo, busines
Published: 2022-02-07 16:00:39

Ranking your website is essentially free. There’s no need to pay for advertising or pay per click. Aside a small budget to cover [SEO agency mumbai](https://numarodigital.com) costs, there’s no fee to pay. After working hard and meeting the SEO requirements of search engines, you can watch your website reap the rewards. [SEO Consultant Dubai](https://numarodigital.com/seo-consultant-dubai/)

We SEO Consultant Dubai helps increase a website’s visibility. The higher your website ranks on Search Engines Results Pages (SERPS), the higher the chances of experiencing more click thought rates (CTR) on your website.
People have many expectations from Google. They expect Google to know and give them the best results to queries. Consequently, higher search ranking signals credibility to users because they trust Google. This helps your brand gain more credibility too. SEO Consultant Dubai
It guarantees better return on investment than advertising. When you advertise and 100 people click your link, only 10 may result in sales. However, when you get 100 clicks from Google, 20% of the visitors may convert to sales. It goes without gainsaying that visitors from search engines are more valuable than from ads.
Vite + Vue 3 issue with ports on MacOS
Tags: webdev, vue, vite, javascript
Published: 2022-02-07 15:47:40

**Namaste to everyone! 🙏**

Today I faced the issue with ports in Vite Vue project.

The trouble occured after installing Vite PWA plugin. I tried to check it and start a command: 

`yarn build && yarn preview` 

Than switching to the browser I saw this: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i45qhsn747s02f39t987.png)

That was a bit confusing...

I found the solution here: https://github.com/vitejs/vite/discussions/6481

The issue is in port configuration: 

> you are experiencing this problem because the mac os version you are using took control over this port for a component even though these low port numbers shouldn't Ideally be used by a operating system

So, I started to use the following vite.config.ts option that solved my problems: 

```
preview: {
    port: 4000
  },
```

You can find an explanation, why port 4000 was chosen in the link above :)

Thanks for reading! 

**UPDATE 18.02.22**

As stated, this was fixed in Vite v2.8.0
So, you can just update your Vite version
Fix Blazor WebAssembly authorization bug on Azure
Tags: blazor, azure
Published: 2022-02-07 15:45:15

Today I wasted more or less 2 hours for a stupid bug on a Blazor WASM hosted on ASP.NET Core app.
As always, **it works on my machine**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbkhkq8xgm3vt8m3om1t.png)
 
I have created an application secure with Azure AD (and roles) and I use it for debugging for one month, without any issues.
When I tried to deployed everything on our test application on Azure, after the login, I obtained always the error:

```console
login.microsoftonline.com/common/oauth2/v2.0/token:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
```
At the beginning I thought that it was my fault because I recreated the App Registration from scratch before the deployment.
After an hard googling session, I found an issue on GitHub on the ASP.NET Core repository: https://github.com/dotnet/aspnetcore/issues/33312

## Solution
- Edit the Client project file (double click on the project from Visual Studio 2022) and add the following lines:

```xml
	<ItemGroup>
		<TrimmerRootAssembly Include="Microsoft.Authentication.WebAssembly.Msal" />
	</ItemGroup>
```

- Delete all the "bin" and "obj" folders from the Server and App projects (manually)

- Deploy the solution again and check the flag "Remove additional files at destination"

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

Enjoy your app with the Azure authentication :)
Does [put-your-favorite-framework-here] make you a better software developer?
Tags: react, angular, vue, javascript
Published: 2022-02-07 15:33:25

Recently I've started working in a React-based project. I won't lie to you - I think React is just inherently wrong with the handicapped JSX syntax. There are better (faster) ways of dealing with templating than extending the underlying language syntax. But that is not all...

Looking at an average react project, what is immediately visible is a slew of walls of text. Nothing is made to look more SOLID. Not that it is not possible - quite the opposite. But the reality is that people take the simplest example that can possibly work and shove it in into production.

Essentially with the hooks (terrible idea, don't know why Vue has followed, probably only to get a bigger user base) everything is shoved into one, monstrous and enormous, function that gets executed over and over again, with no regard to single responsibility or open/closed principles. That makes the code not only hard to maintain, but above all a nightmare to maintain.

What that means is that React, in its simplest form (or even "on next.js") is just the beginning and even though you can force it to do your bidding it will require a lot of thought and extra code to make it DRY and SOLID.

I won't even try to take a stab at state management, because the way it's done in React should be punishable by life in prison (both hooks and `setState()`)

On the other end of the spectrum is Angular. There you have everything automatically forcibly split into entities (components, modules, templates) regardless if you need it or not. That's good if you're writing a big app, but for small ones it is a massive overhead that you probably are never going to use. 

Then, somewhere in between the two, we have Vue. Template separation? Check! Truly reactive state? Check! Small size bundle? Check and Recheck (Vue implements tree-shaking on directive level, so if you don't use e.g. v-model then it won't be in the final bundle)!

I know this is just me ranting about react (mostly) but in my humble opinion one should first learn to code (properly, meaning learning how good code looks like) and then and only then take a look at libraries/frameworks such as react, angular or vue. If you're going to start from React you're going to (most likely) be a bad-ass React developer after a few weeks - just like being jQuery-ninja :) It will not make you even a decent developer.

And then, knowing all the SOLID, DRY, SD and TDD you'll find another "React developer" telling you that it is OK to shove everything into one function - because that's the React-way because the docs say so :)

Happy coding!
The Gateway to A Perfect Content Marketing 
Tags: contentmarketing, wikipediapage, wikipage, wikipediaservices
Published: 2022-02-07 15:27:33

The world of the internet has brought millions of benefits for its users. Whether it is a social media platform or a website; it has numerous benefits. With the help of the internet and its platforms, a business can easily flourish by making a visible space on the internet. Under the spectrum of online marketing, one of the highly valuable methods is content marketing.
Content management is one of the best ways to promote and create brand awareness. It focuses on creating strategies, publishing, and creating content for your business. A well-maintained and established page helps in growing profitable sales, visibility, and credibility. It also helps in reaching the targeted audience and maintaining a long-lasting name in the industry.

**Tips To Create Perfect Content Marketing for A Business** 

You need to have goals, goals that are clear in their motives and vision. You need to have a vision that endorses your business. 

**1.	Know Who You Are Catering To **
You have to have a clear idea of who your audience is. You cannot create content without your audience. If you are fashion apparel you need to identify your audience and write content according to it.

**2.	Share On Multiple Platforms**
Share your content on multiple platforms, content marketing can work even better if it is on multiple platforms. You can create a Wikipedia page and create content on it. A Wikipedia page can help in conquering large space, one can also take guidance from [Wikipedia page creation agency](https://broomwiki.net) 


**3.	Keep Up with Your Performance** 
A content that has the best performance should be a preference. You need to keep up with metrics and on the traffic and carefully. Monitor the performance and create the content that converts traffic into potential clients.
These are the tips to remember in creating a perfect content marketing for a business.
Looking for developer to help setup stripe and bigcartel for multiple currency transactions
Published: 2022-02-07 15:23:29

hello. i want to setup my bigcartel store to accept payments from stripe. thing is I only want to accept stripe payments from indian customers in INR, my main market is europe, USA, and for them i accept PayPal payments... but indian market doesnt use paypal. so i want to push indian customers to stripe payment (in INR).But my shop displays prices in euro because of my main market being europe  and usa. i am not sure how to make this happen because of limitations in the bigcartel system
Fast commit and push
Tags: git, bash, fish, zsh
Published: 2022-02-07 15:22:05

I want to share a shell-function called `gacp` (Git Add, Commit and Push), which I came up with a few months ago and have been using about every hour since then:

```bash
# fish
function gacp
    git add .
    git commit -m "$argv"
    git push origin HEAD
end
```

```bash
# bash/zsh
function gacp() {
    git add .
    git commit -m "$*"
    git push origin HEAD
}
```

Usage example:

```fish
> gacp add some new crazy stuff
[master fb8dcc9] add some new crazy stuff
 <...>
Enumerating objects: 12, done.
 <...>
To github.com:foo/bar.git
   912c95d..fb9dcc9  master -> master
```

No more chains with `&&` and quotes for verbose messages!
Monokle 1.5.0 adds YAML templates and Istio/CertManager support
Tags: kubernetes, opensource, kustomize, helm
Published: 2022-02-07 14:55:34

Hello Kubernetes aficionados and YAML herders! We're happy to share the 1.5.0 release of our open-source desktop tool Monokle with a wealth of new features:

- YAML Templates and Plugins
- Istio/CertManager support
- Improved Secret and NetworkPolicy editors
- Improved resource validation
- and more of everything else to boot!

Check out the full list of new features at https://medium.com/kubeshop-i/monokle-1-5-0-release-kubeshop-95f574563c79 and download the latest release/installers from GitHub - https://github.com/kubeshop/monokle - and be sure to let us know how it works for you - and how it can be made even better.

Thank you!
The future of coding classes
Tags: python, javascript, webdev, beginners
Published: 2022-02-07 14:47:07

Hello!I created a coding course providing website.You can join in my free trail class.From this you can understand the core of coding and programming.After trail class you can join my regular class.you can join in your free time.

Join class through my website:https://sripadhs.github.io/
Map, Filter e Reduce em JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-02-07 14:46:55

###O que são map, filter e reduce? 
São funções no protótipo de um array JavaScript e podem ser usadas para operações baseadas em iterações em uma coleção de itens armazenados nesse array.
##Map
Map é uma função que percorre o array e retorna um novo.
```js
const numbers= [1, 2, 3, 4, 5];

const newArr= numbers.map(item => {
  return item * 2;
});
```
Então como map gera um novo array numbers retorna o mesmo array, enquanto newArr retorna outro array com os valores duplicados.

##Filter
Filter é a função que retorna um array filtrado pelas condições que fornecemos.
```js
const numbers = [1, 2, 3, 4, 5];

const newArr = numbers.filter(item => {
  return item % 2 === 0;
});
```
Pela condição que colocamos acima a função só irá retornar os números par.
##Reduce
Reduce é a função que percorre o array e reduz ele a um único valor.
```js
const numbers = [1, 2, 3, 4, 5];

const newArr = numbers.reduce((acc, item) => {
  acc = acc + item;
  return acc;
});
```
Reduce recebe dois argumentos o acumulador e o item atual. Cada item é adicionado ao acumulador antes que o acumulador seja retornado para a próxima passagem. Retornando em um valor de 15.
Multicolour reflections from text
Tags: codepen, css, html, showdev
Published: 2022-02-07 14:44:12

I have recently started the **#100DaysOfCode** for this year where I will be solving new problems for 100 days from various topics of web development. I am also planing to pick up new projects during this span of days.

My first mini-project is basically CSS focussed which is inspired by one of the Codepen Challenges. Here is the link to my Codepen so do play around and share your views.

<br/>

{% codepen https://codepen.io/jasmin_virdi/pen/MWObrzg %}

#### CSS properties to focus on for this Codepen
<ul>
  <li>-webkit-background-clip</li>
  <li>-webkit-text-fill-color</li>
  <li>linear gradient</li>
  <li>perspective</li>
  <li>rotateX</li>
  <li>scale</li>
  <li>filter</li>
  <li>blur</li>
  <li>transition</li>
</ul>

Happy Coding 👩🏻‍💻
useCallback and useMemo?
Tags: javascript, react
Published: 2022-02-07 14:27:42

Lets's talk about useCallback and useMemo, both of them are really similar.
UseCallback is used to optimize the rendering behavior of your React function components, while useMemo is used to memoize expensive functions to avoid having to call them on every render.
So what means that?

The first difference between them is the syntax, useMemo do not take in consideration the arguments whereas useCallback do take arguments.

```
function memoUsed() {
  const a  = useMemo((arg1) => {
    // React ignores arguments
    return ‘insert JSX here’
  }, [])

  return a
}

function callbackUsed() {
  const a = useCallback((what, where) => {
    // can be used inside functions
    return ‘insert ${what} ${where}’
  })

  return a(‘JSX’, ‘here’)
}
```


useMemo memoize values whereas in useCallback you can not.

useCallback gives you referential equality between renders for functions. And useMemo gives you referential equality between renders for values.
Running a Minecraft Server in Docker
Tags: docker, homelab
Published: 2022-02-07 14:13:17

---
canonical_url: https://waylonwalker.com/til/docker-minecraft-server/
published: true
tags:
- docker
- homelab
series: til
title: Running a Minecraft Server in Docker
---

I've ran a Minecraft server at home since December 2017 for me and my son to play on.  We start a brand new one somewhere between every day and every week.  The older he gets the longer the server lasts.

In all these years, I've been popping open the command line and running the server manually, and even inside of Digital Ocean occasionally to play a more public server with a friend.

My buddy Nic has been sharing me some of his homelab setup, and it's really got me to thinking about what I can run at home, and Dockerizing all the things.  Today I found a really sweet github repo that had a minecraft server running in docker with a pretty incredible setup.

I ended up running the first thing in the Readme that included a volume mount.  If you are going to run this container, I HIGHLY reccomend that you make sure that you have your world volume mounted, otherwise it will die with your docker container.


## Docker Compose

With the following stored as my `docker-compose.yml` in a brand new and otherwise empty directory I was ready to start the server for the night.

``` yaml
version: "3"

services:
  mc:
    container_name: walkercraft
    image: itzg/minecraft-server
    ports:
      - 25565:25565
    environment:
      EULA: "TRUE"
    tty: true
    stdin_open: true
    restart: unless-stopped
    volumes:
      # attach a directory relative to the directory containing this compose file
      - ./minecraft-data:/data
```

To start the server we open up the terminal in this directory and run the follwing command.

``` bash
docker compose up -d
```

Once its up and running we can run commands on the server simply by attaching to it.

``` bash
docker attach walkercraft
```

## A few common commands we run in the server

We play very casually most of the time so we will set keepInventory to true so that we do not loose our inventory when we die.  Sometimes we also op ourselve so that we can toggle gamemode into creative.

```bash
# set the game to keep your inventory when you die.
/gamrule keepInventory true

# give everyone operater priveledges to they can run commands
/op @a

# give playername op
/op playername
```
NodeJs EventEmitter
Tags: eventdriven, node, javascript, beginners
Published: 2022-02-07 14:09:00

O uso comum de javascript: browser, nos permite entender que grande parte da interação que o usuário faz com a máquina se dá através de eventos, exemplos de eventos são:

- cliques de mouse
- apertar um botão no teclado
- mover o mouse

Do lado do backend entretanto, podemos ter outros tipos de eventos, o NodeJs nos permite construir um sistema de eventos similiar, usando o módulo nativo *events*. Esse módulo fornece a classe EventEmitter que pode ser usada para lidar com eventos.

Dentro da família de manipuladores de eventos do NodeJs o EventEmitter é o mais popular, isso porque tudo que acontece no NodeJs acontece a partir de eventos. O EventEmitter é **usado para ações contínuas**.

Na verdade EventEmitter é uma classe que nos permite implementar o pattern pub/sub no NodeJS. Com um event emitter, nós podemos simplesmente lançar um novo evento de uma parte distinta da aplicação e o listener vai escutar esse evento lançado e performar uma determinada ação para aquele evento.

### Criando um EventEmitter

Para lidar com um `EventEmitter` temos de instanciar a classe que faz parte do módulo events, nativo do NodeJS, a classe vem com vários métodos, os mais usados são:

- addListener
- once
- on
- off
- removeListener
- emit

### Manipulando os eventos com o EventEmitter

A melhor forma de manipular nossos eventos com o EventEmitter é criando uma classe que extenda a classe original do EventEmitter que faz parte do módulo do NodeJs. Como podemos ver no código abaixo:

```jsx
const EventEmitter = require('events');
const { clearInterval } = require('timers');

class Emitter extends EventEmitter {

}

const emitter = new Emitter();

const event = 'usuario:click';

emitter.on(event, function (click) {
  switch (click) {
    case 'barra de rolagem':
      console.log(`está subindo ou descendo a página`);
      break;
    case 'barra lateral':
      console.log(`está rolando a página para o lado`);
      break;
    case 'botao submit':
      console.log(`enviando informações em um formulário`);
      break;
    case 'botao cancel':
      console.log(`cancelando uma ação`);
      break;
    default:
      break;
  }
});

const userEvents = ['barra de rolagem', 'barra lateral', 'botao submit', 'botao cancel'];

setInterval(() => {
  const random = Math.floor(Math.random() * (userEvents.length - 1));
  emitter.emit(event, userEvents[random]);
}, 1000);
```

Teremos um `log` diferente para cada um dos eventos que um usuário pode executar.