- 0. Documentation
- 1. Debugging Tools
- 2. YAML
- 3. CSS/JQuery Selectors
- 4. Mustache: logic-less templates
- 5. REST API Calls
- 6. jq
- 7. JSON Schema
- 8. JSON Schema Forms
- 9. Nunjucks: templates with logic
- 10. Regular Expressions
0. Documentation
- The Reference tab in the Workshop allows you to search all the bricks available to you and see their inputs
- The PixieBrix Marketplace has information on all the public bricks, including "How to Use" sections with information on how to use them
1. Debugging Tools
- The Page Editor and Workshop both have a "Logs" tab that displays the logs for current brick
- By default, PixieBrix does not log brick input and outputs (because they may contain PII). To enable enable logging brick inputs and outputs. Settings → Developer Settings
2. YAML
YAML (YAML Ain't Markup Language) is a mark up language that's popular for configuration. It's used by popular projects like GitHub Actions, Kubernetes, and more
YAML is the configuration language used in PixieBrix's Workshop. The Page Editor generates YAML automatically. However, it's useful to know the basics to make changes
- Configuration File Basics
- YAML Tutorial: Everything You Need to Get Started in Minutes
- YAML Multiline Strings: great for HTML, Markdown, and formatting complicated jq expressions
- Quoting - Learn YAML
3. CSS/JQuery Selectors
Selectors are used to place elements on pages, read data, and target elements for actions (e.g., click, highlight, hide, etc.)
PixieBrix supports JQuery selectors because it supports a superset of CSS selectors, such as :contains
and :input
For debugging purposes, PixieBrix automatically makes JQuery available on pages the mods has access to. To use it, use $$jquery("
selector
")
in the Chrome DevTools console
4. Mustache: logic-less templates
{{{
or {{&
syntaxMustache is a popular templating library. There's libraries for it in nearly every language
5. REST API Calls
- Understanding and using REST APIs
- Inspect Network Activity with the Chrome DevTools
6. jq
jq is a domain-specific language for selecting/transforming JSON data. In PixieBrix, you use it via the @pixiebrix/jq
brick
.
when accessing properties in the context (because .
refers to the input data to jq)- Working with jq
- An Introduction to JQ
- JQ Play: a site for testing jq expressions against sample data
7. JSON Schema
JSON Schema is specification language for describing the shape of JSON Data. In PixieBrix, we use it to specify the inputs/outputs of bricks.
If you're coming from the Javascript world, JSON Schemas are analogous to React's prop-types or schema validators such as Yup. In the REST API world, these are similar to an OpenAPI/Swagger specification
8. JSON Schema Forms
The forms of @pixiebrix/form-modal
and @pixiebrix/form
are powered by a library called react-jsonschema-form. The react-jsonschema-form takes a JSON Schema and a UI Schema and produces a form
9. Nunjucks: templates with logic
safe
filterNunjucks (based on Jinja2) is a templating system that supports conditional logic and fields.
10. Regular Expressions
Regular expressions are used to parse text. You can use the @pixiebrix/regex
group to capture named groups. The jq brick (see above) also supports regular expressions for test/capture/substitution
- Using named groups
- ⭐ Regex 101: a site for testing and explaining regular expressions
- Regular expressions in jq
- RegexLearn (free step-by-step practice with Regex)