1212
:memo: update examples · nullstack/nullstack.github.io@e9df4ad · GitHub
Skip to content

Commit e9df4ad

Browse files
MortaroMortaro
committed
📝 update examples
1 parent 0340da4 commit e9df4ad

21 files changed

+175
-194
lines changed

‎i18n/en-US/articles/getting-started.md‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ Create full stack JavaScript applications within seconds using `npx` to generate
99

1010
> 🔥 The minimum required [node.js](https://nodejs.org) version for development mode is *12.20.0*.
1111
12-
> ⚠ If the directory you are in contains spaces, you use Windows and `npx` gives errors, read about [the known npx bug](#the-known-npx-bug).
13-
1412
Replace `project-name` with your project name and run the command below to start a project:
1513

1614
```sh
@@ -105,30 +103,6 @@ This is the compiled result of your application in production mode.
105103
106104
>✨ Learn more about [how to deploy a Nullstack application](/how-to-deploy-a-nullstack-application).
107105
108-
## The known npx bug
109-
110-
Warned on `npx` issues like [#100](https://github.com/zkat/npx/issues/100), [#110](https://github.com/zkat/npx/issues/110) and [#143](https://github.com/zkat/npx/issues/146), it has an error when trying to resolve the path to his cache folder when contains spaces.
111-
112-
If this happens to you, our recommendations are:
113-
114-
- Using downloaded as you normally would with `npm`:
115-
```sh
116-
npm i -g create-nullstack-app
117-
create-nullstack-app project-name
118-
```
119-
120-
- or, change the cache folder directory, as stated [here](https://github.com/zkat/npx/issues/146#issuecomment-384016791) and [here](https://github.com/zkat/npx/issues/146#issuecomment-384019497):
121-
122-
- If you want to keep the use of space, replace `FirstName` with the one used on your path and run:
123-
```sh
124-
npm config set cache "C:\Users\FirstName~1\AppData\Roaming\npm-cache" --global
125-
```
126-
127-
- or, using another path without spaces:
128-
```sh
129-
npm config set cache C:\tmp\nodejs\npm-cache --global
130-
```
131-
132106
## Next step
133107

134108
⚔ Create your first [Stateless Component](/stateless-components).

‎i18n/en-US/components/Contributors.yml‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,37 +21,31 @@ core:
2121
github: "Mortaro"
2222
description: "Creator of the concept. Comes with new API proposals to its favorite rubber ducks and returns with commits."
2323
contribution: "Reverse engineered wishful thinking code into existence and then refactored it into a framework."
24-
work: "Head of product focused development at <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> with over 18 years of experience in development across web2, web3, and UX."
2524
- name: "Anny Figueira"
2625
role: "Autistic Adopter"
2726
github: "AnnyFigueira"
2827
description: "Rubber duck with a neck to find inconsistencies and problems, waiting till an API is approved to force us into rewriting everything."
2928
contribution: "An early adopter of the framework that developed real production applications to validate how the parts fit together."
30-
work: "Full stack developer at <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> with over 12 years of experience in web development"
3129
- name: "Dayson Marx"
3230
role: "Distracted Designer"
3331
github: "daysonmarx"
3432
description: "Rubber duck with human skills that makes sure the code is not going too far outside the box, then makes the box look nice."
3533
contribution: "API reviewer that developed third party projects to test proof of concepts from a front-end focused perspective."
36-
work: "UX, UI, and brand designer at <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> with over 10 years of experience including front-end development"
3734
- name: "Bianca Augusta"
3835
role: "Autistic Artist"
3936
github: "Bilkaya"
4037
description: "Aspiring comic writer, Warcraft/FFXIV addict, loves healer and tank roles."
4138
contribution: "Mother of Nulla-Chan and reads scripts here and there under pure pressure from Mortaro."
42-
work: "Concept artist at <a href='https://www.gearboxsoftware.com/' class='text-pink-600' target='_blank' rel='noopener'>Gearbox Software</a> with over 11 years of career as a game artist"
4339
- name: "Guilherme Correia"
4440
role: "import Member from <a href='https://github.com/vuejs-br' target='_blank' rel='noopener'>vuejs-br</a>"
4541
github: "GuiDevloper"
4642
description: "Experimentalist, writer of fictional universes and dreamer that develop while listening to untitled cassette tapes."
4743
contribution: "User of undocumented features and creator of issues requiring documentation that he will do himself."
48-
work: "Fulltime open-source contributor with over 5 years of web development experience"
4944
- name: "Bruno Michels"
5045
role: "The Dev For Fun"
5146
github: "brunolm"
5247
description: "Weeb at the top of ranks on Stack Overflow, CoderWars, CodersRank. Plays games and develops things for fun."
5348
contribution: "Something with types. Brainwashing the creator to add TypeScript to Nullstack."
54-
work: "Wildcard Developer at <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> with over 15 years of experience doing specific things."
5549

5650
contentCreators:
5751
title: "The Content Creators"

‎i18n/en-US/components/Home.yml‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ hero:
44
heading: "Feature-Driven"
55
subHeading: "Full Stack JavaScript Components"
66
descriptions:
7-
- Your new favorite web framework.
8-
- "Write the backend and frontend of a feature in a single isomorphic
9-
component and let the framework decide where the code should run."
7+
- Nullstack is a web framework that makes coding fun again.
8+
- "Write the backend and frontend of a feature in a single isomorphic component with zero boilerplate or glue code."
109
callToAction: "npx create-nullstack-app"
1110
actionLink: '/getting-started'
1211
actionCallback: 'Command copied, paste it on the terminal'
@@ -33,8 +32,8 @@ trinity:
3332
generated microservice API, deserialize the response, update the
3433
aplication state, and rerender the page out of the box"
3534
features:
36-
- title: "No more glue code"
37-
snippet: "GlueCode"
35+
- title: "Never write another API"
36+
snippet: "NeverWriteAnotherAPI"
3837
image: "/illustrations/nulla-glue.webp"
3938
text:
4039
"You write features for products. The compiler extracts your front end code and replaces all static async functions with calls to microservices"

‎i18n/en-US/snippets/GlueCode.njs‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
class Feature extends Nullstack {
1+
class WaifuCounter extends Nullstack {
22

33
// runs in the server
4-
static async delete({ database }) {
5-
database.query("DELETE * FROM WAIFUS");
4+
static async getWaifus({ database }) {
5+
const sql = "SELECT COUNT(*) FROM WAIFUS";
6+
return database.query(sql);
67
}
78

89
// runs in the client
9-
async confirm() {
10-
if (confirm("You sure? uwu")) {
11-
await this.delete();
12-
}
10+
async countWaifus() {
11+
this.waifus = this.getWaifus()
1312
}
1413

1514
// runs wherever is best
1615
render() {
1716
return (
18-
<button onclick={this.confirm}>
19-
Delete
17+
<button onclick={this.countWaifus}>
18+
Count: {this.waifus}
2019
</button>
2120
);
2221
}
23-
22+
2423
}

‎i18n/en-US/snippets/NeverWriteAnotherAPI.njs‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
class WaifuCreator extends Nullstack {
2+
3+
// extracted into a microservice
4+
static async insertWaifu({ database, name }) {
5+
const sql = "INSERT INTO waifus (name) VALUES (?)";
6+
return database.query(sql, name);
7+
}
8+
9+
// invokes the microservice
10+
async create() {
11+
this.insertWaifu({ name: "Nulla-Chan" })
12+
}
13+
14+
// render in the DOM
15+
render() {
16+
return (
17+
<button onclick={this.create}>
18+
Create Waifu
19+
</button>
20+
);
21+
}
22+
23+
}

‎i18n/pt-BR/articles/comecando.md‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ Crie aplicações JavaScript full stack em segundos usando `npx` para gerar os a
99

1010
> 🔥 A versão mínima necessária do [node.js](https://nodejs.org/pt-br/) para o modo de desenvovimento é *12.20.0*.
1111
12-
> ⚠ Se o diretório em que você está contém espaços, você usa Windows e o `npx` der erros, leia sobre o [bug conhecido do npx](#bug-conhecido-do-npx).
13-
1412
Troque `project-name` com o nome do seu projeto e rode o comanto abaixo para começar um projeto:
1513

1614
```sh
@@ -99,30 +97,6 @@ Este é o resultado compilado da sua aplicação em modo de produção.
9997
10098
>✨ Saiba mais sobre [como fazer deploy de aplicação Nullstack](/pt-br/como-fazer-deploy-de-aplicacao-nullstack).
10199
102-
## Bug conhecido do npx
103-
104-
Avisado em issues do `npx` como [#100](https://github.com/zkat/npx/issues/100), [#110](https://github.com/zkat/npx/issues/110) e [#143](https://github.com/zkat/npx/issues/146), ele tem um erro ao tentar resolver o caminho para sua pasta de cache quando este contém espaços.
105-
106-
Se isso ocorrer com você, nossas recomendações são:
107-
108-
- Usando baixado como normalmente faria com `npm`:
109-
```sh
110-
npm i -g create-nullstack-app
111-
create-nullstack-app project-name
112-
```
113-
114-
- ou, mudar o diretório da pasta de cache, como dito [aqui](https://github.com/zkat/npx/issues/146#issuecomment-384016791) e [aqui](https://github.com/zkat/npx/issues/146#issuecomment-384019497):
115-
116-
- Se deseja manter o uso do espaço, subtitua `PrimeiroNome` pelo usado no seu caminho e rode:
117-
```sh
118-
npm config set cache "C:\Users\PrimeiroNome~1\AppData\Roaming\npm-cache" --global
119-
```
120-
121-
- ou, usando outro caminho sem espaços:
122-
```sh
123-
npm config set cache C:\tmp\nodejs\npm-cache --global
124-
```
125-
126100
## Próximo Passo
127101

128102
⚔ Crie seu primeiro [componente renderizável](/pt-br/componentes-renderizaveis).

‎i18n/pt-BR/components/Contributors.yml‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,37 +21,31 @@ core:
2121
github: "Mortaro"
2222
description: "Criador do conceito. Vai com novas propostas de API para seus patos de borracha favoritos e retorna com commits."
2323
contribution: "Fez a engenharia reversa de código de pensamento positivo para sua existência e depois o refatorou em um framework."
24-
work: "Head of product focused development na <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> com mais de 18 anos de experiência em desenvolvimento web2, web3, e UX."
2524
- name: "Anny Figueira"
2625
role: "Adotante Autista"
2726
github: "AnnyFigueira"
2827
description: "Pato de borracha com um pescoço para encontrar inconsistências e problemas, esperando até que uma API seja aprovada para nos forçar a reescrever tudo."
2928
contribution: "Adotante antecipada do framework que desenvolveu aplicações reais em produção para validar como as partes se encaixam."
30-
work: "Full stack developer na <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> com mais de 12 anos de experiência em desenvolvimento web"
3129
- name: "Dayson Marx"
3230
role: "Designer Distraído"
3331
github: "daysonmarx"
3432
description: "Pato de borracha com habilidades humanas, garante que o código não saia muito pra fora da caixa, então faz a caixa parecer legal."
3533
contribution: "Revisor de API que desenvolveu projetos de terceiros para testar a prova de conceitos de uma perspectiva focada no front-end."
36-
work: "UX, UI, e brand designer na <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> com mais de 10 anos anos de experiência incluindo desenvolvimento front-end"
3734
- name: "Bianca Augusta"
3835
role: "Artista Autista"
3936
github: "Bilkaya"
4037
description: "Aspirante à escritora de quadrinhos, viciada em WoW e Final Fantasy XIV, ama ser tanque e curandeira."
4138
contribution: "Mãe da Nulla-Chan e volta e meia lê scripts por pura pressão do Mortaro."
42-
work: "Concept artist na <a href='https://www.gearboxsoftware.com/' class='text-pink-600' target='_blank' rel='noopener'>Gearbox Software</a> com mais de 11 anos de carreira como game artist"
4339
- name: "Guilherme Correia"
4440
role: "import Membro from <a href='https://github.com/vuejs-br' target='_blank' rel='noopener'>vuejs-br</a>"
4541
github: "GuiDevloper"
4642
description: "Experimentalista, escritor de universos fictícios e sonhador que desenvolve enquanto toca fitas K7 sem título."
4743
contribution: "Usuário de features não documentadas e criador de issues exigindo documentação que ele mesmo vai fazer."
48-
work: "Contribuidor open-source em tempo integral com mais de 5 anos de experiência em desenvolviento web"
4944
- name: "Bruno Michels"
5045
role: "O Dev Por Diversão"
5146
github: "brunolm"
5247
description: "Weeb que está no topo dos ranks do Stack Overflow, CoderWars, CodersRank. Joga jogos e desenvolve coisas por diversão."
5348
contribution: "Algo com tipos. Lavagem cerebral no criador para adicionar TypeScript no Nullstack."
54-
work: "Wildcard Developer at <a href='https://ae.studio/join-us' class='text-pink-600' target='_blank' rel='noopener'>AE Studio</a> com mais de 15 anos de experiência fazendo coisas especificas."
5549

5650
contentCreators:
5751
title: "Os Criadores de Conteúdo"

‎i18n/pt-BR/components/Home.yml‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ hero:
44
heading: "Componentes JavaScript Full Stack"
55
subHeading: "Orientados a Recursos"
66
descriptions:
7-
- "Seu novo framework web favorito."
8-
- "Escreva o backend e o frontend de um recurso em um único componente isomórfico
9-
e deixe o framework descobrir onde o código deve ser executado."
7+
- "Nullstack é um web framework que torna programar divertido novamente."
8+
- "Escreva o backend e o frontend de um recurso em um único componente isomórfico sem boilerplate ou glue code."
109
callToAction: "npx create-nullstack-app"
1110
actionLink: '/pt-br/comecando'
1211
actionCallback: 'Comando copiado, cole no terminal'
@@ -27,11 +26,11 @@ trinity:
2726
text:
2827
"As funções de servidor subsequentes buscarão JSON de uma API de microsserviços gerada automaticamente, desserializarão a resposta, atualizarão o estado da aplicação e renderizarão a página sem nenhum código adicional"
2928
features:
30-
- title: "Não perca mais tempo colando um código no outro"
31-
snippet: "GlueCode"
29+
- title: "Nunca escreva outra API"
30+
snippet: "NeverWriteAnotherAPI"
3231
image: "/illustrations/nulla-glue.webp"
3332
text:
34-
"Um ciclo de vida full stack combinado com uma abordagem orientada a recursos permite que você escreva código limpo e reutilizável sem a necessidade de criar APIs manualmente."
33+
"Você escreve recursos para produtos. O compilador extrai seu código de frontend e substitui todas as funções assíncronas estáticas por chamadas para microsserviços"
3534
- title: "Torne-se um programador menos dependente de maneirismos"
3635
snippet: "Vanilla"
3736
image: "/illustrations/nulla-scrolls.webp"

‎i18n/pt-BR/snippets/GlueCode.njs‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
class Feature extends Nullstack {
1+
class WaifuCounter extends Nullstack {
22

3-
// executa no servidor
4-
static async delete({ database }) {
5-
database.query("DELETE * FROM WAIFUS");
3+
// roda no servidor
4+
static async getWaifus({ database }) {
5+
const sql = "SELECT COUNT(*) FROM WAIFUS";
6+
return database.query(sql);
67
}
78

8-
// executa no client
9-
async confirm() {
10-
if (confirm("Tem certeza? uwu")) {
11-
await this.delete();
12-
}
9+
// roda no cliente
10+
async countWaifus() {
11+
this.waifus = this.getWaifus()
1312
}
1413

15-
// executa onde for melhor
14+
// roda onde for melhor
1615
render() {
1716
return (
18-
<button onclick={this.confirm}>
19-
Delete
17+
<button onclick={this.countWaifus}>
18+
Count: {this.waifus}
2019
</button>
2120
);
2221
}
23-
24-
}
22+
23+
}

‎i18n/pt-BR/snippets/NeverWriteAnotherAPI.njs‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
class WaifuCreator extends Nullstack {
2+
3+
// extraído em um microsserviço
4+
static async insertWaifu({ database, name }) {
5+
const sql = "INSERT INTO waifus (name) VALUES (?)";
6+
return database.query(sql, name);
7+
}
8+
9+
// invoca o microsserviço
10+
async create() {
11+
this.insertWaifu({ name: "Nulla-Chan" })
12+
}
13+
14+
// renderiza no DOM
15+
render() {
16+
return (
17+
<button onclick={this.create}>
18+
Criar Waifu
19+
</button>
20+
);
21+
}
22+
23+
}

0 commit comments

Comments
 (0)