diff --git a/404.html b/404.html index 0e8a182..bd483ae 100644 --- a/404.html +++ b/404.html @@ -7,13 +7,13 @@ Page Not Found | foomo project docs - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/4ec6c0ec.a7ab3fef.js b/assets/js/4ec6c0ec.c17e0af0.js similarity index 82% rename from assets/js/4ec6c0ec.a7ab3fef.js rename to assets/js/4ec6c0ec.c17e0af0.js index 508878f..3ca33c2 100644 --- a/assets/js/4ec6c0ec.a7ab3fef.js +++ b/assets/js/4ec6c0ec.c17e0af0.js @@ -1 +1 @@ -"use strict";(self.webpackChunkfoomo=self.webpackChunkfoomo||[]).push([[6222],{3905:function(e,t,r){r.d(t,{Zo:function(){return f},kt:function(){return m}});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=n.createContext({}),s=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},f=function(e){var t=s(e.components);return n.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},p=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,f=c(e,["components","mdxType","originalType","parentName"]),p=s(r),m=o,d=p["".concat(l,".").concat(m)]||p[m]||u[m]||a;return r?n.createElement(d,i(i({ref:t},f),{},{components:r})):n.createElement(d,i({ref:t},f))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var s=2;s transformObj(obj)).filter(omitBadObject)\n")),(0,a.kt)("p",null,"In the above case we first loop through whole set, transform it and then filter things out. Not only does this goes through all the items twice, but it also first time goes through all the items and then filters them.\nOne optimization would be to first filter them and then transform them, but ideally we should just use a normal for loop or forEach where you go through items only once."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-JavaScript"},"const finalArray = []\nlargeArray.forEach(obj => {\n if (omitBadObject(obj)) {\n finalArray.push(transformObj(obj))\n }\n})\n")),(0,a.kt)("p",null,"This code will skip another loop of items."))}p.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkfoomo=self.webpackChunkfoomo||[]).push([[6222],{3905:function(e,t,r){r.d(t,{Zo:function(){return f},kt:function(){return m}});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=n.createContext({}),s=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},f=function(e){var t=s(e.components);return n.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},p=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,f=c(e,["components","mdxType","originalType","parentName"]),p=s(r),m=o,d=p["".concat(l,".").concat(m)]||p[m]||u[m]||a;return r?n.createElement(d,i(i({ref:t},f),{},{components:r})):n.createElement(d,i({ref:t},f))}));function m(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=p;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var s=2;s transformObj(obj)).filter(omitBadObject)\n")),(0,a.kt)("p",null,"In the above case we first loop through whole set, transform it and then filter things out. Not only does this goes through all the items twice, but it also first time goes through all the items and then filters them.\nOne optimization would be to first filter them and then transform them, but ideally we should just use a normal for loop or forEach where you go through items only once."),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"const finalArray = []\nlargeArray.forEach(obj => {\n if (omitBadObject(obj)) {\n finalArray.push(transformObj(obj))\n }\n})\n")),(0,a.kt)("p",null,"This code will skip another loop of items."))}p.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.9e64b933.js b/assets/js/runtime~main.d57c0e6f.js similarity index 99% rename from assets/js/runtime~main.9e64b933.js rename to assets/js/runtime~main.d57c0e6f.js index a210f6f..60f9e42 100644 --- a/assets/js/runtime~main.9e64b933.js +++ b/assets/js/runtime~main.d57c0e6f.js @@ -1 +1 @@ -!function(){"use strict";var e,c,f,a,t,d={},n={};function r(e){var c=n[e];if(void 0!==c)return c.exports;var f=n[e]={id:e,loaded:!1,exports:{}};return d[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=d,r.c=n,e=[],r.O=function(c,f,a,t){if(!f){var d=1/0;for(u=0;u=t)&&Object.keys(r.O).every((function(e){return r.O[e](f[b])}))?f.splice(b--,1):(n=!1,t0&&e[u-1][2]>t;u--)e[u]=e[u-1];e[u]=[f,a,t]},r.n=function(e){var c=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(c,{a:c}),c},f=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var t=Object.create(null);r.r(t);var d={};c=c||[null,f({}),f([]),f(f)];for(var n=2&a&&e;"object"==typeof n&&!~c.indexOf(n);n=f(n))Object.getOwnPropertyNames(n).forEach((function(c){d[c]=function(){return e[c]}}));return d.default=function(){return e},r.d(t,d),t},r.d=function(e,c){for(var f in c)r.o(c,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:c[f]})},r.f={},r.e=function(e){return Promise.all(Object.keys(r.f).reduce((function(c,f){return r.f[f](e,c),c}),[]))},r.u=function(e){return"assets/js/"+({53:"935f2afb",206:"43dc0045",405:"8047a11d",533:"b2b675dd",801:"2b6f3ca6",1064:"a8a1ab13",1477:"b2f554cd",1713:"a7023ddc",1880:"bee3f77a",1911:"1aa4b20d",2078:"d1323eba",2233:"3352bb21",2364:"f12ae7d6",2416:"395ebfc6",2535:"814f3328",2648:"0606a637",2672:"ac94ec9c",2833:"9a50dba7",2880:"ba52226f",3085:"1f391b9e",3089:"a6aa9e1f",3237:"1df93b7f",3363:"c00dc5e0",3411:"78a933e5",3608:"9e4087bc",3626:"8139c962",3751:"3720c009",3899:"99bb4438",4013:"01a85c17",4033:"a15e8276",4121:"55960ee5",4195:"b3d5163b",4491:"c6f71f2b",4574:"36213d62",4622:"29f10043",4742:"f0d1e73f",4761:"02493ab9",4894:"5d6cc085",5211:"6a670c2a",5408:"e25ea6ac",5500:"7071e909",5709:"5e9fc3ef",5791:"3338c0e0",5817:"e35f371e",5839:"7fdf1619",5867:"feda6906",5900:"35b210c0",5902:"f1808d3f",6009:"cd2041f2",6073:"72cf7f21",6081:"9e4ef427",6083:"146489e7",6103:"ccc49370",6222:"4ec6c0ec",6227:"5039a037",6465:"c3ad09c3",6487:"d7c843b2",6512:"b59d5feb",6579:"2cb19d2e",6582:"c2b2df4f",6660:"04056cce",6840:"5f154b3e",7027:"70617f54",7183:"cce78ecb",7533:"3b233ea0",7566:"0911540a",7659:"fc3deafd",7696:"2b793916",7785:"3d3976a7",7918:"17896441",7958:"4d194efc",8423:"12623ccc",8495:"0a5fa0dd",8503:"8077e178",8610:"6875c492",8666:"b0751d67",8735:"37e97a4e",8868:"f11ea25e",9116:"e62c5aa0",9196:"f768d962",9514:"1be78505",9543:"1b3e71b9",9746:"78460e70",9924:"df203c0f"}[e]||e)+"."+{53:"0238657f",206:"d0591f81",405:"755508ed",533:"f8b5c782",801:"50feec02",831:"f853ed42",1064:"489cc9ab",1477:"5639de44",1713:"eb430419",1880:"fcfe54e7",1911:"bc141a6f",2078:"1511095e",2233:"54e6102c",2364:"072efb25",2416:"12e14e7c",2535:"6cebed11",2648:"226328e0",2672:"cf7d4283",2833:"8e2db19f",2880:"aabf92f8",3085:"612a1c5c",3089:"78e39833",3237:"108ac62c",3363:"4b0947e7",3411:"fce2842b",3608:"2f2e19e1",3626:"b08a1760",3751:"8226915e",3899:"4efc3c78",4013:"7d0034a3",4033:"8aa1fe40",4121:"9ef8ee8c",4195:"f320ce24",4491:"4b0c206c",4574:"d07b30c0",4608:"e01af379",4622:"0e0358dd",4742:"71fb4cf3",4761:"65b30b90",4773:"35fd21a1",4894:"5729b9ea",5211:"ae6c49e2",5408:"6949efbe",5500:"0607ec7f",5709:"37c23cb4",5791:"8358d78e",5817:"a0e2ba97",5839:"0fe0c229",5867:"7bd6a2b4",5900:"e1207f0f",5902:"6ec8802a",6009:"7397c385",6073:"06e4fa59",6081:"3bbe91d9",6083:"292f8ca2",6103:"a543dd59",6222:"a7ab3fef",6227:"d8dc4935",6465:"4176b8c9",6487:"a4fa1d70",6512:"e3dd92cd",6579:"7ea38433",6582:"68ace947",6660:"c415efdc",6840:"b1bee85d",6945:"30550d05",7027:"5ceba1c9",7183:"66730a59",7533:"3cfcb579",7566:"799fdb1a",7659:"79582d77",7696:"13262be8",7785:"4a2e13fe",7918:"648b34d3",7958:"cb9ce41a",8423:"f1d74277",8495:"2de33e94",8503:"14b3341d",8576:"ff637482",8610:"debafd69",8666:"9471a0a1",8735:"0b478ffc",8868:"b186bcec",8894:"b472b857",9116:"b53cb1cf",9196:"7067cd04",9514:"6726295f",9543:"35bef058",9746:"f7040909",9924:"d9fb985e"}[e]+".js"},r.miniCssF=function(e){return"assets/css/styles.47738ace.css"},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},a={},t="foomo:",r.l=function(e,c,f,d){if(a[e])a[e].push(c);else{var n,b;if(void 0!==f)for(var o=document.getElementsByTagName("script"),u=0;u=t)&&Object.keys(r.O).every((function(e){return r.O[e](f[b])}))?f.splice(b--,1):(n=!1,t0&&e[u-1][2]>t;u--)e[u]=e[u-1];e[u]=[f,a,t]},r.n=function(e){var c=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(c,{a:c}),c},f=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var t=Object.create(null);r.r(t);var d={};c=c||[null,f({}),f([]),f(f)];for(var n=2&a&&e;"object"==typeof n&&!~c.indexOf(n);n=f(n))Object.getOwnPropertyNames(n).forEach((function(c){d[c]=function(){return e[c]}}));return d.default=function(){return e},r.d(t,d),t},r.d=function(e,c){for(var f in c)r.o(c,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:c[f]})},r.f={},r.e=function(e){return Promise.all(Object.keys(r.f).reduce((function(c,f){return r.f[f](e,c),c}),[]))},r.u=function(e){return"assets/js/"+({53:"935f2afb",206:"43dc0045",405:"8047a11d",533:"b2b675dd",801:"2b6f3ca6",1064:"a8a1ab13",1477:"b2f554cd",1713:"a7023ddc",1880:"bee3f77a",1911:"1aa4b20d",2078:"d1323eba",2233:"3352bb21",2364:"f12ae7d6",2416:"395ebfc6",2535:"814f3328",2648:"0606a637",2672:"ac94ec9c",2833:"9a50dba7",2880:"ba52226f",3085:"1f391b9e",3089:"a6aa9e1f",3237:"1df93b7f",3363:"c00dc5e0",3411:"78a933e5",3608:"9e4087bc",3626:"8139c962",3751:"3720c009",3899:"99bb4438",4013:"01a85c17",4033:"a15e8276",4121:"55960ee5",4195:"b3d5163b",4491:"c6f71f2b",4574:"36213d62",4622:"29f10043",4742:"f0d1e73f",4761:"02493ab9",4894:"5d6cc085",5211:"6a670c2a",5408:"e25ea6ac",5500:"7071e909",5709:"5e9fc3ef",5791:"3338c0e0",5817:"e35f371e",5839:"7fdf1619",5867:"feda6906",5900:"35b210c0",5902:"f1808d3f",6009:"cd2041f2",6073:"72cf7f21",6081:"9e4ef427",6083:"146489e7",6103:"ccc49370",6222:"4ec6c0ec",6227:"5039a037",6465:"c3ad09c3",6487:"d7c843b2",6512:"b59d5feb",6579:"2cb19d2e",6582:"c2b2df4f",6660:"04056cce",6840:"5f154b3e",7027:"70617f54",7183:"cce78ecb",7533:"3b233ea0",7566:"0911540a",7659:"fc3deafd",7696:"2b793916",7785:"3d3976a7",7918:"17896441",7958:"4d194efc",8423:"12623ccc",8495:"0a5fa0dd",8503:"8077e178",8610:"6875c492",8666:"b0751d67",8735:"37e97a4e",8868:"f11ea25e",9116:"e62c5aa0",9196:"f768d962",9514:"1be78505",9543:"1b3e71b9",9746:"78460e70",9924:"df203c0f"}[e]||e)+"."+{53:"0238657f",206:"d0591f81",405:"755508ed",533:"f8b5c782",801:"50feec02",831:"f853ed42",1064:"489cc9ab",1477:"5639de44",1713:"eb430419",1880:"fcfe54e7",1911:"bc141a6f",2078:"1511095e",2233:"54e6102c",2364:"072efb25",2416:"12e14e7c",2535:"6cebed11",2648:"226328e0",2672:"cf7d4283",2833:"8e2db19f",2880:"aabf92f8",3085:"612a1c5c",3089:"78e39833",3237:"108ac62c",3363:"4b0947e7",3411:"fce2842b",3608:"2f2e19e1",3626:"b08a1760",3751:"8226915e",3899:"4efc3c78",4013:"7d0034a3",4033:"8aa1fe40",4121:"9ef8ee8c",4195:"f320ce24",4491:"4b0c206c",4574:"d07b30c0",4608:"e01af379",4622:"0e0358dd",4742:"71fb4cf3",4761:"65b30b90",4773:"35fd21a1",4894:"5729b9ea",5211:"ae6c49e2",5408:"6949efbe",5500:"0607ec7f",5709:"37c23cb4",5791:"8358d78e",5817:"a0e2ba97",5839:"0fe0c229",5867:"7bd6a2b4",5900:"e1207f0f",5902:"6ec8802a",6009:"7397c385",6073:"06e4fa59",6081:"3bbe91d9",6083:"292f8ca2",6103:"a543dd59",6222:"c17e0af0",6227:"d8dc4935",6465:"4176b8c9",6487:"a4fa1d70",6512:"e3dd92cd",6579:"7ea38433",6582:"68ace947",6660:"c415efdc",6840:"b1bee85d",6945:"30550d05",7027:"5ceba1c9",7183:"66730a59",7533:"3cfcb579",7566:"799fdb1a",7659:"79582d77",7696:"13262be8",7785:"4a2e13fe",7918:"648b34d3",7958:"cb9ce41a",8423:"f1d74277",8495:"2de33e94",8503:"14b3341d",8576:"ff637482",8610:"debafd69",8666:"9471a0a1",8735:"0b478ffc",8868:"b186bcec",8894:"b472b857",9116:"b53cb1cf",9196:"7067cd04",9514:"6726295f",9543:"35bef058",9746:"f7040909",9924:"d9fb985e"}[e]+".js"},r.miniCssF=function(e){return"assets/css/styles.47738ace.css"},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},a={},t="foomo:",r.l=function(e,c,f,d){if(a[e])a[e].push(c);else{var n,b;if(void 0!==f)for(var o=document.getElementsByTagName("script"),u=0;u foomo project docs - +

