mliq

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

mliq

Understand what web developers can and can't animate

Web developers can add a lot of polish to a digital product with subtle animations and transitions. But unless you're a front-end developer yourself, it may be hard to tell which animations can be built by developers and which require an actual animator.

If you just want examples, skip here

Note to developers: You can see the source CSS for these animations by clicking on them, which opens them in a new tab as an SVG, and then "view source". I embedded these in SVGs as a hacky way of being able to include working code examples in this Gist.

---

mliq

Rules for good testing

Look at the following image...

...it shows an object being tested.

You can't see inside the object. All you can do is send it messages. This is an important point to make because we should be "testing the interface, and NOT the implementation" - doing so will allow us to change the implementation without causing our tests to break.

mliq

# Alias to convert a stereo recording to mono
#
# $1 - The input filename
function qtmono {
        basename=$(basename "$1")
        filename="${basename%.*}"
        extension="${basename##*.}"

        ffmpeg -i $1 -codec:v copy -af pan="mono: c0=FL" $filename-mono.$extension
}

mliq

// One of my new favorite React Hook patternms is to create handler
// functions for a custom hook using `React.useMemo` instead of
// `React.useCallback`, like so:

function useBool(initialState = false) {
  const [state, setState] = React.useState(initialState)
  
  // Instead of individual React.useCallbacks gathered into an object
  // Let's memoize the whole object. Then, we can destructure the
  // methods we need in our consuming component.

mliq

id.cifraclub.com.br {
    log stdout
    # Mkcert - https://github.com/FiloSottile/mkcert
    tls ./yourwebsite.com.br.pem ./yourwebsite.com.br-key.pem

    proxy / https://yourwebsite.com {
        transparent
        header_upstream X-Marotagem  true
        header_upstream Host  "yourwebsite.com.br"
    }

mliq

How to test NVDA screen reader behaviour on a Mac:

1. Download Microsoft Edge VM from https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
2. Download Virtualbox and import the Edge VM image.

Then in the VM:

1. Install guest addons in the VM
2. Download & install latest NVDA from nvaccess.org
3. Download & install SharpKeys and use it to map left an alternative key (eg. Left Ctrl) to the Insert key. This is needed because Macs do not typically have an “Insert” key which is the prefix for many NVDA commands.

mliq

In this article:

• Screen reader overview
  • Commonalities
  • Differences
    • Interaction modes
• Lessons

Overview

mliq

Emulating "enums" in JSDoc version of TypeScript

Problem

TypeScript has support for type-checking plain JavaScript files, which is very useful if you have an existing JS codebase and you want to test the waters and gradually add types.

There are some limitations in what you can do in JSDoc, but a lot of them can be worked-around by using type-definition files .d.ts (for example in a types/ directory). These files don't generate any JavaScript code, they are just there to provide extra type definitions to the compiler.

One thing you can't do in those .d.ts files though, is use enums. You could define them of course, but you won't get the runtime representation since the files don't generate JS code.

mliq

const childProcess = require('child_process');
const fs = require('fs');
const path = require('path');
const glob = require('glob');

const filePaths = glob
  .sync('package.json')
  .concat(glob.sync('packages/*/package.json'))
  .map(filePath => path.resolve(process.cwd(), filePath));