RobertAKARobin

Which web animations are expensive and which are cheap?

You can add a lot of polish to a website or app with animations and transitions. Some animations can be built in two seconds with a single line of code. Others take days, and still others have to be hand-drawn by an actual animator. How do you tell which is which?

Skip to examples of "cheap" animations

(Note to developers: The examples are all simple hand-written SVGs, animated with CSS. Click on an image to open it in a new tab, and then "view source.")

---

What makes animations "expensive"?

kyleshevlin

// 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.

jonnyjava

WORKING EFFECTIVELY WITH LEGACY CODE

To me, legacy code is simply code without tests. I’ve gotten some grief for this definition. What do tests have to do with whether code is bad? To me, the answer is straightforward, and it is a point that I elaborate throughout the book: Code without tests is bad code. It doesn’t matter how well written it is; it doesn’t matter how pretty or object-oriented or well-encapsulated it is. With tests, we can change the behavior of our code quickly and verifiably. Without them, we really don’t know if our code is getting better or worse.

Chapter 1 Changing Software

Four Reasons to Change Software: For simplicity’s sake, let’s look at four primary reasons to change software.

rodrigo-brito

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"
    }

cfarm

In this article:

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

Overview

nicolashery

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.

JamieMason

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));

novascreen

If you use Storybook with Next.js and have components using next/link you'll have to mock next/router the same you would for testing with Jest or others. Simply create a file with the mock router as shown below and import it in your Storybook config.

This is based on some information from an issue on Next.js:

vercel/next.js#1827

robertknight

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.

iandunn

# 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
}