start of css and performance topics

foomo/docs/frontend/css.md

@@ -0,0 +1,15 @@
+---
+sidebar_label: CSS
+sidebar_position: 2
+---
+# CSS
+
+## About
+
+![CSS Backend Dev](https://external-preview.redd.it/x3W_tPGBToPGjhcrWquMJiDxXFwsTX3yCeAqomZkjxY.png?auto=webp&s=c2fcff59adb0d468306e4fb6367fa387a455186e)
+
+Fun aside, CSS is hard. Besides knowing all strange and special use-cases, a frontend developer (and also designer) should be aware of constraints and feature that you can achieve with very little CSS and almost no JS.
+
+A list of valuable resources:
+- https://css-tricks.com/ 
+- https://ishadeed.com/article/defensive-css/ 

foomo/docs/frontend/performance.md

@@ -0,0 +1,29 @@
+---
+sidebar_label: Performance
+sidebar_position: 4
+---
+# 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.