Skip to content

Commit

Permalink
Merge pull request #257 from nullstack/update-examples
Browse files Browse the repository at this point in the history
Update examples
  • Loading branch information
Mortaro committed May 4, 2023
2 parents 0340da4 + 423e581 commit 67aeaa1
Show file tree
Hide file tree
Showing 21 changed files with 179 additions and 195 deletions.
26 changes: 0 additions & 26 deletions i18n/en-US/articles/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ Create full stack JavaScript applications within seconds using `npx` to generate

> 🔥 The minimum required [node.js](https://nodejs.org) version for development mode is *12.20.0*.
> ⚠ 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).
Replace `project-name` with your project name and run the command below to start a project:

```sh
Expand Down Expand Up @@ -105,30 +103,6 @@ This is the compiled result of your application in production mode.
>✨ Learn more about [how to deploy a Nullstack application](/how-to-deploy-a-nullstack-application).
## The known npx bug

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.

If this happens to you, our recommendations are:

- Using downloaded as you normally would with `npm`:
```sh
npm i -g create-nullstack-app
create-nullstack-app project-name
```

- 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):

- If you want to keep the use of space, replace `FirstName` with the one used on your path and run:
```sh
npm config set cache "C:\Users\FirstName~1\AppData\Roaming\npm-cache" --global
```

- or, using another path without spaces:
```sh
npm config set cache C:\tmp\nodejs\npm-cache --global
```

## Next step

⚔ Create your first [Stateless Component](/stateless-components).
6 changes: 0 additions & 6 deletions i18n/en-US/components/Contributors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,31 @@ core:
github: "Mortaro"
description: "Creator of the concept. Comes with new API proposals to its favorite rubber ducks and returns with commits."
contribution: "Reverse engineered wishful thinking code into existence and then refactored it into a framework."
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."
- name: "Anny Figueira"
role: "Autistic Adopter"
github: "AnnyFigueira"
description: "Rubber duck with a neck to find inconsistencies and problems, waiting till an API is approved to force us into rewriting everything."
contribution: "An early adopter of the framework that developed real production applications to validate how the parts fit together."
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"
- name: "Dayson Marx"
role: "Distracted Designer"
github: "daysonmarx"
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."
contribution: "API reviewer that developed third party projects to test proof of concepts from a front-end focused perspective."
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"
- name: "Bianca Augusta"
role: "Autistic Artist"
github: "Bilkaya"
description: "Aspiring comic writer, Warcraft/FFXIV addict, loves healer and tank roles."
contribution: "Mother of Nulla-Chan and reads scripts here and there under pure pressure from Mortaro."
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"
- name: "Guilherme Correia"
role: "import Member from <a href='https://github.com/vuejs-br' target='_blank' rel='noopener'>vuejs-br</a>"
github: "GuiDevloper"
description: "Experimentalist, writer of fictional universes and dreamer that develop while listening to untitled cassette tapes."
contribution: "User of undocumented features and creator of issues requiring documentation that he will do himself."
work: "Fulltime open-source contributor with over 5 years of web development experience"
- name: "Bruno Michels"
role: "The Dev For Fun"
github: "brunolm"
description: "Weeb at the top of ranks on Stack Overflow, CoderWars, CodersRank. Plays games and develops things for fun."
contribution: "Something with types. Brainwashing the creator to add TypeScript to Nullstack."
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."

contentCreators:
title: "The Content Creators"
Expand Down
12 changes: 6 additions & 6 deletions i18n/en-US/components/Home.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ hero:
heading: "Feature-Driven"
subHeading: "Full Stack JavaScript Components"
descriptions:
- Your new favorite web framework.
- "Write the backend and frontend of a feature in a single isomorphic
component and let the framework decide where the code should run."
- Nullstack is a web framework that makes coding fun again.
- "Write the backend and frontend of a feature in a single isomorphic component with zero boilerplate or glue code."
getStarted: "Get Started"
callToAction: "npx create-nullstack-app"
actionLink: '/getting-started'
actionCallback: 'Command copied, paste it on the terminal'
actionCallback: 'Command copied, paste it in the terminal'
trinity:
heading: "Great for the Dev. Great for the User"
subHeading: "from fast SSR to offline PWA out of the box"
Expand All @@ -33,8 +33,8 @@ trinity:
generated microservice API, deserialize the response, update the
aplication state, and rerender the page out of the box"
features:
- title: "No more glue code"
snippet: "GlueCode"
- title: "Never write another API"
snippet: "NeverWriteAnotherAPI"
image: "/illustrations/nulla-glue.webp"
text:
"You write features for products. The compiler extracts your front end code and replaces all static async functions with calls to microservices"
Expand Down
19 changes: 9 additions & 10 deletions i18n/en-US/snippets/GlueCode.njs
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
class Feature extends Nullstack {
class WaifuCounter extends Nullstack {

// runs in the server
static async delete({ database }) {
database.query("DELETE * FROM WAIFUS");
static async getWaifus({ database }) {
const sql = "SELECT COUNT(*) FROM WAIFUS";
return database.query(sql);
}

// runs in the client
async confirm() {
if (confirm("You sure? uwu")) {
await this.delete();
}
async countWaifus() {
this.waifus = this.getWaifus()
}

// runs wherever is best
render() {
return (
<button onclick={this.confirm}>
Delete
<button onclick={this.countWaifus}>
Count: {this.waifus}
</button>
);
}

}
23 changes: 23 additions & 0 deletions i18n/en-US/snippets/NeverWriteAnotherAPI.njs
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
class WaifuCreator extends Nullstack {

// extracted into a microservice
static async insertWaifu({ database, name }) {
const sql = "INSERT INTO waifus (name) VALUES (?)";
return database.query(sql, name);
}

// invokes the microservice
async create() {
this.insertWaifu({ name: "Nulla-Chan" })
}

// render in the DOM
render() {
return (
<button onclick={this.create}>
Create Waifu
</button>
);
}

}
26 changes: 0 additions & 26 deletions i18n/pt-BR/articles/comecando.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ Crie aplicações JavaScript full stack em segundos usando `npx` para gerar os a

> 🔥 A versão mínima necessária do [node.js](https://nodejs.org/pt-br/) para o modo de desenvovimento é *12.20.0*.
> ⚠ 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).
Troque `project-name` com o nome do seu projeto e rode o comanto abaixo para começar um projeto:

```sh
Expand Down Expand Up @@ -99,30 +97,6 @@ Este é o resultado compilado da sua aplicação em modo de produção.
>✨ Saiba mais sobre [como fazer deploy de aplicação Nullstack](/pt-br/como-fazer-deploy-de-aplicacao-nullstack).
## Bug conhecido do npx

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.

