My living frontend list of tldr knowledge lookups
Published: 2020-07-14 15:04:40

This is a living post to keep the references and infos that come with the usage of the toolchain I use. It will grow over time and mostly be my quick-lookup notebook.

This is not a random list. This is list based on things I experienced or used.

---

## SEO scope:


| 💚 `<iframes>` vs SEO                                           |
| ------------------------------------------------------------ |
| **Insights / Issues:** <br />Within mercedes-benz.io we checked if iframes can be considered as "bad" for Google SEO. Result: **We have proven that this is a myth**. Iframe usage is still high due to several reasons. Google is able to detect if the iframe is meant to be a "seamless extension of your content" e.g. a configurator from another team and is able to tell that it is a crucial part of your site and is also able provide search results for it.<br /><br />We (especially [@jvarandas](https://twitter.com/jvarandas)) tested this with a PoC about Chilis and proved all of the above. |

| 💚 [Schema.org](Schema.org)                                                   |
| ------------------------------------------------------------ |
| Enhance your content with Microdata so that you get the [best out of search results](https://monosnap.com/file/rLZ5fjEpBIXU5mcrCVKJKQcnUI26H2) e.g. Google showing stars and rating on your product rather than just text e. |
| **Insights / Issues:** <br />- Always worth it to have better SEO conversion for public content |


---

## Web Components scope:


| 👎 [Official Vue Web Component Wrapper](https://github.com/vuejs/vue-web-component-wrapper/)                                     |
| ------------------------------------------------------------ |
| Vue has an official wrapper to enable `customElements` .     |
| **Insights / Issues:** <br />- Vue does not support `shadow: false` so Shadow DOM is [always enforced](https://github.com/vuejs/vue-web-component-wrapper/blob/e2b84569c4671a7ea451b3887840533261e71715/src/index.js#L84) <br />- The wrapper locks you out of using SSR in combination with Web Components (since the Vue component cannot have the name of the `tagName`) |

| 👎 [Direflow](https://direflow.io/)                                                     |
| ------------------------------------------------------------ |
| Defines a Web Component based on a given React component     |
| **Insights / Issues:** <br />- [Exports a Promise](https://monosnap.com/file/4vSoEcBqT9CWD5LgXCJtxnONP3Fla1) that by its Promise-nature only resolves once even though multiple tag occurences can be given<br />- It does not export a React component and therefore cannot be SSR'ed once wrapped with Direflow<br />- It feels like another lock-in. Not generic enough. |

| *️⃣ Link Collection                                            |
| ------------------------------------------------------------ |
| - A tldr on Web Components https://dev.to/activenode/web-components-shadow-dom-shadow-css-tldr-4cgh |
| - An extremely deep and thorough analysis about Web Components in combination with SSR and its requirements and pitfalls  https://itnext.io/a-deep-analysis-into-isomorphic-autonomous-cross-framework-usage-microfrontends-364271dc5fa9 |

--- 


## Frameworks scope:

| 💚 [InfernoJS](https://infernojs.org/)                        |
| ------------------------------------------------------------ |
| Claims to be insanely fast and compatible to the React API.  |
| **Insights / Issues:**<br />- Tested it on small-scale projects. Worked extremely well. Did not have any issues with i yet. |

| 😐 [VueJS v2, State Mid 2020](https://vuejs.org/)             |
| ------------------------------------------------------------ |
| Claims to be one of the "better" frameworks and tries to compete with the React ecosystem but is not mature enough IMHO. |
| **Insights / Issues:**<br />- At mercedes-benz.io we had to deal with a major caching problem on the testing in every basic setup that comes with Vue. At the end we had to fix it ourselves and the critical bug reported on April was not even touched for months https://github.com/vuejs/vue-cli/issues/5399 <br />- Also at mercedes-benz.io in June 2020 we checked for any compareable site that is using Vue and did only find ones using React<br />- Definitely harder learning curve than React since React most often just reflects native JavaScript whilst for Vue the custom syntax has to be used<br />- Bad WebComponents support (see WebComponents section)<br />- Uses `slot` as a custom `Vue` tag name even though that name should be reserved since it is an actual `HTML` tag 😖 |

--- 

## Icon Resources:

| Name                      | Notes                          |
| ------------------------- | ------------------------------ |
| https://futuramo.com/apps | Not Free but the price is fair |
| https://ionicons.com/     | Free, MIT License              |
| https://www.flaticon.com/ | Mostly Free with Author Credit Link  |

--- 

## Authentication scope:

| 💚 [JWT](https://jwt.io/)                                     |
| ------------------------------------------------------------ |
| Allows to store signed data that cannot be corrupted         |
| **Insights / Issues:**<br />- A JWT can be decrypted easily - even by attackers. However that is not a problem since an unencrypted JWT is still "secure" by being signed. If the inside data is manipulated it is "corrupt" and therefore fails the signature so the verification fails.<br />- It is recommended to not store sensitive data in a JWT and instead use its encrypted sibling JWE. See https://github.com/square/js-jose#readme |