csilverman

Human Interface Guidelines Archive

About this project

Keyboard/Mouse-based

AmigaOS

• Amiga User Interface Style Guide

Apple

malchata

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.

Nooshu

## WebP
find ./ -type f -name '*.png' -exec sh -c 'cwebp -lossless $1 -o "${1%.png}.webp"' _ {} \;\n

## AVIF (s=speed / 0-10 / slowest-fastest)
find ./ -type f -name '*.png' -exec sh -c 'avifenc -s 6 $1 -o "${1%.png}.avif"' _ {} \;

mattdesl

<script>
	import delaunay from 'delaunay-triangulate';
	import { Slider, Color } from 'texel/ui';
	
	// This will get passed in with the P5 instance
	export let p5;
	
	// Size of the canvas in pixels
	export let width = 256;
	export let height = 256;

vire

Everything I Know About UI Routing

Definitions

1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
   1. pathname - The "file/directory" portion of the URL, like invoices/123
   2. search - The stuff after ? in a URL like /assignments?showGrades=1.
   3. query - A parsed version of search, usually an object but not a standard browser feature.
   4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
   5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

ryanflorence

Everything I Know About UI Routing

Definitions

1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
   1. pathname - The "file/directory" portion of the URL, like invoices/123
   2. search - The stuff after ? in a URL like /assignments?showGrades=1.
   3. query - A parsed version of search, usually an object but not a standard browser feature.
   4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
   5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

morewry

Bundle Sizes

Your mileage will vary.

React

┌────────────────────────────────────┐
│                                    │
│   Destination: dist/index.umd.js   │

treshugart

import React, { Component } from 'react';
import { render } from 'react-dom';
import { props, withProps } from 'skatejs/esnext/with-props';
import { withRender } from 'skatejs/esnext/with-render';

// This is the React renderer mixin.
const withReact = Base => class extends withRender(withProps(Base || HTMLElement)) {
  get props () {
    // We override props so that we can satisfy most use
    // cases for children by using a slot.

tkh44

import React from 'react'
import styled from 'emotion/react'
import { omit } from 'emotion/lib/utils'
import { space, width, fontSize, color, responsiveStyle } from 'styled-system'

import { baseCss } from './ui'

const defaultExcludedProps = [
  'm',
  'mt',

morewry

Mono Repository Tool Comparison

For Web Client / Front End Projects

(That Probably Use HTML, CSS, and JS)

I made a list of 20 things I might want out of a monorepo tool for a Design System to use as a basis for comparing some of the options including Lerna, Northbrook, and Rush.

⚠️ Northbrook's author says the project is pretty dead and now uses Lerna.

Qualifications Wanted