pesterhazy

So you want to write a sync system for a web app with offline and realtime support? Good luck. You might find the following resources useful.

Overview articles

• Database in a browser, a spec (Stepan Parunashvili)

  What problem are we trying to solve with a sync system?

• The web of tomorrow (Nikita Prokopov)

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

GeeWizWow

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
honks.
I have found this interesting for debugging, but also fun to hear web pages
render like geese.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const url = 'https://firebasestorage.googleapis.com/v0/b/mutation-honk.appspot.com/o/Honk1.mp3?alt=media';

rauschma

Using server-sent events

Why and how?

• Documentation: https://web.dev/articles/eventsource-basics
• Use case: broadcasting data from server to browsers
• Benefits:
  • Easy to understand and implement (only a few lines of code)
  • No library is needed
• Can use same HTTP(S) authentication as elsewhere in the app (which can’t be done with websockets)

developit

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

🔥 JSFiddle Demo

Usage

The API is a single function that accepts 2 pure functions as arguments:

mattdesl

/*
  This streams a CPU-side "shader" function into a really huge PNG image.
 */

const PNGEncoder = require('png-stream/encoder');
const fs = require('fs');
const path = require('path');
const Readable = require('readable-stream').Readable;
const vec2 = require('gl-vec2');
const smoothstep = require('smoothstep');

kmagiera

import React, { Component } from 'react'
import { View, Image, StyleSheet, ScrollView, Text, Animated, StatusBar, PixelRatio } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons';
import MapView from 'react-native-maps';

const AMSTERDAM = {
  latitude: 52.3702,
  longitude: 4.8952,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421,

ryanflorence

import { Component } from 'react'
import { createStore, combineReducers } from 'redux'
import parseLinkHeader from 'parse-link-header'

const START = 'start'
const SUCCEED = 'succeed'
const ERROR = 'error'

const inflight = (state={}, action) => (
  ((state) => (

ryanflorence

import React, { Component } from 'react'

class ScrollPosition extends Component {
  state = {
    top: 0,
    left: 0
  }

  render() {
    const child = this.props.children(this.state)

mattmccray

import {stopEvent, hoistStatics} from 'util'

let Types= React.PropTypes,
    _globalContainer= null

export const PopoverSupport= Wrapped => {

  class PopoverSupport extends React.Component {
    // static propTypes= Wrapped.propTypes // Won't this be nice?