Table of Contents
Rapid prototyping framework for HTML5 projects
To help speed up the process of creating and running small experiments and prototypes I've developed some tools which I believe take much of the pain out of the experience.
The idea being; the more time one can spend on the fun bits (vs the boring dev-ops bits) the better and more expressive prototyping can be.
Sketch-Kit is designed to live along-side your project (a sketch-kit/ folder will exist in the project root), to provide a sand-box infrastructure where you can work through solutions. Sketch-Kit is ideal for :
- Experimenting with js libraries used in your project code
- Nuancing transitions (without having to navigate and potentially contaminate project code)
- Sharing code examples with your team
- Quick iteration on sketches
- Not being bound to a safety-first developer mindset, encourage developers to have a little fun and be expressive!
-
Migrate to vite for HMR and build tools
-
UI Improvements:
- Add fullscreen button
- Add 'create sketch' button
-
Console Improvements:
- Tagging via 'create' statement
-
Add support for dat.gui to allow for easy control of sketch parameters
-
Add support for three.js to allow for easy 3D prototyping
-
Add support for p5.js to allow for easy 2D prototyping
Each 'sketch' gets a javascript file and scss file generated on creation.
When the sketch is selected from the menu (top left, very discrete) the js for the sketch is imported and attached to a dom element on the page. This element is exposed as this.el.
Each sketch exposes a interface for commonly used methods, the most important being 'draw' :
/**
* All rendering should be placed here. Tick durations are clamped to 60fps
* @param time : number
* @param deltaTime : number
*/
draw({time, deltaTime}) {
//rendering goes here!
}sketch-kit update
This is called by default by the following commands. Copies dependencies from package.json into the sketches folder.
Note; as of writing, most npm dependencies don't support es6 modules, to import deps into your sketch you'll most likely need to do something like the following to statically import them :
import '../../../node_modules/[library path]
sketch-kit init
This command will add a 'sketches' folder to the root of your directory. Inside you'll find :
sketches/
--------/assets
--------/css
--------/data
--------/js
--------/--------/main.js
--------/--------/sketches.js
--------/--------/utils
--------/--------/views
--------/--------/--------/components
--------/--------/--------/sketches
--------/node_modules (optional)
--------/scss
--------/--------/sketches
--------/index.html
--------/sketch-kit.config.json
Options
- Project Name. Name for the project (basically becomes the title for the rendered page).
- Copy Node Dependencies. sketch-kit will automatically copy all dependencies from your project.json, making them available to your sketches (note: js modules only).
sketch-kit run
sketch-kit will start up browser-sync and the watch tasks for your scss.
sketch-kit create [sketch name] [copy name(optional)]
sketch-kit will add a new sketch to your sketches and wil now be available in the menu. This sketch includes the base sketch view template and a scss file with the sketch name being used as the css class reference.
If the sketch already exists, you'll be prompted to copy or replace, creating a new nested iteration.
Note; give sketches unique names to ensure that there aren't conflicts when copying. The replace method will search through the code and indescriminately replace the sketch name with whatever the next sketch name will be
sketch-kit build
sketch-kit will create a build/ folder containing a static build of the project.
configFile NO LONGER SUPPORTED
Define an alternative config file for different distributions.
sketch-kit run --configFile alt.config.json
If the sketch already exists, you'll be prompted to copy or replace, creating a new nested iteration.
The base sketch-kit.config.json defines the sketches which are visible while running sketch-kit, and provides a target for adding new sketches.
