Skip to content

Instantly share code, notes, and snippets.

Avatar

Jeremy Wagner malchata

View GitHub Profile
View react-bias.md

React Bias

It may seem like a bold suggestion that we as web developers can choose the wrong tools for the job because we tend to be swayed by appeals to popularity or authority, but simple statistics imply just that. For example, React (https://reactjs.org/) is a JavaScript framework that emphasizes componentization and simplified state management. It enjoys strong advocacy from a vocal and dedicated userbase within the developer community.

Despite React’s apparent popularity, however, The HTTP Archive observed in 2020 that React only accounted for 4% of all libraries in use across the 7.56 million origins it analyzed (https://almanac.httparchive.org/en/2020/javascript#libraries).

For context, The State of JS 2020 Survey (https://2020.stateofjs.com/en-US/), which surveyed roughly 23,765 respondents, offers the following statistics:

  • 70.8% of respondents identified as white.
  • 91.1% identified as male, whereas 5.8% identified as female and 0.9% identified as non-binary/third gender.
@malchata
malchata / chemistreak.js
Created Dec 3, 2020
Chemistreak: a paint worklet of pseudo-random hexagonal disarray!
View chemistreak.js
/* global registerPaint */
const paintName = "chemistreak";
class Chemistreak {
static get inputProperties () {
return [
`--${paintName}-tile-width`,
`--${paintName}-alternate-by`,
`--${paintName}-stroke-weight`,
@malchata
malchata / php-component.php
Last active Dec 23, 2020
Stateless component in PHP
View php-component.php
<?php
function SubscribeButton ($subscribed, $currentUserId, $userId, $className = null) {
if (!isset($userId) || !ctype_digit($userId) || $userId === $currentUserId) {
return "";
}
$subscribeButtonClasses = "subscribe-button";
if (!is_null($className)) {
View cookie-clicker-cheat.js
View react-menu-component.js
// Vendors
import React, { Fragment, Component } from "react";
// Components
import MenuItem from "../MenuItem/MenuItem.js";
// CSS
import "./Menu.css";
class Menu extends Component {
View addeventlistener-menu.js
console.time("Evaluate script.");
const menuToggleButton = document.getElementById("menu-toggle");
const closeMenuButton = document.getElementById("close-menu");
const menu = document.getElementById("menu");
const overlay = document.getElementById("menu-overlay");
let menuVisible = false;
const openMenu = function () {
console.time("Menu open.");
View preact-menu-component.js
// Vendors
import { h, render, Fragment, Component } from "preact";
// Components
import MenuItem from "../MenuItem/MenuItem.js";
// CSS
import "./Menu.css";
class Menu extends Component {
@malchata
malchata / styles.less
Last active Feb 19, 2021
Just transferring over my atom styles to another machine the hard way.
View styles.less
atom-workspace {
--editor-font-size: 1.75rem;
}
atom-text-editor {
.cursor {
border-left: .25rem solid;
transition: opacity .1875s ease-out;
}
View atom less
atom-workspace {
--editor-font-size: 1.625rem;
}
atom-text-editor {
.cursor {
border-left: .25rem solid;
transition: opacity .1875s ease-out;
}