Se isso ocorrer com você, nossas recomendações são:

- Usando baixado como normalmente faria com `npm`:
```sh
npm i -g create-nullstack-app
create-nullstack-app project-name
```

- 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):

- Se deseja manter o uso do espaço, subtitua `PrimeiroNome` pelo usado no seu caminho e rode:
```sh
npm config set cache "C:\Users\PrimeiroNome~1\AppData\Roaming\npm-cache" --global
```

- ou, usando outro caminho sem espaços:
```sh
npm config set cache C:\tmp\nodejs\npm-cache --global
```

## Próximo Passo

⚔ Crie seu primeiro [componente renderizável](/pt-br/componentes-renderizaveis).
6 changes: 0 additions & 6 deletions i18n/pt-BR/components/Contributors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,31 @@ core:
github: "Mortaro"
description: "Criador do conceito. Vai com novas propostas de API para seus patos de borracha favoritos e retorna com commits."
contribution: "Fez a engenharia reversa de código de pensamento positivo para sua existência e depois o refatorou em um framework."
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."
- name: "Anny Figueira"
role: "Adotante Autista"
github: "AnnyFigueira"
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."
contribution: "Adotante antecipada do framework que desenvolveu aplicações reais em produção para validar como as partes se encaixam."
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"
- name: "Dayson Marx"
role: "Designer Distraído"
github: "daysonmarx"
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."
contribution: "Revisor de API que desenvolveu projetos de terceiros para testar a prova de conceitos de uma perspectiva focada no front-end."
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"
- name: "Bianca Augusta"
role: "Artista Autista"
github: "Bilkaya"
description: "Aspirante à escritora de quadrinhos, viciada em WoW e Final Fantasy XIV, ama ser tanque e curandeira."
contribution: "Mãe da Nulla-Chan e volta e meia lê scripts por pura pressão do Mortaro."
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"
- name: "Guilherme Correia"
role: "import Membro from <a href='https://github.com/vuejs-br' target='_blank' rel='noopener'>vuejs-br</a>"
github: "GuiDevloper"
description: "Experimentalista, escritor de universos fictícios e sonhador que desenvolve enquanto toca fitas K7 sem título."
contribution: "Usuário de features não documentadas e criador de issues exigindo documentação que ele mesmo vai fazer."
work: "Contribuidor open-source em tempo integral com mais de 5 anos de experiência em desenvolviento web"
- name: "Bruno Michels"
role: "O Dev Por Diversão"
github: "brunolm"
description: "Weeb que está no topo dos ranks do Stack Overflow, CoderWars, CodersRank. Joga jogos e desenvolve coisas por diversão."
contribution: "Algo com tipos. Lavagem cerebral no criador para adicionar TypeScript no Nullstack."
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."

