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.

joshburgess

import { Predicate } from 'fp-ts/lib/function'
import { Prism } from 'monocle-ts'
import { Newtype, iso, prism, unsafeCoerce } from 'newtype-ts'

interface Optimistic<A extends string>
  extends Newtype<
      {
        readonly Optimistic: unique symbol
        readonly phantom: A
      },

dsherret

// this could be improved... (ex. ignore interfaces/type aliases that describe a parameter type in the same file)
import { Project, TypeGuards, Node } from "ts-morph";

const project = new Project({ tsConfigFilePath: "tsconfig.json" });

for (const file of project.getSourceFiles()) {
    file.forEachChild(child => {
        if (TypeGuards.isVariableStatement(child)) {
            if (isExported(child))
                child.getDeclarations().forEach(checkNode);

OliverJAsh

import React, { SFC } from 'react';
import { MapDispatchToPropsParam, MapStateToPropsParam } from 'react-redux';
import { StateRoot } from 'reducers/types';
import { AnyAction, Dispatch } from 'redux';

//
// Helpers
//

const createSubType = <T extends any>() => <SubType extends T>(subType: SubType) => subType;

basarat

/** 
 * Adds retries to an async function. 
 */
async function retry<T>(fn: () => Promise<T>, n: number): Promise<T> {
  let lastError: any;
  for (let index = 0; index < n; index++) {
    try {
      return await fn();
    }
    catch (e) {

MichalZalecki

import { performance } from "perf_hooks";
import { SHA256 as sha256 } from "crypto-js";

function calculateTarget(difficulty: number): number {
  return Math.ceil(2 ** 256 / difficulty);
}

function padLeft(str: string, to: number, chr: string): string {
  return str.length < to ? padLeft(chr + str, to, chr) : str;
}

OliverJAsh

import urlHelpers, { Url, UrlWithParsedQuery, UrlWithStringQuery } from 'url';
import queryStringHelpers from 'querystring';
import { Option } from 'funfix-core';
import pipe from 'lodash/flow';
import { ParsedUrlQuery } from 'querystring';

const isNonEmptyString = (str: string) => str.length > 0;

// https://github.com/gcanti/fp-ts/blob/15f4f701ed2ba6b0d306ba7b8ca9bede223b8155/src/function.ts#L127
const flipCurried = <A, B, C>(fn: (a: A) => (b: B) => C) => (b: B) => (a: A) =>

swalkinshaw

Moved to Shopify/graphql-design-tutorial

remy

What is your opinion about CSS-in-JS?

I had some "interesting" responses on Twitter over an observation I had that CSS-in-JS doesn't often come with a relatable use-case.

My opinion has always been: use the best tool for the job. When I first looked at CSS-in-JS it was because I was using a pattern library that included a 200K CSS file (compressed!). This wasn't okay. I wanted to only deliver the CSS that I was using in my components. CSS-in-JS appears to be a good match for this problem.

Coupled with the promise of scoped styled (i.e. no global styles interfering), the ability to automatically ensure only the used CSS is delivered, CSS-in-JS has its appeals.

The killer feature for me though, is if some CSS-in-JS tool can provide automatic, configuration-free, critical CSS.

surma

/**
 * Inspired by ebidel@ (https://gist.github.com/ebidel/1b418134837a7dde7d76ed36288c1d16)
 * @author surma@ 
 * License Apache-2.0
 */

function* collectAllElementsDeep(selector = '*', root = document.all) {
  for (const el of root) {
    if (!el.matches(selector))
      continue;