📝 copy updates

Author: Mortaro

Diff for: i18n/en-US/articles/what-is-nullstack.md

@@ -1,70 +1,115 @@
 ---
-title: What is Nullstack?
+title: Frequently Asked Questions
 description: Nullstack is an isomorphic JavaScript framework that allows developers to build Full Stack applications while staying focused on the product features, and solving the user problems, rather than spending a significant amount of their time worrying about layers of abstraction and choosing which tools make them look fancy
 ---
 
-Nullstack is a full stack web framework that allows features to be created in a single component, we call it "feature-driven" components. Nullstack's main feature is having functions that run in the server and client within the same file, it uses a compilation step to create multiple bundles.
-Besides that, the framework comes with tons of small conveniences out of the box, but the cool thing is that all of them are usable in the exact same way, they are passed as arguments to every function of your components, and you don't have to learn a bunch of new concepts to be productive. As a rule of thumb, all you need to know ahead of time is that every static async function will run in the server, and every function receives an object with the framework context merged with the application context and the component context.
+## What is Nullstack?
+Nullstack is a full stack web framework that allows features to be created in a single component, We call it "feature-driven" components. Nullstack's main feature is having functions that run in the server and client within the same file, it uses a compilation step to create multiple bundles.
 
-# What is feature-driven?
+Besides that, the framework comes with many small conveniences out of the box, but the cool thing is that all of them are usable in the exact same way, they are passed as arguments to every function of your components, and you don't have to learn a bunch of new concepts to be productive. As a rule of thumb, all you need to know ahead of time is that every static async function will run in the server, and every function receives an object with the framework context merged with the application context and the component context.
+
+## What is feature-driven?
 It means that every component is a full feature in itself, but it is up to you to decide how to break features down. As an example, you could have a "BlogPost" component or you could have a Blog a Post a Comment, and a Like component and they are nested into each other, heck you could even have an entire e-commerce application be a top-level component imported in another application, that's the beauty of full stack components. 
 
 In the case of the Like button for instance, you would have the server functions to load the number of likes that item has, a render function to show your likes, and an event that triggers a server function to save your like, all in a single file if you want, the main reasoning for this architecture is that the project manager's tickets, the UX and the code look pretty much the same.
 
-*But my bootcamp teacher said I need at least 3 layers of abstraction to be a good developer, can I do that in Nullstack?*
+```jsx
+import Nullstack from 'nullstack'
+
+class LikeButton extends Nullstack {
+
+  // instance variables are mutable and reactive
+  likes = 0
+
+  // database is a user defined context key
+  static async getNumberOfLikes({ database, post }) {
+    const [likes] = await database.query('SELECT COUNT(*) FROM likes WHERE post = ?', [post])
+    return likes
+  }
+
+  // the framework injects some useful context keys by default
+  async initiate({ params }) {
+    // you can use the returned value of server functions seamlessly
+    this.likes = await this.getNumberOfLikes({ post: params.post })
+  }
+
+  // static async functions run in the server
+  static async createLike({ request, database, post }) {
+    const user = request.user.id
+    await database.query('INSERT INTO likes (user, post) VALUES (?, ?)', [user, post])
+  }
+
+  async like({ params }) {
+    // you can mutate variables and the dom reflect the changes
+    this.likes++
+    // this is calling an api endpoint under the hood
+    await this.createLike({ post: params.post })
+  }
+
+  // JSX follows the HTML standards
+  render() {
+    return <button onclick={this.like}>{this.likes}</button>
+  }
+
+}
+```
+
+The code above is the actual complete implementation of a LikeButton, front and back end that you can reuse in any project, with 32 lines of code removing comments.
+
+*- But my bootcamp teacher said I need at least 3 layers of abstraction to be a good developer, can I do that in Nullstack?*
 
 Yes you can, Nullstack is a big foot-gun you can shoot your own foot in your favorite style, just ask for the permission of an adult first.
 
-# Is it a react framework?
+## Is it a react framework?
 Nope, but it uses JSX. Nullstack does not use hooks, instead, it aims to keep JavaScript's natural flow, but makes it reactive. Fun fact tho, Nullstack actually started as a react framework that just aimed to add server functions to the components, but eventually, I found that sticking to that model was limiting our creativity.
 
