40thieves

Meet Mute

Script to globally mute Google Meet in a Chrome window (using Raycast script commands)

Installation

1. Ensure that chrome-cli is installed
2. (Technically optional) Create a new Raycast script command and copy/paste the source of the files below
3. (Optional) Configure a Raycast global hotkey for faster triggering

40thieves

Link to the coursework

https://github.com/CodeYourFuture/Module-HTML-CSS/tree/main/Cakes-Co

Why are we doing this?

This project is thinking about "mobile first" design. Developers build sites on computers/laptops, but most users are on phones. So we should make our designs work first on a phone, and then expand them for larger screens.

https://explodingtopics.com/blog/mobile-internet-traffic

40thieves

Title: Measuring performance

We would like to measure performance of our CM6-based editor. We are tracing an "input lag" issue and would like to know how widespread this is.

We think a useful metric would be to measure the time between the user's keystroke and that character appearing on screen, or some rough approximation of those events.

We have prototyped a few different ideas, like watching for DOM changes via a MutationObserver or patching dispatch but have not found a satisfying solution. In particular we have struggled to detect when a character has been rendered, as opposed to other DOM changes.

Are there any known solutions or approaches to measuring this kind of performance with CM6? I can share the ideas that we have prototyped if wanted.

40thieves

Title: Measuring performance

We would like to measure performance of our CM6-based editor, specifically we would like to measure the time between the user's keystroke and a character appearing on screen. We are tracing an "input lag" issue and would like to know how widespread this is.

I have put together a prototype (see this sandbox) which attempts to measure this using a keydown event and a MutationObserver on the view.contentDOM, attempting to use this as a somewhat crude proxy for screen updates.

Based on some flamegraphs I've taken, the measurement appears to roughly correspond with the timing of processing a keystroke:

40thieves

You must prepare for class by completing all the setup on this page. Come to class prepared.

Professional Accounts (2 hours)

Download and install the following software or register for the apps.

Click on the links to go to the registration pages. Keep your login details for all sites/apps consistent and always use your real name.

CYF recognises you may need to keep your birth name private. When we say real name, we mean the name you go by. It does not have to match your birth certificate or any other legal document. It has to be consistent and professional.

40thieves

[{"args":{"name":"swapper"},"cat":"__metadata","name":"thread_name","ph":"M","pid":0,"tid":0,"ts":0},
{"args":{"name":"CrBrowserMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1745,"tid":259,"ts":0},
{"args":{"name":"Compositor"},"cat":"__metadata","name":"thread_name","ph":"M","pid":61942,"tid":41731,"ts":0},
{"args":{"name":"ThreadPoolServiceThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":61942,"tid":11779,"ts":0},
{"args":{"name":"CrRendererMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":61942,"tid":259,"ts":0},
{"args":{"name":"Chrome_IOThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1745,"tid":29187,"ts":0},
{"args":{"name":"VizCompositorThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1770,"tid":36099,"ts":0},
{"args":{"name":"CrGpuMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1770,"tid":259,"ts":0},
{"args":{"name":"ThreadPoolBackgroundWorker"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1770,"tid":148

40thieves

The matchBrackets function within @codemirror/language is run via the bracketMatchingState StateField whenever the doc or selection changes.

The following flamegraph was generated using this basic sandbox, modified from the default sandbox to extend the doc to 2000 lines:

See no-throttling-export.json for the exported flamegraph.

As you

40thieves

[{"args":{"name":"swapper"},"cat":"__metadata","name":"thread_name","ph":"M","pid":0,"tid":0,"ts":0},
{"args":{"name":"CrBrowserMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1745,"tid":259,"ts":0},
{"args":{"name":"Compositor"},"cat":"__metadata","name":"thread_name","ph":"M","pid":46646,"tid":41219,"ts":0},
{"args":{"name":"ThreadPoolForegroundWorker"},"cat":"__metadata","name":"thread_name","ph":"M","pid":46646,"tid":83515,"ts":0},
{"args":{"name":"CrRendererMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":46646,"tid":259,"ts":0},
{"args":{"name":"Chrome_IOThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1745,"tid":29187,"ts":0},
{"args":{"name":"VizCompositorThread"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1770,"tid":36099,"ts":0},
{"args":{"name":"CrGpuMain"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1770,"tid":259,"ts":0},
{"args":{"name":"ThreadPoolBackgroundWorker"},"cat":"__metadata","name":"thread_name","ph":"M","pid":1770,"tid":

40thieves

let editor = document.querySelector('.cm-content')

let timer = null

let char = 'a'
let orig = char
let copy = null

function run() {
    if (copy == null || !copy.length) {

40thieves

LDN8 final project presentations

Tips

Introduction

• Don't spend time talking about the volunteers that helped with your project - the demo day is about you! Employers don't care about volunteers! (It's fine, the volunteers already know that you appreciate it!)
• It's a good idea to say what type of job that you're interested in - so if you'd like to be a backend dev, say so!

Presentation