bvaughn

The MIT License (MIT)

Copyright © <year> <copyright holders>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

busypeoples

// TypeScript Fundamentals For JavaScript Developers

/*
  Tutorial for JavaScript Developers wanting to get started with TypeScript.
  Thorough walkthrough of all the basic features.
  We will go through the basic features to gain a better understanding of the fundamentals.
  You can uncomment the features one by one and work through this tutorial.
  If you have any questions or feedback please connect via Twitter:
  A. Sharif : https://twitter.com/sharifsbeat
*/

sundy001

import { useRef, useCallback } from 'react';

const useDragAndDrop = ({ onDragStart, onDrag, onDragEnd }) => {
  const callBackRef = useRef();
  callbackRef.current = {
    onDragStart,
    onDrag,
    onDragEnd
  };
  

threepointone

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.

busypeoples

Making Unrepresentable UI Representations Unrepresentable!

When building components, we mostly start out with a minimal API, as we mostly have a clear initial idea of what the Component should do. But as requirements start to change, our API might start to evolve a long the way too. We start adding more props to cover conditional or special cases etc. Sometimes we use optional props, as in not required, or we might start using flags, as in boolean props or enums, to handle variants. Let's take a closer look at optional props and what effects these can have on our UI representation.

Optional props

ryanflorence

import React, { Suspense, useState } from "react";
import { unstable_createResource as createResource } from "react-cache";
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption
} from "./Combobox2.js";

function App({ tabIndex, navigate }) {

vincentriemer

import React from "react";
import { usePress } from "./usePress";

export const MyJSButton = () => {
  const [pressRef, isPressed, accessibilityProps] = usePress(
    "button", // role [button | link]
    () => console.log("Pressed!"), // callback
    true // should preventDefault
  );

ryanflorence

import React from "react";
import {
  useRouter,
  Link
} from "@reach/router/unstable-hooks";

function Accounts() {
  let route = useRouter({
    ".": () => <div>boring Accounts</div>,
    dope: () => <div>Dope Accounts</div>

rtpHarry

// The class itself is based on the animation helper class in 
// https://github.com/paulmg/ThreeJS-Webpack-ES6-Boilerplate
// but I have changed almost everything except for the class name and the update function.
import * as THREE from 'three';

export default class Animation {
  constructor(scene, animations) {
    this.scene = scene;
    this.animations = animations;

necolas

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}