OrionReed

// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
(() => {
  const SHOW_SIDES = false; // color sides of DOM nodes?
  const COLOR_SURFACE = true; // color tops of DOM nodes?
  const COLOR_RANDOM = false; // randomise color?
  const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
  const MAX_ROTATION = 180; // set to 360 to rotate all the way round
  const THICKNESS = 20; // thickness of layers
  const DISTANCE = 10000; // ¯\\_(ツ)_/¯

QuocCao-dev

/* *-*-*-*-*-*-*-*-*-*-* Challenge 1 ------------------
Create a variable with the type number and assign it an arbitrary value
*/
// ----------------------------------------------------
// *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
// ----------------------------------------------------

/* *-*-*-*-*-*-*-*-*-*-* Challenge 2 ------------------
Create a variable with the type string and use the addition operator to put two arbitrary words together
*/

KTibow

<script>
  import { onMount } from "svelte";
  import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
  import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
  import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
  import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
  import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

  let subscriptions = [];
  export let content;

getify

In defense of blocks for local scopes (Part 1)

---

[EDIT: I've added a part 2 to this blog post, to address some of the feedback that has come up: https://gist.github.com/getify/706e5e10822a298375da40f9cc1fa295]

---

Recently, this article on "The JavaScript Block Statement" came out, and it received some good discussion in a reddit thread. But the general reaction seems to be against this approach. That saddens me.

yvesbou

module.exports = {
  content: ["./src/**/*.{html,js, jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

olygood

{
  "extends": "next",
  "rules": {
    "react/no-unescaped-entities": "off",
    "@next/next/no-page-custom-font": "off"
  }
}

rishitells

Assorted collection of engineering articles / blogs

that I bookmarked but never had enough time to read

• The Agile Manifesto
• React Philosophies - 🧘 Things I think about when I write React code 🧘
• The Product-Minded Software Engineer
• Architecture, Performance, and Games - Game Programming Patterns / Introduction
• Responsible Tech Playbook
• Small, Sharp Tools
• Why the developers who use Rust love it so much
• Testing - 8th Light Blog

eff-kay

All programmers are API designers:
  Good programs are modular, and intermodular boundaries define APIs. Good modules get reused.

APIs can be among your greatest assets or liabilities:
  Good APIs create long-term customers; bad ones create long-term support nightmares.

Public APIs, like diamonds, are forever:
  You have one chance to get it right so give it your best.

APIs should be easy to use and hard to misuse:

rauschma

Cheat sheet: JavaScript Array methods

Deriving a new Array from an existing Array:

['■','●','▲'].slice(1, 3)          ⟼ ['●','▲']
['■','●','■'].filter(x => x==='■') ⟼ ['■','■']
    ['▲','●'].map(x => x+x)        ⟼ ['▲▲','●●']
    ['▲','●'].flatMap(x => [x,x])  ⟼ ['▲','▲','●','●']

textbook

Here is how to add Cypress E2E tests to a Create React App bootstrapped application. Assumes the *nix command line, you may need to adapt this for a Windows command line (or use WSL or Git Bash).

1. Install Cypress and the Testing Library utilities for it (to match the helpers CRA installs):

   $ npm i {,@testing-library/}cypress

   i is short for install, and the braces {} are expanded by brace expansion to cypress @testing-library/cypress.