Awesome list of software

A list of commercial and open source software we use, because it is awesome.


desktop software​

devtools​

IDEs​

creative tools​

cli utilities​

k8s / docker​

backup​

software as a service​

productivity / collaboration​

CMS​

- + \ No newline at end of file diff --git a/blog.html b/blog.html index a65604b..06ccd71 100644 --- a/blog.html +++ b/blog.html @@ -7,7 +7,7 @@ Blog | foomo project docs - + @@ -16,7 +16,7 @@ https://github.com/blugelabs/bluge // next iteration of bleve

projects using bluge​

All bleeding edge afaik atm - but definitely good places to look at bluge usage

https://github.com/prabhatsharma/zinc https://github.com/mosuka/phalanx

Look ma I made a vector database​

Gotta take a look at this one - will report later

https://github.com/semi-technologies/weaviate

Marko Trebižan

Issue with performance​

When building an ecommerce site or an application where performance is a great deal for the users, you need to keep your application fast and responsive. Frontend developers have already many use-cases when the UI becomes laggy and this increases when 3rd party scripts are being included, such as Google Tag Manager or various Live chats (e.g. Intercom).

This does not only influences the users when using the site but also Lighthouse score gets lower which also influences page rankings. So the most naive and easy way for this is to defer loading of such scripts but when you need to get all the data from the start of the application, such tactic is not an option. So what else can we do?

Partytown to the rescue​

Developers at BuilderIO created an library Partytown that would allow relocating resources from 3rd party scripts off the main thread. We won't dive into specifics how it works, because they explain it nicely on their GitHub page.

In our stack we use Next.js React framework and we will go through the basic steps that will allow us to include Partytown for Google Tag Manager.

Setup​

Partytown script needs to be located inside our application and live on the same domain. Since we're using monorepo structure, we need to copy this script across all our frontend application. For that we used CopyPlugin webpack plugin in our Next.js config file:

config.plugins.push(
      ...
      new CopyPlugin({
        patterns: [
          {
            // we copy script from node_modules partytown package to `~partytown` folder in our package that serves static files
            from: path.join(path.dirname(require.resolve('@builder.io/partytown')), 'lib'),
            // paths for SSR and client side rendering differ
            to: path.join(`${isServer ? '..' : '.'}/static/assets/`, '~partytown'),
          },
        ],
      })
    );

Partytown's requirement is that it needs to know what script should it load into own web worker. For that we set script type to text/partytown. This will prevent script to load on initial load.

Inside _document.tsx we add this:

<Head>
    ...
    // include Partytown and set custom path due to multiple frontends
    <Partytown lib={`${addTrailingSlash(this.props.basePath)}_next/static/assets/~partytown/`} debug={false} />
    // tag 3rd party script with partytown type
    <script type="text/partytown" src={`https://www.googletagmanager.com/gtm.js?id=${id}`} />
    ...
</Head>

Results​

So now, does it work? We used one of our large Ecommerce sites to test the landing Lighthouse score.

This was before adding Partytown:

Lighthouse before Partytown

Here you can see 2 critical things: almost 1s of total blocking time (TBT) and 9s of time to interactive (TTI).

After we added Partytown, we got this:

Lighthouse after Partytown

Time to interactive went from 9s to 6.1s which is almost 33% improvement and total blocking time was reduce by more than 50%! We were more than impressed how easy it was to improve our performances.

Side note: Both screenshots were compressed using Squoosh App.

Next steps

After successful testing of Partytown for Google Tag Manager script, we are more than interested in trying it out on our other scripts. One important topic will be to test Partytown with other service-worker related libraries and how to use them together.

Jan Halfar

A few years ago we abandoned the previous version of https://www.foomo.org as we did not want to maintain the old wordpress installation and the project was only living in README.md in the repos living under https://www.github.com/foomo .

As things have grown over time we have decided to re-launch a website / cross project documentation.

So welcome back and enjoy the view to the past:

blast from the past

- + \ No newline at end of file diff --git a/blog/archive.html b/blog/archive.html index 279a702..9d76cfb 100644 --- a/blog/archive.html +++ b/blog/archive.html @@ -7,13 +7,13 @@ Archive | foomo project docs - +

Archive

Archive

2021

2022

