docs: Update grammar typo

CONTRIBUTING.md

@@ -2,30 +2,30 @@
 
 ## Welcome
 
-Welcome to CONTRIBUTING zone. If you are reading this, you are probably want to contribute to Open Source projects. That's great! Contributing to an open source project is a great opportunity to learn, sharpen your skills and help others. Luckily, Jest Preview is a free and open source project and we always wecome new contributors. Its mission is to help front end developers' lives easier and more enjoyable, also improve the standard of front end applications by encourgaging them to write more high-quality tests, by providng an ability to view the actual UI in Jest in an external browser like Chrome.
+Welcome to CONTRIBUTING zone. If you are reading this, you probably want to contribute to Open Source projects. That's great! Contributing to an open source project is a great opportunity to learn, sharpen your skills and help others. Luckily, Jest Preview is a free and open source project and we always welcome new contributors. Its mission is to help front end developers' lives easier and more enjoyable, also improve the standard of front end applications by encouraging them to write more high-quality tests, by providing an ability to view the actual UI in Jest in an external browser like Chrome.
 
-Jest Preview aims to be a community-driven project. So we hope to see your contributions to make Jest Preview a favourite library for front end developers when it comes to testing.
+Jest Preview aims to be a community-driven project. So we hope to see your contributions to make Jest Preview a favorite library for front end developers when it comes to testing.
 
 ## What can I contribute?
 
-We appreciated any helps. There are not a thing as a small contribution. If you see a typo, send us a PR. If you experience a bug, please open an issue. If you have a suggestion, let us know. Bellow are some ways you can contribute to Jest Preview:
+We appreciated any help. There is not a thing as a small contribution. If you see a typo, send us a PR. If you experience a bug, please open an issue. If you have a suggestion, let us know. Below are some ways you can contribute to Jest Preview:
 
