Skip to content

Instantly share code, notes, and snippets.

@romannurik
romannurik / Expando.module.scss
Created May 5, 2024 03:24
CSS-only expando transition, as a React component
:where(.container) {
--expando-duration: .25s;
--expando-easing: ease;
display: grid !important;
grid-template-rows: 0fr;
--expando-transition:
grid-template-rows var(--expando-duration) var(--expando-easing),
visibility var(--expando-duration);
transition: var(--expando-transition);
overflow: hidden;
@romannurik
romannurik / dev.nix
Created April 2, 2024 14:15
First attempt at postgres on IDX
# .idx/dev.nix
{ pkgs, ... }: {
# Which nixpkgs channel to use.
channel = "stable-23.11"; # or "unstable"
# Use https://search.nixos.org/packages to find packages
packages = [
pkgs.nodejs_18
# Packages for postgres.
# There may be an alternative approach using docker
@romannurik
romannurik / duplicate-components.scripter.ts
Last active February 24, 2022 16:08
Figma + Scripter scripts
// Makes a copy of all selected components (how is this not built into Figma?)
let newSelection = [];
for (let component of figma.currentPage.selection.filter(node => node.type == 'COMPONENT')) {
let clone = component.clone()
clone.x += clone.width;
newSelection.push(clone);
}
figma.currentPage.selection = newSelection;
@romannurik
romannurik / Expando.jsx
Last active September 18, 2023 01:04
A simple expand/collapse animation using React
import React, {useRef, useLayoutEffect} from 'react';
const [DURMIN, DURMAX] = [0.1, .8];
const dur = f => Math.min(DURMAX, (1 - f) * DURMIN + f * DURMAX);
export function Expando({className, children, open}) {
open = !!open;
let node = useRef();
let lastOpen = useRef(open);
let duration = useRef(.5);
@romannurik
romannurik / .gitconfig
Last active February 2, 2023 18:38
Cheap Sketch file version control with Git + Kaleidoscope
# Add this to your .git/config file
[diff]
tool = SketchKaleidoscope
[difftool "SketchKaleidoscope"]
cmd = ./util-sketch-kaleidoscope-diff.bash \"$MERGED\" \"$LOCAL\" \"$REMOTE\"
@romannurik
romannurik / tab-widget.tsx
Created August 23, 2018 15:51
A proof-of-concept Tab widget for Framer X
import { ControlType, PropertyControls } from "framer";
import * as React from "react";
interface TabWidgetProps {
selectedTab: number;
accentColor: string;
}
@romannurik
romannurik / nunjucks-block-call-extension.js
Last active September 21, 2022 12:58
Nunjucks Block Call Extension (call a macro, pass content of sub-blocks as keyword args)
const TAG_NAME = 'blockcall';
const ARG_TAG_NAME = 'argblock';
class BlockCallExtension {
constructor(nunjucks) {
this.tags = [TAG_NAME];
this.nunjucks = nunjucks;
}

Keybase proof

I hereby claim:

  • I am romannurik on github.
  • I am romannurik (https://keybase.io/romannurik) on keybase.
  • I have a public key whose fingerprint is 9C43 1BD9 8E4A C518 5DF1 8FB5 F838 5A88 DB4C 6EE2

To claim this, I am signing this object:

@romannurik
romannurik / make_material_icon_svg_folder_for_iconjar.sh
Last active August 29, 2015 14:21
Quick script to make a folder of 24px SVGs from the downloadable material icons file.
#!/bin/sh
#
# 1. Download the file linked here:
# http://www.google.com/design/spec/resources/sticker-sheets-icons.html#sticker-sheets-icons-components
#
# 2. Run this:
# ./make_material_icon_svg_folder_for_iconjar.sh material-design-icons-1.0.1
#
DIR="$1"
@romannurik
romannurik / DrawInsetsFrameLayout.java
Created February 10, 2014 16:28
DrawInsetsFrameLayout — adding additional background protection for system UI chrome when using KitKat’s translucent decor flags.
/*
* Copyright 2014 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software