sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

trueadm

// I'm suggesting we add a new "adopt X from <Y />" syntax to the JSX language
// it would de-sugar to render prop children, but look and read better than
// what we currently have. For example:

// 1.
// this sugar
function MyComponent(props) {
  adopt foo from <Bar />;
  return <div>{foo}</div>;
}

joshbuchea

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

tingwei628

Thanks to "Learning JavaScript Design Pattern" @Addy Osmani

用一句講設計模式

“Pattern 提供“某些特定”情況的可重複利用解法

1. 可重複使用
2. 可以被傳達 (換句話, 節省developer溝通的時間)
3. DRY(Don't Repeat Yourself)

blainekasten

import React from 'react';
import { connect as reduxConnect } from 'react-redux';

function wrapWithContext(mapStateToProps, mapDispatchToProps, contextTypes, component) {
  return class ConnectedComponent extends React.Component {
    constructor(props, context) {
      super(props, context);

      /*
       * This is the magic right here!

DavidWells

Aligning images

This is a guide for aligning images.

See the full Advanced Markdown doc for more tips and tricks

left alignment

chrisvfritz

var currencyValidator = {
  format: function (number) {
    return (Math.trunc(number * 1000000000000) / 1000000000000).toFixed(2)
  },
  parse: function (newString, oldNumber) {
    var CleanParse = function (value) {
      return { value: value }
    }
    var CurrencyWarning = function (warning, value) {
      return { 

jesstelford

Starving the Event Loop with microtasks

"What's the Event Loop?"

Sparked from this twitter conversation when talking about doing fast async rendering of declarative UIs in Preact

These examples show how it's possible to starve the main event loop with microtasks (because the microtask queue is emptied at the end of every item in the event loop queue). Note that these are contrived examples, but can be reflective of situations where Promises are incorrectly expected to yield to the event loop "because they're async".

• setTimeout-only.js is there to form a baseline

jesstelford

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

---

Given the code

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 (