teleren/devto huggingface dataset:
Manipulando arquivos json via comando
Tags: cli, json, util, dev
Published: 2021-11-15 21:14:45

As vezes precisamos alterar um arquivo json de forma automatizada e quando não conhecemos algum facilitador, é necessário ler o arquivo JSON, fazer a alteração e salvar o arquivo JSON com o novo conteúdo.

Mas isso pode ser simplificado usando o comando `json`.

Este é um exemplo, onde adicionamos o nó `type` com o valor `module` ao `package.json`

`npx json -I -f package.json -e "this.type = 'module';"`

Também podemos instala-lo pra uso sem `npx`

`npm i -g json`

E existem outros casos de uso, como

`echo '{"foo":"bar"}' | json`

que irá retornar

```
{
  "foo": "bar"
}
```

`echo '{"foo":"bar"}' | json foo`

que retorna `bar`, pois solicitamos o `foo`

ou ainda

`echo '{"age":10}' | json -e 'this.age++'`

que retorna

```
{
  "age": 11
}
```

Espero ter sido útil, abraço
[]s
Começando um projeto Web com TypeScript
Tags: html, css, typescript, webdev
Published: 2021-11-15 20:50:11

Para começar um projeto do zero, simples, usando HTML, CSS, TypeScript e ESBuild.

Precisa fazer as seguintes etapas:

1. Criar o diretório com o nome do seu projeto
1. Criar o package.json
1. Criar o tsconfig.json
1. Instalar as dependências
  1. esbuild
  1. esbuild-serve
  1. typescript
  1. prettier
1. Criar o diretório src
1. Escrever o TypeScript inicial dentro de `src`
1. Criar o diretório public/styles
1. Escrever o HTML inicial dentro de `public`
1. Escrever o CSS inicial dentro de `public/styles`
1. Criar a configuração do ESBuild
1. Criar a configuração do prettier
1. Adicionar `"type": "module"` ao `package.json`
1. Adicionar o script de build ao `package.json`
1. Adicionar o script de start ao `package.json`
1. Executar o `npm start`

Ou então compactar tudo isso em um script bash e usa-lo da seguinte forma

```sh
./create-project.sh meu-projeto
```

Segue o código do script