-*But react has the support from all those big companies, why should we use Nullstack?*
-
-Well, you shouldn't use it just because its a new tool, use it if you want, I love using it at AE Studio tho, though we are building brain-to-computer interface software here, and we have a few opinions about just letting meta dominate everything.
+## Why did you build another framework?
+That wasn't the original intention, We were actually trying to build a coffee shop, but We get distracted very easily... you can learn more about the history behind Nullstack in [Anny's TDC talk](https://www.youtube.com/watch?v=77qeq6cSHG8). 
 
-# Why did you build another framework?
-That wasn't the original intention, we were actually trying to build a coffee shop, but we get distracted very easily... you can learn more about the history behind Nullstack in Anny's TDC talk. 
+Initially, We just wanted to put the server code alongside the client code, because the projects We were working on had very similar patterns, and one of those patterns was that the clients would completely change their minds all the time, and your regular clean code kinda thing was not keeping up with the changes.
 
-Initially, we just wanted to put the server code alongside the client code, because the projects we were working on had very similar patterns, and one of those patterns was that the clients would completely change their minds all the time, and your regular clean code kinda thing was not keeping up with the changes.
+I often noticed myself trying to fit into the format of the framework and changing features, or even avoiding creating new API endpoints because i didn't wanna make things to coupled or complicated. In Nullstack i just need to create a new function in the same class that just returns whatever data i need just for that case, which makes me a lot more productive and makes me think of what i'm building a lot more often than how i am building it.
 
-# Does it use a virtual dom or a compiler or signals?
-The answer is yes. Nullstack has what I like to call a "Virtual Pipeline" it optimizes things differently in different scenarios for different environments. However that is just an implementation detail, the main thing is that it **just works** and we may change anything internal at any time. The only condition we have is that anything that works in vanilla JS should work in Nullstack, so we won't adopt any cool new trends if it limits the developer experience, or if the developer now needs to be aware of new edge cases instead of getting stuff done. 
+## Does it use a virtual dom or a compiler or signals?
+The answer is yes. Nullstack has what I like to call a "Virtual Pipeline" it optimizes things differently in different scenarios for different environments. However that is just an implementation detail, the main thing is that it **just works** and We may change anything internal at any time. The only condition We have is that anything that works in vanilla JS should work in Nullstack, so We won't adopt any cool new trends if it limits the developer experience, or if the developer now needs to be aware of new edge cases instead of getting stuff done. 
 
-# Does it uses Classes or Functions?
+## Does it uses Classes or Functions?
 It uses whatever JavaScript code you can come up with. By default it follows the same paradigm as vanilla: functions are pure, and classes hold state. I know I will lose a lot of devs after the previous sentence, but keep in mind when people say "classes are bad" they actually mean "classes are bad on the current framework I'm using" . In Nullstack it just feels very natural, give it a try.
 
-# Is it blazingly fast?
+## Is it blazingly fast?
 Yes. But it is optimized for what I consider the "right type of fast", it's fast for the users. It uses a mix of architectures to optimize for different scenarios, but all of them aim to have the users have very responsive experiences, even when they are offline. 
 
-You can always benchmark things and be excited about microseconds happy, but that all ends when your user 3g is not feeling like reaching your server that day. 
+You can always benchmark things and be excited about microseconds, but that all ends when your user 3g is not feeling like reaching your server that day. 
+
+That being said, We love spending time micro benchmarking things and it's actually pretty fast, if you sneak into our commit history you will notice We went for "what We need to create products" first then We went "optimization happy", as you should if you plan to code professionally and not just watching clickbait.
 
-That being said, we love spending time micro benchmarking things and its actually pretty fast, if you sneak into our commit history you will notice we went for "what we need to create products" first then we went "optimization happy", as you should if you plan to code professionally and not just watch youtube videos.
+![Nullstack's documentation lighthouse score](/lighthouse.webp)
 
-# What can i build with it? Does it scale?
-You can build anything you can build with regular JavaScript. We've built so far plenty of PWAs, blockchain applications across multiple blockchains (dApps), mobile games, capacitor applications, electron applications, chrome extensions, and even things to visualize brain data that require a lot of performance. Currently, we have a SaaS with hundreds of thousands of hits a day, and it is holding just fine on a "regular JavaScript-priced" server.
+## What can i build with it? Does it scale?
+You can build anything you can build with regular JavaScript. We've built so far plenty of PWAs, blockchain applications across multiple blockchains (dApps), mobile games, capacitor applications, electron applications, chrome extensions, and even things to visualize [brain to computer interface](https://ae.studio/brain-computer-interface) data that require a lot of performance. Currently, We have a SaaS with hundreds of thousands of hits a day, and it is holding just fine on a "regular JavaScript-priced" server.
 
-# How can i use a new framework? it wont have an ecosystem.
-Remember when I mentioned we keep everything vanilla just working? that makes most JavaScript packages for browser and server compatible with Nullstack out of the box, that's a pretty huge ecosystem in my opinion. But also if you are feeling like a mad scientist, you could always just install your favorite framework on top of a Nullstack's application by rendering to an element controlled by it.
+## How can i use a new framework? it won't have an ecosystem.
+Remember when I mentioned We keep everything vanilla just working? that makes most JavaScript packages for browser and server compatible with Nullstack out of the box, that's a pretty huge ecosystem in my opinion. But also if you are feeling like a mad scientist, you could always just install your favorite framework on top of a Nullstack's application by rendering to an element controlled by it.
 
-# Does it have any kind of telemetry?
-No, we do not collect any data. Nullstack was not built as a framework first, it was extracted from real applications we worked on over the years, so the features it has are based on what we needed as opposite of what the data would point would cause better thumbnails. 
+## Does it have any kind of telemetry?
+No, We do not collect any data. Nullstack was not built as a framework first, it was extracted from real applications We worked on over the years, so the features it has are based on what We needed as opposite of what the data would point would cause better thumbnails. 
 
-*But how will you guys know what features we want then?*
+*- But how will you guys know what features We want then?*
 
-You can always tell us on discord or create an issue on GitHub, we will be happy to talk about it!
+You can always tell us on discord or [create an issue on GitHub](https://github.com/nullstack/nullstack/issues), We will be happy to talk about it!
 
-# Does Nullstack have any social media?
-Of the 6 main contributors of Nullstack 6 of them are autistic, including the person writing this wall of text... so you mostly lost us at the "social" part. We did try tho, and we created a YouYube Channel, a Twitter, and an Instagram, but 4 of us also have ADHD so we ended up procrastinating and not posting on it, oopsie. We are pretty active on discord though, that's the place we are forced to log in anyway to coordinate our raids.
+## Does Nullstack have any social media?
+Of the 6 main contributors of Nullstack 6 of them are autistic, including the person writing this wall of text... so you mostly lost us at the "social" part. We did try tho, and We created a [YouTube Channel](https://www.youtube.com/nullstack), a [Twitter](https://twitter.com/nullstackapp), and an [Instagram](https://www.instagram.com/nullstackapp/), but 4 of us also have ADHD so We ended up procrastinating and not posting on it, oopsie. We are pretty active on [Discord](https://discord.gg/eDZfKz264v) though, that's the place We are forced to log in anyway to coordinate our raids.
 
-# What is Nulla-Chan?
+## What is Nulla-Chan?
 Nulla-Chan is the avatar of Nullstack, it belongs to a category of avatars called a "Waifu". If you don't know what a waifu is, that probably means that you have your life on the right track. Fun fact, the waifu character was created by the author's IRL waifu.
 
-# What was the hardest part creating a framework?
-Definitively it was deciding if we should spell it "full stack", "fullstack", or "full-stack". Seriously please tell us on discord which one to pick.
+## What was the hardest part creating a framework?
+Definitively it was deciding if We should spell it "full stack", "fullstack", or "full-stack". Seriously please tell us on discord which one to pick.
 
-# How can i get started?
+## How can i get started?
 Just go to your favorite terminal and type "npx create-nullstack-app app-name", and if you are feeling fancy you can also pass the flags --typescript and --tailwind.
 
-## Next step
+### Next step
 
 ⚔ Learn [how to create a nullstack project](/getting-started).

Diff for: i18n/pt-BR/components/Home.yml

@@ -4,15 +4,15 @@ hero:
   heading: "Componentes JavaScript Full Stack"
   subHeading: "Orientados a Recursos"
   descriptions:
-    - "Escreva o backend e frontend de um recurso em um único
-      componente e deixe o framework decidir onde o código deve ser executado."
-    - "O Nullstack oferece todas as ferramentas que você precisa para manter o foco no produto."
+    - "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."
   callToAction: "npx create-nullstack-app"
   actionLink: '/pt-br/comecando'
   actionCallback: 'Comando copiado, cole no terminal'
 trinity:
-  heading: "A Santa Trindade"
-  subHeading: "do desenvolvimento de aplicativos web progressivos"
+  heading: "Excelente para o Dev. Excelente para o usuário"
+  subHeading: "De SSR rápido a PWA offline sem nenhuma configuração"
   roles:
     - title: "Primeira visita otimizada"
       image: "/illustrations/nulla-tanker.webp"