A shortcut to my favorite code. Want your own? Check out kevinschaul/jump-start-template.
jump-start is a lightweight system to organize that code that
you keep coming back to. It’s a structured GitHub repository
and a web frontend.
A starter is a directory of code that you like -- whether it’s a single script or an entire app. Each starter lives in a group directory. Organize similar code for easier navigation.
When you want to use your favorite code, locate that starter either in this README.md or in your gallery website. Copy the command, and run it in your terminal. Your starter code is now in your project.
Jump to group:
geo/counties.mk
jump-start use geo/counties.mk
A Makefile that creates a counties geojson file using my ideal project structure. Usage:
# Makefile
include counties.mk
all: data/build/counties.geojsongeo/pmtiles-counties
jump-start use geo/pmtiles-counties
A demo Makefile for creating map tiles at the county level
github-actions/node-release-please
jump-start use github-actions/node-release-please
GitHub action for automating release PRs and npm releases with release-please
node/cli
jump-start use node/cli
A node/ts CLI with argument parser, subcommands and tests.
Develop the command with:
npm install
npm run dev
Test with:
npm test
node/timestamp_if_changed
jump-start use node/timestamp_if_changed
A script to help organize timestamped versions of a file. Useful when you download a file every so often but only want to save it if its contents have changed.
Given a file, make a copy of LATEST_FILE with the current timestamp appended to the filename if the file is different from the previous version. The previous version is the file in the directory of LATEST_FILE with the same prefix as LATEST_FILE that has the most recent timestamp in its filename.
e.g. "evacuations-latest.geojson" would become "evacuations-2025-01-08T12:03:01.geojson"
Usage: node timestamp_if_changed.js LATEST_FILE
node/update_datawrapper_map
jump-start use node/update_datawrapper_map
A script to update a Datawrapper map's marker with a geojson file
Downloads the current map info, replaces the specified marker with a geojson file, and re-uploads the map info.
Usage: node update_datawrapper_map.js CHART_ID MARKER_TO_REPLACE PATH_TO_GEOJSON
project-structure/analysis
jump-start use project-structure/analysis
Builds out the analysis portion of my ideal project structure. The structure looks like this:
xx_project_slug
|-- analysis
| |-- .gitignore
| |-- analysis.Rproj r studio project
| |-- Makefile can include other makefiles
| |-- counties.mk @kevinschaul/jump-start/geo/counties.mk
| |-- data
| | |-- raw raw files needed to generate build/clean
| | |-- build generated files; gitignored
| | `-- clean outputs for project; gitignored
| |-- scripts
| |-- observablehq.config.js observable framework config
| `-- observable observable framework app
| |-- data -> ../data symlink
| `-- index.md
`... rest of project goes here
python/project
jump-start use python/project
A basic python project, using uv
python/pytest-evals-helpers
jump-start use python/pytest-evals-helpers
Given a bag of eval_results, generate metrics per prompt template, print them out and optionally save them to a file.
For use with pytest-evals
===== Metrics by Prompt Template =====
Template ID Sample Size Accuracy Precision Recall F1
-----------------------------------------------------------------
Template 1 200 84.00% 81.48% 88.00% 84.62%
Template 2 200 83.50% 79.13% 91.00% 84.65%
Template 3 200 81.00% 86.90% 73.00% 79.35%
python/script
jump-start use python/script
A python script with argparse
r/round
jump-start use r/round
Round with common behavior of rounding halves up
react/useMediaQuery
jump-start use react/useMediaQuery
Makes CSS media queries available in JS. Use like:
const isSkinny = useMediaQuery('(max-width: 600px)')
react/useViewportHeightUnits
jump-start use react/useViewportHeightUnits
Makes the newer CSS height units available in JS, like lvh and svh
https://css-tricks.com/the-large-small-and-dynamic-viewports/
Implementation based on https://github.com/joppuyo/large-small-dynamic-viewport-units-polyfill
react-d3/Chart
jump-start use react-d3/Chart
An empty React component for writing a responsive D3 chart.
- Adds size prop
- Sets up margin convention
react-d3/LineChart
jump-start use react-d3/LineChart
A React component for writing a responsive D3 line chart.
Why not use jump-start to add a starter? Run the following command, replacing
STARTER_GROUP with a group name (e.g. react), and STARTER_NAME with a
starter name (e.g. BarChart).
npx degit kevinschaul/jump-start-template/example/starter STARTER_GROUP/STARTER_NAME
Then, add your code, and edit the generated jump-start.yaml file to your liking.
Each starter must contain this file, which defines a few items used by the gallery.
Some examples:
description: Anything you want to write about this starter. It could be
the code’s features, any additional installation instructions, whatever. This
appears in the ## Starters section of the README.md, and in the web gallery.
defaultDir: Where the files generated by this starter will be placed by
default. For example, if you know that your React components live in
components/elements/, set the defaultDir to that. The jump-start command
shown in the README.md and gallery will place the files into this directory.
mainFile (optional): The file shown initially in the gallery's "Starter files
section.
preview (optional): Configuration that gets passed down to the gallery's
"Preview" section. The previews render via
Sandpack, so this
configuration mimics Sandpack's. Currently only supports React. Your starter
must include the file Preview.js, which default exports a React component.
preview.template (optional, e.g. "react"): The template used by Sandpack.
I've only used "react" but others may work too.
preview.dependencies (optional, e.g. d3: "5"): An object containing
dependencies for Sandpack to use for the preview. Think of it as the
package.json file for the preview. Anything your starter needs should be
listed here.
jump-start uses the tiged command to pull
starter files out of GitHub. That command has a feature that allows for some
actions to be run upon cloning -- most notably allowing a starter to remove
files. Those actions are defined in a file called degit.json.
Why degit, you reasonably ask? Well
degit was the original tool, but it
has been abandoned. tiged is the updated fork. tiged is degit spelled
backwards.
It is likely you'll want all of your starters to include the following
degit.json file, which automatically removes jump-start.yaml after your
started is used:
[
{
"action": "remove",
"files": ["jump-start.yaml"]
}
]
jump-start uses .env for a few settings:
GITHUB_USERNAME: GitHub usename used in commands and links. This is set by default in the deploy GitHub action.GITHUB_REPO: GitHub repo name used in commands and links. This is set by default in the deploy GitHub action.DEGIT_MODE: Setstiged's--modeoption. Can be "tar" (the default) or "git".
The jump-start gallery code lives in a separate repo, included here as an npm package. To run the gallery locally, using the starters in this repo as its data:
npm install
npm run dev
Open localhost:6006 in a browser.
This repo includes a deploy workflow that deploys your jump start gallery to Github pages.