Home / projects / czaas v4

CZaas V4

After trying out Gatsby for the first time I was hooked. I built a demo for myself using netlify CI/CD and netlifty auth. I did this within 2-3 evenings.

I love the git based deployment approach that gives me branch PR reviews. I haven't played* with other services such as forms or A/B feature branch testing which looks like they're as easy to work with giving great value.

Why rebuild my site?

Unfortunately firebase has a relatively slow first response, 200 - 400ms, to responses which wasn't getting called until after the react bundle would download and mount.

I knew I wanted my site to be built with gatsby and CI/CD platform with netlify. I wanted to expand on my theming by creating a theme creator. I'm looking forward to expanding on this.

After using styled components which I think are good for a component based framework, I found I mixed JS in my SCSS much more than I liked. Having to escape template literals and use a arrow function to get access to variables seemed more clunky than I enjoyed. I'm sure there are great patterns out there and would be willing to use them again if a better pattern approached.

Theming

A JSON based CSS theme manager is what I settled on. This allowed for easy changing values via JS and placing into the document, as well as accessibly color checks to make sure contrast ratio was good.

I created a theme store to easily access every theme locally. Check it out!

{
  "ZQlSdEZGo": "JS",
  "someRandomId613": "Some Another Name"
}

and each theme would have it's own item

{
    "ZQlSdEZGo": {
        id: "ZQlSdEZGo",
        name: "JS",
        fg: "#fff",
        bg: "#222",
        primary: "#ffe101",
        "primary-light": "#FFE734",
        "primary-dark": "#CDB500",
        "text-on-primary": "#000000",
        error: "#E10711",
        "error-text": "#ffffff",
        "border-radius": "0px",
    }
}

Then I would have a function that iterates and places each key: value pair as a CSS variable behind their own style tag that I inject into the documents head and an optional CSS scope for theme previews.

The outputted CSS looks like this:

:root {
    --id: ZQlSdEZGo;
    --name: JS;
    --fg: #fff;
    --bg: #222;
    --primary: #ffe101;
    --primary-light: #FFE734;
    --primary-dark: #CDB500;
    --text-on-primary": #000000;
    --error: #E10711;
    --error-text: #ffffff;
    --border-radius: 0px;
}

I would recommend is scoping your variables with a unique key. I'm hoping to release my generator as it's own package as I find it extremely useful and want to use it and my components in the future.

Checkout my theme creator.

Content Management

I'm using MDX (mark down jsx) to write content which allows me to place react components within text! mark down has been my go to method for managing content for the past several years and now it's dynamic 😎. Previously I was able to use HTML within my markdown through transpiling on the fly but now with gatsby I'm able to generate each page as it's own application with built in page and bundle chunking.

In the future I might checkout netlify's CMS or another service like contentful.

What else do I want to do?

  1. Flesh out more components, starting with themed form elements
  2. Fork a popular library and inject my theme values and allow for easily created themable components to use in future projects.
  3. Write more content... I could go into depth on many patterns I've used on this site and other projects
  4. More experimentation, learning, and fun projects I can share

*It's great that I get to call researching and discovering new technology/frameworks "playing"