From 5dba91a5edbe07f928f810129cf5f9e038d6582d Mon Sep 17 00:00:00 2001
From: Marko Trebizan <mtrebizan@gmail.com>
Date: Thu, 13 Jan 2022 09:21:47 +0100
Subject: [PATCH] start of css and performance topics

---
 foomo/docs/frontend/css.md         | 15 +++++++++++++++
 foomo/docs/frontend/performance.md | 29 +++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 foomo/docs/frontend/css.md
 create mode 100644 foomo/docs/frontend/performance.md

diff --git a/foomo/docs/frontend/css.md b/foomo/docs/frontend/css.md
new file mode 100644
index 0000000..bb971ff
--- /dev/null
+++ b/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/ 
\ No newline at end of file
diff --git a/foomo/docs/frontend/performance.md b/foomo/docs/frontend/performance.md
new file mode 100644
index 0000000..9f80349
--- /dev/null
+++ b/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.
\ No newline at end of file