zaydek

import React from "react"
import ReactDOM from "react-dom"

// https://stackoverflow.com/a/33292942
function timeout(timeoutMs) {
	return new Promise(resolve => setTimeout(resolve, timeoutMs))
}

;(async () => {
	const root = document.getElementById("root")

zaydek

---

---

.

1. Implementing a custom spell checker. That's done by companies like Grammarly and WebSpellChecker. They use spellcheck=false to disable the native spell checker globally for the entire editing host and then render some squiggles by adding s do the DOM. The problem here is that you cannot easily integrate your spell checking engine with all (or most) rich text editor at once. Most modern rich text editors have an architecture which does not allow any other JS app to modify that editor's DOM. Modifying their DOM directly either have no effect (the editor reverts that) or crashes that editor. This is a case with Grammarly which had to be disabled in Medium, CKEditor 5, Draft, etc. A solution to that would be if we were able to render squiggles or any other text decoration without actually touching the DOM. I call it "range decoration". I'm not sure how (and if) this can be implemented by browsers – i.e. how to make ranges controlled via CSS. Theoretically, this could work similarly to ::sel

zaydek

What if Tailwind classes were parsed?

This spec explores what a structured Tailwind CSS resolver could work based on informed experience.

Preface

A couple months ago, I authored something I called stylex.js — the idea was to provide React a parser/resolver for inline styles using a declarative API. Eventually, I stopped working on this project for favor of Tailwind CSS. Despite enjoying Tailwind CSS, I have incredibly fond memories of working in stylex.js because it afforded me the ability to be declarative and conditional with design.

Here is in essence how stylex.js worked. Given the following code:

zaydek

Optimizations 😀

Lightly parse state.data; should end up with:

• <Any>
  • <Blockquote>
  • <Preformatted>
  • <AnyList>
  • parseAny
    • <Header>
    • <Paragraph>

zaydek

// CodexRenderer can render classes (default), attributes,
// or components.
<CodexRenderer
	render={{
		h1: "font-semibold text-3xl leading-tight text-black antialiased",
		h2: "font-semibold text-2xl leading-tight text-black antialiased",
		h3: "font-semibold text-xl  leading-tight text-black antialiased",
		h4: "font-semibold text-xl  leading-tight text-black antialiased",
		h5: "font-semibold text-xl  leading-tight text-black antialiased",
		h6: "font-semibold text-xl  leading-tight text-black antialiased",

zaydek

.codex-editor .ml-0 {
  margin-left: 0;
}
.codex-editor .ml-1 {
  margin-left: .25em;
}
.codex-editor .ml-2 {
  margin-left: .5em;
}
.codex-editor .ml-3 {

zaydek

[
  {
    "group": "Smileys & Emotion",
    "subgroup": "face-smiling",
    "codePoints": [
      128512
    ],
    "status": "fully-qualified",
    "emoji": "😀",
    "tag": "E1.0",

zaydek

1. Go to https://myaccount.google.com/lesssecureapps and temporarily enable ‘Less secure app access’. You can enable it immediately after.
2. Invoke from the command-like:

$ DISPLAY_NAME="Full name" USERNAME="[email protected]" PASSWORD="password" go run gmail.go

zaydek

# https://cloud.google.com/run/docs/quickstarts/build-and-deploy#containerizing

# Use the official Golang image to create a build artifact.
# This is based on Debian and sets the GOPATH to /go.
# https://hub.docker.com/_/golang
FROM golang:1.13 as builder

# Create and change to the app directory.
WORKDIR /app

zaydek

package main

import (
	"context"
	"database/sql"
	"encoding/base64"
	"encoding/json"
	"fmt"
	"time"