- + \ No newline at end of file diff --git a/blog/debugging-go-map-races-in-k8s.html b/blog/debugging-go-map-races-in-k8s.html index a105aa6..92ca1e7 100644 --- a/blog/debugging-go-map-races-in-k8s.html +++ b/blog/debugging-go-map-races-in-k8s.html @@ -7,13 +7,13 @@ debugging Go map races in k8s | foomo project docs - +
- + \ No newline at end of file diff --git a/blog/impact-of-3rd-party-scripts-on-performance.html b/blog/impact-of-3rd-party-scripts-on-performance.html index 443b6a3..1cb6c12 100644 --- a/blog/impact-of-3rd-party-scripts-on-performance.html +++ b/blog/impact-of-3rd-party-scripts-on-performance.html @@ -7,14 +7,14 @@ Impact of 3rd party scripts on performance | foomo project docs - +

Impact of 3rd party scripts on performance

Marko Trebižan

Issue with performance​

When building an ecommerce site or an application where performance is a great deal for the users, you need to keep your application fast and responsive. Frontend developers have already many use-cases when the UI becomes laggy and this increases when 3rd party scripts are being included, such as Google Tag Manager or various Live chats (e.g. Intercom).

This does not only influences the users when using the site but also Lighthouse score gets lower which also influences page rankings. So the most naive and easy way for this is to defer loading of such scripts but when you need to get all the data from the start of the application, such tactic is not an option. So what else can we do?

Partytown to the rescue​

Developers at BuilderIO created an library Partytown that would allow relocating resources from 3rd party scripts off the main thread. We won't dive into specifics how it works, because they explain it nicely on their GitHub page.

In our stack we use Next.js React framework and we will go through the basic steps that will allow us to include Partytown for Google Tag Manager.

Setup​

Partytown script needs to be located inside our application and live on the same domain. Since we're using monorepo structure, we need to copy this script across all our frontend application. For that we used CopyPlugin webpack plugin in our Next.js config file:

config.plugins.push(
      ...
      new CopyPlugin({
        patterns: [
          {
            // we copy script from node_modules partytown package to `~partytown` folder in our package that serves static files
            from: path.join(path.dirname(require.resolve('@builder.io/partytown')), 'lib'),
            // paths for SSR and client side rendering differ
            to: path.join(`${isServer ? '..' : '.'}/static/assets/`, '~partytown'),
          },
        ],
      })
    );

Partytown's requirement is that it needs to know what script should it load into own web worker. For that we set script type to text/partytown. This will prevent script to load on initial load.

Inside _document.tsx we add this:

<Head>
    ...
    // include Partytown and set custom path due to multiple frontends
    <Partytown lib={`${addTrailingSlash(this.props.basePath)}_next/static/assets/~partytown/`} debug={false} />
    // tag 3rd party script with partytown type
    <script type="text/partytown" src={`https://www.googletagmanager.com/gtm.js?id=${id}`} />
    ...
</Head>

Results​

So now, does it work? We used one of our large Ecommerce sites to test the landing Lighthouse score.

This was before adding Partytown:

Lighthouse before Partytown

Here you can see 2 critical things: almost 1s of total blocking time (TBT) and 9s of time to interactive (TTI).

After we added Partytown, we got this:

Lighthouse after Partytown

Time to interactive went from 9s to 6.1s which is almost 33% improvement and total blocking time was reduce by more than 50%! We were more than impressed how easy it was to improve our performances.

Side note: Both screenshots were compressed using Squoosh App.

Next steps

After successful testing of Partytown for Google Tag Manager script, we are more than interested in trying it out on our other scripts. One important topic will be to test Partytown with other service-worker related libraries and how to use them together.

- + \ No newline at end of file diff --git a/blog/searching-for-search-engines.html b/blog/searching-for-search-engines.html index bbc6644..4c6fc79 100644 --- a/blog/searching-for-search-engines.html +++ b/blog/searching-for-search-engines.html @@ -7,7 +7,7 @@ The never ending search a search engine 2022-01 edition | foomo project docs - + @@ -15,7 +15,7 @@

The never ending search a search engine 2022-01 edition

Jan Halfar

While building this website and integrating https://docsearch.algolia.com and evaluating another solution by a large company in parallel I could not help to search github and the web for the current state of search engines and search related services.

Since I had done the same thing about a year ago, I was surprised to see how quickly things are moving atm.

Algolia​

I was blown away by the quality of https://www.algolia.com and I wish it was open source, but I guess, we all have to make a living ;)

To see how awesome a web (search) interface can be check out https://www.lacoste.com/us/#query=red%20jackets%20for%20men

Apart from that the UI/UX of their backend tools is fantastic.

Elastic​

When it comes to https://www.elastic.com I am a bit nervous about the future of the licensing, despite the fact, that I understand their motivation. At the same time the https://opensearch.org does not seem to be an ampty threat.

typesense.org​

I do not know, who was hiding under a rock, but I had not seen https://typesense.org before and they certainly have a bold claim: "The Open Source Algolia Alternative" / "The Easier To Use ElasticSearch Alternative"

When looking at https://github.com/typesense/typesense/graphs/contributors it seems, that Kishore Nallan has been working on this for a while. Unfourtunately I do not really see a lot of external contributions, C++ does not seem to attract a lot of contribution.

MeiliSearch​

This Rust project https://www.meilisearch.com/ seems to be picking up speed and is definetly on the test short list. It is a fresh codebase with siginficant open source contributions and certainly will attract new developers with Rust and a modern architecture.

Go eco system​

Obviously we are very interested in Go powered software and there are a few notable projects. ATM I do not see anything elastic or algolia like, that would be really mature.

bleve / bluge​

Marty Schoch seems to be the man when it comes down to text indexing libraries in written in Go and bluge seems to be THE library, that is solid and modern, when implementing text search in your Go application.

https://github.com/blevesearch/bleve https://github.com/blugelabs/bluge // next iteration of bleve

projects using bluge​

All bleeding edge afaik atm - but definitely good places to look at bluge usage

https://github.com/prabhatsharma/zinc https://github.com/mosuka/phalanx

Look ma I made a vector database​

Gotta take a look at this one - will report later

https://github.com/semi-technologies/weaviate

- + \ No newline at end of file diff --git a/blog/tags.html b/blog/tags.html index 63da8db..5eca1a2 100644 --- a/blog/tags.html +++ b/blog/tags.html @@ -7,13 +7,13 @@ Tags | foomo project docs - +

Tags

- + \ No newline at end of file diff --git a/blog/tags/backend.html b/blog/tags/backend.html index 586182c..b7dce4b 100644 --- a/blog/tags/backend.html +++ b/blog/tags/backend.html @@ -7,7 +7,7 @@ 2 posts tagged with "backend" | foomo project docs - + @@ -15,7 +15,7 @@

2 posts tagged with "backend"

View All Tags

Jan Halfar

While building this website and integrating https://docsearch.algolia.com and evaluating another solution by a large company in parallel I could not help to search github and the web for the current state of search engines and search related services.

Since I had done the same thing about a year ago, I was surprised to see how quickly things are moving atm.

Algolia​

I was blown away by the quality of https://www.algolia.com and I wish it was open source, but I guess, we all have to make a living ;)

To see how awesome a web (search) interface can be check out https://www.lacoste.com/us/#query=red%20jackets%20for%20men

Apart from that the UI/UX of their backend tools is fantastic.

Elastic​

When it comes to https://www.elastic.com I am a bit nervous about the future of the licensing, despite the fact, that I understand their motivation. At the same time the https://opensearch.org does not seem to be an ampty threat.

typesense.org​

I do not know, who was hiding under a rock, but I had not seen https://typesense.org before and they certainly have a bold claim: "The Open Source Algolia Alternative" / "The Easier To Use ElasticSearch Alternative"

When looking at https://github.com/typesense/typesense/graphs/contributors it seems, that Kishore Nallan has been working on this for a while. Unfourtunately I do not really see a lot of external contributions, C++ does not seem to attract a lot of contribution.

MeiliSearch​

This Rust project https://www.meilisearch.com/ seems to be picking up speed and is definetly on the test short list. It is a fresh codebase with siginficant open source contributions and certainly will attract new developers with Rust and a modern architecture.

Go eco system​

Obviously we are very interested in Go powered software and there are a few notable projects. ATM I do not see anything elastic or algolia like, that would be really mature.

bleve / bluge​

Marty Schoch seems to be the man when it comes down to text indexing libraries in written in Go and bluge seems to be THE library, that is solid and modern, when implementing text search in your Go application.

https://github.com/blevesearch/bleve https://github.com/blugelabs/bluge // next iteration of bleve

projects using bluge​

All bleeding edge afaik atm - but definitely good places to look at bluge usage

https://github.com/prabhatsharma/zinc https://github.com/mosuka/phalanx

Look ma I made a vector database​

Gotta take a look at this one - will report later

https://github.com/semi-technologies/weaviate

- + \ No newline at end of file diff --git a/blog/tags/debugging.html b/blog/tags/debugging.html index f9d0d1e..7d7253a 100644 --- a/blog/tags/debugging.html +++ b/blog/tags/debugging.html @@ -7,13 +7,13 @@ One post tagged with "debugging" | foomo project docs - +

One post tagged with "debugging"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/foomo.html b/blog/tags/foomo.html index 45ef60a..0f3bbef 100644 --- a/blog/tags/foomo.html +++ b/blog/tags/foomo.html @@ -7,13 +7,13 @@ One post tagged with "foomo" | foomo project docs - +

One post tagged with "foomo"

View All Tags
- + \ No newline at end of file diff --git a/blog/tags/frontend.html b/blog/tags/frontend.html index a2bf8f3..075fac4 100644 --- a/blog/tags/frontend.html +++ b/blog/tags/frontend.html @@ -7,14 +7,14 @@ One post tagged with "frontend" | foomo project docs - +

One post tagged with "frontend"

