teleren/devto huggingface dataset:
Next 基礎 Part 00 -- 概要整理
Tags: nextjs, react, ssg
Published: 2023-02-27 15:34:03


## Next.js とは？

https://udemy.benesse.co.jp/development/app/what-is-next-js.html

https://dev.classmethod.jp/articles/introduction-to-nextjs-part-2/

udemy と クラスメソッドの記事を参考にする。

Next.js とは、React.js のラッパーフレームワーク。
React と比べたメリットは下記があると解釈した。

### Next.js のメリット

1. サーバーとして DB へのクエリなどの処理が書ける
  * サーバーサイドのレンダリング機能が組み込まれているから。
2. ページを簡単に作れる
  * ルーティング機能が組み込まれているから。
3. ブログなどの Web サイトを高速に表示できる
  * SSG が使えるから。
4. ヘッダーやサイドバーなどの共通パーツのみ先に描画できる
  * Pre-rendering が使えるから。

---

## SSG ( Static Site Generation ) とは？

サーバー側で、静的な HTML + CSS に全て生成しておくこと。

ビルド時にサーバー側で全ページを生成する。
これを全リクエストに使い回すことで高速化できる。

通常の Java などの SSR (サーバーサイドレンダリング) のアプリでは、
リクエスト毎に HTML + CSS を生成している。
それと比べると高速化できていると言えると解釈した。

---

## Pre-rendering とは？

https://dev.classmethod.jp/articles/introduction-to-nextjs-part-2/#:~:text=Summary%3A%20Pre%2Drendering%20vs%20No%20Pre%2Drendering

Next.js の SSR や SSG で、静的な変更のない要素だけ先に描画する機能。

先に変更がされないブログ記事のヘッダーや著者プロフィールが描画されて
後からブログ記事の中身が描画されると解釈した。

UX が良さそう。ずっと何も表示されずに待っている旧来のレンダリングより。

---

## ISR ( Incremental Static Re-generation ) とは？

https://engineerblog.mynavi.jp/technology/on-demand_isr_introduction/#:~:text=ISR%E3%81%A8%E3%81%AF%E3%80%81%20Incremental%20Static,%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82

マイナビの記事によれば、秒単位でビルドして、中身を更新してくれる機能のようだ。

ISR をしていない場合は、1 日に 3 回ほどパイプラインを組んで更新するのではないかと予想する。

Next 11 からのみ使えるらしい。

---

## 今後

クリーアーキに寄せてみる

1. MySQL サーバーから値を読み書きする Driver 層を作る
2. バックエンドとして API として提供する Rest 層を作る
3. フロントエンドとして API から取り込むステートを作る
Music Monday — What are you listening to? (Chill Edition II)
Tags: watercooler, discuss, music
Published: 2023-02-27 15:30:29

