Add a demo page, refactor entire application
Repository details (talkie)
- Project page
- talkie
- Project log category
- talkie (708 entries)
- Repository
- @joelpurra/talkie
- Owner
- @joelpurra
- Issues
- Issues on Github
- Contributors
- Contributors on Github
- Project status
- ⏲️ This project has had recent commits.
- 📂 This project is open.
- 🌠 This project is popular.
- Repository activity period
- 🗓—
- Commits
- 751 commits
- Stars
- 71 stars
Commit details (f1be9a39)
- Author
- Joel Purra
- Authored at
- Committer
- Joel Purra
- Committed at
Commit message
Add a demo page, refactor entire application
- A demo page would be useful to show the capabilities of Talkie.
- The demo page should reuse as much functionality as possible from other parts of the application.
React
- Previously, only the options page used react.js.
- A full refactor of the react-based page and component system was needed.
- Now the main html pages (demo, options, popup) uses the same, shared react base.
Prerendering
- To speed up rendering, especially of the popup, isomorphic page rendering (demo, options popup) has been introduced.
- The browsers initially shows a pre-rendered "react server version" of each page, then hydrates react it after the initial load.
- Due to the translation greatly affecting the perceived render speed, each page (3) is rendered per locale (27) per extension package (4). The total number of pre-rendered pages is currently 324.
Isomorphic classes
- To enable isomorphic rendering, both node versions and browser versions of certain critical classes have been introduced.
- The isomorphic split is handled by [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace) and the string
SPLIT_ENVIRONMENTinimportstatement paths.Styling
- Moving away from CSS files towards CSS-in-JS.
- Using styletron to enable atomic, shared CSS classes to be applied to elements.
- Critical CSS is pre-rendered on each page.
- The remaining CSS files contain:
- In-browser [predefined messages](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization#Predefined_messages) enabling [locale dependent CSS](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization#Calling_message_strings_from_manifests_and_extension_CSS). Used for right-to-left support.
- SVG icons as
data:URLs, as they are relatively large blobs.Further work
- Clean up the exposed background api; not all functions are in use.
- Remove other dead code.
- Clean up the code tree directory/file structure a bit.
Raw text
Add a demo page, refactor entire application - A demo page would be useful to show the capabilities of Talkie. - The demo page should reuse as much functionality as possible from other parts of the application. React - Previously, only the options page used react.js. - A full refactor of the react-based page and component system was needed. - Now the main html pages (demo, options, popup) uses the same, shared react base. Prerendering - To speed up rendering, especially of the popup, isomorphic page rendering (demo, options popup) has been introduced. - The browsers initially shows a pre-rendered "react server version" of each page, then hydrates react it after the initial load. - Due to the translation greatly affecting the perceived render speed, each page (3) is rendered per locale (27) per extension package (4). The total number of pre-rendered pages is currently 324. Isomorphic classes - To enable isomorphic rendering, both node versions and browser versions of certain critical classes have been introduced. - The isomorphic split is handled by [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace) and the string `SPLIT_ENVIRONMENT` in `import` statement paths. Styling - Moving away from CSS files towards CSS-in-JS. - Using [styletron](http://styletron.js.org/) to enable atomic, shared CSS classes to be applied to elements. - Critical CSS is pre-rendered on each page. - The remaining CSS files contain: - In-browser [predefined messages](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization#Predefined_messages) enabling [locale dependent CSS](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization#Calling_message_strings_from_manifests_and_extension_CSS). Used for right-to-left support. - SVG icons as `data:` URLs, as they are relatively large blobs. Further work - Clean up the exposed background api; not all functions are in use. - Remove other dead code. - Clean up the code tree directory/file structure a bit.