gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

huw

How to integrate Remix, Sentry, and Cloudflare Workers (incl. tracing)

The code above is just a sample—I have adapted it from a production codebase and I can't guarantee it will work as-is. It's just here to illustrate what a solution should look like.

The main things you need to do to get everything hooked up are:

1. Rewrite instrumentBuild to accept a passed-through Hub instance, rather than using getCurrentHub() (including, perniciously, in helper functions such as hasTracingEnabled())
2. In server/index.ts, create a root transaction from the current route’s name and wrap the loaders and actions in spans via instrumentBuild.
3. In root.tsx, pass through your tracing & baggage into the meta function.
4. In root.tsx, include the current domain in tracePropagationTargets (because Remix fetchers will fetch from the entire URL rather than / root, which will confuse Sentry)
5. (Remix v2) In root.tsx, create an ErrorBoundary component (with the v2_errorBoundary flag set if you're

sergiks

NGINX and Certbot example with CloudFlare API in Docker

Sample config files to demonstrate seup that creates and updates free SSL certificates from Let's Encrypt given that the domains are maintained at CloudFlare service.

How it works

Certbot verifies domains ownership by accessing CloudFlare API that adds temporary TXT DNS records. To enable it You must provide your CloudFlare API token. More details in documentation for dns-cloudflare Certbot plugin.

Certbot saves created certificates in Docker volume certbot_etc. Pay attention to output of the certbot run - it mentions path to the created certificates.

kyleshevlin

// I think boolean arguments maybe kind of suck. I'm still making up my mind on this,
// but let me show you why I'm leaning the way I am.

// I have a function that fills out a form and optionally submits it.
// Maybe this is a function you'd use in a test suite or something similar.
function fillOutForm(values, submit = true) {
  // Do some stuff with the values

  if (submit) {
    form.submit()

smashah

//add this to your package.json

// "audio-buffer-utils": "^5.1.2",
// "audio-decode": "^1.4.0",
// "audiobuffer-to-wav": "^1.0.0",
// "node-lame": "^1.2.0",
// "ogg.js": "^0.1.0",
// "opus.js": "^0.1.1",

const fs = require('fs');

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.

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

sergiodxa

// use JSX with el instead of React.createElement
/** @jsx createElement */

const Children = {
  only(children) {
    if (children.length > 1 || children.length === 0) {
      throw new Error('The children must have only one element');
    }
    return children[0];
  }

tmeasday

Decorator / addon preview API proposal.

Currently the principal way addons work in the preview context (ie acting on the story) is via decorators.

Types of decorator

There are 3 types of thing that the decorators do:

• Altering the story in a very real way: "modifiers"
• Inspecting the story, and sending telemetry somewhere (typically to the manager context via the addon channel): "inspectors"

Rican7

#/usr/bin/env sh
#
# Requires homebrew (http://brew.sh/)
# Thanks http://clubmate.fi/upgrade-to-bash-4-in-mac-os-x/

brew update && brew install bash && sudo bash -c 'echo /usr/local/bin/bash >> /etc/shells' && chsh -s /usr/local/bin/bash