_cover image source: [Laurent Hrybyk](https://giphy.com/laurenthrybyk/)_

**We've been down this path once before [in August of last year](https://dev.to/music-discussions/music-monday-what-are-you-listening-to-chill-edition-nj0), but today I'm running low on ideas and figured I'd recycle an old goodie. I often like to toss on chill, instrumental music when I'm working and seeing the massive success that the [Lofi Girl YouTube station](https://www.youtube.com/watch?v=jfKfPfyJRdk&ab_channel=LofiGirl) has had, it appears I'm not alone. Anywho, I'm eager to hear y'all's suggestions and if anybody has ideas for next week's topic, lemme hear it!**


![Cartoon character standing with a guitar in the desert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3qru9uzlrmhk5nfm58j.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

***

Gimme your best chill tunes! _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

Really looking forward to listening to y'all's suggestions! 🎶
A Potentially Expensive Mistake
Tags: java, pitfalls, lessonslearned
Published: 2023-02-27 14:45:06

Once upon a time, there was a project. We upgraded its JVM from Java 11 to Java 17 and did some smoke testing. Everything looked fine, except our financial values, which were not formatted correctly anymore.

We had been using the standard `NumberFormat` class with the correct locale in order to ensure the correct formatting. Java 11 did this right and formatted numbers with spaces as thousand separators, like this: `1 000 000`. Java 17, for some strange reason, decided to change this and used commas instead, like this: `1,000,000`, even though the locale was exactly the same.

We of course needed to fix this, so we changed the `DecimalFormatSymbols` like this:

```java
var formatter = NumberFormat.getNumberInstance(locale);
var symbols = ((DecimalFormat) formatter)
    .getDecimalFormatSymbols();
symbols.setGroupingSeparator(' ');
symbols.setMonetaryGroupingSeparator(' ');
((DecimalFormat) formatter).setDecimalFormatSymbols(symbols);
```

This did the trick and the financial values were again formatted correctly and all was well, right?

Unfortunately not. You can also use `NumberFormat` to parse strings and in a few places of the code, we did just this. When we were using only `NumberFormat.getNumberInstance(locale)` without any customization, this worked exactly as it was supposed to. Once we started to do customization of the formatting, things took a dangerous turn that was not picked up by any of our unit tests.

If you take a value formatted by the customized formatter and asks a non-customized formatter to parse it, like this, what do you get?

```java
var formatted = formatter.format(1000000); // "1 000 000"
var parsed = NumberFormat.getNumberInstance(locale)
    .parse(formatted); // ??
```

It turns out, the `parsed` variable above will not contain the value of `1000000`, but `1`!

You see, the `NumberFormat.parse` method only parses the beginning of the string. Once it encounters a character it does not recognize, it stops and returns the result. For example this code:

```java
formatter.parse("1000 pirates on a ship");
```

will not throw an exception but return `1000` and discard the rest of the string. I was not aware of this, even though it says so in the JavaDocs. This also happened with the parsing of the financial values, since space as a thousand separator was not a valid character from the point of view of the uncustomized formatter.

Needless to say, converting one million into one is quite a serious bug. In our case, it made it all the way into production before we caught it but luckily, it had not managed to cause any damage yet.

I had not expected a change of VM to have this kind of effect, but it is often the unexpected bugs that end up biting you the hardest.
Memory Management in CockroachDB
Tags: cockroachdb, memory
Published: 2023-02-27 14:42:42

If you've played with CockroachDB before, you may have seen some memory-related flags when starting Cockroach.  Specifically, things called "cache" and "max-sql-memory":
```bash
cockroach start \
--certs-dir=certs \
--advertise-addr=<node1 address> \
--join=<node1 address>,<node2 address>,<node3 address> \
--cache=.25 \
--max-sql-memory=.25
```

We talk a little bit about [these settings](https://www.cockroachlabs.com/docs/v22.2/recommended-production-settings#cache-and-sql-memory-size) in our docs, but how are they actually used?

I put together a few diagrams to illustrate what we mean by cache and sql-memory, and I'll try to illustrate how they're used.

![Diagram of CRDB Node and its memory caches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njmxau7r3whkpq2wae3r.png)

Above is a diagram of a node running in a CockroachDB cluster.  You can see that there are two caches managed by the `cockroach` process called SQL Memory and Pebble Cache.  What we refer to above as "cache" is this Pebble cache.  Pebble is the name of the Key/Value storage engine that CockroachDB leverages to actually store data.

There are some other areas of memory available outside of the `cockroach` process, namely the Operating System's page cache.

Let's consider a read that happens against a CRDB cluster, and let's assume for this example that this is the first read that's happened against this node so there is nothing loaded into any caches.


![Read - no cache hits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya67gqt112x6fa3g053q.png)

Here are the steps that happen to satisfy this read query:

1. SQL SELECT query hits the SQL engine
2. SQL engine asks KV for data
3. KV asks the O/S for data
4. O/S reads from disk & loads files into the page cache (compressed -- all SSTables in CRDB are compressed)
5. O/S gives KV data
6. KV puts data in Pebble cache (uncompressed)
7. KV processes data and gives to SQL
8. SQL uses memory to process data (ordering, grouping, etc.)
9. SQL returns results to client

You can imagine that on a subsequent read, that some of these steps could be short-circuited if they got a cache hit -- namely, you might be able to avoid the read from disk and only hit the O/S Page cache; or, even better, if the Pebble cache has the data, you don't need to even talk to the O/S at all.

The write path for a CockroachDB node is simpler.

![Write path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbdp6gy9amz2tl4qlzqn.png)

The write involves:

1. Mutation query (i.e., INSERT/UPDATE/DELETE) hits the SQL engine
2. SQL engine passes data to KV engine
3. KV writes data to SSTables in memory
4. KV calls fsync to flush memory to disk (compressed)
5. KV updates the Pebble cache (uncompressed)
6. KV acknowledges write to SQL engine
7. SQL returns acknowledgement to client

Hopefully, this blog clears up what "SQL Memory" and "Cache" mean in the context of CockroachDB.  Happy SQL-ing!
Um resumo sobre: listas encadeadas com extremidades duplas.
Tags: algorithms, python
Published: 2023-02-27 14:34:48

Para um melhor entendimento deste resumo, leia sobre [lista encadeada simples](https://dev.to/costamateus7/um-resumo-sobre-listas-encadeadas-simples-3lo6), pois lá faço uma boa introdução sobre as listas encadeadas. 
Aqui irei abordar sobre as listas encadeadas com extremidades duplas.

Enquanto a lista simples com uma única extremidade possui uma referência para o primeiro nó, a lista com extremidades duplas, referencia o primeiro e o último nó. Dessa maneira, nós podemos ter acesso tanto ao primeiro elemento da lista, quanto ao último, sendo que o último podemos inserir também dados no final. Entretanto, nós não excluímos elemento diretamente do final, somente pesquisando elemento por elemento, até chegar no último, como nas listas encadeadas com extremidade única. Isso ocorre, porque só podemos percorrer a lista da esquerda para a direita, sendo assim, se excluirmos o último, não conseguimos ter acesso ao anterior para indicar que o anterior será o último.  Repare na imagem que as setas vão em uma única direção (esquerda para direita):


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

Para inserir um item na última posição:
1- Criamos um novo nó;
2- O objeto que era o último não aponta mais para Null e passa a apontar para o novo objeto;
3-  O novo objeto irá apontar para null; 
4- Por fim, nós tiramos o link do cabeça da lista apontando para o que era o último e apontamos para o que agora é o último.

A imagem irá facilitar a visualização:


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

Para acessar as outras operações acesse [este link](https://dev.to/costamateus7/um-resumo-sobre-listas-encadeadas-simples-3lo6) sobre as filas encadeadas com extremidade única, pois é a mesma ideia. 

Quanto ao Big-O dessas operações, ficam da seguinte maneira:

Na inserção e exclusão do início e do final, será O(1) - constante. (Excelente performance).
Pesquisar, inserir e excluir um item específico, requer buscar os itens, o que resulta em uma notação O(n) - linear. Entretanto, na exclusão, não é necessário o remanejamento dos itens, como nos vetores. 
Por fim, essa estrutura utiliza somente a memória que necessitar, podendo ser expandida de acordo com o aumento da lista, como nas listas simples com extremidades únicas.

[Aqui está](https://colab.research.google.com/drive/1CxHcLP9EMEOyYblc7w2KjEJ3tJP6m8mx?usp=sharing) um algoritmo feito em python com a ideia de listas encadeadas com extremidades duplas.


Caso tenha alguma sugestão sobre o tema, mande mensagem. Será muito bom evoluir com sua ajuda! Obrigado por chegar até aqui e espero ter ajudado!

Este resumo é baseado no curso: [Estruturas de dados e algoritmos em python](https://www.udemy.com/course/estrutura-de-dados-e-algoritmos-python-guia-completo/)
O que é "vulnerabilidade de atribuição em massa"?
Tags: devrel, beginners, security, rails
Published: 2023-02-27 14:28:48

A vulnerabilidade de atribuição em massa em Ruby ocorre quando um invasor consegue passar parâmetros maliciosos para um objeto Ruby por meio de um formulário web ou outra entrada de dados do usuário, que então são usados para atualizar atributos do objeto sem o devido controle de segurança.

Por exemplo, se um objeto Ruby tiver atributos sensíveis como "senha" ou "papel de usuário" que possam ser atualizados por meio de uma solicitação do usuário, um invasor pode passar parâmetros adicionais não esperados na solicitação, atribuindo valores maliciosos a esses atributos.

Para evitar essa vulnerabilidade, é importante implementar medidas de segurança no código Ruby. Uma maneira de fazer isso é usar o recurso "Strong Parameters" do Rails, que permite especificar quais parâmetros são permitidos em uma solicitação. Com Strong Parameters, os atributos do objeto que podem ser atualizados são explicitamente permitidos, enquanto os demais são bloqueados.

Além disso, os desenvolvedores devem garantir que os dados recebidos dos usuários sejam validados adequadamente antes de serem usados para atualizar objetos Ruby. Isso pode incluir a validação de tipos de dados, comprimentos de cadeias e outras restrições de segurança.

Também é importante garantir que o código Ruby esteja sempre atualizado com as últimas correções de segurança, e que as práticas recomendadas de segurança sejam seguidas durante todo o processo de desenvolvimento.

No código abaixo temos um exemplo dessa vulnerabilidade, se um invasor passar um parâmetro malicioso, como "admin: true", o código permitirá a atualização do atributo admin do usuário sem restrições de segurança. Isso pode permitir que um invasor ganhe acesso administrativo a um aplicativo, por exemplo.

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

Consegue me ajudar a evitar que isso aconteça? Poste um exemplo de código que evitaria esse meu primeiro desastre como desenvolvedor.

Use o site Carbon.now.sh para gerar uma imagem bonita do seu código e poste aqui nos comentários! 

#refactor #rubyonrails #quicktip #DevRel
Gerador de Controllers Dinâmico no CrazyStack Node.js
Tags: javascript, typescript, node, productivity
Published: 2023-02-27 14:22:01

Bem-vindos à aula de Gerador de Controllers Dinâmico. Neste curso, vocês irão aprender sobre a utilização da biblioteca plop.js para geração automatizada de controllers em sua aplicação. Estes controllers serão baseados nos controllers de categoria que já foram desenvolvidos, que incluem funções como inserção, exclusão, atualização, carregamento e carregamento por página. Com a utilização deste gerador dinâmico, vocês poderão acelerar significativamente o desenvolvimento de seus projetos, evitando a repetição de tarefas manuais e garantindo a consistência em toda a aplicação. Então, vamos começar!

Este é um material auxiliar do bootcamp CrazyStack Node.js do DevDoido. Ele servirá como uma espécie de documentação de alguns códigos vistos durante as aulas apenas como material complementar, garanta já sua vaga no bootcamp [clicando AQUI!](https://crazystack.com.br).

```typescript
  plop.setGenerator("controllers", {
    description: "Create a new controller",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "What is the name of the controller?",
      },
    ],
    actions: [...controllersCreations],
  });
``` 
Este é um exemplo de código para gerar um novo controller usando a biblioteca Plop.js. O generator "controllers" é definido com uma descrição "Create a new controller", que significa criar um novo controlador. A seguir, são definidos os prompts, que são perguntas que serão feitas ao usuário para obter informações sobre o controlador que será criado. Neste caso, a única pergunta é "What is the name of the controller?" (Qual é o nome do controlador?). Por fim, as actions (ações) são listadas, que são as etapas que serão executadas para criar o novo controlador.

https://github.com/gumiranda/CrazyStackNodeJs/commit/d326f1b5e47145bbfb796e6774d64fc56ae898f9


[LINK DO REPOSITÓRIO](https://github.com/gumiranda/CrazyStackNodeJs)
A Comprehensive Guide to Google Computing Engine Cloud and Its Benefits for Businesses
Published: 2023-02-27 14:21:53

Google Cloud [Computing Engine](https://amazing-cart.com/) is a powerful platform for businesses to store and manage data, build applications, and run large-scale computing workloads. It provides a secure and reliable environment for businesses to store their data, run applications, and take advantage of the power of Google’s cloud infrastructure. This guide will provide an overview of Google Cloud Computing Engine, its benefits for businesses, and how they can use it to their advantage. We will also discuss the various use cases of Google Cloud Computing Engine such as data storage, application development, machine learning and analytics. Finally, we will look at the cost savings that can be achieved by using this platform.
Big O Notation
Tags: javascript, tutorial, webdeveloper, dsa
Published: 2023-02-27 14:12:38

Hello everyone! I would like to share my blog post with you about big O notation. If you're interested in learning more, please check out my blog at https://samcodes19.hashnode.dev/big-o-notation. If you enjoy the post, please consider following my blog for future updates, and feel free to browse my other posts at https://samcodes19.hashnode.dev. If you have any questions or comments, please leave them on the post, and don't forget to subscribe to my newsletter to stay up-to-date with my latest content. Thank you for your time and support!
[Desafio] - Um Novo Frontend Para o CuriousCat
Published: 2023-02-27 14:09:49

> Conteúdo original em https://twitter.com/zanfranceschi/status/1630207364405264385

---

Ei dev frontend,

Pega esse desafio aqui: fazer uma página bonita, elegante e sincera, e sem ads pra ler as perguntas e respostas de alguém no CuriousCat – com muito estilo, javascript e criatividade! Pode usar a força do ódiø também, se quiser. 🐱

↓

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

---

Mas deixa eu contar uma coisa antes de continuar. Só é possível completar esse desafio porque a API do CuriousCat aceita requisições CORS. Por isso requisições preflight não vão falhar.

Soou estranho esse papo de CORS/preflight? Dá uma olhada nesse link.

https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

---

Se você já sabe o que é CORS/preflight, vou te mostrar uma coisa que talvez te ajude com troubleshooting no futuro.

Use o comando abaixo pra inspecionar os cabeçalhos/status code da resposta pra saber se CORS tá habilitado na API que estiver consumindo pelo browser.

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

https://twitter.com/zanfranceschi/status/1511513564569387015

---

A resposta precisa estar na faixa HTTP 2XX e conter os cabeçalhos "Access-Control-Allow-Origin: <seu domínio ou *>" e "Access-Control-Allow-Methods: <método que vai usar depois do preflight>". Se não contiver, vai dar ruim.

---

Ao desafio!

Você vai consumir uma API que retorna 30 posts dado um parâmetro "username". No exemplo abaixo uso meu username.

Faça essa requisição (pode ser no browser mesmo) e inspecione a resposta – a parte que interessa é o atributo "posts".


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

---

A API vai te retornar, no máximo 30 posts. Pra você obter os próximos 30 posts, você adiciona um novo parâmetro à requisição que é "max_timestamp" com o menor valor de "timestamp" dos posts da resposta anterior. Tranquilo?

O 2º print abaixo pode ajudar a entender melhor isso.

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

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

---

Bom, o que vai acontecer nessa técnica de "paginação" é que haverá posts duplicados – o post mais antigo da primeira requisição irá aparecer na próxima. Aí é com você como tratar isso.

---

É esse o desafio! Faça do jeito que você quiser! Se quiser expandir pra backend, daria pra fazer uma espécie de BFF ou até mesmo coletar as respostas e fazer outra coisa sem interface. Até com mobile daria pra brincar com essa API.

---

O que me inspirou a lançar esse desafio foi ter brincado com essa API do CuriousCat usando Clojure.

https://twitter.com/zanfranceschi/status/1629709326066540544

---

É isso! E, como sempre, muito obrigado pela moral!

O apoio que você me dá é o que me faz continuar compartilhando um pouco do que sei aqui. ❤️
ChatGPT API Connector: Learn How To Enhance Your Business With Generative AI (APJ Edition)
Tags: chatgpt, api, ipaas, webmethods
Published: 2023-02-27 14:04:25

Our [first event](https://groups.softwareag.com/events/details/software-ag-international-webmethods-user-group-presents-generative-ai-chatgpt-api-connector-augmenting-human-capabilities-ipaas-puzzle/) saw great interest with 100+ attendees, so we are doing it again for everyone who could not make it. Since then, we have seen great interest from the APJ region, so this time we are scheduling the “ [APJ Generative AI (ChatGPT) Augmenting Human Capabilities iPaaS Puzzle](https://groups.softwareag.com/events/details/software-ag-international-webmethods-user-group-presents-apj-generative-ai-chatgpt-api-connector-augmenting-human-capabilities-ipaas-puzzle/)” webinar so that everyone who may have been asleep during the first one can join — Tuesday, March 7th, 4:30 am AEST; 11:00 am IST; 6:30 am CET. The event is open to everyone (you just need to register for a free account at https://groups.softwareag.com). Don’t forget to add the event to your calendar once you register. 

Dave Pemberton will once again showcase the capabilities of our [ChatGPT API Connector](https://tech.forums.softwareag.com/t/webmethods-io-chatgpt-api-connector-available-now/268371) with a live demo of an integration into a Salesforce system. [The iPaaS Puzzle](https://tech.forums.softwareag.com/t/generative-ai-chatgpt-augmenting-human-capabilities-ipaas-puzzle/268991) is already live. You can learn more about it and the API Connector and submit your suggestions on integrating Generative AI in our workflows to increase our productivity. There isn’t a single “best” solution as any functional solution has the potential to provide benefits and make our lives a little easier. Everyone who shares a workflow will receive a Community gift, so check them out! 

Prepare your own examples of how you have been using not only ChatGPT, but Generative AI in general, so we can all get some valuable insight into its power, used by different people. 

See you there! 

All the best, Dave, Mark, and the Community Team!
Paracetamol.ts💊| #20: Explica este código TypeScript
Tags: typescript, javascript, spanish, webdev
Published: 2023-02-27 14:00:00

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark> </center>

```ts
enum FinDeSemana {
  "Sabado" = "SABADO",
  "Domingo" = "domingo".toUpperCase()
}

enum SiNo {
  "Si" = 1,
  "No" = Math.random()
}

console.log(FinDeSemana.Domingo)
console.log(SiNo.No)
```

- A. `DOMINGO`, `Un valor random calculado`
- B. `Computed values are not permitted in an enum with string valued members.`, `Un valor random calculado`
- C. `undefined`, `TypeError`
- D. `undefined`, `undefined`

{% details **Respuesta** %} 

✅ B. `Computed values are not permitted in an enum with string valued members.`, `Un valor random calculado`

Los `enum` que se inicializan con cadenas de texto no admiten valores computados o calculados, pero los `enum` que se inicializan con valores numericos si, por ello usar `Math.random` es perfectamente valido y no así `toUpperCase`.

{% enddetails %}

---

Puedes ver el reto anterior acá:

{% post https://dev.to/duxtech/paracetamolts-19-explica-este-codigo-typescript-4bi7?preview=2dc36f2b6bc14e9fc837f00fce0a14dcd7ce5cda5fa5ffd6bc3f1c59a53943770548425ae538c52398b18860242d93fc55b10c07b032a77fe0b1465b %}