View All Tags

Marko Trebižan

Issue with performance​

When building an ecommerce site or an application where performance is a great deal for the users, you need to keep your application fast and responsive. Frontend developers have already many use-cases when the UI becomes laggy and this increases when 3rd party scripts are being included, such as Google Tag Manager or various Live chats (e.g. Intercom).

This does not only influences the users when using the site but also Lighthouse score gets lower which also influences page rankings. So the most naive and easy way for this is to defer loading of such scripts but when you need to get all the data from the start of the application, such tactic is not an option. So what else can we do?

Partytown to the rescue​

Developers at BuilderIO created an library Partytown that would allow relocating resources from 3rd party scripts off the main thread. We won't dive into specifics how it works, because they explain it nicely on their GitHub page.

In our stack we use Next.js React framework and we will go through the basic steps that will allow us to include Partytown for Google Tag Manager.

Setup​

Partytown script needs to be located inside our application and live on the same domain. Since we're using monorepo structure, we need to copy this script across all our frontend application. For that we used CopyPlugin webpack plugin in our Next.js config file:

config.plugins.push(
      ...
      new CopyPlugin({
        patterns: [
          {
            // we copy script from node_modules partytown package to `~partytown` folder in our package that serves static files
            from: path.join(path.dirname(require.resolve('@builder.io/partytown')), 'lib'),
            // paths for SSR and client side rendering differ
            to: path.join(`${isServer ? '..' : '.'}/static/assets/`, '~partytown'),
          },
        ],
      })
    );

Partytown's requirement is that it needs to know what script should it load into own web worker. For that we set script type to text/partytown. This will prevent script to load on initial load.

Inside _document.tsx we add this:

<Head>
    ...
    // include Partytown and set custom path due to multiple frontends
    <Partytown lib={`${addTrailingSlash(this.props.basePath)}_next/static/assets/~partytown/`} debug={false} />
    // tag 3rd party script with partytown type
    <script type="text/partytown" src={`https://www.googletagmanager.com/gtm.js?id=${id}`} />
    ...
</Head>

Results​

So now, does it work? We used one of our large Ecommerce sites to test the landing Lighthouse score.

This was before adding Partytown:

Lighthouse before Partytown

Here you can see 2 critical things: almost 1s of total blocking time (TBT) and 9s of time to interactive (TTI).

After we added Partytown, we got this:

Lighthouse after Partytown

Time to interactive went from 9s to 6.1s which is almost 33% improvement and total blocking time was reduce by more than 50%! We were more than impressed how easy it was to improve our performances.

Side note: Both screenshots were compressed using Squoosh App.

Next steps

After successful testing of Partytown for Google Tag Manager script, we are more than interested in trying it out on our other scripts. One important topic will be to test Partytown with other service-worker related libraries and how to use them together.

- + \ No newline at end of file diff --git a/blog/tags/go.html b/blog/tags/go.html index 678d8dd..a95dcfb 100644 --- a/blog/tags/go.html +++ b/blog/tags/go.html @@ -7,7 +7,7 @@ 2 posts tagged with "go" | foomo project docs - + @@ -15,7 +15,7 @@

2 posts tagged with "go"

View All Tags

Jan Halfar

While building this website and integrating https://docsearch.algolia.com and evaluating another solution by a large company in parallel I could not help to search github and the web for the current state of search engines and search related services.

Since I had done the same thing about a year ago, I was surprised to see how quickly things are moving atm.

Algolia​

I was blown away by the quality of https://www.algolia.com and I wish it was open source, but I guess, we all have to make a living ;)

To see how awesome a web (search) interface can be check out https://www.lacoste.com/us/#query=red%20jackets%20for%20men

Apart from that the UI/UX of their backend tools is fantastic.

Elastic​

When it comes to https://www.elastic.com I am a bit nervous about the future of the licensing, despite the fact, that I understand their motivation. At the same time the https://opensearch.org does not seem to be an ampty threat.

typesense.org​

I do not know, who was hiding under a rock, but I had not seen https://typesense.org before and they certainly have a bold claim: "The Open Source Algolia Alternative" / "The Easier To Use ElasticSearch Alternative"

When looking at https://github.com/typesense/typesense/graphs/contributors it seems, that Kishore Nallan has been working on this for a while. Unfourtunately I do not really see a lot of external contributions, C++ does not seem to attract a lot of contribution.

MeiliSearch​

This Rust project https://www.meilisearch.com/ seems to be picking up speed and is definetly on the test short list. It is a fresh codebase with siginficant open source contributions and certainly will attract new developers with Rust and a modern architecture.

Go eco system​

Obviously we are very interested in Go powered software and there are a few notable projects. ATM I do not see anything elastic or algolia like, that would be really mature.

bleve / bluge​

Marty Schoch seems to be the man when it comes down to text indexing libraries in written in Go and bluge seems to be THE library, that is solid and modern, when implementing text search in your Go application.

https://github.com/blevesearch/bleve https://github.com/blugelabs/bluge // next iteration of bleve

projects using bluge​

All bleeding edge afaik atm - but definitely good places to look at bluge usage

https://github.com/prabhatsharma/zinc https://github.com/mosuka/phalanx

Look ma I made a vector database​

Gotta take a look at this one - will report later

https://github.com/semi-technologies/weaviate

- + \ No newline at end of file diff --git a/blog/tags/performance.html b/blog/tags/performance.html index 4f22b96..6a5ddf8 100644 --- a/blog/tags/performance.html +++ b/blog/tags/performance.html @@ -7,14 +7,14 @@ One post tagged with "performance" | foomo project docs - +

One post tagged with "performance"

View All Tags

Marko Trebižan

Issue with performance​

When building an ecommerce site or an application where performance is a great deal for the users, you need to keep your application fast and responsive. Frontend developers have already many use-cases when the UI becomes laggy and this increases when 3rd party scripts are being included, such as Google Tag Manager or various Live chats (e.g. Intercom).

This does not only influences the users when using the site but also Lighthouse score gets lower which also influences page rankings. So the most naive and easy way for this is to defer loading of such scripts but when you need to get all the data from the start of the application, such tactic is not an option. So what else can we do?

Partytown to the rescue​

Developers at BuilderIO created an library Partytown that would allow relocating resources from 3rd party scripts off the main thread. We won't dive into specifics how it works, because they explain it nicely on their GitHub page.

In our stack we use Next.js React framework and we will go through the basic steps that will allow us to include Partytown for Google Tag Manager.

Setup​

Partytown script needs to be located inside our application and live on the same domain. Since we're using monorepo structure, we need to copy this script across all our frontend application. For that we used CopyPlugin webpack plugin in our Next.js config file:

config.plugins.push(
      ...
      new CopyPlugin({
        patterns: [
          {
            // we copy script from node_modules partytown package to `~partytown` folder in our package that serves static files
            from: path.join(path.dirname(require.resolve('@builder.io/partytown')), 'lib'),
            // paths for SSR and client side rendering differ
            to: path.join(`${isServer ? '..' : '.'}/static/assets/`, '~partytown'),
          },
        ],
      })
    );

Partytown's requirement is that it needs to know what script should it load into own web worker. For that we set script type to text/partytown. This will prevent script to load on initial load.

Inside _document.tsx we add this:

<Head>
    ...
    // include Partytown and set custom path due to multiple frontends
    <Partytown lib={`${addTrailingSlash(this.props.basePath)}_next/static/assets/~partytown/`} debug={false} />
    // tag 3rd party script with partytown type
    <script type="text/partytown" src={`https://www.googletagmanager.com/gtm.js?id=${id}`} />
    ...
</Head>

Results​

So now, does it work? We used one of our large Ecommerce sites to test the landing Lighthouse score.

This was before adding Partytown:

Lighthouse before Partytown

Here you can see 2 critical things: almost 1s of total blocking time (TBT) and 9s of time to interactive (TTI).

After we added Partytown, we got this:

Lighthouse after Partytown

Time to interactive went from 9s to 6.1s which is almost 33% improvement and total blocking time was reduce by more than 50%! We were more than impressed how easy it was to improve our performances.

Side note: Both screenshots were compressed using Squoosh App.

Next steps

After successful testing of Partytown for Google Tag Manager script, we are more than interested in trying it out on our other scripts. One important topic will be to test Partytown with other service-worker related libraries and how to use them together.

- + \ No newline at end of file diff --git a/blog/tags/search-engine.html b/blog/tags/search-engine.html index d8cc8b1..61f90ae 100644 --- a/blog/tags/search-engine.html +++ b/blog/tags/search-engine.html @@ -7,7 +7,7 @@ One post tagged with "search-engine" | foomo project docs - + @@ -15,7 +15,7 @@

One post tagged with "search-engine"

View All Tags

Jan Halfar

While building this website and integrating https://docsearch.algolia.com and evaluating another solution by a large company in parallel I could not help to search github and the web for the current state of search engines and search related services.

Since I had done the same thing about a year ago, I was surprised to see how quickly things are moving atm.

Algolia​

I was blown away by the quality of https://www.algolia.com and I wish it was open source, but I guess, we all have to make a living ;)

To see how awesome a web (search) interface can be check out https://www.lacoste.com/us/#query=red%20jackets%20for%20men

Apart from that the UI/UX of their backend tools is fantastic.

Elastic​

When it comes to https://www.elastic.com I am a bit nervous about the future of the licensing, despite the fact, that I understand their motivation. At the same time the https://opensearch.org does not seem to be an ampty threat.

typesense.org​

I do not know, who was hiding under a rock, but I had not seen https://typesense.org before and they certainly have a bold claim: "The Open Source Algolia Alternative" / "The Easier To Use ElasticSearch Alternative"

