teleren/devto huggingface dataset:
Getting Started with React Native and Expo: An Introduction to.env Files
Tags: reactnative, appdevelopment, javascript, mobileappdevelopment
Published: 2023-02-26 17:44:02

Getting started with React Native and Expo can be a great way to build mobile applications, especially if you're already familiar with React. One important aspect of app development is the use of environment variables. In this article, we'll show you how to use a .env file to manage your environment variables in a React Native project built with Expo.

##What is Expo?
Expo is a framework for building React Native apps. It is a set of tools and services made for React Native. It will help you begin building React Native apps with ease. Expo provides a command-line interface that allows developers to easily create, build, and publish their apps.

##What is a .env file?
Environment variables are a set of dynamic values that are used by your application at runtime. For example, you may want to use a different API key or URL depending on whether you're running your app locally or in production. A .env file is a simple text file that contains key-value pairs, and is used to store environment variables for your app.
##Using a .env file with Expo
To use a `.env` file with Expo, you'll need to install the "dotenv" package. This package will load your environment variables from your .env file, and make them available in your app.
###Here are the steps you'll need to follow:

First, navigate to your project's root directory in your terminal.
Run the following command to install the dotenv package:
1- `npm install dotenv`
2-  Create a `.env` file in your root directory. Here's an example of what it might contain:
```
//.env file
API_KEY=your-api-key
API_URL=https://api.example.com
```

3- When configuring Babel, remember to add the path to your .env file as well. This file should always be located in the root directory of your project. See below

```
//babel.rc
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
  [
    "module:react-native-dotenv",
    {
      moduleName: "@env",
      path: ".env",
    },
  ],
],
};
};
```
Now, you can use your environment variables in your code. Here's an example of how to access the API key:

```
import { API_KEY } from '@env';
console.log(API_KEY);
```
In this example, we're using the "API_KEY" variable that we defined in our `.env` file. The "@env" syntax is used to tell Expo to load the variable from the .env file.

Please note that our `.env` file should always be located in the root directory of our project. To ensure the security of our API, it's important to add the `.env` file to the `.gitignore` file. This will prevent the file from being pushed to the repository and keep our API credentials safe.

##Conclusion
Using a `.env` file to manage your environment variables can be a great way to keep your app's sensitive information secure, and simplify the process of deploying your app to different environments. By following the steps outlined in this article, you can get started with managing your environment variables in a React Native project built with Expo.
Postgres and Redis containers with Docker Compose
Tags: dockercompose, postgres, redis
Published: 2023-02-26 17:29:37

---
title: Postgres and Redis containers with Docker Compose
published: true
tags: ['dockercompose', 'postgres', 'redis']
canonical_url: https://sevic.dev/notes/postgres-redis-docker-compose/
---

Docker Compose facilitates spinning up containers for databases without installing the databases locally. This post covers the setup for Postgres and Redis images.

### Prerequisites

- Docker Compose installed

### Configuration

The following configuration spins up Postgres and Redis containers with UI tools (Pgweb and Redis Commander).

Connection strings for Postgres and Redis are `redis://localhost:6379` and `postgres://username:password@localhost:5435/database-name`.

Pgweb and Redis Commander are available at `http://localhost:8085` and `http://localhost:8081` links.

```yml
# docker-compose.yml
version: '3.8'

services:
  postgres:
    image: postgres:alpine
    environment:
      POSTGRES_DB: database-name
      POSTGRES_PASSWORD: password
      POSTGRES_USER: username
    ports:
      - 5435:5432
    restart: on-failure:3

  pgweb:
    image: sosedoff/pgweb
    depends_on:
      - postgres
    environment:
      PGWEB_DATABASE_URL: postgres://username:password@postgres:5432/database-name?sslmode=disable
    ports:
      - 8085:8081
    restart: on-failure:3

  redis:
    image: redis:latest
    command: redis-server
    volumes:
      - redis:/var/lib/redis
      - redis-config:/usr/local/etc/redis/redis.conf
    ports:
      - 6379:6379
    networks:
      - redis-network

  redis-commander:
    image: rediscommander/redis-commander:latest
    environment:
      - REDIS_HOSTS=local:redis:6379
      - HTTP_USER=root
      - HTTP_PASSWORD=qwerty
    ports:
      - 8081:8081
    networks:
      - redis-network
    depends_on:
      - redis

volumes:
  redis:
  redis-config:

networks:
  redis-network:
    driver: bridge
```

