rauschma

Using server-sent events

Why and how?

• Documentation: https://web.dev/articles/eventsource-basics
• Use case: broadcasting data from server to browsers
• Benefits:
  • Easy to understand and implement (only a few lines of code)
  • No library is needed
• Can use same HTTP(S) authentication as elsewhere in the app (which can’t be done with websockets)

rauschma

Cheat sheet: JavaScript Array methods

Deriving a new Array from an existing Array:

['■','●','▲'].slice(1, 3)          ⟼ ['●','▲']
['■','●','■'].filter(x => x==='■') ⟼ ['■','■']
    ['▲','●'].map(x => x+x)        ⟼ ['▲▲','●●']
    ['▲','●'].flatMap(x => [x,x])  ⟼ ['▲','▲','●','●']

rauschma

/**
 * Returns the global object.
 * Works even inside ES6 modules.
 */
function getGlobalObject() {
    // Workers don’t have `window`, only `self`
    if (typeof self !== 'undefined') {
        return self;
    }
    if (typeof global !== 'undefined') {

rauschma

// No imports, those are more work, especially for plain browser.
// However, as soon as you have imports, you should switch to AMD on browsers.
// Related: http://www.2ality.com/2011/11/module-gap.html

({ define:
    typeof define === "function" ?
        define
    : typeof module !== "undefined" ?
        function(F) { module.exports = F() }
    : function(F) { this.defClass = F() }.bind(this)

rauschma

// Related: UMD, a project cataloging UMD patterns https://github.com/umdjs/umd

// Universal module definition: requires either an AMD loader or Node.js
({ define: typeof define === 'function'
    ? define
    : function (names, body) {
          module.exports = body.apply(null, names.map(require));
      }
}).
define(["foo", "bar"], function (foo, bar) {

rauschma

LaTeX: preventing text from overflowing into margins

There are multiple approaches one could take.

Explicit breaks inside \texttt{}

• Insert \allowbreak yourself.
• Pick a rare Unicode character for people to insert explicitly, replace it with \allowbreak yourself.
• Let LaTeX replace “breakable” characters C with C\allowbreak: https://tex.stackexchange.com/questions/299/how-to-get-long-texttt-sections-to-break/247335#247335
• Insert soft hyphens via \- (drawback: there will be hyphens at the end of the line)

rauschma

Strings

String.prototype.*

None of the string methods modify this – they always return fresh strings.

• charAt(pos: number): string ^ES1

  Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

rauschma

Cheat sheet: Arrays

JavaScript Arrays are a very flexible data structure and used as lists, stacks, queues, tuples (e.g. pairs), etc. Some

Using Arrays

Creating Arrays, reading and writing elements:

rauschma

function curry2(func) {
    return function (...args) {
        if (args.length < 2) {
            return func.bind(this, ...args);
        }
        return func.apply(this, args);
    };    
}

rauschma

const primaryColumn = document.querySelector('div[data-testid="primaryColumn"]');
document.body.innerHTML = '';
document.body.append(primaryColumn);

// Per-tweet controls
for (const ele of document.querySelectorAll('div[role="group"]')) {
  ele.remove();
}

// Reply widget