Skip to content

Instantly share code, notes, and snippets.

@markdalgleish
markdalgleish / thoughts.md
Created August 3, 2023 00:04
Some thoughts on T-shirt sizing for spacing scales in design systems

Someone asked me about the spacing scale in Braid and I thought I'd share my thoughts here. For reference this is what they were referring to: https://github.com/seek-oss/braid-design-system/blob/ecdd7f3060cab2a6675cde7dd45bcd510caa268b/packages/braid-design-system/src/lib/themes/baseTokens/apac.ts#L166-L175

I could maybe have turned this into a blog post, but I'm just dropping my rough thoughts here instead.

In practice, the T-shirt size scale felt like indirection because our designers didn't think in those terms so it actually got in the way of developers and designers communicating.

The names also weren't really semantic in the sense that we couldn't confidently change them later without breaking a lot of layouts.

It also made it difficult to name new values to the scale, e.g. if we needed to add a value between "small" and "medium", what would we call it? I've seen things like "xmedium" in other systems before which shows how awkward this can get.

@kyo-takano
kyo-takano / lexical_search_with_gzip.py
Last active March 11, 2024 03:39
Lexical Search with gzip (gzipによる語彙検索)
import gzip
def gzip_search(query: str, candidate_chunks: list[str], top_k: int=1):
"""
文字列ベースで類似したテキストチャンクを推定するアルゴリズム.
`query`, `chunk`, および`query + " " + chunk`をそれぞれgzipで圧縮し、編集距離のようなものをベースに評価する.
Parameters:
query (str): 検索クエリとして使用する文字列.
top_k (int, optional): 返される類似チャンクの上位k個を指定する (default: 1).
// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
// Example using the Next.js App Router.
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
function useLinkHandler() {
let router = useRouter();
useEffect(() => {
let onClick = e => {
@JLarky
JLarky / .prettierrc.js
Last active February 13, 2024 12:18
Use prettier formatting with Astro (pnpm)
/**
* @type {import('prettier').Options}
*/
module.exports = {
plugins: [require.resolve('prettier-plugin-astro')],
overrides: [
{
files: '**/*.astro',
options: { parser: 'astro' }
@YusukeHosonuma
YusukeHosonuma / jojo.md
Created May 8, 2022 05:35
開発で使えるJOJOの名言集

この○○が金やちやほやされるために技術ブログを書いていると思っているのかァーッ!!

技術ブログを書いていることをアフェリエイト目的とか、PV目的だとか言われた時に。

なるほど完璧な開発プロセスっスねーーーっ不可能だという点に目をつぶればよぉ〜

一見完璧に聞こえるけど、どう考えたって上手く回らない開発プロセスの説明を受けた時に。

理解不能理解不能・・・あ、理解可能

ようやく理解できた時に。

お前は1つの修正が終わったらキチっとコミットしてから次の修正に入るだろう? 誰だってそーする。俺もそーする。

@CoachBirgit
CoachBirgit / create-wordpress-with-valet.sh
Last active October 31, 2023 16:51
Bash script: Use WP-CLI on Laravel/Valet to download, install and configure WordPress like a breeze.
#! /bin/bash
# Author: Birgit Olzem aka @CoachBirgit
# Version: 1.0
# Created on: January 19th 2022
# Requires WP-CLI, cURL, wget
# credits for the origin idea to Jeremy Herve: https://jeremy.hu/dev-environment-laravel-valet-wp-cli/
### How to use
/**
* BASE SIZE
* All calculations are based on this. It’s recommended that
* you keep it at 1rem because that is the root font size. You
* can set it to whatever you like and whatever unit you like.
*/
$gorko-base-size: 1rem;
/**
* SIZE SCALE
@kenmori
kenmori / TypeScriptPractice.md
Last active May 19, 2024 01:52
TypeScript 練習問題集
@daviddarnes
daviddarnes / index.njk
Created June 1, 2019 08:02
Eleventy blog from API
<h1>API post list</h1>
<ul>
{% for post in posts %}
<li>
<a href="/posts/{{ post.id }}/">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
@jakub-g
jakub-g / async-defer-module.md
Last active November 4, 2024 20:19
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)