teleren/devto huggingface dataset:
Pesquisando termos dentro de um texto
Tags: powershell, tutorial, beginners
Published: 2021-02-03 16:18:45

O que podemos fazer quando temos uma pasta cheia de textos e queremos saber se neles tem um determinado termo? 
Abrir todos eles e ver um a um!!

Ok, pode não ser eficiente fazer isso manualmente, mas e se escrevermos uma função para fazer isso? 

Podemos deixar o computador fazer essa validação e nos retornar onde e em qual arquivo encontrou ele.

Para fazer isso vamos utilizar a função [Select-String](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/select-string?view=powershell-7.1), com ela podemos localizar textos, passando como parâmetro o arquivo que vamos verificar e o que queremos encontrar.

Como esse retorno pode ficar confuso no terminal, vamos gerar um arquivo na mesma pasta, colocando nele a correlação que encontramos.

{% gist https://gist.github.com/IGDEXE/8e1ee7bc1b47ce81689ad05689e06607 %}

Com algumas modificações, podemos utilizar essa mesma função para analisar LOGs e encontrar erros.
How to solve Pylance 'missing imports' in vscode
Tags: python, vscode
Published: 2021-02-03 15:43:03

---
title: How to solve Pylance 'missing imports' in vscode
published: true
description: 
tags: python, vscode
---
 
Here is how you can solve this issue:
![pylance_import_issue](https://dev-to-uploads.s3.amazonaws.com/i/zhrmruqkap8hkv69nn2c.gif)
 
Make sure you selected the right python interpreter for your project (in case you are using virtualenv/pipenv/other):
![pythonenv](https://dev-to-uploads.s3.amazonaws.com/i/8abpip4djv56tjca04g6.png)

When you run `pipenv shell`, you will see which python interpreter is used. A folder named `.vscode`  will be created once you select a different interpreter than the default one. Inside `.vscode` you will have a `settings.json` file.

In `settings.json` file you have to add the paths from which you import what's needed in `extraPaths`:
```json
{
    "python.pythonPath": "/home/youruser/.virtualenvs/app-FzQGSFjf/bin/python",
    "python.analysis.extraPaths": ["app", "another/path/etc"]
}
```
In my case, `app` folder was not known by Pylance.
Which apollo-server to use? Comparing apollo-server, apollo-server-express, apollo-server-*
Tags: reactnative, apollo, graphql
Published: 2021-02-03 16:07:37

---
title: Which apollo-server to use? Comparing apollo-server, apollo-server-express, apollo-server-*
published: true
description: In this post we take a look at the different apollo-server packages and figure out which one is right for us.
tags: reactnative, apollo, graphql
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4gc58cruj2rmd4fzy802.jpeg
canonical_url: https://www.reactnativeschool.com/which-apollo-server-to-use
---

I've spent a lot of time primarily working on the frontend of mobile apps and in that time I've absolutely *loved* when I could work with a GraphQL API.

So, when I decided to start building a full stack open source trivia app for React Native School, I decided that I would be using a GraphQL API via Apollo Server.

But when I started looking at it and my desired hosting options I got confused...

**What's the difference between apollo-server, apollo-server-express, apollo-server-lamda, apollo-server-*?**

[The docs](https://github.com/apollographql/apollo-server#getting-started) cover it but I didn't find an answer immediately when I searched for the answer so, hopefully, I saved you some time.

> Note to self: Read the docs, at the very least the README, first.

## TLDR

Basically, *apollo-server* is a standalone app and *apollo-server-** is an integration.

## Expanded

The *apollo-server* package provides everything you need to create a web server & a GraphQL API. Two packages, a dozen lines, and you've got a GraphQL API.

The *apollo-server-** packages allow you to integrate with an existing web framework (like Express, Lambda/Serverless, Koa, etc.).

You set up your server via the normal means for that framework and then you setup a GraphQL endpoint via *apollo-server* within that framework.

## Which to Use?

If you only need your server to serve a GraphQL API I'd say *apollo-server* is the way to go.

If you...

- Already have a web backend setup
- Know you'll need more than a GraphQL API
- Know where you're hosting it (say a GraphQL endpoint in a Next.js app)

Then you'll want to use the integration package for that framework/service.

## Conclusion

From what I can tell they're all the same under the hood (they depend on *apollo-server-core*) and  function the same way - they're just customized to work on the specific platform.

It also seems easy enough to move around if you need to change something - just move your type defs and resolvers over to the new way you setup your Apollo Server.
Mockito - Returning a different value for the same function invocation
Tags: java, mockito, codenewbie, testing
Published: 2021-02-03 16:07:24

When we are performing unit testing we generally stub or mock external classes, methods, and their return value. Sometimes one can encounter a scenario where different return values for the same method are expected. 
For this particular case, we can use the overloaded method `thenReturn` of Mockito
```
Mockito.when(<class_instance_name>.<method_name>(<method_args>))
       .thenReturn(T val1, T...values)
```
The above method ensures that you get a different value for each method invocation. If the number of method invocations exceeds the provided number of return values, then the last provided value in `thenReturn` is returned for each subsequent call.
Typescript design token docs in Storybook
Tags: typescript, webdev, design, storybook
Published: 2021-02-03 15:39:47

Storybook is great for documenting UI components but what about data structures such as a themes and design tokens? Here's a super quick way to add design token documentation into your Storybook. 

Using [MDX](https://storybook.js.org/docs/react/writing-docs/mdx) and [ArgsTable](https://storybook.js.org/docs/react/writing-docs/doc-blocks#argstable)

In `designtoken.stories.mdx`:

```jsx
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import { Theme, Breakpoints } from './helpers';

<Meta title="Design Tokens/Theme" />

### Theme

<ArgsTable of={Theme} />

#### Breakpoint Device Types

<ArgsTable of={Breakpoints} />

<Canvas>
  <Story name="Theme">
    <span>See Docs tab</span>
  </Story>
</Canvas>
```

Where `helper.tsx` is:

```typescript
import { ThemeType, theme } from '../DesignTokens';

export const Theme: (Theme: ThemeType) => void = () => {};

export const Breakpoints: (Breakpoints: typeof theme.Breakpoints) => void = () => {};
```

This super simple approach allows us describe important contracts throughout our design system implementation, without the need to manually write and maintain that documentation. Below is a screenshot of how that might look.

![Screenshot of Storybook documentation showing properties and type information](https://dev-to-uploads.s3.amazonaws.com/i/4jv59t3lehfzw8kdmmkc.png)
Document structure: Fonts, Verbatim and Comments
Tags: latex, codenewbie
Published: 2021-02-03 15:55:49

Hello friends how are you today?
We have learned the basics of the documents in LaTeX like how to install it, the preamble, and the body, how to set the language and the margins, type of documents, and paragraphs. 

Today we are going to learn the different fonts that you can find in LaTeX, but before we are going to learn how to comment in our source code and a special type of structure called Verbatim

# Comments

We can comment with `%`, everything we put in front of it, in the same line, is ignored by the interpreter

![comment](https://dev-to-uploads.s3.amazonaws.com/i/614gmvwmqxkfe7kw3dxd.png)

Produces
![Screenshot from 2021-02-02 21-37-55](https://dev-to-uploads.s3.amazonaws.com/i/9r7aq2y1tpuyusu8bjtl.png)
  
# Verbatim
Verbatim allows us to write the text as we write it, this is, like if it were plain text. We can use verbatim in-text or in several lines
## In-Line Text
We need to use `\verb`and to set its scope we can use `" "`, `! !`, `’ ’`, `@ @` these are to set its scope, any of them have the same function, we just need to choose the best option 
![verba](https://dev-to-uploads.s3.amazonaws.com/i/48r8lv4zcp7amqki9wau.png)

Produces
![Screenshot from 2021-02-02 21-47-53](https://dev-to-uploads.s3.amazonaws.com/i/c8vs7zis1osjxvcwpy6c.png)

## Multiple Lines
 
If we want to write multiple lines in this way, we need to use the `verbatim` environment 
![verbaL](https://dev-to-uploads.s3.amazonaws.com/i/ctxrexvpez1dfnr3qsos.png)

Produces
![Screenshot from 2021-02-02 21-51-21](https://dev-to-uploads.s3.amazonaws.com/i/4by8qz2kbuzvtrus45fi.png)

# Font Mode

We can write with different types of fonts during the document, we must type `{\type myText}` where *type* is the font mode that you want and *myText* is the text that will be printed in the desired type, here is a table with its commands and the letter it produces 

![Screenshot from 2021-02-02 22-02-39](https://dev-to-uploads.s3.amazonaws.com/i/h22hwk48h2cuofs75app.png)
 
# Font Size 

As in the font mode, we need to write `{\size myText}` where *size* is the desired size and *myText* is the text to apply the size, here is a table with its commands and the text size
 
![Screenshot from 2021-02-02 22-06-40](https://dev-to-uploads.s3.amazonaws.com/i/kbvvithmwp06ja4yi4jf.png)
 
That is all for today, thanks, do not forget to follow me on Twitter `@latexteada`
Full-blown Database Management Software written completely in Javascirpt ✨
Tags: node, typescript, javascript, database
Published: 2021-02-03 15:44:06

This is not just a fancy client, it's a complete DBMS which is completely written in NodeJS with type declarations and documentation to ease developer's introduction to the amazing world of SavanahDB

It is a NoSQL meaning you can store data flexibly in the JSON format but it can also be used to establish deep relations between tables, have groups in the filter, join data from different tables!

Let's create a Social Network with this Database : 

First, let's start a server to receive and process requests via various clients

```javascript
import { Server } from 'savanahdb' 

let server = new Server({
  path: '/var/db/', 
  masterKey: 'ksKkharaudjwnwbduxnsn5yahahhwwsmma' // 64-bit key to encrypt important configurations
}) 
```
And that's it! Run it with pm2
You have your own server running now! 

We connect to it using a client :
```javascript
import { Client } from 'savanahdb';

let client = new Client({
   user : "randomusr",
   pass : "fdASDFajd9awjef98awjefioawjeasdf"
})

let db = client.db('network')
let users = db.table('users')
let posts = db.table('posts')  
```
First, you store the User Document when they sign up:
```javascript
users.insert({
    name : 'John Adam',
    city : 'New York',
    tier : 'Silver',
    prem : true,
    id : 'usrOw9a0eif0923aewf'
})
```
Next you store two Posts they posted with reference to their id essentially establishing a relationship between the tables:
```javascript
posts.insert({
    usr : 'usrOw9a0eif0923aewf',
    content : 'I love this network.'
})
// A Few Moments Later..
posts.insert({
    usr : 'usrOw9a0eif0923aewf',
    content : "Nvm, I don't know anymore"
})
```
Now when someone visits the Orginal User's Profile to list the posts they have posted, you create a search like this :
```javascript
let usr = await users.search('id == "usrOw9a0eif0923aewf"', {
    join : {
      posts : 'that.usr == this.id' 
    }
}
```
In this case the usr Document will be :
```javascript
[{
   name : 'John Adam',
    city : 'New York',
    tier : 'Silver',
    prem : true,
    id : 'usrOw9a0eif0923aewf',
    posts : [{
    usr : 'usrOw9a0eif0923aewf',
    content : 'I love this network.'
  },{
    usr : 'usrOw9a0eif0923aewf',
    content : "Nvm, I don't know anymore"
  }]
}] 
```
Extremely capable Software do check it out!!

It is available to check out for free here : https://www.npmjs.com/package/savanahdb

If you are interested in the development or would like to receive updates for the package, you can join the official Discord Server here : https://www.discord.com/invite/GBmMQd2xtB
Shipping minimal CSS with Next.js + purgeCSS
Tags: nextjs, react, css
Published: 2021-02-03 15:19:00

For a new project I'll be working on, the company asked to work with Bootstrap to be able to use the built-in grid, utility classes etc.
When I think of Bootstrap, I think: a lot of CSS being added to the project which is never used. 

With the latest versions of Bootstrap, we have the possibility to only import the SCSS/LESS files for the features we will be using.
For example: 
```scss
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
```

The problem with this approach is that these separate files still include a lot of CSS we will not be using in our application.

So what I'd like to do instead, is import the whole bootstrap SCSS, and then delete the unused CSS when building the production output:

```scss
@import '~bootstrap/scss/bootstrap';
```

With this setup, the generated CSS has this size: ![cssbeforepurge](https://dev-to-uploads.s3.amazonaws.com/i/4rumyogkc0nop6c47tmc.PNG) 

This is a big CSS chunk for the one class from Bootstrap we're using:
```react
export default function Home() {
  return (
    <div className="container">
      <span>Test</span>
    </div>
  );
}
```

So it would be nice to get rid of this CSS in our production build.
To achieve this, we'll be using <a href="https://purgecss.com/guides/next.html#customize-postcss-configuration-next-js-9-3">purgeCSS</a>. 

We just need to add a postcss.config.js file to override the default postCSS config Next.js uses (https://nextjs.org/docs/advanced-features/customizing-postcss-config).

Our postcss.config.js will look like this:
```javascript
module.exports = {
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
            './pages/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ],
  ]
}
```

<b>Don't forget to install the node_modules which are used by the postCSS config! (postcss-flexbugs-fixes, @fullhuman/postcss-purgecss, postcss-preset-env, autoprefixer).</b>

When all this is done, you can create a new Next.js build (`npm run build`) and have the following result: 
![cssafterpurge](https://dev-to-uploads.s3.amazonaws.com/i/rzblno7p7vn2egyy17gh.PNG)

Inside the CSS output, it only includes the CSS for the `container` class, and the CSS variables used by Bootstrap.

That's a lot of CSS gone! Mission accomplished :-).
Mobile Development. React Native Roadmap.
Tags: react, mobile, discuss, tutorial
Published: 2021-02-03 15:17:21

<p align="justify">How often did you get an idea to create something of your own, interesting and new, something that you have never done before in your life? You turned on the heat, began to look into how to implement it, but finally burned out at the stages:</p>
    
    
<ul>
    <li><p align="justify">When you started collecting information and realized that you did not have enough knowledge/tools/money, etc.;</p></li> 
<li><p align="justify">When you started implementing the idea, faced difficulties and gave up at the very first stage;</p></li> 
<li><p align="justify">Having completed the first steps, you faced new problems, then stopped since there were lots of new and unknown. </p></li> 
</ul>


<p align="justify">Sounds familiar, isn't it? On our Earth, there are more unfinished paintings, unfinished pools, unfinished birdhouses than amateur masterpieces of art, happy children in pools and well-fed birds.</p>


<p align="justify">In 90% of cases, all incomplete business was associated with incorrect planning or with a lack of awareness of the whole picture. You simply did not recognize and were not prepared for the difficulties that you faced. You only knew your next step, but did not know how much you still have to go. Having realized that, there was no motivation for further movement.</p>

<p align="justify">Who'd have thought that more than one brush would be needed to paint a picture, that there could be stones under the ground, and a hole for birds should be cut before you hang the birdhouse on a tree. You saw the hill, reached it, and only then saw the next one. Demotivating, isn't it?</p>

>

> <p align="justify"><b>You can find video podcast of this article on our YouTube channel👇 </b></p>

https://www.youtube.com/watch?v=4LK47nPTwy4

<p align="justify">Like the post? Visit our <u><a href="https://2muchcoffee.com/blog/">blog</u></a> for more useful content.</p>
How We Built A Language Learning Constructor App For Chilled-Out Vocabulary Practice
Tags: javascript, react, swift, ux
Published: 2021-02-03 15:10:24

We are happy to show you the new app that we recently released for our client!

The goals were
▫️  to help Russian-speaking users learn their first 100-10,000 English words without breaking a sweat;
▫️  to design the app in a way that would prevent the learning curve from seeming overwhelming or boring;
▫️  to figure out the architecture that would allow adding an unlimited amount of new languages and scale the app on the fly.

💡 We built a language learning constructor app for chilled-out vocabulary practice. Our client’s idea evolved from 2 languages to unlimited opportunities, and we’re glad we could help with bringing it to life.

Akler is an application where you can learn English, German, Russian, Italian, Spanish, French and other languages. The application combines a convenient and pleasant interface, a flexible learning system that includes game elements.

📅 more than 4 months of development from idea to a store-ready MVP.

▫️  5000+ words and phrases and their translations into 6 languages.
▫️  120+ screens and 4 iterations of design to deliver an eye-candy app that keeps users involved.
▫️  6 languages English, Russian, German, French, Spanish, and Italian.
▫️  by increasing the capacity, it’s possible to handle any amount of users in the future
▫️  new languages and translations are added via the admin panel and show up in the app without restarting it

More about Akler 👉🏻
https://rocketech.it/akler
Why we don't and should not use React.memo with every compoent to boost performance ? 
Tags: react, javascript, redux, productivity
Published: 2021-02-03 14:59:48

If you have been working with React chances are you have worked with React.memo which is used to avoid unnecessary renders of a compoent which results in boosting the performance of that component. 
### Why we don't use React.memo in all our components to increase performance of compoents?

I know the answer but want to see how you think about this.
How do I resize pixel art without losing quality?
Tags: python, help
Published: 2021-02-03 14:54:23

Let's say I have pixel art that's 100 by 100 pixels. How would I scale it up by a factor of 2 to be 200 by 200? Since it's pixel art I want it remain clear when becoming larger. I thought about getting individual pixels and duplicating them and writing them out to a new image file. For example, if the first pixel (top left) is white then my new image would need 2 white pixels (starting from the top left) and then would be duplicated below it.

Does that make sense? Is there a better way to do this?
Nix Multi-User Installation Without Default Channel
Tags: nix, linux
Published: 2021-02-03 14:53:10

# Why do this?

Let's just say I want to restrict all users from polluting `/nix/store` but still allow them to use Nix toolchains.

# Installation

{% asciinema 388836 %}

fish
```fish
sh (curl -L https://nixos.org/nix/install | psub) --daemon
```

zsh
```zsh
sh =(curl -L https://nixos.org/nix/install) --daemon
```

bash
```bash
sh <(curl -L https://nixos.org/nix/install) --daemon
```

# Replace channel

When you list the channel in a normal way you will get an empty list.
```sh
nix-channel --list
```
However, when you run it as a superuser then you will see **nixpkgs** channel.

{% asciinema 388837 %}

This channel is available to all users. Let's make this channel only accessible to you!

## 1. Remove default channel

```sh
sudo nix-channel --remove nixpkgs
```

{% asciinema 388838 %}

## 2. Re-add channel

```sh
nix-channel --add https://nixos.org/channels/nixpkgs-unstable
```
{% asciinema 388840 %}

## 3. Add yourself to the group

```sh
sudo groupadd -r nixbld
sudo useradd -c "Nix build user $USER" \
  -d /var/empty -g nixbld -G nixbld \
  -M -N -r -s "$(which nologin)" \
  nixbld_$USER
```

{% asciinema 388848 %}

> __For [fish][] user__: remove `"` and `$` so that it would be `(which nologin)`

## 4. Update nix channel and toolchains

To update channel
```sh
nix-channel --update
```
> if you get a permission error and `sysemctl status nix-daemon` has FAIL messages, try rebooting your system

Optionally, upgrade all Nix toolchains
```sh
nix-env -iA nixpkgs.nix nixpkgs.cacert
systemctl daemon-reload
systemctl restart nix-daemon
```

{% asciinema 388854 %}

## 5. Fixing NIX_PATH
{% github https://github.com/NixOS/nix/issues/2033#issuecomment-744059453 %}

```sh
echo "export NIX_PATH=$NIX_PATH:$HOME/.nix-defexpr/channels" >> ~/.profile
```
(in my case, I add it to my .xprofile)

if you don't do this, nix-shell will complain:
{% asciinema 392569 %}
{% github https://github.com/NixOS/nix/issues/2033 %}

> TIPS: use [nix-direnv][] for this

[nix-direnv]: https://github.com/nix-community/nix-direnv

# References
- [Nix Manual: Multi User Installation](https://nixos.org/manual/nix/unstable/installation/installing-binary.html#multi-user-installation)
- [Nix Manual: Multi User Security](https://nixos.org/manual/nix/unstable/installation/multi-user.html)
- [Nix Manual: Upgrading Nix](https://nixos.org/manual/nix/unstable/installation/upgrading.html)

[fish]: http://fishshell.com/