Skip to content

Instantly share code, notes, and snippets.

@christianalfoni
christianalfoni / background.js
Created November 10, 2020 10:41
element-capture
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
console.log("request type", request.type)
if (request.type === "enable") {
chrome.pageAction.show(sender.tab.id);
}
else if (request.type === "up") {
capture(sender.tab.id, request.dimensions);
}
sendResponse({});
@christianalfoni
christianalfoni / self-signed-wildcard-ssl-for-nginx.sh
Last active August 24, 2020 09:54 — forked from mikepsinn/self-signed-wildcard-ssl-for-nginx.sh
Create self-signed SSL certificate for Nginx
#!/usr/bin/env bash
# sudo apt-get install -y curl
# curl https://gist.githubusercontent.com/mikepsinn/b1142aa685ef71d6d3af9b01fc386539/raw/self-signed-wildcard-ssl-for-nginx.sh | sudo bash -s
ROOT_DOMAIN=codesandbox.test
# Specify where we will install
SSL_DIR="ssl"
# Set the wildcarded domain we want to use
WILDCARD_DOMAIN="*.${ROOT_DOMAIN}"

Updated packages

package from version to version
betsy 1.0.2 1.0.2-1596731055829
non-blocking-json 1.0.0 1.1.0-1596731055829
overmind 24.1.1 25.0.0-1596731055829
overmind-angular 24.1.1 25.0.0-1596731055829
overmind-devtools 25.1.1 26.0.0-1596731055829
overmind-devtools-client 7.1.1 8.0.0-1596731055829

Updated packages

package from version to version
betsy 1.0.2 1.0.2-1591603562887
overmind 23.1.0 24.0.0-1591603562887
overmind-angular 23.1.0 24.0.0-1591603562887
overmind-devtools 24.1.0 25.0.0-1591603562887
overmind-devtools-client 6.1.0 7.0.0-1591603562887
overmind-devtools-vscode 5.1.0 6.0.0-1591603562887

Taking inspiration from tailwindcss and this idea, here is a specification for how to achieve it.

What is it

With TailwindCSS you have an amazing default design system, but it is not ideal. It lacks:

  • Validation of classnames: It does not validate the classnames you insert
  • Composition: It does not allow you to effectively compose together classnames into new classnames and it can not dynamically do so at runtime effectively
  • Defining by variables: Even though it is nice to write TailwindCSS inline with your elements, you can not define classes as variables, because the TailwindCSS extension does not understand it

This solution solves all of this with an even better experience of setup and consumption!

import * as React from 'react'
import { createConfig, TCss } from '@stitches/css'
const config = createConfig({
tokens: {
colors: {
RED: 'tomato',
},
},
})
import App from 'next/app'
import React from 'react'
import { createCss, TCss } from '@stitches/css'
import { Provider, config } from './css'
export default class MyApp extends App<{ serverCss: TCss<typeof config> }> {
render() {
const { Component, pageProps, serverCss } = this.props
return (
<Provider css={serverCss || createCss(config)}>
class AppleSubscription {
String productId;
int purchaseDate;
int expiresDate;
bool isActive;
AppleSubscription.fromJSON(Map<String, dynamic> json) :
productId = json["productId"],
purchaseDate = json["purchaseDate"],
expiresDate = json["expiresDate"],