When looking at https://github.com/typesense/typesense/graphs/contributors it seems, that Kishore Nallan has been working on this for a while. Unfourtunately I do not really see a lot of external contributions, C++ does not seem to attract a lot of contribution.

MeiliSearch​

This Rust project https://www.meilisearch.com/ seems to be picking up speed and is definetly on the test short list. It is a fresh codebase with siginficant open source contributions and certainly will attract new developers with Rust and a modern architecture.

Go eco system​

Obviously we are very interested in Go powered software and there are a few notable projects. ATM I do not see anything elastic or algolia like, that would be really mature.

bleve / bluge​

Marty Schoch seems to be the man when it comes down to text indexing libraries in written in Go and bluge seems to be THE library, that is solid and modern, when implementing text search in your Go application.

https://github.com/blevesearch/bleve https://github.com/blugelabs/bluge // next iteration of bleve

projects using bluge​

All bleeding edge afaik atm - but definitely good places to look at bluge usage

https://github.com/prabhatsharma/zinc https://github.com/mosuka/phalanx

Look ma I made a vector database​

Gotta take a look at this one - will report later

https://github.com/semi-technologies/weaviate

- + \ No newline at end of file diff --git a/blog/tags/search.html b/blog/tags/search.html index 2684d9f..4b07dbb 100644 --- a/blog/tags/search.html +++ b/blog/tags/search.html @@ -7,7 +7,7 @@ One post tagged with "search" | foomo project docs - + @@ -15,7 +15,7 @@

One post tagged with "search"

View All Tags

Jan Halfar

While building this website and integrating https://docsearch.algolia.com and evaluating another solution by a large company in parallel I could not help to search github and the web for the current state of search engines and search related services.

Since I had done the same thing about a year ago, I was surprised to see how quickly things are moving atm.

Algolia​

I was blown away by the quality of https://www.algolia.com and I wish it was open source, but I guess, we all have to make a living ;)

To see how awesome a web (search) interface can be check out https://www.lacoste.com/us/#query=red%20jackets%20for%20men

Apart from that the UI/UX of their backend tools is fantastic.

Elastic​

When it comes to https://www.elastic.com I am a bit nervous about the future of the licensing, despite the fact, that I understand their motivation. At the same time the https://opensearch.org does not seem to be an ampty threat.

typesense.org​

I do not know, who was hiding under a rock, but I had not seen https://typesense.org before and they certainly have a bold claim: "The Open Source Algolia Alternative" / "The Easier To Use ElasticSearch Alternative"

When looking at https://github.com/typesense/typesense/graphs/contributors it seems, that Kishore Nallan has been working on this for a while. Unfourtunately I do not really see a lot of external contributions, C++ does not seem to attract a lot of contribution.

MeiliSearch​

This Rust project https://www.meilisearch.com/ seems to be picking up speed and is definetly on the test short list. It is a fresh codebase with siginficant open source contributions and certainly will attract new developers with Rust and a modern architecture.

Go eco system​

Obviously we are very interested in Go powered software and there are a few notable projects. ATM I do not see anything elastic or algolia like, that would be really mature.

bleve / bluge​

Marty Schoch seems to be the man when it comes down to text indexing libraries in written in Go and bluge seems to be THE library, that is solid and modern, when implementing text search in your Go application.

https://github.com/blevesearch/bleve https://github.com/blugelabs/bluge // next iteration of bleve

projects using bluge​

All bleeding edge afaik atm - but definitely good places to look at bluge usage

https://github.com/prabhatsharma/zinc https://github.com/mosuka/phalanx

Look ma I made a vector database​

Gotta take a look at this one - will report later

https://github.com/semi-technologies/weaviate

- + \ No newline at end of file diff --git a/blog/welcome-back-2021.html b/blog/welcome-back-2021.html index e7f77ab..5a5776a 100644 --- a/blog/welcome-back-2021.html +++ b/blog/welcome-back-2021.html @@ -7,13 +7,13 @@ Relaunching foomo.org | foomo project docs - +

Relaunching foomo.org

Jan Halfar

A few years ago we abandoned the previous version of https://www.foomo.org as we did not want to maintain the old wordpress installation and the project was only living in README.md in the repos living under https://www.github.com/foomo .

As things have grown over time we have decided to re-launch a website / cross project documentation.

So welcome back and enjoy the view to the past:

blast from the past

- + \ No newline at end of file diff --git a/docs/backend/go-by-example/map-racing.html b/docs/backend/go-by-example/map-racing.html index bc420da..3944c3e 100644 --- a/docs/backend/go-by-example/map-racing.html +++ b/docs/backend/go-by-example/map-racing.html @@ -7,13 +7,13 @@ map races | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/backend/go-by-example/panic-and-recover.html b/docs/backend/go-by-example/panic-and-recover.html index df5e5d5..b50f0b0 100644 --- a/docs/backend/go-by-example/panic-and-recover.html +++ b/docs/backend/go-by-example/panic-and-recover.html @@ -7,13 +7,13 @@ panic and recover | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/backend/go-by-example/ranging.html b/docs/backend/go-by-example/ranging.html index af43d8b..257305a 100644 --- a/docs/backend/go-by-example/ranging.html +++ b/docs/backend/go-by-example/ranging.html @@ -7,14 +7,14 @@ ranging and looping | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/backend/go-by-example/yaml-magic.html b/docs/backend/go-by-example/yaml-magic.html index 67bd020..1f91ff5 100644 --- a/docs/backend/go-by-example/yaml-magic.html +++ b/docs/backend/go-by-example/yaml-magic.html @@ -7,14 +7,14 @@ yaml magic | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/backend/gograpple.html b/docs/backend/gograpple.html index 59f0f68..c3b0c1f 100644 --- a/docs/backend/gograpple.html +++ b/docs/backend/gograpple.html @@ -7,13 +7,13 @@ Gograpple | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/backend/intro.html b/docs/backend/intro.html index 0df1d9b..126e03a 100644 --- a/docs/backend/intro.html +++ b/docs/backend/intro.html @@ -7,14 +7,14 @@ building backend services with Go and foomo | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/backend/rtfm.html b/docs/backend/rtfm.html index 39168a1..eca103b 100644 --- a/docs/backend/rtfm.html +++ b/docs/backend/rtfm.html @@ -7,13 +7,13 @@ External documentation resources | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/backend/setup.html b/docs/backend/setup.html index 57f564a..dd7f3af 100644 --- a/docs/backend/setup.html +++ b/docs/backend/setup.html @@ -7,13 +7,13 @@ setup your workspace | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/devops/bookmarks.html b/docs/devops/bookmarks.html index 04238a0..fcffb4a 100644 --- a/docs/devops/bookmarks.html +++ b/docs/devops/bookmarks.html @@ -7,13 +7,13 @@ Bookmarks | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/devops/intro.html b/docs/devops/intro.html index fa0fb5d..bb4d7b5 100644 --- a/docs/devops/intro.html +++ b/docs/devops/intro.html @@ -7,13 +7,13 @@ How we run applications in the cloud | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/devops/k8s.html b/docs/devops/k8s.html index 2d415fd..df0281a 100644 --- a/docs/devops/k8s.html +++ b/docs/devops/k8s.html @@ -7,13 +7,13 @@ k8s kubernetes | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/devops/kubernetes/spot-instance-node-pools.html b/docs/devops/kubernetes/spot-instance-node-pools.html index 89c17d5..eaf44ee 100644 --- a/docs/devops/kubernetes/spot-instance-node-pools.html +++ b/docs/devops/kubernetes/spot-instance-node-pools.html @@ -7,7 +7,7 @@ Spot Instance Node Pools | foomo project docs - + @@ -16,7 +16,7 @@ What could happen is that nodes that are hosting the applications start terminating, and our application becomes unresponsive until the application is re-located to another node. To avoid that situation, for the instances we need to configure pod disruption budget on our helm deployments.

apiVersion: policy/v1
kind: PodDisruptionBudget
metadata:
  name: application-name
spec:
  maxAvailable: 50%
  selector:
    matchLabels:
      app: application-name

For more details check out here

Setting Up Termination Handling​

Setting Up K8s Cron Shutdown Cleanup​

- + \ No newline at end of file diff --git a/docs/devops/monitoring/grafana.html b/docs/devops/monitoring/grafana.html index 280af96..069673d 100644 --- a/docs/devops/monitoring/grafana.html +++ b/docs/devops/monitoring/grafana.html @@ -7,13 +7,13 @@ Grafana | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/devops/monitoring/intro.html b/docs/devops/monitoring/intro.html index 60d191f..82bb604 100644 --- a/docs/devops/monitoring/intro.html +++ b/docs/devops/monitoring/intro.html @@ -7,13 +7,13 @@ Monitoring and Alerting | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/devops/monitoring/jaeger.html b/docs/devops/monitoring/jaeger.html index 9003b6e..192e85d 100644 --- a/docs/devops/monitoring/jaeger.html +++ b/docs/devops/monitoring/jaeger.html @@ -7,13 +7,13 @@ Jaeger | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/frontend/css.html b/docs/frontend/css.html index 46c4e87..f93d128 100644 --- a/docs/frontend/css.html +++ b/docs/frontend/css.html @@ -7,13 +7,13 @@ CSS | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/frontend/debugging_js.html b/docs/frontend/debugging_js.html index d10b175..906d63e 100644 --- a/docs/frontend/debugging_js.html +++ b/docs/frontend/debugging_js.html @@ -7,13 +7,13 @@ Debugging in JavaScript | foomo project docs - +

Debugging in JavaScript

Debugging experience is very important because it can save you hours of depressing search for a bug.

console logging​

Probably 95% of devs nowadays still use console.log since it's the most convenient way of outputting something. There are also some nicer ways to output something, especially when having an array of object. In that case it's much nicer to use console.table(array) because it will create a nice table with all fields.