-- **Submit bugs or issues:**: Software are full of bugs. Jest Preview is no exception. If you use Jest Preview and find a bug, please open an issue at [Jest Preview's issues](https://github.com/nvh95/jest-preview/issues)
+- **Submit bugs or issues:**: Software is full of bugs. Jest Preview is no exception. If you use Jest Preview and find a bug, please open an issue at [Jest Preview's issues](https://github.com/nvh95/jest-preview/issues)
 - **Docs**: We have a documentation site at [www.jest-preview.com](https://www.jest-preview.com/docs/getting-started/intro), it's very easier to contribute to the documentation by using `Edit this page` button at the bottom of each page. If you see a typo, an unclear page or incorrect grammar, please send us a PR.
 - **Fix bugs**: We are tracking bugs at [Issues](https://github.com/nvh95/jest-preview/issues). Please [claim an issue](#claim-issues) then open a PR to fix a bug.
-- **Add new features**: You use Jest Preview for your projects and find out Jest Preview is missing a feature? Please open an issue to discuss about it. And it's great if you can help to implement that feature.
+- **Add new features**: Do you use Jest Preview for your projects and find out Jest Preview is missing a feature? Please open an issue to discuss it. And it's great if you can help to implement that feature.
 - **Answer questions and issues on GitHub and Discord**: [GitHub issues](https://github.com/nvh95/jest-preview/issues) and [Discord](https://discord.gg/X5PyPUfemh)
 
 If not sure what to contribute, but you still want to contribute something, let us know in [Discord](https://discord.gg/X5PyPUfemh) (channel #contributors)
 
 ## Claim issues
 
-There are some labels worth looking at for a new contributors:
+There are some labels worth looking at for a new contributor:
 
 - [good first issue](https://github.com/nvh95/jest-preview/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22): Some issues to help you get your feet wet with Jest Preview
 - [help wanted](https://github.com/nvh95/jest-preview/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22): if you have specific knowledge in one domain, working on these issues can make your expertise shine.
 
-If you want to work on any of these issues, just drop a message such as "I'd like to work on this". Depends on the difficulty of the issue, it can take a few days or a week to implement the feature/ bug fix. It's great if you can send a PR within seven days. If you need more time on a specific issue, please let us know. After that, we can delegate the issue to someone else if you are not available.
+If you want to work on any of these issues, just drop a message such as "I'd like to work on this". Depending on the difficulty of the issue, it can take a few days or a week to implement the feature/ bug fix. It's great if you can send a PR within seven days. If you need more time on a specific issue, please let us know. After that, we can delegate the issue to someone else if you are not available.
 
 ## npm scripts
 
@@ -59,7 +59,7 @@ npm run test
 
 Open chrome at http://localhost:3336 to see the preview
 
-However, it's recommend to run jest tests and Jest Preview server separately:
+However, it's recommended to run jest tests and Jest Preview server separately:
 
 ```bash
 npm run server # Run jest-preview server
@@ -76,11 +76,11 @@ Whenever `preview.debug()` is triggered, or whenever a test fails, you will see
 
 Following are brief descriptions of the repository architecture:
 
-- [src](https://github.com/nvh95/jest-preview/tree/main/src/): contains most of the code of Jest Preview such as `debug` function, `jestPreviewConfigure`, all Jest Transformations, preconfigured presets, adapters, etc.
+- [src](https://github.com/nvh95/jest-preview/tree/main/src/): contains most of the code of Jest Preview such as `debug` function, `jestPreviewConfigure`, all Jest Transformations, pre-configured presets, adapters, etc.
 - [server](https://github.com/nvh95/jest-preview/tree/main/server/): contains Jest Preview server code, which is a web server that serves the preview page (Jest Preview Dashboard).
 - [demo](https://github.com/nvh95/jest-preview/tree/main/demo/): contains the demo app. You will work with this app most of the time when developing Jest Preview.
 - [config/jest](https://github.com/nvh95/jest-preview/tree/main/config/jest/): jest configuration files for the demo app.
-- [dist](https://github.com/nvh95/jest-preview/tree/main/dist/): Distribution code, which is bundle and processed by Rollup (previously: Vite Library Mode).
+- [dist](https://github.com/nvh95/jest-preview/tree/main/dist/): Distribution code, which is bundled and processed by Rollup (previously: Vite Library Mode).
 - [examples](https://github.com/nvh95/jest-preview/tree/main/examples/): contains examples of how to integrate Jest Preview with various libraries and frameworks.
 - [website](https://github.com/nvh95/jest-preview/tree/main/website/): contains code for [www.jest-preview.com](https://www.jest-preview.com/)
 
@@ -96,4 +96,4 @@ There are a few things when you open a PR:
 
 ## Closing
 
-We would love to have you in the list of contributors and thank you for your contribution. Happy coding!
+We would love to have you on the list of contributors and thank you for your contribution. Happy coding!

HOW_JEST_PREVIEW_WORKS.md

@@ -2,7 +2,7 @@
 
 ## How it works ELI5
 
-Jest Preview turns JSDOM to a real DOM and user can see it on a browser. It saved the HTML from JSDOM and serve over a web server (with a web socket connection). It also uses [Jest Tranformations](https://jestjs.io/docs/code-transformation) to handle CSS and files (e.g: images).
+Jest Preview turns JSDOM into a real DOM and users can see it on a browser. It saved the HTML from JSDOM and serve over a web server (with a web socket connection). It also uses [Jest Transformations](https://jestjs.io/docs/code-transformation) to handle CSS and files (e.g: images).
 
 ## Components
 
@@ -12,9 +12,9 @@ Jest Preview turns JSDOM to a real DOM and user can see it on a browser. It save
 
 ## How Jest Preview's components interact
 
-- In **Jest process**, whenever `preview.debug()` is triggerd or a test fails in [Automatic Mode](https://www.jest-preview.com/blog/automatic-mode), a html file is saved to `node_modules/.cache/jest-preview`.
-- **Jest Preview Server** serve that html file to the **External Browser**.
-- If that html file changes, **Jest Preview Server** will send a websocket event to **External Browser** to trigger reloading for newest UI.
+- In **Jest process**, whenever `preview.debug()` is triggered or a test fails in [Automatic Mode](https://www.jest-preview.com/blog/automatic-mode), an html file is saved to `node_modules/.cache/jest-preview`.
+- **Jest Preview Server** serves that html file to the **External Browser**.
+- If that html file changes, **Jest Preview Server** will send a websocket event to **External Browser** to trigger reloading for the newest UI.
 
 ## How to display images and CSS
 
@@ -23,13 +23,14 @@ Usually, images and CSS are dropped when testing in Jest. In opposite, Jest Prev
 ### Images and CSS imported to components
 
 - [Code transformation](https://jestjs.io/docs/code-transformation)
-- File transformation: Serve source file directly
-- CSS transformation: Jest Preview turn a css file to a javascript file then try to inject CSS to the `document.head`. Think of Jest Preview try to make any CSS strategy to a CSS-in-JS in Jest.
+- File transformation: Serve source file directly. For example, an image file is served directly from source code, then it's visible in the Jest Preview Dashboard.
+- CSS transformation: Jest Preview turn a css file into a javascript file then try to inject CSS to the `document.head`. Think of Jest Preview tries to make any CSS strategy to a CSS-in-JS in Jest.
   - CSS Modules: Process via post css then inject the output to the `document.head`.
   - Sass: Process by Dart Sass then inject the output to the `document.head`.
   - Vanilla CSS: Inject css to the head.
 - CSS-in-JS (styled-components, emotion...): Already inject css to the `document.head` by CSS-in-JS themselves.
+  - Caveat: CSS-in-JS solutions uses Constructable Stylesheet Objects are not supported yet, since the generated CSS are not present in the `document.head`.
 
 ### Global CSS
 
-- Currerntly, CSS outside a rendered component is handled via `jestPreviewConfigure`. The general approach is to save CSS to a file then Jest Preview Server injects it to the preview on demand. This approach is simple and easy to implement. However, the CSS does not appear in the JSDOM, and it's hard to write tests for it. In the future, we would like to move global CSS to the JSDOM (i.e: `document.head`).
+- Currently, CSS outside a rendered component is handled via `jestPreviewConfigure`. The general approach is to save CSS to a file then Jest Preview Server injects it to the preview on demand. This approach is simple and easy to implement. However, the CSS does not appear in the JSDOM, and it's hard to write tests for it. In the future, we would like to move global CSS to the JSDOM (i.e: `document.head`).