Home / Cheat sheets / MAD2

MAD2 cheat sheet

Code patterns and facts collected automatically from the lessons. Print it, or read it the night before an exam or viva.

Week 1 - JavaScript basics: values, functions and the DOM

• typeof null -> "object"; typeof NaN -> "number"; Array.isArray(x)
• Falsy: false 0 -0 0n "" null undefined NaN
• "5" + 3 -> "53"; "5" - 3 -> 2; 1 + 2 + "3" -> "33"
• for (const v of arr) values; for (const k in obj) keys (strings)
• arr.reduce((acc, x) => acc + x, 0); arr.map(f); arr.filter(f)
• const { a, b: { c } } = obj; const [x, y] = arr; { ...obj, k: v } [...arr, v]
• JSON.stringify(obj) / JSON.parse(text)
• document.querySelector("#id"), el.addEventListener("click", fn), el.textContent

Week 2 - Advanced JavaScript: closures, promises and async/await

• const make = () => { let c = 0; return () => ++c; };
• f.call(obj, a), f.apply(obj, [a]), const g = f.bind(obj)
• class B extends A { constructor(x) { super(x); } }
• export const x = 1; export default fn; import fn, { x } from "./m.js";
• try { } catch (e) { } finally { }; a?.b, a ?? b
• Order: sync, microtasks (then, after await), tasks (setTimeout)
• Promise.all([..]), Promise.race([..]), Promise.allSettled([..])
• const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(obj) }); if (!res.ok) throw new Error(res.status); const data = await res.json();

Week 3 - The web frontend: SPAs, browser storage and tooling

• localStorage.setItem(k, v), getItem(k) (null if missing), removeItem(k), clear(); sessionStorage has the same API
• JSON.stringify(obj) before storing, JSON.parse(str) after reading
• Sizes: cookie about 4 KB; web storage about 5 MB per origin
• npm install, npm run serve (dev, hot reload), npm run build (to dist/)
• ^2.6.14 = same major, newer minor and patch allowed
• <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>; new Vue({ el: "#app", data: {} })
• navigator.serviceWorker.register("/sw.js"); manifest = name, icons, start_url, display
• <meta name="viewport" content="width=device-width, initial-scale=1">

Week 4 - Vue basics: instances, directives and reactivity

• CDN: <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
• Create: new Vue({ el: "#app", data: {...}, methods: {...}, computed: {...}, watch: {...} })
• :attr="x" is v-bind:attr; @click="f" is v-on:click; @submit.prevent, @click.stop, @click.once, @keyup.enter
• v-model.trim, v-model.number, v-model.lazy
• v-for="(item, i) in list", (value, key, i) in obj, n in 5; always :key
• :class="{ active: isOn }", :class="[a, { b: flag }]", :style="{ color: c }"
• Caveat fixes: Vue.set(obj, key, val), this.$set(arr, i, val), arr.splice(i, 1, val)
• this.$nextTick(fn), this.$refs.name
• Hook order: beforeCreate, created, beforeMount, mounted, (beforeUpdate, updated)*, beforeDestroy, destroyed
• Vue 3: createApp, Proxy reactivity, beforeUnmount and unmounted

Week 5 - Vue with APIs: fetch, axios and lifecycle

• const res = await fetch(url); if (!res.ok) throw new Error(res.status); const data = await res.json();
• fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(obj) })
• axios: const { data } = await axios.get(url), axios.post(url, obj), errors in err.response.status
• Flask: CORS(app) or CORS(app, resources={r"/api/*": {"origins": "http://localhost:8080"}})
• Return codes: return jsonify(obj), 201, return "", 204, return jsonify({"error": "..."}), 404
• Dev proxy (vue.config.js): devServer: { proxy: { "/api": { target: "http://localhost:5000", changeOrigin: true } } }
• Serve build: Flask(__name__, static_folder="dist", static_url_path="") and send_from_directory(app.static_folder, "index.html")
• Origin = scheme + host + port; path does not matter; subdomain differs
• Loading pattern: loading = true; try { ... } catch (e) { error = e.message } finally { loading = false }

Week 6 - Advanced Vue: components, props, events and Vue Router

