My living frontend list of tldr knowledge lookups

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: 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. We (especially @jvarandas) tested this with a PoC about Chilis and proved all of the above.

💚 <iframes> vs SEO

Insights / Issues:
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.

We (especially @jvarandas) tested this with a PoC about Chilis and proved all of the above.

💚 Schema.org
Enhance your content with Microdata so that you get the best out of search results e.g. Google showing stars and rating on your product rather than just text e.
Insights / Issues: - Always worth it to have better SEO conversion for public content

Web Components scope:

👎 Official Vue Web Component Wrapper
Vue has an official wrapper to enable `customElements` .
Insights / Issues: - Vue does not support `shadow: false` so Shadow DOM is always enforced - 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
Defines a Web Component based on a given React component
Insights / Issues: - Exports a Promise that by its Promise-nature only resolves once even though multiple tag occurences can be given - It does not export a React component and therefore cannot be SSR'ed once wrapped with Direflow - 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
Claims to be insanely fast and compatible to the React API.
Insights / Issues: - Tested it on small-scale projects. Worked extremely well. Did not have any issues with i yet.

😐 VueJS v2, State Mid 2020
Claims to be one of the "better" frameworks and tries to compete with the React ecosystem but is not mature enough IMHO.
Insights / Issues: - 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 - 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 - Definitely harder learning curve than React since React most often just reflects native JavaScript whilst for Vue the custom syntax has to be used - Bad WebComponents support (see WebComponents section) - Uses `slot` as a custom `Vue` tag name even though that name should be reserved since it is an actual `HTML` tag 😖

😐 VueJS v2, State Mid 2020

Claims to be one of the "better" frameworks and tries to compete with the React ecosystem but is not mature enough IMHO.

Insights / Issues:
- 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
- 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
- Definitely harder learning curve than React since React most often just reflects native JavaScript whilst for Vue the custom syntax has to be used
- Bad WebComponents support (see WebComponents section)
- 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
Allows to store signed data that cannot be corrupted
Insights / Issues: - 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. - 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

💚 JWT

Allows to store signed data that cannot be corrupted

Insights / Issues:
- 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.
- 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

Blog

My living frontend list of tldr knowledge lookups

David Lorenz

SEO scope:

Web Components scope:

Frameworks scope:

Icon Resources:

Authentication scope:

Join Our Newsletter. No Spam, Only the good stuff.

Related