Sometimes a debugger in the browser won't create a breakpoint like you want it or you can't find a source file where you would want. A nice trick is to add a debugger keyword in your code which will instantly stop executing script on that place (but only if you have devtools open).

Bisecting​

When you can't find what causes an error, a very common approach is doing bisection. This is simply removing half of the code and see if it still works or not. If it works, then the bug is in the removed code, otherwise start removing other half in existing code.

Chrome/Firefox devtools​

Today's browsers have really good devtools and we can't imagine developing without them. And they all nice of helper tricks that ease our development and especially debugging.

... TODO: @themre

- + \ No newline at end of file diff --git a/docs/frontend/intro.html b/docs/frontend/intro.html index 164d5fe..e92298f 100644 --- a/docs/frontend/intro.html +++ b/docs/frontend/intro.html @@ -7,13 +7,13 @@ Frontend Guide | foomo project docs - +

Frontend Guide

In this section you will find a guide on how to develop frontends with the foomo stack. Please also see the general guide.

Let me share a few thoughts on frontend development from our journey @bestbytes the company behind https://www.foomo.org .

Web development has been a wild ride since the beginning of the www in the mid 1990s. Today we take it as granted, that the default way to build applications is with web technologies.

Not too long ago this seemed absurd, since browsers were meant to share scientific research papers and therefore were extremely limited in their capabilities.

It was the era of experimentation, that turned the web into the application runtime, which it is today. Plugins like Macromedias flash inspired the rich APIs we can use today, when building web applications.

A little history​

The current stack is the result of a more than 20 year journey.

Last millenium​

The open source eco system was in its infancy, there was no github (is that really open source as it should be 🤔), there was not even git, there were no real web frameworks and agile methodologies were an exotic nerd topic.

Browsers would sometimes render things in a recognisable way and a table was the way to render your layout. Reliable interactivity could only result from a server round trip and calling JavaScript had a good chance to crash your browser.

Security in browsers was a complete nightmare, it was a time, when one tab could access anothers tabs dom 🤯

Early 2000s​

As Microsoft had won the browser wars, we were stuck with IE 6 and like others we were building web applications with the limited resources we had. JavaScript frameworks were still

The plugin era / FLASH​

As browsers were slow, buggy and inconsistent FLASH presented this amazing way to build highly interactive websites. It was the time of loaders, which people accepted, because amazing experiences awaited them: animated vector graphics (artists went wild ...), games, the first videos, client server communications, sockets and a canvas API.

Also ActionScript especially AS3 felt so superior to JavaScript at the time.

Flex​

Flex used the capabilities of the flash player to provide a fantastic developer experience to build RIAs (rich internet applications). The resulting productivity, application performance and features were unparalled in the JavaScript eco system until long after the demise of the flash player.

After "thoughts on flash"​

After the release of the iPhone and the beginning of the walled garden era flash was one of the initial victims. Just for the record, I definitely prefer an independent eco system, which the web is at least to a certain extent, but it certainly was not noble motives, that were driving Apple when pushing for HTML5 in their thoughts on flash.

HTML5​

At its arrival HTML5 could not deliver on the many promises, that were made around it. Browser compatibilty was a nightmare, JavaScript performance was poor, the eco system was in its infancy.

As we left the flash eco system we stopped by RequireJS and were using BACKBONE.JS as we felt extremely burnt by Adobe, after they had dropped their whole eco system like a hot potatoe once Apple had declared the end of flash.

TypeScript and the wild framework years​

Despite the fact, that we were very sceptic about trusting large vendors, we adopted TypeScript right after it was initially released and we have remained happy users of it until the present day.

The early years of the Node.js community were extremely wild, there was jokes about the number of frameworks released per day. The number of languages that compiled to JavaScript exploded and it just seemed impossible to keep up with the changing environment.

2020s​

As we wake up today as frontend developers, we do not expect, that we will keep on doing things as we do them today until the end of our careers, but we at least see a chance, that the code base of a project will not be outdated with delivery of a MVP.

- + \ No newline at end of file diff --git a/docs/frontend/performance.html b/docs/frontend/performance.html index 0f14f29..ef53230 100644 --- a/docs/frontend/performance.html +++ b/docs/frontend/performance.html @@ -7,14 +7,14 @@ Performance | foomo project docs - +
-

Performance

JS​

JS is nowadays extremely fast and yet we have many performance issues. Here you can find few common mistakes that occur in JS that can decrease performance.

Extensive use of .map, .filter​

Let's say you have a large list of objects and you would like to filter them and transform them in some form. Usually we do this:

const largeArray = [ .... ]
largeArray.map(obj => transformObj(obj)).filter(omitBadObject)

In the above case we first loop through whole set, transform it and then filter things out. Not only does this goes through all the items twice, but it also first time goes through all the items and then filters them. -One optimization would be to first filter them and then transform them, but ideally we should just use a normal for loop or forEach where you go through items only once.

const finalArray = []
largeArray.forEach(obj => {
  if (omitBadObject(obj)) {
    finalArray.push(transformObj(obj))
  }
})

This code will skip another loop of items.

- +

Performance

JS​

JS is nowadays extremely fast and yet we have many performance issues. Here you can find few common mistakes that occur in JS that can decrease performance.

Extensive use of .map, .filter​

Let's say you have a large list of objects and you would like to filter them and transform them in some form. Usually we do this:

const largeArray = [ .... ]
largeArray.map(obj => transformObj(obj)).filter(omitBadObject)

In the above case we first loop through whole set, transform it and then filter things out. Not only does this goes through all the items twice, but it also first time goes through all the items and then filters them. +One optimization would be to first filter them and then transform them, but ideally we should just use a normal for loop or forEach where you go through items only once.

const finalArray = []
largeArray.forEach(obj => {
  if (omitBadObject(obj)) {
    finalArray.push(transformObj(obj))
  }
})

This code will skip another loop of items.

+ \ No newline at end of file diff --git a/docs/frontend/pitfalls.html b/docs/frontend/pitfalls.html index ef2122b..fc87708 100644 --- a/docs/frontend/pitfalls.html +++ b/docs/frontend/pitfalls.html @@ -7,13 +7,13 @@ Pitfalls | foomo project docs - +

Pitfalls

This section is very important to avoid dangerous bugs in your code. Of course each of our languages or libraries in our stack has many advantages, but they came with dangerous pitfalls.

JavaScript​

This section is probably too small to write all the dangerous things in JavaScript, but we hope developers won't do some crazy things like concatenating numbers and strings and such sort of forbidden things will be catched by TS.

But nevertheless, very often we run into issues that are hard to debug.

Mutation​

Mutation in JS is a very common problem and thus leads to dangerous bugs.

A very common mutation occurs in spreading. So if you spread an object and it's deeply nested, you need to know that this will only create a shallow copy. So that means that deeply nested fields will still be referenced by the original object. If you need to do a immutable instance we advice in using either klona or immer.

When doing sorting on the array like [1,2,3].sort(...), this does mutate the original array. Devs are used to create new array with .map or .filter, but this here is not the case. So be careful with that. Also do not forget that objects in the array will have a reference to objects in the original array and thus they also needs to be cloned.

Have in mind that doing immutability costs and sometimes it's better to mutate, but also know that in React if you don't create a new reference, setting state won't react. So always have in mind pros and cons of doing mutation.

typeof​

typeof is used for checking type of some variables. So when checking if a variable is an array of an object, we try to use typeof. But we should be very careful since typeof works nicely on simple primitive types like number, string, boolean.

When you try to check whether a variable is an object or an array, you try to use typeof. But both are object. So in this case we should use Array.isArray(variable). But be careful, because also null is an object! If you want to deep dive into this, read here.

Numbers are also fun when it comes to NaN. If you check isNaN with typeof, it's actually a number! So for this use-case you need to use Number.isNaN(myNum).

- + \ No newline at end of file diff --git a/docs/frontend/rtfm.html b/docs/frontend/rtfm.html index 49a364d..d015db3 100644 --- a/docs/frontend/rtfm.html +++ b/docs/frontend/rtfm.html @@ -7,13 +7,13 @@ External documentation resources | foomo project docs - +

External documentation resources

Runtime / browser​

In general the Mozilla Developer Network - MDN is a great resource, if you want to know, what your browser is capable of.

Once you found out, how great an API is, the question to answer will be "can I use" feature X. https://caniuse.com/ is a great resource to find the answers, when trying to understand, if a browser API / feature is ready to use for your audience.

JavaScript

JavaScript historically has a very bad reputation. Please enjoy the following classic piece of infotainment: https://www.destroyallsoftware.com/talks/wat

As JavaScript has been massively iterated on, the runtimes hav ecome crazy fast and the language keeps on evolving.

The (mostly functional) subset of the language, that is being used in modern JavaScript / TypeScript projects to is highly expressive and reads well.

Please take the time and learn about

  • functional programming
  • variable scope
  • modern JavaScript syntax
    • arrow functions
    • new keywords
    • spreading
    • ...
  • promises

CSS

  • CSS block model
  • flex box

Browser APIs

  • canvas
  • fetch
  • local storage
  • websockets
  • sse server side events
  • built in types

TypeScript​

- + \ No newline at end of file diff --git a/docs/frontend/setup.html b/docs/frontend/setup.html index 5b34df9..c705410 100644 --- a/docs/frontend/setup.html +++ b/docs/frontend/setup.html @@ -7,13 +7,13 @@ Setup | foomo project docs - +

Frontend setup

How to setup your machine for frontend development

general topics​

setting up your IDE​

  • vscode

frontend specific

  • yarn / npm / package.json
  • nvm
  • browser extensions
    • preact
    • redux
    • (google analytics)

debugging with emulators / devices​

  • xcode
  • android studio

Install software​