• Global: Vue.component("my-comp", { props: [...], data() { return {...}; }, template: "..." })
• Local: components: { MyComp } (use <my-comp>)
• Prop: props: { n: { type: Number, required: true, default: 0 } }; pass :n="5"
• Event: child this.$emit("name", payload); parent @name="handler"
• v-model on component: prop value, event input
• Slots: <slot name="x">fallback</slot>; <template v-slot:x> (or #x); scoped <slot :item="i"> with v-slot:default="sp"
• Dynamic: <component :is="name">, <keep-alive>
• Router: new VueRouter({ mode: "history", routes: [...] }), { path: "/u/:id", name: "user", component: U, props: true, children: [...] }
• Read: this.$route.params.id, this.$route.query.q; go: this.$router.push({ name: "user", params: { id: 1 } }), .replace(), .go(-1)
• Guard: router.beforeEach((to, from, next) => { ... next() }); catch-all { path: "*", component: NotFound }
• Lazy: component: () => import("./views/About.vue")
• Vue CLI: vue create app, npm run serve, npm run build; Vue 3 router: createRouter, createWebHistory

Week 7 - State management with Vuex

• new Vuex.Store({ state, getters, mutations, actions, modules, strict })
• mutation (state, payload); getter (state, getters); action (context, payload) with { commit, dispatch, state, getters }
• component: this.$store.state.x, this.$store.getters.x, this.$store.commit('m', p), this.$store.dispatch('a', p)
• helpers: ...mapState(['x']), ...mapGetters(['g']) in computed; ...mapMutations(['m']), ...mapActions(['a']) in methods
• namespaced: commit('cart/add', x), getters['cart/count'], mapState('cart', ['items'])
• persistence: sessionStorage.setItem(k, v), getItem(k), removeItem(k); same API on localStorage; strings only
• Reactivity fix: Vue.set(obj, 'key', val), arr.splice(i, 1, val)

Week 8 - Token authentication, API design, CORS and cookies

• Send token: Authorization: Bearer <token> or Authentication-Token: <token>
• 200 OK, 201 Created, 204 No Content, 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 409 Conflict, 422 Unprocessable, 429 Too Many Requests, 500 Server Error
• PyJWT: jwt.encode(payload, key, algorithm="HS256"), jwt.decode(token, key, algorithms=["HS256"])
• Flask-JWT-Extended: create_access_token(identity=str(id)), @jwt_required(), get_jwt_identity(), get_jwt()
• Flask-CORS: CORS(app, origins=["http://localhost:8080"])
• Cookie: resp.set_cookie(name, val, httponly=True, secure=True, samesite="Strict", max_age=3600)
• fetch with cookies cross-origin: credentials: 'include', server needs Access-Control-Allow-Credentials: true
• Idempotent: GET, PUT, DELETE. Not idempotent: POST.

Week 9 - Asynchronous jobs: Redis and Celery

• celery = Celery("tasks", broker="redis://localhost:6379/0", backend="redis://localhost:6379/1")
• @celery.task / @celery.task(bind=True, max_retries=3); raise self.retry(exc=exc, countdown=30)
• t.delay(a, b) is t.apply_async(args=(a, b)); options countdown=, eta=, expires=
• res = AsyncResult(task_id, app=celery); res.state (PENDING, STARTED, RETRY, SUCCESS, FAILURE); res.get(timeout=5)
• celery -A app.celery worker -l info, celery -A app.celery beat -l info, celery -A app.celery flower
• crontab(hour=18, minute=0); crontab(minute='*/10'); crontab(hour=8, minute=0, day_of_month=1); crontab(hour=7, minute=30, day_of_week='mon')
• Redis: SET, GET, EXPIRE k 60, TTL k, INCR, LPUSH, RPUSH, LRANGE q 0 -1, SADD, SMEMBERS, HSET, HGETALL, ZADD, ZRANGE; redis-cli ping gives PONG
• Windows: docker run -p 6379:6379 redis or Redis inside WSL

Week 10 - Messaging: webhooks, server-sent events and email

• Webhook send: requests.post(URL, json={"text": "hi"}, timeout=5)
• Signature: hmac.new(SECRET, body, hashlib.sha256).hexdigest() and hmac.compare_digest(a, b)
• SSE response: Response(gen(), mimetype="text/event-stream"); frame = "data: text\n\n"
• Browser: new EventSource(url), es.onmessage = e => ..., es.close()
• Redis pub/sub: r.publish("ch", msg), p = r.pubsub(); p.subscribe("ch")
• Flask-Mail: Message(subject, recipients=[...], body=..., html=...), mail.send(msg)
• MailHog: SMTP localhost:1025, inbox http://localhost:8025
• Beat: crontab(hour=18, minute=0); monthly crontab(day_of_month=1, hour=8, minute=0)
• CSV download header: Content-Disposition: attachment; filename=export.csv
• Next: week 11, performance; week 12, the project; viva: MAD2 viva

Week 11 - Performance: measuring and caching

• ab -n 100 -c 10 URL (requests, concurrency)
• Hit ratio = hits / (hits + misses); throughput = requests / seconds
• Cache-Control: max-age=60, no-store, no-cache, public, private; ETag plus If-None-Match gives 304
• Config: CACHE_TYPE="RedisCache", CACHE_REDIS_URL="redis://localhost:6379/1", CACHE_DEFAULT_TIMEOUT=300
• @cache.cached(timeout=60); @cache.cached(timeout=60, key_prefix="k"); @cache.memoize(timeout=60)
• cache.delete("key"), cache.delete_memoized(fn, *args), cache.clear()
• N+1 fix: select(Author).options(selectinload(Author.books))
• Index: db.Column(db.Integer, index=True)
• Pagination: db.paginate(select(Book).order_by(Book.id), page=2, per_page=20)
• Lazy route: component: () => import("./views/X.vue")
• Next: week 12, the project; earlier: week 10

Week 12 - The project: putting it all together

• Header: Authorization: Bearer <token>; 401 = no or bad token, 403 = not allowed, 409 = conflict, 202 = accepted for background work
• Flask: create_access_token(identity=..., additional_claims={"role": ...}), @jwt_required(), get_jwt()
• Vue router guard: router.beforeEach((to, from, next) => { ... next("/login") })
• Vuex: state, mutations (sync), actions (async), commit, dispatch
• CORS: CORS(app, resources={r"/api/*": {"origins": ["http://localhost:8080"]}})
• Beat: crontab(hour=18, minute=0), crontab(day_of_month=1, hour=8, minute=0)
• Celery on Windows: celery -A app.celery worker -l info -P solo; beat: celery -A app.celery beat -l info
• MailHog: SMTP 1025, inbox http://localhost:8025
• Run order: Redis, MailHog, Flask, worker, beat, Vue
• pip freeze > requirements.txt; keep secrets in .env, never in Git
• Related: week 10, week 11, project viva, MAD2 viva