stwind

nanlliu

JakeCoxon

#
#    This program is free software: you can redistribute it and/or modify
#    it under the terms of the GNU General Public License as published by
#    the Free Software Foundation, either version 3 of the License, or
#    (at your option) any later version.
#
#    This program is distributed in the hope that it will be useful,
#    but WITHOUT ANY WARRANTY; without even the implied warranty of
#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
#    GNU General Public License for more details.

navsing

import SwiftUI

struct PaymentRing: View {
    @State var frameSize = UIScreen.main.bounds.width - 120
    @State var current: CGFloat = 0
    @State var value: Double = 0
    var body: some View {
        VStack {
            ZStack {
                Circle().stroke(Color.secondary, style: StrokeStyle(lineWidth: 40, lineCap: .butt, lineJoin: .round)).frame(width: frameSize, height: frameSize)

pomle

/* 
Creates a sticky block of rendered content.

Useful when you want to memoize part of the render tree and optionally rerender.
*/
import { useMemo, useRef } from "react";

export function useContentCache(
  renderer: () => React.ReactElement | undefined,
  deps: any[]

mirisuzanne

/* 
  This is not meant to be a final CSSWG proposal, 
  but reflects my immediate thoughts after reading
  [David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft.
  This gist was created to demonstrate my idea for removing selectors from his query syntax.

  More of my thoughts & notes are online at css.oddbird.net/rwd/
*/

main,

cferdinandi

Vanilla Lettering.js

A vanilla JS fork of Lettering.js. Follow along in the tutorial video at https://gomakethings.com/converting-a-jquery-plugin-to-vanilla-js-lettering.js/.

Usage

1. Instantiate the plugin

Pass in a selector for the elements you want to run Vanilla Lettering.js on.

k-mao

import SwiftUI

struct PlayerMoveEmoji: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 60))
            .padding(.bottom, 8)
    }
}

xiaochengh

Explainer: Font Metrics Override Descriptors

(A newer version is at here, where a new descriptor advance-override is added)

Spec

This doc explains descriptors ascent-override, descent-override and line-gap-override for CSS @font-face rule.

Basic usage:

mjackson

import React from "react";

export type ColorScheme = "light" | "dark";

export default function useColorSchemePreference(
  defaultColorScheme: ColorScheme = "light"
) {
  let darkQuery = "(prefers-color-scheme: dark)";
  let [colorScheme, setColorScheme] = React.useState<ColorScheme>(
    typeof window === "object" && window.matchMedia