👀 Million Lint: A Linter for React Performance

Million’s mission is to make React apps faster and the new VS Code extension Million Lint takes a new approach: imagine ESLint but for suggesting performance improvements.

AIDEN BAI

❓ CHALLENGE

const value = { number: 10 };
function increment(obj) {
  obj.number++;
}
increment(value);
console.log(value.number);

❓ CHALLENGE

const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((total, current) => {
  return total + current * current;
}, 0);
console.log(sum);

✌️ 🌴 New JavaScript features in Safari 17.4: Promise.withResolvers(), Object.groupBy(), Map.groupBy()

❓ CHALLENGE

const num = 8;
const obj = {
  num: 10,
  inner: {
    num: 6,
    getNum: function() {
      return this.num;
    }
  }
};
console.log(obj.inner.getNum());
const getNum = obj.inner.getNum;
console.log(getNum());

🤟 Node.js Updates: Text Styling (v21.7.0)

Sometimes minor Node versions have little beyond bug fixes, but other times you get some new features, and 21.7 doesn’t disappoint. Node gains a new util.styleText() function for formatting text (including with color!), new functions to work with .env files, multi-line value support for .env files, a crypto.hash() function to more quickly compute digests in one shot (example), and more.

THE NODE.JS CORE TEAM

❓ CHALLENGE

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

const generator = generateSequence();
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());

📊 Plotly 2.30: A JavaScript Graphing Library

A high-level, declarative charting library, built on top of D3 and stack.gl, with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.

PLOTLY, INC.

❓ CHALLENGE

function factorial(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
}
console.log(factorial(5));

✌️ Shiki 1.0: A Powerful Syntax Highlighter

A few months ago, we linked to Shikiji, a fork of Shiki that was created to push the project forward. Happily, the creators of both libraries decided to join forces and Shiki 1.0 was born. It’s a syntax highlighter based on TextMate grammar and themes, the same engine as used by VS Code. The docs are good.

PINE WU, ANTHONY FU

❓ CHALLENGE

const obj = {
  value: 42,
  getValue: function() {
    return () => {
      console.log(this.value);
    };
  }
};

const getValue = obj.getValue();
getValue();

👀 Voici.js: Pretty Table Printing for the Terminal

If you’ve got a collection of large objects to print out, this could be ideal as it can format them into a table, dynamically size the columns as appropriate, sort the output, and let you add styling into the mix (including colors.)

LARS WAECHTER

❓ CHALLENGE

const obj = { a: 1, b: 2, c: 3 };
let result = "";
for (const [key, value] of Object.entries(obj)) {
  result += key + value;
}
console.log(result);