pengowray

_IGHT (9 + 6 = 15): eight fight light might night right sight tight wight *aight *bight *dight *hight *kight *pight
_OUND (8 + 1 = 9): bound found hound mound pound round sound wound *lound
_ATCH (7 + 3 = 10): batch catch hatch latch match patch watch *gatch *natch *ratch
_OWER (7 + 3 = 10): cower lower mower power rower sower tower *bower *dower *vower
SHA_E (7): shade shake shale shame shape share shave
_AUNT (6 + 2 = 8): daunt gaunt haunt jaunt taunt vaunt *naunt *saunt
_ILLY (6 + 2 = 8): billy dilly filly hilly silly willy *gilly *tilly
STA_E (6 + 2 = 8): stage stake stale stare state stave *stade *stane
_ATTY (6 + 1 = 7): batty catty fatty patty ratty tatty *natty
GRA_E (6 + 1 = 7): grace grade grape grate grave graze *grame

mogelbrod

module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      debug: false,
      loose: true,
      corejs: {
        version: 3,
        proposals: true,
      },

jforberg

Welcome to Stack Overflow! Questions seeking debugging help ("why isn't this code working?") must 
include the desired behavior, a specific problem or error and the shortest code necessary to 
reproduce it in the question itself. Questions without a clear problem statement are not useful 
to other readers. See: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve).

Welcome to Stack Overflow! Questions asking us to recommend or find a book, tool, software library, 
tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract 
opinionated answers and spam. Instead, [describe the problem](http://meta.stackoverflow.com/questions/254393) 
and what has been done so far to solve it.

markerikson

// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
// My basic render function structure:
function RenderLogicExample({
  someBoolean, // 1) Destructure values from `props` object
  someList,
}) {
  // 2) Declare state values
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

Rich-Harris

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

gaearon

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (

Drixled

body {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  max-width: 760px;
  padding: 1.6875rem;
  margin: 0 auto;
}

manigandham

Strictly Frameworks

• Mobiledoc - github.com/bustle/mobiledoc-kit - framework to build editors with a standardized JSON structure
• ShareDB - github.com/share/sharedb - framework to sync any JSON document using operational transforms, add real-time collaborative editing to anything else
• Bangle.dev - github.com/bangle-io/bangle.dev - toolkit built for building editors, based on prosemirror

Abstracted Editors

These use separate document structures instead of HTML, some are more modular libraries than full editors

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

lelandbatey

Description

This simple script will take a picture of a whiteboard and use parts of the ImageMagick library with sane defaults to clean it up tremendously.

The script is here:

#!/bin/bash
convert "$1" -morphology Convolve DoG:15,100,0 -negate -normalize -blur 0x1 -channel RBG -level 60%,91%,0.1 "$2"

Results