{% gist https://gist.github.com/guiseek/b97e20d98da05a5057a079d6c91b880c %}

Ele é extremamente simples e resolve o propósito com excelência.

Espero ter ajudado, até a próxima.
[]s
This week: The ePhEmeRaL miniconf
Tags: perl, conferences, link, meetup
Published: 2021-11-16 16:47:19

---
title: This week: The ePhEmeRaL miniconf
published: true
date: 2021-11-15 20:43:43 UTC
tags: Perl,conferences,link,meetup
canonical_url: https://phoenixtrap.com/2021/11/15/this-week-the-ephemeral-miniconf/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahtcoue5jp26o56lg4lo.jpeg
---

After a lot of procrastination, I’ve decided my talk for this week’s [ePhEmeRaL miniconf](https://thibaultduponchelle.github.io/the-ephemeral-miniconf/) will be **“[Cunningham’s Law](https://meta.wikimedia.org/wiki/Cunningham%27s_Law): A Year of Being Wrong on the Internet, or _«prêcher le faux pour savoir le vrai.»_”**

The event starts at **8:00 AM CST on Thursday, November 18** ; you can [find out more about it including the full schedule and a time zone converter here](https://thibaultduponchelle.github.io/the-ephemeral-miniconf/).

![What do you want me to do?  LEAVE?  Then they'll keep being wrong!](https://imgs.xkcd.com/comics/duty_calls.png)
[_xkcd 386: Duty Calls_](https://xkcd.com/386)
Passing environment variables to GitHub Actions using dotenv
Tags: github, webdev, node
Published: 2021-11-15 20:43:24

**TL;DR - Create `.env` file using GitHub Secrets before running tests in your workflow file**

# Introduction
My backend project, written in TypeScript/Express, uses `dotenv` for environment variables. `dotenv` package takes variables in from `.env` file, but when I looked for a solution, everyone had `env` or `with` inside workflow file, which never worked for me. So I had to figure out something else.

# Steps
1. Add secrets to your repository
2. Add a step to create .env file inside your workflow

## Add secrets
1. Go to repository's Settings page
![GitHub repository / Settings page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xcmq67w21lajtsm3x0m.png)

2. Go to Secrets from the sidebar menu
![GitHub repository / Settings / Secrets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ri5gg9lvgn9f4wk8ge97.png)

3. Click `New repository secret` to add secrets
Note that a secret cannot start with a prefix `GITHUB_`.

## Add a step to create `.env` file in your GitHub workflow
Now that you have all secrets set up, you can access to them by `${{ secrets.YOUR_SECRET_NAME }}`. Below is a working example workflow file.

`/.github/workflows/test.yml`
```yml
name: Run tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout
        uses: actions/checkout@v2
      
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"

      - name: Create .env file
        run: |
          touch .env
          echo MONGO_URI = ${{ secrets.MONGO_URI }} >> .env
          echo PORT = ${{ secrets.PORT }} >> .env
          echo BASE_URI = ${{ secrets.BASE_URI }} >> .env
          echo PASSPORT_GITHUB_CALLBACK_URL = ${{ secrets.PASSPORT_GITHUB_CALLBACK_URL }} >> .env
          echo PASSPORT_GITHUB_CLIENT_ID = ${{ secrets.PASSPORT_GITHUB_CLIENT_ID }} >> .env
          echo PASSPORT_GITHUB_CLIENT_SECRET = ${{ secrets.PASSPORT_GITHUB_CLIENT_SECRET }} >> .env
          echo SESSION_SECRET = ${{ secrets.SESSION_SECRET }} >> .env

      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build --if-present

      - name: Run tests
        run: npm test
```

For explanation, I just renamed some steps from the template for more readability and added the `Create .env file` step with `touch` and `echo`. This will not commit `.env` to the repository nor publish your secrets. Your secrets will remain secret.

# Conclusion

Basically adding a new step to create `.env` file before running tests will do the job, because that's how `dotenv` works.

Feel free to reach out if you have any questions or suggestions to make this article better. Thank you for reading. Happy Coding!
Project Management Dashboard UI
Tags: codepen
Published: 2021-11-15 20:42:54

<p><a href="https://dribbble.com/shots/14038313-Project-Management-Dashboard-UX-UI-Design" target="_blank">https://dribbble.com/shots/14038313-Project-Management-Dashboard-UX-UI-Design</a></p>

{% codepen https://codepen.io/aybukeceylan/pen/OJRNbZp %}
Endurance Spacecraft - Interstellar - Pure CSS
Tags: codepen
Published: 2021-11-15 20:41:15

<p>A 3D view of the Endurance spacecraft from the movie "Interstellar."</p>

<p>The idea was to do something approximate, but I was excited, and I have been adding details for two days. Some modules are not exact, but their shapes were very whimsical and I simplified them ... now I regret it (maybe I retouch them).</p>

<p>Resources:</p>

<ul>
<li>
<p>Cam System:</p>

<ul>
<li>Explained by <a href="https://codepen.io/amit_sheen" target="_blank">@amit_sheen</a> in CSS-Tricks:

<ul>
<li><a href="https://css-tricks.com/how-to-map-mouse-position-in-css/" target="_blank">https://css-tricks.com/how-to-map-mouse-position-in-css/</a> </li>
</ul>
</li>
<li>Example by <a href="https://codepen.io/YusukeNakaya" target="_blank">@YusukeNakaya</a> from this pen: 

<ul>
<li><a href="https://codepen.io/YusukeNakaya/pen/GRWZdOb" target="_blank">https://codepen.io/YusukeNakaya/pen/GRWZdOb</a></li>
</ul>
</li>
</ul>
</li>
<li>
<p>Cuboid System by <a href="https://codepen.io/jh3y" target="_blank">@jh3y</a> from this pen: </p>

<ul>
<li><a href="https://codepen.io/jh3y/pen/MWJdqBo" target="_blank">https://codepen.io/jh3y/pen/MWJdqBo</a></li>
</ul>
</li>
<li>
<p>Gargantua Blackhole by <a href="https://codepen.io/josetxu" target="_blank">@josetxu</a> from this pen:</p>

<ul>
<li><a href="https://codepen.io/josetxu/pen/rNWgNeq" target="_blank">https://codepen.io/josetxu/pen/rNWgNeq</a></li>
</ul>
</li>
<li>
<p>Tricks for drawings by <a href="https://codepen.io/thebabydino" target="_blank">@thebabydino</a> in CSS Tricks:</p>

<ul>
<li><a href="https://css-tricks.com/background-patterns-simplified-by-conic-gradients/" target="_blank">https://css-tricks.com/background-patterns-simplified-by-conic-gradients/</a></li>
</ul>
</li>
<li>
<p>Spacecraft details:</p>

<ul>
<li><a href="https://www.bbc.com/future/article/20150407-inside-a-movie-spaceship-factory" target="_blank">https://www.bbc.com/future/article/20150407-inside-a-movie-spaceship-factory</a></li>
<li><a href="https://thefwa.com/article/behind-the-scenes-interstellar-endurance" target="_blank">https://thefwa.com/article/behind-the-scenes-interstellar-endurance</a></li>
<li><a href="https://sketchfab.com/3d-models/endurance-interstellar-f2e7ba1e95974f95a2392edd69d62eed" target="_blank">https://sketchfab.com/3d-models/endurance-interstellar-f2e7ba1e95974f95a2392edd69d62eed</a></li>
</ul>
</li>
</ul>

{% codepen https://codepen.io/josetxu/pen/gORKrgR %}
React: Render with an If-Else Condition 
Tags: javascript, react, beginners, webdev
Published: 2021-11-15 17:22:15

* Another way of using JavaScript to control your rendered view is to tie the elements that are rendered to a condition. When the condition is true, one view renders. When it's false, it's a different view. We can do this with the basic if/else statement.
* FreeCodeCamp has a  class MyComponent which contains a `boolean` in its state which tracks whether you watn to display some element in the UI or not. The `button` toggles the state of this value. Right now, it render the same UI everytime. Let's rewrite the `render()` method with an `if/else` statement so that if `display` is `true`, you return the current markup.
Otherwise, return the markup without the `h1` element.
* Code:
```React
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: true
    }
    this.toggleDisplay = this.toggleDisplay.bind(this);
  }
  toggleDisplay() {
    this.setState((state) => ({
      display: !state.display
    }));
  }
  render() {
    // Change code below this line

    return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    );
  }
};
```
* Answer:
```React
  render() {
    if (this.state.display === true) {
      return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>
    );
    } else {
      return (
        <div>
          <button onClick={this.toggleDisplay}>Toggle Display</button>

        </div>
      )
    }
    
  }
};
```

###Use && for a More Brief Conditional
*  You can also use the `&&` logical operator to perform conditional logic in a more concise way. This is possible because you want to check if a condition is true, and if it is, return some markup. 
* Ex:
```React
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: true
    }
    this.toggleDisplay = this.toggleDisplay.bind(this);
  }
  toggleDisplay() {
    this.setState(state => ({
      display: !state.display
    }));
  }
  render() {
    return (
       <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         {this.state.display === true && <h1>Displayed!</h1>}
       </div>
    );
  }
};
```
* If the `condition` is `true`, the markup will be returned. If the condition is `false`, the operation will immediately return `false` after evaluating the condition and return nothing. You can include these statements directly in your JSX and string multiple conditions together by writing && after each one.
How to multiply two arrays in javascript
Published: 2021-11-15 20:27:47

Multiply first element of array to the second element of array like [2*2] ,[4*4] , [4*4], [4*4] and so on...
example 
```
const firstArray = [
  [2, 4, 4, 4],
  [3, 2, 2, 2],
  [1, 5, 9, 1],
  [5, 5, 5, 5]
];
const secondArray = [
  [2, 4, 4, 4],
  [3, 2, 2, 2],
  [1, 5, 9, 1],
  [5, 5, 5, 5]
];
```

code 
```
    firstArray.map((f, index) => {
      f.map((fs, idx) => {
        console.log(`${idx} = `, fs * secondArray[index][idx]);
      });
    });
```
output 
```
4
16
16
16
9
4
1
25
81
1
25
25
25
25
```
Deep Flatten an Array
Tags: javascript, webdev, beginners, programming
Published: 2021-11-15 20:13:21

Hello all👋,

In this series we will see a lot of question that are asked in javascript interviews so get ready for it

In this article we will see How to flatten an deeply nested array for example

> [1,[2,3,[4,5]]] and convert in into [1,2,3,4,5]

We will learn to flatten an array in 2 ways
 
1. Using built in function (`flat()`)

2. Using recursion

**1. Using `Flat()` method in Javascript**

The `flat()` method is an inbuilt array method that flattens a given array into a newly created one-dimensional array. It concatenates all the elements of the given multidimensional array, and flats upto the specified depth.

`var newArr = arr.flat(depth)`

By default, the depth limit is 1. It can be 1 to `Infinity`.

 ```js
const arr = [1,[2,3,[4,5]]];
  
  // Setting the depth value to
  // Infinity to deep flatten the array
  const flattened = arr.flat(Infinity);

  console.log(flattened)

  // Output [1,2,3,4,5]

```
**2. Recursively flat an array (Pollyfill)**

Now we will see how do it without using any builtin function or basically writing the pollyfill for flat function
```js
//Flatten an array using recursion

const arr = [1,[2,3,[4,5]]]

const flatten = (input)=>{
	let result = []

	if(!Array.isArray(input)) {
		return input;
	}

	for(let data of input) {
		result = result.concat(flatten(data))
	}

	return result
}


console.log(flatten(arr))

// Output [1,2,3,4,5]

```
Let me explain the code
1. Iterate through each and every value of an array and check whether it is value or an array using `Array.isArray()`
method.
2. If it is a value return it and concat it.
3. If it is an array then follow again from step 1.


***Using ES6 features (using `reduce()`)***

```js
function flatten(arr) {

    return arr.reduce((acc, cur) => acc.concat(Array.isArray(cur) ? flatten(cur) : cur), []);

};
 
const arr = [1,[2,3,[4,5]]];
 
const flattened = flatten(arr);

console.log(flattened);

// Output [1,2,3,4,5]


```
For better understanding of the code Please refer to the gif below.
You can also check this [Github repo](https://github.com/Mukul-Singhal/Javascript-interview-questions/blob/master/arrays/deeplyFlattenArray.js) for the code
![Recursion](https://i.imgur.com/6XdWH3v.gif)

Voila😃
Let me know your thoughts about it 😃 and if you like it share it with others.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk3yciobisco1ulfi03s.gif)
javascript - New array method at()
Tags: javascript, webdev
Published: 2021-11-15 20:06:20

The new array method `at()` allows us to get access to array indexes using both positive as negative indexes.

This way we don't need to do maths anytime we want to access to the last array element.

```javascript
const movies = [`Terminator 2`, `Rambo`, `Harry Potter`, `Star Wars`];

const oldWay = movies[movies.length - 1];
console.log(`The last movie is ${oldWay}`); // Star Wars

const newWay = movies.at(-1);
console.log(`The last movie is ${newWay}`); // Star Wars
```
It's not just for the last element:

```javascript
console.log(`First movie ${movies.at(0)}`); // Terminator 2
```
If we pass an index that not exists it will return `Undefined`.

At this time the array method `at()` it's not compatible with all the browsers yet so for use it on production you will need a polyfill.

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

You can find more information at [Mozilla MDN] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)
My Next Adventure
Tags: engineering, community, leadership, opensource
Published: 2021-11-15 19:47:38

Moving on doesn't mean forgetting the past, the past is part of what made a way to the future we are in today.

My time at Stack Overflow came to an end sometime recently, it was an exciting run working with some of the smartest engineers and community leaders I have ever met, which specifically thought me to do more and keep getting better, working daily and never seeing how good everyone is getting to stop me from getting even much better.  

But, never forget one thing, part of the end of something huuge, is just the beginning of something far much greater.

I'm super excited to be leading Global Developer Advocacy at [Polygon](https://polygon.technology).

My team would be covering everything around the building of example applications on Polygon, community building, hackathons, engineering content, and more. 

I believe the future of Ethereum and the internet would be built on Polygon and I'm excited to be part of this huge story being forged.

I got offers from companies I didn't expect, I saw offers coming in from Amazon, Snapchat, Ford Motors, Elastic Search, Scylladb, and more, all great products, then one popped up on my screen from Polygon, I wasn't particularly excited, but after 10 minutes of research and looking at what goes on at Polygon, it looked exactly like my next adventure, and now I've been working here and yes it's actually what I expected.

Looking forward to more years at Polygon.


As I said in the last one,

> The journey is only 1% finished,

> Jisi nu ike "Be Strong".
Trying to building tensorflow from source on Windows
Published: 2021-11-15 19:30:53

---
title: Trying to building tensorflow from source on Windows
published: true
description: I looked into building tensorflow from source on Windows. The reason, TensorRT released and I wanted to test the new functionallity. I got tensorflow to build after some tribulations using the latest source release. Sadly I never got the new functionallity of TensorRT up and running but I did headway at least.
tags:
cover_image: https://i.ytimg.com/vi/ZNyl95XQrg8/maxresdefault.jpg
---

{% youtube ZNyl95XQrg8 %}

I looked into building tensorflow from source on Windows. The reason, TensorRT released and I wanted to test the new functionallity. I got tensorflow to build after some tribulations using the latest source release. Sadly I never got the new functionallity of TensorRT up and running but I did headway at least.
Value of Python as Compared to Java
Published: 2021-11-15 19:23:25

“For Web Development, Python is an excellent choice”

Have you ever heard this statement? If you haven't, then chances are good that someone who knows programming has told you that the best language for web development is Python. And they're probably correct! The reason that people like to suggest Java in certain situations (and vice versa) is because Java and Python are two of the most widely used languages. It turns out that both of these popular languages have their advantages which might make them perfect for your project.
So, if you don't know much about programming yet, why should you care about Python as compared to Java?
If you're new to coding, you might be wondering: "What is the best language for web development?" While some would say that there is no set way to choose a language, others would say that certain languages are more beneficial than others for Web Development and other programming. If you're looking for a way to decide which language is right for your project and what you're hoping to get out of it, then this blog post is for you!
I personally use both Python and Java on a daily basis at work. I have made a number of both small and large projects in Java and have only begun learning Python in the last couple months. I have been working in IT for a little over four years, and before that I was a web developer for five years. In fact, the reason why I got into IT was because I wanted to learn how to code, but at that time I didn’t know much about it at all. After about two years of studying, writing code, and using a variety of languages, I finally got a pretty good feel for programming languages in general.
Source: https://hydrogenwatermaker.net/
Avoid state management package in Flutter
Tags: flutter
Published: 2021-11-15 19:22:38

State management is one of the best hot topic in Flutter. In community nowadays most common question is- "What package should use for state management?". Specially beginner are really confused.

As I have mentioned in my title that you should avoid state management package for your next big project. There are some fancy way to avoid these package so that our project is not depend on a third party package which is maintain by community. Sometimes a major change is happens in these packages and we face a huge list of errors and warning by that time. 

Then what's the solution for state management in Flutter? So answer is reactive programming. As you already know that Flutter provides **Stream** & **StreamBuilder** for Asynchronous programming. So you can use these features to make your app more reactive. With these feature you can also use a small package which is [get_it](https://pub.dev/packages/get_it) as Service locator. 

Another advice is to use Stateful Widget. Many of us are afraid of use Stateful widget because they think that will create a performance issue. But in few cases like a screen only rebuild for one/twice then you can use it. You don't need to write a huge number of boilerplate code to manage this simple task with a state management package like BLoC. Use Asynchronous programming for those screens or part of screen where it need to rebuild a several times.
TaskMaster
Published: 2021-11-15 19:20:00

Hey guys! I'm junior fullstack developer and product manager! I'm only 16, but I've already made my own pet project called TaskMaster! I'd be more than happy if gave me your feedback on MVP version and like it on github! Here is the link to github: https://github.com/Vladislava05/TaskMaster in README you will find the link to our web application!
WordPress Starter Theme für Veranstaltungen und Events
Tags: wordpress, kadencestartertempla, kadencewp, wordpressthemes
Published: 2021-11-16 11:46:12

---
title: WordPress Starter Theme für Veranstaltungen und Events
published: true
date: 2021-11-15 19:00:50 UTC
tags: WordPress,kadencestartertempla,KadenceWP,WordPressThemes
canonical_url: https://bloggerpilot.com/kadence-events/
---

![Kadence Starter Template für Events und Veranstaltungen.](https://bloggerpilot.com/wp-content/uploads/2021/11/kadence-events.png)

Wir müssen oft eine neue WordPress-Website für eine bevorstehende Veranstaltung oder ein kleines Unternehmen erstellen und möchten sicherstellen, dass wir das Beste aus unserem Theme herausholen. Eine Veranstaltung ist eine Ansammlung von vielen Dingen, wie z. B. die Menschen, die teilnehmen werden, die Art der Musik, die sie mögen, und wie sie gerne essen.

Der Original-Artikel erschien auf [WordPress Starter Theme für Veranstaltungen und Events](https://bloggerpilot.com/kadence-events/).

Dies ist ein einfaches Einsteigertheme für Veranstaltungen und Events. Es kommt mit ein paar benutzerdefinierten Widgets für Termine, RSVPs und benutzerdefinierte Menüs. Es ist sehr einfach und benutzerfreundlich und wurde für kleine Veranstaltungen entwickelt, die nicht zu groß für Online-Ankündigungen sind.