Mac​

First of all install brew from https://brew.sh

brew install nvm
brew cask install iterm2

Linux​

Windows​

Install Linux ;)

- + \ No newline at end of file diff --git a/docs/frontend/stack.html b/docs/frontend/stack.html index 156f2c4..5c2c084 100644 --- a/docs/frontend/stack.html +++ b/docs/frontend/stack.html @@ -7,13 +7,13 @@ Stack | foomo project docs - +

Frontend Stack

Our frontend stack is permanently changing as the underlying eco system does. We are trying to adopt technologies at the "Slope of Enlightenment" in the hype cycle.

Former iterations of our stack were MVC or MVVM frontend frameworks. Since the arrival of React and state mangement libraries like Redux and Zustand we have been building reactive applications.

Reactive frontends are fun to develop and they scale.

TypeScript​

Is our language of choice to build frontends for web applications.

We have adopted TypeScript very early, right after its initial public release in 2012. Here is a list of motives:

  • it is a superset JavaScript
  • it does not try to replace JavaScript like many other languages, which compile to JavaScript, it tries to complement and improve it, while staying compatible
  • good type system
  • great tooling

While it seemed to be crazy to trust Microsoft as a friendly open source company, we have not been disappointed so far.

React / Preact​

Declarative components and views, fast to develop and fast at runtime.

gotsrpc​

Since we are building services in Go and not with Node.js we have created a light weight RPC framework to integrate TypeScript with Go.

When creating TS definitions on the Go side we follow camel case convention of naming fields e.g. lastDateModified instead of LastDateModified.

- + \ No newline at end of file diff --git a/docs/frontend/typescript/objects.html b/docs/frontend/typescript/objects.html index a267ea9..1201454 100644 --- a/docs/frontend/typescript/objects.html +++ b/docs/frontend/typescript/objects.html @@ -7,7 +7,7 @@ Object declaration syntax in TypeScript | foomo project docs - + @@ -15,7 +15,7 @@
- + \ No newline at end of file diff --git a/docs/frontend/typescript/spreading.html b/docs/frontend/typescript/spreading.html index 03e6ab0..6e93889 100644 --- a/docs/frontend/typescript/spreading.html +++ b/docs/frontend/typescript/spreading.html @@ -7,7 +7,7 @@ Spreading | foomo project docs - + @@ -167,7 +167,7 @@ If you have a deeply nested object or array, nested entities will still hold a r } }
Result
Loading...
- + \ No newline at end of file diff --git a/docs/general/essentials.html b/docs/general/essentials.html index 1a72949..2575a55 100644 --- a/docs/general/essentials.html +++ b/docs/general/essentials.html @@ -7,13 +7,13 @@ (Random) essentials | foomo project docs - +

(Random) essentials

Markdown​

Learn markdown(this is a markdown document 🤓)

Vim​

Vim is everywhere so no matter if you ssh into a place or try to edit a file in a container, you are going to need it.

Here is a super minimal cheat sheet:

# edit/create a file
vim path/file

Now the shortcuts:

shortcutfunctionnote
:h<enter>helpa bit overwhelming
:q<enter>quitimmediate instinct after looking at help 🤣
:q!<enter>quit ignoring changes! means, that you actually mean it and can be combined with a lot of commands
:w<enter>write / save file
:x<enter> save and exit
:x!<enter> force save and exit
11Ggo to line 11
$ go to last char in line
dddelete line
x delete char
i enter insert modethat is where you can actually edit stuff - press escape to exit insert mode
<esc>exit insert mode
<ctrl>vvisual blockthen use cursors to edit selection
xcut
ppaste

ssh​

allows you to remotely and securely log into computers - man ssh should be available on any shell.

digital ocean has a decent intro into ssh https://www.digitalocean.com/community/tutorials/ssh-essentials-working-with-ssh-servers-clients-and-keys

There is a lot of other tutorials - your typical use cases will be:

  • logging into other computers
  • executing commands on those computers
  • tunneling network connections

Once ssh is set up correctly scp, git and a lot of other programs, that rely on ssh under the covers are fun to use too.

git​

https://git-scm.com/doc

github​

Yes despite the fact, that m$ bought them, we use them and you have to enable 2fa

Some data formats​

yaml​

https://yaml.org/ some love it for good a reason, some hate it for another good reason, but atm there is just no way around it.

json​

https://www.json.org/json-en.html similar love and hate situation like with yaml - also no way out.

CSV​

If you think parsing or serializing CSV is trivial, you have been warned.

https://datatracker.ietf.org/doc/html/rfc4180

protocol buffers​

Fast, compact not human readable - not necessary for most use cases

https://developers.google.com/protocol-buffers

xml​

https://www.w3.org/TR/REC-xml/ only little love here

- + \ No newline at end of file diff --git a/docs/general/intro.html b/docs/general/intro.html index 9d36799..d4fb3be 100644 --- a/docs/general/intro.html +++ b/docs/general/intro.html @@ -7,13 +7,13 @@ General guide | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/general/package-managers.html b/docs/general/package-managers.html index 7617907..a020fee 100644 --- a/docs/general/package-managers.html +++ b/docs/general/package-managers.html @@ -7,13 +7,13 @@ Package managers | foomo project docs - +

Package managers

Whenever you can, do not manage software on your computer manually ...

  • comfort
  • versions
  • security

macOS​

On the mac https://brew.sh/ has become the de facto standard - we use it to distribute binaries of some of our open source projects as well.

Windows​

...

- + \ No newline at end of file diff --git a/docs/general/security.html b/docs/general/security.html index 92e3b12..0acd7c1 100644 --- a/docs/general/security.html +++ b/docs/general/security.html @@ -7,13 +7,13 @@ Security | foomo project docs - +

Security

TODO: @dreadl0ck knock yourself out

OS / Application setup​

  • disable telemetry whereever possible

Keep your data safe​

  • encrypt your file system to make sure so that if your computer gets stolen at least your data remain secure
  • make sure to have multiple backups in different places i.e. one backup disk at home and one in the office
- + \ No newline at end of file diff --git a/docs/general/setup/computer.html b/docs/general/setup/computer.html index 441fdb6..adf536d 100644 --- a/docs/general/setup/computer.html +++ b/docs/general/setup/computer.html @@ -7,13 +7,13 @@ Computer | foomo project docs - +

Setting up your computer

This is a general setup guide for your computer. Make sure that you setup your worpkplace properly too.

Privacy and security​

Follow the instructions on security when you setup and maintain your system.

Install software​

Mac​

First of all install brew from https://brew.sh

brew cask install iterm2

Linux​

Windows​

Install Linux ;)

- + \ No newline at end of file diff --git a/docs/general/setup/workplace.html b/docs/general/setup/workplace.html index d3eaa1e..04252c8 100644 --- a/docs/general/setup/workplace.html +++ b/docs/general/setup/workplace.html @@ -7,13 +7,13 @@ Workplace | foomo project docs - +

Setting up your workplace

No matter where you work, you need a proper workplace:

  • ergonomic office chair / desk combination
  • large high pixel density display
  • ergonomic input devices
  • good lighting
  • correct position in the room

Make sure that you take the time to set up your workplace well, your health depends upon it.

- + \ No newline at end of file diff --git a/docs/general/utilities/k9s.html b/docs/general/utilities/k9s.html index f1e5108..c78eac8 100644 --- a/docs/general/utilities/k9s.html +++ b/docs/general/utilities/k9s.html @@ -7,13 +7,13 @@ k9s | foomo project docs - +

k9s

Makes your life with k8s so much better. Here are the typical use cases.

inspecting k8s​

restarting pods​

editing resources​

- + \ No newline at end of file diff --git a/docs/general/work/general.html b/docs/general/work/general.html index 4372a12..554deb7 100644 --- a/docs/general/work/general.html +++ b/docs/general/work/general.html @@ -7,13 +7,13 @@ Working as a software developer | foomo project docs - +

Working as a software developer

Working as a software developer in a sustainable way is challenging - here are a few observations of healthy habits:

  • do not work too much
  • physical exercise is essential
  • clearly separate between working and not working
  • reflect and iterate on your working habits
- + \ No newline at end of file diff --git a/docs/general/work/remote-work.html b/docs/general/work/remote-work.html index 6b26ad5..7531d68 100644 --- a/docs/general/work/remote-work.html +++ b/docs/general/work/remote-work.html @@ -7,13 +7,13 @@ Working remotely | foomo project docs - +

Working remotely

Especially since the beginning of the corona pandemy working remotely has become a very important topic. The foomo team has extensive experience working remotely as we are a distributed team.

Disclaimer: we are almost exclusively working in one timezone.

Requirements​

  • fast and reliable internet connection
  • a proper workplace

The good parts​

  • no commute
  • less distractions from team members

The bad parts​

  • harder to separate between work and your private life
  • less informal communication with teammates
  • less human interaction

When working from home​

  • make sure, that you have a routine, that still takes you to work
    • fixed working hours
    • "go to work" and "leave work" even if you do not leave your home
    • if possible use a room, that is for work only
    • have clear rules for your family / roomates, when at work
  • when communication with teammates use video calls
  • take time for your teammates and have a virtual coffee break with someone at least once a day
  • invest half the time, that you save by not communiting to exercise
- + \ No newline at end of file diff --git a/docs/project-management/intro.html b/docs/project-management/intro.html index 53aee6d..eee0d51 100644 --- a/docs/project-management/intro.html +++ b/docs/project-management/intro.html @@ -7,13 +7,13 @@ Project Managament | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/projects/architecture.html b/docs/projects/architecture.html index 3de0d40..74993b8 100644 --- a/docs/projects/architecture.html +++ b/docs/projects/architecture.html @@ -7,13 +7,13 @@ Architecture overview | foomo project docs - +

