samselikoff

const plugin = require("tailwindcss/plugin");

module.exports = {
  mode: "jit",
  purge: {
    content: ["./src/**/*.{js,ts,jsx,tsx,mdx,vue}"],
  },
  theme: { extend: {} },
  variants: {},
  plugins: [

tannerlinsley

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

threepointone

(I'm enjoying doing these raw, barely edited writeups; I hope they're useful to you too)

Feature flags

This is my own writeup on feature flags; for a deep dive I'd recommend something like Martin Fowler's article (https://martinfowler.com/articles/feature-toggles.html).

So. Feature flags. The basic idea that you'll store configuration/values on a database/service somewhere, and by changing those values, you can change the user experience/features for a user on the fly.

Let's say that you're building a new feature, called 'new-button' which changes the color of buttons, which is currently red, to blue. Then you'd change code that looks like this -

remy

// FILENAME: app/polyfills/fetch.js

import Promise from './promise';
import * as messaging from "messaging";

const OPEN = messaging.peerSocket.OPEN;

// Helpful to check whether we are connected or not.
// setInterval(() => {
//   const readyState = messaging.peerSocket.readyState;

mikesamuel

Auto-noncing in Go html/template

Background

CSP mitigates many client-side security vulnerabilities. A policy is a whitelist of locations from which JavaScript, Styles, and other content can be loaded. CSP allows nonces & hashes to make it easy for a policy to allow some inline content without allowing all inline content.

clarkbw

const timing = store => next => action => {
  performance.mark(`${action.type}_start`);
  let result = next(action);
  performance.mark(`${action.type}_end`);
  performance.measure(
    `${action.type}`,
    `${action.type}_start`,
    `${action.type}_end`
  );
  return result;

threepointone

(also know as lies and/or alternative facts)

js

• setImmediate - doesn't set anything immediately, waits for a tick before executing
• setTimeout(fn, n) - never sets the timeout to exactly n
• Math.random() - computers cannot generate random numbers
• Promise - is a lie when rejected
• Array.reduce - accumulates, does not reduce (via @sbmadhav)

threepointone

// inifinite scrolling of content without extra wrappers 
const { render, findDOMNode  } = ReactDOMFiber

class App extends React.Component {
  render() {
  // wrap the root element with an Intersection Observer, exposing .observe for children
    return <Intersection>
      <div style={{ height: 200, overflow: 'auto' }}>
        <Page offset={0} count={10} />
      </div>

geoffreydhuyvetters

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

• Andrew Clark: What's Next for React — ReactNext 2016
• React Fiber Architecture

why?

talecrafter

/*
	Basic Sprite Shader for aligning pixel art to the same grid, based on the Unity Sprite Shader.
	Create one Material where you assign the same Pixels Per Unit value you use on your imported Sprites,
	then reuse this Material on all appropriate Sprite Renderers.
	(You can use Shader.SetGlobalFloat to set that Pixels Per Unit value for all your shaders:
	https://docs.unity3d.com/ScriptReference/Shader.SetGlobalFloat.html)

	This is not for scaled or rotated artwork. If you need those features, look at low res render textures.

	Use this however you want.