Run the following command to spin up the containers.

```bash
docker-compose up
```

### Boilerplate

Here is the [link](https://sevic.dev/nestjs-starter?ref=devto-pg-redis) to the boilerplate I use for the development.
Whats Medusa an introduction part 2 Next.js storefront
Tags: medusa, javascript, webdev, beginners
Published: 2023-02-26 17:43:25

As we know from part 1 of this series [Part 1](https://dev.to/nfuhs/whats-medusa-an-introduction-part-1-3753) Medusajs itself is based on 3 components:

Medusa Server
Admin Dashboard
Storefront

Now we will take a look at howto install and deploy a Storefront based on [Next.js](https://nextjs.org/). We will start by creating a new Next.js project using the Medusa starter template.

```
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

```
Next we change in to the newly created directory my-medusa-storefront and rename the template environment file:

```
cd my-medusa-storefront
mv .env.template .env.local
```

Make sure the Medusa Server is running after that it's time to start the Next.js server.

```
npm run dev
```

Your new Next.js based storefront is running on `https://localhost:8000`.

Thats it for this part of the series in the next part we will take a look at customisation of the storefront and learn more about using APIs.

Stay tuned and don't forget to follow me on [Twitter](https://twitter.com/NorbertFuhs).
My Experience as a New Developer
Published: 2023-02-26 17:40:14

# 1) What is confusing about platforms?
What's really confusing about frameworks and stuff is that some of them have very different syntaxes and way of doing things. When you are first learning web development stuff, they start you off with the basics. But as you begin to explore frameworks, some of them will have you unlearn things to learn the new way that the framework handles it. Once you are done with that framework and come to use something else, you may find that some of the syntaxes and tooling in your previous framework doesn't exist in others.


# 2) How could web components and VanillaJS standards be taught in a way that is more approachable?
I like the idea of hands on teaching. I feel that bookwork is important and all, but I believe nothing beats sitting down and actually practicing it. Having hands on work with the basics of VanillaJS is my best bet. Properly splitting up the standards and work is also important because you don't want to make things seems unapproachable because of their complexity. Start of with the basics, and keep building the complexity as you go. I really just feel that we shouldn't overcomplicate the easy problems when first learning. I also don't like the idea of creating highly specific and framework exclusive questions. Having a single standard agreed upon may seem impossible currently, but I feel that would be very beneficial to beginners like me. Rather than being told that this is how this framework might do this, but only for this framework.


# 3) What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)
I personally found Vue the easiest to work on as a new developer. When I first began working on vue, it was very easy to identify which file I had to edit. It was called HelloWorld.vue which to me seemed like a dead giveaway. It also helped that I was able to put all my HTML, CSS, and JavaScript in one file.



# 4) Think back on the tooling. What parts were confusing? What clicked with you immediately?
The entire idea of tooling is still kind of fuzzy to me. My best guess right now is that it is referring to the different features that different platforms and frameworks bring. It seems like fancy new features that make life more easier in some situations. It clicked to me pretty quickly why the author of the article wanted to minimize tooling. Since this complicates things and creates highly specific framework only problems and solutions.



# 5) What additional readings did you have to do in order to make sense of things.
https://www.sitepen.com/blog/intro-to-html-first-frontend-frameworks
I read this article to help me understand the HTML first approach. I like the idea of shipping portions of HTML separately to at least be able to ship functional product. Then the fancy interactive bells and whistles separately. Since users should at least be able to access the content first, then they can worry about interactivity.
Olá eu sou Jairo Martins
Tags: hello, brasil, maranhão, fatec
Published: 2023-02-26 17:38:00

---
title: Olá eu sou Jairo Martins
published: true
description: 
tags: hello, Brasil, Maranhão, FATEC
# cover_image: https://internetlab.org.br/wp-content/uploads/2017/07/policial_hacker.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-26 17:12 +0000
---

  Sou um Policial Militar no estado do Maranhão, Tecnólogo em Banco de Dados, formado na Fatec de Lins/SP.

  Mesmo sendo militar, a programação ainda continua sendo minha paixão. Não cheguei a trabalhar profissionalmente na área, mas atualmente desenvolvo alguns sistemas para o batalhão em que trabalho aqui na região sul do estado.

  Sempre uso o dev.to para me manter atualizado e ver o que está rolando de novo no mundo do desenvolvimento. São 5 anos acompanhando e nunca tinha publicado algo. Talvez eu escreva, mas tenho muito receio disso e não sei muito bem o porquê.Penso: "já tem muito conteúdo aqui nada rede, vai ser apenas mais um, e fica por isso mesmo".

  Atualmente, estou trabalhando em um sistema de registro de ocorrência chamado "BoletimOnline", no qual o Policial Militar faz o boletim diretamente no navegador web e gera um arquivo em PDF com os dados da ocorrência. Estou utilizando NodeJS, ReactJS e MongoDB. Futuramente, esses dados das ocorrências vão servir (já servem, mas não de forma automatizada) para gerar dados estatísticos e criar o mapa de ocorrências e criminalidade da cidade.
 E isso é tu-tudo pessoal !
Notion UI React
Tags: notion, react, ui, webdev
Published: 2023-02-26 17:34:59

I really like using Notion to store my information in a structured way, including my resume.

Recently, I wanted to create a portfolio site for myself that included information about me, additional links, and some blocks that would only be available to me. For a long time, I couldn't decide on the ideal design for my site. I looked at my Notion page and tried to envision it on my website. Eventually, I realized that I wanted it to look exactly the same and began coding my site by looking at the CV page in Notion.

During the creation process, I divided repetitive UI components such as headings and text, among others. I decided to use them as a third-party resource.
I thought it would be cool to create a UI library out of them and publish it. Perhaps others also love the Notion design system as much as I do 😀

This is how the idea came about, and now I want to briefly introduce it to you:

## Notion UI React - [npm](https://www.npmjs.com/package/notion-ui-react) | [git](https://github.com/bogdanaks/notion-ui-react)

[Storybook](https://bogdanaks.github.io/notion-ui-react)
Those who know what Storybook is can immediately jump to the link provided. For those who don't know, they might find it interesting too 😊

Now, I would like to give you a demonstration of one of the pages from my portfolio site:
![My website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7x6nntyronzbuw8d2oa.jpg)
[Website](https://bogdanaks.vercel.app/)

Everything is built using the components of the [Notion UI React](https://www.npmjs.com/package/notion-ui-react) library. I really love its clean and minimalistic interface and will continue to update the library and include more components.

If anyone is interested, I would be happy to accept pull requests to add new functionality.
Thank you!
Extracting text from pdf files using pyPDF3
Tags: pypdf3, python, pdf
Published: 2023-02-26 17:26:33

PyPDF3 is a Python library for working with PDF files that builds upon the PyPDF2 library. It provides an easy-to-use interface for reading and writing PDF files, and it includes tools for extracting text from PDF files. In this article, we will explore how to use PyPDF3 to extract text from PDF documents.

**Installation**

To use PyPDF3, you need to install it using pip. You can do this by running the following command in your command prompt or terminal:

> pip install PyPDF3

Once you have installed PyPDF3, you can import it in your Python script using the following line of code:

`import PyPDF3`

**Extracting Text from PDF Documents**

To extract text from a PDF document using PyPDF3, you first need to open the PDF file in binary mode using Python's built-in open() function. You can then create a `PdfFileReader` object using PyPDF3, which allows you to read the contents of the PDF file. Here's an example:

```
   import PyPDF3
   with open('sample.pdf', 'rb') as pdf_file:
     pdf_reader = PyPDF3.PdfFileReader(pdf_file)
     text = ''
     for page_num in range(pdf_reader.numPages):
        page = pdf_reader.getPage(page_num)
        text += page.extractText()
   print(text)
```
How ChatGPT Work
Tags: programming
Published: 2023-02-26 17:16:59

As an AI language model, ChatGPT work by processing and analyzing vast amounts of text data using machine learning algorithms to understand natural language and generate responses to user inputs.

Here's a brief overview of how it work:

**Training Data:** It was trained on a large corpus of text data, such as books, articles, and web pages. The training data was pre-processed to remove noise, such as HTML tags, punctuation, and stopwords.

**Language Model Architecture:** It based on a transformer architecture, which is a type of deep neural network designed for natural language processing. The transformer architecture uses a sequence-to-sequence approach that is particularly effective for tasks such as machine translation and text generation.

**Tokenization:** When you send a message, it first tokenize it into a sequence of tokens or subwords. This process breaks down the text into smaller units that are easier for the model to process.

**Encoding:** The tokenized input is then passed through an encoder, which generates a sequence of contextualized embeddings that capture the meaning and context of each token.

**Decoding:** The contextualized embeddings are then passed through a decoder, which generates a response based on the input and the knowledge stored in the model.

**Post-Processing:** The generated response is then post-processed to remove any noise or redundant information, such as repeating phrases or meaningless filler words.

**Response Delivery:** The final response is delivered to the user in natural language form.

It's important to note that ChatGPT responses are only as good as the data it was trained on, so there may be instances where it don't understand or correctly respond to your input. Nonetheless, it'll do it best to provide helpful and informative responses to your questions!

> _This blog is written with the help of ChatGPT_ 🫰
IST 256 Week 7
Published: 2023-02-26 17:12:07

1. What is confusing about platforms?

To put it bluntly complexity was my main problem. Before working on these platforms I as an IST student only had to work on basic JavaScript which was difficult but I had a firm understanding of. Now I have to work with multiple languages that have completely different rules and methods in comparison to JavaScript which I find difficult. Additionally, I have to look up learn various mean to translate a piece of code from one language into digestible code for another which has cause my friends and I many problems.

2. How could web components and VanillaJS standards be taught in a way that is more approachable?

To be perfectly honest I don't really know. I would guess to say make VanillaJS and web components more standardized but I know that is nearly impossible due to the structure of such utilities. However, I believe the differences between the various web components and JS can be more standardized then they are now which will certainly help with teaching in the future. 

3. What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)

I would say I found Vue the easiest to work with. This is primarily because I already had a fair amount of experience with JavaScript which Vue takes a lot of influence from. It is certainly a lot easier than React which doesn't have that foundation in JavaScript

4. Think back on the tooling. What parts were confusing? What clicked with you immediately?

I found nearly all aspects of tooling confusing. Primarily due to the fact that i had no prior experience with tooling. Therefore, I had to access a lot of sources, both online and from my friends, to make any sense of it. To be honest, I'm still not sure if I understand it. 

5. What additional readings did you have to do in order to make sense of things.

A lot of reddit boards, basically whenever I had a specific problem I just looked it on Google and it brought me to a reddit post. I mean, the situation wasn't the problem I was facing but it was close enough that it gave me a general direction to find a solution. Additionally the lit tutorials have been a godsend in understanding the various aspects of web programming as well.
Swift Klib v0.2.0 is out
Tags: kotlin, kotlinmultiplatform, gradle, swift
Published: 2023-02-26 17:07:10

**Swift Klib** Gradle Plugin v0.2.0 is released.

{% embed https://github.com/ttypic/swift-klib-plugin %}

This gradle plugin provides easy way to include your Swift source files in your **Kotlin Multiplatform Mobile**
shared module and access them in Kotlin via `cinterop` for iOS targets. It is useful for:

* Accessing Swift-only libraries _(e.g. CryptoKit)_
* Creating a Kotlin-Friendly Swift API
* Learning how Swift <-> Kotlin interoperability works


This release contains:

* **Fix:** add a step to clean old build files in the build directory
* Light refactoring of source code
one-liner: remove the same line from many files
Tags: perl, programming, productivity, beginners
Published: 2023-02-26 16:59:48

---
title: one-liner: remove the same line from many files
published: true
description: one-liner to remove the same or very similar lines from thousands of files.
tags: perl, programming, productivity, beginners
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-26 16:45 +0000
series: perl
---

In one of the projects I work on there are thousands of YAML file with data. For historical reason **some** of those files had an entry called `id:` followed by a number. e.g. `id: 529`.

They were referring to the id in the original format from where the YAML files were created. At one point we did not need that line any more and it was just confusing the non-technical editors of these files.

So I wanted to remove them.

The solution is a Perl one-liner:

```
perl -n -i -e 'print if not /^id:/' *.yaml
```

* `-n` means: go over each line of each file
* `-i` means "inplace editing" - replace the files with what the program prints
* `-e` means the following string is the code
* 'print if not /^id:/' means: print the current line if it does not start with `id:`
* This code uses behind the scenes the default variable that is also called `$_`, but it is better to use it implicitly
* `/^id:/` is just a simple regular expression
* Perl allows the inverting of the `if`-statements writing: `statement if condition`.
* `*.yaml` is an instruction to the Unix/Linux shell to list all the files with YAML extension as parameters of the command


One could also use `unless` instead of `if not`, but it seems to be harder to understand.

```
perl -n -i -e 'print unless /^id:/' *.yaml
```
AbortController (Cancelable Async Code)
Tags: javascript, node
Published: 2023-02-26 16:48:48

- Why do we need a way to cancel async code?
- Real life examples;
- Are there other libs that support canceling signal?
- Are there other libs that implement a different way of cancelation?

The fetch api has already implemented an option to pass down the signal object but you can explicitly implement to your own Promise code.


### Example 1: Manually aborting an async request.
```javascript
// 1. We instantiate the abort controller
const abortController = new AbortController();

// 2. We pass down the signal object to the async code we need to control.
function asyncCode(abortSignal) {
  return new Promise((resolve, reject) => {
    const timeOut = setTimeout(() => {
      resolve("done");
    }, 5000);

    // 3. We listen to the signal abort event and do what is needed.
    abortSignal.addEventListener("abort", () => {
      clearTimeout(timeOut);
      reject("Fetch was aborted");
    });
  });
}

asyncCode(abortController.signal)
    .then(console.log)
    .catch(console.log);

setTimeout(() => {
  // 4. We can call the abort method anywhere outside of the async code.
  abortController.abort();
}, 2000);

```

### Canceling a fetch request

The fetch() function can receive an signal and trows an "TimeoutError" when it aborts.

```javascript
try {
    await fetch('url...', { signal: AbortSignal.timeout(3000) });
} catch(e) {
    if (e.name === 'TimeoutError') {
        console.log('The request took more than 3 seconds to complete');
    }
}
```
在 VBA 中讀取 UTF8 編碼的文字檔
Tags: vba, office
Published: 2023-02-26 16:43:18

在 VBA 中, 如果要讀取文字檔, 可以使用 [`FileSystemObject`](https://learn.microsoft.com/en-us/office/vba/language/reference/user-interface-help/filesystemobject-object) 物件, 像是這樣：

```vb
Set file = CreateObject("Scripting.FileSystemObject").OpenTextFile(txname, 1)
Selection.Text = file.ReadAll
```

其中 [`OpenTextFile`](https://learn.microsoft.com/en-us/office/vba/language/reference/user-interface-help/opentextfile-method) 有第 3 個參數 `create` 可以指定當檔案不存在時是否要建立新檔案。另外還有第 4 個參數 `format` 可以指定檔案的編碼：

|常數名稱|值|說明|
|----|----|----|
|TristateUseDefault|-2|使用系統預設編碼開啟檔案|
|TristateTrue|-1|以 Unicode 編碼開啟檔案|
|TristateFalse|0|以 ASCII 編碼開檔|

不過要注意的是,上表中的 Unicode 指的是 UTF16 編碼, 並不能讀取 UTF8 編碼的文字檔案。

## 改用 ADODB.Stream 物件讀取 UTF8 編碼的文字檔

`FileSystemObject` 並不能隨意指定文字檔案的編碼, 如果需要讀取特定編碼格式的文字檔案, 就要改用 [`ADODB.Stream`](https://learn.microsoft.com/en-us/sql/ado/reference/ado-api/stream-object-properties-methods-and-events?view=sql-server-ver16) 物件, 像是這樣：

```vb
Set objStream = CreateObject("ADODB.Stream")
  
objStream.Charset = "utf-8"
objStream.Open
objStream.LoadFromFile (txname)

Selection.Text = objStream.ReadText()
```

只要設定 [`Chaset`](https://learn.microsoft.com/en-us/sql/ado/reference/ado-api/charset-property-ado?view=sql-server-ver16) 屬性, 就可以指定文字串流要採用的編碼格式, 即可透過 [`LoadFromFile`](https://learn.microsoft.com/en-us/sql/ado/reference/ado-api/loadfromfile-method-ado?view=sql-server-ver16) 載入文字檔, 並可透過 [`ReadText`](https://learn.microsoft.com/en-us/sql/ado/reference/ado-api/readtext-method?view=sql-server-ver16) 方法讀取文字檔案內容。