Architecture overview

backend services​

When it comes to writing backend services we have decided for Go https://go.dev - let me list the main reasons why - Go is:

  • simple and fun
  • fast when compiling
  • fast at runtime
  • friendly to your machines
  • friendly to you as a programmer
  • equipped with a top notch runtime
  • extremely well balanced in its design as a language, that is highly consumable for humans and machines
  • not about the features it has
  • about what has been left out
  • easy to read
  • sustainable

Foomo projects supporting development with Go​

  • keel - opinionated way to run services
  • gotsrpc - rpc framework / code generator
  • gograpple - human friendly way to debug go programs running in k8s
  • webgrapple - a development proxy

Frontends​

Foomo projects supporting development with Next.js​

- + \ No newline at end of file diff --git a/docs/projects/cms/contentful.html b/docs/projects/cms/contentful.html index a32a6cc..e4ed53d 100644 --- a/docs/projects/cms/contentful.html +++ b/docs/projects/cms/contentful.html @@ -7,13 +7,13 @@ contentful | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/projects/cms/contentserver.html b/docs/projects/cms/contentserver.html index f3b4b54..13feb4d 100644 --- a/docs/projects/cms/contentserver.html +++ b/docs/projects/cms/contentserver.html @@ -7,13 +7,13 @@ contentserver | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/projects/cms/intro.html b/docs/projects/cms/intro.html index 3cca062..a6bf085 100644 --- a/docs/projects/cms/intro.html +++ b/docs/projects/cms/intro.html @@ -7,13 +7,13 @@ Intro | foomo project docs - +

Intro

The foomo team has extensive experience with a wide range of CMS systems. Our long journey in the field has brought us very close to the https://jamstack.org . We almost exclusively work with https://app.contentful.com/ but we are watching others like https://www.stripe.com/ very closely.

Expectations and challenges​

  • application developers want an environment, that ensures maximum productivity, they do not think of semantic structures, they think of routes
  • customers expect maximum control and flexibility when working with content and do not distinguish between content and applications

The need for dynamic rendering​

If you can - render static content and distribute it with a CDN.

There are use cases though, where static site generation does not work like

  • highly personalized content
  • mixing content with entities from other systems, that have a different life cycle, like products

Application routes vs semantic URL structures​

Bridging the conceptual gap between sematic content and applications.

Content especially when created with a focus on SEO comes as a semantic graph. This typically conflicts with how application developers see the world.

e-commerce as an example​

Let us take a look at a real world example:

application route / ingressapp developers viewSEO URL requirement
/content:id/content/1/
/content/2/mens
/category:id/category/1/mens/shirts
/category/2/mens/shirts/business
/product:id/product/1/mens-shirt-awesome-blue-medium
/store:id/store/1/mens/stores/london-perfect-shirts
/store/2/kids/stores/lego-paradise

our approach​

contentserver allows you to resolve URIs to mime types, which can be handled by applications.

Let us return to our ecommerce example.

model content​

mime typecms entityapplication eg k8s service
application/x-pagepagehttps://frontend_service_page
application/x-categorycategoryhttps://frontend_service_category
application/x-storestorehttps://frontend_service_store

export contentent to contentserver​

contentserver allows you to export your content tree as json

resolving URIs​

Use standard application routing whereever possible, since it is the most efficient option.

Once all standard URI resolution fails, query contentserver and it will return the resolved node


Now you have the mime-type and you know which application can handle it.

- + \ No newline at end of file diff --git a/docs/projects/gotsrpc.html b/docs/projects/gotsrpc.html index 16b0820..578bfb2 100644 --- a/docs/projects/gotsrpc.html +++ b/docs/projects/gotsrpc.html @@ -7,13 +7,13 @@ gotsrpc | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/projects/intro.html b/docs/projects/intro.html index cb7f3c7..40badb8 100644 --- a/docs/projects/intro.html +++ b/docs/projects/intro.html @@ -7,13 +7,13 @@ foomo project overview | foomo project docs - +

foomo project overview

"Stuff we wrote, because nobody else wanted to"

All foomo projects are available here https://github.com/foomo also see architecture

We are using the best industry standards and only fill in our own bits, when necessary.

The foomo project maintains libraries, utilities and daemons, which power most projects at https://www.bestbytes.com

Projects running on the foomo stack typically are

  • relatively large with hundreds of thousands of lines of code
  • composed of dozens of microservices
  • written / maintained by dozens of contributors
  • using Go on the server side
  • using Next.js / TypeScript on the client side
  • running on k8s
  • deeply integrated with a headless CMS
  • built with a project specific frontend component set

Everything is loosely coupled, since we know, that the only constant is change.

- + \ No newline at end of file diff --git a/docs/projects/libraries/keel.html b/docs/projects/libraries/keel.html index d84c0ea..226f959 100644 --- a/docs/projects/libraries/keel.html +++ b/docs/projects/libraries/keel.html @@ -7,13 +7,13 @@ keel | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/projects/pagespeed-exporter.html b/docs/projects/pagespeed-exporter.html index a57482c..944d47d 100644 --- a/docs/projects/pagespeed-exporter.html +++ b/docs/projects/pagespeed-exporter.html @@ -7,13 +7,13 @@ pagespeed exporter | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/projects/site-reliability.html b/docs/projects/site-reliability.html index 106368e..431a6dd 100644 --- a/docs/projects/site-reliability.html +++ b/docs/projects/site-reliability.html @@ -7,13 +7,13 @@ Site reliability | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/projects/utilities/gograpple.html b/docs/projects/utilities/gograpple.html index 1e990b5..b1e0df6 100644 --- a/docs/projects/utilities/gograpple.html +++ b/docs/projects/utilities/gograpple.html @@ -7,13 +7,13 @@ gograpple | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/projects/webgrapple.html b/docs/projects/webgrapple.html index b46b5c2..a23848b 100644 --- a/docs/projects/webgrapple.html +++ b/docs/projects/webgrapple.html @@ -7,13 +7,13 @@ webgrapple | foomo project docs - +
- + \ No newline at end of file diff --git a/docs/tags.html b/docs/tags.html index 652f89d..13c0106 100644 --- a/docs/tags.html +++ b/docs/tags.html @@ -7,13 +7,13 @@ Tags | foomo project docs - +

Tags

- + \ No newline at end of file diff --git a/docs/tags/frontend.html b/docs/tags/frontend.html index e3d9c80..8404591 100644 --- a/docs/tags/frontend.html +++ b/docs/tags/frontend.html @@ -7,13 +7,13 @@ One doc tagged with "frontend" | foomo project docs - +

One doc tagged with "frontend"

View All Tags

Stack

Our frontend stack is permanently changing as the underlying eco system does. We are trying to adopt technologies at the "Slope of Enlightenment" in the hype cycle.

- + \ No newline at end of file diff --git a/docs/tags/overview.html b/docs/tags/overview.html index 2f45f4f..4717d66 100644 --- a/docs/tags/overview.html +++ b/docs/tags/overview.html @@ -7,13 +7,13 @@ One doc tagged with "overview" | foomo project docs - +

One doc tagged with "overview"

View All Tags

Stack

Our frontend stack is permanently changing as the underlying eco system does. We are trying to adopt technologies at the "Slope of Enlightenment" in the hype cycle.

- + \ No newline at end of file diff --git a/etc/imprint.html b/etc/imprint.html index 2e646da..cce05f7 100644 --- a/etc/imprint.html +++ b/etc/imprint.html @@ -7,7 +7,7 @@ foomo project docs - + @@ -20,7 +20,7 @@ E-Mail: Haftung für Inhalte​

Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.

Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.

Quellenangaben: Disclaimer eRecht24 - https://www.e-recht24.de/muster-disclaimer.html

Website-Design, Texte, Grafiken und Layout Copyright © 1998 - today bestbytes. ALLE RECHTE VORBEHALTEN. Das Kopieren oder die Reproduktion der gesamten Website bzw. von Teilen dieser Website ist untersagt, es sei denn, bestbytes hat dem vorher schriftlich oder elektronisch zugestimmt. Alle Markenzeichen und Logos, die auf dieser Internetseite verwendet werden, sind urheberrechtlich geschützt.

- + \ No newline at end of file diff --git a/index.html b/index.html index b28856f..58cc781 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,13 @@ Hello from foomo project docs | foomo project docs - +

foomo project docs

Stuff we wrote, because nobody else wanted to


foomo is an open source project, that has been maintained by the bestbytes team since 2011. It provides a wide range of utilities, libraries and daemons, that help us to tackle challenging projects.

foomo can help, if you are

  • using Go to write services
  • building frontends with TypeScript and Next.js
  • running your software on k8s
  • looking for a solution to deeply integrate your frontends with a headless cms
If more than two points apply, it will actually help a LOT

General guides

no matter if frontend or backend - there is somtehing for everyone in here

get started

Frontend guides

Build frontends with TypeScript, Next.js, styled components, gotsrpc

go build a frontend

Backend guides

Write fast and reliable services in Go and run them in the cloud

build a server

Projects

Foomo projects - libraries, utilities, friendly daemons and more

explore

CMS

foomo has extensive support for headless CMS Systems

learn the patterns

Architecture

Show me the big picture - how does foomo integrate into the k8s and Next.js eco system

explore the diagrams

Awesome Software

a curated list of software we use in the cloud, on our desktops and our devices

show me the list

DevOps

our approach to run cloud native applications where they belong

take me to the cloud

Blog

random information about programming, our ecosystem and misc fun topics

read the blog
- + \ No newline at end of file diff --git a/search.html b/search.html index dd9dea5..570b8d0 100644 --- a/search.html +++ b/search.html @@ -7,13 +7,13 @@ Search the documentation | foomo project docs - +

Search the documentation

- + \ No newline at end of file