contentCreators:
title: "Os Criadores de Conteúdo"
Expand Down
12 changes: 6 additions & 6 deletions i18n/pt-BR/components/Home.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ hero:
heading: "Componentes JavaScript Full Stack"
subHeading: "Orientados a Recursos"
descriptions:
- "Seu novo framework web favorito."
- "Escreva o backend e o frontend de um recurso em um único componente isomórfico
e deixe o framework descobrir onde o código deve ser executado."
- "Nullstack é um web framework que torna programar divertido novamente."
- "Escreva o backend e o frontend de um recurso em um único componente isomórfico sem boilerplate ou glue code."
getStarted: "Comece a usar"
callToAction: "npx create-nullstack-app"
actionLink: '/pt-br/comecando'
actionCallback: 'Comando copiado, cole no terminal'
Expand All @@ -27,11 +27,11 @@ trinity:
text:
"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"
features:
- title: "Não perca mais tempo colando um código no outro"
snippet: "GlueCode"
- title: "Nunca escreva outra API"
snippet: "NeverWriteAnotherAPI"
image: "/illustrations/nulla-glue.webp"
text:
"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."
"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"
- title: "Torne-se um programador menos dependente de maneirismos"
snippet: "Vanilla"
image: "/illustrations/nulla-scrolls.webp"
Expand Down
27 changes: 13 additions & 14 deletions i18n/pt-BR/snippets/GlueCode.njs
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
class Feature extends Nullstack {
class WaifuCounter extends Nullstack {

// executa no servidor
static async delete({ database }) {
database.query("DELETE * FROM WAIFUS");
// roda no servidor
static async getWaifus({ database }) {
const sql = "SELECT COUNT(*) FROM WAIFUS";
return database.query(sql);
}

// executa no client
async confirm() {
if (confirm("Tem certeza? uwu")) {
await this.delete();
}
// roda no cliente
async countWaifus() {
this.waifus = this.getWaifus()
}

// executa onde for melhor
// roda onde for melhor
render() {
return (
<button onclick={this.confirm}>
Delete
<button onclick={this.countWaifus}>
Count: {this.waifus}
</button>
);
}
}

}
23 changes: 23 additions & 0 deletions i18n/pt-BR/snippets/NeverWriteAnotherAPI.njs
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
class WaifuCreator extends Nullstack {

// extraído em um microsserviço
static async insertWaifu({ database, name }) {
const sql = "INSERT INTO waifus (name) VALUES (?)";
return database.query(sql, name);
}

// invoca o microsserviço
async create() {
this.insertWaifu({ name: "Nulla-Chan" })
}

// renderiza no DOM
render() {
return (
<button onclick={this.create}>
Criar Waifu
</button>
);
}

}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"author": "",
"license": "ISC",
"devDependencies": {
"nullstack": "~0.17.0",
"nullstack": "github:nullstack/nullstack#even-more-unstable-hot",
"tailwindcss": "^3.0.0",
"postcss-loader": "^7.0.1"
},
Expand Down
Loading

0 comments on commit 67aeaa1

Please sign in to comment.