Jane Manchun Wong wongmjane

## RISC-V.md

      
              1 file
            
          
              12 forks
            
          
              21 comments
            
          
              221 stars
            
          
                erincandescent
                / RISC-V.md
            
            
              Created
              July 25, 2019 23:32
            
          
    Foreward

This document was originally written several years ago. At the time I was working as an execution core verification engineer at Arm. The following points are coloured heavily by working in and around the execution cores of various processors. Apply a pinch of salt; points contain varying degrees of opinion.
It is still my opinion that RISC-V could be much better designed; though I will also say that if I was building a 32 or 64-bit CPU today I'd likely implement the architecture to benefit from the existing tooling.
Mostly based upon the RISC-V ISA spec v2.0. Some updates have been made for v2.2
Original Foreword: Some Opinion

The RISC-V ISA has pursued minimalism to a fault. There is a large emphasis on minimizing instruction count, normalizing encoding, etc. This pursuit of minimalism has resulted in false orthogonalities (such as reusing the same instruction for branches, calls and returns) and a requirement for superfluous instructions which impacts code density both in terms of size and

  
## graphql.ts
import { ApolloServer, gql } from 'apollo-server-micro';

const typeDefs = gql`
  type Query {
    sayHello: String
  }
`;

const resolvers = {
  Query: {

## AutoThemeSwitcher.js
import addons from '@storybook/addons';
import { FORCE_RE_RENDER } from '@storybook/core-events';
import { themes } from '@storybook/theming';

// Automatically switch light/dark theme based on system pref.
addons.register("auto-theme-switcher", api => {

  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
  let lastTheme;

## uselayouteffect-ssr.md

      
              1 file
            
          
              10 forks
            
          
              75 comments
            
          
              211 stars
            
          
                gaearon
                / uselayouteffect-ssr.md
            
            
              Last active
              May 2, 2024 13:42
            
              
                useLayoutEffect and server rendering
              
          
    If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.
You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.
Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.
function MyComponent() {

  
## graphiql-dark-mode.css
<style>

  /* GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating[1]
   * Colors taken from Atom's One Dark theme[2]. Add this file to the end of
   * your <head> block[3] to override built-in default styling.
   *
   * [1]. https://twitter.com/flowpoke
   * [2]. https://github.com/atom/atom/tree/master/packages/one-dark-ui
   * [3]. e.g. `.../site-packages/graphene_django/templates/graphene/graphiql.html`
   */

## for-snook.md

      
              1 file
            
          
              10 forks
            
          
              46 comments
            
          
              327 stars
            
          
                threepointone
                / for-snook.md
            
            
              Last active
              August 26, 2023 15:43
            
              
                For Snook
              
          
    https://twitter.com/snookca/status/1073299331262889984?s=21
‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬
‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬
So the big deal about css-in-js (cij) is selectors.

  
## Composite-Link.js
import NextLink from 'next/link';
import React from 'react';
import { Text } from 'react-native-web';

// https://github.com/zeit/next.js#with-link
// Combines the Next.js <Link> with React Native's <Text> component.
// Enables use like this:
//
//    <Link
//      href={href}

## *valoo.md

      
              7 files
            
          
              7 forks
            
          
              9 comments
            
          
              94 stars
            
          
                developit
                / *valoo.md
            
            
              Last active
              November 13, 2023 08:39
            
              
                🐻 Valoo: just the bare necessities of state management. 150b / 120b. https://npm.im/valoo
              
          
    🐻 valoo

just the bare necessities of state management.

Usage

Hotlink it from https://unpkg.com/valoo.
See Interactive Codepen Demo.

  
## The Rules.md

      
              1 file
            
          
              35 forks
            
          
              8 comments
            
          
              384 stars
            
          
                sebmarkbage
                / The Rules.md
            
            
              Last active
              May 7, 2024 15:01
            
              
                The Rules of React
              
          
    The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.
What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".
On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

  
## Hoverable.js
import createHoverMonitor from './createHoverMonitor';
import { element, func, oneOfType } from 'prop-types';
import React, { Component } from 'react';

const hover = createHoverMonitor();

/**
 * Use:
 * <Hoverable>
 *   {(hover) => <View style={hover && styles.hovered} />}
	import { ApolloServer, gql } from 'apollo-server-micro';

	const typeDefs = gql`
	type Query {
	sayHello: String
	}
	`;

	const resolvers = {
	Query: {
	import addons from '@storybook/addons';
	import { FORCE_RE_RENDER } from '@storybook/core-events';
	import { themes } from '@storybook/theming';

	// Automatically switch light/dark theme based on system pref.
	addons.register("auto-theme-switcher", api => {

	const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
	let lastTheme;
	<style>

	/* GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating[1]
	* Colors taken from Atom's One Dark theme[2]. Add this file to the end of
	* your <head> block[3] to override built-in default styling.
	*
	* [1]. https://twitter.com/flowpoke
	* [2]. https://github.com/atom/atom/tree/master/packages/one-dark-ui
	* [3]. e.g. `.../site-packages/graphene_django/templates/graphene/graphiql.html`
	*/
	import NextLink from 'next/link';
	import React from 'react';
	import { Text } from 'react-native-web';

	// https://github.com/zeit/next.js#with-link
	// Combines the Next.js <Link> with React Native's <Text> component.
	// Enables use like this:
	//
	// <Link
	// href={href}
	import createHoverMonitor from './createHoverMonitor';
	import { element, func, oneOfType } from 'prop-types';
	import React, { Component } from 'react';

	const hover = createHoverMonitor();

	/**
	* Use:
	* <Hoverable>
	* {(hover) => <View style={hover && styles.hovered} />}